網頁效果圖

定義

網站製作人員在了解客戶需求之後，要根據客戶需求起草網站策劃書，客戶同意策劃方案後，網站美工要製作出若干張“網頁效果圖”，圖片格式多為.jpg\.psd\.png，用戶選取一張用來做模型，或者根據用戶意見再次修改效果圖，直到用戶滿意。

效果圖設計是網站項目開發中非常重要的一環。通過效果圖，客戶可以把自己想展示的內容以圖像的方式表現出來，因此效果圖設計階段是網站開發中最繁雜、最漫長的階段，往往要占據項目開發時間的三分之一甚至三分之二。

網站前台人員以效果圖為模型，使用Dreamweaver等網頁製作軟體搭建成真正的網站。

我想這是很多人關心的話題。其實設計不同的效果圖方法以及過程均不相同，但以下設計思路可以借鑑！

Step1 客戶需求：主要是聽取客戶關於項目的具體要求。

Step2 網站策劃：明確網站建設目標，收集客戶資料，分析網站類型，確定網站風格。

Step3 繪製效果圖：主要分類三個步驟，一是繪製草圖；二是利用輔助線等技術繪製整體輪廓；三是進行各區域塊的細化。

Step4 客戶審核：在效果圖設計過程中，一定與客戶保持良好的聯繫，最終達到一致。

Step5 切片、最佳化導出

Step6 網頁技術整合階段，利用HTML+CSS+JAVASCRIP及相套用的後台編碼技術完成整個網站的開發。

網頁的布局設計，就是指網頁中圖像和文字之間的位置關係，簡單來說也可以稱之為網頁排版，網頁布局設計最重要的就是傳達信息，且使它們組成一個有機的整體，展現給廣大的觀眾。可以依據如下幾條來做：

1．主次分明，中心突出

在一個頁面上，必然考慮視覺中心，這箇中心一般在螢幕的中央，或者在左上的視覺優勢位置。因此一些重要的文章和圖片一般可以安排在這些部位，在視覺中心以外的地方就可以安排那些稍微次要的內容，這樣在頁面上就突出了重點，做到了主次分明。

2．大小搭配，相互呼應。

較長的文章或標題不要編排在一起，要有一定的距離，同樣，較短的文章也不能編排在一起。對待圖片的安排也是這樣，要互相錯開，造成大小之間有一定的間隔，這樣可以使頁面錯落有致，避免重心的偏離。

3．圖文並茂，相得益彰。

文字和圖片具有一種相互補充的視覺關係，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內容。

網頁布局大致可分為：骨骼型、滿版型、分割型、對稱型、傾斜型、焦點型、三角型、自由型。下面分別論述。詳例請參照圖片冊。

（1）骨骼型描述：網頁中骨骼型是一種規範、嚴謹的分割方式，也是最為普通和最為常見的一種形式，類似報刊的版式。常見的網頁骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。通常以豎向分欄居多。這種版式給人以和諧、理性的美。