建站|全網最系統的色彩搭配指南,教你製作吸睛網站

雲夢智慧發表於2020-09-27

看到這裡的朋友,別往下翻了,這裡有全網最全、最系統的網站色彩搭配指南。

為了寫這個回答,我把工作以來關於建站的所有經驗做了整合,這些年刷的上百個網站,讀的幾十本工具書,還「斥巨資」請公司的設計大神吃了碗麻辣燙求指導,最後總結出一套適用於幾乎所有新手小白的網站色彩搭配教程。

相信我,看完你一定會對網站的色彩搭配有個全面認識。

話不多說,直接上乾貨。
全文包括以下幾個方面:

認識色彩及網頁的安全顏色。
如何處理色彩?
網頁色彩搭配原理及色彩的搭配方案有哪些?
色彩搭配的技巧。

一、 認識色彩及網頁的安全顏色
在任何一個設計中,色彩對視覺的刺激都起到第一資訊的傳達作用。

開啟一個網站,給使用者留下第一印象的既不是網站的內容,也不是網站的頁面佈局,而是網站的色彩。

色彩對人的視覺效果非常明顯,一個網站設計的成功與否,在某種程度上取決於設計者對色彩的運用和搭配。高明的設計師會運用顏色來表現網站的理念和內在品質。
在這裡插入圖片描述

認識色彩。
大家平時所看到的白光經過分析,呈現出紅、橙、黃、綠、青、藍、紫7種顏色,其中紅、綠、藍是三原色,三原色通過不同比例的混合可以得到各種顏色。

現實生活中的色彩可以分為彩色和非彩色兩種,其中黑、白、灰屬於非彩色系列,其他的色彩屬於彩色系列。

根據專業研究機構研究表明:彩色的記憶效果是黑白的3.5倍。也就是說,在一般情況下,彩色頁面較完全黑白頁面更加吸引人。
在這裡插入圖片描述
什麼是網頁的安全顏色?
在網頁中,通常以RGB模式來表示顏色的值。

RGB模式是顯示器的物理色彩模式,這就意味著無論在軟體中使用何種色彩模式,只要是在顯示器上顯示,影像最終都是以RGB方式出現。

RGB表示紅(RED)綠(GREEN)藍(BLUE)三原色。通常情況下,RGB各有256級亮度,用0-255表示。

按照計算,256級的RGB色彩總共能夠組合出約1678萬種色彩,即256256256=16777216,通常也稱為24位色(2的24次方)。

但是由於瀏覽器的緣故,網頁被瀏覽器識別後,只有216種顏色能在瀏覽器中正常顯示,多於這個範圍的顏色有的瀏覽器顯示時就會發生偏差,不能正常顯示。因此將能被所有瀏覽器正常顯示的216種顏色成為網頁安全顏色範疇。

在這裡插入圖片描述
二、如何處理色彩?
色彩是人的視覺最敏銳的要素。網頁的色彩處理得好,可以達到錦上添花,事半功倍的效果。

不同的色彩會給瀏覽者不同的心理感受。
如紅色,代表熱情、活潑、溫暖、幸福和吉祥。會讓人激動、興奮,網頁使用過多紅色會使人的眼睛產生視疲勞。但如果其中加入少量藍色,會中和掉紅色的搶眼;加入少量黑色,可以變得平穩,減少視覺疲勞;加入少量白色,可以使網頁變得溫柔一些。

綠色代表新鮮、充滿希望、和平、安逸和青春。

綠色具有黃色和藍色兩種顏色成分。在綠色中,將黃色的擴張感和藍色的收縮感中和,並將黃色的溫暖與藍色的寒冷感相抵消。綠色和金黃、淡白搭配可產生優雅、舒適的氛圍。

藍色代表深沉、永恆、理智、誠實、公正。藍色和白色的搭配能體現浪漫、淡雅的氛圍。

紫色代表優雅與神祕;白色代表純潔、純真與神聖;黑色代表深沉、壓抑;黃色代表快樂與希望。

色彩也有季節性。
春天具有清新、明朗、年輕的感覺。色彩搭配以暖色系的黃色或綠色為基調。主要使用明度與純度較高的顏色。通過明亮華麗的色調。使人感受到生命力與能量。

夏天給人熱烈、有風度的感受。色彩搭配更適合以冷色系的顏色為基調,選擇樸素色調和明色調的冷色作為主色和輔助色,點綴色適宜採用純度較高的顏色。

秋天具有智慧又寧靜的感覺,色彩搭配以暖色系的黃色為基調,並通過低純度與低明度展現出深沉而豐饒的形象。

冬天則具有幹練、硬朗、冰冷的氣質。色彩搭配以冷色系或偏暖色的顏色為基調,所有色系的顏色都可以作為點綴色。
在這裡插入圖片描述
三、網頁色彩搭配原理及色彩的搭配方案。
網站色彩是樹立網站形象的關鍵要素之一。
色彩搭配既是一項技術性工作,也是一項藝術性很強的工作。

明白網頁色彩搭配的原理有助於瞭解網頁的背景、文字、圖示、邊框、連結等應該採用什麼樣的色彩,搭配什麼樣的色彩才能最好的表達出網站的內涵和主題。
在這裡插入圖片描述
網站色彩搭配需要遵循以下原理:
色彩的鮮明性與獨特性:一個網站的用色必須要有自己獨特的風格,這樣才能顯得個性鮮明,給瀏覽者留下深刻的印象。

色彩的藝術性:網站設計也是一種藝術活動,需要遵循藝術規律。在考慮到網站本身特點的同時,應當按照內容決定行使的原則,大膽的進行藝術創新,設計出既符合網站要求,又有一定藝術特色的網站。

色彩搭配的合理性:色彩搭配在遵循藝術規律的同時,還要考慮人的生理特點。色彩和表達的內容氣氛相適合,能夠給人一種和諧、愉悅的感覺。
在這裡插入圖片描述

給大家推薦兩個超棒的網站,Brand Colors和阿里雲**雲·速成美站**(這裡放入超連結)。
前者Brand Colors網站收集了上千種世界知名品牌的配色方案,並且按照字母表順序排列方便查詢。
在這裡插入圖片描述
像阿迪達斯、愛彼迎、亞馬遜、安卓、微軟、百度、蘋果、CNN等這些大品牌都在其中。如果對於色彩搭配沒有靈感,可以學習世界知名品牌的配色方案。
最重要的是,這些都是經典的配色,看到喜歡的直接點選色彩,就能顯示色值,拿去套用就好了。

另一個雲·速成美站是阿里雲的建站產品,網站設計最重要的是什麼,實操呀!
雲·速成美站只需要500元不到,就可以購買一個完整的建站模板。不僅可以學習如何建設網站,還能把學習到的網站色彩搭配應用到實際的網站建設中。網站設計是否合理,色彩搭配是否吸睛,一目瞭然。

四、有哪些色彩搭配的技巧。
使用單色。
儘管網站設計要儘量避免採用單一色彩,以免產生單調的感覺,但是通過調整色彩的飽和度和透明度,也可以產生變化,使網站避免單調,做到色彩統一有層次。

使用鄰近色。
所謂鄰近色,就是色帶上相鄰近的顏色,如綠色和藍色,紅色和黃色。採用鄰近色設計網頁可以使網頁避免色彩雜亂,易於達到頁面的色彩豐富,和諧統一。

使用對比色。
對比色可以突出重點,產生強烈的視覺效果。在設計時,一般以一種顏色為主色調,對比色作為點綴,這樣可以起到畫龍點睛的作用。

黑色的使用。
黑色一般作為背景色,與其他純度的色彩搭配使用。
但是如果使用恰當、設計合理,也能產生很強的藝術效果。

背景色的使用。
背景的顏色不要太深,否則會顯得過於厚重,影響整個頁面的顯示效果。
其次,背景色要與文字的色彩對比強烈一些。但也有例外,如黑色背景襯托亮麗的文字和影像,會給人一種另類的感覺。

色彩的數量。
一般來說,網站用色應控制在4種色彩以內,通過調整色彩的各種屬性來產生顏色的變化,保持整個網頁的色調統一。
使用的顏色過多會使網頁變得很“花”,缺乏統一和協調,給人一種繁雜的感覺。

要和網站內容匹配。
首先要了解網站所要傳達的資訊和品牌,進而選擇可以加強這些資訊的顏色。
如設計一個金融機構網站時,要選擇冷色系、柔和的顏色,像藍、灰或綠,如果使用暖色系、活潑的顏色,則會破壞網站品牌的調性。

圍繞網頁主題。
色彩要能烘托出主題。根據主題確定網站顏色,同時還要考慮網站的訪問物件,文化的差異也會使色彩產生非預期的反應。
還有,不同地區與不同年齡層對顏色的反應也有所不同,年輕人一般比較喜歡飽和色,但是卻無法吸引高年齡層人群的興趣。

總之,色彩的使用並沒有一定的法則,它與每個人的審美、喜好、地域、知識層次等有關。

一般先確定一種能體現主題的主體色,然後根據具體的需要應用近似色或對比色來完成整個頁面的配色方案。使整個頁面達到和諧、賞心悅目的視覺效果。

相關文章