Material Design Lite 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

设计语言

github项目地址:https://github.com/google/material-design-lite

随堂练习代码地址:https://github.com/hubwiz/mdl-lesson

拟真 vs. 扁平

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

从下面的对比图中,我们可以体会到两种设计语言的差异:

flat

Material Design

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

design

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

material

在右边的示例中,试着滚动一下内容区域,你可以感觉到标题栏比内容区域离你更近。思考一下, 阴影在Materia Design中的作用!