按鈕是交互設(shè)計(jì)中的基本元素。他們在用戶和系統(tǒng)之間扮演重要角色。在本文中，我們將一起思考創(chuàng)建有效按鈕所需了解的七個(gè)基本原則。

???點(diǎn)擊獲取更多設(shè)計(jì)資源

https://js.design/community?category=design&source=bz&plan=bbqbz768

讓按鈕看起來像按鈕

在與用戶界面交互時(shí)，用戶需要立即知道什么是“可點(diǎn)擊”，什么不是。設(shè)計(jì)中的每個(gè)項(xiàng)目都需要用戶努力解碼。通常，用戶解碼 UI 所需的時(shí)間越長，它對他們的可用性就越低。

但是用戶如何理解某個(gè)元素是否具有交互性呢？他們使用以前的經(jīng)驗(yàn)和視覺符號來闡明 UI 對象的含義。這就是為什么使用適當(dāng)?shù)囊曈X符號（如大小、形狀、顏色、陰影等）使元素看起來像一個(gè)按鈕如此重要的原因。

但是，在許多界面中，交互性的能指很差，它們的可發(fā)現(xiàn)性變得很弱。

如果缺少清晰的交互指引，并且用戶為什么是“可點(diǎn)擊”而什么不是“可點(diǎn)擊”而苦苦掙扎，那么我們設(shè)計(jì)的有多酷就無關(guān)緊要了。如果他們發(fā)現(xiàn)它很難使用，那你很可能最終就會流失用戶。

對于移動用戶來說，弱能指是一個(gè)更嚴(yán)重的問題。在嘗試了解單個(gè)元素是否可交互時(shí)，桌面用戶可以在元素上移動光標(biāo)并檢查光標(biāo)是否改變其狀態(tài)。移動用戶沒有這樣的機(jī)會。要了解一個(gè)元素是否可交互，用戶必須點(diǎn)擊它——沒有其他方法可以檢查。

不要以為你的用戶界面中的某些東西對你的用戶來說是顯而易見的

在許多情況下，設(shè)計(jì)師故意不將按鈕識別為交互元素，因?yàn)樗麄冋J(rèn)為交互元素對用戶來說是顯而易見的。在設(shè)計(jì)界面時(shí)，你應(yīng)該始終牢記以下規(guī)則：

您對可點(diǎn)擊性指示符的解釋能力與您的用戶不同，因?yàn)槟雷约涸O(shè)計(jì)中的每個(gè)元素的用途。

為你的按鈕使用熟悉的設(shè)計(jì)

以下是大多數(shù)用戶熟悉的幾個(gè)按鈕示例：

帶方形邊框的填充按鈕

圓角填充按鈕

帶陰影的填充按鈕

幽靈按鈕

在所有這些示例中，“帶陰影的填充按鈕”設(shè)計(jì)對用戶來說是最清晰的。當(dāng)用戶看到這個(gè)按鈕的維度時(shí)，他們立即知道這是他們可以按下的東西。

不要忘記空格

不僅按鈕本身的視覺屬性很重要。按鈕附近的空白數(shù)量使用戶更容易（或更難）理解它是否是交互式元素。在下面的示例中，一些用戶可能會將幽靈按鈕與信息框混淆。

將按鈕放在用戶希望找到的位置

按鈕應(yīng)位于用戶可以輕松找到或期望看到的位置。不要讓用戶尋找按鈕。如果用戶找不到按鈕，他們就不會知道接下來如何操作。

盡可能使用傳統(tǒng)布局和標(biāo)準(zhǔn) UI 模式

按鈕的常規(guī)放置提高了可發(fā)現(xiàn)性。使用標(biāo)準(zhǔn)布局，用戶將很容易理解每個(gè)元素的用途——即使它是一個(gè)沒有強(qiáng)符號的按鈕。將標(biāo)準(zhǔn)布局與干凈的視覺設(shè)計(jì)和充足的空白相結(jié)合，使布局更易于理解。

不要和你的用戶玩尋寶游戲

提示：測試您的設(shè)計(jì)的可發(fā)現(xiàn)性。當(dāng)用戶第一次導(dǎo)航到包含您希望他們執(zhí)行的某些操作的頁面時(shí)，應(yīng)該很容易為用戶找到合適的按鈕。

用它們的作用標(biāo)記按鈕

帶有通用或誤導(dǎo)性標(biāo)簽的按鈕可能會讓您的用戶感到沮喪。編寫按鈕標(biāo)簽，清楚地解釋每個(gè)按鈕的作用。理想情況下，按鈕的標(biāo)簽應(yīng)該清楚地描述它的動作。

用戶應(yīng)該清楚地了解單擊按鈕時(shí)會發(fā)生什么。舉一個(gè)簡單的例子。假設(shè)你不小心觸發(fā)了刪除操作，現(xiàn)在看到以下錯誤消息。

目前尚不清楚此對話框中的“確定”和“取消”代表什么。大多數(shù)用戶會問自己“當(dāng)我點(diǎn)擊‘取消’時(shí)會發(fā)生什么？”

從未設(shè)計(jì)過僅由“確定”和“取消”兩個(gè)按鈕組成的對話框或表單。

與其使用“OK”標(biāo)簽，不如使用“Remove”。這將清楚地說明此按鈕對用戶的作用。此外，如果“刪除”是一項(xiàng)具有潛在危險(xiǎn)的操作，您可以使用紅色來說明這一事實(shí)。

適當(dāng)調(diào)整按鈕大小

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

優(yōu)先按鈕

讓最重要的按鈕看起來就是最重要的按鈕。始終使主要操作按鈕更加突出。增加它的大?。ㄍㄟ^使按鈕變大，使它看起來對用戶更重要）并使用對比色來吸引用戶的注意力。

使按鈕對移動用戶手指友好

在許多移動應(yīng)用程序中，按鈕太小。這通常會導(dǎo)致用戶輸入錯誤的情況。

麻省理工學(xué)院觸控實(shí)驗(yàn)室研究發(fā)現(xiàn)，指墊的平均值在 10-14 毫米之間，指尖為 8-10 毫米。這使得 10mm x 10mm 成為一個(gè)很好的最小觸摸目標(biāo)尺寸。

注意順序

按鈕的順序應(yīng)該反映用戶和系統(tǒng)之間對話的性質(zhì)。問問自己，用戶希望在這個(gè)屏幕上擁有什么樣的訂單并相應(yīng)地進(jìn)行設(shè)計(jì)。

用戶界面是與您的用戶的對話

例如，如何在分頁中排序“上一個(gè)/下一個(gè)”按鈕？讓你向前移動的按鈕應(yīng)該在左邊，而讓你向后移動的按鈕應(yīng)該在右邊，這是合乎邏輯的。

避免使用過多的按鈕

這是許多應(yīng)用程序和網(wǎng)站的常見問題。當(dāng)提供太多選項(xiàng)時(shí)，你的用戶最終會無所事事，不知所措。在你的應(yīng)用或網(wǎng)站中設(shè)計(jì)頁面時(shí)，請考慮希望用戶采取的最重要的操作。

提供交互的視覺或聽覺反饋

當(dāng)用戶單擊或點(diǎn)擊按鈕時(shí)，他們希望用戶界面會以適當(dāng)?shù)姆答佭M(jìn)行響應(yīng)。根據(jù)操作類型，這可能是視覺或音頻反饋。當(dāng)用戶沒有任何反饋時(shí)，他們可能會認(rèn)為系統(tǒng)沒有收到他們的命令，并會重復(fù)執(zhí)行該操作。這種行為通常會導(dǎo)致多次不必要的操作。

為什么會這樣？作為人類，我們期望在與對象交互后得到一些反饋。它可能是視覺、聽覺或觸覺反饋——任何承認(rèn)交互執(zhí)行這一事實(shí)的東西。

對于某些操作，例如下載，不僅要確認(rèn)用戶輸入，還要顯示進(jìn)程的當(dāng)前狀態(tài)。

結(jié)論

盡管按鈕是交互設(shè)計(jì)中的一個(gè)普通元素，但為了使這個(gè)元素盡可能好，還是值得多加注意的。