怎麼說服你的訪問者和網站登錄頁面（Landing page）互動？
搜尋引擎上除了常見的口碑、SEO行銷等等，更常聽到的是網站的 Landing page行銷，但是究竟什麼是 Landing page行銷呢？
什麼是Landing page行銷？對企業的意義是？
在網站中，Landing page 可以看作是一個獨立的單頁網頁，主要聚焦於說服瀏覽網頁的使用者達到你想要他們採取的特定行為、提高轉換，這個行為可以是註冊帳號、下載指引手冊、電子書，購買商品或服務等等，因此 Landing Page 也被稱作「目標網頁」。
為了讓訪客們達到我們希望他們採取的行為，除了仔細鑽研文案編排、架構呈現、媒體素材編排，Landing page設計有一個很重要的元素：行動呼籲按鈕（Call to action button）。
電商如何用 Landing Page 提升銷售業績？
電商最終目的莫過於導單及整體銷售業績，在搜尋引擎上除了操作口碑行銷及 SEO優化，商城的網站使用者體驗更是直接影響了消費者的互動意願，有時一個按鈕、一個圖片的改變可以提高大量的轉換比率，以最低成本提升大量營收。
為了降低訪客點擊跳出按鈕離開我們的網站，除了排除消費者跳離網站的一切元素外，提升 Landing Page 的「易用性」是電商的重中之重，Landing Page 必須設計訪客視覺路線，引導訪客清楚知道該如何找到符合他需求的商品資訊，並且對於「如何購買」及「為何購買」一目瞭然。有「被設計」過的 Landing Page 更能完整展現電商平台的價值與痛點，讓顧客有立即下單的衝動，進而提升整體轉換率！
Landing Page架構：設計與要點
好的，現在可以開始來做 Landing page 了！我們先來看看一般 Landing Page 設計時常見的網頁架構以及必須注意的要點：(設計模式可以參考UI Pattern)
A. 獨特的銷售命題 Unique Value Proposition (USP)
展現此頁面的核心價值主張的敘述，必須清楚地告訴使用者你為他們提供了什麼，並貫穿整個Landing Page
1. 主要標題 The main headline、次要/輔助標題 The supporting subhead ：主要位於頁面最頂部，層級是H1&H2
2. 強化聲明 The reinforcement statement ：通常位於頁面的中段區域，再次強調獨特命題以留住使用者繼續往下瀏覽或直接達成轉換
3. 總結文案 The closing argument ：位於最末段
B. Hero Shot
位於「above the fold」區域，也就是剛進到頁面，尚未捲動捲軸前的可視畫面範圍，常和主要標題與次要標題搭配呈現
須具備衝擊性的視覺效果，能讓人眼睛為之一亮的圖像（或影片），通常和此頁面的主要銷售目標產品或服務有關（如特色產品圖、產品試用影片）
C.產品利益 Benefit
1. 利益簡述 Benefit Statements ：簡明扼要地列出使用這項產品/服務能獲得的利益，必須精準打到正在尋找此種產品/服務的潛在客戶的痛點，表示你的產品/服務能為他們解決什麼問題
2. 利益詳述 Detailed Benefit ：Benefit Statements的詳細說明
3. 產品/服務功能 Feature Descriptions：通常是針對已經在做決定的使用者，給予更多資訊，表示你的產品/服務能為他們做到哪些事。產品/服務功能可視情況而定再加入，因為這部分是使用者已經產生購買興趣之後才會想閱讀，可以自己評估衡量加的必要性。
D.使用者見證 Social Proof
舉出曾經購買、使用此項產品或服務的使用者們的使用經驗（描述其感受到的利益等等），讓正在瀏覽頁面的使用者能夠對你所提供的產品或服務產生信任感，進而達到轉換的效果，常見的使用者見證呈現方式有使用者評價引言、案例、社群按讚分享數、使用者下載次數等等。
E. 行動呼籲 Call to Action (CTA)
當網頁已經呈現完所有資訊達到底部，該是時候和使用者進行互動了！
為了促使使用者做出我們所期望他們做的行動 EX：填寫表單、註冊會員或購買產品，達到成功轉換的目的，此時往往會搭配總結文案（The closing argument）與轉換按鈕（CTA button）
1. 總結文案：再度重申銷售命題（USP），驅使使用者按下轉換按鈕
2. 轉換按鈕：按鈕上的文案非常重要，避免使用太具有商業目的的句子，以減肥產品為例：立即購買（Ｘ）立即獲得S曲線（Ｏ）
Landing Page架構： UX 設計優化
1. 好的 Landing Page 必須可以回應三個「為什麼」
· 這是什麼？
· 裏頭有什麼讓我運用？（使用者的利益為何？）
· 接下來該做什麼？
2. 考量使用者瀏覽視覺動線
「Above the fold」區域的設計必須呈現整個頁面最重要的資訊，而人們通常習慣以「F模式」 或是「Z模式」瀏覽網頁，也就是注意互動軸線，元素愈靠近軸線，就愈容易被使用者看到。
3. 留意Fold區塊的設計
Fold 是指使用者未經捲動即可看見的區域，大部分的使用者並不見得會捲動捲軸繼續瀏覽，所以必須盡可能在「above the fold」區域引起他們的興趣。 NNGroup 曾經做過一個研究，結果指出使用者會花費約80%的時間停留在「above the fold」區域，而停留在「below the fold」區域的時間僅有20%，因此「above the fold」區域的設計必須呈現整個頁面最重要的資訊：
· 在標題中使用數字可以更容易吸引使用者目光、並引導閱讀
· 不要使用過長的標題
· 明白提示他們可以捲動畫面
4. 移除掉不必要的干擾
進入Landing Page的使用者只有一件事要做，那就是按下轉換按鈕/填寫表單。站在易用性 (usability) 的角度上，易用性也就是訪客的認知負荷，你的設計會影響使用者花多少心思才能完成目標任務，因此若首頁中出現其他與轉換率目的不相干的連結，會分散使用者的注意力，造成轉換率降低。
5. 連結與CTA按鈕必須可以被輕易辨識
CTA按鈕須能跳脫畫面，置於顯眼的位置，且可以自我解釋（be obvious and self-explanatory），讓使用者能清楚了解他們為什麼要點擊它，點了它之後會去哪
CTA按鈕文字公式：「動詞＋利益＋緊急時間或地點/通用詞（免費）」
6. 響應式設計的考量
響應式網站 (RWD) 又稱為回應式網站設計，會根據不同的螢幕尺寸和裝置 (包括桌上型電腦、平板電腦或手機) 調整網頁圖文內容，但仍使用相同版本的網址和網站內容，使網站能夠跨裝置觀看並維持住 UI ，給使用者最佳瀏覽畫面。
7大 Landing Page設計案例
Meepshop 身為台灣知名的開店平台，他的 Landing Page設計就像一個翻頁式故事，以簡潔有力的版面，一頁一頁介紹平台的特點與使用者見證等資訊，讓消費者可以按照 Meepshop 設計的使用者動線閱讀網站，並實際體驗到 Meepshop 獨特的樂高式 Landing page行銷。
2. Shopify
Shopify 的 Landing Page 架構非常簡單明瞭，以簡單的符號和三大訴求來傳達公司訴求跟訪客可以獲得的好處。最重要的是，他的頁面轉換目標和 CTA 相當簡單明瞭，只要填上你的 Email 就可以免費開啟產品體驗。
3. Airbnb
Airbnb以明顯、衝擊視覺的大圖放在首頁 Fold 結合搜尋篩選器，給訪客一個身歷其境的幻想，下面則按照主題分出訪客可能有興趣的區塊，並附上使用者回饋評價及星等，幫助訪客可以更安心的瀏覽、選購。這種編排方式以及明確的號召性動機可以輕鬆吸引訪客與 Landing Page 互動，並進行轉換。
4. Teambit
Teambit以可愛插圖式的Landing Page設計來呈現品牌想帶給用戶的風格，簡單、充滿動物角色的互動插圖令人聯想到愉快的辦公室，成功吸引上班族注意，忍不住想要向下滾動了解更多信息，不知不覺就將首頁想傳達的訊息吸收完畢。
5. Bills.com
Bills.com的 Landing page設計非常有特色，一般我們可能會認為 Landing page 就是靜態的資料呈現頂多加個動畫讓區塊或是素材可以動起來，但是Bills.com的 Landing page 卻可以真的與訪客互動，進來貸款的人只需要透過簡單拖曳及點選就可以篩選出適合你的可貸款對象，相信真的有貸款需求的人也會很樂意填寫互動式篩選器，無痛找出適合的借款對象。
6. Landbot
Landbot 的 Landing page設計是以聊天機器人的服務頁面呈現，這種方式不僅特別，而且這個 Landbot 本身就是他們自己的產品，也就是說，他們的Landing page就是以他自家的聊天機器人做設計，活潑有個性的對話設計不只增加了訪客的互動意願，也藉機為自身產品做曝光，達到最好的Landing page行銷。
7. Moz
Moz相信大家都知道，他是網站分析以及SEO優化時最得力的工具， 在 Landing page 中他的標題和副標題共同構成了一個強有力的價值主張，且由於配色的緣故使得CTA按鈕在視線中非常突出，比較有特色的設計是，他直接使用了產品實際使用時會顯示的排版來展示見證數據，更加深了使用者對於這個工具的信任。
常見免費Landing page製作工具
如果你沒有足夠預算而去購買像是Meepshop、Shopline電商平台製作工具，或是常見的免程式語言架設網站工具例如Unbounce等等，不過如果想先從免費landing page製作工具先下手，以下介紹3個常見的landing page製作工具的特點，避免花一大筆錢一大把時間完成網站後，卻發現功能並不符合期待。
更重要的是，這三個免費landing page製作工具幾乎並不需要任何程式技術背景也可以做得到，也不太需要花大量的時間上手，簡單landing page製作工具對於不需要客製化功能的人來說是非常棒的選項。
這三個不同的免費landing page製作工具各有不同的特點，因此也許最後都可以達到landing page製作的目的，但能夠擁有的額外擴充功能卻不盡相同，並沒有哪個工具是最好的，只有適不適用。
1. WordPress
WordPress是目前最被廣泛應用的免費landing page製作工具，根據統計全球有將近3成的網站都是採用 WordPress架站，它有以下這些優點：
a. 擁有大量外掛可以擴充，即使沒有找到需要的功能外掛，也可以額外請工程師開發或修改既有的
b. 屬於開源系統，也就是指任何人都可以為此系統提供主題模板和外掛，因此擁有大量主題版型
c. 相對於一般程式碼架站，操作相對快速簡便
d. WordPress非常適合 SEO 行銷及內容行銷，有大量屬於SEO的擴充功能，比其他的架站系統更適合SEO優化
但相較於Wix 和 Weebly，他的操作比較複雜，上手時間會比較長。
2. Wix
Wix 系統非常適用於沒有工程背景的人，他有以下幾個特點：
a. 網站模板專業漂亮，可以輕鬆架出看起來十分專業的網站
b. 註冊 Wix 時，系統就會協助進行網站分類
c. 擁有新手導引系統幫助新手盡早上手
d. Wix 有超過200個以上應用外掛，包含免費和付費的，雖然比不上 WordPress 擁有的數量。
Wix 的缺點是，用戶只是租用而非擁有，因此使用Wix架站的是帶不走的。另外，Wix不太便利於操作SEO，雖然Wix近年來有持續優化改善了許多SEO優化問題，不過相較於其他兩個工具，Wix的功能還需更加完善。
3. Weebly
Weebly 非常受不太擅長技術操作的用戶的歡迎，Weebly 的使用操作比Wix 更直覺、簡單，非常適合架出功能簡單易懂的網站。Weebly有以下幾個優點：
a. 在三個工具之中操作最為快速和簡單，編輯容易
b. 能以最少的時間架出簡易網站
c. 免費版就能夠綁定網域，而且還免費支援 SSL
但是Weebly還是有幾項限制，如果想做出具有專業感的網站，使用Weebly會相對必較困難，功能面也不夠完善。另外，Weebly 就像 Wix 一樣，用戶只是租用，所以不支援轉移到其他平台。
Weebly 在搜尋引擎上很難達到良好的 SEO 標準，更重要的是，Weebly 官方建議必須升級到付費方案之一才能被搜尋引擎索引！翻成白話文就是網頁雖然做出來了，但是並不能在搜尋階段被消費者看到，只能透過網址進入頁面。
