大產(chǎn)品小細節(jié)！5分鐘帶你了解經(jīng)典的費茨定律

2018/1/8 9:22:49來源：互聯(lián)網(wǎng)

金蝶云之家體驗部交互設計師-王梓銘：大家有沒有想過為什么按鈕越大，越易于點擊？為什么相干按鈕必要相互靠近擺放？為什么 Win 體系要將「開始」按鈕放在角落？這些設定的背后其實都有一個在人機交互中，特別很是緊張的定律 —— 費茨定律。

上期回顧：《大產(chǎn)品小細節(jié)！5分鐘了解格式塔原則》

一. 概述

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

看起來很復雜吧，但現(xiàn)實上并不難，我用一張圖給大家詮釋下費茨定律是什么。當用戶必要拖動黃色點到目標區(qū)塊中時：

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

當 D 肯定時，W 越小，MT 越大；W 越大，MT 越小。
當 W 肯定時，D 越小，MT 越?。籇越大，MT 越大。

詮釋一下就是：

當距離肯定時，目標越小，所花費的時間越長；目標越大，所花費的時間越短。（小而遠的目標區(qū)域意味著用戶必要將黃點移動較長距離，并且為了能對準目標還必要做一系列的微調(diào)，由于目標比較小嘛，所以耗費的時間天然就長了。）

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

二. 啟示與案例

按鈕越大越易于點擊

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

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

照舊拿上面兩個界面為例子，大家有沒有發(fā)現(xiàn)那兩個大大的按鈕是放在屏幕下方的？緣故原由就是「將按鈕放在底部可以使 D 變小」，要知道用戶完成整個點擊操作是要先將手指移動到目標上方，最后進行點擊的。那么在這里 D 就是手指開始懸停的位置到目標上方的距離。根據(jù)研究注解，人們在使用手機的時候，75%的交互操作都是由拇指驅(qū)動的，而拇指懸停的位置恰恰就是屏幕下方。

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

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

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

對于一些相干性較強的按鈕，可以考慮將他們放在一路，比如：

在設計 PC 端的翻頁按鈕時，就可以將「上一頁」和「下一頁」放在互相靠近的位置。
在設計注冊、登錄界面的時候，可以將「注冊」和「登錄」放到一路，假如想要凸起「注冊」則可以考慮將「注冊」按鈕做大點。
相干聯(lián)的操作也可以嘗試放在一路，不僅可以在視覺上加強用戶對他們相干性的認知，還可以削減在他們之間的距離 D。

無窮大的四角與四邊

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

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

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

估計大家又會有個迷惑，那就是——為什么四角和四邊的 W 無窮大？

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

但是，隨著屏幕尺寸越來越大，而且雙屏幕的配置越來越常見，這個設計也變沒得那么好用了，由于 D 變大了。同理手機端的四角與四邊也是「無窮可選中」位置，由于手點擊屏幕以外屏幕不會相應嘛。（所以各位可以發(fā)現(xiàn)左上角按鈕一樣平常為返回，右上角為確定）但是在手機上時候，依然會面臨屏幕越來越大，按鈕越來越不好點擊的題目。

三. 小演習

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

明確設計目標

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

明確束縛與限定

明確了設計目標后，必要考慮設計束縛與技術(shù)限定有哪些？（這里我們不考慮技術(shù)題目）對于關機操作來說，自己是個特別很是高危的操作，一經(jīng)生效就沒法撤銷了。那么這里的設計束縛就有：

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

將理論應用到設計中

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

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

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

但是這個方案還不夠極致，這里我想跟大家明確另一點：D 的距離是可以創(chuàng)造出來的。

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

為什么許多人會覺得 iPhone 的體驗比絕大多數(shù)的安卓手機要好，看看這個關機界面就知道緣故原由在哪里了吧。