Editor's note: This year is almost over, you still don't understand material design? Is the document too long, or do you feel that your English is not good? It doesn't matter, we are kind and enthusiastic @ 10 specimens why help the students read through the official design guidelines, to rough extract, sorting out this dry more than a lot of study notes, packing tickets to learn the basic mastery of 90%, don't miss it!
Since the release of material design, cola Orange has been collecting relevant materials and resources to study others ' works. This set of design style is very distinct, with strong Google-style rigorous and rational philosophy, won my heart. In fact, just research materials and other people's works, you can find some obvious rules, make a few similar design. This dabbler state has remained until now, and has recently had time to read through the official design guidelines and finally have a deep understanding. In the friend's project (http://lydiabox.com) practice some, although I am sorry to take a friend surgery, but he seems to be satisfied with the overall effect.
Material design specifications are nuanced and need to be digested for a while. Read more feel its beauty, if every detail is strictly in accordance with the idea of material design, even if you are not a designer, your product will certainly not be difficult to use and ugly. Of course, as a designer, the requirements are even higher. Designing the document itself provides a great way to think about and build your own product specifications from every angle. But before you do that, you need to tidy up your study notes first. To break the rules, you must first master the rules.
Because it's just notes, I'll write it as simple as possible. and omit some coke orange that designers have mastered the information. To learn more about material design, it is advisable to read through the official documentation in a short time. However, keep in mind the following points, basically can achieve 90%. In fact, Google's official application also has a non-compliance of the place, not too rigidly tied to the rules.
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 spaceMaterial
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:
However, some effects of magic paper are forbidden:
Space
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.
Third, animationMaterial 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.
Easing
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.
Wave Feedback
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.
Transition effect
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.
Detail animation
Achieve pleasing results with icon changes and some details.
Four, colorColor 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
Five, IconDesktop icons
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:
Regular shapes can follow several sets of fixed grid designs.
Small Icons
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.
Extract Color
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 textFont
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.
Text layout
Common Font Size:
The length of the text, each line suggested 60 characters (English) about. Short text, suggest about 30 characters per line (English).
Eight, the layoutAll 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:
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.
IX. ComponentsBottom Sheets
Usually appears as a list, supporting scrolling up and down.
It can also be web-formatted.
Buttons
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:
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
Cards
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:
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.
Chips
A component that displays complex information in a confined space, such as a date, a contact selector.
Dialogs
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.
Dividers
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.
Grids
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.
Lists
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.
Menus
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.
Pickers
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.
Sliders
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.
Subheaders
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.
Switches
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.
Tabstab 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.
Text fields
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.
ToolTips
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.
Navigation Drawer
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 interfaceSettings 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 UseBarrier-Free Design
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:
And note the following issues:
Localization
Design the opposite interface for Arabic, Hebrew, and Persian users, whose writing and reading habits are right-to-left.
12. Resources (Scientific Internet required)Two waves of essence resources:
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 experienceGoogle's own designers of its views and practical experience:
"Amazing!" Google Designer's material design practice experience
"Turn" Android MD Design
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
