Axure教程:高保真数据可视化原型
itomcoil 2025-05-24 14:44 3 浏览
本文将介绍如何制作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:\Desktop\axure and echarts\line-simple.html），如下图所示：
第6步：Axure界面中操作生成html文件
点击生成html页面按钮：
将生成html文件的目录，更改为上文创建的文件夹。如下图：
点击确认后，“axure and echarts”文件夹中会存在axure生成的html页面和html页面。同时，会自动打开一个html页面，可查看效果，如下图：
这样，我们就通过一个简单的例子，在Axure中实现了数据可视化效果。
笔者在本文中分享的是实现的方法，但是实际应用过程中，通过一款数据可视化产品的视角去实操，会让你有意想不到的效果，特别是在Axure颜色、布局、交互等能力的加持下。
作者：鱼日，公众号：issnail
本文由 @鱼日 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
相关推荐
- 点过的网页会变色?没错，这玩意把你的浏览记录漏光了
-
提起隐私泄露这事儿，托尼其实早就麻了。。。平时网购、换手机号、注册各种账号之类的都会咔咔泄露，根本就防不住。但托尼真是没想到，浏览器里会有一个看起来完全人畜无害的功能，也在偷偷泄露我们的个人隐私，而且...
- Axure教程:高保真数据可视化原型
-
本文将介绍如何制作Axure高保真数据可视化原型，供大家参考和学习。高保真数据可视化原型设计，称得上是Axure高阶水平。数据可视化在原型设计中是一个重要的分支，但是对于Axure使用者具有一定要求。...
- Flutter web开发中禁用浏览器后退按钮
-
路由采用的go-router路由框架：finalrootNavigatorKey=GlobalKey<NavigatorState>();finalGoRouterrouter...
- jQuery 控制属性和样式
-
标记的属性each()遍历元素：each(callback)方法主要用于对选择器进行遍历，它接受一个函数为参数，该函数接受一个参数，指代元素的序号。对于标记的属性而言，可以利用each()方法配合th...
- 微信小程序入门教程之二:页面样式
-
这个系列的上一篇教程，教大家写了一个最简单的Helloworld微信小程序。但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页...
- 如何在Windows11的任务栏中禁用和删除天气小部件图标?
-
微软该公司已在Windows11的任务栏中添加了一个天气小部件图标，作为小部件的入口点。这个功能与之前Win10上的新闻与资讯功能相同，但是有的用户不喜欢想要关闭，不知道如何操作，下面小编为大家带来...
- CSS伪类选择器大全:提升网页交互与样式的神奇工具
-
CSS伪类选择器是前端开发中不可或缺的强大工具，它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器，并通过代码示例展示其实际应用场景。一、基础交互伪类1.超链接...
- 7个Axure使用小技巧
-
编辑导读：对于Axure原型工具，很少有产品经过系统学习，一般都是直接上手，边摸索边学习，这直接导致很多快捷操作被忽视。笔者在日常工作中总结出以下小技巧，希望对各位有帮助。之前整理了2期Axure的...
- JavaScript黑暗技巧:禁止浏览器点击“后退”按钮
-
浏览网页时，当从A页面点击跳转到B页面后，一般情况下，可以点击浏览器上的“后退”按钮返回A页面。如果进入B页面后，B页面想让访问者留下，禁止返回，是否可以实现呢？这简直是要控制浏览器的行为，虽然有些邪...
- 对齐PyTorch，一文详解OneFlow的DataLoader实现
-
撰文|赵露阳在最新的OneFlowv0.5.0版本中，我们增加了许多新特性，比如：新增动态图特性：OneFlow默认以动态图模式（eager）运行，与静态图模式（graph）相比，更容易搭建网...
- Python计算机视觉编程 第一章 基本的图像操作和处理
-
以下是使用Python进行基本图像操作和处理的示例代码：使用PIL库加载图像：fromPILimportImageimage=Image.open("image.jpg"...
- PyTorch 深度学习实战(31):可解释性AI与特征可视化
-
在上一篇文章中，我们探讨了模型压缩与量化部署技术。本文将深入可解释性AI与特征可视化领域，揭示深度学习模型的决策机制，帮助开发者理解和解释模型的内部工作原理。一、可解释性AI基础1.核心概念特征重要...
- 学习编程第177天 python编程 富文本框text控件的使用
-
今天学习的是刘金玉老师零基础Python教程第72期，主要内容是python编程富文本框text控件。一、知识点1.tag_config方法：利用某个别名作为标签，具体的对应标签的属性功能配置在后面参...
- 用Python讓電腦攝像頭實現掃二維碼
-
importsys#系統模組，用來存取命令列參數與系統功能importcv2#OpenCV，處理影像與相機操作importnumpyasnp#Numpy，用來處理數值與...
- 使用Transformer来做物体检测
-
作者：JacobBriones编译：ronghuaiyang导读这是一个Facebook的目标检测Transformer(DETR)的完整指南。介绍DEtectionTRansformer(D...
- 一周热门
- 最近发表
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)