2.5 KiB
2.5 KiB
安智伴家属端设计规范 v2
本规范以移动版原型为唯一视觉基准，设计目标是「安静、可信、清晰」：减少装饰，优先呈现长辈状态、留言与陪伴动态。
画布与布局
- 移动端内容宽度：
100%，最大430px；原型验收尺寸为390 × 844。 - 页面背景：
#F4F3F1；桌面居中画布：#E9E7E3。 - 页面水平留白：
14px；模块垂直间距：12px，首页可用14px。 - 主页面预留
84px底部导航空间；详情页使用顶部返回栏，不显示底部导航。
颜色
| 语义 | 值 | 用途 |
|---|---|---|
| 主文字 | #201D1A |
标题、正文、深色按钮 |
| 次文字 | #3D3833 |
列表正文 |
| 辅助文字 | #8A857E |
时间、状态、说明 |
| 弱辅助文字 | #B3AEA6 |
次级时间、图标 |
| 品牌强调 | #C05A1E |
主按钮、未读、当前导航 |
| 成功/在线 | #3F9D63 |
在线状态、成功反馈 |
| 危险操作 | #B4482C |
退出、解绑 |
| 分隔线 | rgba(32,29,26,.08) |
卡片与列表分隔 |
所有值均定义在 app/globals.css 的 CSS 变量中，页面不得自行引入新的近似色。
字体与信息层级
- 字体栈：系统无衬线字体，中文优先苹方、冬青黑体、微软雅黑。
- 页面标题：
20px / 700；详情标题：16px / 700。 - 区块标题：
14px / 700；列表正文：14px / 1.5。 - 元信息：
11–12px；数字指标：18–20px / 700。 - 不使用全大写眉题、衬线展示字体或大面积超大标题。
组件规则
- 卡片：白色背景、
12px圆角、1px弱边框，不使用重阴影。 - 列表：左右
14px、上下11–13px；列表内部使用弱分隔线。 - 按钮：高度
40px，圆角10px；小按钮高度32px、圆角8px。 - 输入框：高度
44px，圆角10px；聚焦时使用品牌色边框与轻微外环。 - 标签：仅用于「重要」等高价值状态，字号
10px，浅品牌色背景。 - 底部导航：固定四项——概览、留言、设备、我的；当前项使用品牌色。
- 分段控件：浅灰底，选中项为白底并带极轻阴影。
交互与可访问性
- 页面跳转使用 Next.js
Link，保留客户端导航与预取能力。 - 可点击区域不小于
32px；主要操作不小于40px。 - 状态不能只依赖颜色，在线、未读、重要均同时提供文字或数量。
- 动效只用于导航进度、扫码线和必要反馈；尊重系统减少动态设置。