移动UX设计模式:列表视图vs网格视图

1

尽管大屏幕手机是流行趋势,但还是小尺寸的移动电话更方便易携,相比于台式机和笔记本的屏幕,手机屏幕容纳的内容要少一些,用户只能预览少量的内容,再通过滑动来查看更多内容。

今天我要为大家举例介绍概述内容的两种基本模式 —— 列表视图和网格视图 


列表视图和网格视图

来源: MaterialUp

列表视图

多个行元素排列为一个连续的元素。它承载的的文本较多并且通常只有小图标与文本两部分组成。列表视图项需要的垂直空间比图像要小,可以让更多的列表项同时在屏幕上显示出来。

2
列表视图举例

来源: Material Design.

内容扫视

列表视图使用户可以遵循他们自然的阅读模式,例如F型模式。

3
F型模式浏览网页内容

列表最适合用来呈现相似的数据类型和优化内容可读性。列表视图可以减少滚动,使页面更短。去掉图像(列表视图只用到手势操作)能让你在固定面积的屏幕中接触更多的选项。

4
列表的典型扫描模式示例

来源: Material Design.

并且用户在处理列表视图时,随着视线从上而下的移动注意力在慢慢减少。

决策

用户主要依靠阅读文本来进行选择。

利弊

与网格视图相比,列表视图有以下优点:

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

· 列表视图防止过量滚动,在可见区域内提供更多的选择。

但它也有一些缺点:

· 在视觉外观上,列表视图非常中庸。

· 在列表视图中用户的注意力从上到下逐渐减少。

网格视图

网格视图是标准列表视图的一种替代方法。网格列表用不同的网格来进行布局和其他视觉演示。网格列表由重复的单元格组成,单元格通过水平和垂直线分割。

5
网格列表的示例

来源: Material Design.

内容扫视

网格视图为用户在扫视过程中提供了更多的中断,使其最适合视觉内容。通常图像占单元空间的主导地位。

6
模式网格典型扫视范例

来源: Material Design.

用户的注意力往往是均匀地分散在各个网格单元间。网格视图可以优化视觉理解并且区分相似数据类型。

决策

用户主要依靠图像进行选择。重点是——用户往往只能同时看到4个或6个网格项

7
电子商务网站的网格视图示例

利弊

网格视图有以下好处:

· 网格视图更吸引人们的眼球

· 网格视图可以帮助用户发现各个项目之间的视觉区别

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

但它也主要有以下缺点——网格视图的页面较长,并迫使用户更经常使用滚动。下面的例子可以看出列表视图和网格视图之间的区别。

8
红线标出屏幕的可见部分

图片来源: nngroup

通用经验法则

什么是查看内容最有效的布局方式?你应该使用列表还是网格视图吗?

正确的答案是:具体情况具体分析

选择列表视图与网格视图的关键因素是:用户在项目之间进行选择时需要多少信息。这是什么意思?一切都回到设计的主要准则——内容就是一切。你应该选择适合你展示内容类型的布局。

展现细节选列表,高清大图选网格

产品页面是这一规则很好的例子。产品的细节是非常重要的部分。 像家电这样的产品选择过程中需要参考很多细节,如型号,评分和尺寸这些主要参考因素。对于这类产品,列表视图更合适些。

9
沃尔玛的iOS版App

当app内的产品信息较少时,网格视图是不错的选择。对于服装类产品,人们选择项目时往往需要较少的文本信息和较多的图片信息。因为你通常是根据服装类产品的外观来决定买哪件的。在这个选择过程中,用户更关心各个选项间的视觉区别,宁可滚动单个长页也不愿反复在列表页和产品详情之间切换。

10
Mrpoter app for iOS

设计这些布局时要选择合适大小的图像,使他们可以被识别并且用户可以同时看到更多的产品。

这是用户体验的一部分

最终使用列表视图还是网格视图应该与什么对用户最有价值联系起来。记住,用户体验是以人为本的,而不仅仅是一种模式。这很容易找出什么最有利于用户和他们的任务:用他们与一些用户进行测试。让用户更加高效的工作才是最后赢家。

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部