Material Design的概念和认知

概述

• Material Design：材料设计语言，在2014年的 Google I/O 上推出的全新的设计语言。
• Material Design 能用来干什么？
  • 旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
  • 作为谷歌的官方设计语言，不仅能用于安卓设备的 UI 设计上、网页设计、甚至电脑客户端的 UI 都能运用上 。
• Google 的 Material Design 并不是简单的扁平设计，而是一种注重卡片式设计、纸张的模拟、使用了强烈对比色彩的设计风格。这种风格形成了独一无二的 Material Design。

设计理念

• Z轴的概念
  • 三维就是X轴（左右）、Y轴（上下）、Z轴（前后）组成的立体世界，而二维就是只有X和Y轴的平面世界。
  • 我们知道手机界面是一个平面二维的空间，而 Material Design 通过二维的一些表达手段，比如投影、动效等构建出了Z轴（前后）的概念。
    
• Z轴的投影
  • 不同投影暗示了不同元素的高度，我们可以理解为如同我们桌子上的几张纸层叠在一起，那么我们认为重要的纸在其他纸张之前，它的投影是最高的。所以在 Material Design 中投影最高的代表Z轴最高值，也是最重要的内容。
    
• 界面中的Z轴应用
  • 不同的功能使用不同的Z轴高度可以表明他们的重要性和逻辑层级关系。并且这种投影是由编程完成的并非切图。Material Design 为第三方开发者提供了动态且真实的投影和Z轴高度设置。
    
  • APP中不同的Z轴高度
    

补充：

• 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像素。（也就是和iPhone 6类似的高清屏）。

• Material Design设计案例及资源网站
  • RumChata
    Website: http://www.rumchata.com/age-gate
    
    这个网站结合了MD设计的物理美学风格，通过创建与现实事物中相似的外观及功能，给用户提供了一种简约色彩缤纷、但看起来简单直观的体验。
  • MaterialUP
    Website: https://www.uplabs.com/search?q=material design
    
    MaterialUp的网站主题就是关于MaterialDesign设计，从网站示例、移动APP截图、工具、提示等等都有提供。整体设计风格也是采用了多种Material Design设计手法，本身就是很好的一个设计案例。

如果你不熟悉Material Design，请一口吃下这篇干货！

12个优秀的国外Material Design网站案例