Dimension setting and specification for mobile application interface design

Http://www.tuicool.com/articles/zIZBVj One, Android article

1. Android resolution

Android's multi-resolution has always been a headache for designers and developers. However, for the complex problems caused by multi-resolution, we have to give priority to the solution. Android supports a variety of different dpi modes: ldpi, MDPI, hdpi, xhdpi, xxhdpi, xxxhdpi

Note that the PPI and dpi are density units, not units of measure:
* PPI (pixels per inch): Image resolution (number of pixels per inch in the image)
* DPI (dots per inch): Print resolution (the number of points per inch that can be printed, i.e. print precision)

The DPI is primarily used for output, with a focus on the printing device; The PPI should be familiar to designers, the Photoshop canvas resolution is often set to 72 pixels per inch, which is actually the PPI. Although the concept is different, the display for mobile devices can be seen as ppi=dpi.

The PPI is calculated as: PPI =√ (length pixels ²+ width pixels ²)/Screen diagonal inches. That is, the sum of the squares of the length and width, divided by the number of inches on the diagonal of the screen.

Take iphone5 For example, its ppi=√ (1136px²+ 640px²)/4 In=326ppi (Retinal retina screen)
For Android phones, an inaccurate division is that 720 x 1280 mobile phone is likely to be close to the XHDPI mode, 480 x 800 mobile phone is likely to close to the "hdpi mode", and the x 480 mobile phone is very close to the DPI (MDPI mode).

Data from the Friends League Index March 2014 (poke here to see the latest data):
The 480 x 800 handset accounted for 16.5% of the handset with a maximum 31.9%,720 x 1280, while the X 320 was at least 1%. The XXDHPI model's high-resolution X 1920 handset ratio is also getting higher, now at 6.1%.

2. Unit conversion method

Android development, the text size of the unit is the SP, non-text size units with DP, but we are in the design of the unit is PX. How these units are converted is the key to what designers and developers need to know.
* dp:density-independent pixels, with 160PPI screen as standard, then 1dp=1px. Conversion formula for DP and px: dp*ppi/160 = px. For a 320ppi screen, 1dp x 320ppi/160 = 2px.
* Sp:scale-independent pixels, it is the font unit of Android, with 160PPI screen as standard, when the font size is 100%, 1sp=1px. Conversion formula for SP and px: sp*ppi/160 = px. For a 320ppi screen, 1sp x 320ppi/160 = 2px.
In a nutshell, px (pixels) is used by our UI designers in Photoshop, and is also shown on the screen of a mobile phone, and DP is the unit of measure used when developing write layout.

Why do you replace the SP and DP with PX? The reason is that they do not change because of the PPI change, they present the same height size under the same physical size and different PPI. That is, it is closer to physical rendering, and PX is not.

according to the unit conversion method, can be summed up:
When running under MDPI, 1dp=1px: That is, the designer in PS defines an item height of 48px, development will define the item high 48DP;
When running in hdpi mode, 1dp=1.5px: That is, the designer in PS defines an item height of 72px, development will define the item high 48DP;
When running in xhdpi mode, 1dp=2px: That is, the designer in PS defines an item height of 96px, development will define the item high 48DP;
When your app needs to adapt to multiple DPI modes, refer to the scale of Figure 1 for conversion.

3, the design of the basic elements of the size setting

In order to adapt to the multi-resolution mobile phone, the ideal way is to do a set of design for each resolution, including the use of the icon, design manuscript labeling. But in practical development, this method is time consuming and laborious. So we usually choose a compromise method.

method One: start on a standard basis (such as xhdpi) and then zoom in or out to fit into other dimensions. The disadvantage is that, for higher-resolution phones, the icons are magnified, resulting in low quality.
method Two: design at the highest resolution, then narrow it down to the desired small resolution. The disadvantage is that if the icon, such as the largest size, loading slow and expensive flow, for the small resolution of the user is not good enough.

Combining the resolution data of the AU and the size units for easy conversion to Android development, the recommended design canvas size is 720X1280 and the resolution is still 72ppi (pixels/inch) .

There are no explicit rules for the size of the navigation bar, toolbar, etc. in the Android specification. But according to the 48DP principle, as well as some mainstream Android application analysis, summarize the size requirements:
status bar height: px
navigation bar, Action Bar height: px=48dp x 2
main Menu bar height: px
content Area Height: 1038 px (1280-50-96-96=1038)
Android recently out of the mobile phone almost removed the entity keys, the function keys moved to the screen, the height of the same as the menu bar: + px

4. Icon and font size (from official specification document)

A, Launch icon (home page or App list page)
Overall size is X-DP

b, the Action bar icon, on behalf of the user in the app can use the most important icon
Overall size is X + DP, the actual area of the graph is x DP

C, small icon/scene icon, provides the operation or status of a specific item.
For example, the Gmail app's star tag, some content to expand the collection to the bottom of the icon, etc. The overall size is X-DP, and the actual area of the graph is X-DP.

d, notification icon
If the app has notifications, provide a notification icon that appears in the status bar when a new notification is available. The overall size is x DP, the actual area of the graph is x DP.

Note: The Android specification is provided in the size unit is DP, if the design draft size is set to 720 x 1280, the size of the icon must be in the specification of the size of the number 2. For example, the Action bar icon of the X-DP, the design should be a page x px.

E, font size
The requirements in the Android specification are as follows:

As mentioned earlier, the font size unit in Android development is SP, and the conversion relationship is sp*ppi/160 = px. So 720 x 1280 size design draft, the font size can be selected as 24px, 28px, 32px, 36px, mainly according to the importance of the text to choose, in special cases may also choose a larger or smaller font.

F, other size requirements
48DP is typically used as a standard for touch UI components.

Why use 48DP? In general, the 48DP translates to a physical size of about 9 mm. It is generally recommended that the target size is 7-10 mm, so that the user can touch the target area accurately and comfortably.
If you design elements that are high and wide at least 48DP, you can guarantee:
(1) Touch target will never be smaller than the recommended minimum target (7mm), no matter what screen it is displayed on.
(2) A good balance is achieved between the overall information density and the size of the touch target.
In addition, the white space between each UI element is usually 8DP.

5, a little doubt for discussion

In the 720 x PX Design manuscript, there are two buttons (such as login, registration) side by row, the size of the X-px, the conversion to Android Development Unit is X-DP.
According to the previous calculation, if the 480 x 800 is displayed on the phone, the conversion to PX size is a total of x px, at this time two buttons emitted in a row, just the 480px= screen horizontal size, paved full line, it is obvious that the effect is not appropriate.

If this is the case, how do you do it? Consult with an Android development engineer, and the answer is that you may need to do adaptive processing, but for now they are writing a fixed DP value. So I think the designers need to consider--is the size conversion set at the benchmark resolution to be displayed gracefully at other resolutions?

Dimension setting and specification for mobile application interface design