網頁的版式設計

網頁的版式設計

發佈日期：2007年10月16日  來源：網摘

 除了文本之外，網頁上最重要的設計元素莫過於圖像了。一方面，圖像的應用使網頁更加美觀、有趣；另一方面，圖像本身也是傳達信息的重要手段之一。與文字相比，它直觀、生動，可以很容易地把那些文字無法表達的信息表達出來，易於瀏覽者理解和接受。

1.圖像的格式
　　Web通常使用兩種圖像格式：GIF和JPEG。除此以外，還有兩種適合網絡傳播但沒有被廣泛應用的圖像格式：PNG和MNG。

2.圖像的形式
　　同印刷排版一樣，靜態圖像在網頁排版中的運用不外乎四種形式：方形圖、退底圖、出血圖以及這三種形式的結合使用。

　（1）方形圖　即圖形以直線邊框來規範和限制，是一種最常見、最簡潔、最單純的形態。方形圖使圖像內容更突出且將主體形象與環境共融，可以完整地傳達主題思想，富有感染性。配置方形圖的頁面，給人以穩重、可信、嚴謹、理性、莊重和安靜等感覺，但有時也顯得平淡、呆板。

　（2）退底圖　將圖像中的背景去掉，只留下主題形象。退底圖形自由而突出，更具有個性，因而給人印象深刻。配置退底圖的頁面，輕鬆、活潑，動態十足，而且圖文結合自然，給人以親和感。但也容易造成凌亂和不整體的感覺。

　（3）出血圖　圖像的一邊或幾個邊充滿頁面，有向外擴張和舒展之勢。一般用於傳達抒情或運動信息的頁面，因不受邊框限制，感覺上與人更加接近，便於情感與動感的發揮。

3.圖像的編排

　 （1）四角與中軸四點結構
　　頁面的四個角與對角線、中軸四點及水平與垂直的中軸線，具有支配頁面結構的作用。

　　四角是頁面邊界相交形成的四個點，把四角連接起來的斜線即對角線，交叉點爲頁面中心。中軸四點指經過頁面中心的垂直線和水平線的端點。這四個點可上、下、左、右移動。

　　通過四角與中軸四點結構的不同組合、變化，可以求得多樣的頁面結構。在圖像排版時緊緊抓住這八個點，可以突出網頁的形式美感，網頁的版式設計、視覺流程的籌劃也得到相應簡化。
　 （2）塊狀組合與散點組合結構
　　塊狀組合，即通過水平、垂直線分割，將多幅圖像在頁面上整齊有序地排列成塊狀，這種結構具有強烈的整體感和秩序美感。各幅圖像相互自由疊置或分類疊置而構成的塊狀組合，具有輕快、活潑的特性，同時也不失整體感。

　　散點組合，即圖像分散排列在頁面各個部位，具有自由、輕快的感覺。採用這種結構應注意圖像的大小、主次，以及方形圖、退底圖和出血圖的配置，同時還應考慮疏密、均衡、視覺流程等。

4.圖像的處理

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

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

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

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

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

　 （3）圖像的數量

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

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

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