1.7 色彩法则
在设计游戏界面时,通过不同形状和色彩可以传递给玩家不同的信息,这种方法其实在生活中也是如此。例如,在夜晚开车时,当灯光晃过护栏时会反射黄色的光,此时你就会马上警醒起来,从而避免发生危险。
在实际项目操作中,我们应该如何用色呢?在设计中我通常会根据项目的风格将色块划分为3个区域—慎用色、灰色、畅用色,如下页上图所示。
[慎用色、灰色、畅用色]
1.7.1 慎用色
慎用色:指纯黑色、纯白色。
在色彩世界中,纯黑色和纯白色是相对的,它可以快速在设计中体现远近和对比。而在实际项目设计中,纯黑色和纯白色却要慎重。为此你需要了解一些关于环境光的知识:任何物体的反光色(含高亮或阴影)都是由物体周围颜色反射出的颜色。
[环境光UI实际运用视觉效果]
使用白色的地方多数在UI元素应光面的反光区,需要突出高亮,体现元素的质感。很多人在使用这些高亮元素时,只注意到了反光源心,很少有人会去考虑高亮的环境光。
[高亮环境光微小差别]
恰巧很多人问我为什么要这样做,是不是多此一举?举一个例子,20世纪80年代的钨丝灯相信大家都很熟悉,不知道你是否细心留意过灯泡散发光源到周围的那个空间。
[钨丝灯光源]
从图中可以发现发光源到周围扩散区依次是白、黄、橙、橘等,扩散范围越广,环境光源就越暗。而发光源加入适当的环境反光,会让设计元素看起来具有细节表现。
实际设计时需要注意
-1-考虑环境光的运用原理。
-2-建议在畅用色中提取颜色。
-3-使用颜色滑块辅助取色。
1.7.2 畅用色
畅用色:指经常使用的颜色区域,避免整体色彩偏灰,但需要结合颜色滑块调整。
实际设计时需要注意
-1-不同类型项目需要根据项目整体色调进行调整。
-2-取色区域可以根据项目风格重新设定。
1.7.3 反运用原理
在设计中没有一定的错与对,有时候学会运用错误的理论信息会更合适所处场景,这里称为“反运用原理”。使用“反运用原理”时,需要注意固定元素显示、通用元素显示两种情况。
1.固定元素显示
固定元素显示是指元素只在固定的位置显示,在制作UI元素时,常规原理是采用白色降低透明度的做法,而深色降低加上环境色的运用会让元素看起来更轻巧。
[固定元素反运用原理]
[实际项目效果显示对比]
2.通用元素显示
通用元素显示是指相同的元素用在不同环境及不同位置,通常较多使用在元素阴影、提示框等,如上文黑白慎用色部分所述,为了适应通用环境,需要采用纯黑色或纯白色结合透明度调整来达到所需效果。
[通用元素反运用原理]
实际设计时需要注意
-1-固定元素显示需要注意环境色的选取,以及信息的清晰度。
-2-通用元素显示需要注意不同环境及不同位置的元素通用性。
1.7.4 取色技巧
理解用色是设计师必备的技能,不同的项目和风格会直接影响设计界面的用色方式。而设计师除了用色,还需要掌握如何在素材中取色的方法。
取色的方式有很多,可以通过网络上流行的各种取色网站,如Palettes、NIPPON、AdobeColorcc等,或自己动手收录颜色。例如,当我们看到一张非常好的参考素材时,将图片保存到计算机或拍照记录,然后通过吸管工具进行取色。
[摘自艺术家Vitaly Urzhumov的油画及其取色方案]
在提取色彩的过程中,还需要借助你的审美视觉和色彩抛光,因为直接吸取的色彩是在灰色区间的,需要通过你的审美视觉“抛光”灰色值,调整为让视觉更舒适的色彩。
颜色抛光是比较感性的操作,因为“抛光”时需要将提取色通过视觉对原有感觉颜色进行还原,这需要设计师多加练习。