iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 19

【Day 19】原子設計:模板 ( Landing Page 著陸頁 )

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 )

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

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


上一篇
【Day 18】原子設計:模板 Templates
下一篇
【Day 20】原子設計:模板 ( RWD 響應式排版 )
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言