Material Design Code

Do you need to know the design specifications as a technology developer? Personally, the need for a communication, the other is to understand the relevant design in order to reserve the corresponding knowledge, the direction of UI development. This question is very much hoped that the reader can leave a message discussion.

 **Android**的设计风格变迁可以划分到三个时代：

1. Disordered times
2, Holo theme
3. Material Design

1. The age of Disorder

The disorder era is no Android design code. The Android app design of the chaotic era is mainly reference to the design specifications of iOS and its objects, as well as the flat metroui of Windows Phone, and of course, it has its own design style.
The object design focuses on the shadow material of the object, flattening the expression of information. The following two graphs are for the realization and Metroui of a quasi object.

2.Holo Theme

At the end of 2011, Google released Android 4.0, commonly referred to as ICS, and also released the instructional app design code, "Android Design", Holo theme was also set in Android 4.0. Although in the 3.0 version there is already a part of the holo figure, but Android 3.X device share is not high, holo in 3.0 is considered an attempt. "Android Design" is only a guideline, the use of domestic applications is not much. is the manifestation of Holo theme. Holo is also considered a flat design.

3.Material Design

What is Materail Design
Google has introduced a new design language, material, on I/O 2014. Material design takes the real world paper ink as metaphor, emphasizes the shadow and the level, uses the animation effect to represent the real force feedback, attempts to bring the physical world's rules back to the electronic interface. As far as the Android platform is concerned, Material Design is not as deep as the previous holo style, it is more throbbing and vibrant. An official explanation:
Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.

Materail Design Principles

1. Metaphor
2. Visual design
3. Animation

Material is the metaphor (metaphor)
By constructing a systematic and rational utilization of the dynamic efficiency and space, and combining two ideas into one, the entity metaphor is formed. The distinctive touch is the foundation of the entity, inspired by our study of paper ink. As for metaphor, I divide it into two points:

1. Paper and ink

    信息的承载从石板、碑材、竹简、印章、动物皮、布帛……最后发现，如果从简洁的角度考察，纸张是最优秀的载体。既然没有办法完全的在手机上用app完全类比现实世界的逻辑层次，我们把app规范到纸片上，完全类比纸片的逻辑交互层次，这样不更好吗。

The basic tools used by Material design come from printed designs such as baselines and deletions that are common to all pages. Layout layouts can scale across screens of different sizes, facilitating UI development to fundamentally help you do scalable apps.

2. Levels and Shadows

Material Design是一个三维空间，这意味着所有对象具有的x，y，z三种维度。 z轴垂直对准在显示器的平面上，朝向观察者的z轴延伸方向是正方向。材料的每一个片占据沿着z轴一个位置具有标准1dp厚度。   

Bold, Graphic, intentional (visual design)

Material design in the basic elements of the processing, reference to the traditional printing design, typesetting, grid, space, proportion, color, image, such as the basis of the standards of the plane. On the basis of these designs, we can not only delight users, but also build visual level, visual meaning and visual focus. Carefully selected color, image, choose a proportional font, stay white, and strive to build a bright, image of the user interface, let users immersed in it.

1, with color (color)

色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。   

Material design in the use of color guidance mainly includes four aspects:

2. Font (typography)

文字字体在界面设计的美感中也是重要的一个方面，google团队花费了整整一年半的时间开发出了全新用户界面字体“Roboto”。“Roboto”字体已经是Android 4.0及以后Android版本的默认字体。Material Design中字体又做了改进。下面是官方建议字体大小。

3. Icon (Icons)

  系统图标的设计要简洁友好，有潮流感，有时候也可以设计的古怪幽默一点。要把很多含义精简到一个很简化的图标上表达出来，当然要保证在这么小的尺寸下，图标的意义仍然是清晰易懂。

4, with the figure (Imagery)

   在material design中，图像（无论是绘画还是摄影）都应该是组建而成而并非人为策划的，看起来神奇并且不显得过度制作。这种风格乐观，愉悦，并且坦率。这种风格比较强调场景的实质性（Materiality），质感，深度，让人意想不到的色彩运用， 以及对环境背景的关注。这些原则都旨在创建目的性强，美丽又有深度的用户界面。

The diagram principles are as follows:

Motion provides meaning (animation, interactive)
Animation effects can effectively imply and guide the user. Make the object change more continuously and smoother through the action.

The guidance of animation is mainly reflected in the following four points:
1. Real action (authentic motion)
2. Responsive interaction (responsive Interaction)
3. Meaningful transition animations (meaningful transitions)
4, impress the user details (delightful detail)

Animated examples can be downloaded PPT, self-appreciation.
1. Real action (authentic motion)

Material Design强调现实生活中积累的交互预期向数字空间的移植，于是设计指导一方面要求动画的形式必须具备现实中的运动的关键特征，同时也要求在界面转换时，如同现实空间那样，伴随动画动作的发生。

2. Responsive interaction (responsive Interaction)

用户每一次的触摸，点击都要有相应，每一点都是活的。

3. Meaningful transition animations (meaningful transitions)

Transition animations exist for view transitions.
4, impress the user details (delightful detail)

动画最基本的使用场景是过度效果，但哪怕是最基本的动画，只要恰到好处并足够出色，同样能打动用户。例如一个菜单图标变成一个箭头或者是播放控制按钮，这种服务间的无缝切换不仅仅能让用户感知，更是让完美的细节和精湛的设计充满你的应用。用户真的会感受到这些小细节。

how Materail design is produced
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design W ith the innovation and possibility of technology and science. This is material design.

Material design is the continuation of Apple's designs and the flat design of Microsoft.

-

Resources

Material Design

Creating Apps with Material Design

Google Design

Material Design: Flat designs that jump back to the object

Material Design Code