按鈕是交互設(shè)計中必備的元素，它在用戶和系統(tǒng)的交互中承擔(dān)著非常重要的作用。在本文中，我將分別介紹創(chuàng)建有效按鈕必須要知道的七項基本原則。

一、按鈕就是按鈕

當(dāng)涉及到與用戶界面交互時，用戶需要立即知道什么是“可點擊的”，什么不是。設(shè)計中的每一個項目都需要用戶進行解碼，一般來說，用戶解碼需要的時間越多，可用性就越差。

但是用戶如何理解某個元素是否具有交互性呢？他們靠以前的經(jīng)驗和視覺符號來判斷界面中元素的含義，這就是為何創(chuàng)建按鈕時必須使用恰當(dāng)?shù)囊曈X元素（比如尺寸、形狀、顏色、陰影等）。視覺符號具有重要的信息價值——有助于在界面中創(chuàng)建可視性。

不幸的是，在許多界面中，交互性的符號很弱，大大地減少了可發(fā)現(xiàn)性。如果交互不夠清晰，用戶連哪些是可以點擊的，哪些是不行的都弄不清楚的話，設(shè)計做的再酷也沒什么意義了。

對于移動端的用戶來說，這個問題就更嚴重了。在嘗試了解單個元素是否具有交互性時，PC端用戶可以將光標(biāo)移到元素上，并檢查游標(biāo)是否改變了狀態(tài)。然而移動端用戶就沒這種機會了，他們只能點擊，除此之外沒有別的方法可以檢測了。

不要以為對用戶來說，界面中的東西都是顯而易見的。

在許多情況下，設(shè)計人員故意不將按鈕標(biāo)識為交互元素，因為他們認為交互元素對用戶來說是顯而易見的。在設(shè)計界面時，您應(yīng)該始終牢記：使用熟悉的設(shè)計創(chuàng)建按鈕，用戶理解交互元素的能力是遠不及你的，因為作為設(shè)計師，你當(dāng)然知道你的設(shè)計有什么用。

下面給幾個絕大多數(shù)用戶都會熟悉的按鈕：

1. 帶有正方形邊框的填充按鈕
2. 充滿圓角的按鈕
3. 充滿了陰影的按鈕
4. .幽靈按鈕

在以上的例子中，“充滿陰影的按鈕”對用戶來說是最清晰的，用戶一看到這個按鈕的維度就知道這是可以點擊的。

不要忘記留白！

按鈕本身的視覺固然重要，其周圍的空白部分也很關(guān)鍵。以下面的“幽靈按鈕”為例，有些用戶也許會把它當(dāng)成是信息框。

二 、把按鈕放在用戶想要的地方

按鈕應(yīng)該放在用戶容易發(fā)現(xiàn)的地方，不要讓用戶滿世界的找按鈕。如果用戶找不到按鈕，他們就不會知道這個按鈕的存在。盡可能使用傳統(tǒng)的布局和標(biāo)準(zhǔn)的UI模式。

傳統(tǒng)的按鈕布局提高了可發(fā)現(xiàn)性；采用標(biāo)準(zhǔn)的布局，用戶可以很容易地理解每個元素的目的——即使它是一個沒有強指針的按鈕。將標(biāo)準(zhǔn)布局與干凈的視覺設(shè)計和充足的空白相結(jié)合，將使布局更容易被理解。

不要和用戶玩按鈕游戲，測試設(shè)計的可發(fā)現(xiàn)性，當(dāng)用戶第一次來到包含一些可操作行為的頁面時，他們應(yīng)該很容易就找到相應(yīng)的按鈕才對。

三、標(biāo)注按鈕的功能

帶有通用或誤導(dǎo)性標(biāo)簽的按鈕可能會給用戶帶來巨大的挫敗感，編寫按鈕標(biāo)簽時要清楚地解釋每個按鈕的功能。理想情況下，按鈕的標(biāo)簽應(yīng)該清楚地描述它的作用。

你得讓用戶清楚的知道點了某個按鈕之后會有什么反應(yīng)。來看個簡單的例子，假設(shè)用戶不小心點了“刪除”按鈕，就會看到以下消息：

在這個語境里，“OK”和“Cancel”到底代表什么意思？大多數(shù)用戶都會問自己：“如果我點了Cancel會發(fā)生什么？”

所以，不要設(shè)計一個只由兩個按鈕“OK”和“Cancel”組成的對話框或表單。

用“Remove”作為標(biāo)簽就比“OK”清晰多了，用戶看了就知道到底是什么意思。另外，如果“Delete”是一個潛在的危險操作，你可以用紅色來標(biāo)注一下。

四、按鈕的大小要適當(dāng)

按鈕大小應(yīng)該反映該元素在屏幕上的優(yōu)先級，大按鈕意味著更重要的動作。

優(yōu)先級高的按鈕：讓最重要的按鈕看起來就是最重要的，增加它的尺寸（按鈕更大對用戶來說就是更重要），使用對比色來吸引用戶的注意力。

做按鈕時要考慮移動端用戶的操作友好性，很多APP里的按鈕做的太小了，導(dǎo)致用戶常常誤操作。

麻省理工學(xué)院的觸覺實驗室研究發(fā)現(xiàn)：

手指墊的平均長度在10-14mm之間，指尖的長度為8-10mm，所以10mm x 10mm就是一個很好的最小觸摸目標(biāo)尺寸。

五、注意順序

按鈕的順序應(yīng)該反映用戶和系統(tǒng)之間交互的本質(zhì)。問問你自己，用戶期望在這個屏幕上看到的是什么樣的順序，并據(jù)此設(shè)計。

例如，如何在分頁中排列“向前/向后”按鈕? 一般來說，向前移動的按鈕應(yīng)該在右邊，向后移動的按鈕應(yīng)該在左邊。

六、避免使用過多的按鈕

很多APP和網(wǎng)站都存在這個問題，提供的選項太多，用戶反倒什么也不會做了。設(shè)計APP或者網(wǎng)站的頁面時，多想想你認為用戶最應(yīng)該進行的操作是什么吧。

七、提供視覺或聽覺反饋

當(dāng)用戶點擊按鈕時，他們希望界面可以給些恰當(dāng)?shù)姆答?。如果沒有任何反饋，用戶會以為系統(tǒng)沒有收到他們的操作，然后就會重復(fù)點擊。這種行為常常導(dǎo)致多個不必要的操作。

為什么會這樣？作為人類，在與某物進行互動之后我們總是期望能得到反饋的。不管是視覺的、聽覺的或者觸覺的，總得讓我們知道互動成功了。

對于某些操作，比如下載，它不僅需要確認用戶輸入，而且還顯示進程的當(dāng)前狀態(tài)。

八、結(jié)論

盡管按鈕是交互設(shè)計的一個普通元素，但它值得投入大量的精力，把這個元素做好。記住，按鈕用戶體驗設(shè)計最主要的兩個點就是識別和清晰。

作者：Nick Babich（微信公眾號：集創(chuàng)堂）

原文鏈接：https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4

翻譯：熊小熊（微信公眾號：集創(chuàng)堂）

本文由 @熊小熊 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議