建站常識
網(wǎng)頁設(shè)計(jì)配色應(yīng)用實(shí)例剖析——黑色系
2007-07-02 09:52:00
黑色能和許多色彩構(gòu)成良好的對比調(diào)和關(guān)系,運(yùn)用范圍很廣。
黑色給人深沉、神秘、寂靜、悲哀、壓抑的感受。
黑色是最有力的搭配色。
黑色也常用來表示英俊的男人。
下面我們根據(jù)黑色系搭配不同的顏色所表現(xiàn)出的特性做不同的舉例分析。
→ 黑******頁例圖:http://www.chanel.com
黑色系分析:(明度對比:黑色+白色)
從RGB和HBS模式可以看出,三組數(shù)字顯示沒有摻雜任何的數(shù)字,都統(tǒng)一到最高級0到255,即純黑和純白。
黑色白色屬于沒有色相和飽和度、只在明度兩極的非色彩。兩種極端強(qiáng)烈對比的只在明度上有區(qū)別的顏色,與前面我們所說的三原色、對比色的對比還是有較大區(qū)別的。
該頁面只有兩種非色彩搭配,即黑色白色,襯映得該頁面的設(shè)計(jì)元素也非常干凈簡練,旁邊點(diǎn)綴大小得當(dāng)?shù)奈淖衷販p小該頁面有可能因此產(chǎn)生的單調(diào)感覺。
結(jié)論:
黑白純色在明度上反差非常大,視覺沖擊強(qiáng)烈,主次分明,全站的貫穿運(yùn)用,構(gòu)成特色鮮明的設(shè)計(jì)風(fēng)格,散發(fā)迷人的高品位的貴族氣息。
黑白兩種顏色的搭配使用通??梢员憩F(xiàn)出都市化的感覺,常用于現(xiàn)代派頁面設(shè)計(jì)中。
#p# → 黑******頁例圖:http://www.foryoubruidsmode.nl
黑色系分析:(非色彩系:黑白深灰色)
該頁面與上頁配色類似,只是多了一組輔助色——灰色,黑、灰、白這三種非色彩在該頁面里都運(yùn)用到了。大家從該頁整體可以看到,多了輔助色灰色,令該頁面層次感更豐富,過渡更柔和,空間感覺增強(qiáng)。左上部點(diǎn)睛色白色塊面的運(yùn)用,使得這種空間感差距拉大,增強(qiáng)視覺層次感,同時(shí)突出標(biāo)志品牌、主題思想。另一作用在于突出文字的功能運(yùn)用。
背景深灰色明度非常低,接近于黑色,稍不留心有可能會被忽略。結(jié)合輔助色灰色再整體上看該色配色,主要起到豐富視覺層次感,緩和主色調(diào)黑色有可能帶來的僵硬感。
結(jié)論:
黑白灰非色彩色調(diào)所構(gòu)成的頁面較具特色,尤其灰色的加入更增添層次感。
結(jié)合黑白圖形,營造出一段古典的故事場景。契合該網(wǎng)站所體現(xiàn)的內(nèi)容思想。
#p# → 黑色應(yīng)用網(wǎng)頁例圖: http://www.telepopmusik.fr
黑色系分析:黑色背景
背景黑色下,除了白色,還有其他三種顏色綠色、紫色、紅色分布在不同的位置。其中綠色和紫色雖然被稱之為輔助色,但它們使用的面積仍然不多,只是相對于點(diǎn)睛色紅色來說。綠色主要是用于文字方面,紫色用于圖形方面,所指向的分工明確。從RGB模式RGB三個(gè)數(shù)值上看到紫色混合數(shù)值上較接近,因此純度降低,相對于綠色紅色來說為中間色,色彩性能上呈低調(diào)緩和狀態(tài)。
HSB模式S數(shù)值來看,綠色雖然純度上比紅色稍低些,也許是因?yàn)槭褂妹娣e較多的原因,看起來似乎比紅色醒目些。紅色在這里主要起到的是點(diǎn)明目前所屬的狀態(tài)這一功能性作用,在黑色的背景下盡管使用面積非常小,但依舊容易被瀏覽者注意到。
結(jié)論:
黑色的背景下所使用的顏色面積雖然不多,但由于黑色這一襯托放大的特性,其他顏色較容易引起瀏覽者的注意,充分發(fā)揮其設(shè)計(jì)意圖。
#p# → 黑色配******頁例圖:http://www.kurtarrigo.com
黑色系分析:(黑白淺灰)
從RGB數(shù)值都是234來上看可知,255為白色,背景色234只是在明度上稍做變化得到的淺灰色。背景的淺灰色把前景的白黑對視覺的刺激力變得柔和協(xié)調(diào)很多。雖為背景灰色,實(shí)際在整個(gè)頁面配色作用上起到了點(diǎn)睛之筆,使得頁面煥發(fā)出另外一種神秘且特殊的氣息。
該頁面無論從設(shè)計(jì)上還是配色上都非常簡潔,主要是以黑白文字為重點(diǎn),背后的白黑色塊面粗、白色邊框線條無不是為了突出前景文字的作用。
結(jié)論:
該頁面設(shè)計(jì)風(fēng)格極其簡約,除了方形塊面邊框,沒有多余的圖形修飾,主要是以文字的大小粗細(xì)、疏密間距排版為設(shè)計(jì)元素。
淺灰色的加入讓本來具強(qiáng)烈沖突色的黑白變得素雅些了,也頗具高層次格調(diào)許多。
#p# → 黑色配色應(yīng)用網(wǎng)頁例圖:http://www.panopt.net
黑色系分析:黑色+少量彩色
該頁面基本上還是以黑色為主色調(diào),雖然似乎多了不少顏色的加入,但是由于使用面積都較少,除了少許修飾外主要運(yùn)用于功能文字方面的強(qiáng)調(diào)。
輔助色藍(lán)色正藍(lán)色的HSB模式的H應(yīng)該是240,目前這顯示的是215可看出色相上稍向綠色靠攏,S93%B43%來看純度和明度都不高,因此該藍(lán)色在黑色上顯示不明顯。
這里的點(diǎn)睛色主要都運(yùn)用在文字功能上,紅色幾乎是正紅,由于降低了純度和明度,該顏色不明顯。綠色H數(shù)值為149,正綠色為120,色相上稍向藍(lán)色傾斜,純度和明度不高,因此該顏色也不明顯。
結(jié)論:
低純度低飽和度的色彩在黑色背景下,較易使整體色彩達(dá)到統(tǒng)一的目的,顏色變得柔和而含蓄。
#p# → 黑色配色應(yīng)用網(wǎng)頁例圖:http://www.africa.com.br
黑色系分析:(黑色配色:黑色+橙色)
橙色的HSB模式H色值顯示是25,而正橙色是30可以知道,該橙色色相上稍往黃色傾斜。我們通過前面的學(xué)習(xí)可以知道橙色適用于視覺要求較高的時(shí)尚網(wǎng)站,運(yùn)用于該網(wǎng)站主題設(shè)計(jì)再適合不過了。另一點(diǎn)睛橙色在色相上稍偏橙紅色,是基于橙色的一個(gè)過渡或者說是增加視覺節(jié)奏感的一個(gè)小方法。右邊文字在不同程度上也使用了橙色做為點(diǎn)睛,稍平衡了左右視覺,起到色彩左右呼應(yīng)的作用。
輔色調(diào)白色使得黑色和橙色的搭配上不至于太生硬,增強(qiáng)頁面視覺的愉悅感。
結(jié)論:
橙色在黑色的背景上顯得很鮮亮,它的特性得到了最大化的發(fā)揮。
#p# → 黑色配色應(yīng)用網(wǎng)頁例圖:http:///www.emilystrange.com
黑色系分析:(黑色配色:黑色+紅色)
輔助色紅色從HBS模式上的H為0度看出,該紅色為正紅色且純度明度都為最高值100%,在黑色這一背景的襯托下,高純度高明度的正紅色遇到黑色搭配結(jié)合而得的特性簡直發(fā)揮到了極致。因此該頁面色彩配色具有極強(qiáng)的視覺沖擊力。
點(diǎn)睛色白色是讓這兩種顏色配合起來更透亮,緩和對人視覺不適的壓迫力。
盡管頁面的設(shè)計(jì)元素為噪音效果,顏色在不同面積分配上也參差不齊的感覺,但是由于黑色主色調(diào)為背景,牢牢掌控了全局,頁面設(shè)計(jì)及配色上也能達(dá)到統(tǒng)一的目的。
結(jié)論:
紅色和黑色的搭配被譽(yù)為商業(yè)的成功色。一是因?yàn)榧t色是一種對人刺激性很強(qiáng)的顏色,是最鮮明生動的、最熱烈的顏色。在黑色的反襯下鮮明紅色極容易吸引人們的目光。紅色相對于其他顏色,視覺傳遞速度最快。
紅黑這兩種配色也被廣泛的運(yùn)用于較能體現(xiàn)個(gè)性的時(shí)尚類網(wǎng)站,讓人印象強(qiáng)烈的深刻。
本部分小節(jié):
● 黑色是最暗的顏色,是純度、色相、明度最低的非彩色。因此它較容易起到襯托和發(fā)揮起其他顏色的特性,是最有力的搭配色。
● 黑白色的搭配較充滿個(gè)性,合理運(yùn)用能散發(fā)出另外一種迷人的高品位高格調(diào)的貴族氣質(zhì)。黑色與橙色搭配較容易營造視覺要求較高的時(shí)尚網(wǎng)站。黑色與紅色的搭配被譽(yù)為是商業(yè)的成功色,具有極強(qiáng)的視覺沖擊力。
● 無論頁面上使用或者色相跨度大的多種顏色、或是高純度低純度、或者高對比的顏色,只要有黑色這一最得力的色彩為主色調(diào)掌控著,頁面設(shè)計(jì)配色上能得到和諧統(tǒng)一的效果。
下一節(jié)我們介紹網(wǎng)頁設(shè)計(jì)配色系列的灰色系。
近期更新
- [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)該更看重框架搭建還是視覺觀感?
- [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)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(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ì)都有哪些新的趨勢?
延伸閱讀
- [2007-04-23 08:48:00] 網(wǎng)頁設(shè)計(jì)配色應(yīng)用實(shí)例剖析——紫色系
- [2017-01-17 14:43:08] 蘋果官網(wǎng)喜迎中國年,公布雞年春節(jié)年畫壁紙
- [2006-01-06 21:46:00] 配色方案--構(gòu)圖必學(xué)
- [2006-11-08 09:57:00] 學(xué)網(wǎng)頁設(shè)計(jì)與網(wǎng)頁制作,你該做些什么?
- [2007-06-19 15:19:00] 主流web2.0網(wǎng)站的配色參考方案
- [2007-01-02 21:09:00] 網(wǎng)頁設(shè)計(jì)創(chuàng)業(yè)者大有作為
- [2006-04-28 15:07:00] 從亞馬遜網(wǎng)站導(dǎo)航欄的變遷史看網(wǎng)頁設(shè)計(jì)
- [2010-03-18 18:17:00] 網(wǎng)頁設(shè)計(jì)從優(yōu)秀到卓越的6個(gè)細(xì)節(jié)
- [2010-05-11 10:50:00] 設(shè)計(jì)中的色彩:黑色
- [2005-12-29 21:29:00] 網(wǎng)頁設(shè)計(jì)中排版與布局基礎(chǔ)
- [2016-07-28 14:12:42] 網(wǎng)站設(shè)計(jì):如何讓交互設(shè)計(jì)更加簡化?
- [2009-11-12 08:30:00] 慢慢的網(wǎng)頁
解決方案
輪胎行業(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)動網(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)頁制作 青島IT資訊 色彩心理學(xué) 青島開發(fā)區(qū)建站公司 微信小程序 英文網(wǎng)站建設(shè) 企業(yè)網(wǎng)站為什么要備案 企業(yè)網(wǎng)站 IT資訊 圖形網(wǎng)格 官網(wǎng)建設(shè) 頁面設(shè)計(jì) 青島網(wǎng)頁設(shè)計(jì) 青島網(wǎng)站案例 平面設(shè)計(jì) 網(wǎng)站設(shè)計(jì)趨勢 青島做網(wǎng)站多少錢 HTML5 html和css 青島網(wǎng)站營銷 插畫 網(wǎng)站設(shè)計(jì)資訊 網(wǎng)站改版 交互設(shè)計(jì) 網(wǎng)站視覺 網(wǎng)站設(shè)計(jì) 青島網(wǎng)站優(yōu)化 外貿(mào)網(wǎng)站建設(shè) robots