Aure 原型图设计高保真数据可视化原型.docx

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

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

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

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

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

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

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

10:13:06 茬表己生成，戏ms

T O

T

3

iofil= {

戏 华；｛

七ype:. categor-ynJ

4

5 }JJJ

ata ::

[11Mnn1JJ 1Tue1J Ibl动＇，叮t.uI..D IfriI, “5.at?心 5u矿］

6T

？

8

91T

16l

11

12

13 }

14

y躯is;｛

七ype: ?va1lue1

}J1

.serj芒s: [{

data [82.8.,9,32, 901, 93生 129a, 1338!I13,2

七ype::?1!ne1

}]

0]，

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

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

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

创建一个新的文件夹（本文命名其为：axureandexcharts），文件夹的位置没有要求。将下载的HTML页面，放置在文件夹中。

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

双击拖入Axure操作界面的内联框架（InlineFrame），选择“linktoanexternalurlorfile”（选择一个外部的urd或文件），输入HTML

页面所在的位置及名称（如本文：D:\Desktop\axureandecharts\line-simple.html），如下图所示：

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

点击生成html页面按钮：

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

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