00 / How to use
规则先服务判断，再服务像素
设计规范不会替代业务分析，也不要求所有页面采用同一种布局。它提供稳定的底线：信息层级怎么建立、状态如何被识别、操作以后如何反馈、不同设备怎样保持同一语义。遇到规则覆盖不到的情况，先记录问题和选择，再决定扩展规范还是留在产品层。
先查共性规则
确认视觉、交互、响应式和无障碍的底线。
再看业务语境
根据角色、频率、风险和设备决定具体形式。
最后留下证据
把例外、边界和验收方式补回文档。
01 / Visual foundations
用有限的视觉变量，建立清楚的信息层级
颜色先表达语义，再表达品牌。正文、次级文本、边框、背景和状态色都有固定用途；同一状态不能只依赖色相区分。
字号、字重和行高共同表达层级。正文以可读性为先，数据和操作标签避免过度压缩；中英文混排保持稳定的基线和间距。
以 4px 为最小单位、8px 为主要节奏。组件内、组件间、区块间使用不同层级，不用随机空白修补布局。
圆角表达组件层级和设备语境；阴影只用于浮层、拖拽和悬浮反馈，不用作普通分隔线替代品。
02 / Semantic tokens
禁止页面直接记颜色值，让意图进入命名
Token 名称包含用途和层级，而不是视觉结果。`text-primary` 可以在 Light 与 Dark 模式映射为不同颜色，但含义不变；状态色同样通过 Alias 管理，组件只消费语义。
| 语义组 | 用途 | 使用原则 |
|---|---|---|
| Text | Primary、Secondary、Tertiary、Disabled、Inverse | 优先保证层级和对比度，不用透明度制造不可读文本 |
| Surface | Canvas、Container、Raised、Overlay、Selected | 层级变化必须同时考虑边框、阴影和状态 |
| Action | Primary、Neutral、Danger、Link | 一个操作区只保留一个主动作 |
| Status | Info、Success、Warning、Error、Pending | 颜色、图标和文案共同表达状态 |
03 / Component states
每个可交互组件，都要覆盖完整状态链
默认、悬停、焦点、错误、禁用和加载不是额外皮肤，而是用户完成任务所需的信息。组件文档必须说明状态如何进入、如何退出，以及是否阻断后续操作。
04 / Layout & density
固定页面的头和尾，把变化留给中间内容区
Shell Frame 统一标题、工具、筛选、统计、批量操作、滚动和底部状态。内容区根据任务切换 Grid、Table、Kanban、Calendar、Timeline、Floor Map 和 Resource View，避免每个业务重新搭页面骨架。
数据比较
字段、排序、筛选、统计和批量操作保持稳定。
日期关系
显示时间占用、跨日状态和容量趋势。
资源调度
资源与时间双轴，用于高密度排程和冲突识别。
空间资源
位置、大小、形状和状态映射到可操作平面。
05 / Responsive & devices
同一能力在不同设备上，改变密度和操作方式
| 设备 | 主要输入 | 布局重点 | 操作原则 |
|---|---|---|---|
| Web Admin | 鼠标、键盘 | 高信息密度、多栏、批量操作 | 支持快捷键、悬停反馈和深层导航 |
| POS / Terminal | 触控、扫码、外接设备 | 大触控区、常用操作固定、订单实时反馈 | 缩短路径，失败后保留订单上下文 |
| Pad / Kiosk | 触控 | 横竖屏适配、引导式流程、隐私保护 | 明确超时、返回和重新开始 |
| Mobile | 单手触控 | 单列、底部操作、逐步确认 | 核心按钮靠近拇指区，不复制桌面表格 |
06 / Feedback & recovery
让用户知道发生了什么，也知道下一步怎么办
即时反馈
点击、选择、拖拽和输入立即出现可见变化，避免重复操作。
过程反馈
较长操作显示进度和范围，允许安全取消时提供取消入口。
恢复路径
错误说明影响、原因和修复方式；高风险操作优先支持撤销。
Toast 只适合轻量、无需立即处理的结果；会影响当前任务的错误必须靠近问题位置展示，并保留用户已经输入的内容。
07 / Accessibility
可访问性不是最后检查，而是组件契约的一部分
所有操作可通过键盘到达，焦点顺序与阅读顺序一致，浮层打开后焦点进入，关闭后返回触发点。
使用正确的标题、标签、按钮和状态语义；图标按钮必须有可读名称，动态结果需要可被辅助技术感知。
正文、操作、状态和焦点指示满足对比度要求；禁用状态不承担关键说明。
动效服务关系和反馈，支持减少动态效果；不使用闪烁或大范围运动作为唯一提示。
08 / Design QA checklist
设计交付前，用同一张清单检查关键质量
- 01结构对象、状态、权限和主要任务是否清楚，页面是否使用已有 Shell 与 Pattern。
- 02状态Loading、Empty、Error、Disabled、Success 和异常恢复是否齐全。
- 03响应式桌面、平板、手机以及 POS/Kiosk 的信息密度和操作顺序是否合理。
- 04可操作性点击区域、键盘焦点、Hover、反馈、确认与撤销是否满足任务风险。
- 05一致性Token、组件、文案、图标和状态语义是否与系统保持一致。
- 06交付Figma Properties、研发 Props、异常样例和验收标准是否完成对应。
09 / Standards baseline
把官方规范拆成可以直接进入设计评审的条目
这里保留的是项目实际会检查的规则，不是链接收藏。每条规则都对应设计稿、组件文档或研发验收中的具体位置。
布局与可读性
- 相关内容通过间距、分组和分隔建立清楚关系，主要信息不被次要内容挤压。
- 布局先保证完整任务，再根据空间缩减密度；安全区域、浮层和固定导航不遮挡内容。
- 字号、字重、行高共同表达层级，放大文字后仍保持阅读顺序和操作可见。
状态与反馈
- 组件覆盖 Enabled、Hover、Focus、Pressed、Dragged、Disabled 等可到达状态。
- 状态至少使用两种可感知线索，不能只靠颜色；选中状态和键盘焦点必须区分。
- 错误靠近问题位置，说明发生了什么以及如何修复，并保留用户已经输入的内容。
企业级组件组织
- 按通用、布局、导航、数据录入、数据展示和反馈组织组件，避免页面级重复造轮子。
- 稳定共性进入组件与 Pattern，客户定制和一次性活动留在产品层。
- 设计资源、实现、变更记录和主题配置使用一致命名，降低并行协作成本。
键盘、焦点与触控
- 核心功能可通过键盘完成，焦点顺序与阅读顺序一致，浮层关闭后焦点回到触发点。
- 焦点指示不被固定区或浮层遮挡；点击目标、颜色对比、重排和错误识别可被验收。
- Dialog、Tabs、Toolbar、Grid 等复杂组件记录角色、状态、属性和完整键盘模式。