美學(xué)原理在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

1、美學(xué)原理在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用唐一鵬（福建信息職業(yè)技術(shù)學(xué)院，福州 350003）摘 要 當(dāng)代網(wǎng)頁(yè)設(shè)計(jì)師除了掌握相關(guān)的Web技術(shù)外，還應(yīng)具備一定的藝術(shù)修養(yǎng)。這樣才能做出美觀而又實(shí)用的網(wǎng)頁(yè)。筆者從美學(xué)原理的角度出發(fā)，探討網(wǎng)頁(yè)布局、導(dǎo)航及LOGO的設(shè)計(jì)。關(guān)鍵詞 色彩；布局；導(dǎo)航；LOGO 引言網(wǎng)頁(yè)設(shè)計(jì)是一門新興的邊緣性的行業(yè)，在網(wǎng)絡(luò)產(chǎn)生以后應(yīng)運(yùn)而生。當(dāng)點(diǎn)擊到網(wǎng)站時(shí)，首先映入眼簾的是該網(wǎng)頁(yè)的界面設(shè)計(jì)，如內(nèi)容介紹、按鈕擺放、文字組合、色彩應(yīng)用等等。這一切既是網(wǎng)頁(yè)設(shè)計(jì)的范疇，也是網(wǎng)頁(yè)設(shè)計(jì)師的工作。好的網(wǎng)頁(yè)布局應(yīng)該是把美學(xué)原理合理地融入到技術(shù)中去，為此，談?wù)剛€(gè)人在這方面的認(rèn)識(shí)。一、認(rèn)識(shí)色彩色彩的魅力是無限的。信

2、息時(shí)代的快速到來，網(wǎng)絡(luò)也開始變得多姿多彩。因此色彩在網(wǎng)站設(shè)計(jì)中占據(jù)相當(dāng)重要的地位。設(shè)計(jì)者不僅要掌握基本的網(wǎng)站制作技術(shù)，還需要掌握網(wǎng)站的風(fēng)格、配色等設(shè)計(jì)藝術(shù)。1.1基本概念自然界中色彩雖無以計(jì)數(shù)，但最基本的有三種（紅、黃、藍(lán)），其它的色彩都可以由這三種色彩調(diào)和而成。我們稱這三種色彩為 “三原色”。任何一種彩色具備三個(gè)特征：色相、色度和色純。色相，指的是色彩的名稱。這是色彩最基本的特征，是一種色彩區(qū)別于另一種色彩的最主要的因素。比如說紫色、綠色、黃色等等都代表了不同的色相。同一色相的色彩，調(diào)整一下亮度，或者純度很容易搭配，比如，深綠、暗綠、草綠、亮綠。色度，指的是色彩的明暗程度。明度越大，色彩越亮

3、，比如一些購(gòu)物、兒童類網(wǎng)站，用的是一些鮮亮的顏色，讓人感覺絢麗多姿，生機(jī)勃勃；明度越低，顏色越暗，主要用于一些游戲、探險(xiǎn)類網(wǎng)站，充滿神秘感。有明度差的色彩更容易調(diào)和。如紫色 （#993399）與黃色（#ffff00），暗紅（#cc3300）與草綠（#99cc00），暗藍(lán)（#0066cc） 與橙色（#ff9933）等。色純，指色彩的鮮艷程度，純度高的色彩純、鮮亮。純度底的色彩暗淡，含灰色。相近色：色環(huán)中三原色左右構(gòu)成的相鄰顏色，如綠與黃、綠與藍(lán)。相近色的搭配給人的視覺效果很舒適，很自然。互補(bǔ)色：色環(huán)中相對(duì)的兩種色彩，如紅與綠、藍(lán)與橙、紫與黃等。對(duì)于互補(bǔ)色，調(diào)整補(bǔ)色的亮度，一方加強(qiáng)、一方減弱，這是

4、一種很好的搭配。暖色：暖色跟黑色搭配可以達(dá)到活潑、溫馨的效果。暖色一般應(yīng)用于購(gòu)物類網(wǎng)站，電子商務(wù)網(wǎng)站，兒童類網(wǎng)站等等。冷色：冷色一般跟白色搭配可以達(dá)到嚴(yán)肅、穩(wěn)重、神秘的效果。冷色一般應(yīng)用于一些高科技，游戲類網(wǎng)站。綠色，藍(lán)色，藍(lán)紫色等都屬于冷色系列。色彩均衡：意為每種色彩所占的比例、面積、位置要合理。網(wǎng)站要讓人看上去舒適，協(xié)調(diào)，除了文字，圖片等內(nèi)容的合理排版，色彩的均衡也是相當(dāng)重要的一個(gè)部分。1.2色彩的作用色彩在生活中是有豐富的感情和涵義的。比如：紅色讓人聯(lián)想到玫瑰，聯(lián)想到喜慶，聯(lián)想到興奮；白色聯(lián)想到純潔，干凈，簡(jiǎn)潔；紫色象征著女性化，高雅，浪漫；藍(lán)色象征高科技，穩(wěn)重，理智；橙色代表了歡快，甜

5、美，收獲；綠色代表了充滿青春的活力，舒適，希望等。當(dāng)然不是說某種色彩一定代表了什么含義，在特定的場(chǎng)合下，同種色彩可以代表不同的涵義。對(duì)一些明度較高的網(wǎng)站，配以黑色，可以適當(dāng)?shù)亟档推涿鞫取０咨蔷W(wǎng)站用的最普遍的一種顏色。很多網(wǎng)站甚至留出大塊的白色空間，作為網(wǎng)站的一個(gè)組成部分。這就是留白藝術(shù)。恰當(dāng)?shù)牧舭讓?duì)于協(xié)調(diào)頁(yè)面的均衡起到相當(dāng)大的作用。當(dāng)覺得兩種色彩的搭配不協(xié)調(diào)，試試加入黑色，或者灰色，會(huì)有意想不到的效果。1.3確定網(wǎng)站主題色一個(gè)網(wǎng)站必須有一種或兩種主題色，多則讓人感覺輕浮、花俏；少則單調(diào)。當(dāng)主題色確定以后，考慮其它配色時(shí)，一定要考慮其它配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果。 另外，哪種因素占

6、主要地位，是明度、純度還是色相。一般一個(gè)頁(yè)面盡量不要超過4種色彩。二、網(wǎng)頁(yè)的布局網(wǎng)頁(yè)是網(wǎng)站構(gòu)成的基本要素。網(wǎng)頁(yè)布局的好壞直接影響到視覺效果。2.1網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)布局大致可分為“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、封面型、Flash型、綜合框架型等，下面分別論述：1.“國(guó)”字型：也可以稱為“同”字型，常用于大型網(wǎng)站，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們?cè)诰W(wǎng)上見的最多的一種結(jié)構(gòu)類型。 2.拐角型：這種結(jié)構(gòu)與上一種只是形式上的區(qū)別，其實(shí)是很相近，上面是

7、標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。 3.標(biāo)題正文型：即最上面是標(biāo)題或類似的一些東西，下面是正文，常見于一些文章頁(yè)面或注冊(cè)頁(yè)面。 4.左右框架型：這是一種左右為分別兩頁(yè)的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或標(biāo)志，右面是正文。這種結(jié)構(gòu)較多出現(xiàn)在論壇中，也常用于企業(yè)網(wǎng)站。這種類型結(jié)構(gòu)比較清晰。 5.上下框架型：與上面類似，區(qū)別僅僅在于是一種上下分為兩頁(yè)的框架。6.綜合框架型：上面兩種結(jié)構(gòu)的結(jié)合，相對(duì)復(fù)雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”，只是采用

8、了框架結(jié)構(gòu)。 7.封面型：這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁(yè)，大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫，放上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)“進(jìn)入”的鏈接甚至直接在首頁(yè)的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁(yè)，如果處理得好，會(huì)給人帶來賞心悅目的感覺。8.Flash型：這種類型采用了目前非常流行的Flash，頁(yè)面內(nèi)容隨時(shí)間變化，所表達(dá)的信息更豐富，具有較強(qiáng)的現(xiàn)代感和視覺沖擊力，如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體。在以上布局中，對(duì)于不同的形狀，代表著不同意義。比如：矩形代表著正式、規(guī)則，很多ICP和政府網(wǎng)頁(yè)都是以矩形為整體造型；圓形代表著柔和、團(tuán)結(jié)、溫暖、安全等，許多時(shí)尚

9、站點(diǎn)喜歡以圓形為頁(yè)面整體造型；三角形代表著力量、權(quán)威、牢固、侵略等，許多大型的商業(yè)站點(diǎn)為了顯示它的權(quán)威性常以三角形為頁(yè)面整體造型；菱形代表著平衡、協(xié)調(diào)、公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型。目前的網(wǎng)頁(yè)制作多數(shù)是結(jié)合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。2.2網(wǎng)頁(yè)構(gòu)成的元素1.頁(yè)面尺寸頁(yè)面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁(yè)的局限性就在于無法突破顯示器的范圍，瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般分辨率在800x600的情況下，頁(yè)面的顯示尺寸為：780 X 428個(gè)象素；分辨率在640 X 480的情況下，頁(yè)面的顯示尺寸為：620X311個(gè)象素；分辨率在1024

10、X768的情況下，頁(yè)面的顯示尺寸為：1007 X 600。從以上數(shù)據(jù)可以看出，分辨率越高頁(yè)面尺寸越大。在網(wǎng)頁(yè)設(shè)計(jì)過程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容(尺寸)的方法?；旧?，一頁(yè)顯示不超過三屏，除非你肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)。2. 頁(yè)眉頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。頁(yè)眉是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)眉常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。3.文本文本在頁(yè)面中都是以行或者塊(段落)的形式出現(xiàn)，過去因?yàn)轫?yè)面制作技術(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起，文本已經(jīng)可以按照自己的要求放置到頁(yè)

11、面的任何位置，但要做到布局得當(dāng)。4.頁(yè)腳頁(yè)腳和頁(yè)眉相呼應(yīng)。頁(yè)眉是放置站點(diǎn)主題的地方，而頁(yè)腳是放置制作者或者公司信息的地方。5.圖片圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素，如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。6.多媒體除了文本和圖片，還有聲音，動(dòng)畫，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起，它們?cè)诰W(wǎng)頁(yè)布局上也將變得更重要。2.3網(wǎng)頁(yè)布局的構(gòu)思網(wǎng)頁(yè)布局構(gòu)思的方法有兩種，第一種為紙上布局；第二種為軟件布局。1.紙上布局法許多網(wǎng)頁(yè)制作者不喜歡先畫出頁(yè)面布局的草圖，而是直接在網(wǎng)頁(yè)設(shè)計(jì)軟件里邊設(shè)計(jì)布局邊加內(nèi)容。這種不打草稿的方法是很難設(shè)計(jì)出優(yōu)秀

12、的網(wǎng)頁(yè)來。所以在開始制作網(wǎng)頁(yè)時(shí)，要先在紙上畫出頁(yè)面的布局草圖來。2.軟件布局法如果你不喜歡用紙來畫出你的布局意圖，那么你還可以利用軟件來完成這些工作。這個(gè)軟件就是Photoshop。Photoshop所具有的對(duì)圖像的編輯功能用到設(shè)計(jì)網(wǎng)頁(yè)布局上更顯得心應(yīng)手。不像用紙來設(shè)計(jì)布局，利用Photoshop可以方便地使用顏色、圖形，并且可以利用層的功能設(shè)計(jì)出用紙張無法實(shí)現(xiàn)的布局意念。三、導(dǎo)航導(dǎo)航欄能讓我們?cè)跒g覽時(shí)容易地到達(dá)不同的頁(yè)面，是網(wǎng)頁(yè)元素非常重要的部分，所以導(dǎo)航欄一定要清晰、醒目。3.1導(dǎo)航欄的位置一般來講，導(dǎo)航欄要在“第一屏”能顯示出來，但是有時(shí)第一屏高度可能會(huì)小于435px，基于這點(diǎn)考慮，那種

13、橫向放置的導(dǎo)航欄要優(yōu)于縱向的導(dǎo)航欄。3.2第一屏所謂第一屏，是指我們到達(dá)一個(gè)網(wǎng)站在不拖動(dòng)滾動(dòng)條時(shí)能夠看到的部分，在800*600的屏幕顯示模式(這也是最常用的)下，能看到的部分為778px*435px。第一屏當(dāng)然要放最主要的內(nèi)容，據(jù)大量的調(diào)查顯示，最醒目的位置為屏幕的右上方。3.3篇幅將篇幅過長(zhǎng)的文件分隔成數(shù)篇較小的網(wǎng)頁(yè)能大大增加界面的親和性，但在導(dǎo)航按鈕與超鏈接的配置上，網(wǎng)頁(yè)設(shè)計(jì)者則要做更細(xì)心、更周全地安排：結(jié)構(gòu)合理、標(biāo)題清楚、導(dǎo)航方便。四、Logo設(shè)計(jì)Logo指的是網(wǎng)站標(biāo)志，常用的工具軟件有Photoshop ， Coreldraw ， Illustrator和 Flash等。靈活運(yùn)用美學(xué)

14、原理中的比例、對(duì)比和重復(fù)可以設(shè)計(jì)出精美的Logo。4.1比例在牛津現(xiàn)代高級(jí)英漢雙解詞典中是如此對(duì)“比例”定義的：一物與他物在量、大小等方面的比率；部分與整體的關(guān)系。早在希臘與文藝復(fù)興時(shí)代的建筑家就開始找尋一個(gè)“理想的”比例規(guī)則，其中最出名的就是圖1所示的“黃金分割”。圖1隨著現(xiàn)代人審美觀念的改變，純數(shù)字的“黃金”比例已不再是放之四海皆行得通的標(biāo)準(zhǔn)；而且現(xiàn)代電腦技術(shù)的發(fā)達(dá)，使得我們可以輕易設(shè)計(jì)出復(fù)雜異常的形體與顏色，它們的交互影響又直接影響到物體比例的感觀。因此對(duì)于比例的考慮，應(yīng)將注意力更多地放在外形，可見性與突出性上面。“比例”最重要的原則是遵循客觀規(guī)律，文字比例要使得其易讀，形體比例要使得它

15、不會(huì)變形而且特色突出。事實(shí)上，只要有可能，無論什么時(shí)候我們都要找到作品中各個(gè)元素的相互關(guān)系，盡管它有時(shí)并不明顯。如果能將兩個(gè)完全不相稱的元素安全地變換成一個(gè)固定的比例，如一樣大或者成倍數(shù)關(guān)系，那就值得去試試。如圖2：圖2在日常設(shè)計(jì)中，決定比例規(guī)則的工作常常分成兩部分：先是盡可能全面地查找作品內(nèi)部的所有元素；然后找出它們之間的關(guān)系并為它們定身制作比例標(biāo)準(zhǔn)。4.2對(duì)比比例常常針對(duì)著尺寸大小，而對(duì)比則可以針對(duì)于各種屬性，如顏色、大小、形狀、字體、紋理，等等，沒有一件事物不具備對(duì)比性。只要你靜下心來認(rèn)真進(jìn)行比較，將會(huì)驚奇地發(fā)現(xiàn)那些外表相似的物體竟然還有如此豐富的對(duì)比因素。不少人只是簡(jiǎn)單地將它們進(jìn)行孤立

16、看待，實(shí)際上所有的對(duì)立顯示了不同程度的連續(xù)性，而正是這些對(duì)立程度的選擇，往往是區(qū)別一位設(shè)計(jì)高手與業(yè)余設(shè)計(jì)者的標(biāo)準(zhǔn)！通常對(duì)比突出的并不是組件本身，而是組件彼此的關(guān)系與它們要傳達(dá)的交互信息。如圖3中的對(duì)立因素的連接點(diǎn)在“RWC”三個(gè)用于表達(dá)中心意思的字上；而對(duì)比因素就很多了：背景層尺寸較大，并有虛化效果；前景層小一些，色澤更暗；背景層用小寫字體而前景層使用大寫字體；背景層中的“W”是處于升格而前景層中的“W”處于降格；字體色彩不一致。這些正是由于多種對(duì)立面的分散銳化，使整個(gè)LOGO從矛盾中顯得異常協(xié)調(diào)！圖3將對(duì)比概念應(yīng)用到LOGO設(shè)計(jì)中，可以這樣認(rèn)為：1.形體的對(duì)比，包括大對(duì)小，水平對(duì)垂直，方形對(duì)

17、圓形，等等。2.色彩的對(duì)比，包括色相，飽和度與亮度的對(duì)比，等等。3.字體對(duì)比，包括字型，大小寫，尺寸等的對(duì)比。由于字體發(fā)展不平行的特性，使得我們很難在同一個(gè)LOGO中應(yīng)用兩種完全不同風(fēng)格的字型，因此常常在大小寫方面做文章。4.3重復(fù)跟對(duì)比強(qiáng)調(diào)組件的聯(lián)系一樣，重復(fù)并不是旨在突出組件的鮮明，而是用以強(qiáng)調(diào)一種發(fā)展趨向，一種變化順序。這也從另外一個(gè)意義上暗示我們：重復(fù)物件最好按照一種線性流程進(jìn)行定位，或者是直線，或者是曲線，或者是一種較為復(fù)雜的交互線程。在圖5中三個(gè)多邊形按照弧線定位，重在表現(xiàn)一種對(duì)稱性。 圖4圖6？又給我們指明了另一種定位規(guī)則：一般地，重復(fù)組件用于表達(dá)一定的發(fā)展趨向，而且每個(gè)組件又有自己比較鮮明的特點(diǎn)，用上面的對(duì)稱或弧線定位難于傳送合適的趨向意識(shí)。因此我們采取簡(jiǎn)單的直線線