Android UI Design Specifications

Source: Internet
Author: User
Tags color representation

1. Basic Knowledge 1.1 Mainstream screen size
Identification Screen Size
hdpi 480 * 800
xhdpi 720 * 1280
xxhdpi 1080 * 1920
1.2 Icon Size
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
1.3 Color values

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
1.4 Labeling
    • Android design specifications in the spacing unit is DP, DP on the Android machine on the different density conversion px is not the same, so according to the design of PX conversion to DP is not the same.
      Most labeling tools now support DP labeling, such as Markman, if the UI designer is designed to 1280*720 size, select xhdpi when labeling:

Using Markman for DP labeling

DP/PX Online conversion Tool: http://pixplicity.com/dp-px-converter/

    • The font size unit is SP.
1.5 Cut Chart

Note: The graph footage file size is kept as <= as 200Kb, mainly in PNG format.

2. Material Design Related

Material 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 Ideas

The 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 Space
    • Material

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

    • 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 Animations

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.

    • 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

2.4 Colors

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 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]

2.5 icons
    • Desktop icons


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

    • 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.


Active area
Cosmetic area

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]

2.6 pic
    • 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.

    • 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.


2.7 Writings
    • Font

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.


    • Text layout

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).

2.8 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.

2.9 Components (component)
    • Bottom navigation (Bottom navigation)


Show effect
Standard example
    • Bottom Action Bar (Bottom Sheets)

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.

    • button (Buttons)

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 hover response button (floating action button), which creates a circular button that produces the ink diffusion effect when clicked.
    • Floating buttons (raised button), common square paper buttons, will produce ink diffusion effect when clicked.
    • Flat buttons (Flat button), the ink diffusion effect after clicking, and the difference between the floating button is no floating effect.

Hover Response button
Floating button
Flat button

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

There are two sizes of suspension buttons: 56X56DP/40X40DP

    • Card (Cards)

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.


Card SetIs CardA flat layout
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.


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



    • Slips (Chips)

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.



    • Prompt box (Dialogs)

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.


    • Divider Line (Dividers)

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.


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 need a separator line

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
    • Grid (Grids)

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.



The grid is made up of cells and tiles in cells are used to host content
Tiles can span multiple cells

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.

    • List (Lists)

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.


    • Menu (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.


    • Selector (pickers)

Selectors provide a simple way to pick a single value from a predefined collection.


Date Selector
Time Picker
    • Progress and Dynamics (Progress & activity)


The linear progress bar appears only on the edge of the paper
The Ring progress bar is also time-known and time-unknown two kinds of
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.


    • Slider Control (Sliders)


The left and right sides of the slider can place icons
or an editable text box
Non-contiguous sliders, which 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.


    • Subtitle (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.


    • Selection control (Selection controls)

The switch allows the user to select a selection. There are three types of switches: check box, radio button and on/off switch.


Radio buttons (Radio button)
check box (checkbox)
Switching (switch)
    • Tabs

In one app, tabs makes it easy to explore and switch between different views and functions and to explore different categories of data.


Extended app bar + TAB bar
Add search + App bar + TAB bar
The default app bar + TAB bar
Default app Bar + scrollable tab bar
The same font color as the tab indicator
Locked Scrolling tab Bar

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.


    • Literal field (text fields)

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.


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, 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 box

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.



    • ToolTips (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.


The touch tip (left) and mouse tip (right) are different in size, with 90% transparency in the background.



    • Steppers



    • Toolbars


2.10 Mode (patterns)
    • Empty state (null states)


    • Error (Errors)



    • Navigation (Navigation)

Tabs
Bottom Navigation bar 1
Bottom Navigation bar 2
Navigation Drawer
    • Navigation Drawer (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.


    • Notice (Notifications)

    • Permissions (Permissions)


    • Searching (search)



    • Setup interface (Settings)

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.


    • Click Refresh (Swipe to refresh)


2.11 Resources
    • Interface templates
      Mobile device: Whiteframe-2.23 MB (. ai)
      Tablet device: Tablet Whiteframe-1.39 MB (. ai)
      Desktops: Desktop Whiteframe-89.40 MB (. ai)
      Line Draft (WHITEFRAMES):
      Whiteframes-14.38 MB (. ai)
      Whiteframes-2.92 MB (. Sketch)
    • Palette
      Color Swatches-0.02 MB (. zip)
    • Font
      Roboto Font-1.21 MB (. zip)
      Roboto specimen booklet-1.67 MB (. pdf)
      Noto Font Simplified Chinese-115.45 MB (. zip)
    • Equipment Standard
    • UI components
      Sticker sheet for Sketch-23.51 MB (. Sketch)
      Components sticker sheet for Adobe after Effects-136.72 MB (. zip)
      Components sticker sheet for Adobe Photoshop-94.86 MB (. psd)
      Components sticker sheet for Adobe Illustrator-50.07 MB (. ai)
    • System icon
      System icon Sticker sheet-0.39 MB (. ai)
2.12 Practice

Knowledge of Android Client Material Design Combat specification: http://www.tuyiyi.com/v/40056.html

Android UI Design Specifications

Related Article

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.