就像廚師大展廚藝前要備菜一樣，產品設計師在做設計前，也應該把需要的材料都準備好，設計才會順利快速。Sketch 是現在 UI 設計師最喜愛的繪圖軟體之一，在開始繪製畫面與展開工作流程前，進入”可持續設計”的狀態是很重要的。在此，設計師 Jon Moore 分享給讀者 5 個 Sketch 繪製前要做的事情，協助你進入這個狀態裡：
用 Sketch 設計前要做的五件事情：
1. 設定字體格式
雖然做這件事很枯燥，但其實後來也必須做不是嗎？文字是用戶了解產品最直接的途徑，所以這一步將是關鍵。我喜歡在所有的設定中挑選字體的尺寸和風格，所以我的字體格式頁看起來如下（我通常還會創建一個暗色主題）：
每個主題下包含四種字體格式：
- 預設（通常設定 80-100% 透明度）
- 次級（50-70% 透明度）
- 不可用（20-40% 透明度）
- 強調（常使用品牌色）
為什麼我不是改變顏色值而是設定透明度呢？
這個小技巧能讓文字在任何背景顏色上看起來都舒服。下圖中，第二行設定了透明度，看起來比單純的灰色自然多了，因為它融合了背景的顏色。而我們並不是個別的挑選不同的顏色，只是設定透明度讓它們看起來像不同的顏色，多方便呀～
最後，別忘了將你設定好的字體格式在 Sketch 中創建為 Text Style。如果你日後想要將”不可用格式”的透明度從 25% 改到 30%，你只要改變字體格式中的樣式，這樣文件中所有套用相同樣式的文字都跟著改變。
進階技巧：在字體格式的命名中使用斜線（看上圖），將可在 Insert 的下拉選單 Styled Text 中創建次級的選項：
2. 設定顏色以及風格
決定其他東西之前，你要選定 5 種基準色：
基準色
- 品牌色：如標題，就是品牌的主色。
- 黑色：選定一種你將在設計中使用的標準黑色。我會避免純黑，取而代之的是加入了少量品牌色的黑色（或者加入互補色）。看下圖：
狀態顏色
- 錯誤狀態：紅色系。這個顏色提示使用者有東西出錯了。純紅色可能會有點太搶眼，加上少許黃色或藍色可讓這個紅色看起來更舒服。
- 警告狀態：黃色系。這個顏色會讓使用者警覺可能會有錯誤發生。別選擇太濃烈的黃，我一般選擇帶點橙色的黃，這樣在白色背景上的辨識度也不錯。
- 成功狀態：綠色系。這個顏色提示使用者操作進展順利。我喜歡 app 中的顏色偏冷，所以我會在綠中加一點藍色。
為什麼只設定五種顏色呢？因為產品中顏色的選用要十分謹慎，不要沒理由地使用某種顏色。在我的設計中，除非我想讓用戶注意什麼東西，否則我會使用大量的黑色和白色。額外的顏色適合於表格或圖片，但請選用基準顏色之外的顏色。
風格
設定風格也能節省未來修改的時間。這些元件包括了 app 中的任何東西，從卡片、背景到列表背景等。下圖是我的一些元件風格：
每當我設計對象時我就會調用這些。如果我想更新基準樣式，我只需回到這個頁面中就能同步我頁面中所有的樣式了。這真的很節省時間！
3. 創建頁面（Pages）和畫板（Art Boards）
這步驟很簡單，但卻能讓你理清思路。再開始設計前，先決定如何組織你的設計：
- 依功能：在食物 app 中，你也許需要一整頁來存放 “食譜” 的畫板，另一頁來存放 “個人資訊” 的畫板。
- 依使用者角色：在閱讀 app 中，你也許需要一頁來存放 “讀者” 的畫板，而另一個頁來存放 “投稿者” 畫板。
- 依工作流：在 Uber 的 app 中，你也許用一頁來存放 “叫車” 這個工作流程，而另一個頁來存放 “增加信用卡” 的工作流程。
皆能用上面提到的方式展開，但要儘早決定，並堅持使用一種。
4. 建立你的網格系統和佈局
網格系統真的很重要。
設定好網格系統會讓佈局和擺放元素變得簡單；你甚至不用考慮元素間的擺放距離，因為網格系統都設定好了，只需按造他的規範。
下圖是一個以 8 px 為基準的網格系統設置案例：
設置網格系統時需要考慮介面的佈局（是沿著邊緣移動 edge-to-edge 的還是浮動 floating 的），你可能需要為不同佈局的頁面分別設定網格系統。
額外的好處：開發人員會非常愛你，因為大多前端架構皆使用網格系統。
小提示：一般來說，我不設定網格結構中的行，因為每頁的行都在變換。但如果你想要的話，也是可以的。
5. 導入品牌相關要素
最後要做的，是導入所有的品牌相關要素。也許是一個 Logo，也許是一系列的 icon。重要的是，你要將它們都轉換為 Symbol。
為什麼？
想像一下，你已經設計了 75 個帶有你的 Logo 和標語的 header。但老闆卻臨時換句標語，那你該怎麼辦？好吧，若你沒有將它轉換為 Symbol，那就不得不分別更新這 75 個頁面。設計初期就將這些品牌要素轉換成了 Symbol，修改 Symbol 就能自動修改全部頁面，不用幾分鐘能全部換掉這些不用的標語。
至此，所有的準備工作就完成，開始你的設計吧！
本文章已獲得作者與翻譯者授權，翻譯者：Puddinnng，原文：5 Things to Do Before You Start Your Next Design File in SketchApp , or, Preparing Your Design “mise en place” by Jon Moore，原文出處 medium
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
