網(wǎng)頁(yè)的版式設(shè)計(jì)技巧探討

潘燕

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

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

中圖分類號(hào)：TP393.0 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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ā)展的時(shí)代，網(wǎng)頁(yè)作為一種重要新媒體，不斷沖擊著大眾的眼球。如何設(shè)計(jì)出主題突出、創(chuàng)意新穎、布局合理，界面簡(jiǎn)潔美觀的網(wǎng)頁(yè)，版式設(shè)計(jì)很關(guān)鍵。

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

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

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

1.1 主題突出

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

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

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

1.3 注重其風(fēng)格

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

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

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

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

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

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

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

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

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

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

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

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

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

⑶ 政府類網(wǎng)站

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

⑷ 門戶類網(wǎng)站

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

⑸ 形象類網(wǎng)站

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

2.2 版面布局的選擇[3]

⑴ “廠”字型局

該布局是目前應(yīng)用較廣的一種。它的特征為將廣告語(yǔ)與標(biāo)志放在頁(yè)面的最上方，接下來(lái)將正文信息放在右邊，主菜單放左邊。這樣設(shè)計(jì)雖然能讓人對(duì)頁(yè)面結(jié)構(gòu)一目了然。可是它要求界面顏色的選擇要非常搭配，否則會(huì)讓瀏覽者感覺呆板無(wú)趣，缺少藝術(shù)性。

⑵ “同”字型布局

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

⑶ “框架”型布局

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

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

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

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

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

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

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

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

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

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

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

合理運(yùn)用文字能讓界面的信息有序化、條理化。

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

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

3.1.2 文字的編排

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

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

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

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

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

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

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

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

3.3.2 采用特效的配色方法

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

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

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

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

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

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

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

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

4 結(jié)束語(yǔ)

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

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

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

2013.

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

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

2008.5.

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

大舞臺(tái)，2012.9.

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