Material Design-image Imagery

Material Design-image Imagery

In material design, images, whether in painting or photography, should be constructed rather than planned by humans. They seem magical and do not appear to be over-produced. This style is optimistic, pleasant, and Frank. This style emphasizes the substantial Materiality of the scenario, texture, depth, unexpected color usage, and attention to the environmental background. These principles aim to create a user interface with strong purpose, beauty, and depth.

Principles

When using painting and photography to improve user experience, select images that express personal associations, information, and joy.

Personal Association

Uses images that can evoke memories to establish emotional connections between users and applications.

Information

Send specific information. Creates a smart sensory experience in a way that helps you understand it.

Highlights

Using relevant images to please users in an unexpected way makes users feel incredible.

Scenario Appreciation

Add the logic to ensure that the image is dynamic and that the scene intelligence and relevance are displayed. With predictive visual effects, the smart level can be displayed, greatly improving the user experience.

Immersive

You must be brave enough to use the masking method, or overlay colors and content to create an impression of the image's leading role, or create a thumbnail.

Best practices

Use multiple media

Illustration and photography can be used in the same product. Photography automatically implies a certain degree of specialization and should be used to show specific objects and stories. Painting can effectively show concepts and metaphor, which is not possessed by photography.

Photography is the first choice for specific objects.

Yes

When the content is not a specific object or cannot be summarized by a specific object, painting can convey information about your application and allow users to understand the content at a glance.

Yes

If you use photography to convey a concept, you need to create some thoughtful or even implied works.

No

Not limited to image libraries.

Stay away from Image Library (Stay away from stock)

The use of images can express a different voice and present excellent ideas.

For specific entities or brand content, use specific images. Make the abstract content explanatory. However, inventory photography (Photographic stock) and clip art are neither specific nor explanatory.

Yes

No

Focus

Your image should have a symbolic focus. From a single object to an overall layout can all be the focus. Make sure that you can use an impressive method to deliver a clear concept to the user.

Yes

No

Yes

No

Yes

No

Build narratives)

Create an immersive story and context scenario.

Yes

No

Yes

No

Do not over-operate

Maintain the original integrity of the image. Do not over-use the height filter or Gaussian blur, especially when trying to hide the degradation.

Yes

No

Yes

No

UI Integration)

Resolution

Make sure that your image size adapts to its border and supports cross-platform. This structure emphasizes large images. Ideally, the material should not be pixel-based. Test the appropriate resolution size for a specific ratio and device.

Yes

Well-sized images

No

Degraded Image

Introduce Scale)

Use images of different sizes to create visual importance.

In the background of an album, various thumbnails are introduced to convey the layered structure of the content.

We encourage you to use multiple containers in the same ecosystem.

Text Protection

Add protection scrims to make the text display on the image clear and easy to read.

Yes

The ideal transparency of dark scrims should be between 20%-40%, and the ideal transparency of light scrims should be between 40%-60%, depending on the specific content.

No

Do not overmask the image content with words.

Yes

For larger landscapes, text protection yarn should be added to a specific area. Do not overwrite the entire image.

No

Do not overwrite large images.

Yes

Color superposition is different from text-protection scrims. It can be used as a design element. When creating complementary colors, we need to sample from the parallel content to produce a consistent color palette, so as to display a good sense of content.

No

Avatar and thumbnail

Portraits and thumbnails represent entities or content. They can be photography or conceptual illustrations. Generally, they are directed to the target tap targets) to give people a preliminary impression of things and content.

An Avatar can be used to represent an individual. For personal portraits, you must provide personalized options. Because users may not customize their profile pictures, you may wish to set the default effect to a pleasant one. When used with a specific logo, the Avatar can also be used to represent the brand.

Thumbnails imply more information, allowing users to gain a glimpse of their content and assist in navigation. Thumbnails allow you to place images in a small space.

The Avatar makes the application more personalized and occupies less space.

A brand profile picture can give people a message at a glance, as are thumbnails.

Hero Images)

The main character image is usually fixed at a very obvious position, slightly larger than the normal size, such as the banner at the top of the screen. The main character image can attract users, provide content-related background, or enhance the brand.

Feature Image

Feature images are the main visual focus of eye-catching style and have a specific design layout.

Integrated hero image)

The synthesized main character image usually contains a mixture of special elements in a style. These parts cannot form the primary visual focus.

Gallery

Gallery images) are usually eye-catching, and their layout is basically the same, such as grid) layout, or a single image.

Photo Grid

Gallery pictures

Original article: Imagery Translation: lhyqy5 Proofreader: chenyusi