在移动设备上，搞清楚到底要使用哪种内容布局方式是一个棘手的问题，移动设备上的空间是有限的，用户在需要滑动屏幕之前只能查看到少量的内容，而不同于电脑可以给予你所有的屏幕空间让你来发挥。
你最终想知道什么才是最有效的布局，应该使用列表视图还是网格视图呢？你的决定将会影响到用户如何快速且容易的找到他们想要查找的东西。
列表视图VS网格视图
列表视图在一个列表中显示内容，它文本占比高，并且没有图片，最多，你可以在文本旁边显示小图标或缩略图，用户主要依靠阅读文本内容来进行决策。
网格视图把内容显示在2栏或多栏带图片的列表中，图像占据着大部分空间，用户依靠图片来进行决策。
列表视图防止过渡滚动
为了更吸引人的眼球，许多设计师会使用网格视图，但问题是，网格视图会迫使用户滚动更多。
包含了图片的网格视图显然会使页面更长，用户需要滚动更多才能查看到更多的选项，对于用户来说这需要更多次滚动。
列表视图使页面可以短一些并且防止过多滚动，没有图片可以在每屏上显示更多的选项，你还可以使用accordions（可折叠控件）在同一屏幕上显示子选项，使用户可以快速通过浏览标签来查找所需内容。
列表视图防止草率的选择
网格视图不仅迫使用户进行更多的滚动，也使用户作出仓促的选择，用户往往会因为图片比较吸引人就选择一个选项。
而这往往会导致用户没有找到所需的内容，必须返回并继续滚动，在如此之多的图片刺激下，很容易误导用户和让用户分心。
列表视图可以防止用户草率的做出选择，文字内容提供了足够精确的信息来帮助他们找到他们想要的内容，通过浏览所有的选项足以另用户做出最佳的选择。
网格视图是更进一步检查细节的最佳模式
除了美观及吸引人外，网格视图可以帮助用户更进一步检查细节，例如，如果一个用户想要购买一件衬衫，在他们的意识里将有一种已知的类型，只有在用户将内容定位到一个类别时，网格视图才是最有效的。
一个满是衣服的网格视图对于注意力的分散胜过帮助，因为只有少数的这些将是衬衫的图片，用户在浏览时必须通过滚动过滤掉很多不相关的图片。
但一旦用户在位于他们想要的衬衫类别中，图片将有更多相关性，他们可以更轻松的查找、浏览甚至衬衫的某些细节。
总结思考
大多数用户都很忙，在浏览移动页面时都没有足够多的时间，他们需要能够快速的找到他们想要的内容，而你选择的布局是关键。
在桌面（Desktop）上的布局你可以更灵活，但是移动端，你的选择至关重要，做到让用户看到更多的内容并且做最少的操作，就是赢家。
————————
1.原文链接：http://uxmovement.com/mobile/list-vs-grid-view-when-to-use-which-on-mobile/
2.分享个故事：——这个绝对是硬需！——呃，竟然反应并不热烈……
持续关注 UX/UI、黑客增长、AR/VR、区块链、自动驾驶及改变世界，关注微信公众号：iThinkBigger
网友评论