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

2
00:00:06,382 --> 00:00:11,971
这一集要解决一个很多产品经理都撞过、但很少说出口的窘境。

3
00:00:11,971 --> 00:00:21,911
你心里清楚什么样算好看，可一旦要把这个好看交给人工智能去执行，说出口的就只剩下温馨一点、再高级一点。

4
00:00:21,911 --> 00:00:28,341
结果模型按训练数据的平均值给了你一版，你明知不对，却说不清该改哪里。

5
00:00:28,341 --> 00:00:33,762
这一集想给你的，就是把审美翻译成可执行指令的那套语言。

6
00:00:33,762 --> 00:00:36,502
为什么产品经理要关心这件事。

7
00:00:36,502 --> 00:00:46,165
因为在人工智能产品里，界面和配图不再是设计师交付完就结束的静态产物，它们变成了模型每次生成的动态输出。

8
00:00:46,165 --> 00:00:50,625
你不再是在验收一张图，你是在验收一条生成链路。

9
00:00:50,625 --> 00:00:57,992
链路的输入是你写的，输入含糊，产出必然平庸，而且你连返工的理由都提不出来。

10
00:00:57,992 --> 00:01:00,024
这一集分三段走。

11
00:01:00,024 --> 00:01:06,490
第一段讲生图的审美三件套，构图、光影、色彩，先把词汇量补上。

12
00:01:06,490 --> 00:01:13,509
第二段讲怎么看设计才算看进去了，给你一套固定的拆解顺序，让你看得出好在哪里。

13
00:01:13,509 --> 00:01:20,192
第三段讲怎么把你看出来的东西喂给人工智能，三种姿势和各自的适用场景。

14
00:01:20,192 --> 00:01:25,985
三段串起来，是一条从眼力到参考库再到生产力的完整链路。

15
00:01:25,985 --> 00:01:28,665
顺便说清这一集不做什么。

16
00:01:28,665 --> 00:01:34,278
它不教你画画，也不要求你懂代码，更不会让你去背色彩理论。

17
00:01:34,278 --> 00:01:42,367
它只做一件事，把你本来就有的审美，变成一套能写下来、能交给模型、能拿去验收的语言。

18
00:01:42,508 --> 00:01:45,462
先说一句可能有点扎心的话。

19
00:01:45,412 --> 00:01:49,030
出图质量的上限，卡在你的词汇量上。

20
00:01:49,030 --> 00:01:57,696
你说一张好看的咖啡海报，模型给你的是训练数据的平均值，因为它只能按最稳妥、最中间的那条路走。

21
00:01:57,696 --> 00:02:04,667
你说三分法构图、黄金时刻侧逆光、低饱和莫兰迪色调，模型立刻拿到了施工图。

22
00:02:04,667 --> 00:02:09,511
同样是让人工智能出图，前者是许愿，后者是下单。

23
00:02:09,511 --> 00:02:11,494
这里有个便宜可以占。

24
00:02:11,494 --> 00:02:17,335
摄影师和画家练了一百年的那套语言是现成的，直接拿来就能用。

25
00:02:17,335 --> 00:02:24,908
你不需要重新发明一套描述画面的词汇，你只需要把行业里已有的术语装进自己的提示词里。

26
00:02:24,908 --> 00:02:28,309
审美这套语言可以拆成三件套。

27
00:02:28,309 --> 00:02:32,912
构图管主体站位，也就是画面里的主角站在哪。

28
00:02:32,912 --> 00:02:38,213
光影管立体感，也就是这个东西看起来是平的还是立起来的。

29
00:02:38,213 --> 00:02:44,186
色彩管情绪，也就是这一屏给人的第一感觉是冷是暖、是躁是静。

30
00:02:44,186 --> 00:02:47,660
三件套各管一段，谁也替代不了谁。

31
00:02:47,660 --> 00:02:51,314
为什么这三件套对产品经理特别有用。

32
00:02:51,314 --> 00:02:53,429
因为它们是验收语言。

33
00:02:53,429 --> 00:03:00,496
你拿到一张模型出的图，说不出哪里不对，就只能说感觉不对，然后重抽十次碰运气。

34
00:03:00,496 --> 00:03:10,280
而有了三件套，你就有了一份排查顺序，先查构图，再查光影，最后查色彩，定位到某一行没说清，改那一行就够了。

35
00:03:10,280 --> 00:03:15,869
许愿改成下单，运气改成排查，这就是词汇量的兑现方式。

36
00:03:16,012 --> 00:03:19,014
三件套各记三个词，够用了。

37
00:03:18,964 --> 00:03:20,683
构图这三个词。

38
00:03:20,683 --> 00:03:26,332
三分法，画面横竖各切三份，主体放在交点上，比居中耐看。

39
00:03:26,332 --> 00:03:30,827
留白，空出来的地方给主体让位，画面不用填满。

40
00:03:30,827 --> 00:03:36,597
视线引导，用海岸线、道路这类线条，把视线牵到主体上。

41
00:03:36,597 --> 00:03:38,339
光影这三个词。

42
00:03:38,339 --> 00:03:42,366
侧光，光从侧面来，立体感靠影子撑起来。

43
00:03:42,366 --> 00:03:47,678
黄金时刻，日出日落前后一小时，光又软又有方向。

44
00:03:47,678 --> 00:03:52,186
明暗对比，亮部和暗部拉开，主体从背景里跳出来。

45
00:03:52,186 --> 00:03:54,061
色彩这三个词。

46
00:03:54,061 --> 00:03:58,592
色调统一，全图一个色系，杂色越少越耐看。

47
00:03:58,592 --> 00:04:02,678
低饱和，把颜色的音量调低，质感立刻上来。

48
00:04:02,678 --> 00:04:07,258
点缀色，留一处高饱和当视觉焦点，多了就打架。

49
00:04:07,258 --> 00:04:09,770
九个词，一张纸写得下。

50
00:04:09,770 --> 00:04:15,887
课程里这九个词不是照着术语表背下来的，是靠三局二选一练出来的。

51
00:04:15,887 --> 00:04:25,287
同一处灯塔海岸两种构图，同一只咖啡杯两种打光，同一个工作台两种配色，每局只让你点一下更好的那张。

52
00:04:25,287 --> 00:04:29,000
你答得那么快，靠的就是对比把差异放大了。

53
00:04:29,000 --> 00:04:35,407
练完三局，九个词自然就记住了，因为它们各自对应一个你亲眼见过的差别。

54
00:04:35,407 --> 00:04:40,575
但这九个词的价值不在记住，在于它们让你有了说不的依据。

55
00:04:40,575 --> 00:04:42,510
这里要补一句背景。

56
00:04:42,510 --> 00:04:54,974
课程里提到信息设计领域的老前辈爱德华·塔夫特，他在讲定量信息可视化那本书里留了七条原则，《交互设计精髓》第四版把它们搬进了界面设计。

57
00:04:54,974 --> 00:04:58,844
其中两条正好解释三件套为什么这么管用。

58
00:04:58,844 --> 00:05:02,738
第一条，加强视觉对比，对比产生情境。

59
00:05:02,738 --> 00:05:10,623
单独看一张灯塔照，你说不准构图好坏；两张并排，三分法和死板居中立刻分出高下。

60
00:05:10,623 --> 00:05:14,902
眼睛天生是一台对比机器，缺的只是并排的机会。

61
00:05:14,902 --> 00:05:19,698
第二条，在相邻空间上并排显示，优于按时间堆积。

62
00:05:19,698 --> 00:05:24,313
这个放到下一段细讲，因为它直接改了一条工作流。

63
00:05:24,460 --> 00:05:31,873
让人工智能出图，正确的姿势是一次要四张，攒齐了并排摆开再挑，别看一张删一张。

64
00:05:31,823 --> 00:05:32,965
为什么。

65
00:05:32,965 --> 00:05:41,571
一张张翻着看，比较靠短时记忆，翻到第四张，第一张长什么样已经记不清了；并排摆开，比较靠眼睛。

66
00:05:41,571 --> 00:05:49,432
课程里还真做了这个对比，同一个找图任务，轮播翻着找和并排扫一遍，速度差得相当明显。

67
00:05:49,432 --> 00:05:57,184
任务本身不难，从前面出现过的六张图里找出侧逆光那张，难的从来不是认出来，是记不住。

68
00:05:57,184 --> 00:06:00,213
四选一的验收，用的就是这一招。

69
00:06:00,213 --> 00:06:09,203
你让模型给一个咖啡品牌出四张海报候选，客户明天要，你是逐张看完凭印象挑，还是四张铺开对着挑。

70
00:06:09,203 --> 00:06:13,001
后者不只是更快，更重要的是它有判据。

71
00:06:13,001 --> 00:06:20,513
你能指着其中一张说，这张用了三分法，主体落在交点上，其余三张都是居中，所以选它。

72
00:06:20,513 --> 00:06:23,122
这就是词汇量的兑现方式。

73
00:06:23,122 --> 00:06:29,287
说得出三分法、侧逆光、低饱和，四选一就有依据，交稿不靠运气。

74
00:06:29,287 --> 00:06:33,686
说不出，四张在你眼里都一样，只能靠眼缘。

75
00:06:33,686 --> 00:06:38,819
下次生图，把构图、光影、色彩三行写全再发。

76
00:06:38,819 --> 00:06:43,927
出图不对的时候，按这三行逐项排查，看是哪行没说清。

77
00:06:43,927 --> 00:06:50,165
这件事看上去是写提示词的技巧，实质上是在给自己的验收留证据。

78
00:06:50,308 --> 00:06:52,854
第二段，讲怎么看设计。

79
00:06:52,804 --> 00:06:54,775
先承认一个事实。

80
00:06:54,775 --> 00:07:02,671
收藏夹里躺着一百个灵感网站，真要动手的时候还是找不到方向，这种收藏等于没收藏。

81
00:07:02,671 --> 00:07:10,857
打开一个好设计，扫一眼说真好看，截图，关掉，这是游客行为，拍了照发了圈，什么都没带走。

82
00:07:10,857 --> 00:07:12,852
问题出在看的方式。

83
00:07:12,852 --> 00:07:17,335
看进去要按固定顺序拆，每层只回答一个问题。

84
00:07:17,335 --> 00:07:19,907
先看层级，谁是主角。

85
00:07:19,907 --> 00:07:22,912
再量间距，内边距有没有规律。

86
00:07:22,912 --> 00:07:26,397
然后数颜色，几种、怎么分工。

87
00:07:26,397 --> 00:07:30,905
最后抠细节，圆角、阴影、字重各有几档。

88
00:07:30,905 --> 00:07:34,979
顺序从大到小，先抓骨架，再抠皮肤。

89
00:07:34,979 --> 00:07:40,087
课程里那句提示说得很实在，数得过来，说明有预算。

90
00:07:40,087 --> 00:07:51,301
一个页面如果连主色、墨色、灰阶、点缀色都数得清清楚楚，说明当初是定过预算的；数出一堆杂色，多半是谁想到什么加什么。

91
00:07:51,301 --> 00:07:54,859
这四步前面还有一个第零步，眯眼。

92
00:07:54,859 --> 00:08:01,614
睁大眼睛细看之前，先把整页糊成一团看一遍，主次和分组自己会浮出来。

93
00:08:01,614 --> 00:08:11,542
这是图形设计师的老手艺，叫眯眼测试，闭上一只眼，眯起另一只看屏幕，细节糊掉之后，剩下的只有块面、明暗和分组。

94
00:08:11,542 --> 00:08:21,121
交互设计精髓》第四版把它列为检验层级和关系的首选工具，还提到换个角度看，常能发现之前没注意到的布局问题。

95
00:08:21,121 --> 00:08:22,864
眯眼在验什么。

96
00:08:22,864 --> 00:08:30,881
书里给了答案，人看到一屏东西，下意识会连问两个问题，这里什么重要，这些东西有什么关联。

97
00:08:30,881 --> 00:08:34,258
好设计抢在你问出口之前就答完了。

98
00:08:34,258 --> 00:08:41,626
把这两问翻成白话，就是拆解口诀，这个界面想让我先看什么，哪些东西被摆成了一伙。

99
00:08:41,626 --> 00:08:44,474
眯眼答第一遍，睁眼验第二遍。

100
00:08:44,474 --> 00:08:52,467
答案一致，说明层级过硬；眯眼时找不到落点、分组糊成一片，睁眼看再精致也白搭。

101
00:08:52,612 --> 00:08:57,117
第三步量间距，这一步是硬指标，拿尺子说话。

102
00:08:57,067 --> 00:09:00,793
好设计的间距不靠手感，靠一把尺子。

103
00:09:00,793 --> 00:09:12,499
交互设计精髓》第四版管这把尺子叫原子网格单位，先定一个最小间距，比如八像素，页面上元素和元素、组和组的距离一律取它的倍数。

104
00:09:12,499 --> 00:09:14,699
书里给网格记了三笔账。

105
00:09:14,699 --> 00:09:18,846
位置有规律，用户找东西更快，这是可用性。

106
00:09:18,846 --> 00:09:23,124
区域之间的比例关系妥帖，看着舒服，这是美感。

107
00:09:23,124 --> 00:09:27,043
布局决策提前做完，改版省力，这是效率。

108
00:09:27,043 --> 00:09:30,721
反过来，这就成了鉴定好设计的硬指标。

109
00:09:30,721 --> 00:09:34,879
拿工具量三五个间距，看能不能除尽同一个数。

110
00:09:34,879 --> 00:09:40,925
除得尽，说明背地里有一套网格系统在管；除不尽，多半是手摆的。

111
00:09:40,925 --> 00:09:44,639
这一步不需要你会设计，只需要你会量。

112
00:09:44,639 --> 00:09:52,884
课程里有张按八像素网格现做的周报卡，让你眯完眼、开标尺量完，最后报出它的原子单位是多少。

113
00:09:52,884 --> 00:09:58,449
四个选项，四像素、八像素、十二像素，以及看着舒服就行。

114
00:09:58,449 --> 00:10:07,548
前三个是干扰项，第四个才是陷阱，因为看着舒服不等于没有单位，恰恰相反，通常是有人替你把单位定好了。

115
00:10:07,548 --> 00:10:10,588
为什么拆解这件事这么长眼力。

116
00:10:10,588 --> 00:10:17,271
塔夫特给优秀视觉设计下过一个定义，优秀的视觉设计，是把清晰的思考视觉化。

117
00:10:17,271 --> 00:10:25,745
顺着这个定义看，你找的主角、量的间距、数的颜色，都是设计者想清楚之后落在页面上的痕迹。

118
00:10:25,745 --> 00:10:32,163
拆一张好设计，等于把别人的思考过程倒放一遍，这比看十篇配色技巧管用。

119
00:10:32,163 --> 00:10:37,091
反过来，一张拆不出所以然的页面，多半当初就没想清楚。

120
00:10:37,091 --> 00:10:41,298
最后一步，也是让参考库产生复利的那一步。

121
00:10:41,298 --> 00:10:45,961
存参考图之前，先配一句判词，它好在哪个变量。

122
00:10:45,961 --> 00:10:51,850
收藏夹就从图堆变成了判例库，下一步正好拿它去喂人工智能。

123
00:10:51,988 --> 00:10:56,661
第三段，讲怎么把你看出来的东西交给人工智能。

124
00:10:56,611 --> 00:10:59,592
先说清楚为什么形容词不管用。

125
00:10:59,592 --> 00:11:05,818
温馨一点、再高级一点，这样的话说十句，九句会在模型那里变形。

126
00:11:05,818 --> 00:11:13,498
形容词要经过两次翻译，你把感觉压缩成词，模型再把词展开成画面，两头都有损耗。

127
00:11:13,498 --> 00:11:18,174
把参考直接塞给人工智能，损耗最小，一次到位。

128
00:11:18,174 --> 00:11:21,647
喂参考有三种姿势，各管一段。

129
00:11:21,647 --> 00:11:23,438
第一种，垫图。

130
00:11:23,438 --> 00:11:28,654
给一到三张参考图，管整体气质、构图、风格迁移。

131
00:11:28,654 --> 00:11:34,724
短板是容易连版式一起抄走，你只想要它的调子，结果连布局也搬过来了。

132
00:11:34,724 --> 00:11:36,912
第二种，风格描述。

133
00:11:36,912 --> 00:11:41,455
给一段规格文字，密度、主色、圆角写清楚。

134
00:11:41,455 --> 00:11:44,388
适合能用规则讲清楚的风格。

135
00:11:44,388 --> 00:11:48,654
短板是讲不清的气质写不出来，越想形容越空。

136
00:11:48,654 --> 00:11:51,371
第三种，设计变量清单。

137
00:11:51,371 --> 00:11:57,633
把主色、圆角、字体、间距各落成一个变量，交给模型去写代码。

138
00:11:57,633 --> 00:12:00,974
它管得住样式，管不住布局和文案。

139
00:12:00,974 --> 00:12:03,174
三种可以组合着用。

140
00:12:03,174 --> 00:12:11,936
说不清自己要什么风格的时候，垫图定气质，风格描述圈规则，两张网一起下，比反复重试撞运气强得多。

141
00:12:11,936 --> 00:12:16,371
课程里给了三个需求让你练手配对，很能说明分工。

142
00:12:16,371 --> 00:12:24,976
第一个，让人工智能重画活动海报，要保住品牌气质，答案是垫图，把过往海报附上让它学气质。

143
00:12:24,976 --> 00:12:37,729
第二个，想让代码工具生成的管理后台页面，看起来像某款以简洁著称的海外产品，答案是设计变量，直接给主色、圆角、字体、间距的变量清单。

144
00:12:37,729 --> 00:12:48,931
第三个，想让详情页告别那种一眼假的塑料味，可你自己也说不清要什么风格，答案是垫图加风格描述，图定气质，文字圈住规则。

145
00:12:48,931 --> 00:12:54,027
三道题的答案不一样，因为三种喂法管的东西本来就不一样。

146
00:12:54,027 --> 00:12:58,510
风格描述不必从零开始编，它有现成的方法论。

147
00:12:58,510 --> 00:13:04,351
交互设计精髓》第四版记录了库珀公司的做法，叫体验属性。

148
00:13:04,351 --> 00:13:13,859
动手设计之前，先和客户一起挑出三到五个形容词，描述这个产品的气质和品牌承诺，比如干净、克制、可信。

149
00:13:13,859 --> 00:13:21,671
词一旦定下来，就成了后续所有视觉决策的裁判，方案拿不准，回头问这几个词答应不答应。

150
00:13:21,671 --> 00:13:26,154
书里还有个有意思的细节，形容词之间允许打架。

151
00:13:26,154 --> 00:13:35,469
安全和灵活可以同时在场，这种张力值得保留，两个词冲突的地方，正是早期风格稿要优先回答的问题。

152
00:13:35,469 --> 00:13:39,784
这套方法搬到喂人工智能上刚好严丝合缝。

153
00:13:39,784 --> 00:13:45,385
先用形容词把气质钉住，再把每个形容词翻译成具体规格。

154
00:13:45,385 --> 00:13:52,248
光给形容词，模型会按平均值理解；翻译这一步做完，风格描述才算写好。

155
00:13:52,248 --> 00:13:54,964
词是裁判，规格是执行。

156
00:13:54,964 --> 00:13:57,813
第三种喂法值得单独说一句。

157
00:13:57,813 --> 00:14:07,092
把参考图拆成主色、圆角、字体、间距的变量清单，你交出去的已经超出一份参考，那是一套界面标准。

158
00:14:07,092 --> 00:14:08,955
标准为什么值钱。

159
00:14:08,955 --> 00:14:23,666
交互设计精髓》第四版转述了尼尔森那笔账，统一的界面标准让用户学得更快、错得更少，因为在一处攒下的经验能预见另一处的行为；对开发团队，现成决策省掉一轮轮争论。

160
00:14:23,666 --> 00:14:34,760
这笔账搬到人工智能身上同样成立，变量清单一给，每次生成都落在同一套标准上，改十次稿也不漂移，你验收时手里也有了对照物。

161
00:14:34,760 --> 00:14:40,914
同一章还把丑话说在前头，遵守标准，除非有极好的其他选择。

162
00:14:41,044 --> 00:14:43,854
最后给你四条可以带走的判断。

163
00:14:43,804 --> 00:14:46,581
第一，产出平庸先查输入。

164
00:14:46,581 --> 00:14:53,924
输入只有形容词，产出只能落在平均值上，这是模型的机制决定的，不是模型不行。

165
00:14:53,924 --> 00:14:58,023
换成参考和变量，同一个模型立刻换脸。

166
00:14:58,023 --> 00:15:03,480
下次觉得模型审美差，先别急着换模型，先看看自己给了它什么。

167
00:15:03,480 --> 00:15:06,364
第二，九个词要落到纸面上。

168
00:15:06,364 --> 00:15:16,220
构图记三分法、留白、视线引导，光影记侧光、黄金时刻、明暗对比，色彩记色调统一、低饱和、点缀色。

169
00:15:16,220 --> 00:15:23,419
生图时三行写全再发，出图不对就按这三行逐项排查，是哪行没说清改哪行。

170
00:15:23,419 --> 00:15:27,410
第三，看设计按五步走，别再截图就走。

171
00:15:27,410 --> 00:15:33,912
第零步眯眼，然后层级、间距、颜色、细节，每层只回答一个问题。

172
00:15:33,912 --> 00:15:42,181
间距那一步拿尺子量三五个，能除尽同一个数的，背地里有网格；除不尽的，多半是手摆的。

173
00:15:42,181 --> 00:15:46,280
存图之前先配一句判词，它好在哪个变量。

174
00:15:46,280 --> 00:15:49,429
第四，给人工智能立一套标准。

175
00:15:49,429 --> 00:15:58,864
把参考图拆成主色、圆角、字体、间距的变量清单，你交出去的就不只是一份参考，而是一套界面标准。

176
00:15:58,864 --> 00:16:06,965
标准值钱在可预见，每次生成都落在同一套变量上，改十次稿也不漂移，验收时手里有对照物。

177
00:16:06,965 --> 00:16:14,609
那句丑话也一并记住，遵守标准，除非有极好的其他选择，这条对你和对模型一样适用。

178
00:16:14,609 --> 00:16:17,686
参考库不是收藏夹，是判例库。

179
00:16:17,686 --> 00:16:21,124
它的复利来自每一张图背后那句判词。

180
00:16:21,124 --> 00:16:27,362
从今天起，存图之前先写一句它好在哪，三个月后你会感谢自己。