這一篇，則只聚焦 B 端設計的具體內容進行介紹。

一、B 端設計的分析過程

雖然 B 端設計簡單概括起來就是完成相應 B 端產(chǎn)品界面設計，但這只是一個很寬泛的解釋，想要學習 B 端設計就要更進一步了解 B 端設計的具體工作有哪些。

這首先涉及到對 B 端項目開發(fā)流程的理解，因為 B 端設計不是一個孤立的工作，而要完成項目中上游給出的任務，再將設計成果交付給下游。簡單說就是完成設計任務，交付設計成果。

首先討論設計需求怎么來的，一個正常的項目設計需求不會是直接產(chǎn)生的（設計迭代項目除外），通常需要經(jīng)過一定的轉化。

這個轉化的流程如大致如下所示：

立項就是確定要開展項目的決策過程，領導層會確定一個項目大概要實現(xiàn)什么目標，解決哪些問題。但這些決策都是比較宏觀的，具體要做什么功能，每個功能包含的邏輯就要由產(chǎn)品經(jīng)理去整理。

但 B 端的產(chǎn)品需求不是由產(chǎn)品經(jīng)理拍腦門想出來的，它得符合業(yè)務的需要。比如做一個倉儲管理工具要包含貨物入庫的記錄，但貨物入庫不是只發(fā)生在數(shù)字系統(tǒng)內的，而是真的要把商品運到相關倉庫并擺上指定貨架，然后再在系統(tǒng)上添加這條數(shù)據(jù)。

所以產(chǎn)品經(jīng)理就得去研究具體業(yè)務的細節(jié)，貨品怎么運的，誰搬進去并負責驗收的，最后記錄添加誰執(zhí)行的，以及貨品和倉庫本身有哪些數(shù)據(jù)、信息是需要記錄的等等。

了解完業(yè)務的要求，產(chǎn)品經(jīng)理才能構思具體產(chǎn)品要放什么東西，這里還會參雜很多其它的考量，比如老板/客戶要求，競品的做法，員工的建議等。在綜合分析各方面因素以后，產(chǎn)品經(jīng)理再做出產(chǎn)品具體應該做哪些功能的決策，并設計原型編寫功能說明（不一定有）。

產(chǎn)品需求不是產(chǎn)品經(jīng)理自娛自樂的，這些需求信息等于設計師和程序員的工作任務。雖然會有需求評審會議來解釋產(chǎn)品的功能和設計的要求，但會議往往只有個大概，細節(jié)還是要靠自己會后去看。

而 B 端產(chǎn)品需求的特點之一，就是抽象……因為產(chǎn)品需求是圍繞業(yè)務搭建的，而需求中的說明卻很少能把面向業(yè)務講明白，于是就有很多功能點和交互要求是看不懂的。

原則上只要產(chǎn)品給足夠清晰的原型，設計師對著原型做設計夠了。但如果對需求理解得不夠徹底，是做不好設計和交互的。再者，實際工作中產(chǎn)品給到的需求說明往往非常的潦草，有大量內容時空缺的，得設計師自己去填……

形成這個結果的原因有很多（主要是產(chǎn)品菜），后面會另外討論。但想要繼續(xù)完成工作，設計師就需要進行—— 業(yè)務和需求的分析，也就是對著產(chǎn)品經(jīng)理給到的需求去逆推業(yè)務要求和完整的功能邏輯。

這種工作很多人誤以為是產(chǎn)品的工作，實際這和產(chǎn)品做的業(yè)務、需求分析是不同的，他做的是決策，而設計師做的分析是更準確地了解他的決策。

我們換個場景解釋，比如在室內設計需求中，客戶給的房型規(guī)劃草圖上出現(xiàn)了開放廁所連著開放廚房的抽象需求，作為設計師，要做這么奇怪的設計就肯定得去了解他們想要那么做的原因（業(yè)務分析），然后再思考這么做的可行性和其它細節(jié)（需求分析），然后才會動手進行正式的設計。

這是 B 端設計分析優(yōu)先級最高的事情，了解我們工作的內容，而這對于程序員來說同樣重要。很多外行可能會覺得這個步驟不合理，效率非常低，但這就是真實的項目環(huán)境，由一系列客觀因素引發(fā)的工作阻力，可以反感它但不是忽視它。

完成工作內容的分析外，B 端設計師還可能展開其它的分析步驟，包括排期分析、競品分析、用戶分析、體驗分析等等。

要做什么額外的分析工作和項目要求、場景有關，不會憑空去做分析或是每次項目都按照一個固定的復雜流程執(zhí)行，而這些分析的目標都是為了得出結論，對后續(xù)的設計形成指導意見。

分析的細節(jié)就不在這里展開了，但有一點可以肯定的是，B 端分析中對體驗、用戶相關的內容占比是遠遠比 C 端低的。因為 C 端產(chǎn)品是服務用戶的，而 B 端產(chǎn)品是服務業(yè)務的，B 端用戶也只現(xiàn)實業(yè)務目標的一部分，比如公司招銷售再給他們配置企業(yè)版微信，只是為了讓銷售快樂的嗎？

分析的目標是為了執(zhí)行做準備，是任何工作都應該開展的前置工作，不要只看網(wǎng)上的過度包裝而單純地將它們歸類為形式主義和面子工程。

二、B 端的具體設計內容

完成前期的設計分析，下一步就要正式進行設計實踐了。而 B 端界面設計的主要內容，包含三個主要的部分：

1. 交互設計
2. 視覺設計
3. 運營設計

1. B 端的交互設計

交互設計，就是設計產(chǎn)品中不同功能的具體操作方式。比如如何進入不同下級頁面，如何完成表格的篩選，如何完成信息的編輯等等。

通常交互的設計會使用線框圖原型和連線注釋來表示，但因為 B 端的視覺設計整體較為簡單，所以往往會兩者混到一起設計，再一起交付和評審。

但這并不代表交互和設計是一體的，在 B 端設計的評審中，團隊對設計的重視更多集中在交互的合理性上，而不是視覺的美觀度。

比如下圖案例，需求是在這個頁面中展示指定工作車輛的軌跡、任務、節(jié)點、事件，還要展示若干關鍵的信息。不管設計師把視覺做成什么樣，都要優(yōu)先滿足可用、易操作的要求。

除了整個頁面的交互，還包括很多組件模塊的復雜交互，比如下圖案例中，要增加自定義篩選列表信息的功能，篩選條目不限，篩選內容、規(guī)則自己決定。設計師的主要任務也是設計出滿足各類操作需要的交互方式，而不是先想著怎么做才好看。

前文就說過，B 端的業(yè)務種類龐大、細節(jié)繁復，落實到產(chǎn)品層面就會出現(xiàn)很多抽象的、非常規(guī)的功能邏輯。這些需求是沒有參考的，所以需要有人去做出合理的方案，并給出細節(jié)和規(guī)則。

交互是 B 端設計中最重要且最有價值的部分，而這主要是 B 端設計師的工作，不是產(chǎn)品經(jīng)理的。

2. B 端的視覺設計

B 端視覺設計即 B 端產(chǎn)品整體視覺內容、要素的設計，這不是單指界面設計，還包括品牌、規(guī)范、動效、圖標等視覺內容的設計。

首先說界面設計，除大屏外 B 端界面的設計實際上非常簡單，因為使用的視覺樣式都偏基礎，且頁面的種類和版式也很固定，比如下面這些：

這種簡單代表沒有門檻，首先要將復雜的信息以簡約、嚴肅、整齊的樣式呈現(xiàn)出來，確實是需要一定專業(yè)性支撐的。

另一個因素就是，B 端項目追求低成本，高開發(fā)效率。而 B 端項目中包含的海量頁面往往重復性又非常高，所以設計師如果重復去設計一樣的內容，是沒有效率可言的。

為了解決這種問題，B 端項目就非常依賴設計規(guī)范和組件庫的應用。但并不是指完全使用外部的第三方庫（后面會單獨說），而是基于自己項目搭建的規(guī)范和組件庫。

所以 B 端設計師最重要的視覺設計工作，是圍繞最終界面設計的需要，去定義可用的、詳細的、專業(yè)的規(guī)范內容，并在規(guī)范中融入項目的特征和品牌性，而最終得界面視覺只是規(guī)范的附加物。

除了界面外，動效和圖標也是視覺的產(chǎn)出物。但是 B 端中對動效的使用要求并不高，因為這會增加額外的開發(fā)成本。所以即使使用動效也會選擇最簡單的效果類型，而不是網(wǎng)上飛機稿展示的復雜動畫特效。

B 端動效只在必要時增加，和 C 端動效不同的是，B 端動效更關注整體性和合理性，所以需要更深入在動效本身參數(shù)的調節(jié)和場景限制上。

最后就是圖標的設計，雖然 B 端圖標設計沒有 C 端那么花哨，但在項目中往往會出現(xiàn)很多很復雜的工具圖標寓意，就需要設計師自己構思圖形并進行設計。

除了一般圖標外，國外 B 端產(chǎn)品的 3D 圖標上鏡率也很高，因為 B 端項目的決策者往往都非常迷戀“科技感”，所以設計師要投其所好就會添加 3D 圖標元素增加科技氛圍。

但除了大屏，3D 元素的應用頻率是非常低的，它們只是邊角料而不是設計的主體。經(jīng)過這幾年的發(fā)展，這類 3D 素材已經(jīng)非常龐大，可幫助設計師快速完成相關圖標的引用和設計。而不是忽視設計的主題投入大量的精力去完成邊角料的工作。

3. B 端的運營設計

對于 B 端來說也有運營設計的需求，而這分兩種情況出現(xiàn)。

第一種就是提供 SaaS 類服務的 B 端項目，項目本身是要拿來賣的，要面向外部的客戶。所以需要設計對外的官網(wǎng)，以及類似 C 端搞促銷和不同主題的活動物料。

另一種情況，則是企業(yè)日常運營中的設計需要，比如開一些講座、商業(yè)論壇、內部活動、宣發(fā)路演等，也會讓 B 端設計師來設計相應的物料內容，如廣告牌、背景墻、PPT、邀請函、手冊等。

除了這些內容，只不準也還會有其它偏平面的設計需求。因為 B 端產(chǎn)品的團隊往往規(guī)模比較?。ü?jié)省成本），所以很少會配置專屬的平面設計師，而這部分需求自然是交給 UI 設計師完成。

但相較 C 端行業(yè)來說，B 端平面的輸出要求偏商務、正式，所以不需要那么花哨，對技術要求也比較低，更容易學習和輸出。

三、B 端設計的交付跟進

對于所有設計行業(yè)來說，完成設計稿都不代表設計工作結束了，還要完成對它的交付，以及跟進設計的具體實施。

在 B 端設計行業(yè)，設計師在完成項目設計以后，要將設計稿交付給程序員，包括交互說明、規(guī)范文檔、界面樣式，以及界面的標注和切圖。

前面三個都是把已經(jīng)做好的內容整理好發(fā)送給程序員，或者在云服務產(chǎn)品中添加程序員的賬號讓他們直接訪問即可，比較容易解決，而標注和切圖卻是最復雜也最關鍵的部分。

標注就是提供設計稿中的屬性參數(shù)，以及對一些特定功能、交互、設計細節(jié)的說明，讓程序員可以準確的還原設計稿中的內容。

切圖則是提供界面中無法用代碼實現(xiàn)的圖形文件，比如圖標、背景圖、特殊標簽、等級勛章等圖形，讓程序員將它們置入到真實頁面中去。

交付方式越合理，則開發(fā)出來的界面效果越準確，反之則問題越多。但多數(shù)初級 B 端 UI 設計師只簡單的將標注和切圖步驟理解成是將設計稿上傳到藍湖中去，而并不懂如何控制標注和切圖的細節(jié)，所以導致最終開發(fā)效果和設計稿相去甚遠（這個以后有空也會另說）。

即使提供了標注和切圖，收尾的工作也還沒結束。一方面開發(fā)過程中程序員會產(chǎn)生一系列的疑問，或發(fā)現(xiàn)設計稿中的各種問題，于是設計師就需要進行解釋，或優(yōu)化設計稿。

另一方面，開發(fā)即使把界面做完以后，也不會直接上線，會進入“內部測試”的環(huán)節(jié)，也就是內部測試可用性和找出問題的階段。

測試可用性找 BUG 主要是測試工程師 QA 和產(chǎn)品的工作，但設計師也不能置身事外，因為已實現(xiàn)界面的樣式會和設計稿存在大量的偏差（就前面說的問題），設計師需要把偏差找出來，并提交問題給程序員進行修復，并檢查修復后的結果。

我們稱這個步驟為 —— 設計還原度測試。對于界面設計要求高的團隊，在這個階段要耗費的精力和時間是最多的，因為設計到開發(fā)的轉化有大量的參數(shù)和細節(jié)要做匹配，所以錯誤會層出不窮，這就要檢驗設計師和工程師的耐心程度了。

完成測試工作以后，項目就部署上線了，設計師當前項目的工作就結束了，開始下一個項目或迭代的輪回！

結尾

以上就是 B 端設計師的主要工作內容，雖然舉例以網(wǎng)頁管理界面為主，但除了大屏項目外，不管是 B 端移動端還是桌面端、定制設備上的設計流程和設計內容都大體相同。

一個優(yōu)秀的 B 端 UI 設計師，一定是具備圍繞項目目標統(tǒng)籌全局提高項目開發(fā)、使用效率的多面手，而不是光畫界面和拼組件的產(chǎn)品原型填圖工。

作者：超人的電話亭