Axure中继器实战：从零搭建商品列表与进阶交互-北京尧图网络

1. 为什么中继器是Axure进阶的分水岭做原型的人大概都经历过这个阶段静态页面画得飞起元件对齐、样式统一、交互跳转都玩得转但一碰到列表就犯怵。商品列表、订单列表、消息列表、通讯录——这些在真实产品里最基础的结构在Axure里如果靠复制粘贴一个个堆改一个字段就要动十个地方维护成本高到让人想砸键盘。中继器Repeater就是来解决这个问题的。它的本质是一个数据驱动的容器你给它一份数据表它按照你定义的模板把每一行渲染成一个元件组数据变了界面自动跟着变。听起来像前端框架里的列表渲染对吧没错思路几乎一模一样——数据与视图分离模板负责长什么样数据负责显示什么。案例16制作商品列表就是中继器最经典、最实用的入门场景。一个电商商品列表通常包含商品图、商品名、价格、销量、标签、按钮。如果用传统方式你要画6个商品就得复制6组元件每组改文字改图片后期加一个促销标签字段6组全得手动补。而用中继器你只需要维护一张数据表加一列字段模板里拖一个元件绑定上去所有行同步生效。这篇文章我会把整个制作过程拆透从数据表怎么设计、模板怎么搭、交互怎么绑到分页、排序、筛选这些进阶玩法再到我实际做项目时踩过的坑。适合已经会Axure基础操作、想跨过中继器这道坎的产品经理、交互设计师和独立开发者。看完你至少能做到拿到任何一个列表需求第一反应是这个用中继器怎么拆字段而不是我要复制几行。2. 中继器的核心机制与数据表设计2.1 中继器到底在背后做了什么很多人学中继器卡住是因为把它当成一个高级元件来理解其实它更像一个微型数据库加渲染引擎。你在中继器里看到的每一行都是它从内部数据集里读出来、套上模板、生成的一份副本。理解这一点后面所有操作都顺了。中继器的内部结构分三层数据集Dataset一张表格列是字段名行是记录。默认有Column0、Column1这种占位列你可以重命名成name、price、img等有意义的字段。模板Item Template定义一行长什么样。你在模板里放的元件就是每一行渲染出来的样子。交互Interactions中继器自身可以响应每项加载时这类事件用来做条件判断、动态改样式。关键点在于模板只画一次数据有多少行就渲染多少份。这就是它和复制粘贴的本质区别。复制粘贴是所见即所得的静态堆叠中继器是数据驱动的动态生成。2.2 商品列表该拆哪些字段字段设计是第一步也是最容易返工的一步。拆得太粗后期想加功能发现数据不够拆得太细维护起来又累。我的经验是按会独立变化的最小单元来拆。一个典型的商品列表我一般会拆成这些字段字段名类型用途备注goodsName文本商品标题支持换行截断price数字现价用于排序originalPrice数字原价划线价展示sales数字销量用于排序imgUrl文本图片地址中继器支持图片字段tag文本促销标签空值时不显示stock数字库存用于售罄判断这里有个细节价格和销量一定要存成数字不要存成¥99这种带符号的字符串。因为后面做排序、做条件判断比如销量大于1000显示热卖标时数字才能参与运算。符号和单位在模板里用文本元件单独拼上去这样数据和展示就解耦了。提示字段名建议用英文或拼音避免中文。虽然Axure支持中文列名但在写表达式引用时中文容易因为输入法或编码问题出错排查起来很烦。2.3 数据从哪来手动录入还是导入中继器数据有两种来源。少量数据直接在数据集面板里手动敲适合做Demo。数据多的话可以用导入功能从CSV或Excel粘贴进来——Axure支持把表格数据直接粘贴到数据集里列会自动对应。我实际做项目时如果商品有几十条会先在Excel里整理好确保列顺序和中继器字段顺序一致然后全选复制在中继器数据集里点第一行第一列粘贴。这样比一条条敲快得多。注意粘贴前先把中继器的列数调整到和Excel一致否则会错位。3. 从零搭建商品列表的完整实操3.1 第一步拖入中继器并规划模板尺寸新建一个页面从元件库拖一个中继器到画布上。默认它带一个矩形占位先别急着改。我的习惯是先确定单行卡片的尺寸因为这决定了整个列表的布局节奏。假设做的是移动端商品列表单行卡片我一般设为宽375、高120。这个高度能放下左侧商品图100×100、右侧标题两行、价格一行、销量一行。如果是PC端横向排列的卡片流单行尺寸又不一样。先定尺寸再画模板能避免后面反复调整。把中继器本身的尺寸设成和单行卡片一致375×120这样它默认只显示一行的高度。中继器的布局属性里可以设置每行显示几个、行间距多少这个后面讲。3.2 第二步在模板里搭出单行卡片双击中继器进入模板编辑状态。这时候你看到的画布就是一行的绘制区域。按下面的结构摆放元件左侧放一个图片元件尺寸100×100命名imgBox用于绑定商品图。右侧上方放一个文本标签命名goodsName宽度约250设置自动换行、最多显示两行。标题下方放一个文本标签命名priceText用于显示现价。价格右边放一个文本标签命名originalPriceText设置删除线样式用于原价。再下方放文本标签命名salesText显示销量。右上角放一个文本标签命名tagText做促销标签默认隐藏。每个元件都要起有意义的名称。这是中继器操作里最容易被忽视但最重要的一步。因为后面绑定数据、写交互都是靠元件名称来引用的。如果全是文本1文本2你根本分不清谁是谁。3.3 第三步把字段绑定到元件上绑定数据有两种方式。最简单的是在模板里选中元件然后在数据集面板里把对应列拖到元件上Axure会自动建立绑定关系。另一种是选中元件在交互里添加设置文本动作值选对应的字段。我推荐用拖拽绑定快且不容易错。具体操作选中goodsName文本在数据集面板找到goodsName列直接拖到文本上松手。这时文本内容会变成[[Item.goodsName]]这样的表达式。priceText绑定pricesalesText绑定salesimgBox绑定imgUrl。价格和销量需要拼接单位所以不能直接绑。做法是选中priceText在设置文本里写表达式¥[[Item.price]]销量写已售[[Item.sales]]件。这样数字和单位就拼在一起了。注意图片字段绑定后如果数据里填的是本地图片路径预览时可能显示不出来。稳妥的做法是把图片先拖进Axure的图片文件夹用相对路径引用或者直接用网络图片地址。3.4 第四步设置中继器的布局与分页回到中继器本身在属性面板里找到布局设置。这里有几个关键参数每行项数移动端列表设为1PC端卡片流设为3或4。行间距一般设10到16看设计节奏。分页可以设置每页显示多少项。做长列表Demo时分页能让预览更真实。如果要做加载更多的效果分页设置里选多页然后配合一个按钮触发下一页动作。这个后面进阶部分细讲。设置完布局预览一下你应该能看到数据表里的每一条都渲染成了一行卡片。如果只显示一行检查是不是中继器高度被限制住了或者布局里每行项数设成了1但高度不够。4. 让列表活起来排序、筛选与分页4.1 用交互实现点击排序静态列表谁都会做真正体现中继器价值的是动态排序。比如点击价格按钮列表按价格从低到高排再点一次从高到低。实现思路给排序按钮添加单击交互动作选中继器-排序。在弹出的设置里选择排序字段比如price选择升序或降序。如果要实现点一次升序、再点降序的切换需要用一个全局变量记录当前状态然后用条件判断来切换排序方向。具体做法新建一个全局变量sortOrder初始值设为asc。按钮单击时添加条件如果sortOrder等于asc则执行降序排序并设置sortOrder为desc否则执行升序排序并设置sortOrder为asc。这样一次点击就能切换。4.2 用筛选做分类切换商品列表常见的全部/热销/新品切换本质是按条件筛选数据。给分类按钮添加交互动作选中继器-添加筛选。筛选条件可以写表达式比如销量大于1000或者标签等于热销。筛选是叠加的多个筛选条件会同时生效。所以切换分类时要先移除所有筛选再添加新的筛选条件否则条件会越积越多结果越来越窄。这个坑我踩过当时列表越点越少排查半天才发现是筛选没清空。4.3 分页与加载更多的取舍分页和加载更多是两种不同的交互模式选择取决于场景。分页适合数据量大、需要快速跳转的场景比如后台管理列表。加载更多适合移动端信息流用户不断下滑内容持续追加。用中继器做加载更多思路是初始只显示第一页点击加载更多按钮时触发下一页动作同时把新一页的数据追加到当前视图。Axure的中继器分页动作里有下一页选项配合滚动到底部时的交互能做出接近真实App的体验。不过要注意Axure的分页是替换式的翻到第二页时第一页的内容会被替换掉不是追加。如果想做真正的追加需要用添加行的方式动态往数据集里塞数据复杂度会高一些。做Demo的话替换式分页通常够用了。5. 实操中那些没人告诉你的坑5.1 元件命名混乱导致绑定失效这是新手最高频的问题。模板里元件一多命名随意绑定数据时拖错列或者后期改字段名忘了同步更新绑定预览时数据就是不出来。我的习惯是模板里每个元件命名后立刻在名称前加个前缀标明类型比如txt_goodsName、img_goodsImg、btn_buy。这样在交互列表里一眼就能找到目标。5.2 中继器高度自适应失效中继器默认高度是固定的数据多了会溢出被裁掉。要让它自适应内容高度需要在属性面板里勾选适应内容或者手动设置高度为自动。但有时候勾了还是不生效多半是因为模板里元件的定位方式有问题——如果模板内元件用了绝对定位且超出模板边界中继器计算高度会出错。模板内元件尽量用相对定位或者确保都在模板可视区域内。5.3 图片加载慢或显示不全中继器里放图片如果数据源是网络图片预览时可能因为网络问题加载不出来。另外图片元件默认是填充模式如果原图比例和元件比例不一致会被拉伸变形。解决办法是把图片元件的填充方式改成包含或覆盖根据设计需求选。包含会留白覆盖会裁剪看你要哪种效果。5.4 排序和筛选同时用时的冲突前面提过筛选要清空排序也有类似问题。如果先排序再筛选筛选后的结果可能不是按排序顺序来的。正确的顺序是先筛选出目标数据集再对结果排序。在交互里就是先执行筛选动作再执行排序动作。顺序反了结果就不对。下面这张表整理了我遇到过的典型问题和排查方向现象可能原因排查方向数据不显示元件未绑定字段检查模板元件是否有[[Item.xxx]]表达式只显示一行中继器高度不足调整高度或开启适应内容排序无效字段类型是文本确认数据存的是数字不是字符串筛选后列表为空筛选条件叠加先移除所有筛选再加新条件图片变形填充模式不对改为包含或覆盖分页按钮无反应未设置多页检查分页设置是否为多页模式6. 从商品列表延伸出去的玩法中继器一旦玩熟你会发现它能套用的场景远超想象。商品列表只是最基础的形态同样的思路可以做出通讯录字段换成姓名、电话、头像、订单列表字段换成订单号、状态、金额、消息中心字段换成发送人、内容、时间、数据看板字段换成指标名、数值、趋势。更进一步中继器还能和全局变量、函数结合做出带搜索功能的列表。思路是搜索框输入关键词触发中继器筛选条件写商品名包含输入框的值。Axure的表达式里支持indexOf这类字符串函数能实现模糊匹配。还有一个进阶玩法是中继器嵌套。比如商品列表里每个商品有多个规格点开才显示。外层中继器渲染商品内层中继器渲染规格通过每项加载时事件把外层数据传给内层。这个复杂度高但做出来的原型非常接近真实产品。我个人的体会是中继器学习的投入产出比极高。花一个下午把商品列表这个案例彻底吃透后面遇到任何列表类需求你都能在半小时内搭出可交互的原型。真正难的从来不是操作而是数据字段怎么拆、交互逻辑怎么设计——这两件事想清楚了剩下的就是拖拖拽拽的体力活。最后分享一个小技巧做复杂中继器时先在纸上画出数据表和模板结构标清楚每个字段对应哪个元件、哪个交互引用哪个字段。画完再动手能省掉大量返工。我早期就是直接上手拖结果做到一半发现字段不够用只能推倒重来那种感觉比加班还难受。

Axure中继器实战：从零搭建商品列表与进阶交互

相关推荐

用FreeCAD和Blender加AI搞定89平家装设计，省下万元设计费

为Agent构建专属网站：用Skills机制提升AI任务可靠性

doocs/leetcode 面试题 16.04「井字游戏」：用单次扫描计数法判定棋盘胜负、平局与未完

更多资讯

动态分析：让代码跑起来，定位覆盖率、性能与内存问题

C++23新特性实战：std::expected、std::print与deducing this的工程价值

掩码生成Transformer：少步数高效文本到图像生成实战

C++异常处理底层原理与实战避坑指南

Go网络编程实战：从连接超时排查到pprof性能调优

汇编实验五深度解析：段地址、栈操作与小端序实战指南

今日更新

小波包能量谱原理与MATLAB实现：从频带分解到故障特征提取

基于LSTM的网易云音乐评论情感分析：数据清洗与模型调优实战

Alpha-Beta剪枝与极大极小值算法：博弈树搜索原理与实战优化

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？