费茨定律如何指导界面设计

为什么有些按钮大有些按钮小？

为什么有些按钮靠得近，有些按钮需要离得远？

为什么不同场景下操作方式不一样？

关于这些问题不知道你有没有思考过，其实这些都可以用设计法则费茨定律来解释。接下来一起来了解什么是费茨定律？它是如何指导界面设计的，以及它在移动端界面中的应用这三个方面来说。

什么是费茨定律

费茨定律是人类运动的预测模型，主要用于人机交互和人体工程学。该法则预测光标/手指从一个起始位置移动到一个最终目标所需的时间（T）由到目标的距离（D）和目标的大小（W）所决定，用数学公式表达为时间 T =a + b log2 ( D /W  + 1 )。其中a、b是经验常数，a代表手指开始到停止的时间，b代表手指的移动速度。

举个生活中一个开灯的例子：

早期的开关只有一个手指大，每次开灯的时候都需要将手移动到开关上方，然后伸出手指调整到适合位置然后在按下。由于按钮小，在没开灯的时候你根本不知道它在哪里，需要不停的摸，所需时间就比较长。

后期大家意识到了这个问题，将开关按钮设计变大，人们操作时只需要将手移动到按钮上方，由于面积大不需要调整直接按下即可，所需时间就比较短。

如何指导界面设计

费茨定律应用比较广泛，其在移动界面设计中也有很好的启发意义，结合费茨定律公式可以得出指导我们设计的三个要点：

1.按钮越大，所需时间越短

根据公式，当到目标的距离（D）一定时，目标大小（W）越大，所需时间越短，反之越长。下面以支付宝的登录流程为例，如下图所示：

左图是支付宝初始页，该页面主要让用户选择合适自己的操作方式。因此在设计上采用登录和注册按钮并排的方式，目标区域较小，给用户充分选择的时间。

中图和右图，界面中仅仅只有一个按钮，其他注册、遇到问题都可弱化用文字高亮的样式展示，用户在操作时基本不用想就知道点击下一步按钮。大大的减少了操作时间，让用户可以专注于登录上。

2.距离越远，所需时间越长

当按钮大小一定时，手到目标的距离越远，所需时间就越长，反之越短。但是这里就发现一个问题，移动端如何判断手到目标的距离呢？这里我们可以借用拇指热区来进行判断。

随着手机越来越大，不同机型的拇指热区会有所差异，以iPhone6右手操作为例，它的拇指热区如下图所示：

根据图例可知绿色区域是我们手指最容易轻松达到的，橙色是伸长手指才能触达，操作相对较难，红色区域为难以触及的区域。我们可以判断手指到绿色区域的时间最短，到红色区域的时间最长。

因此在设计时我们需要将重要层级高的按钮放到拇指热区的绿色部分中，让目标离手指越近，从而提高操作速度。如下图所示：

以上两个案例均是Feed流界面，在卡片中露出功能有点赞、评论、分享这三个按钮，其中大众点评这三个中点赞的重要性层级最高，因此将其放在绿色最易触达区域，单手操作离手指距离最近，而分享和评论次之，因此将其放在了红色和橙色区域，单手操作离手指更远。

其中微信读书这三个中分享的重要层级最高，因此将其放在最易触达的绿色区域，单手操作更近。

3.手移动越快，越易错误操作

其实不管你手的速度有多快，当距离较远、按钮较小时，当手移动到按钮上方就会停下来进行定位然后才能准确得进行操作，如果只要求速度，手移动过来直接点击有可能就点中不了按钮，容易进行错误操作。

因此在UI设计中，如果我们想要用户能够快速操作，可以为用户打破距离和大小带来的限制，结合手势操作来进行设计。如下图所示：

以微信为例，在微信列表中为了让用户能够快速操作列表，引入了手势操作（安卓长按、iOS侧滑），当长按或侧滑列表时，就会在当前位置出现操作内容，提高操作效率。

在移动端界面中的应用

在实际交互设计中，合理使用费茨定律，可以让我们的界面使用更流畅，错误率更低。下面我们一起来看看费茨定律的四大应用场景。

1.来电显示场景——不同状态，不同设计方式

iOS的来电提示在锁屏和苏醒状态分别采用滑动接听和点击接听，可以很好的用费茨定律来解释。如下图所示：

锁屏时：用户手机场景不确定，很容易意外点击。在设计时就需要增加操作距离、延长操作时间，防止误操作的情况，采用滑动解锁就可以增加操作的距离，放在该场景中使用较为合适。

苏醒时：用户正在使用手机，这时候采用滑动操作距离太长了，因此设计为按钮的样式，用户可快速点击接听或拒绝，进而提高用户操作效率。

2.将返回浮于底部操作栏中——缩短操作距离和时间

随着屏幕越来越大，拇指热区也发生了变化，你会发现左上角的返回按钮单手操作越来越不可能，尤其是Plus、iPhoneX的出现返回按钮显得有点鸡肋。不过在体验资讯类的产品时发现，部分界面他们将返回按钮放到类界面底部左下角的位置，下面将这两种进行对比下。如下图所示：

以今日头条的详情为例，返回按钮在常规的左上角。结合拇指热区你会发现左上角的区域单手是很难到达的。对于资讯类APP需要不断切换看的文章，返回键在左上角无疑加重了操作难度。

以虎嗅为例，他们将返回按钮移动到了底部左下角，结合拇指热区你会发现左下角的区域单手是可以轻松到达的，将返回按钮放在底部，大大的节约了用户操作时间。

需要注意的是，尽管通过分析，返回按钮在左下角单手更好操作，但是有时候习惯真的是一件可怕的事情，比如我在华西医院的微信小程序时，很少能够记住点击底部的前进和后退键，每次想返回上一级，就习惯性的点左上角，结果就直接退出小程序。如下图所示：

面对顶部返回键单手不方便点击、底部返回键又老是记不住点，同时在当前规范下又不适合大面积的使用，怎么样才能帮助用户操作呢？其实iOS按住左侧屏幕边缘向右滑既可以返回上一步，安卓自带虚拟返回键都是较为快捷的操作方式。

3.合理利用手势操作——提高用户操作速度

安卓的长按和iOS的侧滑编辑大家都比较熟悉，他们多用在列表页的编辑状态，用户长按或侧滑列表，操作按钮就显示在当前位置，操作效率比较高，如下图所示：

以天猫购物车为例，大家知道长按是安卓端常用的功能，侧滑是iOS端的功能，然后天猫购物车这两种功能都支持。其主要原因考虑到安卓用户在使用苹果手机时，可能不知道侧滑的功能，因此在购物车的编辑中还加入了长按功能，让用户能够更快捷的操作。

4.将操作按钮进行收纳——阻碍用户操作

在设计时如果控制不经常使用，或者想阻碍用户操作时，就可以把操作按钮放远一点，同时在设计上可以将其收纳，加大用户到操作难度。如下图所示：

以大众点评详情为例，在右上角并没有直接放举报到按钮，而是放到更多到按钮，一个原因是为了方便后期的拓展，另外很重要到一个原因是不想让用户举报加深用户的操作难度。

总结

本文主要分享了费茨定律在UI界面中的应用，结合今天的分析，总结起来主要有四个要点：

1、我们想要更容易点击到目标，就需要将一个页面的主操作按钮放大。

2、我们想要让用户快速点击目标，操作更方便，可以将目标放于拇指热区轻松触达区域。

3、我们想要让用户快速移动时，就可以利用手势操作，它打破距离和大小的限制，从而让用户可以快速操作。

4、我们不想要用户操作或不常用的控件时，就可以将按钮进行收纳，加大用户操作距离，从而增长用户的操作时间。

参考文献：

Technical Artist的不归路 —— 费茨定律(Fitts’s Law)在UI设计中的使用  http://t.cn/EbWXofQ

设计法则： Fitts’ Law / 费茨定律（费茨法则）http://t.cn/EbWaS75

《通用设计法则》立德威尔著   朱占星 薛江译 中央编译出版社 2013年9月北京第1版