【UI 常見元件整理】Navigation 導覽

更新於 發佈於 閱讀時間約 5 分鐘

這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。

但由於因應不同使用情境、不同產品,都會用到不同的功能,因此未來我也會持續整理 Web、Mobile、APP 的不同常見元件。

此 UI 元件系列,源自於近期職涯都有接觸到「平台」這個產品,
因此想整理一系列的 UI 元件範例,以作為未來工作上的資料庫。

一、選單 Menu

過往參與產品開發,都只知道「選單」,但其實選單會根據 IOS 和 Android 而有不同設計習慣。

  • 手機版:Android 的架構多半是用「漢堡選單 Hamburger Menu」(三條橫線)的方式來設計,而 IOS 則習慣用「標籤列 Tab Bars」,但也有滿多平台會混合使用,以下面的 104、1111、Yourator、CakeResume 求職平台為例,除了 1111 的 Tab Bar 是做在底下之外,其他 3 間的 Tab Bar 都是在頂部。
  • 網頁版:多半混合使用,有些網站沒那麼複雜僅會有 Tab Bars,有些較複雜則是 Tab Bar 加上 Hamburger Menu,更複雜一點就是 Tab Bar + Hamburger Menu + 「下拉式選單 Dropdown Menu」。

二、抽屜式導覽 Navigation drawer

延伸上述的「漢堡選單 Hamburger Menu」,另一個很常見被使用的進階方式是「抽屜式導覽 Navigation Drawer」,通常也是點擊「三條橫線」的 icon,左側就可以通常彈出導覽選單,如抽屜般抽出功能列表。

以下方 Youtube、Canva 為例,左上角的三條橫線都可以收、放整條功能列表。


三、標籤列 Tab Bars

剛剛上方有先提過網頁上方的 Tab Bar,但其實 Tab Bars 最常被使用的情境仍是指手機 APP 底部那條導覽列,因此又被稱為「底部導航 Bottom Navigation」。

Tab Bar 在螢幕底部會有 3~5 個圖示,以「拇指原則(Thumb Rule)」作為考量,設計成拇指方便點選的大小,也是 IOS 最常使用設計規範之一。

以下面 104、1111、518、小雞上工為例,都是採用 4-5 個圖示,並把「漢堡選單 Hamburger Menu」作為其中一個選項,有些會把漢堡改名成「我的」、「個人」、「會員」、「關於」等。


四、多元選單:列表 List、網格 Gird、卡片 Card

接下來這塊也是選單的方式,但是是用「網站地圖 Sitemap」的概念,彙整各項功能的入口,一次呈現在畫面上。

通常這種導覽方式會用在網站內容較複雜的平台,例如下方的 Airbnb 民宿出租平台、Funnow 都會享樂即時預訂平台。


五、麵包屑 Breadcrumb

麵包屑,通常用於網站階層關係較多的平台,像是幾乎很多政府機關的網站都會有麵包屑,方便民眾知道他現在的位置是在哪一層底下。

另外像是電商網站、課程網站、娛樂網站也滿常看到,具體顯示像是「蝦皮購物 / 男生衣著 / 長褲 / 休閒長褲 / 【OOO】吸濕排汗修身長褲」。


六、進度表 Stepper

以導覽這個分類來說,「進度表(Stepper)」也算是其中一種,滿多是出現在要輸入資料的環節,常見像是:

  • 網頁版:註冊、結帳、預約,跟「填寫資料、預約服務、結帳消費」有關的幾乎都會用到進度表,例如華航的機票購買,博客來網路書店的結帳。
  • 手機版:操作教學、註冊、購物車結帳,一樣跟「填寫資料、預約服務、結帳消費」,但 APP 會多一樣「新手引導教學」,像是 VoiceTube 針對第一次下載的用戶就會有簡易引導。

以上是 UI 元件系列的第一篇,由於我目前正在熟悉 UI 這個領域,因此有滿多 UI 解釋、操作說明都是先參考不同 UI 前輩的文章,再進行轉譯,若有任何用詞不精確的地方,都歡迎讀者給予回饋。

未來也會持續記錄不同場景、不同產品、不同產業的 UI 元件,有興趣的朋友可以觀看:

  1. 【UI 常見元件整理】Feedback 回饋
  2. 【UI 常見元件整理】Input 輸入
留言
avatar-img
留言分享你的想法!
avatar-img
張家惟 Evan Chang的沙龍
106會員
182內容數
《思維的創意想像》是工作之餘發起的 Side Project,因為近期快速吸收各種資訊跟商業知識(Input),但一直沒有地方輸出(Output),因此想透過這系列記錄學到的內容,包含商業知識、產業洞見,或是職場分享等等,目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
2025/04/20
從 ChatGPT、Claude、Gemini 各種模型的出現,「AI 是否會取代 PM / UX / RD」一直是軟體業在討論的話題,AI 已能撰寫 PRD 產品需求文件、分析用戶、設計原型 Prototype,甚至提供產品決策建議,甚至對於一些產品主管來說,只會執行的初級產品經理職缺可能會越來越
Thumbnail
2025/04/20
從 ChatGPT、Claude、Gemini 各種模型的出現,「AI 是否會取代 PM / UX / RD」一直是軟體業在討論的話題,AI 已能撰寫 PRD 產品需求文件、分析用戶、設計原型 Prototype,甚至提供產品決策建議,甚至對於一些產品主管來說,只會執行的初級產品經理職缺可能會越來越
Thumbnail
2025/04/17
在電商產業擔任產品經理,最常被問的就是「AI 可以在電商平台做哪些事」,像是個人化商品推薦、文案生成、加速上架、AI 客服等,市面上已陸續有 AI 功能逐漸釋出,但 AI 協助購物這段流程要怎麼進行,這篇想記錄初步想法。
Thumbnail
2025/04/17
在電商產業擔任產品經理,最常被問的就是「AI 可以在電商平台做哪些事」,像是個人化商品推薦、文案生成、加速上架、AI 客服等,市面上已陸續有 AI 功能逐漸釋出,但 AI 協助購物這段流程要怎麼進行,這篇想記錄初步想法。
Thumbnail
2025/04/12
Retrospective 是敏捷流程中的回顧環節,對產品經理來說是一個可以回顧過往、反思的時刻,這篇會記錄 Retro 的重點,以及產品經理可以如何運用 Retro,讓產品團隊提升開發效率。
Thumbnail
2025/04/12
Retrospective 是敏捷流程中的回顧環節,對產品經理來說是一個可以回顧過往、反思的時刻,這篇會記錄 Retro 的重點,以及產品經理可以如何運用 Retro,讓產品團隊提升開發效率。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
本篇說明如何開啟首頁選單項目[關於我(about)/分類/標籤]的連結,引導讀者可以更認識作者與文章查詢更方便的功能。
Thumbnail
本篇說明如何開啟首頁選單項目[關於我(about)/分類/標籤]的連結,引導讀者可以更認識作者與文章查詢更方便的功能。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
Thumbnail
這篇主要整理常見的 Navigation 導覽元件,像是:選單 Menu、抽屜式導覽 Navigation drawer、標籤列 Tab Bars、多元選單 List、Gird、Card、麵包屑 Breadcrumb、進度表 Stepper。
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
本篇文章將會講述UnityEditor的簡單使用方式,並且詳細介紹Unity客製化最核心的機制[MenuItem("")],就由範例與說明帶你快速搞懂Unity Editor到底在設計什麼。
Thumbnail
本篇文章將會講述UnityEditor的簡單使用方式,並且詳細介紹Unity客製化最核心的機制[MenuItem("")],就由範例與說明帶你快速搞懂Unity Editor到底在設計什麼。
Thumbnail
Padlet
Thumbnail
Padlet
Thumbnail
在開發產品過程中,不難發現研發和設計團隊時常因各自所處的角度不同,使得在溝通來回上花了不少時間。所以小弟整理些過去常在工作場景下遇到的一些資訊技術的專有名詞,化解那些雞同鴨講的無效溝通。
Thumbnail
在開發產品過程中,不難發現研發和設計團隊時常因各自所處的角度不同,使得在溝通來回上花了不少時間。所以小弟整理些過去常在工作場景下遇到的一些資訊技術的專有名詞,化解那些雞同鴨講的無效溝通。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News