布局 原则

原则

Material Design 指南通过源自印刷领域的设计元素 – 例如排版、网格、空白、缩放、颜色,和图像 – 来建立层次结构和传达所要表达的含义,并专注于带给用户沉浸式的体验。Material Design 采用来自印刷设计领域的工具,如基准网格和结构模版,通过重复视觉元素,结构网格以及跨平台和屏幕尺寸的间距,促进不同环境下设计的一致性。这些布局可通过缩放来适应任何屏幕大小,这简化了创建可扩展应用的过程。

纸片工作原理 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

在 Material Design 中,纸片的物理特性被转移到了屏幕中。应用的背景类似于一张平坦、不透明质地的纸片,应用的行为也模仿纸片,可以改变大小、拖动及把多个纸片粘合在一起。

在本规范中,构成应用的表面被成为材料或材料片。

应用之外的元素,例如系统状态栏,和应用内容是分开的,不会被视为材料。

更多关于材料的细节,详见材料属性

接缝

两片材料的公共边缘被成为接缝。当通过接缝连接时,它们会一起移动。

Material Design 中的接缝效果

两片材料的接缝

阶层

两个 Z 轴位置不同的材料片重叠时,会形成阶层。这两个材料会相互独立移动。

Material Design 中的重叠材料阶层

两片重叠的材料构成的阶层

浮动操作按钮 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

浮动操作按钮

浮动操作按钮是和工具栏分离的圆形纸片。它表示单个被提升的操作。

如果它和阶层中的内容创建有关,则可以跨越一个阶层。

Material Design 中的跨阶层浮动操作按钮

跨阶层的浮动操作按钮


如果浮动操作按钮与两个材料的内容都有关,则可以跨越接缝。

不要引入一个装饰用的接缝,来为浮动操作按钮提供锚点。

Material Design 中的跨接缝浮动操作按钮

跨接缝的浮动操作按钮


更多有关浮动操作按钮的信息,详见浮动操作按钮