Mobile Navigation Design: Types, Patterns, and Design Guidelines
This article explains the classification of mobile navigation into global, instant, and hybrid types, describes six basic navigation patterns and two emerging hybrid patterns, and provides design guidelines and real‑world examples for selecting and combining navigation modes in mobile apps.
According to the device type, navigation is divided into Web navigation and Mobile navigation. The previous article introduced Web navigation; this article focuses on mobile navigation design, covering its types and key design points.
In mobile UI design, navigation is a crucial module. Different navigation types are assembled in various ways to meet business and user needs.
Based on basic navigation modes, mobile designs are generally classified into six foundational patterns: desktop‑style, tab‑style, list‑style, side‑drawer, dropdown, and dot‑aggregation. New hybrid patterns such as helm (舵式) and carousel (轮播式) have also emerged, and designers continuously upgrade and combine these patterns.
According to operation style, mobile navigation can be roughly divided into three types: global, instant, and hybrid.
1. Grid (宫格式) – usually occupies most of the screen area.
2. Tab (标签式) – the standard tab navigation used on iOS and Android, with newer innovations.
3. List (列表式) – presents more text and state changes.
4. Drawer (抽屉式) – tap the avatar at the top left to slide in the functional entry.
5. Menu (菜单式) – tap the add button to pop up a dropdown menu of options.
6. Dot‑aggregation (点聚式) – tap an entry, and surrounding items expand to reveal functional options.
Hybrid Patterns
1. Helm (舵式) – combines global bottom‑tab navigation with instant dot‑aggregation navigation.
2. Carousel (轮播式) – combines global desktop‑style navigation with instant drawer navigation.
Designers can freely combine these patterns to meet specific business requirements and user experience goals. Typically, one navigation pattern serves as the primary framework, while others act as auxiliary.
1. Navigation Hierarchy Within a Navigation Example: Weibo uses a hybrid helm navigation as the primary level and a hybrid carousel navigation as the secondary level.
2. Hierarchy Between Navigations Examples: Ele.me uses tab navigation as the primary level and carousel navigation as the secondary level; Xianyu uses helm navigation as primary and desktop navigation as secondary.
In summary, navigation designs can be mixed and matched according to business scenarios, with a main navigation providing the overall framework and secondary navigations offering supplemental functionality.
~ Thank you for reading ~
政采云技术
ZCY Technology Team (Zero), based in Hangzhou, is a growth-oriented team passionate about technology and craftsmanship. With around 500 members, we are building comprehensive engineering, project management, and talent development systems. We are committed to innovation and creating a cloud service ecosystem for government and enterprise procurement. We look forward to your joining us.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.