Client design: How to design for different screen sizes

Article Description: Client Interaction Design fit-screen size.

Almost all Internet applications are migrating to mobile phones as the application platform for each mobile OS is online. But unlike PCs, PCs have evolved over the years, in the design formed a lot of unwritten rules, such as the width of the Web page is around 960px "of course, as the overall computer screen to large size and high resolution development, in addition to the background widescreen adaptive, many pages are also moving towards a wider direction of development." The current range of mobile phones, the size of the screen, the proportion of different, and the mobile phone screen itself is small, it is necessary to consider the application of different screen size adaptation, but also to maintain its consistency, at the same time to improve the use of each phone screen efficiency, this has a lot of contradictions.

In the client design process, for different screen size, how should be designed? Do the screen sizes for each size require a new interface layout, or do all screen sizes use the same interface layout? We'll explore these in the following sections.

One, the current popular mobile phone screen size  

In the figure below, I have taken the top 10 best-selling mobile phones in one of the country's cyber-electric cities for a week:

Although only a week in 2010 years of mobile phone sales rankings, it can be seen that the current use of mobile phone screen is very different, various screen size and resolution have. If you want to fit more groups of users, you need to consider more mobile screen size and resolution. "However, according to the current mobile phone development trend, and mobile phone client use behavior can be seen, the most important to users of the mobile phone screen is more than 2.4 inches, 240*320 above the mobile screen, because such a mobile phone to use the frequency of clients and the number of users will be more." Personal advice is more about considering 320*480 and more screens. 】

Second, the screen size correct understanding

When it comes to screen size, there are two expressions, 1 "my screen is 2.4 inches and your screen is 3.5 inches." "2" This screen resolution is 240*320, and that screen resolution is 320*480. "But in the design process, the screen resolution and the actual size of the screen must be considered simultaneously."

There are a few concepts that need to be clarified here first:

• Screen Physical size : The actual size of the screen diagonal length, such as 2.4-inch, 3.5-inch, etc.
• screen resolution : How much pixels the screen can display. such as, 240*320 and so on.
• screen density (pixel per inch): A number of pixels in each inch. The number of resolutions per inch, such as 160ppi.

The physical size determines the actual size of the screen, and the resolution can represent the number of pixels that can be rendered on the screen, and the screen density determines how fine the screen is. The same screen size, and if the resolution is high, the screen element is finer. The actual size of an interface element in the screen is relative to the screen density, the screen density is smaller, the actual size of the interface elements will be larger, and vice versa.

In the mobile phone interface layout, in addition to the elements of the pixel value, consider the actual size of the element is also very important, even more important (the human eye is to rely on the image of the object in the retina of the perspective size to identify the perception, the perspective is the actual size and distance of objects).

In different screens, different icon lattice or different font and size of Chinese characters, on the subjective perception of people, there will be an optimal result value. In the process of design, we need to according to the optimal value of the interface layout and design.

It can also be seen that this user-perceived optimal value is also associated with the people who use the mobile phone (for example, older users need more physical dimensions of the interface element).

In different screens, different icon lattice or different font and size of Chinese characters, on the subjective perception of people, there will be an optimal result value. In the process of design, we need to according to the optimal value of the interface layout and design.

It can also be seen that this user-perceived optimal value is also associated with the people who use the mobile phone (for example, older users need more physical dimensions of the interface element).

The design process and screen fitting idea

1 . Determine the screen size of the target

The screen size is determined by both width and height, but in the process of layout of the handset client, the most concern is the width value . When the width is determined, the height can be scrolled or leafed to show all the content, the text can be folded in the appropriate place, the title bar can be scaled to fit the screen width, and so on. But not regardless of height, icons, text, special components not only need to consider the width, but also need to consider the layout of the entire screen and whether it fit.

Since it is not possible to develop all clients individually, it is necessary to classify the size of the phone screen. At the same time, in the design will not really only consider the screen size of a factor, screen size and operating system, mobile phone type, etc. still have a large correlation.

First, let's start by defining the size of the phone's screen:

A. Small screen: Width of less than 2.4 px below screen or below screen

• In general, the majority of non-intelligent machines, grouped in this category of mobile phone screen, is generally the Java version of the client-oriented.

B. Medium screen: Width 240~320 px, or 2.4~3.0 inch screen

• Smartphones are dominated by Symbian or S60 V1,2,3,windows Mobile, or the smartphone client is based on a Java version.
• It also includes the 240*320 widescreen phone.

C. Big screen: Width of the above PX screen or 3.0-inch screen

• There are only two versions of the IPhone, and the physical dimensions of the screen remain the same;
• Android Phone and derivative platform phone
• Win Phone 7 System phone
• Nokia S60 V5,symbian 3 etc

D. Flat screen: 7-inch and above screen "can not be included in the phone, ^_^"

• Because the current development of the application of the tablet is based on the function of mobile phone application, but, the screen physical size of the big increase, the use of the scene and the phone is inconsistent, in the design of a lot of specificity, can play a larger space, so individuals recommend separate design.

Secondly, according to our product strategy, we will identify the user groups of the products to be developed to identify a target mobile screen. Because the mobile phone client for a business will not only launch one of these (unless the strategic user base is determined to use a particular type of mobile phone business), but will be different mobile phone platform to fit. Therefore, the targeted mobile screen should be the most mainstream mobile screen size in the grade , in order to use this as a benchmark up or down to fit other mobile phones.

2 . Matching principle

1 The logo of the client, should be clearly displayed on each mobile phone

2 the title or the bottom bar must be 100% with the width of the phone to fit

3 If the text content, if not, you can automatically fit the width of the folding line

4 picture can be automatically scaled according to the width, the screen width exceeds the picture itself, the display picture itself size

5 in the adaptation process, the interface element's width and height minimum value should conform to the user's subjective comfort range value.

6 The absolute proportion of resolution can not be used to scale the interface layout;

3. The analysis of the fitting idea

According to our previous analysis,

C Class Large screen size mainly to Android, IPhone, win phone 7 and Nokia V5, such as mobile phone mainly, they are touch screen phones, in the adaptation can be zoned for a grade.

B-Class medium screen size smart machines are mainly Symbian and Windows Mobile primarily, so in the adaptation of these two platforms, the main focus on the B-Type screen adaptation.

B class Medium screen size There is also a smart phone, the use of Java clients, while the small a-screen size mainly using the Java client, therefore, Java class clients need to adapt to a broader range, at least include the B class and a class screen size.

(1) Android and iphone adaptation

The iPhone itself has only two resolutions and a screen size size, can be very good to fit (up to two sets of pictures can be automatically read by the system).

For Android, because of its openness, the size and resolution of various screens have been created. But the Android system has a very good feature that the system adapts to the resolution density of the screen. However, when the density difference is large, when adaptive, the icon will become blurred because of the effect of stretching. At this point, you have to redesign the new icon or increase the spacing to maintain the best visual effects and more user-friendly operation.

The Android phone screen can be divided into the following categories depending on the resolution density and physical size of the screen:

Note: The value in the "" in the figure is the percentage of the cell phone. Android development platform data, not necessarily accurate

Android provides the following mechanisms for adapting screens of different sizes and densities:

1) Picture Resource scaling

Based on the density of the current screen, the platform automatically loads any images that are not scaled and have a limited size and density. If the picture does not match, the platform loads the default resource and can meet the current interface's display requirements after zooming in or out. Without multiple sets of resources, the platform considers the default resource to be a medium-density screen resource (160dpi). For example, the current high density screen, the platform will load high-density resources (such as pictures), if not, the platform will scale the medium density resources to high-density.

2) automatic scaling according to resolution and coordinates (density of different screen adaptation)

If the program does not support a variety of density screens, the platform automatically scales the absolute pixel coordinates and dimension values, so that the screen elements can be as much as the density of 160 of the screen can show the same physical size of the effect. The platform scales the actual size according to the ratio of density.

3 compatible with larger screen sizes (different screen adapters)

When the current screen exceeds the upper limit of the screen supported by the program, the Supports-screens element is defined so that the platform scales the entire screen in proportion to the size of the screen as it exceeds the displayed baseline.

As can be seen from the above table, the current Android phone is mainly concentrated in the standard screen of medium density and high-density two models. Therefore, in the design, mainly design one of the main, and then to fit another model can be. For the mobile phone in a grade, will be based on the above three principles, the system automatically adapt. personally think that in the conduct Android Mobile phone design, if only a set of resources, should be a high-density version of the main, so to fit the medium density, the effect is better.

Of course, if the density of the screen is large, the effect of automatic adaptation will not, if you want to achieve a better adaptation effect, must be for several different screen density for individual design screen elements, improve visual satisfaction.

(2) Non-Android, iphone phone adaptation

For other non-Android, iphone phones, you need to think more about their adaptation rules, which do not provide adaptive adaptation.

The simple collation rules are as follows:

1) Up-fit (standard screen to larger "high resolution, physical size" of the screen adaptation)

When adapting to a larger screen, it is divided into two states depending on the resolution of the device.

A If the screen resolution density (DIP) of both is similar, the physical size of the screen is larger. It can be stretched and Lacoine directly on the current dimension, and the icon and line spacing can be kept unchanged.

B. If the screen density is much larger, the physical size is similar. The adapter points include:

• Designing multiple sets of icons requires a larger-resolution icon
• Use a different font, need a larger font to fit the large device resolution screen
• Increase line Spacing
• Picture in the adaptive magnification content
• tab tabs need to confirm the maximum number of display per screen depending on the size of the screen.
• Considering some complex interfaces, increasing the resolution of some elements in the interface will cause many things to be redesigned. This situation requires a redesign of the interface.

2) Downward fitting

In the case of a smaller screen fit, this is less, and it will focus on the following points:

• Consider some of the improvement of the limit point, need to fit into the small screen of the phone, such as the maximum number of words in the title.
• Title, bottom column and small screen width fit.
• Consider whether the design of the row height (row information display) is suitable for a smaller screen height.
• Structurally, you need to consider whether the display is appropriate in a small screen.
• Design screen elements based on the percentage of screen density, requiring smaller resolution screen elements
• With small fonts, the specific size needs to be set according to the size of the screen.

(3) Horizontal screen matching of vertical screen

The adaptation of the screen, in this article, but more discussion, here is simply tidy up, my own understanding.

For the application of different functions, there is a specific form of the page, the individual does not agree with the use of any application is not optional to fit the horizontal screen.

Personal views are as follows:

1 different applications, in the design process, for the selection of different screens have different options, such as the general list of more applications, vertical screen more appropriate; show more interface, or want to better display panoramic application, horizontal screen more appropriate.

2 do not have to follow, for any application can be automatic horizontal screen vertical screen switching. If you feel that there is no need for horizontal or vertical screen applications, you can not switch.

3 because the user in the process of using the mobile phone, often inadvertently adjust the position, which led to the phone mistakenly think is to carry out the transformation of the screen, and thus more easily lead to operational errors, causing users ' disgust.

4 The switch of the horizontal screen, allows the user for the same interface has a different display mode. For example, not necessarily in the vertical screen time list mode, in the horizontal screen and vertical screen to maintain consistent, when the horizontal screen can have a better way to adapt to the display of horizontal screen, so that users better operation.

Because the mobile phone system is different, the mobile phone's screen size is various, the screen performance also presents the diversity, but also has the touch screen and the non-contact screen distinction, these four variables combine, will have the innumerable different situations, how can make your application to show the user perfectly, the adaptation is very important. However, it is more important that you determine the target group of the application before you fit in. If your application is mainly for high-end mobile phone users, then why do you consider the low-end of the mobile phone? After all, for a small number of users, so you spend a lot of effort, may be not worth it, this is absolutely worth every designer to think.

===========

Digression

In general, when designing a product, we first need to identify the user community of the product, and then design the interface for the user group's characteristics and usage behavior based on the user community. But for a mobile client, it feels like the process is not entirely applicable:

The reason is that my client is designed primarily for different mobile platforms (Android , iOS , Win Phone 7 , Palm Pre , Symbian ... to develop, so the client that is developed is applied to all the users who hold the phone. But whether these phone holders have the same qualities and whether they love to use the client is a big unknown. On the other hand, if I was building a user base that was completely categorized according to the user's needs, behavior, or ethnicity, then how do you define the capabilities of each client under each different platform?

Of course, some people will also say that the first to understand the different mobile phone platform user group characteristics, and then study this group of users of the client application requirements and use behavior, in order to design the client, now this is a better research ideas.

In short, this in-depth discussion, will find the client will be more complex, some people say that the design of mobile phone client is the most complex, is very reasonable, it is worth more discussion ...