| Identification | Screen Size |
|---|---|
| hdpi | 480 * 800 |
| xhdpi | 720 * 1280 |
| xxhdpi | 1080 * 1920 |
| Identification | Start icon size | Menu Icon Size |
|---|---|---|
| mdpi | * (DPI) | 24 * 24 |
| hdpi | * * (DPI) | 36 * 36 |
| xhdpi | * (at + DPI) | 48 * 48 |
| xxhdpi | 144 * 144 (480 DPI) | 72 * 72 |
| xxxhdpi | 192 * 192 (640 DPI) | 96 * 96 |
Android defines color colors with 6-bit or 8-bit differences, 6-bit (such as #0470C4) is RGB, the value 8 bits (such as: #1E000000) The first two bits is the transparency, the latter 6 bits is the RGB value, 00 is completely transparent, FF is completely opaque, the more moderate transparency value is 1 E.
Opacity 16 Binary Value
Formats such as #00ffffff, the first two bits represent the opacity of the hexadecimal. 00 means completely transparent, FF is all opaque. increments in turn.
| Opacity | 16 binary values |
|---|---|
| 100% | Ff |
| 85D | F2 |
| 80D | E6 |
| 85% | D9 |
| 90D | Cc |
| 75% | BF |
| 70% | B3 |
| 65% | A6 |
| 60% | 99 |
| 55% | 8C |
| 50% | 80 |
| 45% | 73 |
| 60g | 66 |
| 35% | 59 |
| 30% | 4D |
| 25% | 40 |
| 20% | 33 |
| 15% | 26 |
| 10% | 1 A |
| 5% | 0D |
| 0% | 00 |
DP/PX Online conversion Tool: http://pixplicity.com/dp-px-converter/
Note: The graph footage file size is kept as <= as 200Kb, mainly in PNG format.
2. Material Design RelatedMaterial design, the Chinese name: texture is a brand new design language by Google, which Google says is designed to provide a more consistent, broader "look and feel" for phones, tablets, desktops, and "other platforms".
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.
Material Design Chinese Version document
2.1 Core IdeasThe core idea of Material 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.
2.2 Material and SpaceThe 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:
Paper can not produce perspective, must be parallel to the screen
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.
2.3 AnimationsMaterial 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
2.4 ColorsColor 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 using the main color, status bar background using 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]
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:
Cannot pivot, bend
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]
Describe specific things and take advantage of photos. You can then consider using illustrations.
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.
The Android L can extract the main color from the image and apply it to other UI elements.
Picture loading process is very fastidious, transparency, exposure, saturation of 3 indicators in turn, the effect is quite delicate.
English fonts use Roboto, Chinese fonts use Noto.
Roboto has 6 kinds of characters: Thin, light, Regular, Medium, Bold and Black.
Noto has 7 kinds of characters: Thin, light, Demilight, Regular, Medium, Bold and Black.
Common Font Size:
The length of the text, each line suggested 60 characters (English) about. Short text, suggest about 30 characters per line (English).
2.8 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.
2.9 Components (component)The bottom action Bar is a panel that slides up from the bottom edge of the screen, using this method to present a set of features to the user. The bottom Action Bar presents a simple, clear set of actions that do not require additional explanation.
Usually appears as a list, supporting scrolling up and down.
It can also be web-formatted.
Buttons are made up of text and/or icons, and the text and icons must be easily linked to what is displayed after the click.
The main buttons are three kinds:
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:
There are two sizes of suspension buttons: 56X56DP/40X40DP
A card is a piece of paper that contains a set of specific data sets that contain information about a single subject, such as photos, text, and links. Cards are often the gateway to more detailed and complex information. The card has a fixed width and a variable height. The maximum height is limited to content that adapts to a single view on the platform, but it can be extended temporarily (for example, by displaying a comment bar) if needed. The card does not flip to show the information behind it.
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.
Card Layout Guidelines
Font design
Body: SP or SP
Title: SP or greater
Flat button: Roboto Medium, SP, ten SP word spacing
Card spacing on a mobile device
Screen boundary and card between the white: 8 DP
Card Room White: 8 DP
Content left White
dp
A piece of paper is a small block of objects used to render complex entities, such as calendar events or contacts. It can contain a picture, a short string (a string that may be intercepted if necessary), or some other concise information about the entity object. The Chips can be conveniently operated by means of a tug. A push action can trigger a view of the chip's corresponding entity in a suspended card (or a full-screen view), or a pop-up action menu related to the chip entity.
A component that displays complex information in a confined space, such as a date, a contact selector.
Dialogs is used to prompt the user to make some decisions, or some additional information needed to complete a task. Dialog can be either a simple answer pattern with cancellation/determination or a complex pattern of custom layouts, such as some text settings or text input.
Some complex operations, especially if each decision requires relevant explanations, are not suitable for use in Dialog form.
Dialog contains a title (optional), content, event.
title : Mainly used for simple description under the selection type. It is optional and can be assigned when needed.
content : Mainly describes what kind of decision to make.
Event : The main thing is to allow the user to continue the next activity by confirming a specific action.
Dividers is primarily used to manage and separate content within lists and page layouts, so that content can produce better visual and spatial sense. The divider that is rendered in the example is a weak rule that is too weak to disturb the user's focus on the content.
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.
A grid list is an optional component of a standard list view. The grid list differs significantly from the grid applied to layouts and other visual views.
Tile content includes main content (primary contents) and secondary content (secondary contents). The main content is the content that has the important difference, the typical piece. The secondary content can be an action button or text.
Provides a default picture for tile content.
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 displays multiple lines of items vertically as a single contiguous element.
A list consists of a single contiguous column that is divided into sub-sections of the same width, called rows. Rows are containers of tiles (tiles). Tiles, and you can change the height in the list.
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.
Selectors provide a simple way to pick a single value from a predefined collection.
The animated drop-down is special, the list does not move, a piece of paper with a circular progress bar appears.
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 switch allows the user to select a selection. There are three types of switches: check box, radio button and on/off switch.
In one app, tabs makes it easy to explore and switch between different views and functions and to explore different categories of data.
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.
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 text box allows the user to enter text. They can be single-line, with or without scroll bars, or multiple lines, with an icon. Click the text box to display the cursor and automatically display the keyboard. In addition to input, text boxes can perform other tasks, such as text selection (cut, copy, paste), and automatic search of data.
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.
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.
At the same time there are multiple input box errors, the top of a global error prompt
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.
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.
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.
Knowledge of Android Client Material Design Combat specification: http://www.tuyiyi.com/v/40056.html
Android UI Design Specifications
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
