前言

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

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

針對這些問題，我們可以先舉一個簡單的例子。

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

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

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

一、了解費茨定律

1. 費茨定律的基本概念

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

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

杯子大小相同、與手之間的距離不同，那么距離越短、花費的時間就越短

杯子大小不同、與手之間的距離相同，那么杯子越大、花費的時間就越短

2. 費茨定律公式

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

1. T：移動到目標(biāo)區(qū)域所需的時間；
2. D：指點設(shè)備位置與目標(biāo)之間位置的距離；
3. W：目標(biāo)區(qū)域大小；
4. a、b：為常量，指點設(shè)備的物理特性。

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

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

3. 生活中的案例

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

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

二、費茨定律的核心切入點

1. 以距離為切入點

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

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

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

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

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

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

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

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

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

2. 以尺寸為切入點

1）加大按鈕尺寸

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

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

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

三、界面中的運用

1. 底部按鈕——縮短手指的移動距離

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

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

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

2. 來電顯示-不同場景的區(qū)別對待

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

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

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

3. 朋友圈編輯-邊緣無限大

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

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

4. 手勢操作-提高用戶操作效率

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

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

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

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

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

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

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

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

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

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

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

四、結(jié)語

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

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

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

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

作者：能量眼球