彈窗主按鈕與菲茨定律的糾葛
2021-7-27 ui設(shè)計(jì)分享達(dá)人
問題是這樣的：有位設(shè)計(jì)師和我探討彈窗主按鈕在左側(cè)還是右側(cè)的問題，他說，他覺得應(yīng)該在右側(cè)，原因是因?yàn)榉拼亩桑‵itts’ Law）：“彈窗主按鈕在右側(cè)，次按鈕在左側(cè)，是由于菲茨定律，這是因?yàn)檫吔堑陌粹o更容易被點(diǎn)擊?！?
主按鈕在右側(cè)，這個(gè)我是能理解的，但在右側(cè)的原因是由于菲茲定律決定的，我是持需考證態(tài)度的，畢竟雖然這個(gè)說法確實(shí)聽到過，但我認(rèn)為還有待進(jìn)一步梳理，這里需要細(xì)究的要點(diǎn)包括：
第一、彈窗主按鈕一定要在右側(cè)嗎？
第二、如果彈窗主按鈕“更適合”在右側(cè)，是不是只有菲茨定律的原因，還有其他原因嗎？
第三、菲茨定律到底在解決什么問題，它是否除了上述問題，還解決了其他問題？
帶著這三個(gè)問題，本文打算從如下幾個(gè)方面展開：為了聚焦用戶的視覺與心理，激起用戶的反饋，彈窗誕生了。由于彈窗可以承載的內(nèi)容豐富，且交互具備擴(kuò)展性，彈窗被廣泛應(yīng)用于應(yīng)用、網(wǎng)頁等產(chǎn)品中。在彈窗設(shè)計(jì)中，標(biāo)題、關(guān)閉的位置基本設(shè)計(jì)者們基本不會(huì)產(chǎn)生爭議，而主次按鈕的位置是一個(gè)永恒的話題。 對(duì)于彈窗來說，按鈕組的位置位于footer區(qū)，此點(diǎn)無可爭議。但按鈕組應(yīng)該在footer區(qū)的左側(cè)、中間，還是右側(cè)呢？從大量產(chǎn)品設(shè)計(jì)中我們可以發(fā)現(xiàn)，位于左邊的比例幾乎為0，中間大約5%，而位于右側(cè)的比例達(dá)到95%。 既然彈窗按鈕組在95%的情況下都為右側(cè)，那么我們就來看下，在該種情況下，win和mac系統(tǒng)主次按鈕的順序是怎樣的，站在巨人肩膀上，總是能看的更遠(yuǎn)。 主按鈕是指行動(dòng)按鈕，行動(dòng)按鈕是連接用戶與產(chǎn)品的接觸點(diǎn)，一個(gè)優(yōu)秀的行動(dòng)按鈕，可以提升用戶體驗(yàn)，且?guī)椭脩舾咝瓿扇蝿?wù)。主按鈕顏色在視覺上通常被醒目突出，而次按鈕被弱化表現(xiàn)，這可以降低用戶出錯(cuò)的風(fēng)險(xiǎn)，及提高用戶完成操作的概率。 這里插一句題外話，mac的窗口關(guān)閉，最小化、最大化按鈕在左上角，而win在右上角，它倆總是做啥都反一反。 那為什么win和mac會(huì)做出不同的選擇呢？背后又有哪些設(shè)計(jì)理念在支撐？翻閱了網(wǎng)上各種說法后，我總結(jié)出如下說辭： 1、mac傾向于把當(dāng)前場景下推薦用戶點(diǎn)擊的按鈕放在右側(cè)，例如，mac推薦取消，就會(huì)把取消放右側(cè)；推薦儲(chǔ)存，就會(huì)把儲(chǔ)存放右側(cè)。且右側(cè)按鈕為主按鈕，視覺上突出強(qiáng)化。 2、win傾向于把最安全的按鈕（比如取消，關(guān)閉）放在右側(cè)。因此，可以說它的主按鈕在左側(cè)，只是主按鈕沒有明確的視覺樣式，保持和次按鈕一致。 關(guān)于主次按鈕在左側(cè)還是右側(cè)更合適，兩大巨頭給出來的設(shè)計(jì)方案是不同的，網(wǎng)上也有很多同學(xué)做了該方面的實(shí)驗(yàn)，結(jié)果大致是說：不論主按鈕在左側(cè)還是右側(cè)，只要系統(tǒng)中統(tǒng)一皆可。就像中國人吃飯用筷子，西方人用刀叉，與其糾結(jié)筷子和刀叉哪個(gè)更適合吃飯，還不如考慮用戶的習(xí)慣、使用場景等因素，制定出更合適自身產(chǎn)品的解決方案。 不過話說回來，目前支持彈窗主按鈕在右側(cè)的人數(shù)占多數(shù)（產(chǎn)品專家、設(shè)計(jì)專家、用戶皆包括），原因不外乎：3、BLABLA（接下來我們看看是不是菲茨定律也要參與進(jìn)來）。 1954年保羅.菲茨首先提出菲茨定律，費(fèi)茨定律是用來預(yù)測從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型，其后來在人機(jī)交互領(lǐng)域也得到了廣泛的應(yīng)用。它的計(jì)算公式為： T代表完成移動(dòng)所需的平均時(shí)間； a代表光標(biāo)開始/停止的時(shí)間； D代表從起點(diǎn)到目標(biāo)中心的距離； W代表目標(biāo)的寬度（按移動(dòng)方向?yàn)樗椒较蛴?jì)算）。 首先，完成移動(dòng)所需的平均時(shí)間由兩個(gè)參數(shù)來決定，即起點(diǎn)到目標(biāo)中心的距離D和目標(biāo)的大小W。其次，起始點(diǎn)與目標(biāo)距離遠(yuǎn)，耗時(shí)越長；目標(biāo)越大，耗時(shí)越短。 這里還涉及用戶在使用產(chǎn)品時(shí)到達(dá)到目標(biāo)的心理訴求：1、用戶對(duì)鼠標(biāo)指針達(dá)到目標(biāo)并沒有時(shí)間要求，則用戶會(huì)緩慢移動(dòng)鼠標(biāo)指針，在此過程中逐步調(diào)整鼠標(biāo)指針移動(dòng)的位置，從而最終達(dá)到目標(biāo)。 2、用戶對(duì)鼠標(biāo)指針達(dá)到目標(biāo)有明確時(shí)間要求（例如股票下單場景），此時(shí)用戶會(huì)快速將鼠標(biāo)指針移動(dòng)到目標(biāo)附近，然后在做精細(xì)化的調(diào)整，從而精確操作目標(biāo)。 由上我們可以發(fā)現(xiàn)，不論用戶是否對(duì)鼠標(biāo)指針達(dá)到目標(biāo)有時(shí)間要求， 菲茨定律中的兩個(gè)關(guān)鍵點(diǎn)為：鼠標(biāo)指針移動(dòng)到目標(biāo)大致區(qū)域及精細(xì)化微調(diào)后精確定位目標(biāo)中心。且在實(shí)際產(chǎn)品設(shè)計(jì)中，我們必須要考慮如何讓用戶的鼠標(biāo)指針以最短的時(shí)間到達(dá)目標(biāo)。 因此，我們可以將菲茨定律中，從起點(diǎn)到目標(biāo)所需的時(shí)間細(xì)化為以下四種情況：除了鼠標(biāo)指針需要跨越較大的屏幕范圍，相對(duì)來說還是比較容易到達(dá)目標(biāo)的，因?yàn)槟繕?biāo)大。 用戶需要在鼠標(biāo)達(dá)到目標(biāo)可觸位置前做一些鼠標(biāo)位移的精細(xì)化調(diào)整。 用戶無需做太精細(xì)的調(diào)整就可以輕易到達(dá)目標(biāo)。 在快速到達(dá)目標(biāo)后，鼠標(biāo)需要做一些精細(xì)化的調(diào)整。 以上的距離遠(yuǎn)近實(shí)際上還可以進(jìn)行細(xì)化區(qū)分，一個(gè)是鼠標(biāo)指針處于頁面任意位置，與目標(biāo)并無上下文關(guān)系；一個(gè)是鼠標(biāo)指針處于下一步操作的上一步位置。 這里可能會(huì)影響到的情況是，當(dāng)鼠標(biāo)指針處于頁面任意位置時(shí)，目標(biāo)元素的大小需要做通用化考慮（使用業(yè)界標(biāo)準(zhǔn)或用戶的常規(guī)認(rèn)知）。而當(dāng)可以非常明確鼠標(biāo)指針與目標(biāo)的上下關(guān)聯(lián)時(shí)，可以適當(dāng)調(diào)整設(shè)計(jì)策略，例如鼠標(biāo)hover一個(gè)按鈕，出現(xiàn)面板，我們可以發(fā)現(xiàn) ，鼠標(biāo)指針一定是在按鈕上了，才可以去進(jìn)行下一步操作，這個(gè)場景下，鼠標(biāo)指針的起始位置永遠(yuǎn)是不變的，變的是目標(biāo)，即選擇了面板中的哪個(gè)操作。 從上述可知，在產(chǎn)品設(shè)計(jì)中，我們需要 優(yōu)先考慮使用“距離近-目標(biāo)大”的設(shè)計(jì)方案，再考慮“距離遠(yuǎn)-目標(biāo)大”和“距離近-目標(biāo)小”(但也不能太小，還是要稍微合理化一些），不要去考慮“距離遠(yuǎn)-目標(biāo)小”的方法。下面梳理了一些在產(chǎn)品中用到菲茨定律的例子，讓大家加深對(duì)菲茨定律的感知。 1、點(diǎn)擊區(qū)域合理加大，降低操作復(fù)雜度。例如表格排序功能，需要擴(kuò)大點(diǎn)擊區(qū)域。 2、可點(diǎn)擊屬性視覺化。例如tabs的下面會(huì)帶一條選中的寬度線，由此可推理出鼠標(biāo)hover到其他tabs上的區(qū)域也是如此。 3、相關(guān)內(nèi)容與操作靠近。例如word中鼠標(biāo)選中文字，右鍵可帶出相關(guān)的操作。 4、相關(guān)按鈕互相靠近擺放。例如word文檔需要被保存，通常保存和取消靠近，便于用戶快速做出選擇和操作。 5、給目標(biāo)操作安排流程，而不是點(diǎn)狀設(shè)計(jì)功能。例如對(duì)單條數(shù)據(jù)啟動(dòng)編輯后，在原位進(jìn)行保存。 6、不希望用戶操作的時(shí)候，目標(biāo)設(shè)計(jì)遠(yuǎn)一點(diǎn)。例如word文檔需要被保存時(shí)，mac系統(tǒng)會(huì)將“不儲(chǔ)存”按鈕距離“儲(chǔ)存”按鈕遠(yuǎn)一些。 7、控制風(fēng)險(xiǎn)。在移動(dòng)端中，如果不想用戶誤觸，會(huì)將危險(xiǎn)系數(shù)較高的按鈕放在距離拇指熱區(qū)遠(yuǎn)的位置。還有例如睡眠、關(guān)機(jī)、重啟等按鈕也不適合放一起（實(shí)際上真的放一起了，我無數(shù)次誤關(guān)機(jī)）。 說到這里，想必大家對(duì)菲茨定律已經(jīng)有了基本認(rèn)知吧。在菲茨定律中，有一條為：頁面四周的按鈕更容易被點(diǎn)擊（無限可選中），因?yàn)槭髽?biāo)達(dá)到屏幕的邊角后，就不可能在超過了，所以mac和win都會(huì)將按鈕放在屏幕邊緣。這個(gè)就是那位設(shè)計(jì)師小伙伴說的，“彈窗主按鈕在右側(cè)，次按鈕在左側(cè)，是由于菲茨定律，這是因?yàn)檫吔堑陌粹o更容易被點(diǎn)擊?！?nbsp;實(shí)際上我們會(huì)發(fā)現(xiàn)，假如彈窗的主按鈕在右側(cè)，鼠標(biāo)也并不是達(dá)到屏幕的邊角，鼠標(biāo)只是達(dá)到了彈窗的邊緣（這里會(huì)存在一定的心理邊緣感知，可能那位設(shè)計(jì)師就是說的這個(gè)吧）。然而，這與菲茨定律中的邊角無限可選中概念不是一回事。 所以說，目前彈窗主按鈕大家更贊同在右側(cè)的設(shè)計(jì)理念是：1、右手操作原則：右手用鼠標(biāo)，用戶會(huì)習(xí)慣性把光標(biāo)放在屏幕右邊。 2、用戶在彈窗中的閱讀模式為“Z”字模式：先瀏覽標(biāo)題，最后視覺落腳點(diǎn)在footer右側(cè)。手眼協(xié)調(diào)，手會(huì)執(zhí)行視覺落腳點(diǎn)的操作。
