近兩年互聯(lián)網(wǎng)人口紅利殆盡，獲客成本明顯提高，C端整體突飛猛進(jìn)式的增長(zhǎng)基本結(jié)束。與此同時(shí)，互聯(lián)網(wǎng)開始賦能傳統(tǒng)行業(yè)，企業(yè)對(duì)互聯(lián)網(wǎng)服務(wù)需求逐年提升。今年疫情沖擊之下，“新基建”迅速成為坊間熱詞，B端產(chǎn)品借勢(shì)迎來(lái)了井噴式增長(zhǎng)，也讓許多設(shè)計(jì)師小伙伴有了入局B端的機(jī)會(huì) 。

然而對(duì)許多初級(jí)或者沒(méi)有B端經(jīng)驗(yàn)的設(shè)計(jì)師來(lái)說(shuō)，B端產(chǎn)品設(shè)計(jì)總是讓人感到頭疼：功能太多，規(guī)范太多，產(chǎn)品和設(shè)計(jì)的爭(zhēng)議也非常大，而且網(wǎng)上的參考資料相較C端也是少得可憐。設(shè)計(jì)師只能在工作中自己總結(jié)經(jīng)驗(yàn)。這里筆者就分享有關(guān)B端設(shè)計(jì)中按鈕設(shè)計(jì)的經(jīng)驗(yàn)，希望能給大家?guī)?lái)一些幫助。

什么是B端產(chǎn)品？

談到按鈕設(shè)計(jì)前，先簡(jiǎn)單說(shuō)說(shuō)B端產(chǎn)品。

B端產(chǎn)品主要面向的是企業(yè)客戶以及內(nèi)部員工使用，比如OA、ERP、CRM等，一般除了目標(biāo)用戶，其他用戶很難接觸到。B端產(chǎn)品的設(shè)計(jì)通常需要結(jié)合具體的業(yè)務(wù)場(chǎng)景，功能和邏輯往往比較復(fù)雜，且用戶通常需要長(zhǎng)時(shí)間沉浸使用，因此要求界面設(shè)計(jì)層級(jí)清晰，布局簡(jiǎn)潔高效。

B端按鈕設(shè)計(jì)通常存在三方面的復(fù)雜性：

按鈕數(shù)量多：B端產(chǎn)品幾乎所有頁(yè)面都會(huì)有按鈕，甚至同時(shí)有多個(gè)按鈕。對(duì)層級(jí)感和美觀度的要求都很高；

應(yīng)用場(chǎng)景多：按鈕需要適應(yīng)B端產(chǎn)品的多種業(yè)務(wù)場(chǎng)景，包括登錄界面、表單、彈窗、信息提示框等；且每個(gè)場(chǎng)景出現(xiàn)的形式都不盡相同，需要對(duì)每種場(chǎng)景嚴(yán)格規(guī)范才不至于使用混亂；

出現(xiàn)形式多：按鈕通常具有正常、聚焦、懸停等多種狀態(tài)，需要保證用戶能夠及時(shí)發(fā)現(xiàn)并獲得準(zhǔn)確的反饋效果。

要想解決這些問(wèn)題，我們需要了解按鈕的主要類型和設(shè)計(jì)細(xì)節(jié)，以便在各類情況下靈活運(yùn)用。

按鈕類型

按鈕主要包括主按鈕、次按鈕、文字按鈕、圖標(biāo)按鈕、菜單按鈕、圖標(biāo)+文字按鈕6大類。

主按鈕（Primary Button）

主按鈕顧名思義承載當(dāng)前頁(yè)面的核心功能，通常為新建、保存、確定這一類的正向操作。由于重要性高，要讓用戶一眼就能看見(jiàn)，往往設(shè)計(jì)的比較醒目。另外主按鈕在頁(yè)面中不宜安排的過(guò)多，否則容易相互干擾；而且只有最重要的功能才適合設(shè)計(jì)為主按鈕，因此并非所有頁(yè)面都需要有主按鈕。

次按鈕/標(biāo)準(zhǔn)按鈕（Default Button）

次按鈕也叫標(biāo)準(zhǔn)按鈕，是頁(yè)面中出現(xiàn)頻率最高的按鈕類型。一般來(lái)說(shuō)，只要不是需要被強(qiáng)調(diào)的核心功能，都可以作為次按鈕的形式出現(xiàn)。由于出現(xiàn)的次數(shù)較多，次按鈕往往不宜設(shè)計(jì)的過(guò)于搶眼，通常采用文字+邊框或者文字+淺色背景的形式。

文字按鈕/鏈接（Text Button/Link)

文字按鈕類似次按鈕，也是頁(yè)面中大量出現(xiàn)的按鈕類型。由于只以文字形式出現(xiàn)，視覺(jué)上層級(jí)較弱，可以和次按鈕區(qū)分一定的層級(jí)關(guān)系，通常在列表設(shè)計(jì)中被大量使用。

圖標(biāo)按鈕（Icon Button）

圖標(biāo)按鈕相較其他按鈕體積較小，因此布局的靈活性很高。且圖標(biāo)形式給了設(shè)計(jì)師更多表現(xiàn)的空間，是B端設(shè)計(jì)中最容易出彩的部分，許多B端產(chǎn)品都通過(guò)精心設(shè)計(jì)的圖標(biāo)按鈕傳遞產(chǎn)品調(diào)性和品牌感。

由于沒(méi)有文字元素，圖標(biāo)按鈕容易出現(xiàn)用戶理解上的偏差。為避免這一情況，需要在設(shè)計(jì)時(shí)做好用戶測(cè)試，測(cè)試該圖標(biāo)是否符合用戶視覺(jué)預(yù)期。或者當(dāng)用戶Hover時(shí)顯示Tooltips提示按鈕含義，幫助用戶理解。

菜單按鈕（Menu Button）

菜單按鈕可以理解為一般按鈕的集合，即將多個(gè)相關(guān)功能合并在一起，通過(guò)點(diǎn)擊按鈕以下拉菜單的形式出現(xiàn)。菜單按鈕可以有效減少界面按鈕冗雜的問(wèn)題，提高界面使用效率。

圖標(biāo)+文字按鈕（Icon add Button）

一般指主按鈕中加入圖標(biāo)，為了進(jìn)一步突出主按鈕的視覺(jué)層級(jí)，也有增加美觀度提高用戶點(diǎn)擊欲望的作用。

除了以上介紹的6種主要按鈕類型外，還可以依據(jù)功能類型將按鈕分為行為召喚按鈕、懸浮按鈕、標(biāo)簽按鈕、危險(xiǎn)按鈕和開關(guān)按鈕。

• 行為召喚（Call To action，CTA）按鈕的目的是通過(guò)設(shè)計(jì)誘導(dǎo)或激勵(lì)用戶點(diǎn)擊，從而實(shí)現(xiàn)產(chǎn)品的訴求。此類按鈕的設(shè)計(jì)在顏色、形狀、樣式上都需要突出，讓人擁有點(diǎn)擊的欲望。行為召喚按鈕一般不會(huì)出現(xiàn)在B端產(chǎn)品的內(nèi)部，但在官網(wǎng)或活動(dòng)頁(yè)面被廣泛運(yùn)用。

• 懸浮按鈕是Android規(guī)范中的一個(gè)控件，隨著各平臺(tái)規(guī)范的相互融合借鑒，iOS甚至網(wǎng)頁(yè)端也經(jīng)常回看到各種各樣的懸浮按鈕。在B端項(xiàng)目中，懸浮按鈕有時(shí)會(huì)承擔(dān)主按鈕的功能，如創(chuàng)建、搜索等功能；同時(shí)也會(huì)作為輔助功能，如幫助或返回頂部等。

• 危險(xiǎn)按鈕可以是主按鈕之外的任意按鈕類型，用來(lái)警告用戶審慎考慮，且點(diǎn)擊后通常需要二次確認(rèn)，避免誤操作。

• 開關(guān)（Switch）按鈕是兩種相互對(duì)立狀態(tài)間的切換，多用于功能的開啟和關(guān)閉，一般操作后會(huì)即刻生效，多用于設(shè)置界面中。

設(shè)計(jì)細(xì)節(jié)

除了上面總結(jié)的6種主要按鈕類型，要設(shè)計(jì)出一個(gè)好用的按鈕，還需要重視一些細(xì)節(jié)，例如顏色、形狀、狀態(tài)、位置等。

顏色

顏色是最容易感知到的對(duì)比方式，不同的顏色會(huì)給用戶不一樣的心理預(yù)期。B端產(chǎn)品的用色一般以理性、嚴(yán)肅的基調(diào)為主，其中藍(lán)色最為常見(jiàn)。如選用其他色彩可適當(dāng)調(diào)低飽和度，以降低長(zhǎng)時(shí)間使用造成的視覺(jué)疲勞感。

在設(shè)計(jì)時(shí)，還要將顏色分為主題色、強(qiáng)調(diào)色和輔助色，以適應(yīng)不同按鈕層級(jí)。主題色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對(duì)外的形象。主題色要根據(jù)產(chǎn)品特性、用戶使用場(chǎng)景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。主題色的應(yīng)用場(chǎng)景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等；強(qiáng)調(diào)色多用于需要拉開主次關(guān)系的次按鈕中，一般采用主題色的對(duì)比色彩或者鄰近色；輔助色用于提示其他場(chǎng)景，比如成功、失敗、警告、無(wú)效等。

形狀

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

直角的含義：嚴(yán)謹(jǐn)、力量、高端。屬于B端產(chǎn)品最常用的類型，給人嚴(yán)謹(jǐn)、安全、高端的感覺(jué)。

小圓角的含義：穩(wěn)定、中性。在B端產(chǎn)品中也經(jīng)常出現(xiàn)。

全圓角的含義：活潑、年輕、安全。適用于兒童類、年輕類、娛樂(lè)類、購(gòu)物類產(chǎn)品中，提升親和力，拉近用戶的距離。

異形按鈕的含義：不穩(wěn)定、活潑、另類。適用于需要用戶做出選擇的場(chǎng)景中。

狀態(tài)

在部分界面設(shè)計(jì)中需要考慮按鈕的狀態(tài)設(shè)計(jì)，從而讓用戶獲得清晰流暢的操作反饋。B端完整的系統(tǒng)按鈕可以分為：正常狀態(tài)（Normal）、聚焦?fàn)顟B(tài)（Focus）、懸停狀態(tài)（Hover）、點(diǎn)擊狀態(tài)（Active）、加載狀態(tài)（Loading）、禁用狀態(tài)（Disabled）。

一般來(lái)說(shuō)，正常狀態(tài)（包括加載狀態(tài)）展示的是產(chǎn)品的主色；聚焦?fàn)顟B(tài)僅限桌面端，代表系統(tǒng)光標(biāo)所在位置，一般用背景色或添加醒目的描邊表示；懸停狀態(tài)通常疊加20%左右的白色或添加陰影，表現(xiàn)按鈕向用戶方向靠近的效果；點(diǎn)擊狀態(tài)在正常狀態(tài)的基礎(chǔ)上疊加15%的黑色，產(chǎn)生被按下的感覺(jué)；禁用狀態(tài)則一般用灰色或者將正常狀態(tài)的透明度降低至30%左右。

位置

位置的選擇一般對(duì)主按鈕較為重要，在設(shè)計(jì)時(shí)要以引導(dǎo)用戶、方便用戶點(diǎn)擊為目的。

根據(jù)尼爾森團(tuán)隊(duì)眼動(dòng)追蹤研究結(jié)果發(fā)現(xiàn)，用戶通常以F型和Z型模式瀏覽頁(yè)面，其中Z型瀏覽模式較為普遍，F(xiàn)型瀏覽模式通常為新聞平臺(tái)、博客等以文字為主的頁(yè)面。

由此可知頁(yè)面的左上方通常為用戶視覺(jué)的起點(diǎn)，右上方次之。我們可以將主功能按鈕放置于用戶最容易注意到的位置，相反較為低頻的按鈕則可以安排在其他位置，符合用戶的閱讀習(xí)慣。

需要注意的點(diǎn)

在了解了按鈕的常見(jiàn)類型和設(shè)計(jì)細(xì)節(jié)后，已經(jīng)可以設(shè)計(jì)出符合規(guī)范的按鈕了。除此之外，還有以下幾點(diǎn)需要注意：

盡量使用常見(jiàn)的按鈕設(shè)計(jì)

B端產(chǎn)品的功能較多，意味著會(huì)有大量按鈕同時(shí)出現(xiàn)在頁(yè)面中，用戶在使用時(shí)需要立即知道什么是可點(diǎn)擊的。如果按鈕因樣式特殊而無(wú)法被用戶第一時(shí)間看到，就是失敗的按鈕設(shè)計(jì)。

不要忘記間距

不僅按鈕本身的樣式很重要，其附近的間距大小也會(huì)影響用戶發(fā)現(xiàn)和理解按鈕的成本。所以留足間距才是明智的選擇。

使用合理的文案

按鈕文案需要清楚的說(shuō)明其功能，減少用戶操作時(shí)的困惑。有時(shí)還能通過(guò)對(duì)用戶行為的預(yù)測(cè)，為其提供意想不到的驚喜效果。

避免太多按鈕

正如前文提到的，按鈕太多是B端產(chǎn)品常見(jiàn)的問(wèn)題。滿屏的按鈕會(huì)讓用戶感到困惑，使用效率低下。我們可以嘗試將同類型功能折疊為菜單按鈕，或者根據(jù)重要程度以不同形式的按鈕展示，盡量降低視覺(jué)的疲勞感。

提供互動(dòng)的視覺(jué)或聽覺(jué)反饋

當(dāng)用戶點(diǎn)擊按鈕時(shí)，給予適當(dāng)?shù)囊曈X(jué)或聽覺(jué)反饋會(huì)極大地提升用戶的使用體驗(yàn)，提升產(chǎn)品的品質(zhì)感。

總結(jié)

以上就是關(guān)于B端按鈕設(shè)計(jì)的全部分享了，不管是做 C 端產(chǎn)品還是 B 端產(chǎn)品，都是為了實(shí)現(xiàn)用戶的需求、幫用戶解決問(wèn)題。剛接觸B端產(chǎn)品的時(shí)候，最希望能把產(chǎn)品做的炫酷、美觀，工作中慢慢地發(fā)現(xiàn)項(xiàng)目的背后思考更為重要，產(chǎn)出的設(shè)計(jì)成果也應(yīng)該有理有據(jù)、支撐整個(gè)設(shè)計(jì)體系。

此外，B端設(shè)計(jì)師可以把更多的精力投入到沉淀行業(yè)知識(shí)、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺(jué)表現(xiàn)上，輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨(dú)有的閃光點(diǎn)，從而切實(shí)解決問(wèn)題和實(shí)現(xiàn)價(jià)值。

PS：做設(shè)計(jì)，用摹客。