什么是網頁設計

網頁設計也被稱為Web Design、網站設計、Website design、WUI等。它的本質就是網站的圖形界面設計。

雖然現在我們常使用移動端上的APP來獲取資訊，但是顯然基于個人電腦平臺的網站上網方式陪伴我們的歷史要比手機久很多：從1987年錢天白教授向德國發出第一封電子郵件到2000年搜狐、新浪、網易在美國納斯達克掛牌上市，再到現在網站遍地，中國的網站高速發展了近30年。

在二十多年前，那時的電腦屏幕還非常小，分辨率只有800x600像素，網速也很慢，經常掉線或者加載失敗。那時的網站性能和體驗都不好，而現在網站設計相比過去已經發生了巨大的變化：注重用戶體驗、注重頁面動效、富媒體等設計讓如今的網站體驗并不差。加上個人電腦的普及，網站仍然是人機交互中非常重要的平臺之一。

工作流程

產品經理在畫原型圖之前，一般都需要進行用戶研究、撰寫產品需求文檔、市場文檔、競品調研等工作。

而原型圖階段、視覺稿階段、視覺規范階段、設計規范階段、切圖階段、前端代碼階段、項目走查階段等網站項目流程都與設計師密切相關，每個階段都需要設計師參與了解。

原型圖階段

構建網站原型圖（工具：Axure RP ）

原型圖階段中設計師需要和產品經理溝通需求，這時要注意，并不是產品經理向設計師下發需求，而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現也許設計師會有更好的方式，這時需要在設計之前與產品經理達成一致。

視覺稿階段

這時我們除了收集很多素材之外，也可以設計一個“情緒板”。簡單來說情緒板就是將一些與主題相關的資料和素材拼湊在一起，以更好地指引設計主題和大體感覺。

另外，很多網站的頭部通常需要主視覺來吸引眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，用素材和需求方提供的資料進行混合并拼出讓人感覺震撼的頭部視覺就是我們的目標。

主視覺下的信息排布更強調合理性，這時也需要和產品經理溝通從后臺調取的圖片尺寸、標題字段長度等，然后根據這些要求完成頁面信息部分的設計?？傊?，設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。

設計規范

視覺規范（工具：sketch）

當視覺稿通過后，接下來就需要去寫設計規范。其實每一個可迭代的產品都需要設計師來總結設計規范，設計規范就是所有頁面中共性的東西，比如說字體的大小、圖片的尺寸、按鈕的樣式等運用規范，這些共性也是用戶訪問網站時會理解成固定概念的憑證。

設計規范主要意圖是約束設計師注意在用戶有限的記憶力中減少思考的成本。同時，設計規范也可以保證同一個項目的不同設計師都能輸出一樣風格的設計。

最后，設計規范對于設計師個人來說也是對項目影響的一個佐證，可以證明你的思考和你在項目中的地位。設計規范就是把主要頁面的元素固定成統一元素即可。具體來說一個產品的設計規范應該有：字體規范、圖標規范、主體色規范、圖表規范、圖片規范等不同分類。

切圖

從sketch切圖包中截取的圖（插件：sketch measure）

網頁設計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握PS軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項為前端切出網站所使用的圖片。

但如果設計師是用sketch畫的設計圖，則需要設計師切圖，此時就需要用sketch的插件統一切圖，記得檢查所有的切圖。

前端代碼

前端工程師代碼編譯（工具：Notepad +）

前端工程師會用代碼重構我們設計的頁面，把圖紙變為靜態頁面。然后和后端工程師對接調取數據接口，一個網站就活了起來。

工程師們為了方便了解網站是不是達到了我們要求的數據，也會進行埋點。埋點就是在頁面代碼里插入一些統計代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達到預期。在此后其實還會有軟件測試工程師介入來發現編譯完的網站是否存在一些漏洞等，這里省略。

項目走查

將實現后的截圖和設計稿進行比對（工具：Photoshop）

網頁設計完成后還需要設計師進行項目走查，來確定網頁還原度是否有問題。如果發現有和設計稿出入很大的，就需要要求前端工程師進行調整。這個步驟非常重要，因為網站的成品才是我們最終的輸出，不要認為設計稿很漂亮而實現后的頁面就不需要我們負責了。