加入收藏 | 设为首页 | 会员中心 | 我要投稿 常州站长网 (https://www.0519zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 策划 > 正文

移动用户体验设计之列表视图与网格视图

发布时间:2018-02-02 01:13:31 所属栏目:策划 来源:产品100
导读:副标题#e# 尽管大屏幕手机已逐渐成为当下主流趋势,但是小尺寸的手机更加方便和便携。不过与台式机和笔记本电脑屏幕相比,手机屏幕(无论屏幕大小)所能呈现的内容要少得多。通常用户只能预览一小部分内容,需要滚动屏幕才能查看更多内容。 今天,我将概述

网格视图

网格视图是标准列表视图的另一种选择。网格列表与用于布局和其他可视化演示的网格不同,网格列表由网格列表中垂直和水平排列的单元格组成。

移动用户体验设计之列表视图与网格视图

网格列表示例。    图片来源:Material Design

内容扫描

网格视图为用户提供了更具中断性的扫描格式,使其最适用于视觉内容。通常,这些图像占据了大部分的单元格空间。

移动用户体验设计之列表视图与网格视图

具有典型扫描模式的网格示例。    图片来源:Material Design

使用网格视图,用户的注意力能够在每个网格单元之间分布地更均匀。因此,网格视图可以优化视觉理解和区分相似的数据类型。

用户决策

用户主要依靠图像进行选择。这里需要注意的是用户在同一时刻只能看到4- 6 个网格选项。

移动用户体验设计之列表视图与网格视图

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

优点和缺点

网格视图有以下优点:

  • 网格视图更吸引眼球 。

  • 网格视图帮助用户判断项目之间的视觉差异。

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

但它也有下面的主要缺点:

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

在下面的示例中,你可以看到列表视图和网格视图之间的区别。

移动用户体验设计之列表视图与网格视图

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

(编辑:常州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读