1---2name: mobile-ux-patterns3description: Mobile UX design pattern library. Provides iOS HIG/Material Design 3 guidelines, navigation patterns, gesture interactions, responsive layouts, and accessibility checklists as a ux-designer extension skill. Use for requests like 'mobile UX', 'iOS guidelines', 'Material Design', 'navigation patterns', 'gestures', 'design tokens', 'mobile accessibility', and other mobile UI/UX design tasks. However, actual design file creation or code implementation is outside this skill's scope.4---56# Mobile UX Patterns — Mobile UX Design Pattern Library78A reference for platform guidelines, navigation patterns, and design tokens that the ux-designer agent uses during mobile app UX design.910## Target Agent1112`ux-designer` — Applies this skill's UX patterns and guidelines directly to app design.1314## Platform Guideline Core Comparison1516### iOS (Human Interface Guidelines) vs Android (Material Design 3)1718| Element | iOS HIG | Material Design 3 |19|---------|---------|-------------------|20| **Navigation** | Tab Bar (bottom) + Nav Bar (top) | Bottom Navigation + Top App Bar |21| **Button Style** | Rounded, system blue, minimal | Filled, Outlined, Tonal, Text |22| **Typography** | SF Pro (system) | Roboto (system), customizable |23| **Icons** | SF Symbols, line style | Material Symbols, fill option |24| **Modals** | Sheet (bottom), Alert | Bottom Sheet, Dialog |25| **Swipe** | Back navigation (edge swipe) | Gesture navigation |26| **Colors** | Dynamic Color (light/dark) | Material You (dynamic color) |27| **Touch Targets** | Minimum 44x44pt | Minimum 48x48dp |2829## Navigation Patterns3031### Pattern Selection Guide3233| Pattern | Suited For | Tab Count | Example Apps |34|---------|-----------|-----------|-------------|35| **Tab Bar** | 3-5 main sections | 3-5 | Instagram, YouTube |36| **Drawer** | 6+ sections, includes settings | Unlimited | Gmail, Notion |37| **Stack** | Hierarchical content | - | Settings, detail screens |38| **Tab + Stack** | Deep navigation within sections | 3-5 | Most apps |39| **Bottom Sheet** | Temporary selection/filters | - | Maps, music players |4041### Navigation Depth Rules42- Maximum 3-4 depths (Home → Category → List → Detail)43- Must be able to return home from anywhere44- Back navigation always available (back button or edge swipe)45- Current location always identifiable (title, highlight)4647## Screen Type Layouts4849### List Screen50- Item height: minimum 48dp (iOS 44pt)51- Thumbnail: 40-56dp square/circle52- Title: 16-17sp, 1 line53- Subtitle: 14sp, 1-2 lines, secondary color54- Action: trailing area (icon or switch)55- Divider: 1dp, starting from text start point5657### Detail Screen58- Hero image: 100% screen width, 250-300dp height59- Collapsing Toolbar on scroll60- Title: 24-28sp Bold61- Body: 16sp, 1.5 line height62- FAB or bottom-fixed CTA6364### Form Screen65- Field spacing: 16-24dp66- Label: above field or floating67- Error message: below field, in red68- Keyboard: match field type (email, number, tel)69- Button: bottom-fixed, shown above keyboard7071### Empty State72- Center-aligned illustration/icon73- Title (what is empty)74- Description (what can be done)75- CTA button7677## Gesture Interaction Guide7879| Gesture | Purpose | Notes |80|---------|---------|-------|81| **Tap** | Select, execute | Always provide visual feedback (ripple/highlight) |82| **Long Press** | Context menu, multi-select | Needs hint (visual cue) |83| **Swipe Left/Right** | Delete/archive, tab switch | Watch for back navigation conflicts |84| **Pull Down** | Refresh | Use standard Pull-to-Refresh |85| **Pinch** | Zoom in/out | Only for images/maps |86| **Drag** | Reorder, move | Show handle icon |8788## Design Tokens8990### Spacing Scale (8dp base)91| Token | Value | Purpose |92|-------|-------|---------|93| xs | 4dp | Inline element spacing |94| sm | 8dp | Card internal padding |95| md | 16dp | Section spacing, screen margin |96| lg | 24dp | Section separation |97| xl | 32dp | Major section spacing |98| 2xl | 48dp | Hero/header spacing |99100### Typography Scale101| Role | Size | Weight | Line Height |102|------|------|--------|-------------|103| Display | 34-57sp | Bold | 1.12 |104| Headline | 24-32sp | SemiBold | 1.25 |105| Title | 16-22sp | Medium | 1.27 |106| Body | 14-16sp | Regular | 1.5 |107| Label | 11-14sp | Medium | 1.45 |108| Caption | 11-12sp | Regular | 1.33 |109110### Color System (Material 3 Based)111| Role | Purpose |112|------|---------|113| Primary | Main CTA, active elements |114| On Primary | Text/icons on Primary |115| Primary Container | Background emphasis |116| Secondary | Secondary buttons, chips |117| Surface | Card, sheet backgrounds |118| Error | Error states |119| Outline | Borders, inactive |120121## Accessibility Checklist122123- [ ] Touch targets minimum 48x48dp (iOS 44x44pt)124- [ ] Color contrast 4.5:1 or above (text), 3:1 (large text)125- [ ] Do not convey information by color alone (use icons/text alongside)126- [ ] Screen reader labels (contentDescription/accessibilityLabel)127- [ ] Dynamic font size support (Dynamic Type/sp units)128- [ ] Reduced motion setting support (prefers-reduced-motion)129- [ ] Keyboard/external input support130- [ ] Logical focus order131132## Performance UX Patterns133134| Situation | Pattern | Description |135|-----------|---------|-------------|136| Loading | Skeleton UI | Show layout preview |137| Slow response | Progress Indicator | Show after 0.5 seconds |138| Offline | Cache + Banner | Show cached data + offline notice |139| Error | Retry + Fallback | Retry button + last known good data |140| Optimistic UI | Optimistic Update | Apply immediately, rollback on failure |
revfactory