Handset client Suitability

Suitability refers to the client application can be in a variety of parameters of the mobile phone screen operation, the phone screen related parameters have size, resolution and precision.

The

screen size refers to the actual physical dimensions, whichever is the diagonal length of the screen. The iphone is 3.5 inches in size. http://www.aliyun.com/zixun/aggregation/10134.html > Screen Resolution is the total number of physical pixels. Like the iphone's screen pixel is 320x480px (wide x High). The screen precision depends on the screen resolution and the pixel distribution at the physical height. such as the iphone's precision of 164dpi. Simply put, precision is the ratio of resolution to size. The same resolution, the larger the size, the smaller the precision.

The causes of adaptation problems are:

1. Mobile phone Resolution (R) diversity. Approximately 30 resolutions from 128x128px to 800x480px, according to QVGA (240x320px), HVGA (320x480px) and VGA (480x640px) can be divided into four kinds:

r<qvga:128x128,130x130,132x176,176x208 ..., this kind of resolution market share less than 5%, will gradually be eliminated by the market, coupled with the low consumption capacity of such mobile phones, so many applications have abandoned such mobile phones. qvga≤r<hvga:240x320,240x400,240x432 ..., this market share of 70%. Hvga≤r<vga:320x480,360x480,480x360 ... vga≤r:480x640,480x800 ... VGA and HVGA is the future mobile phone screen development trend, the market share will continue to increase.

2. Diverse precision. Low-precision screens have fewer pixels available, and sometimes display more pixels in the same area, and the same UI element, such as a button, looks smaller on a high-precision screen than on a low precision screen.

The Web design on your PC is usually 960px wide, with the page centered and left or right available in a solid color or picture. For mobile phones, the ability to display each page is limited, not like web design to discuss the display of 1 or 8 screen, mobile phone clients mostly display 1 screen, if not most of the page to avoid the use of scroll bar, otherwise in the key phone to press the down arrow several times or on the touch screen up to translate the interface to find the content, So designing a mobile client is more about how to streamline information and reduce operational steps.

QVGA's 1-screen interface is ported to VGA, which can only occupy a half screen, the icon does not look suitable for identification. So first for QVGA mobile phone design interface, and then according to the resolution of large screen mobile phone interface icon and other elements of the size, to ensure that the display effect and make full use of each pixel point.

There are two approaches to adaptation: 1. Fit according to the resolution. 2. According to the accuracy fit.

Resolution matching

This practice applies to java&windows mobile version of the client.

such as schematic, the top of the navigation, the content for the Drop-down box and "OK" button. When the program is opened, the resolution of the mobile phone is wxh and the interface is drawn from top to bottom (the data are all hypotheses):

When 240≤w<320, the size of the icon is 40x40px, the height of the menu bar =d (d=24px), the upper spacing = left spacing = Right spacing =10px, line spacing br=6px, the height of the drop-down box = Word height +2a (cell phone default font height size is different, a=4px), The width of the Drop-down box =w-the left and right spacing, the height of the button = the height of the word +2a, the width of the button = the width of the word +2b (b=6px)

When 320≤w<480, the size of the icon is 60x60px, the height of the menu bar =d (d=32px), the upper spacing = left spacing = Right spacing =14px, line spacing br=8px, the height of the drop-down box = Word height +2a (cell phone default font height size is different, a=6px), The width of the Drop-down box =w-the left and right spacing, the height of the button = the height of the word +2a, the width of the button = the width of the word +2b (b=8px)

......

And so on, differentiate multiple versions. The value can be a clear number, you can also use the formula, such as the height of the menu bar =D,BR=D/4. These values and formulas are written in XML, with appropriate picture resources, and when different versions are changed, only the XML and the picture are different, and the main program is the same.

Precision Fitting

Android is matched by precision, and the platform can be used not only on mobile phones, but also on devices such as navigators, with the same variety of screen parameters. Android comes with three functions: 1. Picture scaling; 2. Automatically define pixel size and position; 3. Compatible with larger sizes of screens, described in the Android icon Design Guide, when the program is opened, the appropriate picture resources are invoked based on the precision values obtained.

According to the accuracy of the version needs to support the platform, because the medium-precision large screen phone less, according to the resolution to meet the majority of mobile phone display requirements, because the Android client is still in the design process, the final effect is inconvenient to conclude.

Source: http://daichuanqing.com/index.php/archives/1331