登陸頁面設計：構建終極登陸頁面

有效的著陸頁對產品的成功至關重要

對於大多數設計師和開發人員來說，營銷是一個陌生的概念。 我們擅長產品開發和技術挑戰，但到了推廣產品的時候，我們並不是很精明。

但營銷對於產品的成功至關重要，不容忽視。 這是我為開發人員設計並準備推出世界上卓越的鍵盤 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 動畫等富媒體。 這種類型的內容使登錄頁面更具吸引力，並鼓勵訪問者與他人分享。
• 使用實時分析，以便您可以對突然的流量高峰做出快速反應並加入正在進行的對話。
• 始終記錄錯誤。 有很多事情可能（並且將會）出錯，因此跟踪很重要。
• 優化性能，使您的網站即使在最高流量負載下也能跟上。

與每個設計學科一樣，著陸頁設計需要不斷致力於學習新工具、技術和流程。 技術和品味不可避免地會發展——今天的前沿就是明天的遺跡。

值得慶幸的是，清晰地傳達並吸引觀眾的登陸頁面設計並不完全依賴於技術。 經驗豐富的設計師知道如何整合最新的工具，但他們的設計過程主要是通過提出正確的問題和巧妙地解決可能導致項目脫軌的問題來驅動的。

最終，一個有吸引力的目標網頁必須是任何新品牌或產品營銷計劃的重要組成部分。 在我們這個網絡驅動的世界裡，一個設計良好的登陸頁面能夠吸引追隨者、引起轟動和增加銷售額——所有這些對於一家新興公司的持續繁榮都至關重要。