Tab Bar Dynamic Design Tips

May 4, 2023

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains the Tab Scroller and Tab components.

What is the tab bar?

A tab bar lets people navigate among different areas of an app, like the Alarm, Stopwatch, and Timer tabs in the Clock app. If you need to provide controls that act on elements in the current view, use a toolbar instead. Make sure the tab bar is visible when people navigate to different areas in your app.

How do I open a tab bar?

To open a tab-you order a drink, usually at the bar, and instead of paying for it then, the bar keeps your credit card. The credit card is held and charged until you are done and ready to complete the transaction–this leads us to the next phrase

3 Creative Concepts of Mobile Tab Bar Navigation | by Nick Babich | UX  Planet

02 App bottom navigation composition

It usually consists of icons, text/dotted line decorations, and base cards (of course, some products only use icons or text), but designers focus on these three parts when performing dynamic design.

03 Tab Bar dynamic type

 icon dynamic
 Decorative elements dynamic
 Bottom card dynamics

The dynamic effect is from weak to strong, and the visual hierarchy is sorted from low to high: icon dynamics — decorative element dynamics — bottom card dynamics. (Sort according to the effect of the case in this article, but the effect will be different)

Icon Dynamic․ We know that icon styles can be simply divided into: linear, surface, and line surface. On this basis, by modifying the color or shape, more styles can be extended.

 In the bottom navigation, if the icons are selected in a linear style before and after
The most commonly used is to add a clipping path (a path effect of Ae), you can understand it as Mr. Tony, you can control the growth of lines by adjusting the 100% parameter.

But it's just monochrome trim, which looks drab. We can copy a few more layers on the basis of this animation, and add brand colors respectively, which can make the visual look richer.

You can also change the way, just adjust the position attributes of icons of different colors to get the glitch effect.

If you think these are too exaggerated, it is a better choice to add a clipping path to a single icon, combined with basic attributes such as displacement and rotation.

 If the selected icon is face style

The general method is to adjust the opacity, which is softer than hard cutting, and does not attract the user's attention too much. But for products with entertainment attributes, it may seem a bit ordinary.

We can consider using a mask to create dynamics. First, draw a few circles around the icon, then use the outline of the icon as a circle mask to control its display range, and finally adjust the zoom of the circle.

In some special times, designers may be eager to draw more icons to create an atmosphere.

For such icons, you only need to refer to their physical state [explain below], and then follow the principle of expanding from bottom to top and from the center to the surroundings to adjust the basic attributes, and then you can create a detailed appearance animation.

(Physical state: the state of the object in the real scene. The trophy in the above picture is usually placed on the ground in real world, so the direction of appearance is from bottom to top. But if your icon is a pennant, then the physical state should be hung on the wall , all appearance directions are from top to bottom)
Of course, if the highlights and shadows are removed, it will be more convenient when making some dynamics. For example: copy a star, set its initial position to the distance of a trophy, record keyframes, and then move the whole by a trophy distance. The ears adjust the path to move and deform, which creates the illusion of 3D rotation.

 If the selected icon is a line style

For icons with complex structures, they can be layered in advance. The lines can still use the clipping path (in the Tab bar, the direction of the starting point of the clipping path of different icons is usually the same to maintain consistency), while the filling only needs to adjust the element scaling and limit its display range with the help of a mask.

Dynamics of decorative elements․ If you think the above solutions are not novel enough, then we can start with the decorative elements.
Through dynamic effects, it can even reflect the attributes of the product industry.

 Based on this idea, we also let the decorative elements be placed below

Try tinkering with track styles, then animate element opacity and position, can you guess what type of product this is?

Or even more exaggerated, design the trace as a circuit diagram. Among them, the clipping path is added to the lines, and then the dots are moved along the path by means of the Ae path tracking method. Finally, the mask is used to control the overall animation display range. This solution seems to be suitable for technology or game products.

 Decorative elements can also be placed above

By adjusting the element path to change its shape, simulate liquid dripping, and then zoom through the mask to make the icon in the selected state appear.

 Decorative elements can also be placed in the middle

If your icon design is clever enough, we can draw the trajectory of key strokes in advance, and then we can complete the movement of strokes by trimming this trajectory.

Bottom card dynamics․ The reason why this kind of dynamic is rare is that its dynamic effect area is large, the visual level is high, and it is easy to attract users' attention too much. At present, I have only seen the card raised effect in individual products.

 Make the card raised when the icon is selected
To create such an effect in Ae, the first thing that comes to mind may be to adjust the card path, but this method is very troublesome when making elasticity.
We have an easier way, first draw an extra circle, and then merge with the card path. In order to make the edges smooth, Gaussian blur and simple blocking are added as a whole, and the parameters are increased respectively to make the edges smooth.

After completing the rounding process, modify the basic properties of other elements.

The only thing I can remember so far is that Meituan Waimai has seen this effect. But in order to reduce visual interference, it weakens the elastic times.

 In addition to convex, it can also be concave

This effect is inspired by the Dribbble designer (EuroART93). We only need to change the Boolean operation mode of the circle and the base card in the raised case to subtraction, and adjust the basic attributes of other elements as well.

This solution has not been seen in other products so far, and the reason is that the effect is too eye-catching.
After seeing so much, it is actually not difficult to find. For the same icon, you only need to change the movement mode of different attributes or elements to bring different feelings.

Perhaps the generation of creativity is not something new that suddenly bursts out of the head. It is a combination of many old content that we are familiar with. It is this wonderful fusion between them that brings us a sense of freshness, and perhaps this is the idea we want.

Two final words:

Each product has its own tonality and target users, and the dynamic effects are also strong and weak. A good dynamic should be able to match with it, rather than draw an absolute answer based on a certain product. This article demonstrates what dynamics are used for different types of icons, but it does not mean that they can only be used in this way. The types of dynamic effects are far more than these, and the above are just the most common combinations of dynamic attributes, so please don't limit your ideas.