Material Design（一）--初识

一：Material Design–概述

1. Material Design – 是将经典的设计原则和科技、创新相结合而创造的设计语言。
2. Material Design原则

• Material 是一种隐喻
  • 通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。
• 鲜明、形象、有意义
  • Material Design 设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。
• 有意义的动画效果
  • 动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。

二：单位 & 度量

1. 独立密度像素（dp）

• Dp 是独立密度像素的简称（Density-independent pixels）。是安卓设备上的基本单位，如同苹果设备上的 pt 一样，dp 与我们建图时的 px单位需要通过分析设备的 PPI值来换算。大家还记得 PPI公式吗？

  

• 那如果我们有了一个设备的 ppi值，然后使用公式即可知道这个设备里1dp等于多少像素了：

• dp*ppi/160 = px

• 比如这个设备的 PPI值是320，那么：1dp x 320ppi/160 = 2px。则，这个设备上1dp等于2像素。

• 编写 CSS 时，不用管 dp 或 sp，统一使用 px，dp 只在 Android 开发时使用。

1. 可缩放像素（sp）

• 在进行 Android 开发时，可缩放像素（sp）和 dp 功能一样，但仅用在字体上。1sp 的默认值和 1dp 一样。
• sp 和 dp 的主要区别是 sp 保留了用户的字体设置。在辅助功能中设置了大号字体的用户会看到和他们的设置相匹配的字体大小

三： 设计理念

1. Z轴的概念

• 我们都知道什么是三维：三维就是X轴（左右）、Y轴（上下）、Z轴（前后）组成的立体世界，而二维就是只有X和Y轴的平面世界。我们知道手机界面是一个平面二维的空间，而 Material Design 通过二维的一些表达手段，比如投影、动效等构建出了Z轴（前后）的概念。

1. Z轴的投影

• 不同投影暗示了不同元素的高度，我们可以理解为如同我们桌子上的几张纸层叠在一起，那么我们认为重要的纸在其他纸张之前，它的投影是最高的。所以在 Material Design 中投影最高的代表Z轴最高值，也是最重要的内容。

• ▶️在正面和侧面来观看，1dp和8dp海拔高度产生出阴影大小的不同

3. 界面中的Z轴应用

• 不同的功能使用不同的Z轴高度可以表明他们的重要性和逻辑层级关系。并且这种投影是由编程完成的并非切图，这点需要注意一下。Material Design 为第三方开发者提供了动态且真实的投影和Z轴高度设置。

• △ APP中不同的Z轴高度

• △ 顶部应用栏（A）、卡片式设计（B）和悬浮球FAB（C）高度的对比

• △ 界面中海拔高度对照