干货分享 | 交互领域不可不知的设计法则

本文转载自“熊猫设计院(ID:MUXDesign)”,已获得作者授权,未经许可禁止转载。前言:交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用。01希克定律(Hick’s Law )简介希克定律指的是:一个人面临的选择...

干货分享 | 交互领域不可不知的设计法则

本文转载自“熊猫设计院(ID:MUXDesign)”,已获得作者授权,未经许可禁止转载。


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

01

干货分享 | 交互领域不可不知的设计法则希克定律(Hick’s Law )简介

希克定律指的是:一个人面临的选择越多,所需要作出决定的时间就越长。当选项增加时,人们下决定的时间就会增加。利用这个法则,可以测出在多重选择下,人们需要多少时间才能才能做出決定。


对于单纯的刺激-回应(stimulus-response task) 类型的简单决定,席克法则特別有效。举例来说:看到“A”就按“1”,看到“B”就按“2”就是这种类型。当任务的复杂性增加时,席克法则的适用性就会降低。


用数学公式表达为:RT=a+blog2(n),其中,RT表示反应时间,a表示跟做决定无关的总时间,b表示根据对选项认知的处理时间实证衍生出的常数(这个例子对人来说约是0.155s),n表示同样可能的选项数字。

比如,假设需要两秒测知警铃、了解其含义,接着假设按下五个按钮中的一个按钮,可以解决触动警铃的状况,那么反应时间就是RT=a(2s)+0.155s(log2(5))=2.36s。

干货分享 | 交互领域不可不知的设计法则

希克定律(Hick’s Law )在设计中的应用

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


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

干货分享 | 交互领域不可不知的设计法则


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

干货分享 | 交互领域不可不知的设计法则

02

干货分享 | 交互领域不可不知的设计法则神奇数字7±2法则简介


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


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

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


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


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

干货分享 | 交互领域不可不知的设计法则


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

干货分享 | 交互领域不可不知的设计法则


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


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

干货分享 | 交互领域不可不知的设计法则


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

干货分享 | 交互领域不可不知的设计法则


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


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

干货分享 | 交互领域不可不知的设计法则


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

干货分享 | 交互领域不可不知的设计法则

03

干货分享 | 交互领域不可不知的设计法则

接近原则简介


格式塔理论自1912年由韦特海墨(M,Wetheimer)提出后,在德国得到迅速发展。由于苛勒(K,Kohler)和考夫卡(K,Koffka)的访美以及他们的著作被翻译成英文,这种新的理论引起了美国心理学家的注意。

格式塔理论是心理学中为数不多的理性主义理论之一。格式塔学派以某些相当抽象的,与知觉和思维的性质及心理经验的结构有关的观念解释了熟悉的观察资料。

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

干货分享 | 交互领域不可不知的设计法则

接近原则在设计中的应用

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

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

干货分享 | 交互领域不可不知的设计法则


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

干货分享 | 交互领域不可不知的设计法则


写在最后


上就是我对于设计法则的理解以及其在日常设计中的用法,希望对大家有点启发,同时欢迎大家与我们进行交流探讨,谢谢,笔芯~~


干货分享 | 交互领域不可不知的设计法则

注:本篇图文版权归设计熊猫院所有,未经授权禁止转载。

干货分享 | 交互领域不可不知的设计法则

干货分享 | 交互领域不可不知的设计法则
戳原文,更有料!

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

(0)
交互精选交互精选
上一篇 2018-04-08
下一篇 2018-04-08

相关推荐

  • 交互设计牛校排行榜 | 纽约大学ITP研究生项目

    Create Your Difference. by CYDWHO ARE YOU?Do you love biology but also love your art classes你是否热爱生物,也沉醉于艺术and want to merge the two所以想把这两者融入Do you love programming but also like to make things你是否能编程序,也想做出真实的东西Are you int...

    2018-05-06
  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 你离互联网产品经理,只差一句自我肯定!

    从2014年开始,伴随着越来越多产品人转岗心路历程的分享,产品壹佰为此专门开辟专栏,记录了他们这一段学习路程中的点点滴滴。他们之中,有对未来茫然无措的大学生、不甘于现状的互联网从业者、郁郁不得志的传统行业人、孤立无援的产品新人以及举步维艰的创业者……在他们的诉说中,有着转岗前的不安、惶恐,也有刚转岗成功的喜悦、激动,更有成为产品经理后自我知识的输出!分享!如今,这些记录成长历程的人儿们如疾风般快速的蜕变着,梦想实现,更幸运的是,其中的出...

    微信热点 2018-03-10
  • 依靠强大品牌影响力,注重“用户体验”,“3000家企业定制酒计划”对白金酒意味着什么?

    在茅台集团白金酒公司的目标规划里,今年要选择1000家企业进行定制酒合作,未来3~5年要与3000家企业合作,打造“企业定制酒”这一细分市场的“当家品牌”。11月5日上午,华拓金服集团、神州长城股份有限公司、 永新华控股集团等数十家家国内知名企业与茅台集团白金酒公司签署战略合作协议,现场签约总额达近亿元,“定制酒计划”再迈出一步。直接面向企业需求这一细分市场,为企业打造专属的定制产品,满足其商务接待、宴请、礼赠等需求,白金酒公司确立了清...

    2018-02-01
  • 交互设计工作流程6步走

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn经常有人会问交互设计到底是做什么的?交互在工作中的流程是什么样子的?那么今天就来讲讲交互设计在工作项目中需要做哪些工作。这里结合笔者本身的个人经历,将交互工作流程总结为以下6点:1、发现问题这里的发现问题,主要是找到一些体验不合理或者未达到预期效果的地方。发现问题的方式有很多,在实际项目工作中,可能大部分的问题反馈来源于客服或者产品需求,这里交互更...

    2018-01-30
  • 【招募】图书管理员、UI交互设计、手机软件开发,快来报名!!

    ↗点击上方“海淀教堂”关注我们📖海淀教堂为丰富教牧同工的阅读生活,正在建立图书馆,欢迎有图书馆管理或工作经验并有感动的弟兄姊妹积极参与此项事工。报名地点:三楼侍奉室边瑞霞同工 18514656724💻因事工需要,海淀堂网络组现招募UI交互设计,手机软件开发等技术义工,欢迎有相关恩赐的弟兄姊妹咨询报名。报名地点:三楼侍奉室李维萧同工 17600071627欢迎有感动的弟兄姊妹们参与进来!等待您的加入呢!耶稣爱你!名关注这里Address:...

    2018-04-15
  • 语音交互中的“等待体验”研究

    文 | 叨叨来自雷锋网(leiphone-sz)的报道雷锋网按:本文来自百度人工智能交互设计院,通过实验的方式,研究了语音交互中用户对于智能音箱的“等待体验”。雷锋网编辑在不改变原意的基础上做了精编。回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然...

    2018-01-30
  • 重要交互设计原则

    不管是开发者还是交互设计师,每一位从业者都想要创造让自己自豪的产品。为了改善结果,两方人员一直在重新思考整个开发流程,要求有更好的工具、更好的指南、更高的权限。交互设计的强大力量不容置疑。它能让用户在工作、娱乐和交流之际,获得难忘、有效、简单,以及有益的体验。设计原则:1. 用户界面应该基于用户心理模型,而不是实现模型。2. 目标导向的交互设计反映了用户的心理模型。3.交互设计不是凭空猜测。4.不要让用户感觉自己愚笨。5. 界面设计的关...

    2018-03-01
  • Axure RP 7.0软件安装 激活 教程 百度网盘

    点击上方蓝字关注免费领取百度网盘超级会员等部分软件没有贴详细教程和网盘链接,可以给公众号留言发信息,也可加微信:qihai-77当你需要的软件我们没有发布时,可以给我们留言或者加微信:qihai-77反馈哦链接:https://pan.baidu.com/s/1KZcsl-SaEcjPzwvdYQn1oA密码:ws5m有任何需要安装的软件或问题可咨询微信客服:qihai-77链接失效可在公众号留言某某链接失效 或联系微信客服:qihai...

    2018-03-30
  • 用交互体验方式感受人类智慧结晶

    2017年9月26日,中国科技馆“华夏之光”展厅经过为时半年的更新改造后,将面向公众进行试运行,并于10月1日正式重新开放。“华夏之光”展厅位于中国科技馆主展厅一层,设有“中国古代的技术创新”、“中国古代的科学探索”、“华夏科技与世界文明的交流”三大主题分区,围绕不同主题,讲述中华民族在生存发展过程中不断创造与发明、探索与发现、交流与融合的科技故事。此次封厅改造是在原有展览的基础上进行的局部性升级换代。“华夏之光”展厅维持原有展览框架,...

    2018-01-30