四步建立 · 系統級色彩體系
色彩體系的推導其實有很多文章有詳細的介紹了,這一篇主要粗淺的梳理了整體流程經驗,補充一下技術方法與色彩模型的差異。
✦ 前言:
本文粗淺闡述色板生成、檢驗與應用的流程方法,包括主流的基準色選取、演算方法、補充色彩空間底層差異、以及 Tokens結構。好了,那就開始吧~
✦ 01.取色 ✦
主色:從產品或品牌主色開始
注:以個人專案主色為案例,前期產品色是基於HSB色彩模型選取的主色
配色:品牌/產品所要傳遞的調性
以拾取24色為例:H 360/24=15°遞進,Brand Blue H218°。
配色原則方法:1、基於品牌傳遞調性;2、基於鄰近色、對比色、互補色。
配色種類:自定義(6、8、12、16...)
·
檢驗:主色保持視覺感官一致
保持視覺感官一致,適宜長時間瀏覽閱讀。矯正飽和度S與亮度B,HSB(brightness)的亮度一致不能保證視覺感知一致,需引入Photoshop影象灰度模式或者Lab色彩空間下的亮度L(Lightness)來檢驗。在保證主色色彩主觀感受舒適下,以品牌色亮度為基準,亮度過渡儘量平緩,矯正過於跳躍的色彩主色,才能衍生出接近視覺感官一致的全色系色板。
·
✦ 02.延展 ✦
演算1.0:透明疊色
操作性快捷,色彩過渡平均。假設不以純白純黑作為起點與終點,就需要確定最小起點值95%(自定義),確定11色(自定義),白色步幅為n=5(自定義),黑色步幅為n=5(自定義),得出95%/n=19%。
演算2.0: 等序差值
操作性容易,有規律推算S值與B值。同樣假設不以純白純黑作為起點與終點,就需要確定最小起點Smin=5%(自定義);Smax=100%(自定義);Bmax=100%(自定義);Bmin=20%(自定義),淺色步幅為n=5(自定義),深色步幅為n=5(自定義)。如果把調色盤看成是一個二維座標軸,我們有主色座標、深色座標與淺色座標,三個座標點之間進行均值計算,一次衍生步幅座標點。
通過此規律,那麼就可以利用Numbers表格搭建簡單演算工具,依靠公式修改基準色S值與B值,演算延展出完整的深淺色板。
演算3.0:曲線擬合
依賴曲線函式,多種過渡變化。色彩過渡緩和在直線的基礎之上,引入線段曲率與點速度,也可以使用常用的曲線函式:EaseIn;EaseOut;EaseInOut等。曲線色彩梯度自行推導難度相對較大,需要依賴工具生成。
✦ 03.檢驗 ✦
· 檢驗色板:視覺感官的一致性亮度
當然除了亮度檢驗,還需要做WCAG 2.1標準下的對比度檢驗。
相比於直線生成的色板,曲線函式的優勢能生成亮度一致性更接近的色板,但是仍然無法完全解決這個問題,那麼是不是問題出在色彩模型下呢?
兩類色彩模型的底層差異
追求亮度一致的視覺感知體驗,目前在軟體層面涉及到色彩部分,幾乎都是以RGB或者RGB的色彩模型衍生出來的色彩空間。RGB的原理髮光元件通過三色光疊加,是一種基於計算機顯示技術發展而來的色彩模型。
其實對發光元件而言的亮度與人眼感知的亮度是存在非常大的差異。那麼基於人眼測定的色彩模型就有像Lab、HCL以及最新的谷歌HCT,常用的Photoshop影象灰度模式與Lab中的L都是基於人眼測定的亮度Lightness通道。
下圖可以直觀感受基於兩種色彩模型差異,雖然都是相同的亮度Lightness,但是視覺感官體驗上的舒適性差異明顯。
在這裡補充色彩模型差異,主要原因是軟體產品服務物件是人本身,所選用色彩模型應儘量貼近人眼感知層面的色彩模型。基於HSL、HSB生成的色彩,同樣可以通過換算關係,轉換成Lab、HCL,但是由於色域範圍不一致,色彩會存在不相容的情況。
換算關係:sRGB(HSL/HSB) → linearRGB → CIEXyz → CIELab → CIELch, 在 W3C(15. Sample code for color conversions)文件中有給出具體轉換公式程式碼。
·
✦ 04.應用 ✦
來源參考:
使用 Chroma.js 掌握多色調色階 http://www.vis4.net/blog/2013/09/mastering-multi-hued-color-scales/
Re-approaching Color http://design.lyft.com/re-approaching-color-9e604ba22c88
Designing Systematic Colors http://uxplanet.org/designing-systematic-colors-b5d2605b15c
關於 HCL 顏色的一些筆記 http://segmentfault.com/a/1190000023056925
產品配色 2.0:使用 HCL 色彩空間替代 HSL 生成配色 http://jessieji.com/2020/hcl-instead-of-hsl
The Science of Color & Design http://material.io/blog/science-of-color-design
Design tokens http://m3.material.io/foundations/design-tokens/overview
W3C http://www.w3.org/TR/css-color-4/#color-conversion-code
- 視覺化大屏業務之設計方案制定(下)
- 視覺化大屏業務之「需求理解」(上)
- 如何解析產品原型
- 大資料掃盲
- 京東行雲3.0|B端產研協作工具體驗升級的思考與實踐(二)
- 京東電器618(資料篇)——3C DESIGN
- 京東電器618 JOYIP(IP2.0)- 3C DESIGN
- 京東電器 618(品牌心智篇)——3C DESIGN
- 京東電器 618(視覺篇)- 3C DESIGN
- 主流移動端元件庫的對比和分析
- 乘風出海——因地制宜的設計心得
- 插畫的發展及在UI設計中的應用
- 玩轉iconfont-RELAAAY 4.0升級覆盤圖示篇
- 京東藍鯨徵信品牌及體驗升級
- 數字孿生 萬物可視-地圖在視覺化大屏設計中的實踐與運用(3D篇)
- 設計進階技巧,如何打磨視覺設計細節
- 數字孿生 萬物可視-地圖在視覺化大屏設計中的實踐與運用(2.5D篇)
- 解密城市作業系統視覺升級
- 四步建立 · 系統級色彩體系
- 關於體驗管理的幾點思考