網頁的版式設計

　　圖像的處理

　　圖像的外形、大小、數量以及與背景的關系，都與內容有著密切的聯系。

　　(1)圖像的外形處理

　　圖像的外形能使頁面的氣氛發生變化，並直接影響浏覽者的興趣。一般而言，方形的穩定、嚴肅，三角形的銳利，圓形或曲線外形的柔軟親切，退底圖及一些不規則或不帶邊框的圖像活潑。

　　(2)圖像的面積

　　圖像在網頁中占據的面積大小能直接顯示其重要程度。一般地，大圖像容易形成視覺焦點，感染力強，傳達的情感較為強烈;小圖像常用來穿插在字群中，顯得簡潔而精致，有點綴和呼應頁面主題的作用。在一個頁面中，如果只有大圖像而無小圖像或細密的文字，就會顯得空洞，但只有小圖像而無大圖像又使頁面缺乏視覺沖擊力。

　　圖像的大小不僅決定著主從關系，也控制著頁面的均衡與運動。大小對比強烈，給人跳躍感，使主角更突出;大小對比減弱，則頁面穩定、安靜。這是因為，訪問者在浏覽頁面時，首先會注意到大圖像，然後再看到較小的圖像，這種由大到小的引導，使浏覽者的視線在頁面上流動，便造成一種動勢，使頁面活潑起來。

　　因此，在網頁設計時，應首先確定主要形象與次要形象，擴大主要圖像的面積，使次要角色縮小到從屬地位。只有大小圖像主次得當地穿插組合，才能構成最佳的頁面視覺效果

 

　　作為主體的人物形象，既突出了大小對比又增強了頁面的親和力

　　3)圖像的數量

　　圖像的數量是根據內容決定的。只用一幅圖像，會使內容突出、頁面安定。增加一幅圖像，頁面會因為有了對比和呼應而活躍起來。再增加一幅，則更加熱鬧、活潑。但是，限於目前網絡的傳輸速度，使用圖像時一定要謹慎，大的圖像會降低頁面顯示速度，即使是小圖像，如果運用數量過多，同樣會使頁面下載速度變慢。隨著網絡環境及技術條件的改善，這種情況已經有了很大的改觀。

　　(4)與背景的關系

　　網頁圖像與背景是對比和統一的關系。也就是說，圖像與背景在和諧統一的基礎上，應存在一定的對比，以使主要圖像更加突出。如精密的相機鏡頭以粗糙的巖石為背景，明亮的文字以深邃的星空為背景，或者使用沒有背景及陪襯物的退底圖像，周圍留出大面積空白，都是利用對比對主體形象起到突出作用。

　　5.圖像在長頁面中的應用

　　網頁一般都是縱向的(也有特意設計成橫向滾屏的)，其長度從一屏到三屏不等，有時甚至更多。訪問者在浏覽頁面時，通過拖動垂直滾動條使網頁一屏一屏地顯示，但這並不意味著我們可以將整個頁面分割開來，孤立地進行每一屏的設計。頁面的整體感是建立在形象的啟承關系上，盡管頁面被分割成幾屏來顯示，但圖像或文字的延續性應使浏覽者得到完整、統一的視覺感受。設計者所要做的就是進行通盤考慮，例如：尋找對比中的和諧、建立同一的視覺識別等，來處理好每一屏與整個頁面的關系

　　作為主體的人物形象，既突出了大小對比又增強了頁面的親和力

　　三、版式的基本類型

　　網頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。

　　1.骨骼型

　　網頁版式的骨骼型是一種規范的、理性的分割方法，類似於報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用，既理性、條理，又活潑而富有彈性

　　綜合運用多種分欄形式

　　2.滿版型

　　頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置於圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網頁設計中的運用越來越多

　　四邊出血，向外擴張，適合年輕人的口味

　　3.分割型

　　把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜。可以調整圖片和文案所占的面積，來調節對比的強弱。例如：如果圖片所占比例過大，文案使用的字體過於纖細，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產生自然和諧的效果

 

　　分割線上的壓置的圖片既打破了頁面分割的生硬感，也使自身得到強調。左邊框上的小標簽乃點睛之筆

　　4.中軸型

　　沿浏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺

　　不易覺察的中軸型版式，給人以輕快之感

　　5.曲線型

　　圖片、文字在頁面上作曲線的分割或編排構成，產生韻律與節奏

 

　　網站的導航標題沿圖形弧線排列

　　6.傾斜型

　　頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩定感或強烈的動感，引人注目

　　文字水平排列，將畫框斜置，產生對比與動勢，印象被加強

　　7.對稱型

　　對稱的頁面給人穩定、嚴謹、莊重、理性的感受。

　　對稱分為絕對對稱和相對對稱。一般采用相對對稱的手法，以避免呆板。左右對稱的頁面版式比較常見。

　　四角型也是對稱型的一種，是在頁面四角安排相應的視覺元素。四個角是頁面的邊界點，重要性不可低估。在四個角安排的任何內容都能產生安定感。控制好頁面的四個角，也就控制了頁面的空間。越是凌亂的頁面，越要注意對四個角的控制

　　以相對對稱手法制作的導航頁面

　　8.焦點型

　　焦點型的網頁版式通過對視線的誘導，使頁面具有強烈的視覺效果。焦點型分三種情況

　　通過離心的版式，清晰地傳達出網站提供的服務

　　(1)中心　以對比強烈的圖片或文字置於頁面的視覺中心。

　　(2)向心　視覺元素引導浏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩定的，是一種傳統的手法。

　　(3)離心　視覺元素引導浏覽者視線向外輻射，則形成一個離心的網頁版式。離心版式是外向的、活潑的，更具現代感，運用時應注意避免凌亂。

　　9.三角型

　　網頁各視覺元素呈三角形排列。正三角形(金字塔型)最具穩定性，倒三角形則產生動感。側三角形構成一種均衡版式，既安定又有動感

　　整體看為正三角形的構圖，主體形象穩定而突出

　　10.自由型

　　自由型的頁面具有活潑、輕快的風格

　　引導視線的圖片以散點構成，傳達隨意、輕松的氣氛