Axure制作可视化大屏动态滚动列表教程

在可视化大屏设计中，动态滚动列表是一种常见且实用的展示方式，能够有效地展示大量信息。本文将详细介绍如何使用Axure制作一个动态滚动的列表展示模块。

一、准备工作

1. 打开Axure软件：确保你已经安装并打开了Axure RP软件。
2. 创建新项目：选择合适的设备尺寸（如大屏常见的1920x1080），创建一个新的项目。

二、制作列表表格

我们将使用Axure的中继器来制作列表表格。

1. 拖入中继器：从左侧的元件库中拖入一个中继器到画布上。
2. 设置中继器列：双击中继器，进入中继器的编辑界面。在“列”选项卡中，添加以下列：
   • 订单编号
   • 地区
   • 检修时间
   • 销毁类型
   • 运输车辆
   • 风险预警
3. 添加数据：在“数据集”选项卡中，添加示例数据，如图中所示：
   • 202110300001, 广东省深圳市, 2021-12-15 16:20:30, 物品丢失, 1号车辆, 高风险
   • 202110300002, 广东省广州市, 2021-12-15 16:20:30, 包装破损, 2号车辆, 中风险
   • 202110300003, 广东省惠州市, 2021-12-15 16:20:30, 商品毁坏, 3号车辆, 低风险
   • 202110300004, 广东省珠海市, 2021-12-15 16:20:30, 物品丢失, 4号车辆, 中风险
4. 设计列表项样式：回到中继器的主界面，设计每一项的样式。可以使用矩形、文本框等元件来展示每一列的数据。

三、创建动态面板

为了实现列表的动态滚动效果，我们需要使用动态面板。

1. 拖入动态面板：从元件库中拖入一个动态面板到画布上，将其命名为“外部面板”，用于限定列表的可视区域。
2. 调整外部面板大小：根据需要调整外部面板的大小，使其能够容纳列表的一部分内容。
3. 拖入另一个动态面板：在外部面板内再拖入一个动态面板，命名为“内部面板”，用于放置中继器。
4. 将中继器放入内部面板：将之前设计好的中继器拖入内部面板中。

四、设置动态面板交互逻辑

1. 设置内部面板的交互：
   • 选中内部面板，在右侧的“交互”面板中，点击“添加交互”。
   • 选择“移动”动作，设置移动方向为“垂直”，距离为30像素，动画为“无”。
   • 再添加一个“等待”动作，设置等待时间为2000毫秒（2秒）。
   • 最后添加一个“触发事件”动作，触发内部面板的“载入时”事件，实现循环滚动。
2. 设置外部面板的交互（可选）：如果需要，可以在外部面板上添加一些交互，比如鼠标悬停时暂停滚动等。

五、预览和调试

1. 预览项目：点击Axure工具栏中的“预览”按钮，查看动态滚动列表的效果。
2. 调试：如果发现滚动效果不理想，可以回到Axure中调整移动距离、等待时间等参数，直到达到满意的效果。

六、总结

通过以上步骤，我们成功使用Axure制作了一个可视化大屏的动态滚动列表展示模块。这个模块可以有效地展示大量信息，并且通过动态面板的交互逻辑实现了列表的自动滚动效果。在实际项目中，你可以根据具体需求调整列表的样式、数据和滚动参数，以达到最佳的展示效果。

希望这篇教程对你有所帮助，祝你使用Axure进行原型设计顺利！

 — — 往期推荐 — —

Axure设计的“广东省网络信息化大数据平台”数据可视化大屏-CSDN博客

EQL UI元件库：Axure设计师的高效利器-CSDN博客

Axure大屏可视化模板：赋能多领域，开启数据展示新篇章_axre-CSDN博客

2小时完成1天工作量？有了这款Axure移动端元件库，设计如此简单-CSDN博客

CRM企业客户关系管理系统产品原型方案-CSDN博客

Axhub Charts：Axure原型设计的动态数据可视化元件库-CSDN博客