什么是菲茲定律？

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

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

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

---

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

1 、放大可點擊元素的尺寸

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

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

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

2、 減少移動的距離

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

1>減少絕對距離

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

2>減少相對距離

在兩個或多個操作中，通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認(rèn)刪除操作，因為它是重要的負(fù)向操作，所以對于雙重確認(rèn)，相比于在當(dāng)前列表區(qū)域確認(rèn)刪除（如下圖微信），如果使用彈框，那么用戶手勢的移動距離相對會更長（如下圖淘寶）

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

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

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

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

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

---

其他補(bǔ)充：

1、餅狀菜單會比線型菜單更易選擇，而且錯誤率更低，這里面有兩個原因：

• 餅狀菜單的每個菜單項和菜單中心的距離都一致

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

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

總結(jié)：

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

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

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

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

作者：GIGI小王子

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

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

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

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

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

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