經驗分享丨一文搞定互動設計7大定量（2）

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

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

為什麼主按鈕與輔助按鈕的樣式不一致？

為什麼有些按鈕要放在角落？

為什麼有的按鈕要設計的這麼明顯？

為什麼要把一些相關按鈕設計在一起？

……

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

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

一、費茨定律的起源

曾在俄亥俄州立大學工作的美國心理學家保羅·莫里斯·費茨（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端設計中的基本認識。

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

本文由@江鳥的設計生活 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。