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

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

相关推荐

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

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

    2018-01-30
  • 一文看清过去一年电商用户体验怎么样?

    导读:过去1年电商在对待消费者方面,有没有尽力?它们都干了哪些事?日前,电子商务研究中心发布的《2017年度中国电子商务用户体验与投诉监测报告》显示,2017年通过在线递交、电话、邮件、微信、微博等多种投诉渠道受理的投诉案件数同比增长48.02%,下半年受到电商各大节日影响增速加快。据电子商务消费纠纷调解平台监测数据显示,2017年零售电商类投诉占全部投诉60.59%,比例最高;生活服务电商紧随其后,占据13.47%;跨境电商投诉占比为...

    2018-03-28
  • 818那些影响用户体验的创意

    作为创意经常不通过审核的一枚苦逼广告主,你一定经常看到以下拒绝原因:因模糊、变形,出现马赛克等原因导致无法识别,请优化。人物形象影响用户体验,如【动作不雅、衣服暴露、大头照】。文字包含【低俗、不良诱导、负面描述】等影响用户体验。……有没有觉得很委屈,很痛苦,很莫名其妙?作为苦逼的设计师,好不容易满足了甲方爸爸的变态要求,没想到又被更变态(划掉,正规)的腾讯社交广告审核拒绝了。概括一下,这些拒绝原因全部称为“影响用户体验”。那什么是影响用...

    2018-04-19
  • 提升用户体验的12大法器—《从点子到产品》读书笔记

    读了刘飞老师的《从点子到产品》书中关于用户体验的讲解,获益颇多。特此整理Mark一下,也分享给需要的童鞋~

    2018-04-26
  • UED 招聘,多个职位给你更多选择!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-03-05
  • 伦艺交互设计(MA)offer入手,工科出身、完全零基础的她是如何做到的

    对于零基础申请的同学来说,短时间内接触并掌握一个陌生的专业,既需要勇气,又需要决心。这是因为,科班出身的同学申请国外名校尚有难度,更何况是毫无专业基础的同学,过程中遭遇困难、挫折也可想而知。正因为申请难度大,如果能从其他同学的申请过程中吸取成功经验,规避问题,少走弯路,必然会有利于未来申请。本期,简清为同学们请到了拿下伦艺交互设计(Interaction Design Communication)专业offer的L同学,作为一名零基础申...

    2018-04-12
  • 程序员如何应对「给我弄个网站吧」的请求?

    点击上方“程序人生”,选择“置顶公众号”第一时间关注程序猿(媛)身边的故事编者按:昨天,我们在这篇《“你是程序员,帮我修个电脑吧” “不会,滚”》的文章中,发起了个投票。结果发现三个选项中,打败「修电脑」,位居榜首最令大家“抓狂”的选项,竟然是「我想要创业,你帮我建个网站吧,就像淘宝那样的,一定很好做吧」。一般,遇到此类情况,我们可以选择两种处理方式:第一种,直怼式。例如:“我给你1000块,你帮我做个淘宝,就和马云的淘宝一样的” “你...

    2018-04-08
  • 又是高分!北京林业大学交互设计专业课143分复习方法分享

    又一个高分!北京林业大学交互设计专业课143分复习方法分享-孙跃桐我决定考研大概是在16年的9月份吧,因为决定的时间比较早,我以为我准备的时间很充足。真正开始准备是在17年我先开始报了新东方的英语政治课,想先将公共课的基础打牢,在后期复习专业课的时候会有更多的精力于是我将上半年的精力全部都用在学习公共课上面。想在9月份招生简章出来之后我就开始专心复习专业课。但是当九月份招生简章出来之后,我就开始慌了。我本身想考的就是本校之前也问过考研的...

    2018-04-22
  • 【原创】交互设计七大标准(7) 奥卡姆剃刀定律(简单有效原理)

    奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)是由14世纪逻辑学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”▲ 奥卡姆剃刀原理如果你有两个类似的解决方案,选择最简单的。这些所提到其实就是驭繁于简。把事情变复杂...

    2018-02-22
  • 微信交互设计

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

    2018-03-17