創(chuàng)新互聯(lián)幫您總結了按鈕使用實例、類型和狀態(tài)：

按鈕是一個一般的、平時交互中都也許碰到的根本元素。但對創(chuàng)立一個流通的交互體會進程來講，按鈕則是一個至關首要的元素，因此，投入必定精力到該元素的規(guī)劃上是十分有含義的。別的，咱們也為咱們梳理出元素的根本類別跟狀況——都是為了創(chuàng)立出高效的按鈕進而提高用戶體會你所必須了解到的根本信息。

一、運用按鈕的好實例

1、使按鈕看起來確實像按鈕

細心想想一個按鈕終究是怎么經(jīng)過良好的規(guī)劃向用戶傳達其功用可見性的。用戶又是怎么將一個元素了解成按鈕的?最簡略的辦法就是運用形狀和色彩讓元素看起來像一個按鈕。

Groupon 登錄頁面杰出首要按鈕

別的，你需求仔細思考下規(guī)劃中涉及到的元素的可接觸尺度。就協(xié)助用戶從一堆元素中識別出按鈕一事，按鈕自身的尺度巨細也表現(xiàn)著首要的效果。其實各種平臺中的規(guī)劃指南中也都指出了其請求的最小規(guī)劃尺度。而來自 MIT Touch Lab 的一項研討表明，手指的均勻接觸巨細在10-14mm之間，指尖的規(guī)模則在8-10mm，這就使得最適宜的尺度下限應當在10mm x 10mm擺布。

2、留意按鈕的方位和次序

應當把按鈕放在用戶簡單發(fā)現(xiàn)或預期看到的方位。例如，iOS UI guidelines 中的實例：

按鈕的擺放次序也十分首要，格外對一雙成對的(比方“前一個”和“下一個”)選項按鈕。必定要保證最首要的按鈕在視覺規(guī)劃上更為杰出。

在下面的示例中，咱們運用赤色標示出也許代表毀滅性操作的按鈕。請留意首要按鈕不光在色彩和比照度上愈加杰出，其方位也放在了對話框的右側。

3、要不要運用標簽

標簽用來通知用戶操作按鈕后會發(fā)作什么。

相同是上面的示例，假如沒有運用適宜的文本標簽，狀況如下，瞧瞧，你感覺到這其間的不相同了嗎?

4、做法呼喚按鈕(CTA)

應當使最首要的按鈕(格外是做法呼喚類按鈕)看起來確實是最首要的。

二、按鈕形狀

一般狀況下，你會依據(jù)網(wǎng)站/運用程序的類型將按鈕規(guī)劃成直角或圓角型。一些研討指出，圓角按鈕可以提高信息的表現(xiàn)力并招引用戶的留意力到元素的基地處(文本有些)。

圓角矩形按鈕

你當然也可以更具立異，運用別的比方圓形、三角形或許自定義形狀的按鈕，可是請緊記挑選后者也許會更有風險。

懸浮按鈕是運用自定義形狀按鈕的一個極好的比方

請保證貫穿整個運用程序的控件保持良好的一致性，好讓用戶可以輕易的識別出你的界面元素并可以分辨出終究哪些是按鈕。

三、按鈕類型和做法

1、起浮按鈕

起浮按鈕一般成直角型，經(jīng)過必定的暗影表明其可點擊性。對比與扁平的規(guī)劃，其增加了全體尺度，在對比擁堵的界面上更明晰可見。

(1)運用。作為內(nèi)聯(lián)元素運用，在一個包括多樣性內(nèi)容的規(guī)劃里邊著重動作。

(2)做法。按下后起浮按鈕稍微彈起并填充色彩。

(3)實例。起浮按鈕要比扁平按鈕更為杰出，實例如下：

2、扁平按鈕

按下時，扁平按鈕并不會彈起，但相同會填充必定色彩。扁平按鈕的首要優(yōu)點簡略明晰——它們最小化用戶從內(nèi)容中分神的也許性。

扁平按鈕

(1)運用。

① 在對話框中，一致按鈕自身跟對話框內(nèi)容的款式：

Android 對話框中的扁平按鈕

② 在工具欄中：

工具欄中的扁平按鈕

作為有必定內(nèi)邊距的內(nèi)聯(lián)元素，用戶可以輕易地留意到它們。

(2)做法。

(3)實例。

3、開關按鈕

一個開關按鈕答運用戶在兩個(或多個)狀況之間切換。

開關按鈕

(1)運用。開關按鈕最常用來標示On/Off狀況。

開關按鈕相同可以用在一組有關的選項上，但此刻你的規(guī)劃應當向用戶傳達當時的開關按鈕是這一組中的一有些。別的，開關按鈕請求：

① 一個開關按鈕組最少由三個開關按鈕構成;

② 運用純文本、圖標或許兩者聯(lián)系作為按鈕;

有一個選項被選中的開關按鈕組

運用圖標關于開關按鈕來說十分適宜，它可以友好的標示出按鈕終究是選中仍是未被選中，就像向一個條目中參加或移除一顆星相同，它們首要用在運用程序中的標簽欄、工具欄、操作按鈕或具有開關含義的選項中。

對你的按鈕選用準確的圖標是十分首要的，我從前在這篇文章表達了該主題。

(3)實例。iOS在設置有些運用到了開關按鈕。

4、虛擬按鈕

虛擬按鈕是指具有根本的按鈕形狀(如直角形)的透明按鈕，但有細實線的邊框，并在邊框內(nèi)部包括純文本。

(1)運用。運用虛擬按鈕作為一個首要的CTA按鈕一般不是一個好主意。在 Bootstrap 一例中，你可以看到虛擬按鈕“Download Bootstrap”看上去跟它們的logo運用了同一種款式，其成果便是也許造成用戶疑問。

虛擬按鈕最適合用于相對非必須一些的操作，由于它無法(或許說也不應當)跟首要的 CTA 按鈕對比首要性。理想狀況，你一般期望用戶看到你的首要 CTA 按鈕，假如不有關，用戶也可以跳至非必須按鈕上。

(2)做法。

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

5、懸浮按鈕

懸浮按鈕是 Google Material Design 中的一有些，是一種點擊后會發(fā)生墨水分散效果的圓形按鈕 。

(1)運用。懸浮按鈕用在一個促進操作(promoted action)上。

(2)做法。懸浮按鈕的特性在于，它是一個圓形的漂浮在界面之上的、具有一系列格外動作的按鈕，這些動作一般和改換、發(fā)動、以及它自身的變換錨點有關。

四、怎么挑選按鈕類型

挑選按鈕類型應當根據(jù)主按鈕、屏幕上容器的數(shù)量以及屏幕的全體規(guī)劃來進行挑選。

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

屏幕Z軸深度

1、審視功用：它是不是十分首要并且運用廣泛到需求用上懸浮響應按鈕?

2、思考容器和層次：根據(jù)放置按鈕的容器以及屏幕上層次堆疊的數(shù)量來挑選運用何種類型。

3、查看規(guī)劃：一個容器應當只運用一種類型的按鈕。 只在對比格外的狀況下(比方需求著重一個浮起的效果)才應當混合運用多種類型的按鈕。

五、按鈕狀況

按鈕狀況并不太關心用戶看到按鈕的初始態(tài)款式怎么，而是要思考當用戶將焦點懸停按鈕之上(或別的操作)，未發(fā)現(xiàn)任何改動時體系應怎么處理，由于面臨這種成果，用戶也許就會發(fā)生疑問：“它終究是不是一個按鈕呢?看樣子我如今還必須點一下它，看看這個長得像按鈕的元素是不是真的是按鈕，哎......”

按鈕并是不狀況如一的。相反，一個按鈕一般是有多種狀況的，因此，怎么經(jīng)過一個視覺反應向用戶傳達出按鈕當時的狀況，這是十分首要的一項任務。

1、正常狀況

該狀況的首要準則——按鈕在正常狀況下應當看上去確實像一個按鈕。Windows8是一個極好的反例——在設置菜單下，用戶很難直觀地識別出這些元素終究可不可以點擊。

Windows8 中正常狀況下的按鈕

2、取得焦點狀況

當用戶焦點懸停放置按鈕之上時，應當給用戶一個好的視覺反應通知其按鈕的狀況改變，這么用戶能馬上意識到自個的操作收效，他們也期望這種視覺反應的效果自身可以令人愉悅。

3、按下狀況

經(jīng)過給不相同元素賦予生氣(增加立異且有含義的動畫效果)，你可以必定程度上愉悅用戶。

4、非活潑狀況(無效狀況)

對于這種狀況的按鈕，一般有兩種處理辦法——要么將按鈕躲藏起來要么顯現(xiàn)為禁用狀況。

(1)躲藏按鈕的理由：

① 明晰明晰。只需求向用戶顯現(xiàn)那些需求用到/可用的按鈕。

② 節(jié)省空間。答運用戶在不相同的操作下運用不相同的控件，格外當有很多按鈕時格外方便。例如，Gmail這種做法：

Gmail 躲藏掉了用不到的按鈕

觸發(fā)有關動作后再顯現(xiàn)出原本躲藏的按鈕

(1)禁用按鈕的理由：

① 可以顯現(xiàn)出也許的動作。即便當時按鈕不可用，用戶也可以意識到按鈕也許有用。你乃至可以有一個工具提示來解說運用的條件。

② 控件方位明晰可見。用戶可以搞清楚界面控件和按鈕都在哪里(增強用戶的可控性)。

禁止狀況的按鈕

六、結論

按鈕是用戶運用你的網(wǎng)站/程序的介質(zhì)之一，你期望用戶經(jīng)過點擊相應的按鈕從而可以順著你的主意持續(xù)向下走。假如你運用合理的按鈕類型、擺放方位并精心規(guī)劃按鈕的狀況改變，這自然而然可以發(fā)明一個流通的體會進程。而假如你的規(guī)劃差勁，致使用戶乃至不能找到準確的按鈕，那最好的成果也許就是用戶被打斷罷了(需求花時間整理解)，最壞的則也許是的用戶發(fā)生誤操作、滿心抱怨乃至是拋棄你的網(wǎng)站/程序。

按鈕的用戶體會規(guī)劃一般重視于識別性和明晰度。若將你的網(wǎng)站/運用程序視作是跟一個繁忙的用戶進行人機對話的途徑，你應當意識到按鈕在這個進程中表現(xiàn)著至關首要的效果了吧。

網(wǎng)站名稱：「用戶體驗設計」按鈕使用實例、類型和狀態(tài)
瀏覽地址：http://redsoil1982.com.cn/news44/161794.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有用戶體驗等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)