两种基本内容呈现模式的概述 - 列表视图和网格视图 - 为两者提供了一个用例。

虽然大屏幕手机逐渐成为主流趋势，但小型手机更方便携带。但与台式机和笔记本电脑屏幕相比，手机屏幕（无论屏幕尺寸如何）都可以提供更少的内容。通常，用户只能预览少量内容，需要滚动屏幕才能看到更多内容。

今天，我将概述两种基本的内容呈现模式 - 列表视图和网格视图 - 并为两者提供一个用例。

列表视图和网格视图。来源：MaterialUp

列表视图

该列表垂直呈现多个行项目作为连续元素。它的文字很重，通常有很小的图标和文字。列表视图项目所需的垂直空间比图像少，因此它可以在屏幕上显示更多列表项目。

列表视图的示例。图像来源：材料设计

内容扫描

列表视图为用户提供遵循自然阅读习惯的模式，即F形阅读模式。

Web内容的F形阅读模式示例

该列表最适合呈现相同类型的数据并针对阅读理解进行优化。列表视图可以通过缩短页面来避免过多滚动。排除图像（列表视图只有小图标）允许您在每个屏幕上放置更多选项。

具有典型扫描模式的列表的示例。图像来源：材料设计

应当注意，当处理列表视图时，用户的注意力从上到下递减。

决策

用户主要依靠阅读文本内容来做出选择。

利弊

与网格视图相比，列表视图具有以下优点：

列表视图遵循自然阅读模式。

列表视图通过在可见区域中提供更多选项来防止过度滚动。

但它也有一些缺点：

在视觉外观方面，列表视图的效果并不理想。

在列表视图中，用户的注意力从上到下递减。

网格视图

网格视图是标准列表视图的另一个选项。网格列表不同于用于布局和其他视觉呈现的网格，其由网格列表中的垂直和水平排列的单元组成。

网格列表的示例。图像来源：材料设计

内容扫描

网格视图为用户提供了更具破坏性的扫描格式，使其成为可视内容的理想选择。通常，这些图像占据大部分细胞空间。

具有典型扫描模式的网格示例。图像来源：材料设计

通过网格视图，用户的注意力可以更均匀地分布在每个网格单元之间。因此，网格视图可以优化视觉理解并区分类似的数据类型。

用户决定

用户主要依靠图像进行选择。这里应该注意，用户只能同时看到4-6个网格选项。

电子商务代购源码网站的网格视图示例。

利弊

网格视图具有以下优点：

·网格视图更引人注目。

·网格视图可帮助用户确定项目之间的视觉差异

·在网格视图中，用户的注意力分布更加均匀。

但它也有以下主要缺点：

·网格视图需要创建更长的页面，迫使用户过度使用滚动。

在下面的示例中，您可以看到列表视图和网格视图之间的差异。

红线显示屏幕的可见部分。图片来源：nngroup

观点的经验法则

查看内容的最有效布局是什么？我应该使用列表还是网格视图？正确答案是：视情况而定。

选择列表视图和网格视图的关键因素是用户在项目之间做出选择所需的信息量。但是，这是什么意思？这一切都可以追溯到设计的主要原则 - 内容为王。您应该选择适合您所显示内容类型的布局。

信息使用列表，使用网格的图像

产品页面是规则的一个很好的例子，产品的细节非常重要。对于家用电器等产品，模型，等级和尺寸等细节是选择过程中的主要因素。因此，使用列表视图呈现内容是最合理的。

适用于iOS的WallMart应用

对于需要较少产品信息或类似产品的应用程序，网格视图是一个不错的选择。对于服装等产品，在选择产品时要考虑的文字产品信息较少，您可以根据产品的外观做出决策。在此浏览过程中，用户关注产品之间的视觉差异，他们更喜欢滚动页面进行产品比较，而不是在列表页面和产品详细信息页面之间反复切换。

MrPorter iOS应用程序

在设计这些布局时，请选择合适的图像大小以便识别，但它可以节省空间，以便在第一时间看到更多产品。

谁的用户体验更好？

最终，使用列表视图和网格视图的决定应与对用户最有价值的内容保持一致。请记住，用户体验与人性有关，而不仅仅是模式。根据用户及其需求找到最合适的视图模式非常简单：提前构建模拟过程并使用少量用户进行测试。无论视图形式如何，使用户更有效地工作的视图是最好的！

作者：尼克巴比奇

地址：https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b

« 我到位解密数字营销，并与宁波进口商就新零售的性质进行深入讨论 | 网络优化专家经验：如何加快响应式代购源码网站的速度？ »