不管你是否听说过菲茨定律，你肯定在现实生活中见过它的例子。

从你汽车的踏板到iPhone操作系统的按钮——你可能接触过一些受菲茨原理影响的东西。

菲茨定律是人类行为的预测模型，它无处不在。从网站到移动应用程序，从用户界面到物理仪表板，以及几乎每一个我们日常交互的有形产品。

一旦你开始看到这些看似显而易见的概念，你就会无法停止注意它们。

在这篇文章中，我们将介绍菲茨定律是什么，以及它是如何应用的用户界面设计，并查看一些例子。

如果你想跳到一个特定的部分，只需使用可点击菜单:

1954年，一位名叫保罗·菲茨(Paul Fitts)的心理学家创建了一个预测模型，描述了人们选择目标的速度。

目标是用户试图与之交互的对象。它可以是一个需要点击的按钮，也可以是一个需要点击进入的表单字段。这个模型在人机交互．

费茨定律证明了这一点目标越远，目标尺寸越小，用户获取目标所需的时间就越长．

距离较近的大型目标的交互成本最低，而距离较远的小型目标的交互成本最高。

但是什么是交互成本呢?

尼尔森·诺曼集团将交互成本定义为“为了达到他们的目标，用户在与站点交互时必须部署的努力的总和——精神和身体上的。”

所以，如果用户不需要滚动、点击或探索就能找到他们想要的答案，那他们就是在体验零互动成本．如果用户必须找到一个菜单，滚动十几个选项，并单击一个小按钮来完成他们的表单，这将是一个更高的交互成本。

理想情况下，UX和UI设计师的目标是让这些成本尽可能低。交互成本越低，应用的可用性就越好。

设计师可以通过遵循菲茨定律最小化交互成本，最小化阅读、滚动、点击、输入、等待页面加载、注意力切换、记忆负载和探索寻找相关信息。

菲茨定律指出，获取目标所需的时间是目标大小和距离的函数。

这里的方程:

MT = a + b * log₂(2D/W)

让我们来分析一下:

虽然这些应用程序看起来像是常识，但指出它们是很重要的。为什么?

因为菲茨定律是最被忽视的定律之一设计的心理学原理！

下面是一些使用它的例子:

从本质上说，这一原则可以在任何涉及到使用鼠标或手指的界面中被注意到。

在用户界面设计中，它被用来决定交互元素的适当大小，它们的最佳位置，并注意潜在的可用性问题。

菲茨定律将安全、方便和可用性引入UI设计中。

考虑到重型机械的安全措施:关机按钮几乎总是大的，红色的，比启动按钮更容易按下。手机应用的便利性在于将登录按钮置于拇指区。

费茨定律是网站上的按钮很大，菜单通常位于屏幕的上角的原因。

UI设计师可以通过在相关表单或标题附近放置重要的行动调用来告诉人们该做什么。这是用户希望看到的内容，并且可以轻松地点击它们。

素像素是用户打开网站或应用程序时光标在屏幕上的位置。这是用户执行所有任务的地方。

这就是右键菜单存在的原因——它们自然最接近质点像素。

在移动设备上，素像素是指拇指自然停留的区域。他们也被称为拇指区．

你会注意到iPhone上的菜单通常位于屏幕底部，也就是你的拇指所在的位置。

理想情况下，设计师应该尽可能在这一点上发出所有他们想要的行动号召。然而，素像素并不是完全可以预测的，因为用户的起始点通常每次都不一样。

虽然几乎不可能预测准确的素数像素，但可以根据用户在使用应用程序时所采取的操作预测可能的素数像素。这里有三个例子:

魔法像素是屏幕的四个角，屏幕的顶部边缘和底部边缘。神奇的像素创造了边界。您的光标不能移动到这些点以外。它们几乎总是离素像素最远的地方。

设计师使用屏幕中心、角落和手机上的拇指区域等惯例作为最佳位置的指南，因为他们无法预测主像素。

拥有一个易于导航的标准化网站和接近cta一样重要，因为您将通过使用诸如三分法．

因为它们离素像素很远，所以魔法像素通常被保留给标准函数。您会注意到退出、最小化、帐户控制、登录和全屏按钮都位于屏幕的顶部角落。

尽管它们通常不接近质点像素，但屏幕的角和边总是在同一个地方，你无法越过它们。这使得他们很容易快速到达。

Web设计人员将无法像本地用户界面那样有效地利用屏幕的角落。

因此，他们依赖于次佳的魔法区域:屏幕中央。

来源:谷歌

谷歌把它的搜索字段放在屏幕的中央，菜单选项放在上面的角落。这利用了魔法像素和可能的素像素。

“谷歌Search”按钮位于搜索输入字段的正下方，而整个按钮是可点击的，一个心智模型的例子．

紧挨着“谷歌搜索”按钮的是“我感觉很幸运”，这是一个类似的按等级分组的按钮。

来源:WCCFtech

在有报道称用户的iPhone手机在口袋里意外关机后，iPhone采用了一种新的关机方法。

这些措施与菲茨定律相反。为了防止用户不小心关闭iPhone，需要付出很高的交互成本。

首先，用户必须按下两个按钮来关闭屏幕，然后他们需要滑动“滑动关闭”功能。

屏幕底部的取消按钮更接近拇指区，更容易点击，这使得用户更有可能取消而不是关闭。

来源:Spotify

Spotify的桌面应用程序允许用户通过右键菜单访问常用功能。

这使得素像素几乎总是能得到最佳利用。用户甚至不需要从起始点移动鼠标就可以访问他们最常用的操作。

像谷歌一样，Airbnb将搜索表单居中，将搜索功能放在搜索表单旁边，并集成了一个神奇的像素菜单。

来源:AirBnB

爱彼迎继续在其网站上使用菲茨定律——包括这里显示的“预订”按钮的大小和颜色。

来源:巢

Nest恒温器是菲茨定律的一个光辉例子。

根据这个预测模型，饼菜单更有效。然而，这一原则在很大程度上被更容易设计的线性菜单所忽视。

Nest在其设备界面中包含了饼菜单。

用户只需两个手势就可以操作整个设备，而交互成本非常低，尽管它体积小巧。

正如您从这些例子中所看到的，发现日常交互背后的潜在设计原则只是学习UI设计的乐趣之一。

学习它的第一步不仅要熟悉它的原理，还要熟悉它糟糕的UI设计的例子-所以你知道该避免什么!

把你的脚趾伸进田野里免费的短期课程或者在线教程是了解它是否适合你的好方法。

在这个视频中，专业设计师Elizé通过介绍用户界面让你开始:

一旦你有了这样的感觉，就开始计划你成为一个这样的人的道路，通过检查UI设计训练或者转行项目，找到适合你的。

虽然菲茨定律是可用性指南的一个很好的起点，但它并不总是正确的。数据总是比理论揭示的更多。要知道你的设计是否友好，最好的方法就是在真实用户身上测试。

问问题并寻求更深入的理解总是有益的为什么工作的事情。以理论为起点，然后实际地考虑你要把它应用到现实世界中去。像这样的“法则”只是需要考虑的准则，而不是盲目遵循。

考虑一下如何设置按钮的间距和大小，如何限制交互成本，以及如何在网站或应用程序中放置行动调用。

如果你刚刚在UI设计领域迈出第一步，想要深入了解这方面的知识，不妨试试我们的免费5天短期课程将教你喜欢背后的原则色彩理论和排版选择。

如果你想阅读更多关于UI设计的内容，可以查看以下文章: