Material Design concept, environment and basic attributes, materialdesign

Material Design concept, environment and basic attributes, materialdesign
Material Design concept, environment, and basic attributes Material Design is a Design concept launched with Android 5.0. It involves the visual, dynamic, and interactive Design of cross-platform and device. the Design concept Material Design is inspired by the research on paper and ink based on the sense of touch. in addition, it is still developing and expanding, and there is a lot of room for imagination. provide visual clues to the surface and edges of materials based on reality. the familiar tactile properties help users quickly understand what is happening. some basic rules of light, surface, and motion are critical factors that can convey how objects exist, motion, and interaction in space. exercise is a key factor that can attract attention and maintain continuity. the feedback needs to be small but clear, and the conversion needs to be efficient but consistent.Material EnvironmentThe Material environment is a 3D environment: the newly added Z axis is perpendicular to the cell phone plane and points out of the front of the screen (to the user ). each piece of material occupies a place on the Z axis, with a thickness of 1 dp by default. light and shadows are illuminated in the material environment. The main light creates a shadow with a direction, and the ambient light creates a soft shadow with a full direction.Material propertiesPhysical attributes:The material has a variety of X and Y dimensions (dp unit), but has a uniform Z axis size, that is, the thickness, all 1dp. the materials are shadow. the shadow is naturally caused by the relative position of the Z axis between material elements. do not add shadows between material elements at the same Z axis. materials can display the shape and color content, various image videos, without adding thickness to the material. the behavior of the content is independent of the material, but it cannot exceed the boundary of the material. for example, the content can be moved and scaled independently in the box specified by the material. the material is solid (solid ). the input event cannot pass through the material to affect the underlying material. multiple Material elements cannot occupy the same dimensional space at the same time, but can change their height. materials cannot pass through other materials because they are considered solid.Material conversion:The material can change its shape and size, but its growth and reduction can only be confined to its plane. the material cannot be bent or folded. multiple pieces of material can be combined into one piece of material. materials can also be separated and then merged into one piece.Material Movement:The material can be naturally generated or destroyed. (scaling animation). The material can be subject to any axial movement. (For example, any axis rotation). The Z axis movement is usually caused by the interaction between the user and the material.Objects in 3D spaceObjects in Material Design have similar characteristics as objects in the real world. in the real physical world, objects can accumulate or attach together, but cannot pass through. Objects can also emit shadows and emit light. these features constitute a space model that you are familiar with and can be applied across applications.Elevation (Android)The height (Elevation) refers to the relative distance of the Z axis between two surfaces. the height of child is relative to its parent. the height measurement unit is the same as the Y axis of the X axis. Usually dp is used. (density-independent pixels ). since the material has a standard 1dp thickness, the distance between the two surfaces is measured at all heights.Resting elevation: static heightEach material object has a static height (default height) called resting elevation. the default height of an object is generally not changed. Even if you want to change your height, you should return to your default height as soon as possible. for example, the normal height of a material is 2dp. When it is clicked, its height changes to 6dp. When the click ends, it should return to the default 2dp. the default height of a component should be consistent in each app. however, the height of the cross-platform scenario can be different. For example, TV is more in-depth than mobile and PC terminals.Responsive elevation and dynamic elevation offsetsResponse-type height and dynamic height offsetSome component types have a responsive height, that is, some components use height changes to respond to user input (such as normal, focus, click) or system events. these height changes are implemented using dynamic height offset. dynamic elevation offsets is the goal elevation height of a widget relative to its static height ). they ensure that the height changes are consistent regardless of the action and component type. for example, all the components that need to increase the height of a click are equally increased. for example, although floating action buttons have a higher static height than other buttons, they also increase their static height by 6dp (Dynamic elevation offset) like other buttons after being clicked ). once the input event is completed or canceled, the component will return to its static height.Useful ShadowShadow provides important visual clues to show the depth and direction of the object. they are the only visual clues that can display the degree of separation between interfaces. (if there is no shadow, the floating action bar and the interface below are separated ). the height of an object determines its shadow. the blurred shadow generally shows a higher height. during the movement, shadows can also provide us with clues about the direction of motion, whether the distance between the surfaces increases or decreases. with shadow changes, we can determine the height changes. an object with a high height emits a larger and blurrier shadow. if the shadow size does not change, it indicates that the object is enlarged (the size changes), rather than the height changes.Object relationships: Object relationshipObject InheritanceHow you organize the collection of objects in an application determines how they move relative to each other. objects can be moved independently or restricted by more advanced objects in their inheritance relationships. all objects are in an inheritance system and have the relationship of parent-child. One element can be the child of another element or the child of the system. parent-child specification: (1) each object has a parent; (2) each object can have several children; (3) child inherits the transformation attribute of the parent, such as location, scale, rotate, and height. (When parent moves, the above child is also started); (4) sibling (siblings) refers to objects at the same level in the inheritance system. several special cases: Items parented to the root, such as basic UI elements. Motion is independent from other elements. for example, floating action bar does not scroll with the content. other elements include the border navigation menu of the application, action bar, and Dialogs.Interaction:The parent-child Status of objects in the inheritance system determines how they interact. example: 1. the Z-axis distance between children and parent is the smallest. Other objects that are not in this inheritance system cannot be involved in parent and children. 2. in a rolling card set, all cards are brothers, so they are moved together and their movements are controlled by their containers (Collection objects.Height:The height of an object depends on the content system you want to express and whether an object needs to be moved independently of other objects. Reference: Material Design: http://www.google.com/design/spec/material-design/introduction.html