The sidebar is a classic navigation design. It is usually displayed in a vertical column on the right or left side of the website or APP. The specific location of the sidebar depends on the overall design.

But generally speaking, because of visual habits and user behavior, the sidebar on the left is easier to attract users' attention at the first time, so it can also provide users with efficient navigation; The sidebar on the right is often seen as a secondary navigation, which can enrich the structure of the website.

1. Drop down menu

1.1 Understand the side navigation bar

The side navigation bar is a navigation bar fixed at or drawn from the side, which is generally used on the touch navigation bar of the enterprise website, or the left functional navigation bar of the background page/system. The direction of the side navigation bar is adjusted according to the business requirements. The direction is aligned to the side. Let's take a look at the style of the side navigation bar.

The designer's understanding and aesthetics of design determine how many gaps should be left around.

1.2 Draw rectangular box

The height of the rectangular box can change with the screen height, so it does not need to be considered. Just define the width of the rectangular box. The width is small (240px), medium (280px), and large (280px). When we decide which size to use, we need to define the distance between the rectangular box and the content. The example shown in the figure below is for reference in medium size.

1.3 Text line height

When we draw a rectangle, we need to fill it in. The text line height has been mentioned in the previous chapter, so I won't say more. The height of the text line is determined by the height of the mouse state (Hover). The height of the Hover is the height of the text line. However, it should be noted that the left and right text of the side navigation bar should be left more white, so that the navigation bar can not look too tight and oppressive, and it will not look very beautiful.

1.4 Hierarchy

Because there is a tree structure in the side navigation bar, a main level can be divided into multiple sub levels, so it is necessary to divide the levels. There are many ways to divide the hierarchy. You can change the font size, color, font style, and distance. My method is to change the distance. The method to be used depends on the specific requirements. For example, the requirements that need to highlight the hierarchy and have strong contrast can be changed by changing the font size and changing the font (bold). In the following figure, the deeper the color, the higher the level. In addition, it should be noted that there are also levels of major categories, and the higher the level, the higher the level.

1.5 Determination of distance

After we draw the rectangular box and fill in the text, we need to determine the distance of each level. We need to make a feeling of 1>2>3, and adjust the spacing of each level slightly to highlight their differences. Determining distance refers to the distance on the left side of each level. Like stairs, the stairs on the upper level usually have the highest priority. There is an additional 4px gap between Level 1 (Favorites) and Level 2 (Arts), in order to highlight the difference between the main level and sub level, and slightly strengthen the main level.

Let's take a look at the final effect.

2. Pagination

2.1 Understanding paging

After the side navigation, we talked about pagination. There are three types of pagination: ordinary pagination, first and last pagination, and jump pagination. The name is random. It's OK to understand what it means. Let's understand its style.

2.2 Drawing common pagination

Next, let's learn to draw it. I divide all pages into three sizes (large, medium, and small), which are 32px (small), 36 (medium), and 40 (large). The curvature of each small button is 4px (small), 6px (medium), and 8px (large). I use 4px or 8px for the spacing between each small button. Although 4px is easier to touch by mistake, its visual effect is much better than 8px.

Of course, the above values are not absolute. The size, curvature and spacing are all determined according to the project requirements and the designer's own aesthetics.

2.3 Drawing the first and last pages

The first and last page splitting is to add two buttons on the basis of ordinary page splitting, namely "Jump to the first page" and "Jump to the last page". Just pay attention to separating the "number button (pagination)" from the "jump to the first and last page button" by priority, and control the distance between the first and last buttons and the number button. If the distance is too short, it is easy to touch by mistake, and if the distance is too long, it will damage the integrity.

Draw first and last page breaks

2.4 Drawing Jump Pagination

The function of "Total Pages" and "Jump to Specified Pages" is added to the first and last pages. The total number of pages is displayed at the front of the jump page, and the number of pages that jump to the specified page is displayed at the back. The spacing of all button modules decreases exponentially, so that different paging functions can be distinguished more clearly, and there is also an implicit relationship between them.

Combine the paging component with other components to see the final effect. The image compression effect is not very good, which is much worse than the actual effect (original scale).

3. Steps

3.1 Understand the steps

The steps are relatively simple. Let's talk about them here. There are many styles of step bars, but their drawing methods are similar to each other. I will just take out one and explain it one by one.

Draw Step Bar

The step bar is not difficult to draw. Just pay attention to the distance between objects and elements. The distance to be left should also be more careful. It should be symmetrical and not leave too much on the left and too little on the right. The distance difference between related parts should not be too large. In addition, the visual balance should be considered, and horizontal or vertical centering should not be blindly adopted. As long as you control the distance skillfully and know how much white to leave under what needs, you can draw different styles of step bars with ease and make things more natural and comfortable.

In design, we should strive for perfection, take every pixel into consideration and use them reasonably.