編者按：專業(yè)的設(shè)計(jì)師在每個(gè)項(xiàng)目開始之前就會(huì)創(chuàng)建一套設(shè)計(jì)指南與標(biāo)準(zhǔn)，如作者所說(shuō)，這樣可以優(yōu)化工作流程，使設(shè)計(jì)保持統(tǒng)一，是每個(gè)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)該有的職業(yè)態(tài)度，也是成為專業(yè)設(shè)計(jì)師的奠基石之一。噢，對(duì)了，文中還推薦了很多實(shí)用方便的利器幫你創(chuàng)建這樣一個(gè)指南呦。

專業(yè)級(jí)好文：
《設(shè)計(jì)師必看！5種實(shí)用APP導(dǎo)航菜單設(shè)計(jì)方案》
《5個(gè)經(jīng)驗(yàn)分享：讓扁平化設(shè)計(jì)也爆發(fā)視覺沖擊力》

@十萬(wàn)個(gè)為什麼?：盡管做法不盡相同，一組指南總是所有項(xiàng)目最重要的起點(diǎn)之一。為每個(gè)項(xiàng)目創(chuàng)建指南（即使它原本沒(méi)有）可以優(yōu)化你的工作流程，也能使你的設(shè)計(jì)保持統(tǒng)一，并有望采取正確的開發(fā)方式。

這的確是設(shè)計(jì)師的責(zé)任。你不能怪開發(fā)者沒(méi)有你那樣的像素眼。你得指導(dǎo)他們。

從創(chuàng)建3種主要類型的文檔開始。

1. 樣式指南
2. 組件文檔
3. 頁(yè)面標(biāo)注

這套流程不推薦兼任前端開發(fā)的設(shè)計(jì)師采用。如果是這種情況，你需要多做一步，通過(guò)代碼寫出的風(fēng)格指南和組件，創(chuàng)建一個(gè)單獨(dú)的平臺(tái)。你甚至?xí)朐诘诙骄烷_始編寫代碼，省去剩余的步驟。

Bootstrap?和Purecss?就是兩個(gè)知名的例子。確實(shí)，它們是完整的前端框架，或許比你正在進(jìn)行的項(xiàng)目更龐大，不過(guò)你應(yīng)該理解了吧？

1. 樣式指南

樣式指南明確了一個(gè)設(shè)計(jì)項(xiàng)目中每個(gè)元素的樣式。它基本上是開發(fā)者最普遍的樣式手冊(cè)。在這個(gè)文檔中，顏色、字體、表格、列表項(xiàng)、圖標(biāo)使用、分隔線和其他元素都有詳盡的定義。一旦你創(chuàng)建好并設(shè)立了每種元素的相應(yīng)規(guī)范，就可以拖放使用了。

*提示：為元素命名。盡管開發(fā)者最終可能會(huì)用不同的class名，當(dāng)談?wù)撃硞€(gè)元素時(shí)也會(huì)非常有用。比如說(shuō)，你給一個(gè)有漸變色導(dǎo)航欄的網(wǎng)站設(shè)計(jì)了不同主題。說(shuō)#主配色?- #第二配色總比說(shuō)這些顏色的名字好。

2. 組件文檔

在許多方面，這個(gè)文檔與樣式指南完全相同，卻是另一個(gè)層次的東西。組件是指類似于登錄框、輪播圖、旋轉(zhuǎn)木馬、頁(yè)頭、頁(yè)尾等等。

這不同于通常意義的樣式指南，這個(gè)文檔有助于在整個(gè)設(shè)計(jì)過(guò)程中保持一致性。它能使開發(fā)者更輕易地辨認(rèn)出重復(fù)的元素，使流程加速。

從上面可以看出，在設(shè)計(jì)響應(yīng)式項(xiàng)目時(shí)，將每個(gè)元素的“表現(xiàn)”包含進(jìn)來(lái)是有好處的。再說(shuō)，通常開發(fā)們不會(huì)關(guān)注這些事情（也不該由他們來(lái)關(guān)注）。

相信我，若你不強(qiáng)調(diào)一下CTA文字在移動(dòng)端要居中顯示，他們就不會(huì)注意。

一旦完成，拖放這些組件，確保從一開始就定下規(guī)范，防止最終樣品陷入無(wú)休無(wú)止的調(diào)整：內(nèi)邊距、顏色和字號(hào)。

*提示：將組件導(dǎo)出成獨(dú)立的.psb文件。這么做有個(gè)很大優(yōu)勢(shì)，你的客戶決定改稿時(shí)，你只需要更新特定的幾個(gè).psb文件。確實(shí)很節(jié)省時(shí)間。

3. 標(biāo)注文檔

最后一步是頁(yè)面標(biāo)注。既然已經(jīng)定好了元素和組件的樣式。唯一剩下的就是引用這些組件，定義外邊距（名稱和間距）。

像下面這樣將其分解真的很有幫助，我們之前把這種方法用在adidas網(wǎng)上商城和同等規(guī)模的平臺(tái)上：

1. 分別導(dǎo)出多個(gè)頁(yè)面用到的組件。
2. 導(dǎo)出頁(yè)面。

兩種導(dǎo)出方式中，我都用了3套圖層復(fù)合，可以輕松完成導(dǎo)出：

• Popup_Normal.jpg
• Popup_Naming.jpg
• Popup_Spacing.jpg

我知道這一切看起來(lái)很辛苦，但作為交互設(shè)計(jì)師，它至關(guān)重要。

所幸，有些很棒的插件可以幫你節(jié)省一些時(shí)間。specKing?就是其中之一。這個(gè)工具可以標(biāo)注之前提到的所有東西，不過(guò)我更愛用它來(lái)標(biāo)注間距和標(biāo)簽。

原文地址：designmodo
譯文地址：colachan
譯者：@十萬(wàn)個(gè)為什麼

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量70萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：