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

3036

Preview Summary

website Reviews : 36 5.0

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

個人對於顏色偏好,影響著網頁配色所呈現的面貌。

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

使用顏色時應該本著某種情感或因子,才能夠表達這個網站的「個性」,完全依賴設計模板的配色並非最佳選擇。由於配色除了美感與偏好,還與一些色彩學理相關,所以本篇將分成兩節說明,僅參考範例者直接進入下一頁。

配色與色彩學理

本篇示範的主色是六號色票當中的「靛色」,它比顏料靛更深更暗。依該動漫作品的性質處理深色背景的手法相對於傳統暗色系網頁來說還是偏明亮,可以依喜好加亮或調暗。

暗色系配色範例

光學特性

將可見光依照光學頻譜來解釋人眼所能分析的範圍,其電磁輻射的波長約在 380 ~ 780 nm(奈米)之間,超出的部份即是不可見光波。其中靛色系是光譜中大約 420 ~ 440 nm 之間的色波段。人類眼睛可區分 3 ~ 5 nm 波長差異的色光,唯對此波段敏感度較差。

光譜色彩

生理知覺

視覺佔人類知覺的大部分,視覺認知的偏移有可能造成生活上的困擾,例如色弱或特定色認知障礙。人眼構造的視覺細胞在視網膜中央有 6 ~ 7 million 的視錐細胞,沿著中央邊緣擴散的是 120 million 的視桿細胞。視桿細胞負責光感強度,視錐細胞的視色素則區分紅、藍、綠三種感光細胞,視錐細胞亦能感受光明暗強度。

透過技術實驗視錐細胞的光譜吸收曲線,發現實驗結果繪製的曲線有三種類型,分別代表了三類光譜吸收特性不同的視錐細胞,相當於紅、藍、綠三色光的波長。用微電極記錄單個視錐細胞感受器電位的方法,也得到了類似的結果,即不同單分光引起的超極化型感受器電位的大小,在不同視錐細胞是不一樣的,峰值出現的情況符合於三原色學說。

視錐細胞對應三原色光的敏感峰值圖

色光色彩特性

每一色光有物理定義的特定波長。單個視錐細胞可以同時接收不同色光,而人類對於靛色的分辨能力卻是相對的弱,有的人甚至無法分辨靛色與藍色、紫色的不同。這因為人眼對可見光的反應是主觀的定義方式

靛色還有另一個特性,它在高明度時偏向藍色;低明度則偏向紫色。而明度更低時會隨著環境光源改變傾向,這種色彩錯覺所產生類似色彩偏移的現象是因為顏色在腦中合成的「色覺」並非光譜某波長頻率的絕對值可比較,源自於生理因素。這種情形在顯示器上檢視色彩更為明顯。

3C 產品如何表現色彩

雖然靛色在可見光有波段範圍,在顯示器上卻不是那麼一回事。螢幕顯示器以紅、藍、綠三原色光依照比例以非負數的方式加減色光,例如:紅光 + 綠光 可顯示黃色,但不可說:紅光 + 綠光 = 黃色。因為原本在色光波段 565 ~ 590 nm 的範圍內就存在黃色,對顯示器而言黃色卻必須以紅光 + 綠光來呈現色彩。

有些波段的色光不在 CIE 以數學式定義的標準色域裡面。以波長 430 nm 的靛色光為例,在顯示器上無法顯示該光譜色,標準色的「螢幕靛」只是近似光譜靛。固然 CIE 色域足以超越人眼所能辨識的總和,顯示器即使經過色彩校準,在不同廠牌也會呈現某種色偏。於是某些色彩在特定條件下與視覺經驗的變異引發奇妙的生理反應。

CIE 國際照明委員會 標準色域

生物演化的影響

這張  趣味圖 的揶揄,意指男女對於色彩敏感度的差異。 實際上男女之間的確在色調辨識上不同,這是經過生物學研究發表的資料。例如男性對於暖色調較敏感,一樣的橙紅色在男性眼中會更紅些,女性則對綠色辨識度更高。

這種視感差異源自男性睪丸激素刺激視覺皮質層的神經元發育,大腦此區域衍生高出女性 25% 的神經細胞。在生物演化影響下,男性對於動態視力較佳並過濾藍天綠地的顏色便於狩獵。

研究指出:男性在色彩敏感度優於女性,但涉及顏色深淺的明暗靈敏度則是女性優於男性。這些研究有利於網站分析客戶源再決定配色。

行銷分析看網頁配色

使用暗色系作為網頁配色的主色是有些限制的。例如,不適合長篇文字的觀看、降低消費性商品購買意願、不利年長訪客的眼力﹍。或許你認為暗色調的網頁黑抹抹地有什麼優點?容我說明以下事實。

  • 時尚或高價商品、會員制網站偏好暗色系網頁設計,質感。
  • 暗色系比淺色系容易突顯內容,襯托重點區域。
  • 暗色系網站更適合展示照片、內嵌影片。
  • 使用明色或亮彩的物件(Ex : 按鈕)更刺激轉換率。
  • 富有專業形象與信任度。

避開文化差異的地雷

黑色是人類視覺體驗的強勢色。假使要運用暗色系配色,最好還是先分析網站的訪客喜好,人文因素將影響接受度。

例如,荀子在《勸學》中有言:「青,取之於藍,而青於藍」。這裡所指的青不是現代光譜分析的青色光;而是染料靛色。當時的藍比較偏向現代的青色(較淺)。對於色彩的定義差異不僅表現在時代條件,不同人種或地域對於某些範圍的顏色有不同的反應情感。

36

·