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原型设计和简单画图的本质区别。
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原型设计和简单画图的本质区别。