總覽
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Android 使用者會與各種媒體類型互動，例如音樂、Podcast、有聲書和電台。設計的應用程式能讓使用者透過智慧手錶快速存取媒體。手錶的互動便利性和速度是首要之務，因為使用者與手錶互動的時間遠比手機或平板電腦少。
媒體應用程式架構
媒體應用程式有特定限制和需求，因此請著重於主要用途，例如瀏覽可用的媒體，或查看特定媒體實體的詳細資料。
瀏覽
優先顯示已下載的項目，協助使用者尋找媒體和內容。
實體頁面
為使用者提供媒體項目所含內容的詳細資訊，提供重要內容和動作 (例如手動下載、播放或隨機播放)。
減少應用程式階層，向使用者顯示媒體。採用平面式資訊架構設計，可讓使用者快速存取清單和展示縮圖。建議您使用 Wear OS 專用的自訂設計元件。
媒體控制畫面
媒體應用程式包含媒體控制畫面。請使用 5 個按鈕的版面配置建立媒體控制項，5 鍵配置有助於符合最少輕觸目標。以下是音樂應用程式和 Podcast/有聲書應用程式的媒體控制項範例。
音樂
Podcast 或有聲書
如果要提供超過 5 個動作，可使用三點溢位圖示，將使用者帶往其他頁面。請根據內容類型調整顯示的媒體控制項。您可以在應用程式中使用自訂圖示和字型。
音樂
Podcast 或有聲書
控制音量
音量控制是手錶上重要的媒體控制項，媒體控制選項包括裝置音量鍵，可進入音量控制畫面，並指出使用的輸出裝置，例如耳機。
多數 Wear OS 裝置都提供側邊旋轉按鈕 (RSB) 或邊框。某些 Wear 裝置也可能提供額外的硬體按鈕，用來控制音量。請使用 RSB、邊框或額外的按鈕控制音量。在媒體控制項畫面上，只有在使用者旋轉 RSB 或邊框時才顯示音量指標，如以下範例所示。
只有在使用者旋轉 RSB 或邊框時才顯示指標
步進器元件：音量和輸出控制項
管理播放佇列
播放佇列分為兩種類型：
- 播放佇列，但不含先前的歌曲。
- 播放佇列，內含先前的歌曲。
如要協助使用者有效與播放佇列互動，請使用下列範例所示的一致模式。
播放佇列
不含先前的歌曲
播放佇列
和先前的歌曲
螢幕長亮模式 (AOD)
開發人員也可以建立自訂微光模式版面配置。這項功能支援持續性體驗，例如媒體控制項。由於這些版面配置會在畫面上停留很長一段時間，因此請限制亮起的像素數量。
媒體播放器
Ambiactive AOD 模式 (由開發人員處理)
為確保內容省電，同時滿足使用者需求，請移除媒體工作階段中經常更新的進度指標。
如果進度指標需要每分鐘更新數次，才能為使用者提供價值，請移除該指標。舉例來說，如果音軌長度只有 3 分鐘，進度環的更新頻率太低，無法在永遠開啟模式中提供實用資訊。
處理載入狀態
為減少感知延遲，系統支援預留位置和載入狀態，提示內容載入後顯示的位置。這項動畫處理會疊加在載入中的內容上，並遵循載入中的版面配置和元件結構。載入和已載入狀態之間的轉換會建立自然轉換。
載入或預留位置狀態
已載入狀態
載入或預留位置狀態
已載入狀態
設計資訊方塊
媒體動態磚應顯示可選取的媒體，並提供有效方法，讓使用者快速存取應用程式體驗。圖塊上媒體資料更新的裝置延遲時間最長可達 20 秒。因此，請避免使用控制應用程式內功能的直接動作按鈕，例如暫停或播放。
瞭解詳情
可選取的媒體選項
媒體播放中
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-26 (世界標準時間)。
[[["容易理解","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-26 (世界標準時間)。"],[],[],null,["# Overview\n\nAndroid users engage with different media types, such as music, podcasts,\naudiobooks, and radio. Design apps that allow users to quickly access media on\ntheir watch. On the watch, prioritize ease and speed of interactions, because\nusers spend much less time interacting with their watch than their phone or\ntablet.\n\nMedia app architecture\n----------------------\n\nMedia apps have specific constraints and requirements, so focus on key use cases\nlike browsing available media or viewing details of a specific media entity. \n\n\u003cbr /\u003e\n\n**Browse**\n\nHelps users find media and content by prioritizing downloaded items.\n\n\u003cbr /\u003e\n\n**Entity page**\n\nGive users more information about what a media item contains. Provide important\ncontext and actions---such as manual download, play, or shuffle---readily.\n\n\u003cbr /\u003e\n\nReduce your app hierarchy and expose media for the user. Design with a flat\ninformation architecture that allows users to quickly access lists and showcase\nthumbnails. Consider using custom design components for Wear OS.\n\nMedia controls screen\n---------------------\n\nMedia apps include media controls screens. Create media controls using a\n5-button layout. The 5-button layout helps meet minimum tap targets. The\nfollowing are examples of media controls for a music app and a podcast or\naudiobook app. \n**Music** \n**Podcasts or audiobooks**\n\n\u003cbr /\u003e\n\nIf you include more than 5 actions, use a three-dot overflow icon to take users\nto an additional page. Adapt the media controls that you display, depending on\nthe type of content. You can use custom icons and fonts for your app. \n**Music** \n**Podcasts or audiobooks**\n\n\u003cbr /\u003e\n\nControl the volume\n------------------\n\nVolume controls are a key media control for users on the watch. Media controls\ninclude a device volume button to enter the volume controls screen and indicate\nthe output device in use, such as headphones.\n\nMost Wear OS devices have a rotating side button (RSB) or a bezel. Certain Wear\ndevices can also have additional hardware buttons to control volume. Use the\nRSB, bezel, or the additional button to control the volume. On the media\ncontrols screen, show the volume indicator only when the RSB or bezel is\nrotated, as shown in the example. \n\n\u003cbr /\u003e\n\nShow the indicator only when the RSB or bezel is rotated\n\n\u003cbr /\u003e\n\nStepper component: Volume and output controls\n\n\u003cbr /\u003e\n\nManage playback queue\n---------------------\n\nPlayback queues have two types:\n\n- Playback queue without previous songs.\n- Playback queue with previous songs.\n\nTo help users interact effectively with the playback queue, use the consistent\npattern shown in the following example. \nPlayback queue **without** previous songs \nPlayback queue **with** previous songs\n\n\u003cbr /\u003e\n\nAlways on Display (AOD)\n-----------------------\n\nDevelopers can also create a custom ambient mode layout. This supports ongoing\nexperiences, such as media controls. Because these layouts remain on the screen\nfor long time periods, limit the number of pixels that are illuminated. \n**Media player** \n**Ambiactive AOD mode** (handled by developers)\n\n\u003cbr /\u003e\n\nTo make content power efficient while also meeting user needs, remove progress\nindicators that update frequently for media sessions.\n\nIf a progress indicator needs to update several times a minute to provide value\nto the user, remove it. For example, a progress ring for a short 3-minute audio\ntrack would update too infrequently to be helpful in always-on mode.\n\nHandle loading states\n---------------------\n\nTo reduce perceived latency, the system supports placeholder and loading states\nthat hint at where content appears once it loads. This animated treatment\noverlays the loading content and follows the same structure of the layout and\ncomponents that are loading. The transition between loading and loaded states\ncreates a natural transition. \n**Loading or Placeholder state** \n**Loaded state**\n\n\u003cbr /\u003e\n\n**Loading or Placeholder state** \n**Loaded state**\n\n\u003cbr /\u003e\n\nDesign tiles\n------------\n\nFor media tiles, show selectable media and include an effective way to quickly\naccess the app experience. Device latency for media data updates on tiles can\nlast up to 20 seconds. Therefore, avoid direct action buttons, such as pause\nor play, that control in-app functions.\n\n[Learn more](/design/ui/wear/guides/surfaces/tiles) \n**Selectable media options** \n**Media playing**\n\n\u003cbr /\u003e"]]
