Rogee
f3e10256a8
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
155 lines
4.4 KiB
Markdown
155 lines
4.4 KiB
Markdown
# Portal 适老化 UI/UX 与配色落地规范（v1）
|
||
|
||
> 适用范围：`frontend/portal`（PC 优先）
|
||
>
|
||
> 目标：在保持简约风格的前提下，提升中老年用户（50+）的可读性、可操作性与安全感。
|
||
|
||
## 1. 设计目标与原则
|
||
|
||
### 1.1 设计目标
|
||
|
||
1. **简约**：减少视觉噪音与无关装饰，突出主任务路径。
|
||
2. **适老**：强化文字对比、按钮可见性、操作反馈。
|
||
3. **可信**：降低“误触焦虑”，让界面更稳重、更可预期。
|
||
|
||
### 1.2 设计原则
|
||
|
||
1. **一屏一主动作**：每屏突出 1 个主任务（查、填、确认）。
|
||
2. **显性导航**：始终明确当前所在位置与可返回路径。
|
||
3. **高对比优先**：关键文字和交互区优先保障可读性。
|
||
4. **状态不靠颜色单独表达**：需配合图标与文案。
|
||
5. **可切换高对比模式**：满足低视力/高敏感场景。
|
||
|
||
---
|
||
|
||
## 2. 颜色系统（Design Tokens）
|
||
|
||
实际实现文件：`frontend/portal/src/assets/main.css`
|
||
|
||
### 2.1 语义 Token（默认主题）
|
||
|
||
- `--color-bg-base`：页面底色
|
||
- `--color-bg-surface`：卡片/容器底色
|
||
- `--color-bg-surface-highlight`：弱强调底色
|
||
- `--color-text-main`：主文字
|
||
- `--color-text-muted`：次文字
|
||
- `--color-text-inverted`：反白文字
|
||
- `--color-border-base`：默认边框
|
||
- `--color-border-highlight`：强调边框
|
||
- `--color-primary-50...950`：品牌主色梯度
|
||
|
||
### 2.2 高对比主题
|
||
|
||
切换选择器：`[data-theme='senior-high-contrast']`
|
||
|
||
高对比主题目标：
|
||
- 背景更纯净（白底）
|
||
- 文本更深（黑字）
|
||
- 重点更醒目（黄色强调）
|
||
- 边框更明确（黑色边框）
|
||
|
||
### 2.3 PrimeVue 语义映射
|
||
|
||
已通过全局变量映射统一第三方组件视觉：
|
||
|
||
- `--p-content-background`
|
||
- `--p-content-color`
|
||
- `--p-content-border-color`
|
||
- `--p-primary-color`
|
||
- `--p-primary-contrast-color`
|
||
- `--p-inputtext-background`
|
||
- `--p-inputtext-color`
|
||
- `--p-inputtext-border-color`
|
||
|
||
---
|
||
|
||
## 3. 组件与页面层应用规范
|
||
|
||
### 3.1 全局布局（已落地）
|
||
|
||
- 页面容器：`bg-base text-content`
|
||
- 卡片容器：`bg-surface border border-line`
|
||
- 弱强调区：`bg-surface-highlight`
|
||
|
||
### 3.2 导航栏（TopNavbar）
|
||
|
||
- 背景：`bg-surface`
|
||
- 边框：`border-line`
|
||
- 主文案：`text-content`
|
||
- 次级文案/图标：`text-muted`
|
||
- 焦点反馈：`focus:ring` + 高对比 outline
|
||
|
||
### 3.3 页脚（AppFooter）
|
||
|
||
- 背景：`bg-surface-highlight`
|
||
- 文案：`text-muted`
|
||
- 标题：`text-content`
|
||
- 交互 hover：`hover:text-primary-600`
|
||
|
||
### 3.4 用户/创作者侧边栏
|
||
|
||
- 容器：`bg-surface border border-line`
|
||
- 非激活菜单：`text-muted`
|
||
- hover：`hover:bg-surface-highlight hover:text-content`
|
||
- 激活态：`bg-primary-600 text-white`
|
||
|
||
---
|
||
|
||
## 4. 交互与文案建议（执行级）
|
||
|
||
1. 关键按钮文案使用动词开头：如“确认支付”“保存设置”。
|
||
2. 失败文案避免术语：
|
||
- ❌ 参数错误
|
||
- ✅ 信息未填写完整，请检查后重试
|
||
3. 重要状态展示采用“图标 + 颜色 + 文案”三重表达。
|
||
4. 表单错误提示紧贴字段，不只在顶部汇总。
|
||
|
||
---
|
||
|
||
## 5. 前端落地文件清单（本次）
|
||
|
||
- `frontend/portal/src/assets/main.css`
|
||
- `frontend/portal/src/main.js`
|
||
- `frontend/portal/src/layout/LayoutMain.vue`
|
||
- `frontend/portal/src/layout/LayoutUser.vue`
|
||
- `frontend/portal/src/layout/LayoutCreator.vue`
|
||
- `frontend/portal/src/layout/LayoutAuth.vue`
|
||
- `frontend/portal/src/components/TopNavbar.vue`
|
||
- `frontend/portal/src/components/AppFooter.vue`
|
||
|
||
---
|
||
|
||
## 6. 验收标准（视觉评审）
|
||
|
||
### 6.1 基础检查
|
||
|
||
1. 首页、登录页、用户中心、创作者中心色彩风格一致。
|
||
2. 主操作按钮在 3 秒内可被识别。
|
||
3. 次级文字在普通显示器下可清晰阅读。
|
||
|
||
### 6.2 无障碍检查
|
||
|
||
1. 高对比模式可切换并立即生效。
|
||
2. 聚焦态可视（键盘 Tab 导航清晰）。
|
||
3. 状态提示不依赖单一颜色表达。
|
||
|
||
### 6.3 快速切换方式（调试）
|
||
|
||
```js
|
||
document.documentElement.setAttribute('data-theme', 'senior-high-contrast')
|
||
```
|
||
|
||
恢复默认：
|
||
|
||
```js
|
||
document.documentElement.removeAttribute('data-theme')
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 后续优化建议（v2）
|
||
|
||
1. 将高对比模式入口显式放到导航栏设置中（非仅调试）。
|
||
2. 增加“标准/适老”主题切换并持久化到本地。
|
||
3. 做 55+ 用户可用性走查（任务完成率、误触率、求助率）。
|
||
4. 对支付/实名认证等高风险流程增加更明确的安全确认文案。 |