first, the core idea
, the core idea of aterial design is to bring the experience of the physical world into the screen. Remove the impurities and randomness in reality, retain its most primitive pure form, spatial relationship, change and transition, with the flexible nature of the virtual world, restore the most close to the real experience, to achieve concise and intuitive effect.
Material Design is one of the most important cross-platform experience of a set of designed languages. Due to the rigorous and meticulous specification, it is guaranteed to be highly consistent across all platform use experiences. But at the moment only Google's own services to do so, after all, the other platform has its own norms and style.
second, material and space
The most important information carrier in Material design is the magic paper. Paper stacks, merges, separates, has the actual thickness, inertia and feedback, while possessing some characteristics of the liquid, can freely stretch deformation.
These are the magical properties of paper, the ability of a real piece of paper:
- Paper can stretch and change shape
- When the paper is deformed, the content can be clipped, such as when the paper shrinks, the content is not changed, but the part is hidden.
- Multiple pieces of paper can be stitched together into one
- A piece of paper can split into multiple pieces.
- The pieces of paper can appear in any position.
However, some effects of magic paper are forbidden:
- One operation cannot trigger the feedback of two pieces of paper at the same time
- Stacked pieces of paper, poster height cannot be the same
- Pieces of paper can't penetrate each other
- The paper can't bend.
- Paper can not produce perspective, must be parallel to the screen
Material Design introduces the concept of z-axis, which is perpendicular to the screen and is used to represent the cascading relationships of elements. The higher the Z-value (altitude), the farther the element is from the bottom (horizontal) of the interface, the heavier the projection. Here is a premise, all the elements of the thickness is 1DP.
All elements have a default altitude, and the operation will raise its altitude, and it should fall back to its default altitude after the operation is over. The same element, the same operation, the height of the uplift is consistent.
Note: This is not just a concept in design, it is true that developers can control the elevation and projection of an element by a value.
Material design attaches great importance to animation effect, it emphasizes one point repeatedly: animation is not only decorative, it has meaning, can express the relationship between elements, interface, with functional role.
Animation to close to the real world, we must pay attention to easing. Movement and change in the physical world are accelerated and slowed down, and suddenly start, suddenly stop the constant speed of the animation appears to be mechanical and not true. Considering the easing of animation, we should consider its motion law in the real world first.
All clickable elements should have such a feedback effect. With this animation, the location of the click is associated with the element being manipulated, reflecting the functionality of the material design animation.
Through transition animations, the spatial and hierarchical relationships between interfaces are expressed, and information is passed across the interface.
Entering the sub-interface from the parent interface requires raising the elevation of the child element and expanding it to the entire screen, and vice versa.
A number of similar elements, animation design to have priority, play a role in guiding the line of sight.
The movement of similar elements should conform to the law of unification.
Achieve pleasing results with icon changes and some details.
Color should not be too much. Choose a main color, a secondary color (not required), on the basis of the brightness, saturation changes, constitute a color scheme.
AppBar background uses the main color, the status bar background uses a deep primary color or 20% transparency of pure black.
Use a secondary color where the small area needs to be highlighted.
The remaining colors are displayed (including icons and dividers) through the transparency of pure black #000000 and pure white #ffffff, and transparency limits several values.
Black: [87% Plain text] [54% Dodge text] [26% disable status/hint text] [12% divider]
White: [100% Plain text] [70% Dodge text] [30% disabled status/hint text] [12% divider]
Extended reading: "Super convenient!" Material Design Special Online Color tool
The desktop icon size is 48DP X 48DP.
Desktop icons are recommended to mimic the actual origami effect, with flat color representation of space and light and shade. Be careful to avoid the following issues:
- Do not cast shadows on colored elements
- Cascade not more than two layers
- Do not place the corners in the upper left corner
- The element with the projection should be fully displayed and not clipped by the edge of the icon
- If there is a crease, put it in the center of the picture, and there is at most one
- Icon with folding effect, no pattern on the surface
- Cannot pivot, bend
Regular shapes can follow several sets of fixed grid designs.
Use the material Design default icon first. When designing small icons, use the most concise graphics to express, graphics do not have a sense of space.
The small icon size is 24DP X 24DP. The graphics are limited to the central 20DP X 20DP region.
Small icons also have a grid system. Lines, voids as far as possible to maintain 2DP wide, fillet radius of 2DP. Special circumstances adjusted accordingly.
The color of the small icon uses pure black and white, adjusted by transparency:
Black: [54% normal] [26% disabled state]
White: [100% normal state] [30% disabled state]
Choose a picture
Describe specific things and take advantage of photos. You can then consider using illustrations.
The text on the picture
The text on the picture requires a subtle mask to ensure its readability. The dark matte opacity is between 20% and 40%, and the light matte opacity is between 40% and 60%.
For large images with text, mask the text area without masking the entire picture.
You can use the translucent main color to cover the picture.
The Android L can extract the main color from the image and apply it to other UI elements.
Picture loading process
Picture loading process is very fastidious, transparency, exposure, saturation of 3 indicators in turn, the effect is quite delicate.
Seven, the text
English fonts use Roboto, Chinese fonts use Noto.
Roboto has 6 types of characters: Thin, light, Regular, Medium, Bold, and Black.
Noto has 7 types of characters: Thin, light, Demilight, Regular, Medium, Bold and Black.
Common Font Size:
- 12SP Small Print Tips
- 14SP (desktop 13SP) Body/Button text
- 16SP (desktop side 15sp) Small title
- 20SP AppBar Text
- 24SP Big Title
- 34SP/45SP/56SP/112SP Extra-Large text
The length of the text, each line suggested 60 characters (English) about. Short text, suggest about 30 characters per line (English).
Eight, the layout
All operable elements min. Click area Size: 48DP X 48DP.
The minimum unit for a grid system is 8DP, and all distances and dimensions should be multiples of 8DP. Here are some common dimensions and distances:
- Top status bar Height: 24DP
- AppBar min. Height: 56DP
- Bottom navigation bar Height: 48DP
- Suspension button Size: 56X56DP/40X40DP
- User picture size: 64X64DP/40X40DP
- Small icon Click Area: 48X48DP
- Side drawer distance to the right of the screen: 56DP
- Card pitch: 8DP
- Separator line up and down white: 8DP
- White space for most elements: 16DP
- Screen left to baseline line: 16DP
- Text left to baseline line: 72DP
Also note that the 56DP number, a number of variable-size controls, such as dialog boxes, menus, etc., can be as wide as 56 integer times.
There are also very many specifications, not detailed listing, following 8DP grid is easy to find suitable size and distance. The Tablet and PC stay white more, and the distance and size should be increased correspondingly.
Usually appears as a list, supporting scrolling up and down.
It can also be web-formatted.
Buttons are divided into 3 kinds: Suspension button, raised button and flat button. The importance decreases as follows:
The most important and ubiquitous operation, we recommend using the hover button. More information, the use of raised buttons can effectively highlight important operations, but note that the paper does not overlap too many layers. A flat button is suitable for use in a simple interface, such as a dialog box.
Use the hover button to follow these rules:
- It is recommended to use only one hover button
- The hover button can be affixed to the edge of the paper or the seam, but not on the edge of the dialog box, side drawer, and menu.
- The hover button cannot be covered by other elements, nor can it block other buttons
- When the list is scrolled to the bottom, the hover button should be hidden to prevent it from blocking the list item
- The position of the suspension button can not be placed arbitrarily, may stick to the right and left side of the baseline line
Hover buttons usually trigger positive actions, add, create, collect, and so on. Do not trigger negative, destructive, or unimportant actions, nor should there be a digital corner mark. Is the wrong use of the hover button:
There are two sizes of suspension buttons: 56X56DP/40X40DP
Even in the same list, the contents and layout of a card can be different.
The cards are unified with rounded corners of 2DP.
Consider using cards in the following situations:
- Show a variety of different content at the same time
- No comparison between card content is required
- Contains content that is indeterminate in length, such as a comment
- Contains rich content and action items such as likes, scroll bars, comments
- Should be a list, but more than 3 lines of text
- It's supposed to be a grid, but it needs to show more text
The card has a maximum of two operating areas. The secondary operation area contains up to two action items, and more operations require the use of a drop-down menu. The remainder is the main operating area.
A component that displays complex information in a confined space, such as a date, a contact selector.
The dialog box contains the title, content, and action items. Clicking outside the dialog box does not close the dialog box.
Typically, avoid scrollbars. Scrolling is allowed when there is insufficient space, the scroll bar suggests the default display.
dialog box, the Cancel class action item is placed on the left, and the action item that causes the change is placed on the right. To specify the effect of the action item, do not write only "yes" and "no". The title text to be clear, even if not read the text content can also know what to do, the title do not use "OK" such vague wording.
Change the content in the dialog box, do not submit the data, click OK, the change will occur.
You cannot cascade the dialog box above the dialog box.
There is also a simple dialog box with no action items. Click on the list content to trigger the action and close the dialog box. Click outside the simple dialog box, the dialog will be closed and the operation canceled.
The dialog box can be full-screen, and you can cascade the dialog box above the Full Screen dialog box. The left image is a normal interface in which any changes take effect immediately. The picture on the right is the full screen dialog, where any changes are to be made after saving and click X to cancel.
The action item in the upper-right corner of the full-screen dialog box, such as Save, send, add, share, update, create, and so on, do not use the vague wording of completion, OK, and close.
Only the required fields are filled in and the action item in the upper right corner becomes clickable.
The content has changed, point to the upper left corner of the X, you need to have a confirmation dialog box to indicate whether to ignore the changes. The content has not changed, click the X in the upper left corner and exit the full screen dialog directly.
The white space around the dialog box is relatively large, usually 24dp.
When you have an avatar, picture, and other elements in the list, use the inline divider to align the left left with the text.
When you don't have an avatar, icon, or other elements, you need to use a banner divider.
The image itself plays a role in delineating the area, and the album list does not require a divider.
Careful use of the divider line, white and small headings can also play a role in separation. You can use the white space, the priority is to stay white. The level of the divider is higher than the left white.
The hierarchy of the banner divider line is higher than the inline divider.
The grid is made up of cells, and the tiles in the cells are used to host the content.
Tiles can span multiple cells.
The tile contains the main operating area and the auxiliary operation area, the auxiliary operation area can be located in the upper and lower 4 corners. In the same grid, the contents and location of the primary and secondary operations area are consistent. Both actions should take effect directly and cannot trigger the menu.
The grid can only scroll vertically. A single tile does not support swipe gestures, nor does it encourage the use of drag-and-drop operations.
The cell spacing in the grid is 2DP or 8DP.
The list is made up of rows containing tiles in the row. If the list item content text exceeds 3 lines, use a card instead. If the main difference between a list item is a picture, use a grid instead.
The list contains the primary and secondary operation areas. The secondary operation area is on the right side of the list and the rest is the main operating area. In the same list, the contents and location of the primary and secondary operations area are consistent.
In the same list, the swipe gesture operation remains consistent.
The icon or graphic element of the main and sub-operation areas is a list control item, and the control of the list can be a tick box, switch, drag sort, expand/close, and so on, or you can include prompt information such as keytip, Level two menu, and so on.
Fixed-order menu with frequently-operated options on top. A variable-order menu that allows you to queue previously used options in a dynamic sequence. Menu try not to exceed level 2.
Currently unavailable options are displayed to let the user know that the actions can be triggered on certain conditions.
The menu expands in place to cover the current selection, and the current option should be the first item in the menu.
The current selection of the menu, which is always aligned horizontally with the current selection.
When near the edge of the screen, the position can be staggered appropriately.
When the menu is too long, scroll bars need to be displayed.
The menu expands from the fixed position of the current option and does not change with the click position.
The menu is 8DP away from the top and bottom.
A date and time selector is a fixed component that is typically presented as a dialog box in a small-screen device.
Progress & Activity
The linear progress bar appears only on the edge of the paper.
The Ring progress bar is also known for time and time unknown.
The Loop progress bar can be used on the hover button.
You can also use the progress bar when loading details.
The animated drop-down is special, the list does not move, a piece of paper with a circular progress bar appears.
The left and right sides of the slider can place icons.
or an editable text box.
Non-contiguous sliders need to be marked with a specific value.
Snackbars & Toasts
Snackbars contains at most one action item and cannot contain an icon. Cannot appear more than one snackbars.
Snackbars on the mobile device, appears at the bottom. On the PC, it should hover in the lower left corner of the screen.
You do not have to prompt for a user response, you can use Snackbars. Very important hints that must be determined by the user should be used in the dialog box.
Snackbars can not block the hover button, the hover button to move up the yield position.
Snackbars White is larger, 24DP.
Toasts and Snackbars are similar, styles and positions can be customized, and it is recommended to follow the Snackbars rule design.
A small title is a special tile in a list or grid that describes the classification, sorting, and other information about the contents of a list.
When scrolling, if the list is longer, the caption will be pinned to the top, until the next small title will top it up.
When a floating button is present, the small caption should be positioned to align with the text.
The radio button is used only if all the options must remain visible. Otherwise you can use the drop-down menu to save space.
There are multiple switches in the same list, it is recommended to use a checkbox.
switch is recommended for individual switches.
tab is used only to show different types of content and cannot be used as a navigation menu. tab at least 2 items, up to 6 items.
With more than 6 items, the tab needs to be scrolled and left-right.
The tab text is displayed intact, the font size is consistent, the line cannot be folded, and the text cannot be mixed with the icon.
The underline height of the tab check is 2DP.
A simple horizontal line can represent the input box, with an icon.
Activation status and error status, the width of the horizontal line becomes 2DP and the color changes.
The input box has a height of at least 48DP, but the horizontal line is not at the bottom of the click Area and 8DP away.
Input box prompt text, you can enter the content, zoom in the upper left corner of the input box.
The entire click area is increased, and the hint text is part of the click Area.
There is no horizontal line in the banner input box, in which case there is usually a divider separating the input boxes.
Word count can be added to the lower right corner. Word count does not display by default, the word count is close to the upper limit and then displayed.
The banner input box can also have Word count, single-line word count displayed on the right side of the same row.
The error prompt appears at the bottom left of the input box. The default prompt text can be converted to an error prompt.
Word limit and error prompts will increase the click area.
When there are multiple input box errors, there is a global error at the top.
The input box is as full as possible with auto-completion function.
Tip only used on small icons, text does not need to prompt. You can trigger a prompt by hovering over the mouse, getting focus, and pressing your finger.
Is the wrong example. The hint cannot contain rich text and does not require a triangular arrow.
The touch tip (left) and mouse tip (right) are different in size, with 90% transparency in the background.
The side drawer slides out from the left to occupy the entire screen height, following the general list of layout rules. The side drawer of the phone side is 56dp from the right edge of the screen.
The side drawer supports scrolling. If the content is too long, settings and help feedback can be pinned to the bottom. When the drawer is closed, the previous scroll position is retained.
When the list is shorter and does not require scrolling, settings and help feedback follow the list.
10. Setting the interface
Settings and help feedback are usually placed in the side drawer. If there is no side drawer, place it at the bottom of the AppBar drop-down menu.
The settings interface can only contain settings, such as about, feedback and other interfaces, the entrance should be placed elsewhere.
Set items are grouped by using the banner divider line. 7 items below do not need to be grouped. If an item is a separate group, consider placing it on top (important) or in the "Other" column at the bottom (not important). Try merging when you set more items, such as merging two related tick options into one multi-option. The sub-interface is used for a very long set of items.
11. Ease of Use
Material design attaches great importance to the breadth of users and should try to take care of the experience of people with disabilities. Consider the following usage scenarios at design time:
- No sound
- No color
- High Contrast mode is turned on in the phone
- Phone screen magnification
- No visual information, use a screen reader
- Can only be controlled by voice
- Many of the above combinations
And note the following issues:
- No mouse, pure keyboard operation. Hover over the information and show it in other ways.
- Consider the experience of using large font sizes.
- Do not express certain information only by color.
- Audio information should also provide text or other visual presentation.
- Provide alternate text messages for pictures and videos.
Design the opposite interface for Arabic, Hebrew, and Persian users, whose writing and reading habits are right-to-left.
12. Resources (Scientific Internet required)
- Color scheme
- Interface Template: Mobile
- Interface Template: Tablet
- Interface Template: Desktop
- Interface Template: wireframe
- English font Roboto
- Roboto Introduction
- Chinese font Noto
- Component Set PSD
- Component Set AI
- Component Set Sketch
- System icon
Two waves of essence resources:
- "Fresh and hot!" A set of practical material design style materials! 》
- It's time to keep up with the trend! A big wave of quality material design resources free Download "
Finally, show a friend's project-the http://lydiabox.com part of the interface. This is a browser, but also a HTML5 application platform. The functional structure is not complicated, but it also has its particularity. Ideal for understanding material design and trying to make some modifications.
"Plus these three, Material design learning materials is enough!" 】
What are the Material design's extraordinary? Come and study here!
"Super Comprehensive Summary!" Talk about material design trends
Also from Genius's self-study notes, dry full!
Genius's self-study notes! Material Design Code of study experience
Google's own designers of its views and practical experience:
"Amazing!" Google Designer's material design practice experience
MATERIAL Design Study Notes