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

本文转载自“熊猫设计院(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

相关推荐

  • 实例剖析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。本文作者(熊猫小生)通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、雅各布·尼尔森(Jakob Nielsen)简介雅各布·尼尔森(Ja...

    2018-01-30
  • 设计一个快速提升用户体验度的网站架构

    点击上方“公众号”可以订阅哦渔哥服务☆ 网站建设:网站结构、网站功能、关键字策划、网站SEO、设计与开发。☆ 整合营销:品牌形象文案策划、产品销售概念策划、产品销售文案策划。☆ SEO优化:SEO排名优化、论坛营销、口碑营销、公关活动等病毒传播。☆ 托管服务:市场分析、受众分析、品牌与产品分析、全网整合营销推广。☆ 微信运营:微信公众号开发、朋友圈广告、微信运营活动、微商城搭建。☆ 定制培训:专业施教团队、完整课程体系、实际项目操作、低...

    2018-04-08
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • 干货|关于用户体验,你想知道的都在这里

    昨天,高高老师邀请了北师大本部三位学长学姐分享了心理学用户体验的相关知识以及职业发展的经验。三位主讲者分别是:如如学姐、喵喵学姐、大洲学长,都来自北师珠12级应用心理学系。问:用户体验(UX)到底是什么?答:其实行业内并没有统一说法,我觉得它作为一个动词来说可以指一项研究活动,通过用户体验的研究方法去探究用户在某个情境下的痛点或者是需求,然后再恰当地运用用户体验设计去满足他们的痛点和需求;而且人的需求总是随时间和时代的变化而变化,所以用...

    2018-04-01
  • 用户体验是紫光物联智能家居的第一要义

    智能家居成为一匹黑马,在这个互联网与物联网互联互通的时代,智能家居是否能够代表物联网,引领我们的居家生活走进一个新纪元呢?从用户出发,打造稳定易用的智能家居产品首先,智能家居产品目前正处于井喷阶段,发展是大势所趋。我们做的就是改善和提高我们的生活质量和生活方式。目前,大多数居民都处于一个快节奏的生活环境当中。在这个快节奏的生活中,方便、快捷、健康、环保变成了目前智能家居行业发展的主题。紫光物联多年致力于打造高标准、高品质的智能家居产品,...

    2018-05-04
  • 为增强产品的用户体验,UI设计师会做哪些工作

    近年来,人们越来越多地谈及用户体验,甚至将其视为互联网产品赢得市场的最关键因素。作为UI设计师,我们战斗在用户体验设计的一线,那么在实际工作中我们会通过哪些工作来提升产品的体验呢?下文给出了几点关于实际工作中提升产品用户体验的思考。我们在设计一个程序或者系统的时候,前提是保证产品定位及有目标用户群,保证产品是有用的,能连接不同的节点产生价值。如果一个程序没有用,那么对用户来讲就没有下载、使用的必要了。而当程序有用了之后,如果用户需要付出...

    2018-02-03
  • ArtCenter 2018交互设计本科详解

    交互设计无处不在,从手机应用到游戏,再到可穿戴设备和数字环境。交互设计领域正在经历着巨大的增长,市场对有经验的数字设计师的需求也在激增。专业简介ArtCenter在交互设计领域的丰富历史跨越了平面设计、交通设计、娱乐设计、工业设计和媒体设计等领域,毕业生现在在苹果、谷歌、微软和IDEO等公司担任领导职位。ArtCenter的前沿课程致力于创新。我们的学习过程强调核心方法、工具和过程,使学生在新技术出现的时候能继续前进。但这一课程并不全是...

    2018-05-07
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • 知识分享直播——用户体验招募

    如果你曾经沉迷直播,为喜欢的主播刷飞机火箭;如果你曾经将直播当作你学习的途径,获取信息;如果你对当下的直播平台设计有想法和建议;如果你希望在看直播的同时,不用送礼物,还能赚些小钱;如果。。。其实,没有这么多如果,只要你想参与到影响直播平台的用户体验设计的活动中,只要你不是直播的小白,那么请毫不犹豫地来参与我们的用户体验实验。我们会提供不低于50元人民币的报酬。01—研究课题在现行的直播用户界面的基础上,我们设计了一个辅助知识分享型主播及...

    2018-04-08
  • 部落窝教育微课首批年卡,每天一元钱,全年课程随意看

    部落窝教育微课直播间自年初上线到今天,短短三个月时间,我们精心打磨了25个专栏课程,受到了大家的广泛关注和喜爱。课程受欢迎程度可以从数字上得以体现:直播间共282.64万+人气,单次课程最高学员数达到了18536人学习。应铁粉们要求,“部落窝教育微课直播间” VIP年卡现已正式开通,更好的满足大家学习多个软件技能需求。1VIP年卡能学什么?VIP年卡有啥福利?A:部落窝微课现开通25个付费专栏,涉及到的软件视频课程有:Excel、Wor...

    2018-04-08