如何在 Sketch 中制作落地页

众所周知，互联网是一个饱和的市场。根据 Siteefy 的数据，目前全球网站数量为 11.4 亿个。这意味着竞争非常激烈。但是，别担心，你只需要一个好的诱饵，也就是落地页，就能在短时间内吸引大量网站访问者。

不知道从哪里开始？我们来帮您！在这篇文章中，我们将向您展示如何设计自己的落地页，使其脱颖而出，以及您可以在 Sketch 中使用它的不同方式。阅读完这篇文章后，您就不需要打电话给休斯敦寻求帮助了。

让我们做好发射准备 🚀

什么是落地页？

当我们说“诱饵”时，我们可没有开玩笑。落地页是营销人员为特定活动使用的单个网页。您希望访问者在点击您电子邮件、广告或社交媒体帖子中的 CTA 链接后“登陆”到这个页面。一旦访问者登陆到您的页面，就取决于您的设计和内容来引导他们完成转化。这就是为什么我们也称落地页为“目标”或“潜在客户获取”页面。

但是，网站和落地页有什么区别呢？

网站或“主页”与落地页的主要区别在于，网站或“主页”往往包含各种信息。用户旅程可以是任何事情，从填写您联系页面上的表格到购买产品。而落地页通常专注于完成特定的操作，例如让访问者下载电子书或注册参加活动。总而言之，落地页是单一用途的，并且具有更精简的设计——更少的选项卡或 CTA。

落地页的结构

现在，让我们看看构成落地页的核心元素。如果您想要让落地页取得成功，那么这些元素是您需要重点关注的。

• 英雄区域。将您的导航与页面其余内容隔开的横幅。它是访问者首先看到的内容，使其成为吸引他们的注意力并引导他们朝正确方向前进的最佳位置。
• 价值主张。说明您的产品服务以及与竞争对手的不同之处。您可以使用英雄横幅来引用您的价值主张。
• 号召性用语 (CTA)。激励您的受众采取行动的简短信息——无论是点击您的广告、下载您的电子书还是将商品添加到购物车。您可以在设计中添加 CTA，以链接和按钮的形式呈现。
• 社会证明。这有助于访问者信任您的服务，即使他们从未见过您或听说过您。您通常会看到它以当前客户的评论或推荐的节目的形式呈现。

如何在 Sketch 中设计落地页

是时候 开始设计了——不用担心，我们将一步一步地进行。在本教程中，我们将创建一个银行应用程序的落地页，但您可以遵循相同的步骤，使用自己的徽标和品牌标识来创建任何主题的设计。

添加画板模板并设置布局网格

和往常一样，一切都从画板开始。按 A 键触发画板工具，然后从 检查器 中的下拉菜单中选择 Web > 中等。请注意，当我们添加部分时，请扩展画板的高度，但目前它可以正常工作！

接下来，让我们添加一个列 网格布局 来帮助我们划分文字和视觉元素。要定义它，请使用快捷键 ⌃⌘L 或前往 查看 > 画板 > 布局设置。

打开布局设置模态窗口后，您需要输入以下值

• 总宽度：1200 像素
• 偏移量：120 像素
• 列数：12
• 间距宽度：24 像素
• 列宽：78 像素

按 确认，您应该得到类似这样的内容

创建导航栏

按 R 键，然后单击并拖动以创建一个 1440x80 像素的矩形。您始终可以使用检查器中的控件调整这些值。对于我们的设计，我们将为导航栏设置白色背景 (#FFFFFF)。然后，使用以下值添加阴影，以使导航栏从落地页的其余部分中脱颖而出

• 颜色：#000000
• Alpha：5
• X：0
• Y：10
• 模糊：20

从这里，您可以根据需要插入徽标、按钮 和菜单项。在我们的示例中，我们将从我们的品牌 库 中添加一些 符号，包括徽标和注册按钮。

设计 英雄区域

正如我们提到的，英雄横幅是添加价值主张和号召性用语的理想位置。对于此部分，让我们创建一个 1440x660 像素的矩形，并将其放在导航栏下方。

准备好基础后，按 T 键添加一些文字图层，用于标题 (83 像素，粗体) 和副标题 (20 像素，常规)。

当然——我们最喜欢的部分——让我们聊聊设计。使用背景和视觉元素来帮助提升您的信息。在本示例中，我们添加了一个微妙的 渐变背景 来引导视线到横幅，并将它与几个信用卡插图配对，以帮助立即传达这是一个与银行相关的应用程序。

添加 CTA

在使用 CTA 时，最佳做法是将其保持在五个字以内，因此是时候戴上您的 UX 文案 帽子了。在我们的示例中，我们使用了“免费开始使用”——这是我们在各种 Sketch 接触点中经常使用的短语。

要创建您自己的 CTA 按钮，请创建一个 195x52 像素的矩形，并将角落样式设置为 圆角，半径为 15。要使其更突出——就像我们在导航栏中所做的那样——您可以添加一个阴影，使用以下值

• 颜色：#000000
• Alpha：10
• X：0
• Y：20
• 模糊：40

满意您的按钮后，添加一个文字图层 (15 像素，粗体)——尽管您可能需要根据所使用的字体进行调整。

添加一些事实

赢得目标网页访问者信任的好方法是提供一些有关您的公司或产品的真实信息。在本例中，我们将通过在一个专用部分中突出显示一些关键指标来实现这一点。

让我们从创建一个 1440x240 像素的矩形开始，移除边框，并将其放置在英雄区域正下方。在我们的示例中，我们为矩形设置了灰色颜色 (#F3F4F5)。

要构建您的指标，请创建两个文本层以容纳您的数字（80 像素，粗体）和描述（15 像素，常规）。拥有它们后，输入一些文字并将层并排放置。然后，按住 ⇧ 并选择它们，然后使用 ⌘G 将它们分组，或使用 ⌘Y 将它们转换为符号。

现在，您需要使用 ⌘D 将该组或符号复制三次，并将副本沿矩形展开。为了确保指标的间距均匀，选择所有指标，然后单击检查器中的**整理**按钮。您也可以使用画布上的**智能分布**控制柄调整距离，了解详情。

为社交证明创建一个位置

我们已经告诉目标网页访问者我们的产品或服务为什么有效。但他们不必相信我们！让我们设计一个社交证明部分来支持我们刚才在 快速事实部分 中做出的声明。在这里，我们将添加一些推荐内容并包含头像图像。

创建一个 1440x370 像素的矩形，移除边框，并将其放置在快速事实区域正下方。我们为它选择了白色 (#FFFFFF) 的背景颜色。接下来，添加一个文本层，为该部分提供标题（35 像素，粗体） - 例如“我们的客户说”。

让我们使用一个 110x110 像素的矩形作为头像图像的容器。移除边框并将圆角设置为 18，使其看起来光滑。然后，单击检查器中的填充颜色以替换填充，并选择顶部的第五个选项。在这里，您可以从桌面拖放图像或通过单击数据图标并选择**Sketch 数据**>**人脸**来自动填充头像。

现在，为评论者的姓名创建一个文本层（17 像素，粗体），为评论创建另一个文本层（17 像素，斜体）。确保评论简短，以留给您的设计足够的空间。准备就绪后，将层分组，并像我们在 上一部分 中所做的那样进行复制和组织。

添加页脚

页脚就像网页设计汉堡包的底部面包。这是一个向访问者提供其他资源链接的好地方，例如产品信息、隐私策略和社交媒体页面。对于此页脚设计，我们使用了一个 1440x265 像素的矩形，并为它设置了黑色背景 (#000000)，以帮助将注意力集中在目标网页的其他部分。

拥有基本部分后，您可以根据自己的需要开始填充。如果要分享的内容很多，可以使用我们一直 在使用 的相同列方法。如果这样做，我们建议添加一些粗体标题，以帮助说明每列的内容。对于社交媒体徽标等图标，如果一直使用我们推荐的字体大小，24x24 像素是一个不错的尺寸。

就是这样！使用本指南，您可以轻松创建自己的目标网页并在设计过程中进行个性化。