Axure中继器入门:打造你的动态原型

简介: Axure中继器入门:打造你的动态原型

前言

中继器Axure 中的一个高级功能,它能够在静态页面上模拟后台数据交互的操作,如增加、删除、修改和查询数据,尽管它不具备真实数据存储能力。

中继器就像是一个临时的数据库,为我们在设计原型时提供动态数据管理的体验,使得交互感受更加贴近实际应用。

基本操作

首先,用矩形做一个表头,用中继器也做出与表头对应的矩形

image.png

再去中继器中【样式】里添加数据,这里的数据可以复制 Excel 表格的数据直接粘贴进中继器

image.png

要把写入的数据中继器中呈现,还需要一个操作,【每项加载时】 【设置文本】,为了方便这一操作可以为中继器中的每个矩形命名

对应设置文本,就可以呈现数据了

image.png

经过了这一步的操作,我们已经知道了中继器是如何呈现数据的,接下来进一步解锁更多操作

先拖一个按钮过来作为我们的新增按钮

image.png

给按钮添加点击事件,发现在【中继器动作】里面有很多的操作可以选,我们选择这里的【添加行】

image.png

目标选择当前的中继器,再点击里面的【添加行】,弹出的添加行信息我们可以发现不仅仅是填文字还可以以函数的方式添加。(函数方式之后会讲到)

image.png

拖过来一个新的按钮当作删除按钮,给按钮添加点击事件选择【删除行】,可以发现需要我们选择【规则】或者【已标记】作为一个删除的条件。

【已标记】的功能将会在下一篇张给大家讲解,这里我们选【规则】来实现这一功能

image.png

接下来我们来尝试修改某一行的数据,拖动一个新按钮然后给按钮添加【中继器动作】中的【更新行】,这里的意思是根据规则更新数据。

image.png

到这里我们的修改功能也完成了

最后来做筛选的功能,同样拖入一个按钮,给它添加【中继器事件】中的【添加筛选】动作,这里我们筛选 性别为女的

这里的【移除其他筛选】的意思是,如果此时有其他的筛选条件,则清空掉,按当前的筛选条件来筛选,如果不勾选,则是在已有筛选条件的基础上进行筛选

image.png

【中继器动作】 中还有 【移除筛选】,可以移除全部筛选条件,也可以按名称移除指定名称的筛选条件

image.png

到这里的话,中继器的基础操作已经全部结束。

image.png



相关文章
|
2月前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
|
3月前
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
Axure中继器教程及案例详解
|
4月前
|
UED
Axure设计之单选框教程(中继器)
在Axure RP中,通过结合中继器的强大功能,我们可以轻松实现动态加载的单选框列表,不仅可以根据数据自动调整选项宽度,还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目,包括案例分析、设计思路及详细的实现步骤。
|
7月前
产品入门第六讲:Axure中继器
产品入门第六讲:Axure中继器
|
架构师 数据可视化 人机交互
Axure介绍与原型案例分享
Axure介绍与原型案例分享
【Axure教程】橡皮擦的擦除效果——刮奖原型
【Axure教程】橡皮擦的擦除效果——刮奖原型
【Axure教程】中继器表格寻找和标记数据
【Axure教程】中继器表格寻找和标记数据
|
数据可视化
【Axure教程】动态玫瑰图
【Axure教程】动态玫瑰图