About the navigation bar
The top navigation bar appears at the top of the application screen, below the status bar, and guides the current page position and level of controls; that is, when you use an app one day and ask me where I am and how do I go back, it is the navigation bar Not designed.
The navigation bar is one of the most common controls in an app, and it's described in the iOS and Material Design specifications:
On iOS, the bar is called the navigation bar, and its height is shorter than the Android version.
On Android, this bar is called the top app bar, and this article will refer to it by the more common name of the navigation bar.
Second, the characteristics of the navigation bar
1. Stable
The top navigation bar is displayed at consumer email list the top of almost every page in the app, sometimes resident, sometimes hidden as the consumer email list page needs to, but never absent; very few pages do not need a navigation bar at all, and the entire app does not. The navigation bar is almost non-existent.
2. Instructive
The reason why it is called the navigation bar is obviously because this thing has a navigation function. It can tell the user what page you are on now (navigation bar title) and where you are now (primary navigation, secondary navigation, distinguished by the back button ), the user can go back to the original position through the navigation bar.
3. Unified
Within the same app, the position, height, and information of the navigation bar are relatively uniform to increase familiarity, which is also required for page consistency. iOS and Material Design require the height, information, and other content of the navigation bar. , so everyone is quite different in form (but the content is played out, which will be discussed below).
3. Types of Navigation Bar Functions
Divided by function type, the common navigation bars are: conventional navigation bar and editing operation bar.
1. General Navigation Bar
The conventional navigation bar is mainly to provide page and level guidance, and related operations. This is the type of navigation bar we see the most.
2. Edit the action bar
The edit action bar provides actions for the selected item. A regular navigation bar can be switched to an edit action bar that remains active until an action is performed or undone.
Fourth, the conventional navigation bar analysis
In the specification of Material Design, the navigation bar is composed of containers, navigation icons, titles, operation items, more menus, etc. On this basis, many domestic applications have carried out more personalized designs that meet product needs; However, in form, it is still similar to the specification to ensure user comprehension and smooth experience.
1) Container: that is, the scope of the navigation bar. All elements of the navigation bar should be in the container. The height of the navigation bar container varies depending on the scene.
The conventional navigation bar only needs to ensure the guidance, so it does not need to occupy too much height, especially for non-tool-type products, and the height space of the page is regarded as the existence of an inch of land.
MD provides a prominent top navbar scheme for the special case of navbars and clearly states that it can be used for longer headers, to accommodate images or to give a stronger look to the top app bar.
However, this scheme is not commonly used in China, because in the Chinese environment, there are relatively few scenes of such super-long titles. Even if there are, most of them can avoid this problem by reducing the number of words in the title.
The use of large title navigation bars on iOS is more common. The large title can be clearly distinguished from the content below. By default, the large title navigation bar does not contain a background background or shadow.