編者按：組件庫(kù)該如何構(gòu)建？本文總結(jié)了組件庫(kù)的設(shè)定，需要用到的工具和同步方法，幫大家快速上手組件庫(kù)設(shè)計(jì)。

隨著公司業(yè)務(wù)的不斷增長(zhǎng)，組件化除了為業(yè)務(wù)帶來(lái)一致的設(shè)計(jì)語(yǔ)言和工作效率提升外，也為設(shè)計(jì)團(tuán)隊(duì)的產(chǎn)出和協(xié)作方式帶來(lái)了影響和變化。Gtech UED 團(tuán)隊(duì)在進(jìn)行需求設(shè)計(jì)的同時(shí)，也逐步沉淀出一套適用于多平臺(tái)、多業(yè)務(wù)的組件庫(kù)，以此來(lái)提升設(shè)計(jì)和協(xié)同效率，并最終實(shí)現(xiàn)專業(yè)價(jià)值和商業(yè)價(jià)值的平衡。本系列文章中，我會(huì)分享自己在整理與維護(hù) Gtech UI Kit（Mob）過(guò)程中一些思考與方法。今天我們先聊聊如何邁出組件庫(kù)設(shè)計(jì)的「第一步」。

一、關(guān)于組件庫(kù)

1. 組件的本質(zhì)是一種規(guī)則

從某種程度上講，設(shè)計(jì)體系 (Design System) 便是這樣一種「規(guī)則」 – 諸如配色、文本、組件等一系列設(shè)計(jì)要素共同構(gòu)成了標(biāo)準(zhǔn)化的體系，為設(shè)計(jì)師提供決策指引。而組件庫(kù)作為設(shè)計(jì)體系的一部分，通過(guò)對(duì)典型樣式的歸納和常用組件的封裝，幫助設(shè)計(jì)師快速實(shí)現(xiàn)中/高保真原型的設(shè)計(jì)。

遵循這樣的「規(guī)則」，除了能讓設(shè)計(jì)流程得到有效加速，設(shè)計(jì)模式的復(fù)用性與一致性也將得到提升，使產(chǎn)品設(shè)計(jì)方案整體更具擴(kuò)展性，更易于維護(hù)。

2. 持續(xù)維護(hù)的意義

組件庫(kù)項(xiàng)目實(shí)際上并不是埋頭苦干一個(gè)周期之后交付的產(chǎn)品，而是通過(guò)長(zhǎng)時(shí)間的業(yè)務(wù)需求迭代后，持續(xù)沉淀的一個(gè)產(chǎn)物。就像跑馬拉松，從起點(diǎn)邁出第一步很簡(jiǎn)單，困難的是持之以恒地跑下去，并最終抵達(dá)終點(diǎn)。通常業(yè)務(wù)迭代和組件維護(hù)的 Timeline 并不會(huì)交錯(cuò)，每一個(gè)業(yè)務(wù)迭代周期都會(huì)調(diào)用當(dāng)下版本的組件庫(kù)作為基礎(chǔ)模板；同樣，每結(jié)束一個(gè)迭代周期，也會(huì)將期間復(fù)用性較高組件或樣式定義更新到庫(kù)中。久而久之對(duì)于日常工作項(xiàng)目當(dāng)中的諸多需求，便可以通過(guò)輕松拖拽或少量改動(dòng)快速搭建頁(yè)面。

要實(shí)現(xiàn)快速搭建頁(yè)面，組件庫(kù)本身需要滿足「合理性」，包括合理的結(jié)構(gòu)、命名等等，而這些都需要在整理和維護(hù)的過(guò)程中不斷思考和糾正。在實(shí)際的過(guò)程中，往往會(huì)在某一組件整理到中期時(shí)，才發(fā)覺似乎以另一種結(jié)構(gòu)進(jìn)行封裝更合理，那么之前的成果可能都需要推翻或者修改；同時(shí)，組件庫(kù)還應(yīng)滿足可復(fù)用、易用的要求，以滿足日常業(yè)務(wù)的需要。設(shè)計(jì)師除了要學(xué)習(xí)通過(guò)使用組件來(lái)提高工作效率，更需要嘗試了解封裝、命名甚至維護(hù)的方式和流程，這樣才能對(duì)組件的使用更加得心應(yīng)手。

二、必要設(shè)定

1. 基礎(chǔ)樣式

組件庫(kù)是由組件所構(gòu)成。而樣式則是組件設(shè)計(jì)的基礎(chǔ)，通過(guò)層級(jí)自下而上逐級(jí)的搭建。制作組件、模板、頁(yè)面的過(guò)程中首當(dāng)其沖便是全面、精細(xì)的對(duì)基礎(chǔ)樣式進(jìn)行定義和維護(hù)，包括顏色、容器、字體、圖層等…

以“字體”為例，文字是構(gòu)成界面信息與內(nèi)容的基礎(chǔ)元素之一，無(wú)論是在高保真設(shè)計(jì)階段，或者對(duì)于交互設(shè)計(jì)師在制作的線稿、低保真原型階段。通過(guò)不同的色彩、字號(hào)、字重等參數(shù)來(lái)構(gòu)建界面整體與局部的信息展示，確保界面內(nèi)容的層次和呼吸感，幫助用戶更好的獲取界面信息。

針對(duì)系統(tǒng)級(jí)產(chǎn)品的通用場(chǎng)景，Gtech UI Kit (Mob) 針對(duì)單一文本提供了 360 種通用樣式，其中樣式的命名規(guī)則是基于文字的顯性屬性決定的，即「字體重量/字號(hào)/對(duì)齊方式/顏色」，譬如「Regular/14/1_Left/Grey 6」，所代表的就是常規(guī)字重、14 號(hào)、左對(duì)齊、顏色定義為「Grey6」的文字。

當(dāng)然，所有這些文字樣式中，可能高頻使用的并不多，但我們還是更希望在前期花費(fèi)足夠多的時(shí)間成本去定義一套統(tǒng)一的、足以應(yīng)對(duì)絕大多數(shù)使用場(chǎng)景的樣式表，增加后期維護(hù)組件庫(kù)的容錯(cuò)，滿足組件庫(kù)的易用性。

2. 組件結(jié)構(gòu)

「結(jié)構(gòu)清晰」作為組件定義的要求，也是考量組件庫(kù)易用性的因素之一。如果組件庫(kù)的最終目標(biāo)是對(duì)外開源，那么在最初的整理和之后的維護(hù)中需要考慮的問題之一就是「普適性」,即探索一種對(duì)大多數(shù)團(tuán)隊(duì)、個(gè)人都能很好的適應(yīng)和理解且便于索引和調(diào)用的組件歸類方式。經(jīng)過(guò)調(diào)研和內(nèi)部討論我們最終選擇基于使用場(chǎng)景出發(fā)，將組件庫(kù)劃分為 6 個(gè)模塊，并將每種典型組件分頁(yè)進(jìn)行展示，具體展示結(jié)構(gòu)如下：

當(dāng)然，基于組件屬性的分類也是一種常見的組織結(jié)構(gòu)，Apple iOS UI 或 Google Material Design 等系統(tǒng)級(jí)組件都是按照組件屬性來(lái)劃分，一切都是為了更方便的索引和調(diào)用。在設(shè)計(jì)上，只要能達(dá)到目的，通往目標(biāo)的方法只要選擇最合適的即可。

3. 命名規(guī)則

關(guān)于命名方式與規(guī)則，同樣是整理和維護(hù)組件庫(kù)過(guò)程中重要的環(huán)節(jié)之一。無(wú)論對(duì)于顏色、圖層、文本樣式的定義，還是組件、圖標(biāo)、典型界面的整理與組織，統(tǒng)一、通用、靈活的命名規(guī)則都是貫穿始終的基線。

正如前文提到的，組件會(huì)基于使用場(chǎng)景進(jìn)行劃分，其中每一類包含若干組件，譬如「展示」場(chǎng)景當(dāng)中的單元格、標(biāo)簽、徽標(biāo)等，而每一個(gè)組件又是由若干狀態(tài)、參數(shù)等所構(gòu)成。

層次分明的結(jié)構(gòu)對(duì)于組件的命名有著一定的要求，一方面需要使維護(hù)過(guò)程更加井然有序、條理清晰，一方面要確保最終產(chǎn)出的組件便于索引和調(diào)用。通常為了體現(xiàn)結(jié)構(gòu)層次，我們?cè)诮M件命名當(dāng)中使用「/」符號(hào)來(lái)分隔類別場(chǎng)景、組件、狀態(tài)或其它參數(shù)等 (Sketch 可以自動(dòng)識(shí)別「/」符號(hào)，并以此作為類別分隔標(biāo)志來(lái)逐層組織，最終形成完整的目錄結(jié)構(gòu)) ，譬如下圖「展示 / 標(biāo)簽 / 圓形標(biāo)簽 / 小標(biāo)簽」等等。只要使用者在調(diào)用時(shí)知道自己需要怎樣的組件，便能很輕松的逐層索引。

與組件結(jié)構(gòu)一樣，關(guān)于命名并沒有一套所謂「最正確」的規(guī)則。最正確的規(guī)則就在團(tuán)隊(duì)進(jìn)行充分討論且符合大多數(shù)人的使用習(xí)慣并最終達(dá)成共識(shí)。

三、工具與同步

1. 插件推薦

「工欲善其事，必先利其器」隨著工作內(nèi)容的不斷豐富，很多操作靠設(shè)計(jì)師手動(dòng)實(shí)現(xiàn)往往難度較大，且較為繁瑣；在 Sketch 的社區(qū)內(nèi)不僅有眾多的設(shè)計(jì)師，而且也還有活躍的開發(fā)者社群。開發(fā)者們提供了許多優(yōu)秀的插件，從不同的角度完善了 Sketch 的功能，提高了設(shè)計(jì)師的工作效率。在進(jìn)行組件的整理和維護(hù)時(shí)，我通常使用以下兩個(gè)插件：

Find and Replace Text 用于對(duì)選中的圖層、畫板、頁(yè)面設(shè)置整個(gè) Sketch 文件內(nèi)的文本內(nèi)容進(jìn)行查找并批量替換-無(wú)論是圖層內(nèi)實(shí)際的文本內(nèi)容或者是圖層列表當(dāng)中的文本名稱均可；在嘗試命名規(guī)則的過(guò)程中，我們會(huì)通過(guò)這款插件批量修改基礎(chǔ)樣式定義中所呈現(xiàn)的文字風(fēng)格名稱。

Styles Generator 用于批量且自動(dòng)化定義文本、圖層樣式。在確定了命名規(guī)則，并完成了初始的樣式或字體屬性設(shè)置后，選中所有范例對(duì)象，執(zhí)行「Generate Shared Styles」，Sketch 便能根據(jù)你所選中的對(duì)象的圖層名稱來(lái)自動(dòng)生成對(duì)應(yīng)的 Styles，無(wú)需任何手動(dòng)命名的過(guò)程。

2. 協(xié)同方案

前面說(shuō)到，組件庫(kù)的整理和維護(hù)是一個(gè)隨著業(yè)務(wù)需求不斷迭代更新的工作，及時(shí)迭代優(yōu)化才能讓組件更好地滿足當(dāng)下項(xiàng)目的需要。在內(nèi)部，我們通過(guò)對(duì)存在的問題進(jìn)行思考并嘗試尋找一種最優(yōu)的方式，讓團(tuán)隊(duì)輕松地做到高效協(xié)同。

最終，我們決定將組件維護(hù)的工作流程「上云」，即在云端進(jìn)行設(shè)計(jì)協(xié)同工作；簡(jiǎn)單來(lái)說(shuō)，這種工作方式是將組件庫(kù) Sketch 文件放在云端，通過(guò)云帳號(hào)的能力使得大家可以同時(shí)共享并使用這份文件。文件內(nèi)會(huì)包含設(shè)計(jì)規(guī)范說(shuō)明、組件、典型頁(yè)面等。設(shè)計(jì)師在工作時(shí)可以直接調(diào)用這些內(nèi)容。具體操作如下:

1. 將組件庫(kù) Sketch 文件通過(guò) iCloud 云盤分享給團(tuán)隊(duì)設(shè)計(jì)師 (可以根據(jù)團(tuán)隊(duì)的需要來(lái)設(shè)置相應(yīng)的編輯、查看權(quán)限) ；
2. 被分享的小伙伴們的云盤內(nèi)出現(xiàn)該組件庫(kù)文件，可將其添加至 Sketch Library；
3. 即可以通過(guò) Symbol 在項(xiàng)目文件中引用組件；
4. 每當(dāng)團(tuán)隊(duì)內(nèi)對(duì)組件進(jìn)行更新時(shí)右上角會(huì)出現(xiàn)「Library Update」推送，選擇更新的組件即可。

四、不僅僅是設(shè)計(jì)師的事情

相信很多小伙伴也嘗試整理出一套標(biāo)準(zhǔn)的組件規(guī)范，希望以此提高設(shè)計(jì)效率和確保產(chǎn)出一致。但在實(shí)際工作中會(huì)面臨一些問題：除了自己或設(shè)計(jì)團(tuán)隊(duì)在使用組件外，似乎前端頁(yè)面并沒有達(dá)到組件化后的效果，不同的開發(fā)依然會(huì)對(duì)每個(gè)組件重新寫一遍代碼，沒有效率的同時(shí)視覺還原度也比較差。

出現(xiàn)這種情況主要的原因在于：在開發(fā)層面沒有實(shí)現(xiàn)代碼化，組件僅僅只是一張?jiān)O(shè)計(jì)稿，并不是真實(shí)可調(diào)用的「積木」。

所以維護(hù)組件絕不單單僅靠設(shè)計(jì)師，開發(fā)也應(yīng)作為主要參與者之一。需要二者通過(guò)多次的溝通、校對(duì)和持續(xù)開發(fā)維護(hù) (此處省略諸多協(xié)同的過(guò)程，事實(shí)上，團(tuán)隊(duì)排期的協(xié)調(diào)是一個(gè)十分重要的因素) 。而最終我們輸出的應(yīng)該是一套可視產(chǎn)物和其背后的實(shí)現(xiàn)代碼，能夠真正地在代碼層面實(shí)現(xiàn)拖拽組件搭建界面的目標(biāo)。

小結(jié)

在本篇文章里，我們主要聊了「關(guān)于如何進(jìn)行組件庫(kù)設(shè)計(jì)」的一些常見問題，例如整理維護(hù)組件庫(kù)的必要設(shè)定、插件和協(xié)同方案的推薦、以及組件代碼化等等，希望能夠?qū)Ω魑坏墓ぷ鲙?lái)一些思考和幫助。