【Material Design视觉设计语言】Material Design设计概述

【Material Design视觉设计语言】Material Design设计概述

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：allenwells@163
博客：
Github：

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

一 Material Design的环境

Material Design的环境模拟的是现实世界，它是一个三维立体空间，有x、y、z三个坐标轴，如下所示：

• x和y有轴模拟显示平面
• z轴垂直于显示平面，每个应用组件元素占据一定位置并且有一个1dp的厚度标准。

1.1 光影关系

光影关系是虚拟的光线照射使得场景中的对象投射出阴影。

阴影有两部分组成：

• 顶端表达深度的阴影
• 底端表达边界的阴影

下面我们先来直观地看一下不同阴影的效果。

1.1.1 光影关系的产生

光影关系由两种投射产生，如下所示：

• 直射光产生的投影

• 散射光产生的投影

• 直射光和散射光混合产生的投影

1.1.2 光影关系的作用

• 光影关系标示了不同平面之间分离程度的视觉线索。

1.2 组件高度

组件高度是z轴上两个不同平面之间的一种相对深度或距离。

• 高度的单位是dp
• 子组件的高度依赖于父组件的高度

1.2.1 静止高度

静止高度即默认高度它是不会变化的，当一个组件的高度发生变化时，它会尽快恢复静止高度。

• 组件的静止高度在我们的应用中同城是一个常量。
• 同一组件的静止高度在不同平台可能不一样，比如组件在电视上就比手机上的静止高度大一些。

1.2.2 感应高度

感应高度是应用组件根据用户的输入或系统事件来改变高度，这些高度的变化是通过动态高度的偏移生产的，一旦输入事件完成或取消，组件会自动回到静止高度。

1.2.3 高度冲突

处于感应高度的元素在静止高度与动态高度的偏移之间移动的时候可能会遇到其他的元素，从而产生组件的高度冲突。

下面我们来看一下常见组件的静止高度和动态高度的偏移，如下表所示：

上述表格对应的图表描述如下所示：

下面我们来看一个带有多种组件的应用界面的布局是如何处理不同组件的高度的。

举例1

包含卡片和FAB应用布局的实例与它在Z轴上元素高度的横截面图表

举例2

包含开放导航抽屉的应用布局实例与它在Z轴上元素高度的横截面图表

1.2.4 计算高度

在做应用组件的布局中，我们如何确定每个组件的高度呢？

确定某些对象的高度（即它们在Z空间的位置）取决于我们想描述的内容层次以及某一个对象是否需要相对于其他对象自主移动。

举例

随着父表的移动，升高的按钮（它的子元素）会伴随着它移出屏幕。

随着卡片集合卷出了屏幕，它的子卡片也会随之卷出屏幕。浮动动作按钮保留在某一地点因为它的父元素没有被卷动。

下面列举下常用应用组件的参考高度：

应用条

4dp

浮动按钮

静止状态：2dp

敲击状态：8dp

浮动动作按钮

静止状态：6dp

敲击状态：12dp

卡片

静止状态：2dp

选中状态：8dp

菜单和子菜单

菜单：8dp

子菜单：9dp（每个子菜单增加1dp）

对话框

24dp

导航抽屉和右抽屉

16dp

底部单页

16dp

刷新按钮

3dp

快速查询/搜索框

静止状态：2dp

滚动状态：3dp

SnakeBar

6dp

切换按钮

1dp

二 Material Design的属性

2.1 材料的物理属性

• 材料具有变化的长度尺寸和均匀的的厚度。

• 材料的高度和宽度是可变的。

• 材料会因为材料元件之间的相对高度（即Z 轴位置）的变化而自然的产生阴影。

• 内容可以任何形式显示在材料上，但内容不会额外增加材料的厚度

2.2 材料的形状变化

• 材料可以选择它的水平面增长和收缩，但是不能弯曲或折叠

• 材料可以自由的组合和拆分

2.3 材料的位置变化

• 材料能在环境中的任何位置自动产生和消失

• 材料可以在各个轴上自由移动