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

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

相关推荐

  • 移动端图片阅读—交互设计分析

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

    2018-01-30
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • 异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08
  • 用格式塔原理增强用户体验

    来源:简书用户 cherri二哈(授权发布)心理学和设计包与用户体验密不可分。每当我们的目标是解决需求的时候,我们的专业就需要有同理心。随着我继续深入研究心理学进入设计领域时,我偶然发现了格式塔原则。什么是格式塔原则?格式塔心理学是一种将人的思想和行为视为一个整体的思维学派。当试图理解我们周围的世界时,格式塔心理学建议我们不要只关注每一个小部分。相反,我们的头脑倾向于将对象视为更大整体的一部分,并将其视为更复杂的系统元素。这个心理学院在...

    2018-04-11
  • 掌握这10招,再也不愁公众号涨粉了!

    都说现在运营公众号非常难涨粉非常难别担心今天介绍10种强大的运营工具/技巧给你帮你解决下面这些问题帐号涨粉、爆文技巧、文章排版图片设计、数据监测、海报营销1运营公举小磊磊免费学习新媒体运营知识年收入上百万的全栈新媒体运营,全平台有10万新媒体运营关注,成百上千个自媒体大佬都是他的粉丝。公众号上有180万字的原创运营知识,教你写文章、涨粉、赚钱、提升运营能力。并且把新媒体知识梳理成了标准化的知识体系,让所有人都能免费学会公众号运营。长按识...

    2018-04-03
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • Axure8.0展开收起

    设置菜单展开收起效果,且联动箭头朝上朝下动效。收起状态:箭头朝下,内容收起。展开状态:箭头朝上,内容展开。【步骤】1)设置展开内容与箭头为两个动态面板,命名2)点击事件设在点击菜单栏,同一个事件下控制两个面板状态。内容面板:箭头面板:设置旋转效果。点击菜单栏:点击运行即可。

    2018-03-15
  • 【实习精选】网易、中信、博彦科技、雅培、太平洋证券等名企实习汇总(04-02)

    序列               实习单位工作地1德国电信咨询北京2腾讯北京3中信研究部北京4东亚银行(中国)有限公司上海5雅培中国上海 嘉兴6太平洋证券上海7广州越秀金融控股集团有限公司广州8广东南方都市报经营有限公司广州9国金证券股份有限公司深圳10博彦科技股份有限公司西安11网易雷火游戏部杭州12科锐国际大连01德国电信咨询一、企业和团队介绍德国电信国际咨询公司(DETECON),德国电信集团的全资子公司,是全球领先的ICT行业专...

    2018-04-08
  • 做完这5次Axure实操,0基础不仅做出高保真,还能提升产品交互

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,2000多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)产品思维和交互贯穿全程,学完不仅能画出高保真,同时告别画图经理。具体来看,通过6...

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

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

    2018-03-27