在實(shí)際工作中左权，按鈕是一個(gè)必不可少的基本元素竹椒，它在人機(jī)交互過(guò)程中扮演著一個(gè)很重要的角色叉信。但是它也經(jīng)常被錯(cuò)用。
以下說(shuō)明下怎么正確使用“按鈕”這一控件于樟。
1.使的按鈕看起來(lái)像一個(gè)按鈕
在用戶與界面進(jìn)行互動(dòng)時(shí)公条，用戶需要在非常短暫的時(shí)間中知道什么是“可點(diǎn)擊的”，什么是“不可點(diǎn)擊的”迂曲。在使用過(guò)程中赃份，每個(gè)地方都需要用戶進(jìn)行理解。通常情況下奢米，用戶理解界面所需的時(shí)間越長(zhǎng)抓韩，這就說(shuō)明當(dāng)前界面的可用性越差。
用戶在理解某個(gè)元素是否可進(jìn)行交互的時(shí)候鬓长，通常都是使用以前的經(jīng)驗(yàn)和視覺(jué)裝飾來(lái)理解這個(gè)元素的含義谒拴。這就是為什么使用適當(dāng)?shù)囊曈X(jué)裝飾（例如：大小，形狀涉波，顏色英上，陰影等）可以使得元素看起來(lái)更像一個(gè)按鈕是一件非常重要的手段的原因炭序。
不過(guò)，在具體使用場(chǎng)景中苍日，設(shè)計(jì)者設(shè)計(jì)出的按鈕惭聂，其指示性很弱，導(dǎo)致他們不易被發(fā)現(xiàn)相恃。
如果確實(shí)清晰的指示辜纲，并且用戶在疑惑“可點(diǎn)擊”和“不可點(diǎn)擊”的狀態(tài)，那么這不是一個(gè)好的設(shè)計(jì)方案拦耐。
對(duì)于移動(dòng)設(shè)備用戶來(lái)說(shuō)耕腾，指示不明確更是一個(gè)很嚴(yán)重的問(wèn)題。為了了解單個(gè)元素是否可進(jìn)行交互杀糯，桌面用戶可以在元素上移動(dòng)光標(biāo)并檢查光標(biāo)是否更改了齊狀態(tài)扫俺。但是移動(dòng)設(shè)備用戶就沒(méi)有這種機(jī)會(huì)了，因?yàn)橐私饽硞€(gè)元素是否可進(jìn)行交互固翰，通常情況下用戶就需要對(duì)其進(jìn)行點(diǎn)擊操作狼纬。
還有一種場(chǎng)景：你以為用戶和你看到的是一樣的
在這種場(chǎng)景下，設(shè)計(jì)人員有意不將按鈕進(jìn)行特殊標(biāo)識(shí)骂际，因?yàn)樗麄冇X(jué)得這個(gè)交互元素對(duì)用戶是顯而易見(jiàn)的疗琉。在設(shè)計(jì)按鈕時(shí)，需要明白一個(gè)規(guī)則：
你眼中的可點(diǎn)擊性和用戶的理解不同方援，因?yàn)槟阍谠O(shè)計(jì)這個(gè)元素的時(shí)候就知道每個(gè)元素能完成什么没炒，而你的用戶不知道這個(gè)。
當(dāng)然犯戏，在按鈕的設(shè)計(jì)上送火，你需要使用熟悉的按鈕設(shè)計(jì)，這樣可以減少用戶的認(rèn)知成本（畢竟你的用戶在其它應(yīng)用那里接受了“調(diào)教”）
以下是大多數(shù)用戶熟悉的按鈕事例：
1. 帶有方形邊框的填充按鈕
2.? 圓角填充按鈕
3.? 帶有陰影的填充按鈕
4.? 線框按鈕
在所有這些示例中先匪，“帶有陰影的填充按鈕”設(shè)計(jì)對(duì)于用戶來(lái)說(shuō)是最清晰的种吸。當(dāng)用戶看到物體的同時(shí)，他們立即知道可以按下物體呀非。
對(duì)了坚俗，還有一種使用場(chǎng)景：忘記給按鈕留白
不僅僅是按鈕本身的視覺(jué)標(biāo)識(shí)很重要。按鈕附近的空白也使得用戶更容易（或更難）理解它是否是一個(gè)可互動(dòng)的元素岸裙。如下圖猖败，有些用戶會(huì)將按鈕識(shí)別成突出顯示，而非一個(gè)可互動(dòng)的元素降允。
?
2.將按鈕放在用戶希望找到它們的位置
按鈕應(yīng)該位于用戶可以輕松找到或者用戶心理預(yù)期存在的地方剧董。如果讓用戶尋找按鈕幢尚，那么他將忽略它的存在破停。當(dāng)然，如果為了達(dá)到某種目的尉剩，是可以適當(dāng)?shù)娜趸粹o（畢竟你本來(lái)就不想用戶對(duì)其點(diǎn)擊）
當(dāng)然真慢，要讓用戶能迅速找到按鈕的位置，有一個(gè)很可靠的做法理茎。
盡可能使用傳統(tǒng)布局以及標(biāo)準(zhǔn)的UI模式
常規(guī)的按鈕放置可提高發(fā)現(xiàn)性黑界。使用標(biāo)準(zhǔn)布局或者眾所周知的規(guī)范（比如：ios規(guī)范，安卓規(guī)范等功蜓；畢竟用戶已經(jīng)被這些規(guī)范調(diào)教過(guò)了园爷，用戶就不需要太多的學(xué)習(xí)成本）宠蚂，用戶可以輕松理解每個(gè)元素的作用用途式撼，即使它沒(méi)有很搶眼的視覺(jué)元素。將標(biāo)準(zhǔn)布局與干凈的視覺(jué)設(shè)計(jì)和充足的空白相結(jié)合求厕，可使得布局更易于理解著隆。
不要與您的用戶一起玩尋寶游戲
3.標(biāo)記出按鈕的功能
具有通用標(biāo)簽或誤導(dǎo)性標(biāo)簽的按鈕可能會(huì)使得您的用戶感到十分的沮喪。*寫(xiě)下按鈕標(biāo)簽呀癣，清楚說(shuō)明每個(gè)按鈕的功能美浦。*理想情況下，按鈕的標(biāo)簽應(yīng)清楚地描述其動(dòng)作是什么项栏。
用戶應(yīng)該清楚地了解單擊按鈕時(shí)會(huì)發(fā)生什么浦辨。讓我舉一個(gè)簡(jiǎn)單的例子。想象一下沼沈，您不小心觸發(fā)了刪除操作流酬，現(xiàn)在您看到以下錯(cuò)誤的設(shè)計(jì)。
就這個(gè)窗口來(lái)說(shuō)芽腾，尚不清楚“確定”和“取消”在此對(duì)話框中代表什么。大多數(shù)用戶會(huì)問(wèn)自己“當(dāng)我點(diǎn)擊‘取消’時(shí)會(huì)發(fā)生什么”畢竟步驟不可逆轉(zhuǎn)页衙。
永遠(yuǎn)不要設(shè)計(jì)僅由“確定”和“取消”兩個(gè)按鈕組成的對(duì)話框或表單摊滔。
與其使用“確定”標(biāo)簽，不如使用“刪除”店乐。這將使該按鈕對(duì)用戶的作用變得清晰艰躺。另外，如果“刪除”操作有潛在危險(xiǎn)眨八，您可以使用醒目色“紅色”說(shuō)明這一事實(shí)腺兴。
4.適當(dāng)調(diào)整按鈕大小
按鈕大小應(yīng)反映此元素在屏幕上的優(yōu)先級(jí)踪古。大按鈕表示更重要的動(dòng)作含长。
優(yōu)先按鈕
使重要的按鈕看起來(lái)像是最重視的按鈕券腔。始終嘗試使主要操作按鈕更加突出。增大其大芯信ⅰ（通過(guò)增大按鈕的大小纷纫，使其對(duì)用戶而言顯得更為重要），并使用對(duì)比色吸引用戶的注意力陪腌。
使按鈕對(duì)移動(dòng)用戶友好
在許多移動(dòng)應(yīng)用中，按鈕太小诗鸭。這通常會(huì)導(dǎo)致用戶輸入錯(cuò)誤的情況染簇。
麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn)锻弓，指墊的平均值在10-14mm之間，指尖的平均值在8-10mm之間蝌箍。這使得10mm x 10mm成為最小的觸摸目標(biāo)尺寸青灼。
5.注意順序
按鈕的順序應(yīng)反映用戶與系統(tǒng)之間對(duì)話的性質(zhì)。問(wèn)問(wèn)自己妓盲，用戶期望在此屏幕上擁有什么順序并進(jìn)行相應(yīng)的設(shè)計(jì)杂拨。
用戶界面是和用戶對(duì)話的方式
例如，如何在分頁(yè)中對(duì)“上一個(gè)/下一個(gè)”按鈕進(jìn)行排序悯衬？邏輯上弹沽，使您向前移動(dòng)的按鈕應(yīng)位于右側(cè)，而使您向后移動(dòng)的按鈕應(yīng)位于左側(cè)筋粗。
?6.避免使用太多按鈕
這是許多應(yīng)用程序和網(wǎng)站的常見(jiàn)問(wèn)題策橘。當(dāng)您提供太多選項(xiàng)時(shí)，您的用戶最終會(huì)放棄選擇亏狰。在您的應(yīng)用或網(wǎng)站中設(shè)計(jì)頁(yè)面時(shí)役纹，請(qǐng)考慮您要用戶采取的最重要的操作。
7.提供互動(dòng)的視覺(jué)或聽(tīng)覺(jué)反饋
當(dāng)用戶單擊或點(diǎn)擊按鈕時(shí)暇唾，他們期望用戶界面將響應(yīng)并提供適當(dāng)?shù)姆答伌俾觥８鶕?jù)操作類型，這可能是視覺(jué)或音頻反饋策州。當(dāng)用戶沒(méi)有任何反饋時(shí)瘸味，他們可能會(huì)認(rèn)為系統(tǒng)未收到其命令，因此將重復(fù)執(zhí)行該操作够挂。這種行為通常會(huì)導(dǎo)致多個(gè)不必要的操作旁仿。
為什么會(huì)這樣呢？作為人類，我們?cè)谂c物體互動(dòng)后會(huì)期望得到一些反饋枯冈。它可能是視覺(jué)毅贮，聽(tīng)覺(jué)或觸覺(jué)反饋，任何能被感知到的事實(shí)尘奏。
對(duì)于某些操作，例如下載炫加，不僅值得確認(rèn)用戶輸入瑰煎，而且還需要顯示進(jìn)程的當(dāng)前狀態(tài)。
結(jié)論
盡管按鈕是交互設(shè)計(jì)的普通元素，但還是值得關(guān)注很多赋铝，以使此元素盡可能地好插勤。按鈕UX設(shè)計(jì)應(yīng)始終圍繞識(shí)別性和清晰度。
這篇文章原文來(lái)自Nick Babich的《7 Basic Rules for Button Design》
