手机、平板和桌面设备的所有组件都与 8dp 的基准网格对齐。工具栏中的图标则与 4dp 的基准网格对齐。

列表

一个两列、左对齐的列表，且有一个 56dp 的浮动操作按钮。

详情视图

详情卡片，包含 56dp 的浮动操作按钮。

抽屉式导航

一个侧边栏的导航菜单，包含图标、头像、和左对齐的文本。其他图标右对齐。

调整大小后的窗口

元素宽度与高度的比例（称为宽高比），可以同时应用于 UI 元素和屏幕尺寸。宽高比写作：宽:高。

推荐的宽高比为：

• 16:9
• 3:2
• 4:3
• 1:1
• 3:4
• 2:3

例如：

• 1:1 的宽高比说明元素有相同的宽度和高度
• 2:3 宽高比的图片，宽度为 360dp 时，高度为 540dp

使用以下公式，根据宽高比来确定元素的宽度或高度。宽高比总是用分数表示。例如，3:2 会被视为 3/2。

宽度 = 宽高比 * 高度

高度 = 宽度 / 宽高比

为了确保信息密度和可用性之间的平衡，触摸目标的尺寸至少为 48 x 48 dp。在大多数情况下，触摸目标之间至少还有 8dp 的间隔。

把元素的宽度和高度调整为至少 48dp，以确保在任何尺寸的屏幕中，元素的物理尺寸都至少为 9mm。触摸目标的大小建议为 7-10mm。