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

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

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

　　01
 

　　行為召喚按鈕
 

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

　　1、誘導(dǎo)購買
 

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

 

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

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

　　2、訂閱關(guān)注
 

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

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

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

 

　　3、利益誘導(dǎo)
 

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

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

 

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

　　4、文字誘導(dǎo)
 

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

 

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

　　02
 

　　懸浮按鈕
 

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

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

 

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

　　03
 

　　標簽按鈕
 

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

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

 

　　04
 

　　表格按鈕
 

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

 

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

　　05
 

　　開關(guān)按鈕
 

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

 

　　06
 

　　按鈕設(shè)計要點
 

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

　　1. 顏色
 

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

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

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

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

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

 

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

　　2. 形狀
 

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

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

 

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

 

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

 

　　異形按鈕的含義：不穩(wěn)定、活潑、另類，適用于需要用戶做出選擇的場景中。例如招商銀行話題PK就是采用的異形設(shè)計，會給用戶不穩(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è)計時需要以引導(dǎo)用戶、方便用戶點擊為目的。主操作按鈕的位置主要有三種，即固定在底部、頁面跟隨、將希望用戶操作的按鈕置于按鈕組右側(cè)。
 

　　07
 

　　劃重點
 

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

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

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

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

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