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

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

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