浅谈交互设计的七大定律

新年第一篇和小伙伴们聊聊交互设计七大定律在设计中的应用。说起法则、定律、原理一类的名词,大多时候我们会觉得有点故作高深,似乎离我们真实的工作很遥远,又或者似乎太过浅显熟悉不值得讨论。窃以为,如果不想每次聊起产品设计的时候,都是你看人家的用户体验做的多好,你看这交互做的多好,你看这动效做的多好……或许,我们可以更有趣除非有更好的选择,否则就遵从标准—Alan Cooper费茨定律(Fitts’ Law)由保罗·费茨(PaulM. Fitt...

浅谈交互设计的七大定律

新年第一篇和小伙伴们聊聊交互设计七大定律在设计中的应用。

说起法则、定律、原理一类的名词,大多时候我们会觉得有点故作高深,似乎离我们真实的工作很遥远,又或者似乎太过浅显熟悉不值得讨论。


窃以为,如果不想每次聊起产品设计的时候,都是你看人家的用户体验做的多好,你看这交互做的多好,你看这动效做的多好……

或许,我们可以更有趣

除非有更好的选择,否则就遵从标准

—Alan Cooper

费茨定律(Fitts’ Law)

由保罗·费茨(PaulM. Fitts)博士,1954年提出

浅谈交互设计的七大定律

T =a + b log2(D/S+1)

T:使用指点设备到达一个目标的时间

D:目标位置的距离

W:目标大小

怎么理解这个定律?

MM豆有个广告词,“快到碗里来!”“你就不能换个大点的碗吗?”

我们再来一个小的实验体验一下

当你指向面前的一本书,和指向远处书架上的一本书,是不是你指向远处的书本的时候,需要很多指向和辅助说明?

又或者你指向远处书架上的一本书和远处的那个书架,相比起来,指向书本的手势,会再指向书架后,有更多的细微方向的调整?

有没有觉得位于边角的位置更好描述?


那这样一些特点对我们设计有何启示

一 按钮等可点击对象需要合理的大小尺寸

浅谈交互设计的七大定律

登陆按钮被设计的更大

二 屏幕的边和角很适合放置像菜单栏和按钮这样的元素,边角是巨大的目标

浅谈交互设计的七大定律

Mac OS X默认将底栏(Dock)放到了屏幕的最下方


三 出现在用户正在操作的对象旁边的控制菜单比下拉菜单或工具栏可以被打开得更快。

浅谈交互设计的七大定律

 右键菜单缩短了光标的移动距离D,提高了效率 

除了提高效率,我们也有反向应用它,譬如iPhone的关机操作

浅谈交互设计的七大定律

如果我们愿意再多联想一些,生活中对于费茨定律的应用也是无处不在


开车的朋友是否有注意到,汽车上的刹车踏板和油门踏板:它们相距很近(D小),并且刹车踏板要比油门踏板大很多(W大),那么它们为什么没有被设计成相距很远,或者将两者的大小颠倒过来呢?使用经验告诉我们,这样的设计可以使得驾驶员能够以最短的时间把脚从油门踏板移动到刹车踏板上,从而达到以最快的速度准确制动的目的(D小,W大,时间短)。


可能去过电玩大世界的人会有这样的疑问,电玩大世界中那些赛车的油门和刹车踏板大小刚好与常规的相反,这又是为什么?这也正是应用费茨法则的高明之处,因为游戏中我们需要的是更快的速度去超越对手,因此你会更加容易的去踩到油门,争取更多的时间,而且你人身安全不会受到威胁,因为刹车踏板就明显变小了。

 

希克定律(Hick’s Law)

一个人面临的选择越多,所需要作出决定的时间就越长。

浅谈交互设计的七大定律

 RT=a+blog2(n)

RT反应时间

a与做决定无关的总时间

b对选项认知的处理时间衍生出来的常数

n选项数目


这个定律比较好理解,我们来直接看其在设计中的应用

一 减少用户决策时间

浅谈交互设计的七大定律

支付宝的公共支付页面,突出重点,让用户快速理解和完成任务


二 降低点击错误率

浅谈交互设计的七大定律

淘宝选购页面,对用户进行适当行为约束,提前去除掉不能继续的道路


三、提高信息获取效率

浅谈交互设计的七大定律

支付宝充值页面,让信息的选择更扁平化


7±2 法则

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

浅谈交互设计的七大定律

人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。


 该法则对设计的启示

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

浅谈交互设计的七大定律

二 导航或选项卡内容很多,可以用一个层级结构来展示各段及其子段,注意其深广度的平衡。浅谈交互设计的七大定律

三 把大块整段的信息分割成各个小段,显著标记每个信息段和子段,以清晰确认各自的内容。浅谈交互设计的七大定律

接近法则(The Law Of Proximity)

1912年由韦特海墨(M,Wetheimer)提出

浅谈交互设计的七大定律

当对象离得太近的时候,意识会认为它们是相关的


在设计中应用启示,合理的间距排版布局,让用潜意识的就能将信息处理和分类

浅谈交互设计的七大定律

防错原则

新乡重夫被尊称为“纠错之父”,他首创POKA-YOKE的概念

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


我们不可能消除差错,但是必须及时发现和立即纠正,防止差错形成缺陷。

—新乡重夫

损失产生前给用户适当的提示

浅谈交互设计的七大定律

泰思勒定律( Tesler’s Law)

20世纪80年代中期,Larry Tesler认为用户如何使用应用程序和应用程序本身同样重要。

浅谈交互设计的七大定律

每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。

让一位工程师花费额外的一周时间去减少软件程序的使用难度,还是应该让数以百万计的用户花费额外的一分钟来克服这一困难,你怎么选?

 

奥卡姆剃刀原理(Occam’s Razor)

14世纪逻辑学家、圣方济各会修士奥卡姆的威廉(Williamof Occam,约1285年至1349年)提出

如无必要,勿增实体

 

日本最大的化妆品公司收到客户抱怨,买来的肥皂盒里面是空的。于是他们为了预防生产线再次发生这样的事情,工程师想尽办法发明了一台X光监视器去透视每一台出货的肥皂盒。同样的问题也发生在另一家小公司,他们的解决方法是买一台强力工业用电扇去吹每个肥皂盒,被吹走的便是没放肥皂的空盒。同样的事情,采用的是两种截然不同的办法,你认为哪个更好呢?

 

万事万物应该尽量简单,而不是更简单。

01 精兵简政,不断简化组织结构

02 关注组织核心价值,资源集中于专长

03 简化流程,避免不必要的文书作业

聊及此,我思及《简约至上》,组织、删除、转移、隐藏,会发现大家反复探讨研究的问题,其实根本同源。

 

为什么我们要去做这些看似很学术的探究?

我这样理解

当我们开始一个产品设计,感到无从下手的时候,他们或许能给我指出一个尝试的方向;

当我们脑海浮现诸多方案,感到有些犹疑的时候,他们或许能给我提出一个参考的检验标准;

当我们看到别人好的设计,感到惊叹不已的时候,我们知其然亦知其所以然;

当我们提出设计方案,我们深知,这是我们多方探究,权衡取舍间,给出的当下最优的提案!

文末依例广告走一波~

大家乘坐长途的交通工具的时候都会带些什么吃?

浅谈交互设计的七大定律

窃以为速食小火锅秒杀一切泡面盒饭,详戳原文


阳历年已是新年,阴历年仍是辞旧迎新之际

祝愿我们每一个微小的生活愿望都能达成,想吃的时候有的吃,想被爱的时候有人来爱~

浅谈交互设计的七大定律 浅谈交互设计的七大定律

依然欢迎各位加arya微信,聊聊生活有趣事儿~

文章参考原文

设计法则: Fitts’ Law / 菲茨定律(费茨法则)

https://www.jianshu.com/p/36b610bac7a2

交互设计七大定律之复杂守恒定律

https://www.iamue.com/8916

生活中的定律——奥卡姆剃刀定律

https://www.mifengtd.cn/articles/occam-razor-life-tips.html

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

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

相关推荐

  • 从了解用户的注意力开始,创造更优秀的用户体验

    作者:Norbi Gaal译者:优设网-陈子木链接:https://www.uisdc.com/introduction-to-human-attention这是一篇源自心理学家和 UX设计师的关于人类注意力研究的文章。在产品团队中,用户体验设计师的工作是输出高可用性、易用性的可交互数字产品。当我们在设计这些产品的时候,我们花费了大量的时间来探索不同的研究方法,了解不同用户的行为、习惯和需求。对于绝大多数的用户而言,在行为模式和心理结构...

    2018-04-07
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • 交互设计完全学习指南

    交互设计起源于网站和平面设计,但已成长为单独的一个领域。工作内容不仅仅有文本和图片,交互设计现在负责创造屏幕上用户可能会划动、点击、按压或输入的每一个元素,简而言之,就是体验的互动。这篇文章为对交互设计感兴趣的人提供了几个好的点可以开始行动。为了这个目的,我们简要的介绍了交互设计的历史、指导原则、值得注意的贡献者和与这个极具吸引力的学科相关的工具。即使你已经是一个交互设计师,阅读下这篇文章然后在下方评论区分享你的想法吧!目录什么是交互设...

    微信热点 2018-05-06
  • 在Sketch中直接画流程图?现在你可以梦想成真了

    静电说:许多小伙伴对Sketch的期许是更多的,他们不仅希望Sketch是一个绘图工具,更希望它能变成一个交互工具,一个动效设计工具。比如这样一个需求:“在Sketch中画流程图箭头”,之前是不可以的,但插件为我们带来了无限可能性。今天静电就要来介绍这款User Flows插件。User Flows可以来创建图层到页面(Artboard)之间的连线,也可以用它来导出设计流程图,User Flows提供多种语言选择,为我们提供了不少方便。...

    2018-04-17
  • 用户体验五要素

    01战略层什么是用户体验:用户在使用产品过程中建立起来的一种纯主观感受。用户体验的重要性:给用户一个积极、高效的体验,他们会持续使用你的产品,产品满足用户某方面的需求并来盈利,帮助人们提高生活质量,提高工作效率,改善人际关系,等等。五要素:战略层、范围层、结构层、框架层、表现层用户体验要素的作用:要素之间相互作用完成任务,创建一个总体的用户体验设计。适用场景:设计:战略层→范围层→结构层→框架层→表现层用户体验:表现层→框架层→结构层→...

    2018-02-06
  • 移动端图片阅读—交互设计分析

    ↑点击上方蓝字,加个关注吧~↑今天老冰给大家分享一个移动端图片浏览的交互方式这个APP的阅读教程中,一共介绍了四种交互方式,左右滑动翻页浏览,上下滑动阅读更多,下拉放大图片,侧划查看时间线以往资讯。在这里并没有介绍左滑,有人问,左右滑动不就是左滑吗?其实,并不是,当你位于第一张图片时,也就是现在左滑已经没有内容了,此时你的左滑便有了刷新的作用,不同于其他(很多app刷新都是下拉刷新),这也是值得称赞的地方,它通过自己的交互思维,产生了自...

    2018-01-30
  • 全面提升用户体验,海尔卫玺首个智慧浴室体验店盛大开业!

    随着“智慧家庭”的概念不断深入人心。在智慧浴室空间领域,与以往用户单一追求产品的实用性相比,如今用户更倾向于将浴室打造成一个智能化、人性化的空间。基于用户对美好智慧生活的需求,海尔卫玺首个智慧浴室体验店于4月28日在上海盛大开业。开业地址:上海市浦东新区浦三路1515号同福易家丽6号楼2-108海尔卫浴专卖店卫玺智慧浴室体验店咨询热线:(021)50102530海尔卫玺智能马桶盖全系列闪耀亮相自上市以来,海尔卫玺智能马桶盖以高水准的品质...

    2018-05-04
  • 从地方性视角谈民宿的定位(二): 找到有趣而唯一的内核

    ▲点击关注我们,挖掘土壤的内涵近些年来,随着旅游的快速发展尤其是大众旅游市场的迅速兴起,旅游与地方的关系引发越来越多的关注和讨论。“地方性”一方面作为旅游目的地吸引力的内核被重视,另一方面又因其趋于淡化而引起对地方可持续发展的担忧和对旅游发展的批判。▋什么是“地方性”?事实上,地方性不是绝对的现实,而是话语与知识生产的过程。全球化进程必将是均质化与地方性凸显相互伴生的过程。虽然在全球化背景下,旅游产业的发展由于多种要素的作用,会带来社会...

    2018-03-10
  • UED新刊 | 承——中国院方案组二十周年

    📌编辑| F.我觉得记录或者回忆方案组这件事……如果说有意义的话,它不应该仅仅是哥几个的一段往事,而是可能还带有某种其他的价值,可以为我们的同行展现中国建筑发展当中的一个小的片段。——崔    愷《城市·环境·设计》UED108期“承——中国院方案组二十周年”专辑现已发售更多互动福利详见文末扫描文末二维码即可购买新刊导读1997 年,当时还是建设部建筑设计研究院(下称建设部院)的中国建筑设计院(下称中国院),由时任总建筑师和副院长的崔愷...

    2018-02-07
  • VR交互设计

    大家好!洋仔我又来了,上篇文章群爷详细的介绍了什么是VR以及VR需要的条件,不知道大家对于VR有没有一个深刻的了解呢?此图为转载图片为了完成这篇总结性的文章,你们的洋仔我又是看了好多篇文章,因为VR这个需要有各种各样的设备支持,所以呢,我也是去尝试了几个VR类的游戏,上周去了医博展,正好群爷也是展方,趁着这个机会,让群爷又带我体验了一把AR和VR在医疗方面的用途。那VR的交互设计到底是怎样的呢?(VR切水果)此图为转载图片首先,VR交互...

    2018-04-21