2018-11-23 濤濤
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
按鈕在UI設(shè)計(jì)中是一種常用的UI控件，在界面中作為主要的行動(dòng)點(diǎn)，引導(dǎo)用戶(hù)進(jìn)行相應(yīng)的操作，它在用戶(hù)和產(chǎn)品的交互中承擔(dān)著重要的作用。
按鈕設(shè)計(jì)看似簡(jiǎn)單，但是如果想要更好的交互體驗(yàn)，引導(dǎo)用戶(hù)進(jìn)行相應(yīng)的操作，提升產(chǎn)品的轉(zhuǎn)化率這仍是我們需要研究的問(wèn)題。下面小編將從按鈕功能類(lèi)型和設(shè)計(jì)要點(diǎn)兩個(gè)方面進(jìn)行分析。
一、按鈕功能類(lèi)型
按鈕的功能類(lèi)型往往決定了一個(gè)按鈕的設(shè)計(jì)方式，是需要強(qiáng)調(diào)還是需要弱化；文案是需要強(qiáng)引導(dǎo)，還是直接闡述功能；按鈕上是放圖標(biāo)還是不放圖標(biāo)等。按鈕根據(jù)功能的不同，可以分為不同的類(lèi)型，主要有行為召喚按鈕、表格按鈕、標(biāo)簽按鈕、命令按鈕、懸浮按鈕、開(kāi)關(guān)按鈕這六大類(lèi)型。
1.行為召喚按鈕
行為召喚（CTA）按鈕其目的是誘使用戶(hù)采取某些操作， 從而提高產(chǎn)品的轉(zhuǎn)行率。簡(jiǎn)單來(lái)說(shuō)就是通過(guò)設(shè)計(jì)誘導(dǎo)或激勵(lì)用戶(hù)點(diǎn)擊按鈕，例如立即購(gòu)買(mǎi)、訂閱關(guān)注、利益誘導(dǎo)、文字誘導(dǎo)等。
1）誘導(dǎo)購(gòu)買(mǎi)
當(dāng)行為召喚的目的是誘導(dǎo)購(gòu)買(mǎi)時(shí)，按鈕的設(shè)計(jì)不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點(diǎn)擊，讓用戶(hù)進(jìn)來(lái)第一眼就能知道該按鈕的用途。如下圖所示：
以美團(tuán)外賣(mài)為例，該按鈕的顏色采用黑黃對(duì)比、形狀采用具有親和力的圓角，在樣式上加入投影同時(shí)加入送餐員的元素，配上小紅點(diǎn)，能夠清晰的給用戶(hù)傳遞出可點(diǎn)擊部分有去結(jié)算、送餐員。另外加入價(jià)格誘導(dǎo)，讓你可直觀看到優(yōu)惠了多少錢(qián)，促使你進(jìn)一步操作。
以淘寶詳情為例，該按鈕是一個(gè)組合按鈕，由加入購(gòu)物車(chē)和馬上搶以及店鋪、客服、收藏等組成，作為行為召喚按鈕我們可以明確的看到，不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2）訂閱關(guān)注
當(dāng)行為召喚的目的是訂閱關(guān)注時(shí)，其重要程度相比誘導(dǎo)購(gòu)買(mǎi)低很多，但是在設(shè)計(jì)時(shí)我們?nèi)匀恍枰紤]一個(gè)問(wèn)題，這個(gè)問(wèn)題可直接決定該按鈕大小、樣式等，這個(gè)問(wèn)題就是需要根據(jù)產(chǎn)品目的判斷是誘導(dǎo)用戶(hù)訂閱關(guān)注重要還是讓用戶(hù)閱讀內(nèi)容重要。如下圖所示：
當(dāng)內(nèi)容重要時(shí)，按鈕的設(shè)計(jì)需要弱化處理，以?xún)?yōu)酷視頻的發(fā)現(xiàn)頁(yè)和星球頁(yè)為例，這兩個(gè)頁(yè)面很明顯是以?xún)?nèi)容為主的界面，在設(shè)計(jì)時(shí)直接弱化了按鈕形式，讓按鈕和整個(gè)界面相融合，但是按鈕設(shè)計(jì)的原則是讓其看上去像按鈕，因此當(dāng)按鈕只是文字時(shí)可以加圖標(biāo)進(jìn)行引導(dǎo)比如優(yōu)酷視頻發(fā)現(xiàn)頁(yè)，也可以加入弱底紋進(jìn)行引導(dǎo)還能讓界面看上去整潔，比如優(yōu)酷視頻星球頁(yè)面。
當(dāng)訂閱關(guān)注重要時(shí)，按鈕的設(shè)計(jì)需要強(qiáng)化處理，以橘子娛樂(lè)和土豆視頻為例，橘子娛樂(lè)采用粗描邊漸變按鈕，同時(shí)加入圖標(biāo)進(jìn)行引導(dǎo)，具有較強(qiáng)的視覺(jué)引導(dǎo)作用，很容易喚起用戶(hù)的關(guān)注。土豆視頻采用黃色填充加圖標(biāo)引導(dǎo)，在視覺(jué)上和產(chǎn)品內(nèi)容形成強(qiáng)烈對(duì)比，明顯的以關(guān)注為主的界面。
3）利益誘導(dǎo)
當(dāng)行為召喚的目的是利益誘導(dǎo)時(shí)，該按鈕設(shè)計(jì)根據(jù)重要程度較高，因此在設(shè)計(jì)時(shí)可以考慮顏色、形狀、加入圖標(biāo)、誘導(dǎo)文字等設(shè)計(jì)方法。如下圖所示：
以大眾點(diǎn)評(píng)為例，其領(lǐng)獎(jiǎng)按鈕明顯比賺積分的層級(jí)高，因此為了突出領(lǐng)獎(jiǎng)按鈕采用了色塊設(shè)計(jì)的樣式，同時(shí)賺積分按鈕采用描邊設(shè)計(jì)進(jìn)行弱化處理。
以騰訊doki為例，其打榜頁(yè)面沖榜的重要層級(jí)較高，因此在設(shè)計(jì)時(shí)不僅采用了色塊、加入動(dòng)效圖標(biāo)、同時(shí)還加入了誘導(dǎo)文字，讓按鈕更明顯同時(shí)誘導(dǎo)用戶(hù)點(diǎn)擊，其他去瀏覽按鈕則采用描邊樣式弱化處理。
4）文字誘導(dǎo)
文字誘導(dǎo)簡(jiǎn)單來(lái)說(shuō)就是通過(guò)文字，誘導(dǎo)用戶(hù)進(jìn)行下一步操作，多用于空頁(yè)面、活動(dòng)頁(yè)面中，因此在設(shè)計(jì)時(shí)采用簡(jiǎn)單的色塊填充即可，如果該頁(yè)面為活動(dòng)頁(yè)面也可增加漸變或投影樣式，讓按鈕更有空間感，進(jìn)而突出按鈕。如下圖所示：
以得到為例，當(dāng)你還沒(méi)有學(xué)習(xí)計(jì)劃時(shí)，它會(huì)對(duì)你進(jìn)行提示“開(kāi)始制定學(xué)習(xí)計(jì)劃”，同時(shí)其按鈕采用重要程度較高的色塊+投影的方式，誘導(dǎo)用戶(hù)點(diǎn)擊。
以大眾點(diǎn)評(píng)為例，當(dāng)你還沒(méi)有攻略時(shí)，它會(huì)對(duì)你進(jìn)行提示“我也要?jiǎng)?chuàng)建攻略”，同時(shí)其按鈕采用漸變填充的方式，誘導(dǎo)用戶(hù)點(diǎn)擊。
2.懸浮按鈕
懸按鈕浮是 Android 應(yīng)用中最常見(jiàn)的一個(gè)控件。不過(guò)隨著Android和iOS規(guī)范的不斷融合，在iOS中也經(jīng)常會(huì)看到各種各樣的懸浮按鈕。在設(shè)計(jì)上懸浮按鈕應(yīng)該采用顯眼的顏色，以抓住用戶(hù)的注意力。同時(shí)它應(yīng)該是積極正向的交互，比如創(chuàng)建、分享、探索等，同時(shí)并不是所有頁(yè)面都需要加懸浮按鈕。如下圖所示：
以UC瀏覽器為例，懸浮按鈕在訂閱頁(yè)面的右下角出現(xiàn)，將按鈕和界面結(jié)合很容易看出創(chuàng)建內(nèi)容的意思，同時(shí)點(diǎn)擊按鈕還可呼出圖文、視頻等操作圖標(biāo)。
3.標(biāo)簽按鈕
標(biāo)簽按鈕往往呈多個(gè)出現(xiàn)，多使用在二級(jí)導(dǎo)航或條件篩選下面；以及表單頁(yè)面作為切換條件選中。因此在設(shè)計(jì)樣式上有選中狀態(tài)和默認(rèn)狀態(tài)，同時(shí)其重要程度較低，在設(shè)計(jì)時(shí)不能喧賓奪主，需要弱化處理。如下圖所示：
以支付寶為例，它主要用在投保的表單頁(yè)面，其主要目的就是一個(gè)切換條件，重要程度遠(yuǎn)不及我要投保按鈕，因此在設(shè)計(jì)時(shí)默認(rèn)用的描邊處理；選中采用淡淡的色塊。
以轉(zhuǎn)轉(zhuǎn)為例，它主要用在導(dǎo)航下方，其主要目的也是切換條件，用戶(hù)主要操作是看下方篩選出的內(nèi)容，因此在設(shè)計(jì)時(shí)也進(jìn)行弱化處理。
4.表格按鈕
表格按鈕也就是由一個(gè)白色網(wǎng)格加文字組成的按鈕，從視覺(jué)上看和頁(yè)面融為一體，特別不突出。因此多用在個(gè)人中心中不太重要信息或者不想讓用戶(hù)操作的退出登錄界面中。如下圖所示：
以愛(ài)奇藝為例，在我的界面中，關(guān)于我們和退出登錄都是用的表格按鈕，由于關(guān)于我們是不太重要信息，退出登錄又是不想讓用戶(hù)操作的內(nèi)容，因此采用表格按鈕最為合適。
5.命令按鈕
命令按鈕也就是該按鈕具有明確的指令，多出現(xiàn)在彈框中，通常會(huì)有一個(gè)文字或2個(gè)文字出現(xiàn)的情況。其要求是文字語(yǔ)義要明確，盡量不要用確定、好的、要等詞匯，同時(shí)根據(jù)用戶(hù)右手操作習(xí)慣居多，因此將重要的按鈕放在右側(cè)。如下圖所示：
以京東金融為例，左圖是京東金融退出的二次確認(rèn)頁(yè)面，右圖是我調(diào)整文字之后的頁(yè)面。我們說(shuō)到文字需要表意明確，因此將確定換成退出后表意更加直白，降低用戶(hù)理解度。
6.開(kāi)關(guān)按鈕
開(kāi)關(guān)按鈕也是我們很常見(jiàn)的一個(gè)組件。表示兩種相互對(duì)立的狀態(tài)間的切換，多用于表示功能的開(kāi)啟和關(guān)閉。當(dāng)按鈕開(kāi)啟后可能還會(huì)帶來(lái)其他的相應(yīng)操作。開(kāi)關(guān)按鈕最常見(jiàn)的就是手機(jī)設(shè)置中，但是也有很多APP將其用到界面中使用。如下圖所示：
以美團(tuán)外賣(mài)和小豬短租為例，它們?cè)谔峤挥唵雾?yè)面時(shí)都采用了開(kāi)關(guān)按鈕，同時(shí)在小豬短租中，當(dāng)按鈕打開(kāi)底部會(huì)將“您可再入住完成10天內(nèi)補(bǔ)全信息”進(jìn)行展開(kāi)顯示，提示用戶(hù)去填寫(xiě)。這種點(diǎn)擊展開(kāi)的操作還可增加更多的功能相關(guān)內(nèi)容。
二、按鈕設(shè)計(jì)要點(diǎn)
1.根據(jù)產(chǎn)品為按鈕選擇適合的形狀
在按鈕設(shè)計(jì)時(shí)，需要根據(jù)整個(gè)界面風(fēng)格設(shè)計(jì)合適的按鈕，按鈕樣式主要有直角、小圓角、全圓角三種樣式。
直角的含義：嚴(yán)謹(jǐn)、力量、高端。適用于金融類(lèi)、奢品類(lèi)產(chǎn)品中，讓產(chǎn)品給人嚴(yán)謹(jǐn)安全、高端的感覺(jué)。例如寺庫(kù)。
半圓角的含義：活潑、年輕、安全。適用于兒童類(lèi)、年輕化、娛樂(lè)類(lèi)、購(gòu)物類(lèi)的產(chǎn)品中，提升親和力，拉近用戶(hù)的距離。例如土豆。
小圓角的含義：穩(wěn)定、中性。適用于用戶(hù)跨度較大的常規(guī)類(lèi)產(chǎn)品中，例如微信。
以寺庫(kù)、微信、土豆為例，寺庫(kù)是品類(lèi)電商，因此在設(shè)計(jì)時(shí)需要提現(xiàn)高端，因此在按鈕設(shè)計(jì)時(shí)采用直角設(shè)計(jì)。而微信的用戶(hù)群體上到七八十歲，下到幾歲其年齡范圍廣，因此采用穩(wěn)重的小圓角較為穩(wěn)妥。土豆短視頻其用戶(hù)群體較為年輕活潑，因此采用全圓角較為適合。
2.使用合適的狀態(tài)
在部分界面設(shè)計(jì)中需要考慮按鈕的不同狀態(tài)的設(shè)計(jì)，從而提高用戶(hù)操作流暢度。移動(dòng)端完整的系統(tǒng)按鈕可以分為正常狀態(tài)、按壓狀態(tài)、禁用狀態(tài)。
其中，正常狀態(tài)和加載狀態(tài)展示的是APP的主色；按壓狀態(tài)在正常態(tài)的基礎(chǔ)上疊加不透明度15%的黑色#000；禁用狀態(tài)是設(shè)置灰色或者將正常態(tài)設(shè)置不透明度45%，該狀態(tài)適用于提交界面中使用，比如登陸注冊(cè)、轉(zhuǎn)賬等。如下圖所示：
以京東金融為例，當(dāng)未輸入轉(zhuǎn)賬金額時(shí)，按鈕禁用為灰色，當(dāng)輸入金額時(shí)按鈕為正常狀態(tài)。不過(guò)隨著互聯(lián)網(wǎng)的發(fā)展，寬帶速度不斷的提高，按壓狀態(tài)慢慢被拋棄，他存在的意義不像以前網(wǎng)絡(luò)不發(fā)達(dá)的時(shí)候，點(diǎn)擊還需要時(shí)間反應(yīng)。
3.提供恰當(dāng)?shù)姆答?/span>
當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，他們希望界面可以給些恰當(dāng)?shù)姆答?。如果沒(méi)有任何反饋，用戶(hù)會(huì)以為系統(tǒng)沒(méi)有收到他們的操作，然后就會(huì)重復(fù)點(diǎn)擊。這種行為常常導(dǎo)致多個(gè)不必要的操作。如下圖所示：
以土豆短視頻為例，當(dāng)點(diǎn)擊關(guān)注時(shí)為了避免用戶(hù)點(diǎn)擊沒(méi)有反應(yīng)的情況，可在按鈕上添加加載狀態(tài)，當(dāng)關(guān)注成功后圖標(biāo)狀態(tài)改為禁用狀態(tài)，同時(shí)文字變?yōu)橐殃P(guān)注。
總結(jié)
按鈕設(shè)計(jì)看似簡(jiǎn)單，但是如果想要更好的交互體驗(yàn)，引導(dǎo)用戶(hù)進(jìn)行相應(yīng)的操作，提升產(chǎn)品的轉(zhuǎn)化率這仍是我們需要研究的問(wèn)題。本篇主要將從按鈕功能類(lèi)型和設(shè)計(jì)要點(diǎn)兩個(gè)方面進(jìn)行歸納總結(jié)。
按鈕功能類(lèi)型：主要有行為召喚按鈕、表格按鈕、標(biāo)簽按鈕、命令按鈕、懸浮按鈕、開(kāi)關(guān)按鈕這六大類(lèi)型。在使用我們需要根據(jù)對(duì)應(yīng)的功能和重要程度選擇適合的設(shè)計(jì)。
按鈕設(shè)計(jì)要點(diǎn)：主要有根據(jù)產(chǎn)品為按鈕選擇適合的形狀；使用適合的狀態(tài)；提供恰當(dāng)?shù)姆答佭@三大注意要點(diǎn)。
藍(lán)藍(lán)設(shè)計(jì)( www.newchinaweekly.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.newchinaweekly.com
