iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
1
自我挑戰組

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

【Day 12】原子設計:分子 ( 導覽元件、折疊面板、提示工具 )

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 )

提示工具常運用在功能教學上,例如在前後台功能較多的線上平台。通常還會加上進度提示與按鈕。
https://ithelp.ithome.com.tw/upload/images/20200927/20130402CQP8FenJAI.png

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


上一篇
【Day 11】原子設計:常見元件 ( Text 文字、Color 色彩、Accessibility )
下一篇
【Day 13】原子設計:分子 ( 卡片、互動視窗、警告訊息、資料表 )
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言