一、了解布局
MD的布局方面，通过使用统一的元素和间距来鼓励跨平台，环境和屏幕尺寸的一致性。
1. 原则
可预测：使用直观且可预测的布局以及一致的UI区域和空间组织。
一致性：布局在使用网格，关键线和填充时应保持一致。
反应灵敏：布局是自适应的，它们对用户，设备和屏幕元素的输入做出反应。
2. MD的测量
MD布局在视觉上是平衡的。大多数测量都与应用的8dp网格对齐，该网格既对齐间距又对齐整体布局。较小的组件（例如图标和类型）可以与4dp网格对齐。
3. 响应式布局网络
MD响应式布局网格是组件和元素放置的总体指南。自适应布局网格可适应屏幕尺寸和方向，从而确保各个布局之间的一致性。
二、像素密度
1. 像素密度
适合英寸的像素数是像素密度。
高密度屏幕每英寸的像素多于低密度屏幕。结果，相同像素尺寸的UI元素在低密度屏幕上显得较大，而在高密度屏幕上则较小。
2. 计算像素密度
屏幕密度=屏幕宽度（或高度）（以像素为单位）/屏幕宽度（或高度）（以英寸为单位）
3. 密度独立
密度独立性是指UI元素在具有不同密度的屏幕上的均匀显示。
密度无关像素：与密度无关的像素，记为dp（读作“ dip”），是可缩放的灵活单位，可在任何屏幕上显示均一的尺寸。它们提供了一种灵活的方式来适应跨平台的设计。材质UI使用与密度无关的像素来在具有不同密度的屏幕上一致地显示元素。
三、响应式布局网络
1. 列、装订线和边距
列、装订线和边距是MD页面设计的三要素
1）列
内容放置在列的屏幕区域中。
列宽是使用百分比而不是固定值定义的，以允许内容灵活地适应任何屏幕尺寸。网格中显示的列数由查看屏幕的断点范围（预定屏幕大小的范围）决定，无论该断点是手机，平板电脑还是其他尺寸的断点。
2）装订线
装订线是列之间的空间，帮助分离内容。
装订线宽度是每个断点范围的固定值。为了更好地适应屏幕，装订线宽度可以在不同的断点处改变。较宽的装订线更适合较大的屏幕，因为它们在列之间创建了更多的空白。
3）边距
边界是内容与屏幕左右边缘之间的空间。
边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕，页边距宽度可以在不同的断点处改变。较大的页边距更适合于较大的屏幕，因为它们会在内容周围产生更多的空白。
2. 网格定制
1）自定义装订线
可以调整装订线以在布局的各列之间创建更多或更少的空间。
不要使装订线太大，例如与列相同的宽度。太多的空间不会为内容留出足够的空间，并会阻止内容显得统一。
2）自定义边距
可以调整页边距以在内容和屏幕边缘之间创建更多或更少的空间。
边距不要太大，以至于没有足够的内容空间。
3. 断点
断点是具有特定布局要求的预定屏幕尺寸的范围。在给定的断点范围内，布局将进行调整以适合屏幕尺寸和方向。
MD提供不同的断点范围下的列、装订线、边距的建议数值。
4. 网格行为
流体网格：使用可缩放和调整内容大小的列。流体网格的布局可以使用断点来确定布局是否需要进行更改。
固定网格：使用固定大小的列，并具有可变的边距，以使内容在每个断点范围内保持不变。固定网格的布局只能在指定的断点处更改。
5. UI区域
布局由几个UI区域组成，例如侧面导航，内容区域和应用栏。这些区域可以显示动作，内容或导航目标。UI区域在设备之间应保持一致，同时适应不同屏幕尺寸的不同断点。为了增加设备之间的熟悉度，为桌面设计的UI元素应以与移动UI一致的方式进行组织。
6. Permanent UI 区域
Permanent UI区域是可以在响应网格外部显示的区域，例如导航抽屉。这些区域不能折叠。
Persistent UI区域是可以在命令后随时显示的区域，或者可以保持可见状态。它们可以打开或关闭，以显示或消失。当它们出现时，它们会同时压缩内容和网格。
Temporary UI区域会临时显示，当它们出现时，它们不会影响响应网格。可见时，可以通过点按其区域内或区域外的任何空间来隐藏它们。
7. 白框
白框是结构化的布局，为布局，分层和阴影提供了一致的方法。它们是一个起点，旨在进行修改以满足产品的特定需求。
四、间距方法
间距方法使用基线网格，关键线，填充和增量间距来调整比率，容器和触摸目标。
1. 基线网格
8dp网格：所有组件均与手机、平板、台式机的8dp正方形基准网格对齐。
4dp网格：组件中的图标和某些元素可以于4dp网格对齐。
4dp基线：文字与4dp的基线对齐。
2. 间距
间距方法比响应式布局网格更精细，间距方法是围绕如何在布局和组件中放置元素的一组规则。包含填充、外形尺寸、对准三方面。
1）填充
UI元素之间的空间。以8dp或4dp的增量进行测量。填充可以在垂直和水平方向上进行测量，不需要跨越布局的整个高度。
2）外型尺寸
尺寸是值组成元素的宽度和高度。某些组件（例如，应用程序栏或列表）仅概述元素的高度。这些元素的高度应与8dp网格对齐。未指定其宽度，因为它与视口宽度有关。
3）对准
3. 容器和比率
1）容器
容器是用来表示封闭区域的形状。容器可以保存UI元素，例如图像，图标或表面。
容器可以是刚性的，并限制其中的元素的大小或裁剪。或者，它们可以灵活并且可以扩展以支持其拥有的内容的大小。
2）比率
长宽比是元素的宽度与其高度的比例。长宽比写为width：height。
要保持布局的一致性，请对图像，表面和屏幕尺寸等元素使用一致的长宽比。
建议在您的UI中使用以下纵横比：16：9; 3：2; 4：3; 1：1; 3：4; 2：3
弹性比率：容器的宽度由屏幕布局决定，并逐渐增加以填充可用的最大空间；容器高度取决于容器中图像的高度。
4. 接触目标
触摸目标适用于同时接收触摸输入和非触摸输入的任何设备。为了平衡信息密度和可用性，触摸目标应至少为48 x 48 dp，目标之间的间距至少为8dp。
五、组件行为
1. 组件宽度
组件宽度可以固定也可以变化的。
固定：当元素具有固定宽度时，即使在屏幕尺寸变化时，其宽度也保持不变。
变化：当元素具有流体宽度时，其宽度会随着屏幕尺寸的变化而扩展和收缩。
推动：当布局和屏幕尺寸改变时，可以将组件从其原始位置推入。组件宽度保持不变，但其位置水平变化，向左或向右移动。发生这种情况时，如果将其推离屏幕，可能会被屏幕边缘部分遮挡。
覆盖：当UI更改时，组件可以被其他遮盖它的元素覆盖。覆盖组件时，其宽度和位置保持不变。
2. 响应模式
1）显示
当在指定的断点处有更多空间可用时，可以显示较小屏幕所隐藏的部分UI。
2）转变
组件可以在指定的断点处从一种格式转换为另一种格式。
3）划分
当有更多屏幕空间可用时，具有多层的UI可以一次显示所有这些层。UI元素在此新可用空间中划分。
4）重排
5）扩大
UI可以扩展到更多空间。
6）位置
UI组件的位置可以更改为更合适的位置。
六、适用密度
1. 用法
可扫描：密集的UI提供高了查看和导航大量内容的便利性
优先：密集的UI通过减少操作之间的空间来帮助用户集中精力
可见：密度的增加允许更多的内容和动作适合单个屏幕
1）何时应用密度
用户与组件的交互方式应确定是否增加UI的密度。当用户查看大量信息并与之交互时，高密度组件可以改善体验。
通过在屏幕上提供更多内容，增加了列表，表格和长格式的密度，使信息更易于扫描，查看和比较。
2）何时不应用密度
重点任务不使用
警报和消息传递不使用
2. 布局
网格和组件密度：保持组件密度和网格布局之间的平衡。要创建可扫描的内容组，请使用密度较低的网格布局与高密度组件结合使用。组件越密集，边距和装订线宽度应越大。将密集的布局网格与密集的组件结合在一起，会使用户难以区分内容组。
3. 组件
保持组件密度和网格布局之间的平衡。
要创建可扫描的内容组，请使用密度较低的网格布局与高密度组件结合使用。组件越密集，边距和装订线宽度应越大。将密集的布局网格与密集的组件结合在一起，会使用户难以区分内容组。
4. 辅助功能
触摸目标适用于同时接收触摸输入和非触摸输入的任何设备。为了平衡信息密度和可用性，默认密度组件的触摸目标应至少为48 x 48 dp，每个目标之间的间距至少为8dp。注意：在iOS上，建议使用44 x 44 dp触摸目标。
5. 版式
行高是文本行之间的间隔。线高可以用作在印刷版式中创建密度的一种方式。
