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. 中继器专用动作:添加行、删除行、更新行、筛选、排序、分页
相关推荐
c萱19 小时前
AI产品经理——02AI产品的发展
ai·语言模型·aigc·产品经理·ai-native
郝学胜-神的一滴1 天前
C++ Templates 03:手写一个Stack看透模板核心机制
开发语言·c++·产品运营·软件工程·产品经理
c萱2 天前
AI产品经理——01基础认知篇
设计模式·prompt·aigc·产品经理·ai编程·gitcode·ai-native
Single3 天前
无影脚通行|人类:星际物种的地球预演
程序人生·其他·人机交互·产品经理·业界资讯
摹客4 天前
【趋势】AI重构原型设计:从表达文件到验证行为,5个变化+工具选型
人工智能·microsoft·产品经理
gnsnswa6 天前
回归岗位价值:CAIE 认证适合人群与能力定位
人工智能·网络协议·职场和发展·产品经理·创业创新·信息与通信·ai写作
郝学胜-神的一滴7 天前
游戏引擎原理与实践 01:聊聊游戏引擎的前世今生
开发语言·c++·游戏引擎·产品运营·软件工程·产品经理·untiy
产品人卫朋14 天前
硬件IPD开发的顺序,正在被AI倒过来
知识图谱·产品经理·创业·ipd流程
xy345315 天前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计
产品设计大观15 天前
墨刀AI客户端怎么干活?派任务、本地执行、交付PRD和原型
agent·原型·墨刀·prd·ai工作台·墨刀ai客户端·产研