With the arrival of Android P, Google has announced several updates to the Material Design application visual Design language. This paper mainly explains the updated content of Material Design.
On May 9, 2018, Google I/O developer conference kicked off as scheduled at the Seaside Amphitheater in Mountain View, California. Google not only made a deeper upgrade to AI technology, but also made an update to Android system.
Google vice President Dave Burke kicked off his presentation on the Android update:
“In the last 10 years, Android has been an open system.”
With the advent of Android P, Google today announced several updates to the Material Design application visual Design language. Despite rumors of major changes, this year’s I/O 2018 developer conference is all about theme, sharing, and ease of development.
Below is an interpretation of the Material Design update.
A powerful “theme editor”
The Material Theme editor helps you create your own brand UI component library and apply global style changes to color, shape, and print. Currently available with Sketch, you can access the Material Theme editor by downloading the Sketch plugin.
1. Choose a color
Automatically apply color to all components by selecting primary, secondary, background, and text and icon colors. Check for color contrast to meet accessibility requirements, select colors from the material palette, automatically generate 10 color values with a single color, and automatically fill symbols with global color changes.
2. Set the shape
Select your shape and corner styles, select from the curved or cut corner styles, and automatically apply the changes to your material components.
Use symmetrical and asymmetric shapes for playback in components in the material library, while remaining in the material design guide.
3. Add a type
Add up to 3 fonts for your theme, material based typography guidance, automatically adjust and optimize font readability, and access to popular Google fonts. Including: Roboto, Raleway, Alegreya, Merriweather, Rubik, Oswald, etc.
4. Explore ICONS
Express your brand through a stylized system icon that offers five themes and a range of formats, sizes, and densities. Choose from fill, Round, Sharp, Outline, and two-color icon themes.
5. Start using the theme editor
Start by downloading and installing the Material Plugin (requires macOS High Sierra 10.13 or higher).
The plugin provides access to the Material Component library, the Material Theme Editor (available with Sketch), and the ability to upload the artboard directly to the Gallery
In the gallery, designs created using the Material theme editor can automatically generate specifications and access developer documentation.
Click here to go to the official website
2. New Material Design objectives
First, let’s review the two design goals of the old Version of Material Design:
- We wanted to create a new visual design language that follows the classic rules of good design, but is also accompanied by innovative ideas and new technologies.
- We wanted to create a unique underlying system on which to build a unified experience across platforms and beyond device size. Follow basic mobile design rules, and support touch, voice, mouse, keyboard and other input modes.
New Material Design 3 main Design goals
The new version adds customization goals, in line with the newly launched theme editor customization features.
- Creativity: We want to create a new visual design language that follows the classic rules of good design, but is also accompanied by innovative ideas and new technologies.
- Unity: We want to create a unique underlying system on which to build a unified experience across platforms and beyond device size.
- Customization: Unfold Material’s visual language to provide a flexible basis for innovation and brand expression.
3. New Material Design principles
This update will be the original material metaphor, bold exaggeration, dynamic effect meaning of the three design principles, expanded into five design principles: material metaphor, bold exaggeration, dynamic effect meaning, flexible, cross-platform, let’s do a comparison.
Original Material Design3 design principles
(1) Metaphor
By constructing systematic dynamic effect and rational use of space, and combining the two ideas into one, the entity metaphor is formed. The distinctive touch is the foundation of the entity, which was inspired by our study of paper and ink. But we believe that with the progress of science and technology, the application prospect will be immeasurable.
The surface and edge of the entity provide a visual experience based on real effects, and the familiar touch allows users to quickly understand and recognize. The diversity of entities allows us to create designs that reflect the real world, but at the same time never deviate from the objective laws of physics.
Light effect, surface texture and sense of movement are the key to explain the law of motion, interaction and spatial relationship of objects. Real light effects can explain the relationships between objects, spatial relationships, and the movement of individual objects.
(2) Bold exaggeration
The new visual language, in the treatment of basic elements, draws on the traditional printing design — typesetting, grid, space, proportion, color matching, image use these basic graphic design specifications.
Working on these design foundations not only pleases the user, but also builds visual hierarchy, visual meaning, and visual focus. Careful selection of colors, images, proportionally selected fonts, and white space creates a clear, vivid user interface that the user is immersed in.
Material Design language emphasizes: highlight core functions based on user behavior, and then provide users with operational guidance.
(3) Dynamic effect expression
Animation effects (abbreviated as motion effects) can effectively hint and guide the user. The design of motion is based on user behavior and can change the overall feel of the design.
Dynamic effects when presented in separate scenes. Through the dynamic effect, the changes of objects are presented to the user in a more continuous and smooth way, so that the user can fully know the changes.
The purpose of dynamic effects is to capture the user’s attention and maintain the continuity of the experience throughout the system. The dynamic feedback should be fine and fresh, and the dynamic effect of field transition should be efficient and clear.
New Material Design5 design principles
(1) Material metaphor
Inspired by the physical world and its textures, including how they reflect light and cast shadows, Material Design surfaces reimagine the medium of paper and ink.
(2) Bold exaggeration
Material Design is guided by printing Design methods — typography, grids, Spaces, proportions, colors and images — to create hierarchies, meanings and focal points that immerse the user in the experience.
(3) Dynamic effect expression
Continuity is maintained through subtle feedback and consistent transitions. As the elements appear on the screen, they transform and recombine in their environment, interacting to produce new transformations.
(4) Flexibility
The Material Design system is designed to enable brand expression by integrating a custom code base that enables components, plug-ins, and Design elements to work seamlessly and flexibly.
(5) Cross-platform
Material Design maintains the same UI across platforms using shared components across Android, iOS, Flutter, and the Web.
Extended information:
Our comprehensive guidance will help you make beautiful products faster, design and build new tools for customizing materials and sharing work, find inspiration in Material research, and express your products differently with Material Theming.
Find what you need by browsing the following three sections:
- Material Systems: Our extended and enhanced design systems are unified with Material tools and components to improve the workflow between design and development.
- Material Fundamentals: Design and plan how to build your application using the Material Design architecture, while learning the principles and theories that support Material Design.
- Material Guide: Systematically customize and deploy unique material themes throughout the product — from design to code.
Review the original design goals and principles
Fourth, relax the restrictions on the material shape
Shapes can guide attention, identify components, communicate status and express branding. The material surface is by default rectangular with 4DP rounded corners. They have adjustable: corners and curves, corners and curves, number of corners.
Shape changes, such as rounded or trimmed corners, are subtle and important.
The use of shape change
(1) Key points
Because the unique shape stands out, they can focus their attention on different parts of the screen.
A combination of circular floating action buttons and curved bottom toolbars that stand out from the rectangular shapes elsewhere on the screen.
(2) Used for component differentiation
Shapes provide the user with a way to identify components and identify different materials to distinguish between different functions.
These character tags can be identified by the consistent use of shapes.
(3) Indicates that the state is different
Changes in the state of an element can be communicated through differences in shape or material, and when using a shape to indicate a change in state, use it consistently each time it occurs.
The card changes shape after selection to show that it has been selected.
(4) Personalized brand communication
To express the visual language of your brand throughout your application, use shapes in a consistent way with other customizations, such as colors. Small, strategic changes to app elements can help build the overall impression of the brand.
The consistency of shapes is used throughout the application to help express its brand.
Of course, more consideration should be given to the recognition and usability of shapes when designing. The following design method is not desirable.
❌ Do not use shapes that make the component unrecognizable.
❌ Do not use shapes that interfere with user operations. The target of this button is too small.
The original specification for shapes
Update the text field style
The new Material Design specification redesigns the style of text fields and explains its Design principles.
- Easy to spot: Text fields should be highlighted and indicate that the user can enter information.
- Clear: Text field states should be clearly distinguished.
- Efficient: Text fields make it easy to understand the information you need and resolve any errors.
Original text field style:
New version of text field style
The new version has two types of text fields:
- Fill in the text field;
- Overview of the text field.
Both types of text fields use containers to provide explicit hints for interactions, making the fields visible in the layout.
Both types of text fields provide the same functionality, so the type of text field used may depend only on the style.
- Choose the best visual style for your application;
- Choose the one closest to your UI design goal;
- Works best with other components (such as buttons) and surrounding content.
Text standard original
Update the extended hover button
Float operation button (FAB) represents the main operation of the screen. The original float button is circular as shown in the figure below:
The new extended FAB is wider and includes text tags.
An extended FAB can be fixed or fluid in width.
- Fixed width containers are defined by the cumulative width of ICONS, text labels, and fills.
- The fluid width container is defined by its relationship to other content on the screen, such as the screen width or the layout grid.
This fixed extension FAB width is defined by the cumulative width of ICONS, text labels, and container fills.
The container width of this extension FAB is defined by the layout grid column.
Extended hover button specification text
Seven, update the layout density
Material Design uses low-density Spaces by default, but provides high-density Spaces to improve the user experience.
1. Density principle
- Browsibility: A highly controlled user interface improves browsing and interaction with large amounts of content.
- Priority: Dense UI elements help the user focus by reducing the space between actions.
- Usability: Density control allows more content and actions to be displayed on a single screen.
When to apply high density
- Whether to increase the density of the user interface depends on how the user interacts with the components.
- High-density components allow users to better process large amounts of information and take action. Components with increased density can be used when designing lists, forms, and long tables.
- Default density, 48dp row height;
- High density, 32DP row height.
- Default density, 56DP text field height;
- High density, 44DP text field height.
Always apply density to the component and any elements nested within the component.
- Default density, 40DP row height and 36DP action height;
- High density, 32DP row height, 24DP action height.
When not to use high density
(1) Do not apply high density to components that involve centralized tasks, such as how they interact with drop-down menus or selectors. Increasing the density of these components reduces their availability.
❌ Do not apply high density to date pickers as this will reduce availability.
(2) Do not apply density to components that alert users to changes, such as pop-ups or dialogs. Applying density to alerts reduces their ability to generate attention.
❌ Do not apply high density to dialogue, it will reduce its readability and warning effect.
Original layout density specification