Actual test to avoid pitfalls! The red and black list of ten B-side components revealed

Recently I have seen many beauty bloggers publishing red and black lists, which are actually talking about which products have problems and are not recommended for use, and which products are good to recommend.

I thought that this situation would also exist in B-side design. Then I opened Ant Design and browsed through all the components, and you will find: "There will also be a red and black list in the components~"

Today I will also "bring goods" and talk about the red and black list of B-side components

First, let me talk about the definition of the red and black list.

• High frequency of use: This means that we use this component frequently.
• Blacklist: During use, you will encounter many problems, which will lead to failure to use normally
• Red list: tends to better meet the actual needs of B-end products and has a deeper understanding of components

Through my sharing, I can give you a preliminary understanding. Of course, the entire component is based on my usual design observations and use. The purpose is also to share with you and avoid pitfalls. If you have any questions, please feel free to discuss with us in the comment area~

Tree Selection

Tree selection appears very frequently in B-side systems, such as tables, forms, and various detail pages. As long as it involves hierarchical selection, it will appear (note that here we are mainly talking about tree selection components). However, as a designer, many unexpected problems will arise during the use of tree selection.

1. Size cannot be determined

Because of the special nature of the tree selection component, its size needs to be determined by the height and width of the content. During the design process, the height and width must be carefully considered.

Because when using tree selection, you need to consider the specific size of each content, too high or too low will not work

If it is too low, it will be very troublesome to expand the tree selection; if it is too high, it will give people a feeling that the data is empty when the amount of data is small.

The same is true for horizontal space, which requires in-depth thinking when designing.

2. Low applicability

As a basic component, tree selection is obviously "incapable" when dealing with complex selection requirements. Whether it is from the content displayed when selected or the difficulty of selecting a large amount of data, the applicability of the tree is greatly reduced. When encountering such a situation, it is recommended to adopt more "business components" to optimize the selection

Classification form

Category forms (also called Tab forms, but it’s just a nickname) are also very common in B-side products. They appear in complex forms, but as a designer, when you actually use category forms, you will find that there are many problems that we need to deal with.

1. Low efficiency

For users, the category form cannot fully view the form information, and each one needs to be switched back and forth. This means that when filling out the form, we cannot scroll to view all the data, but have to click on each individual category to understand the specific form content through the category.

At the same time, the prompts for required items are also very difficult to handle in the category form, because each one is independent, and as a user, it is actually unclear which specific category has required items, which will also lead to low filling efficiency (in fact, there are ways to deal with it, but everyone is not very satisfied with such reminders)

2. Edit mode is not easy to handle

The category form is also difficult to handle when it is in the editing state. After submitting the category form, we also need to consider the display format of the data in the details page. Because of the mapping relationship between the form and the details page, when designing, should we provide data editing under a certain category, or data editing for the entire category form?

In fact, this situation is very difficult to handle, especially for junior B-side designers.

Top navigation

The top navigation is very special. Although I mentioned it in my previous article about the navigation menu, there are still many problems when using the top navigation:

The biggest limitation of the top navigation is that the display quantity is too low. After all, in the spatial layout, the difference between horizontal space and vertical space is actually very large. The height setting of the top navigation cannot be too high. At the same time, the second and third level menus can only use drop-down menus, which leads to too many limitations in the design of the navigation menu. Once the project is developed, it is not easy to solve the problem.

Of course, top navigation is not completely useless. It has its place in many tool-type products and official websites. In fact, this type of form is more of a content-based website structure, so top navigation will be adopted, that is, the top and bottom structure will be more reasonable.

Raster

Strictly speaking, grids are not considered components, but many designers misuse and abuse them, resulting in them using grids just for the sake of using them.

Because in common mobile designs, there is no grid (mainly because the horizontal space on mobile devices is small and not used frequently)

In desktop design, it’s not that the grid is bad, but designers often use the grid blindly. To give a simple example, is it necessary to use the grid in a table?

The answer is: "Don't use the grid." In fact, this is the problem that many designers have now. Because they use it blindly, I often use the grid just for the sake of using it. I will summarize the main uses of the grid later. I hope everyone will not use it blindly.

Slide input bar

Sliding input bars often appear in many concept designs, especially in desktop designs on Dribbble. They are standard for every designer. However, in actual B-side projects, especially in desktop B-side systems, sliding input bars are a very unreasonable component.

Because most of the B-side products require precise data entry, and the data range is very large, which results in a sliding input bar, which gives users a very bad experience when using it. And because most users still expect direct input, this is why sliding input bars are rarely seen in B-side products today.

Breadcrumbs

Breadcrumb navigation is often used in actual work, because in common B-side systems, the navigation menu and information structure must be very complex (unless your system only has a first-level navigation menu and no other page hierarchy logic)

Therefore, through the breadcrumb navigation, we can clearly know the information structure of the entire page. Because breadcrumbs are small and flexible, they can be carried whether you are in a complete large page or a small bubble card. It can also play the role of returning and clearly display the path information of the page. It is a component that can kill two birds with one stone.

Shuttle Box

The shuttle frame is relatively familiar to everyone. When designing B-side products, it will be involved to a greater or lesser extent. At the same time, due to the complexity of the shuttle frame itself, and the fact that many designers feel that it occupies too large a proportion, they will not use it.

Today I am recommending the shuttle box, actually I want to recommend this type of shuttle component. You will find that in fact many business selection components will evolve through the form of shuttle boxes, such as our common "country city selection, department member selection" and even the field display and hide settings in the table. These are evolved step by step after the traditional data selection, so this type of shuttle box type data selection.

In fact, it reflects more the optimization made by the designer based on the current components, and analyzing why it is done this way and the reasons for doing so have become the reasons why the shuttle frame is on the list.

Collapse Panel

The accordion panel is like a big "box". When the product manager behind you says, "I want to put this information, and that information cannot be left out", drag out an accordion panel to solve this problem.

In fact, the folding panel is mainly used in detail pages and tables. Because the folding panel itself can hold a lot of information and can explain the specific hierarchical relationship, the use of the folding panel can have more possibilities for displaying data. It is plug-and-play and very convenient.

Bubble Cards

You won’t feel strange if a bubble card pops up anywhere on the page. In fact, bubble cards are a component I often use in my daily design because they can accommodate any content, from a string of text to a video.

And in the information, bubble cards are used as a component to supplement information. Therefore, in the system, if there is information that needs to be displayed but is not so important, it will be more convenient to use bubble cards.

Anchor navigation (anchor positioning)

The last one, of course, cannot escape our anchor navigation. I feel that with my crazy recommendation, more and more products are starting to use anchor navigation. Because B-side products must be complex and contain a lot of information, naturally we have to consider the information carrying more during the use process.

(I won’t provide pictures for anchor navigation, you have to use it yourself to feel it)

During the use process, anchor points are not as absolute as classification and will not forcibly split too much data, so they are easier to use.

At the same time, its compatibility will be stronger, and it can appear in various places such as form pages and detail pages~

It has so many benefits that I won’t go into detail here. Everyone who has used it says it’s good.

Make a small summary

• Blacklist: tree selection, category form, top navigation, grid, sliding input bar.
• Red list: breadcrumbs, shuttle box, folding panel, bubble card, anchor navigation.

In fact, when we are doing B-side design, you will find that what we need to solve is component design. All the content mentioned here are basic components. In fact, what we use more in work are business components that are evolved based on basic components. However, business components are indeed a "deep pit". We will talk about its particularity, business scenarios, and specific problems in subsequent articles.