Mobile App Design Patterns 2026: Complete Guide to Navigation, Game UI & Common Patterns

Design patterns are solutions that have been proven to work through millions of users and years of iteration. You don't need to reinvent the tab bar. You don't need to invent a new way to display a feed. The patterns exist — your job is to pick the right ones for your app.

This guide covers the design patterns that define mobile apps in 2026 — navigation architectures, game UI patterns, screen layouts, onboarding flows, and data display patterns. Each pattern includes what it is, when to use it, when not to use it, and real-world examples from top apps.

Note: This guide covers design patterns — structural approaches to layout, navigation, and information architecture. For UI interaction patterns (inputs, gestures, loading states, animations), see our Mobile UI Patterns guide.

Navigation Design Patterns

Navigation determines how users move through your app. The pattern you choose affects discoverability, usability, and the overall feel of the app.

Bottom Tab Navigation

What it is: A persistent bar at the bottom of the screen with 3-5 tabs, each representing a major section of the app.

Examples: Instagram (Home, Search, Reels, Shop, Profile), Spotify (Home, Search, Library), Twitter/X (Home, Search, Spaces, Notifications, Messages)

When to use:

• Your app has 3-5 equally important top-level sections
• Users need to switch between sections frequently
• You want all major sections to be one tap away
• iOS or cross-platform apps (this is the iOS convention)

When NOT to use:

• You have more than 5 top-level sections (the tabs get too small)
• Your app has one primary flow with few navigation needs
• Screen real estate is critical and you can't give up 50px at the bottom

Design guidelines:

• Maximum 5 tabs (Apple HIG and Material Design both enforce this)
• Use icons with labels — icon-only tabs reduce discoverability
• Highlight the active tab with color and/or filled icon
• The first tab should be the most-used section (usually "Home")
• Consider using a larger/colored center tab for the primary action (e.g., Uber's "Where to?" or TikTok's "+" button)

2026 variations:

• Floating bottom bar: Rounded bar that floats above the content with subtle shadow. Apps: Apple Music, Arc browser.
• Contextual tab bar: Tabs that change labels/icons based on context. Less common but growing.
• Hidden on scroll: Tab bar hides when scrolling down, reappears on scroll up. Saves screen space for content-heavy apps.

Hamburger / Drawer Navigation

What it is: A menu hidden behind a hamburger icon (☰), typically sliding in from the left. Contains navigation links to all app sections.

Examples: Gmail (drawer with account switcher, inbox folders, labels), Google Maps (drawer with saved places, contributions, timeline)

When to use:

• You have many navigation options (6+) that don't all need to be visible
• Your app has a single primary view with occasional navigation to other sections
• Android apps (this was the Android convention, though Google now recommends bottom navigation for primary sections)
• Settings-heavy or feature-rich apps

When NOT to use:

• Users need to switch between top-level sections frequently (too many taps)
• Your target audience skews less technical (hamburger menus have lower discoverability)
• You have 5 or fewer main sections (use bottom tabs instead)

Design guidelines:

• The drawer should cover 75-85% of the screen width
• Include a close button or allow tap-outside-to-close
• Group navigation items into logical sections
• Show the current section as highlighted/selected
• Consider a profile/account section at the top of the drawer

Tab Bar + Floating Action Button (FAB)

What it is: Bottom tab navigation combined with a prominent floating action button for the app's primary creation action.

Examples: Google Maps (tabs + FAB for directions), Gmail (tabs + FAB for compose), YouTube (tabs + "+" button for upload)

When to use:

• Your app has a clear primary action (create, compose, add, capture)
• The primary action should be accessible from any screen
• You're building an Android app (FABs are a Material Design convention)

When NOT to use:

• There's no single dominant action
• Your app is consumption-focused (reading, browsing) rather than creation-focused
• iOS apps where the FAB feels non-native (though many iOS apps use it anyway)

Design guidelines:

• FAB should be 56dp (standard) or 96dp (extended with text)
• Position at bottom-right (standard) or bottom-center (overlapping tab bar)
• Use a contrasting color — the FAB should be the most visually prominent element
• The FAB action should be the thing users do most often
• Hide FAB on screens where it's not relevant

Gesture-Based Navigation

What it is: Navigation driven by swipe gestures rather than visible buttons or tabs. Swipe left/right between sections, swipe up/down for additional content.

Examples: Tinder (swipe left/right for reject/like), Snapchat (swipe between Camera, Chat, Stories, Discover), Apple Books (swipe between pages)

When to use:

• Your app's primary interaction is naturally gestural (dating, stories, reading)
• You want a full-screen, immersive experience without visible navigation chrome
• Your user base is comfortable with gesture-based interfaces

When NOT to use:

• Users need to navigate to specific sections quickly (gestures require knowing the gesture map)
• Your app has deep navigation hierarchies
• Accessibility is critical (gestures can be challenging for users with motor impairments — always provide alternative navigation)

Design guidelines:

• Provide visual hints for gesture directions (dots, peek-through edges, onboarding tooltips)
• Always offer an alternative for users who can't or don't want to use gestures
• Keep the gesture map simple — max 4 directions
• Use haptic feedback to confirm gesture recognition

Hub-and-Spoke Model

What it is: A central home screen (hub) that links to self-contained features (spokes). Each spoke is a complete workflow. Users return to the hub between tasks.

Examples: Apple Watch home screen, Uber (hub: where to? → spokes: ride booking, food delivery, transit), banking apps (hub: account overview → spokes: transfer, pay bills, deposit)

When to use:

• Your app has distinct, independent features
• Users typically complete one task before starting another
• The tasks don't require cross-referencing between spokes
• Simple apps with 3-6 main features

When NOT to use:

• Users need to access information from multiple sections simultaneously
• The features are deeply interconnected
• Users switch between features frequently

Breadcrumb Navigation

What it is: A trail showing the user's current location in a hierarchical structure: Home > Category > Subcategory > Item.

Examples: E-commerce apps (Home > Electronics > Headphones > AirPods Pro), File managers, Settings hierarchies

When to use:

• Your app has deep hierarchies (3+ levels)
• Users need to understand their current position
• Users frequently need to jump back multiple levels

When NOT to use:

• Flat navigation (2 levels or fewer)
• Mobile-first apps with limited screen width (breadcrumbs take horizontal space)
• Apps where location context is obvious from the content

Game UI Design Patterns

Game UI follows different rules from productivity or social apps. The interface needs to inform without distracting, provide controls without blocking gameplay, and create engagement through visual feedback.

HUD (Heads-Up Display)

What it is: Persistent on-screen information overlaid on the game world — health bars, scores, mini-maps, ammunition counts.

Examples: Genshin Impact (health, stamina, mini-map, quest tracker), Call of Duty Mobile (crosshair, ammo, mini-map, health), Pokémon GO (nearby Pokémon, trainer level)

Key patterns:

• Corners pattern: Place info in screen corners to maximize the center for gameplay. Top-left: player stats. Top-right: score/currency. Bottom-left: controls. Bottom-right: actions.
• Minimal HUD: Show only essential info by default, expand on interaction. Used in immersive/exploration games.
• Contextual HUD: Elements appear only when relevant (health bar appears only when taking damage, ammo count appears only when equipped).

Design guidelines:

• Keep the center of the screen clear for gameplay
• Use semi-transparent backgrounds to maintain visibility without blocking the game world
• Critical information (health) should be highly visible; secondary info can be smaller
• Safe area awareness — don't put HUD elements under notches or gesture bars

Menu Systems

What it is: The structured screens outside of gameplay — main menu, pause menu, settings, inventory, character screens.

Examples: Clash Royale (card collection, battle deck), Genshin Impact (character management, inventory, map), Candy Crush (level selection map)

Key patterns:

• Main menu: Logo/title + New Game + Continue + Settings. Simple, clear, memorable background.
• Pause menu: Resume + Settings + Exit. Must be accessible in one tap. Dark overlay to indicate game is paused.
• Settings menu: Graphics, audio, controls, accessibility. Sliders for levels, toggles for on/off, dropdowns for quality presets.
• Inventory/collection: Grid or list of items with filtering, sorting, and detail views. Each item shows icon, name, rarity, stats.

Progress and Level Indicators

What it is: Visual representations of player advancement — XP bars, level numbers, rank badges, skill trees.

Key patterns:

• Linear progress bar: Simple horizontal bar showing XP progress to next level. Used in: most RPGs, fitness gamification.
• Circular progress ring: Compact, works well in profile views and HUDs. Used in: Apple Fitness, casual games.
• Level map: Connected nodes showing level progression. Used in: Candy Crush (node map), Duolingo (skill tree).
• Rank/tier badges: Visual icons representing player rank (Bronze, Silver, Gold, Diamond). Used in: competitive games, loyalty programs.

In-Game Currency and Shop

What it is: The storefront where players spend in-game or real currency on items, upgrades, or cosmetics.

Key patterns:

• Featured banner: Large promotional cards for limited-time offers at the top
• Category tabs: Skins, Weapons, Currency Packs, Battle Pass
• Item grid: 2-3 columns showing item image, name, price, rarity indicator
• Currency display: Always-visible balance showing coins/gems at top-right
• Pricing tiers: "Best Value" badges on certain options to guide purchasing

Achievement and Reward Screens

What it is: Screens celebrating player accomplishments — unlocked achievements, post-level rewards, daily login bonuses.

Key patterns:

• Reward chest/card reveal: Animated opening sequence building anticipation
• Star rating: 1-3 stars based on performance (Angry Birds, Cut the Rope)
• Achievement gallery: Grid of locked/unlocked achievements with progress bars
• Daily rewards calendar: Sequential days with increasing reward value

Common Screen Layout Patterns

Feed / Timeline Layout

What it is: A vertically scrolling stream of content items (posts, articles, updates).

Examples: Instagram, Twitter/X, LinkedIn, TikTok (full-screen variant)

When to use: Social content, news, activity streams, notification lists.

Variations:

• Card feed: Each item in a distinct card container (Instagram, Facebook)
• Compact feed: Minimal separators, higher density (Twitter, Reddit)
• Full-screen feed: Each item takes the full screen, swipe to next (TikTok, Instagram Reels)
• Grouped feed: Items grouped by date, category, or topic (notification centers)

Grid / Masonry Layout

What it is: Content arranged in a multi-column grid. Regular grids have uniform item sizes; masonry grids have varying heights.

Examples: Pinterest (masonry), Instagram profile grid (regular), Google Photos (mixed)

When to use: Image-heavy content, product catalogs, portfolios, galleries.

Variations:

• Regular grid: Uniform cells, typically 2-3 columns. Clean and predictable.
• Masonry grid: Variable height cells fitting together. Pinterest-style. Better for mixed aspect ratio images.
• Staggered grid: Similar to masonry but with more structured sizing rules.

Card-Based Layout

What it is: Content organized in distinct card containers with padding, borders, and/or shadows.

Examples: Material Design apps, Trello, Apple News, App Store

When to use: Mixed content types, dashboard widgets, content that needs clear boundaries.

Design guidelines:

• Consistent card padding (12-16px)
• Subtle shadow or border to define card boundaries
• Cards should be tappable as a single target
• Don't put too many interactive elements inside one card

Master-Detail Pattern

What it is: A list of items (master) where selecting one shows its full content (detail). On tablets, both views are visible simultaneously.

Examples: Email apps (inbox list → email detail), Settings (section list → setting details), Contact apps

When to use: Browsing a collection where detail views are important. Ideal for content like emails, messages, contacts, articles.

Phone behavior: Master view is the first screen. Tapping an item navigates to the detail screen with a back button.

Tablet/iPad behavior: Master list is a sidebar (30-40% width). Detail view fills the remaining space. No navigation transition needed.

Infinite Scroll vs Pagination

Infinite scroll: New content loads automatically as the user scrolls to the bottom.

• Best for: Social feeds, discovery content, browsing experiences
• Drawback: No sense of progress, difficult to find previously seen items, footer is unreachable

Pagination: Content divided into discrete pages with explicit navigation.

• Best for: Search results, e-commerce catalogs, content with natural boundaries
• Drawback: Requires explicit action to see more, interrupts browsing flow

2026 trend: Virtual scrolling — render only visible items regardless of list length. Enables infinite scroll with better performance.

Onboarding & First-Run Patterns

Progressive Disclosure

What it is: Show features gradually as the user needs them, rather than explaining everything upfront.

Examples: Notion (shows basic features first, introduces advanced features as user creates content), Figma (introduces tools as user selects them)

When to use: Complex apps with many features. Reduces cognitive overload for new users. The best onboarding doesn't feel like onboarding.

Feature Tours

What it is: Highlighted tooltips or overlays pointing to specific UI elements, explaining what they do.

Examples: New app version releases often use this pattern to highlight new features.

Design guidelines:

• Maximum 5 steps (users abandon longer tours)
• Allow skipping at any step
• Highlight only non-obvious features
• Use a visible progress indicator (step 2 of 4)

Permission Requests

What it is: Screens explaining why the app needs access to camera, location, notifications, etc.

Design guidelines:

• Ask for permissions in context (camera permission when user taps "Take Photo," not at launch)
• Show a custom pre-permission screen explaining the benefit before the system dialog
• Always allow proceeding without granting permission
• Don't ask for all permissions on first launch — space them out

Account Setup Flows

What it is: Multi-step forms collecting user information during registration.

Design guidelines:

• Minimize required fields (only ask for what you truly need)
• Show progress (step 2 of 3)
• Allow going back to previous steps
• Save progress so users can resume if interrupted
• Offer social login to bypass form entirely

Empty State → Populated State

What it is: The transition from a blank app (new user, no data) to a useful app (content, data, history).

Examples: The app starts with an empty task list showing a friendly illustration and "Create your first task" CTA. As tasks are added, the list populates naturally.

Design guidelines:

• Empty states should be friendly, not bare (add illustrations, encouraging copy)
• Include a clear CTA for the first action
• The transition from empty to populated should feel natural
• Consider sample/demo data to show what the populated state looks like

Data Display Patterns

Dashboard Layouts

What it is: Overview screens showing key metrics, charts, and summary information.

Key patterns:

• Metric cards at top: 3-4 summary numbers (Revenue, Users, Orders, Conversion) with trend indicators
• Primary chart below: The most important trend, typically taking 40-50% of the screen
• Secondary information: Tables, lists, or smaller charts below the primary chart
• Time period selector: Toggle between day, week, month, year views

Chart and Visualization Patterns

Search and Filter Patterns

Persistent search bar: Always visible at the top. Used when search is a primary action (Google, Spotify).

Expandable search: Tap an icon to expand the search bar. Used when search is secondary (Instagram, Settings).

Filter chips: Horizontally scrollable tags for common filters. Quick, visible, easy to combine.

Filter panel: Full-screen or half-screen panel with advanced filter options. For complex filtering with many criteria.

Using AI to Implement Design Patterns

AI UI generators like GenDesigns work best when you reference specific design patterns by name in your prompts.

How to prompt for specific patterns

Navigation patterns:

"iOS app with bottom tab navigation — 5 tabs: Home, Search, Create (center, larger), Notifications, Profile. Active tab uses filled icon with brand color."

Feed patterns:

"Card-based feed layout like Instagram. Each card has a user avatar, username, post image, like/comment/share buttons, caption, and timestamp. Pull-to-refresh at top."

Dashboard patterns:

"Dashboard with 4 metric cards at top (showing numbers with trend arrows), a primary line chart taking 50% of the screen, and a 5-row data table below. Time period selector: 7D, 30D, 90D, 1Y."

Game UI patterns:

"Mobile game HUD with health bar (top-left), score counter (top-right), mini-map (bottom-left), and action buttons (bottom-right). Semi-transparent background on all HUD elements. Center screen is clear for gameplay."

GenDesigns examples

GenDesigns understands pattern references. Try these prompts:

• "Hub-and-spoke home screen for a banking app with 6 feature cards"
• "Master-detail layout for an email client"
• "Onboarding flow with progressive disclosure for a fitness app"
• "E-commerce product grid with filter chips and sort options"

Try it: Generate screens with specific design patterns

Pattern Selection Guide

Which navigation pattern should I use?

Pattern → Best for → Avoid when

Ready to Implement These Patterns?

Knowing which pattern to use is half the battle. Implementing it quickly is the other half. AI UI generators let you reference patterns by name and see them applied to your specific app concept.

Generate screens with any design pattern for free — describe the pattern you want and see it designed for your app.

Related reading:

• Mobile UI Patterns (2026) — Companion guide covering interaction patterns
• App Onboarding Design Examples
• Mobile App Design Checklist
• AI UI Generator: Complete Guide