費茨定律是人類運動的預測模型，主要用于人機交互和人體工程學。該法則預測光標/手指從一個起始位置移動到一個最終目標所需的時間（T）由到目標的距離（D）和目標的大小（W）所決定，用數學公式表達為時間 T =a + b log2 ( D /W + 1 )。其中a、b是經驗常數，a代表手指開始到停止的時間，b代表手指的移動速度。
舉個生活中一個開燈的例子：
早期的開關只有一個手指大，每次開燈的時候都需要將手移動到開關上方，然后伸出手指調整到適合位置然后在按下。由于按鈕小，在沒開燈的時候你根本不知道它在哪里，需要不停的摸，所需時間就比較長。后期大家意識到了這個問題，將開關按鈕設計變大，人們操作時只需要將手移動到按鈕上方，由于面積大不需要調整直接按下即可，所需時間就比較短。
如何指導界面設計
費茨定律應用比較廣泛，其在移動界面設計中也有很好的啟發意義，結合費茨定律公式可以得出指導我們設計的三個要點：
1. 按鈕越大，所需時間越短
根據公式，當到目標的距離（D）一定時，目標大小（W）越大，所需時間越短，反之越長。下面以支付寶的登錄流程為例，如下圖所示：
左圖是支付寶初始頁，該頁面主要讓用戶選擇合適自己的操作方式。因此在設計上采用登錄和注冊按鈕并排的方式，目標區域較小，給用戶充分選擇的時間。
中圖和右圖，界面中僅僅只有一個按鈕，其他注冊、遇到問題都可弱化用文字高亮的樣式展示，用戶在操作時基本不用想就知道點擊下一步按鈕。大大的減少了操作時間，讓用戶可以專注于登錄上。
2. 距離越遠，所需時間越長
當按鈕大小一定時，手到目標的距離越遠，所需時間就越長，反之越短。但是這里就發現一個問題，移動端如何判斷手到目標的距離呢？這里我們可以借用拇指熱區來進行判斷。隨著手機越來越大，不同機型的拇指熱區會有所差異，以iPhone6右手操作為例，它的拇指熱區。如下圖所示：
根據圖例可知綠色區域是我們手指最容易輕松達到的，橙色是伸長手指才能觸達，操作相對較難，紅色區域為難以觸及的區域。我們可以判斷手指到綠色區域的時間最短，到紅色區域的時間最長。因此在設計時我們需要將重要層級高的按鈕放到拇指熱區的綠色部分中，讓目標離手指越近，從而提高操作速度。如下圖所示：
以上兩個案例均是Feed流界面，在卡片中露出功能有點贊、評論、分享這三個按鈕，其中大眾點評這三個中點贊的重要性層級最高，因此將其放在綠色最易觸達區域，單手操作離手指距離最近，而分享和評論次之，因此將其放在了紅色和橙色區域，單手操作離手指更遠。
其中微信讀書這三個中分享的重要層級最高，因此將其放在最易觸達的綠色區域，單手操作更近。
3. 手移動越快，越易錯誤操作
其實不管你手的速度有多快，當距離較遠、按鈕較小時，當手移動到按鈕上方就會停下來進行定位然后才能準確得進行操作，如果只要求速度，手移動過來直接點擊有可能就點中不了按鈕，容易進行錯誤操作。
因此在UI設計中，如果我們想要用戶能夠快速操作，可以為用戶打破距離和大小帶來的限制，結合手勢操作來進行設計。如下圖所示：
以微信為例，在微信列表中為了讓用戶能夠快速操作列表，引入了手勢操作（安卓長按、iOS側滑），當長按或側滑列表時，就會在當前位置出現操作內容，提高操作效率。
在移動端界面中的應用
在實際交互設計中，合理使用費茨定律，可以讓我們的界面使用更流暢，錯誤率更低。下面我們一起來看看費茨定律的四大應用場景。
1. 來電顯示場景——不同狀態，不同設計方式
iOS的來電提示在鎖屏和蘇醒狀態分別采用滑動接聽和點擊接聽，可以很好的用費茨定律來解釋。如下圖所示：
鎖屏時：用戶手機場景不確定，很容易意外點擊。在設計時就需要增加操作距離、延長操作時間，防止誤操作的情況，采用滑動解鎖就可以增加操作的距離，放在該場景中使用較為合適。
蘇醒時：用戶正在使用手機，這時候采用滑動操作距離太長了，因此設計為按鈕的樣式，用戶可快速點擊接聽或拒絕，進而提高用戶操作效率。
2. 將返回浮于底部操作欄中——縮短操作距離和時間
隨著屏幕越來越大，拇指熱區也發生了變化，你會發現左上角的返回按鈕單手操作越來越不可能，尤其是Plus、iPhoneX的出現返回按鈕顯得有點雞肋。不過在體驗資訊類的產品時發現，部分界面他們將返回按鈕放到類界面底部左下角的位置，下面將這兩種進行對比下。如下圖所示：
以今日頭條的詳情為例，返回按鈕在常規的左上角。結合拇指熱區你會發現左上角的區域單手是很難到達的。對于資訊類APP需要不斷切換看的文章，返回鍵在左上角無疑加重了操作難度。
以虎嗅為例，他們將返回按鈕移動到了底部左下角，結合拇指熱區你會發現左下角的區域單手是可以輕松到達的，將返回按鈕放在底部，大大的節約了用戶操作時間。
需要注意的是，盡管通過分析，返回按鈕在左下角單手更好操作，但是有時候習慣真的是一件可怕的事情，比如我在華西醫院的微信小程序時，很少能夠記住點擊底部的前進和后退鍵，每次想返回上一級，就習慣性的點左上角，結果就直接退出小程序。如下圖所示：
、
面對頂部返回鍵單手不方便點擊、底部返回鍵又老是記不住點，同時在當前規范下又不適合大面積的使用，怎么樣才能幫助用戶操作呢？其實iOS按住左側屏幕邊緣向右滑既可以返回上一步，安卓自帶虛擬返回鍵都是較為快捷的操作方式。
3. 合理利用手勢操作——提高用戶操作速度
安卓的長按和iOS的側滑編輯大家都比較熟悉，他們多用在列表頁的編輯狀態，用戶長按或側滑列表，操作按鈕就顯示在當前位置，操作效率比較高，如下圖所示：
以天貓購物車為例，大家知道長按是安卓端常用的功能，側滑是iOS端的功能，然后天貓購物車這兩種功能都支持。其主要原因考慮到安卓用戶在使用蘋果手機時，可能不知道側滑的功能，因此在購物車的編輯中還加入了長按功能，讓用戶能夠更快捷的操作。
4. 將操作按鈕進行收納——阻礙用戶操作
在設計時如果控制不經常使用，或者想阻礙用戶操作時，就可以把操作按鈕放遠一點，同時在設計上可以將其收納，加大用戶到操作難度。如下圖所示：
以大眾點評詳情為例，在右上角并沒有直接放舉報到按鈕，而是放到更多到按鈕，一個原因是為了方便后期的拓展，另外很重要到一個原因是不想讓用戶舉報加深用戶的操作難度。
總結
本文主要分享了費茨定律在UI界面中的應用，結合今天的分析，總結起來主要有四個要點：
- 1、我們想要更容易點擊到目標，就需要將一個頁面的主操作按鈕放大。
- 2、我們想要讓用戶快速點擊目標，操作更方便，可以將目標放于拇指熱區輕松觸達區域。
- 3、我們想要讓用戶快速移動時，就可以利用手勢操作，它打破距離和大小的限制，從而讓用戶可以快速操作。
- 4、我們不想要用戶操作或不常用的控件時，就可以將按鈕進行收納，加大用戶操作距離，從而增長用戶的操作時間。
參考文獻：
Technical Artist的不歸路 —— 費茨定律(Fitts’s Law)在UI設計中的使用
設計法則： Fitts’ Law / 費茨定律（費茨法則）
《通用設計法則》立德威爾著 朱占星 薛江譯 中央編譯出版社 2013年9月北京第1版
原文地址：海鹽社
作者：風箏KK
轉載請注明：學UI網》費茨定律如何指導界面設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司