場(chǎng)景：PM和UI討論廣告的背景顏色中，PM：“這個(gè)廣告的背景和內(nèi)容采用差不多的顏色，區(qū)分度會(huì)不會(huì)不高。”UI：“不會(huì)啊，我專門使用單色相配合不同的飽和度和亮度設(shè)計(jì)的。”PM不停的點(diǎn)著自己快斷的腦袋，其實(shí)不知道UI說(shuō)的是什么意思。

本人為了跟充滿藝術(shù)氣質(zhì)的UI設(shè)計(jì)師更好的溝通，能夠聽(tīng)懂一點(diǎn)在我耳中的“天籟之音”。暗地里學(xué)習(xí)了一下UI設(shè)計(jì)，在家里啃著一本《眾妙之門-網(wǎng)站UI設(shè)計(jì)之道》，不知道是我買到了盜版的還是翻譯質(zhì)量的問(wèn)題，在看到色彩入門時(shí)，hue和tone都翻譯為色調(diào)，讓我完全迷失在色調(diào)和色調(diào)的世界里。再看到色度、色彩后，我徹底崩潰了。

為了秉承“不拋棄、不放棄”的光榮傳統(tǒng)，上網(wǎng)查資料，裝個(gè)photoshop，開(kāi)始搗騰著ps的拾色器，終于有點(diǎn)明白。決定試著用俗人的語(yǔ)言說(shuō)說(shuō)Hue（色相）、Tint（色彩）、Shade（色度）、色調(diào)（Tone）的不同。

首先需要了解眼睛的色彩接收原理，人的研究有三個(gè)色彩接收器，分別對(duì)應(yīng)紅色、綠色和藍(lán)色，通過(guò)三種顏色的不同組合，我們可以看看各種各樣的顏色。下面開(kāi)始說(shuō)說(shuō)上面提到的四種色吧。

Hue（色相），是飽和度和亮度都為100%的顏色。我的理解是，紅色、綠色、藍(lán)色三種原色，兩兩以不同比例混合后產(chǎn)生的顏色（可以只有一種顏色，最多只能兩種顏色混合，不能三種顏色混合）。所有的色相可以用色相環(huán)來(lái)展示。

Tint（色彩），是純色與白色度組合產(chǎn)生的顏色。我的理解是，hue（色相）中的任意一種顏色和白色以不同比例混合后產(chǎn)生的顏色。因此，一種hue（色相）通過(guò)加入不同比例的白色，可以產(chǎn)生一系列的Tint（色彩）。如下圖的紅色產(chǎn)生的色彩。

Shade（色度），是純色與黑色度組合后產(chǎn)生的顏色。我的理解是，hue（色相）中的任意一種顏色和黑色以不同比例混合后產(chǎn)生的顏色。因此，一種hue（色相）通過(guò)加入不同比例的黑色，可以產(chǎn)生一系列的shade（色度）。如下圖的紅色產(chǎn)生的色度。

tone（色調(diào)），是純色和灰色度組合產(chǎn)生的顏色。我的理解是，hue（色相）中的任意一種顏色和黑色、白色以不同比例混合后產(chǎn)生的顏色。因此，一種hue（色相）通過(guò)加入不同比例的黑色和白色，可以產(chǎn)生一系列的tone（色調(diào)）。如下圖的紅色產(chǎn)生的色調(diào)。

如果大家對(duì)飽和度和亮度有點(diǎn)理解，簡(jiǎn)單地說(shuō)在Hue（色相）就是飽和度和亮度都為100%，Hue值從0-360度變化而產(chǎn)生的所有顏色;而白色度，其實(shí)就是降低飽和度，當(dāng)飽和度為0時(shí)，顏色就是白色，因此Tint（色彩）就是所有的hue（色相）顏色在亮度為100%的情況下，調(diào)整飽和度得到的所有顏色;反之，黑色度，就是降低亮度，當(dāng)亮度為0時(shí)，顏色就是黑色，因此Shade（色度）就是所有的hue（色相）顏色在飽和度為100%的情況下，調(diào)整亮度而得到的所有顏色。那么，tone（色調(diào)）就是所有的hue（色相）顏色通過(guò)同時(shí)調(diào)整飽和度和亮度得到的所有顏色。

下次，你可以跟UI說(shuō)：“這個(gè)logo的顏色我喜歡，不過(guò)色度是否可以在深點(diǎn)”。也許，UI會(huì)有一種相逢恨晚的感覺(jué)，前提是不要露底了。

注：saturation（飽和度）是指色彩的鮮明程度與它最大可能的鮮明程度的比值，范圍是0~100%;brightness（亮度）是指色彩的明亮程度，范圍是0~100%。文章把英文在括號(hào)外面，括號(hào)內(nèi)寫(xiě)中文，是希望去記住英文，因?yàn)椴煌�人�?duì)這幾個(gè)英文都有不同的翻譯，理解了區(qū)別，就是中文不一樣，稍作理解就能夠?qū)��?yīng)回英文，從而知道其所指。

作者：苦茶

本文來(lái)源：互聯(lián)網(wǎng)的一些事

標(biāo)簽： 產(chǎn)品經(jīng)理 色相 色彩 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。