如何巧用栅格视图打造更好的APP产品体验

2016080501

在电子商务类app中应用栅格视图的原因是什么呢?什么样的案例更适合使用栅格列表而不是简单的列表视图呢?在这篇文章中,你会找到这两个问题的答案。

什么是栅格视图

栅格视图是制作标准列表视图的另一种选择,一个栅格视图在垂直和水平布局上,把你的内容分成两列或多列的单元格。

2016080502
一个栅格列表包含重复的单元格模式,并在水平和垂直方向进行排列布局

卡片式内容

栅格视图在展示产品信息的时候没有过多的附加信息——店铺访问者能看到的信息描述通常也只是商品的名称和价格。

2016080503
以卡片式布局为例,图片占据着单元格大部分空间,文本也限制字数以免过多的换行

浏览模式

栅格视图提供给用户一种间断式浏览方式,它在相同的数据类型之间保证良好的视觉理解力和差异化是非常适合的。用户注意力能平均地分布在每一个单元格:让用户视线可以在图片间自由跳转而不必担心顺序和连续性。

2016080504
允许用户跳读的图片

视线轨迹图,展示了用户访问一个销售沙发的电子商务网站时,他们都看了哪里。每一个蓝点都代表了一次注视,蓝点越大表明注视的时间越长。

2016080505
每一个蓝点都代表了一次注视,蓝点越大表明注视的时间越长

含义非常的明确:对于用户目标和商业目标非常重要的信息元素应该在首屏显示。用户对显示器下半部分的关注远不如首屏。有趣的是,人们对图片中人物模特的关注要多于对产品本身的关注。

2016080506
在栅格视图展示中,一张带有人物模特的沙发图片会比单一的沙发图片吸引更多的注意力

决策

用户主要依据图片来进行选择,这使得栅格视图对于相似产品布局来说非常有优势(在你需要通过产品外观做决定的情况下)。例如,如果一个用户购买鞋子,他/她在脑海中已经有明确的款式。用户可以在浏览鞋子的过程中很容易地认出他/她所寻找鞋子的某些细节。

2016080507
栅格视图更吸引消费者的目光

图片的主要好处,是使栅格在布局搭建中成为非常有用的手段。图片在发挥传达产品第一感觉作用的时候,产品描述是远远做不到的。如果用户看到的是低质量的产品图片,他们的信任感就会很自然地减少,他们将不愿意购买。因此,要确保你的产品图片高清、大小合适,同时能提供完整的产品信息。

2016080508
左图:失真图片。右图:正常分辨率

滚动方向

栅格视图仅以垂直方向的展开最具代表性,一般不鼓励栅格视图横向展开,原因是这种展开方式与标准的阅读模式冲突,影响理解力。在视图初始滚动的位置和超出内容滚动的方向相衔接的地方,你需要切断栅格内容。

2016080509

在视图初始滚动的位置要避免栅格内容沿视图边缘水平对齐,因为这种放置不能有效地传达出还有更多的内容

每屏产品图片数量

在排布单一种类产品的时候,大图几乎是很有必要的,因为用户关心每个商品的视觉差异,并更愿意在一个长页里滚动,而不是在栅格视图页和商品详情页反复的切换。

2016080510
用户通常一次看4或6项商品

栅格视图vs. 列表视图

当涉及到手机设备,如何知道你的产品应该选择哪种布局?你需要用列表视图还是栅格视图?这个决策会影响到用户寻找目标商品的速度和难易程度。

在强调不同的数据类型时,栅格视图和列表视图的结构是不同的。在栅格视图中,图片的优先级高于文本,而在列表视图中,文字的优先级高于图片。

2015080511
栅格视图和列表视图

对于手机设备而言,用户的屏幕空间是有限的,在滚动以便浏览更多内容之前,用户一次只能看到一小部分内容。栅格视图创造了更长的页面,同时推动用户以滚动的方式浏览更多的内容。下面的例子中,你可以看到列表视图和栅格视图的区别。

2016080512
红线表示了屏幕的可视部分

然而,在列表视图和栅格视图中做选择一个的关键因素是:用户在选择商品时需要知道的信息数量。它完全回归到了“用户是上帝”。产品的细节非常的重要,选择适合你所要展示内容的布局:

  • 像家电类产品——需要展示产品型号、技术规格以及在选择过程中起主导作用的好评率——使用列表视图更明智些。列表视图在展示更多产品细节上会提供更多的空间。

2016080513
WallMart的iOS应用

  • 像服装类产品,在选择商品的时候,不需要考虑太多的商品介绍,栅格视图是个不错的选择。

2016080514

如果你不确定你的店铺适合哪种布局,你需要进行A/B测试并双方面估量转化率,去确定哪个形式更好些。

关键点

如果通过布局方式鼓励用户浏览,用户将会在一个页面中向下滚动到很远,首屏的信息内容使他们相信向下滚动是非常值得的。俗话说一图胜千言。在栅格视图中使用高质量的图片,在提升销售上是至关重要的,试着在每一屏显示更多的产品图片。

当在列表视图和栅格视图中选择的时候,遵循一个简单的原则:文本内容用列表视图,图片内容用栅格视图。最终决定使用哪种视图需要与对用户最有价值的信息相匹配。

结论

人们真正需要的是有用的信息,他们喜欢在做出全面购买决策时能够提供他们足够信息的布局。谢谢!

3 1 收藏 评论

相关文章

可能感兴趣的话题



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