Rogee
f3e10256a8
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
4.4 KiB
4.4 KiB
Portal 适老化 UI/UX 与配色落地规范（v1）
适用范围：
frontend/portal（PC 优先）目标：在保持简约风格的前提下，提升中老年用户（50+）的可读性、可操作性与安全感。
1. 设计目标与原则
1.1 设计目标
- 简约：减少视觉噪音与无关装饰，突出主任务路径。
- 适老：强化文字对比、按钮可见性、操作反馈。
- 可信：降低“误触焦虑”，让界面更稳重、更可预期。
1.2 设计原则
- 一屏一主动作：每屏突出 1 个主任务（查、填、确认）。
- 显性导航：始终明确当前所在位置与可返回路径。
- 高对比优先：关键文字和交互区优先保障可读性。
- 状态不靠颜色单独表达：需配合图标与文案。
- 可切换高对比模式：满足低视力/高敏感场景。
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. 交互与文案建议（执行级）
- 关键按钮文案使用动词开头：如“确认支付”“保存设置”。
- 失败文案避免术语：
- ❌ 参数错误
- ✅ 信息未填写完整，请检查后重试
- 重要状态展示采用“图标 + 颜色 + 文案”三重表达。
- 表单错误提示紧贴字段，不只在顶部汇总。
5. 前端落地文件清单（本次）
frontend/portal/src/assets/main.cssfrontend/portal/src/main.jsfrontend/portal/src/layout/LayoutMain.vuefrontend/portal/src/layout/LayoutUser.vuefrontend/portal/src/layout/LayoutCreator.vuefrontend/portal/src/layout/LayoutAuth.vuefrontend/portal/src/components/TopNavbar.vuefrontend/portal/src/components/AppFooter.vue
6. 验收标准（视觉评审）
6.1 基础检查
- 首页、登录页、用户中心、创作者中心色彩风格一致。
- 主操作按钮在 3 秒内可被识别。
- 次级文字在普通显示器下可清晰阅读。
6.2 无障碍检查
- 高对比模式可切换并立即生效。
- 聚焦态可视（键盘 Tab 导航清晰）。
- 状态提示不依赖单一颜色表达。
6.3 快速切换方式（调试）
document.documentElement.setAttribute('data-theme', 'senior-high-contrast')
恢复默认：
document.documentElement.removeAttribute('data-theme')
7. 后续优化建议（v2）
- 将高对比模式入口显式放到导航栏设置中（非仅调试）。
- 增加“标准/适老”主题切换并持久化到本地。
- 做 55+ 用户可用性走查（任务完成率、误触率、求助率）。
- 对支付/实名认证等高风险流程增加更明确的安全确认文案。