写点什么

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

用户头像
zhuchuanming
关注
发布于: 2021 年 03 月 29 日
【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 的应用。希望你能通过点赞、在看或转发,让行业内更多的人一起学习,共同提升我们的原型设计能力,提高我们的产品设计能力。



发布于: 2021 年 03 月 29 日阅读数: 25
用户头像

zhuchuanming

关注

产品交互原型设计/Axure 2017.11.24 加入

公众号「axurestore」,产品交互原型设计/Axure

评论

发布
暂无评论
【Axure9百例】47.CSDN的列表样式