身為UI設計師，我們就必需掌握網站設計的規范和理解網站運行的原理，才能更好地把握這個平臺。那本文就跟大家好好說說關于網頁設計的那些事兒~

網頁設計是什么？

網頁設計也被稱為Web Design、網站設計、Website design、WUI等。它的本質就是網站的圖形界面設計。雖然現在我們常使用移動端上的APP來獲取資訊，但是顯然基于個人電腦平臺的網站上網方式陪伴我們的歷史要比手機久很多。

從 1987 年錢天白教授向德國發出第一封電子郵件到 2000 年搜狐、新浪、網易在美國納斯達克掛牌上市，再到現在網站遍地。中國的網站高速發展了近三十年。

我是在小學開始去網吧“上網沖浪”的，那時的電腦屏幕非常小，分辨率只有800× 600 像素（對比一下，iPhone8 的分辨率是750x1334px），網速也很慢，經常掉線或者加載失敗。

那時的網站性能和體驗都不好，而現在網站設計和過去已經有了巨大的變化——注重用戶體驗、注重頁面動效、富媒體等設計讓如今的網站體驗并不比軟件和手機APP差。加上個人電腦的普及，網站仍然是人機交互中非常重要的平臺之一。

那么作為UI設計師我們就必需掌握網站設計的規范和理解網站運行的原理，才能更好地把握這個平臺。

今天就向您好好說道一下網站必需懂得的那些事兒。

工作流程

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

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

好，讓我們一個一個來了解它們吧。

1. 原型圖階段

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

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

2. 視覺稿階段

視覺稿階段就是我們要按照原型圖確定的內容和大體版式，完成網站的界面設計。在設計網站的時候，我們需要一些圖像和靈感的素材。比如：做世界杯專題時，我們除了收集很多素材之外，也可以設計一個“情緒板”（Mood Board）。

簡單說情緒板就是將一些與主題相關的資料和素材拼貼在一起，這樣可以更好地指引我們整個需求的設計主題和大體感覺。別的，很多網站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進行混合，并拼出讓人覺得震撼的頭部視覺，就是我們的目標了。

主視覺下面的信息排布更強調合理性，這時也需要和產品經理溝通從后臺調取的圖片尺寸、標題字段長度等，然后按照這些要求完成頁面信息部分的設計。

總之，設計過程中需要我們不竭考慮和溝通才可以完成一個比力棒的視覺稿。

視覺稿設計階段（工具：Photoshop）

3. 設計規范

當視覺稿通過后，很多設計師可能不會主動去做設計規范。其實每一個可迭代的產品都需要設計師來總結設計規范，設計規范就是所有頁面中共性的東西，比如說：字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶拜候網站時會理解成固定概念的憑證。比如：同樣的分享功能，如果采用兩種截然不同的樣式，就會讓用戶困惑。

那么設計規范主要也是在約束設計師我們本身，在用戶有限的記憶力中減少考慮的成本。同時，設計規范也可以包管同一個項目的不同設計師都能輸出一樣風格的設計來。

最后，設計規范對于設計師個人來說也是對項目影響的一個佐證，可以證明你的考慮和你在項目中的地位，所以我認為設計師應該主動去做設計規范和項目總結。

設計規范如何去做？

其實設計規范就是把主要頁面的元素固定成統一元素即可，具體來說一個產品的設計規范應該有：字體規范、主體色規范、圖表規范、圖片規范等不同分類。

視覺規范（工具：Photoshop）

4. 切圖

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