Mobile UX Patterns — Mobile UX Design Pattern Library
A reference for platform guidelines, navigation patterns, and design tokens that the ux-designer agent uses during mobile app UX design.
Target Agent
ux-designer — Applies this skill's UX patterns and guidelines directly to app design.
Platform Guideline Core Comparison
iOS (Human Interface Guidelines) vs Android (Material Design 3)
| Element |
iOS HIG |
Material Design 3 |
| Navigation |
Tab Bar (bottom) + Nav Bar (top) |
Bottom Navigation + Top App Bar |
| Button Style |
Rounded, system blue, minimal |
Filled, Outlined, Tonal, Text |
| Typography |
SF Pro (system) |
Roboto (system), customizable |
| Icons |
SF Symbols, line style |
Material Symbols, fill option |
| Modals |
Sheet (bottom), Alert |
Bottom Sheet, Dialog |
| Swipe |
Back navigation (edge swipe) |
Gesture navigation |
| Colors |
Dynamic Color (light/dark) |
Material You (dynamic color) |
| Touch Targets |
Minimum 44x44pt |
Minimum 48x48dp |
Navigation Patterns
Pattern Selection Guide
| Pattern |
Suited For |
Tab Count |
Example Apps |
| Tab Bar |
3-5 main sections |
3-5 |
Instagram, YouTube |
| Drawer |
6+ sections, includes settings |
Unlimited |
Gmail, Notion |
| Stack |
Hierarchical content |
- |
Settings, detail screens |
| Tab + Stack |
Deep navigation within sections |
3-5 |
Most apps |
| Bottom Sheet |
Temporary selection/filters |
- |
Maps, music players |
Navigation Depth Rules
- Maximum 3-4 depths (Home → Category → List → Detail)
- Must be able to return home from anywhere
- Back navigation always available (back button or edge swipe)
- Current location always identifiable (title, highlight)
Screen Type Layouts
List Screen
- Item height: minimum 48dp (iOS 44pt)
- Thumbnail: 40-56dp square/circle
- Title: 16-17sp, 1 line
- Subtitle: 14sp, 1-2 lines, secondary color
- Action: trailing area (icon or switch)
- Divider: 1dp, starting from text start point
Detail Screen
- Hero image: 100% screen width, 250-300dp height
- Collapsing Toolbar on scroll
- Title: 24-28sp Bold
- Body: 16sp, 1.5 line height
- FAB or bottom-fixed CTA
Form Screen
- Field spacing: 16-24dp
- Label: above field or floating
- Error message: below field, in red
- Keyboard: match field type (email, number, tel)
- Button: bottom-fixed, shown above keyboard
Empty State
- Center-aligned illustration/icon
- Title (what is empty)
- Description (what can be done)
- CTA button
Gesture Interaction Guide
| Gesture |
Purpose |
Notes |
| Tap |
Select, execute |
Always provide visual feedback (ripple/highlight) |
| Long Press |
Context menu, multi-select |
Needs hint (visual cue) |
| Swipe Left/Right |
Delete/archive, tab switch |
Watch for back navigation conflicts |
| Pull Down |
Refresh |
Use standard Pull-to-Refresh |
| Pinch |
Zoom in/out |
Only for images/maps |
| Drag |
Reorder, move |
Show handle icon |
Design Tokens
Spacing Scale (8dp base)
| Token |
Value |
Purpose |
| xs |
4dp |
Inline element spacing |
| sm |
8dp |
Card internal padding |
| md |
16dp |
Section spacing, screen margin |
| lg |
24dp |
Section separation |
| xl |
32dp |
Major section spacing |
| 2xl |
48dp |
Hero/header spacing |
Typography Scale
| Role |
Size |
Weight |
Line Height |
| Display |
34-57sp |
Bold |
1.12 |
| Headline |
24-32sp |
SemiBold |
1.25 |
| Title |
16-22sp |
Medium |
1.27 |
| Body |
14-16sp |
Regular |
1.5 |
| Label |
11-14sp |
Medium |
1.45 |
| Caption |
11-12sp |
Regular |
1.33 |
Color System (Material 3 Based)
| Role |
Purpose |
| Primary |
Main CTA, active elements |
| On Primary |
Text/icons on Primary |
| Primary Container |
Background emphasis |
| Secondary |
Secondary buttons, chips |
| Surface |
Card, sheet backgrounds |
| Error |
Error states |
| Outline |
Borders, inactive |
Accessibility Checklist
- Touch targets minimum 48x48dp (iOS 44x44pt)
- Color contrast 4.5:1 or above (text), 3:1 (large text)
- Do not convey information by color alone (use icons/text alongside)
- Screen reader labels (contentDescription/accessibilityLabel)
- Dynamic font size support (Dynamic Type/sp units)
- Reduced motion setting support (prefers-reduced-motion)
- Keyboard/external input support
- Logical focus order
Performance UX Patterns
| Situation |
Pattern |
Description |
| Loading |
Skeleton UI |
Show layout preview |
| Slow response |
Progress Indicator |
Show after 0.5 seconds |
| Offline |
Cache + Banner |
Show cached data + offline notice |
| Error |
Retry + Fallback |
Retry button + last known good data |
| Optimistic UI |
Optimistic Update |
Apply immediately, rollback on failure |
