設計原則
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
在 Wear OS 上設計媒體體驗時,請套用以使用者控制和效率為優先考量的核心原則。
一致且可預測
確認使用者不必重新學習不同媒體 UI 的互動基本知識,即可在不同情境中控制媒體。
對齊 UI 模式,避免為常見互動建立新的 UI。
一目瞭然且重要
將重要控制項置於顯眼位置,並顯示正確狀態,協助使用者快速完成工作。
以明確的資訊層級顯示重要控制項和內容,讓使用者在手錶上控制媒體瀏覽和播放功能。
反映動態狀態,例如目前的裝置音量或已連線的輸出裝置。
快速且一致
確認使用者能否在手錶上快速控制媒體。
避免使用隱藏的手勢或互動模式,這類手勢或模式需要新手上路和空間記憶能力。在行內提供視覺提示,清楚引導使用者瞭解其他功能。
驗證涉及系統和應用程式 UI 的使用者歷程是否能順暢整合,避免使用者在不同情境中導覽時出現重複畫面。
常見設計模式
以下各節說明 Wear OS 媒體體驗的常見設計模式。
使用溢位按鈕提供一致的導覽體驗和更多功能。
錯誤做法
依賴隱藏手勢,導致使用者必須記住導覽方式。
正確做法
提供溢位按鈕,引導使用者存取其他功能。
媒體選項的存取權一致
在媒體平台和情境中,提供一致的功能存取權。
錯誤做法
媒體控制項在不同媒體介面和情境中的模式不一致,會造成使用者困惑和認知負荷。
正確做法
在媒體平台和情境中提供一致的模式。
音量控制項
使用音量控制互動鍵 (例如輕觸、音量列和硬體控制項),確保可以執行重要的音量工作。
錯誤做法
如果使用者無法透過硬體控制音量,可能會感到困惑。
正確做法
讓使用者透過硬體錶冠控制音量。
輸出裝置
使用圖示清楚向使用者顯示他們用來收聽媒體播放內容的裝置。
錯誤做法
圖示未顯示音訊來源和音量控制位置
正確做法
透過音量控制項顯示輸出裝置狀態
跨裝置擴充
請考慮跨裝置一致性,並使用現有模式,打造更可預測且一致的使用者體驗。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。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,["# Design principles\n\nDesign media experiences on Wear OS by applying core principles that prioritize\nuser control and efficiency.\n\nConsistent and predictable\n--------------------------\n\nVerify that users don't need to relearn interaction basics from one media UI to another so that users can control media across different contexts.\n\n\u003cbr /\u003e\n\nAlign UI patterns and avoid creating new UIs for common interactions.\n\n\u003cbr /\u003e\n\nGlanceable and critical\n-----------------------\n\nHelp users complete tasks quickly by elevating critical controls and showing correct status.\n\n\u003cbr /\u003e\n\nDisplay critical controls and content in a clear information hierarchy so that\nusers can control media browsing and playback on their watch.\n\nReflect the dynamic status, such as the current device volume or the connected\noutput device.\n\n\u003cbr /\u003e\n\n### Quick and consistent\n\nVerify that users can quickly control media on the wrist.\n\n\u003cbr /\u003e\n\nAvoid hidden gestures or interaction patterns that require onboarding and\nspatial memory capacity. Provide visual affordances inline that clearly guide\nusers to additional functionality.\n\nVerify user journeys that involve system and app UI integrate seamlessly to\navoid duplicative screens for users to navigate between surfaces across\ncontexts.\n\n\u003cbr /\u003e\n\nCommon design patterns\n----------------------\n\nThe following sections describe common design patterns for media experiences on\nWear OS.\n\n### Overflow button\n\nUse the overflow button to provide consistent navigation and more\nfunctionalities. \n\n\u003cbr /\u003e\n\n**Don't**\n\nRely on hidden gestures that require users to memorize the navigation.\n\n\u003cbr /\u003e\n\n**Do**\n\nProvide visible overflow button to guide users to access additional\nfunctionality.\n\n\u003cbr /\u003e\n\n### Consistent access to media options\n\nProvide consistent access to functionality across media surfaces and contexts. \n\n\u003cbr /\u003e\n\n**Don't**\n\nInconsistent patterns for media controls across media surfaces and contexts\ncause user confusion and cognitive load.\n\n\u003cbr /\u003e\n\n**Do**\n\nProvide consistent patterns across media surfaces and contexts.\n\n\u003cbr /\u003e\n\n### Volume control\n\nUse the key volume control interaction such as tap affordance, volume bar, and\nhardware controls to make sure critical volume tasks can be done. \n\n\u003cbr /\u003e\n\n**Don't**\n\nIt's confusing when users can't control volume with the hardware.\n\n\u003cbr /\u003e\n\n**Do**\n\nLet users control the volume with the hardware crown.\n\n\u003cbr /\u003e\n\n### Output device\n\nUse an icon that clearly shows users which device they're using to listen to\nmedia playback. \n\n\u003cbr /\u003e\n\n**Don't**\n\nIcon doesn't reflect where will the sound come from and where to control volume\n\n\u003cbr /\u003e\n\n**Do**\n\nReflect the output device status with the indication of volume controls\n\n\u003cbr /\u003e\n\nExtend across devices\n---------------------\n\nConsider cross-device consistency and use existing patterns for more predictable\nand consistent user experience."]]