「大產(chǎn)品小細(xì)節(jié)」5分鐘了解費(fèi)茨定律

　

大家有沒有想過為什么按鈕越大，越易于點(diǎn)擊 ？為什么相關(guān)按鈕需要彼此靠近擺放 ？為什么?Win 系統(tǒng)要將「開始」按鈕放在角落 ？這些設(shè)定的背后其實(shí)都有一個(gè)在人機(jī)交互中，非常重要的定律 —— 費(fèi)茨定律。所以，本期「大產(chǎn)品小細(xì)節(jié)」想跟大家聊聊「費(fèi)茨定律」。

一、概述

首先來看看費(fèi)茨定律公式：

很復(fù)雜吧~ 但是實(shí)際上并不難，我用一張圖給大家解釋下費(fèi)茨定律是什么。當(dāng)用戶需要拖動(dòng)黃色點(diǎn)到目標(biāo)區(qū)塊中時(shí)：

費(fèi)茨定律中的 D 就是從開始點(diǎn)到目標(biāo)中心的距離，而 W 則是目標(biāo)的寬度大小。按照公式可以看到，a 和 b 都是常量，那么 MT （黃點(diǎn)從左移到目標(biāo)中心所需的時(shí)間）的大小取決于 D 和 W 的值：

當(dāng) D 一按時(shí)，W 越小，MT 越大；W 越大，MT 越小。當(dāng) W 一按時(shí)，D 越小，MT 越??；D 越大，MT 越大。

翻譯成「人話」就是：

（1）當(dāng)距離一按時(shí)，目標(biāo)越小，所花費(fèi)的時(shí)間越長；目標(biāo)越大，所花費(fèi)的時(shí)間越短。（小而遠(yuǎn)的目標(biāo)區(qū)域意味著用戶需要將黃點(diǎn)移動(dòng)較長距離，而且為了能對(duì)準(zhǔn)目標(biāo)還需要做一系列的微調(diào)，因?yàn)槟繕?biāo)比較小嘛~ 所以耗費(fèi)的時(shí)間自然就長了。）

（2）當(dāng)目標(biāo)大小一按時(shí)，起點(diǎn)離目標(biāo)中心的距離越近，所花費(fèi)的時(shí)間越短；距離越遠(yuǎn)，所花時(shí)間越長。（這比較好理解，距離比較近嘛~ 所花時(shí)間自然比較短了。）

二、啟示與案例1. 按鈕越大越易于點(diǎn)擊

正如前面提到的，如果你想要讓按鈕的點(diǎn)擊率更高可以嘗試將按鈕做大點(diǎn)，好比這樣：

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

還是拿上面兩個(gè)界面為例子，大家有沒有發(fā)現(xiàn)那兩個(gè)大大的按鈕是放在屏幕下發(fā)的？原因就是「將按鈕放在底部可以使 D 變小」，要知道用戶完成整個(gè)點(diǎn)擊操作是要先將手指移動(dòng)到目標(biāo)上方，最后進(jìn)行點(diǎn)擊的。那么在這里 D 就是手指開始懸停的位置到目標(biāo)上方的距離。按照研究表白，人們?cè)谑褂檬謾C(jī)的時(shí)候，75%的交互操作都是由拇指驅(qū)動(dòng)的，而拇指懸停的位置恰恰就是屏幕下方。

PS：關(guān)于用戶是如何使用觸屏設(shè)備的，歡迎大家看看這篇讀書條記——「閱讀」觸類旁通:多終端時(shí)代的觸屏界面設(shè)計(jì)?文中提到的書本，也保舉大家買來看看。

那么對(duì)于 PC 端設(shè)備，又是如何使用這必然律的呢？最常見的使用就是鼠標(biāo)右鍵操作了。點(diǎn)擊右鍵，鼠標(biāo)的右下或右上方就會(huì)出現(xiàn)一個(gè)菜單，鼠標(biāo)移動(dòng)到對(duì)應(yīng)按鈕上，點(diǎn)擊一下即可完成操作。

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

對(duì)于一些相關(guān)性較強(qiáng)的按鈕，可以考慮將他們放在一起，好比：

在設(shè)計(jì) PC 端的翻頁按鈕時(shí)，就可以將「上一頁」和「下一頁」放在互相靠近的位置在設(shè)計(jì)注冊(cè)、登錄界面的時(shí)候，可以將「注冊(cè)」和「登錄」放到一起，如果想要突出「注冊(cè)」則可以考慮將「注冊(cè)」按鈕做大點(diǎn)。相關(guān)聯(lián)的操作也可以嘗試放在一起，不但可以在視覺上增強(qiáng)用戶對(duì)他們相關(guān)性的認(rèn)知，還可以減少在他們之間的距離 D。4. 無限大的四角與四邊

文章開頭，我提出了一個(gè)疑問：

為什么?Win 系統(tǒng)要將「開始」按鈕放在角落 ？

原因就是屏幕的四角和四邊 W 無限大，W 無限大的話，MT 就很小了。像 Mac 的 Docker 更是將費(fèi)茨定律發(fā)揮得凌厲精致，當(dāng)鼠標(biāo) hover 到對(duì)應(yīng)的 App icon 上的時(shí)候，icon 還會(huì)放大，從而加大 App icon 的W 。

估計(jì)大家又會(huì)有個(gè)疑惑，那就是——為什么四角和四邊的 W 無限大？

那是因?yàn)楣鈽?biāo)沒法移動(dòng)到四角與四邊之外的地方，你再怎么移動(dòng)鼠標(biāo)，光標(biāo)也沒措施移到屏幕以外的地方，所以他們就進(jìn)入到了「無限可選中」?fàn)顟B(tài)。

但是，隨著屏幕尺寸越來越大，并且雙屏幕的配置越來越常見，這個(gè)設(shè)計(jì)也變沒那么好用了，因?yàn)?D 變大了。同理手機(jī)端的四角與四邊也是「無限可選中」位置，因?yàn)槭贮c(diǎn)擊屏幕以外屏幕不會(huì)響應(yīng)嘛 ~ （所以各位可以發(fā)現(xiàn)左上角按鈕一般為返回，右上角為確定）但是在手機(jī)上時(shí)候，依然會(huì)面臨屏幕越來越大，按鈕越來越欠好點(diǎn)的問題。

三、小練習(xí)

最后，我想跟大家一起做個(gè)小練習(xí)，那就是請(qǐng)大家和我一起設(shè)計(jì)手機(jī)的關(guān)機(jī)界面：

1. 明確設(shè)計(jì)目標(biāo)

首先明確設(shè)計(jì)目標(biāo)：設(shè)計(jì)手機(jī)的關(guān)機(jī)界面

2. 明確約束與限制

標(biāo)簽：九江 東營 烏魯木齊 林芝 鹽城