Top Navigation II
Top Navigation II

Top Navigation II

Top Navigation II - Portal page

主頁頂部導航列出現於主頁畫面頂端，用於導航內容層次。
image
💡
此元件分為 iOS 及 Android 兩種 UI 形式，細節可瀏覽下方介紹資訊。 並且與 Top Navigation I - Inner page，使用的時機不同。

⚡️ 相關資源：

icon
Components Figma File
icon
UI Spec Figma File

Anatomy (Portal page)

image
  1. Top item 上方欄位 一個 Page title，一個圖標(icon)(可依需求不顯示)。
  2. Bottom item 下方欄位 可依需求，替換不同的內容。

Variants (Portal page)

變形(主頁)

主頁導航，以 ❶ General 一般為框架，但可以與其他元件組合，如！中的範例。
主頁導航，以 ❶ General 一般為框架，但可以與其他元件組合，如！中的範例。
⚠️
❶General 已在『為你打造』中進行開發並上線，其餘 ❷Tab (精選頁) , ❸Sub tab (我的頁) , ❹Search (搜索頁) 都 未開發
💡
以下以 iOS 現況演示，在 Android 上會有些微差異，但大多符合通則。

❶ General 一般

使用於主頁，當滑動螢幕時，主頁標題會縮小並釘選。

Enlarge(放大) 與 Shrink(縮小) 過程示意
Enlarge(放大) 與 Shrink(縮小) 過程示意

iOS 為你打造頁使用 SwiftUI 原生元件，所以主頁標題下方自帶原生間隔。為使開發符合設計稿「主標與副標間隔 8 pt」的定義，開發時設定副標上方間距為 2 pt。

為你打造頁 iOS 實作截圖與說明
為你打造頁 iOS 實作截圖與說明

Usage guideline

1. 跑馬燈

Title 顯示維持一行，若文字過長則以跑馬燈效果顯示完整資訊。

跑馬燈
跑馬燈

2. 分隔線

iOS 及 Android 的 Shrink 縮小的導航底部都會有分隔線。

分隔線
分隔線
⚠️
❶ General 項目實作未顯示分隔線，未來調整及開發其他項目時需再補上，對齊UI Spec。

Changelog

Date
Version
Notes
Chapters
Person
October 16, 2023
1.35

・調整雙平台 UI 介紹內容，補充 Android 示意圖及說明文字

Top Navigation
C
Camille Cheng
January 31, 2023
1.6

・新增 top navigation 草稿

Top Navigation
Yit Chung