UI Design Checklist
一、信息层级
- 主要信息是否第一眼能看到
- 是否存在明确的 Primary / Secondary / Tertiary hierarchy
- 页面视觉焦点是否清晰
- CTA（主要操作按钮）是否突出
- 是否避免多个视觉焦点竞争
- 页面是否有清晰的阅读路径（F / Z pattern）
二、排版与可读性
字体
- 字体数量是否控制在 1–2 种
- 字重是否有层级（bold / medium / regular）
- 行高是否合理（通常 1.4–1.6）
- 字号是否清晰区分
对齐
- 是否使用统一对齐方式
- 是否存在随意摆放
间距
- 是否使用统一 spacing system（如 4/8pt grid）
- 模块之间间距是否一致
三、视觉一致性
组件
- 相同组件是否统一
- Button / Input / Card 是否一致
颜色
- 是否使用设计系统的 color token
- 同一语义颜色是否统一
交互状态
- hover、active、disabled、loading 是否统一
图标
- 是否同一风格
- 线性 / 填充 是否混用
四、可点击性与交互提示
- 可点击元素是否明显
- 是否存在伪按钮
- hover 状态是否明确
- clickable area 是否足够大（≥44px）
- 是否有即时反馈（loading / success）
五、视觉平衡与美感
- 页面是否视觉平衡
- 元素密度是否合适
- 是否存在拥挤区域
- 是否有统一视觉风格
- 是否符合品牌调性
- 观察三个点 Balance（平衡）、Rhythm（节奏）、Contrast（对比）
六、颜色与对比度
- 文字对比度是否达标
- 主要颜色是否过多（建议 ≤5）
- 是否有清晰语义颜色 success、warning、error、info
- 是否存在纯装饰色
七、细节质量
- 是否存在 pixel 不对齐
- 圆角是否统一
- icon 是否对齐
- 文本 baseline 是否一致
- 组件 padding 是否一致
八、可扩展性
- 是否基于设计系统
- 组件是否可复用
- 是否支持不同内容长度
- 是否支持多语言
- 是否支持不同屏幕尺寸
九、空状态与边界情况
- 列表为空时是否有 empty state 设计
- 内容超长（文本截断、overflow）是否处理
- 图片加载失败是否有 fallback
- 错误状态（404、500）是否有对应页面
十、动效与过渡
- 页面切换 / 组件出现是否有适当动效
- 动效时长是否合理（通常 150–300ms）
- 是否遵循 prefers-reduced-motion 媒体查询（尊重用户减少动效的系统设置）
- 动效是否有意义，而非纯装饰
十一、加载性能感知
- 是否有 skeleton screen / placeholder
- 首屏内容是否优先加载
- 图片是否有尺寸占位（避免 layout shift）
十二、表单
- 必填 / 选填是否清楚
- 校验时机是否合理（输入中、失焦后、提交后）
- 错误提示是否具体且可操作
- 表单提交中是否防重复点击
- 输入成功后是否有明确反馈
- 自动填充、密码管理器、手机号/邮箱键盘类型是否友好
