赞助商
立即赞助

基础小科普!浅谈「列表视图」与「网格视图」的用法

交互设计3年前 (2021)发布 流光
2.2K 0 0

@Daidai丶呆 :本周的译文纯粹聊了聊「列表视图」跟「网格视图」在电商产品应法则。篇 Medium 收获1.5K数章,把,思考视图,详细析。

一、根据信息选择合适的视图

从已,迭程相识。抽空写篇「列表视图」「视图」章享各。

基础小科普!浅谈「列表视图」与「网格视图」的用法

列表视图(图左):

  • 列表视图适合许多长文本信息的展示,如标题、描述、评论等,它可以帮助用户更好的理解商品的相关信息;
  • 阅读习惯眼模研究,列表视图符「应该左,右」验结。

网格视图:

  • 网格视图更多的是突出图像的。它更适用于文字信息较少,图像层级更重的页面。
  • 用户主要以图像确认网格视图的信息,所以通常可以一次扫描4-6个视图。

列表视图和网格视图都可以看成是一个组件,组成元素有图像、标题、评论、位置等。区别就在于将这些元素进行合理的布局或组合,用于页面的相关信息展示。

二、搜索与查看

基础小科普!浅谈「列表视图」与「网格视图」的用法

通过多次的 A/B 测试表明:列表视图用于搜索结果展示页更受用户的欢迎。但是,在主页和类别页面上观察到相反的情况,其中大多数参与者在浏览和查看他们可能想要的商品详情时,更喜欢用网格视图。因为网格视图更突出图像本身,首先通过对图像的了解,再查看其它更详细的信息,是用户在电商产品中的主要使用习惯。

总而言之,我们需要在相关页面中给出更加合理的视图,符合用户的心理预期。如,网格视图让用户大致了解了某商品信息,触发用户点击欲望;列表视图让用户了解某商品详细信息,触发用户下单欲望。

三、尽量减少信息,帮用户做选择

基础小科普!浅谈「列表视图」与「网格视图」的用法

许多人认为列表视图具有更多空间,能放置更多信息,其实不然。用户很容易被各种各样的信息淹没,陷入选择悖论。如,你在列表视图上放置了大量信息,用户就无法一眼辨识出该商品的大体信息,也就被轻易忽略了。

A/B 测试也是一种了解哪些信息会影响用户做出决定的好方法。我们发现标题、价格、评论、位置、商品说明和金额都会对转化产生一定影响。而这些信息中,标题、价格、评论(数)是必不可少的。因此它们在两种视图中都有一定的比重。其余的信息,就根据场景来做删减即可。

基础小科普!浅谈「列表视图」与「网格视图」的用法

如今,我们仍然能看到许多电商产品在设计时采用列表视图与网格视图。这是件好事,我们应该根据每个页面的目的,做出相应的展示形式。符合用户当时的场景才最为重要。这句话不仅仅针对两种视图的选择,在其他功能的设计上也是如此。

学会充分利用两个视图,不要在这两个视图上放置相同的信息,否则就会导致两个视图失去自身的应有价值。

四、最后给用户展示更好的内容

有了以上的视图选择建议,之后就是底层逻辑了。

基础小科普!浅谈「列表视图」与「网格视图」的用法

你还记得你看到的眼睛凝视强度从上到下减少的热图吗?通过查看这份热图,可以根据浏览历史记录、用户的搜索情况、关注卖家的行为、喜欢的商品等因素构建推荐算法,并使用它来对商品进行排序,推给用户。

研究,除,响户?,假颜户择围巾键息,应该描述颜息。仔细息,许例。

以上内容就是电商产品在视图选择上的原因所在。希望帮助到各位。

原文链接:《List or Grid, It Is Not Important》  Mei

呆呆是前阿里设计师,自学能力超强,在网络上输出过很多干货。最近他推出了《呆呆邮报》,每周 1 – 2 篇会员期刊,通过邮箱发送,内容涵盖产品设计、科技、艺术等领域,想和大牛近距离接触,这可是个绝佳机会 → 订阅《呆呆邮报》

欢迎关注译者的微信公众号:「呆呆U理

基础小科普!浅谈「列表视图」与「网格视图」的用法

图片素材作者:ueno.

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

各大厂商的秋招正在进行中,校招的残酷在于:HC 缩减并且竞争越来越激烈的同时,许多已经有大厂实习等光环背书的同学更具优势...
求职面试
讨论一个比较常见的问题。 读者: 呆呆,这个图的卡片列表里,标题用省略号合适吗? (因为原图涉及读者项目隐私,所以重画...
交互设计
今天,咱们还是来聊找工作必备物品——作品集。这一篇文章将从整体角度上分享整理作品集时应该遵循的三个基础原则,分别是美观...
作品集
换工作对于我们来说是一件很大的事,每一家公司的选择都会影响我们的职业生涯走向。我也知道很多朋友都在准备面试和跳槽,那...
求职招聘
引言 虽然设计师们总在尽量避免用户在使用产品时发生错误,但我们的用户还是时不时会给我们一些小“惊喜”,与错误不期而遇。我...
产品细节
用户调研这个事情能够帮助设计师更好地了解用户,只有同用户进行足够长时间、足够深入的互动,才会真正洞悉需求,作出真正令...
UX设计
编者按:这篇文章来自资深 UX 设计师 Jeremial Lam。在他分享过自己的工作经历之后,有不少设计行业从业者私信 Jeremial ,问...
求职面试
@卫夕君 :有一些互联网产品,你用起来非常不爽,感觉明明可以做的更顺畅但非要为难用户,每当遇到这样的产品你一定会吐槽产...
产品设计