近兩年互聯網人口紅利殆盡，獲客成本明顯提高，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端設計師可以把更多的精力投入到沉澱行業知識、研究產品架構、梳理交互方式和創新視覺表現上，輔助業務挖掘，從趨於相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
PS：做設計，用摹客。