17 3D效果：别人的数字大屏很酷炫，你的产品为什么实现不了？
你好，我是汤圆。今天给你分享一个关于数字大屏的有趣话题，为什么很多设计师总看到别人做的大屏特别酷炫，而自己就是做不出来呢？
酷炫的数字大屏效果，对于设计师的吸引力是特别强的。特别是在2015、2016年左右，大部分B端产品都是扁平的UI风格，和手机UI非常类似。但B端产品的客单价很高，功能也相对强大，所以设计师就总想直观地给客户体现一下产品的强大功能，营造一个不错的宣传与营销效果。于是，数字大屏就随着大型B端产品火热起来了。
但很多设计师都遇到了我们最开始说的这个问题：这些非常酷炫的大屏，我应该要怎么才能做出来呢？
今天我给你分享一些非常有效的方法，让你可以快速推动大屏效果落地。
小白选手，怎么快速出效果？
如果你刚刚进入B端行业，完全没有做过大屏，也不会一些复杂的3D软件，那一定会感觉很困难。因为不会3D软件，连大屏的效果图都没有办法做出来，研发更不知道该怎么做效果。一些团队会选择找外包团队直接制作，我们也有过类似的阶段，但是这个费用非常高，有些大概要几十万。
所以，小白要面临的问题就是：怎么才能用更低的预算，更快地做出优秀的效果呢？
其实市面上已经有很多公司识别到了这个需求。这些公司基于自己的技术能力与相关案例，总结出了很多的案例和模板，也做出了Web端的B端SaaS产品帮助你解决这个需求。其中阿里也做出来一个不错的平台，叫做 ThingJS，里面基于制造业、智慧城市等等这些场景提供了一些比较基础的模板。如果你的要求不是特别高，场景也比较通用，那么这样的模板就是最佳的选择，既可以做出不错的效果，成本也会低很多。
会一些3D软件，怎么做得更好？
单一的内容对于B端来说意义不大，那和大屏互动呢？在 大屏设计 这节课中，我分享过如何做出更有价值感的大屏，如果你已经掌握了一些3D软件，那么结合C4D和Octane render就可以和研发配合输出一些更好的效果了。
实现思路
这里有一个大家经常遇到的难题，3D软件输出的最终内容都是图片或视频，无法和产品信息产生互动，怎么解决呢？
这个问题我也遇到过。在探索了多种方法后，我总结了一个基础的逻辑，可以帮助你 在用3D软件做出好效果的基础上，再实现和产品的数据信息产生互动。在明厨亮灶早期的Demo产品中，我们就使用了这个方法。
在2017年的时候，Web端展示大屏特效的技术还不是很成熟，会做出优质效果的研发伙伴也比较少。所以在明厨亮灶的Demo尝试中，我们在视觉设计输出完成后采用了帧序列的形式，输出了比较优质的效果给到研发伙伴，实现了高质量的视觉效果。
另外，我们还需要 在视觉帧动画上与真实的数据信息联动起来。因为明厨亮灶是基于摄像机画面智能识别一些内容并进行预警的，比如厨师没有戴口罩、厨房有大面积积水等问题，一旦某个摄像机识别到了，就会对监控人员进行提示。所以，我们要在3D的效果视频中实现信息与3D动画的实时对应。
我们最终采用了SVG的轨迹形式。在Figma中，我们基于渲染的3D动效图片中几个摄像机的位置，分别对应绘制了摄像机运动的路径（这个过程是手动的），然后按照3D厨房旋转的速度进行计算，让这些摄像机的轨迹与3D画面中摄像机的轨迹相对应，就实现了3D渲染视频与真实的数据对应联动的效果。
最终的产品在展厅上线后带来了非常不错的反响。有很多来看展览的人都在等效果播放，还有很多参会者希望能发一份录屏给他们回去做产品介绍，甚至有些医院的技术团队也希望购买这样的UI来展示自己的产品技术。
这样的设计与技术探索在B端行业中是非常有效的，它能为你的产品带来很不错的营销效果，甚至是一些潜在的成交机会。作为体验设计师，你更应该掌握好这些能力，让体验更好地赋能商业价值。
实现工具
这里也给你推荐一些不错的3D工具。大家常用的是Cinema 4D，这个软件的用户建模非常适合B端体验设计师或者以往从事UI的设计师，相对来说更好上手。
但C4D本身的渲染效果不太好，所以现在大部分设计师都会配合OC渲染器（Octane Render）进行渲染。OC渲染器的光线较为柔和，所以备受UI设计师喜爱，但是它对Mac系统的支持不是很好，对Windows相对更好一些，要求的电脑性能也很高，所以很多设计师上手也比较难。
Mac电脑的伙伴也可以选择C4D+Arnold渲染器或者Blender软件，Blender对Mac电脑更加友好，效果也还不错。不过这两个软件国内的教程都比较少，需要你耐心上手学习。
近些年市面上也开始出现了一些在线渲染器，你可以持续关注，相信技术的持续进步会让优质效果的制作变得越来越简单。
进阶选手，怎么推动开发做出最好效果？
前面提到的大屏互动方式也有一定的局限性，它只能与单个的数据互动。如果你想再进一步，做出更优质的大屏效果，那么就要学习更高级的工具Unity。Unity是一个3D的虚拟引擎，以前主要用于制作电影与游戏，像你熟悉的很多科幻电影都是用Unity制作的，所以想做更有科技感的大屏，学会Unity就能完全搞定你想做的一切效果，而且它也能直接和你产品具备的所有数据对接，让全部的数据都“活过来”，做到非常即时的数据互动展示。
当然，对于大部分设计师来说，学习Unity是有很大难度，因为里面的逻辑相对复杂，并且功能也非常多，并且还没有专门针对设计师教程。我总结了一些给设计师的经验，可以给你一个快速学习的路径。
学习的过程中， 第一，要学一些基础案例教程 。 大概10-20分钟的Unity视频教程，看完就可以快速上手了，这些教程在B站非常多，如果你是刚刚入门，搜索unity入门学习，可以找到很多不错的教程。而你已经入门了，但不了解怎么做大屏效果，只需要搜索unity+数字大屏，就能找到一些非常不错的教程。
第二，学会使用素材库 。 unity有一个非常非常强大素材库，叫做unity hub，里面不管是模型还是材质都有非常多的案例，你可以直接搜索并下载使用，很多还附有教程，这会大大缩短你学习和制作好效果的时间。
第三，学习在Unity中绘制UI效果 。 Unity是一个非常强大的工具，可以直接和研发伙伴的数据打通，而且你在unity中制作出来的效果，就是产品最终呈现给客户看到的效果。学习如何在unity中把UI效果做出来，后续就可以直接在Unity中输出效果图，而不用再和研发伙伴校对一轮了。
第四，如果你还想进一步，做出超级酷炫的效果，那么你就要学习一个最强大也是最难的内容-shader（着色器） 。 Shader简单理解就是你在3D软件中用的材质球，但是要更加强大一些。它定义了物体在渲染过程中相应的光照、阴影、纹理和其他视觉效果，可以直接做出你在很多大屏中看到过的酷炫流光特效。
但是Shader的学习对于设计师来说是非常难的，甚至对于很多研发伙伴都有一定难度。所以这部分不建议大家自己去学习，而是寻找一些优秀的研发伙伴进行合作。
在明厨亮灶的项目之后，我们的体验设计团队进行了技术与能力上的升级，把Unity技能给补充了进来。之后做的智慧城市项目，我们就应用了Unity的相关技术，做出了更加优质的效果。并且通过这类比较有技术难度的实现效果，可以让同行的竞争者难以模仿，在设计上也搭建一些竞争壁垒，让我们的高客单价B端产品在展厅中脱颖而出。
总结时刻
如果你看到别人做的大屏特别好，自己想做却又做不出来，那么可以基于你对软件的了解对症下药。
如果你是从来没有做过大屏的小白选手，那么像ThingJS这样的在线3D模板库是最合适你的选择。并且TingJS的模板都是Web端的，开发伙伴也可以使用，只需要挑选你觉得不错的模板，然后进行改良，短时间内就能低成本做出酷炫的效果。
而如果你已经会了一些3D软件，那么要记得先参考前面大屏设计那节课讲的方法，设计出决策者认为高价值的设计效果图。然后再用3D软件输出渲染好的视频或图片帧序列，去结合使用SVG这样的路径动画，让开发伙伴根据SVG动画同步数据与3D效果的动画内容，制作出数据信息与动画对应优质效果。最终呈现的就是一个看起来是有真实数据，效果超出大部分友商的优质数字大屏了。
关于3D软件的学习，我推荐你使用C4D软件来建模，再加上OC渲染器渲染，而如果你正好也和我一样，使用的是Mac电脑，那么Blender或者一些在线渲染器也是不错的选择。如果你想深度学习，成为做出最顶尖大屏效果的大牛，那我建议你学习Unity引擎的使用方法，它可以帮助你实现任何优秀的效果，甚至堪比电影大片，只是学习难度也不会小。
解惑ToB体验设计
你觉得B端设计师应该学习制作数字大屏的能力吗？为什么？
欢迎你在留言区和我互动。如果觉得有所收获，也可以把课程分享给更多的朋友一起学习。我们下节课见！