Axure中继器教程及案例详解

Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。

预览地址: https://1zvcwx.axshare.com

一、中继器基础

创建中继器

  1. 拖入中继器:在 Axure 画布中,从元件库(Libraries)面板中的"通用(Common)"元件库中拖入一个中继器(Repeater)。
  2. 编辑中继器内容:双击中继器进入编辑模式,可以添加或删除内部元件,如矩形、文本框、图片等。这些元件将作为重复项的基础模板。

设置中继器数据

  1. 添加数据列:在中继器的"样式"面板中,通过"数据集(Dataset)"部分可以添加数据列,列名即为变量名。
  2. 输入数据:在数据集表格中,可以输入具体的数据,每行代表一个数据项。

引用数据变量

在中继器内部,通过[[Item.varName]]的方式引用数据变量,其中varName是数据列的名称。例如,如果有一个名为"name"的数据列,则可以通过[[Item.name]]来引用。

二、中继器进阶

动态列表/表格

中继器可以将数据以列表或表格的形式展示,并支持自定义样式和布局。例如,可以制作产品列表、新闻列表等。

数据筛选和排序

中继器支持数据筛选和排序功能。通过设置筛选条件和排序规则,可以方便地查找和比较数据。例如,可以按价格从低到高排序产品列表。

数据编辑和删除

通过添加编辑和删除按钮,并设置相应的交互事件(如"更新行"和"删除行"),中继器允许用户修改和删除数据项。这可以模拟真实的数据操作流程。

三、中继器高级

分页控制

默认情况下,中继器不分页显示所有数据。为了优化用户体验和系统性能,可以对中继器进行分页。在"样式"窗口中,选中"分页"选项,并设置每页显示的项目数量和起始页。

合计

对于需要合计的数据(如财务报表、统计图表),中继器提供了便捷的计算方式。通过在表尾添加合计项,并使用Item.varName + target.text等表达式,可以实现数据的自动合计。

列表拖动

为了增加交互性,中继器支持列表拖动功能。这通常需要使用动态面板来实现。通过设置拖动开始、拖动过程中和拖动结束时的交互事件,可以模拟列表项的拖动排序效果。

列表滑动删除

列表滑动删除是移动应用中常见的交互方式。虽然 Axure 没有直接提供滑动删除的功能,但可以通过添加滑动手势的交互模拟来实现。例如,使用"拖动"事件结合"条件判断"和"删除行"操作,可以模拟滑动删除的效果。

表内修改

表内修改是指直接在表格中编辑数据项的内容。通过在表格中添加文本框等输入元件,并设置"失去焦点"时的交互事件(如"更新行"),可以实现数据的即时修改。

分页器控制

合计(包含自动合计/选中合计)

列表拖动

表内修改

中继器是 Axure RP 中一个功能强大的元件,它允许用户快速创建、展示和操作重复的数据项。通过掌握中继器的基础、进阶和高级应用,设计师们可以制作出更加真实和可靠的原型设计。无论是产品列表、新闻列表还是用户评论区,中继器都能提供便捷的数据处理和动态交互解决方案。希望本文的教程和案例能够帮助大家更好地理解和应用中继器。

推荐Axure元件库,助力高效设计:

Axure高端交互元件库:助力产品与设计-CSDN博客

ElementUI元件库在Axure中使用-CSDN博客

Axure打造科技感数据可视化大屏原型-CSDN博客

相关推荐
小马哥编程8 小时前
【产品经理从0到1】原型及Axure介绍
产品经理·axure·photoshop
PM大明同学1 天前
Axure PR 9 中继器 标签
ui·交互·产品经理·axure
梓贤Vigo2 天前
【Axure教程】表格嵌套卡片
交互·产品经理·axure·原型·教程
小马哥编程2 天前
【产品经理从0到1】Axure介绍
产品经理·axure
招风的黑耳4 天前
高保真动态项目管理图表集
流程图·axure·甘特图·关系图谱·项目管理图表
招风的黑耳5 天前
移动端动态滑动拨盘选择器【Axure元件库】
axure·拨盘选择器·滑动选择器
梓贤Vigo5 天前
【Axure视频教程】不透明度函数
交互·产品经理·axure·原型·教程
PMEcho5 天前
墨刀上线高级交互功能,能否超越Axure?
产品经理·axure·交互设计·墨刀·原型设计·高级交互
全宇宙最最帅气的哆啦A梦小怪兽10 天前
【Axure绘制原型】图片切割、交互动效、热区、动态面板、元件显示隐藏、表单元件、表格、内联框架
产品经理·axure
招风的黑耳11 天前
可拖动的关系图谱原型案例
知识图谱·axure·中继器·动态交互·关系图谱