返回  

色过饱和:创建彩色设计的 10 个技巧

2022/8/12 10:30:11 来源:深圳网站建设公司Clh

如果最终的设计不能给人一种视觉上的冲击,创建高对比度的过饱和色彩设计可能是一件不太明智的事情。但是设计师们正在抓住这个机会,并尝试使用一些“色过饱和”的设计技巧来创建不会让用户不知所措的同时又能令人惊叹的项目。


今天,我们将通过 10 个不同的示例和分享 10 个提示,以帮助你在完成网站设计或其他数字化或平面设计项目时驾驭这种色彩趋势。

将柔和的调色板抛在脑后,潜入一个色彩鲜艳的世界!


1. 用白色平衡颜色(Balance Color with White)

Balance Color with White

当你使用大胆的颜色或大量过饱和的色调时,为设计创造平衡非常重要。使用白色空间以抵消过多的颜色背景或创建更加舒适的区域是一种可行的方法。

白色可以让你的颜色蓬勃发展而不会妨碍内容,它还可以防止设计过于明亮。

在上面的网站设计示例中,发生了很多事情,但白色背景确实有助于将所有内容组合在一起。还要注意空间的使用,以便屏幕上的白色区域——即使是运动效果和超大标题——与颜色和填充空间的权重几乎相同。

这种平衡的元素使设计既有趣又不显得压倒性。


2. 更加大胆(Be Bold)

Be Bold

当你想使用过饱和颜色时,有时最有意义的选项是更加大胆的使用。令人惊叹的色调与清晰的图像元素可以创造出引人注目的组合,可以更好的引起注意。

选择一种超亮的颜色(最好从你的品牌调色板中选择)并使用它。

颜色的亮度和大胆的特性将吸引用户的注意力并吸引用户进入设计。将它与简单的图像配对,例如上面的示例,以真正最大限度地发挥颜色的影响。


3. 平衡图像(Balance With Imagery)

Balance With Imagery

当你想使用颜色但又不想太夸张时,带有图像以平衡色调的分屏选项可能是一个不错的选择。

使这个概念发挥作用的秘诀是挑选和所用色彩能够协同工作的图像。它们必须感觉有些重,图像中的颜色和配对的设计元素必须具有共同的外观感觉。

这并不意味着颜色必须相同,但它们确实需要协同工作。

在上面的示例中,真正使左侧的亮色与右侧的图像配合使用的是海军色主题。请注意它是如何用于文本的,并且与右侧图像中婴儿的衣服颜色相同。


4. 统一(色调)(Go Mono(tone))

Go Mono(tone)

当你想大量使用颜色时,请考虑使用统一的调色板来帮助你使用不会变成花哨的、混乱的大胆或明亮的选项。

相同基色的多种色调可以让人感觉优雅和有影响力。将图像提升到一个新的水平,图像也使用相同的颜色进行超级一致的设计,如上面的示例。


5. 使用叠加层(Include an Overlay)

Include an Overlay

当你使用大量颜色但担心颜色过多时,叠加层可以提供更好的帮助。

使用黑色或白色覆盖来柔化颜色的亮度和适度的改变色调,以确保你有一个位置放置具有足够对比度的文本以提高可读性,尤其是在网站设计中就尤为重要。

上面的示例在明亮的颜色背景上做得很好,其中包括一个叠加层和一个使用相似颜色但没有叠加层的视频元素。这种组合在视觉上很吸引人,并且有一种颜色,不会让人感到压倒性的。


6. 使用颜色进行眼动追踪(Use Color for Eye Tracking)

Use Color for Eye Tracking

用户界面元素的颜色组合有助于将用户吸引到屏幕上的关键元素。这种眼动追踪技术有助于将用户从图像等大型元素转移到文本或号召性用语。

而这一切都源于对比。

感兴趣的区域应该与背景或主要视觉元素有很大不同。

在上面的示例中,深色背景被大的白色和亮色文本所抵消,以将用户的眼睛吸引到屏幕上的单词和可操作元素上。


7. 在图像中使用颜色(Use Color in Images)

Use Color in Images

过饱和色彩的图像是设计具有大量颜色的项目而无需创建其他元素的绝佳工具。你有一个简单而多彩的设计和正确的图像的基础。

在考虑高色彩图像时,有几个选择:

· 与摄影师合作,以你需要的风格来拍摄照片;

· 编辑照片以获得高对比度和色彩或使用滤镜来调整;

· 展示你想要的照片(这对产品很有效,但对环境图像效果不佳)。


8. 设计效果(Design an Effect)

Design an Effect

使用过饱和色彩作为强调或效果来打破设计或帮助用户更好地理解内容。在考虑如何以不妨碍内容的方式使用颜色选项时,这是一个流行的概念。

在上面的示例中,旋转产品图像包括许多颜色的变化。有一个多彩的效果,但它不会影响屏幕或分散你的注意力。

这是产品推广和使用高色彩设计美学的流行选择。


9. 分层堆叠颜色(Stack Color in Layers)

Stack Color in Layers

高级色彩设计可以从分层中受益,从而为其中的所有颜色选择建立一个组织和一个地方。

它从与包含彩色元素的顶层一起使用的背景开始。

在上面的示例中,这些图层为点击操作设置了舞台,其中顶层成为主图像。它之所以有效,是因为初始分层让你为即将发生的全屏活动做好准备。

它还可以帮助用户以更全面的方式理解内容。在完整的网站体验开始之前,颜色用于促进阅读和理解。


10. 无所顾忌地全力以赴(Unapologetically Go All In)

Unapologetically Go All In

如果你愿意在颜色方面冒险,那就全力以赴。以最大胆和最不可思议的程度使用颜色来传达你的信息。

请记住,这可能是用户喜欢的东西……或讨厌的东西。这么多颜色会导致不同的情感联系。

看看上面的例子:它让你感觉如何?这就是全力投入高色彩的风险。你需要设置正确的基调并同时与你的主要受众产生正确的共鸣。


结论

一个额外的提示:当你全神贯注于这样的趋势时,确保颜色与你的调色板相配。如果你离品牌颜色太远,你可能会失去与用户的重要联系。

在尝试诸如此类的设计元素时,保持真实身份非常重要。如果你的调色板不能以过饱和的颜色风格工作,最好尝试其他方法并将这个想法应用于另一个更合适的项目中。









----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务