媒體控制選項
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
媒體控制畫面可讓使用者控制正在收聽的媒體，因此非常重要。使用 5 個按鈕的版面配置建立媒體控制項，確認符合最少輕觸目標的需求。在 225 dp 以上的大螢幕上，您可以加入重要動作的快速鍵按鈕 (例如播放佇列)，增加價值。
版面配置區段
媒體控制畫面是固定高度的畫面。這個畫面由三個直向區塊組成，各自有不同的回應式版面配置和行為。
- 頂端部分：包含媒體詳細資料
- 中間部分：媒體控制選項
- 底部部分：可設定的次要按鈕
大螢幕注意事項
媒體的大螢幕調整功能只著重於媒體控制項畫面。所有其他元素都會擷取到晶片、按鈕和對話方塊項目中，或是大型螢幕行為的清單細目中。
你可以加入重要動作的快速鍵按鈕，例如播放佇列，藉此增加價值。使用溢位選單可驗證額外功能是否仍保持一致，且無論螢幕大小為何，都能存取。在 225 dp 分界點之後，底部區段會增加一個按鈕的版位，因此在較小的螢幕上最多可顯示 2 個按鈕，在較大的螢幕上則最多可顯示 3 個按鈕。
主要控制項
主要控制項通常是播放和暫停按鈕。在 225 dp 分界點之後，控制項會從 64 dp 縮放至 80 dp，增加其中所有控制項的輕觸目標。
較小的螢幕 (小於 225 dp)
- 進度環 = 64 x 64 dp / 3 dp 筆觸
- 按鈕 = 54 x 54 dp / 26 圖示大小
大螢幕 (225 dp 以上)
- 進度環 = 80 x 80 dp / 4 dp 筆觸
- 按鈕 = 70 x 70 dp / 32 圖示大小
如要遵循觸控目標大小原則，請在 225 dp 分界點之前只顯示 2 個按鈕的版面配置，超過分界點則顯示 3 個按鈕的版面配置。
以下範例顯示不同的按鈕設定：
<img 1.2%="" 14 dp="" 18 dp="" 24 dp="" 32 dp="" 44 dp="" 60 dp="" 6 dp="" aligned.""="" alt="" and="" area="" be="" beneath="" bottom="" button="" center="" dots="" entire="" equal="" have="" height.="" high="" icon="" icon,="" main="" margin="" of="" optional="" right="" screen's="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-small.png" the="" to="" top="" wide.="" with="" />
溢位 1 按鈕版面配置，較小螢幕 (192 dp)
<img 14 dp="" 18 dp="" 24 dp="" 44 dp="" 48 dp="" 72.5 dp="" aligned.""="" alt="" and="" area="" be="" bottom="" button="" center="" entire="" high="" icon="" icon,="" main="" of="" optional="" right="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-large.png" the="" to="" top="" wide.="" with="" />
1 個按鈕的版面配置 (溢位)，大螢幕 (225 dp)
2 個按鈕的版面配置，含有溢位，適用於較小的螢幕 (192 dp)
2 個按鈕的版面配置 (溢位)，大螢幕 (225 dp)
2 個按鈕 (最多) 版面配置，含溢位，較小螢幕 (192 dp)
溢位的三按鈕版面配置，大螢幕 (225 dp)
跑馬燈行為
標題經過多次更新，可提升可讀性及整體體驗：
- 在較小螢幕上，頂端邊界為 12%；在較大螢幕上，頂端邊界為 13.2%。
- 歌曲名稱的側邊界為 17.6%
- 在較小螢幕上，藝人名稱的邊界為 12.5%；在較大螢幕上，藝人名稱的邊界為 14.5%。
- 藝人名稱會截斷，而捲動歌曲名稱時會使用 8 dp 漸層。如果顯示圖示，歌曲名稱與圖示之間會額外間隔 8 dp。(圖示不會隨著歌曲名稱捲動)。
附圖示
在較小的螢幕上顯示不捲動的短歌名 (192 dp)
在較大的螢幕 (225 dp) 上顯示不捲動的簡短歌曲名稱
在較小的螢幕 (192 dp) 上捲動 (長) 歌曲名稱 (靠左對齊)
大螢幕 (225 dp) 上捲動 (長) 歌曲名稱 (靠左對齊)
在較小的螢幕 (192 dp) 上捲動 (長) 歌曲名稱 (置中對齊)
大螢幕上捲動 (長) 歌曲名稱 (置中對齊) (225 dp)
不含圖示
在較小的螢幕上顯示不捲動的短歌名 (192 dp)
在較大的螢幕 (225 dp) 上顯示不捲動的簡短歌曲名稱
在較小的螢幕上，靠左對齊 / 不捲動 (長) 歌曲名稱 (192 dp)
在大螢幕 (225 dp) 上靠左對齊 / 不捲動 (長) 的歌曲名稱
在較小的螢幕 (192 dp) 上捲動 (長) 歌曲名稱 (置中對齊)
大螢幕上捲動 (長) 歌曲名稱 (置中對齊) (225 dp)
輕觸目標
主要控制項和底部按鈕會盡量利用可用空間，擴大輕觸目標。在 Wear OS 裝置上，輕觸目標的最小尺寸為 48 x 48 dp，且圖示和按鈕會對齊輕觸目標的中心。
主要控制項
小螢幕 (192 dp)：
- 主要控制項 = 64 x 64 dp
- 側邊控制項 = 64 x 64 dp
大螢幕 (225 dp)：
- 主要控制項 = 80 x 80 dp
- 側邊控制項 = 72.5 x 80 dp
底部控制項
較小螢幕 (192 dp)，最多 2 個按鈕：
兩個按鈕 = 68 x 60 dp
較大的螢幕 (225 dp)，最多可顯示 3 個按鈕：
所有按鈕 = 58 x 72.5 dp
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。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,["# Media controls\n\nThe media controls screen is essential to help users control the media that\nthey're listening to. Create media controls using a 5-button layout to verify\nthat minimum tap targets are met. On larger screens that are 225 dp or larger,\nyou can add value by including a shortcut button for an important action such as\nplayback queue.\n\nLayout sections\n---------------\n\nThe media controls screen is a fixed height screen. It's made up of three\nvertical sections that have different responsive layouts and behavior.\n\n1. **Top section:** Contains media details\n2. **Middle section:** Media controls\n3. **Bottom section:** Configurable secondary buttons\n\nConsiderations for larger screen\n--------------------------------\n\nThe large screen adaptations for media are solely focused on the media controls\nscreen. All other elements are captured in chip, button, and dialog items or in\nthe lists breakdown of large screen behavior.\n\n### Buttons\n\nYou can add value by including a shortcut button for an important action, such\nas playback queue. Using the overflow menu verifies that the additional\nfunctionality is still consistent and accessible no matter what's the screen\nsize. The bottom section gains an additional slot for a button after the 225 dp\nbreakpoint making the maximum number of buttons 2 on smaller screens and 3 on\nlarger screens.\n\n### Main control\n\nThe main control is usually a play and pause button. After the 225 dp\nbreakpoint, the control scales from 64dp to 80dp, which increases tap targets\nfor all controls within it.\n\nSmaller screen (smaller than 225 dp)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 64 x 64 dp / 3 dp stroke\n- **Button** = 54 x 54 dp / 26 icon size \nLarger screen (225 dp and larger)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 80 x 80 dp / 4 dp stroke\n- **Button** = 70 x 70 dp / 32 icon size\n\n\u003cbr /\u003e\n\nButton configuration\n--------------------\n\nTo follow touch target size principles, show only the 2-button layout before the\n225 dp breakpoint and 3-button layouts past it.\n\nThe following examples show different button configurations: \n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button (max) Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n3 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\nMarquee behavior\n----------------\n\nThe header has a number of updates to improve readability and general\nexperience:\n\n- A top margin of 12% on smaller screens and 13.2% on larger screens.\n- Side margins for the song title of 17.6%\n- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.\n- Artist title truncates, while 8-dp gradients are used for scrolling song titles. If an icon is present, an additional 8 dp gap separates the song title from the icon. (The icon doesn't scroll with the song title.)\n\n### With an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n### Without an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\nTap targets\n-----------\n\nMain controls and bottom buttons use the available space to maximize the tap\ntarget. The minimum tap target size is 48 x 48 dp on Wear OS devices, with\nicons and buttons aligned to the center of the tap target.\n\n### Main controls\n\n\u003cbr /\u003e\n\nSmall screen (192dp):\n\n- **Main control** = 64 x 64 dp\n- **Side controls** = 64 x 64 dp \n\nLarge screen (225dp):\n\n- **Main control** = 80 x 80 dp\n- **Side controls** = 72.5 x 80 dp\n\n### Bottom controls\n\n\u003cbr /\u003e\n\nSmaller screens (192 dp) with a maximum of 2 buttons:\n\n**Both buttons** = 68 x 60 dp\n\n\u003cbr /\u003e\n\nLarger screens (225 dp) with a maximum of 3 buttons:\n\n**All buttons** = 58 x 72.5 dp\n\n\u003cbr /\u003e"]]
