交互设计七大定律上

      “除非有更好的选择，否则就遵从标准”，这是交互设计之父阿兰·库珀说过的。在交互设计领域，有些法则是从用户的行为逻辑中总结出来的，掌握这些法则能让我们高效的完成自己的设计。因为讲的比较仔细，所以会分为上下两篇展开记录。本篇主要记录下菲茨定律、席克定律和神奇数字 7±2 法则。

菲茨定律

      从起始位置到最终目标的距离由到目标的距离和目标的大小决定。

      菲茨定律是指从起始位置到最终目标所需要的时间是由到目标的距离（也就是图片中的 d)和目标的大小（S）决定的。所以我们得出两个结论：

• 目标越小，就越难点中，目标越大，完成点击的速度越快。
• 目标离的越远，到达就越费劲。目标越近，完成点击的时间越短

菲茨定律在交互上的启示

1.按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作

2.出现在用户正在操作的对象旁边的菜单，也就是我们常见的右键菜单比下拉菜单或工具栏可以被打开的更快，因为不需要移动到屏幕的其他位置

3.因为边角是巨大的目标，它们无限高或无限宽，但是你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面

菲茨定律的实际应用

按钮等可点击区域在合理的范围之内越大越容易点击

      比如淘宝和中国银行的手机网页端的登录页面。左边淘宝登录界面的信息输入区域很明显比右边中国银行登录界面信息输入区域相互之间的距离和输入面积更大一点，在视觉及输入体验上面，淘宝也要比中国银行的好很多。再看两个页面的登录按钮，右边中国银行界面的按钮视觉上很小，而且距离上方验证码输入框的距离很近，这样的按钮不仅不好点击还容易产生误操作。相对而言，左图淘宝页面的按钮间距和大小就很合适了，输入和点击体验比右图好很多。

      再看一下小黄车和 hello 单车首页扫码按钮。放在同样的位置，单看按钮大小，小黄车的明显要比小蓝单车的大很多在使用过程中，个人觉得小黄车的操作按钮比 hello 单车的要舒服很多。不需要太聚焦就可以很轻松的点到。

出现在用户正在操作对象旁边的控制菜单（右键菜单）可以被更快的打开

      这个分别是安卓及 iOS 长按应用图标出现的快捷操作菜单栏，使用其中的功能不需要再反复打开 app,只需要长按就可以快捷打开，这样极大的提升了使用 APP 主要功能的效率。

      这个是在 PC 端的应用。我们在 Mac 系统或者 Windows 系统桌面上对于文件夹的操作，通常是通过鼠标右键点击方式，在出现的操作菜单中对其进行相应的操作，非常方便。

屏幕的边和角很适合放置像菜单栏和按钮这样的元素

      这个启示在 PC 端的应用是最经典的。Windows 桌面的默认导航栏是在固定底部的，而 Mac 导航的位置则是在顶部和底部都有。都是固定在屏幕的边缘。就算我们去设计导航栏的位置时，都是停留在屏幕边缘四周，不会出现在屏幕中央的位置。

      这是 BAT 的 APP 首页，最重要导航栏都是放在页面底部的。包括所有做的好的 APP 都是在底部的。这不是恰巧，而是有理据的在移动的设备上，手指就是我们的鼠标。和菲茨定律有所不同，它运用到的是拇指可达性法则。

拇指可达性法则

      大多数用户都用一只手来使用手机。拇指就像用户的鼠标，但有局限性。屏幕上有些地方是拇指无法触及的，这些区域的面积将由用户的手指长度和手机屏幕的大小来决定。屏幕的顶部是拇指最难触达的区域。苹果在设计的时候就很注意这些交互的细节。所以说我们把菜单放在顶部会让用户更难浏览你的界面，但用户使用菜单的频率非常高。我们有必要把优先级最高的菜单放在拇指触手可及的地方，这样用户就能更快地完成他们的任务。而且如果把菜单放在最上面会迫使用户调整手机位置，或者用另一只手进行导航。这都需要进行额外的物理操作，并减慢任务时间。很多共享单车最重要的功能就是扫码骑车。我们可以发现对于他们来说这个最重要的按钮全部都放置在舒适区中，这个是很有道理的。

席克定律

      如上图所示，x 轴代表选择的数量，y 轴代表做出反应所需要的时间。席克定律指的就是：一个人面临的选择越多，需要作出决定的时间就越长。

席克定律在交互上的启示

设计中给用户尽量少的选择，减轻用户的决策成本

席克定律的实际应用

设计中给用户尽量少的选择

      我们在使用网站或者移动端产品时，经常会遇到很多操作弹窗。就像图中的两个例子，基本上弹窗的操作选项只会有两个，二选一的成本，对于用户来讲很简单方便，选择成本最小

      当用户初次下载使用钉钉或者微信 APP 的时候，在进入正常的使用之前，用户会看到这个页面。我们看下面两个截图，页面上的操作按钮只有两个，一个登录按钮和一个注册按钮，这样的话，用户就很清晰接下来自己要干什么了

神奇的 7±2 法则

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

神奇的 7±2 法则在交互上的启示

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

2.如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段

3.把大块整段的信息分割成各个小段，并显著标记每个信息段的主体

神奇的 7±2 法则的实际应用

PC 端导航或选项卡尽量不要超过 9 个，APP 应用的选项卡尽量不要超过 5 个

      比如苹果、人人都是产品经理及 UI 中国官网导航栏,我们看到这三个主流网站的导航栏模块都没有超过 9 个，这样做的好处在于让用户对于网站的内容一目了然，更加快捷。

      说完 PC 的，我们说下移动端的，在使用 APP 的时候，我们都会用到软件的底部导航区域。会发现任何软件的底部导航都不会超过 5 个，就像图中的百度，微信及 QQ 界面一样，底部导航也没有超过五个的。这个就运用到了神奇的 7±2 法则。就比如我们要去微信看朋友圈。我们大脑下意识就会去点击 我里面的朋友圈。不会再一个个的去看完选项卡的内容。因为我们大脑已经大致记住了各个导航的位置。如果导航栏实在多的情况下呢，我们来看看解决方法。

如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段

      比如天猫商城和亚马逊网站的商品分类选项卡,他们的导航是分为多个层级的。如果以后遇到导航的内容非常多的话，我们就可以将它整合归类来分层级收纳。就像天猫和亚马逊官网对于商品分类的处理方式一样，使用爷爷爸爸孩子的层级递进方式来归类展示商品。

      我们再来看下京东及朴朴 APP 的商品分类模块界面，两个产品的商品分类布局形式很相似，都是用了选项卡的方式来分类商品，他们层级明确，用户如果想买哈密瓜就是水果里面找，这样就相应的提升了用户找寻商品的效率。

把大块整段的信息分割成各个小段，并显著标记每个信息段的主体

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

      比如支付宝和微信银行卡界面卡号信息的展示方式。无论是支付宝还是微信甚至是大多数银行，卡号信息都采用了分段的方式，让我们便于记忆。来介绍，而且每个模块都要自己的标题，再加上段落之间的空间留白，使得此段信息看起来清晰明了。用户可以一目了然的了解每段的主题