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

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

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

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

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

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

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

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

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

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

組件化思維的設計解決方案

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

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

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

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

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

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

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

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

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

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

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

建立設計語言

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

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

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

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

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

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

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

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

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

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

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