第0章網(wǎng)頁配色

1、中國高等院校計算機基礎(chǔ)教育課程體系規(guī)劃教材基于基于Web標準的網(wǎng)頁設(shè)計標準的網(wǎng)頁設(shè)計第講 網(wǎng)頁設(shè)計藝術(shù)網(wǎng)頁設(shè)計的基本問題v從藝術(shù)的角度看從藝術(shù)的角度看v網(wǎng)頁設(shè)計屬于平面設(shè)計的問題網(wǎng)頁設(shè)計屬于平面設(shè)計的問題 布局的問題（三種布局方式） 配色的問題v從技術(shù)的角度看從技術(shù)的角度看 運用html，css等解決網(wǎng)頁布局和美觀的問題 所以網(wǎng)頁設(shè)計中很多技術(shù)問題都是為了使網(wǎng)頁看起來美觀網(wǎng)頁的布局網(wǎng)頁版面布局的方法v框架布局框架布局 將瀏覽器窗口分割成幾部分，每部分放一個不同的網(wǎng)頁（示例）v表格布局表格布局 將網(wǎng)頁元素裝填入表格內(nèi)實現(xiàn)布局，表格相當于網(wǎng)頁的骨架，因此表格布局的步驟是先畫表格，再往表格里填內(nèi)容。

2、vDIVCSS布局布局 用盒子布局，利用網(wǎng)頁元素本身的盒子模型，通過盒子在頁面上的排列和嵌套進行布局。 布局的含義v 網(wǎng)頁版面布局是網(wǎng)頁設(shè)計中的一項重要內(nèi)容。版面指的是網(wǎng)頁版面布局是網(wǎng)頁設(shè)計中的一項重要內(nèi)容。版面指的是瀏覽器看到的完整的一個頁面。因為每個人的顯示器分辨瀏覽器看到的完整的一個頁面。因為每個人的顯示器分辨率不同，所以同一個頁面的分辨率可能出現(xiàn)率不同，所以同一個頁面的分辨率可能出現(xiàn)800*600像素，像素，1024*768像素等。像素等。v 布局，就是以最適合瀏覽的方式將圖片和文字擺放在頁面布局，就是以最適合瀏覽的方式將圖片和文字擺放在頁面的不同位置。網(wǎng)頁版面布局是指定網(wǎng)頁內(nèi)容在瀏覽

3、器中的的不同位置。網(wǎng)頁版面布局是指定網(wǎng)頁內(nèi)容在瀏覽器中的顯示方式，例如徽標的位置、導航欄的顯示、主要內(nèi)容的顯示方式，例如徽標的位置、導航欄的顯示、主要內(nèi)容的排版等。經(jīng)常用到的版面布局結(jié)構(gòu)主要有以下幾種：排版等。經(jīng)常用到的版面布局結(jié)構(gòu)主要有以下幾種：常見網(wǎng)頁的版式v 131式式v 121式式v 藝術(shù)版式藝術(shù)版式v1-3-1式式v示例示例Logo banner導航條（導航條（Navigator)Bottom(版權(quán)信息）版權(quán)信息）欄目欄目1欄目欄目2欄目欄目3用表格實現(xiàn)用表格實現(xiàn)用用CSS布局布局實現(xiàn)實現(xiàn)表格布局的原則v各欄目之間必須相對各欄目之間必須相對獨立獨立，方法是把每個欄目裝，方法是把每個欄

4、目裝在一個單獨的表格中，這樣修改一個欄目時不會在一個單獨的表格中，這樣修改一個欄目時不會對其他欄目產(chǎn)生影響對其他欄目產(chǎn)生影響v各欄目之間必須用占位表格各欄目之間必須用占位表格(或或CSS邊界）留出一邊界）留出一定的空隙定的空隙v欄目采取欄目采取縱列縱列的形式排列的形式排列用CSS布局實現(xiàn)1-3-1布局中間幾列的盒子必中間幾列的盒子必須用一個大盒子包須用一個大盒子包含起來，否則這幾含起來，否則這幾列無法實現(xiàn)居中列無法實現(xiàn)居中網(wǎng)頁的配色網(wǎng)頁的配色v網(wǎng)頁不只是傳遞信息的媒介，同時也是網(wǎng)絡(luò)上的網(wǎng)頁不只是傳遞信息的媒介，同時也是網(wǎng)絡(luò)上的藝術(shù)品藝術(shù)品。如何讓瀏覽者以輕松愜意的心態(tài)吸收網(wǎng)。如何讓瀏覽者以輕松

5、愜意的心態(tài)吸收網(wǎng)頁傳遞的信息，是一個值得研究的課題。頁傳遞的信息，是一個值得研究的課題。 v任何網(wǎng)頁創(chuàng)意使用的視覺元素總的歸納起來不外任何網(wǎng)頁創(chuàng)意使用的視覺元素總的歸納起來不外乎三種：乎三種：文字文字、圖像圖像、色彩色彩。三者選用搭配的適。三者選用搭配的適當，編排組合的合理，將對網(wǎng)頁的美化起到直接當，編排組合的合理，將對網(wǎng)頁的美化起到直接的效果。的效果。色彩的基本知識v 色彩的色彩的RGB模式模式 ： RGB是表示紅色、綠色、藍色又稱為三原色光，英文為R(Red)、G(Green)、B(Blue)，在電腦中，RGB的所謂“多少”就是指亮度，并使用整數(shù)來表示。通常情況下，RGB各有256級亮度，

6、用數(shù)字表示為從0、1、2至255。 紅、黃、藍是三原色，其它色彩都可以用這三種顏色調(diào)和而成。網(wǎng)頁中色彩表達除了用顏色名稱表達外，就是用這三種顏色的數(shù)值表示：紅色color(255,0,0)、十六進制表示為(ff0000) 如：“bgcolor=#ffffff”表示背景色為白色色彩的基本知識v色彩的色彩的HSB模式模式 ：vHSB是指顏色分為是指顏色分為色相色相、飽和度飽和度、明度明度三個要三個要素。英文為素。英文為H(Hue)、S（Saturation）B（Brightness)飽和度高色彩較艷麗。飽和度低色飽和度高色彩較艷麗。飽和度低色彩就接彩就接 近灰色。亮度高色彩明亮，亮度低色彩暗近灰色

7、。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。一般淺淡，亮度最高得到純白，最低得到純黑。一般淺色的飽和度較低，亮度較高，而深色的飽和度高色的飽和度較低，亮度較高，而深色的飽和度高而亮度低。而亮度低。 色彩的三要素v 色相色相、明度明度和和飽和度飽和度構(gòu)成色彩的三要素。自然界中的顏構(gòu)成色彩的三要素。自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其它所有的顏色均屬于彩色，和各種深淺不一的灰色，而其它所有的顏色均屬于彩色，任何一種色彩都具有明度、純度、飽和度三大屬性。任何一種色彩都具有明度、純度

8、、飽和度三大屬性。(1). 色相色相色相指色彩的相貌。如：色相指色彩的相貌。如：紅、黃、藍紅、黃、藍、綠等。、綠等。(2).明度明度 明度指色彩的明暗程度。明度指色彩的明暗程度。(3).飽和度（純度）飽和度（純度）純度指色彩的純凈程度，純度越高，色相感越強。純度指色彩的純凈程度，純度越高，色相感越強。 色相(Hue)（1）色相）色相(Hue) 基本色相為：基本色相為：紅、橙、黃、綠、藍、紫紅、橙、黃、綠、藍、紫六色。在各色中間加插六色。在各色中間加插一兩個中間色，按光譜順序為：紅、橙紅、黃橙、黃、黃綠、綠、綠一兩個中間色，按光譜順序為：紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫、紫、紅

9、紫藍、藍綠、藍、藍紫、紫、紅紫,形成十二基本色相。形成十二基本色相。 色相的計算機數(shù)值表示v以顏色在色相環(huán)上的度數(shù)值來表示以顏色在色相環(huán)上的度數(shù)值來表示v如紅色是如紅色是0度，橙色是度，橙色是60度，黃色是度，黃色是120度，那么度，那么用色相值用色相值0表示紅色，表示紅色，60表示橙色，因此色相的取表示橙色，因此色相的取值應(yīng)該是值應(yīng)該是0360，但計算機中是用八位，但計算機中是用八位2進制數(shù)表進制數(shù)表示色相的，所以取值只能是示色相的，所以取值只能是0240，這樣還要把，這樣還要把原來的色相值乘以原來的色相值乘以2/3明度(Brightness)v （2）明度）明度(Brightness) 明

10、度是色彩的第二屬性。是指色彩的明暗程度，也叫亮度，體明度是色彩的第二屬性。是指色彩的明暗程度，也叫亮度，體現(xiàn)體現(xiàn)顏色的深淺。是全部色彩都具有的屬性，明度越大，色彩越亮。現(xiàn)體現(xiàn)顏色的深淺。是全部色彩都具有的屬性，明度越大，色彩越亮。明度越低，顏色越暗明度越低，顏色越暗飽和度(Saturation)v（3）飽和度）飽和度(Saturation) 也叫純度，指色彩的鮮艷程度。原色最純，顏色的混也叫純度，指色彩的鮮艷程度。原色最純，顏色的混合越多則純度逐漸減低。如某一鮮亮的顏色，加入了合越多則純度逐漸減低。如某一鮮亮的顏色，加入了白色白色或者或者黑色黑色，使得它的純度低，顏色趨于柔和、沉穩(wěn)。，使得它的

11、純度低，顏色趨于柔和、沉穩(wěn)。 純度網(wǎng)頁例圖 v（4）色彩的特質(zhì)）色彩的特質(zhì) 色彩的特質(zhì)指的是色彩和色彩組合所能引發(fā)的特定情緒反映。我色彩的特質(zhì)指的是色彩和色彩組合所能引發(fā)的特定情緒反映。我們依靠光來分辨顏色，再利用顏色和無數(shù)種色彩的組合來表達思想和們依靠光來分辨顏色，再利用顏色和無數(shù)種色彩的組合來表達思想和情緒。情緒。熱冷暖涼亮暗艷淡原色v 也叫也叫三原色三原色。即紅、黃、藍三種基本顏色。自然界中的。即紅、黃、藍三種基本顏色。自然界中的色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色，原色是其他顏色調(diào)配不出來的。除白色外，把三原色色，原色是

12、其他顏色調(diào)配不出來的。除白色外，把三原色相互混合，可以調(diào)和出其他種顏色。相互混合，可以調(diào)和出其他種顏色。根據(jù)三原色的特性做出相應(yīng)的色彩搭配，有根據(jù)三原色的特性做出相應(yīng)的色彩搭配，有最迅速最最迅速最有力最強烈有力最強烈的傳達視覺信息效果。的傳達視覺信息效果。 紅色網(wǎng)頁例圖 藍色網(wǎng)頁例圖間色v 又叫又叫二次色二次色。它是由三原色調(diào)配出來的顏色，是由。它是由三原色調(diào)配出來的顏色，是由2種種原色調(diào)配出來的。紅與黃調(diào)配出橙色；黃與藍調(diào)配出綠色；原色調(diào)配出來的。紅與黃調(diào)配出橙色；黃與藍調(diào)配出綠色；紅與藍調(diào)配出紫色，橙、綠、紫三種顏色又叫紅與藍調(diào)配出紫色，橙、綠、紫三種顏色又叫三間色三間色。在調(diào)配時，由于原

13、色在份量多少上有所不同，所以能產(chǎn)生在調(diào)配時，由于原色在份量多少上有所不同，所以能產(chǎn)生豐富的間色變化豐富的間色變化 v 間色是由三原色中的兩原色調(diào)配而成的，因間色是由三原色中的兩原色調(diào)配而成的，因此在視覺刺激的強度相對三原色來說此在視覺刺激的強度相對三原色來說緩和緩和不少。不少。屬于較易搭配之色。屬于較易搭配之色。間色盡管是二次色，但仍有很強的視覺沖擊間色盡管是二次色，但仍有很強的視覺沖擊力，容易帶來輕松、明快、愉悅的氣氛。力，容易帶來輕松、明快、愉悅的氣氛。 間色配色網(wǎng)頁復(fù)色v也叫也叫復(fù)合色復(fù)合色。復(fù)色是由原色與間色相調(diào)或由間。復(fù)色是由原色與間色相調(diào)或由間色與間色相調(diào)而成的色與間色相調(diào)而成的三

14、次色三次色，復(fù)色是的，復(fù)色是的純度最純度最低，含灰色成份低，含灰色成份。復(fù)色包括了除原色和間色以外。復(fù)色包括了除原色和間色以外的所有顏色。的所有顏色。 復(fù)色網(wǎng)頁示例復(fù)色網(wǎng)頁配色說明v 以上以上4種顏色中深綠色和赭石色為復(fù)色，之所以還種顏色中深綠色和赭石色為復(fù)色，之所以還選擇其它選擇其它2顏色，為的是更好的配合說明復(fù)色的特性，顏色，為的是更好的配合說明復(fù)色的特性，如果沒有另外兩種非復(fù)色搭配，頁面配色就可能出現(xiàn)骯如果沒有另外兩種非復(fù)色搭配，頁面配色就可能出現(xiàn)骯臟等不舒服的感覺。臟等不舒服的感覺。 v 復(fù)色是由兩種間色或原色與間色混合而成，因此色復(fù)色是由兩種間色或原色與間色混合而成，因此色相傾向較微

15、妙、不明顯，視覺刺激度緩和，如果搭配不相傾向較微妙、不明顯，視覺刺激度緩和，如果搭配不當，頁面便呈現(xiàn)易臟或易灰朦朦的效果，沉悶、壓抑之當，頁面便呈現(xiàn)易臟或易灰朦朦的效果，沉悶、壓抑之 感，屬于不好搭配之色。但有時復(fù)色加深色搭配能很好感，屬于不好搭配之色。但有時復(fù)色加深色搭配能很好的表達神秘感、縱深感空間感；明度高的多復(fù)色（參看的表達神秘感、縱深感空間感；明度高的多復(fù)色（參看明度的網(wǎng)頁例圖）多用來表示寧靜柔和、細膩的情感，明度的網(wǎng)頁例圖）多用來表示寧靜柔和、細膩的情感， 易于長時間的瀏覽。易于長時間的瀏覽。 網(wǎng)頁選色的考慮v 從從 以上例子可看出以上例子可看出三原色三原色視覺沖擊力最強，也最是刺

16、目的，視覺沖擊力最強，也最是刺目的，容易制造沖突、煩燥、不舒適的心情，所以是較難掌握的配容易制造沖突、煩燥、不舒適的心情，所以是較難掌握的配色，大面積大范圍使用要慎重。色，大面積大范圍使用要慎重。v 間色間色是由三原色是由三原色 中的兩色調(diào)配二次，間于原色和復(fù)色之間，中的兩色調(diào)配二次，間于原色和復(fù)色之間，屬于中性色，視覺沖擊力次之，顏色的刺激緩和不少，給人屬于中性色，視覺沖擊力次之，顏色的刺激緩和不少，給人舒適、愉悅的心情，是較容易掌握的配色，也是在設(shè)計中使舒適、愉悅的心情，是較容易掌握的配色，也是在設(shè)計中使用用 得比較多的顏色。得比較多的顏色。v 復(fù)色復(fù)色是由兩種間色或原色與間色相混合而產(chǎn)生

17、的顏色，呈灰是由兩種間色或原色與間色相混合而產(chǎn)生的顏色，呈灰色階，視覺沖擊力更弱，柔和但是使人沉悶壓抑。復(fù)色調(diào)配色階，視覺沖擊力更弱，柔和但是使人沉悶壓抑。復(fù)色調(diào)配好了，能體現(xiàn)出高層次高素好了，能體現(xiàn)出高層次高素 養(yǎng)的成熟特性魅力，也稱為高級養(yǎng)的成熟特性魅力，也稱為高級灰，是很經(jīng)看的顏色。灰，是很經(jīng)看的顏色。 色彩的4種角色v 主色調(diào)主色調(diào)頁面色彩的主要色調(diào)、總趨勢，其他配色不能超過該主要頁面色彩的主要色調(diào)、總趨勢，其他配色不能超過該主要色調(diào)的視覺影響色調(diào)的視覺影響v 輔色調(diào)輔色調(diào)僅次與主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持僅次與主色調(diào)的視覺面積的輔助色，是烘托主色調(diào)、支持主色調(diào)、起到融

18、合主色調(diào)效果的輔助色調(diào)。主色調(diào)、起到融合主色調(diào)效果的輔助色調(diào)。 v 點睛色點睛色 在小范圍內(nèi)點上強烈的顏色來突出主題效果，使頁面更加在小范圍內(nèi)點上強烈的顏色來突出主題效果，使頁面更加鮮明生動。鮮明生動。v 背景色背景色 襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。襯托環(huán)抱整體的色調(diào)，協(xié)調(diào)、支配整體的作用。網(wǎng)頁中色彩的角色示例色彩搭配的方案v同類色搭配同類色搭配v鄰近色搭配鄰近色搭配v互補色搭配互補色搭配v對比色搭配對比色搭配同類色v比鄰近色更加接近的顏色，色環(huán)中距離為比鄰近色更加接近的顏色，色環(huán)中距離為060度的顏色。它主要指在同一色相中不同的顏色度的顏色。它主要指在同一色相中不同的顏色變化。例

19、如，紅顏色中有紫紅、深紅、玫瑰紅、變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區(qū)別。它土黃、中黃、桔黃、淡黃、檸檬黃等等區(qū)別。它起到色彩起到色彩調(diào)和統(tǒng)一調(diào)和統(tǒng)一，又有，又有微妙變化微妙變化的作用。的作用。 同類色搭配鄰近色v是在色環(huán)上任一顏色同其毗鄰之色。鄰近色是在色環(huán)上任一顏色同其毗鄰之色。鄰近色也是類似色關(guān)系，只是范圍擴大了一點。例如紅也是類似色關(guān)系，只是范圍擴大了一點。例如紅色和黃色，綠色和藍色，互為鄰近色。色和黃色，綠色和藍色，互為鄰近色。 鄰近色搭配補色v補色補色(

20、分離補色）：分離補色）：色輪上的任意顏色，以及它的補色的兩邊顏色，當使色輪上的任意顏色，以及它的補色的兩邊顏色，當使用在同個版面上的時候被稱為用在同個版面上的時候被稱為“分離補色分離補色”。分離補色的。分離補色的運用可以造成運用可以造成很強烈很強烈的對比。的對比。 補色搭配對比色v 對比色是指在色環(huán)中的直接位置相對的顏色，如果想要使對比色是指在色環(huán)中的直接位置相對的顏色，如果想要使網(wǎng)站中的色彩網(wǎng)站中的色彩強烈突出、富有沖擊力的話強烈突出、富有沖擊力的話，可以選擇對比，可以選擇對比色搭配。色搭配。對比色搭配對比色搭配對比色搭配色彩的對比v 對比對比與與調(diào)和調(diào)和就是形式美的變化與統(tǒng)一規(guī)律就是形式美

21、的變化與統(tǒng)一規(guī)律 v 在一定條件下，不同色彩之間的對比會有不同的效果。在在一定條件下，不同色彩之間的對比會有不同的效果。在不同的環(huán)境下，多色彩給人一種印象，色彩單一給人另一不同的環(huán)境下，多色彩給人一種印象，色彩單一給人另一種印象。種印象。很多人都以為色彩對比主要是紅綠、橙藍、黃紫色的很多人都以為色彩對比主要是紅綠、橙藍、黃紫色的對比，實際色彩對比范疇不局限于這些。是指對比，實際色彩對比范疇不局限于這些。是指各種色彩的各種色彩的界面構(gòu)成中的面積界面構(gòu)成中的面積、形狀形狀、位置位置以及以及色相色相、明度明度、純度純度之之間的差別，使網(wǎng)頁色彩配合增添了許多變化、頁面更加豐間的差別，使網(wǎng)頁色彩配合增添

22、了許多變化、頁面更加豐富多彩。富多彩。 色相對比 v是指因色相之間的差別形成的對比。當主色相確是指因色相之間的差別形成的對比。當主色相確定后，必須考慮其他色彩與主色相是什么關(guān)系，定后，必須考慮其他色彩與主色相是什么關(guān)系，要表現(xiàn)什么內(nèi)容及效果等，這樣才能增強其表現(xiàn)要表現(xiàn)什么內(nèi)容及效果等，這樣才能增強其表現(xiàn)力。不同色相對比取得的效果有所不同，力。不同色相對比取得的效果有所不同，兩色越兩色越接近，對比效果越柔和。越接近補色，對比效果接近，對比效果越柔和。越接近補色，對比效果越強烈越強烈。 色相對比純度對比v是指不同色彩之間純度的差別而形成的對比。色是指不同色彩之間純度的差別而形成的對比。色彩純度可大

23、致分為高純度、中純度、低純度三種。彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中未經(jīng)調(diào)和過的原色純度是最高的，而間色多屬中純度的色彩，復(fù)色其本身純度偏低而屬低純度的純度的色彩，復(fù)色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯色彩范圍。純度的對比會使色彩的效果更明確肯定。定。 純度對比補色對比純度對比面積對比 v 同一種色彩，面積越大，明度、純度越強，面積越小，明同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。面積大的時候，亮的色顯得更輕，暗的色度、純度越低。面積大的時候，亮的色顯得更輕，暗的色顯得更重。這種現(xiàn)象稱為

24、色彩的面積效果。面積對比是指顯得更重。這種現(xiàn)象稱為色彩的面積效果。面積對比是指頁面中各種色彩在面積上多與少、大與小的差別，影響到頁面中各種色彩在面積上多與少、大與小的差別，影響到頁面主次關(guān)系。頁面主次關(guān)系。 v 面積的對比面積的對比,可以是中高低明度差的面積變化及中高可以是中高低明度差的面積變化及中高低純度差的面積變化。低純度差的面積變化。 面積對比色彩調(diào)和v兩種或兩種以上的色彩合理搭配，產(chǎn)生統(tǒng)一兩種或兩種以上的色彩合理搭配，產(chǎn)生統(tǒng)一和諧的效果，稱為和諧的效果，稱為色彩調(diào)和色彩調(diào)和。色彩調(diào)和的幾種基本方法v同種色的調(diào)和同種色的調(diào)和 相同色相、不同明度和純度的色彩調(diào)和。使之產(chǎn)生秩序的漸進，在明度

25、、純度的變化上，彌補同種色相的單調(diào)感 v類似色的調(diào)和類似色的調(diào)和在色環(huán)中在色環(huán)中,色相越靠近越調(diào)和。主要靠類似色之間色相越靠近越調(diào)和。主要靠類似色之間的共同色來產(chǎn)生作用。的共同色來產(chǎn)生作用。 v 對比色的調(diào)和對比色的調(diào)和調(diào)和方法有：調(diào)和方法有：1、提高或降低對比色的純度；、提高或降低對比色的純度；2、在對比色之間插入分割色（金、銀、黑、白、灰、在對比色之間插入分割色（金、銀、黑、白、灰等）；等）；3、采用雙方面積大小不同的處理方法；、采用雙方面積大小不同的處理方法；4、對比色之間加入相近的類似色。、對比色之間加入相近的類似色。 v 漸變色的調(diào)和漸變色的調(diào)和漸變色實際是一種調(diào)和方法的運用。是顏色

26、按層次逐漸變色實際是一種調(diào)和方法的運用。是顏色按層次逐漸變化的現(xiàn)象。色彩漸變就像兩種顏色間的混色，可以有漸變化的現(xiàn)象。色彩漸變就像兩種顏色間的混色，可以有規(guī)律地在多種顏色中進行。暗色和亮色之間的漸變會產(chǎn)生規(guī)律地在多種顏色中進行。暗色和亮色之間的漸變會產(chǎn)生遠近感和三維的視覺效果遠近感和三維的視覺效果。 色彩調(diào)和的經(jīng)驗v 主要是通過面積大小、冷暖對比來表達體現(xiàn)頁面的主次關(guān)系、中心主要是通過面積大小、冷暖對比來表達體現(xiàn)頁面的主次關(guān)系、中心思想。思想。v 顏色平淡可加入適當類似色對比色來使頁面產(chǎn)生變化。顏色顏色平淡可加入適當類似色對比色來使頁面產(chǎn)生變化。顏色凌亂可以適當加入同類色或者類似色、白色、黑色

27、、灰色做到統(tǒng)一凌亂可以適當加入同類色或者類似色、白色、黑色、灰色做到統(tǒng)一調(diào)配的目的。調(diào)配的目的。v 對比色的搭配并不是就是說是絕對值的紅或者綠，藍或橙、對比色的搭配并不是就是說是絕對值的紅或者綠，藍或橙、黃或紫。對比色的第一視覺傾向越明顯配色難度就越大，也就是說黃或紫。對比色的第一視覺傾向越明顯配色難度就越大，也就是說越難調(diào)和；反之，傾向越不明顯的對比色越容易調(diào)和。請參照剛才越難調(diào)和；反之，傾向越不明顯的對比色越容易調(diào)和。請參照剛才對比色調(diào)和頁面分析例子方法。對比色調(diào)和頁面分析例子方法。v 不是一種色彩面積用得越多或者越少、純度、明度越高就是不是一種色彩面積用得越多或者越少、純度、明度越高就是

28、能突出主體的主角色，主要是根據(jù)色彩相互之間的搭配關(guān)系來體現(xiàn)能突出主體的主角色，主要是根據(jù)色彩相互之間的搭配關(guān)系來體現(xiàn)的。的。v 一個頁面中單純絕對的使用某種顏色或是使用絕對非常多種一個頁面中單純絕對的使用某種顏色或是使用絕對非常多種顏色搭配，容易產(chǎn)生個性效果，那叫玩色彩了，限于色彩運用得非顏色搭配，容易產(chǎn)生個性效果，那叫玩色彩了，限于色彩運用得非常熟練的朋友，但不推薦初學者使用。常熟練的朋友，但不推薦初學者使用。網(wǎng)頁的色彩搭配v 顏色分非彩色與彩色兩類：非彩色指黑、白、灰，其它顏色分非彩色與彩色兩類：非彩色指黑、白、灰，其它為彩色。網(wǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的為彩色。網(wǎng)頁制作用彩色

29、還是非彩色好呢？根據(jù)專業(yè)的研究機構(gòu)研究表明：彩色的記憶效果是黑白的研究機構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。我們通常的做法是：主要內(nèi)容文字用非彩色吸引人。我們通常的做法是：主要內(nèi)容文字用非彩色(黑黑色色)，邊框，背景，圖片用彩色。，邊框，背景，圖片用彩色。這這 樣頁面整體不單調(diào)，樣頁面整體不單調(diào)，看主要內(nèi)容也不會眼花看主要內(nèi)容也不會眼花。v 任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬種色彩

30、。不同的色相，所以至少可以制作幾百萬種色彩。 網(wǎng)頁的色彩搭配 非彩色的搭配 黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是中庸色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果你實在找不出合適的色彩，那么用灰色試試，效果絕對不會太差。網(wǎng)頁的色彩搭配 顏色分：暖色系、中性系、寒色系v不同的顏色會給瀏覽者不同的心理感受不同的顏色會給瀏覽者不同的心理感受,如：綠色如：綠色-介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。安全的感覺。 它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛舒適的氣氛。v每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同的感覺。以綠色為例，黃綠色的感覺。以綠色為例，黃綠色 有青春，旺盛的視覺有青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。意境，而藍綠色則顯得幽寧，陰深。 網(wǎng)頁色彩的搭配v 原理原理 1.色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。 2.色彩的獨特性。要有與眾不同的色彩，使得大家對你的印象強色彩的獨特性。