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

封面配图

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

谁与谁一致

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

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

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

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

一致性的第一性原理

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

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

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

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

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

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

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

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

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

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

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

延伸思考

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容