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

「好看」的一百种具体说法

信息密度、视觉噪音、呼吸感、对比度层级…点选审美词汇看释义与正反案例。说得出名字,才指挥得动 AI

本页解决的问题

先给结论

「「好看」的一百种具体说法」要解决的关键问题是什么?

信息密度、视觉噪音、呼吸感、对比度层级…点选审美词汇看释义与正反案例。说得出名字,才指挥得动 AI

判断标准

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

下一步

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

常见误区

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

说不出名字,就改不对地方

「好看一点」交出去,AI 只能猜:猜你要加渐变,猜你要换字体,猜你要堆动效。「信息密度加一档,视觉噪音降下来」交出去,AI 立刻知道该动哪里:多放两组数据,砍掉一半徽章。词汇是判断力的容器:装得下「视觉噪音」这个词,你才留得住「这页面哪里不对」的那个直觉。

审美词汇量,决定你能指挥 AI 做到的上限。
动手 · 八个词,一张张翻开
审美词汇卡组 0 / 12
点一张卡翻开释义和正反例,再点一次收起;十二张翻完有总结。
动手 · 八个变量,一间试衣间

上面的词管「怎么评」,下面这套变量管「怎么改」。Bertin 在《图形符号学》里把视觉编码拆成八个变量,About Face 4 沿用了这套清单:形状、大小、色值、色调、饱和度、方向、纹理、位置。界面上一切「看起来不一样」,拆到底就是这八个旋钮。同一排色块,动哪个变量,讲出来的故事就不一样。

八变量试衣间 0 / 8
点一个变量,看它怎么把一排一模一样的色块区分开;八个都试过有总结。
现在五个元素一模一样,谁重要、谁一组、谁能点,都看不出来。挑一个变量动手。
练一手 · 风险要排队
场景题:五档风险怎么画 单选

仪表盘要展示五档风险,从低到高一眼排得出来。该动哪个变量?

A五种色调,绿黄橙红紫各占一档
B同一色调,色值由浅到深排五档
C五种形状,圆方三角各管一档
D给高风险那档加一块纹理
视觉管类别,文字管身份

About Face 4 里有条压舱原则:表明「是什么」用视觉属性,明确「是哪一个」用文字。图标说到「这是份文档」就到头了,哪份是合同,得靠文件名接着说。两样各干各的活,谁也替不了谁。

视觉说到哪里停 二档切换
切一下,看视觉说到哪里停,文字从哪里接手。
三个图标说完「都是文档」就没词了,想找合同只能挨个打开。
动手 · 把抱怨翻译成变量

客户和老板说不出术语,但他们的抱怨句句有所指。听懂抱怨背后的变量,改起来才有方向。先练四句最常听到的。

抱怨翻译机 0 / 4
先点左列一句抱怨,再点右列它对应的术语;配对正确会锁定。
客户的抱怨
「太乱了」
「显得廉价」
「重点不突出」
「太挤了」
翻译成术语
层级缺失
视觉噪音太高
留白不足
配色超预算
抄走这份速查表

八个词整理成了给 AI 用的句式,每句都能直接贴进 Prompt。复制一份存起来,下次改界面照着挑。

给 AI 的审美词汇速查 可复制
给 AI 的审美词汇速查(替换「好看一点」用) 信息密度:这一屏信息密度偏低,同屏多放两组关键数据。 视觉噪音:徽章和分割线太多,视觉噪音超标,装饰砍掉一半。 呼吸感:区块之间加大间距,留出呼吸感,内容别贴边。 视觉层级:标题和正文拉开字号与字重,一屏只捧一个主角。 视觉重量:主按钮保持实心,其余降成描边,压低视觉重量。 亲密性:标签贴紧自己的输入框,组与组离远,用距离表达分组。 对比度:正文和背景的对比度不够,灰字加深到可读级别。 基线对齐:所有元素左缘对齐同一条基线,别各起各的头。 HSV:调色分开说旋钮,色调、饱和度、色值,一次动一个。 有序变量:要表达从低到高,动色值或大小,别换色调。 能供性:能点的做出能点的样子,纯展示的别带按钮气质。 眯眼测试:交稿前眯眼看一遍,主角没跳出来就回炉。
练一题再走
场景题:没有高级感 单选

老板拿着你的页面说:「没有高级感」。按这一节的思路,先检查哪个?

A换个贵的字体
B数一数页面上有几种颜色、几种圆角
C加动效
D加深阴影
本节要点

「好看」是许愿,术语是指令:说得出「信息密度」「视觉噪音」,AI 才知道往哪改。

抱怨都能翻译成变量:「太乱」是视觉噪音超标,「显得廉价」是配色超预算,翻译出来才改得对。

八个变量各有分工:层级和数量找有序变量(大小、色值),分类才用色调,形状管「是什么」,纹理管「能不能按」。

下次让 AI 改界面,先从速查表挑一个词写进 Prompt,跟「好看一点」的产出对比一次,感受差距。

内容来源:newwebplay AI「审美工程」专题原创;部分设计原则整理自《About Face 4:交互设计精髓》第 17 章。

从「说不出名字,就改不对地方」把感觉变成判断

「「好看一点」交出去,AI 只能猜:猜你要加渐变,猜你要换字体,猜你要堆动效。「信息密度加一档,视觉噪音降下来」交出去,AI 立刻知道该动哪里:多放两组数据,砍掉一半徽章。」指出,AI 降低了做出“能用”成品的门槛,读者真正需要练的是看出哪里不对,并把感觉说成可以执行的要求。

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

「单位面积里装了多少有效信息。密度低是在浪费读者的屏幕;密度高但没层级,才叫挤」可以转成几个可观察的问题:用户是否知道现在发生了什么,是否知道下一步做什么,出错或空白时能否恢复,以及信息层级是否让重要内容先被看见。

漂亮不等于容易用

把「下次让 AI 改界面,先从速查表挑一个词 写进 Prompt,跟「好看一点」的产出对比一次,感受差距」用在第二个页面或流程上,记录一个具体犹豫点和一个改动后的用户动作;能被观察到的变化,才是体验改善。

从「说不出名字,就改不对地方」走到「动手 · 八个词,一张张翻开」

「说不出名字,就改不对地方」先把问题落在「「好看一点」交出去,AI 只能猜:猜你要加渐变,猜你要换字体,猜你要堆动效。「信息密度加一档,视觉噪音降下来」交出去,AI 立刻知道该动哪里:多放两组数据,砍掉一半徽章。 词汇是判断力的容器 :装得下「视觉噪音」这个词,你才留得住「这页面哪里不对」的那个直觉」上;到了「动手 · 八个词,一张张翻开」,讨论继续推进到「单位面积里装了多少有效信息。密度低是在浪费读者的屏幕;密度高但没层级,才叫挤」。两段连起来,重点就不只是记住一个结论,而是看清它成立所依赖的条件。

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

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

  • 「说不出名字,就改不对地方」:「好看一点」交出去,AI 只能猜:猜你要加渐变,猜你要换字体,猜你要堆动效。「信息密度加一档,视觉噪音降下来」交出去,AI 立刻知道该动哪里:多放两组数据,砍掉一半徽章。 词汇是判断力的容器 :装得下「视觉噪音」这个词,你才留得住「这页面哪里不对」的那个直觉
  • 「动手 · 八个词,一张张翻开」:单位面积里装了多少有效信息。密度低是在浪费读者的屏幕;密度高但没层级,才叫挤
  • 「最后的要点」:眯起一只眼看屏幕:谁还跳得出来,谁糊成一团,谁自动聚成一组。About Face 4 推荐的层级体检法,五秒钟做完,交稿前做一遍

最后的「最后的要点」把讨论落到「眯起一只眼看屏幕:谁还跳得出来,谁糊成一团,谁自动聚成一组。About Face 4 推荐的层级体检法,五秒钟做完,交稿前做一遍」。回看这条线索时,最值得保留的是:当输入、规模或风险改变,哪些判断需要重新做一遍。

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

继续阅读

同一条线上的下一篇。

文章讨论

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

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

正在讨论 「好看」的一百种具体说法 Taste Engineering:让产出值得留下
3条讨论文章讨论 · 与共学社区同步
在共学社区查看
AM
Asha Morgan内容编辑
观点实践记录

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

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

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

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

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

文章讨论4 有帮助