以下內容由Mockplus團隊翻譯整理，僅供學習交流，更多優秀資源詳見官網部落格Mockplus是更快更簡單的原型設計工具。
網站著陸頁是使用者（或潛在使用者）與品牌建立第一次印象的大好機會。因此，著陸頁必須能夠傳達資訊，召喚使用者行動，並反映產品特色。如何設計一個完美的著陸頁？今天，小編將在這裡與大家分享網站著陸頁設計的10大技巧！
總所周知，設計一個完美的網站著陸頁並不容易。如果只是簡簡單單地將公司LOGO和產品圖片貼上在一個模板上，你認為它能帶給使用者預期的體驗或資訊嗎？當然不能！除此之外，導航困難，閱讀困難還是視覺混亂，都可能給客戶留下糟糕的第一印象。因此，設計一個完美的著陸頁需要精心的策劃和必要的設計技巧。
1. 為著陸頁設定一個明確的目標
在建立或優化著陸頁時，首先需要考慮的是該頁面的目標：你希望使用者在到達固定區域時做什麼？
- l 點選某個連結
- l 觀看一個視訊
- l 玩一個遊戲
- l 在表格中填寫資訊
- l 進行購買
- l 分享到社交媒體
- l 閱讀或以其他方式與內容互動
其次，你要確保著陸頁上的內容設計能幫助使用者更容易接近你的頁面目標。例如上圖中BarkBox的這個著陸頁目標就是出售小狗玩具和完成郵件訂閱。上面的著陸頁的主題是情人節促銷，目的是推動使用者進行購買。
2. 為使用者量身設計
網站著陸頁設計必須充分為使用者（潛在使用者）考慮，這一點似乎是不言而喻的，但很多網站都沒有做到。
著陸頁中設計的人物和形象應該與使用者有所聯絡； 文字也應該以這些使用者欣賞的語音和語氣進行交流。要想做好這一點，你需要深入分析你的關鍵受眾群體。例如，從以下幾個方面著手：
- l 他們是女人還是男人？
- l 年輕還是年長？
- l 他們住在某個地區嗎？
建立一種吸引客戶或潛在客戶的著陸頁設計，能夠在一定程度上提高使用者參與度和轉化率。
3. 使用有特色或有趣的圖片
使用個性有趣的照片或者引人入勝的視訊會給使用者留下深刻的第一印象，並且會促使使用者樂意參與其中。
Coulee
Creative採取了一種有趣的設計方法。著陸頁的整體設計不改變，但標題會自動切換，並且每次標題切換時，圖片中人物的面部表情也會相應發生變化。
這是非常令人驚喜的設計創意，它不僅有趣，還能激發使用者的好奇心（這個人接下來還會有些什麼表情？）並繼續瀏覽網站。
4. 使用具有說服力的文字
大多數著陸頁包含不同用途或者說不同層次的文字。每一級文字都需要引人注目，並儘量讓使用者按照你設定的網站目標所需進行操作。
根據不同的用途，大多數著陸頁中的文字分為以下幾類：
- 標題：使用簡單的幾個詞來吸引使用者的注意力。
- 正文：這裡一般是主要資訊，應該簡潔扼要，直截了當。
- 行動號召：通常以按鈕或連結的形式，告訴使用者如何使用網站。流程中的下一步是什麼？他們如何到達那裡？提供清晰、可操作、溝通的資訊。
- 頁尾：標準資訊（如品牌，聯絡資訊和社交媒體連結）可以幫助建立可信度併為使用者提供訪問資源。
5. 導航中提供關鍵詞資訊
經常瀏覽網站的朋友一定知道，著陸頁上的導航元素可以提示網站的整體內容。因此，在導航中包含關鍵詞資訊是提供給使用者資訊和導向的一個重要技巧。
Baublebar在PuppyBowl著陸頁上就做了一個很好的示範。該網站主要銷售女性珠寶，但在展示一些關於寵物的小配飾時，他們使用了導航欄新增“baubles”這樣的關鍵詞來提示使用者。
此外，著陸頁下面的區域主要展示一些女性珠寶。導航欄的關鍵詞也會提醒來到寵物產品網站的使用者，這個網站的主要業務遠不止於此。
6. 提供清晰明瞭的CTA
每個使用者在第一次開啟網站到達著陸頁時，他們並不清楚自己應該做些什麼。因此，清晰的行動呼籲至關重要。
良好的行動呼籲形式多種多樣，它可以是按鈕，表格填寫，使用者指令（如滾動獲得更多資訊），甚至是動畫等。
喬納森帕特森的著陸頁使用動畫來建立CTA – 當游標懸停在明亮的彩色塊上，色塊變為黑色提示使用者可以點選獲取更多資訊。
7. 儘量自定義內容
相比之下，關於大自然（如建築）的網站著陸頁比較具體和特殊。通常，它們更專注於同一個目的或目標。所以，自定義著陸頁內容可以有效地幫助實現目標。
Trulia網站習慣於在主頁或登入頁面上使用地理定位工具引導使用者分析位置資訊，以便每位使用者從一開始就獲取特定於其位置的房源資訊。
這種簡單的使用者體驗使使用者感到自定義的便捷，他們將更有可能參與網站中相關的內容。
8. 包含明確和相關的品牌
著陸頁面的一個常見問題是帶給使用者視覺厭倦，他們通常無法一眼看到關於主品牌的資訊或其他線索。
一個正確的著陸頁應包含明確且相關的品牌，以便使用者確切地知道他們正在參與的內容。
Nike在其網站上的鞋子定製頁面上就做得非常好 它包含與其他頁面相同的標題和徽標，但主要內容不同—— 鞋子上的時髦設計讓使用者立馬知道這是Nike的定製頁面。然而，定製頁面所展示的不是商品圖片，而是一個使用者可以建立的自定義的可移動影像。
在這樣的頁面上，使用者永遠不會懷疑他們是否仍在與耐克品牌進行互動，因為它擁有與Nike官網一樣的官微和標題。
9. 考慮使用者預期
當使用者點通過外鏈到達網站著陸頁時，他們對將在該網站會發現些什麼充滿期待。此時，著陸頁的設計應考慮特定內容以符合使用者的預期效果。
Bills.com的登陸頁面採用簡單的形式，可幫助使用者瞭解如何管理債務。目標網頁上沒有其他雜亂的內容，使用者在完成上述預篩選流程之前，甚至不會看到任何其他資訊。
這種設計強烈依賴連結的來源 – 從社交媒體甚至印刷的資訊等地方，告訴使用者接下來會發生什麼。
10. 建立層次結構和流程
一個良好的登入頁面的可用性往往顯而易見。使用者應該在哪裡檢視什麼？他們應該在頁面上做什麼？它都擁有清晰的層次結構和流程。
使用常見的使用者模式和行為進行設計對於建立此流程有很大的幫助。 新增圖片，品牌和排版的層次也可以幫助建立清晰的層次結構，使用者會立馬知道如何與頁面進行互動。
上面例子裡的LS Productions在視覺上有一個清晰的行動過程 – 從超大滾動視訊，到頂部角落的網站Logo，中間的標題，以及滑動獲取更多資訊的 CTA。 如此清晰的層次節後，使用者在分分鐘就獲取了所有資訊。
結論
需要注意的一個關鍵點是，當你在考慮如何設計著陸頁時，千萬不要把它當做主頁。兩者還是有所區別的，著陸頁是網站訪問者最常見的地方，但它不是主頁。
有人可能想問，如果掌握了這10大技巧是不是就可設計出頂級的著陸頁了? 我能肯定地回答你，你可以設計出一個出色的著陸頁。一個頂級的著陸頁往往需要一定的營銷工作以及流量形成的；但網站的其他網頁也可能因內容，外鏈和搜尋排名而更受歡迎。瞭解這些流量的來源以及使用者需求是確定著陸頁目標，設計出成功的著陸頁的關鍵因素！
原文作者：CARRIE COUSINS
原文連結：designshack.net/articles/la…
學習工具，但不受限於某種工具。Mockplus做原型，更快更簡單，現在下載Mockplus，免費體驗暢快的原型設計之旅。