中山企业网站开发：电子商务产品页面的UX设计技巧

2019.08.09 mf_web

141

卓越的产品页面是实现更高转换率的第一步。每个电子商务网站都存在赚钱，因此您希望设计一个易于使用且鼓励销售的网站。中山企业网站开发

当然，您需要关注从用户购物车到输入付款信息的结帐流程。

但产品页面对于确保访问者能够准确找到他们正在寻找的内容也至关重要。在这篇文章中，我将介绍一些用于在任何ecomm站点的产品页面上创建出色体验的UX技巧。

澄清定价和功能

也许任何产品最重要的是价格。

因此，请在页面上保持总价格清晰明了。请务必尽早在页面顶部和产品标题/照片附近澄清这一点。

另外，请务必提及与购买相关的可选功能。例如，如果您正在销售T恤，则会有不同的尺码和颜色。在价格附近突出显示这些选项，并相应地更新该价格，如果某些选项需要额外费用。

您的目标应该是与潜在客户的透明度。关注成本，不要试图隐藏任何东西，以期诱骗人们购买。

kidkraft产品定价

KidKraft网站是清晰产品页面的绝佳示例。每个项目都有明确的标题，价格在顶部附近以粗体字母表示。

这个定价文本也比其他文本更暗，所以它真的从页面中脱颖而出。

您还会注意到定价周围还有大量的空白区域。这样，访问者可以快速浏览总评论，总价和总体功能。

快速浏览是网络上大多数交互设计的关键，因此这是一个很好的设计趋势。但您可能也会尝试使用颜色和位置，就像下面的JBL示例一样。

jbl耳机产品

请注意，定价文本很大且清晰可见，但也是鲜红色以匹配CTA。

事实上，设计几乎似乎围绕着这种红色的阴影，以引起人们对共同主题的关注。如果您希望将定价融入布局，那么绝对是一个很好的策略。

如果你改变颜色，字体，大小，位置等等，这并不重要。只需确保定价易于查看，并且可以从页面顶部清楚地访问。

顾客评论

建立信任的最佳方式之一是通过评论。不幸的是，您的品牌并不是最适合审核自己产品的品牌; 但其他客户是。

确保您使用页面上的部分突出显示客户评论。除非您引用某些评论的摘要，否则这不应该在顶部附近。

但我建议在页面顶部附近添加一个小链接或整体星级评分。这可以让访问者快速查看平均客户评级，并链接到完整的评论列表。

亚马逊客户评论明星

我必须在这里加入亚马逊，因为他们是电子商务之王。毫无疑问，亚马逊已经对其产品页面进行了一次又一次的测试，以调整小功能以获得丰厚回报。

他们的评论部分非常清楚，每个人都知道检查亚马逊的评论。客户可以按最近的评论或最有用的评论进行排序，并按某些星级评分进行排序。

请注意，平均星级评分始终位于每个产品页面的顶部。如果可以的话，尽量包括这一点，因为它将大大有助于与受众建立信任。

wayfair对产品的星级评论

我其实也喜欢Wayfair网站上的风格。他们的星星占据了很多额外的空间，他们立刻引起了你的注意。

这非常适合与访问者建立信任，因为他们可以快速浏览整体用户评级并从中开展工作。此外，他们的定价部分非常清晰，这符合我提到的另一个趋势。

真正的Wayfair的产品页面是风格设计选择的金矿，您可以复制和测试您自己的商店。

添加销售图像

这个可能看起来很明显，但图像真的很畅销。问题在于找到能吸引注意力的正确类型的图像，让访问者确切了解您的产品外观。

你可能会去一堆不同的照片和角度，或者只是一个很棒的镜头。无论你有多少照片（虽然通常更好）。最终目标是展示产品，让人们对它的外观有一种数字化的品味。

宜家产品照片放大

我认为宜家产品页面非常棒，有两个非常重要的照片功能：

点击到变焦
缩略图库

每张照片都相当大，占据了页面的很大一部分，因此您可以真正地检查照片。更不用说缩放功能对任何购买家具的人来说都非常方便。

但请注意照片的质量以及他们在页面上的感受。您需要为自己的网站提供非常相似类型的照片，并尝试匹配该级别的质量。

现在，如果您销售的产品具有特定用途，您还可以添加动作镜头。这些可能包括某人在烹饪时使用您的刀或过滤器的照片，或者可能是某人用您的商店的床单铺床。

服装店Threadless包括许多不同款式的衬衫的照片。通过这种方式，您可以看到衬衫在男士和女士服装之间的不同颜色，大小和不同风格。

图片质量取决于您所推出的特定产品。某些类型的图片对某些类型的产品效果更好，您的工作就是弄清楚如何捕捉为客户增值的最佳图片。

可浏览产品说明

我之前提到过大多数人都在浏览网页。这意味着您可以通过以可切换格式展示产品信息来获得更多关注。

请注意，在Redbubble页面上，您可以找到主产品标题正下方的产品功能列表。

redbubble产品页面

这是一种很好的方式来分享有关您的产品的相关信息，而无需阅读段落。

它甚至标有强大的“功能”标题，因此客户可以一目了然地了解列表的内容。太酷了！

另一个例子是Skinny Ties产品页面，每张照片下面都有小功能框。

紧身领带产品说明

您可以找到关于领带的面料，尺寸和宽度/高度的快速信息。这些数据不应该隐藏在产品描述中，因此它非常适合于可浏览的盒子。

您的产品描述将根据您销售的产品类型而有所不同。但是，请使用这些示例来考虑所有可能性。

zazzle产品信息

Zazzle示例是我的最爱之一，因为它主要依赖于文本，但它很容易浏览。

产品说明分为两列：有关产品的信息和有关设计的信息。这两个领域对于潜在买家来说非常重要，因此有必要将它们全部放在一个地方。

一个明确的“添加到购物车”CTA

当有人准备购买您的产品时，他们需要将其添加到购物车中并结帐。通常只需单击一个名为CTA按钮的按钮即可。

您的工作是设计一个清晰，易读且易于访问的CTA，无论如何。通常，这意味着使用强烈的颜色，独特的按钮样式，有意义的按钮文本以及靠近页面顶部的位置。

hayneedle结帐cta按钮

Hayneedle以其鲜艳的橙色CTA追随所有这些想法。按钮文本显示“添加到购物车”，这是电子商务商店的典型选择。

请注意，此按钮确实从第一页加载中吸引了您的注意力。它接近所有主要功能，如用户评论，产品价格和总数量。

使用类似的东西吸引注意力并鼓励人们点击。通常橙色/黄色/红色是更明亮的“动作”颜色，但你也可以看到颜色更柔和的成功。

以Ugylonk的产品页面为例，使用明亮的蓝色CTA。

这个甚至在按钮副本旁边还有一个小加号（+）。此加号可以直观地告诉用户此按钮的功能。

为您的CTA尝试一系列不同的样式，使用不同的颜色，副本，图标，大小等等。如果您A / B测试结果，您可能会惊讶地发现某些CTA表现更好并且随着时间的推移增加您的总销售额。

向前进

将所有这些提示与您的设计之旅一起使用，并尝试应用那些有意义的提示。您可能无法找到所有这些建议，因为它可能特定于您销售的产品类型和电子商务网站的设计。

但是，不要害怕尝试新事物，看看有效！在电子商务的空间是巨大的，如果你足够幸运，有分得一杯羹，你会惊奇地发现一个小UX的调整多少可以影响你的底线。

中山企业网站开发

相关推荐

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监