The top navigation bar of APP (hereinafter referred to as "navigation bar") is all too familiar to us. It is an indispensable part of UI design and is used in almost every page. Although it looks simple and doesn’t seem to require much effort, it is not so easy to design a navigation bar that matches product requirements and user goals. There are many design details that need Number List to be paid attention to.
The navigation bar integrates some functions that are commonly used or must be used by users, and the reuse rate is extremely high. When the user is performing part of the path operation, the navigation bar is like a "light" in the dark, guiding the user to the next step or back to the previous step. operation, so good user experience is very important.
We deal with the navigation bar every day. If you look closely, you will find that there are more or less differences in the top navigation bar of different applications. In order to give everyone a clearer and comprehensive understanding of the navigation bar, this article will discuss the The design style, composition structure, style, interaction and other aspects of the navigation bar are summarized. I hope it can help everyone, let's take a look together.
First, the basic introduction of the navigation bar
1. Where is the navigation bar?
In UI design components, such as tab bar, menu bar, tab bar, application bar, title bar, navigation bar, etc., among many types and names, many new designers have difficulty distinguishing these repeated names and the corresponding areas. .
The navigation bar is located at the top of the application, that is, below the status bar. It is mainly used to clarify the page position, hierarchy, etc., and connects the parent/child structure pages. The weight should be higher than all the content of the current page. If the user does not know where they are and how to go back to the previous step, there must be a problem with the navigation bar. Although it is called the "navigation bar" in the iOS system and the "top application bar" in the Android system, the names are different, but the location and role are almost the same.