理解經(jīng)典的費(fèi)茨定律
發(fā)布時(shí)間:2022-01-06 10:11 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2

費(fèi)茨定律心理學(xué)家 Paul Fitts 提出,用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長(zhǎng),目標(biāo)越大時(shí)間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動(dòng),接著你會(huì)放慢速度直至找到杯子把手,這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律

如上圖所示,如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo) target,最短路徑一定是 D,最短路徑上容錯(cuò)的最長(zhǎng)路徑是 D+W,只要水平上移動(dòng)超過了 D+W 你就點(diǎn)不到了,而這個(gè)點(diǎn)擊動(dòng)作所耗的時(shí)間是一個(gè)常數(shù)加上一個(gè)以 D 為正比 W 為反比的函數(shù)的和。

讓我們來看下面這個(gè)例子:圖中右側(cè)的紅色方塊代表目標(biāo),虛線代表從起點(diǎn)至目標(biāo)的移動(dòng)軌跡,其范圍是用戶到達(dá)目標(biāo)前微調(diào)以彌補(bǔ)誤差的區(qū)域,在右方有一個(gè)較大的目標(biāo),因?yàn)槊娣e很大所以用戶從任意點(diǎn)快速點(diǎn)擊都會(huì)很容易,在目標(biāo)上停下來之前不需要做太精細(xì)的調(diào)整。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律

相反,如果把右邊紅色方塊縮小,用戶快速點(diǎn)擊目標(biāo)會(huì)困難得多,需要做一系列精細(xì)的調(diào)整動(dòng)作。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律

但如果同樣大小的目標(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)就越小。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律


按鈕越大越容易點(diǎn)擊


在頁(yè)面中,大而近的目標(biāo)區(qū)域意味著用戶不需要做太精細(xì)的調(diào)整就可以輕易的到達(dá)目標(biāo)。比如頁(yè)面中的大按鈕。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律


將按鈕放置在離開始點(diǎn)較近的地方


夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域,相比常見頂部搜索欄更方便操作,效率更快。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律


相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊


在設(shè)計(jì)注冊(cè)、登錄界面的時(shí)候,通常將「注冊(cè)」和「登錄」放到一起,不僅可以在視覺上增強(qiáng)用戶對(duì)他們相關(guān)性的認(rèn)知,還可以減少在他們之間的距離 。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律

△ 設(shè)計(jì)圖來自網(wǎng)絡(luò) 侵刪


適用邊界


費(fèi)茨定律鼓勵(lì)減少距離,增加目標(biāo)大小以提升用戶效率,但反過來亦適用,比如 iPhone 關(guān)機(jī),不使用按鈕點(diǎn)擊,而采用滑動(dòng)操作,這樣雖然降低了用戶操作效率,但增加用戶操作時(shí)間,以起到警示用戶謹(jǐn)慎避免誤操作的目的,所以“取消”按鈕放在底部方便點(diǎn)擊的地方。

用一篇超全面的文章,幫你讀懂經(jīng)典的費(fèi)茨定律

App 彈窗經(jīng)常把“關(guān)閉”按鈕放在卡片的右上角離手遠(yuǎn)的地方,還有開屏廣告,廣告商希望用戶花盡量多的時(shí)間停留在廣告內(nèi)容上,這時(shí)候廣告主會(huì)把“跳過”按鈕放在難以點(diǎn)擊的右上角,以降低用戶的誤觸機(jī)率提高轉(zhuǎn)化。


總結(jié)思考


按鈕越大越容易點(diǎn)擊,在移動(dòng)設(shè)備上通常增加按鈕點(diǎn)擊熱區(qū)范圍以便用戶不必精準(zhǔn)地點(diǎn)擊目標(biāo)也能操作成功,但是可點(diǎn)擊對(duì)象大小尺寸要合理不要過分的大;

讓相關(guān)的內(nèi)容更靠近彼此,在視覺上增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知,不過也不能過分靠近,會(huì)造成點(diǎn)擊壓力;

將按鈕放置在離開始點(diǎn)較近的地方,比如屏幕底部易操作區(qū)域;

屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因?yàn)樵谄聊贿吘壓徒锹湮恢脮r(shí)它們是“無限可選中”的,可以大膽操作而無需“微調(diào)”;

定律的反向使用可以適用一些特殊場(chǎng)景,比如想達(dá)到某種目的而降低按鈕被點(diǎn)擊的可能。

UI設(shè)計(jì)之Figma系列教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC