"Material Design Vision language" begins

Source: Internet
Author: User

Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email:[email protected]
Blog: http://blog.csdn.net/allenwells
Github:https://github.com/allenwells

Material design, the original, is Google's official exit visual design language designed to unify the Android application interface design to enhance the user experience. In fact, not only on Android, but in other areas such as HTML, Material design also showed exuberant vitality.

A design goal

Material design is designed to build a unified user experience for Android across platforms and device sizes, following basic mobile design principles while supporting multiple input methods such as touch, voice, mouse, and keyboard.

Two design principles 2.1 application interface components have a solid sense

The entity sense is the entity metaphor, is constructs the systematization and the space rationalization unification, the distinctive touch is the solid feeling foundation.

The effect experience of solid feeling comes from two aspects:

    • surface of the entity
    • Edge of entity

The surfaces and edges of the entities provide a visual experience based on real-world effects, with a familiar touch that allows our users to quickly understand and recognize. The diversity of entities allows us to show more design effects that reflect the real world, but at the same time not be divorced from objective physical laws.

So how to explain to the user in the design of the application The motion law of the component, the interaction way, the spatial relation?

Answering this question has to mention the three important concepts of light efficiency, surface texture, and sporty feeling.

In particular, light efficiency, true light effects can explain the relationship between application components and spatial relationships, as shown in:

2.2 Color and layout of components to be vivid and vivid

In terms of layout and color collocation of components, it is desirable to choose colors, images and proportional fonts and white space from the aspects of typesetting, network, spatial, proportional, color and image usage, and create a vivid and vivid user interface.

In the component function design, we should highlight the core function according to the user's behavior, and then provide the user with friendly and efficient operation guideline in the application.

2.3 Adding meaningful animation effects to your component

The animation effect is presented as a stand-alone scene, showing continuous changes in the components, allowing the user to draw attention to the user, and maintaining a continuous experience throughout the system.

The animation effect should be done at design time:

    • The animation effect should be meaningful and reasonable. can effectively imply and direct the user.
    • The design of the animation effect should be based on the user's behavior, can change the overall design of the touch.
    • Animation effect feedback should be delicate and refreshing. Transition animations should be efficient and clear.

The introductory article is about here, and the following articles will discuss in detail the styles, layouts, animations, and component designs.

Copyright NOTICE: When we seriously to do one thing, we can find the endless fun, colorful technology like the scenery on the road, while walking to appreciate.

"Material Design Vision language" begins

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.