編者按：專業(yè)的設(shè)計師在每個項目開始之前就會創(chuàng)建一套設(shè)計指南與標(biāo)準(zhǔn)，如作者所說，這樣可以優(yōu)化工作流程，使設(shè)計保持統(tǒng)一，是每個嚴(yán)謹(jǐn)?shù)脑O(shè)計該有的職業(yè)態(tài)度，也是成為專業(yè)設(shè)計師的奠基石之一。噢，對了，文中還推薦了很多實用方便的利器幫你創(chuàng)建這樣一個指南呦。
@十萬個為什麼 ：盡管做法不盡相同，一組指南總是所有項目最重要的起點之一。為每個項目創(chuàng)建指南(即使它原本沒有)可以優(yōu)化你的工作流程，也能使你的設(shè)計保持統(tǒng)一，并有望采取正確的開發(fā)方式。
這的確是設(shè)計師的責(zé)任。你不能怪開發(fā)者沒有你那樣的像素眼。你得指導(dǎo)他們。
從創(chuàng)建3種主要類型的文檔開始。
樣式指南
組件文檔
頁面標(biāo)注
這套流程不推薦兼任前端開發(fā)的設(shè)計師采用。如果是這種情況，你需要多做一步，通過代碼寫出的風(fēng)格指南和組件，創(chuàng)建一個單獨的平臺。你甚至?xí)朐诘诙骄烷_始編寫代碼，省去剩余的步驟。
Bootstrap 和Purecss 就是兩個知名的例子。確實，它們是完整的前端框架，或許比你正在進(jìn)行的項目更龐大，不過你應(yīng)該理解了吧?
1. 樣式指南
樣式指南明確了一個設(shè)計項目中每個元素的樣式。它基本上是開發(fā)者最普遍的樣式手冊。在這個文檔中，顏色、字體、表格、列表項、圖標(biāo)使用、分隔線和其他元素都有詳盡的定義。一旦你創(chuàng)建好并設(shè)立了每種元素的相應(yīng)規(guī)范，就可以拖放使用了。
*提示：為元素命名。盡管開發(fā)者最終可能會用不同的class名，當(dāng)談?wù)撃硞€元素時也會非常有用。比如說，你給一個有漸變色導(dǎo)航欄的網(wǎng)站設(shè)計了不同主題。說#主配色 - #第二配色總比說這些顏色的名字好。
2. 組件文檔
在許多方面，這個文檔與樣式指南完全相同，卻是另一個層次的東西。組件是指類似于登錄框、輪播圖、旋轉(zhuǎn)木馬、頁頭、頁尾等等。
這不同于通常意義的樣式指南，這個文檔有助于在整個設(shè)計過程中保持一致性。它能使開發(fā)者更輕易地辨認(rèn)出重復(fù)的元素，使流程加速。
從上面可以看出，在設(shè)計響應(yīng)式項目時，將每個元素的“表現(xiàn)”包含進(jìn)來是有好處的。再說，通常開發(fā)們不會關(guān)注這些事情(也不該由他們來關(guān)注)。
相信我，若你不強調(diào)一下CTA文字在移動端要居中顯示，他們就不會注意。
一旦完成，拖放這些組件，確保從一開始就定下規(guī)范，防止最終樣品陷入無休無止的調(diào)整：內(nèi)邊距、顏色和字號。
*提示：將組件導(dǎo)出成獨立的.psb文件。這么做有個很大優(yōu)勢，你的客戶決定改稿時，你只需要更新特定的幾個.psb文件。確實很節(jié)省時間。
3. 標(biāo)注文檔
最后一步是頁面標(biāo)注。既然已經(jīng)定好了元素和組件的樣式。唯一剩下的就是引用這些組件，定義外邊距(名稱和間距)。
像下面這樣將其分解真的很有幫助，我們之前把這種方法用在adidas網(wǎng)上商城和同等規(guī)模的平臺上：
分別導(dǎo)出多個頁面用到的組件。
導(dǎo)出頁面。
兩種導(dǎo)出方式中，我都用了3套圖層復(fù)合，可以輕松完成導(dǎo)出：
Popup_Normal.jpg
Popup_Naming.jpg
Popup_Spacing.jpg
我知道這一切看起來很辛苦，但作為交互設(shè)計師，它至關(guān)重要。
所幸，有些很棒的插件可以幫你節(jié)省一些時間。specKing 就是其中之一。這個工具可以標(biāo)注之前提到的所有東西，不過我更愛用它來標(biāo)注間距和標(biāo)簽。
