就像廚師大展廚藝之前要備菜一樣，產品設計師在做設計之前也應該把需要的材料都準備好。

在你開始設計一系列畫面之前，進入可持續的設計狀態是很重要的。下面是5個讓你進入設計狀態的技巧：

1.設定字體格式

這件事雖然枯燥，但也得做好不是嗎？因為文字，是用戶了解你產品最直接的途徑，所以將這一步做好很關鍵。

我喜歡在大范圍內挑選字體的尺寸和風格，所以我的字體格式頁看起來是這樣的（我一般還會創建一個暗色主題的）：

這樣做的話，將來改變字體會很快捷：1）全選，2）更改字體，3）同步風格。搞定！

每個主題下包含四種字體格式：

默認格式（通常設定80-100%透明度）

次級格式（50-70%透明度）

不可用格式（20-40%透明度）

強調格式（常常使用品牌色）

為什么我不是改變顏色值而是設定透明度呢？

這個小技巧能讓你的文字在任何背景顏色上看起來都舒服。下圖中，設定了透明度的那行字（第二行）看起來比單純的灰色自然多了，這是因為它融合了背景顏色。第二行文字的顏色并無不同，只是透明度讓它們看起來像不同的顏色。多方便呀～

最后，別忘了將你設定好的字體格式在Sketch中創建為Text Style。如果你日后想要將"不可用格式"的透明度從25%改到30%，你只要改變字體格式中的樣式，這樣文件中運用相同樣式的文字就都改變了。

高級技巧：在字體格式的名字中使用斜杠（看上圖），將會在Insert-Styled Text菜單下創建次級菜單：

2.設定顏色以及對象風格

決定其他東西之前，你要選定5種基準色：

基準色

品牌色：很明顯，這是品牌的顏色。

黑色：選定一種你將在設計中使用的基準黑色。我會避免純黑，取而代之的是加入了少量品牌色的黑色（或者加入互補色）。看下圖：

在你的品牌色上覆蓋上80-90%透明度的黑色。選取這個顏色作為你的基準黑。這是個小細節，卻會產生奇妙的效果。

狀態顏色

錯誤狀態：紅色的變種。這個顏色提示用戶有東西出岔子了。純紅色有點過了，加上少許黃色或藍色讓這個紅色看起來更舒服。

警告狀態：黃色的變種。這個顏色會讓用戶警惕錯誤的發生。別選擇太濃烈的黃，我一般選擇帶點橙色的黃，這樣在白色背景上也能很好的看清。

成功狀態：綠色的變種。這個顏色提示用戶事情進展順利。我喜歡app中的顏色偏冷，所以我會在綠中加一點藍色。

從左到右：品牌色，黑色，錯誤狀態，警告狀態，成功狀態

怎么只有五種顏色呢？因為產品中顏色的選用要十分謹慎，不要沒理由地使用某種顏色。在我的設計中，除非我想讓用戶注意什么東西，否則我會使用大量的黑色和白色。額外的顏色適合于表格或圖片，但請選用你基準顏色之外的顏色。

對象風格

設定這個同樣也是為了節省時間。對象，包括了你app中的任何東西，從卡片背景到列表條目背景。下圖是我的一些對象風格：

每當我設計對象時我就會調用這些。如果我想更新基準樣式，我只需回到這個頁面中就能同步我頁面中所有的樣式了。這真的很節省時間！

3.創建頁面和畫板

這個很簡單，但卻能讓你理清思路。再開始設計前，先決定如何組織你的設計：

按照功能：在食物app中，你也許需要一整頁來存放“食譜”的畫板，另一頁來存放“個人信息”的畫板。

按照用戶角色：在閱讀app中，你也許需要一頁來存放“讀者”的畫板，而另一個頁來存放“投稿者”畫板。

按照工作流：在Uber的app中，你也許用一頁來存放“訂車”這個工作流程，而另一個頁來存放“添加信用卡”的工作流程。

這上面提到的都可以，但要盡早決定，并堅持使用一種。

4.建立你的網格系統和布局

網格系統真的很重要。

這些技巧都是為了讓你做事更簡單，并減少你設計時做決定的次數。設定好網格系統會讓布局和擺放元素變得簡單；你甚至不用考慮元素間的擺放距離，因為網格系統都設定好了。

12列的網格仍是使用最多的一種，因為它可以被最多數整除：1，2，3，4，6和12。

下圖是一個以8px為基準的網格系統設置的例子：

這是個有著懸浮內容區域的全寬度的app。當瀏覽器的寬度增加時，這12列網格依然會待在內容區域的中間。

設置網格系統時需要考慮你app的布局（是平鋪的還是懸浮的），你可能需要為不同布局的頁面分別設定網格系統。

這是個固定寬度（懸浮）的布局結構，有著全寬度的標題欄。

小提示：一般來說，我不設定網格結構中的行，因為每頁的行都在變換。但你可以自由選擇。

5.導入品牌相關要素

就快完成了！深呼吸一下。

最后要做的，是導入所有的品牌相關要素。也許是一個Logo，也許是一系列的品牌標志。重要的是，你要將它們都轉換為Symbol。

想要簡單，讓它們都變成symbol吧！

為什么？

想象一下，你已經設計了75個帶有你的Logo和標語的屏幕。Boss卻決定棄用這句標語，那你該怎么辦？？

好吧，Danny他沒有將Logo轉換為Symbol，所以Danny不得不分別更新這75個頁面。

別學他。

Sandy就聰明多了，她在設計初期就講這些品牌要素轉換成了Symbol。于是分分鐘就能全部換掉這些不用的標語。

學著點呀～

至此，所有的準備工作就完成啦，開始你的設計吧！