【Axure9 百例】47.CSDN 的列表样式

​“ 中继器应用的场景非常多，各类列表基本都可以通过中继器样式表现。”

这是《Axure9 百例》系列第 47 篇

数据列表在各类 APP、网站上都能看到，表现形式丰富多样，标题栏、菜单栏、文章列表、作品缩略图、新闻列表等，典型的网站页面可浏览 CSDN、InfoQ、人人都是产品经理，APP 类的可看看淘宝、微信、得到、极客时间、网易云音乐，到处可见列表类数据。

数据列表样式的表现方式最好的元件是中继器。

​

我们看看几种常见的列表样式，以 CSDN 网站为例，里面基本包含了各类列表。

1、单行：同一行上有多条数据，样式类似，上面的场景 1、3、5。

2、单列：自上而下的方式，样式类似，上面的场景 7。

3、网格排布：有多行数据，每行显示固定数目的内容后换行，像网格一样排列，上面的场景 2、4、6

01

—

界面布局

分别看一下以上 7 种场景的中继器样式的设置。

场景 1：单行菜单栏

你如果说，我直接用文本标签不行嘛。。。当然也行，这里只说明使用中断器的思路。

准备好数据，中继器默认是从上往下顺序展示的：

布局样式：

因为菜单只有一个文字内容，布局上相对比较简单，双击中继器进入编辑状态，将默认的矩形框边框设置为 0，即不需要边框，如果经过时背景颜色为灰色。

中继器样式：

中继器的样式里需要设置一处，方向水平：

场景 2：多行菜单栏

同样，这个菜单也只有文本，使用默认的矩形即可，准备好默认的数据。

布局样式：

设置菜单的样式，鼠标经过时的红色文字。

中继器样式：

水平排列，网格排布，每行 10 个，适当设置行间距和列间距。

场景 3：单行图文

数据列表的内容包括图标和文字，中继器的字段有两个，分别是图片和菜单内容。

布局样式：

要新增个图片元件作为图标，菜单名称矩形框无边框，鼠标经过时的文字颜色为红色。

中继器样式：

设置方向为水平，适当设置列间距。

场景 4：多行图文

和上面的单行图文菜单类似，只是布局是图标在左，菜单在右，并且是两行显示。

布局样式：

左图右文的布局

中继器样式：

水平布局，网格排布，每行 2 个，行间距 10，列间距 20。

场景 5：单行卡片

这个和单行的菜单的区别就是内容上的元件更多，样式表现更丰富，我们只要把布局设计好。

布局样式：

5 个元件，一个背景，可以用图片代替，一个主标题，一个两行内容的副标题，查看更多的链接和图标

中继器样式：

布局方向设置为水平，设置列间距。

场景 6：多行图文列表

多行图文在样式上更丰富，每项内容里包括的内容有多个图片和文字。

这个视频列表里包括了视频封面图片、直播标识、视频标题、作者头像和名称，中继器数据里包括这几个字段。

样式布局：

两张图片，三个标签，两一个矩形框（右上角直播和下方的视频名称的背景区域），组成了视频数据列表。

中继器样式：

参考前面的设置方法，这里的布局方向为水平，网格排布，每行显示 3 个。

场景 7：单行文章列表

虽然是自上而下的单个列表，每一行中的数据也是比较丰富，包括序号、标题、来源和阅读数。

布局样式：

三个标签和两个图标，序号在前 3 位的显示图标，否则只显示文字。

关于中继器的多场景设置，请查看 【Axure9百例】46.多条件判断 

中继器样式：

03

-

小结

中继器是个非常好用的元件，它的内容自定义布局的方式，可以充分发挥它的列表功能，列表内容的丰富性在于你的产品需求。并且根据多条件设置的技巧，可以在列表中显示不同的样式，提供更好的产品原型设计体验。

往期回顾

【Axure9百例】45.多条件判断

【Axure9百例】45.中继器的不同样式

【Axure9百例】44.百度网盘拖动按钮样式

【Axure9百例】43.百度网盘验证

【Axure9百例】42.支付宝首页样式

产品原型设计是产品经理的基本技能，本系列是 Axure9 原型设计的基础知识普及，目标是通过一百个案例，从不同的使用场景来学习 Axure9 的应用。希望你能通过点赞、在看或转发，让行业内更多的人一起学习，共同提升我们的原型设计能力，提高我们的产品设计能力。