網(wǎng)站建設(shè)成功的第一要素，也就是網(wǎng)頁設(shè)計。合理的網(wǎng)頁設(shè)計制作是一個優(yōu)秀企業(yè)網(wǎng)站的先決條件。因此，在建設(shè)網(wǎng)站前，就要先做好網(wǎng)頁設(shè)計的規(guī)劃。那企業(yè)網(wǎng)站建設(shè)的網(wǎng)頁規(guī)劃，涉及到的內(nèi)容也是非常的多，那究竟網(wǎng)頁設(shè)計的內(nèi)容都有哪些？都包含哪些項目呢？

1.原型圖

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

2.視覺稿

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

3.設(shè)計規(guī)范

當(dāng)視覺稿通過之后，很多設(shè)計師可能不會主動地去做設(shè)計規(guī)范。其實每一個可迭代的產(chǎn)品都需要設(shè)計來總結(jié)設(shè)計規(guī)范，設(shè)計規(guī)范就是所有頁面中共性的東西，比如字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時會理解成固定概念的憑證。比如同樣的分析功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設(shè)計規(guī)范主要也是在約束設(shè)計師我們自己，在用戶有限的記憶力中減少思考的成本。

4.切圖

在網(wǎng)頁設(shè)計的內(nèi)容中，網(wǎng)頁設(shè)計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握PS軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如Cutterman、Zeplin等切圖插件中web選項為前端切除網(wǎng)站所需要使用的圖片。

5.前端代碼

前端工程師會用代碼重構(gòu)我們設(shè)計的頁面，把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對接調(diào)取數(shù)據(jù)接口，一個網(wǎng)站就活了起來。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達到了我們要求的數(shù)據(jù)，也會進行埋點。埋點就是在頁面代碼中插入一些統(tǒng)計代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達到預(yù)期。在此后還會有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。

6.項目走查

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