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

1. 按鈕必須得看起來像按鈕

涉及到用戶界面交互的時(shí)候躯喇，用戶需要知道哪些是可點(diǎn)擊的，而哪些不是硝枉。面對著 UI 界面中的每個(gè)元素廉丽，用戶都需要對它們進(jìn)行辨別和判斷，而這個(gè)過程越長妻味，可用性其實(shí)就越差正压。

那么，用戶是如何判讀哪個(gè)元素是可交互的呢责球？通常焦履，用戶是基于以往的經(jīng)驗(yàn)和視覺來對 UI 元素進(jìn)行判斷，這就是為什么需要通過合適的視覺符號來幫助用戶理解（比如尺寸雏逾、形狀嘉裤、顏色、陰影等）栖博，使得元素看起來像是按鈕屑宠。視覺符號為界面提供可供性。

不幸的是仇让，在許多界面當(dāng)中典奉，按鈕的可發(fā)現(xiàn)性和指示性并不強(qiáng)，這使得交互發(fā)生的機(jī)率有所降低丧叽，用戶會(huì)糾結(jié)于哪些可點(diǎn)擊卫玖，而哪些不可點(diǎn)擊，這個(gè)時(shí)候設(shè)計(jì)是否炫酷踊淳，就顯得不那么重要了假瞬。即使視覺上界面設(shè)計(jì)得足夠突出，可用性很弱，會(huì)讓用戶陷入沮喪笨触，產(chǎn)品也就不再具備可用性了。

為了確定按鈕是否可用雹舀，用戶在桌面端訪問網(wǎng)站的時(shí)候芦劣，需要將光標(biāo)移動(dòng)到元素上，檢查元素狀態(tài)是否會(huì)改變说榆，才能判斷它是否是可點(diǎn)擊的虚吟。而移動(dòng)端用戶就麻煩了，根本沒有鼠標(biāo)來執(zhí)行這樣的操作签财，元素能否點(diǎn)擊串慰，只能都試一次，沒有其他更好的方法了唱蒸。

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

在很多情況下，設(shè)計(jì)師會(huì)有意識地不將某些元素的交互性凸顯出來神汹，因?yàn)樗麄儠?huì)認(rèn)為這些東西是顯而易見的庆捺。但是事實(shí)并非如此，在設(shè)計(jì) UI 的時(shí)候屁魏，應(yīng)該牢記下面的事情滔以。

作為設(shè)計(jì)師，是很容易搞清楚 UI 中哪些元素可交互氓拼，哪些不可交互你画，但是用戶并不清楚。

盡量在按鈕中采用用戶熟悉的設(shè)計(jì)桃漾。

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

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

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

帶有陰影有色彩和內(nèi)容填充的按鈕；

幽靈按鈕宪摧。

在這幾種常見的模式當(dāng)中粒竖，帶有陰影和色彩填充的按鈕，對于用戶來說是最清晰的几于，因?yàn)樗谝曈X上是有三個(gè)維度的蕊苗，用戶會(huì)感知到這是一個(gè)可按下去的元素。

不要忘記留白

按鈕本身的視覺屬性很重要沿彭，而按鈕附近的留白同樣重要朽砰，他們讓按鈕更容易被識別，也更容易交互。在下面的案例當(dāng)中瞧柔，用戶很可能會(huì)將文本內(nèi)容和幽靈按鈕混淆漆弄。用戶在此無法判斷它到底是一個(gè)盒子元素，還是個(gè)按鈕造锅。

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

用戶對于頁面交互其實(shí)是有基本的感知和期望的撼唾，也就是說用戶對于按鈕的位置是有個(gè)基本的認(rèn)知的。不要讓用戶到處找按鈕哥蔚，它最好在用戶所期望的位置出現(xiàn)倒谷。

盡可能使用傳統(tǒng)的布局和標(biāo)準(zhǔn)的 UI 模式

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

想要確認(rèn)設(shè)計(jì)的可用性抖格，只需要觀察用戶在使用過程中是否會(huì)通過操作抵達(dá)你希望他們到達(dá)的位置，并且找到需要點(diǎn)擊的按鈕塌西。

3. 按鈕上應(yīng)該加上相應(yīng)操作的標(biāo)簽

當(dāng)按鈕的文本標(biāo)簽上的內(nèi)容寫的太過于寬泛他挎，或者使用帶有誤解的內(nèi)容，可能會(huì)讓用戶感到迷惑捡需。每個(gè)標(biāo)簽上的文本標(biāo)簽都應(yīng)該盡量準(zhǔn)確办桨，簡明直接地介紹清楚它的真實(shí)功能。

用戶應(yīng)該清楚他們點(diǎn)擊按鈕之后站辉，會(huì)發(fā)生什么呢撞。舉個(gè)簡單的例子，想象一下饰剥，你不小心觸發(fā)了一個(gè)刪除按鈕殊霞，現(xiàn)在你看到了下面的報(bào)錯(cuò)信息：

在這個(gè)界面當(dāng)中，「OK」是一個(gè)相當(dāng)模糊的表述汰蓉，并沒有說明按鈕的作用绷蹲。不論是「確定」還是「取消」，都沒有說清楚這個(gè)操作的真實(shí)含義顾孽。尤其當(dāng)刪除是一個(gè)存在潛在危險(xiǎn)的操作祝钢，這個(gè)操作就更加需要精準(zhǔn)的表述。所以若厚，這個(gè)地方兩個(gè)按鈕應(yīng)該是「刪除」和「取消」更合適拦英，而刪除應(yīng)該用紅色進(jìn)行區(qū)分標(biāo)識，讓用戶意識到這個(gè)操作的重要性或者獨(dú)特性测秸。

4. 按鈕應(yīng)該擁有合理的尺寸

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

按鈕優(yōu)先級

讓更重要的按鈕在視覺上就足以體現(xiàn)它的重要性。始終嘗試讓主要的按鈕更加突出铃拇，增加它的尺寸钞瀑，并且使用高對比度的色彩來吸引用戶的注意力。

在 Dropbox 的界面上慷荔，設(shè)計(jì)師就是使用了大小和色彩的對比來創(chuàng)造優(yōu)先級仔戈。

讓按鈕適配用戶的手指

在許多 APP 當(dāng)中，按鈕的設(shè)計(jì)太小了拧廊，這可能會(huì)導(dǎo)致用戶出現(xiàn)誤觸的情況。

左側(cè)：正確的按鈕尺寸晋修；右側(cè)：按鈕尺寸太小

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

5. 注意按鈕的次序

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

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

6. 避免使用太多按鈕

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

太多的按鈕

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

當(dāng)用戶點(diǎn)擊按鈕的時(shí)候潦刃，他們更希望界面能夠給予適當(dāng)?shù)姆答仭稠肘；诓煌牟僮鞲ＧΓ缑娼o予視覺或者音頻的反饋。當(dāng)用戶沒有收獲任何反饋的時(shí)候项阴，他們可能會(huì)覺得界面沒有收到他們的操作滑黔，從而反復(fù)點(diǎn)擊笆包，執(zhí)行多次不必要的操作。

人類和物理世界交互略荡，獲得反饋庵佣，然后執(zhí)行更多的操作，這種機(jī)制是人類進(jìn)化中所形成的認(rèn)知汛兜，這種反饋可以是視覺巴粪，也可以是聽覺，這些反饋會(huì)告訴用戶發(fā)生了什么粥谬。

對于某些操作肛根，比如下載，不僅要告訴用戶他們的操作執(zhí)行成功了漏策，而且要顯示當(dāng)前的進(jìn)度派哲。

最后

需要更多關(guān)于ios開發(fā)資料的可以加我的iOS交流群714042473：，不管你是小白還是大牛歡迎入駐面試經(jīng)驗(yàn)掺喻，討論技術(shù)芭届， 大家一起交流學(xué)習(xí)成長！希望幫助開發(fā)者少走彎路