Layouts Principles

Layouts Principles

Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience. Material design adopts tools from the field of print design, like baseline grids and structural templates, encouraging consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes. These layouts scale to fit any screen size, which simplifies the process of creating scalable apps.

Material design 的设计是基于印刷的基本设计原则为基础,如排版,栅格,空间,尺寸,色彩和图像,通过以上手段来增加信息的层次,赋予内容更多的意义,帮助用户集中注意力,从而提高用户的浏览体验。Material Design 的工具是从平面设计领域获取灵感,如基本网格和结构模板,通过在不同平台和不同尺寸的屏幕下,使用重复的视觉元素,结构网格和间隔间距,来保持环境的一致性。这些布局通过缩放来适应各个尺寸的屏幕,从而简化了制造可扩展性的应用程序的过程。

How paper works

In material design, the physical properties of paper are translated to the screen. The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets.

在 Material Design 中,纸的物理性质转化传递到屏幕上。应用程序的背景就类似于一张纸面,不透明。并且应用将模仿纸的特性进行调整大小,拖拽,分散和组合等操作。

The surfaces that comprise applications are referred to in this spec as material, or sheets of material.

应用表面部分的特性应该参考 material 特性。

Elements outside of applications, such as system bars, are separate from the app content beneath them, and are not treated as material.

应用之外的元素,例如那些与内容分离位于底端的系统栏,不被看作 material。

For detailed information about material, see Material Properties

关于材料的更多细节信息,请查询 Material Properties


Two sheets of material that share an entire common edge are called seams. While joined by a seam, they move together.

两块材料的相接的共同边叫做 seam,虽然他们通过一条接缝连在了一起,但他们是共同移动的。

Seams in two sheets of material




Two overlapping sheets of material, with different z-positions (or depths), form a step. They move independently of each other.

两块相互重叠的材料,在z轴上有着不同的位置,形成 step,他们是相互独立运动的。

Steps in two sheets of overlapping material

两块相互重合材料形成的 step


Floating action button

Floating action button

A floating action button is a circular sheet separate from a toolbar. It represents a single promoted action.

floating action button(悬浮操作按钮) 是一个从工具栏分离的圆形按钮。他通常意味着特殊的作用。

It can straddle a step if it relates to the content creating that step.

如果这个按钮的功能涉及到内容的创建,可以在 step 上进行跨越。

Floating action buttons straddling steps

Floating action buttons 在 steps 上进行跨越


A floating action button can straddle a seam if it relates to the content of both sheets.

如果一个 floating action button 涉及到两块内容区域的内容时,可以在 seam 上进行跨越

Do not introduce a decorative seam to provide an anchoring point for an action.

不要使用装饰性的 seam ,类似于只是用于定位操作的位置而设的 seam。

Floating action buttons straddling seams

Floating action buttons 在 seams 上进行跨越


For detailed information about floating action buttons, see Floating Action Buttons.

更多关于 floating action buttons 的细节信息,请查看连接 Floating Actiong Buttons