3.1 环境-表面（Material基础）

基础简介

Material Design定义了UI区域、表面和组件的表现特质。使用“基础”来设计和规划应用程序能使设计重点兼顾整体和细节。

这一部分（3-12章）描述了Material环境布局、潜在交互以及相关特质（颜色、形状和动效等）的综合表现。

表面

Material Design通过使用表面（surface）、深度（depth）和阴影（shadows）来反映其三维特质。

目录

环境

属性

特征

环境

物理世界

在物理世界中，物体间能进行堆叠或依附，但不能相互穿透。它们可以投影或者反光。

Material Design通过表面呈现和UI移动方式来反映这些特质。表面与其在三维中的表达方式类似于物理世界中的移动。这种空间模型也可以在应用程序中统一使用。

深度

Material Design的UI在环境中使用光线、表面和投影来表现三维空间。环境中的元素在不同的z轴深度上以水平、垂直的方向移动。

在web端，UI通过操纵y轴来表现3D空间。

注：原文为"On the web, the UI expresses 3D space by manipulating the y-axis."，此处本人理解为作者将x-z轴默认成web端的平面，所以操作y轴以表现空间。不过通常我们会将x-y看作平面，此处也许用操纵“z轴”、“各轴”更合适）

使用x、y、z轴的3D空间

属性

在Material Design中，材料表面具备统一稳定的特征和行为。

维度

材料有可变的x、y轴维度（dp为度量单位）和一致的厚度（1dp）。

正确示例（绿色）

材料高度和宽度可以变化。

错误示例（红色）

材料厚度应该保持为1dp。

阴影

不同海拔（高程）材料表面会投射出不同的阴影。

正确示例

不同的阴影表示材料表面不同的海拔。

1. 顶视图

2. 等轴3D视图展示了光线在材料上沿z轴上下移动时投射的阴影。

错误示例

海拔无变化时不要用阴影来表达。

1. 顶视图

2. 等轴3D视图只用了颜色（此处颜色意为阴影的大小、深浅变化）来描绘阴影，而不是光线和海拔。

像素

材料的像素是无限的。

材料具备无限的像素。

内容

在材料中，内容可以以任何形状和颜色来显示。内容在材料上没有额外的厚度。内容不以单独的层来表现。

正确示例

材料可以显示任何形状和颜色。内容可以独立呈现，但是受限于材料的边界。

正确示例

内容行为与表面行为相对独立。

正确示例

内容行为可以由材料的行为来决定。

物理特性

材料是固体，用户输入和交互不能穿透材料。

正确示例

输入事件只能影响材料表面。

错误示例

输入事件不能穿透材料。

多个材料元素不能同时占用相同的点。

正确示例

为避免多个材料元素同时占用相同的点，可以通过海拔来分开。

错误示例

多个材料元素不能同时占用相同的空间点。

材料间不能相互穿透。例如，在改变海拔时，一个材料表面不能穿透其它的材料表面。

错误示例

材料间不能相互穿透

材料没有气体特性。

       

错误示例

材料没有气体特性

正确示例

材料通过改变不透明度、形状和位置来进入或退出。

材料没有像液体或胶一样的流动性，不过内容的显示可以利用这些特点。

错误示例

材料没有像液体或胶一样的流动性。

错误示例

材料没有液体的行为特性。

材料转换

材料可以改变形状

材料的形状变化

材料可以改变透明度

1. 材料可以统一改变整个表面的透明度

2. 材料可以改变部分表面的透明度

材料只能沿着它所在的平面拉伸。

正确示例

材料只能沿着它所在的平面拉伸。

材料应只在其UI的深度内弯曲或折叠。

错误示例

材料弯曲或折叠不能超出此UI的深度。

多个材料表面可以结合成一个材料表面。

多个材料表面结合成一个材料表面。

材料分离后可以重新结合。例如，从表面移动材料的一部分后将重新变为一个整体。

材料可以分离并重新变为整体。

移动

材料可以在环境中的任何地方自发地形成或消失。

材料可以自发形成或消失。

材料可以沿着任意轴移动

材料可以沿着不同的轴来移动。

材料表面可以协同移动。

材料表面的协同动作。

沿z轴的动效是典型用户交互的结果。

材料表面通过用户交互触发z轴动效。

特征

基础材料表面

基础材料表面特征为不透明白色、1dp厚度和投影。所有Material Design中的UI元素都是从这个表面转化而来。

行为

材料表面可以表现为以下几种形式：

• 固定表面在所有交互中都保持相同尺寸。

• 可拉伸表面（外表拉伸）可以沿着一条或多条边来增大或收缩，达到界限尺寸后变成固定表面。

• 可延展表面（内容延展）在交互时保持尺寸不变。它们可以在区域内通过滚动来显示额外的内容。当到达界限后，它们在对应的滚动方向上表现为固定表面。

材料表面可以通过初显内容确定规格大小。在所有的交互行为中，表面都保持尺寸不变。——固定表面

材料表面规格可以沿着一条或多条轴线增长，以容纳更多的内容。——可拉伸表面

材料表面规格保持固定，但内容可以在表面内滚动延展。——可延展表面

组合表面

表面可以分成多个区域来显示不同的行为类型。

单个表面可以包含多种可延展子表面，例如一个可延展内置地图（1）另一个可滚动列表（2）相对独立。

卡片可以通过拉伸来显示更多区域，而区域卡片的内容能独立滚动。

可拉伸表面

可拉伸表面在达到界限之前都可以伸展，达到完整表面时变成固定表面。表面可以在垂直、水平或同时两个方向上伸展。

一般来说，用户与表面的交互只在一个方向上伸展。例如，点击“更多详情”将触发卡片在垂直方向上的增长，可以显示更多的内容。

材料伸展可以只在垂直方向上。

材料伸展可以只在水平方向上。

材料可独立或同时沿着水平和垂直方向来进行伸展。

表面位置与移动（x/y）

表面可以在x轴和y轴上保持固定的位置，也可以朝任意方向移动。

表面移动可以限制在单条轴上，允许一次在一条轴上移动，也允许同时沿着两条轴的方向移动。

表面可以保持固定位置。顶部应用栏（1）保持固定的位置，后面的卡片集（2）纵向滚动。

表面（1，2）可以在任意方向（纵横轴）上移动，但是限制了一次只能在一个方向上。

表面可以任意方向移动。

表面间可以相对独立地移动，也可以相互影响或跟随。

跟随移动可以基于多种方式，例如相邻的一个表面随着另一个的扩展而移动，以及表面间的视差比例移动等。

表面可以相对独立地移动。

一个表面可以跟随另一个表面来移动。

表面不透明度

材料表面可以透明、半透明或者不透明。

文字显示在透明或半透明的表面上时，可能需要对背景进行处理，以保持可读性。

透明表面缺少清晰的边，很难辨明表面的起始、末尾以及内容的归属。

谨慎使用

1. 透明或半透明表面上的内容可能需要通过背景处理来保持可读性。

2. 等轴视图

错误示例

1. 不要使用全透明表面，由于没有不透明度，很难分清内容的归属。这个顶部应用栏为全透明，导致不能确认文本是在应用栏还是在底部表面上。

2. 等轴视图

遮罩

遮罩是一个临时处理方式，用来降低表面信息的突出程度。它会将用户的注意力引导集中在遮罩以外的界面上。

遮罩可以通过多种方式实现，包括：

• 加深或提亮表面和内容

• 降低表面和内容的不透明度

界面中有多个表面时可以使用遮罩。遮罩能出现在任何海拔高度上，可以是前景或者背景。

1. 遮罩出现在背景内容上时，前景内容将吸引更多的注意力。

2. 遮罩提亮了前层表面中的内容，将注意力引导到后层表面上。

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考。