Material Design 材料属性

材料属性

材料自身有一些固定的特性和行为。

了解材料的这些特性,会有助于你用一种和 Material Design 的构想更一致的方式来使用材料。

材料的特性

固体的
在空间中占据一个独一无二的位置
不可穿透
形状可变
仅允许沿着当前所在平面改变大小
坚硬的
可以添加到其他材料中
可以独立、分割和复原
可以被创建和销毁
可以在任何轴上移动

Material Design 中材料的特性和行为解析

物理属性 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

材料在 x、y 轴上有不同的尺寸(计量单位为 dp)和统一的厚度(1dp)。

Material Design 中,材料的长度和宽度可调整

正确示例

材料的长度和宽度是可以改变的。

Material Design 中,所有材料厚度为 1dp

错误示例

所有材料都是 1dp 的厚度。

材料会投射出阴影。

阴影是由于元素之间的相对高度(Z 轴)而自然产生的。

正确示例

阴影反映了材料的元素之间的相对高度。

错误示例

阴影不是通过对材料着色产生的。

内容可以以任何形状和颜色显示在材料上。内容不会增加材料的厚度。

正确示例

材料可以展示任何形状和颜色。

内容看起来可以独立于材料,但是会被限制在材料的边界内。

正确示例

内容的行为可以和材料的行为互相独立。

材料是固态的。

输入事件不能穿透材料。

Material Design 中,只有最前面的材料响应输入事件

正确示例

只有在最前面的材料才会响应输入事件。

Material Design 中,输入事件不能穿透

错误示例

输入事件不能穿透材料。

多个材料元素不能同时出现在同一空间中的相同位置。

利用高度区分 Material Design 元素,避免重叠

正确示例

利用高度来区分材料元素,以防止多个材料元素同时占用空间中的相同位置。

多个 Material Design 元素不能重叠

错误示例

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

材料之间不能相互交叉。

例如,当改变材料高度时,这片材料不能从另一片材料中穿过。

错误示例

材料之间不能相互交叉。

材料的转换 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

材料可以改变形状。

材料可以改变形状。

材料只能在当前所在平面内伸缩。

正确示例

材料只能在当前所在平面内伸缩。

材料不能弯曲或折叠。

错误示例

材料不能弯曲或折叠。

多片材料可以组合成一片材料。

多片材料可以组合成一片材料。

分割之后,材料可以复原。例如,如果你从一片材料中移动了其中一部分,这部分材料会重新回到那片材料中,恢复成一整片材料。

材料可以被分割和复原。

材料的移动 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

材料可以在环境中的任何地方自动创建或销毁。

材料可以自动创建或销毁。

材料可以沿着任何轴移动。

材料可以沿着任何轴移动。

Z 轴的运动通常是用户和材料交互的结果。

Z 轴的运动是用户和材料交互后产生的。