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

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

一、運(yùn)用按鈕的好實(shí)例

1、使按鈕看起來確實(shí)像按鈕

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

Groupon 登錄頁面杰出首要按鈕

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

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

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

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

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

3、要不要運(yùn)用標(biāo)簽

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

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

4、做法呼喚按鈕(CTA)

應(yīng)當(dāng)使最首要的按鈕(格外是做法呼喚類按鈕)看起來確實(shí)是最首要的。

二、按鈕形狀

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

圓角矩形按鈕

你當(dāng)然也可以更具立異，運(yùn)用別的比方圓形、三角形或許自定義形狀的按鈕，可是請緊記挑選后者也許會(huì)更有風(fēng)險(xiǎn)。

懸浮按鈕是運(yùn)用自定義形狀按鈕的一個(gè)極好的比方

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

三、按鈕類型和做法

1、起浮按鈕

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

(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)簡略明晰——它們最小化用戶從內(nèi)容中分神的也許性。

扁平按鈕

(1)運(yùn)用。

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

Android 對話框中的扁平按鈕

② 在工具欄中：

工具欄中的扁平按鈕

作為有必定內(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)按鈕最常用來標(biāo)示On/Off狀況。

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

① 一個(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)按鈕來說十分適宜，它可以友好的標(biāo)示出按鈕終究是選中仍是未被選中，就像向一個(gè)條目中參加或移除一顆星相同，它們首要用在運(yùn)用程序中的標(biāo)簽欄、工具欄、操作按鈕或具有開關(guān)含義的選項(xiàng)中。

對你的按鈕選用準(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)用了同一種款式，其成果便是也許造成用戶疑問。

虛擬按鈕最適合用于相對非必須一些的操作，由于它無法(或許說也不應(yīng)當(dāng))跟首要的 CTA 按鈕對比首要性。理想狀況，你一般期望用戶看到你的首要 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ī)劃來進(jìn)行挑選。

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

屏幕Z軸深度

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

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

3、查看規(guī)劃：一個(gè)容器應(yīng)當(dāng)只運(yùn)用一種類型的按鈕。 只在對比格外的狀況下(比方需求著重一個(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ā)生疑問：“它終究是不是一個(gè)按鈕呢?看樣子我如今還必須點(diǎn)一下它，看看這個(gè)長得像按鈕的元素是不是真的是按鈕，哎......”

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

1、正常狀況

該狀況的首要準(zhǔn)則——按鈕在正常狀況下應(yīng)當(dāng)看上去確實(shí)像一個(gè)按鈕。Windows8是一個(gè)極好的反例——在設(shè)置菜單下，用戶很難直觀地識別出這些元素終究可不可以點(diǎn)擊。

Windows8 中正常狀況下的按鈕

2、取得焦點(diǎn)狀況

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

3、按下狀況

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

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

對于這種狀況的按鈕，一般有兩種處理辦法——要么將按鈕躲藏起來要么顯現(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í)按鈕不可用，用戶也可以意識到按鈕也許有用。你乃至可以有一個(gè)工具提示來解說運(yùn)用的條件。

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

禁止?fàn)顩r的按鈕

六、結(jié)論

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

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

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

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

廣告

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