B端產品按鈕設計技巧

近兩年互聯網人口紅利殆盡，獲客成本明顯提高，C端整體突飛猛進式的增長基本結束。與此同時，互聯網開始賦能傳統行業，企業對互聯網服務需求逐年提升。今年疫情衝擊之下，“新基建”迅速成為坊間熱詞，B端產品借勢迎來了井噴式增長，也讓許多設計師小夥伴有了入局B端的機會 。

然而對許多初級或者沒有B端經驗的設計師來說，B端產品設計總是讓人感到頭疼：功能太多，規範太多，產品和設計的爭議也非常大，而且網上的參考資料相較C端也是少得可憐。設計師隻能在工作中自己總結經驗。這裏筆者就分享有關B端產品按鈕設計技巧，希望能給大家帶來一些幫助。

什麼是B端產品？

談到按鈕設計前，先簡單說說B端產品。

B端產品主要麵向的是企業客戶以及內部員工使用，比如OA、ERP、CRM等，一般除了目標用戶，其他用戶很難接觸到。B端產品的設計通常需要結合具體的業務場景，功能和邏輯往往比較複雜，且用戶通常需要長時間沉浸使用，因此要求界麵設計層級清晰，布局簡潔高效。

B端按鈕設計通常存在三方麵的複雜性：

●按鈕數量多：B端產品幾乎所有頁麵都會有按鈕，甚至同時有多個按鈕。對層級感和美觀度的要求都很高；

●應用場景多：按鈕需要適應B端產品的多種業務場景，包括登錄界麵、表單、彈窗、信息提示框等；且每個場景出現的形式都不盡相同，需要對每種場景嚴格規範才不至於使用混亂；

●出現形式多：按鈕通常具有正常、聚焦、懸停等多種狀態，需要保證用戶能夠及時發現並獲得準確的反饋效果。

要想解決這些問題，我們需要了解按鈕的主要類型和設計細節，以便在各類情況下靈活運用。

按鈕類型

按鈕主要包括主按鈕、次按鈕、文字按鈕、圖標按鈕、菜單按鈕、圖標+文字按鈕6大類。

主按鈕（Primary Button）

主按鈕顧名思義承載當前頁麵的核心功能，通常為新建、保存、確定這一類的正向操作。由於重要性高，要讓用戶一眼就能看見，往往設計的比較醒目。另外主按鈕在頁麵中不宜安排的過多，否則容易相互幹擾；而且隻有最重要的功能才適合設計為主按鈕，因此並非所有頁麵都需要有主按鈕。

次按鈕/標準按鈕（Default Button）

次按鈕也叫標準按鈕，是頁麵中出現頻率最高的按鈕類型。一般來說，隻要不是需要被強調的核心功能，都可以作為次按鈕的形式出現。由於出現的次數較多，次按鈕往往不宜設計的過於搶眼，通常采用文字+邊框或者文字+淺色背景的形式。

文字按鈕/鏈接（Text Button/Link)

文字按鈕類似次按鈕，也是頁麵中大量出現的按鈕類型。由於隻以文字形式出現，視覺上層級較弱，可以和次按鈕區分一定的層級關係，通常在列表設計中被大量使用。

圖標按鈕（Icon Button）

圖標按鈕相較其他按鈕體積較小，因此布局的靈活性很高。且圖標形式給了設計師更多表現的空間，是B端設計中最容易出彩的部分，許多B端產品都通過精心設計的圖標按鈕傳遞產品調性和品牌感。

由於沒有文字元素，圖標按鈕容易出現用戶理解上的偏差。為避免這一情況，需要在設計時做好用戶測試，測試該圖標是否符合用戶視覺預期。或者當用戶Hover時顯示Tooltips提示按鈕含義，幫助用戶理解。

菜單按鈕（Menu Button）

菜單按鈕可以理解為一般按鈕的集合，即將多個相關功能合並在一起，通過點擊按鈕以下拉菜單的形式出現。菜單按鈕可以有效減少界麵按鈕冗雜的問題，提高界麵使用效率。

圖標+文字按鈕（Icon add Button）

一般指主按鈕中加入圖標，為了進一步突出主按鈕的視覺層級，也有增加美觀度提高用戶點擊欲望的作用。

除了以上介紹的6種主要按鈕類型外，還可以依據功能類型將按鈕分為行為召喚按鈕、懸浮按鈕、標簽按鈕、危險按鈕和開關按鈕。

●行為召喚（Call To action，CTA）按鈕的目的是通過設計誘導或激勵用戶點擊，從而實現產品的訴求。此類按鈕的設計在顏色、形狀、樣式上都需要突出，讓人擁有點擊的欲望。行為召喚按鈕一般不會出現在B端產品的內部，但在官網或活動頁麵被廣泛運用。

●懸浮按鈕是Android規範中的一個控件，隨著各平台規範的相互融合借鑒，iOS甚至網頁端也經常回看到各種各樣的懸浮按鈕。在B端項目中，懸浮按鈕有時會承擔主按鈕的功能，如創建、搜索等功能；同時也會作為輔助功能，如幫助或返回頂部等。

●危險按鈕可以是主按鈕之外的任意按鈕類型，用來警告用戶審慎考慮，且點擊後通常需要二次確認，避免誤操作。

●開關（Switch）按鈕是兩種相互對立狀態間的切換，多用於功能的開啟和關閉，一般操作後會即刻生效，多用於設置界麵中。

設計細節

除了上麵總結的6種主要按鈕類型，要設計出一個好用的按鈕，還需要重視一些細節，例如顏色、形狀、狀態、位置等。

顏色

顏色是最容易感知到的對比方式，不同的顏色會給用戶不一樣的心理預期。B端產品的用色一般以理性、嚴肅的基調為主，其中藍色最為常見。如選用其他色彩可適當調低飽和度，以降低長時間使用造成的視覺疲勞感。

在設計時，還要將顏色分為主題色、強調色和輔助色，以適應不同按鈕層級。主題色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。主題色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。主題色的應用場景包括操作狀態、按鈕色、可操作圖標等；強調色多用於需要拉開主次關係的次按鈕中，一般采用主題色的對比色彩或者鄰近色；輔助色用於提示其他場景，比如成功、失敗、警告、無效等。

形狀

在設計按鈕時，需要根據整個界麵風格設計適合的形狀，主要有直角、小圓角、全圓角、異形四種樣式。

●直角的含義：嚴謹、力量、高端。屬於B端產品最常用的類型，給人嚴謹、安全、高端的感覺。

●小圓角的含義：穩定、中性。在B端產品中也經常出現。

●全圓角的含義：活潑、年輕、安全。適用於兒童類、年輕類、娛樂類、購物類產品中，提升親和力，拉近用戶的距離。

●異形按鈕的含義：不穩定、活潑、另類。適用於需要用戶做出選擇的場景中。

狀態

在部分界麵設計中需要考慮按鈕的狀態設計，從而讓用戶獲得清晰流暢的操作反饋。B端完整的係統按鈕可以分為：正常狀態（Normal）、聚焦狀態（Focus）、懸停狀態（Hover）、點擊狀態（Active）、加載狀態（Loading）、禁用狀態（Disabled）。

一般來說，正常狀態（包括加載狀態）展示的是產品的主色；聚焦狀態僅限桌麵端，代表係統光標所在位置，一般用背景色或添加醒目的描邊表示；懸停狀態通常疊加20%左右的白色或添加陰影，表現按鈕向用戶方向靠近的效果；點擊狀態在正常狀態的基礎上疊加15%的黑色，產生被按下的感覺；禁用狀態則一般用灰色或者將正常狀態的透明度降低至30%左右。

位置

位置的選擇一般對主按鈕較為重要，在設計時要以引導用戶、方便用戶點擊為目的。

根據尼爾森團隊眼動追蹤研究結果發現，用戶通常以F型和Z型模式瀏覽頁麵，其中Z型瀏覽模式較為普遍，F型瀏覽模式通常為新聞平台、博客等以文字為主的頁麵。

由此可知頁麵的左上方通常為用戶視覺的起點，右上方次之。我們可以將主功能按鈕放置於用戶最容易注意到的位置，相反較為低頻的按鈕則可以安排在其他位置，符合用戶的閱讀習慣。

需要注意的點

在了解了按鈕的常見類型和設計細節後，已經可以設計出符合規範的按鈕了。除此之外，還有以下幾點需要注意：

盡量使用常見的按鈕設計

B端產品的功能較多，意味著會有大量按鈕同時出現在頁麵中，用戶在使用時需要立即知道什麼是可點擊的。如果按鈕因樣式特殊而無法被用戶第一時間看到，就是失敗的按鈕設計。

不要忘記間距

不僅按鈕本身的樣式很重要，其附近的間距大小也會影響用戶發現和理解按鈕的成本。所以留足間距才是明智的選擇。

使用合理的文案

按鈕文案需要清楚的說明其功能，減少用戶操作時的困惑。有時還能通過對用戶行為的預測，為其提供意想不到的驚喜效果。

避免太多按鈕

正如前文提到的，按鈕太多是B端產品常見的問題。滿屏的按鈕會讓用戶感到困惑，使用效率低下。我們可以嚐試將同類型功能折疊為菜單按鈕，或者根據重要程度以不同形式的按鈕展示，盡量降低視覺的疲勞感。

提供互動的視覺或聽覺反饋

當用戶點擊按鈕時，給予適當的視覺或聽覺反饋會極大地提升用戶的使用體驗，提升產品的品質感。

總結

以上就是關於B端按鈕設計的全部分享了，不管是做 C 端產品還是 B 端產品，都是為了實現用戶的需求、幫用戶解決問題。剛接觸B端產品的時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背後思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體係。

此外，B端設計師可以把更多的精力投入到沉澱行業知識、研究產品架構、梳理交互方式和創新視覺表現上，輔助業務挖掘，從趨於相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。

原文地址：摹客（公眾號）

作者：XingYang