Files
Dramlog-Prod/hig.md

2.1 KiB

Apple Human Interface Guidelines (HIG) - Core Principles for iOS

@Context: Mobile Whisky Tasting App (Dark Mode)

1. Layout & Structure

  • Safe Areas: Always respect the top (Dynamic Island/Notch) and bottom (Home Indicator) safe areas. Never place interactive elements (like the "Save Tasting" sticky button) directly on the bottom edge; add bottom padding.
  • Modality (Sheets): For the "Session Context" (Step C in our flow), use native-style Sheets. Supports "detents" (medium/large). Sheets should be dismissible by dragging down.
  • Navigation: Use a Navigation Bar for hierarchy. The title (e.g., "Tasting Editor") should be large (Large Title) on top of the scroll view and collapse to a small title on scroll.

2. Touch & Interaction

  • Hit Targets: Minimum tappable area is 44x44 pt. Ensure the "Smart Tags" in the form are large enough.
  • Feedback: Use Haptics (Haptic Feedback) for significant actions (e.g., success haptic when "Save Tasting" is clicked, selection haptic when moving sliders).
  • Gestures: Support "Swipe Back" to navigate to the previous screen. Do not block this gesture with custom UI.

3. Visual Design (Dark Mode)

  • Colors: - Never use pure black (#000000) for backgrounds. Use semantic system colors or generic dark grays (e.g., systemBackground / #1C1C1E).
    • Use systemGray to systemGray6 for elevation levels (cards on top of background).
  • Typography:
    • Use San Francisco (SF Pro) or the defined app fonts (Inter/Playfair).
    • Respect Dynamic Type sizes so users can scale text.
  • Icons: Use SF Symbols (or Lucide variants closely matching SF Symbols) with consistent stroke weights (usually "Medium" or "Semibold" for active states).

4. Specific Component Rules

  • Buttons:
    • "Primary" buttons (Save) should use high-contrast background colors.
    • "Secondary" buttons (Cancel/Back) should be plain text or tinted glyphs.
    • Avoid using multiple primary buttons on one screen.
  • Inputs: - Text fields must clearly indicate focus.
    • Keyboard: Use the correct keyboard type (e.g., decimalPad for ABV input).