1, list layout
2. Show the layout
3, Jiugong format layout
4. Tabbed layout
5. Layout of carousel mode
Step 6 expand the layout
7. Drawer layout
8. Pop-up frame layout
9. Horizontal expansion layout
10, multi-panel layout
1, list layout
Features:
The content is arranged from top to bottom, and the jump between navigation should return to the initial point.
Advantages:
1, the level display is clear.
2, visual streamline from top to bottom, fast browsing experience.
3. A menu with long content or a title with secondary text content can be displayed.
Insufficient:
The jump between 1. navigation should return to the initial point.
2. When there is too much content at the same level, users are prone to fatigue when browsing.
3, typesetting flexibility is not very high
The importance of each entrance can only be distinguished by the arrangement order and color.
Scene:
List menus are suitable for horizontal menus that display long or secondary text content.
2. Show the layout
Features:
Flexible layout. Designers can distribute these networks evenly or irregularly according to the importance of the content. Compared with the list type, its advantage is that more menus can be placed at the same height, which is more mobile, and exposure flow is one of them.
Advantages:
1, displaying various contents visually.
2. It is convenient to browse frequently updated content.
Insufficient:
1, which is not suitable for displaying the top-level portal framework.
2. It is easy to form an interface with too much content and looks messy.
3. The design effect is easy to be dull.
Scene:
Suitable for single content browsing and display based on pictures.
3, Jiugong format layout
Features:
Compared with the exhibition hall style, the layout is relatively stable as one line and three columns.
Advantages:
1, clearly showing the entrance.
2, easy to remember the location of each entrance, easy to find.
Insufficient:
The jump between 1. menus should return to the initial point.
2. You can't introduce general functions to users, you can only click in to know, and the initial state is not as clear as the list.
3. It is easy to form a deeper path.
4, can't directly show the entrance content.
5. You can't show too much portal secondary content.
Scene:
Suitable for exhibitions with many entrances, the navigation is not very frequent, or the business is relatively independent and there is not much contact.
4. Tabbed layout
Features:
Navigation always exists, with the selected state, and you can quickly switch to another navigation.
Advantages:
1, reduce the interface jump level.
2. The classification position is fixed.
3. Know the current entrance position.
It is easy to jump frequently between entrances without getting lost.
4. Directly display the content information of the most important portal.
Insufficient:
When there are too many function entries, this mode becomes cumbersome and impractical.
Scene:
Most of them are placed at the bottom for user's convenience. When switching, the selected state will be highlighted and a few will be placed at the top. Suitable for less classification and displaying its contents at the same time, with 3-5 navigation menu items; There are significant differences in content/function between navigation menu items; Users need to switch between various navigation options very frequently.
5. Layout of carousel mode
Features:
Focus on one object and slide through gestures to see more in order.
Advantages:
1, the content of a single page has strong integrity and high attention.
2. The linear browsing mode has a sense of fluency and direction.
Insufficient:
1, limited by the screen width, can display a few numbers, which requires users to actively explore.
2. Because the content structure of each page is similar, it is easy to ignore the following content.
3. You can't skip to view the interval pages, and you can only view the adjacent pages in sequence.
Scene:
Suitable for small amount, high focus and strong visual impact.
Step 6 expand the layout
Features:
More details can be displayed on one screen without turning pages.
Advantages:
1, reduce the interface jump level.
2. Have an overall understanding of classification.
3. Know the current entrance position.
Insufficient:
The classification position is not fixed, and it is inconvenient to jump across categories when there are many extended contents.
Scene:
Suitable for simultaneous display of multiple categories and their contents.
The content shows a lot of information.
7. Drawer layout
Features:
Highlight core functions and hide other functions.
Advantages:
1, which does not occupy valuable screen space, and allows users to concentrate on the content first.
2. The number of menu items for navigation is not limited, and all information organization items of the application can be added to the drawer navigation.
3. Strong expansibility and flexible configuration. Some commonly used shortcut operation functions and low-level interface entries can also be directly placed in the drawer navigation.
Insufficient:
1. Hiding other entries in the framework requires a certain memory cost for users.
2. The functional visibility of portal interaction is badly needed.
3. It is easy to conflict with other interactive ways in the application, such as sideslip gesture operation.
Scene:
It is suitable for products with more functions and complicated information structure. Users focus on browsing the main information flow, and there is no need to switch "sub-product modules" frequently, so the scalability is good.
8. Pop-up frame layout
Features:
There is no feeling of jumping out, which is suitable for presentations with less content and simple operation.
Advantages:
1, operate on the original interface without jumping out of the interface, and the experience is more coherent.
2. Only display when users need it (except important tips), and do not actively intervene.
Insufficient:
1, the display content is limited.
Scene:
Suitable for display with less content
9. Horizontal expansion layout
Features:
To save space, you can use arrows, dots or incomplete pictures to tell users that there is more to see.
Advantages:
1, don't jump out of the interface to see more content and experience coherence.
2. Save space.
Insufficient:
The width of the horizontal screen is limited, and the amount of more content is limited.
Scene:
More display modes suitable for pictures or information blocks.
10, multi-panel layout
Features:
More categories and contents can be presented at the same time.
Advantages:
1, reduce the interface jump level.
2. Have an overall understanding of classification.
3. The classification position is fixed.
4. Know the current entrance position.
Insufficient:
1, the interface is crowded.
Scene:
Suitable for simultaneous display of multiple categories and their contents.
There is not much information displayed in the content.
All of the above are basic layouts. In actual design, we need to choose the appropriate layout according to the specific data structure characteristics, combine different layouts like building blocks to complete complex interface design, and consider the differences in information structure, importance and quantity to provide the most appropriate layout to increase the usability and interactive experience of products.