在电子商务中，衡量成功的标准不是网站访问者或点击次数。这是最终购买的数量。从这个角度来看，产品页面至关重要，因为它通常是“购买或不购买”的大多数决策发生的地方。因此，在设计或改进电子商务网站或应用程序时，用户体验设计师必须仔细考虑并对其进行最细微的测试。这就是我们今天的文章的内容：让我们讨论什么是产品页面以及如何有效地设计它。包含来自知名电子商务网站的大量示例以及针对利基或特定业务目标的创意设计概念。

产品页面是电子商务网站的一个页面，它为客户提供有关特定项目的所有所需信息，允许检查存在的各种选项，并使客户在决定时能够快速进行购买过程购买商品。

与真正的销售点不同，电子商务网站不提供与商品的身体接触或商店员工的帮助。产品页面成为吸引、印象、信息和说服力的主要来源。这就是为什么它的设计、导航性和可用性在销售增长中起着至关重要的作用。

正如我们在我们的基本网页指南，一个设计糟糕的产品页面可能会浪费将买家带到网站和这个特定产品的所有努力（通常是大量和复杂的）。因此，除了吸引人的产品介绍之外，还要关注功能性、清晰度、可读性和直观的导航。

园艺电子商务网站的产品页面概念

基本上，产品页面：

• 显示产品的图像

• 提供有关产品的所有必要信息

• 允许用户检查不同的颜色/型号选项（如果有）

• 使访问者能够查看早期买家的评论、评论和评分

• 允许将产品添加到购物车或愿望清单

• 显示其他相关选项。

此外，产品页面可能包括不同项目的比较等选项，尤其是在销售不同设备和电器的网站上很受欢迎。

基于此，以下是产品页面布局基本元素的清单：

• 物品的名称/标题

• 照片

• 价格

• 物品可用性

• 添加到购物车/添加到购物袋/添加到购物篮/购买按钮

• 添加到收藏夹/保存到心愿单按钮

• 描述

• 社会证明：评级、评论、以前的买家数量、现在查看商品的人数等。

• 颜色的选择

• 型号选择

• 选择要购买的商品数量

• 尺码指南或计算器（用于衣服和鞋类）

• 扩展细节（材料、技术规格、尺寸、重量、特殊功能等）

上面的列表并不意味着所有要点对于任何产品页面都是强制性的。选择将取决于分析多种因素、了解目标受众并仔细确定优先级，以查看针对这种特定类型的商品或类型的客户，要包括哪些点以及哪些点可以从列表中删除。

沃尔玛的产品页面首屏视图

视觉演示

电商平台是证明图片值一千字的最佳场所。由于无法物理接触商品，访客将依靠产品的视觉效果来对商品产生第一印象。更重要的是，图片比文字更快地被注意到和解码，它们将成为吸引访问者注意力的第一个元素。他们展示了内容中既有信息又有情感吸引力的部分。

这就是为什么许多电子商务平台：

• 使用一组图像从不同的点和角度呈现一个项目

• 应用缩放功能，使访问者能够更近距离地查看照片的某些部分，查看纹理和小细节

• 将物品的照片与模型或适当环境中的照片相结合，以更好地了解其外观和尺寸

Marks and Spencer 上的产品页面首屏视图：多张照片的组合分别显示了该项目和模型

拍摄照片内容的方法可以是不同的，取决于一般的品牌策略和特定的活动或收集风格。然而，将他们联系在一起的是:

• 原创性：组织特别拍摄以制作与品牌手册或特定活动指南中定义的风格相对应的自定义照片

• 高质量：毫无疑问，照片的质量直接影响对特定项目和品牌的总体印象

• 网页优化：照片质量不能太大，因为它会显着影响加载时间，进而对搜索引擎优化有很大影响；此外，页面加载缓慢是高跳出率的坚实原因——除非网站提供绝对独特和超级独家的东西，否则人们会离开而不是等待。

除了图像，还可以使用其他更复杂或交互性更强的媒体。其中，您现在可以找到：

• 产品视频、详细的视频评论和说明

• 项目的 360 度视图

• 增强现实技术帮助人们在自己的环境中观察物品或虚拟试用

GNO Blankets网站的产品页面采用视频演示和图形，详细展示了产品层

显然，这些类型的媒体通常比照片更复杂、更耗时、更昂贵。因此，对其价值的决定通常基于所提供物品的类型和价格。例如，卖一件 5 美元的 T 恤，照片可能就足够了，但要购买价格高得多的冰箱、智能手机、电脑甚至汽车，客户需要在决策方式上更有说服力。在这种情况下，在更复杂但更令人印象深刻、有说服力和信息丰富的视觉效果和媒体上的支出可能是一项值得的投资。

人们不再阅读的说法与产品页面没有任何共同之处：当客户决定花钱时，他们确实阅读了他们需要了解的有关他们将要购买的产品的信息。尽管如此，这不是描述超载的原因，因为注意力范围非常有限。描述文字应简洁、真实、简单，并用受众的语言说话。它应该回答基本问题：产品是什么，它看起来像什么，它做什么，以及它是如何做的。最好从最有可能被阅读的第一行开始，而不是用购物者已经厌倦的标准营销钩子来填充它们。

这里的另一个经验法则与前一点有关：展示，不要告诉。好吧，最好说，告诉，但也显示！不要只是详细描述袋子的内部外观——展示照片。不要只说这条围巾与那件夹克的搭配有多漂亮——展示照片。不要只提到玩具的大小——让孩子玩它。将文字的力量与适当的图像相结合，使体验更加有效。

优衣库上的产品页面首屏视图：该页面具有对该项目的简洁而翔实的描述，并将材料和护理的详细信息放在另一个选项卡中，均位于页面的预滚动区域。

另一个好处是照片上的模型尺寸定义清晰，让客户立即了解比例

号召性用语 (CTA) 应该立即引人注目。在电子商务界面中，号召性用语元素是与产品有效交互的核心因素，它们在可用性和导航性方面起着至关重要的作用，因此在获得利润方面起着至关重要的作用。当所有交互和转换路径都为用户明确构建，但 CTA 元素不明显、错位或设计不当时，用户会感到困惑并需要付出额外努力来实现他们的目标的风险会更高——这很烦人。因此，转化率低和用户体验差的风险会增加。

ASOS 产品页面第一屏：CTA 按钮由于颜色对比而与页面上的其他所有内容不同，并且在明亮通风的布局中立即被注意到。

毫无疑问，考虑到产品页面的布局和内容，利益相关者和设计师都感到有一种冲动，可以用一切可能的东西来填充它，甚至更多地，使页面信息量很大。但是，要小心，因为这种策略可能会做一个肮脏的把戏：在信息洪流中，焦点变得模糊，访问者可能会分心而无法做出决定。如何找到平衡点？

一方面，建议不要在页面上放置大量信息，这会使客户不知所措并分散他们对主要目标的注意力 - 进行购买。另一方面，访问者还没有准备好从一个页面跳到另一个页面以获取有关他们感兴趣的项目的不同信息。因此，设计师必须花时间对该问题进行深入研究，仔细确定优先级，并找到需要在产品页面上提供的数据的平衡。

是否有适用于所有电子商务网站的黄金法则？没办法，因为不同的客户和市场有不同的需求，产品的类型也影响着核心和次要信息的选择。的分析目标听众 和 用户测试 可以提供有关特定类别的项目或服务需要哪些信息的线索。

产品越昂贵、不常见或创新，客户通常想要获得的信息就越多。即使对于普通的东西，也可能会有大量的问题和犹豫。当然，所有需要的信息都应该可以从产品页面访问，而这里 UX 设计师面临的挑战是找到一种正确组织它的方法。技术细节、材料、重量和尺寸、服装和鞋类的尺码表或计算器、将物品与类似物品进行比较的功能，等等——这些细节中的任何一个都可以在一个故事中演奏小提琴。特定项目。

使用原则 倒金字塔 并逐步揭示信息，从最重要和最需要显示的信息到越来越详细的细节进一步揭示。

与其制造阴谋，不如在内容呈现中保持开放、直接和干净。

尝试将所有核心信息以高度可读的形式放在页面的首屏部分。

并测试，测试，再测试，分析页面上的时间，热图和点击，询问和分析以了解买家真正需要什么以及什么使他们购物方便。

亚马逊上的产品页面基于倒金字塔原理：这种首屏视图显示了买家首先想要和需要了解的关于此类产品的核心信息和功能。引人入胜的社会证明标有#1 New Release 的标签，并展示了经常与此产品一起购买的其他产品。

第二个屏幕更多地揭示了对这个主题感兴趣的其他客户的行为：两个部分，由于关注产品图像而具有视觉吸引力，揭示了客户查看或购买的其他项目。

只有在此之后，进一步滚动，用户才能基于没有视觉效果的文本找到扩展信息、编辑评论等。

每个按钮、链接和卡片设计都可以显着改变转化率。务必记住：在我们现在观察到的电子商务激烈竞争中，买家没有准备好等待或浪费时间进行不必要的操作或努力了解他们需要什么。与去实体店相比，他们对电子商务的要求是更快、更轻松、更方便的体验。如果该网站不提供给他们，他们会在其他地方寻找。

因此，除了明显的 CTA 之外，还要确保用户可以毫不费力地执行常见步骤，例如：

• 找搜索栏

• 用面包屑帮助快速了解网站层次结构中的当前位置，并可能后退一两步而不是直接离开

• 完全确定页面上的哪些元素是可点击的

• 查看商品是否已经在购物车中

• 查看购物车或购物袋中的商品数量（通常在网站标题中）

• 使用权力视觉分隔线和常见的 方向线索 更快地感知信息

• 在网站页脚中找到联系信息和导航链接

Target 上的产品页面首屏视图：该项目的多张照片，既干净又融入环境，颜色选择的清晰且立即引人注目的控件，标题中明显的搜索字段，创建二级导航级别的面包屑，社会证明以评分和问题的形式，以及明确的号召性用语元素。

一致性意味着产品以相同或相似的方式与用户进行交流，无论交流点或渠道如何。在用户体验方面，这意味着相似的元素看起来和功能相似，这样可以减少认知负担并使交互更加流畅和直观。

在电子商务界面中，它同时涉及：

内部一致性是关于界面或品牌的不同部分，它们的外观和行为都像一个清晰的系统。例如，当您将产品的不同页面或屏幕上的所有 CTA 按钮着色和设计为相同的方式时，访问者可以快速学习并能够在用户旅程的任何阶段快速区分它们。

外部一致性是关于界面的部分，这些部分的外观和行为与大多数此类产品的典型模式相同。例如，当您在销售非有形产品的网站上使用购物车或在文本链接下划线以提示用户可以点击时。

丝芙兰产品页面首屏视图：网站标题中的预期导航，电子商务购物者易于识别，超级明显的号召性用语按钮，箭头用作网络上大多数用户最清晰的方向提示，专注于项目以不同的视觉效果呈现，并突出了对目标受众重要且有影响力的决策。

作者：by Marina Yalanska