用途:为现代 Web 界面提供可落地的设计规则,用于定义或评审 UI/UX 设计系统。
主要能力:
- 约束定义:明确受众、品牌调性、目标平台,记录无障碍与性能要求,识别关键内容类型与核心用户流程。
- 布局与层级:使用清晰网格与 4pt 或 8pt 间距刻度;限制内容宽度以提升可读性并定义断点;让主操作与关键数据在视觉上占主导。
- 排版系统:定义字号阶梯(如 12/14/16/20/24/32/40);正文不小于 16px,行高 1.4 至 1.6;用字重与字号而非仅靠颜色表达层级。
- 色彩与对比:使用语义化令牌(primary、success、warning、danger);正文对比度满足 WCAG AA(普通文本 4.5:1);调色板保持精简,背景多用中性色。
- 间距与节奏:组件间统一内外边距规则;对齐基线与边缘以减少视觉噪音;避免混用无关间距值。
- 组件与状态:定义默认、悬停、激活、聚焦、禁用与错误状态;聚焦指示清晰一致;表单需有明确标签与错误提示。
- 响应式:小屏堆叠列;点击目标至少 44px;避免横向滚动与布局偏移。
- 动效(可选):动效用于反馈与连续性而非装饰;时长 150 至 250ms,缓动保持一致。
交付物清单:调色板与语义令牌、排版阶梯与使用规则、间距刻度与布局网格、含状态的组件清单、无障碍检查表。
参考:WCAG 对比度指南、Material Design 排版、Apple 人机界面指南。
限制:资料未提供具体安装命令、平台支持范围、收费方式或实际效果数据,暂未提供。