如何提升按鈕設計的用戶體驗？看完這一篇就夠了！

按鈕設計在網頁或是移動端都很常用，看似簡單的一個按鈕，但很多設計師並沒有詳細了解，特別是培訓班出來的設計師，更加不知道這些按鈕設計體驗。本文將和大家科普按鈕的由來，以及如何設計按鈕，讓它變得更實用並提升用戶體驗。

按鈕交互的設計由來

為了設計合適的交互方式，我們需要回顧實體按鈕的發展曆史，作為UI組件之一的按鈕來源於實體按鈕，現在廣泛用於互聯網產品中。按鈕非常神奇，隻需手指觸摸，就可以打開一個APP、啟動汽車或者一個係統，即使用戶不懂背後的原理。在《Power Button》這本書裏，Rachel Plotnick研究了今天按鈕操作的文化起源，描述了按鈕成為互聯網產品的命令方式，可以實現毫不費力控製。

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

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

按鈕與鏈接的區別

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

鏈接：用於導航到另一個位置，比如：“查看全部”頁麵、跳轉另一個位置等。

按鈕：用於實現一個操作，比如：提交、合並、新建和上傳等。

按鈕的多種狀態

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

普通狀態：可交互和可用的狀態。

焦點狀態：用戶使用鍵盤或其他輸入方法來突出顯示一個元素。

懸停狀態：用戶把光標置於可交互元素上的狀態。

觸發狀態：用戶已點擊按鈕後的狀態。

加載狀態：當操作沒有立即實現時，表示正在進行的狀態。

禁用狀態：按鈕目前不可交互，但以後可以使用。

按鈕的多種樣式

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

不同樣式的優先級

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

有時不需要默認按鈕

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

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

別讓用戶思考

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