写在前面：译文源于谷歌平台发布的设计规范，英文版地址：https://material.io/guidelines/#，里面篇幅相对较长，所以想整理出一些实用性较强的部分，希望对读者有所帮助。（PS：了解平台规范最终目的是为了让你的产品在平台中无违和感，让用户在平台上有熟悉的用户体验，没有必要全部照搬，结合自身产品的业务目标和差异点进行巧妙设计才是我们更应努力的方向。）

设计规范介绍
谷歌视觉设计语言综合了优秀设计的经典原则和科学技术的创新。
设计目标：创造、统一(跨平台设备统一的用户体验)、定制化(为创新和品牌表达，提供一种灵活拓展的基础)。
设计原则：它的灵感源自真实的物理世界，包括物体纹理、反射光、投影，使得纸张和它的墨水反应效果重新成像。
1）粗体、图形化、有意的：通过排版，网格，空间，规模，颜色和图像来创建层次，让用户沉浸其中。
2）让运动有意义：运动通过微反馈和合理的过渡，保持焦点和连续性，当元素出现在屏幕上，他们转化并重新组织周围的环境。
3）灵活的基础：平台设计体系意在实现品牌表达，集合了定制的代码库，用来无缝实现组件、插件和设计元素
4）跨平台：在Android，iOS，Flutter和web上共享组件
平台周边：

1）平台体系：拓展和增强后的设计体系让工具和组件相统一，从而改进设计和开发的工作流程
2）平台基础：在学习平台设计原理时，设计和构思如何使用平台设计架构去做你的app
3）平台指南：定制和部署一个与众不同的系统主题

Part 1 ：Material Design（物质设计）

一、Material properties（物质性能）

在谷歌物质世界中，材料具有不同的x和y轴尺寸（以DP表示），但厚度只能是1dp。

1）阴影用来描绘物质元素之间的相对高度

2）内容可以通过材料的任何形状和颜色来展示，但不需要增加厚度

3）内容可以在材料中表现独立活动，但受限在材料的边界范围内

4）多个物质元素不能同时占据空间中的同一点，利用不同高度来防止多个物质元素同时占据同一点；当改变高度时，一块材料不能穿过另一块材料

5）材料的扩大和缩小只能沿着原来的平面，不能弯曲或折叠

6）多片材料可以结合在一起成为一块新的材料；当材料分离或去除一部分时，剩下的材料可以愈合再次成为完整的一片

7）材料可以沿不同轴线移动，在Z轴的运动通常是由用户交互引起的

二、Elevation&shadows（海拔和阴影）

1）构件在应用程序中保持一致的高度，但在不同的设备可能有不同的休息海拔，这取决于环境的深度（例如台式机的深度比手机大）

2）影子随着物体的高度增加，变得更大和柔软；一致的阴影表示对象是在改变形状而不是改变高度

3）组件参考阴影

4）对象可以相互独立运动，也可受结构中更高层级对象的约束，如果父对象滚动，那么从属于他的子对象也会随之滚动；当卡片集合滚动时，独立于它的浮动按钮可不动，因为它不从属于卡片集合。因此如何组织对象或对象集合方式决定了他们如何相互运动。如何确定对象的高度取决于你想表达的对象的内容层次。

Part 2 ：Motion（动效）

一、Material motion（材料运动）

01 在材料设计的世界中，运动是用来描述空间关系、功能、意图的美和流动性。运动提供了：

1）视图间的引导焦点

2）提示用户如果完成一个手势会发生什么

3）元素间的层次和空间关系

4）屏幕背后即将发生的事情的一个分支（比如加载下一个画面）

5）性格、优雅和喜悦

02 材料环境从现实世界中吸取灵感，例如重力、摩擦力。运动材料有这些特点：

1）反应敏捷——1能很快反应在用户触发它的地方，大的动画通过迅速向外扩散的来确认用户触碰输入，而卡片的高举表示处于活跃状态；2用来表示新界面或元素和动作与创建者之间的关系。

2）自然——材料描绘了自然世界中受力激发的自然运动。一个元素开始或停止不会瞬间发生，他们的加速或减速会受到表面摩擦和重力的影响；以弧线来激发运动轨迹，材料的变化也同样遵循运动轨迹。

3）感知力——能感知周围的环境并能对用户意图作出反应，当转换视角时，元素会根据他们周围的环境进行编排；材料变化过程中也可以把其他材料挤出去，当其它材料靠近时，元素也能吸引它们加入。

4）有意图的——运动轨迹中的材料在正确的时间会聚焦到正确的点上，转换有助于用户进行下一步的交互，移动可以传递不同的信号，例如一个动作是否可行。

5）动画能够将注意力移动到需要用户注意的元素上。

03 成功的运动具有以下特点：

1）快速动画——动作应该是简单、明确、连贯的，避免一次性做太多。

2）运动是一致的——任何自定义app里的运动和整个app应该是一致的，即便不同的app，相似的动画也能让它们看起来是有关联的。

04 动效的作用:

在页面转换中，通过表面的动画交流层次，在幕后进行加载来减少延迟感。

二、Duration & easing（持续和轻松）

01 使用缓和曲线和持续时间模式创建平滑一致的运动：

1）速度——当元素在位置或状态间移动时，运动应保持转换简短，以至于它不会引起等待，因为用户会频繁看到它们。

2）动画时间——不要用单一的时间过渡去做所有的动画，调节每一个过渡去适应不同距离旅途的体验。当对象有较长距离或表面有剧烈改变时，需要使用更长过渡，较短距离或微小变化时则用更短的过渡。

02 常见的持续时间：

手机上典型的转换时间通常是300ms，大型复杂全屏的转化需要更长的过渡，在375ms以上。元素进入屏幕发生在225ms以上，离开屏幕发生在195ms以上。若这个转化过程大于400ms就会觉得太慢。
平板上的动画过渡应该比移动设备长30%，可穿戴设备应该比移动设备短30%。例如300ms的移动设备在平板上应增加到390ms，在穿戴设备上则缩短到210ms。

03 自然缓和曲线：

在动画的持续时间内，加速减速变化应该是平滑的，当加速减速不对称时则显得不自然。

三、Movement（运动）

屏幕上上下移动的物体应该是遵循现实世界受重力影响的结果：

当元素沿着单个水平或垂直但不同时进行的轴运动时，可以更简单更快速；暂时离开屏幕的运动应该遵循锐曲线，并且在附近随手可触的范围内，因为他们随时可能返回屏幕；标准曲线被用于保持一个顺畅的启动和停止。

四、Choreography（舞蹈）
01 共享元素

当有多个元素在转换过程中出现时应选择最重要的元素，一些元素可以在转换过程中消失，等转换完成再出现，如果都出现在过程中则会过于分散用户注意力。

02 创建表面

当在同一时间要创造出多个表面时，在一个方向上创建一个清晰平滑的焦点路径。

五、Creative customization（创意定制）
01系统图标

可以充当双重作用，例如一个菜单图标可以平滑过渡成一个返回控件，再返回过来。这种效果既提供了按钮的功能，又为交互增添了奇妙的元素。

02 产品图标

动画产品图标在app的启动加载过程中应展现出优雅和精致。

03 插画

微妙的插画可以给用户体验增添一种幽默感。例如当用户完成一个目标，用动画作为小奖励，可以和应用程序创建更深的联系。为一个新功能提供一个小动画也是一种令人难忘的引导教育用户的方式。

（关于动效部分建议查看官网，里面有很多详细的案例告诉你怎样是正确，怎样是错误的。）

Part 3 ：Style（样式）

一、Color（颜色）

Material Design里的颜色灵感来源于环境中柔和的色调，深色阴影和明亮高光，谷歌提供了500种颜色参考作为你app里的主色调。

01 基色：

是指app中出现最频繁的颜色，在没有辅助色的情况下也可以用它来强调元素；要创建元素间的对比，可以用主色较亮或较暗的色调，有助于界面之间（例如状态栏和工具栏）的划分。

02 辅助色：

二级色，用来强调UI界面中关键的部分，它可以是主色的互补色或也可以是相似色，但不同于主色的明暗色调；也不一定是彩色的，他应该与周围的颜色形成对比，作为一个强调来谨慎使用。（是否使用辅助色是可选的，但没有必要通过主色的明暗色调遍去强调元素）

03 辅助色最好用于以下元素：

1）按钮、浮动操作按钮和按钮文本；2）文本字段、游标和文本选择；3）进度条；4）选择控件、按钮和滑块；5）链接；6）标题

04 辅助色的谨慎使用：

对某些特定文本（例如连接文本或标题等较短文本）使用辅助色，但不要用于正文（即便基色和辅助色都是明亮的）。
在不同背景颜色下也可用不同深浅的辅助色来表现出对比。

05 如何在app中使用颜色：
大的UI区域和元素应该用主色调，辅助色用于强调较小的区域（如果没有辅助色，你可以用基色代替来用于这些区域）：浮动按钮、开关用辅助色来强调；次要按钮或复选框被选中状态、手机图标、系统栏可以用基色；工具栏用更深的基色；很少出现的元素（例如警报），应该和其它元素区分开来并且不要用基色。

06 元素状态：

元素状态的改变最好用多种方式指示，例如加上显示图标或移动位置，因为颜色的变化有时候是细微、不易察觉的。

07 对比需要注意的地方：

当你的用户有红绿色盲时，除了颜色还应用额外的启示；对于白内障的用户，较小的文字没有对比则很难看清，因此可以提供放大文本的操作设置。

08 不同层级文本在背景下的透明度（明亮背景下的深色文本）：

09 不同层级文本在背景下的透明度（深色背景下的浅色文本）：

10 图表和其他元素（38%的透明度能够让它们在任何颜色的背景下都适应）

11 主题的一致性：

明主题（1.状态栏；2.app栏；3.背景；4.卡片/对话框）

暗主题（1.状态栏；2.app栏；3.背景；4.卡片/对话框）

二、Icons（图标）

如下左、右图分别为图标在亮背景和暗背景下的透明度：

图标上元素的分层注意数量，太多的层次会缺乏重点。

01 图标网格

图标的内容区域限定在活动区域的内部，当图标显示为24dp或20dp时，周边都将留出2dp的填充区域。

02 系统图标的设计原则

形状是粗体和几何的

系统图标显示为24dp，当密集布局在桌面上时，可以缩小到20dp。

系统图标应保持一致的视觉比例：

左上正方形（长18dp；宽18dp）；右上圆形（直径20dp）；

左下水平矩形（长20dp；宽16dp）；右下垂直矩形（长16dp；宽20dp）。

图标周围要有足够的空间去确保清晰度和触碰区域。如图实际应用中，图标24dp，触碰区间48dp；密集排列时，图标20dp，触碰区域40dp

使用一致的笔画重量；

图标尽量看起来正面、不要倾斜、旋转；

要粗形，不要用细节、轻的画笔重量，不要用圆角末端；

几何形状要保持一致，不要手势或松散的有机形状；

图标要贴合像素，不要出现小数点。

关于人的肖像图标：
全身示例：

上半身示例：

组合示例：

细节示例：

图标颜色：亮背景下，一个活动图标的标准不透明度应为54%，一个无效的图标不透明度应为38%；暗背景下，一个活动图标的标准不透明度应为100%，一个无效的图标不透明度应为54%。

图标的快捷方式：
app的快捷图标是圆形的，图标总面积是48dp的圆，活动区域是44dp的圆，周边是2dp颜色为#F5F5F5的填充区域。

图像为组合图像时，活动区域是30dp的圆：

三、Imagery（意象）

原则：
当用插画和摄影来增强用户体验时，选择能表现用户相关性、传递信息的、愉悦的图像；

图像应该具有一个焦点，缺乏注意力会让图片变得毫无意义；

构建叙述——能够讲述一个故事的图片是有趣、信息量大的；

结合你的主题，图片能合理传达信息；
引入不同的尺度大小来创建视觉图片的重要性层级。