Magento 产品页面设计原则可帮助您销售更多产品

这是 Staylime 首席业务发展官 Jan Guardian 的客座文章。

精心设计的产品页面对于每个电子商务商店的成功都至关重要。 了解理想 Magento 产品页面设计的基础知识可以帮助您有效地利用该平台并提高您的网站转化率。

无论您是在设计 Magento 登录页面、寻找产品列表页面设计灵感，还是想要创建引人入胜的产品页面设计，我们都能满足您的需求。

在本文中，我们的 Guru 合作伙伴 Staylime 详细介绍了有助于创建引人入胜的产品页面的因素，其中包含来自高转化率电子商务网站的真实示例。

促进销售的七种产品页面设计原则

1. 设计时要考虑到您的目标受众

在设计网站的用户界面时，建立客户的买家角色非常有用。 为您的目标受众量身定制您的网站产品页面设计可以帮助您最大限度地提高设计工作的效率并创造积极的购物体验。

2. 与您的品牌保持一致

创建以用户为中心的设计的下一个原则是确保您的品牌在整个网站上保持一致。 从您的登录页面到产品、结帐和订单确认页面，页面布局设计的一致性可以帮助您的品牌显得更加可靠和值得信赖。

3.保持简单

客户很少访问电子商务商店的设计。 他们的兴趣在于企业提供的产品或服务。 在您的电子商务产品列表页面设计中力求简单，可以使产品信息大放异彩，并帮助客户做出更明智和无干扰的购买决策。

4.使用销售的网站副本

当您在线销售时，定制您的网站副本以与您的受众交谈是至关重要的。 使用冗长乏味的促销写作肯定会失败。 谈生意时要简洁有助于传达您的信息，而不会出现不必要的绒毛。

5. 不要害怕约定俗成

遵循惯例可以帮助新客户更快地在您的网站上定位自己，从而缩短他们的学习曲线。 使用网站导航、搜索功能和网站结构的标准模式有助于创建熟悉的购买体验。

6. 建立一个迭代过程

最好的电子商务产品页面设计是不断发展以适应其受众的设计。 定期 A/B 测试可以为店主提供对其网站设计性能的重要见解。 使用这些见解来创建迭代过程可以改进网站设计并增强用户体验。

7. 采用响应式设计方法

Business Insider Intelligence 预测，移动商务将以 25.5% 的复合年增长率增长，到 2024 年将达到 4880 亿美元。这一统计数据使得为您的产品页面布局采用响应式网页设计方法变得轻而易举。

图片来源：商业内幕

必备产品页面 UX 设计元素

清除产品页面导航

在着陆页上显示面包屑可以帮助客户更有效地在页面之间导航。 使用后退按钮仅允许用户一次返回一页。 面包屑导航可以帮助他们更有效地访问其他目录产品。

产品评论和评级

客户更有可能信任用户撰写的产品评论，而不是销售商品的企业提出的声明。 允许您的客户对您的产品进行评分和评论并在产品页面上显示它们将有助于建立对您的产品和品牌的更多信任。

优质产品媒体

使用高质量的图像和视频并将它们放在首屏将帮助客户直观地看到他们所购买的东西。 确保您包含多个产品图像，并包含缩放、平移和倾斜图像的选项以完整展示该项目。

突出显示的成本和可用性

强迫用户将商品添加到购物车以查看定价是失去销售的肯定方法。 您应该设计您的产品页面以显示可用性、定价和任何其他适用的成本。 这样做将减少客户在结账时放弃购物车的可能性。

产品选项选择

Magento 支持多种产品类型，例如简单的、可配置的、分组的和捆绑的项目。 使用 Magento 产品定制器扩展可以帮助您清楚地展示所有变体，为您的客户提供一种用户友好的方式来从提供的产品选项中进行选择，并在购买前定制产品。

“加入购物车”按钮

以“添加到购物车”按钮的形式明确号召性用语将帮助您的客户在找到他们喜欢的产品后继续购买。 确保它位于桌面页面的首屏上方，粘贴在移动视图上，并且是一种易于查找的独特颜色。

客户参与机会

使用社交分享按钮为客户提供与您的业务和产品互动的机会。 这样做将帮助他们在各种社交媒体平台上分享您的商品并增加您的网站流量。

常见的产品页面设计错误

以下是创建 Magento 定制设计产品页面时应避免的一些陷阱。

产品信息不足

使用产品描述为客户提供他们需要的信息是帮助他们快速做出购买决定的最佳方式。 当客户与产品进行虚拟交互时，缺少尺寸图表或对产品功能的清晰描述等信息可能会导致混淆或放弃购买。

缺乏社会证明

使用社会证明作为营销工具可以产生很好的效果。 缺乏用户生成的内容，例如登录页面上的产品评论或其他 CMS 页面上的业务评论，可能会使初次使用的客户难以信任企业。

缺少添加到购物车确认

缺少添加到购物车的成功消息会导致客户头脑中的混乱。 这可能导致客户多次添加相同的项目或完全放弃网站。 在弹出窗口中显示成功消息可以帮助客户避免混淆或购买多种产品。

产品页面设计的六个阶段

想法验证

产品页面设计过程的第一阶段是概念化和验证您的页面设计。 它还涉及收集信息、定义项目范围和概述成功的衡量标准。

线框图

有了明确定义的范围和所需页面的清晰概念，下一阶段涉及创建 Magento 产品页面布局设计，而无需任何最终设计元素。 这个“线框”为登录页面的内容和功能创建了结构基础。

原型制作

下一阶段包括构建原型或产品页面的初稿以验证其设计。 这个阶段有助于将设计从概念变为有形的形式，以便设计师可以及时进行任何改进或必要的更改。

测试

创建原型后，下一阶段涉及彻底测试页面设计，以确保其在所有设备和浏览器上按预期加载和运行。 更重要的是，它有助于在将页面部署到生产环境之前识别设计或功能中的任何缺陷。

发射

在对网站进行了彻底的测试后，它终于可以发布了。 启动阶段涉及将设计转移到实时服务器并运行最终诊断以确保一切按预期工作。

发布后

页面设计过程不会随着发布而结束。 将设计部署到生产环境后，可能仍会出现无法预料的问题。 发布后阶段包括挤压错误和打磨粗糙的边缘。 有时，它还可能包括根据客户反馈对 UI 或 UX 进行细微更改。

如何设计产品页面——七个真实的例子

现在您已经熟悉了产品页面设计的原则和注意事项，让我们看一些高转化目标网页的示例。

目标

Target 的受欢迎程度可归因于其设计美观但信息丰富的产品页面。 他们采用以下要素为客户提供做出明智购买决定所需的所有必要信息：

• 面包屑
• 突出的价格
• 高质量图像
• 配送信息
• 杰出的 CTA
• 视觉色样
• 产品信息
• 运输和退货信息
• 建议

Gymshark

Gymshark 采用简约设计，专注于产品图片，让他们的产品闪耀。 他们在着陆页上实施了以下元素，以简化客户的购买决策：

• 面包屑
• 突出的价格和折扣
• 视觉样本
• 高质量图像
• 配送信息
• 杰出的 CTA
• 图像色板
• 产品信息
• 建议
• 信任信号

佳明

Garmin 提供简洁的布局，允许客户通过从他们提供的各种选项中进行选择或根据他们的需求定制产品来购买商品。 他们还在产品页面上包含以下元素：

• 突出的价格
• 高质量图像
• 产品选项
• 产品定制
• 杰出的 CTA
• 运输信息
• 产品信息
• 建议

安克克劳

Ankerkraut 使用简约而现代的产品页面设计，专注于突出产品。 他们在其登陆页面上实现了以下元素，以实现用户友好的购物体验：

• 面包屑
• 突出的价格
• 高质量的图像
• 图像色板
• 杰出的 CTA
• 描述
• 产品信息

耐克

Nike 采用简约设计，搭配高品质图像和视觉样本，打造无干扰的产品页面。 它们还包括以下要素，以确保客户在购买时获得所需的所有信息：

• 明确的定价
• 图像色板
• 杰出的 CTA
• 描述
• 产品信息
• 运输和退货信息
• 参与机会

扎拉

Zara 保留所有产品信息和图片，以帮助客户快速做出购买决定。 他们在产品页面上使用以下元素来创建独特的设计：

• 描述
• 突出的价格
• 杰出的 CTA
• 产品选项
• 高质量图像
• 产品信息
• 参与机会

亚马逊

亚马逊的产品页面设计似乎与此列表中的其他一些简约和现代设计相反。 然而，他们的成功清楚地证明了这样一个事实，即为客户提供轻松访问产品页面上的信息是零售成功的关键。 他们在产品页面上包含以下元素：

• 高质量图像
• 突出的价格
• 评论和评分
• 图像色板
• 描述
• 运输信息
• 产品可用性
• 杰出的 CTA
• 信任信号
• 参与机会

底线

无论是产品或产品类别页面设计，实施本博文中列出的页面设计原则将帮助您创建一个直观且用户友好的 Magento 商店。 即使不选择自定义设计，您也可以使用流行的产品页面扩展来改进您网站的功能。 添加运费计算器、文件附件和产品定制等功能将极大地提升您商店的购买体验。

常见问题解答：Magento 2 产品页面设计

关于作者：

Jan Guardian 是 Staylime 的首席业务开发官，Staylime 是一家总部位于加利福尼亚州红木城的 Magento 开发公司。 他负责制定和领导公司的销售和数字营销策略。 Jan 对销售、营销和新兴技术充满热情。