# Frontend UI/UX Standards

## 视觉方向

- 每个前端需求都要先确定产品类型、视觉目标、信息密度和品牌语气。
- 同一条链路中的页面与组件必须共享一套设计 token，不允许“页面各自选风格”。
- 图标、插图、阴影、边框和留白要统一语言；不混搭互相冲突的视觉风格。

## 布局与响应式

- 以移动端优先的断点策略组织布局，再向平板和桌面增强。
- 页面不得出现无意的横向滚动，关键操作不能只在某一端可用。
- 信息层级靠栅格、留白和字号建立，不靠堆颜色或堆边框制造层次。
- 对表格、图表、过滤器和多列布局要定义小屏降级策略。

## 字体与颜色

- 正文基线不低于 `16px`，常规段落行高建议 `1.5` 左右。
- 文本和背景对比度必须满足可访问性要求；正文内容按 `4.5:1` 作为默认红线。
- 颜色必须通过语义 token 表达状态和层级，不在组件内直接散写原始颜色。
- 不把颜色作为唯一状态信号，重要反馈要同时依赖文案、图标或形态。

## 交互与动效

- 微交互要有明确目的，用于提示状态变化、空间关系或操作结果。
- 常规动效时长控制在 `150ms-300ms`，过渡不应影响任务完成速度。
- 动效优先使用不触发布局抖动的属性，并考虑 `prefers-reduced-motion`。
- 加载、提交、保存、删除等关键动作必须给出即时反馈和可理解的进行中状态。

## 表单与反馈

- 字段要有可见标签、帮助信息、错误提示和成功反馈，不能只靠 placeholder。
- 错误信息要靠近字段并说明如何修正，不只在页面顶部堆一段总提示。
- 对高风险操作使用渐进式披露和二次确认，不要一次把所有复杂度抛给用户。
- 空态、异常态、无权限态和加载态都属于正式设计范围。

## 导航与数据展示

- 导航层级要稳定，返回路径可预测，不因为页面类型变化而改变基本导航位置。
- 导航项需要文本标签；仅图标导航只能用于用户已高度熟悉的极小范围。
- 图表与数据视图必须兼顾可读性和可访问性，图例、单位、异常值说明不能缺失。
- 图表在小屏上要有简化或重排策略，不默认要求用户横向滚动。

## 硬性门禁

- 交互目标触达面积至少满足移动端可点击基线，默认以 `44x44` 为下限。
- 焦点状态不能被移除；键盘路径、屏幕阅读器标签和状态播报必须可用。
- 设计稿或视觉方案不能作为跳过性能、异常态和无障碍要求的理由。
- 前端交付进入 QA 前必须完成 [ui-review-checklist.md](../templates/ui-review-checklist.md)。