江苏龙网

  1. 首页 > 资讯 > 科技 > >

|C端列表页如何设计？( 三 )


本文插图

通过上面的三个步骤 ， 我们可以确定每个场景下 ， 不同内容在列表页面所应该展示的信息以及信息间的展示级别关系 。
2. 列表页面采用哪种风格？
确定了展示的信息后 ， 设计者还需要考虑列表页面的风格 。 在不同的场景 ， 产品所希望呈现给用户的感知是不同的 ， 有的希望展示格调、有的希望营造“逛”的体验 ， 还有的会希望明了一些 ， 而列表页面的样式风格 ， 会直接影响用户的感知 。
比如下边三个常见的列表样式
|C端列表页如何设计？
本文插图

图一的卡片形式：视觉效果很好 ， 显得很有格调 。 但单个内容占用的页面空间比较大一些 ， 且为了营造好的视觉效果 ， 对于内容的配图要考究很多 ， 多用在传递格调的场景中 ， 比如精品图片社区、大牌服装的自有APP等；
图二网格类型：通过图片+标题的密集排列和较为明显的分割留白 ， 更容易营造出“逛”的场景感 ， 在推荐以及首页中经常使用；使用这种样式 ， 需要产品内有足够多的内容支撑；
图三平铺类型：应该是最常见的 ， 优点是信息量的展示和空间的占用比较平衡 ， 适用于高效浏览 ， 如搜索结果页面、新闻列表等信息较多的场景下 。
设计者需要根据列表的使用场景 ， 确定所希望传递给用户的感知 ， 来进行整体风格的确定 。
总结
列表页作为产品中最常见的页面之一 ， 是用户浏览产品中内容的主要页面 ， 承载着“说服”用户到内容详情 。 本文通过确定列表页展示的信息和确定列表页面风格两方面 ， 为列表页面的设计提供一些思路 。
作者：海先生 ， 公众号：慢言录
本文由 @海先生 原创发布于人人都是产品经理 。 未经许可 ， 禁止转载
题图来自Unsplash ， 基于CC0协议


推荐阅读


上一篇：小糖糖的音乐|天猫双11实时成交额突破3723亿！京东双11累计下单金额突破2000亿

下一篇：|叩响科创板，依图科技的招股书里说了些啥？