編者按：從用戶體驗和交互設計的角度來看，按鈕是最為基礎的 UI 控件，它是個看似簡單但是實際應用的時候規(guī)則一大堆的玩意。這篇文章出自資深設計師 Saadia Minhas 之手，從她的角度總結(jié)了一些很容易影響到體驗的按鈕設計法則。也許不夠全面，但是勝在足夠關鍵。

另外，建議結(jié)合 B 端設計專家的這篇文章來看：

在參與各種設計項目的過程中，我自己總結(jié)了一套相對實用的技巧和規(guī)則，幫助我在整個設計過程中保持相對較高的標準。

今天這篇文章，我主要分享一些與按鈕設計相關的技巧。這些技巧將幫助你創(chuàng)建具有視覺吸引力且用戶友好的按鈕。

1. 不要讓按鈕上的文本換行

不要讓按鈕上的文本換行，按鈕上的文本標簽應保留在同一行上：

• 單行文本更容易快速掃視，確保用戶可以快速了解按鈕的功能。
• 帶有換行文本的按鈕看起來會很雜亂和不均勻。
• 將所有按鈕標簽放在一行上有助于保持整個界面的一致性。
• 使用簡潔的文本標簽，并避免在按鈕上使用冗長的語句。

2. 使用表示動作的動詞作為按鈕文本標簽

按鈕的文本標簽可以激勵用戶采取相應的操作。要使用文本表述按鈕的功能，同時使用有指向的功能作為按鈕的文本標簽。

• 始終使用對用戶展示清晰且有意義的按鈕文本標簽。
• 當用戶看到「保存」、「預覽」和「發(fā)布」等按鈕標簽時，他們確切地知道按下按鈕時，會產(chǎn)生什么樣的效果。

3.請不要把按鈕設置為禁用狀態(tài)

避免讓按鈕進入禁用狀態(tài)，因為用戶經(jīng)常很難立刻馬上找出按鈕被禁用的原因，并且可能不會知道應該怎么做才能讓按鈕進入可用狀態(tài)。

比較好的處理方案，是讓按鈕一直處于可用狀態(tài)，如果用戶沒有在輸入框中輸入必要的信息，或者選中必要的選項，再通過提示來告知用戶無法完成操作的原因。

• 將按鈕禁用會破壞產(chǎn)品的交互流程。用戶看到灰色按鈕，同時沒有明確的指引告訴用戶哪里出了問題，會感覺很無助。
• 最好始終保持按鈕處于啟用狀態(tài)，如果用戶在交互和內(nèi)容上沒有提供必須的信息，就突出顯示該字段的內(nèi)容。

4.不要縱向并排放置按鈕

需要說明的是，在移動端界面上，由于橫向空間不夠，經(jīng)常需要將按鈕縱向排列。但是在多數(shù)情況下，有足夠空間的情況下，盡量將按鈕和按鈕橫向并排放置，這樣會更加符合普遍認知和用戶習慣。

• 將按鈕橫向并排放置可以讓用戶更快地做出決策，因為用戶的閱讀順序和視覺動線是順暢的，可以一眼就比較各個選項。
• 垂直堆疊可能會無意中創(chuàng)建出感知層面的更多的層次結(jié)構(gòu)，使其中一個按鈕看起來比另一個按鈕更重要，而這可能是畫蛇添足。

5. 讓主要操作按鈕在視覺上更突出

通過設計讓主要的操作按鈕在視覺上有這更明顯的視覺重量，從而讓它在頁面中脫穎而出。而這些強化主要按鈕的設計元素包括其視覺權重、顏色、大小和位置。

• 主按鈕應該具有更多的視覺重量，通過文本加粗、增加邊框和陰影效果使其更加突出。
• 主按鈕的顏色應該與界面的其余部分形成對比，以使其容易被注意到。
• 主要操作按鈕的位置至關重要。它應該位于用戶期望的位置。

6.使用標準的按鈕設計和布局

按鈕應該「看起來像按鈕」，這似乎是一句廢話。更通俗的來說，就是按鈕應該起來負荷「標準」的按鈕。使用不尋常的形狀和樣式，會讓用戶對按鈕的存在感到困惑。

• 遵循標準按鈕設計，可保持不同 App、網(wǎng)站和平臺之間的一致性。
• 為 App 和網(wǎng)站制作完備的風格樣式指南。這將幫助你始終堅持標準的主題和樣式。

7.不要在同一個按鈕中使用 2 個圖標

不要在同一個按鈕中使用兩個圖標，因為這可能會使用戶難以理解按鈕的真正用途。

• 按鈕中的每個圖標都有其自己的視覺含義，使用兩個圖標可能會產(chǎn)生歧義。
• 用戶可能很難理解哪個圖標代表按鈕的操作。
• 按鈕具有單一、明確的用途，而唯一的圖標應該體現(xiàn)該用途。

陳子木