Talk about drawer-style navigation

Web-side design is often about how to display the action to the user, while the mobile design is more about how to hide the operation subtly. This kind of concealment is actually a kind of prominent to http://www.aliyun.com/zixun/aggregation/17626.html "> Core function."

Navigation is always the highlight of the product design, whether it's on the web side or in the mobile design. I wrote a "iOS navigation model for mobile product design" When I read "Touching the Heart" the navigation mode is basically based on the iOS system itself, some of the models, with the continuous emergence of new iOS products, and newer navigation methods are updated, here to say "drawer-style" navigation.

Of course, the drawer-style navigation is my own way to give this kind of navigation name, as for the study name, I do not 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. Pulled a shrink, from the image and drawer similar, so I call him.

According to my incomplete textual research, this type of navigation 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 instead of the nine-Sudoku navigation as the user enters the app, it's clear that 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 UGC operation is also essential, So path also used a drawer in the lower left corner; in Sparrow, users look at new messages more often than they do to view archived messages, so operations like message types are hidden in the drawer, and in order to balance the need for e-mail, a single entry is left in the lower-right corner; At the home of the Express Hotel tube, The user's core operation is to find a nearby fast hotel through the map, so the drawer hides the other operations such as switching cities ...

In March, I said on Weibo, 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.

Apps that don't fit in a drawer-style navigation

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.

Source: http://www.ikent.me/blog/4138