浅谈 UI 设计色彩色运用

本文作者：创想者学院毕业生 庞清桦

做为一名设计师，色彩搭配肯定是少不了的，在色彩设计应用中，我们对颜色不同程度的理解，会直接影响到设计页面的效果，和作品的质量，所以熟练地运用色彩搭配，设计时会事半功倍。一个优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目，尽管网上有各种各样的色彩库，让配色变得格外简单，但设计师本身的配色能力仍然至关重要，有时候最好还是亲自动手搭配，培养自己对色彩把控和美感。而且在配色过程也会让大家收获颇丰。今天就带大家说几个配色的方法。

在讲色彩搭配之前先带大家熟悉一下几个色彩概念，什么是色彩、色调以及色彩色冷暖。

什么是色彩?

色彩有三个基本的要素：

色相：即色彩的相貌。它包括红黄蓝三原色和三原色相互吸收形成的其他色彩。

色度：即色彩的纯度、浓度和饱和度。

明度：即色彩本身的明暗度。如黄色明度最高。

什么是色调？

色调通俗的说就是色彩的调子，也就是色彩运用上的主旋律，

大面积的色彩倾向。色调决定了画面的风格和给用户的感觉。

色彩的冷暖？

色彩分为冷色和暖色两个色调，例如红、橙、黄给人容易联想到太阳、火等容易让人联想到温暖的事物属于暖色，而蓝、绿、紫会使人联想到冰雪、天空等宁静、寒冷的场面属于冷色调。

了解完色彩的几个基本概念，就要开始带大家说说配色了，说到配色肯定要提色相环，

在色相环的组成中，相隔180度的色彩我们称之为互补色：红与绿互补，黄与紫互补而蓝色与橙色互补。

由于互补色有强烈的分离性，所以使用互补色的配色的对比度、拉开距离感，而且能表现出特殊的视觉对比与平衡效果，使用得好能让作品令人感觉活泼、充满生命力的感受，具有视觉冲击力。比如大家都熟悉的湖人队的LOGO就用到了黄色和紫色这对互补色配色。

前面说到互补色配色非常有视觉冲击力，色彩之间的对比非常强烈。所以在运用时要特别注意色彩之间的比例。一般在用大面积的一种颜色时都会用另一个面积较小的互补色来达到色彩平衡。如果两种色彩所占的比例相同，那么对比会显得过于强烈。经验上会以3：7甚至2：8的比例分配原则。

比例相同：

2:8比例

也有配色用比例70％、25％与5％的配色比例方式，其中的主色为大面积使用，而辅色与点睛色则是可以利用互补色的特性，来讲主色以及强调色皆衬托出来。

就拿湖人队的LOGO来看，就运用上了70％、25％与5％的配色比例：

主色辅色点睛色

说完互补色配色就和大家聊聊冷暖配色，色彩的冷暖感觉，并非来自物理上的真实温度，而是与我们心里与视觉上的联想有关，是视觉上的常规反映。当然色彩的冷暖变化是相比较而存在的，比如玫瑰红与大红相比这比较偏冷色。

在冷暖配色运用上需要与人们需求一致，如在喜庆海报或banner上运用暖色更能体现欢快热烈的气氛。

在炎热的夏天，冷色更能让人产生凉快的感觉。

冷暖两色同时运用有较强的视觉冲击感，可以产生对抗的感觉，如魔兽的海报。

作为一名设计师，了解色彩是一件必不可少的事儿。在设计的时候应该慎重地考虑和选用颜色。通过不同的颜色，可以创造出不同感觉的图像。合适的组合可以获得关注，通过视觉传达设计师所想，进一步拉近设计师与观众的距离，让图像更具力量。如果之前并不仔细考虑用色，现在开始，应该培养对于色彩的感觉。相信客户会看到一个不一样的你，你的设计作品将会通过颜色建立联想，更好地传达信息。

文／骑马闯红灯

关键字：UI设计, 色彩

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！