功能块的最佳实践
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
黑色背景
在黑色背景上进行设计对 Wear OS 至关重要，原因有两个：
- 电池效率：屏幕上亮起的每个像素都会消耗电量。使用黑色背景可最大限度地减少活动像素的数量，从而延长电池续航时间。
- 无缝美学：黑色背景有助于视觉上最大限度地缩小表圈，营造出延伸到设备边缘的连续表面的错觉。将界面元素包含在此空间中可进一步增强此效果。
check_circle
建议做法
始终将背景颜色设置为黑色。
cancel
不建议做法
请勿将背景设置为全宽图片或块颜色。
仅包含必要的元素
用户选择启用此功能（例如，使用 ProtoLayout Material3 PrimaryLayout）后，Wear OS 会自动显示永久性应用图标，该图标会在用户滚动浏览功能块轮播界面时自动显示。应用图标不应作为功能块的一部分进行设计和添加。
如果您为功能块使用动态主题设置，请确保提供的应用图标是单色的。请参阅 Android 产品图标指南，了解如何为您的品牌创建应用图标。
check_circle
建议做法
当用户滚动浏览功能块轮播界面时，Wear OS 可能会自动显示应用图标。无需在功能块设计中放置应用图标。
cancel
不建议做法
请勿在功能块设计中添加应用图标，因为如果应用图标同时在系统级别显示，则可能会显示两次/重叠。
隐藏应用标题以确保最小点按目标
为确保在小屏设备上有足够的空间显示互动元素，当功能块使用两行（和底部部分）时，可以隐藏应用标题。这可确保行足够高（至少 48dp）。标题可以在较大的屏幕（225dp 或更大）上重新显示。
check_circle
建议做法
在小屏设备上，系统会隐藏应用标题，以确保这两行的最小高度和点按目标为 48dp。
cancel
不建议做法
如果您未在小屏幕上隐藏应用标题，并且有两行，则组件的高度将不符合我们的无障碍标准，并且小于最小点按目标大小。
在此示例中，按钮的空间小于 48dp，因此会被剪裁。
选择一个主要用例进行重点介绍
为了确保用户知道如何使用每个功能块（无论是打开应用、启动 activity 还是了解详情），我们需要开发者在布局中添加至少一个互动元素。
check_circle
建议做法
此功能块之所以有效，是因为它提供了一小部分选项，然后用户可以查看更多选项
cancel
不建议做法
此解决方案对用户的帮助不大，因为提供的选项过多，会导致用户陷入决策瘫痪
包含（至少）一个容器
应用中的每个功能块都必须包含至少一个容器元素，并且可完全点按，以链接到应用内的相应屏幕。功能块的信息（无论是包含在容器中还是单独显示）都必须清晰传达关联的内容或可用操作。
如果使用按钮，则应遵循标准设计惯例，并明确指明其功能。
check_circle
建议做法
此功能块的运作效果良好，因为用户可以对提供的每项功能执行操作，因为这些功能具有明确的点按功能
cancel
不建议做法
此功能块的效果较差，因为它并未明确说明用户可以点按内容查看更多信息
让用户立即理解操作
手表上的体验没有足够的空间来传达其含义，因此最有效的功能块具有易于预测的互动组件。
check_circle
建议做法
一块出色的功能块会充分利用可用空间，清晰地传达每项操作的结果
cancel
不建议做法
此功能块中的操作不明确：显示专辑封面的容器会将用户引导到哪里？这与“播放”按钮有何不同？
直观地确定操作的优先级
为了帮助用户了解功能块上最重要的操作，应在视觉上优先显示互动容器。
- 在主要操作按钮上使用主色。
- 对次要操作使用辅色/第三色
check_circle
建议做法
此功能块使用色调填充样式，将填充（使用主色和辅色角色）与清晰的第三色底部按钮角色相结合
cancel
不建议做法
此功能块包含过多的填充样式按钮，并且所有这些按钮都使用了主色角色
简化为更少的容器
功能块应尽量避免使用多个交互组件来触发特定操作，而应尝试将整个布局简化为使用更少的容器。
check_circle
建议做法
此功能块使用多个容器，每个容器都充当按钮，用于执行特定操作，例如启动计时器或创建新计时器
cancel
不建议做法
这里无需使用 4 个容器，因为所有信息都将导航到同一位置
出于功能目的使用容器
为确保用户能够预料功能块中的每个组件将执行的操作，我们不建议出于装饰或结构目的使用容器，以免点按操作无效。
check_circle
建议做法
之所以能采用此解决方案，是因为功能块的唯一操作是创建流程，所有其他内容都浮动在黑色背景上
cancel
不建议做法
此功能块更令人困惑，因为用户似乎可以与所有容器进行互动
一目了然地显示图表和图形
一目了然是 Wear OS 设计的关键。由于屏幕时间有限（大约 7 秒），请以清晰易懂的格式优先显示重要信息，让用户一目了然。
请注意，手表可与手机相辅相成，让您快速访问关键详细信息。
check_circle
建议做法
一目了然地显示数字信息或统计信息，并允许用户根据需要在应用中点按查看更多内容
cancel
不建议做法
在功能块中显示详细的数字信息或统计信息
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-27。
[null,null,["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Best practices for tiles\n\nDesign on black\n---------------\n\nDesigning on a black background is crucial for Wear OS for two key reasons:\n\n- **Battery efficiency:** Each pixel illuminated on the screen consumes power. By using a black background, you minimize the number of active pixels, extending battery life.\n- **Seamless aesthetics:** A black background helps to visually minimize the watch bezel, creating the illusion of a continuous surface that extends to the edge of the device. Containing UI elements within this space further enhances this effect.\n\n\u003cbr /\u003e\n\ncheck_circle\n\n### Do this\n\nAlways set the background color to black. \ncancel\n\n### Don't do this\n\nDon't set the background as a full bleed image or block color.\n\nInclude only necessary elements\n-------------------------------\n\nWhen opt-ed in (for example, using ProtoLayout Material3 PrimaryLayout), Wear OS will automatically display the permanent app icon, which will automatically display as the user scrolls through the Tile carousel. The app icon should not be designed and added as part of the Tile.\n\nEnsure the app icon provided is monochrome if you are having dynamic theming on your tile. Check Android product icon guidelines about how to create the app icon for your brand. \ncheck_circle\n\n### Do this\n\nWear OS may display the app icon automatically as the user scrolls through the Tile carousel. There is no need to put the app icon in the Tile design. \ncancel\n\n### Don't do this\n\nDo not add the app icon in the Tile design as it may appear twice/overlapped if also displayed at the system level.\n\nHide app titles to ensure minimum tap targets\n---------------------------------------------\n\nTo ensure enough space for interactive elements on smaller screens, the app title can be hidden when a Tile uses two rows (and a bottom section). This ensures the rows are tall enough (at least 48dp). The title can reappear on larger screens (225dp+). \ncheck_circle\n\n### Do this\n\nOn small screens, the app title is hidden to ensure the two rows have a minimum height and tap target of 48dp. \ncancel\n\n### Don't do this\n\nIf you do not hide the app title on small screen, and have two rows, the height of the components will not adhere to our accessibility standards, and be less than the minimum tap target size. In this example the space for the buttons is smaller than 48dp, so it clips.\n\nChoose a single primary use-case to highlight\n---------------------------------------------\n\nTo make sure users know what to do with each Tile - whether it's opening an app, starting an activity, or learning more - we need them to include at least one interactive element in their layout. \ncheck_circle\n\n### Do this\n\nThis specific Tile is effective because it provides a small collection of options, and then the ability to see more \ncancel\n\n### Don't do this\n\nThis solution is less helpful to user because it introduces decision paralysis because of too many provided options\n\nInclude (at least) one container\n--------------------------------\n\nEach tile in the app must contain at least one container element and be fully tappable, linking to a corresponding screen within the app. The Tile's information, whether contained within the container or presented separately, must clearly communicate the linked content or available action.\n\nIf buttons are used, they should adhere to standard design conventions and provide a clear indication of their function. \ncheck_circle\n\n### Do this\n\nThis Tile works well because the user can take action on each of the provided capabilities since they have clear tap affordances \ncancel\n\n### Don't do this\n\nThis Tile is less effective because it doesn't make it clear that the user can tap on the content to see additional information\n\nMake actions instantly understandable\n-------------------------------------\n\nExperiences on the watch don't have the luxury of having ample space to communicate their meaning, so the most effective Tiles have easily predictable interactive components. \ncheck_circle\n\n### Do this\n\nA successful TIle takes full advantage the space available to clearly communicate the outcome of each action \ncancel\n\n### Don't do this\n\nThe actions in this Tile are unclear---where does the container with the album art take the user, and is that different from the \"Play\" button?\n\nVisually prioritize actions\n---------------------------\n\nTo help users understand the most important action on a Tile, interactive containers should be visually prioritized.\n\n- Use primary colors on primary action buttons.\n- Use secondary/tertiary colors on secondary actions\n\ncheck_circle\n\n### Do this\n\nThis Tile uses a combination of filled (with primary and secondary color roles) with a clear tertiary bottom button role, using the tonal-fill style \ncancel\n\n### Don't do this\n\nThis Tile contains too many uses of filled style buttons, additionally all using the primary color role\n\nSimplify into fewer containers\n------------------------------\n\nTiles should seek to refrain from using more than one interactive component to trigger a specific action, and instead attempt to simplify the overall layout into fewer containers. \ncheck_circle\n\n### Do this\n\nThis tile is using several containers and each container acts as a button to perform a specific action like starting a timer or creating a new one \ncancel\n\n### Don't do this\n\nThe use of 4 containers here is unnecessary since all the information will navigate to the same location\n\nUse containers for functional purposes\n--------------------------------------\n\nTo ensure users can anticipate what each component within a Tile will do, we don't recommend using containers for decorative or structural purposes to avoid taps that don't do anything. \ncheck_circle\n\n### Do this\n\nThis solution works because the sole action of the Tile is a creation flow, and all other content is floating on the black background \ncancel\n\n### Don't do this\n\nThis Tile is more confusing because it seems like the user would be able to interact with all the containers\n\nShow glanceable representations of graphs and charts\n----------------------------------------------------\n\nGlanceability is key for Wear OS design. With limited screen time (around 7 seconds), prioritize essential information in a clear format, that's easy to understand at a glance.\n\nRemember, the watch complements the phone experience, providing quick access to key details. \ncheck_circle\n\n### Do this\n\nShow quick, glanceable representations of numerical or statistical information and allow the user to tap to see more in an app if needed \ncancel\n\n### Don't do this\n\nShow detailed numerical or statistical information on the Tile"]]
