網頁效果圖，又稱頁面效果圖。顧名思義，是一個網頁頁面的圖片表現形式。也就是說，將網頁頁面用圖片的形式表現出來，又稱頁面效果圖。多用於建站前期。
基本介紹
- 中文名：網頁效果圖
- 別稱：又稱頁面效果圖
- 定義：是一個網頁頁面的圖片表現形式
- 布局原則：網頁中圖像和文字之間的位置關係
定義,設計,布局原則,網頁布局分類,
定義
網站製作人員在了解客戶需求之後，要根據客戶需求起草網站策劃書，客戶同意策劃方案後，網站美工要製作出若干張“網頁效果圖”，圖片格式多為.jpg\.psd\.png，用戶選取一張用來做模型，或者根據用戶意見再次修改效果圖，直到用戶滿意。
效果圖設計是網站項目開發中非常重要的一環。通過效果圖，客戶可以把自己想展示的內容以圖像的方式表現出來，因此效果圖設計階段是網站開發中最繁雜、最漫長的階段，往往要占據項目開發時間的三分之一甚至三分之二。
網站前台人員以效果圖為模型，使用Dreamweaver等網頁製作軟體搭建成真正的網站。
設計
我想這是很多人關心的話題。其實設計不同的效果圖方法以及過程均不相同，但以下設計思路可以借鑑！
Step1 客戶需求：主要是聽取客戶關於項目的具體要求。
Step2 網站策劃：明確網站建設目標，收集客戶資料，分析網站類型，確定網站風格。
Step3 繪製效果圖：主要分類三個步驟，一是繪製草圖；二是利用輔助線等技術繪製整體輪廓；三是進行各區域塊的細化。
Step4 客戶審核：在效果圖設計過程中，一定與客戶保持良好的聯繫，最終達到一致。
Step5 切片、最佳化導出
Step6 網頁技術整合階段，利用HTML+CSS+JAVASCRIP及相套用的後台編碼技術完成整個網站的開發。
布局原則
網頁的布局設計，就是指網頁中圖像和文字之間的位置關係，簡單來說也可以稱之為網頁排版，網頁布局設計最重要的就是傳達信息，且使它們組成一個有機的整體，展現給廣大的觀眾。可以依據如下幾條來做：
1．主次分明，中心突出
在一個頁面上，必然考慮視覺中心，這箇中心一般在螢幕的中央，或者在左上的視覺優勢位置。因此一些重要的文章和圖片一般可以安排在這些部位，在視覺中心以外的地方就可以安排那些稍微次要的內容，這樣在頁面上就突出了重點，做到了主次分明。
2．大小搭配，相互呼應。
較長的文章或標題不要編排在一起，要有一定的距離，同樣，較短的文章也不能編排在一起。對待圖片的安排也是這樣，要互相錯開，造成大小之間有一定的間隔，這樣可以使頁面錯落有致，避免重心的偏離。
3．圖文並茂，相得益彰。
文字和圖片具有一種相互補充的視覺關係，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內容。
網頁布局分類
網頁布局大致可分為：骨骼型、滿版型、分割型、對稱型、傾斜型、焦點型、三角型、自由型。下面分別論述。詳例請參照圖片冊。
（1）骨骼型描述：網頁中骨骼型是一種規範、嚴謹的分割方式，也是最為普通和最為常見的一種形式，類似報刊的版式。常見的網頁骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。通常以豎向分欄居多。這種版式給人以和諧、理性的美。
（2）滿版描述：滿版型頁面以圖像充滿整版。主要以圖像為訴求點，可將部分文字置於圖像之上。視覺傳達效果直觀而突出。給人以生動大方人感覺。滿版型版式被各種網站所採用，以學校、娛樂、體育、藝術、兒童以及個性化網頁，其中以韓國網站居多。
（3）分割型描述：分割型版式指把整個頁面分成上下或左右兩部分，分別安排圖片或文字內容。兩部分形成對比，使圖片部分感性而具表現力，文字部分則理性而具說服力。可以調整圖片和文字所占的面積比例，來調節對比強弱。如果圖片比例過大，文字字型過於纖細，段落疏鬆，會造成視覺心理的不平衡，顯得生硬。
（4）中軸或對稱型描述：中軸型版式是將圖片和文字沿瀏覽器視窗的中間軸心位置作水平或垂直方向排列的一種設計方式。沿中軸水平方向排列的頁面可以給人穩定、平靜、含蓄的感覺，沿中軸垂直方向排列的頁面可以給人以舒暢的感覺。採用這種版式設計的網頁比較適合做網站的首頁。
（5）焦點型描述：焦點型的網頁版式通過對瀏覽者視線人誘導，可以使頁面產生強烈的視覺效果，如集聚感或膨脹感等。中心焦點型是將圖片或文字置於頁面的視覺中心。向心焦點型是視覺元素引導瀏覽者人視線向頁面中心聚攏。離心焦點型是視覺元素引導瀏覽者的視線向外輻射。焦點型版式為各類網站使用，以體育、娛樂、動畫網站為多。
（6）傾斜或曲線型描述：傾斜型頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩定感或強烈的動感，引人注目。此類網站版式為各類網站所採用。曲線型網站圖片、文字在頁面上作曲線的分割或編排構成，產生韻律與節奏。此類網站版式為各類網站所採用。
（7）三角型描述：三角型版式是指見面各視覺元素呈三角形或多角形排列。正三角形最具穩定性，倒三角形則可產生動感。側三角形構成一種均衡版式，既安定又有動感。三角形版式為各類網站所採用。
（8）自由型描述：自由型版式人頁面具有活潑、輕快人氣氛。自由型版式也可套用於多種網站。如網路、娛樂、體育、個人、商務等。
以上介紹的版式基本類型並不是固定不變的，在實際設計中，設計師可以根據網頁所要傳達的主題內容來靈活地變化版式。在設計前要認真分析網站的定位，在設計中要靈活把握版式結構，才能更好地達到設計目的。
