The drawer style navigation allows users to focus on the core functionality


[editor’s note] this article is reprinted from @kentzhu’s personal blog. Navigation is the highlight of the product design, Web side design is considered how to display the operation to the user, and the design of Mobile more time is to consider how to skillfully hide the operation. But this kind of concealment is actually for the core function prominent.

iOS navigation mode is basically based on some of the iOS system itself, and with the emergence of new iOS products, new navigation methods will also be updated. Here, say "drawer style" navigation.

of course, the drawer type navigation is the author’s own name for this navigation method, as for the scientific name, the Xiaobian do not know. This navigation pattern generally uses the method of hiding the navigation body on the side of the app, calling out navigation with a button, and hiding it with the same button after using it. Pull a shrink, similar to the drawer from the image, so call him.

according to incomplete textual research, this method of navigation begins with Facebook. In the earliest Facebook App, has been adopted more conservative Jiugongge navigation systems, with the development of FB, this heavy navigation way will lead the user to the display of the Timeline is largely weakened, although FB also tried directly into the Timeline when the user enters the App and not the Jiugongge navigation.

but obviously this optimization is not good enough. Then, in November 2011, FB released a new iOS and Android client, change one of the important changes is the navigation mode, launched a new drawer navigation, it also strengthens the Timeline display.

FB introduced this new navigation mode, and soon, Gmail’s iOS version also used this navigation mode, and then path 2 version also adopted this kind of drawer navigation, and evolved to the extreme. At this point, this kind of drawer style navigation quickly red out and iOS product design.



general control drawer appears in the upper left corner of the App, in the form of a button, click the button after the drawer is opened, the button is pulled to the upper right corner of the App, the left open area (the drawer) after the show navigation content.

The content of

navigation can be a regular 2 level navigation displayed in a list, or you can put in some very useful shortcuts, such as FB’s search. The detailed form is as follows: figure


of course, there are some variations in this drawer, too. Path and Sparrow are more

0 thoughts on “The drawer style navigation allows users to focus on the core functionality”

Leave a Reply

Your email address will not be published. Required fields are marked *