媒體應用程式
透過集合功能整理內容
你可以依據偏好儲存及分類內容。

Android 使用者會與各種媒體類型互動,包括有聲書、音樂、Podcast 和電台。重要的是,設計的應用程式能方便使用者透過智慧手錶存取媒體內容。手錶是獨一無二的介面,兼顧互動的便利性和速度是首要之務,因為使用者與手錶互動的時間遠比手機或平板電腦少。
詳情請參閱 GitHub 上的媒體工具包。
建立符合 Wear OS 設計規定的媒體應用程式。媒體應用程式通常提供瀏覽和實體頁面。
瀏覽
讓使用者尋找要播放的媒體。優先處理已下載的項目,協助使用者快速開始或繼續播放。
實體
為使用者提供特定媒體項目的詳細資訊。重要內容和關鍵動作應隨時可用,例如下載、播放或隨機播放。
減少應用程式階層,向使用者顯示媒體。採用平面式資訊架構設計,可讓使用者快速存取清單和展示縮圖。建議您使用 Wear OS 專用的自訂設計元件。詳情請參閱「方塊」和「資訊卡」的設計建議。
此外,媒體應用程式也應提供媒體控制畫面。請使用 5 個按鈕的版面配置建立媒體控制項,這樣可確保符合最少輕觸目標的需求。以下是音樂應用程式和 Podcast 應用程式的媒體控制項範例:

請根據內容類型調整顯示的媒體控制項。如果要新增超過 5 項動作,可使用三點溢位圖示,將使用者帶往其他頁面。您可以在應用程式中使用自訂圖示和字型。
控制音量
音量控制項是使用者在手錶上最常用的媒體控制項之一。媒體控制項應包含音量按鈕,方便使用者進入音量控制畫面。
大多數 Wear OS 裝置都提供側邊旋轉按鈕 (RSB) 或邊框。部分 Wear OS 裝置也提供額外的硬體按鈕,用來控制音量。請使用 RSB、邊框或額外的按鈕控制音量。只有在使用者旋轉 RSB 或邊框時才顯示指標,如範例所示。
常見用途
設計媒體應用程式時,請務必將以下重要用途列為優先考量:
讓使用者能夠從實體頁面手動下載媒體項目。
告知使用者會在哪裡下載內容、下載進度、下載所需時間和下載大小,如以下範例所示:

使用者瀏覽媒體時,顯示最近下載的媒體:

如果內容已下載完畢,請顯示用於從手錶移除下載內容的動作,清楚表明這個情況。在此情況下,您也必須顯示下載內容佔用多少手錶空間,如下圖所示:

如果來源裝置是手錶,請在使用者開始聆聽音樂之前,提示他們連接耳機。連接耳機後,即可播放媒體並開啟媒體控制項。

透過手錶串流播放音樂
透過手錶串流媒體會大幅影響 Wear OS 裝置的電池續航力。使用者選擇透過 Wear OS 裝置聆聽音樂時,可在瀏覽清單中顯示最近使用的下載內容,優先播放已下載的內容。建議您新增一個按鈕,用於將使用者帶往完整的下載內容清單,如下圖所示:

詳情請參閱 GitHub 上的媒體工具包。
自動調整式版面配置
媒體應用程式專為大螢幕進行的調整,只著重於媒體播放器體驗。所有其他元素都會在方塊、按鈕、對話方塊和清單頁面中擷取,這些頁面會說明適當的應用程式行為,以便配合更大的螢幕。

為了遵循觸控目標大小原則,請在螢幕大小小於 225 dp 的 Wear OS 裝置上顯示 2 個按鈕版面配置,在螢幕較大的裝置上顯示 3 個按鈕版面配置。下方圖片列出其他範例,例如單按鈕版面配置,以及含標誌的雙按鈕版面配置:
在大於 225 dp 的 Wear OS 裝置上,主控制項 (播放/暫停) 會從 60 dp 調整為 72 dp,使中間區段的 72 dp 高,並增加其內所有控制項的輕觸目標。這個內建的回應式行為會沿用媒體播放器範本。
在不同螢幕大小上縮放:
< 225 dp:60 dp x 60 dp
> 225 dp:72 dp x 72 dp
看板標語行為
在標題中使用 9.38% 的通用利潤,並為歌曲標題提供 6.3% 的邊界。請為捲動標題使用 8dp 漸層,並在顯示圖示時增加 8dp 間距 (使用 8dp 漸層)。在圖示下方加入所有跑馬燈捲動轉場效果 (位置會保持固定)。
標題 Atom 邊界
9.38%
歌曲名稱內部邊界
6.3%
漸層
8 dp 溢位
額外的 8dp 左邊邊框 (以容納應用程式圖示)
圖示間距
8 dp
輕觸目標
在大螢幕的 Wear OS 裝置上,中間和頁尾部分的圖示可運用額外空間增加輕觸目標大小。也就是說,除了固定控制原子之外,系統會將「填滿可用空間」屬性套用至圖示容器:
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[null,null,["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# Media apps\n\nAndroid users engage with different media types, including audiobooks, music, podcasts, and radio. It's important to design apps that allow users to conveniently access media content on their watch. The watch is a unique surface on which ease and speed of interactions is a high priority, as users spend much less time interacting with their watch than their phone or tablet.\n\nFor more information, see the [Media Toolkit](https://github.com/google/horologist#-media) on GitHub.\n\nMedia app architecture\n----------------------\n\nCreate media apps that satisfy Wear OS's design requirements. Media apps often include **Browse** and **Entity**pages. \n\n**Browse**\n\nLets users find media to play. Prioritize downloaded items to help users quickly start or resume playback. \n\n**Entity**\n\nGives users more information about a specific media item. Important context and key actions should be readily available, such as download, play, or shuffle.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nReduce your app hierarchy and expose media for the user. Design with a flat information architecture that allows users to quickly access lists and showcase thumbnails for users. Consider using custom design components for Wear OS. For more information, check out design recommendations for [Chips](https://developer.android.com/design/ui/wear/guides/components/chips) and [Cards](https://developer.android.com/design/ui/wear/guides/components/cards).\n\nMedia control screens\n---------------------\n\nMedia apps should also include media control screens. Create media controls using a 5-button layout. This is to ensure that minimum tap targets are met. The following are examples of media controls for a music app and a podcast app:\n\nAdapt the media controls that you display, depending on the type of content. Use a three-dot overflow icon to take users to an additional page if you want to include more than 5 actions. You can use custom icons and fonts for your app. \n\n### **Control the volume**\n\nVolume controls are one of the most important media controls for users on the watch. Media controls should include a volume button to enter the volume controls screen.\n\n\u003cbr /\u003e\n\n\nMost Wear OS devices have a rotating side button (RSB) or a bezel. Some Wear OS devices also have additional hardware buttons to control volume. Use the RSB, bezel, or the additional button to control the volume. Show the indicator only when the RSB or bezel is rotated, as shown in the example.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCommon use cases\n----------------\n\nWhen designing media apps, be sure that you prioritize the following important use cases:\n\n- Listen to downloaded media\n- Stream music from the watch\n\n### **Listen to downloaded media**\n\nUsers should be able to manually download media items from an entity page. \n\n\nCommunicate to the user where they are downloading content, the progress of the download, the time it takes, and the size of the download, as shown in the following example:\n\nWhen the user browses media, display the most recently downloaded media:\n\nIf content is already downloaded, make this clear by showing an action to remove the download from the watch. In this case, you must also show how much space the download is taking up on the watch, as shown in the following image:\n\nIf the source device is the watch, prompt users to [connect a headset](/training/wearables/apps/audio#prompt-the-user-to-connect-a-headset) before they begin listening to music. Once a headset is connected, play the media and open media controls.\n\n### **Stream music from the watch**\n\nStreaming media from the watch has a significant effect on a Wear OS device's battery. Prioritize downloaded content when users choose to listen on their Wear OS device by exposing recently used downloads on the browse list. Consider adding a button that takes them to a full list of downloads, as shown in the following images:\n\nFor more information, see the [Media Toolkit](https://github.com/google/horologist#-media) on GitHub.\n\nAdaptive layouts\n----------------\n\nThe larger screen adaptations for media apps are solely focused on the media player experience. All other elements are captured in [Chips](https://developer.android.com/design/ui/wear/guides/components/chips), [Buttons](https://developer.android.com/design/ui/wear/guides/components/buttons), [Dialogs](https://developer.android.com/design/ui/wear/guides/components/dialogs), and [Lists](https://developer.android.com/design/ui/wear/guides/components/lists) pages that describe proper app behavior to accommodate larger screens.\n\n### **Button configuration**\n\nTo follow touch target sizing principles, show a 2-button layout on Wear OS devices that are smaller than 225 dp, and a 3-button layout on devices with larger screens. The following images outline additional examples, such as a 1-button layout, and a 2-button layout with a logo: \n\n### **Responsive control button**\n\nMain control (Play/Pause) scales from 60 dp to 72 dp on Wear OS devices larger than 225 dp, making the middle section 72 dp high, and therefore increasing tap targets for all controls within it. This is built in responsive behavior which you will inherit from the Media Player template. \n**Scaling on different screen sizes:**\n\n\\\u003c 225 dp: 60 dp x 60 dp \n\n\\\u003e 225 dp: 72 dp x 72 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Marquee behavior**\n\nWithin the header, use a universal margin of 9.38%, with an additional **Song title** margin of 6.3%. Use 8dp gradient for scrolling titles, and an additional 8dp gap (with 8dp gradient) when an icon is present. Include any marquee scrolling transitions underneath the icon, whose position remains fixed. \n**Header atom margins** \n9.38%\n\n**Song title internal margin** \n6.3%\n\n**Gradients** \n8 dp bleed \nAdditional 8dp left padding (to accommodate app icon)\n\n**Icon gap** \n8 dp\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### **Tap targets**\n\nOn Wear OS devices with larger screens, the icons in the middle and footer sections take advantage of the extra space to increase tap target sizes. This means that, aside from a fixed control atom, the \"fill available space\" properties are applied to icon containers: \n\n**Small Wear OS screens (\\\u003c225dp)**\n\n- Recommended to have maximum 2 buttons on smaller screens with 2 buttons on the smallest screen size\n- The minimum tap target for the bottom buttons must be 48dp (H) x 48dp (W)\n- Icons should sit in the middle area of the tap target \n\n**Larger Wear OS screens / breakpoint (\\\u003e225dp)**\n\n- Recommended to have maximum 3 buttons aon larger screens with 3 buttons on the smallest of these \"larger screens\"\n- The minimum tap target for the bottom buttons must be 48dp (H) x 48dp (W)\n- Icons should sit in the middle area of the tap target (but have top/bottom alignment and internal padding to create a rounded effect)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]