专题篇章 · Taste Engineering:让产出值得留下

怎么看设计才算看进去了

收藏一百个网站没用,要按顺序拆:先看层级,再量间距,最后数颜色。用这套流程现场拆一个好设计

本页解决的问题

先给结论

「怎么看设计才算看进去了」要解决的关键问题是什么?

收藏一百个网站没用,要按顺序拆:先看层级,再量间距,最后数颜色。用这套流程现场拆一个好设计

判断标准

把品味变成产品可重复的行为。 有用的结果不是一句“我觉得更好”。它应该是一条看得见的规则、一个小例子,以及判断体验何时低于标准的方法。

下一步

记录一个前后对比,让别人不用听解释也能看懂质量线。

常见误区

表面更精致了,却没有减少用户的不确定感。

先承认:收藏一百个等于没收藏

收藏夹里躺着一百个「灵感网站」,真要动手的时候还是找不到方向,这种收藏等于没收藏。打开一个好设计,扫一眼说「真好看」,截图,关掉,这是游客行为:拍了照、发了圈,什么都没带走。

看进去要按固定顺序拆,每层只回答一个问题:先看层级(谁是主角),再量间距(padding 有没有规律),然后数颜色(几种、怎么分工),最后抠细节(圆角、阴影、字重各有几档)。顺序从大到小:先抓骨架,再抠皮肤。

这四步前面还有一个第 0 步:眯眼。睁大眼睛细看之前,先把整页糊成一团看一遍,主次和分组自己会浮出来。这一节把五步全部现场演一遍。

第 0 步:先把眼睛眯起来

图形设计师有个老手艺叫眯眼测试:闭上一只眼,眯起另一只看屏幕。细节糊掉之后,剩下的只有块面、明暗和分组,这时候哪些元素还跳得出来、哪些看上去是一伙的,一眼就有答案。《About Face 4:交互设计精髓》第 17 章把它列为检验层级和关系的首选工具,还提到换个角度看,常能发现之前没注意到的布局问题。

眯眼在验的是什么?同一章给了答案:人看到一屏东西,下意识会连问两个问题,这里什么重要?这些东西有什么关联?好设计抢在你问出口之前就答完了。把这两问翻成白话,就是本节的拆解口诀。

拆解口诀两问:这个界面想让我先看什么?哪些东西被摆成了一伙

眯眼答第一遍,睁眼验第二遍。答案一致,层级过硬;眯眼时找不到落点、分组糊成一片,睁眼看再精致也白搭。下面的透视镜里新加了眯眼视图,先切它。

交互演示 · 透视镜:一张页面拆四层

下面这张落地页是用本章的规矩现做的:唯一主角、8pt 间距、一个主色。切换视图,看同一张页面在四层拆解里各自长什么样。

透视镜 5 种视图
按拆解顺序切一遍:眯眼、层级、间距、色板
shiplist.app
Shiplist 功能定价 登录
每周该发的货,一屏看完
自动汇总任务进度,生成本周发布清单
免费开始 看演示
自动同步
任务与代码状态实时汇总
一键周报
周五自动生成发布清单
进度提醒
延期风险提前三天预警
主色
浅灰
功能绿
数得过来,说明有预算
先原样看一遍,别急着下评价。四个视图各回答一个问题,顺序固定:眯眼、层级、间距、色板。
小测 · 打开好设计,第一步干什么
打开一个你喜欢的网站,第一步干什么? 单选
A截图存起来,攒着以后用
B先眯眼扫一遍,再找这一屏的唯一主角
C看用了什么字体
D直接发给 AI 让它照抄
间距是量出来的,拿尺子说话

好设计的间距不靠手感,靠一把尺子。《About Face 4》第 17 章管这把尺子叫原子网格单位:先定一个最小间距,比如 8px,页面上元素和元素、组和组的距离一律取它的倍数。书里还给网格记了三笔账:位置有规律,用户找东西更快(可用性);区域之间的比例关系妥帖,看着舒服(美感);布局决策提前做完,改版省力(效率)。

反过来,这就成了鉴定好设计的硬指标:拿工具量三五个间距,看能不能除尽同一个数。除得尽,说明背地里有一套网格系统在管;除不尽,多半是手摆的。量间距这一步,量的就是这个。

交互演示 · 拆解演练场:亲手拆一张卡

下面这张习惯打卡 App 的周报卡按 8pt 网格现做。透视镜是看别人拆,这回你自己动手:先眯眼看主次,再亮标尺量间距,最后答一道题验收。

拆解演练场 三步
按顺序来:① 眯眼 → ② 量间距 → ③ 报出原子单位
habitly.app
Habitly第 32 周
本周打卡 5 天,超过上周
再坚持 2 天,解锁连续四周全勤
继续打卡
连续天数
19
本月完成率
86%
两个按钮都能反复开关。眯眼时先回答口诀两问,再开标尺对答案。
③ 验收题:这张卡的原子网格单位是多少?
A4px
B8px
C12px
D没有固定单位,看着舒服就行
拆解拆的是别人的思考

信息设计大师 Edward Tufte 给优秀视觉设计下过一个定义,《About Face 4》第 17 章原样转述了它:

「优秀的视觉设计,是把清晰的思考视觉化。」Edward Tufte

顺着这个定义看,拆解这件事就说得通了:你找的主角、量的间距、数的颜色,都是设计者想清楚之后落在页面上的痕迹。拆一张好设计,等于把别人的思考过程倒放一遍,这比看十篇「配色技巧」长眼力。反过来,一张拆不出所以然的页面,多半当初就没想清楚。

动手 · 拆解五步,勾着走一遍

把第 0 步补进清单,五步在这里。每步只回答一个问题,勾一个亮一个,回答不上来就停在那一步多看两眼。

拆解五步清单 0 / 5
本节要点

看进去有固定顺序:第 0 步眯眼,然后层级、间距、颜色、细节。每层只回答一个问题,从骨架到皮肤。

眯眼答口诀两问:这个界面想让我先看什么?哪些东西被摆成了一伙?眯眼答一遍,睁眼验一遍。

间距拿尺子鉴定:量三五个间距,能除尽同一个数的,背地里有原子网格;除不尽的,多半是手摆的。

存参考图前先配一句判词:它好在哪个变量。收藏夹从图堆变成判例库,下一节就拿它去喂 AI。

内容来源:newwebplay AI「审美工程」专题原创;部分设计原则整理自《About Face 4:交互设计精髓》第 17 章(Alan Cooper 等著),Tufte 定位句转引自同章。

从「先承认:收藏一百个等于没收藏」把感觉变成判断

「收藏夹里躺着一百个「灵感网站」,真要动手的时候还是找不到方向,这种收藏等于没收藏。打开一个好设计,扫一眼说「真好看」,截图,关掉,这是游客行为:拍了照、发了圈,什么都没带走」指出,AI 降低了做出“能用”成品的门槛,读者真正需要练的是看出哪里不对,并把感觉说成可以执行的要求。

观察用户的下一步,而不是只看表面

「看进去要按固定顺序拆,每层只回答一个问题: 先看层级 (谁是主角), 再量间距 (padding 有没有规律), 然后数颜色 (几种、怎么分工), 最后抠细节 (圆角、阴影、字重各有几档)。顺序从大到小:先抓骨架,再抠皮肤」可以转成几个可观察的问题:用户是否知道现在发生了什么,是否知道下一步做什么,出错或空白时能否恢复,以及信息层级是否让重要内容先被看见。

漂亮不等于容易用

把「存参考图前先配一句判词: 它好在哪个变量。收藏夹从图堆变成判例库,下一节就拿它去喂 AI」用在第二个页面或流程上,记录一个具体犹豫点和一个改动后的用户动作;能被观察到的变化,才是体验改善。

从「先承认:收藏一百个等于没收藏」走到「第 0 步:先把眼睛眯起来」

「先承认:收藏一百个等于没收藏」先把问题落在「收藏夹里躺着一百个「灵感网站」,真要动手的时候还是找不到方向,这种收藏等于没收藏。打开一个好设计,扫一眼说「真好看」,截图,关掉,这是游客行为:拍了照、发了圈,什么都没带走」上;到了「第 0 步:先把眼睛眯起来」,讨论继续推进到「图形设计师有个老手艺叫 眯眼测试 :闭上一只眼,眯起另一只看屏幕。细节糊掉之后,剩下的只有块面、明暗和分组,这时候哪些元素还跳得出来、哪些看上去是一伙的,一眼就有答案。《About Face 4:交互设计精髓》第 17 章把它列为检验层级和关系的首选工具,还提到换个角度看,常能发现之前没注意到的布局问题」。两段连起来,重点就不只是记住一个结论,而是看清它成立所依赖的条件。

把这条判断带到下一个场景

评估体验时,把抽象的“好看”或“顺手”换成用户动作:他是否看懂状态、找到了下一步、能从错误中恢复,并且愿意继续使用。

  • 「先承认:收藏一百个等于没收藏」:收藏夹里躺着一百个「灵感网站」,真要动手的时候还是找不到方向,这种收藏等于没收藏。打开一个好设计,扫一眼说「真好看」,截图,关掉,这是游客行为:拍了照、发了圈,什么都没带走
  • 「第 0 步:先把眼睛眯起来」:图形设计师有个老手艺叫 眯眼测试 :闭上一只眼,眯起另一只看屏幕。细节糊掉之后,剩下的只有块面、明暗和分组,这时候哪些元素还跳得出来、哪些看上去是一伙的,一眼就有答案。《About Face 4:交互设计精髓》第 17 章把它列为检验层级和关系的首选工具,还提到换个角度看,常能发现之前没注意到的布局问题
  • 「最后的要点」:眯眼答第一遍,睁眼验第二遍。答案一致,层级过硬;眯眼时找不到落点、分组糊成一片,睁眼看再精致也白搭。下面的透视镜里新加了眯眼视图,先切它

最后的「最后的要点」把讨论落到「眯眼答第一遍,睁眼验第二遍。答案一致,层级过硬;眯眼时找不到落点、分组糊成一片,睁眼看再精致也白搭。下面的透视镜里新加了眯眼视图,先切它」。回看这条线索时,最值得保留的是:当输入、规模或风险改变,哪些判断需要重新做一遍。

标记为已学完 阅读进度会自动记录
← 上一篇下一篇 →

继续阅读

同一条线上的下一篇。

文章讨论

读到这里,留下一个判断。

把刚想明白的地方、还没想通的问题,留给下一位一起学习的人。

正在讨论 怎么看设计才算看进去了 Taste Engineering:让产出值得留下
3条讨论文章讨论 · 与共学社区同步
在共学社区查看
AM
Asha Morgan内容编辑
观点实践记录

我把这篇文章里的一个判断改写成了今天可以验证的小实验。比记住结论更有用的是,知道下一步要观察什么。

文章讨论7 有帮助
LH
Lin Harper独立开发者
观点观点

读完以后我先回头找它成立的条件,而不是直接把方法搬进项目。这个顺序让后面的取舍清楚很多。

文章讨论5 有帮助
KM
Kiki Moore产品运营
问题问题

如果把这个判断放到真实工作里,最先需要补的约束是什么?我想知道从阅读到第一次实践之间,哪一步最值得先做。

文章讨论4 有帮助