成功的着陆页设计是关于转变的,它将好奇的观察者转变为确定的购买者。但是,目标网页的工作方式并不是魔术:数字策略和视觉设计共同构成了引人注目的产品展示。如果做得好,一次购买者甚至可能会再次转变为回头客。

笔记本电脑上工作的设计师的平面设计插图
登陆页面设计不是魔术,它需要数字策略和视觉设计。通过OrangeCrush。

即使精心设计的目标网页更有可能赢得购买,但它们却被严重低估了- 有44%的公司将流量引向首页 而不是目标登陆页面。要花费大量的广告,搜索引擎优化(SEO)和一般的营销资源来吸引人们对产品的兴趣,这是企业最终无法承受的。但是,尽管着陆页具有潜在的收入潜力,但它们的效果仅与设计一样有效。

为了确保您的设计能够顺利着陆,我们将介绍着陆页的工作原理,着陆页的组成部分以及设计出色着陆页的技巧。尽管您可能会觉得步入着陆页设计有些不稳定,但我们会帮助您找到立足之本。

着陆页设计的工作原理及其重要性

着陆页(有时也称为产品页面)旨在用于营销特定产品/服务或以其他方式使查看者执行特定操作。当用户单击促销链接或在Google上搜索产品时,通常会将用户定向到该页面。

笔记本电脑上工作的设计师的平面设计插图
着陆页旨在销售特定产品。由2ché设计。

除了公司的一般信息之外,企业的网站还充当其所有产品和服务的枢纽。尽管着陆页是公司网站的一部分,但它们的目标是立即进行说服和销售,并且它们通过特定的方式来实现。着陆页侧重于一种产品,副本侧重于描述和销售该产品,设计侧重于使该副本可读,该产品可呈现并吸引观看者。因此,目标网页(尤其是多个目标网页)非常多 更有效地产生潜在客户 而不是商家的网站首页。

由于目标网页是营销工具,因此其设计的成功通常以数量来衡量:转化和流量。转化是购买产品的页面访问者数量(他们 兑换 从非购买者到购买者)。如果转化率低,大约2%被认为是平均水平),则您的设计无法达到其最终目标。

产品管理品牌的平面设计着陆页
登陆页面专注于使用户执行特定操作。 FaTiH™设计。

流量包括有关谁正在访问您的页面的信息,包括访问者的总数和停留时间。当访客离开页面而不购买页面时,据说他们已经离开页面了。尽管流量指标可能不如转化指标那么重要(如果没有人购买,高流量的目标网页跳出率就不高了),但通过整个目标网页进行访问的人数可以使您深入了解设计的吸引力。好消息是,停留在页面上超过十秒钟的观看者 更有可能阅读整个页面。出色的设计加上清晰,引人注目的信息,是通过此关键窗口吸引他们注意力的最佳资产。

寻找登陆页面灵感吗?看看这篇充满令人惊叹的目标网页设计思想的文章。

登陆页面设计的剖析

没有一种设计目标网页的方法。毕竟,最重要的是您的目标网页可以有效地告知和说服观看者。就是说,多年来的着陆页设计已经创建了用户习惯的约定,这些约定可以作为构建的基础。以下是登录页面设计中最常见元素的细分。

标头

页眉是着陆页的第一部分-一个矩形空间,通常占据大部分初始页面屏幕。尽管其大小可以变化,但通常包含以下组件:

影片销售应用程式的到达网页设计
标头着重于吸引用户的注意力,简洁地介绍和推销产品。由creativev设计。
  • 品牌推广:公司徽标和产品徽标(如果适用)。
  • 英雄形象:与产品相关的最主要,最吸引人的图像,通常为横幅形状。它可以是产品本身的图片,也可以是捕获产品使用体验的插图或照片场景。
  • 标题:伴随英雄形象的副本,简洁明了。
  • 副标题:这可以标识产品并提供其好处的更详细的摘要(称为价值主张)
  • 呼吁采取行动:也称为CTA,这是用户单击以进入购买流程的按钮(和插图,“立即购买!”)。 CTA很重要,但请注意不要过度使用它们-这会使页面混乱,并且很难销售。而是考虑使用固定条,将CTA保持在用户滚动屏幕的顶部。 (注意:CTA可能有其他目的,例如获得订阅者或下载,但为简单起见,在本文中,我们将主要指购买。)
儿童食品比赛的着陆页设计
标头应包含引人注目的图像和标题,以吸引观众。由Janki14设计。

导航是您希望尽可能减少的一种常见标头设计元素。尽管大多数网页都包含导航菜单,但登录页面并非“正常”网页。它旨在使观看者一直停留在页面上,直到他们准备购买为止,而带有很多选项的导航栏则鼓励他们前往其他地方。

内容

内容部分是目标网页的主体。标头用于介绍产品并吸引用户的注意,而正文应着重于详细阐述价值主张并为转换提出令人信服的论点。着陆页的内容通常包括:

自行车制造品牌的着陆页设计
支持的图形和产品规格有助于构建目标页面的内容部分。 Prismonline的完整设计⭐️⭐️
  • 支持图形:次要产品图片(具有其他角度或使用该产品的客户),可简化项目符号和颜色的图标,或可引导观看者将目光移向页面的抽象形状。
  • 产品规格:复制可按清晰的步骤细分产品的工作方式。在上述每个步骤中展开的链接(即“了解详情”)有助于解决疑虑,但同时也要避免将用户带离目标网页。
  • 好处比较:有时需要通过将产品与竞争对手的产品进行比较,或者通过识别和解决消费者的痛点来证明产品如何改善客户的生活。
  • 对等验证:过去的客户评分,评论和/或推荐,所有这些都通过积极的社交推荐建立了观众对产品的信任。

页脚

页脚是您的目标网页的停机坪的尽头,观众将必须做出最终决定。它通常包括以下内容:

LinkedIn教育课程的Duotone登陆页面设计
页脚包含关闭信息,例如联系方式和法律详细信息。由Adam Muflihun设计。
  • 链接到其他页面:您可能想要链接到站点上的其他相关页面,例如FAQ页面。
  • 社交媒体链接:这可能是一个有争议的内容(如前所述,您不应该鼓励用户执行不涉及CTA的操作),但是它可以改善流量,为用户提供链接,以便在社交媒体上与其关注者共享目标网页。
  • 联络资料:电话号码或电子邮件地址为客户提供了一个在其他问题上可以转弯的地方。
  • 法律信息:网站和产品版权以及其他法律术语。它通常包含在页面底部的黑条中,以将其与其余内容分开。

设计目标网页的6个技巧

了解目标网页的常见组成部分和目标是一回事,但是这些如何转化为视觉设计原则?尽管着陆页的外观会因设计师和品牌而异,但以下是有效着陆页设计的一般准则和提示。

1.坚持简约

极简主义是指将页面的设计元素(颜色,版式,图像等)限制为基本必需品。在设计时,请询问您的每一个决定。如果设计元素没有增加用户对产品或购买论点的理解,那就摆脱它。

儿童GPS科技品牌的彩色着陆页设计
此设计每节使用一些元素(一些副本,图像和CTA按钮),并且在它们之间留有足够的空间,以简化目标网页的焦点。它还使用纯色块使截面边框易于识别。 Skalak的完整设计。

这很重要的主要原因有两个。首先,优良作法是假设即使用户选择访问该页面,用户对产品也只有一点点好奇,而所有分散注意力的风险都有可能失去他们已经摇摇欲坠的注意力。另外,给副本空间以足够的空白,可以突出显示信息,并减少文本的威吓性。

男士时尚服装品牌的着陆页设计
该设计使用中央对齐和大量的空白以创建极简主义的感觉。由RAZS设计。

其次,更多的图形元素通常意味着更长的加载时间。鉴于 跳出率增加 一页页面以指数级速度每秒加载和 搜索引擎甚至惩罚慢速页面,您的着陆页应优先于快速加载而不是浮华的图形。

2.利用“褶皱”

尽管“少即是”的方法可能会诱使您认为不滚动的短页更好, 较长的目标网页往往会更有效地留住观众。较长的页面为增加元素之间的间距创造了机会,而较短的页面可能会使同一设计感到局促和混乱。滚动是一个很小的接触,它使页面比面对面的广告牌更具互动性。

潜水品牌的水下主题登陆页面设计
就像它可以保证潜水员潜水的水下生物一样,此着陆页的图像也可以按比例裁剪,以吸引用户更深入地潜水。由set4net设计。

利用滚动的最佳方法是围绕所谓的“折叠”进行设计。这是由于屏幕分辨率而截断网页的那一行,迫使用户向下滚动以显示下面的内容。尽管实际屏幕尺寸有所不同, 折叠分辨率最高的是1000 x 600px。通过将有趣的,半隐藏的图形或复制预览隐藏在折叠中,您可以吸引用户向下滚动并进一步与您的页面进行交互。

3.优化阅读模式

阅读模式描述了用户扫描网页的常见方式(基于眼动研究),设计人员可以使用对齐方式和间距来组织文本以简化此过程。因为大多数用户会在致力于阅读网页之前先扫描网页,79%的人从未超越扫描阶段),那么最优化扫描设计就符合您的最大利益。拆分副本和图形的方式可以使文本行易于在远处阅读,但也可以巧妙地引导读者向下浏览页面并到达CTA。

分析应用程序的着陆页设计
以Z模式排列对齐方式可帮助用户快速扫描。由iva设计。

这是您的着陆页设计应考虑的两种最常见的阅读模式:

  • Z型:用户从左到右扫描时,眼睛会看到一个看不见的“ Z”。这对于图像繁重的设计很有用,并且可以通过将元素分散在锯齿形中并使用户快速从一侧到另一侧飞镖使页面布局更具动态感。
  • F花纹:用户从左到右扫描时,眼睛会看到一个看不见的“ F”。对于形状较重的页面,这往往更有用,因为形状更有利于逐行阅读。

4.互动设计

互动元素是网络为设计师提供的优于印刷产品的最大资产之一。着陆页设计师可以使用交互来邀请用户参与,而不是被动地阅读营销材料,这可以使体验更像游戏而不是广告。

滚动登录页面的GIF动画
滚动触发的动画可以使登录页面生动活泼并具有交互性。由Adam Muflihun设计。

标准滚动是一种很明显的交互形式,尽管不能单独打折,但设计人员可以通过垂直或水平滑动过渡等动画来提高这种效果。悬停动画可以使页面在用户的鼠标光标下栩栩如生,图形可以移动,淡入/淡出或更改颜色。如果您销售的是实物产品,则允许用户旋转产品的3D渲染可以邀请他们进行虚拟测试。

CTA按钮是您最重要的互动形式,因此单击它应该会带来积极和令人满意的效果。这可以通过在用户单击时创建动画的实体来实现。即使这些动画应微妙以免分散注意力和避免长时间加载,但它们仍将在使用户保持娱乐和参与方面大有帮助。

5.设计共享登陆页面方案

如果您的企业生产许多不同的产品或服务, 单独的目标网页以最大限度地提高转化 每一个人。但是,您创建的登录页面越多,扩展设计过程就越困难。缓解这种情况的方法?利用相同的布局。

奶酪品牌的着陆页设计
具有类似布局方案的登录页面的第二个版本。由eeeh_aarrh设计。
奶酪品牌的着陆页设计
登陆页面的一个版本可以建立其他版本的视觉样式。由eeeh_aarrh设计。

尽管应该为每种产品量身定制目标网页,但它们也是您品牌的一部分。保持它们之间的一致性对于创建可识别的视觉签名非常重要(这有助于用户信任您的品牌),但同时也使设计和预算多个目标网页更加可行。

从一个着陆页开始,并对其性能进行严格测试(在下一节中将对此进行详细介绍)。一旦有了可行的设计,就可以使用其布局方案作为其余着陆页的蓝图。不同的产品可能有不同的受众,因此请确保您继续测试每个页面,并在必要时区分它们的设计。

6.测试每个设计元素

不幸的事实是,尽管遵循了这些提示,但您的目标网页可能无法转换您期望的方式。着陆页设计归结为一门科学,其中事实和数据优先于美学偏好。设计方程式中的关键变量是目标受众。每个受众都是独一无二的,知道目标网页设计是否引起他们共鸣的唯一保证方法就是相应地测试和调整您的设计。

着陆页的多个版本的图像“ width =” 1600“ height =” 1350
测试登录页面的每个元素的多个版本,直到找到可行的设计。由伊恩·道格拉斯(Ian Douglas)设计。

拆分测试(有时称为A / B测试)是设计人员和营销人员决定最佳结果的一种常见方式,其中在两个不同的客户组上测试两种不同版本的设计。使用此方法可以测试网页的每个元素,从标题到广告文案再到图像再到按钮的形状。这样,您可以确信目标网页设计不仅看起来不错,而且用户也同意。

是时候开始着陆页设计了

在开始着陆页设计时,您必须假定观众正在寻找任何反弹的理由,并且取决于设计如何使其保持接地。

尽管有许多因素会导致跳出率较高(描述不明确,定价过高甚至只是性能不佳的产品),但良好的设计是降低跳出率的最佳因素之一。虽然本指南旨在为您提供一个着陆页设计的起点,但获得出色的着陆页设计的最可靠方法是与专业设计师合作。

想更多地了解网页设计?这是有关如何从头到尾创建网站的分步指南。