移动应用中图文列表随处可见，看似平淡无奇，背后也有许多可挖掘的细节和原理。这篇文章希望能帮助大家在工作中运用合适的方式呈现列表内容。

移动端图文列表视图大体分为两种表现形式：网格视图、列表视图。

网格视图

内容以垂直和水平的方式，展示在两列或更多列的小块中。通常以图片为主，少量附加信息，浏览效率高。

列表视图

一排只放一条内容。遵循自然的阅读模式，浏览效率较低。

细分有六种表现形式：

1.通栏图片，卡片式设计

使用场景：一般用在电商、旅游、视频等相关APP界面设计上。

优点：醒目，大气、辨识度高。

缺点：很占空间，浏览效率较低。

良仓

调调

淘宝

2.文字信息为主图片次要

使用场景：一般用在电商、资讯相关APP。适用于文字信息为主要内容的列表，图片不是很重要的信息。

左图右字

多为电商产品，露出部分内容信息，以帮助用户快速了解，找到感兴趣的内容。

美团

左字右图

以标题为主导，一般显示标题加图片，然后少量细节信息。帮助用户快速浏览。

ZAKER

3.横向浏览

优点：展示内容整体性强；左右切换流畅。

缺点：不适合展示过多页面，不能跳跃查看，视觉易疲劳。

ARTAND

旋转木马：横向浏览图片，当前（中间）的项目较大显示。

4.两列图片

宽度固定，长度不同

花瓣

尺寸统一

美丽说

5.三列图片

常用于用户中心。

优点：浏览效率高。

缺点：较拥挤，传递信息会打折扣。

6.四列图片

较少应用

iPhone照片

六种表现形式实际应用中常会混合使用。

有不足之处多多交流~ 喜欢的关注我哦~