阿里云设计中心 | 浅谈DataV大屏设计的可能性

零源（顾一鸣） UXDA国际用户体验创新大赛 2019-08-12

零源（顾一鸣）**
短短几年的设计生涯中，一直在探索自己的可能性。 不会音乐的三维视效设计师不是一个好的体验设计师，从音乐再到设计到艺术，再回到设计的起点，在不断跨界中迎接挑战，希望和大家一起挑战未知。

全文共2383 字
阅读时间 6 分钟

电影中经常会出现一些科技感十足的画面，让人仿佛置身未来。现在很多电影里的idea已经变成现实，科技让人与人、人与物的连接更加高效，物联网的出现让我们身边的物体信息化，可视化技术的出现又让信息可视化。信息与人产生的交集构建出一个更大的信息生态，从而使人不再是这个世界独立存在的个体。在这个巨大生态中，阿里云作为一家全球领军的数字化转型公司，从应用创新的角度出发，围绕“互动”“未来”的维度，一直在探索如何让数据驱动中国。今年的重庆智博会上，DataV团队展示了基于数据可视化大屏的全新虚拟城市场景解决方案：DataV.LEGO，它将网页端的城市体量三维场景可视分析成为可能。

从功效上来说，数据大屏一般分为两种。第一种是为信息呈现而设计的大屏，第二种是为技术呈现而设计的大屏。
简单来说第一种更加实用，第二种更加好看（好看层面的技术点又会有很多细分领域，并不是传统二维层面美化那么简单）。而在一般的业务场景中，往往这两种方向更像一个天平，两者同时存在但是又有不同侧重。

举个例子，在公安业务中，业务方对大屏在刑侦方向的辅助功能有很高期待，数据大屏的功能性直接与追捕嫌疑人的成功率挂钩。这种情况下，大屏设计就更倾向于信息检索与呈现的准确率和传达率。
而在许多企业中，数据大屏存在的作用是为了展示企业形象和业务信息，这对视觉表现的要求更高。
在这两种不同的需求里，我们发现对现实场景的复刻能够同时满足技术与信息两个层面的需求。它既可以使信息的传达更加直观高效，同时又有更加丰富的视觉效果。因此，今年DataV着力打造真实场景在网页端数据大屏中的高精度还原。
以上大屏由DataV产品真实搭建

在城市场景构建的过程中，传统的合作方式缺乏产品落地的能力

项目启动初期，最让人头痛的一件事是：设计师和开发人员应该怎样进行合作，而这样的合作对设计师和开发人员又有哪些专业能力上的要求。以往的合作一般都是“设计师出初稿、开发人员还原、最后双方一同验收”这样的瀑布流。设计师习惯了提供一个设计图，让开发人员绞尽脑汁的去想办法实现。因此在很多设计师的固有思维中，三维元素还只停留在图纸或者效果图阶段，例如双十一的网页banner、海报等。
而在已经产品化的DataV中，有DataV.LEGO组件来支撑网页端三维城市渲染，传统的合作方式可能会让最终效果大打折扣。打一个比方，开发人员不懂三维场景中的布光原则（三点布光还是二点布光，天光无衰减而普通的灯光要有衰减，物理材质的折射率粗糙度的调到何种程度，全局光照在什么时候需要开启何时可以关闭等），而设计师也不懂开发人员对于不同效果组件的算法可以达到离线渲染器的什么程度（DataV中的光线强度调到什么程度和三维软件渲染器中的参数足够接近等）。
因此在研发初期，我们就决定转向游戏公司的合作模式，由设计师负责把控模型的质量，开发人员把控在线渲染组件的功能和效果。在流程末端，由两方一起沟通调整，以达到最后的效果。
传统的合作方式：
现有的合作方式：

设计过程就是合作的过程

**
设计的过程就是合作的过程，为了能够减少性能的消耗，让web端抗住城市体量的GPU消耗成为可能。我们借鉴了游戏开发的合作模式。设计人员对模型进行不同层次的光影和贴图的处理，并将光影AO等信息直接交付给开发工程师。然后在DataV产品中对场景进行调试。
而大屏场景的搭建中，作为设计人员，最关心的是城市效果。大屏的使用场景决定了其设计基调大多以暗色为主，因此在风格定义阶段我们让城市场景更多以夜晚进行呈现。一是因为夜景方便做光效更能体现出科技感，二是大部分大屏前方都会有操作人员或者演讲者等，在一些拍摄场景下，拍下来的画面不容易曝光过度，同时亮色调更容易造成光污染。
在大场景展示上，我们对城市主要区面和辅助区面进行了区分，并以不同的模型精度进行展示以减少性能消耗，同时在设计的角度来看也的确没必要。过于复杂的建筑容易提高聚焦的难度。
而在光影的效果呈现上，我们极力使场景变得更加自然。并且为了避免众多的建筑糊成一锅粥，使用随机灯光贴图贴在建筑表面模拟夜景建筑的万家灯火，使各个建筑彼此之间有具有一定的独立性。而在模型初期我们也针对不同的时间场景，光线方向强弱大小等，尝试了不同的贴图方式,并且在”three.js”拥有令人惊叹的表现力。
以上为从原始白模到不同光影下所呈现的效果

在云栖大会数据指挥中心平台上，我们针对AO贴图光影等进行了进一步的优化，获得了更优秀的画面效果。

基于DataV产品平台的LEOGO组件能做些什么？

**
DataV.LEGO几乎可以实现对大部分物理世界的模拟，支持摄像机景深、后期调色、环境光、大气模拟、地形建模等数十款视效功能模组。
同时针对于大屏设计的特性，开发出了一些如轨迹飞线、数据飞线、文字标签、动画标签等数十款比较实用的独有功能组件，这些组件在信息可视化的呈现中扮演着着巨大的作用。

新的技术带来的新的可能
我们也对不同量级的展示需求使用不同的引擎进行设计开发，目前有Ventuz为代表的一批专为可视化而生的可视化工具，也有我们独家集成的、基于WebGL技术方案的网页端DataV.LEGO引擎，在未来我们也没有放弃尝试新的开发引擎，比如Unreal4（虚幻4）等，以进一步提升更加真实的城市模拟解决方案。
日新月异的技术让设计有了更多的可能性，同时对设计师的能力提出了更高的要求，3D设计领域的能力也将更加细分，随着大数据和物联网技术的发展，对3D图形能力产品化的诉求正在进行井喷式爆发，而一个拥有产品化能力的设计师将会拥有更加广阔的成长空间，我们相信，未来已来。

**－THE END－