# 《智慧养老与主动健康管理平台 UI/UX 设计最终规范（可直接使用版）》

> **文档定位**：本文档是《智慧养老与主动健康管理平台》的UI/UX设计最终规范，作为UI设计师、前端开发、产品经理的执行依据。
> **核心变更**：主入口是“带参数的跳转链接”，统一登录页仅作冷启动兜底；各角色独立页面组件，共享底层能力；老人端优先代登录，扫码仅作辅助；Token无感刷新，老人端延长有效期。
> **覆盖范围**：统一登录页、身份选择页、老人端、家属端、志愿者端、专家端、后台管理端，共7类页面。
> **可直接使用**：本文档已通过批判性审查与定稿，覆盖全局设计规范、各端UI设计、组件库规范、交付清单，可直接交付团队使用。


## 一、 全局设计规范

### 1.1 设计原则

| 原则 | 说明 |
|---|---|
| **适老化优先** | 老人端所有设计以“看得清、点得准、听得懂、记得住”为标准 |
| **角色差异化** | 同一套WebApp，通过角色动态渲染不同首页和菜单 |
| **状态可感知** | 任何操作后必须有明确的视觉反馈（加载中、成功、失败） |
| **操作零学习** | 关键路径不超过3步，避免多层嵌套 |
| **容错优先** | 关键操作二次确认，误触可撤销 |
| **主入口是跳转链接** | 推送/分享/扫码携带参数，用户点击直接进入目标页面 |
| **独立页面组件** | 各角色页面独立开发，共享底层能力，不强行复用UI |

### 1.2 色彩规范

#### 主色调
| 颜色 | 色值 | 用途 |
|---|---|---|
| 主色（紫） | #6B5CE7 | 按钮、导航栏、品牌色 |
| 主色浅 | #8B7FE8 | 渐变背景、次级按钮 |
| 主色深 | #4A3FB5 | 按钮按压态 |

#### 功能色
| 颜色 | 色值 | 用途 |
|---|---|---|
| 成功绿 | #52C41A | 评估正常、操作成功 |
| 警告黄 | #FAAD14 | 中度风险、待处理 |
| 危险红 | #FF4D4F | 高风险、SOS、错误 |
| 信息蓝 | #1890FF | 提示信息、链接 |

#### 中性色
| 颜色 | 色值 | 用途 |
|---|---|---|
| 标题黑 | #1A1A1A | 一级标题 |
| 正文灰 | #333333 | 正文内容 |
| 辅助灰 | #666666 | 次要信息 |
| 占位灰 | #999999 | 占位符、禁用态 |
| 分割线 | #E8E8E8 | 分割线、边框 |
| 背景灰 | #F5F5F5 | 页面背景 |

#### 角色主题色
| 角色 | 主题色 | 说明 |
|---|---|---|
| 老人端 | #6B5CE7（紫） | 温暖、信任 |
| 家属端 | #1890FF（蓝） | 理性、专业 |
| 志愿者端 | #52C41A（绿） | 活力、服务 |
| 专家端 | #722ED1（深紫） | 权威、专业 |
| 后台管理 | #2F54EB（深蓝） | 严肃、高效 |

### 1.3 字体规范

#### 字号
| 层级 | 老人端 | 其他端 | 字重 | 用途 |
|---|---|---|---|---|
| 大标题 | 24px | 20px | Bold | 页面标题 |
| 标题 | 20px | 18px | Medium | 模块标题 |
| 正文 | 18px | 16px | Regular | 正文内容 |
| 辅助 | 16px | 14px | Regular | 次要信息 |
| 说明 | 14px | 12px | Regular | 备注、说明 |

#### 行高
- 老人端：1.8倍
- 其他端：1.5倍

#### 字体
- 中文：PingFang SC / 思源黑体
- 数字/英文：SF Pro / Roboto

### 1.4 按钮规范

| 类型 | 高度 | 字号 | 圆角 | 用途 |
|---|---|---|---|---|
| 大按钮（老人端） | 56px | 20px | 12px | 主操作 |
| 中按钮 | 48px | 18px | 8px | 次级操作 |
| 小按钮 | 36px | 16px | 6px | 辅助操作 |
| 文字按钮 | - | 16px | - | 链接式操作 |

**按钮状态**：
- 默认：主色填充
- 按压：颜色加深，轻微缩小
- 禁用：灰色填充，不可点击
- 加载中：显示Loading图标，不可重复点击

### 1.5 间距规范

| 间距 | 值 | 用途 |
|---|---|---|
| 超大间距 | 32px | 模块之间 |
| 大间距 | 24px | 卡片之间 |
| 中间距 | 16px | 元素之间 |
| 小间距 | 12px | 文字与图标 |
| 超小间距 | 8px | 紧凑元素 |

### 1.6 图标规范

- 图标库：Vant Icons（基础）+ 自定义SVG（业务）
- 老人端图标：尺寸不低于32px，线条加粗，避免细线
- 图标必须配文字说明（老人端），不能仅用图标
- SOS图标：红色，尺寸不低于48px，闪烁动画

### 1.7 动画规范

| 场景 | 动画 | 时长 |
|---|---|---|
| 页面切换 | 右滑进入 | 300ms |
| 弹窗出现 | 淡入+上移 | 200ms |
| 按钮按压 | 缩小0.95倍 | 100ms |
| 加载中 | 旋转 | 循环 |
| SOS触发 | 脉冲闪烁 | 循环 |
| 新消息提示 | 抖动 | 500ms |


## 二、 统一登录页 UI 设计

### 2.1 定位说明
统一登录页是**冷启动兜底入口**，主要用于：
- 用户主动访问（收藏、搜索）
- Token过期后重新登录
- 首次使用（通过推送/分享/扫码进入时已自动登录）

### 2.2 页面布局

**顶部**：
- 紫色渐变背景（#6B5CE7 → #8B7FE8）
- 系统Logo（圆形，居中，120x120）
- 系统名称“智慧养老健康管理平台”（大标题，24px，白色）
- 副标题“关爱老人，从健康开始”（16px，白色80%透明度）

**中部（白色卡片，圆角16px）**：
- 登录方式Tab切换：
  - 【扫码登录】（默认）
  - 【手机号登录】
  - 【账号密码登录】（仅专家/管理员可见，老人/家属端隐藏）

**扫码登录**：
- 二维码区域（240x240，居中）
- 二维码上方显示“请用微信扫一扫”
- 二维码下方显示有效期倒计时（5分钟）
- 二维码过期自动刷新
- 底部提示“扫码后自动登录，无需输入”

**手机号登录**：
- 手机号输入框（高度56px，字号18px）
- 验证码输入框（高度56px，字号18px）+ 【获取验证码】按钮（60秒倒计时）
- 底部提示“未注册的手机号验证通过后将自动注册”

**账号密码登录**（仅专家/管理员）：
- 账号输入框（高度56px）
- 密码输入框（高度56px，带可见切换）
- 滑动验证
- 【登录】按钮（高度56px）

**底部**：
- 用户协议、隐私政策链接（字号14px，灰色）
- 备案信息（字号12px，灰色）

### 2.3 交互细节

| 场景 | 交互 |
|---|---|
| 扫码成功 | 二维码区域变为“✅ 扫码成功，正在登录...” |
| 扫码失败 | 显示红色错误提示，3秒后消失，二维码自动刷新 |
| 手机号验证码发送 | 按钮变为“60秒后重新获取”，倒计时结束恢复 |
| 登录成功 | 跳转到角色识别页（或直接进入首页） |
| 登录失败 | 显示错误提示，3秒后消失 |

### 2.4 适老化处理
- 所有字号≥18px
- 输入框高度≥56px
- 按钮高度≥56px
- 扫码登录作为辅助，手机号登录为主
- 关键操作有语音提示（可选）


## 三、 身份选择页 UI 设计

### 3.1 定位说明
新用户首次注册时，引导选择身份。已注册用户如有多角色，跳过此页。

### 3.2 页面布局

**顶部**：
- 标题“请选择您的身份”（24px，加粗）
- 副标题“选择后可在个人中心修改”（16px，灰色）

**中部（角色卡片列表）**：
- 每张卡片：图标 + 角色名称 + 角色说明
  - 老人卡片：“我是老人，查看我的健康评估”
  - 家属卡片：“我是家属，代管老人健康”
  - 志愿者卡片：“我是志愿者，为老人提供服务”
  - 专家卡片：“我是专家，审核评估与解答问题”（仅受邀请用户可见）

**底部**：
- 【确认】大按钮（高度56px）

### 3.3 交互细节
- 点击卡片选中（高亮，主色边框）
- 点击【确认】后进入对应工作台
- 默认角色自动记忆，下次登录直接进入


## 四、 老人端 WebApp UI 设计

### 4.1 首页（老人视图）

**顶部欢迎栏**：
- 紫色渐变背景
- 左侧：圆形头像 + “早上好，王奶奶”（20px，白色）
- 右侧：当前日期 + 天气（16px，白色）
- 底部：当前海拔显示（如“海拔3200m”）

**中部功能区（宫格布局，2列）**：
| 图标 | 文字 | 副标题 | 路由 |
|---|---|---|---|
| 📋 | 评估中心 | 6项健康评估 | /assessment/tasks |
| 💊 | 我的处方 | 查看当前处方 | /prescription |
| 🏃 | 视频跟练 | 跟随专家练习 | /exercise |
| 📚 | 健康学堂 | 个性化推荐 | /education |
| 💬 | 健康问答 | 问专家问题 | /qa |
| 📅 | 预约服务 | 预约志愿者 | /appointment |

**底部快捷栏（固定）**：
- 左侧：SOS按钮（红色，56x56，脉冲动画）
- 中部：一键呼叫家属（绿色）
- 右侧：个人中心（蓝色）

**今日提醒**：
- 卡片列表，显示今日待办事项
- 每条提醒左侧有图标，右侧有“已完成”勾选框

**底部导航栏**：
- 首页 / 评估 / 处方 / 我的

### 4.2 评估任务列表页

**顶部**：
- 标题“我的评估任务”
- 右侧显示完成进度“3/6 已完成”

**任务卡片列表**：
- 已完成：绿色勾选图标 + 量表名称 + 结论
- 待填写：橙色时钟图标 + 量表名称 + “预计用时3分钟” + 【立即填写】按钮
- 无需填写：灰色横线 + 量表名称 + “初筛未发现风险”
- 已复用：蓝色图标 + 量表名称 + “使用3个月内的历史数据”

**底部**：
- 【继续填写下一张】大按钮（如果有待填写任务）

### 4.3 量表答题页

**顶部固定区（浅蓝色卡片）**：
- 量表名称（大标题）
- 评分标准说明（如“0-4分：无抑郁；5-9分：中度”）
- 语音读题按钮（喇叭图标）

**题目列表**：
- 每题包含：题号（蓝色加粗）+ 题目文本（18px）
- 下方：大尺寸下拉选择框 或 大按钮单选
- 语音读题图标（每道题旁）

**底部**：
- 【提交评估】大按钮（固定底部）
- 提交后弹窗显示结论

**结论弹窗**：
- 大标题：“✅ 评估完成”
- 得分：大号字体“您的得分：7分”
- 结论：大字“中度抑郁”
- 建议：通俗语言描述
- 按钮：【查看推荐内容】【继续填答】

### 4.4 综合评估报告页

**顶部**：
- 报告生成时间
- 专家复核标识“✅ 已复核”

**整体健康等级**：
- 大字显示“中高风险”（红色）
- 环形进度图

**关键问题列表**：
- 每项：图标 + 问题描述 + 依据量表

**运动建议**：
- 能否运动
- 推荐强度
- 运动禁忌
- 推荐运动类型
- 海拔调整提示

**复评计划**：
- “建议4周后复评GDS-15和跌倒风险量表”

**底部**：
- 免责声明（小字）

### 4.5 我的处方页

**顶部**：
- 当前处方状态
- 处方生成时间

**处方详情**：
- 运动类型、频次、强度、时长
- 注意事项

**底部**：
- 【采纳处方】【忽略处方】两个大按钮

**已采纳后**：
- 显示【开始跟练】按钮
- 显示跟练进度

### 4.6 视频跟练页

**上半屏**：
- 专家示范视频播放器
- 全屏切换按钮

**下半屏**：
- 前置摄像头画面（画中画）
- AI检测状态提示（“检测中”）

**预警提示区**：
- 屏幕中央浮现动态文字：“膝盖微屈”、“动作很好，继续保持”
- 语音播报（可关闭）

**底部**：
- 【紧急停止】按钮（红色，常驻）
- 跟练进度条

### 4.7 健康问答页

**顶部**：
- 搜索框“🔍 输入您的问题”
- 语音提问按钮

**常见问题**：
- 卡片列表展示热门问题
- 点击直接查看答案

**我的提问历史**：
- 显示问题、答案来源（专家审核/AI生成）、时间

**底部**：
- 【提问】大按钮

### 4.8 健康学堂页

**顶部**：
- 标签栏：全部 / 慢病管理 / 高原健康 / 运动康复 / 营养膳食 / 心理健康 / 跌倒预防

**个性化推荐**：
- 大卡片展示推荐内容（封面图 + 标题 + 类型 + 时长）

**打卡任务**：
- 卡片列表：任务名称 + 完成状态 + 打卡按钮

### 4.9 个人中心页

**顶部**：
- 头像 + 姓名 + 老人类型标签
- 角色切换入口（如有多角色）

**信息区**：
- 基本资料（查看/编辑）
- 家庭组管理
- 紧急联系人
- 评估历史
- 问答历史

**设置区**：
- 大字体模式开关
- 语音播报开关
- 消息通知设置
- 隐私政策
- 退出登录

### 4.10 SOS紧急联系页

**布局**：
- 全屏红色渐变背景
- 中央大按钮“SOS”（脉冲动画）

**点击后**：
- 显示“正在呼叫紧急联系人...”
- 显示当前定位
- 显示已通知的联系人列表

**取消按钮**：
- 底部“我没事，取消”按钮（防止误触）

### 4.11 适老化设计要点

| 要点 | 规范 |
|---|---|
| 正文字号 | ≥18px |
| 按钮高度 | ≥56px |
| 图标尺寸 | ≥32px |
| 行高 | ≥1.8倍 |
| 色彩对比度 | ≥4.5:1 |
| 点击区域 | ≥48x48px |
| 关键操作 | 二次确认 |
| 错误提示 | 大字体、红色、语音播报 |
| 语音辅助 | 读题、读结论、读提醒 |


## 五、 家属端 WebApp UI 设计

### 5.1 家属首页

**顶部**：
- 蓝色渐变背景
- “您好，张先生”（20px，白色）
- 管理的老人数量

**老人卡片列表**：
- 每位老人一张卡片：头像 + 姓名 + 年龄 + 健康等级
- 点击进入老人详情

**快捷操作**：
- 代填量表
- 查看报告
- 确认服务
- 家庭组管理

**底部导航**：首页 / 老人 / 服务 / 我的

### 5.2 老人详情页

**顶部**：
- 老人头像 + 姓名 + 风险等级

**Tab切换**：
- 基本信息 / 评估记录 / 处方记录 / 服务记录

**基本信息**：
- 基本档案
- 紧急联系人
- 家庭组成员

**评估记录**：
- 时间线展示历次评估
- 点击查看详情

**处方记录**：
- 列表展示历次处方
- 显示采纳/忽略状态

### 5.3 代填量表页

- 与老人端量表答题页一致
- 顶部增加“代填模式”标识
- 底部显示操作人“由家属张先生代填”

### 5.4 服务确认与评价页

**服务信息**：
- 志愿者姓名、服务时间、服务类型
- 服务照片（带水印）

**确认操作**：
- 【确认完成】大按钮
- 【我要投诉】文字按钮

**评价**：
- 5星评分
- 文字评价（可选）

### 5.5 家庭组管理页

**成员列表**：
- 头像 + 姓名 + 关系 + 角色
- 主管理员标识

**操作**：
- 添加成员
- 移除成员
- 修改角色

### 5.6 健康周报页

- 本周评估变化
- 本周跟练完成度
- 本周服务记录
- 下周建议


## 六、 志愿者端 WebApp UI 设计

### 6.1 志愿者首页

**顶部**：
- 绿色渐变背景
- “您好，李志愿者”（20px，白色）
- 接单状态开关（接单中/休息中）

**数据概览**：
- 今日订单数
- 本周服务时长
- 累计服务次数
- 信用分

**快捷操作**：
- 附近订单
- 我的服务记录
- 个人资料

**底部导航**：首页 / 订单 / 记录 / 我的

### 6.2 附近订单页

**顶部**：
- 地图（显示附近订单标记）
- 列表/地图切换

**订单列表**：
- 每单显示：老人姓名（脱敏）+ 距离 + 服务类型 + 预约时间
- 【接单】按钮

### 6.3 订单详情页

**订单信息**：
- 老人姓名 + 地址（脱敏）
- 服务类型
- 预约时间

**操作按钮**：
- 【导航】跳转地图
- 【开始服务】按钮（到达后点击）

### 6.4 服务签到页

**签到要求**：
- GPS定位（显示当前距离老人家距离）
- 拍照上传（带水印：时间+地点）

**签到成功**：
- 显示“签到成功，服务开始”

### 6.5 服务进行中页

**服务SOP**：
- 签到 ✅
- 问候老人
- 协助测评 / 指导跟练
- 记录服务内容
- 签退

**操作**：
- 上传服务照片
- 填写服务记录

### 6.6 服务签退页

- 签退GPS定位
- 服务总结（文字）
- 【完成服务】按钮

### 6.7 我的服务记录页

- 时间线展示历次服务
- 每条显示：老人 + 服务类型 + 时长 + 评价星级

### 6.8 个人资料与资质页

- 基本信息
- 资质证明（身份证、健康证、无犯罪记录证明）
- 资质状态（待审核/已通过/已过期）
- 培训记录


## 七、 专家端 WebApp UI 设计

### 7.1 专家工作台

**顶部**：
- 深紫渐变背景
- “您好，王医生”（20px，白色）
- 今日值班状态

**数据概览**：
- 待答问题数
- 待复核报告数
- 待审核知识库数
- 今日已回答

**快捷操作**：
- 问题应答
- 报告复核
- 知识库审核

**底部导航**：工作台 / 问题 / 报告 / 我的

### 7.2 问题应答页

**问题列表**：
- 每条显示：老人信息（脱敏）+ 问题内容 + 提问时间 + 紧急程度
- 一级问题（<4小时）、二级问题（<24小时）、三级问题（<48小时）

**问题详情**：
- 老人档案摘要（年龄、性别、评估结论）
- 问题内容
- 历史问答记录

**回答区**：
- 文本输入框
- 常用模板快捷插入
- 【提交回答】按钮
- 【转交上级】按钮

### 7.3 报告复核页

**待复核报告列表**：
- 老人信息 + 报告生成时间 + AI建议摘要

**报告详情**：
- 各量表结论
- AI生成的综合评估
- 运动建议

**复核操作**：
- 【通过】按钮
- 【修改后通过】按钮
- 【驳回】按钮

### 7.4 知识库审核页

**待审核列表**：
- AI生成的问题和答案
- 相似度提示

**审核操作**：
- 【通过】入库
- 【修改后通过】
- 【驳回】


## 八、 后台管理端 UI 设计

### 8.1 整体布局

**左侧树形菜单**：
- 可折叠
- 当前菜单高亮

**顶部导航栏**：
- Logo + 系统名称
- 面包屑导航
- 消息通知
- 用户头像 + 下拉菜单

**右侧内容区**：
- 页面标题
- 操作区
- 数据表格/卡片

### 8.2 数据看板

**顶部指标卡**：
- 老人总数
- 今日新增
- 活跃老人数
- 高风险老人数

**中部地图**：
- 全国/全省地图热力图
- 老人分布点聚合
- 点击下钻到市级/县级

**底部图表**：
- 评估完成趋势（折线图）
- 风险等级分布（饼图）
- 慢病类型分布（柱状图）

### 8.3 老人档案管理

**搜索区**：
- 姓名/身份证号搜索
- 区划筛选
- 风险等级筛选
- 状态筛选

**列表区**：
- 表格展示：姓名 + 年龄 + 区划 + 风险等级 + 状态 + 操作
- 操作：【查看】【编辑】【归档】

**详情抽屉**：
- 点击“查看”从右侧滑出
- 展示完整档案 + 评估历史 + 处方记录 + 服务记录

### 8.4 组织架构管理

**树形展示**：
- 左侧树形结构
- 点击节点显示详情

**节点操作**：
- 新增子节点
- 编辑节点
- 停用/启用

### 8.5 量表管理

**量表列表**：
- 量表名称 + 当前版本 + 状态 + 操作

**版本管理**：
- 版本列表
- 新建版本
- 版本对比（Diff视图）

**版本对比**：
- 左侧旧版本，右侧新版本
- 差异高亮显示

### 8.6 知识库管理

**列表**：
- 分类 + 问题 + 来源 + 审核状态 + 操作

**操作**：
- 新增
- 编辑
- 审核
- 停用

### 8.7 专家排班

**日历视图**：
- 按周展示
- 每位专家每天的排班

**操作**：
- 新增排班
- 修改排班
- 请假

### 8.8 志愿者管理

**列表**：
- 姓名 + 归属机构 + 资质状态 + 信用分 + 操作

**操作**：
- 资质审核
- 查看服务记录
- 停用

### 8.9 服务记录查询

**搜索区**：
- 志愿者 + 老人 + 服务类型 + 时间范围

**列表**：
- 表格展示：服务时间 + 志愿者 + 老人 + 服务类型 + 时长 + 老人评价

### 8.10 投诉仲裁

**列表**：
- 投诉时间 + 投诉人 + 被投诉人 + 投诉类型 + 状态

**处理**：
- 查看详情
- 联系双方
- 仲裁结论
- 处罚措施

### 8.11 数据统计与导出

**统计维度**：
- 按区划
- 按时间
- 按评估类型
- 按风险等级

**导出**：
- 支持导出Excel/CSV
- 支持按科研格式导出


## 九、 组件库规范

### 9.1 基础组件

| 组件 | 说明 |
|---|---|
| 按钮 | 大/中/小/文字按钮，支持加载态、禁用态 |
| 输入框 | 支持清空、密码可见、字数统计 |
| 下拉选择 | 支持搜索、多选、拼音排序 |
| 单选框 | 大尺寸（老人端） |
| 复选框 | 大尺寸（老人端） |
| 开关 | 大尺寸（老人端） |
| 日期选择 | 支持年月日、年月 |
| 上传 | 支持图片、文件 |

### 9.2 业务组件

| 组件 | 说明 |
|---|---|
| 老人卡片 | 头像 + 姓名 + 风险等级 |
| 量表卡片 | 量表名称 + 状态 + 操作 |
| 处方卡片 | 处方内容 + 采纳/忽略 |
| 服务订单卡片 | 老人 + 服务类型 + 时间 + 操作 |
| 健康等级徽章 | 高/中/低风险，颜色区分 |
| 评估结论弹窗 | 得分 + 结论 + 建议 |
| 语音读题按钮 | 喇叭图标 + 点击朗读 |
| SOS按钮 | 红色大按钮 + 脉冲动画 |
| 地图组件 | 点聚合 + 下钻 |
| 时间线 | 展示历史记录 |
| 角色切换弹窗 | 已登录状态下切换角色 |

### 9.3 组件交互规范

- 所有按钮点击后必须有视觉反馈（按压、Loading、成功提示）
- 所有表单提交前必须校验
- 所有关键操作必须二次确认
- 所有错误提示必须清晰、可操作
- 所有加载状态必须有Loading动画
- 所有空状态必须有友好提示（如“暂无数据，点击添加”）
- 所有下拉选择必须按拼音或业务逻辑排序


## 十、 响应式适配规范

### 10.1 断点

| 断点 | 宽度 | 设备 |
|---|---|---|
| xs | <375px | 小屏手机 |
| sm | 375-414px | 常规手机 |
| md | 414-768px | 大屏手机/小平板 |
| lg | >768px | 平板/PC |

### 10.2 适配策略

- **老人端**：以手机为主，大字体，单列布局
- **家属端/志愿者端**：以手机为主，双列布局
- **专家端**：手机+平板，支持横屏
- **后台管理**：以PC为主，固定左侧菜单，右侧内容区自适应

### 10.3 大字体模式

- 老人端支持大字体模式开关
- 开启后所有字号放大1.3倍
- 布局自动调整，避免文字溢出


## 十一、 无障碍设计规范

### 11.1 视觉无障碍

- 色彩对比度 ≥ 4.5:1
- 不仅靠颜色传达信息（如风险等级同时用图标+文字）
- 支持大字体模式
- 支持高对比度模式

### 11.2 听觉无障碍

- 所有语音内容提供文字版
- 支持语音播报
- 关键操作有声音反馈

### 11.3 操作无障碍

- 支持屏幕阅读器（TalkBack/VoiceOver）
- 所有按钮支持键盘操作
- 点击区域 ≥ 48x48px
- 支持手势简化

### 11.4 认知无障碍

- 极简模式（只保留核心功能）
- 操作步骤可视化（如进度条）
- 关键信息重复提示
- 避免专业术语，用通俗语言


## 十二、 UI交付清单

### 12.1 设计稿交付

| 端 | 页面数 | 交付格式 |
|---|---|---|
| 统一登录页 | 1个页面 | Figma 设计稿 + 标注 |
| 身份选择页 | 1个页面 | Figma 设计稿 + 标注 |
| 老人端 WebApp | 约19个页面 | Figma 设计稿 + 标注 |
| 家属端 WebApp | 约7个页面 | Figma 设计稿 + 标注 |
| 志愿者端 WebApp | 约6个页面 | Figma 设计稿 + 标注 |
| 专家端 WebApp | 约4个页面 | Figma 设计稿 + 标注 |
| 后台管理端 | 约18个页面 | Figma 设计稿 + 标注 |

### 12.2 组件库交付

- 基础组件库（Figma Components）
- 业务组件库（Figma Components）
- 图标库（SVG）
- 色板（Figma Styles）
- 字体规范（Figma Styles）

### 12.3 交互文档交付

- 页面跳转流程图
- 关键交互说明（点击、滑动、弹窗）
- 异常状态说明（加载、空、错误）
- 动画规范说明
- 角色识别与路由分发流程图
- 带参数跳转链接说明


## 十三、 前后端协作规范

### 13.1 接口约定

- 所有接口必须提供Mock数据
- 字段命名使用小驼峰（如 `elderName`）
- 状态字段使用枚举值，前后端保持一致
- 分页参数统一：`pageNum`、`pageSize`

### 13.2 前端渲染约定

- 列表选择统一使用后端返回顺序（不自行排序）
- 敏感字段前端脱敏展示
- 所有加载状态有Loading
- 所有错误状态有友好提示
- 各角色页面独立组件，共享底层能力

### 13.3 联调规范

- 前端先根据Mock数据开发
- 后端接口完成后，替换为真实接口
- 联调使用Eolink进行接口测试
- 联调完成后使用Playwright进行端到端测试


## 十四、 最终交付声明

本文档为《智慧养老与主动健康管理平台 UI/UX 设计最终规范》的**最终定稿（可直接使用版）**，已通过：

1. **全局设计规范**：色彩、字体、按钮、间距、图标、动画。
2. **统一登录页**：扫码/手机号/账号密码三种登录方式，作为冷启动兜底入口。
3. **身份选择页**：新用户首次注册时选择身份。
4. **老人端 WebApp**：19个页面，适老化设计为核心。
5. **家属端 WebApp**：7个页面，代管与确认为核心。
6. **志愿者端 WebApp**：6个页面，接单与服务为核心。
7. **专家端 WebApp**：4个页面，应答与复核为核心。
8. **后台管理端**：18个页面，数据与运营为核心。
9. **组件库规范**：基础组件 + 业务组件 + 交互规范。
10. **响应式适配**：断点 + 适配策略 + 大字体模式。
11. **无障碍设计**：视觉、听觉、操作、认知无障碍。
12. **UI交付清单**：设计稿、组件库、交互文档。
13. **前后端协作规范**：接口约定、渲染约定、联调规范。

**本规范可直接交付UI设计师、前端开发、产品经理使用。**

设计师可依据本规范进行Figma设计稿输出；
前端开发可依据本规范进行Vue3 + Vant组件开发；
产品经理可依据本规范进行页面清单核对和需求验收。

**祝项目顺利落地，真正为老年人带来福祉。**