編輯導(dǎo)語(yǔ)：在做UI設(shè)計(jì)時(shí)，定義并統(tǒng)一顏色規(guī)范對(duì)產(chǎn)品設(shè)計(jì)和團(tuán)隊(duì)整體推進(jìn)具有重要作用，本篇文章通過(guò)一個(gè)國(guó)外大廠(chǎng)真實(shí)的顏色組件升級(jí)案例為我們分享了統(tǒng)一顏色規(guī)范的好方法，一起來(lái)看。

Hi，我是彩云。咱們平時(shí)在做UI組件庫(kù)的時(shí)候，會(huì)遇到一個(gè)問(wèn)題，定義了很多顏色但在團(tuán)隊(duì)合作的時(shí)候，卻依然還是會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的喜好來(lái)配色，很難將顏色規(guī)范很好的統(tǒng)一起來(lái)。這其中有一個(gè)很?chē)?yán)重的問(wèn)題就是對(duì)于顏色的命名和管理不夠清晰，那么今天這篇文章通過(guò)一個(gè)國(guó)外大廠(chǎng)真實(shí)的顏色組件升級(jí)案例，希望能幫你解決這個(gè)難題。

我們花了幾個(gè)月的時(shí)間改進(jìn)了設(shè)計(jì)系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素：它們構(gòu)成視覺(jué)語(yǔ)言，幫助定義品牌，并被開(kāi)發(fā)和設(shè)計(jì)師每天用在產(chǎn)品設(shè)計(jì)中。

但如果我們?cè)谑褂妙伾蠜](méi)有明確的指導(dǎo)原則，如顏色被團(tuán)隊(duì)中的設(shè)計(jì)師按喜好使用時(shí)，將會(huì)導(dǎo)致產(chǎn)品看起來(lái)非常混亂。

我們APP中的不一致例子

接下來(lái)我會(huì)告訴你，我們是如何做好顏色規(guī)范以及在整個(gè)項(xiàng)目中面臨的挑戰(zhàn)，正如你將看到的，這個(gè)項(xiàng)目并不像看上去那么簡(jiǎn)單：

如何通過(guò) Getaround 在設(shè)計(jì)和技術(shù)方面管理顏色概述這個(gè)系統(tǒng)的局限性，并說(shuō)明我們?nèi)绾胃倪M(jìn)它什么是語(yǔ)義顏色我們是如何實(shí)現(xiàn)它的，以及它帶來(lái)的優(yōu)勢(shì)！

一、我們之前在Getaround中如何管理顏色？

1. 在設(shè)計(jì)方面

和許多設(shè)計(jì)團(tuán)隊(duì)一樣，我們使用 Figma 作為我們的主要設(shè)計(jì)工具。我們的顏色被放在“基礎(chǔ)”庫(kù)中，可以在其中找到我們?cè)诋a(chǎn)品中使用的所有常見(jiàn)樣式，例如字體樣式、顏色、圖標(biāo)等。這個(gè)庫(kù)提供了我們每天使用的專(zhuān)用系統(tǒng)庫(kù)（iOS、Android、Web、電子郵件）。顏色名稱(chēng)過(guò)去是基于它們的外觀(guān)。例如：紫色顏色是我們的主要顏色，而石墨色是基本文本的常規(guī)顏色。

2. 在技術(shù)方面

在我們的APP中，曾經(jīng)會(huì)用相同的系統(tǒng)來(lái)管理顏色。此外，還有一些語(yǔ)義顏色，但僅限于 iOS，開(kāi)發(fā)用的也不多。

二、我們?cè)谂f系統(tǒng)中面臨的限制

在使用這個(gè)系統(tǒng)時(shí)，團(tuán)隊(duì)反復(fù)面臨同樣的問(wèn)題：如何確保從一位設(shè)計(jì)師到另一位設(shè)計(jì)師以相同的方式使用顏色？如果沒(méi)有適當(dāng)?shù)闹笇?dǎo)原則，我們?nèi)绾未_保開(kāi)發(fā)很好的還原？如果明天我們必須用全新的配色方案來(lái)改造我們的品牌，要怎么快速統(tǒng)一？讓我們?cè)囍页鑫覀兪侨绾蜗萑脒@種境地的？

1. 沒(méi)有明確的顏色使用規(guī)范

所有設(shè)計(jì)師都使用相同的色板，但自 2019 年 Getaround 品牌重塑以來(lái)，除了引入不一致之外，沒(méi)有明確關(guān)于如何使用它們的規(guī)范，所以設(shè)計(jì)師在選擇顏色時(shí)迷失了方向。然后他們將開(kāi)始建立自己的參考資料，每個(gè)設(shè)計(jì)師都有不同的配色想法。

例如：設(shè)計(jì)師應(yīng)該在所有這些灰色陰影中為次級(jí)文本選擇哪種灰色？顏色命名在這里不是很有幫助

2. 舊品牌的設(shè)計(jì)包袱

以前品牌的一些舊顏色仍在使用（按鈕上的藍(lán)色陰影，標(biāo)題……）。到現(xiàn)在也沒(méi)有真正的行動(dòng)計(jì)劃來(lái)迭代它們。

舊驅(qū)動(dòng)器品牌

三、我們對(duì)新系統(tǒng)的設(shè)想

在 2021 年初，我們有機(jī)會(huì)為我們的 iOS 和 Android APP來(lái)制定長(zhǎng)期的 UI 規(guī)劃。我們問(wèn)自己“5年后我們的APP會(huì)是什么樣的？”。我們會(huì)回顧， Getaround 品牌是如何成為我們視覺(jué)方法中心的。

以上是我們品牌和設(shè)計(jì)團(tuán)隊(duì)在 2020 年完成的全面工作的一小部分致力于設(shè)計(jì)系統(tǒng)的 Cobalt 團(tuán)隊(duì)借此機(jī)會(huì)重新考慮了顏色系統(tǒng)。然而，為了使這一目標(biāo)成為現(xiàn)實(shí)，我們面臨著一些挑戰(zhàn)：

1. 制定指導(dǎo)原則

我們?nèi)绾未_保每個(gè)設(shè)計(jì)師都可以依賴(lài)易于理解和使用色彩系統(tǒng)？擁有一個(gè)簡(jiǎn)單系統(tǒng)將加快使用速度。

2. 顏色能通過(guò)可用性標(biāo)準(zhǔn)

我們?nèi)绾未_保從一開(kāi)始就設(shè)計(jì)出易于使用的顏色？

3. 易于維護(hù)并符合未來(lái)趨勢(shì)

我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護(hù)并符合現(xiàn)在和未來(lái)的行業(yè)標(biāo)準(zhǔn)（例如：暗模式）

四、我們新的顏色系統(tǒng)：語(yǔ)義顏色

在我們的探索階段，在 Figma 的共享環(huán)境中工作促使我們保存和記錄我們所做的設(shè)計(jì)決策。就像我們應(yīng)該如何命名我們的強(qiáng)調(diào)色：（主要？強(qiáng)調(diào)？）我們還測(cè)試了APP界面在黑暗模式下的外觀(guān)，以及如何正確支持這一點(diǎn)。我們應(yīng)該創(chuàng)建一個(gè)單獨(dú)的調(diào)色板還是為每個(gè)組件都創(chuàng)建一個(gè)深色版本？

我們開(kāi)始與開(kāi)發(fā)討論這個(gè)問(wèn)題，以了解他們有什么解決方案來(lái)處理這些問(wèn)題。語(yǔ)義顏色的概念很快就被開(kāi)發(fā)人員提出來(lái)，因?yàn)樗麄冎啦⑶液芎玫厥褂昧诉@個(gè)概念。但對(duì)于設(shè)計(jì)師來(lái)說(shuō)，又要如何準(zhǔn)確理解呢？

1. 什么是語(yǔ)義顏色？

語(yǔ)義指的是根據(jù)顏色的使用方式而不是色調(diào)來(lái)命名顏色的方法。

例如，你可以將顏色命名為“成功”或“積極”，因?yàn)樗傅氖呛x，而不是“綠色”或“翡翠綠”。甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來(lái)命名顏色，例如背景顏色、按鈕背景顏色、文本顏色、圖標(biāo)顏色等……

2. 從基于外觀(guān)的配色方案到基于語(yǔ)義的配色方案

語(yǔ)義顏色并不新鮮，越來(lái)越多的產(chǎn)品開(kāi)始采用這種方式來(lái)定義顏色。我們可以從下面一些大廠(chǎng)的顏色規(guī)范來(lái)學(xué)習(xí)google

• https://material.io/design/color/the-color-system.html#color-theme-creationApple
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/colorShopify
• https://polaris.shopify.com/design/colors#navigationAsana
• https://polaris.shopify.com/design/colors#navigation

顯然，這種顏色系統(tǒng)有很多優(yōu)點(diǎn)。因此，現(xiàn)在讓我解釋一下我們?nèi)绾卧趯?shí)踐中將這個(gè)概念應(yīng)用到我們的產(chǎn)品中。

3. 深入研究語(yǔ)義顏色

我們的新顏色系統(tǒng)由兩部分組成：

• 基礎(chǔ)色板
• 語(yǔ)義顏色

基礎(chǔ)調(diào)

我們與品牌團(tuán)隊(duì)密切合作，他們定義了一個(gè)全新的品牌，我們?cè)诠ぷ鲿r(shí)會(huì)圍繞這個(gè)品牌考慮。該品牌的每種顏色都采用多種色調(diào)進(jìn)行調(diào)整，以創(chuàng)造更大的靈活性，一次構(gòu)建成為基礎(chǔ)調(diào)色板。它代表可以在產(chǎn)品中顯示的所有可能顏色。團(tuán)隊(duì)可能不會(huì)全部使用它們，但他們會(huì)選擇在產(chǎn)品中效果最好的那些。

基礎(chǔ)調(diào)色板

4. 語(yǔ)義顏色

語(yǔ)義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的，命名不再是指顏色的“外觀(guān)”（洋紅色、棕色、綠色……），而是指UI 元素它們被應(yīng)用于（文本、圖標(biāo)、按鈕、背景……）以及該元素的狀態(tài)（活動(dòng)、非活動(dòng)、成功……）。請(qǐng)參閱此處的命名法和一些示例：

語(yǔ)義顏色結(jié)構(gòu)和示例這意味著來(lái)自基礎(chǔ)調(diào)色板的顏色可以用于多種語(yǔ)義顏色：

這就是我們根據(jù)這個(gè)新原則重新調(diào)整顏色命名的方式：

我們通過(guò)設(shè)計(jì)師和開(kāi)發(fā)進(jìn)行了內(nèi)部用戶(hù)測(cè)試，以確定命名語(yǔ)義顏色的最佳方式。我們嘗試了很多不同的命名方法，發(fā)現(xiàn)過(guò)于詳細(xì)的命名系統(tǒng)對(duì)于我們的團(tuán)隊(duì)和產(chǎn)品的規(guī)模來(lái)說(shuō)維護(hù)和使用太復(fù)雜了。我們決定做一些簡(jiǎn)單的維護(hù)，同時(shí)在命名方面有足夠的延展性。

五、語(yǔ)義顏色的好處

1. 語(yǔ)義色彩嵌入設(shè)計(jì)原則

語(yǔ)義顏色側(cè)重于顏色的用途。它消除了設(shè)計(jì)師和開(kāi)發(fā)對(duì)使用什么顏色的盲目猜測(cè)，因?yàn)橐曈X(jué)語(yǔ)言直接傳達(dá)了設(shè)計(jì)決策。

例如：在這里，顏色命名使設(shè)計(jì)師更容易做出正確的選擇。在我們的原則中， *Accent* state 用于交互元素。

2. 解鎖黑暗模式

語(yǔ)義顏色可以適應(yīng)不同的主題。語(yǔ)義顏色的名稱(chēng)始終相同，但它的外觀(guān)可能會(huì)根據(jù)所選模式而改變。例如，語(yǔ)義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶(hù)選擇的模式，將自動(dòng)顯示正確的顏色。這對(duì)我們的設(shè)計(jì)系統(tǒng)來(lái)說(shuō)是一個(gè)真正的游戲規(guī)則改變者，因?yàn)樗鼘⑹顾用嫦蛭磥?lái)。

明暗模式下的語(yǔ)義顏色 Primary.Background

3. 語(yǔ)義顏色高效靈活

如果我們將來(lái)要更新顏色，使用語(yǔ)義顏色也會(huì)變得更容易。假設(shè)我們想要將我們的主色更改為藍(lán)色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍(lán)色”。與該顏色相關(guān)的所有語(yǔ)義顏色也將神奇地更新。另一種情況可能是更新特定 UI 元素的顏色，例如按鈕，而無(wú)需觸摸使用紫色顏色的其他元素。

在這種情況下，我們只需要更新 ButtonBackground.Primary 顏色，非常簡(jiǎn)單。如果沒(méi)有該系統(tǒng)，更新顏色將需要經(jīng)過(guò)大量 QA 以確保將更改應(yīng)用到任何地方。

4. 顏色組合指南

這個(gè)系統(tǒng)似乎很容易使用，但設(shè)計(jì)師仍然有一些問(wèn)題：

• 我什么時(shí)候可以使用正常文字顏色？
• 我什么時(shí)候可以使用次級(jí)文本顏色？
• 我什么時(shí)候可以使用可交互顏色？

為了幫助設(shè)計(jì)師選擇顏色，我們創(chuàng)建了一個(gè)交互式指南，列出了所有可能的顏色組合。我們?cè)?figma 原型中創(chuàng)建了這個(gè)指導(dǎo)原則，每次更改設(shè)計(jì)系統(tǒng)顏色時(shí)都會(huì)更新該規(guī)范。它突出了允許的語(yǔ)義顏色組合，以最大限度地保持一致性。

點(diǎn)擊可以查看大圖Figma 中內(nèi)置的語(yǔ)義色彩交互指南

5. 結(jié)果

采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化：

1）我們從“Foundation”庫(kù)中提取顏色，并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開(kāi)關(guān)功能輕松地將設(shè)計(jì)文件從? Light 切換到 ? Dark 模式。這也使庫(kù)更輕且更易于維護(hù)。

2）語(yǔ)義顏色已在我們的 iOS 和 Android 應(yīng)用程序上成功實(shí)現(xiàn)，我們現(xiàn)在正在努力在我們網(wǎng)絡(luò)平臺(tái)上使用相同的系統(tǒng)。我們很快就會(huì)有一個(gè)集中的配色方案來(lái)處理所有系統(tǒng)上的顏色。

總結(jié)

總結(jié)下今天學(xué)到的內(nèi)容：

1. 發(fā)現(xiàn)并準(zhǔn)確描述團(tuán)隊(duì)在使用顏色時(shí)遇到的問(wèn)題
2. 如何從提出設(shè)想，到以新的方式來(lái)定義顏色
3. 如何通過(guò)語(yǔ)義化顏色來(lái)使得大家更方便的使用顏色，我們也可以在自己的組件庫(kù)中多使用語(yǔ)義化的顏色來(lái)進(jìn)行命名管理，這樣團(tuán)隊(duì)協(xié)作才會(huì)更加高效。

（授權(quán)截圖）

 

作者：Fabien Gavinet，譯者：彩云Sky

原文鏈接：https://medium.com/getaround-eu/colors-that-make-sense-505d0f3509c1

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

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

蘭亭妙微(www.izc.net.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan