編輯導(dǎo)語(yǔ)：To C市場(chǎng)如今已經(jīng)越來(lái)越飽和，流量的獲取難度也越來(lái)越大，于是從To B向To C方法探索也是大勢(shì)所趨。對(duì)于不少設(shè)計(jì)師來(lái)說，習(xí)慣了C端設(shè)計(jì)，轉(zhuǎn)到B端后一時(shí)間有點(diǎn)不知所措。本文作者總結(jié)了自己負(fù)責(zé)B端產(chǎn)品設(shè)計(jì)的一些經(jīng)驗(yàn)，為我們分享了這篇指南。

To C市場(chǎng)的表現(xiàn)隨著用戶逐漸趨向飽和，流量紅利也盡顯頹勢(shì)，向To B延展已成為To C產(chǎn)品探索的新方向，國(guó)內(nèi)的互聯(lián)網(wǎng)巨頭也是紛紛布局To B業(yè)務(wù)。

B端行業(yè)需求量的增加更多B端設(shè)計(jì)師（互聯(lián)網(wǎng)打工人）開始涌入，還在互聯(lián)網(wǎng)C端折騰的互聯(lián)網(wǎng)打工人們，說不定哪天就轉(zhuǎn)做B端了呢。無(wú)論是C端與B端選哪個(gè)方向都沒有錯(cuò)，建議都嘗試下再根據(jù)個(gè)人興趣選擇一個(gè)深耕方向一直去探索。

接下來(lái)就我負(fù)責(zé)一些B端產(chǎn)品設(shè)計(jì)淺談我的看法，看完本文你會(huì)學(xué)到：

1. B端是什么？
2. 了解B端組件及搭建組件庫(kù)
3. 3如何確定B端設(shè)計(jì)尺寸與標(biāo)準(zhǔn)
4. 4搭建B端后臺(tái)系統(tǒng)

一、初識(shí)B端

B 端設(shè)計(jì)，從承接載體來(lái)看就是網(wǎng)頁(yè)設(shè)計(jì)，只是因?yàn)樾袠I(yè)屬性、用戶群體的不同而賦予的代名詞。

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

• C端：Consumer，通常為了滿足消費(fèi)者、個(gè)人終端用戶其某個(gè)場(chǎng)景下的需要而使用的客戶端。如：微信、美團(tuán)、京東等；
• B端：Business，通常為了前臺(tái)業(yè)務(wù)體系更好的為用戶服務(wù)而做的，主要企業(yè)內(nèi)部用戶使用或商家使用的管理系統(tǒng)，如CRM、ERP、OA、工單系統(tǒng)等。

2. 視覺體驗(yàn)設(shè)計(jì)的差異

C端產(chǎn)品需要兼顧“用戶體驗(yàn)”和“商業(yè)化變現(xiàn)”的平衡，所以會(huì)額外重視在視覺體驗(yàn)上的設(shè)計(jì)。不僅要讓用戶有好的體驗(yàn)，更要用趣味性的設(shè)計(jì)引起用戶共鳴，用戶的要求就是好看、好用、好玩。

B端產(chǎn)品注重操作者的使用效率、成本、管控，追求服務(wù)的穩(wěn)定性、保證能力、安全性，所以在視覺體驗(yàn)上多是保持干凈簡(jiǎn)單的簡(jiǎn)潔風(fēng)。

二、了解B端組件庫(kù)

組件化對(duì)于設(shè)計(jì)師來(lái)說相信已經(jīng)不陌生了，簡(jiǎn)單的說，組件化即是產(chǎn)品中的通用模塊進(jìn)行元素拆解、整理、重組為一套「多維度」的解決方案，組件化在運(yùn)營(yíng)設(shè)計(jì)、UI、交互、動(dòng)效、開發(fā)等多方面都能用上，一套完整的組件庫(kù)無(wú)論對(duì)于產(chǎn)品、設(shè)計(jì)還是開發(fā)來(lái)說，無(wú)疑都大大提高設(shè)計(jì)品質(zhì)、提高工作效率與減少溝通成本。

1. 了解UI框架

在B端后臺(tái)開發(fā)過程中，前端同學(xué)都是基于UI框架進(jìn)行開發(fā)的，引入一些開源的UI框架或者公司自建的UI框架，使用這些框架開發(fā)可以把一些通用的模塊用代碼封裝起來(lái)在項(xiàng)目中重復(fù)使用。

因此在設(shè)計(jì)時(shí)就要求我們掌握主流UI框架的設(shè)計(jì)規(guī)范，然后基于這套框架的規(guī)范進(jìn)行設(shè)計(jì)及延展。比如Ant Design、Element、iview、Layui等這些前端常使用的UI框架。

Ant design等平臺(tái)的這些組件只是覆蓋了通用場(chǎng)景，對(duì)于一些定制化的產(chǎn)品需求是無(wú)法滿足的，無(wú)論是單個(gè)產(chǎn)品或產(chǎn)品線，因品牌差異性在不斷成熟過程中都有屬于自己的組件庫(kù)（UI KIT）。

以下是我基于組件的類別與使用場(chǎng)景的不同進(jìn)行了分類，組件的應(yīng)用上每個(gè)產(chǎn)品不一樣，我們需要根據(jù)項(xiàng)目實(shí)際情況需要進(jìn)行增加和刪除。主要包括7個(gè)部分：基礎(chǔ)組件、布局、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、數(shù)據(jù)可視化等。

每個(gè)組件都有自己的應(yīng)用場(chǎng)景，總之不能盲目借鑒其他產(chǎn)品，要根據(jù)用戶使用場(chǎng)景去選擇適合的組件，以提示設(shè)計(jì)為例：界面設(shè)計(jì)中我們什么時(shí)候需要強(qiáng)提示什么時(shí)候弱提示呢？

2. 搭建UI組件庫(kù)-原子設(shè)計(jì)理論

原子設(shè)計(jì)理論，常用來(lái)搭建出統(tǒng)一且層次豐富的設(shè)計(jì)系統(tǒng)的一套方法論，由原子、分子、組織、模板和頁(yè)面這五個(gè)層面組成。

1. 原子：界面中不可再細(xì)分基本的元素，例如：顏色、文字、圖標(biāo)、分割線、陰影等；
2. 分子：由多個(gè)原子構(gòu)成的簡(jiǎn)單UI組件，例如：按鈕、彈窗、標(biāo)簽欄、搜索框等；
3. 組織：由【原子+分子】構(gòu)成一個(gè)模塊，例如：商品卡片、信息流卡片等；
4. 模板：由【原子+分子+組織】組合構(gòu)成了模板，類似于原型圖，例如：資訊列表原型、訂單管理原型等；
5. 頁(yè)面：將實(shí)際內(nèi)容（圖片、文字等）放置在特定模板內(nèi)形成頁(yè)面，即視覺稿；

以下為原子設(shè)計(jì)理論的示例圖，就是將界面中的元素、組件、模塊、原型圖、視覺稿進(jìn)行歸納、整理、重組整理成通用的規(guī)范。

三、確定設(shè)計(jì)尺寸與標(biāo)準(zhǔn)

其實(shí)在龐大的web類別中，根據(jù)產(chǎn)品產(chǎn)品屬性、用戶群體不同分為很多種：從網(wǎng)頁(yè)前臺(tái)到管理后臺(tái)，設(shè)計(jì)師起到很重要的一點(diǎn)作用就是判斷web產(chǎn)品契合的框架和標(biāo)準(zhǔn)定義。

1. 確定設(shè)計(jì)尺寸

在定義網(wǎng)頁(yè)尺寸時(shí)，我們首先要考慮我們的大眾用的顯示器。

記得在N年前，那時(shí)頁(yè)面的信息內(nèi)容一定要設(shè)計(jì)在800或1000的寬度以內(nèi)，規(guī)則其實(shí)并沒錯(cuò)，不過隨著設(shè)備和網(wǎng)絡(luò)的發(fā)展，網(wǎng)頁(yè)顯示的分辨率也在發(fā)生著快速的變化，為了兼顧大眾的瀏覽體驗(yàn)屏幕分辨率也越來(lái)越大了。

根據(jù)百度流量研究院最新的數(shù)據(jù)顯示，市面上的電腦屏幕尺寸多種多樣，設(shè)備中占比最多的仍然是1920×1080、最少的分辨率是 1024×768，低于1024的屏幕分辨率可以忽略了。

B端管理后臺(tái)考慮最大最小響應(yīng)的屏幕，建議取中間尺寸1440×900寬，響應(yīng)式從小往大適配容易，但是從大往小適配問題就特別多。選這個(gè)尺寸前端在適配時(shí)錯(cuò)誤率更低。

確定了寬度，那高度尺寸怎么定義呢？雖說瀏覽器豎屏方向是無(wú)限展示，但不得不說首屏在界面設(shè)計(jì)中的重要性，研究表明首屏以上的關(guān)注度為80.3%，首屏以下只有19.7%，這也解釋了我們?cè)O(shè)計(jì)時(shí)為什么要把重要內(nèi)容展示在首屏的原因了。

以中間尺寸1440×900為例，我們不能直接用900的高度為基準(zhǔn)尺寸，要除掉系統(tǒng)任務(wù)欄、瀏覽器菜單欄以及狀態(tài)欄后，剩下的網(wǎng)頁(yè)首屏內(nèi)容控制高度約為720px（700-750PX區(qū)間），這個(gè)區(qū)間都是相對(duì)安全區(qū)域。

取這個(gè)中間值，就可以照顧到約80%的用戶群體，Ant design的組件也是1440x720px，所以最終確定分尺寸為1440x720px。

常規(guī)web網(wǎng)頁(yè)固定寬度顯示類型：頁(yè)面中心區(qū)域?qū)挾韧ǔＴO(shè)置為1200px（1000px -1400px區(qū)間）作為設(shè)計(jì)相對(duì)標(biāo)準(zhǔn)，這個(gè)范圍內(nèi)能保證大部分瀏覽器能夠顯示出所有的內(nèi)容。

2. 布局規(guī)范

當(dāng)涉及數(shù)字產(chǎn)品設(shè)計(jì)時(shí)，您幾乎可以在設(shè)計(jì)工具中完成的所有工作都可以用代碼創(chuàng)建和表現(xiàn)出來(lái)，但是出于多種原因（從開發(fā)思維到基礎(chǔ)設(shè)計(jì)規(guī)范），可能設(shè)計(jì)稿不能落地或者設(shè)計(jì)輸出質(zhì)量差給你帶來(lái)煩惱，接下來(lái)我們來(lái)探討下設(shè)計(jì)前的一些準(zhǔn)備工作吧。

1）盒子模型讓你更懂開發(fā)思維

盒子模型是最常聽見的是在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域中，經(jīng)常用到的CSS技術(shù)所使用的一種思維模型，是最常用且高效的界面開發(fā)模型之一，也是提高設(shè)計(jì)師與開發(fā)溝通效率的一個(gè)重要知識(shí)。

盒子模型包含了以下屬性：內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）

2）確定柵格的基準(zhǔn)–基于8點(diǎn)網(wǎng)格

網(wǎng)格是構(gòu)成頁(yè)面柵格系統(tǒng)的最小單位，8點(diǎn)/8point/8pt，建立一個(gè)以8為單位的網(wǎng)格系統(tǒng)，利用8的倍數(shù)來(lái)規(guī)定內(nèi)容元素（按鈕、輸入框、圖片等）和布局規(guī)則。

為什么是基于8pt去定義網(wǎng)格？盡量保證最小柵格單位是偶數(shù)，使用2、4、6、8點(diǎn)或者10點(diǎn)為柵格的候選原子單位其實(shí)都是可以的，偶數(shù)能夠匹配多數(shù)主流的顯示設(shè)備，最大程度避免出現(xiàn)半像素模糊的情況。

根據(jù)最新中國(guó)PC端主流分辨率統(tǒng)計(jì)，只有“4、8”不能被1366整除，其他都可以。由于4過于小在視覺上區(qū)分不大，所以我們選用8作為最小單位，之后所有的數(shù)值都使用8的倍數(shù)，8作為最小柵格單位更多是在后臺(tái)系統(tǒng)中用的比較多。

網(wǎng)頁(yè)中常用柵格單位是8、10，那么針對(duì)最小單位是該用8、10還是多少也是需要根據(jù)需求去做分析。比如淘寶、京東這些電商網(wǎng)站內(nèi)容區(qū)域都是1190px，以10作為最小柵格單位，常規(guī)web網(wǎng)頁(yè)固定寬度顯示類型用的比較多，寬度都能被10整除。

舉個(gè)栗子：從下面這個(gè)對(duì)比圖中可以看到，是否嚴(yán)格按照網(wǎng)格系統(tǒng)排列出來(lái)的成果有明顯的好壞差別。

站在巨人的肩膀上，關(guān)于iOS的@1x，@2x，@3x圖與 Material Design 的@1x, @1.5x, @2x，@3x，@4x，Ios與material design組件都是以8點(diǎn)為基準(zhǔn)，小的控件以4點(diǎn)為基準(zhǔn)。

3）柵格系統(tǒng)讓設(shè)計(jì)更有秩序

柵格系統(tǒng)，可以讓設(shè)計(jì)更有秩序，更有規(guī)律，簡(jiǎn)單來(lái)說就是用科學(xué)的方法去排版。我們利用柵格系統(tǒng)就是把一個(gè)頁(yè)面切開成有N個(gè)柵格單元（區(qū)塊），以保證頁(yè)面信息的每個(gè)區(qū)域能夠有秩序地排布起來(lái)。

然后我們把這個(gè)頁(yè)面的寬度代表為W，網(wǎng)格單元寬度為a，網(wǎng)格單元之間的間隙為i，然后把網(wǎng)格單元+網(wǎng)格單元之間的間隙代表為A。計(jì)算公式：寬度=（柵格的寬度X數(shù)量）+（數(shù)量-1）X間隙的寬度，就醬柵格系統(tǒng)就Get了，如下圖所示：

繼續(xù)舉栗子，我們選擇確定的畫布尺寸1440x720px（左右布局），布局采用24欄柵格。對(duì)寬度為 1152 的內(nèi)容區(qū)域進(jìn)行 24 柵格的劃分設(shè)置，頁(yè)面中柵格的 水槽設(shè)定了定值，即瀏覽器在一定范圍擴(kuò)大或縮小，柵格的列寬會(huì)隨之?dāng)U大或縮小，但槽的寬度值固定不變。

制定如下的樣式，數(shù)值僅供參考，照搬的請(qǐng)慎重。

12柵格和24柵格都是PC端較常用的。它們都可以被2等分、3等分、4等分、6等分、12等分，還能按 1:2:1 、 1:3:2 …等比例分割，提供了足夠豐富的變化。

一般12欄柵格適用于業(yè)務(wù)信息承載密度少，適合信息承載較疏松的中后臺(tái)頁(yè)面設(shè)計(jì)或展示類網(wǎng)站。24等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、適合信息繁雜的中后臺(tái)頁(yè)面設(shè)計(jì)，選用那種柵格視實(shí)際情況而定。

填充內(nèi)容：建立好基礎(chǔ)柵格之后，我們可以把內(nèi)容布局進(jìn)行劃分成區(qū)塊，使整體界面整體有序。在區(qū)塊內(nèi)放置內(nèi)容，內(nèi)容的開始和結(jié)尾盡量避免在水槽里，區(qū)塊的高度也需要保持8的倍數(shù)。

示例為24柵格中，區(qū)塊內(nèi)容占據(jù)8、6以及12柵格的布局

不用柵格設(shè)計(jì)行不行？不用柵格沒問題，很多優(yōu)秀作品都沒有刻意的遵守傳統(tǒng)的柵格，反而顯得更加靈動(dòng)。

但是打破規(guī)則前得知道規(guī)則才行，所謂方法論和規(guī)范只是基于前輩總結(jié)沉淀的經(jīng)驗(yàn)，當(dāng)你的創(chuàng)新足夠有顛覆性，之前的規(guī)則就會(huì)變成陳規(guī)舊俗。

四、確定布局框架

B端系統(tǒng)的框架一般會(huì)依據(jù)產(chǎn)品目標(biāo)與用戶的使用場(chǎng)景來(lái)定義，一般主流的導(dǎo)航樣式就兩種：側(cè)邊欄導(dǎo)航與頂部導(dǎo)航，其他都是這兩種主流導(dǎo)航的延展或不常用就不細(xì)細(xì)列出來(lái)了，比如：頂部導(dǎo)航與側(cè)邊欄導(dǎo)航結(jié)合的混合導(dǎo)航。

• 頂部導(dǎo)航（上下布局）：導(dǎo)航欄上部固定，工作區(qū)寬度固定，左右空白間距動(dòng)態(tài)擴(kuò)展。常用于官網(wǎng)、產(chǎn)品展示等有用戶停留目標(biāo)的產(chǎn)品功能，例如站酷、UI中國(guó)等；
• 側(cè)邊欄布局（左右布局）：側(cè)邊欄固定也可以折疊只顯示圖標(biāo)，內(nèi)容去自適應(yīng)顯示，常用于工具型、后臺(tái)等有較高效率目標(biāo)的產(chǎn)品功能，例如saas系統(tǒng)、管理后臺(tái)等。

很多老鐵通常會(huì)誤以為B端就是側(cè)邊欄，C端就是頂部導(dǎo)航，雖然大部分是這樣，但是這里不能畫等號(hào)，有些產(chǎn)品同時(shí)兼有兩種導(dǎo)航或者混用的情況，根據(jù)項(xiàng)目實(shí)際情況去定。

布局框架確認(rèn)之后我們就可以結(jié)合設(shè)計(jì)規(guī)范和以及產(chǎn)品特點(diǎn)開始擼圖了，一般先確定好首頁(yè)及產(chǎn)品主要功能頁(yè)面，整體產(chǎn)品的視覺基調(diào)就已經(jīng)定下來(lái)了，其他頁(yè)面風(fēng)格布局按照主頁(yè)延展，一些列表頁(yè)、彈窗的復(fù)用性高的頁(yè)面制作成組件，然后就做完了，小編圖做的渣，放一張例圖吧。

圖例為Ant design組件

五、最后

以上是小編在B端設(shè)計(jì)過程中的所思所想，通過對(duì)各平臺(tái)組件以及相關(guān)標(biāo)準(zhǔn)的了解，可以為你的設(shè)計(jì)點(diǎn)亮思路，讓圖擼的更快、更準(zhǔn)、更穩(wěn)，先避免一些原則性的錯(cuò)誤，才能為后續(xù)產(chǎn)品的精雕細(xì)琢打下良好的根基。

隨著B端市場(chǎng)的發(fā)展，更多的B端產(chǎn)品逐漸進(jìn)入大眾視野，但是B端產(chǎn)品的用戶體驗(yàn)卻遠(yuǎn)未達(dá)到行業(yè)標(biāo)準(zhǔn)，這里并不是說視覺表現(xiàn)力上，更多的是B端設(shè)計(jì)師對(duì)于產(chǎn)品業(yè)務(wù)的理解、用戶的操作效率上，所以B端產(chǎn)品的體驗(yàn)設(shè)計(jì)仍是我們的發(fā)力點(diǎn)。

補(bǔ)充：B端內(nèi)容區(qū)都是自適應(yīng)的，一說的自適應(yīng)設(shè)計(jì)，可能我們經(jīng)常聽到響應(yīng)式，自適應(yīng)設(shè)計(jì)和響應(yīng)式設(shè)計(jì)這兩個(gè)概念非常容易混淆：自適應(yīng)是對(duì)于設(shè)備而言、響應(yīng)式是對(duì)于尺寸而言，一張圖看懂什么是響應(yīng)式什么是自適應(yīng)。

本文由 @呆呆龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議