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

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:\Desktop\axure and echarts\line-simple.html ），如下图所示： 第 6 步： Axure 界面中操作生成 html 文件 点击生成 html 页面按钮： 将生成 html 文件的目录，更改为上文创建的文件夹。如下图： 点击确认后，“axure and echarts ”文件夹中会存在 axure 生成的 html 页面和 html 页面。同时，会自动打开一个 html 页面，可查看效果， 如下图：