解析「交互设计七大定律」在设计中的应用(上篇)

交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

解析「交互设计七大定律」在设计中的应用(上篇)

交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~

费茨定律(Fitts’ Law)


1、费茨定律(Fitts’ Law)简介

费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是1954年;该定律被用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。

费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。用数学公式表达为:时间 T = a + b log2(D/S+1)。如下图:

解析「交互设计七大定律」在设计中的应用(上篇)

上图中,T指的是:移动设备所需时长;a、b指的是:经验参数,它们依赖于具体的指点设备的物理特性,以及操作人员和环境等因素;D指的是:设备起始位置和目标位置之间的距离;S指的是:目标区域的面积大小。

2、费茨定律(Fitts’ Law)在设计中的应用

(1)、按钮等可点击区域在合理的范围之内越大越容易点击,反之,可点击区域越小,越不容易操作。

案例一:比如淘宝和中国银行的手机网页端的登录页面

解析「交互设计七大定律」在设计中的应用(上篇)

从图中来看,左边淘宝登录界面的信息输入区域很明显比右边中国银行登录界面信息输入区域相互之间的距离和输入面积更大一点,在视觉及输入体验上面淘宝也要比中国银行的好很多;


再看两个页面的登录按钮,右边中国银行界面的按钮视觉上很小而且距离上方验证码输入框的距离很近,这样的按钮不仅不好点击还容易产生误操作,相对而言,左图淘宝页面的按钮间距和大小就很合适了,输入和点击体验比左图好很多。

案例二: 比如小黄车和小蓝单车首页扫码按钮

解析「交互设计七大定律」在设计中的应用(上篇)

小黄车和小蓝单车首页最重要的扫码用车按钮不约而同的使用了圆形按钮,我们不看放置的位置,单看按钮大小,小黄车的明显要比小蓝单车的大很多,笔者在使用两者的时候,小黄车的操作按钮要比小蓝的舒服很多,因为小黄车的按钮比较大,比起小蓝单车的按钮更容易点击。


(2)、屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。


即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

案例一:比如移动端的知乎、Twitter及Facebook内的发帖按钮

解析「交互设计七大定律」在设计中的应用(上篇)

通过上面三个界面,我们看到它们本身发布内容的按钮都放置在了屏幕的右下角处,这样的设计正是运用了上面的要点,使得用户的操作难度和成本降低,提升了用户体验。

案例二:例如Windows桌面底部导航和Mac桌面顶/底部导航栏

解析「交互设计七大定律」在设计中的应用(上篇)

上面两个操作系统我想大家都很熟悉,经常使用的都知道Windows桌面的默认导航栏是在固定底部的,而Mac导航的位置则是在顶部和底部都有,虽然,两者导航看似处在屏幕的不同位置,实际上都是固定在屏幕的边缘。


还有,当你去设置导航栏的位置时,都是停留在屏幕边缘四周,不会出现在屏幕中央的位置,这就是最经典的“费茨定律”用处了。

(3)、出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

案例一:安卓8.0及IOS11系统手机内长按APP出现的菜单

解析「交互设计七大定律」在设计中的应用(上篇)

图分别是安卓及IOS最新系统长按应用图标出现的快捷操作菜单栏,这样的功能极大的提升了使用APP主要功能的效率,方便易用。

案例二:PC端默认的右键操作栏

解析「交互设计七大定律」在设计中的应用(上篇)

我们在Mac系统或者Windows系统桌面上对于文件夹的操作,通常是通过鼠标右键点击方式,在出现的操作菜单中对其进行相应的操作,方便快捷;这样的方式还有很多,比如在浏览器中对于一张图片进行保存,对准目标右键点击,出现操作栏选择保存就可以了。

希克定律(Hick’s Law )

1、希克定律(Hick’s Law )简介

希克定律指的是:一个人面临的选择越多,所需要作出决定的时间就越长。用数学公式表达为:RT=a+blog2(n),其中,RT表示反应时间,a表示跟做决定无关的总时间,b表示根据对选项认知的处理时间实证衍生出的常数(这个例子对人来说约是0.155s),n表示同样可能的选项数字。


比如,假设需要两秒测知警铃、了解其含义,接着假设按下五个按钮中的一个按钮,可以解决触动警铃的状况,那么反应时间就是RT=a(2s)+0.155s(log2(5))=2.36s。

2、希克定律(Hick’s Law )在设计中的应用

设计中给用户尽量少的选择,减轻用户的决策成本。

案例一:比如移动端的删除弹窗

解析「交互设计七大定律」在设计中的应用(上篇)

我们在使用网站或者移动端产品时,经常会遇到很多操作弹窗,就像图中的两个例子,基本上弹窗的操作选项只会有两个,二选一的成本,对于用户来讲很简单方便,选择成本最小。

案例二:比如钉钉和微信初次登录界面

解析「交互设计七大定律」在设计中的应用(上篇)

当用户初次下载使用钉钉或者微信APP的时候,在进入正常的使用之前,用户会看到这个页面,我们看下面两个截图,页面上的操作按钮只有两个,一个“登录”按钮和一个“注册”按钮,这样的话,用户就很清晰接下来自己要干什么了。

神奇数字 7±2 法则

1、神奇数字 7±2 法则简介

7±2法则正式提出于美国心理学家George A. Miller1956年发布的论文《神奇的数字7加减2:我们加工信息能力的某些限制》。


1956年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。


与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

2、神奇数字 7±2 法则在设计中的应用

(1)、PC端导航或选项卡尽量不要超过9个,应用的选项卡不会超过5个。

案例一:比如苹果、人人都是产品经理及UI中国官网导航栏

解析「交互设计七大定律」在设计中的应用(上篇)

我们看到这三个主流网站的导航栏模块都没有超过9个,空间布局合理,使用起来方便快捷,尤其是苹果官网,简约设计的典范,因此,尽量使得自己设计的网站导航少于9个会让用户对于网站的内容一目了然,更快捷也更加有效。

案例二:比如安卓版微信、支付宝和QQ底部导航

解析「交互设计七大定律」在设计中的应用(上篇)

在使用APP的时候,我们都会用到软件的底部导航区域,如果大家仔细观察,会发现,任何软件的底部导航都不会超过5个,就像下图中的微信、支付宝及QQ界面一样,底部导航也没有超过五个的。

(2)、如果导航或选项卡内容很多,可以用一个层级结构来展示各段及其子段,并注意其深广度的平衡。

案例一:比如天猫商城和亚马逊网站的商品分类选项卡

解析「交互设计七大定律」在设计中的应用(上篇)

导航是分为多个层级的。如果导航的内容很多放不下的话,我们就可以将它整合归类来分层级收纳,就像天猫和亚马逊官网对于商品分类的处理方式一样,使用父子层级的方式来归类展示商品。

案例二:比如京东及当当网APP分类模块

解析「交互设计七大定律」在设计中的应用(上篇)

下图分别为京东及当当网APP的商品分类模块界面,我们不难看出,两个产品的商品分类布局形式很相似,都是用了选项卡的方式来分类商品,层级明确,相应的提升了用户找寻商品的效率。

(3)、把大块整段的信息分割成各个小段,并显著标记每个信息段和子段,以便清晰的确认各自的内容。

案例一:比如苹果官网iPhone X 对于语言版本的介绍板块

解析「交互设计七大定律」在设计中的应用(上篇)

如图所示,语言版本介绍模块把一整段语言,分成四个模块的信息来介绍,而且每个模块都要自己的标题,再加上段落之间的空间留白,使得此段信息看起来清晰明了。

案例二:比如支付宝和微信银行卡界面卡号信息的展示方式

解析「交互设计七大定律」在设计中的应用(上篇)

正如图中所展示的,为了便于记忆,支付宝及微信的银行卡展示界面,将卡号信息的展示采取了分段的方式,这个也源于我们现实生活中使用的银行卡,大家都知道银行卡的卡号是分段展示在卡上的。

接近法则(The Law Of Proximity)

1、接近法则(The Law Of Proximity)简介

格式塔理论自1912年由韦特海墨(M,Wetheimer)提出后,在德国得到迅速发展。由于苛勒(K,Kohler)和考夫卡(K,Koffka)的访美以及他们的著作被翻译成英文,这种新的理论引起了美国心理学家的注意。


格式塔理论是心理学中为数不多的理性主义理论之一。格式塔学派以某些相当抽象的,与知觉和思维的性质及心理经验的结构有关的观念解释了熟悉的观察资料。根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的

2、接近法则(The Law Of Proximity)在设计中的应用

将相似的、有关联的信息尽量摆在一起,不要让用户迷茫,要他在潜意识里就知道在哪里能找到自己想要的信息。

案例一:比如登录界面的输入框与按钮

解析「交互设计七大定律」在设计中的应用(上篇)

我们在使用任何一款APP产品的时候都会遇到登录或者注册页面,而且输入内容部分下面一定会有个按钮,原因就在于输入内容和按钮本身存在联系,因为,输入内容之后需要通过点击按钮来提交输入的内容,通常输入框附近一定会有提交按钮。

案例二:比如今日头条及爱奇艺视频信息布局

解析「交互设计七大定律」在设计中的应用(上篇)

在今日头条和爱奇艺视频的的信息条目中,我们一眼都能发现,标题和图片是表示的同一类的信息,因为它们是放在一起,具有相关性。

新乡重夫:防错原则


1、新乡重夫:防错原则简介

新乡重夫( 1909年-1990年),在品质管理方面作出重大贡献,在美国出版了不少有关品质方面的著作。他还根据自己20年事业生涯中的系统性方法和精心笔记,著有18部书和无数管理文章。


他指出,“零损坏”就是品质要求的最高极限。被尊称为“纠错之父”。他首创POKA-YOKE的概念,在这个概念中有一条是这么说的:我们不可能消除差错,但是必须及时发现和立即纠正,防止差错形成缺陷。

2、新乡重夫:防错原则对于设计的价值

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。

案例一:比如知乎安卓版本的登录操作

解析「交互设计七大定律」在设计中的应用(上篇)

当用户在知乎中登录时,在没有填写完手机号码和密码前,底部的登录按钮是置灰不可点击的,只有两项都填写完整底部的登录按钮才会变为可点击状态,也就会蓝色的,这就是为了防止用户犯更多错误,也是防错原则的一种体现。

案例二:比如安卓版微信发朋圈动态时,点击返回按钮出现的提示弹窗

解析「交互设计七大定律」在设计中的应用(上篇)

弹出框方式会增加不可逆操作的难度,当用户发一条动态一半的时候,因为误操作或者其它退出当前状态的时候,使用弹窗是是个不错的选择,因为用户这个操作会让之前辛苦编辑的内容删除找不回,想要再发只能从头开始,对用户造成损失比较大;这就是防错原则的另外一种体现。

总结

以上内容便是本文的上半部分内容,包含了「交互设计七大定律」中的五个,剩下的两个:泰思勒定律和剃刀原理将会在《设计法则 | 实例解析「交互设计七大定律」在设计中的应用(下篇)》中为大家奉上,敬请期待~文中观点有什么不合适的地方欢迎大家指正交流~~


解析「交互设计七大定律」在设计中的应用(上篇)

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35069/

(0)
交互精选交互精选
上一篇 2018-02-03
下一篇 2018-02-03

相关推荐

  • Axure RP 7.0 安装教程

    Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。•可以在公众号后台回复『042』或『Axure RP』获取下载链接。安装步骤:❶下载并解压安装包。❷双击安装程序。❸同意,并下一步。❹选择安装路径,下一步。❺下一步。❻取消勾选,点击Finish结...

    2018-03-20
  • 这样学Axure,效果显著,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,1800多位同学学习成长,这是1800多位同学的经验贴。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)0基础的Axure新手,如何才能更快达到高薪产品经理的Axu...

    2018-03-18
  • 《用户体验要素》:一张图读懂用户体验五要素

    《用户体验要素》是一本讲产品的好书,作者为我们清晰地介绍了关于用户体验的五个要素,五个要素是按照产品的整个生命过程来描述的。产品设计五要素分别是:战略层、范围层、结构层、框架层、表现层。《用户体验要素》说这本书清晰,是因为五个要素很清楚,按逻辑步骤总结出来的。但,这也是这本书唯一清晰的地方了,因为,这本书在细节描述上还是很凌乱的。产品设计五要素对于读这本书而言,能够领会作者的思想就可以,不必要拘泥于具体的细节。原因有二:一是,这本书的细...

    2018-04-04
  • 国际用户体验设计论坛邀请函

    点击上方蓝字关注我们国际用户体验设计论坛暨中国工业设计协会用户体验产业分会第一届理事会预备会!  开始报名啦  !官方海报如下👇报名方式一👇长按识别下方二维码,通过报名页面报名👇报名方式二点击文章最底部“阅读原文”,通过H5报名页面完成报名了解我们关注我们长按下图二维码关注“UXE优艺智造”这里有最新的行业动向最前沿的学术研究来一探用户体验的商业价值吧联系我们电话15868193198邮箱uxestudy@126.com欢迎投稿

    2018-03-30
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • 良好的用户体验不一定是品牌成功的关键

    一项针对品牌魅力的新研究表明,良好的用户体验不一定是成功的关键,因为品牌完整性受损可能会超越公众的看法。 这是对四个市场10,000名消费者的在线调查的结果。这项研究从认知、目的、诚信、慷慨,勇气和交付的六个维度检查了知名品牌。分析表明,与消费者的动态关系是短暂的受欢迎,还是长期的忠诚之间存在的真正区别。乐高式最具实力的品牌,一直让顾客感到满意。相反,FIFA被评为得分最低的品牌。另外,苹果在美国排在前十位,在英国排在第十六位。尽管其创...

    2018-02-26
  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22
  • 《用户体验要素》

    大多数人都体验过网购,这种经历几乎每一次都是一样的:你到达网站,寻找你想买的东西,然后下单(提供你的住址和电话号码),然后网站将物品快递到你的手中。这个清晰、有条不紊的体验,都是由一系列完整的决策(大大小小的决策)组成的:网站看起来是什么样、它如何运转、它能让你做什么。这些决策彼此依赖,告知并影响用户体验的各个方面。如果我们去掉这些体验的外壳,就可以理解这些决策是如何做出来了。作者给出了一套用户体验设计的科学方法,借用此方法,我们可以对...

    微信热点 2018-04-12
  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 与经典艺术交互体验,迪士尼推出AR博物馆,“篡改”世界画作

    ——映维网——国际影响力VR信息数据平台文章相关引用及参考:vrscout怎样做到?用户能够通过移动设备扫描博物馆中的任何2D艺术品或者是书籍,然后实时更改颜色和色调。例如,你可以把《蒙娜丽莎》变成紫色的皮肤(映维网 2017年09月02日)迪士尼在2015年开发了一种可以通过实时纹理来创建彩色书籍的AR技术(一种捕获2D绘图来实时创建3D增强现实图像的过程)。自那以后,迪士尼将实时纹理技术发展成一个名为AR Museum的新AR应用程...

    2018-01-30