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