“ 中继器应用的场景非常多,各类列表基本都可以通过中继器样式表现。”
这是《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.支付宝首页样式