【UI 常見元件整理】Navigation 導覽
更新於 發佈於 閱讀時間約 4 分鐘
這篇主要整理常見的 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 元件，有興趣的朋友可以觀看：
為什麼會看到廣告
91會員
163內容數
《思維的創意想像》是工作之餘發起的 Side Project，因為近期快速吸收各種資訊跟商業知識（Input），但一直沒有地方輸出（Output），因此想透過這系列記錄學到的內容，包含商業知識、產業洞見，或是職場分享等等，目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本篇教學會詳細介紹條 (Bar) 的基本特性，以及在 UI 畫面上的應用，如拖曳、調整大小、空格限制等。此外，教學也針對不同的造型特性進行解說，包括橫向或縱向條、拖曳圖示 (thumb) 調整，以及無法滑動時的隱藏或顯示設定。
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀，並探討客製化返回鍵UI又保留返回手勢的做法，可以有效地客製化NavigationBar的外觀，並避免一些NG作法。
日期網友詢問一個多條件動態下拉式選單的設計，如下圖。
資料中有各種年齡層的目標對象可食用食物的資料分析，其中1代表該年齡層可以吃的食物、0代表不能吃的食物。
原PO想要根據這個資料來源製作一個下拉選單，當選擇該年齡層的目標對象時，下拉式選單分別於主食、肉類、葉菜類顯示可食用的食物名稱(原始資
最近外食的點餐方式有了些微變化，不再需要紙張訂購單，現在可以掃描桌上的QRCode，下載App點餐。這樣不僅環保省紙，還能紀錄消費並累積點數。除了點餐方式，餐點也有些微的變化，例如拉亞漢堡新增了紅醬德式燻腸義大利麵，豐富的配料看起來就好好吃。讓您的用餐體驗更加便利和多元化。
外燴已成為各種場合中不可或缺的一部分，但隨著人們對飲食的需求變得更加多樣化，如何滿足特殊飲食需求成為了外燴界面臨的一大挑戰。從台北到宜蘭，從桃園到新竹，各地的外燴廚房都在努力調整菜單，滿足客戶的各種特殊需求。
在這個外燴王國中，外燴廚房正在積極探索如何將特殊飲食需求融入菜單設計之中。尤其是在台北，
在這個快節奏的生活中，尋找美食成為了一種日常的小確幸。然而，面對無數的選擇和各種疑問，決定吃什麼、在哪吃經常成為一大挑戰。這就是「美食探險家」APP誕生的初衷，一款旨在解決所有餐飲相關痛點的日式漫畫風格美食推薦應用。從「今天吃什麼？」到「這家店評價如何？」，美食探險家應有盡有，是尋找美食的最佳夥伴。
雖然我之前文章大力讚美SwiftUI的tabView有多好用，無奈專案大部分都是UIKit啊～～～～要在既有專案用Tab架構只能用UITabBarController了
設計這次還出了一個超複雜的UI，陰影+圓角+客製化高度 大套餐
馬上開始吧。
圓角+陰影
重點就是subclass一個
同樣是餐飲業,客人消費的心理大不相同
每個人一定都有去餐廳點餐的經驗,有不少都改成線上點餐縮減前台服務人員,但最基礎的菜單版面都還是以推薦套餐-單點-特色料理-甜點飲品這種順序做排列組合,那如果在小吃攤看到這種菜單,會讓你想點餐還是缺乏興趣呢？
舉個例子,你去買鹹酥雞看到菜單上第一行寫著,套
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本篇教學會詳細介紹條 (Bar) 的基本特性，以及在 UI 畫面上的應用，如拖曳、調整大小、空格限制等。此外，教學也針對不同的造型特性進行解說，包括橫向或縱向條、拖曳圖示 (thumb) 調整，以及無法滑動時的隱藏或顯示設定。
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀，並探討客製化返回鍵UI又保留返回手勢的做法，可以有效地客製化NavigationBar的外觀，並避免一些NG作法。
日期網友詢問一個多條件動態下拉式選單的設計，如下圖。
資料中有各種年齡層的目標對象可食用食物的資料分析，其中1代表該年齡層可以吃的食物、0代表不能吃的食物。
原PO想要根據這個資料來源製作一個下拉選單，當選擇該年齡層的目標對象時，下拉式選單分別於主食、肉類、葉菜類顯示可食用的食物名稱(原始資
最近外食的點餐方式有了些微變化，不再需要紙張訂購單，現在可以掃描桌上的QRCode，下載App點餐。這樣不僅環保省紙，還能紀錄消費並累積點數。除了點餐方式，餐點也有些微的變化，例如拉亞漢堡新增了紅醬德式燻腸義大利麵，豐富的配料看起來就好好吃。讓您的用餐體驗更加便利和多元化。
外燴已成為各種場合中不可或缺的一部分，但隨著人們對飲食的需求變得更加多樣化，如何滿足特殊飲食需求成為了外燴界面臨的一大挑戰。從台北到宜蘭，從桃園到新竹，各地的外燴廚房都在努力調整菜單，滿足客戶的各種特殊需求。
在這個外燴王國中，外燴廚房正在積極探索如何將特殊飲食需求融入菜單設計之中。尤其是在台北，
在這個快節奏的生活中，尋找美食成為了一種日常的小確幸。然而，面對無數的選擇和各種疑問，決定吃什麼、在哪吃經常成為一大挑戰。這就是「美食探險家」APP誕生的初衷，一款旨在解決所有餐飲相關痛點的日式漫畫風格美食推薦應用。從「今天吃什麼？」到「這家店評價如何？」，美食探險家應有盡有，是尋找美食的最佳夥伴。
雖然我之前文章大力讚美SwiftUI的tabView有多好用，無奈專案大部分都是UIKit啊～～～～要在既有專案用Tab架構只能用UITabBarController了
設計這次還出了一個超複雜的UI，陰影+圓角+客製化高度 大套餐
馬上開始吧。
圓角+陰影
重點就是subclass一個
同樣是餐飲業,客人消費的心理大不相同
每個人一定都有去餐廳點餐的經驗,有不少都改成線上點餐縮減前台服務人員,但最基礎的菜單版面都還是以推薦套餐-單點-特色料理-甜點飲品這種順序做排列組合,那如果在小吃攤看到這種菜單,會讓你想點餐還是缺乏興趣呢？
舉個例子,你去買鹹酥雞看到菜單上第一行寫著,套