亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

2022-12-23 09:12:51

色彩體系的推導其實有很多文章有詳細的介紹了,這一篇主要粗淺的梳理了整體流程經(jīng)驗,補充一下技術方法與色彩模型的差異。

前言:

本文粗淺闡述色板生成、檢驗與應用的流程方法,包括主流的基準色選取、演算方法、補充色彩空間底層差異、以及 Tokens 結構。好了,那就開始吧~

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

一、取色

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

1. 主色:從產品或品牌主色開始

注:以個人項目主色為案例,前期產品色是基于 HSB 色彩模型選取的主色

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

配色:品牌/產品所要傳遞的調性

以拾取 24 色為例:H 360/24=15°遞進,Brand Blue H218°。

配色原則方法:1、基于品牌傳遞調性;2、基于鄰近色、對比色、互補色。

配色種類:自定義(6、8、12、16...)

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

2. 檢驗:主色保持視覺感官一致

保持視覺感官一致,適宜長時間瀏覽閱讀。矯正飽和度 S 與亮度 B,HSB(brightness)的亮度一致不能保證視覺感知一致,需引入 Photoshop 圖像灰度模式或者 Lab 色彩空間下的亮度 L(Lightness)來檢驗。在保證主色色彩主觀感受舒適下,以品牌色亮度為基準,亮度過渡盡量平緩,矯正過于跳躍的色彩主色,才能衍生出接近視覺感官一致的全色系色板。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

二、延展

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

演算 1.0:透明疊色

操作性快捷,色彩過渡平均。假設不以純白純黑作為起點與終點,就需要確定最小起點值 95%(自定義),確定 11 色(自定義),白色步幅為 n=5(自定義),黑色步幅為 n=5(自定義),得出 95%/n=19%。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

演算 2.0:等序差值

操作性容易,有規(guī)律推算 S 值與 B 值。同樣假設不以純白純黑作為起點與終點,就需要確定最小起點 Smin=5%(自定義);Smax=100%(自定義);Bmax=100%(自定義);Bmin=20%(自定義),淺色步幅為 n=5(自定義),深色步幅為 n=5(自定義)。如果把調色板看成是一個二維坐標軸,我們有主色坐標、深色坐標與淺色坐標,三個坐標點之間進行均值計算,一次衍生步幅坐標點。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

通過此規(guī)律,那么就可以利用 Numbers 表格搭建簡單演算工具,依靠公式修改基準色 S 值與 B 值,演算延展出完整的深淺色板。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

演算 3.0:曲線擬合

依賴曲線函數(shù),多種過渡變化。色彩過渡緩和在直線的基礎之上,引入線段曲率與點速度,也可以使用常用的曲線函數(shù):EaseIn;EaSEOut;EaseInOut 等。曲線色彩梯度自行推導難度相對較大,需要依賴工具生成。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

三、檢驗

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

1. 檢驗色板:視覺感官的一致性亮度

當然除了亮度檢驗,還需要做 WCAG 2.1 標準下的對比度檢驗。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

相比于直線生成的色板,曲線函數(shù)的優(yōu)勢能生成亮度一致性更接近的色板,但是仍然無法完全解決這個問題,那么是不是問題出在色彩模型下呢?

2. 兩類色彩模型的底層差異

追求亮度一致的視覺感知體驗,目前在軟件層面涉及到色彩部分,幾乎都是以 RGB 或者 RGB 的色彩模型衍生出來的色彩空間。RGB 的原理發(fā)光元件通過三色光疊加,是一種基于計算機顯示技術發(fā)展而來的色彩模型。

其實對發(fā)光元件而言的亮度與人眼感知的亮度是存在非常大的差異。那么基于人眼測定的色彩模型就有像 Lab、HCL 以及最新的谷歌 HCT,常用的 Photoshop 圖像灰度模式與 Lab 中的 L 都是基于人眼測定的亮度 Lightness 通道。

下圖可以直觀感受基于兩種色彩模型差異,雖然都是相同的亮度 Lightness,但是視覺感官體驗上的舒適性差異明顯。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

在這里補充色彩模型差異,主要原因是軟件產品服務對象是人本身,所選用色彩模型應盡量貼近人眼感知層面的色彩模型?;?HSL、HSB 生成的色彩,同樣可以通過換算關系,轉換成 Lab、HCL,但是由于色域范圍不一致,色彩會存在不兼容的情況。

換算關系:sRGB(HSL/HSB) → linearRGB → CIEXyz → CIELab → CIELch, 在 W3C(15. Sample code for color conversions)文檔中有給出具體轉換公式代碼。

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

四、應用

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!

工具資源

  1. 對比度檢測 Color.review WCAG2.1: https://color.review/
  2. 透明度疊加工具 Tint and Shade Generator: https://maketintsandshades.com/
  3. 直線等分亮度工具 chroma.js palette helper: https://gka.github.io/palettes
  4. 色彩曲線工具 ColorBox by Lyft Design(搭梯子使用): https://lyft-colorbox.herokuapp.com/

色板生成工具

基于 HSL/HSB

  1. Eva Design System: Deep learning color generator: https://colors.eva.design/
  2. ColorBox: https://colorbox.io/

基于 HCL

  1. Atmos - Create UI color palettes with ease: https://app.atmos.style/
  2. Colorpicker for data: http://tristen.ca/hcl-picker

基于 HCT

  1. Material Theme Builder: https://material-foundation.github.io
  2. Figma 插件(Color Space: First plugin with HCT): https://www.figma.com

來源參考:

  1. 使用 Chroma.js 掌握多色調色階: https://www.vis4.net/blog
  2. Re-approaching Color: https://design.lyft.com/re-approaching-color
  3. Designing Systematic Colors: https://uxplanet.org/designing-systematic-colors
  4. 關于 HCL 顏色的一些筆記: https://segmentfault.com/a/1190000023056925
  5. 產品配色 2.0:使用 HCL 色彩空間替代 HSL 生成配色: https://jessieji.com/2020/hcl-instead-of-hsl
  6. The Science of Color & Design: https://material.io/blog/science-of-color-design
  7. Design tokens: https://m3.material.io/foundations/design-tokens/overview
  8. W3C: https://www.w3.org/TR/css-color-4/#color-conversion-code

作者:JellyDesign

想了解更多網(wǎng)站技術的內容,請訪問:網(wǎng)站技術

本文來源:http://www.sonygallery.com.cn/seodongtai/19111.html

免責聲明:部分文章信息來源于網(wǎng)絡以及網(wǎng)友投稿,本網(wǎng)站只負責對文章進行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內容的真實性,不承擔任何法律責任。
用我們的專業(yè),做您滿意的SEO+高端網(wǎng)站建設服務商!