内容呈现最有效的布局方案,是列表视图还是网格视图？.pdf

内容呈现最有效的布局方案 ，是列表视图还是网格视图 ？ 尽管现在手机屏幕的趋势是 做 大 ，然而实际上真正使得手机如此轻便的地方正在于它的小尺寸 。相比于台式电脑 ，甚至笔记本电脑的屏幕 ，手机的小屏幕都只能容纳更少的内容信息 ，用户在滚 动查看更多内容前只能在当前屏幕中看到很少一部分。 今天我要重新审视信息展示的两种基本模式——列表视图和网格视图 ，并为各自提供相关用例加以 说明。 列表视图和网格视图 一、列表视图 一个列表垂直呈现多个连续的行元素。列表视图重在文本内容 ，因此通常只有一些小图标穿插在文 本信息内。为了同一时间能在当前屏幕中显示更多的列表项内容 ，这就要求列表中的每一项在垂直 方向上占用相比于图片更少的空间。 列表视图示例 1、内容浏览 列表视图的内容呈现方法更符合人们自然的阅读模式 ，如F形模式。 网页上的F形示例 列表视图最适合用来显示同类型的数据 ，并易于人们的阅读理解。通过减少页面 （即每一页包含更 多内容 ），列表视图降低了用户的滚动压力。对图片的排斥 （列表视图只有缩略图 ，完整的图片占 用空间 ）更使得视图的每一屏允许您以适应更多的内容。 典型浏览模式下的列表示例 最后一点同样重要的是 ，当用户浏览列表视图时 ，他们的注意力从上到下依次降低。 2、用户是如何做选择的 用户主要依靠阅读文本信息来做出决定。 3、优缺点 相比于网格视图 ，列表视图有以下优点 ： 列表视图遵循人们的自然阅读模式 ； 每一屏能够展示更多信息/选项 ，减轻了给用户带来太多滚动翻页的麻烦 ； 其缺点在于 ： 列表视图在视觉外观上缺乏表现力 ； 列表视图中 ，用户的注意力会自上而下减弱 ； 二、网格视图 网格视图是标准列表视图的一种替代方案。网格视图由用来做布局的网格线和其他视觉线索将其明 显区分出来。一个网格视图由在垂直和水平方向上重复排列的元素项构成。 网格视图示例 1、内容浏览模式 网格视图营造了一个略微有停顿感的浏览模式 ，使得它最适合于视觉内容。通常情况下 ，图片占用 了是视图元素的绝大部分空间。 典型浏览模式下的网格视图 用户的注意力在每个网格单元间均匀迁移。网格视图更易于视觉理解 ，并区分相似类型的数据。 2、用户是如何做选择的 网格视图下用户主要依靠图片来做出选择/决定。而需要注意的一点是用户在同一时刻只能注意到4 - 6个网格单元。 Eco mmerce 中的网格视图应用 3、优缺点 网格视图有以下优点 ： 网格视图更吸引用户眼球 ； 网格视图有助于用户区分单元项间的视觉差异 ； 视觉视图中用户注意力均匀迁移 ； 不足之处 ： （1 ）网格视图会导致内容信息分布在更多的页面 ，因此 ，用户需要为了看到更多信息需要滚动更 多次。下面例子中你可以看到两种视图的对比情况 ： 红线部分标示出每一屏容纳的信息量 三、关于缩略图使用的一般准则 那么究竟对于内容呈现来讲什么是最有效的布局方案呢 ？你到底该使用列表视图还是网格视图呢 ？ 正确的答案是 ：看情况而定。 选择列表视图 ？还是网格视图 ？一个关键的因素是用户为了做选择/决定究竟需要l浏览/对比多少 信息。这到底是神马意思 ？这一切都归为一个主要原则 ，即内容为王。你应该根据你的内容类型来 选择与之合适的视图布局。 详情使用列表 ，图片使用网格 商品页面是一个极为恰当的例子。对于像家用电器这样的商品 ，其产品型号、评分和尺寸规格是用 户做选择的关键因素 ，采用列表视图就很有意义。 WallMart iO S客户端 网格视图则更适合于那些要求更少的商品信息或者商品类似的情况。比如服装类商品 ，你挑选时更 在意商品外观 ，对于文本描述则次要很多。在这种情况下 ，用户更关心单元元素间的视觉差异 ，也 更愿意滚动页面来进行比较 ，而不是多次重复的在列表页和详情页间来回切换。 MrPo rt er iO