原文標題：How to Improve Your UI Design Workflow in Sketch
原文作者：Tom Kershaw
原文鏈接：https://medium.com/@kernism/ui-design-in-sketch-eef33bf3e69b
無意看到一個朋友分享的Sketch使用經(jīng)驗的文章。無奈英語太差看不太懂。只好自己使用翻譯軟件慢慢看◆锶現(xiàn)在分享出來习瑰，作為記錄爽哎，也希望和大家共同進步飞涂。翻譯得比較水，希望諒解在扰。
---------------------------------------------------------------
讓我們?nèi)ビ斡?/h1>
我開始學習游泳的時候是以狗刨姿勢開始的。盡管我努力嘗試并游了4個來回雷客，但是這并不優(yōu)雅芒珠。后來我學習了自由泳，可以輕松的在水中滑行搅裙。同樣皱卓，在設計過程中也有一些提高效率的方法裹芝。
回到2009年，我寫了一篇文章關于如何改善Photoshop工作方法娜汁。我認為嫂易，基于我和團的的項目工作經(jīng)驗為Sketch做同樣的改進也會很有趣。如同大多數(shù)交互設計師掐禁，我現(xiàn)在已經(jīng)用這個軟件完成了數(shù)個項目怜械。最新的版本（Sketch3.3以上）已經(jīng)解決了很多BUG。改進的性能傅事，集成的實用插件缕允，使他成為了我最喜歡的軟件。Sketch幾乎成為了行業(yè)的標準蹭越。
讓工作流更加容易-特別是與團隊合作的時候障本，更多的能量用于解決設計問題，而不是工具本身產(chǎn)生的問題响鹃。
一個主要的Sketch文檔
我們喜歡Sketch的一個主要原因是因為他的專注性（難以置信的快）彼绷。他可以在一個文檔中處理大量的圖形元素。允許我在一個單獨的Sketch文件中將多個畫板（Artboards）全部放在一屏之中茴迁。
Sketch也允許你在一個圖層文件中創(chuàng)建一個獨立的頁面寄悯，但是我發(fā)現(xiàn)在于團隊合作時，子圖層常常被忽視堕义。我決定把子圖層用來放置舊的迭代頁面或者有用的組件猜旬。主圖層用來放置當前所有的設計。Sketch3看得見的提升就在于所有畫板都在一個文件中倦卖。但是如果你的機器很卡洒擦，那么將你的設計分為幾個文件還是比較好，確保你能精心管理文本樣式（Text styles）怕膛、共享樣式（Shared styles）和符號（Symblos）熟嫩。稍后我會解釋。
迭代
當你的設計不斷的迭代褐捻，嘗試新方向的時候掸茅。Sktech可復制畫板和頁面組件的特性，使這一過程變得簡單柠逞。我喜歡把迭代過的頁面放在整個文件的子圖層中昧狮。最新和最重要的迭代以及其他設計組合為主圖層。通常我明確的將這頁命名為“主布局（Master Layout）”
同步你的畫板
當你有了站點圖（Sitemap）板壮，你可以在Sketch文件中將畫板設置為與之相符逗鸣。我喜歡使用數(shù)字來命名我的畫板。例如，我以00_Home做為主頁撒璧，類似還有01_AboutUS透葛，02a_Products.02b_Products等等。
可以使用空白的畫板為要設計的頁面占位卿樱。觀察缺失部分有助于識別出你的設計缺陷僚害，以及幫助你將所有東西契合在一起。當層次結(jié)構改變時殿如，所有一切都很容易拖拽和重新調(diào)整贡珊。最后要記住,保持你畫板也按照左欄層次結(jié)構排序。
圖層結(jié)構
相比用PS做設計涉馁，Sketch做設計更簡潔门岔。基于你的頁面層次結(jié)構來命名你的圖層烤送，群組寒随。想想你的頁面如何用div，用代碼組織帮坚。如果頁面的最頂部有個頭部（Header）妻往，就群組他，確保他在你畫板圖層的頂部试和。一個頁面結(jié)構的例子讯泣，如下：
正確的分組頁面控件和組織他們是和重要的。原因如下：
1.你可以輕松的拖拽和調(diào)整他們位置阅悍。你可能想要測試一個頁面的排版用不同的方式好渠。
2.其他設計師拿到這個文件時，可以快速找到他想要的节视，不用為了找到一個相關的模塊拳锚，查找所有相關圖層。
3.如果你在用Framer Studio做原型寻行，為了引用組件霍掺，你必須保持頁面中每個組件群組在一個圖層中。
4.最后拌蜘，開發(fā)者在構建你的設計時杆烁，會因為你有邏輯的文件而感謝你。
文本樣式拦坠，共享樣式和符號
這些特點令人難以置信的強大和節(jié)約時間，但是如果管理不善贞滨，會非常另人沮喪赂蕴。我所面臨的最常見的問題是宁赤，我們的設計師使用各自獨立的Sketch文件工作，當需要合并他們的設計的時候，命名相同已調(diào)整的或者創(chuàng)建的文字樣式罕扎，符號等會彼此覆蓋造成混淆。你最不情愿的事就是檢查設計來確保字體的正確性或者把UI元素的樣式改為到他本來應該的樣子佛舱。了解了這些掏膏，你就可以有所計劃。在項目剛開始链蕊，你和你團隊成員從不同方向迭代時事甜，先不必使用共享樣式。一旦有了一個明確的方向時滔韵，再創(chuàng)建樣式和符號逻谦，然后將Sketch文檔分發(fā)給你的團隊成員，讓他們以此開始陪蜻。
當創(chuàng)建文本樣式的時候使用一個每個人都認同的命名方式邦马，我最近使用的格式是： - (?, ) - (?, ) - (?, ) - (?, )
<樣式名稱>-<字體名><樣式><大小>(<顏色>,<對齊方式>)
看起來就像這樣：?
H1-Gotham Bold 24px(black,left)
擁有這些信息會幫助我們在項目后確定一個樣式規(guī)范。
Photoshop和Illustrator
許多Photoshop和Illustrator能做的事宴卖，Sketch不能做滋将。如果你想創(chuàng)建一個Illustrator的矢量圖，確保保留所有的錨點（不要斷開）症昏，然后再導入Sketch前随闽，先輸出為SVG格式。這樣做將減少很多Sketch解碼的問題肝谭。
通常我有一個資源文件夾存放我的 Sketch 文件掘宪，包括SVG文件和PNG文件夾。我所有的文件都輸出到這里分苇，并且確保我的 AI和PSD文件隨時可用添诉。我希望 Sketch 能用的一項功能是與外部文件的連接，就如 InDesign ,或者是和一些智能對象文件的連接,如 Creative Cloud 医寿。在此之前栏赴，我們將不得不手動輸出。
在Photoshop里我更喜歡處理圖片效果而不是設計靖秩。在導入Sketch前將圖片縮放到盡可能小是一個好的主意须眷，但是也會造成Sktech文件包含大量的縮小分辨率的圖像，導致文件臃腫沟突。所以不管縮放花颗，剪切還是輸出圖片，保持源文件在你的資源文件夾里惠拭。
開始投入前
最重要的是要記桌┤啊：如果你從項目開始就設計的整潔有組織庸论，在長周期中會節(jié)約你很多時間。也會有助于你們團隊的工作流棒呛。這讓你有更多的時間去創(chuàng)造...或者在沙灘上聂示。
