Web产品的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应的原型画法。
除了通过表格来画出简单列表之外,我们还可以通过中继器来画出列表,相应的原型效果请查看https://jg2wis.axshare.com。如需下载本文的AxureRP源文件,请添加作者微信langzipm。
另外作者单独写了一篇文章详细介绍列表组件的高级交互,有兴趣的同学可以扩展阅读如何用Axure画出Web后台产品的列表组件:高级交互。
一、使用中继器画出列表
如果仅需演示列表效果无需填充数据,请根据下述步骤进行操作。
1、先考虑清楚列表包含多少个字段。从默认元件库拖动相应数量的“矩形1”到画布合适位置,修改成合适尺寸。
![6ef3f0d206231ed0dfee97da824ead6d.png](https://i-blog.csdnimg.cn/blog_migrate/0e2bebc33c8cd859c09bc70a59f03e84.png)
2、同时选择列表头的所有字段名,建议修改为“左侧对齐”,填充颜色修改为#F2F2F2,即第一排倒数第二个颜色。线段颜色修改为#D7D7D7,即第一排倒数第三个颜色。