第0章網(wǎng)頁賞析

1、第第0 0章章 網(wǎng)頁賞析網(wǎng)頁賞析0.1 0.1 概述概述 網(wǎng)頁界面的構(gòu)成要素，除了有傳統(tǒng)媒體的文字、圖形、色彩等基本構(gòu)成網(wǎng)頁界面的構(gòu)成要素，除了有傳統(tǒng)媒體的文字、圖形、色彩等基本構(gòu)成要素以外，還有聲音、視頻、動(dòng)畫等多媒體要素，以及其他一些特效和交互功要素以外，還有聲音、視頻、動(dòng)畫等多媒體要素，以及其他一些特效和交互功能。正因?yàn)槿绱?，?duì)于網(wǎng)頁的賞析、評(píng)測(cè)也將是多角度、全方位的。雖說網(wǎng)頁能。正因?yàn)槿绱?，?duì)于網(wǎng)頁的賞析、評(píng)測(cè)也將是多角度、全方位的。雖說網(wǎng)頁界面設(shè)計(jì)與平面設(shè)計(jì)非常類似，但也存在著一個(gè)很大的差異，那就是網(wǎng)頁界面界面設(shè)計(jì)與平面設(shè)計(jì)非常類似，但也存在著一個(gè)很大的差異，那就是網(wǎng)頁界面作品具有明

2、確的實(shí)用功能，而一般的藝術(shù)作品只具單純性觀念。實(shí)際賞析和評(píng)作品具有明確的實(shí)用功能，而一般的藝術(shù)作品只具單純性觀念。實(shí)際賞析和評(píng)測(cè)網(wǎng)頁界面作品的第一點(diǎn)，是看它是否具有完整的功能，其次才是它的藝術(shù)效測(cè)網(wǎng)頁界面作品的第一點(diǎn)，是看它是否具有完整的功能，其次才是它的藝術(shù)效果。優(yōu)秀的網(wǎng)頁界面作品應(yīng)該是實(shí)用的物質(zhì)功能與審美的精神功能完美的結(jié)合。果。優(yōu)秀的網(wǎng)頁界面作品應(yīng)該是實(shí)用的物質(zhì)功能與審美的精神功能完美的結(jié)合。 每一個(gè)人由于經(jīng)歷、經(jīng)驗(yàn)、思維方式的不同，對(duì)事物的看法、認(rèn)識(shí)常常也每一個(gè)人由于經(jīng)歷、經(jīng)驗(yàn)、思維方式的不同，對(duì)事物的看法、認(rèn)識(shí)常常也是不一樣的。網(wǎng)絡(luò)的基本特征是資源共享，互聯(lián)網(wǎng)是大眾化的網(wǎng)絡(luò)，是是不一

3、樣的。網(wǎng)絡(luò)的基本特征是資源共享，互聯(lián)網(wǎng)是大眾化的網(wǎng)絡(luò)，是“平民平民”網(wǎng)。雖然為了追求較完美的界面設(shè)計(jì)，我們?cè)诘诰W(wǎng)。雖然為了追求較完美的界面設(shè)計(jì)，我們?cè)诘?章從較專業(yè)的角度做了一章從較專業(yè)的角度做了一些探討，但是為了使些探討，但是為了使“平民平民”能夠接受，能夠認(rèn)同，網(wǎng)頁的界面設(shè)計(jì)應(yīng)該貼近能夠接受，能夠認(rèn)同，網(wǎng)頁的界面設(shè)計(jì)應(yīng)該貼近大眾，應(yīng)該服務(wù)于大眾。這就要求我們站在一般瀏覽者的角度，去設(shè)計(jì)、審視大眾，應(yīng)該服務(wù)于大眾。這就要求我們站在一般瀏覽者的角度，去設(shè)計(jì)、審視、理解網(wǎng)頁作品。、理解網(wǎng)頁作品。123為使網(wǎng)頁頁面鮮明，整體感突出，有一個(gè)較為強(qiáng)烈的視覺效果，通為使網(wǎng)頁頁面鮮明，整體感突出，有一個(gè)較

4、為強(qiáng)烈的視覺效果，通常在組織頁面時(shí)，我們采用：常在組織頁面時(shí)，我們采用：45主題鮮明主題鮮明重要信息放重要信息放置在首頁置在首頁設(shè)計(jì)創(chuàng)新設(shè)計(jì)創(chuàng)新突出個(gè)性突出個(gè)性色彩藝術(shù)性色彩藝術(shù)性完整性強(qiáng)完整性強(qiáng)內(nèi)容針對(duì)性內(nèi)容針對(duì)性布局合理布局合理結(jié)構(gòu)合理結(jié)構(gòu)合理具有可讀性具有可讀性0.2 0.2 主題的鮮明性主題的鮮明性 網(wǎng)頁設(shè)計(jì)與網(wǎng)站主題之間的關(guān)系歸納起來有三點(diǎn)，第一，設(shè)計(jì)應(yīng)滿足主網(wǎng)頁設(shè)計(jì)與網(wǎng)站主題之間的關(guān)系歸納起來有三點(diǎn)，第一，設(shè)計(jì)應(yīng)滿足主題的要求，應(yīng)該為主題服務(wù)；第二，設(shè)計(jì)使藝術(shù)和技術(shù)交融，應(yīng)該是藝術(shù)和題的要求，應(yīng)該為主題服務(wù)；第二，設(shè)計(jì)使藝術(shù)和技術(shù)交融，應(yīng)該是藝術(shù)和技術(shù)的完美結(jié)合。就是說，在保證技術(shù)

5、的完美結(jié)合。就是說，在保證“美美”的前提下，不喪失網(wǎng)站的的前提下，不喪失網(wǎng)站的“功能功能”；第三，無論是第三，無論是“美美”，還是，還是“功能功能”，都是為了更好地表達(dá)網(wǎng)站的主題思想。，都是為了更好地表達(dá)網(wǎng)站的主題思想。當(dāng)然，網(wǎng)站不同，其主題通常也會(huì)不同，對(duì)于當(dāng)然，網(wǎng)站不同，其主題通常也會(huì)不同，對(duì)于“美美”與與“功能功能”的取向也有的取向也有所不同。例如，我們常用的搜索引擎所不同。例如，我們常用的搜索引擎googlegoogle、百度、一搜等，它的功能就是百度、一搜等，它的功能就是“搜索搜索”，所以說，所以說“功能功能”就是它的主題；而對(duì)于某些功能較單一的網(wǎng)站，就是它的主題；而對(duì)于某些功能較單

6、一的網(wǎng)站，如個(gè)人網(wǎng)站，可以以如個(gè)人網(wǎng)站，可以以“美美”作為網(wǎng)頁設(shè)計(jì)的目的，它完全可以沖著一個(gè)作為網(wǎng)頁設(shè)計(jì)的目的，它完全可以沖著一個(gè)“美美”的主題去體現(xiàn)自身的理念，所以說的主題去體現(xiàn)自身的理念，所以說“美美”就是它的主題；又例如門戶網(wǎng)站，就是它的主題；又例如門戶網(wǎng)站，網(wǎng)易、新浪，還有如全球著名的電子商務(wù)零售網(wǎng)站亞馬遜等，網(wǎng)易、新浪，還有如全球著名的電子商務(wù)零售網(wǎng)站亞馬遜等，“內(nèi)容內(nèi)容”就是就是它們的主題。它們的主題。 網(wǎng)頁設(shè)計(jì)的優(yōu)秀與否，取決于設(shè)計(jì)師對(duì)主題的理解與掌握程度，好的頁網(wǎng)頁設(shè)計(jì)的優(yōu)秀與否，取決于設(shè)計(jì)師對(duì)主題的理解與掌握程度，好的頁面設(shè)計(jì)肯定是服從于網(wǎng)站主題，鮮明地突出網(wǎng)站的訴求主題。要

7、使網(wǎng)頁從形面設(shè)計(jì)肯定是服從于網(wǎng)站主題，鮮明地突出網(wǎng)站的訴求主題。要使網(wǎng)頁從形式上獲得良好的誘導(dǎo)力，可以通過對(duì)網(wǎng)頁的空間層次、主從關(guān)系、視覺秩序式上獲得良好的誘導(dǎo)力，可以通過對(duì)網(wǎng)頁的空間層次、主從關(guān)系、視覺秩序以及彼此之間的邏輯性來把握運(yùn)用。以及彼此之間的邏輯性來把握運(yùn)用。 例如圖例如圖4-14-1，如果不看頁面上的文字，我們也可以肯定地說它是一家漢文，如果不看頁面上的文字，我們也可以肯定地說它是一家漢文化網(wǎng)站，配合圖形、色彩等我們可以推斷它是一家介紹古文化的網(wǎng)站，這些都化網(wǎng)站，配合圖形、色彩等我們可以推斷它是一家介紹古文化的網(wǎng)站，這些都毫無例外地突出了網(wǎng)站的主題思想，達(dá)到了主體與形式的完美結(jié)合

8、。毫無例外地突出了網(wǎng)站的主題思想，達(dá)到了主體與形式的完美結(jié)合。 主題與形式的結(jié)合主題與形式的結(jié)合 0.2 0.2 主題的鮮明性主題的鮮明性分割分割統(tǒng)一統(tǒng)一和諧和諧易讀易讀易找易找清晰清晰0.3 0.3 設(shè)計(jì)的創(chuàng)新性設(shè)計(jì)的創(chuàng)新性 欣賞、評(píng)析一幅網(wǎng)頁作品可以從獨(dú)創(chuàng)性、求異性、靈活性、跨越性、整體欣賞、評(píng)析一幅網(wǎng)頁作品可以從獨(dú)創(chuàng)性、求異性、靈活性、跨越性、整體性、深刻性以及流暢性等幾個(gè)方面綜合評(píng)判。設(shè)計(jì)的創(chuàng)新性我們可以借助廣告性、深刻性以及流暢性等幾個(gè)方面綜合評(píng)判。設(shè)計(jì)的創(chuàng)新性我們可以借助廣告創(chuàng)意的一句名言，那就是廣告不僅是一種傳播方式，更是一種我們時(shí)代的表達(dá)。創(chuàng)意的一句名言，那就是廣告不僅是一種傳

9、播方式，更是一種我們時(shí)代的表達(dá)。 圖圖4.44.4是著名的是著名的pixarpixar動(dòng)畫制作室的作品，動(dòng)畫制作室的作品，pixarpixar動(dòng)畫制作室運(yùn)用藝術(shù)技巧在動(dòng)畫制作室運(yùn)用藝術(shù)技巧在計(jì)算機(jī)動(dòng)畫領(lǐng)域創(chuàng)造性地制作出了許多獨(dú)特新穎的動(dòng)畫巨片，它創(chuàng)造的動(dòng)畫常計(jì)算機(jī)動(dòng)畫領(lǐng)域創(chuàng)造性地制作出了許多獨(dú)特新穎的動(dòng)畫巨片，它創(chuàng)造的動(dòng)畫常常能出其不意，又貼近生活，感染力極強(qiáng)。常能出其不意，又貼近生活，感染力極強(qiáng)。 動(dòng)畫圖形動(dòng)畫圖形 0.4 0.4 結(jié)構(gòu)的合理性結(jié)構(gòu)的合理性 網(wǎng)頁是傳播信息的載體，其結(jié)構(gòu)由各種視、聽要素組成，以滿足人們實(shí)際網(wǎng)頁是傳播信息的載體，其結(jié)構(gòu)由各種視、聽要素組成，以滿足人們實(shí)際需求的目

10、標(biāo)而設(shè)計(jì)。網(wǎng)站往往從整體結(jié)構(gòu)需求的目標(biāo)而設(shè)計(jì)。網(wǎng)站往往從整體結(jié)構(gòu)( (這里指形式結(jié)構(gòu)，而不是內(nèi)容結(jié)構(gòu)這里指形式結(jié)構(gòu)，而不是內(nèi)容結(jié)構(gòu)) )上看其合理性，形式上豐富有條理，組織上有秩序、不單調(diào)、不混亂。也就是上看其合理性，形式上豐富有條理，組織上有秩序、不單調(diào)、不混亂。也就是說網(wǎng)站頁面在版式、色彩、風(fēng)格等方面具有某種共性說網(wǎng)站頁面在版式、色彩、風(fēng)格等方面具有某種共性 。 網(wǎng)站頁面統(tǒng)一合理的整體性設(shè)計(jì)，可以使瀏覽者更快捷、更準(zhǔn)確、更全面網(wǎng)站頁面統(tǒng)一合理的整體性設(shè)計(jì)，可以使瀏覽者更快捷、更準(zhǔn)確、更全面地認(rèn)識(shí)和了解它，給瀏覽者一種內(nèi)部有機(jī)聯(lián)系，外部和諧完整的美感，使瀏覽地認(rèn)識(shí)和了解它，給瀏覽者一種內(nèi)部有

11、機(jī)聯(lián)系，外部和諧完整的美感，使瀏覽者體會(huì)到設(shè)計(jì)師完整的設(shè)計(jì)理念。如圖者體會(huì)到設(shè)計(jì)師完整的設(shè)計(jì)理念。如圖4.64.6、圖、圖4.74.7。當(dāng)然，過于強(qiáng)調(diào)網(wǎng)頁結(jié)構(gòu)。當(dāng)然，過于強(qiáng)調(diào)網(wǎng)頁結(jié)構(gòu)形式的視覺整體性，必然會(huì)犧牲靈活的多變性，這就有可能造成網(wǎng)頁呆板、沉形式的視覺整體性，必然會(huì)犧牲靈活的多變性，這就有可能造成網(wǎng)頁呆板、沉悶，降低瀏覽者的情趣，影響網(wǎng)頁的傳播效果。悶，降低瀏覽者的情趣，影響網(wǎng)頁的傳播效果。 圖圖4.6 4.6 具有韻律感具有韻律感 圖圖4.7 4.7 結(jié)構(gòu)和諧結(jié)構(gòu)和諧 0.5 0.5 色彩的藝術(shù)性色彩的藝術(shù)性v （1）暖色調(diào)。即紅色、橙色、黃色、褐色等色彩的搭配。這種色調(diào)的運(yùn)用，可使

12、主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。v （2）冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運(yùn)用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。v （3）對(duì)比色調(diào)。即把色調(diào)完全相反的色彩搭配在同一個(gè)空間里。例如：紅與綠、黃與紫、橙與藍(lán)等。0.5 0.5 色彩的藝術(shù)性色彩的藝術(shù)性0.5 0.5 色彩的藝術(shù)性色彩的藝術(shù)性0.5 0.5 色彩的藝術(shù)性色彩的藝術(shù)性 色彩設(shè)計(jì)應(yīng)遵循科學(xué)與藝術(shù)的內(nèi)在邏輯聯(lián)系，網(wǎng)頁界面設(shè)計(jì)是對(duì)色彩進(jìn)行色彩設(shè)計(jì)應(yīng)遵循科學(xué)與藝術(shù)的內(nèi)在邏輯聯(lián)系，網(wǎng)頁界面設(shè)計(jì)是對(duì)色彩進(jìn)行鮮明創(chuàng)見性及理想化的組合過程，是理性與感性相結(jié)合的創(chuàng)作過程。在網(wǎng)頁界鮮明創(chuàng)見性及理想化的組合過程，是理性與感性相結(jié)合的創(chuàng)作

13、過程。在網(wǎng)頁界面的設(shè)計(jì)中色彩主要用來完成以下幾方面的任務(wù)。面的設(shè)計(jì)中色彩主要用來完成以下幾方面的任務(wù)。1. 1. 劃分視覺區(qū)域劃分視覺區(qū)域 利用不同的色彩將頁面劃為不同的視覺區(qū)域，分別表現(xiàn)不同的內(nèi)容或信息。利用不同的色彩將頁面劃為不同的視覺區(qū)域，分別表現(xiàn)不同的內(nèi)容或信息。可以利用色彩的布局，將信息分門別類，分出主次，從而形成有序的視覺流程?？梢岳蒙实牟季郑瑢⑿畔⒎珠T別類，分出主次，從而形成有序的視覺流程。如圖如圖4-104-10 。利用色彩分區(qū)利用色彩分區(qū) 2. 2. 突出主題突出主題 利用色彩的內(nèi)在力量來突出和烘托主題，是網(wǎng)頁界面設(shè)計(jì)中常用的手法之利用色彩的內(nèi)在力量來突出和烘托主題，是網(wǎng)

14、頁界面設(shè)計(jì)中常用的手法之一。如圖一。如圖4-124-12是一家以紅色為主色調(diào)的消防網(wǎng)站，是一家以紅色為主色調(diào)的消防網(wǎng)站， 消防網(wǎng)站消防網(wǎng)站 0.5 0.5 色彩的藝術(shù)性色彩的藝術(shù)性3.3.吸引視線吸引視線 由于色彩在網(wǎng)頁界面設(shè)計(jì)的特殊地位，一幅賞心悅目的界面設(shè)計(jì)常常會(huì)吸由于色彩在網(wǎng)頁界面設(shè)計(jì)的特殊地位，一幅賞心悅目的界面設(shè)計(jì)常常會(huì)吸引眾多的瀏覽者。設(shè)計(jì)師會(huì)不失時(shí)機(jī)利用色彩的特殊感染力，不斷改變界面設(shè)引眾多的瀏覽者。設(shè)計(jì)師會(huì)不失時(shí)機(jī)利用色彩的特殊感染力，不斷改變界面設(shè)計(jì)，推出各種富有色彩情感特征的作品，打動(dòng)瀏覽者的計(jì)，推出各種富有色彩情感特征的作品，打動(dòng)瀏覽者的“芳心芳心”。如圖。如圖4-144

15、-14以以漆黑漆黑“夜晚夜晚”的一輪的一輪“明月明月”點(diǎn)綴頁面，鎖住瀏覽者的視線。點(diǎn)綴頁面，鎖住瀏覽者的視線。4. 4. 增強(qiáng)藝術(shù)效果增強(qiáng)藝術(shù)效果 在網(wǎng)頁界面設(shè)計(jì)中科學(xué)地使用色彩，可以使頁面平添感人的活力，提升網(wǎng)在網(wǎng)頁界面設(shè)計(jì)中科學(xué)地使用色彩，可以使頁面平添感人的活力，提升網(wǎng)頁作品的藝術(shù)品位。這種效果的產(chǎn)生除了在視覺上，更重要地體現(xiàn)在心理作用頁作品的藝術(shù)品位。這種效果的產(chǎn)生除了在視覺上，更重要地體現(xiàn)在心理作用和象征作用的雙重作用之下。如圖和象征作用的雙重作用之下。如圖4-154-15以漸變的、忽隱忽現(xiàn)和較為模糊的色彩以漸變的、忽隱忽現(xiàn)和較為模糊的色彩造就一種神秘稀稀的感覺，使主題效果格外突出。

16、造就一種神秘稀稀的感覺，使主題效果格外突出。 神秘莫測(cè)神秘莫測(cè) 聚焦視覺聚焦視覺 0.6 0.6 內(nèi)容的針對(duì)性內(nèi)容的針對(duì)性 網(wǎng)頁界面設(shè)計(jì)的前提是在滿足主題需要的條件下，追求形式美，使得網(wǎng)頁上網(wǎng)頁界面設(shè)計(jì)的前提是在滿足主題需要的條件下，追求形式美，使得網(wǎng)頁上每一個(gè)元素都有存在的必要，而不是為了炫耀去使用冗余的技法、技術(shù)。過于每一個(gè)元素都有存在的必要，而不是為了炫耀去使用冗余的技法、技術(shù)。過于強(qiáng)調(diào)強(qiáng)調(diào)“獨(dú)特設(shè)計(jì)風(fēng)格獨(dú)特設(shè)計(jì)風(fēng)格”而脫離內(nèi)容，或者只求內(nèi)容而缺乏藝術(shù)表現(xiàn)，都會(huì)使網(wǎng)而脫離內(nèi)容，或者只求內(nèi)容而缺乏藝術(shù)表現(xiàn)，都會(huì)使網(wǎng)頁設(shè)計(jì)變得空洞無力。只有將兩者有機(jī)地結(jié)合在一起，深入領(lǐng)會(huì)主題的精髓，頁設(shè)計(jì)變

17、得空洞無力。只有將兩者有機(jī)地結(jié)合在一起，深入領(lǐng)會(huì)主題的精髓，融入設(shè)計(jì)師自身的設(shè)計(jì)理念，找到一個(gè)完美的平衡點(diǎn)，來實(shí)現(xiàn)網(wǎng)頁的全部功能融入設(shè)計(jì)師自身的設(shè)計(jì)理念，找到一個(gè)完美的平衡點(diǎn)，來實(shí)現(xiàn)網(wǎng)頁的全部功能和體現(xiàn)藝術(shù)美感，才可能設(shè)計(jì)出獨(dú)具特色、和體現(xiàn)藝術(shù)美感，才可能設(shè)計(jì)出獨(dú)具特色、“價(jià)值不匪價(jià)值不匪”的，功能與藝術(shù)交融的，功能與藝術(shù)交融的網(wǎng)頁界面。如圖的網(wǎng)頁界面。如圖4-164-16、圖、圖4-174-17是著名汽車廠商是著名汽車廠商nissannissan的網(wǎng)站。的網(wǎng)站。 汽車網(wǎng)站汽車網(wǎng)站 車展平臺(tái)車展平臺(tái) 0.7 0.7 網(wǎng)站頁面欣賞網(wǎng)站頁面欣賞 flash flash頁面頁面網(wǎng)站頁面欣賞網(wǎng)站頁面欣賞 普通頁面普通頁面 0.7.1 flash0.7.1 flash頁面頁面 www.anatol.de/index.phpwww.anatol.de/index.php0.7.1 flash0.7.