工欲善其事必先利其器，在日常工作中，怎么樣提高自己及團隊的工作效率應(yīng)該是很多設(shè)計師和團隊在思考的問題。Sketch作為UI設(shè)計師的必備工具，我們已經(jīng)相當(dāng)熟悉，如何結(jié)合Sketch來提高自己以及團隊的工作效率呢？

我從下圖所示的幾個方面結(jié)合自己的經(jīng)驗做個簡單分享：

Tips：本文不對Sketch的使用操作做講解，教程可以在Sketch官網(wǎng)、Youtube、或者國內(nèi)外的Sketch論壇等途徑都可以找到，希望文章對你有幫助，或者您有合理建議或其他內(nèi)容補充也可以提出來。

Symbol

1. Symbol介紹

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

2. Symbol使用方法

Symbol的使用場景主要集中在模塊化設(shè)計，如何合理的利用模塊化思維進行設(shè)計工作，是現(xiàn)在的設(shè)計師需要思考的一個問題。

那么什么是模塊化設(shè)計呢？

對于產(chǎn)品體驗設(shè)計而言，模塊化設(shè)計就是將產(chǎn)品流程、產(chǎn)品結(jié)構(gòu)、交互方式、表現(xiàn)形式等產(chǎn)品的組成主要要素模塊化。通過模塊化設(shè)計可以讓我們在差異化跟高效之間找到一個合適的平衡點。

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

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

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

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

我們可以看到上圖導(dǎo)航欄模塊，分別由背景、圖標、文字、分割線、狀態(tài)欄組成。依照模塊化設(shè)計的標準，我們依次對他們創(chuàng)建Symbol（文字除外），這時候控件元素已經(jīng)創(chuàng)建好，對他們進行對應(yīng)的排列組合就這個模塊就已經(jīng)完成了，在日?；竟ぷ髦校@部分工作已經(jīng)完成了。

但是做到這些是不夠的，我們需要更深層思考，例如適配其他端應(yīng)該怎么處理，有沒有其他情況下會跟現(xiàn)在的控件重復(fù)或者沖突等等，這都是要思考的問題。那么如何合理的創(chuàng)建Symbol，避免控件樣式的重復(fù)呢。

我們繼續(xù)以導(dǎo)航欄模塊為例：

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

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

library

1. library介紹

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

2. Library使用方法

在設(shè)計團隊中，多人協(xié)作是必然情況，那么如何保持通用模塊和控件始終保持一致呢？

我們只需將Librar文件存放在一個固定的地方，例如云盤,公司內(nèi)部網(wǎng)盤等位置，將通用的控件以及模塊存放在其中，然后其他設(shè)計師就可以輕松調(diào)用啦。然后當(dāng)這個Librariy件有任何修改，你就可以接收到更新通知。

通常情況下，我們會將公司產(chǎn)品的設(shè)計規(guī)范、通用模塊和控件做成Library文件，讓團隊內(nèi)的其他設(shè)計師進行調(diào)用。一般里面包括顏色、圖標、文字還有其他模塊控件等。

團隊的設(shè)計師可以充分利用Library來讓自己文件里面的Symbol始終保持最新以及和團隊成員保持一致，但是由于Library文件任何設(shè)計師都可以進行編輯，所以我們要將Library進行安全的分離，對Library的編輯只能在特定的位置，特定的文件甚至特定的人進行。

因此一般不會有不相關(guān)的編輯，如果一旦不小心無意進行了修改一定要及時修改回來，不然團隊內(nèi)的其他設(shè)計師的文件就會出問題。

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

詳細看下圖：

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

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

這樣Library文件已經(jīng)添加成功，我們已經(jīng)可以輕松的訪問我們Library里面的控件了。

如果我們的Librar文件有人進行了編輯，那我們會在自己使用Librari文件中收到如下圖一樣的更新提示，我們根可以據(jù)自己的需求選擇是否更新Symbol，如下圖所示：

是不是很方便高效，這里只寫了最簡單的用法，詳細的方法呢有興趣的朋友可以私信問我或者在官方網(wǎng)站查找，這里不做過多贅述。另外如何制作一個相對合理Library文件，這也是屬于比較重要的內(nèi)容，今天在這里不展開講解，有興趣的朋友可以私信我。

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

使用技巧

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

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

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

（3）默認的圖形樣式是可以設(shè)置的，這樣可以更加個性化，如下圖所示：

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

（5）如何利用內(nèi)陰影快速制作可復(fù)用表格，如下圖所示：

（6）如何測量組內(nèi)跟組外間距，組內(nèi)量組外間距快捷鍵為：option+上檔鍵+鼠標懸浮，如下圖所示：

（7）如何快速查到歷史用色記錄，如下圖所示：

效率拓展

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

1. Runner 使用命令行來提高你的工作效率
2. Cfaft 幫你提高效率的自動填充神器
3. Rename it 快速批量重命名你的圖層
4. Remove Unused Symbols 一鍵刪除未使用的 Symbol
5. Artboards to PDF 批量導(dǎo)出選定畫板為多頁 PDF
6. ImageOptim 一鍵導(dǎo)出所有切片資源并自動優(yōu)化體積
7. Sketch Measure 快速創(chuàng)建規(guī)范為開發(fā)者和團隊協(xié)作提供方便
8. Midnight 增加替換主題功能及小工具
9. Flavor 給你的設(shè)計加點料
10. Sketch2AE 輕松導(dǎo)出 Sketch 資源至 AE 并自動定位
11. Anima 可以實現(xiàn)自動布局
12. Abstract Sketch文件版本管理軟件

寫在最后，分享的一點想法希望對諸位有所幫助，如果諸位有好的想法或者意見可以跟我探討。工具只是幫助我們實現(xiàn)想法的一個媒介，我們應(yīng)該豐富自己的想法，獨立思考，與君共勉。

作者：Kane_D ，公眾號：小凱的設(shè)計筆記（ID：YXS_Design）

本文由Kane_D 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議