《Refactoring UI》：给开发者的界面设计硬规则

来源

原书：Refactoring UI，Adam Wathan & Steve Schoger 著；中文非官方全译本：https://github.mytemos.com/refactoring-ui-zh/

---

核心观点（可独立复用）

1. 从零开始：先做出灰度真实功能，再谈风格

• 界面设计不是最后一步的装饰，先用无色灰度版本验证功能和布局是否成立，再叠加视觉风格，避免在错误的骨架上做美化。

2. 层级就是一切：尺寸/字重/颜色三选一强化

• 建立视觉层级时，同一时刻只用尺寸、字重、颜色中的一种维度做强化，三个一起变会让层级混乱而不是清晰。

3. 留白先于元素

• 布局从留白/间距开始规划，而不是先摆元素再挤出间距；间距的节奏感决定了界面是否显得克制、专业。

4. 色彩系统化：色阶 + HSL + 可访问性

• 用色阶（一个色相多个明度/饱和度档位）代替随手取色，同时用 HSL 而不是 RGB 调整明暗，保证对比度满足可访问性。

5. 收尾打磨决定观感：让界面看起来「做完了」

• 阴影、圆角、细节一致性等收尾工作，是界面从「能用」到「精致」的关键差异，往往被开发者最先省略。

---

延伸方向

• 对照 Tailwind CSS 的间距/色阶命名理解其设计依据——作者 Adam Wathan 后来创立了 Tailwind，设计原则与工具高度同源。

• 书中工具链（PDF → Markdown 翻译流程）可复用于其他排版类电子书的个人整理，非仅限本书。

• 版权提示：中文译本为非官方个人学习用途，正版购买见 https://www.refactoringui.com/