Android P引爆 Material Design十大变化趋势

写在前面的话

今年5月份的谷歌I/O开发者大会在美国加州山景城的海滨露天剧场拉开帷幕。此前一直传闻Material Design会有重大更新，从谷歌I/O这次的内容，结合官网陆续更新的信息来看，Material Design此次更新变化非常明显，对原本的内容进行了补充和新增，并提供了新的工具用来解决设计和开发之间的问题，以及多套支持定制的组件，帮助设计开发者们更快地构建美好的数字体验。本篇文章主要是跟大家聊一聊此次更新中设计规范文档的十大变化与新增。

一、强大的“Material Theme Editor”

Material Design全新推出的功能 Material Theme Editor主题编辑器，这个功能可以让任何人都能在自己的产品中系统地表达其独特风格，同时还完美契合 Material Design的设计规范。您甚至只需要选择一下颜色和字体等基本设定，就可以直接将这些设置快速应用到整个设计方案中。

Material Theme Editor 依托包含强大功能的控制面板，可以轻松地对组件颜色、排版和形状更改全局样式。Material Theme Editor还提供了教学指导，帮助设计开发者完成心仪的 Material 主题。

同时，Material Theme Editor提供了7款不同产品类别的主题，Google称之为“ Material Studies ”，包括每个主题整体设计思路，从产品架构、布局、色彩、字体排版、图标、组件、动效、设计与品牌的结合度等维度，让你了解 Material Design 并不是一个刻板不变的设计规范，而是能够基于其中的设计理念做非常多创造的设计体系。

目前，Material Theme Editor 暂时只支持和 Sketch 配合使用，只需下载 Material Plugin 即可使用，系统环境需要 macOS High Sierra 10.13 或更高版本。

1. 选择颜色

通过选择主要、次要、背景以及文本和图标色彩，自动将颜色应用于所有组件。检查色彩对比以符合无障碍要求，从材质调色板中选择颜色，使用单一颜色自动生成10个颜色值的色调，使用全局颜色更改自动填充symbols。

2. 设置形状

选择你的形状和边角风格，从弯曲或切割的角落样式中进行选择，并自动将更改应用于你的材质组件。在材质库中的组件中，使用对称和非对称形状进行演示，同时保留在材质设计指南中。

3. 添加字体

最多可为您的主题添加3个字体，基于材料排版指导，自动调整和优化字体的可读性，访问流行的Google字体。包括：Roboto、Raleway、Alegreya、Rubik、Merriweather、Oswald等。

4. 探索图标

通过风格化的系统图标表达您的品牌，提供五种主题和一系列格式、尺寸和密度。从填充、圆润、锐利、轮廓和双色图标主题中进行选择。

二、Material Design设计目标的变化

自2014年至今，Material Design秉承的2个设计目标一直沿用了数年：

1、我们希望创造一种新的视觉设计语言，能够遵循优秀设计的经典规则，同时还伴有创新理念和新的科技。

2、我们希望创造一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验，遵循基本的移动设计规则，同时支持触摸、语音、鼠标、键盘等输入方式。

2018年5月开始Material Design增加了新的目标，与全力打造的Material Theme Editor的个性化定制功能遥相呼应：

1、创造：我们希望创造一种新的视觉设计语言，能够遵循优秀设计的经典规则，同时还伴有创新理念和新的科技。

2、统一：我们希望创造一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验。

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

三、Material Design设计原则的变化

本次更新将原有的材质隐喻、大胆夸张、动效表意3大设计原则，扩充为5大设计原则：材质隐喻、大胆夸张、动效表意、灵活、跨平台，让我们来做一个对比。

原有Material Design三大设计原则

1、隐喻

通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。

2、大胆夸张

新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用这些基础的平面设计规范。

3、动效表意

动画效果或动效可以有效地暗示、指引用户。

新版Material Design五大设计原则

1、材质隐喻

Material Design受物理世界及其纹理的启发，包括它们如何反射光线和投射阴影，材料表面重新构想纸张和墨水的介质。

2、大胆夸张

Material Design以印刷设计方法 – 印刷术、网格、空间、比例、颜色和图像为指导，创造出让用户沉浸在体验中的层次结构，含义和焦点。

3、动效表意

通过微妙的反馈和连贯的过渡来使动效保持一定的连续性。随着元素出现在屏幕上，他们在环境中转换和重组，相互作用产生新的转变。

4、灵活

Material Design系统旨在实现品牌表达，它集成了一个自定义代码库，可以使组件、插件和设计元素无缝的衔接和灵活的运行。

5、跨平台

Material Design使用跨Android、iOS、Flutter和Web的共享组件维护跨平台的相同UI。

四、放宽对材质形状的限制

形状可以引导注意力、识别组件、显示状态和表达品牌。材料表面默认情况下为矩形，带有4dp的圆角，可以微妙的调整它们的形状变化，突出它们的作用。

形状变化的使用方法：

1、突出重点

由于独特的形状脱颖而出，他们可以将注意力集中在屏幕的某个部位。  下图导航栏的设计中， 圆形浮动动作按钮和弧形底部工具栏的组合，从屏幕上其他位置的矩形形状中凸显出来。

2、用于组件区分

形状为用户提供了识别组件和识别不同材质的方法，用以区分不同的功能。例如下图这些人物标签可以通过对形状的一致使用来识别。

3、表明状态不同

可以通过形状或材质的不同来传达元素的状态更改，当使用形状来指示状态改变时，在每一次出现的情况下都一致地使用它。

4、个性化的品牌传达

要在整个应用中表达品牌的视觉语言，请以与其他自定义的内容保持一致性。通过对app中元素进行微妙的调整，有助于塑造品牌的整体印象。整个应用程序使用形状的一致性，有助于品牌传达。

五、增强悬浮按钮功能

浮动操作按钮（FAB）表示屏幕的主要操作。原悬浮按钮仅为圆形如下图所示：

 ▲ 原有悬浮按钮

新版可扩展的FAB可以对宽度进行扩展，并且包含文本标签。

 ▲ 新悬浮按钮变化

可扩展的FAB按钮的宽度可以是固定的也可以是变化的。固定宽度的容器由图标、文本标签和填充的总体宽度来定义。

可扩展的FAB按钮由其与屏幕上的其他内容（例如屏幕宽度或布局网格）的规则来定义。

 ▲ 由文图标、本标签和填充累积宽度来定义的FAB按钮

 ▲ 由布局网格列表定义的FAB按钮

六、更多功能应用在底部

在新Material Design的设计文档和Android P版本的变化中可以看到，界面底部的操作区域被更多的利用起来。

1、可扩展的FAB悬浮按钮

上文提到原Material Design中的圆形浮动按钮，增加了可扩展的操作，可以变的更宽、增加图标和文本标签。

2、材质的延展性变化应用到底部

Material Design的主题定制，支持材质的无线延展，为更多交互方式提供了可能性。

3、应用到底部的导航栏变化

底部导航栏与浮动按钮的组合运用，不用进行页面的跳转，使得底部的操作方式更加的多样化。

4、Android P的底部虚拟键变化

最下方的一“短横”相当于iPhone的Home键，左右滑动可以切换应用，向上滑动一次，你会看到你打开的应用程序。再次向上滑动，即可打开应用抽屉（返回键在需要时才会出现）。

七、更新布局密度

Material Design默认使用低密度空间，但在某些情况下为了提高用户体验也可以使用高密度空间。

1. 密度原则

可浏览：高密度控制的用户界面改善了对大量内容的浏览和交互。

优先：密集的UI元素通过减少操作之间的空间来帮助用户集中精力。

可用性：通过高密度控制可以在单个屏幕上显示更多内容和操作。

2. 何时应用高密度

密度的控制，取决于用户如何与组件进行交互。高密度组件更加方便用户对大量信息进行操作处理。在设计列表、表单和长表格时可使用密度增加的组件。

 ▲ 默认密度，48dp行高 ；高密度，32dp行高。

 ▲ 默认密度，56dp文本字段高度 ；

      高密度，44dp文本字段高度。

将密度始终应用于组件以及组件中嵌套的任何元素。

 ▲ 默认密度，40dp行高和36dp动作高度 ；

      高密度，32dp行高，24dp动作高度。

3. 不适合用高密度

（1）不要将高密度应用于操作功能相对集中的组件，例如：与下拉菜单或选择器的交互方式。增加这些组件的密度会降低它们的可用性。

八、双色图标的探索

Material Design的system icon提供五个主题和一系列格式，尺寸和密度，通过风格化的system icon表达您的品牌，从填充、圆润、锐利、描边和双色图标主题中进行选择。

双色图标增加了维度，使用描边、填充和颜色的属性。它可以使用不同的颜色进行图标的笔触和填充，可以调整填充的透明度，以提高易读性并与您的品牌保持一致。

▲ 1、品牌标志；2、双色调图标；3、应用中的双色图标

九、细化动效章节内容

动效设计可以表达独特的风格和个性，MaterialDesign的众多更新中，对于动效运动规律的讲解无疑是一个令人惊喜的重大福利。并且增加了面向中小团队与个人开发者的初体验设计指导.

1、原则

（1）信息传达

动效表达可以显示元素之间的空间和层次关系，哪些操作可用，以及如果采取操作会发生什么。

（2）视觉焦点

使用动效可以将注意力集中在重要的事情上，不会造成不必要的干扰。

（3）个性化表现

动效的合理使用，可以为普通互动添加创意，并表达品牌的个性和风格。

2、动效的运用

（1）子父级关系

动效通过显示元素如何相互关联来帮助定位用户。

（2）状态反馈

动效根据用户操作的状态提供及时的反馈。

（3）指导用户

动效引导用户如何执行有效的操作。

（4）品牌个性

动效为交互增添了更加具有吸引力的个性化体验。

3、动效转换

Material Design的这次更新最大的亮点就是对速度章节进行了详细的描述。转换速度是UI改变状态的可观察速度，主要是通过调整持续时间、缓动曲线和元素移动的距离这三个基本参数来控制，正确的调整参数变化使得动效转换变的流畅。

更多动效新增知识点可以查看Material Design的官方网站的动效章节：https://material.io/design/motion/understanding-motion.html#principles

十、探索材质层级表达更多形式

原Material Design中的对象与现实生活中的对象具有相似的性质。通过对现实光影的模拟，材质在Z轴上高度的变化产生阴影来体现距离的变化。

1、通过运动视差和不透明度表达材质高度

新的Material Design探索使用视差运动和不透明度来区分材质的高度。如下图这三层界面看起来彼此不同，可通过视差运动来区分。

这种稍微透明的底部界面在屏幕上呈现动画效果，允许用户通过不透明度的作用看到它下面的界面。这些堆叠的界面向用户表达他们没有转换到另一个层级，而是与他们正在查看的内容之上的进行交互。

2、通过材质边角变化和颜色差异表达材质高度

如下图展示的交互模型基本内容是三个叠加的界面。界面一底部表单具有导航和品牌元素; 界面二中间的纸张有主要内容; 界面三顶部表单有购物车。界面二和界面三通过颜色的差异和材料边角形状的变化来显示不同的层级关系。

                      Material Design的发展变化趋势会与GOME OS碰撞出怎么样的火花呢？

                                                  敬请关注GOME OS用户体验设计。

                                                                      谢谢阅读