Four "non-phone/computer" platforms combined. Common trait: each is forced into unique tradeoffs by its device characteristics — wrist (second-level), living room (long distance), in-car (safety), games (immersion).
1. watchOS (Second-level Interactions on the Wrist)
4 Core Principles:
① Timely and relevant—— "What does the user need to see most right now?" (The Weather app opens to show the local day’s weather immediately) ② Brief and efficient—— "With only 10 seconds of attention, what comes first?" (iPhone News has multiple tabs; watch shows only 5 top headlines) ③ The Digital Crown is core—— Interactions tied to the Crown shape navigation ④ Consistent and predictable navigation.
▸ 3 Navigation Patterns(corresponding SwiftUI containers):
| Navigation | Container | Use case |
|---|---|---|
| Split View | NavigationSplitView | Information comparison + quick filtering (Weather/Stocks, shows details by default) |
| Tab View | TabView | Side-by-side multifunction modules (Fitness/Music, vertical paging + blur transitions) |
| Hierarchical Navigation | NavigationStack | Drill down by hierarchy (Settings/Reminders, large title → back button on child pages) |
· Also includes Source List(switches between similar entities in the top-left, e.g., World Clock cities, no title/close button needed) +Vertical paging(single page limited to one screen height). · Series 7 three principles: Enlarge components to use full space, build hierarchy with font and color, provide clear navigation for a sense of position. Large titles indent under the status bar when scrolling; buttons follow screen curvature; scroll views use rounded rectangle buttons, fixed views use bottom-pinned buttons. · Layout: Status bar adapts to rounded corners, clock shown on every screen; graphics extend to edges, text left-aligned; scroll clear zones ensure buttons are fully visible; best practice = single screen with no scrolling. · 4 levels of full-screen materials(ultra-thin / thin / regular / thick) + full-screen gradients (Fitness Activity ring colors) + vibrant fills + 4 text levels (primary / secondary / tertiary / quaternary) + dynamic navigation bar blur. Colors convey meaning (World Clock yellow for morning, blue for evening; Timer black → orange). · Smart Stack: Scroll to view multiple components; priority raised at 5 key moments (time approaching / arriving at location / headphones detected / waking/sleeping / starting/ending a workout); layouts (three lines of text / grouped color coding / bar charts / circular charts / large text / trend charts). · Complications: Suggested complications (appear 15 minutes before precipitation) / interactive complications (turn on lights) / Live Activities (synced with iPhone, single control, shows only state changes). · Always-On Display (AOD): Shows key information at low brightness when the screen is off, automatically switches to dark mode and lowers brightness, hides sensitive information (shows only sender name). · Secondary function controls: Sorting and filtering (modal sheets) / swipe actions (delete a city) / more buttons (85% white circle + black glow, visible on both dark and light backgrounds) / toolbar buttons (hidden under the navigation bar, e.g., compose button) / destructive actions require confirmation. · Full keyboard(Series 7): Borderless (encourages QuickPath sliding input), delete key moved to the text field.
2. tvOS (The Living Room at 8 Feet)
Design philosophy: Content first. 10 principles: Better browsing / Simplify interaction / Create hierarchy / Avoid overstimulation / Use arrows / Diversify UI / Remove barriers / Pace and speed / Show metadata / Use pagination.
· Eliminate entry barriers: Immersive top recommendations on the Top Shelf; trailers start playing silently (user chooses to turn on audio); content fills the screen to reduce interaction steps. · Simplify interactions: Reduce remote clicks and swipes to lower cognitive load; borrow familiar interactions. · Fast response + avoid excessive visual stimulation(analogy: "too many loud sounds make it hard to hear anything" → same applies visually; keep it simple and focused on the core). · Diversified presentation: Break grid layouts (different shapes and aspect ratios); insert visual rest points to reduce fatigue. · Metadata is secondary but important: Invoked by long press/tap (title/director); page dots + arrows provide sense of position and direction; localize by content quantity + handle plural forms. · Top Shelf: 5–10 items (too many adds noise); full-screen images at 1920×1080; preview videos 2–5 minutes (audio plays only on user action); swipe up for full screen with UI auto-hidden.
3. CarPlay (Next-Generation Design System, Safety First)
· Modular layout system: Each gauge is an independent modular component, resizable to fit hardware; combine different gauges to create multiple layouts (adventure off-road scenery + technical linear gauges); adapt to various screen shapes (linear gauges suit both wide and narrow driving screens). · Deep brand customization: Integrate vehicle brand + Apple brand;SF variable fonts(continuously adjustable weight/width/corner softness); customizable instrument clusters (from traditional analog needles to modern styles, arcs/ticks/color gradients all customizable); adapt to any drivetrain (fuel/electric/hybrid speedometers and fuel/battery gauges). · Dynamic content area: Reserves space regardless of layout to show maps/Now Playing/vehicle information; browsable via steering wheel controls; also the default position for notification pop-ups; can overlay full-screen gauges for an immersive experience. · View area + safe area: Defines the boundaries where CarPlay draws UI; non-rectangular screens use the smallest enclosing rectangle + largest safe-area rectangle; automatically adjusts spacing when system widgets are present; status bar always visible (vertical on driver side or horizontal at bottom);Appearance automatically adjusts based on time of day/vehicle conditions/user settings(Maps can set appearance separately to keep navigation consistent).
4. Game Design (10 Key Principles)
▸ Core Loop:行动 Action → 奖励 Reward → 扩展 Expansion(RPG: combat → treasure/XP → level up; platformer: run/jump → clear level → unlock). Paired with interaction/expansion/progression mechanics. Design: focus on audience, easy to understand, smooth stage transitions, meaningful iteration every time, question assumptions, don’t be limited by tradition (Threes innovated the merge mechanic).
| Principle | Key points |
|---|---|
| Be a Good Teacher | Teach through play (Cut the Rope first level is direct manipulation), demonstrate core mechanics, introduce concepts gradually, contextualize prompts, provide ongoing help |
| Remove Friction | Reduce load times (segmented/deferred/asynchronous loading, move off main thread), don’t block with background updates, simplify sign-up (skip / automatic account via Vendor ID / defer until necessary), allow skipping tutorials, don’t force early decisions, delay rating requests |
| Tune the core loop | See above |
| Design for Touch | Don’t port virtual buttons/D-Pad;Touch→See→Hear→Feel perception loop(direct interaction + instant audiovisual feedback); examples: Monument Valley / Threes / Infinity Blade / Cut the Rope |
| Foster Engagement | Encourage retries ("try again / see what’s next / see the ending"), multi-layer progression systems, value in both free and paid experiences, fresh content (story/levels/seasonal), plan updates ahead; look at retention heatmaps |
| Background transfers | Include the first 15 minutes of content initially, download the rest via NSURLSession in the background; handle disk space / early boundary arrival |
| Optimize graphics performance | Reduce draw calls (batching), process more triangles per call; SpriteKit/SceneKit/Metal; GPU frame debugger |
| Introductory videos | First impression on the App Store; ≤30 seconds showing real gameplay, not advertising; make separate versions for iPhone/iPad |
| Localization | Prioritize EFIGS (English/French/Italian/German/Spanish) + Japanese/Korean/Simplified/Traditional Chinese; translate assets + UI + cultural adaptation |
| Target Cutting-Edge Technology / Go to Eleven | Use the latest hardware and software; pursue excellence beyond the ordinary |
· Game input: Virtual joysticks replace physical joysticks + hide unused controls; direct touch camera control;Place high-frequency controls around the thumbs, infrequently used controls at the top; dynamic symbols + pressed states + audiovisual and haptic feedback; stay within the safe area. · Adaptive layout: Don’t scale the entire UI proportionally (inaccurate positioning); split into independent parts anchored to specific positions; consider safe areas to avoid occlusion by rounded corners/cameras/Dynamic Island; test on multiple device models. · Tips: First screen matches game style; primary action buttons prominent; tap targets ≥44×44pt; progressive disclosure of tutorials (save economy systems for later); support Dynamic Type / left- and right-handed use / color-blind modes.
▸ Apple Games app + Game Center(attract/retain players)
Set primary/secondary category to "Games" → get a dedicated page (icon/name/subtitle, system automatically assigns background color, shows age rating + subcategory small icons + controller icon).4 Game Center features: · Achievements: Record progress, encourage exploration, share with friends · Leaderboards: Social comparison + high score refresh, periodic resets with reset time shown · Challenges: Invite friends to compete, view scores in real time,time-limited(creates urgency), rematchable · Activities: Deep links take players to specific in-game locations (leaderboards/challenges/unlocks), suitable for discovering multiplayer, party codes support cross-platform invites · In-App Events: Time-limited updates/holiday themes/promotions (create "don’t miss out" urgency), event cards shown on Home + Library + search results; announce 2 weeks in advance ("Coming Soon" can set reminders); deep links with parameters to track sources (
event=lobsterbash) to win back lapsed players.
Sourced from WatchOS (13) + TV OS (1) + CarPlay (3) + Games (11), totaling 28 articles. Component-level usage (watch faces/complications/Top Shelf see the Component Guide)Apple HIG Component Decision Guide (63 components · when to use which); for an introduction to cross-platform game design see Apple Design Guidelines Overview + Full Library Reverse Lookup Map (HIG Navigation Core) §Getting Started.