设计原则

Material design 采用了印刷设计中的一些基本工具，比如基准网格线和结构网格线。这种布局设计可以帮助视觉元素可以平滑伸缩，以达成跨平台一致的视觉体验，简化开发流程，并最终帮助设计师制作适用于各种屏幕的应用。

布局设计规范中，鼓励设计师在跨平台设计中使用使用相同的视觉元素、结构网格和整体的边距规则，在不同尺寸的屏幕上让应用有有一致的风格和体验。结构和视觉风格的一致，可以打造出跨平台、一致的使用体验，这些能够给用户提供一种熟悉感和安全感。

在探索布局细节之前，再次思考究竟什么是material design：一种基于卡片的设计。理解卡片的表现和制作的规则是非常重要的。

卡片艺术

在material design中，应用页面上的每个像素就像排列在轻薄的卡片上。卡片有着扁平的背景颜色，能够被用做一系列的用途。一个典型的布局由多个卡片张片组成。

卡片可以容纳像素和视觉元素（比如状态栏（Phone端：译者注）或者系统栏（Pad端：译者注），它们并不属于卡片。）。要让用户感觉视觉元素是印刷在卡片上的，而卡片是位于屏幕下方的。

卡片的排版

接缝，当两个卡片共用一个边长时，便出现了接缝。两个通过接缝组合在一起的卡片通常一起移动。

台阶式的层级

当两个卡片有着不同的Z-轴（x和y分别代表屏幕所在平面上的水平坐标和垂直坐标，而z轴则是垂直于屏幕

：译者注）次序时，这两个卡片便有了前后的层级。因此通，这两个卡片彼此独立的移动。

卡片 工具栏

工具栏是专注于当前页面功能操作的小卡片。 这些操作经常被聚集起来放置在工具栏的左侧和与右侧。与导航（抽屉菜单或者是返回箭头）相关的操作通常出现在左侧，而那些应用在当前页面内容的操作放在在右侧。

在工具栏左侧和右侧的操作所弹出式的卡片，永远不允许将原卡片割裂。然而，弹出的卡片，工具栏会限制它的宽度，不会长于整个卡片的宽度。

正确：

弹出的卡片，被整体的长度所限制。

不正确：

永远不允许弹出的卡片，将原卡片割裂。

工具栏随着卡片的变化而频繁的变化，，工具栏中呈现出来的内容与卡片的内容有关。当卡片滚动到工具栏的下方时，卡片将会在某个点停止，防止卡片滑到另一侧。（可滑动的卡片到了顶点是有限制的：译者注）

工具栏也可以开始呈现出与第二个卡片接缝连接，但是拉起形成下一个动作。这种变异形式被称为瀑布流。

另外，工具栏可以和缝隙一起，随着两个卡片的滑动而滑出屏幕。

最后，第二个卡片在滑动的过程中，可以覆盖工具栏。

工具栏有标准的高度，但是也可以更高。当工具栏变高，它上面的操作可以放在顶部，也可以放在底部。

工具栏一旦被固定，可以灵活地改变它的大小。在变化的时候，它快速（有阈值与回程）的在最大值和最小值（标准值）之间变化。   

悬浮按钮

悬浮按钮指的是和工具栏分开的圆形卡片。

悬浮按钮代表着一些额外操作。如果与内容相关的话，悬停按钮可以跨越层级（有优先权限：译者注）。

悬浮操作如果与两个卡片的内容都相关的话，可以优先于接缝。

永远不要仅为了给操作一个固定的点，而引入一个接缝。

响应式设计原则

当我们建立跨设备的布局设计时，我们需要考虑固定、液态布局等一些设计策略。

下面是些应遵循的简单原则：

1 遵守人的常识

2 更大的屏幕≠更大的认知能力

3 线的长度应该被容易理解

4 考虑边角距离

5 遵循使用常识：允许空格，不要将工具栏固定。

在多层次的系统中使用这些策略，就像屏幕层级和卡片层级。

维度感

像素级的深度感可以通过X-Y轴体现。然而，通过Z轴体现界面的深度感，效果更佳。打造具有深度感的界面，而不应该墨守成规，让界面中的元素位置固定，这显得很死板。

概念模型

从更高的层次上观察，每个应用其实是存在于不同空间和容器中的。

这就意味着，一个应用中的卡片不会插入到另一个应用中的卡片序列中，否则是Z轴空间的紊乱。

这也意味着，在一个应用中，操作和选项是隔离存在的。举例来说：在一个应用中删除一个列表不会在引起另一个应用的变化。

而容器的存在，让多个应用可以同时存在于同一界面，例如浏览器中不同的标签页。

在特定应用内，大多数元素会按照Z轴，排列出主要层级和次要层级。例如：一个按钮的悬停状态是次要层级，而其按压状态是主要层级。

在应用内其他元素在Z轴的排列有着固定的优先级，这意味着它们总是出现在其他元素的上面或下面，无论这些项目'沿z轴的相对位置。例如，浮动动作按钮总是出现内容和工具栏的上面，无论这个应用正在使用多少个卡片。

系统元素，比如状态栏和系统对话框，存在于一个单独的系统空间内，高于或低于所有的应用容器。

根据上文，系统元素可以不呈现在应用中（比如夜间模式），但是如果存在系统空间元素，它们有更高的优先级。例如，系统对话框，永远出现在当前应用的最上层。

布局考量

深度感不是为了装饰而存在，而是为了功能

在布局时，需要审慎考虑元素在Z轴的优先级，而不是它的绝对位置。

深入思考你的应用，了解它的层次和各个元素重要性，帮助用户将精力集中在完成任务中。

阴影

阴影包括两层：​​顶部阴影是为了打造深度感，底部阴影是为了提升清晰度。