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

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

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

在「B端按鈕設計①」中，我們先來了解B端按鈕的類型、樣式、應用細節等內容~

01 按鈕類型

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

1) 主按鈕

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

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

2）次按鈕

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

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

3）虛線按鈕

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

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

4）文字按鈕

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

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

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

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

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

5）圖標按鈕

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

一般用在圖標hover狀態下會出現Tooltip提示來解決此問題，圖標按鈕的強調性也較低。

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

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

02 按鈕應用細節

1）按鈕拆解

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

不同風格、不同氣質的產品，需要相應的處理影響按鈕視覺呈現的各個元素。

2）按鈕圓角

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

合理科學、適合產品氣質特征、符合用戶預期和認知的圓角元素，對整個產品使用體驗的提升是有很大的幫助的。

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

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

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

滿足產品需求的情況下，適當的圓角按鈕較直角按鈕更合適。

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

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

3）按鈕loading狀態

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

一般會使用loading動畫來做這種反饋，不僅向用戶反映了系統的當前狀態，適當的動畫效果還能轉移用戶注意力，起到給用戶情緒降躁的效果。

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

在越發重視用戶體驗的今天，按鈕的loading狀態也越來越多地運用在產品的各種場景中。

最后

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