如何 在 Sketch 中构建登陆页面
众所周知，互联网是一个饱和的地方。据Siteefy称，目前万维网上有 11.4 亿个网站。有很多网站可以与之竞争。但别担心，您所需要的只是一个好的诱饵 - 我们的意思是登陆页面 - 您很快就会吸引这些网站访问者。
不知道从哪里开始？我们为您服务！在这篇文章中，我们将向您展示如何设计自己的登陆页面，使其脱颖而出，以及您可以赋予它的不同用途 - 一切都在 Sketch 中。阅读完后，您将无需就任何问题致电休斯顿。
让我们为发布做好准备吧🚀
什么是着陆页？
所以当我们说“诱饵”时，我们并不是在开玩笑。登陆页面是营销人员用于特定活动的单个网页。这是您希望访问者在点击您的电子邮件、广告或社交媒体帖子中的 CTA 链接后“登陆”的地方。一旦访问者登陆您的页面，就取决于您的设计和内容来吸引他们进行转化。这就是为什么我们也将登陆页面称为“目标”或“潜在客户捕获”页面。
但是网站和登陆页面有什么区别呢？
常规网站和登陆页面之间的主要区别在于网站或“主页”往往包含各种信息。用户旅程可以是从在联系页面上填写表格到购买产品的任何内容。同时，登陆页面通常专注于完成特定操作，例如让访问者下载电子书或注册活动。总体而言，着陆页具有单一用途，并且设计更精简——选项卡或 CTA 更少。
着陆页解剖
现在，让我们看看构成登陆页面的核心元素。如果您想成功设置目标网页，这些都是您需要正确设置的元素。
英雄。将导航与页面其他内容分开的横幅。这是访客首先看到的东西，使其成为吸引他们注意力并引导他们走向正确方向的最佳场所。
价值主张。一份声明，介绍您提供的产品以及您与竞争对手的区别。您可以使用英雄横幅来参考您的价值主张。
号召性用语 (CTA)。激励受众采取行动的短消息 - 无论是点击您的广告、下载您的电子书还是将商品添加到购物车。您可以以链接和按钮的形式将 CTA 添加到您的设计中。
社会证明。这有助于访问者信任您的服务，即使他们从未见过您或听说过您。您通常会将此视为包含当前客户的评论或推荐的部分。
sketch" style="box-sizing: border-box; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.75rem; line-height: 2.125rem; font-family: "Marfa Mono", "SF Mono", "Source Code Pro", Consolas, Menlo, monospace; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; margin: 3.75rem 0px 1.25rem; padding: 0px; vertical-align: initial; letter-spacing: -1px; text-wrap: wrap;">如何在 Sketch 中设计登陆页面
是时候开始设计了——不用担心，我们会一步一步地进行。在本教程中，我们将为银行应用程序创建一个登录页面，但您可以按照相同的步骤使用您自己的徽标和品牌标识为任何主题创建设计。
有一些设计要炫耀吗？我们目前正在运行 #SketchDesignChallenge，这一切都是关于登陆页面的！前往我们的Twitter，就有机会赢得 Macbook Air 和一些 Sketch 赠品。
添加画板模板并设置布局网格
像往常一样，这一切都从画板开始。按A触发画板工具，然后从检查器的下拉菜单中选择Web > Medium。当我们添加部分时，请注意扩大画板的高度，但目前它可以正常工作！
接下来，让我们添加一个列网格布局来帮助我们分解副本和视觉效果。要定义它，请使用快捷方式⌃⌘L或前往“视图” > “画布” > “布局设置”。
打开“布局设置”模式后，您需要输入以下值：
总宽度：1200px
偏移：120 像素
列数：12
装订线宽度：24px
列宽：78px
按“确认”，您最终应该得到如下结果：
此设置非常适合创建响应式网页设计 - 这就是我们用于Sketch 主页的设置！
创建导航栏
按住R并单击并拖动以创建 1440x80 像素的矩形。您始终可以使用检查器中的控件调整这些值。对于我们的设计，我们将为导航栏提供白色背景（#FFFFFF）。然后，添加具有以下值的阴影，使导航栏从着陆页的其余部分中脱颖而出：
颜色：#000000
阿尔法：5
X：0
是：10
模糊：20
从这里，您可以根据需要插入徽标、按钮和菜单项。对于我们的示例，我们从品牌库中添加了一些符号，包括徽标和注册按钮。
设计英雄部分
正如我们提到的，英雄横幅是添加价值主张和号召性用语的完美场所。对于本部分，我们创建一个 1440x660 像素的矩形并将其放置在导航栏下方。
基础准备就绪后，按T为标题（83 像素，半粗体）和副标题（20 像素，常规）添加一些文本图层。
当然，我们最喜欢的部分是，让我们来聊聊设计。使用背景和视觉元素来帮助提升您的信息。在此示例中，我们添加了微妙的渐变背景来引导人们的注意力到横幅上，并与一些信用卡插图相结合，以帮助立即传达这是一个与银行相关的应用程序。
纳入CTA
使用 CTA 时的最佳实践是将其控制在五个字以内，因此是时候戴上用户体验复制思维帽子了。在我们的示例中，我们选择了“免费开始”——这是我们在各种 Sketch 接触点中常用的短语。
要制作您自己的 CTA 按钮，请创建一个 195x52 像素的矩形，并将角样式设置为圆角，半径设置为 15。要使其弹出（就像我们对导航栏所做的那样），您可以添加具有以下值的阴影：
颜色：#000000
阿尔法：10
X：0
是：20
模糊：40
一旦您对按钮感到满意，请添加文本图层（15px，半粗体） - 尽管您可能需要根据您使用的字体进行调整。
添加一些事实
赢得登陆页面访问者信任的一个好方法是提供一些有关您的公司或产品的事实。在此示例中，我们将通过在专门部分中突出显示一些关键指标来实现这一点。
我们首先创建一个 1440x240 像素的矩形，删除边框，然后将其放置在英雄部分的正下方。在我们的示例中，我们为矩形赋予浅灰色（#F3F4F5）。
要构建指标，请为图形（80 像素，半粗体）和描述（15 像素，常规）创建两个文本图层。获得它们后，输入一些副本并将图层并排放置。然后，按住选择它们⇧并使用将它们分组⌘G或使用将它们变成符号⌘Y。
现在，您需要使用该组或符号复制三次⌘D，并将副本沿矩形展开。为了确保您的指标均匀分布，请选择所有指标并单击检查器中的“整齐”按钮。您还可以使用画布上的智能分布手柄来调整距离。
创建社会证明之家
因此，我们已经告诉着陆页访问者我们的产品或服务有效的原因。但他们不必相信我们的话！让我们设计一个社会证明部分来支持我们刚刚在快速事实部分中提出的主张。在这里，我们将添加一些推荐并包括头像图像。
创建一个 1440x370 像素的矩形，删除边框，并将其放置在快速事实部分的正下方。我们为此选择了白色（#FFFFFF）背景色。接下来，添加一个文本层，为该部分指定一个标题（35px，半粗体）——例如“我们的客户怎么说”。
让我们使用 110x110 像素的矩形作为头像图像的容器。去掉边框并将角圆化为 18，使其看起来更光滑。然后，单击检查器中的填充颜色以替换填充并选择顶部的第五个选项。在这里，您可以从桌面拖放图像，或者通过单击“数据”图标并选择“草图数据” > “面孔”来自动填充您的头像。
现在，为审阅者姓名创建一个文本图层（17px，粗体），为审阅创建另一个文本图层（17px，斜体）。确保文案简短，以便为您的设计提供足够的喘息空间。准备好后，将图层分组，复制并组织它们，就像我们在上一节中所做的那样。
添加页脚
页脚就像网页设计中汉堡包的底部面包。这是一个为访问者提供额外资源链接的好地方，例如产品信息、隐私政策和社交媒体页面。对于此页脚设计，我们将使用 1440x265 的矩形，并为其提供黑色背景 (#000000)，以帮助将焦点集中在着陆页的其余部分。
一旦你有了你的基地，你就可以开始按照你认为合适的方式填充它。如果您有很多要分享的内容，您可以使用我们一直在使用的相同列方法。如果您这样做，我们建议您添加一些粗体标题来帮助说明每列的内容。对于社交媒体徽标等图标，如果您一直在使用我们推荐的字体大小，那么 24x24 像素是一个不错的尺寸。
