色彩是我們感知世界的一扇窗戶。在UI設(shè)計(jì)中，這更是真理。人對(duì)色彩的視覺感知，引導(dǎo)著人的思維，改變著大腦的預(yù)測、理解和決策過程。

這么說或許有點(diǎn)深?yuàn)W。其實(shí)，從小開始，你就在潛移默化中，掌握了色彩背后的深層含義。走在路上，看到紅色的標(biāo)語，你會(huì)停下腳步；看到信號(hào)燈上的綠色數(shù)字，你會(huì)悠閑地通過。閱讀時(shí)，你會(huì)先讀黑色字體，再讀灰色字體。上網(wǎng)時(shí)，你會(huì)點(diǎn)擊界面的藍(lán)色區(qū)域……這是我們對(duì)色彩的“直覺”。

這種“直覺”根深蒂固，用戶體驗(yàn)產(chǎn)品時(shí)也離不開它的影響。?

從表面上看，配色并不難。但是，在大規(guī)模的產(chǎn)品設(shè)計(jì)中，簡單的問題也變得非常復(fù)雜。假設(shè)一家公司有數(shù)千名設(shè)計(jì)師，他們各司其職，各自為產(chǎn)品配色。要保證所有產(chǎn)品配色一致，公司的色彩系統(tǒng)“肩負(fù)重任”。而且，在設(shè)計(jì)師看來，配色這么簡單的事情，一次性搞定就夠了。所以想做到配色一致非常困難。

我對(duì)此深有體會(huì)，我所在的團(tuán)隊(duì)負(fù)責(zé)構(gòu)建和維護(hù) Lyft 的設(shè)計(jì)系統(tǒng)——“Lyft 產(chǎn)品語言”。今年早些時(shí)候，我們幾乎淹沒在問題的海洋中：如何使用色彩？如何添加色彩？如何修改？如何快捷地配色……?隨著公司設(shè)計(jì)和工程隊(duì)伍的壯大，問題的數(shù)量與日俱增。

很明顯，Lyft 現(xiàn)有的色彩系統(tǒng)已經(jīng)不堪重負(fù)。唯有另辟蹊徑，問題才有解決的可能。?為此，我們決定打破對(duì)色彩系統(tǒng)的固有認(rèn)知，重新構(gòu)建色彩系統(tǒng)。

更系統(tǒng)地命名?

在盤點(diǎn)用過哪些色彩時(shí)，我們發(fā)現(xiàn)了許多“歷史遺留問題”，整個(gè)盤點(diǎn)過程如同考驗(yàn)眼力和腦力的考古挖掘?！霸虑蛏?、“石板色”和“骨頭色”都屬于灰色，“桑葚色”、“紫紅色”和“紫羅蘭色”都屬于紫色，但我們很難根據(jù)名稱進(jìn)行區(qū)分。

對(duì)我們而言，這是一個(gè)大問題，尤其是 Lyft 標(biāo)志性的粉色，我們?cè)诋a(chǎn)品中總共發(fā)現(xiàn)了15種不同的粉色（如下圖所示）。

首先，我們想搞明白為什么色彩命名如此碎片化。?我們發(fā)現(xiàn)，不同的人（尤其是來自不同學(xué)科背景的人）描述色彩的方式存在根本差異。?

如今看來，這個(gè)發(fā)現(xiàn)顯而易見，但剛開始時(shí)并不是如此。?所以，我們首先要做的是，讓設(shè)計(jì)師和工程師在探討配色問題時(shí)，能夠使用統(tǒng)一的詞匯。?也就是說，色彩命名不是沒有條理的，而是符合邏輯推斷的。?從本質(zhì)上講，我們需要一門有助于配色工作的語言。?

我們發(fā)現(xiàn)，人們?cè)谡務(wù)撋蕰r(shí)會(huì)傳達(dá)兩個(gè)基本信息。?一個(gè)信息是色相（hue），對(duì)應(yīng)于色相環(huán)上的某個(gè)部分。另外一個(gè)信息是色彩的亮度（lightness），起修飾作用。?所以，你常常聽到“淡藍(lán)色”、“暗綠色”、“深紅色”等說法。我們命名時(shí)也遵循這一原則。

我們深知，讓這門新語言真正成為日常交流的一部分，才是最難做到的。?因此，它必須有較高的性價(jià)比，或者說，簡單易學(xué)，使用效率高。

因此，對(duì)于色相的命名，我們尊重人們已有的語言習(xí)慣。對(duì)于常見的色相，我們直接照搬色彩學(xué)術(shù)語，例如：藍(lán)色、綠色和紅色。?對(duì)于更復(fù)雜的色相，我們選擇較短、易于拼寫、易學(xué)的單詞，如薄荷色（mint）、鴨翅綠（teal）、玫瑰色（rose）等，一門能夠長期使用的語言必定是嚴(yán)密的。

所以，我們不放過每一種可以想到的色彩，并找到相應(yīng)的色相，力求全面。?因?yàn)樯嘀挥?360 種，我們不必?fù)?dān)心未來色相的數(shù)目會(huì)增加。我們可以把色相的名稱進(jìn)行組合，無須改動(dòng)語言的基本結(jié)構(gòu)（比如：霞紅色（red-sunset）或粉紫色（pink-purple））。

（Lyft?使用的16色色相環(huán)）

至于亮度的描述，我們沒找到一個(gè)現(xiàn)成的很好的方法。?于是，我們決定從0到100進(jìn)行賦值，0代表亮度最高，100 代表亮度最低。?唯一要注意的是，賦值時(shí)要做到有據(jù)可循。例如：如果以后我們突然發(fā)現(xiàn)，存在比 100 更低的亮度，有可能每一種色彩都要重新賦值，Lyft的每一個(gè)員工都要重新接受培訓(xùn)。?所以我們必須準(zhǔn)確定義亮度賦值方法。?后文中我們會(huì)加以闡述。

現(xiàn)在，我們有了屬于 Lyft 的命名系統(tǒng)。每一種色彩的名稱都包含兩個(gè)信息——色相和亮度。?例如：“紅色 60”是中紅色，“藍(lán)色 10”是一種非常亮的藍(lán)色。簡單易學(xué)，表述準(zhǔn)確，這兩個(gè)方面我們都做到了。

更精確地選擇色彩?

幾乎全部的色彩系統(tǒng)都是相似的，或者說，用的是同一種配色方法。設(shè)計(jì)師會(huì)先用 Illustrator、Photoshop 或 Sketch 等工具選擇一種色彩，再用疊加的方法調(diào)節(jié)亮度，獲得想要的效果。這是一種被普遍使用的經(jīng)典方法。

雖然這種方法短期內(nèi)有效，但它的成果容易“過期”。?例如：更換色系的時(shí)候，我們無法完全重復(fù)之前的操作。?即使讓同一個(gè)設(shè)計(jì)師來做，他也很可能做不到。這是因?yàn)槲覀兣渖珪r(shí)純粹依靠肉眼，但人眼不是精確的機(jī)器。飲食、環(huán)境、配色工具或方法的變化，都會(huì)大大改變?nèi)说囊曈X感知。?因?yàn)榻?jīng)典方法不是長期有效的，我們必須找到一種新的方法。

于是，我們轉(zhuǎn)向更嚴(yán)謹(jǐn)?shù)臄?shù)學(xué)方法，嘗試用編程解決問題。?但是，我們對(duì)現(xiàn)有編程的效果并不滿意，因?yàn)橄嗤木幊谭椒☉?yīng)用于不同色相時(shí)，得到的結(jié)果時(shí)好時(shí)壞。

注：相同的編程方法，不同的結(jié)果：藍(lán)色色系中有較多種可用的色彩，但黃色色系中，除了最上方的其他幾種都不可用。

我們發(fā)現(xiàn)：這是由不同色域（color space）的巨大差異造成的。常見的編程方法算法單一，而色域的多樣性要求我們用更靈活的方法。

正常肉眼可見的黃色和綠色的色域，比藍(lán)色和紅色的色域大

我們把這個(gè)難題看作一個(gè)改進(jìn)數(shù)學(xué)方法的機(jī)會(huì)，問題的關(guān)鍵在于：我們希望配色時(shí)更有“控制感”，包括亮度、色相和飽和度三方面的控制。?對(duì)于亮度，在界面中，我們不需要做到均勻分布，只會(huì)關(guān)注0-100 中間的幾個(gè)亮度值。?相較之下，我們更需要控制好色相和飽和度（saturation）的演變。

常見編程工具的算法都是，在控制色相和飽和度幾乎不變的條件下，以固定的亮度值間距逐層推進(jìn)演算，輸出每一層的結(jié)果。我們決定更進(jìn)一步，利用色彩的三維模型構(gòu)建新的算法。?

小提示：這一小節(jié)的后半部分包含較多術(shù)語，所以，如果您想了解算法的原理，請(qǐng)繼續(xù)閱讀。?如果您不感興趣，請(qǐng)?zhí)料乱恍」?jié)。

色彩最好用三維模型表示，因?yàn)槲覀兛梢詮?strong>色相（底面）、飽和度（右側(cè)）、亮度或明度（左側(cè)）三個(gè)維度確定一種色彩。

如圖所示的三維模型包含了所有可能的色彩，“盒子”中的每個(gè)點(diǎn)代表一種色彩。

與任何算法一樣，首先，我們要確定算法的輸入（inputs）和輸出（outputs）是什么。?對(duì)于輸出，我們希望得到色相相同、亮度不同的一組色彩。?如果要構(gòu)建一個(gè)完整的色彩系統(tǒng)，我們需要重復(fù)該算法，得到每種色相對(duì)應(yīng)的色彩。

那么，算法應(yīng)該輸出多少種色彩呢？

在 Lyft，我們的答案是 11 種。也就是說，算法會(huì)輸出編號(hào)為0、10、20 直至 100 的 11 種顏色。

解決了輸出數(shù)目的問題，我們還要解決輸入的問題。首先，我們會(huì)在 0-359 之間選擇一個(gè)整數(shù)區(qū)間，代表色相的范圍。區(qū)間的大小取決于色相的種類。如果色相為紅色，區(qū)間一般較?。蝗绻酁辄S色，區(qū)間一般較大，我們也會(huì)根據(jù)實(shí)際需要擴(kuò)大或縮小區(qū)間。

其次，我們需要輸入飽和度的范圍。?飽和度的取值范圍是 0 到 1。在算法中，我們添加了調(diào)整飽和度的功能，可以快速優(yōu)化輸出的結(jié)果。我們既可以提高品牌標(biāo)志性顏色的飽和度，也可以降低飽和度，達(dá)到灰度濾鏡的效果。?

最后，我們需要輸入光度值。?光度與飽和度一樣，都在 0 到 1 之間取值。?你可能會(huì)注意到，當(dāng)我們調(diào)整光度時(shí)，其他軸上所代表的指標(biāo)也會(huì)跟著變動(dòng)。?這是因?yàn)樵谌S模型中，所有色彩指標(biāo)都是緊密關(guān)聯(lián)、相互影響的。?

一旦我們輸入上述三項(xiàng)內(nèi)容，算法就會(huì)輸出我們想要的色彩。

有了新的算法，我們不再靠肉眼選擇顏色。如今，更換設(shè)計(jì)師或者工具都不會(huì)影響配色結(jié)果。我們還能根據(jù)不同時(shí)期的需要，快速變換或者增減色彩。

無障礙設(shè)計(jì)？So easy!?

在Lyft，配色最基本的要求是：用戶使用時(shí)，不存在視覺障礙。我們過去被迫使用第三方工具，手動(dòng)檢查色彩對(duì)比度（color contrast ratio，色彩對(duì)比度足夠高，內(nèi)容才容易辨識(shí)）。我們希望能擺脫對(duì)第三方工具的依賴，幫助我們非常輕松地設(shè)計(jì)出用戶體驗(yàn)良好的產(chǎn)品。

為了做到這一點(diǎn)，我們充分利用前兩小節(jié)所描述的工作成果。我們控制亮度值不變，同時(shí)，要求色彩對(duì)比度必須達(dá)到 4.5:1。算法輸出的11種色彩中，編號(hào)為0-50的色彩適用于黑色背景，編號(hào)為 60-100 的色彩適用于白色背景。

通過編號(hào)，我們就足以判斷色彩對(duì)比度是否達(dá)標(biāo)。?舉個(gè)例子，設(shè)計(jì)師或工程師能馬上判斷“紅色 50”在白色背景中不能使用，而“紅色 60”可以。

添加系統(tǒng)維護(hù)工具?

到此為止，構(gòu)建色彩系統(tǒng)的目標(biāo)已基本完成。在之前的色彩系統(tǒng)中，糾錯(cuò)和維護(hù)的工具很少。所以，我們?yōu)楣こ處煒?gòu)建了一個(gè)在代碼庫中“穿梭”的遷移工具，可以把現(xiàn)有的色彩代碼導(dǎo)入到新系統(tǒng)中。?我們還構(gòu)建了防火墻，防止代碼庫中混入新的色彩代碼。

現(xiàn)在，輪到你大展身手了?

在 Lyft，我們相信未來是包容開放的，任何人都可以設(shè)計(jì)產(chǎn)品并獲得成功。?我們認(rèn)為，為了讓未來成為現(xiàn)實(shí)，我們都需要考慮如何構(gòu)建更便捷的產(chǎn)品，并付諸行動(dòng)。

Enjoy!

原文鏈接：https://design.lyft.com/re-approaching-color-9e604ba22c88

翻譯：即能，公眾號(hào)：即能學(xué)習(xí)

本文由 @即能 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供