抱走不谢!界面设计平平?他的实用教程收藏一波!
X学习计划UI教程
本期分享将由YIGO老师为大家讲解绘制能力在界面的运用。
YIGO
有多年游戏UI设计与教学经验,参与《王者荣耀》、《黎明之光》、《十万个冷笑话》、《镇魔曲手游版》等多个国内项目。




▲
YIGO设计作品
绘制能力在界面的运用
YIGO
讲“绘制能力在界面的运用”,我们首先要清楚目前流行的界面设计风格。
前几年游戏界面的绘制风格都是偏重度写实的,有很多偏笔触、偏刻画的东西在,这样的界面对绘制能力的要求很高,如果设计师的基本功不够扎实就会很容易感到吃力。


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

▲
目前扁平化的UI设计
我们以近年来流行的“科技”风格界面为大家讲解:

▲
科技风UI设计
其实很容易看出,作品基本都是形状和纹理的制作,在没有重度刻画的情况下,就多了很多设计层面的思考。
在这里我要纠正一个错误的认识,有的同学觉得只有重度的刻画、强烈的笔触才代表绘制,不是的,绘制是有流程的:线稿、过度、刻画、调整,我们不能以某一种风格来定义“绘制”。
我们来赏析一份优秀的学员作品:

这位同学的设计好在什么地方呢?他并没有尝试画太重度的材质,而是先区分块面和塑造光影,当做好这一步,后面的刻画、笔触都只是在此基础上的深入,会相对来说更简单。
所以,光影和层次才是我们学习绘制的第一步。
再比如科技感风格的QQ飞车界面,整体的界面基本没有过多的刻画,都是过渡、色块、光感等元素的组合,这种扁平化的做法可以使我们快速地获得界面的设计。


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

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

▲
拐角
针对拐角的设计,我也找了一些参考图:

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

▲
层次拆分示意
我们再从局部设计细化前和细化后的对比总结出绘制的经验:

▲
细化前

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

▲
细化前

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

▲
整体画面细化前后左右对比
(左边细化后,右边细化前)

▲
细化后的整体界面
分享的最后我想告诉大家的是,UI其实是需要不断自我提高的一个职位,UI设计的流行风格会不断变换,对设计师设计水准、绘制能力的要求会不断提高,想要长久地在行业立足需要大家下决心实现自我突破,既要实现思维突破,也要提升自己的专业设计能力,满足当下的市场需求。
about us
X学习计划是专注于大学生在线数字艺术学习的教育品牌,致力于解决数字艺术行业从入门到入行中的学习问题。通过合理的课程体系与服务搭配,解决新人入行难的问题。















































































