UI設(shè)計(jì)中按鈕場(chǎng)景分析

　　別無(wú)他話，今天就和大家聊一聊設(shè)計(jì)宿敵——按鈕設(shè)計(jì)。按鈕的設(shè)計(jì)看似簡(jiǎn)單，其實(shí)按鈕的功能不同，設(shè)計(jì)形式上也會(huì)有差異，今天AAA教育郭老師就針對(duì)按鈕的場(chǎng)景分析，對(duì)按鈕進(jìn)行全面的解析。
 

　　按照功能性分類，按鈕主要包括行為召喚按鈕、懸浮按鈕、標(biāo)簽按鈕、表格按鈕、開關(guān)按鈕，其功能不同設(shè)計(jì)方式也不同，我們一起來(lái)看看吧～
 

　　01
 

　　行為召喚按鈕
 

　　行為召喚(Call To action，CTA)按鈕的目的是通過設(shè)計(jì)誘導(dǎo)或激勵(lì)用戶點(diǎn)擊，從而實(shí)現(xiàn)產(chǎn)品的訴求。主要包括誘導(dǎo)購(gòu)買、訂閱關(guān)注、利益誘導(dǎo)、文字誘導(dǎo)這四種。
 

　　1、誘導(dǎo)購(gòu)買
 

　　當(dāng)行為召喚按鈕的目的是誘導(dǎo)用戶購(gòu)買時(shí)，按鈕設(shè)計(jì)在顏色、形狀、樣式上都要突出，讓按鈕一眼看上去就知道按鈕的用途，如下圖：

 

　　美團(tuán)外賣采用左黑右黃進(jìn)行對(duì)比，全圓角的設(shè)計(jì)更有親和力，增加了投影和外賣小哥的形象，以及購(gòu)買數(shù)量，加上價(jià)格誘導(dǎo)，用戶可以直觀看到優(yōu)惠了多少錢，促進(jìn)用戶進(jìn)行下一步操作。
 

　　淘寶詳情頁(yè)的“加入購(gòu)物車”和“立即購(gòu)買”是一個(gè)組合按鈕，在顏色、形狀、樣式上都進(jìn)行了突出，讓用戶一眼就看到。
 

　　2、訂閱關(guān)注
 

　　當(dāng)行為召喚按鈕的目的是訂閱關(guān)注時(shí)，重要程度低于誘導(dǎo)購(gòu)買，我們?cè)谠O(shè)計(jì)的時(shí)候也要注意一個(gè)問題：用戶關(guān)注重要，還是用戶閱讀內(nèi)容更為重要?
 

　　當(dāng)關(guān)注按鈕重要時(shí)，需要強(qiáng)化按鈕的設(shè)計(jì)，主色填充，可添加圖標(biāo)進(jìn)行誘導(dǎo)，在視覺上，與內(nèi)容形成強(qiáng)烈的對(duì)比。
 

　　當(dāng)內(nèi)容重要時(shí)，需要弱化按鈕的設(shè)計(jì)，讓按鈕和界面更加融合，例如土豆視頻：

 

　　3、利益誘導(dǎo)
 

　　當(dāng)行為召喚的目的是利益誘導(dǎo)時(shí)，可以考慮在顏色、形狀、圖標(biāo)、誘導(dǎo)文字等方面設(shè)計(jì)，引導(dǎo)用戶點(diǎn)擊，如下圖所示：
 

　　大眾點(diǎn)評(píng)為了突出賺積分按鈕，采用了色塊設(shè)計(jì)的樣式。

 

　　騰訊doki打榜頁(yè)面沖榜的重要層級(jí)最高，因此在設(shè)計(jì)時(shí)不僅采用了色塊、加入了動(dòng)效圖標(biāo)，同時(shí)還加入了誘導(dǎo)文字，讓按鈕更明顯，誘導(dǎo)用戶點(diǎn)擊，其他按鈕則采用描邊樣式弱化處理。
 

　　4、文字誘導(dǎo)
 

　　文字誘導(dǎo)簡(jiǎn)單來(lái)說(shuō)就是通過文字，誘導(dǎo)用戶進(jìn)行下一步操作，多用于空頁(yè)面、活動(dòng)頁(yè)面中，因此在設(shè)計(jì)時(shí)采用簡(jiǎn)單的色塊填充即可。如果該頁(yè)面為活動(dòng)頁(yè)面，也可增加漸變或投影樣式，讓按鈕更有空間感，進(jìn)而突出按鈕，如下圖所示：

 

　　得到的“學(xué)習(xí)計(jì)劃”界面為空時(shí)，為了促進(jìn)用戶進(jìn)行下一步操作，它的按鈕文字“開始制定學(xué)習(xí)計(jì)劃”直接誘導(dǎo)用戶制定，同時(shí)其按鈕采用重要程度較高的色塊加投影的方式，誘導(dǎo)用戶點(diǎn)擊。
 

　　02
 

　　懸浮按鈕
 

　　懸浮按鈕是Android應(yīng)用中最常見的一個(gè)控件。不過隨著Android和iOS規(guī)范的不斷融合，在iOS中也經(jīng)常會(huì)看到各種各樣的懸浮按鈕。
 

　　在設(shè)計(jì)上懸浮按鈕應(yīng)該采用顯眼的顏色，以抓住用戶的注意力，同時(shí)它應(yīng)該是積極正向的交互，例如創(chuàng)建、分享、探索等，如下圖所示：

 

　　UC瀏覽器的懸浮按鈕具有很強(qiáng)的提示作用，點(diǎn)擊按鈕即可呼出對(duì)應(yīng)發(fā)布視頻的功能。
 

　　03
 

　　標(biāo)簽按鈕
 

　　標(biāo)簽按鈕往往呈多個(gè)出現(xiàn)，在使用時(shí)可以看成一種篩選條件，采用該設(shè)計(jì)方式可減少用戶操作步驟，提高操作效率。
 

　　不過標(biāo)簽的重要程度仍然較低，在設(shè)計(jì)時(shí)需要弱化處理，如下圖所示：支付寶投保頁(yè)面，為了幫助用戶快速做出選擇，采用了標(biāo)簽的設(shè)計(jì)方式。由于其重要程度不及“我要投保”高，因此在設(shè)計(jì)時(shí)默認(rèn)用描邊處理。

 

　　04
 

　　表格按鈕
 

　　表格按鈕是由一個(gè)白色網(wǎng)格加文字組成，從視覺上看和頁(yè)面融為一體，特別不突出。因此多在個(gè)人中心設(shè)置頁(yè)面想要弱化按鈕的情況使用，如下圖所示：

 

　　微信設(shè)置界面的“切換賬號(hào)”和“退出登錄”由于不是核心操作按鈕，同時(shí)為了和界面表格協(xié)調(diào)，設(shè)計(jì)時(shí)采用表格按鈕將其弱化處理。
 

　　05
 

　　開關(guān)按鈕
 

　　開關(guān)按鈕是兩種相互對(duì)立狀態(tài)間的切換，多用于功能的開啟和關(guān)閉。當(dāng)按鈕開啟后可能還會(huì)帶來(lái)其他的相應(yīng)操作。開關(guān)按鈕多用在設(shè)置界面，但是也有很多App將其用到其他界面中，減少操作步驟，提高操作效率，如下圖所示：

 

　　06
 

　　按鈕設(shè)計(jì)要點(diǎn)
 

　　上面總結(jié)了五大功能按鈕的表現(xiàn)形式和使用場(chǎng)景，此外，要設(shè)計(jì)出一個(gè)引導(dǎo)性好的按鈕，還需要重視一些細(xì)節(jié)，例如顏色、形狀、狀態(tài)、位置等。
 

　　1. 顏色
 

　　顏色是最容易感知到的對(duì)比方式，不同的顏色會(huì)給用戶不一樣的心理預(yù)期。
 

　　在設(shè)計(jì)時(shí)，按鈕顏色主要有主題色、強(qiáng)調(diào)色、輔助色。
 

　　主題色多用于需要強(qiáng)調(diào)的行為召喚按鈕、懸浮按鈕、開關(guān)按鈕中;
 

　　強(qiáng)調(diào)色多用于需要拉開主次關(guān)系的按鈕組中，一般采用主題色的對(duì)比色彩或者鄰近色;
 

　　輔助色多用于默認(rèn)狀態(tài)或不可點(diǎn)擊的狀態(tài)中，如下圖所示：

 

　　得到的“學(xué)習(xí)計(jì)劃”按鈕直接采用主題色，不僅可以起到很好的強(qiáng)調(diào)作用，同時(shí)和界面風(fēng)格也比較協(xié)調(diào);UC瀏覽器小視頻的拍攝按鈕采用對(duì)比色玫紅色漸變來(lái)強(qiáng)調(diào)，引導(dǎo)用戶拍攝小視頻。
 

　　2. 形狀
 

　　在設(shè)計(jì)按鈕時(shí)，需要根據(jù)整個(gè)界面風(fēng)格設(shè)計(jì)合適的形狀，主要有直角、小圓角、全圓角、異形四種樣式。
 

　　直角的含義：嚴(yán)謹(jǐn)、力量、高端。適用于金融類、奢侈品類產(chǎn)品中，讓產(chǎn)品給人嚴(yán)謹(jǐn)、安全、高端的感覺。例如寺庫(kù)的按鈕設(shè)計(jì)，寺庫(kù)是奢侈品類電商，它的按鈕采用直角設(shè)計(jì)，剛好可體現(xiàn)奢侈品的高端性。

 

　　小圓角的含義：穩(wěn)定、中性。適用于用戶跨度較大的常規(guī)類產(chǎn)品中。例如微信的按鈕設(shè)計(jì)，微信的用戶群體上到七八十歲，下到幾歲，其年齡范圍廣，因此采用穩(wěn)重的小圓角較為穩(wěn)妥。

 

　　全圓角的含義：活潑、年輕、安全。適用于兒童類、年輕類、娛樂類、購(gòu)物類的產(chǎn)品中，提升親和力，拉近用戶的距離。例如土豆的按鈕設(shè)計(jì)，土豆短視頻用戶群體年輕活潑，因此采用全圓角較為適合。

 

　　異形按鈕的含義：不穩(wěn)定、活潑、另類，適用于需要用戶做出選擇的場(chǎng)景中。例如招商銀行話題PK就是采用的異形設(shè)計(jì)，會(huì)給用戶不穩(wěn)定和另類的感覺，從而引導(dǎo)用戶參與。

 

　　3. 狀態(tài)
 

　　移動(dòng)端完整的系統(tǒng)按鈕可以分為正常狀態(tài)、按壓狀態(tài)、禁用狀態(tài)。
 

　　其中，正常狀態(tài)(包括加載狀態(tài))展示的是App的主色;按壓狀態(tài)在正常狀態(tài)的基礎(chǔ)上疊加15%的黑色;禁用狀態(tài)一般是灰色或者將正常狀態(tài)的透明度降低至45%，該狀態(tài)多用于提交表單按鈕，例如登錄、注冊(cè)、轉(zhuǎn)賬等。
 

　　4. 位置
 

　　位置往往對(duì)主操作按鈕較為重要，在設(shè)計(jì)時(shí)需要以引導(dǎo)用戶、方便用戶點(diǎn)擊為目的。主操作按鈕的位置主要有三種，即固定在底部、頁(yè)面跟隨、將希望用戶操作的按鈕置于按鈕組右側(cè)。
 

　　07
 

　　劃重點(diǎn)
 

　　1、行為召喚的目的是誘導(dǎo)購(gòu)買時(shí)，按鈕的設(shè)計(jì)不管從顏色、形狀還是樣式都需要突出。讓按鈕看上去可點(diǎn)擊，讓用戶進(jìn)來(lái)第一眼就能知道該按鈕的用途。
 

　　2、當(dāng)行為召喚的目的是點(diǎn)擊按鈕時(shí)，按鈕需要強(qiáng)化處理，例如采用主題色、強(qiáng)調(diào)色、添加圖標(biāo)等方式;當(dāng)目的是瀏覽內(nèi)容時(shí)，按鈕可弱化處理，例如按鈕采用淺色、灰色。
 

　　3、提交表單按鈕可分別設(shè)計(jì)正常、禁用狀態(tài)，避免用戶錯(cuò)誤操作。
 

　　4、當(dāng)需要用戶快速操作時(shí)，將主操作按鈕固定在界面的底部;按鈕組中希望用戶點(diǎn)擊的按鈕則置于右側(cè)。
 

　　5、好了，今天的分享就到這里了，因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。