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

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

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


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

由于文章有点长,影响阅读体验,姑本文将分为上下两篇来发~

一、费茨定律(Fitts’ Law)

费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。

用数学公式表达为:时间 T = a + b log2(D/S+1)。如下图:

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

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

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

【A】

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

【案例一】


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

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

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

【案例二】


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

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

【B】

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

【案例一】


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

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

【案例二】


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

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

【C】

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

【案例一】


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

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

【案例二】


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

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

二、希克定律(Hick's Law )

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

希克定律指的是:一个人面临的选择越多,所需要作出决定的时间就越长。

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

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

【案例一】


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

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

【案例二】


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

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

三、神奇数字 7±2 法则

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

1956年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

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

【A】

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

【案例一】


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

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

【案例二】


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

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

【B】

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

【案例一】


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

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

【案例二】


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

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

【C】

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

【案例一】


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

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

【案例二】


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

实例解析「交互设计七大定律」在设计中的应用(上篇)四、接近法则

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

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。

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

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

【案例一】


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

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

【案例二】


比如今日头条及优酷视频信息布局:在今日头条和优酷视频的的信息条目中,我们一眼都能发现,标题和图片是表示的同一类的信息,因为它们是放在一起,具有相关性。

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

五、新乡重夫:防错原则

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

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

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

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

【案例一】


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

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

【案例二】


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

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

【总结】


以上内容便是本文的上半部分内容,包含了「交互设计七大定律」中的五个,剩下的两个:泰思勒定律和剃刀原理将会在下篇中为大家奉上,敬请期待~

如有侵权,请联系小编删除

欢迎投稿:zc5060@163.com

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

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

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

相关推荐

  • 一款运动类APP的产品交互设计全过程(两万字干货)

    这次的分享是前不久完成的一次比较完整的交互设计工作,基本上涵盖了前、中、后期的完整流程,包括前期的定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、关键因素分解、路径分析,完整的交互设计文档,以及后期的可用性测试,希望对需求分析、交互设计或可用性测试感兴趣的朋友们有用。1第一卷 需求分析1概述1.1 产品目标以运动为主题,选定某一种运动形式,完成一款 APP 产品的交互设计,内容集中在统计和分享运动量方面。1.2 关键词分解...

    2018-01-31
  • 【分享•客户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,客户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-02-11
  • 《用户体验可视化指南》视频讲书(6)

    《用户体验可视化指南》书中第2章的第2部分从伦敦地铁地图,看体验地图的元素、范围和根据目标的取舍。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享从这里开始讲绘制共线图前的5个思考点:视角、范围、焦点、结构和用途。蓉姐在这节视频中主要讲解了视角和范围这2点。1、视角有2个决定因素,目标用户和想要绘制的体验类型。a. 每类目标用户,在产品互动的关键触点上,应该是有明显差异的。哪些企业的主目标用户,哪些是次级...

    2018-04-10
  • Axure如何制作圆形加载效果?

    01新建一个矩形,去掉底部边框02调整矩形的圆角半径03设置颜色,命名为“半圆1”04复制半圆,垂直翻转,命名“半圆2”05新建矩形,命名“矩形遮挡”06设置“半圆1”的交互样式07“矩形遮挡”遮挡“半圆1”,“半圆2”隐藏08设置“矩形遮挡”交互样式09点击预览

    2018-03-29
  • 做你女朋友,用户体验真差

    点上方蓝字关注「晚安少年」每晚十点,一位少年陪你说晚安文/陈大力经作者授权发布01先说件有趣的事。我前两天跟gay蜜吐槽我男朋友。内容是:不会夸人,半句甜言蜜语都说不得。明明本人是腿模级别身材,偏偏他一个劲儿挑出不足为道的赘肉来取笑。以及,起争执的时候,退化成“我就静静看你发疯”的不解意选手,仿佛眼前这一场不是他该来的比赛。gay蜜的回答是:嗯是有点过分了,女生不就喜欢被哄哄嘛。同一个情感问题,我也问了基友,直男小学弟一只。我这边慷慨激...

    2018-02-02
  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01
  • 没去过赌场,别谈用户体验

    订 [图片] 阅20———— Jun. ————A大叔说的 第09篇 文章既然最终决策是“人”,就要思考人性什么是好的产品?罗辑思维演讲时提过一个观点:能占用用户时间的产品就是好产品。如果把这个概念加以延伸,应该可以这么说:消耗了用户很多时间,但用户不自知,一段时间未使用就会再次

    微信热点 2018-04-08
  • 美甲店如何做好用户体验?【下】 | 互联互生

    上周的一篇文章我们说到了“用户体验”对于美甲店铺的重要性,文章中我提出了一个“峰值和终值的一个概念”,以及举了几个服务性的行业的例子,它们是如何利用“多数被遗忘,偶尔特漂亮”这个心理给用户带来不一般的体验感。今天这篇文章我们重点来谈谈咱们美甲店可以怎样在“用户体验”上有一些创新。好客服的法则随着网络越来越普及和重要,大部分美甲店主都开始注重自己的店铺在网络上面的评价,我们就先拿大众点评这个平台作为例子。一个店铺在大众点评上面肯定有很多的...

    2018-05-06
  • 印尼APP用户体验调查报告

    随着智能手机功能的不断优化,用户对设备的体验要求也逐渐提高,用户的满意程度不再仅仅由服务质量来衡量。移动市场的竞争逐渐加剧,简单易操作的移动应用程序更能获得许多用户的青睐。市场玩家需从用户的角度去优化用户体验。用户体验一直是一个非常主观的问题,每个人都有自己的偏好。年龄、受教育水平、设备类型等因素都会影响到用户体验。近期一篇关于用户手机app使用体验调查报告透露了印尼用户的一些使用行为习惯,详细如下:(注册偏好)大部分受访者在注册一个应...

    2018-04-12
  • 为什么职场上的印度人总比中国人混得好?

    目前为止我还未有机会到过印度。身边去过的人有大致两边倒的两种观点,一种是这是一个思想自由的国度,人们开心知足、与世无争。一种是这是一个脏乱差效率低下的地方,一条公路几十年也修不整齐。我无从判断,因为每一种观点都主观。有一位曾经生活在帝都的印度女记者倒是写过一本比较中印差异的书叫《烟与镜》,值得一读。因为工作和学习的关系,我与很多印度人一起共事或者正在共事,有的只能算是点头之交,有的成为了挚友。1先说一件趣事,多年前,我没有与印度人近距离...

    2018-03-16