大屏数据可视化产品原型demo给客户展示,用什么工具好?

大屏幕大数据,比如运维数据,等。产品原型定了后,想给客户展示效果,用你什么工具好?——8块4k以上屏幕拼接或者更大 比如keynote或者PPT做?大…
关注者
13
被浏览
13,977

6 个回答

如果用Axure制作,模拟数据来展示动态的可视化原型,可以使用:axChart元件库。

一般来说不必关注物理分辨率,页面投屏后会按照比例展示的。axChart制作高保真的数据可视化原型就像普通元件一样简单,并且通过中继器可以修改模拟数据和样式调整,而且支持离线的环境演示。不妨体验一下。

(1) 将元件拖入页面编辑区

在元件区选择正确的图表,并拖放到页面编辑区。

(2) 修改元件长宽大小

直接修改元件样式属性中长与宽,图表生成后会自动适应元件的长与宽。因此,可以通过长宽调整,方便地进行各图表的布局,生成的图表会自适应大小进行展示。

(3) 设置自己的模拟数据

每个元件都有data中继器,里面设置该图表的模拟数据,你可以任意修改数据来实现自己想要的图表效果。当然,每个图表也都有默认的数据,用户不需要设置也可以展示默认图表。

(4) 设置自己的个性化样式

每个元件都有conf中继器,里面有该图表的样式参数,一般使用默认的样式设置即可。用户可以根据自己的个性化样式要求,进行样式调整。各个样式参数在使用文档中都有详细的描述。当前,样式的设置有有限的,高保真原型实质上还是『原型』,一些更为个性化的效果可以通过需求文档说明,指导开发同学运用到实际项目中。

在样式的设置了,axChart站在用户的角度,已经统一要所有元件图表的风格,使得搭建的可视化解决在风格上保持一致,从而获得较好的视觉表现。

(5) 调整图表封面

一般情况下,完成1.2.4就可以实现个性化的图表了。由于axChart都是js渲染的高级动态元件,因此只有在预览或者导出HTML后才可以看到图表效果,因此,在打开页面时会存在一瞬间的『灰色框框』的布局样子。对于我来说,我称之为『骨架』,觉得还是可以接受的。但是有些用户不想要该灰色布局的存在,那么可以有2种方式要避免:

其一,可以设置各个元件默认隐藏,然后0.5s后自动展示;

其二,可以设置wrap层的背景图片,把生成的的图表保存为图片然后设置到wrap背景图上(axChart生成的图表可以直接右键另存为图片哦~)。

重复以上步骤,即可快速完成数据可视化的高保真原型,用于对外的讲解更加的逼真;并且,制作完成后,自己对数据的需求也更加的清晰。一份高保真的可视化原型效果可参考:

首先,我是一名数据可视化产品经理,以免您觉得我滥竽充数。

这样的演示场景有过类似经历,希望可以帮到您。

首先,确定所需定制的屏幕真实情况。分辨率对于设计师以及前端适配都是比较重要的,关系到演示内容的分辨率问题。对于显示设备,需要确定是LED还是显示屏的拼接屏(边框间距,间距大小)会关系到一些细节处理。

其次,在您确立好需要的demo情况,分为静态展示和动态实时数据两种,当然动态实时数据可以是模拟数据,只做功能性展示。如果静态展示,可以将效果图或框架图或原型搞按设定分辨率投屏展示。这种情况下展示内容是较为方便设定的,会根据实际尺寸显示,不会发生形变。对于动态展示,分为cs架构或bs架构,这也是需要进行分辨率设定,使用场景由于屏幕问题需要定制开发,自适应效果会不可控。

这两点都是要保证所需展示demo的实际使用屏幕分辨率。实际展示过程中可以通过调节大屏的分辨率来降低一些功耗,比如所需展示尺寸为10000*50000,可以降低分辨率保证长宽比例不变的情况下展示,系统会自动填充,且不会造成图像变形。

最后,针对您所需的展示软件,静态展示建议使用ppt即可,demo展示主要针对功能区域讲解,图片在该软件下会被缩放,只能切换软件进行展示。如果是动态展示,浏览器会自动适配屏幕分辨率,按照之前设定好的比例进行演示,动态展示可使用Axure进行展示。


静态:ppt,相册切换配合,意在说明问题,展示结果

动态:浏览器或exe文件,如需展示交互使用Axure编辑,浏览器打开即可。