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