費茨定律 | 設計師需要知道的設計原則!

3 評論 1947 瀏覽 29 收藏 20 分鐘

費茨定律是設計方法中常用的一種定律之一,不光是產品設計,在日常生活中也有不少應用。這篇文章,作者從定律本身到案例,為我們詳細分享了定律的使用和經驗,供大家參考。

設計師在體驗過形形色色的產品后,是否這樣問過自己:

  • 為什么按鈕越大、越容易點擊?
  • 為什么主按鈕與輔助按鈕樣式不一致?
  • 為什么相互關聯的按鈕需要相互靠近擺放?
  • 為什么有些按鈕要放在角落?

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

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

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

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

一、了解費茨定律

1. 費茨定律的基本概念

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

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

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

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

2. 費茨定律公式

在人類工程學中,費茨定律預測了指點設備「移動到目標區域所需的時間」是「設備位置與目標位置的距離」和「目標區域大小」的函數,其數學公式為:T=a+blog2(D/W+1) 。

  • T:移動到目標區域所需的時間;
  • D:指點設備位置與目標之間位置的距離;
  • W:目標區域大??;
  • a、b:為常量,指點設備的物理特性。

如果單從數學公式來看,很多童鞋可能還有些懵,這里先不做專業細致的數學研究,只需記住要點,時間T與距離D成正比、與目標區域W成反比,即:相互之間的距離越短、目標區域越大,所需要的時間就越短。

當然,任何事物都有一定上限,并非目標區域無限大、距離無限近,凡事都有一個度,這就需要我們結合其他原則以及從反復實踐中得到最佳結果。

3. 生活中的案例

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

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

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

1.以距離為切入點

1)負面操作的距離設定

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

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

2)滿足操作習慣的距離設定

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

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

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

當一個頁面功能繁多時,我們需梳理功能優先級和操作頻次數據,優先級高、頻次高的操作應結合當前設備的操作習慣,以提升用戶操作效率。

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

2. 以尺寸為切入點

1)加大按鈕尺寸

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

2)加大操作熱區

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

三、界面中的運用

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

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

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

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

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

在iOS系統中,來電提示在鎖屏和蘇醒狀態下的接聽方式有所不同。

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

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

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

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

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

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

在安卓和iOS兩大操作系統中,長按和側滑編輯功能在列表頁的編輯狀態中發揮著重要作用。用戶通過長按或側滑列表,對應的操作將出現在離手指最近的位置,可以快速地激活操作按鈕,大大提升了操作效率。

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

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

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

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

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

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

7.關機-特殊操作的逆向設計

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

例如,iOS的關機操作需要用戶進行“滑動來關機”,這一設計延長了關機操作時間,提醒用戶此操作為不可逆,需謹慎操作。

此外,商業廣告中的關閉按鈕被設計得很小,且點擊區域也和用戶習慣相悖,這也是反向使用費茨定律的案例。雖然這些設計可能會影響用戶體驗,但在商業價值面前,它們仍然被廣泛使用。因此,在設計中需要權衡用戶體驗和商業價值,盡可能避免出現影響用戶體驗的設計。

四、結語

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

對于費茨定律,我們不應局限于數學的框架,而應將其視為一種啟示,激發我們的設計靈感。以開放的心態去理解它,我們能夠打開一個全新的設計世界,更好地滿足用戶的需求和期望。

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

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

專欄作家

大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 用一個名詞,包裝了一堆廢話

    來自河北 回復
    1. 點了

      來自廣東 回復
    2. 贊同

      來自山東 回復