今天這篇文章靈感來自于社群當(dāng)中一位小伙伴的靈魂提問，他問了一個交互設(shè)計當(dāng)中非常經(jīng)典的問題：“「取消」與「保存」到底誰在左邊，誰在右邊”。收到這個提問后，小編回想起自己剛?cè)胄袝r，也對該問題迷惑好久。順著小伙伴的提問思路進(jìn)一步抽象升級，把問題進(jìn)化成“界面設(shè)計當(dāng)中「主要操作」與「次要操作」應(yīng)該怎么去做設(shè)計”。
正如尼爾森在十大可用性原則里提到的理念：“優(yōu)秀的設(shè)計首先可以防止問題發(fā)生”。順著這個思路，在「主要操作」與「次要操作」設(shè)計的時候應(yīng)該首先防止用戶操作出錯。
為了讓用戶能夠?qū)χ鞔尾僮髯龀雒黠@區(qū)分，設(shè)計時應(yīng)該從視覺權(quán)重上對它們做出明顯區(qū)分，視覺權(quán)重大的按鈕會吸引更多的注意力。
這點(diǎn)絕大多數(shù)設(shè)計師在平常的工作中都會被忽略，使用清晰，明確，符合按鈕功能的語言描述更能讓用戶做出正確的選擇。
1、根據(jù)按鈕功能來設(shè)計按鈕上的文案，而不是用一些通用文案，比如：“OK”、“確定”、“是”等。例如下圖，右邊的設(shè)計就比左邊要來的優(yōu)雅許多，因?yàn)橛疫叞粹o的文案設(shè)計清楚明確告訴用戶操作后帶來的“果是什么。
這種就是常規(guī)操作沒啥可說的，視覺重心放在正向操作即可，絕大多數(shù)設(shè)計師不會出錯。
在這種情況下，給負(fù)責(zé)”不可逆動作“的主要操作更多視覺權(quán)重就十分危險，因?yàn)橛脩艨赡懿患偎妓鞯陌聪氯?。例如，?dāng)涉及到”替換“文件時，用戶值得需要多花一秒鐘時間來考慮該操作。這時候就應(yīng)該把視覺權(quán)重放在次要操作上，因?yàn)榇蠖鄶?shù)用戶缺乏耐心，對話框里提供的文案說明也不會仔細(xì)閱讀，并且對于一些高危操作依然是憑直覺去做出選擇。假如我們對更加珍貴數(shù)據(jù)進(jìn)行刪除操作時，這時候僅僅采用視覺權(quán)重手法去幫助用戶防止錯誤已經(jīng)不保險了，可以提供一個文本輸入框，并請求用戶輸入“刪除”一詞以確認(rèn)其操作行為。
在某些場景之下，直接把次要操作且高危的按鈕做成禁用狀態(tài)也是一種設(shè)計策略，只有當(dāng)滿足一些必要的先覺條件（先覺條件可以Popover的形式告訴用戶）以后，該操作才能被解除，變成可觸發(fā)使用的按鈕。
現(xiàn)在又到公說公有理，婆說婆有理的環(huán)節(jié)，“次要操作/主要操作”還是“主要操作/次要操作”這個爭論其實(shí)已經(jīng)很多年，實(shí)際上在真實(shí)操作與用戶偏好上都沒有顯著差異。僅僅在不同平臺之間有些無關(guān)緊要的差異。
在windows環(huán)境下的FLuent規(guī)范，非常鼓勵按鈕按照主次地位從左到右排開。
Apple MacOS 的人機(jī)指南說：“啟動操作的按鈕最靠右。取消按鈕位于此按鈕的左側(cè)?！?因此，對于 MacOS 用戶，“取消”位于“確定”按鈕的左側(cè)。而關(guān)于在谷歌平臺下Material Design規(guī)范里也闡述與MacOS相同的主次按鈕的布局規(guī)則。PS：下圖就是谷歌規(guī)范原文，小編英文不太好-__-!!!，只能只能意會不能言傳，英文好的小伙伴自己看。”縱觀三大平臺主次操作布局建議各不相同，我們做設(shè)計的時候也只需要遵從所在平臺設(shè)計建議即可，這樣既可以保持一致性，減少我們設(shè)計思考成本，也可以降低用戶使用時的習(xí)慣成本。如果你設(shè)計的產(chǎn)品是在Web上使用，那對于主次操作布局就會更加糾結(jié)，有條件的話可以全面調(diào)研下用戶是來自于windows比較多還是其他系統(tǒng)平臺，同時也可以考慮進(jìn)行A/B Test，但是無論你怎么進(jìn)行布局，都會有一小撮用戶的使用習(xí)慣被拋棄。所以，開心就好！
按鈕的布局設(shè)計本質(zhì)始終都是幫助用戶做出正確的選擇，以及減少他們的誤操作率。這就是為什么所有產(chǎn)品當(dāng)中與按鈕有關(guān)的體驗(yàn)設(shè)計都從識別性與防錯性的角度去思考。希望本文關(guān)于主次操作的設(shè)計思考能夠給同學(xué)們一點(diǎn)小小的啟發(fā)。
https://material.io/components/dialogs#anatomyhttps://uxplanet.org/user-experience/homehttps://developer.apple.com/design/human-interface-guidelines/—— 往期推薦 ——
領(lǐng)取粉絲專屬資源：大家點(diǎn)個“在看”，然后添加小編微信【Callen_0304】，后臺回復(fù)以下對應(yīng)關(guān)鍵詞即可領(lǐng)取。
1、回復(fù)“設(shè)計書籍”——領(lǐng)取從入門到高手各個階段必須到設(shè)計書籍；
2、回復(fù)“設(shè)計系統(tǒng)”——領(lǐng)取50家全球大廠設(shè)計系統(tǒng)；
3、回復(fù)“設(shè)計走查”——領(lǐng)取騰訊設(shè)計都在用的設(shè)計走查表；
4、回復(fù)“交互文檔”——領(lǐng)取標(biāo)準(zhǔn)化交互文檔模版；
5、回復(fù)“鴻蒙規(guī)范”——領(lǐng)取鴻蒙HarmonyOS全套設(shè)計規(guī)范組件；
最近和一些大廠朋友創(chuàng)建并開放月亮產(chǎn)品設(shè)計交流2群，這些群純粹是為了幫助讀者朋友們相互鏈接，無廣告、不付費(fèi)。有新的招聘也會第一時間發(fā)布在群內(nèi)，同時不定時分享干貨資料，目前還有少量席位，可以添加小編微信Callen_0304，備注公眾號讀者加入！
PS：只面向星標(biāo)了公眾號「月亮體驗(yàn)設(shè)計坊」的粉絲！
點(diǎn)下“在看”，你最好看
