Mobile UI/UX Patterns

Key Mobile UI/UX Principles:

1. Simplicity
   - Keep interfaces clean and uncluttered
   - Focus on essential features
   - Use whitespace effectively

2. Consistency
   - Follow platform guidelines (iOS HIG, Material Design)
   - Maintain consistent navigation patterns
   - Use familiar UI components

3. Feedback
   - Provide immediate visual feedback
   - Show loading states
   - Confirm user actions

4. Accessibility
   - Support screen readers
   - Provide sufficient color contrast
   - Enable text scaling

5. Touch Targets
   - Minimum 44x44 points (iOS) or 48x48 dp (Android)
   - Adequate spacing between interactive elements
   - Consider thumb zones

Common Navigation Patterns:

1. Tab Bar (Bottom Navigation)
   - 3-5 top-level destinations
   - Always visible
   - Quick switching between sections
   Example: Instagram, Twitter

2. Hamburger Menu (Drawer)
   - Hidden navigation
   - More than 5 destinations
   - Less frequently accessed items
   Example: Gmail, Spotify

3. Stack Navigation
   - Hierarchical flow
   - Back button to previous screen
   - Linear user journey
   Example: Settings, E-commerce checkout

4. Modal/Sheet
   - Temporary task or decision
   - Requires user action
   - Dismissible
   Example: Filters, Share sheet

5. Gesture-Based
   - Swipe to go back
   - Pull to refresh
   - Swipe between tabs
   Example: iOS apps, Tinder

iOS Design System (Human Interface Guidelines):

Components:
- Navigation Bar: Top navigation with title
- Tab Bar: Bottom navigation (max 5 tabs)
- Buttons: Filled, Tinted, Plain
- Lists: Grouped, Inset Grouped, Plain
- Cards: Rounded corners, subtle shadows
- Alerts: System-style dialogs
- Action Sheets: Bottom sheet with actions

Typography:
- San Francisco (SF Pro)
- Dynamic Type support
- Text styles: Large Title, Title, Headline, Body, Caption

Colors:
- System colors (adapt to light/dark mode)
- Semantic colors (label, background, separator)
- Accent color (tint color)

Spacing:
- 8pt grid system
- Standard margins: 16pt, 20pt
- Safe area insets

Android Design System (Material Design):

Components:
- App Bar: Top navigation
- Bottom Navigation: 3-5 destinations
- FAB: Floating Action Button
- Cards: Elevated surfaces
- Chips: Compact elements
- Snackbar: Brief messages
- Bottom Sheet: Modal or persistent

Typography:
- Roboto font family
- Type scale: H1-H6, Body1, Body2, Caption
- Line height and letter spacing

Colors:
- Primary, Secondary, Surface colors
- On-colors for text/icons
- Color variants (light, dark)
- Theme support

Spacing:
- 4dp/8dp grid system
- Standard padding: 8dp, 16dp, 24dp
- Elevation levels (0dp - 24dp)

Responsive Design Best Practices:

1. Flexible Layouts
   - Use relative sizing (%, flex, constraints)
   - Avoid fixed pixel values
   - Support both portrait and landscape

2. Breakpoints
   - Phone: < 600dp/pt
   - Tablet: 600-900dp/pt
   - Large tablet: > 900dp/pt

3. Adaptive Layouts
   - Single column on phones
   - Multi-column on tablets
   - Master-detail on large screens

4. Safe Areas
   - Respect notches and rounded corners
   - Account for status bar
   - Consider keyboard overlap

5. Density Independence
   - Use dp (Android) or pt (iOS)
   - Provide multiple image resolutions
   - @1x, @2x, @3x (iOS)
   - mdpi, hdpi, xhdpi, xxhdpi (Android)

6. Orientation Changes
   - Save and restore state
   - Adjust layout for landscape
   - Consider horizontal scrolling

Mobile Interaction Patterns:

1. Gestures
   - Tap: Primary action
   - Long press: Secondary actions/context menu
   - Swipe: Navigate, delete, reveal actions
   - Pinch: Zoom in/out
   - Pull: Refresh content
   - Drag: Reorder items

2. Animations
   - Transitions: 200-400ms
   - Easing: Natural motion curves
   - Loading: Skeleton screens, spinners
   - Feedback: Button press, success/error

3. Microinteractions
   - Like button animation
   - Pull-to-refresh indicator
   - Swipe-to-delete confirmation
   - Toggle switches
   - Progress indicators

4. Touch Feedback
   - Visual: Highlight, ripple effect
   - Haptic: Vibration feedback
   - Audio: Click sounds (optional)

5. State Changes
   - Loading states
   - Empty states
   - Error states
   - Success states

Accessibility Guidelines:

1. Screen Reader Support
   - Provide meaningful labels
   - Describe images with alt text
   - Announce state changes
   - Logical reading order

2. Visual Accessibility
   - Color contrast ratio: 4.5:1 (normal text)
   - Don't rely on color alone
   - Support dynamic text sizing
   - Avoid flashing content

3. Motor Accessibility
   - Large touch targets (44x44pt minimum)
   - Adequate spacing between elements
   - Support voice control
   - Avoid time-based interactions

4. Cognitive Accessibility
   - Clear, simple language
   - Consistent navigation
   - Provide context and help
   - Allow undo actions

5. Platform Features
   iOS:
   - VoiceOver
   - Dynamic Type
   - Reduce Motion
   - Voice Control
   
   Android:
   - TalkBack
   - Font size scaling
   - High contrast text
   - Switch Access