美學原理在網(wǎng)頁設計中的應用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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