炒肝！按鈕設計的7個基本原則！

最新 04-25

GIF

-01-

按鈕必須得看起來像按鈕

涉及到用戶界面交互的時候，用戶需要知道哪些是可點擊的，而哪些不是。面對著 UI 界面中的每個元素，用戶都需要對它們進行辨別和判斷，而這個過程越長，可用性其實就越差。

那麼，用戶是如何判讀哪個元素是可交互的呢？通常，用戶是基於以往的經驗和視覺來對 UI 元素進行判斷，這就是為什麼需要通過合適的視覺符號來幫助用戶理解（比如尺寸、形狀、顏色、陰影等），使得元素看起來像是按鈕。視覺符號為界面提供可供性。

不幸的是，在許多界面當中，按鈕的可發現性和指示性並不強，這使得交互發生的機率有所降低，用戶會糾結於哪些可點擊，而哪些不可點擊，這個時候設計是否炫酷，就顯得不那麼重要了。即使視覺上界面設計得足夠突出，可用性很弱，會讓用戶陷入沮喪，產品也就不再具備可用性了。

為了確定按鈕是否可用，用戶在桌面端訪問網站的時候，需要將游標移動到元素上，檢查元素狀態是否會改變，才能判斷它是否是可點擊的。而移動端用戶就麻煩了，根本沒有滑鼠來執行這樣的操作，元素能否點擊，只能都試一次，沒有其他更好的方法了。

不要假定你的 UI 中的元素對於用戶是顯而易見的。

在很多情況下，設計師會有意識地不將某些元素的交互性凸顯出來，因為他們會認為這些東西是顯而易見的。但是事實並非如此，在設計 UI 的時候，應該牢記下面的事情。

作為設計師，是很容易搞清楚 UI 中哪些元素可交互，哪些不可交互，但是用戶並不清楚。

盡量在按鈕中採用用戶熟悉的設計。

以下是絕大多數用戶都熟悉的按鈕樣式：

帶有矩形邊框的、填充有色彩的按鈕；

帶有圓角矩形邊框的、填充色彩的按鈕；

帶有陰影有色彩和內容填充的按鈕；

幽靈按鈕。

在這幾種常見的模式當中，帶有陰影和色彩填充的按鈕，對於用戶來說是最清晰的，因為它在視覺上是有三個維度的，用戶會感知到這是一個可按下去的元素。

不要忘記留白

按鈕本身的視覺屬性很重要，而按鈕附近的留白同樣重要，他們讓按鈕更容易被識別，也更容易交互。在下面的案例當中，用戶很可能會將文本內容和幽靈按鈕混淆。用戶在此無法判斷它到底是一個盒子元素，還是個按鈕。

-02-

將按鈕放在用戶希望看到的地方

用戶對於頁面交互其實是有基本的感知和期望的，也就是說用戶對於按鈕的位置是有個基本的認知的。不要讓用戶到處找按鈕，它最好在用戶所期望的位置出現。

儘可能使用傳統的布局和標準的 UI 模式

所謂傳統的布局也就是貼合用戶經驗的布局，用戶在瀏覽的時候會對於這樣「標準」的 UI 布局有明確的預期，在對的位置看到了對的按鈕，整體更容易理解，自然也就可以輕鬆和界面進行交互了。

想要確認設計的可用性，只需要觀察用戶在使用過程中是否會通過操作抵達你希望他們到達的位置，並且找到需要點擊的按鈕。

-03-

按鈕上應該加上相應操作的標籤

當按鈕的文本標籤上的內容寫的太過於寬泛，或者使用帶有誤解的內容，可能會讓用戶感到迷惑。每個標籤上的文本標籤都應該盡量準確，簡明直接地介紹清楚它的真實功能。

用戶應該清楚他們點擊按鈕之後，會發生什麼。舉個簡單的例子，想像一下，你不小心觸發了一個刪除按鈕，現在你看到了下面的報錯信息：

在這個界面當中，「OK」是一個相當模糊的表述，並沒有說明按鈕的作用。不論是「確定」還是「取消」，都沒有說清楚這個操作的真實含義。尤其當刪除是一個存在潛在危險的操作，這個操作就更加需要精準的表述。所以，這個地方兩個按鈕應該是「刪除」和「取消」更合適，而刪除應該用紅色進行區分標識，讓用戶意識到這個操作的重要性或者獨特性。