2021-2-25 濤濤
費(fèi)茨定律由心理學(xué)家 Paul Fitts 提出，用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時(shí)間越長(zhǎng)，目標(biāo)越大時(shí)間越短。舉例來(lái)說(shuō)，你伸手去拿桌子上的咖啡杯，開(kāi)始你的手臂迅速地往杯子位置移動(dòng)，接著你會(huì)放慢速度直至找到杯子把手，這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。
如上圖所示，如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo) target，最短路徑一定是 D，最短路徑上容錯(cuò)的最長(zhǎng)路徑是 D+W，只要水平上移動(dòng)超過(guò)了 D+W 你就點(diǎn)不到了，而這個(gè)點(diǎn)擊動(dòng)作所耗的時(shí)間是一個(gè)常數(shù)加上一個(gè)以 D 為正比 W 為反比的函數(shù)的和。
讓我們來(lái)看下面這個(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)上停下來(lái)之前不需要做太精細(xì)的調(diào)整。
相反，如果把右邊紅色方塊縮小，用戶快速點(diǎn)擊目標(biāo)會(huì)困難得多，需要做一系列精細(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)就越小。
在頁(yè)面中，大而近的目標(biāo)區(qū)域意味著用戶不需要做太精細(xì)的調(diào)整就可以輕易的到達(dá)目標(biāo)。比如頁(yè)面中的大按鈕。
夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域，相比常見(jiàn)頂部搜索欄更方便操作，效率更快。
在設(shè)計(jì)注冊(cè)、登錄界面的時(shí)候，通常將「注冊(cè)」和「登錄」放到一起，不僅可以在視覺(jué)上增強(qiáng)用戶對(duì)他們相關(guān)性的認(rèn)知，還可以減少在他們之間的距離 。
△ 設(shè)計(jì)圖來(lái)自網(wǎng)絡(luò) 侵刪
費(fèi)茨定律鼓勵(lì)減少距離，增加目標(biāo)大小以提升用戶效率，但反過(guò)來(lái)亦適用，比如 iPhone 關(guān)機(jī)，不使用按鈕點(diǎn)擊，而采用滑動(dòng)操作，這樣雖然降低了用戶操作效率，但增加用戶操作時(shí)間，以起到警示用戶謹(jǐn)慎避免誤操作的目的，所以“取消”按鈕放在底部方便點(diǎn)擊的地方。
App 彈窗經(jīng)常把“關(guān)閉”按鈕放在卡片的右上角離手遠(yuǎn)的地方，還有開(kāi)屏廣告，廣告商希望用戶花盡量多的時(shí)間停留在廣告內(nèi)容上，這時(shí)候廣告主會(huì)把“跳過(guò)”按鈕放在難以點(diǎn)擊的右上角，以降低用戶的誤觸機(jī)率提高轉(zhuǎn)化。
按鈕越大越容易點(diǎn)擊，在移動(dòng)設(shè)備上通常增加按鈕點(diǎn)擊熱區(qū)范圍以便用戶不必精準(zhǔn)地點(diǎn)擊目標(biāo)也能操作成功，但是可點(diǎn)擊對(duì)象大小尺寸要合理不要過(guò)分的大；
讓相關(guān)的內(nèi)容更靠近彼此，在視覺(jué)上增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知，不過(guò)也不能過(guò)分靠近，會(huì)造成點(diǎn)擊壓力；
將按鈕放置在離開(kāi)始點(diǎn)較近的地方，比如屏幕底部易操作區(qū)域；
屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)樵谄聊贿吘壓徒锹湮恢脮r(shí)它們是“無(wú)限可選中”的，可以大膽操作而無(wú)需“微調(diào)”；
定律的反向使用可以適用一些特殊場(chǎng)景，比如想達(dá)到某種目的而降低按鈕被點(diǎn)擊的可能。
文章來(lái)源：優(yōu)設(shè) 作者：印跡拾光
藍(lán)藍(lán)設(shè)計(jì)( m.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.izc.net.cn