ep34 · 把审美翻译给 AI 听

模块：M6 产品手感 ｜ 篇章：审美工程 7 至 8 节

本集解决「怎么说，模型才听得懂」：十二个审美词、八个视觉变量、一台抱怨翻译机、一份规格书模板。

来源：xueai.miyang.cn（小山学堂 · 洛小山《学 AI 产品，从入门到精通》）

---

一、本集定位：说得出名字，才指挥得动

你对 AI 说「好看一点」，它只能猜：猜你要加渐变、猜你要换字体、猜你要堆动效。你说「信息密度加一档，视觉噪音降下来」，它立刻知道该动哪里：多放两组数据，砍掉一半徽章。

词汇是判断力的容器。 装得下「视觉噪音」这个词，你才留得住「这页面哪里不对」的那个直觉。反过来，说不出名字，就改不对地方。

你的审美词汇量，决定你能指挥 AI 做到的上限。

---

二、能力地图：从评价到修改的四层

层次	工具	回答什么
评价	十二个审美词	这个界面哪里不对
归因	抱怨翻译机	客户这句抱怨指向哪个变量
修改	八个视觉变量	我该动哪个旋钮
交付	规格书模板	怎么写，模型才不跑偏

四层是递进的：先用词把问题说清楚，再把抱怨翻译成变量，然后用变量动手，最后把要求写成模型能执行的规格。

---

三、十二个审美词

前六个

词	定义	正例	反例
信息密度	单位面积里装了多少有效信息	一屏放下四组关键数据，每个像素都在干活	一屏只说一句话，想看数据还得再点一次
视觉噪音	与信息无关的装饰量	同样的信息，留一个徽章就够	徽章、角标、虚线塞满，信息没变噪音翻倍
呼吸感	内容和边界、内容和内容之间的空隙	块与块之间留出空隙，眼睛有地方歇	元素顶着边贴着排，读起来喘不过气
视觉层级	谁最重要、谁最显眼	一个主角、一个配角、一个动作	每行都在喊，等于没有重点
视觉重量	元素抢注意力的能力	主操作实心、次操作描边	两个按钮一样重，手一抖就点错
亲密性	相关的靠近，无关的离远	标签贴着自家输入框，组和组离远	间距处处一样，归属要靠猜

后六个

词	定义	关键判断
对比度	文字和背景拉开多少差距	浅灰叠浅灰的「高级感」，用户读起来是罚站
基线对齐	元素边缘落在同几条隐形直线上	对齐是免费的秩序感
HSV 三旋钮	色调管是什么颜色、饱和度管多鲜艳、色值管多深	按旋钮说，别整体抱怨「颜色不好看」
有序变量	取值天生分大小的视觉属性	大小、色值、位置有序；色调、形状无序
能供性	元素外观发出的「怎么操作我」信号	信号乱发，读者就会去点点不动的东西
眯眼测试	眯眼看屏幕，谁跳出来、谁糊成一片	五秒钟做完，交稿前做一遍

共同点：都指向能数、能量、能验证的东西。 数据几组、徽章几个、间距几档、颜色几种——说到这个颗粒度，AI 才改得对。

---

四、八个视觉变量

上面的词管「怎么评」，下面这套变量管「怎么改」。Bertin 在《图形符号学》里把视觉编码拆成八个变量，About Face 4 沿用了这套清单：

变量	有序性	本职与注意点
形状	无序	靠轮廓传「是什么」；分辨它比分辨颜色和大小费注意力，抢注意力别指望它
大小	有序 · 可量化	天生带顺序，表达层级和数量最顺手；但它是解离属性，元素太大或太小时会吞掉形状
色值	有序	深浅对比人眼抓得最快，要突出谁就把谁加深
色调	无序	只能说「这是五类」；用前过两关：色盲读者读不读得出、文化联想会不会背叛你
饱和度	可量化	最鲜艳的自己跳出来；名额只留一个，整排都鲜艳就是嘉年华效应
方向	半有序	能传涨跌进退，但元素一小就看不清，当次要信号用
纹理	能供性信号	分辨纹理费注意力，少拿它做对比；本职是发操作信号
位置	有序	距离近就是相关，分组和层级它都管，还免费

三条结论

1. 要表达层级和数量 → 动大小、色值这些有序变量
2. 要分类 → 才轮到色调，还得照顾色盲和文化联想
3. 形状和纹理费注意力 → 一个管「是什么」，一个管「能不能按」

改界面前先问一句：我要传的是顺序，还是类别？

场景题：五档风险怎么画

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

• A 五种色调，绿黄橙红紫各占一档
• B 同一色调，色值由浅到深排五档
• C 五种形状，圆方三角各管一档
• D 给高风险那档加一块纹理

答案是 B。 只有色值是有序变量，不用读字也排得出顺序。

---

五、把抱怨翻译成变量

客户和老板说不出术语，但他们的抱怨句句有所指。

抱怨	翻译成术语
「太乱了」	视觉噪音太高
「显得廉价」	配色超预算
「重点不突出」	层级缺失
「太挤了」	留白不足

先翻译，再动手，改得才有方向。

提示1 · 先翻译抱怨，再打开编辑器

收到「这个页面显得廉价」这类反馈时，最糟的反应是立刻动手改——改了半天，对方还是觉得廉价，因为你们说的根本不是同一件事。正确顺序是先把抱怨翻译成变量：「显得廉价」指向的是配色超预算，也就是页面上颜色种类和饱和度超出了必要范围。翻译完成之后，改动方向就唯一了：数一数颜色有几种、圆角有几种，把没有理由的那些删掉。翻译这一步花两分钟，省的是两轮返工。

给 AI 的审美词汇速查（可直接复制）

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

---

六、视觉管类别，文字管身份

About Face 4 里有一条压舱原则：表明「是什么」用视觉属性，明确「是哪一个」用文字。

图标说到「这是份文档」就到头了，哪份是合同，得靠文件名接着说。素材里三个长得一样的文档图标，不靠文件名根本找不出哪份是合同。两样各干各的活，谁也替不了谁。

---

七、生 UI：从形容词到规格书

形容词是许愿，规格是指令

「做个好看的落地页」交出去，AI 会还你一个紫色渐变、居中堆料的大路货。这口锅 AI 只背一半：它没拿到信息，只能输出训练数据的平均值。 信息给一分，它答一分。

三档提示词的产出对比

档位	提示词	产出
低	「做个好看的落地页」	AI 默认味：紫色渐变、玻璃卡片、居中堆料、口号文案、十万人信任背书
中	「做一个现代简约风格的落地页」	收敛了一点，但停在平庸：筛掉了渐变，主色/密度/圆角还在猜，三张一样的卡片
高	「参考 Linear 的信息密度。全站唯一主色 #DB2777，其余用中性灰。间距走 8pt 网格。标题两级字重 800/600。圆角统一 12px。禁止渐变、禁止 emoji 图标、禁止超过一种阴影」	规格书式产出，直接可用：主色只出现一处、间距落在网格、零渐变零 emoji

主色写死、间距锁网格、字重限两级、禁止项列清单，产出立刻换一个档次。

排印有硬数字，抄就行

界面十有八九是字，字出问题，配色再对也白搭。About Face 4 第 17 章直接给了数：

条款	硬指标	理由
对比度	正文与背景的明度对比至少 80%	浅灰叠浅灰的「高级感」，用户读起来是罚站
字体	屏幕用无衬线	衬线在屏幕上会发毛；衬线只准出现在大字号装饰性标题
大小写	英文别全大写	人靠词形认字，全大写把词形抹平，又吵又难读
字号	10px 是底线	低于 10px 基本没法读，免责声明也得让人读得见

还有米莱和萨诺那句判词，About Face 4 原样收进了教材：不必要的差异是一致设计的大敌。 差不多一样的东西，就做成一样。写进提示词，它就是最值钱的禁止项。

四类条款

条款类型	作用	模板话术
正向规格	把能量化的都定死，AI 没得猜	「主色 #DB2777，间距走 8pt 网格，圆角统一 12px，字重只用 800 和 600」
负向约束	把 AI 最爱跑偏的路提前堵死	「禁止渐变、禁止 emoji 图标、禁止超过一种阴影」
参考锚点	用双方都见过的产品当坐标	「信息密度参考 Linear，留白参考 Notion」
统一性条款	把「差不多一样」提前统成一样	「全站只允许一个主色、一套圆角、一种阴影，没有理由的差异一律删掉」

负向约束性价比最高：「禁止渐变、禁止 emoji 图标、阴影不超过一种」，三句话砍掉大半 AI 味。

参考锚点要具体：别说「大厂风格」，没有指向等于没说。

统一性条款封的是加戏的口子：AI 特别爱在细节上加戏——这里 10px 圆角、那里 12px，两种灰、三种阴影。提前把口子封死。

提示2 · 负向约束的性价比来自「堵路」而不是「指路」

正向规格告诉 AI「要什么」，负向约束告诉 AI「不要什么」。两者看起来对称，实际效果不对称：正向规格需要你有明确的设计主张，负向约束只需要你知道模型的默认倾向。 而模型的默认倾向是高度可预测的——渐变、emoji 图标、多层阴影、居中堆料，来来回回就那几样。所以你不需要先成为一个设计师，也能写出高价值的负向约束：把你知道它一定会犯的那几个错列出来就行。这是审美能力最不成熟的人，也能立刻用上的条款类型。

提示3 · 规格书不用背，六块积木拼出来

素材给了个积木机，把规格书拆成六块：参考产品、主色、间距、字重、排印、禁止项。每组挑一块就拼出来了。

哪一块你选择「不提」，那部分就交回给 AI 赌运气。 预览里看得一清二楚——这是理解「为什么规格书有用」最快的方式：不是因为它写得多，而是因为它把不确定的地方一块一块收掉了。

---

八、审查清单

评价用词

• 我能用十二个词里的至少六个描述界面问题，而不是「好看 / 不好看」
• 我的评价句子里带数字：几组数据、几个徽章、几档间距、几种颜色

抱怨翻译

• 收到模糊反馈时，我先翻译成变量，再动手
• 我能把「太乱 / 廉价 / 不突出 / 太挤」对应到噪音、配色、层级、留白

变量选择

• 传层级和数量时用的是有序变量（大小、色值），不是色调
• 用色调前检查过色盲可读性与文化联想
• 形状和纹理没有被我拿来抢注意力

规格书

• 主色、间距、字重、圆角全部写死，没有留白
• 至少有两条负向约束
• 参考锚点是具体产品，不是「大厂风格」
• 有一条统一性条款，封住加戏的口子

排印

• 正文与背景明度对比 ≥ 80%
• 正文用无衬线，英文不全大写，字号不低于 10px

清单用法：不要一次性全勾。先挑当前项目里最容易出事的那一类，只把那一类勾完，改动一次、验证一次。清单的价值在于暴露盲区，不在于制造「全部通过」的成就感。

---

九、约束说明

本集内容严格取材于 content-slices/pm34-m6.md 所聚合的两节课节素材，不跨集取材、不虚构源文档没有的数据、案例与引文。

几处需要说明的约束：

1. 英文缩写与专有名词处理。 口播稿中不直接念英文缩写、产品名与人名，统一转译为中文表达：UI 转为界面，Prompt 转为提示词，emoji 转为表情图标，HSV 转为「颜色的三个旋钮」，Linear 与 Notion 转为「某个以信息密度著称的工具」「某个以留白著称的工具」，Bertin 转为「一位图形符号学研究者」，About Face 4 转为「一本交互设计经典」。
2. 色值与单位处理。 十六进制色值、像素值与网格单位不进入口播，改为「一个玫红主色」「十二像素」「八点网格」等中文表述；原值保留在本解读稿中，便于直接复制使用。
3. 数字表述。 口播稿中数字统一用中文表述（如百分之八十、十像素、五档风险），便于语音合成时的自然朗读。
4. 速查表处理。 素材中的十二句速查话术在本解读稿中以代码块形式完整保留，便于直接复制；口播稿中逐句念出，确保听众可跟读。
5. 题库隔离。 本集无题库页，口播稿不含任何自测题目内容。
6. 时长与字数门禁。 口播稿净字数控制在 4600 至 5300 之间，对应音频时长 12 至 20 分钟，均符合产线门禁。
7. 来源标注。 本集所有素材来源为小山学堂 · 洛小山《学 AI 产品，从入门到精通》，二次演绎配音版。

---

十、来源

本集素材来源：xueai.miyang.cn（小山学堂 · 洛小山《学 AI 产品，从入门到精通》）

小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章，视觉变量体系出自 Bertin《图形符号学》。

二次演绎配音版，仅供学习交流使用。