本文總結(jié)了10個(gè)常見的B端設(shè)計(jì)問題，幫你對(duì)B端設(shè)計(jì)的認(rèn)識(shí)更進(jìn)一層。

1. 如何具體地理解設(shè)計(jì)體系和設(shè)計(jì)規(guī)范這兩個(gè)概念呢？

“設(shè)計(jì)規(guī)范”更專注于內(nèi)容上的規(guī)則準(zhǔn)繩，幫助設(shè)計(jì)師產(chǎn)出一致的設(shè)計(jì)方案，傳遞統(tǒng)一的品牌特性。

但實(shí)際上，就算團(tuán)隊(duì)中有了一套統(tǒng)一的標(biāo)準(zhǔn)工具和設(shè)計(jì)指南，部分設(shè)計(jì)師依然會(huì)有新的不一致的“創(chuàng)意”，而前端對(duì)應(yīng)的組件代碼也需要在不同業(yè)務(wù)中根據(jù)設(shè)計(jì)“創(chuàng)意”而人肉修改。

此外隨著業(yè)務(wù)迭代，設(shè)計(jì)師們會(huì)更多地面臨“周期性業(yè)務(wù)的品牌更新”，“不同品牌的多種垂直業(yè)務(wù)同期構(gòu)建”，“眾多相似的后臺(tái)系統(tǒng)構(gòu)建”，“跨業(yè)務(wù)/部門的設(shè)計(jì)、前端協(xié)作問題”。

面對(duì)這些問題，體驗(yàn)工程的建設(shè)已經(jīng)遠(yuǎn)遠(yuǎn)不止于一套設(shè)計(jì)規(guī)范或一套組件庫(kù)，他需要一套完整的系統(tǒng)來支撐，解決內(nèi)部協(xié)作的一致性問題，解決設(shè)計(jì)系統(tǒng)更新的周期性問題，解決一群設(shè)計(jì)師與工程師如何規(guī)模化的生產(chǎn)各種業(yè)務(wù) UI 的問題，從而最終解決用戶體驗(yàn)一致性的問題。這便需要建設(shè)一套“設(shè)計(jì)體系”。

總結(jié)一下二者的區(qū)別就是：「設(shè)計(jì)規(guī)范」專注于內(nèi)容，是公司/業(yè)務(wù)的設(shè)計(jì)約束準(zhǔn)繩，提供了一套標(biāo)準(zhǔn)來實(shí)現(xiàn)體驗(yàn)一致性，傳遞品牌理念。在目標(biāo)上更側(cè)重于“品牌統(tǒng)一”，內(nèi)容屬性強(qiáng)于工具屬性。「設(shè)計(jì)體系」是一個(gè)完整的產(chǎn)品，它不僅包含“原則、規(guī)范、指南”這些內(nèi)容，還包含著一系列的協(xié)同工具，幫助規(guī)模化生產(chǎn)，減少設(shè)計(jì)和開發(fā)的重復(fù)工作量。在目標(biāo)上更側(cè)重于“協(xié)同提效”，工具屬性強(qiáng)于內(nèi)容屬性。

2. 產(chǎn)品經(jīng)理和交互設(shè)計(jì)師最大的工作內(nèi)容區(qū)別在于？

產(chǎn)品經(jīng)理

通常更關(guān)注產(chǎn)品戰(zhàn)略、產(chǎn)品競(jìng)爭(zhēng)力、需求洞察和分析、公司商業(yè)回報(bào)等問題所以他的視角必然是從外到內(nèi)，市場(chǎng)上有什么變化，競(jìng)爭(zhēng)對(duì)手有什么品牌，目標(biāo)用戶有什么需求，我們做這事為什么不能賺錢……

為了達(dá)到這個(gè)目的，他必然要更多地和老板打交道，要和上下游的合作伙伴談判，要爭(zhēng)取內(nèi)外部的資源 支持，要寫 PRD 和 MRD，要考慮發(fā)布會(huì)……

你可以理解一個(gè)產(chǎn)品的產(chǎn)品負(fù)責(zé)人，通常就是這個(gè)產(chǎn)品的“CEO”。

產(chǎn)品是需要頂層設(shè)計(jì)思維：

否則為啥還需要產(chǎn)品經(jīng)理（以下簡(jiǎn)稱 PM）？哪怕 PM 只負(fù)責(zé)一個(gè)很小的模塊。如果只是因?yàn)轭^銜的通貨膨脹，那為啥沒有代碼經(jīng)理。經(jīng)理這個(gè) title，說明這個(gè)崗位是需要有大局觀的。如果說一個(gè)公司對(duì) PM 的定位就是畫一個(gè)原型出來，那這個(gè)公司基本肯定就是外包公司。

在這里，談一下個(gè)人對(duì) PM 的理解。PM 是一個(gè)從無(wú)到有，從 0 到 1 的創(chuàng)造性崗位。沒有人知道一個(gè)產(chǎn)品有哪些功能，長(zhǎng)成什么樣才是最好的，沒有標(biāo)準(zhǔn)答案。那難道我們就無(wú)法評(píng)價(jià)一個(gè)產(chǎn)品經(jīng)理工作的好壞了嗎？當(dāng)然不是。這里就要提到一個(gè)心中 PM 的核心技能，商業(yè)化。商業(yè)化能力對(duì) To B 產(chǎn)品經(jīng)理是尤其重要的，甚至是最核心的技能，同時(shí)也是可以某種程度上評(píng)判一個(gè) PM 工作好壞的直觀參考。當(dāng)我們?cè)诳紤]是否要做一個(gè)產(chǎn)品或者新加一個(gè)功能的時(shí)候，PM 首要職責(zé)是要思考這個(gè)產(chǎn)品或者功能

1. 可以解決客戶多大的問題，價(jià)值在哪里。
2. 競(jìng)品有沒有，他們?yōu)槭裁醋隽耍蛘邽槭裁礇]做。
3. 技術(shù)實(shí)現(xiàn)的路徑是什么，能做到什么程度。

對(duì)這三個(gè)問題的思考，合格的 PM 對(duì)于一個(gè)產(chǎn)品的商業(yè)化變現(xiàn)能力有了初步判斷。最怕是客戶要什么就做什么，二怕競(jìng)品有什么我們就抄什么，這兩種都極不可取。這三個(gè)問題思考不到位，很可能后面的努力都變成徒勞。而往往大多數(shù)產(chǎn)品的失敗，核心原因也不是產(chǎn)品交互多差，界面多土，而是在一開始就走錯(cuò)了路。頂層設(shè)計(jì)就是在我們深入思考后，對(duì)于產(chǎn)品的規(guī)劃，目標(biāo)的客戶，推廣的節(jié)奏等給出具體的方案。

而商業(yè)化能力，不僅僅適用 PM，越是產(chǎn)品的負(fù)責(zé)人（無(wú)論是否是 PM）越應(yīng)該錘煉自己的商業(yè)化能力。

交互設(shè)計(jì)師

更關(guān)注人機(jī)交互關(guān)系、場(chǎng)景、角色、用戶畫像、交互范式各種專業(yè)性問題，所以他的視角經(jīng)常是從高到低，用戶用我們產(chǎn)品有什么問題，怎么確定哪些問題是重要的，可用性是否出現(xiàn)問題，易用性怎么提升，硬件和軟件能力怎么更好地服務(wù)于用戶……

這樣的思考方式促使交互設(shè)計(jì)師更多地關(guān)注產(chǎn)品本身技術(shù)平臺(tái)、各種競(jìng)品的差距、用戶感受、交互條件的限制與優(yōu)化，所以輸出競(jìng)品分析報(bào)告、場(chǎng)景分析、任務(wù)流程圖、交互模塊邏輯關(guān)系圖、用戶研究、紙面原型、高保真原型 demo……

你可以理解一個(gè)產(chǎn)品的交互設(shè)計(jì)師是這個(gè)產(chǎn)品在 UX 框架層面的專家，他決定你的業(yè)務(wù)邏輯怎么解釋為用戶邏輯，而不是技術(shù)邏輯。現(xiàn)在 B 端都沒有純視覺 UI，都是和交互合并成產(chǎn)品體驗(yàn)設(shè)計(jì)師。上接用戶、產(chǎn)品和業(yè)務(wù)，下接開發(fā)和測(cè)試。有人說交互設(shè)計(jì)師是“設(shè)計(jì) PM”，還挺貼切的~

3. 組件搭建之后，產(chǎn)品經(jīng)理直接拿組件去拼頁(yè)面，直接進(jìn)入開發(fā)

那么設(shè)計(jì)的價(jià)值在哪？另外公司不重視設(shè)計(jì)和組件，我們應(yīng)該怎么辦？

第一：關(guān)于搭建組件之后，產(chǎn)品直接拖拽使用，設(shè)計(jì)怎么辦，價(jià)值在哪？

個(gè)人認(rèn)為其實(shí)非常好，證明你的搭建工作發(fā)揮了價(jià)值，提高了整個(gè)產(chǎn)研部門的效率。你在這個(gè)過程中可以逐漸從不必要、重復(fù)性設(shè)計(jì)事務(wù)中解放出來，有時(shí)間去關(guān)注整體的產(chǎn)品交互，以及產(chǎn)品流程的合理性，以及如何從產(chǎn)品層面去優(yōu)化整體產(chǎn)品體驗(yàn)等等。才能體現(xiàn) tob 產(chǎn)品設(shè)計(jì)師的價(jià)值，才不會(huì)被別人稱作是拖拽組件的“工具人”。

第二：目前公司不重視設(shè)計(jì)和組件化怎么辦呢？

這個(gè)我建議把眼光放的長(zhǎng)遠(yuǎn)一些，我們和公司只是合作關(guān)系，我們的個(gè)人成長(zhǎng)不管是從技能上還是從認(rèn)知上，收益最大的永遠(yuǎn)是個(gè)人。沒有幾個(gè)人會(huì)一直待在一個(gè)公司，但是隨著你的能力的提升，你會(huì)遇到更好的公司，也會(huì)有更多選擇，夢(mèng)想總是要有的。

4. B 端組件的搭建在具體的作品集中的占比應(yīng)該多少？會(huì)加分么？

首先作為 B 端設(shè)計(jì)擁有組件化思維和組件化構(gòu)建能力是必須的。但是具體是否需要在作品集展示，展示多少，能加多少分，需要去結(jié)合自身的階段去看。比如你是一個(gè)初級(jí)設(shè)計(jì)師，那么你至少會(huì)設(shè)計(jì)使用組件，知道組件的原理，以完成日常的設(shè)計(jì)工作；如果是中級(jí)設(shè)計(jì)或者是高級(jí)設(shè)計(jì)則需要減少組件設(shè)計(jì)的部分。尤其是如果你申請(qǐng)的是一個(gè)管理崗位，我們固然不需要用很大的篇幅去討論怎么做組件，而是要把重點(diǎn)放到把控設(shè)計(jì)任務(wù)的質(zhì)量和時(shí)間等等。

5. 組件搭建的范圍是？什么內(nèi)容需要做成組件，選擇的依據(jù)是？

組件搭建范圍：

頁(yè)面底層的框架，原子層的柵格、間距、字體、顏色、陰影等的具體定義、使用范圍、為什么要這么定義。底層框架的原理決定著頁(yè)面的秩序和前端實(shí)現(xiàn)的成本。依次向上到基礎(chǔ)組件、業(yè)務(wù)組件、區(qū)塊組件，最終基于組件多嵌套組合成場(chǎng)景頁(yè)；

組件化內(nèi)容的選擇依據(jù)：

對(duì)于 B 端的產(chǎn)品來說，在結(jié)構(gòu)細(xì)分時(shí)，項(xiàng)目中滿足復(fù)用性和拓展性的可拆解的模塊均可以組件化；把頁(yè)面窮舉羅列出來，分析相似性和可替換的模塊，然后利用思維導(dǎo)圖的方式羅列出可組件化的內(nèi)容，做成可替換的組件，使每個(gè)原子可獨(dú)立變化和替換，這種多嵌套組合式的細(xì)分方式，讓組件最終呈現(xiàn)出來的樣式滿足多場(chǎng)景的業(yè)務(wù)需求。

6. 什么時(shí)候是做組件庫(kù)的時(shí)機(jī)？

在 B 端產(chǎn)品中，做組件庫(kù)的時(shí)機(jī)要需要產(chǎn)品發(fā)展到較為穩(wěn)定的版本，這個(gè)階段公司把整體把系統(tǒng)性提升產(chǎn)品體驗(yàn)和服務(wù)的競(jìng)爭(zhēng)優(yōu)勢(shì)提上了日程；畢竟 B 端的組件庫(kù)需要結(jié)合業(yè)務(wù)設(shè)計(jì)出符合業(yè)務(wù)場(chǎng)景的樣式?，真正可以組件化的邏輯和樣式是不可以憑空想象的，需要積累足夠的了解業(yè)務(wù)邏輯，足夠的業(yè)務(wù)場(chǎng)景。

總結(jié)

1. 產(chǎn)品發(fā)展到較為穩(wěn)定的版本
2. 設(shè)計(jì)師足夠的了解業(yè)務(wù)邏輯
3. 積累足夠的業(yè)務(wù)場(chǎng)景
4. 產(chǎn)品線多、項(xiàng)目多、設(shè)計(jì)師多、工程師多；
5. 公司所處階段重視產(chǎn)品體驗(yàn)、品牌化、差異性；

7. 想問一下你了解的 B 端企業(yè)工作流程是什么樣的？各個(gè)流程設(shè)計(jì)師需要完成哪些內(nèi)容？

B 端企業(yè)工作流程：

我所了解到的企業(yè)工作流，是當(dāng)客戶有意向的時(shí)候，對(duì)應(yīng)的客戶經(jīng)理（產(chǎn)品經(jīng)理）會(huì)針對(duì)具體的需求輸出原始的用戶需求文檔書，并給出簡(jiǎn)單的原型設(shè)計(jì)先和客戶確認(rèn)，確定立項(xiàng)之后，會(huì)拉著各個(gè)業(yè)務(wù)線的 leader 一起對(duì)原型評(píng)審。到這個(gè)時(shí)候最重要的就是設(shè)計(jì)部門的意見，因?yàn)橐坏┰捅慌陌逋ㄟ^，后續(xù)如果在出現(xiàn)產(chǎn)品功能需求上的問題會(huì)把鍋扣在設(shè)計(jì)頭上。所以一般在這個(gè)階段我們都會(huì)比較謹(jǐn)慎，所有問題基本都會(huì)暴露出來。當(dāng)然我理解把問題前置是一個(gè)好的事情。設(shè)計(jì)完成高保真之后，在開發(fā)之前還會(huì)進(jìn)行高保真 Review，參與的人員和評(píng)審原型時(shí)一致。如果高保真評(píng)審?fù)ㄟ^就會(huì)進(jìn)入到開發(fā)測(cè)試階段，上線之前設(shè)計(jì)部門會(huì)進(jìn)行還原度驗(yàn)收，形成設(shè)計(jì)驗(yàn)收?qǐng)?bào)告，并告知客戶經(jīng)理和開發(fā)經(jīng)理，最終上線效果會(huì)根據(jù)具體的項(xiàng)目要求和時(shí)間來定；

8. toB 和 toG 的區(qū)別除了目標(biāo)定位外，你認(rèn)為具體還有哪些區(qū)別？

一般政府以及官方機(jī)構(gòu)被稱為 G 端，嚴(yán)格來說 G 端屬于 B 端的一種。所以 B 端的共性就是為了提高企業(yè)運(yùn)行效率。那么我會(huì)重點(diǎn)說一下我接觸到的一些明顯區(qū)別。

G 端包括實(shí)體的智能硬件以及軟件服務(wù)或者解決方案

智能硬件又包括智慧園區(qū)中的無(wú)人汽車，X 廠的智能裝貨機(jī)器人，以及很多實(shí)際應(yīng)用的智能硬件。其實(shí)目前很多 G 端的企業(yè)在發(fā)硬件發(fā)展上是很快的，我在沒真實(shí)參觀之前也沒有想到，一個(gè) X 廠居然可以完全不用人，就可以實(shí)現(xiàn)全自動(dòng)化生產(chǎn)。這里面當(dāng)然包括很多軟件硬件的解決方案共同協(xié)同。

還有一點(diǎn)就是 G 端更著重強(qiáng)調(diào)預(yù)警：

不管是我們?nèi)粘？吹降慕值肋`規(guī)抓拍，以及工廠里面設(shè)備故障，等等其實(shí)主要功能側(cè)更側(cè)重于強(qiáng)調(diào)預(yù)警。在違章或者故障發(fā)生之后第一時(shí)間通知對(duì)應(yīng)的人去處理。隨著科技慢慢的發(fā)展，人工智能 AI 的介入，以及各種算法和大量數(shù)據(jù)的采集，以后的預(yù)警可能真的會(huì)在故障或者事故發(fā)生之前，就做出預(yù)警的動(dòng)作，從而避免真正警情的發(fā)生。

9. 現(xiàn)在組件都這么成熟了，為什么還要自己花這么大成本去搭建呢？

其實(shí)這是跟你的公司的戰(zhàn)略方向、發(fā)展階段相關(guān)的。對(duì)于一個(gè)中小型企業(yè)或者他可能就覺得用現(xiàn)有的開源組件，已經(jīng)是夠用并且好用，我為什么還要去自己做呢？沒毛病，這種情況下還是以目的導(dǎo)向的，你想節(jié)約成本，就去用別人就成熟的這種規(guī)范去搭就 ok 了，沒問題的。

但是有另外的情況就是：一：開源的組件庫(kù)、場(chǎng)景庫(kù)（pro）基礎(chǔ)，無(wú)法滿足企業(yè)內(nèi)特殊復(fù)雜的業(yè)務(wù)場(chǎng)景；二：公司發(fā)展到一定程度了，想要品牌化、差異性化；自然會(huì)自上而下的去要求和推動(dòng)產(chǎn)品體驗(yàn)升級(jí)和組件化的進(jìn)程；

10. B 端設(shè)計(jì)師如何快速理解業(yè)務(wù)？

查閱行業(yè)報(bào)告

如果是之前從未接觸的新業(yè)務(wù)，我們可以通過市面上的行業(yè)報(bào)告，來對(duì)該行業(yè)有個(gè)大體的認(rèn)知，因?yàn)樵谛袠I(yè)報(bào)告中，會(huì)提到行業(yè)的發(fā)展?fàn)顟B(tài)，政策導(dǎo)向以及未來的發(fā)展趨勢(shì)。

理解產(chǎn)品專有名詞

專業(yè)業(yè)詞匯對(duì)于 B 端設(shè)計(jì)師理解上是有難度的，在實(shí)際工作溝通當(dāng)中都需要通過專業(yè)詞匯來進(jìn)行準(zhǔn)確的描述。比如在 OCR 產(chǎn)品當(dāng)中,我們必須要了解：分類器、K-V、自定義模版/模型、參照字段等一些專有名詞詞匯，而詞匯的背后往往是產(chǎn)品當(dāng)中的深層邏輯。理解專有名詞的含義然后逐步再去理解流程和業(yè)務(wù)邏輯；我們可以選擇直接競(jìng)對(duì)通過競(jìng)品的官網(wǎng)、產(chǎn)品試用等，我們可以尋找到"用戶手冊(cè)、幫助中心”等模塊，也可以去看自家產(chǎn)品沉淀的產(chǎn)品說明書，里面就會(huì)有相應(yīng)的專業(yè)詞匯的講解；從而加深對(duì)產(chǎn)品的理解；

競(jìng)品體驗(yàn)試用

試用往往是在真實(shí)的環(huán)境下對(duì)該產(chǎn)品進(jìn)行體驗(yàn)，試用可能是銷售人員給到你相應(yīng)的體驗(yàn)測(cè)試賬號(hào)，或者你可以直接注冊(cè)。設(shè)計(jì)師應(yīng)該根據(jù)競(jìng)品的官網(wǎng)或銷售人員演示的流程或產(chǎn)品文檔進(jìn)行相應(yīng)的頁(yè)面梳理,通過截圖將該產(chǎn)品的主流程進(jìn)行截圖。最終將頁(yè)面流程靜態(tài)的還原到設(shè)計(jì)圖上，一是遇到同類型需求時(shí),能夠快速了解競(jìng)品的功能設(shè)計(jì)思路；二是幫助我們?cè)诋a(chǎn)品的后續(xù)更新迭代，有了可以參考的版本。如果無(wú)法拿到直接競(jìng)品的體驗(yàn)賬號(hào)，我們也可以去體驗(yàn)相關(guān)聯(lián)競(jìng)品；

產(chǎn)品體驗(yàn)走查，理清流程和結(jié)構(gòu)

對(duì)照產(chǎn)品白皮書體驗(yàn)自身產(chǎn)品，體驗(yàn)過程中列出主功能流程圖以及對(duì)比分析流程和內(nèi)容合理性，將問題和疑惑記錄下來和產(chǎn)品經(jīng)理進(jìn)行溝通，深刻理解業(yè)務(wù)，對(duì)癥下藥才能提供出切實(shí)可行且合理的設(shè)計(jì)方案；

歡迎關(guān)注作者微信公眾號(hào)：「IM UED」