1. 中继器做商品列表到底比手动复制粘贴强在哪刚接触AxureRP8的朋友十个里有八个做商品列表是这么干的画一个矩形当卡片里面塞上图片占位符、标题文本、价格文本然后CtrlC、CtrlV复制出七八个再一个个改文字、换图片。做完一页看着挺像那么回事但只要产品经理说一句“再加三个商品”或者“把价格从低到高排个序”你就得从头再来一遍。这种做法的根本问题在于你做的不是“列表”而是一堆“长得像列表的静态图形”。中继器Repeater就是专门来解决这个问题的。你可以把它理解成一个“数据驱动的容器”——你只需要告诉它数据长什么样、每一条数据怎么展示剩下的事情它自己会处理。数据有几条它就渲染几个卡片数据改了界面自动跟着变要排序、要筛选、要分页全都是中继器自带的能力不需要你手动去挪任何一个元件。这个案例的核心价值在于它是从“画界面”到“做系统”的分水岭。商品列表是电商类原型中出现频率最高的组件之一掌握了中继器做列表的方法你后面做订单列表、用户列表、消息列表、搜索结果页全都是同一套逻辑换个字段名而已。说白了这是一次投入、到处复用的技能。这篇文章我会从中继器的数据组织方式讲起一步步拆解商品列表的完整制作流程包括数据集的字段设计、Item内部布局的注意事项、分页和排序的交互配置以及我自己在实际项目中踩过的几个印象比较深的坑。不管你是刚打开AxureRP8的新手还是用过中继器但总觉得“差点意思”的老手应该都能从里面找到有用的东西。2. 先搞清楚中继器的“数据-模板-渲染”三层结构2.1 中继器不是普通元件它是一个微型数据库很多人第一次打开中继器的数据集面板时会有点懵——这不就是个表格吗没错中继器的数据集本质上就是一张二维表每一列是一个字段Column每一行是一条记录Row。比如商品列表你至少需要这几个字段商品图片、商品名称、价格、销量、是否包邮。这些字段名你自己定义中继器不关心你叫什么它只负责存储和读取。关键在于理解数据集里的数据和你看到的界面是分离的。数据集是“源”界面上的卡片是“渲染结果”。你改数据集里的价格界面上对应的价格文本会自动更新你往数据集里加一行界面上就多出一个商品卡片。这种分离带来的好处是你不需要关心“怎么展示”只需要关心“展示什么”。我习惯在设计数据集之前先在纸上或者脑子里把商品卡片上要显示的信息列清楚。因为一旦数据集建好、Item布局做完再想加字段就要同时改两个地方容易漏。常见的商品列表字段设计如下字段名类型用途备注goodsImg图片商品缩略图建议用统一尺寸的占位图goodsName文本商品标题控制在两行以内price文本售价建议存纯数字方便排序sales文本销量可用于排序freeShip文本是否包邮用“是/否”或“1/0”tag文本促销标签如“新品”“热卖”字段名建议用英文或者拼音不要用中文。虽然AxureRP8支持中文列名但在后续写交互条件或者用函数读取数据时中文列名容易出问题尤其是在复制粘贴或者跨文件迁移的时候。这个坑我后面还会细说。2.2 Item区域决定了每一条数据长什么样中继器在画布上默认显示三部分顶部是“项加载时”的事件标签中间是Item区域也就是一条数据的模板底部是分页控件默认隐藏。Item区域是你唯一需要手动设计的地方——你在这里放一个矩形、一个文本标签、一个图片占位符中继器就会按照这个模板为数据集里的每一条记录复制一份。这里有一个非常重要的概念Item区域里的元件它们的“值”不是固定的而是通过“设置文本”“设置图片”等动作从中继器的数据集中动态读取的。比如你在Item里放了一个名为“nameLabel”的文本标签你不能直接在里面写“某某商品”而是要在“项加载时”事件里添加一个“设置文本”动作选择nameLabel值设置为[[Item.goodsName]]。这样当每一条数据加载时中继器会自动把对应行的goodsName字段值填进去。[[Item.字段名]]这个语法是中继器数据绑定的核心必须记牢。Item代表当前正在加载的这一条记录后面的字段名就是你在数据集里定义的列名。除了Item还有[[Repeater]]代表中继器本身[[TargetItem]]代表交互目标项这些后面用到再说。2.3 渲染顺序和性能的关系中继器加载数据是有顺序的默认按照数据集里的行顺序从上到下渲染。如果你有几百条数据Axure在预览时会一次性全部渲染出来页面会变得很卡。所以在实际项目中我一般会把数据集控制在20条以内用于演示超过的部分用分页来处理。AxureRP8的中继器自带分页功能可以设置每页显示条数这个后面会讲。另外Item区域里的元件越复杂嵌套越深、样式越多渲染速度越慢。我见过有人的Item里套了动态面板、套了中继器、还加了一堆阴影和圆角预览时每翻一页都要卡两三秒。所以Item的设计原则是能用矩形就不用动态面板能用纯色就不用渐变图片尽量用占位符而不是真实大图。原型嘛传达清楚信息就够了不需要做成视觉稿。3. 从零搭建一个商品列表数据集、Item布局与数据绑定3.1 数据集初始化的两种方式打开中继器的数据集面板你会看到一个空表格。添加数据有两种方式一是手动一行一行敲二是从Excel或CSV导入。手动敲适合数据量少、字段简单的情况导入适合数据量大、或者你已经在Excel里整理好了商品数据。手动添加的操作是双击表格的空白行输入数据按Tab键切换到下一列按Enter确认。注意中继器数据集里的每一列都有一个“列名”你可以在列头上双击修改。列名一旦确定后面在Item里绑定数据时就要严格对应大小写敏感。导入的方式是点击数据集面板上方的“导入”按钮选择CSV文件。这里有个细节CSV的编码最好是UTF-8否则中文可能会乱码。另外导入时Axure会问你“第一行是否包含列名”如果你的CSV第一行是字段名就选“是”这样Axure会自动把第一行作为列名从第二行开始作为数据。我个人的习惯是先在Excel里把数据整理好包括字段名和数据行然后导出为CSV再导入到中继器。这样做的好处是数据可以在Excel里反复修改、排序、筛选改好了再导入比在Axure里一行行敲效率高得多。而且Excel里可以做数据验证避免出现空值或者格式错误。3.2 Item区域的布局要点Item区域的设计直接决定了商品列表的视觉效果。我一般会按照“左图右文”的经典电商卡片布局来做左侧放一个图片占位符尺寸设为80x80命名为“goodsImg”右侧上方放一个文本标签命名为“goodsName”宽度设为卡片宽度减去图片宽度再减去间距右侧中间放一个文本标签命名为“price”字体加粗、颜色用红色右侧下方放一个文本标签命名为“sales”字体小一点、颜色用灰色如果需要显示包邮标签可以在价格旁边放一个小矩形命名为“freeShipTag”所有元件的命名一定要规范不要用“矩形1”“文本2”这种默认名。因为后面在“项加载时”事件里要选择元件、设置值如果元件名乱七八糟你根本分不清哪个是哪个。命名规范建议用“功能类型”的方式比如“goodsNameLabel”“priceText”“salesText”一看就知道是什么。Item区域的整体尺寸也要注意。中继器在画布上的宽度是固定的Item的宽度如果超过了中继器的宽度会出现横向滚动条或者被裁剪。所以Item的宽度应该等于或略小于中继器的宽度。高度可以自由设置中继器会根据Item的高度自动计算每一条数据占用的垂直空间。3.3 项加载时事件数据绑定的核心逻辑Item区域设计好之后选中中继器在右侧的“属性”面板里找到“项加载时”事件双击进入交互编辑。这里要做的事情就是把数据集里的字段值赋给Item里对应的元件。具体操作步骤点击“添加动作”选择“设置文本”在“配置动作”里勾选“goodsNameLabel”在“设置文本”的值输入框里点击“fx”图标选择“Item.goodsName”确定后值会变成[[Item.goodsName]]重复以上步骤为priceText设置[[Item.price]]为salesText设置[[Item.sales]]对于图片操作类似只是动作类型选择“设置图片”然后值选择[[Item.goodsImg]]。注意数据集里的图片字段存的是图片的路径或者URL如果你用的是本地图片需要确保预览时图片文件在正确的相对路径下。我一般建议用Axure自带的图片占位符或者用在线图片的URL避免路径问题。对于包邮标签可以用“设置面板状态”或者“设置可见性”来控制。比如当[[Item.freeShip]]等于“是”时显示包邮标签否则隐藏。这个需要在“项加载时”里添加一个“显示/隐藏”动作并设置条件。这里有一个容易忽略的点中继器的“项加载时”事件是每加载一条数据就触发一次。也就是说如果你有10条数据这个事件会被执行10次。所以事件里的动作要尽量精简不要放太多复杂的逻辑否则会影响渲染速度。4. 分页、排序与筛选让商品列表真正“活”起来4.1 分页控件的配置与样式调整中继器默认自带分页功能但分页控件默认是隐藏的。要启用分页选中中继器在属性面板里找到“分页”区域勾选“启用分页”。然后设置“每页项目数”比如每页显示4个商品。设置完成后预览时中继器底部会出现分页控件包括上一页、下一页、页码等。分页控件的样式可以自定义。在画布上选中分页控件你可以修改它的字体、颜色、间距。但更灵活的做法是不用中继器自带的分页控件而是自己画一组按钮通过交互动作来控制中继器的分页。比如画一个“下一页”按钮点击时添加动作“设置当前页”选择中继器页码设置为“下一页”。这样做的好处是样式完全可控而且可以做出更复杂的交互比如跳转到指定页。我一般会在中继器下方放一个文本标签用来显示“当前第X页共Y页”。这个可以通过中继器的[[Repeater.pageIndex]]和[[Repeater.pageCount]]来动态显示。在“项加载时”或者页面加载时设置这个文本标签的值为第[[Repeater.pageIndex]]页共[[Repeater.pageCount]]页。注意这个文本标签不能放在Item区域里面否则每一条数据都会显示一遍。4.2 按价格排序用交互动作重新排列数据商品列表最常见的交互之一就是按价格排序。中继器的排序功能可以通过“设置中继器数据”或者“排序”动作来实现。具体操作是画一个“价格排序”的按钮点击时添加动作“排序”选择中继器然后选择排序的字段比如price设置升序或降序。这里有一个关键细节price字段如果存的是文本排序会按照字符串的字典序来排而不是数值大小。比如“100”会排在“99”前面因为“1”的字符编码小于“9”。所以price字段最好存纯数字并且在排序时选择“按数值排序”而不是“按字母排序”。AxureRP8的排序动作里有一个“排序类型”选项可以选“数值”或“文本”一定要选对。另外排序动作会重新触发“项加载时”事件所以Item里的数据绑定会自动更新。你不需要手动去刷新界面。但要注意排序后当前页会重置到第一页这是符合预期的行为。如果要做“升序/降序”切换可以给按钮添加一个“切换”状态或者用两个按钮分别控制。我一般用一个按钮点击时先判断当前排序方向然后设置相反的排序。这个需要用到全局变量来记录当前排序状态稍微复杂一点但逻辑不难。4.3 按关键词筛选用“添加筛选”动作实现搜索搜索框加筛选是商品列表的标配。实现方式是在页面上放一个文本输入框命名为“searchInput”和一个搜索按钮。点击搜索按钮时添加动作“添加筛选”选择中继器设置筛选条件为[[Item.goodsName]]包含[[searchInput.text]]。这里要注意筛选条件里的[[searchInput.text]]是获取输入框的当前文本。如果输入框为空筛选条件会变成“包含空字符串”这会导致所有数据都被筛选出来因为所有字符串都包含空字符串。所以最好加一个条件判断如果输入框不为空才执行筛选如果为空就移除所有筛选。移除筛选的动作是“移除筛选”选择中继器即可。我一般会在搜索按钮的交互里加一个条件如果[[searchInput.text]]不等于空则添加筛选否则移除筛选。这样用户清空搜索框再点搜索就能恢复完整列表。筛选和排序可以叠加使用。比如先按关键词筛选再按价格排序中继器会先筛选出符合条件的记录再对结果进行排序。这个顺序是Axure内部处理的你不需要关心。5. 那些让我熬夜排查的中继器“坑”5.1 字段名大小写不一致导致数据绑定失败这个坑我踩过不止一次。在数据集里定义列名的时候我写的是“goodsName”但在Item的“项加载时”事件里手误写成了“goodsname”或者“GoodsName”。Axure不会报错但预览时对应的文本标签就是空的什么也不显示。排查的时候要一个个字段去对非常费时间。后来我养成了一个习惯在数据集面板里定义好列名之后直接复制列名然后粘贴到“项加载时”的值表达式里。这样能保证大小写完全一致。另外Axure的表达式输入框里[[Item.后面输入的时候Axure其实会有一个下拉提示列出当前中继器的所有字段名。如果你手动敲很容易敲错如果用下拉选择就不会有问题。所以尽量用下拉选择不要手动敲字段名。5.2 Item区域里的元件命名冲突中继器在渲染多条数据时每一条数据都会复制一份Item里的元件。这些复制出来的元件它们的名字是相同的。比如Item里有一个“priceText”渲染出10条数据后页面上其实有10个“priceText”。如果你在Item外面用“设置文本”动作去操作“priceText”Axure会不知道该操作哪一个结果就是只有第一个或者最后一个被修改。所以所有针对Item内部元件的操作都必须放在“项加载时”事件里通过[[Item.字段名]]来动态赋值。不要在Item外面直接操作Item里的元件。如果你需要在点击某一条商品时改变它的样式应该用“选中”状态或者“触发事件”的方式而不是直接去改元件属性。5.3 图片路径问题导致预览时图片不显示数据集里的图片字段如果存的是本地图片路径比如“C:\Users\XXX\Desktop\img1.png”在你自己电脑上预览可能没问题但把RP文件发给别人或者换一台电脑预览图片就全挂了。因为那个路径在别人电脑上不存在。解决办法有两个一是用Axure自带的图片占位符不存真实图片路径而是存一个颜色值或者一个简单的标识然后在Item里用矩形填充颜色来模拟图片。二是用在线图片的URL比如一些免费的图床链接。但要注意在线图片需要网络连接才能显示如果预览环境没有网络也会显示不出来。我一般做原型演示的时候直接用不同颜色的矩形来代表商品图片上面写个“商品图”三个字。这样既不会出现路径问题又能清楚表达布局。如果客户要求必须看到真实图片效果我会把图片嵌入到RP文件里Axure支持嵌入图片而不是用外部路径。5.4 分页后“项加载时”事件的重复触发这个坑比较隐蔽。中继器的“项加载时”事件不仅在初始加载时触发在翻页、排序、筛选之后也会重新触发。也就是说如果你在“项加载时”里放了一些“只应该执行一次”的逻辑比如给某个全局变量赋值、或者发送一个请求那么每次翻页都会重复执行导致数据错乱。我遇到过一个场景在“项加载时”里累加一个计数器想统计总共加载了多少条数据。结果翻页之后计数器翻倍了。后来才明白每次翻页都会重新触发所有当前页数据的“项加载时”事件。所以任何有副作用的操作都不应该放在“项加载时”里。如果确实需要可以用一个全局变量做标记确保只执行一次。5.5 中继器嵌套中继器时的性能问题有些复杂的商品列表每个商品卡片里还有一个“规格选择”的小列表这时候就需要在中继器的Item里再放一个中继器。这种嵌套中继器的做法在AxureRP8里是支持的但性能会明显下降。如果外层有10条数据内层每个有5条数据总共就是50次渲染预览时会非常卡。我的建议是尽量避免嵌套中继器。如果确实需要展示规格信息可以用动态面板的不同状态来模拟或者用文本标签拼接字符串来展示。比如把规格信息拼成“颜色红/蓝/黑尺寸S/M/L”这样的文本而不是用嵌套中继器去渲染。原型阶段信息传达清楚比交互炫酷更重要。6. 从商品列表延伸到通用列表组件的设计思路6.1 把商品列表抽象成可复用的“列表模板”做完一个商品列表之后你会发现订单列表、用户列表、消息列表的结构几乎一模一样左边一个图标或头像右边上面是标题下面是副标题或者描述最右边是状态或者时间。区别只是字段名不同、Item里的布局略有差异。所以我后来养成了一个习惯做一个“通用列表模板”的中继器Item里放好图片占位符、标题文本、描述文本、右侧文本字段名用通用的“img”“title”“desc”“extra”。然后每次做新的列表直接复制这个中继器改一下字段名和Item布局就行了。这样能省下大量重复劳动。更进一步你可以把这个通用列表模板做成一个“母版”Master。AxureRP8的母版功能允许你在多个页面之间复用同一个组件。如果母版里放了中继器那么所有引用这个母版的页面都会共享同一个中继器数据集。修改母版里的数据集所有页面都会同步更新。这个在做大型原型的时候非常有用。6.2 用中继器做“空状态”和“加载状态”商品列表还有一个常见的需求当没有数据时显示“暂无商品”的提示当数据正在加载时显示一个加载动画。中继器本身不直接支持空状态但可以通过交互来实现。思路是在页面加载时先判断中继器的数据行数是否为0。如果是0显示一个“空状态”的动态面板否则隐藏它。判断数据行数可以用[[Repeater.itemCount]]这个表达式。在页面加载时添加一个条件如果[[Repeater.itemCount]]等于0则显示空状态面板。加载状态可以用一个动态面板来模拟。在数据加载之前显示“加载中”面板数据加载完成后隐藏它。但Axure是本地原型工具没有真正的异步加载概念所以这个效果主要是视觉上的模拟。我一般会在页面加载时先显示加载面板然后设置一个“等待”动作比如等待500毫秒再隐藏加载面板、显示中继器。这样预览时就能看到加载动画一闪而过。6.3 中继器数据与外部数据的对接思路AxureRP8的中继器数据集是静态的数据在設計时就固定了。但有时候我们需要根据用户的输入动态生成数据比如用户在一个输入框里输入“苹果”点击搜索后商品列表里出现苹果相关的商品。这种动态数据中继器本身做不到但可以通过“设置中继器数据”动作来模拟。具体做法是预先在数据集里准备好几组不同的数据比如“苹果相关商品”“香蕉相关商品”“橙子相关商品”。然后根据用户的输入用“设置中继器数据”动作切换到对应的数据集。这个动作可以在交互里选择“设置中继器数据”然后选择要切换到的数据集名称。更高级的做法是用JavaScript来动态生成数据但这需要AxureRP8的“打开链接”动作里执行JS代码超出了基础操作的范围。对于大多数原型需求来说预置几组数据、根据条件切换已经足够演示了。7. 我在实际项目中总结的几条经验做中继器商品列表最耗时的往往不是操作本身而是数据准备和调试。我现在的习惯是先在Excel里把数据整理好字段名用英文数据行控制在10到20条然后导入中继器。Item布局先用最简的矩形和文本标签搭出来确保数据绑定没问题再去美化样式。这样万一数据绑定出问题排查起来也简单不会被复杂的样式干扰。另外中继器的“项加载时”事件里动作的顺序很重要。如果先设置文本再设置图片和先设置图片再设置文本效果是一样的但如果有条件判断顺序就可能影响结果。我一般会把所有“设置文本”放在前面“设置图片”放在后面“显示/隐藏”放在最后。这样逻辑比较清晰也方便后续修改。还有一点中继器的数据集面板是可以拖拽调整列宽的但列的顺序一旦确定最好不要随意调整。因为Item里的数据绑定是按列名来的不是按列的位置。你调整列的顺序不会影响数据绑定但会让你自己在看数据集的时候容易看花眼。所以列的顺序也保持稳定和Item里的布局顺序对应起来这样检查数据的时候一目了然。最后说一个心态上的体会中继器刚上手的时候确实会觉得概念多、操作绕但一旦你用它做过两三个列表就会发现它的逻辑其实非常一致——数据集定义“有什么”Item定义“长什么样”项加载时定义“怎么填”。这三层想清楚了剩下的就是熟练度的问题。我见过很多设计师画静态界面很厉害但一遇到列表就手动复制效率低还容易出错。花一个下午把中继器吃透后面省下来的时间是以小时计的。