Axure中继器教程及案例详解

简介: Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 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]]来引用。
221.png

二、中继器进阶

动态列表/表格

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

数据筛选和排序

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

数据编辑和删除

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

三、中继器高级

分页控制

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

合计

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

列表拖动

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

列表滑动删除

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

表内修改

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

分页控制器

225.png

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

226.png

列表拖动

227.png

表内修改

228.png

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

相关文章
【每日教程】用中继器做一个三级菜单(含标签)
【每日教程】用中继器做一个三级菜单(含标签)
|
运维 监控 Oracle
应届生运维简历攻略
应届生运维简历攻略
1843 0
|
数据库
rpm yum 等命令无响应的解决方法
yum 安装查询任何东西, rpm 安装查询任何东西,执行后无任何反应,直接卡住,也没任何错误信息给出,只能杀掉进程 # yum install XXXX # yum clean all # rpm -qa # rpm -ivh XXX 执行全部无响应,只能kill 掉 原来是由于 rpm 的数据库出现异常了导致直接卡死了,造成这种异常通常是因为之前不正常的安装或查询。
4548 0
|
7月前
|
弹性计算 人工智能 运维
2026年阿里云服务器收费价格表(轻量/ECS/GPU,年付/月付/流量)
本文将详细介绍2026年阿里云服务器的收费价格表,涵盖轻量应用服务器、ECS云服务器和GPU服务器三大品类,以及年付、月付和按流量计费等多种模式。
1117 9
|
人工智能 编解码 芯片
告别低效沟通|让技术提问不再头疼-这套高效AI提问模板来帮你
不会向ai提问,不知道怎么提问的 可以看看
21521 1
告别低效沟通|让技术提问不再头疼-这套高效AI提问模板来帮你
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
1360 2
|
机器学习/深度学习 传感器 自动驾驶
未来之路:大模型技术在自动驾驶的应用与影响
本文深入分析了大模型技术在自动驾驶领域的应用和影响,万字长文,慢慢观看~ 文中首先概述了大模型技术的发展历程,自动驾驶模型的迭代路径,以及大模型在自动驾驶行业中的作用。 接着,详细介绍了大模型的基本定义、基础功能和关键技术,特别是Transformer注意力机制和预训练-微调范式。 文章还介绍了大模型在任务适配性、模型变革和应用前景方面的潜力。 在自动驾驶技术的部分,详细回顾了从CNN到RNN、GAN,再到BEV和Transformer结合的技术迭代路径,以及占用网络模型的应用。 最后,文章重点讨论了大模型如何在自动驾驶的感知、预测和决策层面提供赋能,突出了其在该领域的重要性和影响力。
3133 56
|
消息中间件 存储 大数据
阿里云消息队列 Kafka 架构及典型应用场景
阿里云消息队列 Kafka 是一款基于 Apache Kafka 的分布式消息中间件,支持消息发布与订阅模型,满足微服务解耦、大数据处理及实时流数据分析需求。其通过存算分离架构优化成本与性能,提供基础版、标准版和专业版三种 Serverless 版本,分别适用于不同业务场景,最高 SLA 达 99.99%。阿里云 Kafka 还具备弹性扩容、多可用区部署、冷热数据缓存隔离等特性,并支持与 Flink、MaxCompute 等生态工具无缝集成,广泛应用于用户行为分析、数据入库等场景,显著提升数据处理效率与实时性。
|
SQL 数据库
数据库数据恢复—SQL Server报错“错误 823”的数据恢复案例
SQL Server数据库附加数据库过程中比较常见的报错是“错误 823”,附加数据库失败。 如果数据库有备份则只需还原备份即可。但是如果没有备份,备份时间太久,或者其他原因导致备份不可用,那么就需要通过专业手段对数据库进行数据恢复。
1054 2
Axure设计之单选框教程(中继器)
在Axure RP中,通过结合中继器的强大功能,我们可以轻松实现动态加载的单选框列表,不仅可以根据数据自动调整选项宽度,还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目,包括案例分析、设计思路及详细的实现步骤。
733 1
Axure设计之单选框教程(中继器)