編輯導(dǎo)語：菲茨定律是用來預(yù)測點到中心所需時間的數(shù)學(xué)模型。應(yīng)用于產(chǎn)品設(shè)計中，便需要考慮如何讓用戶的鼠標(biāo)指針于最短時間內(nèi)到達(dá)目標(biāo)。本篇文章里，作者基于對菲茨定律的探討，分析了彈窗主按鈕應(yīng)當(dāng)所處的位置，并對菲茨定律的應(yīng)用做了總結(jié)，一起來看一下。

大自然的想象力比人的想象力更強大?！聿榈隆べM曼

近期有個界面問題一直困擾著我，為此日思夜想，目前總算是有了點結(jié)果，今天和大家一起分享下。

問題是這樣的：有位設(shè)計師和我探討彈窗主按鈕在左側(cè)還是右側(cè)的問題，他說，他覺得應(yīng)該在右側(cè)，原因是因為菲茨定律（Fitts’ Law）：“彈窗主按鈕在右側(cè)，次按鈕在左側(cè)，是由于菲茨定律，這是因為邊角的按鈕更容易被點擊?！?/p>

主按鈕在右側(cè)，這個我是能理解的，但在右側(cè)的原因是由于菲茲定律決定的，我是持需考證態(tài)度的，畢竟雖然這個說法確實聽到過，但我認(rèn)為還有待進一步梳理，這里需要細(xì)究的要點包括：

1. 彈窗主按鈕一定要在右側(cè)嗎？
2. 如果彈窗主按鈕“更適合”在右側(cè)，是不是只有菲茨定律的原因，還有其他原因嗎？
3. 菲茨定律到底在解決什么問題，它是否除了上述問題，還解決了其他問題？

帶著這三個問題，本文打算從如下幾個方面展開：

第一部分：彈窗主按鈕位置。

1. PC端彈窗主按鈕位置情況；
2. 彈窗主按鈕位置在哪里更合適。

第二部分：費茨定律。

1. 什么是菲茨定律；
2. 菲茨定律的啟示。

第三部分：總結(jié)。

一、第一部分：彈窗主按鈕位置

1. PC端彈窗主按鈕位置情況

為了聚焦用戶的視覺與心理，激起用戶的反饋，彈窗誕生了。由于彈窗可以承載的內(nèi)容豐富，且交互具備擴展性，彈窗被廣泛應(yīng)用于應(yīng)用、網(wǎng)頁等產(chǎn)品中。在彈窗設(shè)計中，標(biāo)題、關(guān)閉的位置基本設(shè)計者們基本不會產(chǎn)生爭議，而主次按鈕的位置是一個永恒的話題。

1）按鈕組位置

對于彈窗來說，按鈕組的位置位于footer區(qū)，此點無可爭議。但按鈕組應(yīng)該在footer區(qū)的左側(cè)、中間，還是右側(cè)呢？從大量產(chǎn)品設(shè)計中我們可以發(fā)現(xiàn)，位于左邊的比例幾乎為0，中間大約5%，而位于右側(cè)的比例達(dá)到95%。

2）主次按鈕順序

既然彈窗按鈕組在95%的情況下都為右側(cè)，那么我們就來看下，在該種情況下，win和mac系統(tǒng)主次按鈕的順序是怎樣的，站在巨人肩膀上，總是能看得更遠(yuǎn)。主按鈕是指行動按鈕，行動按鈕是連接用戶與產(chǎn)品的接觸點，一個優(yōu)秀的行動按鈕，可以提升用戶體驗，且?guī)椭脩舾咝瓿扇蝿?wù)。

主按鈕顏色在視覺上通常被醒目突出，而次按鈕被弱化表現(xiàn)，這可以降低用戶出錯的風(fēng)險，及提高用戶完成操作的概率。

• 在win系統(tǒng)中：主按鈕在左側(cè)，次按鈕在右側(cè)。
• 在mac系統(tǒng)中：主按鈕在右側(cè)，次按鈕在左側(cè)。

這里插一句題外話，mac的窗口關(guān)閉，最小化、最大化按鈕在左上角，而win在右上角，它倆總是做啥都反一反。

那為什么win和mac會做出不同的選擇呢？背后又有哪些設(shè)計理念在支撐？翻閱了網(wǎng)上各種說法后，我總結(jié)出如下說辭：

1. mac傾向于把當(dāng)前場景下推薦用戶點擊的按鈕放在右側(cè)，例如，mac推薦取消，就會把取消放右側(cè)；推薦儲存，就會把儲存放右側(cè)。且右側(cè)按鈕為主按鈕，視覺上突出強化。
2. win傾向于把最安全的按鈕（比如取消、關(guān)閉）放在右側(cè)。因此，可以說它的主按鈕在左側(cè)，只是主按鈕沒有明確的視覺樣式，保持和次按鈕一致。

2. 彈窗主按鈕位置在哪里更合適

關(guān)于主次按鈕在左側(cè)還是右側(cè)更合適，兩大巨頭給出來的設(shè)計方案是不同的，網(wǎng)上也有很多同學(xué)做了該方面的實驗，結(jié)果大致是說：不論主按鈕在左側(cè)還是右側(cè)，只要系統(tǒng)中統(tǒng)一皆可。

就像中國人吃飯用筷子，西方人用刀叉，與其糾結(jié)筷子和刀叉哪個更適合吃飯，還不如考慮用戶的習(xí)慣、使用場景等因素，制定出更合適自身產(chǎn)品的解決方案。

不過話說回來，目前支持彈窗主按鈕在右側(cè)的人數(shù)占多數(shù)（產(chǎn)品專家、設(shè)計專家、用戶皆包括），原因不外乎：

1. 右手操作原則；
2. 用戶在彈窗中的閱讀模式為“Z”字模式；
3. BLABLA（接下來我們看看是不是菲茨定律也要參與進來）。

二、第二部分：費茨定律

1. 什么是菲茨定律

1954年保羅.菲茨首先提出菲茨定律，費茨定律是用來預(yù)測從任意一點到目標(biāo)中心位置所需時間的數(shù)學(xué)模型，其后來在人機交互領(lǐng)域也得到了廣泛的應(yīng)用。它的計算公式為：

• T代表完成移動所需的平均時間；
• a代表光標(biāo)開始/停止的時間；
• b代表光標(biāo)移動的速度；
• D代表從起點到目標(biāo)中心的距離；
• W代表目標(biāo)的寬度（按移動方向為水平方向計算）。

首先，完成移動所需的平均時間由兩個參數(shù)來決定，即起點到目標(biāo)中心的距離D和目標(biāo)的大小W。其次，起始點與目標(biāo)距離遠(yuǎn)，耗時越長；目標(biāo)越大，耗時越短。

這里還涉及用戶在使用產(chǎn)品時到達(dá)到目標(biāo)的心理訴求：

1. 用戶對鼠標(biāo)指針達(dá)到目標(biāo)并沒有時間要求，則用戶會緩慢移動鼠標(biāo)指針，在此過程中逐步調(diào)整鼠標(biāo)指針移動的位置，從而最終達(dá)到目標(biāo)。
2. 用戶對鼠標(biāo)指針達(dá)到目標(biāo)有明確時間要求（例如股票下單場景），此時用戶會快速將鼠標(biāo)指針移動到目標(biāo)附近，然后在做精細(xì)化的調(diào)整，從而精確操作目標(biāo)。

由上我們可以發(fā)現(xiàn)，不論用戶是否對鼠標(biāo)指針達(dá)到目標(biāo)有時間要求，菲茨定律中的兩個關(guān)鍵點為：鼠標(biāo)指針移動到目標(biāo)大致區(qū)域及精細(xì)化微調(diào)后精確定位目標(biāo)中心。且在實際產(chǎn)品設(shè)計中，我們必須要考慮如何讓用戶的鼠標(biāo)指針以最短的時間到達(dá)目標(biāo)。

因此，我們可以將菲茨定律中，從起點到目標(biāo)所需的時間細(xì)化為以下四種情況。

1）距離遠(yuǎn)——目標(biāo)大

除了鼠標(biāo)指針需要跨越較大的屏幕范圍，相對來說還是比較容易到達(dá)目標(biāo)的，因為目標(biāo)大。

2）距離遠(yuǎn)——目標(biāo)小

用戶需要在鼠標(biāo)達(dá)到目標(biāo)可觸位置前做一些鼠標(biāo)位移的精細(xì)化調(diào)整。

3）距離近——目標(biāo)大

用戶無需做太精細(xì)的調(diào)整就可以輕易到達(dá)目標(biāo)。

4）距離近——目標(biāo)小

在快速到達(dá)目標(biāo)后，鼠標(biāo)需要做一些精細(xì)化的調(diào)整。

以上的距離遠(yuǎn)近實際上還可以進行細(xì)化區(qū)分，一個是鼠標(biāo)指針處于頁面任意位置，與目標(biāo)并無上下文關(guān)系；一個是鼠標(biāo)指針處于下一步操作的上一步位置。

這里可能會影響到的情況是，當(dāng)鼠標(biāo)指針處于頁面任意位置時，目標(biāo)元素的大小需要做通用化考慮（使用業(yè)界標(biāo)準(zhǔn)或用戶的常規(guī)認(rèn)知）。

而當(dāng)可以非常明確鼠標(biāo)指針與目標(biāo)的上下關(guān)聯(lián)時，可以適當(dāng)調(diào)整設(shè)計策略，例如鼠標(biāo)hover一個按鈕，出現(xiàn)面板，我們可以發(fā)現(xiàn) ，鼠標(biāo)指針一定是在按鈕上了，才可以去進行下一步操作。這個場景下，鼠標(biāo)指針的起始位置永遠(yuǎn)是不變的，變的是目標(biāo)，即選擇了面板中的哪個操作。

2. 菲茨定律的啟示

從上述可知，在產(chǎn)品設(shè)計中，我們需要優(yōu)先考慮使用“距離近——目標(biāo)大”的設(shè)計方案，再考慮“距離遠(yuǎn)——目標(biāo)大”和“距離近——目標(biāo)小”(但也不能太小，還是要稍微合理化一些），不要去考慮“距離遠(yuǎn)——目標(biāo)小”的方法。

下面梳理了一些在產(chǎn)品中用到菲茨定律的例子，讓大家加深對菲茨定律的感知。

1）點擊區(qū)域合理加大，降低操作復(fù)雜度

例如表格排序功能，需要擴大點擊區(qū)域。

2）可點擊屬性視覺化

例如tabs的下面會帶一條選中的寬度線，由此可推理出鼠標(biāo)hover到其他tabs上的區(qū)域也是如此。

3）相關(guān)內(nèi)容與操作靠近

例如word中鼠標(biāo)選中文字，右鍵可帶出相關(guān)的操作。

4）相關(guān)按鈕互相靠近擺放

例如word文檔需要被保存，通常保存和取消靠近，便于用戶快速做出選擇和操作。

5）給目標(biāo)操作安排流程，而不是點狀設(shè)計功能

例如對單條數(shù)據(jù)啟動編輯后，在原位進行保存。

6）不希望用戶操作的時候，目標(biāo)設(shè)計遠(yuǎn)一點

例如word文檔需要被保存時，mac系統(tǒng)會將“不儲存”按鈕距離“儲存”按鈕遠(yuǎn)一些。

7）控制風(fēng)險

在移動端中，如果不想用戶誤觸，會將危險系數(shù)較高的按鈕放在距離拇指熱區(qū)遠(yuǎn)的位置。還有例如睡眠、關(guān)機、重啟等按鈕也不適合放一起（實際上真的放一起了，我無數(shù)次誤關(guān)機）。

三、第三部分：總結(jié)

說到這里，想必大家對菲茨定律已經(jīng)有了基本認(rèn)知吧。

在菲茨定律中，有一條為：頁面四周的按鈕更容易被點擊（無限可選中），因為鼠標(biāo)達(dá)到屏幕的邊角后，就不可能在超過了，所以mac和win都會將按鈕放在屏幕邊緣。這個就是那位設(shè)計師小伙伴說的，“彈窗主按鈕在右側(cè)，次按鈕在左側(cè)，是由于菲茨定律，這是因為邊角的按鈕更容易被點擊。”

實際上我們會發(fā)現(xiàn)，假如彈窗的主按鈕在右側(cè)，鼠標(biāo)也并不是達(dá)到屏幕的邊角，鼠標(biāo)只是達(dá)到了彈窗的邊緣（這里會存在一定的心理邊緣感知，可能那位設(shè)計師就是說的這個吧）。

然而，這與菲茨定律中的邊角無限可選中概念不是一回事。所以說，目前彈窗主按鈕大家更贊同在右側(cè)的設(shè)計理念是：

1. 右手操作原則：右手用鼠標(biāo)，用戶會習(xí)慣性把光標(biāo)放在屏幕右邊。
2. 用戶在彈窗中的閱讀模式為“Z”字模式：先瀏覽標(biāo)題，最后視覺落腳點在footer右側(cè)。手眼協(xié)調(diào)，手會執(zhí)行視覺落腳點的操作。
3. mac已經(jīng)培養(yǎng)了大多數(shù)人的用戶習(xí)慣，這點從很多產(chǎn)品設(shè)計中就可以看出，放棄用戶習(xí)慣就是挑戰(zhàn)用戶體驗，所以，我們?yōu)楹尾蝗肀亍?/li>

#專欄作家#

知果，公眾號：知果日記，人人都是產(chǎn)品經(jīng)理專欄作家。浙江工商大學(xué)品牌設(shè)計專業(yè)碩士，《B端思維-產(chǎn)品經(jīng)理的自我修煉》作者。在產(chǎn)品設(shè)計流程、產(chǎn)品設(shè)計原則、產(chǎn)品設(shè)計方法、產(chǎn)品設(shè)計規(guī)范方面均有豐富經(jīng)驗。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議