你是否曾經(jīng)被按鈕相關(guān)的設(shè)計(jì)問(wèn)題困擾過(guò)？這些問(wèn)題的背后其實(shí)藏著一個(gè)重要法則——費(fèi)茨定律。本文從費(fèi)茨定律的概念、定義以及應(yīng)用場(chǎng)景這三個(gè)部分，對(duì)其進(jìn)行了闡述，一起來(lái)看一下吧。

不知道你曾經(jīng)有沒(méi)有被下面問(wèn)題煩擾過(guò)：

• 為什么主按鈕與輔助按鈕的樣式不一致？
• 為什么有些按鈕要放在角落？
• 為什么有的按鈕要設(shè)計(jì)的這么明顯？
• 為什么要把一些相關(guān)按鈕設(shè)計(jì)在一起？
• ……

所有的這些問(wèn)題的背后其實(shí)都偷偷藏著一個(gè)心理學(xué)定律，就是在人機(jī)交互中非常重要的法則——費(fèi)茨定律。

今天我們將從費(fèi)茨定律的概念、定義以及應(yīng)用場(chǎng)景這三個(gè)部分出發(fā)，對(duì)其進(jìn)行闡述，一起來(lái)看看吧~

一、費(fèi)茨定律的起源

曾在俄亥俄州立大學(xué)工作的美國(guó)心理學(xué)家保羅·莫里斯·費(fèi)茨（Paul Morris Fitts）于 1954 年進(jìn)行了一項(xiàng)實(shí)驗(yàn)，通過(guò)敲擊金屬板的該實(shí)驗(yàn)陳述了人類在移動(dòng)到目標(biāo)時(shí)的運(yùn)動(dòng)模型。

他證明了移動(dòng)到目標(biāo)所需的時(shí)間取決于到目標(biāo)的距離以及大小。

該定律的數(shù)學(xué)模型涉及人機(jī)交互以及人體工程學(xué)，具體表達(dá)為：

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

• T：完成本次移動(dòng)所需的操作時(shí)間；
• a：移動(dòng)前的認(rèn)知耗時(shí)，依賴于操作者與環(huán)境因素（作為一個(gè)常數(shù)，這里可暫不做考慮）；
• b：光標(biāo)移動(dòng)的反應(yīng)速度，依賴于設(shè)備性能（作為一個(gè)常數(shù)，這里可暫不做考慮）；
• log2：log為某個(gè)數(shù)學(xué)符號(hào)（這里可暫不做考慮）；
• D：移動(dòng)的開始位置與目標(biāo)位置的直線距離；
• W：目標(biāo)的寬度大小；

該公式講的是web端內(nèi)鼠標(biāo)完成一個(gè)點(diǎn)擊操作所需的耗時(shí)，簡(jiǎn)單的來(lái)說(shuō)就是鼠標(biāo)移動(dòng)到目標(biāo)物體所需的時(shí)間與物體大小正相關(guān)與移動(dòng)距離負(fù)相關(guān)，即大而近的目標(biāo)用戶不需要過(guò)多的操作時(shí)間即可清晰的進(jìn)行點(diǎn)擊操作，小而遠(yuǎn)的目標(biāo)則需要耗費(fèi)很多時(shí)間，讓用戶體驗(yàn)不佳。

網(wǎng)上對(duì)費(fèi)茨定量因?yàn)榉g有著不同的版本，無(wú)論是「菲茨定律」「菲茲定律」還是「費(fèi)茨定律」，本文統(tǒng)一成為「費(fèi)茨定律」。

二、費(fèi)茨定律的應(yīng)用

1. 邊緣目標(biāo)無(wú)限放大原則

邊緣目標(biāo)無(wú)限大的話意味著點(diǎn)擊將變得很容易，操作時(shí)間會(huì)很短。這是因?yàn)椴还苁裁淳W(wǎng)絡(luò)產(chǎn)品都需要借助物理設(shè)備平臺(tái)呈現(xiàn)，鼠標(biāo)無(wú)法突破平臺(tái)邊緣，那么其在移動(dòng)過(guò)程中就不需要考慮超出屏幕范圍的可能，也就是用戶在移動(dòng)鼠標(biāo)的時(shí)候不管你怎么大幅度移動(dòng)，鼠標(biāo)都不會(huì)超過(guò)屏幕范圍且停在邊緣，邊緣處的物體可以輕易被選中。

因此在屏幕邊緣位置特別適合放置菜單欄這種系統(tǒng)級(jí)的操作，此時(shí)鼠標(biāo)在移動(dòng)到屏幕邊緣后不需要再大幅度的移動(dòng)，只需要微調(diào)即可選中，用戶可在短時(shí)間內(nèi)完成系統(tǒng)菜單內(nèi)的選擇操作。

例如在mac電腦中，你可以輕易選擇底部貼邊位置的Docker欄，且系統(tǒng)支持Docker欄展示在屏幕的左邊、底部、右邊（上邊有應(yīng)用程序菜單區(qū)域），這些其實(shí)都是運(yùn)用了費(fèi)茨定律中“邊緣無(wú)限大”的原理。

屏幕邊緣不單單可以放菜單欄，還可以放按鈕這樣的元素。

例如在界面中主按鈕位置的設(shè)計(jì)原則也是依托于此。它與輔助按鈕的位置并不是簡(jiǎn)單的以左右原則進(jìn)行區(qū)分，而是考慮貼邊原則。畢竟不管鼠標(biāo)怎么移動(dòng)，它都會(huì)停留于屏幕邊緣的位置。

費(fèi)茨定律在瀏覽器的設(shè)計(jì)中特別常見，最早引入該定律設(shè)計(jì)的是谷歌瀏覽器，Chorme中書簽緊貼著屏幕邊緣，很好的節(jié)省了空間，我們也很容易點(diǎn)擊它們。

2. 關(guān)聯(lián)按鈕的親密性原則

在界面中我們發(fā)現(xiàn)有很多操作彼此相似，它們之間有著相關(guān)聯(lián)的效果。

那么我們?cè)撊绾巫屗鼈兛雌饋?lái)更有秩序？

通過(guò)親密性原則，我們可以對(duì)界面中的按鈕進(jìn)行簡(jiǎn)單的分類，將有關(guān)聯(lián)的按鈕進(jìn)行組合。當(dāng)把這些按鈕三五成組的放在一起的時(shí)候，我們即可以避免界面中的操作混亂，也可以避免這一連串的操作看起來(lái)毫無(wú)關(guān)聯(lián)。關(guān)聯(lián)按鈕的設(shè)計(jì)上，我們可以采取視覺以及間距兩種方式。

視覺的相似，增強(qiáng)用戶對(duì)它們親密性的認(rèn)知；

間距的縮短，減少了鼠標(biāo)在不同按鈕之間的移動(dòng)的時(shí)間。

3. 按鈕尺寸的適應(yīng)性原則

菲茨定律里面指出距離一致的情況下，目標(biāo)元素大的話用戶可以很輕易的點(diǎn)擊，假設(shè)目標(biāo)元素較小的話會(huì)花費(fèi)較多的時(shí)間。這里的目標(biāo)元素的大小不單單是指目標(biāo)元素實(shí)際的設(shè)計(jì)尺寸，也包含了目標(biāo)元素可點(diǎn)擊的熱區(qū)范圍。

例如在表格中復(fù)雜的篩選、排序、搜索等的全局操作等可以通過(guò)擴(kuò)大熱區(qū)來(lái)幫助用戶點(diǎn)擊。

那么是不是按鈕越大可用性就越好呢？

我們回看下菲茨定律本身的圖表模型，它是對(duì)數(shù)函數(shù)而不是線性函數(shù)，隨著目標(biāo)的增大，它的可用性并不會(huì)增加。換句話說(shuō)按鈕在界面內(nèi)按鈕尺寸并不是越大越好，如果它的尺寸已經(jīng)很合理且科學(xué)了，那么即使再放大，對(duì)可用性的提升也并非那么明顯。

4. 按鈕層級(jí)的有序性原則

主按鈕作為按鈕組中重要的元素，是頁(yè)面中最重要的操作，它需要讓用戶看一眼就清楚在界面內(nèi)進(jìn)行什么操作。

但是為了讓用戶在同等距離的鼠標(biāo)移動(dòng)中對(duì)按鈕組內(nèi)的按鈕準(zhǔn)確點(diǎn)擊，我們需要讓主按鈕與輔助按鈕之間有著足夠差異化的視覺比對(duì)，這樣才能讓鼠標(biāo)點(diǎn)擊有著清晰的著陸點(diǎn)。

例如阿里云中的網(wǎng)站備案模塊，「開始備案」與「查看備案進(jìn)度」兩個(gè)按鈕在距離屏幕右側(cè)邊距一致的情況下，通過(guò)較高視覺的按鈕引導(dǎo)用戶進(jìn)行網(wǎng)站的備案操作。

不單單是這種功能性場(chǎng)景，有時(shí)候?yàn)榱藰I(yè)務(wù)上的引流，我們可以通過(guò)視覺層次刻意的營(yíng)造來(lái)為業(yè)務(wù)引流。

例如阿里云中中的產(chǎn)品查看，通過(guò)對(duì)「查看詳情」以及「產(chǎn)品文檔」這兩個(gè)按鈕視覺層次的差異化設(shè)計(jì)，引導(dǎo)用戶進(jìn)入不同產(chǎn)品的門戶頁(yè)查看其具體的內(nèi)容。

在應(yīng)用的時(shí)候我們不單單可以利用視覺層級(jí)的提升提高點(diǎn)擊效率，我們也可以通過(guò)弱化按鈕的視覺層級(jí)，增加操作的距離，降低被點(diǎn)擊的可能。

例如阿里云中在未登錄前在頂部導(dǎo)航的位置很清晰的看到引導(dǎo)「注冊(cè)」以及「登錄」的高亮入口，而當(dāng)用戶登錄之后則需要點(diǎn)擊右上角的用戶頭像，在懸停的菜單下方才能找到采用降了視覺層級(jí)的灰色文字展示的「退出登錄」操作。

5. 按鈕位置的臨近性原則

距離越近，鼠標(biāo)移動(dòng)的幅度超出目標(biāo)區(qū)域的風(fēng)險(xiǎn)就越小。

當(dāng)操作區(qū)域過(guò)小，為了提高點(diǎn)擊的準(zhǔn)確度，我們可以大幅縮短與目標(biāo)區(qū)域的距離，保持相關(guān)操作的臨近性。

例如在下拉菜單中，用戶只需鼠標(biāo)移動(dòng)到被操作的目標(biāo)對(duì)象，點(diǎn)擊即可在原處彈出該目標(biāo)對(duì)象的操作菜單，緊接著小幅度微調(diào)，即可精準(zhǔn)定位到操作區(qū)域，大幅度提升點(diǎn)擊效率。

三、寫在最后

通過(guò)設(shè)計(jì)提升用戶的操作效率說(shuō)起來(lái)很容易，設(shè)計(jì)過(guò)程中其實(shí)很容易被忽視。

以上就是我對(duì)費(fèi)茨定律在B端設(shè)計(jì)中的基本認(rèn)識(shí)。

我從工作中涉及到的部分中闡述了有關(guān)費(fèi)茨定律的相關(guān)知識(shí)，可能有所欠缺，也歡迎對(duì)該定律感興趣的同學(xué)私信討論~