網(wǎng)頁(yè)色彩與布局設(shè)計(jì)（第2版）課件 第二章 網(wǎng)頁(yè)色彩的組成部分

Partofwebdesign第二章網(wǎng)頁(yè)色彩的

組成部分2網(wǎng)頁(yè)的主色調(diào)TheMainToneofThePage1網(wǎng)頁(yè)的輔助色TheAuxiliaryColorofTheWebPage2網(wǎng)頁(yè)的點(diǎn)睛色TheHighlightofTheWebPage34目錄CONTENTS網(wǎng)頁(yè)的背景色TheBackgroundColorofTheWebPage3網(wǎng)頁(yè)的主色調(diào)網(wǎng)頁(yè)的主色調(diào)1PART4請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。請(qǐng)?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復(fù)制你的內(nèi)容到此。

網(wǎng)頁(yè)的主色調(diào)TheMainToneofThePage2.1.網(wǎng)頁(yè)的主色調(diào)從色彩學(xué)的角度上說(shuō)，一個(gè)網(wǎng)頁(yè)中只有一個(gè)主題色，也稱為主色調(diào)。主色調(diào)是指在網(wǎng)頁(yè)中運(yùn)用的最主要的色彩，其中包括大面積的背景色和裝飾圖形、圖片顏色等構(gòu)成視覺(jué)中心的顏色。主色調(diào)是網(wǎng)頁(yè)色彩設(shè)計(jì)的中心色，在搭配其他的顏色的過(guò)程中，通常以主色調(diào)為作為基礎(chǔ)，與其互相協(xié)調(diào)和統(tǒng)一。

圖2-1所示網(wǎng)頁(yè)的主色調(diào)是藍(lán)紫色，與不同純度和明度的藍(lán)紫色相搭配，使整個(gè)頁(yè)面相互協(xié)調(diào)，藍(lán)紫色是此網(wǎng)頁(yè)視覺(jué)中心的顏色。圖2-1網(wǎng)頁(yè)主色調(diào)52.1.網(wǎng)頁(yè)的主色調(diào)

如圖2-2所示，此網(wǎng)頁(yè)的主色調(diào)選擇了與背景色或者與輔助色相近的同色色相顏色或鄰近色，營(yíng)造了華麗而晦暗的場(chǎng)景，使得頁(yè)面整體協(xié)調(diào)，視覺(jué)效果穩(wěn)重。圖2-2穩(wěn)重的網(wǎng)頁(yè)主色調(diào)

網(wǎng)頁(yè)的主色調(diào)TheMainToneofThePage62.1.網(wǎng)頁(yè)的主色調(diào)如圖2-3所示的網(wǎng)頁(yè)是太和環(huán)球嘉年華游樂(lè)園網(wǎng)站的首頁(yè)，其使用了一種非傳統(tǒng)配色方案，利用與背景色相對(duì)比的紅色和橙色，再結(jié)合豐富的動(dòng)畫(huà)元素，為瀏覽者營(yíng)造出一種歡快、愉悅的氛圍。圖2-3太和環(huán)球嘉年華游樂(lè)園

網(wǎng)頁(yè)的主色調(diào)TheMainToneofThePage72.1.網(wǎng)頁(yè)的主色調(diào)

如圖2-4所示的網(wǎng)站頁(yè)面的主色調(diào)是漸變的藍(lán)色，整體給人一種淡雅、清新與浪漫的心理感受，讓人感到洗衣液產(chǎn)品的可靠性與真實(shí)性。圖2-4藍(lán)月亮網(wǎng)站

網(wǎng)頁(yè)的主色調(diào)TheMainToneofThePage8網(wǎng)頁(yè)的輔助色2PART網(wǎng)頁(yè)的輔助色9網(wǎng)頁(yè)的輔助色TheAuxiliaryColorofTheWebPage2.2.網(wǎng)頁(yè)的輔助色

主色調(diào)與輔助色共同構(gòu)成網(wǎng)頁(yè)的標(biāo)準(zhǔn)色彩。輔助色的頁(yè)面占用比例僅次于主色調(diào)，起到烘托主色調(diào)、支持主色調(diào)以及融合主色調(diào)的作用。輔助色在整體的畫(huà)面中應(yīng)該起到平衡主色調(diào)的視覺(jué)效果和減輕用戶所產(chǎn)生的視覺(jué)疲勞，起到一定視覺(jué)分散的作用。圖2-5所示，此網(wǎng)頁(yè)的輔助色只使用一種色彩，網(wǎng)頁(yè)選取了與主色調(diào)相協(xié)調(diào)的深藍(lán)色作為輔助色，使得網(wǎng)頁(yè)更加有層次。圖2-5以

一種色彩為輔助色的網(wǎng)頁(yè)102.2.網(wǎng)頁(yè)的輔助色圖2-6所示的是西班牙一個(gè)餐飲類網(wǎng)站的首頁(yè)，設(shè)計(jì)者巧妙地讓綠色系的美食作為輔助色，并懸浮在純白的背景上，逼真的食物仿佛輕盈無(wú)重量一般，呈現(xiàn)出獨(dú)特的視覺(jué)體驗(yàn)。圖2-6一種單色系為輔助色的網(wǎng)頁(yè)網(wǎng)頁(yè)的輔助色TheAuxiliaryColorofTheWebPage112.2.網(wǎng)頁(yè)的輔助色圖2-7所示，此網(wǎng)頁(yè)的輔助色是第三種形式：由幾種色彩組合而成的色系。黃色和橙黃色偏多，這兩種顏色有刺激食欲的心理效應(yīng)，很好地宣傳了網(wǎng)頁(yè)的廣告效益。另外，紅色和黃色所占的比例恰當(dāng)，使得這兩種顏色起到很好的視覺(jué)效果，平衡了網(wǎng)頁(yè)的主色調(diào)，吸引眼球。圖2-7不同色彩組合為輔助色的網(wǎng)頁(yè)網(wǎng)頁(yè)的輔助色TheAuxiliaryColorofTheWebPage122.2.網(wǎng)頁(yè)的輔助色圖2-8主色調(diào)為大面積的藍(lán)灰色。而白色與灰色則為輔助色，整個(gè)頁(yè)面從主頁(yè)到鏈接頁(yè)都顯得沉穩(wěn)、冷靜與高雅。圖2-8kazustyle網(wǎng)站網(wǎng)頁(yè)的輔助色TheAuxiliaryColorofTheWebPage13網(wǎng)頁(yè)的點(diǎn)睛色網(wǎng)頁(yè)的點(diǎn)睛色3PART14網(wǎng)頁(yè)的點(diǎn)睛色TheHighlightofTheWebPage2.3.網(wǎng)頁(yè)的點(diǎn)睛色在網(wǎng)頁(yè)設(shè)計(jì)中，輔助色和點(diǎn)睛色能夠豐富頁(yè)面，增強(qiáng)頁(yè)面的層次感，使整個(gè)頁(yè)面看起來(lái)顯得生動(dòng)活潑。確定主色調(diào)和輔助色后，通過(guò)在小范圍內(nèi)加上強(qiáng)烈色彩，即點(diǎn)睛色來(lái)突出主題效果，使得頁(yè)面更加鮮明生動(dòng)。

如圖2-9所示的青島科技大學(xué)網(wǎng)站首頁(yè)的“學(xué)術(shù)聚焦”頁(yè)面，在清爽的漸變藍(lán)的主色調(diào)下，選擇了其對(duì)比色—亮橙，作為網(wǎng)頁(yè)設(shè)計(jì)中的點(diǎn)睛色，又與學(xué)校標(biāo)識(shí)“QUST”相呼應(yīng)，突出了網(wǎng)頁(yè)的主題效果，使得頁(yè)面更加鮮明生動(dòng)。圖2-9網(wǎng)頁(yè)中橙色的點(diǎn)睛色應(yīng)用

在網(wǎng)頁(yè)設(shè)計(jì)中，輔助色和點(diǎn)睛色能夠豐富頁(yè)面，增強(qiáng)頁(yè)面的層次感，使整個(gè)頁(yè)面看起來(lái)顯得生動(dòng)活潑。確定主色調(diào)和輔助色后，通過(guò)在小范圍內(nèi)加上強(qiáng)烈色彩，即點(diǎn)睛色來(lái)突出主題效果，使得頁(yè)面更加鮮明生動(dòng)。

152.3.網(wǎng)頁(yè)的點(diǎn)睛色點(diǎn)睛色面積越小，顏色越鮮艷，如圖2-10所示，從主頁(yè)到鏈接頁(yè)，都使用了高純度的黃色作為點(diǎn)睛色，活躍和調(diào)節(jié)畫(huà)面的色彩關(guān)系。圖2-10NAMDOACRYL網(wǎng)站網(wǎng)頁(yè)的點(diǎn)睛色TheHighlightofTheWebPage16網(wǎng)頁(yè)的背景色網(wǎng)頁(yè)的背景色4PART17網(wǎng)頁(yè)的背景色TheBackgroundColorofTheWebPage網(wǎng)頁(yè)背景經(jīng)常出現(xiàn)的形式大概有四種：1、白色背景2、純色背景3、漸變顏色背景4、圖像背景網(wǎng)頁(yè)背景色也被稱為網(wǎng)頁(yè)的“支配色”，網(wǎng)頁(yè)背景是決定網(wǎng)頁(yè)整體配色印象的重要顏色。網(wǎng)頁(yè)背景色是指網(wǎng)頁(yè)空間中大塊面積的顏色，主要是網(wǎng)頁(yè)最底層的底色，起到協(xié)調(diào)、支配整體的作用。網(wǎng)頁(yè)中背景設(shè)計(jì)是相當(dāng)重要的，影響用戶對(duì)整個(gè)網(wǎng)頁(yè)的印象。如圖2-11所示，網(wǎng)頁(yè)運(yùn)用白色的背景色，突出主題。圖2-11白色背景2.4.網(wǎng)頁(yè)的背景色18圖2-12漸變色背景2.4.網(wǎng)頁(yè)的背景色網(wǎng)頁(yè)的背景色TheBackgroundColorofTheWebPage

圖2-12所示的網(wǎng)頁(yè)運(yùn)用漸變色作為背景，在體現(xiàn)出網(wǎng)頁(yè)獨(dú)特風(fēng)格的同時(shí)又突出主題。19圖2-14華為耳機(jī)2.4.網(wǎng)頁(yè)的背景色網(wǎng)頁(yè)的背景色TheBackgroundColorofTheW