原文標題：How to Improve Your UI Design Workflow in Sketch
原文作者：Tom Kershaw
原文鏈接：https://medium.com/@kernism/ui-design-in-sketch-eef33bf3e69b
無意看到一個朋友分享的Sketch使用經驗的文章。無奈英語太差看不太懂。只好自己使用翻譯軟件慢慢看?，F在分享出來，作為記錄，也希望和大家共同進步。翻譯得比較水，希望諒解。
---------------------------------------------------------------
讓我們去游泳
我開始學習游泳的時候是以狗刨姿勢開始的。盡管我努力嘗試并游了4個來回，但是這并不優雅。后來我學習了自由泳，可以輕松的在水中滑行。同樣，在設計過程中也有一些提高效率的方法。
回到2009年，我寫了一篇文章關于如何改善Photoshop工作方法。我認為，基于我和團的的項目工作經驗為Sketch做同樣的改進也會很有趣。如同大多數交互設計師，我現在已經用這個軟件完成了數個項目。最新的版本（Sketch3.3以上）已經解決了很多BUG。改進的性能，集成的實用插件，使他成為了我最喜歡的軟件。Sketch幾乎成為了行業的標準。
讓工作流更加容易-特別是與團隊合作的時候，更多的能量用于解決設計問題，而不是工具本身產生的問題。
一個主要的Sketch文檔
我們喜歡Sketch的一個主要原因是因為他的專注性（難以置信的快）。他可以在一個文檔中處理大量的圖形元素。允許我在一個單獨的Sketch文件中將多個畫板（Artboards）全部放在一屏之中。
Sketch也允許你在一個圖層文件中創建一個獨立的頁面，但是我發現在于團隊合作時，子圖層常常被忽視。我決定把子圖層用來放置舊的迭代頁面或者有用的組件。主圖層用來放置當前所有的設計。Sketch3看得見的提升就在于所有畫板都在一個文件中。但是如果你的機器很卡，那么將你的設計分為幾個文件還是比較好，確保你能精心管理文本樣式（Text styles）、共享樣式（Shared styles）和符號（Symblos）。稍后我會解釋。
迭代
當你的設計不斷的迭代，嘗試新方向的時候。Sktech可復制畫板和頁面組件的特性，使這一過程變得簡單。我喜歡把迭代過的頁面放在整個文件的子圖層中。最新和最重要的迭代以及其他設計組合為主圖層。通常我明確的將這頁命名為“主布局（Master Layout）”
同步你的畫板
當你有了站點圖（Sitemap），你可以在Sketch文件中將畫板設置為與之相符。我喜歡使用數字來命名我的畫板。例如，我以00_Home做為主頁，類似還有01_AboutUS，02a_Products.02b_Products等等。
可以使用空白的畫板為要設計的頁面占位。觀察缺失部分有助于識別出你的設計缺陷，以及幫助你將所有東西契合在一起。當層次結構改變時，所有一切都很容易拖拽和重新調整。最后要記住,保持你畫板也按照左欄層次結構排序。
圖層結構
相比用PS做設計，Sketch做設計更簡潔?；谀愕捻撁鎸哟谓Y構來命名你的圖層，群組。想想你的頁面如何用div，用代碼組織。如果頁面的最頂部有個頭部（Header），就群組他，確保他在你畫板圖層的頂部。一個頁面結構的例子，如下：
正確的分組頁面控件和組織他們是和重要的。原因如下：
1.你可以輕松的拖拽和調整他們位置。你可能想要測試一個頁面的排版用不同的方式。
2.其他設計師拿到這個文件時，可以快速找到他想要的，不用為了找到一個相關的模塊，查找所有相關圖層。
3.如果你在用Framer Studio做原型，為了引用組件，你必須保持頁面中每個組件群組在一個圖層中。
4.最后，開發者在構建你的設計時，會因為你有邏輯的文件而感謝你。
文本樣式，共享樣式和符號
這些特點令人難以置信的強大和節約時間，但是如果管理不善，會非常另人沮喪。我所面臨的最常見的問題是，我們的設計師使用各自獨立的Sketch文件工作，當需要合并他們的設計的時候，命名相同已調整的或者創建的文字樣式，符號等會彼此覆蓋造成混淆。你最不情愿的事就是檢查設計來確保字體的正確性或者把UI元素的樣式改為到他本來應該的樣子。了解了這些，你就可以有所計劃。在項目剛開始，你和你團隊成員從不同方向迭代時，先不必使用共享樣式。一旦有了一個明確的方向時，再創建樣式和符號，然后將Sketch文檔分發給你的團隊成員，讓他們以此開始。
當創建文本樣式的時候使用一個每個人都認同的命名方式，我最近使用的格式是： - (?, ) - (?, ) - (?, ) - (?, )
<樣式名稱>-<字體名><樣式><大小>(<顏色>,<對齊方式>)
看起來就像這樣：?
H1-Gotham Bold 24px(black,left)
擁有這些信息會幫助我們在項目后確定一個樣式規范。
Photoshop和Illustrator
許多Photoshop和Illustrator能做的事，Sketch不能做。如果你想創建一個Illustrator的矢量圖，確保保留所有的錨點（不要斷開），然后再導入Sketch前，先輸出為SVG格式。這樣做將減少很多Sketch解碼的問題。
通常我有一個資源文件夾存放我的 Sketch 文件，包括SVG文件和PNG文件夾。我所有的文件都輸出到這里，并且確保我的 AI和PSD文件隨時可用。我希望 Sketch 能用的一項功能是與外部文件的連接，就如 InDesign ,或者是和一些智能對象文件的連接,如 Creative Cloud 。在此之前，我們將不得不手動輸出。
在Photoshop里我更喜歡處理圖片效果而不是設計。在導入Sketch前將圖片縮放到盡可能小是一個好的主意，但是也會造成Sktech文件包含大量的縮小分辨率的圖像，導致文件臃腫。所以不管縮放，剪切還是輸出圖片，保持源文件在你的資源文件夾里。
開始投入前
最重要的是要記?。喝绻銖捻椖块_始就設計的整潔有組織，在長周期中會節約你很多時間。也會有助于你們團隊的工作流。這讓你有更多的時間去創造...或者在沙灘上。
