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>
2.5 KiB
HIG: Components & Patterns
Source: Apple HIG — Components | Modality | 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