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

2
00:00:06,382 --> 00:00:14,362
这一集我们不聊模型，不聊提示词，聊一个更古老也更容易被忽略的东西，界面到底好不好看。

3
00:00:14,362 --> 00:00:19,026
你大概听过这样一句评价，说不上哪里丑，反正就是丑。

4
00:00:19,026 --> 00:00:23,810
这句话听起来很主观，其实八成在说同一件事，间距。

5
00:00:23,810 --> 00:00:29,699
颜色一个没改，字体一个没换，只把间距捋顺，界面就能上一个档次。

6
00:00:29,699 --> 00:00:41,838
这件事在今天格外重要，因为界面已经不再是设计师的专属领地了，你跟 AI 说一句帮我做个页面，它几分钟就能吐出一张完整的界面，速度快得让人上瘾。

7
00:00:41,838 --> 00:00:48,245
但速度换来的往往是散装，每一处都是当场随手决定的，合起来就露馅。

8
00:00:48,245 --> 00:00:55,348
所以你不需要学会画画，你需要的是一套能说出来、能检查、能写进指令里的规则。

9
00:00:55,348 --> 00:01:10,881
这四个抓手是递进的，留白与对齐管的是空间，克制管的是颜色和字体，一致性负责把前两条固化下来，让它们不再靠人的记性维持，最后那个验收办法管的是最后一公里，交付前怎么把问题查出来。

10
00:01:10,881 --> 00:01:20,556
四件事听起来不少，但真正落到日常，你每次只需要记住三个动作，先查间距，再数颜色，最后对着变量表核对。

11
00:01:20,556 --> 00:01:29,763
今天给你四个抓手，留白与对齐，克制，一致性，再加上一套能直接交给人也能直接交给 AI 的验收办法。

12
00:01:29,910 --> 00:01:33,441
间距这件事，说到底只有两条规律。

13
00:01:33,391 --> 00:01:38,427
第一条叫亲密性，相关的元素靠近，无关的元素离远。

14
00:01:38,427 --> 00:01:43,644
读者并不看你画没画框，他靠距离判断哪些东西是一伙的。

15
00:01:43,644 --> 00:01:54,185
一个输入框上方紧贴着三个像素的标签，那就是标签属于这个输入框；把标签往上挪二十四像素，它立刻变成上一组的尾巴。

16
00:01:54,185 --> 00:02:06,528
第二条叫一致性，同层级用同一个间距，卡片和卡片之间是十六像素，那就处处是十六像素；标签和输入框之间是八像素，那就处处是八像素。

17
00:02:06,528 --> 00:02:11,588
这两条加起来，剩下的难题就只剩一个，具体填几。

18
00:02:11,588 --> 00:02:24,689
多数人恰恰卡在这里，十三还是十五，十七还是十九，每一处都重新纠结一次，一屏几十处纠结下来，页面必然松散，而且散得没有规律，改都不知道从哪改起。

19
00:02:24,689 --> 00:02:32,886
所以规律好记，难的是把填数这一步也管起来，还有一点值得记住，亲密性和一致性是有分工的。

20
00:02:32,886 --> 00:02:42,081
亲密性管的是分组，它回答哪些东西是一伙的；一致性管的是秩序，它回答同一层级的东西有没有被同等对待。

21
00:02:42,081 --> 00:02:53,055
很多人只做对了一半，组内的亲密性做得不错，组与组之间却忽宽忽窄，看上去就像一群人排队，队形忽紧忽松，说不出哪里别扭。

22
00:02:53,055 --> 00:02:56,672
管住它的办法就是下面这条网格。

23
00:02:56,810 --> 00:02:58,298
先说分组。

24
00:02:58,248 --> 00:03:03,633
一本交互设计的经典教材里，有一笔算得清清楚楚的像素账。

25
00:03:03,633 --> 00:03:11,806
工具栏里同组的图标相距四像素，组和组之间留八像素，分组就成立了，一条边框都不用画。

26
00:03:11,806 --> 00:03:23,380
作者顺手点名了反面做法，很多界面入目之处边框充斥，有时一两个元素也要围上一圈，那是笨拙的分组方式，还白白制造视觉噪音。

27
00:03:23,380 --> 00:03:33,500
同一条工具栏，八个命令分三组，文件、编辑、视图，靠四和八这一倍的距离差就能一眼分清，比画三条线干净得多。

28
00:03:33,500 --> 00:03:39,726
所以下次想分组，先别伸手去画框，先问一句，靠距离能不能解决。

29
00:03:39,726 --> 00:03:41,205
再说网格。

30
00:03:41,205 --> 00:03:46,950
书里有个概念叫原子网格单位，也就是界面里那个最小的间距。

31
00:03:46,950 --> 00:03:53,813
精心设计的界面里，元素和元素、组和组之间的距离，都取这个原子的整数倍。

32
00:03:53,813 --> 00:04:00,472
你把原子定成八，页面上的间距就只会是八、十六、二十四、三十二。

33
00:04:00,472 --> 00:04:15,147
举个例子，一张目标卡片，内边距取原子的两倍，段落间隔取一倍，区块间隔取三倍，整张卡的所有间距都锚在同一个原子上，你把它整体放大或缩小，也没有一处会失调。

34
00:04:15,147 --> 00:04:20,460
间距彼此成倍数，眼睛就能读出秩序，这就是呼吸感的骨架。

35
00:04:20,460 --> 00:04:22,935
网格换来的东西有三样。

36
00:04:22,935 --> 00:04:29,883
可用性上，元素位置变得可预期，读者不用每屏重新找一遍标题和按钮在哪。

37
00:04:29,883 --> 00:04:36,553
美感上，间距互为倍数产生秩序，说不出好在哪，但看得出来有人管过。

38
00:04:36,553 --> 00:04:42,611
效率上，这里空多少不再逐处争论，间距决策从几十次减到一次。

39
00:04:42,611 --> 00:04:49,991
这个词还是给 AI 下指令的好词汇，跟它说间距全走八像素网格，比说好看一点有效得多。

40
00:04:49,991 --> 00:04:58,585
因为它把一句开放的审美判断，换成了一道有限选项的选择题，选项少了，出错的机会也就跟着少了。

41
00:04:58,585 --> 00:05:10,700
你还可以把这套网格写成一句话放进设计说明里，本页所有间距取八的整数倍，不在此列的取值一律视为笔误，这句话能替你挡掉相当一部分返工。

42
00:05:10,850 --> 00:05:13,372
再说两件容易被忽略的事。

43
00:05:13,322 --> 00:05:14,884
第一件是比例。

44
00:05:14,884 --> 00:05:26,639
卡片和分栏定什么比例，书里先给了两个久经验证的候选，一比一点六一那个黄金比，还有一比一点四一那个根号二，也就是常见办公用纸的比例。

45
00:05:26,639 --> 00:05:30,269
但它更强调的是另一条，比例必须干脆。

46
00:05:30,269 --> 00:05:35,377
差不多是个正方形，不行；几乎是黄金矩形，也不行。

47
00:05:35,377 --> 00:05:42,961
要么精确到位，要么明显拉开，卡在中间的比例会让读者隐隐觉得不稳，还说不出为什么。

48
00:05:42,961 --> 00:06:01,907
所以当你量出同一张卡片里两个平级段落的间距一处十四一处十六，正确做法不是保留，也不是各加一个浅色边框把它们框起来，而是统一成同一个数；如果你确实想表达层级不同，那就狠一点，拉开成八和二十四，让差异变得明显。

49
00:06:01,907 --> 00:06:09,275
这条原则可以推广成一句话，差异要么消除，要么明显拉开，最怕的就是差不多。

50
00:06:09,275 --> 00:06:12,015
第二件是给视线修一条路。

51
00:06:12,015 --> 00:06:15,970
眼睛读屏是有惯性的，从左上走到右下。

52
00:06:15,970 --> 00:06:23,987
顺应这个惯性的布局叫逻辑路径，让视线从标题走到内容，再走到按钮，一路不回头。

53
00:06:23,987 --> 00:06:34,167
你可以做个小实验，把表单标题挪到下面，按钮挪到上面，再顺着视线走一遍，数一数折返了几次，那种别扭感立刻就出来了。

54
00:06:34,167 --> 00:06:42,304
还有一条容易被误会的原则，完美对称的布局反而缺层次，平衡的不对称才能给屏幕一个视觉入口。

55
00:06:42,304 --> 00:06:50,813
所以一张注册页里，标题在左上迎住视线，表单顺流而下，按钮在右下收尾，读完即走到出口。

56
00:06:50,813 --> 00:06:57,352
右下收尾还带来一个副产品，布局左重右轻，比完美对称多一层活气。

57
00:06:57,352 --> 00:07:11,655
判断逻辑路径有个土办法，把你页面上的元素按阅读顺序标上一二三四，再看这条序号线是不是一条从左上到右下的下坡路，如果出现回头或者跳跃，布局多半有问题。

58
00:07:11,655 --> 00:07:19,119
同样的办法也能用来检查分组，序号连着跳到另一个区域，说明那一块的位置放错了。

59
00:07:19,270 --> 00:07:22,909
前面讲的是空间，这一段讲颜色和字。

60
00:07:22,859 --> 00:07:26,886
好看的界面大多不是加出来的，是省出来的。

61
00:07:26,886 --> 00:07:30,095
预算制的规则很短，一共三条。

62
00:07:30,095 --> 00:07:39,326
一个主色，其余交给黑白灰的中性色；两种字重，正文一档，强调一档；一套圆角，定一个数处处沿用。

63
00:07:39,326 --> 00:07:46,898
想加第二种彩色的时候，先问自己一句，它值不值得动这份预算，多数时候答案是省下来。

64
00:07:46,898 --> 00:07:52,883
有一句话说得很准，每多加一种颜色，已有的每种颜色都在贬值。

65
00:07:52,883 --> 00:08:01,513
颜色的价值在于稀缺，只有一处玫红的时候，它就是全场焦点；有六种彩色的时候，谁都当不了焦点。

66
00:08:01,513 --> 00:08:05,936
饱和度是同一个道理的另一半，它是颜色的音量键。

67
00:08:05,936 --> 00:08:10,936
预算管的是有几种颜色，饱和度管的是这个颜色有多响。

68
00:08:10,936 --> 00:08:18,424
高饱和的颜色个个都在喊，凑在一起就是嘉年华效应，用户会被吵得不堪重负。

69
00:08:18,424 --> 00:08:27,739
同样三个标签，把饱和度当音量键推一推，你会发现三成半上下是工作界面的舒适区，分得清轻重，又不吵。

70
00:08:27,739 --> 00:08:37,944
你可以给自己做一个预算面板，把颜色数、字重数、圆角统一这三样做成开关，任意组合，右下角实时告诉你超没超支。

71
00:08:37,944 --> 00:08:51,850
所以当你觉得一个界面显得廉价，别先怀疑字体不够贵，也别急着追最新的设计趋势，按顺序查三样，先数彩色有几种，再数字重有几档，最后看圆角统不统一。

72
00:08:51,850 --> 00:09:00,660
这三样查完，八成的问题已经浮出水面，剩下一成通常是间距和比例的问题，回到前面两段的办法里去查。

73
00:09:00,660 --> 00:09:15,516
预算制还有个额外的好处，它把审美争论变成了可执行的判断，设计师和工程师不用再为好不好看这种主观感受来回拉扯，只需要对着预算表数一数超没超支，结论当场就有。

74
00:09:15,670 --> 00:09:18,600
克制还有两条能直接上手的纪律。

75
00:09:18,550 --> 00:09:20,858
第一条管的是差不多。

76
00:09:20,858 --> 00:09:23,947
不必要的差异是一致设计的大敌。

77
00:09:23,947 --> 00:09:30,185
两个间距几乎一样，就调成同一个数；两种颜色几乎一样，就用同一个。

78
00:09:30,185 --> 00:09:35,077
每处差异的存在都要有理由，找不出理由，就消除它。

79
00:09:35,077 --> 00:09:48,406
拿一张会员权益卡举例，行距一处十二一处十五，两枚标签的粉一深一浅，字号十三和十五混着用，单独看每处都说得过去，叠在一起就是一股说不出的松散。

80
00:09:48,406 --> 00:09:59,428
这类漂移最麻烦的地方在于，它不会让你一眼看出错了，只会让人觉得这个东西没被认真对待，而用户说不出为什么，也就没法给你反馈。

81
00:09:59,428 --> 00:10:02,096
第二条叫删到破坏为止。

82
00:10:02,096 --> 00:10:10,149
做法很具体，删减东西，直到删掉某件东西破坏了设计为止，再把最后删掉的那件加回来。

83
00:10:10,149 --> 00:10:25,029
一张促销卡上堆了六件装饰，角标、热词、副标题、优惠券说明、主按钮、拉好友砍一刀，从你觉得最多余的那件下手，一件件点掉，哪一件删了页面就破，你自然会知道。

84
00:10:25,029 --> 00:10:32,781
这六件里未必都是装饰，总有一两件是筋骨，删到它们的时候你会感觉到页面塌了一块。

85
00:10:32,781 --> 00:10:39,175
做减法比做加法更常出效果，而删颜色是其中性价比最高的一步。

86
00:10:39,175 --> 00:10:51,050
这两条纪律其实是同一件事的两面，一条管的是差不多的差异，一条管的是多余的元素，共同的目的都是让界面上留下的每一样东西都说得出为什么在。

87
00:10:51,050 --> 00:10:57,709
养成这个习惯之后你会发现，做界面最难的从来不是加什么，而是敢不敢删。

88
00:10:57,860 --> 00:11:03,062
有一种界面，单看每处都还行，合起来却透着一股散装味。

89
00:11:03,012 --> 00:11:07,627
它缺的说到底就一样东西，一套大家共同遵守的变量。

90
00:11:07,627 --> 00:11:18,048
散装感的来路很具体，这个按钮高三十六，那个高四十；这张卡圆角八，那张十六；这里的玫红深一点，那里浅一点。

91
00:11:18,048 --> 00:11:23,168
每处都是当时随手写的，单看都说得过去，拼起来就露馅。

92
00:11:23,168 --> 00:11:32,435
解法是把这些随手写收编成设计变量，先定下主色、圆角、控件高度、间距档位，所有样式从变量取值。

93
00:11:32,435 --> 00:11:36,858
写样式的人少做决定，界面自然长得像一家人。

94
00:11:36,858 --> 00:11:39,034
这不是课堂上的虚构。

95
00:11:39,034 --> 00:12:01,634
你正在看的这个站点，课程列表页的样式表里就躺着这样两行变量，一行管控件高度，一行管控件圆角，注释里写得明明白白，顶栏的分享、主题、交流群、语言、账号这几个按钮共用一档，另外由脚本注入的那几个也读这里，避免各写各的尺寸拼出一排高低不齐的按钮。

96
00:12:01,634 --> 00:12:07,619
你把这两行删掉，让每个按钮各写各的，立刻就能看到散装长什么样。

97
00:12:07,619 --> 00:12:12,259
反过来说，哪天要全站换风格，改这两行就够了。

98
00:12:12,259 --> 00:12:16,045
一致性听着像洁癖，其实买的是真金白银。

99
00:12:16,045 --> 00:12:26,886
统一的界面标准靠可预见性提高产出、减少错误，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。

100
00:12:26,886 --> 00:12:35,384
那些大的操作系统厂商乐于让第三方应用长得像自家系统，图的就是用户到哪儿都不用重新学。

101
00:12:35,384 --> 00:12:46,513
反过来，不一致的代价也很直接，每个新页面都要重新试探一遍，上一页明明是点右上角保存的，差异还会不断把注意力拽向界面本身。

102
00:12:46,513 --> 00:12:58,605
当然标准也有边界，它管的是外观和感觉这一层语法，管不了更深的逻辑，把标准当灵丹妙药，和以为有了格式手册就能写出好小说一样不可取。

103
00:12:58,750 --> 00:13:05,298
这一节的最后，把学的东西变成一段话，放在你让 AI 写界面的指令最前面。

104
00:13:05,248 --> 00:13:07,339
变量表大概长这样。

105
00:13:07,339 --> 00:13:24,302
颜色部分，一个主色加中性色，语义色只给状态用；主色要给出悬停加深的那一个值，并且明确禁止出现第二种蓝；中性色分文字、次要、边框三档；成功和危险这两种语义色只用于状态，不做装饰。

106
00:13:24,302 --> 00:13:41,386
尺寸部分，圆角一律十像素，头像例外用圆形；控件高度一律三十六像素；间距只允许八、十六、二十四、四十这四档；字号只允许十三、十五、十八、二十四这四档，字重只用四百和七百。

107
00:13:41,386 --> 00:13:50,160
最后是验收，按钮、圆角、主色、图标风格、行距这五项逐屏核对，出现表外取值视为未完成。

108
00:13:50,160 --> 00:13:54,751
关键是让每个决定都有出处，AI 就没机会替你随手写。

109
00:13:54,751 --> 00:14:07,191
这里说的变量表管的是从今天起新写的界面，如果项目已经跑了一阵、样式早就各写各的，光给表不够，得先把散落的实现收回来，那是另一台手术。

110
00:14:07,191 --> 00:14:10,664
再补一句裁判标准，一共两句话。

111
00:14:10,664 --> 00:14:16,987
任何元素的存在要有足够的理由，任何差异的存在也要有足够的理由。

112
00:14:16,987 --> 00:14:33,649
删除按钮比别的按钮红，理由充分，行为不同的元素就该在视觉上明显区分，长得一样却干不一样的事才坑人；反过来，同一层级的两张卡圆角一个八一个十六，谁也说不出为什么，那就是该收编的漂移。

113
00:14:33,649 --> 00:14:42,892
书里还给了个顺手的杠杆思路，与其加新元素，不如让一个元素多干几件事，元素越少，一致性越容易守住。

114
00:14:42,892 --> 00:14:46,185
最后给你一个交付前两分钟的习惯。

115
00:14:46,185 --> 00:14:57,363
第一分钟，捋一遍左边缘、图标基线、按钮间距，看有没有各自漂移；第二分钟，顺着左上到右下的视线路径走一遍，看有没有折返。

116
00:14:57,363 --> 00:15:06,870
留白与对齐、克制、一致性，这三个抓手加上这两分钟，就够你把大多数说不上哪里丑的界面，从及格线拉到像样。

117
00:15:06,870 --> 00:15:11,630
对齐是最便宜的高级感，希望你从今天起就用上。