菲茨定律與互聯(lián)網(wǎng)設(shè)計(jì) （Fitts’ Law）
菲茨定律是用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型史汗。 它由保羅.菲茨在1954年首先提出。這個(gè)模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對(duì)距離以及目標(biāo)的大小拒垃。菲茨定律雖然在很多領(lǐng)域都得到了應(yīng)用但其在人機(jī)交互（HCI）和設(shè)計(jì)領(lǐng)域的影響卻最為廣泛和深遠(yuǎn)停撞。（用于估算用戶移動(dòng)光標(biāo)點(diǎn)擊鏈接或控件按鈕所需的時(shí)間）目的地明確的移動(dòng)可以細(xì)分為兩個(gè)部分：首先一個(gè)大幅度的移動(dòng)將光標(biāo)移向與目標(biāo)大致相同的方向和區(qū)域；緊接著是一系列精細(xì)的小幅度微調(diào)來(lái)將光標(biāo)精確定位在目標(biāo)中心。你現(xiàn)在就可以做一個(gè)小實(shí)驗(yàn)來(lái)觀察這一過(guò)程–舉起你的手臂并試著用手指指向遠(yuǎn)處的一個(gè)小物體戈毒，例如遠(yuǎn)處墻上的一個(gè)電燈開關(guān)艰猬。開始你的手臂可能會(huì)往開關(guān)的位置大幅的移動(dòng)而且很有可能稍微過(guò)頭了一點(diǎn)。接下來(lái)你會(huì)做一些微小的調(diào)整動(dòng)作直至你的手指正好對(duì)準(zhǔn)目標(biāo)開關(guān)的中心÷袷校現(xiàn)在你可以試著指向一個(gè)更大的物體–比如說(shuō)電視或一面墻壁冠桃。這一次你也會(huì)以大幅度的手臂動(dòng)作來(lái)使手指指向目標(biāo)方向， 但因?yàn)槟繕?biāo)體積很大所以一般情況下你只需要做很少（甚至不需要任何)的微調(diào)道宅。
讓我們來(lái)看下面這個(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)上停下來(lái)之前不需要做太精細(xì)的調(diào)整在下一個(gè)例子中省咨，屏幕的右方有一個(gè)小得多的目標(biāo)所以用戶快速點(diǎn)擊目標(biāo)會(huì)困難得多肃弟。
因?yàn)橛脩粜枰獙⒐鈽?biāo)移動(dòng)較長(zhǎng)距離而且目標(biāo)面積很小所以在光標(biāo)正確的對(duì)準(zhǔn)目標(biāo)前需要做一系列精細(xì)的調(diào)整動(dòng)作。但如果同樣大小的目標(biāo)距離很近的話零蓉，因?yàn)榈竭_(dá)目標(biāo)范圍所需的初始動(dòng)作很小所以準(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)放在屏幕的邊緣或角落上來(lái)使其更容易被選中摊唇。因?yàn)樵谄聊贿吘壓徒锹湮恢脮r(shí)它們是“無(wú)限可選中”的；具體一點(diǎn)來(lái)說(shuō)就是–有一個(gè)隱形的邊界來(lái)阻止用戶的初始大幅移動(dòng)讓光標(biāo)超出目標(biāo)區(qū)域范圍涯鲁，這樣的話普通指向性移動(dòng)的第二步“微調(diào)”動(dòng)作就不需要了巷查。
這個(gè)方法在兩大主流OS中都起到了很好的效果：Mac OS X默認(rèn)將底欄（Dock)放到了屏幕的最下方；這樣的話底欄就變得“無(wú)限可選中”抹腿，因?yàn)橛脩舨荒軐⒐鈽?biāo)移到底欄下方所以在向底欄方向做出大幅度移動(dòng)后光標(biāo)始終是落在底欄上的岛请。
在Windows中，開始菜單在屏幕的左下角警绩，這個(gè)角落是“無(wú)限可選中”的崇败，因?yàn)椴还苡脩舫笙陆欠较蜃龆啻蠓鹊臄[動(dòng)，光標(biāo)總是會(huì)停在開始菜單按鈕的上方肩祥。
Mac OS X系統(tǒng)和Windows系統(tǒng)的一個(gè)最大不同之處便是程序菜單的位置后室。Mac OS X將菜單置于屏幕的頂端而Windows將它們放置在單獨(dú)的應(yīng)用程序窗口上微渠。菲茨定律顯示在許多情況下Mac的做法是更好的：在Mac OS X中用戶不論如何將光標(biāo)拋向屏幕頂端其總是會(huì)停在菜單上。 而在Windows中的窗口模式下應(yīng)用程序菜單則沒有像Mac中的“無(wú)限可選中”的屬性咧擂。
但是逞盆，Mac的做法也開始凸顯出其局域性。雖然Mac OS X下的程序菜單是“無(wú)限可選中”的松申，不要忘了菲茨定律也考慮到了用戶當(dāng)前定位點(diǎn)與目標(biāo)的相對(duì)距離云芦。隨著顯示器尺寸越來(lái)越大，雙/多屏顯示器的配置越來(lái)越常見贸桶。Mac的用戶不得不在這些情況下穿過(guò)很長(zhǎng)的距離來(lái)讓光標(biāo)到達(dá)主屏幕的頂端菜單舅逸。這樣的話長(zhǎng)距離拖動(dòng)光標(biāo)所耗費(fèi)的時(shí)間可能會(huì)超出不用做細(xì)微調(diào)整來(lái)矯正光標(biāo)位置而省下的時(shí)間。
菲茨定律的應(yīng)用
網(wǎng)頁(yè)設(shè)計(jì)師最大的遺憾之一就是不能利用瀏覽器的邊角和邊緣作為可“無(wú)限可選中”的區(qū)域皇筛。不過(guò)設(shè)計(jì)師仍然可以按照菲茨定律在設(shè)計(jì)上做一些優(yōu)化琉历。
?放大鏈接點(diǎn)擊區(qū)域。在鏈接文字周圍放置可點(diǎn)擊的填充區(qū)域水醋，這樣用戶想要點(diǎn)擊的鏈接文本會(huì)有更大的容錯(cuò)性旗笔。
?當(dāng)您有幾個(gè)放置在一起的可點(diǎn)擊目標(biāo)或鏈接時(shí)，把它們的體積增大或增加他們之間空白區(qū)域的大小拄踪。搜索結(jié)果中的網(wǎng)頁(yè)導(dǎo)航鏈接通常都有很差的可用性蝇恶。例如，下圖中的搜索結(jié)果頁(yè)面就顯示了太多的結(jié)果惶桐，并且這些結(jié)果互相之間也離得太近：
亞馬遜（Amazon)在處理搜索結(jié)果的方法上則要高明許多
?將用戶最有可能點(diǎn)擊（或最想要）的按鈕放大撮弧。例如，將”O(jiān)K”按鈕設(shè)計(jì)的更大：
?將動(dòng)作分類–如果相關(guān)的操作按鈕靠近彼此的話姚糊，則不僅可以在視覺上增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知贿衍，還可以減少光標(biāo)在它們之間移動(dòng)所需的距離和時(shí)間。
最后請(qǐng)記住救恨，一定要敢于嘗試贸辈！37 Signal在它們的產(chǎn)品Sortfolio主頁(yè)的“Signup”按鈕上就有一個(gè)靈活運(yùn)用菲茨定律的有趣實(shí)驗(yàn)–當(dāng)用戶的光標(biāo)劃過(guò)時(shí)按鈕會(huì)自動(dòng)變大并顯示更多信息–這樣的話當(dāng)用戶即將開始做細(xì)微調(diào)整以精確定位光標(biāo)至按鈕時(shí)，微調(diào)的必要性因?yàn)榘粹o的自動(dòng)增大而大大減少了忿薇！多么絕妙的創(chuàng)意和應(yīng)用叭雇帧！
本文轉(zhuǎn)自網(wǎng)絡(luò)署浩，如有侵權(quán)揉燃，立即刪除。
原文鏈接? http://blog.sina.com.cn/s/blog_5f63e3d80102vd0l.html
