最近工作中需要进行大量关于设计规范方面的研究，在仔细学习Material Design规范之后，消除了一些过去自己对于界面与动效设计规范方面的知识盲点，觉得还是有所收获。研究的过程中由于个人英文水平的限制和一些网站、文章翻译的准确度问题，增加了学习的时间成本，所以想要重新翻译并融入自己的理解和结构梳理，一则输出倒闭输入，加强记忆；二则希望可以提供给大家一份更容易看懂的Material Design规范，方便大家学习。

1. Material Design(以下简称MD)概述

1.1 概念

MD是将优秀设计的经典原则与科学技术创新相结合而创造的视觉语言。

1.2 目标

• 创造：创造一种由优秀设计原则与科学技术创新相结合的视觉语言。

• 统一：开发一个能在不同平台、不同设备上提供一致的体验的底层系统，并同时支持触摸、语音、鼠标、键盘等多种输入方式。

• 定制：扩展MD的视觉语言，为创新和品牌表达提供灵活的基础。

1.3 原则

•  材料是隐喻：MD受到物理世界及其质地的启发，包括它们如何反射光和投射阴影。材料重新构想了纸张和墨水的介质。

•  鲜明、图形、有意义：MD以印刷设计方法（版式，网格，空间，比例，颜色和图像）为指导，以创建层次结构、含义和重点，使用户沉浸在体验中。

•  动效表达含义：动效通过微妙的反馈和连贯的过渡来吸引注意力并保持连续性。随着交互发生新的转换，出现在屏幕上的元素会转换和重组场景。（动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。）

•  灵活的基础：MD系统支持品牌表达，它与一个自定义代码库结合在一起，使得组件，插件和设计元素都得以灵活实现。

•  跨平台：MD通过共享组件实现在Android，iOS，Flutter和Web等不同平台上保持相同的UI。

2. 环境

在物理世界中，对象可以堆叠或附着在一起，但不能互相穿过。他们投下阴影并反射光。MD的用户界面显示在使用光、材料和投射阴影表示三维（3D）空间的环境中。

2.1 材料(surface)

材料(多数翻译直译为“表面”，个人感觉不是很合适，结合官方网站中“Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).”，这里统称为“材料”)是不透明的白色，厚度为1dp，并投射阴影，MD中的所有UI元素均来自对该材料的修改。

材料的基本属性：

•  材料具有无限的分辨率；

△材料具有无限的分辨率。

•  内容以任何形状和颜色显示在材料上。内容不会增加材料的厚度。在承载内容时，内容不会成为单独的层；

△材料可以显示任何形状和颜色。内容的行为可以独立于材料，但不可超出材料的范围。

•  材料表面不能互相穿过。例如，更改海拔时，一个材料无法穿过另一材料；

△错误示范：材料不能互相穿过。

•  可垂直、水平或双向拉伸和改变形状；

△材料可以改变形状。

2.2 海拔(Elevation)

海拔是指沿z轴的两个材料之间的相对距离，通常以阴影或动效的方式强调海拔。

阴影表现海拔

阴影的大小和模糊程度都可以表示两个材料之间的距离远近。例如，阴影较小且较锐利的材料表示该材料非常靠近其后面的材料。更大，更柔和的阴影表示更高的海拔。

△更大，更柔和的阴影表示更高的海拔。

动效表现海拔

可以使用以下动效方式强调海拔：

•  阴影变化：阴影的大小和模糊程度变化可以强调海拔的变化。

△阴影变大，表示卡片正在上升。

•  重叠：一个材料可以部分或完全重叠在另一个之上，表现出哪个材料在前面。

△一个材料通过扩展重叠在附近的材料之上，可以强调它的海拔。

•  推开：处于同一海拔的材料可以通过在其路径上推开其他项目来强调海拔；

△选定的列表项展开，将周围的项目推开。

•  缩放：缩放材料的大小可以强调海拔的变化。

△前景和背景材料按比例缩放以强调海拔变化。

•  视差：不同海拔的多个材料以不同的速度移动会产生纵深感，并将焦点放在前景内容上。

△前景材料的移动速度快于背景图像，从而产生深度感。

•  组合运动技术：通过组合运动技术可以强调海拔。

△视差运动和缩放会强调哪些材料在其他材料的前面。

2.3 光影(Light and shadows)

在MD环境中，虚拟灯照亮了UI。关键灯光会创建更锐利的方向性阴影，称为关键阴影。环境光从各个角度出现，以创建扩散的柔和阴影，称为环境阴影。

△关键灯光投射的阴影。

△环境光投射的阴影。

△关键灯光和环境光的组合投影。（MD环境中的阴影需要由关键灯光和环境灯光投射。）

3. 布局

MD布局通过使用统一的元素和间距来支持跨平台、环境和屏幕尺寸的一致性。

3.1 原则

•  可预测的：界面应通过一致的UI区域和空间组织使用直观且可预测的布局。

•  一致的：布局应使用一致的网格，关键线和边距。

•  反应灵敏：布局对来自用户、设备、屏幕元素的输入是自适应和可以做出反应的。

3.2 结构

MD布局是在视觉上平衡的。大多数测量都与所应用的既对齐间距又对齐整个布局的8dp网格对齐。

较小的组件（如图标和版式）可以与4dp网格对齐。

△8dp与4dp栅格单元

3.3 像素密度

每英寸的像素数称为像素密度。高密度屏幕每英寸具有比低密度屏幕更多的像素。造成的结果是相同像素尺寸的UI元素在低密度屏幕上显得较大，而在高密度屏幕上则较小。

屏幕密度 = 以像素为单位的屏幕宽度（或高度） / 以英寸为单位的屏幕宽度（或高度）

△高密度显示

△低密度显示

像素无关密度(Density-independent pixels)：在开发Android应用时，使用密度无关像素（dp），dp是一个灵活的单位，可以在任何屏幕上缩放到统一尺寸。在具有不同密度的屏幕上显示相同的 UI 元素。

注：dp只在Android开发时使用，设计网页时使用px。

△1. 低密度屏幕以像素无关密度显示       2. 高密度屏幕以像素无关密度显示

1dp 等于密度为160的屏幕上的1个物理像素。

dp 的计算方式为：dp = （以像素为单位的宽度 * 160） / 屏幕密度

 

可缩放像素(Scalable pixels)：在进行 Android 开发时，可缩放像素（sp）和 dp 功能相同，但仅用于字体。sp 的默认值和 1dp 一样。

sp和dp的主要区别是sp保留了用户的字体设置。在辅助功能中设置了大号字体的用户会看到与他们的设置相匹配的字体大小。

3.4 响应式布局栅格(Responsive layout grid)

MD响应式布局栅格可适应屏幕尺寸和方向，从而确保各个布局之间的一致性。布局栅格由三个元素组成：列，间隙和边距。

△1.列   2.间隙   3.边距

3.4.1 列(Columns)

内容放置在包含列的屏幕区域中。列宽是使用百分比而不是固定值定义的，以允许内容灵活地适应任何屏幕尺寸。栅格中显示的列数由查看屏幕的断点范围（预定屏幕大小的范围）决定，无论该断点是手机，平板电脑还是其他尺寸的断点。

△在移动设备上，在360dp的断点处，此布局栅格使用4列。

△在平板电脑上，断点为600dp时，此布局栅格使用8列。

3.4.2 间隙(Gutters)

间隙是列之间的空间，作用是分离内容。间隙的宽度在每一个断点范围是固定值。为了更好地适应屏幕，间隙的宽度可以在不同的断点处改变。较宽的分隔更适合较大的屏幕，因为它们在列之间创建了更多的空白。

△在移动设备上，在360dp的断点处，此布局栅格使用16dp间隙。

△在平板电脑上，断点为600dp时，此布局栅格使用24dp间隙。

3.4.3 边距(Margins)

边距是内容与屏幕左右边缘之间的空间。与间隙相同，边距的宽度在每一个断点范围也是固定值。为了更好地适应屏幕，页边距宽度可以在不同的断点处改变。较大的页边距更适合较大的屏幕，因为它们会在内容周围产生更多的空白。

△在移动设备上，在360dp的断点处，此布局栅格使用16dp边距。

△在小型平板电脑上，断点为600dp，此布局栅格使用24dp边距。

3.4.4 断点(Breakpoints)

断点是具有特定布局要求的预设屏幕尺寸的范围。在给定的断点范围内，布局会进行调整以适合屏幕尺寸和方向。

3.4.5 断点系统(Breakpoint system)

MD根据以下列结构提供响应式布局。使用4列，8列和12列栅格的布局可用于不同的屏幕、设备和方向。每个断点范围确定每种显示尺寸的列数以及建议的间隙和边距。

间隙和边距是灵活的值，在MD网格系统内不需要相等。

3.4.6 栅格定制(Grid customization)

可以自定义布局栅格，以满足你的产品和各种设备尺寸的需求。

•  自定义间隙：可以调整间隙，以在布局的列之间创建更多或更少的空间。

△此布局网格使用8dp间隙。较小的间隙表明图像彼此密切相关，因此它们被视为集合的一部分。

△此布局栅格使用较大的32dp间隙以在列之间创建更多分隔。额外的空间有助于将每张专辑视为集合中的一个单独实体。

△不要使间隙太大，例如与列相同的宽度。太多的空间不会为内容留出足够的空间，并会内容看起来显得不统一。

•  自定义边距：可以调整页面边距以在内容和屏幕边缘之间创建更多或更少的空间。边距在每个断点范围使用固定值。(正文清晰易读的理想长度是每行40-60个字符。)

3.4.7 水平栅格(Horizontal grids)

可以针对水平滚动的触摸屏UI自定义布局栅格。列，间隙和边距从左到右而不是从上到下布置。屏幕的高度确定水平栅格中的列数。在非触摸和Web平台上，水平滚动UI并不常见。

△1.列  2.间隙  3.边距

3.4.8 栅格表现(Grid behavior)

流体栅格(Fluid grids)：流体栅格使用可缩放并调整内容大小的列。流体栅格的布局可以使用断点来确定布局是否需要进行更改。

△列在流体栅格中扩展。

固定栅格(Fixed grids)：固定栅格使用固定大小的列，并具有可变的边距，以使内容在每个断点范围内保持不变。固定栅格的布局只能在指定的断点处更改。

△边距在固定栅格中扩展

3.4.9 UI区域(UI regions)

布局由几个UI区域组成，例如侧边导航，内容区域和应用栏。这些区域可以显示动作，内容或导航目标。UI区域在设备之间应保持一致，同时适应不同屏幕尺寸的不同断点。

 

为桌面端设计的UI元素应以与移动端UI以一致的方式进行组织，以保证不同设备间UI的相似程度。

△在不同尺寸的屏幕上更改布局

常驻UI区域(Permanent UI regions)：常驻UI区域是可以在响应式栅格外部显示的区域，例如抽屉导航。这些区域不能被折叠。

△当屏幕空间可用时，常驻UI区域始终可见。

可切换的UI区域(Persistent UI regions)：可切换的UI区域是可以随时通过命令显示的区域。它们可以被打开或关闭，以显示或消失。当它们出现时，它们会同时压缩内容和栅格。

△打开时，会同时压缩内容和栅格。

临时UI区域(Temporary UI regions)：临时UI区域会临时显示，当它们出现时，不会影响响应式栅格。可见时，可以通过点按其区域内或区域外的任何空间来隐藏它们。当UI区域可见时，屏幕上的其他元素将不可交互。

△打开时，此临时导航抽屉不会影响响应式栅格或屏幕内容。

3.5 间距方法(Spacing methods)

间距方法使用基线栅格、关键线、间距和增量间距来影响比率，容器和触摸目标。

3.5.1 基线(Baseline)

手机、平板和桌面设备的所有组件都与 8dp 的基准栅格对齐。图像，排版和组件中的某些元素可以与4dp网格对齐。

△应用栏和FAB与8dp网格对齐。

△底部导航栏的元素与4dp网格对齐。

△文字与 4dp 的基准网格对齐。

△当字体位于按钮或列表项之类的组件内时，可以将其置于4dp网格之外。

3.5.2 间距(Spacing)

关键线(Keylines)：关键线使元素可以在布局栅格外部一致地放置。它们是垂直线，显示了元素在不与栅格对齐的设计中的放置位置。关键线由每个元素到屏幕边缘的距离确定，以8dp为增量进行度量。关键线应与响应式布局栅格结合使用，以在整个设计中一致地放置元素。

△1. 栅格    2.关键线

△关键线可以在布局中的元素之间创建更多或更少的空间。它们可在每个断点范围内调整。

内边距(Padding)：内边距是指UI元素之间的空间。这是关键线的另一种间距方法，以8dp或4dp的增量进行度量。内边距应与响应式布局栅格结合使用，以在设计中一致地放置元素。

△1. 布局栅格   2.内边距

△内边距可以在垂直和水平方向上进行测量。

垂直间距(Vertical spacing)：垂直间距是指标准元素（例如应用栏或列表项）的高度。这些元素的高度应与8dp网格对齐。

△1.状态栏：24dp   2.应用栏：56dp   3.列表项：88dp

增量(Increment)：增量是一个度量单位，用来确定应用中其他元素的大小和位置。它具有相等的高度和宽度。它可以是任何数字，但是建议使用标准元素（例如应用栏）的高度作为增量。此增量是使用应用栏的高度定义的。如果应用栏的高度为56dp，则增量为56 x 56dp。

△如果一个元素是 8 增量宽，使用 56dp 作为增量大小，那么它的宽度是 448dp。

3.5.3 容器和宽高比

容器(Containers)：容器是用来表示封闭区域的形状。容器可以容纳各种UI元素，例如图像，图标或表面。

△1.  图片容器   2.  图标容器   3.  表面容器

宽高比(Aspect ratios)：宽高比是元素的宽度与其高度的比例。

建议在UI中使用以下宽高比：
16：9、3：2、4：3、1：1、3：4和2：3

灵活比例(Flexible ratios)：灵活的比例大小由布局栅格决定

•  容器的宽度由屏幕布局决定，并逐渐增加以填充可用的最大空间。

•  容器高度取决于该容器中图像的高度。

△容器宽度由布局网格中的列宽度确定。

3.5.4 触摸对象

为了确保信息密度和可用性之间的平衡，触摸目标的尺寸至少为 48 x 48 dp。在大多数情况下，触摸目标之间至少还有 8dp 的间隔。

△触摸对象最低48 x 48 dp

但在某些情况下，触摸目标的尺寸必须小于建议的最小48dp。

△1. 段落内链接的较小触摸目标   2. 较小的触摸目标，用于在选择器中选择日期

3.5.5 点击对象

在非触摸式UI上，点击目标应至少为24 x 24 dp，并且它们之间的间距至少为8dp。

△点击对象最低为24 x 24 dp

3.6 组件响应模式

随着屏幕空间的增加，组件可以应用以下响应模式。

•  露出：当在指定的断点处有更多空间可用时，可以显示较小屏幕所隐藏的部分UI。

△当屏幕尺寸增加时，侧面导航将变得可见。

△当有更多空间可用时，默认情况下可以显示在小屏幕仅点击后才会显示的内容。

•  转变：一个 UI 元素可以在指定的断点处从一种形式变形成另一种形式。

△侧面导航可以转换为大屏幕上的标签。

△列表可以在更大的屏幕上转换为图像列表。

△菜单项可以在较大屏幕上的工具栏中转换为图标。

•  分开：当有更多屏幕空间可用时，具有多层的UI可以一次显示所有这些层。UI元素在此新可用空间中划分。

△侧面导航，列表内容和详细内容会分开，以在较大的屏幕上填充单个视图。

△选项卡式的同级内容在较大的屏幕上的同一视图中划分。

•  重新排列：UI在新的可用空间上可以改变布局

△单列格式的元素可以在较大的屏幕上以各种组合形式重排以填充内容区域。

△水平 Tab 选项卡可以重排成垂直列表。

△元素可以基于新的屏幕比例或设备方向在组件内部重新排列。

•  扩展：UI可以扩展成更大区域。

△内容卡片可以扩展来填充新的空间。

△对话框可以根据内容或特定的增量按比例扩展。

•  位移：UI组件可以移动到更合适的位置。

△小屏幕上的底部卡片可能会作为菜单重新定位。

△浮动操作按钮（FAB）可以移动到相对其他元素更显眼的位置。