3D数据可视化,如何进行设计?

首页 / 文章 / 界面设计 / 发布时间:2019-09-30 16:17:06

前言:

最近身边朋友很多都开始涉及数据可视化的领域,因为有越来越多企业政府需要去通过这样的表现形式来凸显自己的政绩或者实力。因此就有很多人问我,数据可视化到底是什么?到底需要具备什么样的能力?到底工作内容是什么?下面我就简单聊聊我的看法


3D数据可视化,如何进行设计?-58UI大屏设计

阿里云 DataV


因为数据可视化的表现形式现在也2D和3D(这里的2D和3D只是通俗的叫法,不具备行业普遍性,只是作为文章中的分析,进行表达),在网上还是有很多关于2D数据文章和教程,我觉得还比较具备行业的普遍性,所以今天我们就来聊聊3D数据可视化。


现状:3D可视化目前来说还是属于一个比较小众的设计群体,而且因为主要面对的客户大多是ToG或者ToB的项目,项目保密工作做的很好,对外发声较少,因此也会显得特别神秘,行业门槛也相对较高。但是由于政府和企业对于这类项目的需求大,再加上城市智慧建设、军事电子沙盘、智慧交通,项目多且广泛,也就导致了这类设计师较为稀缺。


3D数据可视化是什么?


3D数据可视化,如何进行设计?-58UI大屏设计


通常所表达的就是通过3D的游戏引擎(例如:Unity3D)制作出来的数据可视化项目,他能够更直观的还原出所要展示数据可视化的真实场景,并且能够实时接入数据,使得整个项目更具立体、更具有科技感。使得项目在面对复杂操作时能灵活应对。


3D数据可视化的UI设计师需要具备哪些能力?

在我看来,虽然也是UI设计师,但是他和大众认知中的UI设计师又有很多不同,比如承载设计的屏幕可能大到16m*9m、小到只有iPad的尺寸,因此很考验设计师对不同尺寸屏幕下的设计方法。而3D数据可视化更多是向空间、建模形式的表达,因此对于三位的理解、空间的交互转变都尤为重要,我在下面来一一拆解需要哪些能力~


3D数据可视化,如何进行设计?-58UI大屏设计

FUI 风格


视觉能力:

在设计当中,视觉也是最基本的能力,其主要满足这个数据可视化当中对于场景、物体的视觉能力、数据图表的视觉效果,对于地图、建筑、数据的视觉表达。通常风格以科技感的风格为主,因此考验的更多是我们设计师的想象力、对于科技产品的表达能力,因此对于FUI比较重视,如果平时能够多看科幻电影能够对这方面能力也会有所提升~


数据可视化能力:

首先你需要具备很强的数据表达能力,即将用户想的数据现象通过你的数据化设计进行表现出来。同时需要去理解每个数据之间的真正含义,然后再去设计,因此对于图表的理解必须更加深刻。再次因为是通过3D的手法实现,你所更需要了解是我设计的这个图表,2D和3D之间到底存在什么差异,既然我用了3D,在图表层面上怎么和2D图表拉开差距、有所区别,这是我们需要去认真思考的。


三维交互能力:

三维软件的交互和二维不同,虽然在移动端大家都提出了Z轴的概念,但是和现如今所需要的可视化的项目不同。


建模能力:

因为在实际工作当中,很多建筑物不能够靠你的三维想象来进行设计稿的制作,因此通常我们也会使用c4d这一类的三维建模软件,这样能够保证快速出设计稿的同时,对于物体的表现又能非常到位。


3D数据可视化的UI设计师产出是什么?你是怎么落地的?


对于接触数据可视化的UI设计师来说,最关心的莫过于这个项目你们是怎么落地。因为每个公司要求不同,我说的只是我们自己的做法,只是想说出来和大家分享分享~


一般我们产出的会几个东西:设计静帧图(包含静帧图、标注、切图)、视频demo、交互流程(看项目)


基本流程:

这个是必须要的,首先项目会根据我们所出的设计静帧图进行和需求方进行对接,确定他们想要的效果和设计静帧稿上是否一直。如果双方理解存在差异,就会按照要求进行修改。修改完成后会将设计静帧稿交到建模师手中,3D建模会根据你这个静帧图进行建模。当然,我们设计师是不需要制作模型的,如果会,当然也是更好,能够方便建模师进行快速建模。但是因为每个项目的要求不同,对于我们这种设计师来说时间相对很紧。对于我们来说需要进行快速的出图,从而能够和需求方进行方案的确定。


设计静帧图:

他最大的作用是和需求方进行沟通,以及和建模师进行效果确定。还有后续验收时会根据静帧图进行效果评定~


标注:

字体、字号、颜色、位置、基本数据参数,标注和之前大家熟悉的思路基本一致。


切图:

icon、图片,开发不能通过代码进行实现的


视频demo:

会根据项目的难以程度进行制作,通常在较大项目中,会有时间进行视频demo的制作,同时demo也会给需求方、开发进行很好的演示,使得整个项目在开发当中能够更加明确。


交互流程:

但是我们需要考虑到的是设计后整个效果是如何,以及设计后整个点击过后的交互,因此在基本方案确定后,静帧图会和交互方案