暗色系網頁設計 & 色彩學理應用

3037

Preview Summary

website Reviews : 36 5.0

Dark color scheme (暗色系網頁)在網頁配色當中是獨特的存在,依我所知大多數人並不擅長處理這類闇黑色彩構成。此篇引用另一篇動漫色彩運用範例其中一組色票當成本次暗色系網頁設計的配色示範。從色彩學原理看如何處理暗色系網頁配色以及未來配色趨勢。

暗色系網頁 色卡運用

較常見的暗色背景顏色大多屬於灰黑鉛色,或是深藍色,未來幾年暗色的選擇性更多了。看過上一節關於色彩學理的簡介,知道某些顏色不存在於色散光譜當中,例如:洋紅、粉紅、棕等顏色是沒有色光的。

「萌萌少女眼中發射出粉紅的戀愛光束!」這種語句是有問題的。人眼之所以會看到粉紅色,這是大腦的色覺認知而不是透過三原色的色光調和分析。而每個人對於粉紅色的認知是否相同呢?這個問題科學家還在爭議中。

網頁設計者的壞心眼

依照色域組合,青、洋紅為二次色;棕色為三次色,是顏料調和的概念所產生,有些顏色雖不是色光;卻也是基於腦海顏色合成的結果。這次的範例正好相反,靛色存在於光譜;卻不存在於顯示器色域當中。未來將有更多這類配色運用在設計,你可能不會注意它的顏色細微差異而以為是其他顏色,也可能一時間不知道該怎麼形容這是什麼顏色。

人類對於自然光譜色的接受度高,一旦遭遇腦內合成色,屬於人文因素、情感反饋、潛意識等方面的影響開始浮現。此種由色光疊加轉變為色料調和的概念成為網頁設計者新的藝術主張。

網頁顯色實例

三原色(光): 紅 #FF0000 綠 #00FF00 藍 #0000FF

二次色: 青 #00FFFF 洋紅 #FF00FF 黃 #FFFF00

三次色: 黃綠 #7FFF00 藍灰 #708090 赤褐 #80461B

四次色: 鼠尾草 #BCB88A 李子色 #8E4585 粉梅 #E37D6E

五次色: 卡其 #CFB482 冷灰 #8C92AC 棕灰 #483C32

實例解析

以「馬克十二」現在的結構當成示範。

色卡配色實例

 六號色票的深靛為主色,單獨使用大塊面的一種顏色缺乏空間感,所以在背景區域加重顏色,使版面產生「景深」的效果。第二種主色運用在網站中計畫突顯的區域,假設我以作者區塊當成宣傳重點,或是為了降低跳出率使用在「關聯文章模組」。這些被對比色所彰顯的區域會「浮出」畫面,這是使用淺色系的網頁很難比擬的特質。

 第二色選用越明亮的顏色會越突顯效果。相對地,區域空間要隨著縮小;以免壓過第一主色。第三色是一種指標作用,儘量不要和其他兩種主色搶地盤。

 一個鮮活色澤的按鈕易引發訪客按下去的衝動!於是暗色系網頁轉換率較差的缺點有機會平衡。請精心選用高彩、高亮的對比色。

反向操作

如果你不習慣使用暗色系,或是客源接受度不高,那麼採用反向策略吧!將暗色系運用在白色背景(淺色底)的網頁中,淺色轉化成為第一主色。

淺色背景配色實例

此時暗色調的用色區塊反而成為吸引眼光的焦點(勿過度使用),在明暗高對比的情形下,白色底色成為一種顏色。倘若沒有使用高對比的網頁,淺色背景簡直失去存在感,通常淪為平淡反應的下場。

深色調的設計趨勢

黑色是永遠的霸主!誠心建議,千萬不要使用高彩螢光色與黑色搭配,除非整個網站設計重點傾向地鐵、地下道塗鴉風格。預估未來的趨勢將是小比例的灰彩色調與黑色搭配,例如灰磚紅。

黑色背景配色範例

除了黑色外,前文提過,將會有更多接近黑色的其他顏色被使用,它像是畫布上刻劃歲月的痕跡,混雜許多顏色微粒。這些怪怪分辨不出正確顏色的色彩具有衝擊潛意識的作用,在新一代的色彩心理學已經有研究資料。

文章看到最後的網友,您是否注意到範例的六號色票跟動漫畫面的深灰藍是不一樣的色系嗎?再回上一頁看看 :)

36
·