Drawer-style navigation allows users to focus on core functions

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

"Editor's note" This article is reproduced from @kentzhu's personal blog. Navigation is a big play in product design, when web-side design is about how to show the operation to the user, and the mobile design is more about how to hide the operation subtly. But this kind of concealment is actually for the core function prominent.

iOS navigation mode is based on some of the iOS system's own models, with the advent of new iOS new products, and newer navigation methods are updated. Here, say "drawer-style" navigation.

Of course, the drawer-style navigation is the author himself to this kind of navigation by name, as to what the study name, small series also don't know. This navigation mode generally uses the navigation body hidden in the app side of the way, with a button to exhale the navigation, after the use of the same button to hide. Pull a shrink, from the image and drawer similar, so called him.

Based on incomplete textual research, this approach begins with Facebook. In the first Facebook app, the more conservative nine-sudoku navigation has been used, with the development of FB, this heavy navigation will lead to the user timeline display is largely weakened, Although FB has also tried to go directly into the timeline when the user enters the app instead of the nine Sudoku navigation.

But obviously this optimization is not good enough. So, in November 2011, FB released new iOS and Android clients, one of the important changes is the change in navigation mode, the introduction of new drawer-style navigation, while strengthening the display of timeline.

FB introduced this new navigation model, and soon Gmail version of iOS also used this navigation mode, and then the Path 2.0 version of the use of this type of drawer navigation and the evolution to the extreme. So far, this kind of drawer-style navigation pattern quickly flees red with iOS product design.

Simple definition

The general control drawer handles appear in the app's upper left corner, appears as the button form, clicks the button after the drawer is pulled, the button is pulled to the app's upper right corner, the left area is opened (the drawer) after displays the navigation content.

Navigation can be displayed as a list of conventional level 2 navigation, but also can be some of the most frequently used shortcuts directly into the portal, such as FB search. The concrete form is as follows

Of course, this kind of drawer also has some variants, currently with path and sparrow more prominent. Path will not only dominate the navigation as a drawer, while the bottom of the Operation button is a variant of the drawer, while the sparrow has increased the level of the drawer, after the first level of the drawer is opened can continue to open a layer of drawers. In addition, the Miche hotel booking process into a drawer, is also a very good form.

In addition, for some applications need to use message reminders, the appearance of the drawer will bring new trouble to the display of the message, so many of the drawer navigation will display the message in the title area, in the form of an entrance. Typical of a Facebook, fast hotel housekeeper.

The core idea of drawer navigation

The core idea of the drawer-type navigation is "hiding". Hidden Non-core operations and functions, so that users more focused on the core functions of the operation up. Personally, the hidden thinking is the most important idea in the design of mobile products. Last week in the Geek Park to share the idea of how to reduce, hide, add to do mobile product design topic, and this idea is the most core is hidden.

Facebook, the user's core operation is reading Timline, so the drawer hides all other operations; In the path, the user's core operation is to see the friend's timeline, so the drawer hides the other operation, simultaneously the UGC operation is also essential, therefore the path in the lower left corner uses a drawer; in Sparrow, users see new messages more often than they do to view archived messages, So the drawer hides the message type and so on, at the same time in order to balance the need to send mail, in the lower right corner of a separate entry; In the Fast Hotel tube home, the user's core operation is through the map to find the nearby fast hotel, so the drawer hides the switch city and so on other operation ...

This way of navigation will gradually become popular, the basis of speculation is that with the evolution of mobile product design, more and more product designers began to realize that only to make the core more prominent to improve the overall product experience, only to continuously reduce the user's interference to continuously improve the user's use efficiency.

Instead of a drawer-style navigation app, there are

Apps that require users to constantly switch between navigation, apps that don't need too much navigation, or core features are a bunch of portal apps.

Original link: Talk about drawer type navigation

(Warlial for Lei Feng's network, reproduced please note from the Lei Feng Network and the author, and link back to this page)