編輯導(dǎo)讀：大家有沒(méi)有想過(guò)為什么按鈕越大，越易于點(diǎn)擊 ？為什么相關(guān)按鈕需要相互靠近擺放 ？為什么?Win 系統(tǒng)要將「開(kāi)始」按鈕放在角落 ？這些設(shè)定的背后其實(shí)都有一個(gè)在人機(jī)交互中，非常重要的定律 —— 費(fèi)茨定律。本文作者結(jié)合具體案例，從4個(gè)方面對(duì)費(fèi)茨定律進(jìn)行了梳理說(shuō)明，與大家分享。

補(bǔ)充一張雅虎ued繪制的關(guān)于Fitts’ Law的Q版小漫畫(huà)，先初步了解下：

Fitts’ Law / 菲茨定律（費(fèi)茨法則）

Fitts’ Law / 菲茨定律（費(fèi)茨法則）

1. 一句話描述

任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時(shí)間越長(zhǎng)，目標(biāo)越大時(shí)間越短。

2. 定律內(nèi)容

從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離和目標(biāo)的大?。ㄉ蠄D中的 D與 W），用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)。

解讀：

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

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

T=移動(dòng)設(shè)備所需時(shí)長(zhǎng)；a,b是經(jīng)驗(yàn)常量，D=設(shè)備起始位置和目標(biāo)位置的距離；W=目標(biāo)的寬度大小。

兩點(diǎn)含義：

1）設(shè)備當(dāng)前位置和目標(biāo)位置的距離D越長(zhǎng)，所用時(shí)間越長(zhǎng)；

2）目標(biāo)的大小W越大，所用時(shí)間越短。

理解：

目的地明確的移動(dòng)可以細(xì)分為兩個(gè)部，以移動(dòng)光標(biāo)為例：

第一步，首先是一個(gè)大幅度的移動(dòng)將光標(biāo)移向與目標(biāo)大致相同的方向和區(qū)域；

第二步，緊接著是一系列精細(xì)的小幅度微調(diào)來(lái)將光標(biāo)精確定位在目標(biāo)中心。

小實(shí)驗(yàn)幫助理解Fitts’ Law：舉起你的手臂并試著用手指指向遠(yuǎn)處的一個(gè)小物體，例如遠(yuǎn)處墻上的一個(gè)電燈開(kāi)關(guān)。開(kāi)始你的手臂可能會(huì)往開(kāi)關(guān)的位置大幅的移動(dòng)而且很有可能稍微過(guò)頭了一點(diǎn)。接下來(lái)你會(huì)做一些微小的調(diào)整動(dòng)作直至你的手指正好對(duì)準(zhǔn)目標(biāo)開(kāi)關(guān)的中心?，F(xiàn)在你可以試著指向一個(gè)更大的物體 – 比如說(shuō)電視或一面墻壁。這一次你也會(huì)以大幅度的手臂動(dòng)作來(lái)使手指指向目標(biāo)方向， 但因?yàn)槟繕?biāo)體積很大所以一般情況下你只需要做很少（甚至不需要任何)的微調(diào)。

3. 菲茨定律的啟示

1）按鈕等可點(diǎn)擊對(duì)象需要合理的大小尺寸。

2）屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)檫吔鞘蔷薮蟮哪繕?biāo)，它們無(wú)限高或無(wú)限寬，你不可能用鼠標(biāo)超過(guò)它們。即不管你移動(dòng)了多遠(yuǎn)，鼠標(biāo)最終會(huì)停在屏幕的邊緣，并定位到按鈕或菜單的上面。（下文結(jié)合案例解釋）

3）出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開(kāi)得更快，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。

4. 典型應(yīng)用及案例

菲茨定律雖然在很多領(lǐng)域都得到了應(yīng)用，但其在人機(jī)交互（HCI）和設(shè)計(jì)領(lǐng)域的影響卻最為廣泛和深遠(yuǎn)的。

例一：油門(mén)和剎車：增大目標(biāo)大小、減小與目標(biāo)的距離來(lái)提高效率。

我們從日常生活中體會(huì)下費(fèi)茨法則的應(yīng)用：

汽車上的剎車踏板和油門(mén)踏板：它們相距很近（D?。?，并且剎車踏板要比油門(mén)踏板大很多（W大），那么它們?yōu)槭裁礇](méi)有被設(shè)計(jì)成相距很遠(yuǎn)，或者將兩者的大小顛倒過(guò)來(lái)呢？使用經(jīng)驗(yàn)告訴我們，這樣的設(shè)計(jì)可以使得駕駛員能夠以最短的時(shí)間把腳從油門(mén)踏板移動(dòng)到剎車踏板上，從而達(dá)到以最快的速度準(zhǔn)確制動(dòng)的目的（D小，W大，時(shí)間短）。

可能去過(guò)電玩大世界的人會(huì)有這樣的疑問(wèn)，電玩大世界中那些賽車的油門(mén)和剎車踏板大小剛好與常規(guī)的相反，這又是為什么？這也正是應(yīng)用費(fèi)茨法則的高明之處，因?yàn)橛螒蛑形覀冃枰氖歉斓乃俣热コ綄?duì)手，因此你會(huì)更加容易的去踩到油門(mén)，爭(zhēng)取更多的時(shí)間，而且你人身安全不會(huì)受到威脅，因?yàn)閯x車踏板就明顯變小了。

例二：window和mac系統(tǒng)菜單設(shè)計(jì)：增大目標(biāo)大小以縮短定位時(shí)間（邊緣無(wú)限大）。

兩大主流OS中又有非常好的案例：Mac OS X默認(rèn)將底欄（Dock)放到了屏幕的最下方；這樣的話底欄就變得“無(wú)限可選中”，因?yàn)橛脩舨荒軐⒐鈽?biāo)移到底欄下方所以在向底欄方向做出大幅度移動(dòng)后光標(biāo)始終是落在底欄上的。

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

屏幕邊緣，W無(wú)限大，T近似等于0

在Windows中，開(kāi)始菜單在屏幕的左下角，這個(gè)角落是“無(wú)限可選中”的，因?yàn)椴还苡脩舫笙陆欠较蜃龆啻蠓鹊臄[動(dòng)，光標(biāo)總是會(huì)停在開(kāi)始菜單按鈕的上方。（另一個(gè)案例：QQ右上角吸附隱藏，光標(biāo)移動(dòng)到右上角彈出）

Windows7，開(kāi)始菜單在屏幕的左下角

屏幕角落，W無(wú)限大

這方面最經(jīng)典的例子是 Windows 操作系統(tǒng)和MAC操作系統(tǒng)中的應(yīng)用程序菜單區(qū)域(menu bar)位置的設(shè)計(jì)。實(shí)際測(cè)試和理論計(jì)算結(jié)果都表明，在使用 MAC操作系統(tǒng) 時(shí)，用戶點(diǎn)擊某個(gè)菜單所需的平均時(shí)間要比Windows上快0.4秒（《The humane Interface》Jef Raskin ）。

注：隨著屏幕越來(lái)越大、雙屏的出現(xiàn)，由于移動(dòng)距離的變長(zhǎng)，移動(dòng)時(shí)間的對(duì)比不太強(qiáng)烈。

MAC OS 的 menu bar位于頂部邊緣

windows os 的menu bar 位于title bar下方

另一個(gè)對(duì)比案例：IE瀏覽器和chrome瀏覽器的便簽欄設(shè)計(jì)

IE瀏覽器的便簽欄

chrome瀏覽器的標(biāo)簽欄

例三：鼠標(biāo)右擊菜單設(shè)計(jì)：縮短當(dāng)前位置到目標(biāo)區(qū)域的距離。

右鍵菜單技術(shù)（或上下文菜單）是采取這種思路的一個(gè)很好的例子。為了彈出這種菜單，用戶只要將鼠標(biāo)指針移動(dòng)到需要對(duì)其進(jìn)行操作的某個(gè)對(duì)象所占據(jù)的區(qū)域中并單擊右鍵即可。而在一般情況下，這個(gè)移動(dòng)的距離要遠(yuǎn)小于將鼠標(biāo)指針移動(dòng)到應(yīng)用程序主窗口頂部的下拉菜單區(qū)域。

右鍵菜單縮短了光標(biāo)的移動(dòng)距離D,提高了效率

例四：WEB設(shè)計(jì)中的應(yīng)用

網(wǎng)頁(yè)設(shè)計(jì)師最大的遺憾之一就是不能利用瀏覽器的邊角和邊緣作為可“無(wú)限可選中”的區(qū)域。不過(guò)設(shè)計(jì)師仍然可以按照菲茨定律在設(shè)計(jì)上做一些優(yōu)化。

1）放大鏈接點(diǎn)擊區(qū)域。在鏈接文字周圍放置可點(diǎn)擊的填充區(qū)域，這樣用戶想要點(diǎn)擊的鏈接文本會(huì)有更大的容錯(cuò)性。

2）當(dāng)您有幾個(gè)放置在一起的可點(diǎn)擊目標(biāo)或鏈接時(shí)，把它們的體積增大或增加他們之間空白區(qū)域的大小。搜索結(jié)果中的網(wǎng)頁(yè)導(dǎo)航鏈接通常都有很差的可用性。例如，下圖所示的搜索結(jié)果頁(yè)面的底部，用戶可以通過(guò)點(diǎn)擊鏈接文字為“1”，“2”到“10”跳轉(zhuǎn)到特定的頁(yè)面。這里的問(wèn)題在于這些超鏈接的可點(diǎn)擊區(qū)域太小，只有一個(gè)數(shù)字加一個(gè)“o”的大小，因此很難快速將鼠標(biāo)指針準(zhǔn)確移動(dòng)到它們上面。在某些情況下，這種設(shè)計(jì)可能會(huì)帶來(lái)很大的使用困難。例如，鼠標(biāo)靈敏度低難以定位，又或者，一些老年用戶或者存在運(yùn)動(dòng)機(jī)能障礙的用戶在精確控制鼠標(biāo)方面有困難。這些都將導(dǎo)致用戶更難于點(diǎn)擊某個(gè)想要瀏覽的頁(yè)面的鏈接。

搜索結(jié)果頁(yè)面的底部頁(yè)碼鏈接

3）將用戶最有可能點(diǎn)擊（或最想要）的按鈕放大。例如，將”登陸”按鈕設(shè)計(jì)的更大：

登陸按鈕被設(shè)計(jì)的更大

4）將動(dòng)作分類?–?如果相關(guān)的操作按鈕靠近彼此的話，則不僅可以在視覺(jué)上增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知，還可以減少光標(biāo)在它們之間移動(dòng)所需的距離和時(shí)間。

例五：移動(dòng)端設(shè)計(jì)中的應(yīng)用

移動(dòng)端交互設(shè)計(jì)中也有很多案例應(yīng)用了Fitts’ Law，舉一個(gè)Android系統(tǒng)中刪除應(yīng)用的例子，用戶拖拽想要?jiǎng)h除的應(yīng)用到頂部刪除，頂部W無(wú)窮大，增加了用戶操作效率和精準(zhǔn)度。

miui系統(tǒng)中的刪除應(yīng)用

Fitts’ Law鼓勵(lì)減少距離，增加目標(biāo)大小以提升用戶效率，但反過(guò)來(lái)應(yīng)用也會(huì)有意想不到的效果，比如iPhone關(guān)機(jī)，不采用按鈕點(diǎn)擊，而采用滑動(dòng)操作，這樣雖然減低了用戶操作效率，但增加用戶操作時(shí)間可以起到警示用戶謹(jǐn)慎操作的目的。

反例：iPhone關(guān)機(jī)操作

參考文獻(xiàn)：

• 騰訊CDC：菲茨定律與互聯(lián)網(wǎng)設(shè)計(jì) Fitts’Law
• Windows 設(shè)計(jì)規(guī)范中的鼠標(biāo)交互；
• 費(fèi)茲定律Fitts’ Law與使用者介面設(shè)計(jì)；
• Google Chrome 與 Fitts Law，一個(gè)很好的實(shí)踐；
• 談?wù)?Fitts 定律；
• 費(fèi)茨法則在交互設(shè)計(jì)中的應(yīng)用（Readlists）
• When You Shouldn’t Use Fitts’s Law To Measure User Experience

作者：小鑫；公眾號(hào)：chuangshe_space

本文由 @小鑫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。