海淘科技幫您總結(jié)了按鈕使用實(shí)例、類型和狀態(tài)：
按鈕是一個(gè)一般的、平時(shí)交互中都也許碰到的根本元素。但對(duì)創(chuàng)立一個(gè)流通的交互體會(huì)進(jìn)程來(lái)講，按鈕則是一個(gè)至關(guān)首要的元素，因此，投入必定精力到該元素的規(guī)劃上是十分有含義的。別的，咱們也為咱們梳理出元素的根本類別跟狀況——都是為了創(chuàng)立出高效的按鈕進(jìn)而提高用戶體會(huì)你所必須了解到的根本信息。
1、使按鈕看起來(lái)確實(shí)像按鈕
細(xì)心想想一個(gè)按鈕終究是怎么經(jīng)過(guò)良好的規(guī)劃向用戶傳達(dá)其功用可見(jiàn)性的。用戶又是怎么將一個(gè)元素了解成按鈕的?最簡(jiǎn)略的辦法就是運(yùn)用形狀和色彩讓元素看起來(lái)像一個(gè)按鈕。
Groupon 登錄頁(yè)面杰出首要按鈕
別的，你需求仔細(xì)思考下規(guī)劃中涉及到的元素的可接觸尺度。就協(xié)助用戶從一堆元素中識(shí)別出按鈕一事，按鈕自身的尺度巨細(xì)也表現(xiàn)著首要的效果。其實(shí)各種平臺(tái)中的規(guī)劃指南中也都指出了其請(qǐng)求的最小規(guī)劃尺度。而來(lái)自 MIT Touch Lab 的一項(xiàng)研討表明，手指的均勻接觸巨細(xì)在10-14mm之間，指尖的規(guī)模則在8-10mm，這就使得最適宜的尺度下限應(yīng)當(dāng)在10mm x 10mm擺布。
2、留意按鈕的方位和次序
應(yīng)當(dāng)把按鈕放在用戶簡(jiǎn)單發(fā)現(xiàn)或預(yù)期看到的方位。例如，iOS UI guidelines 中的實(shí)例：
按鈕的擺放次序也十分首要，格外對(duì)一雙成對(duì)的(比方“前一個(gè)”和“下一個(gè)”)選項(xiàng)按鈕。必定要保證最首要的按鈕在視覺(jué)規(guī)劃上更為杰出。
在下面的示例中，咱們運(yùn)用赤色標(biāo)示出也許代表毀滅性操作的按鈕。請(qǐng)留意首要按鈕不光在色彩和比照度上愈加杰出，其方位也放在了對(duì)話框的右側(cè)。
3、要不要運(yùn)用標(biāo)簽
標(biāo)簽用來(lái)通知用戶操作按鈕后會(huì)發(fā)作什么。
相同是上面的示例，假如沒(méi)有運(yùn)用適宜的文本標(biāo)簽，狀況如下，瞧瞧，你感覺(jué)到這其間的不相同了嗎?
4、做法呼喚按鈕(CTA)
應(yīng)當(dāng)使最首要的按鈕(格外是做法呼喚類按鈕)看起來(lái)確實(shí)是最首要的。
一般狀況下，你會(huì)依據(jù)網(wǎng)站/運(yùn)用程序的類型將按鈕規(guī)劃成直角或圓角型。一些研討指出，圓角按鈕可以提高信息的表現(xiàn)力并招引用戶的留意力到元素的基地處(文本有些)。
圓角矩形按鈕
你當(dāng)然也可以更具立異，運(yùn)用別的比方圓形、三角形或許自定義形狀的按鈕，可是請(qǐng)緊記挑選后者也許會(huì)更有風(fēng)險(xiǎn)。
懸浮按鈕是運(yùn)用自定義形狀按鈕的一個(gè)極好的比方
請(qǐng)保證貫穿整個(gè)運(yùn)用程序的控件保持良好的一致性，好讓用戶可以輕易的識(shí)別出你的界面元素并可以分辨出終究哪些是按鈕。
1、起浮按鈕
起浮按鈕一般成直角型，經(jīng)過(guò)必定的暗影表明其可點(diǎn)擊性。對(duì)比與扁平的規(guī)劃，其增加了全體尺度，在對(duì)比擁堵的界面上更明晰可見(jiàn)。
(1)運(yùn)用。作為內(nèi)聯(lián)元素運(yùn)用，在一個(gè)包括多樣性內(nèi)容的規(guī)劃里邊著重動(dòng)作。
(2)做法。按下后起浮按鈕稍微彈起并填充色彩。
(3)實(shí)例。起浮按鈕要比扁平按鈕更為杰出，實(shí)例如下：
2、扁平按鈕
按下時(shí)，扁平按鈕并不會(huì)彈起，但相同會(huì)填充必定色彩。扁平按鈕的首要優(yōu)點(diǎn)簡(jiǎn)略明晰——它們最小化用戶從內(nèi)容中分神的也許性。
扁平按鈕
(1)運(yùn)用。
① 在對(duì)話框中，一致按鈕自身跟對(duì)話框內(nèi)容的款式：
Android 對(duì)話框中的扁平按鈕
② 在工具欄中：
工具欄中的扁平按鈕
作為有必定內(nèi)邊距的內(nèi)聯(lián)元素，用戶可以輕易地留意到它們。
(2)做法。
(3)實(shí)例。
3、開關(guān)按鈕
一個(gè)開關(guān)按鈕答運(yùn)用戶在兩個(gè)(或多個(gè))狀況之間切換。
開關(guān)按鈕
(1)運(yùn)用。開關(guān)按鈕最常用來(lái)標(biāo)示On/Off狀況。
開關(guān)按鈕相同可以用在一組有關(guān)的選項(xiàng)上，但此刻你的規(guī)劃應(yīng)當(dāng)向用戶傳達(dá)當(dāng)時(shí)的開關(guān)按鈕是這一組中的一有些。別的，開關(guān)按鈕請(qǐng)求：
① 一個(gè)開關(guān)按鈕組最少由三個(gè)開關(guān)按鈕構(gòu)成;
② 運(yùn)用純文本、圖標(biāo)或許兩者聯(lián)系作為按鈕;
有一個(gè)選項(xiàng)被選中的開關(guān)按鈕組
運(yùn)用圖標(biāo)關(guān)于開關(guān)按鈕來(lái)說(shuō)十分適宜，它可以友好的標(biāo)示出按鈕終究是選中仍是未被選中，就像向一個(gè)條目中參加或移除一顆星相同，它們首要用在運(yùn)用程序中的標(biāo)簽欄、工具欄、操作按鈕或具有開關(guān)含義的選項(xiàng)中。
對(duì)你的按鈕選用準(zhǔn)確的圖標(biāo)是十分首要的，我從前在這篇文章表達(dá)了該主題。
(3)實(shí)例。iOS在設(shè)置有些運(yùn)用到了開關(guān)按鈕。
4、虛擬按鈕
虛擬按鈕是指具有根本的按鈕形狀(如直角形)的透明按鈕，但有細(xì)實(shí)線的邊框，并在邊框內(nèi)部包括純文本。
(1)運(yùn)用。運(yùn)用虛擬按鈕作為一個(gè)首要的CTA按鈕一般不是一個(gè)好主意。在 Bootstrap 一例中，你可以看到虛擬按鈕“Download Bootstrap”看上去跟它們的logo運(yùn)用了同一種款式，其成果便是也許造成用戶疑問(wèn)。
虛擬按鈕最適合用于相對(duì)非必須一些的操作，由于它無(wú)法(或許說(shuō)也不應(yīng)當(dāng))跟首要的 CTA 按鈕對(duì)比首要性。理想狀況，你一般期望用戶看到你的首要 CTA 按鈕，假如不有關(guān)，用戶也可以跳至非必須按鈕上。
(2)做法。
(3)實(shí)例。Airbnb的網(wǎng)站上有“Become a Host”的虛擬按鈕。
5、懸浮按鈕
懸浮按鈕是 Google Material Design 中的一有些，是一種點(diǎn)擊后會(huì)發(fā)生墨水分散效果的圓形按鈕 。
(1)運(yùn)用。懸浮按鈕用在一個(gè)促進(jìn)操作(promoted action)上。
(2)做法。懸浮按鈕的特性在于，它是一個(gè)圓形的漂浮在界面之上的、具有一系列格外動(dòng)作的按鈕，這些動(dòng)作一般和改換、發(fā)動(dòng)、以及它自身的變換錨點(diǎn)有關(guān)。
挑選按鈕類型應(yīng)當(dāng)根據(jù)主按鈕、屏幕上容器的數(shù)量以及屏幕的全體規(guī)劃來(lái)進(jìn)行挑選。
Google Material Design 建議選用的挑選按鈕類型
屏幕Z軸深度
1、審視功用：它是不是十分首要并且運(yùn)用廣泛到需求用上懸浮響應(yīng)按鈕?
2、思考容器和層次：根據(jù)放置按鈕的容器以及屏幕上層次堆疊的數(shù)量來(lái)挑選運(yùn)用何種類型。
3、查看規(guī)劃：一個(gè)容器應(yīng)當(dāng)只運(yùn)用一種類型的按鈕。 只在對(duì)比格外的狀況下(比方需求著重一個(gè)浮起的效果)才應(yīng)當(dāng)混合運(yùn)用多種類型的按鈕。
按鈕狀況并不太關(guān)心用戶看到按鈕的初始態(tài)款式怎么，而是要思考當(dāng)用戶將焦點(diǎn)懸停按鈕之上(或別的操作)，未發(fā)現(xiàn)任何改動(dòng)時(shí)體系應(yīng)怎么處理，由于面臨這種成果，用戶也許就會(huì)發(fā)生疑問(wèn)：“它終究是不是一個(gè)按鈕呢?看樣子我如今還必須點(diǎn)一下它，看看這個(gè)長(zhǎng)得像按鈕的元素是不是真的是按鈕，哎......”
按鈕并是不狀況如一的。相反，一個(gè)按鈕一般是有多種狀況的，因此，怎么經(jīng)過(guò)一個(gè)視覺(jué)反應(yīng)向用戶傳達(dá)出按鈕當(dāng)時(shí)的狀況，這是十分首要的一項(xiàng)任務(wù)。
1、正常狀況
該狀況的首要準(zhǔn)則——按鈕在正常狀況下應(yīng)當(dāng)看上去確實(shí)像一個(gè)按鈕。Windows8是一個(gè)極好的反例——在設(shè)置菜單下，用戶很難直觀地識(shí)別出這些元素終究可不可以點(diǎn)擊。
Windows8 中正常狀況下的按鈕
2、取得焦點(diǎn)狀況
當(dāng)用戶焦點(diǎn)懸停放置按鈕之上時(shí)，應(yīng)當(dāng)給用戶一個(gè)好的視覺(jué)反應(yīng)通知其按鈕的狀況改變，這么用戶能馬上意識(shí)到自個(gè)的操作收效，他們也期望這種視覺(jué)反應(yīng)的效果自身可以令人愉悅。
3、按下狀況
經(jīng)過(guò)給不相同元素賦予生氣(增加立異且有含義的動(dòng)畫效果)，你可以必定程度上愉悅用戶。
4、非活潑狀況(無(wú)效狀況)
對(duì)于這種狀況的按鈕，一般有兩種處理辦法——要么將按鈕躲藏起來(lái)要么顯現(xiàn)為禁用狀況。
(1)躲藏按鈕的理由：
① 明晰明晰。只需求向用戶顯現(xiàn)那些需求用到/可用的按鈕。
② 節(jié)省空間。答運(yùn)用戶在不相同的操作下運(yùn)用不相同的控件，格外當(dāng)有很多按鈕時(shí)格外方便。例如，Gmail這種做法：
Gmail 躲藏掉了用不到的按鈕
觸發(fā)有關(guān)動(dòng)作后再顯現(xiàn)出原本躲藏的按鈕
(1)禁用按鈕的理由：
① 可以顯現(xiàn)出也許的動(dòng)作。即便當(dāng)時(shí)按鈕不可用，用戶也可以意識(shí)到按鈕也許有用。你乃至可以有一個(gè)工具提示來(lái)解說(shuō)運(yùn)用的條件。
② 控件方位明晰可見(jiàn)。用戶可以搞清楚界面控件和按鈕都在哪里(增強(qiáng)用戶的可控性)。
禁止?fàn)顩r的按鈕
按鈕是用戶運(yùn)用你的網(wǎng)站/程序的介質(zhì)之一，你期望用戶經(jīng)過(guò)點(diǎn)擊相應(yīng)的按鈕從而可以順著你的主意持續(xù)向下走。假如你運(yùn)用合理的按鈕類型、擺放方位并精心規(guī)劃按鈕的狀況改變，這自然而然可以發(fā)明一個(gè)流通的體會(huì)進(jìn)程。而假如你的規(guī)劃差勁，致使用戶乃至不能找到準(zhǔn)確的按鈕，那最好的成果也許就是用戶被打斷罷了(需求花時(shí)間整理解)，最壞的則也許是的用戶發(fā)生誤操作、滿心抱怨乃至是拋棄你的網(wǎng)站/程序。
按鈕的用戶體會(huì)規(guī)劃一般重視于識(shí)別性和明晰度。若將你的網(wǎng)站/運(yùn)用程序視作是跟一個(gè)繁忙的用戶進(jìn)行人機(jī)對(duì)話的途徑，你應(yīng)當(dāng)意識(shí)到按鈕在這個(gè)進(jìn)程中表現(xiàn)著至關(guān)首要的效果了吧。
