本文介紹了B端產品的業務類型、設計特征與設計內容，希望能幫助大家對B端的管理平臺設計有個初步的瞭解。

在今天，互聯網的影響力與作用與日俱增，除了我們日常生活領域的改變以外，對於商業領域的滲透也見效頗豐。

越來越多的企業開始使用數字化的解決方案來助力企業發展，包括日常管理、運營、統計等等。或者通過互聯網的方式開發出新的業務形態，進行產業升級，如這幾年風頭正勁的「新零售」領域，即通過互聯網對傳統零售業升級和改造的嘗試。

和移動互聯網大潮一樣，企業互聯網化也是大勢所趨，是公認的萬億級市場，而這場改變才剛剛進入初級階段，充滿了非常多的機遇與想象空間。

所以 B 端的產品和需求在近兩年呈井噴式的發展，對於 B 端界面的視覺和交互要求也與日俱增。

B端產品是什麼

在國內，行業習慣將互聯網產品劃分成「B2C」或者「B2B」，B2C 全稱是 Business-to-Consumer 即企業到客戶的服務，B2B 全稱是 Business-to-Business，即企業對企業的服務。還會進一步縮寫成「2C」或「2B」。

C 端產品，是面向終端消費用戶的產品，對於使用者而言主要是用來滿足自己的日常生活實踐需求，例如娛樂、消費、學習、出行等等。

而 B 端產品，是面向企業用戶的產品，用戶通過它進行日常的商業活動，例如企業庫存管理，銷售統計，員工出勤考核等等。可以說，用來解決企業需求的產品，都是 B 端產品。

雖然面向企業的產品對於新手來說很陌生，聽起來也很枯燥，但是 B 端產品的覆蓋範圍是非常廣泛的。因為不同企業所處行業和業務形式不同，所以對 B 端產品的要求差異極大，產品運行的平臺可能是手機，也可能是平板、定製安卓設備、桌面客戶端、網頁程序等。

對於新手來說，要一口氣掌握所有類型的 B 端產品是不切實際的，所以我們挑選其中應用最廣泛的「網頁程序」作為切入點。而且在國內互聯網語境中，B 端產品的狹義解釋也基本可以和麵向企業的「網頁程序」等同，用更接地氣的稱呼，即是管理平臺。

具體認識一下 B 端的管理平臺設計有哪些基礎知識需要掌握。

常見的B端產品類型

在 B 端產品中，我們需要先認識幾個最常見的業務類型。它們分別是：

1. ERP（Enterprise Resource Planning，企業資源計劃）

ERP 是對企業所擁有、調動的資源進行統一管理的平臺，包括商品的供應鏈，銷售審計，庫存管理，成本核算等等，是今天實業領域必備的系統。

例如，一家連鎖零售商，首先以特定價格購入某貨物，該貨物被運輸到倉庫進行驗收，然後貨物再次運送到某家門店，並於特定日期以特定價格售出。那麼系統可以追蹤該貨物的整個銷售狀況，並可以統計出最終的利潤。

比較有代表性的 ERP 系統有用友、金蝶等廠商的產品。

2. OA（Office Automation，辦公自動化）

OA 系統是通過程序的形式使辦公流程自動化的解決方案，是一個企業除了生產控制之外的一切信息處理與管理的集合。

常見的使用場景：你做了一份報表需要領導審批確認，並且在確認後發給相關的責任方，那麼當你在系統提交這份文件後，領導在系統中只要審核通過系統就會自動分發並備份，增加內部文件流通的效率。

比較有代表性的 OA 系統服務商有泛微、藍凌、致遠等廠商的產品。

3. CRM（Customer Relationship Management，客戶關係管理）

CRM 是企業專門用來管理客戶的工具，尤其對於零售服務行業來說，能更好的維繫和客戶之間的關係是提升銷售額和復購率的重中之重。

在日常生活里，我們在商店里辦的會員卡，還有填寫的用戶資料，就是記錄到 CRM 系統中，後臺可以查看和統計客戶數據，消費額度，賬戶餘額等等。多數情況下，我們手機收到的品牌促銷推廣，就是由 CRM 系統操作的。

比較有代表性的 CRM 產品有 Salesforce 和易享銷客等。

4. SAAS（Software as a Service，軟件即服務）

SAAS 是一個比較寬泛的概念，通常它指第三方提供給企業的線上軟件服務，它既可以包含前面幾種服務類型，也可以是一些更細化的需求。SAAS 是這幾年發展最迅猛的 B 端服務類型。

例如，中小團隊會使用一些 SAAS 軟件來進行團隊協作，如發佈、追蹤任務，分享內部文檔和即時溝通等等。

比較有代表性的 SAAS 產品有 Teambition、Tower、Slack 等。

5. CMS（Content Manage System，產品後臺）

產品後臺是每一個互聯網產品都必備的系統，也是 B 端產品中最常見，數量最多的管理平臺。我們通過這個後臺系統對前端的產品進行管理，包括發編輯內容，處理用戶，統計數據等。

比如在社交應用內通常有一個舉報按鈕，用戶可以舉報違規內容，而這個舉報的信息就會在產品後臺中有對應提示，操作人員就可以進行審核並做出處理。

B端和C端的區別

接下來，我們就要談談有關設計的問題了，因為 B 端產品服務的對象不同，所以它和 C 端的設計有一定的差異，下麵來分析一下它們之間的區別。

1. 需求特點

對於 B 端的產品來說，要解決的問題通常都是比較明確、顯性的。比如前面提到的零售公司在日常運營中需要記錄產品從買入到賣出的流程和數據，產品制定功能時就會緊緊圍繞這個目標展開。

可以說，B 端和 C 端產品在需求上最大的不同，就是為瞭解決問題的主體對象不同。C 端產品是為瞭解決用戶的需求，從功能的制定到交互和設計都圍繞目標用戶展開。而 B 端產品要解決的是企業運營的問題，以完整的實現目標功能為核心，往往是要用戶犧牲體驗去適應功能，而不會為了體驗去刪改功能。

不同於一些簡單的 C 端項目，即使對需求內容沒有什麼理解，只要拿到了產品的原型也能輕鬆完成設計。而 B 端的需求往往非常的複雜，一個界面或者組件會有非常多不同的狀態和細節變化，且操作內容相互交叉，在我們對需求缺乏理解的時候，做出來的設計只會漏洞百出。

2. 交互特點

對於一般的 C 端產品來說，產品通常只是用來獲取信息的載體，我們通過操作界面來獲取商品、視頻、動態、新聞等內容。很多時候，會將部分操作狀態、交互方式進行隱藏，以更好的展示內容。

但在 B 端產品中，雖然信息的展示也很重要，但更重要的目的是通過一系列的操作去篩選或者處理信息。因為這些操作往往步驟比較多，且可操作的選項也多，所以產品對於交互要有更清晰明確的反饋。

例如，可操作的功能都要羅列展示出來，鼠標懸停，跳轉，狀態變更等等也要有對應樣式，並且許多操作步驟需要通過文字提示告知用戶結果。和 C 端的交互比起來，雖然 B 端產品會顯得「啰嗦」，原因就是為了給用戶帶來更準確的操作感受，不讓用戶去「猜」或者刻意「探索」小細節。

3. 設計特點

當我們面向 C 端用戶設計的時候，往往需要增加一些額外的視覺元素來呈現品牌和情感化的表達，並且也要去滿足目標用戶的個性化需要，所以多數 C 端產品看起來會顯得「花哨」。

而 B 端產品是為瞭解決企業的問題，是需要用戶長時間操作並完成工作任務的，對於操作和展示內容無關的元素，越少越好。很多新人會熱衷於下方這類以 C 端視覺標準進行設計的管理界面，但它們對於真實的使用體驗來說顯得過於冗餘。

優秀的 B 端界面設計在視覺的表現上一定是剋制、簡潔、幹練的，因為超出操作需要的視覺元素越多，對於用戶認知的負擔就越重。

4. 技術特點

和手機客戶端不同的是，網頁可以隨意的更改寬度，顯示內容區域差距極大。往往我們既要考慮 1024px 的正常顯示，也要考慮在 2560px 寬下的顯示效果。那麼，這就需要設計師對於前端的知識和框架有深刻的理解，因為沒有這方面的知識，那麼頁面的自適應佈局設計將無從談起。

所以，設計師在進行 B 端設計前，要能熟練掌握 HTML5 和 CSS3 的內容，並能理解 JS 對於頁面佈局的計算方法。

並且，除了完全獨立設計開發的項目以外，還有大量的 B 端項目是採用第三方框架開發而成的，如 Ant、SBadmin、Element 等等。這是因為這些第三方程序可以幫助團隊節省大量的開發時間和精力，避免重覆造輪子。

實際上，B 端的設計內容是可以拆分成若干模塊的，每個模塊都有特定的知識點和理論需要掌握。所以最後，就來分享一下做 B 端產品設計時我們具體在設計什麼內容。

B端設計的內容

1. 佈局設計

B 端產品，就是一套商業系統，在這個系統需要包含眾多的信息和操作功能，而設計的任務之一，就是定義一套佈局框架，將信息和操作功能整合進去，實現有序、統一的操作體驗。

通常，管理界面的佈局會包含以下幾種固定的內容：

• 導航
• 狀態欄
• 內容區域
• 彈窗/邊欄

比如常見的幾種佈局類型：

當然，佈局的設計遠不是到這裡就結束了，除了部分具體的字段、鏈接以外，我們還要將自適應的前端技術考慮進去，如何在拉伸瀏覽器的同時，保證這套佈局的正常使用。

2. 控件設計

作為 UI 設計的一部分，控件的設計自然也少不了。多數控件的設計和一般網頁設計所需的控件差不多，類似按鈕、菜單欄、分頁欄、麵包屑、通知欄、下拉菜單等等。

這部分內容設計起來沒有技術難點，但我們前面講過，B 端產品在交互反饋上的需求，使得我們對控件進行設計時要充分考慮它們的狀態。

例如，一個按鈕可以包含默認、鼠標懸浮、點擊、已點擊、不可點、加載中等多種狀態，這些狀態設計得越全面，則操作的體驗就越好。

3. 表單設計

表單是一個接觸頻率非常高，但對新人來說很陌生的詞彙。簡單點理解，它就是用來在界面中鍵入信息的控件的合集。比如輸入框、複選框、單選框、下拉選框等等。

在 B 端設計中經常需要用一系列的表單控件組成一個完整的業務操作，比如在後臺創建一個用戶賬號，可能就需要通過在輸入框輸入用戶名、密碼，然後用單選框選擇性別，複選框選擇愛好，日期下拉菜單選擇生日等等。

或者，我們還會使用表單的內容進行高級的篩選操作，通過不同的表單控件來設置篩選條件，縮小結果的範疇。

4. 表格設計

在 B 端產品中，數據主要通過表格的形式展現。而有些產品對於表格的理解一無所知，甚至連 Excel 都沒有用過。

表格是 B 端產品呈現信息和數據最重要的組件之一，無論是用戶、產品、訂單或者記錄，我們都需要依靠表格的展現形式進行梳理。

但是，表格的設計並不只是枯燥的畫好線條方格，而是要根據業務的屬性、字段的類型和顯示數量靈活的調整，以及還要考慮如果對每一條數據進行編輯、選中、移動等操作的交互方式。

5. 圖表設計

最後，就要講講圖表的設計了。在大數據概念大熱的今天，人們對數據的重視度越來越高，無論是在新聞還是在會議的 PPT 上，我們都會看見各種各樣的數據內容。而這些數據，通常都以圖表的形式呈現。

常見的圖表包含折線圖、扇形圖、柱狀圖、曲線圖等等，比較常見。但是，有一個普遍的謬誤是，很多新手錯誤地將圖表的設計理解成數據可視化設計。數據可視化是將數據以更複雜、多樣的方式表現出來，不僅在設計上難度更高，且需要極其高昂的開發成本，我們會在後續的內容里說明。

所以，在 B 端設計中，我們對數據的展示只要專註於瞭解主流的圖表類型，並明白如何根據數據展示的需要對它們進行運用即可。

總結

以上就是關於 B 端產品設計的內容，簡單地對管理平臺的設計進行掃盲，讓大家有一個初步的認識，並對一些錯誤的想法進行糾正。

本文由@山人小道 原創發佈於人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基於CC0協議