浅谈「列表视图」与「网格视图」的用法

本周的译文内容很少,纯粹聊了聊「列表视图」跟「网格视图」在电商产品中的应用法则。但这篇在 Medium 上收获 1.5K 点赞数的文章,把大家平时经常看到,但很少去思考为什么这么做的视图,做了一个详细分析。

下面进入译文。

根据信息选择合适的视图

因为从事电商行业已经有一段时间,且在迭代的过程中学到了不少相关知识。所以抽空写了一篇关于「列表视图」与「网格视图」的文章分享给各位。

列表视图(上图左):

  • 列表视图适合许多长文本信息的展示,如标题、描述、评论等,它可以帮助用户更好的理解商品的相关信息;
  • 通过阅读习惯与眼动模型的研究,列表视图符合「最重要的内容应该置于左边,次要的放在右边」的实验结果。

网格视图:

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

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

搜索与查看

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

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

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

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

A/B 测试也是一种了解哪些信息会影响用户做出决定的好方法。我们发现标题、价格、评论、位置、商品说明和金额都会对转化产生一定影响。而这些信息中,标题、价格、评论(数)是必不可少的。因此它们在两种视图中都有一定的比重。其余的信息,就根据场景来做删减即可如今,我们仍然能看到许多电商产品在设计时采用列表视图与网格视图。这是件好事,我们应该根据每个页面的目的,做出相应的展示形式。符合用户当时的场景才最为重要。这句话不仅仅针对两种视图的选择,在其他功能的设计上也是如此。

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

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

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

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

再是研究那些销量很高的产品,除了推广之外,在设计上有什么影响用户的布局方式?如,假设颜色是用户选择围巾的关键信息,那么就应该在描述的开头就说明可选颜色的信息。如果仔细看一些平台的商品信息,你会发现许多这样的例子。

大致如此了,以上内容就是电商产品在视图选择上的原因所在。

uxplanet

译文地址:呆呆U理

作者:Mei

译者:呆呆

(0)

相关推荐

  • 40个使用「混合模式」与「不透明度」来设计的 LOGO 作品

    小编:哈喽小伙伴们,今天给大家分享一篇漂亮的LOGO作品,出自俄罗斯设计师  iliasc 之手.作者使用AI软件中「混合模式」与「不透明度」2个简单的功能使得所有的LOGO颜色都非常通透美丽,有兴趣 ...

  • 解析:「点赞」与「收藏」功能

    看到点赞跟经常被拿来做文章,于是也手痒难耐想写点,虽然是老生常谈的话题,还是希望能帮助各位理解其内在含义. 01 点赞,往小了说就是用户用以表达自己立场的小功能 -- 不晓得用什么言论予以支持,但只需 ...

  • 浅谈程序员最核心的竞争力

    进行社招面试时,有一个问题几乎是必问的:你为什么要离开上一家公司?其实这个问题主要是想试探一下求职者的核心诉求,并借此预估一下他在本公司工作的稳定性.常见的答案也无非就是这么几种:对薪酬不满意.干得不 ...

  • 浅谈网站如何经营管理?

    建置好一个网站,便要正式迈向经营的路程.其实网站虽然本身的功能使用设计非常重要,但经营的好坏,才是一个网站是否能够生存的关键. 操作方法 01 推销你的网站 一个网站做的再怎么好,若是没有人知道网站的 ...

  • 浅谈为你的 Linux 服务器加把锁

    无论你使用的哪种 Linux 发行版,你都需要使用基于 iptables 的防火墙来保护它. 啊哈!你已经设置好了你的第一台 Linux 服务器并且已经准备发车了!是么?嗯,慢着. 默认情况下,你的 ...

  • 浅谈25年Linux内核开发经历总结出来的九条经验

    原文:9 lessons from 25 years of Linux kernel development 作者:Greg Kroah-Hartman 翻译:雁惊寒 Linux内核社区在2016年庆 ...

  • 腾讯设计师:浅谈小红点的设计

    小编:今天给大家讲解一个你可能会忽略的设计点,这个细节还是很影响用户体验的.如何去更好的应用它?接下来就为大家解惑,让原本烦人的"小妖精"真正的被用户所接受. 导语 随着各类App ...

  • 浅谈开微店的技巧 想开微店做微商但是不知道微店怎么开?

    微店怎么开,对一些中小卖家来说还是丈和尚摸不着头脑。其实很简单。一部智能手机,两分钟的事就可以成功开设一家自已的微店,那么今天我就来浅谈一下如何开微店。 微店,很可怕。将来有可能会垄击淘宝,因此聪明的 ...

  • "图"说天下:浅谈图片搜索功能

    随着360综合搜索不断地开拓进取之后,新上线了图片搜索功能。百度图片搜索每天的百度预计流量为781万4070,这还仅仅只是百度来的预计流量,实际上更多。搜索引擎市场的竞争是多元化的,不仅仅是搜索结果的 ...