Jet 串流

透過大螢幕順暢享受喜愛的電影、電視節目、音樂和其他內容。

資源

類型 連結 狀態
設計 設計來源 (Figma) 可使用
Inter (Google Fonts) 可使用
導入作業 Jetpack Compose (GitHub) 可使用

主題

色彩主題
顏色主題是使用 Material Design 3 主題產生器產生。
顏色主題

Typography
JetStream 的輸入比例使用介面類型,打造簡單明瞭的電視螢幕外觀。
字體排版

形狀
資訊卡和按鈕會套用微小的半徑,創造親切便利且平易近人的邊緣。
形狀

對焦
JetStream 中會使用帶有外框顏色的 3dp 外框顏色。
突顯重點

首頁

住家
JetStream 應用程式的到達網頁。
首頁

精選輪轉介面
採用資訊卡樣式版面配置的輪轉介面。
精選輪轉介面

內容列
JetStream 使用顯示比例 2:3 的標準卡片樣式,並套用 5 欄版面配置。
內容列

沉浸式清單
使用沉浸式清單元件醒目顯示應用程式中的特殊內容,例如前 10 大熱門電影。
沉浸式清單

類別

類別
「類別」頁面會以格線格式顯示類型,方便使用者瀏覽及存取。
類別

類別資訊卡
類別資訊卡

類別詳情
含有標頭的 2:3 資訊卡格線可用來建立「類別詳細資料」頁面。
類別詳情

媒體

電影
標準電影分頁,頂端有 16:9 精選資訊卡,底部有內容格線。
電影

節目
節目

媒體庫

常用項目
「常用項目」分頁會在畫面頂端提供篩選器方塊,方便你快速搜尋內容。
我的最愛

搜尋到達網頁
搜尋頁面會顯示搜尋列,其中包含最近的搜尋建議搜尋查詢。
搜尋到達網頁

主動搜尋
當使用者將焦點放在搜尋列時,鍵盤會彈出,而下方的結果會根據使用者輸入內容動態更新。
主動搜尋

實體詳細資料

詳細資訊到達網頁
詳細資料頁面呈現電影動態效果,帶有簡短劇情摘要,以及可用來觀看電影的醒目行動號召按鈕。
詳細資料到達網頁

演員和工作人員
「演員與工作人員」部分有一列經典資訊卡,提供標題和說明,每張資訊卡旁還會有一個 2:3 的圖片素材資源。
演員與工作人員

評分
「評分」專區提供自訂的經典寬資訊卡,其中含有額外資訊。
分級

播放

影片播放器
採用最佳做法的標準影片播放器。
影片播放器

影片播放器設定
影片播放器上的隱藏式輔助字幕彈出式圖示。
影片播放器設定

設定

帳戶設定
帳戶頁面版面配置採用雙欄設計,左側有清單元件,右側為自訂資訊卡元件,以格狀格式排列。
帳戶設定

「刪除帳戶」對話方塊
對話方塊設計採用對比鮮明的背景,使其從畫面的其他部分脫穎而出。對話方塊中的兩個按鈕靠左對齊,呈現簡潔有條理的外觀。
刪除帳戶對話方塊

簡介
「關於」部分提供右側面板和可捲動的文字檢視畫面。
關於

字幕設定
清單元件可用來在副標題下顯示各種設定,且會使用切換按鈕或標籤等動作。
字幕設定

記錄
搜尋記錄採用的版面配置會顯示先前搜尋過的查詢清單,並提供清除所有搜尋記錄的選項。
記錄

說明
「說明與支援」部分使用自訂清單元件來顯示聯絡資訊和常見問題等各種選項。
說明