1. Xavier Yin 2015/04/08 Material Design Introduction 2. Outline Preamble Material Design Environment Properties Objects 3. Preamble Material design is a design language developed by Google and announced at the Google I/O conference on June 25, 2014. 4. Material Design Visual language Classic principles Good design Technology and Science Innovation Possibility 5. Material Design Principles Material is the metaphor The unifying theory A rationalized space A system of motion. Paper and Ink 6. Material Design Principles Bold, graphic, intentional Print-based design Typography Grids Space Scale Color Use of imagery Hierarchy, Meaning, and Focus 7. Material Design Principles Motion provides meaning Meaningful Appropriate Focus attention Maintain continuity Feedback subtle yet clear Transitions Efcient yet coherent 8. Environment 3D world x, y, and z dimensions z-axis a standard 1dp thickness 9. Environment Light and shadow virtual lights key light 10. Physical Properties Varying x & y dimensions Uniform thickness(1dp) Material never has a thickness of 0 11. Physical Properties Shadows from the relative elevation (z-position) 12. Physical Properties Content behavior can be decoupled from the behavior of material 13. Physical Properties Multiple material elements cannot occupy the same point in space simultaneously. 14. Physical Properties Multiple material elements cannot occupy the same point in space simultaneously. 15. Transforming Material Change shape only its plane never bends or folds 16. Transforming Material Join together When split, material can heal. 17. Movement of Material Be spontaneously generated or destroyed anywhere in the environment 18. Movement of Material Material can move along any axis. 19. Movement of Material Z-axis motion is typically a result of user interaction with material. 20. Elevation Relative position of an object along its parents z-axis 21. Elevation Resting elevation All material objects An object is a small component A sheet that spans the entire display In the static state Not change If changing elevation should return to its resting elevation as soon as possible Across apps Consistent From platform to platform the depth of the environment 22. Elevation Resting elevation All material objects An object is a small component A sheet that spans the entire display In the static state Not change If changing elevation should return to its resting elevation as soon as possible Across apps Consistent From platform to platform the depth of the environment 23. Elevation Resting elevation All material objects An object is a small component A sheet that spans the entire display In the static state Not change If changing elevation should return to its resting elevation as soon as possible Across apps Consistent From platform to platform the depth of the environment 24. Elevation Resting elevation All material objects An object is a small component A sheet that spans the entire display In the static state Not change If changing elevation should return to its resting elevation as soon as possible Across apps Consistent From platform to platform the depth of the environment 25. Elevation Responsive elevation Change their elevation in response to user input or system events Dynamic elevation offsets Relative to the resting state of the component 26. Elevation Functional shadows Visual cues about the arrangement of objects in space 27. Elevation Functional shadows Visual cues about the arrangement of objects in space 28. Elevation Functional shadows Visual cues about the arrangement of objects in space 29. Object Relationships How to move? Independently Be constrained 30. Review Whats Material Design Classic principles, Good design, Metaphor Environment 3D, Light and Shadow Properties Uniform thickness(1dp), Content behavior, Not pass through, Objects Change shape, Status 31. Conclusion Our Projects with Material Design Difficult IOS and Android are different style RDs aspects are not enough PMs Designers Managers Developers of IOS 32. Other Contents Animation Style Layout Components Patterns Usability Resources 33. References Google http://www.google.com/design/spec/material- design/introduction.html Android http://lp43.blogspot.tw/2014/07/material-design.html http://technews.tw/2014/07/02/some-thing-about-google-material- design/