Material Design的布局设计旨在通过过使用相同的视觉元素，结构网格，和通用的行距规则，让应用不同平台与屏幕尺寸上拥有一致的外观和感觉，提供高度的熟悉感和舒适性的用户体验。

一 应用布局单位

1.1 像素密度

像素密度（即dpi）指的是每英寸的像素点数。

像素密度的计算公式如下所示：

dpi = 屏幕宽度（或高度）像素 / 屏幕宽度（或高度）英寸

高密度的屏幕比低密度的屏幕更像素更高。因此用户界面元素（如按钮）在低密度屏幕上显示较大而在高密度屏幕上显示较小。

高密度屏幕

低密度屏幕

1.2 密度独立像素

密度独立像素（即dp）是一种基于屏幕密度的抽象单位。

密度独立像素可以在屏幕上用不同的密度来显示统一的元素。

在每英寸160像素点的显示器上：1 dp = 1 px，dp的计算公式如下所示：

dp = (宽度像素160)/ dpi

密度独立像素经常可以用来处理图像的缩放，通过这=合适的比例，图像可以缩放到不同的屏幕分辨率的屏幕上并且看起来效果都一样，相关比例如下所示：

举例

在320 dpi的分辨率一个200×200像素的图标为100 x 100dp

1.3 可扩展像素

可扩展像素（即sp）主要用来处理字体大小，可以根据用户字体大小首选项进行缩放。

讲完了布局中常见的尺寸单位，我们来看几个常见的组件尺寸。

最小的触摸目标尺寸是 48dp

在布局中，当为图标（24dp）或者头像（40dp）设置边距时。触摸目标不能重叠。

二 应用布局边距

关于边框与间距这一块，Google官方给出了手机、平台和电视等各大平台的布局模板，这些模板详细地描述了边框与间距如何应用于屏幕边界和元素。

Android手机设备布局模板

Android平板设备布局模板

Android桌面应用布局模板

手机作为最常用的移动设备，我们先来看几个关于手机布局边框与间距的处理的例子，更多内容可以参见上方列举的几个模板文件。

举例1

该布局演示图标、头像和一个 2 行文本的列表如何左对齐，以及一个 56dp 的浮动动作按钮和文本如何右对齐。

水平边距如下所示：

左右各有 16dp 的垂直边框。带有图标或者头像的内容有72dp的左边距。

垂直边距如下所示：

• ① 24dp
• ② 56dp
• ③ 48dp
• ④ 72dp

举例2

该布局演示图标、头像、2 行文本列表、子标题和40dp的浮动动作按钮如何左对齐。小图标右对齐。

水平边距如下所示：

图标（大小图标）有16dp的左右垂直边框。带有图标或者头像的内容有 72dp 的左边距。

垂直边距如下所示：

• ① 24dp
• ② 56dp
• ③ 72dp
• ④ 48dp
• ⑤ 8dp

举例3

该布局演示图标如何左对齐，以及图标和一个56dp的浮动动作按钮如何右对齐。

水平边距如下所示：

图标有16dp的左垂直边框。带有图标或头像的内容有72dp的左边距，32dp 的右边距（考虑到 56dp 的圆形浮动动作按钮）。这样圆形浮动动作按钮下的图标也对齐了。

垂直边距如下所示：

• ① 24dp
• ② 56dp
• ③ 8dp
• ④ 72dp

举例3

该布局演示图标、头像和文本如何左对齐，浮动动作按钮、图标和文本如何右对齐。

水平边距如下所示：

图标有16dp的左右垂直边框。带有图标或头像的内容区域左对齐，距左边界72dp。

垂直边距如下所示：

• ① 24dp
• ② 56dp
• ③ 48dp
• ④ 8dp

举例4

该布局演示了侧边导航菜单的宽度，以及图标、头像和文本如何左对齐，小图标如何右对齐。

水平间距如下所示：

图标距侧边导航菜单的左右边界分别有 16dp 的垂直边框。带有图标或者头像的内容距侧边导航菜单的左边界 72dp。侧边导航菜单的宽度等于屏幕的宽度减去动作条的高度，即在本例中距屏幕右侧 56dp 的宽。

垂直间距如下所示：

• ① 48dp
• ③ 8dp
• ③ 56dp

2.1 比率边框

比率边框应用于移动设备屏幕的宽度和移动设备、平板设备以及桌面应用程序中 UI 元素的宽度。

2.1.1 屏幕的宽度

举例

2.1.2 内容的宽度

举例

2.2 增量边框

增量边框定义了一个增量，比如动作条的高度，然后使用几倍于这个增量的数字来决定应用中其它元素的尺寸和位置。

增量边框大多数应用于桌面应用程序，有些也适用于平板设备，很少应用在移动设备中。增量的数量会根据窗口的尺寸来改变。

三 布局结构

3.1 布局结构的关键要素

3.1.1 应用的启动页面

应用的启动页面是我们的应用为用户呈现的第一个内容，所谓先入为主，第一印象很重要，在设计启动页面的时候，我们应该去考虑用户希望从我们的应用中看到什么，从而为用户做出积极的引导。

3.1.2 应用的呈现内容

内容是应用的核心，我们应该避免应用内容只是简单的屏幕堆砌，让内容成为启动页面的中心，让用户能够第一时间被我应用的核心内容所吸引。

3.1.3 应用的操作体验

应用核心的操作可以通过导航实现，屏幕上方是摆放导航的最佳位置，另外，某些重要的有特色的操作可以通过悬浮按钮实现以凸显其重要性。

在设计应用操作时有哪些常用的设计手法呢？

内嵌导航适合于导航模型非常简单的情况，我们可以把应用的其他内容直接线性地放置到相应的导航栏选项上。

内嵌导航的适用情景如下所示：

• 应​​用有一个风格强烈，鲜明的主要视图，而且没有或者很少可以替代主视图的视图。
• 在主要视图内，用户可以便捷地执行大部分常用的任务。
• 潜在用户并非经常使用你的应用，他们更喜欢直接的访问路径。

标签栏导航适用于只拥有少量功能区域，并且每个功能区域都是同等重要的情况。

标签栏导航的适用情景如下所示：

• 应用的用户将会频繁切换这些视图。
• 应用有数量有限的顶层视图。
• 应用需要用户高度关注每一个栏标的视图。

抽屉导航可以同时显示大量导航目标，它适用于管理复杂的操作设计。

抽屉导航的适用情景如下所示：

• 应​​用拥有大量的顶层视图。
• 没有相互联系的视图之间可以实现快速的交叉导航。
• 应用有特别的深度导航的分支，并且希望可快速回到应用的顶层视图。
• 想减少应用中的不经常访问内容的可见性和用户的察觉性。

3.2 布局结构的实践方式

3.2.1 界面划分

定义基本的水平或垂直的分割线

不要把界面分割成太多的区域，产生L的形状（L shapes)。 相反，利用空白的地方勾勒出二级空间。

使用卡片和浮动操作按钮越界

当需要特定操作，又或者信息群需要更好的区分，而空白地方，或者分割线不能提供这种区分，应该用卡片来组织起信息。

3.2.1 工具栏设计

工具栏具有多功能性，它可以被用在应用很多地方。

下面举例说明一下工具栏可以被用在哪些地方。

举例1

全宽度，默认高度的工具栏。

举例2

全宽度，工具栏拉高，标题栏下移。

举例3

灵活的工具栏和卡片工具栏

举例4

浮动工具栏

举例5

分离的工具栏和调色板

举例6

放置于架（shelf)上并且附在软键盘或者其他底部元素顶部的底部工具栏

举例7

底部工具栏架

3.2.2 应用栏设计

应用栏是用来显示应用的标识，应用导航，内容搜索以及其他操作。

举例

下面的图标都是应用本身相关的操作。菜单图标（Menu Icon）打开的是一个溢出菜单，里面包括的菜单内容有帮助，设定和反馈等。

关于应用栏的风格设计

这种应用栏通常可以设计成四种风格，如下所示：

浅色

深色

彩色

透明

关于应用栏的尺寸设计

应用栏的默认高度如下所示：

• 手机横屏（Landscape）: 48 dp
• 手机竖屏（Portrait）: 56 dp
• 平板电脑/电脑桌面（Tablet/Desktop）: 64 dp
• 对于拉高了的选单，它的高度等于默认高度加上内容高度。

竖屏尺寸

横屏尺寸

3.2.4 菜单设计

菜单类似于临时出现的一张纸，这张纸经常覆盖到应用栏（app bar)，而不是表现的像应用栏的拓展。

3.2.5 侧面导航栏设计

导航抽屉（nav drawer）可以被固定一直显示或者临时的浮动显示。

导航抽屉分为左边导航抽屉和右边导航抽屉两种：

• 左边的导航栏的内容应该是主要是导航或者识别类型的。
• 右边导航栏的内容应该主要是更深层次的信息，该页主要内容的次级信息。

临时的导航抽屉可以覆盖内容画布。而固定的导航抽屉应该放置在内容画布的侧边或者下方。

侧面导航栏的尺寸设计

默认尺寸如下所示：

• 手机：侧边导航栏宽度 = 屏幕宽度 - 应用栏高度
• 电脑桌面：左边选栏最大宽度为400 dp, 右侧则按内容而定。
• 电脑桌面或平板电脑：固定的，宽度与列对齐。
• 浮动的最大宽度：304 dp

举例

手机设备

左边选栏的桌面电脑

右边选栏的桌面电脑