【網頁設計】選擇你自己的配色方案

目前爲止，你應該已經(jīng)很熟悉顔色是什麼(me)、每種(zhǒng)顔色代表什麼(me)，對(duì)于不同配色方案也有很好(hǎo)的理解。但是不管怎樣(yàng)，你知道(dào)這(zhè)些也沒(méi)什麼(me)作用，假如你不知從何下手或如何運用色彩對(duì)你項目的影響

顔色是種(zhǒng)看起(qǐ)來相當簡單，卻非常難處理好(hǎo)的東西。而且，由于它是任何設計中極度視覺化、焦點化的部分（它确實是），當它沒(méi)處理好(hǎo)時會如此引人注意。如果你的設計中這(zhè)麼(me)重要的部分給人感覺不好(hǎo)，或者沒(méi)有很好(hǎo)的表現你的公司、服務或品牌，那麼(me)它就能(néng)讓停留訪問的用戶消失不見

正因爲如此，選擇配色方案時，你需要非常清楚顔色在你設計中可以造成(chéng)的影響——好(hǎo)的與壞的摒棄這(zhè)些默認樣(yàng)式（例如互補色），使用你自己的配色方案，絕對(duì)是件好(hǎo)事(shì)，但是當你著(zhe)手開(kāi)始創建自己的配色方案時，可能(néng)你好(hǎo)還(hái)是沿襲主流的配色方案。這(zhè)樣(yàng)一來，走錯路創造出糟糕的配色方案就不容易了，雖然也難以杜絕

選擇适當的配色方案
首先，我們來看看如何爲你的項目選擇一個适當的配色方案

這(zhè)裡(lǐ)你需要全局考慮，什麼(me)配色方案适合你的品牌、公司或者行業。

這(zhè)個非常有趣，不僅讓我們一睹世界頂尖品牌與企業的用色傾向(xiàng)，還(hái)讓我們洞悉具體行業中，哪些顔色效果更好(hǎo)，或使用更廣泛

從信息圖表中可以看出，所有能(néng)爲你所用的主色都(dōu)适用于各種(zhǒng)不同行業，這(zhè)些可能(néng)适用的顔色都(dōu)能(néng)解讀出常用的含義，之前有文章讨論過(guò)我所喜愛的方式，是爲項目創建思維導圖來探索我能(néng)想到的各種(zhǒng)不同色調和創意，并且上網尋找這(zhè)類符合品牌戰略的信息。然後(hòu)，把這(zhè)些思維導圖的創意轉換爲顔色的含義來确定哪個符合，這(zhè)可以幫助你找到哪種(zhǒng)配色适合這(zhè)個項目或品牌

我該用多少種(zhǒng)顔色
有時候，這(zhè)個問題真的隻是個人喜好(hǎo)問題。不管怎樣(yàng)，這(zhè)個問題在Column Five Media的信息圖表中不值一提，因爲百強品牌中，隻有5%選擇在配色方案中使用兩(liǎng)種(zhǒng)以上的顔色

注：近年來，印刷品的預算比在線曝光更重要，品牌印刷品中使用的顔色數量确實值得慎重考慮

即便如此，用多少種(zhǒng)顔色随你感覺就好(hǎo)，在一些情況下，你可以用顔色來在網頁的不同區塊中制造差異化。在這(zhè)種(zhǒng)情況下，你可能(néng)會有4、5種(zhǒng)不同顔色加入到配色方案中，使網頁每部分協調

盡管終選擇權在你，我還(hái)是會建議你在主要配色方案中使用至少兩(liǎng)到三種(zhǒng)顔色，這(zhè)其中不包含文字或背景的明暗中性色。比起(qǐ)用單色配上漸變和陰影，使用兩(liǎng)到三種(zhǒng)顔色的配色方案，能(néng)夠給你機會嘗試在各個區塊間創造更豐富的對(duì)比

從照片中選擇配色方案
你是否觀察過(guò)一張照片，并思考它的顔色表現多麼(me)奇妙和驚人？有時候，這(zhè)些漂亮顔色可以被(bèi)轉換成(chéng)可用的配色方案，并爲你所用。從照片中提取一套非常棒的配色方案，隻需要稍加訓練和充足的耐心，如果你和我一樣(yàng)是個完美主義者，那麼(me)你會花相當一段時間微調顔色，直到它們剛剛好(hǎo)爲止

選擇你的照片
選擇一張好(hǎo)照片上手的關鍵，是多樣(yàng)化而且好(hǎo)能(néng)讓你震撼。無論你的圖片比較複古或單色系（即整張圖片都(dōu)貫穿著(zhe)相近的色調和色彩），或者更加鮮活色彩豐富，你總能(néng)在其中某處找到有用的配色方案

一旦你有了一張或幾張照片，假如你立馬就想試著(zhe)創造幾種(zhǒng)配色方案，那麼(me)用你喜歡的圖像處理軟件打開(kāi)它，然後(hòu)開(kāi)始瘋狂吧。我在Photoshop中有個自己愛用的模闆（包含幾個小矩形）作爲切入點，來放置我所選擇顔色

從照片中選取配色方案時，我試著(zhe)隻堅持一種(zhǒng)（比如單色或互補色），然後(hòu)在照片中嘗試選取相配的顔色。所以舉個例子，我會觀察照片并試著(zhe)發(fā)現什麼(me)顔色對(duì)我而言突出，這(zhè)不是指它們要明亮鮮豔，它們可能(néng)很柔和或隻占照片的一小部分，但我會試著(zhe)選出成(chéng)就這(zhè)張照片的那些少數色彩

在這(zhè)張照片中，由于這(zhè)些相近的紫色調，我們能(néng)夠很容易選出一套單色系配色方案

這(zhè)張照片非常飽滿，因此我們可以花些時間創造一個更加個性化的配色方案，它受制于一些規則，搭配起(qǐ)來卻也同樣(yàng)合适


一旦我開(kāi)始深入觀察照片，我就對(duì)我想要的風格有更深的了解，我會繼續胡亂嘗試（就用吸管工具）來看看什麼(me)顔色搭配好(hǎo)。比如隻選擇一種(zhǒng)顔色作爲主體，再選兩(liǎng)種(zhǒng)其他顔色來作爲陪襯

然後(hòu)，開(kāi)始將(jiāng)這(zhè)些顔色放入模版，將(jiāng)它們來回移動，直到你對(duì)顔色的位置與層級滿意爲止。我通常也會試著(zhe)在我所選的主色旁邊各放置一個暗色（接近或幾乎純黑）和亮色（接近白色）。這(zhè)可以幫助頁面(miàn)達到色彩與結構上的平衡，也可以在配色方案中沒(méi)有适合的文字顔色時提供一種(zhǒng)可能(néng)

老實說，這(zhè)裡(lǐ)的主要目的就是随手試試，有時候你得到的顔色并不合适，也有時候你在照片中根本找不到一個得體的配色方案，但是要确保你嘗試過(guò)各種(zhǒng)顔色，直到你爲自己的設計找到了一套感覺更加統一協調的配色方案

iPhone App Adobe Kuler

如果從照片中創建自己的配色方案令你糾結不已，Adobe近也發(fā)布一款iPhone app Adobe Kuler，帶來了一種(zhǒng)非常便捷的從照片中創建配色方案的方法。你可以切換到相機模式從現有照片中選擇一張，或者直接在所在地拍點什麼(me)

Adobe Kuler app的妙處，是它提供了一種(zhǒng)極爲創新的顔色選擇方式。如果你用Kuler app的“現場”視圖直接拍照，你就會看見照片上四處移動的小圓圈。眼前所發(fā)生的，是這(zhè)個app在不斷尋找和選出照片中它認爲有價值的配色，就在它停下的位置，然後(hòu)幫你將(jiāng)它們組合成(chéng)一個小配色闆

如果你對(duì)于從照片中選取自己的配色方案沒(méi)有信心，那麼(me)使用Kuler app是個好(hǎo)辦法，可以幫助你理解什麼(me)造就了照片中的優秀配色。随意拍下大量照片（單調、樸素色調和豐富、明亮鮮豔色調都(dōu)有），然後(hòu)用Kuler app認真分析爲什麼(me)這(zhè)些配色方案起(qǐ)作用，爲什麼(me)這(zhè)個app選擇了它們

然後(hòu)，你可以适時開(kāi)始著(zhe)手從照片中創建自己的配色方案了，并對(duì)于自己的選擇更加自信