大產品小細節!5分鐘帶你了解經典的費茨定律
大產品小細節!5分鐘帶你了解經典的費茨定律-移動閱讀二維碼

金蝶云之家體驗部交互設計師-王梓銘:大家有沒有想過為什么按鈕越大,越易于點擊 ?為什么相關按鈕需要相互靠近擺放 ?為什么 Win 系統要將「開始」按鈕放在角落 ?這些設定的背后其實都有一個在人機交互中,非常重要的定律 ——?費茨定律。

上期回顧:《大產品小細節!5分鐘了解格式塔原則》

一. 概述

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

看起來很復雜吧, 但實際上并不難,我用一張圖給大家解釋下費茨定律是什么。當用戶需要拖動黃色點到目標區塊中時:

費茨定律中的 D 就是從開始點到目標中心的距離,而 W 則是目標的寬度大小。根據公式可以看到,A和 b 都是常量,那么 MT (黃點從左移到目標中心所需的時間)的大小取決于 D 和 W 的值:

  • 當 D 一定時,W 越小,MT 越大;W 越大,MT 越小。
  • 當 W 一定時,D 越小,MT 越??;D 越大,MT 越大。

解釋一下就是:

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

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

二. 啟示與案例

按鈕越大越易于點擊

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

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

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

PS:關于用戶是如何使用觸屏設備的,歡迎大家看看這篇讀書筆記——「閱讀」觸類旁通:多終端時代的觸屏界面設計 文中提到的書本,也推薦大家買來看看。

那么對于 PC 端設備,又是如何使用這一定律的呢?
最常見的使用就是鼠標右鍵操作了。點擊右鍵,鼠標的右下或右上方就會出現一個菜單,鼠標移動到對應按鈕上,點擊一下即可完成操作。

相關按鈕之間距離近點更易于點擊

對于一些相關性較強的按鈕,可以考慮將他們放在一起,比如:

  • 在設計 PC 端的翻頁按鈕時,就可以將「上一頁」和「下一頁」放在互相靠近的位置。
  • 在設計注冊、登錄界面的時候,可以將「注冊」和「登錄」放到一起,如果想要突出「注冊」則可以考慮將「注冊」按鈕做大點。
  • 相關聯的操作也可以嘗試放在一起,不僅可以在視覺上增強用戶對他們相關性的認知,還可以減少在他們之間的距離 D。

無限大的四角與四邊

文章開頭,我提出了一個疑問:

為什么 Win 系統要將「開始」按鈕放在角落 ?

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

估計大家又會有個疑惑,那就是——為什么四角和四邊的 W 無限大?

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

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

三. 小練習

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

明確設計目標

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

明確約束與限制

明確了設計目標后,需要考慮設計約束與技術限制有哪些?(這里我們不考慮技術問題)對于關機操作來說,本身是個非常高危的操作,一經生效就沒法撤銷了。那么這里的設計約束就有:

  • 此操作不能過于便捷
  • 防止誤觸
  • 如有必要需要有防待操作

將理論應用到設計中

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

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

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

但是這個方案還不夠極致,這里我想跟大家明確另一點:D 的距離是可以創造出來的。

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

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

四. 總結

在文章的最后,回顧一下費茨定律給我們的啟示:

  • 按鈕做大點(W大點)更易于點擊。
  • 將按鈕放置在離開始點較近的地方。
  • 相關按鈕之間距離近點(D小點)更易于點擊。
  • 屏幕的四角與四邊是「無限可選中」位置。
  • 通過費茨定律的反向使用,可以降低按鈕被點擊的可能。

歡迎關注微信公眾號:「UXD-Cloudhub」

本文鏈接:http://www.casaleticia.com/classic-fitts-law.html
本文標簽: , , ,