交互七大定律之菲茨定律

我們先來看看雅虎ued繪制的關(guān)于Fitts’ Law的Q版小漫畫:

圖片發(fā)自簡書App

Fitts’ Law / 菲茨定律(費茨法則)

1、一句話描述:

任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關(guān),距離越大時間越長,目標越大時間越短。

2、定律內(nèi)容:

從一個起始位置移動到一個最終目標所需的時間由兩個參數(shù)來決定,到目標的距離和目標的大小(上圖中的 D與 W),用數(shù)學公式表達為時間 T = a + b log2(D/W+1)。

解讀:

圖片發(fā)自簡書App
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)放到了屏幕的最下方;這樣的話底欄就變得“無限可選中”,因為用戶不能將光標移到底欄下方所以在向底欄方向做出大幅度移動后光標始終是落在底欄上的。

圖片發(fā)自簡書App

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


圖片發(fā)自簡書App

屏幕邊緣,W無限大,T近似等于0


在Windows中,開始菜單在屏幕的左下角,這個角落是“無限可選中”的,因為不管用戶朝左下角方向做多大幅度的擺動,光標總是會停在開始菜單按鈕的上方。(另一個案例:QQ右上角吸附隱藏,光標移動到右上角彈出)

圖片發(fā)自簡書App

Windows7,開始菜單在屏幕的左下角


圖片發(fā)自簡書App

屏幕角落,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),由于移動距離的變長,移動時間的對比不太強烈。

圖片發(fā)自簡書App

MAC OS 的 menu bar位于頂部邊緣

圖片發(fā)自簡書App

windows os 的menu bar 位于title bar下方


另一個對比案例:IE瀏覽器和chrome瀏覽器的便簽欄設(shè)計


圖片發(fā)自簡書App

IE瀏覽器的便簽欄


圖片發(fā)自簡書App

chrome瀏覽器的標簽欄


例三、鼠標右擊菜單設(shè)計:縮短當前位置到目標區(qū)域的距離。

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

圖片發(fā)自簡書App

右鍵菜單縮短了光標的移動距離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)致用戶更難于點擊某個想要瀏覽的頁面的鏈接。

圖片發(fā)自簡書App

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


3)、將用戶最有可能點擊(或最想要)的按鈕放大。例如,將”登陸”按鈕設(shè)計的更大:

圖片發(fā)自簡書App

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


4)、將動作分類 – 如果相關(guān)的操作按鈕靠近彼此的話,則不僅可以在視覺上增強用戶對它們相關(guān)性的認知,還可以減少光標在它們之間移動所需的距離和時間。

例四、移動端設(shè)計中的應(yīng)用

移動端交互設(shè)計中也有很多案例應(yīng)用了Fitts' Law,舉一個Android系統(tǒng)中刪除應(yīng)用的例子,用戶拖拽想要刪除的應(yīng)用到頂部刪除,頂部W無窮大,增加了用戶操作效率和精準度。

圖片發(fā)自簡書App

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


Fitts' Law鼓勵減少距離,增加目標大小以提升用戶效率,但反過來應(yīng)用也會有意想不到的效果,比如iPhone關(guān)機,不采用按鈕點擊,而采用滑動操作,這樣雖然減低了用戶操作效率,但增加用戶操作時間可以起到警示用戶謹慎操作的目的。

圖片發(fā)自簡書App

反例:iPhone關(guān)機操作

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內(nèi)容