Material Design – 高度与阴影

高度与阴影

Meterial Design中对象的特性与物质世界中对象的特性类似。

在物质世界中,对象可以与另一个对象堆叠或者紧贴在一起,但是不能互相通过。对象同样也可以投射阴影以及反射光线。

 

Meterial Design体现了由这些特性所形成的空间模型,不仅可以为用户所熟知,也可以在所有的应用程序中保持一致。

高度

从一个元素的表面到另一个元素的表面,即为这个元素的高度,也可以理解为这个元素表面与其影子深度之间的距离。

 

默认高度

所有的对象元素均有一个默认高度。不同应用中的组件可能有着一致的默认高度,但在不同平台或设备中却可能有着不同的默认高度。

 

动态高度坐标

动态高度坐标是组件向其初始高度靠近时的目标高度。

高度(Android)

高度可以理解为两个元素表面之间在z轴上的相对深度或距离。

规范:

高度在x轴和y轴上是以相同单位进行测量的,具体来讲都是以dp为单位进行测量的。因为所有实体均含有1dp的深度,所以在z轴上的测量为一个实体的表面到另一个实体的表面的距离。

一个子对象的深度是依赖于父对象的高度的。

显示的图像和值用于Android应用程序。

两个对象间高度的测量方式

默认高度

所有的实体对象,不管何止尺寸,均定义有一个默认高度,或一个不会被改变的初始高度。如果一个对象的高度有所改变,那么其应该尽可能快的恢复到默认高度。

为了适应鼠标及非触摸操作,下表中桌面环境下高度均为2dp。

组件高度

相同的组件在不同的应用中会保持一致的默认高度。例如,一个浮动按钮的高度不会在不同应用中有所不同。组件在不同平台或者设备间可能会有着不同的默认高度,具体高度取决于具体环境的深度。例如,电视比用户桌面有着更大的屏幕和视野,自然有着比用户桌面更高的深度。类似的,电视和用户桌面在深度上都要高于手机。

响应式高度和动态高度坐标

有些组件有着响应式高度,意味着其高度会随着用户的输入状态(如正常状态,获取焦点状态或按下状态等)或系统事件的改变所改变已进行适应。而这些高度的改变则需要由动态高度坐标加以实现。

动态高度坐标是组件向其默认高度靠近时的目标高度。此举主要为确保高度的改变是与组件的类型及操作保持一致的。例如,所有的组件被按下时的高度变化相比于其默认高度都是一致的。

一旦输入事件被完成或被取消,组件会立即恢复其默认高度。

避免高度干扰

有着响应式高度的组件在其默认高度和动态高度坐标间移动时可能会遭遇其它组件。因为实体是不能穿越另一个实体的, 所以组件应该避免互相干扰,无论是基于每一个组件的基础还是基于整体的应用布局。

在组件层面上,组件是会在可能引起干扰时主动或被动被移动的。例如,一个浮动按钮(FAB)可能会在用户拾起一张卡片时消失或移动的,或者当snakebar出现是其会移动。

在布局层面上,应该要合理组织你的布局来尽可能的减少干扰的出现。例如,可以将浮动按钮置于卡片的一侧,这样卡片再被拾起时便不会与浮动按钮互相干扰。

高度(dp)组件
24对话框
选择器
16导航抽屉
右侧抽屉
底部动作条
12浮动按钮(按下状态)
9子菜单(每个子菜单1dp)
8底部导航栏
菜单
卡片(抬起状态)
6浮动按钮(抬起状态)
4应用程序栏
3刷新指标
快速输入/搜索栏(滚动状态)
2卡片(静止状态)
1开关

组件高度比较

下面的图标对组件的默认高度及动态高度坐标进行了比较。

上图中,只有高度尺寸和组件的布局是准确的,其它尺寸以及组件的整体布局仅仅用于图示

一个包含卡片及浮动按钮,连同其沿z轴的组件高度标注截面图的应用程序布局示例

一个有着开放的导航抽屉以及组件z轴高度界面图的应用程序布局示例

阴影

阴影为对象的深度及定向移动提供着很重要的视觉提示。其也是不同对象间表面进行分离的唯一视觉线索。一个对象的高度决定着其阴影。

错误

如果没有阴影,那么将没有任何迹象会表明浮动按钮和背景是分离的。

错误

清晰的阴影可以表明浮动按钮和蓝色背景区域是相互独立的。但是由于二者的阴影非常类似,导致会被误认为其二者有着相同的高度。

正确

更柔和更大的阴影表明着浮动按钮相对于有着比较清晰阴影的蓝色背景有着更高的高度。

在运动中,阴影提供有关对象运动方向的线索,具体为对象相对表面距离是在增加还是减少。

错误

如果没有阴影来反应高度,那么将无法判断这个正方形只是在尺寸上进行了增大亦或是在高度上进行增加。

正确

阴影随着对象高度的增加变得更大更柔和,相反的随着对象高度的减少变得更小更清晰。

正确

在这种情况下,可以帮助用户清晰的意识到对象正在改变尺寸而非高度。

组件的参考阴影

以下组件的阴影应该被当做规范进行使用。如果在这个规范中的其他参考阴影和组件阴影之间有任何差异,请以此参考阴影为准。

APP bar

4dp

app bar示例

凸起按钮

默认高度:2dp

凸起高度:8dp

 

用户电脑桌面相关尺寸

默认高度:0dp

凸起高度:2dp

 

更多信息请参考凸起按钮章节

浮动按钮(FAB)

默认高度:6dp

按下高度:12dp

卡片

默认状态:2dp

凸起状态:8dp

电脑桌面相关尺寸,请参考Content blocks

菜单与子菜单

菜单:8dp

子菜单:9dp(每一级子菜单+1dp)

对话框

24dp

抽屉导航&右侧抽屉

16dp

标准按钮列表

16dp

刷新指示标

3dp

快速输入/搜索栏

默认状态:2dp

滚动状态:3dp

snakebar

6dp

开关

1dp

对象间关系

对象层级

如何组织对象或对象的集合决定了它们将如何在应用中相互移动。对象可以相互独立移动,也可以受层次结构中更高层次的对象约束。

所有对象都是按父子关系描述的层次结构的一部分。这些关系中的“子”指的是从属其“父”元素的元素。对象可以是系统或另一个对象的子对象。

父子对象规范:

每一个子对象均有一个父对象

每一个父对象可能含有多个字对象

子对象会继承父对象的相关属性,如位置,旋转,规模或者高度

兄弟对象是指有着同一层级的对象

当父级列表滚动时,凸起按钮(父级列表的子对象)也随之一起滚动

例外

项目父对象为根,例如初级UI元素会相对于其它元素更独立。具体例如浮动按钮不会随着内容的滚动而一起滚动。其它类似组件如下:

应用侧边抽屉导航

响应栏

对话框

交互

对象间如何进行交互取决于它们在父子结构层级中的具体位置。

例如:

子对象与其父对象间有着最小的间隔,那么其它对象无法再插入二者之间。

在滚动卡片集合中,卡片是彼此的兄弟对象,因此它们串联在一起进行移动。它们是卡片集合对象的子对象,且结合可以控制它们的移动。

高度

如何决定对象的高度(即其在z轴的位置),取决于对象需要表达的内容以及对象是否需要独立于其它对象单独移动。

作为一个卡片集合,其子对象卡片会随着集合的滚动一起进行滚动。而浮动按钮因为其父对象不属于滚动对象则其可以保持原位置不变