2.5 KiB
2.5 KiB
安智伴家属端设计规范 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。 - 状态不能只依赖颜色，在线、未读、重要均同时提供文字或数量。
- 动效仅用于在线呼吸点、导航进度和必要反馈，并尊重系统减少动态设置。