網(wǎng)頁藝術(shù)設(shè)計(jì)初探

周禮 湖南省株洲市職業(yè)技術(shù)學(xué)院信息工程系 412000

網(wǎng)頁藝術(shù)設(shè)計(jì)初探

周禮 湖南省株洲市職業(yè)技術(shù)學(xué)院信息工程系 412000

從網(wǎng)頁藝術(shù)設(shè)計(jì)中的原則、基礎(chǔ)元素、版式設(shè)計(jì)和優(yōu)秀網(wǎng)頁具備的條件四個(gè)方面，對(duì)網(wǎng)頁藝術(shù)設(shè)計(jì)領(lǐng)域進(jìn)行初步的歸納總結(jié)和理論探討。

網(wǎng)頁藝術(shù);網(wǎng)頁元素;版式

隨著Internet的不斷發(fā)展，網(wǎng)絡(luò)已經(jīng)成為現(xiàn)代社會(huì)必不可少的重要組成部分，而網(wǎng)頁作為信息發(fā)布的載體，人們關(guān)注的不僅僅是它的內(nèi)容，網(wǎng)頁的美觀、生動(dòng)、活潑、個(gè)性等藝術(shù)性方面逐漸成為了關(guān)注的焦點(diǎn)。人們對(duì)網(wǎng)頁的視覺追求的永無止境，也正是推動(dòng)網(wǎng)頁設(shè)計(jì)向前發(fā)展的主要因素。

從發(fā)展趨勢(shì)來看，網(wǎng)頁設(shè)計(jì)會(huì)更加注重創(chuàng)意、個(gè)性和內(nèi)容的高度統(tǒng)一。

一、網(wǎng)頁藝術(shù)設(shè)計(jì)的原則

網(wǎng)頁的藝術(shù)設(shè)計(jì)，是技術(shù)與藝術(shù)的結(jié)合，內(nèi)容與形式的統(tǒng)一。網(wǎng)頁作為傳播信息的一種載體，由于表現(xiàn)形式、運(yùn)行方式和社會(huì)功能的不同，網(wǎng)頁設(shè)計(jì)有其自身的特殊規(guī)律，它要求設(shè)計(jì)者必須掌握以下三個(gè)主要原則：

1、主題鮮明

視覺設(shè)計(jì)表達(dá)的是一定的意圖和要求，有明確的主題，并按照視覺心理規(guī)律和形式將主題主動(dòng)地傳達(dá)給觀賞者。根據(jù)認(rèn)知心理學(xué)的理論，較小而分立的信息要比較長(zhǎng)而不分立的信息更為有效和容易瀏覽。這個(gè)規(guī)律蘊(yùn)含在人們尋找信息和使用信息的實(shí)踐活動(dòng)中，它要求視覺設(shè)計(jì)者的設(shè)計(jì)活動(dòng)必須自覺地掌握和遵從。

2、形式與內(nèi)容統(tǒng)一

一方面，網(wǎng)頁設(shè)計(jì)所追求的形式美，必須適合主題的需要，只講花哨的表現(xiàn)形式以及過于強(qiáng)調(diào)“獨(dú)特的設(shè)計(jì)風(fēng)格”而脫離內(nèi)容，或者只求內(nèi)容而缺乏藝術(shù)的表現(xiàn)，網(wǎng)頁設(shè)計(jì)都會(huì)變得空洞而無力。另一方面，要確保網(wǎng)頁上的每一個(gè)元素都有存在的必要性，不要為了炫耀而使用冗余的技術(shù)。只有通過認(rèn)真設(shè)計(jì)和充分的考慮來實(shí)現(xiàn)全面的功能并體現(xiàn)美感才能實(shí)現(xiàn)形式與內(nèi)容的統(tǒng)一。

3、強(qiáng)調(diào)整體

在設(shè)計(jì)網(wǎng)頁時(shí)，強(qiáng)調(diào)頁面各組成部分的共性因素或者使諸部分共同含有某種形式特征，是求得整體的常用方法。這主要從版式、色彩、風(fēng)格等方面入手。例如：在版式上，將頁面中各視覺要素作通盤考慮，以周密的組織和精確的定位來獲得頁面的秩序感，即使運(yùn)用“散”的結(jié)構(gòu)，也是經(jīng)過深思熟慮之后的決定；一個(gè)站點(diǎn)通常只使用兩到三種標(biāo)準(zhǔn)色，并注意色彩搭配的和諧；對(duì)于分屏的長(zhǎng)頁面，不可設(shè)計(jì)完第一屏再考慮下一屏。同樣，整個(gè)網(wǎng)頁內(nèi)部的頁面，都應(yīng)統(tǒng)一規(guī)劃，統(tǒng)一風(fēng)格，讓瀏覽者體會(huì)到設(shè)計(jì)者完整的設(shè)計(jì)思想。

二、網(wǎng)頁藝術(shù)設(shè)計(jì)的基礎(chǔ)元素

組成網(wǎng)頁信息的基礎(chǔ)元素比較多，總結(jié)包括主要如下：文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、LOGO、音樂、影像等。目前如何將這些元素應(yīng)用到網(wǎng)頁供人們使用已經(jīng)成為了簡(jiǎn)單操作，但是各種元素如何合理的搭配，才能使網(wǎng)頁最具感染力和表現(xiàn)力，就成為了網(wǎng)頁設(shè)計(jì)的重點(diǎn)和人們關(guān)注網(wǎng)頁的首選，對(duì)網(wǎng)頁的藝術(shù)設(shè)計(jì)提出了更高的要求。

1、顏色的設(shè)置

色調(diào)對(duì)網(wǎng)頁具有絕對(duì)性影響。灰色調(diào)配色產(chǎn)生素雅的印象；鮮艷的色調(diào)配色產(chǎn)生健康活潑的印象；鮮艷的紅色給人以活力；柔和的色調(diào)讓人平靜；明色調(diào)則使人心情愉悅。無論色相如何改變，這種基本印象是不會(huì)改變的。選擇了與頁面內(nèi)容不相和諧的色調(diào)，會(huì)傳遞錯(cuò)誤的信息，造成混亂。

2、圖片的設(shè)置

最合適的主題圖片具有強(qiáng)烈的信息性，能在一瞬間讓人了解訪問的網(wǎng)頁是否與印象相同的就是圖片。而其中又以能直接表現(xiàn)標(biāo)題或網(wǎng)頁信息的插圖和照片最有說服力，它能夠使訪問者直接確認(rèn)信息。例如龍、鳳、鶴、龜?shù)燃閳D片表現(xiàn)了喜慶的氣氛，讓人聯(lián)想起新年、豐收、長(zhǎng)壽的形象；現(xiàn)代的花環(huán)、桃心等是眾人皆知的符號(hào)，便于傳達(dá)歡迎的態(tài)度。在打開網(wǎng)頁一瞬間，圖像幾乎與標(biāo)題文字同時(shí)映入眼簾，觀眾對(duì)網(wǎng)頁的印象也就被確定下來。

3、文字的設(shè)置

中文為了保證“方正”的造型，通常僅使用雙數(shù)字號(hào)，比如最常用的12px和14px（少數(shù)字體的13px效果還行），因?yàn)檫@兩種字號(hào)看起來最自然、協(xié)調(diào)。再往上16px,18px,20px也還行，但13px,17px類似的單數(shù)字號(hào)，可以看到效果明顯的鋸齒和失重感。文字大小的對(duì)比也會(huì)左右印象。標(biāo)題文字的大小與正文之比叫做跳動(dòng)率。以正文作為1倍，標(biāo)題的大小用它的倍數(shù)來表示。第一面的大標(biāo)題用大約7～8倍，號(hào)外新聞級(jí)別的則超過了10倍。體育新聞的標(biāo)題經(jīng)常使用10倍以上來構(gòu)成。像這個(gè)例子一樣，跳躍率的高低既表現(xiàn)了報(bào)道的重要等級(jí)，也是表現(xiàn)了熱門的程度。跳動(dòng)率越大，畫面越活躍；反之，越穩(wěn)重。

將標(biāo)題的文字變大，粗細(xì)效果會(huì)加倍。例如，大而粗的文字最有精神。另一方面，將文字變小，粗細(xì)效果會(huì)減弱。雖然細(xì)而小的文字有優(yōu)美的感覺，但如果使用細(xì)而大的文字，效果會(huì)更加明顯?？傊淖衷酱?，越能強(qiáng)化粗細(xì)的印象。

三、網(wǎng)頁藝術(shù)設(shè)計(jì)的版式設(shè)計(jì)

所謂網(wǎng)頁的版式設(shè)計(jì)，是在有限的屏幕空間上將視聽多媒體元素進(jìn)行有機(jī)的排列組合，將理性思維個(gè)性化的表現(xiàn)出來，是一種具有個(gè)人風(fēng)格和藝術(shù)特色的視聽傳達(dá)方式。

網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角形、自由型十種。

1、骨骼型

網(wǎng)頁版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報(bào)刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。這種版式給人以和諧、理性的美。

2、滿版型

頁面以圖像充滿整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。視覺傳達(dá)效果直觀而強(qiáng)烈。滿版型給人以舒展、大方的感覺。

3、分割型

把整個(gè)頁面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜。倘若通過文字或圖片將分割線虛化處理，就會(huì)產(chǎn)生自然和諧的效果。

4、中軸型

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

5、曲線型

圖片、文字在頁面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。

6、傾斜型

頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感，引人注目。

7、對(duì)稱型

對(duì)稱的頁面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。對(duì)稱分為絕對(duì)對(duì)稱和相對(duì)對(duì)稱。一般采用相對(duì)對(duì)稱的手法，以避免呆板。

8、焦點(diǎn)型

焦點(diǎn)型的網(wǎng)頁版式通過對(duì)視線的誘導(dǎo)，使頁面具有強(qiáng)烈的視覺效果。焦點(diǎn)型分三種情況：

（1）中心：以對(duì)比強(qiáng)烈的圖片或文字置于頁面的視覺中心。

（2）向心：視覺元素引導(dǎo)瀏覽者視線向頁面中心聚攏，就形成了一個(gè)向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。

（3）離心：視覺元素引導(dǎo)瀏覽者視線向外輻射，則形成一個(gè)離心的網(wǎng)頁版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運(yùn)用時(shí)應(yīng)注意避免凌亂。

9、三角形

網(wǎng)頁各視覺元素呈三角形排列。正三角形（金字塔形）最具穩(wěn)定性，倒三角形則產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感。

10、自由型

自由型的頁面具有活潑、輕快的風(fēng)格。

目前網(wǎng)頁的布局設(shè)計(jì)越來越簡(jiǎn)單，“簡(jiǎn)單就是美”在一定程度上凸顯，人們的眼睛不用在頁面上轉(zhuǎn)來轉(zhuǎn)去拼命尋找想要的東西，同時(shí)在瀏覽過程中它也提供更加平和、穩(wěn)定的瀏覽體驗(yàn)。內(nèi)容在網(wǎng)頁中心定位，盡可能在“一屏”以內(nèi)顯示更多的信息似乎是一直以來的至理名言。更多的留白和行高也越來越多人應(yīng)用。

四、優(yōu)秀網(wǎng)頁具備的條件

給人留下好印象，讓人賞心悅目的優(yōu)秀網(wǎng)頁一般具備6個(gè)條件。缺少任何一個(gè)都會(huì)使訪問者對(duì)網(wǎng)頁的印象一落千丈，使得初次訪問者不愿再次光臨。

1、標(biāo)題明確

對(duì)于初次訪問網(wǎng)站的讀者來說，首要目的就是確認(rèn)標(biāo)題。那些晦澀難懂的標(biāo)題會(huì)使難得光臨的訪問者感到不知所措。雖然我們以美觀和與眾不同為設(shè)計(jì)日標(biāo)，但如果吸引不了訪問者，這個(gè)網(wǎng)頁的設(shè)計(jì)和建設(shè)也是沒有意義的。過于個(gè)性化的表現(xiàn)，會(huì)使網(wǎng)站內(nèi)容的公開性受到質(zhì)疑。

2、內(nèi)容與主題統(tǒng)一

讓訪問者第一眼就明了表達(dá)的內(nèi)容的網(wǎng)頁才是最優(yōu)秀的。如果訪問者對(duì)信息的種類、是趣味性的網(wǎng)頁還是商業(yè)性的，以及行業(yè)類型等問題能夠一目了然的話，他才能安心地繼續(xù)訪問，對(duì)網(wǎng)頁的好感也會(huì)逐步增強(qiáng)。所以我們運(yùn)用排版樣式、圖像、文字的造型以及配色類型等元素來準(zhǔn)確傳遞信息。

3、導(dǎo)航清晰、準(zhǔn)確

對(duì)于網(wǎng)頁來說，最重要的就是信息內(nèi)容。信息的品質(zhì)與數(shù)量決定了人們對(duì)這個(gè)網(wǎng)頁的評(píng)價(jià)高低。但首先要做到的是，怎樣將讀者順利地引向信息內(nèi)容。明確劃分信息群，不讓讀者產(chǎn)生迷惑，使之迅速找到所需要的信息，是目錄設(shè)計(jì)最重要的任務(wù)。目錄的整理決定了網(wǎng)頁的可讀性。

4、 風(fēng)格統(tǒng)一，整體性好

目前很多頁面做得很花哨，但是非常不實(shí)用，例如采用很深的帶有花哨圖案的圖片作為背景，嚴(yán)重干擾了瀏覽，獲取信息很困難。同時(shí)有些還采用了顏色各異，風(fēng)格不同的圖片、文字、動(dòng)畫，使頁面五彩繽紛。沒有整體感覺，盡管有些頁面內(nèi)容不多，但是瀏覽起來仍然特別困難。

5、 創(chuàng)新性的視覺特色

網(wǎng)頁設(shè)計(jì)中的誤區(qū)就是千篇一律，缺乏自己的特色，當(dāng)我們打開電腦，上網(wǎng)一看，好像哪個(gè)網(wǎng)站都是一樣的。從標(biāo)題的放置，按鈕的編排到動(dòng)畫的采用都是如此。應(yīng)該根據(jù)網(wǎng)站的定位，善于做創(chuàng)新性的視覺設(shè)計(jì)，讓你的設(shè)計(jì)在同類網(wǎng)站中脫穎而出，讓用戶更喜歡。

6、 色彩協(xié)調(diào)

色彩給人心的心里感覺很直接，所以色彩使用要合理且大膽，突顯網(wǎng)站主題與品調(diào)。

時(shí)代在進(jìn)步，技術(shù)在更新，人們的審美觀念也在不斷變化，作為藝術(shù)與技術(shù)高度統(tǒng)一的網(wǎng)頁設(shè)計(jì)將會(huì)對(duì)設(shè)計(jì)人員提出更高的要求與挑戰(zhàn)，網(wǎng)頁藝術(shù)設(shè)計(jì)也將更加具有魅力與多彩。

[1]劉肖冰.淺談網(wǎng)頁藝術(shù)設(shè)計(jì).安陽師范學(xué)院學(xué)報(bào).2005年05期

[2]傅晶.網(wǎng)站設(shè)計(jì)的藝術(shù)性與可用性[A]. 2004年工業(yè)設(shè)計(jì)國(guó)際會(huì)議論文集[C].2004年

[3]朱洪艷.淺談網(wǎng)頁藝術(shù)設(shè)計(jì).中國(guó)校外教育.理論.2008年12期

10.3969/j.issn.1001-8972.2010.12.057

周禮 學(xué)歷：本科 職稱：助講 研究方向：計(jì)算機(jī)。