按鈕是交互設計的基本元素。它們在用戶與系統之間的對話中起主要作用。在本文中，我將回顧創建有效按鈕所需瞭解的七個基本原則。
1.使按鈕看起來像按鈕
與用戶界面進行交互時，用戶需要立即知道什麼是“可點擊的”和什麼不是。設計中的每個項目都需要用戶努力解碼。通常，用戶解碼UI所需的時間越長，對他們的可用性就越差。
但是用戶如何理解某個元素是否是交互式的？他們使用以前的經驗和視覺指示符來闡明UI對象 的含義。這就是為什麼使用適當的視覺指示符（例如大小，形狀，顏色，陰影等）以使元素看起來像一個按鈕如此重要的原因。視覺能持有必要的信息價值-他們協助創造適宜性的界面。
不幸的是，在許多接口中，交互性的指示性很弱，需要交互作用。結果，它們有效地降低了可發現性。
如果缺少明確的交互功能，並且用戶為“可單擊”和“不可單擊”之間的掙扎而掙扎，那麼設計的出色程度將無關緊要。如果他們發現它很難使用，他們會發現它令人沮喪並且最終不是很有用。
對於移動用戶而言，符號不足是一個更為嚴重的問題。為了瞭解單個元素是否是交互式的，桌面用戶可以在元素上移動光標並檢查光標是否更改了其狀態。移動用戶沒有這樣的機會。要了解某個元素是否是交互式的，用戶是否必須點擊它-沒有其他方法可以檢查交互性。
不要以為您的用戶界面中的某些東西對您的用戶是顯而易見的
在許多情況下，設計人員有意不將按鈕標識為交互元素，因為他們認為交互元素對用戶是顯而易見的。在設計接口時，應始終牢記以下規則：您解釋可點擊性指示符的能力與用戶的理解力不同，因為您知道自己設計中的每個元素打算做什麼
以下是大多數用戶熟悉的一些按鈕示例：
- 帶有方形邊框的填充按鈕
- 圓角填充按鈕
- 陰影填充按鈕
- 幽靈按鈕
在所有這些示例中，“帶陰影的填充按鈕”設計對於用戶來說是最清晰的。當用戶看到物體的尺寸時，他們立即知道可以按下物體。
不要忘記空白
不僅按鈕本身的視覺屬性很重要。按鈕附近的空白量使用戶更容易（或更難）理解它是否是交互式元素。在該示例中，下面的某些用戶可能會將重影按鈕與信息框混淆。
作為用戶，您無法分辨它是盒子還是按鈕。
2.將按鈕放在用戶希望找到它們的位置
按鈕應位於用戶可以輕鬆找到或期望看到的位置。不要讓用戶尋找按鈕。如果用戶找不到按鈕，他們將不知道該按鈕存在。
儘可能使用傳統佈局和標準UI模式
常規的按鈕放置可提高發現性。使用標準佈局，用戶可以輕鬆理解每個元素的目的，即使它是沒有強符號的按鈕。將標準佈局與乾淨的視覺設計和充足的空白相結合，可使佈局更易於理解。
提示：測試設計的可發現性。當用戶首次導航到包含您希望他們執行的某些操作的頁面時，應該很容易為用戶找到合適的按鈕。
3. 標記按鈕的功能
具有通用標籤或誤導性標籤的按鈕可能會使您的用戶感到沮喪。寫下按鈕標籤，清楚地說明每個按鈕的功能。理想情況下，按鈕的標籤應清楚地描述其動作。
用戶應該清楚地瞭解單擊按鈕時會發生什麼。讓我舉一個簡單的例子。想象一下，您不小心觸發了刪除操作，現在您看到以下錯誤消息。
含糊不清的標籤“確定”並沒有過多說明操作按鈕。
目前尚不清楚“確定”和“取消”在此對話框中代表什麼。大多數用戶會問自己“當我單擊“取消”時會發生什麼？”
永遠不要設計僅由“確定”和“取消”兩個按鈕組成的對話框或表單。
與其使用“確定”標籤，不如使用“刪除”。這將使該按鈕對用戶的作用變得清晰。另外，如果“刪除”操作有潛在危險，您可以使用紅色說明這一事實。
“刪除”可清楚說明按鈕對用戶的作用。
潛在危險的操作“禁用卡”在此界面中以紅色顯示。圖片：運動
4.適當調整按鈕大小
按鈕大小應反映此元素在屏幕上的優先級。大按鈕表示更重要的動作。
優先按鈕
使最重要的按鈕看起來像是最重要的按鈕。始終嘗試使主要操作按鈕更加突出。增大其大小（通過增大按鈕的大小，可以使它對用戶顯得更重要），並使用對比色吸引用戶的注意力。
Dropbox使用大小和顏色對比將用戶的注意力集中在“免費試用Dropbox Business” CTA按鈕上。
使按鈕對移動用戶友好
在許多移動應用中，按鈕太小。這通常會導致用戶輸入錯誤的情況。
左：適當大小的按鈕。右：按鈕太小。圖片：蘋果
麻省理工學院觸摸實驗室的研究發現，指墊的平均值在10-14mm之間，指尖的平均值在8-10mm之間。這使得10mm x 10mm成為最小的觸摸目標尺寸。
圖片來源：uxmag
5.注意順序
按鈕的順序應反映用戶與系統之間對話的性質。問問自己，用戶期望在此屏幕上擁有什麼順序並進行相應的設計。
用戶界面是與用戶的對話
例如，如何在分頁中對“上一個/下一個”按鈕進行排序？邏輯上，使您向前移動的按鈕應位於右側，而使您向後移動的按鈕應位於左側
6.避免使用太多按鈕
這是許多應用程序和網站的常見問題。當您提供太多選項時，您的用戶最終無能為力。在您的應用或網站中設計頁面時，請考慮您希望用戶採取的最重要的操作。
按鈕太多
7.提供互動的視覺或聽覺反饋
當用戶單擊或點擊按鈕時，他們期望用戶界面將響應並提供適當的反饋。根據操作類型，這可能是視覺或音頻反饋。當用戶沒有任何反饋時，他們可能會認為系統未收到命令，因此將重複執行該操作。這種行為通常會導致多個不必要的操作。
為什麼會這樣呢？作為人類，我們期望在與對象互動後得到一些反饋。它可能是視覺，聽覺或觸覺反饋，任何承認交互已被註冊的事實。
用戶界面提供印刷機已註冊的視覺反饋。圖片：瓦迪姆·格羅莫夫（Vadim Gromov）
對於某些操作，例如下載，不僅值得確認用戶輸入，而且還需要顯示進程的當前狀態。
此按鈕轉換為進度指示器，以演示操作的當前狀態。圖片：科林·加文（Colin Garven）
結論
儘管按鈕是交互設計中的一個普通元素，但值得一提的是使按鈕儘可能地好。按鈕UX設計應始終圍繞識別性和清晰度。
