起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識干貨總結：UI設計師如何快速上手B端設計？
編輯導語：To C市場如今已經越來越飽和，流量的獲取難度也越來越大，于是從To B向To C方法探索也是大勢所趨。對于不少設計師來說，習慣了C端設計，轉到B端后一時間有點不知所措。本文作者總結了自己負責B端產品設計的一些經驗，為我們分享了這篇指南。
To C市場的表現隨著用戶逐漸趨向飽和，流量紅利也盡顯頹勢，向To B延展已成為To C產品探索的新方向，國內的互聯網巨頭也是紛紛布局To B業務。
B端行業需求量的增加更多B端設計師（互聯網打工人）開始涌入，還在互聯網C端折騰的互聯網打工人們，說不定哪天就轉做B端了呢。無論是C端與B端選哪個方向都沒有錯，建議都嘗試下再根據個人興趣選擇一個深耕方向一直去探索。
接下來就我負責一些B端產品設計淺談我的看法，看完本文你會學到：
- B端是什么？
- 了解B端組件及搭建組件庫
- 3如何確定B端設計尺寸與標準
- 4搭建B端后臺系統
一、初識B端
B 端設計，從承接載體來看就是網頁設計，只是因為行業屬性、用戶群體的不同而賦予的代名詞。
1. C端和B端的區別
- C端：Consumer，通常為了滿足消費者、個人終端用戶其某個場景下的需要而使用的客戶端。如：微信、美團、京東等；
- B端：Business，通常為了前臺業務體系更好的為用戶服務而做的，主要企業內部用戶使用或商家使用的管理系統，如CRM、ERP、OA、工單系統等。
2.?視覺體驗設計的差異
C端產品需要兼顧“用戶體驗”和“商業化變現”的平衡，所以會額外重視在視覺體驗上的設計。不僅要讓用戶有好的體驗，更要用趣味性的設計引起用戶共鳴，用戶的要求就是好看、好用、好玩。
B端產品注重操作者的使用效率、成本、管控，追求服務的穩定性、保證能力、安全性，所以在視覺體驗上多是保持干凈簡單的簡潔風。
二、了解B端組件庫
組件化對于設計師來說相信已經不陌生了，簡單的說，組件化即是產品中的通用模塊進行元素拆解、整理、重組為一套「多維度」的解決方案，組件化在運營設計、UI、交互、動效、開發等多方面都能用上，一套完整的組件庫無論對于產品、設計還是開發來說，無疑都大大提高設計品質、提高工作效率與減少溝通成本。
1. 了解UI框架
在B端后臺開發過程中，前端同學都是基于UI框架進行開發的，引入一些開源的UI框架或者公司自建的UI框架，使用這些框架開發可以把一些通用的模塊用代碼封裝起來在項目中重復使用。
因此在設計時就要求我們掌握主流UI框架的設計規范，然后基于這套框架的規范進行設計及延展。比如Ant Design、Element、iview、Layui等這些前端常使用的UI框架。
Ant design等平臺的這些組件只是覆蓋了通用場景，對于一些定制化的產品需求是無法滿足的，無論是單個產品或產品線，因品牌差異性在不斷成熟過程中都有屬于自己的組件庫（UI KIT）。
以下是我基于組件的類別與使用場景的不同進行了分類，組件的應用上每個產品不一樣，我們需要根據項目實際情況需要進行增加和刪除。主要包括7個部分：基礎組件、布局、導航、數據錄入、數據展示、反饋、數據可視化等。
每個組件都有自己的應用場景，總之不能盲目借鑒其他產品，要根據用戶使用場景去選擇適合的組件，以提示設計為例：界面設計中我們什么時候需要強提示什么時候弱提示呢？
2. 搭建UI組件庫-原子設計理論
原子設計理論，常用來搭建出統一且層次豐富的設計系統的一套方法論，由原子、分子、組織、模板和頁面這五個層面組成。
- 原子：界面中不可再細分基本的元素，例如：顏色、文字、圖標、分割線、陰影等；
- 分子：由多個原子構成的簡單UI組件，例如：按鈕、彈窗、標簽欄、搜索框等；
- 組織：由【原子+分子】構成一個模塊，例如：商品卡片、信息流卡片等；
- 模板：由【原子+分子+組織】組合構成了模板，類似于原型圖，例如：資訊列表原型、訂單管理原型等；
- 頁面：將實際內容（圖片、文字等）放置在特定模板內形成頁面，即視覺稿；
以下為原子設計理論的示例圖，就是將界面中的元素、組件、模塊、原型圖、視覺稿進行歸納、整理、重組整理成通用的規范。
三、確定設計尺寸與標準
其實在龐大的web類別中，根據產品產品屬性、用戶群體不同分為很多種：從網頁前臺到管理后臺，設計師起到很重要的一點作用就是判斷web產品契合的框架和標準定義。
1. 確定設計尺寸
在定義網頁尺寸時，我們首先要考慮我們的大眾用的顯示器。
記得在N年前，那時頁面的信息內容一定要設計在800或1000的寬度以內，規則其實并沒錯，不過隨著設備和網絡的發展，網頁顯示的分辨率也在發生著快速的變化，為了兼顧大眾的瀏覽體驗屏幕分辨率也越來越大了。
根據百度流量研究院最新的數據顯示，市面上的電腦屏幕尺寸多種多樣，設備中占比最多的仍然是1920×1080、最少的分辨率是 1024×768，低于1024的屏幕分辨率可以忽略了。
B端管理后臺考慮最大最小響應的屏幕，建議取中間尺寸1440×900寬，響應式從小往大適配容易，但是從大往小適配問題就特別多。選這個尺寸前端在適配時錯誤率更低。
確定了寬度，那高度尺寸怎么定義呢？雖說瀏覽器豎屏方向是無限展示，但不得不說首屏在界面設計中的重要性，研究表明首屏以上的關注度為80.3%，首屏以下只有19.7%，這也解釋了我們設計時為什么要把重要內容展示在首屏的原因了。
以中間尺寸1440×900為例，我們不能直接用900的高度為基準尺寸，要除掉系統任務欄、瀏覽器菜單欄以及狀態欄后，剩下的網頁首屏內容控制高度約為720px（700-750PX區間），這個區間都是相對安全區域。
取這個中間值，就可以照顧到約80%的用戶群體，Ant design的組件也是1440x720px，所以最終確定分尺寸為1440x720px。
常規web網頁固定寬度顯示類型：頁面中心區域寬度通常設置為1200px（1000px -1400px區間）作為設計相對標準，這個范圍內能保證大部分瀏覽器能夠顯示出所有的內容。
2. 布局規范
當涉及數字產品設計時，您幾乎可以在設計工具中完成的所有工作都可以用代碼創建和表現出來，但是出于多種原因（從開發思維到基礎設計規范），可能設計稿不能落地或者設計輸出質量差給你帶來煩惱，接下來我們來探討下設計前的一些準備工作吧。
1）盒子模型讓你更懂開發思維
盒子模型是最常聽見的是在網頁設計領域中，經常用到的CSS技術所使用的一種思維模型，是最常用且高效的界面開發模型之一，也是提高設計師與開發溝通效率的一個重要知識。
盒子模型包含了以下屬性：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）
2）確定柵格的基準–基于8點網格
網格是構成頁面柵格系統的最小單位，8點/8point/8pt，建立一個以8為單位的網格系統，利用8的倍數來規定內容元素（按鈕、輸入框、圖片等）和布局規則。
為什么是基于8pt去定義網格？盡量保證最小柵格單位是偶數，使用2、4、6、8點或者10點為柵格的候選原子單位其實都是可以的，偶數能夠匹配多數主流的顯示設備，最大程度避免出現半像素模糊的情況。
根據最新中國PC端主流分辨率統計，只有“4、8”不能被1366整除，其他都可以。由于4過于小在視覺上區分不大，所以我們選用8作為最小單位，之后所有的數值都使用8的倍數，8作為最小柵格單位更多是在后臺系統中用的比較多。
網頁中常用柵格單位是8、10，那么針對最小單位是該用8、10還是多少也是需要根據需求去做分析。比如淘寶、京東這些電商網站內容區域都是1190px，以10作為最小柵格單位，常規web網頁固定寬度顯示類型用的比較多，寬度都能被10整除。
舉個栗子：從下面這個對比圖中可以看到，是否嚴格按照網格系統排列出來的成果有明顯的好壞差別。
站在巨人的肩膀上，關于iOS的@1x，@2x，@3x圖與 Material Design 的@1x, @1.5x, @2x，@3x，@4x，Ios與material design組件都是以8點為基準，小的控件以4點為基準。
3）柵格系統讓設計更有秩序
柵格系統，可以讓設計更有秩序，更有規律，簡單來說就是用科學的方法去排版。我們利用柵格系統就是把一個頁面切開成有N個柵格單元（區塊），以保證頁面信息的每個區域能夠有秩序地排布起來。
然后我們把這個頁面的寬度代表為W，網格單元寬度為a，網格單元之間的間隙為i，然后把網格單元+網格單元之間的間隙代表為A。計算公式：寬度=（柵格的寬度X數量）+（數量-1）X間隙的寬度，就醬柵格系統就Get了，如下圖所示：
繼續舉栗子，我們選擇確定的畫布尺寸1440x720px（左右布局），布局采用24欄柵格。對寬度為 1152 的內容區域進行 24 柵格的劃分設置，頁面中柵格的?水槽設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的列寬會隨之擴大或縮小，但槽的寬度值固定不變。
制定如下的樣式，數值僅供參考，照搬的請慎重。
12柵格和24柵格都是PC端較常用的。它們都可以被2等分、3等分、4等分、6等分、12等分，還能按 1:2:1 、 1:3:2 …等比例分割，提供了足夠豐富的變化。
一般12欄柵格適用于業務信息承載密度少，適合信息承載較疏松的中后臺頁面設計或展示類網站。24等分的柵格系統適用于業務信息量大、適合信息繁雜的中后臺頁面設計，選用那種柵格視實際情況而定。
填充內容：建立好基礎柵格之后，我們可以把內容布局進行劃分成區塊，使整體界面整體有序。在區塊內放置內容，內容的開始和結尾盡量避免在水槽里，區塊的高度也需要保持8的倍數。
示例為24柵格中，區塊內容占據8、6以及12柵格的布局
不用柵格設計行不行？不用柵格沒問題，很多優秀作品都沒有刻意的遵守傳統的柵格，反而顯得更加靈動。
但是打破規則前得知道規則才行，所謂方法論和規范只是基于前輩總結沉淀的經驗，當你的創新足夠有顛覆性，之前的規則就會變成陳規舊俗。
四、確定布局框架
B端系統的框架一般會依據產品目標與用戶的使用場景來定義，一般主流的導航樣式就兩種：側邊欄導航與頂部導航，其他都是這兩種主流導航的延展或不常用就不細細列出來了，比如：頂部導航與側邊欄導航結合的混合導航。
- 頂部導航（上下布局）：導航欄上部固定，工作區寬度固定，左右空白間距動態擴展。常用于官網、產品展示等有用戶停留目標的產品功能，例如站酷、UI中國等；
- 側邊欄布局（左右布局）：側邊欄固定也可以折疊只顯示圖標，內容去自適應顯示，常用于工具型、后臺等有較高效率目標的產品功能，例如saas系統、管理后臺等。
很多老鐵通常會誤以為B端就是側邊欄，C端就是頂部導航，雖然大部分是這樣，但是這里不能畫等號，有些產品同時兼有兩種導航或者混用的情況，根據項目實際情況去定。
布局框架確認之后我們就可以結合設計規范和以及產品特點開始擼圖了，一般先確定好首頁及產品主要功能頁面，整體產品的視覺基調就已經定下來了，其他頁面風格布局按照主頁延展，一些列表頁、彈窗的復用性高的頁面制作成組件，然后就做完了，小編圖做的渣，放一張例圖吧。
圖例為Ant design組件
五、最后
以上是小編在B端設計過程中的所思所想，通過對各平臺組件以及相關標準的了解，可以為你的設計點亮思路，讓圖擼的更快、更準、更穩，先避免一些原則性的錯誤，才能為后續產品的精雕細琢打下良好的根基。
隨著B端市場的發展，更多的B端產品逐漸進入大眾視野，但是B端產品的用戶體驗卻遠未達到行業標準，這里并不是說視覺表現力上，更多的是B端設計師對于產品業務的理解、用戶的操作效率上，所以B端產品的體驗設計仍是我們的發力點。
補充：B端內容區都是自適應的，一說的自適應設計，可能我們經常聽到響應式，自適應設計和響應式設計這兩個概念非常容易混淆：自適應是對于設備而言、響應式是對于尺寸而言，一張圖看懂什么是響應式什么是自適應。
本文由 @呆呆龍 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
響應式布局該怎么設計？需要注意些什么嗎？是做一套圖，由程序適配其他頁面對嗎？
響應式設計不太適合太復雜的界面布局，響應式設計時移動端、PC端都要出一套圖。如果要求不高的話出一套圖也可以附帶下說明前端自己也可以適配好，效果應該會不太理想。