在UI设计中使用颜色的技巧

Author: limo


设计师有时会花很多时间来选择合适的调色板,在本文中,我们将为您提供一些有用的技巧,帮助设计师为UI设计选择强大的体面颜色,并使这个过程更容易和更有效。


“颜色不会给设计增添愉悦的品质,反而会强化它。”


——皮埃尔·博纳尔


颜色的意义


几个世纪以来,科学家们一直在研究某些颜色的生理效应。除了审美,颜色也是情感和联想的创造者。颜色的含义因文化和环境而异,这就是为什么你会看到黑白时装商店,他们想要显得优雅而高贵。


红色-激情,爱

蓝-负责,信任

黑色-高雅,高端

白色-纯洁,无辜,清洁

橙色-能量,热情,幸福


阅读更多关于颜色的含义-颜色文化



标志性的是纯黑白与蓝色的CTA,这是有原因的。


60-30-10规则


一个被称为“60-30-10”的简单规则可以帮助你建立一个适当的平衡,这项技术来自于室内设计——它经常被应用于房屋装饰。按照这个规则,你将有60%的主色调,30%的副色调和10%的主色调。这个公式之所以有效,是因为它创造了一种平衡感,让眼睛从一个焦点舒服地移动到另一个焦点,它的使用也非常简单。


60%是主色调,30%是副色调,10%是主色调



采购产品墙壁油漆,家具,配件


总是灰度


我们喜欢在我们的设计中探索不同的颜色和色调,但是当你意识到你已经花了10多个小时来调整原色或改变强调色时,这种行为可能会把你带到错误的方向。


另一方面,你应该强迫自己专注于间距和布局元素。这会节省你很多时间。这种约束非常有效。在翻转的一边,它不需要看起来很无聊。如果你想让它好看,可以尝试不同的色调。


对比为王


有些颜色搭配得很好,而有些颜色会互相冲突。有明确的规则,他们将如何互动,可以最好地观察到一个色轮。您应该注意这些方法,但是没有必要手动执行。


如果你想了解更多关于色彩理论的知识,请阅读这篇文章——设计师的色彩理论:创建自己的调色板


得到的启发


Behance总是灵感最好的地方,它也有根据颜色搜索的工具,所以当你想对其他设计师如何使用特定颜色进行视觉研究时。


这里是behance.net



工具


我们收集了一些为您的UI设计选择调色板的最佳工具,他们一定会为你节省很多时间。


Kuler


Kuler来自Adobe,在我们公司工作了很长时间,它可以在桌面浏览器中使用。如果你使用的是桌面版本,你可以立即将一个配色方案导出到Photoshop中,然后开始在你的产品中使用它们。



Coolors.co


您可以简单地设置所选的颜色并按下空格来生成调色板,Coolors还提供了上传图片并从中创建调色板的功能。它的神奇之处在于,您不仅限于一个结果,而是有一个选择器,允许您修改参考点并生成更好的结果。



Designspiration.net


假设你对你的色调有一个大致的概念,但是你想要看到这种混合的例子。对于这项工作来说,设计剽窃是一个很棒的工具。您可以选择多达5种颜色,并搜索与您的查询匹配的图像。它不仅可以很好地找到带有特定调色板的图像,还可以在UI设计中实现它们。



Paletton


它与Kuler相似,但不同之处在于,您不仅限于5个音调。Paletton是一个有用的工具,当你有原色,想要使用额外的色调。



结论


色彩是UI设计的基石,我们上面提到的技巧将简化在UI设计过程中选择正确颜色的工作。花些时间创建一个最适合您的网站或移动应用程序的调色板,并在整个UI中和谐地应用它。


相关阅读