# 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 |