建站常識(shí)
網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用——色彩的對(duì)比
2006-10-09 10:25:00
為了使網(wǎng)頁(yè)的整體畫(huà)面呈現(xiàn)穩(wěn)定協(xié)調(diào)的感覺(jué),以便充分的掌握其規(guī)律來(lái)更好的分析學(xué)習(xí),上次我們介紹了視覺(jué)角色主次位置的幾個(gè)概念,本節(jié)我們介紹色彩的對(duì)比。
對(duì)比與調(diào)和就是形式美的變化與統(tǒng)一規(guī)律
在一定條件下,不同色彩之間的對(duì)比會(huì)有不同的效果。在不同的環(huán)境下,多色彩給人一種印象,色彩單一給人另一種印象。
各種純色的對(duì)比會(huì)產(chǎn)生鮮明的色彩效果,很容易給人帶來(lái)視覺(jué)與心理的滿(mǎn)足。紅、黃、藍(lán)三種顏色是最極端的色彩,它們之間對(duì)比,哪一種顏色也無(wú)法影響對(duì)方。
很多朋友都以為色彩對(duì)比主要是紅綠、橙藍(lán)、黃紫色的對(duì)比,實(shí)際色彩對(duì)比范疇不局限于這些。是指各種色彩的界面構(gòu)成中的面積、形狀、位置以及色相、明度、純度之間的差別,使網(wǎng)頁(yè)色彩配合增添了許多變化、頁(yè)面更加豐富多彩。
色彩的對(duì)比規(guī)律大致有以下幾點(diǎn):
■ 色相對(duì)比
是指因色相之間的差別形成的對(duì)比。當(dāng)主色相確定后,必須考慮其他色彩與主色相是什么關(guān)系,要表現(xiàn)什么內(nèi)容及效果等,這樣才能增強(qiáng)其表現(xiàn)力。不同色相對(duì)比取得的效果有所不同,兩色越接近,對(duì)比效果越柔和。越接近補(bǔ)色,對(duì)比效果越強(qiáng)烈。
→ 色相對(duì)比網(wǎng)頁(yè)例圖:http://www.portfolios.com
色相對(duì)比分析:
主要是以綠色與藍(lán)色之間的色相對(duì)比。從HSB數(shù)值上可看出嫩綠色的S純度高B亮度也很高,因此艷麗的顏色作為背景與前景純度稍低的墨綠和轱藍(lán)色形成色相之間的對(duì)比。前景的墨綠雖然純度達(dá)到最高值100%,比主色調(diào)高不少,但是因?yàn)榱炼鹊?,因此色彩顯示沒(méi)有主色調(diào)明艷。
結(jié)論:
該頁(yè)面色相的對(duì)比,主要作用于前景與背景的對(duì)比、局部與整體的對(duì)比。
■ 明度對(duì)比
明度對(duì)比可分為:彩色差的明度對(duì)比及非彩色差的明度對(duì)比
是指色彩之間明暗程度的差別而形成的對(duì)比。是頁(yè)面形成恰當(dāng)?shù)暮?、白、灰效果的主要手段。明度?duì)比在視覺(jué)上對(duì)色彩層次和空間關(guān)系影響較大。例如檸檬黃明度高,藍(lán)紫色的明度低,橙色和綠色屬中明度,紅色與藍(lán)色屬中低明度。
→ 明度對(duì)比網(wǎng)頁(yè)例圖:http://www.dior.com
明度對(duì)比分析:(非彩色差)
嚴(yán)格來(lái)說(shuō),該頁(yè)面應(yīng)該是黑白灰色非色彩構(gòu)成,攝影圖片中的人物衣服為灰色,相對(duì)單純的黑白對(duì)比柔和舒適于視覺(jué)。能使頁(yè)面顯得更單純、統(tǒng)一,形成另一道獨(dú)特的風(fēng)景。
是指不同色彩之間純度的差別而形成的對(duì)比。色彩純度可大致分為高純度、中純度、低純度三種。未經(jīng)調(diào)和過(guò)的原色純度是最高的,而間色多屬中純度的色彩,復(fù)色其本身純度偏低而屬低純度的色彩范圍。純度的對(duì)比會(huì)使色彩的效果更明確肯定。
→ 純度對(duì)比網(wǎng)頁(yè)例圖:http:// www.havaianas.com
純度對(duì)比分析:
整個(gè)頁(yè)面看起來(lái)異常艷麗刺激然而又非常的協(xié)調(diào)。以上數(shù)值主要選取了幾種較有代表性的顏色。
大家注意看,以上色彩除了粉紅色,其他幾組顏色都是高飽和度高亮度的顏色,因此充分的發(fā)揮出了色彩的艷麗程度。包括粉紅色在內(nèi)的幾種灰色階,在中間起到了和諧作用。白色能拉開(kāi)相近色階的空間及明快頁(yè)面的作用,在這里可以說(shuō)是功不可沒(méi)。
結(jié)論:
頁(yè)面實(shí)際上用了不少顏色,配色大膽。抓住顏色主次冷暖的安排,適度再加上和諧的過(guò)渡色灰色,實(shí)現(xiàn)了作者對(duì)該頁(yè)面的輕松配色。從多種高純度的搭配協(xié)調(diào)能力上看,足可見(jiàn)作者對(duì)色彩設(shè)計(jì)搭配不一般的功底。
這類(lèi)網(wǎng)頁(yè)配色非常能夠體現(xiàn)出一個(gè)網(wǎng)站頁(yè)面產(chǎn)品個(gè)性,配色難度大。讓人過(guò)目難忘。
■ 補(bǔ)色對(duì)比
將紅與綠、黃與紫、藍(lán)與橙等具有補(bǔ)色關(guān)系的色彩彼此并置,使色彩感覺(jué)更為鮮明,純度增加,稱(chēng)為補(bǔ)色對(duì)比。
→ 補(bǔ)色對(duì)比網(wǎng)頁(yè)例圖:http:// www.forthosewholovelife.co.uk
補(bǔ)色對(duì)比分析:
由冷色系的綠色、藍(lán)色組成大背景環(huán)境,純度較低。前景主要是突出產(chǎn)品、文字信息內(nèi)容的大紅色形成補(bǔ)色對(duì)比效果,RGB的R255數(shù)值與HSB是H為零,數(shù)值顯示非常明確,標(biāo)準(zhǔn)的大紅色。純度亮度非常高,達(dá)到最高值,加之白色的勾邊,使得紅色更為凸顯,更易于視覺(jué)對(duì)信息的迅速捕捉。
結(jié)論:
對(duì)比色的合理搭配,能拉開(kāi)前景與背景的空間感,突出頁(yè)面主體物。尤其是紅色在主體物的運(yùn)用,能迅速傳遞視覺(jué)的效果。
#p# ■ 冷暖對(duì)比
是指不同色彩之間的冷暖差別形成的對(duì)比。色彩分為冷、暖兩大色系,以紅、橙、黃為暖色體系,藍(lán)、綠、紫則代表著冷色系,兩者基本上互為補(bǔ)色關(guān)系。另外,色彩的冷暖對(duì)比還受明度與純度的影響,白光反射高而感覺(jué)冷,黑色吸收率高而感覺(jué)暖。
→ 冷暖對(duì)比網(wǎng)頁(yè)例圖:http:// disney.go.com
冷暖對(duì)比分析:
以上這幾組顏色乍一看感覺(jué)鮮艷程度都差不多,但是通過(guò)觀察它們的數(shù)值發(fā)現(xiàn)飽和度都有相差,然而明度相近,因此它們給人造成的視覺(jué)感受幾乎是相同的。該頁(yè)面冷暖顏色較為豐富,橙和藍(lán)是對(duì)比最強(qiáng)烈的補(bǔ)色,其次是傾向不夠明顯的補(bǔ)色黃、紫。明度不同的兩個(gè)綠色起到了冷暖視覺(jué)的過(guò)渡作用。主色調(diào)的淺藍(lán)色亮度較高,讓頁(yè)面不易給人沉悶的感覺(jué)。
結(jié)論:
冷暖對(duì)比的應(yīng)用,通常在休閑娛樂(lè)網(wǎng)站、食品網(wǎng)站出現(xiàn)比較多。
將這兩個(gè)色系的色彩安排在同一畫(huà)面時(shí),其對(duì)比效果極為強(qiáng)烈。通常初學(xué)者較容易使兩色相互排斥,導(dǎo)致畫(huà)面色調(diào)不諧調(diào)。一般我們采用兩種調(diào)和的方法。
純度調(diào)整
降低冷暖兩色純度。用明度黑、白、灰變化來(lái)調(diào)整畫(huà)面的層次、直接使用黑、白、灰色系進(jìn)入畫(huà)面搭配,或者加入補(bǔ)色的諧調(diào),也都能很好的起到協(xié)調(diào)的效果。
→ 純度調(diào)整網(wǎng)頁(yè)例圖:http:// www.darkelephant.com
純度調(diào)整分析:
主色調(diào)的橙色,添入了少許黑色做漸變背景色,降低了純度。輔助色的藍(lán)色是橙色的補(bǔ)色,主要起的是使得整個(gè)頁(yè)面過(guò)多的暖色降低協(xié)調(diào)于整體的效果,及背景色的棕色都分別提暗降低純度。而左上角的黃色則通過(guò)提高了亮度來(lái)降低純度。一個(gè)頁(yè)面里應(yīng)有少量純度較高的顏色而不至于使整個(gè)頁(yè)面過(guò)于壓抑,純度亮度很高的點(diǎn)睛色紅色就起到了這個(gè)作用。
結(jié)論:
純度的調(diào)整主要是通過(guò)明度黑、白、灰變化來(lái)調(diào)整畫(huà)面的層次,適當(dāng)?shù)募尤胙a(bǔ)色也是其中的一個(gè)辦法。
面積調(diào)整
主次的面積區(qū)分。根據(jù)設(shè)計(jì)主題的需要,在畫(huà)面的面積上以一方為主色,于是就掌控畫(huà)面的色調(diào)作用,其他的顏色在使用面積上拉開(kāi)距離,使畫(huà)面的主次關(guān)系更突出,在統(tǒng)一的同時(shí)富有變化。
→ 面積調(diào)整網(wǎng)頁(yè)例圖:http:// www.upstairz.com
面積調(diào)整分析:
作為大面積使用的主色調(diào)--飽和度和亮度為最高值的橙色,通過(guò)適當(dāng)面積的白色加入?yún)f(xié)調(diào)和平衡了視覺(jué)的作用外,主體物的深紅紋樣的圖片點(diǎn)綴著純度、亮度較高的紅色有醒目作用,縮小面積而卻又能突出于視覺(jué)中心點(diǎn),疏密構(gòu)圖的對(duì)比效果。
結(jié)論:
大面積的顏色和小面積使用的顏色可以拉開(kāi)主次關(guān)系,位置的正確安排也是一個(gè)方面。
同一種色彩,面積越大,明度、純度越強(qiáng),面積越小,明度、純度越低。面積大的時(shí)候,亮的色顯得更輕,暗的色顯得更重。這種現(xiàn)象稱(chēng)為色彩的面積效果。面積對(duì)比是指頁(yè)面中各種色彩在面積上多與少、大與小的差別,影響到頁(yè)面主次關(guān)系。
面積的對(duì)比,可以是中高低明度差的面積變化及中高低純度差的面積變化。
→ 面積對(duì)比網(wǎng)頁(yè)例圖:http:// www.parkpack.ru面積對(duì)比分析:
作為大面積使用的主色調(diào)--飽和度和亮度為最高值的橙色,通過(guò)適當(dāng)面積的白色加入?yún)f(xié)調(diào)和平衡了視覺(jué)的作用外,主體物的深紅紋樣的圖片點(diǎn)綴著純度、亮度較高的紅色有醒目作用,縮小面積而卻又能突出于視覺(jué)中心點(diǎn),疏密構(gòu)圖的對(duì)比效果。
結(jié)論:
大面積的顏色和小面積使用的顏色可以拉開(kāi)主次關(guān)系,位置的正確安排也是一個(gè)方面。
下一節(jié)我們介紹色彩的調(diào)和。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2006-10-12 08:26:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——紅色系
- [2007-01-09 09:37:00] 《網(wǎng)頁(yè)配色密碼》
- [2007-07-23 16:19:00] 網(wǎng)頁(yè)配色:正文中國(guó)傳統(tǒng)色彩名錄
- [2006-10-08 07:59:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用——色調(diào)
- [2005-12-28 13:59:00] 網(wǎng)頁(yè)配色之黃金分割法
- [2006-11-22 08:34:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——黃色系
- [2006-10-27 08:01:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用實(shí)例剖析——橙色系
- [2009-05-18 08:00:00] 網(wǎng)頁(yè)配色工具
- [2006-10-10 08:35:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用——色彩的調(diào)和
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
網(wǎng)站建設(shè),手機(jī)網(wǎng)站 視覺(jué)靈感 力圖 空白和簡(jiǎn)潔的設(shè)計(jì) 集團(tuán)公司網(wǎng)站建設(shè) 中小型企業(yè)網(wǎng)站建設(shè) 交互設(shè)計(jì) HTML5 微網(wǎng)站 青島IT資訊 robots 青島網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站制作 H5定制設(shè)計(jì) 良好的導(dǎo)航 舒適的界面 青島網(wǎng)站設(shè)計(jì)哪家好 網(wǎng)站的速度 用戶(hù)界面 企業(yè)網(wǎng)站建設(shè) 網(wǎng)站交互設(shè)計(jì) 微官網(wǎng)帶來(lái)的好處 IT資訊 微信小程序 青島高端網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) SEO優(yōu)化 網(wǎng)站設(shè)計(jì) 青島輪胎網(wǎng)站設(shè)計(jì)公司