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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

陳子木