Axure 原型图设计：高保真数据可视化原型.pdfVIP

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

第1步：拖入内联框架（InlineFrame）

在Axure操作界面中，拖入一个InlineFrame（中文：内联框架）。

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

Axure本身可生成HTML页面，本质上而言，只要带有实例图的为

HTML文件，并可正常访问即可。至于HTML是以何种方式制作生成，

不做限制。

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

点击进入图后，所示页面如下图。左侧为折线图效果对应的代码，右侧

是折线图的效果。可以在左侧修改代码，运行后可在右侧查看修改后的

效果（此处不做赘述）。

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

使用任意一种代码编辑器（笔者喜欢用komodo），打开html页面，

修改html页面代码中自带的api。如果发现运行后html报错api过期

时，需要自行创建api，将其进行替换。

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

创建一个新的文件夹（本文命名其为：axureandexcharts），文件夹

的位置没有要求。将下载的HTML页面，放置在文件夹中。

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

双击拖入Axure操作界面的内联框架（InlineFrame），选择“linkto

anexternalurlorfile”（选择一个外部的urd或文件），输入HTML

页面所在的位置及名称（如本文：D:\Desktop\axureand

echarts\line-simple.html），如下图所示：

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

点击生成html页面按钮：

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

点击确认后，“axureandecharts”文件夹中会存在axure生成的html

页面和html页面。同时，会自动打开一个html页面，可查看效果，

如下图：