Initial release: swift-front skill with Apple HIG integration
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>
This commit is contained in:
Anthony Cardinale
@@ -0,0 +1,59 @@
|
|||||||
|
# swift-front
|
||||||
|
|
||||||
|
A Claude Code skill for building distinctive, production-grade SwiftUI interfaces. Combines bold aesthetic direction from [frontend-design](https://github.com/anthropics/claude-code-plugins/tree/main/skills/frontend-design) with modern SwiftUI correctness from [swiftui-pro](https://github.com/nicklama/swiftui-pro), grounded in Apple's Human Interface Guidelines.
|
||||||
|
|
||||||
|
## What it does
|
||||||
|
|
||||||
|
When invoked (via `/swift-front` or automatically when building SwiftUI views), this skill guides Claude to:
|
||||||
|
|
||||||
|
1. **Design Think** — commit to a bold aesthetic direction before writing code
|
||||||
|
2. **Check HIG compliance** — load relevant Apple HIG references for the design domain
|
||||||
|
3. **Implement with correctness** — modern SwiftUI APIs (iOS 26, Swift 6.2), proper data flow, accessibility
|
||||||
|
4. **Avoid AI slop** — explicit anti-patterns checklist to prevent generic, forgettable interfaces
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
Clone into your Claude Code skills directory:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/cardinale/swift-front.git ~/.claude/skills/swift-front
|
||||||
|
```
|
||||||
|
|
||||||
|
## Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
swift-front/
|
||||||
|
├── SKILL.md # Main skill (loaded when invoked)
|
||||||
|
├── references/ # Curated HIG extracts (loaded on demand)
|
||||||
|
│ ├── hig-typography.md # Text styles, Dynamic Type, font specs
|
||||||
|
│ ├── hig-color.md # System colors, dark mode, contrast
|
||||||
|
│ ├── hig-layout.md # Device dimensions, size classes, safe areas
|
||||||
|
│ ├── hig-materials.md # Liquid Glass, standard materials, vibrancy
|
||||||
|
│ ├── hig-motion.md # Animation principles, Reduce Motion
|
||||||
|
│ ├── hig-icons.md # App icons, SF Symbols, rendering modes
|
||||||
|
│ └── hig-components.md # Component taxonomy, modality, search
|
||||||
|
└── data/ # Machine-readable HIG data
|
||||||
|
├── apple-hig-compact.json # 45 articles — tips/notes only (39KB)
|
||||||
|
├── apple-hig-index.json # 134 articles — navigation index (65KB)
|
||||||
|
└── categories/ # Full HIG articles by category (~2.2MB)
|
||||||
|
├── foundations.json
|
||||||
|
├── components.json
|
||||||
|
├── patterns.json
|
||||||
|
├── technologies.json
|
||||||
|
├── inputs.json
|
||||||
|
├── general.json
|
||||||
|
└── getting-started.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## HIG Data
|
||||||
|
|
||||||
|
The `data/` directory contains a structured JSON extraction of [Apple's Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) (134 articles). The curated `references/` files distill the most design-relevant content into scannable markdown. For edge cases, the skill instructs Claude to search the index and read from the full category files.
|
||||||
|
|
||||||
|
## Pairs with
|
||||||
|
|
||||||
|
- **[swiftui-pro](https://github.com/nicklama/swiftui-pro)** — After building with swift-front, use swiftui-pro for full API correctness review
|
||||||
|
- **[frontend-design](https://github.com/anthropics/claude-code-plugins/tree/main/skills/frontend-design)** — The web equivalent; swift-front adapts its design philosophy for Apple platforms
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
@@ -0,0 +1,228 @@
|
|||||||
|
---
|
||||||
|
name: swift-front
|
||||||
|
description: Use when building new SwiftUI views, screens, or apps where visual design quality matters - creating distinctive, production-grade iOS interfaces that avoid generic aesthetics. Triggers on requests to build SwiftUI components, design iOS screens, or create visually striking Apple platform interfaces.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Swift Front
|
||||||
|
|
||||||
|
Create distinctive, production-grade SwiftUI interfaces with exceptional visual design. Combines bold aesthetic direction with modern SwiftUI correctness, grounded in Apple's Human Interface Guidelines.
|
||||||
|
|
||||||
|
**Core principle:** Every SwiftUI screen should feel *designed*, not *generated*. Commit to a clear aesthetic vision and execute it with the full power of SwiftUI's rendering pipeline.
|
||||||
|
|
||||||
|
## Design Thinking
|
||||||
|
|
||||||
|
Before writing any SwiftUI code, understand the context and commit to a BOLD aesthetic direction:
|
||||||
|
|
||||||
|
- **Purpose**: What does this screen solve? Who uses it — quick glance or deep immersion?
|
||||||
|
- **Tone**: Pick an extreme and commit: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, liquid glass, skeuomorphic revival. Use these for inspiration but design one true to the aesthetic.
|
||||||
|
- **Platform Context**: iOS has its own design language — work WITH it. Liquid Glass, materials, SF Symbols, Dynamic Type are tools, not constraints.
|
||||||
|
- **Differentiation**: What's the ONE thing someone remembers about this interface?
|
||||||
|
|
||||||
|
**CRITICAL**: Bold maximalism and refined minimalism both work. The key is intentionality, not intensity. Generic = forgettable. No two designs should look the same.
|
||||||
|
|
||||||
|
## HIG Compliance Check
|
||||||
|
|
||||||
|
After choosing your aesthetic direction and before implementing, load the relevant HIG reference files to ensure your design works within Apple's guidelines:
|
||||||
|
|
||||||
|
| Building... | Load reference |
|
||||||
|
|-------------|---------------|
|
||||||
|
| Typography / text hierarchy | `references/hig-typography.md` |
|
||||||
|
| Color system / dark mode | `references/hig-color.md` |
|
||||||
|
| Layout / responsive design | `references/hig-layout.md` |
|
||||||
|
| Materials / Liquid Glass / depth | `references/hig-materials.md` |
|
||||||
|
| Animations / transitions | `references/hig-motion.md` |
|
||||||
|
| Icons / SF Symbols / app icon | `references/hig-icons.md` |
|
||||||
|
| Navigation / modals / search | `references/hig-components.md` |
|
||||||
|
|
||||||
|
For topics not covered in curated references, search `data/apple-hig-index.json` for the article, then read the full content from `data/categories/<category>.json`.
|
||||||
|
|
||||||
|
### When HIG and Bold Design Conflict
|
||||||
|
|
||||||
|
The swift-front skill encourages breaking conventions — the HIG enforces them. Here's the boundary:
|
||||||
|
|
||||||
|
| HIG Rule Type | Compliance Level | Example |
|
||||||
|
|---------------|-----------------|---------|
|
||||||
|
| **Accessibility** | NON-NEGOTIABLE | 44pt min tap targets, Dynamic Type, contrast ratios, Reduce Motion |
|
||||||
|
| **Component behavior** | STRONGLY RECOMMENDED | NavigationStack patterns, sheet presentation, alert conventions |
|
||||||
|
| **Visual styling** | SUGGESTIONS — override with intent | Default List appearance, standard spacing, system font defaults |
|
||||||
|
|
||||||
|
You can break visual conventions if you replace them with something *better and intentional*. You cannot break accessibility rules or fundamental component behavior.
|
||||||
|
|
||||||
|
## SwiftUI Aesthetics Guidelines
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
|
||||||
|
- **Never** default to system font without consideration. SF Pro is fine when *intentional*, but explore:
|
||||||
|
- SF Pro Display for large titles, SF Pro Rounded for playful UIs, SF Mono for data-dense screens
|
||||||
|
- Custom fonts: `.font(.custom("FontName", size:, relativeTo:))` — always use `relativeTo:` for Dynamic Type
|
||||||
|
- `@ScaledMetric` for custom sizing that respects accessibility (iOS 18−), `.font(.body.scaled(by:))` (iOS 26+)
|
||||||
|
- Pair a distinctive display font with a readable body font
|
||||||
|
- Use `bold()` not `fontWeight(.bold)` — let the system choose context-appropriate weight
|
||||||
|
- Don't scatter `fontWeight(.medium)` or `.semibold` — every weight choice needs hierarchy purpose
|
||||||
|
- Avoid `.caption2` (extremely small) and use `.caption` carefully
|
||||||
|
- HIG minimum sizes: iOS 11pt, macOS 10pt, visionOS 12pt — never go below these
|
||||||
|
|
||||||
|
### Color & Theme
|
||||||
|
|
||||||
|
- Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
||||||
|
- Create a shared `Design` constants enum for all colors, spacing, corner radii — consistency is non-negotiable
|
||||||
|
- Use semantic system colors (`.primary`, `.secondary`) as foundation, layer custom accents on top
|
||||||
|
- `foregroundStyle()` with hierarchical styles (`.secondary`, `.tertiary`) before reaching for manual opacity
|
||||||
|
- Gradients: `LinearGradient`, `RadialGradient`, `MeshGradient` (iOS 18+), `EllipticalGradient` — use intentionally, not decoratively
|
||||||
|
- Design dark mode from the start — use asset catalog colors or conditional logic
|
||||||
|
- Never use UIKit colors (`UIColor`) in SwiftUI code
|
||||||
|
- HIG contrast: minimum 4.5:1; aim for 7:1 in small text
|
||||||
|
- Even single-appearance apps must provide light+dark colors for Liquid Glass adaptivity
|
||||||
|
|
||||||
|
### Motion & Animation
|
||||||
|
|
||||||
|
- `withAnimation(.bouncy)` or `.spring()` as default — linear animations feel mechanical
|
||||||
|
- Chain animations with `completion:` closures, NEVER multiple `withAnimation()` with delays:
|
||||||
|
|
||||||
|
```swift
|
||||||
|
withAnimation(.spring) {
|
||||||
|
scale = 2
|
||||||
|
} completion: {
|
||||||
|
withAnimation(.spring) {
|
||||||
|
scale = 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- Always provide a value: `.animation(.bouncy, value: score)` — never the deprecated parameterless variant
|
||||||
|
- Use `@Animatable` macro over manual `animatableData`; mark non-animatable properties `@AnimatableIgnored`
|
||||||
|
- `sensoryFeedback()` for haptics — pair with visual transitions for multi-sensory delight
|
||||||
|
- Staggered reveals on appear create more impact than scattered micro-interactions
|
||||||
|
- `PhaseAnimator` for looping multi-phase sequences, `KeyframeAnimator` for complex choreography
|
||||||
|
- `contentTransition(.numericText())` for number changes, `.symbolEffect()` for SF Symbol animations
|
||||||
|
- Respect `accessibilityReduceMotion` — replace large animations with opacity crossfades (HIG: non-negotiable)
|
||||||
|
|
||||||
|
### Spatial Composition
|
||||||
|
|
||||||
|
- Break the grid intentionally. Overlap with `.offset()` or `ZStack` alignment. Asymmetric layouts.
|
||||||
|
- `containerRelativeFrame()` over `GeometryReader` for responsive sizing
|
||||||
|
- Generous negative space OR controlled density — never the muddy middle
|
||||||
|
- `.visualEffect()` for scroll-driven parallax and transforms
|
||||||
|
- `ScrollView` with `.scrollTargetBehavior(.paging)` or `.viewAligned` for snappy scroll UX
|
||||||
|
- Never use `UIScreen.main.bounds` — use `containerRelativeFrame()` or `visualEffect()`
|
||||||
|
|
||||||
|
### Materials & Depth
|
||||||
|
|
||||||
|
- `.ultraThinMaterial`, `.regularMaterial`, `.thickMaterial` — native glass effects
|
||||||
|
- Layer materials over vibrant backgrounds for depth
|
||||||
|
- `shadow(color:radius:x:y:)` — sparingly but effectively; soft large-radius shadows for elevation
|
||||||
|
- `clipShape(.rect(cornerRadius:))` — `.continuous` is the default, matches iOS system rounding
|
||||||
|
- Custom `Shape` conformances for non-rectangular clipping
|
||||||
|
- `Canvas` for high-performance custom drawing (particles, generative backgrounds, data visualizations)
|
||||||
|
- `MeshGradient` for rich, organic color fields
|
||||||
|
- HIG: Liquid Glass is for controls/navigation ONLY — never in the content layer
|
||||||
|
- HIG: Use `glassEffect(_:in:)` for custom Liquid Glass; regular variant for most, clear variant over media
|
||||||
|
|
||||||
|
### SF Symbols
|
||||||
|
|
||||||
|
- 6000+ symbols — always check for the right one before creating custom assets
|
||||||
|
- `.symbolEffect(.bounce)`, `.symbolEffect(.pulse)`, `.symbolRenderingMode(.hierarchical)` for rich treatments
|
||||||
|
- Variable color symbols for progress indicators
|
||||||
|
- Always include text labels: `Button("Add", systemImage: "plus", action: addItem)`
|
||||||
|
- HIG: Gradients on symbols (SF Symbols 7+), Draw On/Off animations, Magic Replace
|
||||||
|
|
||||||
|
## Implementation Rules
|
||||||
|
|
||||||
|
Beautiful AND correct — these are non-negotiable:
|
||||||
|
|
||||||
|
1. **Extract views** into separate `View` structs in their own files — never computed properties returning `some View`
|
||||||
|
2. **Button actions** go in methods, not inline closures
|
||||||
|
3. **`@Observable`** for shared state (not `ObservableObject`), marked `@MainActor`
|
||||||
|
4. **`@State`** must be `private`, owned by the creating view
|
||||||
|
5. **`NavigationStack`** with `navigationDestination(for:)` — never `NavigationView`
|
||||||
|
6. **Minimum 44×44pt** tap targets — Apple's strict minimum (HIG)
|
||||||
|
7. **`task()`** over `onAppear()` for async work (auto-cancels on disappear)
|
||||||
|
8. **Ternary** for toggling modifier values — preserves structural identity, avoids `_ConditionalContent`
|
||||||
|
9. **`LazyVStack`/`LazyHStack`** in `ScrollView` for large data sets
|
||||||
|
10. **`#Preview`** — never `PreviewProvider`
|
||||||
|
11. **`async`/`await`** — never `DispatchQueue`
|
||||||
|
12. **Each type** in its own Swift file
|
||||||
|
|
||||||
|
**REQUIRED:** For full API correctness validation after implementation, use swiftui-pro.
|
||||||
|
|
||||||
|
## Anti-Patterns — The "AI Slop" Checklist
|
||||||
|
|
||||||
|
NEVER produce SwiftUI that looks like every other AI-generated app:
|
||||||
|
|
||||||
|
| AI Slop | Instead |
|
||||||
|
|---------|---------|
|
||||||
|
| Default system font with no hierarchy | Intentional typography with clear display/body pairing |
|
||||||
|
| Blue accent on white background | Committed palette with dominant + accent strategy |
|
||||||
|
| `List` with default styling for everything | Custom layouts with intentional spacing and composition |
|
||||||
|
| Identical padding/spacing everywhere | Varied rhythm — tight grouping + generous breathing room |
|
||||||
|
| No animations or only `.default` | Spring animations, staggered reveals, symbol effects |
|
||||||
|
| Gray placeholder backgrounds | Materials, gradients, mesh gradients, Canvas drawings |
|
||||||
|
| Uniform corner radii | Varied radii — larger containers, tighter chips/badges |
|
||||||
|
| No haptic feedback | `sensoryFeedback()` on key interactions |
|
||||||
|
| Every screen looks the same | Each screen has character appropriate to its content |
|
||||||
|
| Overused purple gradients | Context-specific color stories |
|
||||||
|
|
||||||
|
## Quick Reference — Design Tokens Pattern
|
||||||
|
|
||||||
|
```swift
|
||||||
|
enum Design {
|
||||||
|
enum Spacing {
|
||||||
|
static let xs: CGFloat = 4
|
||||||
|
static let sm: CGFloat = 8
|
||||||
|
static let md: CGFloat = 16
|
||||||
|
static let lg: CGFloat = 24
|
||||||
|
static let xl: CGFloat = 32
|
||||||
|
static let xxl: CGFloat = 48
|
||||||
|
}
|
||||||
|
|
||||||
|
enum Corner {
|
||||||
|
static let sm: CGFloat = 8
|
||||||
|
static let md: CGFloat = 12
|
||||||
|
static let lg: CGFloat = 20
|
||||||
|
static let pill: CGFloat = .infinity
|
||||||
|
}
|
||||||
|
|
||||||
|
enum Palette {
|
||||||
|
static let accent = Color("AccentPrimary")
|
||||||
|
static let surface = Color("Surface")
|
||||||
|
static let surfaceElevated = Color("SurfaceElevated")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Customize this for each project's aesthetic. Never reuse identical tokens across different apps — each app deserves its own design language.
|
||||||
|
|
||||||
|
## Common Mistakes
|
||||||
|
|
||||||
|
| Mistake | Fix |
|
||||||
|
|---------|-----|
|
||||||
|
| `GeometryReader` for responsive layout | `containerRelativeFrame()` or `visualEffect()` |
|
||||||
|
| `foregroundColor()` | `foregroundStyle()` |
|
||||||
|
| `cornerRadius()` modifier | `clipShape(.rect(cornerRadius:))` |
|
||||||
|
| Stored `DateFormatter` properties | `Text(date, format: .dateTime.day().month())` |
|
||||||
|
| `NavigationView` | `NavigationStack` or `NavigationSplitView` |
|
||||||
|
| `@StateObject` / `@ObservedObject` | `@State` with `@Observable` classes |
|
||||||
|
| Icon-only buttons | `Button("Label", systemImage: "icon", action: tap)` |
|
||||||
|
| `animation()` without value | `.animation(.spring, value: isExpanded)` |
|
||||||
|
| Manual `animatableData` | `@Animatable` macro |
|
||||||
|
| `DispatchQueue.main.async` | `@MainActor` / `Task` / `async`/`await` |
|
||||||
|
| `onTapGesture()` for buttons | `Button` (accessible by default) |
|
||||||
|
| `Binding(get:set:)` in body | `@State` binding + `onChange()` |
|
||||||
|
| `overlay(Text("x"))` | `overlay { Text("x") }` |
|
||||||
|
| `String(format: "%.2f")` | `Text(value, format: .number.precision(...))` |
|
||||||
|
| Liquid Glass in content layer | Liquid Glass for controls/navigation only |
|
||||||
|
| Ignoring Reduce Motion | Always provide opacity crossfade fallback |
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- `references/hig-typography.md` — Text sizes, Dynamic Type scales, font specs per platform
|
||||||
|
- `references/hig-color.md` — System colors, dark mode, Liquid Glass color, contrast requirements
|
||||||
|
- `references/hig-layout.md` — Safe areas, device dimensions, size classes, grid specs
|
||||||
|
- `references/hig-materials.md` — Liquid Glass variants, standard materials, vibrancy levels
|
||||||
|
- `references/hig-motion.md` — Animation principles, Reduce Motion, visionOS motion comfort
|
||||||
|
- `references/hig-icons.md` — App icon specs, SF Symbols rendering/animations, standard symbols
|
||||||
|
- `references/hig-components.md` — Component categories, modality rules, search patterns
|
||||||
|
- `data/apple-hig-compact.json` — Quick-lookup tips/notes from 45 HIG articles
|
||||||
|
- `data/apple-hig-index.json` — Full 134-article index for deep lookups
|
||||||
|
|
||||||
|
Remember: Claude is capable of extraordinary creative work in SwiftUI. Don't produce another generic app — commit to a vision and execute with precision. Show what's possible when design intentionality meets SwiftUI's full rendering power.
|
||||||
@@ -0,0 +1,813 @@
|
|||||||
|
{
|
||||||
|
"metadata": {
|
||||||
|
"source": "Apple Human Interface Guidelines",
|
||||||
|
"source_url": "https://developer.apple.com/design/human-interface-guidelines/",
|
||||||
|
"generated_at": "2026-03-24T10:09:01.952605+00:00",
|
||||||
|
"article_count": 134,
|
||||||
|
"format_version": "1.0",
|
||||||
|
"purpose": "Agent-readable reference for designing Swift/SwiftUI applications following Apple HIG",
|
||||||
|
"format": "compact-guidelines-only"
|
||||||
|
},
|
||||||
|
"articles": [
|
||||||
|
{
|
||||||
|
"title": "App icons",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/app-icons",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteAlternate app icons in iOS and iPadOS require their own dark, clear, and tinted variants. As with your default app icon, all alternate and variant icons are subject to app review and must adhere to the App Review Guidelines.",
|
||||||
|
"context": "Appearances"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Pay",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/apple-pay",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipIt’s important to understand the difference between Apple Pay and In-app purchase. Use Apple Pay in your app to sell physical goods like groceries, clothing, and appliances; for services such as club memberships, hotel reservations, and tickets for events; and for donations. Use In-App Purchase in your app to sell virtual goods, such as premium content for your app, and subscriptions for digital content.",
|
||||||
|
"context": "Overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteFor privacy reasons, your app or website has limited access to data until people attempt to authorize a transaction. Prior to authorization, only the card type and a redacted shipping address are accessible. It’s critical to display errors when authorization fails, but to the extent possible, you also need to attempt to validate available information and report problems before authorization.",
|
||||||
|
"context": "Data validation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIf the size you specify doesn’t accommodate the translated title for the type of payment button you’re using, the system automatically replaces it with the plain Apple Pay button shown below on the left. There is no automatic replacement for the Set up Apple Pay button.",
|
||||||
|
"context": "Button size and position"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Apple Pencil and Scribble",
|
||||||
|
"category": "inputs",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe squeeze gesture is available only when the paired iPad screen is on and while the Apple Pencil Pro is not directly contacting it. Because squeeze works when there’s distance between Apple Pencil Pro and iPad, people might not always be visually aware of the gesture’s onscreen result.",
|
||||||
|
"context": "Squeeze"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Augmented reality",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/augmented-reality",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe following guidance applies to apps that run in iOS and iPadOS. To learn about using ARKit to create immersive augmented reality experiences in visionOS, see ARKit.",
|
||||||
|
"context": "Overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipRegardless of the purpose of your app, don’t use scaling as a way to adjust the distance of an object. If you enlarge a distant object in an effort to make it appear closer, the result is a larger object that still looks far away.",
|
||||||
|
"context": "Designing object interactions"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Buttons",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/buttons",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIn macOS and visionOS, the system displays a tooltip after people hover over a button for a moment. A tooltip displays a brief phrase that explains what a button does; for guidance, see Offering help.",
|
||||||
|
"context": "Content"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIn visionOS, buttons don’t support custom hover effects.",
|
||||||
|
"context": "visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Complications",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/complications",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer notePrefer using WidgetKit to develop complications for watchOS 9 and later. For guidance, see Migrating ClockKit complications to WidgetKit. To support earlier versions of watchOS, continue to implement the ClockKit complication data source protocol (see CLKComplicationDataSource).",
|
||||||
|
"context": "Overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe system applies a circular mask to each image.",
|
||||||
|
"context": "Circular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe system applies a circular mask to the circular, open-gauge, and closed-gauge images.",
|
||||||
|
"context": "Circular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe system applies a circular mask to each image.",
|
||||||
|
"context": "Corner"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteBoth large-image layouts automatically include a four-point corner radius.",
|
||||||
|
"context": "Rectangular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIn each stack measurement, the width value represents the maximum size.",
|
||||||
|
"context": "Circular small"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIn each stack measurement, the width value represents the maximum size.",
|
||||||
|
"context": "Modular small"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIn each stack measurement, the width value represents the maximum size.",
|
||||||
|
"context": "Extra large"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Designing for visionOS",
|
||||||
|
"category": "getting-started",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantWhen building your app for Apple Vision Pro, be sure to consider the unique characteristics of the device and its spatial computing environment, and pay special attention to your user’s safety; for more details about these characteristics, see Apple Vision Pro User Guide. For example, Apple Vision Pro should not be used while operating a vehicle or heavy machinery. The device is also not designed to be used while moving around unsafe environments such as near balconies, streets, stairs, or other potential hazards. Note that Apple Vision Pro is designed to be fit and used only by individuals 13 years of age or older.",
|
||||||
|
"context": "Overview"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Digital Crown",
|
||||||
|
"category": "inputs",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/digital-crown",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteApps don’t respond to presses on the Digital Crown because watchOS reserves these interactions for system-provided functionality like revealing the Home Screen.",
|
||||||
|
"context": "Apple Watch"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Dock menus",
|
||||||
|
"category": "general",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/dock-menus",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteAlthough iOS and iPadOS don’t support a Dock menu, people can reveal a similar menu of system-provided and custom items — called Home Screen quick actions — when they long press an app icon on the Home Screen or in the Dock. For guidance, see Home Screen quick actions.",
|
||||||
|
"context": "Overview"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Eyes",
|
||||||
|
"category": "inputs",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/eyes",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantTo help preserve people’s privacy, visionOS doesn’t provide direct information about where people are looking before they tap. When you use system-provided components, visionOS automatically tells you when people tap the component. For developer guidance, see Adopting best practices for privacy and user preferences.",
|
||||||
|
"context": "Overview"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Focus and selection",
|
||||||
|
"category": "inputs",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/focus-and-selection",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteWhen people look at a virtual object to identify it as the object they want to interact with, the system uses the hover effect, not a focus effect, to provide visual feedback (for guidance, see Eyes). The hover effect isn’t related to the focus system.",
|
||||||
|
"context": "visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Game Center",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/game-center",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIn visionOS, the locations of the access point vary based on game type, such as immersive or volume-based. For developer guidance, see Adding an access point to your game.",
|
||||||
|
"context": "Integrating the access point"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteBe mindful of how cropping might affect your leaderboard artwork. In iOS, iPadOS, and macOS, the system crops artwork for leaderboards that are part of a leaderboard set. In tvOS, the focus effect on leaderboard artwork may crop your images at the edges of some layers. Make sure your primary content stays comfortably visible in both these scenarios.",
|
||||||
|
"context": "Leaderboards"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Gestures",
|
||||||
|
"category": "inputs",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/gestures",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe system overlay is the default method of accessing Control Center in visionOS 2 and later. The visionOS 1 behavior (looking upward) remains available as an accessibility setting.",
|
||||||
|
"context": "Working with system overlays in visionOS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteApps and games that you built for visionOS 1 defer the system overlay behavior by default. When a person looks at their palm with your app running in a Full Space, the Home indicator won’t appear unless they tap first.",
|
||||||
|
"context": "Working with system overlays in visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Gyroscope and accelerometer",
|
||||||
|
"category": "inputs",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantIf your experience needs to access motion data from a device, you must provide copy that explains why. The first time your app or game tries to access this type of data, the system includes your copy in a permission request, where people can grant or deny access.",
|
||||||
|
"context": "Best practices"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "HealthKit",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/healthkit",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantIf your app doesn’t provide health and fitness functionality, don’t request access to people’s private health data.",
|
||||||
|
"context": "Overview"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "HomeKit",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/homekit",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipThe HomeKit API uses the term action set instead of scene. In your app’s UI, always use the term scene.",
|
||||||
|
"context": "Actions and scenes"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Images",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/images",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantYour tvOS app icon must use a layered image. For other focusable images in your app, including Top Shelf images, layered images are strongly encouraged, but optional.",
|
||||||
|
"context": "Layered images"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteIf your app retrieves layered images from a content server at runtime, you must provide runtime layered images (.lcr). You can generate them from LSR files or Photoshop files using the layerutil command-line tool that Xcode provides. Runtime layered images are intended to be downloaded — don’t embed them in your app.",
|
||||||
|
"context": "Layered images"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "In-app purchase",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/in-app-purchase",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipIn-app purchase and Apple Pay are different technologies that support different use cases. Use in-app purchase to sell virtual goods in your app, such as premium content for your app and subscriptions for digital content. Use Apple Pay in your app to sell physical goods like groceries, clothing, and appliances; for services such as club memberships, hotel reservations, and event tickets; and for donations.",
|
||||||
|
"context": "Overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteFor apps with exceptionally large, frequently updated catalogs of one-time purchases or subscription content from multiple creators, or apps that provide subscriptions with optional add-on content as a single purchase within the app, the Advanced Commerce API allows you to manage your In-App Purchase catalog directly. See the Advanced Commerce API App Store support page for an overview, and see Advanced Commerce API for developer guidance.",
|
||||||
|
"context": "Overview"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Keyboards",
|
||||||
|
"category": "inputs",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/keyboards",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantAlthough iPadOS supports keyboard navigation in text fields, text views, and sidebars, and provides APIs you can use to support it in collection views and other custom views, avoid supporting keyboard navigation for controls, such as buttons, segmented controls, and switches. Instead, let people use Full Keyboard Access to activate controls, navigate to all onscreen components, and perform gesture-based interactions like drag and drop. For guidance, see iPadOS; for developer guidance, see Focus-based navigation.",
|
||||||
|
"context": "Best practices"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipSome languages require modifier keys to generate certain characters. For example, on a French keyboard, Option-5 generates the “{“ character. It’s usually safe to use the Command key as a modifier, but avoid using an additional modifier with characters that aren’t available on all keyboards. If you must use a modifier other than Command, prefer using it only with the alphabetic characters.",
|
||||||
|
"context": "Custom keyboard shortcuts"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Launching",
|
||||||
|
"category": "patterns",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/launching",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteUnlike the layered images throughout much of a tvOS app, the launch screen is static.",
|
||||||
|
"context": "tvOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Layout",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/layout",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteWhen you add depth to content in a standard window, the content extends beyond the window’s bounds along the z-axis. If content extends too far along the z-axis, the system clips it.",
|
||||||
|
"context": "visionOS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteAll scale factors in the table above are UIKit scale factors, which may differ from native scale factors. For developer guidance, see scale and nativeScale.",
|
||||||
|
"context": "iOS, iPadOS device screen dimensions"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Mac Catalyst",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/mac-catalyst",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteTo discover how views and controls can change when you create a Mac app using Mac Catalyst, download UIKit Catalog: Creating and customizing views and controls and build the macOS target.",
|
||||||
|
"context": "Before you start"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteWhen you adopt the Mac idiom, the unscaled views and interface elements report different metrics, often resulting in a significant amount of additional work. To reduce the amount of work, avoid using fixed font, view, or layout sizes. For developer guidance, see Choosing a user interface idiom for your Mac app.",
|
||||||
|
"context": "Choose an idiom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteThe system sends the two touches in the pinch and rotate gestures to the view under the pointer, not the view under each touch.",
|
||||||
|
"context": "Inputs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteTo support keyboard shortcuts for menu commands, use UIKeyCommand. For developer guidance, see Adding menus and shortcuts to the menu bar and user interface.",
|
||||||
|
"context": "Menus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteTo add and remove custom app menus, use UIMenuBuilder and add menu items that represent your iPad app’s commands as menu items with UICommand.",
|
||||||
|
"context": "Menus"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Managing accounts",
|
||||||
|
"category": "patterns",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/managing-accounts",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantIf legal requirements compel your app to maintain accounts or information — such as digital health records — or to follow a specific account-deletion process, clearly describe the situation so people can understand the information or accounts you must maintain and the process you must follow.",
|
||||||
|
"context": "Deleting accounts"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteIf people used Sign in with Apple to create an account within your app, you revoke the associated tokens when they delete their account. See Token revocation.",
|
||||||
|
"context": "Deleting accounts"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteEven if people didn’t use your app to purchase the subscription, you still need to support account deletion.",
|
||||||
|
"context": "Deleting accounts"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Managing notifications",
|
||||||
|
"category": "patterns",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/managing-notifications",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantEven though a Focus might delay the delivery of a notification alert, the notification itself is available as soon as it arrives.",
|
||||||
|
"context": "Integrating with Focus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteBecause a Critical notification can override the Ring/Silent switch and break through scheduled delivery and Focus, you must get an entitlement to send one.",
|
||||||
|
"context": "Integrating with Focus"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Maps",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/maps",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe Apple logo and legal link aren’t shown on maps that are smaller than 200x100 pixels.",
|
||||||
|
"context": "Best practices"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteIn websites, you can embed a custom map that displays a place card by default for a single place that you specify. For developer guidance, see Displaying place information using the Maps Embed API.",
|
||||||
|
"context": "Displaying place cards in a map"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantIf you don’t display a place card directly within a map view, you must include a map in the place card. For developer guidance, see mapItemDetailSheet(item:displaysMap:) and init(mapItem:displaysMap:).",
|
||||||
|
"context": "Adding place cards outside of a map"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Materials",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/materials",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NotevisionOS doesn’t have a distinct Dark Mode setting. Instead, glass automatically adapts to the luminance of the objects and colors behind it.",
|
||||||
|
"context": "visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Menus",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/menus",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteSeveral system-provided components also include menus that support specific use cases. For example, a pop-up button or pull-down button can reveal a menu of options directly related to its action; a context menu lets people access a small number of frequently used actions relevant to their current view or task; and in macOS and iPadOS, menu bar menus contain all the commands people can perform in the app or game.",
|
||||||
|
"context": "Overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteDepending on menu layout, an iOS, iPadOS, or visionOS app can display a few unlabeled menu items that use only symbols or icons to identify them. For guidance, see visionOS and iOS, iPadOS.",
|
||||||
|
"context": "Labels"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Motion",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/motion",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NotePeople can experience discomfort even when they’re the ones moving a large virtual object, such as a window. Although adjusting translucency and contrast can help in this scenario, consider also keeping a window’s size fairly small.",
|
||||||
|
"context": "visionOS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteAll layout- and appearance-based animations automatically include built-in easing that plays at the start and end of the animation. You can’t turn off or customize easing.",
|
||||||
|
"context": "watchOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Multitasking",
|
||||||
|
"category": "patterns",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/multitasking",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteApps don’t control multitasking configurations or receive any indication of the ones that people choose.",
|
||||||
|
"context": "iPadOS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteWhen an app is the Now Playing app, closing its window automatically pauses audio playback; if people want to resume playback, they can do so in Control Center without opening the window.",
|
||||||
|
"context": "visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Playing audio",
|
||||||
|
"category": "patterns",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/playing-audio",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantIn visionOS, as in every platform, avoid communicating important information using only sound. Always provide additional ways to help people understand your app. For guidance, see Accessibility.",
|
||||||
|
"context": "visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Privacy",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/privacy",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIf your app has no authorization status, tapping the location button has the same effect as when a person chooses Allow Once in the standard alert. If people previously chose While Using the App, tapping the location button doesn’t change your app’s status. For developer guidance, see LocationButton (SwiftUI) and CLLocationButton (Swift).",
|
||||||
|
"context": "Location button"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantIf the system identifies consistent problems with your customized location button, it won’t give your app access to the device location when people tap it. Although such a button can perform other app-specific actions, people may lose trust in your app if your location button doesn’t work as they expect.",
|
||||||
|
"context": "Location button"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Pull-down buttons",
|
||||||
|
"category": "general",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteYou can also let people reveal a pull-down menu by performing a specific gesture on a button. For example, in iOS 14 and later, Safari responds to a touch and hold gesture on the Tabs button by displaying a menu of tab-related actions, like New Tab and Close All Tabs.",
|
||||||
|
"context": "iOS, iPadOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Settings",
|
||||||
|
"category": "patterns",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/settings",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIn games, players tend to adjust their approach to a specific task as part of the gameplay, not as a settings option to change.",
|
||||||
|
"context": "Task-specific options"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "SF Symbols",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/sf-symbols",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantSF Symbols includes copyrighted symbols that depict Apple products and features. You can display these symbols in your app, but you can’t customize them. To help you identify a noncustomizable symbol, the SF Symbols app badges it with an Info icon; to help you use the symbol correctly, the inspector pane describes its usage restrictions.",
|
||||||
|
"context": "Custom symbols"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "SharePlay",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/shareplay",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteDuring a shared activity, the system helps preserve people’s privacy by obscuring some visual details about wearers. In addition, a person can adjust their spatial Persona if they want. Although the system can place spatial Personas shoulder to shoulder and it supports shared gestures like a handshake or “high five,” spatial Personas remain apart.",
|
||||||
|
"context": "visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Sidebars",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/sidebars",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteTo display a sidebar only, use NavigationSplitView to present a sidebar in the primary pane of a split view, or use UISplitViewController.",
|
||||||
|
"context": "iPadOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Siri",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/siri",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipIf your action’s primary purpose is to retrieve information or show something to people — like displaying a sports score or the weather — use the information category. Using a different category requires people to make additional taps to get the information.",
|
||||||
|
"context": "Design a custom intent"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteThe Add to Siri method for adding shortcuts is no longer supported. See App Shortcuts for ways to integrate your app with Siri and the system.",
|
||||||
|
"context": "Shortcuts and suggestions"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteUse translations of your app name and the word Shortcuts — but not Siri — when referring to them in a localized context.",
|
||||||
|
"context": "Referring to Shortcuts"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Spatial layout",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/spatial-layout",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantThe system doesn’t provide information about a person’s field of view.",
|
||||||
|
"context": "Field of view"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Tab bars",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/tab-bars",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteTo present a sidebar without the option to convert it to a tab bar, use a navigation split view instead of a tab view. For guidance, see Sidebars.",
|
||||||
|
"context": "iPadOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Tap to Pay on iPhone",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteTap to Pay on iPhone works alongside your existing payment-acceptance hardware and accessories.",
|
||||||
|
"context": "Overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteIf your PSP offers an SDK that supplies user interfaces for experiences like showing a tap result, see the documentation the PSP provides.",
|
||||||
|
"context": "Overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantUse the “Tap to Pay on iPhone” label only for payment actions. For language you can use for nonpayment actions, see Additional interactions.",
|
||||||
|
"context": "Checking out"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "The menu bar",
|
||||||
|
"category": "general",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/the-menu-bar",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantThe View menu doesn’t include items for navigating between or managing specific windows; the Window menu provides these commands.",
|
||||||
|
"context": "View menu"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantThe Window menu doesn’t help people customize the appearance of windows or close them. To customize a window, people use commands in the View menu; to close a window, people choose Close in the File menu.",
|
||||||
|
"context": "Window menu"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipmacOS automatically sets the width of a menu to hold the widest item, including dynamic menu items.",
|
||||||
|
"context": "Dynamic menu items"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Toolbars",
|
||||||
|
"category": "general",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/toolbars",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteThe system automatically adds an overflow menu in macOS or iPadOS when items no longer fit. Don’t add an overflow menu manually, and avoid layouts that cause toolbar items to overflow by default.",
|
||||||
|
"context": "Best practices"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Typography",
|
||||||
|
"category": "foundations",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/typography",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteVariable fonts support optical sizing, which refers to the adjustment of different typographic designs to fit different sizes. On all platforms, the system fonts support dynamic optical sizes, which merge discrete optical sizes (like Text and Display) and weights into a single, continuous design, letting the system interpolate each glyph or letterform to produce a structure that’s precisely adapted to the point size. With dynamic optical sizes, you don’t need to use discrete optical sizes unless you’re working with a design tool that doesn’t support all the features of the variable font format.",
|
||||||
|
"context": "Using system fonts"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteSF Symbols provides a comprehensive library of symbols that integrate seamlessly with the San Francisco system font, automatically aligning with text in all weights and sizes. Consider using symbols when you need to convey a concept or depict an object, especially within text.",
|
||||||
|
"context": "Using system fonts"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteYou can use the constants defined in Font.Design to access all system fonts — don’t embed system fonts in your app or game. For example, use Font.Design.default to get the system font on all platforms; use Font.Design.serif to get the New York font.",
|
||||||
|
"context": "Using system fonts"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Wallet",
|
||||||
|
"category": "technologies",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/wallet",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantPoster event tickets aren’t compatible with tickets that require a QR code or barcode for entry.",
|
||||||
|
"context": "Event tickets"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "important",
|
||||||
|
"text": "ImportantIn every style, watchOS crops the strip image to fit the aspect ratio of the card interface and may crop white space from other images.",
|
||||||
|
"context": "Passes for Apple Watch"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "Developer noteApple doesn’t create or see the ID documents that people add to Wallet, and when people agree to share identifying information with your app, you receive only encrypted data that isn’t readable on the device. For developer guidance, see Requesting identity data from a Wallet pass.",
|
||||||
|
"context": "Identity verification"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteDimensions for the logo, primary logo, and secondary logo images are the maximum — not the required — values. For example, if you create a primary logo image that measures 30x30 points, you don’t need to add unnecessary padding so that it measures the maximum 126x30 points.",
|
||||||
|
"context": "Pass image dimensions"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Windows",
|
||||||
|
"category": "patterns",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/windows",
|
||||||
|
"platforms": [],
|
||||||
|
"guidelines": [
|
||||||
|
{
|
||||||
|
"sentiment": "tip",
|
||||||
|
"text": "TipIf you only need to let people view one file, you can present it without creating your own window, but you must support multiple windows in your app. For developer guidance, see QLPreviewSceneActivationConfiguration.",
|
||||||
|
"context": "iPadOS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NoteSome windows — typically, panels like Colors or Fonts — become the key window only when people click the window’s title bar or a component that requires keyboard input, such as a text field.",
|
||||||
|
"context": "macOS window states"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sentiment": "note",
|
||||||
|
"text": "NotevisionOS also defines the plain window style, which is similar to the default style, except that the upright plane doesn’t use the glass background. For developer guidance, see PlainWindowStyle.",
|
||||||
|
"context": "visionOS"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,397 @@
|
|||||||
|
{
|
||||||
|
"metadata": {
|
||||||
|
"source": "Apple Human Interface Guidelines",
|
||||||
|
"source_url": "https://developer.apple.com/design/human-interface-guidelines/",
|
||||||
|
"generated_at": "2026-03-24T10:09:01.952605+00:00",
|
||||||
|
"article_count": 134,
|
||||||
|
"format_version": "1.0",
|
||||||
|
"purpose": "Agent-readable reference for designing Swift/SwiftUI applications following Apple HIG",
|
||||||
|
"category": "components"
|
||||||
|
},
|
||||||
|
"name": "Components",
|
||||||
|
"articles": [
|
||||||
|
{
|
||||||
|
"title": "Components",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/components",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Content",
|
||||||
|
"url": "/design/human-interface-guidelines/content"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Layout and organization",
|
||||||
|
"url": "/design/human-interface-guidelines/layout-and-organization"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Menus and actions",
|
||||||
|
"url": "/design/human-interface-guidelines/menus-and-actions"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Navigation and search",
|
||||||
|
"url": "/design/human-interface-guidelines/navigation-and-search"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Presentation",
|
||||||
|
"url": "/design/human-interface-guidelines/presentation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Selection and input",
|
||||||
|
"url": "/design/human-interface-guidelines/selection-and-input"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Status",
|
||||||
|
"url": "/design/human-interface-guidelines/status"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "System experiences",
|
||||||
|
"url": "/design/human-interface-guidelines/system-experiences"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Content",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/content",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Charts",
|
||||||
|
"url": "/design/human-interface-guidelines/charts"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Image views",
|
||||||
|
"url": "/design/human-interface-guidelines/image-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Text views",
|
||||||
|
"url": "/design/human-interface-guidelines/text-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Web views",
|
||||||
|
"url": "/design/human-interface-guidelines/web-views"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Layout and organization",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/layout-and-organization",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Boxes",
|
||||||
|
"url": "/design/human-interface-guidelines/boxes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Collections",
|
||||||
|
"url": "/design/human-interface-guidelines/collections"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Column views",
|
||||||
|
"url": "/design/human-interface-guidelines/column-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Disclosure controls",
|
||||||
|
"url": "/design/human-interface-guidelines/disclosure-controls"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Labels",
|
||||||
|
"url": "/design/human-interface-guidelines/labels"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Lists and tables",
|
||||||
|
"url": "/design/human-interface-guidelines/lists-and-tables"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Lockups",
|
||||||
|
"url": "/design/human-interface-guidelines/lockups"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Outline views",
|
||||||
|
"url": "/design/human-interface-guidelines/outline-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Split views",
|
||||||
|
"url": "/design/human-interface-guidelines/split-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Tab views",
|
||||||
|
"url": "/design/human-interface-guidelines/tab-views"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Menus and actions",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/menus-and-actions",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Activity views",
|
||||||
|
"url": "/design/human-interface-guidelines/activity-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Buttons",
|
||||||
|
"url": "/design/human-interface-guidelines/buttons"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Context menus",
|
||||||
|
"url": "/design/human-interface-guidelines/context-menus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Dock menus",
|
||||||
|
"url": "/design/human-interface-guidelines/dock-menus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Edit menus",
|
||||||
|
"url": "/design/human-interface-guidelines/edit-menus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Home Screen quick actions",
|
||||||
|
"url": "/design/human-interface-guidelines/home-screen-quick-actions"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Menus",
|
||||||
|
"url": "/design/human-interface-guidelines/menus"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Ornaments",
|
||||||
|
"url": "/design/human-interface-guidelines/ornaments"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Pop-up buttons",
|
||||||
|
"url": "/design/human-interface-guidelines/pop-up-buttons"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Pull-down buttons",
|
||||||
|
"url": "/design/human-interface-guidelines/pull-down-buttons"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "The menu bar",
|
||||||
|
"url": "/design/human-interface-guidelines/the-menu-bar"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Toolbars",
|
||||||
|
"url": "/design/human-interface-guidelines/toolbars"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Navigation and search",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/navigation-and-search",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Path controls",
|
||||||
|
"url": "/design/human-interface-guidelines/path-controls"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Search fields",
|
||||||
|
"url": "/design/human-interface-guidelines/search-fields"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Sidebars",
|
||||||
|
"url": "/design/human-interface-guidelines/sidebars"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Tab bars",
|
||||||
|
"url": "/design/human-interface-guidelines/tab-bars"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Token fields",
|
||||||
|
"url": "/design/human-interface-guidelines/token-fields"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Presentation",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/presentation",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Action sheets",
|
||||||
|
"url": "/design/human-interface-guidelines/action-sheets"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Alerts",
|
||||||
|
"url": "/design/human-interface-guidelines/alerts"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Page controls",
|
||||||
|
"url": "/design/human-interface-guidelines/page-controls"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Panels",
|
||||||
|
"url": "/design/human-interface-guidelines/panels"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Popovers",
|
||||||
|
"url": "/design/human-interface-guidelines/popovers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Scroll views",
|
||||||
|
"url": "/design/human-interface-guidelines/scroll-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Sheets",
|
||||||
|
"url": "/design/human-interface-guidelines/sheets"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Windows",
|
||||||
|
"url": "/design/human-interface-guidelines/windows"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Selection and input",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/selection-and-input",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Color wells",
|
||||||
|
"url": "/design/human-interface-guidelines/color-wells"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Combo boxes",
|
||||||
|
"url": "/design/human-interface-guidelines/combo-boxes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Digit entry views",
|
||||||
|
"url": "/design/human-interface-guidelines/digit-entry-views"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Image wells",
|
||||||
|
"url": "/design/human-interface-guidelines/image-wells"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Pickers",
|
||||||
|
"url": "/design/human-interface-guidelines/pickers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Segmented controls",
|
||||||
|
"url": "/design/human-interface-guidelines/segmented-controls"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Sliders",
|
||||||
|
"url": "/design/human-interface-guidelines/sliders"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Steppers",
|
||||||
|
"url": "/design/human-interface-guidelines/steppers"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Text fields",
|
||||||
|
"url": "/design/human-interface-guidelines/text-fields"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Toggles",
|
||||||
|
"url": "/design/human-interface-guidelines/toggles"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Virtual keyboards",
|
||||||
|
"url": "/design/human-interface-guidelines/virtual-keyboards"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Status",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/status",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "Activity rings",
|
||||||
|
"url": "/design/human-interface-guidelines/activity-rings"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Gauges",
|
||||||
|
"url": "/design/human-interface-guidelines/gauges"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Progress indicators",
|
||||||
|
"url": "/design/human-interface-guidelines/progress-indicators"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Rating indicators",
|
||||||
|
"url": "/design/human-interface-guidelines/rating-indicators"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "System experiences",
|
||||||
|
"url": "https://developer.apple.com/design/human-interface-guidelines/system-experiences",
|
||||||
|
"category": "components",
|
||||||
|
"summary": "",
|
||||||
|
"sections": [],
|
||||||
|
"platforms": [],
|
||||||
|
"related": [
|
||||||
|
{
|
||||||
|
"title": "App Shortcuts",
|
||||||
|
"url": "/design/human-interface-guidelines/app-shortcuts"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Complications",
|
||||||
|
"url": "/design/human-interface-guidelines/complications"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Controls",
|
||||||
|
"url": "/design/human-interface-guidelines/controls"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Live Activities",
|
||||||
|
"url": "/design/human-interface-guidelines/live-activities"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Notifications",
|
||||||
|
"url": "/design/human-interface-guidelines/notifications"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Status bars",
|
||||||
|
"url": "/design/human-interface-guidelines/status-bars"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Top Shelf",
|
||||||
|
"url": "/design/human-interface-guidelines/top-shelf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Watch faces",
|
||||||
|
"url": "/design/human-interface-guidelines/watch-faces"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Widgets",
|
||||||
|
"url": "/design/human-interface-guidelines/widgets"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"image_count": 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,94 @@
|
|||||||
|
# HIG: Color & Dark Mode
|
||||||
|
|
||||||
|
Source: [Apple HIG — Color](https://developer.apple.com/design/human-interface-guidelines/color) | [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode)
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
- Don't use the same color to mean different things — use color consistently for status and interactivity
|
||||||
|
- All colors must work in light, dark, AND increased contrast contexts
|
||||||
|
- Even single-appearance apps must provide both light and dark colors for Liquid Glass adaptivity
|
||||||
|
- Test colors under different lighting conditions (bright sunlight, dim light)
|
||||||
|
- Test on multiple devices (True Tone displays adapt white point)
|
||||||
|
- Avoid hard-coding system color values — use `Color` API
|
||||||
|
- Use wide color (Display P3) for richer, more saturated colors on compatible displays
|
||||||
|
- Use asset catalog Color Sets with light/dark variants
|
||||||
|
|
||||||
|
## Inclusive Color
|
||||||
|
|
||||||
|
- Never rely solely on color to differentiate objects or communicate info
|
||||||
|
- Provide text labels, glyph shapes, or patterns as alternatives
|
||||||
|
- Ensure sufficient contrast so icons and text don't blend with background
|
||||||
|
- Consider cultural color meanings (red = danger in some cultures, positive in others)
|
||||||
|
|
||||||
|
## System Colors (SwiftUI)
|
||||||
|
|
||||||
|
red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown
|
||||||
|
|
||||||
|
- visionOS uses default dark color values
|
||||||
|
- iOS/iPadOS has 6 system grays: `gray` (SwiftUI) = `systemGray` (UIKit), plus `systemGray2`-`systemGray6`
|
||||||
|
|
||||||
|
## iOS/iPadOS Dynamic Background Colors
|
||||||
|
|
||||||
|
Two sets — **system** and **grouped** — each with primary, secondary, tertiary:
|
||||||
|
|
||||||
|
| Level | Use for |
|
||||||
|
|-------|---------|
|
||||||
|
| Primary | Overall view background |
|
||||||
|
| Secondary | Grouping content within the overall view |
|
||||||
|
| Tertiary | Grouping content within secondary elements |
|
||||||
|
|
||||||
|
Use **grouped** set with grouped table views; **system** set otherwise.
|
||||||
|
|
||||||
|
## Foreground Colors (iOS)
|
||||||
|
|
||||||
|
| Color | Use | UIKit API |
|
||||||
|
|-------|-----|-----------|
|
||||||
|
| Label | Primary content text | `label` |
|
||||||
|
| Secondary label | Secondary content | `secondaryLabel` |
|
||||||
|
| Tertiary label | Tertiary content | `tertiaryLabel` |
|
||||||
|
| Quaternary label | Quaternary content | `quaternaryLabel` |
|
||||||
|
| Placeholder text | Control placeholders | `placeholderText` |
|
||||||
|
| Separator | Allows underlying content through | `separator` |
|
||||||
|
| Opaque separator | Fully opaque | `opaqueSeparator` |
|
||||||
|
| Link | Hyperlink text | `link` |
|
||||||
|
|
||||||
|
## Liquid Glass Color
|
||||||
|
|
||||||
|
- Liquid Glass has no inherent color — takes on colors from content behind it
|
||||||
|
- Apply color sparingly — reserve for emphasis (status indicators, primary actions)
|
||||||
|
- For primary actions, color the background (not symbols/text)
|
||||||
|
- Don't apply color to multiple control backgrounds
|
||||||
|
- Symbols/text on Liquid Glass can have color (e.g., selected tab bar item)
|
||||||
|
- Avoid similar colors in control labels over colorful backgrounds — prefer monochromatic
|
||||||
|
|
||||||
|
## Color Management
|
||||||
|
|
||||||
|
- Apply color profiles to images (sRGB for most, Display P3 for wide color)
|
||||||
|
- Wide color: P3 profile at 16 bits/channel, export as PNG
|
||||||
|
- Provide color space-specific variants if P3 gradients appear clipped on sRGB displays
|
||||||
|
|
||||||
|
## Dark Mode
|
||||||
|
|
||||||
|
- Don't offer app-specific appearance toggle — respect system setting
|
||||||
|
- Ensure content is legible in both modes, including with Increase Contrast + Reduce Transparency
|
||||||
|
- Dark palette uses dimmer backgrounds, brighter foregrounds (not simple inversions)
|
||||||
|
- Use semantic Color Set assets with light/dark variants — avoid hard-coded values
|
||||||
|
- Minimum contrast ratio: 4.5:1; aim for 7:1 especially in small text
|
||||||
|
- Soften white backgrounds slightly to prevent glowing in dark contexts
|
||||||
|
|
||||||
|
### iOS/iPadOS Dark Mode
|
||||||
|
|
||||||
|
- Two background levels: **base** (dimmer, recedes) and **elevated** (brighter, advances)
|
||||||
|
- System auto-switches base to elevated for popovers, modal sheets, foreground apps
|
||||||
|
- Use system background colors to maintain these visual distinctions
|
||||||
|
|
||||||
|
### macOS Dark Mode
|
||||||
|
|
||||||
|
- Desktop tinting: window backgrounds pick up color from desktop picture (graphite accent)
|
||||||
|
- Add transparency to custom component backgrounds (neutral state only) for tinting harmony
|
||||||
|
|
||||||
|
## Platform-Specific Notes
|
||||||
|
|
||||||
|
- **tvOS:** Limited color palette coordinating with app logo; don't use only color to indicate focus
|
||||||
|
- **visionOS:** Use color sparingly on glass; prefer bold text/large areas; keep brightness balanced
|
||||||
|
- **watchOS:** Background color should communicate, not just decorate; avoid full-screen background color in long-duration views
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
# 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
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
# HIG: Icons & SF Symbols
|
||||||
|
|
||||||
|
Source: [Apple HIG — App Icons](https://developer.apple.com/design/human-interface-guidelines/app-icons) | [Icons](https://developer.apple.com/design/human-interface-guidelines/icons) | [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols)
|
||||||
|
|
||||||
|
## App Icons
|
||||||
|
|
||||||
|
### Layer Design
|
||||||
|
- iOS/iPadOS/macOS/watchOS: background + foreground layers with Liquid Glass effects
|
||||||
|
- tvOS: 2-5 layers for parallax
|
||||||
|
- visionOS: background + 1-2 layers as 3D object
|
||||||
|
|
||||||
|
### Key Rules
|
||||||
|
- Embrace simplicity — simple icons are easiest to recognize
|
||||||
|
- Keep primary content centered to avoid masking truncation
|
||||||
|
- Prefer filled, overlapping shapes for depth
|
||||||
|
- Include text only when essential to brand
|
||||||
|
- Use illustrations, not photos or UI screenshots
|
||||||
|
- Let the system handle visual effects (highlights, shadows, bevels)
|
||||||
|
|
||||||
|
### Specifications
|
||||||
|
|
||||||
|
| Platform | Shape | Size | Appearances |
|
||||||
|
|----------|-------|------|-------------|
|
||||||
|
| iOS/iPadOS/macOS | Rounded rect | 1024x1024 px | Default, dark, clear, tinted |
|
||||||
|
| tvOS | Rounded rect | 800x480 px | N/A |
|
||||||
|
| visionOS | Circular | 1024x1024 px | N/A |
|
||||||
|
| watchOS | Circular | 1088x1088 px | N/A |
|
||||||
|
|
||||||
|
## Interface Icons
|
||||||
|
|
||||||
|
- Simple, recognizable, highly simplified designs
|
||||||
|
- Consistent size, detail, stroke weight, perspective across all icons
|
||||||
|
- Match icon weight to adjacent text weight
|
||||||
|
- Use vector format (PDF/SVG) — scales automatically
|
||||||
|
- Provide accessibility descriptions for custom icons
|
||||||
|
|
||||||
|
## SF Symbols (6000+)
|
||||||
|
|
||||||
|
### Rendering Modes
|
||||||
|
|
||||||
|
| Mode | Description |
|
||||||
|
|------|-------------|
|
||||||
|
| **Monochrome** | One color for all layers |
|
||||||
|
| **Hierarchical** | One color, varying opacity per layer |
|
||||||
|
| **Palette** | Two or more colors, one per layer |
|
||||||
|
| **Multicolor** | Intrinsic colors (leaf=green, trash.slash=red) |
|
||||||
|
|
||||||
|
### Gradients (SF Symbols 7+)
|
||||||
|
Linear gradient from single color, all rendering modes, best at larger sizes.
|
||||||
|
|
||||||
|
### Variable Color
|
||||||
|
Represents changing values (0-100%): layers receive color at thresholds.
|
||||||
|
Use for **change**, NOT depth (use Hierarchical for depth).
|
||||||
|
|
||||||
|
### Design Variants
|
||||||
|
- **Outline:** Text-like (toolbars, lists)
|
||||||
|
- **Fill:** Solid areas (tab bars, swipe actions, selection)
|
||||||
|
- **Slash:** Unavailability
|
||||||
|
- **Enclosed:** Circle/square (legibility at small sizes)
|
||||||
|
|
||||||
|
System views auto-select variant (tab bar -> fill, toolbar -> outline).
|
||||||
|
|
||||||
|
### Animations
|
||||||
|
|
||||||
|
| Animation | Use For |
|
||||||
|
|-----------|---------|
|
||||||
|
| Appear/Disappear | Gradual show/hide |
|
||||||
|
| Bounce | Feedback that action occurred |
|
||||||
|
| Scale | Draw attention to selection |
|
||||||
|
| Pulse | Ongoing activity |
|
||||||
|
| Variable color | Progress, broadcasting |
|
||||||
|
| Replace/Magic Replace | Swap symbols with transitions |
|
||||||
|
| Wiggle | Highlight change or call to action |
|
||||||
|
| Breathe | Status changes, ongoing recording |
|
||||||
|
| Rotate | Progress indicators |
|
||||||
|
| Draw On/Off | Progress, direction (SF Symbols 7+) |
|
||||||
|
|
||||||
|
### Common Standard Symbols
|
||||||
|
|
||||||
|
| Action | Symbol |
|
||||||
|
|--------|--------|
|
||||||
|
| Add | `plus` |
|
||||||
|
| Delete | `trash` |
|
||||||
|
| Share | `square.and.arrow.up` |
|
||||||
|
| Search | `magnifyingglass` |
|
||||||
|
| Done | `checkmark` |
|
||||||
|
| Cancel | `xmark` |
|
||||||
|
| Compose | `square.and.pencil` |
|
||||||
|
| More | `ellipsis` |
|
||||||
|
| Filter | `line.3.horizontal.decrease` |
|
||||||
|
| Account | `person.crop.circle` |
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
# 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 |
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
# HIG: Materials
|
||||||
|
|
||||||
|
Source: [Apple HIG — Materials](https://developer.apple.com/design/human-interface-guidelines/materials)
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Two types of materials:
|
||||||
|
1. **Liquid Glass** — Dynamic material for controls/navigation (tab bars, sidebars, toolbars)
|
||||||
|
2. **Standard materials** — For visual differentiation within the content layer
|
||||||
|
|
||||||
|
## Liquid Glass
|
||||||
|
|
||||||
|
Forms a distinct functional layer floating above content. Content scrolls and peeks through.
|
||||||
|
|
||||||
|
### Rules
|
||||||
|
|
||||||
|
- **Don't** use Liquid Glass in the content layer — controls/navigation only
|
||||||
|
- Exception: transient interactive elements (sliders, toggles) take Liquid Glass when activated
|
||||||
|
- Use sparingly — system components get it automatically
|
||||||
|
- Only apply to custom controls for the most important functional elements
|
||||||
|
|
||||||
|
### Variants
|
||||||
|
|
||||||
|
| Variant | Appearance | Use When |
|
||||||
|
|---------|-----------|----------|
|
||||||
|
| **Regular** | Blurs + adjusts luminosity | Background might affect legibility; significant text (alerts, sidebars, popovers) |
|
||||||
|
| **Clear** | Highly translucent | Floating over media (photos, videos) for immersive experience |
|
||||||
|
|
||||||
|
### Clear Variant Dimming
|
||||||
|
|
||||||
|
- Bright underlying content: add dark dimming layer at 35% opacity
|
||||||
|
- Dark underlying content or AVKit controls: no dimming needed
|
||||||
|
|
||||||
|
### Color on Liquid Glass
|
||||||
|
|
||||||
|
- No inherent color — takes on colors from content behind it
|
||||||
|
- Apply color sparingly — reserve for primary actions (Done button accent)
|
||||||
|
- Color the background, not symbols/text
|
||||||
|
- Don't color multiple control backgrounds
|
||||||
|
|
||||||
|
## Standard Materials
|
||||||
|
|
||||||
|
### iOS/iPadOS
|
||||||
|
|
||||||
|
Four levels (content layer only): ultra-thin, thin, regular (default), thick
|
||||||
|
|
||||||
|
**Vibrancy for labels:** `label`, `secondaryLabel`, `tertiaryLabel`, `quaternaryLabel`
|
||||||
|
**Vibrancy for fills:** `fill`, `secondaryFill`, `tertiaryFill`
|
||||||
|
|
||||||
|
Avoid `quaternaryLabel` on thin/ultraThin (too low contrast).
|
||||||
|
|
||||||
|
### macOS
|
||||||
|
|
||||||
|
- Several standard materials with designated purposes
|
||||||
|
- Two blending modes: **behind window** and **within window**
|
||||||
|
|
||||||
|
### tvOS
|
||||||
|
|
||||||
|
| Material | Recommended For |
|
||||||
|
|----------|----------------|
|
||||||
|
| ultraThin | Full-screen views, light scheme |
|
||||||
|
| thin | Overlays, light scheme |
|
||||||
|
| regular | General overlays |
|
||||||
|
| thick | Overlays, dark scheme |
|
||||||
|
|
||||||
|
### visionOS
|
||||||
|
|
||||||
|
- Windows use system **glass** material (unmodifiable, adaptive)
|
||||||
|
- No distinct Dark Mode — glass adapts to luminance behind it
|
||||||
|
- Prefer translucency over opaque colors
|
||||||
|
- Custom component materials: thin (interactive), regular (separations), thick (dark distinct)
|
||||||
|
- Vibrancy: `label`, `secondaryLabel`, `tertiaryLabel`
|
||||||
|
|
||||||
|
### watchOS
|
||||||
|
|
||||||
|
- Use materials for context in full-screen modal views
|
||||||
|
- Don't remove default material backgrounds from modal sheets
|
||||||
|
|
||||||
|
## SwiftUI API
|
||||||
|
|
||||||
|
- `.ultraThinMaterial`, `.thinMaterial`, `.regularMaterial`, `.thickMaterial`, `.ultraThickMaterial`
|
||||||
|
- Liquid Glass: `glassEffect(_:in:)`
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
# HIG: Motion
|
||||||
|
|
||||||
|
Source: [Apple HIG — Motion](https://developer.apple.com/design/human-interface-guidelines/motion)
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
- Add motion **purposefully** — don't add for its own sake
|
||||||
|
- Make motion **optional** — never the only way to communicate information
|
||||||
|
- Supplement visual feedback with haptics and audio alternatives
|
||||||
|
- Liquid Glass responds differently to touch (more emphasis) vs trackpad (more subdued)
|
||||||
|
|
||||||
|
## Feedback
|
||||||
|
|
||||||
|
- Strive for **realistic** feedback following gestures and expectations
|
||||||
|
- Aim for **brevity and precision** — succinct animations convey info without distraction
|
||||||
|
- Avoid adding motion to **frequently used UI interactions** — system handles standard animations
|
||||||
|
- Let people **cancel motion** — don't force waiting for animations to complete
|
||||||
|
- Consider **animated SF Symbols** (SF Symbols 5+)
|
||||||
|
|
||||||
|
## Accessibility
|
||||||
|
|
||||||
|
- If `accessibilityReduceMotion` is enabled, replace large motion with **opacity crossfades**
|
||||||
|
- Non-negotiable for accessibility compliance
|
||||||
|
|
||||||
|
## visionOS Motion
|
||||||
|
|
||||||
|
- Avoid motion at edges of field of view — peripheral motion causes discomfort
|
||||||
|
- For large moving objects, increase translucency or lower contrast
|
||||||
|
- Use **fades** to relocate objects (fade out, move, fade in)
|
||||||
|
- Avoid letting people rotate virtual worlds — disrupts stability
|
||||||
|
- Provide a **stationary frame of reference** — contained movement is more comfortable
|
||||||
|
- Avoid sustained oscillation (especially ~0.2 Hz)
|
||||||
|
|
||||||
|
## watchOS
|
||||||
|
|
||||||
|
- SwiftUI provides streamlined motion APIs
|
||||||
|
- All layout/appearance animations include **built-in easing** (can't customize)
|
||||||
|
|
||||||
|
## Design Principles
|
||||||
|
|
||||||
|
1. Motion should **reinforce understanding** of how something works
|
||||||
|
2. **Brief and precise** over prominent and elaborate
|
||||||
|
3. Let system handle standard interaction animations
|
||||||
|
4. Custom animation for **unique moments** only (reveals, transitions, celebrations)
|
||||||
|
5. Always respect Reduce Motion accessibility setting
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
# HIG: Typography
|
||||||
|
|
||||||
|
Source: [Apple HIG — Typography](https://developer.apple.com/design/human-interface-guidelines/typography)
|
||||||
|
|
||||||
|
## System Fonts
|
||||||
|
|
||||||
|
- **San Francisco (SF):** SF Pro, SF Compact, SF Mono, SF Arabic, SF Armenian, SF Georgian, SF Hebrew — plus Rounded variants
|
||||||
|
- **New York (NY):** Serif family, works well alongside SF
|
||||||
|
- Variable font format with dynamic optical sizes — no need to pick discrete optical sizes
|
||||||
|
|
||||||
|
## Default & Minimum Text Sizes
|
||||||
|
|
||||||
|
| Platform | Default | Minimum |
|
||||||
|
|----------|---------|---------|
|
||||||
|
| iOS, iPadOS | 17 pt | 11 pt |
|
||||||
|
| macOS | 13 pt | 10 pt |
|
||||||
|
| tvOS | 29 pt | 23 pt |
|
||||||
|
| visionOS | 17 pt | 12 pt |
|
||||||
|
| watchOS | 16 pt | 12 pt |
|
||||||
|
|
||||||
|
## Text Styles (iOS/iPadOS — Large/Default)
|
||||||
|
|
||||||
|
| Style | Weight | Size | Leading | Emphasized |
|
||||||
|
|-------|--------|------|---------|------------|
|
||||||
|
| Large Title | Regular | 34 pt | 41 pt | Bold |
|
||||||
|
| Title 1 | Regular | 28 pt | 34 pt | Bold |
|
||||||
|
| Title 2 | Regular | 22 pt | 28 pt | Bold |
|
||||||
|
| Title 3 | Regular | 20 pt | 25 pt | Semibold |
|
||||||
|
| Headline | Semibold | 17 pt | 22 pt | Semibold |
|
||||||
|
| Body | Regular | 17 pt | 22 pt | Semibold |
|
||||||
|
| Callout | Regular | 16 pt | 21 pt | Semibold |
|
||||||
|
| Subhead | Regular | 15 pt | 20 pt | Semibold |
|
||||||
|
| Footnote | Regular | 13 pt | 18 pt | Semibold |
|
||||||
|
| Caption 1 | Regular | 12 pt | 16 pt | Semibold |
|
||||||
|
| Caption 2 | Regular | 11 pt | 13 pt | Semibold |
|
||||||
|
|
||||||
|
## macOS Text Styles
|
||||||
|
|
||||||
|
| Style | Weight | Size | Line Height | Emphasized |
|
||||||
|
|-------|--------|------|-------------|------------|
|
||||||
|
| Large Title | Regular | 26 pt | 32 pt | Bold |
|
||||||
|
| Title 1 | Regular | 22 pt | 26 pt | Bold |
|
||||||
|
| Title 2 | Regular | 17 pt | 22 pt | Bold |
|
||||||
|
| Title 3 | Regular | 15 pt | 20 pt | Semibold |
|
||||||
|
| Headline | Bold | 13 pt | 16 pt | Heavy |
|
||||||
|
| Body | Regular | 13 pt | 16 pt | Semibold |
|
||||||
|
| Callout | Regular | 12 pt | 15 pt | Semibold |
|
||||||
|
| Subheadline | Regular | 11 pt | 14 pt | Semibold |
|
||||||
|
| Footnote | Regular | 10 pt | 13 pt | Semibold |
|
||||||
|
| Caption 1 | Regular | 10 pt | 13 pt | Medium |
|
||||||
|
| Caption 2 | Medium | 10 pt | 13 pt | Semibold |
|
||||||
|
|
||||||
|
## tvOS Text Styles
|
||||||
|
|
||||||
|
| Style | Weight | Size | Leading | Emphasized |
|
||||||
|
|-------|--------|------|---------|------------|
|
||||||
|
| Title 1 | Medium | 76 pt | 96 pt | Bold |
|
||||||
|
| Title 2 | Medium | 57 pt | 66 pt | Bold |
|
||||||
|
| Title 3 | Medium | 48 pt | 56 pt | Bold |
|
||||||
|
| Headline | Medium | 38 pt | 46 pt | Bold |
|
||||||
|
| Subtitle 1 | Regular | 38 pt | 46 pt | Medium |
|
||||||
|
| Callout | Medium | 31 pt | 38 pt | Bold |
|
||||||
|
| Body | Medium | 29 pt | 36 pt | Bold |
|
||||||
|
| Caption 1 | Medium | 25 pt | 32 pt | Bold |
|
||||||
|
| Caption 2 | Medium | 23 pt | 30 pt | Bold |
|
||||||
|
|
||||||
|
## Best Practices
|
||||||
|
|
||||||
|
- Avoid light font weights (Ultralight, Thin, Light) — prefer Regular, Medium, Semibold, Bold
|
||||||
|
- Minimize the number of typefaces — too many obscures hierarchy
|
||||||
|
- Use `bold()` in SwiftUI (not `fontWeight(.bold)`) so the system picks context-appropriate weight
|
||||||
|
- Use `Font.Design.default` for system font, `Font.Design.serif` for New York
|
||||||
|
- Don't embed system fonts — use the APIs
|
||||||
|
|
||||||
|
## Dynamic Type
|
||||||
|
|
||||||
|
- System-level feature in iOS, iPadOS, tvOS, visionOS, watchOS
|
||||||
|
- Text styles scale proportionately when people change text size
|
||||||
|
- Support Larger Accessibility Text Sizes (AX1-AX5 go up to 60pt body)
|
||||||
|
- Consider adjusting layout at large sizes (stack horizontally placed items vertically)
|
||||||
|
- Keep text truncation minimal — display as much useful text as possible
|
||||||
|
- Maintain consistent information hierarchy regardless of font size
|
||||||
|
- Use `isAccessibilityCategory` to detect when accessibility sizes are active
|
||||||
|
|
||||||
|
## Custom Fonts
|
||||||
|
|
||||||
|
- Always use `relativeTo:` with `.font(.custom())` to support Dynamic Type
|
||||||
|
- Use `@ScaledMetric` (iOS 18-) or `.font(.body.scaled(by:))` (iOS 26+) for custom sizing
|
||||||
|
- Implement accessibility features (Bold Text, Dynamic Type) for custom fonts
|
||||||
|
|
||||||
|
## visionOS Specifics
|
||||||
|
|
||||||
|
- Uses bolder body and title styles, plus Extra Large Title 1 and 2
|
||||||
|
- Prefer 2D text — 3D text is harder to read
|
||||||
|
- Use billboarding for text associated with spatial objects
|
||||||
|
- Maximize contrast between text and container background
|
||||||
|
|
||||||
|
## Tracking Values (SF Pro — Key Sizes)
|
||||||
|
|
||||||
|
| Size | Tracking (pt) |
|
||||||
|
|------|--------------|
|
||||||
|
| 11 pt | +0.06 |
|
||||||
|
| 12 pt | 0.0 |
|
||||||
|
| 13 pt | -0.08 |
|
||||||
|
| 17 pt (body) | -0.43 |
|
||||||
|
| 22 pt | -0.26 |
|
||||||
|
| 28 pt | +0.38 |
|
||||||
|
| 34 pt | +0.40 |
|
||||||
|
| 48 pt | +0.35 |
|
||||||
|
| 72 pt | +0.14 |
|
||||||
|
| 96 pt | 0.0 |
|
||||||
Reference in New Issue
Block a user