Getting started: A variety of navigation in the mobile app

Even in the prototype design of mobile application interface, the form of navigation can be varied. Despite their small size and the need for a compact array of data, they seem to be tightly constrained, but they still have a variety of options.

People once considered only one form-the popular and widely used vertical navigation, the sidebar. Still, there are other forms that can improve the user experience, making it a piece of cake for users to browse your app.

List-Type menu

Let's start with a standard list-based navigation, which is widely used by mobile app authors. This workaround suggests a link-by-page approach that allows the user to follow the normal process from top to bottom.

Sergey Valiukh's GIF animation design is just a concept design, but perfectly reflects the practicality of the list-based navigation. Combining a variety of colors and fine line icons, as well as a slightly heavier font, allows users to easily browse the app without feeling the discomfort caused by screen limitations.

Fueled's Elevatr is a stylish app that helps entrepreneurs manage and follow up on business meetings. The main screen is characterized by a rainbow-colored menu that clearly lines up each item of the control Panel. The background map is inspired by the coordinate paper and is perfectly matched to this menu.

Kutan URAL's Habitclock app is a simple and visually appealing app that helps you manage your morning alarms. While the focus on the screen is on the top and bottom of the Control Panel, list-based navigation (also a great notification tool) is the core of attention.

The horizontal bar layout is used to show a series of links on a simple side-by-side menu, a popular choice for most designers and the main component of the iOS version Instagrab Davis Yeung. Each item is usually equipped with a small, easy-to-understand icon that distinguishes each link well.

Matrix or grid-type menu

Having a full-screen grid navigation helps to emphasize navigation, making it easy to understand and clear. This works well when you need to show a lot of links, a series of identical grids that effectively differentiate each item from others.

Michal Galubinskiand Thoke Design Vectra, has the navigation which cannot neglect. Not only did the designer extend the menu's 6 items to full screen, but also took advantage of the huge flat-style icons, which were clearly considered for most online users.

Marco La Mantia & Simone Lippolis's mobile app design, Arrivo, cleverly organizes large amounts of data in a rigid, square grid. Each lattice plays a functional role, because it is not just a display of data, it also allows you to adjust it through a small control panel that slides out of the bottom. Color selection is also very sensible, because a warm background tint helps to efficiently distribute content and differentiate grids.

Abracadabra, this app is definitely in accordance with the Sergey Valiukh heart of the retro style to design, so that the app has a clear sense of the age. Here, the designer is able to divide the screen into 6 equal grids, which is very easy to navigate. Flat style icons combine heavy, informal fonts to help improve ease of use.

The hand-drawn wind runs through every interface of the Willis design T R A V e r S E. The app is based on bright monochrome backgrounds and line icons, so the main menu doesn't see any dividers, but it's organized so that users can easily navigate through the app.

Bottom Menu

The bottom menu is primarily used as a navigation aid to differentiate between functional blocks or standalone components within.

Jakub Antalík's Badoo concept design has a navigation at the bottom of the screen. It also contains a set of extended menus, each with its own control panel.

Virgil pana design of dynamic sliding labels, heavy information display applications to provide a perfect solution, can contain a large number of statistical data, or through the chart to show the data, and remain concise. A regular-sized menu slides out from the bottom of the screen, showing a small control center.

Top Menu

Now that we're used to browsing the phone screen from top to bottom, there's a natural advantage on top of the screen. Tabs and icons unique to each control center are the most important representations of this layout.

Cüneyt? En's Horner contains a hidden menu, but it can be very good to be seen from the top. Because of the bright color and the large icon of relevance, it contrasts sharply with the entire interface content.

Enes Dan?? The Discovery Channel is designed to put all basic navigation and level two navigation on top, with fixed positions to dispel user confusion.

Hamzaque Designs is an air flow computing app designed for Bettertec, cleverly using the tabs that occupy the top. In addition, they are designed to be in black and white contrasting tones, and the rest of the screen is the same.

MING Labs&pierrick Calvez's Shario APP reveals a concise vector-style concept. The entire navigation runs through several buttons at the top.

Expanded Menu

The expanded menu is truly a treasure for designers who work on large-volume apps and who like to create simple, compact interfaces. This scheme allows you to place the menu icon anywhere, but it is usually in the upper-left corner.

Al Powerd's Museek is a music app that needs to provide users with a lot of visual information: album art, Description, song name, track list, and so on, so there's no room to place a full-screen menu. In this example, the small icon in the upper left corner is a lifeline, smoothing out a fairly large list of menus.

Mohammed ALYOUSFI &àlex Casabò 's Univit UI design, an elegant, flat-style app that uses a standard slide-out menu that is triggered by a simple swipe operation. The menu features easy-to-understand and sleek contour icons that are much larger than their respective titles. This approach allows menus to work naturally in the design, while also providing a better user experience.

Alexandre Efimov's Svoy app is designed to work with a dark background based on a gorgeous color scheme. The designer lets the menu unfold from the left. The eye-catching and lifelike folding animations also add some spice to the design.

Attila Szabó 's id?kép is also a variant of the expanded menu, which uses the dreamy "pull-curtain" effect that almost fills the screen to show the menu itself.

Conclusion

Each scenario has its own strengths and weaknesses, which is why each project advocates its unique navigational type, can effectively respond to tasks, and is helpful to the user experience.

Transferred from: http://select.yeeyan.org/view/418335/408007

• Original source: designmodo.com
• Original title: Primer on Types of Navigation in Mobile Apps
• Original address: Http://designmodo.com/mobile-app-navigations