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