網(wǎng)頁設(shè)計配色基礎(chǔ)知識學(xué)習(xí)：RGB及HSB

在好用美術(shù)中，常有〃遠(yuǎn)

看色調(diào)近看花，先看顏色后看

花，七分顏色三分花〃的說法。

這也就說明，在任何設(shè)計

中，色調(diào)對視覺的刺激起到第

一信息傳達(dá)的作用。因此，對

色調(diào)的基礎(chǔ)知識的良好掌控，

在網(wǎng)頁設(shè)計中才能做到游刃有

余。為了使下面的網(wǎng)頁配

色分析更易于理解，我們先來

了解色調(diào)的RGB模式和HSB模

式。

■RGB

RGB是表示紅色綠色藍(lán)色

又稱為三原色光，英文為

R(Red),G(Green),

B(Blue),在電腦中，RGB的所

謂〃多少〃就是指亮度，并運用

整數(shù)來表示。

通常狀況下，RGB各有

256級亮度，用數(shù)字表示為從

0,1,2至255。雖然數(shù)字最

高是255,但0也是數(shù)值之一，

因此共256級。依據(jù)計算，256

級的RGB色調(diào)總共能組合出約

1678萬種色調(diào),即256X256X

256=16777216。通常也被簡稱

為1600萬色或千萬色。也稱為

24位色（2的24次方）。

對于單獨的R或G或B而

言，當(dāng)數(shù)值為0時，代表這種

顏色不發(fā)光；假如為255,則該

顏色為最高亮度。因此當(dāng)RGB

三種色光都發(fā)到最強(qiáng)的亮度，

純白的RGB值就為

255,255,255。屏幕上黑的RGB

值是0,0,0。R,意味著只有紅

色存在，且亮度最強(qiáng)，G和B都

不發(fā)光。因此最紅色的數(shù)值是

255,0,0。同理，最綠色就是

0,255,0；而最藍(lán)色就是

0,0,255o黃色較特殊，是由紅

色加綠色而得就是255,255,

0o（具體分析請參考趙鵬所寫

的《電腦美術(shù)設(shè)計中的色調(diào)模

式詳解》）

純白色數(shù)值為R255,G255,B255純黑色數(shù)值為RO,GO,B0

紅色數(shù)值為R255,GO,B0綠色數(shù)值為RO,G255,B0

顏色可以分為非彩

色和彩色兩大類。非彩色

指黑色，白色和各種深

淺不一的灰色，而其他

全部顏色均屬于彩色。從

心理學(xué)和視覺的角度動

身，彩色具有三個屬性：

色相，明度，純度(彩

度)。

本色相環(huán)

■明度(Value):

也叫亮度，指顏色的深淺，明暗程度，沒有色相和飽和

度的區(qū)分。不同的顏色，反射的光量強(qiáng)弱不一，因而會產(chǎn)生不

同程度的明暗。非色調(diào)的黑，灰，白較能形象的表達(dá)這一特

質(zhì)。

明度的遞增

f明度網(wǎng)頁例圖:

f明度網(wǎng)頁例圖:

R223R207R247R247

0:227G2210246G247

B200B221B225B247

明度分析：

從上圖網(wǎng)頁所選取的4個主要色塊的RGB數(shù)值來看，這4塊色調(diào)

組合顯示的RGB數(shù)值很高，接近于最高值255。RGB相互間的數(shù)值相

近，由于有RG的高數(shù)值及B高數(shù)值混合，整個網(wǎng)頁給人的感覺特別

協(xié)調(diào)，柔軟雅致，心情愉悅。

結(jié)論：

RGB同時呈現(xiàn)相近的高數(shù)值時，相近等量的色調(diào)相互混合，頁

面呈高超度灰色段，協(xié)調(diào)的柔軟狀態(tài)，令人遐想，對視覺刺激是緩

慢的，適合長時間觀看。但由于數(shù)值接近，因此色階平穩(wěn)，同時存在

著不夠醒目的狀態(tài)C

■純度(Chroma):

也叫飽和度，指色調(diào)的明麗程度。原色最純，顏色的混合

越多則純度漸漸減低。如某一鮮亮的顏色，加入了白色或者黑

色，使得它的純度低，顏色趨于柔軟，沉穩(wěn)。

加入黑色的純度變化和加入白色的純度變化

一純度網(wǎng)頁例圖：

f純度網(wǎng)頁例圖：

minimalweb

MemNameistMaunceKbhlbomIchblnWebdesignerundwohneinMaw

HerzlichVMlkommenaufmeinerpersOnltchenPortfollo-Seite

Webdcsign

Weniger1stmen，

moduli-ElekfronascheMusik(2(05)

StudentlscheTagungSprathwissenschafl(2004)

H'213wH32F

S:W%5:85%

B.79%B:97%

純度分析:

上圖網(wǎng)頁中選取了主要的兩種色系為組合。運用HBS數(shù)值模式更

易于理解分析該網(wǎng)頁的純度狀況。

我們看到藍(lán)色S數(shù)值呈現(xiàn)99%具有相當(dāng)高的飽和度，B明度為

79%,玫瑰色S飽和度數(shù)值為85%,B明度為97%。當(dāng)飽和度和明度

同時呈最高值時，色調(diào)對視覺的刺激強(qiáng)度到達(dá)最高狀態(tài)。由于藍(lán)色

的明度稍低，飽和度較高，而玫瑰色的明度較高，該顏色純度隨之

加強(qiáng)，因此玫瑰色相對藍(lán)色對人的視覺刺激更劇烈。

結(jié)論：

HSB模式中S和B呈現(xiàn)的數(shù)值越高，飽和度明度越高，頁面色調(diào)

劇烈明麗，對視覺刺激是快速的，醒目的效果，但不易于長時間的

觀看。以上兩種顏色的S數(shù)值接近，是劇烈的狀態(tài)。H顯示的度是代

表在色輪表里某個角度所呈現(xiàn)的色相狀態(tài)，相對于SB來說，意義不

大。

網(wǎng)頁設(shè)計配色應(yīng)用——色調(diào)

前面我們介紹了常用的電腦色調(diào)模式RGB,USB,以及色調(diào)的三

大屬性，還有常用配色的基本概念和相關(guān)實例剖析。今日開始我們介

紹應(yīng)用部分，本節(jié)介紹色調(diào)。

網(wǎng)頁頁面中總是由具有某種內(nèi)在聯(lián)系的各種色調(diào)，組成一個完

整統(tǒng)一的整體，形成畫面色調(diào)總的趨向，稱為色調(diào)。也可以理解為色

調(diào)狀態(tài)。色調(diào)給人的感覺及氛圍，是影響配色視覺效果的確定因素。

為了使網(wǎng)頁的整體畫面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺，以便充分的

駕馭其規(guī)律來更好的分析學(xué)習(xí)，我們把視覺角色主次位置分為如下

幾個概念，以便在網(wǎng)頁設(shè)計配色時更簡單操縱主動權(quán)。

■主色調(diào)

頁面色調(diào)的主要色調(diào)，總趨勢，其他配色不能超過該主要色調(diào)

的視覺面積。（背景白色不肯定依據(jù)視覺面積確定，可以依據(jù)頁面的

感覺須要。）

■輔色調(diào)

僅次及主色調(diào)的視覺面積的協(xié)助色，是烘托主色調(diào)，支持主色

調(diào)，起到融合主色調(diào)效果的協(xié)助色調(diào)。

■點睛色

在小范圍內(nèi)點上劇烈的顏色來突出主題效果，使頁面更加顯明

生動。

■背景色

襯托環(huán)繞整體的色調(diào)，協(xié)調(diào)，支配整體的作用O

色調(diào)網(wǎng)頁例圖:本部分小節(jié):

一個頁面的色調(diào)角色主要是依據(jù)其面積多少的來區(qū)分主次關(guān)系,

達(dá)到最終目的的。

當(dāng)不同的顏色運用的面積相當(dāng)，這個頁面簡單呈現(xiàn)枯燥單調(diào)之

感，而沒有局部細(xì)微環(huán)節(jié)的變化。當(dāng)一個頁面運用的顏色過多，面

積大小用得過于瑣碎，這個頁面簡單呈現(xiàn)花哨，主次不分沒有整體

的感覺。

為頁面設(shè)計配色的時候，應(yīng)依據(jù)主題內(nèi)容主次須要，各顏色有

其各自的功能角色一面積運用最多的，最少的，不多不少的，加

上冷暖的適度支配，純度明度的合理變化，遵循這條原則，網(wǎng)頁配

色定能得心應(yīng)手。

網(wǎng)頁設(shè)計及配色實例分析

第一章：網(wǎng)頁設(shè)計的原則

L1了解分析客戶的需求

網(wǎng)頁設(shè)計須要設(shè)計師綜合多方面的知識,把設(shè)計的多種元素進(jìn)行有機(jī)

的組合,它及網(wǎng)絡(luò)技術(shù),經(jīng)濟(jì)學(xué)，心理學(xué)以及

美學(xué)等領(lǐng)域都有著親密的聯(lián)系，明確網(wǎng)頁設(shè)計的中心是為了更好的表

達(dá)網(wǎng)站主題.

網(wǎng)頁設(shè)計是一個感性思索及理性分析相結(jié)合的過程，它的方向取決于

設(shè)計的任務(wù)，它的實現(xiàn)依靠網(wǎng)頁的制作

網(wǎng)頁設(shè)計的特點是呈現(xiàn)企業(yè)的形象,介紹產(chǎn)品及服務(wù),體現(xiàn)企業(yè)發(fā)展

戰(zhàn)略途徑，

要點：

1):因此必需明確設(shè)計站點的目的和用戶的需求，以消費者為中心

2):依據(jù)市場的狀況,企業(yè)自身的狀況進(jìn)行綜合的分析，從而做出切實

可行的設(shè)計支配

3):總體設(shè)計方案要主題顯明，在目標(biāo)明確的基礎(chǔ)上,完成網(wǎng)站的構(gòu)思

創(chuàng)意.對網(wǎng)站的整體風(fēng)格和特色作出定位,規(guī)劃網(wǎng)站

的組織結(jié)構(gòu)

4):一件完備,完整的網(wǎng)站設(shè)計作品，是設(shè)計師及客戶不斷進(jìn)行溝通設(shè)

計出的結(jié)果

5):網(wǎng)站開始構(gòu)思的時候須要充分了解客戶的需求，要達(dá)到什么目的，

效果，因此前期的投入是很有必要的，以便精確,完善

地滿意客戶預(yù)期的要求.

6):產(chǎn)品的種類,特性以及所針對人群的特點于年齡，性別等,這些都

是設(shè)計師們須要了解的方面，閱歷豐富的設(shè)計師們

有必要做一些適當(dāng)?shù)囊龑?dǎo).設(shè)計師所面對的客戶群里,文化背景,

性格類型等的差異體現(xiàn)了各種各樣的審美情趣.

7):有些客戶對于建立站點的目的并不明確，設(shè)計師就須要做一些推

廣建議，設(shè)計要靜下心來,站在客戶的角度上

耐性說明共同的探討，以達(dá)到網(wǎng)站最終想要達(dá)到的目的和效果

分析:學(xué)這一節(jié)感受最深的時候，網(wǎng)頁設(shè)計是網(wǎng)絡(luò)技術(shù),美學(xué),心理學(xué)

的結(jié)合這一點我很認(rèn)同

其次我僅進(jìn)行網(wǎng)頁設(shè)計也是為了更好的表達(dá)的我們設(shè)計的

主題,而什么樣的主題,這就要看我們的設(shè)計方案

這里我覺得和開發(fā)程序?qū)懶枨蠓治鲆粯?我們這里不僅要

有我們的版本模型,更要我我們設(shè)計的設(shè)計方案寫出來

設(shè)計方案包括我們網(wǎng)站的整體色調(diào),排版,要用到的必要的

設(shè)計元素，整體風(fēng)格，

設(shè)計方案是很重要的:有幾個方面我們須要考慮，我們自身的

設(shè)計水平，我們網(wǎng)站要承載的內(nèi)容和表達(dá)的主題，

我們所面對的客戶，所以基于上面的幾點,我們肯定要及我們

客戶進(jìn)行耐性的溝通,運用我們的設(shè)計及客戶的需求

達(dá)到完備的統(tǒng)一.

1.2網(wǎng)站項目的規(guī)劃

一個勝利的網(wǎng)頁設(shè)計作品是藝術(shù)及技術(shù)的結(jié)合及統(tǒng)一，以主

題顯明，形式及內(nèi)容保持一樣,把握整體風(fēng)珞為設(shè)計原則，藝術(shù)是

設(shè)計手段，而不是設(shè)計目的.

規(guī)范的網(wǎng)站策劃大致具有如下幾個方面：

1):網(wǎng)站的目標(biāo)

2):網(wǎng)站的主題

3):網(wǎng)站的內(nèi)容

4):網(wǎng)站的風(fēng)格

5):網(wǎng)站的標(biāo)準(zhǔn)

分析：網(wǎng)的藝術(shù)及技術(shù)的結(jié)合統(tǒng)一,藝術(shù)的設(shè)計的手段,而不

是設(shè)計的目的

網(wǎng)站策劃的以上五個方面我覺得是我們做網(wǎng)頁設(shè)

計方案設(shè)計的很重要的依據(jù)

網(wǎng)站的性質(zhì)不同，設(shè)計要求也不同，例如：門戶網(wǎng)站，留意頁

面的分割，信息結(jié)構(gòu)的合理,頁面及圖片的優(yōu)化，界面的親和等問題

企業(yè)網(wǎng)站重點在突出企業(yè)形象,產(chǎn)品特點,要求設(shè)計樣式,圖

片質(zhì)量相對較高.

網(wǎng)站的主題要求小而精,有針對性,盡量向?qū)I(yè)靠近;題材盡量要

新穎，不要隨處可見,這樣才你更吸引用戶一看再看，網(wǎng)站的名

稱要有特色便利記憶，要考慮到為了以后網(wǎng)站的形象和宣揚做

推廣.

分析:上面的東西讓我總覺得我對不同類型的網(wǎng)站把握的過

少，比如韓式網(wǎng)站的風(fēng)格是什么樣的，這些平常有感受確沒有

從理論上去好好分析過.同時我覺得有必要自己

整體出一個有規(guī)范的針對自己的特點的需求方案文檔，以后全部的

網(wǎng)頁設(shè)計都應(yīng)當(dāng)先寫設(shè)計方案,而設(shè)計方案就應(yīng)

當(dāng)以這個為標(biāo)準(zhǔn).

網(wǎng)站設(shè)計規(guī)劃書要體現(xiàn)出的8條內(nèi)容：

1)：建設(shè)網(wǎng)站前的市場分析

2):建設(shè)網(wǎng)站的目的以及功能的定位

3):網(wǎng)站的技術(shù)解決方案

4):網(wǎng)站的內(nèi)容規(guī)劃

5):網(wǎng)頁設(shè)計

這里要考慮到范圍群體的年齡地域，網(wǎng)絡(luò)速度，閱讀習(xí)慣等.

6):網(wǎng)站維護(hù)

7):網(wǎng)站測試

8):網(wǎng)站的發(fā)布及推廣

分析:上面是網(wǎng)站開發(fā)是寫方案時須要考慮到的幾個方面的問題,

我覺得可以作為我們的重要參考.其實我們在自己開發(fā)項目

也作了很多這樣的工作.

第二章網(wǎng)頁設(shè)計的框架

網(wǎng)頁設(shè)計是有規(guī)律可尋的，駕馭如下幾個框架,并依據(jù)網(wǎng)站的信息

內(nèi)容套用,框架搭建起來,剩下的〃填充〃，〃豐富〃，〃精致〃,???

就簡單多了.

分析:我很認(rèn)同這樣的觀點，框架就相當(dāng)于是起房子起的框架，畫畫

是畫人的人體骨骼,而填充就些就相當(dāng)及是往房子里填

磚頭,在畫好人體骨骼后往人體上畫肌肉.

我們?yōu)槭裁匆每蚣埽簽榱四軌蜃岄喿x者更清晰,便捷地理解

網(wǎng)站所要傳達(dá)的信息內(nèi)容

網(wǎng)頁的布局以導(dǎo)航攔位置為界,大致可分為：

上下結(jié)構(gòu)式

為一種上下框架結(jié)構(gòu)式,通常上方為導(dǎo)航條,或者動態(tài)

的公司企業(yè)形象，廣告區(qū)域.下方為正文，內(nèi)容部分,此類結(jié)構(gòu)在內(nèi)容

較少的企業(yè)網(wǎng)站或者個人網(wǎng)站較常出現(xiàn),有時只在首

頁運用，二級頁面換相應(yīng)結(jié)構(gòu).

左右結(jié)構(gòu)式

左右結(jié)構(gòu)式又稱為二分欄式，清晰的分列兩旁框架結(jié)構(gòu)，

一般左側(cè)是導(dǎo)航條，有時最上方會有一個小的標(biāo)題或標(biāo)記,右側(cè)是

正文內(nèi)容部分或者公司企業(yè)形象展示,不少企業(yè)網(wǎng)站較喜愛

采納這類結(jié)構(gòu)

注：由于網(wǎng)站內(nèi)容較少，因此多數(shù)企業(yè)網(wǎng)站都運用上下結(jié)

構(gòu)和左右結(jié)構(gòu)為框架,展示區(qū)域添加大的圖片作為公司形象,新產(chǎn)品

的展示，以提升公司的整體形象.

分析:上下結(jié)構(gòu)式左右結(jié)構(gòu)式并不是嚴(yán)格的區(qū)分往往我

們會這樣的認(rèn)為那就是死板了，同時留意這種特點有利于

展示內(nèi)容叫少的網(wǎng)站，很大塊我們會選擇用圖

片去填充.

上左右結(jié)構(gòu)樣式

這是大中型企業(yè)喜愛用的框架式,通常上方為主要菜單導(dǎo)

航條,左側(cè)為點擊出現(xiàn)的細(xì)分欄目導(dǎo)航條,下方為較主要的欄目

及小廣告，右則為內(nèi)容區(qū)域,有不少企業(yè)網(wǎng)站喜愛首頁運用

不同的結(jié)構(gòu)式,上左右結(jié)構(gòu)運用在二級頁面.同上左右框架稍有區(qū)分

的是中間部分為內(nèi)容部分，右側(cè)則是該網(wǎng)站較重要的內(nèi)容

導(dǎo)航區(qū)域,或是登陸,搜尋區(qū)域，小廣告等.

分析:隨著網(wǎng)站內(nèi)容的增多,框架結(jié)構(gòu)的漸漸細(xì)分,上左右結(jié)構(gòu)

式也更多地應(yīng)用于跨類別的各類網(wǎng)站

上左中右結(jié)構(gòu)式

.又稱三級分欄式,是大型企業(yè)，電子企業(yè)，電子商務(wù),政府網(wǎng)

站,教化機(jī)構(gòu)較喜愛的框架式,也是較常見的結(jié)構(gòu)式.

綜合結(jié)構(gòu)式

這種類型網(wǎng)站較為困難,特點是功能模塊多，信息分類具

體,因此依據(jù)須要采納區(qū)域結(jié)構(gòu)較為合適.

甚至有可能我統(tǒng)一個頁面里柝分出幾個不同的框架類型

不規(guī)則的結(jié)構(gòu)式

不規(guī)則的結(jié)構(gòu)式有別于上面的框架結(jié)構(gòu)式例子，相對來說,

頁面的信息量少,通常一張形象廣告圖片下來,重在渲染這個網(wǎng)站的

氣氛,類似于封面類型,有點擊進(jìn)入下頁的入口，無規(guī)則

的框架風(fēng)格較為隨意自由，凸現(xiàn)網(wǎng)站特性意圖，給閱讀者帶來較強(qiáng)的

視覺沖擊，使以產(chǎn)品宣揚目的的企業(yè)和個人網(wǎng)站的愛好者,

都熱忠于此種框架式.

少見的結(jié)構(gòu)式

通常運用這類結(jié)構(gòu)樣式的網(wǎng)站有兩種狀況,一是放置更多的

信息欄目和內(nèi)容的網(wǎng)站，二是追求特性的企業(yè),組織或者個人的網(wǎng)站

這類結(jié)構(gòu)可以形容另一種風(fēng)格特色

分析:其實我覺得上面講了有規(guī)律的框架也講了沒有規(guī)律的框架，以

后去看任何頁面的結(jié)構(gòu)式,我們基本上可以用上面這些去

分類.

第三章網(wǎng)頁設(shè)計元素

網(wǎng)頁布局在多數(shù)狀況下是在頂部放置必要的信息,如公司名稱,標(biāo)記,

廣告，以及導(dǎo)航條，或?qū)?dǎo)航條放置在左側(cè)而右側(cè)是正文，這樣的布

局結(jié)構(gòu)清晰，易于運用，當(dāng)然,也可以依據(jù)網(wǎng)站的性質(zhì)的須要,嘗試這

些布局的變化形式，如左右兩攔布局，一半是正文，另一半是形象圖

片，導(dǎo)航,或者止文不等的兩攔布置,通過背景色區(qū)分，分別放置圖片

和文字，在設(shè)計中可以多吸取好的網(wǎng)站設(shè)計精髓.

分析:這里講到了網(wǎng)頁中一些元素的大致放法，比如說頂部放置必要

的信息,如公司名稱,標(biāo)記,廣告，以及導(dǎo)航條等等這些.

3.1網(wǎng)頁設(shè)計的布局概念

頁面尺寸

二種常用的尺寸.:一般在800*600的辨別率狀況下，頁面的尺寸為

778*435像素

辨別率在1024*768的狀況下,

頁面的尺寸為1003*600像素

第一屏:指的是在不拖動的狀況下，顯示的內(nèi)容,而頁面的原則長度是

不超過三屏，

第一屏的位置:黃金位置，〃寸土寸金〃之地，放置最主要的內(nèi)容.這個

地方也是閱讀者習(xí)慣關(guān)注的焦點位置,常常放置重要的內(nèi)容，圖片，廣

告.

分析:我覺得我們一般是運用1024*768的辨別效率下考慮頁面，然后

我認(rèn)為確實第一屏也是很重要的,里面放置的最重要的內(nèi)容

也應(yīng)當(dāng)在焦點位置.

.整體造型

造型就創(chuàng)建出來的物體給人的整體形象，網(wǎng)頁的整體形象應(yīng)當(dāng)是圖形

及文本的結(jié)合,通常網(wǎng)頁形態(tài)的組合造型有：圓形,矩形,三角形,菱

形，〃S〃形等.

圓形代表圓滿柔軟,團(tuán)結(jié)平安等,時尚站點較喜愛以圓形頁面為整體

造型,矩形代表中規(guī)中矩,平衡和諧的視覺感受,很多政府網(wǎng)頁以及部

分企業(yè)網(wǎng)頁都是以矩形為整體造型，三角形代表力氣權(quán)威,堅固均衡

等,較大型的商業(yè)站點常以三角形為頁面的整體造型，

企業(yè)站點常運用菱形作為頁面的整體造型，也有不少的網(wǎng)頁設(shè)計是結(jié)

合多種形態(tài)，以某個形態(tài)的構(gòu)圖為主,輔以其他的形態(tài)綜合而成.

分析:我覺得這一點很重要，我們往往只知道設(shè)計網(wǎng)頁時去定義框架，

但是我們應(yīng)當(dāng)知道怎么樣去在這個基礎(chǔ)上去死板的套用框架，

.那就是須要我們對頁面進(jìn)行造型了.而不同的造型也就代表了不

同的風(fēng)格.

頁頭

在習(xí)慣術(shù)語中，頁頭也稱之為頁眉，頁頭的作用是定義頁面

的主題,i般站點的名字多數(shù)都是顯示在天頭里,通常展示的標(biāo)記以

及其網(wǎng)站的標(biāo)題,旗幟廣告,頁頭也是整個頁面設(shè)計的重要

組成部分.

文本

文本是這個網(wǎng)站信息內(nèi)容的重要組成部分,在頁面中多數(shù)

以行或者塊（段落）出現(xiàn),通常相較于導(dǎo)航條區(qū)域,有自己的文字區(qū)

域位置,在整個頁面視覺節(jié)奏上,形成反差對比感

頁腳

頁腳和頁頭能運用頁面更完整,頁頭是在頁面的頂部位置,

放置站點主題,而頁腳放置的是副導(dǎo)航菜單標(biāo)題,制作者或公司信

息，版權(quán)日期.

圖片

所謂圖形并茂,相得益彰,文字和圖片具有一種相互補(bǔ)充的

視覺關(guān)系,最志向的效果是文字圖片的親密協(xié)作，既能活躍頁面，

又能使主頁有豐富的內(nèi)容，圖片和文本是豐富網(wǎng)頁的兩

大構(gòu)成元素，圖片為點綴增加文本的可讀性,趣味性,文本為闡述信

息內(nèi)容

分析:對于這個我體會比較深我覺得在設(shè)計頁的時候，很多

時候假如我們加了圖片進(jìn)去了就效果大不同了，比如看那些韓式

風(fēng)格的網(wǎng)站很多就是用的這種風(fēng)格.

多煤體

網(wǎng)站要吸引閱讀者留意，頁面的內(nèi)容可以是三維動畫，F(xiàn)lash

等技術(shù)來表現(xiàn),讓聲音,動畫,視頻等其他媒體更多的出現(xiàn)在人們

的視野里,豐富網(wǎng)頁多層次的視覺視聽效果,更貼近于生活,

由于網(wǎng)絡(luò)帶寬的客管限制,在運用多煤體的形式表現(xiàn)內(nèi)容時，應(yīng)考慮

的客戶端的訪問速度.

分析:這個也很重要我覺得有了一些多煤體,往往會有意想不到

的效果

分析:上面這些從頁頭始終到多煤體我的總體感覺是首先我們要內(nèi)容

認(rèn)清頁面的這些元素，當(dāng)我們認(rèn)清以后,我們就要對這些元素

定義他的特點，一般放置那些東西,這樣我們在設(shè)計的時候

我們也就是把框加和造型定義好以后，我們就應(yīng)當(dāng)考慮頁里應(yīng)當(dāng)

放置那些東西了.

3.2網(wǎng)頁設(shè)計的主要視覺元素

導(dǎo)航樣式

其實它就是一組超鏈接,是整個網(wǎng)站的提綱,好處很多，也是特

別必要的.導(dǎo)航的樣式很多有彈出的，移動的等等很多.

導(dǎo)航的位置結(jié)構(gòu):可以細(xì)分為左文右導(dǎo)航欄,左導(dǎo)航欄右文，左

右導(dǎo)航中間欄，舉薦運用第一種.

分析:我覺得不管運用那一種，總之目的一個,起導(dǎo)航的作用我們

可以使它更加美觀更加有特色.

比如說有位置變化的導(dǎo)航，圖標(biāo)修飾的導(dǎo)航,于網(wǎng)站

內(nèi)容相關(guān)的流程圖表為導(dǎo)航,構(gòu)思奇妙.

用顏色來區(qū)分的導(dǎo)航

網(wǎng)站標(biāo)記

是一站點的特色及內(nèi)涵，起圖形的設(shè)計創(chuàng)意來自于網(wǎng)站的名稱

及內(nèi)容,一般會出現(xiàn)在站點的每一個頁面上,是網(wǎng)站給人的第一

印象，logn的作用很多,最重要的是表達(dá)網(wǎng)站的理念.便于人們

識別,被廣泛用于站點的鏈接,宣揚等,類似的企業(yè)標(biāo)記

log。一般通過圖案，文字的組合,達(dá)到被標(biāo)識的戰(zhàn)事說明，溝通溝通,

從而提升訪問者的閱讀愛好,增加網(wǎng)站印象的目的.

分析:我很認(rèn)同多表示起作用這一點，至于怎么設(shè)計標(biāo)記,就是表達(dá)網(wǎng)

站的理念.便于人僅識別，廣泛應(yīng)用.標(biāo)記的設(shè)計應(yīng)及網(wǎng)站的屬性相吻

合,不少知名網(wǎng)站logo設(shè)計特別簡潔，易記.

文字的排版

文字和圖片是網(wǎng)頁中的兩大構(gòu)成要素，文字排列組合的好壞,直接影

響到其版面的視覺傳達(dá)效果.

文字設(shè)計的勝利及否不僅在于字體本身的書寫.同時也在于其運用的

排列組合是否得當(dāng)，為了造成

生動對比的視覺效果,可以以風(fēng)格,大小,方向，明暗度等方面選擇對

比的因素,也可以把它們當(dāng)作

視覺中的點,線,面來加以引用，使文字和內(nèi)容及頁面的其他元素有基

的結(jié)合起來，成為一個整體.

網(wǎng)頁的文字一般體現(xiàn)在以下幾個方面：網(wǎng)站或網(wǎng)頁的標(biāo)題，網(wǎng)頁正文，

文字導(dǎo)航欄,版權(quán)說明等相關(guān)信息，圖形中的文字,裝飾用的文字等.

通常一套網(wǎng)頁結(jié)構(gòu)中最多出現(xiàn)三種字體，一種用作標(biāo)題,一種用作導(dǎo)

航按鈕和小圖標(biāo)，另外一種則

用作正文.

1):標(biāo)題設(shè)計

標(biāo)題可以分為網(wǎng)站的標(biāo)題和欄目標(biāo)題兩類，網(wǎng)站標(biāo)題是網(wǎng)站或者企業(yè)

標(biāo)記和名稱等文字，網(wǎng)站的標(biāo)題文字要符合網(wǎng)站的主題及風(fēng)格.

標(biāo)題除了置于段首,還可以居也橫向，堅向等編排處理,制造新的設(shè)

計效果.

欄目標(biāo)題是頁面視覺的起始點,一般來說以簡潔,清晰，易于閱讀為宜,

標(biāo)題文字的字體須要要依據(jù)內(nèi)容和主題來選擇,最好及內(nèi)文字體有所

區(qū)分，粗大一些，以示突出.

用圖形設(shè)計制作標(biāo)題可以避開一模一樣的文字標(biāo)題所帶給人的單調(diào)

感和枯燥感.

分析:我覺得標(biāo)題是應(yīng)當(dāng)突出醒目，簡潔，有特性，符合網(wǎng)站的主題風(fēng)

格.

2):文字的層次

網(wǎng)頁中的文字須要依據(jù)大小,色調(diào),粗細(xì)來分出標(biāo)題,正文和段落,形

成一種視覺的節(jié)奏感.

結(jié)構(gòu)中規(guī)劃最主要的部分就是〃對齊〃和〃平衡〃

依據(jù)內(nèi)容和版面的要求，在頁面主次支配上，可以突出圖形，文字則占

較小的份量，也可以突出

文字，填入適當(dāng)?shù)奈菪?，使整個頁面看起來均衡有序.

3)文字的整體編排

a:文字的疊置

b:文字的圖形化

圖像

是除了文字之外，網(wǎng)頁頁面上最重要的視覺設(shè)計元素莫過于圖

象了，網(wǎng)頁中圖像的造型是頁面

設(shè)計中最重要的視覺要素,從視覺規(guī)律上看,人們對及圖象的愛好大

過及文字，

我們應(yīng)當(dāng)形成畫面的主要圖象,其他圖象起,配套作用.

圖片的格式：網(wǎng)頁通常運用的格式為:gif和JPEG除此以外還有兩

種未被廣泛應(yīng)用的圖象格式：

PNG和MNG

1：圖片的格式

(l)GIF格式

優(yōu)點：支持透亮和交織模式和交織

缺點：最多只能運用256種顏色

(2)JPEG格式

優(yōu)點:支持24真彩,適當(dāng)于具有豐富的細(xì)微環(huán)節(jié)的高質(zhì)量圖象

缺點:采納了一種失真的壓縮算法.通過去掉圖象的部分信息來獲

得較高的壓縮比.

(3)PNG格式

優(yōu)點:在透亮上可以覆蓋任何背景上看不到的接縫，改善了gif透

亮圖象描邊不掛的問題.

缺點:首先不支持動畫的應(yīng)用，雖然采納了無損壓縮方式，使其具有

相同的圖象質(zhì)量的png

圖象文件比JPEC圖象文件小，但是JPEG可以通過適當(dāng)犧牲畫

面的品質(zhì)而取得比pNG更小

文件尺寸另外,png不支持CMYK模式

(4)MNG格式

分析:我覺得上面幾種圖片的格式各有特點，駕馭他們各自的優(yōu)缺點，

我們就可以很好的利用他們.

2:圖片的類型

1)攝影類能夠直觀,真實的再現(xiàn)產(chǎn)品，個人,企業(yè)形象，因此在網(wǎng)頁中

運用范圍最廣

2）矢量漫畫類

3）抽象圖形類

4）圖標(biāo)圖形類

3:圖片的排版

一個頁面上的視覺中心,一般放上重要的文字和圖片

4:文字圖片的留白量

主要指除字體本身所占用的畫面的空間之外的空白，即字間距離

以及其四周空白區(qū)域，

文字組合的還壞,很大程度取決于空白的運用是否得當(dāng)，不同類別的

文字的空間要適當(dāng)集中

，并利用空白加以區(qū)分.

留好的空白和縫隙是有品位,有才智,甚至有實力的表現(xiàn)，留空白可以

加內(nèi)容的獨立性，又是版面

增加節(jié)奏感的最佳方法.

分析:確實我覺得留空白能夠體現(xiàn)出作者的設(shè)計風(fēng)格以及很多東西

背景

1：底紋背景是指網(wǎng)頁或表格的背景圖案,往往通過不同肌理效果來

表現(xiàn)

對于現(xiàn)在的網(wǎng)絡(luò)來說運用100K大小的圖片已經(jīng)沒有障礙.

底紋背景,通常色調(diào)要比較柔軟,重要起襯托主頁內(nèi)容，設(shè)計的作用，

運用閱讀者一眼看到它，但

不喧賓奪主,設(shè)計的時候要設(shè)計好背景中圖形及頁面其他元素之間的

排列關(guān)系.做到風(fēng)格統(tǒng)一

首尾呼應(yīng),渾然一體.

2:肌理背景

動畫

1):gif格式的

2):swf格式的

廣告banner

廣告文字有一般的尺寸

通常banner的文字要盡可能的簡潔明白，考慮到文字的搭配,協(xié)作的

圖形不要太困難，為了突出

主題，文字盡量運用黑體粗體等字體,而不相宜用過多種類型的字體,

避開造成眼花的感覺，為了使

不增加圖片的占用空間，圖形盡量選擇顏色較少的，適應(yīng)存儲為jpg

格式的靜態(tài)圖形.

第四章網(wǎng)頁設(shè)計的風(fēng)格

4.1網(wǎng)頁設(shè)計構(gòu)成要素

網(wǎng)頁的風(fēng)格，圖形，內(nèi)容千變?nèi)f化，構(gòu)成圖形圖像的最基本的造型元素

是點,線，面，的變化組合構(gòu)成網(wǎng)頁設(shè)計的多樣化,是及獨具匠心獨特

性相聯(lián)系.

點線面的變化是網(wǎng)頁設(shè)計活力的體現(xiàn),也是創(chuàng)建形式美的根本要求，

使網(wǎng)頁設(shè)計具有不同審美

傾向的特征

假如以不同圖形或者單位來劃分，點,線,面是相對的

點的構(gòu)成

在網(wǎng)頁設(shè)計中分割點的屬性可以創(chuàng)建出千變?nèi)f化的點造型

點具備劇烈的視覺吸引力，點的數(shù)量會有生動感，點的連續(xù)會產(chǎn)生節(jié)

奏,韻律和方向，疏密的點陣會產(chǎn)生空間感，點的形態(tài),方向，大小，位

置，

聚焦,層疊，交織能給人帶來不同的心埋感受.

視覺上的點可以是圓形,也可以是方型,通過交疊,錯位,大小,方向的

變化，產(chǎn)生歡快,跳動的風(fēng)格.

線的構(gòu)成

線是由點的移動或者連續(xù)排列構(gòu)成的,或者說是由兩點連接而成,是

不占面積的.

用線能表現(xiàn)作品情感和抽象意義，網(wǎng)頁的工整感,速度感也是靠錢來

表現(xiàn)的.

線在空間中具有方向感和運動感.

總的來說,線分為直線和曲線二種,直線分為垂直線,斜線,水平線，曲

線分為幾何線，自由曲線

長短,形態(tài)的變化,堅硬,力氣,速度的感覺,等等很多都表現(xiàn)很多東

西.

可以運用重復(fù),近似,漸變,對比,等手法將不同的線運用的頁面中去,

以獲得不同的效果,但是要

留意對比,協(xié)調(diào)的效果.

線是分割頁面的主要元素之一,是確定頁面風(fēng)格的基本元素，依據(jù)各

自線形的特征,可以設(shè)計出不同風(fēng)格的

網(wǎng)頁.

分析:我覺得線就是我們美術(shù)里的線表達(dá)的意思一樣的

面的構(gòu)成

點的密集,線的運動就產(chǎn)生了面，面通過大小，位置,形態(tài),角度的變化,

形成自己的特性和情感特征.面的組合是敏捷多樣的,一個面可能有

疊加，重合，穿插的效果.

分析:我們通過美術(shù)的角度去看面,然后理解通過面面的組合我們能

夠達(dá)到很到不同的效

果

混合的構(gòu)成

點，線,面是視覺構(gòu)成的基本元素，具有不同的情感特征，是最重要的

表現(xiàn)手段.

我們單獨的用某個點,線,面可能有些單調(diào)，但是假如組合起來的話

往往就會產(chǎn)生很多意想不到的效果

分析:我覺得在網(wǎng)頁上設(shè)計東西我們運用點線面就和我們在一張白

紙上畫畫一樣的.

其實在設(shè)計前我可以在紙上畫出其草圖

4.2網(wǎng)頁設(shè)計的風(fēng)格類型

網(wǎng)頁的設(shè)計作品事實上沒有好壞之分，只有風(fēng)格類型上的區(qū)分，網(wǎng)頁

的應(yīng)用范圍很廣，幾乎

覆蓋了全部行業(yè)，網(wǎng)頁的整體風(fēng)格要靠圖形圖象,文字,色調(diào),版式，

動畫來表現(xiàn).

在不同的領(lǐng)域中，藝術(shù)創(chuàng)作的角度方式是有區(qū)分的，網(wǎng)頁風(fēng)格大致可

以分為:平面風(fēng)格，

矢量風(fēng)格，像素風(fēng)格,三維風(fēng)格

網(wǎng)頁的〃造相〃

凡是較聞名，有影響的網(wǎng)站，已經(jīng)在網(wǎng)頁風(fēng)珞方面形成了自己的特點.

〃造相〃就是要求網(wǎng)頁版面總體設(shè)計要求能夠打動人,吸引人的視覺形

象,要有一個強(qiáng)勢的區(qū)分

于其他網(wǎng)站的獨特相貌表情，網(wǎng)站依據(jù)各自所要表現(xiàn)的主題,設(shè)計出

各自不同風(fēng)格的版面風(fēng)格.

這個觀念可以因設(shè)計者的風(fēng)格,感悟,經(jīng)驗不同，從而達(dá)到駕御不同版

面的目的.

平面風(fēng)格

平面設(shè)計是二維的設(shè)計，平面風(fēng)格始終是基于一個二維視圖來

工作的，側(cè)重于構(gòu)甌色調(diào)以及表達(dá)的思維主旨，往往給人以空靈的意

境和透氣的爽快的視覺，這種構(gòu)圖形式可以在有限的頁面中表現(xiàn)出無

限的空間感覺

此種風(fēng)格在網(wǎng)頁設(shè)計里最常見

分析:我覺得確定某種風(fēng)格很重要，然后我們可以畫一個有特性的平

面風(fēng)格的圖然后在進(jìn)行設(shè)計.

矢量風(fēng)格

矢量圖運用直線和曲線來描述圖形，這些圖形的元素大多是一些點,

線,矩形，多邊型，圓和弧線等基礎(chǔ)元素,它們都是通過數(shù)學(xué)公式計算

獲得的,矢量圖形最大優(yōu)點是無論放大縮小也會失真，

最大的缺點是難以表現(xiàn)色調(diào)層次的豐富的逼真效果

矢量圖是世界通用的設(shè)計語言，由于具有夸張,極具有特性的裝飾表

現(xiàn)手法，目前在國內(nèi)互聯(lián)網(wǎng)上被運動的越來越多.

分析:我覺得必需認(rèn)清它的優(yōu)點缺陷，并理解它一般能表達(dá)的風(fēng)格，這

樣在什么時候該用的

我們就心理有底了.

像素風(fēng)格

像素圖屬于點陣式圖象,它是一種圖標(biāo)風(fēng)格的圖象,更強(qiáng)調(diào)清晰的

輪廓，明快的色調(diào)，幾乎不用混疊方法來繪制光滑的線條，由于很多不

同顏色的點一個奇妙的組合及排列在一起,構(gòu)成了一副完整的圖像，

這些點稱為像素，圖像稱為像素畫.目前像素畫制作技術(shù)以日本，韓國

比較成熟，像素風(fēng)格的網(wǎng)站,為互聯(lián)網(wǎng)添加了獨特，亮麗的風(fēng)景線.

分析:對于這個我不是很明白我只知道的時候它們應(yīng)當(dāng)是是一個個

的像素點構(gòu)成的吧

質(zhì)

三維風(fēng)格

三維是在定視圖，正視圖，側(cè)視圖以及透視圖來創(chuàng)作編輯物

體的，以一個具有長,寬,高3種度量的立體物質(zhì)形態(tài)出現(xiàn),這種形態(tài)

可以表現(xiàn)在商品的外性上,也可以表現(xiàn)在商品的容器或者其他

地方.在網(wǎng)頁設(shè)計里,三維風(fēng)格表現(xiàn)簡單得多，三維空間的設(shè)計惋惜助

十三維的造型手法,通過折疊，凹凸的處理，使阿面產(chǎn)生浮雕,立體等

三維效果,三維構(gòu)成以豐富的厚重的內(nèi)涵,深度以及多層次,全方位的

呈現(xiàn),給人以深厚,劇烈的視覺印象.

分析:對于三維的我覺得我平常見的也比較多，一般立體感比較強(qiáng)

4.3軟件界面簡析

軟件界面作為一種特殊媒體設(shè)計,具有平面,立體設(shè)計普遍特征的同

時，還具有自身的獨特性，

從根本上看,它是一種以功能為主的設(shè)計

無論是網(wǎng)頁設(shè)計還是軟件界面的設(shè)計，它們之間正越來越多地相互借

鑒,相互滲透.

分析:這里告知的是網(wǎng)頁設(shè)計及軟件界面設(shè)計是不同的

U1行業(yè)常用名詞

UI的本意是用戶界面,是英文User和Interface的縮寫

網(wǎng)站設(shè)計及用戶界面設(shè)計的區(qū)分在于設(shè)計師必需放棄對界面的完全

限制,部分由用戶及其客戶端,硬件來確定

UI是人機(jī)交互設(shè)計的圖形界面設(shè)計部分,交互設(shè)計所提倡的是使產(chǎn)品

內(nèi)容被簡單的運用

分析:我覺得產(chǎn)品內(nèi)容被簡單的運用這個值得參考

GUI是一種可視化界面,它運用圖形界面代替正文界面，也是一種結(jié)

合計算科學(xué),美學(xué)，心理學(xué)，

行為學(xué)，以各商業(yè)領(lǐng)域須要分析的人機(jī)系統(tǒng)工程,強(qiáng)調(diào)人,機(jī),環(huán)境三

者作為一個系統(tǒng)進(jìn)行總體設(shè)計

GUL即人機(jī)交互圖形化用戶界面設(shè)計,它可以優(yōu)化產(chǎn)品的性能,使其更

適合用戶的操作需求,直接提升產(chǎn)品的市場競爭力.

分析:我覺得GUL設(shè)計應(yīng)當(dāng)是一種專業(yè)針對強(qiáng)的設(shè)計

軟件界面設(shè)計

界面設(shè)計是為了滿意軟件專業(yè)化,標(biāo)準(zhǔn)化的需求,對軟件運用界面

進(jìn)行美化,優(yōu)化,規(guī)范化的設(shè)分支具體包括軟件啟動封面設(shè)計,軟件框

架設(shè)計，按鈕軟件,面版設(shè)計,菜單設(shè)計等等

界面可分為感覺（視覺,聽覺）和情感兩個層次,用戶界面設(shè)計是屏幕

產(chǎn)品的重要組成部分

用戶界面設(shè)計的三大原則是:置界面于用戶的限制之下，削減用戶的

記憶負(fù)擔(dān)，保持界面的一樣性.

界面設(shè)計是以功能性界面為基礎(chǔ)，以環(huán)境界面為前提，以為情感界面

為重心而構(gòu)成的,它們之間

形成有機(jī)和系統(tǒng)的聯(lián)系

界面設(shè)計的運用，核心是設(shè)計分析

中國軟件開發(fā)已很大程度上及西方接軌,UI在中國發(fā)展須要一個自上

而下的推動性改革

分析:我覺得上面的文字可以細(xì)致推敲

軟件啟動封面大小多為主流顯示辨別的1/6大,應(yīng)醒目地標(biāo)注制作或

者支持的公司標(biāo)記，

產(chǎn)品商標(biāo),軟件名稱,版本號，網(wǎng)址,版權(quán)聲明，序列號等信息，以樹立

軟件形象,便利運用者或購買者在軟件啟動的時候得到提示.

界面色調(diào)的要求:計算機(jī)屏幕的發(fā)光成像和一般視覺成像有很大的不

同，應(yīng)當(dāng)留意這種差別并做出

恰當(dāng)?shù)纳{(diào)搭配，對用于長時間運用系統(tǒng)的用戶應(yīng)當(dāng)運用用戶在較長

時間運用后不至于感覺到視覺疲憊，例如：以純度較低的淡彩,灰色為

主配色，背景深,前景淺等原則,盡量運用同類色,近似色

系，切記色調(diào)過多，使人產(chǎn)生紛繁蕪雜的感覺,嚴(yán)峻影響用戶視覺交互

分析:我覺得上面說的很對,應(yīng)當(dāng)好好分析借鑒

面板

我們習(xí)慣稱之為皮膚

面板的設(shè)計應(yīng)當(dāng)具有縮放功能,面板應(yīng)當(dāng)對功能劃分清晰,應(yīng)用和對

話框,彈出框風(fēng)格匹配,盡量節(jié)約空間，切換便利.

圖標(biāo)用來宣揚商家的商標(biāo)或者特定的標(biāo)記，在軟件界面中可以視操作

系統(tǒng)的重要元素，界面中的圖標(biāo)是功能標(biāo)識,都具有快捷傳遞信息，

便于記憶的特點.

第二部分網(wǎng)頁配色

彩色網(wǎng)頁具有吸引力的特征，有悅目，裝飾性強(qiáng)等特點.

在好用美術(shù)中，常有〃遠(yuǎn)看色調(diào)近看花,先看顏色后看花,七分顏色三

分花〃的說法，這也說明在任何

設(shè)計中，色調(diào)對視覺的刺激起到了第一信息傳達(dá)的作用.

色調(diào)是光的一種特性,是光線的一部分經(jīng)有色物體反射刺激眼睛,在

頭腦中所產(chǎn)生的一種反應(yīng)

分析：對于色調(diào)以前我細(xì)致探討過,色調(diào)構(gòu)成的筆記重點全面分析了

5..色調(diào)的感覺

.色調(diào)是及人的感覺（外界的刺激）和人的知覺（記憶,聯(lián)想,對比

等）聯(lián)系在一起的，色調(diào)的感覺往往存在于色調(diào)的知覺中.每個人對及

色調(diào)的感覺是有差異的，由于國家,宗教等不.不同的人

對色調(diào)的感覺是有差異的

灰色調(diào)給人親切的感覺：

灰色讓人有平穩(wěn)踏實,穩(wěn)重親近的感覺，易于長時間地觀看，但較壓抑

光明的顏色使人的心情愉悅但不易于長時間的看,簡單有焦躁的感

覺

男性相關(guān)的顏色:通常運用較深厚硬的黑棕咖啡天藍(lán)色

女性相關(guān)的顏色:通常運用粉色,綠色,挑紅色或者美黃色等

環(huán)繞相關(guān)主題的顏色:通常是運用同類色,為藍(lán)色,翠綠等干凈明快的

淺色系

分析:我覺得上面這些很重要，因為我們既要到不同方面的顏色一般

用什么方面

也應(yīng)當(dāng)知道什么樣網(wǎng)站用什么顏色.

配色方案通常是依據(jù)主題而不同的

以上不同主題還有很多，如中國文化風(fēng)俗,喜愛運用一些紅色,純紫，

亮黃色

色調(diào)有冷,暖的感覺

色調(diào)有進(jìn)退和張縮的感覺

色調(diào)有輕重,軟硬的感覺

色調(diào)有華麗樸實的感覺

色調(diào)有主動及消極的感覺

色調(diào)的醒目性

色調(diào)和背景之間的明度差,直接影響著欣賞者的分辨度

色調(diào)感覺的偏差

在網(wǎng)頁設(shè)計中，除非是為了追求特殊特性的主題效果,否則色調(diào)的

感覺及內(nèi)容不符,無論多么漂亮的配色,都令人感覺不舒適

5.2色調(diào)的屬性

色相

明度

純度

5.3常用的基本概念

原色

間色

復(fù)色

補(bǔ)色

鄰近色

同類色

暖色

冷色

5.4網(wǎng)頁色調(diào)的色調(diào)組合

色調(diào)

主色調(diào)

輔色調(diào)

點晴色

背景色

色調(diào)的對比

色相對比

明度對比

純度對比

補(bǔ)色對比

色調(diào)的調(diào)和

同種色的調(diào)和

類似色的調(diào)和

對比色的調(diào)和

漸變色調(diào)和

分析:這一章我寫的東西比較少,對于這一章的內(nèi)容在色調(diào)構(gòu)成里其

實我寫的很具體了，所以完全可以參照那里,這里只點一下了

第六章網(wǎng)頁中的色調(diào)

最快速也是最長久地給訪問者留下網(wǎng)站的印象是因素是色調(diào)

6.1網(wǎng)頁平安色

運用網(wǎng)頁平安顏色進(jìn)行網(wǎng)頁配色可以避開原有的顏色失真的問題，

網(wǎng)頁平安色可以在下載

分析:所謂用網(wǎng)頁平安顏色就是它可以避開原有顏色失真的狀況，否

則就會利用閱讀器內(nèi)置調(diào)色版

中及顏色最近的顏色進(jìn)行替換.我們可以依據(jù)平安色譜很好駕馭限

制網(wǎng)頁中的環(huán)境顏色.

6.2常用的網(wǎng)頁的色調(diào)模式

RGB色調(diào)模式

由于顯示器是采納RGB這種方式表示色調(diào),因此該色調(diào)空間法是最常

見的表現(xiàn)手法.RGB模式以RGB色調(diào)為基礎(chǔ),而RGB以RGB模式為基礎(chǔ),

而RGB型剛依靠混合不同的紅綠藍(lán)值來建立色譜中的大多顏色

分析：因為顯示器是用RGB實現(xiàn)的,所以我們用RGB色調(diào)模式整合性應(yīng)

當(dāng)是最好的.

IndexEnd色調(diào)模式

索引顏色模式

該模式限制圖象大小，運用次模式可以有效的縮減圖象文件的大小，

而且可以適度保持圖象文件的色調(diào)品質(zhì)，很適合制作放置于網(wǎng)頁頁面

上的圖象文件或絲網(wǎng)印刷中運用的圖象文件,GIF就是256色的圖象

格式.

分析:對于上面的二種模式,我們究竟在什么運用那種模式通常對圖

象質(zhì)量要求較高的網(wǎng)站，要求

真實呈現(xiàn)真彩色的產(chǎn)品攝影圖片，依次都運用RGB模式.

對于網(wǎng)頁色差較小,粗造的肌理材質(zhì)，運用Indexed模式比較契合網(wǎng)

網(wǎng)本身的要求.

6.3網(wǎng)頁設(shè)計中色調(diào)基本原則

整體性

色調(diào)的整體性，就是網(wǎng)頁面上各部分的色調(diào)從色調(diào)和比例上都有各

自的角色,主色調(diào),協(xié)助色，點睛色,背景色一起組合成有節(jié)奏的韻律,

和諧統(tǒng)一的色調(diào)關(guān)系

色調(diào)的基調(diào)是否整體和諧,主要從色相的紅,黃,綠等,色性的冷色調(diào),

暖色調(diào)，明度的亮色階,喑色階,純度的高純度，低純度等相互搭配組

成來看,通常是依據(jù)頁面內(nèi)容以主題進(jìn)行相應(yīng)的選擇，

比如先確定一種主色,然后協(xié)助色，點睛色,留意色調(diào)的相互襯托關(guān)系

和各種對比因素，協(xié)調(diào)因素.

當(dāng)感覺頁面色調(diào)搭配不舒適時,就可以利用白，黑色,灰色在里面起到

協(xié)助協(xié)調(diào)的作用.

適用性

要依據(jù)不同類型的網(wǎng)站選擇最適合的色調(diào)，不同類型的網(wǎng)站須要運用

不同的色調(diào)效果去表現(xiàn)，使

形式及內(nèi)容相統(tǒng)一，符合人們?nèi)粘９逃械恼J(rèn)知習(xí)慣，例如：醫(yī)學(xué)類較適

合雅致，安靜的顏色食品類

多考慮能引發(fā)食欲的食物固有色，環(huán)境類當(dāng)然以綠色，藍(lán)色為首選.

選擇色調(diào)的時候應(yīng)綜合考慮多方面的因素，而不能真依據(jù)自身喜好的

習(xí)慣顏色來做主觀的處理

獨特性

對各色相的特性要有充分的了解,在運用的時候要大膽突出其特性

的特征,避開及其他同類網(wǎng)站雷同，要符合該網(wǎng)站的主題內(nèi)容的要求,

在不同脫離運用性的狀況下多嘗試,是顏色的獨特性充分發(fā)揮魅力，

網(wǎng)站便會在及眾同類網(wǎng)站脫穎而出.

6.4網(wǎng)頁設(shè)計中色調(diào)的作用

視覺區(qū)域的劃分

依據(jù)網(wǎng)站不同主題內(nèi)容來區(qū)分頻道或者欄目，使人加深印象

色調(diào)在欄目間的應(yīng)用

在各導(dǎo)航攔之間做顏色區(qū)分，二級頁面的主色和其他協(xié)助元素的色調(diào)

也隨著整體色調(diào)而變化.

韓國網(wǎng)站較喜愛用色調(diào)來區(qū)分各二級頁面的內(nèi)容區(qū)域

色調(diào)在頁面中的應(yīng)用

在同級頁面里,色調(diào)隨著產(chǎn)品的屬性變化,在黑白劇烈的視覺反差中,

產(chǎn)品的形象突此形成顯明的對比

純凈的色調(diào)在黑色及白色的襯托下，其悅目動人之處被發(fā)揮到極致.

引導(dǎo)主次關(guān)系

有很多因素可以影響色調(diào)的主次關(guān)系，色調(diào)的大小就是其中最重要的

一項，色調(diào)的大小會令色調(diào)的

的主次關(guān)系有一種生動的效果,具體可以是位置的變化,也可以是面

積的變化.

例:利用純度的對比利用純度擺放位置,加強(qiáng)視覺的中心焦點

利用面積以及冷暖的對比主體物風(fēng)光積小,利用冷暖對比，令

主體產(chǎn)品突出，形成劇烈的反差.

利用純度對比能快速地強(qiáng)化視覺中心效果，無彩色的黑白對也相當(dāng)劇

烈

營造活躍的氣氛

能營造真實的場景空間，活躍并渲染氣氛

色調(diào)營造的空間感屬于橙色和黑色的雙色調(diào),把其他雜色都過濾,并

增加真實的空間感.

色調(diào)所營造的氣氛

純凈的藍(lán)色,在這里用老表現(xiàn)產(chǎn)品的高貴,純正的品質(zhì)，效果可是淋漓

盡致.

第7章運用的網(wǎng)頁

配色方案

色調(diào)的心理示意作用特別重要，它所產(chǎn)生的心理效應(yīng)發(fā)生在不同的層

次的類型中.

7.1色調(diào)的象征特征

色調(diào)的象征是從心理學(xué)角度去探討色調(diào)的情感和表現(xiàn)力的

色調(diào)語言具有的象征是由多種因素確定的，色調(diào)的聯(lián)想，既受人們的

閱歷,記憶,知識等因素確定

也因民族,年齡，性別的差別有所不同，還因性格,教養(yǎng),職業(yè),生活環(huán)

境等的差別而存在很多心理上的差異，由此形成的色調(diào)象征的多重性.

人們對于色調(diào)特征也并非不變，它會因民族間的交往而相

互接近,漸漸融合

色調(diào)的漸層變化里有高，中，低不同的調(diào)子,暗色中含高亮的對比,會

給人以清晰,激烈的感覺,如暗色的背景下,淡黃色,鮮黃色給人劇烈

的視覺刺激;暗色中含有中亮度的對比.會給人鎮(zhèn)靜,穩(wěn)定，深厚的感

覺,如暗色中間含有純藍(lán)色，中性色及低亮度的對比,給人以模糊，朦

朧,平和的感覺,如淺藍(lán)色及灰色.純色及暗色的對比,給人以激烈堅

硬的感覺.

在網(wǎng)頁設(shè)計中也常常采納象征性來表示主題及商品的屬性，還會運用

色調(diào)的象征性來表達(dá)冷暖，

輕重,興奮,沉靜,時尚及古典的感覺.

下面依據(jù)紅,橙,黃，綠,藍(lán),紫的色環(huán)依次以及非彩色的黑，白，灰對顏

色的象征屬性舉例分析.

紅色的熱忱

紅色的色調(diào)暖和，性格剛烈而外向，是一種對讓恩刺激性很強(qiáng)的顏色,

紅色簡單引起人的留意，也簡單使人興奮，激烈，驚慌,沖動,還是一種

簡單造成人的視覺疲憊的顏色.

在眾多顏色里,紅色最顯明生動,最熱情的顏色,極簡單汲引人們的目

光,紅色及黑色搭配,在商業(yè)設(shè)計中被譽(yù)為商.業(yè)勝利色,鮮亮的紅色多

用及小面積的點綴色.

紅色在不同明度,純度的狀態(tài)（粉紅,鮮紅,深紅）里所表達(dá)的情感是

不一樣的.

在網(wǎng)頁顏色的應(yīng)用的幾率中純粹運用紅色為主色調(diào)的網(wǎng)站相對較少,

通常都配以其他顏色進(jìn)行調(diào)和

中紅：由于紅色的特殊屬性,通常較多被用語食品，時尚休閑等

網(wǎng)站.

淺紅：粉紅色傳達(dá)著柔情,嬌美,羞澀,甜蜜,純真,誘惑的心理感

受.

深紅：深紅色傳達(dá)著穩(wěn)重,消極,成熟,高貴,無畏的心理感受.

橙色的華麗

橙色具有輕快,歡欣,收獲,時尚的效果

在整個色譜里,橙色具有極高的興奮度,最刺眼的色調(diào),給人以華貴而

暖和,興奮而熱情的感覺，也是令人激昂的顏色,有健康,富有活動，英

勇自由等象征意義.

中橙：亮麗的橙色傳達(dá)著暖和,華美,收獲,輝煌,豪華,興奮,時尚

的心理感受.

淺橙：傳達(dá)著喜悅,收獲,和諧，閃爍,溫順的心理感受.

深橙：傳達(dá)著華麗,古典,信仰,跳動,和諧的心理感受.

黃色的明快

黃色是陽光的色調(diào)，含有特別年輕的感覺,具有活潑及輕快的特點,象

征光明，盼望,高貴,開心.淺黃色表示柔弱,灰黃色表示病態(tài),它的亮

度最高，

和其他顏色協(xié)作很活潑,有暖和感覺,具有歡樂,盼望才智和輕快的特

性,有盼望及功名等象征意義,黃色也代表著土地,象征著權(quán)利，并且

還具有

神奇的宗教色調(diào).

黃色的性格冷漠,傲岸,敏感,具有擴(kuò)張和不安靜的視覺印象

的擴(kuò)張:在主色調(diào)的前提下,黃色是最光明的顏色,在幾乎搭配任何顏

色都能起到很亮麗，悅目的效果

中黃色：崇高,尊貴,輝煌,擴(kuò)張的心理感受.

淺黃色：傳達(dá)著明朗,開心,盼望,發(fā)展,雅致,清爽的心理感覺,較

適用于女性文化

深黃色：傳達(dá)著高貴,溫順，內(nèi)斂的心理感受.

綠色的活力

綠色及人類休戚相關(guān),是永恒的自然之色,代表了生命及盼望,也充溢

了青春的活力,綠色象征著和平及平安，發(fā)展及朝氣,舒適及安靜,松

弛

及休息,有緩解眼部疲憊的作用

綠色在黃色和藍(lán)色的冷暖之間,屬于較中庸的顏色,這種使得綠色的

性格最為平和,平穩(wěn),大度,寬容,是一種柔順,滿意，優(yōu)美里，受歡迎

的顏色.

溫順又有春天朝氣盎然的場景氣氛,只運用了少許低純度的橙色,藍(lán)

色作為點綴，馬上增加了活力.

中綠：黃綠色傳達(dá)著清爽,安靜,安逸,和平,柔軟,春天,青春的心

理感受.

淺綠：淺綠色傳達(dá)著優(yōu)雅,休息,平安,和諧,安靜,柔軟的心理感

受.

低純度,略微有些灰調(diào)的淺綠色,能起到視覺的作用,配以小

許高純度同類色，以增加生氣.

深綠：傳達(dá)著茂密,健康,成熟,穩(wěn)重,生命,開闊的心理感受.

藍(lán)色的博大

藍(lán)色是色調(diào)中比較沉靜的顏色，象征著永恒及深邃,高遠(yuǎn)及博大,壯闊

及浩渺,是令人心境暢快的顏色

藍(lán)色樸實,穩(wěn)重，內(nèi)向等性格,能夠襯托那些活潑的因素,具有較強(qiáng)擴(kuò)

張力的色調(diào)，同時也活躍也頁面，另一方面藍(lán)色也有消極,冷淡，保守

等意味

藍(lán)色及紅,黃等顏色運用得當(dāng)，可以構(gòu)成和諧對比的調(diào)和關(guān)系.

藍(lán)色也是網(wǎng)站設(shè)計中運用得最多的顏色.

中藍(lán)：傳達(dá)著深遠(yuǎn),永恒,沉靜,無限,理智,城實,寒冷的心理感受

淺藍(lán)：傳達(dá)著淡雅,清爽,浪漫,高級的心理感受,常常用及扮裝品,

女性，服裝網(wǎng)站.

深藍(lán)：穩(wěn)重,冷靜,嚴(yán)謹(jǐn),冷漠,深厚,成熟的心理感受.

紫色的高貴

姿色是一種在自然界中比較少見的顏色,象征著女性化，代表著高貴

及奢華,優(yōu)雅及魅九也具有

莊重,神圣和浪漫的品質(zhì)，另一方面又有孤獨,神奇等意味.

姿色的明度在有彩色的色度中是最低的，紫色的明度給人一種沉悶，

神奇的感覺，在紫色中紅色的

成分較多時,顯得華麗,和諧,在紫色中加入少量的黑，并具有沉穩(wěn),莊

重的感覺，在紫色中加入白色

，則變得優(yōu)雅,嬌氣,并充溢女性的魅力.

中紫：傳達(dá)著高貴，優(yōu)雅，幻想，神奇，莊重的心理感受.

淺紫：傳達(dá)著妖媚,優(yōu)雅,嬌氣,清秀,夢幻的心理感覺,并充溢女性的

魅力.

深紫：傳達(dá)著華貴，深遠(yuǎn)，神奇，孤獨，寶貴的心理感受.

黑色的神奇

黑色是暗色,是純度,色相，明度最低的非色調(diào)，象征著力氣,有時感覺

沉寞，虛空，有時感覺莊重，

肅穆,有時有意味著不祥和罪惡，自古以來,世界各族都公認(rèn)黑色代表

死亡及悲傷，黑色還具有能

汲取光線的特征,有一種變化無常的感覺.

黑色能和很多的色調(diào)構(gòu)成良好的對比調(diào)和關(guān)系,運用范圍很廣，也常

用來表示英俊的男人.

只要黑色為背景,前景都是主角，任何色調(diào)在它的襯托之下都一覽無

遺.

黑色在服裝,音樂，個人網(wǎng)頁等頗具有特性色調(diào)的網(wǎng)站有很多的應(yīng)用.

黑色傳達(dá)著肅穆,剛健,堅實,粗莽,黑暗,深厚,神奇,安靜,悲傷,壓抑

的心理感受.

灰色的內(nèi)涵

兩種或兩種以上的色調(diào)混合,是中性色,具有中等明度,無色調(diào)特點，

如搭配不好,頁面簡單顯得

灰暗,骯臟，任何色調(diào)加入灰色都顯得蓄而柔軟，灰色給人的高品位，

含蓄,精致,雅致,耐人尋味

等感覺，同時也簡單產(chǎn)生頹廢,蒼涼,消極,沉悶的意味.灰色能夠汲取

其他色調(diào)的活力，減弱色調(diào)的

對立面，起到融合的作用

灰色也被稱為高級灰色,是經(jīng)久不衰,最經(jīng)看的顏色.

灰色傳達(dá)著中庸,平凡,溫順,謙讓，中立,高雅的心理感受.

灰色傳達(dá)著虛心,平凡，中庸,孤獨,愁悶，消極的心理感受.

白色的純凈

白色是亮色,是明度組高的非色調(diào)，色感光明，也是最惹眼的顏色之一,

白色性格樸實，純凈，歡樂，

象征純粹,樸實,高雅等.

作為非色調(diào)，白色及黑色一樣,能及各種顏色相配和，構(gòu)成明快的對比

調(diào)和關(guān)系，及明麗的色調(diào)搭配

時,顯得更清爽,更具有活力

通常在網(wǎng)頁配色時，若感覺頁面沉悶，也可考慮加入白色試試,往往就

是點睛