• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 实例解析「神奇数字7±2法则」在设计中的应用

实例解析「神奇数字7±2法则」在设计中的应用

作者:熊猫设计院 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计方法,设计案例,设计法则等相关知识,熊猫设计院希望在学习及工作中可以帮助到您

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

一、神奇数字 7±2 法则简介

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

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

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

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

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

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

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

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

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

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

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

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

三、写在最后

以上就是我对于「神奇数字7±2法则」的理解以及其在日常设计中的用法,希望对大家有点启发,同时欢迎大家与我们进行交流探讨。

欢迎关注作者微信公众号:「熊猫设计院」

「设计法则系列好文」

  • 《那些很熟悉但又叫不出名字的设计法则:功能可供性》
  • 《那些很熟悉但又叫不出名字的设计法则:冯·雷斯托夫效应》
  • 《那些很熟悉但又叫不出名字的设计法则之「系列位置效应」》
  • 《那些很熟悉但又叫不出名字的设计法则:希克定律》
  • 《那些很熟悉但又叫不出名字的设计法则:形式服从功能》
  • 《那些很熟悉但又不知怎么用的设计法则:80/20法则》
  • 《那些很熟悉但又叫不出名字的设计法则:倒金字塔法则》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23为什么你的动效特别酷炫,但一直不能落地?(附解决思路)
  • 2018-08-23YouTube 终于换Logo啦!来看背后的设计故事!
  • 2018-08-23扁平风格的问题在哪?来看这个分析!
  • 2018-08-23接地气!设计师和需求方高效沟通的5种技巧
  • 2018-08-23想要搞定网页首图设计,这7个技巧帮你做得更好
  • 2017-08-06怎样设计网页?怎样制作网页?
  • 2018-08-23腾讯出品!设计师辅技手册之项目同步管理法
  • 2018-08-23高手的经验总结!如何自学平面设计?
  • 2017-08-06button带一个灰色的边框很难看如何去掉
  • 2017-08-06合理使用h1,h2,h3标签

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Google对话式交互规范指南(五):设计走查清单
    • 腾讯干货!如何从用户体验设计角度提升产品的安全感?
    • 想用设计化腐朽为神奇,你得先想明白这10个问题
    • 除了阿里的鲁班系统,还有哪些厉害的人工智能设计神器?
    • 豆瓣9.0分的《我不是药神》,海报也是超高分!
    • 作品不够精致?可能你没有注意这5个细节
    • 学会宜家效应,给你一个全新的设计思维!
    • 用AE做的动效,都能在App中实现了?
    • 这些年,让人眼前一亮的网红文案
    • 这5种成熟的导航设计模式,可以为用户体验加分

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有