網(wǎng)站設計中按鈕使用實(shí)例、類(lèi)型和狀態(tài)發(fā)布者：本站     時(shí)間：2022-05-08 10:05:53

按鈕是一個(gè)普通的、日常交互中都可能碰到的基本元素。但對創(chuàng )建一個(gè)流暢的交互體驗過(guò)程來(lái)講，按鈕則是一個(gè)至關(guān)重要的元素，因此，投入一定精力到該元素的設計上是非常有意義的。另外，我們也為大家梳理出元素的基本類(lèi)別跟狀態(tài)——都是為了創(chuàng )建出高效的按鈕進(jìn)而提升用戶(hù)體驗你所必須了解到的基本信息。

一、使用按鈕的最佳實(shí)例
1、使按鈕看起來(lái)確實(shí)像按鈕
仔細想想一個(gè)按鈕究竟是如何通過(guò)良好的設計向用戶(hù)傳達其功能可見(jiàn)性的。用戶(hù)又是怎樣將一個(gè)元素理解成按鈕的？最簡(jiǎn)單的辦法就是使用形狀和顏色讓元素看起來(lái)像一個(gè)按鈕。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

2、注意按鈕的位置和順序
應該把按鈕放在用戶(hù)容易發(fā)現或預期看到的位置。例如，iOS UI guidelines 中的實(shí)例：

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

按鈕的擺放順序也非常重要，尤其對一雙成對的（比如“前一個(gè)”和“下一個(gè)”）選項按鈕。一定要確保最重要的按鈕在視覺(jué)設計上更為突出。

在下面的示例中，我們使用紅色標示出可能代表毀滅性操作的按鈕。請注意重要按鈕不光在顏色和對比度上更加突出，其位置也放在了對話(huà)框的右側。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

3、要不要使用標簽
標簽用來(lái)告訴用戶(hù)操作按鈕后會(huì )發(fā)生什么。

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

4、行為召喚按鈕（CTA）
應該使最重要的按鈕(尤其是行為召喚類(lèi)按鈕)看起來(lái)確實(shí)是最重要的。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

二、按鈕形狀
通常情況下，你會(huì )根據網(wǎng)站/應用程序的類(lèi)型將按鈕設計成直角或圓角型。一些研究指出，圓角按鈕能夠提升信息的表現力并吸引用戶(hù)的注意力到元素的中心處（文本部分）。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

圓角矩形按鈕

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

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

三、按鈕類(lèi)型和行為
1、浮動(dòng)按鈕
浮動(dòng)按鈕通常成直角型，通過(guò)一定的陰影表明其可點(diǎn)擊性。相比與扁平的設計，其增加了整體尺寸，在比較擁擠的界面上更清晰可見(jiàn)。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

（1）使用。作為內聯(lián)元素使用，在一個(gè)包含多樣性?xún)热莸牟季掷锩鎻娬{動(dòng)作。

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

扁平按鈕

（1）使用。

  ① 在對話(huà)框中，統一按鈕本身跟對話(huà)框內容的樣式：

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

Android 對話(huà)框中的扁平按鈕
 
② 在工具欄中：

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

工具欄中的扁平按鈕

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

（2）行為。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

（3）實(shí)例。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

開(kāi)關(guān)按鈕

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

開(kāi)關(guān)按鈕同樣能夠用在一組關(guān)聯(lián)的選項上，但此時(shí)你的設計應該向用戶(hù)傳達當前的開(kāi)關(guān)按鈕是這一組中的一部分。另外，開(kāi)關(guān)按鈕要求：

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

② 使用純文本、圖標或者兩者結合作為按鈕；

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

對你的按鈕選用正確的圖標是非常重要的，我先前在這篇文章表達了該主題。

（3）實(shí)例。iOS在設置部分使用到了開(kāi)關(guān)按鈕。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

4、虛擬按鈕
虛擬按鈕是指具備基本的按鈕形狀（如直角形）的透明按鈕，但有細實(shí)線(xiàn)的邊框，并在邊框內部包含純文本。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

虛擬按鈕最適合用于相對次要一些的操作，因為它無(wú)法（或者說(shuō)也不應該）跟主要的 CTA 按鈕比較重要性。理想狀態(tài)，你一般希望用戶(hù)看到你的主要 CTA 按鈕，如果不相關(guān)，用戶(hù)也可以跳至次要按鈕上。

（2）行為。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

5、懸浮按鈕
懸浮按鈕是 Google Material Design 中的一部分，是一種點(diǎn)擊后會(huì )產(chǎn)生墨水擴散效果的圓形按鈕 。

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

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

四、如何選擇按鈕類(lèi)型
選擇按鈕類(lèi)型應該基于主按鈕、屏幕上容器的數量以及屏幕的整體布局來(lái)進(jìn)行選擇。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

Google Material Design 建議采用的選擇按鈕類(lèi)型

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

屏幕Z軸深度

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

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

3、檢查布局：一個(gè)容器應該只使用一種類(lèi)型的按鈕。 只在比較特殊的情況下（比如需要強調一個(gè)浮起的效果）才應該混合使用多種類(lèi)型的按鈕。

五、按鈕狀態(tài)
按鈕狀態(tài)并不太關(guān)心用戶(hù)看到按鈕的初始態(tài)樣式如何，而是要考慮當用戶(hù)將焦點(diǎn)懸停按鈕之上（或其他操作），未發(fā)現任何改變時(shí)系統應如何處理，因為面對這種結果，用戶(hù)可能就會(huì )產(chǎn)生疑惑：“它究竟是不是一個(gè)按鈕呢？看樣子我現在還必須點(diǎn)一下它，看看這個(gè)長(cháng)得像按鈕的元素是不是真的是按鈕，哎......”

按鈕并是不狀態(tài)如一的。相反，一個(gè)按鈕通常是有多種狀態(tài)的，因此，如何通過(guò)一個(gè)視覺(jué)反饋向用戶(hù)傳達出按鈕當前的狀態(tài)，這是非常重要的一項任務(wù)。

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

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

2、獲得焦點(diǎn)狀態(tài)
當用戶(hù)焦點(diǎn)懸停放置按鈕之上時(shí)，應該給用戶(hù)一個(gè)好的視覺(jué)反饋告訴其按鈕的狀態(tài)變化，這樣用戶(hù)能立刻意識到自己的操作生效，他們也期望這種視覺(jué)反饋的效果本身能夠令人愉悅。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

3、按下?tīng)顟B(tài)
通過(guò)給不同元素賦予生氣（添加創(chuàng )新且有意義的動(dòng)畫(huà)效果），你可以一定程度上愉悅用戶(hù)。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

4、非活躍狀態(tài)（無(wú)效狀態(tài)）
針對這種狀態(tài)的按鈕，通常有兩種處理方法——要么將按鈕隱藏起來(lái)要么顯示為禁用狀態(tài)。

（1）隱藏按鈕的理由：

  ① 清晰明了。只需要向用戶(hù)顯示那些需要用到/可用的按鈕。

  ② 節省空間。允許用戶(hù)在不同的操作下使用不同的控件，尤其當有很多按鈕時(shí)特別方便。例如，Gmail這種做法：

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

Gmail 隱藏掉了用不到的按鈕
UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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

（1）禁用按鈕的理由：

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

  ② 控件位置清晰可見(jiàn)。用戶(hù)可以搞清楚界面控件和按鈕都在哪里（增強用戶(hù)的可控性）。

UX設計: 按鈕使用實(shí)例、類(lèi)型和狀態(tài)

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