颜色不统一(颜色标准制定)

编辑导语：在UI设计中，定义和统一颜色规范对产品设计和团队的整体提升有着重要的作用。本文通过一个国外大厂色彩组件升级的真实案例，为我们分享一个统一色彩规格的好方法。我们一起来看看。
嗨，我是蔡赟。通常我们在做UI组件库的时候，会遇到一个问题。我们定义了很多颜色，但是在团队工作的时候，还是按照每个设计师自己的喜好来搭配颜色。很难很好的统一颜色规格。其中一个严重的问题就是颜色的命名和管理不够清晰。所以今天这篇文章就通过一个国外厂商真实的色彩成分升级案例来帮你解决这个问题。
我们花了几个月的时间来改进设计系统Cobalt中的色彩处理方法。颜色是UI的基本元素：它们构成视觉语言，帮助定义品牌，每天都被开发者和设计师用于产品设计。
但是，如果我们在色彩的使用上没有一个明确的指导原则，比如当团队中的设计师随心所欲地使用色彩时，产品看起来就会非常混乱。
我们应用中不一致的例子
接下来我会告诉大家我们是如何做好色彩规范的，以及我们在整个项目中面临的挑战。正如您将看到的，这个项目并不像看起来那么简单：
如何通过Getaround管理设计和技术中的颜色概述了该系统的局限性，并解释了我们如何改进它。什么是语义色彩？我们是如何实现的，以及它带来的好处！
一、之前我们是如何在Getaround中管理颜色的？1.在设计方面，和很多设计团队一样，我们使用Figma作为主要的设计工具。我们的颜色放在“基本”库中，在那里你可以找到我们在产品中使用的所有常用样式，比如字体样式、颜色、图标等。这个库提供了我们日常使用的专用系统库(iOS、Android、Web、email)。颜色曾经是基于它们的外观。例如，紫色是我们的主色调，而石墨是基本文本的常规颜色。
2.在技术方面，在我们的应用程序中，我们以前使用相同的系统来管理颜色。另外，还有一些语义色彩，但仅限于iOS，不用于开发。
二。我们在旧系统中面临的限制。在使用这个系统时，团队反复面对同一个问题：如何确保颜色从一个设计师到另一个设计师都以相同的方式使用？没有适当的指导方针，我们如何能够确保发展的良好恢复？如果明天要用全新的配色改造品牌，如何快速统一？让我们试着找出我们是如何陷入这种境地的。
1.颜色的使用没有明确的规范。所有设计师都使用相同的色样，但自从2019年Getaround品牌更名以来，除了引入不一致的地方，没有明确的规范说明如何使用，所以设计师在选择颜色时会迷失方向。然后他们会开始建立自己的参考资料，每个设计师都有不同的配色思路。
例如：在所有这些灰色阴影中，设计师应该为次要文本选择哪种灰色？颜色命名在这里没有太大的帮助。
2.老品牌的设计包袱。以前品牌的一些老颜色还在用(按钮上的蓝色阴影，标题…)。到目前为止，还没有真正的行动计划来迭代它们。
旧驱动品牌
三。我们对2021年初新系统的愿景，我们有机会为我们的iOS和Android应用程序制定一个长期的UI计划。我们问自己“5年后我们的应用会是什么样子？”。我们将回顾Getaround品牌如何成为我们视觉方法的中心。
以上是我们品牌和设计团队在2020年完成的整体工作的一小部分。致力于设计该系统的钴团队借此机会重新考虑颜色系统。然而，为了实现这一目标，我们面临一些挑战：
1.制定指导方针。如何才能保证每个设计师都能依赖一个易于理解和使用的色彩体系？拥有一个简单的系统会加快使用速度。
2.颜色可以通过可用性标准。如何才能保证从一开始就设计出好用的颜色？
3.易于维护，符合未来趋势。我们如何使系统易于维护，并符合当前和未来的行业标准(例如，黑暗模式)
四。我们的新色彩系统：语义色彩在我们的探索阶段，在Figma的共享环境中工作促使我们保留和记录我们的设计决策。比如我们的口音颜色应该怎么命名：(主要是？强调？)我们还测试了黑暗模式下app界面的外观，以及如何正确支持这一点。我们应该为每个组件创建单独的调色板还是深色版本？
我们开始与开发人员讨论这个问题，以了解他们有什么解决方案来处理这些问题。颜色的概念很快就被开发者提出来了，因为他们知道并很好地使用了颜色。但是对于设计师来说，如何准确理解呢？
1.什么是语义色彩？语义学指的是根据颜色的使用方式而不是色调来命名颜色的方法。
比如，你可以把颜色命名为“成功”或“积极”，因为它指的是意义，而不是“绿色”或“翠绿色”。你甚至可以根据颜色在屏幕上的应用来命名颜色，比如背景色、按钮背景色、文本颜色、图标颜色等等.
2.从基于外观的配色到基于语义的配色，语义色并不新鲜，越来越多的产品开始用这种方式定义颜色。我们可以从下面一些大厂的颜色规格来学习google。
https://material . io/design/color/the-color-system . html # color-theme-creation apple https://developer . apple . com/design/human-interface-guidelines/IOs/Visual-design/colorshopify 3359Polaris.shopify.com/design/colors # navigationasana3359Polaris.shopify.com/design/colors #导航显然，这个颜色系统有很多优点。现在，让我来解释一下我们如何在实践中将这一概念应用到我们的产品中。
3.深入研究颜色的语义我们的新颜色系统由两部分组成：
基本音调
我们与品牌团队紧密合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌进行思考。品牌的每种颜色都用多种色调进行调整，以创造更大的灵活性，并一次性成为基本的调色板。它代表产品中可以显示的所有可能的颜色。团队可能不会全部使用它们，但是他们会选择在产品中最有效的。
基本调色板
4.语义颜色语义颜色建立在用作参考的基本调色板上。正如我之前所解释的，命名不再指颜色的“外观”(洋红色、棕色、绿色…)，而是指它们所应用到的UI元素(文本、图标、按钮、背景…)以及该元素的状态(活动、非活动、成功…)。请在此处查看术语和一些示例：
语义结构和示例这意味着基本调色板中的颜色可以用于各种语义颜色：
这是我们根据新原则重新调整颜色命名的方式：
我们通过设计师和开发人员进行了内部用户测试，以确定命名语义颜色的最佳方式。我们尝试了许多不同的命名方法，发现过于详细的命名系统对于我们团队和产品的规模来说太复杂了，难以维护和使用。我们决定做一些简单的维护，同时在命名上有足够的扩展性。
5.语义色彩的好处1。语义色彩嵌入设计原则语义色彩注重色彩的运用。它消除了设计师和开发人员对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。
比如这里，颜色命名让设计师更容易做出正确的选择。在我们的原则中，*Accent* state用于交互元素。
2.解锁黑暗模式语义颜色可以适应不同的主题。语义名称总是相同的，但其外观可能会根据所选的模式而变化。例如，语义颜色“主背景”在亮模式下可以指“白色”，在暗模式下可以指“黑色500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏改变者，因为这将使它更加面向未来。
语义色原色。明暗模式下的背景
3.语义颜色高效灵活。如果我们将来要更新颜色，使用语义颜色会更容易。假设我们想把主色改成蓝色。我们只需要将基本调色板中的“紫色”更新为“蓝色”。所有和这个颜色相关的语义颜色也会神奇的更新。另一种情况可能是更新特定UI元素(如按钮)的颜色，而不触及其他使用紫色的元素。
在这种情况下，我们只需要更新ButtonBackground。原色，很简单。如果没有这个系统，更新颜色将需要大量的质量保证工作，以确保所做的更改适用于所有地方。
4.颜色组合指南这个系统看起来很容易使用，但是设计者仍然有一些问题：
什么时候可以使用普通文本颜色？什么时候可以使用次要文本颜色？什么时候可以使用交互式颜色？为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。我们在figma原型中创建了这个指导原则，每次我们改变设计系统的颜色时，规范都会更新。它突出显示了允许的语义颜色组合，以最大限度地提高一致性。
点击查看大图Figma内置语义颜色交互指南。
5.因此，采用这种新的颜色系统产生了一些变化：
1)我们从“基础”库中提取颜色，分为深色和浅色两种图案。这一举措使我们能够通过使用Figma切换功能轻松地将设计文件从亮模式切换到暗模式。这也使得库更轻便，更容易维护。
2)语义颜色已经在我们的iOS和Android应用程序上成功实现，我们现在正在尝试在我们的web平台上使用相同的系统。我们将很快有一个集中的配色方案来处理所有系统上的颜色。
总结你今天学到的内容：
并找出如何准确描述团队在使用颜色时遇到的问题，从提出想法到用新的方式定义颜色。如何通过语义色彩让人们更方便地使用色彩？我们还可以在我们的组件库中使用语义颜色进行命名管理，这样团队协作会更有效率。(授权截图)
作者：杨奇煜加文内特，译者：蔡赟斯凯
原文链接：3359 medium . com/get around-eu/colors-that-make-sense-505 d0f 3509 C1
本文由@ Caiyunsky翻译发表。每个人都是产品经理。未经许可，禁止复制。
题目来自Unsplash，基于CC0协议。