53 lines
2.5 KiB
Markdown
53 lines
2.5 KiB
Markdown
# 安智伴家属端设计规范 v2
|
||
|
||
本规范以 2026-07-19 最新移动版原型为唯一视觉基准，设计目标是「安静、可信、清晰」。保留暖纸底色与铜橙主色，优先呈现长辈状态、家庭协作和可执行动作。
|
||
|
||
## 画布与布局
|
||
|
||
- 移动端内容宽度：`100%`，最大 `430px`；原型画板为 `430 × 912px`。
|
||
- 页面背景：`#F5F4F2`；桌面居中画布：`#E7E4DF`。
|
||
- 页面水平留白：`18px`；主模块垂直间距：`18px`。
|
||
- 主页面顶部留白 `22px`，底部为五项固定导航，内容预留 `110px`。
|
||
- 桌面端画板圆角 `30px`，移动端贴合视口，不保留外部装饰。
|
||
|
||
## 颜色
|
||
|
||
| 语义 | 值 | 用途 |
|
||
| --- | --- | --- |
|
||
| 主文字 | `#211E1A` | 标题、正文、深色按钮 |
|
||
| 次文字 | `#3D3833` | 列表正文 |
|
||
| 辅助文字 | `#8B857C` | 时间、状态、说明 |
|
||
| 弱辅助文字 | `#B5AFA6` | 次级时间、图标 |
|
||
| 品牌强调 | `#C05A1E` | 主按钮、未读、当前导航 |
|
||
| 成功/在线 | `#3F9D63` | 在线状态、成功反馈 |
|
||
| 危险操作 | `#B4482C` | 退出、风险状态 |
|
||
| 橄榄辅助 | `#65765A` | 设备、陪伴类图标 |
|
||
| 分隔线 | `rgba(33,30,26,.08)` | 卡片与列表分隔 |
|
||
|
||
所有值均定义在 `app/globals.css`，页面不要自行引入近似色。
|
||
|
||
## 字体与信息层级
|
||
|
||
- 字体栈：系统无衬线字体，中文优先苹方、冬青黑体、微软雅黑。
|
||
- 页面标题：`21px / 700`；详情标题：`16px / 700`。
|
||
- 区块标题：`15px / 700`；列表正文：`13–14px / 1.6`。
|
||
- 元信息：`11.5–12.5px`；数字指标：`21px / 700`。
|
||
|
||
## 组件规则
|
||
|
||
- 卡片：白色背景、`14px` 圆角、`1px` 弱边框，不使用重阴影。
|
||
- 列表：左右 `16px`、上下 `13px`，内部使用弱分隔线。
|
||
- 主按钮与输入框：统一 `44px` 高、`10–11px` 圆角。
|
||
- 小按钮：`32px` 高、`8px` 圆角。
|
||
- 表单字段必须有标签；下拉框隐藏系统箭头并使用统一箭头。
|
||
- 标签只用于重要状态，使用浅品牌色或浅成功色背景。
|
||
- 底部导航固定五项：守护、家庭、照护、陪伴、我的。
|
||
- 照护页使用浅灰分段控件，选中项为白底并带极轻阴影。
|
||
|
||
## 交互与可访问性
|
||
|
||
- 页面跳转使用 Next.js `Link`，保留客户端导航与预取能力。
|
||
- 主要点击区域不小于 `40px`，小型操作不小于 `32px`。
|
||
- 状态不能只依赖颜色，在线、未读、重要均同时提供文字或数量。
|
||
- 动效仅用于在线呼吸点、导航进度和必要反馈，并尊重系统减少动态设置。
|