• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用超多实例,解析「交互设计七大定律」在设计中的应用(上篇)

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

作者:熊猫小生 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,格式塔原理,经验分享,费茨定律等相关知识,熊猫小生希望在学习及工作中可以帮助到您

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

一. 费茨定律(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 对于语言版本的介绍板块

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

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2018-08-23用户测试的基本步骤和沟通技巧
  • 2018-08-23基础小科普!浅谈「列表视图」与「网格视图」的用法
  • 2017-08-06对CSS选择器权重的认识(亲测)
  • 2018-08-23设计师如何优雅地回复需求邮件?我总结这个详细的方法
  • 2018-08-23「竞品分析报告」系列:斗鱼 VS 虎牙
  • 2018-08-23设计表单的时候,为什么悬浮式标签体验更好?
  • 2018-08-23如何巧用Slogan,让Banner变得更有设计感!
  • 2018-08-23用好这5个技巧,帮你快速挑选出最合适的字体
  • 2017-08-06自适应网页设计的方法(手机端良好的访问体验)
  • 2017-08-06输入自动提示搜索提示功能的样式文件:suggestion.css

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 亚马逊语音交互设计规范(一)设计流程
    • 网站要上线了,问问自己这15个问题再做决定
    • 看了那么多的设计趋势,你知道怎么落地实践吗?
    • 如何设计优秀的弹出框?这儿有一份全面总结!
    • 提高网站可用性的10个小技巧
    • 你知道吗?腾讯换了Logo,还有了一套新字体
    • 内容为王的时代,阿里设计师用实战案例解读内容化设计!
    • Apple Watch 交互设计中四个全然不同以往的经验揭密
    • 哈哈哈!设计师专用表情包合集(二)
    • 如何规避 Design System 架构设计中的逻辑陷阱?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有