Fitts’ Law / 菲茨定律（費茨法則）

 Fitts’ Law / 菲茨定律（費茨法則）

補充一張雅虎ued繪製的關於Fitts’ Law的Q版小漫畫，先初步瞭解下：

 

Fitts’ Law / 菲茨定律（費茨法則）

Fitts’ Law / 菲茨定律（費茨法則）

一、一句話描述：

任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。

二、定律內容：

從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小（上圖中的 D與 W），用數學公式表達爲時間 T = a + b log2(D/W+1)。

 

解讀：

 

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

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

T=移動設備所需時長；a,b是經驗常量，D=設備起始位置和目標位置的距離；W=目標的寬度大小。

兩點含義：

1)、設備當前位置和目標位置的距離D越長，所用時間越長；

2)、目標的大小W越大，所用時間越短。

理解：

目的地明確的移動能夠細分爲兩個部，以移動光標爲例：

第一步、首先是一個大幅度的移動將光標移向與目標大體相同的方向和區域；

第二步、緊接着是一系列精細的小幅度微調來將光標精肯定位在目標中心。

小實驗幫助理解Fitts’ Law：舉起你的手臂並試着用手指指向遠處的一個小物體，例如遠處牆上的一個電燈開關。開始你的手臂可能會往開關的位置大幅的移動並且頗有可能稍微過頭了一點。接下來你會作一些微小的調整動做直至你的手指正好對準目標開關的中心。如今你能夠試着指向一個更大的物體 – 好比說電視或一面牆壁。這一次你也會以大幅度的手臂動做來使手指指向目標方向， 但由於目標體積很大因此通常狀況下你只須要作不多（甚至不須要任何)的微調。

三、菲茨定律的啓示：

1）、按鈕等可點擊對象須要合理的大小尺寸。

2）、屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，由於邊角是巨大的目標，它們無限高或無限寬，你不可能用鼠標超過它們。即無論你移動了多遠，鼠標最終會停在屏幕的邊緣，並定位到按鈕或菜單的上面。（下文結合案例解釋）

 

3）、出如今用戶正在操做的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄能夠被打開得更快，由於不須要移動到屏幕的其餘位置。

四、典型應用及案例：

菲茨定律雖然在不少領域都獲得了應用，但其在人機交互（HCI）和設計領域的影響卻最爲普遍和深遠的。

例1、油門和剎車：增大目標大小、減少與目標的距離來提升效率。

咱們從平常生活中體會下費茨法則的應用：

汽車上的剎車踏板和油門踏板：它們相距很近（D小），而且剎車踏板要比油門踏板大不少（W大），那麼它們爲何沒有被設計成相距很遠，或者將二者的大小顛倒過來呢？使用經驗告訴咱們，這樣的設計可使得駕駛員可以以最短的時間把腳從油門踏板移動到剎車踏板上，從而達到以最快的速度準確制動的目的（D小，W大，時間短）。

可能去過電玩大世界的人會有這樣的疑問，電玩大世界中那些賽車的油門和剎車踏板大小恰好與常規的相反，這又是爲何？這也正是應用費茨法則的高明之處，由於遊戲中咱們須要的是更快的速度去超越對手，所以你會更加容易的去踩到油門，爭取更多的時間，並且你人身安全不會受到威脅，由於剎車踏板就明顯變小了。

例2、window和mac系統菜單設計：增大目標大小以縮短定位時間（邊緣無限大）。

兩大主流OS中又有很是好的案例：Mac OS X默認將底欄（Dock)放到了屏幕的最下方；這樣的話底欄就變得「無限可選中」，由於用戶不能將光標移到底欄下方因此在向底欄方向作出大幅度移動後光標始終是落在底欄上的。

 

Mac OS X默認將底欄（Dock)放到了屏幕的最下方

 

屏幕邊緣，W無限大，T近似等於0 

在Windows中，開始菜單在屏幕的左下角，這個角落是「無限可選中」的，由於無論用戶朝左下角方向作多大幅度的擺動，光標老是會停在開始菜單按鈕的上方。（另外一個案例：QQ右上角吸附隱藏，光標移動到右上角彈出）

 

Windows7，開始菜單在屏幕的左下角

 

屏幕角落，W無限大

 

這方面最經典的例子是 Windows 操做系統和MAC操做系統中的應用程序菜單區域(menu bar)位置的設計。實際測試和理論計算結果都代表，在使用 MAC操做系統 時，用戶點擊某個菜單所需的平均時間要比Windows上快0.4秒（《The humane Interface》Jef Raskin ）。注：隨着屏幕愈來愈大、雙屏的出現，因爲移動距離的變長，移動時間的對比不太強烈。

 

MAC OS 的 menu bar位於頂部邊緣

 

windows os 的menu bar 位於title bar下方 

另外一個對比案例：IE瀏覽器和chrome瀏覽器的便籤欄設計

 

IE瀏覽器的便籤欄 

 

chrome瀏覽器的標籤欄 

例3、鼠標右擊菜單設計：縮短當前位置到目標區域的距離。

右鍵菜單技術（或上下文菜單）是採起這種思路的一個很好的例子。爲了彈出這種菜單，用戶只要將鼠標指針移動到須要對其進行操做的某個對象所佔據的區域中並單擊右鍵便可。而在通常狀況下，這個移動的距離要遠小於將鼠標指針移動到應用程序主窗口頂部的下拉菜單區域。

 

右鍵菜單縮短了光標的移動距離D,提升了效率 

例4、WEB設計中的應用

網頁設計師最大的遺憾之一就是不能利用瀏覽器的邊角和邊緣做爲可「無限可選中」的區域。不過設計師仍然能夠按照菲茨定律在設計上作一些優化。

1）、放大連接點擊區域。在連接文字周圍放置可點擊的填充區域，這樣用戶想要點擊的連接文本會有更大的容錯性。

2）、當您有幾個放置在一塊兒的可點擊目標或連接時，把它們的體積增大或增長他們之間空白區域的大小。搜索結果中的網頁導航連接一般都有不好的可用性。例如，下圖所示的搜索結果頁面的底部，用戶能夠經過點擊連接文字爲「1」，「2」到「10」跳轉到特定的頁面。這裏的問題在於這些超連接的可點擊區域過小，只有一個數字加一個「o」的大小，所以很難快速將鼠標指針準確移動到它們上面。在某些狀況下，這種設計可能會帶來很大的使用困難。例如，鼠標靈敏度低難以定位，又或者，一些老年用戶或者存在運動機能障礙的用戶在精確控制鼠標方面有困難。這些都將致使用戶更難於點擊某個想要瀏覽的頁面的連接。

 

搜索結果頁面的底部頁碼連接

3）、將用戶最有可能點擊（或最想要）的按鈕放大。例如，將」登錄」按鈕設計的更大：

 

登錄按鈕被設計的更大

4）、將動做分類 – 若是相關的操做按鈕靠近彼此的話，則不只能夠在視覺上加強用戶對它們相關性的認知，還能夠減小光標在它們之間移動所需的距離和時間。

例4、移動端設計中的應用

移動端交互設計中也有不少案例應用了Fitts' Law，舉一個Android系統中刪除應用的例子，用戶拖拽想要刪除的應用到頂部刪除，頂部W無窮大，增長了用戶操做效率和精準度。

 

 miui系統中的刪除應用

Fitts' Law鼓勵減小距離，增長目標大小以提高用戶效率，但反過來應用也會有意想不到的效果，好比iPhone關機，不採用按鈕點擊，而採用滑動操做，這樣雖然減低了用戶操做效率，但增長用戶操做時間能夠起到警示用戶謹慎操做的目的。

 

反例：iPhone關機操做 

做者：Mr湯進er 連接：https://www.jianshu.com/p/36b610bac7a2 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。