colorrose 4colors( 二 ) _「广东龙网」

文章插图
以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：
我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。
我们如何确保从一开始就设计出易于使用的颜色？
我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）
在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）我们还测试了APP界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？
我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？
语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。

文章插图
例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿” 。甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……

文章插图

文章插图
语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习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://polaris.shopify.com/design/colors#navigation

显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。
我们的新颜色系统由两部分组成：

文章插图
基础调
我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。

文章插图
基础调色板
语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。请参阅此处的命名法和一些示例：

文章插图
语义颜色结构和示例这意味着来自基础调色板的颜色可以用于多种语义颜色：
【colorrose 4colors】

特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。