編輯導(dǎo)語：費茨法則是當(dāng)一個人用鼠標(biāo)來移動鼠標(biāo)指針時，屏幕上的目標(biāo)的某些特征會使得點擊變得輕松或者困難；目標(biāo)離的越遠，到達就越是費勁。本文作者分享了關(guān)于費茨法則的設(shè)計案例以及UI/UE使用方法論，我們一起來看一下。

Fitts’ Law，網(wǎng)絡(luò)上的中文翻譯五花八門，但不管是「菲茨」、「菲茲」還是「費茨」，其實都是指同一個法則啦。

費茨定律是我以往文章出現(xiàn)頻次最多的一個設(shè)計法則，和費茨定律相關(guān)的設(shè)計案例也非常多，但以往作為小插曲提及，都沒有進行過深度討論。

要詳細了解費茨定律，我先從維基百科提煉一下它官方的解釋。

費茨定律是一個關(guān)系人機交互以及人體工程學(xué)活動的數(shù)學(xué)模型，由保羅·費茨在1954年首次提出，故被命名為「費茨定律」；費茨定律是多用于表現(xiàn)指、點動作的概念模型，無論是真實世界進行的物理接觸，或是在屏內(nèi)用假想的點擊設(shè)備（例如鼠標(biāo)）進行的虛擬觸碰。

——維基百科

費茨定律預(yù)測了指點設(shè)備「移動到目標(biāo)區(qū)域所需的時間」是「距目標(biāo)區(qū)域距離」和「目標(biāo)區(qū)域大小」的函數(shù)。

其數(shù)學(xué)關(guān)系為 T=a+blog2(D/W+1) ，其中：

• T 是「移動到目標(biāo)區(qū)域所需的時間」；
• D 是「距目標(biāo)區(qū)域的距離」；
• W 是「目標(biāo)區(qū)域的大小」；
• a、b都是常量，代表指點設(shè)備的物理特性，受操作人員和環(huán)境等因素而變化。

我們在這里不去做專業(yè)細致的數(shù)學(xué)研究，所以為了方便理解公式，我一般把公式簡略記為 T=f(D/W) ，即T是關(guān)于(D/W)的函數(shù)表達。

這樣就很方便去記憶，時間T與距離D成正相關(guān)，與目標(biāo)區(qū)域W成負相關(guān)。即：當(dāng)指點初始位置距離目標(biāo)位置越近，且目標(biāo)位置所占區(qū)域越大，所消耗的時間越短。

可能從公式的描述來看，不太熟悉費茨定律的朋友還是有點懵。

確實，費茨定律是一個在眾多設(shè)計法則中難得能將交互形態(tài)數(shù)學(xué)公式化的具象模型。那我就不背離這個公式，針對T、D、W這三個關(guān)鍵要素，來展開聊聊。

一、T：移動到目標(biāo)區(qū)域所需的時間

首先弄清楚：當(dāng)我們在談?wù)撡M茨定律的時候，我們在談?wù)撌裁矗?/p>

每一個方法論都對應(yīng)研究了一個關(guān)鍵指標(biāo)，而費茨定律對應(yīng)研究的就是指點設(shè)備執(zhí)行動作的運動時間，試圖找到相關(guān)因素來提高有效執(zhí)行一個選中動作的效率。

如果這么講還是不夠大白話，那我引用一個 Ashley Towers 在《費茨定律及其具體應(yīng)用》一文中講到的一個生動的例子：

通常我們進行一次目的地明確的指點動作可以細分為兩個部分：

① 首先一個大幅度的移動，將指點設(shè)備移向與目標(biāo)大致相同的方向和區(qū)域；

② 緊接著是一系列精細的小幅度微調(diào)，來將指點設(shè)備精確定位在目標(biāo)中心。

你現(xiàn)在就可以做一個小實驗來觀察這一過程：舉起你的手臂并試著用手指指向遠處的一個小物體，例如遠處墻上的一個電燈開關(guān)。開始你的手臂可能會往開關(guān)的位置大幅的移動而且很有可能稍微過頭了一點。接下來你會做一些微小的調(diào)整動作直至你的手指正好對準(zhǔn)目標(biāo)開關(guān)的中心。

——引自 Ashley Towers

上面這個例子中，你要準(zhǔn)確對準(zhǔn)電燈開關(guān)這一系列動作所消耗的時間，就是費茨定律要研究的關(guān)鍵指標(biāo)；而在人機界面交互中，我們在研究優(yōu)化用戶體驗時，通常也希望能幫助用戶快速而精準(zhǔn)地完成一系列指點操作。

但費茨定律也有它的適用范圍局限性，不要在任何場景都胡亂套用。

關(guān)于費茨定律我有一點需要提醒：費茨定律主要用于表現(xiàn)指、點動作的概念模型，指點設(shè)備可以是鼠標(biāo)、手，甚至腳（油門與剎車設(shè)計中也包含了費茨定律的奧義）；但對于按鍵操作型設(shè)備，就不太適合了，例如如果你正在設(shè)計不支持觸控的車載HMI。

在引用設(shè)計方法論之前，一定要先清楚自己手里項目的用戶操作背景。

二、D：距目標(biāo)區(qū)域距離

知道了費茨定律是在研究什么之后，我們就要看看影響關(guān)鍵指標(biāo)的因素有哪些了。

根據(jù)公式，時間T與距離D成正相關(guān)，即起始點與目標(biāo)區(qū)域越近，那么指點動作的時間越短，有效觸及目標(biāo)的可能性越高。

那么是不是我們設(shè)計控件時，將元素位置都盡量貼近就合理的了呢？并不是。

首先是把元素位置都擠在一起，影響設(shè)計視覺風(fēng)格，在“Less is More”留白美學(xué)盛行的當(dāng)下，盲目減少元素與元素之間的間距肯定是不可取的。

其次因為距離越小，有效觸及目標(biāo)的可能性越高，不注意把控元素與元素之間的間距，也很可能導(dǎo)致用戶產(chǎn)生誤觸，反而降低了用戶的點擊效率。

以百度網(wǎng)頁版的分頁控件來舉個例子：

大家應(yīng)該都看的出來，最早期第一版的分頁間距雖小，但過小的間距卻大大增加了用戶小幅度微調(diào)的時間，極大增加了誤觸其他分頁的可能性。

第二版，雖然分頁間距沒有多大的改進，但可點擊區(qū)域（熱區(qū)）增大了，還是能夠減少用戶誤觸可能性的。

而百度現(xiàn)在的分頁控件，不論是分頁間距、熱區(qū)大小、視覺風(fēng)格上，都是在三版之中可行性最高的。

這么看來，熱區(qū)大小果然也是費茨定律中不可忽略的因素之一。

三、W：目標(biāo)區(qū)域大小

依然用到 Ashley Towers 指電燈開關(guān)的例子。但現(xiàn)在我要你試著指向一個更大的物體，比如說電視或者干脆就是一面墻壁。

這一次你也會以大幅度的手臂動作來使手指指向目標(biāo)方向，但因為目標(biāo)體積很大，所以一般情況下你只需要做很少（甚至不需要任何）的微調(diào)。

這意味著增加目標(biāo)區(qū)域的有效可觸區(qū)域，可以顯著提高用戶選擇效率。但在UI設(shè)計中，也不要為了讓用戶方便選中，而盲目放大目標(biāo)的區(qū)域大小。

我在《如何做好「按鈕」的用戶體驗？》一文中引述過一個確定觸摸屏按鈕的最佳觸摸目標(biāo)尺寸的實驗；可以看到當(dāng)按鈕的尺寸大到一個的臨界點時，點擊準(zhǔn)確率就趨于一個平衡值了，再增大按鈕并不能提升體驗，反而可能影響視覺構(gòu)圖效果。

在保證可觀的視覺構(gòu)圖的前提下，我們可以通過巧思來增大可點擊區(qū)域；例如在設(shè)計選框時，除了選框本身可點擊，也可以擴大點擊區(qū)域到文字標(biāo)簽上。

1. 關(guān)于「邊緣目標(biāo)無限大」的說法

說到費茨定律中的目標(biāo)區(qū)域W大小，最讓人津津樂道的案例莫過于，Mac OS 與 Windows 應(yīng)用菜單欄的對比了。

Windows的應(yīng)用菜單欄是在視窗標(biāo)題欄的下方，而Mac OS則是把應(yīng)用菜單欄固定在了屏幕的最頂部。

思考一下，如果從費茨定律的角度，你覺得哪一個方案更好呢？

如果我們假設(shè)動作起始點在屏幕中的同一位置，那么按照前面我們說到的起始位置到目標(biāo)的距離D越小，選擇消耗時間T越少，可能有讀者認(rèn)為是Windows的設(shè)計更好。

但網(wǎng)上很多研究愛好者認(rèn)為 Mac OS 在這里運用了「邊緣目標(biāo)無限大」對目標(biāo)對象的影響。

什么是「邊緣目標(biāo)無限大」？我們所使用的顯示設(shè)備，一般都包含屏幕邊界，也就是說我們不論怎么操作指點設(shè)備，都無法突破邊緣，所以邊緣目標(biāo)在大幅度移動過程中，就不用擔(dān)心會超出屏幕范圍。

于是當(dāng)一個目標(biāo)被放置在了屏幕邊緣，用戶可以用力地一甩鼠標(biāo)，不用再進行小幅度微調(diào)過程；不用進行微調(diào)過程的目標(biāo)，也就等同于目標(biāo)的大小變成了無限大，這就是“邊緣目標(biāo)無限大”的說法由來。

但對于這一個對比案例來說，我其實對網(wǎng)絡(luò)上的說法保持中立，不站邊，我認(rèn)為具體操作需要具體分析。“邊緣目標(biāo)無限大”是因為我們不需要進行小幅度微調(diào)，如果研究對象是“一整個應(yīng)用菜單欄”，那么 Mac OS 的設(shè)計當(dāng)然是更優(yōu)的。

但當(dāng)我要選擇菜單欄中具體的“文件”選項，在 Mac OS 中我依然要進行微調(diào)（甚至因為我用力甩鼠標(biāo)的過程，超過“文件”選項過遠，導(dǎo)致我微調(diào)過程時間變長，不信你試試）；而用戶真實使用中，選擇菜單欄中某一個具體選項的場景更多，所以 Mac OS 菜單欄設(shè)計是不是真的更合理呢…哈哈 這是我的思考，你也可以想一想~

但「邊緣目標(biāo)無限大」在移動端上也有相應(yīng)的應(yīng)用案例，我覺得更能夠解釋這個設(shè)計方法的優(yōu)勢。

例如微信在編輯朋友圈時，刪除圖像的操作并不像大多數(shù)平臺需要手動點擊刪除按鈕，而是按住拖拽圖片到屏幕底部；這讓用戶刪除圖片的過程變得更不需要小心翼翼，而可以“肆意妄為”，用力一拖。

#專欄作家#

UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議