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

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

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

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

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

一、初識B端

B 端設(shè)計，從承接載體來看就是網(wǎng)頁設(shè)計，只是因為行業(yè)屬性、用戶群體的不同而賦予的代名詞。

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

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

2.?視覺體驗設(shè)計的差異

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

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

二、了解B端組件庫

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

1. 了解UI框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 布局規(guī)范

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、確定布局框架

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

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

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

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

圖例為Ant design組件

五、最后

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

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

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

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

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