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

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

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

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

我們再來看一個例子：下圖中的紅色盒子代表目標(biāo)；虛線代表從起點至目標(biāo)的移動軌跡，目標(biāo)上灰色左右箭頭之間的范圍是用戶光標(biāo)減速并微調(diào)以彌補誤差的區(qū)域。在右方有一個較大的目標(biāo)，因為面積很大所以用戶從任意點快速點擊應(yīng)該不會很難：

大的目標(biāo)區(qū)域意味著光標(biāo)在目標(biāo)上停下來之前不需要做太精細的調(diào)整。我們再來看一個小目標(biāo)的例子：

因為用戶需要將光標(biāo)移動較長距離而且目標(biāo)面積很小所以在光標(biāo)正確的對準(zhǔn)目標(biāo)前需要做一系列精細的調(diào)整動作，所以點擊的難度增大了很多。但如果同樣大小的目標(biāo)距離很近的話，準(zhǔn)確點擊它的難度也會小很多。距離越近， 初始動作因為幅度太大而超出目標(biāo)區(qū)域的風(fēng)險也就越小。

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

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

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

菲茨定律對我們設(shè)計上的啟示：

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

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

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