什么是菲茲定律？

菲茲定律由心理學(xué)家Paul Fitt于1954年提出，它是物理世界中人體運(yùn)動(dòng)的數(shù)學(xué)模型。這一定律提出之后，在很多領(lǐng)域都得到了應(yīng)用，但是在人機(jī)交互領(lǐng)域的影響尤為深遠(yuǎn)，可以說是人機(jī)交互領(lǐng)域的第一條定律，它通常被用來解釋鼠標(biāo)（PC端）和手勢(shì)（移動(dòng)端）在界面中的移動(dòng)規(guī)律。這項(xiàng)定律尤其適合按鈕等可點(diǎn)擊、可選擇、可交互的元素，目的：易于查找和選擇。作為一個(gè)數(shù)學(xué)模型，菲茲定律是有表達(dá)式的，表達(dá)式如下：

T 是完成動(dòng)作的時(shí)間a代表裝置開始結(jié)束的時(shí)間，b表示該裝置的速度，這些常數(shù)可從實(shí)測(cè)數(shù)據(jù)進(jìn)行直線近似取得。D是起始位置到目標(biāo)中心的距離。w是目標(biāo)區(qū)域在運(yùn)動(dòng)維上的寬度。

結(jié)論： 離目標(biāo)距離越近，所需的時(shí)間越短；目標(biāo)尺寸越大，完成速度越快，時(shí)間就越短。也就是說，預(yù)測(cè)點(diǎn)擊一個(gè)目標(biāo)的時(shí)間，取決于目標(biāo)和當(dāng)前位置的距離+目標(biāo)的大小。

---

如何將菲茲定律應(yīng)用在交互設(shè)計(jì)上？

1 、放大可點(diǎn)擊元素的尺寸

大且近的目標(biāo)元素讓用戶不需要做太精細(xì)的調(diào)整就可以輕易選中。小而遠(yuǎn)的按鈕則意味著用戶要將鼠標(biāo)/手指移動(dòng)比較長(zhǎng)的一段距離，并且再進(jìn)行精細(xì)的調(diào)整才能選中，這樣不僅難以點(diǎn)擊、且需要花費(fèi)更多的時(shí)間。

這里的大指按鈕的實(shí)際大小、也就是點(diǎn)擊熱區(qū)的大小，包含按鈕留白區(qū)域的大小。網(wǎng)頁設(shè)計(jì)里現(xiàn)在常見的設(shè)計(jì)方式就是大按鈕，四周大量留白； 而移動(dòng)端設(shè)計(jì)里通常會(huì)擴(kuò)展寬度，使用各種通欄按鈕，使用戶操作更加容易和快捷，可點(diǎn)擊圖標(biāo)也會(huì)放大可點(diǎn)擊區(qū)域。

注意： 并不能無限的放大。大小給可用性帶來的加成是有限制的，如果把一個(gè)很小的按鈕放大，它會(huì)變得更易于點(diǎn)擊；但是如果按鈕尺寸已經(jīng)足夠大，那么再放大尺寸，也并不會(huì)提高可用性和用戶操作效率。

2、 減少移動(dòng)的距離

依據(jù)菲茨定律所言，距離目標(biāo)越近，用戶點(diǎn)擊越快。所以我們通常會(huì)縮短當(dāng)前交互元素和目標(biāo)元素的距離，來提高用戶的使用效率和交互體驗(yàn)。

1>減少絕對(duì)距離

因?yàn)橐苿?dòng)端用戶通常為單手操作，也就是大拇指為主要操作工具，在現(xiàn)在大屏手機(jī)泛濫的情況下，屏幕很多地方是單手無法觸及的，所以現(xiàn)在我們通常會(huì)把按鈕和常用操作元素放在頁面下方的易操作區(qū)域。

2>減少相對(duì)距離

在兩個(gè)或多個(gè)操作中，通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認(rèn)刪除操作，因?yàn)樗侵匾呢?fù)向操作，所以對(duì)于雙重確認(rèn)，相比于在當(dāng)前列表區(qū)域確認(rèn)刪除（如下圖微信），如果使用彈框，那么用戶手勢(shì)的移動(dòng)距離相對(duì)會(huì)更長(zhǎng)（如下圖淘寶）

p：對(duì)于微信來說，刪除對(duì)話是用戶比較常執(zhí)行的操作，因此便利性應(yīng)該更高；而淘寶更想阻止用戶進(jìn)行此操作。 也就是說并不是所有操作都需要縮短距離。

3 、相關(guān)元素靠近

相關(guān)的內(nèi)容或者交互元素要彼此靠近，可以在視覺上增強(qiáng)他們之間的相關(guān)性認(rèn)知

4 、屏幕的邊緣和角落無限大

因?yàn)槠聊坏倪吔怯幸粋€(gè)隱形的“結(jié)界”，可以阻止用戶鼠標(biāo)因?yàn)榇蠓苿?dòng)而超出目標(biāo)區(qū)域范圍，因此用戶可以直接將鼠標(biāo)大幅度移動(dòng)到屏幕的邊緣、角落，而不用進(jìn)一步微調(diào)。 所以屏幕的邊角適合放置菜單欄、按鈕這樣的元素，不管箭頭移動(dòng)多遠(yuǎn)，最終會(huì)停在屏幕的邊緣并定位到菜單上。 比如chrome瀏覽器它把TAB欄放在了屏幕最頂部邊界，用戶使用效率比較高。

---

其他補(bǔ)充：

1、餅狀菜單會(huì)比線型菜單更易選擇，而且錯(cuò)誤率更低，這里面有兩個(gè)原因：

• 餅狀菜單的每個(gè)菜單項(xiàng)和菜單中心的距離都一致

• 餅狀菜單的每個(gè)菜單項(xiàng)的楔形目標(biāo)區(qū)域都非常大，一般都會(huì)擴(kuò)展到屏幕的邊緣

2、 目標(biāo)點(diǎn)的位置實(shí)際上是邊緣的一些像素加上邊緣之外的全部面積。所以，這樣看來目標(biāo)點(diǎn)就足夠大了。原因是基于fitts定律，它的一個(gè)分母的增大了而使得界面的效率提高了

總結(jié)：

1、我們想要更容易點(diǎn)擊到控件，就應(yīng)該放在屏幕的邊緣或角落里。讓常用的控件更大，更容易辨別；

2、使用屏幕的邊緣和角落讓控件有效擴(kuò)大，永遠(yuǎn)不要把控件放在離屏幕邊緣或角落一個(gè)像素遠(yuǎn)的地方；

3、邊緣之外的地方，也可以算作目標(biāo)點(diǎn)的面積，這樣一來，目標(biāo)的面積就被無限的放大了，也更方便用戶操作。

補(bǔ)充一張雅虎ued繪制的關(guān)于Fitts’ Law的Q版小漫畫，先初步了解下:

作者：GIGI小王子

轉(zhuǎn)載請(qǐng)注明：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司