MaterialDesignLite，简洁惊艳的前端工具箱。

2019独角兽企业重金招聘Python工程师标准>>>

Material Design Lite简介

本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现。

对应每一小节的在线练习地址如下&＃xff0c;大家可以去试试。

http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77/

一、设计语言

github项目地址&＃xff1a;https://github.com/google/material-design-lite

拟真 vs. 扁平

在iso7之前&＃xff0c;Apple采用的是拟真化设计语言&＃xff0c;期望通过模拟现实世界的物体&＃xff0c;给用户身临其境的感觉。自metro和ios7开始的扁平化设计语言则相反&＃xff0c;它着意去掉冗余的装饰效果&＃xff08;比如透视、纹理、渐变等等能做出3D效果的元素&＃xff09;&＃xff0c;让“信息”本身重新作为核心被凸显出来。

从下面的对比图中&＃xff0c;我们可以体会到两种设计语言的差异&＃xff1a;

Material Design

如果说拟真代表设计语言的一个极端&＃xff0c;而扁平代表设计语言的另一个极端&＃xff0c;那么Material Design则居于两者之间更偏右的位置&＃xff1a;

在Material Design中&＃xff0c;屏幕里看上去平整的一个 App 界面&＃xff0c;事实上不同控件之间都拥有着层级关系。不同控件之间的层级关系会使用阴影作为表示&＃xff0c;而阴影的深浅&＃xff0c;代表的正是这个控件在 Z 轴的高度&＃xff1a;

二、材料/Material

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

上面的两幅图示&＃xff0c;左边正确地表达了Material Design的设计理念&＃xff1a;材料有厚度&＃xff0c;但是无差别的1dp 厚。右边的图过于拟真地表现了材料的厚度&＃xff0c;因此是错误的。

虽然每一块 Material 都是扁的&＃xff0c;但他们所处的环境&＃xff0c;其实是一个 3D 空间&＃xff0c;这意味着所有处于 Material Design 设置的这个三维环境里的控件&＃xff0c;都拥有 XYZ 三个维度&＃xff0c;Z轴垂直于屏幕&＃xff0c;使用阴影表现材料的高度&＃xff0c;阴影越重&＃xff0c;Z值越高&＃xff0c;距离用户越近。在下面的动图中&＃xff0c;你可以直观地体会到阴影的变化对我们感官的影响&＃xff1a;

因此&＃xff0c;Material Design 并不是单纯的扁平化&＃xff0c;它在保留了扁的控件的同时&＃xff0c;采用了立体的虚拟空间&＃xff0c; 简言之&＃xff0c;Material Design的核心是&＃xff1a;扁而不平。

Material Design Lite

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

为元素应用阴影样式类很简单&＃xff1a;

...

三、色彩/Color

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

Material Design使用19个调色板&＃xff08;red、pink、purple等&＃xff09;用来约束设计中色彩的使用。在每个调色板中&＃xff0c;色调为500的颜色为基准色&＃xff0c;其他颜色是基准色在不同色调&＃xff08;50-900, A100-700&＃xff09; 下的表现。

在右边的示例代码中&＃xff0c;我们绘制了Material Design完整的调色板集。每一行是一个调色板&＃xff0c; 每一列表示一个色调。你可以将鼠标移动到一个颜色上&＃xff0c;查看其RGB值。

Material Design Lite

在MDL中&＃xff0c;我们可以使用样式类mdl-color--{palette}-{hue}来设置背景色&＃xff0c;使用样式类 mdl-color-text--{palette}-{hue}来设置前景色&＃xff1a;

this is a gray text on red background.

四、色彩运用

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

在一个界面中最多使用两个调色板&＃xff0c;从主调色板选择最多三个色调&＃xff0c;从辅调色板选择一个强调色。下面的示例选择indigo调色板中的三个色调&＃xff08;100、500和700&＃xff09;&＃xff0c;从pink 调色板中选择色调A200作为强调色&＃xff1a;

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

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

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

在下面的示例中&＃xff0c;左图的工具栏和右图的大色块&＃xff0c;使用了indigo调色板中的色调 500的基准色&＃xff1b;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色&＃xff1a;

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

五、图标/Icon

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

/*icon.css*/&＃64;font-face {
font-family: &＃39;Material Icons&＃39;;
font-style: normal;
font-weight: 400;
src: local(&＃39;Material Icons&＃39;), local(&＃39;MaterialIcons-Regular&＃39;),
url(material-icons.woff2) format(&＃39;woff2&＃39;),
url(material-icons.woff) format(&＃39;woff&＃39;);
}.material-icons {
font-family: &＃39;Material Icons&＃39;;
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 must be set for local host fonts*/text-rendering: optimizeLegibility;
-moz-font-feature-settings: &＃39;liga&＃39;;
-moz-osx-font-smoothing: grayscale;
}

在页面中要使用图标字体&＃xff0c;只需要应用上面定义的material-icons样式&＃xff1a;

上面的示例创建了一个笑脸图标&＃xff0c;face用来指定要显示的图标&＃xff0c;也可以使用其对应的数字编码&＃xff1a;

具体的图标名和编码&＃xff0c;参阅Material Icons官网&＃xff08;需FQ&＃xff09;&＃xff1a;https://www.google.com/design/icons/

六、排版/Typography

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

在MDL中&＃xff0c;使用样式类mdl-typography--{name}声明文本的排版样式&＃xff1a;