網(wǎng)頁(yè)設(shè)計(jì)之色彩設(shè)計(jì)原理

今天創(chuàng)新互聯(lián)為你準(zhǔn)備了干貨，網(wǎng)頁(yè)設(shè)計(jì)之色彩設(shè)計(jì)原理。

Chapter 1 色彩基礎(chǔ)(Basic Knowledge of Color Rules)

1.1 色彩的構(gòu)成

1.1.1 什么是色彩

印刷品設(shè)計(jì)：色彩就是可見(jiàn)光在物體顏料上除去被吸收的光后，散射出來(lái)的光的顏色，是一種「反射色」

互聯(lián)網(wǎng)設(shè)計(jì)：色彩就是白色光透過(guò)帶顏色的電子屏幕后，表現(xiàn)出來(lái)的光的顏色，是一種「透過(guò)色」

1.1.2 色彩的構(gòu)成

• 色相：用于區(qū)分色彩的首要特征，比如紅、黃、藍(lán)等顏色
• 純度：純度用來(lái)表現(xiàn)色彩的鮮艷和深淺
• 明度：明度是指色彩的亮度或明度

Tips：色相較容易理解，但由于明度與純度的概念較為抽象，所以為了方便理解我們可以這樣來(lái)記憶：

接觸過(guò)水粉畫(huà)的朋友應(yīng)該都知道，往顏料里加入越多的水粉，水粉顏料在紙張上的顏色厚度就越薄，畫(huà)出來(lái)的色彩就越淡，所以我們可以理解色彩的純度就是水粉顏料在紙張上的厚薄程度(純度越高，色彩越厚越鮮艷;純度越低，色彩越薄越清淡)，而顏料下面的紙張顏色則可以理解為明度(紙張顏色越白，水粉效果越清澈，明度越高;紙張顏色越黑，水粉效果越渾濁，明度越低)。

1.1.3 RGB與CMYK

RGB色彩模式：是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過(guò)對(duì)紅、綠、藍(lán)三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色。

CMYK顏色模式：當(dāng)陽(yáng)光照射到一個(gè)物體上時(shí)，這個(gè)物體將吸收一部分光線,并將剩下的光線進(jìn)行反射，反射的光線就是 們所看見(jiàn)的物體顏色。

1.2 色彩的功能

1.2.1

色彩能對(duì)人的心理產(chǎn)生一定的效應(yīng)，而且同一個(gè)顏色在不同國(guó)家不同文化背景下的印象也是各不相同，更不能過(guò)度期待這種色彩對(duì)心理的影響。

比方說(shuō)，紅色在中國(guó)總所周知代表“喜慶”、“熱情”的意思，但在某些西方國(guó)家，紅色又與“財(cái)政赤字”(Be in the red)有所關(guān)聯(lián)。此外紅色還有“危險(xiǎn)”、“緊急”之意，像Red Alert就是表示“空襲”、暴風(fēng)雨來(lái)襲的“警告聲”。

1.2.2 冷色與暖色

色彩學(xué)上根據(jù)心理感受，把顏色分為暖色調(diào)(紅、橙、黃)、冷色調(diào)(青、藍(lán))和中性色調(diào)(紫、綠、黑、灰、白)。

暖色系的色彩被認(rèn)為會(huì)提高血壓以及心跳次數(shù)、刺激自律神經(jīng)系統(tǒng)、增強(qiáng)性欲和食欲;冷色系則有與之相反的作用。因此很多餐飲行業(yè)或烹飪書(shū)，為了讓食物看起來(lái)更美味，激發(fā)想吃的欲望，比較適合暖色系的配色。

雖然可以用「冷」、「暖」色系來(lái)劃分色彩，但配色的變化卻又千種萬(wàn)種。借著色彩的組合方式，從「非常冷」到「涼爽」到「暖和」再到「炎熱」都可以用不同的配色組來(lái)表現(xiàn)色彩的印象。

1.3 色彩印象坐標(biāo)

1.3.1 印象地圖

要將某些用言語(yǔ)難以表現(xiàn)又不穩(wěn)定的印象具象化，并向他人說(shuō)明時(shí)，可以使用「印象地圖」的方式。

印象地圖的制作過(guò)程：首先收集足夠多與印象符合的素材，再將素材貼在紙上或展板上，制作好的成品看上去或許有點(diǎn)亂，但稍微拉開(kāi)距離來(lái)看，或是試著處理成馬賽克效果，應(yīng)該就比較好理解了。

1.3.2 單色印象坐標(biāo)

精心篩選出能夠表達(dá)人們對(duì)顏色的感覺(jué)的多個(gè)形容詞，然后利用SD方法對(duì)不同工作、生活環(huán)境中的1000個(gè)人進(jìn)行了相關(guān)的測(cè)試，用于測(cè)試的顏色是色相&色調(diào)(Tue & Tone)表中的116種不同的顏色。“單色印象空間”就是對(duì)這次測(cè)試的數(shù)據(jù)進(jìn)行科學(xué)整理后得到的結(jié)果。從結(jié)果可以獲知，人們對(duì)顏色進(jìn)行評(píng)價(jià)時(shí)，最習(xí)慣使用的4個(gè)形容詞是“柔和(Soft)”、“生硬(Hard)”、“動(dòng)態(tài)(Dynamic)”、“靜態(tài)(Static)。

將這兩類(lèi)印象的取值分別作為二維坐標(biāo)系上的橫縱坐標(biāo)值，得到的點(diǎn)的集合就被稱為“單色印象空間”。

1.3.3 配色印象坐標(biāo)

我們?cè)谠O(shè)計(jì)網(wǎng)站或者廣告的時(shí)候，絕對(duì)不會(huì)僅僅使用某一種顏色，通常都需要搭配使用多種顏色來(lái)獲得較好的配色效果。而為了對(duì)這種多種顏色的混合使用進(jìn)行評(píng)價(jià)，就需要引入新的分析方法——配色印象空間。

• 給人靜態(tài)柔和感覺(jué)的，通常都是隱約柔和顏色之間的搭配;
• 給人動(dòng)態(tài)柔和感覺(jué)的，通常都是鮮亮顏色間的搭配;、
• 給人動(dòng)態(tài)生硬感覺(jué)的，通常都是鮮亮和渾濁暗淡顏色之間的搭配;
• 給人靜態(tài)生硬感覺(jué)的，通常都是灰冷顏色之間的搭配。

在“配色印象空間”中，相距較遠(yuǎn)的顏色之間的印象會(huì)有較大的差異，而距離較近的顏色之間的印象會(huì)比較相近，也就是說(shuō)顏色間的距離與印象的差異程度成正比關(guān)系。

1.4 配色網(wǎng)站

LOL Colors：網(wǎng)站是一個(gè)很簡(jiǎn)單、設(shè)計(jì)可愛(ài)的在線配色工具，將鼠標(biāo)光標(biāo)移動(dòng)到色彩上方，右側(cè)會(huì)顯示色彩代碼(Hex Code)，你可以把色彩選取后復(fù)制代碼，將顏色使用到你的設(shè)計(jì)項(xiàng)目上。

Chapter 2 取得協(xié)調(diào)的配色(Harmonious Color Configuration)

2.1 色彩屬性一致的配色

2.1.1 色相一致的配色

同色相配色是指主色和輔色都在統(tǒng)一色相上，這種配色方法往往會(huì)給人頁(yè)面很一致化的感受。

同色相配色容易營(yíng)造出一種較為夢(mèng)幻的感覺(jué)，但因較為樸素也就不容易引人注目，而且會(huì)給人一種單調(diào)的感覺(jué)。

如若想要在色彩變化上融入一點(diǎn)微妙的變化，可以嘗試在色環(huán)中選用兩側(cè)相近的顏色，這樣色彩層次豐富了而統(tǒng)一感也不會(huì)變，稱之為“鄰近色配色”。

鄰近色是指在色相環(huán)中相鄰的兩種色相。同一色相配色與類(lèi)似色相配色總體上會(huì)給人一種安靜整齊的感覺(jué)。例如在藍(lán)色旁邊使用了綠色時(shí)，當(dāng)然會(huì)給人一種較協(xié)調(diào)整齊的感覺(jué)。

2.1.2 明度一致的配色

明度，即表示色彩的明亮程度。而相比起“純度”跟“色相”，明度是讓眼睛更容易感受到“變化” 的色彩屬性，因此不管使用怎樣的色彩，只要色彩的明度相合就能表現(xiàn)出統(tǒng)一感。

由圖中我們可以看出，色彩本身即帶有明度的特征，這種明度的特征是較難被人眼所判定，但較容易被察覺(jué)。 我們通過(guò)分析上面的濾去飽和度的色帶，還能看出很多有趣的信息，但在此暫不做具體說(shuō)明。想要有效地進(jìn)行明度一致的配色，可以將色彩替換成灰色，利用灰稿間的明度差異來(lái)明確元素間的差異。

明度一致的配色，不會(huì)出現(xiàn)強(qiáng)弱的對(duì)比，因此不太適宜于需要引人注目的廣告用途。但是通常設(shè)計(jì)上不會(huì)全部使用明度一致的配色，但是在某部分加上一些變化倒是不錯(cuò)的想法。

2.1.3 純度一致的配色

純度，表示色彩的鮮艷程度。相比“明度”跟“色相”，純度更容易對(duì)人的心理印象造成影響。其中，純度越高，越是讓人感到鮮艷刺激(圖1);純度越低，越是讓人感覺(jué)平靜沉穩(wěn)(圖2);而高低純度混合的配色是難以統(tǒng)合的(圖3)。

在高純度的配色中，色彩數(shù)量增多，會(huì)產(chǎn)生熱鬧又愉快的印象;色彩數(shù)量減少，則會(huì)有強(qiáng)而有力的印象。在低純度的配色中，由于色相變化較小，故色彩的數(shù)量并不能很有效的影響人的印象。

Chapter 3 強(qiáng)調(diào)設(shè)計(jì)的配色(The Color Co-ordination for Pair Designed)

設(shè)計(jì)構(gòu)思的過(guò)程中請(qǐng)時(shí)刻記住“在想讓其顯眼的部分運(yùn)用對(duì)比”這個(gè)準(zhǔn)則。

所謂“對(duì)比”(Contrast)指的是數(shù)個(gè)設(shè)計(jì)元素之間具有某種“落差”的狀態(tài)，這不但是指色彩，在畫(huà)面設(shè)計(jì)或是文字的組合上，也可以運(yùn)用相同的方式加以設(shè)計(jì)。

色彩上的對(duì)比，是指色與色之間在進(jìn)行組合時(shí)所產(chǎn)生的“落差”的大小，設(shè)計(jì)過(guò)程中只要在色彩的某個(gè)要素上添加落差，就可以產(chǎn)生明度的對(duì)比、純度的對(duì)比、色相的對(duì)比等不同方式的組合方式。(明度對(duì)比 > 純度對(duì)比 > 色相對(duì)比)

3.1 色彩屬性形成的對(duì)比

3.1.1 明度對(duì)比

由于人的眼睛對(duì)明度差異的敏感度比其他任何一種對(duì)比都要高，所以明度間的對(duì)比很強(qiáng)烈。

運(yùn)用好明度對(duì)比就能提高設(shè)計(jì)的“辨識(shí)度”(要素易于辨識(shí)的指數(shù))和“可讀性”(指文字的易于讀取度)。

3.1.2 純度對(duì)比

由于人的目光容易被鮮艷的色彩所吸引，所以可以使用高純度的色彩來(lái)用作強(qiáng)調(diào)作品的某一部分。

高純度的色彩組合容易形成一種花哨的感覺(jué)，因此亮眼的作品需要在使用純度高的顏色來(lái)凸顯某一部分的同時(shí)壓低周邊元素的色彩純度，然后還需考慮如何引導(dǎo)視線如何做排版。

低純度的配色能給人產(chǎn)生平和或是懷舊的情感，但與高純度的色彩結(jié)合在一起時(shí)，會(huì)讓設(shè)計(jì)作品具有近乎戲劇性的效果，適用于電影海報(bào)或小說(shuō)封面等追求戲劇張力的設(shè)計(jì)。

3.1.3 色相對(duì)比

色相對(duì)比，是把不同色相的色彩組合在一起并借助顏色的不同來(lái)營(yíng)造對(duì)比效果。

在色環(huán)中位置相聚較遠(yuǎn)的配色組合，效果強(qiáng)烈;反之則越弱。(值得注意的是，在純度較高的互補(bǔ)色組合時(shí)，會(huì)由于視覺(jué)殘像而在色彩邊界產(chǎn)生“光暈”現(xiàn)象，會(huì)讓讀者眼鏡疲勞，文字難以閱讀)

將不同色相的顏色組合時(shí)，色相的感覺(jué)也會(huì)不同。例如，同樣是橘色，如果是和紅色并排組合，看起來(lái)就會(huì)略帶一些色環(huán)上與紅色相反方向的顏色(比如黃色和綠色);相反，如果是和黃色或綠色并排組合，看起來(lái)就會(huì)偏紅。

Chapter 4 色彩搭配方式(Method of Color Co-ordination)

接下來(lái)我們按三個(gè)大類(lèi)的配色方法，結(jié)合一些案例，分析色彩在頁(yè)面中的應(yīng)用手法：

4.1 色相差形成的配色方式

在色相差形成的配色中，我們主要研究有主導(dǎo)色彩的色相差配色，這是由一種色相構(gòu)成的統(tǒng)一性配色。即由某一種色相支配、統(tǒng)一畫(huà)面的配色，如果不是同一種色相，色環(huán)上相鄰的類(lèi)似色也可以形成相近的配色效果。當(dāng)然，也有一些色相差距較大的做法，比如撞色的對(duì)比，或者有無(wú)色彩的對(duì)比，但這里先講述帶主導(dǎo)色的配色案例。

根據(jù)主色與輔色的色相差不同，可以分為以下各種類(lèi)型：

1. 同色系配色
2. 鄰近色配色
3. 類(lèi)似色配色
4. 中差色配色
5. 對(duì)比色配色
6. 中性色配色
7. 多色搭配下的配色

4.1.2 同色系配色

同色系：指色相性質(zhì)相同，但色度有深淺之分。(是色相環(huán)中15°夾角內(nèi)的顏色)比如深紅與緋紅。

同色系配色是指主色和輔色都在統(tǒng)一色相上，這種配色方法往往會(huì)給人頁(yè)面很一致化的感受。

Twitter 的案例：

Twitter的整體藍(lán)色設(shè)計(jì)帶來(lái)統(tǒng)一印象，顏色的深淺分別承載不同類(lèi)型的內(nèi)容信息，比如信息內(nèi)容模塊，白色底代表用戶內(nèi)容，淺藍(lán)色底代表回復(fù)內(nèi)容，更深一點(diǎn)的藍(lán)色底代表可回復(fù)操作，顏色主導(dǎo)著信息層次，也保持了twitter的品牌形象。

4.1.2 鄰近色配色

鄰近色：就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。近鄰色配色方法比較常見(jiàn)，搭配比同色系稍微豐富，色相柔和過(guò)渡看起來(lái)也很和諧。

ALIDP的案例：

純度高的色彩，基本用于組控件和文本標(biāo)題顏色，各控件采用鄰近色使頁(yè)面不那么單調(diào)，再把色彩飽和度降低用于不同背景色和模塊劃分。

觀點(diǎn)：基于品牌色的鄰近色運(yùn)用，靈活運(yùn)用到各類(lèi)控件中。

4.1.3 類(lèi)似色配色

類(lèi)似色：在色輪上90度角內(nèi)相鄰接的色統(tǒng)稱為類(lèi)似色.例如紅-紅橙-橙.黃-黃綠-綠.青-青紫-紫等均為類(lèi)似色

類(lèi)似色配色也是常用的配色方法，對(duì)比不強(qiáng)給人色感平靜、調(diào)和的感覺(jué)。

BENMAPT的案例：

紅黃雙色主導(dǎo)頁(yè)面，色彩基本用于不同組控件表現(xiàn)，紅色用于導(dǎo)航控件、按鈕和圖標(biāo)，同時(shí)也作輔助元素的主色。利用偏橙的黃色代替品牌色，用于內(nèi)容標(biāo)簽和背景搭配。

觀點(diǎn)：基于品牌色的類(lèi)似色運(yùn)用，有主次地用到頁(yè)面各類(lèi)控件和主體內(nèi)容中。

4.1.4 中差色配色

中差色：中差色對(duì)比是色相環(huán)上呈90度角的色彩組合。它介于類(lèi)似色和對(duì)比色相之間，因色相差較明確，色彩對(duì)比效果較明顯。也就是紅配橙，橙配黃，黃配綠，綠配藍(lán)，藍(lán)配紫，紫配紅等等。中差色對(duì)比相對(duì)突出，色彩對(duì)比明快，容易呈現(xiàn)飽和度高的色彩。但容易產(chǎn)生沉悶感。

facebook的案例：

顏色深淺營(yíng)造空間感，也輔助了內(nèi)容模塊層次之分，統(tǒng)一的深藍(lán)色系運(yùn)用，傳播品牌形象。中間色綠色按鈕起到豐富頁(yè)面色彩的作用，同時(shí)也突出綠色按鈕任務(wù)層級(jí)為高。深藍(lán)色吊頂導(dǎo)航打通整站路徑，并有引導(dǎo)用戶向下閱讀之意。

觀點(diǎn)：利用色彩對(duì)比突出按鈕任務(wù)優(yōu)先級(jí)，增加頁(yè)面氣氛。

4.1.5 對(duì)比色配色

對(duì)比色：在色相環(huán)中每一個(gè)顏色對(duì)面(180度對(duì)角)的顏色,稱為”對(duì)比色(互補(bǔ)色)”。把對(duì)比色放在一起,會(huì)給人強(qiáng)烈的排斥感.若混合在一起,會(huì)調(diào)出渾濁的顏色.如:紅與綠,藍(lán)與橙,黃與紫互為對(duì)比色。

YouTube的案例：

紅色的熱鬧體現(xiàn)內(nèi)容的豐富多彩，品牌紅色賦予組控件色彩和可操作任務(wù)，貫穿整個(gè)站點(diǎn)的可操作提示，又能體現(xiàn)品牌形象。紅色多代表導(dǎo)航指引和類(lèi)目分類(lèi)，藍(lán)色代表登錄按鈕、默認(rèn)用戶頭像和標(biāo)題，展示用戶所產(chǎn)生的內(nèi)容信息。

觀點(diǎn)：紅藍(lán)色反應(yīng)不同交互和信息的可操作性，針對(duì)系統(tǒng)操作和用戶操作的區(qū)分。

4.1.6 中性色配色

用一些中性的色彩作為基調(diào)搭配，常應(yīng)用在信息量大的網(wǎng)站，突出內(nèi)容，不會(huì)受不必要的色彩干擾。這種過(guò)配色比較通用，非常經(jīng)典。

Bechan的案例：

黑色突出網(wǎng)站導(dǎo)航和內(nèi)容模塊的區(qū)分，品牌藍(lán)色主要用于可點(diǎn)擊的操作控件，包括用戶名稱、內(nèi)容標(biāo)題。相較于大片使用品牌色的手法，更能突出內(nèi)容和信息，適合以內(nèi)容為王的通用化、平臺(tái)類(lèi)站點(diǎn)。

觀點(diǎn)：利用大面積中性色作為主導(dǎo)色，品牌色在這里起到畫(huà)龍點(diǎn)睛的作用，用于一些需要重點(diǎn)突出的場(chǎng)景，強(qiáng)調(diào)交互的狀態(tài)等。

4.1.7 多色搭配下的主導(dǎo)

主色和其他搭配色之間的關(guān)系會(huì)更豐富，可能有類(lèi)似色、中差色、對(duì)比色等搭配方式，但其中某種色彩會(huì)占主導(dǎo)。

Google的案例：

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

觀點(diǎn)：谷歌設(shè)置了四種品牌色，通過(guò)主次、合理的比例應(yīng)用在界面中，并通過(guò)組控件不同的交互狀態(tài)合理分配功能任務(wù)。

谷歌的經(jīng)典色彩搭配，一直延續(xù)到各類(lèi)產(chǎn)品中。

4.2 色調(diào)調(diào)和而形成的配色方式

4.2.1 有主導(dǎo)色調(diào)的配色

這是由同一色調(diào)構(gòu)成的統(tǒng)一性配色。深色調(diào)和暗色調(diào)等類(lèi)似色調(diào)搭配也可以形成同樣的配色效果。即使出現(xiàn)多種色相，只要保持色調(diào)一致，畫(huà)面也能呈現(xiàn)整體統(tǒng)一性。

根據(jù)色彩的情感，不同的調(diào)子會(huì)給人不同的感受，大致分為以下幾類(lèi)：

• 清澈的色調(diào)
• 陰暗的色調(diào)
• 明亮色調(diào)
• 深暗色調(diào)
• 雅白色調(diào)

4.2.1.1 清澈的色調(diào)

SHOTFOLIO的案例：

清澈調(diào)子使頁(yè)面非常和諧，即使是不同色相形同色調(diào)的配色能讓頁(yè)面保持較高的協(xié)調(diào)度。藍(lán)色另頁(yè)面產(chǎn)生安靜冰冷的氣氛，茶色讓我們想起大地泥土的厚實(shí)，給頁(yè)面增加了穩(wěn)定踏實(shí)感覺(jué)，同時(shí)暖和藍(lán)色的冰冷。

觀點(diǎn)：互補(bǔ)的色相搭配在一起，通過(guò)統(tǒng)一色調(diào)的手法，可以緩和色彩之間的對(duì)比效果。

4.2.1.2 陰暗的色調(diào)

概念應(yīng)用的案例：

陰暗的色調(diào)渲染場(chǎng)景氛圍，通過(guò)不同色相的色彩變化豐富信息分類(lèi)，降低色彩飽和度使各色塊協(xié)調(diào)并融入場(chǎng)景，白色和明亮的青綠色作為信息載體呈現(xiàn)。

Tips：多色彩經(jīng)過(guò)統(tǒng)一色調(diào)處理，區(qū)域間非常協(xié)調(diào)，也不影響整體頁(yè)面陰暗氣氛表現(xiàn)。

4.2.1.3 明亮色調(diào)

Kids plus的案例：

明亮的顏色活潑清晰，熱鬧的氣氛和醒目的卡通形像敘述著一場(chǎng)慶典，但鋪滿高純度的色彩，過(guò)于刺激，不適宜長(zhǎng)時(shí)間游覽。

觀點(diǎn)：飽和度與純度特性明顯的搭配，在達(dá)到視覺(jué)沖擊力的同時(shí)，可適當(dāng)采用對(duì)比色或降低明度等方法調(diào)和視覺(jué)表現(xiàn)。

4.2.1.4 深暗色調(diào)

LEES FERRY的案例：

頁(yè)面以深暗偏灰色調(diào)為主，不同的色彩搭配，像在敘述著不同的故事，白色文字的排版，整個(gè)頁(yè)面顯得厚重精致，小區(qū)域微漸變?cè)黾影婷尜|(zhì)感。

觀點(diǎn)：以低暗色調(diào)構(gòu)成整體畫(huà)面氛圍，小面積明亮部分不會(huì)影響整體感覺(jué)。

4.2.1.5 雅白色調(diào)

Very的案例：

柔和的調(diào)子使頁(yè)面顯得明快溫暖，就算色彩很多也不會(huì)造成視覺(jué)負(fù)重。頁(yè)面的同色調(diào)搭配，顏色作為不同模塊的信息分類(lèi)，不搶主體的重點(diǎn)，還能襯托不同類(lèi)型載體的內(nèi)容信息。

觀點(diǎn)：同色調(diào)不同色彩的模塊，就算承載著不同的信息內(nèi)容也能表現(xiàn)很和諧。

4.2.2 同色調(diào)配色

這是由同一或類(lèi)似色調(diào)中的色相變化構(gòu)成的配色類(lèi)型，與主導(dǎo)色調(diào)配色中的屬于同類(lèi)技法。區(qū)別在于色調(diào)分布平均，沒(méi)有過(guò)深或過(guò)淺的模塊，色調(diào)范圍更為嚴(yán)格。

Tumblr的案例：

在實(shí)際的設(shè)計(jì)運(yùn)用中，常會(huì)用些更綜合的手法，例如整體有主導(dǎo)色調(diào)，小范圍布局會(huì)采用同色調(diào)搭配。拿tumblr的發(fā)布模塊來(lái)說(shuō)，雖然頁(yè)面有自己的主色調(diào)，但小模塊使用同色調(diào)不同色彩的功能按鈕，結(jié)合色相變化和圖形表達(dá)不同的功能點(diǎn)，眾多的按鈕放在一起，由于同色調(diào)原因模塊非常穩(wěn)定統(tǒng)一。

觀點(diǎn)：綜合運(yùn)用的情況，整體界面是有主導(dǎo)色調(diào)，在布局例如重點(diǎn)圖標(biāo)等是同色調(diào)配色靈活運(yùn)用。

4.2.3 同色深淺搭配

這是由同一色相的色調(diào)差構(gòu)成的配色類(lèi)型，屬于單一色彩配色的一種。 與主導(dǎo)色調(diào)配色中的同色系配色屬于同類(lèi)技法。從理論上來(lái)講，在同一色相下的色調(diào)不存在色相差異，而是通過(guò)不同的色調(diào)階層搭配形成，可以理解為色調(diào)配色的一種。

Genrecolours的案例：

拿紫色界面來(lái)說(shuō)，利用同一色相通過(guò)色調(diào)深淺對(duì)比，營(yíng)造頁(yè)面空間層次。雖然色彩深淺搭配合理，但有些難以區(qū)分主次，由于是同一色相搭配，顏色的特性決定著心理感受。

觀點(diǎn)：同色深淺配色有著極高的統(tǒng)一性。

分享題目：網(wǎng)頁(yè)設(shè)計(jì)之色彩設(shè)計(jì)原理
文章地址：http://muchs.cn/news3/162903.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、域名注冊(cè)、軟件開(kāi)發(fā)、網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)