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

2
00:00:06,382 --> 00:00:10,456
这一集开始进入一个新篇章，主题是审美工程。

3
00:00:10,456 --> 00:00:18,786
我先说清楚，这一集不教你画图，也不教你用设计软件，它只练两件事，看出哪里不对，说清要什么。

4
00:00:18,786 --> 00:00:21,165
先说本集解决什么问题。

5
00:00:21,165 --> 00:00:28,413
过去会做就值钱，会写代码、会用设计软件、会剪视频，掌握工具本身就是门槛。

6
00:00:28,413 --> 00:00:33,449
现在这道门槛被铲平了，十分钟就能出一个能用的页面。

7
00:00:33,449 --> 00:00:39,362
于是问题从能不能做出来，变成了做出来的这十个方案里，哪个是对的。

8
00:00:39,362 --> 00:00:42,199
再说为什么产品经理要关心。

9
00:00:42,199 --> 00:00:46,574
因为当执行变得便宜，评审就成了你最主要的工作。

10
00:00:46,574 --> 00:00:54,158
你一天里可能要看十几版界面，如果只能说一句感觉不太对，那你在这场协作里其实是缺席的。

11
00:00:54,158 --> 00:00:55,985
顺便交代结构。

12
00:00:55,985 --> 00:01:09,362
前半段讲清楚为什么判断力在涨价，以及艺术和设计的区别；中段讲模型味儿的来源和一份视觉噪音体检单；后半段讲层级，也就是怎么让一屏只有一个主角。

13
00:01:09,362 --> 00:01:12,175
最后说一个我特别喜欢的设计。

14
00:01:12,175 --> 00:01:20,961
素材在这一节开头让你凭直觉投一票，等这一章学完再投一次，两票对照，你能看见自己眼力的变化。

15
00:01:20,961 --> 00:01:25,156
这种设计本身就在说一件事，审美是练出来的。

16
00:01:25,156 --> 00:01:29,218
顺便交代这一章练的两件事和它们的分工。

17
00:01:29,218 --> 00:01:35,973
看出哪里不对，靠的是第 3 到第 6 节这几个抓手；说清要什么，靠的是后面几节。

18
00:01:35,973 --> 00:01:40,036
这一集先解决前一件事，把眼睛练出来。

19
00:01:40,180 --> 00:01:42,125
先看那张对比表。

20
00:01:42,075 --> 00:01:49,010
过去门槛是会用工具、懂技术栈，学习成本以年计；现在是会说人话就能开工。

21
00:01:49,010 --> 00:01:55,164
过去一个能上线的页面以天或周计；现在十分钟出第一版，一小时出三版。

22
00:01:55,164 --> 00:02:03,253
过去拉开差距的是执行力，谁能把东西做出来；现在拉开差距的是判断力，谁能看出哪版对、说清要什么。

23
00:02:03,253 --> 00:02:07,495
一句话总结，执行免费了，判断力开始涨价。

24
00:02:07,495 --> 00:02:11,834
素材里有个稀缺度天平，把这件事讲得更透。

25
00:02:11,834 --> 00:02:20,104
把做出一个能用的东西的耗时，从七十二小时一路拖到零点二小时，你会看到两个指数此消彼长。

26
00:02:20,104 --> 00:02:28,325
耗时塌下去，能用的稀缺度跟着往下走；而能用的东西一多，挑出对的那个的溢价就抬起来了。

27
00:02:28,325 --> 00:02:36,714
这两个数只是示意性的指数，用来看方向，但它把因果讲清楚了，执行越便宜，品味越值钱。

28
00:02:36,714 --> 00:02:40,152
接下来要拆掉一个常见的挡箭牌。

29
00:02:40,152 --> 00:02:46,594
聊到这里总会撞上一句反驳，品味是天赋，各花入各眼，这怎么教。

30
00:02:46,594 --> 00:02:49,983
有一本设计经典把这团乱麻拆开了。

31
00:02:49,983 --> 00:03:00,957
艺术是艺术家表达自我的方式，约束越少越好，作品越独特越值钱；设计是给特定人群做有特定用途的东西，头号任务是清晰沟通。

32
00:03:00,957 --> 00:03:02,832
这个区分很关键。

33
00:03:02,832 --> 00:03:09,803
评价一件艺术品，问的是它表达了什么，没有标准答案，吵到天亮也分不出高下。

34
00:03:09,803 --> 00:03:15,440
评价一个设计，问的是信息传到目标人群了没有，这可以验证。

35
00:03:15,440 --> 00:03:20,584
前者确实接近天赋，教不了；后者有裁判，练了就会。

36
00:03:20,584 --> 00:03:23,349
素材里有个例子特别直观。

37
00:03:23,349 --> 00:03:30,007
同一张海报，构图和配色都成立，但时间、地点、票价一个字都没有。

38
00:03:30,007 --> 00:03:34,707
挂在美术馆里，怎么做都成立，它只对创作者负责。

39
00:03:34,707 --> 00:03:45,019
可一旦它的身份换成下周演出的预告，第一个要回答的问题就变成了，路人三秒内能不能看到时间、地点和买票入口。

40
00:03:45,019 --> 00:03:51,245
另一本交互设计经典把这条路线叫目标导向，还补了一句很重要的话。

41
00:03:51,245 --> 00:03:59,695
视觉传达难免掺主观判断，但把体验目标和商业目标说清楚之后，品味差异可以被努力缩小。

42
00:03:59,695 --> 00:04:04,034
美学没有被赶出场，只是被装进了目标的框架里。

43
00:04:04,034 --> 00:04:07,291
这就是审美可训练的理论地基。

44
00:04:07,420 --> 00:04:09,581
先做一个动手练习。

45
00:04:09,531 --> 00:04:16,514
让模型随便生成一个页面，十有八九是紫色渐变、毛玻璃、居中大标题三件套。

46
00:04:16,514 --> 00:04:19,363
素材把五个高频特征列了出来。

47
00:04:19,363 --> 00:04:21,803
第一，紫色渐变打底。

48
00:04:21,803 --> 00:04:30,144
某个时期之后，企业软件官网把紫色渐变用成了行业制服，训练数据里这种背景的密度奇高。

49
00:04:30,144 --> 00:04:34,447
你没说要什么背景，模型就落在样本最密的地方。

50
00:04:34,447 --> 00:04:37,608
第二，居中大标题加两行灰字。

51
00:04:37,608 --> 00:04:47,283
这是模板站最通用的版式，放在哪个行业都不出错；对模型来说，不出错的版式出现次数最多，于是成了默认答案。

52
00:04:47,283 --> 00:04:49,459
第三，毛玻璃卡片。

53
00:04:49,459 --> 00:05:00,240
它流行的那几年，教程和素材站贡献了海量样本，还给它贴上高级感的标签，模型想表达精致时，第一反应就是糊一层玻璃。

54
00:05:00,240 --> 00:05:02,908
第四，三列图标卡片。

55
00:05:02,908 --> 00:05:13,041
三个卖点配三个图标是落地页教程的标准段落，几乎每套模板都带一份，模型见得多了，写到功能介绍就自动排出三列。

56
00:05:13,041 --> 00:05:15,577
第五，渐变主按钮。

57
00:05:15,577 --> 00:05:24,146
素材站里重要的按钮常被做成渐变来吸引眼球，模型把两者绑定了，一到行动按钮，渐变就上。

58
00:05:24,146 --> 00:05:32,199
五个都抓到之后你会发现，单看每一件都算体面，问题在于这套组合出现在了成千上万个页面上。

59
00:05:32,199 --> 00:05:36,490
所谓模型味儿，就是训练数据高概率区域的味道。

60
00:05:36,490 --> 00:05:40,817
你没给指令的地方，它一律用最常见的答案填上。

61
00:05:40,817 --> 00:05:43,822
这套模板连文案都高度一致。

62
00:05:43,822 --> 00:06:08,525
你会看到右上角挂着一个新功能标签，标题是释放你的无限潜能，副标题是一站式智能平台让工作更高效，下面跟一句受到全球一万多个团队的信赖，再配三张图标卡，分别写智能摘要、数据洞察、无缝协作，最后两个按钮，一个免费开始使用，一个小字写着免费试用十四天、无需信用卡。

63
00:06:08,525 --> 00:06:13,105
这套组合你在过去两年里，一定见过至少几十次。

64
00:06:13,105 --> 00:06:16,001
这里有个类比我觉得特别精准。

65
00:06:16,001 --> 00:06:18,886
这和语言幻觉是同一个机制。

66
00:06:18,886 --> 00:06:24,799
接话的时候，顺的赢过对的；生成设计的时候，常见的赢过好的。

67
00:06:24,799 --> 00:06:33,778
它交出紫色渐变三件套，正如它一本正经地编出一个不存在的书名，都是在挑最像会出现在这里的答案。

68
00:06:33,778 --> 00:06:36,037
平均值就是平庸。

69
00:06:36,172 --> 00:06:38,958
模型味儿其实有更早的学名。

70
00:06:38,908 --> 00:06:48,463
一本交互设计经典里管这类东西叫视觉噪音，定义是多余的视觉元素，把注意力从真正传达信息的对象上拽走。

71
00:06:48,463 --> 00:06:51,456
书里列了一份七种形式的清单。

72
00:06:51,456 --> 00:06:53,391
第一，过分装饰。

73
00:06:53,391 --> 00:06:56,228
第二，没有信息量的立体展示。

74
00:06:56,228 --> 00:06:58,439
第三，过重的分隔。

75
00:06:58,439 --> 00:07:00,519
第四，元素拥挤。

76
00:07:00,519 --> 00:07:03,139
第五，颜色纹理对比过密。

77
00:07:03,139 --> 00:07:05,218
第六，颜色太多。

78
00:07:05,218 --> 00:07:07,213
第七，层级无力。

79
00:07:07,213 --> 00:07:09,809
素材给了一个很狠的例子。

80
00:07:09,809 --> 00:07:13,091
一份团队周报后台，七种全占。

81
00:07:13,091 --> 00:07:42,097
标题被拉开字距做装饰，是过分装饰；数据总览挂了一个三维可视化引擎的升级横幅，是没有信息量的立体展示；三组数字之间用粗线隔开，是分隔过重；标签栏挤了十几个选项，是元素拥挤；完成率、延期率、满意度三组数字用不同颜色并排，是对比过密；六个操作按钮各一个颜色，是颜色太多；而所有区块字号字重几乎一样，是层级无力。

82
00:07:42,097 --> 00:07:49,681
这份清单最值得记住的地方在于，它写出来的时候还没有生成式模型，但病理条条对得上。

83
00:07:49,681 --> 00:07:57,037
所以它可以直接当成验收工具，拿到一份模型产出的界面，先按这张单子体检一遍。

84
00:07:57,172 --> 00:08:02,506
七种噪音里，颜色太多有个专门的名字，叫嘉年华效应。

85
00:08:02,456 --> 00:08:11,963
意思是颜色像调色板一样拥挤在一起，会让用户不堪重负；饱和度再拉满，喧闹感加倍，直接和内容抢戏。

86
00:08:11,963 --> 00:08:28,686
素材里同一个周末市集的宣传页，两种配色，一边是五六种颜色加倒计时加贴纸徽章，还堆着扫码进群每日签到抽盲盒、朋友圈集赞二十个换咖啡；另一边是白底、一个主色、信息排成清晰几行。

87
00:08:28,686 --> 00:08:31,162
后者明显更容易看进去。

88
00:08:31,162 --> 00:08:35,429
两边信息量其实差不多，差别只在颜色有没有节制。

89
00:08:35,429 --> 00:08:37,652
讲完病症，讲解法。

90
00:08:37,652 --> 00:08:40,645
好消息是，这个机制留了一扇门。

91
00:08:40,645 --> 00:08:50,068
概率分布是随输入变化的，你的描述越具体，模型可选的区域就越窄，窄到一定程度，它就被你拉出了平均值。

92
00:08:50,068 --> 00:08:54,647
素材做了一个具体度旋钮，同一个需求三种说法。

93
00:08:54,647 --> 00:09:04,924
最低一档是做个好看的页面，产出的还是那套，全新引擎驱动、开启智能新时代、赋能每一个团队，配上三列图标卡。

94
00:09:04,924 --> 00:09:12,099
中间一档说更简单的团队协作，产出开始有具体主张，一个工作台管理项目与文档。

95
00:09:12,099 --> 00:09:26,907
最高一档给的是参照物加硬约束，参考某个信息密度高的工具，全站只用一个主色，禁止渐变，产出就变成给工程团队的任务系统，键盘优先、毫秒级响应，文案也跟着专业了。

96
00:09:26,907 --> 00:09:32,845
所以下次让模型生成页面前，先把那五个特征列进禁用清单。

97
00:09:32,845 --> 00:09:38,686
参照物加可验收的硬约束，每加一档，产出离默认味儿远一步。

98
00:09:38,836 --> 00:09:42,199
接下来讲这一章的第一个抓手，层级。

99
00:09:42,149 --> 00:09:45,911
打开一个页面，视线总得先落在某一处。

100
00:09:45,911 --> 00:09:50,502
设计者不安排这个落点，读者的眼睛就会自己乱撞。

101
00:09:50,502 --> 00:09:52,942
先记住一句反直觉的话。

102
00:09:52,942 --> 00:09:56,488
什么都想强调，等于什么都没强调。

103
00:09:56,488 --> 00:10:00,623
注意力是稀缺资源，界面上每个元素都在抢。

104
00:10:00,623 --> 00:10:09,637
加粗、标红、放大，单独看每一下都有道理，叠在一起就互相抵消，五个主角同台，观众谁都记不住。

105
00:10:09,637 --> 00:10:15,923
层级的做法反过来，先选出一个主角，再让其余角色按重要程度递减。

106
00:10:15,923 --> 00:10:18,038
手里的杠杆就三根。

107
00:10:18,038 --> 00:10:28,351
第一根是字号，主角比配角大一到两档就够，档位拉开、数量克制；常见的翻车是三个元素都用最大号，大字互相打架。

108
00:10:28,351 --> 00:10:36,608
第二根是字重，正文一个档、强调一个档，两档打天下；翻车是满屏加粗，粗就失去了更重要的含义。

109
00:10:36,608 --> 00:10:45,598
第三根是颜色，强调色只给一个动作或一个数字；翻车是标红三处，读者不知道哪个红才是真警报。

110
00:10:45,598 --> 00:10:49,144
怎么验收层级，有个特别朴素的口诀。

111
00:10:49,144 --> 00:10:56,572
读者扫一眼，心里在下意识问两个问题，这里什么重要，紧接着，这些东西有什么关联。

112
00:10:56,572 --> 00:11:02,810
层级答得好，用户几乎不会留意到它的存在；答得糟，混乱立刻跳出来。

113
00:11:02,810 --> 00:11:16,368
素材里那个经营数据看板就是这个道理，同样的六个指标，一种排法是六个数字一样大，另一种是营收做到最大、其余按重要程度递减，后者的重点三秒就能找到。

114
00:11:16,368 --> 00:11:21,560
素材还给了个商品卡片的试验台，你可以亲手拉那三根杠杆。

115
00:11:21,560 --> 00:11:38,235
当强调色被调到三处，标题、价格、按钮各自用了一个醒目色，全卡就有三个主角在打架；调回一处，让那个强调色只给加入购物车，全卡就只剩一个视线落点，价格和标题靠字号字重排出先后。

116
00:11:38,235 --> 00:11:42,586
这就是层级的全部秘密，一屏只有一个主角。

117
00:11:42,724 --> 00:11:49,765
层级立不起来，很多人第一反应是做加法，主角不够醒目就加大、加粗、上底色。

118
00:11:49,715 --> 00:11:52,660
设计经典给的建议正好相反。

119
00:11:52,660 --> 00:11:58,417
两个元素抢注意力时，调低次要的那个，胜过调高重要的那个。

120
00:11:58,417 --> 00:12:06,374
调低给主角腾出了空间；调高只会掀起军备竞赛，这一版标题加大，下一版按钮跟着加大。

121
00:12:06,374 --> 00:12:13,261
书里有个很生动的比方，满屏每个字都是红色粗体的时候，哪个字凸显得出来。

122
00:12:13,261 --> 00:12:16,962
素材里那个通知列表的例子特别清楚。

123
00:12:16,962 --> 00:12:26,686
四行通知都申请了加粗，结果服务器告警和本周周报平起平坐，读者得逐行读完才知道哪条要紧，层级等于没有。

124
00:12:26,686 --> 00:12:32,972
正确做法是把另外三行的字重调回正常，告警那行自然就突出了。

125
00:12:32,972 --> 00:12:35,328
第二个要点是挑对变量。

126
00:12:35,328 --> 00:12:39,727
层级要靠视觉变量传出来，但变量分两种脾气。

127
00:12:39,727 --> 00:12:52,131
大小和明度是有顺序的变量，人眼会自动把更大、更深读成更重要；色调没有天然顺序，读者排不出红和蓝谁先谁后，还会往颜色里猜含义。

128
00:12:52,131 --> 00:12:58,681
所以传层级优先用大小和明度这两根有顺序的杠杆，色调留给分类用。

129
00:12:58,681 --> 00:13:08,008
素材里三条任务按重要程度排，用三档字号一眼就能读出顺序，换成三种颜色就变成了三件并列的事。

130
00:13:08,008 --> 00:13:13,140
最后给你一个零成本的验收办法，图形设计师管它叫眯眼测试。

131
00:13:13,140 --> 00:13:19,486
眯起眼看屏幕，细节糊掉之后，看哪些元素还突出、哪些自动缩成一组。

132
00:13:19,486 --> 00:13:26,686
素材里两块界面，一块有层级、一块没有，模糊之后有层级的那块依然站得住。

133
00:13:26,686 --> 00:13:36,313
这个办法的好处是它绕过了你的理性判断，直接暴露眼睛的第一反应，换个角度看，总能发现之前没发现的布局问题。

134
00:13:36,313 --> 00:13:40,845
交付前眯一次眼，分不出主次就回去重拉杠杆。

135
00:13:40,996 --> 00:13:45,272
最后给你一份可以马上用的判断清单，一共五条。

136
00:13:45,222 --> 00:13:48,612
第一条，把判断力当成核心资产。

137
00:13:48,612 --> 00:13:57,326
执行已经免费了，你能提供的稀缺价值，是从十个方案里挑出对的那个，并且说清差在哪、该怎么改。

138
00:13:57,326 --> 00:13:59,273
别再比谁做得快。

139
00:13:59,273 --> 00:14:02,386
第二条，用目标把审美分歧收窄。

140
00:14:02,386 --> 00:14:06,749
评价设计只问一句，信息传到目标人群了没有。

141
00:14:06,749 --> 00:14:12,951
把体验目标和商业目标摆在桌面上，品味之争就会变成可以验证的问题。

142
00:14:12,951 --> 00:14:16,352
第三条，先按体检单查模型味儿。

143
00:14:16,352 --> 00:14:34,193
紫色渐变、居中大标题、毛玻璃、三列图标卡、渐变按钮，这五个是默认输出；再对照七种视觉噪音逐项确诊，过分装饰、没有信息量的立体展示、过重分隔、元素拥挤、对比过密、颜色太多、层级无力。

144
00:14:34,193 --> 00:14:38,051
第四条，用具体度把模型拉出平均值。

145
00:14:38,051 --> 00:14:42,077
只说做个好看的页面，得到的一定是平均值。

146
00:14:42,077 --> 00:14:48,772
给它参照物，再加可验收的硬约束，比如全站只用一个主色、禁止渐变。

147
00:14:48,772 --> 00:14:52,907
第五条，层级只留一个主角，靠减法立起来。

148
00:14:52,907 --> 00:14:59,217
三根杠杆各拉一档就够，字号大一到两档、字重两档、强调色一处。

149
00:14:59,217 --> 00:15:05,310
想强调先调低配角，传层级优先用大小和明度，交付前眯一次眼。

150
00:15:05,310 --> 00:15:07,991
这五条背后是同一句话。

151
00:15:07,991 --> 00:15:16,308
当人人都能十分钟做出能用的东西，能用就开始贬值，而看得出哪里不对、说得出要什么，会一直稀缺。

152
00:15:16,308 --> 00:15:22,570
这两个能力都不是天赋，它们有裁判、有清单、有口诀，练了就会。

153
00:15:22,570 --> 00:15:25,587
下一集我们继续练第二个抓手。