设计电子学习课程最令人沮丧的方面之一是选择调色板。这 color palette 指您在设计中使用的有限和预定义的颜色集。
如果我们只有100种颜色选择,则选择调色板可能不是问题。但是我们可以使用数以百万计的颜色,这使得可能的选择不胜枚举。在看似无限的颜色范围之外,如何缩小列表范围并决定使用哪种颜色?
调色板的目标
首先,您将从配色方案中至少获得五件事。您的调色板应该:
- 提供足够的色彩对比,使所有人都可以使用该指令,
- 促进积极的经历,
- 避免引起眼睛疲劳,
- 计划适当的情绪或心理影响以进行学习,并且
- 适合观众和内容。
开始之前的快速提示
- 中立开始。 考虑从中性调色板中的形状开始设计,例如具有灰色或棕色的阴影和色调。然后开始在需要的地方慢慢添加颜色。
- 颜色背景。考虑相邻颜色和背景颜色的影响。我们根据相邻的颜色来感知颜色。
- 颜色数。 当您使用少量颜色时,创建调色板更容易。考虑一个3-5种颜色的调色板:一种或两种主要颜色,一种中性色和一种强调色。
- 一致性。 尝试与您的调色板保持一致。例如,如果可能,请对所有高光使用相同的颜色。所有箭头都使用相同的颜色。
- 辅助功能。 在实施之前验证调色板的可访问性。使用颜色对比检查器,例如 网络目标 or the Chrome对比度分析仪。 (感谢读者在下面的评论中建议我包括此信息!)
牢记这些指导原则和技巧,以下是为电子学习和其他学习材料选择调色板的八种方法。这些方法中的一种或多种应适用于每个项目。尝试选择2到3个关键色和1或2个强调色。另外,请为背景或其他用途选择中性或浅色。浅色背景上的深色文字最容易在线阅读。
颜色和辅助功能
您如何确保您的调色板能促进色盲和视力障碍者的学习?避免仅使用颜色来传达图形和文本中的信息。例如,不要在链接上单独使用蓝色文本,而应在所有链接上添加下划线。在信息图形中,请勿仅使用颜色来传达信息。添加图标,图案或类似设备以表示信息。
此外,请遵循WCAG准则,以使文本和背景之间的颜色对比度。在以下网址了解有关为视力障碍者进行设计的更多信息 WebAIM.
选择调色板的策略
1.根据您的组织品牌塑造您的调色板
如果需要使用组织或客户的品牌颜色,则在配色方案中可能别无选择。如您所知,选择了品牌颜色来传达特定的信息。领导者可能会犹豫是否偏离此颜色标识。如果您发现这些颜色令人讨厌或不适用于学习材料,则可以提出一个案例,说明学习内容与营销内容的要求不同。尽管培训的设计目标和市场营销的目标有些重叠,但是培训的重点是长期保留和改善工作场所的绩效。它’重要的是,学习者应专注于图像的正确部分,而设计不能’不会导致眼睛疲劳。引起关注—营销的关键目标—只是培训课程的一个方面。
也许您可以通过柔化颜色并用中性色替换一些颜色来修改给定的调色板。例如,在下面显示的第一个调色板中,您可能会发现颜色组合对于培训课程而言有些苛刻。在第二版中显示的修改后的调色板会柔化两种颜色,并用中性色替换两种颜色。
2.根据观众和内容选择调色板
利用您对观众的了解来选择调色板。如果该课程是针对学龄前教师和助手的,则可能适合使用包含明亮原色的调色板。这些颜色与幼儿有关。通过在配色方案和中性色之间取得平衡并限制使用鲜艳色彩的区域,可以避免使观众不知所措。另一方面,如果这些材料是为保守的金融机构的员工准备的,那么您将选择一个静音的调色板。
3.将调色板基于照片的配色方案
也许您拥有一组将构成您大部分内容的照片,例如仓库员工的图像。在这种情况下,您可以根据照片中的关键色选择一个调色板。例如,在下面的照片中,调色板可能包含工作服的蓝色或淡蓝色,安全帽的黄色,安全背心的橙色和从盒子中拉出的中性棕褐色。要获得准确的颜色,请使用图形程序或实用程序颜色选择器以从照片中选择颜色。
您还可以通过将照片上传到在线调色板生成器来自动执行该过程,然后该生成器将根据您的照片创建调色板。 I’我不确定自己是否喜欢这种情况,在这种情况下,我会更改一两种颜色。
4.根据您的调色板对心理的影响
考虑为您希望对观众产生的心理影响选择一个调色板。鲜艳鲜艳的色彩令人兴奋。红色,橙色和黄色的暖色也是如此。柔和的颜色令人放松。蓝色和绿色等冷色也是如此。使用适合其对听众影响的色彩。如果要创建有关照顾严重疾病患者的资料,则需要在调色板中显示敏感性。明亮而愉悦的配色方案会放错位置。在这种情况下,柔和的粉彩调色板可能是最佳选择。
5.基于象征主义的调色板
颜色与因文化而异的含义相关联。如果象征性色彩与您的听众有情感上的联系,请考虑选择可以为学习材料增加意义的色彩。一个明显的例子是在为实验室技术人员设计安全课程时利用交通信号灯颜色的象征意义。将绿色用于安全程序,将红色用于不安全程序将是接近调色板的一种方法。
6.根据传统的行业色彩选择调色板
一些行业使用您可能希望采用的常规调色板,因为它会使听众感到熟悉和舒适。例如,医疗保健和金融业经常使用蓝色调色板,政治组织经常使用其国旗的颜色,而环境组织经常使用绿色和蓝色。请参阅下面的徽标。
7.基于自然的调色板’s color harmonies
通过利用自然作为调色板的灵感,您几乎永远不会出错。人们通常会在鲜花盛开的草地或天空,海洋和沙滩的色彩中找到具有美感的颜色。我们倾向于发现大自然的色调令人愉悦和和谐。如果不确定要为调色板选择哪种颜色,请在自然环境中寻找灵感。然后根据需要修改调色板。
下面是根据山景照片生成的调色板,使用 Adobe颜色 palette generator.
8.使用色轮或调色板生成器将调色板基于颜色理论
色轮为理解颜色理论和选择配色方案提供了框架。轮中颜色的图形表示使您可以轻松地根据颜色协调的正式规则选择调色板。使用色轮作为参考系的一些基于色彩理论的配色方案是:
- 类似调色板:从色轮中彼此相邻的颜色(例如,绿色-黄色绿色-黄色)创建的配色方案
- 互补色调色板:从色轮上彼此相对的两种颜色(例如蓝色和橙色)创建的配色方案
- 单色调色板: 仅使用一种颜色的变体的配色方案,例如蓝色的阴影和色调
您可以使用许多调色板生成器来基于这些和其他颜色和谐来创建调色板。以下是一些调色板生成器:
多一注
理想地,当您选择一个调色板时,您将坚持使用它以提供一致且专业的外观。尽管您可能需要在此处或此处修改颜色选择,’最好在设计开始时就确定调色板,以便您对事物的外观和价格有所了解。然后在您选择的配色方案中进行项目的其余部分。
如果你喜欢你的’请阅读并阅读我的书,该书向学习专业的人讲授视觉设计,内容涉及原理和创作灵感。

你’re right, Terry. I’我将把它添加到文章中。
康妮
大卫,您好
很好的建议,虽然我当时没有’专注于可访问性,您’没错,选择调色板应该始终包含通用设计原则。谢谢,我’请在文章中引用您的评论。
康妮
这都是很好的建议,但是我’d还可以通过添加良好的对比度超出颜色感或仅选择一个漂亮的托盘来改善对话的气氛。对比需要考虑可访问性–通过思考有色盲的学习者如何接近和理解您撰写的内容。那里’此处是Chrome的颜色对比选择器/检查器: //chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en,但Chrome用户还可以访问开发人员界面并选择对比度,该对比度还指出了A,AA和AAA对比度等级。
当您已经知道要使用的颜色时,可以使用WebAim’s contrast checker: //webaim.org/resources/contrastchecker/ 有很多方法可以选择颜色,但是请记住(出于可访问性),颜色选择需要消除或减轻尽可能多的颜色,这对于那些无法解码颜色的人,或者如果您打算将颜色携带为假定的颜色,含义(例如,红色代表消极,绿色代表积极)。
请记住一些其他想法。
关于色彩对比的建议在哪里,以符合WCAG2.0可访问性标准?我们需要针对各种需求进行设计。我们看到多少次淡淡的刻字,因为蓝底蓝色很时尚?