對于以下場景，你是不是有那么一點點熟悉：

視覺A：「視覺 B，把你之前的稿子發我下，我的頁面里也有組件 A」

視覺A：「稿子里的組件 A 怎么跟視覺 C 剛剛發群里的不一樣啊，我以哪個為主？」

視覺B：「剛剛業務通知組件 A 得修改，這次大促有 30+ 個頁面都用到，這修改量這么大咋辦？」

交互A：「這個 tab 上的文字看不清」，視覺A：「我覺得挺清晰的了」

開發：「為什么每次給的設計稿，明明長得都差不多，可尺寸就差了幾個像素，我又得寫新的樣式表進去」

以上的對話，在大型且多人合作的項目中尤為常見。

隨著大促項目體量越來越大，參與人員越來越多，這些問題越發明顯，直接影響了活動的視覺統一性和整體的工作效率。因此我們開展了營銷組件庫的設計。

什么是組件庫？

組件庫就是界面設計常用控件或元件的集合，「組」是設計元素的組合方式，「件」由不同的元件組成。

其工作方式和樂高原理差不多，玩家（設計師）通過小元件（設計元素）或組件（模板）的不同組合形式，層層搭建和嵌套，最終組成建筑（頁面）。

△ 樂高W16搭建過程，圖片來自「什么值得買」

△ 頁面設計過程

組件庫的優勢

1. 保證用戶體驗的一致性

對于大促這種含有多個子項目，涉及到 30+ 的頁面同期輸出的復雜項目，每個獨立的子項目雖然在需求上有一定區別，但整體的用戶體驗需要滿足基本的一致性，減少用戶認知和負擔，提高用戶的使用效率。組件庫的建立，其統一的設計語言能保持設計結果的統一性，避免多人多風格的現象。

2. 提升效率

• 設計成本：減少重復的機械式設計和反復糾結用 6px 還是 8px 的設計思考成本，從而有更多的時間參與到設計創新中去，發揮更高的設計價值；
• 協作成本：減少重復開發的工作，可準確定位又方便后期的維護和修改。開發者也能通過組件進行協作和同步，提率；
• 溝通成本：減少因認知不一致而導致反復溝通和解釋的成本。

如何做適合自己團隊的組件庫？

不同行業、不同產品、不同項目的組件庫因其業務特點不同，其差異會非常大。那怎樣的組件庫才能滿足「大促營銷類」的項目需求？

1. 前期研究，確定設計方向

分析研究

行業設計：行業優秀的設計系統、組件庫搭建思維，以及其源文件，是最寶貴的學習資源。

主站設計：保證全站設計的一致性的同時，也是重要的學習參考；

過往問題：對過去項目的橫向和縱向對比和分析，理解業務結構以及特點，從需求出發，拆解頁面表達結構和所需組件的特點。

設計方向

通過前期的分析，明確了針對營銷大促類組件庫的設計方向：

• 靈活性：營銷項目因策略不同存在較大的多變性，因此組件需支持可靈活改寫，以應對多樣化的需求
• 復用性：適用于不同項目間，即要求具有較好的通用性

2. 設計方法探索

拆分重組的組件化思維，解決模板靈活性和一致性的訴求

在設計方法上，我以 2013 年 Brad Forst 提出的原子設計方法論作為指導。方法的本質其實就是將頁面拆解為最小元素（原子），然后原子可以演變成分子，分子通過多維度的組合形式成為組織，再到模板，最終生成頁面（原理如下圖）。

營銷需求的多變性體現在分子的組合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此統一最小元素，定義其組合的規則，即可從源頭把控設計的一致性。同時通過特定的組合原則，設計師結合各項目需求根據組合和應用原則（布局、文字等）進行設計，從而實現其靈活性。

原子設計理論延展閱讀：

3. 設計實施

明確了設計方向和設計方法后，結合營銷項目自身的特點，開始了組件庫的設計實施，整體流程如下：

梳理組件庫

將近幾期具有典型代表的頁面收集整理分析，主要是為了以下 2 個方面的內容

• 確定組件庫內容，以及組成結構
• 發現組件應用特點，為下一步原子和核心組合原則提供指引

ps：組件庫強調的是通用和復用，因此無需把所有模塊都納入整理清單，做「合適」的，而不是大而全但可能臃腫的組件庫。關于這個組件庫的體量應該如何選擇，可以看下文末的參考文獻。

設計環節

梳理完組件庫，按照原子設計方法論組件嵌套的形式進行組件設計。在 Brad 的概念里，是將系統分為了 5 個層級，但針對營銷業務的多變性，要滿足復用性和靈活性，越往上的層級復用性越差，因此在現階段，采用了 3 個層級「原子-分子-組織」構成營銷組件庫。

「全局考慮」在設計的整個過程中，需考慮每個組件后續的使用場景以及設計師的使用方法，利用 sketch 功能（symbol 嵌套、豐富的配置項、響應式設計等），可以設計出一個高通用性的組件（如下圖），以此達到增強每個組件的復用性，以及精簡組件庫的目的。（因文章篇幅受限，詳細內容可見文末參考文獻）

下面為每一個層級的詳細設計：

第一層：「原子」是最基本和最小顆粒度的單位，工作中常以「元素」命名，例如：顏色、文字、圖標、分割線等

布局：系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。

「網格系統」通過前期的研究，網格系統采用的是目前最常用的「8點網格」，能更好地適配不同屏幕尺寸，2 倍的變化均能更好地保持偶數，不出現小數點的情況。

「設計原則」遵循格式塔理論：建立良好的信息層級，能讓用戶快速獲取和理解有用、感興趣的信息，并產生下一步行為。

顏色體系：「色值標準」為保證文本可識別性，結合Web內容無障礙指南（WCAG）2.0標準，做了以下定義：

顏色對比度檢測工具：https://contrast-finder.tanaguru.com/

• 重點文本：文本的視覺呈現以及文本圖像至少要有 4.5:1 的對比度（AA級），大文本: 大號文本以及大文本圖像至少有 3:1 的對比度;
• 未激活控件：如 tab，文字顏色一般對比度 ＞ 3：1；
• 不可用狀態、占位符：淺色背景上對比度大概是 1.8~2.3（盡量 2 以上），深色背景對比度大致是 2.5~3（盡量 3）；

「衍生色設定規則」規律性設定衍生色，更好地打造頁面信息層級

根據以上規則設定顏色體系

文字體系：項目中字體根據實現類型分為系統字體以及圖片字體

「系統字體」為了較好的用戶瀏覽體驗，設計中優先采用開發直接寫的系統實現的字體類型，不會因適配而產生文字不清晰或做圖時不同系統渲染效果不同導致的不統一。

「圖片字體」考慮到版權，以及字體在不同系統下渲染差異化的原因，選擇了免費商用的思源黑體。

基礎原子：「靈活性設置」充分考慮應用場景，利用 sketch 功能提高其包容性和靈活性。

第二層：「分子」原子排列組合構成了分子，工作中多以「模板」命名，例如：品牌模板、單品模板等

「局部到整體，整體到局部」原子和分子，其實是一個系統中，相互依賴的元素。因此在分子的設計過程中，會遇到原子包容性不足的情況，因此實際設計中，是不斷在原子分子之間切換設計，不斷完善各自的設計。

第三層：「組織」原子、分子排列組合構成了組織，工作中多以「模塊」命名，例如：商品列表、內容卡片、入口模塊、瀑布流圖等

「保持克制，寧缺毋濫」該層面設計時，「局部影響整體，整體影響局部」的關系體現得更為明顯，會在原子/分子/組織三個層面不斷切換，進一步完善各個層面的設計。但過程中需保持克制，所有的設計應是圍繞「復用性」和「靈活性」進行設計的，而非組合方式越多越好，多即意味著一致性在一定程度會受到影響。因此，應是從過往項目中，預測未來可能出現的情況，窮舉后提取通用的組合規則后進行設計。

過程中多嘗試不同方案設計，結合實際項目測試，擇取最優方案。

整理設計文件，輸出設計規范文檔和使用說明。除了整理設計文件，梳理設計規范外，組件庫相當于一個產品，需要有一份使用說明，為用戶提供基礎學習，提升團隊成員的使用效率。

4. 迭代設計和維護

一個優秀的組件庫絕不是 30 天速成班就結束的項目，而是一款產品，需有專人長期的跟進和維護，例：優化組件包容性；補充組織的種類等，從而逐步建立起適用于團隊的組件庫。

總結

1. 打造組件庫的幾個關鍵步驟

• 第一步：前期分析研究，為打造「專屬」組件庫提供方向和目標；同時明確設計方法，規劃設計內容；
• 第二步：明確方向和方法，進入設計實施過程，通過梳理組件庫階段、設計階段、測試階段、整理輸出階段打造基礎組件庫；
• 第三步：后期迭代和維護，逐步形成專屬組件庫。

2. 項目成果

組件庫在 19 年雙 11 項目中的應用，統一性顯著提升，對比往年節省 76 人/天，平均效率提升 30%，其中主會場提升了 50%。

3. 項目反思

• 「基礎完善」目前的組件庫仍存在不少基礎設計問題，組件包容性，色彩應用不足等，因此，需結合 11.11 活動使用情況，整合模板，進一步完善組件庫；
• 「進階發展」組件庫目前僅在視覺形成閉環，后續將接入夸克平臺，聯動團隊的交互和開發組共建組件庫，構建設計研發一體化，從項目全流程提升效率，全面解放生產力；
• 「未來發展」聯合數據平臺，結合數據不斷優化組件庫，為后續精細化運營奠定基礎，賦能業務。同時將研究成果分享給事業部，將設計價值最大化。

4. 設計小感悟：

• 組件庫的設計要求的不僅僅是視覺表現上的設計，更重要的是對組件庫涉及到的不同項目、不同角色全鏈路的考慮，不僅有助于全局思維能力的鍛煉，同時也有助于專注細節的思考，提高自身專業影響力和核心競爭力，從而完成設計新時代的進階之路。
• 適合才是最重要的，對于他人產出的理論和經驗，需辯證地看待和吸收，在前期做好需求分析，明確需求目標，對癥下藥才能解決問題。

• 工欲善其事,必先利其器，充分了解軟件所具備的功能，能讓你的設計效率提升不是 1 倍 2 倍的事情。
• 文章來源：優設