色彩的飽和度和明度是我們進(jìn)行色彩設(shè)計最經(jīng)常使用的兩個變量，但卻不了解它們。在色彩設(shè)計的時候往往對其不加以克制，卻不斷強(qiáng)化它，導(dǎo)致頁面過于鮮艷而缺乏品質(zhì)感，且容易對用戶造視覺疲勞。今天就關(guān)于色彩的飽和度進(jìn)行一下分享。

1.飽和度&明度的定義

色彩的飽和度和明度的是我們色彩設(shè)計中最近常使用的兩個變量，我們先來了解一下它的定義：

飽和度：指顏色的純度或強(qiáng)度，簡單點理解就是顏色中的灰色量含量的高低。

明度：指的是顏色中混合了多少白色或黑色。

飽和度和亮度很大程度上決定了色彩呈現(xiàn)給用戶的感受，飽和度、明度越高，視覺沖擊力越強(qiáng)烈；飽和度、明度較低的時候，視覺上越溫和。

2.眼睛對低飽和低明度色彩的忍耐度更高

我們首先來做個小測試，分別觀察 A 、B 兩組的色彩。A 組是100%的飽和度合明度，B 組是80%的飽和度和明度，大家觀察一會，看那一組的時間更長?

我會發(fā)現(xiàn)對 B 組低飽和、低明度色彩的容忍程度更高，觀看時間更久；而 A 組的色彩飽和度高、明度高，不一會我們就感覺眼睛疲勞不堪，再也不想多看一眼睛。

在實際的應(yīng)用中，如果色彩飽和度過高，會對用戶造成視覺疲勞，導(dǎo)致用戶地產(chǎn)品的忍耐度直線下降，我們以高德地圖為例，左側(cè)是通過軟件處理后的高飽和、高明度的界面，右側(cè)是線上界面。

我們會明顯感覺右側(cè)的線上界面更加耐看，色彩的飽和度和明度適中，視覺上更加舒適，對界面的忍耐度更高。而高飽和、高明度的頁面視覺上過于鮮艷，容易給用造成視覺疲勞，導(dǎo)致用戶極其容易放棄當(dāng)前頁面的操作。

3.高飽和度、高明度的色彩缺乏高級感

高飽和高明度的色彩缺乏高級感，不利于視覺輸出，影響產(chǎn)品的整體品牌建設(shè)。

高飽和高明度的色彩缺乏品質(zhì)感，對自己的缺乏克制，表現(xiàn)的簡單、盲目、沖動、缺乏品質(zhì)感。例如葬愛家族合影：

葬愛家族的合影中，色彩飽和度和明度都很高，色彩十分突兀，色彩之間缺乏聯(lián)系，十分生硬，缺乏品質(zhì)感，顯得低廉、粗糙。

高級感的色彩是克制的，表現(xiàn)的精致、穩(wěn)重、具有品質(zhì)感。例如高品質(zhì)的攝影作品：

低飽和、低明度的攝影作品看起來更加整體，色調(diào)更加和諧，相互之間有較強(qiáng)的聯(lián)系，給人一種很強(qiáng)的品質(zhì)感。

我們以故宮展覽為例，對其進(jìn)行飽和度和明度的調(diào)試再與原界面進(jìn)行對比：

我們發(fā)現(xiàn)飽和度和明度提高之后，使得界面嚴(yán)重缺乏品質(zhì)感，界面的色彩過于鮮艷不加以克制，色彩之間沒有秩序，一片混亂，導(dǎo)致整個畫面給人的感覺很花，很刺眼。

4.使用場景分析

a.色彩對注意力和喚醒的影響

高飽和度和亮度的顏色更容易吸引人的注意力。結(jié)論表明在吸引注意力方面飽和度和明度比色調(diào)更加重要（源自“ 色調(diào)，飽和度和亮度的影響 ”的研究）。

另外兩項研究“ 顏色飽和度的喚醒效應(yīng) ”和“ 顏色和情感 ”發(fā)現(xiàn)，明亮，飽和明亮的顏色與喚醒度（喚醒度(Arousal)是指使人感到興奮或不興奮的程度，評分越高喚醒度越高）有關(guān)。色調(diào)也會影響喚醒，但飽和度和亮度會產(chǎn)生更大的影響。

b.飽和度高&明度高的顏色適合做引導(dǎo)性的控件

高明度和高飽和度的色彩更加容易吸引人的注意力，在喚醒度方面更加能夠刺激用戶的興奮度，所以一般情況我們將明度和飽和度較高的顏色用于按鈕的設(shè)計。例如京東：

右邊高明度高飽和度的按鈕視覺沖擊力更強(qiáng)，讓人更加具有點擊欲望，而左邊低明度和低飽和度的按鈕色彩暗淡，無法引起人的注意力，讓用戶缺乏點擊的欲望，不適合做按鈕的設(shè)計。

c.飽和度低&明度低的顏色適用于長時間觀看的頁面

我們首先來做個小測試，分別觀察 A 、B 兩組的色彩。A 組是100%的飽和度合明度，B 組是80%的飽和度和明度，大家觀察一會，看那一組的時間更舒適?

通過觀察，顯然右邊比左邊在視覺上更加舒適，高明度和高飽和度的色彩則不適合做背景色使用，主要原因是因為高明度和高飽和度的色彩容易吸引人的注意力，喚醒度較高，作為背景使用容易喧賓奪主。

5.總結(jié)

我們在回顧以上分享所提到的關(guān)于色彩的飽和度和明度的知識點：

1.人們對于低飽和度色彩的容忍程度更高，適合長時間的觀看；高飽和度色彩容易對人的眼睛造成視覺疲勞，不適宜長時間觀看。

2.高飽和、高明度的色彩容易缺乏高級感，對色彩的不加以克制，導(dǎo)致整個面絮亂無章，缺乏整體感。

3.色彩的明度、飽和度比色調(diào)更容易吸引人的注意力，高飽和度&高明度的色彩適合作為按鈕等具有引導(dǎo)性的功能控件使用；低飽和度&低明度的色彩，適用需要長時間觀看的頁面，用作于背景。