按鈕是UI設(shè)計(jì)中最常用的一個(gè)元素，幾乎每個(gè)項(xiàng)目都會(huì)有它的出現(xiàn)轩猩，在不同的設(shè)計(jì)中肿轨，Button本身會(huì)根據(jù)主體風(fēng)格制作，不同的地方使用的按鈕樣式會(huì)有所不同恃逻。
它們是用戶交互的時(shí)候和系統(tǒng)溝通交流的核心組件雏搂，需也是圖形化界面當(dāng)中，最早出現(xiàn)的寇损，也是最為常見(jiàn)的一種交互對(duì)象凸郑，對(duì)于學(xué)UI設(shè)計(jì)的同學(xué)們，按鈕練習(xí)也是需要學(xué)習(xí)的
在今天的文章當(dāng)中矛市，我們將會(huì)回顧一下按鈕設(shè)計(jì)的7個(gè)基本原則芙沥，希望它們能夠在設(shè)計(jì)的時(shí)候幫到你。
1. 按鈕必須得看起來(lái)像按鈕
涉及到用戶界面交互的時(shí)候浊吏，用戶需要知道哪些是可點(diǎn)擊的憨愉，而哪些不是。
面對(duì)著 UI 界面中的每個(gè)元素卿捎，用戶都需要對(duì)它們進(jìn)行辨別和判斷配紫，而這個(gè)過(guò)程越長(zhǎng)，可用性其實(shí)就越差午阵。
那么躺孝，用戶是如何判讀哪個(gè)元素是可交互的呢？通常底桂，用戶是基于以往的經(jīng)驗(yàn)和視覺(jué)來(lái)對(duì) UI 元素進(jìn)行判斷植袍。
這就是為什么需要通過(guò)合適的視覺(jué)符號(hào)來(lái)幫助用戶理解（比如尺寸、形狀籽懦、顏色于个、陰影等）使得元素看起來(lái)像是按鈕。視覺(jué)符號(hào)為界面提供可供性暮顺。
不幸的是厅篓，在許多界面當(dāng)中秀存，按鈕的可發(fā)現(xiàn)性和指示性并不強(qiáng)，這使得交互發(fā)生的機(jī)率有所降低羽氮。
用戶會(huì)糾結(jié)于哪些可點(diǎn)擊或链，而哪些不可點(diǎn)擊，這個(gè)時(shí)候設(shè)計(jì)是否炫酷档押，就顯得不那么重要了澳盐。
即使視覺(jué)上界面設(shè)計(jì)得足夠突出，可用性很弱令宿，會(huì)讓用戶陷入沮喪叼耙，產(chǎn)品也就不再具備可用性了。
為了確定按鈕是否可用粒没，用戶在桌面端訪問(wèn)網(wǎng)站的時(shí)候旬蟋，需要將光標(biāo)移動(dòng)到元素上，檢查元素狀態(tài)是否會(huì)改變革娄，才能判斷它是否是可點(diǎn)擊的倾贰。
而移動(dòng)端用戶就麻煩了，根本沒(méi)有鼠標(biāo)來(lái)執(zhí)行這樣的操作拦惋，元素能否點(diǎn)擊匆浙，只能都試一次，沒(méi)有其他更好的方法了厕妖。
不要假定你的 UI 中的元素對(duì)于用戶是顯而易見(jiàn)的首尼。
在很多情況下，設(shè)計(jì)師會(huì)有意識(shí)地不將某些元素的交互性凸顯出來(lái)言秸，因?yàn)樗麄儠?huì)認(rèn)為這些東西是顯而易見(jiàn)的软能。
但是事實(shí)并非如此，在設(shè)計(jì) UI 的時(shí)候举畸，應(yīng)該牢記下面的事情查排。
作為設(shè)計(jì)師，是很容易搞清楚 UI 中哪些元素可交互抄沮，哪些不可交互跋核，但是用戶并不清楚。
盡量在按鈕中采用用戶熟悉的設(shè)計(jì)叛买。
以下是絕大多數(shù)用戶都熟悉的按鈕樣式：
帶有矩形邊框的砂代、填充有色彩的按鈕；
帶有圓角矩形邊框的率挣、填充色彩的按鈕刻伊；
帶有陰影有色彩和內(nèi)容填充的按鈕；
幽靈按鈕。
在這幾種常見(jiàn)的模式當(dāng)中捶箱，帶有陰影和色彩填充的按鈕智什，對(duì)于用戶來(lái)說(shuō)是最清晰的。
因?yàn)樗谝曈X(jué)上是有三個(gè)維度的讼呢，用戶會(huì)感知到這是一個(gè)可按下去的元素撩鹿。
不要忘記留白
按鈕本身的視覺(jué)屬性很重要谦炬，而按鈕附近的留白同樣重要悦屏，他們讓按鈕更容易被識(shí)別，也更容易交互键思。
在下面的案例當(dāng)中础爬，用戶很可能會(huì)將文本內(nèi)容和幽靈按鈕混淆。用戶在此無(wú)法判斷它到底是一個(gè)盒子元素吼鳞，還是個(gè)按鈕看蚜。
2. 將按鈕放在用戶希望看到的地方
用戶對(duì)于頁(yè)面交互其實(shí)是有基本的感知和期望的，也就是說(shuō)用戶對(duì)于按鈕的位置是有個(gè)基本的認(rèn)知的赔桌。
不要讓用戶到處找按鈕供炎，它最好在用戶所期望的位置出現(xiàn)。
盡可能使用傳統(tǒng)的布局和標(biāo)準(zhǔn)的 UI 模式
所謂傳統(tǒng)的布局也就是貼合用戶經(jīng)驗(yàn)的布局疾党，用戶在瀏覽的時(shí)候會(huì)對(duì)于這樣「標(biāo)準(zhǔn)」的 UI 布局有明確的預(yù)期音诫，
在對(duì)的位置看到了對(duì)的按鈕，整體更容易理解雪位，自然也就可以輕松和界面進(jìn)行交互了竭钝。
想要確認(rèn)設(shè)計(jì)的可用性，只需要觀察用戶在使用過(guò)程中是否會(huì)通過(guò)操作抵達(dá)你希望他們到達(dá)的位置雹洗，并且找到需要點(diǎn)擊的按鈕香罐。
3. 按鈕上應(yīng)該加上相應(yīng)操作的標(biāo)簽
當(dāng)按鈕的文本標(biāo)簽上的內(nèi)容寫(xiě)的太過(guò)于寬泛，或者使用帶有誤解的內(nèi)容时肿，可能會(huì)讓用戶感到迷惑庇茫。
每個(gè)標(biāo)簽上的文本標(biāo)簽都應(yīng)該盡量準(zhǔn)確，簡(jiǎn)明直接地介紹清楚它的真實(shí)功能螃成。
用戶應(yīng)該清楚他們點(diǎn)擊按鈕之后港令，會(huì)發(fā)生什么。
舉個(gè)簡(jiǎn)單的例子锈颗，想象一下顷霹，你不小心觸發(fā)了一個(gè)刪除按鈕，現(xiàn)在你看到了下面的報(bào)錯(cuò)信息：
在這個(gè)界面當(dāng)中击吱，「OK」是一個(gè)相當(dāng)模糊的表述淋淀，并沒(méi)有說(shuō)明按鈕的作用。不論是「確定」還是「取消」，都沒(méi)有說(shuō)清楚這個(gè)操作的真實(shí)含義朵纷。
尤其當(dāng)刪除是一個(gè)存在潛在危險(xiǎn)的操作炭臭，這個(gè)操作就更加需要精準(zhǔn)的表述。
所以袍辞，這個(gè)地方兩個(gè)按鈕應(yīng)該是「刪除」和「取消」更合適鞋仍，而刪除應(yīng)該用紅色進(jìn)行區(qū)分標(biāo)識(shí)，讓用戶意識(shí)到這個(gè)操作的重要性或者獨(dú)特性搅吁。
?
4. 按鈕應(yīng)該擁有合理的尺寸
按鈕的大小應(yīng)該反映出屏幕上這一元素的優(yōu)先級(jí)威创，更大的按鈕應(yīng)該意味著更重要的交互。
按鈕優(yōu)先級(jí)
讓更重要的按鈕在視覺(jué)上就足以體現(xiàn)它的重要性谎懦。始終嘗試讓主要的按鈕更加突出肚豺，增加它的尺寸，并且使用高對(duì)比度的色彩來(lái)吸引用戶的注意力界拦。
在 Dropbox 的界面上吸申，設(shè)計(jì)師就是使用了大小和色彩的對(duì)比來(lái)創(chuàng)造優(yōu)先級(jí)。
讓按鈕適配用戶的手指
在許多 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)該反映出用戶和界面之間交互的屬性。
問(wèn)問(wèn)自己用戶期望在屏幕上看到什么樣的順序齐帚，或者說(shuō)什么樣的順序更合理妒牙，然后進(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è)問(wèn)題旗们。當(dāng)你提供太多的選擇的時(shí)候，用戶往往會(huì)無(wú)所適從构灸。
無(wú)論是設(shè)計(jì)網(wǎng)站還是 APP上渴，請(qǐng)務(wù)必盡量考慮最重要的操作，控制好優(yōu)先級(jí)和復(fù)雜度。
△ 太多的按鈕
7. 為按鈕交互提供視覺(jué)和音頻反饋
當(dāng)用戶點(diǎn)擊按鈕的時(shí)候稠氮，他們更希望界面能夠給予適當(dāng)?shù)姆答伈芾；诓煌牟僮鞲襞缑娼o予視覺(jué)或者音頻的反饋赃份。
當(dāng)用戶沒(méi)有收獲任何反饋的時(shí)候，他們可能會(huì)覺(jué)得界面沒(méi)有收到他們的操作奢米，從而反復(fù)點(diǎn)擊抓韩，執(zhí)行多次不必要的操作。
人類和物理世界交互恃慧，獲得反饋园蝠，然后執(zhí)行更多的操作渺蒿，這種機(jī)制是人類進(jìn)化中所形成的認(rèn)知痢士，。
種反饋可以是視覺(jué)茂装，也可以是聽(tīng)覺(jué)怠蹂，這些反饋會(huì)告訴用戶發(fā)生了什么。
對(duì)于某些操作少态，比如下載城侧，不僅要告訴用戶他們的操作執(zhí)行成功了，而且要顯示當(dāng)前的進(jìn)度彼妻。
以上就是UI設(shè)計(jì)中按鈕設(shè)計(jì)的7個(gè)基本原則的整理嫌佑，希望它們能夠在設(shè)計(jì)的時(shí)候能夠幫到你
?
?
