My opinion on the design of mobile client's interactive fitting

Brief: This article from the mobile phone platform, model (touch screen and keyboard) and screen size three simple discussion of the mobile phone client interaction and adaptation characteristics and some principles.

Mobile phone client software is only a function of mobile phone, but it is more complex than the design of a single phone. In the design of a single, single series of mobile phones, you need to consider the phone's software and hardware advantages and disadvantages, considering its characteristics, its UI Style guideline, to determine the content, the entire platform's UI also found a foundation. That said, it's at best to consider the characteristics of a system, a screen, and all the design basics of a different function are consistent.

But for the client, I look, it seems very simple, is to design an application. In fact, the client is more than fit, the client will not only be used in a model of mobile phones. This problem with the attendant, how to adapt to different mobile phones, mobile phone ever-changing, I can not only for a mobile phone, a platform it? Of course, some clients do, and only use a platform such as Windows Mobile, Symbian, IOS, Android, Java (not system), and so on. But even on the same platform, the problem is a lot, is to be used in the touch screen, or in the keyboard machine? is in the big screen, or small screen and so on. How to deal with??? Waiting for discussion, here is just a talk ...

Client on different platforms, interface display and features vary

Therefore, in this article, I would like to briefly summarize the mobile phone client's interactive adaptation method, hoping to better guide the current mobile application design requirements.

The analysis of the matching of mobile phone client

For mobile client adaptation, I think the first thing to do is how to fit, I want to use on what kind of mobile phone? In design, I will be from the platform, keyboard machine and touch screen, screen size three dimensions analysis:

1. Platform:

The different platform handset's design style, the operation way, the hardware disposition has the very big difference. Current mainstream platform mainly includes IOS, Android, Symbian, Blackberry, Win Phone7, Web OS, etc.

Each platform has its own design guidelines (UI Style), and its corresponding phone hardware has its own characteristics, such as the iphone's Home button, the Android back button, the BlackBerry wheel, and so on. Specifically, the Palm,palm Web OS is really worth the research of mobile phone interaction designers (mobile Palm pre). Therefore, in the design, not only to understand the platform design guidelines, but also need to consider the hardware features of the platform, so that their design applications not only meet the interactive characteristics of the platform, and compatible with the hardware usage of the platform, improve the availability of applications.

Several features of Win phone 7 system

Several features of iOS system

Several features of the Android system

As can be seen from the above, a few of the latest platforms also have a big difference. For mobile phone platform features, will be in the future blog details.

2. Touch screen machine and keyboard machine

Keyboard and touch screen machine in the operating mode is very different.

Here is a brief summary of the keyboard and touch screen machine features.

Keyboard Machine:

1 keyboard machine operation mode using soft key and screen soft key label one by one mapping (left and right Soft key, dialog box buttons and so on with the keyboard one by one corresponding to the label, all screen elements need to use the five-direction key (wheel) navigation, need to use the cursor to manipulate all the elements on the screen.

2 The general left and right soft key on a "return" key. Users can quickly return through the soft keys.

3 because the keyboard operation, each selection of items need to browse from top to bottom, so the importance of high, the use of high frequency elements should be placed in the front of the screen.

4 button can be based on the number of keys to set some quick action;

5 In addition to the form of web pages, most of the operations are done in the menu.

6 text input way, through the keyboard to enter, full keyboard and number keys are different.

Touch screen machine (screen size will be slightly larger):

The main feature of touch screen handset is to manipulate screen object directly. For the user, no mapping conversion is required, so it is easier to learn. But because the use of mobile phone scene is very special, or stand, or walking, or can only make a hand and so on, in these times to accurate pointing operation also has a certain degree of difficulty.

Touch-screen phones also have two forms of operation, using their fingers to manipulate directly or with a pen. But the current screen development and the introduction of the model, mainly for the use of finger directly to operate. The effect will be better if the user has the force feedback on the screen after the operation.

1 The size of the operation of the object in line with the finger operation, key size set specification:

index finger clicks the spacing of about 7*7 mm, 1mm spacing, thumb clicks 8*8 mm,2mm spacing. The currently recommended value is 9mm and minimum should be no less than 7mm. Of course some important operations, or frequently clicked areas can be set slightly larger.

2 As a single hand operation, only use the thumb operation, therefore, the most frequently used button size must be based on the size of the thumb to set; the thumb radiation range is mainly at the bottom of the screen, so it is better to put these operations in a slightly lower position.

3 Information Display: Large screen can display more content, but avoid information display too crowded.

4 gesture Definition: The current mobile phone we can see some basic gesture operation, such as toggle, drag, double refers to enlarge/shrink, double-click the most commonly used operations. In fact, there are many other forms of gesture, such as circle, tick, fork, double finger click, double finger slide, etc., which need to be based on the phone's own configuration to use, do not recommend casual use of special gestures to define common operating behavior.

5 Input mode: input will be a virtual keyboard, keyboard display and hidden need to consider, at the same time, can be based on the purpose of the current input, directly to do the operation of the button.

3. Size of screen

When considering the size of your phone screen, be sure to distinguish between physical size and resolution. The size of the physical size and resolution is not one by one, for example, for HTC's S1 2.8 inches, the resolution is 320*240;nokia n81 2.4 inches, but the resolution is also 320*240. As a result, icons of the same resolution size will look bigger in the S1, but the icons may not be so delicate.

In visual design, you need to consider this problem first, in the first design, you should be more diligent in the introduction of visual images to the target screen to check to see if the design is appropriate, do not have to complete the visual design, only to find that the design icon is too small or not exquisite.

For 2.8-inch and 320 * 240 (including) the following screen, in the present is a small screen interface, in this grade, should be the keyboard machine dominate. The keyboard design should be more reference to the Nokia specifications (for usability, Nokia's design is still impeccable).

For screens above 3.0 inches and 480*320, it is considered to be a large screen, and is based on a touchscreen machine. "With the development of screen technology, the density of the screen has become more and more large, so the value is only a reference value." 】

1 Screen Information layout

Small screens and large screens can have significant differences in the layout of client information content. When the screen is large, in addition to considering information architecture, you need to consider what information and operations on the interface, screen hours, but also need to consider the information architecture, better information on the screen, the link between information and so on.

2 different screen design features

A The design features of large screen:

in the interface, the display of more information, including interface content, navigation and Operation buttons, large screen to touch screen, more directly with the finger to operate, on the screen, the display of information should not be too much information password too high, not conducive to information search.

b Small screen design features:

in the interface to first show the client's function and structure, keyboard machine, operating mode, first navigation, after the display content, the content of the screen is reasonable, in line with the user's expectations.

For the mobile phone screen size adaptation, will be in the future blog details.

Second, the mobile phone client design principles and adaptation steps

1. Client Design Principles

1 Guide to the limitations of the physical properties of the mobile phone:

A client text input, must be minimized: due to the low efficiency of the phone in the input, in the design process, should minimize the user's input, if it is possible to set the default value, or let the user select the target value.

b The client's information structure is good, the logical relationship between the screen and the screen is clear: because the phone screen is generally small, even if there is a 4-inch screen, it can only display a small amount of information, therefore, in the mobile phone design, more need to have a clear message structure, users know where the current, and can return to where.

c The client's operations, functions do not hide too deep, important functions need to be in the interface with appropriate hints: because the phone screen is small, can not show all the information. Therefore, the important, the use of high frequency functions or information in the most important position, and on the home page display or instructions.

2 mobile phone mobile characteristics caused by the guide:

A The main function of the client operation, with a single hand can be completed: the use of mobile phone scenarios, in many scenarios, users can only single hand to operate the mobile phone, therefore, in the client design process, we need to consider the most important core functions, whether one hand operation completed.

b The client's interface must be simple, easy to operate, less operation: Because the user operation situation is complex, in the process of using the client may have additional cognitive load, therefore, in the design of the client process, the logic must be simple, the operation steps should be reduced.

c The Client interface level is not too deep, preferably not more than 3 levels:

D client tips include interface, sound, vibration in a variety of forms: users in the operation of mobile phones, often do not always stare at the mobile phone screen, so many mobile phone status page switching, out of the user's view, at this time, must provide other sensory channels other than visual information (such as hearing, touch, etc.), to the user to do a hint.

3 Other Principles

A client-side UI adaptation does not have to adhere to all the platforms are consistent, as long as some of the key elements of the brand can be reflected:

b The main mode of operation of the client (frame, navigation, key function and the corresponding way of the soft key should be consistent with the carrier's mobile phone operating system: The client is hosted in a specific mobile phone platform, and the user will be familiar with the current mobile phone platform, therefore, in the design process, need to better understand the current mobile phone platform, And so that the design of the client and the mobile phone system design logic consistent.

2. Mobile phone client design matching steps:

Personally, it is the client's adaptation to start with a platform, but to focus on multiple platforms.

1 According to the company's strategy, select a first cut into the platform;

2 understanding of the Platform's UI design specifications, the available UI controls and interaction principles;

3 to determine the size of the screen in order to design the first client, but to consider the possibility of matching other screens, is adaptive to expand or shrink;

4 according to the platform and screen size, to choose the most typical mobile phone, start client interaction design.

5 Determine the core purpose of the client. For entertainment-oriented, it should be more entertaining in the way of design;

6 According to the client's function and content, to design the client's information architecture;

7 according to the principle of UCD, to complete the client interaction prototype;

In the process of interacting with prototypes, you need to consider the three factors (platform, screen, touch/non touch) of your phone's suitability for future adaptation.

Source Address: http://ued.taobao.com/blo......lti-platform/