交互設(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ù)來(lái)決定,到目標(biāo)的距離和目標(biāo)的大小,用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1),其中:T代表完成移動(dòng)所需的平均時(shí)間,a代表光標(biāo)開(kāi)始/停止時(shí)間,b代表光標(biāo)的移動(dòng)速度,D代表從起點(diǎn)到目標(biāo)中心的距離,W代表目標(biāo)的寬度。
為了能更好的理解這一定律,我們可以做一個(gè)小實(shí)驗(yàn)來(lái)觀(guān)察這一過(guò)程:舉起你的手臂并試著用手指指向遠(yuǎn)處的一個(gè)小物體,例如遠(yuǎn)處墻上的一個(gè)電燈開(kāi)關(guān)。你會(huì)發(fā)現(xiàn)你的手指很難迅速而準(zhǔn)確的對(duì)準(zhǔn)目標(biāo),于是你需要做一些微小的調(diào)整動(dòng)作直到把你的手指對(duì)準(zhǔn)開(kāi)關(guān)的中心?,F(xiàn)在你可以試著指向一個(gè)更大的物體 ,例如一面墻壁。這一次你很輕易的就能將手指對(duì)準(zhǔn)目標(biāo), 而且基本不需要做任何的微調(diào)。
我們?cè)賮?lái)看一個(gè)例子:下圖中的紅色盒子代表目標(biāo);虛線(xiàn)代表從起點(diǎn)至目標(biāo)的移動(dòng)軌跡,目標(biāo)上灰色左右箭頭之間的范圍是用戶(hù)光標(biāo)減速并微調(diào)以彌補(bǔ)誤差的區(qū)域。在右方有一個(gè)較大的目標(biāo),因?yàn)槊娣e很大所以用戶(hù)從任意點(diǎn)快速點(diǎn)擊應(yīng)該不會(huì)很難:
大的目標(biāo)區(qū)域意味著光標(biāo)在目標(biāo)上停下來(lái)之前不需要做太精細(xì)的調(diào)整。我們?cè)賮?lái)看一個(gè)小目標(biāo)的例子:
因?yàn)橛脩?hù)需要將光標(biāo)移動(dòng)較長(zhǎng)距離而且目標(biāo)面積很小所以在光標(biāo)正確的對(duì)準(zhǔn)目標(biāo)前需要做一系列精細(xì)的調(diào)整動(dòng)作,所以點(diǎn)擊的難度增大了很多。但如果同樣大小的目標(biāo)距離很近的話(huà),準(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ì)的。在上面的例子中,如果用戶(hù)從和目標(biāo)平行的位置水平移動(dòng)光標(biāo),那么這個(gè)按鈕的相對(duì)目標(biāo)區(qū)域就很大。但如果用戶(hù)光標(biāo)的初始位置在目標(biāo)的上方或下方,那么這個(gè)長(zhǎng)方形按鈕的相對(duì)目標(biāo)區(qū)域則小得多。
除了調(diào)整目標(biāo)的大小以外,我們還可以將目標(biāo)放在屏幕的邊緣或角落上來(lái)使其更容易被選中。屏幕的邊界自然會(huì)阻止用戶(hù)超出目標(biāo)區(qū)域范圍的大幅移動(dòng),這樣的話(huà)第二步“微調(diào)”的動(dòng)作也就不需要了。
總而言之:目標(biāo)越大,指向越快,時(shí)間越短。同樣地,目標(biāo)越近,指向越快,時(shí)間越短。也就是說(shuō),定位一個(gè)目標(biāo)的時(shí)間,取決于目標(biāo)與當(dāng)前位置的距離,以及目標(biāo)的大小。
菲茨定律對(duì)我們?cè)O(shè)計(jì)上的啟示:
- 按鈕等可點(diǎn)擊對(duì)象需要合理的大小尺寸,將用戶(hù)最有可能點(diǎn)擊最想要點(diǎn)擊的按鈕盡量放大。
- 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素,因?yàn)檫吔鞘蔷薮蟮哪繕?biāo),它們無(wú)限高或無(wú)限寬,你不可能用鼠標(biāo)超過(guò)它們。即不管你移動(dòng)了多遠(yuǎn),鼠標(biāo)最終會(huì)停在屏幕的邊緣,并定位到按鈕或菜單的上面。
- 讓相關(guān)的操作按鈕靠近彼此,這樣做不僅可以在視覺(jué)上增強(qiáng)用戶(hù)對(duì)它們相關(guān)性的認(rèn)知,還可以減少光標(biāo)在它們之間移動(dòng)所需的距離和時(shí)間。
- 出現(xiàn)在用戶(hù)正在操作的對(duì)象旁邊的控制菜單(右鍵菜單)比下拉菜單或工具欄可以被打開(kāi)得更快,因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。
資料來(lái)源:《談?wù)?nbsp;Fitts定律(費(fèi)茨法則)》《菲茨定律與互聯(lián)網(wǎng)設(shè)計(jì) Fitts’Law》《交互設(shè)計(jì)七大定律》
歡迎和我們共同探討,一起做出好看好用的設(shè)計(jì)。
本文地址:http://irelandcustomcontracting.com/tutorial/id1802.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏