簡介說明

1. 理論表述

任意一點移動到目標中心位置所需要的時間，與目標距離正相關，與目標大小負相關。

2. 研究背景

1954 年，Paul Morris Fitts 根據信息類比提出一個假設，該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數，卻給了后來的交互研究人員極大的啟發。

我們現在經常看到的 Shannon 公式（即上面那個公式）是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」，該變體被廣泛地應用于需要指針操作的人機交互系統當中。作為交互設計和 UI 設計的理論基礎，它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數關系：因為以 2 為底的指數函數是遞增函數，所以，T 與 D 正相關（D 越大 T 越大），而與 W 負相關（W 越大 T 越小）。

設計案例

人們做出一個移動指針的操作通常需要兩步：

• 將指針快速移動至目標大致所在的區域；
• 精細調節指針的位置以達到可點擊的區域。

菲茨定律所包含的兩點內容：

• 指針當前位置與目標間的距離 D 越長，所需時間越長；
• 目標的寬度 W 越大，所需時間越短。

綜合兩者來看，菲茨定律中的 D 在第一步中起更為明顯的作用，而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示，主要也是從這兩方面入手。

1. 需要連續操作的控件盡可能接近

案例1：系統右鍵菜單，微信彈出菜單

最典型的例子就是菜單，無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶，點擊這類按鈕之后一定會有后續的任務和操作，所以這些任務都被安排在了距離所點擊區域更近的菜單中。

案例2：夸克和 Safari 的 url 輸入框位置比較

另外一個例子是瀏覽器的搜索欄輸入框，現在已經有一些瀏覽器（比如簡單搜索、夸克）會將輸入框以及一些其他更常用操作置于底部，這是因為我們正常握持手機時，大拇指離底部更近，所以需要進行點擊操作的話底部的輸入框操作起來更方便，也更快。

2. 可點擊的按鈕盡可能大

這一點在現今的 APP 中做得已經非常到位了。

案例3：哈羅出行

作為哈羅單車租用操作的入口，頁面中的「開鎖」按鈕做得足夠大，用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄（也就是開始）按鈕也是一樣的道理。

3. 邊角的利用

還有一個比較特殊的就是對于邊角的利用，無論是在 Windows 還是在 MacOS 中，邊角總是有一些比較重要的操作，比如 Windows 的「開始菜單」（在左下角），MacOS 的 Dock 欄（在底部）以及頂部狀態欄，包括 Mac 特有的觸發角。

案例4：MacOS 觸發角設置

為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢？在硬件設備中邊角是一個極其特殊的存在，由于指針再怎么移動都不可能超越屏幕邊界，只能停留在邊界上，所以邊界對于用戶的操作來說是「無限可觸發」的，這有什么意義呢？這意味著對于隱性存在的目標來說，W 趨于無限大。

既然 W 趨于無限大，根據公式時間 T 就趨于常量 a。

結論就是無論指針距離目標物多遠，所需要花費的時間都已經達到了理論的最小值，輕松且高效。而在移動 APP 中同樣有邊角的應用，比如最近拿了 Google Play 設計大獎的 Drops。

案例5：Drops

創新的交互將屏幕底邊充分的利用了起來，只要將單詞移到底部，就代表用戶已經記住這個單詞了。注意整個底部都是可以觸發的，而不僅僅是腦袋那個圓形區域。本來「移動」這個操作對于「按鈕」來說更加繁瑣，但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩，滑起來相當帶勁。

4. 菲茨定律的逆向應用

菲茨定律給我們的啟示通常都是正向的，都是以縮短用戶的操作時間為主要目標，但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時，可以逆向運用菲茨定律，增加操作的復雜度。

案例6：iPhone 關機和微信刪除聊天窗

iPhone 的滑動關機延長了用戶關機操作的時間，以提醒用戶此操作為不可逆，需要謹慎操作。微信也是同理，甚至還縮小了刪除按鈕的大小，以達到警示的目的。

另一個典型就是彈出窗口的關閉按鈕。

案例7：Luckin Coffee 的彈出窗

彈出窗口里一般都包含了開發商的推廣、廣告、運營活動等等，所以開發商會希望用戶花盡量多的時間去注意到它們的內容，這時候雞賊的開發商會把關閉按鈕做得又小又遠（遠離視覺中心），讓用戶花更多的時間去尋找和點擊它們，效果拔群。

注意事項

注意點1：D 不能過分短

過分短的間距不僅無法提升操作效率，反而會造成視覺壓力從而降低用戶體驗。

反面案例1：唯物魔改版

按照菲茨定律魔改的唯物登錄頁面，理應操作得更迅捷方便，然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外，我嘗試著點了一下覺得十分逼仄擠手，所以過度縮減按鈕間的間距并不合理。

注意點2：W 不能過分大

大尺寸的點擊目標確實能夠有效地降低用戶操作成本，但是過分大的目標也會很直接地破壞畫面的平衡，浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系，當按鈕已經足夠大時，再增大就沒有什么體驗上的提升了，如下圖所示。

反面案例2：KEEP 魔改版

與唯物類似，當按鈕大到一定程度之后，會對畫面造成恐怖的破壞效果。

總結

• 盡可能縮短連續操作所相關按鈕的間距，盡可能做大需要頻繁點擊的按鈕（但都不要太過分）。
• 注意屏幕四邊和四角在交互中的價值。
• 逆向運用菲茨定律以延長用戶在當前頁面的時間，或對用戶的下一步操作發出警示。

參考資料

1. Fitts, Paul M. The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 1954, 47 (6): 381–391.
2. Scott MacKenzie. Fitts’ Law as a Research and Design Tool in Human-Computer Interaction. Human-Computer Interaction, 1992, Volume (7): 91-139.
3. IDF INSTRUCTOR (2016). Fitts’s Law: The Importance of Size and Distance in UI Design. 
4. Mr湯進er. (2017). 產品設計法則：菲茨定律（費茨法則）/ Fitts’ Law.
5. bozhongtao (2012). 菲茨定律與互聯網設計 Fitts’Law.