969 lines
25 KiB
Markdown
969 lines
25 KiB
Markdown
# 《智慧养老与主动健康管理平台 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组件开发；
|
||
产品经理可依据本规范进行页面清单核对和需求验收。
|
||
|
||
**祝项目顺利落地，真正为老年人带来福祉。** |