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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

建立設(shè)計(jì)語(yǔ)言

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

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

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

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

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

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

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

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

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

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

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