交互设计定律 在UI设计中的应用!

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

交互设计定律 在UI设计中的应用!

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

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

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

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

从下图来看,左边淘宝登录界面的信息输入区域很明显比右边中国银行登录界面信息输入区域相互之间的距离和输入面积更大一点,在视觉及输入体验上面,淘宝也要比中国银行的好很多。再看两个页面的登录按钮,右边中国银行界面的按钮视觉上很小,而且距离上方验证码输入框的距离很近,这样的按钮不仅不好点击还容易产生误操作。相对而言,左图淘宝页面的按钮间距和大小就很合适了,输入和点击体验比右图好很多。

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

(2)屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

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

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

交互设计定律 在UI设计中的应用!

 

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

下面两个操作系统我想大家都很熟悉,经常使用的都知道Windows桌面的默认导航栏是在固定底部的,而Mac导航的位置则是在顶部和底部都有。虽然,两者导航看似处在屏幕的不同位置,实际上都是固定在屏幕的边缘,还有当你去设置导航栏的位置时,都是停留在屏幕边缘四周,不会出现在屏幕中央的位置,这就是最经典的「费茨定律」用处了。

交互设计定律 在UI设计中的应用!

 

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

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

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

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

二. 希克定律(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 )在设计中的应用

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

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

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

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

三. 神奇数字 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个,会让用户对于网站的内容一目了然,更快捷也更加有效。

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

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

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

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

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

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

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

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

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

四. 接近法则(The Law Of Proximity)

 

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

格式塔理论自1912年由韦特海墨(M,Wetheimer)提出后,在德国得到迅速发展。由于苛勒(K,Kohler)和考夫卡(K,Koffka)的访美以及他们的著作被翻译成英文,这种新的理论引起了美国心理学家的注意。格式塔理论是心理学中为数不多的理性主义理论之一。格式塔学派以某些相当抽象的,与知觉和思维的性质及心理经验的结构有关的观念解释了熟悉的观察资料。根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。

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

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

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

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

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

五. 新乡重夫:防错原则

 

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

新乡重夫(
1909年-1990年),在品质管理方面作出重大贡献,在美国出版了不少有关品质方面的著作。他还根据自己20年事业生涯中的系统性方法和精心笔记,著有18部书和无数管理文章。他指出,「零损坏」就是品质要求的最高极限,被尊称为「纠错之父」。他首创POKA-YOKE的概念,在这个概念中有一条是这么说的:我们不可能消除差错,但是必须及时发现和立即纠正,防止差错形成缺陷。

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

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

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

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

交互设计定律 在UI设计中的应用!

 

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

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

交互设计定律 在UI设计中的应用!

 

总结

以上内容便是本文的上半部分内容,包含了「交互设计七大定律」中的五个,剩下的两个泰思勒定律和剃刀原理将会在后续奉上。

长按下方二维码关注“互联网设计帮”

 

交互设计定律 在UI设计中的应用!

 

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

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

相关推荐

  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 线框仔,你知道交互设计在未来会多火?

    对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小...

    2018-04-17
  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21
  • 用户体验地图

    利用用户体验地图实现产品的情感化设计;先来看一张图:我们可以将用户体验地图分为三个区域,其中:# ZONE A 提供了对地图的界定;# ZONE B 是视觉化的用户体验过程;# ZONE C 描述了用户的痛点;我们通过拆分各个区来实现一个用户体验地图的构建;A区:1 : 表示一个角色,即体验的用户是谁,或者说你的产品的目标客户群体是什么样类型的人;2 :表示待调研的场景,即在用户什么情景下会使用你的产品;B区:3 :可分段的体验过程,即...

    2018-03-28
  • 用户体验之旅-开篇

    设计菜会有啥?设计菜主要针对用户体验的方方面面进行分享。也会适当分享行业的一些资讯。主要为了沉淀,不追求快节奏,慢下来去思考去沉淀是设计菜的宗旨。没有商业目标~没有商业目的~欢迎围观和点评。欢迎━(*`∀´*)ノ亻留言及分享!谢谢!图片来自于:pinterest

    2018-04-27
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 四个小故事 每一个都是“极致用户体验”的用心诠释(上)

    古老的印第安人有个习惯当他们移动得太快的时候会停下脚步,安营扎寨耐心等待自己的灵魂前来追赶而身为现代人的我们在开启一段旅程前最重要的事情莫过于挑选一家“想客户所想”的旅行社只有这样才能安心这次我们透过四个小故事向你娓娓道来为什么说驴妈妈客服是“极致用户体验”的先行者即便是大家族,也“一个都不能少”王女士来自苏州,今年40多岁,她十分看重亲情,每隔一段时间,就会带上全家出国旅游——由于出身于一个大家族,王女士每次在驴妈妈报团,几乎没有少于...

    2018-04-11
  • 【干货知识】最全面的交互设计原则和理论汇总(上)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】文章包括:格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则、成...

    2018-04-16
  • 我们请50位用户体验了一把Q音的“养生黑科技”

    【快讯】据英国伦敦大学史密斯学院最新研究,两周参加一次演唱会可延长寿命9年。为了亲爱的用户们身体健康心情愉快,QQ音乐团队精心研究,在此成果上推出“食疗续命”公益项目——“肚子饿了!”!4月1日,该项目试点落地北京顺义,经过一番严格筛选,撸串巨星GALA乐队受邀与50位幸运用户共赴春游,在音乐与美食中修身养性,延年益寿。活动后GALA乐队与用户均反馈良好,经非权威机构检测,他们的健康幸福指数在参与“肚子饿了!”后上升显著。科技改变生活,...

    2018-04-10
  • Sketch常用插件介绍

    sketch大家应该都不陌生,在互联网设计尤其是UI设计相对于老牌PS,sketch提升了工作效率,改变了以往的工作模式,sketch的强大除了软件本身,另一个不可磨灭的功劳就是丰富的插件。今天给大家介绍几款常用的插件:一、Sketch Measure一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。在线演示: http://utom.design/news/二、Craft帮你提高效率的自动填充神器a.文本自动填...

    2018-04-12