你是否曾經被按鈕相關的設計問題困擾過？這些問題的背后其實藏著一個重要法則——費茨定律。本文從費茨定律的概念、定義以及應用場景這三個部分，對其進行了闡述，一起來看一下吧。

不知道你曾經有沒有被下面問題煩擾過：

• 為什么主按鈕與輔助按鈕的樣式不一致？
• 為什么有些按鈕要放在角落？
• 為什么有的按鈕要設計的這么明顯？
• 為什么要把一些相關按鈕設計在一起？
• ……

所有的這些問題的背后其實都偷偷藏著一個心理學定律，就是在人機交互中非常重要的法則——費茨定律。

今天我們將從費茨定律的概念、定義以及應用場景這三個部分出發，對其進行闡述，一起來看看吧~

一、費茨定律的起源

曾在俄亥俄州立大學工作的美國心理學家保羅·莫里斯·費茨（Paul Morris Fitts）于 1954 年進行了一項實驗，通過敲擊金屬板的該實驗陳述了人類在移動到目標時的運動模型。

他證明了移動到目標所需的時間取決于到目標的距離以及大小。

該定律的數學模型涉及人機交互以及人體工程學，具體表達為：

T = a + b*log2(D/W+1)

• T：完成本次移動所需的操作時間；
• a：移動前的認知耗時，依賴于操作者與環境因素（作為一個常數，這里可暫不做考慮）；
• b：光標移動的反應速度，依賴于設備性能（作為一個常數，這里可暫不做考慮）；
• log2：log為某個數學符號（這里可暫不做考慮）；
• D：移動的開始位置與目標位置的直線距離；
• W：目標的寬度大??；

該公式講的是web端內鼠標完成一個點擊操作所需的耗時，簡單的來說就是鼠標移動到目標物體所需的時間與物體大小正相關與移動距離負相關，即大而近的目標用戶不需要過多的操作時間即可清晰的進行點擊操作，小而遠的目標則需要耗費很多時間，讓用戶體驗不佳。

網上對費茨定量因為翻譯有著不同的版本，無論是「菲茨定律」「菲茲定律」還是「費茨定律」，本文統一成為「費茨定律」。

二、費茨定律的應用

1. 邊緣目標無限放大原則

邊緣目標無限大的話意味著點擊將變得很容易，操作時間會很短。這是因為不管什么網絡產品都需要借助物理設備平臺呈現，鼠標無法突破平臺邊緣，那么其在移動過程中就不需要考慮超出屏幕范圍的可能，也就是用戶在移動鼠標的時候不管你怎么大幅度移動，鼠標都不會超過屏幕范圍且停在邊緣，邊緣處的物體可以輕易被選中。

因此在屏幕邊緣位置特別適合放置菜單欄這種系統級的操作，此時鼠標在移動到屏幕邊緣后不需要再大幅度的移動，只需要微調即可選中，用戶可在短時間內完成系統菜單內的選擇操作。

例如在mac電腦中，你可以輕易選擇底部貼邊位置的Docker欄，且系統支持Docker欄展示在屏幕的左邊、底部、右邊（上邊有應用程序菜單區域），這些其實都是運用了費茨定律中“邊緣無限大”的原理。

屏幕邊緣不單單可以放菜單欄，還可以放按鈕這樣的元素。

例如在界面中主按鈕位置的設計原則也是依托于此。它與輔助按鈕的位置并不是簡單的以左右原則進行區分，而是考慮貼邊原則。畢竟不管鼠標怎么移動，它都會停留于屏幕邊緣的位置。

費茨定律在瀏覽器的設計中特別常見，最早引入該定律設計的是谷歌瀏覽器，Chorme中書簽緊貼著屏幕邊緣，很好的節省了空間，我們也很容易點擊它們。

2. 關聯按鈕的親密性原則

在界面中我們發現有很多操作彼此相似，它們之間有著相關聯的效果。

那么我們該如何讓它們看起來更有秩序？

通過親密性原則，我們可以對界面中的按鈕進行簡單的分類，將有關聯的按鈕進行組合。當把這些按鈕三五成組的放在一起的時候，我們即可以避免界面中的操作混亂，也可以避免這一連串的操作看起來毫無關聯。關聯按鈕的設計上，我們可以采取視覺以及間距兩種方式。

視覺的相似，增強用戶對它們親密性的認知；

間距的縮短，減少了鼠標在不同按鈕之間的移動的時間。

3. 按鈕尺寸的適應性原則

菲茨定律里面指出距離一致的情況下，目標元素大的話用戶可以很輕易的點擊，假設目標元素較小的話會花費較多的時間。這里的目標元素的大小不單單是指目標元素實際的設計尺寸，也包含了目標元素可點擊的熱區范圍。

例如在表格中復雜的篩選、排序、搜索等的全局操作等可以通過擴大熱區來幫助用戶點擊。

那么是不是按鈕越大可用性就越好呢？

我們回看下菲茨定律本身的圖表模型，它是對數函數而不是線性函數，隨著目標的增大，它的可用性并不會增加。換句話說按鈕在界面內按鈕尺寸并不是越大越好，如果它的尺寸已經很合理且科學了，那么即使再放大，對可用性的提升也并非那么明顯。

4. 按鈕層級的有序性原則

主按鈕作為按鈕組中重要的元素，是頁面中最重要的操作，它需要讓用戶看一眼就清楚在界面內進行什么操作。

但是為了讓用戶在同等距離的鼠標移動中對按鈕組內的按鈕準確點擊，我們需要讓主按鈕與輔助按鈕之間有著足夠差異化的視覺比對，這樣才能讓鼠標點擊有著清晰的著陸點。

例如阿里云中的網站備案模塊，「開始備案」與「查看備案進度」兩個按鈕在距離屏幕右側邊距一致的情況下，通過較高視覺的按鈕引導用戶進行網站的備案操作。

不單單是這種功能性場景，有時候為了業務上的引流，我們可以通過視覺層次刻意的營造來為業務引流。

例如阿里云中中的產品查看，通過對「查看詳情」以及「產品文檔」這兩個按鈕視覺層次的差異化設計，引導用戶進入不同產品的門戶頁查看其具體的內容。

在應用的時候我們不單單可以利用視覺層級的提升提高點擊效率，我們也可以通過弱化按鈕的視覺層級，增加操作的距離，降低被點擊的可能。

例如阿里云中在未登錄前在頂部導航的位置很清晰的看到引導「注冊」以及「登錄」的高亮入口，而當用戶登錄之后則需要點擊右上角的用戶頭像，在懸停的菜單下方才能找到采用降了視覺層級的灰色文字展示的「退出登錄」操作。

5. 按鈕位置的臨近性原則

距離越近，鼠標移動的幅度超出目標區域的風險就越小。

當操作區域過小，為了提高點擊的準確度，我們可以大幅縮短與目標區域的距離，保持相關操作的臨近性。

例如在下拉菜單中，用戶只需鼠標移動到被操作的目標對象，點擊即可在原處彈出該目標對象的操作菜單，緊接著小幅度微調，即可精準定位到操作區域，大幅度提升點擊效率。

三、寫在最后

通過設計提升用戶的操作效率說起來很容易，設計過程中其實很容易被忽視。

以上就是我對費茨定律在B端設計中的基本認識。

我從工作中涉及到的部分中闡述了有關費茨定律的相關知識，可能有所欠缺，也歡迎對該定律感興趣的同學私信討論~