产品页面是专门用于销售特定产品或服务的网站的一部分。与主页（主要是信息性的）等其他网页不同，产品页面的作用是告知和说服——这意味着它会理想地引导客户点击“添加到购物车”按钮。这也是产品页面设计成为挑战的原因，考虑到漂亮的设计并不总是转化为高转化率的设计。

审美选择必须比平时更具战略性，才能将产品从屏幕上移到客户手中。为了使这更容易，国外vi系统设计公司整理了这份产品页面设计的终极指南。

产品页面的目标

基本而言，制作产品页面是为了促成购买。但是为了实现这一总体目标，产品页面必须完成几件事。

它应该解释什么是出售的。产品页面必须向访问者展示产品的外观、功能以及成本。

它应该建立信任。首次购买是一种信念的飞跃，尤其是当产品在线时，因此产品页面必须预见并消除访问者的疑虑。

它应该创造一种体验。产品页面将使用引人注目的媒体和副本，让客户感觉数字化的东西真实。

它应该是直观的。产品页面必须完成上述所有目标，而不会用信息轰炸用户。

产品页面的目标和买家的目标

实际上，产品页面的目标应该与买家的目标一致。客户在此页面上是因为他们试图满足需求。

假设产品是解决方案，那么产品页面的工作就是说服访问者这是真的。如果产品不是，这也应立即明确。

当然，所有这些都需要了解买家的需求。您必须首先了解产品的营销对象以及他们习惯与之交互的产品类型和网页。

广泛的人口统计、调查、访谈和心理概况都是目标受众研究的标准技术。然后，国外vi系统设计公司必须将他们对购买者的了解转化为设计中的心理学原理。

产品页面的内容

产品页面的基本内容围绕“折叠”或屏幕截断页面其余部分的点构建。

因为用户必须滚动才能查看首屏下方的内容——换句话说，他们必须做出主动选择才能继续浏览——最初的“首屏”部分是保存最重要信息的地方。所以让我们从那里开始：

标头：这包含品牌徽标和导航菜单选项。这在大多数网页上是相当标准的，因此不必特别大。许多品牌即使在桌面上也选择最小化版本的导航，例如汉堡包图标。

产品描述：这包含产品名称、价格、价值主张，有时还包含评论快照（例如星级）。从本质上讲，这可以识别产品并简要说明访问者应该购买它的原因。

产品图片和媒体：这包含主要的产品图片，通常在轮播中，供访客循环浏览各个角度。这还包括查看选项，例如不同的颜色或型号。

号召性用语（CTA）按钮：这是指向购买页面的按钮。CTA 附近包括购买选项，例如数量或尺寸。

国外vi系统设计公司将列出的其余内容项不一定非要放在首屏以下，但不如上述内容那么重要。

支持信息：这将包括有关产品的更详细的工作原理信息，例如重量和尺寸、常见问题解答，甚至产品特定部件的故障。

同行认可：这包括任何著名品牌或过去使用过该产品的人的推荐、评论和列表。

支持图形：这些是辅助滚动的非必要图像，例如有助于页面更具交互性和活力的插图/动画。它们通常与网站的一般品牌相关。

推荐产品：这会显示访问者可以考虑的其他产品列表。如果访问者最终对这个产品不感兴趣，推荐的产品可以让他们有机会继续浏览其他产品页面，而不是简单地离开网站。

不同类型的产品如何影响产品页面内容

产品页面的内容可能因产品/服务的性质而异。最常见的区别发生在物理产品和数字产品（或可见和不可见）之间。

实体产品在数字空间中具有固有的劣势，其页面内容的目标是替代实体店。他们可以通过将更多资源投入媒体、详细的产品规格或突出运输/退货政策来实现这一目标。

与此同时，依赖非视觉感官的蜡烛或葡萄酒等实体产品往往在其页面策略中模仿数字产品——即强调有说服力的描述。但是因为他们依赖个人品味，所以这个领域的趋势是在产品页面之前使用入职测验。

这些向访问者（有趣但具有战略意义）询问有关他们偏好的问题，以营造一种他们最终看到的产品页面已经为他们策划的感觉。

数码产品或服务可能无法显示图像，因为产品无法拍照。服务也可能经常是新奇或陌生的，需要花费更多时间来确定品牌是谁以及他们提供什么。出于这个原因，定价通常被保留到最后。未完全了解报价的列出的价格可能会吓跑访问者。

另一方面，实体产品在这方面可以更直接——一件 T 恤就是一件 T 恤，你要么认为它看起来足够好买，要么不买。

产品页面设计最佳实践

现在国外vi系统设计公司已经了解了产品页面如何工作的基础知识，我们将介绍一些设计技巧并查看一些示例。

1.使用合适的产品页面设计软件

设计过程通常会从简要或必要功能列表开始。然后，大多数设计师将过渡到纸笔草图，以产生有关元素如何组合在一起的想法。这被称为线框- 页面结构的简化骨架表示。一旦你缩小了这些范围，你必须转向软件。

Sketch 和 Figma 等原型应用程序可以创建更复杂的模型，让您更准确地表示页面的外观。与此同时，InvisionApp 创建了交互式原型，从而加快了测试过程。

 原型应用程序的好处是它们允许设计师在早期只关注用户体验。它们也往往导致较少的原创设计。虽然这通常更可取（目标是无缝购物体验），但如果您想制作更具创意的设计、纹理或动画，则需要Photoshop 和 After Effects 等软件。

2.使用基于模板的布局方法

考虑到电子商务网站将有多种产品（如果不是数百种），为每个单独的项目定制产品页面是不可行的。大多数设计师的目标是模板布局，使添加新产品页面像复制和粘贴内容一样容易。一种方法是为所有产品页面使用一个模板，或者为不同的产品类别使用稍微不同的模板。

基于模板的设计需要规划：营销人员和文案必须为每种产品提供一致数量的图像、功能列表、问答、推荐等。同时，产品页面模板不必总是100% 相同。例如，如果产品之间的颜色会有所不同，则可以改变产品页面的配色方案以匹配。

如今，许多产品页面甚至在不同公司都有相当标准的布局。例如，电子商务网站倾向于在左侧显示图像，右侧显示产品描述、自定义选项和CTA。下面是规格和优势列表，然后是常见问题解答和评论/推荐。

像这样无处不在的布局的优势在于它的熟悉度：大多数访问者会直观地知道在哪里可以找到他们正在寻找的信息。它的直截了当对于品牌无法控制产品图像和副本的买家/卖家平台（如 Ebay）来说尤其理想。

但是有一些方法可以防止这种布局变得乏味。在图中的国外vi系统设计公司设计中，产品页面元素的总体定位是标准的，但图像的比例和纯色背景都出乎意料。

3. 设计时要考虑到网站的其他部分

当然，产品页面不是孤立设计的：它们必须与网站的其余部分集成。像这样的一致性不仅对于品牌推广很重要，而且因为不一致的产品页面在潜意识中对潜在购买者来说似乎不太值得信赖。

将产品页面限制在现有品牌中也可能给国外vi系统设计公司带来挑战。假设一个品牌团队出于一些不相关的原因决定对所有图像使用黑白滤镜——现在如果产品页面强调商品的颜色，它就会脱离品牌。这就是为什么优先考虑在线购物的电子商务企业应该从产品页面设计开始网页设计过程。