建站常識
網(wǎng)頁設計配色應用實例剖析——藍色系
2007-03-08 09:17:00
藍色是色彩中比較沉靜的顏色。象征著永恒與深邃、高遠與博大、壯闊與浩渺,是令人心境暢快的顏色。
藍色的樸實、穩(wěn)重、內向性格,襯托那些性格活躍、具有較強擴張力的色彩,運用對比手法,同時也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍色與紅、黃等色運用得當,能構成和諧的對比調和關系。
藍色是冷色調最典型的代表色,是網(wǎng)站設計中運用得最多的顏色,也是許多人鐘愛的顏色。
藍色表達著深遠、永恒、沉靜、無限、理智、誠實、寒冷的多種感覺。藍色會給人很強烈的安穩(wěn)感,同時藍色還能夠表現(xiàn)出和平、淡雅、潔凈、可靠等。
下面我們根據(jù)藍色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配做不同的舉例分析。
→ 藍色高純度對比網(wǎng)頁例圖:http://www.toysdesign.com
藍色系分析:(高純度對比:藍色+玫瑰色)
藍色的HSB數(shù)值H色相為240度時是正藍色。上圖的HSB模式S數(shù)值顯示,所有主要配色的飽和度都是100%。從主色調、輔色調HSB模式的數(shù)值可看出,這兩種顏色在明度上有較大的區(qū)別,色相上稍有輕度變化,飽和度相同。RGB模式上看,主色調與輔色調R數(shù)值都為0,G綠色的數(shù)值和B藍色數(shù)值分量的變化,得到了不同藍色的兩結果。點睛色僅是R紅色與B藍色兩色調和而得沒有摻雜其他顏色,因此飽和度呈最高值100%。整個頁面配色的飽和度都為100%,頁面整體配色看起來視覺沖擊力異常強烈。
輔助色白色讓頁面上的顏色的特性發(fā)揮到極致,是不可缺少的輔助配色。
結論:響亮、強烈刺激的詞語似乎都適用于上圖頁面,源于高純度烘托、微妙的冷暖變化配色上,體現(xiàn)出現(xiàn)代都市張揚時尚的氣息。白色塊面的線型使得這種高純度高強度的配色變得響亮卻也緩和。
輔色調藍色的運用透露出設計師的大膽與魄力,玫瑰色在色輪表里算是冷色系,但是與藍色廣義上的對比來說是暖色,在這里與藍色搭配算是絕配了。整個頁面無不體現(xiàn)出特色和個性。
→ 藍色淺藍******頁例圖:http://www.voeslauer.com/start.html
藍色系分析: (同類色:淺藍色)
主色調HSB數(shù)值H顯示200度,色輪度稍向綠色方位傾斜,但是由于從180度到270度基本上給人的視覺呈現(xiàn)還是藍色范疇,因此與視覺上廣義的藍色差別不大。
該頁面中間色較多,主要是在藍色范疇內做明度的變化,所以色度差非常緩和,以致于頁面的色彩呈現(xiàn)非常柔和,甚至稍有些發(fā)灰的感覺,好在該頁面還有些較大色塊的淺藍色及白色,拉大了頁面的色階,使得這種灰的感覺減弱不少。
點睛色的HSB數(shù)值是258,色輪趨勢是向暖色紫色(相對冷暖色)傾向,變化微妙,是本頁面最溫暖的顏色。藍紫色在色相環(huán)中位于藍色和紫色之間,所以它也蘊含著紫色的一些神秘感,加上淺藍色的雅致,所以亮度較高的藍紫色顯得非常高雅。在網(wǎng)頁中,藍紫色通常與藍色一起搭配使用。
結論:
淺藍色給人一種很寧靜安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的特質,常用于化妝品、女性、服裝網(wǎng)站。它是最具涼爽,清新特征的色彩。和白色混合時,能體現(xiàn)柔順,淡雅,浪漫的氣氛。
主色調選擇明亮的藍色,配以白色的背景和灰亮的輔助色,可以使站點干凈而整潔,給人莊重、充實的印象。
該頁面基本上屬于同類色系,也是最保守穩(wěn)妥且調和的配色方案。但該種配色看久了容易呈現(xiàn)出平淡乏味的感受。
藍色系分析:(深藍色)
HSB數(shù)值顯示主色調和輔色調的H色相接近,飽和度為最高,都為100%,兩者只在明度上有區(qū)別,分別是35%和65%。三維厚重的設計風格,用調和法之一的漸變手法,把主色調和輔色調進行了緩緩的過渡,增強了層次感,體現(xiàn)個性魅力,符合該頁面視音頻風格網(wǎng)站的主題。
雖然是被譽為點睛色,但從整個頁面來看由于面積關系,點睛色在這里所起的作用不大,僅僅就蜻蜓點水而已。相反的輔助色在這里卻起到了較為突顯的作用——讓整個沉悶的本只起烘托作用的深藍色得到充分的展示。另一輔色調灰色令白色與深藍色反差不易過大,起到調和的目的。白色增強了整個頁面的視覺感,使之更醒目。
結論:
深藍色是沉穩(wěn)的且較常用的色調。能給人穩(wěn)重、冷靜、嚴謹、冷漠、深沉、成熟的心理感受。它主要用于營造安穩(wěn)、可靠、略帶有神秘色彩的氛圍。
深藍色明度偏暗,基于上面對深藍色的特質描述,在常規(guī)網(wǎng)站的設計里,可能不適合做太大面積的使用。但根據(jù)不同網(wǎng)站主題的設計需要可以做些不同的嘗試。
→ 藍色純度對比網(wǎng)頁例圖:http://www.ccw.gov.uk
藍色系分析:(純度對比)
從HSB模式上的數(shù)值顯示情況進行分析,全頁基本上是屬于高純度配色,各顏色特性相互輝映、相互交融,把整個頁面環(huán)境渲染得異常鮮亮和熱鬧。
冷暖色系之間跨度很大:藍色、綠色、黃色、橙黃色、朱紅色、土橙黃色、墨綠色,幾乎按照色輪表上的軌跡進行。也由于面積有多有少的原因,因此頁面看起來較明快調和。其中土橙黃色和墨綠色是頁面明度最重的顏色,從RGB色值上可看出,都分別的混合了其他顏色,因此飽和度相對較低,略呈灰色狀態(tài),另一種意義上來說這種灰色狀態(tài)是調和色的一種很好的方式。
由于有大面積的主色調和背景色做掌控,加之以上因素綜合分析,無論頁面再多再細再耀眼的顏色都能很好的統(tǒng)一在同一個頁面之中。
結論:
非常明快活潑、跳躍的富有趣味性的配色。使人勾起了無限愉悅的童趣。
高純度的藍色主色調配合的其他高純度冷暖色調對比,會營造出一種整潔輕快的印象。
根據(jù)色輪表的緩和過渡及使用面積多少,判斷分析出頁面調和程度。
→ 藍色鄰近******頁例圖:http://www.rhinocortaqua.com
藍色系分析:(藍色鄰近配色:藍色+綠色)
從HBS模式的S飽和度數(shù)值100%上看,不少朋友會有疑惑的感覺,認為看起來較為柔和的顏色,飽和度或許會低,刺眼的顏色通常飽和度較高,其實不然,每個顏色有每個顏色的不同屬性特性。高純度的色彩,明度的降低是協(xié)調視覺的一個因素,容易給人造成低純度的錯覺。
不同塊面的鄰近色交錯排列,增強本頁面視覺動感。
輔色調淺藍色是背景色白色和主色調藍色的中間色,它形成了頁面配色的中間色階,色彩層次感增強以外,還使整個頁面的顏色更為和諧。
另一輔色調青色,是藍色和綠色的結合體,包括在標志文字、文字標題上的運用,無疑活躍了整個頁面的配色環(huán)境。
兩個點睛色都略調高了明度,另一意義上是該頁面配色的中間色階。兩點睛色都是在主色調藍色、輔色調青色的基礎上衍生出來的顏色,這里“點睛”的作用不大,都屬于和諧色系。
結論:
很多站點都在使用藍色與青綠色的搭配效果。藍色、青綠色、白色的搭配可以使頁面看起來非常干凈清澈,在我們的現(xiàn)實生活中運用的范圍很廣,可以說是隨處可見的。
主顏色選擇明亮的藍色,配以白色的背景和灰亮的輔助色,加上中間色階的運用,可以使頁面有干凈整潔,給人莊重、充實的印象。
這是一組非常愉悅和諧的鄰近色系配色。中間色適度面積的運用及背景白色讓這組顏色特征發(fā)揮到了極致。
→ 藍色強對比網(wǎng)頁例圖:http://www.everyoneshero.com
藍色系強對比:藍色+紅色
藍色是冷色系的最典型的代表了,而紅色是暖色系里最典型的代表,兩冷暖色系對比下讓全頁的色彩對比異常強烈且興奮,很容易感染帶動瀏覽者的激昂情緒。紅色把文字圖片框起來,在藍色背景對比下,很好的突出主題,又好似模仿投影熒屏的感覺,讓人迅速的聚焦于視頻中心,達到網(wǎng)站背后的最終目的。
輔色調是紅色,從數(shù)值上看接近于正紅色,紅色對視覺傳遞的信息是很快的,屬于高昂響亮的顏色。
點睛色分別是黃色、黃綠色。大家知道,黃色是明度最高的顏色,也較響亮、刺目,在這里的運用能強烈的突現(xiàn)標題。從大的來看,點睛色黃綠色與輔助色紅色是對比色,雖然面積不太大,只小范圍的對比,但是已經(jīng)足以達到了迅速傳遞信息的效果,讓人印象深刻,促成再訪點擊。
結論:
冷暖色系的對比碰撞,充滿激情,能傳遞熾熱情感、強烈刺激主題的目的。
該頁面運用了冷暖、紅綠兩種比較鮮明的對比色,配色積極大膽,視覺沖擊力很強。
→ 藍色對比網(wǎng)頁例圖:http://www.crackerjack.com
藍色同類色對比:藍色+暖色
這是一個配色難度較大的頁面。如何使這些配色和諧又能達到帶動對比的目的,就要求要有一定的配色經(jīng)驗了。難度一,在于主色調輔色調及點睛色的這三種藍色所充當?shù)慕巧\用。難度二,高純度高亮度的正黃色在這個頁面的使用。難度三,黑色的運用。
運用排除法細分得到:主色調輔色調的藍色飽和度一樣都是最高值,色相H上稍微有些微妙區(qū)別,亮度上有些變化。點睛色藍色飽和度和明度都較低,介于兩種藍色之間。三者面積如果用得不好頁面容易呈混沌的灰色狀態(tài)。拿出輔色調藍色,再回到整個頁面的配色來看,頁面色彩偏重,亮度不夠,缺少中間色階,冷暖主次傾向不夠明顯,這時把輔色調藍色添加進去正好彌補了這種缺憾。
HSB模式顯示H是60度,S飽和度與B明度都是100%,正是正黃色。正黃色只適合做小面積的點睛色使用,大面積使用頁面配色較難協(xié)調,當然正黃色做為主色調能好配色些。
在這樣的頁面色彩組合里,黑色是很難運用進去的,面積使用多了,頁面有可能會破壞所營造的氛圍、產生不協(xié)調的感覺。只在輔助性的勾勒于邊框是很好的使用辦法。
圖片里的產品顏色,有降低純度的棕黃色、土黃色、米黃色等同類黃色系,對該頁面色彩組合調配具有一定的協(xié)調能力。
結論:
通常矢量頁面的配色相對于圖片配色來說,難度較大,色彩的組織搭配,是根據(jù)設計師們自己以往的豐富配色經(jīng)驗,反復調配、反復加減而得。
該頁面設計師選取了頁面的產品圖片中的兩三種顏色,例如點睛色里的紅色、藍色和黃色,再大膽的發(fā)揮出主色調藍色、較淺的輔色調藍色和點睛色正黃色,點睛色黃色運用于最能突出產品特色的文字上,這些和諧的元素生動趣味,讓整個頁面充滿了故事情節(jié)。
本部分小節(jié):
● HSB數(shù)值H色相為240度時是正藍色,它的特性這個時候也就揮灑得越明顯。從以上不同屬性的藍色頁面色調上能看到,不同色相、飽和度、明度的藍色本身色彩特性表現(xiàn)得不是非常特殊,這也是低調沉穩(wěn)的藍色所具備的特征之一。關鍵在于該種藍色都與哪種哪幾種顏色襯托、對比的。
● 冷色系以藍色為最典型的代表,因此就產生了廣義的相對暖色,例如當與玫瑰紫色做對比時,玫瑰紫就呈現(xiàn)出微妙的暖色,當與綠色做對比色,綠色就呈出了相對的暖色,但是此種特性呈現(xiàn)得非常的微弱,應根據(jù)不同的主題頁面做具體分析。
● 當在藍色色相、明度上暗色亮色非常明朗的情況下,可以考慮添加中間色,減弱可能造成的單調感,豐富兩極色階的過渡,調和頁面的視覺感受。
● 同一種RGB、HSB數(shù)值的藍色與不同的顏色搭配時,所反映出的特性與主題是不一樣的。例如與同類色(根據(jù)色相明度純度面積等同類色里得到很多種不同的藍色),與鄰近色(根據(jù)色相明度純度面積等衍生出更多顏色),與對比色(根據(jù)色相明度純度面積等產生出的廣義對比狹義對比)…… 應多多思考、多做嘗試。
下一節(jié):網(wǎng)頁設計配色系列簡析——紫色系
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2009-06-11 17:15:00] 網(wǎng)頁設計中的3D元素
- [2007-07-23 16:19:00] 網(wǎng)頁配色:正文中國傳統(tǒng)色彩名錄
- [2006-08-09 13:09:00] 《設計師談網(wǎng)頁設計思維》引言:從哪里開始
- [2007-01-09 09:37:00] 《網(wǎng)頁配色密碼》
- [2009-04-24 08:14:00] 設計良好網(wǎng)頁的4項原則
- [2006-01-06 21:50:00] 網(wǎng)頁設計應防止的10個錯誤
- [2016-11-03 17:00:00] 那些使用圓形導航菜單的漂亮網(wǎng)頁設計
- [2006-08-23 08:11:00] 常用配色基本概念及精相關彩實例剖析
- [2015-10-20 11:34:58] 2015年的網(wǎng)頁設計趨勢
- [2007-07-02 09:52:00] 網(wǎng)頁設計配色應用實例剖析——黑色系
- [2006-08-24 18:27:00] 網(wǎng)頁設計師之路
- [2009-06-07 23:02:00] 網(wǎng)頁設計趨勢發(fā)展歷程之2009下
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
企業(yè)網(wǎng)站為什么要備案 高端輪胎網(wǎng)站設計 平面設計 外貿網(wǎng)站設計 微信小程序 搜索引擎蜘蛛 SEO優(yōu)化 網(wǎng)站規(guī)劃 營銷策略 網(wǎng)站建設,企業(yè)網(wǎng)站建設 網(wǎng)站設計資訊 企業(yè)網(wǎng)站 網(wǎng)站推廣 集團性網(wǎng)站 青島網(wǎng)站建設 視覺靈感 css 青島高端網(wǎng)站設計公司哪家好 H5專題頁面 H5 扁平化設計 搜索引擎 微官網(wǎng) 網(wǎng)站優(yōu)化 青島輪胎網(wǎng)站設計 青島高端網(wǎng)站建設 外貿網(wǎng)站建設 青島好的網(wǎng)站優(yōu)化公司 青島網(wǎng)絡公司 企業(yè)建站