該按鈕是交互設(shè)計(jì)的基本元素。它們?cè)谟脩艉拖到y(tǒng)之間的對(duì)話中發(fā)揮著重要作用。在本文中，我將回顧創(chuàng)建有效按鈕時(shí)必須了解的七個(gè)基本原則。
1.使按鈕看起來像一個(gè)按鈕
當(dāng)與用戶界面交互時(shí)，用戶必須立即知道什么是“點(diǎn)擊”而哪些不是。設(shè)計(jì)中的每個(gè)項(xiàng)目都需要用戶進(jìn)行解碼。通常，用戶解碼UI所需的時(shí)間越長(zhǎng)，其可用性就越低。
但是，用戶如何理解元素是否是交互式的？他們使用以前的經(jīng)驗(yàn)和視覺指示器來闡明用戶界面對(duì)象的含義。這就是為什么使用適當(dāng)?shù)囊曈X指示器（如大小，形狀，顏色，陰影等）使項(xiàng)目看起來像一個(gè)按鈕是如此重要。視覺能量意味著保持必要的信息價(jià)值;它們有助于創(chuàng)建適用性界面。
不幸的是，在許多界面中，交互性指標(biāo)很弱并且需要交互。結(jié)果，它們有效地降低了發(fā)現(xiàn)的能力。
如果缺乏明確的互動(dòng)，并且用戶對(duì)“可點(diǎn)擊”和難以理解的內(nèi)容感到困惑，那么我們?cè)O(shè)計(jì)的新鮮度并不重要。如果他們發(fā)現(xiàn)難以使用，他們會(huì)發(fā)現(xiàn)它令人沮喪并最終無法使用。
對(duì)于移動(dòng)用戶而言，弱指示符是一個(gè)更重要的問題。當(dāng)試圖查看單個(gè)元素是否是交互式時(shí)，桌面用戶可以將光標(biāo)移動(dòng)到元素上并檢查光標(biāo)是否改變狀態(tài)。移動(dòng)用戶沒有這樣的機(jī)會(huì)。要查看元素是否是交互式的，用戶必須單擊它，沒有其他方法可以驗(yàn)證交互性。
不要認(rèn)為用戶界面中的某些內(nèi)容對(duì)您的用戶來說是顯而易見的
在許多情況下，設(shè)計(jì)者不會(huì)故意將按鈕識(shí)別為交互元素，因?yàn)樗J(rèn)為交互元素對(duì)用戶來說是顯而易見的。在設(shè)計(jì)界面時(shí)，您應(yīng)始終牢記以下規(guī)則：
您解釋點(diǎn)擊指標(biāo)的能力與用戶的能力不同，因?yàn)槟涝O(shè)計(jì)的每個(gè)元素應(yīng)該做什么。
使用熟悉的按鈕設(shè)計(jì)
以下是大多數(shù)用戶熟悉的按鈕示例：
帶方形邊框的填充按鈕
帶圓角的填充按鈕
帶陰影的填充按鈕
職業(yè)按鈕
在所有這些示例中，“陰影填充按鈕”的設(shè)計(jì)對(duì)于用戶來說是最清晰的。當(dāng)用戶看到對(duì)象的尺寸時(shí)，他們立即知道這是他們可以按下的尺寸。
不要忘記空白區(qū)域
不僅按鈕的視覺屬性很重要。按鈕附近的空白區(qū)域使用戶更容易（或更難）理解它是否是交互式元素。在此示例中，以下某些用戶可能會(huì)將幻影按鈕與信息框混淆。
作為用戶，您無法判斷它是盒子還是按鈕
2.將按鈕放在用戶想要找到的位置
該按鈕必須位于用戶可以輕松找到或希望看到的位置。不要讓用戶尋找按鈕。如果用戶找不到該按鈕，他將不知道它存在。
盡可能使用傳統(tǒng)設(shè)計(jì)和標(biāo)準(zhǔn)UI模式
按鈕的常規(guī)放置提高了發(fā)現(xiàn)能力。通過標(biāo)準(zhǔn)設(shè)計(jì)，用戶可以輕松了解每個(gè)元素的用途，即使它是一個(gè)沒有強(qiáng)大指標(biāo)的按鈕。將標(biāo)準(zhǔn)設(shè)計(jì)與干凈的視覺設(shè)計(jì)和充足的白色空間相結(jié)合，使設(shè)計(jì)更易于理解。
不要與用戶一起玩尋找按鈕的游戲
提示：測(cè)試您的設(shè)計(jì)以找出答案。當(dāng)用戶第一次導(dǎo)航到包含您希望他們執(zhí)行的某些操作的頁面時(shí)，應(yīng)該很容易為用戶找到正確的按鈕。
3.使用已制作的標(biāo)簽按鈕
帶有通用或欺騙性標(biāo)簽的按鈕可能會(huì)讓用戶感到沮喪。編寫按鈕標(biāo)簽，清楚地解釋每個(gè)按鈕的作用。理想情況下，按鈕標(biāo)簽應(yīng)清楚地描述其動(dòng)作。
用戶應(yīng)該清楚地知道單擊按鈕時(shí)會(huì)發(fā)生什么。讓我舉一個(gè)簡(jiǎn)單的例子。想象一下，您不小心激活了刪除操作，現(xiàn)在您看到以下錯(cuò)誤消息。
“OK”模糊標(biāo)簽對(duì)動(dòng)作按鈕
沒有太多說法
目前尚不清楚這種對(duì)話中的“接受”和“取消”是什么意思。大多數(shù)用戶會(huì)問，'點(diǎn)擊'取消'會(huì)發(fā)生什么？ '
從未設(shè)計(jì)過只包含兩個(gè)“接受”和“取消”按鈕的對(duì)話框或表單。
不使用“Accept”標(biāo)簽，最好使用“刪除”。這將清楚地顯示此按鈕對(duì)用戶的影響。此外，如果“刪除”是一個(gè)潛在危險(xiǎn)的操作，您可以使用紅色來表示這一事實(shí)。
“刪除”清楚地解釋了按鈕對(duì)用戶的影響
此界面上的潛在危險(xiǎn)操作“禁用卡”顯示為紅色。
4.正確調(diào)整按鈕的大小
按鈕的大小應(yīng)反映此元素在屏幕上的優(yōu)先級(jí)。大按鈕意味著更重要的行動(dòng)。
優(yōu)先按鈕
讓最重要的按鈕看起來像最重要的按鈕。始終嘗試使主動(dòng)作按鈕脫穎而出。增加尺寸（使按鈕更大，使其對(duì)用戶更重要）并使用對(duì)比色來引起用戶的注意。
Dropbox使用顏色對(duì)比度和大小將用戶的注意力集中在“Dropbox Business免費(fèi)試用”測(cè)試按鈕
上
使按鈕對(duì)移動(dòng)用戶非常友好
在許多移動(dòng)應(yīng)用程序中，按鈕太小。這通常會(huì)導(dǎo)致用戶輸入錯(cuò)誤。
左：適當(dāng)?shù)拇笮“粹o。右：按鈕太小。
麻省技術(shù)研究所觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn)，手指墊的平均值在10到14毫米之間，指尖的平均值為8到10毫米。這使得10 mm x 10 mm具有良好的最小接觸目標(biāo)尺寸。
5.記住命令
按鈕的順序應(yīng)反映用戶與系統(tǒng)之間的對(duì)話性質(zhì)。問問自己用戶在此屏幕上等待的訂單類型并進(jìn)行相應(yīng)的設(shè)計(jì)。
用戶界面是與用戶的對(duì)話
例如，如何在分頁中訂購“上一個(gè)/下一個(gè)”按鈕？向前移動(dòng)按鈕位于右側(cè)并且向后按鈕位于左側(cè)是合理的。
6.避免使用太多按鈕
這是許多應(yīng)用程序和網(wǎng)站的常見問題。當(dāng)您提供太多選項(xiàng)時(shí)，您的用戶最終無所事事。在應(yīng)用程序或網(wǎng)站中設(shè)計(jì)網(wǎng)頁時(shí)，請(qǐng)考慮您希望用戶執(zhí)行的最重要操作。
按鈕太多
7.提供有關(guān)互動(dòng)的視覺或音頻評(píng)論
當(dāng)用戶是唯一的當(dāng)您單擊或單擊按鈕時(shí)，您希望用戶界面以相應(yīng)的注釋進(jìn)行響應(yīng)。根據(jù)操作類型，這可以是視覺或音頻反饋。當(dāng)用戶沒有評(píng)論時(shí)，他可能認(rèn)為系統(tǒng)沒有收到命令并將重復(fù)該操作。此行為通常會(huì)導(dǎo)致多個(gè)不必要的操作。
為什么會(huì)這樣？作為人類，我們希望在與對(duì)象交互后得到一些評(píng)論。它可以是視覺，音頻或觸覺反饋，也可以是記錄交互的任何確認(rèn)。
用戶界面提供印刷機(jī)已注冊(cè)的可視信息。
對(duì)于某些操作，例如下載，不僅要確認(rèn)用戶的輸入，還要顯示進(jìn)程的當(dāng)前狀態(tài)。
此按鈕成為進(jìn)度指示器，顯示操作的當(dāng)前狀態(tài)。
結(jié)論
雖然按鈕是交互設(shè)計(jì)的普通元素，但值得注意的是這個(gè)元素應(yīng)該盡可能好。按鈕的用戶體驗(yàn)設(shè)計(jì)應(yīng)始終與識(shí)別和清晰度相關(guān)。
