绿黄红不能搭配?埃塞俄比亚人必须受到极大的侮辱。谷歌搜索绿色、黄色和红色图像,我想你会找到几个有吸引力的例子(以及丑陋的例子)。
任何一组颜色组合的好坏取决于确切的颜色坐标、相对位置、形状、颜色对象的大小以及您想要的效果(例如,平静与激动、有趣与严肃、大胆与微妙)。我对你没有任何硬性规定,但这里有一些东西可以试验。
尺寸饱和度权衡
为避免不和谐的效果(假设您不希望这样),彩色对象的大小应与其颜色饱和度成反比。您的示例具有相当高的饱和度,因此请尝试使用较低的颜色饱和度(例如,粉彩)或为背景以外的其他颜色着色。例如,您可以为文本着色并让背景保持中性,或者您可以为文本旁边的小形状或符号着色。后者将提供一个机会,可以使用形状对技能匹配进行冗余编码,以实现可访问性和黑白打印目的(绿色复选标记表示满意,黄色感叹号表示不足,红色“请勿输入”符号表示不够好) .
间距
颜色的外观取决于它们彼此的接近程度。相邻的颜色比冲突时看起来还好,只有一个小的分离。尝试在每个单元格周围放置一个中性边框以更多地分隔颜色(就像您在标题中那样),除非相同颜色的单元格混合在一起以被视为单个对象有某种意义。尝试不同的厚度。尝试用白色边框分隔每个单元格,以获得平铺外观。
图案
颜色搭配的好坏也会随着颜色的图案而变化,因此请确保您正在评估具有典型比例和颜色位置的模型。例如,如果大部分时间一切都是绿色的,并且最重要的是让用户注意黄色和红色的“亮点”,那么选择一个能够构成良好背景的绿色(例如,低饱和度、浅色),而黄色和红色红色似乎位于“顶部”(例如,饱和度较高、较暗)。考虑到图案的美感也可以传达和激励用户。如果用户有一套特别不合适或不平衡的技能,也许你想要一个丑陋的模式。最吸引人的模式应该对应于对用户最有利的状态。
可用性
您的问题涉及美学,但颜色编码选择也具有重大的可用性影响。您的颜色选择应该是:
视觉上彼此不同,尤其是在视觉退化的条件下使用时(例如,在阳光下的移动设备上)。
提供与背景(如果是前景)或前景(如果是背景)的良好对比。例如,红底黑字就不是那么好。通常,前景和背景需要不同级别的亮度。
确保颜色排名与他们编码的一致。例如,用户应该注意的事情需要与背景和其他颜色形成更多对比。
提供可访问性和可印刷性,其中每种颜色也具有不同程度的暗度,暗度按等级排列(红色多于黄色多于绿色)。让你的绿色有点蓝和/或你的红色有点橙色,这样红绿色盲用户(最常见的色盲)仍然可以看到颜色差异。
仅对一个变量使用颜色编码。我不知道您使用灰色和橙色来做什么,但这可能会引起混淆,并使用户更难使用红色绿色和黄色。任何时候你有超过三种颜色,就很难保持可用。找到另一种编码灰色和橙色代码的方法(例如,使用字体大小或粗细,或使用虚线作为单元格边框;请参阅将 G 放入 GUI 中)。
在我参与的一个项目中,我使用的颜色是#E00000、#FF8400 和#C0FFE0(不是很黄的黄色,但它仍然有效)。
我有更多关于选择颜色代码的内容,包括如何在Breaking the Color Code中计算颜色和亮度对比度。