25 KiB
25 KiB
《智慧养老与主动健康管理平台 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 设计最终规范》的最终定稿（可直接使用版），已通过：
- 全局设计规范：色彩、字体、按钮、间距、图标、动画。
- 统一登录页：扫码/手机号/账号密码三种登录方式，作为冷启动兜底入口。
- 身份选择页：新用户首次注册时选择身份。
- 老人端 WebApp：19个页面，适老化设计为核心。
- 家属端 WebApp：7个页面，代管与确认为核心。
- 志愿者端 WebApp：6个页面，接单与服务为核心。
- 专家端 WebApp：4个页面，应答与复核为核心。
- 后台管理端：18个页面，数据与运营为核心。
- 组件库规范：基础组件 + 业务组件 + 交互规范。
- 响应式适配：断点 + 适配策略 + 大字体模式。
- 无障碍设计：视觉、听觉、操作、认知无障碍。
- UI交付清单：设计稿、组件库、交互文档。
- 前后端协作规范：接口约定、渲染约定、联调规范。
本规范可直接交付UI设计师、前端开发、产品经理使用。
设计师可依据本规范进行Figma设计稿输出； 前端开发可依据本规范进行Vue3 + Vant组件开发； 产品经理可依据本规范进行页面清单核对和需求验收。
祝项目顺利落地，真正为老年人带来福祉。