按鈕是一個(gè)普通的千扔、日常交互中都可能碰到的基本元素。但對(duì)創(chuàng)建一個(gè)流暢的交互體驗(yàn)過(guò)程來(lái)講库正，按鈕則是一個(gè)至關(guān)重要的元素曲楚，因此，投入一定精力到該元素的設(shè)計(jì)上是非常有意義的诀诊。另外洞渤，我們也為大家梳理出元素的基本類別跟狀態(tài)——都是為了創(chuàng)建出高效的按鈕進(jìn)而提升用戶體驗(yàn)?zāi)闼仨毩私獾降幕拘畔ⅰ?/p>

一、使用按鈕的最佳實(shí)例

1属瓣、使按鈕看起來(lái)確實(shí)像按鈕

仔細(xì)想想一個(gè)按鈕究竟是如何通過(guò)良好的設(shè)計(jì)向用戶傳達(dá)其功能可見性的载迄。用戶又是怎樣將一個(gè)元素理解成按鈕的？最簡(jiǎn)單的辦法就是使用形狀和顏色讓元素看起來(lái)像一個(gè)按鈕抡蛙。

Groupon 登錄頁(yè)面突出主要按鈕

另外护昧，你需要認(rèn)真考慮下設(shè)計(jì)中涉及到的元素的可觸摸尺寸。就幫助用戶從一堆元素中識(shí)別出按鈕一事粗截，按鈕本身的尺寸大小也發(fā)揮著重要的作用惋耙。其實(shí)各種平臺(tái)中的設(shè)計(jì)指南中也都指出了其要求的最小設(shè)計(jì)尺寸。而來(lái)自 MIT Touch Lab 的一項(xiàng)研究表明，手指的平均觸摸大小在10-14mm之間绽榛，指尖的范圍則在8-10mm湿酸，這就使得最合適的尺寸下限應(yīng)該在10mm x 10mm左右。

2灭美、注意按鈕的位置和順序

應(yīng)該把按鈕放在用戶容易發(fā)現(xiàn)或預(yù)期看到的位置推溃。例如，iOS UI guidelines?中的實(shí)例：

按鈕的擺放順序也非常重要届腐，尤其對(duì)一雙成對(duì)的（比如“前一個(gè)”和“下一個(gè)”）選項(xiàng)按鈕铁坎。一定要確保最重要的按鈕在視覺設(shè)計(jì)上更為突出。

在下面的示例中犁苏，我們使用紅色標(biāo)示出可能代表毀滅性操作的按鈕硬萍。請(qǐng)注意重要按鈕不光在顏色和對(duì)比度上更加突出，其位置也放在了對(duì)話框的右側(cè)围详。

3朴乖、要不要使用標(biāo)簽

標(biāo)簽用來(lái)告訴用戶操作按鈕后會(huì)發(fā)生什么。

同樣是上面的示例助赞，如果沒(méi)有使用合適的文本標(biāo)簽寒砖，情況如下，瞧瞧嫉拐，你感覺到這其中的不同了嗎？

4魁兼、行為召喚按鈕（CTA）

應(yīng)該使最重要的按鈕(尤其是行為召喚類按鈕)看起來(lái)確實(shí)是最重要的婉徘。

二、按鈕形狀

通常情況下咐汞，你會(huì)根據(jù)網(wǎng)站/應(yīng)用程序的類型將按鈕設(shè)計(jì)成直角或圓角型盖呼。一些研究指出，圓角按鈕能夠提升信息的表現(xiàn)力并吸引用戶的注意力到元素的中心處（文本部分）化撕。

圓角矩形按鈕

你當(dāng)然也可以更具創(chuàng)新几晤，使用其他諸如圓形、三角形或者自定義形狀的按鈕植阴，但是請(qǐng)牢記選擇后者可能會(huì)更有風(fēng)險(xiǎn)蟹瘾。

懸浮按鈕是使用自定義形狀按鈕的一個(gè)很好的例子

請(qǐng)確保貫穿整個(gè)應(yīng)用程序的控件保持良好的一致性，好讓用戶能夠輕易的識(shí)別出你的界面元素并能夠分辨出究竟哪些是按鈕掠手。

三憾朴、按鈕類型和行為

1、浮動(dòng)按鈕

浮動(dòng)按鈕通常成直角型喷鸽，通過(guò)一定的陰影表明其可點(diǎn)擊性众雷。相比與扁平的設(shè)計(jì)，其增加了整體尺寸，在比較擁擠的界面上更清晰可見砾省。

（1）使用鸡岗。作為內(nèi)聯(lián)元素使用，在一個(gè)包含多樣性內(nèi)容的布局里面強(qiáng)調(diào)動(dòng)作编兄。

（2）行為轩性。按下后浮動(dòng)按鈕略微彈起并填充顏色帜讲。

（3）實(shí)例逾一。浮動(dòng)按鈕要比扁平按鈕更為突出志衣，實(shí)例如下：

2津滞、扁平按鈕

按下時(shí)瓷叫，扁平按鈕并不會(huì)彈起太雨，但同樣會(huì)填充一定顏色抚太。扁平按鈕的主要好處簡(jiǎn)單明了——它們最小化用戶從內(nèi)容中分心的可能性坪它。

扁平按鈕

（1）使用芦圾。

? ① 在對(duì)話框中蛾派，統(tǒng)一按鈕本身跟對(duì)話框內(nèi)容的樣式：

Android 對(duì)話框中的扁平按鈕

?② 在工具欄中：

工具欄中的扁平按鈕

作為有一定內(nèi)邊距的內(nèi)聯(lián)元素，用戶能夠輕易地注意到它們个少。

（2）行為洪乍。

（3）實(shí)例。

3夜焦、開關(guān)按鈕

一個(gè)開關(guān)按鈕允許用戶在兩個(gè)（或多個(gè)）狀態(tài)之間切換壳澳。

開關(guān)按鈕

（1）使用。開關(guān)按鈕最常用來(lái)標(biāo)示On/Off狀態(tài)茫经。

開關(guān)按鈕同樣能夠用在一組關(guān)聯(lián)的選項(xiàng)上巷波，但此時(shí)你的設(shè)計(jì)應(yīng)該向用戶傳達(dá)當(dāng)前的開關(guān)按鈕是這一組中的一部分。另外卸伞，開關(guān)按鈕要求：

① 一個(gè)開關(guān)按鈕組至少由三個(gè)開關(guān)按鈕組成抹镊；

② 使用純文本、圖標(biāo)或者兩者結(jié)合作為按鈕荤傲；

有一個(gè)選項(xiàng)被選中的開關(guān)按鈕組

使用圖標(biāo)對(duì)于開關(guān)按鈕來(lái)說(shuō)非常合適垮耳，它能夠友好的標(biāo)示出按鈕究竟是選中還是未被選中，就像向一個(gè)條目中加入或移除一顆星一樣遂黍，它們主要用在應(yīng)用程序中的標(biāo)簽欄终佛、工具欄、操作按鈕或具有開關(guān)意義的選項(xiàng)中雾家。

對(duì)你的按鈕選用正確的圖標(biāo)是非常重要的查蓉，我先前在這篇文章表達(dá)了該主題。

（3）實(shí)例榜贴。iOS在設(shè)置部分使用到了開關(guān)按鈕豌研。

4妹田、虛擬按鈕

虛擬按鈕是指具備基本的按鈕形狀（如直角形）的透明按鈕，但有細(xì)實(shí)線的邊框鹃共，并在邊框內(nèi)部包含純文本鬼佣。

（1）使用。使用虛擬按鈕作為一個(gè)主要的CTA按鈕通常不是一個(gè)好想法霜浴。在 Bootstrap 一例中晶衷，你可以看到虛擬按鈕“Download Bootstrap”看上去跟它們的logo使用了同一種樣式，其結(jié)果便是可能造成用戶疑惑阴孟。

虛擬按鈕最適合用于相對(duì)次要一些的操作晌纫，因?yàn)樗鼰o(wú)法（或者說(shuō)也不應(yīng)該）跟主要的 CTA 按鈕比較重要性。理想狀態(tài)永丝，你一般希望用戶看到你的主要 CTA 按鈕锹漱，如果不相關(guān)，用戶也可以跳至次要按鈕上慕嚷。

（2）行為哥牍。

（3）實(shí)例。Airbnb的網(wǎng)站上有“Become a Host”的虛擬按鈕喝检。

5嗅辣、懸浮按鈕

懸浮按鈕是 Google Material Design 中的一部分，是一種點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散效果的圓形按鈕 挠说。

（1）使用澡谭。懸浮按鈕用在一個(gè)促進(jìn)操作（promoted action）上。

（2）行為损俭。懸浮按鈕的特性在于译暂，它是一個(gè)圓形的漂浮在界面之上的、擁有一系列特殊動(dòng)作的按鈕撩炊，這些動(dòng)作通常和變換、啟動(dòng)崎脉、以及它本身的轉(zhuǎn)換錨點(diǎn)相關(guān)拧咳。

四、如何選擇按鈕類型

選擇按鈕類型應(yīng)該基于主按鈕囚灼、屏幕上容器的數(shù)量以及屏幕的整體布局來(lái)進(jìn)行選擇骆膝。

Google Material Design 建議采用的選擇按鈕類型

屏幕Z軸深度

1、審視功能：它是不是非常重要而且應(yīng)用廣泛到需要用上懸浮響應(yīng)按鈕灶体？

2阅签、考慮容器和層次：基于放置按鈕的容器以及屏幕上層次堆疊的數(shù)量來(lái)選擇使用何種類型。

3蝎抽、檢查布局：一個(gè)容器應(yīng)該只使用一種類型的按鈕政钟。 只在比較特殊的情況下（比如需要強(qiáng)調(diào)一個(gè)浮起的效果）才應(yīng)該混合使用多種類型的按鈕。

五、按鈕狀態(tài)

按鈕狀態(tài)并不太關(guān)心用戶看到按鈕的初始態(tài)樣式如何养交，而是要考慮當(dāng)用戶將焦點(diǎn)懸停按鈕之上（或其他操作）精算，未發(fā)現(xiàn)任何改變時(shí)系統(tǒng)應(yīng)如何處理，因?yàn)槊鎸?duì)這種結(jié)果碎连，用戶可能就會(huì)產(chǎn)生疑惑：“它究竟是不是一個(gè)按鈕呢灰羽？看樣子我現(xiàn)在還必須點(diǎn)一下它，看看這個(gè)長(zhǎng)得像按鈕的元素是不是真的是按鈕鱼辙，哎......”

按鈕并是不狀態(tài)如一的廉嚼。相反，一個(gè)按鈕通常是有多種狀態(tài)的倒戏，因此怠噪，如何通過(guò)一個(gè)視覺反饋向用戶傳達(dá)出按鈕當(dāng)前的狀態(tài)，這是非常重要的一項(xiàng)任務(wù)峭梳。

1舰绘、正常狀態(tài)

該狀態(tài)的重要原則——按鈕在正常狀態(tài)下應(yīng)該看上去確實(shí)像一個(gè)按鈕。Windows8是一個(gè)極好的反例——在設(shè)置菜單下葱椭，用戶很難直觀地識(shí)別出這些元素究竟可不可以點(diǎn)擊捂寿。

Windows8 中正常狀態(tài)下的按鈕

2、獲得焦點(diǎn)狀態(tài)

當(dāng)用戶焦點(diǎn)懸停放置按鈕之上時(shí)孵运，應(yīng)該給用戶一個(gè)好的視覺反饋告訴其按鈕的狀態(tài)變化秦陋，這樣用戶能立刻意識(shí)到自己的操作生效，他們也期望這種視覺反饋的效果本身能夠令人愉悅治笨。

3驳概、按下狀態(tài)

通過(guò)給不同元素賦予生氣（添加創(chuàng)新且有意義的動(dòng)畫效果），你可以一定程度上愉悅用戶旷赖。

4顺又、非活躍狀態(tài)（無(wú)效狀態(tài)）

針對(duì)這種狀態(tài)的按鈕，通常有兩種處理方法——要么將按鈕隱藏起來(lái)要么顯示為禁用狀態(tài)等孵。

（1）隱藏按鈕的理由：

? ① 清晰明了稚照。只需要向用戶顯示那些需要用到/可用的按鈕。

? ② 節(jié)省空間俯萌。允許用戶在不同的操作下使用不同的控件果录，尤其當(dāng)有很多按鈕時(shí)特別方便。例如咐熙，Gmail這種做法：

Gmail 隱藏掉了用不到的按鈕

觸發(fā)相關(guān)動(dòng)作后再顯示出原本隱藏的按鈕

（1）禁用按鈕的理由：

? ① 可以顯示出可能的動(dòng)作弱恒。即使當(dāng)前按鈕不可用，用戶也能夠意識(shí)到按鈕可能有用棋恼。你甚至可以有一個(gè)工具提示來(lái)解釋使用的條件返弹。

? ② 控件位置清晰可見锈玉。用戶可以搞清楚界面控件和按鈕都在哪里（增強(qiáng)用戶的可控性）。

禁止?fàn)顟B(tài)的按鈕

六琉苇、結(jié)論

按鈕是用戶使用你的網(wǎng)站/程序的介質(zhì)之一嘲玫，你希望用戶通過(guò)點(diǎn)擊相應(yīng)的按鈕從而能夠順著你的想法繼續(xù)向下走。如果你使用合理的按鈕類型并扇、擺放位置并精心設(shè)計(jì)按鈕的狀態(tài)變化去团，這自然而然能夠創(chuàng)造一個(gè)流暢的體驗(yàn)過(guò)程。而如果你的設(shè)計(jì)糟糕穷蛹，導(dǎo)致用戶甚至不能找到正確的按鈕土陪，那最好的結(jié)果可能就是用戶被打斷而已（需要花時(shí)間整明白），最壞的則可能是的用戶產(chǎn)生誤操作肴熏、滿心抱怨甚至是放棄你的網(wǎng)站/程序鬼雀。

按鈕的用戶體驗(yàn)設(shè)計(jì)通常關(guān)注于識(shí)別性和清晰度。若將你的網(wǎng)站/應(yīng)用程序視作是跟一個(gè)忙碌的用戶進(jìn)行人機(jī)對(duì)話的渠道蛙吏，你應(yīng)該意識(shí)到按鈕在這個(gè)過(guò)程中發(fā)揮著至關(guān)重要的作用了吧源哩。

譯自：https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.tzz6rcmju