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

分子階段：由原子所構成的簡單介面元件

本篇重點

1. 導覽元件 ( Navigation )
2. 折疊面板 ( Accordions )
3. 提示工具 ( Tooltips )

1、導覽元件 ( Navigation )

導覽的最基本元素是連結，將幾個連結組合而成導覽元件，是使用者用來瀏覽不同頁面網頁時，最主要操控的元件。

常見的導覽元件

• 選單列 ( Navigation Menu )：
  通常置頂於網站每個頁面，是許多網頁的主要導覽元件，會有品牌 Logo、主要分頁、功能系統等重要功能資訊
• 巨型選單 ( Mega Menu )：
  巨型選單會將第二、第三層級的頁面標籤拉到最頂層，提升使用者的導覽速度 ( 非常適用有許多產品分類的電商網站 )
• 標籤列 ( Tab )：
  通常會和選單列一起使用，作為次要導航，常駐的標籤列能避免使用者迷路。
• 垂直選單 ( Vertical Navigation )：
  用於分頁很大的網站，有顯示網站結構與常駐型導航的特點，在行動裝置上為了避免壓縮空間，會轉化成側邊選單 ( Navigation Drawer )
• 頁面路徑 ( Breadcrumbs )：
  是顯示網頁層級結構的元件，樣式簡單，給使用者一個橫跨多個層級的方法
• 分頁條 ( Pagination )：
  通常出現於產品列表或是搜尋結果頁等有大量資料的頁面，也有網站會用瀑布流 ( Infinite Scrolling ) 的設計取代分頁條

2、折疊面板 ( Accordions )

常會使用於 FAQ 等問答區，點擊後可以展開原本收合起的資訊

3、提示工具 ( Tooltips )

當使用者懸停或聚焦特定元件時會出現的文字標籤，通常會顯示能幫助使用者操作的內容，如圖示功能、狀態訊息、引導操作等。

教學提示 ( Onboarding )

提示工具常運用在功能教學上，例如在前後台功能較多的線上平台。通常還會加上進度提示與按鈕。

好! 下一篇會繼續介紹原子設計中分子階段的其他部分 : )