對(duì)于以下場(chǎng)景，你是不是有那么一點(diǎn)點(diǎn)熟悉：

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

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

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

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

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

以上的對(duì)話，在大型且多人合作的項(xiàng)目中尤為常見。

隨著大促項(xiàng)目體量越來越大，參與人員越來越多，這些問題越發(fā)明顯，直接影響了活動(dòng)的視覺統(tǒng)一性和整體的工作效率。因此我們開展了營銷組件庫的設(shè)計(jì)。

什么是組件庫？

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

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

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

△ 頁面設(shè)計(jì)過程

組件庫的優(yōu)勢(shì)

1. 保證用戶體驗(yàn)的一致性

對(duì)于大促這種含有多個(gè)子項(xiàng)目，涉及到 30+ 的頁面同期輸出的復(fù)雜項(xiàng)目，每個(gè)獨(dú)立的子項(xiàng)目雖然在需求上有一定區(qū)別，但整體的用戶體驗(yàn)需要滿足基本的一致性，減少用戶認(rèn)知和負(fù)擔(dān)，提高用戶的使用效率。組件庫的建立，其統(tǒng)一的設(shè)計(jì)語言能保持設(shè)計(jì)結(jié)果的統(tǒng)一性，避免多人多風(fēng)格的現(xiàn)象。

2. 提升效率

• 設(shè)計(jì)成本：減少重復(fù)的機(jī)械式設(shè)計(jì)和反復(fù)糾結(jié)用 6px 還是 8px 的設(shè)計(jì)思考成本，從而有更多的時(shí)間參與到設(shè)計(jì)創(chuàng)新中去，發(fā)揮更高的設(shè)計(jì)價(jià)值；
• 協(xié)作成本：減少重復(fù)開發(fā)的工作，可準(zhǔn)確定位又方便后期的維護(hù)和修改。開發(fā)者也能通過組件進(jìn)行協(xié)作和同步，提率；
• 溝通成本：減少因認(rèn)知不一致而導(dǎo)致反復(fù)溝通和解釋的成本。

如何做適合自己團(tuán)隊(duì)的組件庫？

不同行業(yè)、不同產(chǎn)品、不同項(xiàng)目的組件庫因其業(yè)務(wù)特點(diǎn)不同，其差異會(huì)非常大。那怎樣的組件庫才能滿足「大促營銷類」的項(xiàng)目需求？

1. 前期研究，確定設(shè)計(jì)方向

分析研究

行業(yè)設(shè)計(jì)：行業(yè)優(yōu)秀的設(shè)計(jì)系統(tǒng)、組件庫搭建思維，以及其源文件，是最寶貴的學(xué)習(xí)資源。

主站設(shè)計(jì)：保證全站設(shè)計(jì)的一致性的同時(shí)，也是重要的學(xué)習(xí)參考；

過往問題：對(duì)過去項(xiàng)目的橫向和縱向?qū)Ρ群头治?，理解業(yè)務(wù)結(jié)構(gòu)以及特點(diǎn)，從需求出發(fā)，拆解頁面表達(dá)結(jié)構(gòu)和所需組件的特點(diǎn)。

設(shè)計(jì)方向

通過前期的分析，明確了針對(duì)營銷大促類組件庫的設(shè)計(jì)方向：

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

2. 設(shè)計(jì)方法探索

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

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

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

原子設(shè)計(jì)理論延展閱讀：

3. 設(shè)計(jì)實(shí)施

明確了設(shè)計(jì)方向和設(shè)計(jì)方法后，結(jié)合營銷項(xiàng)目自身的特點(diǎn)，開始了組件庫的設(shè)計(jì)實(shí)施，整體流程如下：

梳理組件庫

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

• 確定組件庫內(nèi)容，以及組成結(jié)構(gòu)
• 發(fā)現(xiàn)組件應(yīng)用特點(diǎn)，為下一步原子和核心組合原則提供指引

ps：組件庫強(qiáng)調(diào)的是通用和復(fù)用，因此無需把所有模塊都納入整理清單，做「合適」的，而不是大而全但可能臃腫的組件庫。關(guān)于這個(gè)組件庫的體量應(yīng)該如何選擇，可以看下文末的參考文獻(xiàn)。

設(shè)計(jì)環(huán)節(jié)

梳理完組件庫，按照原子設(shè)計(jì)方法論組件嵌套的形式進(jìn)行組件設(shè)計(jì)。在 Brad 的概念里，是將系統(tǒng)分為了 5 個(gè)層級(jí)，但針對(duì)營銷業(yè)務(wù)的多變性，要滿足復(fù)用性和靈活性，越往上的層級(jí)復(fù)用性越差，因此在現(xiàn)階段，采用了 3 個(gè)層級(jí)「原子-分子-組織」構(gòu)成營銷組件庫。

「全局考慮」在設(shè)計(jì)的整個(gè)過程中，需考慮每個(gè)組件后續(xù)的使用場(chǎng)景以及設(shè)計(jì)師的使用方法，利用 sketch 功能（symbol 嵌套、豐富的配置項(xiàng)、響應(yīng)式設(shè)計(jì)等），可以設(shè)計(jì)出一個(gè)高通用性的組件（如下圖），以此達(dá)到增強(qiáng)每個(gè)組件的復(fù)用性，以及精簡組件庫的目的。（因文章篇幅受限，詳細(xì)內(nèi)容可見文末參考文獻(xiàn)）

下面為每一個(gè)層級(jí)的詳細(xì)設(shè)計(jì)：

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

布局：系統(tǒng)布局規(guī)范，需要通過統(tǒng)一的設(shè)計(jì)元素和間距規(guī)范去引導(dǎo)使用者們使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。

「網(wǎng)格系統(tǒng)」通過前期的研究，網(wǎng)格系統(tǒng)采用的是目前最常用的「8點(diǎn)網(wǎng)格」，能更好地適配不同屏幕尺寸，2 倍的變化均能更好地保持偶數(shù)，不出現(xiàn)小數(shù)點(diǎn)的情況。

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

顏色體系：「色值標(biāo)準(zhǔn)」為保證文本可識(shí)別性，結(jié)合Web內(nèi)容無障礙指南（WCAG）2.0標(biāo)準(zhǔn)，做了以下定義：

顏色對(duì)比度檢測(cè)工具：https://contrast-finder.tanaguru.com/

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

「衍生色設(shè)定規(guī)則」規(guī)律性設(shè)定衍生色，更好地打造頁面信息層級(jí)

根據(jù)以上規(guī)則設(shè)定顏色體系

文字體系：項(xiàng)目中字體根據(jù)實(shí)現(xiàn)類型分為系統(tǒng)字體以及圖片字體

「系統(tǒng)字體」為了較好的用戶瀏覽體驗(yàn)，設(shè)計(jì)中優(yōu)先采用開發(fā)直接寫的系統(tǒng)實(shí)現(xiàn)的字體類型，不會(huì)因適配而產(chǎn)生文字不清晰或做圖時(shí)不同系統(tǒng)渲染效果不同導(dǎo)致的不統(tǒng)一。

「圖片字體」考慮到版權(quán)，以及字體在不同系統(tǒng)下渲染差異化的原因，選擇了免費(fèi)商用的思源黑體。

基礎(chǔ)原子：「靈活性設(shè)置」充分考慮應(yīng)用場(chǎng)景，利用 sketch 功能提高其包容性和靈活性。

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

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

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

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

過程中多嘗試不同方案設(shè)計(jì)，結(jié)合實(shí)際項(xiàng)目測(cè)試，擇取最優(yōu)方案。

整理設(shè)計(jì)文件，輸出設(shè)計(jì)規(guī)范文檔和使用說明。除了整理設(shè)計(jì)文件，梳理設(shè)計(jì)規(guī)范外，組件庫相當(dāng)于一個(gè)產(chǎn)品，需要有一份使用說明，為用戶提供基礎(chǔ)學(xué)習(xí)，提升團(tuán)隊(duì)成員的使用效率。

4. 迭代設(shè)計(jì)和維護(hù)

一個(gè)優(yōu)秀的組件庫絕不是 30 天速成班就結(jié)束的項(xiàng)目，而是一款產(chǎn)品，需有專人長期的跟進(jìn)和維護(hù)，例：優(yōu)化組件包容性；補(bǔ)充組織的種類等，從而逐步建立起適用于團(tuán)隊(duì)的組件庫。

總結(jié)

1. 打造組件庫的幾個(gè)關(guān)鍵步驟

• 第一步：前期分析研究，為打造「專屬」組件庫提供方向和目標(biāo)；同時(shí)明確設(shè)計(jì)方法，規(guī)劃設(shè)計(jì)內(nèi)容；
• 第二步：明確方向和方法，進(jìn)入設(shè)計(jì)實(shí)施過程，通過梳理組件庫階段、設(shè)計(jì)階段、測(cè)試階段、整理輸出階段打造基礎(chǔ)組件庫；
• 第三步：后期迭代和維護(hù)，逐步形成專屬組件庫。

2. 項(xiàng)目成果

組件庫在 19 年雙 11 項(xiàng)目中的應(yīng)用，統(tǒng)一性顯著提升，對(duì)比往年節(jié)省 76 人/天，平均效率提升 30%，其中主會(huì)場(chǎng)提升了 50%。

3. 項(xiàng)目反思

• 「基礎(chǔ)完善」目前的組件庫仍存在不少基礎(chǔ)設(shè)計(jì)問題，組件包容性，色彩應(yīng)用不足等，因此，需結(jié)合 11.11 活動(dòng)使用情況，整合模板，進(jìn)一步完善組件庫；
• 「進(jìn)階發(fā)展」組件庫目前僅在視覺形成閉環(huán)，后續(xù)將接入夸克平臺(tái)，聯(lián)動(dòng)團(tuán)隊(duì)的交互和開發(fā)組共建組件庫，構(gòu)建設(shè)計(jì)研發(fā)一體化，從項(xiàng)目全流程提升效率，全面解放生產(chǎn)力；
• 「未來發(fā)展」聯(lián)合數(shù)據(jù)平臺(tái)，結(jié)合數(shù)據(jù)不斷優(yōu)化組件庫，為后續(xù)精細(xì)化運(yùn)營奠定基礎(chǔ)，賦能業(yè)務(wù)。同時(shí)將研究成果分享給事業(yè)部，將設(shè)計(jì)價(jià)值最大化。

4. 設(shè)計(jì)小感悟：

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

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