# 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. 对支付/实名认证等高风险流程增加更明确的安全确认文案。