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

原子設計第三階段，組織：相對於分子是更為複雜的組成，由原子及分子所建構

本篇重點

1. 頁首 ( Header )
2. 主頁首圖 ( Hero Header )
3. 頁尾 ( Footer )

頁首 ( Header )

Header 是使用者一進到網站最先看到的區域，通常由靜態或動態的圖像、文字所組成。作為向使用者傳遞網頁最重要內容的重要部份。

熱門的主頁首圖 ( Hero Header )

將主打產品、核心服務或品牌概念，以首頁的大版面圖像或影片來呈現，並在顯眼處搭配網頁標題、連結或任何用以達成使用者轉換目的(CTA)的元件。

主頁首圖元素

• 標題列
• 多媒體 ( 圖片、插畫、影片等 )
• 網頁 Slogan
• 互動元件 ( 表單、連結、按鈕 )

主頁首圖如何選擇

• 明確目的：輔助解釋功能、操作流程
• 情感加乘：給予心理上的肯定或情感驅動
• 品牌價值：帶來的效益與好處

2、頁尾 ( Footer )

Footer 位於網站所有頁面的底部，通常作為主要內容的輔助，增強使用者的瀏覽體驗。可以根據網站內容與目的去考量，而調整擺放元件。

頁尾元素

• 顧客參與 ( Customer Engagement )
• 實用連結 ( Utility Links )
• 次要任務連結 ( Secondary-task Links )
• 網站地圖 ( Sitemap )
  • 門墊式導覽列 ( Doormat Navigation )

顧客參與：

• 品牌 LOGO
• 訂閱電子報
• 社群平台連結

實用連結：

• 聯繫資訊
• 顧客服務資訊 ( 付款資訊、幫助中心等 )
• 隱私權政策
• 服務條款

次要任務連結：

• 職缺消息
• 產品規格
• 媒體資源
• 投資資訊

網站地圖：
網站地圖形式的頁尾，將主要類別下的重要子頁面全部展現，能夠增強使用者對於網站的認識，或更快的到達想要去的資訊頁面。

門墊式導覽列：
將選單列的導覽連結同時也放置於頁尾，當頁面很長或在頁面底部不能使用選單列時，是非常便利的選擇。

好! 下一篇後就進入模板的階段囉~~ 祝大家中秋假期愉快 : )
I miss you, Elaine.