【三人行必有我师叶】001期:光影在游戏界面设计中的应用

在开发过程中，

可能有人会好奇

GUI设计师工作中会遇到什么困难，

例如你们的设计思路是什么？

为什么会做这样的设计？

实现过程中都经历了什么？

本次邀请了

叶子网络4班的老学员-

猪场GUI设计师poemrain

来为大家分享光影在设计中的运用经验，

希望下面的内容能够抛砖引玉，

为大家带来些启发。

poemrain

大家好，我是poemrain~

算算时间我是16年在叶子学习的，可以说是最早的一批叶子学员啦。毕业后我从2017年开始从事非对称竞技类的游戏GUI设计工作，主要参与了《第五人格》项目的GUI设计。今天受孙老师的邀请来给大家分享一些我平时工作学习中积累的经验教训和设计思考～

“光影在电影和绘画中是一种被广泛应用的设计要素，光影可帮助烘托画面气氛，聚焦画面中心，拉开画面空间关系。电影会有专门的灯光师职位，他们为电影中的场景和人物设计光线，通过不同种类的光影组合，让电影的每个镜头都变得更加丰富有细节。”

其实光影也能够应用于游戏的界面设计中。

下面给大家介绍几种光影应用技巧：

1

电影暗角法

最简单的一种应用

那么电影为什么会出现暗角，形成原因有很多，有人为造成的，也有自然形成的。自然形成的原因，大概是由于光与感光原件角度的差别所导致，中间光比较强，四周受光越来越少，最后在画面呈现上，就形成了画面从中间往四角逐渐变暗的效果。

这种效果的好处就是在于能够突出中间的关键信息部分，所以有些电影或者摄影，都喜欢人为给画面加上暗角。

所以UI设计中的电影暗角法，指的就是给界面的四周加电影式的暗角，即压暗画面四周区域。以下图为例，界面中心是游戏信息区域集中的部分，四周是装饰性背景，可以看出画面在四周被压暗，并且加了高斯模糊效果。

压暗画面四周的好处在于，弱化了四周破碎细节的对比度，使他们更整体，同时也突出了界面中心的重要信息。

对比观察可以发现，左边加过暗角的界面给人感觉画面的主次关系是更加清晰的，视觉中心是集中在信息上的。

而右侧的图中，我们的注意力会被周围过于清晰的多边形分散过去，感觉总想看出来这到底是个什么。那么我们能不能去掉这些多边形呢？也不是不可以，只不过没有这些形状后，四周都只有一种颜色，画面又会显得很空，很单调。

所以我们在保留周围丰富的画面细节的同时，给画面四周加上暗角，降低细节的对比度和存在感，就能够达到既突出中心信息，又保留丰富细节的目的了。

那么哪些界面适合用电影暗角法呢？

暗角法适用于信息集中在中心区域的界面，比如下图这些类型的界面，四周有丰富细节，却又不能让他们抢了风头，这时候就试试给他们加电影暗角，写实风格的界面更适合这种方法，因为会在无形中让画面具有电影镜头感。

2

几何形光影法

进阶一点的用法

几何形光影法指的是在画面中设计运用有明确边界形状的光影，它能作为隐形的框体用在界面中。

以下图为例，图中每个图标和一个价格按钮为一组信息，可是图标大小不一，如果只用距离间隔的方式来分组，可以想象整张界面看起来会很不整齐。

而这张界面中的每组信息都被一块光影元素包裹起来，光影的形状类似从窗户照入，不仅让人联想到画面之外的环境，也使得本来参差的信息区域变得干净整齐。

多边形光影法在这张界面中的设计使用方式，不仅帮助界面信息归纳成组，同时也起到了营造气氛的作用。

下图中用到的圆形光影也是一个很好的例子。

图中人物被探照灯样式的光影区域框出，作为整个画面的视觉中心，人物装备图标沿着光影的弧线走势，分列左右两边，有序排列。

这里的探照灯设计不仅符合游戏故事情境，同时还帮助画面中繁多的信息划分出了明确的区域，使他们能够有效的分组排列。

融入环境的有形光影能作为隐形框体使用在界面设计中，它避免了通常意义上框体过于程式化的无趣感受，又能起到框体为信息分组的作用。

以下再列举一些使用了光影分区的界面例图：

3

其他光影用法

蜡烛光、月光等

光影有很多种类，比如有室内的日光灯，闪烁的烛火，或者室外的神秘月光，又或者在傍晚照入房间的窗户光等等。

光影除了能够用于划分信息区域，还能烘托界面氛围，赋予界面时间感和空间感。

界面中的时间感指的是，光影的形状、颜色等特征会暗含时间信息。比如清晨的光清冷，黄昏的光温暖，而不同强度的光照射在物体上，所产生投影的形状和颜色也会有区别。

画面由于有了时间就有了一层故事性，我认为界面中的故事性不光指具体发生的事件、情节，也能指代一种生活感受，这种感受来自于每个人对生活和周身环境的一些习惯性印象，这种印象的产生是潜移默化的。而相似的环境氛围特征能唤起人们脑海中的相关记忆，使人感觉在哪里见过，很熟悉很亲切，便更容易接受。

不同环境的光影使得画面带给人的感受有差异，光影使画面与观者之间产生共情，从而增加界面的故事性和代入感。

以武侠国风手游《一梦江湖》(原名楚留香)为例，它的通用界面设计中就用到了月光的光影。

如下图中所示，通用界面整体为暗色底，底部有柔和的反光，月光的光影被设计应用在了通用界面的标题部分，月光的光晕柔和地在暗色底上舒展开。

这些电影带给我们的印象通过潜移默化的方式深入我们的记忆中。当我们看到这张界面的时候，曾经看过的这些电影镜头又从记忆中被唤起，觉得好像在哪里见过，很容易地就能够接受，并与武侠类相关的信息产生联想，正好契合了《一梦江湖》的游戏背景主题。

一些用光影烘托氛围的界面案例：

4

光影应用限制

以及判断方式

光影在界面设计中的应用也受到了一些限制，比如需要九宫切图的界面就不适合设计光影元素。

光影能够大面积应用的情况通常出现在表现性界面中，即可以整块切图的界面。这种类型的界面通常对视觉表现的需求大于对它功能的需求，承载信息量不多，重点放在体验和视觉上的有趣。

在设计这种界面的时候，我们就可以大胆的设计光影效果，怎么有气氛就怎么做。但是功能性界面中也不是不能用上，只要在不影响光影效果的前提下，找到巧妙的切图方式即可。至于光影在每张不同界面中的具体设计应用方式，还需要多多分析具体的界面情况来做出判断和调整。

总  结

其实我认为美术相关的各设计领域有很多道理都是相通的，设计之间的界线没有这么明显，而可能在某个设计领域有新意的惊喜点，可能在别的设计领域是一种常规设计手法。

不止是在游戏界面的设计中，在别的设计领域，想要做出有新意的设计，我认为最主要的还是在生活中对自身所处世界保持好奇心。

创新的能力是一种观察方式和观察结果的长期积累。同一种事物，不同的人会看到不同的东西，有人看到的多，有人看到的少，而比别人多看到的部分，我认为就是创新的来源吧。

最后给大家分享一些我个人认为光影比较美的电影，大家可以保存下来空余之时看一看哦~

2020/05/28

叶子学堂读书笔记

非常感谢poemrain小姐姐给大家分享了光影在游戏界面设计中的运用～啪啪啪～阿叶我为大家复盘一下今日份知识点噢～

1. 电影暗角法：最简单的应用；

2. 几何形光影法：进阶一点的用法；

3. 其他光影用法：烛光、月光等的运用；

4. 光影应用限制以及判断方式；

5. 总结部分呼吁大家保持好奇心，培育创新能力，同时还给大家分享了光影很赞的电影和动画作品。

美好的时光总是很快～

咱们的第一期【三人行必有我师叶！】

就这样结束啦～

大家喜欢类似的分享，

或者你也有不错的文章希望投稿推荐，

欢迎给我们留言互动或者给我私信噢！