明度 颜色 色相 前言这一次的北农商银行的项目，是在企业版手机银行 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
极光 背景 明度 作为设计师都会时刻关注设计趋势，以 UI 设计来说每年都会出现很多相关的趋势总结，基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向，带给用户更好的感官体验。最近黑马哥结合落地产品所呈现出来的设计趋势，进行了这方面的探索，今天以其中之一的趋势-极光风和大家先聊一聊。极光风趋势的来源极光（Aurora），是一种绚丽多彩的等离子体（发光）现象，在夜间出现灿烂美丽的光辉。在南极被称为南极光，在北极被称为北极光，视为自然界中最漂亮的奇观之一。（来源于百度百科）这样的自然奇观被摄影师捕捉到静态的影像中，设计师再结合这样的影像作品，视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用，形成一种流行的视觉风格。在众多的互联网产品设计中，也经常运用这种类似极光的视觉影像风格，称之为 Aurora UI。在产品设计底层需求获得满足之后，感光体验的提升被重视，视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层，在背景层和装饰性元素上面发挥，使得 Aurora UI 得到了发挥的空间。富有创意的极光风在背景层和装饰性元素上面发挥得淋漓尽致，助推了其成为 UI 设计趋势的关键，下面就让我们一起来看看落地产品中的 Aurora UI。UI 场景中的极光风设计由于在众多落地产品中被广泛运用，形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似，也有设计师将该风格归类为弥散光，下面就看一下具体的运用场景。弥散光设计！网易阿里大厂都在用的刷屏级新设计风这阵子不是有一种设计流行风悄悄刮了起来嘛！阅读文章 > 1. 强化导航栏设计的视觉感如果想要强化顶部导航栏的视觉感，通常是利用品牌色作为背景颜色，这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式，而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力，也能使得整体风格更加年轻化。2. 强化个人中心顶部视觉区域随着互联网用户年轻化的趋势，在配色上面逐步趋近于年轻化，众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势，可以是同色系的饱和度变化，也可以是不同色相的相互融合。利用低饱和度高明度的配色原则，使得整体的视觉感更加轻量化，视觉效果清新自然且通透力更强。也有基于品牌色结合极光风进行融合，相对单色来说效果更加丰富自然，使得背景的变化更加多样。3. 丰富背景设计的视觉感除了在顶部区域进行运用以外，也有一些产品会在背景层面进行强化，相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少，在局部背景层上的运用比较多些，可以强化局部模块的视觉感。4. 点缀弹窗设计局部极光风的设计表现也会出现在一些局部功能的细节处，比如运用到弹窗的色彩处理中，作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然，也不会过度干扰其他元素的呈现。5. 强化卡片式设计局部卡片式设计也是近些年运用比较多的设计趋势之一，基本是以白色卡片居多，具有整合信息的好处。在卡片的边缘位置强化色彩，可以使得卡片色彩更加丰富，也有一些电商产品是起到与商品形成色彩呼应的作用。6. 突出搜索设计的差异化搜索框的设计在大部分的认知里面都是白色或者浅灰色，也有一些是带有边框的形式，利用低饱和度高明度的配色原则来进行设计，带来的效果更加年轻化。也是一种差异化设计的尝试，打破常规的设计认知。也可以举一反三，在一些按钮或者标签设计中运用。7. 分类标签的装饰设计这是一个装饰性的设计尝试，在突出模块分类的当前状态时，通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化，装饰元素除了线段和一些图形元素以外，极光风的背景元素也是一种不错的表现手法。8. 图标设计中的运用运用到图标设计中通常是出现在质感类图标，辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求，就可以尝试运用极光风的处理技巧，将颜色通过模糊和剪切蒙版的形式融入到图标中，可以使得图标色彩丰富和强化光影变化。9. 深色卡片色彩强化以上案例属于在浅色或者白色的环境中运用，在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用，效果也是非常不错的，可以给深色的卡片一些色彩感和丰富度。10. 作品包装中的背景强化除了在 UI 设计场景中运用以外，最近发现在设计师作品包装中的运用也是非常普遍，用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰，也有在封面设计中重点运用，使得作品集紧贴设计趋势，提高作品的打开率。11. 其他场景中的应用普及在 UI 场景还有很多运用场景，这里仅为抛砖引玉，无论是作为背景强化还是元素装饰，都能带给用户更加年轻化的感官体验。除了在 UI 场景中呈现以外，极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛，是一个影响范围比较广的设计趋势之一。实现极光风设计的方法通过一些线上的案例欣赏和分析，相信大家对于极光风在 UI 场景中运用都有一定的了解，在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难，关键因素在于控制好配色原理，下面就为大家总结几种实现的方法。方法 01：利用不透明度渐变融合不透明度渐变在设计中的运用比较普遍，利用的是不透明度从 100%-0% 之间形成渐变，让色彩逐渐消失或者淡化。画一个圆形，选择径向渐变，渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%，另一个颜色不透明度设置为 0%，这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合，即可完成极光风背景设计。方法 02：利用模糊度变化融合这个方法是结合了形状和模糊设置（高斯模糊等），绘制几个大小不等的圆形进行排版组合，然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异，排版错落有致，这样形成的效果比较富有变化。在颜色的选择上面需要根据背景的强化程度选择，低饱和度的颜色融合性更高，适合作为弱化性质的背景使用。方法 03：利用背景模糊融合背景模糊在 Sketch、Figma 等设计软件中有该功能，是一个影响设计趋势较为常用的功能，特别是在实现玻璃质感和一些质感图标上面非常实用。在背景层绘制图形，颜色和形状均可自由发挥，然后再绘制一个形状作为调节层，调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色（必须要带有透明度），然后再设置背景模糊，背景模糊数值的大小决定模糊的程度，不透明度的大小决定整体效果的亮度。方法 04：利用图片模糊融合以上的方法都需要进行配色处理，如果色感方面比较薄弱的设计师，也可以挑选一些不错的图片来实现极光风效果。挑选一张色彩符合要求的图片，然后在 Photoshop 等设计软件中执行高斯模糊，半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外，也可以截取其中的一部分，也许会带来意想不到的效果。除了这几个方法以外还有更多不一样的实现方法，大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式，根据想要实现的效果选择最灵活的方法，这样才能便于后期的反复调整。极光风案例实战小结研究落地产品的设计细节和视觉趋势，将有助于提高我们对于当前有效设计趋势的把控，而不仅仅只是停留在概念化的预测阶段，而是行之有效的真实案例。极光风是近些年运用在落地产品中的 UI 设计趋势之一，通过大量案例验证之后的有效方法，希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多，本次分享的仅为抛砖引玉，后续将和大家探讨更多的有效设计趋势，辅助提高我们的设计能力。2021 年，UI设计师最值得跟进的新趋势「极光风」编者按：如果你有关注设计趋势，那么你一定会知道新拟物化和玻璃拟物化这两种近年被提出的设计风格，而最初提出它们的，就是著名的设计师 Michal Malewicz，他如今俨然已经是设计圈内的趋势观察家。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/aurora-ui-design-trend
彩色 明度 效果 大家好我是和你们聊设计的花生~渐变波点是设计中常用的一种装饰元素，和各种风格的适配性很强。渐变波点的制作过程比较简单，用 PS 或者 AI 中的彩色半调效果就能就快作出一个渐变效果的波点，但是你了解如何调节参数，才能作出符合自己要求的渐变波点吗？我为大家总结了 3 种使用彩色半调效果制作渐变波点的方法，另外还深入分析了彩色半调的原理，让大家彻底明白调整哪些数值才能更好地作出想要的波点效果，一起来看看吧~在 AI 中使用彩色半调制作渐变波点在 PS 中使用彩色半调制作渐变波点如何调整出自己想要的渐变波点如何调整出自己想要的渐变波点总结以上就是使用彩色半调效果制作渐变波点的方法机器原理分析，对原理部分在总结一下：渐变的明度差会影响波点的密集程度，明度越低，波点越密集；彩色半调面板的「最大半径」决定最大波点半径值，范围在 1-127；彩色半调面板的「网角度」数值一致，则波点最终效果为黑色，波点会按输入的统一角度值值旋转；彩色半调面板的「网角度」数值不一致，会发生色彩便宜，不同通道的颜色会按输入的角度值各自进行旋转，最终导致色彩变异。更多作者文章：这10个 Dribbble 顶尖大神的作品，是我每日学习的源泉今天彩云跟大家分享的是 Dribbble 上，我非常喜欢的插画设计大佬们。阅读文章 > 这5个顶尖插画师的线稿作品，是我每日学习的源泉！关注优秀插画师，学习借鉴其绘画技巧是插画进阶必不可少的过程。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/the-gradient-wave-point
明度 纯度 色彩 色彩明度与纯度的 4 种类型配色，你知道吗？之前为大家介绍了 PCCS 色彩体系，提到了 PCCS 色彩体系中的各项概念：24 色相环、17 级明度阶梯、10 级纯度阶梯及 12 种融合明度和纯度两个概念的色调。配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 为了帮助大家更好的理解 PCCS 色彩体系中的各个色彩概念，将其运用到今后实践中，今天带大家更深入地了解 PCCS 对色彩明度和纯度的分类，看看不同明度和纯度的色彩搭配会呈现什么样的效果，以及哪些方法可以帮助我们取得更好看和谐的配色。明度——高明度与低明度PCCS 色彩体系将明度分为 17 级，每 0.5 级为一个阶梯。为了方便理解，我们也可以粗略地分为 9 级，黑为 1.5，白为 9.5；以 5.5 级灰为中间点，1.5~5.5 为低明度，5.5~9.5 为高明度。明度差越大颜色对比越明显，明度差越小则对比越弱。1. 高明度的色彩配色高明度色彩区域包含的色调有：pale（稀薄的）、light（浅的）、bright（明亮的）、light grayish（浅灰的）、soft（柔软的）、部分的 vivid（鲜的）和 strong（强的）。使用高明度的色彩进行配色令人感觉明亮，存在的问题是明度差有限，容易造成对比不够强烈，无法突出重点。所以想要使高明度配色的画面层次对比明显，更有视觉吸引力，可以加入少量的暗色。2. 低明度的色彩配色低明度色彩区域包含的色调有：dark grayish（暗灰的）、grayish（灰色的）、dull（钝重的）、dark（暗的）、deep（浓的）、部分的 vivid（鲜的）和 strong（强的）。低明度的色彩配色会给人暗沉的印象。如果想避免画面过于灰暗沉闷，可以加入少量高明度的色彩，画面会更充实更有活力。纯度——高纯度与低纯度PCCS 色彩体系将纯度分为 10 级，无彩色为 0s，纯色为 10s。但是 10s 是用色卡无法再现的颜色，所以色卡中的纯色是 9s。1. 高纯度的色彩配色高纯度色彩包含的色调有：vivid （鲜明的）、bright（明亮的）、strong（强的）、deep（浓的）。其中 vivid 为准高纯度色，其余为次高纯度色。高纯度的配色给人灿烂华丽的感觉，充满活力；而加大高纯度色之间的明度差则可以让画面层次分明，视觉上更舒适。2. 低纯度的色彩配色低纯度色彩包含的色调有：pale（稀薄的）、light（浅的）、light grayish（浅灰的）、soft（柔软的）、grayish（灰色）、dull（钝重的）、dark grayish（暗灰的）、dark（暗的），其中 light、soft、dull、dark 四个色调为准低纯度色彩，其余为次低纯度色。低纯度的色彩组合带来沉着稳定的配色，给人朴素雅致的印象。这类颜色搭配在一起不会显得突兀，但是想要画面更出彩更有吸引力，则需要拉开色彩间的明度对比，或加入适量的高纯度色彩。明度与纯度的 4 种类型配色将明度与纯度联系在一起研究，我们可以将其分为 4 种配色类型，分别是高明度/高纯度、高明度/低纯度、低明度/高纯度、低明度/低纯度。1. 高明度/高纯度配色高明度/高纯度色彩搭配在一起会十分的鲜艳明亮，和上面提到过的高明度配色一样，这个区域的配色要注意拉开明度层次，以避免颜色分界不清带来的视觉疲劳。2. 高明度/低纯度配色高明度/低纯度的颜色搭配在一起不会显得花哨也不会过于沉闷，给人温润淡雅的感觉，搭配一些暗色使用会使画面更完整丰富。3. 低明度/高纯度配色低明度/高纯度的颜色搭配给人浓郁厚重的感觉，区域内包含了一部分 vivid 的色调，搭配使用也能使画面充满活力。4. 低明度/低纯度配色低明度/低纯度的色彩都比较暗沉钝重，给人阴郁压抑之感，但是如果运用得当也能传达出深刻厚重的情绪。如果想这种配色看起来不那么压抑，可以加入一些高明度/高纯度的色彩，画面也会更有吸引力。总结不同明度、不同纯度的颜色搭配组合会产生不一样的效果，给人的感觉也不一样。通过文章我们了解了明度与纯度的 4 种类型配色，它们对应不同的色调，能营造不同的情绪氛围，因此各自适合不同的主题。将这些弄清楚，以后在确定配色方案时就能有的放矢，更快更准确的找到合适的配色。喜欢的小伙伴记得点赞收藏加关注，今后会继续为大家带来更多有用的色彩知识！4000字干货！从零开始帮你提高配色水平！赶在年前将这篇关于“配色”的设计解析整理了出来，分享给大家，希望对大家有帮助。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/color-value-and-purity
明度 调色板 色彩 最近我在想一个问题：假如设计师负责一款全新的产品，不受已有规范的束缚，我们该如何定义产品的色彩体系呢？有些设计师可能会凭自己的主观想法定义色值，觉得这个颜色在界面里好看就用了，但是我觉得这样是不够规范的，更多应该考虑到全局的通用性和科学性。基于这个问题点，我网上查看研究了一些资料文章，参考了 Ant Design 和 Material Design，学习到了一些定义色彩 ID 的理论知识，来看看吧。色彩色彩是设计系统的重要组成部分，可以使用在品牌感、信息层级、操作指引、交互反馈的场景。在细分层面，色彩可以分为主色、辅助色和中性色。设计师调整颜色的时候，建议使用 HSB 模式，调整色彩更直观，符合心理预期，因为人脑也是通过这个模式来辨别颜色的。其中，H 代表色相，S 代表饱和度，B 代表亮度。色相是区别各种不同色彩的标准，通过 360圆形色环来取色，每一度代表一个色相。饱和度指色彩的纯度，饱和度越低，越往白色过渡。亮度指色彩的明亮程度，亮度越低，越往黑色过渡。学会HSB色彩模式，让配色有理有据！念起作为一名 UI 设计师，不免每天都会和色彩打交道，但有时总会苦恼于色感把握不准，让我们配的色彩，总是“不对味儿”。阅读文章 > 这是常用软件 HSB 模式调整颜色的截图，帮助大家理解。主色主色一般和产品的品牌色相关联，很大程度决定了产品整体的调性和视觉风格，常用于主按钮、文字高亮、强调操作等界面场景。产品 1.0 版本以上，Logo 一般都会有定义好的品牌色，界面设计中的主色和品牌色保持一致即可，可以传递统一的理念。如果从 0 开始的新产品还没有定义 Logo 和品牌色，界面要先设计开发，这时我们可以结合产品行业特性、产品理念、产品名称、用户特征等进行思考，提取关键字和情绪板，从而提取多个色系，最终和多角色沟通确定主色系，避免后续反复调整的成本。确定主色系后，设计师该如何定义具体色值呢？可能大部分设计师都是直接吸取同色系的大厂产品色值，再微调下参数做出差异性就确定了。这确实是一个取巧方法，毕竟不容易出错。但我觉得设计师需要有自己的思考过程，所以进行了国内外大厂产品主色的调研分析，总结了一些共同点和差异点。我发现 Apple 系和国内产品的主色倾向于饱和度和明度较高的颜色，基本分布在横竖向三等分的右上角，我认为主色取值可以参考这个区域。看下部分产品字色、按钮色、深色模式的效果，还可以。而谷歌系、微软系产品倾向于明度稍低的颜色。从设计层面来看，颜色有点暗、有点脏，不太建议。我有点不太理解国外设计师的视觉审美，研究了 WCAG 2.1 无障碍标准后，才发现他们在为障碍（色盲）用户着想，主色都符合 WCAG 2.1 的 4.5:1 最小对比度（AA 级）。这个标准涵盖了使 Web 内容更易于访问的各种建议，遵循这些准则将使更多残疾人更容易获取网站内容。从分析的国内产品中，我只发现知乎的主色符合这个标准。这其实就引发了我们的思考，视觉效果和无障碍人群体验，哪个更重要呢？我觉得两个层面都挺重要的，不过在实际场景中，建议设计师更多是结合品牌调性、视觉效果去定义具体色值，在美感、可读性、可用性之间得到平衡。注意一点，明度不宜太低，颜色会比较脏，也不太符合年轻用户的审美。如果我负责一款产品，已经确定蓝色系为主色，我会选择明亮一点的色值，在文字、按钮、深色模式等常用场景下保证可读性和可用性。色值定为#247FFF，后面讲辅助色的时候会用到。辅助色辅助色，可以用于特定功能、状态反馈、应用图标等场景，反馈的成功、失败、警告状态最常用到了。基于主色，我们怎么定义辅助色呢？我总结了点小方法。1. 以主色的色相为基础，差值为 15，围绕 360色环提取 24 色。（差值 15的颜色属于同类色临界点，有利于我们划分色度层级，又不会失去想要的色系）2. 参考常用配色理论：相似色、邻近色、三分色、互补色，得出部分色值。3. 结合界面场景和使用效果，对颜色进行删减和补充，最终确定所需要的辅助色。（建议最多 12 种，避免色彩太多，不利于设计师理解使用）4、将辅助色和主色对比，进行视觉感官明度校正。（虽然色彩的饱和度和明度一样，但不同色相的视觉感官明度是不一样的，绿色、黄色、青色实际看起来特别浅，所以我们要手动调整）校准方式：在颜色上面叠加纯黑色图层，图层模式选择色相，就可以直观地看到无彩色视觉感官明度。相差大的颜色可以以 5 为差值调整饱和度或明度，最后再根据效果进行微调。（色相的差值能被 5 整除，饱和度和明度同样适用）调色板为了满足界面对色彩的需求，需要对主色和辅助色进行色板延伸，建立不同梯度的调色板。这里有两种计算方法：1. 浅色调色板，在颜色上依次叠加 20%、40%、60%、80%、90%不透明度的白色；深色调色板，在颜色上依次叠加 20%、40%、60%、80%不透明度的黑色。2. 浅色调色板，色相（H）往感光明度高的色相依次差值 2，饱和度（S）依次减少 15，明度（B）依次增加 5；深色调色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次减少 15，饱和度（S）依次增加 5。（Ant Design 和 Material Design 调色板也都加了色相旋转）。从对比效果来看，比较建议使用第 2 种方法，使用 HSB 模式的值进行递减/递增得到完整渐变色板，颜色更加明亮通透。Ant Design 官网也有在线生成调色板功能，和第二种方法逻辑类似，可以快速生成，大家可以去使用。最终生成主色和辅助色的调色板，效果如下。中性色中性色包含黑、白、灰，合理地使用中性色能够使界面信息层级主次分明，助力于浏览体验，常用于字色、控件色、背景色的场景。由于纯灰色显得比较脏，人眼对偏蓝的灰色阅读体验更好，在桌面端更建议使用灰色相加点蓝。计算方法：1. 选择和主色视觉感官明度相同的灰色，按调色板方法建立梯度色板。2. 将蓝色调色板不透明度调为 10%，灰色调色板不透明度调为 90%，两个色板叠加，最后吸取颜色，再加入黑白两个色板，就确定了从白到黑的 12 种颜色。最终，我们就确定了一款产品的色彩体系，界面中使用的颜色需要遵循调色板色值，一致性设计。总结以上就是设计系统中建立色彩体系的思考总结。设计师调整颜色时，建议使用 HSB 模式，调整色彩更直观，符合心理预期。主色需要结合品牌调性、视觉效果定义具体 ID 色值，在美感、可读性、可用性之间得到平衡。注意，明度不宜太低，颜色会比较脏。辅助色、调色板、中性色定义 ID 色值过程中，建议遵循一定的色彩理论准则，科学地定义颜色，更有说服力。还有许多不足，继续学习去了。参考文献：Ant Design 设计系统 – 色彩Material Design 设计系统 – 色彩Ant Design 色板生成算法演进之路Web 内容无障碍指南 (WCAG) 2.1找不到配色灵感？试试这个把想法变成配色板的Picalette如果想寻找和颜色有关的灵感，我之前介绍过不少配色工具，可以通过各种方式产生需要的颜色组合，像是Palettable 以互动方式来找出最合适的配色组合：[link https://www.uisdc.com/color-matching-artifact-palettable]阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/color-order-system
图层 明度 颜色 文字部分由两层构成：巧克力表层和夹心部分，表层部分直接用图层样式制作，边缘部分用蒙版擦出一些小孔；夹心部分可直接使用素材；后期在添加新一些装饰素材丰富画面。最终效果一、新建一个1600*1200像素图层，G选择渐变工具拉渐变。二、新建一个图层，用柔性画笔颜色：fea800，大小：1245在图层中心画一个圆形。图层模式改为滤色，不透明度20%。三、拖入背景图层，按住ALT给背景图层创建黑色蒙版，G渐变工具选择黑白颜色给蒙版拉渐变（如果实在拉不出圆的就自己用白色画笔画出来吧）图层模式改为“线性减淡”。四、新建一个色相饱和度剪贴蒙版图层，设置 175/-100/-76。五、新建一个图层用#612200颜色拉一个透明渐变，图层模式改为柔光，不透明度45%。六、用Val字体，选择#5b1e00颜色排字！设置图层样式。七、给字体图层加一个白色蒙版，用黑色硬性画笔画出缺口像被咬了一样。八、新建图层，用#f8941d颜色拉一个透明渐变，然后右键创建剪贴蒙版！图层模式改为变亮，不透明度32%。九、复制一个文字图层，用移动工具移动一点点下面的文字图层。十、拖入文理图片，右键创建剪贴蒙版。
明度 反光 图层 气泡的制作重点就是高光部分的渲染，边缘，中间等都有高光区域，并且高光形状各不相同。刻画的时候需要配合蒙版、涂抹工具、滤镜等来共同完成。最终效果一、新建大小自定的文档，背景填充橙黄色。新建图层，画一个圆，填色比背景色深一点，羽化一个像素。然后添加外发光。二、用路径画出反光的部分，用橡皮（画笔）修改边缘。一层效果不好的话可以在上面载覆盖一层更小的。三、用路径画出高光部分，羽化后填充，然后上橡皮，最后用涂抹工具来两下出来的。反光部分用软画笔点一下光点。四、涂抹的效果如下图。五、一个是中间的这一陀，加上外发光的效果，上面再叠加一层不透明度高一点的图层。六、我把中间的反光隐藏掉了，开始画明暗交界线，也是路径画好用橡皮修改。还是叠加了两层。七、另外就是气泡上这些让层次更丰富的弧线。八、做法是先画扁扁的椭圆，不透明度50%左右，多画几个，然后合并图层。也可以将合并后的图层复制后ctrl+t拉高，再合并一次，更丰富。然后，滤镜>扭曲>极坐标。我做了两种不同大小和透明度的弧线。弧线的大小要小于整体的圆。九、现在就是这个样子了。十、开始画投影，羽化数值要大一点。我是30，看你的图片大小了。十一、应为气泡式半透明的，所以阴影上的反光比较明显，颜色接近背景色，做法跟投影一样的。十二、投影上再添加一层高亮。十三、最后就是背景了，加上渐变。最终效果：
明度 颜色 步骤 在本教程中，我们创建了一个简单的背景。然后我们创建一个文本层，之后，我们用几层的影响，随着新的图层样式功能，创建一个复古的文字效果。最后，我们要完成的效果添加了一个简单的纹理。先看看效果图1、创建背景步骤1创建1000 x 1000像素，并复制背景层，并命名为：学UI【底色】。改变学UI【底色】的填充为0。步骤2双击学UI【底色】层的渐变叠加使用以下设置：风格：径向的规模：150%颜色渐变# ede6cf向左# e1c194向右一点。2、创建文本步骤1使用字体创建文本，文字大小这个根据你画布实际情况和任何你喜欢的颜色，3、添加多个图层样式步骤1双击文本层添加以下图层样式，添加一个描边使用设置：大小：3位置：内部不透明度：48%颜色# fffaf3点击描边后面的加号，就可以新建一个新的描边模式，并使用以下设置它：位置：外部不透明度：100%颜色# ffffff步骤2添加一个内阴影使用设置：颜色# 040000不透明度：35%距离：1大小:2添加一个内阴影使用设置：颜色# ab6b18不透明度：80%距离：8大小:5步骤3添加的另一个实例内阴影这些设置的影响：颜色# d9953d取消使用全局光角：63距离：11
步骤 明度 矩形 1.创建背景今天给大家带来一个有些老的教程，但是练习技法什么的还是不会老哈！步骤1我们可以创立两个文件图层，一个叫背景，一个叫游戏机，然后我们确保位于正确的图层上,然后使用矩形工具 (M) 创建一个800 x 600px的形状,我们将使用#F96969进行着色,然后使用”对齐”面板的”水平和垂直对齐中心”来对齐画板的中心位置。步骤2完成后,锁定当前图层,然后我们到下一个继续图层绘制,这个时候我们就将开始绘制我们的游戏机了。2.创建游戏的正面底部有了背景,我们现在可以专注于我们的小游戏机了,我们将使用Illustrator 的一些基本形状创建该游戏机。我们将首先绘制设备的正面部分,完成后将会绘制侧面的厚度部分。步骤1开始绘制设备的主体,创建一个144 x 232px矩形的圆角为 8px,我们将使用#EDE4E4来着色。步骤2使用直接选择工具 (A),选择形状的右下角,并通过在变换面板的矩形属性将其半径设置为 32 px 来调整其圆度。步骤3创建游戏机的侧面部分,选中我们现在绘制好的形状的副本(ctrl-C + ctrl-B),并将其向左移动 24 px,确保将其颜色更改为较暗一些的颜色(#DDCCCC)。步骤4创建一个游戏机主形状的副本 (Ctrl-C), 并将其粘贴到原位 (Ctrl-F),然后通过进入对象 > 路径 >偏移路径，并将偏移的值设置为-4px。步骤5我们将使用此偏移来创建外部的高光,通过选择它的副本,然后使用路径查找器的减去顶层形状模式来切掉不要的部分。然后,选择生成的形状并将其颜色更改为白色(#FFFFFF),将其混合模式设置为”变亮”,并将其不透明度降低到 40%。步骤6此时,最好使用 Ctrl-G 键盘快捷键把做好的元素打组,从而将游戏机的正面与其侧面部分分开。这样,我们只需双击分组对象就可以进入隔离模式,然后就可以向其添加新的东西。使用矩形工具 (M), 创建一个 144 x 4 px 水平分隔线 (#D8C5C5), 我们将会设置一个距离游戏机的顶部16px的间隙.步骤7在它上方添加另一个更暗的144 x 2 px 矩形(#C1A8A8),当添加完第二条水平分隔线后,选择它和较粗的线,并使用 Ctrl-G 键盘快捷键将它们组合在一起。步骤8接下来,我们将在我们刚才创建的两条水平分隔线上添加两个 6 x16px 的矩形 (#D8C5C5),将每个矩形放置在正面边缘距离中心12 px的地方。步骤9将刚才绘制的矩形放在其顶部,然后将它们 (Ctrl-G) 打组,这样就不会因意外而让他们错位。步骤10使用矩形工具 (M), 再创建两个 2 x 10 px 形状,我们将使用白色(#FFFFFF)着色,然后定位到每个垂直分隔器的左侧,确保将其混合模式调整为”变亮”,并将其不透明度降低到 40%。步骤11接下来,我们将开始绘制关闭/打开开关,创建一个10 x 4px 矩形(#D8C5C5),将其对齐正面的顶部部分,并将其定位到第一个垂直分隔器的右侧。步骤12使用圆角矩形工具,创建具有4px 圆角的28 x8px的形状(#D8C5C5),然后添加一个较小的20 x 4px圆角矩形(#EDE4E4),其顶部圆角半径为2px。步骤13创建两个2 x 4px的矩形 (#EDE4E4),然进行圆角处理，然后放到图片中对应的位置。步骤14使用三个2 x 2px的矩形(#C1A8A8)作为阴影,从而赋予此部分更多立体感。步骤15通过添加一些细节(如垂直线下方的阴影)来完成开关,重复使用我们已有的形状,通过将其颜色设置为#C1A8A8来调整它们。添加阴影后,不要忘记将细微的高光绘制到开关的按钮上半部分,使用白色(#FFFFFF),为混合模式提供”变亮”,为”不透明度”设置为 40%。步骤16在较宽的水平分隔线下方添加一个 136 x 2px(#FFFFFF)矩形,通过将混合模式设置为”变亮”并将其不透明度降低到 40%,我们将其作为高光。到现在,我们几乎完成了游戏机的上半部分,这意味着我们现在可以专注于创建显示器了,这是所有的乐趣发生的地方。步骤17选择圆角矩形工具,创建一个 88 x 120px 的形状,具有 4 px 的圆角半径,我们将使用#7E7E89进行着色,然后将其定位在水平高光下方具有4 px 的距离的位置。步骤18显示屏就位后,我们必须稍微调整一下,将其右下角半径设置为 20 px,而不是用默认的4px。步骤19使用前面创建正面的方法创建显示器的厚度感,然后选择形状并将其颜色更改为黑色#000000,将其不透明度降低到 20%。步骤20在使用类似的过程,添加一个2 px宽的内部高光,使用白色(#FFFFFF),为混合模式为”变亮”,不透明度为 20%。步骤21在矩形工具 (M) 的帮助下,创建一个 80 x 64px 的形状,我们将使用#82874D进行着色,因为它将充当显示器的活动区域,并将其放置在灰色图形上,确保将其与其中心对齐。步骤22通过使用偏移路径工具绘制4 px 厚的内阴影(颜色:黑色)为屏幕提供一些厚度感然后不透明度设置为20%。步骤23添加阴影后,选择笔工具 (P) 并跟随几个对角线绘制高光,使用白色(#FFFFFF)作为填充颜色,将混合模式设置为柔光,并将不透明度降至40%。步骤24此时,屏幕已接近完成。我们现在需要做的是添加一些小点缀在游戏机上面,然而你可以使用#6B6B75来着色。步骤25通过添加两对白色垂直矩形来作为高光，将其混合模式改为:变亮;不透明度:20%,然后选择其所有组合元素,并使用 Ctrl-G 键盘快捷键将它们打组在一起。步骤26使用椭圆工具 (L) 创建一个 44 x 44 px 的圆圈(#DDCCCC),他将距离屏幕底部大约 24 px。步骤27创建一个垂直的14 x 36 px 圆角矩形(#6B6B75),其圆角半径为2px ,我们将添加副本并旋转他,确保将它们居中到基础圆的中心。步骤28通过添加一个 12 x 12px 的圆圈(#5E5E68),为按钮提供一些厚度感。我们将圆放置在中心位置。步骤29通过添加几个白色矩形来作为高光，然后混合模式:变亮，不透明度: 20%，和阴影(颜色:#BAA0A0),然后将它们组合在一起(Ctrl-G)。步骤30由于我们将再添加几个按钮,因此现在最好添加垂直高光,这样我们就不必在创建后将它们调整到后面。因此,使用矩形工具 (M) 创建四对高光,对填充颜色使用白色 (#FFFFFF),将混合模式设置为”变亮”,并将不透明度降低到 40%,并将它们定位到游戏机的右侧。步骤31添加高光后,您可以选择椭圆工具 (L), 并用它来创建两个16 x 16px的按钮(#A86578),我们会将他放置在距离游戏机的右侧36px与距离底部62px的位置。（其中一个按钮）步骤32通过创建一个白色的半圆来作为高光，然后混合模式为:变亮，不透明度为: 20%，并使用形状的副本来作为小阴影,我们将使用#DDCCCC进行着色,然后使用 Ctrl-G 键盘快捷键将所有按钮元素组合在一起。步骤33把我们刚才的按钮复制一份放到下图差不多的位置即可步骤34选择钢笔工具 (P),并使用8px带圆角的描边(#7E7E89),绘制一条将用作选择按钮的斜线。步骤35给按钮绘制一个的高光，使用白色大小为2px的线，记得线要用圆角的哦，底层阴影(颜色:#DDCCCC，大小为8px。将它们打组(ctrl-G),并在大约相距4px的位置处创建副本。步骤36在游戏机的右下角添加小扬声器格栅,绘制六条 4px 粗细的描边线(#AD9C9C),带有圆角的哦。步骤37做好了之后我们可以吧之前做的那个开关放置到底部这里来，如图的位置！这样我们的游戏机就差不多做完了。然后我们需要绘制一个圆角矩形！放置到方向键的上面。如图所示！3. 将添加一些细节到游戏机的侧面此时,我们几乎完成了在游戏机正面的工作,这意味着我们现在可以专注于它的侧部。步骤1选择正面部分的主高光的副本,并将其粘贴到侧面,确保将其与左侧对齐,其不透明度设置为60%,然后打组 (Ctrl-G) 并将它们同时放到到背面(右键单击>排列>发送到底部。步骤2创建游戏机正面部分的副本(Ctrl-C + Ctrl-F),然后对其应用 4px 的偏移,我们将在副本的帮助下来创建新的图形。然后,将生成的形状的颜色更改为#BAA0A0,并将其放到其左侧,使其与游戏机侧面可见区域的中心对齐。步骤3现在我们需要把多余的部分用剪切蒙版去掉！对于剪切蒙版的用法不清楚的小伙伴可以看看我以前的教程哦！步骤4使用矩形工具 (M) 创建一个 10 x 4px 的形状,我们将使用#BAA0A0进行着色。步骤 5接下来,在我们刚刚创建的水平分隔线上方添加一个10 x 2px的矩形作为阴影(#A58888),并在下面绘制10 x 2 px的白色矩形作为高光，混合模式:变亮，不透明度: 60%。步骤6选择矩形工具 (M) 并创建10 个8 x 2 px形状,我们将使用#A58888进行着色,并彼此垂直分布6px,确保将它们到游戏机的底部有48px。步骤7使用我们刚刚创建的矩形组,并将它们下移2px,将其颜色更改为#BAA0A0，这些图像更有厚度感！步骤8通过在我们刚刚创建的线条下面添加第三个副本来完成侧格栅的高光,我们需要通过将宽度从8px 更改为4px 来调整这些矩形。然后,将其颜色更改为白色(#FFFFFF),并将混合模式设置为”变亮”,同时将其不透明度降至 60%。步骤9如果你已经到达了最后一步,这意味着你已经成功地完成了我们的小游戏机。现在我们要创建一个阴影,只需选择椭圆工具 (L) 并绘制一个 148 x 16 px 的椭圆,我们将使用较深的红色(#DD5252)着色,然后放在游戏机下方,距离它 12 px的位置就好了。原文地址：ENVATO TUTS+译文地址：UI中国作者：Andrei Stefan译者：米夏小雨
明度 色彩 色相 可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。之前向大家介绍过 HSB 色彩模式。HSB 色彩模式按色相、饱和度、明度三个属性来表述颜色并进行量化，以更贴近人类感官直觉的方式来描述色彩。熟悉 HSB 色彩模式，就可以通过个人对色彩的感知与把握选取一个颜色，再通过 HSB 模式的调色板实现快速选色和配色。HSB 色彩模式让我们可以更准确地选取自己想要的颜色，也提供了相应的配色技巧。但是如果我们还不知道自己想要什么样的颜色，或者不确定什么样的颜色最贴合主题呢？今天就为大家介绍一种专业实用的色彩体系——PCCS（日本色彩研究所配色体系），让大家以更便捷直观的方式来理解颜色的分类及连续变化，快速准确找到合适的色彩。学会HSB色彩模式，让配色有理有据！念起作为一名 UI 设计师，不免每天都会和色彩打交道，但有时总会苦恼于色感把握不准，让我们配的色彩，总是“不对味儿”。阅读文章 > 什么是 PCCS（日本色彩研究所配色体系）？PCCS，全称 Practical Color-ordinate System，是日本色彩研究所于 1964 年发布的颜色体系，是目前全世界最常用的色彩体系之一，在平面、服装、建筑、室内等各个设计领域都有广泛运用。“Practical Color Coordinate System”直译过来就是“实用色标体系”，从”实用”2 个字就可以看出 PCCS 侧重于实践运用——色彩要如何理解才更方便，如何搭配才更和谐更好用。PCCS 将色彩空间分成了 24 个色相、17 个明度色阶和 9 个纯度等级来进行体系构建。其最大的特点是将色彩的三个属性，综合成色相与色调两种概念来说明全部的色彩变化。下面逐一为大家介绍 PCCS 中不同概念的含义。1. 24 色相环PCCS 色相环有 24 个色相，是以心理学四基色为基底延展形成一个色相圈。每种色相前标示一个数字。由于色彩间隔注重等感觉差，因此 PCCS 色相环又被称为等差色相环。四种心理原色为“红（2：R）”、“黄（8：Y）”、“绿（12：G）”、“蓝（18：B）”，在圆周上顺时针排列。每种心理补色放在 4 色的对面位置，构成 8 个色相，再对 4 色进行插值，使它们间隔相，构成 12 色，再进一步细分，形成 24 色。2. 17 级明度阶梯PCCS 中明度设置白色为 9.5，黑色为 1.5，它们之间每 0.5 分为一级，共 17 级。3. 10 级纯度阶梯PCCS 中每个色相的代表色（鲜艳的色调）都设置为相同的饱和度（9s），同一色相从饱和色到无彩色的纯度变化被均匀划分，使其以相等的间隔被感知。无彩色为 0s，纯色为 10s，将色彩空间一共分为 10 级。但是 10s 的饱和度是用色卡无法再现的颜色，所以色卡中的纯色是 9s。以上就是 PCCS 系统中的色彩三属性。需要注意的一点是，各色相的纯色都有作为色彩本身各自的明度关系。比如，黄色的色相明度最高，其次是两侧的黄绿色与橙色，依次顺沿，离黄色越远明度越低，直到紫蓝色时明度最暗。这是色彩的自然连锁。在实际观察中，色彩给我们的直观感受与纯粹的颜色是不同的。比如暗的黄色与明亮的紫色在明度上没有差异，这种明度与纯度之间复杂的变化关系往往令我们难以把握色彩的变化。PCCS 则提出了“色调（Tone）”来表示明度与纯度的复合概念。用“色相”和“色调”这两个属性形成二维体系，来表示色彩的性格，便于色彩的各种搭配。4. 12 类色调(Tone)PCCS 将色彩空间分成了 24 个色相、17 个明度阶梯和 9 个纯度阶梯。然后再将整个色彩群的外观色划分为 12 个基本色调倾向。每个色调都有对应的形容词及缩写代称，如纯度最高的色调命名为 Vivid，意思是鲜艳夺目的，缩写为 V。如何用 PCCS 解决“配色没感觉”的问题？通过上面的内容我们了解到 PCCS 有以下特点：1. 用色调代替了明度和纯度的复合概念，相比之前的三维体系，色相和色调形成的二维体系理解记忆更加方便。2. 色调可以用日常语言来形容，将其与色彩性格结合起来，可针对不同主题的设计进行快速搭配，让颜色与适合场景向结合。有了以上的认知，我们之后在积累色彩搭配经验时，就能将优秀配色更清楚的纳入自己可以理解的色彩体系之内。而在遇到某一设计主题时，也可以根据主题延展出的情感氛围，找到对应的色调。这样慢慢积累，找到合适的配色就不再是难题了。以一组 Banner 配色学习为例：通过分析我们可以得出不同主题风格所对应的色调，将其总结归纳，之后遇到相同风格的主题时，就可以更好的把握选色及色彩搭配。以上就是 PCCS 色彩体系帮助我们实现快速准确选色的全部内容，喜欢的小伙伴记得点赞收藏哦~之后练习创作中多多思考运用，配色能力肯定会大幅提升！更多色彩搭配技巧：https://www.uisdc.com/zt/color-matching本篇来源：优设网原文地址：https://www.uisdc.com/practical-color-ordinate-system
表达式 明度 属性 表达式是使用 Extendscript 或 Javascript 语言来控制 AE 图层属性（位置、缩放、旋转、不透明度）的一种编程语言，庆幸的是不用真的精通编程，大部分的表达式用的时候只需修改几个简单的参数，就可实现复杂的效果。每一种表达式都是节省时间，简化工作的好帮手。表达式用法很简单，按下 alt/option 键，鼠标点击图层属性前面的“小码表”，然后把代码添加到时间轴里的文本区就可以了。废话少说，来介绍 10 个常用的 Ae 表达式及其用法，建议收藏。time常用在旋转属性上，代码：time*valuevalue 是数值，用在元素的不透明度上，就是由透明到不透明的变化。例如：time*15，意思就是每秒以 15%的透明度一直到 100%不透明。用在旋转属性上，就是每秒以 15的角度进行顺时针旋转，如果是-15，就是逆时针旋转。其实 time 属性也是可以用在位置属性上的，只不过要先把“位置”属性先拆分成 X、Y 两个单独的坐标才可以。接着我们来看下和 time 相关的函数表达式正弦函数 sin代码：Math.sin(time*value1)* value2与 time 不同的是，它多了一个旋转的频率。value1=频率值；value2=幅度值例如把这行代码 Math.sin(time*2)* 30 加在旋转属性上，就是以 30的角度来回旋转 2 次,可以代替手动 K 帧的繁琐。那怎样让旋转的物体停下来呢？需要在这行正弦函数后面加上一行指数函数：Math.sin(time* value1)* value2/Math.exp(time* value)函数 exp 里面的 time 值越大，就越快停下来。wiggle 抖动最常用的“喂狗”表达式，一般用在“位置”属性上，简单写法为：wiggle(value1, value2)。value1 为每秒抖动的次数，value2 为每次随机波动的幅度。例如：wiggle（5,20），意思每秒抖动 5 下，每次波动的幅度为 20。更完整的写法是：wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)freq=频率（设置每秒抖动的频率）；amp=振幅（每次抖动的幅度）；octaves=振幅幅度（在每次振幅的基础上还会进行一定的震幅幅度，很少用）；amp_mult=频率倍频（默认数值即可，数值越接近 0，细节越少；越接近 1，细节越多）；t=持续时间（抖动时间为合成时间，一般无需修改）；一般只写前两个数值即可。index可以理解为规律复制表达式，代码：index*value例如把 index*15 添加在图层的“旋转”属性上，则第一个图层会旋转 15 度，之后按 Ctrl+D 去复制图层时，第 2 个图层将旋转 30 度，第三个图层 45 度，以此类推……若想第一层图形不产生旋转保持正常形态，复制后的图形以 15 度递增，表达式这样写：(index-1)*15，“-1”就是减去第一个图层后其他所有图层以 15旋转复制。time 计时常用于随便变化的数字或倒计时：time.toFixed(2)括弧里的数字 2 代表小数点后两位，所以 0 就是整数变化。数字倒计时：Math.floor(value-time)，value 代表从几开始，如：“20-time”，就是从 20 开始倒计时。random 随机数值变化表达式，所以经常用在数字上，当然也可以用在“不透明度”和“缩放”属性上。代码：random(min,max)。min 是最小值，max 最大值例如：random(1,100)，数字就会在 1-100 间随机变化，它会带 X.xxxxxxxxxx 这样的小数位，如果不想要小数点后面的尾巴，可以这样写:X=random（1,100）Math.round(X)“X”是你自定义的名字，意思就是给这个“X”规定，让它只能在 1-100 之间整数变化。这个效果可用在抽奖游戏里的随机数字。运动脱尾物体运动时，有类似残影的效果，代码如下：delay = 5; //number of frames to delay（延迟的距离）d = delay*thisComp.frameDuration*(index - 1);thisComp.layer(1).position.valueAtTime(time - d)把上述代码添加到运动图层的位置属性里，然后多复制几个图层。如想要实现不透明度拖尾，就需要为元素的不透明度属性添加表达式：opacityFactor = .75;//不透明度值Math.pow(opacityFactor,index - 1)*100万能弹性表达式弹性表达式有两个，Overshoot 和 Bounce。可以轻而易举地实现各种弹性动画，如抖动、弹跳动画等。Keyframe Overshootamp = .1;freq = 2.0;decay = 2.0;n = 0;if (numKeys > 0){n = nearestKey(time).index;if (key(n).time > time){n--;}}if (n == 0){ t = 0;}else{t = time - key(n).time;}if (n > 0){v = velocityAtTime(key(n).time - thisComp.frameDuration/10);value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);}else{value}*amp 表示振幅,freq 表示频率,decay 表示衰减（根据不同需求做不同的调整）Keyframe Bounce Backe = .7;g = 5000;nMax = 9;n = 0;if (numKeys > 0){n = nearestKey(time).index;if (key(n).time > time) n--;}if (n > 0){t = time - key(n).time;v = -velocityAtTime(key(n).time - .001)*e;vl = length(v);if (value instanceof Array){vu = (vl > 0) ? normalize(v) : [0,0,0];}else{vu = (v < 0) ? -1 : 1;}tCur = 0;segDur = 2*vl/g;tNext = segDur;nb = 1; // number of bounceswhile (tNext < t && nb
图层 步骤 明度 1. 如何创建渐变背景和文本图层步骤1创建一个新的1000 x 800px文档, 然后单击 "图层" 面板底部的 "创建新填充或调整图层" 图标以添加渐变图层。使用 "颜色" #e8d2d6 在左侧创建渐变填充, 将 #ddbcc0 向右, 然后将 "角度" 更改为107。步骤2锁定大写，使用Sniglet字体创建文本, 并将 "大小" 设置为250pt。您可以一次创建整个单词,如果您想要更多变换的结果, 可以在单独的图层上创建字母。然后进行变换处理。如果要单独创建字母, 请确保将每个字母的图层放在具有字母名称的组中。（就是的打个组，不要搞的乱七八糟）2. 如何创建和保存画笔预设步骤1选择 "画笔" 工具, 然后打开 "画笔" 面板。选择一个硬的圆形提示, 并使用这些设置:画笔笔尖形状：形状动态（控制：钢笔压力）步骤2单击面板右下角的 "创建新画笔" 图标, 将 "名称" 更改为 "Cookie 描边", 然后单击 "确定"。3. 如何创建和描边工作路径步骤1右键单击文本图层, 然后选择 "创建工作路径"。步骤2在文本图层的顶部创建一个新图层, 将其命名为 "描边", 确保画笔工具仍处于活动状态, 然后点击回车键就可以应用描边路径了。（一点是要选你改成制作的那个画笔）选择直接选择工具 (A), 然后再次点击回车键以退出工作路径。步骤3将文本和描边图层放在一个组中, 并将其命名为 "文本" 和 "描边"。4. 如何设置图层组的样式步骤1双击 "文本和描边" 组以添加斜面和浮雕添效果并应用以下设置:大小: 7勾选 "消除锯齿"高光模式:颜色: #b08965阴影模式:颜色: #d3a35e不透明度: 35%（没有写的都是默认值，如果做出来效果不对请查看是否是在默认值情况下设置）步骤2添加具有以下设置的等高线:等高线: 半圆选中 "消除锯齿" 。步骤3使用以下设置添加投影:颜色: #762b3d不透明度: 38%距离: 3大小: 5步骤4使用以下设置添加另一个投影效果:颜色: #7d3848不透明度: 50%距离:15大小:25这就是主cookie的形状样式了。5. 如何添加纹理图像步骤1打开饼干图像, 然后选择椭圆选框工具以选择图像中的一个饼干面。您也可以随意的选择！开心就好！转到 "编辑" > "复制" 以复制所选部分。（你也可以ctrl+j快速复制一份出来然后在复制过去！）步骤2返回到原始文档, 然后转到 "编辑" > "粘贴" 以粘贴复制的饼干纹理。将粘贴的图层放在 "文本和描边" 组顶部的字母组中。然后, 右键单击饼干纹理图层, 然后选择 "创建剪贴蒙版"。按命令 t 进入自由变换模式, 并调整纹理的大小和旋转纹理, 直到您喜欢的外观出现为止，然后回车确认。6. 如何设置选区大小步骤1单击文本图层的缩略图以创建选区。转到 "选择" > 修改 > 收缩, 并然后把值更改为5。这样选区就会变小了！步骤3在字母组的顶部创建一个新图层, 并将其命名为 "Glaze 01"。用白色填充所选内容, 然后按命令D取消选择。步骤4复制Glaze 01图层并命名位Glaze 02, 并将Glaze 02的 "填充" 值更改为0。步骤5将两个Glaze层放在一个组中, 并将其命名为Glaze（釉料的意思哈不想翻译）。7. 如何创建平滑的釉料样式步骤1双击 "Glaze01" 图层以应用斜面和浮雕大小: 9软化: 9勾选"消除锯齿" 框高光模式: 柔光颜色: #b08965阴影模式:颜色: #b69c5e不透明度: 35%步骤2添加具有以下设置的等高线:等高线: 半圆选中 "消除锯齿" 。步骤3添加具有以下设置的纹理:图案: 云（找图案时候用大图预览找）深度: 25%步骤4添加具有以下设置的内部阴影:颜色: #d3d1c8不透明度: 35%距离: 3大小: 7步骤5添加具有以下设置的"颜色叠加":颜色: #f1efde步骤6添加具有以下设置的投影:混合模式: 线性加深颜色: #2c1c0b不透明度: 15%距离: 3大小: 3这将创建一个风格柔软的釉料。8. 如何创建釉面的纹理样式步骤1双击 "Glaze 02" 图层以应用斜面和浮雕图层样式:大小: 7软化: 7取消勾选 "使用全局光源"角度:85高度:26勾选 "消除锯齿"高光模式: 亮光颜色: #ffffff阴影模式: 线性加深颜色: #b1997c不透明度: 28%步骤2添加具有以下设置的等高线:等高线: 半圆选中 "消除锯齿" 。步骤3添加具有以下设置的纹理:图案: 光泽（没有就在菜单里面追加添加就会找到了）深度: 26%这将创建一个更有纹理细节的釉料。9. 如何创建更多字母重复相同的步骤, 以创建所需的任何其他字母。使用 "自由变换模式" 旋转或随意放置字母。您不需要为每个图层重新应用所有图层样式。你只需复制拷贝图层样式就好了，最后记得整理到一个组里！10. 如何创建随机点缀笔刷选择 "画笔" 工具, 然后打开 "画笔" 面板。选择一个硬的圆形画笔, 并使用以下设置:画笔笔尖形状形状动态散布11. 如何创建随机的点缀样式步骤1在 "文本" 组的顶部创建一个新图层, 并将其放置在名为 "点缀" 的组中。双击新图层以应用以下图层样式:步骤2使用以下设置添加斜面和浮雕:大小: 6取消选中 "使用全局光源"角度:98高度:53勾选 "消除锯齿"高光模式:亮光不透明度: 5%阴影模式: 颜色加深步骤3添加具有以下设置的等高线:等高线: 画圆步骤选中 "消除锯齿" 。范围: 60%步骤4使用以下设置添加 "颜色叠加":颜色: #f88dc7在这里, 您可以选择您喜欢的任何颜色。步骤5使用以下设置添加投影:颜色: #2a2826不透明度: 20%距离: 2大小: 312. 如何添加点缀步骤1将已设置样式的图层重命名为您为颜色覆盖效果选择的颜色，并复制其图层样式。单击鼠标轻轻拖动以添加点缀。可以根据需要更改画笔笔尖的间距和散射值，以创建您喜欢的效果。步骤2创建新图层, 使用所需的颜色命名每个图层, 并将图层样式粘贴到其中。要更改点缀的颜色, 只需双击点缀层, 并为 "颜色叠加" 效果选择新的 "颜色" 值即可。步骤3您可以添加任意数量的点缀图层和颜色。13. 如何进行全局调整步骤1一旦你完成添加点缀, 把文本和点缀组放到另一个新的组中, 并命名为 Cookie。步骤2添加 "色阶调整图层" 并将其剪贴到 "Cookie" 组中。然后, 将 "高光显示" 值更改为 6, 将 "伽玛" 更改为 0.90, 将 "阴影" 更改为248。步骤3添加 "自然饱和度调整图层" 并将其剪贴到 "Cookie" 组中, 并将 "自然饱和度" 值更改为20。步骤4添加 "亮度/对比度" 调整图层, 并将其剪贴到 "Cookie" 组中, 并将 "对比度" 值更改为15。步骤5将水泥纹理图像放在渐变填充图层的顶部, 调整其大小以适合文档, 并将其图层重命名为 "纹理叠加"。将纹理叠加图层的混合模式更改为线性加深, 并将其不透明度更改为50%。祝贺！你成功的完成了好看饼干字体！
色相 明度 色彩 赶在年前将这篇关于“配色”的设计解析整理了出来，分享给大家，希望对大家有帮助。在平时的设计创作中，色彩搭配是很基础且重要的。那如何才能让自己成为了一个会搭配的设计师呢？除了日常的审美和创作积累，其实掌握好色彩基础和搭配原理才是让自己设计配色提升的第一步。下面就带大家由浅入深全面了解一下吧！本文主要围绕四个方面进行讲解：色彩的基础知识1. 色彩模式目前实际工作中比较常见的的几种色彩模式有如下几种：CMYK、RGB、HSB、HSL。CMYK：印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。主要应用于平面印刷。RGB：RGB 色彩模式（也翻译为“红绿蓝”）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。HSB 又称 HSV，表示一种颜色模式：在 HSB 模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度 HSB 模式对应的媒介是人眼。HSB 模式中 S 和 B 呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽。HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。是运用最广的颜色系统之一。2. 色值实际软件设计应用中通用的两种色值表述法：HEX 表示法（#xxxxxx）和 RGB（X，X，X）表示法：根据不同的色彩模式，HSB、HSL 也使用和 RGB 同样的表示方法，如下图选择了一个颜色，用不同色值和模式的下表达色值书写样式。HEX 表示法(#XXXXXX)又称十六进制法，十六进制颜色代码保存 0 到 9 之间的数字值以及从 A 到 F 的字母值表示 10-15 数字，十六进制颜色代码是 6 位颜色代码，这串 6 位数的代码，实际上使用三组 2 位十六进制数表示了 RGB 的色值。RGB 表示红、绿、蓝三个通道的颜色，三个通道颜色的参数范围值为“0-255”。更深入的知识可网上查阅相关资料，文章不做详细赘述。HSB 模式和 HSL 模式是在 RGB 色彩模式的基础上衍生出来的。HSB 是 H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度），参数范围值分别是“0-360”、“0-100”、“0-100”。HSL 是（Hue：色相）、S（Saturation：饱和度）、Lightness（亮度），参数范围值分别是“0-360”、“0-100”、“0-100”。Hue（色相）的取值范围是色环上 0-360 的圆心角度。但 L（Lightness：亮度）与 B（Brightness：明度）分别被认为是「颜色中白色的量」和「颜色中光线的量」。如下图：这两种模式更适合软件开发应用，所以设计师一般使用的都是 HSB 模式设计视觉图，HSL 更适用于技术开发人员。所以设计师需要在同步设计页面时知会技术人员。以免让颜色有误差。配色工具与标准1. 色相环色相环是辅助设计配色的一大利器，一般我们选择 24 色相环作为颜色标准。色相环的概念是基于 HSB 的色彩模式下就行分析讲解；如下图我们以 H（色相）为 350 度为起点，以 15 度递增创立 24 色相环，（保持 S 饱和度：80，B 明度 100 参数不变）根据色相环角度范围，可以将色相环的色彩分为：同色相下颜色梯度变化(H 为 0，改变 S 饱和度和 B 明度)，同类色，邻近色，类似色，中差色，对比色，互补色，映射属性分暖色、冷色、中性色「同色相色」：是指 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的颜色。「同类色」：指色相性质相同，但色度有深浅之分。（是色相环中 15夹角内的颜色）「类似色」：也就是相似色。在色环上 90内相邻接的色统称为类似色，例如红－红橙－橙、黄－黄绿－绿、青－青紫－紫等均为类似色。类似色由于色相对比不强。「邻近色」：色相环中相距 60 度，或者相隔三个位置以内的两色，为邻近色关系，属于对比效果的色组。色相彼此近似，冷暖性质一致，色调统一和谐、感情特性一致。如：红色与黄橙色、蓝色与黄绿色等。「中差色」：色相环中 90 度的配色，在视觉上是有很大的配色张力效果，是非常个性化的配色方式。在 24 色相上作任选一色；与此色相邻之色为邻色；「对比色」：是指色相环上相距 120 度到 180 度之间的两种颜色。「互补色」：色相环中成 180角的两种颜色。按照色彩的映射关系分为暖色、中性色、冷色，以上图色相环饱和度和明度参数为例，通过 5递增展示。2. 色立体除了色相上的变化，颜色还有明度和纯度上的变化，对于颜色的影响也至关重要。这三个词汇的概念如下：色相 Hue：也称色调，是指色彩的相貌；纯度 Saturation：也称饱和度，是指色彩的鲜艳程度；明度 Brightness：也称亮度，是指颜色的明暗程度；色相、纯度、明度三者构成了色立体的概念，让色相环由二维变成了三维的概念。3. 拾色器拾色器是设计软件经常会使用的调色工具，我们建立一个基于 S（饱和度）与 B（明度）的平面坐标系，如下图：将拾色器纵轴方向三等分可以将色彩分为高中低三大调，其中高调再细分为“白色调、粉色调、明色调、鲜色调”四色调；中调再细分为“灰色调、深色调”两色调；低调为“黑色调”。如下图：3. 色彩对比度我们参照网页无障碍设计规范，可以先了解关于设计色彩对比度的一些概念：如下：什么是对比度 ？对比度是两种颜色之间的亮度或颜色差异。对比度的比值越低，它们之间的差异越小。为了确保尽可能多的人可以使用您的产品，对比度需要符合 WCAG 的 AA 级 与 AAA 级 标准。WCAG 的 AA 级 要求小文本与背景的对比度至少为 4.5：1，大文本与背景的对比度至少为 3：1。WCAG 的 AAA 级 要求小文本与背景的对比度至少为 7：1，大文本与背景的对比度为 4.5：1。小文本指字号在 19px 以下的粗体文本类型，或者是字号在 24px 以下的常规文本类型。大文本指字号至少是 19px 以上，字重为粗体的文本类型，或者字号是 24px 以上的常规体文本。下方截图是字节设计体系中的关于对比度设计的应用工具展示，你可以随机选择或者互调背景和文字色，进行对比度检测，实时查看结果。参考网址： https://arco.design/palette/wcag不合格案例：合格案例：配色的设计应用1. 色彩分类和选择设计应用中选取是非常重要的，那根据设计应用，色彩主要可以分为主色、辅助色、中性色等。主色主色一般应用产品的品牌色，通过颜色提升用户对品牌的认识，传递价值。关于主色的选取，我们可以先根据一组产品截图进行了解，通过获取图中产品的主色再结合颜色在拾色器上的分布理解。通过上述案例产品主色调在拾色器上的分布，会发现大多数产品主色都会在右上方色域进行选择。根据产品的需要传递的品牌特征，确认相关颜色色相之后，调整色彩的饱和度和明度，避免使用过低或过高的饱和度和明度，以保证用户在识别颜色会比较舒服、适宜，同时还能吸引他们的注意力。辅助色色相环中的颜色角度相差越大，颜色的对比越强，视觉差异也越大。所以用于搭配的辅助色应满足以下两个条件：有区分：尽量避免所选辅助色在视觉上与品牌色差距不大，导致用户对品牌色产品误解；不突兀：根据色彩原理来说，互补色是反差最大的颜色，但可能会有些突兀。所以我们选择互补色的邻近色，对比色作为辅助色。辅助色可以在色相环的规则标准下根据实际特定的功能场景来选择应用。如下图通过 HSB 模式，色值（350，80，100）为基色创立色相环，做辅助色的选取分析（24 色相环选基色-6 色相环选择辅助色-校正辅助色的步骤），仅作参考。如下左图支付宝的理财模块，顶部背景图使用品牌基色，金刚区图标选择同类色，保持视觉上的统一。右图汽车之家底部有两个 cta 按钮，但是使用基色蓝突出主要功能“获取底价”，旁边的按钮使用类似色进行弱化。再比如下图产品例子：左图马蜂窝的酒店订购页面，使用基色、对比色、同类色，基色和同类色用于主要功能按钮，对比色用于提示入住情况。右图 soul 底部按钮使用多种邻近色、对比色表达不同的功能。中性色中性色包含一系列灰黑色，用于页面中的内容文字、分割线、边框，相关背景，中性色的定义还需要考虑深色背景以及浅色背景的差异。如下图所示：页面设计中可以通过在中性色增加色相，正常添加蓝色色相，HSB 色彩模式中，在曲线的轨迹中选择对应的色值，得出不同层级的高级灰。腾讯-TDesign 设计体系中提及了带有品牌色倾向的中性色是如何计算的相关信息，它通过使用了 RGB 混色模型，经过多次的尝试最终确定了品牌色的混合比例为 20%，运用规则同普通中性色一致。大厂出品！腾讯开源企业级设计体系 TDesignTDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。阅读文章 > 2. 大厂色彩体系阿里体系关于色彩模块主要介绍了三大部分：a. 色彩模型，b. 系统级色彩体系（基础色板，中性色板、数据可视化色板，色板生成工具，代码中使用色板），c. 产品级色彩体系（品牌色应用，功能色，中性色）。网址： https://ant.design/docs/spec/colors-cn字节体系关于色彩模块主要介绍了两大部分：a. 色彩体系（基础色板，添加色板，色板导出），b. 色彩对比度，c. 色彩探索（待开发）。网址： https://arco.design/palette/list字节跳动全新发布！ArcoDesign 设计系统正式开源https://v.youku.com/v_show/id_XNTgxNjA2OTQwNA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5~AArcoDesign 是什么？阅读文章 > 腾讯体系关于色彩模块主要介绍了两大部分：a. TDesign 设计体系（主题色、功能色、中性色、带有品牌色倾向的中性色，扩展色），b. 应用指南（UI 设计指南，数据可视化指南）。网址： https://tdesign.tencent.com/design/color#header-12配色案例解析1. 渐变知识分析渐变色从属性上看，可以按照方向，长短，呈现不同的表现形式，在保证属性不变，改变渐变的长度，渐变越长，色彩过度越平缓，渐变越短，色彩过度越紧凑，如下图：渐变色从样式上看，可以按照线性，径向，角度、对称，如下图：按照色彩色相数量的不同，可以分为：中性色渐变，单色渐变，多色渐变，如下图：按照色彩的明度的和饱和度不同，可以分为高明度、低明度；高饱和度、低饱和度，如下图：2. 渐变配色案例这里案例介绍通过一张海报设计，使用不同的渐变和配色方式进行创作，设计视觉展示如下：渐变方式：同色渐变渐变方式：多色渐变+色相环六色分类3. 实战页面案例如下页面案例通过色相环选择不同的基色，通过色调六大分类再结合渐变类型进行配色的效果展示。渐变方式+弥散渐变（基色/同类色）渐变方式+弥散渐变（基色/类似色）渐变方式+弥散渐变（基色/邻近色）渐变方式+弥散渐变（基色/中差色）渐变方式+弥散渐变（基色/对比色）渐变方式+弥散渐变（基色/互补色）总结关于配色技巧的分享总结到此就结束了，感谢大家的阅览，希望能帮助大家对配色有更全面的认识！UI 设计视觉指南-配色篇就算完结了，咱们下篇文章见！想做好UI配色？只需要这三步！一套产品色彩需要有哪几种色彩：品牌色+提醒类型颜色（成功、错误、警告）+中性黑白灰颜色（各种字体、背景、分割线颜色等）那么用到的色彩类型： 品牌色 品牌黑 内容底色 全局底色 分割底色 图标色 文字链接可点击颜色 提示信息 错误提示 错误提升阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/3-color-matching-steps
飞翔的企鹅
在路上
落霞与孤鹜
表哥
