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