树型列表结构宽度调整_如何用Axure画出Web产品的列表组件：基础画法

Web产品的列表组件在画原型的时候比较常见，所以PM有必要深入了解它的各种交互效果和对应的原型画法。

除了通过表格来画出简单列表之外，我们还可以通过中继器来画出列表，相应的原型效果请查看https://jg2wis.axshare.com。如需下载本文的AxureRP源文件，请添加作者微信langzipm。

另外作者单独写了一篇文章详细介绍列表组件的高级交互，有兴趣的同学可以扩展阅读如何用Axure画出Web后台产品的列表组件：高级交互。

一、使用中继器画出列表

如果仅需演示列表效果无需填充数据，请根据下述步骤进行操作。

1、先考虑清楚列表包含多少个字段。从默认元件库拖动相应数量的“矩形1”到画布合适位置，修改成合适尺寸。

2、同时选择列表头的所有字段名，建议修改为“左侧对齐”，填充颜色修改为#F2F2F2，即第一排倒数第二个颜色。线段颜色修改为#D7D7D7，即第一排倒数第三个颜色。