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

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

一、神奇数字 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.uisdc.com