第一章节《Material design》

一、介绍（Introduction）

译者注：关于“Material”如何翻译、解释，看看这篇报道。以下是截取部分：
谷歌的设计师们仍旧不愿为这个全新的虚拟物质命名，而这个决定也为他们提供了更多的灵活性，让他们能够进一步加深形而上学神秘主义的色彩。此外，不命名这个决定之所以很重要的原因在于，这个物质虽然遵循着一些物理规则，但是其并不会走入拟物化设计的圈子里。按照杜亚特的说法就是，这个物质并非实体纸张一对一的仿造品，而是「魔法纸」。

同时引用维基百科对于“Material Design”的解释：

Material Design** (codenamed Quantum Paper)** is a design language developed in 2014 by Google. Expanding upon the "card" motifs that debuted in Google Now...
译：Material Design（代号Quantum Paper），Google在2014年发布的一门设计语言。其灵感来源于 Google Now中“card”的联想...

译者注：在Material Design原文中，“object（对象）、element（元素）、surfaces（面）”其实就是描述material的不同状态，准确点说应该是不同语境下的material。比如在讲到某个应用页面的时候，我们可能更倾向于表达这是界面中的“element（元素）”，在对整个抽象概念描述的时候，我们更倾向于表达为“object（对象）”...所以在翻译过程中难免会出现混淆概念的地方，希望各位谅解。

为了用户，我们挑战自我去创建一门综合了经典设计法则和最新科技理念的视觉语言，它就是Material design。这份设计规范文档将随着我们对Material design的探索而不断迭代、升级。

目标（Goals）

融合经典的设计法则以及前沿的科学技术去创建一门新的视觉语言。

创建一个能够统一跨平台和不同尺寸设备之间体验的底层系统。基于移动端的基本准则，充分利用好触摸、声音、鼠标和键盘输入方式。

原则（Principles）

Material的隐喻特征（Material is the metaphor）
利用material的隐喻能够帮助搭建合理化的空间以及系统的运动方式。Material是基于真实的触摸感知，这一灵感来源于我们对纸和墨水的研究，我们相信，随着科技的进步，其应用前景将不可估量。

把material想象成真实存在的有形物体，它的面和边缘能够为用户提供视觉暗示。同时，利用符合用户现实经验的触觉特征有利于帮助用户快速的理解和认知。归功于material本身的灵活，我们能不断从中创新，但是这些创新都必须严格遵循客观世界的物理规则。

借助现实世界中光照对物体的影响和物体的面和运动的原理，能有效的向用户解释并传达物体是如何变化，物体是如何相互作用以及在空间里面物体之间的关系。引入真实的光照，能够区分物体间的层级关系，帮助划分空间以及暗示物体间的运动。

醒目、生动、带有目的性（Bold, graphic, intentional）
借鉴平面（印刷）中的排版、栅格、空间、尺寸、颜色以及图像（具有象征意义）等设计元素，能帮助改良视觉设计。合理的组合、使用这些设计元素能向用户表达更多深层次的东西，提供引导、表明意图、引起注意等等。比如通过利用颜色，无边框的图像，大面积的排版和留白能创造出醒目、生动且体验极佳的用户界面。

众所周知，用户行为非常重要。为此需要凸显核心功能，提供用户操作引导。

动效的引导（Motion provides meaning）
动效需要引导用户去完成目标。在一些重要的用户行为发生的时候，我们能使用动效去引导、暗示用户。

所有动效的发生必须在同一个空间里面。保证动效发生时不会打断用户体验。

动效的存在应该是合理、有意义的，动效的使用应该能够吸引用户注意力和保持用户关注。其中，反馈的动效应清晰明了，不夸张。转场的动效需连贯一致，条理清晰。

</br>

二、环境（Environment）

Material design是基于三维空间的设计语言。在三维空间内包含有光照（light）、material、阴影（shadows）

所有material对象都存在于含有x、y、z轴坐标的三维空间中。
在三维空间下，所有material对象都有唯一，不与其他对象冲突的z轴位置。
物体受两种光源影响，主光源影响物体的投影方向，环境光照射物体产生柔和的投影。

Material的厚度
1dp

投影
投影还会受到z轴上相互重叠的material对象之间距离大小的影响

</br>

三维空间（3D world）

含有x、y、z轴坐标的三维空间

Material存在于三维空间内，因此所有的material对象都带有x、y、z轴坐标信息。z轴指示的方向垂直于屏幕并指向用户眼球。在z轴坐标方向上，每一material对象都有着唯一，不与其他对象冲突的坐标位置并且都只有1dp厚度，1dp和屏幕密度为160px的一个px相等。

在web端上，z轴坐标主要用于区别对象的层级关系，而三维空间的营造主要通过y轴上的操作。

光照和投影（Light and shadow）

在material环境下，虚拟的灯光照亮整个场景。主光源影响物体的投影方向，环境光通过照射物体产生柔和的投影。

在material环境下，投影受这两个光源影响。在Android开发中，由于在z轴上各material对象位置的不同导致了不一样的投影效果产生。但在web上，投影只受y轴坐标变化的影响。下面的例子展示了一张卡片在6dp高度上光源对其的影响效果。

主光源的投射效果 环境光的投射效果 主光源和环境光共同投射下的效果

</br>

三、Material特性（Material properties）

Material有一套属于自身固定不变的外在特征和内在行为逻辑。

理解material的这些特性有助于我们掌握material design并运用到实际设计当中。

Material的特征

• 立体的
• 在空间中占有唯一的位置
• 不能被其他material对象穿过
• 可变化的形状
• 只沿水平方向作变化
• 不可弯曲
• 能和其他material对象合并
• 能被分裂，再合并
• 能凭空出现或者消失
• 能在任何轴向上移动

</br>

物理特性

Material的尺寸沿x和y轴变化（单位：dp），并且其有着固定不变的厚度（1dp）。

可行<br>Material的长和宽是可变化的 不可行<br>Material只有1dp厚

Material的投影。
投影的深浅效果跟Material对象之间的位置距离（z轴）相关。

可行<br>投影的深浅效果反过来暗示material对象之间的位置距离 不可行<br>接近的Material对象之间绝不会产生过分夸张的投影效果

任何形状和颜色的内容都能在material上面显示。添加内容不会增加material的厚度。

可行<br>任何形状和颜色的内容都能在material上面显示

在material有限的范围内，内容能够随意变化。

可行<br>material的变化不会影响内容的变化

Material是立体的。
输入事件不能穿过当前被触发的material对象。

可行<br>输入事件只影响当前被触发的material对象 不可行<br>输入事件不能穿过当前被触发的material对象

在空间内，多个material对象不能同时占据同一个位置。

可行<br>沿z轴区分开多个material对象的位置是一种解决方法 不可行<br>多个material对象不能同时占据同一个位置

一个material对象不能穿过另一个material对象。举例，就好比一张纸不能穿过另一张纸一样。

不可行<br>一个material对象不能穿过另一个material对象

Material的变化

Material能改变形状。

Material能改变形状

Material沿水平方向放大缩小（沿x和y轴）

可行<br>Material沿水平方向放大缩小（沿x和y轴）

Material不能弯曲折叠。

不可行<br>Material不能弯曲折叠

多个material对象能够合并成为一个material对象。

多个material对象能够合并成为一个material对象

被分裂的material对象能够再次合并。

被分裂的material对象能够再次合并

Material的运动

Material能够出现或消失在空间里的任何地方。

Material能够出现或消失在空间里的任何地方

Material能沿任何轴向移动。

Material能沿任何轴向移动

Z轴上发生的运动变化一般是用户与material对象交互的反馈结果。

Z轴上发生的运动变化一般是用户交互的反馈结果

</br>

四、高度和投影（Elevation and shadows）

Material design中的material对象的特性与现实物理世界中的物体特性相似。

在现实物理世界中，一个物体可以叠在另一个物体上面，但是物体间不能相互穿过。同时，物体也能投射投影和反射灯光。

Material design借鉴了现实物理世界中物体的特性，并将其运用在虚拟的三维空间里面的material对象上。这种借鉴现实物理世界的做法不仅有利于帮助用户理解，还能统一各应用间的体验。

高度（Elevation）
高度的计算方法是从一个material对象的顶面到另一个material对象的顶面。高度的大小可以暗示用户两个material对象间的距离大小以及投影的深浅。

默认高度（Resting elevation）
所有的material对象在空间中都有其自己默认的高度。在应用中，这些组件（material对象）的默认高度是这样的，但到了不同的平台或是设备上的时候，默认高度可能就会出现变化。

高度的动态补偿（Dynamic elevation offsets）
高度的动态补偿就是一个组件（material对象）从其默认高度朝着目标高度所做的位移变化。

</br>

高度（Android） （Elevation (Android)）

高度取决于沿z轴两个面之间的距离，或者说是深度。

说明：
高度（z轴）的测量单位和x、y轴上的测量单位是一样的，都是dp（density-independent pixels）。因为material的厚度是1dp，所以对两个material对象间高度的计算是从一个material对象的顶面到另一个material对象的顶面。
在material对象中，一个子对象的高度与其父对象的高度相关。
下图是Anndroid应用中的例子。

不同参照物下2个material对象的高度

默认高度（Resting elevation）
无论大小，所有的material对象都有一个默认高度，这个默认高度是不会改变的。当一个material对象的高度产生了变化，之后它会马上回到默认高度。

电脑桌面端（Desktop）的各组件默认高度比下图所列值小2dp，目的是适应带鼠标以及非触摸屏的设备环境。

高度（dp）	组件
24	对话框，选择器
16	抽屉导航, 右抽屉导航, 模态底部sheet
12	浮动按钮（FAB）
9	子菜单（每个子菜单+1dp）
8	底部导航栏, 菜单, 卡片（选择状态）, 抬起按钮 （按下状态）
6	浮动按钮（默认状态）, Snackbar
4	应用栏
3	刷新指示器, 快速入口 / 搜索栏（滚动状态）
2	卡片（默认高度）＊, 抬起按钮（默认高度）＊, 快速入口 / 搜索栏（默认高度）
1	开关

组件高度：（Component elevations）
在不同的应用中，各组件的默认高度不变。举个例子，在一个应用中浮动按钮（floating action button）的默认高度是6dp，到了另一个应用中一样也是6dp的默认高度。
在不同的平台和设备中，各组件的默认高度可能不同，这取决于人们观看的距离。举个例子，因为TV有着比电脑桌面（desktop）更大的屏幕尺寸，所以观看TV的距离比观看电脑桌面的距离要更远。同理，观看TV和电脑桌面的距离比观看手机的距离要远。

高度响应和高度的动态补偿（Responsive elevation and dynamic elevation offsets）
一些组件的高度会作响应，换句话说就是当用户输入反馈（比如正常状态、聚焦状态和点击状态）或一些系统事件的反馈时，这些组件的高度会因此而改变。这些组件的高度变化主要是通过高度的动态补偿实现。

高度的动态补偿就是一个组件（material对象）从其默认高度朝着目标高度所做的位移变化。它能确保各组件变化以及组件类型的一致。例如，所有可点击的组件被点击后都会有相同高度的位移变化。

一旦用户输入事件完成或者被取消，这些组件就会返回到默认高度的位置上。

**避免高度变化冲突（Avoiding elevation interference） **
当一个组件的高度在位移变化的时候，有可能会遇到其他组件也在变化。因为material对象之间是不能够相互穿过的，所以我们要避免各组件在高度变化的时候发生冲突。

在组件处于相同高度的时候下，组件可以根据情况提前移动或者直接消失。举个例子，浮动按钮（floating action button，以下简称“FAB”）会在用户选择卡片（cards）之前消失或移离屏幕，抑或者当snackbar出现时浮动按钮移动位置。

在布局层面上，通过设计应用的布局可以减少组件间相互冲突。举个例子，将浮动按钮（FAB）置于屏幕的一侧，当用户选择卡片（cards）的时候就不会和浮动按钮产生冲突。

各组件间高度的对比（Component elevation comparisons）
下图是各组件间默认高度和高度的动态补偿的对比。

在上图中，只有所列组件高度方面和其之间的对比是确定的。组件相关的其他方面和其整体的布局只作说明参考 以上图为例，图中该应用的页面布局里面包含了卡片（cards）和浮动按钮（FAB）组件。右边是该页面的横截面图，其中展示了各组件的高度信息 以上图为例，图中展示了一个被用户打开的抽屉导航菜单（Nav drawer）。右边是该页面的横截面图，其中展示了各组件的高度信息

投影 （Shadows）

为了引导用户理解material对象的深度和运动方向，投影提供了重要的视觉暗示。投影是唯一能够区分面与面（material对象）之间关系的视觉线索。一个material对象的高度决定了其投影的效果。

不可行<br>没有投影存在，你根本不清楚浮动按钮（FAB）和背景是否是分开的。 不可行<br>虽然有投影存在，我们也知道浮动按钮（FAB）和蓝色卡片是分开的两个组件。但因为两个组件的投影相似，所以会误以为两个组件处于同一高度。 可行<br>图中，浮动按钮（FAB）的投影比其他组件的投影更为柔和且面积更大，这样我们很容易就能看出浮动按钮的高度比蓝色卡片的高度要高。

在运动方面，投影不仅能为material对象运动的方向提供视觉暗示，还能展示material对象之间的高度变化（距离增加还是减少）。

不可行<br>图中是蓝色的material对象的前后变化。因为没有投影暗示material对象的高度，所以你根本不清楚其尺寸在增加还是高度在增加。 可行<br>图中是蓝色的material对象的前后变化。前者因为投影清晰且面积较小，所以高度较低。后者反之。 可行<br>图中是蓝色的material对象的前后变化。两者因为投影一致，所以很容易能看出material对象是尺寸在变化。

组件的投影规范
以下是各个组件的投影参考。如果在Material design规范中其他地方出现了与这些投影参考规范不同的组件投影，请与这里为准。

应用栏（App bar）
4dp

凸起按钮（Raised button）
默认状态（Resting state）: 2dp
按下状态（Pressed state）: 8dp

在电脑桌面端（desktop）上：
默认状态：0dp
按下状态：2dp
点击查阅关于 凸起按钮 的更多信息。

浮动按钮（Floating action button (FAB)）
默认状态：6dp
按下状态：12dp

卡片（Card）
默认状态：2dp
凸起状态（Raised state）：8dp

在桌面电脑端上的情况，请前往 内容布局 查阅更多信息。

菜单和子菜单（Menus and sub menus）
菜单：8dp
子菜单：9dp（每增加一个子菜单+1dp）

对话框（Dialogs）
24dp

**抽屉导航菜单和右抽屉（Nav Drawer & Right drawer） **
16dp

底部模态sheet （Modal bottom sheet）
16dp
译者注：
1.sheet是Material design语境中的词语，可以粗浅的认为是“纸片”的意思。如果换成正常的说法应该是对话框的意思，只不过官方为了配合语境而另作设定。
2.什么是「模态」，请点击了解

刷新指示器（Refresh indicator）
3dp

快捷入口/搜索栏
默认状态：2dp
滚屏状态（Scrolled state）：3dp

Snackbar
6dp
译者注：同样是Material design语境中的词语，不好表达故不做翻译。

**开关（Switch） **
1dp

对象关联 （Object relationships）

对象层级
在一个应用中，你如何去组织对象直接决定了对象移动的时候与其他对象之间的关系。比如该对象是否能够独立移动，还是说移动的时候受到其他对象约束。

所有对象之间都是以父子关系存在的。「子」级对象从属于它的「父」级对象。一个对象能成为整个系统或者另一个对象的子级对象。

译者注：这里讨论的对象就是material对象。material对象在「应用」中的表现就是我们熟知的一个个组件。

关于父-子级对象：
每个对象都有一个父级对象
每个对象都有不同数量的子级对象
子级对象继承父级对象的属性，如位置、选择、缩放和高度。
跟子对象处于同一层级的子级对象的级别相同。

例外
一些对象从属的父级对象是root，比如重要的UI组件，它的移动独立于其他对象。举个例子，浮动按钮不会跟随滚屏而移动。除此之外，还包括以下组件：

• 侧边导航菜单
• 操作栏
• 对话框

**相互作用 **
一个对象如何作用于另一个对象，取决于他们在父子层级中的位置。
举例说明:
子级对象和父级对象在z轴上的距离是最近的；其他非子级对象不能在父-子级对象之间插入。
一个正在移动的卡片（card）集合，他的所有子级卡片都跟随着移动。这个卡片集合控制着它的各个子级卡片移动。

抬起按钮（子级）跟随父级sheet滚动离开屏幕。 因为整个卡片（card）集合跟随屏幕滚动而移动，所以其各个子级卡片也会随着屏幕滚动而移动。浮动按钮之所以没有跟随屏幕滚动，是因为其父级对象没有因此滚动。

高度
如何决定某个对象的高度（即它们在z轴上的位置）取决于你想表达怎样的内容层级，以及当一个对象需要移动的时候是否独立于其他对象。