2.5D图形设计经验谈

2.5D简介什么是2.5D？2.5D是一种介于2D与3D之间的设计方法，又被称为等角视图或者是伪3D，也叫做isometric，特点是没有透视与灭点，所有在现实中是平行线的在2.5D中依然可以显示出平行关系。早先常用于工业制图，后来被广泛应用于游戏设计、插画设计、文字设计与图标设计中。

一些典型的应用：

2.5D与2D和3D的区别是什么？与2D图标相比，2.5D能完全展示出一个物体3个轴向上的表面，使其在人眼中有一种立体的错觉，可以体现出纵深感与立体感；与3D相比，2.5D没有透视关系，换言之，一个2.5D的物体在现实中是不可能存在的，他只是对3D物体的一种艺术化展现形式。

为什么要用2.5D的形式来展示图标？从效果上来看，2.5D形式具有平面图形所不具有的立体感与纵深感，方便去表现一些复杂的、三维化的场景；同时，它又可以像平面图形一样用Ps、Ai等平面软件来绘制而不必使用3D建模，可以节约设计师的时间与精力；另外，2.5D图形不用考虑透视关系，对设计新手来说也更容易掌握、更容易统一设计风格。

3D与2.5D的视觉差异：

2.5D图标的画法Ai的3D效果这个是最简单的一种绘制方法，Ai提供了几个小工具可以傻瓜化输出2.5D图形：

我们要做的就是用好“凸出与斜角”、“绕转”、“旋转”这三个功能，下面以画一个2.5D的立方体举例：

凸出与斜角首先我们用矩形工具画一个正方形：

选中正方形之后点击“凸出与斜角”选项，出现设置弹窗，在上方的“位置”中选择“等角-左方”（因为我们用正方体举例，所以选其他几个等角方向也可以），勾选下方的“预览”，你会发现正方形变成了一个菱形，这就是2.5D立方体的左面了：

然后我们根据自己希望的立方体厚度，在“凸出厚度”中输入相应的数值（后面的“端点”相当于给不给立方体加盖），这样一个2.5D的立方体就画好了，你也可以在“更多选项”中调节立方体的光照方向：

绕转“绕转”这个功能类似于三维软件中的旋转成型工具，可以用一根线条沿一个轴线旋转一周生成一个“立体”图形。

首先绘制一条曲线：

选中曲线后点击“绕转”选项，出现设置弹窗，同样选择“等角-左方”，勾选预览，就会发现图形已经出来了：

下面还有“角度”与“位移”两个设置项，“角度”默认是旋转一周即360°，你也可以输入其他数值不把图形完全封闭；“位移”设置的是旋转轴距离剖面线的位置，类似于设置物体的“胖瘦”。

旋转这一项的功能与“凸出与斜角”基本类似，就不赘述了。

扩展外观用上述方法生成的2.5D图形是一个整体，如果要对他进行下一步操作就要用选中以后选择“对象”-“扩展外观”把图形解开，然后再解除编组就可以单独对某一面进行编辑了。

辅助线画法这种方法比较传统，但在大场景中辅助线有助于对齐不同的元素组件，让画面看上去规整一些。依旧是用立方体举例：

平铺辅助线这一步很简单，先平铺一组等距平行的平行线，再旋转60°和120°即可。

绘制图形接下来就是用钢笔工具沿着辅助线去勾出立方体的三个面就好了。

其他图形其他图形基本上也是依葫芦画瓢，比如三角形可以通过把正方形删掉一个角来生成：

圆形则需要通过“效果”-“风格化”-“圆角”来实现（不能直接拖图形上的圆角，不然会直接变成一个正圆）：

其他更复杂的图形都可以通过以上两种方法结合来生成。

其他软件推荐除了可以用Ai来画2.5D图之外，其他还有很多软件也可以用，下面介绍2个不太常见的软件：

Affinity Designer

这是一款类似Ai的矢量设计软件，它的好处在于可以直接生成带有吸附功能的斜辅助线，而且还能沿着2.5D的方向缩放图形，可以减少很多工作量。

Magicavoxel

这其实是一款像素风的建模软件，也可以调整成2.5D模式，用来画2.5D的像素风格设计就很合适，类似于“我的世界”。

2.5D在大屏中的应用2.5D图形在大屏中一般作为主视觉呈现，通过大量2.5D图标的组合很容易成为视觉的焦点，再辅以图表用作解释补充，就可以很好地讲清楚一个场景或一套流程。如果有需要也可以在上面添加描述或弹窗等交互性内容，更进一步则可以通过数据控制图形的结构、颜色等实时展示当前流程的运行状态，帮助筛选出错的步骤。

设想了一些常用的使用场景：工业企业工艺流程展示、某一产业的全景式展示、某一手续或项目实施步骤展示、与地图结合展示图上的元素等等。更多的使用场景也可以在工作中去寻找。

以下是一些搜集到的参考大屏设计：