工作流程首先讓我們來看一下網(wǎng)站設計的工作流程，除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場文檔、做競品調(diào)研等工作之外，與設計師密切相關(guān)的網(wǎng)站項目流程可以分為：原型圖階段、視覺稿階段、設計規(guī)范階段、切圖階段、前端代碼階段、項目走查階段六個階段。

每個階段都需要設計師參與和了解，千萬不要只在意視覺稿這個階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個一個來了解它們吧。

1.原型圖階段原型圖階段中設計師需要和產(chǎn)品經(jīng)理溝通需求，這時要注意，并不是產(chǎn)品經(jīng)理向設計師下發(fā)需求，而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現(xiàn)也許設計師會有更好的方式，這時需要在設計之前與產(chǎn)品經(jīng)理達成一致。構(gòu)建網(wǎng)站原型圖（工具：AxureRP）

2.視覺稿階段視覺稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式，完成網(wǎng)站的界面設計。在設計網(wǎng)站的時候，我們需要一些圖像和靈感的素材。比如：做世界杯專題時，我們除了收集很多素材之外，也可以設計一個“情緒板”（MoodBoard）。簡單說情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起，這樣可以更好地指引我們整個需求的設計主題和大體感覺。另外，很多網(wǎng)站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進行混合，并拼出讓人覺得震撼的頭部視覺，就是我們的目標了。主視覺下面的信息排布更強調(diào)合理性，這時也需要和產(chǎn)品經(jīng)理溝通從后臺調(diào)取的圖片尺寸、標題字段長度等，然后根據(jù)這些要求完成頁面信息部分的設計。總之，設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。視覺稿設計階段（工具：Photoshop）

3.設計規(guī)范當視覺稿通過后，很多設計師可能不會主動去做設計規(guī)范。其實每一個可迭代的產(chǎn)品都需要設計師來總結(jié)設計規(guī)范，設計規(guī)范就是所有頁面中共性的東西，比如說：字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時會理解成固定概念的憑證。比如：同樣的分享功能，如果采用兩種截然不同的樣式，就會讓用戶困惑。那么設計規(guī)范主要也是在約束設計師我們自己，在用戶有限的記憶力中減少思考的成本。同時，設計規(guī)范也可以保證同一個項目的不同設計師都能輸出一樣風格的設計來。最后，設計規(guī)范對于設計師個人來說也是對項目影響的一個佐證，可以證明你的思考和你在項目中的地位，所以我認為設計師應該主動去做設計規(guī)范和項目總結(jié)。設計規(guī)范如何去做？其實設計規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可，具體來說一個產(chǎn)品的設計規(guī)范應該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。