时间:2014-01-28所属栏目: 交互设计 来源: 热度:
菲茨定律(The Fitts’ Law) 原本用来描述当人们使用一个指向性设备来瞄准特定目标时,所需的时间与移动距离,目标尺寸成函数变化关系。通俗来讲就是:距离目标越近,目标越大,点击到目标的时间就越短。这很容易理解,实际实现起来也并不算复杂,看起来着实没有必要对如此简单又明显的理论进行辩驳。
然而,在对你的每一个设计都应用菲茨定律之前,认真考虑几个问题也许会让你的交互设计水平有所提高。
依据菲茨定律所推导出来的最广泛的概念大概是,目标越大,就越容易点击到。
界面设计不应仅仅局限于你界面所看到的像素空间,创建更大的目标隐性区域会有效优化你的界面交互行为。
举例来说,一些网站从不将某个按钮或者某个链接的可点击区域扩展到整个用户期望目标。 结果就是,用户需要更精准的移动鼠标到不同的链接,也因此消耗了更多的定位时间。而根据菲茨定律,应当充分利用每一个像素来扩大可点击的区域,因为这样会扩大可点击的目标,从而减少移动鼠标定位到目标的时间。例如,

由于只有文字部分作为可点击区域,左侧的按钮浪费了一部分宝贵的屏幕空间,而右侧的设计则通过使整个背景成为可点击区域带来了更大的点击区域 (左侧案例为Firefox,右侧为Apple)
此外,增大一个按钮的绝对或相对尺寸来使之更容易被点击,是设计师们诱导人们进行特殊操作,传达界面元素优先级的常用方法。

相对尺寸与绝对尺寸在界面中通常用来传达元素的优先级和重要性(例子:LibreOffice)
尽管在设计一个诱导用户操作的按钮时有很多因素值得考虑,但菲茨定律提供了其中最基本的理论依据。
大尺寸的点击目标在带来前述好处的同时,也带来了消极的一面,既这些大尺寸的设计可能会打破界面的平衡性,并且占据了宝贵的屏幕空间。即使你拥有大量的屏幕空间,不断的扩大点击目标的尺寸也并不总会提升可用性,这是由于一个按钮的可用性与他的尺寸并不是单纯的线性关系。如下图,

一个按钮的可用性与尺寸呈非线性对应关系
因此,如果一个小按钮的尺寸被扩大10%,它会变的更易于点击,而如果一个已经非常大的按钮再扩大10%,它的可用性将不会有多少提升。
依据菲茨定律可以推导出来的第二条依据是,距离目标越近,点击越快。
如果你按照用户日常点击按钮和链接的的频率来紧密排布它们,而不是将按钮分散在界面不同的区域,用户的交互效率将会提升,因为他们移动鼠标的时间会大大减少。
以下面 Ubuntu Unity界面为例,产品允许你浏览不同的文件源,并且使用两类不同的筛选器来筛选结果:输入文本筛选和通过文件类型筛选。然而,仔细观察下图可见,两组筛选器的距离非常远。文本筛选被放在了屏幕的顶部而文件类型筛选则被放置在了最底部。

不符合菲茨定律:搜索的筛选控件通常是连续使用操作的,因此,各个筛选控件应当彼此接近的放置在一起。(例子:Ubuntu Unity,截图:Webupd8.org)
对于连续的操作流程来说,上例中的设计并不是最优的。当进行搜索操作时,输入搜索关键词,并且选择文件类型来调整搜索结果通常是一系列连续的操作。为了完成这一系列的操作,例子当中的设计需要大范围的移动鼠标。假使将文件类型的图标放置在搜索输入框附近,那么用户移动鼠标的距离将会大幅减少,从而加快交互的速度。(还可以节省垂直的空间)