什么是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 轴进行仿真。如图。
· 材料的高度特性:
材料(Material)总是有着可变的长度和宽度(x、y-axix)和不可变的厚度(z-axix,1dp;内容会以不同形状与颜色展示在材料上,但不会增加材料的厚度),而且会有阴影。阴影根据z方向上的高度(我们称之为海报高度)来变化。海拔高度越高,其被投射的阴影范围越大;海拔高度越小,其被投射的阴影范围越小。通常,海拔高度是根据事件来触发的,当输入事件完成或被取消,元素将会恢复到自身的静态高度。
· 材料的变形:
材料与材料之间不能彼此穿越,因为材料是实体。材料可以变大变小,但不能弯曲或折叠;几片材料能合在一起组成一片材料,而当一片材料被分割后,它也会自己复原成一个完整的材料;材料可以沿着任何一个轴移动。
3、动画
① 逼真的动画效果
物理世界中物体拥有质量,所以只有当施加给它们力量的时候才会移动,因此物体没法在瞬间开始或者结束动作。动画突然开始或者停止,或者在运动时突兀的变化方向,都会使用户感到意外和不和谐的干扰。
动画要贴近真实世界,就要重视easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。(来源:优设:重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记)
② 响应式交互
响应式交互给用户输入以反馈,使得APP不只是单纯展示信息,而是具有更强的交互性、能沟通的工具。
水波反馈
当用户操作生成一个新元素时,元素的动画应该基于触控点展开,并形成一个像涟漪一样逐渐发散开的径向动效响应。如图。
③ 转场动画
不同页面间的转场应当平滑、轻快,且应该体现页面间的空间与层级关系。转场动画应当去引导用户的注意力,让他们清楚地知道页面走向,同时保持视觉连贯性。
转场动画如图: