17年開始進行視覺組件庫的搭建，也出過一個B/G端設計分析方法的文章總結，里面從大的方面介紹了組件。后來看到很多關于組件庫的文章，但是大都是從“分子原則”等很寬泛的方法來講，很少去細講實際搭建過程中會遇到的問題，甚至有些方法深究或者實際做下去是有問題。這里會全面的寫下sketch搭建組件庫（或者說是視覺規范）的邏輯，以及容易混淆思路的點。

      

    為了讓大家容易看完，先簡短說下制作組件庫的目的，再分三點講搭建方法。

    一 為什么制作組件庫

 

    Q1：很多人認為table、tabs等通用組件不需要再搭建，很多大廠已經出來規范，可以復用，為什么還要單獨制作自己的

    A1：這些通用組件都是由基礎的樣式粒子：填充色值、描邊大小與色值、圓角大小、文字大小與色值等組成，就拿form表單來講，不同的描邊、行高、圓角、文字樣式營造的感覺也完全不同。

    Q2：搭建后能發揮什么作用呢

    A2：統一性：避免多人多風格的現象，保證所有產品都呈現一致的設計語言，新成員加入，也可快速接手工作； 性：改一個組件，可以使用該組件的全部設計圖更改；在現有組件庫的基礎上，也可通過修改，生成不同項目的組件庫。

 

    Q3：搭建后如何確保大家都能正確使用？

    A3：需要大家了解自身項目組件庫的搭建邏輯，統一講解遠程組件庫使用方法，并有專人定期維護更新遠程組件庫。

    二 組件庫具體搭建方法

 

    分三方面說明：（一）、內容架構；（二）、注意點；（三）、遠程協作。

 

    （一）內容架構

    內容架構要考慮的是兩方面：一個是文檔的邏輯，二是組件的邏輯。三哪些制成組件，哪些制作成樣式。

 

 

 

    文檔的邏輯

 

 

    如上：點擊創建組件按鈕后，所有的組件都會出現在“圖層/組件”界面，默認的排序方式是軟件自定的，不好分類和查看，除非每次創建后再進行挪動。第二個“組件》”這個位置是不能直接切換看到組件的，只能在左側看到所有的組件名稱。再加上制作之前，也需要繪制出內容，所以我們需要在圖層處建立界面，繪制我們的內容。樣式也是如此，只能在“組件》”看到所有的樣式名稱。

所以我們整理出：“樣式”page——所有需要創建樣式的內容在此處整理分類繪制；“components組件”page——所有組件在此處分類繪制，再進行創建；“layout 布局”page——說明系統的布局和響應方案；“examples場景模塊”典型場景模塊，“更新日志”page——標明每次變動，當然sketch是自動導出“組件”page。另外根據系統特性，比如數據統計類界面多的情況，可以增加“data visualization數據分析”page

 

    組件的邏輯

 

    很多組件庫向左圖一那樣，直接把所有組件擺了出來，非常凌亂不便使用。再對比element和antdesign，后者的分類整合地更干凈整齊，涵蓋的全面，整合后的大類別少，分類相對清晰，可以借鑒，后續有自己系統常用模塊需要制作成組件，可以單獨增加一個分類模塊。當然也可以按著自己的邏輯重新整理。

 

    哪些制成組件，哪些制作成樣式

 

    先說樣式吧：1 文字（也有些會選擇直接做成組件，但我一般會制成樣式，感覺更輕量化些）；2顏色——背景色、線條色（分割線、描邊）、主色調、圖標配色、功能色；3 容器（需制作全不同狀態的容器，內容卡片、輸入框、標簽等都會用到）；4投影。指的注意的是，這里的樣式基本涵蓋了所有的基礎樣式，后續大部分的基礎樣式都要盡量在在此處引用。

 

    哪些制成組件：本質上講就是兩大類，1是icon；2是其它無法用簡單樣式的常出現內容（也就是上面按“組件邏輯”整理出來的內容”

    何時需要制成復合組件：1需要通過很多基礎樣式切換才能改變狀態時候。而且通過多個樣式切換不同狀態，麻煩的地方在于覆蓋層的優先級比較高，即使切換成了同類其他組件，也還是被覆蓋，必須更新

如下：

 

    我們可以在創建symbol后，在右側取消內部相應的樣式覆蓋，然后建立所需的多個狀態的平行組件，通過直接切換不同組件來切換狀態。

 

    2如果該組件有上一級組件，并且要用到該組件的不同狀態，就要把該組件的不同狀態改為組件，不然一層一層改很麻煩。

 

    （二）、注意點

 

    制作組件的過程中雖然按著大的架構走，還是很容易混亂或者卡住。以下注意點，可以幫助我們理清關系。這部分其實也是我重點想說明的內容。

    命名

 

 

    1無論是組件還是樣式的名稱，最后一級相平行的，最好是可以相互切換的狀態。這樣就可以在右側屬性中直接切換。

    2 組件只能切組件，樣式只能切樣式。—— 也就是說定好一個基本元素是樣式，那么與它平行的切換內容也需要是樣式。

    3 如何修改已制好的組件或樣式名稱

 

    截圖1（圖層》組件page）和2處，選中進入后，均可找到對應的修改。修改后其他頁面已放置好的組件名不被修改，反過來，在圖層處其他位置修改，亦不能修改好組件的命名。

    4 sketch里默認的分組是通過命名時的“/”，要修改組件或樣式加載時的分組，需在切換到此處，進行拖拽。修改后，組件的名稱也會被修改。

 

 

    5 要將一個元素的組件命名到一處去，理清楚如上的關系。如果遇到無法用到的基本元素搭建，需要新的元素，可放到該組的element里（如上圖）

 

    樣式或組件的修改

 

 

    樣式變化后，更新按鈕變為可點擊，點擊此處可以更改樣式，重設樣式可以還原

    組件編輯覆蓋層后在右側更新，如果想修改組件，通過編輯母版

 

    響應

 

    要考慮好響應方式，每個組件在此處做好設定

 

    （三）、遠程協作

 

    遠程原因

 

    如上，只要復制過來的新內容中有組件，就會再下面自己建立出組件，很不方便組件管理，團隊人多時，容易使組件發生變化，用遠程組件能夠做到完全統一。

 

    遠程方案

    1 藍湖

 

    無論樣式還是組件添加后，還得自己分組重新整理，組件使用方法，在“藍湖設計規范云”中找到相應的，自己拖過去用，很麻煩。

 

    2 語雀

    可以通過語雀的sketch插件上傳或者下載，加載后便是類似遠程組件的使用方法。

 

    3 sketch clould
|

 

    單獨通過線下傳library文件加載使用，比較不容易統一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帳戶云能力創建的 Sketch的云端設計庫，使用前需要對其進行設置。使用時，打開 Sketch 左上角第一個菜單的 Preference，選擇 Libraries 卡片，將本地 iCloud Drive 中的規范文件拖拽進這個區域，然后關閉該窗口。

 

    綜上所述，我們常選sketch cloud或者 語雀的kitchen插件來進行遠程使用。另外會線下發送整個文件，方便整體復用一些組件和example里的頁面。

    

    以上是我目前關于視覺組件庫制作的一些經驗和個人看法，歡迎留言交流～

轉自：站酷

作者： younglion0610 

藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務