談網(wǎng)站設(shè)計(jì)的界面美化

摘要：該文從網(wǎng)站的界面設(shè)計(jì)出發(fā)，以視覺(jué)藝術(shù)為理論基礎(chǔ)，從圖形化界面、網(wǎng)站風(fēng)格確立和創(chuàng)意設(shè)計(jì)三個(gè)角度，探索了網(wǎng)站設(shè)計(jì)的內(nèi)在聯(lián)系，認(rèn)為網(wǎng)站的界面設(shè)計(jì)是設(shè)計(jì)藝術(shù)與網(wǎng)絡(luò)技術(shù)的交叉學(xué)科，界面美化是有章可循，可以對(duì)照實(shí)施的。

關(guān)鍵詞：網(wǎng)站設(shè)計(jì)；圖形；風(fēng)格；創(chuàng)意

中圖分類(lèi)號(hào)：TP393文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044(2008)20-30355-03

How to Beautify the Interface in Website Designing

TANG Yi-peng

(Fujian Polytechnic of Information Technology，F(xiàn)uzhou 350003，China)

Abstract:Starting from the website interface designing， this article is to explore the inter-relationships involved in creating a website. With visual arts as the theoretical background， it elaborates on this topic from three angles: graphical interface， establishing the website style and creativeness in designing. It’s thus stated that website interface designing is an interdisciplinary subject between designing arts and network technology and there are rules to follow to beautify the interface.

Key words:website designing;graphics;style;creativeness

本文探討的“網(wǎng)站”是指有確定主題和明確目的的實(shí)用性站點(diǎn)，不包括純表現(xiàn)類(lèi)或者純文字類(lèi)網(wǎng)站。為何說(shuō)網(wǎng)站是“設(shè)計(jì)”而不是“制作”，它們的區(qū)別在于設(shè)計(jì)是一個(gè)思考的過(guò)程，而制作只是將思考的結(jié)果表現(xiàn)出來(lái)。一個(gè)成功的網(wǎng)站首先需要一個(gè)優(yōu)秀的設(shè)計(jì)，然后輔之優(yōu)秀的制作。設(shè)計(jì)是網(wǎng)站的核心和靈魂，一個(gè)相同的設(shè)計(jì)可以有多種制作表現(xiàn)的方式，最終目的就是實(shí)現(xiàn)網(wǎng)站內(nèi)容豐富、詳實(shí)，井然有序，網(wǎng)站風(fēng)格上新穎、獨(dú)特，達(dá)到內(nèi)容與形式和諧統(tǒng)一。

1 引言

網(wǎng)站的界面設(shè)計(jì)是綜合平面設(shè)計(jì)藝術(shù)和網(wǎng)絡(luò)技術(shù)的一門(mén)邊緣學(xué)科，與傳統(tǒng)的平面設(shè)計(jì)在視覺(jué)傳達(dá)方面很大的相似之處，而在技術(shù)實(shí)現(xiàn)方面又是有著很大的區(qū)別。一方面是載體的差異，后者是以平面印刷的形式出現(xiàn)；而前者是通過(guò)顯示器出現(xiàn)的，在傳輸?shù)倪^(guò)程中受到網(wǎng)絡(luò)帶寬的限制，在保持界面清晰的前提下需盡可能的縮小圖像的文件大小。另一方面功能的異同，后者是以向人們傳達(dá)某種信息或訴求為目的；而前者除了擁有前者的功能以外，還有重要的向?qū)Ш玩溄庸δ埽淳W(wǎng)頁(yè)具有很強(qiáng)的可操作性和互動(dòng)性。而動(dòng)靜結(jié)合也是網(wǎng)頁(yè)設(shè)計(jì)的另一重要特色，這點(diǎn)在平面設(shè)計(jì)里是無(wú)法實(shí)現(xiàn)的。

通常，一個(gè)網(wǎng)站在設(shè)計(jì)過(guò)程所應(yīng)考慮的內(nèi)容包括：定位網(wǎng)站主題、名稱(chēng)、色彩，確定欄目和布局，文字編排和插圖的選取；確定導(dǎo)航結(jié)構(gòu)、首屏的設(shè)計(jì)、交互性與親和力，考慮不同的瀏覽器和分辨率，動(dòng)畫(huà)與新技術(shù)的運(yùn)用取舍。歸類(lèi)起來(lái)，網(wǎng)站設(shè)計(jì)包含兩個(gè)方面：一方面是網(wǎng)站元素的設(shè)計(jì)，包括圖文聲像等；另一方面是網(wǎng)站的延伸設(shè)計(jì)，即界面美化。

網(wǎng)站設(shè)計(jì)的界面美化，就是指網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)。網(wǎng)站設(shè)計(jì)包含元素很多，如何把握整體，設(shè)計(jì)富于個(gè)性和諧的網(wǎng)站呢？本文試圖用最簡(jiǎn)明的語(yǔ)言來(lái)說(shuō)明：

(1)圖形化界面是什么？

(2)風(fēng)格是什么，如何樹(shù)立網(wǎng)站風(fēng)格？

(3)創(chuàng)意是什么，如何產(chǎn)生創(chuàng)意？

2 圖形化界面

圖形可以理解為除攝影以外的一切圖和型。圖形以其獨(dú)特的表現(xiàn)力，在版面構(gòu)成中展示著獨(dú)特的視覺(jué)魅力。圖形能夠下意識(shí)地左右主題的傳播效果，圖形往往能引起人們的注意，并激發(fā)瀏覽興趣，圖形給人的視覺(jué)印象要優(yōu)于純粹的文字。

網(wǎng)頁(yè)是風(fēng)格和創(chuàng)意的最終表現(xiàn)舞臺(tái)，是人機(jī)交互界面。無(wú)疑，將網(wǎng)頁(yè)看作是一個(gè)整體的圖形來(lái)

設(shè)計(jì)是很重要的設(shè)計(jì)思路，應(yīng)用穩(wěn)定、比例、節(jié)奏和統(tǒng)一等造型規(guī)律是創(chuàng)造美好形態(tài)的有效途徑[1]。

2.1 圖

圖的視覺(jué)沖擊力比文字大85%。合理地運(yùn)用圖形，可以生動(dòng)、直觀(guān)、形象地表現(xiàn)設(shè)計(jì)主題。一個(gè)好的圖形化界面，使用圖片數(shù)量并非多多益善。一兩幅質(zhì)量高精的圖片，就能形象鮮明突出，一針見(jiàn)血地突出主題。同時(shí)，圖片的面積因素取決于圖片的重要程度。大面積的圖片往往用來(lái)渲染氣氛，可以產(chǎn)生較強(qiáng)的沖擊力。小面積圖片用于幫助和加深讀者的印象。

只有表達(dá)準(zhǔn)確、通俗易懂、簡(jiǎn)潔明快的圖形，才能表現(xiàn)強(qiáng)烈視覺(jué)沖擊力。不要將網(wǎng)頁(yè)的圖片、文字、動(dòng)畫(huà)孤立起來(lái)，要把它有機(jī)地看作一個(gè)視覺(jué)整體，看作是一個(gè)圖形，便于公眾對(duì)網(wǎng)頁(yè)主題的認(rèn)識(shí)、理解與記憶。應(yīng)該注意的問(wèn)題：

(1)要有良好的視覺(jué)吸引力，以吸引讀者的注意力，避免使用過(guò)大的圖像；

(2)與網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格統(tǒng)一，如果不統(tǒng)一，就需要手動(dòng)美化；

(3)插圖中先聲明圖像大小，在IMG標(biāo)簽中插入聲明；

(4)若一定要使用大圖，要有預(yù)覽效果；

(5)盡量少用flash插件；

(6)動(dòng)畫(huà)與內(nèi)容有機(jī)結(jié)合；

(7)動(dòng)畫(huà)或圖像的位移要有方向性。

2.2 符號(hào)

圖形本身是視覺(jué)空間設(shè)計(jì)中的一種符號(hào)形象，它在傳遞網(wǎng)頁(yè)的文化、信息方面起到了不可忽視的作用。在圖形化界面設(shè)計(jì)中，符號(hào)的合理運(yùn)用，將影響著設(shè)計(jì)的形象思維表訴。符號(hào)有助于準(zhǔn)確傳達(dá)信息的隱喻和更豐富地表現(xiàn)對(duì)象。在網(wǎng)頁(yè)中，符號(hào)就象是路標(biāo)，又象是招牌。富于想象力、創(chuàng)造力和超現(xiàn)實(shí)的符號(hào)設(shè)計(jì)，是對(duì)網(wǎng)站內(nèi)涵的最好表達(dá)，是傳遞情感的橋梁，在網(wǎng)頁(yè)界面中發(fā)揮著特有的藝術(shù)魅力。以卡通表情系列為特征的符號(hào)族越來(lái)越受到網(wǎng)民的歡迎，相信大家對(duì)QQ的表情難以釋?xiě)寻伞Ｒ虼耍蔑@網(wǎng)站風(fēng)格莫過(guò)于擁有一套屬于自己的符號(hào)。

2.3 文字

文字的圖形化特征，歷來(lái)是設(shè)計(jì)師們樂(lè)此不疲的創(chuàng)作素材。以圖造字早在上古時(shí)期的甲骨文就開(kāi)始了。至今其文字結(jié)構(gòu)依然符合圖形審美的構(gòu)成原則。文字在網(wǎng)頁(yè)中具有這些特性：適合性、明確性、易讀性、美觀(guān)性和創(chuàng)新性。

文字圖形，就是將文字作為最基本單位的點(diǎn)，線(xiàn)，面出現(xiàn)在版面編排中。使網(wǎng)頁(yè)整體達(dá)到圖文并茂。文字是視覺(jué)上僅次于圖形的部分。在進(jìn)行文字編排時(shí)，把文字面積化，為版面的編排創(chuàng)造緊湊、舒暢等效果，以產(chǎn)生節(jié)奏、韻律和視覺(jué)沖擊力。

文字編排的創(chuàng)意手法：

(1)控制界面的四角和對(duì)角線(xiàn)作為界面文字編排的基本手法，會(huì)使瀏覽者產(chǎn)生種穩(wěn)定、可靠的視覺(jué)感受；

(2)按事先設(shè)定的幾何圖形的輪廓來(lái)編排文字的構(gòu)成，可以使界面形式顯得新穎活潑；

(3)在完整的文字編排形式中安排部分非規(guī)律性造型以形成錯(cuò)落變化，產(chǎn)生特異的效果；

(4)將文字符號(hào)與其他構(gòu)成元素疊加使用，通過(guò)圖文疊加，文字邊緣處理，文字缺損或破裂，增加趣味感；

(5)分離排列，將屬于一個(gè)文字群體的部分字符獨(dú)立出來(lái)加以排列，使界面活潑而富有情趣。

3 確定網(wǎng)站的整體風(fēng)格

網(wǎng)站不僅具有良好的閱讀功能，還需要頁(yè)面整潔、美觀(guān)，最好能有獨(dú)特的吸引視覺(jué)的效果。如果沒(méi)有獨(dú)特的個(gè)性化視覺(jué)設(shè)計(jì)，一個(gè)網(wǎng)站即使在其他方面都考慮周全，也只會(huì)平庸而乏味，缺少良好的欣賞功能。

風(fēng)格是抽象的，是指網(wǎng)站的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的logo，色彩，字體，標(biāo)語(yǔ)，版面布局，瀏覽方式，交互性，文字，語(yǔ)氣，內(nèi)容價(jià)值，存在意義，人文歷史等等諸多因素。舉個(gè)例子：百度是平易近人的，NBA是生動(dòng)激情的，IBM是專(zhuān)業(yè)嚴(yán)肅的。這些都是網(wǎng)站給人們留下的不同感受。

風(fēng)格是獨(dú)特的，是網(wǎng)站互相區(qū)別的地方。或是色彩、或是技術(shù)、或是交互方式，能讓瀏覽者明確分辨出是該網(wǎng)站獨(dú)有的。例如，QQ與MSN即使你只看一眼，也就記住了。

風(fēng)格是有人性的。通過(guò)網(wǎng)站的外表、內(nèi)容、文字、交流可以概括出一個(gè)站點(diǎn)的個(gè)性、情緒。或是溫文儒雅，或是執(zhí)著熱情，或是活潑易變，或是放任不羈。尤如詩(shī)詞中的“豪放派”和“婉約派”。

有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站讓人看到的只是堆砌在一起的信息，只能用理性的感受來(lái)描述，比如信息量大小，瀏覽速度快慢。而當(dāng)你瀏覽過(guò)有風(fēng)格的網(wǎng)站后，能有更深一層的感性認(rèn)識(shí)，比如親和力和品位。

那么風(fēng)格是什么?一句話(huà)：與眾不同！

網(wǎng)站設(shè)計(jì)風(fēng)格總體分為內(nèi)容型和風(fēng)格型兩大類(lèi)。內(nèi)容型結(jié)構(gòu)嚴(yán)謹(jǐn)，內(nèi)容規(guī)范，便于大信息量的傳遞，多為公司企業(yè)、服務(wù)機(jī)構(gòu)等網(wǎng)絡(luò)應(yīng)用；風(fēng)格型網(wǎng)頁(yè)構(gòu)思新穎別致，色彩豐富，平面感覺(jué)強(qiáng)，多為時(shí)尚網(wǎng)站，相關(guān)行業(yè)網(wǎng)站所用。樹(shù)立網(wǎng)站風(fēng)格大致可分幾個(gè)步驟：

首先，確信風(fēng)格是建立在有價(jià)值的內(nèi)容之上，這是前提。沒(méi)有內(nèi)容的網(wǎng)站是沒(méi)有生命力的。

然后，需要徹底搞清楚自己希望站點(diǎn)給人的印象是什么。可以從這幾方面來(lái)理清思路：

(1)如果只用一句話(huà)來(lái)描述你的站點(diǎn)，應(yīng)該是：有創(chuàng)意、專(zhuān)業(yè)、實(shí)力、美感、或是沖擊力？

(2)想到你的站點(diǎn)，可以聯(lián)想到的色彩是：熱情的紅色，幻想的蘭色或是聰明的金黃色？

(3)想到你的站點(diǎn)，可以聯(lián)想到的畫(huà)面是：專(zhuān)柜、超市或是雜貨店？是會(huì)所、車(chē)站或是山居？

(4)如果網(wǎng)站是一個(gè)人，他擁有的個(gè)性是：思想成熟的中年人，狂野奔放的牛仔或是自信憨厚的創(chuàng)業(yè)者？

(5)作為站長(zhǎng)，你希望給人的印象是：敬業(yè)，投入，有深度，負(fù)責(zé)，純真，直爽或是淑女？

(6)瀏覽者覺(jué)得你和其他網(wǎng)站的不同是：可以信賴(lài)，信息最快或是交流方便？

(7)瀏覽者和你交流合作的感受是：師生，同事，朋友或是長(zhǎng)幼？

通過(guò)上述的比較找到網(wǎng)站的定位、受眾群、現(xiàn)在的差距，弱點(diǎn)及需要改進(jìn)的地方。

最后，在明確自己的網(wǎng)站印象后，開(kāi)始努力建立和加強(qiáng)這種印象。

經(jīng)過(guò)第二步印象的“量化”后，需要進(jìn)一步找出其中最有特色特點(diǎn)的東西，就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點(diǎn)強(qiáng)化、宣傳。例如：再次審查網(wǎng)站名稱(chēng)、域名、欄目名稱(chēng)是否符合這種個(gè)性，是否易記。審查網(wǎng)站標(biāo)準(zhǔn)色彩是否容易聯(lián)想到這種特色，是否能體現(xiàn)網(wǎng)站的性格等等。具體的做法，沒(méi)有定式，以下是一些參考[2]：

(1)將網(wǎng)站標(biāo)志logo，盡可能出現(xiàn)在每個(gè)頁(yè)面上；

(2)突出標(biāo)準(zhǔn)色彩。文字的鏈接色彩、圖片的主色彩、背景色、邊框等色彩盡量使用與標(biāo)準(zhǔn)色彩一致的色彩；

(3)突出標(biāo)準(zhǔn)字體。在關(guān)鍵的標(biāo)題、菜單和圖片里使用統(tǒng)一的標(biāo)準(zhǔn)字體；

(4)使用瑯瑯上口的宣傳標(biāo)語(yǔ)，做在圖標(biāo)里或是放在醒目的位置，傳遞網(wǎng)站的特色。

樹(shù)立網(wǎng)站的風(fēng)格還可以從以下幾個(gè)方面入手：

(1)色調(diào)：是活潑還是莊重，是素還是艷；

(2)畫(huà)面：需要考慮是寫(xiě)實(shí)還是寫(xiě)意，是體現(xiàn)專(zhuān)業(yè)性還是大眾化，是為兒童還是為成人；

(3)簡(jiǎn)繁：是追求簡(jiǎn)潔還是花哨，依據(jù)不同性質(zhì)的網(wǎng)站而定。

風(fēng)格的形成不是一次定位的，要在實(shí)踐中不斷強(qiáng)化，調(diào)整，修飾，直到有一天，網(wǎng)站深入人心，成為傳遞公司形象的橋梁。

4 網(wǎng)站創(chuàng)意

創(chuàng)意，在這里指的是站點(diǎn)的整體創(chuàng)意，是網(wǎng)站生存的關(guān)鍵。然而作為網(wǎng)頁(yè)設(shè)計(jì)師，最苦惱的就是沒(méi)有好的創(chuàng)意來(lái)源。

創(chuàng)意到底是什么，如何產(chǎn)生創(chuàng)意呢？實(shí)質(zhì)上，創(chuàng)意是傳達(dá)信息的一種特別方式。

比如文字“武”用兩種顏色書(shū)寫(xiě)，拆成“止”和“戈”，達(dá)到字面和內(nèi)含的統(tǒng)一，這其實(shí)就是一種創(chuàng)意！創(chuàng)意并不是天才者的靈感，而是思考的結(jié)果。根據(jù)美國(guó)廣告學(xué)教授詹姆斯的研究，創(chuàng)意思考的過(guò)程分五階段:

(1)準(zhǔn)備期--研究所搜集的資料，根據(jù)舊經(jīng)驗(yàn)，啟發(fā)新創(chuàng)意；

(2)孵化期--將資料咀嚼消化，使意識(shí)自由發(fā)展，任意結(jié)合；

(3)啟示期--意識(shí)發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意；

(4)驗(yàn)證期--將產(chǎn)生的創(chuàng)意討論修正；

(5)形成期--設(shè)計(jì)制作網(wǎng)頁(yè)，將創(chuàng)意具體化。

創(chuàng)意是圍繞網(wǎng)站的主題，將現(xiàn)有的要素重新組合。

比如，演員、道具和劇本的結(jié)合，產(chǎn)生戲劇。從這一點(diǎn)上出發(fā)，任何人，包括你和我，都可以創(chuàng)造出不同凡響的創(chuàng)意。而且，資料越豐富，越容易產(chǎn)生創(chuàng)意。就好比萬(wàn)花筒，筒內(nèi)的玻璃片越多，所呈現(xiàn)的圖案越多。不難發(fā)現(xiàn)，網(wǎng)絡(luò)上的最多的創(chuàng)意來(lái)自與現(xiàn)實(shí)生活的結(jié)合（或者虛擬現(xiàn)實(shí)），例如在線(xiàn)書(shū)城，社區(qū)，淘寶。你是否想到了一種更好的創(chuàng)意呢？

創(chuàng)意思考的途徑最常用的是聯(lián)想，這里提供了網(wǎng)站創(chuàng)意的14種聯(lián)想表現(xiàn)：直接展示、象征、夸張、幽默、對(duì)比、圖解、比喻、反常、擬人、懸念、改變外觀(guān)、卡通、空間、名人效應(yīng)。具體的創(chuàng)意手段可以是縮放、更換顏色、重復(fù)、發(fā)散、重組、倒置、動(dòng)態(tài)等等。

值得一提的是：創(chuàng)意的目的是更好的表現(xiàn)、宣傳推廣網(wǎng)站。如果創(chuàng)意很好，卻對(duì)網(wǎng)站發(fā)展毫無(wú)意義，好比脫褲子放屁，那么，我們應(yīng)該放棄這個(gè)創(chuàng)意。

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

網(wǎng)站設(shè)計(jì)是集藝術(shù)創(chuàng)意與多媒體技術(shù)于一體的過(guò)程，圖形化界面處理、網(wǎng)站的風(fēng)格把握和創(chuàng)意設(shè)計(jì)是相輔相成的。應(yīng)用形態(tài)美的規(guī)律，對(duì)頁(yè)面元素進(jìn)行綜合設(shè)計(jì)，是產(chǎn)生和諧美的基礎(chǔ)。而一個(gè)唯美、個(gè)性張揚(yáng)的網(wǎng)站設(shè)計(jì)是建立在風(fēng)格獨(dú)特、富有創(chuàng)意和頁(yè)面和諧美的基礎(chǔ)上。通過(guò)本文的分析，不難發(fā)現(xiàn)，網(wǎng)站“設(shè)計(jì)”是有章可循的。

參考文獻(xiàn)：

[1] 藍(lán)先琳.平面構(gòu)成[M].中國(guó)輕工業(yè)出版社，2005:26-35.

[2] 魯曉波.數(shù)字圖形界面藝術(shù)設(shè)計(jì)[M].清華大學(xué)出版社，2006:106.