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

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

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

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

01 按鈕類型

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

1) 主按鈕

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

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

2）次按鈕

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

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

3）虛線按鈕

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

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

4）文字按鈕

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

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

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

在團隊項目中，文字按鈕和鏈接也做了不同的定義：

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

5）圖標按鈕

圖標按鈕在日常場景中的使用頻次較高、也頗為高效。

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

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

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

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

1）按鈕拆解

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

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

2）按鈕圓角

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

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

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

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

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

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

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

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

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

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

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

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

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

最后

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