作為一名合格的UI設(shè)計(jì)師，必須具備組件化設(shè)計(jì)思維。Sketch 47 后增加了 Llibraries 的功能,使用Sketch Libraries的好處有兩大點(diǎn)：

01 Libraries可供多人及多項(xiàng)目調(diào)用，設(shè)計(jì)師通過Libraries可快速了解規(guī)范及制作界面，協(xié)同辦公提高工作效率

02 規(guī)范設(shè)計(jì)流程，樹立組件化設(shè)計(jì)思維。

一，“2+1”了解Sketch Libraries必備基礎(chǔ)知識(shí)

「 2步實(shí)現(xiàn)Libraries 調(diào)用 」

Step 01：新建UI Libraries-01 > 創(chuàng)建symbol > 存儲(chǔ)

Step 02：將UI Libraries-01添加到新文件的資源庫中即可調(diào)用

是不是非常easy呢？?

「1張圖熟悉“原子設(shè)計(jì)理論”」

Brad Frost的《原子設(shè)計(jì)論》將原子設(shè)計(jì)拆分為5個(gè)不同的階段：原子 > 分子 > 有機(jī)體 > 模板 > 界面。

簡單理解就是我們?cè)跇?gòu)建組件庫的時(shí)候應(yīng)從顆粒度最小的元素出發(fā)，層層遞進(jìn)制作我們的界面。

在設(shè)計(jì)時(shí)，我們可以發(fā)現(xiàn)顏色、文字、icon這三大元素在界面中使用頻率最高，因此一般我們將其作為組件庫的原子元素。當(dāng)然因?yàn)轫?xiàng)目的特殊性，某些情況我們也會(huì)將背景的不同圓角樣式等其他控件樣式納入原子元素，設(shè)計(jì)師可根據(jù)實(shí)際情況自行調(diào)整。

然后由基礎(chǔ)元素構(gòu)建其他UI組件，比如toast、tooltip、input、btn、form等，最后通過組件樣式組合構(gòu)建我們的界面UI。

制作過UI設(shè)計(jì)規(guī)范小伙伴應(yīng)該不難理解這點(diǎn)，沒有接觸的小伙伴可以多看一些相關(guān)的設(shè)計(jì)系統(tǒng)奧?？梢詤⒖家恍﹥?yōu)秀的設(shè)計(jì)系統(tǒng)來構(gòu)建自己組件庫。

[Design Systems大匯總]??http://itlnk.cn/works/guidelines

二，原子元素構(gòu)建

原子元素的構(gòu)建是Sketch Libraries最基本的點(diǎn)，下面筆者以顏色、文字、icon這三大元素進(jìn)行實(shí)例講解。

「 創(chuàng)建顏色 / 文字樣式 」

(顏色樣式創(chuàng)建)

根據(jù)制作的規(guī)范來確定顏色及文字的樣式，將其統(tǒng)一命名并創(chuàng)建外觀樣式即可。

(文字樣式創(chuàng)建)

這里的命名我們遵循功能 -文件夾名稱-圖層名稱的規(guī)則。通過“/”來進(jìn)行分類，sketch會(huì)將其作為組的分隔符號(hào)。

例：color/grey/name

在設(shè)計(jì)過程中，先確認(rèn)界面主要用色，然后調(diào)整顏色的變量形成色板組成顏色體系。最后將顏色統(tǒng)一創(chuàng)建樣式便可實(shí)現(xiàn)快速調(diào)用。

(GitHub Primer /Color system)

「 創(chuàng)建icon 」

(創(chuàng)建icon的symbol)

將畫好的icon添加顏色，這里的顏色一定是需要調(diào)用我們前面創(chuàng)建的顏色樣式，后期調(diào)用icon時(shí)才可以實(shí)現(xiàn)顏色替換。

(調(diào)用并替換icon樣式)

當(dāng)我們?cè)诶L制icon時(shí)只需要?jiǎng)?chuàng)建一個(gè)基礎(chǔ)樣式的symbol，不需要把不同顏色的icon都添加為symbol。我們后期在繪制界面時(shí)可根據(jù)需求替換icon的顏色，這樣做可以減少文件內(nèi)存同時(shí)方便我們查找symbols。

三，組合樣式的構(gòu)建

相信每個(gè)小伙伴都不離開微信，聊天占據(jù)了作為宅女的我50%的休閑時(shí)間 。

那么了解完基礎(chǔ)樣式的構(gòu)建，下面我們將以聊天界面為例，使用Sketch插件Paddy插件及Sketch中的Resizing功能設(shè)計(jì)組合樣式。

「 對(duì)話彈出樣式組件設(shè)計(jì) 」

(對(duì)話彈出樣式組件設(shè)計(jì))

對(duì)話彈出樣式由背景+文字構(gòu)成，我們確定好制作的樣式，選中兩個(gè)圖層利用Paddy插件設(shè)置參數(shù)即可。

該方式同時(shí)適用于tooltips、tag、tab等組件的樣式設(shè)計(jì)，這會(huì)使你操作更加便捷奧。

(Ant Design / Tag)

「 音頻彈出樣式設(shè)計(jì)」

(走心的微信聊天界面截圖)

聊天時(shí)發(fā)送音頻的長度會(huì)根據(jù)錄音長短而變化。如果當(dāng)我們做聊天時(shí)不想每次都手動(dòng)調(diào)整間距，該如何操作呢？

(對(duì)話界面音頻彈出樣式組件設(shè)計(jì))

這里的非常簡單，只需要使用Sketch中的Resizing功能即可：

因?yàn)镽esizing主要針對(duì)組內(nèi)圖層操作，所以建議在制作symbol時(shí)，選中畫板并勾選縮放時(shí)調(diào)整內(nèi)容大小，這樣可以減少畫板的打組操作。

在制作時(shí)候，因?yàn)槟承┣闆r不能夠完全滿足效果，可以在實(shí)際操作中，根據(jù)情況調(diào)節(jié)。比如在設(shè)計(jì)音頻彈出框樣式時(shí)，我在左側(cè)時(shí)間下添加了透明的圖層以達(dá)到橫向拉動(dòng)不變形的效果。

「 調(diào)用組件制作界面 」

(界面調(diào)用組件示例)

制作好一些組合的symbols，我們就可以通過組件的調(diào)用快速的繪制了聊天的界面。通過上述方式，我們還可以根據(jù)項(xiàng)目需求制作更復(fù)雜的組件樣式，比如一些重復(fù)出現(xiàn)的列表等。

(界面調(diào)用組件示例)

四，敲黑板，制作時(shí)請(qǐng)記住以下2大點(diǎn)

「 有源可溯 」

大家可以看到示范demo中，每一個(gè)元素都是源自我們的UI Libraries，同時(shí)利用Resizing進(jìn)行了樣式自適應(yīng)調(diào)整。所以我們要做到設(shè)計(jì)中的有源可溯，這里的源就是我們的Libraries中的組件及樣式。這樣做的好處是能夠有效的規(guī)范我們的設(shè)計(jì)，同時(shí)在有需要調(diào)整的時(shí)候能夠快速調(diào)整，提高工作效率。

「 靈活性 」

靈活性是什么呢？

大家可能會(huì)想，當(dāng)我們確定了UI Libraries，就不能調(diào)整了嗎？

我們?cè)O(shè)計(jì)的過程中，應(yīng)該先出完所有的組件樣式才開始設(shè)計(jì)嗎？

NO，這里我們應(yīng)該學(xué)會(huì)彈性設(shè)計(jì)。

雖然在構(gòu)建libraries的時(shí)候，我們需要遵循邏輯和理性層層遞進(jìn)構(gòu)建我們的組件庫內(nèi)容。但是在設(shè)計(jì)的過程中，我們更加需要彈性的設(shè)計(jì)，根據(jù)實(shí)際項(xiàng)目情況調(diào)整Llibraries。一般來說可以先出一些主界面的樣式，確定我們的風(fēng)格及相關(guān)規(guī)范，然后再在邊制作的時(shí)候慢慢完善我們的UI Libraries。要不然脫離項(xiàng)目脫離實(shí)際的創(chuàng)建Llibraries并沒有意義。

原創(chuàng)： 罐頭九九 （Panda Plus）