---這是網頁設計的說明文字
網頁設計知識
┊ <
 
關於~~網頁設計的說明文字
  網頁設計 網頁配色思考           
網頁配色思考
  2008-12-20 20:15:36
  

曾經費盡心思想替網頁設計一套令人眼睛為之一亮的色彩組合嗎?或者你一直不解為何銀行、公司行號或金融機構的網頁總是使用藍色系?那麼你來對地方了。雖然大部分的網頁開發人員都很清楚網路所使用的色盤和計算色彩的 16 進位元系統,但對色彩學和有效色彩組合背後所隱含的原理依然懵懵懂懂。

  幾世紀以來,顏色本身就是一個難解的謎題。舉例子來說,蘇格拉底就曾經假設說「火」之源起,乃是因眼睛結合了物件本身的「白」(whiteness)所產生的顏色。之後,牛頓更探索光與色彩之間的關係;其後歷經許多科學研究,終於在20世紀確認了光波與色彩感應之間的絕對關係。

  如今,色彩調和與色彩調性方面的研究資訊,直接影響了藝術家、設計師和廣告AE人員。本篇關於色彩理論的指南,旨在探索如何於網頁上有效使用色彩,同時也提供了許多色彩調和技巧,讓您善用色彩來駕馭網頁設計。

  色彩學

  我們能看到顏色是靠三個元素相互作用而成:光源、物體的反射特性、以及人體視網膜和腦部視覺皮質區對光波的處理方式。不管我們使用哪種媒材來作業 -- 繪畫、印刷或網路 -- 我們都得依賴上述過程才能有效使用顏色。

  色彩的排列 -- 彩虹

  十七世紀末期,牛頓證明瞭色彩並非存在於物體本身,而是光作用的結果,且只要將可視光譜上的長短光波結合起來即可形成白光。這些可視光的波長可對應到七個不同的顏色:紅、橙、黃、綠、藍、靛、紫。

  牛頓在實驗中所分離出來的可視光譜其實才占了所有電磁光譜的一小部分,整個光譜範圍從分為「短頻、長波區」(例如收音機調頻)到「高頻、短波區」(例如 X 光)。可視光譜的區域是介於紅外線與紫外線之間,波長約為 400nm (紫色) 到 700nm (紅色) 之間。雖然牛頓證明這些光波結合在一起即形成白光,但其實只需要紅、綠、藍三光波就可以產生白光。

  光的吸收與反射

  當光波投射在物體身上後,該物質會傳送、吸收或反射不同部分的光波。根據不同物體的特性以及它本身的原子構造,它可能反射了綠光但吸收了其他的波長。這時候人們的視網膜和腦部視覺皮質區會處理此一反射光,然後形成我們所看到的顏色。

  藝術家和設計師將顏色複製到畫布或紙張上的時候,他們便是仿真此一過程,利用顏料吸收了某個部分的光波、反射出其他光波。例如要產生綠色,我們可使用會吸收紅、藍光波的顏料即可。此一過程是所有繪畫與印刷媒體的色彩模式基礎。

  一切靠眼睛

  當然,不論是反射自物體或是發射自光源本身,我們處理光波的能力都是靠視網膜和腦部的視覺皮質區。視網膜內有三個接收器(或者說是錐細胞)可回應某些光波的頻率。紅色錐細胞能感應低頻率的波長,綠色錐細胞反應的是中頻率的波長,藍色錐細胞反應的是高頻率的波長。這些錐細胞的運作並非二元性的,而是類似頻道一樣,可將刺激分別傳達至腦部的視覺皮質區,經過處理後才產生出我們所看到的顏色。

為了產出特定顏色,藝術家/設計師們必須靠著增減光波的方式,讓人體內的視覺接收器只反應到某些光波。至於應該用加法或減法原理,則要看你使用何種材質來表現你的作品了。
設計師處理顏色的方法通常有兩種:一、加色法,混合不同顏色的光波以形成白光;二、減色法,使用顏料來減少光波。傳統的藝術家所使用的色盤和 CMYK 系統都是減色法模式。在網頁上,我們所面對的是光的投射,而不是從物體上反射回來的光,所以使用的是加色法模式,我們稱它為RGB。

  加色法

  在大自然中,我們所看到的光波是經過物體反射進入我們的視網膜,但產生色彩的方式不僅只這一種。例如,舞臺燈光是利用白光穿過有色濾鏡來產生不同的色光。電腦螢幕也是使用投射光波的方式,但不同的是它藉由讓電子光槍發光投射到含磷的螢幕來產生色光。這些電子光槍可以發出三種顏色:紅、綠、藍。藉由這三種色光,電腦螢幕可製作出完整的光譜。這就是大家所熟知的 RGB 色系。

  在 RGB 系統中,設計師也可以透過混合三原色的方式做出一個光譜。混合任兩個原色,就會產生三個次原色:青、洋紅、黃。如前面所說的,將光的三原色加在一起就可以做出白光。所以,如果一個 RGB 的值為 255,255,255 則表示為白色。如果完全拿掉這三原色的光 (RGB: 0,0,0) 則產生黑色。

  減色法

  RGB 模式的相反模式就是 CMYK 模式,也就是使用減少光波的方式來產生顏色。由於物體顏色來自于反射的光波,此一系統乃使用三原色來吸收物體的紅、綠或藍光。例如,如果你減少了紅光,那麼多餘的綠色波和藍色波就會產生青色。用來除去紅光、反射綠、藍光的顏料就會顯示青色。相同的,平面印刷設計師會使用洋紅來吸收掉一部份的綠光,以及使用黃光來吸收掉一部份的藍光。

  這樣一來,我們很明顯的可以知道 CYMK 模式中所使用的三原色就是 RGB 模式中的次顏色,反之亦同。再者,如果將紅、綠、藍光混合在一起形成白光,那麼就表示將青、洋紅、黃三色的顏料混合在一起就會產生黑色,因為三原色的光波都將被顏料所吸收了。然而受限於顏料和印刷系統的因素,混合青、洋紅、黃並無法完全吸收掉所有的光波。因此實際上還必須加上一個黑色才能完成,所以就產生了 CMYK 裏面的 K 元素了。

  色彩管理

  由於有這兩套不同的複製顏色方式,設計師若必須同時創作數位元與印刷影像可就傷腦筋了。除了對應加色法和減色法之間的困難外,RGB 和 CMYK可使用的色彩範圍差異也相當大。因此對跨媒體設計師而言,擁有一套可根據輸出設備做色系轉換的色彩管理系統可減輕不少頭痛問題。色彩管理系統可包含在作業系統,某些應用軟體之中。

網頁配色思考

視覺設計最大的挑戰之一便是找出有效的調和色彩,讓色系既不過於單調,也不過於誇大。想瞭解色彩平衡之間的關係,可從瞭解色環開始著手。色環呈現出某一色彩模式中所有可能的色相

  每個色彩模式都包含了一組三原色,然後經由這一組三原色的相互混合而產生不同的顏色。在傳統色彩學中,三原色指的是藍、紅、黃;而在 RGB 色彩模式中,色光的三原色是指紅、綠、藍。任何兩個色光的組合會產生一組次顏色。三次色則是混合了原色與次色,或者是混合兩種次原色所產生。我們用色環來呈現顏色的邏輯性。你可以從下面的圖中看出, RGB 的色環和傳統藝術家們所使用的色環是很不一樣的。

  同色調和:單一顏色,只是深淺、色調和明暗度不同。

  近似色調和:使用鄰近的顏色或在色環上很接近的顏色做調和。

  互補色調和:使用色環上兩個相對的顏色做調和。這樣的顏色組合通常可以提供最大程度的對比感覺,但若過份使用使會流於誇大。

  對比色調和:使用一種顏色,再加上其互補色旁邊的兩個顏色做調和。對比色調和能提供比互補色調和較柔和的對比。

  三角調和:使用色環上三個等距離顏色。

  雙互補調和:使用兩組 (共四色) 互補顏色。

  在探索色彩調和的時候,通常最好從純色下手,然後再嘗試不同程度的渲染、色調和明暗度。接著你可使用網頁仿真圖先行測試某顏色組合的視覺特效。記得,對比的重要性不只是在於為了吸引人而設計;它也可能幫助或妨礙網頁的閱讀性。

網頁配色思考


  色彩所傳達的意義

  當我們在檢視色彩的科學本質和色彩調和的美學考量時,我們發現感官在色彩運用上扮演了很重要的角色。除了感官反應與辨識調和色彩外,人類內在對色彩的反應還有更深層的一面。色彩能引發強烈的生理/心理共鳴,不管是正面或負面。當你在選定顏色組合時,請確定你所選擇的顏色能引起適當的迴響。

  色彩的生理反應

  雖然並沒有直接證據顯示色彩能引發特定反應,但是研究顯示,某些顏色確實能夠引起一些生理上的反應。例如,紅色就是一種非常刺激的顏色,往往會令人心跳加快、呼吸急促。所以,紅色非常適合用在需要引起注意和強調的時候,但若用在背景顏色的時候可能顯得過於強烈。相同地,黃色也能引起注意,但因為其反射性太強,容易造成眼睛的疲勞和不舒服。另外一方面,藍色對神經系統具有放鬆的效果,且根據一些研究顯示,以藍色當背景還能增加生產力。但是,如果你的產品與食物有關,千萬不要用藍色作為背景顏色,因為藍色可是會抑制人們的胃口喔。

色彩的象徵

  色彩所象徵的意義有時候跟大自然中的事物有關。例如,天空與太陽的顏色所產生的聯想舉世接然。然而,大部分的色彩意義都跟民族文化有關,例如,政治、宗教、神話或社會結構等 -- 這些因素可能會隨著時間與地域的不同而產生差異。若你設計的網頁是針對國外地區,那你可千萬得小心,同一顏色在不同文化可能會有南轅北轍的效果。另外,大部分的顏色都同時具有正面和負面的聯想。你可以運用色彩的品質和飽和度的不同,或者是用混合兩個顏色的方式來強調某個特別的涵義。

  一般在西方的文化中,色彩所傳達的涵義為:

  紅色:熱情、浪漫、火焰、暴力、侵略。紅色在很多文化中代表的是停止的訊號,用於警告或禁止一些動作。

  紫色:創造、謎、忠誠、神秘、稀有。紫色在某些文化中與死亡有關。

  藍色:忠誠、安全、保守、寧靜、冷漠、悲傷。

  綠色:自然、穩定、成長、忌妒。在北美文化中,綠色代表的是「行」,與環保意識有關,也經常被連結到有關財政方面的事物。

  黃色:明亮、光輝、疾病、懦弱。

  黑色:能力、精緻、現代感、死亡、病態、邪惡。

  白色:純潔、天真、潔淨、真理、和平、冷淡、貧乏。白色在中華文化中也代表著死亡的顏色。

  替網頁選對顏色可不是一件容易的事;很多公司還特別聘請專業諮詢人員,使其色彩組合能搭配、強化整體的品牌形象。但是,如果你自己就已經具有色彩調和感,並且瞭解某些顏色可能會引起什麼樣的反應,你只需照著你的方法進行,開發出有效的色彩組合。在你開始找尋對應的顏色之前,你必須先很清楚你網頁所要傳達的訊息和目標。一但你瞭解要傳達的訊息後,就可開始進行調色工作了。在過程中,你免不了要不斷地試驗混合顏色,這是一個極具創意的過程。別害怕使用大膽的顏色組合,但在將你的產品公諸於世之前,記得要經過充分的測試喔!

  色彩的使用技巧與指針

  1. 瞭解你的網頁所要傳達的訊息和品牌。選擇可以加強這些訊息的顏色。例如,如果在設計一個強調穩健的金融機構,那麼就要選擇冷色系、柔和的顏色,像是藍、灰或綠。在這樣的狀況下,如果使用暖色系或活潑的顏色,可能會破壞了該網頁品牌。

  2. 瞭解你的讀者群。文化差異可能會使色彩產生非預期的反應。同時,不同地區與不同年齡層對顏色的反應亦會有所不同。年輕族群一般比較喜歡飽和色,但這樣的顏色卻引不起高年齡層的興趣。

  3. 不要使用過多的顏色。除了黑色和白色以外,約選擇四到五個顏色就夠了。太多的顏色會導致混淆,也會拉走讀者的注意力。 4. 在閱讀的部分使用對比色。顏色太接近無法產生足夠的對比效果,也會妨礙觀眾閱讀。白底黑字的閱讀效果最好。

  4. 用灰階來測試對比。當你在處理黑色、白色和灰色以外的顏色的時候,有時候會很難決定每個顏色的相對值。為了要確認你的色盤能提供足夠的對比,你可以建立一個仿真網頁,並將它轉換成灰階即可。

  5. 選擇顏色要注意時效性。同一個色彩很容易就充斥著整個市場,且消費者很快的就對流行色彩感到麻木。但就另外一個角度來看,你可以使用幾十年前的流行色彩,引起人們的懷舊之情。

  6. 選擇色盤時請考慮功能性的顏色。別忘了將關鍵資訊部分建立功能性的顏色,例如標題和超連結等。 8. 注意網頁色差問題。每一個網頁開發人員都知道,即使是網路通用顏色在跨平臺顯示的時候都會有些不同。記得要校正你的 gamma 值,並在不同的作業平臺上測試你的色盤。

 
  • 網頁設計文章:

  • 下一篇文章:
  •  

  •  

    網頁設計的分類技巧
    網頁設計