B端按鈕設(shè)計(jì)應(yīng)該如何建立合適的體系？這篇文章作者將通過5種按鈕類型，3個(gè)應(yīng)用細(xì)節(jié)來帶你掌握B端按鈕設(shè)計(jì)的方法論，幫助你搞定B端按鈕設(shè)計(jì)的難點(diǎn)。推薦對(duì)交互設(shè)計(jì)、按鈕設(shè)計(jì)、用戶體驗(yàn)感興趣的童鞋閱讀。

Halo，這里是設(shè)計(jì)夾，今天為大家分享的是「B端按鈕設(shè)計(jì)①」。

按鈕作為頁(yè)面中基礎(chǔ)但重要的元素，承載著多種功能。在B端產(chǎn)品中，按鈕的類型更為復(fù)雜，一個(gè)頁(yè)面中可能會(huì)包含多種形式的按鈕，代表多種狀態(tài)。

在「B端按鈕設(shè)計(jì)①」中，我們先來了解B端按鈕的類型、樣式、應(yīng)用細(xì)節(jié)等內(nèi)容~

01 按鈕類型

依據(jù)按鈕視覺重量的不同，將按鈕分為一級(jí)按鈕（主按鈕）、二級(jí)按鈕（次按鈕、虛線按鈕）、三級(jí)按鈕（文字按鈕）、四級(jí)按鈕（圖標(biāo)按鈕），在強(qiáng)調(diào)屬性的重要程度上隨級(jí)別增加遞減。

1) 主按鈕

常見的主按鈕有純文字、圖標(biāo)+文字兩種類型，有默認(rèn)、懸浮、點(diǎn)擊、激活、禁用5種不同狀態(tài)。

在日常場(chǎng)景中，主按鈕是頁(yè)面中按鈕區(qū)最為核心的操作按鈕，通過使用主題色填充容器吸引用戶視線聚焦，引導(dǎo)用戶關(guān)注、操作主流程，強(qiáng)調(diào)性較高。

2）次按鈕

次按鈕是在日常場(chǎng)景中運(yùn)用最廣泛的的一種按鈕，也被稱為默認(rèn)按鈕，視覺呈現(xiàn)上相較于主按鈕較“弱”。

通常有描邊和文字組成的字線型、背景填充（中性色或較淺的主題色）和文字組成的字面型兩種，用于按鈕區(qū)沒有主次之分的平級(jí)按鈕，強(qiáng)調(diào)性中等。

3）虛線按鈕

虛線按鈕在日常場(chǎng)景中屬于低頻操作按鈕，容器內(nèi)只有簡(jiǎn)單的虛線邊框，視覺上弱于次按鈕，常用于場(chǎng)景中的添加操作，強(qiáng)調(diào)性較低。

常見有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)。

4）文字按鈕

文字按鈕在日常場(chǎng)景中的使用頻次也較高，文字按鈕常見也分為兩種形式：一種是各種狀態(tài)下容器邊界都是隱藏的，一種是在hover、press、active狀態(tài)下容器有背景色填充（較淺中性色)的。

不管哪一種形式視覺感受都較弱，通常用于不太明顯的操作，強(qiáng)調(diào)性較低。

文字按鈕和鏈接在默認(rèn)外觀上基本一致，甚至在有的項(xiàng)目中各種交互狀態(tài)也一致，比較難區(qū)分文字按鈕和鏈接。

在團(tuán)隊(duì)項(xiàng)目中，文字按鈕和鏈接也做了不同的定義：

• 鏈接在hover、press、active狀態(tài)下都有顯示下劃線，來告知用戶這是一個(gè)外部的鏈接；
• 文字按鈕則在hover、press、active狀態(tài)下容器都會(huì)填充背景色。

5）圖標(biāo)按鈕

圖標(biāo)按鈕在日常場(chǎng)景中的使用頻次較高、也頗為高效。

一般用在圖標(biāo)hover狀態(tài)下會(huì)出現(xiàn)Tooltip提示來解決此問題，圖標(biāo)按鈕的強(qiáng)調(diào)性也較低。

綜上所述就是在B端項(xiàng)目中常見的五種按鈕，不同團(tuán)隊(duì)、不同項(xiàng)目都會(huì)根據(jù)自身的實(shí)際項(xiàng)目去定義和使用不同按鈕。

在實(shí)際的項(xiàng)目場(chǎng)景中，根據(jù)不同需求的強(qiáng)調(diào)程度選擇相應(yīng)級(jí)別的按鈕，有了這個(gè)準(zhǔn)則作為指導(dǎo)參考，大大降低了團(tuán)隊(duì)在選擇按鈕時(shí)的時(shí)間成本。

02 按鈕應(yīng)用細(xì)節(jié)

1）按鈕拆解

通過對(duì)一個(gè)按鈕的拆解，可以將按鈕分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本元素，每種元素的視覺呈現(xiàn)都會(huì)反過來影響按鈕的外觀。

不同風(fēng)格、不同氣質(zhì)的產(chǎn)品，需要相應(yīng)的處理影響按鈕視覺呈現(xiàn)的各個(gè)元素。

2）按鈕圓角

圓角按鈕所帶來的不僅僅是圓角大小的視覺表現(xiàn)，更多是影響用戶對(duì)整個(gè)產(chǎn)品整體認(rèn)知，以及用戶在使用產(chǎn)品過程中的具體感受。

合理科學(xué)、適合產(chǎn)品氣質(zhì)特征、符合用戶預(yù)期和認(rèn)知的圓角元素，對(duì)整個(gè)產(chǎn)品使用體驗(yàn)的提升是有很大的幫助的。

這里的圓角不僅僅局限于按鈕，推而廣之適用產(chǎn)品中的每個(gè)元素，提前合理的規(guī)劃各種元素圓角，更會(huì)對(duì)整個(gè)產(chǎn)品的一致性大有裨益。

• 直角按鈕：棱角分明，四角垂直過渡，呈向外擴(kuò)張之勢(shì)，給人以尖銳、強(qiáng)烈，不易接近之感。
• 圓角按鈕：與直角相比，四角過渡較舒緩，呈向內(nèi)聚攏之勢(shì)，多給人以柔和、親近，平易好接觸之感。

多個(gè)直角按鈕近距離排列，由于直角張力的存在，相鄰直角按鈕的間隔在視覺感受上被弱化，不像圓角按鈕那樣能更容易地區(qū)分、甄別每個(gè)按鈕。

滿足產(chǎn)品需求的情況下，適當(dāng)?shù)膱A角按鈕較直角按鈕更合適。

當(dāng)然圓角也不是越大越好，相同尺寸的按鈕，圓角越大對(duì)在頁(yè)面中的視覺占比越小，操作的容易性越低。

尤其在B端與下拉菜單進(jìn)行聯(lián)動(dòng)時(shí)，也會(huì)受到大圓角（全圓角）的局限，使下拉菜單和按鈕的組合適配顯得比較突兀。

3）按鈕loading狀態(tài)

按鈕loading狀態(tài)算是一種較為特殊的狀態(tài)，指用戶操作按鈕后在得到反饋前的一種臨時(shí)按鈕狀態(tài)，常與按鈕組合在一塊作為多態(tài)按鈕使用。

一般會(huì)使用loading動(dòng)畫來做這種反饋，不僅向用戶反映了系統(tǒng)的當(dāng)前狀態(tài)，適當(dāng)?shù)膭?dòng)畫效果還能轉(zhuǎn)移用戶注意力，起到給用戶情緒降躁的效果。

按鈕的loading狀態(tài)則可以代替loading動(dòng)畫，既起到了原來loading動(dòng)畫的效果，又不會(huì)因頁(yè)面變動(dòng)過大給用戶帶來不適。

在越發(fā)重視用戶體驗(yàn)的今天，按鈕的loading狀態(tài)也越來越多地運(yùn)用在產(chǎn)品的各種場(chǎng)景中。

最后

以上是「B端按鈕設(shè)計(jì)」的第①部分內(nèi)容，后續(xù)會(huì)為大家分享B端按鈕在實(shí)際工作中的應(yīng)用技巧等一些列設(shè)計(jì)知識(shí)點(diǎn)。