17年開始進(jìn)行視覺組件庫的搭建，也出過一個(gè)B/G端設(shè)計(jì)分析方法的文章總結(jié)，里面從大的方面介紹了組件。后來看到很多關(guān)于組件庫的文章，但是大都是從“分子原則”等很寬泛的方法來講，很少去細(xì)講實(shí)際搭建過程中會(huì)遇到的問題，甚至有些方法深究或者實(shí)際做下去是有問題。這里會(huì)全面的寫下sketch搭建組件庫（或者說是視覺規(guī)范）的邏輯，以及容易混淆思路的點(diǎn)。
為了讓大家容易看完，先簡(jiǎn)短說下制作組件庫的目的，再分三點(diǎn)講搭建方法。
一 為什么制作組件庫
Q1：很多人認(rèn)為table、tabs等通用組件不需要再搭建，很多大廠已經(jīng)出來規(guī)范，可以復(fù)用，為什么還要單獨(dú)制作自己的
A1：這些通用組件都是由基礎(chǔ)的樣式粒子：填充色值、描邊大小與色值、圓角大小、文字大小與色值等組成，就拿form表單來講，不同的描邊、行高、圓角、文字樣式營造的感覺也完全不同。
Q2：搭建后能發(fā)揮什么作用呢
A2：統(tǒng)一性：避免多人多風(fēng)格的現(xiàn)象，保證所有產(chǎn)品都呈現(xiàn)一致的設(shè)計(jì)語言，新成員加入，也可快速接手工作； 性：改一個(gè)組件，可以使用該組件的全部設(shè)計(jì)圖更改；在現(xiàn)有組件庫的基礎(chǔ)上，也可通過修改，生成不同項(xiàng)目的組件庫。
Q3：搭建后如何確保大家都能正確使用？
A3：需要大家了解自身項(xiàng)目組件庫的搭建邏輯，統(tǒng)一講解遠(yuǎn)程組件庫使用方法，并有專人定期維護(hù)更新遠(yuǎn)程組件庫。
二 組件庫具體搭建方法
分三方面說明：（一）、內(nèi)容架構(gòu)；（二）、注意點(diǎn)；（三）、遠(yuǎn)程協(xié)作。
（一）內(nèi)容架構(gòu)
內(nèi)容架構(gòu)要考慮的是兩方面：一個(gè)是文檔的邏輯，二是組件的邏輯。三哪些制成組件，哪些制作成樣式。
文檔的邏輯
如上：點(diǎn)擊創(chuàng)建組件按鈕后，所有的組件都會(huì)出現(xiàn)在“圖層/組件”界面，默認(rèn)的排序方式是軟件自定的，不好分類和查看，除非每次創(chuàng)建后再進(jìn)行挪動(dòng)。第二個(gè)“組件》
”這個(gè)位置是不能直接切換看到組件的，只能在左側(cè)看到所有的組件名稱。再加上制作之前，也需要繪制出內(nèi)容，所以我們需要在圖層處建立界面，繪制我們的內(nèi)容。樣式也是如此，只能在“組件》
”看到所有的樣式名稱。
所以我們整理出：“樣式”page——所有需要?jiǎng)?chuàng)建樣式的內(nèi)容在此處整理分類繪制；“components組件”page——所有組件在此處分類繪制，再進(jìn)行創(chuàng)建；“l(fā)ayout 布局”page——說明系統(tǒng)的布局和響應(yīng)方案；“examples場(chǎng)景模塊”典型場(chǎng)景模塊，“更新日志”page——標(biāo)明每次變動(dòng)，當(dāng)然sketch是自動(dòng)導(dǎo)出“組件”page。另外根據(jù)系統(tǒng)特性，比如數(shù)據(jù)統(tǒng)計(jì)類界面多的情況，可以增加“data visualization數(shù)據(jù)分析”page
組件的邏輯
很多組件庫向左圖一那樣，直接把所有組件擺了出來，非常凌亂不便使用。再對(duì)比element和antdesign，后者的分類整合地更干凈整齊，涵蓋的全面，整合后的大類別少，分類相對(duì)清晰，可以借鑒，后續(xù)有自己系統(tǒng)常用模塊需要制作成組件，可以單獨(dú)增加一個(gè)分類模塊。當(dāng)然也可以按著自己的邏輯重新整理。
哪些制成組件，哪些制作成樣式
先說樣式吧：1 文字（也有些會(huì)選擇直接做成組件，但我一般會(huì)制成樣式，感覺更輕量化些）；2顏色——背景色、線條色（分割線、描邊）、主色調(diào)、圖標(biāo)配色、功能色；3 容器（需制作全不同狀態(tài)的容器，內(nèi)容卡片、輸入框、標(biāo)簽等都會(huì)用到）；4投影。指的注意的是，這里的樣式基本涵蓋了所有的基礎(chǔ)樣式，后續(xù)大部分的基礎(chǔ)樣式都要盡量在在此處引用。
哪些制成組件：本質(zhì)上講就是兩大類，1是icon；2是其它無法用簡(jiǎn)單樣式的常出現(xiàn)內(nèi)容（也就是上面按“組件邏輯”整理出來的內(nèi)容”
何時(shí)需要制成復(fù)合組件：1需要通過很多基礎(chǔ)樣式切換才能改變狀態(tài)時(shí)候。而且通過多個(gè)樣式切換不同狀態(tài)，麻煩的地方在于覆蓋層的優(yōu)先級(jí)比較高，即使切換成了同類其他組件，也還是被覆蓋，必須更新
如下：
我們可以在創(chuàng)建symbol后，在右側(cè)取消內(nèi)部相應(yīng)的樣式覆蓋，然后建立所需的多個(gè)狀態(tài)的平行組件，通過直接切換不同組件來切換狀態(tài)。
2如果該組件有上一級(jí)組件，并且要用到該組件的不同狀態(tài)，就要把該組件的不同狀態(tài)改為組件，不然一層一層改很麻煩。
（二）、注意點(diǎn)
制作組件的過程中雖然按著大的架構(gòu)走，還是很容易混亂或者卡住。以下注意點(diǎn)，可以幫助我們理清關(guān)系。這部分其實(shí)也是我重點(diǎn)想說明的內(nèi)容。
命名
1無論是組件還是樣式的名稱，最后一級(jí)相平行的，最好是可以相互切換的狀態(tài)。這樣就可以在右側(cè)屬性中直接切換。
2 組件只能切組件，樣式只能切樣式?！?也就是說定好一個(gè)基本元素是樣式，那么與它平行的切換內(nèi)容也需要是樣式。
3 如何修改已制好的組件或樣式名稱
截圖1（圖層》組件page）和2處，選中進(jìn)入后，均可找到對(duì)應(yīng)的修改。修改后其他頁面已放置好的組件名不被修改，反過來，在圖層處其他位置修改，亦不能修改好組件的命名。
4 sketch里默認(rèn)的分組是通過命名時(shí)的“/”，要修改組件或樣式加載時(shí)的分組，需在切換到此處，進(jìn)行拖拽。修改后，組件的名稱也會(huì)被修改。
5 要將一個(gè)元素的組件命名到一處去，理清楚如上的關(guān)系。如果遇到無法用到的基本元素搭建，需要新的元素，可放到該組的element里（如上圖）
樣式或組件的修改
樣式變化后，更新按鈕變?yōu)榭牲c(diǎn)擊，點(diǎn)擊此處可以更改樣式，重設(shè)樣式可以還原
組件編輯覆蓋層后在右側(cè)更新，如果想修改組件，通過編輯母版
響應(yīng)
要考慮好響應(yīng)方式，每個(gè)組件在此處做好設(shè)定
（三）、遠(yuǎn)程協(xié)作
遠(yuǎn)程原因
如上，只要復(fù)制過來的新內(nèi)容中有組件，就會(huì)再下面自己建立出組件，很不方便組件管理，團(tuán)隊(duì)人多時(shí)，容易使組件發(fā)生變化，用遠(yuǎn)程組件能夠做到完全統(tǒng)一。
遠(yuǎn)程方案
1 藍(lán)湖
無論樣式還是組件添加后，還得自己分組重新整理，組件使用方法，在“藍(lán)湖設(shè)計(jì)規(guī)范云”中找到相應(yīng)的，自己拖過去用，很麻煩。
2 語雀
可以通過語雀的sketch插件上傳或者下載，加載后便是類似遠(yuǎn)程組件的使用方法。
3 sketch clould
|
單獨(dú)通過線下傳library文件加載使用，比較不容易統(tǒng)一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帳戶云能力創(chuàng)建的 Sketch的云端設(shè)計(jì)庫，使用前需要對(duì)其進(jìn)行設(shè)置。使用時(shí)，打開 Sketch 左上角第一個(gè)菜單的 Preference，選擇 Libraries 卡片，將本地 iCloud Drive 中的規(guī)范文件拖拽進(jìn)這個(gè)區(qū)域，然后關(guān)閉該窗口。
綜上所述，我們常選sketch cloud或者 語雀的kitchen插件來進(jìn)行遠(yuǎn)程使用。另外會(huì)線下發(fā)送整個(gè)文件，方便整體復(fù)用一些組件和example里的頁面。
文章來源：站酷 作者：youngLion0610
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)