Axure9.0中继器-初识篇

前言

很多刚入门Axure的产品小伙伴,做原型一直停留在静态页面阶段:做列表只能一个个复制元件,修改数据需要逐个改文本,想要做搜索筛选、新增删除、分页表格完全无从下手。

其实解决以上所有痛点,只需要吃透Axure9.0中**中继器(Repeater)**这一个核心元件。

中继器是Axure的灵魂功能,相当于原型里的小型数据库,不用写一行代码,就能轻松实现动态数据列表、后台管理表格、商品卡片、消息列表、搜索筛选、数据分页等高频交互效果。

一、什么是Axure中继器?

1.1 官方定义

中继器是Axure内置的数据驱动型重复元件,由【数据集+页面模板+交互事件】三部分组成,用一套页面模板,循环渲染多条数据,实现页面内容自动刷新、动态变化。

1.2 通俗理解

把中继器理解成一个Excel表格

  • 数据集 = Excel单元格,存放所有原始数据(姓名、手机号、状态、时间等)
  • 内部模板 = 表格一行的样式,你只需要画好一行列表样式
  • 自动渲染 = 中继器自动根据数据集里的数据,可以批量复制数据也可以单独增加,数据变了,页面自动跟着变

1.3 什么时候必须用中继器?

只要页面存在重复元素+数据动态变化,一律优先使用中继器:

  • 后台管理系统:用户表格、订单列表、权限列表(筛选、删除、编辑、分页)
  • 移动端页面:消息列表、商品列表、收货地址列表
  • 常见交互:关键词搜索、下拉筛选、批量删除、新增表单数据

二、Axure9.0中继器三大核心结构

拖拽一个中继器到画布后,我们只需要掌握三大面板,就能完全掌控中继器,90%的新手看不懂中继器,就是分不清这三个模块。

2.1 数据集(Data)------数据源仓库

相当于数据库表单,支持新增列、删除列、批量录入数据,支持直接复制Excel表格一键粘贴导入,大幅提升填数据效率。

列名规范建议:统一英文命名,不要用中文,避免后续绑定数据报错,例如:name、phone、status、time

2.2 内部项(Item)------页面展示模板

双击中继器即可进入内部编辑页面,这里只需要绘制单行/单个卡片样式,不需要做多行。

所有重复的列表行、商品卡片,都是中继器自动复制这个模板生成的,模板改一行,全局所有列表样式同步修改。

2.3 交互面板(Interactions)------数据绑定与动态操作

核心两个必备事件:

  1. 每项加载时 :最常用!把数据集里面的数据,绑定到页面文本元件上,语法:\[Item.列名]
  1. 中继器专用动作:添加行、删除行、更新行、筛选、排序、分页
相关推荐
UXbot5 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
夜郎king5 天前
Axure 原型落地 HTML:基于 Trae Solo 实现 GIS 多级行政区划切换全流程实践
axure·trae solo·gis可视化
清辞8538 天前
产品经理需求推进流程
大数据·深度学习·学习·产品经理
2501_933670798 天前
大数据管理与应用专业概述
产品经理
迷恋6668 天前
了解用户是一门学问
经验分享·产品经理
JieDavid8 天前
专利流程岗上岸实录|奇智创达知识产权系统实操经验分享
大数据·运维·人工智能·经验分享·产品运营·产品经理
项目管理者8 天前
如何协调多项目任务,解决多项目之间冲突
产品经理·敏捷流程
BadTudou10 天前
滑滑相册清理 -- 超解压的手机相册清理工具
图像处理·产品经理·相册
迷恋66610 天前
论做好需求分析的重要性
经验分享·产品经理
m0_7372469810 天前
一些可能需要的skill支持参考资料
人工智能·产品经理