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

相关文章
|
数据库
rpm yum 等命令无响应的解决方法
yum 安装查询任何东西, rpm 安装查询任何东西,执行后无任何反应,直接卡住,也没任何错误信息给出,只能杀掉进程 # yum install XXXX # yum clean all # rpm -qa # rpm -ivh XXX 执行全部无响应,只能kill 掉 原来是由于 rpm 的数据库出现异常了导致直接卡死了,造成这种异常通常是因为之前不正常的安装或查询。
4331 0
|
9月前
|
人工智能 编解码 芯片
告别低效沟通|让技术提问不再头疼-这套高效AI提问模板来帮你
不会向ai提问,不知道怎么提问的 可以看看
20962 1
告别低效沟通|让技术提问不再头疼-这套高效AI提问模板来帮你
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
887 2
|
12月前
|
人工智能 自然语言处理 API
快速使用 DeepSeek-R1 满血版
DeepSeek是一款基于Transformer架构的先进大语言模型,以其强大的自然语言处理能力和高效的推理速度著称。近年来,DeepSeek不断迭代,从DeepSeek-V2到参数达6710亿的DeepSeek-V3,再到性能比肩GPT-4的DeepSeek-R1,每次都带来重大技术突破。其开源策略降低了AI应用门槛,推动了AI普惠化。通过阿里云百炼调用满血版API,用户可以快速部署DeepSeek,享受高效、低成本的云端服务,最快10分钟完成部署,且提供免费token,极大简化了开发流程。
191805 31
快速使用 DeepSeek-R1 满血版
|
8月前
|
消息中间件 存储 大数据
阿里云消息队列 Kafka 架构及典型应用场景
阿里云消息队列 Kafka 是一款基于 Apache Kafka 的分布式消息中间件,支持消息发布与订阅模型,满足微服务解耦、大数据处理及实时流数据分析需求。其通过存算分离架构优化成本与性能,提供基础版、标准版和专业版三种 Serverless 版本,分别适用于不同业务场景,最高 SLA 达 99.99%。阿里云 Kafka 还具备弹性扩容、多可用区部署、冷热数据缓存隔离等特性,并支持与 Flink、MaxCompute 等生态工具无缝集成,广泛应用于用户行为分析、数据入库等场景,显著提升数据处理效率与实时性。
|
UED
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
673 0
|
机器学习/深度学习 传感器 自动驾驶
未来之路:大模型技术在自动驾驶的应用与影响
本文深入分析了大模型技术在自动驾驶领域的应用和影响,万字长文,慢慢观看~ 文中首先概述了大模型技术的发展历程,自动驾驶模型的迭代路径,以及大模型在自动驾驶行业中的作用。 接着,详细介绍了大模型的基本定义、基础功能和关键技术,特别是Transformer注意力机制和预训练-微调范式。 文章还介绍了大模型在任务适配性、模型变革和应用前景方面的潜力。 在自动驾驶技术的部分,详细回顾了从CNN到RNN、GAN,再到BEV和Transformer结合的技术迭代路径,以及占用网络模型的应用。 最后,文章重点讨论了大模型如何在自动驾驶的感知、预测和决策层面提供赋能,突出了其在该领域的重要性和影响力。
2613 56
|
前端开发
招投标系统是Electron的纯内网编辑Office Word,可以设置部分区域可编辑,其他的地方不能编辑吗?
我们是招投标系统的开发公司,框架是用的Electron,需要在纯内网的环境下编辑Office Word,可以设置部分区域可编辑,其他的地方不能编辑吗(如下红框位置)?并且在用户忘记填写一些区域的时候做提醒。
329 83
|
存储 JavaScript 前端开发
Axure设计之日期时间范围选择器
在产品设计和原型制作中,日期时间范围选择器是常见需求。本文介绍如何使用Axure的动态面板、中继器、文本框、按钮及时间函数,快速制作一个功能完备的日期时间范围选择器。详细步骤包括创建基本框架、设置时间函数、载入时获取当前时间、添加时间选择功能、更新文本框值和验证格式化。通过这些步骤,你可以在Axure中轻松实现这一功能。
1667 0
|
应用服务中间件 网络安全 Apache
构建高性能Web服务器:Nginx vs Apache
【5月更文挑战第16天】Nginx与Apache是两种主流Web服务器,各具优势。Nginx以其轻量级、高并发处理能力和反向代理功能见长,适合大型网站和高并发场景;而Apache以功能丰富、稳定性强闻名,适合企业网站和需要多种Web服务功能的场景。在性能上,Nginx处理高并发更优,Apache则可能在高负载时遭遇瓶颈。在选择时,应根据实际需求权衡。