游戏美术配色——UI配色基础解析
2022-10-26

作者:

生活中充满色彩,色彩视觉对于游戏游戏设计与用户体验十分重要,好多小伙伴对于配色设计,以及游戏UI感兴趣,下面就简述一下配色基础,非美术的同学也能看懂哟!懂了色彩基础,沟通效率蹭蹭往上涨, 与“五彩斑斓的黑”说Bye-Bye,与“红配绿”划清界限

那么就让我来阐述一下色彩的基本原理,以及色彩所带来的情绪:

游戏美术配色——UI配色基础解析


以数值划分,我们可以得到任意一组色彩关系。

例:我们将任意一个颜色旋转15度,将得到一组同类色。

这个数值达到120度,我们将得到一组对比色,红黄蓝三原色之间就是这个数值。

生活中,女生喜欢用的眼影盘,什么大地色、春夏色系等,基本都是前两种,处于相近的色系。这样的颜色搭配起来比较和谐统一,自成一组。

游戏美术配色——UI配色基础解析


色彩的冷暖也和彩度有关。我们来看越靠上的图片暖色使用越多,下边则靠近冷色,中间的区域颜色比较温和。

需要注意的是暖色中饱和度越高越高,越有温暖感,再冷色中,饱和度越高越具凉爽感,所以我们引申出一个饱和度的概念。

游戏美术配色——UI配色基础解析


每个颜色都会传递出情绪,小伙伴们可以看看自己喜欢的颜色,所延伸出来的信息和情绪。

例如喜欢红色的人,性格大概率比较热情。

在我们的设计过程中,可以运用色彩情绪去传递设计语言,制定产品的色彩倾向。

另外在UI设计中,同时需要结合功能设计:以红色为例,红色可以呈现华丽、热情的视觉效果,或在节日活动中(例如春节、圣诞节)贴合主题,也可在战斗中表现紧张的气氛。

游戏美术配色——UI配色基础解析


↑↑↑↑↑↑运用红色系,达成华丽的古风视觉效果【图:忘川风华录】

优点:吸睛,出效果

缺点:控制不好会抢,眼球长时间沉浸红色系,会有些视觉疲劳

游戏美术配色——UI配色基础解析


红色的游戏应用设计,常常用于节庆、节日、宣传等。【图:新笑傲江湖】

游戏美术配色——UI配色基础解析


前面讲述了色相、冷暖的概念,我们再来看一下必不可少的知识——明度。纵轴,越往上,颜色越浅,明度越高。我们在做设计的时候,纯黑纯白一般用的不会太多。

游戏美术配色——UI配色基础解析


最后我们来看饱和度,↑↑指色彩的鲜艳程度,需要注意的是,同样是鲜艳的颜色,也会有不同的搭配,比如第一排第一个,对比强,第一排第三个,对比就比较弱。我们在做设计的时候,需要综合考虑,选择合适的色调。

游戏美术配色——UI配色基础解析


我们来看几个游戏色卡

我们可以看到HSB原理,也就是色相、饱和度、明度三个要素是共同作用的,基本都是降低饱和度的,不同明度的对比色。在我们的配色设计中,可以找寻。参照,以及突破色彩的运用规律,做更好的视觉设计。