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

2
00:00:06,382 --> 00:00:10,841
这一集是审美工程的收官，也是交互工程的开篇。

3
00:00:10,841 --> 00:00:15,468
上一章练的是看出哪里丑，这一章开始练看出哪里难用。

4
00:00:15,468 --> 00:00:17,848
先说本集解决什么问题。

5
00:00:17,848 --> 00:00:22,776
模型出稿越来越快，十分钟一版，把关的动作必须跟上。

6
00:00:22,776 --> 00:00:33,617
难点从来不是稿子一眼就很差，那反而好办；难缠的是差不多就行，稿子第一眼过得去，手就想点通过，糙的地方要到上线之后才扎眼。

7
00:00:33,617 --> 00:00:37,524
这一集给你一份验收清单，管住那只手。

8
00:00:37,524 --> 00:00:40,360
再说为什么产品经理要关心。

9
00:00:40,360 --> 00:00:56,229
审美的病三秒暴露，你扫一眼就皱眉头；交互的病藏得深，演示那两分钟一切正常，等真实用户删错一条数据、断一次网、第一次打开一个空页面，病才发作，而这时候代价已经是流失了。

10
00:00:56,229 --> 00:00:58,056
顺便交代结构。

11
00:00:58,056 --> 00:01:11,061
前半段交付一份十五项的验收清单，再回访开篇那道题；后半段换到交互，讲清楚为什么交互的病更隐蔽，以及一张体贴清单怎么反过来用成找茬清单。

12
00:01:11,061 --> 00:01:12,912
最后说一句分工。

13
00:01:12,912 --> 00:01:18,357
审美工程管好看，这一章管好用，后面还有一章管用户的感受。

14
00:01:18,357 --> 00:01:23,381
三章各出一张验收清单，配齐了就是上线前的三张清单。

15
00:01:23,381 --> 00:01:25,568
还有一个账要算清楚。

16
00:01:25,568 --> 00:01:31,265
模型十分钟能出一版稿，你花三分钟验收，这笔账怎么算都划算。

17
00:01:31,420 --> 00:01:33,160
清单分五组。

18
00:01:33,110 --> 00:01:41,211
第一组是层级，三项，核心是一屏只有一个主角，主角三秒内找得到，其余按重要程度递减。

19
00:01:41,211 --> 00:01:48,291
第二组是间距，三项，看间距有没有落在同一套档位上，块与块之间有没有呼吸感。

20
00:01:48,291 --> 00:01:54,144
第三组是克制，四项，看元素数量和颜色数量有没有超出必要。

21
00:01:54,144 --> 00:01:59,529
第四组是一致性，两项，看差不多一样的元素有没有做成一样。

22
00:01:59,529 --> 00:02:04,420
第五组是细节，三项，看对齐、对比度和响应时间。

23
00:02:04,420 --> 00:02:09,300
清单里有一条判据我特别喜欢，出自一本交互设计经典。

24
00:02:09,300 --> 00:02:17,293
每个元素的存在要有理由，每处差异的存在也要有理由，给不出理由，就删掉元素、抹平差异。

25
00:02:17,293 --> 00:02:22,846
配套的手法叫删减测试，把可疑元素去掉，看信息受没受损。

26
00:02:22,846 --> 00:02:30,358
书里把话说得更狠，删减东西，直到破坏了设计为止，再把最后去掉的那件加回来。

27
00:02:30,358 --> 00:02:32,365
举个素材里的例子。

28
00:02:32,365 --> 00:02:37,726
模型交来的落地页，标题底下压了一条渐变装饰线，怎么办。

29
00:02:37,726 --> 00:02:43,303
正确做法是先删掉看一遍，信息和层级没受损就不加回来。

30
00:02:43,303 --> 00:02:51,079
留着显得秃、换成更细的线、再加两条呼应一下，都是在给一个说不出理由的元素找借口。

31
00:02:51,220 --> 00:02:54,198
刚才说了第一条，存在要有理由。

32
00:02:54,148 --> 00:02:56,672
接下来两条也都有出处。

33
00:02:56,672 --> 00:02:59,617
第二条是响应时间的三道门槛。

34
00:02:59,617 --> 00:03:04,845
界面舒不舒服，响应速度占一大块，而且门槛是公认的。

35
00:03:04,845 --> 00:03:21,388
零点一秒内响应，人感觉是即时的；一秒内完成，思路不断，给个细微线索就够；接近十秒，必须给出正在运行的信号，比如转圈加预估；超过十秒，要解释慢在哪、给进度更新，做完还要提示一声。

36
00:03:21,388 --> 00:03:26,556
素材里三个按钮各踩一道门槛，让你亲手点一遍找体感。

37
00:03:26,556 --> 00:03:31,748
你手上的操作落在哪一档，决定了要不要给反馈、给什么反馈。

38
00:03:31,748 --> 00:03:35,306
第三条是图表不给数字的，打回。

39
00:03:35,306 --> 00:03:41,171
有一位数据可视化研究者提过一条原则，可量化的数据就要量化。

40
00:03:41,171 --> 00:03:44,753
图表把趋势画出来，数字本身也要在场。

41
00:03:44,753 --> 00:03:53,046
素材举了一个操作系统的磁盘属性做例子，饼图给大概印象，已用和可用的字节数照样列出来。

42
00:03:53,046 --> 00:04:02,205
模型生成的报表页尤其爱犯这个错，曲线画得漂亮，凑近一看一个数都没有，汇报时还得回去翻原始数据。

43
00:04:02,205 --> 00:04:10,186
所以两张周报卡放在一起对比，只有趋势的那张明显不合格，趋势带数字的那张才叫交付。

44
00:04:10,186 --> 00:04:14,873
这三条判据的共同点是，它们都有出处，站得住。

45
00:04:14,873 --> 00:04:18,203
别人问你凭什么这么评，你答得上来。

46
00:04:18,203 --> 00:04:21,640
评审意见要有依据，不能只是我觉得。

47
00:04:21,640 --> 00:04:25,967
顺便把这一章十二节串成三句话，方便你回想。

48
00:04:25,967 --> 00:04:27,866
第一句，识别美。

49
00:04:27,866 --> 00:04:40,967
开篇先凭直觉投一票，然后把好看拆成四个抓手，层级、间距、颜色、细节；看到一张页面，先找唯一主角，再量间距，然后数颜色，最后抠细节。

50
00:04:40,967 --> 00:04:43,311
第二句，翻译给模型听。

51
00:04:43,311 --> 00:04:53,203
把看出来的变量写进对话，把高级一点换成主色、圆角、密度这些能执行的词，改稿时点名变量，它才知道往哪改。

52
00:04:53,203 --> 00:04:55,859
第三句，参考与验收。

53
00:04:55,859 --> 00:05:06,412
先学会拆参考，按固定顺序看进去；再学会喂参考，用垫图、描述、变量三种姿势；最后用这份十五项清单守住出口。

54
00:05:06,412 --> 00:05:10,991
三句话合起来就是，能看出、能说清、能验收。

55
00:05:10,991 --> 00:05:15,186
如果你想把这一章往外延伸，素材还给了一份书单。

56
00:05:15,186 --> 00:05:27,890
两本设计书值得读，一本把设计规则写成开发者能照做的操作，重点看改稿前后的对比图；另一本讲亲密性、对齐、重复、对比四条原则，是入门框架。

57
00:05:27,890 --> 00:05:36,340
还有一本交互设计经典的第十七章，这份清单里好几条判据都出自那一章，只读那一章也够本。

58
00:05:36,340 --> 00:05:45,462
原则类可以看一位工业设计大师的十条诫律，那是少但更好的原始出处；还有一本把心理学定律做成卡片的小书。

59
00:05:45,462 --> 00:05:51,905
规范类可以看两家大厂的界面规范，重点读布局、排印和颜色角色。

60
00:05:51,905 --> 00:05:58,972
实践类可以拿两个以信息密度著称的产品当阅读材料，用四步法现场拆一遍。

61
00:05:59,116 --> 00:06:02,960
讲完审美，这一集的后半段换到交互。

62
00:06:02,910 --> 00:06:07,405
先立住全章的地基，交互的病比审美的病更隐蔽。

63
00:06:07,405 --> 00:06:09,292
对比一下就清楚了。

64
00:06:09,292 --> 00:06:17,982
审美的病暴露得快，页面一打开，配色乱、间距挤，三秒钟就皱眉头，而且你自己扫一眼就能发现。

65
00:06:17,982 --> 00:06:28,475
交互的病藏得深，演示那两分钟一切正常，等真实用户删错一条数据、断一次网、第一次打开一个空荡荡的页面，病才发作。

66
00:06:28,475 --> 00:06:32,153
而且往往是用户替你发现，代价是流失。

67
00:06:32,153 --> 00:06:34,797
模型犯错的样子也不一样。

68
00:06:34,797 --> 00:06:43,499
审美上它犯错是五颜六色、字号打架，看着就不对；交互上它在演示里一切正常，边界情况全是坑。

69
00:06:43,499 --> 00:06:51,419
所以验收方式也不同，审美看截图就能评审，交互必须把流程走一遍，把坏情况都试一遍。

70
00:06:51,419 --> 00:06:53,463
这就是现在的新坑。

71
00:06:53,463 --> 00:06:59,508
模型把做出来变得很容易，它默认交付的交互停在能跑通这个级别。

72
00:06:59,508 --> 00:07:05,554
空态一片空白、报错弹一个弹窗、删除不带确认、保存了没动静。

73
00:07:05,554 --> 00:07:10,193
你验收时点两下觉得没问题，用户用一周就想卸载。

74
00:07:10,193 --> 00:07:15,109
好不好看一眼能看出来，好不好用要用起来才知道。

75
00:07:15,268 --> 00:07:17,080
那清单从哪来。

76
00:07:17,030 --> 00:07:27,655
有一本交互设计经典在讲数字产品的礼仪那一章给过答案，作者借了一项研究，把结论落成一条设计原则，软件应该像人一样体贴。

77
00:07:27,655 --> 00:07:33,966
他的观察很扎心，交互产品惹怒我们的原因通常不在缺功能，在不体贴。

78
00:07:33,966 --> 00:07:43,737
书里列了十几条体贴软件的特质，素材挑出最适合检查模型产出的六条，每一条反过来读，就是一条找茬标准。

79
00:07:43,737 --> 00:07:45,708
第一条，有预见。

80
00:07:45,708 --> 00:07:48,677
预判你下一步要什么，提前备好。

81
00:07:48,677 --> 00:07:52,668
反面是第一次打开一片空白，下一步全靠猜。

82
00:07:52,668 --> 00:07:55,071
第二条，会及时通知。

83
00:07:55,071 --> 00:07:58,569
你关心的进展主动告诉你，不用你问。

84
00:07:58,569 --> 00:08:02,427
反面是点了保存没动静，转了圈也没个说法。

85
00:08:02,427 --> 00:08:05,432
第三条，不因自己的问题烦你。

86
00:08:05,432 --> 00:08:09,302
技术故障自己消化，别拿代码味的话甩锅。

87
00:08:09,302 --> 00:08:13,509
反面是一断网就把一个错误代码端到你脸上。

88
00:08:13,509 --> 00:08:17,235
第四条，是自信的，但备好退路。

89
00:08:17,235 --> 00:08:21,970
照你说的做，不反复质疑；万一你错了，帮你恢复。

90
00:08:21,970 --> 00:08:24,350
反面是删了就真没了。

91
00:08:24,350 --> 00:08:26,898
第五条，不问多余的问题。

92
00:08:26,898 --> 00:08:31,321
能记住的选择记住，能给默认值的给默认值。

93
00:08:31,321 --> 00:08:35,240
反面是每次打开都把同一个问题再问一遍。

94
00:08:35,240 --> 00:08:38,112
第六条，帮你避免低级错误。

95
00:08:38,112 --> 00:08:40,612
看你要犯错，悄悄拉一把。

96
00:08:40,612 --> 00:08:45,095
反面是眼睁睁看你误删，然后弹窗说操作失败。

97
00:08:45,095 --> 00:08:50,576
素材里有一个能跑通的待办应用，五处不体贴全藏在一屏里。

98
00:08:50,576 --> 00:09:00,168
顶部横幅每次打开都问你一遍要不要开夜间模式，工具栏弹的是一串代码味的报错，删除没有确认，归档区点了没反馈。

99
00:09:00,168 --> 00:09:06,033
你看，没有一处是功能缺失，应用照样能跑通，病全出在礼数上。

100
00:09:06,033 --> 00:09:11,057
这里还有一对容易搞混的病，没反馈是病，反馈过度也是病。

101
00:09:11,057 --> 00:09:16,381
保存成功这种弹窗等着被点掉，除了打断你没有别的作用。

102
00:09:16,381 --> 00:09:22,800
更体贴的做法是按钮原地变成已保存，角落留一行时间戳，手不用停。

103
00:09:22,800 --> 00:09:29,530
素材还让你回想一下天天在用的软件，六种不体贴里选一个被折磨得最狠的。

104
00:09:29,530 --> 00:09:42,187
空白空态下一步全靠猜、报错全是代码味黑话、手一滑删了找不回来、点了没反应不知道成没成、同一个问题每次都问、一崩溃写了半天的东西全没了。

105
00:09:42,187 --> 00:09:49,627
这六条你几乎一定中过招，其中任何一条，都是你手上这个产品可以立刻改的地方。

106
00:09:49,780 --> 00:09:53,035
找茬清单有了，还差一个使用姿势。

107
00:09:52,985 --> 00:10:00,545
审美验收看截图就行，交互验收要动手走流程，而且要走三遍，每遍换一个身份。

108
00:10:00,545 --> 00:10:02,961
第一遍，扮演老用户。

109
00:10:02,961 --> 00:10:09,992
顺着理想路径把主流程走完，抓的是存了没动静、问个没完这类日常摩擦。

110
00:10:09,992 --> 00:10:12,648
第二遍，扮演倒霉用户。

111
00:10:12,648 --> 00:10:21,795
故意犯错，删一条、断个网、输错格式、连点两次提交，抓的是报错像甩锅、删了就没、一崩全丢。

112
00:10:21,795 --> 00:10:24,379
第三遍，扮演新用户。

113
00:10:24,379 --> 00:10:31,903
清掉数据从零开始，第一次打开的每一屏都停下来看，抓的是空白空态、下一步全靠猜。

114
00:10:31,903 --> 00:10:37,720
第二遍和第三遍最容易被省略，而模型的病恰恰全堆在那里。

115
00:10:37,720 --> 00:10:43,562
演示给你看的永远是第一遍，网络流畅、数据现成、路径笔直。

116
00:10:43,562 --> 00:10:47,720
你替用户把另外两遍走了，病就在上线前被抓住。

117
00:10:47,720 --> 00:11:00,389
走的时候手边放着那张体贴清单，每停一屏问一句，这一屏有预见吗、会通知吗、在甩锅吗、备好退路了吗、在问多余的问题吗、会帮我兜住低级错误吗。

118
00:11:00,389 --> 00:11:04,247
六个问号过完，这一屏才算验收完。

119
00:11:04,396 --> 00:11:06,365
最后讲三件套。

120
00:11:06,315 --> 00:11:13,166
模型生成的界面默认只有一种状态，数据齐全、网络流畅、一切正常。

121
00:11:13,166 --> 00:11:19,596
可用户遇到的头一屏常常是另外三种，没数据、在等待、出错了。

122
00:11:19,596 --> 00:11:23,334
这三种非正常时刻恰恰是体验分水岭。

123
00:11:23,334 --> 00:11:25,173
第一件，空态。

124
00:11:25,173 --> 00:11:29,067
空态是新用户的第一屏，别给他一片白。

125
00:11:29,067 --> 00:11:35,546
好空态回答三个问题，这里是干嘛的、我现在能做什么、做出来大概长什么样。

126
00:11:35,546 --> 00:11:40,906
前两个用一句话加一个按钮解决，第三个给示例数据或模板。

127
00:11:40,906 --> 00:11:55,658
素材里两个笔记应用都是第一次打开，一个列表区一片空白、新建按钮藏在右上角菜单里，另一个写着还没有笔记，写下第一条，或者从模板开始，还备了一条看看示例笔记长什么样。

128
00:11:55,658 --> 00:11:59,696
后者的差别不是多做了什么，是多想了一步。

129
00:11:59,696 --> 00:12:01,835
第二件，加载态。

130
00:12:01,835 --> 00:12:04,492
别干转，说说进行到哪了。

131
00:12:04,492 --> 00:12:11,655
一个干转的圈只传达了一个信息，在忙；转到第五秒，用户开始怀疑是卡死了。

132
00:12:11,655 --> 00:12:20,934
骨架屏先把内容的形状画出来，等于告诉用户马上到了、到了以后长这样，再配一条进度说明，焦虑就压下去大半。

133
00:12:20,934 --> 00:12:27,244
同样等三秒，一句正在拉取最近三十天的消息，比一个干转圈体贴得多。

134
00:12:27,244 --> 00:12:29,359
第三件，错误态。

135
00:12:29,359 --> 00:12:33,109
三要素，发生了什么、为什么、怎么办。

136
00:12:33,109 --> 00:12:42,352
有一位作者对错误信息的立场很硬，老式错误对话框要么责备用户，要么拿技术故障甩锅，多数根本不该出现。

137
00:12:42,352 --> 00:12:49,960
真到了必须说的时候，三样齐了才算说人话，缺了怎么办那条，等于把用户堵在死胡同里。

138
00:12:49,960 --> 00:12:59,444
还有一条底线，措辞不能责备用户，把您输入了非法字符换成这里只支持字母和数字，信息一样，态度天差地别。

139
00:12:59,444 --> 00:13:13,771
素材里有个很典型的改写，原文是一句操作失败请重试，改写成三句话，报销单没提交出去、草稿已经保留；附件超过了十兆的上限；压缩一下附件，或者拆成两张单子提交。

140
00:13:13,771 --> 00:13:22,833
原文的病灶在于，操作失败没说哪个操作，请重试是句空话，重试十次照样失败，因为病根在附件大小。

141
00:13:22,833 --> 00:13:34,564
还有一条也值得记住，有一个状态码的错误提示，原文只写收货信息没保存上，改写成三句话之后，用户知道是手机号少了一位，光标已经帮你定位过去。

142
00:13:34,564 --> 00:13:45,694
还有一句您输入了非法字符，改成用户名只支持字母、数字和下划线，空格进不来，把规则讲清楚，用户就不会觉得自己是嫌疑人。

143
00:13:45,694 --> 00:13:48,001
最后拿一张自查表收口。

144
00:13:48,001 --> 00:13:54,191
想着你最近让模型生成的那个页面，五种状态，做了哪种就勾哪种。

145
00:13:54,191 --> 00:13:59,948
默认态，数据齐全时的正常展示，模型一定会做，白送一分。

146
00:13:59,948 --> 00:14:04,600
加载态，骨架屏或进度说明，干转圈算半分。

147
00:14:04,600 --> 00:14:09,708
空态，说明这里是干嘛的、给动作入口、有示例更好。

148
00:14:09,708 --> 00:14:12,268
错误态，三要素齐全。

149
00:14:12,268 --> 00:14:17,148
成功态，操作成了要让人看见，但别用弹窗邀功。

150
00:14:17,148 --> 00:14:22,653
这张表同时就是给模型提需求的模板，整张写进提示词就行。

151
00:14:22,780 --> 00:14:27,056
最后给你一份可以马上用的判断清单，一共五条。

152
00:14:27,006 --> 00:14:30,949
第一条，交稿先跑十五项清单再点头。

153
00:14:30,949 --> 00:14:38,353
层级、间距、克制、一致性、细节，五组过一遍，没过的那一项原话发回去改。

154
00:14:38,353 --> 00:14:44,146
判断元素去留只问一句，它存在的理由是什么，说不出就删掉试试。

155
00:14:44,146 --> 00:14:46,982
第二条，评审意见要有出处。

156
00:14:46,982 --> 00:14:54,831
存在要有理由、响应过三道门槛、可量化就要量化，这三条判据都站得住，别人问起你答得上来。

157
00:14:54,831 --> 00:14:58,545
第三条，交互验收要用起来，别只看。

158
00:14:58,545 --> 00:15:08,112
按老用户、倒霉用户、新用户三种身份各走一遍，第二遍和第三遍最容易被省略，而病恰恰全堆在那里。

159
00:15:08,112 --> 00:15:11,634
第四条，把体贴清单当找茬清单用。

160
00:15:11,634 --> 00:15:21,105
有预见、会通知、不甩锅、自信但备好退路、不问多余的问题、帮你避免低级错误，六条对着产出逐条过。

161
00:15:21,105 --> 00:15:25,516
第五条，三件套不写进需求，模型就全敷衍。

162
00:15:25,516 --> 00:15:31,838
空态教下一步，加载态说进行到哪，错误态给三要素，措辞不责备用户。

163
00:15:31,838 --> 00:15:34,518
这五条背后是同一句话。

164
00:15:34,518 --> 00:15:40,901
能跑通只是及格线，好不好看一眼能看出来，好不好用要用起来才知道。

165
00:15:40,901 --> 00:15:44,350
下一集我们继续往下拆交互的抓手。