浅说《英雄联盟》中的颜色运用
这一期聊一下他们在界面中的颜色用法,无论是游戏中还是UI界面,我都会简单做下分析。
作为一个英雄联盟的老玩家,无论是对这款游戏的玩法还是英雄,都是很吸引我的。以前也有拿过界面作为点线面的例子来分析了一波。感兴趣的可以回头看看《英雄联盟》界面中的“点线面”。
游戏中的配色
敌人和队友的识别主要是靠颜色对比,对比分为明度对比、饱和度对比、色相对比,其中最为明显的是色相对比,例如我方为蓝色,敌方为红色,强调着冲突和刺激的信息
在游戏的场景模型中和UI上也一直存在的颜色的对比,在视觉中帮助了我们强化了战斗信息的变化,哪怕是一个敌方小兵我们也是会非常关注能否成功补刀(特别是跑车0.0)
那既然是红蓝对比颜色,放进游戏这个五颜六色的的地图中又是怎么跟其他颜色去做协调的呢?总不能看起来不舒服吧。一般在我们画面颜色的配色中,分成主色、辅助色、点缀色,比例一般是631原则,也就是60%主色,30%辅助色,10%点缀色(并不是固定)。
以上是我找的一些配色例子(这里黑白灰不算颜色)那么我们回到英雄联盟里,在一个屏幕的范围内看到的颜色,我们首先会第一感觉是整个主色是绿色,其次最突出的是红色与蓝色(是我们比较关注的信息),而且颜色也很协调。他们是怎么做到的呢?下面是我随便截的一个画面。
因为在场景物体的配色上,不管在地板还是山脉岩石,他们都是用了与主色90°内的颜色作为了辅助色,构成了里面的色相调和,而且大画面的明度和饱和度都是偏中下的,可以看一下整个画面颜色的范围基本都在红框里面。这种低饱和度的颜色一般都是比较百搭的(高级灰?)避免了与鲜明的红蓝色进行冲突,所以我们才会更加的关注到红蓝色的信息。
之前也有写过颜色的使用文章哈哈颜色搭配及使用
UI界面
界面中图标的颜色和文字是比较鲜明突出的,而背景的颜色则是偏灰暗,界面的金黄色UI与背景和UI底板的深蓝色也是存在着对比的关系。为了不影响英雄插画的效果,UI的色相也是控制在黄色和蓝色。
在高明度的文字和高饱和度的图标与低饱和度的背景也形成了我刚刚说的对比关系。也就是界面中的层级关系。让我们第一时间关注到重要信息,进行引导玩家操作。
界面配色里面也使用了大量的高级灰来突出我们需要关注的信息,例如在英雄界面里我们都是先关注的是插画,再看文字,最后才注意到背景。所以低明度的颜色在里面也是起到辅助的作用啦。












































































