2011年,Gmail邮箱的按钮变得更加扁平化。
2012年,Google引入分层的卡片设计,使用更多的空白和精心设计的层次排版结构。
经历了几年的迭代和提炼,Google寻找到了一种可以贯通的理论体系,即把系统内的各种设计都规范成一种变形的纸片,并套用现实中纸墨的物理模型进行交互,这就是2014年Google I/O大会隆重发布的Material Design。
Google归纳了两类复杂内容信息的层级关系,分别是Card和Tile(List 以及其他相似定义属于同类的内容信息层级),其他定义多用于UI结构及细节。
Card是一种多功能信息的聚合入口,信息层级应较高,体现在Z轴应高于其他信息,视觉上有阴影表现并加以圆角处理。
Tile则是(同类或相关)信息的模块展现,信息层级应较低,体现在Z轴应略低于其他信息,视觉上应无阴影表现不加圆角处理。其结果是从视觉层面让产品对象更高效、更简单,同时也更具物理世界的“真实感”。
1. 清晰轻量的产品逻辑
奥卡姆剃须刀法则同样在产品架构设计中适用,越简单的架构越有利于产品的生长。清晰轻量的产品逻辑,会减少用户的负担感,从而提高交互上的效率和愉悦感。
Material Design带有浓郁的Google式严谨和理性哲学
通过Floating Action Button
展现一个理性的层次思维过程,每一个场景中,对用户来说最重要的动作是什么
2. 纸片
Material design中,最重要的信息载体就是纸片。
纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。
Material design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。
http://www.gekec.com/
http://www.materialup.com/
http://www.materialpalette.com/
3. 动画
通过动画连接所有的纸片,体现产品的层次感和逻辑性
所有可点击的元素,都应该有这样的水波Ripple反馈效果。通过这个动画,将点击的位置与所操作的元素关联起来。
通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。
从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。
Reveal效果,使场景之间的切换更加连贯
不用谢