hrjava项目原型html_Axure如何制作高保真数据可视化大屏原型

在平时的工作中，我本是一名不太愿使用Axure交互功能的产品。在一次针对政府的较为大型的数据可视化项目中，由于涉及的可视化图表较多、远程沟通效率低等原因，就想找到一个元件库来高效完成高保真的可视化原型，但是在网络上却没有合适的满足需求的元件，于是就萌生了自己制作一套元件的想法，至此axChart的规划就开始了。

axChart是Axure和Chart的合称，表示是适用于Axure的Chart元件库。从axChart构想开始，就紧紧围绕元件的使用场景出发进行的设计，至始至终坚持这3大原则：

• 简单。axChart是给产品经理使用的图表元件，只要产品经理掌握各个图表的数据规则就应该会使用。因此，元件基于『参数设置』的方式来使用，不用关注各图表实现的细节，只需要掌握各图表的数据要求、配合各个参数的说明文档就能用。
• 快速。产品经理更多的精力在业务分析上，因此axChart一定要达到至少比常规的图表原型制作要『快』，因此元件库尽可能统一各图表风格，也可以统一修改主题来实现风格变化；其次，完全抛弃Axure自身的画笔工具，产品经理只需要提供『数据、数据、数据』，就能快速获得简洁美观的图表。
• 离线。一般公司内部的可视化图表通过草图或直接使用可视化工具即可，高保真的可视化原型一般用于外包项目，尤其是针对政府、医院、大型企业等客户，其演示环境多因为保密等原因，无法链接外网、甚至在断网环境中运行。而js的图表元件多基于echarts或antv开发，需要依赖网络资源，所以解决离线环境的演示需求，是元件核心的功能之一。

1.axChart制作可视化原型的步骤

1.1 安装元件库

axChart是基于Axure RP8制作的rplib格式的元件库，所以和普通元件库的安装方法一样。可以直接在Axure软件中载入元件库，也可以把rplib元件复制到Axure安装目录的元件文件夹下（一般是Axure安装根目录DefaultSettingsLibraries）。

安装后，在元件库窗口就可以像普通元件库一样，把元件拖到『页面编辑区』使用即可。

1.2 制作原型

当完成原型需求分析、明确可视化页面布局和图表组成后，就可以利用axChart元件进行高保真原型的制作。axChart元件都支持用户修改自己的模拟数据和样式参数设置，使用的方式如下：

知乎视频​www.zhihu.com

1.2.1 将元件拖入页面编辑区

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

1.2.2 修改元件长宽大小

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

1.2.3 设置自己的模拟数据

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

1.2.4 设置自己的个性化样式

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

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

1.2.5 调整图表封面

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

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

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

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

axChart by pmlab | Axure RP动态可视化图表元件库​www.pmlab.top

2. 离线使用

离线演示是axChart高保真可视化原型的核心场景。axChart开发了相应的离线包，可以和Axure的安装文件整合在一起，离线包安装后，用户不需要再关注离线的问题（一次安装，无感使用），不论是预览还是导出HTML，系统都自动包含了离线包，在断网环境会使用离线包js进行演示，在连网环境会自动使用线上js资源进行渲染。

离线包与Axure整合的核心逻辑是：把离线包放在Axure的资源目录中，在Axure的资源js中加上加载离线包的js代码，这样生成的Axure原型就可以调用离线包了。以mac为例，安装离线包的步骤为：

2.1 找到Axure的安装目录

Axure版本不同、操作系统不同，Axure的安装目录和目录结构略微不同，核心是找到Axure的安装目录。在Mac电脑上可以在应用程序中，右键『显示包内容』打开安装目录。

2.2 修改资源js文件

在安装目录的Resource/DefaultSetting/Portotype_Files/resources/scripts目录下有资源文件，不同操作系统该路径略微不同，但最后都有一个scripts文件夹，用文本编辑器打开里面的axutils.js或prototypePost.js文件。

打开js文件后，复制以下代码到js文件的最后:

需复制进去的内容如下：

function 

2.3 置入离线资源包

在2.2所在的同级目录下，把axChart提供的离线资源包（axc文件夹），复制到该目录下，看起来像../script/axc/axchart_o.js这样的目录结构。

至此，离线包就安装完成。重新打开Axure，制作原型并预览或导出HTML，只要在断网的情况下，系统会自动加载离线资源进行图表的运行和演示。生成的HTML打包发给其他用户，也可以在离线的环境中演示。

axChart来自于实际项目，围绕产品经理在制作高保真数据可视化原型的实际场景，在一些细节处理上，花了很多的心思，比如配置项设置、中文别名（因为中继器表头不支持中文）、图表与原生组件的交互、容错提示等等，尽可能让产品经理能够『清晰、高效」的使用它完成高保真数据可视化原型的制作。欢迎大家使用axChart应用到工作中，如果有更多的需求或使用建议，也将在以后版本中迭代优化。