交互七大定律 (1)

设计不同于艺术，艺术可以是天马行空，比较感性。但设计，尤其是UI交互更重的是理性

交互设计之父阿兰库伯有句为人熟知的名言：除非有更好的选择，否则就要遵从标准

在交互设计领域有很多经过了时间的验证最终被认作了标准

比如我们今天要讲的《设计七大定律》，掌握这些法则能让我们迅速有效的完成自己的设计

**文章较长本期仅分享一部分，下期继续分享

一. 菲茨定律

1.定律简介

定律内容：从一个起始位置移动到一个最终目标所需的时间有两个参数来决定，到目标的距离和目标的大小（上图中的 D 和 W ）,用数学公式表达为时间 T= a + b log2 ( D/W + 1)。（其实这个公式无需理解）

他由菲茨于1954年提出，用来预测从任一点叨叨目标中心位置所需要时间的数学模型，在人际交互（HCI）和设计领域的印象最为广泛和深远。

2.设计中的应用

2.1 /  按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作。误操作的概率很大

案例一：比如米家APP和赤峰人力资源的手机网页端的登录页面

从上图来看，

输入内容所占用的面积：左图  >  右图

输入区域之间的距离：左图  >  右图

页面的登录按钮视觉：左图  >  右图

登录按钮点击误操作：左图  < 右图

综上所述：左侧页面按钮间的距离，输入框的大小都很合适，输入和点击的体验上面，左图完爆右图

2.2 /  屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。这样的逻辑在手机APP上同样适用

通过上面三个界面，我们看到它们本身发布内容的按钮都放置在了屏幕的右下角处，这样的设计正是运用了上面的要点，使得用户的操作难度和成本降低，提升了用户体验。同样也符合大家右手握持便于单手操作的人本理念。

2.3 /  即可响应/呼出菜单，出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。

这样的交互设计极大的提升了使用APP的效率，方便易用。

这种交互方式在电脑上也应用广泛

二. 希克定律（Hick’s Law ）

1.定律简介

希克定律指的是：一个人面临的选择越多，所需要作出决定的时间就越长。

用数学公式表达为：RT=a+blog2(n)。其中，RT表示反应时间；a表示跟做决定无关的总时间；b表示根据对选项认知的处理时间实证衍生出的常数（这个例子对人来说约是0.155s）；n表示同样可能的选项数字。比如，假设需要两秒测知警铃，了解其含义，接着假设按下五个按钮中的一个按钮，可以解决触动警铃的状况，那么反应时间就是RT=a(2s)+0.155s(log2(5))=2.36s。

2.设计中的应用

不要浪费用户的时间 --- 设计中给用户尽量少的选择，减轻用户的决策成本。

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

三. 神奇数字 7±2 法则

1. 法则简介

7 ± 2法则正式提出于美国心理学家George A. Miller1956年发布的论文《神奇的数字7加减2：我们加工信息能力的某些限制》。1956年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有7(±2)项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用交互设计上，

2. 设计中的应用

手机APP的 底部/顶部 导航一般不会超过 5 个。

网页端门户网站的 顶部 导航一般不会超过 9 个。

如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段，并注意其深广度的平衡。例如：站酷网的 “点点点”。  百度搜索的 “更多产品”

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

语言版本介绍模块把一整段语言，分成四个模块的信息来介绍，而且每个模块都要自己的标题，再加上段落之间的空间留白，使得此段信息看起来清晰明了。

四. 接近法则

1. 法则简介

格式塔理论自1912年由韦特海墨（Ｍ，Wetheimer）提出，在德国得到迅速发展。格式塔理论是心理学中为数不多的理性主义理论之一。格式塔学派以某些相当抽象的，与知觉和思维的性质及心理经验的结构有关的观念解释了熟悉的观察资料。根据格式塔（Gestalt）心理学：当对象离得太近的时候，意识会认为它们是相关的。

2. 设计中的应用

将相似的、有关联的信息尽量摆在一起，不要让用户迷茫，要他在潜意识里就知道在哪里能找到自己想要的信息。

在今日头条和爱奇艺视频的的信息条目中，我们一眼都能发现，标题和图片是表示的同一类的信息，因为它们是放在一起，具有相关性。

以上内容便是本文的上半部分内容，包含了《交互设计七大定律》中的四个，剩下的三大定律下期为大家奉上。

小编码字辛苦，点个

“赞”吧！