你是否常常因?yàn)槿绾闻渖m結(jié)？

你是否覺(jué)得自己調(diào)配的色彩是最好的？

你是否也曾為界面色彩的微妙差異而苦惱？

一套優(yōu)秀的設(shè)計(jì)系統(tǒng)構(gòu)建以高效率、一致性為出發(fā)點(diǎn)，但唯獨(dú)色彩系統(tǒng)的設(shè)計(jì)長(zhǎng)期以來(lái)卻像是一場(chǎng)“行為藝術(shù)”，一百個(gè)設(shè)計(jì)師基于自己的偏好和理解可以創(chuàng)造出一百個(gè)截然不同的方案。隨著無(wú)障礙對(duì)比度標(biāo)準(zhǔn)的日益普及和相關(guān)設(shè)計(jì)工具的層出不窮，我們也能夠利用一些輔助工具引入到設(shè)計(jì)流程中，盡可能減少設(shè)計(jì)師的主觀影響，實(shí)踐更加簡(jiǎn)潔、純粹和高效的構(gòu)建方式，由此矯正“行為藝術(shù)”。

在保證產(chǎn)品色彩可用性、一致性的基礎(chǔ)上，為了提效率、低成本地解決現(xiàn)有色彩問(wèn)題，我們?cè)诎岛谀Ｊ缴暹m配和AI生成色彩方面進(jìn)行了探索，希望為其他產(chǎn)品的色彩設(shè)計(jì)也提供思路。

一、AI 輔助決策：產(chǎn)品交易色的探索

1. 為什么使用 AI ？

1. AI可以在幾秒鐘內(nèi)生成多個(gè)配色方案或快速分析數(shù)據(jù)（包括顏色趨勢(shì)等）從而迅速生成符合要求的色板，而手動(dòng)選擇、調(diào)整和搭配顏色可能需要花費(fèi)數(shù)小時(shí)甚至數(shù)天。
2. 在需要保持項(xiàng)目視覺(jué)一致性的情況下，AI可以盡可能確保每次生成的色板都符合既定的色彩規(guī)范和標(biāo)準(zhǔn)，減少人為誤差。
3. 已有一些成功的商業(yè)產(chǎn)品和平臺(tái)，如Adobe Color等，提供了基于AI的色板生成工具，證明了該技術(shù)在商業(yè)上的可行性和潛力。

或許有人有提出疑問(wèn)，AI 生成的顏色真的可用嗎？亦或是使用自動(dòng)生成配色難道不是對(duì)設(shè)計(jì)的不重視嗎？到底是工具更專業(yè)還是人不夠?qū)I(yè)？在我的理解看來(lái)，AI 工具在這里的作用并非直接提供一套詳盡無(wú)疑的色彩體系，而是輸出一些可以借鑒參考的方案。即便你不是垂直專業(yè)的品牌設(shè)計(jì)師、亦或是美學(xué)造詣尚淺，也能輕松將這些建議中的色彩方案融入項(xiàng)目中，先行試探其適配度，隨后再根據(jù)實(shí)際情況手動(dòng)微調(diào)/重新生成，最后基于色彩感情、業(yè)務(wù)語(yǔ)義等靈活調(diào)整出最合適的色彩。如此一來(lái)，在保證可用性和統(tǒng)一性的基礎(chǔ)上也提高了效率。

?AI 生成

1. 根據(jù)實(shí)際情況微調(diào)/重新生成
2. 基于色彩情感、業(yè)務(wù)語(yǔ)義篩選/調(diào)整出最合適的 Color

（實(shí)際情況包括但不限于實(shí)際應(yīng)用在頁(yè)面上的WCAG 2.1 等級(jí)AA、品牌一致性）

2. 工具選擇????????

ChatGPT

網(wǎng)址：https://chatgpt.com/

ChatGPT 是人工智能技術(shù)驅(qū)動(dòng)的自然語(yǔ)言處理工具，它能夠通過(guò)學(xué)習(xí)和理解人類的語(yǔ)言來(lái)進(jìn)行對(duì)話，還能根據(jù)聊天的上下文進(jìn)行互動(dòng)，真正像人類一樣來(lái)聊天交流，甚至能完成撰寫郵件、視頻腳本、文案、翻譯、代碼等任務(wù)。支持自然語(yǔ)言交互，可以直接描述需求，非專業(yè)人士也可以使用。

雖然 ChatGPT 本身不是專門用于生成色彩的 AI 工具，但基于其自然語(yǔ)言交互能力、創(chuàng)意激發(fā)潛力以及其他技術(shù)插件的融合能力，設(shè)計(jì)師和普通用戶在尋求AI輔助的配色解決方案的道路上，ChatGPT 提供了新的可能性。

ChatGPT 在解決配色方案道路上提供新的可能

AI Colors

網(wǎng)址：https://aicolors.co

AI Colors 是一款基于人工智能技術(shù)的在線免費(fèi)調(diào)色板生成器；它能夠幫助用戶通過(guò)輸入關(guān)鍵詞或文字描述，快速生成獨(dú)特且匹配的配色方案。這款工具集瀏覽、編輯、可視化以及生成獨(dú)特調(diào)色板于一體，支持中文關(guān)鍵詞輸入，并提供RGB、HEX和HSL等多種顏色代碼，方便用戶在不同平臺(tái)和設(shè)備上使用。

AI Colors 也是基于 GPT-3.5 創(chuàng)建的智能調(diào)色板生成工具，和 GPT 一樣擁有強(qiáng)大的自然語(yǔ)言處理能力和深度學(xué)習(xí)算法支持，它還提供實(shí)時(shí)預(yù)覽功能，且可預(yù)覽應(yīng)用場(chǎng)景更為廣泛，可以給更多需求場(chǎng)景的用戶提供參考。

AI Colors 在線上被用戶推薦?

Huemint

網(wǎng)址：https://huemint.com/

Huemint 是一款基于人工智能的調(diào)色方案生成工具，它利用強(qiáng)大的AI技術(shù)和算法支持深度學(xué)習(xí)和機(jī)器視覺(jué)技術(shù)，能夠深入理解用戶輸入的參考值或圖片，生成符合設(shè)計(jì)理念的配色方案。內(nèi)置多種AI生成模型，包括Transformer和Diffusion Model，提供更加優(yōu)質(zhì)的配色方案。

Huemint 的用戶推薦/接受程度可觀?

3. 案例分析

AI 生成 ?? 根據(jù)實(shí)際情況微調(diào)/重新生成

分別使用 ChatGPT 、AI Colors 和 Huemint ，基于已有色板的1個(gè)或多個(gè)顏色生成配色方案，多次嘗試生成配色的過(guò)程中初步篩選一些顏色，決出幾個(gè)適配的橙色再做進(jìn)一步選擇。最終分別篩選出#FF8C42、#FFA500、#F0694B。

基于色彩情感、業(yè)務(wù)語(yǔ)義篩選/調(diào)整出最合適的 Color

三色放在界面上肉眼看起來(lái)還行的情況下，結(jié)合色彩情感、業(yè)務(wù)語(yǔ)義等對(duì)比調(diào)整之后，最終選定交易色。

選擇的顏色除了需要考慮在不同場(chǎng)景頁(yè)面上都能保持良好的視覺(jué)效果外，通過(guò)觀察用戶對(duì)顏色的反饋，可以更準(zhǔn)確的判斷所選顏色是否為最佳選擇。

二、靈活借鑒大廠經(jīng)驗(yàn)，快速適配深色模式

1. 大廠調(diào)研

iOS

iOS 深色模式中界面的層級(jí)關(guān)系遵循：離用戶更近的部分顏色會(huì)更亮一些。背景色會(huì)隨著界面層級(jí)變化，而變成提亮色，從 HSB 角度看，即通過(guò)調(diào)整顏色的明度、飽和度，來(lái)區(qū)分視覺(jué)層級(jí)。iOS 通過(guò)這種背景色統(tǒng)一升級(jí)的處理方式來(lái)達(dá)到多任務(wù)窗口疊加的視覺(jué)隔離效果，但相對(duì)的開(kāi)發(fā)成本也較高。

iOS 系統(tǒng)彩色方案是在淺色色板基礎(chǔ)上進(jìn)行感官微調(diào)，單獨(dú)訂制。

AndROId

Android 把頁(yè)面分為從“0dp”到“24dp”的 10 個(gè)不同高度的顯示層級(jí)，通過(guò)在同一背景色上疊加不同透明度的白色來(lái)區(qū)分顯示層級(jí)。相對(duì)于 iOS 的整體背景色升級(jí)，Android 的背景色分級(jí)邏輯則更加的簡(jiǎn)單易用。

Android 官方建議在深色主題中使用較淺的色調(diào)（200-50），而不使用默認(rèn)的主題顏色（飽和色調(diào)范圍為 900-500）。

Ant Design

Ant Design 在實(shí)際應(yīng)用中，可根據(jù)自身業(yè)務(wù)的需求，從中性色板中直接選用或是依據(jù)透明度的思路自定義出合適的中性色彩。

對(duì)于暗黑模式的色板，Ant Design借助對(duì)比度正/負(fù)極性的概念對(duì)透明度進(jìn)行轉(zhuǎn)換；通過(guò)對(duì)比一套顏色的正負(fù)極性變化趨勢(shì)來(lái)找到轉(zhuǎn)換規(guī)律。

2. 實(shí)踐探索

定義背景色

1. 確保文字清晰可見(jiàn)
2. 構(gòu)建深色色板
3. 在不同環(huán)境/場(chǎng)景測(cè)試界面

① 定義背景色

探索

深色模式并不是簡(jiǎn)單的把整個(gè)界面反色了那么簡(jiǎn)單，還是要考慮到所有用戶的需求。臨界作為創(chuàng)作社區(qū)類 App 用戶在夜間使用的場(chǎng)景有一定的占比。深色模式不僅要在日間滿足使用需求，還要保證夜間的視覺(jué)刺激相對(duì)柔和。所以，排除對(duì)比度極高的純黑背景。

臨界的圖文較多，無(wú)色相背景能夠最大限度地減少對(duì)視覺(jué)的干擾，使觀眾或讀者更容易將注意力集中在內(nèi)容本身上，否則過(guò)多的色彩可能會(huì)分散注意力，影響信息的傳達(dá)。所以，排除添加色相的背景。

最終確定為下圖中框選的方案。

重構(gòu)

接下來(lái)需要對(duì)這稿配色的選用進(jìn)行細(xì)致的打磨。

臨界淺色模式主要是遵循Android規(guī)范中通過(guò)控制Z軸高度和陰影來(lái)區(qū)分層級(jí)，同時(shí)為了保證深色與淺色的信息層級(jí)一致，便于用戶操作，采用在純黑（#000000）上疊加有透明度的白色作為深色模式的基礎(chǔ)背景色，通過(guò)在同一純黑上疊加不同透明度的白色來(lái)區(qū)分顯示層級(jí)。

最終方案疊加白色的透明度方面進(jìn)行了統(tǒng)一，對(duì)透明度的遞增梯度統(tǒng)一為 4，與 white_01 ～ white_04 的透明度白色保持一致。對(duì)比初選方案在視覺(jué)上變動(dòng)也很微弱。

② 確保文字清晰可見(jiàn)

對(duì)新的背景色與一二級(jí)文字色進(jìn)行檢驗(yàn)，看看是否滿足 WCAG 無(wú)障礙閱讀的 AA 標(biāo)準(zhǔn)，也就是常規(guī)尺寸文本對(duì)比度高于 4.5 : 1

新背景色與一二級(jí)文字色均滿足 WCAG 的 AA 標(biāo)準(zhǔn)，則當(dāng)前文字色與新背景色相適配；當(dāng)前文字色采用了降低不透明度的方式來(lái)進(jìn)行分級(jí)，同樣選取 white 色板中的顏色；由此，當(dāng)前文字色可不做改動(dòng)。

③ 構(gòu)建深色色板

采用大廠沉淀方法論?????

基于上文對(duì)深色模式適配思路的調(diào)研，首先排除 iOS 單獨(dú)調(diào)配時(shí)間成本較高的方法；其次，在套用 Android 的思路時(shí)，發(fā)現(xiàn)這套方法會(huì)使顏色明顯柔和化，完全執(zhí)行就容易導(dǎo)致產(chǎn)品在深色模式下產(chǎn)生風(fēng)格偏移，出現(xiàn)不符合品牌設(shè)計(jì)語(yǔ)言的情況。so 采用 Ant Design 的方法論，結(jié)合透明度規(guī)則處理，盡可能保持品牌風(fēng)格統(tǒng)一。

以 success color 色板應(yīng)用為例???

確定暗黑模式下的標(biāo)準(zhǔn)色????

由于 Apple 官方對(duì)于顏色給出的對(duì)比度建議是7:1，對(duì)根據(jù) Ant Design 的方法論生成的色板中，對(duì)標(biāo)準(zhǔn)色與背景色進(jìn)行檢驗(yàn)，發(fā)現(xiàn)部分色彩的對(duì)比度沒(méi)有達(dá)到約 7:1 ，且實(shí)際運(yùn)用在頁(yè)面上顯示偏暗；后微調(diào)色彩，基于對(duì)比度約 7:1 的基礎(chǔ)上，經(jīng)過(guò)色彩校正，得到暗黑模式下的標(biāo)準(zhǔn)色。

擴(kuò)展同色色階

做梯度色板的方法一般是透明疊色法、貝塞爾曲線法等，現(xiàn)如今各類色階制作插件或軟件層出不窮，利用插件生成梯度色板更準(zhǔn)確便捷，也不失為一種提高效率的好路子。對(duì)受歡迎程度較高的幾個(gè)插件進(jìn)行了嘗試，最終選擇使用 Supa Palette 來(lái)制作色階。

結(jié)語(yǔ)?

構(gòu)建色彩體系之初，我們常憑直覺(jué)迅速行動(dòng)，任由主觀情感引領(lǐng)色彩選擇。初期或許順暢無(wú)阻，但隨著產(chǎn)品規(guī)模擴(kuò)張與演進(jìn)，色彩管理漸顯紛亂。如今 AI 在色彩設(shè)計(jì)領(lǐng)域的潛力無(wú)限，它超越了技術(shù)的簡(jiǎn)單優(yōu)化與拓展，正深刻重塑色彩管理的精細(xì)度與設(shè)計(jì)流程的智能化。靈活掌握并運(yùn)用現(xiàn)有技術(shù)與工具，讓色彩真正服務(wù)于設(shè)計(jì)，簡(jiǎn)化團(tuán)隊(duì)協(xié)作流程，無(wú)疑將為設(shè)計(jì)師與用戶共同開(kāi)啟更加愉悅的體驗(yàn)之旅～

作者：Echo Design