2011 年 5 月 15 日

[經驗]關於color這回事-淺談網頁設計的用色規則

本篇目錄

如果要說一個影響網頁設計最重要的要素,那莫過於顏色了,顏色的運用真的非常重要,不同的顏色會帶給網友不同的感受,而客戶想像網站也會用一些形容詞句來表達希望之後網站完成會有什麼感覺,通常這些感覺都多少帶有顏色的意涵,因為顏色對於人來說會產生聯想作用,而所謂的聯想作用就像是說到紅色會想到火或者蘋果,說到黃色就會想到香蕉或有色彩的笑話,像這樣的反應就是所謂的色彩聯想作用, 這次我們就以紅、澄、黃、綠、藍、紫、白、灰、黑九種顏色,來整理一下顏色在網頁設計上的一些常見規則。

剛剛提到了色彩的聯想作用,也提到了客戶想像網站會用一些形容詞句來表達,這兩者之間有什麼關聯性呢?這兩者之間的關聯性就在於色彩會令人聯想到具體與抽象的事物,也就是說顏色會讓你想到實際的東西,但是也會讓你想到顏色的個性,什麼又是顏色的個性?其實用一張圖表來表現就可以省去了我一百句話的解釋,讓我來看看下表:

具體 抽象
紅色 蘋果、草莓、火、快捷郵筒、紅綠燈、血、法拉利 興奮的、熱情的、危險的
澄色 橘子、柳丁、柿子、胡蘿蔔、紅綠燈 溫暖的、新鮮的、快樂的、友善的
黃色 香蕉、菊花、向日葵、梨子、大黃蜂 活潑的、快樂的、注意的、光亮的
綠色 西瓜、葉子、紅綠燈、樹、哈密瓜、紅綠燈、蔬菜 安全的、安靜的、健康的、舒服的
藍色 天空、海洋、冰、水 冷靜的、慎重的、智慧的、冷酷的、專業的
紫色 葡萄、茄子、薰衣草、紫羅蘭 優雅的、神祕的、高貴的
白色 雲、雪、香草冰淇淋、紙、醫生護士、斑馬線 清純的、乾淨的、無污染的、神聖的、單純的
灰色 烏雲、灰塵、馬路、水泥 冷漠的、孤獨的、失落的、挫敗的
黑色 頭髮、墨水、煤炭 嚴肅的、祕密的、陰暗的、恐怖的、詭異的
註:歡迎各位朋友留言補充上訴表格的內容,Nowill會一併整理放入上方表格裡,方便各位參考

相信透過上方的圖表,大家都可以了解色彩聯想作用在溝通上、或形容上的差別,所以說在言語中也會不知不覺的透露出希望採用的顏色,那既然我們現在都了解色彩的聯想作用,接下來就要說說這九種顏色在網頁的運用上,一般比較常見的配色規則。

充滿力量的紅色

紅色是一個富有力量的顏色,擁有像火焰一樣的熱情,這樣的顏色是非常吸睛的,是所有色彩中最引人注目的一種顏色,通常用於企業識別或專業形像、需要注意的文字區塊上,也因為紅色實在太過搶眼所以時常搭配像是黃色、綠色、灰色、白色、黑色等,比較健康、單純的、神祕的色彩,來去襯托出紅色本身亮眼的優點。配色的祕訣在於大量使用紅色時不要在使用太多顏色去搭配,否則會顯得雜亂,版面也會看起來比較不舒服喔!但是如果用在企業識別上就會顯得有自信、威嚴,讓人覺得專業,是一個如果掌控得宜會獲得很高評價的顏色!

平易近人的澄色

橘色是紅色與黃色的混合色,所以會集了紅色與黃色兩種顏色的優缺點,這使得橘色不像紅色這麼有力量也不像黃色這麼有活力,反而讓橘色顯得平易近人,親切的感受不言而欲,但是橘色的色彩在掌控上難度是偏高的,因為平易近人的原因,在大量使用時,如果想呈現出高貴的感受,橘色反而會帶來反效果,因為橘色的平易近人會讓人想到平價的消費,在這樣的情況下就顯得尷尬,所以通常設計師在選擇色彩搭配時,橘色總不會是第一個優先選項。配色的祕訣在於適當的使用橘色,善用橘色的親切力會讓你的網站加分不少,但是如果亂用橘色反而會招來廉價的感受喔!

活潑亮麗的黃色

黃色是除了白色以外亮度最高的顏色,時常與黑色做搭配,可以讓人注意到這樣的色彩並且多看幾眼,低彩度的黃色在頁面設計上時常大量使用,併搭配黑色或綠色輔佐,通常都是在主要的視覺區塊做變化,運用黃色的活潑亮麗讓網站年輕化,但是高亮度的黃色搭配亮度更高的白色反而會非常刺眼,這是一定要注意的地方。配色的祕訣在於聰明的選擇輔佐色與黃色與頁面的比例可以妥善控制活潑度,並且讓亮度表現的更加突出。

健康舒服的綠色

綠色是一個充滿生命力的顏色,可以很容易就想到嫩芽、大樹或是新鮮蔬果,也會帶給人們一種平和、輕鬆的感受,在科學研究上也有消除眼睛疲勞的作用,所以很適合用在新鮮、自然、休閒或是環保相關議題為主題的網站上,比較好玩得是因為綠色這位老兄他夾在黃色與藍色中間,所以你可以發現綠色他保有一部份黃色的優點,所以讓綠色帶有明亮正面的形象,但也因為保有藍色一部份的優點,所以明亮度比不上黃色,也讓綠色多帶了一點理性的成份在。配色的祕訣在於如果大量使用深色綠會導致網站過於厚重,必須小心拿捏才不至於帶來反效果。

冷酷專業的藍色

藍色是一個很受歡迎的的顏色,受歡迎的程度已經快可以跟灰階這種無觀色彩喜好的顏色相比,說起來好像有點誇張,但是藍色的接受度的確就是比其他顏色高上許多,而藍色也會給人專業、科技的形象,所以數位科技產業也非常愛用藍色作為企業用色,唯一比較要注意的是,藍色是冷色調顏色,如果沒有掌握好使用的範圍比例可能會讓人有冷酷的印象。配色的祕訣在於自然的使用會讓網站更加的親切,但若是顏色過重或使用過度,反而會讓人覺得有些隔閡。

神祕優雅的紫色

紫色是個陰暗又帶沈穩的顏色,在所有顏色中是最難掌控配色的一個顏色,這個顏色其實天生就帶有女性色彩,又因為沈穩所以容易有神秘感,很容易可以營造出成熟女性的感受,但掌控度其實很不好控制,所以大部份選則主要色系時,紫色通常都不會是首選,甚至很容易被忽略的一種顏色。配色的祕訣在於不要使用太高彩度的紫色時,輔助色可以選則彩度較高顏色叫鮮明的顏色來作搭配,但是整體顏色比例需要妥善控制,否則很容易擦槍走火,讓整體觀感變得詭譎。

神聖單純的白色

白色是很長拿來當輔助色的一種顏色,跟任何顏色做搭配都能可容易的襯托出每種顏色的優點,但是當白色拿來作主色時,因為這樣的色彩特性是非常乾淨整潔的,所以通常都會搭配精簡設計風格去做一個發揮,通常都會使用大量的產品照,在這樣組成的頁面上,產品就會快速的讓網友記住,但是若是整體網站都沒有什麼版型上變化,很容易就流於攏統而讓網友忘記。配色的祕訣在於設計風格趨向精簡,搭配產品照片可以讓產品更加容易讓網友記住,但要注意版型排列的變化,不一樣的排版會更加加深網友對網站與產品的印象。

冷漠孤獨的灰色

灰色是一個較中性的顏色,比較不會帶有太多的個性,但是容易給人金屬般的冷漠強硬感受,可是同時也帶給人樸實的感受,運用灰色作為主色時,配色就會是很重要的部份,因此配色的使用上就要特別小心。配色的祕訣在於利用配色襯托出灰色的質感,適度的編排與使用配色可以讓網站顯露出不一樣的質感。

嚴肅詭異的黑色

黑色是一個可以展現魄力與格調的顏色,是所有顏色中最容易掌控的一種,黑色的網站很容易讓其他輔助色或是照片產生聚焦的效果,可以讓內容更容易在第一眼映入眼簾,但是如果配色是冷色調顏色,反而很容易讓網站太過冷漠而產生距離。配色的祕訣在於善用黑色的聚焦力,很容易會有意想不到的效果。

雖然顏色不光只是紅、澄、黃、綠、藍、紫、白、灰、黑這九種顏色,但是其他衍生的顏色其實都可以從這九種下去做搭配混合,其實在特性上也會參雜著這九種顏色的特性下去做變化,如果可以妥善掌握客戶的關鍵用語,找到適合搭配的顏色,對網站設計上來說就會賦予不一樣的意義,比只是單純覺得這樣配色比較好看的情況還要讓網站更加的完整,而且也可以讓網站加分不少,以上就是本次的錢談網頁設計的用色規則,如果有不同意見或看法歡迎一起提出討論喔。

文章分類:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2008 年 8 月 11 日
[設計]Nokia 888 Design 超現實手機!

諾基亞888可不是NOKIA即將上市的最新產品,它是榮獲“諾基亞設計大獎”的參賽作品。在眾多超現實主義的手機當 […]

Read More
2008 年 4 月 2 日
[♀♀]北歐高校

那黃色的運動制服黑色的褲子,還有那書包上容易讓人叫不出來的校名,這是一間女女學校,在圈內多少有點風聲,曾經聽說 […]

Read More
2008 年 7 月 27 日
[思考]創意思考-李奧納多達文西的創意思考法(下)

心智圖(mind map),不免俗的還是要說一下歷史,心智圖是由英國的托尼·博贊(Tony Buzan)於19 […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram