我們先來看看雅虎ued繪制的關(guān)于Fitts’ Law的Q版小漫畫:
Fitts’ Law / 菲茨定律(費茨法則)
1、一句話描述:
任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關(guān),距離越大時間越長,目標越大時間越短。
2、定律內(nèi)容:
從一個起始位置移動到一個最終目標所需的時間由兩個參數(shù)來決定,到目標的距離和目標的大小(上圖中的 D與 W),用數(shù)學公式表達為時間 T = a + b log2(D/W+1)。
解讀:
T=移動設(shè)備所需時長;a,b是經(jīng)驗常量,D=設(shè)備起始位置和目標位置的距離;W=目標的寬度大小。
兩點含義:
1)、設(shè)備當前位置和目標位置的距離D越長,所用時間越長;
2)、目標的大小W越大,所用時間越短。
理解:
目的地明確的移動可以細分為兩個部分,以移動光標為例:
第一步、首先是一個大幅度的移動將光標移向與目標大致相同的方向和區(qū)域;
第二步、緊接著是一系列精細的小幅度微調(diào)來將光標精確定位在目標中心。
小實驗幫助理解Fitts’ Law:舉起你的手臂并試著用手指指向遠處的一個小物體,例如遠處墻上的一個電燈開關(guān)。開始你的手臂可能會往開關(guān)的位置大幅的移動而且很有可能稍微過頭了一點。接下來你會做一些微小的調(diào)整動作直至你的手指正好對準目標開關(guān)的中心。現(xiàn)在你可以試著指向一個更大的物體 – 比如說電視或一面墻壁。這一次你也會以大幅度的手臂動作來使手指指向目標方向, 但因為目標體積很大所以一般情況下你只需要做很少(甚至不需要任何)的微調(diào)。
3、菲茨定律的啟示:
1)、按鈕等可點擊對象需要合理的大小尺寸。
2)、屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因為邊角是巨大的目標,它們無限高或無限寬,你不可能用鼠標超過它們。即不管你移動了多遠,鼠標最終會停在屏幕的邊緣,并定位到按鈕或菜單的上面。
3)、出現(xiàn)在用戶正在操作的對象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開得更快,因為不需要移動到屏幕的其他位置。
4、典型應(yīng)用及案例:
菲茨定律雖然在很多領(lǐng)域都得到了應(yīng)用,但其在人機交互(HCI)和設(shè)計領(lǐng)域的影響卻最為廣泛和深遠的。
例一、油門和剎車:增大目標大小、減小與目標的距離來提高效率。
我們從日常生活中體會下費茨法則的應(yīng)用:
汽車上的剎車踏板和油門踏板:它們相距很近(D小),并且剎車踏板要比油門踏板大很多(W大),那么它們?yōu)槭裁礇]有被設(shè)計成相距很遠,或者將兩者的大小顛倒過來呢?使用經(jīng)驗告訴我們,這樣的設(shè)計可以使得駕駛員能夠以最短的時間把腳從油門踏板移動到剎車踏板上,從而達到以最快的速度準確制動的目的(D小,W大,時間短)。
可能去過電玩大世界的人會有這樣的疑問,電玩大世界中那些賽車的油門和剎車踏板大小剛好與常規(guī)的相反,這又是為什么?這也正是應(yīng)用費茨法則的高明之處,因為游戲中我們需要的是更快的速度去超越對手,因此你會更加容易的去踩到油門,爭取更多的時間,而且你人身安全不會受到威脅,因為剎車踏板就明顯變小了。
例二、window和mac系統(tǒng)菜單設(shè)計:增大目標大小以縮短定位時間(邊緣無限大)。
兩大主流OS中又有非常好的案例:Mac OS X默認將底欄(Dock)放到了屏幕的最下方;這樣的話底欄就變得“無限可選中”,因為用戶不能將光標移到底欄下方所以在向底欄方向做出大幅度移動后光標始終是落在底欄上的。
Mac OS X默認將底欄(Dock)放到了屏幕的最下方
屏幕邊緣,W無限大,T近似等于0
在Windows中,開始菜單在屏幕的左下角,這個角落是“無限可選中”的,因為不管用戶朝左下角方向做多大幅度的擺動,光標總是會停在開始菜單按鈕的上方。(另一個案例:QQ右上角吸附隱藏,光標移動到右上角彈出)
Windows7,開始菜單在屏幕的左下角
屏幕角落,W無限大
這方面最經(jīng)典的例子是 Windows 操作系統(tǒng)和MAC操作系統(tǒng)中的應(yīng)用程序菜單區(qū)域(menu bar)位置的設(shè)計。實際測試和理論計算結(jié)果都表明,在使用 MAC操作系統(tǒng) 時,用戶點擊某個菜單所需的平均時間要比Windows上快0.4秒(《The humane Interface》Jef Raskin )。注:隨著屏幕越來越大、雙屏的出現(xiàn),由于移動距離的變長,移動時間的對比不太強烈。
MAC OS 的 menu bar位于頂部邊緣
windows os 的menu bar 位于title bar下方
另一個對比案例:IE瀏覽器和chrome瀏覽器的便簽欄設(shè)計
IE瀏覽器的便簽欄
chrome瀏覽器的標簽欄
例三、鼠標右擊菜單設(shè)計:縮短當前位置到目標區(qū)域的距離。
右鍵菜單技術(shù)(或上下文菜單)是采取這種思路的一個很好的例子。為了彈出這種菜單,用戶只要將鼠標指針移動到需要對其進行操作的某個對象所占據(jù)的區(qū)域中并單擊右鍵即可。而在一般情況下,這個移動的距離要遠小于將鼠標指針移動到應(yīng)用程序主窗口頂部的下拉菜單區(qū)域。
右鍵菜單縮短了光標的移動距離D,提高了效率
例四、WEB設(shè)計中的應(yīng)用
網(wǎng)頁設(shè)計師最大的遺憾之一就是不能利用瀏覽器的邊角和邊緣作為可“無限可選中”的區(qū)域。不過設(shè)計師仍然可以按照菲茨定律在設(shè)計上做一些優(yōu)化。
1)、放大鏈接點擊區(qū)域。在鏈接文字周圍放置可點擊的填充區(qū)域,這樣用戶想要點擊的鏈接文本會有更大的容錯性。
2)、當您有幾個放置在一起的可點擊目標或鏈接時,把它們的體積增大或增加他們之間空白區(qū)域的大小。搜索結(jié)果中的網(wǎng)頁導(dǎo)航鏈接通常都有很差的可用性。例如,下圖所示的搜索結(jié)果頁面的底部,用戶可以通過點擊鏈接文字為“1”,“2”到“10”跳轉(zhuǎn)到特定的頁面。這里的問題在于這些超鏈接的可點擊區(qū)域太小,只有一個數(shù)字加一個“o”的大小,因此很難快速將鼠標指針準確移動到它們上面。在某些情況下,這種設(shè)計可能會帶來很大的使用困難。例如,鼠標靈敏度低難以定位,又或者,一些老年用戶或者存在運動機能障礙的用戶在精確控制鼠標方面有困難。這些都將導(dǎo)致用戶更難于點擊某個想要瀏覽的頁面的鏈接。
搜索結(jié)果頁面的底部頁碼鏈接
3)、將用戶最有可能點擊(或最想要)的按鈕放大。例如,將”登陸”按鈕設(shè)計的更大:
登陸按鈕被設(shè)計的更大
4)、將動作分類 – 如果相關(guān)的操作按鈕靠近彼此的話,則不僅可以在視覺上增強用戶對它們相關(guān)性的認知,還可以減少光標在它們之間移動所需的距離和時間。
例四、移動端設(shè)計中的應(yīng)用
移動端交互設(shè)計中也有很多案例應(yīng)用了Fitts' Law,舉一個Android系統(tǒng)中刪除應(yīng)用的例子,用戶拖拽想要刪除的應(yīng)用到頂部刪除,頂部W無窮大,增加了用戶操作效率和精準度。
miui系統(tǒng)中的刪除應(yīng)用
Fitts' Law鼓勵減少距離,增加目標大小以提升用戶效率,但反過來應(yīng)用也會有意想不到的效果,比如iPhone關(guān)機,不采用按鈕點擊,而采用滑動操作,這樣雖然減低了用戶操作效率,但增加用戶操作時間可以起到警示用戶謹慎操作的目的。
反例:iPhone關(guān)機操作