色彩 颜色 模型 色彩作为设计师的基本功，如何平衡产品的色彩搭配是每位设计师的必修课。如今市面上有种类繁多的配色工具可以一键生成配色方案，也有成套色卡作为色板参考，但是当面对高度自由且需求多变的设计状况时，如果缺少对色彩规范的系统理解，仅跟随设计师自身喜好进行配色，往往会导致产品杂乱不堪，没有章法。本文结合我自身的工作和学习经验，从理论基础到色彩系统搭建带大家由浅入深学习下 B 端产品中的色彩体系。更多色彩建立干货：如何4步建立系统级色彩体系？来看京东高手的方法！色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。阅读文章 > 一、色彩理论基础色彩理论基础是搭建色彩系统的基石，接下来我将从色彩本质开始，为大家介绍设计师需要掌握的几种常见色彩模型。1. 色彩的本质在小学物理课上我们都学过，色彩是由物体自身发光或反射出的光映射在人眼后所感知的，而光的本质是一种电磁波。自然界中存在不同频率的电磁波，短频的如 AM 收音机、电视信号，长频的如 X 光、伽马射线，我们所熟知的可见光则是电磁波中人眼所能接受波长约为 380~780nm，也就是从紫色到红色范围的这段色彩。资料来源：网络反射到人眼中的光，除了光本身的颜色，还会收到物质特性的影响。白色物体在被黄光照射时，反射到人眼中看起来就是黄色的，但蓝色物体在被黄光照射时会呈现黑色，原理是黄色作为蓝色的反色调，黄光本身不包含任何蓝光，因而被蓝色物体完全吸收时并无法反射出其他颜色，导致人眼看起来就是黑色。资料来源：巫师后期-什么是颜色此外，我们最终感受到的颜色除了光和物质特性外，还会收到周围环境、时间和历史经验的影响。下面这张网络图很多人都见过，同一张图片在不同人眼中会识别为不同的颜色。图片来源：巫师后期-什么是颜色综上所述，色彩的本质是一种复合的物理现象，是人眼感知物体表面反射光的结果。2. 色温：描述发光体的冷暖关系通过理解色彩本质可以发现，单纯凭借人的色彩感知来描述颜色具有很强的主观性，要如何保证在实际生产中每个人表述的是同一种颜色呢？这就需要找到可以科学且规范描述颜色的方法，在日常生活中我们接触比较多的是色温法。色温法的原理是：物体把热量以光的方式辐射出去，当物体处于不同温度时会发出不同颜色的光：温度比较低时呈现黄色，温度高时呈现蓝色或白色。这里标定的色温和大众认知中的冷暖感受正好相反，通常我们会认为红黄色调偏暖，蓝白色调偏冷，但实际上红色的色温最低，然后逐步增加的是橙色、黄色、白色和蓝色，蓝色是最高的色温。因此色温的高低和给人的色调感受是正好相反的。资料来源：网络熟悉摄影的同学都知道，当我们在清晨或黄昏的户外拍摄时照片时常会发黄，这是因为该时间段色温较低，光线呈现为橙黄色。而相机的白平衡模式可以缓解环境光的影响。其原理就是通过切换预设场景的色温值抵消当前实景的色温影响，使拍摄出的照片呈现出白色基准更真实。资料来源：网络色温法是建立在物体可以自身发光的基础上，而在自然界的发光体中，红、黄、蓝色会更为常见，但是绿色和洋红色很少。所以单靠色温法描述颜色不够准确，它更适合用来反映环境冷暖和色彩的倾向关系。资料来源：网络3. 常见的色彩模型为了更准确的描述颜色，工程师们引入了色彩模型的概念：将色彩拆分成不同属性并进行量化，通过计算机语言更科学准确的表述颜色，而不同维度的拆分方法便是色彩模型。随着科技发展和生产制造的需要，色彩模型迭代出了多个版本类型，接下来我将挨个介绍常见模型的差异和功能特点：① HSB 和 HSL 模型HSB 模型也称 HSV 模型，该模型是建立在人眼识别色彩的基础上，符合人类日常的生活经验，相较其他模型最为直观易理解。该模型主要使应用在图像处理、计算机图形学、色彩管理等领域，用于描述和操作颜色。其属性包括：H 色相：Hue，以角度（0-360）表示S 饱和度：Saturation，以百分比值（0%-100%）表示B/V 亮度：Brightness 或 Value，以百分比值（0%-100%）表示HSL 是和 HSB 原理相同的模型，在工作中很容易会被混淆使用，其区别在于：HSB 中 B 指的是「亮度 Brightness」，而 HSL 中 L 指的是「明度 Lightness」。为方便大家理解，对于这两种模型的详细区别，我整理了出了以下表格：资料来源：网络HSB 和 HSL 模型在使用场景上都是用于软件开发应用，在实际工作中我们接触 HSB 模式的场景会更多，但到底哪种模型更适合人类用户使用的界面设计尚未有定论。对于设计师自身而言需要注意的是，在和开发同步设计资料时确保使用的是同一种模型，避免产生颜色误差。虽然 HSL 模型有诸多好处（HSB、HSL 属于同类模型，后文统一用 HSL 概括），但其缺陷也很明显：HSL 模型无法用于工业制造，因为在自然界中基本很难找到某一属性纯度可以达到标准的物体，也难以控制单一属性变量来改变物体颜色。为了解决以上限制，用于屏幕显示的 RGB 模型和彩色印刷的 CMYK 模型应运而生。② RGB 模型RGB 模型是依据颜色发光的原理所搭建的，也被称为光的三原色，工业上用于通过红、绿、蓝三色发光单元产生颜色的电子屏幕。R 红：Red，以数值（0-255）表示G 绿：Green，以数值（0-255）表示B 蓝：Blue，以数值（0-255）表示通常情况下，RGB 各有 256 级亮度，用数字表示为从 0、1、2...直到 255，虽然数值最高是 255，但 0 也是数值之一，因此共 256 级。将三种颜色叠加并控制其颜色强度，256 级的 RGB 色彩总共能组合出上千万种色彩，而这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。资料来源：网络RGB 模型是我们日常工作接触最频繁的模型，但是不知道你是否产生过疑惑：为什么偏偏选择「RGB 红绿蓝」作为光的三原色，而不用其他色彩呢？首先我们要明确，能作为三原色的基础是必须保证其中任意一色不能通过其他两种颜色混合而成，且这三种颜色混合后能形成足够多的颜色种类。而 RGB 能作为三原色的色彩主要和人眼的生理结构有关：资料来源：网络前面我们提到，光的本质是一种电磁波。而视锥细胞共分为三种，分别对长、中、短三种电磁波长最为敏感，而这三种波长的光对应的正是红、绿、蓝三种颜色。当这三种感光细胞收到刺激后，会自动对将感受到的光色进行组合从而形成多种多样的色彩。这也是为什么「RGB 红绿蓝」被作为三原色的客观原因。资料来源：网络关于 HEX 色值这里还有个知识点就是 HEX 色值，听到它大家都不会陌生，在很多拾色器中我们都见到过，工作中也经常将其提供给开发同学作为颜色标识。虽然看起来结构不同，但 HEX 也是采用 RGB 模型的原理来定义颜色，只是语言上用的是十六进制代码：字节值范围从 0 到 FF，颜色的最低强度为 00，而最高强度为 FF。实际转换时，每位数字范围是 0～15（分为 0～9 和 A～F，其中 A～F 表示 10～15），这样每位数字都能代表 16 个数，而每 2 位数字相乘即可代表 256 级，正好对应一个颜色通道。相较于长段的 RGB 表示法，HEX 色值表示法只需六位字符，更加紧凑轻量，所以更适合开发人员使用。十六进制到 RGB 转换器工具： https://purecalculators.com/zh-CN/hex-to-rgb-converter③ CMYK 模型以上 RGB 模型是针对可自身发光的物体，CMYK 模型则是针对依靠反光的物体。CMYK 是色料的三原色，也叫印刷的三原色，使用最多的场景是媒介印刷，其原理是基于油墨的光吸收/反射特性，眼睛看到颜色实际上是物体吸收白光中特定频率的光而反射其余光得来。R 青：Cyan，以百分比值（0%-100%）表示M 品红：Magenta，以百分比值（0%-100%）表示Y 黄：Yellow，以百分比值（0%-100%）表示B 黑：Black，以百分比值（0%-100%）表示资料来源：网络通过以上现象我们会发现，将不同颜色的物质不断揉合最终会得到黑色物质，而这正好满足了我们工业印刷品上白纸黑字的需求：选择「红、绿、蓝」的补色「青、品红、黄」，通过调整这三种颜色油墨的比例，就能得到反射不同颜色的油墨。理论来说同比例的这三色油墨可以直接混合出「黑色」，但是现实中由于生产技术的限制，油墨纯度往往不尽人意，混合得到的黑色不够浓郁，只能依靠提纯的黑色加以混合，这种做法同时也可以节省油墨消耗。资料来源：网络在显示器等发光体下，RGB 模式的数值越大则光线越强，最终呈现的亮度也会最大。但是在印刷品等反光体下，其纸张本身的白色即是可以呈现的最高亮度， 所以 CMYK 模式的数值越大则油墨越多，最终呈现的亮度会越低。也因此：RGB 被称作加色模型，即多色叠加最终将得到白色CMYK 被称作减色模型，即多色叠加最终将得到黑色。④ Lab 模型以上三种是最常见的通用模型，还有些色彩模型用于更特定的场景，Lab 模型便是基于生理特征的一种模型。RGB 和 CMYK 受限于载体，同样的颜色可能会因为材质差异影响呈现不同的颜色，Lab 模型则是弥补其不足，摆脱原材料载体对模型的影响。1）L 明度：Lightness，以数值（0-100）表示2）a b 是两个颜色通道：a 通道：从绿色到红色，以数值（-128 至 127）表示b 通道：从黄色到蓝色，以数值（-128 至 127）表示资料来源：网络Lab 模型无法用于实际生产制造，但是其色彩空间比计算机显示器甚至比人类视觉的色域都要大，在转换成其他模型时色彩不会丢失或被替换，所以通常用于图像色彩空间转换、色彩校正、色彩相似度比较等场景。在进行具体的颜色转换时需要复杂的计算公式，作为设计师只需了解其模型用途即可。关于色彩空间上面我们提到一个词叫色彩空间，它是图像处理和计算机图形学领域中非常重要的概念，在图像处理、图形学、图像质量评价和广告设计等众多领域都有涉及。很多人会将它与色彩模型弄混，实际上两者是不同的概念：色彩模型：一种数学模型，用于表示色彩的三维数学空间，通常会用 3 个或者 4 个数值来表示。色彩空间：一种色彩表示方法，它将色彩模型中的颜色映射到二维或三维空间，以便于显示和比较。总而言之，色彩模型是用于表示色彩的三维数学模型，色彩空间是对色彩模型的二维或三维映射，方便于显示和比较色彩。色彩空间通常与色彩模型一起使用，并使用特定的数学表示法来定义色彩空间中的颜色。资料来源：维基百科⑤ HCL 模型HCL 模型最早由国际照明协会 CIE 提出，又被称作 CIELch(uv)。该模型是为了解决色彩对比度问题而诞生的模型，对颜色识别有障碍的视障人士更友好。H 色相：Hue，以角度（0-360）表示C 色度：Chroma，可以理解为颜色的浓度，浓度值越大，颜色就越鲜明。以数值（0-150）表示L 照度：Luminance，用于量化人眼对光的亮度的感知。以数值（0-100）表示。注意这里 HCL 模型的「Luminance」与前文 HSL 模型中的「Lightness」是不同的，我们先来看一个例子，分别通过 HSL 和 HCL 推导的色卡在对比度上有何差异？很明显，虽然都是控制变量但左图在颜色对比度层次不齐。这是因为 HSL 模型是基于电子元件的显示亮度进行计算的，但并非人眼感知光的实际感受。所以在配色时如果采用 HSL 模型，即使「Lightness 明度」值相同，色彩亮度在人眼看来依旧不匹配，需要设计师基于主观意愿进行调整，不仅耗费时间和精力，配色流程不够科学标准化。HCL 模型则很好的解决了以上问题，其初衷就是基于人眼对亮度对感知而创造的：只要「Luminance 照度」保持一致，不同色相的颜色亮度感受始终会保持均匀，这种情景下取色流程会更加简单高效，应用到产品上对视障人士也更加友好。资料来源：TDesign需要注意的是，HCL 模型的色彩空间和其他模型不一定能完全匹配，所以直接转换可能存在颜色丢失或被替换的情况，这里为大家提供了几款以 HCL 色彩模型为基础的色彩转换工具：HCL 转 RGB HEX： http://hclwizard.org:3000/hclcolorpicker/MD 主题搭建工具 HCT Color Picker： https://m3.material.io/theme-builder#/customColorpicker for data： http://tristen.ca/hcl-picker/#/hlc/12/1.03/182009/A9FC8EFigma 插件： https://www.figma.com/community/plugin亮度、明度和照度的区别介于中英文语义的差异，Brightness、Lightness、Luminance 都可以翻译为“亮度”，然而在色彩模型中每个词却有更深层次的解释，为方便大家区分理解区分，将三者整理在一起进行对比：Brightness 亮度：用于 HSB 模型，客观测量颜色的显示亮度。颜色变化从黑到标准色相，满值为颜色标准色相。Lightness 明度：用于 HSL 模型，和 HSB 一样客观测量颜色的显示亮度，与人亮度感知没有直接关系。颜色变化从黑到标准色相再到白，半值为颜色标准色相，满值为白色。Luminance 照度：用于 HCL 模型，主观上衡量发光的强弱和颜色对比度。可以发现前 2 个都是客观上对颜色亮度的衡量，而「Luminance 照度」才是真正意义上主观感受颜色的标准。二、B 端产品的色彩系统近年来，随着企业级产品功能体量不断丰富，产品设计体系逐渐趋向于规范化，如何搭建一套标准易用的色彩系统对于提升团队工作效率和产品体验一致性至关重要。通过系统化的颜色管理方法，可以帮助企业统一品牌颜色，提高品牌识别度和统一性。接下来，我将为大家详细讲解 B 端产品中色彩系统的构成和搭建方法：1. 色彩系统的概念简单来说，色彩系统是指从整个设计系统里抽离出的分支，为方便管理而针对色彩语言搭建的管理体系。完整的设计系统由设计语言和模式库构成，在设计原则的指引下，通过统一的协作语言和科学的管理方法组织起来，创建体验一致的用户界面。完整的设计系统可以拆解成三部分：设计原则：设计要遵循的中心思想，所有的问题和形式都向原则靠拢，减少不确定性设计语言：包括价值观、品牌、符号、色彩、文字等品自主表达的媒介模式库：即组件库，通过对控件进行归纳整理形成的可快速复用工具库色彩系统也是如此，并不仅仅是简单的色彩组件库，结合设计系统的内容，我们可以将设计原则和设计语言归入色彩规范中，而模式组件库即产品色板（调色板）。这里可以将色彩系统定义为：由色彩规范和产品色板组成，可以科学有效管理色彩的应用程序。2. 什么是好的色彩系统理解了色彩系统的定义，如何保证搭建的色彩系统科学有效？好的色彩系统应遵循以下三个原则：有意义：能够体现产品个性，凸显品牌基因，满足用户对产品的认知感受，不同色彩的搭配使用能满足用户的心理预期，提升使用体验。易上手：色彩系统不仅仅是给设计师自身使用的，在整个产品周期中，从上游的品牌战略到下游的视觉运营，都要使用到产品配色，优秀的色彩系统应方便团队成员上手，即使没有专业背景也可以很快的理解和使用。无障碍：不同颜色间对比度要匹配 WCAG 的对比度标准，保证内容元素的可识别度。3. 色彩识别无障碍资料来源：网络在色彩系统搭建之初就考虑色彩无障碍识别问题，可以普适更多场景，有效提升产品信息识别度和易用性。WCAG（Web Content Accessibility Guidelines ）内容无障碍指南作为行业广泛使用的无障碍设计标准，是检验文字颜色可读性的有效依据，只要文本颜色与背景色之间的对比度满足以上标准，就能确保被清晰识别。WCAG 2.0 中将颜色对比等级分为 3 种，等级越高意味着颜色的对比度越高，呈现出来的信息可读性越好：A 级：对比度 3 : 1，是普通观察者可接受的最低对比；AA 级：对比度 4.5 : 1，是普通视力损失的人可接受的最低对比度；AAA 级：对比度 7 : 1，是严重视力损失的人可接受的最低对比度。这里为大家推荐一款可视化对比度检测工具 Color Review：通过将 3、4.5、7 对比度临界点的颜色通过曲线标识，可清晰直观的看到当前色值的对比度在拾色器中的位置，方便进行调整。Color Review 对比度可视化检测工具： https://color.review/资料来源：Color Review4. 产品色板的组成依据色彩的类型和功能不同，产品级色板的内容可分为主色、中性色、辅助色和功能色，其中每种颜色都应有相应的色阶拓展供配色使用。① 主色产品主色一般是页面中使用最多的颜色，通常被使用在关键行动点、操作状态、重要信息提示、图形化等场合。很多设计师会直接将主色和品牌色划等号，即直接将品牌色作为产品主色使用，我们日常接触的 C 端产品大多也是直接使用品牌色作为主色使用，但是 B 端产品主色也可以直接使用品牌色吗？这里需要先理解 B 端和 C 端产品的设计差异。C 端产品设计侧重流量思维，追求尽可能渗透用户的碎片化生活来吸引用户。通过将品牌色作为主色使用可以凸显品牌特征，强化用户心理认知，以此来提高用户粘性和活跃度。而 B 端设计侧重的是效率思维，强调提升用户的操作效率帮助其达到使用目标。所以 B 端产品主色优先考虑色彩的识别度和视觉感受，尽可能保持用户在使用产品时沉浸感，即使在长时间浏览时也不会感到不适。因此究其根本，B 端产品主色不能对用户的使用操作造成干扰，必要时需要在原有品牌视觉的基础上提取品牌色进行修正，使其更符合用户的使用场景。当然能兼具品牌价值传递和操作体验是产品的最优方案。② 中性色中性色又称无彩色，包括黑色、白色及调和后不同深浅的灰色，常被使用在文字、图标、背景、线框等场景。中性色本身不具备颜色属性，没有色相冷暖的区分，因此可以更好的衬托其他有彩色，也能拉开信息的层次差距，对于创造结构、表达边界和建立信息层次十分重要。一般浅灰色应用在分割线、表单描边、背景色等场景，划分页面布局且避免对主要内容造成干扰。深灰色主要应用在正文、标题、图标等元素上，通过明度变化突出内容，方便用户浏览。有些产品会在中性色中加入适度色彩倾向，在保持中性色本身信息区分度的前提下，增加品牌色基因来强化品牌氛围。资料来源：TDesign在搭建中性色色板时，对于配置文字颜色市面上有 2 种解决方案：一种是直接控制灰度拓展色阶，另一种是用透明度变化建立色阶，如使用#000 并降低其透明度。市面上采用透明度方案的并不多，考虑到其根本目的是为了保证文字信息内容可以被正确展示，在此针对两种方案的使用场景提供更清晰的使用建议：色值变化：内容可以完整的保留色彩信息，不会造成色彩丢失，在组件搭建上维护成本更低。适合大多数场景下使用。透明度变化：在复杂图片或纹理的背景上依旧可以很好的展示内容信息，且可以更好的适配亮暗模式，更具包容性，但在一定程度上会增加浏览器的渲染负担。适合使用在暗亮模式需求或有复杂背景纹理的页面中。③ 辅助色辅助色是在主色基础上衍生出的其他颜色，主要有 2 个作用：一方面可以平衡色彩系统，缓解用户在使用产品过程中频繁使用单色造成的视觉疲劳，另一方面可以丰富色彩系统的可用性，通过和主色对比增加内容区分度。资料来源：网络根据研究来看，人类可命名的有彩色数量仅为 8～9 种，更多的颜色分类会增加使用时的筛选负担，同时色彩区分度也会降低。故通常建议在人类可命名的 8 种颜色中选择 6～8 种作为辅助色即可，如果有更多用色场景需求可以考虑加入拓展的颜色色阶进行交替使用。④ 功能色B 端产品中会利用色彩的心理暗示来对用户进行状态反馈，以降低用户认知成本，这部分辅助色通常被独立出来称为功能色：遵循用户心智和行业内默认的色彩语义，选择特定颜色向用户传达成功、失败、告警、链接等状态信息。如用红色传达通知、提醒、错误等，绿色传达确认、成功、正确等，橙色传达警告等。5. 色彩系统搭建以上便是色彩系统的主要内容，接下来将详细介绍如何搭建适合自身业务的色彩系统，主要分为以下五步：第一步：色相环取色。由主色推导出既符合品牌调性又具备区别度的辅助色。第二步：颜色校正。对选择的颜色进行色彩校正，使其保持感官同频。第三步：色阶延展。针对选择的颜色搭建层级均匀、层级清晰的色阶梯度。第四步：色彩语义化。对搭建好的色板进行语义命名，方便团队调用。第五步：团队推进。将资源同步至团队中使用，并优化迭代。① 第一步：色相环取色色相环取色是在主色基础上通过使用色相环来提取辅助色，具体的操作方法为：以主色的「色相 Hue」为起始点，在色相环上以 15为梯度进行加减，得到 24 色的色板。再根据自身产品场景，选择其中 6～8 种的颜色作为辅助色。② 第二步：颜色校正在色相环取色过程中，虽然保持其他变量，只对色相进行了变换，但由于颜色本身在视觉感受上存在亮度差异，故需要进行颜色校正，一方面保证整个色板保持视觉上的感官同频，另一方面保证视障群体的识别度。③ 第三步：色阶延展选择合适数量的辅助色后，需要对单个颜色进行色阶拓展以提供更多的色彩搭配空间，色阶拓展是指将同色相下的颜色由浅到深划分为多个色阶梯度。通常色阶拓展采用 8～12 级进行划分，如果层级过少可能会无法满足日常的取色需求，而层级过多又会导致色彩区分度下降，在取色时也会增加选色成本。市面上有很多种色阶延展的方法，这里为大家整理了几种常见的方法：透明叠色、直线等分、工具生成，各位同学可以基于团队情况自行选用：透明叠色法顾名思义，透明叠色法是在原来颜色的基础上叠加不同透明梯度的白色/黑色遮罩，由此得到不同色阶梯度的衍生色，再通过取色器吸取叠加后的色值。该方法实现成本低，无需其他工具配合即可实现，但是操作相对繁琐，当叠加层级较多时可能会导致颜色偏差，有时需要基于实际情况再做微调。直线等分法直线等分法是通过在拾色器中建立坐标系，之后采用直线等分打点的方法取色。其中拾色器的坐标系是基于当前选择的色彩模型而定，如 HSB 模型横/纵坐标为饱和度/亮度，HSL 模型则是饱和度/明度。直线等分法的操作较为简单，可以通过公式算法自动取色，但设计师独立推导的计算成本较高，通常需配合公式计算。具体的操作步骤如下：1）在拾色器上标明要延展的颜色，将色值点与左上方纯白和右下方纯黑点连接，得到 2 条线段2）将 2 条线段均匀分为 5 段，所有线段段点合集共 11 个点，计算每个点的色值数，即可得到这 11 个点组成的色板。3）以现有颜色坐标（X，Y）为基准，采用以下的计算公式即可得到延展色的色值：左上方点：横坐标(X/5)递减，纵坐标以[(100-Y)/5]递增右下方点：横坐标以[(100-X)/5]递增，纵坐标以(Y/5) 递减工具生成经过多年发展，国内外多家设计系统都开发了直接生成完整色板的开源工具，且经过不断迭代如今算法基本能满足大部分场景下的色板需求，是中小团队的首选方法。但是工具生成也存在一些弊端，其色值生成始终是建立在公式计算的基础上，故在部分极端场景下依旧需要设计师介入调整。资料来源：Ant Design 色板生成算法演进之路以下给大家整理了常见的色板生成工具：在线工具 Chroma.js： https://www.vis4.net/palettesArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具： https://ant.design/docs/spec/colors-cn#色板生成工具Material Palettes 色板生成工具： https://www.material.io/design/colorHTML Color Codes 颜色选择器： https://htmlcolorcodes.com/Eva Design System 色彩系统： https://colors.eva.design/Atmos 色板生成工具： https://atmos.style/④ 第四步：色彩语义化色彩语义化是指依据颜色在界面中的作用和使用场景进行重新命名，方便团队后期的维护和使用。这一步看似简单，但是实际操作起来需要设计师对色彩的使用场景和团队取用有深入的理解，很多细节需要推敲和考量。这里推荐参考 Nathan Curtis 的语义模版，作者将设计系统下的命名模版分为了四个部分：命名空间-元素对象-基础样式-修饰备注。资料来源：Naming Tokens in Design Systems原文关于设计系统下的语义命名进行了详细介绍，有兴趣的可以直接阅读原文： https://medium.comNathan 关于设计系统的命名涵盖了包括色彩、控件、文字等一系列元素命名方式，而色彩系统只需要截取其中部分拼装成符合自身场景的语义模版即可。各位可以基于产品规模和团队情况选择合适的内容进行命名封装，需要注意的是，语义模版的命名需要合理的把控精度：一方面过细颗粒度的命名会导致过于臃肿，维护成本过高，另一方面粒度过粗的命名会导致元素区分度不够，在团队推进使用时容易造成混乱。关于如何验证色彩语义是否清晰有个很简单的方法，即直接将设计的配色方案提供给开发同学，看能否在不借助颜色进行备注和说明的情况下只通过命名即可理解色彩的语义场景，通过不同角色视角更容易发现色彩命名的问题。⑤ 第五步：团队推进到这里色彩系统的基础色板和配色方案基本都搭建完成了，后续就是将其整理到组件库，并输出设计文档同步给团队其他成员使用。这里推荐使用 Figma Tokens 插件来进行管理和维护。此外，在同步前端同学建立开发组件库时，尽量采用语义命名对颜色进行封装，而非直接写死固定色值，以便日后在迭代调整时更加灵活。设计内协同：在 Figma 中生成颜色变量与开发代码联动：利用颜色变量表进行信息同步参考资料https://www.yuque.com/xiami0101/bq79sy/vtnqb262ag42tt66https://www.yuque.com/xiami0101/bq79sy/hy3vvihttps://www.youtube.com/watch?v=k1rB1Y4isHs&list=PLhnwj_CftHvhwO8P0mytRNZzlgbtOvgf4https://www.jianshu.com/p/f0e6382dd825https://zhuanlan.zhihu.com/p/165548359https://jessieji.com/2020/hcl-instead-of-hslhttps://medium.com/@pk.kiselev/designing-colour-system-d9d39f245e01https://www.jianshu.com/p/facdbab5ac20https://zhuanlan.zhihu.com/p/32422584https://www.yuque.com/xiami0101/bq79sy/ntkf60rgs9g3m2h2?singleDoc#https://zhuanlan.zhihu.com/p/102743681?utm_id=0欢迎关注作者微信公众号：「虾米的体验笔记」本篇来源：优设网原文地址：https://www.uisdc.com/color-system-2
明度 颜色 色相 前言这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。所以在继承现有的设计规范的基础上，行方也希望产品能有一个品牌升级，提升用户体验。我们将从构建一套科学有效的颜色规范入手，本着北农商银行“人本、创新”的核心价值观，在设计中我们想要寻找新活力、新体验，所以在原有品牌色的基础上，引入了更多灵动鲜活的辅助色彩，体现北农商品牌“聚焦、友好、多元”的个性。我们希望北农商银行企业手机银行可以为更多的企业和行业赋能，探索视觉上与各行各业适配的无限可能，带来更多个性化新体验。相关干货：如何设计B端色彩体系？3个步骤帮你掌握起来！编者按：B端设计的色彩体系如何构建？阅读文章 > 一、颜色规范的原则1. 理性我们在选色时，尽可能避免个人设计偏好，减少配色的主观性，理性地有逻辑地选色2. 可扩展确定下来的基础色，可以拓展生成更多的颜色，以符合不同场景的使用需求3. 和谐颜色规范中的颜色互相搭配使用，是和谐的，整体的二、制定产品颜色规范的流程1. 以前制定产品颜色规范的流程是什么样的呢？“归纳产品特性，结合行业属性和公司的品牌文化-提取关键词-建立情绪版-选择色相-制定色系”。这样的制定流程的优势在于不脱离品牌特性，也符合用户的基本认知，但是缺少一点理论支撑和数据验证。所以，我细细研究了几家大厂的设计体系，他们对于色彩体系的建立都存在一定的共性，下面我将这套理论在此次北农商银行项目上实践一下，看看是否可以得到一套更符合用户审美爱好、更符合产品特性、更规范、更高效的色彩体系。2. 旧的设计规范我们先来大概浏览下旧的颜色规范：三、本次制定颜色规范的流程品牌色基础上确定主色-结合色环确定辅助色-采用 HSB 色彩模型调整辅助色-颜色校正确保感官明度一致-WCAG 标准验证颜色-调色板-设计落地1. 品牌标准色进化确定主色主色是产品使用频率最高、最核心的颜色，常用于主要按钮和文字、重点操作状态、高亮提醒、图形化等场景。一般产品的主色，首选是品牌色，可以更好地传达品牌价值；其次，可以通过产品的行业属性来确定主色，比如科技用蓝色、电商用红色、橙色、健康用绿色等。这里给大家分享一个非常棒的网站： http://brandcolors.net/ （包含全世界 500 强产品的品牌色，可以从这个网站寻找与我们产品业务相似的品牌色，获取灵感）北农商银行的品牌色是带有首都鲜明地域特色的红色，流露出浓郁的文化底蕴。首先，采用 HSB 色彩模型进行设计，该模型是通过直观地描述颜色的色相 H（Hue）、饱和度 S（Saturation）和明度 B（Brightness）的方式来表示颜色，更便于设计师在调整色彩时对于颜色有明确的心里预期。我们保持色相 H: 358 不变，降低了 S，从 89->75，提升了 B，从 78->90，让原先过于严肃的红色轻量化、轻盈一些，蕴含更多的活力和想象力，承载着北农商银行对未来新挑战新发展的态度。2. 结合色环配色理论，确定辅助色在一个科学有效的颜色规范里，往往包含至少两种色彩：主色+辅助色。辅助色是辅助主色来丰富产品的界面，以及作为一些操作结果，状态的反馈。功能色的使用需要符合用户的认知习惯，比如正常或成功用绿色，失败或错误用红色、等待或警告用橙色，失效用灰色、链接用蓝色等。用户不需要阅读文字信息，就能直观地了解设计的状态。本次颜色规范体系将制定一套丰富多元的辅助色，将用到色环工具。我们将以北农商银行主色红色（#E6393E）（H358，S75，B90）为起始点，饱和度 S 和明度 B 保持不变，色相 H 以 358 为起点，以 15 度为增量或减量标准，生成 24 色色环。在色环中，标记好主色红色，然后在红色的相近色（15 度）、类似色（30 度）、邻近色（60 度）、中差色（90 度）、对比色（120 度）和互补色（180 度）选取下面几个颜色。下面将根据实际界面使用情况，对上面色环得到的颜色进行删减，确定辅助色。为了保持北农商银行的基础品牌调性，选择了冷暖一致的类似色橙色，以保证整体色调统一和谐，感情特性一致，一定程度上也增加了色彩层次。并利用了中差色蓝紫色和对比色蓝色、绿色这些丰富多元的色相，使视觉冲击力强，活泼有趣，增加了色彩的平衡，并且满足各种场景下对色彩的需求。大家在确定色值的时候可以这样操作：在主色红色的色相 358 的基础上，分别增加或减少 120，得到两个对比色（蓝色和绿色）3. 确保辅助色和主色一致的明度和饱和度确定好辅助色之后，要对辅助色进行下一步的调整，这步非常简单，就是保证辅助色和主色拥有一致的明度和饱和度。4. 颜色校正，确保感官明度一致，对颜色进行微调在 HSB 模式中，即使饱和度和明度一样，但是不同色相的颜色的感官明度是不一样的，黄色、青色、洋红实际看起来比较浅，所以为了让整个色板看起来更和谐，画面不跳跃，我们要动手调整，校正辅助色。校准方式：在颜色上面叠加纯黑色图层，图层模式选择色相，通过无彩色系下的明度色值进行对比，就可以直观地看到无彩色视觉感官明度。细调过程中，相差大的颜色可以以“5”为差值调整饱和度或明度，最后在根据效果进行微调（校正原则：色相保持同类色即可。对颜色不满意，可以稍微调整色相，以实际效果为准）5. WCAG 标准验证颜色为了保证视障用户的使用，保证足够的对比度，我们的用色需要遵守 WCAG 用色标准。WCAG 用色标准中普通文本与背景对比度不低于 4.5:1，所以一般颜色规范中的中性色（#33333）等都需要满足于这个标准。那么对于产品主色，是不是也要达到这个标准呢？对主流 App 以及主色为红色的竞品 App 进行测试，发现范围在 3.2-4.2 的居多，所以这是个比较合适的对比值范围。下图是北农商银行 App 主色（#E6393E）的色彩对比度检测。更多WCAG 的知识：从3个方面，帮你从零开始掌握WCAG色彩对比度最近在学习大厂设计系统时，发现了 WCAG 标准。阅读文章 > 6. 调色板① 如何得到同色系配色？第一种方法是无色相变化的同色系，就是通过调节明度的方法，得到一系列同色系配色方案。将颜色从白到黑排列成黑白色卡，黑白色卡可以划分 10 级灰度，然后把纯色放入调好的 10 级灰度的黑白色卡中，得到一些同色系配色方案。第二种方法是有色相变化的同色系。浅色系中，色相往感官明度高的色相依次差值 2，饱和度依次减少 15，明度依次增加 5；深色系中，色相往感官明度低的色相依次差值 2，明度依次减少 15，饱和度依次增加 5。两种方法，我会更推荐第二种有色相变化的同色系，也称微色相变化，在色环上夹角小于 30 度的颜色变化，色相的跨度很小，所以配色上比较容易控制，可以很好地平衡画面的层次感和规律感 。7. 落地落地分为两个方面：设计方面和开发方面。① 设计方面此次项目实施中，发现了颜色在界面的实际应用中也应该注意一些问题。比如：主色为红色，如果将品牌色赋予按钮的时候，它会和界面中涉及破坏性操作的按钮发生冲突。因为一般情况下，红色在按钮上含有警告和禁止的含义。带有删除数据、取消操作、涉及破坏性的操作，都会用红色标识出来。所以将主色红色应用于按钮颜色，要考虑好异常情况，如果是双按钮形式（确定+取消）应该怎么定义按钮的颜色，才能让用户更好的区分。② 开发方面为了配合开发，我们定义了 Design Token。这样在以后的换肤中，只需要在底层对变量的值进行改变即可实现全局的更改，提高效率和拓展性。对于 UI 原子的命名规则为：大类字母(名称)/小类数字(样式编号)/样式说明_样式状态例如：a/1/主色_nor：#E6393Ea/2/1/辅助红_nor：#FF4E3A对于开发原子的命名可以根据各平台特性去定义，保持基础编号能快速识别对应即可（仅供参考）例如：sscolor_a_1_nor：#E6393Esscolor_a_2_1_nor：#FF4E3A四、设计规范·组件库搭建五、页面效果六、推荐工具Ant Design 色板工具地址： https://ant.design/docs/spec/colorsAcrodesign 色板工具地址： https://arco.design/palette/listarco.design*ColorPalette 色彩对比度检测： https://arco.design/palette/wcag结语在这次的颜色规范重新定义中，重新审视过去的设计，我们为了赶项目进度，为了自身便利，时常依靠主观情感和偏好去选择颜色，这将不利于产品的迭代和发展。将设计理论应用到项目中，让色彩体系科学化，真正让色彩去服务设计，让设计更高效，希望本文对您也有所帮助。如何构建科学有效的色彩系统？来看腾讯文档的实战案例！“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。阅读文章 > 腾讯实战！如何构建科学有效的色彩系统（应用篇）在《腾讯文档-构建科学有效的色彩系统》这篇文章中，我们阐述了腾讯文档如何升级了新的品牌色，为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知，以及如何构建一个科学有效的调色板。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/product-color-specification
颜色 色彩 亮度 本文分享个人搭建青云 QingCloud 可视化色彩体系过程中的一些经验。（阅读此文需要一定的色彩空间知识作为基础，否则有些难啃）基础科普：如何4步建立系统级色彩体系？来看京东高手的方法！色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。阅读文章 > 一、前言1. 背景目前平台上使用了三套组件库 A、B、C，A 是最原始的组件库，基于此扩展了 B 组件库，并对颜色进行了改进，C 是全新的组件库，引用了 Token 及其他新的前端技术栈。三套组件库独立存在，应用在庞大的云平台各个业务产品中，发展趋势为使用 C 组件库开发日后新的业务，并逐步替换老的业务。关于颜色，B 组件库采用 HSB 色彩空间调色并进行人工调整，C 组件库沿用 B 组件库的色板并对部分颜色进行了优化。关于可视化组件，平台使用第三方开源图表库 Echarts 进行简单定制化。目前的需求是基于 Echarts 系统化定制出一套图表类型较全面、交互较统一、使用规范较明确的可视化组件库。因此，确定一套可视化颜色系统成为当务之急，经过简单的调研得出两套解决方案：方案一：沿用组件库 C 的颜色；方案二：基于适用于可视化场景的色彩空间确定一套全新的颜色。不难判断的是，采用方案一，要面临的问题就是：色彩空间落后，不适用于可视化场景；大量人工调整，无法满足日后自动化交付场景所需；相关算法及推导过程丢失，设计侧无法进行科学化、可持续化迭代。且在调研过程中我们发现，可视化色彩与设计系统色彩并无必要的理由进行捆绑：一方面，可视化场景对色彩的要求要远高于设计系统组件库，因其主要通过颜色来识别数据差异，所以，对颜色的亮度、对比度、色差、和谐度等要求非常高；另一方面，可视化组件库的适用产品类型通常是多种多样的，夸张点讲就是任何类型的产品中都可能会用到可视化。这一点就需要可视化组件库拥有很强的风格兼容性，这就导致了其颜色必须兼容性强，并非随便拿一套设计系统色彩过来就能满足的；设计系统中的颜色使用场景与可视化中的颜色使用场景不同，这就导致很多已经成型的设计系统色彩从设计之初的（设计目标）就不适合拿来做可视化设计；再向底层去挖掘，很多设计系统的色彩空间不适合可视化场景，这会导致相关扩展色板的推导流程甚至主题演变流程变得异常困难。最终，我们采用了方案二，也就有了接下来要发生的事情。但在开始之前，我们需要想清楚几个问题。2. 理想的可视化色彩特点是什么？看待这个问题，其实我们要搞清楚的是可视化场景对颜色的要求是什么？① 保证同色相或不同色相之间的辨识度与色差是基本要求可以毫不夸张的说，可视化系统就是一个色彩系统，无论多么复杂花样繁多的图表，都要依靠颜色去表达。而在众多表达手法中，颜色与颜色之间的对比是最常使用的。② 颜色所传达出来的感觉要准确众所周知，颜色不仅仅能表达人类的情绪，如热闹、喜庆、冷淡、沉稳。还能表达事物的特征，如温度冷暖、海拔高低、数据升降。③ 充分考虑色盲色弱等视障群体的使用体验我们在产品设计过程中经常会提到无障碍设计，也通常会在设计系统中对颜色对比度、字体大小等做一些验证，也会充分考虑用户设备情况及产品使用环境做一些针对性设计。在可视化设计中，这些验证是相通的。④ 颜色的生成、演变与应用是动态的前面我们提到过，无论是产品迭代还是纯视觉升级亦或产品交付自动化，从技术架构到颜色算法在设计之初都要充分考虑扩展性。以至于在可视化设计中，色环的确定、色板的生成、色彩的搭配、色序的应用等都要保证有理有据且灵活可变，充分兼容复杂极端场景。注意，颜色算法是指通过大量实践、总结和优化，可以用来相对科学的批量的解决符合一定规律或映射关系的场景问题的一种途径，其产出相对理性过程也相对高效，是做后续颜色优化工作的基础，可以大大降低人为干预的几率，而非一成不变的去应用。⑤ 颜色搭配要符合产品调性，是品牌的延续可视化的应用场景非常广泛，从国家生产总值到个人收支明细，大到政务系统小到记账 App，都有其载体风格调性，如中立、活泼、科技等，均不能脱离于“品牌”而设计。⑥ 保证颜色的美观性回到设计本身，也是设计本质---美，还是要保证的。3. 传统的色彩空间弊端是什么？我们先来简单看一下使用传统的色彩空间是如何配色的。此处受 @lemonoO 的启发最初，互联网上的产品形态比较简单，对颜色的定义仅仅局限于红、黄、蓝、绿四个语义色上，用来模拟表达成功、失败等情绪。在此之上，手动扩展几个相对深与浅的颜色用于如按钮 Hover、Active 状态。颜色之间依靠一些配色工具在色盘上根据对比色、互补色等原理进行搭配。随着互联网的飞速发展，互联网产品的形态逐渐复杂，组件也日趋完善，人们不断探索能够满足更多使用场景的配色方案，定义相对完善的色彩体系。于是，Tint&Shade 扩展色阶的方案就出现了。该方案通过定义基准色后分别向深浅两个方向叠加不同不透明度的黑色与白色来生成色阶，达到扩展基础色板的目的，典型的工具如 Tint and Shade Generator。后来人们发现，这种方案虽然简单粗暴，但依靠叠加不同量黑色与白色生成的色阶存在一些问题或不满足使用场景，如首尾丢色严重，无法通过色相偏移的方式制造冷暖效果等。于是，基于更符合人类认知的色彩空间如 HSB、HSL 生成色阶法就诞生了，并成为至今使用范围最广的方案。以 HSL 为例，该方案通过将颜色定义为符合人类认知的三个变量：色相、饱和度、亮度，分别进行控制并灵活调配，如固定饱和度与亮度，在色环上通过改变色相生成基础色。或固定色相与饱和度，通过调整亮度生成色阶。就如同人类科技发展史一样，人们总是在发现问题解决问题和改进方案。如下图所示，这种符合人类认知习惯的色彩空间搭配出来的颜色，其数值亮度并不是与人眼感知亮度相通的，这注定需要人为介入来改变局面。以至于依靠这种方法生成的色彩阶梯肉眼可见的过渡不均匀，且同阶梯不同颜色间差异过大。于是乎，这里调一下亮度，那里调一下饱和度，经过不懈的努力花费了巨大的成本终于得到了满意的效果，然后发现整个色板参数完全失控了。推导经验无法复用，色板升级只能肉眼调，主题定制纯靠研发批量替换......至此，人们发现，传统的色彩空间配色方案弊端主要体现在无法科学准确的表达颜色亮度上，也终于意识到，计算机对颜色的识别和处理是线性和对称的，而人眼对色彩的感知是非线性和不均匀的。简单的例子就是红色比蓝色亮（刺眼），绿色比红色亮（刺眼）。所以，这些基于 RGB 色彩空间扩展出来的配色工具或空间（HSB、HSL 等）终究是要被取代的，这也正式促使了 感知均匀色彩空间 的诞生。由 CIE 组织（国际照明委员会）于 1976 年提出，理论上可以覆盖人眼所能识别的所有色彩，其颜色总量远大于传统色彩空间，最大的特性就是数值变化均匀则颜色变化均匀，亮度亦如此，人们终于可以客观的依据数值来判定颜色了。虽并非完全意义上的感知均匀，但相比传统色彩空间已是质的飞跃。完整介绍可参考《基础概念》篇，这里不做赘述。4. 为何选取感知均匀的色彩空间？很多可视化产品都在推荐使用人眼感知均匀的色彩空间来搭建可视化色彩系统，不断强调感知亮度均匀，但并没有告诉大家为什么。首先，这里需要强调的是，我们所追求的感知亮度均匀更贴切的说法应该是追求亮度的准确表达。表达是否准确就像建房子一样，砖是墙的基础，墙美不美观稳不稳定，取决于每一块砖的大小是否标准，而衡量这个标准的前提是砖的长宽高都是可被衡量的。与之对应的，色板是否“美观与稳定”，取决于每一个颜色是否标准，而衡量这个标准的前提是颜色的每个指标都是可被衡量的。图片源自网络，侵权请联系基于这个前提，我们就可以顺利地构建出一个可被衡量且变化均匀的全量色板。其次，区别于设计系统的是，可视化场景需要基于全量色板按照特定的规则扩展出不同类型的色板，如分类色板、发散色板等，而亮度又是这些特定规则中的重要指标。因此，一个可被衡量且感知变化均匀的全量色板何尝不是可视化设计的最佳选择呢？再其次，我们反向思考一下，如果将感知不均匀的色彩空间应用在可视化场景里会发生什么呢？下面是一个描述美国各地雨水蒸发量的案例，可以非常明显的观察到一条分界线将整张地图一分为二，这很容易让人在解读数据时发生误判---分界线两侧数值发生了巨大的变化。作者：Robert Kosara，查看 原文。而通过观察其图例上的数值后发现并非如此，分界线两侧的颜色所代表的数值区间差均为 0.09，与其他颜色并无差异。这正是由于分界线两侧的颜色感知亮度有较大差异，以及不同色调之间过渡不均匀所导致的。通过这个案例我们可以看出来，很多对数据精度要求高的场景（如气象预测），在分析数据时，需要遵循一个很重要的原则就是保证颜色的客观性，降低颜色对数据分析结果的影响，降低解读数据时数值变化量误差（对应色彩变化量）。最后，总结一下，使用感知均匀的色彩空间可以让我们收获什么？它可以让设计师真正拥有明辨色彩是非的能力。在看似复杂的全量色板上客观、有依据的挑选合适的颜色（通过数值判断颜色是否合适而非阶梯判断），用以表达明暗、冷暖关系（如发散色板的构建），构建贴近工程化理念的配色方案（如动态顺序色板的构建）等。5. 如何选取感知均匀的色彩空间？在众多感知均匀的色彩空间中，选取适合我们的色彩空间需要满足以下几个基本条件：易于操作，最好是有成熟的工具或算法可以用来深入了解对比；颜色变量易于理解，最好能够像 HSL 等空间一样符合人类认知；可生成自定义数量的阶梯，且每个阶梯的亮度可以自由把控。① CIE 系列基于这些基本条件，我们首先排除了 CIELab（CIELuv 与之类似），其色彩空间由 L（感知亮度）、a（红绿通道）、b（蓝黄通道） 三个变量构成。L 变量是相对可控的，但 a、b 变量不符合人类的认知，类似于 RGB 调色板一样，不同的颜色是通过改变 a、b 变量中的红绿与蓝黄的量而得出的。但也不排除使用该色彩空间配色的可能，观赏一下。而 CIELch 是 CIELab 的极坐标转换，通过易于理解的 L（感知亮度）、C（色度，可简单理解为饱和度）、H（色相）三个变量来形容颜色。同时，生态也比较完善，有多种工具可以不同程度的帮助我们生成色阶，作为保留方案。② OK 系列OKLab、OKLch 针对 CIE 系列空间做了进一步优化，纠正了色相偏移（阿布尼效应）与色度对感知亮度的影响（亥姆霍兹-科尔劳施效应）。但这类色彩空间目前还处于早期阶段，生态不完善，兼容的场景也很少，仅有的工具也只能作为调色器（如这个工具 OKLch-Picker）使用。此外，在该色彩空间内，固定色相与色度的同时可覆盖的亮度区间要小于 CIE 系列色彩空间，超出限定区间的颜色又无法在 sRGB 色域内甚至任何设备上正常显示，用于生成色阶非常局限。所以，放弃之。无论使用任何色彩空间进行调色，我们最终都要保证所有颜色均能在 sRGB 色域内正常显示，这是底线。比如你使用了 P3 色域中的颜色，则会有部分用户的设备无法显示并自动取 sRGB 色域中相似的颜色来呈现，从而影响你的设计交付效果。③ HCTHCT 色彩空间是谷歌在 Material Design 3.0 中推出的新方案，基于 CAM16 色彩空间与 CIELab 色彩空间进行了优化，通过 H（色相）、C（色度）、T（光度，源自 CIELab 中的 L） 三个变量描述颜色。官方提供了在线配色工具，但使用该工具生成的黄色显脏，可用色阶少，且无法自定义色阶，许多颜色在色阶两端有丢色偏色的现象。但好在开源，我们可以借助其算法通过在代码中自定义 T 的数量及数值模拟我们想要的效果。单看生成的色阶效果其实还不错，也能够满足基本的使用需求。代码源自：Jony，查看 原文。import { argbFromHex, TonalPalette } from "@material/material-color-utilities";// 定义 tone 梯度const TONE_ARR = [0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 94, 97, 100];const createTonalPalette = (hex) => {// 将 hex 格式颜色转化为 argb 格式const argb = argbFromHex(hex);// 创建 paletteconst palette = TonalPalette.fromInt(argb);// 在 palette 上取一组 tone 梯度对应的颜色数组const colorArr = TONE_ARR.map((t) => hexFromArgb(palette.tone(t)));return colorArr;};其感知亮度变化也是相对均匀的（PS 灰度模式效果）。大家可能在很多教程里都看到过使用灰度模式（用词精确，非黑白模式）来模拟感知亮度变化。首先需要申明的是：在 PS 里，有一个图层叠加模式叫“明度”，在 Figma 里叫 Luminosity，总之使用这种方式来模拟的效果都是不准确的，推荐使用 PS 中的灰度模式来模拟，或者直接打印出来查看效果。那为何使用灰度模式来模拟呢？（这个问题并未找到科学靠谱的答案，属于猜测）相信大家在初次接触美术时都学过素描，通过简单的黑白灰来表达一个物体的光影、层次关系，而色彩会有很明显的情绪传达。所以，要想表达人眼对色彩亮度的感觉，是不是去掉“色彩”会相对客观一些呢？基于该结论，我们还会发现这种方式除了可以用来模拟感知亮度变化以外，还可以用来体现明暗关系（如视障用户无法顺利通过颜色辨别图形时可以依靠明暗对比来辨别），以及用来还原打印效果（打印数据图表分析数据）等。但有一个非常让人难受的缺陷：默认情况下 Key Color（或主题色）很可能会不存在于生成的色阶中，这就意味着需要不断去尝试取 Key Color 相邻的色值让其存在于色阶中，或者通过定义无限多的 T 数量及数值让其显露出来，这显然不符合我们“易于操作”的要求，放弃之。④ 结论其他调研细节就不在这里啰嗦了，总之，我们最终选择了 CIELch 色彩空间。至此，需要铺垫的内容也就告一段落了，接下来我们通过实战来看一下如何推导一套可视化色彩体系。二、全量色板推导整个色彩体系之前，我们已知的条件就是一个主题色。基于青云 QingCloud 品牌 VI 中定义的主题色，我们将其进行一个简单的色彩演变，降低饱和度的同时微调亮度使其更加适用于互联网产品但不脱离我们中立沉稳的品牌调性。这里需要注意，在做色彩空间转换时，尽量保证精确度，从而提升后期颜色推导的精确度。1. 基础 10 色① 24 基色基于 RGB 色彩空间，我们首先需要绘制一个标准色盘。通过正色取值法，以正红色为基准，间隔 15 取色，中间会覆盖正蓝（210）、正青（180）等颜色，得到一个标准的 24 基色。当然，这些颜色并不能直接拿来使用。与正色取值法对应的是主色取值法，以主题色色相为基准间隔 15 取色，得到一个色相偏移的 24 基色。但经过尝试，我们发现，该方案由于主题色色相的不确定性（经验复用时会发生），很有可能导致取出来的颜色“不当不正”，做颜色矫正的成本较高。② 8 基色基于生成的 24 基色，我们选取人眼最容易识别且符合人类认知的 8 个基准色：红、橙、黄、绿、青、蓝、紫、粉。这里取色的过程可以根据自己产品的调性对部分颜色特殊处理，如我们取的粉色就相对沉稳一些。③ 色相矫正虽然现在生成了 8 个基准色，但仍然不能直接使用。此时，我们需要结合一些条件对色相进行偏移。首先是保证视觉舒适度，如黄色、青色过于刺眼；其次是基准色之间要肉眼可区分；最后是生成的梯度色板之间也要肉眼可区分（如我们的主题色与绿、青基准色经过感知均匀的色彩空间转换后生成的梯度色板十分接近）。以上矫正过程需要结合后续的推导结果不断循环往复来回调整，直至符合要求。④ 色彩矫正前面我们花了很多篇幅介绍色彩空间，在这一步才真正得以体现。我们先将颜色转换至感知均匀的色彩空间，方便后续对色彩进行处理。转换至感知均匀的色彩空间后，我们根据主题色的感知亮度将其他颜色也设为一致，这是体现整个可视化色彩体系贴近品牌调性的关键步骤，因为我们会拿这些基色去生成全量色板。大家可能发现我们在这个过程中选用了 HCT 色彩空间进行转换（不是打脸哦），因其调色器工具能自动根据感知亮度调整色度致使各个颜色都保持和谐。当然，你也可以使用其他感知均匀的色彩空间来做转换，差异不大。此外，大家可能还会有疑问，黄色和橙色怎么像一样？为什么还放在这里？因为在真实使用场景中，色板里的颜色并不一定都能被使用到，这是其一。其二，颜色长的丑并不能否定它作为我们生成色阶的基准色。（后面的推导流程推翻了这个结论，但仍不能否定它存在于色板中）三步变化效果。⑤ 生成中性基色常用的中性色大家都知道有中性中性色和冷调中性色，结合品牌调性我们选用了冷调中性色。基于蓝色我们可以通过降低色度的方式扩展出中性基色。这里的中性色比较特殊，仅适用于图表图形中用以中和色调，而非用于文字、填充、轴线等场景的全局中性色。⑥ 相对亮度验证通过上面的步骤，我们得到了感知均匀的 10 个基色，我们使用 Chroma.js 中的相对亮度计算工具验证一下，方便我们基于这些基准色扩展色阶。这里引入了新的概念“相对亮度”，可以查看 W3C 相对亮度 的计算公式和 维基百科 对其的定义。大概可以理解为感知亮度的另一种表达，任意两个颜色的相对亮度值一致说明其感知亮度（HCT 中的 T 或 CIELab 中的 L）值也是一致的。白色为 1，黑色为 0。当然这里我们其实是无需验证的，因为在色彩矫正步骤 2.1.4 里已经基于 HCT 色彩空间将 T 设为一致了，那其相对亮度值也是一致的。我们验证的目的是为了配合后文会提到的 Chroma.js 工具及相对亮度等差数列生成色阶。2. 完整色阶首先需要判断一下需要多少个阶梯，通常情况下的阶梯有 7、9、11、13 几种，大家根据自己的需要选择。我们选择了 13 阶梯，一方面可以使色阶过渡细腻一些，另一方面也可以让取色范围更广一些。其次，谈起色阶就不得不说一下插值。插值的目的是为了获取一个有规律的亮度变化曲线，使色阶过渡均匀。通常的做法就是固定首尾两个点，通过一些算法或工具生成对应的贝塞尔曲线，也可以使用简单的等差数列来完成。而感知均匀的色彩空间有一个很大的特征就是：它的色彩空间是三维且不规则的，固定 L、C、H 三个变量并从中“切一片”下来放进二维平面中观察，你会发现它的形状是不规则的。固定其中任意两个变量改变第三个变量时，都会影响这个二维平面的形状，三者互相影响。这里有点儿考验大家的立体几何想象能力。这就意味着，不管你的亮度曲线是等差数列还是各种高大上的贝塞尔曲线，当你把曲线套进色彩空间中 360 旋转切换色相生成色阶时，曲线中的某些点说不定会跑出整个三维色彩空间。这就需要联动色度及色相一起做各种矫正工作，对设计师来说学习成本和操作成本是巨大的。我们想简化整个流程。前面我们定义好了 10 个基色，也得知其相对亮度值均为 0.287 左右，这就相当于定义好了整个色阶中的“中间”阶梯，我们按等差数列向上向下分别取不同数量的阶梯即可，之后借助现成的算法或工具帮助我们去做矫正工作。为什么基准色阶往右的阶梯要多一些？主要原因在于基准色阶的相对亮度较低，自然可以往亮处扩展的多一些。那为什么我们不在这个基础上间隔取样，使左右两侧的色阶数量相等看起来对称舒服一些呢？这是由于我们在扩展分类色板、顺序色板等时发现，经常需要按不同规律来间隔取样，这样划分会使我们的可选择余地多一些，不至于陷入亮色不够用，暗色又用不到的尴尬境地。通过调研了十几个工具后发现 Chroma.js 正好满足我们的需要。我们只需要选择合适的色彩空间，定义好 Key Color（基准色），定义好相对亮度等差数列即可顺利生成色阶。受 @少年游 的 文章 启发，这里插播一个知识点：韦伯-费希纳定律，可以解释我们为什么会使用等差数列来设计色阶。定律现象：人眼对亮色区域的颜色变化敏感度要高于暗色区域。按照传统的 HSL 色彩空间生成色阶时，需要在亮色区域将阶梯层级设计的细腻一些，也就是亮度变化度（非 L 值的直观体现，需要计算）要小于暗色区域，防止使用亮色区域相邻色阶时造成亮度变化过大的错觉。如图左，浅色按钮之间的变化度为 2.6 倍，而暗色按钮之间的变化度为 1.1 倍。而我们使用的感知均匀色彩空间就很好的避免了这个问题，只要保证颜色之间相对亮度值的变化量是一样的（等差），那就说明无论是浅色按钮还是暗色按钮他们之间的变化度也是一样的，如图右。① 基础色阶基于 Chroma.js，我们生成了大部分颜色的色阶。② 特殊色阶而当我们按照同样的规则去生成黄色与橙色色阶时，我们发现整个色阶过于偏“暗”导致可用阶梯非常少。于是，经过不断地尝试后发现：通过提升黄色与橙色的基准色感知亮度与色度则可以提升整个色阶的亮度与色度，并保持变化均匀。因此，针对黄色与橙色，我们选择基准色色彩矫正前的颜色（2.1.3 步骤中所得出的颜色）做为新的基准色生成色阶。这个过程由于色彩空间、算法等缺陷会导致部分颜色产生差异，但属于肉眼无法辨别的差异，还可接受。③ 色彩矫正现在，我们拥有一套完整的色板了。但仔细观察后发现，个别颜色有些不太符合我们的品牌调性，感知亮度或色度有些过了。我们手动压一压，微调得到最终的全量色板。（绿色因与主题色过于接近，去之）这些微调其实属于可以不调的程度，并不会在实际生产过程中影响自动化交付效果。3. 色彩验证生成全量色板后不意味着推导工作可以结束了，好的色板是要能经得住考验的，同时也是循环往复来回调整基色的必要过程。① 相对亮度验证全量色板中的每层阶梯颜色是否符合相对亮度标准，这也是检验色阶是否过渡均匀的重要手段。灰度模拟效果还不错，使用 PS 中的灰度模式模拟。亮度曲线分布一致，使用工具 Huetone 模拟。② 色差验证在感知均匀的色彩空间内，验证任意两个基准色之间的色差，其目的是为了保障视力正常的用户能够顺利分辨出两个颜色的不同。我们基于 CIE2000 标准进行验证，Delta E 18 即满足，可用工具 Color Contrast 进行计算。“18”这个值的说服力有待考证，暂以其为标准。CIE2000 较 CIE1976（目前使用范围较广） 在算法上进行了优化，描述色差更加准确。可以发现，部分颜色间的色差是不满足标准的（红字加粗部分）。首先我们这里校验的基准色都是可以直接拿来用在设计稿中或者用于后期推导其他色板的，所以校验目标颜色的亮度阶梯是固定的，如黄色取亮度 0.6 阶梯，橙色取 0.44 阶梯。所以，留给我们的选择就是改变色相与色度，通过微调的方式重新生成色板，使被校验的基准色达到色差要求。经过多次尝试，我们发现：如橙色，满足色差要求的同时整个色阶会偏向红色；而黄色，满足色差要求的同时整合色阶需要偏向绿色，结果会很脏，否则会更加偏向橙色不满足要求。最主要的原因是：感知均匀的色彩空间并不像传统色彩空间那样可以肆无忌惮的调出想要的颜色，加上工具和算法的限制会导致微调并不起作用，直观的体现就是换了其他相近的颜色但生成的色阶结果还是一样的。这个时候我们就需要做出取舍了，我们最终选择了保视觉效果而非色差，或许我们后续还有机会回头重新看待这个缺陷。无法满足 CIE2000 标准的颜色，也尽量保证满足 CIE1976 标准，推荐使用工具 iWantHue 计算。③ 色度分布观察所有颜色的色度分布趋势，我们会发现用来生成色阶的基准色刚好处于色度曲线顶点位置处，这是为何？猜测：根据色度分布曲线我们可以大致推测出 Chroma.js 算法的关键点在于基准色，你输入的基准色的色度会是最高的，然后依次向两侧色阶降低。那么，基于该结论，我们就可以知道为什么在步骤 2.2.2 中生成的黄、橙色阶是不理想的了。因为你把整个色阶里的最高色度点定的太低了，以至于使整个色阶偏“暗”。这也反向验证了我们选择色彩矫正前的黄、橙色作为新基准色的做法是可行的。说通俗一点儿就是：选择用于生成色阶的基准色，一定要视觉舒适，要“漂亮”。举个不太恰当的例子，如果你的基准色可以直接拿来用在设计稿中，那么它大概率就是一个合格的基准色。最后，我们来对比一下我们的可视化色板（CIELch）与设计系统色板（HSB）的色阶过渡效果。灰度模拟效果。三、分类色板用于表示可视化场景中的不同类型的数据。1. 竞品分析我们参考知名可视化产品 ColorBrewer2 中的分类色板，通过分析其不同主题中的色彩规则来制定我们的分类色板。主题一：三套不同亮度的色板，最多 8 种颜色，色相一致，适用于不同场景，同时也适用于不同品牌调性，如清新、沉稳、复古，思路值得借鉴；主题二：两套不同亮度的色板，最多 9 种颜色，与主题一原理类似，后续扩展主题时可借鉴；主题三：相邻颜色色相一致但相对亮度明暗交替，最多 12 种颜色，适用于多数据类型的场景，可以借鉴；主题四：没搞懂原理及用途，先放之；主题五：整体偏亮，最多 12 种颜色，相邻颜色色相不一致但相对亮度明暗交替，所以也适合多数据类型场景，思路可借鉴。结合其他可视化产品，我们确定了接下来要做的事情的一些基本思路：通过某种取色规则制定不同风格的分类色板，根据其效果选择一套适合我们品牌调性的；分类色板要兼容多数据类型和少数据类型；少数据类型时，相邻颜色色相不同且明暗交替；多数据类型时，相邻颜色色相相同且明暗交替。2. 生成色板① 风格确定与基础色板分类色板颜色主要考虑明暗交替变化（兼顾视障用户群体），其次考虑色彩美观度及颜色间的对比是否协调，如黄、橙色不脏，中性色不能太深或太浅等。我们一步步来，先把风格确定一下。在全量色板上，我们以主题色所在的相对亮度阶梯为基准，通过明暗交替的方式排布取色标准点。在进行明暗交替取色时，取更暗还是更明，主要取决于色彩美观度及颜色之间协调性。再以相同的规则，将取色标准点整体向上向下偏移取出相对较亮和较暗两种风格的色板。当然，如果你想要更亮或者更暗的风格，改变偏移量即可。较亮。较暗。至此，我们得到了三套不同风格的基础分类色板，结合我们的产品调性，并在实际使用场景中进行验证，我们选择了相对沉稳、中立的版本。灰度模式模拟效果。色相相对亮度分布示意。② 扩展色板前面提到过，分类色板还需要兼容多数据类型场景。如我们现在的基础色板中有 9 种不同的颜色，如果一张图表需要用到 10 种颜色该如何解决？常用的解决方案是将生成的基础色板颜色循环使用，如 Echarts，但这种方案有一个很大的弊端就是会出现首尾颜色相接无法正常区分的情况。因此，我们决定基于基础色板按相邻颜色色相相同但明暗交替的规则衍生出一套扩展色板。注意观察，基础色板中的蓝、红、青、粉色相对亮度值为 0.36，而扩展色板中却为 0.287。这是由于基础色板颜色需要满足明暗交替原则，而对应到扩展色板中时，相邻颜色已为明暗交替的同色相颜色，因此无需再将所有暗色都处理成明暗交替。扩展色板使用效果。③ 关于使用顺序在风格确定步骤中，大家可能会有疑问：取色标准点怎么排布看懂了，但要得出分类色板，还差一个必要条件，那就是不同色阶的摆放顺序。其实这个摆放顺序就是分类色板中的颜色使用顺序，这个顺序至关重要，为何？首先，无需过多解释的就是：顺序不一样，意味着分类色板不一样，这是不同可视化产品之间差异化体现的重要途径，也就是我们前面提过的 体现整个可视化色彩体系贴近品牌调性的另一关键步骤。其次，基于分类色板的特性我们可以明确的一点就是：这个顺序是固定的，不能随意更改，否则会破坏整个产品的视觉和谐度。你不能说环形图用顺序 1，玫瑰图用顺序 2，或者这个页面环形图用顺序 1，另一个页面环形图又用顺序 2。最后，这个顺序会直接影响取色标准点的排布。顺序的不同，意味着原本应该取的暗色却变成了亮色，导致整个分类色板明暗变化产生差异。看到这里大家可能会发现，这正是用来生成不同主题的好手段啊！至于如何决定这个顺序，应该是仁者见仁智者见智并无对错的，这里只阐述一下我们的确立依据：第一位是主题色绿，其次为蓝色。一方面考虑使用绿、蓝等偏中性的颜色可以保证大多数图表在页面中不会突兀，另一方面也能够兼容大多数 B 端产品的色彩基调。其次为避免页面过于单调冷淡，所以加入暖色--黄色中和。约定成俗的语义色就是红、黄、蓝、绿，所以考虑将红色也加进来。不过红、黄色相邻的话会使色板变得过暖，可以在其中间加入偏暖的中性色-紫色来使其过渡均匀。此时整个色板呈现冷-暖变化趋势，紧接着需要回到冷趋势，同样为了避免发生冷暖突变，我们加入绝对中性色--灰色来中和，顺位往下走就只剩青色可选了。接着就是暖色橙色，而粉色是个轻佻暧昧的颜色，使用时稍有不慎就会轻易打破整个页面的风格，所以放在最后，整个色板的顺序就定下来了。此外，除了考虑颜色自身冷暖属性、语义属性外，还需要考虑识别度、视觉歧义、视障等因素。如从识别度角度考虑会使橙、黄色不相邻，绿、青色不相邻；如从视障角度考虑会使红、绿不相邻，粉、青色不相邻等。最后，需要申明的观点就是：可视化场景仅靠颜色是解决不了所有问题的，这其中需要设计师有能力将复杂的视觉问题和交互问题进行简化、合理化，如使用恰当的图表，使用纹理图形辅助识别，重组数据便于理解等。图片源自：Matplotlib。3. 色彩验证① 视障验证视觉障碍用户群体主要是色盲色弱用户，根据 Color Oracle 的统计，全世界人类中，绿色盲占比 5%，红绿色盲占比 2.5%，蓝黄色盲占比 0.5%。我们需要保证的就是尽可能让这部分群体也能够无障碍使用我们的产品，无障碍解读数据。② 色差验证步骤 2.3.2 中详细介绍了色差的验证方式以及验证目的，这里不赘述。4. 应用不在实际业务场景中验证颜色的行为个人认为就是在耍流氓。① 使用规范实际应用时发现，图表类型众多样式差异巨大，统一使用全量分类色板中的 9 个颜色并不合适。如折线图，其图形（线段）视觉占比非常小，通常是 1～2px 粗细的线段。使用全量分类色板时，部分颜色（如橙色与黄色，红色与粉色，绿色与青色）虽能顺利辨识，但长时间查看会产生视觉疲劳导致辨识困难。此外，在 Dashboard 或 BI 等场景中，通常会遇到数据量大，图表类型繁多，数据类型繁多的情况，此时的页面视觉效果将是灾难级的（使用 Echarts 主题定制工具模拟）。因此，针对常规场景，遵循少即是多原则，我们去除了可能会无法辨识的颜色，将可用颜色数量限制为 6 个。特殊场景不做限制，如桑基图。超出 6 种数据类型时，使用分类色板扩展色板，共 18 个。超出 18 种数据类型时，使用强调色板。② 应用效果这里使用屏幕截图，所以效果会出现些许偏差。四、顺序色板通过亮度变化均匀的一组颜色表示具有顺序、梯度、频率等关系的数据。1. 固定色板顾名思义，固定色板即色阶数量有限的色板，用于数据阶梯较少的场景。可基于两个准则确定顺序色板：色阶亮度层次拉开；色阶使用顺序明确。因此，从全量色板中选取色阶时需要注意，亮色区域间隔取色，保证数据阶梯之间能够清晰分辨。基于此，确定我们的 7 阶固定色板。最亮阶梯不满足对比度要求，用于图表中可能无法识别；最暗阶梯无法顺利辨别多个颜色之间的区别，也应避免使用。而明确色阶使用顺序时，除要考虑遵循规律（方便开发实现）外，还要考虑页面和谐。通常的做法是从最亮阶梯开始往上取，当数据阶梯比较少时，其效果其实并不是我们想要的。因此，我们改变一下这个顺序：从中间阶梯（主题色所在的阶梯）开始往下取，取完再依次往上取。该方案仅供参考，目前尚未与研发同学达成共识验证其可行性。最终，我们得到一个包含使用顺序的色板（从左往右依次对应数据阶梯数量）。应用效果（以主题色为例）。2. 动态色板动态色板主要应对数据阶梯量大且不可预知的场景，因此需要借助算法根据数据分布阶梯自动生成对应的色阶。设计师仅需提供最亮、中间及最暗的三个颜色即可。因应用场景区别于固定色板的应用场景，所以动态色板会使用到全量色板中的最亮和最暗阶梯。当然你也可以选择使用与固定色板相对应的最亮、最暗阶梯，本质上设计师提供的三个颜色都是可以自定义的。应用效果（以主题色为例）。五、强调色板与分类色板相对应，当分类数据较多时，或需对比数据时，通常会使用强调色板强调数据，弱化无关数据。1. 取色规则基于全量色板，以基准色作为强调色，向下扩展对应的弱化颜色。注意，与分类基础色板不同的是，通常情况下的强调色不会同时出现，因此无需考虑明暗交替；其次，与分类扩展色板不同的是，因分类扩展色板需要考虑对比度，这里则需要尽量弱化，所以弱化色亮度要高于分类扩展色板。2. 应用效果六、发散色板用来表示具有正负、高低、涨跌等关系的数据，拥有临界中间值，因此通常使用一对冷暖色来呈现。1. 取色规则首先，根据发散色板表达数据对立关系的特性，我们在选取对立冷暖色时，可以通过模拟视障效果来排除掉一些可能会出现问题的颜色。我们选取了既可以表达冷暖关系又不会出现问题的三组颜色，以及表达中立的一组颜色。其次，由于发散色板的使用场景与顺序色板类似，因此我们可以基于全量色板扩展出对应的固定色板。并使用 Chroma.js - chroma.mix 工具将对立相接的两个颜色进行混合，使其过渡更加均匀。视障用户效果模拟，既不能混淆颜色，又不能改变原冷暖关系映射。而为了应对数据阶梯量大且不可预知的场景，我们可以基于固定色板扩展出动态色板，与顺序色板动态色板原理类似，本质上是一组渐变色板，数据阶梯分布区间有多少，则可以在渐变色板上插对应数量的值。此处再次体现感知均匀色彩空间的优势，渐变色过渡也是非常自然的。2. 应用效果可视化效果使用 Datawrapper 模拟。3. 色相偏移关于发散色板的生成，其实还有一种使用范围更广的色相偏移色板，相对无色相偏移色板来说过渡更加自然，更加符合人类对色温的认知。也就是常说的随着色阶的变化冷色会更冷，暖色会更暖。先来看下对比效果：我们的方法是取三种不同暖色中的关键色与三组不同冷色中的关键色，使用 Chroma.js Color Palette Helper 进行混合，生成新的色相偏移色板。但使用该方案并不能生成所有想要的色板，因为我们的一个大前提是所有颜色取至全量色板。如在生成红-蓝发散色板时发现，并没有合适的三组暖色供我们选择用来取出关键色，这就会导致生成的色板偏色严重无法使用。所以，个人猜测，未来一方面应该向更科学合理的色相偏移方案探索，另一方面在该场景中不应将取色标准局限于全量色板。由于我们的产品中很小概率会使用到发散色板，所以这里不做深入研究，也避免误导大家，就此打住。七、语义色板可视化场景中不受主题、风格影响的颜色，是约定成俗具有特定寓意的颜色，通常用于表示告警等级、正负关系等。1. 取色规则关于语义色板的取色来源颇受争议，一种方案是直接选取设计系统中的语义色，另一种是从可视化全量色板中选取并重新定义。其实两种方案各有优劣，关键在于如何客观评判。我们选择从可视化色板中选取并重新定义的理由如下：设计系统色板的色彩空间与可视化有本质区别，无法做到统一；设计系统中定义的语义色感官上饱和度及亮度与可视化色彩不统一，融入可视化场景中不和谐；图表中的元素形状面积通常占比较大，与其他颜色的元素搭配时，使用可视化色彩会更协调；设计系统中的语义色从使用场景、设计思路等角度考虑的话，会与可视化场景有细微差别，解耦设计更合理一些。注意灰色语义色取至中性色板，后面会解释原因。2. 应用效果八、中性色板中性色板用于可视化图表中的标题、轴线、文字等场景，与设计系统中性色板保持一致，这里不做特殊定制。上文提到过，为何中性色板区别于语义色板，可以与设计系统共用呢？首先中性色板本质上都是中性色，应该区别于“有色彩”的颜色。那么，从其使用场景上来看，中性色板可以不受系统限制，独立于设计系统或者可视化组件库以外，成为一套公共的色板；其次，从使用者角度来考虑，中性色板可以说是使用范围最广的，这就形成了肌肉记忆，不再适合重新开辟一套来给大家造成记忆负担；再其次，从页面效果来看，理想状态还是所有中性色保持一致，不能说承载图表的卡片标题是一个颜色，而同级别非图表卡片标题又是另一个颜色；最后，从底层色彩空间来看，中性色是不受色彩空间限制的，可以通用于各种不同色彩空间搭建的系统中是必然的。九、总结总之就一句话，关于颜色的探索是永无止境的，随着探索的不断深入，越发觉得距离踏入门槛是越来越远了。本篇来源：优设网原文地址：https://www.uisdc.com/derived-visual-color
小技巧 颜色 快速 大家好，这里是和你们聊设计的花生~之前和大家分享了 4 期提升 Ai 文本排版效率的小技巧，很多小伙伴都说非常实用。这段时间我又学到了不少新的 Ai 小技巧，冷门但可以有效简化一些操作步骤，今天就先整理其中五个分享给大家~往期回顾：掌握这5个Ai小技巧，帮你快速提升文字排版效率（四）大家好，我是和你们聊设计的花生~今天继续为大家带来 Ai 排版技巧第四期，这期主要和大家分享 5 个与长文本排版相关的实用小技巧，一起来看看吧~上期回顾：1. 设置网格并转换为参考线在进行折页或者画册设计时，为了保证版面的整洁有序、信息清晰传达，设置网格是必然可少的一步。阅读文章 > 一、快速切换填色模式之前想填充渐变色时，我都是用鼠标在左侧工具栏里点击渐变色，后来发现其实纯色、渐变和无填充三个选项都有快捷键，分别是""、"/"，也就是半角键盘状态下的逗号、句号和顿号键。选择对象后使用快捷键可以快速在三种状态间切换，比鼠标操作更方便。二、内部绘模式Ps 里的“剪切蒙版”可以让顶部图层的内容局限在底部图层内部，其实在 Ai 里面也有一项功能可以实现同样的效果，就是“内部绘图”模式，快捷键为 Shift+D。使用这个快捷键可以在“正常绘图”、“背面绘图”和“内部绘图”三种模式间快速切换，满足不同的绘图需要。（进入内部绘图模式后对象四周会出现虚线标记，如果内部绘图模式无法选取，可以右键选择“取消编组”或“释放剪切蒙版”）。三、快速切换边角样式Ai 里的边角样式有“斜接”“圆角”和“斜角”三种，通常是点击顶部工具栏里的“描边”选项进行修改。其实边角样式也有快捷键，具体的操作方法为：用直接选择工具选中需要修改的边角，在鼠标右下角出现小标记时，按住 Alt 键再次点击这锚点，就能在这三种样式中快速切换了。四、吸取局部颜色使用吸管工具吸取其他对象的颜色时，会将该对象的颜色完全复刻过来。如果我们想只取其中一种颜色，可以在取色的时候按住 Shift 键。用这种方式我们可以只吸取渐变色中的一种，或者只吸取描边的颜色。（Tips:通常我们先选中 B，然后用吸管工具去吸取 A 的颜色，则 B 的颜色变成和 A 一样。如果我们选中 B 后，按住 Alt 键用吸管工具点击 A，那会变成 A 颜色和 B 一样。）五、矩形橡皮擦再给大家介绍一个有关橡皮擦工具的新用法。Ai 里的橡皮擦是圆形的，用它来擦除形状时边缘总留下弧形，如果想让橡皮擦变成方形，可以在使用的时候按住 Alt，就能像拉取矩形选框一样删除不需要的部分。以上就是为大家推荐的 5 个冷门但实用的 Ai 小技巧，赶快打开软件亲手操作一遍吧 ~ 喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：简单又实用！5种设计师必学的海报设计装饰元素（三）大家好，这里是和你们聊设计的花生~今天继续为大家带来海报设计常用 装饰元素 的第 3 期，本期的元素分别是：英文字体、中心辐射线、心形、镭射风及卡通风贴纸和渐变波点，并有超多实用教程和免费可商用资源分享给大家，一起来看看吧~上期回顾：一、英文字体英文字体在海报设计中很常见阅读文章 > 让版式更好看！7个字体排版设计小技巧今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-ai-tips-5
颜色 饱和度 图层 大家好我是态爷，上色是很多同学在学习插画过程中觉得比较难的一部分，今天就和大家分享我的上色思路。我会用例子详细展示如何为一张自然场景的插画上色。往期教程：大神总结！学插画必知的6种构图小技巧构图决定了整体画面的基调，是绘画的一个关键知识点。阅读文章 > 先看一下成品图：这张插画的草图是我之前练习构图的时候画的，比较粗糙，先细化一下。1. 铺底色草图细化完成，接下来是找参考图。参考图的作用是在动笔前对整个画面的构图、造型、色调有一个大概的心理预期。这一步非常重要，不能省略，没有参考图我宁可不动笔。我想画一个蓝天白云下的大草地，有飞机单车，远处还有点雪山，参考图也按这个方向找。通过参考图，我得到了一组基础配色，这一步需要注意的是不要用吸色的方式找颜色。照片的颜色是由一堆杂乱的像素混合而成的，而不同照片的颜色混合也是不一样的。吸色只能吸到一个独立像素点，而不是一个整体的颜色，更谈不上色彩之间的搭配。要用眼睛去看，拿画笔的是人，不是电脑。接下来是进一步确定配色比例。这里有一个比较通用的配色公式「60＋30＋10」，大体分为 2 种：60％背景色＋30％主角＆配角色＋10％点缀色60％主体色＋30％次级色＋10％辅助色这个公式可以根据你自己的情况来调整，比如 70＋25＋5，或 60＋35＋5；而且配色公式不是绝对的，只是辅助手段，不要陷入到教条主义中。在这个画面里，飞机是绝对的主角，所以用大片的蓝天来做衬托；草地的绿色饱和度不能高，绿色不能太纯，否则就抢戏；背景群山混合了更多天空的环境色，整体压成深蓝色，这样背景就能统一成一个蓝色调，然后通过“蓝色—绿色—黄色”的近似色渐变逐渐延展到前景来。提升完善人物的固有色和明暗划分。除了飞机的黄色，其他所有颜色都是低对比度低饱和度，比如骑自行车的人，衣服的颜色基本是直接从背景中提出来的，仅靠自行车和 T 恤的黑以及清晰的外轮廓与背景作分离。然后是背景的初步细化，这一步基本确定背景的层次和颜色。场景的层次变化是很丰富的，可以通过明暗对比、色彩对比、塑造程度、清晰度等的递增递减来表现从远到近的空间感。2. 背景细化接下来开始细化。我的习惯是先从最远处画起，然后逐渐往前推。这样的好处是可以无脑推空间。按塑造程度从 1-10 来说，前景是 9 或 10，那么背景就是 1 或 2。这样就可以很轻松的确定画面内元素的造程度，从而搭建整个空间。这样做的前提必须是对整个画面有了一个明确的思路，并且铺好底色。在这一步的时候，前面找的参考图就全都派上用场了，对着画就完事了。不过在画着的时候记着当时的部分塑造程度是多少，环境色和固有色的比例是多少，让空间意识一直扎根在脑海中。然后是远山的细化。如前面说到的，空间远处的色彩对比度要低才能来开视觉层次。低对比度下的明暗，尽量统一在一个色系里，远处的山甚至都可以不用暖色，直接蓝色偏点紫取个低饱和度，在大色调的对比下可以直接给山地脑补一层棕色。画水下的人物也可以用这个方法。前景草坡的地面虽说层次最丰富塑造最完整，却也不用一根一根草去画出来。只需要把基底颜色做丰富了，加点土块石头，然后在色阶之间加几根冒头的草。就像画头发一样，靠的不是发丝，而是基础的层次。3. 主体细化我在画画的时候习惯把图层整理的比较有条理，最上面是线，接着是明暗，最底下是用来做剪辑蒙版的底色，中间是根据颜色或部位分的固有色。在进行单个部位的塑造时，我可以直接给图层加个 ALPHA 锁定，改起颜色来也很快，后期维护起来特别简便。骑单车的人不是主角，所以只需要在明暗的基础上加一到两个色阶就可以了。图层的分法还是得按画风来定，比如厚涂，我可能就直接一两个图层完事了。飞机的处理也是同理。虽然线和固有色已经分的很清晰了，也不能忘了空间二字。我给下方机翼的暗部加重了颜色，再加一个较强的反光，然后减弱了上方机翼的颜色，这样上机翼-机身-下机翼的空间就能分出来了。到这一步，整个画面就都完成了。4. 整体调色画完之后，我一般会进行一个简单的调色。调色的目的一个是统一色调，再则对整体颜色进行一次大的倾向调整。一般是在图层上方新建一个调整图层，用的是「可选颜色」。先对背景进行一个简单的调整，把暖色部分加一些饱和度，再把绿色往冷了调，目的是让背景色调高度统一，以及进一步突出飞机的黄色。然后是画面整体的一个调整。先用「曲线工具」调整了一下黑白的色阶，再用「可选颜色」让整体暗部偏蓝；然后提亮了黄色部分的明度，再减一点点饱和度，因为暖色饱和度太高容易焦躁；最后再新建一个图层加一点杂色，用「颜色加深」叠上去，为画面增添质感。最后请@麦点盛世刘辉 帮我配了字，完工。以上就是我日常上色的过程分享，希望对正在学习插画的同学们有帮助。「关注我」优设账号： https://www.uisdc.com/u/87222/publish/post微博账号： https://weibo.com/u/6517085292站酷账号： https://www.zcool.com.cn/u/16953096优设大课堂课程： https://xue.uisdc.com/teacher?id=5f35175002a5853cf70fc51d推荐阅读：优设专访插画师态爷：画完100张电影海报后，我终于学会怎么做好一碗蛋炒饭大家好，这里是和你们聊设计的花生~最近非常幸运，有了一次专访插画师态爷的机会。阅读文章 > 听说你不会打光？高手总结了8种常见的打光方法本文梳理了8个常见的打光方式，结合清晰的手绘图例，让知识点一目了然。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/illustration-coloring-process
颜色 样式 代码 前言随着近几年 Figma 等一系列在线设计工具的崛起，相信设计师对设计系统的都有了更深的了解。其实设计系统的建设是一个非常庞大而复杂的工程。我们通过各种设计规范等对产研流程提效，但还是会经常遇到一些棘手的问题。1. 开发用的颜色/字体样式/投影等与设计稿存在差距；2. 颜色选择困难。不同设计师之间在用各种层级的文本颜色时，到底用 Gray1 还是用 Gray2，不知道该选哪一种；3. SaaS 类的产品需要根据客户的品牌色调整产品的主色，设计和开发都面临巨大的工作量；4. 设计稿的更新无法及时在开发者的代码中体现，一是因为开发首先需要拿到新的设计稿，再根据标注甚至肉眼判断区别后更新代码；另一方面，设计稿中看似简单的改动可能导致较大范围的代码改动，例如字体大小等；为了解决和优化上述的问题，Design Token 应运而生。它可以高效地解决产品设计和开发过程中的细节和风格一致性的问题，提高产研团队设计质量和协作效率。什么是 Design Token“Token”原本的意思是“令牌，指令”，与 Design 连在⼀起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。腾讯出品的 Design Token 应用指南：设计篇在线设计、研发协作工具和组件概念的普世化，让设计、研发效率大大提升；数字产品发展到今天，数字产品对迭代速度、个性化品质要求也越来越强。阅读文章 > 原子设计理论提出者 Brad Frost （布拉德 · 弗罗斯特）在《Atomic Design》中提到：原子设计理论从原子（Atoms）、分子（Molecules）、组织（Organisms）、模板（Templates）、页面（Pages）、标准流程（Patterns）再到更完善的设计体系（Design Systems），这一切都是为了产品设计、研发效率和一致性提供帮助。同时，它们也是传达设计原则、构成产品独特气质的基石。Design Token 就是原子级的最基础的构成要素。根据北美顶级 SaaS 企业的开源设计系统 Saleforce Lightning Design System 的解释，Design Token 是设计系统中的可视化原子，是设计属性的命名实体，使用它们代替具体编码值（如颜色的 16 进制、间距的像素值等），以便于维护一套可扩展且一致性的设计系统。可以说，Token 就是最底层的原子，本质上就是找到了组件、属性和代码之间的对应关系，统一了设计样式和前端语言，使组件和设计系统可以被快速管理。Design Token 的优势基于上述关于 Design Token 的基础解释，可以将 Design Token 的好处可总结为：设计语义-更易理解设计方案-更加一致主题皮肤-一键替换设计变更-高效维护设计成果-精准还原1. 设计语义-更易理解每一个组件的基础元素都可以用 Token 进行语义化的命名，帮助设计师和开发建立统一的描述语言。例如#91d5ff 这个色值按照传统的设计规范命名的方式，它可能叫 Blue-3。在实际应用的时候，设计师和开发并不能直接通过 Blue-3 来理解这个颜色到底是用在什么具体场景当中。而当我们通过 Token 语义的方式让它达到组件级别的精度时，它会叫：color-primary-brand-light-disable，不同的设计师和开发就能迅速的理解这个颜色应用在什么具体场景当中。2. 设计方案-更加一致当使用组件库实际运用到项目当中时，我们有时候会有不同设计师合作产出一个项目的情况。对于一些不熟悉设计规范或新加入的设计师来说，就会困惑，当使用二级文本色的时候，究竟是用 Gray2、还是 Gray3、Gray4。而这个时候，我们定义一个 Token 名称叫：color-text-secondary，这个 Token 嵌套的颜色是 ：Gray3，这样我们设计师在使用的时候，只需要选择 color-text-secondary 这个 Token 变量即可，能选择的颜色就是唯一的，这就能在一定程度上确保不同设计师在同一个场景当中的设计稿保持高度一致性。3. 主题皮肤-一键替换主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个 Token 命名，例如变量名都叫：color-primary-brand-light-default，蓝色皮肤下对应的值为：#165DFF；红色皮肤对应的值为：#F53F3F。然后通过插件面板的一键操作即可完美切换。同时这种切换模式也可以带入 tokn.josn 代码（后面会具体讲如何输出 json 文件交付开发）中，与开发进行同步。4. 设计变更 高效维护还是上面的例子，当我们的二级文字颜色 color-text-secondary 需要进行变更，从 Gray-600 变为 Gray-500。如果没有“color-text-secondary”这个 Token，我们可能需要手动去选中所有用了 Gray-600 的二级文字的图层，一个一个地将它们改为 Gray-500，而当我们有了“color-text-secondary”这么一个 Token 时，我们只需要将 color-text-secondary 的值一键从 Gray-600 变为 Gray-500 便可以完成产品全局的颜色变更。进而设计师可以将 token.json 代码（后面会具体讲如何输出 json 文件交付开发）同步更新给开发 ，开发直接一键替换，线上的界面就能半自动地迅速应用到变更后的色值。5. 设计成果-精准还原设计稿能否被开发精准还原，这几乎是每一个设计师在实际项目中会遇到的问题。我们在进行设计验收的时候，即便花了很多时间进行走查，在表格上列举了很多细节问题，但最终的还原效果并不能得到保障。甚至在一些时候会感觉做验收比重新做一遍设计稿还要费劲「emo」，有的时候甚至会直接按 F12 在网页上改代码给开发提示「狗头」。例如，在常规不使用 Token 的情况下，开发同学使用的是硬代码的模式，代码编辑器无法判断这个颜色是否正确，如果开发不小心输错了一位数，就很可能导致线上运行时候的不一致。而使用了 Token 之后，开发只需要输入这个场景的 Token 名称的前缀，代码编辑器便会自动化地提示有哪几个颜色供选择就可以了，如果不正确，代码编辑器还会给出报错提示，开发同学可以在写代码的过程中完成基础的检验工作，这样一来，设计师的成果便能够一定程度上的精准还原，设计师验收的工作量也会小很多。在设计系统中应用 Design Token上面讲了这么多理论，接下来开始实战，准备好～1. 提炼 Token 组成元素Design Token 是构成设计语言的基本构建块，是设计系统中最核心、最基础的影响视觉风格的元素。根据 Figma Tokens 插件默认提供的面板中，可以将分别以下组成元素：Color 颜色、Shadow 投影、Typography 字体样式、Size 尺寸、Space 间距、Border Radius 描边圆角、Border Width 描边宽度、Opacity 透明度等2. 定义 Token 命名规则关于 Token 的命名规则，不同的团队有不同的定义方式，但其本质都是为了提高产品的一致性和工作效率。因此在对 Token 命名规则进行分类整理时，设计需要与开发同事达成一致，以确保能够更好地落地。在制定自己产品的 Token 命名规则前，带大家看一下大厂的 Design Token 都是怎么命名的腾讯文档 Token 变量表：https://mp.weixin.qq.com/s/sRRPlsxaUZj7220PLoFiRw腾讯 TDesign 开源设计系统 Token：https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less:root,:root[theme-mode="light"] {// 文字 & 图标 颜色--td-font-white-1: rgba(255, 255, 255, 100%);--td-font-white-2: rgba(255, 255, 255, 55%);--td-font-white-3: rgba(255, 255, 255, 35%);--td-font-white-4: rgba(255, 255, 255, 22%);--td-font-gray-1: rgba(0, 0, 0, 90%);--td-font-gray-2: rgba(0, 0, 0, 60%);--td-font-gray-3: rgba(0, 0, 0, 40%);--td-font-gray-4: rgba(0, 0, 0, 26%);// 基础颜色--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告--td-error-color: var(--td-error-color-6); // 色彩-功能-失败--td-success-color: var(--td-success-color-5); // 色彩-功能-成功// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态--td-brand-color-hover: var(--td-brand-color-7); // hover 态--td-brand-color-focus: var(--td-brand-color-2); // focus 态，包括鼠标和键盘--td-brand-color-active: var(--td-brand-color-9); // 点击态--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态// 警告色扩展--td-warning-color-hover: var(--td-warning-color-4);--td-warning-color-focus: var(--td-warning-color-2);--td-warning-color-active: var(--td-warning-color-6);--td-warning-color-disabled: var(--td-warning-color-3);--td-warning-color-light: var(--td-warning-color-1);// 失败/错误色扩展--td-error-color-hover: var(--td-error-color-5);--td-error-color-focus: var(--td-error-color-2);--td-error-color-active: var(--td-error-color-7);--td-error-color-disabled: var(--td-error-color-3);--td-error-color-light: var(--td-error-color-1);// 成功色扩展--td-success-color-hover: var(--td-success-color-4);--td-success-color-focus: var(--td-success-color-2);--td-success-color-active: var(--td-success-color-6);--td-success-color-disabled: var(--td-success-color-3);--td-success-color-light: var(--td-success-color-1);// 遮罩--td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用// 文本颜色--td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要--td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要--td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明--td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用--td-text-color-anti: #fff; // 色彩-文字-反色--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接// 分割线--td-border-level-1-color: var(--td-gray-color-3);--td-component-stroke: var(--td-gray-color-3);// 边框--td-border-level-2-color: var(--td-gray-color-4);--td-component-border: var(--td-gray-color-4);// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边--td-shadow-inset-top: inset 0 .5px 0 #dcdcdc;--td-shadow-inset-right: inset .5px 0 0 #dcdcdc;--td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;--td-shadow-inset-left: inset -.5px 0 0 #dcdcdc;// table 特定阴影--td-table-shadow-color: rgba(0, 0, 0, 8%);// 滚动条颜色--td-scrollbar-color: rgba(0, 0, 0, 10%);}Element-Plus：https://element-plus.org/zh-CN/--el-bg-color: #ffffff;--el-bg-color-page: #ffffff;--el-bg-color-overlay: #ffffff;--el-text-color-primary: #303133;--el-text-color-regular: #606266;--el-text-color-secondary: #909399;--el-text-color-placeholder: #a8abb2;--el-text-color-disabled: #c0c4cc;--el-border-color: #dcdfe6;--el-border-color-light: #e4e7ed;--el-border-color-lighter: #ebeef5;--el-border-color-extra-light: #f2f6fc;--el-border-color-dark: #d4d7de;--el-border-color-darker: #cdd0d6;Ant Design：https://ant.design/components/overview-cn/html {--ant-primary-color: #1890ff;--ant-primary-color-hover: #40a9ff;--ant-primary-color-active: #096dd9;--ant-primary-color-outline: rgba(24, 144, 255, .2);--ant-primary-1: #e6f7ff;--ant-primary-2: #bae7ff;--ant-primary-3: #91d5ff;--ant-primary-4: #69c0ff;--ant-primary-5: #40a9ff;--ant-primary-6: #1890ff;--ant-primary-7: #096dd9;--ant-primary-color-deprecated-pure: ;--ant-primary-color-deprecated-l-35: #cbe6ff;--ant-primary-color-deprecated-l-20: #7ec1ff;--ant-primary-color-deprecated-t-20: #46a6ff;--ant-primary-color-deprecated-t-50: #8cc8ff;--ant-primary-color-deprecated-f-12: rgba(24, 144, 255, .12);--ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, .3);--ant-primary-color-active-deprecated-d-02: #dcf4ff;以上截取的部分 Token 基本是在 Github 上开源社区能找到相关的代码。如果我们想要找一个非开源的设计系统的 Token 怎么找呢？这里以飞书为例，个人觉得飞书整体的配色非常舒适，想要研究一下其中的 Token 是怎么制定的。首先打开飞书网页，按 F12，选中任意元素，便可在“样式”中找到飞书产品所有的 Token 是如何命名，以及可以分析研究其中的色彩运用规律。飞书 Token：www.feishu.cn--bg-base: var(--N100);--bg-base-raw: var(--N100-raw);--bg-body: var(--N00);--bg-body-raw: var(--N00-raw);--bg-body-overlay: var(--N50);--bg-body-overlay-raw: var(--N50-raw);--bg-content-base: #f8f9fa;--bg-content-base-raw: 248,249,250;--bg-filler: var(--N200);--bg-filler-raw: var(--N200-raw);--bg-float: var(--N00);--bg-float-raw: var(--N00-raw);--bg-float-base: var(--N100);--bg-float-base-raw: var(--N100-raw);--bg-float-overlay: var(--N50);--bg-float-overlay-raw: var(--N50-raw);--bg-float-push: rgba(var(--N00-raw),0.8);--bg-mask: rgba(0,0,0,0.4);--bg-mask-raw: 0,0,0;Token 命名规则总结通过上面的大厂 Token 参考我们可以分析出一些普适性的规则：1. 单词之间用“-”分隔；2. Token 前缀可自定义添加自己产品的简称，例如：“–el-xx”、“–ant-xx”、“–td-xx”；3. Token 可以套 Token，例如：–td-brand-color-hover: var(–td-brand-color-7)；3. 整理 Design Token 资产表分析完各个大厂的 Token 规则之后，接下来正式开始对自己产品的 Design Token 开始建设，首先便是整理一份 Design Token 资产表，可以用文档、表格等形式整理。这里以 TDesign 为例，需要包含 3 列：Token、Value、Describe。这份 Token 资产表整理好之后，可以在设计团队内部进行评审，通过之后再与开发进行对齐。来源： https://tdesign.tencent.com/design/color通过工具创建 Token 并联动设计文件以上主要讲的是在思维层面 Design Token 是怎么推导的，接下来重点讲一下怎么借助一些实用的工具将 Design Token 实现自动/半自动化的落地。这里主要推荐的工具是 Figma Tokens 插件，它是一款基于 Figma 的插件，相对于 Figma 右侧面板原生自带的样式外，能够实现多层级的 Token 管理，同时插件内容能够与 Figma 设计文件实现实时联动。1. 安装并运行插件插件安装地址：https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens安装完成后，在 Figma 文件中打开 Figma Tokens 插件面板，并点击“Get started”，开始创建。2. 创建 Token 变量在 Color 分类处点击“+”号，将之前整理的 Design Token 资产表里的内容一个一个录入进插件当中。如何实现 Token “套娃”呢？例如我们需要创建一个“–td-brand-color”，值为“–td-brand-color-8”，只需要在 Color 值的输入框输入“{–td-brand-color-8}”或“$–td-brand-color-8”，这里通过和开发沟通，推荐使用“{ }”大括号的形式进行赋值。全部 Token 创建完成之后，点击“Create Styles”便可将插件中的样式生成到 Figma 右侧的样式面板中。同时，插件中的修改也能够与样式进行实时同步。3. 通过 JSON 代码快捷导入 Token上面的方法是需要根据 Token 对照表，通过手动的方式一个一个录入 Token，如果团队的设计师有一点代码功底，或者前端同学能够提前介入进来，直接根据 Token 对照表写一份 JSON 文件，那么也可以直接通过复制 JSON 文件里面对应到代码粘贴到 Figma Tokens 的插件当中，能够直接读取代码生成 Token 样式，并联动 Figma 文件。4. 导入 Figma 文件中已有的样式除了使用 Figma Tokens 插件一个一个创建样式以外，插件还支持从我们的 Figma 文件中已经有样式导入，我们也可以点击“Import”，再勾选“Color”、“Text”、“Shadows”一键导入文件中的样式并生成 Token。向研发交付 Design Token1. 输出 Token.json 代码文件点击顶部“JSON”，再点击“Export”，即可将插件面板的创建的 Token 导出为一个 token.json 文件，将 json 文件交付给开发，开发便可使用。若开发不知道如何使用，可以分享这个 Figma Tokens 作者发布在 Github 上的代码稍加学习，便知道如何使用了。github 地址： https://github.com/six7/figma-tokens-example-tailwindcss2. 如何更新 Token当之前定义好的 Design Token 需要增删改时，插件官方推荐的更新同步方式主要有 JSON、 http://JSONBin.io 、URL、GitHub 等几种方式，具体可查阅官方文档： https://docs.tokens.studio/sync/sync 。由于后面集中同步方式涉及到一些小门槛，这里简单介绍第一种最为通俗的更新方式就是直接通过更新 JSON 文件，可以在企业 IM 中和研发创建一个共享空间，每次 Token 有更新只需要将导出的 JSON 文件替换原有的文件即可，开发再应用新的 JSON 文件，便可实现高效便捷的更新 Token。使用 Design Token 在产品中一键换肤在一些 To B SaaS 产品当中，产品的主色可能会跟随客户公司的品牌色进行调整。使用 Design Token 便能够便捷高效地实现一键换肤。1. 首先我们会定义一个“global”基础主题，在这里将所有后面不同皮肤的颜色都写入进来；2. 在“blue”和“red”主题皮肤下，品牌色命名都为：“tr-color-primary-brand-light-default”，但是他们两个皮肤的值不同，一个是 global 中的“{–color-blue-light-6}”，一个是 global 中的“{–color-red-light-6}”；3. 在蓝色皮肤下将“blue”勾选，切换至红色皮肤，只需要勾选“red”，即可实现文件内的所有变量全局替换，同时 Figma 右侧的样式也能实时联动。结语近几年，越来越多的团队开始搭建自己公司产品的设计系统 Design System 赋能到具体产品中落地。我所在的团队也在建设一套适用于自己公司业务的设计系统，在推动设计系统落地时，便运用了 Design Token 进行落地，极大提高了公司设计和研发团队的协作效率。Design Token 给 Design System 带来了新的方式和新的可能，未来希望能够不断扩大 Design Token 的应用价值，赋能到更多的业务和产品当中，让设计系统的应用变得更便捷、更高效。我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注私信与我交流～参考文章https://mp.weixin.qq.com/s/9LJT89vqjdVwsafDckh6Pwhttps://blog.prototypr.io/design-tokens-with-figma-aef25c42430fhttps://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aahttps://uxdesign.cc/design-tokens-cheatsheet-927fc1404099https://docs.tokens.studio大厂出品！腾讯开源企业级设计体系 TDesignTDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/design-token-2
颜色 语义 系统 Hi，我是彩云。咱们平时在做 UI 组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。但如果我们在使用颜色上没有明确的指导原则，颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。我们 APP 中的不一致例子接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：如何通过 Getaround 在设计和技术方面管理颜色概述这个系统的局限性，并说明我们如何改进它什么是语义颜色我们是如何实现它的，以及它带来的优势！我们之前在 Getaround 中如何管理颜色？1. 在设计方面和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。2. 在技术方面在我们的 APP 中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。我们在旧系统中面临的限制在使用这个系统时，团队反复面临同样的问题：如何确保从一位设计师到另一位设计师以相同的方式使用颜色？如果没有适当的指导原则，我们如何确保开发很好的还原？如果明天我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一？让我们试着找出我们是如何陷入这种境地的？1）没有明确的颜色使用规范所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助2）旧品牌的设计包袱以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。旧驱动器品牌我们对新系统的设想在 2021 年初，我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。我们问自己“5 年后我们的 APP 会是什么样的？”。我们会回顾，Getaround 品牌是如何成为我们视觉方法中心的。以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：1）制定指导原则我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。2）颜色能通过可用性标准我们如何确保从一开始就设计出易于使用的颜色？3）易于维护并符合未来趋势我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）我们新的颜色系统：语义颜色在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）我们还测试了 APP 界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？1）什么是语义颜色？语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……2）从基于外观的配色方案到基于语义的配色方案语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习google： https://material.io/design/color/the-color-system.html#color-theme-creationApple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/colorShopify： https://polaris.shopify.com/design/colors#navigationAsana： https://asana.com/brand显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。3）深入研究语义颜色我们的新颜色系统由两部分组成：基础色板语义颜色基础调色板我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。基础调色板语义颜色，语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。请参阅此处的命名法和一些示例：语义颜色结构和示例这意味着来自基础调色板的颜色可以用于多种语义颜色：这就是我们根据这个新原则重新调整颜色命名的方式：我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。语义颜色的好处1）语义色彩嵌入设计原则语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。2）解锁黑暗模式语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。明暗模式下的语义颜色 Primary.Background3）语义颜色高效灵活如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。4）颜色组合指南这个系统似乎很容易使用，但设计师仍然有一些问题：我什么时候可以使用正常文字颜色？我什么时候可以使用次级文本颜色？我什么时候可以使用可交互颜色？为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。Figma 中内置的语义色彩交互指南结果采用这种新的颜色系统产生了一些变化：1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到 Dark 模式。这也使库更轻且更易于维护。2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。总结总结下今天学到的内容：1）发现并准确描述团队在使用颜色时遇到的问题2）如何从提出设想，到以新的方式来定义颜色3）如何通过语义化颜色来使得大家更方便的使用颜色，我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理，这样团队协作才会更加高效。超详细！凤凰新闻「暗黑模式适配落地」全方位复盘凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/colors-standard
颜色 页面 原因 前段时间我在京东买到坏芒果了，要申请售后。作为一个界面设计师我居然点错了按钮。Excuse me？我眼睛是不是不太行了？找了几个人问，有的说不会误点，有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面，不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的，实际上有没有问题得看京东这个页面的用户行为数据。那就以我这个用户的角度，从设计层分析一下到底为什么会点错吧。初步认为，问题主要在于点线面关系，包括字号大小、颜色、视觉层级、组合等。说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎，但产品说我们字号太多，大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受，即使字号少，颜色、层级和组合多的话，也会造成视觉上的“字号多”。发现问题：用户出错在哪里A：我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容，然后发现这里不是给我填内容的B：我不知道退款要填多少东西，什么是一定要填的C：提交的时候出错了，说是没写描述，又要回头去写用户只会告诉你遇到的问题和使用感受，毕竟他们也不知道哪里出了错。所以对于用户提出的问题，我们得先发散，再归因。分析问题：先发散，再归因1. 发散问题以问题为中心进行放射性发散，连接相关点，组成问题的图谱。尽可能提出更多的疑问点，从多方面考虑，找出关联性较大的因素。问题 1：漏填为什么不给出必填提示呢？不同的申请原因，注释分别是什么？全部的申请原因都要写描述吗，存在可以不写的情况吗（比如七天无理由）？全部的申请原因都要上传凭证吗？如果申请原因不同，填写描述的提示会不同吗？说明一下，刚开始出现问题的页面是优鲜赔，我还没截图已经进行完赔付了，所以分析用的是退货界面的选项，内容大致一样，样式也一样。分析之后发现：1）必填提示很重要。除了质量问题外，其他所有原因都需要填写描述文字，不然就无法提交。基于这一点，我认为给予必填提示*号是很重要的，淘宝的退货页面也会有必填提示。2）选项之间可能有交叉或者重复，分类不明。比如七天无理由一定要写理由；大小/颜色/型号不合适没写明需要寄回附件赠品；其他问题务必上传有效凭证，但在提交时不约束这个条件。这些问题其实是产品层面要解决的问题。第一个问题好解决，增加必填条件约束就可以。第二个问题相对麻烦一点，需要对售后原因重新进行分析和归类，重新写规则。由于第二个问题对解决本次问题的价值不大，不用花心思在这上面。问题 2：误点为什么横线上更像是可以输入文字呢？跟字号颜色有没有关系？怎么体现申请原因和描述问题的从属关系呢？注释的内容可以直接放在描述文字输入框内吗？怎么结合？页面的框架存在问题吗？卡片和分割线的规范是什么？这种左右选项结构的组件形式是影响因素吗？分析之后发现：1）页面的框架不规范，各卡片之间的距离没有一致，层级也有问题。一般来说，出现卡片距离不一致有几种情况：设计师特意设计；开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许，在设计走查的时候发现问题一定要提出让开发解决。2）文字的颜色让人分不清主次从属。这一点在下面有更详细的分析，先不在这讨论。2. 收拢归因经过对页面的观察和分析，我们可以把问题聚焦在以下几个点上。3. 竞品分析大法找到原因之后，比较有效快捷的方法就是进行竞品分析，看看别人怎么做。根据上面聚焦到的四个问题点，我们带着目的去做竞品分析。万字干货！4 大模块帮你完整掌握竞品分析互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于 UI 设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。阅读文章 > 观察淘宝和京东，我们可以发现：1）淘宝有必填提示，京东没有；2）淘宝的输入框比背景色浅，京东的输入框和背景色一致；3）淘宝的描述作为补充项另起一个模块，京东的描述和申请原因在同一模块。最后一点关于字体的，分析项比较多：通过上图，我们可以发现，淘宝的颜色层级有 3 级，而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示，淘宝有明确的视觉引导，而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性，造成了主次不清晰的问题。我们再次看看京东的界面。从视觉体现上来说，选项使用了最深的黑色，确实能够吸引用户的目光，让用户知道哪里要选，但却弱化了标题和补充项的视觉。在退货退款页面，用户是带着目的去操作的，他们需要完整走完流程，完成申请，因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候，你会希望银行能够按顺序告诉你每一步要做什么吧：取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息，到了柜台发现还要填单，是不是体验感很差呢？解决问题：低成本有效解决经过一轮竞品分析后，我们得出了相应的解决方案：1）统一页面结构卡片间距保持一致；输入框颜色略浅于背景色。2）文字视觉关系调整文字颜色精简到 3 种；标题颜色与选项颜色一致，用字体粗细区分；申请原因的注释与输入框提示语结合。3）准确引导操作给予必填提示。这是调整前后的对比图：从整体的视觉上来看，设计规范是与原本几乎保持一致的，更多的是细节的调整。但是我们的目的不是把界面做得多好看，而是低成本有效地解决问题，也就是要综合考虑时间成本和开发成本。文末，想说说我看到的一些现状。遇到问题的时候，有的设计师会无意识改掉原型字段、增删功能、改变运营方案…如果不改，他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题，原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本…现在除非逻辑有误、状态有缺失，我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。网上很多改版的作品，会从产品层面、运营层面去分析，这点是挺好的，多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容（除非有特殊情况），这些需要和相关的同事商量评估。有时候能用最低成本从设计层面解决问题，也是一种能力。以电商为例，帮你掌握超全面的产品分析流程曾经有段时间对竞品分析很困惑，市面上大部分的文章，多数是比较几个产品的功能、交互，总觉得少点什么。阅读文章 > 欢迎关注作者微信公众号：「牙线y2x」本篇来源：优设网原文地址：https://www.uisdc.com/adjust-font-size
效果 字体 颜色 给字体增添立体效果，字体会更有立体感和质感，更有冲击力，视觉效果往往会更吸睛。在字体帮的投稿作品中，我们经常看到此类相关作品，同时，也有很多同学，一直想学习制作这样的效果。今天，我们就做一次总结和分享，使用AI软件，分5种方式，设计出独具一格的立体字！方式1-案例A先看最终效果step1① 在AI中把做好的字形复制两层，第一层填充红色，第二层填充一个从黑到白的渐变并添加一个白色描边：step2② 选中红色字形，在菜单栏选择，效果→3D→凸出和斜角，在面板中把三个轴的参数都设置为0，把透视和凸出厚度都直接调到最大，然后点击确定：然后就得到了下面这样这样的效果：step3③ 再次选中字形，按Ctrl+c，ctrl+f，粘贴一层在前面，再把前面一层的混合模式改成颜色减淡，这样就亮了许多：step4④框选中红色的字形，按ctrl+shift+【，把它置于底层，再把它和黑白渐变的字形水平居中对齐：最终完成，是这样的！当当当当！方式1-案例B先看最终效果step1① 在AI中给做好的字形先添加一个颜色和描边：在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是 20、5 、0，凸出厚度为50pt：点击确定后，得到以下效果：step2②全选中字体对其扩展外观，选中顶层字体将其锁定。然后全选下方厚度色块，点击路径查找器中的联集，将其合并且置于底层，更换一个颜色。最后给它添加一个圆头圆角的描边，对齐描边选项为（使描边外侧对齐）：底层部分添加描边后会出现一些参差不齐的部分，需要我们去手动调整一下细节，调整效果如下：调整完细节之后，给顶层灰色字体部分描边更改一个颜色。复制粘贴最底层的字体并且再次置于底层，然后向右下方位移几下，填充一个比背景色略深的颜色作为投影：继续更改一下颜色：最后给字体添加一些装饰，排版一下，搞定！方式2-案例A先看最终效果step1① 在AI中给做好的字形先添加一个颜色：在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是 -13、-30、3，凸出厚度为65pt：点击确定，然后就得到了下面这样这样的效果：step2②选中3d效果字进行扩展，扩展之后，全选字体，给字体添加一个白色颜色填充和黑色描边：给顶层字体部分换回原来的颜色：最后给字体添加一些装饰，做出适当排版，搞定！方式2-案例B先看最终效果step1①先准备好字形，随便上一个自己喜欢的颜色：然后在菜单栏在菜单栏选择，效果→3D→凸出和斜角，面板中三个轴的参数分别是 -18、-28、8，凸出厚度为200：点击确定step2② 选中字形，点击 对象→扩展外观，再右击→取消群组：然后框选中字形给它添加一个描边：step3③现在来给它上色，先从字的正面开始，先任意选中一个笔画，选择→相同→填色和描边：这样我们就选中了字的正面，现在把字的填充换成亮一点的颜色：然后是侧面，先在下面画几个自己想要的颜色，然后添加和字一样大小的描边粗细：画完之后我们用吸管工具开始吸，按住shift点击侧面，点后用吸管工具吸下面的黄色：然后同样的方法继续吸：再吸：继续吸：老习惯，做出适当排版，搞定！方式3-案例A先看最终效果step1① 在AI中给做好的字形先添加一个颜色和描边：在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是5 、-15、0，凸出厚度为28pt：点击确定，然后就得到了下面这样的效果：step2②全选字体扩展，现在我们来给它上色，选中一个黑色笔画，在菜单栏中点击选择→相同→填充颜色：这样我们就选中了所有的黑色色块，然后给它更换一种颜色。并且添加黑色描边：step3③接下来我们给这两层字体编个组，然后向左下方复制一层。复制的过程中注意对齐关系，将第一层文字贴合隐藏到第二层文字的下方。然后置于底层，如下图所示：然后就得到了这样的效果：我们选中将最上面两层文字按住ctrl+2键对其进行锁定，然后选择最底层的粉色笔画，在菜单栏中点击 选择→相同→填充颜色，给其更改一个颜色：运用上述方法继续向下复制几层更改颜色：最后给字体添加一些装饰，完成！方式3-案例B先看最终效果step1① 把做好的字形填充一个红色：然后在菜单栏选择，效果→3D→凸出和斜角，面板中三个轴的参数，分别是8、8、0，凸出厚度为200：点击确定：step2②选中字形点击菜单栏对象→扩展对象，然后右击取消群组：取消群组之后点击任意一个笔画，在菜单栏中点击 选择→相同→填充颜色：选中之后先ctrl+G群组，然后按住alt向下拖动复制一层：然后框选上面的字，在路径查找器点击合并，如果没有路径查找器面板可以在窗口中找到：step3③合并之后给上面的字填充绿色+描边，下面的填充红色+同样的描边，然后再按住alt向上拖动，复制一层绿色的字，现在一共三层：选中第一层绿色的字，点击填充，然后点击左下角的储色板→图案→基本图形→基本图形-点，然后在基本图形-点面板中选择第一个：这样我们就得到了一个点填充的图案：然后把三层都一起选中，进行左对齐和顶对齐，这样就基本完成了：最后，排版装饰，完工！方式4-案例A先看最终效果step1①把做好的字形填充一个黄色：然后在菜单栏在菜单栏选择，效果→3D→凸出和斜角，在位置这里选择等角-上方，混合步骤改为1，其他参数不动：点击确定之后点击 对象→扩展，然后取消群组：给取消群组后的字体添加一个描边，然后再把侧面有多余竖线的地方合并：step2②合并之后开始上色，按住shift选中顶部的笔画，把填充调成亮一点的颜色：用同样的方法修改侧面的填充：然后，简单排版，完活！方式4-案例B先看最终效果step1① 在AI中对做好的字形进行切割移位，这里使用的是相同角度的切割：选中切割后的字形，先给它填充一个颜色：step2②在菜单栏选择，效果→3D→凹凸和斜角，面板中三个轴的参数，分别是 48、-10、0，凸出厚度为50pt：点击确定，然后就得到了下面这样的效果：切割后的笔画使用3D效果，位置距离上会出现一些偏差，需要我们去手动的调整对齐一下，调整效果如下：step3③选中3d效果字进行扩展，扩展之后，将字体厚度部分填充另一种颜色。（颜色的明暗变化直接参考3D效果所带的明暗变化。）然后给字体整体添加一个1(pt)的黑色描边：选中绿色颜色部分字体，复制一层将其合并。然后置于底层。填充一个比背景色略深的颜色。移动其位置，将其作为投影：给字体添加一个版式，完成！方式5-案例A先看最终效果step1① 在AI中给做好的字形添加一个颜色和描边：选中一个字体复制粘贴一个，然后置于底层移动到合适的位置：将移动后的字体缩小，并且填充一个和原字体描边颜色的相同的颜色：step2②框选两个字体，用工具栏中的混合工具分别点击两个字体，得到如下效果：框选住混合后的字体，按住ALT键然后点击鼠标左键调出混合工具面板。下拉选项，选中指定的距离一栏，参考数值如下。（具体数值根据实际情况调整，数值越小，混合距离越密集。数值越大，混合距离越松散。）点击确定后，得到以下效果：step3③给其他字体添加相同效果，并且填充和底层字体颜色相同的背景色。便得到一个由大到小，由实到虚的一个字体效果：举一反三，很快完成了！方式5-案例B先看最终效果step1①把做好的字复制三层，填充两个镜像渐变加白色描边，和一个纯色加白色描边：step2②框选中前面两个带渐变的字，选择混合工具，依次点击框选中的第一个字和第二个字:选中混合后的字体，再双击混合工具，在面板中选中指定步数，步数15:step3③把混合后的字和没有混合的字进行右对齐，然后选择混合的字，右击→排列→置于底层:最后再用直接选择工具选中末端的字，移动他的位置就完成了:step4④用同样的步骤做出剩下的字:组合在一起:再来个排版，搞定！刘兵克工作室字体教程本篇作者：熊伟、张高驰
色相 颜色 产品 从零做一款产品的时候，需要制定产品的主色。怎么制定呢？“归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系”，这是很多文章里面归纳出来的几步，使用的时候也有理论依据。但我想说点不一样的。在这个时代，产品五花八门，想用哪一类别的产品一搜一大把，在七麦数据搜索购物类的 APP 榜单，光第一页单榜就有 200 多个。我们模糊一下这张图，你会发现 APP 最终记忆点是色彩。换做在手机看也是一样的，打开你的 APP 列表，快速往下滑去找一个 APP，你会发现它们最终只剩下色彩——“我想找爱奇艺，它在我记忆中是绿色的，刚才快速滑过的红色黄色都不是”。当然，这只是拿来举例，通常你不需要这样去找一个APP。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征，是调性概括，是一种态度，甚至是你趁手的兵器。所以当你去确定产品主色的时候，有三种思路：随大众；反着来；搞特殊。随大众不同的行业发展至今，已经自带色相了。比如电商购物是红黄色、医疗健康是蓝绿色、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相，出来的大多数都是第一种思路。反着来使用和竞品色相相差大于 90 度（中差色、对比色、互补色）的，差别较大的就是反着来。这是逆向思维，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来。搞特殊抖音和 keep 是我心中搞特殊的 top，既不使用行业相同的色相，也不使用相反的色相，而是双色相或双色相叠加。用我做的小易 APP 来做例子说一下制定色系的过程吧基于行业与场景确认色相色相偏移WCAG 标准验证颜色色系拓展基于行业与场景确认色相小易是一款助力销售的 CRM 产品，主打销售智能化。取色就要看你立足点是“数据智能”还是“销售”了。与数据智能相关的绕不开蓝绿色，与销售系统相关的绕不开橙色。这个产品是内部定制化的，不存在有竞品的情况，因此随大众更容易取得方案的通过。为免出现“这个颜色一点都不科技和智能”的质疑和返工，我非常科学（识相）地选择了蓝色作为主要色相。色相偏移用 HSB 参数来看，正蓝色的 H 值（色相）是 240。引用优设大课堂态爷的一句话是：要想颜色好看，色相别太正。那么正蓝色就要偏移：往冷色偏移或者往暖色偏移。这里加入一个空间的概念：假设产品是一个空间，里面主打智能和数据，我设定了大环境偏冷光，所以里面的物体会受冷光的影响。在冷光环境下，蓝色的色相受环境影响，会往冷色偏移。色相偏移 15 度是同类色，偏移 45 度是近似色。我在两者之间取了中间值，约 25 度。对市面上的产品取色进行研究的时候，会发现它们的色值一般在拾色器九宫格的右上格，所以 S 值（饱和度）的取值范围大致在 77%-100%之间，我取了中间偏下的值 89%。B 值（明度）一般为 100%，除了黄绿色相本身明度偏高，则会适当降低明度。WCAG 标准验证颜色WCAG 是网页无障碍指南其中关于颜色的使用标准，简单来说就是色彩要在页面中达到一定的对比度，才能让人看清。WCAG 用色标准中普通文本与背景对比度不低于 4.5：1，那么对于高亮文字颜色（通常是产品主色）是不是也需要达到这个标准呢。我用几个 APP 进行了测试，下列 APP 的对比度在白色页面中范围是 2.3-4.5。我估计原因有二，一是饱和度太高有点太艳了，二是现在很多 APP 都有暗夜模式，观察这张图上的 APP 颜色情况，可以发现一个颜色在白色背景对比度越低，在黑色背景对比度就越高。且高亮文字使用的频次相比文本文字少，多数伴随色块按钮使用，所以 3-4 是较合适的对比值范围。有个快速计算对比度的网页很好用，输入色值就可以得出结果。contrast ratio：https://contrast-ratio.com/#%23FF784A-on-white还有个网站会更直观，输入色值后下面还有网页例子预览效果。color review：https://color.review我选择的蓝色对比值在白色背景是 3.9，黑色背景是 5.2，在正常范围内。其实小易 APP 大概率不会有暗夜模式，因为需要投入更多的开发资源，浅色模式也不是不能用。在这个考量下，可以抛开黑色背景不考虑，但是话又说回来，做好准备总是没错的。色系拓展色系拓展需要拓展两类：中性色和辅助色。中性色相对来说比较简单，所以放在前面先讲。前面我已经选定主色是#1b7aff，打开拾色器，将明度调为 10%，就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色，叠加白色（白色的透明度以 10%作为基础依次递减），得出中性色的色板。我看过很多写得不错的文章，文末会放相关参考的链接。下面的四种选色思路，是根据他们的归纳为基础，加入一点其它的角度来进行辅助色系的选定。 看到这里你应该也发现规律了：选色离不开色彩的理论知识。在理论的基础上不断尝试搭配，组合出不一样的色板。而且要基于目的来选择搭配，跟画画一样。如果想要画面和谐，就不要出现多组互补色。画面中有一组互补色时，要取两者中间的颜色来劝架，以达到和谐的目的。如果希望画面冲击力强，则相反。基于这样的色彩理论，可以让我们不出错且有依据地搭配出界面的色系。我的选色我希望颜色能有更细腻的色相变化，所以我把色环按照 10 度作为基准细化。选择互补辅助色的时候，我没有选正互补色，偏移了 10 度。从黄色到绿色的亮度都很高，所以我的选色更多偏右边。以选取的这六种颜色作为小易的基础色，微调饱和度稍微降低色彩的黑白灰差值。参考文章：如何科学地建立色彩体系？我总结了这5个方面！最近我在想一个问题：假如设计师负责一款全新的产品，不受已有规范的束缚，我们该如何定义产品的色彩体系呢？阅读文章 > 如何抛弃惯性思维，重新定义一款产品的主色？不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个 “大师” 帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后这家餐厅火爆了，王境泽都觉着他阅读文章 > 授权 W3G 文档，网页无障碍指南（WCAG2.1）翻译版优设态爷手绘提高班关于色彩的内容（课程链接）欢迎关注作者微信公众号：「牙线y2x」本篇来源：优设网原文地址：https://www.uisdc.com/theory-of-color
颜色 场景 对比度 我们在贝壳新装修业务的设计中，针对“投影”这一特殊情境进行了一系列场景化体验设计的实践。当初次面对这一特殊场景的设计时，真的是瞬间头皮发麻，不知道从何下手。因为投影场景比较特殊，业界内也少有参考，需要我们从 0 到 1，探索出一套严谨、合理的设计规范。那么，设计师怎么才能做好这类创新场景的体验设计呢？这需要我们深入线下考察真实的情境，洞察使用者的情况（人）、周围的环境（地）、使用者办事的流程、以及行为的动线（事）等。只有透析线下场景，接地气的解决使用者痛点，才能打造出真正满足需求的体验。图 1 场景化体验三要素为什么要做投影场景设计？说到“无线投影场景”，大家应该都不陌生。没错，就是会议室里播放“劈劈踢”的无线投屏场景。首先来明确一下设计要面临的挑战点：使用场景是什么样的？使用者是谁？现存问题是什么？1. 使用场景是怎样的？在贝壳新装修的业务中，有一个核心使用场景：装修管家要定期向管理者汇报装修工地的进展和问题。他们需要在会议室里，把 PC 中台系统的数据管理界面，通过无线投影呈现在幕布上，装修管家边看边向管理者汇报。图 2 投影设计核心使用场景2. 使用者是谁？业务管理者与装修管家就是这一场景的使用者。装修管家在整个装修流程中负责对工长、设计师、主材厂家等团队人员的协调工作，确保项目进度的正常进行，以及定期巡查工地现场，上报工程进度及现场问题。业务管理者主要负责管理管家、制定施工管理流程，对于装修过程中出现的各类问题提供解决方案。管家需要通过幕布上的内容呈现，突出重点，提高效率，准确且又快速的完成汇报。管理者需要通过观看投影幕布，再结合管家口述的汇报内容，快速的抓住重点，并能直观的总览整体情况。图 3 管家/管理者诉求3. 现存问题是什么？图 4 改版前投影展示效果上面这张配图，就是在会议过程中记录下来的投屏效果。大家可以明显的看出很多问题，比如：字号偏小：在投影场景下，由于用户的观看距离和屏幕尺寸都被大幅放大，导致文字视觉效果偏小，PC 中台系统常用的 14 号字不再适用。颜色看不清：由于无线投影仪会损失一部分清晰度，所以对颜色的识别度较低。灰度文字看不清，导致文字层级区分失效；背景色看不清，导致界面分区设计失效；斑马行看不清，导致 table 信息定位困难。界面信息冗杂：对管家来说，无法快速找到正在汇报的施工单、汇报重点信息在 table 中不突出；对管理者来说，不知道应该关注哪些工地、缺乏数据总览。因此，基于装修管家向管理者汇报的使用场景，结合使用者的特点和痛点、以及现存的问题，我们展开本次投影场景的设计研究，从实际场景出发，来解决使用问题。致力于为使用者提供看的清晰、看的高效的使用体验。如何解决这些问题？我们在 PC 中台系统中，根据实际使用需求和投影场景特点，定制设计了一个新的页面，同时满足投影和 PC 的使用。并建立了一套匹配该场景的新规范，为后续此类场景的设计提供依据。针对“字号偏小、颜色看不清”的问题，我们在表现层中进行了设计规范的探索。针对“界面信息冗余”的问题，我们从结构层和框架层梳理了界面的信息结构，既能符合管家的汇报逻辑，实现汇报提效。也能令管理者快速的了解汇报内容，并抓住重点、实现信息总览。我们从字号、颜色、信息架构三个方面进行具体介绍。图 5 解决现存问题的 3 个优化方向1. 字号我们在为电脑和手机外的电子信息载体做设计时，可能会经常面临无案例可参考的局面。这个时候我们可以跳出常规思维，想一想在这个场景下最常用的产品是什么。即使它不是常规的互联网产品，同样也能为我们提供参考。切入点经过一波调研，投影场景下字号的定义，以投影场景中的成熟产品 PowerPoint 为切入点，我们找到了投影最小字号的计算公式。图 6 投影场景最小字号计算公式当我最初看到这个公式时，也非常迷惑，不知道该如何使用，因此先去尝试理解它的原理。就像下面的图片表示的一样，投影最小字号等于电脑端常用字号与会议室的观看比例、电脑观看比例、显示器大小比例几个参数的乘积。图 7 计算公式原理其中，显示器屏幕系数、投影幕布屏幕系数可以参考下表：图 8 系数参考表数据测量在确定了公式后，我们进行相应的数据的测量。首先，测得“会议厅长”的数据为 7 米图 9 会议厅长数据测量测得眼睛距离电脑显示器的“观察距离”为 0.5 米图 10 观察距离数据测量其次，调查明确了“投影幕布尺寸”为 120 英寸、“显示器尺寸”为 14 英寸。然后，根据“投影幕布比例 4：3”、“显示器屏幕比例 16：9”的比例关系，对照上文屏幕系数参考表，得到“投影幕布屏幕系数”为 1、“显示器屏幕系数为 0.79”。最后，我们再将测量的数据代入公式计算。图 11 数据代入公式计算结论在电脑显示器尺寸 14 英寸 16：9、投影幕布尺寸 120 英寸 4：3 的情况下：会议室厅长为 6 米时，投影最小字号为 16px；会议室厅长为 7 米时，投影最小字号为 18px；会议室厅长为 8 米时，投影最小字号为 20px；在这要里特别注意的是，上述公式推导出来的理论值是最小字号，这并不代表我们在最小字号以上可以无限放大。在保证能看清内容的情况下，字号的选择以较小为优，以保持克制的原则。2. 颜色要解决投影场景下颜色看不清的问题，我首先思考这样两个点：满足什么条件的颜色才能被看清？看清与看不清的边界在哪里？有了能看清的范围，明确了看清与看不清的边界后，我们如何选择使用的颜色？概括来讲就是两个问题：如何检验颜色的可读性？如何定义颜色的值？带着这两个问题，我们继续进行下一步的探索研究。如何检验颜色的可读性「WCAG 标准」WCAG（Web Content Accessibility Guidelines ）内容无障碍指南，定义了如何使残疾人士更方便地使用 Web 内容的方法，遵循这些建议也可让普通用户更容易访问辨别看到的内容。该标准发布自 W3C（万维网联盟）。W3C 是 Web 技术领域最具权威和影响力的国际中立技术标准机构，发布过 200 多项 Web 技术标准和实施指南，一直指导着 Web 领域的发展。图 12 WCAG 标准Web Content Accessibility Guidelines (WCAG) 2.0 中有明确指出：AAA 级别中：普通文本与背景色要符合至少 7:1 的对比度。AA 级别中：普通文本与背景色要符合至少 4.5:1 的对比度。WCAG 标准则可作为检验文字颜色可读性的依据。我们使用的文本颜色与背景色之间的对比度，只要满足上述 WCAG 标准的建议，就能确保被清晰识别。那么问题来了：如何得到对比度值呢？「WebAIM 工具」今天跟大家推荐一个能得到文本与背景色对比度值的小工具：WebAIM。百度搜索：color contrast。第一条就可以找到。图 13 百度搜索 color contrast使用这个小工具很简单，在 “Foreground Color(前景色)” 中输入文字颜色，“Background Color(背景色)”中输入背景色，即可在 “Contrast Ratio”中得到对比度值。图 14 小工具 WebAIM通过这个工具得到的“对比度”值，再参照 WCAG 标准，即可判断文字颜色能否被看清。「结论」通过上述 WCAG 标准，我们得知，普通 PC/移动端产品设计中：主要文本与背景色对比度要至少达到 7:1 AAA 级别对比度；次要文本与背景色对比度要至少达到 4.5:1 AA 级别对比度；而在投影场景设计中，情况又有所不同。无线投影仪损失一定的清晰度，造成对颜色的识别度较低，且投影场景设计的字号已由 14 调整至 18。针对投影场景的特殊情况，设计团队参考 WCAG 标准，并反复的进行了尝试，得出如下结论：投影场景产品设计中：正文文本、标题和背景色之间应保持在 7：1 以上的 AAA 级对比度。次文本、辅助色文本与背景色之间应保持在 3：1 以上的 AA 级对比度。界面分区的灰色色块、背景色、tab 色应保持 1.1：1 以上的对比度。因此，通过上述检验文本可读性的结论，再结合 webAIM 小工具得到的对比度值，如此就解决了如何检验文本可读性的问题。如何定义颜色的值「色彩模式」一直以来，设计师们常用的颜色以 RGB 模式，十六进制颜色码为主。但大家有没有想过，十六进制颜色码，在调整颜色时是没有预期的，老司机们也难以通过“#FFB6C1”这几个字母和数字的组合，辨别出它究竟是个什么颜色。而且还很难记忆。图 15 RGB 模式/十六进制颜色码因此，我们弃用 RGB 模式，而采用 HSB 色彩模型进行颜色的定义。图 16 HSB 色彩模型H：色度用于调整颜色，范围在 0-360之间。S：饱和度是指颜色的强度或纯度，范围在 0%～100%之间。B：亮度是颜色的明暗程度，范围在 0%～100%之间。该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队之间的沟通。「定义颜色」因为黑色系文字颜色 H 和 S 的值都为 0，我们通过 B 值来选择需要的颜色。将 B 值由 0-90 的 10 个代表颜色依次列出，根据前文所述的文字颜色检验标准，B 值 0-50 是满足对比度要求可用的，而 B 值 60-90 的则不可用。图 17 颜色枚举B 值 0-50 的颜色中，B 值为 0 的被首先弃用，B 值为 0 的颜色即纯黑色。自然界中几乎没有纯黑颜色的东西，因此在设计中使用这种颜色给人的感觉不真实，视觉上也太亮。因此，我们选择 B10 的颜色作为主文本色，用于版块标题、tab 名称、表格文字等主要内容。为了保持对比和文本层级，次文本色，跳过 B20 的颜色，选择 B30 的颜色，用于提示、面包屑等辅助文字信息。同理，B50 的颜色，则用于占位文本色、失效色。图 18 颜色选择3. 信息架构在解决了表现层看不清的问题后，这一部分，我们结合实际需求，从框架层、结构层来解决界面信息架构的优化问题，并进行了优化池的梳理：图 19 优化池梳理「最终效果展示」优化前：图 20 优化前效果图优化后：增加了数据指标总览图 21 优化后-数据指标总览按照管家汇报内容进行信息分区划分图 22 优化后-信息分区划分将列表信息按照重要程度进行排序、使用红黄灯标签聚焦重点工地图 23 优化后-红黄灯聚焦重点工地优化后的设计，既符合管家的汇报逻辑，又满足了管理者的关注重点，同时也彻底解决了看不清的问题。总结在实际工作中，我们不止一次面对这种定制化、针对性的场景体验设计需求，除了投影场景的设计外，在面向老龄用户群体进行包容性设计、以及特殊智能硬件设计的时候，以上研究也具有借鉴意义。场景化体验设计研究给我们的启发在于：要想让设计更好的服务于业务、产品、助力问题的解决，必须深入了解实际情境、真正的去关心使用者，并且不断进行尝试、研究和探索。滴滴设计专家：如何把场景化融入到产品设计中？场景化已是耳熟能详的词，主要说在特定时刻，基于特定使用情景和用户特性而进行的定制化设计。阅读文章 > 参考文献：杨臻《PPT 要你好看》欢迎关注作者微信公众号：「贝壳KEDC」本篇来源：优设网原文地址：https://www.uisdc.com/scenario-experience-design
网格 工具 颜色 之前已经和大家分享过很多做渐变的网站，可以非常方便的提取好看的渐变配色。但是想做出一张亮眼的渐变背景，只有双色渐变肯定还不够。今天就向大家推荐一款在线生成酷炫网格渐变的神器——MESH·Y 。它操作简单但效果极佳，一键就能生成一张质感十足的网格效果渐变背景，一起来看看吧！基础操作MESH·Y 的操作界面简单明了，主要分为 4 个部分：1. 颜色修改可选 4 种颜色。如果只需要 3 种颜色，把其中 2 项设置成同一种颜色就可以了；2. 网格模型随机切换颜色选好之后点击黑色的「Randomize」，可以随机切换网格模型，得到不同的渐变效果；3. Mesh Id即网格编号，如#757。MESH·Y 一共有 1000 种网格模型，每一种都有对应的编号。如果你在随意切换网格效果的时候，发现有一款自己特别喜欢的网格，就可以记下它的编号，下次想用这个网格时，设置好颜色后直接在「Mesh Id」处输入对应的编号就可以了；4. Save 保存MESH·Y 支持导出 PNG 格式的图片，而且导出时可以自行设定图片尺寸，最大支持 3000*3000px，非常灵活。另外界面右侧有 6 款渐变模板，如果觉得其中有喜欢的可直接选用，修改一下颜色就可以了。使用技巧下面结合我们之前提到的一款选色神器 Picular 为大家展示如何快速做一张好看的渐变 Banner。色彩界的 Google！给关键词就能帮你找配色的Picular一般配色工具大多提供很多调色盘，让使用者从中找到适合自己需求的色彩，毕竟色彩有时候不容易描述。阅读文章 > 1. 确定主题和配色近来天气渐渐变暖，春天的脚步越来越近，就做一张有春天气息的 Banner 吧。提到春天，最先想到的就是生机，万物萌发，百花盛放。可以在 Picular 输入关键词「flower」，提取一组有关春天的配色。2. 制作渐变背景将配色方案运用到 MESH·Y 中，选择喜欢的渐变配色结果。（这里我用截图工具悬浮在 Picular 做好的配色方案，然后直接用 MESH·Y 吸色工具复制颜色)选几张喜欢的保存下来3. 构思排版将背景放进 AI，发现中间那张有些像青山的形象，可以延展做一个春日野营的宣传 Banner。将背景确定好，加入一些花朵蝴蝶的意象元素，确定好文案进行排版就可以了。总结网格渐变做出的渐变丰富有变化，非常适合直接拿来做背景。但是在 AI 中用网格调出好看的渐变需要一定的时间，而且对配色没有把握的小伙伴来说，调出好看的渐变配色也是一项有难度的工作。MESH·Y 中有 1000 种网格模型，可以极大的解决上面的问题，省时省力。结合快速选色工具 Picular，让渐变背景的效果更符合我们的主题，对喜欢用渐变的小伙伴来说是绝佳的设计工具。附上官方网址：「MESH·Y 官网」 https://meshgradient.in/「Picular 官网」 https://picular.co/感兴趣的朋友赶快收藏，下次设计的时候试一试吧！筛选了100个配色工具后，我挑出了这25个！UI 设计中，颜色几乎是最先被感知到的设计元素，好的色彩感知是成为一个优秀的设计师的基础，配色工具层出不穷，辞典酱在筛选了100多种配色工具后，精选了这25个，相信必然帮到你！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/mesh-y
树冠 图标 颜色 3D 元素在设计中的应用广泛，之前向大家推荐了很多免费的 3D 素材下载网站，但是实际应用起来还是有局限的。今天向大家推荐一个可以免费使用、操作便捷上手超快的 3D 软件——MagicaCSG，它的软件大小只有2.64M，但是却可以建模渲染出完整的3D元素。MagicaCSG 来自于 @Simon_阿文 的推荐。MagicaCSG 的已经更新了一个版本，下面为大家简单介绍一下 MagicaCSG 的主要界面，并通过演示教会大家做一个非常可爱的 3D 小元素。MagicaCSG 的界面介绍MagicaCSG 的界面分为 2 部分——Model（建模）和Render（渲染）。Model（建模界面）Render（渲染）界面建模过程渲染过程3D 可爱小元素示范下面教大家如何做一个可爱的 3D 小松树。第一步 建模树干打开 MagicaCSG 后，主界面上有一个正方体，鼠标点击「Stroke」下方的小圆柱图标，将正方体改为圆柱体。选中蓝色箭头拖动调整到合适位置（注意只改变竖直方向的位置，不要水平移动，保证右侧「Gizmo」中「center」的 X、Y 数值都为 0）。然后在右侧「Gizmo」中将「Size」处将圆柱体大小修改为 X:7.5 Y:7.5 Z:15。修改好后将选择「Stroke」栏中的颜色，将树干颜色修改为「8a581b」。第二步 建模树冠树干做好后，在左侧「Layer」处新建一个图层。然后选择「Stroke」下方的小圆柱图标，点击主界面左上角的「+」号，新建一个圆柱体，选中蓝色箭头垂直向上拖出。然后调整左侧的「Cone」数值到最大，将圆柱体变为圆锥体。在右侧「Gizmo」中将方向锁定为 XY，用控件调整树冠大小。调整好大小后，选中蓝色箭头拖动调整到合适位置（按住鼠标右键可以调整视角检查）。选中刚刚建好的圆锥体，按住「shift」，拖动蓝色箭头复制一个出来。然后选择「Stroke」下方的球体图标，将其变成球体。然后点击「组合运算区」的第二项「减去」，将圆锥体的底面变成弧形，更符合松树树冠的形状。并相应的调整树干的高度。第一层树冠建好后，左侧「Layer」处再新建图层，以同样方法做第二层树冠。第二层树冠要比第一层树冠小一些。最后一层树冠要比第二层树冠再小一些，也是按照同样的方法制作。三层树冠都做好之后，再整体调整一下位置和大小。树冠模型建立好后，将树冠颜色分别修改一下：第一层树冠「1091a5」,第二层树冠「29aeb1」,最顶层树冠「57ca8f」。记得用来切形的球体的颜色也要修改，因为这关系到树冠底部的颜色，颜色比树冠本身颜色深一些就行。第三步 渲染建模的部分都已经弄好了，接下来就是渲染。点击界面左上角的「Render」进入渲染界面。首先调整太阳光「Sun」的角度，然后选一个暖一点的颜色「fff29d」；天空光直接点击「Sky」右边的照片小图标，选择系统预设天空光。如果想让光感更丰富，可以添加地面光，并修改光的漫射数值，使整体更明亮。第四部 保存输出制作过程中，我们可以随时点击右上角的保存按钮保存。渲染完成后，将松树调整成自己需要的角度，设置好尺寸，点击左下角的小相机图标就可以导出为 PNG 了。背景的颜色也是可以调整的，如果需要保存透明底格式的图片，可以选中「Background」下的「transparent」再输出就可以了。拖进 AI 中做一个简单的排版，是不是非常可爱?小提示1）MagicaCSG 目前只适用于 Windows 系统；2) MagicaCSG 有系统自带几个小模型，点击左侧上角的文件夹小图标就可以打开；3) 程序安装好后，若出现打开不了的情况，请进行以下操作后，重启电脑重新打开应用：在桌面右击——打开NVIDIA控制面板——管理3D设置——首选图形处理器——选择高性能NVIDIA处理器；进入电脑「设置」，系统——显示——点击进入「图形设置」——浏览——添加MagicaCSG应用程序。总结MagicaCSG 的功能肯定不及 C4D 和 Blender 强大，但是它便捷易学，对于想自己创建一些简单 3D 小元素的小伙伴来说是一个非常好的选择。MagicaCSG 安装包下载链接已经附在文末和开头，赶快自己动手自己尝试一下吧！不清楚的地方在评论区提出，小编会尽快为大家解答~感兴趣的小伙伴如果想进行更深入的学习，可以再尝试下面的入门基础教程：「使用 MagicaCSG 做一个精灵球」https://www.youtube.com/watch?v=lZc2VJJTr60&t=336s「使用 MagicaCSG 做星之卡比」https://www.youtube.com/watch?v=6ET53LGBF-g「使用 MagicaCSG 做一个立体 Android 精灵 1」https://www.youtube.com/watch?v=mNlbj_yUCAE「使用 MagicaCSG 做一个立体 Android 精灵 2」https://www.youtube.com/watch?v=EcTKbpGUaz4&t=425s「使用 MagicaCSG 做一个游戏手柄」https://www.youtube.com/watch?v=LFbn78gu9i0一整套3D图标打包下载！免费可商用！3dicons 是一套开放原始码 3D 免费图标集，收录超过 1440 个图片素材（网站上放了 120 个预览图标），这些图标素材采用 CC0 授权方式释出，可以免费使用于个人和商业用途，图标有四种默认的颜色风格、三种摄影角度和 HQ 渲染，提供多种常用格式像是 Figma、PNG Dy阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 MagicaCSG 安装包 松树源文件3.42M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/magicacsg
颜色 白灰 图层 Hello~大家好，我们是优设手绘就业衔接班的讲师橙子和阿森今天我们俩来分享一些画画小技巧，看起来好像挺简单，但是学会就能节约大把时间哦！渐隐功能 ctrl+shift+f PS 渐隐命令可以更改任何滤镜、笔刷、橡皮擦的不透明度和混合模式。在某种情况下，就不需要撤销重画了。不过要注意渐隐功能只针对刚刚执行过操作，对上上个操作是无效的。渐隐功能-笔刷渐隐功能-滤镜-高斯模糊花里胡哨的渐变映射渐变映射，其实是将画面本身的颜色先去色，然后再进行着色。一般情况下使用渐变映射时，我们需要调整图层的不透明度，再配合图层模式使用，有时会有意想不到的效果！注意：渐变映射是调整图层，它对图层本身进行了去色再着色，基于其下面的图层而产生效果，记得在用渐变映射前先「盖印（ctrl+shift+alt+e）」哦！渐变映射器以下是我使用渐变映射，作品所产生的效果。我是在盖印层使用渐变映射，一定不要在原图，或者合并图层上做效果，而是盖印图层！！！渐变映射效果-1渐变映射效果-2给笔刷加纹理，灵活绘制如果你想给一张画上加纸张纹理，除了直接将纹理素材拖拽进去，还可以使用 PS 的图案图章工具，让笔刷变成纹理，灵活性更高，想画哪里画哪里！选择「图案图章工具」；选择合适的笔刷和纹理；记得更改图层的模式，根据画面调整不透明度。注意：图案图章工具里的笔刷，前景色是没有效果的，笔刷的颜色被纹理覆盖了，但依旧保留笔刷本身的纹路、不透明度、流量的属性。另外，为画面添加纹理时，注意不能太过，适当降低不透明度，否则会喧宾夺主。溶解模式巧做噪点风大家都知道噪点常用来给扁平风格的插画添加细节质感，除了喷枪笔刷外，还有一种方式可以快速做出噪点肌理，那就是「笔刷模式/图层模式」的「溶解」。注意：选择笔刷时，你的笔刷要能画出颜色轻重变化（半透明的区域），溶解模式才有效，比如硬边缘笔刷的溶解模式，就不显示噪点效果。可见图中第二竖行的硬边缘笔刷：溶解模式-躁点效果对比下面叶子的噪点，就是我用「笔刷模式/图层模式」的「溶解」。利用图层模式快速打光在扁平的插画风格中，我们可以利用图层的不同模式，对画面简单加光效，会立马提升整体效果。我们先来了解一下图层模式的区别：减色模式：变暗 / 正片叠底 / 颜色加深 / 线性加深 / 深色类似于油墨的混合，让画面越来越暗，其中正片叠底屏蔽白色，所以我常用来做投影。加色模式：变亮 / 滤色 / 颜色减淡 / 线性减淡（添加）/ 浅色。类似于光的混合，让画面越来越亮，其中滤色屏蔽黑色，我常用来做光。叠光模式：叠加 / 柔光 / 强光 / 亮光 / 线性光 / 点光 / 实色混合。叠加：将两个图层叠加在一起，并保留各自的纹理，颜色会有变化，也常做光效。柔光：与叠加模式效果类似，只是效果稍弱。其他模式：与上面两种模式类似，有些许变化，可根据画面自行选择。常用的图层模式画好之后，对整体之上新建一个正片叠底图层，并填充一个饱和度低的颜色；用橡皮擦将亮部的区域擦出来，你也可以用蒙版哦；建立「叠加/滤色层」，柔边缘大笔刷选择明度高的颜色画「光」，可以多画几层；根据画面整体该加暗的再加暗，该提亮的再提亮。打光-压暗打光-提亮打光-整体调整阿森-作品步骤不过虽然这种加光的操作很简单，但最好还是掌握一些光影知识，才能在正确的地方加合适的光。通道分离大法制作特效海报、Banner 中常见的故障风、抖音风等用在板绘作品中，同样会为你的作品增色不少。画好之后，盖印一层，再复制一层（保证上下两层）；双击图层空白处，调出图层样式对话框；混合模式-通道， 勾掉 R/G/B；将复制层位移。这就是处理之后的不同效果。32-A100-铁锤姐姐-人物作业3招教你解决颜色脏大部分初学者会遇到一个配色问题：颜色脏，我给大家提供些配色小技巧，从最基础的的黑白灰，到分析配色常见问题，帮你改善画面脏的大难题。1. 配色基础—黑白灰想要解决画面的配色脏问题，你要打好基本功，首先得了解配色的底层逻辑—黑白灰关系。画面的黑白灰是一个最基础的颜色层次。大家都知道传统的美术教学会学素描，讲究素描的黑白灰关系，拉开黑白灰的层次关系，画面看起来才会有立体感、层次感。就算只有普通的黑白灰色块整体，看起来结构也是非常完整的。如下图：当我们把基础的黑白灰分辨清楚，配色不会出现特别大的问题，但是如果黑白灰关系错乱，只会让画面看起来很灰，对比很弱，怎么配色都感觉不合适。作为手绘新人，如何快速查看画面的黑白关系呢？这时我们可以添加一个黑白调整图层：32-A41-知了-毕业原创作业我们再来看一组学员作业，来自优设手绘营-40 期芒豆同学。左边为原图：颜色较灰，说明配色出现了问题，颜色对比不够，导致了细节不够突出。右边为优化后的图：画面黑白灰对比更明确，配色整体更加的干净，物体细节也更清晰。最后我们观察一下优秀作品的黑白灰关系，比起普通的插画，光影插画的黑白灰关系会更强，这也是为什么光影插画会带给我们更强的视觉冲击的原因之一：所以想把配色掌握好，你需要学会掌握画面的黑白灰关系，拉开明暗的差距。2. 颜色的选择技巧除了黑白灰关系乱，颜色的选择也会导致画面颜色脏。解决方法——提高暗部颜色的饱和度，同时微调色相）。色相的选择可以根据亮面冷，暗部暖，或者亮面暖，暗部冷这样的规律，同时还可以考虑环境色对于物体的影响。运用球体讲解一下，对比看看：当我们确定底色的颜色之后，画暗面时，大部分同学会在底色的基础上，直接选一个深色。但是这个暗部的颜色普普通通，甚至还会让暗面看起来有一点脏。稍微调下，提高暗部颜色的饱和度，对比之前的效果：干净了！但是新的问题出现了，黑白灰对比没有之前那么明显了哎？这时可以调一下暗部的色相，让颜色丰富一些，同时加强黑白灰的对比。通过这个简单的案例，明白为什么颜色看起来有点脏的原因吗？左图的地面亮面+暗面的颜色对比，右图楼房的亮面+暗面的颜色对比，都可以发现这一规律。所以正确的选择暗部的颜色方式是：吸取底色颜色；在底色基础上选择一个深色；微调这个颜色的饱和度；调整色相（具体如何搭配更好看可以多尝试）。底色和暗部尝试不同的色相搭配。这里也是因为基础的黑白灰没有问题，所以我们的暗部颜色的色相可以多尝试，也可以结合冷暖的对比。3. 高级灰如何使用不会脏颜色脏的第 3 个原因：高级灰使用错误。解决这个问题，首先检查画面的黑白灰关系是否正确；高级灰不是一个单纯的灰色，而是一个具有颜色倾向，并且是高明度的颜色。这里我们可以看一些优秀的插画作品是如何使用高级灰的:首先检查画面的黑白灰关系：另外检查颜色的倾向，也不要选择明度过低的颜色：文章到此就结束啦！如果你想系统学手绘，却依旧处于低效率、东画西画的状态，这里推荐一下我正在讲课的「优设手绘就业衔接班」，添加好友扫码即可咨询。给 iPad 手绘新手的 10 个有用的小贴士大家好，我是插画师 @Lady不慌。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/7-hand-painted-techniques
图层 颜色 画笔 1、习惯性在稿纸上绘制草稿，画完后拍照导入AI。2、用钢笔勾出字形并且分别天色，有些小地方做了一点调整。颜色后面还要再做调整，这里知识大致区分一下。3、把这些字形放在一个大小刚好的画板上，选中图层-三条线的按钮，释放到图层（顺序），文件-导出-导出为-导出-确定。4、打开PS,新建文件1500×990像素，分辨率300，填充颜色#5c9fd6，新建一层，颜色#a3d6ff，用柔边圆画笔，放大画笔，在中间点1.2下作为背景的高光。把刚才导出的文件拖入PS文件中，给各个图层命名并重新编组填充新的颜色，再在字的后面加了两个底框，如下图。5、开始做字效了，这一次，我们就以「元」字为重点介绍，因为后面几个字都是重复都操作。先从「元」的一横开始。找到「横」这个图层，给它做立体感。假设光源是从上方下来的，添加斜面浮雕-内阴影，做一个大概的明暗关系。6、给「元」的其他壁画复制横的图层样式：选中横的图层，右键-拷贝图层样式，找到其他笔画图层，右键-粘贴图层样式。7、 基本的立体感有了，再在每个笔画重叠处添加投影。ctrl+shift+alt+n（下面相同省略）新建一层，图层模式-正片叠底，用系统自带的柔边圆画笔工具，颜色#ed9113，在如下位置画几下，画笔可跳到合适的大小来画（按键盘上的作中括号【，或者右中括号】来调节大小），画完后ctrl+alt+g（下面相同省略）剪贴蒙版。8、放小画布看一下整体效果，发现亮部还不够亮，把元的几个笔画ctrl+g（下面相同省略）成组，ctrl+j（下面相同省略）往上复制，ctrl+e（下面相同省略）合并为一层，填充胃0，添加斜面浮雕。9、在笔画的下面再加些反光。在这些笔画的上面新建一层，用套索工具或者钢笔工具画出如下形状，shift+f6羽化-数值5（根据实际情况耳钉），确定，填充白色。10、其他的字一样的做法，效果如下。11、给字下面添加投影。把元气满满这几个组选中，按住alt往下拖，得到一个复制组，合并为一层之后，填充颜色#184088，添加滤镜-模糊-高斯模糊-半径为2左右-确定，按住下箭头移动10下。12、给后面白色的字框做一下效果。找到这个图层，新建一层，用画笔工具，颜色#275ca8，在笔画连接的地方压暗一些，并剪贴蒙版。13、观察一下，发现颜色有点不够通透，又新建一层，用画笔，颜色#7db6得到，图层模式-叠加，在如下地方涂抹。14、同时给这个框加上图层样式-投影。15、接下来给后面的背景（太阳、阳台）做效果。先找到中间这个蓝色的圆形，新建一层，图层模式为正片叠底，用深一点的颜色给它上下涂几笔作为暗部，并剪贴蒙版。16、找到下面这个半圆，我们把它叫做阳台，给它添加图层样式，做出立体感。图层样式-内阴影-内阴影-投影。17、在阳台上叠加一张纹理，图层模式-柔光；再新建一层，颜色#75b3e5，图层模式-叠加，在下方画几笔作为反光并剪贴蒙版。18、在笔画重叠的地方添加投影，新建一层，图层模式-正片叠底，颜色#e77e0e，用画笔画几下并剪贴蒙版。19、上半部分的太阳也做下效果。添加图层样式-斜面浮雕-内阴影。20、在上面新建两个图层，用画笔工具，浅一点的颜色画出亮部，暗一点的颜色画出暗部，并剪切蒙版，如下图。21、给小盆栽简单地处理一下明暗关系。我们来做其中一盆。找到这个图层，新建一层，用比这个喷子浅一点的颜色#ffd99c，左上面画几笔作为亮部，在用画笔用用暗色#ae8044，在右下画几下（或者可以用套索或者钢笔工具来勾出选取再填色）作为暗部。绿色的植物是同样做法。22、其他盆栽做法相同，这里就不重复了。23、两片叶子做法差不多是一样的。新建一层，用浅一点的颜色#f3f08d，画笔工具沿着左下的边缘处画，再往上新建一层，用比叶子深一点的颜色#2c6a16，套索工具勾出如下选区并填充，如果觉得颜色有点暗，可以添加蒙版擦除一些，再添加图层样式-投影。另一片叶子也是一样，这里不重复。24、给周围的速度线添加蒙版，删除一些，做出一种渐隐的效果。小鸽子也简单处理一些，添加阴影，新建一层，用比鸽子身体深的颜色，用画笔画出暗部。25、现在给它加点光效，让它更加有元气。找到这张光效图，放在所有图层上，图层模式为滤色，把多余的添加蒙版擦除。26、在所有的图层上面，按ctrl+shift+alt+e盖印图层，转为只能兑现，滤镜-camera raw滤镜，参数如下。27、再添加个色阶和曲线调节。最终效果：
眼睛 图层 颜色 在人像修饰中，很多人会忽略眼睛，有句话大家肯定听过，眼睛是心灵的窗户，这充分说明了眼睛的重要性（硬套，别骂我）。难以忘记，初次见你，一双迷人的眼睛~在今天的教程中，我们将使用 Photoshop 中的一些修饰技术来增强眼睛。基本上，我们将为眼睛添加高光，然后添加锐化以突出细节，最后处理其余部分。原教程来自PSD STACK上的分享！P大点S翻译！模特图像素材来自StockSnap在Pixabay上的分享！点击下载素材+PSD1.我在Pixabay找到了一张美女照片，正如你所看到的，眼睛非常平坦，看起来很呆板。眼睛有细节，但颜色暗淡，高光暗淡，图像没有清晰度。2.首先，我们为眼睛添加亮点。新建一个图层，我将其命名为“眼睛颜色”，设置前景色为#1f7ab4，因为它与眼睛相匹配，如果你想要其它颜色当然也没问题，也可以在后期用“色相/饱和度”改变颜色，都不算事。选择圆角柔边画笔，在圆球位置涂抹，不要把圆球全部涂上，最中间的部分保留原始的样子。3.为了使颜色仅对高光可见，我们将使用“混合颜色带”来进行调整。双击图标，在弹出的图层样式对话框中，我们找到“混合选项：自定”，在下面的“混合颜色带”选项中选择“灰色”，拖动滑块以更改设置。拆分滑块时，记得要按住ALT键。当你将黑色滑块向右拖动时，这意味着你告诉 Photoshop 使图层部分（高光层）仅在底层（模特层）的高光上可见。4.现在我们得到如下的效果，如你所见，颜色现在仅在眼睛的高光处可见。5.下面，我将“眼睛颜色”图层的图层混合模式更改为“颜色减淡”。如果需要，你可以调整图层的不透明度，以减少颜色对眼睛的影响。我将“眼睛颜色”图层的图层不透明度降低到“50%”，因为我不希望高光看起来很强烈，但是如果你喜欢颜色更深一些，你也可以依旧将其保持为“100%”。6.按Ctrl+Alt+Shift+E盖印图层，并将其转换为智能对象。7.执行“滤镜>其他>高反差保留”，半径我设置为2.8像素，我们可以看到眼睛细节开始突出。8.将盖印图层的图层混合模式更改为“叠加”，现在我们可以看到眼睛，包括皮肤都得到了锐化效果。9.因为我只是想为眼睛添加清晰度，而不是全图，所以，我为这个盖印图层添加了一个图层蒙版，用画笔涂抹，使其只对眼睛起作用。10.我复制了一层盖印图层，然后重新涂抹了图层蒙版范围，使皮肤也得到一点锐化效果。到这里，我们的修饰过程就完了，希望对大家有所帮助，最终的对比如下。
颜色 色彩 网站 如果想知道某个网站配色方式，除了打开开发人员工具或是检视源码，也有第三方服务可以使用，即使无法完整复制别人的配色，也能快速得知网站使用的颜色代码或配色模式，取得颜色的色码或色彩名称。有没有任何更直觉、简单的方式来完成这些工作呢？若你有类似的需求，接下来要介绍的服务或许可以满足，这项服务会提取特定网页使用的颜色，让颜色相关信息更一目了然。本文要介绍的「Alwane」是一个网页色彩提取工具，可以在使用者输入特定的网址后取得该网站使用的颜色代码或描述，产生为调色盘链接，重新分类、编排各种颜色，最简单的使用方式是输入网站网址就能提取，也能显示其他相关色彩，如果想分析、保存某个网站或品牌使用的颜色，Alwane 是个非常方便而且好用的工具。除了将提取的颜色代码以可视化方式呈现，还能够以调色盘或是程序代码方式呈现，包括 CSS 和 SASS 两种显示程序代码，对于要取得特定的网站颜色来说很有用，若有类似需求的话不妨打开 Alwane 网站试试看。Alwane网站链接：https://alwane.io/使用教学开启 Alwane 网站后直接在左上角「Extract CSS Colors」输入要提取颜色的网址，预设情况下会从 HTML 和 CSS 样式表单取得颜色，如果某些情境下需要从 JavaScript 获取颜色可在「Advanced」设定选项找到。从提取后的色彩结果可以看到各种颜色分布，包括颜色的预览、变量名称和色码（hex code），从左侧可选择为颜色重新分组、排序或是切换 CSS、SASS 色码。从上方选项切换调色盘或程序代码模式，也能快速将所有 CSS 代码复制到剪贴簿。如果想要保存或分享网站的配色、调色盘、CSS 等信息，点选右上角「Generate」就能产生链接咯！值得一试的三个理由：Alwane 网页色彩分析工具，输入网址就能提取网页出现的颜色从 HTML、CSS 和 JavaScript 获取色彩信息查询结果会有颜色预览、变量名称和色码，也能切换为程序代码模式配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/alwane
灵感 色彩 颜色 提到设计灵感网站，Pinterest、花瓣、Behance、Dribbble 这些大家都非常熟悉了。今天向大家推荐一个有强大颜色搜索功能、灵感分类更全面好用的灵感社区 Designspiration，看看它的特点及它强大的色彩搜索功能如何帮助我们更好地进行设计。Designspiration 的网站主页便捷的功能分区Designspiration 会让用户在注册时预先设置 5 个领域偏好，然后按照用户偏好在主页上进行个性化推荐。但是用户并非只能这样被动的接受推送，Designspiration 在用户主页上和 Home 并列设置了 Popular、Everthing、Topic 几个分区。在 Popular 可以看到近期最受大家欢迎和专注的灵感创意；在 Everthing 中可以浏览网站涉及到的所有设计灵感，突破当初设置好的偏好限制，帮助大家更好地拓展视野；Topic 中则可以看到网站按不同主题收录的灵感创意，各类主题应有尽有，让用户更自由、更有针对性的寻找创意。超强大的色彩检索功能Designspiration 设立的重点之一就是构建独有新奇的色彩工具，这也是他区别于其他灵感网站的特色所在。1. 指定配色搜索Designspiration 在主页搜索栏右侧有一个调色盘小图标，点击后就是一个颜色面板。我们可以在颜色面板上任意选择至多 5 种颜色，然后就可以搜索以这种配色为主的所有灵感。在搜索栏选择配色指定配色搜索结果2. 色彩关联搜索点进一个灵感详情页，我们会发现右边有一个小色环和一组配色，是网站根据此灵感的配色自动生成的。点击色环，我们会得到的所有类似配色的灵感。我们还可以更改原有配色中的一种颜色，得到全新的推荐。如果直接点击色环右边单独的颜色，就会得到色号及同类色推荐。Designspiration 这种强大的色彩搜索功能可以帮助我们快速找到想要色系的灵感参考，还可以当做一个实时色卡开使用，对于想找配色参考、提高配色审美能力的设计师来说算是一种魔法工具了。针对性极强的关联搜索除了上面说到的色彩关联搜索，Designspiration 的灵感注释标签也是可以进行关联搜索的。只要点击灵感详情页右侧标签，就可以立刻得到同类灵感推荐。再次总结一下 Designspiration 的特点：强大的色彩搜索功能，可以通过指定配色找灵感，也可以自动生成灵感的配色并进行同类推荐，可以当做一个实时色卡工具使用。贴心智能的关联搜索设置，只要你对灵感的其中一个点感兴趣，马上就能在同页面找到可以跳转的标签，不用回到主页重新搜索。以上就是推荐的全部内容，感兴趣的小伙伴快去 Designspiration 动手试试吧~「Designspiration 官网」 https://www.designspiration.com/配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/designspiration
颜色 图层 模式 最终效果一、设计字体字型1、复制出副本得到副本字体，两个字体层设置填充设置为0；ctrl+点击字体图层缩略图调出蚂蚁线；执行菜单栏<选择<扩展5像素，填充＃9b7e4f 颜色。2、对填充颜色字体层执行样式设置，包括外发光/内发光/斜角浮雕等高线纹理/描边设置。A：外发光：颜色参数为 ＃8f6f2c。B：内发光：混合模式正片叠底，颜色＃e4d7b2，源居中，大小125，范围35％。C：斜角与浮雕：深度为300，大小20，雕刻清晰。另外，滤色模式颜色更改为＃c6a96c，将阴影模式颜色更改为＃ddd6c1；等高线是一个山峰型，勾选消除锯齿 70%。D：纹理：选择灰色纸质纹理，深度 8。E：描边：大小为1，将填充类型更改为渐变，并将角度更改为90.使用类似金属渐变。确定所有设置确定把改层填充度改为50%。二、灯线的绘制1、首先将前景色设置为＃555555颜色，点击画笔工具设置大小为3像素的硬刷；新建图层命名（灯线）；利用钢笔绘所有灯线部分如图；之后框选所有路径状态下右击描边路径，不勾选模拟压力得到灯线的绘制，之后设置填充度50%。（钢笔路径保留绘制方式：绘制路径之后,ctrl+点击空白地方可以释放路径继续绘制路径，该路径会一直保留不会消失；钢笔路径描边路径方法：在钢笔工具状态下ctrl+鼠标框选所有路径，右击描边路径即可。）。2、给灯线层设置样式，包括：外发光/内发光。A：外发光：将混合模式更改为亮光模式，颜色#ffffbe，大小13。B：内发光：混合模式更改为亮光模式，颜色＃d5d5cd，大小1，完成设置确定。复制电线图层形成副本，在该副本灯线层更改图层样式，内发光大小为 10。三、自定义灯丝画笔A：需要建立16×16像素的文档，透明的背景；绘制圆形路径描边画笔，1个像素的笔触，之后执行选择<菜单栏<编辑<定义画笔预设；B：回到原文档，设置前景色为＃d0b174，按F5调出刚才预设的画笔<设置模拟压力设置如图。新建图层命名为灯丝，在图层利用钢笔绘制灯丝部分，与上面绘制灯线一致，之后右击描边路径，这次勾选模拟压力，最后得到灯丝效果；之后复制灯线层的图层样式，粘贴到该层，根据灯丝的强弱更改设置。添加亮光部分：再新建一个图层为亮光层，继续运用钢笔描边绘制灯光亮光部分，黏贴样式调整参数，得到整体效果。C：在字体的第二层新建图层为“针”（灯丝链接点）层，填充为0。 设置样式如图；内发光：将混合模式更改为亮光模式，颜色为＃e9dcbb，源为居中，大小7。斜角和浮雕：雕刻清晰，光滑轮廓双击，勾选消除锯齿，并将阴影模式颜色更改为＃9a8739。等高线：U型曲线模式，勾选“消除锯齿”框，最后确定。回到“针”图层，用12像素硬边画笔，点击各个电线末尾端，形成最后的插针效果。四、设置环境光效果1、回到之前字体层填充为0的层上，双击给文字设置样式，包括：内阴影、投影、斜面浮雕等高线如图；阴影：将颜色更改为#cbcbcb，具体设置如图内阴影：将颜色更改为＃c2b394，具体设置如图斜角和浮雕/等高线设置：具体设置如图，“阴影的模式”颜色更改为#fefefe。2、回到之前字体副本层填充为0上，设置样式包括：内阴影/内发光/斜角和浮雕，最后完成所有设置。内阴影：将颜色更改为＃d1c2a4，将不透明度更改为50％，将距离更改为0，将大小更改为35。内发光：将颜色更改为＃ebe3c8，大小为70。斜面浮雕：将深度更改为500，将尺寸更改为20，将柔化更改为1.取消选中使用全局灯光框，然后将角度更改为60，将高度更改为35。将高亮模式更改为鲜艳的灯光，其颜色为＃d6d2bc，其不透明度为60％，并将阴影模式颜色更改为#fefefe。最终得到效果。（想改变灯光颜色可以根据设置样式得到，也可以合并图层调节曲线对比和色相变化，得到满意的效果；关掉黑色背景层会发现字体会呈现透明的状态，透过图层，可以在下层建立颜色层用画笔填上合适的颜色得到丰富的光辉效果，如图。） 。最终效果：
图层 明度 颜色 文字部分由两层构成：巧克力表层和夹心部分，表层部分直接用图层样式制作，边缘部分用蒙版擦出一些小孔；夹心部分可直接使用素材；后期在添加新一些装饰素材丰富画面。最终效果一、新建一个1600*1200像素图层，G选择渐变工具拉渐变。二、新建一个图层，用柔性画笔颜色：fea800，大小：1245在图层中心画一个圆形。图层模式改为滤色，不透明度20%。三、拖入背景图层，按住ALT给背景图层创建黑色蒙版，G渐变工具选择黑白颜色给蒙版拉渐变（如果实在拉不出圆的就自己用白色画笔画出来吧）图层模式改为“线性减淡”。四、新建一个色相饱和度剪贴蒙版图层，设置 175/-100/-76。五、新建一个图层用#612200颜色拉一个透明渐变，图层模式改为柔光，不透明度45%。六、用Val字体，选择#5b1e00颜色排字！设置图层样式。七、给字体图层加一个白色蒙版，用黑色硬性画笔画出缺口像被咬了一样。八、新建图层，用#f8941d颜色拉一个透明渐变，然后右键创建剪贴蒙版！图层模式改为变亮，不透明度32%。九、复制一个文字图层，用移动工具移动一点点下面的文字图层。十、拖入文理图片，右键创建剪贴蒙版。
飞翔的企鹅
表哥
在路上
张大湿
落霞与孤鹜
