如何为您的电子商务业务创建图片完美的产品页面

已发表: 2021-08-15

您的产品页面设计是您商店中最重要和最复杂的页面之一。考虑潜在客户可能登陆您的产品页面的所有情况：

直接来自搜索引擎
浏览您的商店后
点击目标广告后

作为销售的最后步骤之一，您的产品页面必须是：

优化以确保它可以很容易地找到，
信息量足以让您对客户充满信心，并且
精心设计以提供出色的在线购物体验

您可以采取多种措施来提高人们找到您的产品页面的机会，并在他们到达后提高转化率。为了分解事情，我们创建了一个由五部分组成的指南来创建完美的产品页面。

第 1 部分：了解优秀产品页面设计的组成部分

在深入了解如何优化产品页面的各个方面的细节之前，让我们看一个很棒的产品页面设计示例，以了解每个组件如何适应以及它们为何重要。

优衣库澳大利亚有一个很好的例子，它是为用户设计的产品页面。这是他们典型产品页面之一的屏幕截图，其中突出显示了关键组件：

优衣库产品页面设计示例

您会立即注意到，超过 90% 的页面专门用于向客户提供有关他们正在查看的产品的更多信息，并且在折叠上方几乎没有浪费任何空间。进一步分解每个部分：

产品标题和概述很容易找到。就像您访问一个新城市时建筑物和标志充当参考点一样，好的标题可以帮助客户浏览新站点。
从不同角度展示产品的图片库，模型，以及近距离。
产品图像在前面和中间。白色背景上的清晰照片以最佳光线展示产品。图像是客户所寻找的，因此让它们突出是值得的。
对产品的独特而详细的描述，描述了它是什么、其设计背后的思想以及它如何解决买家的问题。
真诚的客户评论有助于建立对您的产品和品牌的信心。
客户知道他们想要什么，但他们可能不知道如何找到它。显示最近查看或相关的产品有助于他们更快地缩小选择范围，并让您有机会展示您认为他们可能更喜欢的产品。
一页上的大量选项和变体意味着客户不必浏览多个产品。
客户完成选择后，“添加到购物车”按钮正在等待他们。
还没准备好承诺？额外信息（例如您的运输和退货政策）的链接有助于回答任何挥之不去的问题。

我总是发现查看其他商店如何设计他们的产品页面很有帮助。您也不一定非要查看同一行业内的商店。考虑看看其他行业的流行网站正在采取哪些客户喜欢但没有被竞争对手使用的策略。

在大多数成功的产品页面上，您会发现这些相同组件的变体：

清晰独特的描述
很棒的产品摄影
评论以灌输买家信心
定制选项
清除“添加到购物车”按钮
其他运输或购买信息

第 2 部分：在您的产品副本中回答这些问题

出色的文案对您的产品页面至关重要。不仅为您的客户，也为 SEO。使用制造商或通用产品信息是确保您的产品在搜索排名中不具有竞争力的可靠方法。

要创建出色的产品页面副本，您可以回答几个问题。

它是什么？

您的产品副本需要解决的第一件事是产品到底是什么。如果客户正在寻找特定产品，这是他们想要回答的第一件事。

对于新产品，他们想知道它到底是什么以及为什么他们应该感兴趣。

它如何解决问题？

你的产品解决了什么问题，又是如何解决的？这是您需要为客户回答的基本问题。

也许它就像一件让你保暖的毛衣之类的实用功能一样简单。在这种情况下，包括哪些材料或制造工艺有助于使您的产品解决方案成为可能。

或者，问题可能在需求层次的下层，而产品只是帮助您看起来更时尚。产品背后的什么故事或过程使它值得拥有？

您已经确定存在问题以及您的产品如何解决它。现在，他们为什么要选择您的产品而不是竞争产品？你采取了哪些额外的措施来确保你的毛衣是最温暖的？你使用了哪些其他人没有使用的成分？这是您展示您的产品为何与众不同的机会。

即使您销售的是其他制造商的商品，花时间表明您了解该产品更好的原因，也表明您已花时间进行研究。

它是什么做的？

要添加的最后一个细节是可能被视为您产品的元数据。提供有关进入您的产品的材料或成分的信息有助于弥补在线购物者无法亲自感受产品的问题。

简单的信息（例如成分）和基本说明（例如如何保养或预期用途）可以帮助客户可视化产品并为搜索引擎提供更多上下文。

第 3 部分：创建出色的产品图像

您的产品照片通常是客户在页面上首先看到的内容，他们可以立即以负面或正面的方式展示您的产品。但除了第一印象之外，产品照片还有助于传达比单独文字更多的细节，这有助于销售产品。产品摄影做得好甚至可以减少用于客户服务和退货的资源数量。

因此，要创建出色的产品图片，您需要执行以下操作：

从好的摄影开始

在没有合适设备的情况下拍摄的光线不足的照片可能是客户的危险信号。不花时间拍摄像样的照片实际上会花费您更多的时间进行编辑。

但是......你不需要花很多钱来获得一个很棒的小型摄影设置。 DIY 产品摄影的更好的柠檬水支架指南列出了如何在任何预算下开始 DIY 产品摄影。

您对 DIY 产品摄影设置的基本要求应包括：

优质相机或智能手机：您不一定需要数码单反相机进行产品摄影。您的智能手机将生成具有足够高的分辨率和足够数量的设置来调整光线和光圈条件的照片。
一致的光源：您的照明应该有助于照亮您产品最重要的功能并隐藏任何阴影。自然光是入门的理想选择，因为它不像人工照明那样昂贵或挑剔；但是，您还需要使用补光灯或镜子从两侧均匀分布光源。
白色背景：白色背景有助于均匀地偏转光线，因此修复对比度所需的工作更少。它还可以让稍后使用魔术棒或钢笔工具更轻松地编辑照片。您可以使用一卷纸甚至一张足够白的纸来开始。
稳定的表面：均匀地拍摄照片。
剪辑：将您的背景或灯光固定到位。
三脚架：用来固定你的相机。三脚架不是必需品，但它可以帮助您快速为许多不同的产品拍摄一致的照片。如果您是单人摄影操作，它也可以使事情变得更容易，并节省您的后期制作时间。

使用多个图像

仅使用单个产品镜头是不够的。客户希望从各种角度和角度来看待产品。您的产品摄影可以比任何描述更好地展示产品最重要的方面，因此添加尽可能多的照片来回答客户的问题非常重要。

在购买过程的不同阶段，不同的照片也可能具有不同的重要性。

当新客户第一次发现您的产品时，他们可能更喜欢查看其他人使用该产品的图片。这对于像 Tile 这样的产品尤其重要，因为产品本身不足以说明它的作用，更不用说它的好处了。因此，该公司使用产品摄影来说明您将如何以及为何使用它：

Tile Mate 产品页面集合示例

但是当你深入到实际的产品页面时，你会发现更多专注于产品本身的详细照片。一旦用户进入产品页面，他们就会发现您的产品如何解决他们的问题，并且更有兴趣了解它的效果如何。

Tile Mate 产品页面设计示例

编辑您的照片

一旦你有了照片，你需要做一些事情来让它们做好零售准备。最明显的任务是删除他们的背景。使用 Adobe Creative Cloud Magic Wand 或 Pen 工具轻松完成此操作，拥有白色屏幕。

GIFS是低质量的图像，适用于图标和缩略图。它们也支持动画，但由于文件大小和质量较差，不适合大图像。
SVG是一种矢量格式，这意味着它使用 XML 以文本格式描述图像的内容。它将几乎立即以非常小的文件大小加载图标和基本图像，但常规图像将太复杂而无法使用这种格式。
PNG图像是支持较少压缩的更快文件，这意味着它们将保留原始图像质量。它们还支持灰度和透明度，但文件大小对于电子商务而言通常太大。
JPG是一种压缩方法，可让您更改压缩程度。通常，JPG 图像最多可将文件大小减少 10 倍，而不会造成明显的质量损失。这使它们成为创建高质量、低文件大小的产品图像的理想选择。

此外，请确保您使用适当的文件名命名图像，并使用准确描述图像和内容的标题和 alt 标签。 Alt 标签可用于包含显着的关键字，但它们的主要目的是辅助可访问性。

奖励：查看 A Better Lemonade Stand 关于为 Web 优化图像的文章：针对有兴趣了解有关图像优化的更多信息的初学者的分步实用指南。

第 4 部分：保持产品摄影的一致性

伟大的电子商务商店使用在单个产品页面或类似产品集合中同样适用的产品照片。拥有一致的图像可以更轻松地搜索和比较产品，还可以围绕您的品牌创造一致性和专业性。

以下是保持产品摄影一致的最佳方法：

在白色背景上拍摄您的产品

始终如一地制作出色产品照片的最简单方法之一是使用白色背景。在我们之前的摄影文章中，我们概述了如何创建自己的摄影设置并拍摄专业级产品照片。

将照片放在白色背景上可以让您：

在您的所有产品中创建一致性
增强产品的某些方面
将来轻松编辑您的照片，以及
在谷歌购物和亚马逊等需要白色背景的市场上销售您的产品。

使用相同的尺寸或纵横比

在收藏页面上，没有什么比不同尺寸的图像更突出的了。除非您使用 CSS 专门设置了最小高度和宽度，否则您的收藏页面将变得一团糟。用户将不得不花费宝贵的购物时间来解读点击的位置。

甚至考虑一个简单的产品集合页面。与左侧的多尺寸产品相比，右侧的方形产品的浏览和比较容易多少？

产品图片集页面设计

哪个更好看？

虽然有可用的应用程序和插件可以为您整理图像，但最好的方法是确保您的产品图像始终以特定尺寸保存。

在最长边创建尺寸在 1000 像素和 1600 像素之间的图像是可以的，但您也应该尽量保持所有图像的方形。无论图像是水平的还是垂直的，方形图像都会很好看，并且会使您的图像在您的商店中保持一致。

利用产品模板

要打造具有专业外观的电子商务商店，您需要在产品图片之间保持一致性。这意味着照片不仅尺寸相同，而且在图像中具有相似的风格和一致的定位。

如果您查看任何成功的电子商务商店，您会发现它们的图像本身就很突出，但也非常适合收藏，因为它们都与相机的距离相同。

注意：如需更有用的 Photoshop 教程，可将您的产品照片提升到一个新的水平，包括逐步演练以去除产品照片中的小瑕疵、在后期制作中更改产品颜色以及提高照片中产品的清晰度，查看我们的 Photoshop 电子商务教程：改进您的产品照片文章。

第 5 部分：让您的产品照片更上一层楼！

如果您拥有出色的产品摄影和出色的产品描述，那么您就有了制作高转化率产品页面的条件。但是，您仍然可以做一些最后的事情来改进您的产品照片，以确保您拥有最好的页面。

加速你的图像

图像会对页面加载时间产生巨大影响。如果您的产品页面加载缓慢，您的访问者会因为等待他们加载并访问更少的页面而感到沮丧。事实上，如果加载时间超过 3 秒，40% 的访问者会放弃您的网站。因此，产品页面应该能够快速加载并易于浏览。您可以通过多种方式优化图像以实现这一目标。

一方面，将 CSS 用于页面背景而不是图像。同样，CSS 应该用于在图像和按钮元素周围创建边框。

加载插件或图片库的外部库也会减慢页面的整体加载时间，应避免用于页面的关键元素。

您还可以通过 Google PageSpeed Insights 运行您的页面，以确定加快移动和桌面网站速度的方法。 Google PageSpeed 会告诉您可以压缩哪些图像、如何优化图像以及这样做可以节省多少空间。

谷歌页面速度洞察

您浏览器的内置开发人员工具还可以识别您的页面如何加载文件以及哪些文件需要很长时间。

要在 Google Chrome 中执行此操作：

花一些时间查看您的产品页面在各种移动设备上的显示方式至关重要。 Hotjar 等工具允许您创建用户如何与您的页面交互的热图。而且，如果您安装了 Google Analytics，您可以比较您的移动和桌面转化率，以确定您的移动购物体验是否符合要求。

优化移动产品页面

谷歌分析可以为您提供大量关于转化率和购买旅程的有用电子商务数据，但体验您的网站在多种设备上的外观的最简单方法是亲自体验。使用 Chrome 设备工具栏——或者响应式设计模式（如果你使用的是 Firefox 或 Safari）——你可以看到你的产品页面在任何设备上的外观。

移动产品页面的一些注意事项：

将您的图像放在前面和居中。额外的信息应该在用户需要时提供给用户，但不应妨碍图像。
通过确保您的图像已缩小尺寸并且您没有加载太多第三方插件来加速您的网站。加载时间对于通过移动网络加载的客户来说尤为重要。
考虑使用固定菜单栏，以便客户始终可以访问搜索栏、主菜单和购物车。

客户将花费更少的时间在移动设备上浏览和阅读内容，因此图像对于您的移动购物者来说将发挥特别重要的作用。确保您的图片醒目且加载速度快，以确保您提供最佳的移动购物体验。

记住搜索引擎优化

就 SEO 而言，产品页面通常似乎是未充分利用的资源。您的产品页面让您有机会展示一些最有价值和独特的内容，这些内容可以帮助您的商店在搜索列表中排名更高。通常情况下，产品页面正是您的客户想要看到的。

要加强您的产品页面 SEO：

制作独特的产品描述，清楚地概述您的产品是什么，并与您的客户搜索的术语相匹配。
通过包含用于描述图像的 ALT 标签、适当的标题标签和相关文件名来优化您的图像元数据。
考虑将视频添加到您的产品页面。将视频添加到您的页面是否有助于 SEO 有待讨论，但它们可以帮助为您的产品提供更多背景信息，从而提高您的转化率。

为缩放优化图像

您是否注意到大多数电子商务网站将允许您将鼠标悬停在图像上以“放大”产品？这已成为几乎成为第二天性的特征。当我们单击或悬停在产品上时，我们希望获得更大版本的产品。

为缩放优化产品图像

拥有此功能有一个重要目的。它可以让客户详细确定产品的质量。当客户无法亲身感受或看到产品时，它还有助于增强对客户购买的信心。有时，缝合质量或颜色深浅会影响客户选择您的产品而不是竞争对手的产品。

那么你如何确保你有一个有效的缩放功能呢？秘诀在于知道如何使用正确的图像尺寸。

大多数电子商务网站都会有各种“模板”。这些模板将调整您的图像大小以匹配该模板大小。例如，您可能有：

一个 50px x 50px 的缩略图模板
一个 100px x 100px 的集合图像模板
150px x 150px 的相关图片模板
500px x 500px 的主照片模板

缩放功能通常通过以完整的原始尺寸显示图像来工作。因此，如果您有一张以 1000 像素 x 1000 像素保存的图像，当您将鼠标悬停在主照片模板（500 像素 x 500 像素）上时，它将以两倍大小显示。

这意味着，要使用缩放功能，您必须确保图像尺寸大于主照片模板。

结论

在这五章中，我们已经能够广泛涵盖您在制作产品页面时需要适当考虑的最重要领域。如果您遵循这些准则，您将拥有一个产品页面，为您的客户提供出色的购物体验并享有高转化率。既然您有了指南，就可以出去创建一个成功的产品页面，为您的电子商务商店创造销售量。