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 啟動界面導入項目

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。