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