浅谈交互设计的七大定律

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

相关推荐

  • 用通俗的方式告诉你什么是交互设计。

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-03
  • 案例分析|一次消灭产品文档的实践探索

    作者:Dougee全文共 2120 字 5 图,阅读需要 5 分钟———— / BEGIN / ————在刚入职眼前这一份工作的时候,CTO就对产品组提出了新的要求:以后不用再另外输出产品文档,直接在原型上标注就可以了,而且以后要输出动态原型。先介绍一下我本人的情况:产品经验2年,对于Axure的交互设计有一定实践经验,但从来没有想过把动态的原型与产品说明结合来表达需求。对于CTO的决定,我想了一下,大概是出于以下三点原因:太多文件数量...

    2018-03-27
  • Sketchfab可在引擎内直接搜索3D模型,太方便了!

    点击上方蓝字CG世界关注CG我们“ 感知CG · 感触创意 · 感受艺术 · 感悟心灵 ”中国最具影响力CG领域自媒体Sketchfab为其在线模型共享平台发布了新的下载API,使开发人员能够将Sketchfab内容直接导入其他应用程序或游戏引擎中。Sketchfab是一个集发布,分享,发现,购买和销售为一体的3D,VR和AR内容的平台。 提供基于WebGL和WebVR技术的查看器,允许在网络上显示3D模型,以便可以在任何移动浏览器,桌...

    2018-03-31
  • 稳健中求发展,中普集团兼顾合规安全与用户体验

    互联网金融行业在中国发展已有十余年,金融市场几经波折后进入合规发展阶段,2018年可谓是监管最为严格的一年,优胜劣汰,有实力的平台纷纷积极拥抱监管,合规运营。中普集团作为科技金融的重要践行者和普惠金融的倡导者,一直坚持“合规”运营这一核心宗旨,自成立起就坚持依法合规,诚信为本,全心全意为用户和社会着想。从2017年的金融工作会议召开以后,合规备案是整个行业最为关心的问题,也是各大平台稳健发展的核心要务。中普集团认为,现阶段平台除了要积极...

    2018-04-07
  • 交互设计测试评估

    - END-作者  Rachel Xu欢迎将文章分享至朋友圈,拒绝转载~VUI进化论达尔文老爷爷说,你的语音交互设计该进化了~长按指纹 > 识别图中二维码 > 添加关注不关注,怎么进化~

    2018-04-18
  • 微信交互设计

    微信交互设计看点01一:交互设计(Interaction Design简称ID)在使用网站(软件、产品、各种服务)的时候,使用过程中的感觉就是一种交互体验。情感化交互设计意义:人机交互的发展趋势,会让用户感到更加亲切,自然.体现:交互界面(视觉),交互功能特质(感情),交互操作方式(惊喜)二:温暖感诉求(孤独和希望的对比||现实和理想的对比)登录页面====用心经营,寻找温暖感发现页面(朋友圈、扫一扫、摇一摇、附近的人)简单感诉求联系老...

    2018-03-17
  • 交互设计怎么入门呢?

    经常会有童鞋来问我:“交互设计如何入门?工业设计转行做交互设计的门槛高吗?用户体验和交互设计的区别是什么?”工业设计转行做交互的门槛并不高,就像工业设计需要考虑用户和实体产品之间的互动一样,交互设计更多的是考虑用户与界面之间的交互,只是换一个载体,其理论体系挺相似的。设计技能并不能弥补设计思维上的欠缺,技能只是一种表达方式,而Design Thinking才是最为核心的价值。基本概念浏览招聘网站上的讯息,就会发现UED,UX,UI等不同...

    2018-03-23
  • 来!说一个影响用户体验的网贷“非典型”案例

    点击上方文字“Fintech首席体验官”关注最在乎你体验的公众号这是一个体验至上的时代,无体验,非产品。今天的推送选择了最近在新金融圈,因体验问题而引发的一个“非典型”案例,或许可以作为大家在追求合规过程中的一个警示。先来聊个5毛钱的吧……无论在哪个行业,用户体验都一直被强调。毫不夸张地说,一次用户体验上的失误,给平台带来的伤害几乎是不可估量的。近期,深圳网贷平台人人聚财就遇到了这样的事儿。【背景资料】人人聚财成立于2011年,主营业务...

    2018-03-28
  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • 交互设计可以区分出一个好的产品和一个差的产品——「得米Micah」

    这是 Bestony 推荐给你的第141个公众号基础信息公众号名称: 得米Micah公众号类型:文章型订阅号公众号ID:MicahDesign更新频次:不定期更新简介今天为大家分享的公众号来自一个交互设计师 Micah 。搞互联网的或多或少都听过这个岗位,我在网易待过,也曾经为外包公司干活,也为初创企业作过技术服务,很多时候,不同产品的区别最大的点可能便是在于交互设计。小公司或外包公司会有设计师,但是是我们所说的「视觉设计师」,而大公司...

    2018-03-15