編輯導(dǎo)語：隨著ToB業(yè)務(wù)不斷地發(fā)展與增加，對于設(shè)計及開發(fā)團(tuán)隊滿足方式的面臨著更高的要求。由于B端產(chǎn)品通常針對企業(yè)用戶，產(chǎn)品的體以及業(yè)務(wù)復(fù)雜性都相對較高，也需要更長的研發(fā)周期。所以本篇文章對如何提升B端產(chǎn)品研發(fā)效率進(jìn)行了方法的分享，值得一看。

工作坊通過總結(jié)百度ERP系統(tǒng)，5條業(yè)務(wù)線，300+后臺產(chǎn)品設(shè)計，分享建立設(shè)計體系的過程及思路，從實際業(yè)務(wù)出發(fā)，呈現(xiàn)在ToB產(chǎn)品的設(shè)計工作中，如何從提升效率的核心需求出發(fā)，設(shè)計整理構(gòu)建設(shè)計體系，以模塊化的方式實現(xiàn)產(chǎn)品的設(shè)計、開發(fā)和運(yùn)作。

通過設(shè)計組件庫的開發(fā)及使用，以及體系化設(shè)計思維和路徑的建設(shè)，形成提升團(tuán)隊設(shè)計效率、開發(fā)效率的工作方法。幫助設(shè)計者以用戶體驗基礎(chǔ)為指導(dǎo)，輔助業(yè)務(wù)挖掘，結(jié)合業(yè)務(wù)場景和用戶特征，從趨于相同的表象中挖掘產(chǎn)品的差異化優(yōu)勢，促進(jìn)產(chǎn)品設(shè)計開發(fā)效率提升，從而切實解決問題，設(shè)計出讓用戶滿意的產(chǎn)品。

信息化發(fā)展對ToB產(chǎn)品的影響

了解互聯(lián)網(wǎng)的發(fā)展與產(chǎn)品設(shè)計的大環(huán)境，了解ToB時代產(chǎn)品設(shè)計發(fā)展的需要，從信息化技術(shù)的發(fā)展看出，產(chǎn)品設(shè)計初期是基于數(shù)據(jù)庫理論，逐步增加業(yè)務(wù)邏輯操作，思維模式是以“數(shù)據(jù)”為基礎(chǔ)，初期設(shè)計通常只是根據(jù)“業(yè)務(wù)場景”的工作內(nèi)容，設(shè)計對應(yīng)的數(shù)據(jù)及相關(guān)邏輯關(guān)系，構(gòu)成的簡單的功能操作界面。

當(dāng)業(yè)務(wù)日益增加，需求盤根錯節(jié)，相互關(guān)系越來越復(fù)雜時，整個結(jié)構(gòu)就會變得非常復(fù)雜，不僅開發(fā)成本高，修改、調(diào)整也會變得異常困難。

ToB產(chǎn)品的類型及特點(diǎn)

正是由于B端產(chǎn)品的復(fù)雜性和更注重效能的特殊性，決定了需要設(shè)計、開發(fā)及產(chǎn)品進(jìn)行全流程的配合，平衡質(zhì)量與效率之間的關(guān)系。

隨著ToB業(yè)務(wù)的發(fā)展與增多，對于設(shè)計、開發(fā)團(tuán)隊滿足方式的也進(jìn)一步有了更高的要求。由于B端產(chǎn)品通常針對企業(yè)用戶，產(chǎn)品的體以及業(yè)務(wù)復(fù)雜性都相對較高，也需要更長的研發(fā)周期。除了產(chǎn)品解決問題的“能力”之外，產(chǎn)品還需要關(guān)注研發(fā)的效率及成本。

因為缺少統(tǒng)一的規(guī)范指導(dǎo)，不同的視覺設(shè)計師 會把相同功能的組件設(shè)計成不同的樣式，設(shè)計可控性差，增加用戶認(rèn)知成本，各模塊之間差異增加，隨著一致性成本、溝通成本增加，勢必會造成設(shè)計、研發(fā)效率，以及組織效能的極速下降。因此，如何降低產(chǎn)品的單位研發(fā)成本？如何讓整個團(tuán)隊的組織效能達(dá)到最佳狀態(tài)？是需要解決的問題。

組件化思維的設(shè)計解決方案

在不斷復(fù)雜化的形態(tài)中，缺乏有效的控制機(jī)制，最終導(dǎo)致整個系統(tǒng)失去控制。構(gòu)建組件化設(shè)計規(guī)范系統(tǒng)，能很好的解決了剛剛所提到的大部分問題，設(shè)計的標(biāo)準(zhǔn)化和可協(xié)調(diào)性，基于可被復(fù)用的目的，形成規(guī)范化的組件，研發(fā)標(biāo)準(zhǔn)化、用戶更容易理解統(tǒng)一的體驗，通過產(chǎn)品、設(shè)計、研發(fā)、數(shù)據(jù)架構(gòu)的標(biāo)準(zhǔn)化，打通不同模塊的壁壘，提升模塊化與靈活性。將單點(diǎn)之間的競爭力相互配合，形成“場域”競爭力。

使用GTD方法論，協(xié)助整理及構(gòu)建組件化系統(tǒng)，并依據(jù)對很多組件庫的調(diào)研，除對產(chǎn)品業(yè)務(wù)的理解和掌握之外，還針對業(yè)務(wù)場景進(jìn)行整體分析，提取可以組件化的邏輯和功能樣式，并對這些共用組件進(jìn)行歸類、梳理。最終輸出基礎(chǔ)組件、導(dǎo)航組件、數(shù)據(jù)輸入、數(shù)據(jù)展示、反饋，5大類，共計50多組組件。

只有設(shè)計標(biāo)準(zhǔn)與團(tuán)隊協(xié)作標(biāo)準(zhǔn)完美融合，才能建立真正的組件系統(tǒng)?？刂飘a(chǎn)品的“生產(chǎn)結(jié)果”，提升產(chǎn)品質(zhì)量；還能規(guī)范產(chǎn)品的“生產(chǎn)過程”，形成一套完整的多職能協(xié)作流程，保證效率、成本、體驗之間的平衡。

回歸到業(yè)務(wù)中，對組件庫的重要組成部分，以系統(tǒng)化的設(shè)計思路，進(jìn)行層次化、結(jié)構(gòu)化的圈定，依據(jù)不同的顆粒度 拆解為基礎(chǔ)元件、功能模塊、業(yè)務(wù)模塊、頁面模板。

點(diǎn)線面設(shè)計提供的最大的優(yōu)點(diǎn)之一就是能夠在抽象和具體之間的靈活轉(zhuǎn)換，點(diǎn)線面的互相轉(zhuǎn)化是有規(guī)律可尋的，無論設(shè)計的版面最終有多么的復(fù)雜，都可以簡化到「點(diǎn)線面」上來, 將點(diǎn)線面這個概念應(yīng)用在界面設(shè)計中，也同樣遵循這個設(shè)計原理。

利用點(diǎn)線面的設(shè)計原理，通過在 大層面（頁）和小層面（組件）同時思考界面，建立一個適應(yīng)組件的動態(tài)系統(tǒng)，從而創(chuàng)建出一個有成熟規(guī)范的體系的設(shè)計系統(tǒng)。點(diǎn)線面不是一個線性的過程，它更像是一個心理模型，來幫助我們吧用戶界面看作是一個連貫的整體。在頁面模板設(shè)計階段，我們可以看到當(dāng)真實的內(nèi)容應(yīng)用于設(shè)計系統(tǒng)時，所有這些模塊是如何運(yùn)作的。

組件化設(shè)計開發(fā)流程提效

當(dāng)設(shè)計師遇到同一類組件設(shè)計場景時，對于高可復(fù)用的界面，根據(jù)自己的業(yè)務(wù)模式，對組件、模塊做出合理的舍棄，讓業(yè)務(wù)場景解決方案的設(shè)計和實施者能夠通過配置管理實現(xiàn)落地。在實際操作中，通過點(diǎn)線面設(shè)計的方法，對需求結(jié)構(gòu)梳理，組件元素對應(yīng)頁面功能框架從小到大，從簡到繁，基本可以形成頁面的框架結(jié)構(gòu)。

點(diǎn)線面設(shè)計提供的最大的優(yōu)點(diǎn)之一就是能夠在抽象和具體之間的靈活轉(zhuǎn)換，我們可以同時看到我們的界面分解成點(diǎn)和線的元素，也可以看到這些元素如何結(jié)合在一起形成我們的最后體驗。點(diǎn)線面設(shè)計就體現(xiàn)了這一事實，三個不同的階段協(xié)同工作，以產(chǎn)生有效的用戶界面設(shè)計系統(tǒng)。

用戶界面將會隨著內(nèi)容的動態(tài)性質(zhì)而改變，這些變化會直接影響組件庫中點(diǎn)、線、面的構(gòu)建方式，因此歸納整合這些變量，有助于我們建立更具彈性、更系統(tǒng)的設(shè)計體系。對于復(fù)雜的B端產(chǎn)品設(shè)計，通過設(shè)計模式和共享實踐的實際操作，才能保證產(chǎn)品設(shè)計實現(xiàn)的可控性。

設(shè)計體系思維，幫助我們跳出設(shè)計的單一層面，去思考從產(chǎn)品層、到體驗層、再到開發(fā)層這一完整的整體。讓設(shè)計滿足體驗層的同時，滿足產(chǎn)品層面的目標(biāo)，同時讓產(chǎn)品的設(shè)計與開發(fā)高度耦合，將整個產(chǎn)品串聯(lián)成一個整體。體系化的建立和推動，需要整個產(chǎn)品團(tuán)隊擁有一致的目標(biāo)，并為之通力協(xié)作才能完成。

建立設(shè)計語言

借鑒前端思維來設(shè)計和輸出規(guī)范，用于存儲視覺設(shè)計部分的具體參數(shù)，建立一種共享語言，讓設(shè)計規(guī)則跟前端更好的銜接，實現(xiàn)工程化的界面設(shè)計。通過與開發(fā)人員一起討論，對設(shè)計變量名稱的合理定義，讓屬性參數(shù)更容易理解，建立通用變量的統(tǒng)一命名，以及對組件變量的規(guī)則制定，使用在溝通中約定的規(guī)則，會使得設(shè)計和開發(fā)過程更加容易。

如：在色彩體系變量中，以代號形式落地實踐，實現(xiàn)即使當(dāng)界面中涉及到大量的顏色變量使用時，通過顏色的代號直接替換，可以實現(xiàn)快速換膚；

又如，在建立字階與行高時，為界面提供更靈活的字體行高適配，設(shè)定緊縮、常規(guī)和寬松三個數(shù)值的行高，這樣可以更好的為B端業(yè)務(wù)服務(wù)，根據(jù)界面信息展示的需要選擇行高，滿足不同產(chǎn)品對于屏效的要求。

在建立間距系統(tǒng)時，我們所有的間距變量都遵循4N系統(tǒng)等等，通過這樣變量約定，保障界面細(xì)節(jié)有效統(tǒng)一，并在規(guī)范文檔中補(bǔ)充說明使用場景、極端適配規(guī)則，方便適配多種需求，保障工程化的界面設(shè)計的可實施，使具備界面碼化能力，從而大幅度降低迭代成本、擴(kuò)展性增強(qiáng)等等。

對于做B端產(chǎn)品設(shè)計的同學(xué)來說，需要有系統(tǒng)的基礎(chǔ)建設(shè)意識，包括業(yè)務(wù)梳理、個性化需求評審、產(chǎn)品架構(gòu)設(shè)計等流程。對界面設(shè)計多個維度進(jìn)行抽象和結(jié)構(gòu)化，與工作流結(jié)合，讓它成為一個有機(jī)的完整系統(tǒng)，而設(shè)計師也能夠跳過組件化解決的設(shè)計部分，擁有更多的時間洞察業(yè)務(wù)本質(zhì)，理解業(yè)務(wù)全貌，從而專注于關(guān)鍵場景的體驗升級，助力提升產(chǎn)品的競爭力。

針對不同設(shè)計需求的項目，不同的流程支援，場景方案標(biāo)準(zhǔn)化、流程標(biāo)準(zhǔn)化等，為業(yè)務(wù)高效接入，創(chuàng)造更高效的資源分配模式。

產(chǎn)品設(shè)計體系化視角，建立模式語言，構(gòu)建團(tuán)隊協(xié)作機(jī)制，提升B端產(chǎn)品的設(shè)計開發(fā)效率。著眼于整個項目，更宏觀地了解產(chǎn)品所處的生命階段，才能知道設(shè)計需要解決的問題是什么，并以此有針對性的制定設(shè)計策略。

在設(shè)計過程中，業(yè)務(wù)發(fā)展到什么程度，就需要有針對性的解決方案，而且不能只是停留在思考功能層面的問題，提前做一些設(shè)計和規(guī)劃，始終以更高的維度去審視全局，思考當(dāng)下的設(shè)計，利用點(diǎn)、線、面設(shè)計原理，進(jìn)行高效地產(chǎn)生出千變?nèi)f化的系統(tǒng)頁面（無論是設(shè)計師設(shè)計，還是開發(fā)直接代碼實現(xiàn)）。

通過組件化的解決方案，將產(chǎn)品設(shè)計標(biāo)準(zhǔn)化、組件化，從小處入手，去解決產(chǎn)品中最基礎(chǔ)的一些問題，更好的滿足規(guī)?；a(chǎn)需求，提升設(shè)計開發(fā)效率。以體系化思維去思考問題的本質(zhì)，建立適用于全局設(shè)計體系，形成由下至上的自然式、賦能式的設(shè)計系統(tǒng)管理模式。

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

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