Components
Action Sheet
Badge
Button
Cards‣
Dialog
Fixed Banner
Floating message
Image
Input field‣
Message Block‣
Status
Tab
Tag
TooltipsTop Navigation I - Inner page
內頁頂部導航列出現於內頁畫面頂端，用於導航內容層次。
此元件分為 iOS 及 Android 兩種 UI 形式，細節可瀏覽下方介紹資訊。
並且與 Top Navigation II - Portal page, 使用的時機不同。
⚡️ 相關資源：
Components
Figma File
UI Spec
Figma File
Anatomy (Inner page)
解構
- Left item 左側欄位 至多一個元件，可依需求不顯示。
- Right items 右側欄位 iOS 至多兩個圖標(icon)，Android 至多為三個圖標(icon) 固定會有投放功能。除投放功能，可依需求不顯示。
- Title 標題 iOS 置中，Android 置左。
Variants (Inner page)
變形(內頁)
_-_1413/w=3840,quality=90,fit=scale-down)
以下五種類型的範例，多以 iOS 現況截圖演示，在 Android 上會有些微差異，但大多符合通則。
❶ General 一般
使用於常見的一般內頁，如專輯頁、歌單頁、Podcast 頻道或單集頁。
_-_1405/w=3840,quality=90,fit=scale-down)
❷ Edit 編輯
使用於全頁操作的內頁，如最近搜尋清除、個人頁編輯。
❸ On Image 背景為圖
使用於橫幅底圖或色塊上，例如個人頁、專輯頁、藝人頁等等。
_-_1403/w=3840,quality=90,fit=scale-down)
❹ Page View
使用於不需離開當前頁面，但與母層(上層)操作相關的獨立任務操作內頁 (iOS only) 。如我喜愛的藝人編輯(個人頁)、情境懶人包編輯( For you 頁)，並且在大小尺寸上會有不同的呈現。
_-_1404/w=3840,quality=90,fit=scale-down)
_-_1412/w=3840,quality=90,fit=scale-down)
Android 的 sheet 原生限制，無法放置資料(歌單、歌手等)，只能放置行為(按鈕)，因此 ios 使用 sheet 且內容為資料時，Android 使用 ❷ Edit 編輯。
❺ Tool Bar 工具列 未開發
使用於編輯或步驟需求的頁面 (Android only) 。
_-_1406/w=3840,quality=90,fit=scale-down)
Usage guideline
1. 跑馬燈
Title 文字過長時，都會有跑馬燈效果的呈現。
2. 分隔線
除了 On Image 類型，都會有分隔線。
_-_1411/w=3840,quality=90,fit=scale-down)
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
January 31, 2023 | 1.6 | ・新增 top navigation 草稿 | Top Navigation |  Yit Chung |
October 16, 2023 | 1.35 | ・調整雙平台 UI 介紹內容，補充 Android 示意圖及說明文字 | Top Navigation | C Camille Cheng |