Flexible interface to expand

What is an interface that is flexible and extensible?

In the design of interface layout, fully take into account in the process of product development, the number of information block increase or decrease, as well as the content of each piece of information, to ensure that the interface design in all cases can achieve a perfect uniform display effect.

Typical problems

1, a content module in the content of the increase, the module can not be applied, page style disorder.

2, an information block has more than one tab, when the need to add more tab, the block can not accommodate, need to redesign.

Problem description

The space on the interface is limited, and the content to be displayed may be large. Many times, as the product function changes, the interface layout will change. This change causes the number of information blocks on the interface to multiply or decrease exponentially, or the content contained within an information block multiplies or shortens. How to display a lot of rich information in the limited space, and maintain the flexibility and expansibility of the interface when the content of the interface is changed, is the problem that needs to be paid attention to when designing the interface layout.

Designers in the design of user interface, the need to fully consider the various changes in the situation, as far as possible to provide a flexible, scalable interface structure, so that the number of information blocks and each piece of information can be carried to achieve flexible changes, fully expanded to achieve "status quo."

Common design methods

With a scalable interaction, you can flexibly respond to changes in the number of blocks of information and the content of the information.

1. Module label (Tabs)

Module tags (Tabs), which can output more information in the same screen space, are a common and extensible way of interacting. When in the same information block, you need to show several types of information about the connection, and this information does not need to be displayed at the same time, you can choose to use the module tag. The design of the label borrows the real-life folder label design, each label on the title, can be summed up the content of the main effect. So tags can usually play a role in navigation. When you switch content through a module tag, you do not need to refresh the page or jump.

When the number of pieces of information needs to be expanded, just add the label, and it will not have any effect on the original information content. Module tags can typically display 2-10 category labels. But as the amount of information increases, the number of labels may also need to increase substantially. When you want to show too many labels (more than 5), you can add "more" options to the tab bar to add more information to the "more" category.

2. Accordion Menu

The accordion menu is a collapsible set of information modules. The accordion menu is available when the limited interface space is not able to fully display all the contents of the menu or all the pieces of information. By clicking on the title of the information block, the user displays the required information and hides the information temporarily. This allows users to see the title of all information, a complete understanding of the content, and the details of the information needed to focus on the key information.

Accordion menu can be used for navigation design, the first level navigation display in the information block title, level two navigation displayed in the information block content. can also be used to show the title of the text information, picture information and other content details.

3, Waterfall Flow layout

Waterfall Flow layout is a popular form of page layout recently. A number of equal-width, highly adaptive chunks of information on a page are grouped into columns and displayed vertically. As the page scrolls down, the layout continues to load the block of information and attaches to the end of the current page.

This layout is suitable for information blocks with similar content and no emphasis. The column width is fixed in the layout, each column information block is one group, each information block in the column arranges sequentially, the height is not fixed. Waterfall flow layout in the vertical direction of excellent scalability, is widely used in a variety of picture information Display class interface.

4. Conveyor Belt

Conveyor Belts (carousel) is a common way of graphical display interaction. It can make full use of the limited screen space, help the designer to arrange the layout better, to display a series of graphic images, so that users get a better focus experience. The performance of the conveyor belt is generally done by clicking on the arrow at the left and right sides of the interaction, so that the picture information turns to the user in turn, so that each picture can be independently displayed opportunities.

The conveyor belt can organize the content order according to certain rules, the picture can scroll back and forth in order, provide clear visual focus, and it is easy to expand. can be applied to photo browsing, product display, image search and other scenes. Wen/Zimu yoyo ' S BLOG