你好,欢迎进入江苏优软数字科技有限公司官网!

诚信、勤奋、创新、卓越

友好定价、专业客服支持、正版软件一站式服务提供

13262879759

工作日:9:00-22:00

超详细,设计系统颜色规范的建立过程

发布时间:2024-09-11

浏览次数:0

背景

本文根据目前两大设计体系: 设计规范和 iOS 人机交互指南中关于色彩的定义与规范,并参考了 Ant 的一些调色板生成原理,为大家带来「米妆APP」设计体系色彩规范的建立过程。

色彩理论

sketchfab安卓版_sketchandroid_sketch安卓图标模版

1. 起源

对于现代色彩的理解,我们要归功于一个人:牛顿。牛顿解释了动量和角动量守恒定律,提出了牛顿运动定律,给世界带来了秩序,还通过棱镜将白光散射成可见光谱。这些观察导致了色彩理论的发展。

牛顿注意到,当你将白光通过棱镜照射时,它会分裂成彩色渐变色。不仅如此,你还可以将颜色重新组合成白色,这在当时是一件非常新鲜的事情。在实验之前,混合颜色是一种普遍的禁忌,是对自然的冒犯。

sketch安卓图标模版_sketchfab安卓版_sketchandroid

牛顿的光学图表之一

牛顿的彩虹是完美的渐变色,他将其分类为七种颜色:红色、橙色、黄色、绿色、蓝色、青色和紫色。

sketchandroid_sketch安卓图标模版_sketchfab安卓版

△ Boute 的色环

2. 发展

与此同时,牛顿发明了色轮,揭示了自然界中隐藏的秩序,就像音乐中的音节一样,伟大的艺术家歌德完善了色彩理论。没错,就是《少年维特的烦恼》的作者。歌德。

众所周知,歌德是一位伟大的诗人、小说家、戏剧家和杰出的思想家。但很少有人知道,他也是一位科学研究者,他的研究涉及许多学科。他从事动物和植物形态学、解剖学的研究,歌德也是一位著名的画家。他系统地将颜色描述为“暖色”或“冷色”。这种暖色和冷色的概念是现代调色板的一部分。早期的人们可能认为蓝色是一种暖色,也许是因为它是火焰中最热的部分。

sketchandroid_sketch安卓图标模版_sketchfab安卓版

后来我们有了孟塞尔色球,包豪斯学者对色轮进行了阐述,形成了色相、色调、对比度等各种色彩属性,再后来是现代数码显示器的发明,让色彩创造了无数的可能性,而更加现代的技术色彩模型让我们能够更加细致地感知色彩。

色彩概念

1. HSL

HSL颜色模型是业界的一种颜色标准,通过改变色相(Hue)、饱和度()、亮度()三个颜色通道并相互叠加,得到各种颜色。该标准几乎囊括了人类视觉所能感知的所有颜色,是迄今为止应用最为广泛的颜色系统之一。

2. 单纯疱疹病毒

HSV,又称HSB,是一种基于人眼的色彩模式,常用于设计软件中。

HSB模式中,H(hues)表示色相,按照0~360°标准色轮上的角度值来标记,例如红色为0°,橙色为30°等;S()表示饱和度,是指颜色的强度或纯度。饱和度表示色相中色彩成分所占的比例,以百分比来衡量,范围是从0%(灰色)到100%(完全饱和);B()表示亮度,通常从0(黑色)到100%(白色),以百分比来衡量,在色相立面上从上到下依次递减,上面一行是100%,下面一行是0%。

HSV 模型通常用于计算机图形应用中,其中色调用圆圈表示;饱和度和亮度可以用单独的三角形表示,其中纵轴表示饱和度,横轴表示亮度。要选择颜色,首先在圆圈中选择色调,然后从三角形中选择所需的饱和度和亮度。

sketchfab安卓版_sketchandroid_sketch安卓图标模版

△ HSL 和 HSV 都是圆柱形几何形状

如果我们绘制色调和亮度而不是饱和度,我们会分别得到双圆锥和圆锥,而不是圆柱。

sketchfab安卓版_sketchandroid_sketch安卓图标模版

HSL 和 HSV 都是在圆柱体中表示 RGB 颜色模型中的点的一种方式,以便更贴近人类视觉感知颜色属性的方式。在这些模型中,每种色调的颜色都以径向排列。切片围绕中性色的中心轴,从底部的黑色到顶部的白色。这两种表示都试图比 RGB 所基于的几何结构更直观。

sketch安卓图标模版_sketchfab安卓版_sketchandroid

sketchfab安卓版_sketchandroid_sketch安卓图标模版

△RGB基本原理模型

如今,几乎每个计算器、颜色选择器和 Web 应用程序都使用 HSL 或 HSV,至少作为一种选择。而且大多数 Web 前端框架都预先打包了开源颜色选择器。CSS 3 规范允许 Web 作者直接使用 HSL 坐标为其网页指定颜色。

sketchfab安卓版_sketch安卓图标模版_sketchandroid

sketch安卓图标模版_sketchfab安卓版_sketchandroid

使用 HSV(HSB)的应用程序:

使用 HSL 的应用程序:

设计系统颜色

sketch安卓图标模版_sketchfab安卓版_sketchandroid

1.

一致且有意义:色彩有助于表达层次、树立品牌形象、赋予意义、指示元素状态。参考每个组件的配色应用。整个UI色彩的精髓可以在工具中体现得淋漓尽致。

颜色使用

的规范中对色彩的使用主要定义了两部分,一部分是主色,一部分是次色。配色方案的灵感来自于大胆色调与柔和环境、深阴影和明亮高光的共存。我们可以在很多页面中看到这一点。在文本中可以清楚地感知到这种颜色的使用。

主色:强调色。应用的屏幕和显示组件中最常出现的颜色。若要创建元素之间的对比,可以使用主色的较浅或较深色调。较浅和较深色调之间的对比有助于区分不同的表面,例如区分状态栏和工具栏。

sketchfab安卓版_sketch安卓图标模版_sketchandroid

辅助色:用于强调 UI 的关键部分。辅助色可以与主色互补或与主色相似,但不应简单地使主色变暗或变亮。辅助色应与周围的元素形成对比并起到强调作用,应谨慎使用。

sketch安卓图标模版_sketchandroid_sketchfab安卓版

主要和次要调色板示例

使用原则:

sketchfab安卓版_sketch安卓图标模版_sketchandroid

sketchandroid_sketchfab安卓版_sketch安卓图标模版

sketch安卓图标模版_sketchandroid_sketchfab安卓版

sketch安卓图标模版_sketchandroid_sketchfab安卓版

△ 部分案例

调色板生成器

这些调色板最初于 2014 年创建,由可以和谐搭配的颜色组成,可用于开发您的品牌调色板。

sketchfab安卓版_sketch安卓图标模版_sketchandroid

色彩校正工具

选择配色方案:您可以自定义应用的调色板以匹配您的品牌颜色。或者,您可以使用您创建的调色板创建全新的配色方案。

使用颜色工具创建调色板并将其用于您的应用中。确保您的应用颜色符合无障碍标准,并且元素之间有足够的对比度。

主题 UI 编辑器

sketchandroid_sketchfab安卓版_sketch安卓图标模版

在2018年5月的I/O大会上,设计团队推出了一款名为Theme的工具,可以帮助设计师轻松、快速地创建符合自己品牌和风格的应用程序。

使用教程:“谷歌这款新主题工具可以让您快速有效地进行设计!”

创建颜色:

安装插件后,在--打开主题--组件库中打开:

2. iOS

颜色定义

iOS的人机标准颜色定义如下,为了方便对比,我将RGB格式的色块转为了HSB,可以明显观察到其特点:

sketchandroid_sketch安卓图标模版_sketchfab安卓版

使用原则

使用颜色进行明智而有效的沟通。颜色在传达重要信息方面起着非常重要的作用,例如用户警报的红色。

在应用中使用互补色。应用中使用的颜色需要和谐一致,不能相互冲突或干扰。选择正确的颜色。

选择一种颜色来指示功能的交互性并区分可点击和不可点击状态。

在注释中,交互元素为黄色。在 中,交互元素为红色。如果您定义了一种关键颜色来传达交互性,则需要确保其他颜色不会与之冲突。例如,在应用中我们通常使用蓝色来表示跳转。

sketchfab安卓版_sketch安卓图标模版_sketchandroid

考虑可访问性设计:关注色弱或色盲用户的色彩体验,同时也要注意颜色之间的对比度。

sketchandroid_sketchfab安卓版_sketch安卓图标模版

在各种光照条件下测试应用的颜色:应用中显示的颜色会受到不同环境中光线的影响,因此请考虑应用的各种使用场景,选择舒适的、不会导致颜色失真的场景。阅读要使用的干扰因素的颜色。

使用足够的颜色对比度:在应用中,对比度过低会使内容难以阅读。例如,图标和文本可能会与背景融合在一起。网上有颜色对比度计算器,可以帮助您准确分析应用中的颜色对比度。以确保它符合最佳标准。确保您的应用的对比度至少为 4:5:1,但 7:1 更好,因为它符合严格的功能标准。

3.蚂蚁

1.0 蚂蚁调色板

有意义的颜色:对颜色部分进行了简要的解释。

界面设计中色彩的运用应该兼具品牌识别性和界面设计功能性,色彩是一个很感性的东西,设计中色彩的运用首先要考虑品牌层面的表达,还有很重要的一点就是色彩的运用要达到信息传递、动作引导、交互反馈,或者强化、突出某个元素的目的,任何色彩的选择和运用都应该有意义。

Ant:提供了调色板,并介绍了每种颜色的含义,调色板由9种基本颜色组成,每种基本颜色又衍生出九宫格调色板,在此基础上还可以用黑白叠加制作出九宫格调色板,实现明暗色彩的效果。

色彩与交互:提供交互中色彩使用的指导,色彩选择采用色调和黑色系统,通过不同层次的色彩来表达不同的状态。

sketch安卓图标模版_sketchandroid_sketchfab安卓版

sketchfab安卓版_sketchandroid_sketch安卓图标模版

△ Tint/Shade 颜色系统算法

选择一个原色作为颜色5,将原色与纯白色(#fff)混合,将原色与纯白色分成100份,分别划分20/40/60/80的位置,得到4/3/2/颜色1号。

将原色与纯黑色(#000)混合,将原色与纯黑色分成100份,分别划分20/40/60/80的位置,得到颜色6/7/8/9。

通过上述方法就得到了一个完整的渐变调色板。

sketch安卓图标模版_sketchandroid_sketchfab安卓版

颜色转换工具:

sketchandroid_sketchfab安卓版_sketch安卓图标模版

2.0 蚂蚁调色板

使用原则:实用

不仅要考虑品牌的识别性,还要达到信息传递、操作引导、交互反馈,或是强化、突出某一元素的目的。基于操作系统更注重效率和清晰度的特点,Ant对色彩的运用更加实用、便捷。选择颜色时要注意三点:

含义明确:色彩要符合产品定位,符合用户心理认知;定义了品牌色、中性色、功能色。

sketchfab安卓版_sketchandroid_sketch安卓图标模版

sketchfab安卓版_sketchandroid_sketch安卓图标模版

sketchandroid_sketch安卓图标模版_sketchfab安卓版

层次结构:为重要的行动点或关键信息定义主要颜色并建立视觉连续性。

足够的对比度:符合 WCAG 2.0 标准,确保有足够的对比度,让有视力障碍(色盲)的用户更容易识别颜色。在从浅到深的调色板中,6 种颜色单元通常满足 WCAG 2.0 最低 4.5:1 的对比度(AA 级),我们将其定义为调色板的默认品牌颜色。

色彩对比度值校准工具(#%-on-%23fff)

算法升级

sketchandroid_sketch安卓图标模版_sketchfab安卓版

1.0 算法有个弊端,自然界中不存在纯白色或者纯黑色的物体,因此色彩过渡不自然。基于此,并按照 的规范,选取一种原色。在保持 1.0 算法的基础上,再加入贝塞尔曲线。结合变白、变黑、变暗,贝塞尔曲线,以及冷暖色不同的旋转角度,我们得到了 2.0 的调色板生成算法。用户指定主色(与 标准操作一致),即可导出完整的渐变调色板。

3.0 蚂蚁调色板

基于2.0版本的算法过于复杂,迭代算法难以更新,所以3.0的调色板从轻盈、清晰、简洁的角度重新调整,相比第二版增加了几种主色调,调色板饱和度更高,不再使用贝塞尔曲线,也更加容易与开发团队沟通。

采用HSV模型:此版本没有继续采用以一定的明/暗值混合的形式来得到渐变调色板,而是直接利用HSV模型的值进行减少/增加来得到完整的渐变调色板。

色彩系统:系统级的色彩系统同样源自“自然”的设计价值,设计师抽象捕捉自然场景,结合蚂蚁的技术基因,形成12种独特的色彩,并进一步通过大量的观察,捕捉不同的色彩,基于自然光的变化规律,结合艺术中素描的思路,衍生出12种色彩,通过平衡可读性、美观性和可用性,实现了中性色调的定义。

产品级色彩系统:也扩展并定义在品牌色、功能色和中性色上。

sketchfab安卓版_sketch安卓图标模版_sketchandroid

基本调色板:共120种颜色,包括12种原色和派生色。

最后把Ant的三次调色盘迭代后的颜色整合到一起,对比还是很明显的,很直观的看到算法下色彩变化的美感。

sketch安卓图标模版_sketchfab安卓版_sketchandroid

sketch安卓图标模版_sketchandroid_sketchfab安卓版

sketch安卓图标模版_sketchandroid_sketchfab安卓版

sketchandroid_sketch安卓图标模版_sketchfab安卓版

sketch安卓图标模版_sketchandroid_sketchfab安卓版

4.工具

一套帮助设计师提高工作效率的工具集,提供主流官方调色板库,并让您轻松管理自己的调色板库。

介绍及下载地址:

sketchandroid_sketch安卓图标模版_sketchfab安卓版

sketch安卓图标模版_sketchfab安卓版_sketchandroid

甲基安非他命

根据米庄多年来的品牌定位以及米庄目前业务拓展的需求,我们对米庄产品所运用的色彩进行了重新定义,以米庄产品的关键词:金融科技、安全可靠、专业智能为基础,结合色彩工程学,赋予其和谐的审美色彩。

1. 原色

色彩是有内涵的,色彩的表达需要符合用户的心理认知,包含两个层次,第一是品牌识别,传递米妆的品牌价值,是最直观展现公司文化和APP特色的方式。品牌色是体现产品特征和传播理念最直观的视觉元素之一。前期我们将关键词拆分,分析每个关键词的性格心理并搭配合适的色彩,制作出品牌色和对应的辅助配色方案。色彩规范采用HSB(HSV)——通过色相/饱和度/明度三要素来表达色彩。

目前的主色调也是我们米妆的品牌色。

恒生指数 = 20 100 100

sketchandroid_sketchfab安卓版_sketch安卓图标模版

2. 次要颜色

我们不仅需要品牌色来传达品牌价值sketch安卓图标模版,我们还需要辅助色来组成我们产品体系的配色,实现不同功能点的视觉呈现。辅助色还起到中和品牌色的作用,根据不同的业务需求,结合不同的场景,呈现最佳的视觉效果,降低用户对主色调的视觉疲劳。对于辅助色的选择,我们选取​​了相似色、互补色、中性色三种辅助色系。

相似颜色

相似色搭配原则:色轮上相差15度的颜色让人感觉很舒服,色彩过渡自然柔和,给用户一种安心、信赖的感觉。

且与品牌色的色相、暖性一致,和谐统一。

sketchfab安卓版_sketchandroid_sketch安卓图标模版

对比色和互补色

24色轮上相差120度到180度的两种颜色。品牌色是暖色,会产生热情、明亮、活泼、温暖的感觉,而补色是冷色,会中和过度的暖色,让人感觉更加平静、平和。所以我们还用对比色红色和补色黄色,组成冷色的补色。辅助色红色的色相为H=5,取对比色绿色,对应色相H为(H+120);而辅助色黄色的对比色蓝色,H为215(H+18)。得到下面两种冷辅助色:

sketch安卓图标模版_sketchandroid_sketchfab安卓版

校正二次色

校正原则1:色相差不能超过15

在选择相近颜色的时候,确保色相不超过15,以保持统一的视觉体验。

矫正原则2:尽量保持感官亮度一致

从上图可以看出,虽然饱和度和亮度相同,但是色相不一致,带来的视觉感官体验会有所不同,绿色亮度较亮sketch安卓图标模版,蓝色稍暗,所以我们需要调整亮度和饱和度,保持视觉的一致性和相似的舒适度。

sketch安卓图标模版_sketchandroid_sketchfab安卓版

中性色作为次要颜色

中性色是辅助色,也是色彩视觉的一种,没有感情色彩,可以中和其他任何颜色,自然界中没有纯黑、纯白,所以纯黑要降低纯度,使之成为中性色,在字体的使用上也经常使用,以不透明度的形式呈现。

sketchandroid_sketch安卓图标模版_sketchfab安卓版

3. 调色板

确定了主色与辅色之后,我们需要创建一个色彩调色板,以扩展颜色在不同场景中的使用,不仅符合品牌传播,还需要使用不同的色阶来展现界面设计的功能性、传达信息、引导动作、交互反馈,或是强化和凸显界面元素。同时通过色阶的变化对产品交互层次进行改变。

同一颜色的亮度和纯度值

它既能体现我们的品牌形象,又能保持页面的统一性。我们在颜色中添加白色或黑色来改变其亮度和饱和度,形成同色系的调色板。这个操作也叫色调系统。色调是加白色使图像变亮,阴影是加黑色使图像变暗。

色彩与系统

为此,我们在 中将基于色调和明暗度系统的算法进行了可视化,并在 中建立了该系统,使得每种颜色都能在统一的规则下形成衍生色,从而形成了一个由不同颜色组成的调色板。

根据上图我们可以发现:

用我们的品牌颜色值HSB(20,100,100)代入,就可以得到我们想要的(20,100,90),(20,40,100),(20,10,100)。

sketch安卓图标模版_sketchandroid_sketchfab安卓版

最后结合Ant.0中的计算工具校对,本调色板生成模板有效。

sketchandroid_sketchfab安卓版_sketch安卓图标模版

sketch安卓图标模版_sketchfab安卓版_sketchandroid

sketchandroid_sketch安卓图标模版_sketchfab安卓版

最后我们得到了一个完整的调色板:

sketch安卓图标模版_sketchandroid_sketchfab安卓版

4. 色彩应用

在色彩运用上,基于不同的场景,我们也从以下三个方面定义了米妆的基本色彩。

品牌颜色

品牌色彩是体现产品特征和传播理念最直观的视觉元素之一。

sketchfab安卓版_sketch安卓图标模版_sketchandroid

功能色彩

主要用于消息通知、反馈提醒、表单验证等场景中的成功、错误、失败、提醒、链接等状态。

中性色

重点内容的衬托与功能的引导主要体现在导航框架、背景颜色、描边,或是辅助操作等方面。

sketchandroid_sketch安卓图标模版_sketchfab安卓版

颜色样本

sketchfab安卓版_sketch安卓图标模版_sketchandroid

sketch安卓图标模版_sketchfab安卓版_sketchandroid

5.使用指南

颜色识别

符合 WCAG 2.0 标准并确保足够的对比度,以便视障(色盲)用户更容易识别颜色。

等级制度

层次结构是根据重要性级别对内容进行组织。颜色可以传达某些内容相对于其他内容的相对重要性。

(参考校对工具:#%-on-%23fff)

含义明确

颜色可用于表达屏幕上不同元素的含义。重要的是以符合用户的认知期望并减少歧义的方式使用它们。

在线评论

1. 命名

如何正确命名颜色?使用颜色属性和数字来表示,方便修改和替换。

2. 替换

让开发者把所有颜色发到线上,画出色块,然后根据当前调色板的颜色进行调整修改,整体app更加轻量,沟通也更加顺畅。

sketchfab安卓版_sketch安卓图标模版_sketchandroid

sketchfab安卓版_sketch安卓图标模版_sketchandroid

如何使用

sketch安卓图标模版_sketchfab安卓版_sketchandroid

sketch安卓图标模版_sketchfab安卓版_sketchandroid

作为现代社会的设计师,我们的工作往往是说服你的老板你选择的颜色是正确的。你可以准备一份40页的PPT来准确解释计算逻辑。在这个陌生的数字世界里,智能和技术让一切成为可能、可预测、可验证。

但同时,请对颜色保持警惕。不要被工具所欺骗。我们可以描述超过 1700 万种颜色,但这并不意味着什么。颜色的本质是什么?仍然有许多社区生活在没有颜色定义的环境中。颜色有意义,因为我们赋予了它意义。

下次,当你把视线从电脑或手机上移开时,花点时间注意一下周围的绿色植物、远处云彩的颜色、旅途中海洋的颜色、清晨的露珠和日落。然后问问自己,你觉得怎么样?你看到了什么?

sketchfab安卓版_sketchandroid_sketch安卓图标模版

如有侵权请联系删除!

13262879759

微信二维码