「大產品小細節」5分鐘了解費茨定律

前言

平時在開發頁面的時候，不知道你有沒留意為什麼有的按鈕要放左邊，有的要放右邊。那位置的不同會產品會有什麼差異呢？今日早讀文章由 @jimmy 帶來分享。

正文從這開始～

大家有沒有想過為什麼按鈕越大，越易於點擊 ？

為啥相關按鈕需要相互靠近擺放 ？

為啥 Win 系統要將「開始」按鈕放在角落 ？

這些設定的背後其實都有一個在人機交互中，非常重要的定律 —— 費茨定律。

所以本期「大產品小細節」想跟大家聊聊「費茨定律」。

一、概述

首先來看看費茨定律公式：

很複雜吧~ 但是實際上並不難，我用一張圖給大家解釋下費茨定律是什麼。當用戶需要拖動黃色點到目標區塊中時：

費茨定律中的 D 就是從開始點到目標中心的距離，而 W 則是目標的寬度大小。根據公式可以看到，a 和 b 都是常量，那麼 MT （黃點從左移到目標中心所需的時間）的大小取決於 D 和 W 的值：

當 D 一定時，W 越小，MT 越大；W 越大，MT 越小。

當 W 一定時，D 越小，MT 越小；D 越大，MT 越大。

翻譯成「人話」就是：

當距離一定時，目標越小，所花費的時間越長；目標越大，所花費的時間越短。（小而遠的目標區域意味著用戶需要將黃點移動較長距離，並且為了能對準目標還需要做一系列的微調，因為目標比較小嘛~ 所以耗費的時間自然就長了。）

當目標大小一定時，起點離目標中心的距離越近，所花費的時間越短；距離約遠，所花時間越長。（這比較好理解，距離比較近嘛~ 所花時間自然比較短了。）

二、啟示與案例

1. 按鈕越大越易於點擊

正如前面提到的，如果你想要讓按鈕的點擊率更高可以嘗試將按鈕做大點，比如這樣：

2. 將按鈕放置在離開始點較近的地方

還是拿上面兩個界面為例子，大家有沒有發現那兩個大大的按鈕是放在屏幕下發的？原因就是「將按鈕放在底部可以使 D 變小」，要知道用戶完成整個點擊操作是要先將手指移動到目標上方，最後進行點擊的。那麼在這裡 D 就是手指開始懸停的位置到目標上方的距離。根據研究表明，人們在使用手機的時候，75%的交互操作都是由拇指驅動的，而拇指懸停的位置恰恰就是屏幕下方。

那麼對於 PC 端設備，又是如何使用這一定律的呢？

最常見的使用就是滑鼠右鍵操作了。點擊右鍵，滑鼠的右下或右上方就會出現一個菜單，滑鼠移動到對應按鈕上，點擊一下即可完成操作。

3. 相關按鈕之間距離近點更易於點擊

對於一些相關性較強的按鈕，可以考慮將他們放在一起，比如：

在設計 PC 端的翻頁按鈕時，就可以將「上一頁」和「下一頁」放在互相靠近的位置

在設計註冊、登錄界面的時候，可以將「註冊」和「登錄」放到一起，如果想要突出「註冊」則可以考慮將「註冊」按鈕做大點。

相關聯的操作也可以嘗試放在一起，不僅可以在視覺上增強用戶對他們相關性的認知，還可以減少在他們之間的距離 D。

4. 無限大的四角與四邊

文章開頭，我提出了一個疑問：

為啥 Win 系統要將「開始」按鈕放在角落 ？

原因就是屏幕的四角和四邊 W 無限大，W 無限大的話，MT 就很小了。像 Mac 的 Docker 更是將費茨定律發揮得凌厲精緻，當滑鼠 hover 到對應的 App icon 上的時候，icon 還會放大，從而加大 App icon 的 W 。

估計大家又會有個疑惑，那就是為啥四角和四邊的 W 無限大？

那是因為游標沒法移動到四角與四邊之外的地方，你再怎麼移動滑鼠，游標也沒辦法移到屏幕以外的地方，所以他們就進入到了「無限可選中」狀態。

但是，隨著屏幕尺寸越來越大，而且雙屏幕的配置越來越常見，這個設計也變沒那麼好用了，因為 D 變大了。同理手機端的四角與四邊也是「無限可選中」位置，因為手點擊屏幕以外屏幕不會響應嘛 ~ （所以各位可以發現左上角按鈕一般為返回，右上角為確定）但是在手機上時候，依然會面臨屏幕越來越大，按鈕越來越不好點的問題。

三、小練習

最後，我想跟大家一起做個小練習，那就是請大家和我一起設計手機的關機界面：

1. 明確設計目標

首先明確設計目標：設計手機的關機界面

2. 明確約束與限制

明確了設計目標後，需要考慮設計約束與技術限制有哪些？（這裡我們不考慮技術問題）對於關機操作來說，本身是個非常高危的操作，一經生效就沒法撤銷了。那麼這裡的設計約束就有：

此操作不能過於便捷

防止誤觸

如有必要需要有防呆操作

3. 將理論應用到設計中

根據約束，我們開始設計方案。在設計時候，我們不妨將我們所學的費茨定律應到到設計之中，估計這裡又有同學會問，費茨定律不是教我們設計出易於點擊的設計嗎？很明顯與你提到的約束相違背啊！其實費茨定律不只能正著用，還能反著用！比如我們可以嘗試加大 D 和降低 W。

先嘗試加大拇指到目標的距離 D，那麼可以得出甲方案。（這設計就是很多安卓手機提供的的方案）

不過正如前面提到的第三條啟示，相關的按鈕放在一起更便於點擊。但是我們實際上並不想讓用戶點擊「關閉手機」而是希望用戶點擊「取消」，將兩個放在一起並不合適，那麼我們可以嘗試降低「取消」按鈕的 D 從而削弱用戶點擊「關閉手機」的可能，並且根據費茨定律我們可以將「關閉手機」的 W 做小，從而得出乙方案。

但是這個方案還不夠極致，這裡我想跟大家明確另一點：

D 的距離是可以創造出來的

觸屏的偉大之處就在於，它不僅僅有點擊操作，還有滑動操作！通過滑動操作也可以創造出 D 出來。如丙方案所示，完成關機操作的總 D 等於「大拇指移動到頂部滑塊的距離」加上「按住滑塊滑動到右邊的距離」。

為啥很多人會覺得 iPhone 的體驗比絕大多數的安卓手機要好，看看這個關機界面就知道原因在哪裡了吧 ~

四、總結

OK~ 文章最後，回顧一下費茨定律給我們的啟示：

1. 按鈕做大點（W大點）更易於點擊

2. 將按鈕放置在離開始點較近的地方

3. 相關按鈕之間距離近點（D小點）更易於點擊

4. 屏幕的四角與四邊是「無限可選中」位置

4. 通過費茨定律的反向使用，可以降低按鈕被點擊的可能

關於本文

作者：@jimmy

知乎專欄：遲早會更新

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！