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

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

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

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

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

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

每個(gè)主題下包含四種字體格式：

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

次級(jí)格式（50-70%透明度）

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

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

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

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

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

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

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

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

基準(zhǔn)色

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

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

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

狀態(tài)顏色

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

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

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

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

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

對(duì)象風(fēng)格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

為什么？

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

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

別學(xué)他。

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

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

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