卡片设计系统
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
了解功能块基本元素。使用功能块模板、布局和组件为您的应用设计和构建独特的功能块。
基本元素
百分比内边距
上外边距、下外边距和侧边外边距都使用百分比（而非固定的外边距）来实现按比例缩放。
设计区域
每种类型的功能块模板在主要内容区域内都有自己的规则。如需了解详情，请参阅布局指南。
底部紧凑条状标签
在功能块上启用次要操作非常重要。统一放置在底部 6.3% 的位置。
底部紧凑条状标签
在按钮内使用简短但特定于特定操作或目的地的字词。此号召性用语文字的翻译必须符合字符数限制。作为默认或后备值，您可以使用“更多”作为号召性用语文字。
建议的字符数限制 <225 dp
- 行数上限：1
- 字符数上限：8
- 建议的字符数限制：6 个字符
- 截断：否
建议的转化操作 >225 dp
- 行数上限：1
- 字符数上限：9
- 建议的字符数限制：7
- 截断：否
颜色
应用品牌主题
有多种品牌颜色可供选择。您还可以对它们进行自定义和更改，以适应应用的外观和风格。
使用 Material 主题工具和指南生成具有足够色彩对比度的颜色，将主色用作源颜色。在 Figma 中使用生成的调色板替换调色板中的 Primary、primary-variant、on-primary、surface 和 on-surface 颜色，以正确为功能块设置主题。为了实现不同图块间的一致性，所有其他颜色不能进行自定义。
其他 Material 主题构建工具：
颜色应用
始终将背景颜色设为黑色。
请勿将背景设置为全宽图片或区块颜色。
排版
Roboto 是 Wear OS 中使用的主要字体。建议将 Body 2 作为默认字体和最小字体大小，而 Display 2 则是适用于功能块的最大字体样式。
主标签
主标签文本始终距离上边缘 16.64%，内部内边距为 6.3%。颜色和字体也始终保持一致。
内部内边距
上边距：16.64%
边边距：6.3%
颜色
On-Background-Variant（灰色 300）
类型
Tiles3P (Roboto) / 按钮 - 15S 粗体
如需详细了解字体、粗细和大小，请参阅排版。
组件
有多个组件可用于构建应用的功能块。这些组件符合 Material Design 规范。
选项：按钮或切换按钮
尺寸：标准、XS、S、L
类型：填充、色调填充和图片
最多可列出 7 个选项。
文本按钮
选项：按钮或切换按钮
尺寸：标准、XS、S、L
类型：填充和色调填充
最多可列出 7 个选项。
标准条状标签
选项：图标、次级标签和文本对齐方式
最多可列出 2 个选项。
标题条状标签（仅限主要填充）
紧凑条状标签
类型：已填充和色调填充
选项：图标或无图标
用于底部按钮槽位。
进度指示器
类型：可自定义的笔触宽度
（默认大小：8 dp 和 5 dp）
选项：底部间距或完整间距
指明进度和任务完成情况。
Figma 设计套件
下载 Wear OS 设计套件中的功能块，开始使用包含内置组件、选项和建议的功能块设计布局，创建符合您需求的不同布局，同时遵循 ProtoLayout 模板中的准则。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：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"]],["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Tiles design system\n\nUnderstand tile fundamental elements. Use tile templates, layouts, and components to design and build unique tiles for your apps.\n\n**Fundamental elements**\n------------------------\n\n**Percentage padding**\n\nTop, bottom, and side margins all use percentages, rather than fixed margin amounts, to achieve proportional scaling. \n\n**Design areas**\n\nEach type of tile template has its own rules within the primary content area. Refer to the [layout guidance](/design/ui/wear/guides/surfaces/tiles-layouts) for more information. \n\n**Bottom compact chip**\n\nImportant for enabling secondary actions on the tile. Consistently placed 6.3% above the bottom.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nBottom compact chip\n-------------------\n\nWithin the button, use a word that's short but specific to a particular action or destination. The translation of this call-to-action text must accommodate the character count limits. As a default or fallback value, you can use \"More\" as the call-to-action text. \n\n**Placement**\n\n- Margin: 2.1% from the bottom\n- Internal padding: 8 dp above and below \n\n**Button spec**\n\n- Internal padding: 12 dp on both sides \n\n**Side internal padding/margins**\n\n- 16.64%\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Recommended character limit \\\u003c 225 dp**\n\n- Max lines: 1\n- Max character limit: 8\n- Recommended character limit: 6\n- Truncation: No \n**Recommended c** **haracter limits \\\u003e 225 dp**\n\n- Max lines: 1\n- Max character limit: 9\n- Recommended character limit: 7\n- Truncation: No\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nColor\n-----\n\n### **Apply your brand's theme**\n\nThere are several brand colors to choose from. They can also be customized and changed to fit your app's look and feel. \n\nUse the [Material theme tools and guidance](https://m3.material.io/styles/color/system/overview) to generate colors that have adequate color contrast levels, using your primary color as a source color Use the generated palette to replace the primary, primary-variant, on-primary, surface, and on-surface colors in your palette in Figma to theme your tile correctly. All other colors are not customizable to create consistency across tiles.\n\n**Other Material theme building tools:**\n\n- [Material Theme Builder Web](https://material-foundation.github.io/material-theme-builder/)\n- [Material Theme Builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder)\n\n### **Color application**\n\nAlways set the background color to black. \ncheck_circle\n\n### Do\n\nDon't set the background as a full bleed image or block color. \ncancel\n\n### Don't\n\nTypography\n----------\n\nRoboto is the primary font used in Wear OS. Body 2 is recommended as the default and the smallest font size, while Display 2 is the largest type style that's available for tiles.\n\n### **Primary label**\n\nPrimary label text is always 16.64% from the top edge and have an internal padding of 6.3%. Color and font also remain consistent throughout. \n\n**Internal padding**\n\nTop margins: 16.64% \nSide margin: 6.3% \n\n**Color**\n\nOn-Background-Variant (Gray 300) \n\n**Type**\n\nTiles3P (Roboto) / Button - 15S Bold\n\nFor more information about font, weight, and sizing, see [Typography](/design/ui/wear/guides/styles/typography).\n\n**Components**\n--------------\n\nThere are several components available to build your app's tiles. These components are aligned with Material Design.\n\n### Icon button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled, tonal-filled, and image\n\nList up to 7 options.\n\n### Text button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled and tonal-filled\n\nList up to 7 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Standard chip\n\nOptions: Icon, secondary label, and text alignment\n\nList up to 2 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Title chip (primary-fill only)\n\nCenter-aligned text \n\n\nCreate a single, prominent CTA.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Compact chip\n\nTypes: Filled and tonal-filled \nOptions: Icon or no icon \n\nUse in the bottom button slot.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Progress indicator\n\nTypes: Customizable stroke width \n(Default sizes: 8 dp and 5 dp) \nOptions: Gap at the bottom or full\n\nIndicate progress and task completion.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nFigma design kit\n----------------\n\n[Download the Tiles on Wear OS design kit](/design/ui/wear/guides/foundations/download#tiles-design-kit) to start using the tile design layouts with built-in components, options, and recommendations to create different layouts that suit your needs, while following the guidelines in the ProtoLayout templates."]]
