如何把按鈕設計做到最好看完這一篇就夠瞭

導讀：按鈕設計是用戶界面中主要的交互基石，按鈕作為引流，提升產品數據的重要節點，作為設計師必須對它的前世今生有一個很好的瞭解。如何把按鈕設計做到最好？文章對此展開瞭梳理分析，供大傢一同參考學習。

01 按鈕交互的設計由來

為瞭設計合適的交互方式，我們需要回顧實體按鈕的發展歷史，作為UI組件之一的按鈕來源於實體按鈕，現在廣泛用於互聯網產品中。按鈕非常神奇，隻需手指觸摸，就可以打開一個APP、啟動汽車或者一個系統，即使用戶不懂背後的原理。

在《Power Button》這本書裡，Rachel Plotnick研究瞭今天按鈕操作的文化起源，描述瞭按鈕成為互聯網產品的命令方式，可以實現毫不費力控制。

“你隻需按快門，其餘的我們來做。”—柯達相機用抓人眼球的口號來吸引潛在的顧客。

這正是迄今為止，按鈕吸引用戶的地方，隻需簡單的觸摸，就能獲得處理事件的滿足感。即使很多新傢電和其他設備都進化為瞭觸屏操作，實體按鈕卻並沒有完全消失，其塑造的行為習慣仍然影響按鈕設計的直觀性和易用性。

02 按鈕與鏈接的區別

按鈕傳達瞭用戶可以執行的操作，它們通常在UI界面中，比如：對話框、表單、工具欄等。區分按鈕和鏈接特別重要：

鏈接：用於導航到另一個位置，比如：“查看全部”頁面、跳轉另一個位置等。
按鈕：用於實現一個操作，比如：提交、合並、新建和上傳等。

03 按鈕的多種狀態

設計正確的交互和樣式，對按鈕設計十分重要。按鈕每個狀態必須可識別，要顯著區別於其他狀態和周圍的佈局，但是也不能完全改變組件或者制造視覺混亂。

普通狀態：可交互和可用的狀態。
焦點狀態：用戶使用鍵盤或其他輸入方法來突出顯示一個元素。
懸停狀態：用戶把光標置於可交互元素上的狀態。
觸發狀態：用戶已點擊按鈕後的狀態。
加載狀態：當操作沒有立即實現時，表示正在進行的狀態。
禁用狀態：按鈕目前不可交互，但以後可以使用。

04 按鈕的多種樣式

最常見的是圓角按鈕，可以輕易識別，並且在輸入字段旁邊看起來不錯。為按鈕選擇正確的樣式，取決於目的、平臺和規范。以下是一些最流行的樣式：

05 不同樣式的優先級

樣式最初是用來區分操作的優秀級。明確操作的優先級，可以在眾多的選擇前，引導用戶。通常，要有一個突出的按鈕（主按鈕），幾個二級按鈕，還有三級按鈕。

06 有時不需要默認按鈕

通常，把最常用的按鈕設置為“默認”（使用主樣式）和選中的狀態。這樣可以幫助大多數用戶，更快完成他們的任務，引導正確的方向。

此外，當選擇同等重要時，或者操作存在危險，在這些情況中，需要用戶明確按鈕的選擇而不是意外選擇。

07 別讓用戶思考

Don’t make me think（別讓用戶思考）是可用性工程師Steve Krug所著的書的名字（中文《點石成金：訪客至上的網頁設計秘笈》）。其中指出，觸屏是為瞭讓界面更明顯，而不是讓用戶產生困惑。基於多年使用不同的設備和其他產品，用戶養成瞭對按鈕外觀和功能的特定期待。如果和“標準”按鈕的樣式差別太大，就會讓用戶遲疑和困惑。