前端也要懂设计 - 交互设计

菲茨定律 Fitts' Law

费茨法则是一个人机交互以及人体工程学中人类活动的模型，它预测了快速移动到目标区域所需的时间是目标区域的距离和目标区域的大小的函数。费茨法则多用于表现指、点这个动作的概念模型，无论是用手或者手指进行物理接触，亦或是在电脑屏幕上用假想的设备（例如鼠标）进行虚拟的触碰。

数学公式简略为： T = f(D/S)

T是移动到目标区域所需的时间
D是距目标区域的距离
S是目标区域的大小

目标区域 S 的影响

被点击目标大小S越大，点击所需时间越短，即越容易点，因此对于目标区域有如下几种设计方式

放大点击区域；简单且直觉的应用方式。将整个屏幕作为点击的操作区域，是将点击区域放大到极致的结果。

利用时间维度：一些操作对象在时间上有先后或互斥的情况，且连续操作频繁，则可让其在被操作时放大，降低点击难度。

图片来源：决战平安京

“无限大”的边缘：由于屏幕边缘是屏幕内容无法超越的边界，因此对于放置在角落的操作区域来说，它们是一个“无限大”的触发区域。在含有拖拽行为的操作中应用效果明显；如Windows系统的开始键，绝大多数版本都放在左下角，并且鼠标往左下角拉到尽头一定可以点击到它，因为左下角是一个鼠标不可超越的边界。

点触距离 D 的影响

重要高频操作优先：主要针对移动端。屏幕交互上，由于主要用拇指进行操作，因此有“拇指原则”一说，即屏幕的交互对象的点击难易程度与其在屏幕上的位置和拇指自然状态的距离的关系，并由此衍生的交互难度分布图，如下图所示：

图片来源：决战平安京

将有前后逻辑联系的操作分组：在某些操作逻辑上有强联系时，例如在点击了按钮A之后有较高可能会点击按钮B，或者点击A之后会出现B，那么在空间和视觉上它们应该尽量接近，分为同一组，方便玩家在两个点击对象之间来回操作。该原则的应用应该建立在对操作逻辑的良好预测上。

希克定律 Hick's Law

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

用数学公式表达为：RT=a+blog2(n)

其中，RT表示反应时间；a表示跟做决定无关的总时间；b表示根据对选项认知的处理时间实证衍生出的常数（这个例子对人来说约是0.155s）；n表示同样可能的选项数字。

因此，在保证用户可以理解的前提下，需要尽可能的减少信息量，让用户快速做出判断

IOS 闹钟设计

淘宝首页改版

米勒定律 Miller's Law

从心理学的角度来看，人类处理信息的能力是有限度的。根据美国认知心理学家乔治·A·米勒(Miller，1956 年《神奇的数字：7±2：我们信息加工能力的局限》发表于《心理学评论》)的分析，人脑处理信息有一个魔法数字 7(正负 2)的限制，也就是说，人的大脑最多同时处理 5 到 9 个信息(chunks)。原因是短期记忆储存空间的限制，超过 9 个信息团，将会使得大脑出现错误的概率大大提高。

C端

支付宝的搜索框下面有 4 个常用功能，只要打开看到过一眼的用户，很快就记住了这 4 个功能是什么，再次使用时，瞬间触达。

当当“网络文学”模块中，将内容组织成了 5 个模块，包括榜单、特色推荐、特色专区、女频、男频，提升了用户寻找书籍的效率。

B端

在工作台设计中，通常建议卡片数量控制在 5-9 个，且重要指标靠前展示。

不论是表格上方的按钮数量，还是卡片右上角的按钮数量，还是表格数据行的操作按钮数量，等等，均建议直接显示的按钮数量控制在 5 个以内，超过的按钮置入“更多”。

接近法则（亲密性）

我们通常把位置相对靠近的事物当成一个整体，接近法则的权重非常大，大到可以抵消其他法则，比如为下方的圆形添加颜色，甚至改变形状，我们也会把接近的图形当成一个组

界面中的接近法则

相似的信息及功能类别进行分组，布局

同一组内的元素间距更小

间距的对比需要能够被清晰的感知到

防错原则

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。通过改变设计可以把过失降到最低。因此需要在用户出错之前就尽量避免错误的发生。

防错法则最早诞生于汽车制造领域，由日本工程师新乡重夫（丰田精益生产专家）于上世纪60年代提出了这个理念。

新乡当时正在解决一个丰田面临的问题：装配工人在组装转换器时经常忘记加装两个必须的弹簧。他的方案是重新设计转换器的装配流程，将之变成两个步骤。

在新的流程下，工人需要：

1 准备好两个需要加装的弹簧，放在一个指定位置

2 从指定位置取出弹簧，装配进转换器

虽然装配转换器的流程变长了，但是结果是错误率大大降低，意味着总体结果是产品平均质量提高了。