什么是Material Design?
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
（来源谷歌官方文档）
我们挑战自我，为用户创造了崭新的视觉设计语言。与此同时，新的设计语言除了遵循经典设计定则，还汲取了最新的科技，秉承了创新的设计理念。这就是原质化设计(Material Design)。这份文档是动态更新的，将会随着我们对 Material Design 的探索而不断迭代、升级。
（来源极客学院）
Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.
（来源谷歌官方文档）
我们希望创造一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则，同时支持触摸、语音、鼠标、键盘等输入方式。
（来源极客学院）
1、核心思想
国人将Material Design翻译成 _质感设计_ 或者 _原质化设计_，顾名思义，就是把物理世界的物料体验带进屏幕的虚拟世界中。
Material是一种隐喻，是一种类真实世界的反馈。通过基于物理世界的_光影_、_表面质感_、_运动感_的表现让用户快速地理解和认知。同时虚拟世界的灵活性又给设计带来了新的启发，但绝不会脱离客观的物理环境。
2、环境
· 三维世界（3D world）:
Material 环境是一个三维的空间，这意味着每个物件都有 x ， y ， z 三个维度，z 轴垂直于显示平面，并延伸向用户视角，每个 material 元素在 z 轴上占据一定的位置并且有一个 标准的1dp 厚度。 在网页上，z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。如图。
具备 x，y 和 z 轴的 3D 空间
· 材料的高度特性：
材料（Material）总是有着可变的长度和宽度（x、y-axix）和不可变的厚度（z-axix，1dp；内容会以不同形状与颜色展示在材料上，但不会增加材料的厚度），而且会有阴影。阴影根据z方向上的高度（我们称之为海报高度）来变化。海拔高度越高，其被投射的阴影范围越大；海拔高度越小，其被投射的阴影范围越小。通常，海拔高度是根据事件来触发的，当输入事件完成或被取消，元素将会恢复到自身的静态高度。
· 材料的变形：
材料与材料之间不能彼此穿越，因为材料是实体。材料可以变大变小，但不能弯曲或折叠；几片材料能合在一起组成一片材料，而当一片材料被分割后，它也会自己复原成一个完整的材料；材料可以沿着任何一个轴移动。
3、动画
① 逼真的动画效果
物理世界中物体拥有质量，所以只有当施加给它们力量的时候才会移动，因此物体没法在瞬间开始或者结束动作。动画突然开始或者停止，或者在运动时突兀的变化方向，都会使用户感到意外和不和谐的干扰。
动画要贴近真实世界，就要重视easing。物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing，要先考虑它在现实世界中的运动规律。（来源：优设：重磅教程！帮你全面彻底搞定MATERIAL DESIGN的学习笔记）
② 响应式交互
响应式交互给用户输入以反馈，使得APP不只是单纯展示信息，而是具有更强的交互性、能沟通的工具。
水波反馈
当用户操作生成一个新元素时，元素的动画应该基于触控点展开，并形成一个像涟漪一样逐渐发散开的径向动效响应。如图。
③ 转场动画
不同页面间的转场应当平滑、轻快，且应该体现页面间的空间与层级关系。转场动画应当去引导用户的注意力，让他们清楚地知道页面走向，同时保持视觉连贯性。
转场动画如图：
以触发点为中心过渡
用递次的动画引导用户注意力
相似元素的运动，要符合统一的规律。
细节动画
网友评论