2023年五種按鈕類型+三個應(yīng)用細(xì)節(jié)掌握B端按鈕設(shè)計

五種按鈕類型+三個應(yīng)用細(xì)節(jié)，掌握B端按鈕設(shè)計class="size-fullwp-image-903954aligncenter"src="/wp/2023/03/4VOuhmjhNxRw2w7ZXACG.png"alt=""/>

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

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

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

01按鈕類型

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

1)主按鈕

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

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

2）次按鈕

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

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

3）虛線按鈕

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

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

4）文字按鈕

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

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

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

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

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

5）圖標(biāo)按鈕

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

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

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

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

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

1）按鈕拆解

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

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

2）按鈕圓角

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

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

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

直角按鈕：棱角分明，四角垂直過渡，呈向外擴張之勢，給人以尖銳、劇烈，不易接近之感。圓角按鈕：與直角相比，四角過渡較舒緩，呈向內(nèi)聚集之勢，多給人以嚴(yán)厲、親近，平易好接觸之感。多個直角按鈕近距離排列，由于直角張力的存在，相鄰直角按鈕的間隔在視覺感受上被弱化，不像圓角按鈕那樣能更簡單地區(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動畫的效果，又不會因頁面變動過大給用戶帶來不