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

2
00:00:06,382 --> 00:00:11,778
这一集钻进界面最小的零件，聊两件事，控件和文案。

3
00:00:11,778 --> 00:00:16,201
为什么要单独拿一集讲这两个看起来很小的话题。

4
00:00:16,201 --> 00:00:26,790
因为在人工智能产品里，界面越来越多地由模型直接生成，而模型挑控件基本靠掷骰子，写文案只有一招，逢事写确定。

5
00:00:26,790 --> 00:00:31,021
你不管，它就把数据库字段直接端上台演讲。

6
00:00:31,021 --> 00:00:33,353
为什么产品经理要关心。

7
00:00:33,353 --> 00:00:38,185
因为控件和文案是用户与产品之间全部对话的载体。

8
00:00:38,185 --> 00:00:45,432
用错一个控件，用户就多点一次、多猜一次；写错一句文案，用户就在盲点里挨一刀。

9
00:00:45,432 --> 00:00:54,038
这些毛病单看都不大，叠在一张表单里，用户每一步都在多花力气，而流失就是这么一点点攒出来的。

10
00:00:54,038 --> 00:00:55,901
这一集分两段。

11
00:00:55,901 --> 00:01:01,093
第一段讲四种选择类控件各回各家，外加对话框该不该弹。

12
00:01:01,093 --> 00:01:07,139
第二段讲界面怎么开口说话，按钮要携带后果，名词要用用户的词。

13
00:01:07,139 --> 00:01:11,322
每段都配一句能直接抄进提示词的约束话术。

14
00:01:11,322 --> 00:01:13,725
顺便说清这一集的边界。

15
00:01:13,725 --> 00:01:19,194
它不教你怎么画界面，也不讨论视觉风格，那些归审美工程管。

16
00:01:19,194 --> 00:01:27,728
这一集只盯两件最容易被模型写坏、又最直接拖慢用户的事，控件选得对不对，话说得对不对。

17
00:01:27,892 --> 00:01:31,195
先看三个典型病，你八成都见过。

18
00:01:31,145 --> 00:01:33,945
第一个，三个选项也用下拉。

19
00:01:33,945 --> 00:01:41,914
发票类型就三种，藏进请选择里，用户多点一次才能看见选项，选项之间还没法直接比较。

20
00:01:41,914 --> 00:01:44,606
第二个，单选多选随缘。

21
00:01:44,606 --> 00:01:55,496
互斥的选项给了复选框，用户能勾出互相矛盾的数据；能多选的反而给了单选钮，用户想多选却选不了，只能撞一次错才知道。

22
00:01:55,496 --> 00:01:58,044
第三个，什么都爱弹框。

23
00:01:58,044 --> 00:02:01,674
保存成功弹一个，切换页签也弹一个。

24
00:02:01,674 --> 00:02:06,301
每个弹窗都是一次打断，手在页面上，心思被拽走。

25
00:02:06,301 --> 00:02:12,070
这三个病有个共同点，它们都不是错误，只是让用户多付一点成本。

26
00:02:12,070 --> 00:02:18,645
正因为不是错误，代码能跑、页面能用、评审也能过，就没人回头改。

27
00:02:18,645 --> 00:02:23,236
而用户每一步多付的那一两秒，最后都算在留存上。

28
00:02:23,236 --> 00:02:32,575
交互设计领域的艾伦·库珀在《交互设计精髓》第二十一章把这些零件逐个讲过一遍，规则清楚得能背下来。

29
00:02:32,575 --> 00:02:37,479
这一节先背口诀，再练手，最后把规则抄成提示词。

30
00:02:37,479 --> 00:02:42,455
因为规则记在你脑子里没用，得写进给模型的需求里。

31
00:02:42,604 --> 00:02:45,186
四句口诀，四种控件。

32
00:02:45,136 --> 00:02:47,960
互斥选一个，用单选钮。

33
00:02:47,960 --> 00:02:56,121
它的名字来自老式汽车收音机，司机按下一个电台键，前一个键自动弹起，眼睛不用离开路面。

34
00:02:56,121 --> 00:03:01,386
选中一个，其他自动弹起，错误的选法在物理上不存在。

35
00:03:01,386 --> 00:03:08,741
但要注意，单选钮成组才有意义，单独一个点上就取消不掉，书上直接判它无意义。

36
00:03:08,741 --> 00:03:11,266
可勾多个，用复选框。

37
00:03:11,266 --> 00:03:16,302
勾上做标记，再点取消，几个并排就能同时多选。

38
00:03:16,302 --> 00:03:22,059
方形是它几十年攒下的脸，别改成圆的，圆形会和单选钮撞脸。

39
00:03:22,059 --> 00:03:24,282
立即生效，用开关。

40
00:03:24,282 --> 00:03:27,239
拨下去当场变，不用再点保存。

41
00:03:27,239 --> 00:03:30,689
书上说它在移动端设置页非常好用。

42
00:03:30,689 --> 00:03:40,340
反过来讲，要跟着表单一起提交的选项就别用开关，因为开关的形态本身就在承诺立即生效，用户会以为已经生效了。

43
00:03:40,340 --> 00:03:43,321
选项超过一屏，才考虑下拉。

44
00:03:43,321 --> 00:03:49,018
下拉的初始状态只露出当前选中的那一项，其余全部藏起来。

45
00:03:49,018 --> 00:03:50,701
这四句怎么用。

46
00:03:50,701 --> 00:03:53,729
课程里给了六个真实场景练手。

47
00:03:53,729 --> 00:03:59,282
报销单选发票类型，三种互斥必选一个，单选钮平铺。

48
00:03:59,282 --> 00:04:05,220
订阅设置问你想收到哪些邮件，三项彼此独立可以共存，复选框。

49
00:04:05,220 --> 00:04:09,571
设置页的深色模式，一改立刻变色，开关。

50
00:04:09,571 --> 00:04:15,268
收货地址选省份，三十四个选项，这时候下拉才名正言顺。

51
00:04:15,268 --> 00:04:23,441
收银台选支付方式，三种互斥，单选钮平铺或者做成三张大卡片，那是单选钮的变体。

52
00:04:23,441 --> 00:04:29,979
注册页的同意条款，单个复选框，因为它覆盖的本就是勾和不勾两个状态。

53
00:04:29,979 --> 00:04:32,684
六道题里藏着一个共同点。

54
00:04:32,684 --> 00:04:37,143
每个场景的错误答案，几乎都是模型最爱给的那个。

55
00:04:37,143 --> 00:04:40,592
可见模型的默认选择有多不靠谱。

56
00:04:40,592 --> 00:04:42,936
顺带记一个进阶用法。

57
00:04:42,936 --> 00:04:48,393
列表里每行配一个复选框，多选状态一眼可见，书里管它叫记号。

58
00:04:48,393 --> 00:04:55,941
批量操作的场景用它特别省事，用户不用打开任何东西就知道自己选了哪几行。

59
00:04:56,092 --> 00:05:01,763
四种控件里最常被模型滥用的就是下拉，值得单独算笔账。

60
00:05:01,713 --> 00:05:05,583
书上讲列表控件时点破了它的先天缺陷。

61
00:05:05,583 --> 00:05:10,979
初始状态只显示上次选中的条目，其余选项全部不可见。

62
00:05:10,979 --> 00:05:16,376
选项看不见，用户就没法比较，也预估不了这一步要花多久。

63
00:05:16,376 --> 00:05:19,681
课程里拿一个外卖下单页做了对照。

64
00:05:19,681 --> 00:05:31,833
同一个选配送时间的步骤，一个方案把三个时段收进下拉，点开之前一个都看不见；另一个方案把三个时段平铺，各带说明，还把立即送出设成默认值。

65
00:05:31,833 --> 00:05:35,895
结果很明显，多数用户一秒钟通过这一步。

66
00:05:35,895 --> 00:05:39,189
这里偷偷用上了一招，默认值兜底。

67
00:05:39,189 --> 00:05:43,780
选项可见加上默认合理，用户几乎不用做决定。

68
00:05:43,780 --> 00:05:50,883
这也解释了下拉真正的定位，它是屏幕装不下时的妥协方案，配额别浪费在三个选项上。

69
00:05:50,883 --> 00:05:54,994
再讲究一点可以配输入联想，打两个字直达。

70
00:05:54,994 --> 00:06:00,547
速查表里有句话值得单独记住，下拉的配额别浪费在三个选项上。

71
00:06:00,547 --> 00:06:11,592
每一次把三五个选项收进下拉，都是凭空给用户加一次点击，而这次点击不产生任何新信息，纯粹是为了把原本能看见的东西翻出来。

72
00:06:11,740 --> 00:06:13,997
第五种零件是对话框。

73
00:06:13,947 --> 00:06:18,046
它不是选择控件，但比控件更容易被滥用。

74
00:06:18,046 --> 00:06:21,531
书上给对话框的定位讲了个厨房比喻。

75
00:06:21,531 --> 00:06:27,469
应用是厨房，对话框是食品储藏室，它推动情节，但当不了主角。

76
00:06:27,469 --> 00:06:38,202
主要的交互操作要放在主窗口里，对话框只装主流程之外的东西，危险的、少用的、需要把一个主题的信息集中到一处的。

77
00:06:38,202 --> 00:06:45,954
还有一条容易忽视的细节，功能对话框的标题要用动词，让用户一眼知道自己在确认什么。

78
00:06:45,954 --> 00:06:51,495
模型的习惯正相反，成功也弹、提示也弹、确认也弹。

79
00:06:51,495 --> 00:06:55,846
课程里给了五个场景逐个判断，这里挑三个反例。

80
00:06:55,846 --> 00:06:59,692
保存成功弹一个让用户点确定，不该弹。

81
00:06:59,692 --> 00:07:04,500
正常干完活还要用户点一下表扬，等于软件在邀功。

82
00:07:04,500 --> 00:07:12,805
成功反馈用非模态的轻提示，角落一枚对勾、一条两秒消失的浮层，用户眼角能看到就够了。

83
00:07:12,805 --> 00:07:18,466
表单没填完，用户点提交，弹窗告知信息不完整，不该弹。

84
00:07:18,466 --> 00:07:24,152
防错要前置，没填完就禁用提交按钮，旁边写明还缺哪几项。

85
00:07:24,152 --> 00:07:29,392
让用户先撞墙再弹窗递创可贴，是把防错做成了报错。

86
00:07:29,392 --> 00:07:35,558
用户正在打字，后台同步完成，弹窗告知同步完成，不该弹。

87
00:07:35,558 --> 00:07:41,423
用户手在键盘上，弹窗抢走焦点，半句话就打进了确定按钮里。

88
00:07:41,423 --> 00:07:52,325
后台状态用界面角落的图标或状态条静静更新就够了，书里管这叫富视觉非模态反馈，专门有一整章讲怎么用它消灭对话框。

89
00:07:52,325 --> 00:07:54,488
那该弹的是哪两种。

90
00:07:54,488 --> 00:08:03,515
清空回收站，两百条记录永久消失且暂时做不了撤销，该弹，确认框是仅剩的防线，标题记得用动词。

91
00:08:03,515 --> 00:08:15,522
导出全部数据，需要一次性选好格式、范围、是否含附件，该弹，因为它在主流程之外、不常用、又要把一个主题的好几项设置收拢到一处。

92
00:08:15,652 --> 00:08:17,513
第二段，讲文案。

93
00:08:17,463 --> 00:08:20,636
数一数你今天点过多少次确定。

94
00:08:20,636 --> 00:08:28,268
它出现在删除、提交、退出、覆盖、清空的弹窗里，同一个词替一百种后果背书。

95
00:08:28,268 --> 00:08:36,838
问题就出在这，按钮自己不带答案，答案在正文里，用户必须读完整段话，才知道这一下点的是什么。

96
00:08:36,838 --> 00:08:39,939
处方是让按钮把后果带在身上。

97
00:08:39,939 --> 00:08:43,664
删除这三条替掉确定，留着替掉取消。

98
00:08:43,664 --> 00:08:48,749
这样哪怕正文一个字没读，扫一眼按钮也能安全作答。

99
00:08:48,749 --> 00:08:53,412
书上给功能对话框立过同款规矩，标题要用动词。

100
00:08:53,412 --> 00:08:59,458
标题说清在确认什么，按钮说清点了会怎样，两头都不让用户猜。

101
00:08:59,458 --> 00:09:06,934
这条规矩还有个测试版本，把弹窗正文遮住，只看标题和按钮，能不能安全作答。

102
00:09:06,934 --> 00:09:12,210
能，文案就合格；要回头翻正文，就还是偷懒的变体。

103
00:09:12,210 --> 00:09:14,398
三组对照找找手感。

104
00:09:14,398 --> 00:09:20,059
清空购物车，从确定和取消，改成清空十二件和先留着。

105
00:09:20,059 --> 00:09:25,203
退出编辑，从是和否，改成保存并退出和丢弃改动。

106
00:09:25,203 --> 00:09:30,936
解绑手机号，从继续和返回，改成解绑尾号二零四六和不解绑。

107
00:09:30,936 --> 00:09:38,352
注意携带后果版的副产品，数量和对象一并写进按钮，等于替用户做了最后一次核对。

108
00:09:38,352 --> 00:09:45,035
误操作大多发生在我以为选的是另一批，按钮把对象报出来，这层误会当场消解。

109
00:09:45,035 --> 00:09:49,241
最后一道综合题把按钮功和错误文案合起来考。

110
00:09:49,241 --> 00:09:53,184
关文档时还有改动没保存，按钮组怎么配。

111
00:09:53,184 --> 00:10:05,095
四个选项里，正确答案既不是确定和取消配一段说明，也不是是和否，更不是知道了，而是三颗按钮各带后果，保存并关闭、不保存、取消。

112
00:10:05,095 --> 00:10:06,237
为什么。

113
00:10:06,237 --> 00:10:17,294
因为这一步存在三种不同的后果，用两颗按钮去装三种后果，必然有一颗要同时承担两种意思，那颗按钮就又变回了确定。

114
00:10:17,452 --> 00:10:20,346
按钮之外，第二个重灾区是名词。

115
00:10:20,296 --> 00:10:31,354
界面上写着某个手机号字段校验失败、该操作违反唯一性约束，这些词一个用户都不认识，它们是从数据库和日志里直接端出来的。

116
00:10:31,354 --> 00:10:42,856
库珀在第十四章把根子挖了出来，开发者把数据库的需求放在用户的需求前面，软件成了替处理器服务的，用户反倒像在替软件打工。

117
00:10:42,856 --> 00:10:49,623
同章还有一条被引用得很多的原则，出错可能不是程序的问题，但是程序的责任。

118
00:10:49,623 --> 00:10:58,854
手机号少一位、用户名重复，都算用户的错，但把错误翻译成用户听得懂、改得动的话，是程序分内的事。

119
00:10:58,854 --> 00:11:10,633
连菜单名都逃不过这条，库珀认为文件这个菜单名都是实现模型的词，发票应用的菜单就该叫发票，用户管自己的东西叫什么，界面就叫什么。

120
00:11:10,633 --> 00:11:14,815
课程里给了五条系统语让你练翻译，这里挑三条。

121
00:11:14,815 --> 00:11:19,912
数据库连接超时再配一个错误码，这是打扮过的系统语。

122
00:11:19,912 --> 00:11:25,849
用户不关心哪个环节超时，关心的是我的东西丢没丢、接下来要不要管。

123
00:11:25,849 --> 00:11:32,700
人话是，刚才没连上服务器，你写的内容已存在本机，网络恢复后会自动重试。

124
00:11:32,700 --> 00:11:43,373
登录状态过期，如果被翻成会话凭证已失效、请重新获取访问令牌，词是中文了，模型还是实现模型，用户的词典里只有登录。

125
00:11:43,373 --> 00:11:49,239
人话是，登录过期了，重新登录就能接着编辑，草稿已经保留。

126
00:11:49,239 --> 00:11:54,996
一句话办了三件事，用户的词、明确的出路、最要紧的安抚。

127
00:11:54,996 --> 00:12:03,157
订单页面报四零四，说请求的资源不存在、请确认地址是否正确，资源和地址都是网络协议的词。

128
00:12:03,157 --> 00:12:08,025
用户点的是一笔订单，他的世界里没有资源，只有订单。

129
00:12:08,025 --> 00:12:15,380
人话是，这笔订单找不到了，可能已被撤销，去全部订单里看看，或者联系客服帮你查。

130
00:12:15,380 --> 00:12:18,902
死胡同页面，出路比解释更值钱。

131
00:12:18,902 --> 00:12:22,868
翻译要翻到用户能行动为止，这是验收线。

132
00:12:22,868 --> 00:12:32,448
说数据重复、请修改后重试，比违反唯一性约束好懂一点，但哪个数据重复、跟谁重复、怎么办，一个都没说。

133
00:12:32,448 --> 00:12:40,032
而说这个用户名已经有人用了、换一个试试、比如加个数字，就把死胡同变成了岔路口。

134
00:12:40,032 --> 00:12:42,388
再补一条以免误会。

135
00:12:42,388 --> 00:12:51,883
某个手机号字段校验失败，如果只翻成手机号格式不合法、请检查后重新输入，等于让用户自己当校验器再跑一遍。

136
00:12:51,883 --> 00:12:55,765
程序明明知道差在哪，说出来是它的责任。

137
00:12:55,765 --> 00:13:01,234
合格的人话是，手机号少了一位，现在是十位，补上就能提交。

138
00:13:01,234 --> 00:13:05,669
前者给的是判断，后者给的是动作，差别就在这。

139
00:13:05,669 --> 00:13:08,433
还有一局对决很说明问题。

140
00:13:08,433 --> 00:13:32,343
两个都在删客户数据的弹窗，一个写警告、此操作将影响所选数据、确定要继续吗，影响什么数据、影响成什么样，全靠用户脑补；另一个写删除这三位客户，会同时删除他们名下的二十四条跟进记录，删除后三十天内可以在回收站找回，对象、连带后果、退路，三样都写在明面上。

141
00:13:32,343 --> 00:13:38,653
这里要先给危险下个定义，用户没读懂也会点下去的那种，才叫危险。

142
00:13:38,653 --> 00:13:46,466
用户处理弹窗的平均耗时读不完一行字，文案模糊的弹窗，等于在盲点里放了一把刀。

143
00:13:46,588 --> 00:13:51,045
书上还点名了一种要避开的控件，状态切换按钮。

144
00:13:50,995 --> 00:14:00,033
音乐播放器那颗播放和暂停合体的键就是代表，图标显示三角时你点它，音乐响起，图标变成两道竖条。

145
00:14:00,033 --> 00:14:01,596
它病在哪。

146
00:14:01,596 --> 00:14:18,547
四个候选答案，一是两个功能挤一个按钮、点击区域太小容易误触，二是用户分不清图标显示的是当前状态还是点下去会发生的事，三是图标不带文字新手学不会，四是切换太快动画来不及播完。

147
00:14:18,547 --> 00:14:20,470
正确答案是第二条。

148
00:14:20,470 --> 00:14:22,585
为什么这条最致命。

149
00:14:22,585 --> 00:14:38,346
因为另外三条都能补救，加大点击区、补文字标签、调整动画时长，而状态与动作的歧义是这颗按钮与生俱来的，它把两种信息塞进同一个位置，用户每次点之前都要先做一次判断题。

150
00:14:38,346 --> 00:14:42,288
控件该省的是用户的点击，不是用户的思考。

151
00:14:42,288 --> 00:14:44,596
这里有个能迁移的规律。

152
00:14:44,596 --> 00:14:50,137
凡是让用户先猜再点的设计，都是在把判断成本转嫁给用户。

153
00:14:50,137 --> 00:15:00,558
单选钮不让人猜，因为选中态一眼可见；复选框不让人猜，因为勾没勾一目了然；合体按钮让人猜，因为它藏起了下一步。

154
00:15:00,700 --> 00:15:03,510
最后给你四条可以带走的判断。

155
00:15:03,460 --> 00:15:06,393
第一，四句口诀守住控件。

156
00:15:06,393 --> 00:15:14,337
互斥选一个用单选钮，可勾多个用复选框，立即生效用开关，选项超过一屏才考虑下拉。

157
00:15:14,337 --> 00:15:22,979
下拉是妥协方案，初始只露一项，看选项就要付一次点击，三五个选项先平铺，再配上合理默认值。

158
00:15:22,979 --> 00:15:25,840
第二，把规则抄进提示词。

159
00:15:25,840 --> 00:15:29,301
规则记在脑子里没用，得写给模型。

160
00:15:29,301 --> 00:15:53,127
约束话术贴在生成界面的需求末尾，互斥且选项不超过五个时单选钮平铺，禁止用下拉；可多选用复选框；开关只用于立即生效的设置项；对话框只用于主流程之外，功能对话框标题用动词；操作成功用非模态轻提示，禁止弹成功对话框；表单校验前置，禁用加缺项说明。

161
00:15:53,127 --> 00:15:57,647
第三，按钮携带后果，遮住正文也要能作答。

162
00:15:57,647 --> 00:16:03,897
删除这三条替掉确定，留着替掉取消，数量和对象一并写进按钮。

163
00:16:03,897 --> 00:16:10,748
验收方法很简单，把弹窗正文遮住，只看标题和按钮，还能不能安全作答。

164
00:16:10,748 --> 00:16:14,630
第四，用用户的词，翻到能行动为止。

165
00:16:14,630 --> 00:16:19,966
字段名、错误码、会话这类实现模型的词别端给用户。

166
00:16:19,966 --> 00:16:23,993
出错可能不是程序的问题，但是程序的责任。

167
00:16:23,993 --> 00:16:30,675
每条错误文案都要交代三件事，用户的词、明确的出路、最要紧的安抚。

168
00:16:30,675 --> 00:16:33,849
控件选对了，界面还得开口说话。

169
00:16:33,849 --> 00:16:42,731
这两件事单看都是细节，但细节叠起来就是手感，而手感是用户能感知却说不出来的那部分质量。