有效的电子商务产品页面布局设计剖析 - 您可以复制以立即改进您的在线商店的即用型设计

电子商务产品页面设计第2部分设计一个客户喜欢浏览的电子商务产品页面布局，恰好鼓励他们打开钱包是一项具有挑战性的任务。

你在哪里或如何开始？

哪些设计适合“我的”客户？

我怎样才能从竞争对手中脱颖而出？

如果您对如何为您的在线商店设计获奖产品页面的同样炙手可热的问题感到困惑，本指南将是您的闪亮盔甲的骑士。

我们经营着自己成功的电子商务商店，并且是真正阅读分析报告以获得乐趣的转化优化爱好者  。

我想，当涉及到这类东西时，我们只是极客。

在本指南中，我们将与您分享一些经过现场测试的方法，您可以模仿这些方法来改进产品页面，这将有助于提高您的业务销售额。

我们还在下面创建了几个现成的电子商务产品页面设计（基于实践），您可以立即适应您的在线商店。

如果您还没有选择在线商店建设者，请查看下面对比表中我们评价的电子商务平台：

 好的电子商务网站建设者

佳选择

5 出5

模板设计

5星，满分5星

便于使用

5星，满分5星

功能和灵活性

5星，满分5星

声望

5星，满分5星

价钱

5星，满分5星

免费试用

阅读我们的完整评论

bigcommerce徽标

 佳大型企业网站建设者

4.5分（满分5分）

模板设计

4.5颗星，高

便于使用

4.5颗星，高

功能和灵活性

5星，满分5星

声望

4颗星，高

价钱

4颗星，高

免费试用

阅读我们的完整评论

标志 - 威克斯 -  100x100的

 适合小型企业

4.5分（满分5分）

模板设计

4.5颗星，高

便于使用

5星，满分5星

功能和灵活性

4颗星，高

声望

4颗星，高

价钱

5星，满分5星

免费试用

阅读我们的完整评论

如果您还没有阅读本指南的第1部分，我建议您在进入本文之前先阅读本文，以便您充分利用本指南。

指南部分

第1部分： 如何设计一个赢得客户的产品页面 - 8必须有内容来增加您的在线商店

第2部分：[您在这里]  有效产品页面布局设计剖析 - 您可以复制以立即改进您的电子商务网站的即用型设计

附注：这些现成的产品页面设计基于对消费者行为的研究。但是，结果可能因网站和企业而异。这些设计布局旨在为您提供佳起点，您可以继续改进它们。不断测试不同方法以进一步优化您的在线商店始终是一个好习惯。

到第2部分......

 

第2部分：有效的电子商务产品页面设计剖析

您可以在电子商务网站中立即采用和使用的设计

在网站建设者专家，我们重视良好的研究和成熟的方法，而不是像天生的设计人才那样无形的“东西”。

说实话，并不是每个人都天生具有设计和配色技巧，所以我们不会把各种设计理论塞进你的喉咙。

80/20规则是从成功的在线商店中学习，了解哪些对他们有用，以及它们如何为您服务。

为什么要重新发明轮子呢？

以下是第1部分的概述，其中我们重点介绍了所有成功的电子商务产品页面设计所具有的8个要素。

第1部分：您需要在产品页面中包含的8件事

1.  惊人的信息产品图像

2.  有用和有趣的产品描述

3.  使用产品演示视频

4.  明确定价

5.  清除添加到购物车按钮

6.  显示客户评论和评级

7.  解决不确定性问题

8.  显示相关和推荐的产品

现在，让我们了解所有这些内容元素如何在一个良好的产品页面布局中组合在一起，以便您可以优化您的在线商店。

＃1如何确定重要产品页面元素的优先级？

有些信息比其他信息更重要，因为它们是购物者关心的，对购买决策过程影响大。

确定哪些信息对您的购物者重要，并确保我们将其放置在您的电子商务产品页面设计中明显的位置，这一点非常重要。

那我们该怎么做呢？

基本上，产品页面的布局分为两部分：

1. 高于折叠 - 您可以看到的内容在页面加载时不向下滚动。

2. 低于折叠 - 您只在向下滚动页面时看到的内容。

100％的访问者将看到“折叠”内容，因为它会立即显示在计算机屏幕上。

研究表明，当人们向下滚动页面时，人们往往不太关注内容。

这就是为什么计划8个产品页面项目中的哪一个应该插入上面这么重要的原因。

 

1.元素高低在上

以下6项可以说是您的客户关心的问题。

92％的客户仅根据这6个项目做出购买决定 - 所以要密切关注！

好的电子商务产品页面设计

资料来源：Nike.com

产品图片：   由于我们在这里谈论在线购物，因此您的产品图片是在购买之前能够物理接触，保持和测试您的产品的下一个佳选择。由于这对购物者来说非常重要，因此高质量的产品图像必须是购物者在加载产品页面时看到的第一件事。

价格： 我们都对价格很敏感，无论我们是购买豪华礼品来对待自己还是只是更便宜的日常用品。无论您的购物者对您的产品有多喜爱，如果产品的价格超出预算，他们就不会购买。好在易于到位的位置显示价格。当你无法轻易找到价格时，这是非常令人沮丧的。

产品变化（如果有）：如果您有许多产品变化（颜色，图案等），显示实际产品变化可以使您的销售额提高58％。不要只列出颜色或图案选项，显示它们。购物者是视觉人，所以迎合了这一点。

添加到购物车按钮：产品页面的第一项工作是让购物者点击“添加到购物车”按钮。因此，请确保它是您的产品页面上容易找到的元素之一。

客户评级：  85％的消费者在购买前阅读评论。因此，要突出显示您的评论，以向您的购物者展示其他人对该产品的看法。

解决不确定性：  50％的客户表示他们没有在线购买是因为他们有不确定性 -  这款产品能否适合我？ - 获取我的东西需要多长时间？ - 回报是否复杂？确保您正面解决这些问题，例如提供尺寸表或显示运输和退货政策的链接。

更多详情：  此处还有很多内容，如果您想对上述6个项目进行更深入的讨论，请转到本指南的第1部分。

让我们深入了解有关您应该放置在折叠之下的内容的更具体细节。

之后，我们将向您展示一些您可以模仿以帮助发展业务的电子商务产品页面布局设计。

 

2.元素低于折叠

有4个内容项目可以为您提供折扣，这可能会让您失去或赢得销售。

这4个元素是“支持”元素，旨在帮助推动即将购买的购物者，但需要更有说服力。 

佳电子商务产品页面设计

资料来源：Nike.com

产品描述： 您可以按照自己的方式教育购物者。79％的人都是扫描仪，因此请确保包含较短版本的描述，例如上面的示例 - “多功能和快速”  或“响应式缓冲” - 为您的购物者提供快速的片段，了解该产品为何以及如何使他们受益。对于需要更多信息的消费者，请确保您拥有更长版本的描述，以描述您的产品如何解决他们的问题。

产品演示视频：  31％的消费者在被产品视频说服后购买产品。这是让销售人员出现在您家门口向您展示产品如何运作的下一个佳选择。

顾客评论：  85％的消费者在购买前阅读在线评论。在线购物总是存在不确定性。这就是为什么好评和差评的好集合可以帮助推动购物者购买。当人们在阅读了利弊后感到被告知时，他们更有可能采取行动。

推荐产品：这是向您的客户交叉销售的绝佳方式 - 就像亚马逊一样。推荐或类似产品以两种方式帮助您的购物者; （1）如果购物者不喜欢他们所看到的东西，你可以向他们展示他们可能更喜欢的类似产品; （2）如果他们喜欢他们看到的东西，你可以向他们提供他们可能也想要的类似或补充产品。这对您和您的购物者来说是一个双赢的局面，那么为什么不将它们包含在您的产品页面上呢？

更多详情：  此处还有更多内容，如果您想对上述4个项目进行更深入的讨论，请转到本指南的第1部分。

既然您已经知道应该在电子商务产品页面中包含哪些内容，那么让我们探索一下您可以定位这些内容项目的各种方法，以便为潜在客户创建购物体验！

＃2  有效的电子商务产品页面布局+您今天可以使用的示例模板

简单是良好的产品页面设计的关键。

您希望购物者能够快速，轻松地找到所需信息。因此，重要的是不要 用不必要的细节过度设计或过度挤压产品页面。

如上所述，在设计电子商务产品页面布局时，您无需重新发明轮子。

已经有成熟的工作设计，让我们来探索它们的外观以及如何为您的业务使用类似的布局格式。

我们会告诉你：

您应该使用的3种顶级电子商务产品页面布局设计;

如何确定哪一个适合您的商店; 和

您可以在哪里找到这些产品页面布局模板，以便立即开始使用。

产品页面布局＃1 - 通用

这种布局非常通用，因此它可以用来销售几乎任何产品。

人们倾向于从左到右阅读，因此当您将产品图像放在左侧时，它会立即吸引购物者的注意力。

如果他们喜欢他们所看到的（第一印象），他们可能会留下来并阅读更多相关内容。

电子商务产品页面设计示例

点击放大此图片

 

模板示例：以下是一些具有此类产品页面布局设计的免费模板。您可以点击查看，注册并立即开始使用它们。

确保您访问他们的演示站点并单击其产品页面以研究其布局。

电子商务产品页面模板设计电子商务产品页面模板设计

电子商务产品页面模板设计电子商务产品页面模板设计

电子商务产品页面模板设计电子商务产品页面模板设计

 

想要查看更多电子商务模板和布局？  这是我们精选的免费电子商务模板集合。

产品页面布局＃2 - 以图像为中心

此产品页面布局比其他任何东西更强调产品。

如果您销售的是创意或以美学为重点的产品，例如家具，珠宝，手工制品等，这是一个有效的产品页面。

通过在页面顶部放置一个全宽的产品图像，这可以引导您的客户专注于产品的美感。

电子商务产品页面设计示例

点击放大此图片

 

模板示例：以下是一些具有此类产品页面布局设计的模板。您可以点击查看，注册并立即开始使用它们。

确保您访问他们的演示站点并单击其产品页面以研究其布局。

电子商务产品页面模板设计电子商务产品页面模板设计

电子商务产品页面模板设计电子商务产品页面模板设计

    电子商务产品页面模板设计    

想要查看更多电子商务模板和布局？  这是我们精选的免费电子商务模板集合。

产品页面布局＃3 - 以特色为中心

这种布局适用于专注于规格和功能而非美学的产品。

一些例子包括软件，技术设备，机械部件等。

当产品的视觉外观不如其功能的有效性重要时，您希望您的产品描述和规格成为中心舞台。

在这种情况下，您的产品图片仅用作支持内容，以向客户展示其外观，而不是诱使他们购买。

电子商务产品页面设计示例

点击放大此图片

 

模板示例：以下是一些具有此类产品页面布局设计的模板。您可以点击查看，注册并立即开始使用它们。

确保您访问他们的演示站点并单击其产品页面以研究其布局。

电子商务产品页面设计示例squarespace电子商务产品页面设计示例bigcommerce

    电子商务产品页面设计示例bigcommerce    

想要查看更多电子商务模板和布局？  这是我们精选的免费电子商务模板集合。

5个令人敬畏的主页设计布局，你今天可以复制不知道如何好地设计您的主页？

让我猜一下 - 你不是一个熟练的网站设计师，你正在建立一个网站，你想让它变得很棒。

我们将向您展示令人敬畏，精心设计的主页的解剖结构。我们将在简单的图表中展示它们并向您展示实例，以便即使非设计师也能理解 - 并复制！

查看指南

结论并带走

您今天可以复制的令人敬畏的主页设计布局我们创建的第一家电子商务商店在2年内从零销售到低6位数。因此，我们完全理解从头开始构建在线商店的痛苦和快乐。

我们也不是天生就具有天生的“电子商务”才能，但经过多次失败后，我们发现要想成功，通常会有助于研究什么对他人有用。

优化产品页面布局是帮助提高销售额的快捷方式之一。虽然这不是 你能做的  唯一事情，但它是你应该关注的第一个地方之一。

您的电子商务网站上有无穷无尽的测试和优化列表。我们的建议是不要一次在您的网站上测试或更改10到20件事。相反，首先要处理大事，例如优化产品页面设计，制作精美的主页设计，类别页面，结帐页面等。

一旦掌握了基础知识，您就可以进入更高级的转换策略。始终一次只更改1或2件事，这样您就可以轻松地找出哪些有效，哪些无效。

上篇文章：枣庄网络的尖端营销
下篇文章：英特公司2019年五一放假通知