移动支付|配色、布局、交互设计，大牌设计师的良心分享( 四 ) 随行付|第三方支付

由于动画这部分属于可视化中的辅助效果成分，具体的设计方法就不在文章中过多赘述，如果有兴趣可以去谷歌 material 设计中的 Motion 板块学习。

第二类交互动画可以用于模拟实物的运动，以及业务需求所需要的动效，使可视化大屏更加生动，展示方式多样。下图是我们做过的一些demo的动画效果案例为参考：

综上所述，在可视化中合理的运用微动画，很容易引起观赏者的注意力。有重要信息需要观赏者快速捕捉时，可以选择微交互动效吸引用户的注意力。此外，微交互也经常用于增加设计的趣味性，提高观赏者的兴趣，使观赏者产生情感上的共鸣。
传统的数据可视化以各种通用图表组件为主，不能达到炫酷、震撼人心的视觉效果。优秀的数据可视化设计需要有炫酷的视觉效果，让可视化设计随时随地脱颖而出。这时用三维元素的添加制造出空间感可以大大的加大画面层次感，且可以多维度观察，每个角度可能会产生震撼的视觉体验。下图是我们做过的一些三维设计案例：

然而，三维的web端场景设计有一定的局限性，因为web端受性能影响，模型只有轻量的模型才可以显示流畅不卡顿。所以设计师在设计时需要严格控制面数与贴图量，以保证流畅。另外， web端的性能也无法带动庞大的渲染器，所以我们采用了使用 color 贴图来表现模型的光影和质感。通过三维的项目经验我们也总结了一套三维设计流程：
>准备阶段：理解需求，搜集相关资料，建模统计列表
>开始建模：初步轮廓，模型细化，拓扑低模
>展UV
>贴图绘制：烘培AO光影信息，材质信息。 PS贴图绘制
>搭建场景：导入 Hightopo 引擎，搭建出场景，摆放二维图标
>氛围调整：添加阴影，环境光等效果。模型层级关系，命名与标签绘制。
有许多的大屏设计案例都会涉及二维和三维相融合，需要整体的考虑风格一致。风格一致可以从色调与元素使用样式来做到统一，没有违和感。我们直接展示案例来说明：

这是我们做的一个招聘 demo ，整体用的是插画风格，二维与三维的融合都使用了插画风的元素，达到统一的效果。

这是我们做的一个风机的案例，以线框的风格为主， UI也配合了线框状态的风机模型样式，加上整体颜色的统一，就可以达到一个不违和的效果。
如果仔细看上方招聘demo的案例会发现在展开的地图界面里有一些 2.5d 的元素， 2.5d 的设计属于哪种界定呢？其实 2.5d 的学术名是轴测插画或轴测插图。轴测插图的意思顾名思义，是一种单面投影图，在一个投影面上能同时反映出物体三个坐标面的形状，并接近于人们的视觉习惯，形象、逼真，富有立体感。也就是说用二维的制作方式画出物体的三个面。富有立体感。但轴测插画需要找透视面，对设计师的空间想象能力要求很高，在制作的时候的难度和时间成本因图形的复杂程度而定有些会高于三维的工作量。下图是我们做过的一个 2.5d 的案例：

还有一种类型的图，如下图，许多读者和客户看过后会觉得，这种效果看起来也很立体呀，是不是也是属于 2.5d 呢？

其实这种并不属于 2.5d ，如果我们仔细观察每个图标，会发现我们只能看见正面一个面，而无法看到三个面，所以这种我们称为：写实风 2d 图标。写实风 2d 图标是通过调图形的渐变颜色来达到一种立体的效果，但是在绘制时不用找透视，只用绘制正面一个面就可以，所以制作起来相较于 2.5d 而言就比较简单，属于 2d 制作范畴的工作量。所以 2.5d 的界定范围并不是以写实的效果而定的，而是以物体透视所展出的观测面数而决定的。 2.5d 之所以看起来立体是因为展示的面数多，而写实风 2d 之所以看起来立体是通过颜色渐变形成的一种视觉效果，两者虽然看起来不容易分别但是在设计师绘制的方法和工作量上却大大不同。