Material Design的概述与环境

概述

Material Design 是我们将经典的设计原则和科技、创新相结合而创造的设计语言。这份文档会随着我们对 Material Design 的探索而不断更新。

目标

创造一个将经典的设计原则和科技、创新相结合的设计语言。

开发一个能在不同平台、不同设备上提供一致的体验的底层系统。遵循基本的移动设计定则，并同时支持触摸、语音、鼠标、键盘等输入方式。

原则

Material 是一种隐喻

通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。与众不同的触感是实体的基础，这一灵感来自我们对纸墨的研究，但是我们相信，随着科技的进步，应用前景将不可估量。

实体的表面和边缘提供基于真实效果的视觉体验，熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果，但同时又绝不会脱离客观的物理规律。

光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系，以及单个物体的运动。

鲜明、形象、有意义

新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫，不但可以愉悦用户，而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。

Material Design 设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。

有意义的动画效果

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。

动效应当在独立的场景呈现。通过动效，让物体的变化以更连续、更平滑的方式呈现给用户，让用户能够充分知晓所发生的变化。

动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

环境

Material design 是一个包含光线、材料和投射阴影的三维环境。

所有的材料对象都包含 x、y、z 三个维度。

所有的材料对象都有一个 Z 轴厚度。

主光源投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。

材料的厚度

1dp

阴影

阴影是不同高度的材料相互叠加所产生的。

3D 世界

材料所处的环境是一个 3D 空间，这意味着每个对象都有 x、y、z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角，每个材料都有 z 轴厚度，标准是 1dp，相当于一个屏幕密度为 160 的设备上的一像素。

在网页上，z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

具有 x、y、z 轴的 3D 空间

光线和阴影

在材料环境中，虚拟的光线照射使场景中的对象投射出阴影，直射光投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。

材料环境中的所有阴影都是由这两种光投射产生的，阴影是光线照射不到的地方，因为各个元素在 z 轴上占据了不同大小的位置，遮住了这些光线。在网页上，阴影的实现是在 y 轴上使用多重阴影。下面的案例中，卡片的高度是 6dp。

直射光投射的阴影

环境光投射的阴影

直射光和环境光混合投影