style: redesign app following HIG with larger hero images and refined typography
This commit is contained in:
28
hig.md
Normal file
28
hig.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# 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).
|
||||
Reference in New Issue
Block a user