費(fèi)茨定律是設(shè)計(jì)方法中常用的一種定律之一，不光是產(chǎn)品設(shè)計(jì)，在日常生活中也有不少應(yīng)用。這篇文章，作者從定律本身到案例，為我們?cè)敿?xì)分享了定律的使用和經(jīng)驗(yàn)，供大家參考。

設(shè)計(jì)師在體驗(yàn)過(guò)形形色色的產(chǎn)品后，是否這樣問(wèn)過(guò)自己：

• 為什么按鈕越大、越容易點(diǎn)擊？
• 為什么主按鈕與輔助按鈕樣式不一致？
• 為什么相互關(guān)聯(lián)的按鈕需要相互靠近擺放？
• 為什么有些按鈕要放在角落？
• …

針對(duì)這些問(wèn)題，我們可以先舉一個(gè)簡(jiǎn)單的例子。

下圖中，右側(cè)藍(lán)色塊代表需觸達(dá)的目標(biāo)，直線代表用戶到達(dá)目標(biāo)之間的距離。很明顯，目標(biāo)與手指的大小相差無(wú)幾，在目標(biāo)較小、距離較遠(yuǎn)的情況下，誤操作的概率很高，用戶只有放緩速度、集中精力才能精準(zhǔn)觸達(dá)目標(biāo)，這也意味著用戶需要花費(fèi)更多的成本才能完成操作。

站在用戶角度，設(shè)計(jì)師可以換種方式思考，是不是將目標(biāo)放大、或縮短用戶與目標(biāo)之間的距離就可以解決這個(gè)問(wèn)題。在特殊場(chǎng)景中，如果目標(biāo)不允許被放大、也不可以改變相互之間的距離，那就退而求其次，只要擴(kuò)大目標(biāo)的觸控?zé)釁^(qū)，也是一種減少用戶誤操作的有效方式。

現(xiàn)在回到上述問(wèn)題，其實(shí)這些都可以用人機(jī)交互中一個(gè)非常重要的法則「費(fèi)茨定律」來(lái)解釋。接下來(lái)我們將從費(fèi)茨定律的概率、定義以及界面中的應(yīng)用等幾方面深入了解。

一、了解費(fèi)茨定律

1. 費(fèi)茨定律的基本概念

1954年，美國(guó)空軍人類工程學(xué)部門主任保羅·費(fèi)茨（Paul M. Fitts）在對(duì)人們操作過(guò)程中的運(yùn)動(dòng)特征、時(shí)間、范圍以及準(zhǔn)確性進(jìn)行研究得出：從任意一點(diǎn)到達(dá)目標(biāo)中心位置所需時(shí)間與目標(biāo)的大小和之間的距離有關(guān)，即距離越大時(shí)間越長(zhǎng)、目標(biāo)越大時(shí)間越短。

如下圖，看看我們從伸手至拿到咖啡杯的整個(gè)過(guò)程，杯子的大小、與手之間的距離到底是一個(gè)什么樣的關(guān)系。

▽杯子大小相同、與手之間的距離不同，那么距離越短、花費(fèi)的時(shí)間就越短

▽杯子大小不同、與手之間的距離相同，那么杯子越大、花費(fèi)的時(shí)間就越短

2. 費(fèi)茨定律公式

在人類工程學(xué)中，費(fèi)茨定律預(yù)測(cè)了指點(diǎn)設(shè)備「移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間」是「設(shè)備位置與目標(biāo)位置的距離」和「目標(biāo)區(qū)域大小」的函數(shù)，其數(shù)學(xué)公式為：T=a+blog2(D/W+1) 。

• T：移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間；
• D：指點(diǎn)設(shè)備位置與目標(biāo)之間位置的距離；
• W：目標(biāo)區(qū)域大小；
• a、b：為常量，指點(diǎn)設(shè)備的物理特性。

如果單從數(shù)學(xué)公式來(lái)看，很多童鞋可能還有些懵，這里先不做專業(yè)細(xì)致的數(shù)學(xué)研究，只需記住要點(diǎn)，時(shí)間T與距離D成正比、與目標(biāo)區(qū)域W成反比，即：相互之間的距離越短、目標(biāo)區(qū)域越大，所需要的時(shí)間就越短。

當(dāng)然，任何事物都有一定上限，并非目標(biāo)區(qū)域無(wú)限大、距離無(wú)限近，凡事都有一個(gè)度，這就需要我們結(jié)合其他原則以及從反復(fù)實(shí)踐中得到最佳結(jié)果。

3. 生活中的案例

汽車上的油門和剎車是一個(gè)用來(lái)詮釋費(fèi)茨定律的經(jīng)典案例，雖這兩個(gè)部件同等重要，但從安全角度來(lái)講，剎車的重要性要遠(yuǎn)遠(yuǎn)高于油門，錯(cuò)用剎車可能是車禍，而錯(cuò)用油門往往是慘劇、悲劇，扯遠(yuǎn)了……

油門踏板和剎車踏板的距離很近（D?。?，并且剎車踏板要比油門踏板大很多（W大），發(fā)生緊急情況時(shí)，駕駛員可以用最短的時(shí)間（T?。┌涯_從油門踏板移到剎車踏板上，從而達(dá)到快速且精準(zhǔn)制動(dòng)的目的。

二、費(fèi)茨定律的核心切入點(diǎn)

1.以距離為切入點(diǎn)

1）負(fù)面操作的距離設(shè)定

當(dāng)我們?cè)O(shè)計(jì)界面和交互時(shí)，有時(shí)候?yàn)榱送炝粲脩?、提高轉(zhuǎn)化，會(huì)刻意制造操作難度。比如“取消訂單”，貨拉拉就采用了費(fèi)茨定律的負(fù)面操作，減小目標(biāo)區(qū)域大小并加大與目標(biāo)之間的距離，將“取消訂單”按鈕設(shè)計(jì)得小而隱蔽。

然而，即使如此，仍難以完全避免特殊場(chǎng)景的產(chǎn)生，如用戶誤操作或等待時(shí)間過(guò)長(zhǎng)等需要取消訂單的情況。為了方便有取消訂單意愿的用戶快速操作，滴滴打車在設(shè)計(jì)時(shí)就縮短了“呼叫車輛”與“取消訂單”之間的距離。

2）滿足操作習(xí)慣的距離設(shè)定

在PC端中，右鍵菜單的設(shè)計(jì)就是一個(gè)很好的例子，用戶點(diǎn)擊鼠標(biāo)的位置是明確的起始點(diǎn)，在就近位置彈出菜單可以大大降低目標(biāo)與起始位置的距離。此外，主流移動(dòng)端規(guī)范中，iOS與Material Design的氣泡彈窗菜單也采用了類似的設(shè)計(jì)，這在許多APP中也很常見(jiàn)。通過(guò)借鑒這些設(shè)計(jì)思路，我們可以更好地優(yōu)化產(chǎn)品界面和交互，提高用戶體驗(yàn)。

另外，在一些功能設(shè)計(jì)中，有時(shí)候我們面臨一些具有聯(lián)動(dòng)關(guān)系的功能場(chǎng)景。這些場(chǎng)景通常非常具體，但具體的案例并不多見(jiàn)。當(dāng)一個(gè)頁(yè)面功能繁多時(shí)，我們往往無(wú)法確切知道用戶想要做什么。例如，用戶點(diǎn)開(kāi)電商歷史訂單頁(yè)面時(shí)，可能會(huì)想要查看物流、訂單號(hào)、評(píng)價(jià)、復(fù)購(gòu)或聯(lián)系售后等。由于可選擇性太多，我們很難確定用戶的真實(shí)意圖。

對(duì)于手機(jī)這樣的小屏設(shè)備，拇指最常操作的區(qū)域是屏幕右側(cè)中下部。因此，將主要功能操作放在這個(gè)區(qū)域可以減少操作距離。通過(guò)這樣的設(shè)計(jì)策略，我們不僅可以提高用戶體驗(yàn)和滿意度，還能增強(qiáng)產(chǎn)品的靈活性和易用性。

當(dāng)一個(gè)頁(yè)面功能繁多時(shí)，我們需梳理功能優(yōu)先級(jí)和操作頻次數(shù)據(jù)，優(yōu)先級(jí)高、頻次高的操作應(yīng)結(jié)合當(dāng)前設(shè)備的操作習(xí)慣，以提升用戶操作效率。

以淘寶訂單詳情頁(yè)為例，其頁(yè)面信息豐富，且不同訂單狀態(tài)涉及的功能展示各不相同，但無(wú)論頁(yè)面如何滑動(dòng)，總有幾個(gè)關(guān)鍵操作被固定在底部并居右排列。對(duì)于那些次要操作放在左側(cè)「更多」里面，以氣泡彈窗的形式打開(kāi)，盡可能的使關(guān)鍵操作符合當(dāng)前設(shè)備的操作習(xí)慣。

2. 以尺寸為切入點(diǎn)

1）加大按鈕尺寸

對(duì)于功能單一、頁(yè)面內(nèi)容簡(jiǎn)單的頁(yè)面，放大按鈕尺寸是一種有效的設(shè)計(jì)策略。它不僅能豐富頁(yè)面內(nèi)容，使其看起來(lái)更加飽滿，還能提高用戶點(diǎn)擊按鈕的準(zhǔn)確性和便利性，進(jìn)而提升用戶體驗(yàn)。這種設(shè)計(jì)方法尤其適用于那些需要用戶快速作出決策的場(chǎng)景，例如Keep的運(yùn)動(dòng)頁(yè)面。

2）加大操作熱區(qū)

為了平衡視覺(jué)關(guān)系，我們不能簡(jiǎn)單地放大所有操作按鈕。但可以在保持元素視覺(jué)大小不變的情況下，擴(kuò)大觸發(fā)操作的范圍，即增加熱區(qū)面積。這樣可以提高用戶操作的準(zhǔn)確性和便利性，進(jìn)一步提升用戶體驗(yàn)。例如，登錄時(shí)勾選用戶服務(wù)協(xié)議、選擇支付方式等。

三、界面中的運(yùn)用

1. 底部按鈕——縮短手指的移動(dòng)距離

隨著智能手機(jī)的屏幕越來(lái)越大，拇指熱區(qū)的位置也在發(fā)生變化，這使得單手操作左上角的返回按鈕變得越來(lái)越困難。尤其在iPhone Plus和iPhone X等大屏手機(jī)上，這個(gè)返回按鈕的位置顯得有些尷尬。在資訊類應(yīng)用中，用戶需要頻繁切換文章，如果返回按鈕在左上角，操作難度會(huì)增加。

以百度APP詳情頁(yè)為例，將返回按鈕放在了底部左下角，通過(guò)結(jié)合拇指熱區(qū)，我們可以發(fā)現(xiàn)左下角的區(qū)域是單手可以輕松到達(dá)的。將返回按鈕放在底部左下角，可以大大節(jié)省用戶操作時(shí)間，提高用戶體驗(yàn)。因此，在設(shè)計(jì)界面時(shí)，應(yīng)該充分考慮拇指熱區(qū)的位置和用戶的使用習(xí)慣，合理布局按鈕和功能。

面對(duì)頂部返回鍵單手操作不便和底部返回鍵容易遺忘的問(wèn)題，其實(shí)還有一些便捷的操作，iOS用戶可以按住左側(cè)屏幕邊緣向右滑動(dòng)實(shí)現(xiàn)返回上一步操作，而安卓用戶則可以使用自帶的虛擬返回鍵。

2. 來(lái)電顯示-不同場(chǎng)景的區(qū)別對(duì)待

在iOS系統(tǒng)中，來(lái)電提示在鎖屏和蘇醒狀態(tài)下的接聽(tīng)方式有所不同。

在鎖屏狀態(tài)下，用戶手機(jī)的使用場(chǎng)景存在不確定性，為了避免誤操作，設(shè)計(jì)時(shí)需要增加操作距離、延長(zhǎng)操作時(shí)間。因此，采用滑動(dòng)接聽(tīng)的方式可以有效地增加操作距離，降低誤操作的可能性。

而在蘇醒狀態(tài)下，用戶已經(jīng)在使用手機(jī)，此時(shí)采用滑動(dòng)操作的距離過(guò)長(zhǎng)，不夠便捷。因此，設(shè)計(jì)為按鈕的樣式，用戶可以快速點(diǎn)擊接聽(tīng)或拒絕來(lái)電，從而提高操作效率。這種設(shè)計(jì)考慮充分運(yùn)用了費(fèi)茨定律，為用戶提供了更加舒適、便捷的操作體驗(yàn)。

3. 朋友圈編輯-邊緣無(wú)限大

「邊緣目標(biāo)無(wú)限大」的設(shè)計(jì)理念在移動(dòng)端的應(yīng)用中得到了充分體現(xiàn)。以朋友圈編輯為例，刪除照片的操作不再需要手動(dòng)點(diǎn)擊刪除按鈕，只需將照片拖拽到屏幕底部即可完成刪除。

這種設(shè)計(jì)簡(jiǎn)化了操作流程，使用戶在刪除圖片時(shí)更加輕松自如，不再需要小心翼翼地點(diǎn)擊。不僅提高了用戶體驗(yàn)，也充分展示了「邊緣目標(biāo)無(wú)限大」的優(yōu)勢(shì)。

4. 手勢(shì)操作-提高用戶操作效率

在安卓和iOS兩大操作系統(tǒng)中，長(zhǎng)按和側(cè)滑編輯功能在列表頁(yè)的編輯狀態(tài)中發(fā)揮著重要作用。用戶通過(guò)長(zhǎng)按或側(cè)滑列表，對(duì)應(yīng)的操作將出現(xiàn)在離手指最近的位置，可以快速地激活操作按鈕，大大提升了操作效率。

5. 表單設(shè)計(jì)-距離最后一項(xiàng)字段最近

在表單設(shè)計(jì)中，按鈕的位置是一個(gè)重要的考量因素。當(dāng)表單信息較少時(shí)，將按鈕設(shè)計(jì)在最后一個(gè)字段下方是一個(gè)不錯(cuò)的選擇。這是因?yàn)橛脩粼谔顚?xiě)表單時(shí)，通常會(huì)按照從上往下的順序進(jìn)行。當(dāng)用戶填寫(xiě)到最后一個(gè)字段時(shí)，鼠標(biāo)位置剛好位于表單底部附近，此時(shí)將按鈕設(shè)計(jì)在附近可以減少用戶移動(dòng)鼠標(biāo)的時(shí)間，提高操作效率。

然而，如果表單信息較多，將按鈕設(shè)計(jì)在下方可能會(huì)導(dǎo)致用戶在填寫(xiě)一半時(shí)找不到按鈕，或者需要花費(fèi)更多時(shí)間來(lái)操作。在這種情況下，將按鈕設(shè)計(jì)在瀏覽器下方并固定住，可以確保按鈕始終出現(xiàn)在用戶的視線范圍內(nèi)，方便用戶快速找到并點(diǎn)擊。

此外，我們還需要考慮單手使用手機(jī)的情況。超過(guò)50%的用戶習(xí)慣使用大拇指進(jìn)行交互，因此在設(shè)計(jì)移動(dòng)端表單按鈕時(shí)，除了考慮用戶填寫(xiě)順序和“屏幕熱區(qū)”外，還需要注意按鈕的大小。為了方便用戶單手操作，我們應(yīng)該將按鈕設(shè)計(jì)在“屏幕熱區(qū)”，并在不影響美觀的前提下適當(dāng)增大按鈕的大小。

6.隱藏不常用按鈕-降低視覺(jué)干擾

在設(shè)計(jì)時(shí)，對(duì)于不經(jīng)常使用的按鈕或希望增加操作難度的場(chǎng)景，可以考慮將按鈕放置在較遠(yuǎn)的位置或進(jìn)行隱藏設(shè)計(jì)。這樣可以提高用戶操作的門檻，減少不必要的誤操作。京東的訂單列表就是一個(gè)很好的例子，他們將不常用的按鈕放在“更多”里面，既方便了后期的功能拓展，也避免了低頻操作對(duì)用戶造成視覺(jué)干擾，降低了用戶的識(shí)別難度。

7.關(guān)機(jī)-特殊操作的逆向設(shè)計(jì)

在交UI設(shè)計(jì)中，反向思考、逆向使用費(fèi)茨定律的例子屢見(jiàn)不鮮。當(dāng)不希望用戶過(guò)于方便地操作時(shí)，我們可以采用這種思維方式，增加用戶的操作難度。

例如，iOS的關(guān)機(jī)操作需要用戶進(jìn)行“滑動(dòng)來(lái)關(guān)機(jī)”，這一設(shè)計(jì)延長(zhǎng)了關(guān)機(jī)操作時(shí)間，提醒用戶此操作為不可逆，需謹(jǐn)慎操作。

此外，商業(yè)廣告中的關(guān)閉按鈕被設(shè)計(jì)得很小，且點(diǎn)擊區(qū)域也和用戶習(xí)慣相悖，這也是反向使用費(fèi)茨定律的案例。雖然這些設(shè)計(jì)可能會(huì)影響用戶體驗(yàn)，但在商業(yè)價(jià)值面前，它們?nèi)匀槐粡V泛使用。因此，在設(shè)計(jì)中需要權(quán)衡用戶體驗(yàn)和商業(yè)價(jià)值，盡可能避免出現(xiàn)影響用戶體驗(yàn)的設(shè)計(jì)。

四、結(jié)語(yǔ)

在設(shè)計(jì)的道路上，我們會(huì)遇到許多“法則”和規(guī)律，它們像路標(biāo)一樣指引著我們前進(jìn)。然而，隨著時(shí)間的推移，就會(huì)逐漸意識(shí)到，這些“法則”實(shí)際上在塑造我們的思維模式和思考方向。它們更像是一把鑰匙，打開(kāi)了我們腦中的創(chuàng)意寶庫(kù)。

對(duì)于費(fèi)茨定律，我們不應(yīng)局限于數(shù)學(xué)的框架，而應(yīng)將其視為一種啟示，激發(fā)我們的設(shè)計(jì)靈感。以開(kāi)放的心態(tài)去理解它，我們能夠打開(kāi)一個(gè)全新的設(shè)計(jì)世界，更好地滿足用戶的需求和期望。

提升用戶操作效率是設(shè)計(jì)的核心目標(biāo)之一，但在實(shí)際操作中很容易被忽視。我們應(yīng)該始終牢記這一目標(biāo)，通過(guò)運(yùn)用費(fèi)茨定律等設(shè)計(jì)原理，創(chuàng)造出直觀、高效的用戶界面。

以上是筆者對(duì)費(fèi)茨定律在設(shè)計(jì)中的一些基本認(rèn)識(shí)和心得，雖然所涉及的工作領(lǐng)域有限，但相信這些觀點(diǎn)對(duì)于從事設(shè)計(jì)的同行們會(huì)有所啟發(fā)。如果您對(duì)費(fèi)茨定律感興趣，或者想要深入了解其在實(shí)際設(shè)計(jì)中的應(yīng)用，歡迎與我交流討論。