框架设计系统的灰度调色板。

使用相同的颜色。

一致性是关键。在链接和按钮上使用相同的颜色。通过这样做，您将帮助用户发现交互式元素并无缝执行操作。

使用语义颜色突出显示重要信息。

语义颜色 - 是用于向用户发出成功、错误、警告信息信号的颜色。如果您需要，请使用语义颜色：

• 要突出重要的 UI 状态、正面或警报信息;
• 验证文本字段或控件（如切换、复选框）;
• 提供快速的视觉反馈，如新的应用内消息。

2. 60-30-10 规则60-30-10 规则

这项技术来自现实世界的设计，但它非常适合数字产品。60% × 30% × 10% 的规则有效，因为它带来了平衡感，并帮助眼睛从一个 CTA 区域平稳地移动到另一个区域，引导用户通过界面。

规则非常简单，是这样的：

• 60%的空间用于主/区域颜色;
• 30%是你的次要/支持颜色;
• 10%是你的口音和指导颜色。

您可以使用这些比例在匹配和组合颜色时找到正确的平衡点，而无需将 UI 变成五颜六色的混搭。

据认为，这些比例是赏心悦目的人眼，因为他们允许一个人感知室内设计和你的屏幕整体组成容易。

为了更好地可视化，让我们快速举例介绍"60-30]10"的操作：

来自石膏设计系统的屏幕布局。

当然也可以按其他顺序搭配，它仍然有效。

了解受众

• 谁是你的目标受众？
• 他们的年龄？
• 产品的专业化是什么？
• 你想让产品唤起什么样的情感？

这些问题应该会影响到颜色的选择，所以在选择UI调色板或与团队讨论选择时，请始终关注这些问题。

使用配色工具