When we write an app, we always use our own mobile phone to debug our app, so the effect is that our mobile phone is good, no matter how it runs on other people's mobile phones, so when we are proud to download it to other people's mobile phones to see the effect When I was dumbfounded, what the fuck, this ugly and long app interface design can't bear to look directly at it, please be professional. Although this is the initial stage of Android, it is very important to develop good interface design specifications. Now let me spread some common sense.
The categories classified by pixel density are LDPI , MDPI , HDPI and XHDPI .
48 dp design rhythm
In general, touchable controls are based on 48 dp units.
Why 48 dp?
Typically, the physical size of 48 dp on a device is 9 mm (subject to some variations). This is well within the recommended size range for touch controls (7-10 mm), and at this size, it is relatively accurate and easy for users to touch with their fingers.
If you design elements with a height and width of at least 48 dp, it is guaranteed that:
- No element of your design will be smaller than the minimum recommended 7 mm when displayed on any screen.
- You can get a good balance between information density and manipulability of interface elements.
For details, please take a look at the blog content, reproduced from: http://blog.sina.com.cn/s/blog_6499f8f101014ipq.html
An excellent mobile phone software should not only have exquisite functions, smooth speed, but also a pleasing UI is often an important reason for users to choose. As a PM of mobile products , you also need to understand some basic knowledge in UI design.
1. px and pt , a pair of good partners
In visual design, we often see the following two units: px and pt .
P x is the abbreviation of the English word pixel , which means pixel. In the field of design, a pixel is a unit used to calculate digital images. The image displayed in the computer is not composed of continuous lines, but is composed of many small dots that are invisible to the naked eye. If you magnify the image several times, you will find that these continuous tones are actually composed of many small dots with similar colors. These small dots are the smallest unit "pixels" that make up the image. Since it is the smallest independent display unit, px is an integer, and 0.5px will not appear .
Take a look at this colorful LED light (original size)
Picture 2 Can you imagine that this is his true face? (after zooming in)
P t is the abbreviation of point , which is generally transliterated as pounds, and some people translate it literally as points. Please convert it by yourself. This is the unit used in the printing field, and a pound is equal to 1/72 of an inch. Internationally, pt is generally used as the unit of font.
Under normal circumstances, designers use px to mark the graphics in the design drawing, and pt to mark the text. In the visual design of the past many years, the cooperation between px and pt can be said to be seamless, and the PC is dressed up, which is the best partner in history.
2. In those years, the Android we chased together
In the sudden mobile Internet era, the cooperation between px and pt has become less harmonious. The reason is that Android brings concubines of different heights and heights, fat and thin, to the world, and if you put makeup on them, they will look like ridges and peaks, with different heights from far and near.
Due to Google 's open policy to Android , all manufacturers can join the research and development of smart phones. As a result, Android mobile phones have blossomed for a while, and various mobile phone styles have appeared. for example:
Table 1 Android resolution specifications (width * height):
240*320 320*240 320*480 480*800 480*854 640*960 720*1280 , ... and tablet
| Resolution |
ratio |
Market corresponding mobile phone |
| 320×480 |
2:3 |
Samsung S5830 Galaxy Ace, Samsung I5700, Samsung I7500, Huawei U8500 |
| Sony Ericsson X8 (E15i), Huawei C8600, Motorola XT502 |
||
| Motorola ME600、Motorola CLIQ、Motorola ME501 |
||
| LG P503、LG GT540、LG GW620、LG P500 |
||
| HTC G6 Legend、HTC Aria (G9)、酷派 D530、酷派 W711 |
||
| 夏普 SH8118U、天语 W606 、中兴 R750、首派 A60 |
||
| 240x320 |
3:4 |
HTC A3366 Wildfire、HTC A3380 、HTC A3360 |
| Motorola ME511 、Motorola XT301 、Motoroal XT300 |
||
| 华为 C8500、三星 I5508、中兴 X850、索尼爱立信 U201、SAMSUNG S5570、 |
||
| 480x800 |
3:5 |
HTC Desire (G7)、HTC A9191 、HTC 双擎T9199 |
| HTC A9191、HTC Desire HD (G10) 、HTC Desire Z |
||
| HTC Incredible S (S710e)、 HTC EVO 4G、三星 I9003 |
||
| 三星 I9010、三星 I9088、三星 I909、三星 I9088、三星I9000 |
||
| 三星I909 (SPhone)、三星I9020、三星T959、三星W899 |
||
| 酷派N930、Google Nexus S、、酷派 N930、戴尔Venue |
||
| 联想W101 乐phone (1.6系统非原生)、中兴 V9E、中兴 V880 |
||
| 联想W100乐phone(1.6)、联想C101、夏普 SH8128 、 |
||
| 夏普 SH7218U(新机)、Motorola A1680、华为 U8800 |
||
| 戴尔Mini5 (Streak) 、Google Nexus One (G5) |
||
| 600x1024 |
75:128 |
三星 Galaxy P1000 |
| 480x854 |
|
Motorola XT702、Motorola XT711 |
| Motorola ME722 (里程碑2)、Motorola XT800 |
||
| Motorola ME811 (Droid X)、Motorola ME525 |
||
| Motorola XT800+ 、Motorola XT806Ix |
||
| 索尼爱立信 X10i |
图三 Android屏幕物理尺寸规格
屏幕物理尺寸3.2、3.5、3.75、4.0、4.3、5.0、7、9.3、10.1
为了更好的描述这种多样化引发的问题，我们需要引入一个新的概念density，也就是密度。它指的是在一定尺寸的物理屏幕上显示像素的数量，一般使用dpi(dots per inch，每英寸像素数)作为单位。比如一台分辨率为240x320，屏幕物理尺寸为1.5英寸x2英寸的手机，他的密度可以用分辨率/尺寸，240/1.5或者320/2，密度为160dpi。对于用户来说，密度越大的屏幕显示效果越精细，因为每英寸显示的像素数量更多。
如果是要使用px和pt给程序贴图，假设生成了一条240px的直线，在240*320的屏幕上刚好可以铺满，而放到480x800的分辨率下才刚刚到一半的位置。
如果要解决这样的问题，那么程序在实现的时候就必须为每个分辨率都写一个配置，否则就会出现图形在低密度的屏幕上显示的更大，而在高密度的屏幕上显示的更小。最麻烦的事情在于，一旦出现新的分辨率，所有程序都没办法直接运行了。这明显不符合手机快速发展的客观规律。
3. 新的搭档，dp和sp
为了解决这个问题，Google为Android引入了一套新的单位dp和sp。
首先登场的是dp，Density Independent Pixel，可以翻译为密度无关像素。和px相比，dp在不同密度的屏幕中实际显示比例将保持一致。根据规定，一个dp相当于160dpi屏幕中的一个px。在320dpi的屏幕中，一个dp<span style="line-height: 21px; font-family: 宋体; word-break: no
When we write an app, we always use our own mobile phone to debug our app, so the effect is that our mobile phone is good, no matter how it runs on other people's mobile phones, so when we are proud to download it to other people's mobile phones to see the effect When I was dumbfounded, what the fuck, this ugly and long app interface design can't bear to look directly at it, please be professional. Although this is the initial stage of Android, it is very important to develop good interface design specifications. Now let me spread some common sense. The categories classified by pixel density are LDPI , MDPI , HDPI and XHDPI . In general, touchable controls are based on 48 dp units.
Why 48 dp? Typically, the physical size of 48 dp on a device is 9 mm (subject to some variations). This is well within the recommended size range for touch controls (7-10 mm), and at this size, it is relatively accurate and easy for users to touch with their fingers. If you design elements with a height and width of at least 48 dp, it is guaranteed that:
- No element of your design will be smaller than the minimum recommended 7 mm when displayed on any screen.
- You can get a good balance between information density and manipulability of interface elements.
For details, please take a look at the blog content, reproduced from: http://blog.sina.com.cn/s/blog_6499f8f101014ipq.html