【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 元件,有興趣的朋友可以觀看:
  1. 【UI 常見元件整理】Feedback 回饋
  2. 【UI 常見元件整理】Input 輸入
為什麼會看到廣告
《思維的創意想像》是工作之餘發起的 Side Project,因為近期快速吸收各種資訊跟商業知識(Input),但一直沒有地方輸出(Output),因此想透過這系列記錄學到的內容,包含商業知識、產業洞見,或是職場分享等等,目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
發表第一個留言支持創作者!
上一篇《產品開發的黃金圈理論 Why-How-What》提到產品開發的黃金圈,接下來我想列舉我在產品規劃時,曾犯下的幾個失誤,也作為未來的警惕,(1) 確認好需求才進規劃、(2) 確認好解方要有框架、(3) 確認好框架才進開發。
上一篇提到在從彙整產品需求,到決定產品開發順序的流程,接著我將繼續以一個產品專員的角色,來記錄產品開發的關鍵決策點,這篇會包含 (1) Why 為什麼我們要做這個產品、(2) How 我們要透過什麼方式傳達價值、(3) What 我們要透過什麼功能達到目標。
上一篇《訂定產品策略的難點,拆解團隊分歧點|EP2》提到在決定產品方向時,常遇到的內部爭執點,接著我將會以一個產品專員的角色,來記錄收到產品需求時,決定開發與否的思考環節,這篇會包含 (1) 產品需求彙整、(2) 產品願景梳理、(3) 產品開發排序。
上一篇《產品管理的首要任務,重視每位利害關係人》提到各種利害關係人的應對,這篇將接續分析這些利害關係人會如何影響產品策略、產品定位,包含,包含 (1) 產品定位、(2) 產品開發目的、(3) 產品需求順序。
在群眾集資平台除了擔任平台顧問,同時也協助產品開發管理,因此這系列文章將會整理我在產品管理所學到的教訓,以及在跨部門溝通的收穫,這篇會先著重在 (1) 利害關係人怎麼協調 (2) 重視但不忽視。
最近在研究各項產品、APP 的使用者旅程、產品開發,剛好看到 Hahow 好學校推出 APP 版本,因此想以一個學員身分,紀錄我在使用 Hahow APP 的狀況,像是操作過程中的困惑,或是遇到的難點。(我在電腦版已購課數為 12 堂)
上一篇《產品開發的黃金圈理論 Why-How-What》提到產品開發的黃金圈,接下來我想列舉我在產品規劃時,曾犯下的幾個失誤,也作為未來的警惕,(1) 確認好需求才進規劃、(2) 確認好解方要有框架、(3) 確認好框架才進開發。
上一篇提到在從彙整產品需求,到決定產品開發順序的流程,接著我將繼續以一個產品專員的角色,來記錄產品開發的關鍵決策點,這篇會包含 (1) Why 為什麼我們要做這個產品、(2) How 我們要透過什麼方式傳達價值、(3) What 我們要透過什麼功能達到目標。
上一篇《訂定產品策略的難點,拆解團隊分歧點|EP2》提到在決定產品方向時,常遇到的內部爭執點,接著我將會以一個產品專員的角色,來記錄收到產品需求時,決定開發與否的思考環節,這篇會包含 (1) 產品需求彙整、(2) 產品願景梳理、(3) 產品開發排序。
上一篇《產品管理的首要任務,重視每位利害關係人》提到各種利害關係人的應對,這篇將接續分析這些利害關係人會如何影響產品策略、產品定位,包含,包含 (1) 產品定位、(2) 產品開發目的、(3) 產品需求順序。
在群眾集資平台除了擔任平台顧問,同時也協助產品開發管理,因此這系列文章將會整理我在產品管理所學到的教訓,以及在跨部門溝通的收穫,這篇會先著重在 (1) 利害關係人怎麼協調 (2) 重視但不忽視。
最近在研究各項產品、APP 的使用者旅程、產品開發,剛好看到 Hahow 好學校推出 APP 版本,因此想以一個學員身分,紀錄我在使用 Hahow APP 的狀況,像是操作過程中的困惑,或是遇到的難點。(我在電腦版已購課數為 12 堂)
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
產品製作的核心因素有三個重點,分別為:使用者(誰在用)、需求(為什麼用)、場景(在哪裡用)。這些因素對於任何產品的成功都是相當重要的。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎,只是當時沒有像現在這樣重視使用者對產品的使用體驗感受,不過我們還是可以透過回顧歷史,看看UI/UX是怎樣往前發展至現在的模樣,甚至近期有一些新技術已經在某些族群中默默地發展著!
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
市面上有許多 UI 設計的職缺,但要如何應徵上一份工作則是需要經驗與學問,最關鍵的部分就是面試,面試是一場現場與未來可能工作夥伴的交流,很多工作的面試流程僅有一場,可以說是一次定勝負,如何讓你的面試比其他設計師更有競爭力,就是這一篇要探討的主題,這次將以這些章節帶入面試應該要注意的項目
Thumbnail
市場上有許多 UI 的設計職缺,在設計這一個行業裡面,學歷或是工作履歷能幫你增加打開履歷的機會,但真的進入面試的關鍵就在作品集。要怎麼準備作品集?要怎麼去應徵這些職缺?要怎麼樣才能提高進入面試的機率?有時候作品集佔了至關重要的地位,今天這一章將介紹如何準備 UI 專用的設計作品集,並提供一些建議,
Thumbnail
最近收到了一封學生的信,詢問在職場中UI Designer是什麼?想在公司建立一套基本的流程,這張圖片應該許多人都看過,裡頭有很多專業的名詞,以及像金字一樣往上堆疊的順序,在討論工作流程前,我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。 Us
Thumbnail
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢? 這是設計師與工程師 今天,設計師畫了一個上傳照片的功能: 設計師如果只提供這張圖會代表什麼呢? 就會變成這樣,
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
產品製作的核心因素有三個重點,分別為:使用者(誰在用)、需求(為什麼用)、場景(在哪裡用)。這些因素對於任何產品的成功都是相當重要的。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
其實在以前工業時代的產品就已經有了UI/UX的人機互動基礎,只是當時沒有像現在這樣重視使用者對產品的使用體驗感受,不過我們還是可以透過回顧歷史,看看UI/UX是怎樣往前發展至現在的模樣,甚至近期有一些新技術已經在某些族群中默默地發展著!
Thumbnail
加入商業思維學院3個月,就能把學到的東西運用在工作中。而6個月後參加產品經理學習營,還入圍Final Pitch拿到嘖嘖 Manny 老師的評審最愛獎,因此想和大家分享! 推薦給這些朋友: 持續在設計領域努力,最近卻有點茫然 對產品有熱情,卻找不到機會實 過去買線上課的糟糕經驗,導致現在購課都很猶豫
Thumbnail
市面上有許多 UI 設計的職缺,但要如何應徵上一份工作則是需要經驗與學問,最關鍵的部分就是面試,面試是一場現場與未來可能工作夥伴的交流,很多工作的面試流程僅有一場,可以說是一次定勝負,如何讓你的面試比其他設計師更有競爭力,就是這一篇要探討的主題,這次將以這些章節帶入面試應該要注意的項目
Thumbnail
市場上有許多 UI 的設計職缺,在設計這一個行業裡面,學歷或是工作履歷能幫你增加打開履歷的機會,但真的進入面試的關鍵就在作品集。要怎麼準備作品集?要怎麼去應徵這些職缺?要怎麼樣才能提高進入面試的機率?有時候作品集佔了至關重要的地位,今天這一章將介紹如何準備 UI 專用的設計作品集,並提供一些建議,
Thumbnail
最近收到了一封學生的信,詢問在職場中UI Designer是什麼?想在公司建立一套基本的流程,這張圖片應該許多人都看過,裡頭有很多專業的名詞,以及像金字一樣往上堆疊的順序,在討論工作流程前,我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。 Us
Thumbnail
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢? 這是設計師與工程師 今天,設計師畫了一個上傳照片的功能: 設計師如果只提供這張圖會代表什麼呢? 就會變成這樣,