Haonan S003-2 UI 设计

references/visual-system.md

1. 视觉方向卡

每个候选方向至少包含：

字段	内容
名称	可复述的方向名称
关键词	3–5 个具体词
用户感受	用户第一眼和持续使用时的感受
色彩	主色、辅助色、中性色、风险色
材质	纸张、玻璃、金属、扁平、拟物等
字体	字体类别、数字和中英文适配
IP/插画	是否使用、何时出现、情绪范围
风险	可访问性、性能、品牌或实现成本

候选方向必须在结构或表达上真正不同，不得只更换主色。

2. Token 最小集合

使用语义名称，不用页面名称绑定 Token：

• color.brand.primary
• color.action.primary
• color.feedback.success|warning|error|info
• color.surface.base|raised|overlay
• color.text.primary|secondary|disabled|inverse
• space.1 至 space.12，以 4px 或 8px 为基线
• radius.sm|md|lg|pill
• shadow.sm|md|overlay
• motion.fast|normal|slow
• breakpoint.compact|medium|wide

在 tokens.json 中记录值、用途和主题变体。不要让相同颜色承担互相冲突的语义。

3. 组件状态

交互组件至少考虑：默认、悬停、聚焦、按下、禁用、加载、错误。表单同时考虑帮助文本、校验成功、校验失败和只读状态。

组件规格应说明：尺寸、间距、图标槽位、文本上限、换行、溢出、响应式规则和事件反馈。

4. 可访问性基线

• 正文和关键控件满足可读的颜色对比度；不能只用颜色表达状态。
• 保留清晰键盘焦点，不通过 outline: none 直接删除焦点提示。
• 移动端主要触控目标建议不小于 44×44 CSS px。
• 动画支持减少动态效果；连续闪烁和大幅视差必须避免。
• 图片、图标按钮和状态变化提供可理解的文本或语义标签。
• 检查 200% 缩放、长文本、中英文混排和系统大字体。

5. IP 与资产一致性

为同一 IP 固定角色设定表：比例、轮廓、主色、五官、服装、视角、材质、光线和禁止变化项。不同情绪或动作从同一 Master 派生，避免每页重新生成导致漂移。

标准功能图标保持同一线宽、端点、视盒和视觉重量。品牌资产与通用功能图标分开管理。