149 lines
3.4 KiB
Markdown
149 lines
3.4 KiB
Markdown
# 07 UI/UX 与适老化规范
|
||
|
||
## 1. 视觉原则
|
||
|
||
关键词：
|
||
|
||
- 温暖
|
||
- 可信
|
||
- 简洁
|
||
- 清楚
|
||
- 不商业化
|
||
- 不花哨
|
||
|
||
不得做：
|
||
|
||
- 密集 Banner
|
||
- 过多卡片
|
||
- 首页十几个同级入口
|
||
- 小字号说明堆叠
|
||
- 复杂渐变和强动画
|
||
- 倒计时/诱导点击式设计
|
||
|
||
---
|
||
|
||
## 2. 小程序首页优先级
|
||
|
||
P0：
|
||
|
||
1. 我需要帮助
|
||
2. 帮他人申请
|
||
|
||
P1：3. 四大服务类别 4. 我的服务进度
|
||
|
||
P2：5. 公益项目 6. 公益活动 7. 我要做公益
|
||
|
||
宣传内容不能挤压服务入口。
|
||
|
||
---
|
||
|
||
## 3. 适老规范
|
||
|
||
建议基线：
|
||
|
||
- 正文字号尽量 >= 16px 等效视觉；
|
||
- 主要按钮文字 >= 17px 等效视觉；
|
||
- 主要点击区域高度约 48px 以上；
|
||
- 按钮间距足够；
|
||
- 一屏只做一个主要决定；
|
||
- 错误提示紧贴字段；
|
||
- 表单支持保存草稿（较长时）；
|
||
- 不用颜色作为唯一状态表达；
|
||
- 图标同时配文字；
|
||
- 返回动作清晰；
|
||
- 网络失败可重试；
|
||
- 提交后明确“已成功”。
|
||
|
||
具体像素可在设计系统中统一，不以本建议替代微信设备适配。
|
||
|
||
---
|
||
|
||
## 4. 表单原则
|
||
|
||
一页最多 5~7 个核心输入。
|
||
复杂申请拆步骤：
|
||
|
||
1. 需要什么帮助
|
||
2. 帮谁申请
|
||
3. 联系方式与地区
|
||
4. 需求描述
|
||
5. 确认提交
|
||
|
||
可选信息放“补充信息”。
|
||
|
||
---
|
||
|
||
## 5. 文案
|
||
|
||
使用：
|
||
|
||
- “我需要帮助”
|
||
- “帮家人申请”
|
||
- “工作人员正在联系您”
|
||
- “还需要继续帮助”
|
||
- “重新提交”
|
||
|
||
避免：
|
||
|
||
- “创建工单”
|
||
- “状态流转”
|
||
- “Beneficiary”
|
||
- “Record Not Found”
|
||
- “非法参数”
|
||
|
||
---
|
||
|
||
## 6. 空状态
|
||
|
||
例如没有服务申请：
|
||
“您还没有提交过服务申请。如果您或家人需要帮助，可以从这里开始。”
|
||
|
||
提供明确按钮。
|
||
|
||
---
|
||
|
||
## 7. 错误恢复
|
||
|
||
提交失败不能清空已填表单。
|
||
上传失败允许单文件重试。
|
||
网络失败保持本地草稿。
|
||
重复点击提交不应生成多个申请。
|
||
|
||
---
|
||
|
||
## 8. 管理后台
|
||
|
||
后台目标：让工作人员每天打开工作台就知道做什么。
|
||
|
||
表格：
|
||
|
||
- 默认显示业务必要列；
|
||
- 手机、地址默认脱敏；
|
||
- 常用筛选固定；
|
||
- 详情采用清晰分区；
|
||
- 状态颜色+文字；
|
||
- 危险操作二次确认并说明影响。
|
||
|
||
禁止为了“企业感”做过密 Dashboard。
|
||
|
||
---
|
||
|
||
## 9. 无障碍
|
||
|
||
- 合理对比度；
|
||
- 图片提供语义说明（可用场景）；
|
||
- 表单 label 明确；
|
||
- 键盘操作兼容后台；
|
||
- focus 可见；
|
||
- 不用仅 hover 才出现核心操作。
|
||
|
||
---
|
||
|
||
## 10. Phase 5 页面落地
|
||
|
||
- 小程序首页仍保持“我需要帮助/帮家人申请”为最高优先级，在其后增加公益项目、公益活动和志愿者中心入口。
|
||
- 项目和活动使用列表→详情的单一主任务结构；活动详情明确显示状态、时间、地点、报名截止、名额和不可报名原因，不加入捐赠或诱导分享入口。
|
||
- 志愿者中心只收集姓名、手机号、地区、可参与时间、固定技能和服务意向，并明确资料使用同意；同页展示资格状态、报名进度与核定服务分钟。
|
||
- 管理端新增志愿者审核、公益项目、活动与报名三个独立导航；危险状态推进二次确认，手机号列表脱敏，所有主要按钮保持至少 44px 点击高度。
|
||
- 沿用已批准的橙色主色、系统字体和功能型布局；采用高对比、可见焦点、文字+状态、加载/空/失败反馈与渐进披露，不引入复杂动画、密集仪表盘或新品牌方向。
|