按鈕設計的7個(gè)基本原則

　　按鈕是 UI 和交互設計的基本元素，它們是用戶(hù)交互的時(shí)候，和系統進(jìn)行溝通交流的核心組件，也是圖形化界面當中，最早出現，也是最為常見(jiàn)的一種交互對象。在今天的文章當中，我們將會(huì )回顧一下按鈕設計的7個(gè)基本原則，希望它們能夠在設計的時(shí)候幫到你。

　　1. 按鈕必須得看起來(lái)像按鈕

　　涉及到用戶(hù)界面交互的時(shí)候，用戶(hù)需要知道哪些是可點(diǎn)擊的，而哪些不是。面對著(zhù) UI 界面中的每個(gè)元素，用戶(hù)都需要對它們進(jìn)行辨別和判斷，而這個(gè)過(guò)程越長(cháng)，可用性其實(shí)就越差。

　　那么，用戶(hù)是如何判讀哪個(gè)元素是可交互的呢？通常，用戶(hù)是基于以往的經(jīng)驗和視覺(jué)來(lái)對 UI 元素進(jìn)行判斷，這就是為什么需要通過(guò)合適的視覺(jué)符號來(lái)幫助用戶(hù)理解（比如尺寸、形狀、顏色、陰影等），使得元素看起來(lái)像是按鈕。視覺(jué)符號為界面提供可供性。

　　不幸的是，在許多界面當中，按鈕的可發(fā)現性和指示性并不強，這使得交互發(fā)生的機率有所降低，用戶(hù)會(huì )糾結于哪些可點(diǎn)擊，而哪些不可點(diǎn)擊，這個(gè)時(shí)候設計是否炫酷，就顯得不那么重要了。即使視覺(jué)上界面設計得足夠突出，可用性很弱，會(huì )讓用戶(hù)陷入沮喪，產(chǎn)品也就不再具備可用性了。

　　為了確定按鈕是否可用，用戶(hù)在桌面端訪(fǎng)問(wèn)網(wǎng)站的時(shí)候，需要將光標移動(dòng)到元素上，檢查元素狀態(tài)是否會(huì )改變，才能判斷它是否是可點(diǎn)擊的。而移動(dòng)端用戶(hù)就麻煩了，根本沒(méi)有鼠標來(lái)執行這樣的操作，元素能否點(diǎn)擊，只能都試一次，沒(méi)有其他更好的方法了。

　　不要假定你的 UI 中的元素對于用戶(hù)是顯而易見(jiàn)的。

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

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

　　盡量在按鈕中采用用戶(hù)熟悉的設計。

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

　　在這幾種常見(jiàn)的模式當中，帶有陰影和色彩填充的按鈕，對于用戶(hù)來(lái)說(shuō)是最清晰的，因為它在視覺(jué)上是有三個(gè)維度的，用戶(hù)會(huì )感知到這是一個(gè)可按下去的元素。

　　不要忘記留白

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

　　2. 將按鈕放在用戶(hù)希望看到的地方

　　

　　用戶(hù)對于頁(yè)面交互其實(shí)是有基本的感知和期望的，也就是說(shuō)用戶(hù)對于按鈕的位置是有個(gè)基本的認知的。不要讓用戶(hù)到處找按鈕，它最好在用戶(hù)所期望的位置出現。

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

　　所謂傳統的布局也就是貼合用戶(hù)經(jīng)驗的布局，用戶(hù)在瀏覽的時(shí)候會(huì )對于這樣「標準」的 UI 布局有明確的預期，在對的位置看到了對的按鈕，整體更容易理解，自然也就可以輕松和界面進(jìn)行交互了。

　　想要確認設計的可用性，只需要觀(guān)察用戶(hù)在使用過(guò)程中是否會(huì )通過(guò)操作抵達你希望他們到達的位置，并且找到需要點(diǎn)擊的按鈕。

　　3. 按鈕上應該加上相應操作的標簽

　　當按鈕的文本標簽上的內容寫(xiě)的太過(guò)于寬泛，或者使用帶有誤解的內容，可能會(huì )讓用戶(hù)感到迷惑。每個(gè)標簽上的文本標簽都應該盡量準確，簡(jiǎn)明直接地介紹清楚它的真實(shí)功能。

　　用戶(hù)應該清楚他們點(diǎn)擊按鈕之后，會(huì )發(fā)生什么。舉個(gè)簡(jiǎn)單的例子，想象一下，你不小心觸發(fā)了一個(gè)刪除按鈕，現在你看到了下面的報錯信息：

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

　　4. 按鈕應該擁有合理的尺寸

　　按鈕的大小應該反映出屏幕上這一元素的優(yōu)先級，更大的按鈕應該意味著(zhù)更重要的交互。

　　按鈕優(yōu)先級

　　讓更重要的按鈕在視覺(jué)上就足以體現它的重要性。始終嘗試讓主要的按鈕更加突出，增加它的尺寸，并且使用高對比度的色彩來(lái)吸引用戶(hù)的注意力。

　　在 Dropbox 的界面上，設計師就是使用了大小和色彩的對比來(lái)創(chuàng )造優(yōu)先級。

　　讓按鈕適配用戶(hù)的手指

　　

　　在許多 APP 當中，按鈕的設計太小了，這可能會(huì )導致用戶(hù)出現誤觸的情況。

　　左側：正確的按鈕尺寸；右側：按鈕尺寸太小

　　麻省理工學(xué)院的實(shí)驗室研究發(fā)現，手指墊寬度的平均值在10~14mm 之間，指尖在8-10mm 之間，這使得10×10 mm 的按鈕尺寸是比較合理的。

　　5. 注意按鈕的次序

　　按鈕的順序應該反映出用戶(hù)和界面之間交互的屬性，問(wèn)問(wèn)自己用戶(hù)期望在屏幕上看到什么樣的順序，或者說(shuō)什么樣的順序更合理，然后進(jìn)行相應的設計。

　　舉個(gè)例子，比如「上一步/下一步」兩個(gè)按鈕應該如何安置方位呢？通常而言，「上一步」是回卷操作，應該在左邊，而「下一步」則是前進(jìn)操作，應該在右邊。

　　6. 避免使用太多按鈕

　　這是許多 APP 和網(wǎng)站中經(jīng)常出現的一個(gè)問(wèn)題。當你提供太多的選擇的時(shí)候，用戶(hù)往往會(huì )無(wú)所適從。無(wú)論是設計網(wǎng)站還是 APP，請務(wù)必盡量考慮最重要的操作，控制好優(yōu)先級和復雜度。

　　太多的按鈕

　　7. 為按鈕交互提供視覺(jué)和音頻反饋

　　當用戶(hù)點(diǎn)擊按鈕的時(shí)候，他們更希望界面能夠給予適當的反饋?；诓煌牟僮?，界面給予視覺(jué)或者音頻的反饋。當用戶(hù)沒(méi)有收獲任何反饋的時(shí)候，他們可能會(huì )覺(jué)得界面沒(méi)有收到他們的操作，從而反復點(diǎn)擊，執行多次不必要的操作。

　　人類(lèi)和物理世界交互，獲得反饋，然后執行更多的操作，這種機制是人類(lèi)進(jìn)化中所形成的認知，這種反饋可以是視覺(jué)，也可以是聽(tīng)覺(jué)，這些反饋會(huì )告訴用戶(hù)發(fā)生了什么。

　　對于某些操作，比如下載，不僅要告訴用戶(hù)他們的操作執行成功了，而且要顯示當前的進(jìn)度。