Material Design 层次 & 阴影

层次 & 阴影

Material Design 中的物体与物理世界中的物体有很多相似的特性。

在物理世界中,物体之间可以相互叠加和拼接,但是无法彼此交叉。物体也会投射出阴影,并且会反射光线。

Material Design 中的物体也拥有这些特性,并以此构建出用户熟悉的空间模型,在不同应用之间也是如此。

海拔高度

海拔高度是衡量从一个表面到另一个表面之间的距离,元素的海拔高度指明了元素与表面之间的距离以及阴影的深度。

静止状态海拔高度

所有元素都有一个静止状态的海拔高度。同一组件在不同应用中具有相同的海拔高度,但它们在不同的平台和不同的设备中可能有不同的海拔高度。

动态海拔高度偏移

动态海拔高度偏移是组件从静止状态向目标海拔移动的距离。

Material Design 的层次和阴影特性,模拟物理世界中物体的行为

海拔高度(Android) Expand and collapse content An arrow that points down when collapsed and points up when expanded.

海拔高度是相对深度或距离,是两个表面在 Z 轴上的距离。

规格:

  • 海拔高度的测量单位和 x 轴和 y 轴一样,通常是与密度无关的像素(dp)。因为材料元素有厚度(所有材料都是 1dp 的厚度),所以海拔高度被用来测量两个表面的顶部之间的距离。
  • 一个子元素的海拔高度是相对其父元素而言的。

这张图片和其中的海拔高度值是针对 Android 平台的。

海拔高度对应 Material Design 中两个表面间的距离

不同海拔高度的两个物体

静止状态的海拔高度

所有材料,无论尺寸多大,都有静止状态的海拔高度,或发生变化之前的默认高度。如果物体的海拔高度发生了变化,那么它会尽快回到静止状态海拔高度。

桌面端的静止状态的海拔高度比所列值低 2dp,以适应鼠标和非触控环境。

组件的海拔高度:

  • 同一组件在不用应用中,海拔高度相同。例如,不同应用中的浮动操作按钮的海拔高度都相同。
  • 同一组件在不同的平台和设备中,可能会有不同的海拔高度,这主要取决于环境深度。比如说,电视具有比桌面更大的深度,因为它的屏幕更大,用户的观看距离更远。同样的,电视和桌面的深度比移动设备更深。

响应式海拔高度和动态海拔高度偏移

某些类型的组件具有响应式的海拔高度,也就是说它们会根据用户的输入(例如,正常状态、聚焦、按下)和系统事件来改变自身的海拔。这些海拔高度的改变通常通过动态海拔高度偏移实现。

动态海拔高度偏移是组件从静止状态向目标状态移动的距离。它们确保在不同操作和组件类型下海拔高度的改变保持一致。例如,所有组件在被按下时,所增加的海拔高度是一样的。

一旦输入事件完成或取消,组件就会回到静止状态的海拔高度。

避免海拔高度冲突

有响应式海拔高度的组件,在静止状态和动态海拔高度偏移之间切换时,可能会穿透其他组件。材料不能彼此穿透,因此可以通过改变冲突组件的布局或整个应用的布局来避免这些冲突。

在组件级别上,组件可以在发生冲突之前移动或移除。例如,在用户拾起卡片前,浮动操作按钮可以消失或移动离开屏幕,或者在 snackbar 出现时进行移动。

在布局级别上,通过设计应用布局,来最大限度减少造成冲突的可能。例如,将浮动操作按钮定位在卡片流的一侧,这样当用户拾起一张卡片时,不会和浮动操作按钮造成冲突。

海拔高度(dp)

组件

24

对话框

选择器

16

抽屉式导航

右侧抽屉

底部卡片模态框

12

浮动操作按钮(FAB - 按下状态)

9

子菜单(为每个子菜单 +1dp)

8

底部导航栏

菜单

卡片(拾起时)

浮动按钮(按下状态)

6

浮动操作按钮(FAB - 静止状态)

Snackbar

4

应用栏

3

刷新指示器

快速入口/搜索栏(滚动状态)

2

卡片(静止状态)*

浮动按钮(静止状态)*

快速入口/搜索栏(静止状态)

1

开关

组件海拔高度对比

下图比较了组件的静止状态的海拔高度和动态海拔高度偏移。

Material Design 组件静态与动态海拔高度对比图

在此图中,只有组件的海拔高度和组件的布局是准确的。其他尺寸和总体布局仅用于作图。

Material Design 应用布局示例,包含卡片和浮动操作按钮

包含卡片和浮动操作按钮的应用布局示例,以及 Z 轴海拔高度的剖面图。

Material Design 抽屉式导航应用布局示例

一个带有打开的抽屉式导航的应用布局示例,以及 Z 轴海拔高度的剖面图。

阴影 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

阴影是一个重要的视觉提示,它表示了物体的深度和运动方向。它也是指示两个面之间的距离的唯一视觉元素。物体的海拔高度决定了阴影的外观。

浮动操作按钮无阴影,无法显示与背景的分离,违反 Material Design 原则

错误示例

没有阴影,无法指示出浮动操作按钮和背景表面是分离的。

相似阴影影响 Material Design 中元素高度感知

错误示例

锐利的阴影可以指示出浮动操作按钮和蓝色卡片是独立的元素。但上图中,它们的阴影太过相似,也就暗示了它们处于同一海拔高度。

浮动操作按钮的阴影表明其海拔高于蓝色卡片,符合 Material Design。

正确示例

更柔和、更大的阴影表示浮动操作按钮的海拔高度高于蓝色卡片。

在运动中,阴影可以指示出物体的运动方向、表面之间的距离是增加还是减小。

缺少阴影使正方形的海拔高度不明确,与 Material Design 设计原则相悖

错误示例

没有阴影指示海拔高度,就不清楚这个正方形是增加了大小还是增加了海拔高度。

Material Design 中,物体海拔影响阴影的柔和度和大小

正确示例

随着物体的海拔高度增加,阴影会变得更柔和、更大;随着物体海拔高度降低,阴影会变得更锐利、更小。

物体形状变化,阴影一致,体现 Material Design 风格

正确示例

在这个案例中,物体的阴影相同,表示物体正在改变形状,而不是改变海拔高度。

组件的阴影标准

下列组件的阴影应该被作为标准使用。如果你在本文档中其他地方找到的组件阴影和以下规范不符,请以此为标准。

应用栏

4dp

Material Design 中,应用栏的阴影

应用栏示例

浮动按钮
静止状态:2dp
按下状态:8dp

仅适用于桌面端,浮动按钮可以有以下海拔高度:
静止状态:0dp
按下状态:2dp

更多信息详见浮动按钮

Material Design 中,浮动按钮的阴影

浮动操作按钮(FAB)

静止状态:6dp

按下状态:12dp

Material Design 中,浮动操作按钮(FAB)的阴影

卡片

静止状态:2dp

浮动状态:8dp

仅适用于桌面端,详见内容块

Material Design 中,卡片的阴影

菜单和子菜单

菜单:8dp

子菜单:9dp(每个子菜单 +1dp)

Material Design 中,菜单的阴影

对话框

24dp

Material Design 中,对话框的阴影

抽屉式导航 & 右侧抽屉

16dp

Material Design 中,抽屉式导航 & 右侧抽屉的阴影

模态化底部卡片

16dp

Material Design 中,模态化底部卡片的阴影

刷新指示器

3dp

Material Design 中,刷新指示器的阴影

快速入口/搜索栏

静止状态:2dp

滚动状态:3dp

Material Design 中,快速入口/搜索栏的阴影

Snackbar

6dp

Material Design 中,Snackbar 的阴影

开关

1dp

Material Design 中,Switch 的阴影

物体的相互关系 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

物体层次结构

你如何组织应用中的物体或物体集合,决定了它们相对于彼此如何移动。物体可以彼此独立移动,但也被更高层次的物体约束着。

所有物体都是根据父-子关系描述的层次结构中的一部分。这些关系中的 “子” 指的是从属于其 “父” 元素的元素。物体可以是系统或其他物体的子元素。

父-子细节:

  • 每一个物体都有其父元素
  • 每一个物体都可以有任意数量的子元素
  • 子元素会继承父元素的变换属性,如位置、旋转、缩放和海拔高度
  • 同级的物体在层次结构中属于同一层

例外

根元素(例如主要 UI 元素)可以独立移动。例如,浮动操作按钮不随内容滚动。其他元素包括:

  • 应用的抽屉式导航
  • 应用栏
  • 对话框

交互

物体之间如何交互,取决于它们在父-子层次结构中的位置。

例如:

  • 子元素和它们的父元素的 Z 轴距离是最小的;其他物体不能在父元素和子元素之间插入。
  • 在滚动的卡片集合中,卡片之间是同级关系,所以它们会一起滚动。卡片是卡片集合的子元素,卡片集合会控制着它们一起移动。

海拔高度

如何确定物体的海拔高度 - 它们的 Z 轴位置 - 取决于要表达的内容的层次结构,以及它是否需要独立于其他物体进行移动。

当父元素滚动时,浮动按钮(子元素)会跟着一起滚动。

当卡片集合滚动时,它内部的所有卡片都会跟着一起滚动。但是浮动操作按钮保持在原地,因为它的父元素没有滚动。