A comprehensive analysis of iphone web App navigation system design

Article Description: discussion on IPhone Web App navigation design.

I'm currently working on the iphone web App. Because the product form is novel, the technical environment is immature, the company gives the more relaxed research and development time. In the one-month interactive design phase, each link has been discussed several times, I learned a lot from it. The design of the navigation system is a more typical point, take out and share the discussion.

The challenges of the navigation system

The more common navigation of the iphone Native app is shown in the following illustration:

Mobile Screen Bottom: A, B, C, D four tab composition of the native app's global navigation, which we often see the tab navigation bar.

Top of mobile screen: There are four main forms. The ① form is to display the logo of the product at the center of the location, or you can adjust the logo appropriately and place the common operation or shortcut entry on the right side of the position. The ② form has two or three tab options at this location. The ③ form is to display the current task title in the middle of the location, and to place the navigation or functional controls on both sides of the page. The ④ form is to place the search box at that location.

Compared to the above native app navigation, Web app navigation is a huge difference, as the following illustration shows:

The Safari browser's toolbar will always occupy the bottom position of the screen, and global navigation can only be moved to the top of the screen. This is the most important factor that affects the Web App navigation design.

If the product function is less, and there is no special to highlight the features of the time, you can design the above figure in the ① navigation mode. The problem at this point is how to show the product brand, after all, in Safari browser login to a site than running a native app gives people a much weaker brand identity.

If the product logo is displayed, and the product needs to be the user's common function highlighting (such as refresh function or publishing portal), you need to design the above figure in the first ② navigation mode.

If you need to set the subcategory option under the A functional section, then one more Group of tab in the navigation bar. In this case, the navigation is like the first ③ in the image above.

Of course, when performing a task, global navigation can temporarily "retire", leaving only one row of the title bar and the left and right navigation controls or function controls. As shown in the ④ navigation method above.

In the product design, in order to facilitate the user in the functional plate between the quick and easy to switch, designers hope that the global navigation bar can maintain a long hover, do not like the General WAP page so that navigation with the Web scroll disappear. In this way, the browser-based Web App navigation system is comparable to the native app.

However, the browser toolbar pushed the global navigation to the top of the screen, but it caused the problem of too heavy a navigation head. As shown in the following illustration:

If the common features in the logo bar (such as refreshing or publishing portal) and global navigation are designed to suspend the form, the content area of the information display space than the native app to reduce the height of a row, as shown in the ①. Also, some pages require a level two navigation below the global navigation, and a 3-line navigation that hovers over the screen is much more valuable than the content display space, as shown in the ② above.

The experience is so bad that users have to swipe through the screen frequently in such a small space. This serious problem is very confusing to the designer, so we need to redesign the navigation system. The design process mainly includes: Excellent competition analysis, selection of the scheme.

[1] [2] [3] Next page