因色相差而形成的(de)配色方式

作者：龍 時(shí)間：2018-07-31 浏覽：

有主導色彩配色

這(zhè)是由一種色相構成的(de)統一性配色。即由某一種色相支配、統一畫(huà)面的(de)配色，如果不是同一種色相，色環上相鄰的(de)類似色也(yě)可(kě)以形成相近的(de)配色效果。當然，也(yě)有一些色相差距較大(dà)的(de)做(zuò)法，比如撞色的(de)對(duì)比，或者有無色彩的(de)對(duì)比，但這(zhè)裏先講述帶主導色的(de)配色案例。

根據主色與輔色之間的(de)色相差不同，可(kě)以分(fēn)爲以下(xià)各種類型：

1  同色系主導

2  鄰近色主導

3  類似色主導

4  中差色主導

5  對(duì)比色主導

6  中性色主導

7  多(duō)色搭配下(xià)的(de)主導

…
1 同色系配色

同色系配色是指主色和(hé)輔色都在統一色相上，這(zhè)種配色方法往往會給人(rén)頁面很一緻化(huà)的(de)感受。

twitter的(de)案例

整體藍色設計帶來(lái)統一印象，顔色的(de)深淺分(fēn)别承載不同類型的(de)内容信息，比如信息内容模塊，白色底代表用(yòng)戶内容，淺藍色底代表回複内容，更深一點的(de)藍色底代表可(kě)回複操作，顔色主導著(zhe)信息層次，也(yě)保持了(le)twitter的(de)品牌形象。

觀點：顔色差分(fēn)割頁面層次和(hé)模塊，并代表不同功能任務屬性。

2 鄰近色配色

近鄰色配色方法比較常見，搭配比同色系稍微豐富，色相柔和(hé)過渡看起來(lái)也(yě)很和(hé)諧。

ALIDP的(de)案例

純度高(gāo)的(de)色彩，基本用(yòng)于組控件和(hé)文本标題顔色，各控件采用(yòng)鄰近色使頁面不那麽單調，再把色彩飽和(hé)度降低用(yòng)于不同背景色和(hé)模塊劃分(fēn)。

觀點：基于品牌色的(de)鄰近色運用(yòng)，靈活運用(yòng)到各類控件中。

3 類似色配色

類似色配色也(yě)是常用(yòng)的(de)配色方法，對(duì)比不強給人(rén)色感平靜、調和(hé)的(de)感覺。

BENMAPT的(de)案例

紅黃(huáng)雙色主導頁面，色彩基本用(yòng)于不同組控件表現，紅色用(yòng)于導航控件、按鈕和(hé)圖标，同時(shí)也(yě)作輔助元素的(de)主色。利用(yòng)偏橙的(de)黃(huáng)色代替品牌色，用(yòng)于内容标簽和(hé)背景搭配。

觀點：基于品牌色的(de)類似色運用(yòng)，有主次地用(yòng)到頁面各類控件和(hé)主體内容中。

4 中差色配色

中差色對(duì)比相對(duì)突出，色彩對(duì)比明(míng)快(kuài)，容易呈現飽和(hé)度高(gāo)的(de)色彩。

facebook的(de)案例

顔色深淺營造空間感，也(yě)輔助了(le)内容模塊層次之分(fēn)，統一的(de)深藍色系運用(yòng)，傳播品牌形象。中間色綠(lǜ)色按鈕起到豐富頁面色彩的(de)作用(yòng)，同時(shí)也(yě)突出綠(lǜ)色按鈕任務層級爲最高(gāo)。深藍色吊頂導航打通(tōng)整站路徑，并有引導用(yòng)戶向下(xià)閱讀之意。

觀點：利用(yòng)色彩對(duì)比突出按鈕任務優先級，增加頁面氣氛。

5 對(duì)比色配色

主導的(de)對(duì)比配色需要精準地控制色彩搭配和(hé)面積，其中主導色會帶動頁面氣氛，産生激烈的(de)心理(lǐ)感受。

YouTube的(de)案例

紅色的(de)熱(rè)鬧體現内容的(de)豐富多(duō)彩，品牌紅色賦予組控件色彩和(hé)可(kě)操作任務，貫穿整個(gè)站點的(de)可(kě)操作提示，又能體現品牌形象。紅色多(duō)代表導航指引和(hé)類目分(fēn)類，藍色代表登錄按鈕、默認用(yòng)戶頭像和(hé)标題，展示用(yòng)戶所産生的(de)内容信息。

觀點：紅藍色反應不同交互和(hé)信息的(de)可(kě)操作性，針對(duì)系統操作和(hé)用(yòng)戶操作的(de)區(qū)分(fēn)。

6 中性色配色

用(yòng)一些中性的(de)色彩作爲基調搭配，常應用(yòng)在信息量大(dà)的(de)網站，突出内容，不會受不必要的(de)色彩幹擾。這(zhè)種過配色比較通(tōng)用(yòng)，非常經典。

Bechan的(de)案例

黑(hēi)色突出網站導航和(hé)内容模塊的(de)區(qū)分(fēn)，品牌藍色主要用(yòng)于可(kě)點擊的(de)操作控件，包括用(yòng)戶名稱、内容标題。相較于大(dà)片使用(yòng)品牌色的(de)手法，更能突出内容和(hé)信息，适合以内容爲王的(de)通(tōng)用(yòng)化(huà)、平台類站點。

觀點：利用(yòng)大(dà)面積中性色作爲主導色，品牌色在這(zhè)裏起到畫(huà)龍點睛的(de)作用(yòng)，用(yòng)于一些需要重點突出的(de)場(chǎng)景，強調交互的(de)狀态等。

7 多(duō)色搭配下(xià)的(de)主導

主色和(hé)其他(tā)搭配色之間的(de)關系會更豐富，可(kě)能有類似色、中差色、對(duì)比色等搭配方式，但其中某種色彩會占主導。

Google的(de)案例

對(duì)于具有豐富産品線的(de)谷歌(gē)來(lái)說，通(tōng)過4種品牌色按照(zhào)一定的(de)純度比，再用(yòng)無色彩黑(hēi)白灰能搭配出千變萬化(huà)的(de)配色方案，讓品牌極具統一感。在大(dà)部分(fēn)頁面，藍色會充當主導色，其他(tā)3色作輔色并設定不同的(de)任務屬性，黑(hēi)白灰多(duō)作爲輔助色，對(duì)于平台類站點來(lái)說，多(duō)色主導有非常好的(de)延展性。