如何4步建立系统级色彩体系?来看京东高手的方法。

色彩体系的推导其实有很多文章有详细的介绍了,这一篇主要粗浅的梳理了整体流程经验,补充一下技术方法与色彩模型的差异。

前言:

本文粗浅阐述色板生成、检验与应用的流程方法,包括主流的基准色选取、演算方法、补充色彩空间底层差异、以及 Tokens 结构。好了,那就开始吧~

如何4步建立系统级色彩体系?来看京东高手的方法!

一、取色

如何4步建立系统级色彩体系?来看京东高手的方法!

1. 主色:从产品或品牌主色开始

注:以个人项目主色为案例,前期产品色是基于 HSB 色彩模型选取的主色

如何4步建立系统级色彩体系?来看京东高手的方法!

配色:品牌/产品所要传递的调性

以拾取 24 色为例:H 360/24=15°递进,Brand Blue H218°。

配色原则方法:1、基于品牌传递调性;2、基于邻近色、对比色、互补色。

配色种类:自定义(6、8、12、16...)

如何4步建立系统级色彩体系?来看京东高手的方法!

2. 检验:主色保持视觉感官一致

保持视觉感官一致,适宜长时间浏览阅读。矫正饱和度 S 与亮度 B,HSB(brightness)的亮度一致不能保证视觉感知一致,需引入
Photoshop 图像灰度模式或者 Lab 色彩空间下的亮度
L(Lightness)来检验。在保证主色色彩主观感受舒适下,以品牌色亮度为基准,亮度过渡尽量平缓,矫正过于跳跃的色彩主色,才能衍生出接近视觉感官一致的全色系色板。

如何4步建立系统级色彩体系?来看京东高手的方法!

二、延展

如何4步建立系统级色彩体系?来看京东高手的方法!

演算 1.0:透明叠色

操作性快捷,色彩过渡平均。假设不以纯白纯黑作为起点与终点,就需要确定最小起点值 95%(自定义),确定 11 色(自定义),白色步幅为 n=5(自定义),黑色步幅为 n=5(自定义),得出 95%/n=19%。

如何4步建立系统级色彩体系?来看京东高手的方法!

演算 2.0:等序差值

操作性容易,有规律推算 S 值与 B 值。同样假设不以纯白纯黑作为起点与终点,就需要确定最小起点
Smin=5%(自定义);Smax=100%(自定义);Bmax=100%(自定义);Bmin=20%(自定义),浅色步幅为
n=5(自定义),深色步幅为
n=5(自定义)。如果把调色板看成是一个二维坐标轴,我们有主色坐标、深色坐标与浅色坐标,三个坐标点之间进行均值计算,一次衍生步幅坐标点。

如何4步建立系统级色彩体系?来看京东高手的方法!

通过此规律,那么就可以利用 Numbers 表格搭建简单演算工具,依靠公式修改基准色 S 值与 B 值,演算延展出完整的深浅色板。

如何4步建立系统级色彩体系?来看京东高手的方法!

如何4步建立系统级色彩体系?来看京东高手的方法!

演算 3.0:曲线拟合

依赖曲线函数,多种过渡变化。色彩过渡缓和在直线的基础之上,引入线段曲率与点速度,也可以使用常用的曲线函数:EaseIn;EaSEOut;EaseInOut 等。曲线色彩梯度自行推导难度相对较大,需要依赖工具生成。

如何4步建立系统级色彩体系?来看京东高手的方法!

三、检验

如何4步建立系统级色彩体系?来看京东高手的方法!

1. 检验色板:视觉感官的一致性亮度

当然除了亮度检验,还需要做 WCAG 2.1 标准下的对比度检验。

如何4步建立系统级色彩体系?来看京东高手的方法!

相比于直线生成的色板,曲线函数的优势能生成亮度一致性更接近的色板,但是仍然无法完全解决这个问题,那么是不是问题出在色彩模型下呢?

2. 两类色彩模型的底层差异

追求亮度一致的视觉感知体验,目前在软件层面涉及到色彩部分,几乎都是以 RGB 或者 RGB 的色彩模型衍生出来的色彩空间。RGB 的原理发光元件通过三色光叠加,是一种基于计算机显示技术发展而来的色彩模型。

其实对发光元件而言的亮度与人眼感知的亮度是存在非常大的差异。那么基于人眼测定的色彩模型就有像 Lab、HCL 以及最新的谷歌 HCT,常用的 Photoshop 图像灰度模式与 Lab 中的 L 都是基于人眼测定的亮度 Lightness 通道。

下图可以直观感受基于两种色彩模型差异,虽然都是相同的亮度 Lightness,但是视觉感官体验上的舒适性差异明显。

如何4步建立系统级色彩体系?来看京东高手的方法!

在这里补充色彩模型差异,主要原因是软件产品服务对象是人本身,所选用色彩模型应尽量贴近人眼感知层面的色彩模型。基于 HSL、HSB 生成的色彩,同样可以通过换算关系,转换成 Lab、HCL,但是由于色域范围不一致,色彩会存在不兼容的情况。

换算关系:sRGB(HSL/HSB) → linearRGB → CIEXyz → CIELab → CIELch, 在 W3C(15. Sample code for color conversions)文档中有给出具体转换公式代码。

如何4步建立系统级色彩体系?来看京东高手的方法!

四、应用

如何4步建立系统级色彩体系?来看京东高手的方法!

如何4步建立系统级色彩体系?来看京东高手的方法!

如何4步建立系统级色彩体系?来看京东高手的方法!

如何4步建立系统级色彩体系?来看京东高手的方法!

工具资源

  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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/239209.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月7日 12:26
下一篇 2023年3月7日 12:27

相关推荐

  • 通过微软Designer,总结出 AI 提示词的6个设计原则。

    编者按:基于 AI 的各种产品越来越多,这些 AI 大都依托提示词来生成内容,那么这些产品和服务当中的提示词要如何安置,如何设计?资深设计师基于微软出品的 Microsoft Designer 产品的设计,梳理出了 6 个设计原则…

    2023年3月7日 SEO操作
    066
  • 网页设计师的UI设计工具。

    2019年网页设计师最感兴趣的发展之一是UI设计工具的爆炸式增长,这些应用程序标志着我们在创建现代用户界面方面的一个转变,在Photoshop中创建PSD模型的日子可能就要结束了。不相信吗?在过去的几年里,Sketch和Fig…

    2023年2月20日 SEO操作
    01
  • 用大厂实战案例,帮你学会金融领域的产品设计方法。

    本文从腾讯移动金融开发平台的实战案例出发,帮你掌握金融领域的产品设计方法。一、项目背景互联网行业的发展重点已经从消费互联网逐步转向产业互联网。对金融机构来说,数字化转型也成为企业面向未来发展、改善客…

    2023年3月2日 SEO操作
    09
  • 什么是字距排版?网页设计定义。

    包含在用户界面 (UI) 样式指南中的一个关键元素是排版将如何出现在您的移动程序 或 网站设计中。您可以选择是要使用预先存在的字体还是创建您品牌独有的新字体。但是随着您的排版决策变得更加细化,您最终将需要讨…

    2023年3月7日
    00
  • 5000字干货!从四个方面完整分析B端工作台的设计流程和方法。

    B端工作台如何设计?本文从需求分析、信息架构、可视化图表和视觉设计4个方面,完整解析一个B端工作台的设计方法。 举着 Case 当火把,照亮五彩斑斓的黑~ 一、需求分析 在设计一个产品的时候,我们要透过现象看本质…

    2023年3月2日 SEO操作
    00
  • 教你网站设计要注意什么。

    网站设计要注意布局、色彩搭配、导航清晰、响应式设计、用户体验和SEO优化等方面。 (图片来源网络,侵删) 在当今的数字化时代,网站设计已经成为企业和个人展示自己的重要工具,一个优秀的网站不仅能够吸引访问者…

    2024年7月1日
    00
  • office or microsoft 365整套ui设计体系提升。

    如果你是 Windows 10 系统的用户,那么最近应该会注意到 Windows 系统的图标正在逐步地被替换、升级,(在忽略广大国内全家桶软件影响的情况下)Windows 10 正在随着 Fluent Design 的注入而正在变得越来越优雅。随…

    2023年2月22日 SEO操作
    05
  • 标签栏设计如何设计?5000字干货详解标签栏设计。

    标签栏是用户进入 APP 的第一触点,绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元素之一,是 UI 设计师们绕不开的课题。一个好的底部标签栏可传达出产品的核…

    2023年3月1日 SEO操作
    051

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息