移动端的页面设计,使用网格还是列表视图?

设计 INFO院院长 46℃ 0评论

在移动设备上对内容进行布局是一项棘手的任务。桌面设备上可有充足的屏幕空间。但在手机上,屏幕空间有限。用户在滚动页面之前只能查看屏幕上一小部分内容。

想看看最有效的布局是什么吗?使用列表视图还是网格视图?你的决定可能会影响用户是否快捷方便的找到他们想要的东西。

列表与网格视图

列表视图在单个列列表中显示内容。文本多,没有图片。最多是在文本旁边显示小图标或缩略图。用户依靠阅读文本来进行选择。

网格视图用两个或多个列显示内容。图像占据了大部分的空间,文本内容很简洁。用户依靠图像进行选择。

移动端的页面设计,使用网格还是列表视图? 图1

防止列表视图的滚动条太长

设计师大多喜欢更吸引眼球的网格视图,但问题是这种布局会迫使用户滚动更多次。

因为网格视图含有图片会导致页面变长,需要用手指滚动很多次才能看完页面上所有的内容。

列表视图的页面短。没有大图,可以在屏幕上放置更多内容。还可以添加‘手风琴’式的子选项菜单。用户通过文本内容可以找到他们想要找的东西。

移动端的页面设计,使用网格还是列表视图? 图2

列表视图防止做出草率的决定

网格视图不仅强迫用户滚动很多次来查看更多的内容,还会使他们做出草率的决定。因为用户容易受到图像的干扰而去关注吸引他们的图片。

这样很容易导致没有选择他们真正想要的东西。所以用户必须返回并再次去滚动页面。多图的内容很容易让用户分心而误操作。

列表视图防止这些事情发生。提供了足够准确的信息,帮助他们找到他们想要的内容。通过查看所有内容,他们能够做出最好的选择。

移动端的页面设计,使用网格还是列表视图? 图3

网格视图最适合检查细节

除了美观性,网格视图还帮助用户查看细节。例如,用户在购买一件衬衫,有自己想要的款式。所以在网格视图里才能更有效的展示这些细节。

网格显示的多种类的衣服会分散用户的注意力,因为衬衫只是少数的种类。用户可以过滤掉不相关的种类再查看这些视图。这样用户就可以轻松的查看衬衫的某些细节进而准确的做出决定。

移动端的页面设计,使用网格还是列表视图? 图4

最后的思考

大多数用户都很忙,没有太多的时间。他们希望在手机上能够快速找到他们想要的内容。因此选择哪种布局是实现这一目标的关键。

桌面上会有更多的灵活性,但在手机上,你的选择很重要,当然你也可以采取列表与网格兼用的措施。允许用户用很少的操作却能看到更多的内容才是赢家。

原文作者:anthony

转载请注明:INFO院 » 移动端的页面设计,使用网格还是列表视图?

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址