菜单

内容展示形式如何选择

来自:花火 大雨 阅读数:73 2020/06/03


在设计内容展示页时,为什么各个app会以完全不同的展示形式呈现呢?这背后有什么特别的原因吗?


今天就和大家聊聊三种内容展示形式:瀑布流、网格、列表。


花瓣-瀑布流、B站-网格式、今日头条-列表式



1.瀑布流


什么是瀑布流


首先介绍一下瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,不断加载数据块并依次按照规则放入指定位置。


移动端常见为双列布局,PC端常见为根据屏幕宽度展示的多列布局。


它的特点是参差不齐的布局灵活美观,跟随滚动可以不停加载。打破了常规视线移动规律,可使用户更关注于内容本身,而不被内容区隔干扰,也提升了以图片为主场景下的寻找效率。动态大小的容器高度能保持不同比例内容的都得到完整展示,无需裁剪。



适用场景


1.浏览行为缺乏特别明确的目的性,以“逛逛”、“扫街”的心态为主;

2.以图片为首要检索对象。


缺点


1.使用场景较局限,只适用图片为主的内容;

2.对图片质量要求较高;

3.需要进行额外的适配,在不同浏览器上表现可能不同(主要指pc端)。


为什么花瓣首页适合用瀑布流呢


花瓣的首页是一个以“逛”为主的发现场景,靠图片和视频吸引用户点击,瀑布流形式提供了灵活美观的浏览体验,让用户沉浸在不断加载的内容中,持续被吸引。此外花瓣的内容(图片和视频)尺寸是非常多样,瀑布流能够很好地按照原始比例呈现内容,具有很强的包容性。



2.网格式


从表面看起来,似乎B站也是靠封面图吸引用户的,为什么没有采取瀑布流的展现形式呢?B站目前所采用的内容展示形式为网格式,我们首先来了解一下这种形式的特点。


什么是网格式


网格是一个连续的元素(continuous element),该元素由棋盘式、规律性的小格子构成,通常称这些格子为cells,单元格中包含有tiles。cells在网格中以垂直和水平的方式排列,一般来说cell的大小、比例和内容填充方式都是统一的,tiles的内容也是相似的。



适用场景


1.适合用于同类数据顺序浏览场景;

2.能较好地容纳格式不一致的内容,例如长度不同的标题、比例不同的照片或混合的数据集(例如照片、视频和书籍的混合集);

3.通常以图片为主体;

4.单元格之间都是同等重要的,也可以进行局部单元格放大以突出某个重点内容。


例如腾讯视频的布局,放大单个cell来突出重点,达到更好的引流效果,也一定程度打破网格布局的单调性。



缺点


单元格过于规整,差异度小,不利于突出重点。


为什么B站会使用网格式?


B站作为中长视频社区,内容基本为横屏尺寸,使用网格呈现更加清晰统一。另一方面,网格布局方便用户快速地以“z”字型浏览多个内容中,对封面图和标题等信息做比较挑选,以决定观看哪一个。




3.列表式


什么是列表式


列表式使用垂直排列的方式显示多行条目,一般会将同类元素放在统一的位置上,方便快速检索。查找效率高,便于对数据特性进行区分比较。并且内容兼容性强,可同时承载不同的内容主体,比如同时展示文章、视频、图片的集合。



适用场景


1.适合展示同类数据或数据组;

2.适合区分比较单个或多个类型数据的特性。


缺点


每行信息差异度较小,不利于突出重点。


使用案例:今日头条首页信息流


头条的内容核心是文本。因此瀑布流和网格式这些以图片视频为主体的呈现形式明显与知乎的内容形式不匹配。这种情况下,适合用于文本或图像的连续垂直索引的列表式就非常适合了。



4.瀑布流、网格式、列表式应用场景总结


综上讲解了瀑布流、网格式和列表式的应用场景和优缺点,总结为如下表格,方便大家对比使用。




结语


每种内容呈现形式的背后都来自内容形式、内容消费方式、用户行为习惯等的综合考虑,适合自己的才是最好的哦。



感谢阅读,以上内容由花火圆桌出品,转载请注明出处及作者!





往期原创文章


6种常见控件使用方式

如何建立用户体验地图

设计师如何攻克大厂面试关





- END -


                                                      花火圆桌

花火社群自2017年成立至今已经汇集了 18000+设计小伙伴,在这里有干货、有直播、常分享、共成长,快来加入我们吧!


                                                      加huahuokefu进微信群,一起交流成长!
                                                       关注公众号回复关键词可获得最新资源
                                                          软件 | UI | 交互 | C4D | 动效 | 插画


花火公众号

关注花火公众号

回到顶部