Mobile UI Design Dimension specification

First, the concept:

1. Screen size: Refers to the diagonal length of the screen, in inches

2. Pixels: The smallest point that makes up the image, a relative size unit, the smaller the screen, the clearer the more

3. Screen pixel density (ppi) = total pixels/Screen size (inches)

4. Retina screen principle: When the phone is about 25-30 cm away from you, if the phone PPI reaches more than 300, your eyes will not be able to distinguish the pixel point

5.DPI: Graphic Design/printing technology Unit, the higher the value, indicates that the higher the printer accuracy

Dpi=ppi

Second, Android screen size normalization

1. Program development Unified use of virtual dimension units: Dp/dip (other than text), SP (text)

2.PX~DP Conversion:

LDPI:PX-->DP divided by 0.75.

Dp-->px Times 0.75.

MDPI:PX-->DP divided by 1.

DP-->PX Times 1.

HDPI:PX-->DP divided by 1.5.

DP-->PX times 1.5.

XHDPI:PX-->DP divided by 2.

DP-->PX Times 2.

XXHDPI:PX-->DP divided by 3.

DP-->PX Times 3.

XXXHDPI:PX-->DP divided by 4.

DP-->PX Times 4.

3. Principle of baseline spacing:

(1) Component minimum spacing is 8DP or 10DP, layout/text minimum interval recommended 4DP

(2) Component size recommendations can be divisible by 4

(3) The component size is recommended to be even (the singular is prone to aliasing)

4.48 Touch Law: 48DP is about 9mm physical size, is a user finger can be accurate and comfortable touch the smallest size

5. Common Component Dimensions:

Status bar: 24DP

Action Bar: 44/48DP

Side navigation: 286/304DP

Suspension Operation Button: 56DP

Action Bar +TAB:36+33DP/44+40DP

Bottom bar: 44/48DP

6.Android Common font size/line spacing/color:

Mobile-Side UI Design dimension specification