• 电子商务与用户界面 (UI) 设计

电子商务 UI 设计:如何创建引人入胜的产品系列页面(6 个可行策略)

  • Felix Rose-Collins
  • 6 min read
电子商务 UI 设计:如何创建引人入胜的产品系列页面(6 个可行策略)

介绍

令人遗憾的是,产品系列页面常常被设计师和文案撰写者所忽视。在花费大量精力创建引人入胜的产品页面和着陆页面的同时,产品系列页面却被弃置一旁,始终乏善可陈。

让我们来看看创建产品收藏页面的六种可行方法,它们能吸引人、激发行动力并推动流量和转化。

确保主要产品图片引人入胜

产品系列页面需要克服的第一个设计障碍是确保主要照片吸引人、有趣。如果你不能在购物者一登陆页面或滚动几下页面时就抓住他们的注意力,那么你很可能就失去了他们。

首先要考虑你对目标受众的所有了解。他们喜欢什么?他们为什么喜欢你的产品?他们喜欢产品的哪些方面?如何将这些特点放在最重要的位置?

然后,开始考虑布局。图片是否需要放大?需要鲜艳的背景还是中性的背景?一排应该展示多少种产品?

理想情况下,您会对多个设计变体进行 A/B 测试。有时,最小的变化也会带来最大的不同。

看看这个婴儿服装系列页面。产品本身很可爱,也很吸引人,因此不需要用特别新颖的方式来展示。新款 "标签明确地将某些产品区分开来,确保购物者注意到它们。

遇见Ranktracker

有效SEO的一体化平台

每个成功的企业背后都有一个强大的SEO活动。但是,有无数的优化工具和技术可供选择,很难知道从哪里开始。好了,不要再害怕了,因为我已经得到了可以帮助的东西。介绍一下Ranktracker有效的SEO一体化平台

我们终于开放了Ranktracker的注册,完全免费!

创建一个免费账户

或使用您的证书登录

将这样的产品置于中性背景下,是让它们脱颖而出的好方法。

mamasandpapas

来源:mamasandpapas.com

让收藏页面上的主要照片吸引人的另一种方法是展示物品的使用情况。看看这个斜倚式温室页面,你就会知道如何毫不费力地做到这一点。每张图片都完全不同,采用不同的色调,从不同的角度展示物品。他们让人很容易想象出产品在自己家中的样子。

greenhouseemporium

来源:greenhouseemporium.com

遇见Ranktracker

有效SEO的一体化平台

每个成功的企业背后都有一个强大的SEO活动。但是,有无数的优化工具和技术可供选择,很难知道从哪里开始。好了,不要再害怕了,因为我已经得到了可以帮助的东西。介绍一下Ranktracker有效的SEO一体化平台

我们终于开放了Ranktracker的注册,完全免费!

创建一个免费账户

或使用您的证书登录

如果你想让客户更容易看到最终产品的样子,并帮助他们想象整个生活方式,这是一个很好的策略。

确保滤镜不会过于分散注意力

藏品页面需要过滤器才能发挥作用。我们不能指望客户浏览一页又一页的产品来找到一件特定的商品。他们不可能了解您所提供产品的范围,也可能没有时间进行冗长的橱窗购物。

筛选器应以有意义的方式对产品进行分类。价格、尺寸和材料只是一些最常用的筛选器。请考虑产品本身以及与众不同的因素。

产品越复杂,过滤器就应该越多。如果 "不适合新手 "或 "只适合专业人士 "等过滤器能帮助客户选择正确的产品,您也可以提供这些过滤器。

过滤器也不能太分散注意力。它们应易于访问,但不应占据页面的大部分,或以任何方式干扰浏览体验。

看看这个复合露台板系列页面。过滤器位于左侧,它们在容易注意不碍事之间取得了恰当的平衡。请注意,它们也是可折叠的,因此大量的信息不会让客户不知所措。

它们的排序也很合理--大多数人都希望在了解尺寸等更具体的细节之前,先缩小颜色和材料的范围。

Ovaeda

来源:Ovaeda.com来源:Ovaeda.com

您可以轻松实施类似的解决方案,它不会占用大量空间,但仍能显著提升用户体验,让客户在几秒钟内缩小选择范围。

在鼠标悬停时显示简短的产品说明

将产品收藏页面视为信息中心。在这里,您可以展示某个类别中的所有产品。您提供的帮助越多,客户转化的可能性就越大。

尽量不要让购物者点击商品,阅读产品描述,然后再点击返回。他们不得不浪费时间滚动页面,以找出刚才离开的位置。或者,如果他们一直在新标签页中打开商品,他们很快就会被试图比较的商品数量所淹没。

在收藏页面上显示的有用信息越多越好。当有人将鼠标悬停在产品上时,添加一个简单、简短的产品描述,就能帮助客户当场比较产品。

这个减肥钙咀嚼片收藏页面做得很好。你会得到一份简要的产品说明,告诉你产品中含有哪些维生素和矿物质。产品的益处也得到了强调:口感极佳、促进免疫健康,等等。

Bariatricfusion

_来源Bariatricfusion.com_

请注意,这些描述非常简短。您只需几秒钟就能读完,然后继续比较产品。

使用这种策略时,请仔细考虑悬停描述。它不必与产品页面上的描述相同。它应简要论述商品的优势或主要特点,将其与页面上的其他商品明确区分开来。

在这里,重点是提供信息,而不是推动销售。如果客户对自己的选择充满信心,他们就更有可能实现转化。

加入社交证明

社会证明是让网页更吸引人、更有帮助的好工具。它们将向客户展示您值得信赖、可靠,以及您的产品质量良好。这对于那些还不熟悉您的品牌、可能会犹豫不决的新客户来说尤为重要。

社会证明有多种形式,但星级评分是放在收藏页面上最有用的证明类型。它们有多种用途:

  • 评定单个产品的质量
  • 显示有多少客户购买了该产品并花时间进行了评论
  • 帮助客户更快地做出购买决策

星级评定很容易纳入。请查看丝芙兰的眼影盘系列页面。它们很容易被发现,并显示所有相关信息:有多少条评论,对商品的总体满意度如何。您还可以清楚地看到,其中一款眼影盘比其他眼影盘更受欢迎。

sephora

来源:sephora.com

另一个可以在收藏页面上使用的社交证明信号是实时销售通知。

看看这个定制笔记本电脑贴纸页面。当你浏览时,右下角会弹出一个不显眼的弹窗,告诉你谁在网站上购买了产品,他们来自哪里,买了什么。

这是为您的营销策略增添一些 "FOMO "元素的好方法。顾客会看到其他商品,这些商品显然很受欢迎,因为有人刚刚购买过。这还会发出强烈的信任和信誉信号。

确保弹出窗口不会太炫目或分散注意力。此外,尽量拉开弹出窗口的距离,以免它们开始惹恼购物者。

vinylstatus

来源:vinylstatus.com

显示多个产品视图

客户越能看到产品,他们转化的机会就越大。在收藏页面上展示的商品图片越多,参与度和兴趣就越高。

您可以通过几种方式整合多张图片。您可以滚动浏览产品图库,也可以在鼠标悬停时显示不同的照片。

H&M 的这个男童服装页面有一个可滚动的产品图库。您可以从系列页面直接看到单个产品页面上的所有照片,因此您无需点击即可浏览。

hm

来源:hm.com

如果你更喜欢在悬停时显示不同的照片,可以看看这个女式沙滩装系列页面,从中获得灵感。该品牌巧妙地在鼠标悬停时显示了商品的背面,这样你就可以看到整件商品,而无需打开另一个页面。对于服装品牌来说,这是一个很好的策略。

simplybeach

来源:simplybeach.com

在选择添加图库还是悬浮照片时,要考虑商品的性质。购物者需要看到多少张照片?这些照片应该是什么?

您可以展示正在使用的产品,也可以展示顾客的照片,如果这些照片更容易吸引新顾客的话。您可以近距离展示产品,甚至列出产品规格。

显示最近浏览的项目

产品推荐通常保留在单个产品页面上。品牌也会在这里放置 "最近浏览 "旋转木马。

不过,通过在收藏页面上展示,您可以轻柔地提醒顾客他们已经看过并喜欢的商品。让他们省时省力地翻阅历史记录,避免同时打开多个标签页。

查看阿迪达斯男士跑步鞋页面。只要您查看单个产品,您就会在系列页面底部看到 "最近查看 "功能,帮助您关注引起您兴趣的产品。

adidas

遇见Ranktracker

有效SEO的一体化平台

每个成功的企业背后都有一个强大的SEO活动。但是,有无数的优化工具和技术可供选择,很难知道从哪里开始。好了,不要再害怕了,因为我已经得到了可以帮助的东西。介绍一下Ranktracker有效的SEO一体化平台

我们终于开放了Ranktracker的注册,完全免费!

创建一个免费账户

或使用您的证书登录

来源:adidas.com

同样的旋转木马也会出现在各个产品页面上,为用户提供量身定制的浏览体验。

您还可以根据客户浏览过的商品向他们推荐产品,就像在产品页面上一样。

总结

考虑一下您可以在自己的页面上实施这些产品系列页面设计策略中的哪些。也许这六种方法都能在提高转化率方面发挥作用。

始终牢记产品的性质和受众的痛点。他们在寻找什么,你的设计工作如何才能帮助他们找到?

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

开始使用Ranktracker...免费的!

找出阻碍你的网站排名的原因。

创建一个免费账户

或使用您的证书登录

Different views of Ranktracker app