振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
網站設計中顏色的選取
2010/01/25
網站設計中顏色的選取

網站設計中顏色的選取
前言
:本文為翻譯,主要處於學習的目的,不為原文及翻譯過程中的錯誤負責,但是如果你發現錯誤,歡迎指正。所有內容的權利歸原作者。原文連結

在我們的人生中,我們知道,有人天生就是一些方面的天才而其他一些人即使非常努力也只能過勉強通過。例如,有些人幾天就可以學會一種樂器,而其他一些人可能一輩子都不一定學會。有些人只會說英語,而有些人可以流利的說幾個國家的語言。有些人跳Electric Slide總是會傷及旁人,而有些人卻可以跳的像集體舞。問題是,儘管很多東西無法掌握,有很多東西還是可以學會的。我們一直把對顏色的感知歸功於天生的好眼色,是無法通過後天的學習掌握的。實際上,只要有合適的工具,可能還要一些刺激,即使是色盲的人也可以找到讓人賞心悅目的挑選顏色的方法。所以,所有色盲的讀者,包括那些認為沒有簡單的模式可以套用而心灰意冷退出Art 101的人,我們將為你展示如何像高手一樣挑選顏色。

這是藍色

首先讓我們來學習基本的顏色術語以保證我們不會在學習的過程中落下任何人(我們不希望待會還要回來接落下的人)。我們都知道原色(primary color)有三種,分別為紅、黃、藍。把兩種原色混合可以得到合成色(secondary colors)。黃色和紅色混合得到橙色,紅色與藍色得到紫色,藍色和黃色得到綠色。那麼三級色(tertiary colors)呢?只要把原色和其相關合成色混合就可以了。這意味著有六種三級色(每種原色可對應兩種三級色)。圖A所示為幾種顏色的關係。

圖A: 為了理解如何選擇最佳的顏色方案,理解三種顏色是首要的任務

為了完全理解這些顏色的關係,最好將這些色調組織成一個圓圈。這種組織方法,如圖B所示,在設計圈內所說的色輪(color wheel)。看起來很漂亮,不是麼?但是它的真正的美妙之處在於它如何幫你在網頁設計中挑選顏色。

圖B: 將原色,合成色和三級色組合可以得到色輪

選擇顏色最簡單的方法只要想像色輪上有一個內接的等邊三角形。三角形頂點的顏色就是可以用的顏色。(對於數學和藝術上一樣失敗的人們:三角形的頂點就是三角形任意兩條邊的交點。)這種顏色選取方法叫做三角形法(triad schemes)。從圖c中的例子,你可以看到我們有四個單獨的三角形。通過這種方法,可以將這些顏色形成一個協調的顏色組合。

圖C: 色輪上有四種三角形可能

除此之外,你還可以選擇補充顏色。也就是色輪上面正對面的顏色,比如紅和綠。他們稱作互補色因為如果一起使用,都可以使相對應的顏色更亮和更生動,如圖D所示。

圖D: 色輪上相對的顏色叫做互補顏色

方案的變化
現在,我們準備把顏色混合起來,就是將三角形頂點顏色和互補色以及其他顏色混合起來。例如,你可以將兩組互補色組合起來,叫做雙互補。比如黃色和紫色,藍色和橙色。另外一種絢麗的顏色組合是交替互補,把三個一組的顏色和其中之一的互補顏色組合。比如綠色, 紫紅色,紅色與橙色的組合。
你也可以將某種顏色分解成為三種顏色,一種色調及其補充顏色的臨近色調。

最後,在組合的目錄中,你也可以得到四分色(tetrad),你可以將四種色輪上相對應得顏色組合在一起。比如你可以使用一種原色,一種合成色,兩種三級色。圖 E所示為各種方法的例子。

圖E: 對比的顏色可以讓網站生動起來

顏色大家庭

既然我們已經包含了所有的可能變化的顏色,我們需要注意兩種使用相關顏色的方法——單一顏色集和類似顏色組合。單一顏色集合,正如其所說的,就是使用單一的色調,但是顏色的深淺不一樣,也可以採用陰影。如果正確使用,這種方法可以給一個網站清新的外觀。相反的,類似顏色組合,使用了色輪上的四種顏色。任意四種——你只要轉動輪子。你可以從圖F所示的例子看到,類似顏色法和單一顏色法很相似。

圖F: 類似的顏色看起來像一樣的

顏色組合

既然我們已經完全告訴你顏色的選取方法,我們需要給你一些最後的忠告。首先,我們給出的顏色並不是最好的,你可能還需要對顏色的飽和度和深度進行調整。我們給出的顏色選取方法只是起點而不是終點。最終的選擇因素應該是網頁的可讀性和網頁整體的外觀和感覺。為了直觀的表示出哪種顏色方案更好,設計專家建議你設計出這些顏色方案進行比較,觀察哪種方法更適合你的網站。例如,你可以見圖G,一些顏色組合起來很好而另外的就需要進行一定的修改。

圖G: 你可以想像所有可用的顏色組合

結論

由於顏色的選擇是設計世界中最主觀的事,但是理解為什麼要選擇其中一組顏色而不是其他顏色的原理仍然很重要。這一原理不一定能讓你立刻選對顏色,但肯定會讓你朝著正確的方向走。現在,你所要做的就是趕緊學習如何跳Electric Slide.

 

最後更新 ( 2010/01/25 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇