2022-6-23 博博
Hi,我是彩云。咱們平時(shí)在做 UI 組件庫的時(shí)候,會(huì)遇到一個(gè)問題,定義了很多顏色但在團(tuán)隊(duì)合作的時(shí)候,卻依然還是會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的喜好來配色,很難將顏色規(guī)范很好的統(tǒng)一起來。這其中有一個(gè)很嚴(yán)重的問題就是對(duì)于顏色的命名和管理不夠清晰,那么今天這篇文章通過一個(gè)國外大廠真實(shí)的顏色組件升級(jí)案例,希望能幫你解決這個(gè)難題。
我們花了幾個(gè)月的時(shí)間改進(jìn)了設(shè)計(jì)系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素:它們構(gòu)成視覺語言,幫助定義品牌,并被開發(fā)和設(shè)計(jì)師每天用在產(chǎn)品設(shè)計(jì)中。
但如果我們?cè)谑褂妙伾蠜]有明確的指導(dǎo)原則,顏色被團(tuán)隊(duì)中的設(shè)計(jì)師按喜好使用時(shí),將會(huì)導(dǎo)致產(chǎn)品看起來非?;靵y。
我們 APP 中的不一致例子
接下來我會(huì)告訴你,我們是如何做好顏色規(guī)范以及在整個(gè)項(xiàng)目中面臨的挑戰(zhàn),正如你將看到的,這個(gè)項(xiàng)目并不像看上去那么簡單:
1. 在設(shè)計(jì)方面
和許多設(shè)計(jì)團(tuán)隊(duì)一樣,我們使用 Figma 作為我們的主要設(shè)計(jì)工具。我們的顏色被放在“基礎(chǔ)”庫中,可以在其中找到我們?cè)诋a(chǎn)品中使用的所有常見樣式,例如字體樣式、顏色、圖標(biāo)等。這個(gè)庫提供了我們每天使用的專用系統(tǒng)庫(iOS、Android、Web、電子郵件)。
顏色名稱過去是基于它們的外觀。例如:紫色顏色是我們的主要顏色,而石墨色是基本文本的常規(guī)顏色。
2. 在技術(shù)方面
在我們的 APP 中,曾經(jīng)會(huì)用相同的系統(tǒng)來管理顏色。此外,還有一些語義顏色,但僅限于 iOS,開發(fā)用的也不多。
在使用這個(gè)系統(tǒng)時(shí),團(tuán)隊(duì)反復(fù)面臨同樣的問題:
讓我們?cè)囍页鑫覀兪侨绾蜗萑脒@種境地的?
1)沒有明確的顏色使用規(guī)范
所有設(shè)計(jì)師都使用相同的色板,但自 2019 年 Getaround 品牌重塑以來,除了引入不一致之外,沒有明確關(guān)于如何使用它們的規(guī)范,所以設(shè)計(jì)師在選擇顏色時(shí)迷失了方向。
然后他們將開始建立自己的參考資料,每個(gè)設(shè)計(jì)師都有不同的配色想法。
例如:設(shè)計(jì)師應(yīng)該在所有這些灰色陰影中為次級(jí)文本選擇哪種灰色?顏色命名在這里不是很有幫助
2)舊品牌的設(shè)計(jì)包袱
以前品牌的一些舊顏色仍在使用(按鈕上的藍(lán)色陰影,標(biāo)題……)。到現(xiàn)在也沒有真正的行動(dòng)計(jì)劃來迭代它們。
舊驅(qū)動(dòng)器品牌
在 2021 年初,我們有機(jī)會(huì)為我們的 iOS 和 Android APP 來制定長期的 UI 規(guī)劃。
我們問自己“5 年后我們的 APP 會(huì)是什么樣的?”。我們會(huì)回顧,Getaround 品牌是如何成為我們視覺方法中心的。
以上是我們品牌和設(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ì)師都可以依賴易于理解和使用色彩系統(tǒng)?擁有一個(gè)簡單系統(tǒng)將加快使用速度。
2)顏色能通過可用性標(biāo)準(zhǔn)
我們?nèi)绾未_保從一開始就設(shè)計(jì)出易于使用的顏色?
3)易于維護(hù)并符合未來趨勢
我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護(hù)并符合現(xiàn)在和未來的行業(yè)標(biāo)準(zhǔn)(例如:暗模式)
在我們的探索階段,在 Figma 的共享環(huán)境中工作促使我們保存和記錄我們所做的設(shè)計(jì)決策。就像我們應(yīng)該如何命名我們的強(qiáng)調(diào)色:(主要?強(qiáng)調(diào)?)
我們還測試了 APP 界面在黑暗模式下的外觀,以及如何正確支持這一點(diǎn)。我們應(yīng)該創(chuàng)建一個(gè)單獨(dú)的調(diào)色板還是為每個(gè)組件都創(chuàng)建一個(gè)深色版本?我們開始與開發(fā)討論這個(gè)問題,以了解他們有什么解決方案來處理這些問題。
語義顏色的概念很快就被開發(fā)人員提出來,因?yàn)樗麄冎啦⑶液芎玫厥褂昧诉@個(gè)概念。但對(duì)于設(shè)計(jì)師來說,又要如何準(zhǔn)確理解呢?
1)什么是語義顏色?
語義指的是根據(jù)顏色的使用方式而不是色調(diào)來命名顏色的方法。
例如,你可以將顏色命名為“成功”或“積極”,因?yàn)樗傅氖呛x,而不是“綠色”或“翡翠綠”。
甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來命名顏色,例如背景顏色、按鈕背景顏色、文本顏色、圖標(biāo)顏色等……
2)從基于外觀的配色方案到基于語義的配色方案
語義顏色并不新鮮,越來越多的產(chǎn)品開始采用這種方式來定義顏色。我們可以從下面一些大廠的顏色規(guī)范來學(xué)習(xí)
google: https://material.io/design/color/the-color-system.html#color-theme-creation
Apple: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
Shopify: https://polaris.shopify.com/design/colors#navigation
Asana: https://asana.com/brand
顯然,這種顏色系統(tǒng)有很多優(yōu)點(diǎn)。因此,現(xiàn)在讓我解釋一下我們?nèi)绾卧趯?shí)踐中將這個(gè)概念應(yīng)用到我們的產(chǎn)品中。
3)深入研究語義顏色
我們的新顏色系統(tǒng)由兩部分組成:
基礎(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)色板
語義顏色,語義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的,命名不再是指顏色的“外觀”(洋紅色、棕色、綠色……),而是指UI 元素它們被應(yīng)用于(文本、圖標(biāo)、按鈕、背景……)以及該元素的狀態(tài)(活動(dòng)、非活動(dòng)、成功……)。
請(qǐng)參閱此處的命名法和一些示例:
語義顏色結(jié)構(gòu)和示例
這意味著來自基礎(chǔ)調(diào)色板的顏色可以用于多種語義顏色:
這就是我們根據(jù)這個(gè)新原則重新調(diào)整顏色命名的方式:
我們通過設(shè)計(jì)師和開發(fā)進(jìn)行了內(nèi)部用戶測試,以確定命名語義顏色的最佳方式。
我們嘗試了很多不同的命名方法,發(fā)現(xiàn)過于詳細(xì)的命名系統(tǒng)對(duì)于我們的團(tuán)隊(duì)和產(chǎn)品的規(guī)模來說維護(hù)和使用太復(fù)雜了。我們決定做一些簡單的維護(hù),同時(shí)在命名方面有足夠的延展性。
1)語義色彩嵌入設(shè)計(jì)原則
語義顏色側(cè)重于顏色的用途。它消除了設(shè)計(jì)師和開發(fā)對(duì)使用什么顏色的盲目猜測,因?yàn)橐曈X語言直接傳達(dá)了設(shè)計(jì)決策。
例如:在這里,顏色命名使設(shè)計(jì)師更容易做出正確的選擇。在我們的原則中, *Accent* state 用于交互元素。
2)解鎖黑暗模式
語義顏色可以適應(yīng)不同的主題。語義顏色的名稱始終相同,但它的外觀可能會(huì)根據(jù)所選模式而改變。例如,語義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶選擇的模式,將自動(dòng)顯示正確的顏色。這對(duì)我們的設(shè)計(jì)系統(tǒng)來說是一個(gè)真正的游戲規(guī)則改變者,因?yàn)樗鼘⑹顾用嫦蛭磥怼?
明暗模式下的語義顏色 Primary.Background
3)語義顏色高效靈活
如果我們將來要更新顏色,使用語義顏色也會(huì)變得更容易。假設(shè)我們想要將我們的主色更改為藍(lán)色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍(lán)色”。與該顏色相關(guān)的所有語義顏色也將神奇地更新。
另一種情況可能是更新特定 UI 元素的顏色,例如按鈕,而無需觸摸使用紫色顏色的其他元素。在這種情況下,我們只需要更新 ButtonBackground.Primary 顏色,非常簡單。
如果沒有該系統(tǒng),更新顏色將需要經(jīng)過大量 QA 以確保將更改應(yīng)用到任何地方。
4)顏色組合指南
這個(gè)系統(tǒng)似乎很容易使用,但設(shè)計(jì)師仍然有一些問題:
為了幫助設(shè)計(jì)師選擇顏色,我們創(chuàng)建了一個(gè)交互式指南,列出了所有可能的顏色組合。
我們?cè)?figma 原型中創(chuàng)建了這個(gè)指導(dǎo)原則,每次更改設(shè)計(jì)系統(tǒng)顏色時(shí)都會(huì)更新該規(guī)范。它突出了允許的語義顏色組合,以最大限度地保持一致性。
Figma 中內(nèi)置的語義色彩交互指南
采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化:
1)我們從“Foundation”庫中提取顏色,并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開關(guān)功能輕松地將設(shè)計(jì)文件從 Light 切換到 Dark 模式。這也使庫更輕且更易于維護(hù)。
2)語義顏色已在我們的 iOS 和 Android 應(yīng)用程序上成功實(shí)現(xiàn),我們現(xiàn)在正在努力在我們網(wǎng)絡(luò)平臺(tái)上使用相同的系統(tǒng)。我們很快就會(huì)有一個(gè)集中的配色方案來處理所有系統(tǒng)上的顏色。
總結(jié)下今天學(xué)到的內(nèi)容:
1)發(fā)現(xiàn)并準(zhǔn)確描述團(tuán)隊(duì)在使用顏色時(shí)遇到的問題
2)如何從提出設(shè)想,到以新的方式來定義顏色
3)如何通過語義化顏色來使得大家更方便的使用顏色,我們也可以在自己的組件庫中多使用語義化的顏色來進(jìn)行命名管理,這樣團(tuán)隊(duì)協(xié)作才會(huì)更加高效。
轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com