Anthony Cardinale
34bd90e30d
Combines frontend-design aesthetics with swiftui-pro correctness, grounded in Apple's Human Interface Guidelines (134 articles). Includes curated HIG reference files for typography, color, layout, materials, motion, icons, and components, plus full HIG JSON data for deep lookups. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
63 lines
2.5 KiB
Markdown
63 lines
2.5 KiB
Markdown
# HIG: Components & Patterns
|
|
|
|
Source: [Apple HIG — Components](https://developer.apple.com/design/human-interface-guidelines/components) | [Modality](https://developer.apple.com/design/human-interface-guidelines/modality) | [Searching](https://developer.apple.com/design/human-interface-guidelines/searching)
|
|
|
|
## Component Categories
|
|
|
|
### Content
|
|
Charts, Image views, Text views, Web views
|
|
|
|
### Layout and Organization
|
|
Boxes, Collections, Column views, Disclosure controls, Labels, Lists and tables, Lockups, Outline views, Split views, Tab views
|
|
|
|
### Menus and Actions
|
|
Activity views, Buttons, Context menus, Dock menus, Edit menus, Home Screen quick actions, Menus, Ornaments, Pop-up buttons, Pull-down buttons, The menu bar, Toolbars
|
|
|
|
### Navigation and Search
|
|
Path controls, Search fields, Sidebars, Tab bars, Token fields
|
|
|
|
### Presentation
|
|
Action sheets, Alerts, Page controls, Panels, Popovers, Scroll views, Sheets, Windows
|
|
|
|
### Selection and Input
|
|
Color wells, Combo boxes, Digit entry views, Image wells, Pickers, Segmented controls, Sliders, Steppers, Text fields, Toggles, Virtual keyboards
|
|
|
|
### Status
|
|
Activity rings, Gauges, Progress indicators, Rating indicators
|
|
|
|
### System Experiences
|
|
App Shortcuts, Complications, Controls, Live Activities, Notifications, Status bars, Top Shelf, Watch faces, Widgets
|
|
|
|
## Modality
|
|
|
|
### When to Use
|
|
- Deliver critical information requiring acknowledgment
|
|
- Confirm/modify a recent action
|
|
- Help people perform a distinct, narrowly scoped task
|
|
- Provide immersive experience or aid concentration
|
|
|
|
### Best Practices
|
|
- Present modally only when there's a **clear benefit**
|
|
- Keep modal tasks **simple, short, and streamlined**
|
|
- Avoid hierarchy within modals — single path only
|
|
- Full-screen modal for in-depth content or complex tasks
|
|
- Always provide an **obvious dismiss mechanism**
|
|
- Confirm before closing if dismissal could lose user content
|
|
- Never stack modals — dismiss one before showing another
|
|
- Only one alert visible at a time
|
|
|
|
## Searching
|
|
|
|
### Best Practices
|
|
- If search is important, make it a **primary action** (tab bar, toolbar)
|
|
- Single search location — one clearly identified place
|
|
- Placeholder text to indicate searchable content
|
|
- Display current scope clearly
|
|
- Provide suggestions before and during typing
|
|
- Consider privacy — provide option to clear search history
|
|
|
|
## Navigation Conventions
|
|
- Standard Back and Close buttons with system symbols
|
|
- Don't use text labels for Back/Close — use symbols
|
|
- Consistent implementation throughout the app
|