抱走不谢！界面设计平平？他的实用教程收藏一波！

YIGO

有多年游戏UI设计与教学经验，参与《王者荣耀》、《黎明之光》、《十万个冷笑话》、《镇魔曲手游版》等多个国内项目。

▲

YIGO设计作品

YIGO

讲“绘制能力在界面的运用”，我们首先要清楚目前流行的界面设计风格。

前几年游戏界面的绘制风格都是偏重度写实的，有很多偏笔触、偏刻画的东西在，这样的界面对绘制能力的要求很高，如果设计师的基本功不够扎实就会很容易感到吃力。

▲

前几年流行的UI设计

目前来说，尤其是最近几年，游戏UI整体的设计方向是倾向于扁平化、轻量化的，精品的设计往往集中在图标、角色还有一些小小的控件上表达，不再追求重度的刻画。这是一个非常大的转变。

▲

目前扁平化的UI设计

我们以近年来流行的“科技”风格界面为大家讲解：

▲

科技风UI设计

其实很容易看出，作品基本都是形状和纹理的制作，在没有重度刻画的情况下，就多了很多设计层面的思考。

在这里我要纠正一个错误的认识，有的同学觉得只有重度的刻画、强烈的笔触才代表绘制，不是的，绘制是有流程的：线稿、过度、刻画、调整，我们不能以某一种风格来定义“绘制”。

我们来赏析一份优秀的学员作品：

这位同学的设计好在什么地方呢？他并没有尝试画太重度的材质，而是先区分块面和塑造光影，当做好这一步，后面的刻画、笔触都只是在此基础上的深入，会相对来说更简单。

所以，光影和层次才是我们学习绘制的第一步。

再比如科技感风格的QQ飞车界面，整体的界面基本没有过多的刻画，都是过渡、色块、光感等元素的组合，这种扁平化的做法可以使我们快速地获得界面的设计。

▲

QQ飞车UI设计

接下来我会用一份没有经过细化的界面为例讲解如何进行绘制。

▲

示范界面

全部画面最主要的细化点在装饰框体的部分，我们在做设计的时候，尤其是这种绘制型界面刚开始的设计稿和画图标差不多，必须要慢慢推敲设计。

▲

拐角

针对拐角的设计，我也找了一些参考图：

很多同学在画斜的或是带厚度的东西时非常头疼，其实这样的东西设计是非常有层次的，是一个层次叠上另一个层次，这次层次之间是要靠制作的，这也就是布尔运算。

▲

层次拆分示意

我们再从局部设计细化前和细化后的对比总结出绘制的经验：

▲

细化前

▲

细化后

从以上两张图片对比，我们能得出什么经验呢?首先开始绘制笔触之前要先把光影感营造出来，想一想哪里是最亮的面，哪里是最暗的面。掌握光影感的塑造，画面还没开始刻画就有立体感了，反过来，光影没做好后期做很多弥补也不一定能把画面改回来。

▲

细化前

▲

细化后

上一组对比我们讲了光影的塑造，这一组对比想要告诉同学们的是，在刻画时要注意大块面与小块面的对比，我们想要细化画面就需要做一些相对来说细小的结构。除此之外，加入小细节，比如纹理，光效等，会让整体画面看起来更加细腻。

▲

整体画面细化前后左右对比

（左边细化后，右边细化前）

▲

细化后的整体界面

分享的最后我想告诉大家的是，UI其实是需要不断自我提高的一个职位，UI设计的流行风格会不断变换，对设计师设计水准、绘制能力的要求会不断提高，想要长久地在行业立足需要大家下决心实现自我突破，既要实现思维突破，也要提升自己的专业设计能力，满足当下的市场需求。

about us

X学习计划是专注于大学生在线数字艺术学习的教育品牌，致力于解决数字艺术行业从入门到入行中的学习问题。通过合理的课程体系与服务搭配，解决新人入行难的问题。