Product Manager: multi-platform mobile device screen adaptation

In the previous section, we introduced "Product Manager detailed mobile device design". This article will introduce "uidesign for mobile terminal device screen adaptation ".

With the increasing number of mobile phone screens, some users' mobile phone screens are still in the size of 240*320. Of course, they are also stored in some irregular screen resolution. For many UIS, multiple sets of images can be drawn from different mobile phone screens to ensure that the mobile client matches on different screens. Plan the implementation of the mobile client on different screens, and develop a filling Area algorithm that can calculate the position of the specific control, this is an interface adaptation algorithm for matching different mobile phone screens in the early stage.

First, identify several mobile phone screen areas starting from 240*320 and 320*240)

Filling Area

CONTAINER: In this standard, the concept of filling area is used to control the interface. The whole page consists of filling areas of different sizes. Different filling areas have different Scaling Rules when they adapt to the screen.

SCREEN

SCREEN: the size of the visible area under each resolution in the Root Filling Area. The size is equal to the SCREEN resolution of a mobile phone model. For example, in Nokia N78, the SCREEN parameter is 240*320.

Nokia N78 screen design

Baseline Screen

For landscape screens and landscape screens, two sets of landscape screens are used: Landscape screens 240*320 and landscape screens 320*240. You can switch between the two screen types.

Portrait screen 240*320 appropriate screen Scaling:

The screen size of the portrait screen is 240*320, and can be scaled to a size of 480*640. Meet the needs of iPhone, Android, and other users.

Screen scaling of the portrait Screen

Vertical screen font proportional Scaling: when the control adapts to different screens, the control usually needs to scale according to the font.

Principles Followed-headers and tails

In the adaptation process of the regular interface, the principle is to determine the header height first and then the footer height, then, the height of the content filling area is determined based on the screen height and the head and tail height, and the layout of the entire interface is adjusted. The control width is based on proportional scaling.

Common interfaces

Android and iPhone touch screens

Nokia, KJava, and other keyboard types

Scaling Principle

When the interface is adapted to different interfaces, two different Scaling Rules are used. Font scaling and proportional scaling are used for different filling areas as needed.

The overall scaling rule is designed based on the adaptive mode of images on different screens. We assume there is an n73 mobile phone with a screen resolution of 240*320, on this phone, you can view a full screen 480*640 image. The mobile phone is displayed, and the following red box shows the visible area of the screen ):

Scaling Principle

If we use an E63 mobile phone with a resolution of 320*240) for viewing, the effects in different viewing modes are marked with a red box as the visible area ):

Highly adaptive effect

Adaptive width effect

It can be seen from the effect that, if the adaptive width effect is used for zooming, the upper and lower scroll bars can achieve better display effect and ensure that the image content can be clearly viewed. Therefore, the image width is used as an image and the width ratio of different screen resolutions is used to adjust the wallpaper scale the image.

Startup Interface

240*320-320*240

240*320-Portrait screen Extension

320*240-horizontal screen Extension

General Interface

240*320-320*240

240*320-Portrait screen Extension

320*240-horizontal screen Extension

On the gongge page, the program automatically sorts the icons, and The beginning and end follow the regular interface adaptation principle.

Gongge Interface