潘燕

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

關(guān)鍵詞： 網(wǎng)頁； 版式設(shè)計； 整體布局； 文字； 圖片； 色彩

中圖分類號：TP393.0 文獻(xiàn)標(biāo)志碼：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 引言

在這網(wǎng)絡(luò)飛速發(fā)展的時代，網(wǎng)頁作為一種重要新媒體，不斷沖擊著大眾的眼球。如何設(shè)計出主題突出、創(chuàng)意新穎、布局合理，界面簡潔美觀的網(wǎng)頁，版式設(shè)計很關(guān)鍵。

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

1 網(wǎng)頁版式設(shè)計的要求

網(wǎng)頁設(shè)計的理念為明確、簡約、藝術(shù)地傳達(dá)多種重要的信息。它的要求具體包括以下幾方面。

1.1 主題突出

首先要明確主題的需求，這是網(wǎng)頁設(shè)計的前提。優(yōu)秀的網(wǎng)頁版式設(shè)計有吸引人的視覺效果，增進(jìn)閱讀者對內(nèi)容的理解，在有限的空間和時間里，更全面、快速地展現(xiàn)網(wǎng)站理念、價值標(biāo)準(zhǔn)等，達(dá)到最佳的宣傳目的。

1.2 體現(xiàn)用戶需求，創(chuàng)意新穎

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

1.3 注重其風(fēng)格

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

1.4 界面整潔，符合視覺習(xí)慣，具有藝術(shù)美感

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

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

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

2 網(wǎng)頁版式設(shè)計的整體布局設(shè)計

網(wǎng)頁版式設(shè)計的整體布局，是要將設(shè)計的多要素，對它進(jìn)行色彩的調(diào)整及結(jié)構(gòu)上的編排[1]。首先，在整個版式或組織結(jié)構(gòu)上應(yīng)用視覺因素原理，抓住界面的視覺中心，將設(shè)計的主體與背景進(jìn)行對比處理，強(qiáng)調(diào)網(wǎng)頁各頁面之間的主從關(guān)系。

2.1 網(wǎng)站類型的定位決定網(wǎng)頁版面設(shè)計的不同要求

網(wǎng)站類型大致分為以下五類[2]。

⑴ 電子商務(wù)類網(wǎng)站

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

⑵ 企業(yè)類網(wǎng)站

該類網(wǎng)頁對版式界面上有較高要求，不但需要準(zhǔn)確地向瀏覽者傳達(dá)網(wǎng)頁的信息，而且需增強(qiáng)企業(yè)的社會影響，樹立企業(yè)的形象。

⑶ 政府類網(wǎng)站

該類型是具有莊重嚴(yán)謹(jǐn)?shù)臋?quán)威網(wǎng)站。它需要在版式設(shè)計上樹立政府的形象，整個界面清楚明了，以行政特色為主。

⑷ 門戶類網(wǎng)站

這種類型的網(wǎng)站信息量大，信息豐富全面。在設(shè)計中要求界面具有親和力，優(yōu)化頁面的結(jié)構(gòu)，讓內(nèi)容上有較強(qiáng)的條理性。

⑸ 形象類網(wǎng)站

如一些廣告主頁或個人主頁。這種類型的網(wǎng)站通過設(shè)計出帶有較強(qiáng)的藝術(shù)美感的界面來使瀏覽者受到感染，它的規(guī)模會比其他類型網(wǎng)站小一些，設(shè)計中要體現(xiàn)個性特點。

2.2 版面布局的選擇[3]

⑴ “廠”字型局

該布局是目前應(yīng)用較廣的一種。它的特征為將廣告語與標(biāo)志放在頁面的最上方，接下來將正文信息放在右邊，主菜單放左邊。這樣設(shè)計雖然能讓人對頁面結(jié)構(gòu)一目了然?？墒撬蠼缑骖伾倪x擇要非常搭配，否則會讓瀏覽者感覺呆板無趣，缺少藝術(shù)性。

⑵ “同”字型布局

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

⑶ “框架”型布局

該類型常為左右型和上下型結(jié)構(gòu)。分為正文信息和導(dǎo)航欄兩塊。也有三欄結(jié)構(gòu)的，廣告圖片放在最上邊，導(dǎo)航欄放在左邊，內(nèi)容放在右邊。

2.3 網(wǎng)頁的版面分割

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

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

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

⑶ 利用色彩的對比關(guān)系來加強(qiáng)色彩對比度。

⑷ 通過美學(xué)的重復(fù)技巧，界面中反復(fù)出現(xiàn)所宣傳的物品的信息，強(qiáng)化宣傳物品的整體形象。

⑸ 將對比與調(diào)和應(yīng)用于網(wǎng)頁中，用調(diào)和來規(guī)劃網(wǎng)頁整體，用對比來營造網(wǎng)頁的局部美感，處理好對比與調(diào)和兩者之間的辯證關(guān)系，避免單調(diào)和重復(fù)感。

3 網(wǎng)頁版式的各重要元素設(shè)計

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

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

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

3.1.1 網(wǎng)頁的標(biāo)題設(shè)計

好的標(biāo)題設(shè)計可以吸引瀏覽者，識記和理解它。標(biāo)題設(shè)計要簡潔明了，體現(xiàn)精髓，體現(xiàn)網(wǎng)頁的整體風(fēng)格。一般在網(wǎng)頁的上方放置標(biāo)題，它可以用大一些的字號，背景可以使用動態(tài)或靜態(tài)的圖片。

3.1.2 文字的編排

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

3.2 網(wǎng)頁版式設(shè)計中圖形的排版

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

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

3.3 網(wǎng)頁版式設(shè)計中色彩的運用

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

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

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

3.3.2 采用特效的配色方法

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

3.3.3 根據(jù)網(wǎng)站類型來選擇配色的方法[4]

⑴ 電子商務(wù)類網(wǎng)站：為了創(chuàng)造有利于商品交易的色彩心理環(huán)境，需要將頁面要營造出舒適、溫馨、的色彩氛圍。

⑵ 公司企業(yè)類：為了讓品牌和頁面設(shè)計能高度溶合，也可以配合企業(yè)品牌來進(jìn)行網(wǎng)頁色彩設(shè)計。

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

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

⑸ 產(chǎn)品類：該網(wǎng)站的頁面可以根據(jù)產(chǎn)品進(jìn)行多樣化的個性設(shè)計，體現(xiàn)獨特品牌特性。

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

4 結(jié)束語

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

參考文獻(xiàn)（References）：

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

2013.

[2] 戴文忠.版式設(shè)計在網(wǎng)頁中的應(yīng)用[J].赤峰學(xué)院學(xué)報，2011.8.

[3] 董海斌.平面視覺元素在網(wǎng)頁設(shè)計中的應(yīng)用研[J].科技信息，

2008.5.

[4] 殷實.以網(wǎng)頁設(shè)計中的版式設(shè)計為例進(jìn)行視覺審美分析[J].

大舞臺，2012.9.

[5] 鄧文達(dá).網(wǎng)頁界面設(shè)計與制作[M].人民郵電出版社，2012.