介绍
虽然现在的趋势是手机屏幕越来越大，但真正让手机如此轻薄的还是其体积小。与台式电脑甚至笔记本电脑的屏幕相比，手机的小屏幕只能容纳较少的内容信息，用户只能看到当前屏幕的一小部分，然后才能滚动查看更多内容。
译者：散打不留点gpj 转载自：人人都是产品经理
翻译自：#.
今天，我将重新审视信息呈现的两种基本模式——列表视图和网格视图——并为每种模式提供相关的用例。
列表视图和网格视图
1. 列表视图
列表垂直呈现多个连续的行元素。列表视图侧重于文本内容，因此通常只有一些小图标散布在文本信息中。为了在当前屏幕上同时显示更多的列表项，列表中的每个项目需要比图片更少的垂直空间。
列表视图示例
1.内容浏览
列表视图的内容呈现方式更符合人们的自然阅读模式，例如F形模式。
网页上的 F 形示例
列表视图最适合显示相同类型的数据，并且易于人们阅读和理解。通过更少的页面（即每页更多的内容），列表视图减少了用户的滚动压力。排除图像（列表视图只有缩略图，完整图像占用空间）进一步允许您将更多内容放入视图的每个屏幕中。
典型浏览模式下的列表示例
最后但并非最不重要的一点是，当用户浏览列表视图时，他们的焦点从上到下逐渐减小。
2. 用户如何做出选择
用户主要依靠阅读文本信息来做出决定。
3. 优点和缺点
与网格视图相比，列表视图具有以下优点：
列表视图遵循人们的自然阅读模式；
每个屏幕可以显示更多的信息/选项，减少用户过多滚动页面的麻烦；
其缺点是：
列表视图缺乏视觉表现力；
在列表视图中，用户的注意力会从上到下递减；
2. 网格视图
网格视图是标准列表视图的替代方案。网格视图通过网格线和用于布局的其他视觉提示清晰地区分。网格视图由垂直和水平排列的重复项目组成。
网格视图示例
1.内容浏览方式
网格视图创建了稍微暂停的浏览模式，使其最适合视觉内容。通常，图像占据视图元素的大部分空间。
典型浏览模式下的网格视图
用户的注意力在每个网格单元之间均匀地移动。网格视图可以更轻松地直观地理解和区分相似类型的数据。
2. 用户如何做出选择
在网格视图中，用户主要依靠图片来做出选择/决定。需要注意的一件事是，用户只能同时注意到 4-6 个网格单元。
网格视图应用在
3. 优点和缺点
网格视图具有以下优点：
网格视图更吸引用户眼球；
网格视图帮助用户区分单元格项目之间的视觉差异；
用户注意力在视觉视图中的统一转移；
缺点：
(1)网格视图会导致内容信息分布在更多的页面上。因此，用户需要滚动更多次才能看到更多信息。在下面的示例中，您可以看到两种视图的比较：
红线表示每个屏幕包含的信息量。
3. 缩略图使用的一般准则
那么最有效的内容呈现布局方案是什么？您应该使用列表视图还是网格视图？正确答案是：这取决于。
选择列表视图？还是网格视图？一个关键因素是用户需要浏览/比较多少信息才能做出选择/决定。这意味着什么？这一切都归结为一个主要原则：内容为王。您应该选择适合您的内容类型的视图布局。
使用列表显示详细信息，使用网格显示图像
产品页面就是一个完美的例子。对于家用电器等产品，产品型号、评级和尺寸规格是用户选择的关键因素，列表视图很有意义。
iOS客户端
网格视图更适合对产品信息要求较少或产品相似的情况。例如，在选择服装产品时，您更关注产品的外观，而不太关心文字描述。在这种情况下，用户更关心单元元素之间的视觉差异，更愿意滚动页面进行比较，而不是在列表页和详情页之间反复来回切换。
iOS客户端
设计这些布局时，请选择适当的图像尺寸，使其足够大以供用户识别，但又足够小以在同一屏幕上显示更多产品。
4. 使用哪种方案取决于用户体验
最后，是使用列表视图还是网格视图取决于哪种信息（文本描述或图片）对用户最有价值。请记住，用户体验是关于探索人性，而不仅仅是在模型层面。找到最合适或用户友好的解决方案自然很简单：对主要流程实体进行建模并找到一组用户进行测试。提高用户效率的解决方案才是赢家。