Material Design Concepts, environment and basic attributesMaterial Designis a design concept introduced with Android 5.0, which involves the visual, dynamic, and interactive design of cross-platform and device. Concept material design is inspired by research on paper and ink, based on tactile realism. And it continues to expand, there is a lot of imagination. Based on reality, let the surface and edge of the material provide visual clues. Familiar tactile attributes can help users quickly understand what is going on. Some basic rules of light, surface and motion are key factors that can convey how objects exist, move, and interact in space. Exercise is a key factor that can attract attention and maintain continuity. Feedback needs to be small but clear, and the conversion needs to be efficient but still consistent.
Material EnvironmentThe material environment is a one-dimensional environment: The newly added z-axis is perpendicular to the phone plane, pointing outside the front of the screen (pointing to the user). Each piece of material occupies a place on the z axis, which is1DPThe thickness. Light and shadow are illuminated in the material environment, and the main light creates a directional shadow, while the ambient light creates a soft shadow across the direction.
Material Properties
Physical Properties:The material has various x and Y axis sizes (DP units), but has a uniform z-axis size, which is the thickness, which is 1dp. The material casts a shadow.The shadow is naturally caused by the relative position of the z-axis between the material elements.Do not add a shadow between the material elements of the same z-axis position, which can lead to misunderstanding. The material exhibits shape and colour content, various image videos, and content does not add thickness to the material. The behavior of the content is independent of the material, but it cannot go beyond the boundaries of the material. For example, content can be independently moving and zooming in a material-qualified box. The material is solid (solid). Input events cannot pass through the material to affect the underlying material. Multiple material elements cannot occupy the same dimension space at the same time and can change their height. Materials cannot pass through other materials because they are considered solid.
Material Conversion:The material can change shape, size, but its growth and shrinking can only be confined to its plane. The material cannot be bent or folded. Multiple pieces of material can be combined into a piece of material. The material can also be divided, then synthesized one piece and so on.
Movement of Materials:Materials can be naturally generated or destroyed. (scale animation). The material can be axially moving in any direction. (such as any axis rotation). The movement of the z-axis is usually due to the interaction between the user and the material.
objects in 3D spaceObjects in Material design have similar characteristics to real-world objects. In the real world, objects can be stacked or attached together, but they cannot pass through, and objects can cast shadows and emit light. These features form a user-familiar spatial model that can be applied consistently across applications.
elevation (Android)Height (elevation) refers to the relative distance of the z-axis between two surfaces. The height of the child is relative to its parent. The unit of height measurement is the same as the Y axis of the x axis, usually with DP. (density-independent pixels). Since the material has a standard 1DP thickness, all heights are measured from the distance between the top of the two surfaces.
Resting Elevation: Stationary heightEach material object has a static height (the default height), calledresting elevation.The object's default height is generally unchanged, and even if you want to change your height, you should return to your default height as soon as possible. For example a material, the normal height is 2DP, when it is clicked, its height becomes 6DP, when the click Ends, It should go back to the default 2DP. The default height of a component should be consistent across apps. However, the cross-platform situation can vary in height, for example, TV is much deeper than mobile and PC-side.
responsive elevation and dynamic elevation offsets
responsive height and dynamic height offsetSome component types have a responsive height, which means that some components respond to user input (for example, Normal, get focus, click) or system events with a height change. These height variations are implemented uniformly using dynamic height offsets.Dynamic Height offset (elevation offsets)is the target height (goal elevation) to move for the component relative to its resting height. They ensure that the height change is consistent regardless of the type of motion and component. For example, all components that need to be raised in height when clicked are equal. For example, although the floating action button has a higher static height than the other button, it also increases 6DP at its own standstill height when clicked ( Dynamic elevation offset). Once the input event is complete or canceled, the component will return to its own static height.
useful shadow.Shadows provide very important visual cues that show the depth and direction of the object's motion. They are the only visual cues that can show the degree of separation between interfaces. (If there is no shadow, the floating action bar and the bottom interface are detached). The height of an object determines its shadow. More blurred shadows generally show higher heights. During exercise, shadows can also provide clues to the direction of movement, whether the distance between the surfaces increases or decreases. There is a change in the shadow, we can determine the height of the change. Objects with high height cast larger, more blurred shadows. If the shadow does not change and the size changes, it means that the object is enlarged (size change), not the height change.
Object Relationships: Object Relationship
the inheritance relationship of objectsHow you organize objects or collections of objects in an application determines how they move relative to each other. Objects can move independently, or they can be constrained by higher-level objects in their inheritance relationships. All objects are in an inheritance system, with parent-child relationships, one element can be a child of another element, or it can be a child of the system. Parent-child specification: (1) Each object has a parent, (2) Each object can have several children, (3) The child inherits the parent's transition attributes, such as position, scale, rotation, and height. (When the parent is moving, the child above also moves together);(4) The brother (siblings) refers to an object at the same level in the inheritance system.A few exceptions:Items parented to the root, such as basic UI elements, movement is independent of other elements. For example, floating action bar does not scroll with content. There are other elements including: app's border navigation drawer menu; Action Bar, Dialogs.
Interaction:The parent-child position of objects in the inheritance system determines how they interact with each other. For example: the z-axis distance between 1.children and parent is minimal, Other objects that are not in the inheritance system cannot intervene between the parent and children. 2. In a rolling card collection, all the card are brothers, so they move together, their movements are controlled by their container (the collection object).
Height:The height of the object depends on the content system you want to express, and also on whether an object needs to move independently of other objects. Reference: Material design:http://www.google.com/design/spec/material-design/introduction.html
Material Design Concepts, environment and basic attributes
