掌握這三個要素，打造Wonderland一般的Landing Page
最近開始了DailyUI Challenge，已經做完#001 Sign Up Page和#002 Credit Card Checkout Page，現在以龜速進行到#003 Landing Page。我在挑戰開始之前喜歡先蒐集資料、進行統整，再去找相關案例（實際上線的網站或app），最後才是手稿跟實作，完全沒辦法以Daily的速率去挑戰⋯⋯。
這次也是找了不少有關Landing Page的資源來看，它應該具備哪些元素？設計上有哪些眉角？若是跟我一樣毫無頭緒的人，這篇文章或許可以給你一點方向，那就讓我們開始吧！
什麼是 Landing Page
中文有人翻譯成「著陸頁」或「到達頁」，它是一個單頁的網頁，主要目的是為了讓瀏覽網頁的使用者採取特定的「行動」（註冊帳號、下載手冊或電子書、購買商品或服務⋯⋯），簡單來說，就是透過Landing Page將使用者「轉換」為忠實用戶或顧客。
這個網站蒐集了不少優秀的Landing Page設計案例
這篇文章解析了目前的Langing Page設計趨勢
什麼是 above the fold
「fold」的原意是指報紙摺疊後可視的部分，人們會依據這個區域的內容決定要不要購買。而在UI/UX設計裡的「fold」就是在不滾動螢幕的情況下，可以被使用者看到的畫面。
NNGroup曾經做過一個研究，結果指出使用者會花費約80%的時間停留在「above the fold」區域，而停留在「below the fold」區域的時間僅有20%。所以「above the fold」的空間非常珍貴，必須明確指出網站的核心價值、提供的商品或服務，吸引使用者繼續瀏覽網站。
延伸閱讀：
What’s “Above the Fold” in the Best User Interface Web Designs
Fold or Scroll: Above and Beyond the Web Design MythLanding Page 的三大要素
若能確實掌握這三個要素，也能把Landing Page打造為Wonderland！
文案：具有吸引力和說服力、簡單卻又精確
文案就是具有影響力的文字，可以利用簡單精確的語言吸引使用者，讓使用者在不自覺的情況下被說服，採取特定行動。（雖然我不懂得怎麼寫出好文案，可是很會被好文案給魅惑啊啊啊⋯⋯清醒的時候錢包已經空一半了）
Landing Page裡最重要的兩行字：
- 主標：第一眼抓住使用者的文字
- 副標：進一步詮釋內容
在下筆以前，可以先思考下列四個問題：
- 你的主要目標客群是誰
- 他們習慣用什麼樣的語言和文字
- 你能提供什麼樣的價值或利益
- 為什麼你的主要目標客群要為你所提供的服務或商品買單
下列網站有不少寫作文案的要領和案例
首圖（Hero Image）：轉換成敗就在它
網頁首圖是使用者對網站的第一印象，利用視覺去加強文案所要傳達的訊息，轉換率的好壞就看它了！網頁首圖不限定於圖片的形式，也可以運用一段影片做呈現，或者是插圖、手繪元素。一個共通的設計大方向是：移除不必要的元素、減少色系使用、精準傳遞資訊。
下列文章提供幾個在挑選網頁首圖時的要點
- 跟產品和服務具有直接的相關性（一眼就讓使用者明白你提供的內容）
- 情感連結、氣氛營造（給予使用者正向的感受）
- 高像素品質圖片
- CTA才是主體，不要喧賓奪主（可以運用圖片視線方向導引到CTA上）
- 和標題文字有對比度，使文字有高度可讀性（這裡有幾個CSS實例）
- 考量在不同螢幕尺寸下的圖片呈現效果
行為召喚（CTA）：強而有力、顯而易見
希望使用者去採取特定行動的行為就叫做CTA（Call To Action）。CTA會經過位置、尺寸、顏色等設計，引導使用者實際採取行動，注意這裡說的是「引導」而非「要求」或「呼籲」，因為CTA的最終目標是要讓使用者「自己想要採取行動」。成功的CTA可以突出廣告的效果，且引發潛在的客群。
這篇文章非常清楚地解釋CTA的定義
這篇文章介紹了CTA的手法和案例
延伸閱讀：
提高轉換率！Call to Action 按鈕的最佳實踐與技巧
如何提高Call to Actions (CTA) 的效能?案例分析
在瀏覽數十個網站以後，根據三個要素綜合評比，我選擇了三個我最喜歡的Landing Page設計：）
Survey Cake
- 主標：直接破題主打服務為何
- 副標：帶入品牌名稱，進一步說明服務內容
- CTA：利用「免費」的字眼吸引使用者，和背景有高度對比性
- 首圖：雙手擺放的位置和方向讓使用者的視線可以聚焦在重要內容上
- 「無限流量＋終身免費，酷吧」用輕鬆的語氣傳遞品牌價值訊息
- 下方有大企業的使用見證，是很好的社會認同（social proof）元素
Apple Music
- 主標：直接來一個品牌名稱
- 副標：三個字的強大文案⋯⋯「樂」具有樂趣、快樂、音樂等多重含義
- CTA：利用「免額外付費」和「試用三個月」吸引使用者
- 首圖：手機朝向的方向將視線自然帶往重要內容，背景使用景深增加對比
Typeform
- 主標：好喜歡這個文案！告別舊形式的表單，跟Typeform說嗨囉～
- CTA：利用「free」吸引使用者開始利用Typeform製作表單
- 首圖：將重要內容放置在中央，不同螢幕尺寸也說明表單運用RWD設計
- 首圖運用gif圖片動態展示填寫表單時的實際狀況，有更佳的視覺效果
- 手機版的CTA和電腦版不同，移至導覽列上方
關於本篇文章有任何想法或建議都歡迎跟我分享噢！
參考文章：
打造最強Landing Page，讀這一篇就夠了！
