Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

• 著陸頁 ( Landing Page )
• 著陸頁常見區域

著陸頁 ( Landing Page )

著陸頁，會是希望使用者進入網站看到的第一個重點頁面。主要目的是為了取得轉換率 ( 曝光量或業績目標 )

單頁式網頁 ( One Page )：
廣告用途的登陸頁，通常是單頁式網頁。單頁式的版型除了最重要的轉換元件外，通常不帶其他連結，主要是要讓使用者專注瀏覽該頁面。

著陸頁常見區域

• 主頁首圖 ( Hero Header )
• 功能特點 ( Why US )
• 操作流程 ( How it works )
• 顧客推薦 ( Social Proof )
• 常見問題 ( FAQs )
• 價格方案 ( Pricing )
• 頁底轉換 ( CTA )
• 頁尾 ( Footer )

主頁首圖 ( Hero Header )

將主打產品、核心服務或品牌概念以首頁大版面圖像或影片呈現，並會在顯眼處搭配網頁標題、連結或 CTA 的元件。

功能特點 ( Why US )

常會使用三欄式的版型來介紹產品有什麼特別的地方、可以帶來的好處或解決的困難等，進而吸引使用者了解更多。

操作流程 ( How it works )

常見會使用兩欄的交錯是版型，Z 字型的動線能讓使用者順暢的瀏覽 ( 操作畫面 + 文字描述 )

顧客推薦 ( Social Proof )

真實顧客的推薦能夠增加使用者對產品、品牌的信任感，通常是使用單欄式的版型以及搭配輪播效果。

常見問題 ( FAQs )

作為頁面的補充說明，提供頁面上因版面或順序而沒有提到，但使用者仍會在意的問題與解答。

價格方案 ( Pricing )

通常是三欄式的卡片設計，除了列出價錢外，也會標註每個方案的特色與差異。

頁底轉換 ( CTA )

頁面底部再次出現轉換區域，讓被說服的使用者能夠被驅使點擊。通常是單欄式的版型。

好! 下一篇我們繼續討論模板的相關事項 : )