axure 动态(axure效果图)

编辑导语：在数据可视化图表中，玫瑰图是常见的图表类型之一。通过玫瑰图的展示，可以更清晰的观察数据。那么，怎样才能用Axure做出玫瑰花图呢？本文介绍了用Axure制作高保真动态玫瑰图的方法。让我们看一看。
Rose是数据可视化分析中常用的分析图表。通过丰富多彩的图表形式，数据可以更加令人印象深刻。
因为Axure自带的组件库中没有玫瑰图，所以本教程主要介绍如何制作高保真动态玫瑰图，供我们以后使用。
1.制作完成后，应该有以下效果：根据表格数据自动生成相应的玫瑰图；加载时，系统自动完成动态生成玫瑰图的效果；当鼠标移动到相应的扇区时，可以查看具体的数据。原型地址：https://7x32iz.axshare.com/#g=1
二。制作材料和互动。本案例以六幅扇形玫瑰图为例。所有制作材料均采用Axure天然材料，包括以下材料。
1.表格用于记录每个部门代表的姓名和具体数据。这些数据需要用于后续操作，所以最好给每个网格命名，方便后续变量的选择。
2.最大文本创建新的文本标签。您需要填写表格中的最大数据值。例如，上表中的最大数据值是200。此标签仅用于逻辑计算，默认情况下可以隐藏。然后，这个数据会自动绘制一个玫瑰图。
3.选择右边的矩形按钮可以改变扇形的形状，然后选择扇形，再调整角度到60度左右。复制六个扇区，摆放好，设置不同的颜色。在这种情况下，扇区的默认宽度和高度都是200。
在加载每个扇区的时候，我们需要先把扇区缩小到一个比较小的区域，然后再慢慢放大，这样就做出了一个动态的效果。具体交互如下：
1)设定缩小尺寸——。将扇形的大小设置为当前宽度和高度除以20，锚点居中。
2)等待—— 500毫秒。这里注意，为了有连续的动态效果，第一个出来等待500毫秒，第二个需要等待1000毫秒，以此类推。
3)设置放大尺寸——，宽度设置为，表格* his宽度* 20对应的数据/最大值；将高度设置为表格* his height *20对应的数据/最大值。
因为之前已经缩小了20倍，所以宽度或者高度乘以20就是恢复原来的形状，然后表格数据除以最大值得到的比值就代表了它在原来基础上的大小的比值。比如表1的数据是200，最大值是200，比值是1，所以还是200宽高；表2是190，比例是19/20，那么它的宽度和高度就变成了190，以此类推。
请注意，更改大小需要添加动画效果。我们选择1000的线性动画。
4.通过使用折线和文本标签，折线和文本被制成下图所示的形状。默认情况下，对应于每个扇区的多段线和文本标签被逐个组合成一个组并被隐藏。
我们不想做重复的工作，希望直接从表中获取数据，所以我们在加载折线文本时添加了交互：
设置文本3354分为两部分，前面的数据部分是表格对应的数据，后面的百分比=对应表格的数据/表格数据之和*100。考虑到无穷无尽的情况，我们不得不使用固定的函数来保持小数点。
当加载每个扇区时，我们等待扇区动画结束，然后显示折线数据组。需要添加以下交互：
等1000豪秒如3354，与放大的动画时间一致；显示器——显示相应的折线组合。每个扇区都是这样设置的，可以直接复制粘贴，然后适当更改内容。
5.右侧的标签栏由矩形和文字设置成小方块，标签对应每种颜色的标题。
在这里，我们也使用设置文本的交互。在加载标签的标题文本时，我们将文本的值设置为表格对应的标题文本，这样以后只需要填写表格，不需要重复标签中的内容。
6.我们用矩形制作标签弹出窗口，调整合适的大小，选择外部阴影，默认隐藏。稍后，我们将做一个交互，将它移动到相应的扇区来显示相应的数据。
7.热区，因为Axure虽然在里面看到的是一个扇区，但是它占据的地方也是一个正方形，这就会导致后续交互的时候前扇区挡住后扇区。所以在这里，我们通过热区把扇形的位置围起来，做一个相对高保真的效果。
将鼠标移动到热区：
显示——显示标签弹出窗口设置文本3354这里我们用设置富文本，因为富文本可以设置不同的文本颜色。根据不同的字符，我们移动蓝色伞来设置蓝色文本，移动红色伞来设置红色文本。内容由对应的表格标题、文本数据和百分比组成，其中文本数据和百分比与前面介绍的设置折线文本一致，可以直接复制使用。将鼠标移出热区：
隐藏——隐藏标签弹出。
当鼠标移动时，我们进行交互，其中标签跟随鼠标移动：
Move ——设置tab弹出移动到绝对位置，x坐标=Cursor.x 10，y坐标=cursor.y10. Cursor.x代表鼠标当前的x坐标，cursor.y代表鼠标当前的y坐标。
高保真玫瑰图就是这么做的。有兴趣的同学可以试试。感谢您的阅读。
本文由@AI产品负责人原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。