國外設(shè)計師朋友分享的配色方法和一些技巧，實用性非常強，今天我們不打算介紹一些復雜的色彩理論，而且我也不太擅長這方面的內(nèi)容。我們只是單純的展示一個簡單的配色流程和一些技巧，你可以直接將這個方法運用到下一個項目中。

選擇起始色

這個世界上有多少種顏色，告訴你：1000萬種。想想就覺得可怕，而且我們要從這1000萬種顏色中找到一種作為我們網(wǎng)站或品牌的基本色。所有的顏色都將以此為基礎(chǔ)，所以也特別重要。不過不要著急：跟著我來不會錯的。

如何選擇一個起始顏色

理論上是可以任性的選取一個顏色來開始配色的，這樣就容易很多，但是我們通常不這么做。在任何有甲方設(shè)計項目里，設(shè)計師都要對自己的配色方案有充分的理由和依據(jù)。不然最終會淪為設(shè)計師和客戶個人喜好之間的博弈，往往受傷的還是設(shè)計師。不過也不要想太多，我們只是希望設(shè)計師每次在選擇顏色的時候要經(jīng)過認真的考慮，這樣看起來才會比較專業(yè)。

1.充分利用手中的資源

如果客戶有自己的品牌和品牌色，我們通常以此作為起始色

2.分析競品的配色方案

如果你的主要競爭對手已經(jīng)有了一個比較強勢的品牌色，不要想著把它抄過來，而且要盡量把它從你的配色方案中丟掉

3.考慮你的目標用戶

一個給老年人看的網(wǎng)站和一個給兒童看的網(wǎng)站，風格肯定是不同的。要多考慮你的網(wǎng)站用戶，想想你希望設(shè)計的網(wǎng)站給他們什么樣的感覺

4.不要墨守成規(guī)

設(shè)計一個少女網(wǎng)站并不非得要用粉色，設(shè)計從來都沒有統(tǒng)一的標準。要盡量在設(shè)計中避免同質(zhì)化，才能贏得用戶的青睞

5.玩文字游戲

當你一直在選色中糾結(jié)時，可以試著寫下一些和客戶業(yè)務相關(guān)聯(lián)的詞匯，這些應該可以幫助你找到一些靈感。如果還是不行，瀏覽一些關(guān)于顏色寓意的網(wǎng)站，看看什么顏色比較合適。

現(xiàn)在你腦海中應該大致已經(jīng)想好了一個基本色。它可能比較抽象，像紅色，藍色，黃色，綠色這樣比較寬泛的顏色。沒關(guān)系，下一步我們來準確定位色值。

我們先假設(shè)你選的顏色是藍色

選擇精確的基本色

在這一步里，很多人可能會想到打開PS用拾色器找到一個差不多喜歡的顏色。我們不打算這樣，我們想到其他設(shè)計師的作品里去獲取一些靈感。

首先要打開Dribbble 和 Designspiration 點擊“color”鏈接，然后應該是會出現(xiàn)這樣的頁面：

用靈感網(wǎng)站來幫忙找出正確的顏色

在這里，你可找出藍色正確的色調(diào)。

如果是比較年輕，活潑一點的品牌，可以選擇淺色的，明亮的藍色（下圖的上面5種顏色比較合適），

如果是比較正式，嚴肅的，下圖的下面5種顏色就比較合適。

不同色調(diào)的藍色代表不同的含義，所以選擇還是要比較謹慎的

在網(wǎng)站中選擇一個色調(diào)，看看這個色調(diào)的真實設(shè)計案例。你可以使用一些顏色抓取工具來獲取瀏覽器中自己喜歡的HEX值。

這么多的藍色！你只吸取自己認為最適合的顏色就可以了，是不是很簡單

在這里，你不僅可以看到不同版本的基本色，同時也可以發(fā)現(xiàn)合適的顏色搭配

創(chuàng)建一個調(diào)色板

好了！你現(xiàn)在應該有一個準確的HEX色值了。我選的是#309e8。接下來我們將根據(jù)這個色值來建一個調(diào)色板。這一步其實要比想象中的要容易。

當你在思考一個配色方案的時候，你腦海里可能會有一個這樣的圖像：

這樣的色板大家應該經(jīng)常看到（圖片出處: ColourLovers palettes by manekineko and sugar! )

這種類型的色板的問題在于在實際的設(shè)計中并不是非常實用，大多數(shù)這種色板的顏色數(shù)量都超過了你的需求。

而且，考慮到我們的配色方案會需要三種中性色：

白色

深灰色

淺灰色（可選）

如果你試著添加5或6種顏色到中性色中，看起來就會非常亂。其實你所需要的顏色只有兩種：

基本色（在我的案例里是：#30c9e8）

強調(diào)色（接下來我們會提到）

如果只使用上面提到的5種顏色來設(shè)計你的網(wǎng)站，也會比起你用了一大堆互補色系、互補色系、三色系等要好得多。

就像 Thoughtbot 和 TedTodd 這樣的網(wǎng)站，你并不需要復雜的顏色主題也可以設(shè)計出好看的網(wǎng)站

找到你的強調(diào)色

強調(diào)色在網(wǎng)站中用到的地方非常少，通常是為了提示用戶操作，所以一定要足夠顯眼。

下一步你只要打開Paletton網(wǎng)站，然后輸入基本色的HEX值：

在Paletton輸入基本色的HEX值

在這里，你可以找到你的強調(diào)色。

首先，你要點擊“Add Complementary”這個按鈕，然后就出現(xiàn)了一個橙色，這個就是你的強調(diào)色。

Paletton會自動為你生成一個合適的強調(diào)色

或者，你不喜歡Paletton生成的顏色，你也可以點擊網(wǎng)站上面的其他圖標找到更合適的。

 一個一個試，找到你喜歡的顏色

從個人角度來講，我非常喜歡Paletton生成的紅色，所以我決定把它應用到我們的配色方案中。當然，Paletton背后肯定是遵循顏色彩規(guī)律和理論，我們這里不做深入的研究。你以后會學到相關(guān)的理論，到那時就清楚了。

好了，下圖就是我們的配色方案。我們已經(jīng)有了一個好看的基本色和顯眼的強調(diào)色，還把白色加到了色板中。

 我們的色板已經(jīng)慢慢成型了

不過還缺少一些灰色調(diào)。

添加灰色調(diào)

在我的大多項目中，我發(fā)現(xiàn)了2種色調(diào)的灰色永遠都會用到——深灰色和淺灰色。在實際網(wǎng)頁設(shè)計中，你會經(jīng)常用到的。

深灰色通常會用在字體顏色上，而淺灰色主要是當你需要和白色有一些細微區(qū)分的時候會用到（通常是背景）。

有2中方法可以幫助我們找到灰色調(diào)

你可以再次使用Dribbble 和 Designspiration 從你之前的搜索結(jié)果中去找到一些好看的灰色來搭配你的主題。

如果你用的是photoshop，也可以借用Erica Schoonmaker’s technique的方法讓你的灰色調(diào)和基本色更加協(xié)調(diào)

做出協(xié)調(diào)的灰色

下面我們用Erica的方法來找出灰色調(diào)，我們先從兩個任意的灰色開始：

新建2個形狀，分別填充顏色#424242和#fafafa

在2個形狀上面，新建一個顏色填充圖層

顏色填充圖層的顏色改為你的基本色（我的是：#30c9e8）

設(shè)置混合模式為疊加，透明度調(diào)到5%到40%之間（我的例子里是40%）

用拾色器獲取新的色值

當疊加顏色是本案例的藍色時得出的效果是非常好的，至于其他的顏色，你也可以根據(jù)實際情況調(diào)低透明到5%-10%來得到最佳結(jié)果。

選擇一個和基本色協(xié)調(diào)的灰色看似很小的細節(jié)，也會產(chǎn)生很不同的效果

看！我們完成了！

我們的配色方案完成了，是不是很有成就感。

完成了配色方案，接下來就是配色的應用了

應用你的配色方案

現(xiàn)在我們已經(jīng)有了自己的配色方案，可以使用它了。配色應用其實可以用一篇全新的文章來討論，但為了加深大家的理解，我給大家展示一個網(wǎng)頁設(shè)計實例，這個網(wǎng)頁將會以灰度模式和顏色模式來展現(xiàn)。

提示：如果你對配色比較糾結(jié)，可以試試先用灰度模式來設(shè)計你的網(wǎng)頁。先區(qū)分出頁面的層次，再來進行配色嘗試.

用灰度模式來布局網(wǎng)頁可以幫助你更好地運用配色方案。

我們的配色方案的實際應用

正如你所看到的

藍色是我們的識別色。主要使用在大面積區(qū)域和圖標上面。

我們的強調(diào)色，紅色，很好的和基色形成反差。強調(diào)色主要使用在小塊的顏色區(qū)域，像按鈕和一些圖標上面。強調(diào)色使用的地方越少，強調(diào)的效果就會越明顯。

深灰色主要使用在文字，logo和圖標的輪廓上面。（在圖標上適當?shù)氖褂蒙罨疑?，會起到很不錯的效果）。

白色和淺灰色主要是在背景上的應用。在這個例子中，淺灰色其實并不是一定非要使用，但是我發(fā)現(xiàn)這個小細節(jié)會讓網(wǎng)頁看起來更優(yōu)雅。還有一點非常重要，在網(wǎng)頁顏色和字體的設(shè)計中，我們要保留足夠的對比度，這樣可以方便色盲或色弱的用戶閱讀你的網(wǎng)頁。有很多的工具可幫助你在顏色的選擇上符合WCAG（Web內(nèi)容無障礙指南）標準。我給大家推薦WebAim Color Contrast Checker 和Contrast Ratio 。

結(jié)語

就像我在例子里面展示的配色方案中，只不過使用了區(qū)區(qū)幾種顏色。但是這并不意味著你只能在這在這幾種顏色里搭配色彩。

使用上面的技巧，你可以根據(jù)具體需求擴展你的調(diào)色板。

在設(shè)計過程中，你可能需要更多是顏色來表達你的想法。充分利用上面的步驟可以幫助你找到合適的顏色來配合你的主題。

配色技巧不是一朝一夕的事情，它需要長時間的實踐和積累。在這個過程中你會慢慢掌握色彩的規(guī)律，哪些顏色適合在一起，哪些不適合。有時你會覺得上面的方法不是很令人滿意， 沒關(guān)系，可以根據(jù)具體場景進行調(diào)整。

轉(zhuǎn)載來自：UI中國

本文地址：http://www.www.czaxmy.cn/html/blogs/view-43.html

關(guān)于nicedesign奈思設(shè)計

nicedesign奈思設(shè)計是領(lǐng)先的用戶體驗設(shè)計與互聯(lián)網(wǎng)品牌建設(shè)公司,為眾多企業(yè)創(chuàng)造了專業(yè)與創(chuàng)新的設(shè)計解決方案,提供交互設(shè)計、UI界面設(shè)計、網(wǎng)站設(shè)計開發(fā)、網(wǎng)站建設(shè)、移動界面設(shè)計、軟件界面設(shè)計、互聯(lián)網(wǎng)品牌建設(shè)和用戶體驗咨詢服務。

查看精選案例   |  nicedesign服務體系    |  了解nicedesign動態(tài)