读 Refactoring UI

时隔 N 个月，终于想起来写书籍读后感了（其实是懒 = =）。

先来清单第一本，Refactoring UI。

注：文章封面截自 Refactoring UI 官网

评价

忘记当时怎么找到这本书的了，pdf 版本一直存着，不过这不重要。

这是本书的目录：

### 从零开始

- 从功能而非布局开始
- 细节稍后考虑
- 不要设计太多
- 选择个性
- 限制您的选择

### 层级决定一切

- 并非所有元素都重要
- 尺寸不是一切
- 不要在彩色背景上使用灰色文字
- 通过弱化来强调
- 标签是最后手段
- 将视觉层级与文档层级分开
- 平衡视觉重量与对比度
- 语义是其次的

### 布局与间距

- 从过多的留白开始
- 建立间距与尺寸系统
- 不必填满整个屏幕
- 网格被高估了
- 相对尺寸不能缩放
- 避免含糊的间距

### 文本设计

- 建立字号层级
- 使用好的字体
- 控制行长
- 对齐基线，而不是垂直居中
- 行高需要按比例调整
- 不是每个链接都需要颜色
- 以可读性为前提进行对齐
- 有效使用字母间距

### 使用色彩

- 用 HSL 代替十六进制颜色
- 你需要的颜色比想象中更多
- 提前定义色阶
- 不要让亮度削弱饱和度
- 灰色不一定非得是纯灰
- 可访问性不等于丑
- 不要只依赖颜色传达信息

### 创造深度

- 模拟光源
- 用阴影表达层级高度
- 阴影可以由两部分组成
- 即使是扁平设计也可以有深度
- 通过重叠元素创造层次

### 处理图像

- 使用高质量照片
- 文字需要稳定的对比度
- 一切都有适合自己的目标尺寸
- 小心用户上传的内容

### 点睛之笔

- 强化默认元素
- 用强调边框增加色彩
- 装饰背景
- 不要忽视空状态
- 少用边框
- 跳出固定思维

### 继续提升

- 寻找那些你自己想不到的设计决策
- 重建你喜欢的界面

目录很直接，每一章对应一个具体的设计问题

这本书算是我读过第一本严格意义上的 UI 设计书，内容很实用，图片也很丰富。

内容大多从错误设计出发，告诉你为什么不好看，并给出改进方法。

比如层级不清、间距含糊、字体大小太随意、颜色没有色阶、阴影只是在装饰、图片没有处理好对比度……

想起来一句话，听一百个人的成功经验，不如看一个失败案例。

感悟

从功能开始

“见鬼，你可能根本不需要其他东西” — Refactoring UI

不要从“我要设计一个应用”开始，而是从一个具体功能开始。

这句话听起来很普通，但我以前经常反着来。

一打开编辑器就先想导航栏放哪、首页长什么样、侧边栏要不要、logo 做什么效果。然后想了半天，真正的功能还没开始写，脑子已经开始发热了。

Refactoring UI 的建议是先把功能最小化：

比如要做航班搜索，那就先只思考航班搜索本身需要什么：

• 出发地
• 目的地
• 出发日期
• 返回日期
• 搜索按钮

先把这个功能做出来，再考虑外壳、品牌感、动效和细节。

这其实和写代码很像。先做出最小可用版本，不要一开始就脑补完整系统。不然很容易把一个本来能完成的小功能，设计成一个永远开不了工的大工程。(挖坑从未停止，行动从未开始)

最近因为一些事情拖延，发现很多事情做不下去并不是能力不够，而是第一步被设计得太大了。

层级比装饰重要

“好的设计” 不仅仅是配色好看、风格统一、动画灵动，更重要的是层级：界面首先要让用户知道什么最重要。

如果页面上所有东西都一样重，那只会加强用户心理负担，看着就头疼。

好比写文章，一篇文章如果全是加粗、全是子标题、全是感叹号，那就等于没有重点。界面也是一样，如果每个按钮都突出，每个标签都加粗，每段文字都很大，那页面就会变得很吵。

调整层级的方法有很多：

• 重要内容可以用更深的颜色、更重的字重，而不一定是更大的字号
• 次要内容不要硬藏小，降低对比度也是一种方法
• 图标天生比文字更“重”，需要用更柔和的颜色平衡
• 一个页面通常只有一个真正主要的操作，其他操作应该降级

说起来很容易，但前端设计时往往会忽略这个问题。

比如按钮设计时可能会先去想 “这个按钮应该是什么颜色”，而不是“这个操作在当前页面到底有多重要”。

还有危险操作可能会去做成一个巨大红色按钮，这样不太坏，但一眼看上去难免突兀，更好的做法是先把它放在弱一点的位置，等二次确认弹窗出现时，再让它成为真正醒目的主操作。

间距不是玄学

我以前调间距很随缘。

margin-bottom: 12px 感觉小了点，那就 16px；还是怪怪的，那就 20px；最后页面里出现 11、45、14 各种神秘数字。

“设计系统的价值不只是统一，更是减少选择。”

间距和尺寸系统是提前定义一组值，比如从小到大准备一套间距阶梯，12px、16px、20px、24px…以后调布局时，只在这套值里选择。

还有一个很有用的观点是：刚开始可以多给留白，再慢慢减，而不是一开始就只给刚好不挤的空间。

因为我们单独看一个元素时，总觉得空白“有点多”，但放到整个页面里，往往才刚刚好。

当然信息密度高的后台、表格等不能无脑留白。重点不是“空白越多越高级”，而是你要知道自己为什么让它密，或者为什么让它松。

字体、颜色、阴影都应该系统化

这本书反复讲一个思路：不要每次都重新做小决定。

字体大小要有 type scale，颜色要有色阶，阴影要有高度系统，圆角、边框、透明度也最好有固定选择。

我之前写 CSS，一股脑上去就写，但经常停在：

诶，这个标题改 24px 还是改 26px？

这个灰色是 #666 还是 #777？

这个阴影透明度是 10% 还是 15%？

调来调去，最后页面不一定变好了，但时间是真的没了。（早知现在，何必当初）

如果先有系统，事情会简单很多。

比如颜色不只是选一个主色，而是为主色准备从浅到深的一组色阶。浅色可以做背景，深色可以做文字，中间色可以做按钮和强调。

灰色也不只是黑白之间的灰。很多舒服的灰其实带一点蓝色、黄色或橙色，所以页面会显得偏冷或偏暖。

阴影也不是“好不好看”的问题，而是在表达元素离页面有多高。按钮、下拉菜单、弹窗应该处在不同的高度，所以阴影大小也应该不同。

这么看下来，设计好像没那么玄学了。

它变成了很多可以被拆解的问题：

• 这个元素重要吗？
• 它和谁是一组？
• 它需要离用户更近吗？
• 它需要颜色表达状态吗？
• 这里的文字真的可读吗？

问清楚这些问题，比一直拖动取色器有用多了。

其他

书中还有讲很多其他实用的技巧，比如少用边框，正确的图片处理，空状态设计等。

这些要么已经了然于心，要么扯出来又太多内容，就不在这里多说了。

每个人可能都有不同的审美和设计理念，对我来说这本书提供了足够优秀的现代设计思路。

总结

总的来说，Refactoring UI 没有复杂的理论文本，更多的是设计干货，是一本非常适合前端开发者的设计书。

以后再写页面时，能够少一点“这里怪怪的但不知道哪里怪”，多一点“哦，原来是层级/间距/对比度的问题”。

这样就挺值了。