一、概述
首先來看看費茨定律公式：
很復(fù)雜吧~ 但是實際上并不難，我用一張圖給大家解釋下費茨定律是什么。當(dāng)用戶需要拖動黃色點到目標(biāo)區(qū)塊中時：
費茨定律中的 D 就是從開始點到目標(biāo)中心的距離，而 W 則是目標(biāo)的寬度大小。根據(jù)公式可以看到，a 和 b 都是常量，那么 MT （黃點從左移到目標(biāo)中心所需的時間）的大小取決于 D 和 W 的值：
當(dāng) D 一定時，W 越小，MT 越大；W 越大，MT 越小。當(dāng) W 一定時，D 越小，MT 越??；D 越大，MT 越大。
翻譯成「人話」就是：
（1）當(dāng)距離一定時，目標(biāo)越小，所花費的時間越長；目標(biāo)越大，所花費的時間越短。（小而遠(yuǎn)的目標(biāo)區(qū)域意味著用戶需要將黃點移動較長距離，并且為了能對準(zhǔn)目標(biāo)還需要做一系列的微調(diào)，因為目標(biāo)比較小嘛~ 所以耗費的時間自然就長了。）
（2）當(dāng)目標(biāo)大小一定時，起點離目標(biāo)中心的距離越近，所花費的時間越短；距離越遠(yuǎn)，所花時間越長。（這比較好理解，距離比較近嘛~ 所花時間自然比較短了。）
二、啟示與案例
1. 按鈕越大越易于點擊 正如前面提到的，如果你想要讓按鈕的點擊率更高可以嘗試將按鈕做大點，比如這樣：
2. 將按鈕放置在離開始點較近的地方
還是拿上面兩個界面為例子，大家有沒有發(fā)現(xiàn)那兩個大大的按鈕是放在屏幕下發(fā)的？原因就是「將按鈕放在底部可以使 D 變小」，要知道用戶完成整個點擊操作是要先將手指移動到目標(biāo)上方，最后進行點擊的。那么在這里 D 就是手指開始懸停的位置到目標(biāo)上方的距離。根據(jù)研究表明，人們在使用手機的時候，75%的交互操作都是由拇指驅(qū)動的，而拇指懸停的位置恰恰就是屏幕下方。
PS：關(guān)于用戶是如何使用觸屏設(shè)備的，歡迎大家看看這篇讀書筆記——「閱讀」觸類旁通:多終端時代的觸屏界面設(shè)計?文中提到的書本，也推薦大家買來看看。
那么對于 PC 端設(shè)備，又是如何使用這一定律的呢？最常見的使用就是鼠標(biāo)右鍵操作了。點擊右鍵，鼠標(biāo)的右下或右上方就會出現(xiàn)一個菜單，鼠標(biāo)移動到對應(yīng)按鈕上，點擊一下即可完成操作。
3. 相關(guān)按鈕之間距離近點更易于點擊
對于一些相關(guān)性較強的按鈕，可以考慮將他們放在一起，比如：
在設(shè)計 PC 端的翻頁按鈕時，就可以將「上一頁」和「下一頁」放在互相靠近的位置在設(shè)計注冊、登錄界面的時候，可以將「注冊」和「登錄」放到一起，如果想要突出「注冊」則可以考慮將「注冊」按鈕做大點。相關(guān)聯(lián)的操作也可以嘗試放在一起，不僅可以在視覺上增強用戶對他們相關(guān)性的認(rèn)知，還可以減少在他們之間的距離 D。4. 無限大的四角與四邊
文章開頭，我提出了一個疑問：
為什么?Win 系統(tǒng)要將「開始」按鈕放在角落 ？
原因就是屏幕的四角和四邊 W 無限大，W 無限大的話，MT 就很小了。像 Mac 的 Docker 更是將費茨定律發(fā)揮得凌厲精致，當(dāng)鼠標(biāo) hover 到對應(yīng)的 App icon 上的時候，icon 還會放大，從而加大 App icon 的W 。
估計大家又會有個疑惑，那就是——為什么四角和四邊的 W 無限大？
那是因為光標(biāo)沒法移動到四角與四邊之外的地方，你再怎么移動鼠標(biāo)，光標(biāo)也沒辦法移到屏幕以外的地方，所以他們就進入到了「無限可選中」?fàn)顟B(tài)。
但是，隨著屏幕尺寸越來越大，而且雙屏幕的配置越來越常見，這個設(shè)計也變沒那么好用了，因為 D 變大了。同理手機端的四角與四邊也是「無限可選中」位置，因為手點擊屏幕以外屏幕不會響應(yīng)嘛 ~ （所以各位可以發(fā)現(xiàn)左上角按鈕一般為返回，右上角為確定）但是在手機上時候，依然會面臨屏幕越來越大，按鈕越來越不好點的問題。
三、小練習(xí)
最后，我想跟大家一起做個小練習(xí)，那就是請大家和我一起設(shè)計手機的關(guān)機界面： 1. 明確設(shè)計目標(biāo) 首先明確設(shè)計目標(biāo)：設(shè)計手機的關(guān)機界面 2. 明確約束與限制 明確了設(shè)計目標(biāo)后，需要考慮設(shè)計約束與技術(shù)限制有哪些？（這里我們不考慮技術(shù)問題）對于關(guān)機操作來說，本身是個非常高危的操作，一經(jīng)生效就沒法撤銷了。那么這里的設(shè)計約束就有： 此操作不能過于便捷防止誤觸如有必要需要有防呆操作3. 將理論應(yīng)用到設(shè)計中 根據(jù)約束，我們開始設(shè)計方案。在設(shè)計時候，我們不妨將我們所學(xué)的費茨定律應(yīng)到到設(shè)計之中，估計這里又有同學(xué)會問，費茨定律不是教我們設(shè)計出易于點擊的設(shè)計嗎？很明顯與你提到的約束相違背啊！其實費茨定律不只能正著用，還能反著用！比如我們可以嘗試加大 D 和降低 W。
先嘗試加大拇指到目標(biāo)的距離 D，那么可以得出甲方案。（這設(shè)計就是很多安卓手機提供的的方案）
不過正如前面提到的第三條啟示，相關(guān)的按鈕放在一起更便于點擊。但是我們實際上并不想讓用戶點擊「關(guān)閉手機」而是希望用戶點擊「取消」，將兩個放在一起并不合適，那么我們可以嘗試降低「取消」按鈕的 D 從而削弱用戶點擊「關(guān)閉手機」的可能，并且根據(jù)費茨定律我們可以將「關(guān)閉手機」的 W 做小，從而得出乙方案。
但是這個方案還不夠極致，這里我想跟大家明確另一點：D 的距離是可以創(chuàng)造出來的。
觸屏的偉大之處就在于，它不僅僅有點擊操作，還有滑動操作！通過滑動操作也可以創(chuàng)造出 D 出來。如丙方案所示，完成關(guān)機操作的總 D 等于「大拇指移動到頂部滑塊的距離」加上「按住滑塊滑動到右邊的距離」。
為啥很多人會覺得 iPhone 的體驗比絕大多數(shù)的安卓手機要好，看看這個關(guān)機界面就知道原因在哪里了吧 ~
四、總結(jié)
在文章的最后，回顧一下費茨定律給我們的啟示：
1. 按鈕做大點（W大點）更易于點擊
2. 將按鈕放置在離開始點較近的地方
3. 相關(guān)按鈕之間距離近點（D小點）更易于點擊
4. 屏幕的四角與四邊是「無限可選中」位置
5. 通過費茨定律的反向使用，可以降低按鈕被點擊的可能
作者：王梓銘，云之家用戶體驗部交互設(shè)計師。前產(chǎn)品汪， 還能偷偷擼幾行代碼。時常做夢，想改變世界。懷揣著這個夢想，跌跌撞撞嘗試了各種各樣的東西。錄過視頻，開過 Podcast，玩過博客。 最后發(fā)現(xiàn)，其實改變世界并不難。從小事做起，幫助能幫助的人，改變能改變的人就已經(jīng)足夠了。
本文來源@金蝶云之家體驗中心（微信ID：UXD-Cloudhub），作者@王梓銘
【轉(zhuǎn)載說明】 若上述素材出現(xiàn)侵權(quán)，請及時聯(lián)系我們刪除及進行處理：[email protected]
