BLOG

如何设计产品页面:终极指南

浏览数量: 3     作者: 本站编辑     发布时间: 2022-12-20      来源: 本站

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


审美选择必须比平时更具战略性,才能将产品从屏幕上移到客户手中。为了使这更容易,我们整理了这份产品页面设计终极指南。



产品页面的目标

简而言之,制作产品页面是为了促成购买。但是为了实现这个总体目标,产品页面必须完成几件事。


它应该解释什么是待售的。产品页面必须向访问者展示产品的外观、功能以及价格。它应该建立信任。第一次购买是一种信念的飞跃,尤其是当产品在线时,因此产品页面必须预见并消除访问者的疑虑。


它应该创造一种体验。产品页面将使用引人入胜的媒体和文案,让数字化的东西对客户来说是真实的。它应该是直观的。产品页面必须实现上述所有目标,而不会用信息轰炸用户。



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

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


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


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


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



产品页面的内容

产品页面的基本内容是围绕“折页”构建的,即屏幕与页面其余部分的分割点。因为用户必须滚动才能看到折叠下方的内容——换句话说,他们必须主动选择继续浏览——最初的“折叠上方”部分是保存最重要信息的地方。那么让我们从这里开始:


标头:包含品牌标志和导航菜单选项。这在大多数网页上是相当标准的,因此不必特别大。许多品牌甚至在桌面上都选择最小化的导航版本,例如汉堡包图标。


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


产品图片和媒体:这包含主要产品图片,通常在轮播中供访问者循环浏览各种角度。这还将包括查看选项,例如不同的颜色或型号。号召性用语 (CTA) 按钮:这是指向购买页面的按钮。CTA 附近包括购买选项,例如数量或尺码。


我们将列出的其余内容项不一定要放在首屏,但不像上面那样紧迫。支持信息:这将包括有关产品的更详细的工作原理信息,例如重量和尺寸、常见问题解答,甚至是产品特定部分的故障。


同行认可:这包括任何著名品牌或过去使用过该产品的人的推荐、评论和列表。支持图形:这些是辅助滚动的非必要图像,例如有助于页面更具交互性和活力的插图/动画。它们通常与网站的一般品牌相关联。


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



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

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


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


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


这些向访问者询问(有趣但有策略的)关于他们偏好的问题,以营造一种他们最终看到的产品页面已经为他们策划的感觉。


数码产品或服务可能因产品无法拍照而无法显示影像。一项服务通常也可能是新奇的或不熟悉的,需要花费更多时间来确定品牌是谁以及他们提供什么。出于这个原因,定价通常是最后保存的。在没有完全了解报价的情况下列出的价格可能会吓跑访问者。


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



产品页面设计最佳实践

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



使用正确的产品页面设计软件

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


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


应用程序原型设计的好处是,它们允许设计人员尽早专注于用户体验。它们也往往会导致较少的原创设计。虽然这通常是更可取的——目标是无缝的购物体验——但如果您想制作更具创意的设计、纹理或动画,您将需要 Photoshop 和 After Effects 等软件。



使用基于模板的布局方法

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


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


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


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


但是有一些方法可以使这种布局不至于乏味。在这里拍摄的龟背竹设计中,产品页面元素的总体定位是标准的,但图像的比例和纯色背景都是出乎意料的。



设计时考虑到网站的其余部分

当然,产品页面不是孤立设计的:它们必须与网站的其余部分相结合。像这样的一致性不仅对品牌推广很重要,而且因为不一致的产品页面在潜在购买者看来下意识地不太值得信赖。


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


同时,让品牌个性在产品页面上大放异彩也可以带来创意自由——图中的“连帽衫”设计清晰地表达了品牌的态度。但是,如果它有助于优化产品页面,那么考虑完全重新设计网站也永远不会太晚。


同样,结帐页面通常是产品页面的极简版本,以缩图显示关键产品图像、价格和数量,并提供更改选项。


考虑到将近 70% 的购物车被放弃,结账时间是展示产品页面上列出的优势(例如运输时间和低费用)的理想机会。将结账页面叠加在产品页面之上,也将使用户更容易点击退出返回,而不是可能离开网站。



一个伟大的产品页面设计需要一个伟大的设计师

产品页面的设计一部分是科学,一部分是风格,全部是商业。归根结底,出色的产品页面旨在将产品从计算机屏幕提升到客户的日常生活中。我们希望本指南为您提供了一个开始如何实现这一目标的地方。但是,当您准备好完成交易的产品页面时,请确保您正在与一位才华横溢的设计师合作。



广东五车科技有限公司 · 版权所有 ©1999-2024
本网站文案、设计及其中所展示作品的著作权均属于五车公司,盗版必究 · 粤ICP备19051125号-1