在今天，互聯(lián)網(wǎng)的影響力與作用與日俱增，除了我們?nèi)粘Ｉ铑I(lǐng)域的改變以外田轧，對(duì)于商業(yè)領(lǐng)域的滲透也見效頗豐。
越來越多的企業(yè)開始使用數(shù)字化的解決方案來助力企業(yè)發(fā)展鞍恢，包括日常管理傻粘、運(yùn)營、統(tǒng)計(jì)等等帮掉∠蚁ぃ或者通過互聯(lián)網(wǎng)的方式開發(fā)出新的業(yè)務(wù)形態(tài)，進(jìn)行產(chǎn)業(yè)升級(jí)蟆炊，如這幾年風(fēng)頭正勁的 “新零售” 領(lǐng)域稽莉，即通過互聯(lián)網(wǎng)對(duì)傳統(tǒng)零售業(yè)升級(jí)和改造的嘗試。
和移動(dòng)互聯(lián)網(wǎng)大潮一樣涩搓，企業(yè)互聯(lián)網(wǎng)化也是大勢(shì)所趨污秆，是公認(rèn)的萬億級(jí)市場(chǎng)，而這場(chǎng)改變才剛剛進(jìn)入初級(jí)階段昧甘，充滿了非常多的機(jī)遇與想象空間良拼。
所以 B 端的產(chǎn)品和需求在近兩年呈井噴的趨勢(shì)，對(duì)于 B 端界面的視覺和交互要求也與日俱增充边。掌握 B 端的設(shè)計(jì)庸推，是今天 UI 設(shè)計(jì)師的必要條件，也可以增加我們的求職廣度和職業(yè)競(jìng)爭(zhēng)力痛黎。
在國內(nèi)予弧，行業(yè)習(xí)慣將互聯(lián)網(wǎng)產(chǎn)品劃分成 “B2C” 或者 “B2B”，B2C 全稱是 Business-to-Consumer 即企業(yè)到客戶的服務(wù)湖饱，B2B 全稱是 Business-to-Business 即企業(yè)對(duì)企業(yè)的服務(wù)掖蛤。還會(huì)進(jìn)一步縮寫成 “2C” 或 “2B”。
C 端產(chǎn)品井厌，是面向終端消費(fèi)用戶的產(chǎn)品蚓庭，對(duì)與使用者而言主要是用來滿足自己的日常生活實(shí)踐需求，例如娛樂仅仆、消費(fèi)器赞、學(xué)習(xí)、出行等等墓拜。
而 B 端產(chǎn)品港柜，是面向企業(yè)用戶的產(chǎn)品，用戶通過它進(jìn)行日常的商業(yè)活動(dòng)，例如企業(yè)庫存管理夏醉，銷售統(tǒng)計(jì)爽锥，員工出勤考核等等∨先幔可以說氯夷，用來解決企業(yè)需求的產(chǎn)品，都是 B 端產(chǎn)品靶擦。
雖然面向企業(yè)的產(chǎn)品對(duì)于新手來說很陌生腮考，聽起來也很枯燥，但是 B 端產(chǎn)品的覆蓋范圍是非常廣泛的玄捕。因?yàn)椴煌髽I(yè)所處行業(yè)和業(yè)務(wù)形式不同踩蔚，所以對(duì) ?B 端產(chǎn)品的要求差異極大，產(chǎn)品運(yùn)行的平臺(tái)可能是手機(jī)桩盲，也可能是平板寂纪、定制安卓設(shè)備、桌面客戶端赌结、網(wǎng)頁程序等捞蛋。
對(duì)于新手來說，要一口氣掌握所有類型的 B 端產(chǎn)品是不切實(shí)際的柬姚，所以我們挑選其中應(yīng)用最廣泛的 “網(wǎng)頁程序” 作為切入點(diǎn)拟杉。而且在國內(nèi)互聯(lián)網(wǎng)語境中，B 端產(chǎn)品的狹義解釋也基本可以和面向企業(yè)的 “網(wǎng)頁程序” 等同量承，用更接地氣的稱呼即 —— 管理平臺(tái)搬设。
管理后臺(tái)已經(jīng)是今天 UI 設(shè)計(jì)師日常工作中必備的內(nèi)容，相信很多已經(jīng)在職的設(shè)計(jì)師已經(jīng)有所體會(huì)撕捍，下面拿穴，我們就來具體認(rèn)識(shí)一下 B 端的管理平臺(tái)設(shè)計(jì)有哪些基礎(chǔ)知識(shí)需要掌握。
在 B 端產(chǎn)品中忧风，我們需要先認(rèn)識(shí)幾個(gè)最常見的業(yè)務(wù)類型默色。它們分別是：
1.ERP （Enterprise Resource Planning，企業(yè)資源計(jì)劃）
ERP 是對(duì)企業(yè)所擁有狮腿、調(diào)動(dòng)的資源進(jìn)行統(tǒng)一管理的平臺(tái)腿宰，包括商品的供應(yīng)鏈，銷售審計(jì)缘厢，庫存管理吃度，成本核算等等，是今天實(shí)業(yè)領(lǐng)域必備的系統(tǒng)贴硫。
例如椿每，一家連鎖零售商，首先以特定價(jià)格購入某貨物，該貨物被運(yùn)輸?shù)絺}庫進(jìn)行驗(yàn)收间护，然后貨物再次運(yùn)送到某家門店删壮，并于特定日期以特定價(jià)格售出。那么系統(tǒng)可以追蹤該貨物的整個(gè)銷售狀況兑牡，并可以統(tǒng)計(jì)出最終的利潤。
比較有代表性的 ERP 系統(tǒng)有用友税灌、金蝶等廠商的產(chǎn)品均函。
2.OA （Office Automation，辦公自動(dòng)化）
OA 系統(tǒng)是通過程序的形式使辦公流程自動(dòng)化的解決方案菱涤，是一個(gè)企業(yè)除了生產(chǎn)控制之外的一切信息處理與管理的集合苞也。
常見的使用場(chǎng)景如，你做了一份報(bào)表需要領(lǐng)導(dǎo)審批確認(rèn)粘秆，并且在確認(rèn)后發(fā)給相關(guān)的責(zé)任方如迟，那么當(dāng)你在系統(tǒng)提交這份文件后，領(lǐng)導(dǎo)在系統(tǒng)中只要審核通過系統(tǒng)就會(huì)自動(dòng)分發(fā)并備份攻走，增加內(nèi)部文件流通的效率殷勘。
比較有代表性的 OA 系統(tǒng)服務(wù)商有范微、藍(lán)凌昔搂、致遠(yuǎn)等廠商的產(chǎn)品玲销。
3.CRM （Customer Relationship Management，客戶關(guān)系管理）
CRM 是企業(yè)專門用來管理客戶的工具摘符，尤其對(duì)于零售服務(wù)行業(yè)來說贤斜，能更好的維系和客戶之間的關(guān)系是提升銷售額和復(fù)購率的重中之中。
在日常生活里逛裤，我們?cè)谏痰昀镛k的會(huì)員卡瘩绒，還是填寫的用戶資料，就是記錄到 CRM 系統(tǒng)中带族，后臺(tái)可以查看和統(tǒng)計(jì)客戶數(shù)據(jù)锁荔，消費(fèi)額度，賬戶余額等等炉菲。多數(shù)情況下堕战，我們手機(jī)收到的品牌促銷推廣，就是由 CRM 系統(tǒng)操作的拍霜。
比較有代表性的 CRM 產(chǎn)品有 Salesforce 和易享銷客等嘱丢。
4.SAAS (Software as a Service，軟件即服務(wù))
SAAS 是一個(gè)比較寬泛的概念祠饺，通常它指第三方提供給企業(yè)的線上軟件服務(wù)越驻，它既可以包含前面幾種服務(wù)類型，也可以是一些更細(xì)化的需求。SAAS 是這幾年發(fā)展最迅猛的 B 端服務(wù)類型缀旁。
例如记劈，中小團(tuán)隊(duì)會(huì)使用一些 SAAS 軟件來進(jìn)行團(tuán)隊(duì)協(xié)作，如發(fā)布并巍、追蹤任務(wù)目木，分享內(nèi)部文檔和即時(shí)溝通等等。
比較有代表性的 SAAS 產(chǎn)品有 Teambition懊渡、Tower刽射、Slack 等。
5.CMS (Content Manage System剃执，產(chǎn)品后臺(tái))
產(chǎn)品后臺(tái)是每一個(gè)互聯(lián)網(wǎng)產(chǎn)品都必備的系統(tǒng)誓禁，也是 B 端產(chǎn)品中最常見，數(shù)量最多的管理平臺(tái)肾档。我們通過這個(gè)后臺(tái)系統(tǒng)對(duì)前端的產(chǎn)品進(jìn)行管理摹恰，包括發(fā)編輯內(nèi)容，處理用戶怒见，統(tǒng)計(jì)數(shù)據(jù)等俗慈。
比如在社交應(yīng)用內(nèi)通常有一個(gè)舉報(bào)按鈕，用戶可以舉報(bào)違規(guī)內(nèi)容速种，而這個(gè)舉報(bào)的信息就會(huì)在產(chǎn)品后臺(tái)中有對(duì)應(yīng)提示姜盈，操作人員就可以進(jìn)行審核并做出處理。
接下來配阵，我們就要談?wù)動(dòng)嘘P(guān)設(shè)計(jì)的問題了馏颂，因?yàn)?B 端產(chǎn)品服務(wù)的對(duì)象不同，所以它和 C 端的設(shè)計(jì)有一定的差異棋傍，下面來分析一下它們之間的區(qū)別救拉。
需求特點(diǎn)
對(duì)于 B 端的產(chǎn)品來說，要解決的問題通常都是比較明確瘫拣、顯性的亿絮。比如前面提到的零售公司在日常運(yùn)營中需要記錄產(chǎn)品從買入到賣出的流程和數(shù)據(jù)，產(chǎn)品制定功能時(shí)就會(huì)緊緊圍繞這個(gè)目標(biāo)展開麸拄。
可以說派昧，B 端和 C 端產(chǎn)品在需求上最大的不同，就是為了解決問題的主體對(duì)象不同拢切，C 端產(chǎn)品是為了解決用戶的需求蒂萎，從功能的制定到交互和設(shè)計(jì)都圍繞目標(biāo)用戶展開。而 B 端產(chǎn)品要解決的是企業(yè)運(yùn)營的問題淮椰，以可以完整的實(shí)現(xiàn)目標(biāo)功能為核心五慈，往往是要用戶犧牲體驗(yàn)去適應(yīng)功能纳寂，而不會(huì)為了體驗(yàn)去刪改功能。
不同于一些簡(jiǎn)單的 C 端項(xiàng)目泻拦，即使對(duì)需求內(nèi)容沒有什么理解毙芜，只要拿到了產(chǎn)品的原型也能輕松完成設(shè)計(jì)。而 B 端的需求往往非常的復(fù)雜争拐，一個(gè)界面或者組件會(huì)有非常多不同的狀態(tài)和細(xì)節(jié)變化腋粥，且操作內(nèi)容相互交叉，在我們對(duì)需求缺乏理解的時(shí)候架曹，作出來的設(shè)計(jì)只會(huì)漏洞百出灯抛。
交互特點(diǎn)
對(duì)于一般的 C 端產(chǎn)品來說，產(chǎn)品通常只是用來獲取信息的載體音瓷，我們通過操作界面來獲取商品、視頻夹抗、動(dòng)態(tài)绳慎、新聞等內(nèi)容。很多時(shí)候漠烧，會(huì)將部分操作狀態(tài)杏愤、交互方式進(jìn)行隱藏，以更好的展示內(nèi)容已脓。
但在 B 端產(chǎn)品中珊楼，雖然信息的展示也很重要，但更重要的目的是通過一系列的操作去篩選或者處理信息度液。因?yàn)檫@些操作往往步驟比較多厕宗，且可操作的選項(xiàng)也多，所以產(chǎn)品對(duì)于交互要有更清晰明確的反饋堕担。
例如已慢，可操作的功能都要羅列展示出來，鼠標(biāo)懸停霹购，跳轉(zhuǎn)佑惠，狀態(tài)變更等等也要有對(duì)應(yīng)樣式，并且許多操作步驟需要通過文字提示告知用戶結(jié)果齐疙。和 C 端的交互比起來膜楷，雖然 B 端產(chǎn)品會(huì)顯得 “啰嗦”，原因就是為了給用戶帶來更準(zhǔn)確的操作感受贞奋，不讓用戶去 “猜” 或者刻意 “探索” 小細(xì)節(jié)赌厅。
設(shè)計(jì)特點(diǎn)
當(dāng)我們面向 C 端用戶設(shè)計(jì)的時(shí)候，往往需要增加一些額外的視覺元素來呈現(xiàn)品牌和情感化的表達(dá)忆矛，并且也要去滿足目標(biāo)用戶的個(gè)性化需要察蹲，所以多數(shù) C 端產(chǎn)品看起來會(huì)顯得 “花哨”请垛。
而 B 端產(chǎn)品是為了解決企業(yè)的問題，是需要用戶長(zhǎng)時(shí)間操作并完成工作任務(wù)的洽议，對(duì)于操作和展示內(nèi)容無關(guān)的元素宗收，越少越好。很多新人會(huì)熱衷于下方這類以 C 端視覺標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)的管理界面亚兄，但它們對(duì)于真實(shí)的使用體驗(yàn)來說顯得過于冗余混稽。
優(yōu)秀的 B 端界面設(shè)計(jì)在視覺的表現(xiàn)上一定是克制、簡(jiǎn)潔审胚、干練的匈勋，因?yàn)槌霾僮餍枰囊曈X元素越多，對(duì)于用戶認(rèn)知的負(fù)擔(dān)就越重膳叨。
技術(shù)特點(diǎn)
和手機(jī)客戶端不同的是洽洁，網(wǎng)頁可以隨意的更改寬度，顯示內(nèi)容區(qū)域差距極大菲嘴。往往我們既要考慮 1024px 的正常顯示饿自，也要考慮在 2560px 寬下的顯示效果。那么龄坪，這就需要設(shè)計(jì)師對(duì)于前端的知識(shí)和框架有深刻的理解昭雌，因?yàn)闆]有這方面的知識(shí)，那么頁面的自適應(yīng)布局設(shè)計(jì)將無從談起健田。
所以烛卧，設(shè)計(jì)師在進(jìn)行 B 端設(shè)計(jì)前，要能熟練掌握 HTML5 和 CSS3 的內(nèi)容妓局，并能理解 JS 對(duì)于頁面布局的計(jì)算方法总放。
并且，除了完全獨(dú)立設(shè)計(jì)開發(fā)的項(xiàng)目以外好爬，還有大量的 B 端項(xiàng)目是采用第三方框架開發(fā)而成的间聊，如 Ant、SBadmin抵拘、Element 等等哎榴。這是因?yàn)檫@些第三方程序可以幫助團(tuán)隊(duì)節(jié)省大量的開發(fā)時(shí)間和精力，避免重復(fù)造輪子僵蛛。
而設(shè)計(jì)師需要根據(jù)這些第三方框架的特性對(duì)頁面進(jìn)行設(shè)計(jì) （類似換膚）尚蝌，掌握前端的知識(shí)知識(shí)越扎實(shí)，那么設(shè)計(jì)的過程也就會(huì)越順利充尉。
實(shí)際上飘言，B 端的設(shè)計(jì)內(nèi)容是可以拆分成若干模塊的，每個(gè)模塊都有特定的知識(shí)點(diǎn)和理論需要掌握驼侠。所以最后姿鸿，就來分享以下做 B 端設(shè)計(jì)時(shí)我們具體在設(shè)計(jì)什么內(nèi)容谆吴。
布局設(shè)計(jì)
B 端產(chǎn)品，就是一套商業(yè)系統(tǒng)苛预，在這個(gè)系統(tǒng)需要包含眾多的信息和操作功能句狼，而設(shè)計(jì)的任務(wù)之一，就是定義一套布局框架热某，將信息和操作功能整合進(jìn)去腻菇，實(shí)現(xiàn)有序、統(tǒng)一的操作體驗(yàn)昔馋。
通常筹吐，管理界面的布局會(huì)包含以下幾種固定的內(nèi)容：
? 導(dǎo)航
? 狀態(tài)欄
? 內(nèi)容區(qū)域
? 彈窗/邊欄
比如常見的幾種布局類型。
當(dāng)然秘遏，布局的設(shè)計(jì)遠(yuǎn)不是到這里就結(jié)束了丘薛，除了部分具體的字段、鏈接以外邦危，我們還要將自適應(yīng)的前端技術(shù)考慮進(jìn)去榔袋，如何在拉伸瀏覽器的同時(shí)保證這套布局的正常使用。
比如在今天最主流的適配方式就是通過 CSS 刪格等分體系铡俐，但這是一個(gè)非常復(fù)雜的話題，我們以后討論妥粟。
控件設(shè)計(jì)
作為 UI 設(shè)計(jì)的一部分审丘，控件的設(shè)計(jì)自然也少不了。多數(shù)控件的設(shè)計(jì)和一般網(wǎng)頁設(shè)計(jì)所需的控件差不多勾给，類似按鈕滩报、菜單欄、分頁欄播急、面包屑脓钾、通知欄、下拉菜單等等桩警。
這部分內(nèi)容設(shè)計(jì)起來沒有技術(shù)難點(diǎn)可训，但我們前面講過，B 端產(chǎn)品在交互反饋上的需求捶枢，使得我們對(duì)控件進(jìn)行設(shè)計(jì)時(shí)要充分考慮它們的狀態(tài)握截。
例如，一個(gè)按鈕可以包含默認(rèn)烂叔、鼠標(biāo)懸浮谨胞、點(diǎn)擊、已點(diǎn)擊蒜鸡、不可點(diǎn)胯努、加載中等多種狀態(tài)牢裳，這些狀態(tài)設(shè)計(jì)得越全面，則操作的體驗(yàn)就越好叶沛。
表單設(shè)計(jì)
表單是一個(gè)接觸頻率非常高蒲讯，但對(duì)新人來說很陌生的詞匯。簡(jiǎn)單點(diǎn)理解恬汁，它就是用來在界面中鍵入信息的控件的合集伶椿。比如輸入框、復(fù)選框氓侧、單選框脊另、下拉選框等等。
在 B 端設(shè)計(jì)中經(jīng)常需要用一系列的表單控件組成一個(gè)完整的業(yè)務(wù)操作约巷，比如在后臺(tái)創(chuàng)建一個(gè)用戶賬號(hào)偎痛，可能就需要通過輸入框輸入用戶名、密碼独郎，然后用單選框選擇性別踩麦，復(fù)選框選擇愛好，日期下拉菜單選擇生日等等氓癌。
或者谓谦，我們還會(huì)使用表單的內(nèi)容進(jìn)行高級(jí)的篩選操作，通過不同的表單控件來設(shè)置篩選條件贪婉，縮小結(jié)果的范疇反粥。
表格設(shè)計(jì)
在 B 端產(chǎn)品中，數(shù)據(jù)主要通過表格的形式展現(xiàn)疲迂。而多數(shù)設(shè)計(jì)師對(duì)于表格的理解一無所知才顿，甚至連 Excel 都沒有用過。
表格是 B 端產(chǎn)品呈現(xiàn)信息和數(shù)據(jù)最重要的組件之一尤蒿，無論是用戶郑气、產(chǎn)品、訂單或者記錄腰池，我們都需要依靠表格的展現(xiàn)形式進(jìn)行梳理尾组。
但是，表格的設(shè)計(jì)并不只是枯燥的畫好線條方格示弓，而是要根據(jù)業(yè)務(wù)的屬性演怎、字段的類型和顯示數(shù)量靈活的調(diào)整，以及還要考慮如果對(duì)每一條數(shù)據(jù)進(jìn)行編輯避乏、選中爷耀、移動(dòng)等操作的交互方式。
圖表設(shè)計(jì)
最后拍皮，就要講講圖表的設(shè)計(jì)了歹叮！在大數(shù)據(jù)概念大熱的今天跑杭，人們對(duì)數(shù)據(jù)的重視度越來越高，無論是在新聞還是在會(huì)議的 PPT 上咆耿，我們都會(huì)看見各種個(gè)樣的數(shù)據(jù)內(nèi)容德谅。而這些數(shù)據(jù)，通常都以圖表的形式呈現(xiàn)萨螺。
常見的圖表包含折線圖窄做、扇形圖、柱狀圖慰技、曲線圖等等椭盏，比較常見。但是吻商，有一個(gè)普遍的謬誤是掏颊，很多新手錯(cuò)誤的將圖表的設(shè)計(jì)理解成數(shù)據(jù)可視化設(shè)計(jì)。數(shù)據(jù)可視化是將數(shù)據(jù)以更復(fù)雜艾帐、多樣的方式表現(xiàn)出來乌叶，不僅在設(shè)計(jì)上難度更高，且需要極其高昂的開發(fā)成本柒爸，我們會(huì)在后續(xù)的內(nèi)容里說明准浴。
所以，在 B 端設(shè)計(jì)中捎稚，我們對(duì)數(shù)據(jù)的展示只要專注于了解主流的圖表類型乐横，并明白如何根據(jù)數(shù)據(jù)的展示的需要對(duì)它們進(jìn)行運(yùn)用即可。
最后
通過以上分享相信會(huì)對(duì)大家有所幫助阳藻，可以更深刻的去理解B端產(chǎn)品設(shè)計(jì)，最后還是希望大家持續(xù)關(guān)注谈撒，微信公眾號(hào)中搜索“小寶談產(chǎn)品”腥泥，讓我們一起在產(chǎn)品和運(yùn)營的路上不斷前行～
文章來源：酸梅干超人
