萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 網頁設計中的色彩應用

網頁設計中的色彩應用

  色彩的運用在網頁中的作用真是太重要了,有些網頁看上去十分典雅、有品位,令人賞心悅目,但是頁面結構卻很簡單、圖象也不復雜,這主要是色彩運用得當,色彩的魅力讓人難以抵擋,你是否明白看似簡單的顏色運用中的原理以及奧秘呢?這就涉及到很多色彩原理的知識,因此我特地將本來屬於圖象制作內的色彩作為一個獨立攔目來介紹。

  1、色彩基本概念

  自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色,而其他所有顏色均屬於彩色。任何一種彩色具有三個屬性:

  (1)色相(Hue):   也叫色澤,是顏色的基本特征,反映顏色的基本面貌。

  (2)飽和度(Saturation):   也叫純度,指顏色的純潔程度。

  (3)明度(Brightness或Lightness或Luminousity):   也叫亮度,體現顏色的深淺。

  非彩色只有明度特征,沒有色相和飽和度的區別。

  2、色彩的三原色

  電腦屏幕的色彩是由RGB(紅、綠、藍)三種色光所合成的,而我們可通過調整這三個基色就可以調校出其它的顏色,在許多圖像處理軟件裡,都有提供色彩調配功能,你可輸入三基色的數值來調配顏色,也可直接根據軟件提供的調色板來選擇顏色。

  3、電腦影像的色彩

  電腦影像的色彩是經由位元(BIT)的計算和組合而來,單純的黑白圖像是最簡單的色彩結構,在電腦上用到1位元的資料,雖說只有黑色和白色,但仍能透過疏密的矩陣排列,將黑與白組合成近似視覺上的灰色調階。

  灰階(Grayscale)的影像共有256個階調,看起來類似傳統的黑白照片;除黑、白二色之外,尚有254種深淺的灰色,電腦必須以8位元的資料,顯示這256種階調。

  全彩(Fullcolor)是指RGB三色光所能顯示的所有顏色,每一色光以8位元表示,各有256種階調,三色光交互增減,就能顯示24BIT的1677萬色(256*256*256=16,777,216),這個數值就是電腦所能表示的最高色彩,也就是通稱的RGBTureColor。

  8位元色是指具有256種階調,或256種色彩的影像,而我們在常常見到GIF格式的圖象文件就是帶有256種色彩的圖象文件。若要把24位元的全彩圖片轉成256色的8位元,通常必須經過索引的步驟(Indexed),也就是在原本24位元的1677萬色中,先建立顏色分布表(histogram),然後再找出最常用的256種顏色,定義出新的調色盤,最後再以新色盤的256色取代原圖。

  讓我們看看每一位元色包含多少種顏色:

  1位 2種顏色

  2位 4種顏色

  4位 16種顏色

  8位 256種顏色

  16位 65536種顏色

  24位 1677萬種顏色

  32位 1677萬種顏色和256級灰度值

  36位 687億種顏色和4096級灰度值

  通常所稱的標准VGA顯示模式是8位顯示模式,即在該模式下能顯示256種顏色;而高彩色(Hi Color)顯示是16位顯示模式,能顯示65536種顏色,也稱64K色;還有一種真彩色(True Color)顯示模式是24位顯示模式,能顯示1677萬種顏色,也稱16M色,這是現在一般PC機所能達到的最高顏色顯示模式,在該模式下看到的真彩色圖象的色彩已和高清晰度照片沒什麼差別了。

  在圖形制作片中我們已提到過色彩在頁面中的重要性,在頁面中盡量使用看上去比較淡雅、簡潔的色彩;比如背景盡量少用灰暗、深沉的色彩(除非特殊需要),並且根頁面的主題來選擇主色調,可能有一些不搞美術的朋友不知道色彩代表的含義,請參閱下表:

  紅色:代表熱情、奔放、喜悅、慶典

  黑色:代表嚴肅、夜晚、沉著;

  黃色:代表高貴、富有 白色:代表純潔、簡單

  藍色:代表天空、清爽

  綠色:代表植物、生命、生機 灰色:代表陰暗、消極 紫

  色:代表浪漫、愛情

  棕色:代表土地

  上面舉出的是幾種主要色彩的含義,希望對你有所幫助。

  現在我們對色彩有了基本的了解,那麼我們如何在一個網頁中合理搭配色彩呢?如果你對美術比較了解,那就好辦了。反之你可能要耗費較大的工夫在上面。

  首先在確定主頁的題材後,要了解哪些顏色適合哪些站點。比如一個影視的站點,基本上適用任何色彩,但小B認為用黑色或其他教深的色彩為主比較好,因為人們看電視、電影一般在黑暗的環境下觀看的,網頁上使用深色較符合人們的習慣;反之一個介紹醫院、醫學的站點就要使用淺色為主色,忖托其醫學站點的氛圍。

  記住白色的頁面是萬能的風格

  這裡特別要注重的一點:頁面文字的顏色切記與鏈接的顏色區分開來。

  在設計時,如果你有多余的時間,可以多換幾種顏色試試。

copyright © 萬盛學電腦網 all rights reserved