idea 啟動界面導(dǎo)入項目

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年前開始了我的職業(yè)生涯，從事視頻游戲的在線營銷和廣告。 從那時起，我從事該行業(yè)的方方面面：代理，開發(fā)和出版。

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.

營銷行業(yè)的技術(shù)每年都在增長。 這意味著雄心勃勃的營銷人員需要開始學(xué)習(xí)如何編碼(如果還沒有的話)。

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之旅。 從那時起，我就結(jié)合了營銷和編碼技能，在倫敦建立了業(yè)務(wù)。

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

在本文中，我將向您展示如何構(gòu)建中央在線營銷資產(chǎn)-項目的登錄頁面。

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

著陸頁試圖說服用戶進(jìn)行轉(zhuǎn)換 。 轉(zhuǎn)換意味著他們會做您想說服他們做的所有事情：

• sign up for your mailing list
  注冊您的郵件列表
• create an account
  創(chuàng)建一個帳戶
• pre-purchase your product (like with Kickstarter)
  預(yù)購買您的產(chǎn)品(例如使用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).

過去，人們將以隱身模式開發(fā)產(chǎn)品或服務(wù)。 這需要大量時間，通常需要前期投資。 只有在產(chǎn)品完成后，他們才能評估其目標(biāo)受眾是否會成功( 產(chǎn)品與市場的契合度 )。

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.

現(xiàn)在，通過在開發(fā)產(chǎn)品之前對產(chǎn)品進(jìn)行營銷測試來節(jié)省時間和金錢已變得越來越普遍。 這是Eric Ries的精益創(chuàng)業(yè)方法論的基礎(chǔ)。

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.

通過構(gòu)建產(chǎn)品登錄頁面，您可以及早測試用戶的React。 這使您可以發(fā)現(xiàn)最重要的是：注冊您的產(chǎn)品或服務(wù)的用戶的轉(zhuǎn)化率。 有了這些數(shù)據(jù)，您就可以決定是否要繼續(xù)進(jìn)行風(fēng)險高昂的部分：開發(fā)您的想法的最小可行產(chǎn)品 。

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.

這種方法還可以教會您很多有關(guān)您自己的假設(shè)以及不同營銷方法的有效性的信息。 請注意，這是一個過程，而不是“一次完成，繼續(xù)進(jìn)行”的項目。

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.

我建議您保持開放，好奇的心態(tài)。 在確認(rèn)有效的假設(shè)之后，您將了解所有無效的方法。

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.

如果您不熟悉發(fā)現(xiàn)業(yè)務(wù)創(chuàng)意的概念，則需要熟悉諸如價值主張，目標(biāo)市場和成本/收入流之類的術(shù)語。 如果需要幫助，請參考Alexander Osterwalder的“ 業(yè)務(wù)模型畫布”方法。

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.

在深入探討更詳細(xì)的主題之前，我想強調(diào)用戶研究的重要性。 您想為希望成為未來客戶的人們優(yōu)化頁面。

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.

了解目標(biāo)受眾的一種常見方法是建立角色 。 角色是想象中的代表。 它可以幫助您和您的團隊形象化您的假定客戶。

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.

如果您尚未執(zhí)行此操作，請閱讀有關(guān)一般角色的信息 。 您也可以使用此模板來構(gòu)建角色 。 三個或四個角色應(yīng)該足以了解誰將使用您的產(chǎn)品。

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?

一旦記住了角色，就可以研究他們?nèi)绾卧诨ヂ?lián)網(wǎng)上搜索問題的解決方案。 他們使用什么搜索詞？ 您每月期望通過不同的常規(guī)搜索訪問多少次？

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

探索此問題的一種好方法是使用Google的關(guān)鍵字規(guī)劃師 。

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

然后，您將有一個很好的起點：一張我們未來客戶的照片以及他們?nèi)绾螌ふ夷慕鉀Q方案。

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

現(xiàn)在，讓我們討論目標(biāo)網(wǎng)頁的常見元素以及如何將策略應(yīng)用于目標(biāo)網(wǎng)頁。

共同要素 (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年創(chuàng)建以來，它們并沒有太大變化：

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.

現(xiàn)在看一下我自己的actioncy.io登陸頁面， 該工具仍處于原型開發(fā)階段，是我的營銷計劃工具。 如果您感到好奇，我還將源代碼放在GitHub上 。

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

每個人在點擊您的目標(biāo)網(wǎng)頁時都會想到的主要問題是“這是什么？”

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.”

您可以用幾句話來回答。 例如，這是我介紹產(chǎn)品的方式：“一種更明智的方式來計劃您的廣告系列，跟蹤需求并導(dǎo)出可交付成果?！?

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

關(guān)于這句話應(yīng)該包含的內(nèi)容已有很多論述。 應(yīng)該嚴(yán)肅還是有趣？ 情感還是理性？

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.”

由于我的角色假設(shè)，我選擇了一種理性的商務(wù)語言。 只有在有差異的情況下進(jìn)行測試才能為我提供一個可靠的答案，即它是否有效或過于“固定”。

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.

品牌徽標(biāo)通常嵌入在稱為標(biāo)頭的標(biāo)頭部分中。 它在折痕上方建立了簡介部分，并且通常由照片或視頻背景來支持。 我決定對actioncy.io保持最少的關(guān)注 。 整潔，專注且無雜亂無章是我的Web應(yīng)用程序的基石。 另外，我還嵌入了我的原型的屏幕截圖，以向訪問者展示這是一個Web應(yīng)用程序。

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.

建立此簡介之后，您必須了解產(chǎn)生轉(zhuǎn)化的戰(zhàn)略重要性。 首先，通過顯示號召性用語(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.

每個人對該按鈕應(yīng)該說什么都有自己的看法，(您猜對了)我們必須對其進(jìn)行測試。 例如，在用戶準(zhǔn)備好決定之前將“注冊”放在頁面的上方可能太過大膽。 我在自己的頁面上只選擇了一個號召性用語，但可以使用兩個。

“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.

“原因為何”在提高受眾的參與度方面起著重要作用。 他們可以提高注冊意愿。 您提供的內(nèi)容必須包含用戶搜索的關(guān)鍵字，這一點至關(guān)重要。 始終問自己，如果您自己在搜索后到達(dá)頁面，是否會對您的頁面有所幫助。

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.

我遵循我在大學(xué)接受的標(biāo)準(zhǔn)：告訴人們您要告訴他們的內(nèi)容，告訴他們，然后解釋您告訴他們的內(nèi)容。 不同“ Reason Why”星座的措辭和順序是經(jīng)典的內(nèi)容實驗。 這些始于猜測工作。 您需要先進(jìn)行實驗并確認(rèn)，然后才能確定它們是否有效。

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.

當(dāng)您說服用戶您提出了可行的解決方案時，他們將輸入最后一個元素： 轉(zhuǎn)換渠道 。 該詞組描述了將用戶從您的CTA轉(zhuǎn)到注冊或付款的點擊次數(shù)。

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.

如果您的目標(biāo)是讓用戶注冊您的郵件列表，則此渠道可能由您的電子郵件列表提供商控制。 我以Mail Chimp為例。 您可以創(chuàng)建自己的渠道，也可以使用供應(yīng)商提供的渠道。

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.

在線營銷中存在分歧。 有些人認(rèn)為渠道哲學(xué)是多余的，因為用戶旅程不是線性的。 用戶可以在多種設(shè)備上訪問您的頁面。 許多訪問者可能會通過不同的渠道多次返回。

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.

目前，您應(yīng)該集中精力使渠道盡可能地易于使用，以便最大程度地提高轉(zhuǎn)化率。 失去想要共享數(shù)據(jù)但由于界面緩慢或混亂而失敗的用戶的想法，在每個晚上都會困擾每個在線營銷人員。

搜索引擎優(yōu)化和搜索控制臺 (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.

搜索的主要來源是搜索。 對于大多數(shù)頁面，它是新傳入流量中最大的一部分，只有社交媒體才能與之抗衡。

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.

網(wǎng)絡(luò)上有無數(shù)的資源來幫助您改善搜索外觀和排名。 我建議您閱讀Google自己的指南作為起點，并且它有一個方便的清單 。

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

由于您是在構(gòu)建沒有其他頁面的“平坦”目標(biāo)頁面，因此可以忽略針對嵌套子目錄和內(nèi)部鏈接的建議。

Instead, you can focus on some core principles:

相反，您可以專注于一些核心原則：

為用戶而非Google建立網(wǎng)頁。 (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信息都集中在技術(shù)方面。 遠(yuǎn)離一切與Google機器人有關(guān)的頁面。 不要因為這些“規(guī)則”一直在變化而分心。 它們的存在使機器了解真實用戶如何看待質(zhì)量。

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.

如果首先構(gòu)建針對用戶優(yōu)化的網(wǎng)站，則比為計算機構(gòu)建的網(wǎng)站更安全。 因為機器是否會偏愛您的站點取決于隱藏的算法，這些算法一直在變化。

通過充分利用HTML標(biāo)簽的語義來結(jié)構(gòu)化內(nèi)容 (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>.

您應(yīng)該使用最重要的是什么？ 一句話，然后將其標(biāo)記為<H1>。 您應(yīng)將原因和關(guān)鍵特征標(biāo)記為<H2>，其他較長的標(biāo)題標(biāo)記為<H3>。

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

良好的結(jié)構(gòu)將使您的設(shè)計能夠反映內(nèi)容的重要性，從而使您最重要的信息脫穎而出。

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.

我遵循這樣的理念：人們應(yīng)該盡快掌握您向他們提出的建議的實質(zhì)。 這樣一來，他們更有可能參與并在您的網(wǎng)站上花費更多的時間。 反過來，這是SEO的強烈信號。

頁面速度和響應(yīng)能力 (Page Speed and Responsiveness)

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

沒有什么比等待太長的頁面加載時間更能損害網(wǎng)站的可用性了。

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自己的頁面速度洞察工具中獲得高分，該工具會同時檢查這兩項。

豐富的代碼片段和結(jié)構(gòu)化數(shù)據(jù)策略 (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.

這些不僅有助于搜索優(yōu)化-它們還為用戶和計算機提供了更多上下文。 這樣，您將可以在搜索結(jié)果中更顯眼地看到您，如本庫所示。

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歸類為營銷網(wǎng)絡(luò)應(yīng)用程序。 我還定義了它的描述，以及在社交媒體上共享我的網(wǎng)站的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是開發(fā)人員用來輔助SEO的一種便捷工具。 它可以幫助您更好地了解Google的抓取工具如何訪問您的網(wǎng)頁并為其編制索引。 它顯示是否存在問題，以及是否正確解析了結(jié)構(gòu)化數(shù)據(jù)。

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

接下來，確保您的頁面正常運行。 Search Console提供了許多有用的報告：

• keywords your content is associated with
  您的內(nèi)容與之相關(guān)的關(guān)鍵字
• which search queries are sending us how much traffic
  哪些搜索查詢向我們發(fā)送了多少流量
• who links to your site
  誰鏈接到您的網(wǎng)站

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.

關(guān)鍵字報告有助于確保您在研究目標(biāo)關(guān)鍵字中排名較高。 如果不是這種情況，則可以通過重新措辭和修改信息結(jié)構(gòu)來調(diào)整內(nèi)容。 有關(guān)更多詳細(xì)信息，請訪問Moz的搜索控制臺指南以及Google的網(wǎng)站管理員幫助中心 。

獲取數(shù)據(jù)：分析 (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.

現(xiàn)在您即將進(jìn)入最后階段。 構(gòu)建目標(biāo)網(wǎng)頁并設(shè)計其內(nèi)容和轉(zhuǎn)換機制后，您需要對其進(jìn)行測試。 為此，您需要收集盡可能多的數(shù)據(jù)。 這將使您能夠收集證據(jù)，證明不同的變化如何導(dǎo)致特定的結(jié)果。

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(分析)。 它非常適合啟動預(yù)算，并且功能豐富。 它使您可以將數(shù)據(jù)傳遞給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(分析)中配置目標(biāo)很重要。 您構(gòu)建目標(biāo)網(wǎng)頁以實現(xiàn)轉(zhuǎn)化，然后使用目標(biāo)來幫助您進(jìn)行跟蹤。 將更改應(yīng)用于網(wǎng)站時，您可以立即看到對轉(zhuǎn)化率的影響。 這也可以幫助您了解來自不同渠道的訪問如何以不同的速率轉(zhuǎn)化。

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.

使用自定義網(wǎng)址時，您甚至可以完成更多工作，而Google Analytics(分析)可以幫助您進(jìn)行跟蹤。 通過添加Google Analytics(分析)腳本將使用的參數(shù)，例如，您可以查看由于博客帖子而注冊的用戶數(shù)。

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(分析)允許您將行為和轉(zhuǎn)化歸因于特定來源。 它將幫助您確定最佳的用戶獲取活動以及需要改進(jìn)的地方。 有關(guān)此內(nèi)容的更多信息，請參閱Google網(wǎng)址構(gòu)建指南 。

掌握瞬息萬變的景觀 (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.

在線營銷和軟件開發(fā)都處于不斷變化的狀態(tài)。 如果您希望能夠與其他所有人競爭以引起注意，則需要繼續(xù)學(xué)習(xí)。

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.

同時，您必須避免花費所有時間學(xué)習(xí)。 開始進(jìn)行營銷很重要：學(xué)習(xí)，重復(fù)并變得更好。 這是營銷中的“ ing”。

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

如果您希望獲得有關(guān)營銷工作的任何反饋，請隨時與我聯(lián)系。

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關(guān)于獲得編碼環(huán)幫助的建議與獲得市場營銷幫助時一樣：閱讀，搜索，詢問！

Thank you and happy marketing!

謝謝您，祝您營銷愉快！

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

idea 啟動界面導(dǎo)入項目

總結(jié)

以上是生活随笔為你收集整理的idea 启动界面导入项目_如何为您的项目启动有效的登录页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。