【色彩】論設(shè)計(jì)的靈魂是什么？是色彩

編按：在設(shè)計(jì)中，有一種痛叫只會(huì)PS，有一種淚是不知道排版，還有一種絕望是不會(huì)色彩搭配。一個(gè)好看的作品，色彩的搭配是占了90%的。那么關(guān)于色彩的那些事兒，你都了解嗎？讓我們一起來(lái)看看吧。

窗體底端

如果要在設(shè)計(jì)中有效的使用顏色，那么就需要了解一下顏色的概念和顏色理論術(shù)語(yǔ)。透徹的了解像色度、明度和飽和度這樣的概念是創(chuàng)建屬于你自己的非常棒的配色方案的關(guān)鍵。在我們的顏色理論系列第1部分：顏色的含義中，提到了不同顏色的意義。在此我們首先將溫習(xí)一下這個(gè)理論的基礎(chǔ)：什么條件將影響到一個(gè)已 知的顏色，例如添加灰色、白色或灰色到純色相中，此外，還有這樣做將如何影響設(shè)計(jì)，當(dāng)然示例是必不可少的。

色相

色相是最基本的顏色術(shù)語(yǔ)，通常指的是一個(gè)物體的顏色。當(dāng)我們說(shuō)“藍(lán)色”、“綠色”或“紅色”時(shí)，我們所談?wù)摰木褪巧?。設(shè)計(jì)當(dāng)中色相的使用向網(wǎng)站的訪問(wèn)者傳遞了重要的信息。閱讀本文第一篇可以了解不同色相傳遞的意義。

示例

Happy Twitmas網(wǎng)站背景和版式的一些部分所使用的主色相是鮮紅色。

同時(shí)使用大量的純色相可以增添外觀的有趣性，看起來(lái)妙趣橫生，如這個(gè)網(wǎng)站的標(biāo)題和其他一些地方所體現(xiàn)的那樣。

純紅色在網(wǎng)頁(yè)設(shè)計(jì)中是非常受歡迎的顏色。

這個(gè)網(wǎng)站的標(biāo)題和logo混合使用了大量的純色相。

純綠色通常很少看到，因此較之其他顏色顯得更出眾。

色度

色度指的是顏色的純度。高色度的色相當(dāng)中沒(méi)有黑色、白色或灰色。添加白色、黑色或灰色將降低色度。它類(lèi)似于飽和度，但又不完全一致。色度可被看作是一個(gè)顏色相對(duì)于白色的亮度。

在設(shè)計(jì)當(dāng)中，要避免使用具有非常相似色度的色相。而要選擇那些具有相同或差異較大色度的色相。

示例

青色具有很高的色度，因此在黑色和白色之間非常突出。

這是另一個(gè)具有高色度藍(lán)色的網(wǎng)站，盡管其中包含了一些色度略低的淺色調(diào)和陰影色調(diào)。

在同樣的色調(diào)中結(jié)合高飽和度和低飽和度可以呈現(xiàn)復(fù)雜和典雅的設(shè)計(jì)效果。

具有高色度的顏色是中庸型設(shè)計(jì)的首選，如本例所示。

不同色度的應(yīng)用可以制造出非常舒適的視覺(jué)漸變效果。

飽和度

飽和度指的是色調(diào)在特定的照明條件下呈現(xiàn)出的樣子。飽和度可以使用術(shù)語(yǔ)弱、強(qiáng)，或術(shù)語(yǔ)弱色相及純色相來(lái)表示。

在設(shè)計(jì)當(dāng)中，相似級(jí)別飽和度的顏色讓設(shè)計(jì)看起來(lái)更具連貫的一致性。同色度一樣，具有相似但不完全相同飽和度的顏色可以讓訪客有不和諧之感。

示例

本例所使用的大量不同的色相都具有相似的飽和度水平，從而為整體的設(shè)計(jì)增添了協(xié)調(diào)感。

通過(guò)水彩效果的強(qiáng)調(diào)，色彩與相似的柔和飽和度水平相結(jié)合創(chuàng)造出一種柔和的設(shè)計(jì)效果。

如本例所示，低飽和度水平的色相不一定要更鮮亮。

這是一個(gè)極好的例子演示如何在低飽和度背景中使用高飽和度色相以達(dá)到突出的效果。

這是另一個(gè)如何使用低飽和度顏色來(lái)突出臨近的高飽和度顏色。

明度

明度也被稱(chēng)作“亮度”。它指的是顏色的明暗程度。亮的顏色具有較高的明度值。例如，橙色的明度比深藍(lán)色或暗紫色更高。黑色的明度是所有色相中最低的，而白色的明度是最高的。

當(dāng)在設(shè)計(jì)中應(yīng)用明度的時(shí)候，最好選用不同明度的顏色，特別對(duì)于高色度的顏色來(lái)說(shuō)。高對(duì)比度通常可以設(shè)計(jì)出更具美感的效果。

示例

這里，具有高明度黃色的使用在低明度的黑色和灰色中相當(dāng)突出。

該網(wǎng)站使用了兩種不同明度的藍(lán)色調(diào)。由于不同的明度對(duì)比強(qiáng)烈，整體效果更具視覺(jué)上的吸引力。

將具有相似明度的顏色放在一起創(chuàng)造出了一個(gè)充滿(mǎn)活力和生動(dòng)的背景，這是設(shè)計(jì)本身所產(chǎn)生的增強(qiáng)效果。

這里紅色的明度比淡藍(lán)色稍低，它的明度比白色還低。

即使在非常類(lèi)似的色調(diào)中，人類(lèi)的眼睛也可以選出不同的明度。

色調(diào)

當(dāng)灰色加入某色相時(shí)就形成了色調(diào)。色調(diào)通常比純色相看起來(lái)更暗淡或柔和。

色調(diào)有時(shí)在設(shè)計(jì)中非常容易使用。摻入更多灰色的色調(diào)可以使網(wǎng)站具有一定的古舊感。根據(jù)不同的色調(diào)也可以為外觀效果增添一些精致優(yōu)雅的感覺(jué)。

示例

色調(diào)的應(yīng)用可以使網(wǎng)站看起來(lái)非常精致，同時(shí)增添一些復(fù)古的韻味。

這個(gè)網(wǎng)站將不同色調(diào)、陰影色調(diào)和淺色調(diào)的藍(lán)色結(jié)合使用。

如本例所示，色調(diào)可以通過(guò)在周邊加入灰色來(lái)強(qiáng)調(diào)/

在這個(gè)設(shè)計(jì)中，導(dǎo)航區(qū)和背景使用的色調(diào)讓這個(gè)網(wǎng)站看起來(lái)具有復(fù)古風(fēng)和手工制作的效果。

這個(gè)例子極好的展現(xiàn)了如何在具有色調(diào)的背景下純色相可以真正的被突出。

我們認(rèn)為可能是灰色的一些顏色實(shí)際上是其他顏色的色調(diào)。在本例中，背景實(shí)際上是加入了大量灰色的藍(lán)色色調(diào)。

陰影色調(diào)

當(dāng)在色相中加入黑色使其更暗時(shí)就形成了陰影色調(diào)。這個(gè)詞經(jīng)常被錯(cuò)誤的用來(lái)描述淺色調(diào)或者色調(diào)，但實(shí)際上陰影色調(diào)只應(yīng)用于加入了黑色，從而使色相更深的情況。

在設(shè)計(jì)中，較深的色調(diào)通常被用于替代黑色，并可以用作非彩色。綜合應(yīng)用陰影色調(diào)和淺色調(diào)是避免外觀看起來(lái)過(guò)于陰暗和厚重最好的方法。

示例

喬納森·穆?tīng)柕木W(wǎng)站在背景上應(yīng)用了不同陰影色調(diào)的紫色，而在其他部分使用了一些淺色調(diào)。

只要保持其間有足夠的對(duì)比度，不同陰影色調(diào)的協(xié)同使用效果也非常好。

有效結(jié)合陰影色調(diào)和淺色調(diào)，亮點(diǎn)在于頁(yè)頭的設(shè)計(jì)上這種方法的應(yīng)用。

另一個(gè)具有陰影色調(diào)和少量淺色調(diào)梯度紋理的背景設(shè)計(jì)。

陰影色調(diào)和紋理的結(jié)合使用為這個(gè)網(wǎng)站增加了趣味性。

淺色調(diào)

當(dāng)白色加入某色相使之變亮就形成了淺色調(diào)。非常亮的淺色調(diào)也稱(chēng)作柔和粉色，但對(duì)于任何加入白色的純色相來(lái)說(shuō)都是淺色調(diào)。

淺色調(diào)通常應(yīng)用于創(chuàng)建女性化的或較亮的設(shè)計(jì)當(dāng)中。柔和的淺色調(diào)特別用于讓設(shè)計(jì)更具女性化的特點(diǎn)。這種方法在復(fù)古的設(shè)計(jì)中效果很好，在針對(duì)嬰幼兒家長(zhǎng)的網(wǎng)站上也非常受歡迎。

示例

卡歐·卡多佐的網(wǎng)站在背景和其他元素當(dāng)中應(yīng)用了不同的淺綠色調(diào)。

費(fèi)爾南多·斯朗斯的網(wǎng)站應(yīng)用了淺藍(lán)色色調(diào)看起來(lái)柔和而精致。

淺藍(lán)色調(diào)在天空和自然的圖樣中非常流行。

淺色調(diào)在基于水彩的設(shè)計(jì)中也非常流行。

為體現(xiàn)復(fù)雜變化梯度而組合的淺色調(diào)。

結(jié)論

盡管你無(wú)需記住所有這些技術(shù)術(shù)語(yǔ)，但應(yīng)該對(duì)實(shí)際的概念比較熟悉，尤其要掌握這個(gè)系列的第3部分（創(chuàng)建屬于你自己的配色方案）。 為此，這里有一個(gè)喚醒記憶的備忘單：

* 色調(diào)即顏色（藍(lán)，綠，紅等）。
* 色度是顏色的純度（高色度未添加黑色、白色或灰色）。
* 飽和度指顏色的強(qiáng)弱（高飽和度越高就越強(qiáng)）。
* 明度值的是顏色的深淺（淺的顏色具有高明度）。
* 色調(diào)通過(guò)在一個(gè)顏色中加入灰色來(lái)創(chuàng)建，使之比原先更暗淡。
* 陰影色調(diào)通過(guò)在一個(gè)顏色中加入黑色來(lái)創(chuàng)建，使之比原先顏色更深。
* 淺色調(diào)通過(guò)在一個(gè)顏色中加入白色來(lái)創(chuàng)建，使之比原先的顏色更淺。

相關(guān)文章推薦:

【設(shè)計(jì)干貨】9種方式，讓你的網(wǎng)頁(yè)脫穎而出

資訊經(jīng)驗(yàn)-網(wǎng)頁(yè)設(shè)計(jì)靈動(dòng)布局之相對(duì)自由式

作者: kingtent

文章來(lái)源: https://www.uisdc.com/color-concepts-and-terminology#