工欲善其事必先利其器，在日常工作中，怎么樣提高自己及團(tuán)隊(duì)的工作效率應(yīng)該是很多設(shè)計(jì)師和團(tuán)隊(duì)在思考的問(wèn)題。Sketch作為UI設(shè)計(jì)師的必備工具，我們已經(jīng)相當(dāng)熟悉，如何結(jié)合Sketch來(lái)提高自己以及團(tuán)隊(duì)的工作效率呢，我從下圖所示的幾個(gè)方面結(jié)合自己的經(jīng)驗(yàn)做個(gè)簡(jiǎn)單分享。
Tips：本文不對(duì)Sketch的使用操作做講解，教程可以在Sketch官網(wǎng)、Youtube、或者國(guó)內(nèi)外的Sketch論壇等途徑都可以找到，希望文章對(duì)你有幫助，或者您有合理建議或其他內(nèi)容補(bǔ)充也可以提出來(lái)。
Symbol介紹
Symbol是Sketch中一個(gè)強(qiáng)大且實(shí)用的功能，可以讓你輕松的在畫(huà)板和頁(yè)面以及多個(gè)文件中復(fù)用重復(fù)元素。Symbol的存在類(lèi)似智能對(duì)象在PS中的存在，但Symbol比智能對(duì)象更加靈活實(shí)用。那么如何高效合理的利用Symbol進(jìn)行工作呢，下面我介紹下Symbol的使用方法。
Symbol使用方法
如何合理的利用模塊化思維進(jìn)行設(shè)計(jì)工作，是現(xiàn)在的設(shè)計(jì)師需要思考的一個(gè)問(wèn)題。那么什么是模塊化設(shè)計(jì)呢，對(duì)于產(chǎn)品體驗(yàn)設(shè)計(jì)而言，模塊化設(shè)計(jì)就是將產(chǎn)品流程、產(chǎn)品結(jié)構(gòu)、交互方式、表現(xiàn)形式等產(chǎn)品的組成主要要素模塊化。通過(guò)模塊化設(shè)計(jì)可以讓我們?cè)诓町惢咝еg找到一個(gè)合適的平衡點(diǎn)。
模塊化設(shè)計(jì)主要分為以下步驟：模塊劃分——模塊設(shè)計(jì)——模塊組合，這里主要針對(duì)模塊的劃分以及模塊的設(shè)計(jì)進(jìn)行重點(diǎn)說(shuō)明。首先模塊是由控件組成，主要包括字體，按鈕，圖標(biāo)，列表等。而模塊又由控件組成，模塊跟控件的存在父子關(guān)系的。
在模塊劃分標(biāo)準(zhǔn)上要遵循：?jiǎn)我恍裕K顆粒度要小，一個(gè)模塊解決一個(gè)需求）、完整性（內(nèi)部流程可打通，形成閉環(huán)）、獨(dú)立性（每個(gè)模塊和其他模塊的依存關(guān)系要低，以便跟其他模塊組合適配）。
在模塊設(shè)計(jì)的部分遵循：復(fù)用性（盡可能的提高復(fù)用模塊占比），延展性（考慮一定的模塊控件可拓展性，以便處理在一定范圍內(nèi)的差異性處理），互換性（需要主意對(duì)外信息結(jié)構(gòu)一致，保證全局信息結(jié)構(gòu)快速互換）三大原則。
在產(chǎn)品的設(shè)計(jì)過(guò)程中，根據(jù)產(chǎn)品的實(shí)際情況，我們使用Symbol對(duì)模塊進(jìn)行控件化，已下圖為例：
我們可以看到上圖導(dǎo)航欄模塊，分別由背景，圖標(biāo)，文字，分割線(xiàn)，狀態(tài)欄組成。依照模塊化設(shè)計(jì)的標(biāo)準(zhǔn)，我們依次對(duì)他們創(chuàng)建Symbol（文字除外），這時(shí)候控件元素已經(jīng)創(chuàng)建好，對(duì)他們進(jìn)行對(duì)應(yīng)的排列組合就這個(gè)模塊就已經(jīng)完成了，在日?；竟ぷ髦校@部分工作已經(jīng)完成了。但是做到這些是不夠的，我們需要更深層思考，例如適配其他端應(yīng)該怎么處理，有沒(méi)有其他情況下會(huì)跟現(xiàn)在的控件重復(fù)或者沖突等等，這都是要思考的問(wèn)題。那么如何合理的創(chuàng)建Symbol，避免控件樣式的重復(fù)呢。我們繼續(xù)以導(dǎo)航欄模塊為例：
根據(jù)上一部分我們知道導(dǎo)航模塊第一種類(lèi)型已經(jīng)完成了，但是在實(shí)際項(xiàng)目中我們知道導(dǎo)航欄樣式不會(huì)只有這么一種類(lèi)型，根據(jù)產(chǎn)品實(shí)際情況我們想到會(huì)出現(xiàn)以上幾種情況，所以我們也對(duì)他們進(jìn)行模塊化，可以復(fù)用的元素就可以調(diào)用之前模塊里面的控件，例如狀態(tài)欄，返回按鈕，背景色，這樣做可以最大化的避免模塊控件的重復(fù)，也可以在產(chǎn)品設(shè)計(jì)早期完善模塊，做到未雨綢繆！為以后的設(shè)計(jì)工作做準(zhǔn)備。
看到這里，大家可以看到，我并沒(méi)有講Symbol的任何具體使用方法，工具只是實(shí)現(xiàn)想法的一種媒介，我們應(yīng)該多思考，舉一反三，將工具跟想法結(jié)合起來(lái)才能達(dá)到效率和質(zhì)量的的最大化。
Library介紹
Library其實(shí)只是一個(gè)普通的Sketch文件，其中包含Symbol，你可以在其他Sketch文件中使用此Symbol。如果您更新Library文件中的任何一個(gè)Symbol，你都會(huì)收到更新通知，利用Library，團(tuán)隊(duì)成員們可以在Sketch文件之間共享Symbol，并使其更新以始終保持同步。
Library使用方法
在設(shè)計(jì)團(tuán)隊(duì)中，多人協(xié)作是必然情況，那么如何保持通用模塊和控件始終保持一致呢？我們只需將Librar文件存放在一個(gè)固定的地方，例如云盤(pán),公司內(nèi)部網(wǎng)盤(pán)等位置，將通用的控件以及模塊存放在其中，然后其他設(shè)計(jì)師就可以輕松調(diào)用啦。然后當(dāng)這個(gè)Librariy件有任何修改，你就可以接收到更新通知。
通常情況下，我們會(huì)將公司產(chǎn)品的設(shè)計(jì)規(guī)范、通用模塊和控件做成Library文件，讓團(tuán)隊(duì)內(nèi)的其他設(shè)計(jì)師進(jìn)行調(diào)用。一般里面包括顏色，圖標(biāo)，文字，還有其他模塊控件等。團(tuán)隊(duì)的設(shè)計(jì)師可以充分利用Library來(lái)讓自己文件里面的Symbol始終保持最新以及和團(tuán)隊(duì)成員保持一致。但是由于Library文件任何設(shè)計(jì)師都可以進(jìn)行編輯，所以我們要將Library進(jìn)行安全的分離，對(duì)Library的編輯只能在特定的位置，特定的文件甚至特定的人進(jìn)行，因此一般不會(huì)有不相關(guān)的編輯，如果一旦不小心無(wú)意進(jìn)行了修改一定要及時(shí)修改回來(lái)，不然團(tuán)隊(duì)內(nèi)的其他設(shè)計(jì)師的文件就會(huì)出問(wèn)題。
下面就分享下如何簡(jiǎn)單的創(chuàng)建一個(gè)Library文件。這里我們以Apple官方的Library文件為例進(jìn)行講解，這里我們選擇將文件存放在堅(jiān)果云里面。詳細(xì)看下圖:
我們將文件存放好之后，打開(kāi)Library添加彈層如下圖：
選擇添AddLibrary按鈕選擇存放在堅(jiān)果云的sketch文件，如下圖:
這樣Library文件已經(jīng)添加成功，我們已經(jīng)可以輕松的訪問(wèn)我們Library里面的控件了。
如果我們的Librar文件有人進(jìn)行了編輯，那我們會(huì)在自己使用Librari文件中收到如下圖一樣的更新提示，我們根可以據(jù)自己的需求選擇是否更新Symbol，如下圖：
是不是很方便高效，這里只寫(xiě)了最簡(jiǎn)單的用法，詳細(xì)的方法呢有興趣的朋友可以私信問(wèn)我或者在官方網(wǎng)站查找，這里不做過(guò)多贅述。另外如何制作一個(gè)相對(duì)合理Library文件，這也是屬于比較重要的內(nèi)容，今天在這里不展開(kāi)講解，有興趣的朋友可以私信我。
通過(guò)上面的流程講解，我們可以看到Library的使用很簡(jiǎn)單，通過(guò)Library可以讓我們團(tuán)隊(duì)協(xié)作的更加順暢，工作效率和工作質(zhì)量會(huì)有很大的提升。設(shè)計(jì)師們?nèi)绻袡C(jī)會(huì)一定要嘗試構(gòu)建Library文件，不論是為個(gè)人還是為團(tuán)隊(duì)都對(duì)自己的整體把控能力有很大的提升。
使用技巧
使用了這么久的sketch,有幾個(gè)好用的小技巧分享給大家：
1.Sketch支持簡(jiǎn)單的數(shù)學(xué)計(jì)算，再也不用在用計(jì)算器了，直接在輸入框內(nèi)就可以計(jì)算，用途廣泛，如下圖所示：
2.在一倍圖0.5px的分割線(xiàn)讓很多設(shè)計(jì)師頭疼，這里利用內(nèi)陰影教大家制作，如下圖所示:
3.默認(rèn)的圖形樣式是可以設(shè)置的，這樣可以更加個(gè)性化，如下圖所示：
4.如何利用圓周率進(jìn)行Loading制作，如下圖所示：
5.如何利用內(nèi)陰影快速制作可復(fù)用表格，如下圖所示:
6.如何測(cè)量組內(nèi)跟組外間距，組內(nèi)量組外間距快捷鍵為：option+?上檔鍵+鼠標(biāo)懸浮，如下圖所示：
7.如何快速查到歷史用色記錄，如下圖所示:
效率拓展
下圖是給大家推薦的11款常用sketch插件和一個(gè)Sketc文件版本管理工具，下面我就依次介紹下這11款插件和1個(gè)軟件。
1、Runner
使用命令行來(lái)提高你的工作效率——http://sketch.im/plugins/12
2、Cfaft
幫你提高效率的自動(dòng)填充神器——http://sketch.im/plugins/16
3、Rename it
快速批量重命名你的圖層——http://sketch.im/plugins/17
4、Remove Unused Symbols
一鍵刪除未使用的 Symbol——http://sketch.im/plugins/48
5、Artboards to PDF
批量導(dǎo)出選定畫(huà)板為多頁(yè) PDF——http://sketch.im/plugins/52
6、ImageOptim
一鍵導(dǎo)出所有切片資源并自動(dòng)優(yōu)化體積——http://sketch.im/plugins/94
7、Sketch Measure
快速創(chuàng)建規(guī)范為開(kāi)發(fā)者和團(tuán)隊(duì)協(xié)作提供方便——http://sketch.im/plugins/1
8、Midnight
增加替換主題功能及小工具——http://sketch.im/plugins/129
9、Flavor
給你的設(shè)計(jì)加點(diǎn)料——http://sketch.im/plugins/89
10、Sketch2AE
輕松導(dǎo)出 Sketch 資源至 AE 并自動(dòng)定位——http://sketch.im/plugins/61
11、Anima可以實(shí)現(xiàn)自動(dòng)布局，——https://www.animaapp.com/#sketchtocode
12、Abstract
Sketch文件版本管理軟件——https://www.goabstract.com/
寫(xiě)在最后，分享的一點(diǎn)想法希望對(duì)諸位有所幫助，如果諸位有好的想法或者意見(jiàn)可以跟我探討。工具只是幫助我們實(shí)現(xiàn)想法的一個(gè)媒介，我們應(yīng)該豐富自己的想法，獨(dú)立思考，與君共勉。??
