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

作者: 王文俊 | 来源:发表于2017-10-10 15:21 被阅读80次
    封面配图

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

    谁与谁一致

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

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

    产品经理A:“这个页面的视觉焦点有点跳,还有优化的空间吗?”
    设计师B:“因为其中一个模块在其他页面也有,为了保持统一和可复用性,所以产生了你说的问题。”
    产品经理A:“这三个前后页面太像了,用户会不会迷路啊?”
    设计师B:“不会吧,这三个页面的内容都是关于xx的,前后保持一致,应该更好理解吧。”

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

    一致性的第一性原理

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

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

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

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

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

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

    支付订单页的会员模块位置保持一致

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

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

    顾客支付结果页和商家收款结果页的金额要不一致

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

    延伸思考

    除了一致性原则,很多其他设计原则,甚至设计工具和设计方法都可以用第一性原理的思路去剖析:做可用性测试的本来目的是什么?用户场景分析究竟为的是什么?HEART模型是怎么来的又可以衍生出什么?马斯洛需求层次理论的本质是什么?

    相信通过第一性原理的层层剖析后,你会对这些平时常用的知识产生全新的认识。

    相关文章

      网友评论

        本文标题:从第一性原理看界面设计的一致性

        本文链接:https://www.haomeiwen.com/subject/igauyxtx.html