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博客

相关推荐
梓贤Vigo11 天前
【Axure教程】动态统计字数
交互·产品经理·axure·原型
招风的黑耳13 天前
Axure高保真数据可视化大屏图表组件库
axure·科技感元件·可视化素材·动态图表
星期⑧不早八13 天前
Axure RP全面介绍:功能、应用与中文替代方案
ui·axure
星期⑧不早八13 天前
Axure RP:设计、原型与协作的综合平台
ui·axure
设计芝士波波球13 天前
原型设计规范:Axure RP中的交互和布局
交互·axure·设计规范
招风的黑耳14 天前
Axure设计之动态图表——排名图(中继器)
axure·排名·axure教程·动态图表
梓贤Vigo14 天前
【Axure高保真原型】批量美化滚动条
交互·产品经理·axure·原型
招风的黑耳14 天前
Axure可视化大屏原型设计深度解析:从排版到交互的全面优化
axure·axure教程·可视化素材
招风的黑耳16 天前
Axure原型设计可视化大屏科技感元件
axure·科技感元件·可视化素材
招风的黑耳17 天前
Vant UI Axure移动端元件库:提升移动端原型设计效率
axure·移动端元件