設(shè)計(jì)系統(tǒng)的建設(shè)者如果想有效地規(guī)劃設(shè)計(jì)資產(chǎn)，提升組件的應(yīng)用率，可以怎么做？這篇文章里，作者結(jié)合實(shí)際案例，分享了建設(shè)成熟的設(shè)計(jì)系統(tǒng)的經(jīng)驗(yàn)策略，即“通過場景演繹的方法重構(gòu)資產(chǎn)，為其建立秩序，提升內(nèi)在一致性”。一起來看看，或許會(huì)對你有所啟發(fā)。

前言

伴隨行業(yè)發(fā)展，越來越多企業(yè)在復(fù)雜業(yè)務(wù)場景中引入設(shè)計(jì)系統(tǒng)，對于建設(shè)一套成熟的設(shè)計(jì)系統(tǒng)，需要考慮三大模塊：生產(chǎn)、消費(fèi)、監(jiān)測。本文結(jié)合百度搜索設(shè)計(jì)系統(tǒng)近期針對【生產(chǎn)和消費(fèi)】環(huán)節(jié)的升級(jí)改版，分享其中的經(jīng)驗(yàn)總結(jié)，即：通過場景化重構(gòu)資產(chǎn)，為其建立秩序，提升內(nèi)在一致性，并提升資產(chǎn)消費(fèi)體驗(yàn)。

文中介紹的方法，不僅可以幫助設(shè)計(jì)系統(tǒng)的建設(shè)者有效規(guī)劃設(shè)計(jì)資產(chǎn)，同時(shí)可幫助業(yè)務(wù)設(shè)計(jì)師在日常項(xiàng)目中對組件高效應(yīng)用和合理創(chuàng)新。

一、項(xiàng)目背景

百度搜索在移動(dòng)時(shí)代到來初期，通過劃分垂類團(tuán)隊(duì)，深耕垂類特性，以極致體驗(yàn)滿足不同垂類下用戶對內(nèi)容精細(xì)化消費(fèi)的訴求。這一階段設(shè)計(jì)資產(chǎn)的特點(diǎn)為：

1. 組件資產(chǎn)與業(yè)務(wù)強(qiáng)綁定，業(yè)務(wù)獨(dú)立維護(hù)。
2. 業(yè)務(wù)創(chuàng)新頻繁，組件樣式新增多、合并少。
3. 設(shè)計(jì)系統(tǒng)內(nèi)在邏輯不健全，主要為各業(yè)務(wù)組件的快速錄入封裝。

這種設(shè)計(jì)系統(tǒng)建設(shè)方式是一種樣式歸納性思維：通過在初期快速歸納收集，滿足業(yè)務(wù)高速發(fā)展的需要。

但伴隨業(yè)務(wù)發(fā)展成熟，各垂類團(tuán)隊(duì)橫向協(xié)作愈加頻繁，對組件復(fù)用提效與保持產(chǎn)品體驗(yàn)一致性的訴求越發(fā)明顯，這種建設(shè)思維便會(huì)暴露出它的劣勢。

• 資產(chǎn)通用性不足，體驗(yàn)難打平：業(yè)務(wù)各自維護(hù)資產(chǎn)，橫向場景兼顧不全面，資產(chǎn)橫向復(fù)用的標(biāo)準(zhǔn)不明確，體驗(yàn)差異難抹除。
• 資產(chǎn)冗余且龐大，維護(hù)成本高：設(shè)計(jì)系統(tǒng)中存在很多樣式略有不同，體驗(yàn)又無差異的組件，在業(yè)務(wù)升級(jí)和設(shè)計(jì)改版時(shí)成本高且容易出現(xiàn)遺漏。
• 資產(chǎn)缺乏邏輯性，約束性不足：資產(chǎn)與設(shè)計(jì)意圖的映射關(guān)系模糊，在相似的用戶需求和場景設(shè)計(jì)中，給設(shè)計(jì)師的設(shè)計(jì)指導(dǎo)力度不足。

而這些最終的結(jié)果會(huì)導(dǎo)致設(shè)計(jì)系統(tǒng)越來越不規(guī)范，易用性大大降低，不匹配業(yè)務(wù)成熟期的訴求。

因此在設(shè)計(jì)系統(tǒng)建設(shè)上，需要更高效的建設(shè)邏輯，以提高資產(chǎn)的易維護(hù)性與可拓展性，保證在業(yè)務(wù)成熟期可以更高效賦能團(tuán)隊(duì)協(xié)作，增強(qiáng)產(chǎn)品體驗(yàn)一致性。

二、項(xiàng)目方案

1. 明確目標(biāo)

基于百度搜索設(shè)計(jì)系統(tǒng)現(xiàn)狀，其核心問題是資產(chǎn)規(guī)范性不足，而資產(chǎn)主要由“組件”和“規(guī)范”兩部分組成，設(shè)計(jì)師和工程師通過調(diào)用組件或閱讀規(guī)范，實(shí)現(xiàn)對設(shè)計(jì)系統(tǒng)的消費(fèi)。因此我們理解一個(gè)業(yè)務(wù)級(jí)的設(shè)計(jì)系統(tǒng)，能夠賦能業(yè)務(wù)的方式需滿足：

1. 具有完備的設(shè)計(jì)資產(chǎn)：規(guī)范定義明確，組件變體健全。
2. 提供高效的消費(fèi)體驗(yàn)：消費(fèi)途徑豐富，消費(fèi)路徑簡短。
3. 具有良性的迭代模型：中臺(tái)與業(yè)務(wù)同頻，業(yè)務(wù)組件優(yōu)化可實(shí)現(xiàn)資產(chǎn)的沉淀回流。

其中能夠?qū)崿F(xiàn)業(yè)務(wù)賦能最大化的前提，是有完備的資產(chǎn)作為基礎(chǔ)。因此將設(shè)計(jì)系統(tǒng)的迭代發(fā)展，劃分了三個(gè)階段：

1. 統(tǒng)一化：夯實(shí)基礎(chǔ)，重構(gòu)設(shè)計(jì)資產(chǎn)底層建設(shè)邏輯，明確資產(chǎn)適用場景，提升可拓展性與易維護(hù)性。
2. 工程化：整合資產(chǎn)代碼，提升資產(chǎn)消費(fèi)效率，并在設(shè)計(jì)中臺(tái)與業(yè)務(wù)之間建立資產(chǎn)迭代的良性循環(huán)。
3. 工具化：探索設(shè)計(jì)系統(tǒng)工具化的形態(tài)，及AI大模型結(jié)合的機(jī)會(huì)，豐富消費(fèi)途徑，實(shí)現(xiàn)在業(yè)務(wù)交付的不同階段下全方位提效。

那么在“統(tǒng)一化”階段，我們給出了目標(biāo)：提升資產(chǎn)的規(guī)范性與易用性。

2. 目標(biāo)拆解

面對設(shè)計(jì)交付鏈路上，遇到諸多雜亂的問題，應(yīng)當(dāng)如何去給出合理的解決方案呢？

首先可以基于現(xiàn)狀，從“資產(chǎn)生產(chǎn) → 資產(chǎn)消費(fèi)” 的鏈路出發(fā)對目標(biāo)進(jìn)行拆解。

三、設(shè)計(jì)動(dòng)作

1. 重構(gòu)底層邏輯，轉(zhuǎn)變視角

先來看一個(gè)設(shè)計(jì)系統(tǒng)工作中常遇到的問題，以下幾個(gè)組件從樣式上非常接近，那么在組件歸類上是否應(yīng)該歸為同一個(gè)組件呢？

那以下兩個(gè)組件從形態(tài)上差異明顯，那他們又是否為一個(gè)組件呢？

1）過往：樣式歸納思維

在回答上面的兩個(gè)問題之前，不妨先來看看如果按之前的“樣式歸納”的視角進(jìn)行分析，在資產(chǎn)建設(shè)中會(huì)發(fā)生什么？

我們發(fā)現(xiàn)樣式歸納性思維，是通過對已知的組件資產(chǎn)，進(jìn)行共性和差異性羅列，然后求同存異，將共性較多的設(shè)計(jì)稿歸納為某一類組件；并分別定義其組件能力和使用場景。

這種建設(shè)方式可以在上圖直觀感受到，在初期的確可以幫助業(yè)務(wù)線快速建設(shè)出設(shè)計(jì)系統(tǒng)，實(shí)現(xiàn)單一業(yè)務(wù)內(nèi)的復(fù)用，但當(dāng)各業(yè)務(wù)均發(fā)展成熟時(shí)，這種設(shè)計(jì)系統(tǒng)卻無法滿足跨業(yè)務(wù)復(fù)用的情況，且缺乏內(nèi)在邏輯的歸納思維，也無法對持續(xù)發(fā)散的業(yè)務(wù)創(chuàng)新形成有效收攏，這時(shí)便需要我們轉(zhuǎn)變視角。

2）轉(zhuǎn)變：場景化演繹思維

在業(yè)務(wù)變化快的情況下，歸納性思維的核心缺陷在于資產(chǎn)源頭不穩(wěn)固。因此需探索一種源頭相對穩(wěn)定的設(shè)計(jì)發(fā)起點(diǎn)，這可以通過追溯用戶行為進(jìn)行解決。

人類發(fā)展至今，環(huán)境和媒介不斷變化，但是人類可實(shí)施的行為動(dòng)作并沒有太多變化。同時(shí)在日常產(chǎn)出時(shí)，我們的設(shè)計(jì)意圖基本是圍繞如何讓用戶在某場景下用某種行為達(dá)成目標(biāo)來開展的，之后這些產(chǎn)出物又被封裝為可復(fù)用的組件。由此可以倒推，將組件的本質(zhì)抽煉為：幫助用戶在特定行為場景下，通過某個(gè)組件，以某種方式，達(dá)成目的。

而組件交互與樣式的變化，底層所承載的設(shè)計(jì)意圖都是為了在這個(gè)特定的場景下，優(yōu)化用戶的行為，提升場景體驗(yàn)。

這里所提到的行為場景，可幫助我們跳脫出業(yè)務(wù)場景，將設(shè)計(jì)資產(chǎn)剝離業(yè)務(wù)影響因素，回歸到簡單直接的行為動(dòng)作之中。

當(dāng)了解組件的本質(zhì)，便可以將復(fù)雜多樣的組件，映射到自己產(chǎn)品、業(yè)務(wù)線的幾個(gè)宏觀用戶行為場景之中，再以此“場景”為基礎(chǔ)，層層延展，從“更好的達(dá)成用戶目標(biāo)” 出發(fā)來演繹不同組件的變體。

我們可以試試以這種思維去重新思考本章節(jié)開頭提出的兩個(gè)問題：

很清楚的理解，這些不同業(yè)務(wù)中的組件，是為了服務(wù)于用戶的哪一種行為場景，而他們從樣式上來說是否相似，僅僅是服務(wù)于業(yè)務(wù)場景的表現(xiàn)形式。由此便可以將各類資產(chǎn)劃分到不同的組件類型中，并得到MVP版的設(shè)計(jì)資產(chǎn)及其延伸變體。

這種“場景演繹”的視角是一種根本思維，由內(nèi)向外發(fā)散，通過本質(zhì)推導(dǎo)組件可以滿足用戶什么場景的訴求。這種場景視角，可幫我們在建設(shè)設(shè)計(jì)系統(tǒng)時(shí)，提升通用性，降低維護(hù)成本。

2. 演繹推理變體，建立秩序

在上一小節(jié)，講解了什么是場景演繹思維，那么在實(shí)際工作中，還會(huì)思考兩個(gè)問題：

1. 應(yīng)當(dāng)依照何種原則和方法去推理變體？
2. 每一個(gè)組件理論上可以衍生各種變體，那么在構(gòu)建設(shè)計(jì)系統(tǒng)時(shí)，應(yīng)當(dāng)滿足到何種程度？

1）推理變體的方法

如上文講到，我們拆解行為場景的目標(biāo)，是為了滿足子場景下更好的體驗(yàn)，建設(shè)合理的組件變體。此處以Tab組件的部分場景拆解為例，通過三步，來講解組件場景演繹的方法。

第一步：先明確最基礎(chǔ)的行為場景，以及達(dá)成目標(biāo)的最基礎(chǔ)方式；例如當(dāng)了解Tab組件的本質(zhì)是為了幫助用戶達(dá)成“切換內(nèi)容”的場景目標(biāo)時(shí)，就可以通過細(xì)化主行為場景，演繹在各細(xì)分場景下，如何以更好的體驗(yàn)優(yōu)化用戶的行為，從而得到相應(yīng)的變體。

第二步：演繹變體，衍生行為場景，優(yōu)化達(dá)成方式；可以從對象、空間、時(shí)間等維度分別去細(xì)化行為發(fā)生的場景，然后從提操作體驗(yàn)、提認(rèn)知體驗(yàn)、提情感化體驗(yàn)等維度去優(yōu)化達(dá)成方式。

第三步：獲得變體與適用場景，秩序建立：通過這樣的場景拆解與演繹，一個(gè)完整的組件便建立完成，對每一種變體的適用場景，也有了清晰的認(rèn)知。由此可以通過抽象業(yè)務(wù)場景的特征，然后給各業(yè)務(wù)開發(fā)者與設(shè)計(jì)師，提供合理的使用建議。

同時(shí)，以這種演繹的方式建設(shè)組件后，每一類組件的能力定位更加明確，資產(chǎn)的建設(shè)會(huì)變得更加精簡，不易冗余。而我們對每類組件在搜索場域下可具備的能力與發(fā)展方向，也可以有一個(gè)脈絡(luò)清晰的預(yù)判。

不同的組件在場景拆解的維度上也會(huì)有所差異，但維度上需秉持從寬泛到具體、從廣義到具象的層層遞進(jìn)式拆解，拆解越詳細(xì)，所得變體也會(huì)越全面。

當(dāng)我們將所有設(shè)計(jì)資產(chǎn)中，都按這種方式進(jìn)行重構(gòu)歸類后，便可以得到一張有秩序有建議的設(shè)計(jì)系統(tǒng)全局場景演繹規(guī)劃圖。它可幫助清晰地預(yù)判設(shè)計(jì)系統(tǒng)的缺失，從而更好地規(guī)劃設(shè)計(jì)工作。

由以上方式可獲得任何一個(gè)資產(chǎn)的建設(shè)發(fā)展圖，那么關(guān)于此資產(chǎn)在當(dāng)前階段需要滿足到哪種程度，則可以從業(yè)務(wù)需要與建設(shè)成本去綜合考慮，從而保持設(shè)計(jì)系統(tǒng)在不同階段，都可以資源利用最大化。

3. 貼合消費(fèi)場景，提升易用

在重構(gòu)資產(chǎn)的同時(shí)，也需要考慮消費(fèi)場景的易用性，而規(guī)范文檔是現(xiàn)階段消費(fèi)資產(chǎn)的主要方式之一。因此也對文檔的內(nèi)容做了優(yōu)化整合，并為設(shè)計(jì)系統(tǒng)后續(xù)內(nèi)容工程化打下基礎(chǔ)。

第一步：資產(chǎn)層級(jí)扁平化；將組件從行為場景上，按更細(xì)的顆粒度進(jìn)行分組呈現(xiàn)，同時(shí)建立目錄導(dǎo)覽頁，平鋪所有組件的跳轉(zhuǎn)鏈接，以更加扁平的姿態(tài)提升組件觸達(dá)效率。

第二步：文檔結(jié)構(gòu)統(tǒng)一化；考慮之前的文檔由不同設(shè)計(jì)師撰寫，在撰寫習(xí)慣與表達(dá)用語上有所差異，會(huì)增加開發(fā)者閱讀時(shí)的理解成本。因此我們將組件文檔結(jié)構(gòu)與話術(shù)進(jìn)行了統(tǒng)一，將組件按變體類型，進(jìn)行統(tǒng)一分類，再分別講解其對應(yīng)的交互與樣式參數(shù)，從而進(jìn)一步提升消費(fèi)時(shí)組件變體的觸達(dá)效率，以及減少不相關(guān)信息的干擾。

第三步：內(nèi)容場景化；將文檔按組件變體分類完成后，同時(shí)在文檔開篇，以及每個(gè)變體下，建議了適用場景，以提升開發(fā)者的使用準(zhǔn)確率

四、項(xiàng)目結(jié)果

在今年上半年，通過轉(zhuǎn)變設(shè)計(jì)思維，運(yùn)用本文行為場景演繹的方式，使設(shè)計(jì)系統(tǒng)變得：

1. 每類設(shè)計(jì)資產(chǎn)邊界清晰、適用場景明確，重復(fù)冗余概率低。
2. 設(shè)計(jì)系統(tǒng)內(nèi)在邏輯統(tǒng)一，易維護(hù)，具備可拓展性與易規(guī)劃性。
3. 設(shè)計(jì)系統(tǒng)可變得更加具有確定性，減少業(yè)務(wù)的動(dòng)態(tài)易變所帶來的影響。
4. 保證服務(wù)的產(chǎn)品的體驗(yàn)一致性，降低用戶使用成本。

同時(shí)通過優(yōu)化消費(fèi)場景，幫助開發(fā)者更易理解，提高資產(chǎn)生成與資產(chǎn)消費(fèi)的匹配程度。從整體度量效果上來看，組件變體的在保證可覆蓋歷史場景的情況下，實(shí)現(xiàn)了精簡化；通過演繹變體，優(yōu)化文檔結(jié)構(gòu)，也提升了開發(fā)者對于設(shè)計(jì)系統(tǒng)消費(fèi)的整體滿意度以及對規(guī)范合理性的感知。

另外為提升設(shè)計(jì)系統(tǒng)對業(yè)務(wù)的實(shí)用性和可用性，我們配合多次的團(tuán)隊(duì)宣貫，幫助開發(fā)者建立共識(shí)，保證后續(xù)協(xié)作效率。

五、實(shí)踐方法總結(jié)

本文著重介紹的場景演繹方法本質(zhì)是一種場景化的設(shè)計(jì)思維，其核心在于抽象場景特征，通過抽象的場景特征實(shí)現(xiàn)設(shè)計(jì)資產(chǎn)與業(yè)務(wù)場景之間的關(guān)聯(lián)匹配。

其中對于資產(chǎn)建設(shè)者而言，是正向通過拆解行為場景獲得場景特征，從而更好匹配業(yè)務(wù)場景；而對于資產(chǎn)消費(fèi)者，是逆向通過提煉業(yè)務(wù)場景，進(jìn)而匹配行為場景，發(fā)現(xiàn)資產(chǎn)變體的不足，從而完善設(shè)計(jì)系統(tǒng)。

由此可見這種方法，不僅適用于系統(tǒng)級(jí)組件級(jí)的推演，也可以用于日常業(yè)務(wù)需求的創(chuàng)新與業(yè)務(wù)組件提煉中。

由于每個(gè)組件的本質(zhì)是服務(wù)于單一的行為場景，因此在日常需求中，需要設(shè)計(jì)師先對用戶流程進(jìn)行梳理。

在需求的若干個(gè)業(yè)務(wù)場景中，對每一個(gè)業(yè)務(wù)場景，做最優(yōu)的行為路徑設(shè)計(jì)，再通過提煉每個(gè)行為路徑下，涉及到的行為場景及其場景特征，去匹配現(xiàn)有設(shè)計(jì)資產(chǎn)：

1. 如改版需求，可以判斷已應(yīng)用的組件變體是否很好的幫助用戶達(dá)成了目標(biāo)，從而依托業(yè)務(wù)場景思考更適用的組件變體。
2. 如新需求，可以判斷現(xiàn)有的場景特征，是否可以匹配已有的設(shè)計(jì)資產(chǎn)，以及已有的設(shè)計(jì)資產(chǎn)是否可以被進(jìn)一步優(yōu)化。

六、設(shè)計(jì)系統(tǒng)后續(xù)展望

本文分享了如何通過【場景演繹】的方法重構(gòu)資產(chǎn)，為其建立秩序，提升內(nèi)在一致性；當(dāng)然從整個(gè)設(shè)計(jì)系統(tǒng)的長期建設(shè)層面來看，當(dāng)前對資產(chǎn)的系統(tǒng)化重構(gòu)與文檔結(jié)構(gòu)化的建設(shè)只是開始，絕非終點(diǎn)，在真實(shí)的協(xié)作流程中仍然會(huì)面臨兩大問題：

1. 設(shè)計(jì)中臺(tái)與業(yè)務(wù)沉淀如何保持同頻

業(yè)務(wù)設(shè)計(jì)師在真正的資產(chǎn)消費(fèi)鏈路中往往具有很強(qiáng)業(yè)務(wù)訴求，需要對部分資產(chǎn)基于業(yè)務(wù)進(jìn)行定制，甚至需要建立獨(dú)立品牌風(fēng)格。這些不可避免的會(huì)導(dǎo)致業(yè)務(wù)設(shè)計(jì)師需要獨(dú)立維護(hù)一套子級(jí)設(shè)計(jì)資產(chǎn)，同時(shí)下游的前端也需要基于業(yè)務(wù)對資產(chǎn)進(jìn)行二次開發(fā)。

這容易導(dǎo)致業(yè)務(wù)場景的變更無法及時(shí)同步設(shè)計(jì)中臺(tái)；同時(shí)通用資產(chǎn)的迭代更新也無法快速覆蓋到業(yè)務(wù)場景中，導(dǎo)致對業(yè)務(wù)賦能效果打折扣，這些長期而言不利于設(shè)計(jì)系統(tǒng)健康迭代。

2. 原有資產(chǎn)消費(fèi)路徑不便捷

雖然在本次升級(jí)中優(yōu)化了規(guī)范文檔的閱讀體驗(yàn)，但其實(shí)它僅僅是整個(gè)資產(chǎn)消費(fèi)鏈路中的一小部分。整體看設(shè)計(jì)師仍然需要在規(guī)范文檔、Sketch組件UIkit與需求設(shè)計(jì)稿之前反復(fù)橫跳切換；同時(shí)在交付過程中，也無法將設(shè)計(jì)資產(chǎn)同前端開發(fā)者建立共同語言的鏈接，從而不利于設(shè)計(jì)系統(tǒng)對業(yè)務(wù)落地的深度提效。

要解決這兩個(gè)問題，需要推動(dòng)設(shè)計(jì)系統(tǒng)工程化、提升資產(chǎn)消費(fèi)鏈路靈活性，這其中的關(guān)鍵則是：

1. 在上游建立中臺(tái)與業(yè)務(wù)之間同源可擴(kuò)展的Design Token。
2. 在下游提供可串聯(lián)設(shè)計(jì)與研發(fā)資產(chǎn)消費(fèi)的工具分發(fā)平臺(tái)，及提升協(xié)作溝通效率的信息中轉(zhuǎn)站。

近期已經(jīng)按照以上思路開始了“設(shè)計(jì)系統(tǒng)工程化與工具化”的升級(jí)改造，這部分內(nèi)容后續(xù)有機(jī)會(huì)也會(huì)和大家見面分享。