Projects
Blog
Quotes
Movies

Projects Blog Quotes Movies

Built with:

Sanity
Next.js
Vercel

Copyright © Leyen 2026 All rights Reserved

Article

On this page

Overview 一、信息层级（Visual Hierarchy）二、排版与可读性（Typography & Layout）三、视觉一致性（Consistency）四、可点击性与交互提示（Affordance）五、视觉平衡与美感（Aesthetics）六、颜色与对比度（Color & Contrast）七、细节质量（Polish）八、可扩展性（Scalability）九、空状态与边界情况（Empty States & Edge Cases）十、动效与过渡（Motion & Transition）十一、加载性能感知（Perceived Performance）十二、表单（Forms）

UI Design Checklist

Mar 11, 2026

1 min

UpdatedMar 11, 2026

UI Design Checklist

主要复盘 UI 层面，一般会从信息层级、可读性、视觉一致性、交互可感知、美学质量、可扩展性等几大维度检查。这是一份比较系统、接近大厂设计评审用的 UI Design Checklist。

UI

Written by

Leyen

Share Post

Support

Do you feel like supporting my work? 🙂

Buymeacoffee button

#UI Design Checklist

#一、信息层级（Visual Hierarchy）

主要信息是否第一眼能看到
是否存在明确的 Primary / Secondary / Tertiary hierarchy
页面视觉焦点是否清晰
CTA（主要操作按钮）是否突出
是否避免多个视觉焦点竞争
页面是否有清晰的阅读路径（F / Z pattern）

#二、排版与可读性（Typography & Layout）

字体

字体数量是否控制在 1–2 种
字重是否有层级（bold / medium / regular）
行高是否合理（通常 1.4–1.6）
字号是否清晰区分

对齐

是否使用统一对齐方式
是否存在随意摆放

间距

是否使用统一 spacing system（如 4/8pt grid）
模块之间间距是否一致

#三、视觉一致性（Consistency）

组件

相同组件是否统一
Button / Input / Card 是否一致

颜色

是否使用设计系统的 color token
同一语义颜色是否统一

交互状态

hover、active、disabled、loading 是否统一

图标

是否同一风格
线性 / 填充是否混用

#四、可点击性与交互提示（Affordance）

可点击元素是否明显
是否存在伪按钮
hover 状态是否明确
clickable area 是否足够大（≥44px）
是否有即时反馈（loading / success）

#五、视觉平衡与美感（Aesthetics）

页面是否视觉平衡
元素密度是否合适
是否存在拥挤区域
是否有统一视觉风格
是否符合品牌调性
观察三个点 Balance（平衡）、Rhythm（节奏）、Contrast（对比）

#六、颜色与对比度（Color & Contrast）

文字对比度是否达标
主要颜色是否过多（建议 ≤5）
是否有清晰语义颜色 success、warning、error、info
是否存在纯装饰色

#七、细节质量（Polish）

是否存在 pixel 不对齐
圆角是否统一
icon 是否对齐
文本 baseline 是否一致
组件 padding 是否一致

#八、可扩展性（Scalability）

是否基于设计系统
组件是否可复用
是否支持不同内容长度
是否支持多语言
是否支持不同屏幕尺寸

#九、空状态与边界情况（Empty States & Edge Cases）

列表为空时是否有 empty state 设计
内容超长（文本截断、overflow）是否处理
图片加载失败是否有 fallback
错误状态（404、500）是否有对应页面

#十、动效与过渡（Motion & Transition）

页面切换 / 组件出现是否有适当动效
动效时长是否合理（通常 150–300ms）
是否遵循 prefers-reduced-motion 媒体查询（尊重用户减少动效的系统设置）
动效是否有意义，而非纯装饰

#十一、加载性能感知（Perceived Performance）

是否有 skeleton screen / placeholder
首屏内容是否优先加载
图片是否有尺寸占位（避免 layout shift）

#十二、表单（Forms）

必填 / 选填是否清楚
校验时机是否合理（输入中、失焦后、提交后）
错误提示是否具体且可操作
表单提交中是否防重复点击
输入成功后是否有明确反馈
自动填充、密码管理器、手机号/邮箱键盘类型是否友好