1
00:00:00,100 --> 00:00:06,432
本内容改编自小山学堂《学 AI 产品，从入门到精通》，为二次演绎配音版。

2
00:00:06,382 --> 00:00:11,262
这一集讲一件事，怎么把审美翻译成模型听得懂的话。

3
00:00:11,262 --> 00:00:13,641
先说本集解决什么问题。

4
00:00:13,641 --> 00:00:20,408
你对模型说好看一点，它只能猜，猜你要加渐变、猜你要换字体、猜你要堆动效。

5
00:00:20,408 --> 00:00:28,461
你说信息密度加一档、视觉噪音降下来，它立刻知道该动哪里，多放两组数据，砍掉一半徽章。

6
00:00:28,461 --> 00:00:33,737
这一集就是把好看拆成一堆能说出口、能验收的具体说法。

7
00:00:33,737 --> 00:00:36,574
再说为什么产品经理要关心。

8
00:00:36,574 --> 00:00:39,110
因为词汇是判断力的容器。

9
00:00:39,110 --> 00:00:44,675
装得下视觉噪音这个词，你才留得住这页面哪里不对的那个直觉。

10
00:00:44,675 --> 00:00:48,173
反过来，说不出名字，就改不对地方。

11
00:00:48,173 --> 00:00:52,560
你的审美词汇量，决定你能指挥模型做到的上限。

12
00:00:52,560 --> 00:00:54,387
顺便交代结构。

13
00:00:54,387 --> 00:01:05,324
前半段给你十二个能直接用的审美词，和一套能拆解一切视觉差异的八个变量；后半段讲怎么把这些词写成一份模型没法跑偏的规格书。

14
00:01:05,324 --> 00:01:12,043
最后提醒一句，这一集最实用的部分不是理论，是那几份可以直接复制走的话术。

15
00:01:12,043 --> 00:01:17,800
听完记得用一次，用它改一版界面，再和随口一句好看一点做对比。

16
00:01:17,956 --> 00:01:20,165
第一个词，信息密度。

17
00:01:20,115 --> 00:01:23,168
单位面积里装了多少有效信息。

18
00:01:23,168 --> 00:01:28,793
密度低是在浪费读者的屏幕；密度高但没层级，才叫挤。

19
00:01:28,793 --> 00:01:38,084
正例是一屏放下四组关键数据，每个像素都在干活；反例是一屏只说一句话，想看数据还得再点一次。

20
00:01:38,084 --> 00:01:40,319
第二个词，视觉噪音。

21
00:01:40,319 --> 00:01:42,519
与信息无关的装饰量。

22
00:01:42,519 --> 00:01:47,146
徽章、角标、分割线、多余的颜色，都是噪音。

23
00:01:47,146 --> 00:01:55,536
正例是同样的信息留一个徽章就够；反例是徽章、角标、虚线塞满，信息没变，噪音翻倍。

24
00:01:55,536 --> 00:01:57,555
第三个词，呼吸感。

25
00:01:57,555 --> 00:02:01,161
内容和边界、内容和内容之间的空隙。

26
00:02:01,161 --> 00:02:04,995
空隙也是设计，挤掉它，内容会打架。

27
00:02:04,995 --> 00:02:13,192
正例是块与块之间留出空隙，眼睛有地方歇；反例是元素顶着边贴着排，读起来喘不过气。

28
00:02:13,192 --> 00:02:15,560
第四个词，视觉层级。

29
00:02:15,560 --> 00:02:18,036
谁最重要、谁最显眼。

30
00:02:18,036 --> 00:02:22,723
字号、字重、颜色三根杠杆，一次只捧一个主角。

31
00:02:22,723 --> 00:02:31,017
正例是一个主角、一个配角、一个动作，视线有路径；反例是每行都在喊，等于没有重点。

32
00:02:31,017 --> 00:02:33,288
第五个词，视觉重量。

33
00:02:33,288 --> 00:02:38,889
元素抢注意力的能力，由大小、颜色深浅、实心程度决定。

34
00:02:38,889 --> 00:02:41,509
重的名额要留给主操作。

35
00:02:41,509 --> 00:02:50,283
正例是主操作实心、次操作描边，重量替你排好了优先级；反例是两个按钮一样重，手一抖就点错。

36
00:02:50,283 --> 00:02:52,375
第六个词，亲密性。

37
00:02:52,375 --> 00:02:55,247
相关的靠近，无关的离远。

38
00:02:55,247 --> 00:02:58,288
距离本身就在传递分组信息。

39
00:02:58,288 --> 00:03:09,803
正例是标签贴着自家输入框，组和组离远，不用读也知道谁管谁；反例是间距处处一样，标签悬在两个框中间，归属要靠猜。

40
00:03:09,940 --> 00:03:11,945
第七个词，对比度。

41
00:03:11,895 --> 00:03:14,635
文字和背景拉开多少差距。

42
00:03:14,635 --> 00:03:19,118
灰得优雅和灰得看不清，隔着一条可读性的线。

43
00:03:19,118 --> 00:03:26,991
正例是标题深、正文次深，关键信息一眼可读；反例是浅灰叠浅灰，重要条款读着费劲。

44
00:03:26,991 --> 00:03:29,227
第八个词，基线对齐。

45
00:03:29,227 --> 00:03:32,820
元素的边缘落在同几条隐形直线上。

46
00:03:32,820 --> 00:03:34,948
对齐是免费的秩序感。

47
00:03:34,948 --> 00:03:42,412
正例是左缘都落在同一条线上；反例是每行各起各的头，眼睛要不停找起点。

48
00:03:42,412 --> 00:03:45,669
第九个词，把颜色拆成三个旋钮。

49
00:03:45,669 --> 00:03:53,169
一个颜色可以拆成三个维度，第一个管它是什么颜色，第二个管它有多鲜艳，第三个管它有多深。

50
00:03:53,169 --> 00:04:01,931
有本设计经典建议设计师把三个旋钮分开考虑，跟模型调色也一样，按旋钮说，别整体抱怨颜色不好看。

51
00:04:01,931 --> 00:04:12,616
正例是只动深浅那一个旋钮，拉出层级，色相始终是一个；反例是三个旋钮一起乱拧，五个色相打成一团，谁也压不住谁。

52
00:04:12,616 --> 00:04:14,948
第十个词，有序变量。

53
00:04:14,948 --> 00:04:17,784
取值天生分大小的视觉属性。

54
00:04:17,784 --> 00:04:26,823
大小、深浅、位置是有序的，适合表达层级、数量、顺序；色相、形状是无序的，只能管分类。

55
00:04:26,823 --> 00:04:37,003
正例是深浅由浅到深排开，风险等级不用读字也排得出来；反例是色相排不出顺序，哪档更危险要靠背口诀。

56
00:04:37,003 --> 00:04:39,251
第十一个词，能供性。

57
00:04:39,251 --> 00:04:43,001
元素外观发出的、怎么操作我这样的信号。

58
00:04:43,001 --> 00:04:50,116
凸起、阴影、纹理都在说能点能拖；信号乱发，读者就会去点点不动的东西。

59
00:04:50,116 --> 00:04:59,419
正例是能点的带按钮气质，纯信息安静躺平；反例是每块都带阴影带边框，看着都能点，点了没反应。

60
00:04:59,419 --> 00:05:01,715
第十二个词，眯眼测试。

61
00:05:01,715 --> 00:05:07,736
眯起一只眼看屏幕，谁还跳得出来，谁糊成一团，谁自动聚成一组。

62
00:05:07,736 --> 00:05:10,789
五秒钟做完，交稿前做一遍。

63
00:05:10,789 --> 00:05:19,130
正例是眯着眼标题和主按钮还在，层级过关；反例是糊成一片灰，谁重要看不出来，回炉。

64
00:05:19,130 --> 00:05:24,972
这十二个词的共同点是，都指向能数、能量、能验证的东西。

65
00:05:24,972 --> 00:05:32,400
数据几组、徽章几个、间距几档、颜色几种，说到这个颗粒度，模型才改得对。

66
00:05:32,524 --> 00:05:36,476
上面的词管怎么评，接下来这套变量管怎么改。

67
00:05:36,426 --> 00:05:49,815
有位图形符号学研究者把视觉编码拆成八个变量，一本交互设计经典沿用了这套清单，分别是形状、大小、色值、色调、饱和度、方向、纹理、位置。

68
00:05:49,815 --> 00:05:54,058
界面上一切看起来不一样，拆到底就是这八个旋钮。

69
00:05:54,058 --> 00:05:55,452
一个个说。

70
00:05:55,452 --> 00:06:00,669
形状是无序的，圆的那个是另一类，但你得盯一会儿才找到它。

71
00:06:00,669 --> 00:06:07,496
形状靠轮廓传是什么，分辨它比分辨颜色和大小费注意力，想抢注意力别指望它。

72
00:06:07,496 --> 00:06:15,056
大小是有序而且可量化的，不用教，你已经把它们从小到大排完了，表达层级和数量最顺手。

73
00:06:15,056 --> 00:06:20,765
色值是有序的，深浅对比人眼抓得最快，要突出谁就把谁加深。

74
00:06:20,765 --> 00:06:33,109
色调是无序的，五种色调只能说这是五类，排不出谁先谁后；拿它表达顺序前先过两道关，色盲读者读不读得出来，还有文化联想会不会背叛你。

75
00:06:33,109 --> 00:06:43,277
饱和度是可量化的，最鲜艳的自己跳出来，黯的往后退，鲜艳的名额只留一个，整排都鲜艳就是上一集说的嘉年华效应。

76
00:06:43,277 --> 00:06:51,306
方向是半有序的，朝下那个说的是跌，它能传涨跌进退，但元素一小就看不清，当次要信号用。

77
00:06:51,306 --> 00:06:59,851
纹理是能供性信号，条纹那个像是能拖的把手，分辨纹理费注意力，少拿它做对比，它的本职是发操作信号。

78
00:06:59,851 --> 00:07:09,323
位置是有序的，挨在一起的四个是一伙，孤悬在右的那个是外人，距离近就是相关，分组和层级它都管，还免费。

79
00:07:09,323 --> 00:07:11,919
八个试完，结论落三条。

80
00:07:11,919 --> 00:07:24,755
要表达层级和数量，动大小、色值这些有序变量；要分类，才轮到色调，还得照顾色盲和文化联想；形状和纹理费注意力，一个管是什么，一个管能不能按。

81
00:07:24,755 --> 00:07:29,335
改界面前先问一句，我要传的是顺序，还是类别。

82
00:07:29,335 --> 00:07:31,883
素材还给了一道场景题。

83
00:07:31,883 --> 00:07:37,880
仪表盘要展示五档风险，从低到高一眼排得出来，该动哪个变量。

84
00:07:37,880 --> 00:07:42,231
答案是同一色调、色值由浅到深排五档。

85
00:07:42,231 --> 00:07:49,106
用五种色调、五种形状，或者给高风险那档加一块纹理，都做不到一眼排序。

86
00:07:49,106 --> 00:07:52,880
这道题把八个变量的分工考得很准。

87
00:07:53,020 --> 00:07:55,590
接下来是最实用的部分。

88
00:07:55,540 --> 00:08:00,371
客户和老板说不出术语，但他们的抱怨句句有所指。

89
00:08:00,371 --> 00:08:03,845
听懂抱怨背后的变量，改起来才有方向。

90
00:08:03,845 --> 00:08:07,258
四句最常听到的抱怨，逐句翻译。

91
00:08:07,258 --> 00:08:10,516
太乱了，翻译成视觉噪音太高。

92
00:08:10,516 --> 00:08:13,725
显得廉价，翻译成配色超预算。

93
00:08:13,725 --> 00:08:16,730
重点不突出，翻译成层级缺失。

94
00:08:16,730 --> 00:08:19,482
太挤了，翻译成留白不足。

95
00:08:19,482 --> 00:08:25,179
四句都翻译完之后你会发现一件事，客户的抱怨都能翻译成变量。

96
00:08:25,179 --> 00:08:28,376
先翻译，再动手，改得才有方向。

97
00:08:28,376 --> 00:08:34,903
素材还给了一份可以直接贴进提示词的速查表，我把句式念给你听，你照着改。

98
00:08:34,903 --> 00:08:38,989
信息密度偏低，同屏多放两组关键数据。

99
00:08:38,989 --> 00:08:43,977
徽章和分割线太多，视觉噪音超标，装饰砍掉一半。

100
00:08:43,977 --> 00:08:48,340
区块之间加大间距，留出呼吸感，内容别贴边。

101
00:08:48,340 --> 00:08:52,907
标题和正文拉开字号与字重，一屏只捧一个主角。

102
00:08:52,907 --> 00:08:57,847
主按钮保持实心，其余降成描边，压低视觉重量。

103
00:08:57,847 --> 00:09:01,609
标签贴紧自己的输入框，组与组离远。

104
00:09:01,609 --> 00:09:05,936
正文和背景的对比度不够，灰字加深到可读级别。

105
00:09:05,936 --> 00:09:08,905
所有元素左缘对齐同一条基线。

106
00:09:08,905 --> 00:09:11,910
调色分开说旋钮，一次动一个。

107
00:09:11,910 --> 00:09:16,177
要表达从低到高，动色值或大小，别换色调。

108
00:09:16,177 --> 00:09:20,972
能点的做出能点的样子，纯展示的别带按钮气质。

109
00:09:20,972 --> 00:09:24,975
交稿前眯眼看一遍，主角没跳出来就回炉。

110
00:09:24,975 --> 00:09:28,340
这十二句就是十二个词的可执行版本。

111
00:09:28,340 --> 00:09:35,047
下次改界面，从里面挑一句贴进去，跟好看一点的产出对比一次，差距很明显。

112
00:09:35,047 --> 00:09:38,496
这里还有一条压舱原则，值得单独记。

113
00:09:38,496 --> 00:09:42,823
表明是什么用视觉属性，明确是哪一个用文字。

114
00:09:42,823 --> 00:09:48,773
图标说到这是一份文档就到头了，哪份是合同，得靠文件名接着说。

115
00:09:48,773 --> 00:09:51,742
两样各干各的活，谁也替不了谁。

116
00:09:51,742 --> 00:09:59,819
素材里三个长得一样的文档图标，不靠文件名你根本找不出哪份是合同，说的就是这件事。

117
00:09:59,956 --> 00:10:02,249
接下来讲生成界面。

118
00:10:02,199 --> 00:10:06,706
给模型提界面需求，形容词是许愿，规格是指令。

119
00:10:06,706 --> 00:10:10,877
素材做了三档提示词对比，同一个落地页需求。

120
00:10:10,877 --> 00:10:14,567
最低一档是一句话，做个好看的落地页。

121
00:10:14,567 --> 00:10:27,416
产出就是默认味儿，紫色渐变、玻璃卡片、居中堆料、口号文案，什么重新定义生产力的未来、一站式全场景赋能每一个团队，还有十万人选择的信任背书。

122
00:10:27,416 --> 00:10:31,731
它像每一个模型生成的页面，就是不像你的产品。

123
00:10:31,731 --> 00:10:36,502
中间一档加了一句，做一个现代简约风格的落地页。

124
00:10:36,502 --> 00:10:39,495
收敛了一点，但停在平庸。

125
00:10:39,495 --> 00:10:46,334
现代简约帮你筛掉了渐变，可主色是什么、密度多高、圆角多大，模型还在猜。

126
00:10:46,334 --> 00:10:52,103
三张一模一样的卡片、一句谁都能用的口号，放谁家官网都成立。

127
00:10:52,103 --> 00:10:54,050
最高一档是规格书。

128
00:10:54,050 --> 00:11:09,483
参考某个以信息密度著称的工具，全站唯一主色用一个玫红，其余用中性灰；间距走八点网格；标题两级字重；圆角统一十二像素；禁止渐变、禁止表情图标、禁止超过一种阴影。

129
00:11:09,483 --> 00:11:15,649
产出直接可用，主色只出现一处，间距落在网格上，零渐变零表情。

130
00:11:15,649 --> 00:11:19,687
发挥空间被圈在规格里，模型反而稳定发挥。

131
00:11:19,687 --> 00:11:22,368
这口锅模型只背一半。

132
00:11:22,368 --> 00:11:26,502
它没拿到信息，只能输出训练数据的平均值。

133
00:11:26,502 --> 00:11:33,834
信息给一分，它答一分，这是前面讲过的规律，生成界面是这条规律最直观的展台。

134
00:11:33,834 --> 00:11:44,026
规格书其实不用背，素材把它拆成六块积木，参考产品、主色、间距、字重、排印、禁止项，每组挑一块就拼出来了。

135
00:11:44,026 --> 00:11:50,456
哪一块你选择不提，那部分就交回给模型赌运气，预览里看得一清二楚。

136
00:11:50,596 --> 00:11:54,079
规格书里最容易漏的是文字本身。

137
00:11:54,029 --> 00:11:58,548
界面十有八九是字，字出问题，配色再对也白搭。

138
00:11:58,548 --> 00:12:03,861
好消息是排印早就有现成的硬指标，可以直接翻译成提示词。

139
00:12:03,861 --> 00:12:06,806
第一条，对比度走百分之八十。

140
00:12:06,806 --> 00:12:10,423
正文与背景的明度对比至少百分之八十。

141
00:12:10,423 --> 00:12:14,077
浅灰叠浅灰的高级感，用户读起来是罚站。

142
00:12:14,077 --> 00:12:16,649
第二条，屏幕用无衬线。

143
00:12:16,649 --> 00:12:24,053
衬线字体在屏幕上会发毛，正文一律无衬线，衬线只准出现在大字号的装饰性标题。

144
00:12:24,053 --> 00:12:26,733
第三条，英文别全大写。

145
00:12:26,733 --> 00:12:34,486
人靠词形认字，全大写把词形抹平，又吵又难读；层级靠字号和字重拉，别靠喊。

146
00:12:34,486 --> 00:12:37,202
第四条，十像素是底线。

147
00:12:37,202 --> 00:12:43,873
低于十像素的字基本没法读，免责声明也得让人读得见，再小就成了摆设。

148
00:12:43,873 --> 00:12:48,236
还有一句判词，不必要的差异是一致设计的大敌。

149
00:12:48,236 --> 00:12:51,349
差不多一样的东西，就做成一样。

150
00:12:51,349 --> 00:12:55,159
写进提示词，它就是最值钱的禁止项。

151
00:12:55,159 --> 00:12:59,498
素材里有个排印找茬的例子，同一张卡两套排印。

152
00:12:59,498 --> 00:13:11,108
一套把标题做成全大写的英文，免责说明还挂着一句最终解释权归平台所有；另一套把标题换成中文的正常大小写，免责说明也写得清楚。

153
00:13:11,108 --> 00:13:16,108
后者的可读性明显更高，差别全在上面那四条硬规矩里。

154
00:13:16,108 --> 00:13:18,140
条款可以归成四类。

155
00:13:18,140 --> 00:13:27,551
第一类，正向规格，把能量化的都定死，模型没得猜，比如主色、间距走网格、圆角统一、字重只用两档。

156
00:13:27,551 --> 00:13:38,092
第二类，负向约束，把模型最爱跑偏的路提前堵死，禁止渐变、禁止表情图标、阴影不超过一种，这三句话性价比最高。

157
00:13:38,092 --> 00:13:49,666
第三类，参考锚点，用双方都见过的产品当坐标，信息密度参考某个工具，留白参考另一个工具；别说大厂风格，没有指向等于没说。

158
00:13:49,666 --> 00:14:00,399
第四类，统一性条款，把差不多一样提前统成一样，全站只允许一个主色、一套圆角、一种阴影，没有理由的差异一律删掉。

159
00:14:00,399 --> 00:14:11,241
模型特别爱在细节上加戏，这里十像素圆角、那里十二像素，两种灰、三种阴影，统一性条款把加戏的口子提前封死。

160
00:14:11,380 --> 00:14:15,656
最后给你一份可以马上用的判断清单，一共五条。

161
00:14:15,606 --> 00:14:18,864
第一条，把好看换成能验收的说法。

162
00:14:18,864 --> 00:14:30,931
信息密度、视觉噪音、呼吸感、视觉层级、视觉重量、亲密性、对比度、基线对齐，这八个词指向的都是能数、能量、能验证的东西。

163
00:14:30,931 --> 00:14:33,767
说不出名字，就改不对地方。

164
00:14:33,767 --> 00:14:36,808
第二条，听懂抱怨背后的变量。

165
00:14:36,808 --> 00:14:45,017
太乱是视觉噪音超标，显得廉价是配色超预算，重点不突出是层级缺失，太挤了是留白不足。

166
00:14:45,017 --> 00:14:47,121
先翻译，再动手。

167
00:14:47,121 --> 00:14:51,496
第三条，要顺序还是类别，决定你动哪个变量。

168
00:14:51,496 --> 00:15:01,556
层级和数量用大小、色值这些有序变量；分类才用色调，还要照顾色盲和文化联想；形状管是什么，纹理管能不能按。

169
00:15:01,556 --> 00:15:05,679
第四条，把需求写成规格书，别写形容词。

170
00:15:05,679 --> 00:15:15,066
主色、间距、字重、圆角全部定死，再加三条负向约束，禁止渐变、禁止表情图标、阴影不超过一种。

171
00:15:15,066 --> 00:15:17,878
这三句话砍掉大半默认味儿。

172
00:15:17,878 --> 00:15:20,727
第五条，排印照抄硬数字。

173
00:15:20,727 --> 00:15:26,664
对比度百分之八十，正文无衬线，英文禁全大写，字号十像素起。

174
00:15:26,664 --> 00:15:30,534
这四条写进提示词就是四行验收标准。

175
00:15:30,534 --> 00:15:33,215
这五条背后是同一句话。

176
00:15:33,215 --> 00:15:36,953
词汇是判断力的容器，规格是审美的手。

177
00:15:36,953 --> 00:15:40,030
你能说多细，模型就能做到多细。

178
00:15:40,030 --> 00:15:43,070
说得出名字，才指挥得动它。

179
00:15:43,070 --> 00:15:45,787
下一集我们继续往下走。