網(wǎng)頁(yè)色彩與布局設(shè)計(jì)（第2版）課件 第五章 網(wǎng)頁(yè)色彩應(yīng)用分析

WebColorApplicationanalysis第五章網(wǎng)頁(yè)色彩應(yīng)用分析2暖色WarmColor1冷色CoolColor2單色Monochrome3近似色SimilarColor4目錄CONTENTS互補(bǔ)色ComplementaryColour5突出色HighlightTheColor63暖色紅色黃色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è)色彩應(yīng)用分析WebColorApplicationanalysis5.1.暖色

暖色，是指色環(huán)中紅色、橙色一邊的色相。稱(chēng)暖色，能帶給人溫馨、和諧、溫暖的感覺(jué)，這是出于人們的心理和感情聯(lián)想。因此給人們一種溫暖、熱烈、活躍的感覺(jué)。

1.紅色在暖色系中，紅色是最具備力量的，它能強(qiáng)烈表達(dá)感情，也是抓住人的注意力的高手。紅色是視覺(jué)效果最強(qiáng)烈的色彩，鮮艷的紅色容易帶給人熱情、主動(dòng)、活潑、溫暖的感覺(jué)。5.1.1紅色5請(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è)色彩應(yīng)用分析WebColorApplicationanalysis如圖5-1所示的網(wǎng)頁(yè)是TrolIntermedia企業(yè)的官方網(wǎng)頁(yè)的一部分，該企業(yè)運(yùn)用紅色作為網(wǎng)頁(yè)的背景，給人一種積極向上、樂(lè)觀的心理感受，同時(shí)也很好地傳達(dá)了企業(yè)的工作精神。另外，紅色與白色是經(jīng)典的配色，是整個(gè)網(wǎng)頁(yè)更加穩(wěn)定，是一個(gè)成功的網(wǎng)頁(yè)案例。圖5-1網(wǎng)頁(yè)中的紅色運(yùn)用5.1.1紅色6網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis

黃色就像橙色和紅色，黃色也是一個(gè)暖色。它有大自然、陽(yáng)光、春天的涵義，而且通常被認(rèn)為是一個(gè)快樂(lè)和有希望的色彩。黃色是所有色相中最能發(fā)光的顏色，給人輕快，透明，輝煌，充滿(mǎn)希望的色彩印象。5.1.2黃色7請(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è)色彩應(yīng)用分析WebColorApplicationanalysis如圖5-2所示，此網(wǎng)頁(yè)是為設(shè)計(jì)者在遇到問(wèn)題時(shí)提供幫助的網(wǎng)站，利用黃色作為背景，給人一種明快、向上的心理感受，認(rèn)為這是一個(gè)很有幫助的網(wǎng)站，在配上卡通的造型，更加吸引用戶(hù)的眼球。圖5-2網(wǎng)頁(yè)中的黃色運(yùn)用5.1.2黃色8網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis在有關(guān)食品類(lèi)的網(wǎng)頁(yè)設(shè)計(jì)中暖色系色彩更是他們的首選，這些網(wǎng)站的設(shè)計(jì)主體突出，大部分以暖色調(diào)為主，因?yàn)榕牧硪粋€(gè)心理感受是刺激人們的食欲，所以很多有關(guān)食品的網(wǎng)頁(yè)都適當(dāng)運(yùn)用紅色來(lái)刺激用戶(hù)，帶來(lái)利益。如圖5-3所示的“舌尖上的中國(guó)”官網(wǎng)首頁(yè)，背景圖片是一幅精妙絕倫的插畫(huà)，在顏色的選擇上采用了單純的紅色，并填充了不同明度的紅色，以凸顯畫(huà)中人物和美食復(fù)雜的輪廓，彰顯出中國(guó)民間美食街上熱鬧的景象。圖5-3暖色在食品類(lèi)網(wǎng)頁(yè)的運(yùn)用5.1暖色9冷色藍(lán)色綠色2PART10網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis色環(huán)中藍(lán)、綠一邊的色相稱(chēng)冷色，它使人們聯(lián)想到海洋、藍(lán)天、冰雪、月夜等，給人一種陰涼、寧?kù)o、深遠(yuǎn)，死亡，典雅、高貴，冷靜，暗淡、灰暗，孤僻，面積較大，寒冷，憂(yōu)郁，悲傷，寬廣、開(kāi)闊的感覺(jué)。5.2冷色11網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis如圖5-5所示，網(wǎng)頁(yè)運(yùn)用藍(lán)色營(yíng)造出高貴、偉大、理性的氛圍，表現(xiàn)出偉人們的魅力，表現(xiàn)網(wǎng)頁(yè)所要傳達(dá)的精神。5.2冷色圖5-5網(wǎng)頁(yè)中的藍(lán)色運(yùn)用12網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis

在冷色中，藍(lán)色是最冷的色彩。藍(lán)色非常純凈，通常讓人聯(lián)想到海洋、天空、水、宇宙。純凈的藍(lán)色表現(xiàn)出一種美麗、冷靜、理智、安詳與廣闊。由于藍(lán)色沉穩(wěn)的特性，具有理智、準(zhǔn)確的意象，在網(wǎng)頁(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技、效率的商品或企業(yè)形象，大多選用藍(lán)色當(dāng)標(biāo)準(zhǔn)色、企業(yè)色。如圖5-5所示，網(wǎng)頁(yè)運(yùn)用藍(lán)色營(yíng)造出高貴、偉大、理性的氛圍，表現(xiàn)出偉人們的魅力，表現(xiàn)網(wǎng)頁(yè)所要傳達(dá)的精神。5.2.1藍(lán)色13網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis在一些企業(yè)和技術(shù)相關(guān)網(wǎng)頁(yè)中，冷色常常是被利用其中。如圖5-6所示的“2021年中國(guó)國(guó)際智能產(chǎn)業(yè)博覽會(huì)”和“APIE2022亞太國(guó)際智能裝備博覽會(huì)”網(wǎng)站。5.2.1藍(lán)色圖5-6冷色在網(wǎng)頁(yè)中的運(yùn)用14網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis另外，冷色的另一大類(lèi)是綠色，它是自然界中常見(jiàn)的顏色，代表意義為清新、希望、安全、平靜、生命、和平、寧?kù)o、自然、成長(zhǎng)、生機(jī)。綠色是一種合成色，有多種用途，能夠清晰的傳達(dá)設(shè)計(jì)師的意圖。綠色令人放松，當(dāng)一想到綠色，大多數(shù)人會(huì)想到戶(hù)外和植物，因此具有平靜心態(tài)的功效。綠色也能夠?qū)勺x性達(dá)到最大化，降低用戶(hù)視覺(jué)疲勞發(fā)生的幾率，這在網(wǎng)頁(yè)設(shè)計(jì)中非常關(guān)鍵，并還能夠激發(fā)用戶(hù)的視覺(jué)興趣。5.2.1綠色15網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis

如圖5-7所示的鄂爾多斯草原官方網(wǎng)站，其利用綠色的清新、自然來(lái)體現(xiàn)草原的寬廣與草原人民的熱情，同時(shí)利用綠色來(lái)給瀏覽者營(yíng)造一種平靜、舒適的心理感受，以此來(lái)吸引瀏覽者。圖5-7網(wǎng)頁(yè)中綠色的運(yùn)用5.2.1綠色165.3單色色彩對(duì)情感有著巨大的沖擊，色彩的搭配無(wú)窮無(wú)盡，可以玩多彩風(fēng)格，也可以極簡(jiǎn)配色。單色是使用一種顏色的不同飽和度和明度，單色網(wǎng)頁(yè)是網(wǎng)頁(yè)色彩設(shè)計(jì)中比較經(jīng)典的一種模式，其用色不是很多，或是同一種顏色的不同明暗漸變、或是貫穿全站的單一色彩，但是色彩的功能性凸顯無(wú)疑。下面是一些單色網(wǎng)頁(yè)設(shè)計(jì)。網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis17單色3PART18圖5-8所示的網(wǎng)頁(yè)中，運(yùn)用黑白兩色的經(jīng)典搭配和手繪風(fēng)格圖形相結(jié)合，體現(xiàn)極簡(jiǎn)主義風(fēng)格，彰顯獨(dú)特魅力。圖5-9所示的網(wǎng)頁(yè)中，同時(shí)也是黑白的配色，在加上一抹精致的淡綠色，給人一種優(yōu)雅、忠實(shí)的感覺(jué)。圖5-8單色網(wǎng)頁(yè)設(shè)計(jì)(1)圖5-9單色網(wǎng)頁(yè)設(shè)計(jì)(2)5.3單色網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis19圖5-10所示的網(wǎng)頁(yè)中，鮮亮、活力十足的紅色效果非常顯著，很好的支持了網(wǎng)頁(yè)中的瑞士產(chǎn)品。圖5-11所示的網(wǎng)頁(yè)中，利用灰度圖像作為網(wǎng)頁(yè)背景，干凈利落，檸檬綠的點(diǎn)綴加入了活力和個(gè)性化，體現(xiàn)企業(yè)文化和理念。圖5-10單色網(wǎng)頁(yè)設(shè)計(jì)(3)圖5-11單色網(wǎng)頁(yè)設(shè)計(jì)(4)5.3單色網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis20近似色4PART21

近似色是色環(huán)中相鄰的色彩，在網(wǎng)頁(yè)中使用近似色可以為協(xié)調(diào)網(wǎng)頁(yè)，使網(wǎng)頁(yè)成為一個(gè)整體，突出中心，不會(huì)出現(xiàn)網(wǎng)頁(yè)的色彩雜亂，避免用戶(hù)的視覺(jué)疲勞。如圖5-12所示，此網(wǎng)頁(yè)所宣傳的對(duì)象是一件旅店，其運(yùn)用藍(lán)色、綠色和黃色這三種近似色體現(xiàn)旅店的自由、自然。5.4近似色圖5-12近似色網(wǎng)頁(yè)設(shè)計(jì)1網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis22圖5-13所示，Quirky是一個(gè)創(chuàng)意產(chǎn)品社區(qū)與電子商務(wù)網(wǎng)站，利用眾多方式，讓社區(qū)參與產(chǎn)品開(kāi)發(fā)的整個(gè)過(guò)程，其運(yùn)用紅色和黃色者兩種近似色來(lái)表達(dá)企業(yè)的文化，表現(xiàn)積極、活躍的態(tài)度。5.4近似色圖5-13近似色網(wǎng)頁(yè)設(shè)計(jì)2網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis23互補(bǔ)色5PART24

互補(bǔ)色是指色環(huán)中相反的色彩，比如紅色與綠色互補(bǔ)，藍(lán)色與橙色互補(bǔ)，紫色與黃色互補(bǔ)。使用互補(bǔ)色可以使網(wǎng)頁(yè)加強(qiáng)對(duì)比，更好的突出網(wǎng)頁(yè)的中心，引導(dǎo)用戶(hù)的視線(xiàn)聚焦在主題中。但是要注意的是，網(wǎng)頁(yè)中互補(bǔ)色的明度和純度不能太高，相反明度純度較低的色彩能夠更加有效地宣傳網(wǎng)頁(yè)。5.5互補(bǔ)色網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis25如圖5-14所示，此網(wǎng)頁(yè)是Adobe軟件公司的官方網(wǎng)頁(yè)，其利用藍(lán)色與橙色這對(duì)互補(bǔ)色，形成強(qiáng)烈的視覺(jué)沖擊，抓住用戶(hù)的眼球。5.5互補(bǔ)色圖5-14互補(bǔ)色網(wǎng)頁(yè)設(shè)計(jì)(1)網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis26圖5-15所示是一家關(guān)于烹飪公司的官方網(wǎng)頁(yè)，巧妙地運(yùn)用食物中紅色與綠色這對(duì)互補(bǔ)色，既能吸引用戶(hù)的瀏覽，又能體現(xiàn)網(wǎng)頁(yè)的主題。5.5互補(bǔ)色圖5-15互補(bǔ)色網(wǎng)頁(yè)設(shè)計(jì)(2)網(wǎng)頁(yè)色彩應(yīng)用分析WebColorApplicationanalysis27突出色6PART28

突出色與前面所提到的的點(diǎn)睛色大同小異，能夠豐富頁(yè)面，增強(qiáng)頁(yè)面的層次感，是整個(gè)頁(yè)面看起來(lái)顯得生動(dòng)活潑。突出色具體是指在沒(méi)有色調(diào)或者在