近兩年互聯(lián)網(wǎng)人口紅利殆盡，獲客成本明顯提高翁都，C端整體突飛猛進(jìn)式的增長(zhǎng)基本結(jié)束柄慰。與此同時(shí)先煎，互聯(lián)網(wǎng)開(kāi)始賦能傳統(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)按鈕和開(kāi)關(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)，避免誤操作。
開(kāi)關(guān)（Switch）按鈕是兩種相互對(duì)立狀態(tài)間的切換，多用于功能的開(kā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)色多用于需要拉開(kāi)主次關(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é)或聽(tīng)覺(jué)反饋
當(dāng)用戶點(diǎn)擊按鈕時(shí)整葡，給予適當(dāng)?shù)囊曈X(jué)或聽(tīng)覺(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à)值术羔。
