網頁的版式設計技巧探討

潘燕

摘 要： 要設計出主題突出、創意新穎、布局合理， 界面簡潔美觀的網頁，版式設計起到了至關重要的作用。文章分析、探討了版式設計在網頁中的應用技巧，按照網頁版式設計的要求，先對網頁版式的整體布局進行設計，再對網頁版式的文字、圖片和色彩三大重要元素進行合理規劃，盡可能在有限的版面空間中，將多種視覺元素進行整體排列，運用版式設計的美學原理做出更好的網頁。

關鍵詞： 網頁； 版式設計； 整體布局； 文字； 圖片； 色彩

中圖分類號：TP393.0 文獻標志碼：A 文章編號：1006-8228（2016）10-50-04

Discussion on the layout design skills of web page

Pan Yan

（Fujian Vocational College of Agriculture， Fuzhou， Fujian 350007， China）

Abstract： In order to design a web page of topic-prominent， creative and rational layout， and has simple and beautiful interface， layout design played a crucial role. This paper analyzes the specific application of layout design skills in the web page. According to the requirements of page layout design， the overall layout of web page is designed firstly， then reasonably plans the three important elements of text， picture and color on the page layout， and makes the overall arrangement of a variety of visual elements in a limited space as far as possible， to make the better web pages with the aesthetic principles of layout design.

Key words： Web page； layout design； overall layout； text； picture； color

0 引言

在這網絡飛速發展的時代，網頁作為一種重要新媒體，不斷沖擊著大眾的眼球。如何設計出主題突出、創意新穎、布局合理，界面簡潔美觀的網頁，版式設計很關鍵。

在現代設計中，版式設計被定義為：在有限的版面空間中，將有限的視聽元素進行有規律的排列和組合，它是一種創造性思維活動，是藝術與個人風格的視覺傳遞手段[1]。版式設計在網頁中的應用，是根據主題的需求，利用視覺藝術，將多種視覺元素進行整體排列規劃，向瀏覽者傳遞重要的資訊。它的視覺語言、視覺因素、設計原則、構成形式等，在網頁的整體應用，對深化網頁的整體性、構成性、條理性、藝術性、變化性有著至關重要的作用。

1 網頁版式設計的要求

網頁設計的理念為明確、簡約、藝術地傳達多種重要的信息。它的要求具體包括以下幾方面。

1.1 主題突出

首先要明確主題的需求，這是網頁設計的前提。優秀的網頁版式設計有吸引人的視覺效果，增進閱讀者對內容的理解，在有限的空間和時間里，更全面、快速地展現網站理念、價值標準等，達到最佳的宣傳目的。

1.2 體現用戶需求，創意新穎

網頁設計必須了解用戶的需要，明確設計網站的目標，在進行綜合分析市場的狀況后再制定設計的規劃。鮮明的個性，是版式設計的創意靈魂。在網頁版式規劃過程中既不能過于個性化，大大偏離大眾的“口味”，又必需有自己的特色創新。因此，在設計中要多動腦，多調查，多比較，多設計。

1.3 注重其風格

需注重網頁的風格和功能，不只是簡單追求形式的藝術美。需要契合瀏覽者的感情來設計網頁版式的風格。例如音樂或娛樂類網站，網頁就要設計成輕松快樂的風格；對于軍事類網站，要設計成嚴肅莊重的風格；而對于新聞類網站，要設計成簡捷明快的風格。

1.4 界面整潔，符合視覺習慣，具有藝術美感

有時為了追求網頁的形式美，運用大量的靜態和動態的圖片、音樂、視頻等多媒體元素來修飾頁面，為了在網頁上增加閱讀的信息，甚至在文字排版上運用超出頁面的做法。其后果導致網頁文件的大小超負荷，大大影響大眾瀏覽網站的速度。優秀的版式設計需要兼顧頁面設計和網頁技術，將二者綜合考慮，既要網頁界面簡潔，又要兼顧網頁的整體性。

由于現代人們習慣于從上到下、從左到右的方式閱讀，因此網頁中的版式設計應遵循視覺因素原理，包括視覺的移動規律、視覺的錯視和視覺生理心理等，以使網頁更人性化、更符合瀏覽者需求。視覺的中心為大眾視野沖擊力最強的部分，是版式設計的重點，它能讓信息傳遞得更快。網頁的版式設計要抓住視覺中心，有重點的設計，做到有條理、有主次。一般放在畫面上方或正中間，視覺中心一般都是用強烈的對比色彩，動態的圖片或立體效果來抓住大眾的眼球。

網頁若要設計成具有形式藝術美的界面，則需要溶入版式設計中的美學技巧。美學形式原理有平衡和對稱、統一和變化、整合和分割、留白和虛實等，這些應用能提高設計界面的藝術美。

2 網頁版式設計的整體布局設計

網頁版式設計的整體布局，是要將設計的多要素，對它進行色彩的調整及結構上的編排[1]。首先，在整個版式或組織結構上應用視覺因素原理，抓住界面的視覺中心，將設計的主體與背景進行對比處理，強調網頁各頁面之間的主從關系。

2.1 網站類型的定位決定網頁版面設計的不同要求

網站類型大致分為以下五類[2]。

⑴ 電子商務類網站

該類型是以電商為主的網站，要求有較高的網頁穩定和安全性。該類網頁在版式界面上要設計成簡潔大方，顏色不要多而雜，讓網頁誠信感增強。

⑵ 企業類網站

該類網頁對版式界面上有較高要求，不但需要準確地向瀏覽者傳達網頁的信息，而且需增強企業的社會影響，樹立企業的形象。

⑶ 政府類網站

該類型是具有莊重嚴謹的權威網站。它需要在版式設計上樹立政府的形象，整個界面清楚明了，以行政特色為主。

⑷ 門戶類網站

這種類型的網站信息量大，信息豐富全面。在設計中要求界面具有親和力，優化頁面的結構，讓內容上有較強的條理性。

⑸ 形象類網站

如一些廣告主頁或個人主頁。這種類型的網站通過設計出帶有較強的藝術美感的界面來使瀏覽者受到感染，它的規模會比其他類型網站小一些，設計中要體現個性特點。

2.2 版面布局的選擇[3]

⑴ “廠”字型局

該布局是目前應用較廣的一種。它的特征為將廣告語與標志放在頁面的最上方，接下來將正文信息放在右邊，主菜單放左邊。這樣設計雖然能讓人對頁面結構一目了然。可是它要求界面顏色的選擇要非常搭配，否則會讓瀏覽者感覺呆板無趣，缺少藝術性。

⑵ “同”字型布局

這種布局方式是國內許多中等以上規模的網站會采用的。這種類型的設計常常會將網站的廣告、導航欄及標志放在頁面的頂部。將正文信息放在下方，正文的左右兩邊都設有欄目。將網站的基本信息放置在頁面的底部。這樣設計雖然充分利用了版面的有限空間來放置較大的信息量，可是頁面讓瀏覽者感覺視覺疲憊，缺乏藝術美感。

⑶ “框架”型布局

該類型常為左右型和上下型結構。分為正文信息和導航欄兩塊。也有三欄結構的，廣告圖片放在最上邊，導航欄放在左邊，內容放在右邊。

2.3 網頁的版面分割

運用表格來劃分版面，并細心規劃文字圖片的背景顏色和版面位置。明確導航設計，既要符合網頁瀏覽的習慣又要將界面設計成簡潔美觀的視覺效果。具體做法有以幾點[4]：

⑴ 通過留白和虛實的美學處理技巧，將各視覺元素的周邊留白空間加大。在留白處理上，一般來說大面積留白，可以給人奢華神秘冷清之感，反之面積小的留白，能讓人有熱鬧、歡快、拘束之感。

⑵ 把握好重要及非重要的視覺元素所占比例，使界面主次分明。

⑶ 利用色彩的對比關系來加強色彩對比度。

⑷ 通過美學的重復技巧，界面中反復出現所宣傳的物品的信息，強化宣傳物品的整體形象。

⑸ 將對比與調和應用于網頁中，用調和來規劃網頁整體，用對比來營造網頁的局部美感，處理好對比與調和兩者之間的辯證關系，避免單調和重復感。

3 網頁版式的各重要元素設計

網頁瀏覽者獲得信息的主要視覺元素是文字、圖片和色彩。優秀的設計必需要快速、有效、藝術地向瀏覽者傳遞信息。所以網頁的版式上需要用美學方法來組織和編排各視覺元素，讓界面產生無限的視覺美感。

3.1 視覺元素——文字的排版

合理運用文字能讓界面的信息有序化、條理化。

3.1.1 網頁的標題設計

好的標題設計可以吸引瀏覽者，識記和理解它。標題設計要簡潔明了，體現精髓，體現網頁的整體風格。一般在網頁的上方放置標題，它可以用大一些的字號，背景可以使用動態或靜態的圖片。

3.1.2 文字的編排

版面離不開內容，而傳達內容的重要方式是文字，文字的編排技巧決定了界面的藝術美觀。具體有以下幾種技巧。①字體大小和間距需講究：正文是被瀏覽最多的文字，一般放在頁面的中間部分，字號大小12磅是較適合的。網站域名、標志等重要信息，常被放在頁面左上角，它們需要字號大些顯示，以便瀏覽者識記。注冊號、聲明版權、聯系的方式等資訊可以放在頁腳，字號可以使用小一些的。文字間的距離包括字間距、行間距及段間距。字間距應要比行間距小，要不然瀏覽者分不清到底要豎著還是橫著瀏覽。當字體較小時，為了讓瀏覽者更容易看得清，應當相應將字間距加大。當字體較大時，為了讓版面緊湊，則應當將字間距減小。設置行間距也會影響網頁的閱讀性。一般來說，行間距應以接近字體的大小為宜。②字體的選擇也有技巧：例如字體強壯有力，造型規整，讓人感到簡潔清爽，適合于機械、建筑行業、男性用品等主題的網站；字體高雅細致，讓人感到柔美和秀麗，更適合飾品、化妝品等女性用品及服務行業的網站。對于少兒類型的網站，設計時要考慮到瀏覽者的視覺感受，運用趣味、活潑的字體。③要考慮文字運動的速度：對于網頁這種新媒體，常常有動態的文字，需規劃好文字運動的快慢。為了讓瀏覽者看清識記，文字至少要在網頁中停留2秒鐘。

3.2 網頁版式設計中圖形的排版

在界面設計中只應用文字是不適合瀏覽者長期閱讀的，必需要將圖片與文字巧妙的搭配。一切以可視的圖畫形式為信息載體的視覺形象均稱為圖形，它也是版式設計中重要元素。版式設計中的圓形代表親切、方形代表整齊、梯形代表時尚、滿圖代表全面、出血圖打破約束，退底圖能夠讓主體形象突出。圖形可以超越種族之間的語言、文字差異等因素，視覺沖擊力強，在網頁中合理運用它，能深化網頁條理性，使網頁更具號召力和感染力。雖然圖形優點這么多，但并不是數量越多越好，如資訊類站點、門戶網站訪問量較大，圖片數量過多則會讓瀏覽速度減慢，故圖片數量要求少而精；一些中小型的公司的形象類網站，這類網站設計的主要任務是利用圖形宣傳企業形象，圖形則需要變化多樣[5]。

此外，文字與圖片的比例也要適當，若圖太多，則會影響信息的傳遞。若字太多，則會讓網站的吸引力降低。所以合理的比例應該是字和圖各占一半。

3.3 網頁版式設計中色彩的運用

好的色彩搭配會增強視覺效果，增加網頁的氣氛，方便閱讀。合理運用版式色彩元素能讓網頁主題明確，深化網頁的條理性，讓網頁具有瞬間吸引眼球，影響人的心理、生理狀態的力量。具體可以有以幾種方法。

3.3.1 先確定主體色的配色方法

一個網頁常只會用兩到三種標準顏色，顏色間需要合理搭配。網頁色彩設計需要針對網站的類型，根據主題，充分了解網站的目標定位、規劃。要盡可能用安全色調以確保網頁的適應性。完成整個頁面的配色方案可以先選一種能表現主題的主體色，接下來再根據需要，將主體色近似和對比的顏色挑選出來合理搭配。好的配色頁面應該是一個整體的、和諧、賞心悅目的視覺效果。例如在設計宣揚環境保護類網站時，可以使用代表自然和生命的綠色，這樣比較容易讓瀏覽者產生信賴和共鳴。

3.3.2 采用特效的配色方法

對于需強調的部分或標題，在色彩上可以做些特效處理，挑選對比強烈的顏色。對于正文信息的色彩在設計時需挑選明度較底的柔和顏色，這樣的處理比較適合瀏覽者長時間閱讀。

3.3.3 根據網站類型來選擇配色的方法[4]

⑴ 電子商務類網站：為了創造有利于商品交易的色彩心理環境，需要將頁面要營造出舒適、溫馨、的色彩氛圍。

⑵ 公司企業類：為了讓品牌和頁面設計能高度溶合，也可以配合企業品牌來進行網頁色彩設計。

⑶ 社區學校類：設計成能讓瀏覽者自主選擇的簡潔、明晰、舒適的色彩頁面。

⑷ 門戶類：為了讓瀏覽者更快速的閱讀，頁面上盡量選擇清靜、簡潔的色彩。這種色彩選擇有利于信息的快速讀取。

⑸ 產品類：該網站的頁面可以根據產品進行多樣化的個性設計，體現獨特品牌特性。

⑹ 個人網站、網頁、博客、空間、社區：此類頁面可以根據瀏覽者個人喜好和個性追求來選擇配色的方案。這種設計方式較靈活，具有鮮明的個性特征。

4 結束語

伴隨著時代的腳步，網頁作為一種數字新媒體，越來越沖擊著人們的眼球。為了吸引大眾，如何設計出新穎獨特、界面簡潔美觀，訪問便捷的網頁，版式設計就顯得特別重要了。只有將網頁中的文字、圖形、色彩等視覺元素運用版式設計的技巧進行合理的編排處理，才能設計出生動有趣、視覺沖擊力強的網頁設計作品。本文只是重點探討網頁中靜態元素的版式設計，在未來將著手對網頁中的動態元素，如音頻與視頻、動畫等元素的版式設計進行更好的研究。

參考文獻（References）：

[1] 王青.InDesign從入門到精通[M].清華大學出版社出版，

2013.

[2] 戴文忠.版式設計在網頁中的應用[J].赤峰學院學報，2011.8.

[3] 董海斌.平面視覺元素在網頁設計中的應用研[J].科技信息，

2008.5.

[4] 殷實.以網頁設計中的版式設計為例進行視覺審美分析[J].

大舞臺，2012.9.

[5] 鄧文達.網頁界面設計與制作[M].人民郵電出版社，2012.