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

2025-03-04 點擊量：

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

按鈕交互的設(shè)計由來

為了設(shè)計合適的交互方式，我們需要回顧實體按鈕的發(fā)展歷史，作為UI組件之一的按鈕來源于實體按鈕，現(xiàn)在廣泛用于互聯(lián)網(wǎng)產(chǎn)品中。按鈕非常神奇，只需手指觸摸，就可以打開一個APP、啟動汽車或者一個系統(tǒng)，即使用戶不懂背后的原理。在《Power Button》這本書里，Rachel Plotnick研究了今天按鈕操作的文化起源，描述了按鈕成為互聯(lián)網(wǎng)產(chǎn)品的命令方式，可以實現(xiàn)毫不費力控制。

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

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

按鈕與鏈接的區(qū)別

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

鏈接：用于導(dǎo)航到另一個位置，比如：“查看全部”頁面、跳轉(zhuǎn)另一個位置等。

按鈕：用于實現(xiàn)一個操作，比如：提交、合并、新建和上傳等。

按鈕的多種狀態(tài)

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

普通狀態(tài)：可交互和可用的狀態(tài)。

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

懸停狀態(tài)：用戶把光標置于可交互元素上的狀態(tài)。

觸發(fā)狀態(tài)：用戶已點擊按鈕后的狀態(tài)。

加載狀態(tài)：當操作沒有立即實現(xiàn)時，表示正在進行的狀態(tài)。

禁用狀態(tài)：按鈕目前不可交互，但以后可以使用。

按鈕的多種樣式

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

不同樣式的優(yōu)先級

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

有時不需要默認按鈕

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

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

別讓用戶思考

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

不要對可交互和不可交互的元素，使用相同的色彩。如果可交互和不可交互的元素，使用相同的色彩，會讓用戶不知道點擊哪里。

一致性提高效率和準確性

“一致性是最有力的可用性原則之一：當元素一直都是統(tǒng)一的樣式，用戶就不必擔心突發(fā)事件。” — Jakob Nielsen