前言

這是一篇關(guān)于的高級教程，為保證更好的理解文章內(nèi)容，您需要對如下知識點有一定的了解（部分內(nèi)容有注釋）。

文字樣式1

▲圖片來自手冊

在設(shè)計包含大量文本的界面時，很多圖層的文本屬性都是相同的，通過保存為文本樣式，可以重復(fù)使用這些文本屬性，而不必逐一設(shè)置。

文本樣式用于設(shè)置文本的規(guī)格，包括字體、字體大小、字體粗細(xì)、顏色、字符間距、行高2、段落間距等。

1 文本樣式：

2 行高：參考知乎專欄《我們來聊聊iOS文字的行高》

圖層樣式3

▲圖片來自手冊

將一組樣式元素保存為圖層樣式，這些元素可以在文檔的任何圖層中重復(fù)使用。

圖層樣式用于創(chuàng)建顏色規(guī)范，涵蓋填充顏色、描邊顏色、內(nèi)外陰影、模糊效果等。

3 圖層樣式：

?

▲圖片來自手冊

作為旗艦功能，它可以在畫板、頁面甚至其他文件中重復(fù)使用。52之后的新功能使其更加靈活和輕量。

●可重復(fù)使用：支持畫板、頁面和多個文檔之間的重復(fù)使用

● 可嵌套：多個

●可替換：可以用其他替換

▲更換

?:

英文名

組件采用英文命名有以下幾個原因：

●方便設(shè)計師后期修改、整理文件

●團(tuán)隊內(nèi)部容易達(dá)成共識，促進(jìn)協(xié)作

● 節(jié)省開發(fā)成本，減少不必要的溝通及重復(fù)圖片裁剪

構(gòu)建組件庫的想法

在建立組件庫之前我們先來聊一下構(gòu)建思路：解構(gòu)、拆分、重構(gòu)。

解構(gòu)

一般的設(shè)計規(guī)范包括：基礎(chǔ)規(guī)范、圖標(biāo)規(guī)范、組件規(guī)范。第一步是將這三類規(guī)范逐一解構(gòu)。例如：基礎(chǔ)規(guī)范解構(gòu)為文字規(guī)范、顏色規(guī)范、布局規(guī)范……

分裂

將解構(gòu)后的規(guī)范拆分成最基本的元素，基礎(chǔ)規(guī)范、圖標(biāo)規(guī)范都在這一步完成，比如在文本規(guī)范中，分為標(biāo)題、副標(biāo)題、主文本、輔助文本、標(biāo)簽文本……

“重構(gòu)”

采用重構(gòu)或嵌套?來制定組件規(guī)范，將分解后的元素組合成模塊，再將模塊組合成組件。

? 嵌套：

使用組件庫建立設(shè)計規(guī)范

其實，一個優(yōu)秀的組件庫=一套簡單易用的設(shè)計規(guī)范。組件庫中不僅涵蓋了常用的組件，還包括文本樣式、圖層樣式，三者共同構(gòu)成了一套設(shè)計規(guī)范。

我們先來看一下一個優(yōu)秀的組件庫（通用組件規(guī)范）是什么樣的：

圖中顯示的是 Ant 團(tuán)隊?制作的 Web 組件庫，可使用插件進(jìn)行預(yù)覽。

?Ant...Beta.3.10.5.：

基于上述思路，我們將基礎(chǔ)規(guī)范、圖標(biāo)規(guī)范、組件規(guī)范進(jìn)行解構(gòu)sketch視覺設(shè)計教程，并將其中部分內(nèi)容拆分為基本元素，得到以下內(nèi)容：

基本規(guī)格

1. 文本標(biāo)準(zhǔn)（創(chuàng)建為文本樣式）

1. ? 標(biāo)題()

2. ? 字幕 ( )

3. ? 正文

4.? 次要文本（）

5.? 標(biāo)簽

2. 顏色指定（作為圖層樣式創(chuàng)建）

1.? 主色（）包含與主色相似的顏色，用于不同的狀態(tài)

2. ? 功能顏色（） 成功、失敗、警告、不可用等顏色。

3.? 漸變（）

4. ? 背景顏色()

5. ? 字體顏色（文本）

3. 布局規(guī)范

1.? 分割線（）

2.?…

4. 標(biāo)簽標(biāo)準(zhǔn)

1.?…

5. 其他風(fēng)格

1.? 圓角規(guī)范（）

2. ? 陰影規(guī)范()

3.?…

基礎(chǔ)規(guī)范的主要內(nèi)容為文字規(guī)范與顏色規(guī)范，其中文字規(guī)范中的元素以 Text Style 形式創(chuàng)建，顏色規(guī)范中的元素則分類以 Layer Style 形式創(chuàng)建，其他元素則可根據(jù)不同情況進(jìn)行調(diào)整。

圖標(biāo)規(guī)范

在圖標(biāo)規(guī)范中，可以根據(jù)圖標(biāo)大小、業(yè)務(wù)場景、圖標(biāo)功能等來區(qū)分級別，筆者按照圖標(biāo)大小來區(qū)分級別（暫時不考慮最小交互面積）：

1. ? 48px（Tab欄圖標(biāo)、金剛區(qū)域圖標(biāo)、底部按鈕圖標(biāo)等）

2. ? 40px（使用場景：標(biāo)題圖標(biāo)、個人中心列表圖標(biāo)等）

3. ? 30px (使用場景：輔助圖標(biāo))

在制定圖標(biāo)規(guī)范的時候，需要根據(jù)設(shè)計師自身的情況做相應(yīng)的調(diào)整。但是在設(shè)計圖標(biāo)的時候，有以下幾點是比較常見的：

“結(jié)構(gòu)簡單”

根據(jù)簡單性定律，我們知道簡單的圖形識別需要用戶付出最少的認(rèn)知和努力。對于一般規(guī)格的圖標(biāo)，應(yīng)盡可能簡單，以保證用戶識別。當(dāng)然，金剛區(qū)域等特殊區(qū)域的圖標(biāo)需要我們在工作中單獨設(shè)計。

“視覺尺寸均勻性”

設(shè)計時以圖標(biāo)框為參考，保證整套圖標(biāo)的視覺大小統(tǒng)一。當(dāng)然圖標(biāo)框并不是一個固定值，在日常工作中需要根據(jù)圖標(biāo)造型進(jìn)行微調(diào)。

像素對齊

與像素網(wǎng)格對齊并使用整數(shù)作為路徑錨點以避免虛擬邊緣。

在 中，您可以通過打開像素模式或使用自動像素對齊功能來進(jìn)行像素對齊。

使用偶數(shù)

由于適配原因，繪圖時要特別注意，尤其是@2x的情況。

「矢量形狀」

使用函數(shù)和布爾運算將圖標(biāo)轉(zhuǎn)換為矢量形狀。

TIPS：將圖層樣式中的任意顏色應(yīng)用到矢量形狀，然后可以在后續(xù)的嵌套中更改圖標(biāo)的顏色。

組件規(guī)格

由于篇幅有限，本文只介紹通用組件，經(jīng)過解構(gòu)分類，得到以下內(nèi)容（設(shè)計師可根據(jù)項目情況進(jìn)行補充）

但簡單的解構(gòu)和分類還不夠，如果想要完成一個完整的組件庫，還需要將解構(gòu)后的組件拆分成單獨的元素，以方便嵌套和組件組合。

由于篇幅有限，我們以List組件為例進(jìn)行分析：

和上面的組件庫思路一樣，對于單體組件，同樣運用解構(gòu)→拆分→重構(gòu)的思路。區(qū)別在于單體組件需要考慮到組件的不同形態(tài)/狀態(tài)。

解構(gòu)為模塊

解構(gòu)List模塊，獲取背景sketch視覺設(shè)計教程，分割線，左側(cè)內(nèi)容Left，右側(cè)內(nèi)容Right

拆分成元素

左右兩側(cè)的內(nèi)容可以進(jìn)一步拆分為圖標(biāo)、標(biāo)題、文本、箭頭

「添加其他形式/狀態(tài)」

僅涵蓋一種形式/狀態(tài)并不是完整的規(guī)范，我們需要考慮 List 的所有常見形式

如圖所示，分割線的各種狀態(tài)以及左右兩邊內(nèi)容的各種形態(tài)都需要考慮到。對比一下前面分割的結(jié)果，去重后會發(fā)現(xiàn)多了一個 元素（Arrow 和 Check 都屬于 Icon 類）。將其添加到列表中，就得到了組成 List 組件的所有元素。

是不是看起來很眼熟？沒錯，這些元素正是基礎(chǔ)規(guī)范和圖標(biāo)規(guī)范中所包含的。

“嵌套（重構(gòu)）”

將上面三個步驟反過來進(jìn)行嵌套：先將最基本的元素組合成模塊，再將模塊組合成List組件。

因為使用了嵌套，最終組合出來的List組件可以在右側(cè)設(shè)置各種模塊和元素。

重復(fù)解構(gòu)為模塊、拆分為元素、添加狀態(tài)/表單、重構(gòu)（元素→模塊→組件）四個步驟，完成組件規(guī)范清單中的所有組件，這套利用函數(shù)制作的通用規(guī)范組件庫就完成了。

寫在后面

如何在設(shè)計稿中使用元件庫？

將準(zhǔn)備好的元件庫另存為.文件，在上方菜單找到：——，點擊下方的添加…按鈕，導(dǎo)入該.文件。

如何規(guī)范元件庫的管理？

當(dāng)名稱中有“/”符號時，它們將被視為一個單獨的組。例如：兩個文件，一個名為“/”，另一個名為“/”，將歸入該組。

當(dāng)然你也可以使用?插件來幫助你規(guī)范管理。

? 插件：

相比于通過修改名稱來管理組件庫的死板方式，該插件可以幫你以類似的方式查看、修改、刪除你的組件庫。當(dāng)然，9.99 美元的買斷價格和只能通過 VPN 才能正常使用的限制可能會讓你望而卻步。

但我們相信，版權(quán)意識、英文成分管理、為優(yōu)質(zhì)內(nèi)容付費的理念會慢慢滲透到每一位設(shè)計師的潛意識中。

如何讓組件更加靈活？

智能變焦是39新增的功能，它有多智能呢？

參見官方解答

官方答案太難懂？讓我們回顧一下古代版本中你應(yīng)該學(xué)到的東西。

「一張圖教你用新功能——智能變焦」

如何在組件庫中使用它？例如：

1、解構(gòu)之后，得到N個相同的Tab模塊；再將Tab模塊拆分成四個元素：Icon、Text、分割線、背景。

2、分別設(shè)置這四個元素的屬性，Tab模塊可以自由水平拉伸，不打亂布局。通過水平拉伸尺寸，可以得到3-5個Tab。

類似的組件還有很多，只要在制作組件庫的時候稍加留心，就能讓你的組件庫更加靈活、易用。

擴(kuò)展使用

這是Pablo提供的免費插畫庫，可用于商業(yè)或個人用途。你可以改變角色的發(fā)型、膚色、上衣、褲子、鞋子……還可以旋轉(zhuǎn)各個元素的方向，再加一點氛圍，這將是一幅適合各種場合的插畫。

▲內(nèi)容來自網(wǎng)絡(luò)，官網(wǎng)鏈接

同樣來自Pablo的免費頭像庫，可用于商業(yè)或個人使用，頭像中的任意元素均可DIY組合，包括頭像、胡須、眼睛、眼鏡、臉型、膚色等均可自由搭配。

▲內(nèi)容來自網(wǎng)絡(luò)，官網(wǎng)鏈接

后臺回復(fù)關(guān)鍵字“ ”即可獲取源文件！

最后希望設(shè)計師在構(gòu)建元件庫的過程中，不但能夠提高自己的設(shè)計效率，還能增強(qiáng)自己其他方面的知識和能力。

共勉。

今天的復(fù)活節(jié)彩蛋

UED原創(chuàng)潮玩“大腦花花公子”限量版

神秘的準(zhǔn)備……

如有侵權(quán)請聯(lián)系刪除！