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>
101 lines
3.8 KiB
Markdown
101 lines
3.8 KiB
Markdown
# HIG: Layout
|
|
|
|
Source: [Apple HIG — Layout](https://developer.apple.com/design/human-interface-guidelines/layout)
|
|
|
|
## Best Practices
|
|
|
|
- Group related items using negative space, background shapes, colors, materials, or separators
|
|
- Give essential information sufficient space — don't crowd with nonessential details
|
|
- Extend content to fill screen/window edges — backgrounds and artwork should be full-bleed
|
|
- Scrollable layouts should continue to bottom and sides of device screen
|
|
- Controls (sidebars, tab bars) appear ON TOP of content, not on the same plane
|
|
|
|
## Visual Hierarchy
|
|
|
|
- Use Liquid Glass material for controls/navigation — distinct from content layer
|
|
- Use scroll edge effects (not backgrounds) to transition between content and control areas
|
|
- Place items in reading order (top-to-bottom, leading-to-trailing) — most important near top/leading
|
|
- Align components for easier scanning — alignment communicates organization
|
|
- Use progressive disclosure for hidden content (disclosure controls, partial item display)
|
|
- Provide enough space around controls — crowded controls are hard to distinguish
|
|
|
|
## Adaptability
|
|
|
|
Handle these variations:
|
|
- Different screen sizes, resolutions, color spaces
|
|
- Portrait/landscape orientations
|
|
- Dynamic Island, camera controls
|
|
- External displays, Display Zoom, resizable iPad windows
|
|
- Dynamic Type text-size changes
|
|
- RTL layout, internationalization
|
|
|
|
Use SwiftUI layout or Auto Layout for adaptive interfaces. Respect safe areas, margins, and guides.
|
|
|
|
## Guides & Safe Areas
|
|
|
|
- **Layout guides:** Rectangular regions for positioning/aligning content
|
|
- **Safe areas:** Regions not covered by bars, Dynamic Island, camera housing
|
|
- Always respect safe areas — content outside feels wrong and may be hard to use
|
|
|
|
## iOS
|
|
|
|
- Support both portrait and landscape (or commit to one)
|
|
- Full-bleed game interfaces accommodating corner radius, sensor housing, Dynamic Island
|
|
- Avoid full-width buttons — respect system margins, match hardware curvature
|
|
- Keep status bar visible unless immersive experience
|
|
|
|
## iPadOS
|
|
|
|
- Windows freely resizable — account for full range of sizes
|
|
- Defer compact view as long as possible — hide tertiary columns first
|
|
- Test at common system sizes (halves, thirds, quadrants)
|
|
- Consider convertible tab bar (sidebar <-> tab bar)
|
|
|
|
## visionOS
|
|
|
|
- Center important content and controls in windows
|
|
- Keep content within window bounds (system controls are OUTSIDE bounds)
|
|
- Use ornaments for controls outside the window
|
|
- Space interactive components with centers at least 60pt apart
|
|
|
|
## watchOS
|
|
|
|
- Extend content edge-to-edge — bezel provides natural padding
|
|
- Max 3 glyph buttons or 2 text buttons side-by-side
|
|
|
|
## Key Device Dimensions (Current Models)
|
|
|
|
| Device | Points (portrait) | Pixels | Scale |
|
|
|--------|-------------------|--------|-------|
|
|
| iPhone 17 Pro Max | 440x956 | 1320x2868 | @3x |
|
|
| iPhone 17 Pro | 402x874 | 1206x2622 | @3x |
|
|
| iPhone Air | 420x912 | 1260x2736 | @3x |
|
|
| iPhone 16 Pro Max | 440x956 | 1320x2868 | @3x |
|
|
| iPhone 16 | 393x852 | 1179x2556 | @3x |
|
|
| iPhone SE | 375x667 | 750x1334 | @2x |
|
|
| iPad Pro 12.9" | 1024x1366 | 2048x2732 | @2x |
|
|
| iPad Pro 11" | 834x1194 | 1668x2388 | @2x |
|
|
| iPad Air 13" | 1024x1366 | 2048x2732 | @2x |
|
|
| iPad Air 11" | 820x1180 | 1640x2360 | @2x |
|
|
| iPad mini 8.3" | 744x1133 | 1488x2266 | @2x |
|
|
|
|
## Size Classes
|
|
|
|
| Device Type | Portrait | Landscape |
|
|
|-------------|----------|-----------|
|
|
| All iPads | Regular W, Regular H | Regular W, Regular H |
|
|
| iPhone Pro Max/Plus/Air | Compact W, Regular H | Regular W, Compact H |
|
|
| iPhone Pro/standard/mini | Compact W, Regular H | Compact W, Compact H |
|
|
|
|
## tvOS Grid Spacing
|
|
|
|
All grids: 40pt horizontal spacing, 100pt minimum vertical spacing.
|
|
|
|
| Columns | Unfocused Content Width |
|
|
|---------|------------------------|
|
|
| 2 | 860 pt |
|
|
| 3 | 560 pt |
|
|
| 4 | 410 pt |
|
|
| 5 | 320 pt |
|
|
| 6 | 260 pt |
|