从第一性原理看界面设计的一致性

注：一致性，不是形式与形式保持一致，而是形式与用户认知保持一致。

文/王文俊

谁与谁一致

设计原则都是有理可循的。很多设计原则是由人对大脑和人体工程学的认识，加上实际经验，总结得来的，例如7± 2 法则、费兹定律等等。设计师如果不知道对这些原则追本溯源，理解它最根本是要解决什么问题，只是应用，难免会偏离初衷，遇到问题。

下面以一致性设计原则为例，讲述在应用原则的过程中我们可能遇到的问题，以及为什么会遇到这些问题。

产品经理A：“这个页面的视觉焦点有点跳，还有优化的空间吗？”

设计师B：“因为其中一个模块在其他页面也有，为了保持统一和可复用性，所以产生了你说的问题。”

产品经理A：“这三个前后页面太像了，用户会不会迷路啊？”

设计师B：“不会吧，这三个页面的内容都是关于xx的，前后保持一致，应该更好理解吧。”

通过这些对话发现，设计师B经常用来阐述自己设计思路的一致性，在面对产品经理A以用户视角发起的疑问时，不能很好地解释说明，原则似乎“不灵了”，原因出在哪里？其实，从设计师B的说辞可以分析出，他提出的一致性的出发点是存在偏差的。

一致性的第一性原理

如何纠偏，我将从第一性原理来重新解读一致性。

所有设计原则的出发点是用户。为了让用户更好地使用产品，我们才通过设计原则来指导完成好用的设计方案。它不是为了方便设计师对照原则画界面，提高设计效率，或输出一套遵循原则的漂亮规范，或成为与产品经理争论时的有力依据。它是为了方便用户，让用户能够理解界面中的信息时不会困难，在屏幕中操作时不会觉得麻烦。理解了这一前提，我们再更深一层看，一致性到底解决了用户什么问题？

用户在浏览界面信息时，是通过大脑处理信息，这一过程和大脑的运行机制有关：人类大脑的运行是建立在经验的基础上。以往的记忆和认识会影响对当下新事物的判断，大脑会寻求新事物与已有经验的联系，将它们关联，一视同仁地去理解，从而降低大脑的负担。对，人类就是这么懒，一致性简直就是人类大脑的福音。

综上，从第一性原理解读后的一致性原则为：与用户已有的认知保持一致。在此基础上延伸，才有了我们常说的那些道理：“我们要让用户再次看到xx时能够很快明白它的用途，才将这个元素或模块在多处保持统一”；“我们通过运用映射物理世界的方法去设计表现层，为的是让用户更容易理解xx”等等。

所以，我们常用的一致性也没错，只不过是核心思想落地到具体情况的具体表现，它是多样的，但我们不应该将多样的表现总结为规律，去遵循，而应该探究到本质，再从本质出发，解决多样的问题。

下面举两个实际工作中应用一致性和选择不用一致性的例子。

应用一致性的例子：背景是顾客在餐厅就餐后，用手机扫描桌台上美团点评提供的二维码即可查看订单直接支付，如果商家提供会员服务且顾客还不是商家会员，即可看到申请成为会员的入口，如下左图，如果顾客已是会员，则看到的是右图。

这里的一致性体现在前后页面会员模块的位置上，都位于页面的头部，与商家信息在一块儿。原因是，顾客从商家信息下方的申请入口完成申请流程后，重新进入支付订单页时，想确认自己是否已是会员，这时，根据之前已有的认知，会先入为主地从头部的商家信息附近开始寻找，故将会员标识也与商家信息放一块儿，与用户的认知保持一致。

再来看一个选择不用一致性的例子：背景是顾客在餐厅就餐后选择美团智能POS机进行支付，并且该顾客支付时使用了会员余额，剩下的零头使用了微信支付，如下左图是顾客完成支付后手机上的支付结果页，右图是商家完成收款后POS机上的收款结果页。

这里的不一致体现在页面头部重点展示的金额上。大家一定会疑问，同一笔消费的支付结果页，为什么要展示不一样的金额呢？同样的金额难道不也会让顾客和商家达成某种一致吗？通过询问商家的想法发现，商家更关注订单的总金额，因为这才是他们实际得到的收益，并且在对账时也需要订单总金额才能对平。反观顾客，作为注重优惠的消费者自然更在意自已实际付了多少，有没有多付或者少付，并且，显示减去各种优惠的实付金额，在心理感受上也有捞了大便宜的快感。由此可见，一致性在这里，并没有认知上的重合，也就没有必要遵循了。