设计师有时可以花费大量时间来选择正确的调颜色。在这篇文章中,我们将为您提供一些有用的技巧,帮助设计师选择合适的颜色来进行UI设计,并使这个过程更容易和更有成效。
颜色的含义
几个世纪以来,科学家们一直在研究某些颜色的生理效应。除了美学之外,色彩是情感和联想的创造者。色彩的意义会因文化和环境的不同而有所差异。这就是为什么你在时装店里看到黑色和白色的原因。他们希望显得优雅而升华。
以下是颜色在各大洲不同的文化含义:
- 红色–热情、爱情
- 蓝色—-负责任、信任
- 黑色 – 优雅、高端
- 白色—纯洁、纯真、干净
- 橙色–活力、热情、快乐
Iconic是纯黑色和蓝色CTA。这是有原因的。
60-30-10规则
一个被称为 “60-30-10 “的简单规则可以帮助你创造一个适当的平衡。这个技巧来自于室内设计–它经常被应用于房屋装饰。通过遵循这个规则,你会有60%的主色调,30%的次要颜色,10%的强调色。这个公式之所以有效,是因为它能创造出一种平衡感,让人的视线从一个焦点转移到下一个焦点,很舒服。它的使用方法也非常简单。
墙面涂料,家具,配件。
始终是灰度
我们喜欢在设计中用不同的颜色和色调进行探索,但当你意识到你已经花了10多个小时调整主色调或更改强调色时,这种行为可能会把你带入歧途。
另一方面,你应该强迫自己专注于间距和布局元素。这将为你节省很多时间。这样的约束是非常有成效的。反过来说,它不需要看起来很无聊。如果你想让它看起来好看,可以尝试不同的色调。
对比是王道
有些颜色会很好地搭配,而另一些颜色则会发生冲突。它们之间的相互作用是有明确的规则的,可以在色轮上观察到最好。你应该知道这种方法,但没有必要手动去做。
获得灵感
Behance永远是寻找灵感的最佳场所。它也有按颜色搜索的工具,所以当你想做视觉研究时,其他设计师是如何使用特定颜色的。
工具
我们为您的UI设计选择颜色的一些最佳工具进行了汇总。它们肯定会帮你节省很多时间:
Kuler
Kuler来自于Adobe公司,已经和我们一起使用了很长时间。它可以在桌面版的浏览器中使用。如果您使用的是桌面版,您可以立即将配色方案导出到Photoshop中,并开始为您的产品使用它们。
Coolors.co
您可以简单地设置所选颜色,然后按空格键生成调色板。Coolors还能让你上传一张图片,并从中制作一个调色板。它的神奇之处在于,你不只限于一个结果,相反,你有一个选色器,可以让你修改参考点,生成更好的结果。
Designspiration.net
想象一下,你对你的色调有了一个粗略的想法,但你想看看这个组合的例子。Designispiration是一个很好的工具,可以用于这项工作。你最多可以选择5种颜色,然后搜索与你的查询相匹配的图片。它不仅对于寻找具有特定调色板的图片非常好,而且还可以在UI设计中真正的实现它们。
Paletton
它与Kuler类似,但不同的是,你不只限于5种色调。Paletton是一个有用的工具,当你有了主色调,想玩更多的色调时,Paletton是一个有用的工具。
色彩是UI设计的基石。我们上面提到的提示可以让你在UI设计过程中选择合适的颜色,让你的UI设计工作更加轻松。花一些时间来创建一个最适合你的网站或移动应用的调色板,并将其和谐地应用到整个UI设计中。
原文地址:追波范儿(公众号)
作者:terechen