按鈕是交互設(shè)計(jì)的基本要素。它們?cè)谟脩艉拖到y(tǒng)之間的對(duì)話中起主要作用。在本文中，我將回顧您創(chuàng)建有效按鈕時(shí)需要了解的七個(gè)基本原則。
1.使按鈕看起來(lái)像按鈕
在與用戶界面進(jìn)行交互時(shí)，用戶需要立即知道什么是“可點(diǎn)擊”而哪些不是。設(shè)計(jì)中的每個(gè)項(xiàng)目都需要用戶努力解碼。通常，用戶解碼UI所需的時(shí)間越多，對(duì)它們的可用性就越小。
但是，用戶如何理解某個(gè)元素是否具有交互性？他們使用以前的經(jīng)驗(yàn)和視覺(jué)指示符來(lái)闡明UI對(duì)象的含義。這就是為什么使用適當(dāng)?shù)囊曈X(jué)指示符（如大小，形狀，顏色，陰影等）使元素看起來(lái)像一個(gè)按鈕這么重要。視覺(jué)能指持有必要的信息價(jià)值-他們協(xié)助創(chuàng)造適宜性的界面。
不幸的是，在許多界面中，交互性的能指都很弱，需要互動(dòng)。結(jié)果，它們有效地降低了可發(fā)現(xiàn)性。
如果缺少明確的交互能力，并且用戶對(duì)“可點(diǎn)擊”和不可點(diǎn)擊的內(nèi)容感到困惑，那么我們?cè)O(shè)計(jì)的酷感并不重要。如果他們發(fā)現(xiàn)難以使用，他們會(huì)發(fā)現(xiàn)它令人沮喪，并最終無(wú)法使用。
對(duì)于移動(dòng)用戶來(lái)說(shuō)，弱的能指是一個(gè)更重要的問(wèn)題。在嘗試了解單個(gè)元素是否具有交互性時(shí)，桌面用戶可以在元素上移動(dòng)光標(biāo)并檢查光標(biāo)是否更改其狀態(tài)。移動(dòng)用戶沒(méi)有這樣的機(jī)會(huì)。要了解元素是否具有交互性，用戶必須點(diǎn)擊它 - 沒(méi)有其他方法可以檢查交互性。
不要認(rèn)為您的UI中的某些內(nèi)容對(duì)您的用戶來(lái)說(shuō)是顯而易見(jiàn)的
在許多情況下，設(shè)計(jì)者故意不將按鈕識(shí)別為交互元素，因?yàn)樗麄冋J(rèn)為交互元素對(duì)用戶來(lái)說(shuō)是顯而易見(jiàn)的。在設(shè)計(jì)界面時(shí)，您應(yīng)始終牢記以下規(guī)則：
您解釋可點(diǎn)擊性指示符的能力??與您的用戶不同，因?yàn)槟雷约涸O(shè)計(jì)中的每個(gè)元素應(yīng)該做什么。不要忘記空白
不僅按鈕本身的視覺(jué)屬性很重要。按鈕附近的空白量使用戶更容易（或更難）理解它是否是交互元素。在該示例中，下面的一些用戶可能會(huì)將ghost按鈕與信息框混淆。
使用熟悉的按鈕設(shè)計(jì)
以下是大多數(shù)用戶熟悉的按鈕示例：
帶方形邊框的填充按鈕
帶圓角的填充按鈕
帶陰影的填充按鈕
鬼按鈕
在所有這些示例中，“帶陰影的填充按鈕”設(shè)計(jì)對(duì)用戶來(lái)說(shuō)是最清晰的。當(dāng)用戶看到對(duì)象的維度時(shí)，他們立即知道這是他們可以按的東西。
不要忘記空白
不僅按鈕本身的視覺(jué)屬性很重要。按鈕附近的空白量使用戶更容易（或更難）理解它是否是交互元素。在該示例中，下面的一些用戶可能會(huì)將ghost按鈕與信息框混淆。
2.將按鈕放在用戶希望找到它們的位置
按鈕應(yīng)位于用戶可以輕松找到或期望看到的位置。不要讓用戶尋找按鈕。如果用戶找不到按鈕，他們就不會(huì)知道它存在。
盡可能使用傳統(tǒng)布局和標(biāo)準(zhǔn)UI模式
按鈕的常規(guī)放置提高了可發(fā)現(xiàn)性。通過(guò)標(biāo)準(zhǔn)布局，用戶可以輕松了解每個(gè)元素的用途 - 即使它是一個(gè)沒(méi)有強(qiáng)烈指示符的按鈕。將標(biāo)準(zhǔn)布局與干凈的視覺(jué)設(shè)計(jì)和充足的空白相結(jié)合，使布局更容易理解。
不要與您的用戶一起玩尋找按鈕的游戲
提示：在可發(fā)現(xiàn)性方面測(cè)試您的設(shè)計(jì)。當(dāng)用戶首次導(dǎo)航到包含您希望他們采取的某些操作的頁(yè)面時(shí)，應(yīng)該很容易為用戶找到適當(dāng)?shù)陌粹o。
3.?用他們所做的標(biāo)記按鈕
帶有通用或誤導(dǎo)性標(biāo)簽的按鈕可能會(huì)給您的用戶帶來(lái)挫敗感。編寫按鈕標(biāo)簽，清楚地解釋每個(gè)按鈕的作用。理想情況下，按鈕的標(biāo)簽應(yīng)清楚地描述其動(dòng)作。
用戶應(yīng)該清楚地了解點(diǎn)擊按鈕時(shí)會(huì)發(fā)生什么。讓我舉個(gè)簡(jiǎn)單的例子。想象一下，您不小心觸發(fā)了刪除操作，現(xiàn)在您看到以下錯(cuò)誤消息。
目前尚不清楚“OK”和“取消”在此對(duì)話框中的含義。大多數(shù)用戶會(huì)問(wèn)自己“當(dāng)我點(diǎn)擊'取消'時(shí)會(huì)發(fā)生什么？”
從未設(shè)計(jì)過(guò)僅由兩個(gè)按鈕“確定”和“取消”組成的對(duì)話框或表單。
而不是使用“確定”標(biāo)簽，最好使用“刪除”。這將清楚地顯示此按鈕對(duì)用戶的作用。此外，如果“刪除”是一個(gè)潛在危險(xiǎn)的操作，您可以使用紅色來(lái)表明這一事實(shí)。
4.正確調(diào)整按鈕的大小
按鈕大小應(yīng)反映此元素在屏幕上的優(yōu)先級(jí)。大按鈕意味著更重要的動(dòng)作。
優(yōu)先按鈕
讓最重要的按鈕看起來(lái)像是最重要的按鈕。始終嘗試使主要操作按鈕更加突出。增加其大?。ㄍㄟ^(guò)使按鈕更大，使其對(duì)用戶來(lái)說(shuō)更重要）并使用對(duì)比色來(lái)吸引用戶注意力。
使按鈕對(duì)移動(dòng)用戶來(lái)說(shuō)非常友好
在許多移動(dòng)應(yīng)用中，按鈕太小。這通常會(huì)導(dǎo)致用戶輸入錯(cuò)誤的情況
麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn)，指墊的平均值在10-14mm之間，指尖的平均值為8-10mm。這使得10mm x 10mm具有良好的最小觸摸目標(biāo)尺寸。
5.記住命令
按鈕的順序應(yīng)反映用戶與系統(tǒng)之間的對(duì)話性質(zhì)。問(wèn)問(wèn)自己，用戶期望在這個(gè)屏幕上有什么樣的訂單并進(jìn)行相應(yīng)的設(shè)計(jì)。
用戶界面是與用戶的對(duì)話
例如，如何在分頁(yè)中訂購(gòu)“上一個(gè)/下一個(gè)”按鈕？合理的是，向前移動(dòng)的按鈕應(yīng)位于右側(cè)，向后移動(dòng)的按鈕應(yīng)位于左側(cè)。
6.避免使用太多按鈕
這是許多應(yīng)用和網(wǎng)站的常見(jiàn)問(wèn)題。當(dāng)您提供太多選項(xiàng)時(shí)，您的用戶最終無(wú)所事事。在您的應(yīng)用或網(wǎng)站中設(shè)計(jì)網(wǎng)頁(yè)時(shí)，請(qǐng)考慮您希望用戶采取的最重要的操作。
7.提供有關(guān)互動(dòng)的視覺(jué)或音頻反饋
當(dāng)用戶單擊或點(diǎn)擊按鈕時(shí)，他們希望用戶界面將以適當(dāng)?shù)姆答佭M(jìn)行響應(yīng)。根據(jù)操作類型，這可能是視覺(jué)或音頻反饋。當(dāng)用戶沒(méi)有任何反饋時(shí)，他們可能會(huì)認(rèn)為系統(tǒng)沒(méi)有收到命令并會(huì)重復(fù)操作。這種行為經(jīng)常導(dǎo)致多次不必要的操作
為什么會(huì)這樣？作為人類，我們希望在與對(duì)象交互后獲得一些反饋。它可能是視覺(jué)，音頻或觸覺(jué)反饋 - 任何承認(rèn)交互已注冊(cè)的事實(shí)。
對(duì)于某些操作，例如下載，不僅要確認(rèn)用戶輸入，還要顯示進(jìn)程的當(dāng)前狀態(tài)。
結(jié)論
盡管按鈕是交互設(shè)計(jì)的普通元素，但值得注意的是要使這個(gè)元素盡可能好。按鈕用戶體驗(yàn)設(shè)計(jì)應(yīng)始終與識(shí)別和清晰度相關(guān)。 謝謝！
轉(zhuǎn)載地址?作者：尼克·巴比奇
