Two main interface layouts and design methods for mobile phone clients

This paper mainly discusses the mobile phone client's two main interface layout and design methods, for mobile phone designers, such articles are relatively rare, of course, for the implementation of experience and usability is still very common.

The most obvious constraint of mobile phone product design is the sharp narrowing of design space compared to traditional desktop and web product design. For example, it's like moving from a 100-square-metre house to a 5-square-metre room, with nothing less, and dozens of times times as small a space as it can display. More importantly, in such a small space, you can not put things indiscriminately placed, to still keep them clear, reasonable, concise, beautiful. Using the noun in the elements of user experience, this involves the design problem of " frame layer ", in the design of mobile phone products, the design of frame layer is the key to layout problem.

However, many mobile phone products seem to be a mixed frame choice, summed up, the main way there are two: button-style layout, tabbed layout . Based on the two kinds of layout types and their various deformations, and combining two types of ingenious combination, can solve the most functional modules of the organization.

Two basic layout methods of mobile phone product frame layer Design

Button layout

When multiple functions are relatively independent, the user chooses one of the features according to the requirements, the button layout is a good choice, the structure is clear, simple and clear. Alipay, 12580 clients, Pingco and other mobile phone products, the initial interface has adopted a typical button-style layout.

Typical button-style layout

Take Alipay as an example, when you select a function button in more than one button, such as "mobile recharge", you go directly to the phone Recharge page, and then carry out the corresponding phone recharge operations. This design structure is clear, the mobile phone Alipay has 8 main functions, divides into 8 buttons, the layout is methodical.

Alipay's phone recharge function

variants . There are many variations in the way the button layout behaves. For example, in the panda reading, several function buttons line up, put in the bottom, above is the panda reads some notices; in love to help the bus, a few links are essentially buttons, you can choose the bus, line or site query; In the 139i contact, the button becomes a long strip, each row one, In one column (similar to the system controls on the iphone), each button is activated and the lower part has an explanation of its function. These are different ways to show the button layout, or more beautiful, or more concise, the multiple functions of the effective organization.

More implementations of a button layout (button part marked with a yellow box)

disadvantage . One disadvantage of the button layout is that the switching between functional modules requires more steps and the functions are relatively discrete. For example, from Alipay's phone recharge page to switch to the Transaction query page, you need to first select the lower right corner of the "Back" button, back to the main interface, and then click the "Transaction Query" button to enter the corresponding interface. In Alipay, the problem does not seem obvious, and it is not a problem. If each functional interface is more complex and deeper (for example, 12580 clients), switching between functions becomes cumbersome, and each time you return to the button combination interface to access other features.

Tabbed layouts

The label layout can solve the "function discrete" disadvantage in the button layout. When the function is closely related, the user needs frequent between each function frequently, the label type layout is the preferred design choice. UCWeb Browser (and Tencent QQ browser), mobile MSN, love to love to browse the bus channels and other mobile products have adopted a typical tag-style layout to organize some functional interface.

A typical tabbed layout (the label section is marked with a yellow box)

Love to love to visit the bus channel for example, and bus-related transfer, route, site three functions organized into labels, users enter the channel can be clear, according to their own needs easily switch (the default is the user often use the transfer function).

The three bus functions that love to go to the public transport channel are labeled organization

Why not put the love of the bus three functions on a single page, according to the way from top to bottom? Two main factors are considered.

First, the function is fully displayed . If three features are concentrated in one page, the content of each feature may be longer (especially in small screen phones), such as "Query history" will occupy a large part of the space. At this point, the route outside the transfer, site two features may not be displayed on the first screen, so users may not know the screen below there are two of these features.

Second, quickly switch labels . If three functions are concentrated in a page, if users want to check the bus site, you must "pass" in front of the transfer, route two function modules, at least 6-9 down key to reach the bus site input box. With the label layout, you can only move the right key two times.

variants . Tabbed layouts can also be more expressive, and here are two examples. In the bulk of the mobile phone, several major channels are all organized through the label (although it looks like a big button), the channel through the left and right keys can be switched, the current selection of the label has been in the middle position, very obvious. In the thousand-foot download, several main functions of the label is placed at the bottom of the screen, and the same as the bulk of the mobile phone, but also through the key to achieve the label switch, the current label through the yellow color recognition, use is very intuitive.

More representations of the tabbed layout (the label section is marked with a yellow box)

disadvantage . Of course, the label layout also has its potential problems, the most important thing is the label switch. When the label page is more complex, such as a lot of links, text content is very long, the current cursor may remain in the body. At this point, if the cursor to move to the label and then switch, it will be very cumbersome, need a lot of key operation. For this problem, Tencent QQ Browser, mobile phone MSN, UCWeb Browser, Bedouin mobile phone software according to its own characteristics, there are different solutions. The various implementations of label switching and their pros and cons will be specially written for analysis.

Hybrid application of two kinds of layout methods

In particular, the button layout and the tabbed layout are different ways to organize multiple functional modules in different scenarios , with no good or bad points, only to see if they are appropriate or not. Using the right way in a suitable scenario allows complex functions to be displayed well on a small mobile interface. In fact, most of the products with complex functions have to use these two ways to structure their own products. Here are two typical examples of two ways to mix and use the layout.

Mobile phone QQ and handheld treasure mixed use of two layout methods

In the mobile phone QQ, the initial main menu uses the button layout, by default "QQ" is the selected button, because "QQ" is the most commonly used function. In addition, the mobile direction key, you can also choose "Tencent Network", "Game", "information" and other function buttons. Whichever button you choose, click, will enter the tab-type organization of the Operation page, through the Switch tab, can still achieve the fast switching functions (browsing the web, viewing mail, chatting QQ, group chat, etc.).

All of the handheld treasure interface is a combination of two layouts: on the one hand, through the key to switch around the label, to achieve the main function of the cycle switch, on the other hand, in each of the tags inside, each child function organized into a vertical button, through the key to choose. The left and right key and up and down keys have been very good use, the user will not realize in the process of switching the label or in the Mobile button, everything through the design naturally reached. Palm Bao has 36 sub functions, through this organization, very clear on the mobile phone display, operation is extremely convenient.