Material Design分享

  • 它的历史(它是个什么鬼)
  • 它最基本的元素是什么(简单法则)
  • 它的示例 不要理论,直接展示给我看)

 Google Design变迁史

2011年,Gmail邮箱的按钮变得更加扁平化。
2012年,Google引入分层的卡片设计,使用更多的空白和精心设计的层次排版结构。
经历了几年的迭代和提炼,Google寻找到了一种可以贯通的理论体系,即把系统内的各种设计都规范成一种变形的纸片,并套用现实中纸墨的物理模型进行交互,这就是2014年Google I/O大会隆重发布的Material Design。

        Google归纳了两类复杂内容信息的层级关系,分别是Card和Tile(List 以及其他相似定义属于同类的内容信息层级),其他定义多用于UI结构及细节。

        Card是一种多功能信息的聚合入口,信息层级应较高,体现在Z轴应高于其他信息,视觉上有阴影表现并加以圆角处理。

        Tile则是(同类或相关)信息的模块展现,信息层级应较低,体现在Z轴应略低于其他信息,视觉上应无阴影表现不加圆角处理。其结果是从视觉层面让产品对象更高效、更简单,同时也更具物理世界的“真实感”。

Material Design的基本元素

1. 清晰轻量的产品逻辑

 

奥卡姆剃须刀法则同样在产品架构设计中适用,越简单的架构越有利于产品的生长。清晰轻量的产品逻辑,会减少用户的负担感,从而提高交互上的效率和愉悦感。

 

Material Design带有浓郁的Google式严谨和理性哲学

Material Design产品最重要的特点

通过Floating Action Button

展现一个理性的层次思维过程,每一个场景中,对用户来说最重要的动作是什么

2. 纸片

 

Material design中,最重要的信息载体就是纸片。

纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。

Material Design产品最重要的特点

Material design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

http://www.gekec.com/

http://www.materialup.com/

http://www.materialpalette.com/

3. 动画

 

通过动画连接所有的纸片,体现产品的层次感和逻辑性

Material Design产品最重要的特点

所有可点击的元素,都应该有这样的水波Ripple反馈效果。通过这个动画,将点击的位置与所操作的元素关联起来。

通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。

从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。

Reveal效果,使场景之间的切换更加连贯

如何使用

  • 一些资讯类示例app
  • 两篇经验分享

两篇经验分享

不用谢

Material Design分享

By Joker

Material Design分享

  • 1,614