打开自己做的账户设置页，表单能填，设置也能保存，可扫一眼，总觉得页面有些拥挤，连「保存」按钮都要刻意找一下。遇到这种情况，该如何让自己的 App 或网站看起来更专业、更舒服？
其实不必推倒重来，就从这一页开始微调即可。试着把标题做得比说明文字更醒目，让属于同一组的输入框彼此靠得更近，再把「保存」按钮的视觉权重提上来。改完之后再扫一眼，如果你能更快看懂页面在讲什么、下一步该点哪里，整个界面的清爽感就已经出来了。这正是《重构 UI》（Refactoring UI）最适合开发者的地方。书里的绝大多数建议，都可以从这样立竿见影的小改动开始。
《重构 UI》的两位作者合作过许多业余项目。全栈开发者 Adam Wathan 负责把功能做出来，设计师 Steve Schoger 则负责界面打磨。两人在长期配合中攒下了大量能直接套用在页面上的实战改法，后来通过短帖、博客和视频陆续分享出来，最终系统整理成了这本书。书里谈到的视觉层级、留白与边框取舍，随时都可以回到你手头的项目里验证。作者在官网讲述的成书经过
目前，《重构 UI》官网的基础套装（The Essentials）标价 99 美元 （当地税费另计），包含 218 页 PDF 电子书与 3 部视频教程；完整套装标价 149 美元，额外附带组件示例、配色方案等资源。官网定价
如果你还在犹豫是否值得花 99 美元购书，不妨先拿手头的页面试试下文整理的方法。比如拉开表单的字段间距，把次要按钮的样式降一级，看看页面的分组和主操作是否立刻变得清晰。亲手试过这些改动，再判断自己是否需要书里的完整案例和视频演示。
想看看其他开发者对这本书的评价，也可以逛逛我做的「黑客书架」。我在书页上整理了 Hacker News 社区对《重构 UI》的讨论与推荐；如果你没有设计背景，平时又经常需要独立负责表单、后台页面或个人项目，可以先读读书页里的推荐理由，看看它能解决哪些你正在面对的界面难题。在黑客书架查看《重构 UI》
下面，我们沿着书中的核心思路，从功能出发、视觉层级、间距布局、排版、色彩光影到常见组件重构做一次系统梳理，文末还附有一份可直接对照的五分钟页面检查清单。
一、从核心功能开始设计
1. 从功能出发，而不是从布局出发
很多人在动手设计之初，就急着画导航栏、侧边栏和页脚。结果页面外壳定死了，真正的核心功能却塞不进去，或者显得局促。
- 先做减法，再做加法：设计一个产品时，不要一上来就画外壳（Shell），而应该先设计最核心的那个交互模块（例如：搜索航班的表单）。
- 早期保持低保真：前期不要过早纠结颜色、字体和阴影，先用黑白灰的线框快速迭代功能细节，避免在装饰性细节上浪费时间。
- 克制过度设计（Don't Over-design）：只设计当前版本必需的功能，不要把未来半年才可能上线的功能提前画出来占位。
2. 用真实数据和边界样本检查界面
布局初步确定后，尽早用实际业务内容替换 Lorem Ipsum 或 John Doe 这类占位文案。假数据往往长度整齐、没有异常值；而真实世界里既有长达 40 个字符的用户名，也有缺失的头像和零评论的帖子。只有用真实甚至极端的样本填充界面，才能提前暴露出换行错乱、按钮被挤变形等隐患。
二、用视觉层级突出重点
如果页面上所有元素都在"大喊大叫"，那结果就是没有重点。好的界面设计懂得通过清晰的视觉层级引导用户的视线。
1. 别只靠"字号大小"区分层级
新手最常犯的错误是把标题调到 32px，正文用 16px，改完却发现层次依然不够分明。想要拉开差距，应该组合使用 字号（Size）+ 字重（Weight）+ 颜色对比度（Color）：
- 主要内容 ：深灰（如
#111827，避免使用对比过于生硬的纯黑#000），搭配常规或中等字重。 - 次要内容 （如日期、元数据）：中灰色（如
#4B5563）。 - 辅助内容 （如页脚版权说明）：浅灰色（如
#9CA3AF）。
核心技巧：通过"弱化"次要元素来"突出"主要元素。 当你觉得标题不够醒目时，与其一味把标题调大，不如试着把旁边的正文颜色调浅一点。
2. 很多时候，标签（Label）是多余的
在展示数据时，没必要写成 姓名：张三、邮箱：zhangsan@example.com、电话：13800138000。人眼一眼就能认出邮箱和电话号码，直接展示数据本身反而更利落。如果业务场景确实需要保留标签（例如配置参数列表），请突出"值"，弱化"标签"。
3. 严格区分按钮的视觉权重
- 主操作（Primary） ：实心高对比度按钮（同一屏幕视野内尽量只保留 1 个）。
- 次操作（Secondary）：描边按钮或浅色背景按钮。
- 三级操作（Tertiary）：纯文字链接样式。
- 破坏性操作（Destructive）：像"删除"这类操作，如果它不是当前页面的主要目的，千万别用大红实心按钮抢走主操作的风头。可以先用次级或三级样式呈现，等用户点击后弹出二次确认弹窗时，再使用红色警告按钮。
三、建立布局与间距规则
1. 先给足留白，再逐步缩减
开发者习惯把页面塞满，喜欢在现有间距上一点点往外加 margin；设计时可以换个顺序。先试一档明显偏大的留白，再慢慢往回收，直到视觉上刚好舒服为止。
2. 建立固定的间距与尺寸刻度
不要在 CSS 里随手写 13px、17px、22px。建议建立一套有明显梯度感的数值体系（例如 4, 8, 12, 16, 24, 32, 48, 64, 96, 128），让相邻刻度之间有肉眼可见的跨度，方便快速对比调整前后的效果。
3. 用组内和组间间距表达归属感
如果表单里 Label 到 Input 的距离是 8px，而这一组表单项到下一组表单项的距离是 12px，所有元素就会粘连成一团。可以从**组内 8px、组间 24px** 开始尝试，让标签在视觉上自然靠近它所属的输入框。
4. 视觉居中优于数学居中，并控制最大宽度
- 光学对齐（Optical Alignment） ：把播放图标（三角形）放进圆形按钮里时，如果严格按边界框数学居中，肉眼看会觉得偏左，需要顺着图形重心略微向右微调；图标与文字并排时，图标尺寸通常要比文字字号大
2px ~ 4px（如16px文字配20px图标），视觉量感才更对等。 - 别为了填满大屏而硬拉元素 ：大屏幕上内容较少时，直接用
max-width: 768px居中限制宽度即可，留出两侧空白远比把卡片拉伸成一整行更显精致。同理，左侧边栏也应设为固定宽度（如240px），而不是随屏幕缩放的百分比宽度。
四、字体与排版细节
1. 字号刻度与行长控制
- 建立有节奏的字号表 ：使用
12, 14, 16, 18, 20, 24, 30, 36, 48这样有跳跃感的刻度，避免12, 13, 14, 15这种缺乏区分度的线性递增。 - 控制每行字符数 ：为了保证阅读流畅，正文每行长度建议控制在 45～75 个英文字符 （约 25～40 个汉字），对应 CSS 大约是
max-width: 65ch。 - 行高（Line-height）与字号成反比 ：小字号正文需要较大的行高（
1.5 ~ 1.75）防止阅读串行；大字号标题则需要紧凑的行高（1.0 ~ 1.25），否则两行标题之间会显得松散断层。
2. 字体选择与混排技巧
- 安全牌与字重筛选 ：拿不准选什么字体时，直接用系统原生字体栈或 Inter 即可。挑选字体时，需确认它完整覆盖页面所需的语言字符，并提供常规（Regular）、中等（Medium）和粗体（Bold）等实际会用到的字重。
- 数字等宽与主次区分 ：数据看板和价格表务必开启
font-variant-numeric: tabular-nums防止数字跳动；展示价格$1,299.00时，把货币符号$和小数部分.00的字号调小、颜色调浅，主数字的辨识度会立刻提升。 - 对齐原则与防孤字 ：中英文长文本通常保持左对齐，便于视线逐行扫读；表格中需要纵向比较的数值建议右对齐。大小字号同行混排（如
$99 /月）时使用align-items: baseline基线对齐；关键大标题则尽量手动控制换行，避免最后一行只落下一个孤零零的短词（Widow）。 - 响应式字号 ：移动端正文可以从
16px起步。人眼看手机的距离更近，且16px能避免 iOS Safari 在聚焦输入框时自动放大页面。遇到窄屏，优先缩短或调小大标题，再检查正文与输入框的可读性。
五、色彩与光影质感
1. 用 HSL 科学调整色阶
- 切换到 HSL 模式调色 ：色相（Hue）、饱和度（Saturation）、亮度（Lightness）最贴近人类对色彩的直觉。一套实用的设计系统中，每种主色通常需要 8～10 个明暗阶梯。
- 色相偏移（Hue Rotation）：调配同一颜色的明暗色阶时，可以试着让亮阶略偏暖（向黄色微调）、暗阶略偏冷（向蓝色微调），再结合品牌色和实际背景做微调，色彩会显得更通透。
- 给中性灰加一点色相：给纯中性灰加入一丝蓝调（冷灰，适合科技与商务场景）或黄棕调（暖灰，适合生活与阅读场景），具体倾向取决于页面中的主色调。
2. 彩色背景文字与状态色搭配
- 根据实际背景选文字颜色 ：在深色或彩色背景上放置次要文字时，可以尝试降低不透明度的白色 （如
rgba(255, 255, 255, 0.7)），或者同色系的高对比度色值；在明黄色按钮上不要硬放白字，改用同色系的深褐或深橄榄色文字会更协调。 - 克制的状态提示色（Alert / Badge） ：避免用高饱和度纯红、纯绿直接配白字，改用极浅同色系背景 + 极深同色系文字 + 中饱和度小图标，既醒目又不刺眼。
日常检查普通文字配色时，可以参考 WCAG 2.2 AA 的文字对比度要求，通常至少需要达到 4.5:1。若使用了半透明文字，记得测量它叠在实际背景色上的最终对比度。
3. 模拟真实光源与两层阴影法
- 上方光源法则 ：模拟真实世界的顶部光源，凸起元素（按钮、卡片）顶部可以加一条极细的亮色高光（
inset 0 1px 0），底部配投影；凹陷元素（输入框）则在顶部加内阴影（inset）。 - 两层阴影法 ：用两层阴影组合表现自然的悬浮感。一层大而柔和的漫反射阴影 营造空间距离，搭配一层小而锐利的接触阴影 模拟物体紧贴地面的暗部。元素海拔越高，阴影的垂直偏移和模糊半径越大，但透明度反而越低。主品牌按钮还可以搭配同色系半透明彩色阴影来增强通透感。
- 暗黑模式（Dark Mode）的立体感 ：在深色背景下，黑色阴影几乎看不出层次。此时应放弃阴影，改用表面亮度递进 （底层背景最暗，上层卡片稍亮，弹窗最亮）+ 顶部 1px 极淡的白色半透明内高光来区分层级。
六、常见组件的实用改法
| 组件 / 场景 | 常见问题 | 可以尝试的改法 |
|---|---|---|
| 边框与分割线 | 给每张卡片、每个列表项都加上 1px solid #ddd |
少用边框！改用柔和投影、微弱背景色差（灰底白卡）或直接拉大间距 |
| 图片处理 | 文字叠在图上直接盖整块半透明黑遮罩；白底图融进白背景 | 仅在文字侧加局部渐变遮罩 ；图片外层加极浅内边框 inset 0 0 0 1px rgba(0,0,0,0.08) |
| 表单布局 | 为省空间排成两列或三列；用 Placeholder 代替 Label | 单列纵向排列 阅读动线最顺畅；保留可见的 Label，Placeholder 只放示例；onBlur 时再校验 |
| 登录注册页 | 放"确认密码"框；第三方登录做成五颜六色大按钮 | 用单个密码框搭配明确标识的显示密码按钮；第三方登录统一用白底浅灰描边按钮 |
| 表格（Table） | 充满纵向竖线；表头又黑又粗；每行末尾排满操作按钮 | 去掉不影响阅读的竖线；降低表头视觉权重并保持清晰；关联列合并上下叠放；低频操作收进 ... 菜单；明确区分零值与缺失值 |
| 数据图表 | 分类较多、需要精确比较大小时仍使用饼图 | 用水平条形图替代饼图，长标签好排版且比例一目了然 |
| 交互热区 | 小关闭图标（16×16px）直接绑定点击事件 |
视觉保持小巧，通过透明 padding 将实际点击热区扩大到 40 × 40 CSS 像素 |
| 卡片与标签 | 并排卡片按钮随文字高低不齐；小图标直接放大当插画 | 用 flex: 1 强制底部操作栏水平对齐；小图标放大时套一个浅色圆形容器；徽章采用胶囊圆角 |
| 空白与加载态 | 空白页只写"暂无数据"；加载时只放一个转圈动画 | 空白页配简洁插画、引导文案与行动按钮；加载时使用骨架屏（Skeleton）减少布局跳动 |
七、五分钟页面检查清单
当你写完一个页面，觉得"哪里不对劲，但又说不上来"时，不妨按下面 5 步逐项排查：
- 间距是不是太挤了？ 试着把所有容器的
padding和元素间距直接翻倍。 - 所有文字是不是都一样黑？ 把次要文字全部调成中灰色，辅助文字调成浅灰色。
- 边框和分割线是不是太多了？ 删掉一半的
1px边框，改用背景色差或留白来划分区块。 - 醒目的按钮是不是太多了？ 确保当前屏幕视野内只有 1 个 实心主按钮，其余全部降级为描边或纯文字按钮。
- 页面是不是太宽、元素被拉得太长了？ 给主容器加上
max-width限制并居中，再分别检查宽屏与窄屏下的观感。
延伸练习建议
想真正把这些规则内化为设计直觉，不必漫无目的地刷那些脱离实际业务的概念稿。可以挑几个公认界面克制且舒适的成熟产品（例如 Stripe、Linear、GitHub），打开浏览器的 DevTools，像拆解代码一样测量它们的字号、行高、间距和阴影参数，甚至挑一个页面做 1:1 像素级复刻。亲手临摹一个小组件，再逐项对照间距、行高和按钮权重，手感很快就能建立起来。