高能来袭！他用空间魔法打造不一样的图标设计
X学习计划UI教程
本期分享将由U灵老师为大家上一堂图标设计的“空间魔法”课，讲解图标设计的空间感问题。
U灵
前网易资深游戏视觉设计师，有多年的教学与项目设计经验，曾参与《王者荣耀》，《大话西游2》,《英雄三国》等国内知名项目。
▲
U灵图标设计作品
图标设计的“空间魔法”
U灵
当我们提到“空间感”的时候，大家第一时间想到的往往是近大远小、光影、虚实、透视、体积等关键词，但这些关键词只是“空间感”的一部分。
今天讲图标设计的”空间魔法”这一课首先要明确一点：“空间感”的营造是从2D到3D的转变，表现形式上是从二维层面到三维层面的转变。
文章中我会主要分几个方面为大家讲解：
1.空间关系与透视
2.视觉引导
3.3D辅助设计
4.空间在界面中的应用
空间关系与透视
首先我们以一个卷轴图标的简图为案例进行说明：
从2D到3D+的设计空间感上有非常明显的差距，后者的图标设计看起来更立体。为什么会有这样的差别呢？首先我们引入一个基础知识：二维空间有两个轴，X轴和Y轴，三维空间有三个轴，X轴、Y轴和Z轴。
▲
二维空间、三维空间及三维空间的表现形式
图标设计有一些常用的角度，0度、45度（右侧四十五度角）、-45度（左侧四十五度角），我们希望设计有空间层次感可以围绕空间的轴线做转动，改变透视关系，以丰富视觉效果。
但有一点需要明确，大透视一般出现在一些图标物品和特殊元素里，一般界面底部的图标都选用正视图，这样显得画面均衡。
当你自己做图形设计时，做单图时，可以自由发挥选择自己想要的角度，但在项目设计中，在一些使用场景和场所，为了均衡整个画面，是不能随意发挥的。
视觉引导
大家留心观察一下各种图标就可以发现，在图标设计中70%-80%的图标都选择左侧45°的角度为设计角度，这是为什么呢？因为45°角是一个体积关系最饱满的角度。
那么为什么左侧45°角是最常用的图标设计角度而不是右侧45°角呢？
这里决定设计角度最关键的核心叫视觉引导，我们的眼睛习惯从左往右看，从左往右看的时候阅读速度相对较快，从右往左看的时候阅读速度相对较慢。
从视觉引导的角度来说，左侧45度角是一个能清晰观察的舒适角度。
▲
简图示意
例如这个图标我们来分析一下：
▲
左侧45°角
▲
右侧45°角
上面是一组同样的图标，只是换了角度，右侧45°角的设计不符合视觉引导，并没有什么明显的错误，但却让人感觉别扭，显得画面不够和谐。
我们这一部分关于视觉引导的讲解不是为了说右侧45°角的设计角度完全错误，而是为了让大家知道，我们在设计时为什么大都会选择符合视觉引导的左侧45°角角度。
我们做设计要知其然，知其所以然，通过对设计的思考追求进步，用空间的手法做出最让人舒适的设计角度。
很多同学在工作中也会遇到瓶颈，觉得自己的设计水平跟不上项目的需求，如果只是混吃也确实可以在行业中再待几年，但是如果想要追求长远的发展，或者对设计有更高的追求，肯定是需要再次提高自己的设计水平的。
我自己正在带的游戏UI图标系统班，会全方位的帮同学们解决游戏UI工作中的核心设计内容，帮助同学们更好的应对工作中的设计需求和提高就业成功率，有意向的同学可以滑到文末报名。
3D辅助设计
下面我们讲3D辅助设计，先展示我设计的星盘图标：
这个星盘的设计是一个多重复杂空间的设计，这样的设计给人的观感是图标在空间设计上很“丰富”。想要做出这样的图标，我们在做设计时要想到如何通过物件与物件间的穿插和空间的角度旋转得出最好的视觉效果。
但是这样的角度并不好画，因为多物件穿插角度在设计上来说是很有难度的，这个时候我们可以选择借助3D辅助。借助3D辅助我们可以让空间感的设计变得简单一点，专注去追求设计的点，这样我们可以选择出最好看、最能体现图标气质的设计角度。
下面我放出星盘图标的3D辅助设计步骤图帮助大家理解一下：
▲
3D辅助设计步骤图
可以看到，加入3D辅助之后画面变得立体起来，我们理解空间关系相对来说更简单了，但是我们始终要明确，3D设计只是一种辅助手段，用来辅助设计的完成。
空间在界面中的运用
最后我们要讲的是空间在界面中的运用。
一般游戏界面都是纯2D的，核心视觉中心就在界面的正中心，我们要用图标的形式加强视觉引导，通过界面和图标的搭配营造出空间感。
▲
游戏界面核心视觉中心简图示意
我们用一个游戏界面为例为大家讲解一下：
游戏界面右侧两个常驻图标都有朝向对应，有强烈的引导趋势。打出视觉引导线之后就可以看到，纸张、魔杖、城堡logo的吊牌，右侧图标各个设计元素的角度都向视觉中心引导，强调视觉中心。
我们把图标做一个反向角度的设计之后再看一下效果：
图标的设计角度改变之后，图标没有通过空间的手法强调视觉引导的作用了。
我们今天讨论的是在设计的结构、刻画都没有问题的情况下，要怎么样让设计更有深度，更高级。针对这一点，在设计的时候我们应该先有空间引导设计的意识，有了做空间设计的构想再想具体的设计元素，比如上图中的魔杖、纸张等其实也可以换成其他的设计元素，其实重要的是空间引导设计而不是设计元素。
总结
还是那句话，做设计要知其然，知其所以然。我们要学会拒绝不过脑的设计，在设计时要多一点思考。一味地学习别人意味着你永远无法超越你的参考，但学习别人的优点并进行总结，加入自己的思考，你就会得到好的设计。
about us
X学习计划是专注于大学生在线数字艺术学习的教育品牌，致力于解决数字艺术行业从入门到入行中的学习问题。通过合理的课程体系与服务搭配，解决新人入行难的问题。
官方课程咨询QQ：800073361
官方微信公众号：X学习计划
官网：www.akslearn.com
