17年開始進(jìn)行視覺(jué)組件庫(kù)的搭建，也出過(guò)一個(gè)B/G端設(shè)計(jì)分析方法的文章總結(jié)，里面從大的方面介紹了組件。后來(lái)看到很多關(guān)于組件庫(kù)的文章，但是大都是從“分子原則”等很寬泛的方法來(lái)講，很少去細(xì)講實(shí)際搭建過(guò)程中會(huì)遇到的問(wèn)題，甚至有些方法深究或者實(shí)際做下去是有問(wèn)題。這里會(huì)全面的寫下sketch搭建組件庫(kù)（或者說(shuō)是視覺(jué)規(guī)范）的邏輯，以及容易混淆思路的點(diǎn)。

      

    為了讓大家容易看完，先簡(jiǎn)短說(shuō)下制作組件庫(kù)的目的，再分三點(diǎn)講搭建方法。

    一 為什么制作組件庫(kù)

 

    Q1：很多人認(rèn)為table、tabs等通用組件不需要再搭建，很多大廠已經(jīng)出來(lái)規(guī)范，可以復(fù)用，為什么還要單獨(dú)制作自己的

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

    Q2：搭建后能發(fā)揮什么作用呢

    A2：統(tǒng)一性：避免多人多風(fēng)格的現(xiàn)象，保證所有產(chǎn)品都呈現(xiàn)一致的設(shè)計(jì)語(yǔ)言，新成員加入，也可快速接手工作； 性：改一個(gè)組件，可以使用該組件的全部設(shè)計(jì)圖更改；在現(xiàn)有組件庫(kù)的基礎(chǔ)上，也可通過(guò)修改，生成不同項(xiàng)目的組件庫(kù)。

 

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

    A3：需要大家了解自身項(xiàng)目組件庫(kù)的搭建邏輯，統(tǒng)一講解遠(yuǎn)程組件庫(kù)使用方法，并有專人定期維護(hù)更新遠(yuǎn)程組件庫(kù)。

    二 組件庫(kù)具體搭建方法

 

    分三方面說(shuō)明：（一）、內(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——說(shuō)明系統(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

 

    組件的邏輯

 

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

 

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

 

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

 

    哪些制成組件：本質(zhì)上講就是兩大類，1是icon；2是其它無(wú)法用簡(jiǎn)單樣式的常出現(xiàn)內(nèi)容（也就是上面按“組件邏輯”整理出來(lái)的內(nèi)容”

    何時(shí)需要制成復(fù)合組件：1需要通過(guò)很多基礎(chǔ)樣式切換才能改變狀態(tài)時(shí)候。而且通過(guò)多個(gè)樣式切換不同狀態(tài)，麻煩的地方在于覆蓋層的優(yōu)先級(jí)比較高，即使切換成了同類其他組件，也還是被覆蓋，必須更新

如下：

 

    我們可以在創(chuàng)建symbol后，在右側(cè)取消內(nèi)部相應(yīng)的樣式覆蓋，然后建立所需的多個(gè)狀態(tài)的平行組件，通過(guò)直接切換不同組件來(lái)切換狀態(tài)。

 

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

 

    （二）、注意點(diǎn)

 

    制作組件的過(guò)程中雖然按著大的架構(gòu)走，還是很容易混亂或者卡住。以下注意點(diǎn)，可以幫助我們理清關(guān)系。這部分其實(shí)也是我重點(diǎn)想說(shuō)明的內(nèi)容。

    命名

 

 

    1無(wú)論是組件還是樣式的名稱，最后一級(jí)相平行的，最好是可以相互切換的狀態(tài)。這樣就可以在右側(cè)屬性中直接切換。

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

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

 

    截圖1（圖層》組件page）和2處，選中進(jìn)入后，均可找到對(duì)應(yīng)的修改。修改后其他頁(yè)面已放置好的組件名不被修改，反過(guò)來(lái)，在圖層處其他位置修改，亦不能修改好組件的命名。

    4 sketch里默認(rèn)的分組是通過(guò)命名時(shí)的“/”，要修改組件或樣式加載時(shí)的分組，需在切換到此處，進(jìn)行拖拽。修改后，組件的名稱也會(huì)被修改。

 

 

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

 

    樣式或組件的修改

 

 

    樣式變化后，更新按鈕變?yōu)榭牲c(diǎn)擊，點(diǎn)擊此處可以更改樣式，重設(shè)樣式可以還原

    組件編輯覆蓋層后在右側(cè)更新，如果想修改組件，通過(guò)編輯母版

 

    響應(yīng)

 

    要考慮好響應(yīng)方式，每個(gè)組件在此處做好設(shè)定

 

    （三）、遠(yuǎn)程協(xié)作

 

    遠(yuǎn)程原因

 

    如上，只要復(fù)制過(guò)來(lái)的新內(nèi)容中有組件，就會(huì)再下面自己建立出組件，很不方便組件管理，團(tuán)隊(duì)人多時(shí)，容易使組件發(fā)生變化，用遠(yuǎn)程組件能夠做到完全統(tǒng)一。

 

    遠(yuǎn)程方案

    1 藍(lán)湖

 

    無(wú)論樣式還是組件添加后，還得自己分組重新整理，組件使用方法，在“藍(lán)湖設(shè)計(jì)規(guī)范云”中找到相應(yīng)的，自己拖過(guò)去用，很麻煩。

 

    2 語(yǔ)雀

    可以通過(guò)語(yǔ)雀的sketch插件上傳或者下載，加載后便是類似遠(yuǎn)程組件的使用方法。

 

    3 sketch clould
|

 

    單獨(dú)通過(guò)線下傳library文件加載使用，比較不容易統(tǒng)一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帳戶云能力創(chuàng)建的 Sketch的云端設(shè)計(jì)庫(kù)，使用前需要對(duì)其進(jìn)行設(shè)置。使用時(shí)，打開 Sketch 左上角第一個(gè)菜單的 Preference，選擇 Libraries 卡片，將本地 iCloud Drive 中的規(guī)范文件拖拽進(jìn)這個(gè)區(qū)域，然后關(guān)閉該窗口。

 

    綜上所述，我們常選sketch cloud或者 語(yǔ)雀的kitchen插件來(lái)進(jìn)行遠(yuǎn)程使用。另外會(huì)線下發(fā)送整個(gè)文件，方便整體復(fù)用一些組件和example里的頁(yè)面。

    

文章來(lái)源：站酷   作者：youngLion0610

藍(lán)藍(lán)設(shè)計(jì)( www.ywne.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)