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 中,开关的阴影

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

物体层次结构

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

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

父-子细节:

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

例外

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

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

交互

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

例如:

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

海拔高度

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

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

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