怎么看设计才算看进去了
收藏夹在膨胀,眼力没长进,问题出在看的方式。这一节给一套固定的拆解顺序,把「真好看」翻译成能带走的变量,你的参考库从这里开始有复利。
收藏夹里躺着一百个「灵感网站」,真要动手的时候还是找不到方向,这种收藏等于没收藏。打开一个好设计,扫一眼说「真好看」,截图,关掉,这是游客行为:拍了照、发了圈,什么都没带走。
看进去要按固定顺序拆,每层只回答一个问题:先看层级(谁是主角),再量间距(padding 有没有规律),然后数颜色(几种、怎么分工),最后抠细节(圆角、阴影、字重各有几档)。顺序从大到小:先抓骨架,再抠皮肤。
这四步前面还有一个第 0 步:眯眼。睁大眼睛细看之前,先把整页糊成一团看一遍,主次和分组自己会浮出来。这一节把五步全部现场演一遍。
图形设计师有个老手艺叫眯眼测试:闭上一只眼,眯起另一只看屏幕。细节糊掉之后,剩下的只有块面、明暗和分组,这时候哪些元素还跳得出来、哪些看上去是一伙的,一眼就有答案。《About Face 4:交互设计精髓》第 17 章把它列为检验层级和关系的首选工具,还提到换个角度看,常能发现之前没注意到的布局问题。
眯眼在验的是什么?同一章给了答案:人看到一屏东西,下意识会连问两个问题,这里什么重要?这些东西有什么关联?好设计抢在你问出口之前就答完了。把这两问翻成白话,就是本节的拆解口诀。
眯眼答第一遍,睁眼验第二遍。答案一致,层级过硬;眯眼时找不到落点、分组糊成一片,睁眼看再精致也白搭。下面的透视镜里新加了眯眼视图,先切它。
下面这张落地页是用本章的规矩现做的:唯一主角、8pt 间距、一个主色。切换视图,看同一张页面在四层拆解里各自长什么样。
好设计的间距不靠手感,靠一把尺子。《About Face 4》第 17 章管这把尺子叫原子网格单位:先定一个最小间距,比如 8px,页面上元素和元素、组和组的距离一律取它的倍数。书里还给网格记了三笔账:位置有规律,用户找东西更快(可用性);区域之间的比例关系妥帖,看着舒服(美感);布局决策提前做完,改版省力(效率)。
反过来,这就成了鉴定好设计的硬指标:拿工具量三五个间距,看能不能除尽同一个数。除得尽,说明背地里有一套网格系统在管;除不尽,多半是手摆的。量间距这一步,量的就是这个。
下面这张习惯打卡 App 的周报卡按 8pt 网格现做。透视镜是看别人拆,这回你自己动手:先眯眼看主次,再亮标尺量间距,最后答一道题验收。
信息设计大师 Edward Tufte 给优秀视觉设计下过一个定义,《About Face 4》第 17 章原样转述了它:
顺着这个定义看,拆解这件事就说得通了:你找的主角、量的间距、数的颜色,都是设计者想清楚之后落在页面上的痕迹。拆一张好设计,等于把别人的思考过程倒放一遍,这比看十篇「配色技巧」长眼力。反过来,一张拆不出所以然的页面,多半当初就没想清楚。
把第 0 步补进清单,五步在这里。每步只回答一个问题,勾一个亮一个,回答不上来就停在那一步多看两眼。
看进去有固定顺序:第 0 步眯眼,然后层级、间距、颜色、细节。每层只回答一个问题,从骨架到皮肤。
眯眼答口诀两问:这个界面想让我先看什么?哪些东西被摆成了一伙?眯眼答一遍,睁眼验一遍。
间距拿尺子鉴定:量三五个间距,能除尽同一个数的,背地里有原子网格;除不尽的,多半是手摆的。
存参考图前先配一句判词:它好在哪个变量。收藏夹从图堆变成判例库,下一节就拿它去喂 AI。
内容来源:小山学堂「审美工程」专题原创;部分设计原则整理自《About Face 4:交互设计精髓》第 17 章(Alan Cooper 等著),Tufte 定位句转引自同章。