UI 設計的過程中睦焕，我們常常會想重復使用某些元素红省，已達到整體風格和細節(jié)的統(tǒng)一，有時是一個按鈕嚷兔，有時是一種文字式樣森渐，有時則是圖形填充和邊框的式樣。復用之后我們還希望這些元素可以保持同步冒晰，如果更改其中一個同衣，其他的也會隨之改變。Sketch 當中有這幾個不同的方式來幫你實現(xiàn)：

如何將想法和工具結(jié)合起來壶运，讓自己的工作效率翻倍耐齐，這篇文章為你答疑解惑。

工欲善其事必先利其器蒋情，在日常工作中埠况，怎么樣提高自己及團隊的工作效率應該是很多設計師和團隊在思考的問題。Sketch 作為 UI 設計師的必備工具棵癣，我們已經(jīng)相當熟悉辕翰，如何結(jié)合 Sketch 來提高自己以及團隊的工作效率呢？我從下圖所示的幾個方面結(jié)合自己的經(jīng)驗做個簡單分享狈谊。

一喜命、Symbol

1. Symbol 介紹

Symbol 是 Sketch 中一個強大且實用的功能，可以讓你輕松的在畫板和頁面以及多個文件中復用重復元素河劝。Symbol 的存在類似智能對象在 PS 中的存在壁榕，但 Symbol 比智能對象更加靈活實用。那么如何高效合理的利用 Symbol 進行工作呢赎瞎，下面我介紹下 Symbol 的使用方法牌里。

2. Symbol 使用方法

Symbol 的使用場景主要集中在模塊化設計，如何合理的利用模塊化思維進行設計工作务甥，是現(xiàn)在的設計師需要思考的一個問題牡辽。那么什么是模塊化設計呢？對于產(chǎn)品體驗設計而言敞临，模塊化設計就是將產(chǎn)品流程催享、產(chǎn)品結(jié)構(gòu)、交互方式哟绊、表現(xiàn)形式等產(chǎn)品的主要組成要素模塊化。通過模塊化設計可以讓我們在差異化跟高效之間找到一個合適的平衡點。

模塊化設計主要分為以下步驟：模塊劃分——模塊設計——模塊組合票髓，這里主要針對模塊的劃分以及模塊的設計進行重點說明攀涵。首先模塊是由控件組成，主要包括字體洽沟、按鈕以故、圖標、列表等裆操。而模塊又由控件組成怒详，模塊跟控件存在父子關(guān)系。

在模塊劃分標準上要遵循：單一性（模塊顆粒度要小踪区，一個模塊解決一個需求）昆烁、完整性（內(nèi)部流程可打通，形成閉環(huán)）缎岗、獨立性（每個模塊和其他模塊的依存關(guān)系要低静尼，以便跟其他模塊組合適配）。

在模塊設計的部分遵循：復用性（盡可能的提高復用模塊占比）传泊，延展性（考慮一定的模塊控件可拓展性鼠渺，以便處理在一定范圍內(nèi)的差異性），互換性（需要注意對外信息結(jié)構(gòu)一致眷细，保證全局信息結(jié)構(gòu)快速互換）三大原則拦盹。

在產(chǎn)品的設計過程中，根據(jù)產(chǎn)品的實際情況溪椎，我們使用 Symbol 對模塊進行控件化普舆，以下圖為例：

我們可以看到上圖導航欄模塊，分別由背景池磁、圖標奔害、文字、分割線地熄、狀態(tài)欄組成华临。依照模塊化設計的標準，我們依次對他們創(chuàng)建 Symbol（文字除外）端考，這時候控件元素已經(jīng)創(chuàng)建好雅潭，對他們進行對應的排列組合這個模塊就已經(jīng)完成了，在日橙刺兀基本工作中扶供，這部分工作已經(jīng)完成了。但是做到這些是不夠的裂明，我們需要更深層思考椿浓，例如適配其他端應該怎么處理，有沒有其他情況下會跟現(xiàn)在的控件重復或者沖突等等，這都是要思考的問題扳碍。那么如何合理的創(chuàng)建 Symbol提岔，避免控件樣式的重復呢？我們繼續(xù)以導航欄模塊為例：

根據(jù)上一部分我們知道導航模塊第一種類型已經(jīng)完成了笋敞，但是在實際項目中我們知道導航欄樣式不會只有這么一種類型碱蒙，根據(jù)產(chǎn)品實際情況我們想到會出現(xiàn)以上幾種情況，所以我們也對他們進行模塊化夯巷∪停可以復用的元素就可以調(diào)用之前模塊里面的控件，例如狀態(tài)欄趁餐、返回按鈕喷兼、背景色，這樣做可以最大化的避免模塊控件的重復澎怒，也可以在產(chǎn)品設計早期完善模塊褒搔，做到未雨綢繆，為以后的設計工作做準備喷面。

看到這里星瘾，大家可以看到，我并沒有講 Symbol 的任何具體使用方法惧辈，工具只是實現(xiàn)想法的一種媒介琳状，我們應該多思考，舉一反三盒齿，將工具跟想法結(jié)合起來才能達到效率和質(zhì)量的最大化念逞。

1.1 默認組件symbol（符號）

1.2 自定義組件

1.3 組件的命名

我會為設計體系當中的每一種顏色生成一個Shared Style，并按照不同的作用進行分類边翁，具體的分類方式就是在Shared Style命名當中通過／符號表示層級結(jié)構(gòu)翎承，Sketch會識別到該符號，并自動生成相應的架構(gòu)符匾。

1.4 組件的嵌套與重載

二叨咖、共享圖層式樣 Layer Style

圖層式樣則僅僅針對圖形：使用什么樣的填充和邊框，什么樣的陰影和模糊啊胶，這些都是可以復用并同步的甸各。

三、共享文字式樣 Text Style

文本式樣讓你保持文本的一致性焰坪，設定好字體趣倾、字號、顏色某饰，然后復用于多個文本儒恋。

最后你可以在共享列表中來管理所有的符號和式樣善绎，方便你刪除、復制或者重命名诫尽。

四涂邀、模板

New From Template

這個功能讓你從之前設定好的模板中直接新建文件（就像 Keynote 和 Pages 里面那樣） Sketch 已經(jīng)為大家設置好了幾個最常用的模板，方便直接調(diào)用箱锐。

?iOS App Icon：按照 iOS User Interface Guidelines 的要求，每個畫板都是圖標所需的不同尺寸劳较。

?iOS UI Design： Sketch 3 嵌入了 由 teehan+lax 制作的iOS 7 UI套件驹止，第一頁是歡迎頁面，所有的 symbols 在第二頁喲观蜗。（我們會再下篇分享具體討論symbols）

?Mac App Icon：每個畫板都是Mac圖標所需的不同尺寸臊恋。

?Web Design：第一頁包含四個網(wǎng)頁設計的畫板：Desktop HD、Desktop墓捻、Tablet Portrait 和 Mobile Portrait抖仅，非常直觀。第二頁同樣包含簡單的web UI 元素砖第。

?Welcome to Sketch：這是 Bohemian Coding 團隊制作的一個展示頁面撤卢，Sketch 官網(wǎng)的最終實現(xiàn)效果也正是由此產(chǎn)生。如果你是初次使用 Sketch梧兼，我十分建議你打開這個模板看看放吩，因為它本身已經(jīng)是一份完整的 Sketch 文件了，你可以迅速了解到 Sketch 當中規(guī)范的文件組織結(jié)構(gòu)是什么樣的羽杰，圖層層級是什么樣的渡紫，一些最基本的操作是什么樣的，這些都能幫你更快熟悉 Sketch考赛。

模板的另一個好處是你可以自己新建模板惕澎，創(chuàng)作好文件然后進入菜單欄的 File > Save as Template。因為symbols符號功能是用于復用某一具體元素颜骤，比如一個按鈕唧喉，它并不能在不同文件中共享，而模板則可以用來創(chuàng)建無數(shù)個獨立的文件复哆。

Sketch47版本欣喧，更新了重要的團隊協(xié)作新功能——Libraries，可以說是共享版本的“Symbol”梯找，它具備了所有symbol的特性唆阿，并在symbol的基礎(chǔ)上支持團隊編輯、調(diào)用锈锤，一起來看看怎么使用吧驯鳖。

五闲询、Library

1. Library 介紹

Library 其實只是一個普通的 Sketch 文件，其中包含 Symbol浅辙，你可以在其他 Sketch 文件中使用此 Symbol扭弧。如果您更新 Library 文件中的任何一個 Symbol，你都會收到更新通知记舆，利用 Library鸽捻，團隊成員們可以在 Sketch 文件之間共享 Symbol，并使其更新以始終保持同步泽腮。

2. Library 使用方法

在設計團隊中御蒲，多人協(xié)作是必然情況，那么如何使通用模塊和控件始終保持一致呢诊赊？我們只需將 Librar 文件存放在一個固定的地方厚满，例如云盤、公司內(nèi)部網(wǎng)盤等位置碧磅，將通用的控件以及模塊存放在其中碘箍，然后其他設計師就可以輕松調(diào)用了。當這個 Librariy 有任何修改鲸郊，你都可以接收到更新通知丰榴。

通常情況下，我們會將公司產(chǎn)品的設計規(guī)范严望、通用模塊和控件做成 Library 文件多艇，讓團隊內(nèi)的其他設計師進行調(diào)用。一般里面包括顏色像吻、圖標峻黍、文字、還有其他模塊控件等拨匆。團隊的設計師可以充分利用 Library 來讓自己文件里面的 Symbol 始終保持最新姆涩，以及和團隊成員保持一致。但是由于任何設計師都可以對 Library 文件進行編輯惭每，所以我們要將 Library 進行安全的分離骨饿，對 Library 的編輯只能在特定的位置、特定的文件台腥，甚至特定的人進行宏赘，因此一般不會有不相關(guān)的編輯。如果一旦不小心無意進行了修改一定要及時修改回來黎侈，不然團隊內(nèi)的其他設計師的文件就會出問題察署。

下面就分享下如何簡單的創(chuàng)建一個 Library 文件。這里我們以 Apple 官方的 Library 文件為例進行講解峻汉，這里我們選擇將文件存放在堅果云里面贴汪。詳細看下圖：

我們將文件存放好之后脐往，打開 Library 添加彈層如下圖：

Add Library 按鈕選擇存放在堅果云的 sketch 文件，如下圖：

這樣 Library 文件已經(jīng)添加成功扳埂，我們就可以輕松的訪問我們 Library 里面的控件了业簿。如果有人對我們的 Library 文件進行了編輯，那我們會在自己使用 Library 文件中收到如下圖一樣的更新提示阳懂，我們可以根據(jù)自己的需求選擇是否更新 Symbol梅尤，如下圖所示：

通過上面的流程講解，我們可以看到 Library 的使用很簡單岩调，通過 Library 可以讓我們團隊協(xié)作得更加順暢克饶，工作效率和工作質(zhì)量會有很大的提升。設計師們?nèi)绻袡C會一定要嘗試構(gòu)建 Library 文件誊辉，不論是為個人還是為團隊都對自己的整體把控能力有很大的提升。

三亡脑、好用的小技巧

使用了這么久的 sketch堕澄。有幾個好用的小技巧分享給大家。

1. Sketch支持簡單的數(shù)學計算霉咨，再也不用計算器了蛙紫，直接在輸入框內(nèi)就可以計算，用途廣泛途戒，如下圖所示：

2. 在一倍圖 0.5px 的分割線讓很多設計師頭疼坑傅，這里利用內(nèi)陰影教大家制作，如下圖所示 ：

3. 默認的圖形樣式是可以設置的喷斋，這樣可以更加個性化唁毒，如下圖所示：

4. 如何利用圓周率進行 Loading 制作，如下圖所示：

5. 如何利用內(nèi)陰影快速制作可復用表格星爪，如下圖所示：

6. 如何測量組內(nèi)跟組外間距浆西，組內(nèi)量組外間距快捷鍵為：option+上檔鍵+鼠標懸浮。

7. 如何快速查到歷史用色記錄顽腾，如下圖所示：

四近零、效率拓展

下圖是給大家推薦的11款常用 sketch 插件和一個 Sketch 文件版本管理工具，下面我就依次介紹下這11款插件和1個軟件抄肖。

Runner?—— 使用命令行來提高你的工作效率

Cfaft?—— 幫你提高效率的自動填充神器

Rename it?—— 快速批量重命名你的圖層

Remove Unused Symbols?—— 一鍵刪除未使用的 Symbol

Artboards to PDF?—— 批量導出選定畫板為多頁 PDF

ImageOptim?—— 一鍵導出所有切片資源并自動優(yōu)化體積

Sketch Measure?—— 快速創(chuàng)建規(guī)范為開發(fā)者和團隊協(xié)作提供方便

Midnight?—— 增加替換主題功能及小工具

Flavor?—— 給你的設計加點料

Sketch2AE?—— 輕松導出 Sketch 資源至 AE 并自動定位

Anima?—— 可以實現(xiàn)自動布局

Abstract?—— Sketch 文件版本管理軟件