Anthony Cardinale
34bd90e30d
Combines frontend-design aesthetics with swiftui-pro correctness, grounded in Apple's Human Interface Guidelines (134 articles). Includes curated HIG reference files for typography, color, layout, materials, motion, icons, and components, plus full HIG JSON data for deep lookups. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
46 lines
1.9 KiB
Markdown
46 lines
1.9 KiB
Markdown
# 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
|