按鈕的定義
就是網(wǎng)頁(yè)或應(yīng)用中用來(lái)承載用戶(hù)操作的元件。用來(lái)承載用戶(hù)某一個(gè)具體的命令（操作），用戶(hù)在按下Button后程序系統(tǒng)執(zhí)行一系列的行為。
通常在視覺(jué)上會(huì)著重表現(xiàn)。
按鈕是一個(gè)普通的必不可少的，幾乎我們每天都要接觸無(wú)數(shù)次的設(shè)計(jì)元件，同時(shí)在Web或者App上創(chuàng)造流暢的用戶(hù)體驗(yàn)必不可少。
按鈕的尺寸
點(diǎn)擊Button的是鼠標(biāo)或手指。
MIT Touch Lab的研究結(jié)果表明手指接觸面積平均為10-14mm之間，指尖平均為8-10mm，所以最佳的熱區(qū)尺寸應(yīng)設(shè)定為10mmX10mm。
按鈕的形狀
通常是直角矩形或者圓角矩形。直角形的按鈕向我們傳遞一種正式嚴(yán)肅的感覺(jué)。圓角能夠加強(qiáng)信息的傳遞，并且能夠?qū)⑷说囊暰€(xiàn)集中在元素的中心位置。其他形狀，如圓形，三角形等。
按鈕的顏色
按鈕的顏色有千萬(wàn)種，可能考慮到界面的設(shè)計(jì)風(fēng)格；考慮到對(duì)用戶(hù)的心理暗示；考慮到要傳達(dá)給用戶(hù)的理念會(huì)選擇合適的顏色。比如大眾默認(rèn)的紅色按鈕傳達(dá)有警告、不可以的意思，同時(shí)也最能引起注意的顏色；藍(lán)色則傳達(dá)著可行，暢通之意；灰色則傳達(dá)著不可用，不可點(diǎn)擊之意，如灰置按鈕就是這樣應(yīng)用的。
按鈕的樣式
1.立體按鈕
立體按鈕樣式相較于扁平按鈕設(shè)計(jì)增加了一維空間，在復(fù)雜或?qū)捲５目臻g中強(qiáng)調(diào)功能，立體按鈕比扁平按鈕更加顯眼。
2.扁平按鈕
扁平的按鈕不突出，在點(diǎn)擊時(shí)會(huì)有背景顏色，不打擾內(nèi)容。
3.開(kāi)關(guān)按鈕
用同一個(gè)Button表示開(kāi)啟和關(guān)閉，節(jié)省空間。
4.幽靈按鈕
透明背景，與頁(yè)面文字一樣顏色，只加上邊框，通?；谄放苹蛟O(shè)計(jì)的考慮。
5.懸浮按鈕
懸浮按鈕用于驅(qū)動(dòng)動(dòng)作時(shí)使用。當(dāng)然在其它場(chǎng)景使用并不局限于單一形狀，可以是圖片文字結(jié)合，也可以是icon單獨(dú)構(gòu)成，懸浮于頁(yè)面中。
懸浮按鈕也是谷歌設(shè)計(jì)的重要部分，它是一個(gè)圓形的材質(zhì)按鈕，點(diǎn)按之后按鈕浮起并表現(xiàn)墨水暈開(kāi)的效果，利用本身的圓形形狀懸浮于界面之上與其他元素進(jìn)行區(qū)分，加上運(yùn)動(dòng)動(dòng)作，包括漸變，展開(kāi)和轉(zhuǎn)化為單一定點(diǎn)。
按鈕的狀態(tài)
按鈕有可用不可用兩種狀態(tài)，以及在交互上默認(rèn)狀態(tài)、鼠標(biāo)或懸浮時(shí)的狀態(tài)和按下時(shí)的狀態(tài)。
之前有提到灰置按鈕，就是不可用的。如下圖的應(yīng)用按鈕，現(xiàn)在這種情況是不可用，不能點(diǎn)擊的。
只有在你做出相應(yīng)的改動(dòng)時(shí)，這個(gè)按鈕才會(huì)被喚醒，變成可用可點(diǎn)擊的狀態(tài)。
在Web中按鈕的默認(rèn)狀態(tài)下；
鼠標(biāo)懸停時(shí)是這樣；
按下時(shí)是這樣的。
在界面設(shè)計(jì)按鈕時(shí)都要考慮到這個(gè)交互問(wèn)題，承現(xiàn)三種不同狀態(tài)。
按鈕的構(gòu)成形式
按鈕可以分為純文字的、純icon的，純圖片的以及這三種元素各自相結(jié)合的，最常見(jiàn)的就是純文字形、純icon形和文字icon結(jié)合形，純文字的太常見(jiàn)，就不用再例圖說(shuō)明了。
按鈕的使用形式
單個(gè)按鈕，最常見(jiàn)的。
按鈕組，一般成組出現(xiàn)，共用邊框，在視覺(jué)上成一個(gè)整體長(zhǎng)條形狀。末尾可能有更多的按鈕隱藏，通過(guò)下拉箭頭表示。
列表型按鈕，類(lèi)似Select，從可選的列表中選擇一項(xiàng)或者多項(xiàng)的菜單。
按鈕的擺放位置
按鈕應(yīng)放置在用戶(hù)能夠直接找到或者他有預(yù)期能看到的地方。例如,iOS UI 設(shè)計(jì)規(guī)范給明了按鈕的合理位置。
按鈕要執(zhí)行的命令和位置的關(guān)系非常重要，,特別是在出現(xiàn)成對(duì)的選項(xiàng)時(shí)(就像”上一個(gè)”和”下一個(gè)”)，確保設(shè)計(jì)強(qiáng)調(diào)了最主要或者最重要的動(dòng)作。
在下面的例子中我們使用了紅色的按鈕顏色表現(xiàn)一個(gè)潛在的具有破壞性的動(dòng)作，并且，主要?jiǎng)幼鞑坏梢酝ㄟ^(guò)顏色和對(duì)比度去引起注意，還可以看它是否置于對(duì)話(huà)段落的右邊。
