交互設(shè)計(jì)原理之Fitts定律

圖趣這幾篇文章持續(xù)在關(guān)注交互設(shè)計(jì)原理，今天的文章主題也不例外，是交互設(shè)計(jì)原理之Fitts定律；

Fitts’ Law，我們通常翻譯為“菲茨定律”或“費(fèi)茨定律”。它由保羅.菲茨在1954年首先提出，具體內(nèi)容為：從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來決定，到目標(biāo)的距離和目標(biāo)的大小，用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)，其中：T代表完成移動(dòng)所需的平均時(shí)間，a代表光標(biāo)開始/停止時(shí)間，b代表光標(biāo)的移動(dòng)速度，D代表從起點(diǎn)到目標(biāo)中心的距離，W代表目標(biāo)的寬度。

為了能更好的理解這一定律，我們可以做一個(gè)小實(shí)驗(yàn)來觀察這一過程：舉起你的手臂并試著用手指指向遠(yuǎn)處的一個(gè)小物體，例如遠(yuǎn)處墻上的一個(gè)電燈開關(guān)。你會(huì)發(fā)現(xiàn)你的手指很難迅速而準(zhǔn)確的對(duì)準(zhǔn)目標(biāo)，于是你需要做一些微小的調(diào)整動(dòng)作直到把你的手指對(duì)準(zhǔn)開關(guān)的中心?，F(xiàn)在你可以試著指向一個(gè)更大的物體 ，例如一面墻壁。這一次你很輕易的就能將手指對(duì)準(zhǔn)目標(biāo)， 而且基本不需要做任何的微調(diào)。

我們?cè)賮砜匆粋€(gè)例子：下圖中的紅色盒子代表目標(biāo)；虛線代表從起點(diǎn)至目標(biāo)的移動(dòng)軌跡，目標(biāo)上灰色左右箭頭之間的范圍是用戶光標(biāo)減速并微調(diào)以彌補(bǔ)誤差的區(qū)域。在右方有一個(gè)較大的目標(biāo)，因?yàn)槊娣e很大所以用戶從任意點(diǎn)快速點(diǎn)擊應(yīng)該不會(huì)很難：

大的目標(biāo)區(qū)域意味著光標(biāo)在目標(biāo)上停下來之前不需要做太精細(xì)的調(diào)整。我們?cè)賮砜匆粋€(gè)小目標(biāo)的例子：

因?yàn)橛脩粜枰獙⒐鈽?biāo)移動(dòng)較長(zhǎng)距離而且目標(biāo)面積很小所以在光標(biāo)正確的對(duì)準(zhǔn)目標(biāo)前需要做一系列精細(xì)的調(diào)整動(dòng)作，所以點(diǎn)擊的難度增大了很多。但如果同樣大小的目標(biāo)距離很近的話，準(zhǔn)確點(diǎn)擊它的難度也會(huì)小很多。距離越近， 初始動(dòng)作因?yàn)榉忍蠖瞿繕?biāo)區(qū)域的風(fēng)險(xiǎn)也就越小。

對(duì)于形狀不規(guī)則的目標(biāo)而言，目標(biāo)區(qū)域的大小和移動(dòng)的方向是相對(duì)的。在上面的例子中，如果用戶從和目標(biāo)平行的位置水平移動(dòng)光標(biāo)，那么這個(gè)按鈕的相對(duì)目標(biāo)區(qū)域就很大。但如果用戶光標(biāo)的初始位置在目標(biāo)的上方或下方，那么這個(gè)長(zhǎng)方形按鈕的相對(duì)目標(biāo)區(qū)域則小得多。

除了調(diào)整目標(biāo)的大小以外，我們還可以將目標(biāo)放在屏幕的邊緣或角落上來使其更容易被選中。屏幕的邊界自然會(huì)阻止用戶超出目標(biāo)區(qū)域范圍的大幅移動(dòng)，這樣的話第二步“微調(diào)”的動(dòng)作也就不需要了。

總而言之：目標(biāo)越大，指向越快，時(shí)間越短。同樣地，目標(biāo)越近，指向越快，時(shí)間越短。也就是說，定位一個(gè)目標(biāo)的時(shí)間，取決于目標(biāo)與當(dāng)前位置的距離，以及目標(biāo)的大小。

菲茨定律對(duì)我們?cè)O(shè)計(jì)上的啟示：

• 按鈕等可點(diǎn)擊對(duì)象需要合理的大小尺寸，將用戶最有可能點(diǎn)擊最想要點(diǎn)擊的按鈕盡量放大。
• 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)檫吔鞘蔷薮蟮哪繕?biāo)，它們無限高或無限寬，你不可能用鼠標(biāo)超過它們。即不管你移動(dòng)了多遠(yuǎn)，鼠標(biāo)最終會(huì)停在屏幕的邊緣，并定位到按鈕或菜單的上面。
• 讓相關(guān)的操作按鈕靠近彼此，這樣做不僅可以在視覺上增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知，還可以減少光標(biāo)在它們之間移動(dòng)所需的距離和時(shí)間。
• 出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。

資料來源：《談?wù)?nbsp;Fitts定律（費(fèi)茨法則）》《菲茨定律與互聯(lián)網(wǎng)設(shè)計(jì) Fitts’Law》《交互設(shè)計(jì)七大定律》

歡迎和我們共同探討，一起做出好看好用的設(shè)計(jì)。