界面评审最常见的僵局是两个人交换「我觉得」:一方觉得不好看,一方觉得挺好,谁也说服不了谁。这篇文章主张界面好坏可以判断,判断的依据是使用过程,评审者的偏好不算数。Paul Graham 在《Taste for Makers》里给出价值层的判断,好设计简洁,解决的是正确的问题,还经得住时间;Steve Krug 的《Don’t Make Me Think》和 Robin Williams 的《写给大家看的设计书》给出操作层的检查方法。两层合在一起,是一套可以直接拿到评审桌上用的原则。

判断的依据在使用过程

Graham 说人们常把品味当成纯主观的事,你喜欢一个颜色,我喜欢另一个,没有必要争。这句话在尊重偏好时有用,放到做东西的人身上就不够用,因为你得看出哪里不妥,理解为什么不妥,再找到改进的办法。

Krug 在可用性那边给了同一条主张的工程版本,不存在「普通用户」,不要凭个人喜好争论「我觉得用户会怎样」,分歧交给可用性测试。两个人的结论一致。设计有优劣,判断可以改进,判断的依据要落回使用过程本身。

Graham 举的炉灶是全篇最像界面评审的例子。四个炉头排成方形,控制旋钮排成一行。对设计者,一排旋钮很整齐;对使用者,每次操作都要先判断哪个旋钮对应哪个炉头。旋钮的排列如果和炉头一致,对应关系就不用判断了。设计者要解决的是让人顺利完成操作,面板排得好看不算完成。界面要是让用户反复确认、来回绕路,甚至处理他们并不需要处理的事情,都属于解决错了问题。

先评问题,再评画面

评审从一句话开始。这个界面的主任务是什么?作者答不上来,视觉问题先不用谈,因为没人能判断一个说不清任务的画面有没有把最重要的事做对。

主任务决定唯一的焦点和唯一的主按钮,次要内容要降级处理,缩小、变淡,或者挪开位置。评审时对每一屏问同一件事,用户在这里最可能做的一件事是什么,界面是不是只在这一件事上用力。处处用力等于没有重点。

假设没人读文案

Krug 观察到,用户不阅读页面,用户扫描页面,只找与当前任务相关的关键词,忽略其余一切。设计时要假设用户只看标题和粗体,只看按钮和链接,其余全跳过。

由此有两个推论。用户满意即止,会点第一个看起来差不多对的选项,不比较最优解,所以最可能被点到的选项必须是正确的那个。点击这件事,要紧的是每一次都不用想,三次不用想的点击,好过一次需要想的点击。

检查用眯眼测试,把页面截图调模糊,还能看出分区和分组,找得出唯一的焦点,结构就成立;糊掉之后一片灰,说明层级全靠文字细节撑着。再拿后备箱测试问六个问题:这是什么站点,这是哪一页,主要板块有哪些,这一层有哪些选项,我在结构里的什么位置,怎么搜索。每个能直达的页面都应当在五秒内答完。

不同就要截然不同

Williams 的对比原则有一句狠话:不要做胆小鬼。两个元素要有差别,就把差别拉开到一眼可辨;差一点又不完全相同是最糟的状态,她称之为冲突。同一角色的字号一个 14px 一个 15px,#333 配 #3a3a3a,两种相似的无衬线字体,都是冲突。要么完全一致,要么明显拉开。

落到层级上,相邻层级要同时叠多种对比方式,从大小和粗细,到结构、形式,乃至方向,颜色也算在内,至少同时用两种;只靠一种时差距要够大,字号比 1.2 倍起,或字重数值差 200 起。拿「有点粗」和「更粗一点」的两档字重单独区分层级,是最常见的命中。

评审动作是找「差一点」的元素对,标题和正文只差一档字重,两个按钮只差一点颜色深浅,导航当前项干脆只深一点点,全都算。

距离表达归属

Williams 的亲密性原则说,相关的项要靠近,成为一个视觉单元,无关的项要远离。物理距离就是用户读到的逻辑关系,组间距必须明显大于组内距,无关元素挨在一起会被读成相关。

常见命中出在小标题的间距上。小标题和上方内容的距离大于等于它和下方内容的距离,读者就把标题归给了上一段。所有元素间距相等也是命中,间距全等于没有分组,亲密性什么都没说。

能点的要看起来能点

用户凭外观线索判断什么能点,不会拿点击去试。Krug 的规则很直接,可点击的元素要有形状,填充色或边框;链接色只用于可点击的文字;不可点击的元素绝不使用链接色、下划线或按钮样式。扁平化把线索全去掉之后,用户分不清什么能点什么不能点。

与这条配合的是惯例。Logo 在左上,搜索在顶部,购物车在右上,后台的主操作在页头右侧。Krug 说惯例是朋友,除非新方案明显更清楚且学习成本为零,否则沿用惯例。Graham 从创作角度讲的是借鉴的层次,只复制外形未必理解了作品,知道一个办法为什么有效、在什么条件下成立,才可能用在自己的问题上。用户已经学会的东西是现成资产,换掉它要有明显的收益来抵。

按钮说明结果,报错给出路

文案的规则具体到可以逐条扫。按钮是动词加宾语,遮住上下文也能预测点击后发生什么,「提交报销单」可以,光写「提交」不行,最后一步不叫「下一步」,叫「支付 ¥299」。同一事物全库只有一个名字,菜单里叫「工单」页面标题叫「请求」是命中。链接文字要能脱离上下文理解,「点击这里」「更多」都算反例。

报错写三件事,发生了什么,怎么修,还有不责怪用户,就近显示在出错字段旁边,保留用户已输入的内容。「非法输入(Error 4012)」是反例,「密码至少 8 位,当前是 6 位」是正例。欢迎语、自夸这类快乐话,加上「在这里您可以……」的句式,直接删,删掉没有人会想念。

状态是界面的一半

每个数据视图有五种状态,加载中、空,还有错误,再算上部分数据和正常。只设计正常状态的界面是没有完成的界面。新用户第一次进来看到的就是空状态,「暂无数据」配一个孤立按钮,是第一印象的失守。

破坏性操作,可撤销优于二次确认。可以撤销的动作直接执行并提供撤销,只有不可撤销的才弹窗写明后果。用户没按你的方式输入,也不惩罚,电话号码带横线带空格,系统负责清洗成规范格式。

这些细节共享同一个底层判断,Krug 叫善意蓄水池。用户的耐心有限,每次挫败都在消耗它,耗尽就离开。藏起用户想要的信息,索要并不需要的信息,或者在用户和目标之间摆个花架子,都在放空这个池子。

颜色当不了唯一的信息载体

有一类问题在理想条件下看不出来。红绿色盲用户分不出红跌绿涨;换到只用键盘的人,没有焦点样式的按钮根本到不了;手机上没有 hover,藏在悬停里的操作整个消失。WCAG 的要求因此成了评审底线,正文对比度 4.5:1;状态不能只靠颜色表达,红色边框之外要有错误图标和文字说明;关键信息和操作不能只在 hover 时出现;所有功能能用键盘完成。

检查分两步。先把界面截成灰度,看状态还读不读得出来。再把鼠标拔掉,只靠 Tab 走一遍主流程,走不通就是命中。

趋势不代替判断

Graham 给了一个时间检验的办法。眼下流行的颜色和字体不再流行,视觉符号也过了气,这个设计还剩下什么?剩下的应该是比例和结构,是功能和表达的准确。一个设计的吸引力主要来自「现在大家都这么做」,它也会随潮流一起失去吸引力。

这条在界面上有具体落点。颜色有职责,主色标记主操作,也标记可点击和当前态,一个视图里主色面积应当很小,颜色到处都是等于没有重点。跟一个视觉趋势之前,把样式层剥掉,看布局本身成不成立。要借鉴某个模式,先弄清它为什么有效,在什么条件下成立。

评审输出修改,不输出评分

评审的产出是可执行的修改。一条意见要指到位置并给出修法,「建议优化视觉层级」这种没有落点的意见等于没写。意见要分级,必须改的是缺陷,建议项要说明理由,偏好不进意见,想要圆角大一点的人自己知道那是偏好。

评审先看对象能判什么。文字方案判不了对比度和键盘操作;到了视觉稿,focus-visible 和校验时机又判不了,这些标「无法判定」,不算通过。拿静态稿评审动效,拿代码评审品牌调性,都是空转。

最后一种输出是测试任务。评审桌上所有「我觉得用户会怎样」的争论,Graham 和 Krug 给了同一个出口:别争,测。Krug 的节奏是尽早测、经常测,每轮三个用户就够,测一个用户也好过一个都不测。把争论改写成三个具体任务,比如「找到上个月的发票并下载」,交给真实用户,比评审桌上的推演可靠。

品味是团队的能力

Graham 说好设计是改出来的,难处多半在心理。已经花了很多时间,就舍不得推翻;某个部分是偶然做好的,人会担心重做反而更差,于是为眼前的结果找理由。对作品保持适度的不满意,是继续改进的动力。

这句话放在评审文化上同样成立。评审和测试是让判断力进入工作的两个机制。评审把一个人的观察变成所有人的规则,测试则把桌子上的推测换成用户的实际行为。品味的来路是观察和比较,加上一次一次的修改,团队也一样。