快好知 kuaihz

Axure教程:高保真数据可视化原型

本文将介绍如何制作Axure高保真数据可视化原型,供大家参考和学习。

高保真数据可视化原型设计,称得上是Axure高阶水平。

数据可视化在原型设计中是一个重要的分支,但是对于Axure使用者具有一定要求。清晰的数据可视化原型可以减少与需求方和研发工程师等的沟通成本,且可具象。

Axure本身具有高级交互的能力,结合数据可视化的方式,以低成本的方式,达到预期的演示的效果,本文介绍如何制作Axure高保真数据可视化原型。

第1步:拖入内联框架(Inline Frame)

在Axure操作界面中,拖入一个Inline Frame(中文:内联框架)。

第2步:选择带有实例图的HTML页面

Axure本身可生成HTML页面,本质上而言,只要带有实例图的为HTML文件,并可正常访问即可。至于HTML是以何种方式制作生成,不做限制。

第3步:修改实例图样式,编辑HTML页面代码

点击进入图后,所示页面如下图。左侧为折线图效果对应的代码,右侧是折线图的效果。可以在左侧修改代码,运行后可在右侧查看修改后的效果(此处不做赘述)。

点击页面右下角的“Download”按钮,下载折线图的HTML页面

使用任意一种代码编辑器(笔者喜欢用komodo),打开html页面,修改html页面代码中自带的api。如果发现运行后html报错api过期时,需要自行创建api,将其进行替换。

第4步:创建一个新的文件夹

创建一个新的文件夹(本文命名其为:axure and excharts),文件夹的位置没有要求。将下载的HTML页面,放置在文件夹中。

第5步:使用Axure内联框架链接文件夹中HTML页面

双击拖入Axure操作界面的内联框架(Inline Frame),选择“link to an external url or file”(选择一个外部的urd或文件),输入HTML页面所在的位置及名称(如本文:D:Desktopaxure and echartsline-simple.html),如下图所示:

第6步:Axure界面中操作生成html文件

点击生成html页面按钮:

将生成html文件的目录,更改为上文创建的文件夹。如下图:

点击确认后,“axure and echarts”文件夹中会存在axure生成的html页面和html页面。同时,会自动打开一个html页面,可查看效果,如下图:

这样,我们就通过一个简单的例子,在Axure中实现了数据可视化效果。

笔者在本文中分享的是实现的方法,但是实际应用过程中,通过一款数据可视化产品的视角去实操,会让你有意想不到的效果,特别是在Axure颜色、布局、交互等能力的加持下。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:高保真  高保真词条  可视化  可视化词条  原型  原型词条  教程  教程词条  数据  数据词条  
原型

 Axure:不用动态面板就能做好...

初入行的产品新人,想向大家分享一个做手风琴的简单办法。第一步:在Axure里创建三个矩形,一个图片,一个占位符和一个列表框(可根据实际情况替换)。第二步,给这六...(展开)

原型

 Axure制作:页面上下滑动时的...

在移动端页面上,用手上下滑时,超过一定向上滑动时,菜单栏能有吸顶效果,如何用axure实现呢?作者在最近在手机移动端的时候,有一个动画,希望达到效果:用手上下滑...(展开)

原型

 Axure教程:中继器实现列表到...

作为一个产品经理如果不会使用Axure估计都不好意在人前讲自己如何如何了得,但光会用Axure做线框图就够了吗?显然是不够的,在产品设计中很多时候我们需要使用到...(展开)