编辑导语：在做UI设计时，定义并统一颜色规范对产品设计和团队整体推进具有重要作用，本篇文章通过一个国外大厂真实的颜色组件升级案例为我们分享了统一颜色规范的好方法，一起来看 。

文章插图
Hi，我是彩云 。咱们平时在做UI组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来 。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题 。


文章插图
我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式 。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中 。
但如果我们在使用颜色上没有明确的指导原则，如颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱 。


文章插图
我们APP中的不一致例子
接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：
如何通过 Getaround 在设计和技术方面管理颜色概述这个系统的局限性，并说明我们如何改进它什么是语义颜色我们是如何实现它的，以及它带来的优势！


文章插图
和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具 。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等 。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件） 。颜色名称过去是基于它们的外观 。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色 。


文章插图
在我们的APP中，曾经会用相同的系统来管理颜色 。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多 。
在使用这个系统时，团队反复面临同样的问题：如何确保从一位设计师到另一位设计师以相同的方式使用颜色？如果没有适当的指导原则，我们如何确保开发很好的还原？如果明天我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一？让我们试着找出我们是如何陷入这种境地的？
所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向 。然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法 。


文章插图
例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助
以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……） 。到现在也没有真正的行动计划来迭代它们 。


文章插图
旧驱动器品牌
在 2021 年初，我们有机会为我们的 iOS 和 Android APP来制定长期的 UI 规划 。我们问自己“5年后我们的APP会是什么样的？” 。我们会回顾， Getaround 品牌是如何成为我们视觉方法中心的 。

• cazy 竖屏
• 淘宝商品列表编辑商品在哪里？步骤是什么？
• 淘宝怎么编辑上架宝贝？一键铺货的方法是什么？
• 家庭编辑信息怎么写 家庭生活资料编辑软件
• 言实出版社总编辑 家庭生活百科全书中国言实出版社
• 挑战网游官网 网通挑战官网
• 对岗位的认识怎么答 谈谈对岗位的认识
• 怎样查看CAD图纸？
• 科普知识小文章大全
• 穿越火线夜玫瑰人物 穿越火线夜玫瑰在哪