問題是這樣的：有位設(shè)計師和我探討彈窗主按鈕在左側(cè)還是右側(cè)的問題，他說，他覺得應(yīng)該在右側(cè)，原因是因為菲茨定律（Fitts’ Law）：“彈窗主按鈕在右側(cè)，次按鈕在左側(cè)，是由于菲茨定律，這是因為邊角的按鈕更容易被點擊?！?
主按鈕在右側(cè)，這個我是能理解的，但在右側(cè)的原因是由于菲茲定律決定的，我是持需考證態(tài)度的，畢竟雖然這個說法確實聽到過，但我認為還有待進一步梳理，這里需要細究的要點包括：
第一、彈窗主按鈕一定要在右側(cè)嗎？
第二、如果彈窗主按鈕“更適合”在右側(cè)，是不是只有菲茨定律的原因，還有其他原因嗎？
第三、菲茨定律到底在解決什么問題，它是否除了上述問題，還解決了其他問題？
為了聚焦用戶的視覺與心理，激起用戶的反饋，彈窗誕生了。由于彈窗可以承載的內(nèi)容豐富，且交互具備擴展性，彈窗被廣泛應(yīng)用于應(yīng)用、網(wǎng)頁等產(chǎn)品中。在彈窗設(shè)計中，標(biāo)題、關(guān)閉的位置基本設(shè)計者們基本不會產(chǎn)生爭議，而主次按鈕的位置是一個永恒的話題。 對于彈窗來說，按鈕組的位置位于footer區(qū)，此點無可爭議。但按鈕組應(yīng)該在footer區(qū)的左側(cè)、中間，還是右側(cè)呢？從大量產(chǎn)品設(shè)計中我們可以發(fā)現(xiàn)，位于左邊的比例幾乎為0，中間大約5%，而位于右側(cè)的比例達到95%。 既然彈窗按鈕組在95%的情況下都為右側(cè)，那么我們就來看下，在該種情況下，win和mac系統(tǒng)主次按鈕的順序是怎樣的，站在巨人肩膀上，總是能看的更遠。 主按鈕是指行動按鈕，行動按鈕是連接用戶與產(chǎn)品的接觸點，一個優(yōu)秀的行動按鈕，可以提升用戶體驗，且?guī)椭脩舾咝瓿扇蝿?wù)。主按鈕顏色在視覺上通常被醒目突出，而次按鈕被弱化表現(xiàn)，這可以降低用戶出錯的風(fēng)險，及提高用戶完成操作的概率。 這里插一句題外話，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è)，只是主按鈕沒有明確的視覺樣式，保持和次按鈕一致。 關(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è)計專家、用戶皆包括），原因不外乎：3、BLABLA（接下來我們看看是不是菲茨定律也要參與進來）。 1954年保羅.菲茨首先提出菲茨定律，費茨定律是用來預(yù)測從任意一點到目標(biāo)中心位置所需時間的數(shù)學(xué)模型，其后來在人機交互領(lǐng)域也得到了廣泛的應(yīng)用。它的計算公式為： W代表目標(biāo)的寬度（按移動方向為水平方向計算）。 首先，完成移動所需的平均時間由兩個參數(shù)來決定，即起點到目標(biāo)中心的距離D和目標(biāo)的大小W。其次，起始點與目標(biāo)距離遠，耗時越長；目標(biāo)越大，耗時越短。 這里還涉及用戶在使用產(chǎn)品時到達到目標(biāo)的心理訴求：1、用戶對鼠標(biāo)指針達到目標(biāo)并沒有時間要求，則用戶會緩慢移動鼠標(biāo)指針，在此過程中逐步調(diào)整鼠標(biāo)指針移動的位置，從而最終達到目標(biāo)。 2、用戶對鼠標(biāo)指針達到目標(biāo)有明確時間要求（例如股票下單場景），此時用戶會快速將鼠標(biāo)指針移動到目標(biāo)附近，然后在做精細化的調(diào)整，從而精確操作目標(biāo)。 由上我們可以發(fā)現(xiàn)，不論用戶是否對鼠標(biāo)指針達到目標(biāo)有時間要求， 菲茨定律中的兩個關(guān)鍵點為：鼠標(biāo)指針移動到目標(biāo)大致區(qū)域及精細化微調(diào)后精確定位目標(biāo)中心。且在實際產(chǎn)品設(shè)計中，我們必須要考慮如何讓用戶的鼠標(biāo)指針以最短的時間到達目標(biāo)。 因此，我們可以將菲茨定律中，從起點到目標(biāo)所需的時間細化為以下四種情況：除了鼠標(biāo)指針需要跨越較大的屏幕范圍，相對來說還是比較容易到達目標(biāo)的，因為目標(biāo)大。 用戶需要在鼠標(biāo)達到目標(biāo)可觸位置前做一些鼠標(biāo)位移的精細化調(diào)整。 用戶無需做太精細的調(diào)整就可以輕易到達目標(biāo)。 在快速到達目標(biāo)后，鼠標(biāo)需要做一些精細化的調(diào)整。 以上的距離遠近實際上還可以進行細化區(qū)分，一個是鼠標(biāo)指針處于頁面任意位置，與目標(biāo)并無上下文關(guān)系；一個是鼠標(biāo)指針處于下一步操作的上一步位置。 這里可能會影響到的情況是，當(dāng)鼠標(biāo)指針處于頁面任意位置時，目標(biāo)元素的大小需要做通用化考慮（使用業(yè)界標(biāo)準(zhǔn)或用戶的常規(guī)認知）。而當(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)指針的起始位置永遠是不變的，變的是目標(biāo)，即選擇了面板中的哪個操作。 從上述可知，在產(chǎn)品設(shè)計中，我們需要 優(yōu)先考慮使用“距離近-目標(biāo)大”的設(shè)計方案，再考慮“距離遠-目標(biāo)大”和“距離近-目標(biāo)小”(但也不能太小，還是要稍微合理化一些），不要去考慮“距離遠-目標(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è)計遠一點。例如word文檔需要被保存時，mac系統(tǒng)會將“不儲存”按鈕距離“儲存”按鈕遠一些。 7、控制風(fēng)險。在移動端中，如果不想用戶誤觸，會將危險系數(shù)較高的按鈕放在距離拇指熱區(qū)遠的位置。還有例如睡眠、關(guān)機、重啟等按鈕也不適合放一起（實際上真的放一起了，我無數(shù)次誤關(guān)機）。 說到這里，想必大家對菲茨定律已經(jīng)有了基本認知吧。在菲茨定律中，有一條為：頁面四周的按鈕更容易被點擊（無限可選中），因為鼠標(biāo)達到屏幕的邊角后，就不可能在超過了，所以mac和win都會將按鈕放在屏幕邊緣。這個就是那位設(shè)計師小伙伴說的，“彈窗主按鈕在右側(cè)，次按鈕在左側(cè)，是由于菲茨定律，這是因為邊角的按鈕更容易被點擊。” 實際上我們會發(fā)現(xiàn)，假如彈窗的主按鈕在右側(cè)，鼠標(biāo)也并不是達到屏幕的邊角，鼠標(biāo)只是達到了彈窗的邊緣（這里會存在一定的心理邊緣感知，可能那位設(shè)計師就是說的這個吧）。然而，這與菲茨定律中的邊角無限可選中概念不是一回事。 所以說，目前彈窗主按鈕大家更贊同在右側(cè)的設(shè)計理念是：1、右手操作原則：右手用鼠標(biāo)，用戶會習(xí)慣性把光標(biāo)放在屏幕右邊。 2、用戶在彈窗中的閱讀模式為“Z”字模式：先瀏覽標(biāo)題，最后視覺落腳點在footer右側(cè)。手眼協(xié)調(diào)，手會執(zhí)行視覺落腳點的操作。
