9 common la s in mobile phone Interface Design

Because of the limited screen size, the mobile phone can display much less content than the PC screen. In the mobile phone interface design, if all the content is directly displayed on a screen, the interface will be messy, ugly, and unavailable. We need to organize the information effectively and display the information to users through reasonable layout. Reasonable layout design can make the information orderly, and users can easily find the information they want. The product interaction efficiency and information transmission efficiency are improved. Next let's take a look at some of the la s that are often used in mobile phone interface design.

1. vertical bar list

The vertical bar list is one of the most commonly used la S. The mobile phone screen is usually displayed on the portrait screen of the List, and the text is displayed on the horizontal screen. Therefore, the vertical list can contain more information. The length of the list can be unlimited. you can scroll up or down to view more information. The vertical column list is visually neat and beautiful, with high user acceptance. It is often used for displaying parallel elements, including directories, categories, and content.

 

2. Horizontal Bar

 

A horizontal column is a layout that displays parallel elements horizontally. Common tool bar, tab, coverflow and so on all adopt this layout. Limited by the screen width, it can be displayed in a small number, but you can slide the screen left and right or click the arrow to view more content, but this requires the user to actively explore. It is suitable for scenarios with a small number of elements. When more content needs to be displayed, the vertical list is a better choice.

 

 
 

3,Jiugongge

 

Jiugongge is a classic design with simple and clear display forms and a wide range of user acceptance. When the number of elements is fixed and does not change to 8, 9, 12, 16, it is suitable for the use of nine cells. Although it sometimes gives people the feeling of old design, some of its variants are currently quite popular, such as the metro style and one-line and two-grid design.

 

 

4, Tab

 

Tab can be used to reduce the page Jump level, and the parallel information can be displayed through horizontal or vertical tabs. Compared with the traditional level-1 architecture, this architecture can reduce the number of clicks and improve efficiency. When features are closely linked and users need to frequently perform between features, Tab layout is the first choice.

 

 
 

5. Multi-panel

 

The layout of the multi-faceted edition is common in pad terminals and will also be used on mobile phones. The multi-faceted edition is similar to the tab arranged on the vertical screen. It can display more information and has high operation efficiency. It is suitable for scenarios where there are many categories and contents. Its disadvantage is that the interface is crowded.

 

 
 

 6. Accordion

The accordion layout is common in two-level structure. You can click a category to display the second-level content. The content is hidden when you do not need it. Therefore, it can carry more information while keeping the interface simple. Compared with the tree structure, the accordion reduces the number of clicks and improves the operation efficiency. Accordion is common in browsers. Many browsers use the accordion Design for navigation, history, download management, and other pages.

 

7. Dialog Box

 

Pop-up boxes are common and are also a type of layout design. The pop-up box hides the content and only pops up when needed to save the screen space. The pop-up box allows you to operate on the original interface without having to jump out of the interface. The experience is consistent. Pop-up boxes are widely used on Android systems, such as menus, single-choice boxes, and multiple-choice boxes. They are rarely used on iOS systems.

 

 

8,Drawer/sidebar

The drawer also hides the content and expands it as needed. The pop-up box is usually used to complete the setting or a task, while the drawer shows the specific content. The drawer is more natural in the interactive experience and better integrated with the original interface. The drawer bar is usually pulled from the top or bottom. If it is pulled from both sides of the left and right, it is generally called a sidebar. Path and some browser bookmarks are designed in the sidebar.

 

 
 

9,Tag

 

Tags are used to display the search interface and classification interface. The tag method is more dynamic and makes the application more interesting, but the use cases are limited.

 

 

In the product design processWe need to consider providing a matching layout for different information structures.. The layout scheme is not unique. clever use of various la s can enhance the usability and interactive experience of products. We can also use a combination of basic la s to complete complex interface design, such as daily browser menus. It is a pop-up box and has three tabs, under each tab is an 8-Cell Layout.

In short, for mobile terminals, the content is always beyond the display range of the screen, and the design of the interface layout is very important. Understanding these nine common layout designs makes it easier for us to design products.