<acronym id="2i0u2"><center id="2i0u2"></center></acronym>
<sup id="2i0u2"></sup>
<acronym id="2i0u2"><div id="2i0u2"></div></acronym>
<acronym id="2i0u2"><center id="2i0u2"></center></acronym>
<acronym id="2i0u2"><small id="2i0u2"></small></acronym><rt id="2i0u2"><small id="2i0u2"></small></rt>
 
做網站知識

網站設計一點通:黑色系網頁設計配色應用

新聞資訊 發布時間2011.9.25.瀏覽數:3091

黑色系網頁設計配色應用

黑色系網頁設計配色應用

黑色是暗色,是純度、色相、明度最低的非彩色。象征著力量,有時感覺沉默、虛空,有時感覺莊嚴肅穆,有時又意味著不吉祥和罪惡。自古以來,世界各族都公認黑色代表死亡、悲哀黑色具有能吸收光線的特性,別有一種變幻無常的感覺。
黑色能和許多色彩構成良好的對比調和關系,運用范圍很廣。
黑色給人深沉、神秘、寂靜、悲哀、壓抑的感受。
黑色是最有力的搭配色。
黑色也常用來表示英俊的男人。
下面我們根據黑色系搭配不同的顏色所表現出的特性做不同的舉例分析。

黑色系分析:(明度對比:黑色+白色)
從RGB和HBS模式可以看出,三組數字顯示沒有摻雜任何的數字,都統一到最高級0到255,即純黑和純白。
黑色白色屬于沒有色相和飽和度、只在明度兩極的非色彩。兩種極端強烈對比的只在明度上有區別的顏色,與前面我們所說的三原色、對比色的對比還是有較大區別的。
該頁面只有兩種非色彩搭配,即黑色白色,襯映得該頁面的設計元素也非常干凈簡練,旁邊點綴大小得當的文字元素減小該頁面有可能因此產生的單調感覺。

結論:
黑白純色在明度上反差非常大,視覺沖擊強烈,主次分明,全站的貫穿運用,構成特色鮮明的設計風格,散發迷人的高品位的貴族氣息。
黑白兩種顏色的搭配使用通??梢员憩F出都市化的感覺,常用于現代派頁面設計中。

黑色系分析:(非色彩系:黑白深灰色)
該頁面與上頁配色類似,只是多了一組輔助色——灰色,黑、灰、白這三種非色彩在該頁面里都運用到了。大家從該頁整體可以看到,多了輔助色灰色,令該頁面層次感更豐富,過渡更柔和,空間感覺增強。左上部點睛色白色塊面的運用,使得這種空間感差距拉大,增強視覺層次感,同時突出標志品牌、主題思想。另一作用在于突出文字的功能運用。
背景深灰色明度非常低,接近于黑色,稍不留心有可能會被忽略。結合輔助色灰色再整體上看該色配色,主要起到豐富視覺層次感,緩和主色調黑色有可能帶來的僵硬感。
 
結論:
黑白灰非色彩色調所構成的頁面較具特色,尤其灰色的加入更增添層次感。
結合黑白圖形,營造出一段古典的故事場景。契合該網站所體現的內容思想。

黑色系分析:黑色背景
背景黑色下,除了白色,還有其他三種顏色綠色、紫色、紅色分布在不同的位置。其中綠色和紫色雖然被稱之為輔助色,但它們使用的面積仍然不多,只是相對于點睛色紅色來說。綠色主要是用于文字方面,紫色用于圖形方面,所指向的分工明確。從RGB模式RGB三個數值上看到紫色混合數值上較接近,因此純度降低,相對于綠色紅色來說為中間色,色彩性能上呈低調緩和狀態。
HSB模式S數值來看,綠色雖然純度上比紅色稍低些,也許是因為使用面積較多的原因,看起來似乎比紅色醒目些。紅色在這里主要起到的是點明目前所屬的狀態這一功能性作用,在黑色的背景下盡管使用面積非常小,但依舊容易被瀏覽者注意到。

結論:
黑色的背景下所使用的顏色面積雖然不多,但由于黑色這一襯托放大的特性,其他顏色較容易引起瀏覽者的注意,充分發揮其設計意圖。

黑色系分析:(黑白淺灰)
從RGB數值都是234來上看可知,255為白色,背景色234只是在明度上稍做變化得到的淺灰色。背景的淺灰色把前景的白黑對視覺的刺激力變得柔和協調很多。雖為背景灰色,實際在整個頁面配色作用上起到了點睛之筆,使得頁面煥發出另外一種神秘且特殊的氣息。
該頁面無論從設計上還是配色上都非常簡潔,主要是以黑白文字為重點,背后的白黑色塊面粗、白色邊框線條無不是為了突出前景文字的作用。

結論:
該頁面設計風格極其簡約,除了方形塊面邊框,沒有多余的圖形修飾,主要是以文字的大小粗細、疏密間距排版為設計元素。
淺灰色的加入讓本來具強烈沖突色的黑白變得素雅些了,也頗具高層次格調許多。

黑色系分析:黑色+少量彩色
該頁面基本上還是以黑色為主色調,雖然似乎多了不少顏色的加入,但是由于使用面積都較少,除了少許修飾外主要運用于功能文字方面的強調。
輔助色藍色正藍色的HSB模式的H應該是240,目前這顯示的是215可看出色相上稍向綠色靠攏,S93%B43%來看純度和明度都不高,因此該藍色在黑色上顯示不明顯。
這里的點睛色主要都運用在文字功能上,紅色幾乎是正紅,由于降低了純度和明度,該顏色不明顯。綠色H數值為149,正綠色為120,色相上稍向藍色傾斜,純度和明度不高,因此該顏色也不明顯。

結論:
低純度低飽和度的色彩在黑色背景下,較易使整體色彩達到統一的目的,顏色變得柔和而含蓄。


黑色系分析:(黑色配色:黑色+橙色)
橙色的HSB模式H色值顯示是25,而正橙色是30可以知道,該橙色色相上稍往黃色傾斜。我們通過前面的學習可以知道橙色適用于視覺要求較高的時尚網站,運用于該網站主題設計再適合不過了。另一點睛橙色在色相上稍偏橙紅色,是基于橙色的一個過渡或者說是增加視覺節奏感的一個小方法。右邊文字在不同程度上也使用了橙色做為點睛,稍平衡了左右視覺,起到色彩左右呼應的作用。
輔色調白色使得黑色和橙色的搭配上不至于太生硬,增強頁面視覺的愉悅感。

結論:
橙色在黑色的背景上顯得很鮮亮,它的特性得到了最大化的發揮。


黑色系分析:(黑色配色:黑色+紅色)
輔助色紅色從HBS模式上的H為0度看出,該紅色為正紅色且純度明度都為最高值100%,在黑色這一背景的襯托下,高純度高明度的正紅色遇到黑色搭配結合而得的特性簡直發揮到了極致。因此該頁面色彩配色具有極強的視覺沖擊力。
點睛色白色是讓這兩種顏色配合起來更透亮,緩和對人視覺不適的壓迫力。
盡管頁面的設計元素為噪音效果,顏色在不同面積分配上也參差不齊的感覺,但是由于黑色主色調為背景,牢牢掌控了全局,頁面設計及配色上也能達到統一的目的。

結論:
紅色和黑色的搭配被譽為商業的成功色。一是因為紅色是一種對人刺激性很強的顏色,是最鮮明生動的、最熱烈的顏色。在黑色的反襯下鮮明紅色極容易吸引人們的目光。紅色相對于其他顏色,視覺傳遞速度最快。
紅黑這兩種配色也被廣泛的運用于較能體現個性的時尚類網站,讓人印象強烈的深刻。

本部分小節:

● 黑色是最暗的顏色,是純度、色相、明度最低的非彩色。因此它較容易起到襯托和發揮起其他顏色的特性,是最有力的搭配色。
● 黑白色的搭配較充滿個性,合理運用能散發出另外一種迷人的高品位高格調的貴族氣質。黑色與橙色搭配較容易營造視覺要求較高的時尚網站。黑色與紅色的搭配被譽為是商業的成功色,具有極強的視覺沖擊力。
● 無論頁面上使用或者色相跨度大的多種顏色、或是高純度低純度、或者高對比的顏色,只要有黑色這一最得力的色彩為主色調掌控著,頁面設計配色上能得到和諧統一的效果。

三行網絡_廣州網站改版公司 ——網頁細節精細制作!秉承以高品質網頁設計,豐富的網站制作經驗和高超創意的建網站水平,根據您的企業的行業類型和產品特點設計出更加商業化,以優秀的視覺效果為您量身打造經典的企業網站形象,為廣大商業客戶搭起“雙贏之橋”。

此文《網站設計一點通:黑色系網頁設計配色應用》由三行網絡公司原創,轉載請保留原文鏈接,謝謝!
關鍵詞標簽:黑色系網頁設計配色應用    (PC+手機)響應式網站建設

15989229398(微信咨詢)

專業做網站 · ¥明碼實價!


匠心打造精品,用心成就經典!攜手客戶共創雙贏!
? Copyright 廣州三行網絡科技有限公司
粵ICP備案號:09210325

屁屁草草影院ccyycom