為什么別人的界面色彩設(shè)計(jì)牛逼？先來了解一下飽和度和亮度這兩個(gè)色彩變量吧！

前言

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

目錄

1. 飽和度&明度的定義
2. 眼睛對(duì)低飽和低明度色彩的忍耐度更高
3. 高飽和度、高明度的色彩缺乏高級(jí)感
4. 使用場(chǎng)景分析
5. 總結(jié)

一、飽和度&明度的定義

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

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

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

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

二、眼睛對(duì)低飽和低明度色彩的忍耐度更高

我們首先來做個(gè)小測(cè)試，分別觀察 A 、B 兩組的色彩。

A 組是100%的飽和度合明度，B 組是80%的飽和度和明度，大家觀察一會(huì)，看那一組的時(shí)間更長(zhǎng)?

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

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

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

三、高飽和度、高明度的色彩缺乏高級(jí)感

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

高飽和高明度的色彩缺乏品質(zhì)感，對(duì)自己的缺乏克制，表現(xiàn)的簡(jiǎn)單、盲目、沖動(dòng)、缺乏品質(zhì)感。

例如葬愛家族合影：

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

高級(jí)感的色彩是克制的，表現(xiàn)的精致、穩(wěn)重、具有品質(zhì)感。

例如高品質(zhì)的攝影作品：

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

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

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

四、使用場(chǎng)景分析

1. 色彩對(duì)注意力和喚醒的影響

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

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

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

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

例如京東：

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

3. 飽和度低&明度低的顏色適用于長(zhǎng)時(shí)間觀看的頁(yè)面

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

通過觀察，顯然右邊比左邊在視覺上更加舒適，高明度和高飽和度的色彩則不適合做背景色使用，主要原因是因?yàn)楦呙鞫群透唢柡投鹊纳嗜菀孜说淖⒁饬Γ瑔拘讯容^高，作為背景使用容易喧賓奪主。

五、總結(jié)

我們?cè)诨仡櫼陨戏窒硭岬降年P(guān)于色彩的飽和度和明度的知識(shí)點(diǎn)：

1. 人們對(duì)于低飽和度色彩的容忍程度更高，適合長(zhǎng)時(shí)間的觀看；高飽和度色彩容易對(duì)人的眼睛造成視覺疲勞，不適宜長(zhǎng)時(shí)間觀看。
2. 高飽和、高明度的色彩容易缺乏高級(jí)感，對(duì)色彩的不加以克制，導(dǎo)致整個(gè)面絮亂無章，缺乏整體感。
3. 色彩的明度、飽和度比色調(diào)更容易吸引人的注意力，高飽和度&高明度的色彩適合作為按鈕等具有引導(dǎo)性的功能控件使用；低飽和度&低明度的色彩，適用需要長(zhǎng)時(shí)間觀看的頁(yè)面，用作于背景。

參考鏈接

《為什么你應(yīng)該避免明亮，飽和的背景顏色》

《顏色和情感：色調(diào)，飽和度和亮度的影響》

《色調(diào)，飽和度和亮度的影響：第2部分：注意》

《什么是“高級(jí)感”的設(shè)計(jì)？》

作者：姜正，微信號(hào)：Edwared1992

本文由 @姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。