张兴业



张兴业

4 13


MaterailDesign


On Github xyzhang / MaterailDesign

张兴业

CSDN:xyz_lmn

微博:@张兴业TBOW

Material Desigh

Android设计风格变迁

  • 无序时代
  • Holo Theme
  • Materail Design

(一)无序时代

  • iOS设计及其Skeuomorphism
  • Windows Phone的MetroUI

使用iOS设计

使用MetroUI

(二)Holo Theme

2011年底发布的Android 4.0 ,也就是通常所说的 ICS,同时也发布了指导性的应用设计规范《Android Design》 HOLO是在Android 4.0才定下来的。虽然在3.0版本就已经有了一部分HOLO的身影,但是android 3.X的设备占有率也不高,HOLO在3.0算是尝试。

Android的Holo Theme

Holo Theme的表现形式

(三)Materail Design

  • 什么是 Materail Design
  • Materail Design的设计原则

什么是 Materail Design

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.

Materail Design的设计原则

  • Material is the metaphor(隐喻)
  • Bold, graphic, intentional(视觉设计)
  • Motion provides meaning(动画,交互)

隐喻

动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。与众不同的触感是实体的基础,这一灵感来自我们对纸墨的研究。

隐喻

  • 纸与墨
  • 层次与阴影

纸与墨

纸与墨

层次与阴影

视觉设计

Material Design在基本元素的处理上,借鉴了传统的印刷设计,排版、网格、空间、比例、配色、图像等基础的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。

视觉设计

  • 用色(Color)
  • 字体(Typography)
  • 图标(Icons)
  • 用图(Imagery)

用色(Color)

字体(Typography)

图标(Icons

用图(Imagery)

动画

动画效果可以有效地暗示、指引用户。通过动效,让物体的变化的更连续、更平滑。

动画

  • 真实的动作(Authentic Motion)
  • 响应式交互(Responsive Interaction)
  • 有意义的转场动画(Meaningful Transitions)
  • 打动用户的细节(Delightful Details)

真实的动作

响应式交互

有意义的转场动画

打动用户的细节

Materail 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.

我们挑战自我,希望创造出一个视觉语言,一个能够结合所有优秀的设计原则并融入科学与技术的语言,这就是材料设计。

知乎大神说

Material Design是苹果的拟物设计、微软的扁平设计的延续。

设计的探索之路,相信总有一个点是完美的

完全抛弃了阴影和材质表现等视觉上的细节

Material Design:向拟物回跳一下的扁平化设计

参考资料

谢谢

联系我: 张兴业TBOW

QQ群:173928818