(網(wǎng)經(jīng)社訊)在今天，互聯(lián)網(wǎng)的影響力與作用與日俱增，除了我們?nèi)粘Ｉ铑I(lǐng)域的改變以外，對于商業(yè)領(lǐng)域的滲透也見效頗豐。
越來越多的企業(yè)開始使用數(shù)字化的解決方案來助力企業(yè)發(fā)展，包括日常管理、運營、統(tǒng)計等等?；蛘咄ㄟ^互聯(lián)網(wǎng)的方式開發(fā)出新的業(yè)務形態(tài)，進行產(chǎn)業(yè)升級，如這幾年風頭正勁的「新零售」領(lǐng)域，即通過互聯(lián)網(wǎng)對傳統(tǒng)零售業(yè)升級和改造的嘗試。
和移動互聯(lián)網(wǎng)大潮一樣，企業(yè)互聯(lián)網(wǎng)化也是大勢所趨，是公認的萬億級市場，而這場改變才剛剛進入初級階段，充滿了非常多的機遇與想象空間。
所以 B 端的產(chǎn)品和需求在近兩年呈井噴式的發(fā)展，對于 B 端界面的視覺和交互要求也與日俱增。
B端產(chǎn)品是什么
在國內(nèi)，行業(yè)習慣將互聯(lián)網(wǎng)產(chǎn)品劃分成「B2C」或者「B2B」，B2C 全稱是 Business-to-Consumer 即企業(yè)到客戶的服務，B2B 全稱是 Business-to-Business，即企業(yè)對企業(yè)的服務。還會進一步縮寫成「2C」或「2B」。
C 端產(chǎn)品，是面向終端消費用戶的產(chǎn)品，對于使用者而言主要是用來滿足自己的日常生活實踐需求，例如娛樂、消費、學習、出行等等。
而 B 端產(chǎn)品，是面向企業(yè)用戶的產(chǎn)品，用戶通過它進行日常的商業(yè)活動，例如企業(yè)庫存管理，銷售統(tǒng)計，員工出勤考核等等?？梢哉f，用來解決企業(yè)需求的產(chǎn)品，都是 B 端產(chǎn)品。
雖然面向企業(yè)的產(chǎn)品對于新手來說很陌生，聽起來也很枯燥，但是 B 端產(chǎn)品的覆蓋范圍是非常廣泛的。因為不同企業(yè)所處行業(yè)和業(yè)務形式不同，所以對 B 端產(chǎn)品的要求差異極大，產(chǎn)品運行的平臺可能是手機，也可能是平板、定制安卓設(shè)備、桌面客戶端、網(wǎng)頁程序等。
對于新手來說，要一口氣掌握所有類型的 B 端產(chǎn)品是不切實際的，所以我們挑選其中應用最廣泛的「網(wǎng)頁程序」作為切入點。而且在國內(nèi)互聯(lián)網(wǎng)語境中，B 端產(chǎn)品的狹義解釋也基本可以和面向企業(yè)的「網(wǎng)頁程序」等同，用更接地氣的稱呼，即是管理平臺。
具體認識一下 B 端的管理平臺設(shè)計有哪些基礎(chǔ)知識需要掌握。
常見的B端產(chǎn)品類型
在 B 端產(chǎn)品中，我們需要先認識幾個最常見的業(yè)務類型。它們分別是：
1. ERP（Enterprise Resource Planning，企業(yè)資源計劃）
ERP 是對企業(yè)所擁有、調(diào)動的資源進行統(tǒng)一管理的平臺，包括商品的供應鏈，銷售審計，庫存管理，成本核算等等，是今天實業(yè)領(lǐng)域必備的系統(tǒng)。
例如，一家連鎖零售商，首先以特定價格購入某貨物，該貨物被運輸?shù)絺}庫進行驗收，然后貨物再次運送到某家門店，并于特定日期以特定價格售出。那么系統(tǒng)可以追蹤該貨物的整個銷售狀況，并可以統(tǒng)計出最終的利潤。
比較有代表性的 ERP 系統(tǒng)有用友、金蝶等廠商的產(chǎn)品。
2. OA（Office Automation，辦公自動化）
OA 系統(tǒng)是通過程序的形式使辦公流程自動化的解決方案，是一個企業(yè)除了生產(chǎn)控制之外的一切信息處理與管理的集合。
常見的使用場景：你做了一份報表需要領(lǐng)導審批確認，并且在確認后發(fā)給相關(guān)的責任方，那么當你在系統(tǒng)提交這份文件后，領(lǐng)導在系統(tǒng)中只要審核通過系統(tǒng)就會自動分發(fā)并備份，增加內(nèi)部文件流通的效率。
比較有代表性的 OA 系統(tǒng)服務商有泛微、藍凌、致遠等廠商的產(chǎn)品。
3. CRM（Customer Relationship Management，客戶關(guān)系管理）
CRM 是企業(yè)專門用來管理客戶的工具，尤其對于零售服務行業(yè)來說，能更好的維系和客戶之間的關(guān)系是提升銷售額和復購率的重中之重。
在日常生活里，我們在商店里辦的會員卡，還有填寫的用戶資料，就是記錄到 CRM 系統(tǒng)中，后臺可以查看和統(tǒng)計客戶數(shù)據(jù)，消費額度，賬戶余額等等。多數(shù)情況下，我們手機收到的品牌促銷推廣，就是由 CRM 系統(tǒng)操作的。
比較有代表性的 CRM 產(chǎn)品有 Salesforce 和易享銷客等。
4. SAAS（Software as a Service，軟件即服務）
SAAS 是一個比較寬泛的概念，通常它指第三方提供給企業(yè)的線上軟件服務，它既可以包含前面幾種服務類型，也可以是一些更細化的需求。SAAS 是這幾年發(fā)展最迅猛的 B 端服務類型。
例如，中小團隊會使用一些 SAAS 軟件來進行團隊協(xié)作，如發(fā)布、追蹤任務，分享內(nèi)部文檔和即時溝通等等。
比較有代表性的 SAAS 產(chǎn)品有 Teambition、Tower、Slack 等。
5. CMS（Content Manage System，產(chǎn)品后臺）
產(chǎn)品后臺是每一個互聯(lián)網(wǎng)產(chǎn)品都必備的系統(tǒng)，也是 B 端產(chǎn)品中最常見，數(shù)量最多的管理平臺。我們通過這個后臺系統(tǒng)對前端的產(chǎn)品進行管理，包括發(fā)編輯內(nèi)容，處理用戶，統(tǒng)計數(shù)據(jù)等。
比如在社交應用內(nèi)通常有一個舉報按鈕，用戶可以舉報違規(guī)內(nèi)容，而這個舉報的信息就會在產(chǎn)品后臺中有對應提示，操作人員就可以進行審核并做出處理。
B端和C端的區(qū)別
接下來，我們就要談談有關(guān)設(shè)計的問題了，因為 B 端產(chǎn)品服務的對象不同，所以它和 C 端的設(shè)計有一定的差異，下面來分析一下它們之間的區(qū)別。
1. 需求特點
對于 B 端的產(chǎn)品來說，要解決的問題通常都是比較明確、顯性的。比如前面提到的零售公司在日常運營中需要記錄產(chǎn)品從買入到賣出的流程和數(shù)據(jù)，產(chǎn)品制定功能時就會緊緊圍繞這個目標展開。
可以說，B 端和 C 端產(chǎn)品在需求上最大的不同，就是為了解決問題的主體對象不同。C 端產(chǎn)品是為了解決用戶的需求，從功能的制定到交互和設(shè)計都圍繞目標用戶展開。而 B 端產(chǎn)品要解決的是企業(yè)運營的問題，以完整的實現(xiàn)目標功能為核心，往往是要用戶犧牲體驗去適應功能，而不會為了體驗去刪改功能。
不同于一些簡單的 C 端項目，即使對需求內(nèi)容沒有什么理解，只要拿到了產(chǎn)品的原型也能輕松完成設(shè)計。而 B 端的需求往往非常的復雜，一個界面或者組件會有非常多不同的狀態(tài)和細節(jié)變化，且操作內(nèi)容相互交叉，在我們對需求缺乏理解的時候，做出來的設(shè)計只會漏洞百出。
2. 交互特點
對于一般的 C 端產(chǎn)品來說，產(chǎn)品通常只是用來獲取信息的載體，我們通過操作界面來獲取商品、視頻、動態(tài)、新聞等內(nèi)容。很多時候，會將部分操作狀態(tài)、交互方式進行隱藏，以更好的展示內(nèi)容。
但在 B 端產(chǎn)品中，雖然信息的展示也很重要，但更重要的目的是通過一系列的操作去篩選或者處理信息。因為這些操作往往步驟比較多，且可操作的選項也多，所以產(chǎn)品對于交互要有更清晰明確的反饋。
例如，可操作的功能都要羅列展示出來，鼠標懸停，跳轉(zhuǎn)，狀態(tài)變更等等也要有對應樣式，并且許多操作步驟需要通過文字提示告知用戶結(jié)果。和 C 端的交互比起來，雖然 B 端產(chǎn)品會顯得「啰嗦」，原因就是為了給用戶帶來更準確的操作感受，不讓用戶去「猜」或者刻意「探索」小細節(jié)。
3. 設(shè)計特點
當我們面向 C 端用戶設(shè)計的時候，往往需要增加一些額外的視覺元素來呈現(xiàn)品牌和情感化的表達，并且也要去滿足目標用戶的個性化需要，所以多數(shù) C 端產(chǎn)品看起來會顯得「花哨」。
而 B 端產(chǎn)品是為了解決企業(yè)的問題，是需要用戶長時間操作并完成工作任務的，對于操作和展示內(nèi)容無關(guān)的元素，越少越好。很多新人會熱衷于下方這類以 C 端視覺標準進行設(shè)計的管理界面，但它們對于真實的使用體驗來說顯得過于冗余。
優(yōu)秀的 B 端界面設(shè)計在視覺的表現(xiàn)上一定是克制、簡潔、干練的，因為超出操作需要的視覺元素越多，對于用戶認知的負擔就越重。
4. 技術(shù)特點
和手機客戶端不同的是，網(wǎng)頁可以隨意的更改寬度，顯示內(nèi)容區(qū)域差距極大。往往我們既要考慮 1024px 的正常顯示，也要考慮在 2560px 寬下的顯示效果。那么，這就需要設(shè)計師對于前端的知識和框架有深刻的理解，因為沒有這方面的知識，那么頁面的自適應布局設(shè)計將無從談起。
所以，設(shè)計師在進行 B 端設(shè)計前，要能熟練掌握 HTML5 和 CSS3 的內(nèi)容，并能理解 JS 對于頁面布局的計算方法。
并且，除了完全獨立設(shè)計開發(fā)的項目以外，還有大量的 B 端項目是采用第三方框架開發(fā)而成的，如 Ant、SBadmin、Element 等等。這是因為這些第三方程序可以幫助團隊節(jié)省大量的開發(fā)時間和精力，避免重復造輪子。
實際上，B 端的設(shè)計內(nèi)容是可以拆分成若干模塊的，每個模塊都有特定的知識點和理論需要掌握。所以最后，就來分享一下做 B 端產(chǎn)品設(shè)計時我們具體在設(shè)計什么內(nèi)容。
B端設(shè)計的內(nèi)容
1. 布局設(shè)計
B 端產(chǎn)品，就是一套商業(yè)系統(tǒng)，在這個系統(tǒng)需要包含眾多的信息和操作功能，而設(shè)計的任務之一，就是定義一套布局框架，將信息和操作功能整合進去，實現(xiàn)有序、統(tǒng)一的操作體驗。
通常，管理界面的布局會包含以下幾種固定的內(nèi)容：
導航
狀態(tài)欄
內(nèi)容區(qū)域
彈窗/邊欄
比如常見的幾種布局類型：
當然，布局的設(shè)計遠不是到這里就結(jié)束了，除了部分具體的字段、鏈接以外，我們還要將自適應的前端技術(shù)考慮進去，如何在拉伸瀏覽器的同時，保證這套布局的正常使用。
2. 控件設(shè)計
作為 UI 設(shè)計的一部分，控件的設(shè)計自然也少不了。多數(shù)控件的設(shè)計和一般網(wǎng)頁設(shè)計所需的控件差不多，類似按鈕、菜單欄、分頁欄、面包屑、通知欄、下拉菜單等等。
這部分內(nèi)容設(shè)計起來沒有技術(shù)難點，但我們前面講過，B 端產(chǎn)品在交互反饋上的需求，使得我們對控件進行設(shè)計時要充分考慮它們的狀態(tài)。
例如，一個按鈕可以包含默認、鼠標懸浮、點擊、已點擊、不可點、加載中等多種狀態(tài)，這些狀態(tài)設(shè)計得越全面，則操作的體驗就越好。
3. 表單設(shè)計
表單是一個接觸頻率非常高，但對新人來說很陌生的詞匯。簡單點理解，它就是用來在界面中鍵入信息的控件的合集。比如輸入框、復選框、單選框、下拉選框等等。
在 B 端設(shè)計中經(jīng)常需要用一系列的表單控件組成一個完整的業(yè)務操作，比如在后臺創(chuàng)建一個用戶賬號，可能就需要通過在輸入框輸入用戶名、密碼，然后用單選框選擇性別，復選框選擇愛好，日期下拉菜單選擇生日等等。
或者，我們還會使用表單的內(nèi)容進行高級的篩選操作，通過不同的表單控件來設(shè)置篩選條件，縮小結(jié)果的范疇。
4. 表格設(shè)計
在 B 端產(chǎn)品中，數(shù)據(jù)主要通過表格的形式展現(xiàn)。而有些產(chǎn)品對于表格的理解一無所知，甚至連 Excel 都沒有用過。
表格是 B 端產(chǎn)品呈現(xiàn)信息和數(shù)據(jù)最重要的組件之一，無論是用戶、產(chǎn)品、訂單或者記錄，我們都需要依靠表格的展現(xiàn)形式進行梳理。
但是，表格的設(shè)計并不只是枯燥的畫好線條方格，而是要根據(jù)業(yè)務的屬性、字段的類型和顯示數(shù)量靈活的調(diào)整，以及還要考慮如果對每一條數(shù)據(jù)進行編輯、選中、移動等操作的交互方式。
5. 圖表設(shè)計
最后，就要講講圖表的設(shè)計了。在大數(shù)據(jù)概念大熱的今天，人們對數(shù)據(jù)的重視度越來越高，無論是在新聞還是在會議的 PPT 上，我們都會看見各種各樣的數(shù)據(jù)內(nèi)容。而這些數(shù)據(jù)，通常都以圖表的形式呈現(xiàn)。
常見的圖表包含折線圖、扇形圖、柱狀圖、曲線圖等等，比較常見。但是，有一個普遍的謬誤是，很多新手錯誤地將圖表的設(shè)計理解成數(shù)據(jù)可視化設(shè)計。數(shù)據(jù)可視化是將數(shù)據(jù)以更復雜、多樣的方式表現(xiàn)出來，不僅在設(shè)計上難度更高，且需要極其高昂的開發(fā)成本，我們會在后續(xù)的內(nèi)容里說明。
所以，在 B 端設(shè)計中，我們對數(shù)據(jù)的展示只要專注于了解主流的圖表類型，并明白如何根據(jù)數(shù)據(jù)展示的需要對它們進行運用即可。
總結(jié)
以上就是關(guān)于 B 端產(chǎn)品設(shè)計的內(nèi)容，簡單地對管理平臺的設(shè)計進行掃盲，讓大家有一個初步的認識，并對一些錯誤的想法進行糾正。（編選：網(wǎng)經(jīng)社）
