Android 美学设计基础 <2>

我们接着上期的项目进行分享。

1.2.2 Elevation (仰角)

仰角只的是不同的素材块在Z轴上的选对位置

仰角的测量方式

这里只的是两个平面在z的距离，记住我们默认每个平面都是1dp的厚度

1图是我们看到的两个平面 下方的这个在上，因为有阴影

2图我们测量他们直接的距离 为7dp

仰角系统

在我们设计的时候，页面中所有的元素，都会有一个仰角的值，这就是我们说的仰角系统

不同的素材，在拥有对应的仰角数值的时候，会完成以下的事情：

1. 让各自的素材在自己对应的z值附近完成水平的移动（滑动我们的侧栏）

2. 反应不同的元素的位置关系。比如我们可以通过一个阴影的效果来表现一个按钮是和他下面的平面是分开的。

3. 可以让用户去集中注意力到我我们需要让他们的注意的东西上，比如系统弹出的对话，在仰角上是最上层的。

还有 平级别的元素中，我们往往让他们拥有一样的仰角数值

仰角在交互中的变化

在交互的过程中，我们有时候希望我们交互的元素在仰角上会发生改变来呈现比较好的表现效果。而在交互完成后，仰角回复默认值

在按下按钮后，养殖值变为8dp

仰角干涉

在我们的元素在他固定位置和移动位置之间发生移动时，我们不希望他与其他的元素发生碰撞，

我们通过两个方式来避免

1. 如果我们的一个页面需要穿透一个按钮的时候，那我们让这个按钮短暂的消失

2. 我们只移动部分页面，让他上方可以畅通无阻

描绘仰角

我们一般会用三种简单的方式来呈现仰角

1. 我们会给他一个很明确的边界，让他和周围的元素可以轻松区分开

2. 我们会让他遮盖住一部分其他的平面

3. 和其他的平面保持一定的距离

平面的边界

常用的来表现边界的方法有：

1. 用阴影来表现边界

2. 使用不同的颜色来变现边界

3. 使用不同的透明度来变现边界

平面的遮盖

这个在一定程度上可以让用户很明确平面之间的位置关系

距离

通常，我们会使用变暗的背景或者是阴影效果，来表现平面之间的距离效果。如下

阴影效果，控制阴影的大小来变现距离感

仰角的运动效果

我们通常会使用下列运动效果：

1. 改变阴影的显示效果（阴影变大表明平面在往上移动）

2. 显示重叠（一个平面可以全部或者部分覆盖其他所有平面）

3. 改变大小（一个页面也变大来盖住其他的页面）

4. 视差效果（不同的页面 移动速度不同 造成视差的效果）

不同仰角他们之间的关系

一些内容如果他们有关系，那他们在仰角位置上，可能会选择相似的值

首先，我们先看不同的仰角位置，内容的关系

1. 可能为了突出更重要的内容

2. 引起注意

3. 比如滑动按钮，来控制他后面的所有内容

在设计上，一些常用的仰角值：

Component	Default elevation values (dp)
Dialog	24
Modal bottom sheet Modal side sheet	16
Navigation drawer	16
Floating action button (FAB - pressed)	12
Standard bottom sheet Standard side sheet	8
Bottom navigation bar	8
Bottom app bar	8
Menus and sub menus	8
Card (when picked up)	8
Contained button (pressed state)	8
Floating action button (FAB - resting elevation) Snackbar	6
Top app bar (scrolled state)	4
Top app bar (resting elevation)	0 or 4
Refresh indicator Search bar (scrolled state)	3
Contained button (resting elevation)	2
Search bar (resting elevation)	1
Card (resting elevation)	1
Switch	1
Text button	0
Standard side sheet	0

不同组件常用的仰角适宜图