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

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

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

　　01
 

　　行為召喚按鈕
 

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

　　1、誘導(dǎo)購買
 

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

 

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

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

　　2、訂閱關(guān)注
 

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

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

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

 

　　3、利益誘導(dǎo)
 

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

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

 

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

　　4、文字誘導(dǎo)
 

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

 

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

　　02
 

　　懸浮按鈕
 

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

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

 

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

　　03
 

　　標(biāo)簽按鈕
 

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

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

 

　　04
 

　　表格按鈕
 

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

 

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

　　05
 

　　開關(guān)按鈕
 

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

 

　　06
 

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

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

　　1. 顏色
 

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

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

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

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

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

 

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

　　2. 形狀
 

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

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

 

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

 

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

 

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

 

　　3. 狀態(tài)
 

　　移動端完整的系統(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)多用于提交表單按鈕，例如登錄、注冊、轉(zhuǎn)賬等。
 

　　4. 位置
 

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

　　07
 

　　劃重點(diǎn)
 

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

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

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

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

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