目錄

平臺一致性的問題

按鈕的位置非常重要

為什么"確定"按鈕在右側效果更好

按鈕放置在角落還是放在一起？

結論

正文

大家好，我是西瓜～

這次我們聊一個設計知識點，這個知識點平日會被設計師忽視，因為它太過于默許，但我們應該知道的是，很多默認的東西也是有自身的知識結構支撐，久而久之被人忽視了。

大家應該都見到過彈窗、表單里的"確定"和"取消"按鈕吧，這兩個按鈕大家還記得會放在頁面中的哪個位置嗎？"確定"按鈕是完成任務的主要操作，而"取消"按鈕是輔助操作，它主要的作用是用于返回到起點屏幕而放棄任務。那么，根據它們的功能，最佳的按鈕順序是什么？"確定"按鈕應該放在"取消"按鈕之前還是之后呢？

平臺一致性的問題

可能這時候很多設計師會按照習慣，選擇遵循一致性，采用一些常見的組件樣式進行操作。雖然這看起來似乎是解決問題的方法，但實際上并非如此。這并沒有回答哪種位置對用戶更有效以及為什么，單純遵循已有組件并不足以讓設計師有更好的思維和主動思考的意識。

"一致性"是設計師中常用的一個詞。然而，這常常也被用作一個借口，讓設計師不深入思考用戶面臨的設計問題，如果一個設計師都不知道為什么一致性的規則存在，那么遵循這種設計慣例又有什么意義呢？

如果某種設計慣例對用戶來說是有害的，那么設計師是否應該盲目遵循它，僅僅因為要追求一致性？體驗極差的設計樣式和結果是否應該因為設計師希望迎合大家都默認的設計一致性而繼續存在？這其實本質就是個問題...

現在網上有很多組建和參考，都被設計師天天借鑒和廣泛使用，因為它們適用于用戶。但關鍵在于，設計師永遠不應該滿足于墨守成規的選擇設計的一致性，將其作為做設計的唯一理由，我們關鍵還是要理解為什么應該以某種方式而不是其他方式來設計用戶界面。

按鈕的位置非常重要

這時候有的設計師可能會主張通過賦予操作按鈕更多的視覺重量和清晰明了的標簽來突出界面中的操作按鈕，而不是僅關注按鈕的位置，雖然操作按鈕的視覺重量和標簽是需要考慮的重要設計方面，但它們并不是唯一的方面。

真正一名有思想，會獨立思考的設計師會綜合考慮每個設計方面對用戶的影響，而不只是關注其中的一個方面，對于設計師來說，最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關于"確定"/"取消"按鈕的位置進行說明的原因。

為什么"確定"按鈕在右側效果更好

當我們在使用設計組建框架前進行考慮時，你可能會開始明白哪個位置會對用戶效果更好一些，我們可以通過分析設計對用戶的影響來解決這個問題。

1、減少視覺注視

有些設計師認為，將主要操作放在左側，在次要操作之前，對用戶來說更好，因為它更近，所以點擊所需時間更少，這看起來好像有點道理，但我們不能忽視一個問題，即在選擇要執行的操作之前，用戶會查看所有選項，這意味著大多數用戶不會在不查看旁邊的次要操作按鈕的情況下盲目地點擊主要操作按鈕。

他們將首先看到左側的主要操作，然后再看右側的次要操作，然后他們會將視線轉回主要操作按鈕進行點擊。這里總共涉及到三個視覺注視點，在多個方向上分散了用戶的注意力。

與將主要操作放在左側相比，將主要操作放在對話框的右側，將次要操作放在左側，用戶只需注視每個按鈕一次，并在主要操作按鈕上結束。這樣一來，視覺注視的數量就減少了，并且在一個方向上產生了更流暢的視覺流動。

用戶只關注每個按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側可能會使用戶更容易點擊，但從用戶的心理過程和視覺注視速度來看，將主要操作放在對話框的右側實際上更快。

2、與預期的按鈕功能相匹配

當用戶點擊“取消”操作按鈕時，他們期望的是產品不進行任何操作，而是將他們返回到起始屏幕位置，因此，"取消"按鈕的功能類似于"返回"按鈕。

當用戶點擊“確定”操作按鈕時，他們期望產品進行按鈕所表示的操作，并將他們帶到下一個屏幕。因此，"確定"按鈕的功能類似于"下一步"按鈕，將次要操作按鈕放在左側，將主要操作按鈕放在右側，可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。

這類似于分頁按鈕的放置方式，將用戶帶到下一頁的按鈕位于右側，將用戶帶回先前頁面的按鈕位于左側。這種按鈕位置的安排是有效的，因為它與用戶從左到右的閱讀和導航方向相吻合，其中右側是前進方向，左側是后退方向。

3、"確定"讓用戶前進到下一個屏幕，"取消"讓用戶返回到原始屏幕。

對話框中的"確定"和"取消"按鈕應該遵循類似的交互模式，因為它們的功能類似于分頁按鈕，另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側，將次要操作放在左側，可以使對話框按鈕對用戶更易于理解和使用。

4、提供更高效的任務流程

將按鈕放置在對話框的右下角更容易被用戶點擊，因為這符合【古騰堡圖表】。在古騰堡圖表中，右下角區域是終端區域，用戶在掃視后的最終目的地。

將按鈕放在終端區域可以使用戶在視覺掃描時看到他們最后需要執行的主要操作，這不僅改善了視覺流動，還改善了任務流程。用戶在掃視過程中不會錯過主要操作按鈕，當他們經過時，他們的目光會停留在上面，從而可以立即點擊它。

掃視對話框并采取行動變得更快更容易，因為用戶的目光最終會落在主要操作按鈕上。

按鈕放置在角落還是放在一起？

我們需要考慮另一個問題，那就是我們應該將按鈕放在角落還是放在一起，當將主要操作和次要操作放在對話框的角落時，這與左右導航方向相吻合，這是很好的映射。然而，由于"確定"和"取消"按鈕并不是導航按鈕，因此并不需要遵循方向映射，有時候這樣做可能帶來更多的弊端。

較大的視覺分離使得比較操作變得困難，并將一個操作與另一個操作隔離開來 如果產品頁面即將執行用戶無法撤銷的關鍵操作，那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下，"取消"按鈕的功能可能類似于"上一步"按鈕，但它更重要，因為它充當安全按鈕以防止任何更改。

將"取消"按鈕放置在最左下角的危險在于，由于兩個按鈕之間的視覺分離較大，可能會導致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個操作，以選擇最佳操作。