编辑指南:Web产品的Radio组件在绘制原型时比较常见，因此产品经理需要对其各种交互和对应的原型绘制方法有深入的了解。本文作者根据自己的实践经验，用Axure分享了制作Web产品列表组件的基本绘制方法，供大家参考和学习。

除了通过表格画简单的列表，我们还可以通过复读机画列表。请查看相应的原型效果:https://jg2wis.axshare.com。

此外，作者还单独写了一篇文章，详细介绍了列表组件的高级交互，感兴趣的同学可以展开阅读:如何用Axure: Advanced Interaction绘制Web后端产品的列表组件。

01使用repeater绘制列表

如果您只需要演示列表效果而不需要填写数据，请按照以下步骤操作。

1.首先考虑列表包含多少字段。将默认组件库中相应数量的“矩形1”拖到画布上的适当位置，并将其修改为适当的大小。

2.同时选择列表标题中的所有字段名称。建议将其改为“左对齐”，填充颜色改为# F2F2F2，即第一行倒数第二个颜色。线段颜色改为#D7D7D7，这是第一行从下到上的第三种颜色。

3.同时选择列表头中的所有字段名，右键单击“设为组合”，然后在右侧边栏中设置组合名称“列表字段名”。

4.将“中继器”从默认组件库拖到列表标题下方的适当位置，并将其命名为“列表字段值”。如果不需要填写数据，建议点击右侧边栏中的“交互”按钮，删除默认事件“每个项目加载时”。

5.双击中继器进入内部，将默认组件库中对应数量的“矩形1”拖动到画布上合适的位置，修改到合适的大小。建议改为“左对齐”，线段颜色改为#D7D7D7。

02将演示数据填入列表

要将演示数据填入列表，请按照以下步骤操作。

6.修改列表中的所有字段名称，并根据需要调整字段数量。

7.点击“列表字段值”重复按钮，将右侧边栏切换为“样式”，点击数据区的“右侧增行”图标，多次点击，直到数量与列表字段数量相同。

8.在“数据”中输入演示数据，可以逐个编辑。它还支持将列表数据从excel复制到这里。

9.单击“列出字段值”重复按钮，切换到右侧栏中的“交互”，单击“新建交互”按钮，选择触发条件“当每个项目被加载时”，添加动作“设置文本”，选择“字段值1”作为目标，单击值后面的fx，进入“编辑文本”弹出窗口，删除输入框中的值，然后单击“插入变量或函数”

10.在“设置文本”操作后单击“添加目标”,然后选择“字段值2 ”,并将其值设置为item。列1以同样的方式。

11.在设置最后一个“字段值6”之前，将其值设置为item。第5列也是如此。

12.考虑到商品名称比较长，需要调整对应列表项字段名和字段值的宽度，以保证不需要换行显示。

13.单击“预览”按钮，然后在浏览器中查看原型效果。