第 6 章 · 第 35 讲 · 16:27
很多产品经理心里清楚什么样算好看，可一旦要把这个「好看」交给人工智能去执行，说出口的就只剩「温馨一点、再高级一点」。模型按训练数据的平均值给一版，你明知不对，却说不清该改哪里。
根源不在模型的审美，而在输入。形容词要经过两次翻译：你把感觉压缩成词，模型再把词展开成画面，两头都有损耗。把参考直接塞进对话，损耗最小，一次到位。
在人工智能产品里，界面与配图不再是设计师交付完就结束的静态产物，而是模型每次生成的动态输出。你不再是在验收一张图，而是在验收一条生成链路。链路的输入是你写的，输入含糊，产出必然平庸，而且你连返工的理由都提不出来。
本集给出一条完整链路：先补词汇量（审美三件套），再练拆解顺序（看进去的五步），最后把看出来的东西喂给模型（三种姿势）。
本集覆盖三项能力，从眼力到生产力逐级递进。
| 层级 | 能力 | 具体表现 | 验证方式 |
|---|---|---|---|
| L1 词汇 | 审美三件套 | 构图、光影、色彩各记三个词，生图时三行写全 | 说出「三分法 / 侧逆光 / 低饱和」并解释各自管什么 |
| L2 眼力 | 拆解五步 | 眯眼 → 层级 → 间距 → 颜色 → 细节，每层只答一问 | 现场拆一个好设计，报出原子网格单位 |
| L3 传递 | 三种喂法 | 垫图管气质、风格描述管规则、设计变量管代码 | 面对一个需求能选出正确喂法并说明理由 |
| L4 标准 | 判例库 | 每张参考图配一句判词，沉淀为变量清单 | 同一需求改十稿不漂移 |
四项能力的依赖关系是单向的：没有 L1 的词汇，L2 拆出来的东西说不出来；拆不出来，L3 就只能垫图碰运气；没有 L4，每次生成都从零开始漂。
不要一上来就训练「审美感觉」。审美感觉无法传递、无法验收、无法教给模型。先花一小时把构图、光影、色彩各三个词背下来，这是投入产出比最高的一步。九个词，一张纸写得下。
出图质量的上限卡在词汇量上。说「一张好看的咖啡海报」，模型给的是训练数据的平均值；说「三分法构图、黄金时刻侧逆光、低饱和莫兰迪色调」，模型立刻拿到施工图。前者是许愿，后者是下单。
摄影师和画家练了一百年的语言是现成的，直接拿来就能用，不需要重新发明。
构图（管主体站位）
光影（管立体感）
色彩（管情绪）
不要重抽十次碰运气。把构图、光影、色彩三行写全再发；结果不对时，按这三行逐项检查是哪一行没说清，只改那一行。许愿改成下单，运气改成排查。
信息设计领域的老前辈爱德华·塔夫特（Edward Tufte）在《The Visual Display of Quantitative Information》里留了七条原则，《About Face 4：交互设计精髓》第 17 章把它们搬进了界面设计。其中两条正好解释并排为什么更灵：
因此正确姿势是：一次要四张，攒齐了并排摆开再挑，别看一张删一张。四选一时你能指着其中一张说「这张用了三分法，主体落在交点上，其余三张居中」，交稿不靠运气。
收藏夹里躺着一百个灵感网站，真要动手还是找不到方向，这种收藏等于没收藏。打开一个好设计，扫一眼说「真好看」，截图，关掉，这是游客行为——什么都没带走。
第 0 步 · 眯眼
闭上一只眼，眯起另一只看屏幕。细节糊掉之后，剩下的只有块面、明暗和分组，哪些元素跳得出来、哪些看上去是一伙的，一眼就有答案。《About Face 4》第 17 章把它列为检验层级和关系的首选工具。
眯眼在验什么？书里给了答案：人看到一屏东西，下意识会连问两个问题——这里什么重要？这些东西有什么关联？好设计抢在你问出口之前就答完了。翻成白话就是拆解口诀：
这个界面想让我先看什么？哪些东西被摆成了一伙？
眯眼答第一遍，睁眼验第二遍。答案一致，层级过硬；眯眼时找不到落点、分组糊成一片，睁眼看再精致也白搭。
第 1 步 · 层级：谁是这一屏的唯一主角。
第 2 步 · 间距：内边距有没有规律。
第 3 步 · 颜色：几种、怎么分工。数得过来，说明当初定过预算。
第 4 步 · 细节：圆角、阴影、字重各有几档。
顺序从大到小，先抓骨架，再抠皮肤。
《About Face 4》第 17 章管这把尺子叫原子网格单位：先定一个最小间距（如 8px），元素与元素、组与组的距离一律取它的倍数。书里给网格记了三笔账：位置有规律，用户找东西更快（可用性）；区域比例妥帖，看着舒服（美感）；布局决策提前做完，改版省力（效率）。
反过来就是鉴定好设计的硬指标：拿工具量三五个间距，看能不能除尽同一个数。除得尽，说明背地里有一套网格系统在管；除不尽，多半是手摆的。这一步不需要你会设计，只需要你会量。
注意一个常见陷阱：验收题里「看着舒服就行」是错误选项。看着舒服不等于没有单位，恰恰相反，通常是有人替你把单位定好了。
塔夫特给优秀视觉设计下过一个定义，《About Face 4》第 17 章原样转述：
「优秀的视觉设计，是把清晰的思考视觉化。」
顺着这个定义看，你找的主角、量的间距、数的颜色，都是设计者想清楚之后落在页面上的痕迹。拆一张好设计，等于把别人的思考过程倒放一遍。反过来，一张拆不出所以然的页面，多半当初就没想清楚。
存参考图之前，先配一句判词——它好在哪个变量。收藏夹就从图堆变成了判例库。
| 喂法 | 给什么 | 适合场景 | 短板 |
|---|---|---|---|
| 垫图 | 一到三张参考图 | 整体气质、构图、风格迁移 | 容易连版式一起抄走 |
| 风格描述 | 一段规格文字：密度、主色、圆角 | 能用规则讲清楚的风格 | 讲不清的气质写不出来 |
| 设计变量 | token 清单：主色 / 圆角 / 字体 / 间距 | 让 AI 写 UI 代码 | 管得住样式，管不住布局与文案 |
场景配对练习（三个需求，三种答案）
《About Face 4》第 17 章记录了 Cooper 公司的做法，叫体验属性：动手设计之前，先和客户一起挑出 3~5 个形容词，描述产品的气质与品牌承诺，比如「干净、克制、可信」。词一旦定下来，就成了后续所有视觉决策的裁判——方案拿不准，回头问这几个词答应不答应。
书里还说形容词之间允许打架：「安全」和「灵活」可以同时在场，这种张力值得保留，两个词冲突的地方正是早期风格稿要优先回答的问题。
搬到喂 AI 上严丝合缝：先用形容词把气质钉住，再把每个形容词翻译成具体规格。光给形容词，模型会按平均值理解；翻译这一步做完，风格描述才算写好。词是裁判，规格是执行。
把参考图拆成 design token，主色、圆角、字体、间距各落成一个变量，你交出去的已经超出一份参考，那是一套界面标准。
标准的价值在可预见性：《About Face 4》第 17 章引尼尔森的账——统一的界面标准让用户学得更快、错得更少，因为在一处攒下的经验能预见另一处的行为；对开发团队，现成决策省掉一轮轮争论。搬到 AI 身上同样成立：token 清单一给，每次生成都落在同一套标准上，改十次稿也不漂移，验收时手里有了对照物。
同一章也把丑话说在前头：遵守标准，除非有极好的其他选择。打破可以，理由要硬，这条对你和对 AI 一样适用。
产出前逐项过一遍，任何一项答不上来就停在那一步。
本集方法有其适用边界，越界使用会失效。
约束一：三件套管的是「描述」，不保证「生成」。 词汇量决定你能不能把需求说清楚，不代表模型一定能执行到位。模型能力不足时，换模型比改提示词更有效。
约束二：垫图会连版式一起抄走。 只要气质不要布局时，必须用风格描述圈住边界，否则会得到一个气质对、结构也照搬的产物。
约束三：token 清单管不住布局与文案。 样式可以标准化，信息架构和内容策略不行，那部分仍需人来定。
约束四：拆解五步适用于「好设计」，不适用于「好产品」。 一个页面拆得再漂亮，也不等于它解决了用户问题。视觉拆解是手段，不是目的。
约束五：形容词翻译有损耗。 体验属性法降低损耗，但不消除损耗。最终仍需并排对比来验收，不能只靠文字规格下判断。
约束六：参考库的价值取决于判词，不取决于数量。 收藏一百张不写判词的图，等于没收藏。判例库的复利来自每一张图背后那句「它好在哪个变量」。
从今天起改一条习惯：存图之前先写一句它好在哪。三个月后，你手上会有一批带判词的判例，而不是一堆叫不出好处的截图。这才是能拿去喂 AI、能拿去验收的资产。
误区一：把「好看」当成不可拆的整体。 一提到审美就觉得是天赋，于是放弃拆解，只能靠感觉投票。实际上审美可以拆成构图、光影、色彩三组变量，每组三个词，共九个可命名的变量。能命名就能传递，能传递就能让模型执行。
误区二：收藏等于掌握。 收藏夹的膨胀速度和眼力的增长速度不成正比，因为截图这个动作不带走任何信息。真正带走信息的是判词——那句「它好在哪个变量」。没有判词的图，在你需要的时候检索不出来。
误区三：一次只看一张候选图。 单张评估没有参照系，判断靠记忆和感觉，改到第四版已经忘了第一版什么样。并排评估把比较交给眼睛，四张铺开时差异会被放大，判据会自动浮现。
误区四：把形容词当规格发给模型。 「温馨一点、再高级一点」在模型那里会被展开成训练数据的平均值。正确顺序是先钉 3~5 个形容词做裁判，再逐词翻译成密度、主色、圆角这类可执行规格，两样一起给。
判词写得好不好，取决于它是否指向一个可复用的变量。对照下面三档，看自己停在哪一档。
| 档位 | 示例判词 | 问题 |
|---|---|---|
| 差 | 「这个好看，存一下」 | 无变量，不可检索、不可传递 |
| 中 | 「配色舒服、留白多」 | 有模糊方向，模型无法执行 |
| 好 | 「主体三分法落点，低饱和单一色系，间距全部是八像素的倍数」 | 指向可命名变量，可直接转提示词或 token |
只有第三档的判词能同时喂给人和模型。写不出来的时候，回到拆解五步，通常卡在「间距」或「颜色」这两步没量。
判例库不是存完就结束，它有一条明确的升值路径：
走完这五步，你手上的不再是灵感收藏夹，而是一套团队共用的界面标准。这也是本模块「产品手感」真正想交付的东西——手感不是玄学，是可命名、可传递、可验收的变量集合。
参考库不是收藏夹，是判例库。它的复利来自每一张图背后那句判词。
来源：xueai.miyang.cn（小山学堂 · 洛小山）
本页内容改编自小山学堂《学 AI 产品，从入门到精通》，为二次演绎配音版。部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著），Tufte 视觉设计原则与定位句转引自同章。