前言

B 端的產(chǎn)品和需求在近兩年呈井噴的趨勢杉允，對于 B 端界面的視覺和交互要求也與日俱增奖磁。掌握 B 端的設(shè)計，是今天 UI 設(shè)計師的必要條件，也可以增加我們的求職廣度和職業(yè)競爭力。在這分享下自己在做B端后臺的一些總結(jié)和思考合是，歡迎大家一起溝通交流汽久。

重點概覽

什么是 B端產(chǎn)品？

B端和C端的區(qū)別

B端產(chǎn)品該如何設(shè)計?（設(shè)計前、設(shè)計中失乾、設(shè)計后）

總結(jié)

什么是B端產(chǎn)品？

B端產(chǎn)品也叫2B（to Business）產(chǎn)品募壕，使用對象一般為企業(yè)客戶或組織调炬。B端產(chǎn)品幫助企業(yè)或組織通過協(xié)同辦公，解決某類管理問題硝逢，承擔(dān)著為企業(yè)或組織提升效率排宰、降低成本硬毕、控制風(fēng)險從而提高企業(yè)收入，減少企業(yè)內(nèi)部損耗的重要職責(zé)礼仗。B端產(chǎn)品的工作是合理實現(xiàn)企業(yè)需求吐咳，提高產(chǎn)品核心競爭力逻悠，并提升市場價值。在國內(nèi)互聯(lián)網(wǎng)語境中韭脊，B 端產(chǎn)品的狹義解釋也基本可以和面向企業(yè)的 “網(wǎng)頁程序” 等同童谒，用更接地氣的稱呼可以叫“管理平臺“、”管理端“沪羔。

B端產(chǎn)品大致分為兩類饥伊，一種是支撐前臺產(chǎn)品的，一種是管理各種資源的蔫饰，前者就是我們熟悉的后臺產(chǎn)品琅豆，后者就是給各個企業(yè)服務(wù)，提高各個企業(yè)工作效率的B端產(chǎn)品篓吁。

支撐前臺產(chǎn)品的：

C端產(chǎn)品線的后臺產(chǎn)品（比如我們常用的淘寶茫因、微信、餓了么杖剪、美團(tuán)這種C端產(chǎn)品冻押，他都需要有個后臺進(jìn)行各種前端信息的管理。）

平臺級工具產(chǎn)品（比如微信公眾號盛嘿、頭條號等對用戶和文章的數(shù)據(jù)實時統(tǒng)計翼雀，可編輯文章，回復(fù)消息等）

管理各種資源的:

OA辦公系統(tǒng)(OA 系統(tǒng)是通過程序的形式使辦公流程自動化的解決方案)

CRM系統(tǒng)?（CRM 是企業(yè)專門用來管理客戶的工具）

SaaS系統(tǒng)（SAAS 通常它指第三方提供給企業(yè)的線上軟件服務(wù)孩擂，它既可以包含前面幾種服務(wù)類型，也可以是一些更細(xì)化的需求箱熬。）

ERP系統(tǒng)（ERP 是對企業(yè)所擁有类垦、調(diào)動的資源進(jìn)行統(tǒng)一管理的平臺）

WMS系統(tǒng)（WMS是倉庫管理系統(tǒng)的縮寫，通過入庫業(yè)務(wù)城须、出庫業(yè)務(wù)蚤认、倉庫調(diào)撥、庫存調(diào)撥和虛倉管理等功能糕伐，綜合批次管理砰琢、物料對應(yīng)、庫存盤點良瞧、質(zhì)檢管理陪汽、虛倉管理和即時庫存管理等功能綜合運(yùn)用的管理系統(tǒng)）

TMS系統(tǒng)（TMS是運(yùn)輸管理系統(tǒng)能夠?qū)ξ锪鞴镜乃熊囕v進(jìn)行實時跟蹤（結(jié)合GPS系統(tǒng)），保持信息流和物流的暢通褥蚯。）

呼叫中心客服系統(tǒng)

FMS財務(wù)管理系統(tǒng)

B端和C端的區(qū)別

從定義上：

B端：To B 就是 To business挚冤，面向企業(yè)或者特定用戶群體的企業(yè)級別產(chǎn)品；

C端：To C 就是 To customer赞庶，產(chǎn)品面向普通大眾消費者训挡。

從用戶群體上：

B端：產(chǎn)品一般是多種角色澳骤，有決策者、管理者和執(zhí)行者澜薄，B端往往是基于公司層面多人對某一問題解決方案進(jìn)行整體評估为肮。

C端：用戶群體較單一，或者是專注于某一領(lǐng)域群體肤京，可根據(jù)性別颊艳，職業(yè)或行為偏好等關(guān)鍵屬性進(jìn)行分類。

業(yè)務(wù)場景

?B端：業(yè)務(wù)場景多蟆沫、邏輯復(fù)雜籽暇，根據(jù)每個人角色需要有不同的解決方案

C端：業(yè)務(wù)場景較單一，或者專注于某個垂直的使用場景饭庞。

用戶的訴求：

B端：控制成本戒悠、提高效率，注重安全和穩(wěn)定

C端：重視人性和用戶體驗

盈利模式：

B端：有明確的盈利模式和用戶群體舟山。

C端：大部門C端產(chǎn)品都是使用免費绸狐，以此吸引用戶使用，等積累到一定數(shù)量數(shù)量需要探索變現(xiàn)的路徑累盗，或者尋找其他變現(xiàn)的路徑寒矿。

B端產(chǎn)品該如何設(shè)計？

了解了B端和C端的區(qū)別若债，B端產(chǎn)品的實用性大于美觀性符相，能切實解決問題、配置資源的B端產(chǎn)品才是一個好的B端產(chǎn)品蠢琳。在設(shè)計上對于操作和展示內(nèi)容無關(guān)的元素啊终，越少越好。很多人剛開始接觸B端傲须，會熱衷于以 C 端視覺標(biāo)準(zhǔn)進(jìn)行設(shè)計蓝牲，對于真實的使用體驗來說顯得過于冗余、炫技泰讽。那么在B端設(shè)計中該如何思考去設(shè)計呢例衍？下面我以設(shè)計前、中已卸、后的三個方向去闡述我在做B端設(shè)計中的一些思考：

設(shè)計前：

需求分析

1佛玄、分析產(chǎn)品的背景是什么，要做什么咬最，要給用戶怎樣的視覺感翎嫡？他的競品狀況是怎樣的進(jìn)行一些分析（一般b端的產(chǎn)品競品是極少的），了解一些行業(yè)內(nèi)的資料永乌。

2惑申、目標(biāo)用戶群有哪些具伍？不同角色的用戶有哪些具體的權(quán)限？（這里簡要了解下大概的人群圈驼，沒必要想c端產(chǎn)品那種那么明確）

3人芽、設(shè)計的產(chǎn)品主要解決用戶或者業(yè)務(wù)上的哪些具體痛點，復(fù)現(xiàn)分析下使用場景绩脆，在需求分析階段萤厅，要對產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。

使用場景靴迫、硬件情況

1惕味、了解用戶的使用場景，可以有助于我們復(fù)現(xiàn)分析用戶是如何使用我們設(shè)計的界面的玉锌。

2名挥、用戶的硬件情況，了解主流用戶的屏幕分辨率是多少主守，根據(jù)主流分辨率做設(shè)計稿≠骶螅現(xiàn)在PC主流的分辨率占比排名前三的是1920*1080、1366*768参淫、1440*900救湖，以1440來設(shè)計的話，向上適配或者向下適配誤差會比較小涎才。這里也不是必須鞋既，如果用戶全部都是用小屏筆記本辦公，在1920設(shè)計稿上做適配可能小屏幕上展示會出現(xiàn)滾動條耍铜，會比較擁擠涛救。

梳理交互流程：拿到需求后切勿打開花瓣站酷一陣擼，一定要對需求進(jìn)行梳理（有的公司有專門的交互設(shè)計來做）做B端產(chǎn)品最重要的是對業(yè)務(wù)的理解业扒，在梳理過程中一定要跟產(chǎn)品隨時溝通，產(chǎn)品的業(yè)務(wù)流程是怎樣的舒萎？有哪些同類型的產(chǎn)品程储？和他們相比我們的產(chǎn)品有什么特色和特點？充分理解了業(yè)務(wù)再去做設(shè)計就會有事半功倍的效果臂寝。

情緒版章鲤，定義風(fēng)格：梳理完需求就可以定義設(shè)計風(fēng)格了，在設(shè)計風(fēng)格上盡量做到簡潔咆贬，B端產(chǎn)品實用性大于美觀性败徊，減少不必要的裝飾元素給用戶操作上帶來干擾。這里可以運(yùn)用情緒版去定義設(shè)計風(fēng)格掏缎，大概的流程就是皱蹦，根據(jù)產(chǎn)品業(yè)務(wù)背景定義設(shè)計關(guān)鍵詞煤杀、根據(jù)關(guān)鍵詞去找參考圖片定義設(shè)計風(fēng)格，產(chǎn)品的主題色也可以根據(jù)情緒版來去定義沪哺。

設(shè)計中：

布局??布局上根據(jù)導(dǎo)航可分為以下三種：

水平導(dǎo)航布局：類似于普通網(wǎng)頁的布局樣式導(dǎo)航沈自，順應(yīng)了從上至下的正常瀏覽 順序，方便瀏覽信息辜妓；頂部寬度限制了導(dǎo)航的數(shù)量和文本長度枯途。適用于導(dǎo)航較少，頁面篇幅較長的產(chǎn)品籍滴。

垂直導(dǎo)航布局：可將導(dǎo)航欄固定在左側(cè)酪夷，提高導(dǎo)航可見性，方便頁面之間切換孽惰；頂部可放置常用工具晚岭，如搜索條、幫助按鈕灰瞻、通知按鈕等腥例。菜單欄還可以展開收起，適用于結(jié)構(gòu)簡單的產(chǎn)品酝润。

混合導(dǎo)航布局：結(jié)合了水平導(dǎo)航和垂直導(dǎo)航的特點燎竖，層級可以擴(kuò)展到二、三級菜單要销，且能夠更加清晰的區(qū)分常用業(yè)務(wù)功能操作和輔助操作构回。適用于功能模塊較多、較復(fù)雜的工具類型后臺疏咐。

不同形態(tài)的布局纤掸，適配方式也不同。在做設(shè)計之前了解下適配的原理浑塞，避免在不同設(shè)備上出現(xiàn)視覺上的誤差借跪。水平導(dǎo)航布局，在適配方案中做法是對兩邊留白區(qū)域進(jìn)行最小值的定義酌壕，當(dāng)留白區(qū)域到達(dá)限定值之后再對中間的主內(nèi)容區(qū)域進(jìn)行動態(tài)縮放掏愁。如圖：

垂直導(dǎo)航布局和混合型導(dǎo)航布局卵牍，在適配方案中常見的做法是將左邊的導(dǎo)航欄固定，對右邊的工作區(qū)域進(jìn)行動態(tài)縮放糊昙。如圖：

最后說一下布局上的柵格，柵格會使整體頁面更加工整簡潔释牺，內(nèi)容區(qū)域采用24柵格（并非固定數(shù)值回挽，參照案例24柵格布局），就不一一敘述柵格的定義與運(yùn)用了欠气，大家可以參考下網(wǎng)上有好多關(guān)于柵格的文章厅各，如圖：

顏色

顏色上大致分為品牌色（可以結(jié)合業(yè)務(wù)屬性）、功能色（比如紅黃綠藍(lán)燈成功预柒、出錯队塘、失敗烟很、提醒氯哮、鏈接等躬柬。功能色的選取需要遵守用戶對色彩的基本認(rèn)知）仍侥、?中性色（如深灰中灰淺灰忙干，文字部分應(yīng)用居多悼凑，此外背景嘁酿、邊框徙硅、分割線即碗、等場景中也非常常見）?其他色如統(tǒng)計圖焰情、數(shù)據(jù)可視化、多個標(biāo)簽的不同配色方案根據(jù)項目情況單獨設(shè)定剥懒。

字體

在B端系統(tǒng)中優(yōu)先使用系統(tǒng)默認(rèn)的界面字體内舟，常用中文字體有微軟雅黑、蘋方初橘、思源黑體验游，英文字體有Arial、Helvetica?系統(tǒng)不同展示的字體也不相同保檐。

字體大小常見的有12px耕蝉、13px、14px夜只、16px垒在、20px、24px扔亥、30px等爪膊。

規(guī)范

一份好的規(guī)范能夠讓設(shè)計和開發(fā)更加高效的工作，并且能夠指引一些設(shè)計的細(xì)節(jié)砸王，通過對大小谦铃、顏色榔昔、邊距等瘪菌、呼吸感等一些細(xì)節(jié)點的標(biāo)注师妙，可以讓新加入的設(shè)計師快速上手設(shè)計默穴。一個項目會有多個設(shè)計師的參與褪秀，規(guī)范化的設(shè)計語言，避免因設(shè)計控件混亂而影響設(shè)計輸出仑氛。好的設(shè)計規(guī)范還能統(tǒng)一在產(chǎn)品中不同頁面的相同板塊的樣式問題锯岖，為開發(fā)組件庫奠定基礎(chǔ)甫何。

如何建立一份規(guī)范呢？大概總結(jié)以下幾點：

1趋箩、首先是要梳理產(chǎn)品中不同板塊所出現(xiàn)的場景進(jìn)程收集（收集產(chǎn)品所有出現(xiàn)過的場景進(jìn)行整理）

2叫确、其次是把收集完的板塊歸納分類（不同的樣式芍锦、狀態(tài)等可以分成不同的種類）

3、最后就可以定義規(guī)范了次乓。

定義好設(shè)計規(guī)范能大大提高設(shè)計師的工作效率票腰，在同一個項目中也能更好的把控項目的視覺規(guī)范女气，幫助設(shè)計師復(fù)用及設(shè)計延展。

組件

B端產(chǎn)品的決策方是老板和管理層缘滥，在設(shè)計B端產(chǎn)品中往往也是大多數(shù)情況下會有接到比較緊急的需求的情況朝扼，所以在設(shè)計過程中就需要我們設(shè)計師更加去注重效率，提高產(chǎn)能榛斯。做東西時要有組件化思維肠仪，去總結(jié)分析頁面模塊中的一些共性，跟開發(fā)共同完成產(chǎn)品的組件庫意述。

如果沒有前端工程師荤崇，我們的設(shè)計組件庫就是PNG潮针。所以，在開工前瓣戚，一定要和那個技術(shù)不錯的前端工程師聊聊做設(shè)計組件庫的事情子库，其中最重要的是確定好：選擇什么樣的前端框架矗晃。

如果組件庫服務(wù)的是B端或者中后臺系統(tǒng)，那其實有很多可參考的開源組件框架：Ant Design仓技、ElemetUI脖捻、Layui等兆衅，注意不同的框架用到的前端技術(shù)不一樣颜价，兼容的瀏覽器版本也不一樣，這要根據(jù)你們技術(shù)情況作選擇夕春。如果覺得開源框架的風(fēng)格和你們的產(chǎn)品不統(tǒng)一及志，那就需要二次設(shè)計和開發(fā)封裝。

下面是螞蟻金服組件庫率寡，如圖根據(jù)組件的功能特點做出了分類：通用倚搬、布局每界、導(dǎo)航、數(shù)據(jù)錄入庙楚、數(shù)據(jù)展示趴樱、反饋叁征、其他等。大家可以去官網(wǎng)查看塞祈，這里就不在一一做闡述了帅涂。

這個是餓了么的組件庫：

推薦幾個官方組件庫：

1斯议、餓了么官方組件庫??

https://element.eleme.cn/#/zh-CN/component/installation

2醇锚、螞蟻金服官方組件庫?

https://ant.design/docs/spec/introduce-cn

3坯临、layui 官方組件庫??

https://www.layui.com/admin/std/dist/views/

4看靠、阿里官方組件庫??

https://fusion.design/component/doc/102

5挟炬、iviewui官方組件庫?

https://www.iviewui.com/components/menu

做之前大家一定要去多去查看這些大廠做的已成型的開源組件庫嗦哆，然后再結(jié)合工作業(yè)務(wù)特色做出自己公司特有的定制化組件庫。有了組件庫之后粥喜，再接到緊急需求额湘，我們就可以做到事半功倍的效果约郁。先去分析頁面的構(gòu)成，然后花費80%的時間去設(shè)計需求中20%的頁面供置，剩下的通用型頁面就可以直接用組件庫堆出來了绽快。

設(shè)計后：

設(shè)計走查

在完成設(shè)計后坊罢，要整體對設(shè)計頁面進(jìn)行走查。從信息層級物遇、文字憾儒、圖標(biāo)起趾、圖片等方面進(jìn)行多次設(shè)計驗證與測試。

高質(zhì)量設(shè)計交付

設(shè)計稿命名一定要清晰規(guī)范眶根，現(xiàn)在好多切圖標(biāo)注的插件，一鍵生成切圖標(biāo)注∈舭伲現(xiàn)在就沒有必要單獨整理切圖標(biāo)注了族扰，但是設(shè)計稿在交付前切圖的命名一定要在設(shè)計稿里整理清楚，規(guī)范命名方便開發(fā)查閱。

推薦幾款比較常用的切圖標(biāo)注的插件：

1忧额、藍(lán)湖

https://lanhuapp.com/mac?

2睦番、pxcook像素大廚?

https://www.fancynode.com.cn/pxcook?

3、Sketch Measure?

https://oursketch.com/plugin/sketch-measure

設(shè)計追蹤巩检、校驗

設(shè)計稿給到開發(fā)在設(shè)計過程中示启，要隨時跟開發(fā)溝通夫嗓。項目上線后要對線上效果進(jìn)行實時UI校驗，保證開發(fā)同學(xué)對設(shè)計稿的高度還原矩父。還有就是對設(shè)計上線后的驗證工作排霉，用戶使用和反饋是優(yōu)化產(chǎn)品的重要途徑，針對性的在一些主流的頁面 模塊按鈕進(jìn)行一些數(shù)據(jù)的埋點球订，統(tǒng)計下用戶的點擊狀況辙售，實時對數(shù)據(jù)進(jìn)行一些跟進(jìn)飞涂，為下次頁面改版優(yōu)化祈搜，提供有力的數(shù)據(jù)支撐容燕，提升產(chǎn)品的用戶體驗蘸秘。

總結(jié)

不管B端還是C端蝗茁，設(shè)計的價值在于通過視覺表現(xiàn)的方式去助力公司、助力產(chǎn)品實現(xiàn)用戶的需求颈嚼、幫助用戶解決問題饭寺。B端產(chǎn)品相對而言，場景艰匙、功能、業(yè)務(wù)流程署驻、信息架構(gòu)要比C端更復(fù)雜硕舆，面對的異常情況也比較多骤公，所以B端在設(shè)計風(fēng)格上盡量做到簡潔，B端產(chǎn)品實用性大于美觀性凌节，在每一個功能的設(shè)計都需要你去思考很多方面：用戶易用洒试、信息層級垒棋、未來擴(kuò)展，你都要做出取舍畔裕，而對于每個模塊都需要你思考、結(jié)合用戶場景扮饶。所以想要做好B端設(shè)計甜无，一定要去了解業(yè)務(wù)，了解用戶需求陵究。

以上是我在做B端設(shè)計中的一些思考和總結(jié)奥帘，希望能夠幫助到你翩概，不足之處歡迎隨時溝通交流钥庇。