每个优秀的设计师都知道精心设计的用户体验 (ux) 将提高电子商务网站的有效性。

以下九个概念将向您展示如何设计一个电子商务产品页面，该页面不仅看起来很棒，而且有助于增加客户在线商店的销售额。

这篇文章是 joe leech 在 shopify 合作伙伴博客 上发表的。

用户研究在产品页面设计中的重要性

在我的职业生涯中，我为 ao.com 、 ebay 、 wiggle 、 mothercare 和 clarks shoes 等品牌研究和设计了产品页面。

我认为用户体验最重要的方面是进行研究以帮助我们了解商店用户想要什么。对于我上面提到的每个项目，我都与六个（有时更多）用户交谈，并观察他们与我客户及其竞争对手的商店互动。这个研究过程提供了宝贵的见解，帮助我的团队了解页面元素对我们客户的用户的重要性和构成。

开始设计任何页面的一个好方法是按重要性顺序列出其元素。根据扎实的用户研究对页面元素进行排序可确保页面不仅满足其用户的需求，而且还使设计过程更加简化。

根据我之前所做的用户研究，我建议产品页面上的用户体验元素按以下重要性顺序排列：

1. 产品图片
2. 产品名称
3. 购买/添加到购物篮按钮
4. 价格
5. 产品标题
6. 交付选项
7. 评论
8. 更多照片/图库
9. 规格/完整产品简介

我的心理学背景和研究表明，在做出购买决定时，用户会在情感和理性的基础上评估产品。因此，您客户网站上的产品页面需要与两者对话。页面应该既能激发用户的兴趣又能使用户放心——如果两者都没有，页面将无法运行。

在这篇文章中，我将讨论上面概述的九个页面元素中的每一个，评估它们的情感和理性方面，并强调一些该做的和不该做的。为了帮助巩固这些概念，我将通过一个使用在线鞋类零售商的实际示例来工作。

产品图片

产品图片销售商品。无论您的产品是洗衣机还是鞋子，它都是页面上最重要的元素。我们通过产品形象与大脑的情感部分交流。

产品图片帮助我们对产品本身产生兴奋感。它传达了产品如何让您感觉以及如何让您的生活更美好。所有产品都是如此——无论它们表面上看起来多么无聊。该图像用于以产品描述永远无法实现的方式来感受产品。

我见过用户依赖产品图片来评估功能。例如，查看洗衣机上的刻度盘以了解它有哪些洗涤类型，放大自行车轮胎以查看它们可以在何种地形上工作，或者查看洗衣机如何通过快速清洗使生活更轻松洗。这些实例代表了图像传达的两种截然不同的诉求——产品的情感“感觉”和理性“效用”。

良好的产品形象会为您完成所有艰苦的工作。为了使图像有效，它需要很大，尽可能大。然后，当您的图像尺寸达到最大时，集成用户放大产品特定细节的功能。这对于消费者更注重细节的服装店尤为重要。在研究过程中，我看到用户放大查看外观、拉链类型和按钮，这些都影响了他们的购买决定。

好的产品摄影也需要工作。 ao.com、Wiggle 和其他公司都有专门的摄影师，以确保他们的产品图片看起来独一无二并在竞争中脱颖而出。考虑让自己或建议您的客户获得一台好的相机和白色背景，以便在无需聘请专业人士的情况下拍摄高质量的照片。

下图说明了这个概念如何应用于我们的鞋类产品页面。您会注意到，我已经包含了一张带有缩放控件的产品图片，该图片足够大以吸引用户的注意力：

产品名称

产品名称必须实现两件事。考虑到用户需要检查它是否是他们想要的项目，它当然起到了合理的作用。但它还需要做得更多。

考虑在名称本身中添加对产品的非常简短的描述。如果您销售鞋子，在我们的案例中是 new balance w980v2 女士跑鞋，请尝试添加描述符来触及用户的情感按钮：

在产品名称中包含描述符还有另一个好处。我在用户研究中看到的主要行为之一是用户复制产品名称并将其用作谷歌中的查询，看看他们是否可以在其他地方以更便宜的价格买到它。如果他们使用您的唯一产品名称进行搜索，那么即使您不是最便宜的选择，您也应该出现在搜索结果的第一位，这会让您在用户中更加可信。

购买/加入购物车

购买按钮需要在页面上很容易看到——毕竟这是您希望用户接下来要做的。

一个速战速决的方法是使用斜视测试来查看按钮的突出程度。这很简单——只需眯着眼睛，用眼睛模糊页面。按钮是否比任何其他元素更突出？如果答案是否定的，那么通过给它一个页面上其他任何地方都没有使用过的独特颜色来让它脱颖而出，或者让它更大，文本更粗。

考虑按钮上使用的副本也很重要。如果您是希望每笔交易销售一件商品的零售商，则应使用“立即购买”。点击此按钮可将您直接带到已添加商品的购物篮。现在不要贪心，我们都想在一次交易中出售多件商品。但如果它真的不会发生（我不会在一个会话中购买两辆自行车！）然后坚持立即购买，因为它会比其他选择更好。

如果您确实在一种翻译中销售多件商品，请使用“添加到购物车”作为您的副本。

对于我们的美国表兄弟，请考虑使用“购物车”而不是“篮子”，因为这是一个英国术语，可能不会引起您的听众的共鸣。请不要使用任何花哨的东西，比如包或手提包，因为这样只会造成不必要的混乱。 cart 和basket 是常用的术语，很容易识别。

一旦添加到购物车按钮被点击，提供将用户带到购物车或继续购物的选择。

价格

有两种接近价格的方法。如果你在价格上竞争，也就是说你和许多其他供应商销售相同的产品，那么价格就更高。

如果您以其他方式竞争，例如您销售独特的产品或具有相关服务（如快速交付或个性化）的产品，那么您希望减少对价格的展示强调。本质上你希望你的产品被选择而不是价格——毕竟价格是一个非常理性的东西。销售您的产品将通过情感给用户带来的好处，因为在特定情况下情感诉求将胜过理性诉求。

产品标题

产品标题需要反映用户的情感和理性决策过程。他们需要涵盖产品的功能、产品给用户带来的感受以及产品如何让用户的生活更美好。

让我们把它放到我们的鞋子产品页面的上下文中：

• 讨人喜欢 - 一款具有专为现代都市跑步者设计的功能的高级鞋
• 理性和感性 - 带衬垫的鞋垫和脚踝领以及超厚实的鞋底，带来额外的舒适感
• 我的生活会怎样变得更好 - 平底鞋带很容易系起来让你更快出门

您需要为每个产品编写这些功能，而不是依赖制造商提供的默认文本。为这些元素起草自己的文本将提供改进页面搜索引擎优化的额外好处，因为您将能够将关键字集成到每个项目的独特副本中。

交付选项

放弃购物车的最大原因之一是许多产品页面没有列出交付选项和成本。理想情况下，您将提供免费送货服务和优质的“快速获取”选项。请务必在产品页面的设计中将它们与相关成本一起列出。

通过在页面上包含这些选项，我们已经在诉诸理性——现在想想感性的。如果您使用的快递公司提供跟踪、文本更新和一般优质服务，请务必让买家知道。运输对许多用户来说是一个真正的痛点，如果您提供出色的运输服务，他们很可能会选择您的网站而不是竞争对手。

更多照片/画廊

产品页面布局中的产品图片越多越好。展示产品的各个方面至关重要，并且不要忘记产品图像用于向用户的情感和理性方面进行销售。

显示显示细节和功能的实际镜头。例如，如果您要销售电视，请在背面展示输入端口，以帮助用户了解它的用途。对于洗衣机，显示控制旋钮，以便用户可以看到它的设置。

对于我们的鞋子示例，我们包括了鞋底的图像，以帮助用户了解这双特定鞋子的抓地力水平。要优化您对图库照片的使用，请使用与产品标题中突出显示的产品详细信息相关联的图像，例如我们上面谈到的舒适元素。最后，用相关文字标记您的图像以强调产品的质量。

评论

用户以两种不同的方式使用客户评论。首先，它们用于评估产品和服务的质量。买家希望确信您在页面其余部分所说的是真实的。

其次，买家经常使用评论来了解页面上可能未列出的功能。

以我们的鞋子为例，用户可能会阅读评论来检查鞋子的尺码是否准确——例如，这双鞋的 5 号是比正常尺码大还是小。如果您在产品页面上销售自行车，评论可能会详细说明车座的手感。如果是洗衣机，评论可能会强调快速清洗需要多长时间。

如果您可以建立一套良好的评论，它们将增加您产品页面的可信度并帮助代表您销售产品。

最后，重要的是不要隐藏任何负面评论。如果所有评论都过于正面，则会导致用户质疑其准确性和有效性。一定要提供负面评论的链接，因为这些通常会突出诸如合身等方面，从长远来看，这可能有助于减少退货和退款——我们将在以后的帖子中讨论这个话题。

产品简介和规格

将产品简介和规格放在我们列表的末尾可能会令人惊讶。庞大的功能列表可能令人生畏，让我们面对现实吧，这对用户来说有点无聊。我们不想让大多数用户觉得这些东西很重要，因为事实并非如此。出于这个原因，我们将产品宣传和规格推到产品页面设计的较低位置。

准确的规范在吸引理性方面起着重要作用。如果我们还没有提到产品的某个功能，很可能是因为这个特定功能只会吸引小众用户群。在我们的鞋子示例中，可能是材料是防水的，或者鞋子带有另一套彩色鞋带。这些项目对于说服用户购买不太重要，可以在我们的列表和用户体验设计中进一步下移。

但是关于...

您可能已经注意到，我没有提到您的产品页面设计中应包含的所有元素，因为这些元素的包含因产品类型而异。

例如，退货和退款是非常重要的因素——尤其是服装。此外，根据所展示的产品，页面上可能还需要 SKU、产品变体、替代项目、相关项目、配件和许多其他元素。我从事过许多电子商务项目，其中不同的产品页面设计用于同一商店内的不同产品。考虑针对正在销售的各种产品优化页面的用户体验。

当您进行自己的排名练习时，请确保将这些选项放在层次结构中符合您的用户需求的位置，而不是您认为应该放置的位置。

将它们整合在一起以优化产品页面设计

这是我们完成的设计，每个元素都有一个位置和视觉重点，基于我们开始的重要性列表。

使用这种方法设计产品页面不仅有助于简化设计过程，而且最终会改善客户电子商务商店中的用户体验。考虑到经过深思熟虑的产品页面对访问者转化和销售的影响，您和您的客户都会很高兴您花时间专注于优化产品页面。