Learn how to design the bottom navigation bar from TikTok, Youtube, Pinterest and other mainstream overseas products

Editor's Guide: The existence of the navigation bar can help users quickly find the required page, improve the ease of use of the product, and thus optimize the user's product experience.
So, how to determine whether your product needs the bottom navigation bar? If necessary, how should the bottom navigation bar be designed? In this article, the author summarizes the design strategy of the bottom navigation bar in combination with several overseas products.
Let's have a look.
Hello, I'm Clippp.
Today's article is about the design of the "bottom navigation bar".
Many popular products have design thinking points that we can learn from.
By analyzing overseas mainstream products, we can guide you to master the basic knowledge of the Tab Bar, find solutions to problems and develop creative thinking.
Before we begin, please think about the following two questions~Question 1: Does your product really need a Tab Bar? It seems not.
Although most mainstream products such as Taobao, WeChat, Weibo and Meituan use Tab Bar, this does not mean that all products need it.
Many apps do not have Tab Bars, such as calendars, calculators, Didi, Uber, etc.
Whether to use Tab Bar in APP should be considered flexibly according to different situations.
Q2: Why does the product have a Tab Bar? The answer is for ease of use, which means that a simple design like Tab Bar can easily help users navigate to the page.
After understanding the above problems, we need to consider how to design the Tab Bar to better meet the needs and experience of users.
1、 The navigation bar displaying the most important information should only contain the most useful information, and it should not be confused by adding too many useless labels.
Many APPs add a search function to the navigation bar because it helps users navigate and retrieve content faster.
In the bottom navigation of Spotify, the home page option is used to play or listen to all the content, the search option is used to search the next song and podcast, the music library option is used to play the favorite and saved songs in the playlist, and the separate member option is convenient for users to click and quickly complete the purchase operation.
2、 The mainstream apps prefer to use 4-5 tabs in the bottom navigation bar, which can keep the navigation bar clean and avoid the situation that users can't click the options accurately due to too many tabs.
There are only four options on Pinterest's navigation bar, which helps users click easily.
The message option will update the number of messages in real time, which is very intuitive for users.
In addition, the search function is included in the navigation bar, making it easy to switch back and forth between the home page and search results.
3、 Accommodates a variety of label forms.
Most APP bottom navigation bars will use the label form of "icon+text", which can clearly inform users of the results after clicking the label.
Sometimes we can also see that the navigation bar of some products only has icons without text, but this form will not affect our operation, because when the labels of the navigation bar use the shapes and connotations that users are particularly familiar with, text can be completely omitted.
The navigation bar of IKEA APP uses a map familiar to the public