1. 为什么我在原型里坚持做能改数据的图片列表——背景与痛点先说个真实场景。前阵子帮某公司做一个后台管理系统的原型其中一个页面是素材库要求展示一批图片每张图带标题、标签、上传日期还要能删除、能切换成大图网格或紧凑列表两种视图。一开始组里的小朋友直接往画布上拖了十几个占位图排好版看起来效果不错交上去也顺利通过评审。问题出在第二周。产品经理想看看只有3张素材时这个页面长什么样于是大家把图一张张删掉再看效果。又过几天需求变成每张图要多个标签于是把几十个图片占位框全部点开改文本。第三次改动时已经没有人愿意碰这个页面了——一张张改图片、改文字、调间距效率极低而且改完以后还想保留新增一条数据的演示功能靠纯静态摆放根本无法实现。这就是我在原型里坚持用中继器做自定义图片列表布局的原因。用数据驱动的思路去搭原型图片列表就不再是一堆死框而是一个可以增删改查、可以排序筛选、可以切换多列视图的活组件。这篇文章就把完整的做法、思路和踩坑过程写出来主要面向正在用Axure做B端后台、内容管理类原型的同学也适合刚接触中继器、想深入理解它的人。2. 中继器布局的原理拆解数据和视图分离2.1 中继器到底在模拟什么中继器这个名字初听很抽象但它的本质其实特别简单——就是一个数据表格 行模板 渲染规则的组合。你可以这样理解先画一个只有一行内容的模板行模板行里放图片、标题、文字等各种元件。中继器的数据集则存储了多行数据每行数据对应一个图片项的完整信息。预览时Axure会按照数据集里的行数把模板行自动复制渲染多份每一份里用数据集当前行的字段值替换模板里对应的文本、图片等内容。这正好解决了原型阶段一个非常核心的诉求布局结构是一次性设计好的后续的数据变化只需要改数据集或者通过交互在运行时修改数据集记录视图就会跟着刷新。2.2 自定义布局的自定义到底指什么顺着刚才的原理继续说。很多人以为自定义图片列表布局就是把几个图片摆得好看一点这其实只停留在静态设计层面。真正的自定义布局至少包含三层能力第一层是数据层次的自定义。图片列表里每一张图展示什么内容、展示哪些字段、字段用什么类型都可以由数据来驱动而不是画死在每个元件里。第二层是视图层次的自定义。同一个列表数据可以通过切换不同的模板样式、不同的横向排列数量变成四列网格、六列网格、单行大图列表等不同形态。这个在Axure里通常配合动态面板和全局变量来实现。第三层是交互层次的自定义。用户可以在原型里对列表新增一条记录、删除一条记录、点击图片查看详情、切换排序方式、输入关键词筛选。这些操作不能停留在看起来能用而要在中继器逻辑上真的生效。所以本文后续所有内容都是围绕这三层能力展开的。只掌握拖拽摆放远远不够真正能提升原型交付质量的是把中继器的字段、交互事件、样式切换逻辑打通。2.3 中继器数据集字段设计是布局的隐性地基如果你已经看过一些中继器教程一定会发现大家都在强调数据集字段。这一步太关键了我甚至认为它决定了整个布局方案的成功率。做图片列表数据时推荐至少包含以下几类字段image存放图片元件的填充图或URL地址title图片标题文本desc图片描述文本可选tag标签信息可根据需求设计成单标签或多标签date上传或更新时间用于排序id唯一标识删除、编辑、详情跳转时靠它区分当前行其中image字段要注意一个细节。中继器内的图片填充有两种方式一种是把图片元件直接拖入模板行再在交互→每项加载时通过设置文本或设置图片为对应字段值来更新另一种是用矩形作为图片容器把图片作为填充内容赋给矩形。两种方式各有适用场景后面会详细展开。字段设计得好后续做筛选、排序、删除恢复都会很顺手。字段设计得随意后面每加一个功能都要回过来补字段甚至要推翻模板重做。3. 从零搭建一行列表项字段设计、模板绘制与样式细节3.1 准备中继器和基础数据打开Axure在画布上拖入一个中继器元件双击进入中继器内部。默认的矩形占位内容先不管我们先把数据集准备好。在右侧样式面板中找到中继器的数据集入口打开后你会发现默认有几列和几行数据。先根据前面设计好的字段结构列命名为id、image、title、desc、tag、date并填入几行示例数据。注意image字段建议填一个稳定的图片URL预览时能直接加载出来会直观很多。数据集准备好后开始处理模板行。中继器默认只有一行模板我们的第一阶段目标是先做出一行精美的图片卡片不需要急着复制结构。3.2 卡片式模板的绘制顺序模板行建议从外到内绘制这样层次关系最清晰。先画一个大的卡片容器一般用矩形或动态面板圆角设为8到12像素填充白色加一圈细边框投影可以加但要克制否则预览时密集排列容易显得脏。这个容器的尺寸就是最终列表项的尺寸所以一开始就要定好你期望的卡片宽高。然后在卡片内容区依次放置图片区域、标题文本、描述文本、标签区域、日期文本。布局方向根据最终要实现的视图来定如果是大图卡片图片通常放在上部标题在下方如果是紧凑列表图片放左侧文本放右侧。图片区域的搭建方式这里要特别说一下。如果一个卡片里不需要做图片点击放大预览直接把图片元件拖进模板行然后通过每项加载时→设置图片→选择图片元件→image来完成数据绑定。如果需要图片有悬停态、缩放效果或者点击交互建议在模板行中使用动态面板承载图片或者给图片元件单独加交互。卡片底部的删除按钮、收藏按钮等操作按钮也尽量在这一步一起放入模板行。因为中继器模板行中所有元件都会被数据参与复制先想清楚卡片最终长什么样可以避免后面反复返工。3.3 每项加载时的核心事件绑定模板行视觉完成之后最关键的一步是绑定每项加载时事件。双击中继器在交互面板里给中继器添加每项加载时用例依次执行以下操作设置标题文本为数据集中的title字段设置描述文本为数据集中的desc字段设置日期文本为数据集中的date字段设置图片为数据集中的image字段设置文本的时候注意选择正确的目标元件并用右侧的插入变量或函数选取数据集字段而不是手动输入字段名。很多人在这里踩坑手动拼字段名导致预览不出来其实就是忽略了Axure的变量选择器。标题、描述这类文本还有一个常见坑——文本长度不固定。如果一段描述超过卡片固定高度默认会被截断或者溢出。建议给文本元件开启自动换行并在设置文本时勾选适应内容或者限定元件高度后使用裁剪确保不同长度的数据在卡片里显示稳定。3.4 一行模板如何变成图片列表模板行完成之后退出中继器编辑状态。此时画布上的中继器还只显示一份模板行但预览时会按照数据集的行数自动复制多份。如果我们希望画布上呈现的是整齐的网格列表需要在样式面板中调整中继器的布局选择水平排列或网格排列并设置每行项目数量、项目间距、左右上下边距。比如希望一行显示4张卡片就在每行数量里填4希望间距一致可以设置固定间距值。如果你需要不同的列数还可以动态修改这些参数这一点在后面的视图切换章节会专门说明。现阶段先把一种固定布局调好确认每个卡片都能正常显示数据。3.5 预览时的第一次校验到这里可以先按F5预览检查一遍。重点看几处每张卡片是否按数据集行数渲染图片是否正常加载标题、描述、日期是否正确对应标签位置是否有内容占位不同字数的文本是否导致卡片参差不齐如果发现所有卡片图片都一样通常是因为image字段绑定没生效或者图片元件属性设置成了默认填充。如果发现文本全部为空优先检查每项加载时里目标元件是否选对。这轮校验通过之后一个基础的图片列表布局已经产生了。接下来才有资格谈自定义和进阶玩法。4. 多列切换、排序筛选和请选择视图的高级玩法4.1 动态面板承载中继器视图切换才有抓手一个中继器只对应一种模板样式和一种排列方式。想在同一页面上实现四列网格和八列紧凑列表的切换常见做法是把不同的中继器配置放在动态面板的不同状态里。具体操作在页面中拖入一个动态面板命名为列表容器给它添加两个状态大图卡片网格和紧凑列表。大图卡片网格状态里放A中继器紧凑列表状态里放B中继器。两个中继器的数据集结构保持一致但模板行设计不同。A中继器用大图卡片B中继器用左图右文的紧凑行。这样切换视图时只需要切换动态面板当前状态视觉布局就会随之改变而底层数据仍然是一致的。这个方法也是产品同学做演示时最喜欢用的效果——切换前后看起来是两套界面其实是同一批数据的两种展示方式。4.2 通过全局变量记住当前视图模式视图切换还需要考虑用户当前在哪个视图这个状态。比如B中继器切换回大图网格时页面要恢复A中继器的选中状态或者点击某个图片后跳转详情页回来后要保持在原视图。推荐用全局变量来记录视图模式。在大图卡片切换按钮的点击事件里设置动态面板为对应状态同时设置一个全局变量OnLoadVariable或自定义变量currentView值为grid或者list。在紧凑视图按钮里同理。跳转到详情页之前把currentView拼接到URL参数上详情返回时通过用例读取URL参数决定列表容器默认显示哪个状态。这套逻辑虽然简单却能让原型在演示时显得非常完整不像一个只能单向切换的半成品。4.3 排序给图片列表加一个最近更新优先做图片列表类原型排序是最容易被提需求的功能。中继器的排序功能不需要写复杂逻辑只要在每项加载时用例里增加添加排序操作即可。举例素材库要求按日期倒序排列最近上传的图片排最前。在每项加载时事件中添加排序→date→降序即可。如果要支持用户手动切换排序方式需要把排序条件放到按钮交互里。我的做法是页面上放两个单选按钮或下拉列表分别代表按日期排序和按标题排序它们触发中继器重新加载并在每次加载时按条件排序。注意中继器的添加排序是可以叠加多个条件的如果只想要一个条件生效最好在设置排序前先用删除其他排序清理一下。4.4 筛选用一个输入框实现前端模糊匹配筛选交互也比较直接。页面放一个文本框在文本改变时事件里调用中继器的添加筛选功能。筛选条件可以这样设置选择中继器当前行的title字段条件设为包含值取自文本框的当前文本。如果还需要按标签筛选就在同一用例里再添加一组筛选条件满足任一条件即可。这里有个细节当筛选条件组合很复杂时中继器的添加筛选面板会显得比较乱。我的习惯是先在旁边用便签记录当前要支持的筛选维度再逐条添加避免漏掉或重复。筛选和排序一起生效时顺序建议是先筛选后排序这样先缩减数据集再对缩减后的结果排序性能更稳。4.5 多列数量动态调整的另一种思路如果你做的布局不常切换模板只想要同样的大图卡片从一行4个调成一行6个那不需要动态面板直接通过交互修改中继器的每行项目数量即可。具体做法在中继器的样式面板中把每行项目数量、左右间距等参数记录下来然后在页面按钮的点击事件里使用设置列表样式操作修改当前中继器的每行项目数量为所需数值。这个交互在实际做B端原型时非常实用例如缩略图尺寸切换按钮本质上就是在动态调整每行数量和卡片高度。相比动态面板方案这种方式简单很多但它的局限性在于无法改卡片模板内部结构只能改排列密度。5. 加载、空态、删除确认那些容易被忽视的细节5.1 页面载入时的加载状态模拟很多原型里的图片列表打开后瞬间就显示全部数据没有加载过程。这在演示时容易被挑剔尤其是列表数据量大、图片多的情况下。我习惯在页面载入时先让列表容器处于一个加载中动态面板状态里面放一个加载动画或占位文字同时在页面载入时事件里加一个等待操作例如等待1.2秒然后切换动态面板状态到正式列表再触发中继器显示数据。这个等待时长不要拉太长1到1.5秒比较合适。太长会让查看原型的人觉得卡顿太短又体现不出加载态。在演示给不熟悉Axure的评审人员看时一个轻微但真实的加载态会让整个原型质感提升一个档次。5.2 数据为空时卡片区域不能就这么空白中继器数据被全部删光后列表区域会直接空白这会让演示陷入尴尬。你需要一个空状态。最稳妥的做法是把中继器放在一个动态面板里并给动态面板设置两个状态有数据和空状态。空状态里放一个简单的提示文案和添加示例数据按钮。怎么做检测在每次数据变化后判断中继器的数据集行数是否为0。如果为0将动态面板切换到空状态否则切换回有数据状态。判断的方法并不复杂在删除操作的用例末尾添加一个条件判断逻辑变量使用中继器的itemCount即可。这个细节看起来不起眼但产品经理看完以后通常会打个好评。因为这证明你考虑到了系统边界状态而不仅仅是画了一个图片排得好看的页面。5.3 每条数据都应该能从列表里删掉删除功能的实现思路卡片模板行中放置删除按钮在按钮的鼠标单击事件里使用中继器的删除行操作目标选择当前行条件按当前交互上下文或者直接用当前行即可。但这里有一个体验层面的问题Axure默认点击删除后数据立刻消失没有确认过程。在一个演示原型里误删一张图会让演示者非常尴尬因为没法撤回。所以我的做法是点击删除按钮时先弹出一个确认对话框动态面板上面显示确定删除这张图片吗确认后执行真正的中继器删除行操作并配合取消按钮关闭对话框。如果希望更加严谨还可以在删除时把数据行缓存到一个全局变量数组里并做一个撤销按钮。这个方案能让原型具备比较完整的删除交互闭环演示价值很高值得花时间实现。5.4 详情页跳转与当前行数据传递图片列表最常见的点击行为就是查看大图或查看详情。做法通常有两种第一种是弹窗方案。点击图片时打开一个动态面板弹窗弹窗里的内容通过设置文本等操作从当前行的数据字段赋值。需要注意必须通过中继器的当前行来引用数据否则弹窗里显示的永远是第一行内容。第二种是页面跳转方案。使用Axure的打开链接功能在当前窗口中打开详情页并把当前行id作为URL参数传递。详情页载入时读取参数再根据id从数据集中找到对应行并展示。在实际项目中我更推荐第二种方式。原因是它更像真实系统的页面流转逻辑也方便后续在原型中扩展详情页之外的跳转场景。唯一的成本是要处理一级页面参数传递和二级页面的中继器数据查询。5.5 收藏/标记功能可以用选中状态实现有时候图片列表里需要放收藏或星标的高亮状态。这个需求可以依托中继器的选中机制来实现。模板行中给收藏按钮创建两个样式默认状态是空心星选中状态是实心星。然后在中继器数据集里增加一个isFav字段取值0或1。在每项加载时事件中添加条件判断当isFav等于1时把当前行设为选中状态否则取消选中。然后在中继器的选中改变时事件里根据选中状态同步更新按钮样式。这样点击收藏按钮时Axure会自动切换行的选中状态视觉样式随之更新。如果还需要把收藏的数据单独筛选出来则再增加一个筛选条件只显示isFav为1的行即可。6. 原型文件变慢、引用失效等问题的排查与优化6.1 中继器数据量多大才会卡中继器虽好但也不是越多越好。一个中继器里放50条、100条数据预览流畅度还算可控但如果同时放五六张图片列表每张列表里再塞几百条数据原型预览会明显变慢甚至会出现图片加载半天转圈的情况。我的经验阈值是这样的演示用原型中单个图片列表的数据量控制在20到30条以内整页所有中继器加起来不超过100条。如果确实需要大数据量尽量把图片URL换成小尺寸缩略图或者先用本地静态图片占位而不是外链高清大图。数据分析如果图片本身就很大例如几MB的高清图Axure渲染的时候会很吃力。有人会习惯直接把截图拖进Axure结果原型体积迅速膨胀到几百MB。建议所有图片素材统一导出为宽度不超过800像素的压塑图可以显著减轻原型负担。6.2 当前行引用错乱问题中继器操作中当前行是最容易出问题的概念。典型场景在一个嵌套中继器或复杂列表中你想在图片卡片内引用当前行的title结果怎么取都是第一行或者最后一行。原因通常在于交互事件绑定在了中继器每项加载时但用例里引用数据时错误地使用了页面级变量而非当前行变量。还有就是删除或编辑操作中目标中继器选择错了比如页面里有两个中继器你本意是操作B中继器的当前行结果选成了A中继器。排查方法在用例编辑窗口中凡是要使用当前行字段的地方优先通过右侧添加局部变量选择中继器名 当前行 字段名不要手动输入Item.title这类拼接写法。这样能大幅减少引用错乱。6.3 动态面板嵌套层级过深导致交互失灵图片列表进阶玩法里动态面板嵌套几乎没有上限但嵌套层数多了以后交互事件的响应会变得奇怪。常见表现是点击卡片内按钮没有反应或者切换动态面板状态后按钮位置错乱。这通常是因为触发展板移动或切换时把磁贴元件放在了不可见状态下面导致点击被拦截。遇到这种情况我的调试顺序是先检查动态面板底部有没有盖住卡片的透明挡板再检查按钮是否被设置成禁用最后看事件绑定的动态面板名称是否在嵌套层级中被重命名而失效。6.4 设计一套自检清单避免交付前翻车每完成一个图片列表原型我在交付前都会按以下清单走一遍数据是否正确显示图片是否全部可加载空状态、加载状态是否存在并正常运行删除有确认、删除后有状态变化视图中单独切换正常返回页面时视图保持一致筛选、排序组合使用后数据结果符合预期详情跳转参数能正确传递返回后状态不丢失预览时页面交互无明显卡顿原型体积在合理范围图片素材无超大文件这些检查项看起来繁琐但在实际演示中能拦截掉绝大多数尴尬现场。有一次我就是因为没有检查筛选后删除再取消筛选这个组合场景测试时发现删除行后筛选条件错乱现场翻了车后来才补了这层检查逻辑。6.5 关于自定义的边界做到什么程度算够用最后聊一个设计取舍层面的问题。很多人做自定义图片列表时会一股脑把增删改查、视图切换、排序筛选全做进去结果原型越做越重维护成本高到连自己都不想打开。我个人的判断标准是原型阶段的自定义程度应该服务于方案沟通和验证而不是替代真正的开发实现。演示中能展示数据驱动、视图可切换、交互状态完整就已经达到了业务评审的目的。复杂业务规则如鉴权、分页加载、延迟渲染在Axure原型阶段完全可以不做留着在真正的产品原型文档里描述即可。如果项目周期紧优先保证数据驱动 空态 删除确认 视图切换这四件事其余的排序筛选可以等有富余时间再补。这个优先级排序在我自己的多个项目中反复验证过是性价比最高的组合。在具体操作上我最后再分享一个小技巧尽量为中继器的每行设置一个唯一id即使演示数据里用不上后续做删除确认后的恢复功能时就会非常顺手。在我的经验里凡是能从一开始就留好id字段的图片列表原型后期扩展都轻松很多没有留id的原型则几乎都要推倒重做数据集。做自定义图片列表布局真正值钱的部分从来不是画图而是这套数据结构和管理逻辑这也是Axure原型设计和简单画图的本质区别。