开场：收藏一百个等于没收藏
收藏夹里躺着一百个「灵感网站」，真要动手的时候还是找不到方向，这种收藏等于没收藏。打开一个好设计，扫一眼说「真好看」，截图，关掉，这是游客行为：拍了照、发了圈，什么都没带走。
一句话速览：收藏一百个网站没用，要按顺序拆：先看层级，再量间距，最后数颜色。
一、看进去要按固定顺序拆
每层只回答一个问题，顺序从大到小：先抓骨架，再抠皮肤。
| 步骤 | 问什么 |
|---|---|
| ① 看层级 | 谁是主角？ |
| ② 量间距 | padding 有没有规律？ |
| ③ 数颜色 | 几种、怎么分工？ |
| ④ 抠细节 | 圆角、阴影、字重各有几档？ |
这四步前面还有一个第 0 步：眯眼。睁大眼睛细看之前，先把整页糊成一团看一遍，主次和分组自己会浮出来。
二、第 0 步：先把眼睛眯起来
图形设计师有个老手艺叫眯眼测试：闭上一只眼，眯起另一只看屏幕。细节糊掉之后，剩下的只有块面、明暗和分组，这时候哪些元素还跳得出来、哪些看上去是一伙的，一眼就有答案。《About Face 4》第 17 章把它列为检验层级和关系的首选工具。
眯眼在验的是什么？人看到一屏东西，下意识会连问两个问题：
这个界面想让我先看什么？哪些东西被摆成了一伙？
好设计抢在你问出口之前就答完了。眯眼答第一遍，睁眼验第二遍：答案一致，层级过硬；眯眼时找不到落点、分组糊成一片，睁眼看再精致也白搭。
三、间距是量出来的，拿尺子说话
好设计的间距不靠手感，靠一把尺子。《About Face 4》第 17 章管这把尺子叫原子网格单位：先定一个最小间距，比如 8px，页面上元素和元素、组和组的距离一律取它的倍数。书里还给网格记了三笔账：
| 账 | 内容 |
|---|---|
| 可用性 | 位置有规律，用户找东西更快 |
| 美感 | 区域之间的比例关系妥帖，看着舒服 |
| 效率 | 布局决策提前做完，改版省力 |
反过来，这就成了鉴定好设计的硬指标：拿工具量三五个间距，看能不能除尽同一个数。 除得尽，说明背地里有一套网格系统在管；除不尽，多半是手摆的。
小测： 一张周报卡间距是 8、16、24——原子网格单位是 8（每个间距都是 8 的倍数）。你刚才做的事叫逆向工程：从成品反推出它的网格系统。
四、拆解拆的是别人的思考
信息设计大师 Edward Tufte 给优秀视觉设计下过一个定义，《About Face 4》第 17 章原样转述：
「优秀的视觉设计，是把清晰的思考视觉化。」——Edward Tufte
顺着这个定义看，拆解就说得通了：你找的主角、量的间距、数的颜色，都是设计者想清楚之后落在页面上的痕迹。拆一张好设计，等于把别人的思考过程倒放一遍，这比看十篇「配色技巧」长眼力。反过来，一张拆不出所以然的页面，多半当初就没想清楚。
五、拆解五步清单
把第 0 步补进清单，五步在这里，每步只回答一个问题：
| 步骤 | 动作 | 回答的问题 |
|---|---|---|
| ⓪ 先眯眼 | 把整页糊成一团看 | 什么还突出？什么成了一伙？ |
| ① 看层级 | 找主角 | 这一屏的主角是谁？其他元素在给它让路吗？ |
| ② 量间距 | 拿尺子量 padding 和 gap | 有没有共同的尺子？是 8 的倍数吗？ |
| ③ 数颜色 | 数主色/反馈色/层次色 | 一共几种？谁是主色，谁管反馈，谁管层次？ |
| ④ 抠细节 | 数圆角/阴影/字重档位 | 圆角几档？阴影几层？字重分几档？ |
回答不上来就停在那一步多看两眼。下次存参考图，先用这套顺序过一遍，配一句「它好在哪个变量」再存。坚持几周，收藏夹从图堆变成判例库。
本节要点
- 看进去有固定顺序： 第 0 步眯眼，然后层级、间距、颜色、细节。每层只回答一个问题，从骨架到皮肤。
- 眯眼答口诀两问： 这个界面想让我先看什么？哪些东西被摆成了一伙？眯眼答一遍，睁眼验一遍。
- 间距拿尺子鉴定： 量三五个间距，能除尽同一个数的，背地里有原子网格；除不尽的，多半是手摆的。
- 存参考图前先配一句判词： 它好在哪个变量。收藏夹从图堆变成判例库，下一节就拿它去喂 AI。