idea 启动界面导入项目_如何为您的项目启动有效的登录页面

idea 启动界面导入项目

by Christian-Peter Heimbach

通过克里斯蒂安·彼得·海姆巴赫

如何为您的项目启动有效的登录页面 (How to launch an effective landing page for your project)

I began my career 10 years ago doing online marketing and advertising for video games. Since then, I’ve worked on all sides of the industry: agency, development, and publishing.

我10年前开始了我的职业生涯，从事视频游戏的在线营销和广告。 从那时起，我从事该行业的方方面面：代理，开发和出版。

The marketing industry grows more technical every year. This means that ambitious marketers need to start learning how to code — if they haven’t already.

营销行业的技术每年都在增长。 这意味着雄心勃勃的营销人员需要开始学习如何编码(如果还没有的话)。

In November 2015, I began my journey with Free Code Camp. Since then, I’ve blended my marketing and coding skills to create a business here in London.

2015年11月，我开始了Free Code Camp之旅。 从那时起，我就结合了营销和编码技能，在伦敦建立了业务。

In this article, I’ll show you how to build a central online marketing asset — a landing page for your project.

在本文中，我将向您展示如何构建中央在线营销资产-项目的登录页面。

Landing pages try to convince users to convert. Converting means they do whatever it is you’re trying to convince them to do:

着陆页试图说服用户进行转换 。 转换意味着他们会做您想说服他们做的所有事情：

• sign up for your mailing list
  注册您的邮件列表
• create an account
  创建一个帐户
• pre-purchase your product (like with Kickstarter)
  预购买您的产品(例如使用Kickstarter)

先行销再行销 (Marketing first, then building)

Back in the day, people would develop a product or service in stealth mode. This required a huge amount of time, and usually up-front investment. Only after the product was finished could they evaluate whether it would succeed with its target audience (product-market fit).

过去，人们将以隐身模式开发产品或服务。 这需要大量时间，通常需要前期投资。 只有在产品完成后，他们才能评估其目标受众是否会成功( 产品与市场的契合度 )。

Now it’s become much more common to save time and money by testing your product by marketing it before you develop it. This is the basis of Eric Ries’ Lean Startup methodology.

现在，通过在开发产品之前对产品进行营销测试来节省时间和金钱已变得越来越普遍。 这是Eric Ries的精益创业方法论的基础。

By building a product landing page, you can test user reactions early. This allows you to discover what’s most important: the conversion rates of users signing up for your product or service. With this data in hand, you can decide whether you want to proceed with the risky and costly part: developing your idea’s minimal viable product.

通过构建产品登录页面，您可以及早测试用户的React。 这使您可以发现最重要的是：注册您的产品或服务的用户的转化率。 有了这些数据，您就可以决定是否要继续进行风险高昂的部分：开发您的想法的最小可行产品 。

This method can also teach you a lot about your own assumptions, and the effectiveness of different marketing approaches. Note that this is a process rather than a “once done, move on” project.

这种方法还可以教会您很多有关您自己的假设以及不同营销方法的有效性的信息。 请注意，这是一个过程，而不是“一次完成，继续进行”的项目。

I recommend you keep an open, curious mindset. You’re going to learn about all the approaches that don’t work as much as you confirm assumptions that do work.

我建议您保持开放，好奇的心态。 在确认有效的假设之后，您将了解所有无效的方法。

If you’re new to the concept of discovering business ideas, you’ll want to familiarize yourself with terms like value proposition, target market, and cost/revenue streams. If you need help, refer to the Business Model Canvas approach by Alexander Osterwalder.

如果您不熟悉发现业务创意的概念，则需要熟悉诸如价值主张，目标市场和成本/收入流之类的术语。 如果需要帮助，请参考Alexander Osterwalder的“ 业务模型画布”方法。

Before you delve into more detailed topics, I want to stress the importance of user research. You want to optimize your pages for people you hope will become future customers.

在深入探讨更详细的主题之前，我想强调用户研究的重要性。 您想为希望成为未来客户的人们优化页面。

This means that you need to begin with a picture of what kind of user visits your page:

这意味着您需要从一张什么样的用户访问您的页面的图片开始：

• Who are they?
  他们是谁？
• What are their needs?
  他们有什么需求？
• What is making their life difficult?
  是什么使他们的生活困难？
• How can you make sure they understand that your proposed solution can help them?
  您如何确保他们了解您提出的解决方案可以帮助他们？

One common way to understand your target audience is to build personas. A persona is an imagined representative. It helps you and your team visualize your assumed customer.

了解目标受众的一种常见方法是建立角色 。 角色是想象中的代表。 它可以帮助您和您的团队形象化您的假定客户。

If you haven’t done this yet, have a read about personas in general. You can also use this template to build personas. Three or four of personas should be enough to have an idea of who will be using your product.

如果您尚未执行此操作，请阅读有关一般角色的信息 。 您也可以使用此模板来构建角色 。 三个或四个角色应该足以了解谁将使用您的产品。

Once you have personas in mind, you research how they might search the internet for solutions to their problems. What search terms do they use? How many visits could you expect from different common searches each month?

一旦记住了角色，就可以研究他们如何在互联网上搜索问题的解决方案。 他们使用什么搜索词？ 您每月期望通过不同的常规搜索访问多少次？

One good way to explore this is to use Google’s Keyword Planner.

探索此问题的一种好方法是使用Google的关键字规划师 。

Then you’ll have a strong starting point: a picture of our future customer and how they might search for your solution.

然后，您将有一个很好的起点：一张我们未来客户的照片以及他们如何寻找您的解决方案。

Now let’s talk about the common elements of landing pages and how you can apply your strategy to them.

现在，让我们讨论目标网页的常见元素以及如何将策略应用于目标网页。

共同要素 (Common Elements)

Here are the basic components of a successful landing page, which haven’t changed much since this chart was created in 2012:

以下是成功登录页面的基本组件，自此图表于2012年创建以来，它们并没有太大变化：

Now take a look at my own landing page for actioncy.io, my marketing planning tool that’s still in the prototyping stage. I also put the source code up on GitHub if you’re curious.

现在看一下我自己的actioncy.io登陆页面， 该工具仍处于原型开发阶段，是我的营销计划工具。 如果您感到好奇，我还将源代码放在GitHub上 。

The main question on everyone’s mind when they hit your landing page is “what is this?”

每个人在点击您的目标网页时都会想到的主要问题是“这是什么？”

You can answer this in a few short sentences. For example, here’s how I introduce my product: “A smarter way to plan your campaigns, track the requirements, and export your deliverables.”

您可以用几句话来回答。 例如，这是我介绍产品的方式：“一种更明智的方式来计划您的广告系列，跟踪需求并导出可交付成果。”

Much has been written about what this sentence should contain. Should it should be serious or funny? Emotional or rational?

关于这句话应该包含的内容已有很多论述。 应该严肃还是有趣？ 情感还是理性？

I’ve chosen a rational, business language because of my persona assumptions. Only testing with variances will give me a solid answer about whether it works or is too “buttoned up.”

由于我的角色假设，我选择了一种理性的商务语言。 只有在有差异的情况下进行测试才能为我提供一个可靠的答案，即它是否有效或过于“固定”。

The brand logo is usually embedded into a header section called masthead. It builds an intro part above the fold and is often supported by a photo or video background. I decided to stay minimal for actioncy.io. It’s a cornerstone of my web app to be clean, focused and clutter-free. Also I’ve embedded a screenshot of my prototype to show visitors that this is a web application.

品牌徽标通常嵌入在称为标头的标头部分中。 它在折痕上方建立了简介部分，并且通常由照片或视频背景来支持。 我决定对actioncy.io保持最少的关注 。 整洁，专注且无杂乱无章是我的Web应用程序的基石。 另外，我还嵌入了我的原型的屏幕截图，以向访问者展示这是一个Web应用程序。

After you build this introduction, you have to understand the strategic importance of generating a conversion. First, do this by displaying a call to action (CTA). Some common CTAs are “Sign Up”, “Subscribe”, “Buy Now”, and “Get Invite”. These try to entice users to take action.

建立此简介之后，您必须了解产生转化的战略重要性。 首先，通过显示号召性用语(CTA)来做到这一点。 一些常见的CTA是“注册”，“订阅”，“立即购买”和“获取邀请”。 这些试图诱使用户采取行动。

Everyone has their own opinion on what this button should say, and (you guessed it) we have to test it. For example, placing “Sign Up” quite high up on the page before users are ready to decide could be too bold. I opted for only one CTA on my own page, but it’s possible to use two.

每个人对该按钮应该说什么都有自己的看法，(您猜对了)我们必须对其进行测试。 例如，在用户准备好决定之前将“注册”放在页面的上方可能太过大胆。 我在自己的页面上只选择了一个号召性用语，但可以使用两个。

“Reason Why’s” play an important role in developing the engagement of your audience. They can improve their will to sign up. It’s vital that the content you provide covers the keywords your user searched for. Always ask yourself whether you would find your page helpful if you yourself had arrived at it after a search.

“原因为何”在提高受众的参与度方面起着重要作用。 他们可以提高注册意愿。 您提供的内容必须包含用户搜索的关键字，这一点至关重要。 始终问自己，如果您自己在搜索后到达页面，是否会对您的页面有所帮助。

For me “Reason Whys” are so important that I cover them twice on my landing page. First, factually and only described in short. And then a second time, with a larger image and more story.

对我来说，“原因为何”是如此重要，以至于我在登录页面上将其覆盖了两次。 首先，事实上，仅作简短描述。 然后第二次以更大的形象和更多的故事。

I follow a standard I picked up at university: tell people what you are going to tell them, tell them, and then explain what you told them. The wording and the order of different “Reason Why” constellations are classic content experiments. These start out as guess work . You’ll need to experiment and confirm before you can be sure they work.

我遵循我在大学接受的标准：告诉人们您要告诉他们的内容，告诉他们，然后解释您告诉他们的内容。 不同“ Reason Why”星座的措辞和顺序是经典的内容实验。 这些始于猜测工作。 您需要先进行实验并确认，然后才能确定它们是否有效。

When you’ve convinced your users that you’re proposing a viable solution, they enter the last element: the conversion funnel. This phrase describes the clicks that take the user from your CTA through to registration or payment.

当您说服用户您提出了可行的解决方案时，他们将输入最后一个元素： 转换渠道 。 该词组描述了将用户从您的CTA转到注册或付款的点击次数。

If your goal is to get users to sign up for your mailing list, this funnel may be controlled by your email list provider. I used Mail Chimp in my case. You could either create your own funnel or you use one provided supplied by your vendor.

如果您的目标是让用户注册您的邮件列表，则此渠道可能由您的电子邮件列表提供商控制。 我以Mail Chimp为例。 您可以创建自己的渠道，也可以使用供应商提供的渠道。

Keep in mind that these embedded scripts can make your page load slower. Using an API might be better than using an embedded element.

请记住，这些嵌入式脚本可能会使您的页面加载速度变慢。 使用API​​可能比使用嵌入式元素更好。

There are split opinions in online marketing. Some believe the funnel philosophy to be redundant, because user journeys are not linear. Users may visit your page on a multitude of devices. Many visitors might return several times via different channels.

在线营销中存在分歧。 有些人认为渠道哲学是多余的，因为用户旅程不是线性的。 用户可以在多种设备上访问您的页面。 许多访问者可能会通过不同的渠道多次返回。

For now, you should concentrate on making your funnel as user-friendly as possible so you can maximize conversions. The idea of losing out on users who wanted to share their data, but failed because of a slow or confusing interface is something that haunts every online marketer at night.

目前，您应该集中精力使渠道尽可能地易于使用，以便最大程度地提高转化率。 失去想要共享数据但由于界面缓慢或混乱而失败的用户的想法，在每个晚上都会困扰每个在线营销人员。

搜索引擎优化和搜索控制台 (Search Engine Optimization and the Search Console)

A key source for traffic is search. For most pages, it’s the biggest chunk of new incoming traffic, rivaled only by social media.

搜索的主要来源是搜索。 对于大多数页面，它是新传入流量中最大的一部分，只有社交媒体才能与之抗衡。

The web has endless resources on how you can improve your search appearance and ranking. I recommend to read Google’s own guide as a starting point, and it has a handy checklist.

网络上有无数的资源来帮助您改善搜索外观和排名。 我建议您阅读Google自己的指南作为起点，并且它有一个方便的清单 。

Since you’re building a “flat” landing page without additional pages, you can ignore the advice focused on nesting subdirectories and internal links.

由于您是在构建没有其他页面的“平坦”目标页面，因此可以忽略针对嵌套子目录和内部链接的建议。

Instead, you can focus on some core principles:

相反，您可以专注于一些核心原则：

为用户而非Google建立网页。 (Build pages for users, not for Google.)

A lot of SEO information out there focuses on technical aspects. Stay away from pages where everything is about Google’s robots. Don’t get distracted because these “rules” change all the time. They exist to make a machine understand how real users perceive quality.

许多SEO信息都集中在技术方面。 远离一切与Google机器人有关的页面。 不要因为这些“规则”一直在变化而分心。 它们的存在使机器了解真实用户如何看待质量。

If you built your site optimized for users in the first place, you’re safer than if you’d built for machines. Because whether machines will favor your site depends on hidden algorithms that change all the time.

如果首先构建针对用户优化的网站，则比为计算机构建的网站更安全。 因为机器是否会偏爱您的站点取决于隐藏的算法，这些算法一直在变化。

通过充分利用HTML标签的语义来结构化内容 (Structure content by making good use of the semantics of HTML tags)

You should use the most important what is this? sentence only once, and tag it <H1>. You should tag Reason Why’s and key features as <H2>, and other longer headlines as <H3>.

您应该使用最重要的是什么？ 一句话，然后将其标记为<H1>。 您应将原因和关键特征标记为<H2>，其他较长的标题标记为<H3>。

A good structure will allow your design to reflect the importance of your content, helping your most important message stand out.

良好的结构将使您的设计能够反映内容的重要性，从而使您最重要的信息脱颖而出。

I follow the philosophy that people should grasp the essence of what you propose to them as fast as possible. This makes them much more likely to then engage and spend more time on your site. This in return is a strong signal for SEO.

我遵循这样的理念：人们应该尽快掌握您向他们提出的建议的实质。 这样一来，他们更有可能参与并在您的网站上花费更多的时间。 反过来，这是SEO的强烈信号。

页面速度和响应能力 (Page Speed and Responsiveness)

Nothing hurts the usability of your site more than having to wait too long for a page to load.

没有什么比等待太长的页面加载时间更能损害网站的可用性了。

Or having to pinch around on your mobile phone like it’s 2010.

或是像2010年一样在手机上四处张望。

Try to score high on Google’s own page speed insights tool, which checks both of these.

尝试在Google自己的页面速度洞察工具中获得高分，该工具会同时检查这两项。

丰富的代码片段和结构化数据策略 (Rich Snippets and Structured Data Tactics)

These not only help search optimization — they also give both users and machines more context. This way, you’ll be presented on search results more prominently, as shown in this gallery.

这些不仅有助于搜索优化-它们还为用户和计算机提供了更多上下文。 这样，您将可以在搜索结果中更显眼地看到您，如本库所示。

For example, I used rich snippets to categorize actioncy.io as a web app for marketing. I also defined its description, and which image to show when my site’s URL is shared on social media.

例如，我使用丰富的代码片段将actioncy.io归类为营销网络应用程序。 我还定义了它的描述，以及在社交媒体上共享我的网站的URL时显示的图像。

One handy tool for developers to aid the process of SEO is the Google Search Console. It helps you better understand how Google’s crawlers access and index your page. It shows if there are problems, and whether the structured data are parsed correctly.

Google Search Console是开发人员用来辅助SEO的一种便捷工具。 它可以帮助您更好地了解Google的抓取工具如何访问您的网页并为其编制索引。 它显示是否存在问题，以及是否正确解析了结构化数据。

Next ensure that your page is working. The Search Console provides many helpful reports:

接下来，确保您的页面正常运行。 Search Console提供了许多有用的报告：

• keywords your content is associated with
  您的内容与之相关的关键字
• which search queries are sending us how much traffic
  哪些搜索查询向我们发送了多少流量
• who links to your site
  谁链接到您的网站

The keyword report is helpful for making sure you rank high against the target keywords of your research. If this is not the case, you can adapt the content by rewording and modifying the information structure. For many more details go to the search console guide by Moz, and Google’s webmaster help center.

关键字报告有助于确保您在研究目标关键字中排名较高。 如果不是这种情况，则可以通过重新措辞和修改信息结构来调整内容。 有关更多详细信息，请访问Moz的搜索控制台指南以及Google的网站管理员帮助中心 。

获取数据：分析 (Get the Data: Analytics)

Now you’re approaching the final stage. After building the landing page and designing its content and conversion mechanics, you’ll need to test it. In order to do this, you need to gather as much data as possible. This will allow you to gather evidence of how different changes have led to specific outcomes.

现在您即将进入最后阶段。 构建目标网页并设计其内容和转换机制后，您需要对其进行测试。 为此，您需要收集尽可能多的数据。 这将使您能够收集证据，证明不同的变化如何导致特定的结果。

My tool of choice is Google Analytics, at least to begin with. It fits well into start-up budgets, and is feature-rich. It allows you to pass data to Google’s other marketing tools. To learn how to get started with Google Analytics, have a look at its getting started guide.

我选择的工具至少是一开始就是Google Analytics(分析)。 它非常适合启动预算，并且功能丰富。 它使您可以将数据传递给Google的其他营销工具。 要了解如何开始使用Google Analytics(分析)，请参阅其入门指南 。

It’s important to configure goals in Google Analytics. You build a landing page to achieve conversions, then use goals to help track these. When you apply changes to your site, you can immediately see the effect on conversion rates. This also helps you to understand how visits that come from different channels convert at different rates.

在Google Analytics(分析)中配置目标很重要。 您构建目标网页以实现转化，然后使用目标来帮助您进行跟踪。 将更改应用于网站时，您可以立即看到对转化率的影响。 这也可以帮助您了解来自不同渠道的访问如何以不同的速率转化。

You can accomplish even more when you use custom URLs, which Google Analytics can help you track. By adding a parameter that the Google Analytics script will pick up, you can see how many users signed up as a result of a blog post, for example.

使用自定义网址时，您甚至可以完成更多工作，而Google Analytics(分析)可以帮助您进行跟踪。 通过添加Google Analytics(分析)脚本将使用的参数，例如，您可以查看由于博客帖子而注册的用户数。

Google Analytics allows you to attribute behavior and conversions to a specific source. It will help you to identify the best user acquisition activities and where to improve. For further reading on this, check out the Google guide to URL building.

Google Analytics(分析)允许您将行为和转化归因于特定来源。 它将帮助您确定最佳的用户获取活动以及需要改进的地方。 有关此内容的更多信息，请参阅Google网址构建指南 。

掌握瞬息万变的景观 (Staying on top of an ever-shifting landscape)

Both online marketing and software development are in a state of constant flux. You need to keep learning if you want to be able to compete with all the other people for attention.

在线营销和软件开发都处于不断变化的状态。 如果您希望能够与其他所有人竞争以引起注意，则需要继续学习。

At the same time, you must avoid spending all your time learning. It’s important to start doing marketing: learn, repeat, and get better. This is the “ing” in marketing.

同时，您必须避免花费所有时间学习。 开始进行营销很重要：学习，重复并变得更好。 这是营销中的“ ing”。

If you’d like any feedback on your marketing efforts, feel free to reach out to me anytime.

如果您希望获得有关营销工作的任何反馈，请随时与我联系。

And remember that Free Code Camp’s advice for getting help with coding rings just as true with getting help with marketing: Read, Search, Ask!

请记住，Free Code Camp关于获得编码环帮助的建议与获得市场营销帮助时一样：阅读，搜索，询问！

Thank you and happy marketing!

谢谢您，祝您营销愉快！

翻译自: https://www.freecodecamp.org/news/how-to-launch-an-effective-landing-page-for-your-project-f15bf3433d16/

idea 启动界面导入项目