如何創(chuàng)建網(wǎng)站或應用程序的樣式指南和標準

時間：2022-05-29 07:27:01 | 來源：網(wǎng)絡營銷

時間：2022-05-29 07:27:01 來源：網(wǎng)絡營銷

一般來說，專業(yè)的設計師在每個項目開始之前就會創(chuàng)建一套網(wǎng)站的設計指南與標準，這樣可以優(yōu)化工作流程，使設計保持統(tǒng)一，是每個嚴謹?shù)脑O計該有的職業(yè)態(tài)度，也是成為專業(yè)設計師的奠基石之一。

為每個項目創(chuàng)建指南(即使它原本沒有)可以優(yōu)化你的工作流程，也能使你的設計保持統(tǒng)一，并有望采取正確的開發(fā)方式，節(jié)省網(wǎng)站制作的時間。

盡管每個設計師的做法不盡相同，但億企邦覺得提前做好一組指南，總是所有項目最重要的起點之一。在此，我就借助億企邦的平臺跟大家分享一下如何創(chuàng)建網(wǎng)站或應用程序的樣式指南和標準：

1、樣式指南

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

億企邦提示：為元素命名，盡管開發(fā)者最終可能會用不同的class名，當談論某個元素時也會非常有用。比如說，你給一個有漸變色導航欄的網(wǎng)站設計了不同主題。說#主配色 - #第二配色總比說這些顏色的名字好。

2、組件文檔

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

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

從上圖中我們可以看出，在設計響應式項目時（具體可查看億企邦的《如何制作一個響應式網(wǎng)頁》相關介紹），將每個元素的“表現(xiàn)”包含進來是有好處的。再說，通常開發(fā)們不會關注這些事情(也不該由他們來關注)。

相信我，若你不強調一下CTA文字在移動端要居中顯示，他們就不會注意。

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

億企邦提示：將組件導出成獨立的.psb文件。這么做有個很大優(yōu)勢，你的客戶決定改稿時，你只需要更新特定的幾個.psb文件，以億企邦的經驗來說，這樣確實很節(jié)省時間。

3、標注文檔

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

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

（1）、分別導出多個頁面用到的組件。

（2）、導出頁面。

（3）、兩種導出方式中，建議都用了多套圖層復合，可以輕松完成導出。

我知道這一切看起來很辛苦，但作為一個專業(yè)的設計師來說（具體可查看億企邦的《如何才能成為品牌型設計師》相關介紹），它確實是至關重要的！

億企邦點評：

對于這套流程不推薦前端開發(fā)的設計師采用，因為這種情況，你需要多做一步，通過代碼寫出的風格指南和組件，創(chuàng)建一個單獨的平臺，你甚至會想在第二步就開始編寫代碼，省去剩余的步驟。

當你想創(chuàng)建一個網(wǎng)站，最好在網(wǎng)頁制作的前期設定好代碼，以符合國際的標準，因為不符合標準的網(wǎng)站無法使用或容易出錯的，標準可以涉及到正確的頁面布局的可讀性，以及確保適當?shù)仃P閉了編碼元素，為以后的網(wǎng)站優(yōu)化和改版做好基礎。