登陆页面设计：构建终极登陆页面

有效的着陆页对产品的成功至关重要

对于大多数设计师和开发人员来说，营销是一个陌生的概念。 我们擅长产品开发和技术挑战，但到了推广产品的时候，我们并不是很精明。

但营销对于产品的成功至关重要，不容忽视。 这是我为开发人员设计并准备推出世界上卓越的键盘 Ultimate Hacking Keyboard 时面临的挑战。

值得庆幸的是，我是一个团队的一员，他们意识到有吸引力的着陆页的重要性，尤其是在我们成败的众筹活动之前的几个月里。 我们一起着手设计一个登陆页面，以激发想象力、吸引订阅者并为我们的产品成功发布做好准备。

这是终极黑客键盘的终极登陆页面的故事。

技术咨询。 前进的实际步骤。

谷歌搜索“着陆页设计”可以找到几十篇优秀的文章，每一篇都包含重要的提示，比如：

• “内容应立即加载。”
• “摄影应该与网站的观众相关。”
• 并且，“包括一个收集潜在客户的表格。”

这些都是有用的点，但是登陆页面的成功还有更多的因素。 该登陆页面设计指南将提供技术建议，但也将提供实用见解，帮助设计人员和开发人员选择正确的第三方服务并集成在幕后工作的技术。

最终，本指南的目标是节省设计师和开发人员的时间和金钱，否则这些时间和金钱可能会浪费在徒劳的试错上。

以高端视频制作和托管为目标

在网络上展示视频比以往任何时候都容易，但使用它的网站相对较少。 从网络的角度来看，这不是技术挑战，而是资源投资——时间和金钱。

Ultimate Hacking Keyboard (UHK) 的登陆页面预告片经历了十二次迭代，每个新版本逐渐完善每一个小细节。 设计过程令人筋疲力尽，但收获颇丰，预告片视频是我们登陆页面的皇冠上的明珠。 它完全将我们的产品与其他产品区分开来。

请记住，高质量的内容创作是昂贵的。 专业的专业人员可以使产品大放异彩，但重要的是要了解您能负担得起的价格； 否则，您的产品可能会在落地之前就沉没了。

如果您或您团队中的其他设计师有技能和设备，您可以尝试创建自己的视频内容，但要保持视频简短明了。 业余爱好者手中过于雄心勃勃的作品很少能顺利进行。

UHK 团队决定使用动态 3D 动画来展示我们登录页面上键盘的基本功能。 如果需要 2D 动画（对于应用程序或 Web 服务），或者如果需要实景摄像机镜头，则该过程将面临不同的挑战。

制作视频后，必须将其托管在网站上。 值得庆幸的是，有很多选择：

YouTube 是无可争议的市场领导者，也是网络视频的代名词。 这是一项功能强大的服务和合理的选择，但其嵌入式播放器并不是最美观的选择。

Vimeo 的嵌入式播放器采用极简设计，非常优雅。 它以托管优质内容和提供卓越的高清而闻名。

Wistia 是营销人员中另一个受欢迎的选择。 它提供了视频热图等高级功能，可显示视频的哪些部分已被观看、跳过和重新观看。

最终，UHK 团队认为 Vimeo 最能满足我们的需求。 这是我们的登陆页面预告片：Ultimate Hacking Keyboard

还值得注意的是，我们深入研究了 Vimeo 的应用程序编程接口 (API)，以帮助我们的视频更好地吸引登陆页面访问者的注意力。 使用 Vimeo 的 JavaScript API，我们使网站上的“我想要一个”按钮在预告片结束后连续三次出现脉冲。 如果使用得当，像这样的小调整可以提高目标网页的转化率。

使用 3D 内容创建身临其境的体验

有时，为着陆页访问者提供身临其境的体验很重要。 我们希望我们的访问者能够以 3D 形式探索 Ultimate Hacking Keyboard，因此我们必须研究专门为此目的创建的基于 WebGL 的服务。

Sketchfab 是最流行的基于 WebGL 的服务。 它易于掌握，提供一系列视觉设置，并可嵌入到各种流行的托管服务中。

P3d.in 是一个简单的 WebGL 服务，专注于易用性，但它对某些高分辨率纹理的支持有限。

经过慎重考虑，我们选择了 Sketchfab。 这就是 Ultimate Hacking Keyboard 在 3D 中的外观。

使用 2D 动画可视化问题和解决方案

Ultimate Hacking Keyboard 的主要优点之一是可以显着减少手部移动。 该团队希望通过显示 UHK 与常规键盘并排工作的动画，在我们的登录页面上可视化这一点。 实现这一点并不像听起来那么简单。

使用嵌入式视频感觉有点矫枉过正，而且还需要额外的渲染工作。 动画 GIF 不是一个选项，因为它们的文件很大并且调色板有限。 最终，我们选择使用内联 SVG 动画，因为它们允许我们的手形图形独立于页面上的其他图形移动。

以这种方式创建我们的着陆页动画比我们预期的要耗时。 为了制作一个简单的动画，我们不得不解决跨浏览器问题、JavaScript 库错误和其他不可预见的技术挑战。 然而，最终的结果看起来相当不错，并且证明是非常值得的额外工作。

对智者的一句话——永远不要低估可能出错的事情的数量！

实时测量分析

谷歌分析很棒。 它被广泛使用且易于使用。 然而，实时操作有更好的候选者。

当网站超过某些阈值时，Chartbeat 在发送通知方面做得很好，尤其是网站上的同时用户数量。 例如，在线论坛中偶尔会链接到 UHK 网站，从而产生突然的流量高峰。 多亏了 Chartbeat，我们马上就知道了，我们能够及早加入正在进行的对话。

Mixpanel 可帮助网络管理员分析网站访问、打开订阅对话和确认订阅等事件。 它还可以从这些事件中构建漏斗并可视化转化率，从而使数字具有可操作性。

Clicky 提供了一个很棒的热图功能，可以显示访问者点击网站的位置。 根据结果​​，可以对站点的布局或内容进行改进，以获得更好的结果。

HotJar 使网站所有者能够通过保存每个鼠标和键盘操作并将其转换为视频来记录访问者的交互。

这些服务中的每一项都有其独特的功能和优势，但它们都提供了网站访问者活动的有价值的即时反馈。 由各个企业来确定哪种类型的信息对营销目的最有价值。

记录错误并防止不必要的头痛

网站越来越依赖 JavaScript，以至于关键的网站功能经常依赖它。 例如，Ultimate Hacking Keyboard 登陆页面上的订阅对话框是由 JavaScript 代码触发的。

在实现订阅功能时，我们在主要浏览器上对其进行了测试，并且确信我们已经完成了我们需要做的一切。 然而，后来我们收到了一封来自访问者的电子邮件，抱怨登录页面订阅功能不起作用。

事实证明，有问题的访问者在最严格的模式下使用 Adblock Plus，这阻止了 Clicky 分析脚本。 与其他分析服务不同，Clicky 的嵌入代码在这方面没有弹性，因此在记录订阅操作并引用 Clicky 对象时，代码会产生错误。

这件事发生后，我们仔细思考了以后如何避免类似的情况。 团队想到我们应该使用全局 window.onerror 事件处理程序来捕获和记录此类错误。 然后我们搜索了合适的日志服务，最终选择了 Errorception。

Errorception 很神奇，因为它只做了一项工作并且做得非常好——发现 JavaScript 错误。 它的用户界面简约而实用，支持很好，它允许站点管理员查看单个错误并调查堆栈跟踪。 最重要的是，它为您提供了真正的实惠。

自从集成 Errorception 以来，我们已经解决了大约十几个错误，其中一些是不太可能和意外的。 例如，我们曾经收到一个localStorage相关的错误，发现当 Safari 处于隐私浏览模式时， localStorage.setItem()会导致错误。

不可能对每一个异常错误情况都进行解释，因此日志记录是在缺陷成为主要问题之前捕获缺陷的好方法。

设计一个低维护的构建过程

最初，UHK 索引页面最初是托管在 WordPress 中的单个 HTML 页面，它包含所有 CSS、HTML 和 JavaScript 代码。 起初，这是一个可行的解决方案，但随着页面的增长，它成为了维护负担，需要一种更加模块化的方法。

我们的解决方案？ 首先，我们将 CSS、HTML 和 JavaScript 代码拆分为多个单独的文件。 然后，我们将 CSS 文件转换为 Less 文件，以便于维护。 最后，我们设计了一个构建过程来组装我们所有的小文件。

始终优化性能

UHK 团队从经验中知道网站性能至关重要——就像我们的登陆页面被 Slashdotted 时一样，我们同时接待了 260 名访问者。 值得庆幸的是，我们每月 20 美元的 Linode VPS 表现得像个冠军，但这需要的不仅仅是盲目的运气，所以这里有一些性能提升技巧：

• 图片延迟加载是您的朋友，特别是如果您的页面（如我们的页面）包含大量图片。 我们正在使用 WordPress Unveil Lazy Load 插件。

• 您也可以延迟加载资产。 如果页面的一部分依赖于附加脚本，则可以在它进入视口时延迟加载它。 使用 jQuery inview 插件检查视口可见性，并使用 jQuery.getScript() 或任何其他脚本加载器加载脚本。

登陆页面设计是一门重要的设计学科

我们在这篇文章中涉及了很多着陆页设计问题，所以让我们总结一下最重要的几点：

• 超越基于文本的内容，包括视频、3D 模型和 2D 动画等富媒体。 这种类型的内容使登录页面更具吸引力，并鼓励访问者与他人分享。
• 使用实时分析，以便您可以对突然的流量高峰做出快速反应并加入正在进行的对话。
• 始终记录错误。 有很多事情可能（并且将会）出错，因此跟踪很重要。
• 优化性能，使您的网站即使在最高流量负载下也能跟上。

与每个设计学科一样，着陆页设计需要不断致力于学习新工具、技术和流程。 技术和品味不可避免地会发展——今天的前沿就是明天的遗迹。

值得庆幸的是，清晰地传达并吸引观众的登陆页面设计并不完全依赖于技术。 经验丰富的设计师知道如何整合最新的工具，但他们的设计过程主要是通过提出正确的问题和巧妙地解决可能导致项目脱轨的问题来驱动的。

最终，一个有吸引力的目标网页必须是任何新品牌或产品营销计划的重要组成部分。 在我们这个网络驱动的世界里，一个设计良好的登陆页面能够吸引追随者、引起轰动和增加销售额——所有这些对于一家新兴公司的持续繁荣都至关重要。