初     识

        Material Design语言的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的Gmail和Calendar。大家可能还会记得,看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,界面更干净、更简约。在安卓平台上,这种新界面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

一、材料/Material

Material Design 里的材料/Material实际上是一种虚构出来的材料,:厚度无限薄(1dp),面积 无限大,能变换造型,也能按照规律移动 —— 你可以把它当做一张纸(事实上,Material Design 曾一度传说要改名为Quantum Paper - 量子纸):

Material Design Lite

MDL中定义了一组样式类mdl-shadow--Ndp,用于声明材料的阴影,N的有效取值为:2/3/4/6/8/16。

为元素应用阴影样式类很简单:

<!--为元素声明2dp的阴影-->
<any class="mdl-shadow--2dp">...</any>

 

二、色彩/Color

Material Design中的色彩灵感来自于现代建筑、道路标识、路面标记及运动场等 大胆运用色调、高光和阴影,充满动感的场景。

Material Design Lite

在MDL中,我们可以使用样式类mdl-color--{palette}-{hue}来设置背景色,使用样式类 mdl-color-text--{palette}-{hue}来设置前景色:

<div class="mdl-color--red mdl-color-text--grey-50">
    this is a gray text on red background.
</div>

 Material Design完整的调色板集。每一行是一个调色板, 每一列表示一个色调:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>badge</title>
    <link rel="stylesheet" href="lib/material.min.css">
    <script src="lib/material.min.js"></script>
    <link rel="stylesheet" href="lib/icon.css">
</head>
<body>
<table class="ez-palette">
    <tr>
        <td>Color/Hue</td>
        <td>50</td><td>100</td><td>200</td><td>300</td><td>400</td><td>500</td>
        <td>600</td><td>700</td><td>800</td><td>900</td>
        <td>A100</td><td>A200</td><td>A400</td><td>A700</td>
    </tr>
    <tr>
        <td>Red</td>
        <td>#ffebee</td>
        <td>#ffcdd2</td>
        <td>#ef9a9a</td>
        <td>#e57373</td>
        <td>#ef5350</td>
        <td>#f44336</td>
        <td>#e53935</td>
        <td>#d32f2f</td>
        <td>#c62828</td>
        <td>#b71c1c</td>
        <td>#ff8a80</td>
        <td>#ff5252</td>
        <td>#ff1744</td>
        <td>#d50000</td>
    </tr>
    <tr>
        <td>Pink</td>
        <td>#fce4ec</td>
        <td>#f8bbd0</td>
        <td>#f48fb1</td>
        <td>#f06292</td>
        <td>#ec407a</td>
        <td>#e91e63</td>
        <td>#d81b60</td>
        <td>#c2185b</td>
        <td>#ad1457</td>
        <td>#880e4f</td>
        <td>#ff80ab</td>
        <td>#ff4081</td>
        <td>#f50057</td>
        <td>#c51162</td>
    </tr>    
    <tr>
        <td>Purple</td>
        <td>#f3e5f5</td>
        <td>#e1bee7</td>
        <td>#ce93d8</td>
        <td>#ba68c8</td>
        <td>#ab47bc</td>
        <td>#9c27b0</td>
        <td>#8e24aa</td>
        <td>#7b1fa2</td>
        <td>#6a1b9a</td>
        <td>#4a148c</td>
        <td>#ea80fc</td>
        <td>#e040fb</td>
        <td>#d500f9</td>
        <td>#aa00ff</td>
    </tr>       
    <tr>
        <td>Deep Purple</td>
        <td>#ede7f6</td>
        <td>#d1c4e9</td>
        <td>#b39ddb</td>
        <td>#9575cd</td>
        <td>#7e57c2</td>
        <td>#673ab7</td>
        <td>#5e35b1</td>
        <td>#512da8</td>
        <td>#4527a0</td>
        <td>#311b92</td>
        <td>#b388ff</td>
        <td>#7c4dff</td>
        <td>#651fff</td>
        <td>#6200ea</td>
    </tr>       
    <tr>
        <td>Indigo</td>
        <td>#e8eaf6</td>
        <td>#c5cae9</td>
        <td>#9fa8da</td>
        <td>#7986cb</td>
        <td>#5c6bc0</td>
        <td>#3f51b5</td>
        <td>#3949ab</td>
        <td>#303f9f</td>
        <td>#283593</td>
        <td>#1a237e</td>
        <td>#8c9eff</td>
        <td>#536dfe</td>
        <td>#3d5afe</td>
        <td>#304ffe</td>
    </tr>         
    <tr>
        <td>Blue</td>
        <td>#e3f2fd</td>
        <td>#bbdefb</td>
        <td>#90caf9</td>
        <td>#64b5f6</td>
        <td>#42a5f5</td>
        <td>#2196f3</td>
        <td>#1e88e5</td>
        <td>#1976d2</td>
        <td>#1565c0</td>
        <td>#0d47a1</td>
        <td>#82b1ff</td>
        <td>#448aff</td>
        <td>#2979ff</td>
        <td>#2962ff</td>
    </tr>        
    <tr>
        <td>Light Blue</td>
        <td>#e1f5fe</td>
        <td>#b3e5fc</td>
        <td>#81d4fa</td>
        <td>#4fc3f7</td>
        <td>#29b6f6</td>
        <td>#03a9f4</td>
        <td>#039be5</td>
        <td>#0288d1</td>
        <td>#0277bd</td>
        <td>#01579b</td>
        <td>#80d8ff</td>
        <td>#40c4ff</td>
        <td>#00b0ff</td>
        <td>#0091ea</td>
    </tr>      
    <tr>
        <td>Cyan</td>
        <td>#e0f7fa</td>
        <td>#b2ebf2</td>
        <td>#80deea</td>
        <td>#4dd0e1</td>
        <td>#26c6da</td>
        <td>#00bcd4</td>
        <td>#00acc1</td>
        <td>#0097a7</td>
        <td>#00838f</td>
        <td>#006064</td>
        <td>#84ffff</td>
        <td>#18ffff</td>
        <td>#00e5ff</td>
        <td>#00b8d4</td>
    </tr>        
    <tr>
        <td>Teal</td>
        <td>#e0f2f1</td>
        <td>#b2dfdb</td>
        <td>#80cbc4</td>
        <td>#4db6ac</td>
        <td>#26a69a</td>
        <td>#009688</td>
        <td>#00897b</td>
        <td>#00796b</td>
        <td>#00695c</td>
        <td>#004d40</td>
        <td>#a7ffeb</td>
        <td>#64ffda</td>
        <td>#1de9b6</td>
        <td>#00bfa5</td>
    </tr>        
    <tr>
        <td>Green</td>
        <td>#e8f5e9</td>
        <td>#c8e6c9</td>
        <td>#a5d6a7</td>
        <td>#81c784</td>
        <td>#66bb6a</td>
        <td>#4caf50</td>
        <td>#43a047</td>
        <td>#388e3c</td>
        <td>#2e7d32</td>
        <td>#1b5e20</td>
        <td>#b9f6ca</td>
        <td>#69f0ae</td>
        <td>#00e676</td>
        <td>#00c853</td>
    </tr>            
    <tr>
        <td>Light Green</td>
        <td>#f1f8e9</td>
        <td>#dcedc8</td>
        <td>#c5e1a5</td>
        <td>#aed581</td>
        <td>#9ccc65</td>
        <td>#8bc34a</td>
        <td>#7cb342</td>
        <td>#689f38</td>
        <td>#558b2f</td>
        <td>#33691e</td>
        <td>#ccff90</td>
        <td>#b2ff59</td>
        <td>#76ff03</td>
        <td>#64dd17</td>
    </tr>               
    <tr>
        <td>Lime</td>
        <td>#f9fbe7</td>
        <td>#f0f4c3</td>
        <td>#e6ee9c</td>
        <td>#dce775</td>
        <td>#d4e157</td>
        <td>#cddc39</td>
        <td>#c0ca33</td>
        <td>#afb42b</td>
        <td>#9e9d24</td>
        <td>#827717</td>
        <td>#f4ff81</td>
        <td>#eeff41</td>
        <td>#c6ff00</td>
        <td>#aeea00</td>
    </tr>             
    <tr>
        <td>Yellow</td>
        <td>#fffde7</td>
        <td>#fff9c4</td>
        <td>#fff59d</td>
        <td>#fff176</td>
        <td>#ffee58</td>
        <td>#ffeb3b</td>
        <td>#fdd835</td>
        <td>#fbc02d</td>
        <td>#f9a825</td>
        <td>#f57f17</td>
        <td>#ffff8d</td>
        <td>#ffff00</td>
        <td>#ffea00</td>
        <td>#ffd600</td>
    </tr>         
    <tr>
        <td>Amber</td>
        <td>#fff8e1</td>
        <td>#ffecb3</td>
        <td>#ffe082</td>
        <td>#ffd54f</td>
        <td>#ffca28</td>
        <td>#ffc107</td>
        <td>#ffb300</td>
        <td>#ffa000</td>
        <td>#ff8f00</td>
        <td>#ff6f00</td>
        <td>#ffe57f</td>
        <td>#ffd740</td>
        <td>#ffc400</td>
        <td>#ffab00</td>
    </tr>      
    <tr>
        <td>Orange</td>
        <td>#fff3e0</td>
        <td>#ffe0b2</td>
        <td>#ffcc80</td>
        <td>#ffb74d</td>
        <td>#ffa726</td>
        <td>#ff9800</td>
        <td>#fb8c00</td>
        <td>#f57c00</td>
        <td>#ef6c00</td>
        <td>#e65100</td>
        <td>#ffd180</td>
        <td>#ffab40</td>
        <td>#ff9100</td>
        <td>#ff6d00</td>
    </tr>    
    <tr>
        <td>Deep Orange</td>
        <td>#fbe9e7</td>
        <td>#ffccbc</td>
        <td>#ffab91</td>
        <td>#ff8a65</td>
        <td>#ff7043</td>
        <td>#ff5722</td>
        <td>#f4511e</td>
        <td>#e64a19</td>
        <td>#d84315</td>
        <td>#bf360c</td>
        <td>#ff9e80</td>
        <td>#ff6e40</td>
        <td>#ff3d00</td>
        <td>#dd2c00</td>
    </tr>      
    <tr>
        <td>Brown</td>
        <td>#efebe9</td>
        <td>#d7ccc8</td>
        <td>#bcaaa4</td>
        <td>#a1887f</td>
        <td>#8d6e63</td>
        <td>#795548</td>
        <td>#6d4c41</td>
        <td>#5d4037</td>
        <td>#4e342e</td>
        <td>#3e2723</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>       
    <tr>
        <td>Grey</td>
        <td>#fafafa</td>
        <td>#f5f5f5</td>
        <td>#eeeeee</td>
        <td>#e0e0e0</td>
        <td>#bdbdbd</td>
        <td>#9e9e9e</td>
        <td>#757575</td>
        <td>#616161</td>
        <td>#424242</td>
        <td>#212121</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>    
    <tr>
        <td>Blue Grey</td>
        <td>#eceff1</td>
        <td>#cfd8dc</td>
        <td>#b0bec5</td>
        <td>#90a4ae</td>
        <td>#78909c</td>
        <td>#607d8b</td>
        <td>#546e7a</td>
        <td>#455a64</td>
        <td>#37474f</td>
        <td>#263238</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>        
    <tr>
        <td>Color/Hue</td>
        <td>50</td><td>100</td><td>200</td><td>300</td><td>400</td><td>500</td>
        <td>600</td><td>700</td><td>800</td><td>900</td>
        <td>A100</td><td>A200</td><td>A400</td><td>A700</td>
    </tr>
</table>
</body>
</html>

 

三、色彩运用

毫无疑问,我们在一个界面中不能无约束的使用色彩,那将使事情变得一团糟。 说好听点,没有约束,就不再是设计,而成为艺术了。

Material Design给出了一些通常条件下的约束:

1. 最多用两个调色板

在一个界面中最多使用两个调色板,从主调色板选择最多三个色调,从辅调色板选择 一个强调色。

2. 为文本、图标和分割线应用透明度

通过为文本设置透明度来表达文本的相对重要性:

对于深色背景的浅色文字,最重要的文本使用87%的透明度,次重要的文本使用54%的 透明度。提示性文本,例如输入框、标签、被禁止的文字等使用26%的透明度。

对于浅色背景的深色文字,最重要的文本使用100%的透明度,次重要的文本使用70%的 透明度,其他文本使用30%的透明度。

3. 工具栏和状态栏

工具栏大色块应当使用调色板中色调为500的颜色为基准色状态栏应当选择 调色板中比基准色略深的色调为700的颜色。

4. 使用强调色

在大色块上绝对不要使用强调色,对动作按钮、开关或滑动条之类的组件应当使用强调色

 

四、图标/Icon

Google提供了适用于Material Design的图标字体,我们可以直接在前端样式表中使用@font-face 引用这些字体

/*icon.css*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), 
         url(material-icons.woff2) format('woff2'), 
       url(material-icons.woff) format('woff');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;    
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

 在页面中要使用图标字体,只需要应用上面定义的material-icons样式:

<i class="material-icons">face</i>

上面的示例创建了一个笑脸图标,face用来指定要显示的图标。

图标大小依赖于字体大小。

 

五、排版/Typography

Material Design提供了11种规格的文字样式供不同场景下排版使用:

Material Design Lite

在MDL中,使用样式类mdl-typography--{name}声明文本的排版样式:

<h1 class="mdl-typography--title">Hello,Material Design</h1>
<p class="mdl-typography--body-2">this is a demo</p>