就像廚師大展廚藝之前要備菜一樣，產(chǎn)品設(shè)計師在做設(shè)計之前也應(yīng)該把需要的材料都準(zhǔn)備好。

在你開始設(shè)計一系列畫面之前，進(jìn)入可持續(xù)的設(shè)計狀態(tài)是很重要的。下面是5個讓你進(jìn)入設(shè)計狀態(tài)的技巧：

1.設(shè)定字體格式

這件事雖然枯燥，但也得做好不是嗎？因?yàn)槲淖�，是用戶了解你產(chǎn)品最直接的途徑，所以將這一步做好很關(guān)鍵。

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

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

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

默認(rèn)格式（通常設(shè)定80-100%透明度）

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

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

強(qiáng)調(diào)格式（常常使用品牌色）

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

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

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

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

2.設(shè)定顏色以及對象風(fēng)格

決定其他東西之前，你要選定5種基準(zhǔn)色：

基準(zhǔn)色

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

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

在你的品牌色上覆蓋上80-90%透明度的黑色。選取這個顏色作為你的基準(zhǔn)黑。這是個小細(xì)節(jié)，卻會產(chǎn)生奇妙的效果。

狀態(tài)顏色

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

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

成功狀態(tài)：綠色的變種。這個顏色提示用戶事情進(jìn)展順利。我喜歡app中的顏色偏冷，所以我會在綠中加一點(diǎn)藍(lán)色。

從左到右：品牌色，黑色，錯誤狀態(tài)，警告狀態(tài)，成功狀態(tài)

怎么只有五種顏色呢？因?yàn)楫a(chǎn)品中顏色的選用要十分謹(jǐn)慎，不要沒理由地使用某種顏色。在我的設(shè)計中，除非我想讓用戶注意什么東西，否則我會使用大量的黑色和白色。額外的顏色適合于表格或圖片，但請選用你基準(zhǔn)顏色之外的顏色。

對象風(fēng)格

設(shè)定這個同樣也是為了節(jié)省時間。對象，包括了你app中的任何東西，從卡片背景到列表?xiàng)l目背景。下圖是我的一些對象風(fēng)格：

每當(dāng)我設(shè)計對象時我就會調(diào)用這些。如果我想更新基準(zhǔn)樣式，我只需回到這個頁面中就能同步我頁面中所有的樣式了。這真的很節(jié)省時間！

3.創(chuàng)建頁面和畫板

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

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

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

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

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

4.建立你的網(wǎng)格系統(tǒng)和布局

網(wǎng)格系統(tǒng)真的很重要。

這些技巧都是為了讓你做事更簡單，并減少你設(shè)計時做決定的次數(shù)。設(shè)定好網(wǎng)格系統(tǒng)會讓布局和擺放元素變得簡單；你甚至不用考慮元素間的擺放距離，因?yàn)榫W(wǎng)格系統(tǒng)都設(shè)定好了。

12列的網(wǎng)格仍是使用最多的一種，因?yàn)樗�可以被最多�?shù)整除：1，2，3，4，6和12。

下圖是一個以8px為基準(zhǔn)的網(wǎng)格系統(tǒng)設(shè)置的例子：

這是個有著懸浮內(nèi)容區(qū)域的全寬度的app。當(dāng)瀏覽器的寬度增加時，這12列網(wǎng)格依然會待在內(nèi)容區(qū)域的中間。

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

這是個固定寬度（懸�。┑牟季纸Y(jié)構(gòu)，有著全寬度的標(biāo)題欄。

小提示：一般來說，我不設(shè)定網(wǎng)格結(jié)構(gòu)中的行，因?yàn)槊宽摰男卸荚谧儞Q。但你可以自由選擇。

5.導(dǎo)入品牌相關(guān)要素

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

最后要做的，是導(dǎo)入所有的品牌相關(guān)要素。也許是一個Logo，也許是一系列的品牌標(biāo)志。重要的是，你要將它們都轉(zhuǎn)換為Symbol。

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

為什么？

想象一下，你已經(jīng)設(shè)計了75個帶有你的Logo和標(biāo)語的屏幕。Boss卻決定棄用這句標(biāo)語，那你該怎么辦？？

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

別學(xué)他。

Sandy就聰明多了，她在設(shè)計初期就講這些品牌要素轉(zhuǎn)換成了Symbol。于是分分鐘就能全部換掉這些不用的標(biāo)語。

學(xué)著點(diǎn)呀～

至此，所有的準(zhǔn)備工作就完成啦，開始你的設(shè)計吧！