上一篇分享了 B 端的基本概念，和 C 端設(shè)計(jì)的核心差異。

這一篇，則只聚焦 B 端設(shè)計(jì)的具體內(nèi)容進(jìn)行介紹。

一、B 端設(shè)計(jì)的分析過程

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

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

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

這個(gè)轉(zhuǎn)化的流程如大致如下所示：

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

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

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

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

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

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

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

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

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

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

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

完成工作內(nèi)容的分析外，B 端設(shè)計(jì)師還可能展開其它的分析步驟，包括排期分析、競品分析、用戶分析、體驗(yàn)分析等等。

要做什么額外的分析工作和項(xiàng)目要求、場景有關(guān)，不會(huì)憑空去做分析或是每次項(xiàng)目都按照一個(gè)固定的復(fù)雜流程執(zhí)行，而這些分析的目標(biāo)都是為了得出結(jié)論，對后續(xù)的設(shè)計(jì)形成指導(dǎo)意見。

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

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

二、B 端的具體設(shè)計(jì)內(nèi)容

完成前期的設(shè)計(jì)分析，下一步就要正式進(jìn)行設(shè)計(jì)實(shí)踐了。而 B 端界面設(shè)計(jì)的主要內(nèi)容，包含三個(gè)主要的部分：

1. 交互設(shè)計(jì)
2. 視覺設(shè)計(jì)
3. 運(yùn)營設(shè)計(jì)

1. B 端的交互設(shè)計(jì)

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

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

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

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

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

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

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

2. B 端的視覺設(shè)計(jì)

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

首先說界面設(shè)計(jì)，除大屏外 B 端界面的設(shè)計(jì)實(shí)際上非常簡單，因?yàn)槭褂玫囊曈X樣式都偏基礎(chǔ)，且頁面的種類和版式也很固定，比如下面這些：

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

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

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

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

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

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

最后就是圖標(biāo)的設(shè)計(jì)，雖然 B 端圖標(biāo)設(shè)計(jì)沒有 C 端那么花哨，但在項(xiàng)目中往往會(huì)出現(xiàn)很多很復(fù)雜的工具圖標(biāo)寓意，就需要設(shè)計(jì)師自己構(gòu)思圖形并進(jìn)行設(shè)計(jì)。

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

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

3. B 端的運(yùn)營設(shè)計(jì)

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

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

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

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

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

三、B 端設(shè)計(jì)的交付跟進(jìn)

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

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

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

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

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

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

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

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

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

我們稱這個(gè)步驟為 —— 設(shè)計(jì)還原度測試。對于界面設(shè)計(jì)要求高的團(tuán)隊(duì)，在這個(gè)階段要耗費(fèi)的精力和時(shí)間是最多的，因?yàn)樵O(shè)計(jì)到開發(fā)的轉(zhuǎn)化有大量的參數(shù)和細(xì)節(jié)要做匹配，所以錯(cuò)誤會(huì)層出不窮，這就要檢驗(yàn)設(shè)計(jì)師和工程師的耐心程度了。

完成測試工作以后，項(xiàng)目就部署上線了，設(shè)計(jì)師當(dāng)前項(xiàng)目的工作就結(jié)束了，開始下一個(gè)項(xiàng)目或迭代的輪回！

結(jié)尾

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

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

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」