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

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

在參與各種設(shè)計(jì)項(xiàng)目的過程中，我自己總結(jié)了一套相對實(shí)用的技巧和規(guī)則，幫助我在整個(gè)設(shè)計(jì)過程中保持相對較高的標(biāo)準(zhǔn)。

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

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

不要讓按鈕上的文本換行，按鈕上的文本標(biāo)簽應(yīng)保留在同一行上：

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

2. 使用表示動作的動詞作為按鈕文本標(biāo)簽

按鈕的文本標(biāo)簽可以激勵用戶采取相應(yīng)的操作。要使用文本表述按鈕的功能，同時(shí)使用有指向的功能作為按鈕的文本標(biāo)簽。

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

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

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

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

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

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

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

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

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

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

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

6.使用標(biāo)準(zhǔn)的按鈕設(shè)計(jì)和布局

按鈕應(yīng)該「看起來像按鈕」，這似乎是一句廢話。更通俗的來說，就是按鈕應(yīng)該起來負(fù)荷「標(biāo)準(zhǔn)」的按鈕。使用不尋常的形狀和樣式，會讓用戶對按鈕的存在感到困惑。

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

7.不要在同一個(gè)按鈕中使用 2 個(gè)圖標(biāo)

不要在同一個(gè)按鈕中使用兩個(gè)圖標(biāo)，因?yàn)檫@可能會使用戶難以理解按鈕的真正用途。

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

陳子木