将一种颜色变成完整的UI调色板

1. 选择颜色前定义界面

从产品开始,而不是从色轮开始。投资组合、银行仪表板、食谱应用和儿童学习平台可能需要完全不同的能量、信任、克制和视觉对比度。写下您正在设计什么、谁将使用它以及用户需要完成什么。

接下来,列出界面中的主要组件。这些可能包括导航栏、卡片、表单、按钮、通知、定价表和页脚。此清单显示您需要多少个功能颜色角色。大多数界面需要的角色数比缺乏经验的设计师预期的要少。

为产品的视觉角色创建三个描述性目标。示例包括"平静、可靠和直接"或"创意、充满活力和友好"。这些词语成为评估生成的调色板的过滤器。一种颜色本身可能很吸引人,但对于您正在构建的体验仍然是错误的。

在这个阶段,不要决定蓝色总是意味着信任或红色总是意味着紧迫。颜色关联取决于上下文、文化、周围颜色和以前的用户体验。首先定义产品的实际需求,然后评估颜色如何支持它们。

2. 将您喜欢的颜色转换为稳定的基础

您的起点可能是来自徽标、照片、实体产品或个人偏好的颜色。将该颜色转换为精确的数字值,如HEX、RGB或HSL。"深紫色"是开放式的解释,值如#4F46E5可以一致地再现。

如果您没有起始颜色,请使用 随机颜色生成器 来探索可能性。将随机生成的颜色视为提示而不是最终决定。生成几个选项,保存有希望的选项,并将它们与您在第一步中定义的三个产品品质进行比较。

如果您的灵感来自徽标、照片或情绪板,请将视觉上传到 从图像调色板工具。 它可以帮助您识别主色并复制它们的代码。选择代表项目的颜色,但检查它在原始图像之外是否仍然有效。

被温暖摄影包围的颜色在放置在普通白色界面上时可能感觉不同。在浅色和深色背景上测试您的候选。如果它变得浑浊、过度明亮或难以区分,请在将其宣布为基础颜色前调整其亮度或饱和度。

3. 为基础颜色赋予明确的语义角色

基础颜色需要一个工作。在许多产品中,主要颜色代表重要操作,如提交表单、开始试用或保存更改。在其他界面中,相同的颜色可能主要用于链接、选定的导航项或装饰性品牌。

决定用户应该期望在哪里看到该颜色。如果它表示"交互式",请避免将其应用于普通标题和装饰形状。用户快速学习视觉模式。当相同的颜色有时表示"点击这里",有时什么都不表示时,界面就变得不太可预测。

将品牌认可与界面行为分开。强大的品牌颜色不需要覆盖整个屏幕。当选择性地用于主要按钮、徽标细节、活动选项卡和焦点指示器时,它可以保持令人难忘。克制通常使颜色更容易识别,因为每次出现都带有意义。

4. 生成有用的色调和阴影

一个颜色值很少足够。按钮需要悬停和按压状态,选定区域可能需要淡色背景,深色模式可能需要相同色调的较浅版本。创建一个从非常浅的色调到深层阴影的比例。

使用调色板生成器探索单色组合,并调整亮度和饱和度。锁定基础颜色使其保持稳定,同时重新生成周围的颜色。不要仅仅因为它出现在调色板中就保持生成的值。仅当它执行特定角色时才保持它。

您也可以使用 颜色混合器 在两个HEX颜色之间创建中间值。将基础颜色与浅表面颜色混合可以建议微妙的选定背景。将其与更暗的终点混合可以帮助您探索悬停和按压状态。

避免相邻颜色几乎难以区分的比例。每个保留的步骤应该在上下文中创建可见的差异。紧凑、有用的比例优于十颜色比例,其值没有不同的功能。

5. 建立中性基础

大多数功能界面通常是中性的。页面背景、表面、边框、正文、静音标签和禁用控件需要不与主要操作竞争的颜色。这就是为什么UI调色板不能仅包含明亮的品牌颜色的原因。

从页面背景和表面颜色开始。表面应该与背景不同,而不会创建拼布效果。接下来,添加强烈的文本颜色、较软的辅助文本颜色和微妙的边框颜色。

中性色不一定是完全灰色。少量品牌色调可以使系统感觉更统一。例如,冷主要颜色可能可以与略微冷的灰色配合很好。保持色调微妙足以使内容仍然舒适阅读。

不要使用降低的不透明度作为创建静音文本或边框的唯一方法。透明颜色在放置在不同背景上时会改变。当一致性很重要时,定义显式值并在它们出现的每个表面上测试它们。

6. 选择受控的辅助颜色

辅助颜色可以支持图表、插图、促销区域或选定的类别。它应该扩展视觉语言,而不与主要操作竞争。如果主要颜色和辅助颜色显示出同样强大和经常出现,用户可能会努力理解哪个元素值得关注。

当您想要平静的关系时,探索类似的组合。互补或分割互补组合可以创建更强的分离,但它们需要更多的克制。Adobe的 色彩理论指南 提供了色轮和常见和谐模型的有用概述。

通过在组件中测试辅助颜色而不是比较隔离的色样来选择辅助颜色。将其放在小图表、标记、插图或信息卡中。然后在主按钮旁查看它。如果辅助元素首先吸引注意,减少其饱和度、减轻它或限制它出现的频率。

7. 将颜色分配给界面角色

这是颜色集合成为设计系统的地方。用基于角色的名称替换基于颜色的名称,如"蓝色"、"紫色"和"灰色二"。语义名称允许值稍后更改,而无需重新命名每个组件。

首先保持角色列表简短。只有在现有角色无法解决重复设计问题时才添加另一个标记。这可以防止数十个几乎相同的值进入界面。

8. 创建悬停、焦点和禁用状态

界面对人们做出反应。按钮可能是空闲、悬停、焦点、按压、加载或禁用。如果所有这些状态看起来相同,用户几乎不会收到界面已注意到其操作的确认。

将状态颜色创建为组件默认颜色的受控变化。悬停状态可能略微较暗或较浅,而按压状态可以创建更强的视觉变化。焦点指示符必须对组件及其周围背景都保持可见。

不要仅通过颜色传达状态。将颜色与另一个提示(如图标、下划线、轮廓、消息或形状变化)结合起来。例如,无效的表单字段可以使用错误彩色边框以及错误图标和解释性文本。

禁用的控件需要特别注意。他们应该看起来不可用,而不会变得不可读。过度苍白的文本可能会产生可访问性问题,而禁用按钮看起来活跃可能会产生混淆。测试完整的组件,而不仅仅判断其填充颜色。

9. 测试颜色对比度和可访问性

视觉和谐不保证可读内容。必须测试每个重要的前景和背景对的对比度。 W3C Web内容可访问性指南2.2 在成功标准1.4.3下为普通文本指定最小对比度比为4.5:1,对大文本为3:1。

可访问性测试应该在调色板创建期间进行,而不是在整个界面构建后进行。当一对失败时,在进行随机更改为色调前调整亮度。逐个重新测试悬停、按压、选定和禁用版本,因为每个状态都会创建不同的前景背景关系。

10. 准备浅色和深色模式调色板

深色模式不是通过反转黑色和白色来创建的。颜色在深色表面上的表现不同:明亮的饱和颜色可能会振动,阴影变得不太有用,纯白色文本可能感觉刺耳。在保留每个语义角色含义的同时重建层次。

保持主题中的标记名称一致。分配给background的值可以改变,但其目的保持不变。同样的原则适用于表面、文本、边框和主要操作。这让组件在不包含主题特定逻辑的情况下切换主题。

Apple的 颜色人机界面指南 建议考虑不同的外观并始终如一地使用颜色进行通信。在上下文中测试两个主题,并确保重要信息不仅由颜色表达。

如果可能,在明亮和昏暗的环境中查看屏幕。在暗房间看起来优雅的深色调色板在日光下可能缺乏分离。还要检查图像、图表、插图和徽标;这些资产可能需要主题感知版本,而不仅仅是背景更改。

11. 在真实组件中测试调色板

不应该将调色板批准为色样行。构建一个小的测试页面,包含标题、段落、链接、主要按钮、辅助按钮、表单字段、卡片、导航项和警报。这揭示了在调色板预览中保持隐形的问题。

测试不同长度的内容。简短的英文标签可能舒适地适应,而翻译版本可能会换到两行。在移动和桌面大小检查调色板,键盘焦点可见,并显示逼真的错误消息。

内容繁重的布局对于测试克制特别有用。例如, 免费简历生成器 代表一种界面,其中层次和可读性比装饰更重要。询问您的调色板是否帮助用户扫描部分或分散信息。

删除不解决真实问题的颜色。如果两个值在视觉上可互换,保留一个。如果辅助颜色重复与主要操作竞争,将其保留给插图或从界面调色板中完全删除。

12. 记录、导出和维护系统

一旦调色板在真实组件中有效,就记录它。记录每个颜色的值、语义名称、允许的用途和重要限制。包括测试的文本组合和如何不使用颜色的示例。

调色板生成器允许您复制CSS,这提供了一个有用的起点。根据它们的角色重新命名导出的变量,以便开发人员不必记住每个HEX值意味着什么。

:root {
  --color-background: #ffffff;
  --color-surface: #f7f7fa;
  --color-text-primary: #17171c;
  --color-text-muted: #5f606b;
  --color-primary: #4f46e5;
  --color-on-primary: #ffffff;
  --color-border: #d9dae2;
  --color-success: #16794b;
  --color-warning: #9a6700;
  --color-error: #b42318;
}

如果您创建了PNG形式的视觉调色板, PNG到PDF转换器 可以将其变成方便的PDF以供共享或存档。但是,不要仅依靠视觉文档。将最终标记存储在项目的设计系统或代码库中,以便值保持一致。

将调色板视为维护系统。当值更改时,测试使用它的每个角色和状态。记录更改的原因并删除旧值,而不是允许几乎相同的替换累积。