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

WebColorApplicationanalysis第五章網(wǎng)頁色彩應用分析2暖色WarmColor1冷色CoolColor2單色Monochrome3近似色SimilarColor4目錄CONTENTS互補色ComplementaryColour5突出色HighlightTheColor63暖色紅色黃色1PART4請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。網(wǎng)頁色彩應用分析WebColorApplicationanalysis5.1.暖色

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

1.紅色在暖色系中，紅色是最具備力量的，它能強烈表達感情，也是抓住人的注意力的高手。紅色是視覺效果最強烈的色彩，鮮艷的紅色容易帶給人熱情、主動、活潑、溫暖的感覺。5.1.1紅色5請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。請?zhí)鎿Q文字內(nèi)容，修改文字內(nèi)容，也可以直接復制你的內(nèi)容到此。網(wǎng)頁色彩應用分析WebColorApplicationanalysis如圖5-1所示的網(wǎng)頁是TrolIntermedia企業(yè)的官方網(wǎng)頁的一部分，該企業(yè)運用紅色作為網(wǎng)頁的背景，給人一種積極向上、樂觀的心理感受，同時也很好地傳達了企業(yè)的工作精神。另外，紅色與白色是經(jīng)典的配色，是整個網(wǎng)頁更加穩(wěn)定，是一個成功的網(wǎng)頁案例。圖5-1網(wǎng)頁中的紅色運用5.1.1紅色6網(wǎng)頁色彩應用分析WebColorApplicationanalysis

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

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

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

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

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

突出色與前面所提到的的點睛色大同小異，能夠豐富頁面，增強頁面的層次感，是整個頁面看起來顯得生動活潑。突出色具體是指在沒有色調(diào)或者在