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

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

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

要詳細(xì)了解費(fèi)茨定律，我先從維基百科提煉一下它官方的解釋。

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

——維基百科

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

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

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

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

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

可能從公式的描述來看，不太熟悉費(fèi)茨定律的朋友還是有點(diǎn)懵。

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

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

首先弄清楚：當(dāng)我們?cè)谡務(wù)撡M(fèi)茨定律的時(shí)候，我們?cè)谡務(wù)撌裁矗?/p>

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

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

通常我們進(jìn)行一次目的地明確的指點(diǎn)動(dòng)作可以細(xì)分為兩個(gè)部分：

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

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

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

——引自 Ashley Towers

上面這個(gè)例子中，你要準(zhǔn)確對(duì)準(zhǔn)電燈開關(guān)這一系列動(dòng)作所消耗的時(shí)間，就是費(fèi)茨定律要研究的關(guān)鍵指標(biāo)；而在人機(jī)界面交互中，我們?cè)谘芯績(jī)?yōu)化用戶體驗(yàn)時(shí)，通常也希望能幫助用戶快速而精準(zhǔn)地完成一系列指點(diǎn)操作。

但費(fèi)茨定律也有它的適用范圍局限性，不要在任何場(chǎng)景都胡亂套用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#專欄作家#

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

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

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