設(shè)計師經(jīng)常會思考對話框中“確定”和“取消”按鈕應該放在哪里。“確定”按鈕是完成任務的主要操作。
“取消”按鈕是輔助操作，可以讓用戶返回到原始屏幕而不完成任務。根據(jù)它們的功能，最佳的放置順序是什么？“確定”按鈕應該放在“取消”按鈕之前還是之后？
平臺一致性不夠好
許多人認為遵循平臺慣例是解決問題的答案。雖然這看起來像是解決問題的辦法，但實際上并非如此。它沒有回答哪種布局對用戶更有利以及原因。僅僅為了保持一致性而遵循平臺慣例的建議根本不夠好，只會讓設(shè)計師徒勞無功。
“一致性”是設(shè)計師們常用的詞。它也是人們不深入思考用戶面臨的設(shè)計問題的常見借口。如果連設(shè)計慣例存在的意義都不知道，遵循它又有什么意義呢？
如果某種設(shè)計慣例對用戶有害怎么辦？設(shè)計師是否應該為了保持一致性而盲目遵循它？是否應該因為設(shè)計師想要將平臺設(shè)計一致性作為解決所有問題的答案而將糟糕的設(shè)計實踐延續(xù)下去？
如今，某些平臺設(shè)計慣例被廣泛使用，因為它們對用戶有用。但這里的重點是，平臺設(shè)計的一致性永遠不應成為設(shè)計師做某事的唯一理由。理解為什么應該以某種方式設(shè)計用戶界面而不是另一種方式是關(guān)鍵。
按鈕位置很重要
有人可能會認為，通過增加操作按鈕的視覺重量和清晰的標簽使其更加突出，比其位置更重要。雖然操作按鈕的視覺重量和標簽是需要考慮的重要設(shè)計方面，但并非唯一的方面。
只關(guān)注一個設(shè)計方面而忽略其他方面，是粗心大意的設(shè)計師的表現(xiàn)。一個一絲不茍的設(shè)計師會思考每個設(shè)計方面如何影響用戶。而主要操作和次要操作的布局，正是設(shè)計師最難搞清楚的。這就是為什么“確定”/“取消”按鈕的爭論在設(shè)計師中如此普遍。
為什么“確定”按鈕放在右側(cè)效果最佳
當你克服了平臺慣例的爭論后，你會質(zhì)疑哪種布局效果最好。你可以通過分析設(shè)計如何影響用戶來解決這個問題。
減少視覺注視
有必要驗證設(shè)計師們常見的假設(shè)是否正確。一些設(shè)計師認為，將主要操作放在左側(cè)次要操作之前對用戶更有利，因為左側(cè)操作更靠近用戶，因此點擊時間更短。
這很有道理，但你不能忽視一個事實：用戶在選擇操作之前會查看所有選項。這意味著大多數(shù)用戶不會盲目點擊主要操作按鈕，而不查看旁邊的次要操作按鈕。
他們會先看到左側(cè)的主要操作，然后再看右側(cè)的次要操作。之后，他們會將目光移回主要操作并點擊它。這會在多個方向上形成總共三個視覺注視點。
左側(cè)有“確定”按鈕，視覺注視點更多，并流向多個方向
使用右側(cè)的“確定”按鈕，視覺注視點減少，并流向一個方向
將其與位于對話框右側(cè)、次要操作位于左側(cè)的按鈕進行比較。用戶的視線首先停留在次要操作上，然后移至主要操作并點擊按鈕。這在一個方向上產(chǎn)生了總共兩次視覺注視，從而為用戶提供了更快的視覺流。
用戶只會在每個按鈕上注視一次，最終停留在主要操作按鈕上。將主要操作按鈕放在左側(cè)或許能讓用戶更容易觸及，但從用戶的思維過程和視覺注視角度來看，將主要操作按鈕放在對話框右側(cè)實際上會更快。
映射到預期的按鈕功能
當用戶點擊輔助操作按鈕時，他們希望應用程序不執(zhí)行任何操作，并返回到原始屏幕。因此，“取消”按鈕的功能類似于“返回”按鈕。
當用戶點擊主要操作按鈕時，他們期望應用程序執(zhí)行按鈕指示的操作，并將他們帶到下一個屏幕。因此，“確定”按鈕的功能類似于“下一步”按鈕。將次要操作按鈕放在左側(cè)，將主要操作按鈕放在右側(cè)，可以映射用戶期望的“上一步”和“下一步”按鈕的功能。
這與分頁按鈕的放置方式類似。將用戶帶到下一頁的按鈕位于右側(cè)，將用戶帶回上一頁的按鈕位于左側(cè)。這種按鈕放置方式之所以有效，是因為它與用戶從左到右的閱讀和導航方向相呼應，其中右側(cè)是前進方向，左側(cè)是后退方向。
“確定”可讓用戶前進到下一個屏幕，“取消”可讓用戶返回到原始屏幕
對話框中的“確定”和“取消”按鈕應遵循類似的交互模式，因為它們的功能類似于分頁按鈕。不僅如此，左右方向的模式也符合西方用戶習慣。將主要操作放在右側(cè)，將次要操作放在左側(cè)，將使對話框按鈕更容易、更直觀地被用戶理解。
為用戶提供更高效的任務流程
對話框右下角的按鈕更容易被用戶點擊，因為它遵循了古騰堡圖表。在古騰堡圖表中，右下角是終端區(qū)域。這是用戶完成瀏覽后視線最終停留的區(qū)域。
將按鈕放置在終端區(qū)域，可以讓用戶最后看到需要執(zhí)行的主要操作。這不僅改善了視覺流程，也優(yōu)化了任務流程。用戶在瀏覽時不會跳過主要操作按鈕。他們的目光會在瀏覽過程中直接落在按鈕上，因此可以立即點擊。
掃描對話框并采取行動既快速又簡單，因為用戶的眼睛停留在主要操作按鈕上。
按鈕放在角落里還是將它們放在一起？
設(shè)計師經(jīng)常思考的另一個問題是，他們應該把按鈕放在角落里還是把它們放在一起。當你把主要操作和次要操作放在對話框的角落里時，它們可以很好地映射到左右導航方向。然而，由于“確定”和“取消”按鈕不是導航按鈕，因此沒有必要遵循方向映射。有時，這樣做弊大于利。
按鈕之間較大的視覺分離使得操作比較困難，并將一個操作與另一個操作隔離開來
如果應用程序即將執(zhí)行用戶無法撤消的關(guān)鍵操作，那么讓用戶能夠同時看到“取消”按鈕和“確定”按鈕就顯得尤為重要。在這種情況下，“取消”按鈕的功能可能類似于“上一步”按鈕，但它更重要的是，它充當了安全按鈕，可以防止任何更改。
將“取消”按鈕放在最左上角的危險在于，由于兩個按鈕之間的視覺距離過大，用戶可能會忽略它。將“取消”按鈕與“確定”按鈕放在一起，可以讓用戶更容易地在一次注視中看到并比較這兩個操作，從而選擇最佳操作。
結(jié)論
當用戶需要閱讀重要信息或執(zhí)行重要操作時，設(shè)計師通常會使用對話框。按鈕的放置順序會影響用戶選擇的操作。如果按鈕的放置順序清晰高效，可以防止用戶選擇錯誤的操作并犯錯。
按鈕的位置很重要，但也要記住注意按鈕的視覺重量和標簽。所有這些設(shè)計方面都會在用戶瀏覽對話框時發(fā)揮作用。既然您理解了為什么“確定”按鈕放在右側(cè)效果最佳，那么您就有比平臺一致性更好的參考依據(jù)了。
蘭亭妙微(www.carolamber.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
