Material Design(4)

Material design

---

Elevation & shadows 海拔与阴影

物体在 material design 与物体在现实世界里具有相似的表现形式

在现实世界里，物体能够被堆叠或者贴在另一个物体上，但是不能够互相穿越。物体也能投射阴影和反射光。
Material design 反映出这些特性来建立一个用户比较熟悉的空间化的模型，且能够在不同app中表现一致。

Elevation 海拔

从一个表面的前端测量到另一个表面的前端，一个元素的elevation/海拔暗示了表面之间的距离和他阴影的深度。

Resting Elevation 静态海拔

所有的实体元素都有resting elevation/静态海拔。当组件在不同的app中有固定的resting elevations/静态海拔的时候，他们可能在不同的平台或者设备中有不同的resting elevation/静态海拔。

Dynamic elevation offsets 动态海拔偏移

Dynamic elevation offsets/动态海拔偏移是组件运动时相对于组件静态移动的距离

内容

海拔（安卓）
阴影
物体之间关系

Elevation(Android) 海拔（安卓）

海拔是一种两个表面沿着z轴的相对深度。

规范：

• ​测量海拔的单位与测量x，y轴的相同，通常是使用dp。因为实体元素有厚度（所有的实体都有1dp厚），所以海拔是从一个表面的顶部到另一个的顶部的距离。
• ​一个子物体的海拔是相对于其父物体的海拔。

图片与值是显示在安卓应用中的：

Resting elevation 静态海拔

所有的实体，不管尺寸的大小，都有一个静态海拔或者不在改变的默认海拔。如果一个物体改变他的海拔，它应该尽快返回它的静态海拔。
桌面的静态海拔低于所列元素2dp，以更好的适应鼠标和不能那个触摸的环境。

组件海拔：

• ​组件在不同的app中维持着一个固定的静态海拔。举个例子，浮动按钮的海拔在两个app中是相同的。
• ​组件在不同的平台和设备中可能有不同的静态海拔，这个取决于环境的深度。举个例子，TV比桌面有更深的深度，因为他拥有更大的屏幕和能被更远处所观察。相同的，TV和桌面都比移动端有更深的深度。

Responsive elevation and dynamic elevation offsets 响应海拔和动态海拔偏移

一些组件类型拥有响应海拔，意味着他们能够通过改变他们的海拔来响应输入（比如正常状态，焦点状态和点击状态）或者系统事件。这些海拔变化都固定地执行使用动态海拔偏移。
动态海拔偏移是组件运动时相对于组件静态移动的距离（俗称该移动多少的规定）。他们保证了海拔变化相同即使动作与组件类型不同。举个例子，相对于组件静态时，所有的组件在被按下而上升的海拔是相同的。
一旦输入时间完毕或者被关闭，组件将会回到他的静态海拔。

Avoiding elevation interface 禁止海拔干扰

拥有响应海拔的组件在静态海拔和动态海拔偏移之间移动的时候，可能会遭遇到其他组件。因为实体不能够穿越其他实体，所以组件应该使用任何方式来禁止干扰，无论是在一个组件基础上还是使用整个app布局。
在一个组件等级上，组件在他们制造干扰之前可以移动或者被删除。举个例子，一个浮动按钮能够消失或者移到屏幕外在用户选择一个卡片之前，或者他能够移动但一个snackbar出现的时候。
在布局等级上，设计你的app布局来最小化干扰出现的可能性。举个例子，浮动按钮的位置在卡片流的一边的话，就不会干扰用户选择卡牌。

ELEVATION(DP)	COMPONNENT
24	Dialog / Picker
16	Nav drawer / Right drawer / Modal bottom Sheet
12	Floating action button (FAB - pressed)
9	Sub menu(+1 dp for each sub menu)
8	Bottom navigation bar / Menu / Card (when picked up) / Raised button(pressed state)
6	Floating action button(FAB - resting elevation) / Snackbar
4	App Bar
3	Refresh indicator / Quick entry / Search bar(scrolled state)
2	Card(resting elevation) / Raised button (resting elevation) / Quick entry / Search bar (resting elevation)
1	Switch

Component elevation comparions 组件海拔比较

接下来的图表比较了组件的静态海拔和动态海拔偏移

在这份图表中，只有海拔尺寸和组件的布局是准确的。其他的尺寸和组件整体的布局只是为了例证。

一个使用了卡片布局的app例子，还有FAB（浮动按钮），另一个图表显示了组件在z轴上的海拔。

一个有侧边栏的app例子，另一个图表同样显示了组件在z轴上的海拔。

Shadows 阴影

阴影提供了重要的虚拟线索来体现出物体的深度和有方向性的移动。同样也是唯一的线索来暗示表面之间分隔的数量。一个物体的海拔决定了阴影的表现。

请勿：
没有阴影，没有东西可以暗示出FAB是与背景表面是分离的。

请勿：
Crisp(脆？) 的阴影能暗示FAB与蓝色薄片是分离的元素。然而，他们的阴影太过于相近意味着他们在同一个海拔上。

应该：
更软，更大的阴影暗示了FAB比拥有更稠密阴影的蓝色薄片的海拔更高

在运动中，阴影提供了关于物体运动方向和表面之间的距离是增加还是减少的有用的线索。

请勿：
没有阴影来暗示海拔，很难分辨出正方形是增加了尺寸还是增加了它的海拔。

应该：
阴影变得更加软和大表示了物体的海拔增加，相反，阴影更加稠密和小则是物体的海拔减少了。

应该：
在这个例子中，不变的阴影帮助用户理解了物体是在改变它的尺寸而不是它的海拔。

Component reference shadows 组件的参考阴影

接下来的组件阴影应该被用来作为典范。如果在这个部分的任意处发现了与接下来的参考阴影和组件阴影不同的地方，替换为参考阴影。

App bar

4dp

一个app bar的例子

Raised button

静止状态：2dp
按下状态：8dp

只对于桌面，raised button能够有以下海拔：
静止状态：0dp
按下状态：2dp

Floating action button (FAB)

静止状态：6dp
按下状态：12dp

Card

静止状态：2dp
上升状态：8dp

Menus and sub menus

Menu：8dp
Sub menus：9dp（每一个子菜单增加1dp）

Dialogs

24dp

Nav Drawer & Right drawer

16dp

Modal bottom sheet

16dp

Refresh indicator

3dp

Quick entry/Search bar

静止状态：2dp
滚动状态：3dp

Snackbar

6dp

Switch

1dp

Object relationships 物体之间关系

Object hierarchy 物体层次结构

你怎样组织物体或者物体的集合，决定了他们在app中怎么与其他物体关联的移动。物体能够独立移动或者被更高层次的物体约束。
所有的物体都是层次结构的一部分，所以有一种父级关系。关系中的子物体附属于父物体。物体能够是另一个系统或者物体的孩子。
父级关系特质：

• ​每个物体有一个父物体
• ​每个物体可能有一定数量的子物体
• ​子物体继承父物体的转化属性，比如位置，旋转，缩放和海拔
• ​物体在同一等级的结构中是兄弟

Exceptions 例外

一些项目的父物体是根，比如基础UI元素，能够独立的移动。比如，FAB不随着内容滚动。另一些元素包括：

• ​一个App的侧边栏
• ​action bar
• ​dialogs

Interation 互相作用

物体如何与另一个物体互相作用取决于他们在父级结构中的位置。
举个例子：

• ​子物体与他们的父物体有最小的z轴分隔；其他的物体不能插在父物体与子物体之间。
• ​在一个滚动的卡片集合中，卡片互为兄弟，所以他们全部都在一个串联中移动。他们都是卡片集合的子物体，所以被卡片集合控制他们的移动。

Elavation 海拔

你如何决定物体的海拔 - 他们在z空间的位置 - 取决于你想要表达的内容层级结构和一个物体是否需要能够独立的移动。

当父级滚动，上升按钮也随着滚出屏幕。

当卡片集合滚出屏幕外，他的子卡片也随着滚出屏幕。FAB仍然留在原地，因为它的父级没有滚动。