Android mobile phone design specification

Status bar: 24dp

Minimum height of APPBAR: 56dp.

Height of menu bar (including bottom): 48dp

The minimum unit of grid system is 8dp, and the distance and size should be integer multiples of 8dp. The following are some common dimensions and distances:

Icon and font size:

A. The startup icon (home page or application list page) is a 7-inch complete icon with an overall size of 48 x 48 dp and no blank area. Of course, it is also possible that an icon containing a blank area is equal to 48dp.

B. Action bar icon, which represents the most important icon that users can use in the application. The overall size is 32 x 32 dp and the actual graphic area is 24 x 24 dp.

C small icons/scene icons provide the status of an operation or a specific project.

For example, the star logo of gmail app, the down and up icons used to expand and close some content, and so on. The overall size is 16 x 16 dp, and the actual graphic area is 12 x 12 dp.

D. notification icon

If the application has a notification, please provide a notification icon, which will be displayed in the status bar when there is a new notification. The overall size is 24 x 24 dp, and the actual area of the graph is 22 x 22 dp.

Classify icon sizes to make the interface consistent as a whole.

The third part refers to the design specification of the button and popup layer of android.

On the design draft of 720 x 1280 px, there are two buttons (such as login and registration) placed side by side in a row, and the minimum size of each button is 240 x 80 px, which is translated as 120 x 40 dp as the android development unit.

Android application design font unit: conversion between Sp and Px

The conversion formula of sp and px: sp*ppi/ 160 = px.

ldpi(240*320): 120

mdpi(320*480): 160？ The magnification is 1.

hdpi(480*800):240

xhdpi(720* 1080):320

xxhdpi( 1080 * 1920):480

xxxhdpi:640( 1440*2560):4

Font specification

Pay attention to the minimum font 12sp.

Text font 14sp

Article title/icon name 18sp

Navigation title 22sp

Font height when ppi is 240:

Minimum font for comments: 18sp

Text: 2 1sp

Title/icon name: 27sp

Navigation title: 42sp

Font:

Android system default English font Roboto, default Chinese font droid sans fallback and Siyuan Bold.

Font specification for material design: Roboto is used in English font and Noto is used in Chinese font.

Roboto has six word weights: thin, light, regular, medium, thick and black.

Noto has the weight of seven words: thin, light, semi-light, regular, medium, bold and black.

Font color matching:

Not too many colors. Select a primary color and a secondary color. On this basis, the lightness and saturation are changed to form a color scheme.

The main color is used in the background of appbar, and the background of status bar is dark main color or pure black with transparency of 20%.

Use auxiliary colors where small areas need to be highlighted.

The remaining colors are displayed with the transparency changes of pure black #000000 and pure white #ffffff (including icons and separation lines), and the transparency defines several values.

Black: [87% normal text] [54% highlighted text] [26% disabled status/prompt text] [12% separator]

White: [100% normal text] [70% highlighted text] [30% disabled status/prompt text] [12% separator]

linewidth

Convert with the relationship between sp and px.

Element spacing spacing:

Minimum click area size of all operable components: 48dp X 48dp.

The minimum unit of grid system is 8dp, and the distance and size should be integer multiples of 8dp. The following are some common dimensions and distances:

Height of top status bar: 24dp

Minimum height of Appbar: 56dp.

Height of bottom navigation bar: 48dp

Suspended button size: 56x56dp/40x40dp

User avatar size: 64x64dp/40x40dp

Click on the small icon area: 48x48dp

Distance from the side drawer to the right side of the screen: 56dp

Card spacing: 8dp

Blanks above and below the separation line: 8dp

Blanking distance of most components: 16dp

Screen alignment baseline: 16dp

Align the left side of the text with the baseline: 72dp

In addition, pay attention to the number of 56dp. Many controls with variable sizes, such as dialogs and menus, can be designed as integer multiples of 56.

There are many specifications, so I won't list them one by one. It is easy to find the appropriate size and distance along the 8dp grid. There are more blanks on the tablet and PC, and the distance and size should be increased accordingly.

The spacing between single lines and multiple lines should be controlled and made regular.

Question 42 (14sp)? Subtitle 36 points (12sp)

The spacing between the main title and the subtitle is 12sp.

Note: The line spacing of multiple main headings is 8sp.

Question 48 (16sp)? Subtitle 42 points (14sp)

The spacing between the main heading and the subtitle (single line) is 8sp.

Question 42 (16sp)? Subtitle 42 points (14sp)

The spacing between the main heading and the subtitle (single line) is 10sp.

The list with dividing line is equidistant up and down, and the distance is 16sp.

The distance between the top and bottom of a list without a dividing line is 32sp.

The distance between the list items of the interpretation class is 22sp.

The distance from the floating button to the bottom is: 18sp.

Text composition

Common font size:

. 12sp small prompt 14sp (desktop 13sp)

. Text/Button Text 16sp (Desktop 15sp)

. Subtitle 20sp Application Column Text 24sp

. Heading 34SP/45SP/56SP/112sp Extra Large Text

For long text, it is suggested that each line should be about 60 characters (English). Short text, it is suggested that each line is about 30 words (English).

Experience and understanding: when designing, you can refer to design specifications, and when it comes to projects, you can formulate specifications according to the specific conditions of the projects.

Try a multiple of 8. If it is not suitable, it can be divisible by 3 in multiples of 3.

Design comes from details, and even the smallest details should be graded.

ps cc 20 17

Adobe xd interactive design artifact.

Adobe stock?

Svg format font

.9 The minimum click area of the picture is less than 48dp*48dp.