Jet 串流
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
透過大螢幕順暢享受喜愛的電影、電視節目、音樂和其他內容。
資源
主題
色彩主題
顏色主題是使用 Material Design 3 主題產生器產生。
Typography
JetStream 的輸入比例使用介面類型，打造簡單明瞭的電視螢幕外觀。
形狀
資訊卡和按鈕會套用微小的半徑，創造親切便利且平易近人的邊緣。
對焦
JetStream 中會使用帶有外框顏色的 3dp 外框顏色。
首頁
內容列
JetStream 使用顯示比例 2:3 的標準卡片樣式，並套用 5 欄版面配置。
沉浸式清單
使用沉浸式清單元件醒目顯示應用程式中的特殊內容，例如前 10 大熱門電影。
類別
類別
「類別」頁面會以格線格式顯示類型，方便使用者瀏覽及存取。
類別詳情
含有標頭的 2:3 資訊卡格線可用來建立「類別詳細資料」頁面。
電影
標準電影分頁，頂端有 16:9 精選資訊卡，底部有內容格線。
媒體庫
常用項目
「常用項目」分頁會在畫面頂端提供篩選器方塊，方便你快速搜尋內容。
搜尋
搜尋到達網頁
搜尋頁面會顯示搜尋列，其中包含最近的搜尋建議搜尋查詢。
主動搜尋
當使用者將焦點放在搜尋列時，鍵盤會彈出，而下方的結果會根據使用者輸入內容動態更新。
實體詳細資料
詳細資訊到達網頁
詳細資料頁面呈現電影動態效果，帶有簡短劇情摘要，以及可用來觀看電影的醒目行動號召按鈕。
演員和工作人員
「演員與工作人員」部分有一列經典資訊卡，提供標題和說明，每張資訊卡旁還會有一個 2:3 的圖片素材資源。
評分
「評分」專區提供自訂的經典寬資訊卡，其中含有額外資訊。
播放
影片播放器設定
影片播放器上的隱藏式輔助字幕彈出式圖示。
設定
帳戶設定
帳戶頁面版面配置採用雙欄設計，左側有清單元件，右側為自訂資訊卡元件，以格狀格式排列。
「刪除帳戶」對話方塊
對話方塊設計採用對比鮮明的背景，使其從畫面的其他部分脫穎而出。對話方塊中的兩個按鈕靠左對齊，呈現簡潔有條理的外觀。
簡介
「關於」部分提供右側面板和可捲動的文字檢視畫面。
字幕設定
清單元件可用來在副標題下顯示各種設定，且會使用切換按鈕或標籤等動作。
記錄
搜尋記錄採用的版面配置會顯示先前搜尋過的查詢清單，並提供清除所有搜尋記錄的選項。
說明
「說明與支援」部分使用自訂清單元件來顯示聯絡資訊和常見問題等各種選項。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# Jet Stream\n\nEnjoy seamless access to your favorite movies, TV shows, music, and more on\nthe big screen, anytime at home.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|---------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/jet-stream-figma) | Available |\n| Design | [Inter (Google Fonts)](https://goo.gle/jet-stream-fonts) | Available |\n| Implementation | [Jetpack Compose (Github)](https://goo.gle/jet-stream-github) | Available |\n\nTheme\n-----\n\n\u003cbr /\u003e\n\n**Color theme**\nA color theme is generated using the Material Design 3 theme generator. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Typography**\nJetStream's type scale uses the Inter typeface to create a simple and clear look for TV screens. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Shape**\nA subtle radius is applied to the cards and buttons to create friendly and approachable edges. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Focus**\nA 3dp outline with an outline color is used in JetStream. \n\n\u003cbr /\u003e\n\nHome\n----\n\n\u003cbr /\u003e\n\n**Home**\nLanding page of JetStream app. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Featured carousel**\nA carousel with a card-style layout. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Content row**\nJetStream utilizes a standard card style with a 2:3 aspect ratio in a 5-column layout. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Immersive list**\nHighlight special content in the app using the Immersive list component, such as top 10 trending movies. \n\n\u003cbr /\u003e\n\nCategories\n----------\n\n\u003cbr /\u003e\n\n**Categories**\nThe Categories page displays genres in a grid format for easy navigation and access. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Category cards** \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Category details**\nA 2:3 card grid with a header is used to create the Category details page. \n\n\u003cbr /\u003e\n\nMedia\n-----\n\n\u003cbr /\u003e\n\n**Movies**\nA standard movies tab with a 16:9 featured cards on the top with content grid on the bottom. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Shows** \n\n\u003cbr /\u003e\n\nLibrary\n-------\n\n\u003cbr /\u003e\n\n**Favorites**\nThe Favorites tab includes filter chips at the top of the screen to allow for quick content searching. \n\n\u003cbr /\u003e\n\nSearch\n------\n\n\u003cbr /\u003e\n\n**Search landing**\nA search page features a search bar with suggested search queries based on recent searches. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Active search**\nWhen the user focuses on the search bar, the keyboard pops up, and the results below dynamically update as the user types. \n\n\u003cbr /\u003e\n\nEntity details\n--------------\n\n\u003cbr /\u003e\n\n**Details landing**\nThe details page presents a cinematic view with a brief plot summary and a prominent call-to-action button to watch the movie. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Cast and crew**\nThe Cast and Crew section features a row of classic cards with titles and descriptions, each accompanied by a 2:3 image asset. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Ratings**\nThe ratings section features a custom classic wide card that includes additional information. \n\n\u003cbr /\u003e\n\nPlayback\n--------\n\n\u003cbr /\u003e\n\n**Video player**\nA standard video player with best practices. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Video player settings**\nA close caption popover on the video player. \n\n\u003cbr /\u003e\n\nSettings\n--------\n\n\u003cbr /\u003e\n\n**Account settings**\nThe accounts page layout features a two-column design with a list component on the left and custom card components on the right, arranged in a grid format. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Delete account dialog**\nThe dialog box is designed with a contrasting background to make it stand out from the rest of the screen. The two buttons in the dialog are aligned to the left for a clean and organized look. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**About**\nThe About section features a right-hand panel with a scrollable text view. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Subtitle settings**\nA list component is used to display various settings under subtitle, and uses actions such as a switch or a label. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**History**\nThe search history uses a layout that displays a list of previously searched queries, along with an option to clear all the search history. \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Help**\nThe Help and Support section uses a custom list component to display various options, including contact information and FAQs. \n\n\u003cbr /\u003e"]]
