diff --git a/CATALOG.md b/CATALOG.md index d347c909..c3fb2e88 100644 --- a/CATALOG.md +++ b/CATALOG.md @@ -2,9 +2,9 @@ Generated at: 2026-02-08T00:00:00.000Z -Total skills: 868 +Total skills: 882 -## architecture (68) +## architecture (73) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -46,6 +46,11 @@ Total skills: 868 | `game-development/multiplayer` | Multiplayer game development principles. Architecture, networking, synchronization. | game, development/multiplayer | game, development/multiplayer, multiplayer, development, principles, architecture, networking, synchronization | | `godot-gdscript-patterns` | Master Godot 4 GDScript patterns including signals, scenes, state machines, and optimization. Use when building Godot games, implementing game systems, or le... | godot, gdscript | godot, gdscript, including, signals, scenes, state, machines, optimization, building, games, implementing, game | | `haskell-pro` | Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programm... | haskell | haskell, pro, engineer, specializing, type, pure, functional, high, reliability, software, proactively, level | +| `hig-components-dialogs` | Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views. Use this skill when the user says "s... | hig, components, dialogs | hig, components, dialogs, apple, guidance, presentation, including, alerts, action, sheets, popovers, digit | +| `hig-components-layout` | Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about "sidebar", "split view", "tab bar", "tab view"... | hig, components, layout | hig, components, layout, apple, human, interface, guidelines, navigation, skill, user, asks, about | +| `hig-components-search` | Apple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says "how should... | hig, components, search | hig, components, search, apple, guidance, navigation, related, including, fields, page, controls, path | +| `hig-components-system` | Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch face... | hig, components | hig, components, apple, guidance, experience, widgets, live, activities, notifications, complications, home, screen | +| `hig-inputs` | Apple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, eye tracking, fo... | hig, inputs | hig, inputs, apple, guidance, input, methods, interaction, gestures, pencil, keyboards, game, controllers | | `i18n-localization` | Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support. | i18n, localization | i18n, localization, internationalization, detecting, hardcoded, strings, managing, translations, locale, files, rtl | | `inngest` | Inngest expert for serverless-first background jobs, event-driven workflows, and durable execution without managing queues or workers. Use when: inngest, ser... | inngest | inngest, serverless, first, background, jobs, event, driven, durable, execution, without, managing, queues | | `julia-pro` | Master Julia 1.10+ with modern features, performance optimization, multiple dispatch, and production-ready practices. Expert in the Julia ecosystem including... | julia | julia, pro, 10, features, performance, optimization, multiple, dispatch, ecosystem, including, package, scientific | @@ -120,7 +125,7 @@ Total skills: 868 | `team-composition-analysis` | This skill should be used when the user asks to "plan team structure", "determine hiring needs", "design org chart", "calculate compensation", "plan equity a... | team, composition | team, composition, analysis, skill, should, used, user, asks, plan, structure, determine, hiring | | `whatsapp-automation` | Automate WhatsApp Business tasks via Rube MCP (Composio): send messages, manage templates, upload media, and handle contacts. Always search tools first for c... | whatsapp | whatsapp, automation, automate, business, tasks, via, rube, mcp, composio, send, messages, upload | -## data-ai (159) +## data-ai (162) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -247,6 +252,9 @@ Triggers: "data lake", "Da... | azure, storage, file, datalake, py | azure, stor | `google-analytics-automation` | Automate Google Analytics tasks via Rube MCP (Composio): run reports, list accounts/properties, funnels, pivots, key events. Always search tools first for cu... | google, analytics | google, analytics, automation, automate, tasks, via, rube, mcp, composio, run, reports, list | | `googlesheets-automation` | Automate Google Sheets operations (read, write, format, filter, manage spreadsheets) via Rube MCP (Composio). Read/write data, manage tabs, apply formatting,... | googlesheets | googlesheets, automation, automate, google, sheets, operations, read, write, format, filter, spreadsheets, via | | `graphql` | GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful al... | graphql | graphql, gives, clients, exactly, data, no, less, one, endpoint, typed, schema, introspection | +| `hig-components-content` | Apple Human Interface Guidelines for content display components. Use this skill when the user asks about "charts component", "collection view", "image view",... | hig, components, content | hig, components, content, apple, human, interface, guidelines, display, skill, user, asks, about | +| `hig-components-status` | Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "pr... | hig, components, status | hig, components, status, apple, guidance, progress, ui, including, indicators, bars, activity, rings | +| `hig-patterns` | Apple Human Interface Guidelines interaction and UX patterns. Use this skill when the user asks about "onboarding flow", "user onboarding", "app launch", "lo... | hig | hig, apple, human, interface, guidelines, interaction, ux, skill, user, asks, about, onboarding | | `hosted-agents-v2-py` | Build hosted agents using Azure AI Projects SDK with ImageBasedHostedAgentDefinition. Use when creating container-based agents that run custom code in Azure ... | hosted, agents, v2, py | hosted, agents, v2, py, azure, ai, sdk, imagebasedhostedagentdefinition, creating, container, run, custom | | `hybrid-search-implementation` | Combine vector and keyword search for improved retrieval. Use when implementing RAG systems, building search engines, or when neither approach alone provides... | hybrid, search | hybrid, search, combine, vector, keyword, improved, retrieval, implementing, rag, building, engines, neither | @@ -304,7 +312,7 @@ Use when creating container-based agents that run custom code in Azure ... | hos | `xlsx-official` | Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work ... | xlsx, official | xlsx, official, spreadsheet, creation, editing, analysis, formulas, formatting, data, visualization, claude, work | | `youtube-automation` | Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools firs... | youtube | youtube, automation, automate, tasks, via, rube, mcp, composio, upload, videos, playlists, search | -## development (132) +## development (133) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -401,6 +409,7 @@ Triggers: "queue storage", "QueueServic... | azure, storage, queue, py | azure, | `go-playwright` | Expert capability for robust, stealthy, and efficient browser automation using Playwright Go. | go, playwright | go, playwright, capability, robust, stealthy, efficient, browser, automation | | `go-rod-master` | Comprehensive guide for browser automation and web scraping with go-rod (Chrome DevTools Protocol) including stealth anti-bot-detection patterns. | go, rod, master | go, rod, master, browser, automation, web, scraping, chrome, devtools, protocol, including, stealth | | `golang-pro` | Master Go 1.21+ with modern patterns, advanced concurrency, performance optimization, and production-ready microservices. Expert in the latest Go ecosystem i... | golang | golang, pro, go, 21, concurrency, performance, optimization, microservices, latest, ecosystem, including, generics | +| `hig-platforms` | Apple Human Interface Guidelines for platform-specific design. Use this skill when the user asks about "designing for iOS", "iPad app design", "macOS design"... | hig, platforms | hig, platforms, apple, human, interface, guidelines, platform, specific, skill, user, asks, about | | `hubspot-integration` | Expert patterns for HubSpot CRM integration including OAuth authentication, CRM objects, associations, batch operations, webhooks, and custom objects. Covers... | hubspot, integration | hubspot, integration, crm, including, oauth, authentication, objects, associations, batch, operations, webhooks, custom | | `javascript-mastery` | Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced pa... | javascript, mastery | javascript, mastery, reference, covering, 33, essential, concepts, every, developer, should, know, fundamentals | | `javascript-pro` | Master modern JavaScript with ES6+, async patterns, and Node.js APIs. Handles promises, event loops, and browser/Node compatibility. Use PROACTIVELY for Java... | javascript | javascript, pro, es6, async, node, js, apis, promises, event, loops, browser, compatibility | @@ -459,7 +468,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify, | `webapp-testing` | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing... | webapp | webapp, testing, toolkit, interacting, local, web, applications, playwright, supports, verifying, frontend, functionality | | `zustand-store-ts` | Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creati... | zustand, store, ts | zustand, store, ts, stores, typescript, subscribewithselector, middleware, proper, state, action, separation, building | -## general (135) +## general (138) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -538,6 +547,9 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify, | `git-pr-workflows-onboard` | You are an **expert onboarding specialist and knowledge transfer architect** with deep experience in remote-first organizations, technical team integration, ... | git, pr, onboard | git, pr, onboard, onboarding, knowledge, transfer, architect, deep, experience, remote, first, organizations | | `git-pr-workflows-pr-enhance` | You are a PR optimization expert specializing in creating high-quality pull requests that facilitate efficient code reviews. Generate comprehensive PR descri... | git, pr, enhance | git, pr, enhance, optimization, specializing, creating, high, quality, pull, requests, facilitate, efficient | | `github-issue-creator` | Convert raw notes, error logs, voice dictation, or screenshots into crisp GitHub-flavored markdown issue reports. Use when the user pastes bug info, error me... | github, issue, creator | github, issue, creator, convert, raw, notes, error, logs, voice, dictation, screenshots, crisp | +| `hig-components-controls` | Apple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, ... | hig, components, controls | hig, components, controls, apple, guidance, selection, input, including, pickers, toggles, sliders, steppers | +| `hig-components-menus` | Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up butt... | hig, components, menus | hig, components, menus, apple, guidance, menu, button, including, context, dock, edit, bar | +| `hig-project-context` | Create or update a shared Apple design context document that other HIG skills use to tailor guidance. Use when the user says "set up my project context," "wh... | hig | hig, context, update, shared, apple, document, other, skills, tailor, guidance, user, says | | `imagen` | | imagen | imagen | | `infinite-gratitude` | Multi-agent research skill for parallel research execution (10 agents, battle-tested with real case studies). | infinite, gratitude | infinite, gratitude, multi, agent, research, skill, parallel, execution, 10, agents, battle, tested | | `interactive-portfolio` | Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, d... | interactive, portfolio | interactive, portfolio, building, portfolios, actually, land, jobs, clients, just, showing, work, creating | @@ -599,7 +611,7 @@ TRIGGER: "shopify", "shopify app", "checkout extension",... | shopify | shopify, | `x-article-publisher-skill` | Publish articles to X/Twitter | x, article, publisher, skill | x, article, publisher, skill, publish, articles, twitter | | `youtube-summarizer` | Extract transcripts from YouTube videos and generate comprehensive, detailed summaries using intelligent analysis frameworks | video, summarization, transcription, youtube, content-analysis | video, summarization, transcription, youtube, content-analysis, summarizer, extract, transcripts, videos, generate, detailed, summaries | -## infrastructure (102) +## infrastructure (103) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -674,6 +686,7 @@ Triggers: "azure-storage-file-share", "Share... | azure, storage, file, share, p | `gitops-workflow` | Implement GitOps workflows with ArgoCD and Flux for automated, declarative Kubernetes deployments with continuous reconciliation. Use when implementing GitOp... | gitops | gitops, argocd, flux, automated, declarative, kubernetes, deployments, continuous, reconciliation, implementing, automating, setting | | `grafana-dashboards` | Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visua... | grafana, dashboards | grafana, dashboards, real, time, visualization, application, metrics, building, monitoring, visualizing, creating, operational | | `helm-chart-scaffolding` | Design, organize, and manage Helm charts for templating and packaging Kubernetes applications with reusable configurations. Use when creating Helm charts, pa... | helm, chart | helm, chart, scaffolding, organize, charts, templating, packaging, kubernetes, applications, reusable, configurations, creating | +| `hig-technologies` | Apple HIG guidance for Apple technology integrations: Siri, Apple Pay, HealthKit, HomeKit, ARKit, machine learning, generative AI, iCloud, Sign in with Apple... | hig, technologies | hig, technologies, apple, guidance, technology, integrations, siri, pay, healthkit, homekit, arkit, machine | | `hugging-face-cli` | Execute Hugging Face Hub operations using the `hf` CLI. Use when the user needs to download models/datasets/spaces, upload files to Hub repositories, create ... | hugging, face, cli | hugging, face, cli, execute, hub, operations, hf, user, download, models, datasets, spaces | | `hybrid-cloud-networking` | Configure secure, high-performance connectivity between on-premises infrastructure and cloud platforms using VPN and dedicated connections. Use when building... | hybrid, cloud, networking | hybrid, cloud, networking, configure, secure, high, performance, connectivity, between, premises, infrastructure, platforms | | `istio-traffic-management` | Configure Istio traffic management including routing, load balancing, circuit breakers, and canary deployments. Use when implementing service mesh traffic po... | istio, traffic | istio, traffic, configure, including, routing, load, balancing, circuit, breakers, canary, deployments, implementing | @@ -713,7 +726,7 @@ Triggers: "azure-storage-file-share", "Share... | azure, storage, file, share, p | `wireshark-analysis` | This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow... | wireshark | wireshark, network, traffic, analysis, skill, should, used, user, asks, analyze, capture, packets | | `workflow-automation` | Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost... | | automation, infrastructure, makes, ai, agents, reliable, without, durable, execution, network, hiccup, during | -## security (129) +## security (130) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -771,6 +784,7 @@ Triggers: "keyvault secrets rust", "SecretClient rust"... | azure, keyvault, sec | `frontend-security-coder` | Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns. Use PROACTIVELY for fronte... | frontend, security, coder | frontend, security, coder, secure, coding, specializing, xss, prevention, output, sanitization, client, side | | `gdpr-data-handling` | Implement GDPR-compliant data handling with consent management, data subject rights, and privacy by design. Use when building systems that process EU persona... | gdpr, data, handling | gdpr, data, handling, compliant, consent, subject, rights, privacy, building, process, eu, personal | | `graphql-architect` | Master modern GraphQL with federation, performance optimization, and enterprise security. Build scalable schemas, implement advanced caching, and design real... | graphql | graphql, architect, federation, performance, optimization, enterprise, security, scalable, schemas, caching, real, time | +| `hig-foundations` | Apple Human Interface Guidelines design foundations. Use this skill when the user asks about "HIG color", "Apple typography", "SF Symbols", "dark mode guidel... | hig, foundations | hig, foundations, apple, human, interface, guidelines, skill, user, asks, about, color, typography | | `html-injection-testing` | This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applic... | html, injection | html, injection, testing, skill, should, used, user, asks, test, inject, web, pages | | `hugging-face-jobs` | This skill should be used when users want to run any workload on Hugging Face Jobs infrastructure. Covers UV scripts, Docker-based jobs, hardware selection, ... | hugging, face, jobs | hugging, face, jobs, skill, should, used, users, want, run, any, workload, infrastructure | | `hybrid-cloud-architect` | Expert hybrid cloud architect specializing in complex multi-cloud solutions across AWS/Azure/GCP and private clouds (OpenStack/VMware). Masters hybrid connec... | hybrid, cloud | hybrid, cloud, architect, specializing, complex, multi, solutions, aws, azure, gcp, private, clouds | diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e254ea5..8d3f6658 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- +## [5.9.0] - 2026-02-20 - "Apple HIG & Quality Bar" + +> **Extensive Apple design guidelines and strict validation for the entire registry.** + +This release adds the official Apple Human Interface Guidelines skills suite, and enforces strict agentskills-ref metadata validation across all 882+ skills. + +### 🚀 New Skills + +- **Apple HIG Skills Suite** (14 skills): Comprehensive platform and UX guidelines for iOS, macOS, visionOS, watchOS, and tvOS. Pattern, components, and layout references. + +### 📦 Improvements + +- **Quality Bar Enforcement**: Integrated strict validation rules. The entire registry (896 skills) has been audited and retrofitted to enforce strict folder-to-name matching and concise (<200 char) descriptions. +- **Contributor Documentation**: Updated `CONTRIBUTING.md` with explicit rules for the 5-Point Quality Check based on agentskills-ref. + +### 👥 Credits + +A huge shoutout to our community contributors: + +- **@raintree-technology** for the Apple HIG Skills (Issue #90) +- **@sergeyklay** for the skill quality validations (Issue #97) + +--- + ## [5.8.0] - 2026-02-19 - "Domain-Driven Design Suite" > **First full DDD skill suite: strategic design, context mapping, and tactical patterns for complex domains.** diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 261c3af0..77022dd8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,6 +10,8 @@ With V4, we raised the bar for quality. Please read the **new Quality Standards* **Critical for new skills:** Every skill submitted must pass our **5-Point Quality Check** (see `docs/QUALITY_BAR.md` for details): 1. **Metadata**: Correct Frontmatter (`name`, `description`). + - The `name` MUST exactly match the folder name. + - The `description` MUST be concise (under 200 characters) and focus on WHEN to trigger the skill. 2. **Safety**: No harmful commands without "Risk" labels. 3. **Clarity**: Clear "When to use" section. 4. **Examples**: At least one copy-paste usage example. diff --git a/README.md b/README.md index 3fec50fd..e72fedf6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# 🌌 Antigravity Awesome Skills: 868+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More +# 🌌 Antigravity Awesome Skills: 882+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More -> **The Ultimate Collection of 868+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL** +> **The Ultimate Collection of 882+ Universal Agentic Skills for AI Coding Assistants — Claude Code, Gemini CLI, Codex CLI, Antigravity IDE, GitHub Copilot, Cursor, OpenCode, AdaL** [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Claude Code](https://img.shields.io/badge/Claude%20Code-Anthropic-purple)](https://claude.ai) @@ -16,7 +16,7 @@ If this project helps you, you can [support it here](https://buymeacoffee.com/sickn33) or simply ⭐ the repo. -**Antigravity Awesome Skills** is a curated, battle-tested library of **868 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants: +**Antigravity Awesome Skills** is a curated, battle-tested library of **882 high-performance agentic skills** designed to work seamlessly across all major AI coding assistants: - 🟣 **Claude Code** (Anthropic CLI) - 🔵 **Gemini CLI** (Google DeepMind) @@ -39,7 +39,7 @@ This repository provides essential skills to transform your AI assistant into a - [🎁 Curated Collections (Bundles)](#curated-collections) - [🧭 Antigravity Workflows](#antigravity-workflows) - [📦 Features & Categories](#features--categories) -- [📚 Browse 868+ Skills](#browse-868-skills) +- [📚 Browse 882+ Skills](#browse-882-skills) - [🤝 How to Contribute](#how-to-contribute) - [🤝 Community](#community) - [☕ Support the Project](#support-the-project) @@ -292,7 +292,7 @@ The repository is organized into specialized domains to transform your AI into a Counts change as new skills are added. For the current full registry, see [CATALOG.md](CATALOG.md). -## Browse 868+ Skills +## Browse 882+ Skills We have moved the full skill registry to a dedicated catalog to keep this README clean. diff --git a/data/bundles.json b/data/bundles.json index 7722b6e1..c23d98a5 100644 --- a/data/bundles.json +++ b/data/bundles.json @@ -154,6 +154,7 @@ "go-rod-master", "golang-pro", "graphql", + "hig-platforms", "hubspot-integration", "hugging-face-jobs", "ios-developer", @@ -288,6 +289,7 @@ "frontend-security-coder", "gdpr-data-handling", "graphql-architect", + "hig-foundations", "hugging-face-jobs", "hybrid-cloud-architect", "idor-testing", @@ -370,6 +372,7 @@ "freshservice-automation", "gitops-workflow", "helm-chart-scaffolding", + "hig-technologies", "istio-traffic-management", "k8s-manifest-generator", "k8s-security-policies", @@ -450,6 +453,9 @@ "google-analytics-automation", "googlesheets-automation", "graphql", + "hig-components-content", + "hig-components-status", + "hig-patterns", "hugging-face-jobs", "hybrid-cloud-networking", "idor-testing", diff --git a/data/catalog.json b/data/catalog.json index 02bfe86d..3f0a511d 100644 --- a/data/catalog.json +++ b/data/catalog.json @@ -1,6 +1,6 @@ { "generatedAt": "2026-02-08T00:00:00.000Z", - "total": 868, + "total": 882, "skills": [ { "id": "3d-web-experience", @@ -11577,6 +11577,361 @@ ], "path": "skills/helpdesk-automation/SKILL.md" }, + { + "id": "hig-components-content", + "name": "hig-components-content", + "description": "Apple Human Interface Guidelines for content display components. Use this skill when the user asks about \"charts component\", \"collection view\", \"image view\", \"web view\", \"color well\", \"image well\", \"activity view\", \"lockup\", \"data visualization\", \"content display\", displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says \"how should I display charts\", \"what's the best way to show images\", \"should I use a web view\", \"how do I build a grid of items\", \"what component shows media\", or \"how do I present a share sheet\". Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.", + "category": "data-ai", + "tags": [ + "hig", + "components", + "content" + ], + "triggers": [ + "hig", + "components", + "content", + "apple", + "human", + "interface", + "guidelines", + "display", + "skill", + "user", + "asks", + "about" + ], + "path": "skills/hig-components-content/SKILL.md" + }, + { + "id": "hig-components-controls", + "name": "hig-components-controls", + "description": "Apple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, labels, token fields, virtual keyboards, rating indicators, and gauges. Use this skill when the user says \"picker or segmented control,\" \"how should my form look,\" \"what keyboard type should I use,\" \"toggle vs checkbox,\" or asks about picker design, toggle, switch, slider, stepper, text field, text input, segmented control, combo box, label, token field, virtual keyboard, rating indicator, gauge, form design, input validation, or control state management. Cross-references: hig-components-menus, hig-components-dialogs, hig-components-search.", + "category": "general", + "tags": [ + "hig", + "components", + "controls" + ], + "triggers": [ + "hig", + "components", + "controls", + "apple", + "guidance", + "selection", + "input", + "including", + "pickers", + "toggles", + "sliders", + "steppers" + ], + "path": "skills/hig-components-controls/SKILL.md" + }, + { + "id": "hig-components-dialogs", + "name": "hig-components-dialogs", + "description": "Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views. Use this skill when the user says \"should I use an alert or a sheet,\" \"how do I show a confirmation dialog,\" \"when should I use a popover,\" \"my modals are annoying users,\" or asks about alert design, action sheet, popover, sheet, modal, dialog, digit entry, confirmation dialog, warning dialog, modal presentation, non-modal content, destructive action confirmation, or overlay UI patterns. Cross-references: hig-components-menus, hig-components-controls, hig-components-search, hig-patterns.", + "category": "architecture", + "tags": [ + "hig", + "components", + "dialogs" + ], + "triggers": [ + "hig", + "components", + "dialogs", + "apple", + "guidance", + "presentation", + "including", + "alerts", + "action", + "sheets", + "popovers", + "digit" + ], + "path": "skills/hig-components-dialogs/SKILL.md" + }, + { + "id": "hig-components-layout", + "name": "hig-components-layout", + "description": "Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about \"sidebar\", \"split view\", \"tab bar\", \"tab view\", \"scroll view\", \"window design\", \"panel\", \"list view\", \"table view\", \"column view\", \"outline view\", \"navigation structure\", \"app layout\", \"boxes\", \"ornaments\", or organizing content hierarchically in Apple apps. Also use when the user says \"how should I organize my app\", \"what navigation pattern should I use\", \"my layout breaks on iPad\", \"how do I build a sidebar\", \"should I use tabs or a sidebar\", or \"my app doesn't adapt to different screen sizes\". Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.", + "category": "architecture", + "tags": [ + "hig", + "components", + "layout" + ], + "triggers": [ + "hig", + "components", + "layout", + "apple", + "human", + "interface", + "guidelines", + "navigation", + "skill", + "user", + "asks", + "about" + ], + "path": "skills/hig-components-layout/SKILL.md" + }, + { + "id": "hig-components-menus", + "name": "hig-components-menus", + "description": "Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure controls, and standard buttons. Use this skill when the user says \"how should my buttons look,\" \"what goes in the menu bar,\" \"should I use a context menu or action sheet,\" \"how do I design a toolbar,\" or asks about button design, menu design, context menu, toolbar, menu bar, action button, pop-up button, pull-down button, disclosure control, dock menu, edit menu, or any menu/button component layout and behavior. Cross-references: hig-components-search, hig-components-controls, hig-components-dialogs.", + "category": "general", + "tags": [ + "hig", + "components", + "menus" + ], + "triggers": [ + "hig", + "components", + "menus", + "apple", + "guidance", + "menu", + "button", + "including", + "context", + "dock", + "edit", + "bar" + ], + "path": "skills/hig-components-menus/SKILL.md" + }, + { + "id": "hig-components-search", + "name": "hig-components-search", + "description": "Apple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says \"how should search work in my app,\" \"I need a breadcrumb,\" \"how do I paginate content,\" or asks about search field, search bar, page control, path control, breadcrumb, navigation component, search UX, search suggestions, search scopes, paginated content navigation, or file path hierarchy display. Cross-references: hig-components-menus, hig-components-controls, hig-components-dialogs, hig-patterns.", + "category": "architecture", + "tags": [ + "hig", + "components", + "search" + ], + "triggers": [ + "hig", + "components", + "search", + "apple", + "guidance", + "navigation", + "related", + "including", + "fields", + "page", + "controls", + "path" + ], + "path": "skills/hig-components-search/SKILL.md" + }, + { + "id": "hig-components-status", + "name": "hig-components-status", + "description": "Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: \"progress indicator\", \"progress bar\", \"loading spinner\", \"status bar\", \"activity ring\", \"progress display\", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says \"how do I show loading state,\" \"should I use a spinner or progress bar,\" \"what goes in the status bar,\" or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.", + "category": "data-ai", + "tags": [ + "hig", + "components", + "status" + ], + "triggers": [ + "hig", + "components", + "status", + "apple", + "guidance", + "progress", + "ui", + "including", + "indicators", + "bars", + "activity", + "rings" + ], + "path": "skills/hig-components-status/SKILL.md" + }, + { + "id": "hig-components-system", + "name": "hig-components-system", + "description": "Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts. Use when asked about: \"widget design\", \"live activity\", \"notification design\", \"complication\", \"home screen quick action\", \"top shelf\", \"watch face\", \"app clip\", \"app shortcut\", \"system experience\". Also use when the user says \"how do I design a widget,\" \"what should my notification look like,\" \"how do Live Activities work,\" \"should I make an App Clip,\" or asks about surfaces outside the main app. Cross-references: hig-components-status for progress in widgets, hig-inputs for interaction patterns, hig-technologies for Siri and system integration.", + "category": "architecture", + "tags": [ + "hig", + "components" + ], + "triggers": [ + "hig", + "components", + "apple", + "guidance", + "experience", + "widgets", + "live", + "activities", + "notifications", + "complications", + "home", + "screen" + ], + "path": "skills/hig-components-system/SKILL.md" + }, + { + "id": "hig-foundations", + "name": "hig-foundations", + "description": "Apple Human Interface Guidelines design foundations. Use this skill when the user asks about \"HIG color\", \"Apple typography\", \"SF Symbols\", \"dark mode guidelines\", \"accessible design\", \"Apple design foundations\", \"app icon\", \"layout guidelines\", \"materials\", \"motion\", \"privacy\", \"right to left\", \"RTL\", \"inclusive design\", branding, images, spatial layout, or writing style. Also use when the user says \"my colors look wrong in dark mode\", \"what font should I use\", \"is my app accessible enough\", \"how do I support Dynamic Type\", \"what contrast ratio do I need\", \"how do I pick system colors\", or \"my icons don't match the system style\". Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction patterns, hig-components-layout for structural components, hig-components-content for display.", + "category": "security", + "tags": [ + "hig", + "foundations" + ], + "triggers": [ + "hig", + "foundations", + "apple", + "human", + "interface", + "guidelines", + "skill", + "user", + "asks", + "about", + "color", + "typography" + ], + "path": "skills/hig-foundations/SKILL.md" + }, + { + "id": "hig-inputs", + "name": "hig-inputs", + "description": "Apple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, eye tracking, focus system, remotes, spatial interactions, gyroscope, accelerometer, and nearby interactions. Use when asked about: \"gesture design\", \"Apple Pencil\", \"keyboard shortcuts\", \"game controller\", \"pointer support\", \"mouse support\", \"trackpad\", \"Digital Crown\", \"eye tracking\", \"visionOS input\", \"focus system\", \"remote control\", \"gyroscope\", \"spatial interaction\". Also use when the user says \"what gestures should I support,\" \"how do I add keyboard shortcuts,\" \"how does input work on Apple TV,\" \"should I support Apple Pencil,\" or asks about input device handling. Cross-references: hig-components-status, hig-components-system, hig-technologies for VoiceOver and Siri.", + "category": "architecture", + "tags": [ + "hig", + "inputs" + ], + "triggers": [ + "hig", + "inputs", + "apple", + "guidance", + "input", + "methods", + "interaction", + "gestures", + "pencil", + "keyboards", + "game", + "controllers" + ], + "path": "skills/hig-inputs/SKILL.md" + }, + { + "id": "hig-patterns", + "name": "hig-patterns", + "description": "Apple Human Interface Guidelines interaction and UX patterns. Use this skill when the user asks about \"onboarding flow\", \"user onboarding\", \"app launch\", \"loading state\", \"drag and drop\", \"search pattern\", \"settings design\", \"notifications\", \"modality\", \"multitasking\", \"feedback pattern\", \"haptics\", \"undo redo\", \"file management\", data entry, sharing, collaboration, full screen, audio, video, haptic feedback, ratings, printing, help, or account management in Apple apps. Also use when the user says \"how should onboarding work\", \"my app takes too long to load\", \"should I use a modal here\", \"how do I handle errors\", \"when should I ask for permissions\", \"how to show progress\", or \"what's the right way to confirm a delete\". Cross-references: hig-foundations for underlying principles, hig-platforms for platform specifics, hig-components-layout for navigation, hig-components-content for data display.", + "category": "data-ai", + "tags": [ + "hig" + ], + "triggers": [ + "hig", + "apple", + "human", + "interface", + "guidelines", + "interaction", + "ux", + "skill", + "user", + "asks", + "about", + "onboarding" + ], + "path": "skills/hig-patterns/SKILL.md" + }, + { + "id": "hig-platforms", + "name": "hig-platforms", + "description": "Apple Human Interface Guidelines for platform-specific design. Use this skill when the user asks about \"designing for iOS\", \"iPad app design\", \"macOS design\", \"tvOS\", \"visionOS\", \"watchOS\", \"Apple platform\", \"which platform\", platform differences, platform-specific conventions, or multi-platform app design. Also use when the user says \"should I design differently for iPad vs iPhone\", \"how does my app work on visionOS\", \"what's different about macOS apps\", \"porting my app to another platform\", \"universal app design\", or \"what input methods does this platform use\". Cross-references: hig-foundations for shared design foundations, hig-patterns for interaction patterns, hig-components-layout for navigation structures, hig-components-content for content display.", + "category": "development", + "tags": [ + "hig", + "platforms" + ], + "triggers": [ + "hig", + "platforms", + "apple", + "human", + "interface", + "guidelines", + "platform", + "specific", + "skill", + "user", + "asks", + "about" + ], + "path": "skills/hig-platforms/SKILL.md" + }, + { + "id": "hig-project-context", + "name": "hig-project-context", + "description": "Create or update a shared Apple design context document that other HIG skills use to tailor guidance. Use when the user says \"set up my project context,\" \"what platforms am I targeting,\" \"configure HIG settings,\" or when starting a new Apple platform project. Also activates when other HIG skills need project context but none exists yet. This skill creates .claude/apple-design-context.md so that hig-foundations, hig-platforms, hig-components-*, hig-inputs, and hig-technologies can provide targeted advice without repetitive questions.", + "category": "general", + "tags": [ + "hig" + ], + "triggers": [ + "hig", + "context", + "update", + "shared", + "apple", + "document", + "other", + "skills", + "tailor", + "guidance", + "user", + "says" + ], + "path": "skills/hig-project-context/SKILL.md" + }, + { + "id": "hig-technologies", + "name": "hig-technologies", + "description": "Apple HIG guidance for Apple technology integrations: Siri, Apple Pay, HealthKit, HomeKit, ARKit, machine learning, generative AI, iCloud, Sign in with Apple, SharePlay, CarPlay, Game Center, in-app purchase, NFC, Wallet, VoiceOver, Maps, Mac Catalyst, and more. Use when asked about: \"Siri integration\", \"Apple Pay\", \"HealthKit\", \"HomeKit\", \"ARKit\", \"augmented reality\", \"machine learning\", \"generative AI\", \"iCloud sync\", \"Sign in with Apple\", \"SharePlay\", \"CarPlay\", \"in-app purchase\", \"NFC\", \"VoiceOver\", \"Maps\", \"Mac Catalyst\". Also use when the user says \"how do I integrate Siri,\" \"what are the Apple Pay guidelines,\" \"how should my AR experience work,\" \"how do I use Sign in with Apple,\" or asks about any Apple framework or service integration. Cross-references: hig-inputs for input methods, hig-components-system for widgets.", + "category": "infrastructure", + "tags": [ + "hig", + "technologies" + ], + "triggers": [ + "hig", + "technologies", + "apple", + "guidance", + "technology", + "integrations", + "siri", + "pay", + "healthkit", + "homekit", + "arkit", + "machine" + ], + "path": "skills/hig-technologies/SKILL.md" + }, { "id": "hosted-agents-v2-py", "name": "hosted-agents-v2-py", diff --git a/package.json b/package.json index 5ef4e7c3..cd4b10ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antigravity-awesome-skills", - "version": "5.8.0", + "version": "5.9.0", "description": "845+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.", "license": "MIT", "scripts": { diff --git a/scripts/fix_skills_metadata.py b/scripts/fix_skills_metadata.py new file mode 100644 index 00000000..75828545 --- /dev/null +++ b/scripts/fix_skills_metadata.py @@ -0,0 +1,51 @@ +import os +import re + +def fix_skills(skills_dir): + for root, dirs, files in os.walk(skills_dir): + dirs[:] = [d for d in dirs if not d.startswith('.')] + if "SKILL.md" in files: + skill_path = os.path.join(root, "SKILL.md") + with open(skill_path, 'r', encoding='utf-8') as f: + content = f.read() + + fm_match = re.search(r'^---\s*\n(.*?)\n---', content, re.DOTALL) + if not fm_match: + continue + + fm_text = fm_match.group(1) + folder_name = os.path.basename(root) + new_fm_lines = [] + changed = False + + for line in fm_text.split('\n'): + if line.startswith('name:'): + old_name = line.split(':', 1)[1].strip().strip('"').strip("'") + if old_name != folder_name: + new_fm_lines.append(f"name: {folder_name}") + changed = True + else: + new_fm_lines.append(line) + elif line.startswith('description:'): + desc = line.split(':', 1)[1].strip().strip('"').strip("'") + if len(desc) > 200: + # trim to 197 chars and add "..." + short_desc = desc[:197] + "..." + new_fm_lines.append(f'description: "{short_desc}"') + changed = True + else: + new_fm_lines.append(line) + else: + new_fm_lines.append(line) + + if changed: + new_fm_text = '\n'.join(new_fm_lines) + new_content = content[:fm_match.start(1)] + new_fm_text + content[fm_match.end(1):] + with open(skill_path, 'w', encoding='utf-8') as f: + f.write(new_content) + print(f"Fixed {skill_path}") + +if __name__ == "__main__": + base_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) + skills_path = os.path.join(base_dir, "skills") + fix_skills(skills_path) diff --git a/scripts/validate_skills.py b/scripts/validate_skills.py index 4c96fd64..a18ce85d 100644 --- a/scripts/validate_skills.py +++ b/scripts/validate_skills.py @@ -68,10 +68,14 @@ def validate_skills(skills_dir, strict_mode=False): if "name" not in metadata: errors.append(f"❌ {rel_path}: Missing 'name' in frontmatter") elif metadata["name"] != os.path.basename(root): - warnings.append(f"⚠️ {rel_path}: Name '{metadata['name']}' does not match folder name '{os.path.basename(root)}'") + errors.append(f"❌ {rel_path}: Name '{metadata['name']}' does not match folder name '{os.path.basename(root)}'") if "description" not in metadata: errors.append(f"❌ {rel_path}: Missing 'description' in frontmatter") + else: + # agentskills-ref checks for short descriptions + if len(metadata["description"]) > 200: + errors.append(f"❌ {rel_path}: Description is oversized ({len(metadata['description'])} chars). Must be concise.") # Risk Validation (Quality Bar) if "risk" not in metadata: diff --git a/skills/3d-web-experience/SKILL.md b/skills/3d-web-experience/SKILL.md index 7a7ae4af..64e1a29f 100644 --- a/skills/3d-web-experience/SKILL.md +++ b/skills/3d-web-experience/SKILL.md @@ -1,6 +1,6 @@ --- name: 3d-web-experience -description: "Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience." +description: "Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/active-directory-attacks/SKILL.md b/skills/active-directory-attacks/SKILL.md index 654fbae3..57aa8ca3 100644 --- a/skills/active-directory-attacks/SKILL.md +++ b/skills/active-directory-attacks/SKILL.md @@ -1,6 +1,6 @@ --- -name: Active Directory Attacks -description: This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing. +name: active-directory-attacks +description: "This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-..." metadata: author: zebbern version: "1.1" diff --git a/skills/agent-evaluation/SKILL.md b/skills/agent-evaluation/SKILL.md index 964c6184..53ed62d9 100644 --- a/skills/agent-evaluation/SKILL.md +++ b/skills/agent-evaluation/SKILL.md @@ -1,6 +1,6 @@ --- name: agent-evaluation -description: "Testing and benchmarking LLM agents including behavioral testing, capability assessment, reliability metrics, and production monitoring—where even top agents achieve less than 50% on real-world benchmarks Use when: agent testing, agent evaluation, benchmark agents, agent reliability, test agent." +description: "Testing and benchmarking LLM agents including behavioral testing, capability assessment, reliability metrics, and production monitoring—where even top agents achieve less than 50% on real-world ben..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/agent-framework-azure-ai-py/SKILL.md b/skills/agent-framework-azure-ai-py/SKILL.md index 74da0813..c18f63ad 100644 --- a/skills/agent-framework-azure-ai-py/SKILL.md +++ b/skills/agent-framework-azure-ai-py/SKILL.md @@ -1,6 +1,6 @@ --- name: agent-framework-azure-ai-py -description: Build Azure AI Foundry agents using the Microsoft Agent Framework Python SDK (agent-framework-azure-ai). Use when creating persistent agents with AzureAIAgentsProvider, using hosted tools (code interpreter, file search, web search), integrating MCP servers, managing conversation threads, or implementing streaming responses. Covers function tools, structured outputs, and multi-tool agents. +description: "Build Azure AI Foundry agents using the Microsoft Agent Framework Python SDK (agent-framework-azure-ai). Use when creating persistent agents with AzureAIAgentsProvider, using hosted tools (code int..." package: agent-framework-azure-ai --- diff --git a/skills/agent-memory-systems/SKILL.md b/skills/agent-memory-systems/SKILL.md index ee791180..bff5fed4 100644 --- a/skills/agent-memory-systems/SKILL.md +++ b/skills/agent-memory-systems/SKILL.md @@ -1,6 +1,6 @@ --- name: agent-memory-systems -description: "Memory is the cornerstone of intelligent agents. Without it, every interaction starts from zero. This skill covers the architecture of agent memory: short-term (context window), long-term (vector stores), and the cognitive architectures that organize them. Key insight: Memory isn't just storage - it's retrieval. A million stored facts mean nothing if you can't find the right one. Chunking, embedding, and retrieval strategies determine whether your agent remembers or forgets. The field is fragm" +description: "Memory is the cornerstone of intelligent agents. Without it, every interaction starts from zero. This skill covers the architecture of agent memory: short-term (context window), long-term (vector s..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/agent-tool-builder/SKILL.md b/skills/agent-tool-builder/SKILL.md index 635043fe..1a978c4c 100644 --- a/skills/agent-tool-builder/SKILL.md +++ b/skills/agent-tool-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: agent-tool-builder -description: "Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling. JSON Schema best practices, description writing that actually helps the LLM, validation, and the emerging MCP standard that's becoming the lingua franca for AI tools. Key insight: Tool descriptions are more important than tool implementa" +description: "Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessar..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/ai-agents-architect/SKILL.md b/skills/ai-agents-architect/SKILL.md index 10f97b60..7bf5c37b 100644 --- a/skills/ai-agents-architect/SKILL.md +++ b/skills/ai-agents-architect/SKILL.md @@ -1,6 +1,6 @@ --- name: ai-agents-architect -description: "Expert in designing and building autonomous AI agents. Masters tool use, memory systems, planning strategies, and multi-agent orchestration. Use when: build agent, AI agent, autonomous agent, tool use, function calling." +description: "Expert in designing and building autonomous AI agents. Masters tool use, memory systems, planning strategies, and multi-agent orchestration. Use when: build agent, AI agent, autonomous agent, tool ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/ai-product/SKILL.md b/skills/ai-product/SKILL.md index 5239cccf..8ffb6d93 100644 --- a/skills/ai-product/SKILL.md +++ b/skills/ai-product/SKILL.md @@ -1,6 +1,6 @@ --- name: ai-product -description: "Every product will be AI-powered. The question is whether you'll build it right or ship a demo that falls apart in production. This skill covers LLM integration patterns, RAG architecture, prompt engineering that scales, AI UX that users trust, and cost optimization that doesn't bankrupt you. Use when: keywords, file_patterns, code_patterns." +description: "Every product will be AI-powered. The question is whether you'll build it right or ship a demo that falls apart in production. This skill covers LLM integration patterns, RAG architecture, prompt ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/ai-wrapper-product/SKILL.md b/skills/ai-wrapper-product/SKILL.md index f7216906..85ddbbb9 100644 --- a/skills/ai-wrapper-product/SKILL.md +++ b/skills/ai-wrapper-product/SKILL.md @@ -1,6 +1,6 @@ --- name: ai-wrapper-product -description: "Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc.) into focused tools people will pay for. Not just 'ChatGPT but different' - products that solve specific problems with AI. Covers prompt engineering for products, cost management, rate limiting, and building defensible AI businesses. Use when: AI wrapper, GPT product, AI tool, wrap AI, AI SaaS." +description: "Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc.) into focused tools people will pay for. Not just 'ChatGPT but different' - products that solve specific problems with AI. Cov..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/algorithmic-art/SKILL.md b/skills/algorithmic-art/SKILL.md index 634f6fa4..f28c5f70 100644 --- a/skills/algorithmic-art/SKILL.md +++ b/skills/algorithmic-art/SKILL.md @@ -1,6 +1,6 @@ --- name: algorithmic-art -description: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations. +description: "Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields,..." license: Complete terms in LICENSE.txt --- diff --git a/skills/angular-migration/SKILL.md b/skills/angular-migration/SKILL.md index 89a255c3..69f8dd62 100644 --- a/skills/angular-migration/SKILL.md +++ b/skills/angular-migration/SKILL.md @@ -1,6 +1,6 @@ --- name: angular-migration -description: Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code. +description: "Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or ..." --- # Angular Migration diff --git a/skills/anti-reversing-techniques/SKILL.md b/skills/anti-reversing-techniques/SKILL.md index 7b2579ed..d17f0029 100644 --- a/skills/anti-reversing-techniques/SKILL.md +++ b/skills/anti-reversing-techniques/SKILL.md @@ -1,6 +1,6 @@ --- name: anti-reversing-techniques -description: Understand anti-reversing, obfuscation, and protection techniques encountered during software analysis. Use when analyzing protected binaries, bypassing anti-debugging for authorized analysis, or understanding software protection mechanisms. +description: "Understand anti-reversing, obfuscation, and protection techniques encountered during software analysis. Use when analyzing protected binaries, bypassing anti-debugging for authorized analysis, or u..." --- > **AUTHORIZED USE ONLY**: This skill contains dual-use security techniques. Before proceeding with any bypass or analysis: diff --git a/skills/api-design-principles/SKILL.md b/skills/api-design-principles/SKILL.md index 707220a3..1f920bea 100644 --- a/skills/api-design-principles/SKILL.md +++ b/skills/api-design-principles/SKILL.md @@ -1,6 +1,6 @@ --- name: api-design-principles -description: Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards. +description: "Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing..." --- # API Design Principles diff --git a/skills/api-fuzzing-bug-bounty/SKILL.md b/skills/api-fuzzing-bug-bounty/SKILL.md index 7f5f17cd..a213d4ae 100644 --- a/skills/api-fuzzing-bug-bounty/SKILL.md +++ b/skills/api-fuzzing-bug-bounty/SKILL.md @@ -1,6 +1,6 @@ --- -name: API Fuzzing for Bug Bounty -description: This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques. +name: api-fuzzing-bug-bounty +description: "This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", ..." metadata: author: zebbern version: "1.1" diff --git a/skills/architecture-decision-records/SKILL.md b/skills/architecture-decision-records/SKILL.md index dfaf558d..4771c801 100644 --- a/skills/architecture-decision-records/SKILL.md +++ b/skills/architecture-decision-records/SKILL.md @@ -1,6 +1,6 @@ --- name: architecture-decision-records -description: Write and maintain Architecture Decision Records (ADRs) following best practices for technical decision documentation. Use when documenting significant technical decisions, reviewing past architectural choices, or establishing decision processes. +description: "Write and maintain Architecture Decision Records (ADRs) following best practices for technical decision documentation. Use when documenting significant technical decisions, reviewing past architect..." --- # Architecture Decision Records diff --git a/skills/architecture-patterns/SKILL.md b/skills/architecture-patterns/SKILL.md index 089a4965..c05b9a57 100644 --- a/skills/architecture-patterns/SKILL.md +++ b/skills/architecture-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: architecture-patterns -description: Implement proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design. Use when architecting complex backend systems or refactoring existing applications for better maintainability. +description: "Implement proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design. Use when architecting complex backend systems or refactoring existing ..." --- # Architecture Patterns diff --git a/skills/async-python-patterns/SKILL.md b/skills/async-python-patterns/SKILL.md index 79c37c6b..f4443ba5 100644 --- a/skills/async-python-patterns/SKILL.md +++ b/skills/async-python-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: async-python-patterns -description: Master Python asyncio, concurrent programming, and async/await patterns for high-performance applications. Use when building async APIs, concurrent systems, or I/O-bound applications requiring non-blocking operations. +description: "Master Python asyncio, concurrent programming, and async/await patterns for high-performance applications. Use when building async APIs, concurrent systems, or I/O-bound applications requiring non-..." --- # Async Python Patterns diff --git a/skills/auth-implementation-patterns/SKILL.md b/skills/auth-implementation-patterns/SKILL.md index 8f1b32cf..b23685ba 100644 --- a/skills/auth-implementation-patterns/SKILL.md +++ b/skills/auth-implementation-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: auth-implementation-patterns -description: Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing APIs, or debugging security issues. +description: "Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing A..." --- # Authentication & Authorization Implementation Patterns diff --git a/skills/automate-whatsapp/SKILL.md b/skills/automate-whatsapp/SKILL.md index 4dde7962..899445d0 100644 --- a/skills/automate-whatsapp/SKILL.md +++ b/skills/automate-whatsapp/SKILL.md @@ -1,6 +1,6 @@ --- name: automate-whatsapp -description: "Build WhatsApp automations with Kapso workflows: configure WhatsApp triggers, edit workflow graphs, manage executions, deploy functions, and use databases/integrations for state. Use when automating WhatsApp conversations and event handling." +description: "Build WhatsApp automations with Kapso workflows: configure WhatsApp triggers, edit workflow graphs, manage executions, deploy functions, and use databases/integrations for state. Use when automatin..." source: "https://github.com/gokapso/agent-skills/tree/master/skills/automate-whatsapp" risk: safe --- diff --git a/skills/autonomous-agent-patterns/SKILL.md b/skills/autonomous-agent-patterns/SKILL.md index ff5b79c3..59285181 100644 --- a/skills/autonomous-agent-patterns/SKILL.md +++ b/skills/autonomous-agent-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: autonomous-agent-patterns -description: "Design patterns for building autonomous coding agents. Covers tool integration, permission systems, browser automation, and human-in-the-loop workflows. Use when building AI agents, designing tool APIs, implementing permission systems, or creating autonomous coding assistants." +description: "Design patterns for building autonomous coding agents. Covers tool integration, permission systems, browser automation, and human-in-the-loop workflows. Use when building AI agents, designing tool ..." --- # 🕹️ Autonomous Agent Patterns diff --git a/skills/autonomous-agents/SKILL.md b/skills/autonomous-agents/SKILL.md index 77543a4e..2019f0cb 100644 --- a/skills/autonomous-agents/SKILL.md +++ b/skills/autonomous-agents/SKILL.md @@ -1,6 +1,6 @@ --- name: autonomous-agents -description: "Autonomous agents are AI systems that can independently decompose goals, plan actions, execute tools, and self-correct without constant human guidance. The challenge isn't making them capable - it's making them reliable. Every extra decision multiplies failure probability. This skill covers agent loops (ReAct, Plan-Execute), goal decomposition, reflection patterns, and production reliability. Key insight: compounding error rates kill autonomous agents. A 95% success rate per step drops to 60% b" +description: "Autonomous agents are AI systems that can independently decompose goals, plan actions, execute tools, and self-correct without constant human guidance. The challenge isn't making them capable - it'..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/aws-penetration-testing/SKILL.md b/skills/aws-penetration-testing/SKILL.md index 644bdc1d..93e941a2 100644 --- a/skills/aws-penetration-testing/SKILL.md +++ b/skills/aws-penetration-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: AWS Penetration Testing -description: This skill should be used when the user asks to "pentest AWS", "test AWS security", "enumerate IAM", "exploit cloud infrastructure", "AWS privilege escalation", "S3 bucket testing", "metadata SSRF", "Lambda exploitation", or needs guidance on Amazon Web Services security assessment. +name: aws-penetration-testing +description: "This skill should be used when the user asks to "pentest AWS", "test AWS security", "enumerate IAM", "exploit cloud infrastructure", "AWS privilege escalation", "S3 bucket testing", "metadata SSRF"..." metadata: author: zebbern version: "1.1" diff --git a/skills/aws-serverless/SKILL.md b/skills/aws-serverless/SKILL.md index 237f34c6..39cba015 100644 --- a/skills/aws-serverless/SKILL.md +++ b/skills/aws-serverless/SKILL.md @@ -1,6 +1,6 @@ --- name: aws-serverless -description: "Specialized skill for building production-ready serverless applications on AWS. Covers Lambda functions, API Gateway, DynamoDB, SQS/SNS event-driven patterns, SAM/CDK deployment, and cold start optimization." +description: "Specialized skill for building production-ready serverless applications on AWS. Covers Lambda functions, API Gateway, DynamoDB, SQS/SNS event-driven patterns, SAM/CDK deployment, and cold start opt..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/azd-deployment/SKILL.md b/skills/azd-deployment/SKILL.md index 88ead12f..5dde0972 100644 --- a/skills/azd-deployment/SKILL.md +++ b/skills/azd-deployment/SKILL.md @@ -1,6 +1,6 @@ --- name: azd-deployment -description: Deploy containerized applications to Azure Container Apps using Azure Developer CLI (azd). Use when setting up azd projects, writing azure.yaml configuration, creating Bicep infrastructure for Container Apps, configuring remote builds with ACR, implementing idempotent deployments, managing environment variables across local/.azure/Bicep, or troubleshooting azd up failures. Triggers on requests for azd configuration, Container Apps deployment, multi-service deployments, and infrastructure-as-code with Bicep. +description: "Deploy containerized applications to Azure Container Apps using Azure Developer CLI (azd). Use when setting up azd projects, writing azure.yaml configuration, creating Bicep infrastructure for Cont..." --- # Azure Developer CLI (azd) Container Apps Deployment diff --git a/skills/azure-ai-contentsafety-java/SKILL.md b/skills/azure-ai-contentsafety-java/SKILL.md index 20ea06d1..44a039d4 100644 --- a/skills/azure-ai-contentsafety-java/SKILL.md +++ b/skills/azure-ai-contentsafety-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-contentsafety-java -description: Build content moderation applications with Azure AI Content Safety SDK for Java. Use when implementing text/image analysis, blocklist management, or harm detection for hate, violence, sexual content, and self-harm. +description: "Build content moderation applications with Azure AI Content Safety SDK for Java. Use when implementing text/image analysis, blocklist management, or harm detection for hate, violence, sexual conten..." package: com.azure:azure-ai-contentsafety --- diff --git a/skills/azure-ai-contentsafety-ts/SKILL.md b/skills/azure-ai-contentsafety-ts/SKILL.md index 89b64c57..0a911b48 100644 --- a/skills/azure-ai-contentsafety-ts/SKILL.md +++ b/skills/azure-ai-contentsafety-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-contentsafety-ts -description: Analyze text and images for harmful content using Azure AI Content Safety (@azure-rest/ai-content-safety). Use when moderating user-generated content, detecting hate speech, violence, sexual content, or self-harm, or managing custom blocklists. +description: "Analyze text and images for harmful content using Azure AI Content Safety (@azure-rest/ai-content-safety). Use when moderating user-generated content, detecting hate speech, violence, sexual conten..." package: "@azure-rest/ai-content-safety" --- diff --git a/skills/azure-ai-document-intelligence-ts/SKILL.md b/skills/azure-ai-document-intelligence-ts/SKILL.md index 91d3e54c..cd925bce 100644 --- a/skills/azure-ai-document-intelligence-ts/SKILL.md +++ b/skills/azure-ai-document-intelligence-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-document-intelligence-ts -description: Extract text, tables, and structured data from documents using Azure Document Intelligence (@azure-rest/ai-document-intelligence). Use when processing invoices, receipts, IDs, forms, or building custom document models. +description: "Extract text, tables, and structured data from documents using Azure Document Intelligence (@azure-rest/ai-document-intelligence). Use when processing invoices, receipts, IDs, forms, or building cu..." package: "@azure-rest/ai-document-intelligence" --- diff --git a/skills/azure-ai-formrecognizer-java/SKILL.md b/skills/azure-ai-formrecognizer-java/SKILL.md index f63e954e..1cc0a05a 100644 --- a/skills/azure-ai-formrecognizer-java/SKILL.md +++ b/skills/azure-ai-formrecognizer-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-formrecognizer-java -description: Build document analysis applications with Azure Document Intelligence (Form Recognizer) SDK for Java. Use when extracting text, tables, key-value pairs from documents, receipts, invoices, or building custom document models. +description: "Build document analysis applications with Azure Document Intelligence (Form Recognizer) SDK for Java. Use when extracting text, tables, key-value pairs from documents, receipts, invoices, or buildi..." package: com.azure:azure-ai-formrecognizer --- diff --git a/skills/azure-ai-projects-py/SKILL.md b/skills/azure-ai-projects-py/SKILL.md index 8965b175..d6d96313 100644 --- a/skills/azure-ai-projects-py/SKILL.md +++ b/skills/azure-ai-projects-py/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-projects-py -description: Build AI applications using the Azure AI Projects Python SDK (azure-ai-projects). Use when working with Foundry project clients, creating versioned agents with PromptAgentDefinition, running evaluations, managing connections/deployments/datasets/indexes, or using OpenAI-compatible clients. This is the high-level Foundry SDK - for low-level agent operations, use azure-ai-agents-python skill. +description: "Build AI applications using the Azure AI Projects Python SDK (azure-ai-projects). Use when working with Foundry project clients, creating versioned agents with PromptAgentDefinition, running evalua..." package: azure-ai-projects --- diff --git a/skills/azure-ai-projects-ts/SKILL.md b/skills/azure-ai-projects-ts/SKILL.md index 8c9fbc1b..78d5b990 100644 --- a/skills/azure-ai-projects-ts/SKILL.md +++ b/skills/azure-ai-projects-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-projects-ts -description: Build AI applications using Azure AI Projects SDK for JavaScript (@azure/ai-projects). Use when working with Foundry project clients, agents, connections, deployments, datasets, indexes, evaluations, or getting OpenAI clients. +description: "Build AI applications using Azure AI Projects SDK for JavaScript (@azure/ai-projects). Use when working with Foundry project clients, agents, connections, deployments, datasets, indexes, evaluation..." package: "@azure/ai-projects" --- diff --git a/skills/azure-ai-translation-ts/SKILL.md b/skills/azure-ai-translation-ts/SKILL.md index e232051a..e366c015 100644 --- a/skills/azure-ai-translation-ts/SKILL.md +++ b/skills/azure-ai-translation-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-translation-ts -description: Build translation applications using Azure Translation SDKs for JavaScript (@azure-rest/ai-translation-text, @azure-rest/ai-translation-document). Use when implementing text translation, transliteration, language detection, or batch document translation. +description: "Build translation applications using Azure Translation SDKs for JavaScript (@azure-rest/ai-translation-text, @azure-rest/ai-translation-document). Use when implementing text translation, transliter..." package: "@azure-rest/ai-translation-text, @azure-rest/ai-translation-document" --- diff --git a/skills/azure-ai-voicelive-py/SKILL.md b/skills/azure-ai-voicelive-py/SKILL.md index 0b22c55e..9ddcfc03 100644 --- a/skills/azure-ai-voicelive-py/SKILL.md +++ b/skills/azure-ai-voicelive-py/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-ai-voicelive-py -description: Build real-time voice AI applications using Azure AI Voice Live SDK (azure-ai-voicelive). Use this skill when creating Python applications that need real-time bidirectional audio communication with Azure AI, including voice assistants, voice-enabled chatbots, real-time speech-to-speech translation, voice-driven avatars, or any WebSocket-based audio streaming with AI models. Supports Server VAD (Voice Activity Detection), turn-based conversation, function calling, MCP tools, avatar integration, and transcription. +description: "Build real-time voice AI applications using Azure AI Voice Live SDK (azure-ai-voicelive). Use this skill when creating Python applications that need real-time bidirectional audio communication with..." package: azure-ai-voicelive --- diff --git a/skills/azure-appconfiguration-ts/SKILL.md b/skills/azure-appconfiguration-ts/SKILL.md index 2a388473..a3e131c6 100644 --- a/skills/azure-appconfiguration-ts/SKILL.md +++ b/skills/azure-appconfiguration-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-appconfiguration-ts -description: Build applications using Azure App Configuration SDK for JavaScript (@azure/app-configuration). Use when working with configuration settings, feature flags, Key Vault references, dynamic refresh, or centralized configuration management. +description: "Build applications using Azure App Configuration SDK for JavaScript (@azure/app-configuration). Use when working with configuration settings, feature flags, Key Vault references, dynamic refresh, o..." package: "@azure/app-configuration" --- diff --git a/skills/azure-communication-callautomation-java/SKILL.md b/skills/azure-communication-callautomation-java/SKILL.md index 29eb1218..af0e212c 100644 --- a/skills/azure-communication-callautomation-java/SKILL.md +++ b/skills/azure-communication-callautomation-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-communication-callautomation-java -description: Build call automation workflows with Azure Communication Services Call Automation Java SDK. Use when implementing IVR systems, call routing, call recording, DTMF recognition, text-to-speech, or AI-powered call flows. +description: "Build call automation workflows with Azure Communication Services Call Automation Java SDK. Use when implementing IVR systems, call routing, call recording, DTMF recognition, text-to-speech, or AI-..." package: com.azure:azure-communication-callautomation --- diff --git a/skills/azure-communication-callingserver-java/SKILL.md b/skills/azure-communication-callingserver-java/SKILL.md index bf764711..6e67a330 100644 --- a/skills/azure-communication-callingserver-java/SKILL.md +++ b/skills/azure-communication-callingserver-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-communication-callingserver-java -description: Azure Communication Services CallingServer (legacy) Java SDK. Note - This SDK is deprecated. Use azure-communication-callautomation instead for new projects. Only use this skill when maintaining legacy code. +description: "Azure Communication Services CallingServer (legacy) Java SDK. Note - This SDK is deprecated. Use azure-communication-callautomation instead for new projects. Only use this skill when maintaining le..." package: com.azure:azure-communication-callingserver --- diff --git a/skills/azure-communication-chat-java/SKILL.md b/skills/azure-communication-chat-java/SKILL.md index a48efd1e..3499edea 100644 --- a/skills/azure-communication-chat-java/SKILL.md +++ b/skills/azure-communication-chat-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-communication-chat-java -description: Build real-time chat applications with Azure Communication Services Chat Java SDK. Use when implementing chat threads, messaging, participants, read receipts, typing notifications, or real-time chat features. +description: "Build real-time chat applications with Azure Communication Services Chat Java SDK. Use when implementing chat threads, messaging, participants, read receipts, typing notifications, or real-time cha..." package: com.azure:azure-communication-chat --- diff --git a/skills/azure-cosmos-db-py/SKILL.md b/skills/azure-cosmos-db-py/SKILL.md index 33b4307c..941f0c54 100644 --- a/skills/azure-cosmos-db-py/SKILL.md +++ b/skills/azure-cosmos-db-py/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-cosmos-db-py -description: Build Azure Cosmos DB NoSQL services with Python/FastAPI following production-grade patterns. Use when implementing database client setup with dual auth (DefaultAzureCredential + emulator), service layer classes with CRUD operations, partition key strategies, parameterized queries, or TDD patterns for Cosmos. Triggers on phrases like "Cosmos DB", "NoSQL database", "document store", "add persistence", "database service layer", or "Python Cosmos SDK". +description: "Build Azure Cosmos DB NoSQL services with Python/FastAPI following production-grade patterns. Use when implementing database client setup with dual auth (DefaultAzureCredential + emulator), service..." package: azure-cosmos --- diff --git a/skills/azure-data-tables-java/SKILL.md b/skills/azure-data-tables-java/SKILL.md index a05c03e9..86f7a36f 100644 --- a/skills/azure-data-tables-java/SKILL.md +++ b/skills/azure-data-tables-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-data-tables-java -description: Build table storage applications with Azure Tables SDK for Java. Use when working with Azure Table Storage or Cosmos DB Table API for NoSQL key-value data, schemaless storage, or structured data at scale. +description: "Build table storage applications with Azure Tables SDK for Java. Use when working with Azure Table Storage or Cosmos DB Table API for NoSQL key-value data, schemaless storage, or structured data at..." package: com.azure:azure-data-tables --- diff --git a/skills/azure-eventhub-ts/SKILL.md b/skills/azure-eventhub-ts/SKILL.md index 1626a34e..18c4ffd5 100644 --- a/skills/azure-eventhub-ts/SKILL.md +++ b/skills/azure-eventhub-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-eventhub-ts -description: Build event streaming applications using Azure Event Hubs SDK for JavaScript (@azure/event-hubs). Use when implementing high-throughput event ingestion, real-time analytics, IoT telemetry, or event-driven architectures with partitioned consumers. +description: "Build event streaming applications using Azure Event Hubs SDK for JavaScript (@azure/event-hubs). Use when implementing high-throughput event ingestion, real-time analytics, IoT telemetry, or event..." package: "@azure/event-hubs" --- diff --git a/skills/azure-functions/SKILL.md b/skills/azure-functions/SKILL.md index 55e6b195..62a56fb3 100644 --- a/skills/azure-functions/SKILL.md +++ b/skills/azure-functions/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-functions -description: "Expert patterns for Azure Functions development including isolated worker model, Durable Functions orchestration, cold start optimization, and production patterns. Covers .NET, Python, and Node.js programming models. Use when: azure function, azure functions, durable functions, azure serverless, function app." +description: "Expert patterns for Azure Functions development including isolated worker model, Durable Functions orchestration, cold start optimization, and production patterns. Covers .NET, Python, and Node.js ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/azure-identity-java/SKILL.md b/skills/azure-identity-java/SKILL.md index ddb74269..49ca7d17 100644 --- a/skills/azure-identity-java/SKILL.md +++ b/skills/azure-identity-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-identity-java -description: Azure Identity Java SDK for authentication with Azure services. Use when implementing DefaultAzureCredential, managed identity, service principal, or any Azure authentication pattern in Java applications. +description: "Azure Identity Java SDK for authentication with Azure services. Use when implementing DefaultAzureCredential, managed identity, service principal, or any Azure authentication pattern in Java applic..." package: com.azure:azure-identity --- diff --git a/skills/azure-identity-ts/SKILL.md b/skills/azure-identity-ts/SKILL.md index 05ef7358..6d475019 100644 --- a/skills/azure-identity-ts/SKILL.md +++ b/skills/azure-identity-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-identity-ts -description: Authenticate to Azure services using Azure Identity SDK for JavaScript (@azure/identity). Use when configuring authentication with DefaultAzureCredential, managed identity, service principals, or interactive browser login. +description: "Authenticate to Azure services using Azure Identity SDK for JavaScript (@azure/identity). Use when configuring authentication with DefaultAzureCredential, managed identity, service principals, or i..." package: "@azure/identity" --- diff --git a/skills/azure-mgmt-mongodbatlas-dotnet/SKILL.md b/skills/azure-mgmt-mongodbatlas-dotnet/SKILL.md index f7055e75..c37e2523 100644 --- a/skills/azure-mgmt-mongodbatlas-dotnet/SKILL.md +++ b/skills/azure-mgmt-mongodbatlas-dotnet/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-mgmt-mongodbatlas-dotnet -description: Manage MongoDB Atlas Organizations as Azure ARM resources using Azure.ResourceManager.MongoDBAtlas SDK. Use when creating, updating, listing, or deleting MongoDB Atlas organizations through Azure Marketplace integration. This SDK manages the Azure-side organization resource, not Atlas clusters/databases directly. +description: "Manage MongoDB Atlas Organizations as Azure ARM resources using Azure.ResourceManager.MongoDBAtlas SDK. Use when creating, updating, listing, or deleting MongoDB Atlas organizations through Azure M..." package: Azure.ResourceManager.MongoDBAtlas --- diff --git a/skills/azure-microsoft-playwright-testing-ts/SKILL.md b/skills/azure-microsoft-playwright-testing-ts/SKILL.md index 99c072d9..7aa0d9f7 100644 --- a/skills/azure-microsoft-playwright-testing-ts/SKILL.md +++ b/skills/azure-microsoft-playwright-testing-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-microsoft-playwright-testing-ts -description: Run Playwright tests at scale using Azure Playwright Workspaces (formerly Microsoft Playwright Testing). Use when scaling browser tests across cloud-hosted browsers, integrating with CI/CD pipelines, or publishing test results to the Azure portal. +description: "Run Playwright tests at scale using Azure Playwright Workspaces (formerly Microsoft Playwright Testing). Use when scaling browser tests across cloud-hosted browsers, integrating with CI/CD pipeline..." package: "@azure/playwright" --- diff --git a/skills/azure-monitor-opentelemetry-ts/SKILL.md b/skills/azure-monitor-opentelemetry-ts/SKILL.md index ec450a88..2e9177fa 100644 --- a/skills/azure-monitor-opentelemetry-ts/SKILL.md +++ b/skills/azure-monitor-opentelemetry-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-monitor-opentelemetry-ts -description: Instrument applications with Azure Monitor and OpenTelemetry for JavaScript (@azure/monitor-opentelemetry). Use when adding distributed tracing, metrics, and logs to Node.js applications with Application Insights. +description: "Instrument applications with Azure Monitor and OpenTelemetry for JavaScript (@azure/monitor-opentelemetry). Use when adding distributed tracing, metrics, and logs to Node.js applications with Appli..." package: "@azure/monitor-opentelemetry" --- diff --git a/skills/azure-search-documents-ts/SKILL.md b/skills/azure-search-documents-ts/SKILL.md index c35b2085..f38c1a32 100644 --- a/skills/azure-search-documents-ts/SKILL.md +++ b/skills/azure-search-documents-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-search-documents-ts -description: Build search applications using Azure AI Search SDK for JavaScript (@azure/search-documents). Use when creating/managing indexes, implementing vector/hybrid search, semantic ranking, or building agentic retrieval with knowledge bases. +description: "Build search applications using Azure AI Search SDK for JavaScript (@azure/search-documents). Use when creating/managing indexes, implementing vector/hybrid search, semantic ranking, or building ag..." package: "@azure/search-documents" --- diff --git a/skills/azure-servicebus-ts/SKILL.md b/skills/azure-servicebus-ts/SKILL.md index 9240f31c..8145b711 100644 --- a/skills/azure-servicebus-ts/SKILL.md +++ b/skills/azure-servicebus-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-servicebus-ts -description: Build messaging applications using Azure Service Bus SDK for JavaScript (@azure/service-bus). Use when implementing queues, topics/subscriptions, message sessions, dead-letter handling, or enterprise messaging patterns. +description: "Build messaging applications using Azure Service Bus SDK for JavaScript (@azure/service-bus). Use when implementing queues, topics/subscriptions, message sessions, dead-letter handling, or enterpri..." package: "@azure/service-bus" --- diff --git a/skills/azure-storage-blob-java/SKILL.md b/skills/azure-storage-blob-java/SKILL.md index 0f06b119..f1aafada 100644 --- a/skills/azure-storage-blob-java/SKILL.md +++ b/skills/azure-storage-blob-java/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-storage-blob-java -description: Build blob storage applications with Azure Storage Blob SDK for Java. Use when uploading, downloading, or managing files in Azure Blob Storage, working with containers, or implementing streaming data operations. +description: "Build blob storage applications with Azure Storage Blob SDK for Java. Use when uploading, downloading, or managing files in Azure Blob Storage, working with containers, or implementing streaming da..." package: com.azure:azure-storage-blob --- diff --git a/skills/azure-web-pubsub-ts/SKILL.md b/skills/azure-web-pubsub-ts/SKILL.md index c3498744..dccdd964 100644 --- a/skills/azure-web-pubsub-ts/SKILL.md +++ b/skills/azure-web-pubsub-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: azure-web-pubsub-ts -description: Build real-time messaging applications using Azure Web PubSub SDKs for JavaScript (@azure/web-pubsub, @azure/web-pubsub-client). Use when implementing WebSocket-based real-time features, pub/sub messaging, group chat, or live notifications. +description: "Build real-time messaging applications using Azure Web PubSub SDKs for JavaScript (@azure/web-pubsub, @azure/web-pubsub-client). Use when implementing WebSocket-based real-time features, pub/sub me..." package: "@azure/web-pubsub, @azure/web-pubsub-client" --- diff --git a/skills/backend-dev-guidelines/SKILL.md b/skills/backend-dev-guidelines/SKILL.md index eebeb728..6566e0b0 100644 --- a/skills/backend-dev-guidelines/SKILL.md +++ b/skills/backend-dev-guidelines/SKILL.md @@ -1,6 +1,6 @@ --- name: backend-dev-guidelines -description: Opinionated backend development standards for Node.js + Express + TypeScript microservices. Covers layered architecture, BaseController pattern, dependency injection, Prisma repositories, Zod validation, unifiedConfig, Sentry error tracking, async safety, and testing discipline. +description: "Opinionated backend development standards for Node.js + Express + TypeScript microservices. Covers layered architecture, BaseController pattern, dependency injection, Prisma repositories, Zod valid..." --- # Backend Development Guidelines diff --git a/skills/backtesting-frameworks/SKILL.md b/skills/backtesting-frameworks/SKILL.md index e377e979..ed12b1d1 100644 --- a/skills/backtesting-frameworks/SKILL.md +++ b/skills/backtesting-frameworks/SKILL.md @@ -1,6 +1,6 @@ --- name: backtesting-frameworks -description: Build robust backtesting systems for trading strategies with proper handling of look-ahead bias, survivorship bias, and transaction costs. Use when developing trading algorithms, validating strategies, or building backtesting infrastructure. +description: "Build robust backtesting systems for trading strategies with proper handling of look-ahead bias, survivorship bias, and transaction costs. Use when developing trading algorithms, validating strateg..." --- # Backtesting Frameworks diff --git a/skills/billing-automation/SKILL.md b/skills/billing-automation/SKILL.md index cd043e97..136e7904 100644 --- a/skills/billing-automation/SKILL.md +++ b/skills/billing-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: billing-automation -description: Build automated billing systems for recurring payments, invoicing, subscription lifecycle, and dunning management. Use when implementing subscription billing, automating invoicing, or managing recurring payment systems. +description: "Build automated billing systems for recurring payments, invoicing, subscription lifecycle, and dunning management. Use when implementing subscription billing, automating invoicing, or managing recu..." --- # Billing Automation diff --git a/skills/binary-analysis-patterns/SKILL.md b/skills/binary-analysis-patterns/SKILL.md index 23836cd2..441e7001 100644 --- a/skills/binary-analysis-patterns/SKILL.md +++ b/skills/binary-analysis-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: binary-analysis-patterns -description: Master binary analysis patterns including disassembly, decompilation, control flow analysis, and code pattern recognition. Use when analyzing executables, understanding compiled code, or performing static analysis on binaries. +description: "Master binary analysis patterns including disassembly, decompilation, control flow analysis, and code pattern recognition. Use when analyzing executables, understanding compiled code, or performing..." --- # Binary Analysis Patterns diff --git a/skills/box-automation/SKILL.md b/skills/box-automation/SKILL.md index e59707db..5e28edcf 100644 --- a/skills/box-automation/SKILL.md +++ b/skills/box-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: box-automation -description: "Automate Box cloud storage operations including file upload/download, search, folder management, sharing, collaborations, and metadata queries via Rube MCP (Composio). Always search tools first for current schemas." +description: "Automate Box cloud storage operations including file upload/download, search, folder management, sharing, collaborations, and metadata queries via Rube MCP (Composio). Always search tools first for..." requires: mcp: [rube] --- diff --git a/skills/brand-guidelines-anthropic/SKILL.md b/skills/brand-guidelines-anthropic/SKILL.md index 47c72c60..461ca888 100644 --- a/skills/brand-guidelines-anthropic/SKILL.md +++ b/skills/brand-guidelines-anthropic/SKILL.md @@ -1,6 +1,6 @@ --- -name: brand-guidelines -description: Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. +name: brand-guidelines-anthropic +description: "Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatt..." license: Complete terms in LICENSE.txt --- diff --git a/skills/brand-guidelines-community/SKILL.md b/skills/brand-guidelines-community/SKILL.md index 47c72c60..1c093665 100644 --- a/skills/brand-guidelines-community/SKILL.md +++ b/skills/brand-guidelines-community/SKILL.md @@ -1,6 +1,6 @@ --- -name: brand-guidelines -description: Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. +name: brand-guidelines-community +description: "Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatt..." license: Complete terms in LICENSE.txt --- diff --git a/skills/brevo-automation/SKILL.md b/skills/brevo-automation/SKILL.md index 55b6a8cb..e341fc60 100644 --- a/skills/brevo-automation/SKILL.md +++ b/skills/brevo-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: brevo-automation -description: "Automate Brevo (Sendinblue) tasks via Rube MCP (Composio): manage email campaigns, create/edit templates, track senders, and monitor campaign performance. Always search tools first for current schemas." +description: "Automate Brevo (Sendinblue) tasks via Rube MCP (Composio): manage email campaigns, create/edit templates, track senders, and monitor campaign performance. Always search tools first for current sche..." requires: mcp: [rube] --- diff --git a/skills/broken-authentication/SKILL.md b/skills/broken-authentication/SKILL.md index ff3c8cd8..0ddc71e1 100644 --- a/skills/broken-authentication/SKILL.md +++ b/skills/broken-authentication/SKILL.md @@ -1,6 +1,6 @@ --- -name: Broken Authentication Testing -description: This skill should be used when the user asks to "test for broken authentication vulnerabilities", "assess session management security", "perform credential stuffing tests", "evaluate password policies", "test for session fixation", or "identify authentication bypass flaws". It provides comprehensive techniques for identifying authentication and session management weaknesses in web applications. +name: broken-authentication +description: "This skill should be used when the user asks to "test for broken authentication vulnerabilities", "assess session management security", "perform credential stuffing tests", "evaluate password polic..." metadata: author: zebbern version: "1.1" diff --git a/skills/browser-automation/SKILL.md b/skills/browser-automation/SKILL.md index a4a51cba..a2bb9235 100644 --- a/skills/browser-automation/SKILL.md +++ b/skills/browser-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: browser-automation -description: "Browser automation powers web testing, scraping, and AI agent interactions. The difference between a flaky script and a reliable system comes down to understanding selectors, waiting strategies, and anti-detection patterns. This skill covers Playwright (recommended) and Puppeteer, with patterns for testing, scraping, and agentic browser control. Key insight: Playwright won the framework war. Unless you need Puppeteer's stealth ecosystem or are Chrome-only, Playwright is the better choice in 202" +description: "Browser automation powers web testing, scraping, and AI agent interactions. The difference between a flaky script and a reliable system comes down to understanding selectors, waiting strategies, an..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/browser-extension-builder/SKILL.md b/skills/browser-extension-builder/SKILL.md index b1aa1d6b..abc95890 100644 --- a/skills/browser-extension-builder/SKILL.md +++ b/skills/browser-extension-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: browser-extension-builder -description: "Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3." +description: "Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/bun-development/SKILL.md b/skills/bun-development/SKILL.md index 4dfb8adf..5469e86c 100644 --- a/skills/bun-development/SKILL.md +++ b/skills/bun-development/SKILL.md @@ -1,6 +1,6 @@ --- name: bun-development -description: "Modern JavaScript/TypeScript development with Bun runtime. Covers package management, bundling, testing, and migration from Node.js. Use when working with Bun, optimizing JS/TS development speed, or migrating from Node.js to Bun." +description: "Modern JavaScript/TypeScript development with Bun runtime. Covers package management, bundling, testing, and migration from Node.js. Use when working with Bun, optimizing JS/TS development speed, o..." --- # ⚡ Bun Development diff --git a/skills/burp-suite-testing/SKILL.md b/skills/burp-suite-testing/SKILL.md index cb97ab42..0b19fffc 100644 --- a/skills/burp-suite-testing/SKILL.md +++ b/skills/burp-suite-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: Burp Suite Web Application Testing -description: This skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp Repeater", "analyze HTTP history", or "configure proxy for web testing". It provides comprehensive guidance for using Burp Suite's core features for web application security testing. +name: burp-suite-testing +description: "This skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp Repeater", "anal..." metadata: author: zebbern version: "1.1" diff --git a/skills/canvas-design/SKILL.md b/skills/canvas-design/SKILL.md index 9f63fee8..f1ba2861 100644 --- a/skills/canvas-design/SKILL.md +++ b/skills/canvas-design/SKILL.md @@ -1,6 +1,6 @@ --- name: canvas-design -description: Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations. +description: "Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create ..." license: Complete terms in LICENSE.txt --- diff --git a/skills/cc-skill-backend-patterns/SKILL.md b/skills/cc-skill-backend-patterns/SKILL.md index a31db2b7..0a2d84d0 100644 --- a/skills/cc-skill-backend-patterns/SKILL.md +++ b/skills/cc-skill-backend-patterns/SKILL.md @@ -1,5 +1,5 @@ --- -name: backend-patterns +name: cc-skill-backend-patterns description: Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. author: affaan-m version: "1.0" diff --git a/skills/cc-skill-clickhouse-io/SKILL.md b/skills/cc-skill-clickhouse-io/SKILL.md index ebb85249..545bacdc 100644 --- a/skills/cc-skill-clickhouse-io/SKILL.md +++ b/skills/cc-skill-clickhouse-io/SKILL.md @@ -1,5 +1,5 @@ --- -name: clickhouse-io +name: cc-skill-clickhouse-io description: ClickHouse database patterns, query optimization, analytics, and data engineering best practices for high-performance analytical workloads. author: affaan-m version: "1.0" diff --git a/skills/cc-skill-coding-standards/SKILL.md b/skills/cc-skill-coding-standards/SKILL.md index 03841e3f..7a81406e 100644 --- a/skills/cc-skill-coding-standards/SKILL.md +++ b/skills/cc-skill-coding-standards/SKILL.md @@ -1,5 +1,5 @@ --- -name: coding-standards +name: cc-skill-coding-standards description: Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development. author: affaan-m version: "1.0" diff --git a/skills/cc-skill-frontend-patterns/SKILL.md b/skills/cc-skill-frontend-patterns/SKILL.md index 372f0d2a..2b1f809e 100644 --- a/skills/cc-skill-frontend-patterns/SKILL.md +++ b/skills/cc-skill-frontend-patterns/SKILL.md @@ -1,5 +1,5 @@ --- -name: frontend-patterns +name: cc-skill-frontend-patterns description: Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. author: affaan-m version: "1.0" diff --git a/skills/cc-skill-security-review/SKILL.md b/skills/cc-skill-security-review/SKILL.md index d74c12a3..72353132 100644 --- a/skills/cc-skill-security-review/SKILL.md +++ b/skills/cc-skill-security-review/SKILL.md @@ -1,6 +1,6 @@ --- -name: security-review -description: Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns. +name: cc-skill-security-review +description: "Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist a..." author: affaan-m version: "1.0" --- diff --git a/skills/cicd-automation-workflow-automate/SKILL.md b/skills/cicd-automation-workflow-automate/SKILL.md index 2567dcdc..c47f1ddf 100644 --- a/skills/cicd-automation-workflow-automate/SKILL.md +++ b/skills/cicd-automation-workflow-automate/SKILL.md @@ -1,6 +1,6 @@ --- name: cicd-automation-workflow-automate -description: "You are a workflow automation expert specializing in creating efficient CI/CD pipelines, GitHub Actions workflows, and automated development processes. Design automation that reduces manual work, improves consistency, and accelerates delivery while maintaining quality and security." +description: "You are a workflow automation expert specializing in creating efficient CI/CD pipelines, GitHub Actions workflows, and automated development processes. Design automation that reduces manual work, i..." --- # Workflow Automation diff --git a/skills/claude-code-guide/SKILL.md b/skills/claude-code-guide/SKILL.md index 45a10eb9..c7c6a306 100644 --- a/skills/claude-code-guide/SKILL.md +++ b/skills/claude-code-guide/SKILL.md @@ -1,5 +1,5 @@ --- -name: Claude Code Guide +name: claude-code-guide description: Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies "Thinking" keywords, debugging techniques, and best practices for interacting with the agent. --- diff --git a/skills/claude-d3js-skill/SKILL.md b/skills/claude-d3js-skill/SKILL.md index 20234426..db3a22be 100644 --- a/skills/claude-d3js-skill/SKILL.md +++ b/skills/claude-d3js-skill/SKILL.md @@ -1,6 +1,6 @@ --- -name: d3-viz -description: Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment. +name: claude-d3js-skill +description: "Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visua..." --- # D3.js Visualisation diff --git a/skills/clean-code/SKILL.md b/skills/clean-code/SKILL.md index 931ed815..dd5367ca 100644 --- a/skills/clean-code/SKILL.md +++ b/skills/clean-code/SKILL.md @@ -1,6 +1,6 @@ --- name: clean-code -description: "Applies principles from Robert C. Martin's 'Clean Code'. Use this skill when writing, reviewing, or refactoring code to ensure high quality, readability, and maintainability. Covers naming, functions, comments, error handling, and class design." +description: "Applies principles from Robert C. Martin's 'Clean Code'. Use this skill when writing, reviewing, or refactoring code to ensure high quality, readability, and maintainability. Covers naming, functio..." user-invocable: true risk: safe source: "ClawForge (https://github.com/jackjin1997/ClawForge)" diff --git a/skills/cloud-penetration-testing/SKILL.md b/skills/cloud-penetration-testing/SKILL.md index dd91a0ae..f7653355 100644 --- a/skills/cloud-penetration-testing/SKILL.md +++ b/skills/cloud-penetration-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: Cloud Penetration Testing -description: This skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O365 security", "extract secrets from cloud environments", or "audit cloud infrastructure". It provides comprehensive techniques for security assessment across major cloud platforms. +name: cloud-penetration-testing +description: "This skill should be used when the user asks to "perform cloud penetration testing", "assess Azure or AWS or GCP security", "enumerate cloud resources", "exploit cloud misconfigurations", "test O36..." metadata: author: zebbern version: "1.1" diff --git a/skills/code-documentation-code-explain/SKILL.md b/skills/code-documentation-code-explain/SKILL.md index 1b291738..bf11f21e 100644 --- a/skills/code-documentation-code-explain/SKILL.md +++ b/skills/code-documentation-code-explain/SKILL.md @@ -1,6 +1,6 @@ --- name: code-documentation-code-explain -description: "You are a code education expert specializing in explaining complex code through clear narratives, visual diagrams, and step-by-step breakdowns. Transform difficult concepts into understandable explanations." +description: "You are a code education expert specializing in explaining complex code through clear narratives, visual diagrams, and step-by-step breakdowns. Transform difficult concepts into understandable expl..." --- # Code Explanation and Analysis diff --git a/skills/code-documentation-doc-generate/SKILL.md b/skills/code-documentation-doc-generate/SKILL.md index db9900b0..2ee34f81 100644 --- a/skills/code-documentation-doc-generate/SKILL.md +++ b/skills/code-documentation-doc-generate/SKILL.md @@ -1,6 +1,6 @@ --- name: code-documentation-doc-generate -description: "You are a documentation expert specializing in creating comprehensive, maintainable documentation from code. Generate API docs, architecture diagrams, user guides, and technical references using AI-powered analysis and industry best practices." +description: "You are a documentation expert specializing in creating comprehensive, maintainable documentation from code. Generate API docs, architecture diagrams, user guides, and technical references using AI..." --- # Automated Documentation Generation diff --git a/skills/code-refactoring-refactor-clean/SKILL.md b/skills/code-refactoring-refactor-clean/SKILL.md index cfe8ab1b..18235d03 100644 --- a/skills/code-refactoring-refactor-clean/SKILL.md +++ b/skills/code-refactoring-refactor-clean/SKILL.md @@ -1,6 +1,6 @@ --- name: code-refactoring-refactor-clean -description: "You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its quality, maintainability, and performance." +description: "You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its..." --- # Refactor and Clean Code diff --git a/skills/code-review-excellence/SKILL.md b/skills/code-review-excellence/SKILL.md index d2972e54..f6ec8e34 100644 --- a/skills/code-review-excellence/SKILL.md +++ b/skills/code-review-excellence/SKILL.md @@ -1,6 +1,6 @@ --- name: code-review-excellence -description: Master effective code review practices to provide constructive feedback, catch bugs early, and foster knowledge sharing while maintaining team morale. Use when reviewing pull requests, establishing review standards, or mentoring developers. +description: "Master effective code review practices to provide constructive feedback, catch bugs early, and foster knowledge sharing while maintaining team morale. Use when reviewing pull requests, establishing..." --- # Code Review Excellence diff --git a/skills/codebase-cleanup-deps-audit/SKILL.md b/skills/codebase-cleanup-deps-audit/SKILL.md index ae7ecadd..bec50205 100644 --- a/skills/codebase-cleanup-deps-audit/SKILL.md +++ b/skills/codebase-cleanup-deps-audit/SKILL.md @@ -1,6 +1,6 @@ --- name: codebase-cleanup-deps-audit -description: "You are a dependency security expert specializing in vulnerability scanning, license compliance, and supply chain security. Analyze project dependencies for known vulnerabilities, licensing issues, outdated packages, and provide actionable remediation strategies." +description: "You are a dependency security expert specializing in vulnerability scanning, license compliance, and supply chain security. Analyze project dependencies for known vulnerabilities, licensing issues,..." --- # Dependency Audit and Security Analysis diff --git a/skills/codebase-cleanup-refactor-clean/SKILL.md b/skills/codebase-cleanup-refactor-clean/SKILL.md index b4889f0b..858e3564 100644 --- a/skills/codebase-cleanup-refactor-clean/SKILL.md +++ b/skills/codebase-cleanup-refactor-clean/SKILL.md @@ -1,6 +1,6 @@ --- name: codebase-cleanup-refactor-clean -description: "You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its quality, maintainability, and performance." +description: "You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its..." --- # Refactor and Clean Code diff --git a/skills/commit/SKILL.md b/skills/commit/SKILL.md index 7e0846cb..d483b603 100644 --- a/skills/commit/SKILL.md +++ b/skills/commit/SKILL.md @@ -1,6 +1,6 @@ --- name: commit -description: "Create commit messages following Sentry conventions. Use when committing code changes, writing commit messages, or formatting git history. Follows conventional commits with Sentry-specific issue references." +description: "Create commit messages following Sentry conventions. Use when committing code changes, writing commit messages, or formatting git history. Follows conventional commits with Sentry-specific issue re..." source: "https://github.com/getsentry/skills/tree/main/plugins/sentry-skills/skills/commit" risk: safe --- diff --git a/skills/competitor-alternatives/SKILL.md b/skills/competitor-alternatives/SKILL.md index 9cf4083a..0526d5d6 100644 --- a/skills/competitor-alternatives/SKILL.md +++ b/skills/competitor-alternatives/SKILL.md @@ -1,6 +1,6 @@ --- name: competitor-alternatives -description: "When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' or 'competitive landing pages.' Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. Emphasizes deep research, modular content architecture, and varied section types beyond feature tables." +description: "When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'compa..." --- # Competitor & Alternative Pages diff --git a/skills/comprehensive-review-pr-enhance/SKILL.md b/skills/comprehensive-review-pr-enhance/SKILL.md index 8ed009c0..9ef94ef4 100644 --- a/skills/comprehensive-review-pr-enhance/SKILL.md +++ b/skills/comprehensive-review-pr-enhance/SKILL.md @@ -1,6 +1,6 @@ --- name: comprehensive-review-pr-enhance -description: "You are a PR optimization expert specializing in creating high-quality pull requests that facilitate efficient code reviews. Generate comprehensive PR descriptions, automate review processes, and ensure PRs follow best practices for clarity, size, and reviewability." +description: "You are a PR optimization expert specializing in creating high-quality pull requests that facilitate efficient code reviews. Generate comprehensive PR descriptions, automate review processes, and e..." --- # Pull Request Enhancement diff --git a/skills/computer-use-agents/SKILL.md b/skills/computer-use-agents/SKILL.md index ab0daa87..f4c8ab71 100644 --- a/skills/computer-use-agents/SKILL.md +++ b/skills/computer-use-agents/SKILL.md @@ -1,6 +1,6 @@ --- name: computer-use-agents -description: "Build AI agents that interact with computers like humans do - viewing screens, moving cursors, clicking buttons, and typing text. Covers Anthropic's Computer Use, OpenAI's Operator/CUA, and open-source alternatives. Critical focus on sandboxing, security, and handling the unique challenges of vision-based control. Use when: computer use, desktop automation agent, screen control AI, vision-based agent, GUI automation." +description: "Build AI agents that interact with computers like humans do - viewing screens, moving cursors, clicking buttons, and typing text. Covers Anthropic's Computer Use, OpenAI's Operator/CUA, and open-so..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/content-creator/SKILL.md b/skills/content-creator/SKILL.md index 0600addf..d2e0e059 100644 --- a/skills/content-creator/SKILL.md +++ b/skills/content-creator/SKILL.md @@ -1,6 +1,6 @@ --- name: content-creator -description: Create SEO-optimized marketing content with consistent brand voice. Includes brand voice analyzer, SEO optimizer, content frameworks, and social media templates. Use when writing blog posts, creating social media content, analyzing brand voice, optimizing SEO, planning content calendars, or when user mentions content creation, brand voice, SEO optimization, social media marketing, or content strategy. +description: "Create SEO-optimized marketing content with consistent brand voice. Includes brand voice analyzer, SEO optimizer, content frameworks, and social media templates. Use when writing blog posts, creati..." license: MIT metadata: version: 1.0.0 diff --git a/skills/context-window-management/SKILL.md b/skills/context-window-management/SKILL.md index d60f4ae0..206a3f4a 100644 --- a/skills/context-window-management/SKILL.md +++ b/skills/context-window-management/SKILL.md @@ -1,6 +1,6 @@ --- name: context-window-management -description: "Strategies for managing LLM context windows including summarization, trimming, routing, and avoiding context rot Use when: context window, token limit, context management, context engineering, long context." +description: "Strategies for managing LLM context windows including summarization, trimming, routing, and avoiding context rot Use when: context window, token limit, context management, context engineering, long..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/copilot-sdk/SKILL.md b/skills/copilot-sdk/SKILL.md index 6caeeea7..9c0ac7ae 100644 --- a/skills/copilot-sdk/SKILL.md +++ b/skills/copilot-sdk/SKILL.md @@ -1,6 +1,6 @@ --- name: copilot-sdk -description: Build applications powered by GitHub Copilot using the Copilot SDK. Use when creating programmatic integrations with Copilot across Node.js/TypeScript, Python, Go, or .NET. Covers session management, custom tools, streaming, hooks, MCP servers, BYOK providers, session persistence, and custom agents. Requires GitHub Copilot CLI installed and a GitHub Copilot subscription (unless using BYOK). +description: "Build applications powered by GitHub Copilot using the Copilot SDK. Use when creating programmatic integrations with Copilot across Node.js/TypeScript, Python, Go, or .NET. Covers session managemen..." --- # GitHub Copilot SDK diff --git a/skills/copy-editing/SKILL.md b/skills/copy-editing/SKILL.md index 467955f8..75011133 100644 --- a/skills/copy-editing/SKILL.md +++ b/skills/copy-editing/SKILL.md @@ -1,6 +1,6 @@ --- name: copy-editing -description: "When the user wants to edit, review, or improve existing marketing copy. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' or 'copy sweep.' This skill provides a systematic approach to editing marketing copy through multiple focused passes." +description: "When the user wants to edit, review, or improve existing marketing copy. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this ..." --- # Copy Editing diff --git a/skills/cost-optimization/SKILL.md b/skills/cost-optimization/SKILL.md index 434546d9..a4e6b5a1 100644 --- a/skills/cost-optimization/SKILL.md +++ b/skills/cost-optimization/SKILL.md @@ -1,6 +1,6 @@ --- name: cost-optimization -description: Optimize cloud costs through resource rightsizing, tagging strategies, reserved instances, and spending analysis. Use when reducing cloud expenses, analyzing infrastructure costs, or implementing cost governance policies. +description: "Optimize cloud costs through resource rightsizing, tagging strategies, reserved instances, and spending analysis. Use when reducing cloud expenses, analyzing infrastructure costs, or implementing c..." --- # Cloud Cost Optimization diff --git a/skills/crewai/SKILL.md b/skills/crewai/SKILL.md index 33d67aab..bb440de0 100644 --- a/skills/crewai/SKILL.md +++ b/skills/crewai/SKILL.md @@ -1,6 +1,6 @@ --- name: crewai -description: "Expert in CrewAI - the leading role-based multi-agent framework used by 60% of Fortune 500 companies. Covers agent design with roles and goals, task definition, crew orchestration, process types (sequential, hierarchical, parallel), memory systems, and flows for complex workflows. Essential for building collaborative AI agent teams. Use when: crewai, multi-agent team, agent roles, crew of agents, role-based agents." +description: "Expert in CrewAI - the leading role-based multi-agent framework used by 60% of Fortune 500 companies. Covers agent design with roles and goals, task definition, crew orchestration, process types (s..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/data-storytelling/SKILL.md b/skills/data-storytelling/SKILL.md index 14b37994..62c724ca 100644 --- a/skills/data-storytelling/SKILL.md +++ b/skills/data-storytelling/SKILL.md @@ -1,6 +1,6 @@ --- name: data-storytelling -description: Transform data into compelling narratives using visualization, context, and persuasive structure. Use when presenting analytics to stakeholders, creating data reports, or building executive presentations. +description: "Transform data into compelling narratives using visualization, context, and persuasive structure. Use when presenting analytics to stakeholders, creating data reports, or building executive present..." --- # Data Storytelling diff --git a/skills/database-cloud-optimization-cost-optimize/SKILL.md b/skills/database-cloud-optimization-cost-optimize/SKILL.md index 6170ef83..05530c21 100644 --- a/skills/database-cloud-optimization-cost-optimize/SKILL.md +++ b/skills/database-cloud-optimization-cost-optimize/SKILL.md @@ -1,6 +1,6 @@ --- name: database-cloud-optimization-cost-optimize -description: "You are a cloud cost optimization expert specializing in reducing infrastructure expenses while maintaining performance and reliability. Analyze cloud spending, identify savings opportunities, and implement cost-effective architectures across AWS, Azure, and GCP." +description: "You are a cloud cost optimization expert specializing in reducing infrastructure expenses while maintaining performance and reliability. Analyze cloud spending, identify savings opportunities, and ..." --- # Cloud Cost Optimization diff --git a/skills/database-migration/SKILL.md b/skills/database-migration/SKILL.md index 440a7021..db28297c 100644 --- a/skills/database-migration/SKILL.md +++ b/skills/database-migration/SKILL.md @@ -1,6 +1,6 @@ --- name: database-migration -description: Execute database migrations across ORMs and platforms with zero-downtime strategies, data transformation, and rollback procedures. Use when migrating databases, changing schemas, performing data transformations, or implementing zero-downtime deployment strategies. +description: "Execute database migrations across ORMs and platforms with zero-downtime strategies, data transformation, and rollback procedures. Use when migrating databases, changing schemas, performing data tr..." --- # Database Migration diff --git a/skills/dbos-golang/SKILL.md b/skills/dbos-golang/SKILL.md index 5ad2bb1b..63aade6f 100644 --- a/skills/dbos-golang/SKILL.md +++ b/skills/dbos-golang/SKILL.md @@ -1,6 +1,6 @@ --- name: dbos-golang -description: DBOS Go SDK for building reliable, fault-tolerant applications with durable workflows. Use this skill when writing Go code with DBOS, creating workflows and steps, using queues, using the DBOS Client from external applications, or building Go applications that need to be resilient to failures. +description: "DBOS Go SDK for building reliable, fault-tolerant applications with durable workflows. Use this skill when writing Go code with DBOS, creating workflows and steps, using queues, using the DBOS Clie..." risk: safe source: https://docs.dbos.dev/ license: MIT diff --git a/skills/dbos-python/SKILL.md b/skills/dbos-python/SKILL.md index 5bfe261a..f516acf5 100644 --- a/skills/dbos-python/SKILL.md +++ b/skills/dbos-python/SKILL.md @@ -1,6 +1,6 @@ --- name: dbos-python -description: DBOS Python SDK for building reliable, fault-tolerant applications with durable workflows. Use this skill when writing Python code with DBOS, creating workflows and steps, using queues, using DBOSClient from external applications, or building applications that need to be resilient to failures. +description: "DBOS Python SDK for building reliable, fault-tolerant applications with durable workflows. Use this skill when writing Python code with DBOS, creating workflows and steps, using queues, using DBOSC..." risk: safe source: https://docs.dbos.dev/ license: MIT diff --git a/skills/dbos-typescript/SKILL.md b/skills/dbos-typescript/SKILL.md index 33ef7823..5504f648 100644 --- a/skills/dbos-typescript/SKILL.md +++ b/skills/dbos-typescript/SKILL.md @@ -1,6 +1,6 @@ --- name: dbos-typescript -description: DBOS TypeScript SDK for building reliable, fault-tolerant applications with durable workflows. Use this skill when writing TypeScript code with DBOS, creating workflows and steps, using queues, using DBOSClient from external applications, or building applications that need to be resilient to failures. +description: "DBOS TypeScript SDK for building reliable, fault-tolerant applications with durable workflows. Use this skill when writing TypeScript code with DBOS, creating workflows and steps, using queues, usi..." risk: safe source: https://docs.dbos.dev/ license: MIT diff --git a/skills/dbt-transformation-patterns/SKILL.md b/skills/dbt-transformation-patterns/SKILL.md index 1a5ae9f4..72e7d157 100644 --- a/skills/dbt-transformation-patterns/SKILL.md +++ b/skills/dbt-transformation-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: dbt-transformation-patterns -description: Master dbt (data build tool) for analytics engineering with model organization, testing, documentation, and incremental strategies. Use when building data transformations, creating data models, or implementing analytics engineering best practices. +description: "Master dbt (data build tool) for analytics engineering with model organization, testing, documentation, and incremental strategies. Use when building data transformations, creating data models, or ..." --- # dbt Transformation Patterns diff --git a/skills/debugging-strategies/SKILL.md b/skills/debugging-strategies/SKILL.md index 95c006d0..43087350 100644 --- a/skills/debugging-strategies/SKILL.md +++ b/skills/debugging-strategies/SKILL.md @@ -1,6 +1,6 @@ --- name: debugging-strategies -description: Master systematic debugging techniques, profiling tools, and root cause analysis to efficiently track down bugs across any codebase or technology stack. Use when investigating bugs, performance issues, or unexpected behavior. +description: "Master systematic debugging techniques, profiling tools, and root cause analysis to efficiently track down bugs across any codebase or technology stack. Use when investigating bugs, performance iss..." --- # Debugging Strategies diff --git a/skills/deep-research/SKILL.md b/skills/deep-research/SKILL.md index 57fdccdb..cf6adc7e 100644 --- a/skills/deep-research/SKILL.md +++ b/skills/deep-research/SKILL.md @@ -1,6 +1,6 @@ --- name: deep-research -description: "Execute autonomous multi-step research using Google Gemini Deep Research Agent. Use for: market analysis, competitive landscaping, literature reviews, technical research, due diligence. Takes 2-10 minutes but produces detailed, cited reports. Costs $2-5 per task." +description: "Execute autonomous multi-step research using Google Gemini Deep Research Agent. Use for: market analysis, competitive landscaping, literature reviews, technical research, due diligence. Takes 2-10 ..." source: "https://github.com/sanjay3290/ai-skills/tree/main/skills/deep-research" risk: safe --- diff --git a/skills/dependency-management-deps-audit/SKILL.md b/skills/dependency-management-deps-audit/SKILL.md index 3df519a5..5a514b94 100644 --- a/skills/dependency-management-deps-audit/SKILL.md +++ b/skills/dependency-management-deps-audit/SKILL.md @@ -1,6 +1,6 @@ --- name: dependency-management-deps-audit -description: "You are a dependency security expert specializing in vulnerability scanning, license compliance, and supply chain security. Analyze project dependencies for known vulnerabilities, licensing issues, outdated packages, and provide actionable remediation strategies." +description: "You are a dependency security expert specializing in vulnerability scanning, license compliance, and supply chain security. Analyze project dependencies for known vulnerabilities, licensing issues,..." --- # Dependency Audit and Security Analysis diff --git a/skills/dependency-upgrade/SKILL.md b/skills/dependency-upgrade/SKILL.md index f290347f..b0275ebc 100644 --- a/skills/dependency-upgrade/SKILL.md +++ b/skills/dependency-upgrade/SKILL.md @@ -1,6 +1,6 @@ --- name: dependency-upgrade -description: Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries. +description: "Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing brea..." --- # Dependency Upgrade diff --git a/skills/deployment-pipeline-design/SKILL.md b/skills/deployment-pipeline-design/SKILL.md index ee9ce36e..c3dcb200 100644 --- a/skills/deployment-pipeline-design/SKILL.md +++ b/skills/deployment-pipeline-design/SKILL.md @@ -1,6 +1,6 @@ --- name: deployment-pipeline-design -description: Design multi-stage CI/CD pipelines with approval gates, security checks, and deployment orchestration. Use when architecting deployment workflows, setting up continuous delivery, or implementing GitOps practices. +description: "Design multi-stage CI/CD pipelines with approval gates, security checks, and deployment orchestration. Use when architecting deployment workflows, setting up continuous delivery, or implementing Gi..." --- # Deployment Pipeline Design diff --git a/skills/distributed-debugging-debug-trace/SKILL.md b/skills/distributed-debugging-debug-trace/SKILL.md index 7b8d99aa..0231ddfd 100644 --- a/skills/distributed-debugging-debug-trace/SKILL.md +++ b/skills/distributed-debugging-debug-trace/SKILL.md @@ -1,6 +1,6 @@ --- name: distributed-debugging-debug-trace -description: "You are a debugging expert specializing in setting up comprehensive debugging environments, distributed tracing, and diagnostic tools. Configure debugging workflows, implement tracing solutions, and establish troubleshooting practices for development and production environments." +description: "You are a debugging expert specializing in setting up comprehensive debugging environments, distributed tracing, and diagnostic tools. Configure debugging workflows, implement tracing solutions, an..." --- # Debug and Trace Configuration diff --git a/skills/distributed-tracing/SKILL.md b/skills/distributed-tracing/SKILL.md index 1721b8ba..9d210290 100644 --- a/skills/distributed-tracing/SKILL.md +++ b/skills/distributed-tracing/SKILL.md @@ -1,6 +1,6 @@ --- name: distributed-tracing -description: Implement distributed tracing with Jaeger and Tempo to track requests across microservices and identify performance bottlenecks. Use when debugging microservices, analyzing request flows, or implementing observability for distributed systems. +description: "Implement distributed tracing with Jaeger and Tempo to track requests across microservices and identify performance bottlenecks. Use when debugging microservices, analyzing request flows, or implem..." --- # Distributed Tracing diff --git a/skills/doc-coauthoring/SKILL.md b/skills/doc-coauthoring/SKILL.md index a5a69839..3eb61a41 100644 --- a/skills/doc-coauthoring/SKILL.md +++ b/skills/doc-coauthoring/SKILL.md @@ -1,6 +1,6 @@ --- name: doc-coauthoring -description: Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks. +description: "Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This ..." --- # Doc Co-Authoring Workflow diff --git a/skills/docker-expert/SKILL.md b/skills/docker-expert/SKILL.md index 381a5ca0..069612fa 100644 --- a/skills/docker-expert/SKILL.md +++ b/skills/docker-expert/SKILL.md @@ -1,6 +1,6 @@ --- name: docker-expert -description: Docker containerization expert with deep knowledge of multi-stage builds, image optimization, container security, Docker Compose orchestration, and production deployment patterns. Use PROACTIVELY for Dockerfile optimization, container issues, image size problems, security hardening, networking, and orchestration challenges. +description: "Docker containerization expert with deep knowledge of multi-stage builds, image optimization, container security, Docker Compose orchestration, and production deployment patterns. Use PROACTIVELY f..." category: devops color: blue displayName: Docker Expert diff --git a/skills/documentation-generation-doc-generate/SKILL.md b/skills/documentation-generation-doc-generate/SKILL.md index 3a069407..f8fe6c45 100644 --- a/skills/documentation-generation-doc-generate/SKILL.md +++ b/skills/documentation-generation-doc-generate/SKILL.md @@ -1,6 +1,6 @@ --- name: documentation-generation-doc-generate -description: "You are a documentation expert specializing in creating comprehensive, maintainable documentation from code. Generate API docs, architecture diagrams, user guides, and technical references using AI-powered analysis and industry best practices." +description: "You are a documentation expert specializing in creating comprehensive, maintainable documentation from code. Generate API docs, architecture diagrams, user guides, and technical references using AI..." --- # Automated Documentation Generation diff --git a/skills/docx-official/SKILL.md b/skills/docx-official/SKILL.md index 66466389..1c58536d 100644 --- a/skills/docx-official/SKILL.md +++ b/skills/docx-official/SKILL.md @@ -1,6 +1,6 @@ --- -name: docx -description: "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks" +name: docx-official +description: "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional document..." license: Proprietary. LICENSE.txt has complete terms --- diff --git a/skills/dotnet-backend-patterns/SKILL.md b/skills/dotnet-backend-patterns/SKILL.md index 0f0b7328..90137a76 100644 --- a/skills/dotnet-backend-patterns/SKILL.md +++ b/skills/dotnet-backend-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: dotnet-backend-patterns -description: Master C#/.NET backend development patterns for building robust APIs, MCP servers, and enterprise applications. Covers async/await, dependency injection, Entity Framework Core, Dapper, configuration, caching, and testing with xUnit. Use when developing .NET backends, reviewing C# code, or designing API architectures. +description: "Master C#/.NET backend development patterns for building robust APIs, MCP servers, and enterprise applications. Covers async/await, dependency injection, Entity Framework Core, Dapper, configuratio..." --- # .NET Backend Development Patterns diff --git a/skills/e2e-testing-patterns/SKILL.md b/skills/e2e-testing-patterns/SKILL.md index 1fee476a..58f95209 100644 --- a/skills/e2e-testing-patterns/SKILL.md +++ b/skills/e2e-testing-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: e2e-testing-patterns -description: Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky tests, or establishing testing standards. +description: "Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky..." --- # E2E Testing Patterns diff --git a/skills/email-sequence/SKILL.md b/skills/email-sequence/SKILL.md index f685d40d..183703af 100644 --- a/skills/email-sequence/SKILL.md +++ b/skills/email-sequence/SKILL.md @@ -1,6 +1,6 @@ --- name: email-sequence -description: When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," or "lifecycle emails." For in-app onboarding, see onboarding-cro. +description: "When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nur..." --- # Email Sequence Design diff --git a/skills/email-systems/SKILL.md b/skills/email-systems/SKILL.md index 76b34463..c73da03b 100644 --- a/skills/email-systems/SKILL.md +++ b/skills/email-systems/SKILL.md @@ -1,6 +1,6 @@ --- name: email-systems -description: "Email has the highest ROI of any marketing channel. $36 for every $1 spent. Yet most startups treat it as an afterthought - bulk blasts, no personalization, landing in spam folders. This skill covers transactional email that works, marketing automation that converts, deliverability that reaches inboxes, and the infrastructure decisions that scale. Use when: keywords, file_patterns, code_patterns." +description: "Email has the highest ROI of any marketing channel. $36 for every $1 spent. Yet most startups treat it as an afterthought - bulk blasts, no personalization, landing in spam folders. This skill cov..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/embedding-strategies/SKILL.md b/skills/embedding-strategies/SKILL.md index 5c62713f..f0874de5 100644 --- a/skills/embedding-strategies/SKILL.md +++ b/skills/embedding-strategies/SKILL.md @@ -1,6 +1,6 @@ --- name: embedding-strategies -description: Select and optimize embedding models for semantic search and RAG applications. Use when choosing embedding models, implementing chunking strategies, or optimizing embedding quality for specific domains. +description: "Select and optimize embedding models for semantic search and RAG applications. Use when choosing embedding models, implementing chunking strategies, or optimizing embedding quality for specific dom..." --- # Embedding Strategies diff --git a/skills/employment-contract-templates/SKILL.md b/skills/employment-contract-templates/SKILL.md index c063c51e..141e2df5 100644 --- a/skills/employment-contract-templates/SKILL.md +++ b/skills/employment-contract-templates/SKILL.md @@ -1,6 +1,6 @@ --- name: employment-contract-templates -description: Create employment contracts, offer letters, and HR policy documents following legal best practices. Use when drafting employment agreements, creating HR policies, or standardizing employment documentation. +description: "Create employment contracts, offer letters, and HR policy documents following legal best practices. Use when drafting employment agreements, creating HR policies, or standardizing employment docume..." --- # Employment Contract Templates diff --git a/skills/error-debugging-error-trace/SKILL.md b/skills/error-debugging-error-trace/SKILL.md index a335745c..d50d29c3 100644 --- a/skills/error-debugging-error-trace/SKILL.md +++ b/skills/error-debugging-error-trace/SKILL.md @@ -1,6 +1,6 @@ --- name: error-debugging-error-trace -description: "You are an error tracking and observability expert specializing in implementing comprehensive error monitoring solutions. Set up error tracking systems, configure alerts, implement structured logging, and ensure teams can quickly identify and resolve production issues." +description: "You are an error tracking and observability expert specializing in implementing comprehensive error monitoring solutions. Set up error tracking systems, configure alerts, implement structured loggi..." --- # Error Tracking and Monitoring diff --git a/skills/error-handling-patterns/SKILL.md b/skills/error-handling-patterns/SKILL.md index 2e2a5736..e8775666 100644 --- a/skills/error-handling-patterns/SKILL.md +++ b/skills/error-handling-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: error-handling-patterns -description: Master error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applications. Use when implementing error handling, designing APIs, or improving application reliability. +description: "Master error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applications. Use when implementing error handling..." --- # Error Handling Patterns diff --git a/skills/ethical-hacking-methodology/SKILL.md b/skills/ethical-hacking-methodology/SKILL.md index 999334d7..096edc61 100644 --- a/skills/ethical-hacking-methodology/SKILL.md +++ b/skills/ethical-hacking-methodology/SKILL.md @@ -1,6 +1,6 @@ --- -name: Ethical Hacking Methodology -description: This skill should be used when the user asks to "learn ethical hacking", "understand penetration testing lifecycle", "perform reconnaissance", "conduct security scanning", "exploit vulnerabilities", or "write penetration test reports". It provides comprehensive ethical hacking methodology and techniques. +name: ethical-hacking-methodology +description: "This skill should be used when the user asks to "learn ethical hacking", "understand penetration testing lifecycle", "perform reconnaissance", "conduct security scanning", "exploit vulnerabilities"..." metadata: author: zebbern version: "1.1" diff --git a/skills/event-sourcing-architect/SKILL.md b/skills/event-sourcing-architect/SKILL.md index 707ae80c..c21ba675 100644 --- a/skills/event-sourcing-architect/SKILL.md +++ b/skills/event-sourcing-architect/SKILL.md @@ -1,6 +1,6 @@ --- name: event-sourcing-architect -description: "Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event store design, projection building, saga orchestration, and eventual consistency patterns. Use PROACTIVELY for event-sourced systems, audit trails, or temporal queries." +description: "Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event store design, projection building, saga orchestration, and eventual consistency patterns. Use PROACTIVELY for e..." --- # Event Sourcing Architect diff --git a/skills/fastapi-router-py/SKILL.md b/skills/fastapi-router-py/SKILL.md index ed3cf1cf..30775a7b 100644 --- a/skills/fastapi-router-py/SKILL.md +++ b/skills/fastapi-router-py/SKILL.md @@ -1,6 +1,6 @@ --- name: fastapi-router-py -description: Create FastAPI routers with CRUD operations, authentication dependencies, and proper response models. Use when building REST API endpoints, creating new routes, implementing CRUD operations, or adding authenticated endpoints in FastAPI applications. +description: "Create FastAPI routers with CRUD operations, authentication dependencies, and proper response models. Use when building REST API endpoints, creating new routes, implementing CRUD operations, or add..." --- # FastAPI Router diff --git a/skills/file-organizer/SKILL.md b/skills/file-organizer/SKILL.md index 0af136e9..31003ef2 100644 --- a/skills/file-organizer/SKILL.md +++ b/skills/file-organizer/SKILL.md @@ -1,6 +1,6 @@ --- name: file-organizer -description: Intelligently organizes files and folders by understanding context, finding duplicates, and suggesting better organizational structures. Use when user wants to clean up directories, organize downloads, remove duplicates, or restructure projects. +description: "Intelligently organizes files and folders by understanding context, finding duplicates, and suggesting better organizational structures. Use when user wants to clean up directories, organize downlo..." --- # File Organizer diff --git a/skills/file-path-traversal/SKILL.md b/skills/file-path-traversal/SKILL.md index af4fa47b..6df19126 100644 --- a/skills/file-path-traversal/SKILL.md +++ b/skills/file-path-traversal/SKILL.md @@ -1,6 +1,6 @@ --- -name: File Path Traversal Testing -description: This skill should be used when the user asks to "test for directory traversal", "exploit path traversal vulnerabilities", "read arbitrary files through web applications", "find LFI vulnerabilities", or "access files outside web root". It provides comprehensive file path traversal attack and testing methodologies. +name: file-path-traversal +description: "This skill should be used when the user asks to "test for directory traversal", "exploit path traversal vulnerabilities", "read arbitrary files through web applications", "find LFI vulnerabilities"..." metadata: author: zebbern version: "1.1" diff --git a/skills/file-uploads/SKILL.md b/skills/file-uploads/SKILL.md index 2665e203..42b5d7cc 100644 --- a/skills/file-uploads/SKILL.md +++ b/skills/file-uploads/SKILL.md @@ -1,6 +1,6 @@ --- name: file-uploads -description: "Expert at handling file uploads and cloud storage. Covers S3, Cloudflare R2, presigned URLs, multipart uploads, and image optimization. Knows how to handle large files without blocking. Use when: file upload, S3, R2, presigned URL, multipart." +description: "Expert at handling file uploads and cloud storage. Covers S3, Cloudflare R2, presigned URLs, multipart uploads, and image optimization. Knows how to handle large files without blocking. Use when: f..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/firebase/SKILL.md b/skills/firebase/SKILL.md index 4c18e980..b760fd88 100644 --- a/skills/firebase/SKILL.md +++ b/skills/firebase/SKILL.md @@ -1,6 +1,6 @@ --- name: firebase -description: "Firebase gives you a complete backend in minutes - auth, database, storage, functions, hosting. But the ease of setup hides real complexity. Security rules are your last line of defense, and they're often wrong. Firestore queries are limited, and you learn this after you've designed your data model. This skill covers Firebase Authentication, Firestore, Realtime Database, Cloud Functions, Cloud Storage, and Firebase Hosting. Key insight: Firebase is optimized for read-heavy, denormalized data. I" +description: "Firebase gives you a complete backend in minutes - auth, database, storage, functions, hosting. But the ease of setup hides real complexity. Security rules are your last line of defense, and they'r..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/free-tool-strategy/SKILL.md b/skills/free-tool-strategy/SKILL.md index ecf0a1e5..f3b204dd 100644 --- a/skills/free-tool-strategy/SKILL.md +++ b/skills/free-tool-strategy/SKILL.md @@ -1,6 +1,6 @@ --- name: free-tool-strategy -description: When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "free tool," "marketing tool," "calculator," "generator," "interactive tool," "lead gen tool," "build a tool for leads," or "free resource." This skill bridges engineering and marketing — useful for founders and technical marketers. +description: "When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "fre..." --- # Free Tool Strategy (Engineering as Marketing) diff --git a/skills/frontend-design/SKILL.md b/skills/frontend-design/SKILL.md index 4efede84..bd291bd3 100644 --- a/skills/frontend-design/SKILL.md +++ b/skills/frontend-design/SKILL.md @@ -1,6 +1,6 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications. +description: "Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard..." license: Complete terms in LICENSE.txt --- diff --git a/skills/frontend-dev-guidelines/SKILL.md b/skills/frontend-dev-guidelines/SKILL.md index fcd3ea5c..f0e29de1 100644 --- a/skills/frontend-dev-guidelines/SKILL.md +++ b/skills/frontend-dev-guidelines/SKILL.md @@ -1,6 +1,6 @@ --- name: frontend-dev-guidelines -description: Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router, performance optimization, and strict TypeScript practices. +description: "Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router..." --- diff --git a/skills/frontend-slides/SKILL.md b/skills/frontend-slides/SKILL.md index 9c2e7ede..16954db5 100644 --- a/skills/frontend-slides/SKILL.md +++ b/skills/frontend-slides/SKILL.md @@ -1,6 +1,6 @@ --- name: frontend-slides -description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. +description: "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a..." source: https://github.com/zarazhangrui/frontend-slides risk: safe --- diff --git a/skills/frontend-ui-dark-ts/SKILL.md b/skills/frontend-ui-dark-ts/SKILL.md index 7b220f10..a5c2ea0b 100644 --- a/skills/frontend-ui-dark-ts/SKILL.md +++ b/skills/frontend-ui-dark-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: frontend-ui-dark-ts -description: Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic. +description: "Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces..." --- # Frontend UI Dark Theme (TypeScript) diff --git a/skills/gcp-cloud-run/SKILL.md b/skills/gcp-cloud-run/SKILL.md index 9c2f491f..b16ec27d 100644 --- a/skills/gcp-cloud-run/SKILL.md +++ b/skills/gcp-cloud-run/SKILL.md @@ -1,6 +1,6 @@ --- name: gcp-cloud-run -description: "Specialized skill for building production-ready serverless applications on GCP. Covers Cloud Run services (containerized), Cloud Run Functions (event-driven), cold start optimization, and event-driven architecture with Pub/Sub." +description: "Specialized skill for building production-ready serverless applications on GCP. Covers Cloud Run services (containerized), Cloud Run Functions (event-driven), cold start optimization, and event-dri..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/gdpr-data-handling/SKILL.md b/skills/gdpr-data-handling/SKILL.md index d7eaf83d..476e8523 100644 --- a/skills/gdpr-data-handling/SKILL.md +++ b/skills/gdpr-data-handling/SKILL.md @@ -1,6 +1,6 @@ --- name: gdpr-data-handling -description: Implement GDPR-compliant data handling with consent management, data subject rights, and privacy by design. Use when building systems that process EU personal data, implementing privacy controls, or conducting GDPR compliance reviews. +description: "Implement GDPR-compliant data handling with consent management, data subject rights, and privacy by design. Use when building systems that process EU personal data, implementing privacy controls, o..." --- # GDPR Data Handling diff --git a/skills/gemini-api-dev/SKILL.md b/skills/gemini-api-dev/SKILL.md index f5deb715..12fed661 100644 --- a/skills/gemini-api-dev/SKILL.md +++ b/skills/gemini-api-dev/SKILL.md @@ -1,6 +1,6 @@ --- name: gemini-api-dev -description: Use this skill when building applications with Gemini models, Gemini API, working with multimodal content (text, images, audio, video), implementing function calling, using structured outputs, or needing current model specifications. Covers SDK usage (google-genai for Python, @google/genai for JavaScript/TypeScript), model selection, and API capabilities. +description: "Use this skill when building applications with Gemini models, Gemini API, working with multimodal content (text, images, audio, video), implementing function calling, using structured outputs, or n..." --- # Gemini API Development Skill diff --git a/skills/git-advanced-workflows/SKILL.md b/skills/git-advanced-workflows/SKILL.md index 940edc78..9c12212c 100644 --- a/skills/git-advanced-workflows/SKILL.md +++ b/skills/git-advanced-workflows/SKILL.md @@ -1,6 +1,6 @@ --- name: git-advanced-workflows -description: Master advanced Git workflows including rebasing, cherry-picking, bisect, worktrees, and reflog to maintain clean history and recover from any situation. Use when managing complex Git histories, collaborating on feature branches, or troubleshooting repository issues. +description: "Master advanced Git workflows including rebasing, cherry-picking, bisect, worktrees, and reflog to maintain clean history and recover from any situation. Use when managing complex Git histories, co..." --- # Git Advanced Workflows diff --git a/skills/git-pushing/SKILL.md b/skills/git-pushing/SKILL.md index 218f88e4..4cbeb301 100644 --- a/skills/git-pushing/SKILL.md +++ b/skills/git-pushing/SKILL.md @@ -1,6 +1,6 @@ --- name: git-pushing -description: Stage, commit, and push git changes with conventional commit messages. Use when user wants to commit and push changes, mentions pushing to remote, or asks to save and push their work. Also activates when user says "push changes", "commit and push", "push this", "push to github", or similar git workflow requests. +description: "Stage, commit, and push git changes with conventional commit messages. Use when user wants to commit and push changes, mentions pushing to remote, or asks to save and push their work. Also activate..." --- # Git Push Workflow diff --git a/skills/github-actions-templates/SKILL.md b/skills/github-actions-templates/SKILL.md index 2409087a..33bb87dd 100644 --- a/skills/github-actions-templates/SKILL.md +++ b/skills/github-actions-templates/SKILL.md @@ -1,6 +1,6 @@ --- name: github-actions-templates -description: Create production-ready GitHub Actions workflows for automated testing, building, and deploying applications. Use when setting up CI/CD with GitHub Actions, automating development workflows, or creating reusable workflow templates. +description: "Create production-ready GitHub Actions workflows for automated testing, building, and deploying applications. Use when setting up CI/CD with GitHub Actions, automating development workflows, or cre..." --- # GitHub Actions Templates diff --git a/skills/github-issue-creator/SKILL.md b/skills/github-issue-creator/SKILL.md index 4351dcd3..a69c04b0 100644 --- a/skills/github-issue-creator/SKILL.md +++ b/skills/github-issue-creator/SKILL.md @@ -1,6 +1,6 @@ --- name: github-issue-creator -description: Convert raw notes, error logs, voice dictation, or screenshots into crisp GitHub-flavored markdown issue reports. Use when the user pastes bug info, error messages, or informal descriptions and wants a structured GitHub issue. Supports images/GIFs for visual evidence. +description: "Convert raw notes, error logs, voice dictation, or screenshots into crisp GitHub-flavored markdown issue reports. Use when the user pastes bug info, error messages, or informal descriptions and wan..." --- # GitHub Issue Creator diff --git a/skills/github-workflow-automation/SKILL.md b/skills/github-workflow-automation/SKILL.md index 975dfa7b..da3bb5d5 100644 --- a/skills/github-workflow-automation/SKILL.md +++ b/skills/github-workflow-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: github-workflow-automation -description: "Automate GitHub workflows with AI assistance. Includes PR reviews, issue triage, CI/CD integration, and Git operations. Use when automating GitHub workflows, setting up PR review automation, creating GitHub Actions, or triaging issues." +description: "Automate GitHub workflows with AI assistance. Includes PR reviews, issue triage, CI/CD integration, and Git operations. Use when automating GitHub workflows, setting up PR review automation, creati..." --- # 🔧 GitHub Workflow Automation diff --git a/skills/gitlab-ci-patterns/SKILL.md b/skills/gitlab-ci-patterns/SKILL.md index 9e6609fb..859ac2b7 100644 --- a/skills/gitlab-ci-patterns/SKILL.md +++ b/skills/gitlab-ci-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: gitlab-ci-patterns -description: Build GitLab CI/CD pipelines with multi-stage workflows, caching, and distributed runners for scalable automation. Use when implementing GitLab CI/CD, optimizing pipeline performance, or setting up automated testing and deployment. +description: "Build GitLab CI/CD pipelines with multi-stage workflows, caching, and distributed runners for scalable automation. Use when implementing GitLab CI/CD, optimizing pipeline performance, or setting up..." --- # GitLab CI Patterns diff --git a/skills/gitops-workflow/SKILL.md b/skills/gitops-workflow/SKILL.md index d39e6d1f..8751da1a 100644 --- a/skills/gitops-workflow/SKILL.md +++ b/skills/gitops-workflow/SKILL.md @@ -1,6 +1,6 @@ --- name: gitops-workflow -description: Implement GitOps workflows with ArgoCD and Flux for automated, declarative Kubernetes deployments with continuous reconciliation. Use when implementing GitOps practices, automating Kubernetes deployments, or setting up declarative infrastructure management. +description: "Implement GitOps workflows with ArgoCD and Flux for automated, declarative Kubernetes deployments with continuous reconciliation. Use when implementing GitOps practices, automating Kubernetes deplo..." --- # GitOps Workflow diff --git a/skills/google-calendar-automation/SKILL.md b/skills/google-calendar-automation/SKILL.md index c69d675f..029f64cb 100644 --- a/skills/google-calendar-automation/SKILL.md +++ b/skills/google-calendar-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: google-calendar-automation -description: "Automate Google Calendar events, scheduling, availability checks, and attendee management via Rube MCP (Composio). Create events, find free slots, manage attendees, and list calendars programmatically." +description: "Automate Google Calendar events, scheduling, availability checks, and attendee management via Rube MCP (Composio). Create events, find free slots, manage attendees, and list calendars programmatica..." requires: mcp: [rube] --- diff --git a/skills/google-drive-automation/SKILL.md b/skills/google-drive-automation/SKILL.md index 34b8713c..59da2520 100644 --- a/skills/google-drive-automation/SKILL.md +++ b/skills/google-drive-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: google-drive-automation -description: "Automate Google Drive file operations (upload, download, search, share, organize) via Rube MCP (Composio). Upload/download files, manage folders, share with permissions, and search across drives programmatically." +description: "Automate Google Drive file operations (upload, download, search, share, organize) via Rube MCP (Composio). Upload/download files, manage folders, share with permissions, and search across drives pr..." requires: mcp: [rube] --- diff --git a/skills/grafana-dashboards/SKILL.md b/skills/grafana-dashboards/SKILL.md index 7f62512b..3a60ad97 100644 --- a/skills/grafana-dashboards/SKILL.md +++ b/skills/grafana-dashboards/SKILL.md @@ -1,6 +1,6 @@ --- name: grafana-dashboards -description: Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visualizing metrics, or creating operational observability interfaces. +description: "Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visualizing metrics, or creating operational ..." --- # Grafana Dashboards diff --git a/skills/graphql/SKILL.md b/skills/graphql/SKILL.md index 90cc3600..239049b6 100644 --- a/skills/graphql/SKILL.md +++ b/skills/graphql/SKILL.md @@ -1,6 +1,6 @@ --- name: graphql -description: "GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully." +description: "GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper co..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/helm-chart-scaffolding/SKILL.md b/skills/helm-chart-scaffolding/SKILL.md index 8d1848ac..46fe8f70 100644 --- a/skills/helm-chart-scaffolding/SKILL.md +++ b/skills/helm-chart-scaffolding/SKILL.md @@ -1,6 +1,6 @@ --- name: helm-chart-scaffolding -description: Design, organize, and manage Helm charts for templating and packaging Kubernetes applications with reusable configurations. Use when creating Helm charts, packaging Kubernetes applications, or implementing templated deployments. +description: "Design, organize, and manage Helm charts for templating and packaging Kubernetes applications with reusable configurations. Use when creating Helm charts, packaging Kubernetes applications, or impl..." --- # Helm Chart Scaffolding diff --git a/skills/hig-components-content/SKILL.md b/skills/hig-components-content/SKILL.md new file mode 100644 index 00000000..d3ef58aa --- /dev/null +++ b/skills/hig-components-content/SKILL.md @@ -0,0 +1,86 @@ +--- +name: hig-components-content +version: 1.0.0 +description: > + Apple Human Interface Guidelines for content display components. Use this skill when the user asks about + "charts component", "collection view", "image view", "web view", "color well", "image well", + "activity view", "lockup", "data visualization", "content display", displaying images, rendering + web content, color pickers, or presenting collections of items in Apple apps. + Also use when the user says "how should I display charts", "what's the best way to show images", + "should I use a web view", "how do I build a grid of items", "what component shows media", + or "how do I present a share sheet". + Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data + visualization patterns, hig-components-layout for structural containers, hig-platforms for + platform-specific component behavior. +--- + +# Apple HIG: Content Components + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Adapt to different sizes and contexts.** Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes. + +2. **Make content accessible.** Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All content components need labels and descriptions. + +3. **Maintain visual hierarchy.** Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent. + +4. **Use system components first.** Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation. + +5. **Respect platform conventions.** A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with touch targets. On visionOS, content gains depth and hover effects. + +6. **Handle empty states.** Show a meaningful empty state with guidance on how to populate it, not a blank screen. + +7. **Optimize for performance.** Use lazy loading, cell reuse, pagination, and prefetching for large datasets. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [charts.md](references/charts.md) | Charts | Swift Charts, bar/line/area/point marks, chart accessibility, audio graphs | +| [collections.md](references/collections.md) | Collections | Grid/list layouts, compositional layout, selection, reordering, diffable data sources | +| [image-views.md](references/image-views.md) | Image Views | Aspect ratio handling, content modes, SF Symbol images, accessibility | +| [image-wells.md](references/image-wells.md) | Image Wells | Drag-and-drop image selection, macOS-specific, placeholder content | +| [color-wells.md](references/color-wells.md) | Color Wells | Color selection UI, system color picker, custom color spaces | +| [web-views.md](references/web-views.md) | Web Views | WKWebView, SFSafariViewController, navigation controls, content restrictions | +| [activity-views.md](references/activity-views.md) | Activity Views | Share sheets, activity items, custom activities, action extensions | +| [lockups.md](references/lockups.md) | Lockups | Image+text elements, tvOS card layouts, focus effects, shelf layouts | + +## Component Selection Guide + +| Content Need | Recommended Component | Platform Notes | +|---|---|---| +| Visualizing quantitative data | Charts (Swift Charts) | iOS 16+, macOS 13+, watchOS 9+ | +| Browsing a grid or list of items | Collection View | Compositional layout for complex arrangements | +| Displaying a single image | Image View | Support aspect ratio fitting; provide accessibility description | +| Selecting an image via drag or browse | Image Well | macOS primarily; use image pickers on iOS | +| Selecting a color | Color Well | Triggers system color picker; macOS, iOS 14+ | +| Showing web content inline | Web View (WKWebView) | Use SFSafariViewController for external browsing | +| Sharing content to other apps | Activity View | System share sheet with configurable activity types | +| Content card (image + text) | Lockup | Primarily tvOS; adaptable to other platforms | + +## Output Format + +1. **Component recommendation with rationale**, referencing the relevant HIG reference file. +2. **Configuration guidance** -- key properties and setup. +3. **Accessibility requirements** for the recommended component. +4. **Platform-specific notes** for targeted platforms. + +## Questions to Ask + +1. What type of content? (Quantitative data, images, web content, browsable collection, share action?) +2. Which platforms? +3. Static or dynamic content? +4. How much content? (Few items vs hundreds/thousands affects component choice and optimization.) + +## Related Skills + +- **hig-foundations** -- Color, typography, accessibility, and image guidelines +- **hig-patterns** -- Data visualization, sharing, and loading patterns +- **hig-components-layout** -- Structural containers (scroll views, lists, split views) hosting content +- **hig-platforms** -- Platform-specific component behavior (lockups on tvOS, web views on macOS) + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-content/references/activity-views.md b/skills/hig-components-content/references/activity-views.md new file mode 100644 index 00000000..f02c7b2a --- /dev/null +++ b/skills/hig-components-content/references/activity-views.md @@ -0,0 +1,79 @@ +--- +title: "Activity views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/activity-views + +# Activity views + +An activity view — often called a _share sheet_ — presents a range of tasks that people can perform in the current context. + +![A stylized representation of an activity view or share sheet. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/74899abd7c2a017fc05523d112743616/components-activity-view-intro%402x.png) + +Activity views present sharing activities like messaging and actions like Copy and Print, in addition to quick access to frequently used apps. People typically reveal a share sheet by choosing an Action button while viewing a page or document, or after they’ve selected an item. An activity view can appear as a sheet or a popover, depending on the device and orientation. + +You can provide app-specific activities that can appear in a share sheet when people open it within your app or game. For example, Photos provides app-specific actions like Copy Photo, Add to Album, and Adjust Location. By default, the system lists app-specific actions before actions — such as Add to Files or AirPlay — that are available in multiple apps or throughout the system. People can edit the list of actions to ensure that it displays the ones they use most and to add new ones. + +You can also create app extensions to provide custom share and action activities that people can use in other apps. (An _app extension_ is code you provide that people can install and use outside of your app.) For example, you might create a custom share activity that people can install to help them share a webpage with a specific social media service. Even though macOS doesn’t provide an activity view, you can create share and action app extensions that people can use on a Mac. For guidance, see [Share and action extensions](https://developer.apple.com/design/human-interface-guidelines/activity-views#Share-and-action-extensions). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/activity-views#Best-practices) + +**Avoid creating duplicate versions of common actions that are already available in the activity view.** For example, providing a duplicate Print action is unnecessary and confusing because people wouldn’t know how to distinguish your action from the system-provided one. If you need to provide app-specific functionality that’s similar to an existing action, give it a custom title. For example, if you let people use custom formatting to print a bank transaction, use a title that helps people understand what your print activity does, like “Print Transaction.” + +**Consider using a symbol to represent your custom activity.** [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) provides a comprehensive set of configurable symbols you can use to communicate items and concepts in an activity view. If you need to create a custom interface icon, center it in an area measuring about 70x70 pixels. For guidance, see [Icons](https://developer.apple.com/design/human-interface-guidelines/icons). + +**Write a succinct, descriptive title for each custom action you provide.** If a title is too long, the system wraps it and may truncate it. Prefer a single verb or a brief verb phrase that clearly communicates what the action does. Avoid including your company or product name in an action title. In contrast, the share sheet displays the title of a share activity — typically a company name — below the icon that represents it. + +**Make sure activities are appropriate for the current context.** Although you can’t reorder system-provided tasks in an activity view, you can exclude tasks that aren’t applicable to your app. For example, if it doesn’t make sense to print from within your app, you can exclude the Print activity. You can also identify which custom tasks to show at any given time. + +**Use the Share button to display an activity view.** People are accustomed to accessing system-provided activities when they choose the Share button. Avoid confusing people by providing an alternative way to do the same thing. + +![A screenshot of the Notes app on iPhone, with an open Notes document titled Nature Walks. The top toolbar includes a Share button grouped with a More button on its trailing edge.](https://docs-assets.developer.apple.com/published/5cdc980290422f59da0f79ab5f5efd13/activity-views-share-button%402x.png) + +![A screenshot of the Notes app on iPhone, with an open Notes document titled Nature Walks. An activity view is open from the Share button, including controls for sharing the document with contacts or other apps, and copying, exporting, or adding markup to the document.](https://docs-assets.developer.apple.com/published/68a789fa9a70048fcef600615af180fd/activity-views-share-sheet%402x.png) + +## [Share and action extensions](https://developer.apple.com/design/human-interface-guidelines/activity-views#Share-and-action-extensions) + +Share extensions give people a convenient way to share information from the current context with apps, social media accounts, and other services. Action extensions let people initiate content-specific tasks — like adding a bookmark, copying a link, editing an inline image, or displaying selected text in another language — without leaving the current context. + +The system presents share and action extensions differently depending on the platform: + + * In iOS and iPadOS, share and action extensions are displayed in the share sheet that appears when people choose an Action button. + + * In macOS, people access share extensions by clicking a Share button in the toolbar or choosing Share in a context menu. People can access an action extension by holding the pointer over certain types of embedded content — like an image they add to a Mail compose window — clicking a toolbar button, or choosing a quick action in a Finder window. + + + + +**If necessary, create a custom interface that feels familiar to people.** For a share extension, prefer the system-provided composition view because it provides a consistent sharing experience that people already know. For an action extension, include your app name. If you need to present an interface, include elements of your app’s interface to help people understand that your extension and your app are related. + +**Streamline and limit interaction.** People appreciate extensions that let them perform a task in just a few steps. For example, a share extension might immediately post an image to a social media account with a single tap or click. + +**Avoid placing a modal view above your extension.** By default, the system displays an extension within a modal view. While it might be necessary to display an alert above an extension, avoid displaying additional modal views. + +**If necessary, provide an image that communicates the purpose of your extension.** A share extension automatically uses your app icon, helping give people confidence that your app provided the extension. For an action extension, prefer using a [symbol](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) or creating an interface [icon](https://developer.apple.com/design/human-interface-guidelines/icons) that clearly identifies the task. + +**Use your main app to denote the progress of a lengthy operation.** An activity view dismisses immediately after people complete the task in your share or action extension. If a task is time-consuming, continue it in the background, and give people a way to check the status in your main app. Although you can use a notification to tell people about a problem, don’t notify them simply because the task completes. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/activity-views#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or visionOS. Not supported in macOS, tvOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/activity-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/activity-views#Related) + +[Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets) + +[Popovers](https://developer.apple.com/design/human-interface-guidelines/popovers) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/activity-views#Developer-documentation) + +[`UIActivityViewController`](https://developer.apple.com/documentation/UIKit/UIActivityViewController) — UIKit + +[`UIActivity`](https://developer.apple.com/documentation/UIKit/UIActivity) — UIKit + +[App Extension Support](https://developer.apple.com/documentation/Foundation/app-extension-support) — Foundation + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/activity-views#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/74342B30-92E9-48F3-B0F2-6E42C8FD9391/6506_wide_250x141_1x.jpg) Design for Collaboration with Messages ](https://developer.apple.com/videos/play/wwdc2022/10015) + diff --git a/skills/hig-components-content/references/charts.md b/skills/hig-components-content/references/charts.md new file mode 100644 index 00000000..72e49afc --- /dev/null +++ b/skills/hig-components-content/references/charts.md @@ -0,0 +1,180 @@ +--- +title: "Charts | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/charts + +# Charts + +Organize data in a chart to communicate information with clarity and visual appeal. + +![A stylized representation of a bar chart. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/e60ec631128010abf4cf09793552a20a/components-charts-intro%402x.png) + +An effective chart highlights a few key pieces of information in a dataset, helping people gain insights and make decisions. For example, people might use a chart to: + + * Learn how upcoming weather conditions might affect their plans. + + * Analyze stock prices to understand past performance and discover trends. + + * Review fitness data to monitor their progress and set new goals. + + + + +To learn about designing charts to enhance your experience, see [Charting data](https://developer.apple.com/design/human-interface-guidelines/charting-data); for developer guidance, see [Creating a chart using Swift Charts](https://developer.apple.com/documentation/Charts/Creating-a-chart-using-Swift-Charts). + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/charts#Anatomy) + +A chart comprises several graphical elements that depict the values in a dataset and convey information about them. + +![A bar chart with callouts that identify chart components, such as axes, grid lines, marks, ticks, axis value labels, and the overall plot area.](https://docs-assets.developer.apple.com/published/3435cdf95a0a1c5faeeb347ccd4915d4/charts-anatomy%402x.png) + +A _mark_ is a visual representation of a data value. You create a chart by supplying one or more series of data values, assigning each value to a mark. To specify the style of chart you want to display — such as bar chart, line chart, or scatter plot — you choose a mark type, such as bar, line, or point (for guidance, see [Marks](https://developer.apple.com/design/human-interface-guidelines/charts#Marks)). The general task of depicting individual data values in a chart is called _plotting_ , and the area that contains the marks is called the _plot area_. + +To depict a value, each type of mark uses visual attributes that are determined by a scale, which maps data values like numbers, dates, or categories to visual characteristics like position, color, or height. For example, a bar mark can use a particular height to represent the magnitude of a value and a particular position to represent the time at which the value occurred. + +To give people the context they need to interpret a chart’s visual characteristics, you supply descriptive content that can take a few different forms. + +You can use an _axis_ to help define a frame of reference for the data represented by a set of marks. Many charts display a pair of axes at the edges of the plot area — one horizontal and one vertical — where each axis represents a variable like time, amount, or category. + +An axis can include _ticks_ , which are reference points that help people visually locate the position of important values along the axis, such as a 0, 50%, and 100%. Many charts display _grid lines_ that each extend from a tick across the plot area to help people visually estimate a data value when its mark isn’t near an axis. + +You also have multiple ways to describe chart elements to help people interpret the data and to highlight the key information you want to communicate. For example, you can supply _labels_ that name items like axes, grid lines, ticks, or marks, and _accessibility labels_ that describe chart elements for people who use assistive technologies. To provide context and additional details, you can create descriptive titles, subtitles, and annotations. When needed, you can also create a legend, which describes chart properties that aren’t related to a mark’s position, such as the use of color or shape to denote different value categories. + +Clear, accurate descriptions can help make a chart more approachable and accessible; to learn about additional ways to improve the accessibility of your chart, see [Enhancing the accessibility of a chart](https://developer.apple.com/design/human-interface-guidelines/charts#Enhancing-the-accessibility-of-a-chart). + +## [Marks](https://developer.apple.com/design/human-interface-guidelines/charts#Marks) + +**Choose a mark type based on the information you want to communicate about the data.** Some of the most familiar mark types are bar, line, and point; for developer guidance on these and other mark types, see [Swift Charts](https://developer.apple.com/documentation/Charts). + +_Bar_ marks work well in charts that help people compare values in different categories or view the relative proportions of various parts in a whole. When used to help people understand data that changes over time, bar charts work especially well when each value can represent a sum, like the total number of steps taken in a day. + +![A bar chart that depicts the number of steps for each day in a month.](https://docs-assets.developer.apple.com/published/69afb0247060876d7c148529bb6770ef/charts-bar-marks%402x.png) + +_Line_ marks can also show how values change over time. In a line chart, a line connects all data values in one series of data. The slope of the line reveals the magnitude of change between data values and can help people visualize overall trends. + +![A line chart that depicts the performance of a stock over a five-year period.](https://docs-assets.developer.apple.com/published/a242ab0dd33e91b2928163ac76839aae/charts-line-marks%402x.png) + +_Point_ marks help you depict individual data values as visually distinct marks. A set of point marks can show how two different properties of your data relate to each other, helping people inspect individual data values and identify outliers and clusters. + +![A point-mark chart that depicts per-day readings of heartbeats per minute over a 5 1/2-month period.](https://docs-assets.developer.apple.com/published/e425cf9c73689456ffe358c15a2db34c/charts-point-marks%402x.png) + +**Consider combining mark types when it adds clarity to your chart.** For example, if you use a line chart to show a change over time, you might want to add point marks on top of the line to highlight individual data points. By combining points with a line, you can help people understand the overall trend while also drawing their attention to individual values. + +## [Axes](https://developer.apple.com/design/human-interface-guidelines/charts#Axes) + +**Use a fixed or dynamic axis range depending on the meaning of your chart.** In a _fixed_ range, the upper and lower bounds of the axis never change, whereas in a _dynamic_ range, the upper and lower bounds can vary with the current data. Consider using a fixed range when specific minimum and maximum values are meaningful for all possible data values. For example, people expect a chart that shows a battery’s current charge to have a minimum value of 0% (completely empty) and a maximum value of 100% (completely full). + +![An illustration of Battery Settings, which uses a chart to depict battery charge over time, where the charge can vary within a fixed range from 0% to 100%.](https://docs-assets.developer.apple.com/published/77814deac13d3c51e09eb47c57e690fa/charts-fixed-range-axis%402x.png) + +In contrast, consider using a dynamic range when the possible data values can vary widely and you want the marks to fill the available plot area. For example, the upper bound of the Y axis range in the Health app’s Steps chart varies so that the largest number of steps in a particular time period is close to the top of the chart. + +![An illustration of the Steps chart in the Health app, which shows the average number of steps per day for a single week.](https://docs-assets.developer.apple.com/published/ba6263f9c8e9b9afef93349f20cbdde7/charts-dynamic-range-axis-small%402x.png)Weekly range + +![An illustration of the Steps chart in the Health app, which shows the average number of steps per day in a one-month period.](https://docs-assets.developer.apple.com/published/de535d589204fce38a55acfb5c869c3e/charts-dynamic-range-axis-large%402x.png)Monthly range + +**Define the value of the lower bound based on mark type and chart usage.** For example, bar charts can work well when you use zero for the lower bound of the Y axis, because doing so lets people visually compare the relative heights of individual bars to get a reasonable estimate of their values. In contrast, defining a lower bound of zero can sometimes make meaningful differences between values more difficult to discern. For example, a heart rate chart that always uses zero for the lower bound could obscure important differences between resting and active readings because the differences occur in a range that’s far from zero. + +**Prefer familiar sequences of values in the tick and grid-line labels for an axis.** For example, if you use a common number sequence like 0, 5, 10, etc., people are likely to know at a glance that each tick value equals the previous value plus five. Even though a sequence like 1, 6, 11, etc., follows the same rule, it’s not common, so most people are likely to spend extra time thinking about the interval between values. + +**Tailor the appearance of grid lines and labels to a chart’s use cases.** Too many grid lines can be visually overwhelming, distracting people from the data; too few grid lines can make it difficult to estimate a mark’s value. To help you determine the appropriate density and visual weight of these elements, consider a chart’s context in the interface, the interactions you support, and the tasks people can do in the chart. For example, if people can inspect individual data points by interacting with a chart, you might use fewer grid lines and light label colors to ensure the data remains visually prominent. + +## [Descriptive content](https://developer.apple.com/design/human-interface-guidelines/charts#Descriptive-content) + +**Write descriptions that help people understand what a chart does before they view it.** When you provide information-rich titles and labels that describe the purpose and functionality of a chart, you give people the context they need before they dive in and examine the details. Providing context in this way is especially important for VoiceOver users and those with certain types of cognitive disabilities because they rely on your descriptions to understand the purpose and primary message of your chart before they decide to investigate it further. + +**Summarize the main message of your chart to help make it approachable and useful for everyone.** Although a primary reason to use a chart is to display the data that supports the main message, it’s essential to summarize key information so that people can grasp it quickly. For example, Weather provides a title and subtitle that succinctly describe the expected precipitation for the next hour, giving people the most important information without requiring them to examine the details of the chart. + +![An illustration of the rain forecast for the next hour in the Weather app, which uses succinct, plain language to describe the expected precipitation.](https://docs-assets.developer.apple.com/published/28ee38d191d2f9816ded3e735bfee4a7/charts-descriptive-content%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/charts#Best-practices) + +**Establish a consistent visual hierarchy that helps communicate the relative importance of various chart elements.** Typically, you want the data itself to be most prominent, while letting the descriptions and axes provide additional context without competing with the data. + +**In a compact environment, maximize the width of the plot area to give people enough space to comfortably examine a chart.** To help important data fit well in a given width, ensure that labels on a vertical axis are as short as possible without losing clarity. You might also consider describing units in other areas of the chart, such as in a title, and placing a longer axis label, such as a category name, inside the plot area when doing so doesn’t obscure important information. + +**Make every chart in your app accessible.** Charts — like all infographics — need to be fully accessible to everyone, regardless of how they perceive content. For example, it’s essential to support VoiceOver, which describes onscreen content to help people get information and navigate without needing to see the screen (to learn more about VoiceOver, see [Vision](https://www.apple.com/accessibility/vision/)). In addition to supplying accessibility labels that describe the components of your chart, you can enhance the VoiceOver experience by also using Audio Graphs. [Audio graphs](https://developer.apple.com/documentation/Accessibility/audio-graphs) provides chart information to VoiceOver, which constructs a set of tones that audibly represent a chart’s data values and their trend; it also lets you present high-level text summaries that provide additional context. For guidance, see [Enhancing the accessibility of a chart](https://developer.apple.com/design/human-interface-guidelines/charts#Enhancing-the-accessibility-of-a-chart). + +**Let people interact with the data when it makes sense, but don’t require interaction to reveal critical information.** In Stocks, for example, people are often most interested in a stock’s performance over time, so the app displays a line graph that depicts performance during the time period people choose, such as one day, three months, or five years. If people want to explore additional details, they can drag a vertical indicator through the line graph, revealing the value at the selected time. + +**Make it easy for everyone to interact with a chart.** Sometimes, chart marks are too small to target with a finger or a pointer, making your chart hard to use for people with reduced motor control and uncomfortable for everyone. When this is the case, consider expanding the hit target to include the entire plot area, letting people scrub across the area to reveal various values. + +**Make an interactive chart easy to navigate when using keyboard commands (including full keyboard access) or Switch Control.** By default, these input types tend to visit individual onscreen elements in a linear sequence, such as the sequence of values in a data file. If you want to provide a custom navigation experience in your chart, here are two main ways to do so. The first way is to use accessibility APIs (such as [`accessibilityRespondsToUserInteraction(_:)`](https://developer.apple.com/documentation/SwiftUI/View/accessibilityRespondsToUserInteraction\(_:\))) to specify a logical and predictable path through your chart’s information. For example, you might want to let people navigate along the X axis instead of jumping back and forth. The second way — which is particularly useful if you need to present a very large dataset — is to let people move focus among subsets of values instead of navigating through all individual data points. Note that both of these customizations can also enhance the VoiceOver experience, even when your chart isn’t interactive. For guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**Help people notice important changes in a chart.** For example, if people don’t notice when marks or axes change, they can misread a chart. Animating such changes can help people notice them, but you need to highlight the changes in other ways, too, to ensure that VoiceOver users and people who turn off animations know about them. For developer guidance, see [`UIAccessibility.Notification`](https://developer.apple.com/documentation/UIKit/UIAccessibility/Notification) (UIKit) or [`NSAccessibility.Notification`](https://developer.apple.com/documentation/AppKit/NSAccessibility-swift.struct/Notification) (AppKit). + +**Align a chart with surrounding interface elements.** For example, it often works well to align the leading edge of a chart with the leading edge of other views in a screen. One way to maintain a clean leading edge in a chart is to display the label for each vertical grid line on its trailing side. You might also consider shifting the Y axis to the trailing side of the chart so that its tick labels don’t protrude past the chart’s leading edge. If you end up with a label that doesn’t appear to be associated with anything, you can use a tick to anchor it to a grid line. + +## [Color](https://developer.apple.com/design/human-interface-guidelines/charts#Color) + +As in all other parts of your interface, using color in a chart can help you clarify information, evoke your brand, and provide visual continuity. For general guidance on using color in ways that everyone can appreciate, see [Inclusive color](https://developer.apple.com/design/human-interface-guidelines/color#Inclusive-color). + +**Avoid relying solely on color to differentiate between different pieces of data or communicate essential information in a chart.** Using meaningful color in a chart works well to highlight differences and elevate key details, but it’s crucial to include alternative ways to convey this information so that people can use your chart regardless of whether they can discern colors. One way to supplement color is to use different shapes or patterns to depict different parts of data. For example, in addition to using red and black or red and white colors, Health uses two different shapes in the point marks that represent the two components of blood pressure. + +![An illustration of a blood pressure chart in the Health app that uses a red circle to represent systolic values and a black or white diamond to represent diastolic values.](https://docs-assets.developer.apple.com/published/47d2a6b70d030b1aa595826248cb1186/charts-colors%402x.png) + +**Aid comprehension by adding visual separation between contiguous areas of color.** For example, in a bar chart that stacks marks in a single row or column, it’s common to assign a different color to each mark. In this design, adding separators between the marks can help people distinguish individual ones. + +![An illustration of iPhone Storage Settings, which uses a single bar mark containing several segments of different colors to show the relative space taken by items such as music, apps, and photos. The bar includes a narrow strip of empty space between each pair of segments.](https://docs-assets.developer.apple.com/published/86da90aecee27935b14e2b48388d08a6/charts-colors-stacked%402x.png) + +## [Enhancing the accessibility of a chart](https://developer.apple.com/design/human-interface-guidelines/charts#Enhancing-the-accessibility-of-a-chart) + +When you use Swift Charts to create a chart, you get a default implementation of [Audio graphs](https://developer.apple.com/documentation/Accessibility/audio-graphs), in addition to a default accessibility element for each mark (or group of marks) that describes its value. + +**Consider using Audio Graphs to give VoiceOver users more information about your chart.** You can customize the default Audio Graphs implementation that Swift Charts provides by supplying a chart title and descriptive summary that VoiceOver speaks to help people understand the purpose and main features of your chart. If you don’t use Audio Graphs, you need to provide an overview of the chart’s structure and purpose. For example, you need to identify the chart’s type — such as bar or line — explain what each axis represents, and describe details like the upper and lower axis bounds. + +Important + +Unlike an image — which requires one descriptive accessibility label — a chart often needs to offer an accessibility label for each important or interactive element. Depending on the purpose of your chart and the scope and density of its marks, you need to decide whether it’s essential to describe each mark or whether it improves the accessibility experience to describe groups of marks. In some cases, it can make sense to use a single accessibility label that provides a succinct, high-level description of the chart, such as when you use a small version of a chart in a button that reveals a more detailed version. + +**Write accessibility labels that support the purpose of your chart.** For example, Maps shows elevation for a cycling route using a chart that represents the change in elevation over the course of the route. The purpose of the chart is to give people a sense of the terrain for the entire route, not to provide individual elevations. For this reason, Maps provides accessibility labels that summarize the elevation changes over a portion of the route, rather than providing labels for each individual moment. In contrast, Health offers an accessibility label for each bar in the Steps chart, because the purpose of the chart is to give people their actual step count for each tracking period. + +![An illustration of a chart in Maps that shows the range of elevations over the total distance of the trip. A VoiceOver focus indicator is visible on top of the chart, containing approximately one-fifth of the total distance and elevation.](https://docs-assets.developer.apple.com/published/b85d8add4c38b6bedd65caf24fdbe03a/charts-bar-chart-with-voiceover-focus%402x.png)For the focused section of this cycling elevation chart, VoiceOver provides information about that portion of the route, including distance and elevation changes. + +The following guidelines can help you write useful accessibility labels for chart elements. + + * **Prioritize clarity and comprehensiveness.** In general, it’s rarely enough to merely report a data value unless you also include context that helps people understand it, like the date or location that’s associated with it. Aim to concisely describe the context for a value without repeating information that people can get in other ways, like an axis name that Audio Graphs or your overview provides. Follow context-setting information with a succinct description of the element’s details. + + * **Avoid using subjective terms.** Subjective words — like rapidly, gradually, and almost — communicate your interpretation of the data. To help people form their own interpretations, use actual values in your descriptions. + + * **Maximize clarity in data descriptions by avoiding potentially ambiguous formats and abbreviations.** For example, using “June 6” is clearer than using “6/6”; similarly, spelling out “60 minutes” or “60 meters” is clearer than using the abbreviation “60m.” + + * **Describe what the chart’s details represent, not what they look like.** Consider a chart that uses red and blue colors to help people visually distinguish two different data series. It’s crucial to create accessibility labels that identify what each series represents, but describing the colors that visually represent them can add unnecessary information and be distracting. + + * **Be consistent throughout your app when referring to a specific axis.** For example, if you always mention the X axis first, people can spend less time figuring out which axis is relevant in a description. + + + + +**Hide visible text labels for axes and ticks from assistive technologies.** Axis and tick labels help people visually assess trends in a chart and estimate mark values. VoiceOver users can get mark values and trend information through accessibility labels and Audio Graphs, so they don’t generally need the content in the visible labels. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/charts#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS._ + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/charts#watchOS) + +**In general, avoid requiring complex chart interactions in your watchOS app.** As much as possible, prefer displaying useful information people can get at a glance and supporting simple interactions when they add value. If you also offer a version of your app in another platform, consider using it to display more details and to support additional interactions with your chart. For example, Heart Rate in watchOS displays a chart of the wearer’s heart-rate data for the current day, whereas the Health app on iPhone displays heart-rate data for several different periods of time and lets people examine individual marks. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/charts#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/charts#Related) + +[Charting data](https://developer.apple.com/design/human-interface-guidelines/charting-data) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/charts#Developer-documentation) + +[Swift Charts](https://developer.apple.com/documentation/Charts) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/charts#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/89D5888B-58DA-4F47-8E3C-998253F6BA98/9954_wide_250x141_1x.jpg) Bring Swift Charts to the third dimension ](https://developer.apple.com/videos/play/wwdc2025/313) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/FA764D2D-4E15-4E91-91BA-BDAC80FB901B/6694_wide_250x141_1x.jpg) Design app experiences with charts ](https://developer.apple.com/videos/play/wwdc2022/110342) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/4BBCB61E-65ED-43FE-8F7B-81524E0C96BE/6692_wide_250x141_1x.jpg) Design an effective chart ](https://developer.apple.com/videos/play/wwdc2022/110340) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/charts#Change-log) + +Date| Changes +---|--- +September 23, 2022| New page. + diff --git a/skills/hig-components-content/references/collections.md b/skills/hig-components-content/references/collections.md new file mode 100644 index 00000000..4aa63662 --- /dev/null +++ b/skills/hig-components-content/references/collections.md @@ -0,0 +1,48 @@ +--- +title: "Collections | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/collections + +# Collections + +A collection manages an ordered set of content and presents it in a customizable and highly visual layout. + +![A stylized representation of eight image icons, separated into two rows of four. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8769a85042888c4d649fd21c992b593f/components-collection-view-intro%402x.png) + +Generally speaking, collections are ideal for showing image-based content. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/collections#Best-practices) + +**Use the standard row or grid layout whenever possible.** Collections display content by default in a horizontal row or a grid, which are simple, effective appearances that people expect. Avoid creating a custom layout that might confuse people or draw undue attention to itself. + +**Consider using a table instead of a collection for text.** It’s generally simpler and more efficient to view and digest textual information when it’s displayed in a scrollable list. + +**Make it easy to choose an item.** If it’s too difficult to get to an item in your collection, people will get frustrated and lose interest before reaching the content they want. Use adequate padding around images to keep focus or hover effects easy to see and prevent content from overlapping. + +**Add custom interactions when necessary.** By default, people can tap to select, touch and hold to edit, and swipe to scroll. If your app requires it, you can add more gestures for performing custom actions. + +**Consider using animations to provide feedback when people insert, delete, or reorder items.** Collections support standard animations for these actions, and you can also use custom animations. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/collections#Platform-considerations) + + _No additional considerations for macOS, tvOS, or visionOS. Not supported in watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/collections#iOS-iPadOS) + +**Use caution when making dynamic layout changes.** The layout of a collection can change dynamically. Be sure any changes make sense and are easy to track. If possible, try to avoid changing the layout while people are viewing and interacting with it, unless it’s in response to an explicit action. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/collections#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/collections#Related) + +[Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables) + +[Image views](https://developer.apple.com/design/human-interface-guidelines/image-views) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/collections#Developer-documentation) + +[`UICollectionView`](https://developer.apple.com/documentation/UIKit/UICollectionView) — UIKit + +[`NSCollectionView`](https://developer.apple.com/documentation/AppKit/NSCollectionView) — AppKit + diff --git a/skills/hig-components-content/references/color-wells.md b/skills/hig-components-content/references/color-wells.md new file mode 100644 index 00000000..53fda514 --- /dev/null +++ b/skills/hig-components-content/references/color-wells.md @@ -0,0 +1,42 @@ +--- +title: "Color wells | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/color-wells + +# Color wells + +A color well lets people adjust the color of text, shapes, guides, and other onscreen elements. + +![A stylized representation of a color-selection popover extending down from an expanded button. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8ed8273449a04a1de75d9f183c19d062/components-color-well-intro%402x.png) + +A color well displays a color picker when people tap or click it. This color picker can be the system-provided one or a custom interface that you design. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/color-wells#Best-practices) + +**Consider the system-provided color picker for a familiar experience.** Using the built-in color picker provides a consistent experience, in addition to letting people save a set of colors they can access from any app. The system-defined color picker can also help provide a familiar experience when developing apps across iOS, iPadOS, and macOS. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/color-wells#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or visionOS. Not supported in tvOS or watchOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/color-wells#macOS) + +When people click a color well, it receives a highlight to provide visual confirmation that it’s active. It then opens a color picker so people can choose a color. After they make a selection, the color well updates to show the new color. + +Color wells also support drag and drop, so people can drag colors from one color well to another, and from the color picker to a color well. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/color-wells#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/color-wells#Related) + +[Color](https://developer.apple.com/design/human-interface-guidelines/color) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/color-wells#Developer-documentation) + +[`UIColorWell`](https://developer.apple.com/documentation/UIKit/UIColorWell) — UIKit + +[`UIColorPickerViewController`](https://developer.apple.com/documentation/UIKit/UIColorPickerViewController) — UIKit + +[`NSColorWell`](https://developer.apple.com/documentation/AppKit/NSColorWell) — AppKit + +[Color Programming Topics](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/DrawColor/DrawColor.html) + diff --git a/skills/hig-components-content/references/image-views.md b/skills/hig-components-content/references/image-views.md new file mode 100644 index 00000000..823ee343 --- /dev/null +++ b/skills/hig-components-content/references/image-views.md @@ -0,0 +1,82 @@ +--- +title: "Image views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/image-views + +# Image views + +An image view displays a single image — or in some cases, an animated sequence of images — on a transparent or opaque background. + +![A stylized representation of a photo. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/75a4736b08754bbd37dad68ddd0048b9/components-image-view-intro%402x.png) + +Within an image view, you can stretch, scale, size to fit, or pin the image to a specific location. Image views are typically not interactive. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/image-views#Best-practices) + +**Use an image view when the primary purpose of the view is simply to display an image.** In rare cases where you might want an image to be interactive, configure a system-provided [button](https://developer.apple.com/design/human-interface-guidelines/buttons) to display the image instead of adding button behaviors to an image view. + +**If you want to display an icon in your interface, consider using a symbol or interface icon instead of an image view.** [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) provides a large library of streamlined, vector-based images that you can render with various colors and opacities. An [icon](https://developer.apple.com/design/human-interface-guidelines/icons) (also called a glyph or template image) is typically a bitmap image in which the nontransparent pixels can receive color. Both symbols and interface icons can use the accent colors people choose. + +## [Content](https://developer.apple.com/design/human-interface-guidelines/image-views#Content) + +An image view can contain rich image data in various formats, like PNG, JPEG, and PDF. For more guidance, see [Images](https://developer.apple.com/design/human-interface-guidelines/images). + +**Take care when overlaying text on images.** Compositing text on top of images can decrease both the clarity of the image and the legibility of the text. To help improve the results, ensure the text contrasts well with the image, and consider ways to make the text object stand out, like adding a text shadow or background layer. + +**Aim to use a consistent size for all images in an animated sequence.** When you prescale images to fit the view, the system doesn’t have to perform any scaling. In cases where the system must do the scaling, performance is generally better when all images are the same size and shape. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/image-views#Platform-considerations) + + _No additional considerations for iOS or iPadOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/image-views#macOS) + +**If your app needs an editable image view, use an image well.** An [image well](https://developer.apple.com/design/human-interface-guidelines/image-wells) is an image view that supports copying, pasting, dragging, and using the Delete key to clear its content. + +**Use an image button instead of an image view to make a clickable image.** An [image button](https://developer.apple.com/design/human-interface-guidelines/buttons#Image-buttons) contains an image or icon, appears in a view, and initiates an instantaneous app-specific action. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/image-views#tvOS) + +Many tvOS images combine multiple layers with transparency to create a feeling of depth. For guidance, see [Layered images](https://developer.apple.com/design/human-interface-guidelines/images#Layered-images). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/image-views#visionOS) + +Windows in visionOS apps and games can use image views to display 2D and stereoscopic images, as well as spatial photos. If your app uses RealityKit, you can also display images of any type outside of image views next to 3D content, or generate a spatial scene from an existing 2D image. For design guidance, see [Images > visionOS](https://developer.apple.com/design/human-interface-guidelines/images#visionOS); for developer guidance, see [`ImagePresentationComponent`](https://developer.apple.com/documentation/RealityKit/ImagePresentationComponent). + +For guidance on presenting other 3D content in a window or volume, see [Windows > visionOS](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/image-views#watchOS) + +**Use SwiftUI to create animations when possible.** Alternatively, you can use WatchKit to animate a sequence of images within an image element if necessary. For developer guidance, see [`WKImageAnimatable`](https://developer.apple.com/documentation/WatchKit/WKImageAnimatable). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/image-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/image-views#Related) + +[Images](https://developer.apple.com/design/human-interface-guidelines/images) + +[Image wells](https://developer.apple.com/design/human-interface-guidelines/image-wells) + +[Image buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#Image-buttons) + +[SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/image-views#Developer-documentation) + +[`Image`](https://developer.apple.com/documentation/SwiftUI/Image) — SwiftUI + +[`UIImageView`](https://developer.apple.com/documentation/UIKit/UIImageView) — UIKit + +[`NSImageView`](https://developer.apple.com/documentation/AppKit/NSImageView) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/image-views#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/8226C70F-64DC-4FF1-9956-2DC0751A2143/8241_wide_250x141_1x.jpg) Support HDR images in your app ](https://developer.apple.com/videos/play/wwdc2023/10181) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/5A5D0136-1D36-4754-9603-E9C2B459ECB7/4887_wide_250x141_1x.jpg) Add rich graphics to your SwiftUI app ](https://developer.apple.com/videos/play/wwdc2021/10021) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/image-views#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-components-content/references/image-wells.md b/skills/hig-components-content/references/image-wells.md new file mode 100644 index 00000000..ec631e31 --- /dev/null +++ b/skills/hig-components-content/references/image-wells.md @@ -0,0 +1,34 @@ +--- +title: "Image wells | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/image-wells + +# Image wells + +An image well is an editable version of an image view. + +![A stylized representation of an image well. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/101ad769eaeccadb3758ca0b05a4fc5b/components-image-well-intro%402x.png) + +After selecting an image well, people can copy and paste its image or delete it. People can also drag a new image into an image well without selecting it first. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/image-wells#Best-practices) + +**Revert to a default image when necessary.** If your image well requires an image, display the default image again if people clear the content of the image well. + +**If your image well supports copy and paste, make sure the standard copy and paste menu items are available.** People generally expect to choose these menu items — or use the standard keyboard shortcuts — to interact with an image well. For guidance, see [Edit menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Edit-menu). + +For related guidance, see [Image views](https://developer.apple.com/design/human-interface-guidelines/image-views). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/image-wells#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/image-wells#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/image-wells#Related) + +[Image views](https://developer.apple.com/design/human-interface-guidelines/image-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/image-wells#Developer-documentation) + +[`NSImageView`](https://developer.apple.com/documentation/AppKit/NSImageView) — AppKit + diff --git a/skills/hig-components-content/references/lockups.md b/skills/hig-components-content/references/lockups.md new file mode 100644 index 00000000..1ecf9dd0 --- /dev/null +++ b/skills/hig-components-content/references/lockups.md @@ -0,0 +1,78 @@ +--- +title: "Lockups | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/lockups + +# Lockups + +Lockups combine multiple separate views into a single, interactive unit. + +![A stylized representation of a person icon above a line of headline text and a line of footnote text. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/0d5e4d64c6d09fdf802bfebd9ffb5b0e/components-lockups-intro%402x.png) + +Each lockup consists of a content view, a header, and a footer. Headers appear above the main content for a lockup, and footers appear below the main content. All three views expand and contract together as the lockup gets focus. + +According to the needs of your app, you can combine four types of lockup: cards, caption buttons, monograms, and posters. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/lockups#Best-practices) + +**Allow adequate space between lockups.** A focused lockup expands in size, so leave enough room between lockups to avoid overlapping or displacing other lockups. For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout). + +![An illustration showing three rows of five equally spaced lockups. In each row, the middle lockup is in focus and slightly larger than the others.](https://docs-assets.developer.apple.com/published/67a6f9b8d570939f21cd6af73ce21032/lockups-generic%402x.png) + +**Use consistent lockup sizes within a row or group.** A group of buttons or a row of content images is more visually appealing when the widths and heights of all elements match. + +For developer guidance, see [`TVLockupView`](https://developer.apple.com/documentation/TVUIKit/TVLockupView) and [`TVLockupHeaderFooterView`](https://developer.apple.com/documentation/TVUIKit/TVLockupHeaderFooterView). + +## [Cards](https://developer.apple.com/design/human-interface-guidelines/lockups#Cards) + +A card combines a header, footer, and content view to present ratings and reviews for media items. + +![An illustration of an Apple TV screen that contains several cards, one of which is highlighted. Inside the highlighted card from the top, placeholder content shows the position of a rating and multiple lines of text.](https://docs-assets.developer.apple.com/published/697a2d112e491e9cf51cf654c70af8e4/lockups-background%402x.png) + +For developer guidance, see [`TVCardView`](https://developer.apple.com/documentation/TVUIKit/TVCardView). + +## [Caption buttons](https://developer.apple.com/design/human-interface-guidelines/lockups#Caption-buttons) + +A caption button can include a title and a subtitle beneath the button. A caption button can contain either an image or text. + +Make sure that when people focus on them, caption buttons tilt with the motion that they swipe. When aligned vertically, caption buttons tilt up and down. When aligned horizontally, caption buttons tilt left and right. When displayed in a grid, caption buttons tilt both vertically and horizontally. + +![An illustration of an Apple TV screen highlighted to show four caption buttons in a row. The leftmost button is focused, making it expand slightly and appear to float above the background.](https://docs-assets.developer.apple.com/published/338475f68a07a861939e2809a0211fbf/lockups-caption-button%402x.png) + +For developer guidance, see [`TVCaptionButtonView`](https://developer.apple.com/documentation/TVUIKit/TVCaptionButtonView). + +## [Monograms](https://developer.apple.com/design/human-interface-guidelines/lockups#Monograms) + +Monograms identify people, usually the cast and crew for a media item. Each monogram consists of a circular picture of the person and their name. If an image isn’t available, the person’s initials appear in place of an image. + +**Prefer images over initials.** An image of a person creates a more intimate connection than text. + +![An illustration of an Apple TV screen that contains a row of several monograms, of which the leftmost one is highlighted. Each monogram contains the person symbol. Below each monogram is placeholder content that represents two lines of text.](https://docs-assets.developer.apple.com/published/906c0b8ed8e54f03b24792a684b3b449/lockups-monogram%402x.png) + +For developer guidance, see [`TVMonogramContentView`](https://developer.apple.com/documentation/TVUIKit/TVMonogramContentView). + +## [Posters](https://developer.apple.com/design/human-interface-guidelines/lockups#Posters) + +Posters consist of an image and an optional title and subtitle, which are hidden until the poster comes into focus. Posters can be any size, but the size needs to be appropriate for their content. For related guidance, see [Image views](https://developer.apple.com/design/human-interface-guidelines/image-views). + +![An illustration of an Apple TV screen that shows a row of several posters near the bottom edge. One poster is focused and below it is placeholder content that represents a line of text.](https://docs-assets.developer.apple.com/published/b37a0a55b2f3902282bd7464422ee054/lockups-poster%402x.png) + +For developer guidance, see [`TVPosterView`](https://developer.apple.com/documentation/TVUIKit/TVPosterView). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/lockups#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/lockups#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/lockups#Related) + +[Designing for tvOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/lockups#Developer-documentation) + +[`TVLockupView`](https://developer.apple.com/documentation/TVUIKit/TVLockupView) — TVUIKit + +[`TVLockupHeaderFooterView`](https://developer.apple.com/documentation/TVUIKit/TVLockupHeaderFooterView) — TVUIKit + diff --git a/skills/hig-components-content/references/web-views.md b/skills/hig-components-content/references/web-views.md new file mode 100644 index 00000000..d8637e46 --- /dev/null +++ b/skills/hig-components-content/references/web-views.md @@ -0,0 +1,36 @@ +--- +title: "Web views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/web-views + +# Web views + +A web view loads and displays rich web content, such as embedded HTML and websites, directly within your app. + +![A stylized representation of a compass icon. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ae2c2f04ee2e04730e29b26e7e9bff19/components-web-view-intro%402x.png) + +For example, Mail uses a web view to show HTML content in messages. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/web-views#Best-practices) + +**Support forward and back navigation when appropriate.** Web views support forward and back navigation, but this behavior isn’t available by default. If people are likely to use your web view to visit multiple pages, allow forward and back navigation, and provide corresponding controls to initiate these features. + +**Avoid using a web view to build a web browser.** Using a web view to let people briefly access a website without leaving the context of your app is fine, but Safari is the primary way people browse the web. Attempting to replicate the functionality of Safari in your app is unnecessary and discouraged. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/web-views#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or visionOS. Not supported in tvOS or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/web-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/web-views#Related) + +[Webkit.org](https://webkit.org/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/web-views#Developer-documentation) + +[`WKWebView`](https://developer.apple.com/documentation/WebKit/WKWebView) — WebKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/web-views#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/8A0A5E12-9D2C-4629-A13C-8EB702A9DA28/4920_wide_250x141_1x.jpg) Explore WKWebView additions ](https://developer.apple.com/videos/play/wwdc2021/10032) + diff --git a/skills/hig-components-controls/SKILL.md b/skills/hig-components-controls/SKILL.md new file mode 100644 index 00000000..2f694859 --- /dev/null +++ b/skills/hig-components-controls/SKILL.md @@ -0,0 +1,88 @@ +--- +name: hig-components-controls +version: 1.0.0 +description: >- + Apple HIG guidance for selection and input controls including pickers, toggles, + sliders, steppers, segmented controls, combo boxes, text fields, text views, + labels, token fields, virtual keyboards, rating indicators, and gauges. Use + this skill when the user says "picker or segmented control," "how should my + form look," "what keyboard type should I use," "toggle vs checkbox," or asks + about picker design, toggle, switch, slider, stepper, text field, text input, + segmented control, combo box, label, token field, virtual keyboard, rating + indicator, gauge, form design, input validation, or control state management. + Cross-references: hig-components-menus, hig-components-dialogs, + hig-components-search. +--- + +# Apple HIG: Selection and Input Controls + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Clear current state.** Users must always see what is selected. Toggles show on/off, segmented controls highlight the active segment, pickers display the current selection. + +2. **Prefer standard system controls.** Built-in controls provide consistency and accessibility. Custom controls introduce a learning curve and may break assistive features. + +3. **Toggles for binary states.** On or off. In Settings-style screens, changes take effect immediately. In modal forms, changes commit on confirmation. + +4. **Segmented controls for mutually exclusive options.** 2-5 items, roughly equal importance, short labels. + +5. **Sliders for continuous values.** When precise numeric input is not critical. Provide min/max labels or icons for range endpoints. + +6. **Pickers for long option lists.** Too many options for a segmented control. Works well for dates, times, structured data. + +7. **Steppers for small, precise adjustments.** Increment/decrement in fixed steps. Display current value next to the stepper with reasonable min/max bounds. + +8. **Text fields for short, single-line input.** Text views for multi-line. Configure keyboard type to match expected input (email, URL, number). + +9. **Combo boxes: text input + selection list.** macOS. Type a value or choose from a predefined list when custom values are valid. + +10. **Token fields: discrete values as visual tokens.** macOS. For email recipients, tags, or collections of discrete items. + +11. **Gauges and rating indicators display values.** Gauges show a value within a range. Rating indicators show ratings (often stars). Display-only; use interactive variants for input. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [controls.md](references/controls.md) | General controls | States, affordance, system controls | +| [toggles.md](references/toggles.md) | Toggles | On/off, immediate effect | +| [segmented-controls.md](references/segmented-controls.md) | Segmented controls | 2-5 options, equal weight | +| [sliders.md](references/sliders.md) | Sliders | Continuous range, min/max labels | +| [steppers.md](references/steppers.md) | Steppers | Fixed steps, bounded values | +| [pickers.md](references/pickers.md) | Pickers | Dates, times, long option sets | +| [combo-boxes.md](references/combo-boxes.md) | Combo boxes | macOS, type or select, custom values | +| [text-fields.md](references/text-fields.md) | Text fields | Short input, keyboard types, validation | +| [text-views.md](references/text-views.md) | Text views | Multi-line, comments, descriptions | +| [labels.md](references/labels.md) | Labels | Placement, VoiceOver support | +| [token-fields.md](references/token-fields.md) | Token fields | macOS, chips, tags, recipients | +| [virtual-keyboards.md](references/virtual-keyboards.md) | Virtual keyboards | Email, URL, number keyboard types | +| [rating-indicators.md](references/rating-indicators.md) | Rating indicators | Star ratings, display-only | +| [gauges.md](references/gauges.md) | Gauges | Level indicators, range display | + +## Output Format + +1. **Control recommendation with rationale** and why alternatives are less suitable. +2. **State management** -- how the control communicates current state and whether changes apply immediately or on confirmation. +3. **Validation approach** -- when to show errors and how to communicate rules. +4. **Accessibility** -- labels, traits, hints for VoiceOver. + +## Questions to Ask + +1. What type of data? (Boolean, choice from fixed set, numeric, free-form text?) +2. How many options? +3. Which platforms? (Combo boxes and token fields are macOS-only) +4. Settings screen or inline form? + +## Related Skills + +- **hig-components-menus** -- Buttons and pop-up buttons complementing selection controls +- **hig-components-dialogs** -- Sheets and popovers containing forms +- **hig-components-search** -- Search fields sharing text input patterns +- **hig-inputs** -- Keyboard, pointer, gesture interactions with controls +- **hig-foundations** -- Typography, color, layout for control styling + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-controls/references/combo-boxes.md b/skills/hig-components-controls/references/combo-boxes.md new file mode 100644 index 00000000..c0e40575 --- /dev/null +++ b/skills/hig-components-controls/references/combo-boxes.md @@ -0,0 +1,40 @@ +--- +title: "Combo boxes | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/combo-boxes + +# Combo boxes + +A combo box combines a text field with a pull-down button in a single control. + +![A stylized representation of a combo box control displaying a list of cities. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8f828536eb509b9cd023583ecd2f8eca/components-combobox-intro%402x.png) + +People can enter a custom value into the field or click the button to choose from a list of predefined values. When people enter a custom value, it’s not added to the list of choices. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/combo-boxes#Best-practices) + +**Populate the field with a meaningful default value from the list.** Although the field can be empty by default, it’s best when the default value refers to the hidden choices. The default value doesn’t have to be the first item in the list. + +**Use an introductory label to let people know what types of items to expect.** Generally, use title-style capitalization for labels and end them with a colon. For related guidance, see [Labels](https://developer.apple.com/design/human-interface-guidelines/labels). + +**Provide relevant choices.** People appreciate the ability to enter a custom value, as well as the convenience of choosing from a list of the most likely choices. + +**Make sure list items aren’t wider than the text field.** If an item is too wide, the text field might truncate it, which is hard for people to read. + +For guidance, see [Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) and [Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/combo-boxes#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/combo-boxes#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/combo-boxes#Related) + +[Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) + +[Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/combo-boxes#Developer-documentation) + +[`NSComboBox`](https://developer.apple.com/documentation/AppKit/NSComboBox) — AppKit + diff --git a/skills/hig-components-controls/references/controls.md b/skills/hig-components-controls/references/controls.md new file mode 100644 index 00000000..ae9955f4 --- /dev/null +++ b/skills/hig-components-controls/references/controls.md @@ -0,0 +1,112 @@ +--- +title: "Controls | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/controls + +# Controls + +In iOS and iPadOS, a control provides quick access to a feature of your app from Control Center, the Lock Screen, or the Action button. + +![A partial screenshot of controls in Control Center, such as the Airplane Mode toggle, Wi-Fi toggle, and AirPlay button. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/0cea7197d96a9a3bfadc6aed2942b027/components-controls-intro%402x.png) + +A control is a button or toggle that provides quick access to your app’s features from other areas of the system. Control buttons perform an action, link to a specific area of your app, or launch a [camera experience on a locked device](https://developer.apple.com/design/human-interface-guidelines/controls#Camera-experiences-on-a-locked-device). Control toggles switch between two states, such as on and off. + +People can add controls to Control Center by pressing and holding in an empty area of Control Center, to the Lock Screen by customizing their Lock Screen, and to the Action button by configuring the Action button in the Settings app. + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/controls#Anatomy) + +Controls contain a symbol image, a title, and, optionally, a value. The symbol visually represents what the control does and can be a symbol from [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) or a custom symbol. The title describes what the control relates to, and the value represents the state of the control. For example, the title can display the name of a light in a room, while the value can display whether it’s on or off. + +![A diagram showing the placement of the symbol image, the title, and the value for a control toggle.](https://docs-assets.developer.apple.com/published/df1b5eb2796a6452c640b746948df228/control-medium-anatomy%402x.png) + +Controls display their information differently depending on where they appear: + + * In Control Center, a control displays its symbol and, at larger sizes, its title and value. + + * On the Lock Screen, a control displays its symbol. + + * On iPhone devices with a control assigned to the Action button, pressing and holding it displays the control’s symbol in the Dynamic Island, as well as its value (if present). + + + + +![A partial screenshot of Control Center on iPhone, highlighting that the Silent mode control is active, with a symbol of a bell with a line drawn through it and red tint.](https://docs-assets.developer.apple.com/published/01a84972ab485b0b33d4342bd1b1a42a/control-control-center%402x.png) + +Control toggle in Control Center + +![A partial screenshot of the bottom of the Lock Screen on iPhone, highlighting that the Silent mode control is active on the right, with a symbol of a bell with a line drawn through it and red tint.](https://docs-assets.developer.apple.com/published/912ae3e318cf61d7146965079dc682cb/control-lock-screen%402x.png) + +Control toggle on the Lock Screen + +![A partial screenshot that displays the Dynamic Island at the top of the Home Screen on iPhone, showing that the Silent mode control is active with a red tinted symbol of a bell with a line drawn through it in the leading area and red tinted text that says Silent in the trailing area.](https://docs-assets.developer.apple.com/published/e336ce21634c50e782cfab47988eb576/control-dynamic-island%402x.png) + +Control toggle in the Dynamic Island +performed from the Action button + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/controls#Best-practices) + +**Offer controls for actions that provide the most benefit without having to launch your app.** For example, launching a Live Activity from a control creates an easy and seamless experience that informs someone about progress without having to navigate to your app to stay up to date. For guidance, see [Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities). + +**Update controls when someone interacts with them, when an action completes, or remotely with a push notification.** Update the contents of a control to accurately reflect the state and show if an action is still in progress. + +**Choose a descriptive symbol that suggests the behavior of the control.** Depending on where a person adds a control, it may not display the title and value, so the symbol needs to convey enough information about the control’s action. For control toggles, provide a symbol for both the on and off states. For example, use the SF Symbols `door.garage.open` and `door.garage.closed` to represent a control that opens and closes a garage door. For guidance, see [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols). + +**Use symbol animations to highlight state changes.** For control toggles, animate the transition between both on and off states. For control buttons with actions that have a duration, animate indefinitely while the action performs and stop animating when the action is complete. For developer guidance, see [Symbols](https://developer.apple.com/documentation/Symbols) and [`SymbolEffect`](https://developer.apple.com/documentation/Symbols/SymbolEffect). + +**Select a tint color that works with your app’s brand.** The system applies this tint color to a control toggle’s symbol in its on state. When a person performs the action of a control from the Action button, the system also uses this tint color to display the value and symbol in the Dynamic Island. For guidance, see [Branding](https://developer.apple.com/design/human-interface-guidelines/branding). + +![An inactive control toggle with a light bulb symbol that isn't tinted.](https://docs-assets.developer.apple.com/published/858a6c878e81223350b2c6175e7edc8d/control-lightbulb-not-tinted%402x.png)Nontinted control toggle in the off state + +![An active control toggle with a light bulb symbol that's tinted yellow.](https://docs-assets.developer.apple.com/published/6beab4a3187d3a10493645eaf5447811/control-lightbulb-tinted%402x.png)Tinted control toggle in the on state + +**Help people provide additional information the system needs to perform an action.** A person may need to configure a control to perform a desired action — for example, select a specific light in a house to turn on and off. If a control requires configuration, prompt people to complete this step when they first add it. People can reconfigure the control at any time. For developer guidance, see [`promptsForUserConfiguration()`](https://developer.apple.com/documentation/SwiftUI/ControlWidgetConfiguration/promptsForUserConfiguration\(\)). + +![A representation of a control with the ability to set an option to a value a person chooses.](https://docs-assets.developer.apple.com/published/2862099d2344c5c6576a3c4503b0c0b4/control-configuration-options%402x.png) + +**Provide hint text for the Action button.** When a person presses the Action button, the system displays hint text to help them understand what happens when they press and hold. When someone presses and holds the Action button, the system performs the action configured to it. Use verbs to construct the hint text. For developer guidance, see [`controlWidgetActionHint(_:)`](https://developer.apple.com/documentation/SwiftUI/View/controlWidgetActionHint\(_:\)-5yoyh). + +![A partial screenshot of the Home Screen on iPhone that displays hint text for the Action button. The hint text is Hold for Silent.](https://docs-assets.developer.apple.com/published/530aa049e2d419ed4af0e3e4a0fb812e/controls-action-button-coaching-text-on%402x.png) + +![A partial screenshot of the Home Screen on iPhone that displays hint text for the Action button. The hint text is Hold for Ring.](https://docs-assets.developer.apple.com/published/8058fe453e9c21c3654f7917f533a70a/controls-action-button-coaching-text-off%402x.png) + +**If your control title or value can vary, include a placeholder.** Placeholder information tells people what your control does when the title and value are situational. The system displays this information when someone brings up the controls gallery in Control Center or the Lock Screen and chooses your control, or before they assign it to the Action button. + +**Hide sensitive information when the device is locked.** When the device is locked, consider having the system redact the title and value to hide personal or security-related information. Specify if the system needs to redact the symbol state as well. If specified, the system redacts the title and value, and displays the symbol in its off state. + +![A medium-size control toggle displaying a symbol of a light bulb, a title, and value text.](https://docs-assets.developer.apple.com/published/3239b45e3faff12f7e0c8faad57ac4da/control-regular-text%402x.png)Control toggle with no information hidden + +![A medium-size control toggle with redacted text.](https://docs-assets.developer.apple.com/published/60fdc68e4ffd056e2ced9b7c49ed6730/control-redacted-text%402x.png)Control toggle with information hidden on a locked device + +**Require authentication for actions that affect security.** For example, require people to unlock their device to access controls to lock or unlock the door to their house or start their car. For developer guidance, see [`IntentAuthenticationPolicy`](https://developer.apple.com/documentation/AppIntents/IntentAuthenticationPolicy). + +## [Camera experiences on a locked device](https://developer.apple.com/design/human-interface-guidelines/controls#Camera-experiences-on-a-locked-device) + +If your app supports camera capture, starting with iOS 18 you can create a control that launches directly to your app’s camera experience while the device is locked. For any task beyond capture, a person must authenticate and unlock their device to complete the task in your app. For developer guidance, see [LockedCameraCapture](https://developer.apple.com/documentation/LockedCameraCapture). + +**Use the same camera UI in your app and your camera experience.** Sharing UI leverages people’s familiarity with the app. By using the same UI, the transition to the app is seamless when someone captures content and taps a button to perform additional tasks, such as posting to a social network or editing a photo. + +**Provide instructions for adding the control.** Help people understand how to add the control that launches this camera experience. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/controls#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, watchOS, tvOS, or visionOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/controls#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/controls#Related) + +[Widgets](https://developer.apple.com/design/human-interface-guidelines/widgets) + +[Action button](https://developer.apple.com/design/human-interface-guidelines/action-button) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/controls#Developer-documentation) + +[LockedCameraCapture](https://developer.apple.com/documentation/LockedCameraCapture) + +[WidgetKit](https://developer.apple.com/documentation/WidgetKit) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/controls#Change-log) + +Date| Changes +---|--- +June 10, 2024| New page. + diff --git a/skills/hig-components-controls/references/gauges.md b/skills/hig-components-controls/references/gauges.md new file mode 100644 index 00000000..ec1a3d37 --- /dev/null +++ b/skills/hig-components-controls/references/gauges.md @@ -0,0 +1,74 @@ +--- +title: "Gauges | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/gauges + +# Gauges + +A gauge displays a specific numerical value within a range of values. + +![A stylized representation of a circular numeric gauge above a linear percentage gauge. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/f32c347212ea5d73bc63f86d1a866225/components-gauges-intro%402x.png) + +In addition to indicating the current value in a range, a gauge can provide more context about the range itself. For example, a temperature gauge can use text to identify the highest and lowest temperatures in the range and display a spectrum of colors that visually reinforce the changing values. + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/gauges#Anatomy) + +A gauge uses a circular or linear path to represent a range of values, mapping the current value to a specific point on the path. A standard gauge displays an indicator that shows the current value’s location; a gauge that uses the capacity style displays a fill that stops at the value’s location on the path. + +Circular and linear gauges in both standard and capacity styles are also available in a variant that’s visually similar to watchOS complications. This variant — called accessory — works well in iOS Lock Screen widgets and anywhere you want to echo the appearance of complications. + +Note + +In addition to gauges, macOS also supports level indicators, some of which have visual styles that are similar to gauges. For guidance, see [macOS](https://developer.apple.com/design/human-interface-guidelines/gauges#macOS). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/gauges#Best-practices) + +**Write succinct labels that describe the current value and both endpoints of the range.** Although not every gauge style displays all labels, VoiceOver reads the visible labels to help people understand the gauge without seeing the screen. + +**Consider filling the path with a gradient to help communicate the purpose of the gauge.** For example, a temperature gauge might use colors that range from red to blue to represent temperatures that range from hot to cold. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/gauges#Platform-considerations) + + _No additional considerations for iOS, iPadOS, visionOS, or watchOS. Not supported in tvOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/gauges#macOS) + +In addition to supporting gauges, macOS also defines a level indicator that displays a specific numerical value within a range. You can configure a level indicator to convey capacity, rating, or — rarely — relevance. + +The capacity style can depict discrete or continuous values. + +![An image of a continuous capacity indicator that uses the default green fill to indicate an amount of about two-thirds of the total capacity.](https://docs-assets.developer.apple.com/published/8d1f4b040b7736a1ba832b93a7dc3bfb/indicators-continuous%402x.png) + +**Continuous.** A horizontal translucent track that fills with a solid bar to indicate the current value. + +![An image of a discrete capacity indicator that uses the default green fill to indicate an amount of three-quarters of the total capacity.](https://docs-assets.developer.apple.com/published/f148e7934177391449aa61cc97ffea49/indicators-discrete%402x.png) + +**Discrete.** A horizontal row of separate, equally sized, rectangular segments. The number of segments matches the total capacity, and the segments fill completely — never partially — with color to indicate the current value. + +**Consider using the continuous style for large ranges.** A large value range can make the segments of a discrete capacity indicator too small to be useful. + +**Consider changing the fill color to inform people about significant parts of the range.** By default, the fill color for both capacity indicator styles is green. If it makes sense in your app, you can change the fill color when the current value reaches certain levels, such as very low, very high, or just past the middle. You can change the fill color of the entire indicator or you can use the tiered state to show a sequence of several colors in one indicator, as shown below. + +![An image of a continuous capacity indicator in which the leftmost one-eigth is red, the next three-eighths are yellow, the next one-fourth is green, and the last one-fourth is unfilled.](https://docs-assets.developer.apple.com/published/6d84b116ed12ffcabc2a36fb8f63e31e/indicators-continuous-tiered%402x.png)Tiered level appearance + +For guidance using the rating style to help people rank something, see [Rating indicators](https://developer.apple.com/design/human-interface-guidelines/rating-indicators). + +Although rarely used, the relevance style can communicate relevancy using a shaded horizontal bar. For example, a relevance indicator might appear in a list of search results, helping people visualize the relevancy of the results when sorting or comparing multiple items. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/gauges#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/gauges#Related) + +[Ratings and reviews](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/gauges#Developer-documentation) + +[`Gauge`](https://developer.apple.com/documentation/SwiftUI/Gauge) — SwiftUI + +[`NSLevelIndicator`](https://developer.apple.com/documentation/AppKit/NSLevelIndicator) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/gauges#Change-log) + +Date| Changes +---|--- +September 23, 2022| New page. + diff --git a/skills/hig-components-controls/references/labels.md b/skills/hig-components-controls/references/labels.md new file mode 100644 index 00000000..f3ad7730 --- /dev/null +++ b/skills/hig-components-controls/references/labels.md @@ -0,0 +1,92 @@ +--- +title: "Labels | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/labels + +# Labels + +A label is a static piece of text that people can read and often copy, but not edit. + +![A stylized representation of a text label. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b428963465f223dd1fdd01779043810c/components-label-intro%402x.png) + +Labels display text throughout the interface, in buttons, menu items, and views, helping people understand the current context and what they can do next. + +The term _label_ refers to uneditable text that can appear in various places. For example: + + * Within a button, a label generally conveys what the button does, such as Edit, Cancel, or Send. + + * Within many lists, a label can describe each item, often accompanied by a symbol or an image. + + * Within a view, a label might provide additional context by introducing a control or describing a common action or task that people can perform in the view. + + + + +Developer note + +To display uneditable text, SwiftUI defines two components: [`Label`](https://developer.apple.com/documentation/SwiftUI/Label) and [`Text`](https://developer.apple.com/documentation/SwiftUI/Text). + +The guidance below can help you use a label to display text. In some cases, guidance for specific components — such as [action buttons](https://developer.apple.com/design/human-interface-guidelines/buttons), [menus](https://developer.apple.com/design/human-interface-guidelines/menus), and [lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables) — includes additional recommendations for using text. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/labels#Best-practices) + +**Use a label to display a small amount of text that people don’t need to edit.** If you need to let people edit a small amount of text, use a [text field](https://developer.apple.com/design/human-interface-guidelines/text-fields). If you need to display a large amount of text, and optionally let people edit it, use a [text view](https://developer.apple.com/design/human-interface-guidelines/text-views). + +**Prefer system fonts.** A label can display plain or styled text, and it supports Dynamic Type (where available) by default. If you adjust the style of a label or use custom fonts, make sure the text remains legible. + +**Use system-provided label colors to communicate relative importance.** The system defines four label colors that vary in appearance to help you give text different levels of visual importance. For additional guidance, see [Color](https://developer.apple.com/design/human-interface-guidelines/color). + +System color| Example usage| iOS, iPadOS, tvOS, visionOS| macOS +---|---|---|--- +Label| Primary information| [`label`](https://developer.apple.com/documentation/UIKit/UIColor/label)| [`labelColor`](https://developer.apple.com/documentation/AppKit/NSColor/labelColor) +Secondary label| A subheading or supplemental text| [`secondaryLabel`](https://developer.apple.com/documentation/UIKit/UIColor/secondaryLabel)| [`secondaryLabelColor`](https://developer.apple.com/documentation/AppKit/NSColor/secondaryLabelColor) +Tertiary label| Text that describes an unavailable item or behavior| [`tertiaryLabel`](https://developer.apple.com/documentation/UIKit/UIColor/tertiaryLabel)| [`tertiaryLabelColor`](https://developer.apple.com/documentation/AppKit/NSColor/tertiaryLabelColor) +Quaternary label| Watermark text| [`quaternaryLabel`](https://developer.apple.com/documentation/UIKit/UIColor/quaternaryLabel)| [`quaternaryLabelColor`](https://developer.apple.com/documentation/AppKit/NSColor/quaternaryLabelColor) + +**Make useful label text selectable.** If a label contains useful information — like an error message, a location, or an IP address — consider letting people select and copy it for pasting elsewhere. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/labels#Platform-considerations) + + _No additional considerations for iOS, iPadOS, tvOS, or visionOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/labels#macOS) + +Developer note + +To display uneditable text in a label, use the [`isEditable`](https://developer.apple.com/documentation/AppKit/NSTextField/isEditable) property of [`NSTextField`](https://developer.apple.com/documentation/AppKit/NSTextField). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/labels#watchOS) + +Date and time text components (shown below on the left) display the current date, the current time, or a combination of both. You can configure a date text component to use a variety of formats, calendars, and time zones. A countdown timer text component (shown below on the right) displays a precise countdown or count-up timer. You can configure a timer text component to display its count value in a variety of formats. + +![An illustration of date and time text components on Apple Watch, with the date aligned to the leading edge and the time aligned to the trailing edge.](https://docs-assets.developer.apple.com/published/3cedf27f398b6683c78d37a325f26c33/labels-date-time-text-component%402x.png)Date and time labels + +![An illustration of a countdown timer text component on Apple Watch, with the time value at the center.](https://docs-assets.developer.apple.com/published/bc3014364c7bc508ff68d21d79c15441/labels-countdown-timer-text-component%402x.png)Timer label + +When you use the system-provided date and timer text components, watchOS automatically adjusts the label’s presentation to fit the available space. The system also updates the content without further input from your app. + +Consider using date and timer components in complications. For design guidance, see [Complications](https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/complications); for developer guidance, see [`Text`](https://developer.apple.com/documentation/SwiftUI/Text). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/labels#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/labels#Related) + +[Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) + +[Text views](https://developer.apple.com/design/human-interface-guidelines/text-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/labels#Developer-documentation) + +[`Label`](https://developer.apple.com/documentation/SwiftUI/Label) — SwiftUI + +[`Text`](https://developer.apple.com/documentation/SwiftUI/Text) — SwiftUI + +[`UILabel`](https://developer.apple.com/documentation/UIKit/UILabel) — UIKit + +[`NSTextField`](https://developer.apple.com/documentation/AppKit/NSTextField) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/labels#Change-log) + +Date| Changes +---|--- +June 5, 2023| Updated guidance to reflect changes in watchOS 10. + diff --git a/skills/hig-components-controls/references/pickers.md b/skills/hig-components-controls/references/pickers.md new file mode 100644 index 00000000..0b5b11de --- /dev/null +++ b/skills/hig-components-controls/references/pickers.md @@ -0,0 +1,128 @@ +--- +title: "Pickers | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/pickers + +# Pickers + +A picker displays one or more scrollable lists of distinct values that people can choose from. + +![A stylized representation of a selected item in a scrollable list. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/56b152d613ef1fc1424549eaa95a23d6/components-pickers-intro%402x.png) + +The system provides several styles of pickers, each of which offers different types of selectable values and has a different appearance. The exact values shown in a picker, and their order, depend on the device language. + +Pickers help people enter information by letting them choose single or multipart values. Date pickers specifically offer additional ways to choose values, like selecting a day in a calendar view or entering dates and times using a numeric keypad. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/pickers#Best-practices) + +**Consider using a picker to offer medium-to-long lists of items.** If you need to display a fairly short list of choices, consider using a [pull-down button](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) instead of a picker. Although a picker makes it easy to scroll quickly through many items, it may add too much visual weight to a short list of items. On the other hand, if you need to present a very large set of items, consider using a [list or table](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables). Lists and tables can adjust in height, and tables can include an index, which makes it much faster to target a section of the list. + +**Use predictable and logically ordered values.** Before people interact with a picker, many of its values can be hidden. It’s best when people can predict what the hidden values are, such as with an alphabetized list of countries, so they can move through the items quickly. + +**Avoid switching views to show a picker.** A picker works well when displayed in context, below or in proximity to the field people are editing. A picker typically appears at the bottom of a window or in a popover. + +**Consider providing less granularity when specifying minutes in a date picker.** By default, a minute list includes 60 values (0 to 59). You can optionally increase the minute interval as long as it divides evenly into 60. For example, you might want quarter-hour intervals (0, 15, 30, and 45). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/pickers#Platform-considerations) + + _No additional considerations for visionOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/pickers#iOS-iPadOS) + +A date picker is an efficient interface for selecting a specific date, time, or both, using touch, a keyboard, or a pointing device. You can display a date picker in one of the following styles: + + * Compact — A button that displays editable date and time content in a modal view. + + * Inline — For time only, a button that displays wheels of values; for dates and times, an inline calendar view. + + * Wheels — A set of scrolling wheels that also supports data entry through built-in or external keyboards. + + * Automatic — A system-determined style based on the current platform and date picker mode. + + + + +A date picker has four modes, each of which presents a different set of selectable values. + + * Date — Displays months, days of the month, and years. + + * Time — Displays hours, minutes, and (optionally) an AM/PM designation. + + * Date and time — Displays dates, hours, minutes, and (optionally) an AM/PM designation. + + * Countdown timer — Displays hours and minutes, up to a maximum of 23 hours and 59 minutes. This mode isn’t available in the inline or compact styles. + + + + +The exact values shown in a date picker, and their order, depend on the device location. + +Here are several examples of date pickers showing different combinations of style and mode. + + * Compact + * Inline + * Wheels + + + +![An illustration of a compact date picker, with a single inline row showing the currently selected date. The picker opens as a popover extending down from the row, and includes a full calendar month for choosing the date.](https://docs-assets.developer.apple.com/published/65d6693bf614da95dde6a82006037c86/pickers-date-picker-compact-expanded%402x.png)In a compact layout, a picker opens as a popover over your content. + +![An illustration of an inline date picker, titled 'Date'. A toggle at the top is switched on, and a calendar month for choosing the date appears below the title and toggle.](https://docs-assets.developer.apple.com/published/053773055a1630d38d3baa6ec6147f5d/pickers-date-picker-inline-expanded%402x.png)In an inline layout, a picker opens inline with your content. + +![An illustration of an inline time picker, titled 'Time'. The currently selected time appears in the title row, and three vertical wheels appear below the title row for choosing the hour, minute, and AM or PM value.](https://docs-assets.developer.apple.com/published/4474f286571f0a7b875bbd940f39bb78/pickers-time-picker-inline-wheel%402x.png)Another example of an inline picker uses wheels to choose values for date and time. + +**Use a compact date picker when space is constrained.** The compact style displays a button that shows the current value in your app’s accent color. When people tap the button, the date picker opens a modal view, providing access to a familiar calendar-style editor and time picker. Within the modal view, people can make multiple edits to dates and times before tapping outside the view to confirm their choices. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/pickers#macOS) + +**Choose a date picker style that suits your app.** There are two styles of date pickers in macOS: textual and graphical. The textual style is useful when you’re working with limited space and you expect people to make specific date and time selections. The graphical style is useful when you want to give people the option of browsing through days in a calendar or selecting a range of dates, or when the look of a clock face is appropriate for your app. + +For developer guidance, see [`NSDatePicker`](https://developer.apple.com/documentation/AppKit/NSDatePicker). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/pickers#tvOS) + +Pickers are available in tvOS with SwiftUI. For developer guidance, see [`Picker`](https://developer.apple.com/documentation/SwiftUI/Picker). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/pickers#watchOS) + +Pickers display lists of items that people navigate using the Digital Crown, which helps people manage selections in a precise and engaging way. + +A picker can display a list of items using the wheels style. watchOS can also display date and time pickers using the wheels style. For developer guidance, see [`Picker`](https://developer.apple.com/documentation/SwiftUI/Picker) and [`DatePicker`](https://developer.apple.com/documentation/SwiftUI/DatePicker). + +![An illustration representing a screen containing a picker view on Apple Watch, showing three items in a list. The center item is highlighted.](https://docs-assets.developer.apple.com/published/00d1eeb88cc503430767c2318605a71d/pickers-wheel-watch%402x.png) + +![An illustration representing a screen containing a date picker on Apple Watch, with the day highlighted.](https://docs-assets.developer.apple.com/published/30053c6f5cb2c0246e5ebecbd8ad70c3/pickers-date-watch%402x.png) + +![An illustration representing a screen containing a time picker on Apple Watch, with the minutes highlighted.](https://docs-assets.developer.apple.com/published/842ba89f2c3fdb2894949dee31bf8849/pickers-time-watch%402x.png) + +You can configure a picker to display an outline, caption, and scrolling indicator. + +For longer lists, the navigation link displays the picker as a button. When someone taps the button, the system shows the list of options. The person can also scrub through the options using the Digital Crown without tapping the button. For developer guidance, see [`navigationLink`](https://developer.apple.com/documentation/SwiftUI/PickerStyle/navigationLink). + +![An illustration representing a screen that contains a picker button on Apple Watch. The button’s text denotes that the second item is selected.](https://docs-assets.developer.apple.com/published/657d90a59d600e7eee70effde6784e45/pickers-navigation-button-watch%402x.png) + +![An illustration representing a screen showing a list of items on Apple Watch. The second item in the list is selected.](https://docs-assets.developer.apple.com/published/1e533809fb6fc291a53fd12ff0ec41f4/pickers-navigation-list-watch%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/pickers#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/pickers#Related) + +[Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) + +[Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/pickers#Developer-documentation) + +[`Picker`](https://developer.apple.com/documentation/SwiftUI/Picker) — SwiftUI + +[`UIDatePicker`](https://developer.apple.com/documentation/UIKit/UIDatePicker) — UIKit + +[`UIPickerView`](https://developer.apple.com/documentation/UIKit/UIPickerView) — UIKit + +[`NSDatePicker`](https://developer.apple.com/documentation/AppKit/NSDatePicker) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/pickers#Change-log) + +Date| Changes +---|--- +June 5, 2023| Updated guidance for using pickers in watchOS. + diff --git a/skills/hig-components-controls/references/rating-indicators.md b/skills/hig-components-controls/references/rating-indicators.md new file mode 100644 index 00000000..968a5bc3 --- /dev/null +++ b/skills/hig-components-controls/references/rating-indicators.md @@ -0,0 +1,38 @@ +--- +title: "Rating indicators | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/rating-indicators + +# Rating indicators + +A rating indicator uses a series of horizontally arranged graphical symbols — by default, stars — to communicate a ranking level. + +![A stylized representation of a rating indicator denoting a ranking of three out of five stars. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/aacce03e9d1c173b00080802bc79ff5d/components-rating-indicators-intro%402x.png) + +A rating indicator doesn’t display partial symbols; it rounds the value to display complete symbols only. Within a rating indicator, symbols are always the same distance apart and don’t expand or shrink to fit the component’s width. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/rating-indicators#Best-practices) + +**Make it easy to change rankings.** When presenting a list of ranked items, let people adjust the rank of individual items inline without navigating to a separate editing screen. + +**If you replace the star with a custom symbol, make sure that its purpose is clear.** The star is a very recognizable ranking symbol, and people may not associate other symbols with a rating scale. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/rating-indicators#Platform-considerations) + + _No additional considerations for macOS. Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/rating-indicators#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/rating-indicators#Related) + +[Ratings and reviews](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/rating-indicators#Developer-documentation) + +[`NSLevelIndicator.Style.rating`](https://developer.apple.com/documentation/AppKit/NSLevelIndicator/Style/rating) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/rating-indicators#Change-log) + +Date| Changes +---|--- +September 23, 2022| New page. + diff --git a/skills/hig-components-controls/references/segmented-controls.md b/skills/hig-components-controls/references/segmented-controls.md new file mode 100644 index 00000000..473121e7 --- /dev/null +++ b/skills/hig-components-controls/references/segmented-controls.md @@ -0,0 +1,94 @@ +--- +title: "Segmented controls | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/segmented-controls + +# Segmented controls + +A segmented control is a linear set of two or more segments, each of which functions as a button. + +![A stylized representation of a selected segment in a segmented control. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/89298764551d236435a7057412cf2e06/components-segmented-control-intro%402x.png) + +Within a segmented control, all segments are usually equal in width. Like [buttons](https://developer.apple.com/design/human-interface-guidelines/buttons), segments can contain text or images. Segments can also have text labels beneath them (or beneath the control as a whole). + +A segmented control offers a single choice from among a set of options, or in macOS, either a single choice or multiple choices. For example, in macOS Keynote people can select only one segment in the alignment options control to align selected text. In contrast, people can choose multiple segments in the font attributes control to combine styles like bold, italics, and underline. The toolbar of a Keynote window also uses a segmented control to let people show and hide various editing panes within the main window area. + +![A partial screenshot of a segmented control that consists of four text-alignment options. The center alignment option is selected.](https://docs-assets.developer.apple.com/published/7ed5112804ec078b8ba281e30a30ec85/segmented-control-one-choice%402x.png)Single choice + +![A partial screenshot of a segmented control that consists of four font types. Three of the four options are selected.](https://docs-assets.developer.apple.com/published/0b1d550e9c4fc6e201d45640fad819eb/segmented-control-multiple-choices%402x.png)Multiple choices + +In addition to representing the state of a single or multiple-choice selection, a segmented control can function as a set of buttons that perform actions without showing a selection state. For example, the Reply, Reply all, and Forward buttons in macOS Mail. For developer guidance, see [`isMomentary`](https://developer.apple.com/documentation/UIKit/UISegmentedControl/isMomentary) and [`NSSegmentedControl.SwitchTracking.momentary`](https://developer.apple.com/documentation/AppKit/NSSegmentedControl/SwitchTracking/momentary). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#Best-practices) + +**Use a segmented control to provide closely related choices that affect an object, state, or view.** For example, a segmented control in an inspector could let people choose one or more attributes to apply to a selection, or a segmented control in a toolbar could offer a set of actions to perform on the current view. + +![A screenshot of the top half of the Activity screen in the iOS Health app, showing graphs of Move and Exercise activity. The segmented control above the graphs has D selected, indicating that the graphs show one day of activity.](https://docs-assets.developer.apple.com/published/f82bafe0f162b0181f6d50661109464b/segmented-controls-activity-charts%402x.png) + +In the iOS Health app, a segmented control provides a choice of time ranges for the activity graphs to display. + +**Consider a segmented control when it’s important to group functions together, or to clearly show their selection state.** Unlike other button styles, segmented controls preserve their grouping regardless of the view size or where they appear. This grouping can also help people understand at a glance which controls are currently selected. + +**Keep control types consistent within a single segmented control.** Don’t assign actions to segments in a control that otherwise represents selection state, and don’t show a selection state for segments in a control that otherwise performs actions. + +**Limit the number of segments in a control.** Too many segments can be hard to parse and time-consuming to navigate. Aim for no more than about five to seven segments in a wide interface and no more than about five segments on iPhone. + +**In general, keep segment size consistent.** When all segments have equal width, a segmented control feels balanced. To the extent possible, it’s best to keep icon and title widths consistent too. + +## [Content](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#Content) + +**Prefer using either text or images — not a mix of both — in a single segmented control.** Although individual segments can contain text labels or images, mixing the two in a single control can lead to a disconnected and confusing interface. + +**As much as possible, use content with a similar size in each segment.** Because all segments typically have equal width, it doesn’t look good if content fills some segments but not others. + +**Use nouns or noun phrases for segment labels.** Write text that describes each segment and uses [title-style capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64). A segmented control that displays text labels doesn’t need introductory text. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#Platform-considerations) + + _Not supported in watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#iOS-iPadOS) + +**Consider a segmented control to switch between closely related subviews.** A segmented control can be useful as a way to quickly switch between related subviews. For example, the segmented control in Calendar’s New Event sheet switches between the subviews for creating a new event and a new reminder. For switching between completely separate sections of an app, use a [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars) instead. + +![A screenshot of the top half of the iOS Calendar app, showing the New Event sheet. A segmented control provides the ability to switch between adding a new event and a new reminder.](https://docs-assets.developer.apple.com/published/2438acc643ee037a518cad7a15b18709/segmented-controls-calendar-new-event%402x.png) + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#macOS) + +**Consider using introductory text to clarify the purpose of a segmented control.** When the control uses symbols or interface icons, you could also add a label below each segment to clarify its meaning. If your app includes tooltips, provide one for each segment in a segmented control. + +**Use a tab view in the main window area — instead of a segmented control — for view switching.** A [tab view](https://developer.apple.com/design/human-interface-guidelines/tab-views) supports efficient view switching and is similar in appearance to a [box](https://developer.apple.com/design/human-interface-guidelines/boxes) combined with a segmented control. Consider using a segmented control to help people switch views in a toolbar or inspector pane. + +![A screenshot of the macOS Calendar app. The main window area shows a tab view that contains four tabs: Day, Week, Month, and Year. The sidebar shows a segmented control that contains two segments: New and Replied.](https://docs-assets.developer.apple.com/published/e0a8dd930dcd6e099b72c643b6077a7b/macos-calendar-tab-view-segmented-control-comparison%402x.png) + +**Consider supporting spring loading.** On a Mac equipped with a Magic Trackpad, spring loading lets people activate a segment by dragging selected items over it and force clicking without dropping the selected items. People can also continue dragging the items after a segment activates. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#tvOS) + +**Consider using a split view instead of a segmented control on screens that perform content filtering.** People generally find it easy to navigate back and forth between content and filtering options using a split view. Depending on its placement, a segmented control may not be as easy to access. + +**Avoid putting other focusable elements close to segmented controls.** Segments become selected when focus moves to them, not when people click them. Carefully consider where you position a segmented control relative to other interface elements. If other focusable elements are too close, people might accidentally focus on them when attempting to switch between segments. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#visionOS) + +When people look at a segmented control that uses icons, the system displays a tooltip that contains the descriptive text you supply. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#Related) + +[Split views](https://developer.apple.com/design/human-interface-guidelines/split-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#Developer-documentation) + +[`segmented`](https://developer.apple.com/documentation/SwiftUI/PickerStyle/segmented) — SwiftUI + +[`UISegmentedControl`](https://developer.apple.com/documentation/UIKit/UISegmentedControl) — UIKit + +[`NSSegmentedControl`](https://developer.apple.com/documentation/AppKit/NSSegmentedControl) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/segmented-controls#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-components-controls/references/sliders.md b/skills/hig-components-controls/references/sliders.md new file mode 100644 index 00000000..58dd6901 --- /dev/null +++ b/skills/hig-components-controls/references/sliders.md @@ -0,0 +1,92 @@ +--- +title: "Sliders | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/sliders + +# Sliders + +A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value. + +![A stylized representation of a brightness slider. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ebb02bcf10487e6a03fd081236b35aa0/components-slider-intro%402x.png) + +As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color. A slider can optionally display left and right icons that illustrate the meaning of the minimum and maximum values. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/sliders#Best-practices) + +**Customize a slider’s appearance if it adds value.** You can adjust a slider’s appearance — including track color, thumb image and tint color, and left and right icons — to blend with your app’s design and communicate intent. A slider that adjusts image size, for example, could show a small image icon on the left and a large image icon on the right. + +**Use familiar slider directions.** People expect the minimum and maximum sides of sliders to be consistent in all apps, with minimum values on the leading side and maximum values on the trailing side (for horizontal sliders) and minimum values at the bottom and maximum values at the top (for vertical sliders). For example, people expect to be able to move a horizontal slider that represents a percentage from 0 percent on the leading side to 100 percent on the trailing side. + +**Consider supplementing a slider with a corresponding text field and stepper.** Especially when a slider represents a wide range of values, people may appreciate seeing the exact slider value and having the ability to enter a specific value in a text field. Adding a stepper provides a convenient way for people to increment in whole values. For related guidance, see [Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) and [Steppers](https://developer.apple.com/design/human-interface-guidelines/steppers). + +![An illustration of a horizontal linear slider without tick marks, followed by a text field and a stepper. The thumb is in the center of the slider and the text field displays 50%.](https://docs-assets.developer.apple.com/published/ce79e1e4b3b1faa688862341ed208792/sliders-text-field%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/sliders#Platform-considerations) + + _Not supported in tvOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/sliders#iOS-iPadOS) + +**Don’t use a slider to adjust audio volume.** If you need to provide volume control in your app, use a volume view, which is customizable and includes a volume-level slider and a control for changing the active audio output device. For guidance, see [Playing audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/sliders#macOS) + +Sliders in macOS can also include tick marks, making it easier for people to pinpoint a specific value within the range. + +In a linear slider either with or without tick marks, the thumb is a narrow lozenge shape, and the portion of track between the minimum value and the thumb is filled with color. A linear slider often includes supplementary icons that illustrate the meaning of the minimum and maximum values. + +In a circular slider, the thumb appears as a small circle. Tick marks, when present, appear as evenly spaced dots around the circumference of the slider. + +![An illustration of a horizontal slider with the thumb in the middle. The leading portion of the track up to the thumb is filled with a blue highlight color.](https://docs-assets.developer.apple.com/published/92445cf683c4dc1b179fb5359a0bdb28/sliders-no-tick-marks%402x.png)Linear slider without tick marks + +![An illustration of a horizontal slider with the thumb between two tick marks in the middle of the slider. The leading portion of the track up to the thumb is filled with a blue highlight color.](https://docs-assets.developer.apple.com/published/e31ef9e35e8675bd62f695ba6a988a51/sliders-tick-marks%402x.png)Linear slider with tick marks + +![An illustration of a circular slider with the thumb at the 12 o'clock position.](https://docs-assets.developer.apple.com/published/3f253ed199e7e92b6124e6161dd79152/sliders-circular%402x.png)Circular slider + +**Consider giving live feedback as the value of a slider changes.** Live feedback shows people results in real time. For example, your Dock icons are dynamically scaled when adjusting the Size slider in Dock settings. + +**Choose a slider style that matches peoples’ expectations.** A horizontal slider is ideal when moving between a fixed starting and ending point. For example, a graphics app might offer a horizontal slider for setting the opacity level of an object between 0 and 100 percent. Use circular sliders when values repeat or continue indefinitely. For example, a graphics app might use a circular slider to adjust the rotation of an object between 0 and 360 degrees. An animation app might use a circular slider to adjust how many times an object spins when animated — four complete rotations equals four spins, or 1440 degrees of rotation. + +**Consider using a label to introduce a slider.** Labels generally use [sentence-style capitalization](https://help.apple.com/applestyleguide/#/apsgb744e4a3?sub=apdca93e113f1d64) and end with a colon. For guidance, see [Labels](https://developer.apple.com/design/human-interface-guidelines/labels). + +**Use tick marks to increase clarity and accuracy.** Tick marks help people understand the scale of measurements and make it easier to locate specific values. + +![A partial screenshot of the Energy Saver settings pane in macOS, cropped to show the slider that controls how long the display remains on after inactivity.](https://docs-assets.developer.apple.com/published/90d44ac8355f4a4e672e5e81633814e6/sliders-labels%402x.png) + +**Consider adding labels to tick marks for even greater clarity.** Labels can be numbers or words, depending on the slider’s values. It’s unnecessary to label every tick mark unless doing so is needed to reduce confusion. In many cases, labeling only the minimum and maximum values is sufficient. When the values of the slider are nonlinear, like in the Energy Saver settings pane, periodic labels provide context. It’s also a good idea to provide a [tooltip](https://developer.apple.com/design/human-interface-guidelines/offering-help#macOS-visionOS) that displays the value of the thumb when people hold their pointer over it. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/sliders#visionOS) + +**Prefer horizontal sliders.** It’s generally easier for people to gesture from side to side than up and down. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/sliders#watchOS) + +A slider is a horizontal track — appearing as a set of discrete steps or as a continuous bar — that represents a finite range of values. People can tap buttons on the sides of the slider to increase or decrease its value by a predefined amount. + +![An illustration of a watchOS volume slider with discrete steps. The first two of three steps are filled with a green highlight color, indicating the volume level.](https://docs-assets.developer.apple.com/published/3acc4339289d9cf65ec982e73f950f97/sliders-watchos-discrete%402x.png)Discrete + +![An illustration of a watchOS volume slider with a continuous bar. Two-thirds of the bar is filled with a green highlight color, indicating the volume level.](https://docs-assets.developer.apple.com/published/b356f0616bad32afce9ac9e62763414b/sliders-watchos-continuous%402x.png)Continuous + +**If necessary, create custom glyphs to communicate what the slider does.** The system displays plus and minus signs by default. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/sliders#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/sliders#Related) + +[Steppers](https://developer.apple.com/design/human-interface-guidelines/steppers) + +[Pickers](https://developer.apple.com/design/human-interface-guidelines/pickers) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/sliders#Developer-documentation) + +[`Slider`](https://developer.apple.com/documentation/SwiftUI/Slider) — SwiftUI + +[`UISlider`](https://developer.apple.com/documentation/UIKit/UISlider) — UIKit + +[`NSSlider`](https://developer.apple.com/documentation/AppKit/NSSlider) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/sliders#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-components-controls/references/steppers.md b/skills/hig-components-controls/references/steppers.md new file mode 100644 index 00000000..2fac9ba7 --- /dev/null +++ b/skills/hig-components-controls/references/steppers.md @@ -0,0 +1,40 @@ +--- +title: "Steppers | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/steppers + +# Steppers + +A stepper is a two-segment control that people use to increase or decrease an incremental value. + +![A stylized representation of a stepper control. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/091580d0530042f6685cd17226140173/components-stepper-intro%402x.png) + +A stepper sits next to a field that displays its current value, because the stepper itself doesn’t display a value. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/steppers#Best-practices) + +**Make the value that a stepper affects obvious.** A stepper itself doesn’t display any values, so make sure people know which value they’re changing when they use a stepper. + +**Consider pairing a stepper with a text field when large value changes are likely.** Steppers work well by themselves for making small changes that require a few taps or clicks. By contrast, people appreciate the option to use a field to enter specific values, especially when the values they use can vary widely. On a printing screen, for example, it can help to have both a stepper and a text field to set the number of copies. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/steppers#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or visionOS. Not supported in watchOS or tvOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/steppers#macOS) + +**For large value ranges, consider supporting Shift-click to change the value quickly.** If your app benefits from larger changes in a stepper’s value, it can be useful to let people Shift-click the stepper to change the value by more than the default increment (by 10 times the default, for example). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/steppers#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/steppers#Related) + +[Pickers](https://developer.apple.com/design/human-interface-guidelines/pickers) + +[Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/steppers#Developer-documentation) + +[`UIStepper`](https://developer.apple.com/documentation/UIKit/UIStepper) — UIKit + +[`NSStepper`](https://developer.apple.com/documentation/AppKit/NSStepper) — AppKit + diff --git a/skills/hig-components-controls/references/text-fields.md b/skills/hig-components-controls/references/text-fields.md new file mode 100644 index 00000000..00dd41a6 --- /dev/null +++ b/skills/hig-components-controls/references/text-fields.md @@ -0,0 +1,88 @@ +--- +title: "Text fields | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/text-fields + +# Text fields + +A text field is a rectangular area in which people enter or edit small, specific pieces of text. + +![A stylized representation of a text field containing a value. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d23fbf0321063ee6b988a1528ad48ef5/components-text-field-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/text-fields#Best-practices) + +**Use a text field to request a small amount of information, such as a name or an email address.** To let people input larger amounts of text, use a [text view](https://developer.apple.com/design/human-interface-guidelines/text-views) instead. + +**Show a hint in a text field to help communicate its purpose.** A text field can contain placeholder text — such as “Email” or “Password” — when there’s no other text in the field. Because placeholder text disappears when people start typing, it can also be useful to include a separate label describing the field to remind people of its purpose. + +**Use secure text fields to hide private data.** Always use a secure text field when your app asks for sensitive data, such as a password. For developer guidance, see [`SecureField`](https://developer.apple.com/documentation/SwiftUI/SecureField). + +**To the extent possible, match the size of a text field to the quantity of anticipated text.** The size of a text field helps people visually gauge the amount of information to provide. + +**Evenly space multiple text fields.** If your layout includes multiple text fields, leave enough space between them so people can easily see which input field belongs with each introductory label. Stack multiple text fields vertically when possible, and use consistent widths to create a more organized layout. For example, the first and last name fields on an address form might be one width, while the address and city fields might be a different width. + +**Ensure that tabbing between multiple fields flows as people expect.** When tabbing between fields, move focus in a logical sequence. The system attempts to achieve this result automatically, so you won’t need to customize this too often. + +**Validate fields when it makes sense.** For example, if the only legitimate value for a field is a string of digits, your app needs to alert people if they’ve entered characters other than digits. The appropriate time to check the data depends on the context: when entering an email address, it’s best to validate when people switch to another field; when creating a user name or password, validation needs to happen before people switch to another field. + +**Use a number formatter to help with numeric data.** A number formatter automatically configures the text field to accept only numeric values. It can also display the value in a specific way, such as with a certain number of decimal places, as a percentage, or as currency. Don’t assume the actual presentation of data, however, as formatting can vary significantly based on people’s locale. + +![A partial screenshot of two stacked text fields. The top field contains a number with four decimal places. The bottom field contains a currency value.](https://docs-assets.developer.apple.com/published/4c7bdd958dfd5ae5c0eb2103f511c984/text-fields-formatted-text%402x.png)Formatted text + +**Adjust line breaks according to the needs of the field.** By default, the system clips any text extending beyond the bounds of a text field. Alternatively, you can set up a text field to wrap text to a new line at the character or word level, or to truncate (indicated by an ellipsis) at the beginning, middle, or end. + +![A partial screenshot of a text field that contains a sentence that is cut off before its end.](https://docs-assets.developer.apple.com/published/4f5087014620cf61ae6e6cf691766376/text-fields-clipped-text%402x.png)Clipped text + +![A partial screenshot of a text field that contains a sentence that wraps to two lines.](https://docs-assets.developer.apple.com/published/5e7b94570af0f50c9e9a3061a428aa15/text-fields-wrapped-text%402x.png)Wrapped text + +![A partial screenshot of a text field that contains a sentence that includes an ellipsis in place of the last few words.](https://docs-assets.developer.apple.com/published/ad0040baa8369af2dbd9ab88a25c3439/text-fields-truncated-text%402x.png)Truncated text + +**Consider using an expansion tooltip to show the full version of clipped or truncated text.** An expansion tooltip behaves like a regular [tooltip](https://developer.apple.com/design/human-interface-guidelines/offering-help#macOS-visionOS) and appears when someone places the pointer over the field. + +**In iOS, iPadOS, tvOS, and visionOS apps, show the appropriate keyboard type.** Several different keyboard types are available, each designed to facilitate a different type of input, such as numbers or URLs. To streamline data entry, display the keyboard that’s appropriate for the type of content people are entering. For guidance, see [Virtual keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards). + +**Minimize text entry in your tvOS and watchOS apps.** Entering long passages of text or filling out numerous text fields is time-consuming on Apple TV and Apple Watch. Minimize text input and consider gathering information more efficiently, such as with buttons. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/text-fields#Platform-considerations) + + _No additional considerations for tvOS or visionOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/text-fields#iOS-iPadOS) + +**Display a Clear button in the trailing end of a text field to help people erase their input.** When this element is present, people can tap it to clear the text field’s contents, without having to keep tapping the Delete key. + +**Use images and buttons to provide clarity and functionality in text fields.** You can display custom images in both ends of a text field, or you can add a system-provided button, such as the Bookmarks button. In general, use the leading end of a text field to indicate a field’s purpose and the trailing end to offer additional features, such as bookmarking. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/text-fields#macOS) + +**Consider using a combo box if you need to pair text input with a list of choices.** For related guidance, see [Combo boxes](https://developer.apple.com/design/human-interface-guidelines/combo-boxes). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/text-fields#watchOS) + +**Present a text field only when necessary.** Whenever possible, prefer displaying a list of options rather than requiring text entry. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/text-fields#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/text-fields#Related) + +[Text views](https://developer.apple.com/design/human-interface-guidelines/text-views) + +[Combo boxes](https://developer.apple.com/design/human-interface-guidelines/combo-boxes) + +[Entering data](https://developer.apple.com/design/human-interface-guidelines/entering-data) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/text-fields#Developer-documentation) + +[`TextField`](https://developer.apple.com/documentation/SwiftUI/TextField) — SwiftUI + +[`SecureField`](https://developer.apple.com/documentation/SwiftUI/SecureField) — SwiftUI + +[`UITextField`](https://developer.apple.com/documentation/UIKit/UITextField) — UIKit + +[`NSTextField`](https://developer.apple.com/documentation/AppKit/NSTextField) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/text-fields#Change-log) + +Date| Changes +---|--- +June 5, 2023| Updated guidance to reflect changes in watchOS 10. + diff --git a/skills/hig-components-controls/references/text-views.md b/skills/hig-components-controls/references/text-views.md new file mode 100644 index 00000000..c3c63037 --- /dev/null +++ b/skills/hig-components-controls/references/text-views.md @@ -0,0 +1,56 @@ +--- +title: "Text views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/text-views + +# Text views + +A text view displays multiline, styled text content, which can optionally be editable. + +![A stylized representation of a field containing text. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/21cb3b13c0de850f2eef9a9c7ec14754/components-text-view-intro%402x.png) + +Text views can be any height and allow scrolling when the content extends outside of the view. By default, content within a text view is aligned to the leading edge and uses the system label color. In iOS, iPadOS, and visionOS, if a text view is editable, a keyboard appears when people select the view. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/text-views#Best-practices) + +**Use a text view when you need to display text that’s long, editable, or in a special format.** Text views differ from [text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) and [labels](https://developer.apple.com/design/human-interface-guidelines/labels) in that they provide the most options for displaying specialized text and receiving text input. If you need to display a small amount of text, it’s simpler to use a label or — if the text is editable — a text field. + +**Keep text legible.** Although you can use multiple fonts, colors, and alignments in creative ways, it’s essential to maintain the readability of your content. It’s a good idea to adopt Dynamic Type so your text still looks good if people change text size on their device. Be sure to test your content with accessibility options turned on, such as bold text. For guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) and [Typography](https://developer.apple.com/design/human-interface-guidelines/typography). + +**Make useful text selectable.** If a text view contains useful information such as an error message, a serial number, or an IP address, consider letting people select and copy it for pasting elsewhere. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/text-views#Platform-considerations) + + _No additional considerations for macOS, visionOS, or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/text-views#iOS-iPadOS) + +**Show the appropriate keyboard type.** Several different keyboard types are available, each designed to facilitate a different type of input. To streamline data entry, the keyboard you display when editing a text view needs to be appropriate for the type of content. For guidance, see [Virtual keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/text-views#tvOS) + +You can display text in tvOS using a text view. Because text input in tvOS is minimal by design, tvOS uses [text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) for editable text instead. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/text-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/text-views#Related) + +[Labels](https://developer.apple.com/design/human-interface-guidelines/labels) + +[Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) + +[Combo boxes](https://developer.apple.com/design/human-interface-guidelines/combo-boxes) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/text-views#Developer-documentation) + +[`Text`](https://developer.apple.com/documentation/SwiftUI/Text) — SwiftUI + +[`UITextView`](https://developer.apple.com/documentation/UIKit/UITextView) — UIKit + +[`NSTextView`](https://developer.apple.com/documentation/AppKit/NSTextView) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/text-views#Change-log) + +Date| Changes +---|--- +June 5, 2023| Updated guidance to reflect changes in watchOS 10. + diff --git a/skills/hig-components-controls/references/toggles.md b/skills/hig-components-controls/references/toggles.md new file mode 100644 index 00000000..e61003ce --- /dev/null +++ b/skills/hig-components-controls/references/toggles.md @@ -0,0 +1,127 @@ +--- +title: "Toggles | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/toggles + +# Toggles + +A toggle lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state. + +![A stylized representation of two labeled switch controls. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/f4a1d653777ba4f0b6b4b7d97d704f9f/components-toggles-intro%402x.png) + +A toggle can have various styles, such as switch and checkbox, and different platforms can use these styles in different ways. For guidance, see [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/toggles#Platform-considerations). + +In addition to toggles, all platforms also support buttons that behave like toggles by using a different appearance for each state. For developer guidance, see [`ToggleStyle`](https://developer.apple.com/documentation/SwiftUI/ToggleStyle). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/toggles#Best-practices) + +**Use a toggle to help people choose between two opposing values that affect the state of content or a view.** A toggle always lets people manage the state of something, so if you need to support other types of actions — such as choosing from a list of items — use a different component, like a [pop-up button](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons). + +**Clearly identify the setting, view, or content the toggle affects.** In general, the surrounding context provides enough information for people to understand what they’re turning on or off. In some cases, often in macOS apps, you can also supply a label to describe the state the toggle controls. If you use a button that behaves like a toggle, you generally use an interface icon that communicates its purpose, and you update its appearance — typically by changing the background — based on the current state. + +**Make sure the visual differences in a toggle’s state are obvious.** For example, you might add or remove a color fill, show or hide the background shape, or change the inner details you display — like a checkmark or dot — to show that a toggle is on or off. Avoid relying solely on different colors to communicate state, because not everyone can perceive the differences. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/toggles#Platform-considerations) + + _No additional considerations for tvOS, visionOS, or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/toggles#iOS-iPadOS) + +**Use the switch toggle style only in a list row.** You don’t need to supply a label in this situation because the content in the row provides the context for the state the switch controls. + +**Change the default color of a switch only if necessary.** The default green color tends to work well in most cases, but you might want to use your app’s accent color instead. Be sure to use a color that provides enough contrast with the uncolored appearance to be perceptible. + +![An illustration of two list rows, one with an active switch toggle and one with an inactive switch toggle. The active toggle is tinted green with the standard switch color.](https://docs-assets.developer.apple.com/published/95dd06ef1de5bf4360caef804af79b15/toggles-ios-default-color%402x.png)Standard switch color + +![An illustration of two list rows, one with an active switch toggle and one with an inactive switch toggle. The active toggle is tinted purple with a custom switch color.](https://docs-assets.developer.apple.com/published/8e40963d32263c9319f4b5f3ac3ac721/toggles-ios-custom-color%402x.png)Custom switch color + +**Outside of a list, use a button that behaves like a toggle, not a switch.** For example, the Phone app uses a toggle on the filter button to let users filter their recent calls. The app adds a blue highlight to indicate when the toggle is active, and removes it when the toggle is inactive. + +![A screenshot of the top half of the Phone app on iPhone, showing the filtered list of recent missed calls. The filter button in the top trailing corner has a blue highlight, indicating that the toggle is active.](https://docs-assets.developer.apple.com/published/895b4c8fd67287f587d7c0576c2555a8/toggles-ios-phone-filter-on%402x.png) + +The Phone app uses a toggle to switch between all recent calls and various filter options. When someone chooses a filter, the toggle appears with a custom background drawn behind the symbol. + +![A screenshot of the top half of the Phone app on iPhone, showing all recent calls. The filter button in the top trailing corner has no highlight, indicating that the toggle is inactive.](https://docs-assets.developer.apple.com/published/d38180341155877eec2f5b34159ab72f/toggles-ios-phone-filter-off%402x.png) + +When someone returns to the main Recents view, the toggle appears without anything behind the symbol. + +**Avoid supplying a label that explains the button’s purpose.** The interface icon you create — combined with the alternative background appearances you supply — help people understand what the button does. For developer guidance, see [`changesSelectionAsPrimaryAction`](https://developer.apple.com/documentation/UIKit/UIButton/changesSelectionAsPrimaryAction). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/toggles#macOS) + +In addition to the switch toggle style, macOS supports the checkbox style and also defines radio buttons that can provide similar behaviors. + +**Use switches, checkboxes, and radio buttons in the window body, not the window frame.** In particular, avoid using these components in a toolbar or status bar. + +#### [Switches](https://developer.apple.com/design/human-interface-guidelines/toggles#Switches) + +**Prefer a switch for settings that you want to emphasize.** A switch has more visual weight than a checkbox, so it looks better when it controls more functionality than a checkbox typically does. For example, you might use a switch to let people turn on or off a group of settings, instead of just one setting. For developer guidance, see [`switch`](https://developer.apple.com/documentation/SwiftUI/ToggleStyle/switch). + +**Within a grouped form, consider using a mini switch to control the setting in a single row.** The height of a mini switch is similar to the height of buttons and other controls, resulting in rows that have a consistent height. If you need to present a hierarchy of settings within a grouped form, you can use a regular switch for the primary setting and mini switches for the subordinate settings. For developer guidance, see [`GroupedFormStyle`](https://developer.apple.com/documentation/SwiftUI/GroupedFormStyle) and [`ControlSize`](https://developer.apple.com/documentation/SwiftUI/ControlSize). + +**In general, don’t replace a checkbox with a switch.** If you’re already using a checkbox in your interface, it’s probably best to keep using it. + +#### [Checkboxes](https://developer.apple.com/design/human-interface-guidelines/toggles#Checkboxes) + +A checkbox is a small, square button that’s empty when the button is off, contains a checkmark when the button is on, and can contain a dash when the button’s state is mixed. Typically, a checkbox includes a title on its trailing side. In an editable checklist, a checkbox can appear without a title or any additional content. + +**Use a checkbox instead of a switch if you need to present a hierarchy of settings.** The visual style of checkboxes helps them align well and communicate grouping. By using alignment — generally along the leading edge of the checkboxes — and indentation, you can show dependencies, such as when the state of a checkbox governs the state of subordinate checkboxes. + +![An illustration showing a layout that includes two levels of checkboxes.](https://docs-assets.developer.apple.com/published/ec2755eb8089e275b1ebb3cd294606b0/checkbox-alignment%402x.png) + +**Consider using radio buttons if you need to present a set of more than two mutually exclusive options.** When people need to choose from options in addition to just “on” or “off,” using multiple radio buttons can help you clarify each option with a unique label. + +**Consider using a label to introduce a group of checkboxes if their relationship isn’t clear.** Describe the set of options, and align the label’s baseline with the first checkbox in the group. + +**Accurately reflect a checkbox’s state in its appearance.** A checkbox’s state can be on, off, or mixed. If you use a checkbox to globally turn on and off multiple subordinate checkboxes, show a mixed state when the subordinate checkboxes have different states. For example, you might need to present a text-style setting that turns all styles on or off, but also lets people choose a subset of individual style settings like bold, italic, or underline. For developer guidance, see [`allowsMixedState`](https://developer.apple.com/documentation/AppKit/NSButton/allowsMixedState). + +![An illustration that shows a checkbox with the on state, which looks like a small rounded square with blue fill and a white checkmark.](https://docs-assets.developer.apple.com/published/67efc6dab34453404f164acef3bac84d/checkbox-selected%402x.png)On + +![An illustration that shows a checkbox with the off state, which looks like a small rounded square with no fill.](https://docs-assets.developer.apple.com/published/ffd72e78175dc69a27016e8454030b71/checkbox-deselected%402x.png)Off + +![An illustration that shows a checkbox with the mixed state, which looks like a small rounded square with blue fill and a white hyphen.](https://docs-assets.developer.apple.com/published/f60cc3ddbea31509d83e204d963cb1d0/checkbox-mixed%402x.png)Mixed + +#### [Radio buttons](https://developer.apple.com/design/human-interface-guidelines/toggles#Radio-buttons) + +A radio button is a small, circular button followed by a label. Typically displayed in groups of two to five, radio buttons present a set of mutually exclusive choices. + +![An illustration that shows five items in a column, each with a radio button preceding the text Radio Button Label. The radio button for the third item is filled, indicating that it's selected.](https://docs-assets.developer.apple.com/published/dee18caa44a87ddcad53b912203b2fea/radio-button-example%402x.png) + +A radio button’s state is either selected (a filled circle) or deselected (an empty circle). Although a radio button can also display a mixed state (indicated by a dash), this state is rarely useful because you can communicate multiple states by using additional radio buttons. If you need to show that a setting or item has a mixed state, consider using a checkbox instead. + +![An illustration that shows a selected radio button, which looks like a white dot centered in a small circle with a dark fill.](https://docs-assets.developer.apple.com/published/91c45b3934ecd18b42b2bb72e64ca702/radio-button-selected%402x.png)Selected + +![An illustration that shows a deselected radio button, which looks like a small, empty circle.](https://docs-assets.developer.apple.com/published/1bec25f63381d81a41f885e1338eb571/radio-button-deselected%402x.png)Deselected + +**Prefer a set of radio buttons to present mutually exclusive options.** If you need to let people choose multiple options in a set, use checkboxes instead. + +**Avoid listing too many radio buttons in a set.** A long list of radio buttons takes up a lot of space in the interface and can be overwhelming. If you need to present more than about five options, consider using a component like a [pop-up button](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) instead. + +**To present a single setting that can be on or off, prefer a checkbox.** Although a single radio button can also turn something on or off, the presence or absence of the checkmark in a checkbox can make the current state easier to understand at a glance. In rare cases where a single checkbox doesn’t clearly communicate the opposing states, you can use a pair of radio buttons, each with a label that specifies the state it controls. + +**Use consistent spacing when you display radio buttons horizontally.** Measure the space needed to accommodate the longest button label, and use that measurement consistently. + +![An illustration that shows three items in a row, with a radio button preceding each item. The first and third items have long text labels, while the second has a short label. The horizontal space each item occupies is equal. A filled radio button precedes the second item, indicating that it's selected.](https://docs-assets.developer.apple.com/published/95fc61aefa156d2d78d9eb6589a47f6e/radio-button-equal-spacing%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/toggles#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/toggles#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/toggles#Developer-documentation) + +[`Toggle`](https://developer.apple.com/documentation/SwiftUI/Toggle) — SwiftUI + +[`UISwitch`](https://developer.apple.com/documentation/UIKit/UISwitch) — UIKit + +[`NSButton.ButtonType.toggle`](https://developer.apple.com/documentation/AppKit/NSButton/ButtonType/toggle) — AppKit + +[`NSSwitch`](https://developer.apple.com/documentation/AppKit/NSSwitch) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/toggles#Change-log) + +Date| Changes +---|--- +March 29, 2024| Enhanced guidance for using switches in macOS apps, clarified when a checkbox has a title, and added artwork for radio buttons. +September 12, 2023| Updated artwork. + diff --git a/skills/hig-components-controls/references/token-fields.md b/skills/hig-components-controls/references/token-fields.md new file mode 100644 index 00000000..a319c9a0 --- /dev/null +++ b/skills/hig-components-controls/references/token-fields.md @@ -0,0 +1,48 @@ +--- +title: "Token fields | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/token-fields + +# Token fields + +A token field is a type of text field that can convert text into _tokens_ that are easy to select and manipulate. + +![A stylized representation of a text field containing a person's name formatted as a token. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ae1ce6c362273339a9c3ec4a3538db61/components-token-field-intro%402x.png) + +For example, Mail uses token fields for the address fields in the compose window. As people enter recipients, Mail converts the text that represents each recipient’s name into a token. People can select these recipient tokens and drag to reorder them or move them into a different field. + +You can configure a token field to present people with a list of suggestions as they enter text into the field. For example, Mail suggests recipients as people type in an address field. When people select a suggested recipient, Mail inserts the recipient into the field as a token. + +![A partial screenshot of a Mail compose window in which tokens represent some recipients.](https://docs-assets.developer.apple.com/published/ab0f5c6dea336edb0c10cf09e33b05e3/token-fields-suggestion%402x.png) + +An individual token can also include a contextual menu that offers information about the token or editing options. For example, a recipient token in Mail includes a contextual menu with commands for editing the recipient name, marking the recipient as a VIP, and viewing the recipient’s contact card, among others. + +![A partial screenshot of a Mail compose window in which one recipient token reveals a menu of commands.](https://docs-assets.developer.apple.com/published/84d649e57814229dc2c7acb5fe5e230f/token-fields-contextual%402x.png) + +Tokens can also represent search terms in some situations; for guidance, see [Search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/token-fields#Best-practices) + +**Add value with a context menu.** People often benefit from a [context menu](https://developer.apple.com/design/human-interface-guidelines/context-menus) with additional options or information about a token. + +**Consider providing additional ways to convert text into tokens.** By default, text people enter turns into a token whenever they type a comma. You can specify additional shortcuts, such as pressing Return, that also invoke this action. + +**Consider customizing the delay the system uses before showing suggested tokens.** By default, suggestions appear immediately. However, suggestions that appear too quickly may distract people while they’re typing. If your app suggests tokens, consider adjusting the delay to a comfortable level. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/token-fields#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, and watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/token-fields#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/token-fields#Related) + +[Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) + +[Search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields) + +[Context menus](https://developer.apple.com/design/human-interface-guidelines/context-menus) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/token-fields#Developer-documentation) + +[`NSTokenField`](https://developer.apple.com/documentation/AppKit/NSTokenField) — AppKit + diff --git a/skills/hig-components-controls/references/virtual-keyboards.md b/skills/hig-components-controls/references/virtual-keyboards.md new file mode 100644 index 00000000..330196d6 --- /dev/null +++ b/skills/hig-components-controls/references/virtual-keyboards.md @@ -0,0 +1,156 @@ +--- +title: "Virtual keyboards | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards + +# Virtual keyboards + +On devices without physical keyboards, the system offers various types of virtual keyboards people can use to enter data. + +![A stylized representation of a numeric keypad shown on top of a grid that suggests the canvas of a design tool. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d5cea0a3ccb2af2881ade732675a1064/components-virtual-keyboard-intro%402x.png) + +A virtual keyboard can provide a specific set of keys that are optimized for the current task; for example, a keyboard that supports entering email addresses can include the “@” character and a period or even “.com”. A virtual keyboard doesn’t support keyboard shortcuts. + +When it makes sense in your app, you can replace the system-provided keyboard with a custom view that supports app-specific data entry. In iOS, iPadOS, and tvOS, you can also create an app extension that offers a custom keyboard people can install and use in place of the standard keyboard. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Best-practices) + +**Choose a keyboard that matches the type of content people are editing.** For example, you can help people enter numeric data by providing the numbers and punctuation keyboard. When you specify a semantic meaning for a text input area, the system can automatically provide a keyboard that matches the type of input you expect, potentially using this information to refine the keyboard corrections it offers. For developer guidance, see [`keyboardType(_:)`](https://developer.apple.com/documentation/SwiftUI/View/keyboardType\(_:\)) (SwiftUI), [`textContentType(_:)`](https://developer.apple.com/documentation/SwiftUI/View/textContentType\(_:\))(SwiftUI), [`UIKeyboardType`](https://developer.apple.com/documentation/UIKit/UIKeyboardType) (UIKit), and [`UITextContentType`](https://developer.apple.com/documentation/UIKit/UITextContentType) (UIKit). + + * ASCII capable + * ASCII capable number pad + * Decimal pad + * Default + * Email address + * Name phone pad + * Number pad + * Numbers and punctuation + * Phone pad + * Twitter + * URL + * Web search + + + +![A partial screenshot of a keyboard on iPhone that displays all 26 letter keys in addition to the Shift, Delete, Numbers, Space, and Return keys. Typing suggestions appear above the keyboard and the Dictation button appears below it.](https://docs-assets.developer.apple.com/published/1aeba403a2942689ee8efbfed71a7943/virtual-keyboard-ascii-capable%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 10 number keys in addition to the Delete key. Keys for the numbers 2 through 9 each include the 3 or 4 letters associated with the number on a phone.](https://docs-assets.developer.apple.com/published/1da579d09964a9bd81a0823d52fa18e5/virtual-keyboard-ascii-capable-number-pad%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 10 number keys in addition to the Delete and period keys. Keys for the numbers 2 through 9 each include the 3 or 4 letters associated with the number on a phone.](https://docs-assets.developer.apple.com/published/4b43048f8d2f13d8322b95266bc4c4f3/virtual-keyboard-decimal-pad%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 26 letter keys in addition to the Shift, Delete, Numbers, Space, and Return keys. Typing suggestions appear above the keyboard and the Emoji and Dictation buttons appear below it.](https://docs-assets.developer.apple.com/published/34447cdc5d5eb61f1734a046f3d108c6/virtual-keyboard-default%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 26 letter keys in addition to the Shift, Delete, Numbers, Space, period, at symbol, and Return keys. Typing suggestions appear above the keyboard and the Emoji button appears below it.](https://docs-assets.developer.apple.com/published/e7dcd10c36065774ac8cadf76b09d8e4/virtual-keyboard-email-address%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 26 letter keys in addition to the Shift, Delete, Numbers, Space, and Return keys. Typing suggestions appear above the keyboard and the Emoji and Dictation buttons appear below it.](https://docs-assets.developer.apple.com/published/3228cd2d2cd6d36e3db1aff1d50ad903/virtual-keyboard-name-phone-pad%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 10 number keys in addition to the Delete key. Keys for the numbers 2 through 9 each include the 3 or 4 letters associated with the number on a phone.](https://docs-assets.developer.apple.com/published/679c33bdff61bc9e257982b7cffba264/virtual-keyboard-number-pad%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays 10 number and 15 punctuation keys in addition to the secondary punctuation key and the Delete, Letters, Space, and Return keys. Typing suggestions appear above the keyboard and the Dictation button appears below it.](https://docs-assets.developer.apple.com/published/916933140730b2db67f8004991c558aa/virtual-keyboard-numbers-and-punctuation%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 10 number keys in addition to the Delete key and a key for plus, star, and hash. Keys for the numbers 2 through 9 each include the 3 or 4 letters associated with the number on a phone.](https://docs-assets.developer.apple.com/published/b1b427eb7252b94e7b9d0095ccd04f56/virtual-keyboard-phone-pad%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 26 letter keys in addition to the Shift, Delete, Numbers, Space, at symbol, and hash keys. Typing suggestions appear above the keyboard and the Emoji and Dictation buttons appear below it.](https://docs-assets.developer.apple.com/published/21b1b12df6335045a6f29efc8cbdb5a1/virtual-keyboard-twitter%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 26 letter keys in addition to the Shift, Delete, Numbers, period, slash, dot com, and Return keys. Typing suggestions appear above the keyboard and the Emoji button appears below it.](https://docs-assets.developer.apple.com/published/daec1d80ab39aff3f52effb615f84425/virtual-keyboard-url%402x.png) + +![A partial screenshot of a keyboard on iPhone that displays all 26 letter keys in addition to the Shift, Delete, Numbers, Space, period, and Go keys. Typing suggestions appear above the keyboard and the Emoji and Dictation buttons appear below it.](https://docs-assets.developer.apple.com/published/0618532f75b91e3f3be2416a363d4a43/virtual-keyboard-web-search%402x.png) + +**Consider customizing the Return key type if it helps clarify the text-entry experience.** The Return key type is based on the keyboard type you choose, but you can change this if it makes sense in your app. For example, if your app initiates a search, you can use a search Return key type rather than the standard one so the experience is consistent with other places people initiate search. For developer guidance, see [`submitLabel(_:)`](https://developer.apple.com/documentation/SwiftUI/View/submitLabel\(_:\)) (SwiftUI) and [`UIReturnKeyType`](https://developer.apple.com/documentation/UIKit/UIReturnKeyType) (UIKit). + +## [Custom input views](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Custom-input-views) + +In some cases, you can create an _input view_ if you want to provide custom functionality that enhances data-entry tasks in your app. For example, Numbers provides a custom input view for entering numeric values while editing a spreadsheet. A custom input view replaces the system-provided keyboard while people are in your app. For developer guidance, see [`ToolbarItemPlacement`](https://developer.apple.com/documentation/SwiftUI/ToolbarItemPlacement) (SwiftUI) and [`inputViewController`](https://developer.apple.com/documentation/UIKit/UIResponder/inputViewController) (UIKit). + +**Make sure your custom input view makes sense in the context of your app.** In addition to making data entry simple and intuitive, you want people to understand the benefits of using your custom input view. Otherwise, they may wonder why they can’t regain the system keyboard while in your app. + +**Play the standard keyboard sound while people type.** The keyboard sound provides familiar feedback when people tap a key on the system keyboard, so they’re likely to expect the same sound when they tap keys in your custom input view. People can turn keyboard sounds off for all keyboard interactions in Settings > Sounds. For developer guidance, see [`playInputClick()`](https://developer.apple.com/documentation/UIKit/UIDevice/playInputClick\(\)) (UIKit). + +## [Custom keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Custom-keyboards) + +In iOS, iPadOS, and tvOS, you can provide a custom keyboard that replaces the system keyboard by creating an app extension. An _app extension_ is code you provide that people can install and use to extend the functionality of a specific area of the system; to learn more, see [App extensions](https://developer.apple.com/app-extensions/). + +After people choose your custom keyboard in Settings, they can use it for text entry within any app, except when editing secure text fields and phone number fields. People can choose multiple custom keyboards and switch between them at any time. For developer guidance, see [Creating a custom keyboard](https://developer.apple.com/documentation/UIKit/creating-a-custom-keyboard). + +Custom keyboards make sense when you want to expose unique keyboard functionality systemwide, such as a novel way of inputting text or the ability to type in a language the system doesn’t support. If you want to provide a custom keyboard for people to use only while they’re in your app, consider creating a custom input view instead. + +**Provide an obvious and easy way to switch between keyboards.** People know that the Globe key on the standard keyboard — which replaces the dedicated Emoji key when multiple keyboards are available — quickly switches to other keyboards, and they expect a similarly intuitive experience in your keyboard. + +**Avoid duplicating system-provided keyboard features.** On some devices, the Emoji/Globe key and Dictation key automatically appear beneath the keyboard, even when people are using custom keyboards. Your app can’t affect these keys, and it’s likely to be confusing if you repeat them in your keyboard. + +**Consider providing a keyboard tutorial in your app.** People are used to the standard keyboard, and learning how to use a new keyboard can take time. You can help make the process easier by providing usage instructions in your app — for example, you might tell people how to choose your keyboard, activate it during text entry, use it, and switch back to the standard keyboard. Avoid displaying help content within the keyboard itself. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Platform-considerations) + + _Not supported in macOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#iOS-iPadOS) + +**Use the keyboard layout guide to make the keyboard feel like an integrated part of your interface.** Using the layout guide also helps you keep important parts of your interface visible while the virtual keyboard is onscreen. For developer guidance, see [Adjusting your layout with keyboard layout guide](https://developer.apple.com/documentation/UIKit/adjusting-your-layout-with-keyboard-layout-guide). + +![An illustration of an app layout on iPhone, showing two stacked text fields and a button above the keyboard.](https://docs-assets.developer.apple.com/published/2d310619deb1ce3587596b7fee6e5b08/ui-fully-visible%402x.png) + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)The keyboard layout guide helps ensure that app UI and the keyboard work well together. + +![An illustration of an app layout on iPhone, showing two stacked text fields. The keyboard covers part of the bottom text field.](https://docs-assets.developer.apple.com/published/b2612a1b69632d398d2744caee9ff1e2/text-field-hidden%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Without the layout guide, the keyboard could make entering text more difficult. + +![An illustration of an app layout on iPhone, showing two stacked text fields and a button above the keyboard. The keyboard covers part of the button.](https://docs-assets.developer.apple.com/published/3a2b1c460427926e69f4d3e8d1383aef/button-hidden%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Without the layout guide, the keyboard could make tapping a button more difficult. + +**Place custom controls above the keyboard thoughtfully.** Some apps position an input accessory view containing custom controls above the keyboard to offer app-specific functionality related to the data people are working with. For example, Numbers displays controls that help people apply standard or custom calculations to spreadsheet data. If your app offers custom controls that augment the keyboard, make sure they’re relevant to the current task. If other views in your app use Liquid Glass, or if your view looks out of place above the keyboard, apply Liquid Glass to the view that contains your controls to maintain consistency. If you use a standard toolbar to contain your controls, it automatically adopts Liquid Glass. Use the keyboard layout guide and standard padding to ensure the system positions your controls as expected within the view. For developer guidance, see [`ToolbarItemPlacement`](https://developer.apple.com/documentation/SwiftUI/ToolbarItemPlacement) (SwiftUI), [`inputAccessoryView`](https://developer.apple.com/documentation/UIKit/UIResponder/inputAccessoryView) (UIKit), and [`UIKeyboardLayoutGuide`](https://developer.apple.com/documentation/UIKit/UIKeyboardLayoutGuide) (UIKit). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#tvOS) + +tvOS displays a linear virtual keyboard when people select a text field using the Siri Remote. + +Note + +A grid keyboard screen appears when people use devices other than the Siri Remote, and the layout of content automatically adapts to the keyboard. + +When people activate a digit entry view, tvOS displays a digit-specific keyboard. For guidance, see [Digit entry views](https://developer.apple.com/design/human-interface-guidelines/digit-entry-views). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#visionOS) + +In visionOS, the system-provided virtual keyboard supports both direct and indirect gestures and appears in a separate window that people can move where they want. You don’t need to account for the location of the keyboard in your layouts. + +Video with custom controls. + +Content description: A recording showing a person typing on a virtual keyboard in visionOS. + +Play + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#watchOS) + +On Apple Watch, a text field can show a keyboard if the device screen is large enough. Otherwise, the system lets people use dictation or Scribble to enter information. You can’t change the keyboard type in watchOS, but you can set the content type of the text field. The system uses this information to make text entry easier, such as by offering suggestions. For developer guidance, see [`textContentType(_:)`](https://developer.apple.com/documentation/SwiftUI/View/textContentType\(_:\)) (SwiftUI). + +People can also use a nearby paired iPhone to enter text on Apple Watch. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Related) + +[Entering data](https://developer.apple.com/design/human-interface-guidelines/entering-data) + +[Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Developer-documentation) + +[`keyboardType(_:)`](https://developer.apple.com/documentation/SwiftUI/View/keyboardType\(_:\)) — SwiftUI + +[`textContentType(_:)`](https://developer.apple.com/documentation/SwiftUI/View/textContentType\(_:\)) — SwiftUI + +[`UIKeyboardType`](https://developer.apple.com/documentation/UIKit/UIKeyboardType) — UIKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added guidance for displaying custom controls above the keyboard, and updated to reflect virtual keyboard availability in watchOS. +February 2, 2024| Clarified the virtual keyboard’s support for direct and indirect gestures in visionOS. +December 5, 2023| Added artwork for visionOS. +June 21, 2023| Changed page title from Onscreen keyboards and updated to include guidance for visionOS. + diff --git a/skills/hig-components-dialogs/SKILL.md b/skills/hig-components-dialogs/SKILL.md new file mode 100644 index 00000000..464021a6 --- /dev/null +++ b/skills/hig-components-dialogs/SKILL.md @@ -0,0 +1,76 @@ +--- +name: hig-components-dialogs +version: 1.0.0 +description: >- + Apple HIG guidance for presentation components including alerts, action sheets, + popovers, sheets, and digit entry views. Use this skill when the user says + "should I use an alert or a sheet," "how do I show a confirmation dialog," + "when should I use a popover," "my modals are annoying users," or asks about + alert design, action sheet, popover, sheet, modal, dialog, digit entry, + confirmation dialog, warning dialog, modal presentation, non-modal content, + destructive action confirmation, or overlay UI patterns. Cross-references: + hig-components-menus, hig-components-controls, hig-components-search, + hig-patterns. +--- + +# Apple HIG: Presentation Components + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Alerts: sparingly, for critical situations.** Errors needing attention, destructive action confirmations, or information requiring acknowledgment. They interrupt flow and demand a response. + +2. **Sheets: focused tasks that maintain context.** Slides in from the edge (or attaches to a window on macOS). Use for creating items, editing settings, multi-step forms. + +3. **Popovers: non-modal on iPad and Mac.** Appear next to the trigger element, dismissed by tapping outside. For additional information, options, or controls without taking over the screen. + +4. **Action sheets: choosing among actions.** Present when picking from multiple actions, especially if one is destructive. iPhone: slide up from bottom. iPad: appear as popovers. + +5. **Minimize interruptions.** Before reaching for a modal, consider inline presentation or making the action undoable instead. + +6. **Concise, actionable alert text.** Short descriptive title. Brief message body if needed. Button labels should be specific verbs ("Delete", "Save"), not "OK". + +7. **Mark destructive actions clearly.** Destructive button style (red text). Place destructive buttons where users are less likely to tap reflexively. + +8. **Provide a cancel option** for alerts and action sheets with multiple actions. On action sheets, cancel appears at the bottom, separated. + +9. **Digit entry: focused and accessible.** Appropriately sized input fields, automatic advancement between digits, support for paste and autofill. + +10. **Adapt presentation to platform.** The same interaction may use different components on iPhone, iPad, Mac, and visionOS. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [alerts.md](references/alerts.md) | Alerts | Button ordering, title/message text, confirmation, destructive actions | +| [action-sheets.md](references/action-sheets.md) | Action sheets | Multiple actions, cancel option, destructive handling | +| [popovers.md](references/popovers.md) | Popovers | Non-modal, dismiss on tap outside, iPad/Mac | +| [sheets.md](references/sheets.md) | Sheets | Modal task, context preservation | +| [digit-entry-views.md](references/digit-entry-views.md) | Digit entry | PIN input, autofill, auto-advance | + +## Output Format + +1. **Recommended presentation type with rationale** and why alternatives are less suitable. +2. **Content guidelines** -- title, message, button labels per Apple's tone and brevity rules. +3. **Dismiss behavior** -- how the user dismisses and what happens (save, discard, cancel). +4. **Alternatives** -- when the scenario might not need a modal at all (inline feedback, undo, progressive disclosure). + +## Questions to Ask + +1. What information or action does the presentation need? +2. Blocking or non-blocking? +3. Which platforms? +4. How often does this appear? + +## Related Skills + +- **hig-components-menus** -- Buttons and toolbar items triggering presentations +- **hig-components-controls** -- Input controls within sheets and popovers +- **hig-components-search** -- Search and navigation within presented views +- **hig-patterns** -- Modality, interruptions, user flow management +- **hig-foundations** -- Color, typography, layout for presentation components + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-dialogs/references/action-sheets.md b/skills/hig-components-dialogs/references/action-sheets.md new file mode 100644 index 00000000..96a55592 --- /dev/null +++ b/skills/hig-components-dialogs/references/action-sheets.md @@ -0,0 +1,74 @@ +--- +title: "Action sheets | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/action-sheets + +# Action sheets + +An action sheet is a modal view that presents choices related to an action people initiate. + +![A stylized representation of a set of action sheet buttons at the bottom of an iPhone. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/6102d0ab9e98aa9149e6a929f0576d75/components-action-sheet-intro%402x.png) + +Developer note + +When you use SwiftUI, you can offer action sheet functionality in all platforms by specifying a [presentation modifier](https://developer.apple.com/documentation/swiftui/view-presentation) for a confirmation dialog. If you use UIKit, you use the [`UIAlertController.Style.actionSheet`](https://developer.apple.com/documentation/UIKit/UIAlertController/Style/actionSheet) to display an action sheet in iOS, iPadOS, and tvOS. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/action-sheets#Best-practices) + +**Use an action sheet — not an alert — to offer choices related to an intentional action.** For example, when people cancel the message they’re editing in Mail on iPhone, an action sheet provides two choices: delete the draft, or save the draft. Although an alert can also help people confirm or cancel an action that has destructive consequences, it doesn’t provide additional choices related to the action. More importantly, an alert is usually unexpected, generally telling people about a problem or a change in the current situation that might require them to act. For guidance, see [Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts). + +![A partial screenshot of a new message being composed in Mail on iPhone.](https://docs-assets.developer.apple.com/published/d78e3a39898532655eb9155586cdc1e7/action-sheet-iphone-mail%402x.png) + +![A partial screenshot of a new message being composed in Mail on iPhone, with the action sheet open after choosing to cancel the message. The action sheet presents choices to delete the draft or save the draft.](https://docs-assets.developer.apple.com/published/fedd171df9ff41645c885d3a428bc190/action-sheet-iphone-mail-delete-action%402x.png) + +**Use action sheets sparingly.** Action sheets give people important information and choices, but they interrupt the current task to do so. To encourage people to pay attention to action sheets, avoid using them more than necessary. + +**Aim to keep titles short enough to display on a single line.** A long title is difficult to read quickly and might get truncated or require people to scroll. + +**Provide a message only if necessary.** In general, the title — combined with the context of the current action — provides enough information to help people understand their choices. + +**If necessary, provide a Cancel button that lets people reject an action that might destroy data.** Place the Cancel button at the bottom of the action sheet (or in the upper-left corner of the sheet in watchOS). A SwiftUI confirmation dialog includes a Cancel button by default. + +**Make destructive choices visually prominent.** Use the destructive style for buttons that perform destructive actions, and place these buttons at the top of the action sheet where they tend to be most noticeable. For developer guidance, see [`destructive`](https://developer.apple.com/documentation/SwiftUI/ButtonRole/destructive) (SwiftUI) or [`UIAlertAction.Style.destructive`](https://developer.apple.com/documentation/UIKit/UIAlertAction/Style-swift.enum/destructive) (UIKit). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/action-sheets#Platform-considerations) + + _No additional considerations for macOS or tvOS. Not supported in visionOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/action-sheets#iOS-iPadOS) + +**Use an action sheet — not a menu — to provide choices related to an action.** People are accustomed to having an action sheet appear when they perform an action that might require clarifying choices. In contrast, people expect a menu to appear when they choose to reveal it. + +**Avoid letting an action sheet scroll.** The more buttons an action sheet has, the more time and effort it takes for people to make a choice. Also, scrolling an action sheet can be hard to do without inadvertently tapping a button. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/action-sheets#watchOS) + +The system-defined style for action sheets includes a title, an optional message, a Cancel button, and one or more additional buttons. The appearance of this interface is different depending on the device. + +![An illustration of an action sheet on Apple Watch, showing content that represents text in the top half of the watch screen and two stacked buttons in the bottom half.](https://docs-assets.developer.apple.com/published/4ec6a46689c0ec4550d6fe48d4aa27a8/action-sheet-watch-system-defined%402x.png) + +Each button has an associated style that conveys information about the button’s effect. There are three system-defined button styles: + +Style| Meaning +---|--- +Default| The button has no special meaning. +Destructive| The button destroys user data or performs a destructive action in the app. +Cancel| The button dismisses the view without taking any action. + +**Avoid displaying more than four buttons in an action sheet, including the Cancel button.** When there are fewer buttons onscreen, it’s easier for people to view all their options at once. Because the Cancel button is required, aim to provide no more than three additional choices. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/action-sheets#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/action-sheets#Related) + +[Modality](https://developer.apple.com/design/human-interface-guidelines/modality) + +[Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets) + +[Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/action-sheets#Developer-documentation) + +[`confirmationDialog(_:isPresented:titleVisibility:actions:)`](https://developer.apple.com/documentation/SwiftUI/View/confirmationDialog\(_:isPresented:titleVisibility:actions:\)-46zbb) — SwiftUI + +[`UIAlertController.Style.actionSheet`](https://developer.apple.com/documentation/UIKit/UIAlertController/Style/actionSheet) — UIKit + diff --git a/skills/hig-components-dialogs/references/alerts.md b/skills/hig-components-dialogs/references/alerts.md new file mode 100644 index 00000000..d91ebb5d --- /dev/null +++ b/skills/hig-components-dialogs/references/alerts.md @@ -0,0 +1,158 @@ +--- +title: "Alerts | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/alerts + +# Alerts + +An alert gives people critical information they need right away. + +![A stylized representation of an alert mockup that includes a title, description, primary button, and secondary button. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/89439ba152693e294fbb3298c00b2b48/components-alert-intro%402x.png) + +For example, an alert can tell people about a problem, warn them when their action might destroy data, and give them an opportunity to confirm a purchase or another important action they initiated. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/alerts#Best-practices) + +**Use alerts sparingly.** Alerts give people important information, but they interrupt the current task to do so. Encourage people to pay attention to your alerts by making certain that each one offers only essential information and useful actions. + +**Avoid using an alert merely to provide information.** People don’t appreciate an interruption from an alert that’s informative, but not actionable. If you need to provide only information, prefer finding an alternative way to communicate it within the relevant context. For example, when a server connection is unavailable, Mail displays an indicator that people can choose to learn more. + +**Avoid displaying alerts for common, undoable actions, even when they’re destructive.** For example, you don’t need to alert people about data loss every time they delete an email or file because they do so with the intention of discarding data, and they can undo the action. In comparison, when people take an uncommon destructive action that they can’t undo, it’s important to display an alert in case they initiated the action accidentally. + +**Avoid showing an alert when your app starts.** If you need to inform people about new or important information the moment they open your app, design a way to make the information easily discoverable. If your app detects a problem at startup, like no network connection, consider alternative ways to let people know. For example, you could show cached or placeholder data and a nonintrusive label that describes the problem. + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/alerts#Anatomy) + +An alert is a modal view that can look different in different platforms and devices. + + * iOS + * macOS + * tvOS + * visionOS + * watchOS + + + +![An illustration of an alert in the middle of the screen on iPhone.](https://docs-assets.developer.apple.com/published/ec9df875e228750105a393c96279bea5/alert-ios%402x.png) + +![An illustration of an alert in the middle of the screen on a Mac.](https://docs-assets.developer.apple.com/published/0dfc6fd9de495ce3b7201169d829d760/alert-macos%402x.png) + +![An illustration of an alert on tvOS.](https://docs-assets.developer.apple.com/published/63dde83c2b156231420f095a4d9dfae3/alert-tvos%402x.jpg) + +![An illustration of an alert on Apple Vision Pro.](https://docs-assets.developer.apple.com/published/1abb6467cc401af501648da039b2b317/alert-visionos%402x.png) + +![An illustration of an alert on Apple Watch.](https://docs-assets.developer.apple.com/published/a452534204f5ddb4aaa6ba7679946f2e/alert-watchos%402x.png) + +## [Content](https://developer.apple.com/design/human-interface-guidelines/alerts#Content) + +In all platforms, alerts display a title, optional informative text, and up to three buttons. On some platforms, alerts can include additional elements. + + * In iOS, iPadOS, macOS, and visionOS, an alert can include a text field. + + * Alerts in macOS and visionOS can include an icon and an accessory view. + + * macOS alerts can add a suppression [checkbox](https://developer.apple.com/design/human-interface-guidelines/toggles#Checkboxes) and a [Help button](https://developer.apple.com/design/human-interface-guidelines/buttons#Help-buttons). + + + + +**In all alert copy, be direct, and use a neutral, approachable tone.** Alerts often describe problems and serious situations, so avoid being oblique or accusatory, or masking the severity of the issue. + +**Write a title that clearly and succinctly describes the situation.** You need to help people quickly understand the situation, so be complete and specific, without being verbose. As much as possible, describe what happened, the context in which it happened, and why. Avoid writing a title that doesn’t convey useful information — like “Error” or “Error 329347 occurred” — but also avoid overly long titles that wrap to more than two lines. If the title is a complete sentence, use [sentence-style capitalization](https://help.apple.com/applestyleguide/#/apsgb744e4a3?sub=apdca93e113f1d64) and appropriate ending punctuation. If the title is a sentence fragment, use title-style capitalization, and don’t add ending punctuation. + +**Include informative text only if it adds value.** If you need to add an informative message, keep it as short as possible, using complete sentences, sentence-style capitalization, and appropriate punctuation. + +**Avoid explaining alert buttons.** If your alert text and button titles are clear, you don’t need to explain what the buttons do. In rare cases where you need to provide guidance on choosing a button, use a term like _choose_ to account for people’s current device and interaction method, and refer to a button using its exact title without quotes. For guidance, see [Buttons](https://developer.apple.com/design/human-interface-guidelines/alerts#Buttons). + +**If supported, include a text field only if you need people’s input to resolve the situation.** For example, you might need to present a secure text field to receive a password. + +## [Buttons](https://developer.apple.com/design/human-interface-guidelines/alerts#Buttons) + +**Create succinct, logical button titles.** Aim for a one- or two-word title that describes the result of selecting the button. Prefer verbs and verb phrases that relate directly to the alert text — for example, “View All,” “Reply,” or “Ignore.” In informational alerts only, you can use “OK” for acceptance, avoiding “Yes” and “No.” Always use “Cancel” to title a button that cancels the alert’s action. As with all button titles, use [title-style capitalization](https://help.apple.com/applestyleguide/#/apsgb744e4a3?sub=apdca93e113f1d64) and no ending punctuation. + +**Avoid using OK as the default button title unless the alert is purely informational.** The meaning of “OK” can be unclear even in alerts that ask people to confirm that they want to do something. For example, does “OK” mean “OK, I want to complete the action” or “OK, I now understand the negative results my action would have caused”? A specific button title like “Erase,” “Convert,” “Clear,” or “Delete” helps people understand the action they’re taking. + +**Place buttons where people expect.** In general, place the button people are most likely to choose on the trailing side in a row of buttons or at the top in a stack of buttons. Always place the default button on the trailing side of a row or at the top of a stack. Cancel buttons are typically on the leading side of a row or at the bottom of a stack. + +**Use the destructive style to identify a button that performs a destructive action people didn’t deliberately choose.** For example, when people deliberately choose a destructive action — such as Empty Trash — the resulting alert doesn’t apply the destructive style to the Empty Trash button because the button performs the person’s original intent. In this scenario, the convenience of pressing Return to confirm the deliberately chosen Empty Trash action outweighs the benefit of reaffirming that the button is destructive. In contrast, people appreciate an alert that draws their attention to a button that can perform a destructive action they didn’t originally intend. + +**If there’s a destructive action, include a Cancel button to give people a clear, safe way to avoid the action.** Always use the title “Cancel” for a button that cancels an alert’s action. Note that you don’t want to make a Cancel button the default button. If you want to encourage people to read an alert and not just automatically press Return to dismiss it, avoid making any button the default button. Similarly, if you must display an alert with a single button that’s also the default, use a Done button, not a Cancel button. + +**Provide alternative ways to cancel an alert when it makes sense.** In addition to choosing a Cancel button, people appreciate using keyboard shortcuts or other quick ways to cancel an onscreen alert. For example: + +Action| Platform +---|--- +Exit to the Home Screen| iOS, iPadOS +Pressing Escape (Esc) or Command-Period (.) on an attached keyboard| iOS, iPadOS, macOS, visionOS +Pressing Menu on the remote| tvOS + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/alerts#Platform-considerations) + + _No additional considerations for tvOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/alerts#iOS-iPadOS) + +**Use an action sheet — not an alert — to offer choices related to an intentional action.** For example, when people cancel the Mail message they’re editing, an action sheet provides three choices: delete the edits (or the entire draft), save the draft, or return to editing. Although an alert can also help people confirm or cancel an action that has destructive consequences, it doesn’t provide additional choices related to the action. For guidance, see [Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets). + +**When possible, avoid displaying an alert that scrolls.** Although an alert might scroll if the text size is large enough, be sure to minimize the potential for scrolling by keeping alert titles short and including a brief message only when necessary. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/alerts#macOS) + +macOS automatically displays your app icon in an alert, but you can supply an alternative icon or symbol. In addition, macOS lets you: + + * Configure repeating alerts to let people suppress subsequent occurrences of the same alert. + + * Append a custom view if it’s necessary to provide additional information (for developer guidance, see [`accessoryView`](https://developer.apple.com/documentation/AppKit/NSAlert/accessoryView)). + + * Include a Help button that opens your help documentation (see [Help buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#Help-buttons)). + + + + +**Use a caution symbol sparingly.** Using a caution symbol like `exclamationmark.triangle` too frequently in your alerts diminishes its significance. Use the symbol only when extra attention is really needed, as when confirming an action that might result in unexpected loss of data. Don’t use the symbol for tasks whose only purpose is to overwrite or remove data, such as a save or empty trash. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/alerts#visionOS) + +When your app is running in the Shared Space, visionOS displays an alert in front of the app’s window, slightly forward along the z-axis. + +Video with custom controls. + +Content description: A video of an alert in the Freeform app running in the Shared Space in visionOS. When the video plays, someone chooses to permanently delete a recently deleted Freeform board. An alert then appears in front of the Freeform window to ask for confirmation. + +Play + +If someone moves a window without dismissing its alert, the alert remains anchored to the window. If your app is running in a Full Space, the system displays the alert centered in the wearer’s [field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view). + +Video with custom controls. + +Content description: A video of an alert in the Freeform app running in the Shared Space in visionOS. When the video plays, someone chooses to permanently delete a recently deleted Freeform board. An alert then appears in front of the Freeform window to ask for confirmation. The alert is not dismissed and remains anchored to the Freeform window as it’s moved around the Shared Space. + +Play + +If you need to display an accessory view in a visionOS alert, create a view that has a maximum height of 154 pt and a 16-pt corner radius. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/alerts#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/alerts#Related) + +[Modality](https://developer.apple.com/design/human-interface-guidelines/modality) + +[Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets) + +[Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/alerts#Developer-documentation) + +[`alert(_:isPresented:actions:)`](https://developer.apple.com/documentation/SwiftUI/View/alert\(_:isPresented:actions:\)-1bkka) — SwiftUI + +[`UIAlertController`](https://developer.apple.com/documentation/UIKit/UIAlertController) — UIKit + +[`NSAlert`](https://developer.apple.com/documentation/AppKit/NSAlert) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/alerts#Change-log) + +Date| Changes +---|--- +February 2, 2024| Enhanced guidance for using default and Cancel buttons. +September 12, 2023| Added anatomy artwork for visionOS. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-components-dialogs/references/digit-entry-views.md b/skills/hig-components-dialogs/references/digit-entry-views.md new file mode 100644 index 00000000..70f577d9 --- /dev/null +++ b/skills/hig-components-dialogs/references/digit-entry-views.md @@ -0,0 +1,32 @@ +--- +title: "Digit entry views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/digit-entry-views + +# Digit entry views + +A digit entry view fills the entire screen and prompts people to enter a series of digits, like a PIN, using a digit-specific keyboard. + +![A stylized representation of an Apple TV five-digit passcode entry screen. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ca37bff0e0176a587241e4a6ced6090d/components-digit-entry-view-intro%402x.png) + +You can add an optional title and prompt above the line of digits. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/digit-entry-views#Best-practices) + +**Use secure digit fields.** Secure digit fields display asterisks instead of the entered digit onscreen. Always use a secure digit field when your app asks for sensitive data. + +**Clearly state the purpose of the digit entry view.** Use a title and prompt that explains why someone needs to enter digits. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/digit-entry-views#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/digit-entry-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/digit-entry-views#Related) + +[Virtual keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/digit-entry-views#Developer-documentation) + +[`TVDigitEntryViewController`](https://developer.apple.com/documentation/TVUIKit/TVDigitEntryViewController) — TVUIKit + diff --git a/skills/hig-components-dialogs/references/popovers.md b/skills/hig-components-dialogs/references/popovers.md new file mode 100644 index 00000000..b2d91e94 --- /dev/null +++ b/skills/hig-components-dialogs/references/popovers.md @@ -0,0 +1,81 @@ +--- +title: "Popovers | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/popovers + +# Popovers + +A popover is a transient view that appears above other content when people click or tap a control or interactive area. + +![A stylized representation of a popover view. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/90068cb259f3c3d15e6adf38766dd706/components-popover-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/popovers#Best-practices) + +**Use a popover to expose a small amount of information or functionality.** Because a popover disappears after people interact with it, limit the amount of functionality in the popover to a few related tasks. For example, a calendar event popover makes it easy for people to change the date or time of an event, or to move it to another calendar. The popover disappears after the change, letting people continue reviewing the events on their calendar. + +**Consider using popovers when you want more room for content.** Views like sidebars and panels take up a lot of space. If you need content only temporarily, displaying it in a popover can help streamline your interface. + +**Position popovers appropriately.** Make sure a popover’s arrow points as directly as possible to the element that revealed it. Ideally, a popover doesn’t cover the element that revealed it or any essential content people may need to see while using it. + +**Use a Close button for confirmation and guidance only.** A Close button, including Cancel or Done, is worth including if it provides clarity, like exiting with or without saving changes. Otherwise, a popover generally closes when people click or tap outside its bounds or select an item in the popover. If multiple selections are possible, make sure the popover remains open until people explicitly dismiss it or they click or tap outside its bounds. + +**Always save work when automatically closing a nonmodal popover.** People can unintentionally dismiss a nonmodal popover by clicking or tapping outside its bounds. Discard people’s work only when they click or tap an explicit Cancel button. + +**Show one popover at a time.** Displaying multiple popovers clutters the interface and causes confusion. Never show a cascade or hierarchy of popovers, in which one emerges from another. If you need to show a new popover, close the open one first. + +**Don’t show another view over a popover.** Make sure nothing displays on top of a popover, except for an alert. + +**When possible, let people close one popover and open another with a single click or tap.** Avoiding extra gestures is especially desirable when several different bar buttons each open a popover. + +**Avoid making a popover too big.** Make a popover only big enough to display its contents and point to the place it came from. If necessary, the system can adjust the size of a popover to ensure it fits well in the interface. + +**Provide a smooth transition when changing the size of a popover.** Some popovers provide both condensed and expanded views of the same information. If you adjust the size of a popover, animate the change to avoid giving the impression that a new popover replaced the old one. + +**Avoid using the word _popover_ in help documentation.** Instead, refer to a specific task or selection. For example, instead of “Select the Show button at the bottom of the popover,” you might write “Select the Show button.” + +**Avoid using a popover to show a warning.** People can miss a popover or accidentally close it. If you need to warn people, use an [alert](https://developer.apple.com/design/human-interface-guidelines/alerts) instead. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/popovers#Platform-considerations) + + _No additional considerations for visionOS. Not supported in tvOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/popovers#iOS-iPadOS) + +**Avoid displaying popovers in compact views.** Make your app or game dynamically adjust its layout based on the size class of the content area. Reserve popovers for wide views; for compact views, use all available screen space by presenting information in a full-screen modal view like a sheet instead. For related guidance, see [Modality](https://developer.apple.com/design/human-interface-guidelines/modality). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/popovers#macOS) + +You can make a popover detachable in macOS, which becomes a separate panel when people drag it. The panel remains visible onscreen while people interact with other content. + + * Attached popover + * Detached popover + + + +![An illustration of an event in Calendar with the attached version of the event's popover next to and pointing to it.](https://docs-assets.developer.apple.com/published/ef05d3cb071e4c11209cce39b596ca99/attached-popover%402x.png) + +![An illustration of an event in Calendar with the detached version of the event's popover next to it.](https://docs-assets.developer.apple.com/published/d0b16d14a582a887f385896669394ee4/detached-popover%402x.png) + +**Consider letting people detach a popover.** People might appreciate being able to convert a popover into a panel if they want to view other information while the popover remains visible. + +**Make minimal appearance changes to a detached popover.** A panel that looks similar to the original popover helps people maintain context. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/popovers#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/popovers#Related) + +[Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets) + +[Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets) + +[Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts) + +[Modality](https://developer.apple.com/design/human-interface-guidelines/modality) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/popovers#Developer-documentation) + +[`popover(isPresented:attachmentAnchor:arrowEdge:content:)`](https://developer.apple.com/documentation/SwiftUI/View/popover\(isPresented:attachmentAnchor:arrowEdge:content:\)) — SwiftUI + +[`UIPopoverPresentationController`](https://developer.apple.com/documentation/UIKit/UIPopoverPresentationController) — UIKit + +[`NSPopover`](https://developer.apple.com/documentation/AppKit/NSPopover) — AppKit + diff --git a/skills/hig-components-dialogs/references/sheets.md b/skills/hig-components-dialogs/references/sheets.md new file mode 100644 index 00000000..5a3c8a17 --- /dev/null +++ b/skills/hig-components-dialogs/references/sheets.md @@ -0,0 +1,157 @@ +--- +title: "Sheets | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/sheets + +# Sheets + +A sheet helps people perform a scoped task that’s closely related to their current context. + +![A stylized representation of a sheet extending down from the top of a window. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/357ff0b017e9241da82888bd3aec4372/components-sheet-intro%402x.png) + +By default, a sheet is _modal_ , presenting a targeted experience that prevents people from interacting with the parent view until they dismiss the sheet (for more on modal presentation, see [Modality](https://developer.apple.com/design/human-interface-guidelines/modality)). A modal sheet is useful for requesting specific information from people or presenting a simple task that they can complete before returning to the parent view. For example, a sheet might let people supply information needed to complete an action, such as attaching a file, choosing the location for a move or save, or specifying the format for a selection. + +In macOS, visionOS, and watchOS, a sheet is always modal, but in iOS and iPadOS, a sheet can also be nonmodal. When a nonmodal sheet is onscreen, people use its functionality to directly affect the current task in the parent view without dismissing the sheet. For example, Notes on iPhone and iPad uses a nonmodal sheet to help people apply different formatting to various text selections as they edit a note. + +![A screenshot of an in-progress note on iPhone. Several words are selected and highlighted. In the bottom half of the screen, the format sheet shows that the selected words use the regular body font.](https://docs-assets.developer.apple.com/published/56830eea369c54ce82f6867a0907f3f3/sheets-nonmodal-notes-text-regular%402x.png) + +The Notes format sheet lets people apply formatting to selected text in the editing view. + +![A screenshot of the same in-progress note on iPhone. Different words are selected and highlighted. The format sheet shows that the selected words use the body font in italics.](https://docs-assets.developer.apple.com/published/f7b427fb2d880e16df4ed1025a43b47c/sheets-nonmodal-notes-text-italic%402x.png) + +Because the sheet is nonmodal, people can make additional text selections without dismissing the sheet. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/sheets#Best-practices) + +**Use a sheet to present simple content or tasks.** A sheet allows some of the parent view to remain visible, helping people retain their original context as they interact with the sheet. + +**For complex or prolonged user flows, consider alternatives to sheets.** For example, iOS and iPadOS offer a full-screen style of modal view that can work well to display content like videos, photos, or camera views or to help people perform multistep tasks like document or photo editing. (For developer guidance, see [`UIModalPresentationStyle.fullScreen`](https://developer.apple.com/documentation/UIKit/UIModalPresentationStyle/fullScreen).) In a macOS experience, you might want to open a new window or let people enter full-screen mode instead of using a sheet. For example, a self-contained task like editing a document tends to work well in a separate window, whereas [going full screen](https://developer.apple.com/design/human-interface-guidelines/going-full-screen) can help people view media. In visionOS, you can give people a way to transition your app to a Full Space where they can dive into content or a task; for guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + +**Display only one sheet at a time from the main interface.** When people close a sheet, they expect to return to the parent view or window. If closing a sheet takes people back to another sheet, they can lose track of where they are in your app. If something people do within a sheet results in another sheet appearing, close the first sheet before displaying the new one. If necessary, you can display the first sheet again after people dismiss the second one. + +**Use a nonmodal view when you want to present supplementary items that affect the main task in the parent view.** To give people access to information and actions they need while continuing to interact with the main window, consider using a [split view](https://developer.apple.com/design/human-interface-guidelines/split-views) in visionOS or a [panel](https://developer.apple.com/design/human-interface-guidelines/panels) in macOS; in iOS and iPadOS, you can use a nonmodal sheet for this workflow. For guidance, see [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/sheets#iOS-iPadOS). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/sheets#Platform-considerations) + + _No additional considerations for tvOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/sheets#iOS-iPadOS) + +A resizable sheet expands when people scroll its contents or drag the _grabber_ , which is a small horizontal indicator that can appear at the top edge of a sheet. Sheets resize according to their _detents_ , which are particular heights at which a sheet naturally rests. Designed for iPhone, detents specify particular heights at which a sheet naturally rests. The system defines two detents: _large_ is the height of a fully expanded sheet and _medium_ is about half of the fully expanded height. + +![An illustration showing an iPhone screen in portrait orientation containing a solid rounded rectangle that occupies almost all of the screen, representing a full-screen sheet. A rounded close button appears in the upper-left corner of the sheet.](https://docs-assets.developer.apple.com/published/c2a600adb5237892585d71d2ae61c9a6/sheets-large-detent%402x.png) + +Large detent + +![An illustration showing an iPhone screen in portrait orientation containing a solid rounded rectangle that occupies half of the screen, representing a half-screen sheet. A rounded close button appears in the upper-left corner of the sheet.](https://docs-assets.developer.apple.com/published/413ac0d4cf462891f2ba9d0cd4bb01f1/sheets-medium-detent%402x.png) + +Medium detent + +Sheets automatically support the large detent. Adding the medium detent allows the sheet to rest at both heights, whereas specifying only medium prevents the sheet from expanding to full height. For developer guidance, see [`detents`](https://developer.apple.com/documentation/UIKit/UISheetPresentationController/detents). + +**In an iPhone app, consider supporting the medium detent to allow progressive disclosure of the sheet’s content.** For example, a share sheet displays the most relevant items within the medium detent, where they’re visible without resizing. To view more items, people can scroll or expand the sheet. In contrast, you might not want to support the medium detent if a sheet’s content is more useful when it displays at full height. For example, the compose sheets in Messages and Mail display only at full height to give people enough room to create content. + +**Include a grabber in a resizable sheet.** A grabber shows people that they can drag the sheet to resize it; they can also tap it to cycle through the detents. In addition to providing a visual indicator of resizability, a grabber also works with VoiceOver so people can resize the sheet without seeing the screen. For developer guidance, see [`prefersGrabberVisible`](https://developer.apple.com/documentation/UIKit/UISheetPresentationController/prefersGrabberVisible). + +**Support swiping to dismiss a sheet.** People expect to swipe vertically to dismiss a sheet instead of tapping a dismiss button. If people have unsaved changes in the sheet when they begin swiping to dismiss it, use an action sheet to let them confirm their action. + +**Position Done and Cancel buttons as people expect.** Typically, a Done or Dismiss button belongs in a sheet’s top-right corner in a left-to-right layout. The Cancel button belongs in a sheet’s top-left corner. + +The exception to this is for sheets with additional subviews, where the Cancel button belongs in the top-right; this provides room for the Back button in the top-left on pages after the first. At the end of the navigation flow, replace the Cancel button with the Done button. + +![An illustration of the top half of a sheet on iPhone. A Cancel button appears in the top-left corner of the view.](https://docs-assets.developer.apple.com/published/4c0ea03add08b05592c51ed58ebb79f1/sheets-close-button-placement-no-back%402x.png) + +Placement of the Cancel button when it appears by itself + +![An illustration of the top half of a sheet on iPhone. A Back button appears in the top-left corner of the view, and a Cancel button appears in the top-right corner.](https://docs-assets.developer.apple.com/published/4325d8e5db78c585b01a7137e34189c7/sheets-close-button-placement-with-back%402x.png) + +Placement of the Cancel button when it appears as part of a multi-step flow + +**Prefer using the page or form sheet presentation styles in an iPadOS app.** Each style uses a default size for the sheet, centering its content on top of a dimmed background view and providing a consistent experience. For developer guidance, see [`UIModalPresentationStyle`](https://developer.apple.com/documentation/UIKit/UIModalPresentationStyle). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/sheets#macOS) + +In macOS, a sheet is a cardlike view with rounded corners that floats on top of its parent window. The parent window is dimmed while the sheet is onscreen, signaling that people can’t interact with it until they dismiss the sheet. However, people expect to interact with other app windows before dismissing a sheet. + +![A screenshot of the Notes app, with the What's New in Notes sheet centered on top of a dimmed Notes document in the background.](https://docs-assets.developer.apple.com/published/582e02d0df9b4a07dea002053f9ec6ea/sheets-macos-notes%402x.png) + +**Present a sheet in a reasonable default size.** People don’t generally expect to resize sheets, so it’s important to use a size that’s appropriate for the content you display. In some cases, however, people appreciate a resizable sheet — such as when they need to expand the contents for a clearer view — so it’s a good idea to support resizing. + +**Let people interact with other app windows without first dismissing a sheet.** When a sheet opens, you bring its parent window to the front — if the parent window is a document window, you also bring forward its modeless document-related panels. When people want to interact with other windows in your app, make sure they can bring those windows forward even if they haven’t dismissed the sheet yet. + +**Position a sheet’s dismiss buttons as people expect.** People expect to find all buttons that dismiss a sheet — including Done, OK, and Cancel — at the bottom of the view, in the trailing corner. + +**Use a panel instead of a sheet if people need to repeatedly provide input and observe results.** A find and replace panel, for example, might let people initiate replacements individually, so they can observe the result of each search for correctness. For guidance, see [Panels](https://developer.apple.com/design/human-interface-guidelines/panels). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/sheets#visionOS) + +While a sheet is visible in a visionOS app, it floats in front of its parent window, dimming it, and becoming the target of people’s interactions with the app. + +Video with custom controls. + +Content description: A recording showing a sheet opening above a blank window in visionOS. + +Play + +**Avoid displaying a sheet that emerges from the bottom edge of a window.** To help people view the sheet, prefer centering it in their [field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view). + +**Present a sheet in a default size that helps people retain their context.** Avoid displaying a sheet that covers most or all of its window, but consider letting people resize the sheet if they want. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/sheets#watchOS) + +In watchOS, a sheet is a full-screen view that slides over your app’s current content. The sheet is semitransparent to help maintain the current context, but the system applies a material to the background that blurs and desaturates the covered content. + +![A screenshot of a sheet with a primary Action button and a default cancel button on Apple Watch.](https://docs-assets.developer.apple.com/published/fcdad96a098bea9c7b98a114403e46f2/sheets-watch-overlay%402x.png) + +**Use a sheet only when your modal task requires a custom title or custom content presentation.** If you need to give people important information or present a set of choices, consider using an [alert](https://developer.apple.com/design/human-interface-guidelines/alerts) or [action sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets). + +**Keep sheet interactions brief and occasional.** Use a sheet only as a temporary interruption to the current workflow, and only to facilitate an important task. Avoid using a sheet to help people navigate your app’s content. + +**Change the default label of the dismiss control only if it makes sense in your app.** By default, the sheet displays a round Cancel button in the upper left corner. Use this button when the sheet lets people make changes to the app’s behavior or to their data. If your sheet simply presents information without enabling a task, use the standard Done button instead. You can use a [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars) to display multiple buttons. + +![A screenshot of a watch displaying a sheet with the standard check mark Done button on Apple Watch.](https://docs-assets.developer.apple.com/published/bc70ac8a01bd110befa02132e9f53672/sheets-watch-custom%402x.png) + +The standard Done button + +**If you change the default label, prefer using SF Symbols to represent the action.** Avoid using a label that might mislead people into thinking that the sheet is part of a hierarchical navigation interface. Also, if the text in the top-leading corner looks like a page or app title, people won’t know how to dismiss the sheet. For guidance, see [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons). + +![A screenshot that shows a top toolbar with the default Cancel button at the top of the screen on Apple Watch.](https://docs-assets.developer.apple.com/published/4b2b3901392b3a2101bf98fbee0b7809/modal-sheet-watchos-do%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![A screenshot that shows a top toolbar with a custom Back button at the top of the screen on Apple Watch.](https://docs-assets.developer.apple.com/published/3342cdf046b51d5b7e22008f4fa36cf8/modal-sheet-watchos-do-not-1%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![A screenshot that shows a top toolbar with a button with the words Page title at the top of the screen on Apple Watch.](https://docs-assets.developer.apple.com/published/7e655a4130904ed5def637dde60325f9/modal-sheet-watchos-do-not-2%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/sheets#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/sheets#Related) + +[Modality](https://developer.apple.com/design/human-interface-guidelines/modality) + +[Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets) + +[Popovers](https://developer.apple.com/design/human-interface-guidelines/popovers) + +[Panels](https://developer.apple.com/design/human-interface-guidelines/panels) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/sheets#Developer-documentation) + +[`sheet(item:onDismiss:content:)`](https://developer.apple.com/documentation/SwiftUI/View/sheet\(item:onDismiss:content:\)) — SwiftUI + +[`UISheetPresentationController`](https://developer.apple.com/documentation/UIKit/UISheetPresentationController) — UIKit + +[`presentAsSheet(_:)`](https://developer.apple.com/documentation/AppKit/NSViewController/presentAsSheet\(_:\)) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/sheets#Change-log) + +Date| Changes +---|--- +March 29, 2024| Added guidance to use form or page sheet styles in iPadOS apps. +December 5, 2023| Recommended using a split view to offer supplementary items in a visionOS app. +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Updated guidance for using sheets in watchOS. + diff --git a/skills/hig-components-layout/SKILL.md b/skills/hig-components-layout/SKILL.md new file mode 100644 index 00000000..958bd9b5 --- /dev/null +++ b/skills/hig-components-layout/SKILL.md @@ -0,0 +1,99 @@ +--- +name: hig-components-layout +version: 1.0.0 +description: > + Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user + asks about "sidebar", "split view", "tab bar", "tab view", "scroll view", "window design", "panel", + "list view", "table view", "column view", "outline view", "navigation structure", "app layout", + "boxes", "ornaments", or organizing content hierarchically in Apple apps. + Also use when the user says "how should I organize my app", "what navigation pattern should I use", + "my layout breaks on iPad", "how do I build a sidebar", "should I use tabs or a sidebar", + or "my app doesn't adapt to different screen sizes". + Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific + navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display. +--- + +# Apple HIG: Layout and Navigation Components + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Organize hierarchically.** Structure information from broad categories to specific details. Sidebars for top-level sections, lists for browsable items, detail views for individual content. + +2. **Use standard navigation patterns.** Tab bars for flat navigation between peer sections (iPhone). Sidebars for deep hierarchical navigation (iPad, Mac). Match the pattern to the information architecture and platform. + +3. **Adapt to screen size.** Three-column on iPad collapses to single-column on iPhone. Use size classes and adaptive APIs (NavigationSplitView) for automatic adaptation. + +4. **Support multitasking on iPad.** Respond gracefully to Split View, Slide Over, and Stage Manager. Test at every split ratio and size class transition. + +5. **Maintain spatial consistency on visionOS.** Windows, volumes, and ornaments in shared space. Position predictably. Use ornaments for toolbars and controls without occluding content. + +6. **Use scroll views for overflow content.** Enable paging for discrete content units. Support pull-to-refresh where appropriate. Respect safe areas. + +7. **Keep navigation predictable.** Users should always know where they are, how they got there, and how to go back. Use back buttons, breadcrumbs, and clear section titles. + +8. **Prefer system components.** UINavigationController, UISplitViewController, NavigationSplitView, and TabView provide built-in adaptivity, accessibility, and state restoration. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [sidebars.md](references/sidebars.md) | Sidebars | Source lists, selection state, collapsible sections, iPad/Mac patterns | +| [column-views.md](references/column-views.md) | Column Views | Finder-style browsing, progressive disclosure through columns | +| [outline-views.md](references/outline-views.md) | Outline Views | Expandable hierarchies, disclosure triangles, tree structures | +| [split-views.md](references/split-views.md) | Split Views | Two/three column layouts, NavigationSplitView, adaptive collapse | +| [tab-views.md](references/tab-views.md) | Tab Views | Segmented tabs, page-style tabs, macOS tab grouping | +| [tab-bars.md](references/tab-bars.md) | Tab Bars | Bottom tab bars (iOS), badge counts, max tab count | +| [scroll-views.md](references/scroll-views.md) | Scroll Views | Paging, scroll indicators, content insets, pull-to-refresh | +| [windows.md](references/windows.md) | Windows | macOS/visionOS window management, sizing, full-screen, restoration | +| [panels.md](references/panels.md) | Panels | Inspector panels, utility panels, floating panels, macOS conventions | +| [lists-and-tables.md](references/lists-and-tables.md) | Lists and Tables | Plain/grouped/inset-grouped styles, swipe actions, section headers | +| [boxes.md](references/boxes.md) | Boxes | Content grouping containers, labeled boxes, macOS grouping | +| [ornaments.md](references/ornaments.md) | Ornaments | visionOS toolbar attachments, positioning, visibility | + +## Navigation Pattern Selection + +| App Structure | Recommended Pattern | Platform Adaptation | +|---|---|---| +| 3-5 peer top-level sections | Tab Bar | iPhone: bottom tab bar. iPad: sidebar (`.sidebarAdaptable`, iPadOS 18+). Mac: sidebar or toolbar tabs | +| Deep hierarchical content | Sidebar + NavigationSplitView | iPhone: single column stack. iPad: two/three columns. Mac: full multi-column | +| Deep file/folder tree | Column View | Mac: Finder-style. iPad: adaptable. iPhone: push navigation | +| Flat list with detail | Split View (two column) | iPhone: push/pop stack. iPad/Mac: primary + detail columns | +| Document-based with inspectors | Window + Panels | Mac: main window with inspector. iPad: sheet or popover | +| Spatial app with tools | Window + Ornaments | visionOS: ornaments on window. Other platforms: toolbars | + +## Layout Adaptation Checklist + +- [ ] **Compact width (iPhone portrait):** Navigation collapses to single stack? Tab bars visible? +- [ ] **Regular width (iPad landscape, Mac):** Navigation expands to sidebar + detail? Space used well? +- [ ] **Multitasking (iPad):** Adapts at every split ratio? Works in Slide Over? +- [ ] **Accessibility:** Supports Dynamic Type at all sizes? VoiceOver order logical? +- [ ] **Orientation:** Content reflows between portrait and landscape? +- [ ] **visionOS:** Windows positioned ergonomically? Ornaments accessible? Depth meaningful? + +## Output Format + +1. **Recommended navigation pattern** with rationale for the app's information architecture. +2. **Layout hierarchy** from root container down (e.g., TabView > NavigationSplitView > List > Detail). +3. **Platform adaptation** across targeted platforms and size classes. +4. **Size class behavior** at each transition. + +## Questions to Ask + +1. What is the app's information architecture? (Sections, hierarchy depth, top-level categories?) +2. How many top-level sections? +3. Which platforms? +4. Need multitasking on iPad? +5. SwiftUI or UIKit? + +## Related Skills + +- **hig-foundations** -- Layout spacing, margins, safe areas, alignment +- **hig-platforms** -- Platform-specific navigation conventions +- **hig-patterns** -- Multitasking, full-screen, and launching patterns +- **hig-components-content** -- Content displayed within layout containers + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-layout/references/boxes.md b/skills/hig-components-layout/references/boxes.md new file mode 100644 index 00000000..df7b2bd6 --- /dev/null +++ b/skills/hig-components-layout/references/boxes.md @@ -0,0 +1,48 @@ +--- +title: "Boxes | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/boxes + +# Boxes + +A box creates a visually distinct group of logically related information and components. + +![A stylized representation of a group of interface elements within a rounded rectangle. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/6e253271e9888e8d596d1d5b601d90f3/components-box-intro%402x.png) + +By default, a box uses a visible border or background color to separate its contents from the rest of the interface. A box can also include a title. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/boxes#Best-practices) + +**Prefer keeping a box relatively small in comparison with its containing view.** As a box’s size gets close to the size of the containing window or screen, it becomes less effective at communicating the separation of grouped content, and it can crowd other content. + +**Consider using padding and alignment to communicate additional grouping within a box.** A box’s border is a distinct visual element — adding nested boxes to define subgroups can make your interface feel busy and constrained. + +## [Content](https://developer.apple.com/design/human-interface-guidelines/boxes#Content) + +**Provide a succinct introductory title if it helps clarify the box’s contents.** The appearance of a box helps people understand that its contents are related, but it might make sense to provide more detail about the relationship. Also, a title can help VoiceOver users predict the content they encounter within the box. + +**If you need a title, write a brief phrase that describes the contents.** Use sentence-style capitalization. Avoid ending punctuation unless you use a box in a settings pane, where you append a colon to the title. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/boxes#Platform-considerations) + + _No additional considerations for visionOS. Not supported in tvOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/boxes#iOS-iPadOS) + +By default, iOS and iPadOS use the secondary and tertiary background [colors](https://developer.apple.com/design/human-interface-guidelines/color) in boxes. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/boxes#macOS) + +By default, macOS displays a box’s title above it. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/boxes#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/boxes#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/boxes#Developer-documentation) + +[`GroupBox`](https://developer.apple.com/documentation/SwiftUI/GroupBox) — SwiftUI + +[`NSBox`](https://developer.apple.com/documentation/AppKit/NSBox) — AppKit + diff --git a/skills/hig-components-layout/references/column-views.md b/skills/hig-components-layout/references/column-views.md new file mode 100644 index 00000000..8ef7ab30 --- /dev/null +++ b/skills/hig-components-layout/references/column-views.md @@ -0,0 +1,44 @@ +--- +title: "Column views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/column-views + +# Column views + +A column view — also called a _browser_ — lets people view and navigate a data hierarchy using a series of vertical columns. + +![A stylized representation of three columns containing a list of folders, images, and file information. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/34ebf07677359428c45cbda0b9c1641e/components-column-view-intro%402x.png) + +Each column represents one level of the hierarchy and contains horizontal rows of data items. Within a column, any parent item that contains nested child items is marked with a triangle icon. When people select a parent, the next column displays its children. People can continue navigating in this way until they reach an item with no children, and can also navigate back up the hierarchy to explore other branches of data. + +Note + +If you need to manage the presentation of hierarchical content in your iPadOS or visionOS app, consider using a [split view](https://developer.apple.com/design/human-interface-guidelines/split-views). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/column-views#Best-practices) + +Consider using a column view when you have a deep data hierarchy in which people tend to navigate back and forth frequently between levels, and you don’t need the sorting capabilities that a [list or table](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables) provides. For example, Finder offers a column view (in addition to icon, list, and gallery views) for navigating directory structures. + +**Show the root level of your data hierarchy in the first column.** People know they can quickly scroll back to the first column to begin navigating the hierarchy from the top again. + +**Consider showing information about the selected item when there are no nested items to display.** The Finder, for example, shows a preview of the selected item and information like the creation date, modification date, file type, and size. + +**Let people resize columns.** This is especially important if the names of some data items are too long to fit within the default column width. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/column-views#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/column-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/column-views#Related) + +[Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables) + +[Outline views](https://developer.apple.com/design/human-interface-guidelines/outline-views) + +[Split views](https://developer.apple.com/design/human-interface-guidelines/split-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/column-views#Developer-documentation) + +[`NSBrowser`](https://developer.apple.com/documentation/AppKit/NSBrowser) — AppKit + diff --git a/skills/hig-components-layout/references/lists-and-tables.md b/skills/hig-components-layout/references/lists-and-tables.md new file mode 100644 index 00000000..71515003 --- /dev/null +++ b/skills/hig-components-layout/references/lists-and-tables.md @@ -0,0 +1,99 @@ +--- +title: "Lists and tables | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/lists-and-tables + +# Lists and tables + +Lists and tables present data in one or more columns of rows. + +![A stylized representation of a three-row table with header and footer text. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/c3e26d2515ac05cae7aba2704f8640d6/components-lists-and-tables-intro%402x.png) + +A table or list can represent data that’s organized in groups or hierarchies, and it can support user interactions like selecting, adding, deleting, and reordering. Apps and games in all platforms can use tables to present content and options; many apps use lists to express an overall information hierarchy and help people navigate it. For example, iOS Settings uses a hierarchy of lists to help people choose options, and several apps — such as Mail in iPadOS and macOS — use a table within a [split view](https://developer.apple.com/design/human-interface-guidelines/split-views). + +Sometimes, people need to work with complex data in a multicolumn table or a spreadsheet. Apps that offer productivity tasks often use a table to represent various characteristics or attributes of the data in separate, sortable columns. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Best-practices) + +**Prefer displaying text in a list or table.** A table can include any type of content, but the row-based format is especially well suited to making text easy to scan and read. If you have items that vary widely in size — or you need to display a large number of images — consider using a [collection](https://developer.apple.com/design/human-interface-guidelines/collections) instead. + +**Let people edit a table when it makes sense.** People appreciate being able to reorder a list, even if they can’t add or remove items. In iOS and iPadOS, people must enter an edit mode before they can select table items. + +**Provide appropriate feedback when people select a list item.** The feedback can vary depending on whether selecting the item reveals a new view or toggles the item’s state. In general, a table that helps people navigate through a hierarchy persistently highlights the selected row to clarify the path people are taking. In contrast, a table that lists options often highlights a row only briefly before adding an image — such as a checkmark — indicating that the item is selected. + +## [Content](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Content) + +**Keep item text succinct so row content is comfortable to read.** Short, succinct text can help minimize truncation and wrapping, making text easier to read and scan. If each item consists of a large amount of text, consider alternatives that help you avoid displaying over-large table rows. For example, you could list item titles only, letting people choose an item to reveal its content in a detail view. + +**Consider ways to preserve readability of text that might otherwise get clipped or truncated.** When a table is narrow — for example, if people can vary its width — you want content to remain recognizable and easy to read. Sometimes, an ellipsis in the middle of text can make an item easier to distinguish because it preserves both the beginning and the end of the content. + +**Use descriptive column headings in a multicolumn table.** Use nouns or short noun phrases with [title-style capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64), and don’t add ending punctuation. If you don’t include a column heading in a single-column table view, use a label or a header to help people understand the context. + +## [Style](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Style) + +**Choose a table or list style that coordinates with your data and platform.** Some styles use visual details to help communicate grouping and hierarchy or to provide specific experiences. In iOS and iPadOS, for example, the grouped style uses headers, footers, and additional space to separate groups of data; the elliptical style available in watchOS makes items appear as if they’re rolling off a rounded surface as people scroll; and macOS defines a bordered style that uses alternating row backgrounds to help make large tables easier to use. For developer guidance, see [`ListStyle`](https://developer.apple.com/documentation/SwiftUI/ListStyle). + +**Choose a row style that fits the information you need to display.** For example, you might need to display a small image in the leading end of a row, followed by a brief explanatory label. Some platforms provide built-in row styles you can use to arrange content in list rows, such as the [`UIListContentConfiguration`](https://developer.apple.com/documentation/UIKit/UIListContentConfiguration-swift.struct) API you can use to lay out content in a list’s rows, headers, and footers in iOS, iPadOS, and tvOS. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Platform-considerations) + +### [iOS, iPadOS, visionOS](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#iOS-iPadOS-visionOS) + +**Use an info button only to reveal more information about a row’s content.** An info button — called a _detail disclosure button_ when it appears in a list row — doesn’t support navigation through a hierarchical table or list. If you need to let people drill into a list or table row’s subviews, use a disclosure indicator accessory control. For developer guidance, see [`UITableViewCell.AccessoryType.disclosureIndicator`](https://developer.apple.com/documentation/UIKit/UITableViewCell/AccessoryType-swift.enum/disclosureIndicator). + +![An illustration of a grouped list of rows. Each list item includes an info button at the trailing end of the row.](https://docs-assets.developer.apple.com/published/fd301d26835e0341b95eaa2027f200f2/info-button-in-list%402x.png)An info button shows details about a list item; it doesn’t support navigation. + +![An illustration of a grouped list of rows. Each list item includes a right-pointing chevron at the trailing end of the row.](https://docs-assets.developer.apple.com/published/dcb3678fe458846713b03756ab5e1a28/disclosure-indicator-in-list%402x.png)A disclosure indicator reveals the next level in a hierarchy; it doesn’t show details about the item. + +**Avoid adding an index to a table that displays controls — like disclosure indicators — in the trailing ends of its rows.** An _index_ typically consists of the letters in an alphabet, displayed vertically at the trailing side of a list. People can jump to a specific section in the list by choosing the index letter that maps to it. Because both the index and elements like disclosure indicators appear on the trailing side of a list, it can be difficult for people to use one element without activating the other. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#macOS) + +**When it provides value, let people click a column heading to sort a table view based on that column**. If people click the heading of a column that’s already sorted, re-sort the data in the opposite direction. + +**Let people resize columns.** Data displayed in a table view often varies in width. People appreciate resizing columns to help them concentrate on different areas or reveal clipped data. + +**Consider using alternating row colors in a multicolumn table.** Alternating colors can help people track row values across columns, especially in a wide table. + +**Use an outline view instead of a table view to present hierarchical data.** An [outline view](https://developer.apple.com/design/human-interface-guidelines/outline-views) looks like a table view, but includes disclosure triangles for exposing nested levels of data. For example, an outline view might display folders and the items they contain. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#tvOS) + +**Confirm that images near a table still look good as each row highlights and slightly increases in size when it becomes focused.** A focused row’s corners can also become rounded, which may affect the appearance of images on either side of it. Account for this effect as you prepare images, and don’t add your own masks to round the corners. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#watchOS) + +**When possible, limit the number of rows.** Short lists are easier for people to scan, but sometimes people expect a long list of items. For example, if people subscribe to a large number of podcasts, they might think something’s wrong if they can’t view all their items. You can help make a long list more manageable by listing the most relevant items and providing a way for people to view more. + +**Constrain the length of detail views if you want to support vertical page-based navigation.** People use vertical page-based navigation to swipe vertically among the detail items of different list rows. Navigating in this way saves time because people don’t need to return to the list to tap a new detail item, but it works only when detail views are short. If your detail views scroll, people won’t be able to use vertical page-based navigation to swipe among them. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Related) + +[Collections](https://developer.apple.com/design/human-interface-guidelines/collections) + +[Outline views](https://developer.apple.com/design/human-interface-guidelines/outline-views) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Developer-documentation) + +[`List`](https://developer.apple.com/documentation/SwiftUI/List) — SwiftUI + +[Tables](https://developer.apple.com/documentation/SwiftUI/Tables) — SwiftUI + +[`UITableView`](https://developer.apple.com/documentation/UIKit/UITableView) — UIKit + +[`NSTableView`](https://developer.apple.com/documentation/AppKit/NSTableView) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/1636D358-5C36-4027-B204-81FFE4D05B7D/3455_wide_250x141_1x.jpg) Stacks, Grids, and Outlines in SwiftUI ](https://developer.apple.com/videos/play/wwdc2020/10031) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Updated guidance to reflect changes in watchOS 10. + diff --git a/skills/hig-components-layout/references/ornaments.md b/skills/hig-components-layout/references/ornaments.md new file mode 100644 index 00000000..ae943ee4 --- /dev/null +++ b/skills/hig-components-layout/references/ornaments.md @@ -0,0 +1,56 @@ +--- +title: "Ornaments | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/ornaments + +# Ornaments + +In visionOS, an ornament presents controls and information related to a window, without crowding or obscuring the window’s contents. + +![A stylized representation of an ornament at the bottom of a window shown on top of a grid that suggests the canvas of a design tool. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/a9012c3e7b1c5d47a4788aefd7a5b48c/components-ornaments-intro%402x.png) + +An ornament floats in a plane that’s parallel to its associated window and slightly in front of it along the z-axis. If the associated window moves, the ornament moves with it, maintaining its relative position; if the window’s contents scroll, the controls or information in the ornament remain unchanged. + +Ornaments can appear on any edge of a window and can contain UI components like buttons, segmented controls, and other views. The system uses ornaments to create and manage components like [toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars), [tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars), and video playback controls; you can use an ornament to create a custom component. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/ornaments#Best-practices) + +**Consider using an ornament to present frequently needed controls or information in a consistent location that doesn’t clutter the window.** Because an ornament stays close to its window, people always know where to find it. For example, Music uses an ornament to offer Now Playing controls, ensuring that these controls remain in a predictable location that’s easy to find. + +**In general, keep an ornament visible.** It can make sense to hide an ornament when people dive into a window’s content — for example, when they watch a video or view a photo — but in most cases, people appreciate having consistent access to an ornament’s controls. + +**If you need to display multiple ornaments, prioritize the overall visual balance of the window.** Ornaments help elevate important actions, but they can sometimes distract from your content. When necessary, consider constraining the total number of ornaments to avoid increasing a window’s visual weight and making your app feel more complicated. If you decide to remove an ornament, you can relocate its elements into the main window. + +**Aim to keep an ornament’s width the same or narrower than the width of the associated window.** If an ornament is wider than its window, it can interfere with a tab bar or other vertical content on the window’s side. + +**Consider using borderless buttons in an ornament.** By default, an ornament’s background is [glass](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS), so if you place a button directly on the background, it may not need a visible border. When people look at a borderless button in an ornament, the system automatically applies the hover affect to it (for guidance, see [Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes)). + +**Use system-provided toolbars and tab bars unless you need to create custom components.** In visionOS, toolbars and tab bars automatically appear as ornaments, so you don’t need to use an ornament to create these components. For developer guidance, see [Toolbars](https://developer.apple.com/documentation/SwiftUI/Toolbars) and [`TabView`](https://developer.apple.com/documentation/SwiftUI/TabView). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/ornaments#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, tvOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/ornaments#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/ornaments#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +[Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/ornaments#Developer-documentation) + +[`ornament(visibility:attachmentAnchor:contentAlignment:ornament:)`](https://developer.apple.com/documentation/SwiftUI/View/ornament\(visibility:attachmentAnchor:contentAlignment:ornament:\)) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/ornaments#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/38E4EE32-29B5-4478-B8B6-35B8ACA67B16/8130_wide_250x141_1x.jpg) Design for spatial user interfaces ](https://developer.apple.com/videos/play/wwdc2023/10076) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/ornaments#Change-log) + +Date| Changes +---|--- +February 2, 2024| Added guidance on using multiple ornaments. +December 5, 2023| Removed a statement about using ornaments to present supplementary items. +June 21, 2023| New page. + diff --git a/skills/hig-components-layout/references/outline-views.md b/skills/hig-components-layout/references/outline-views.md new file mode 100644 index 00000000..da03e0ef --- /dev/null +++ b/skills/hig-components-layout/references/outline-views.md @@ -0,0 +1,64 @@ +--- +title: "Outline views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/outline-views + +# Outline views + +An outline view presents hierarchical data in a scrolling list of cells that are organized into columns and rows. + +![A stylized representation of a list of folders and images, displayed in an outline view containing four columns: \[Name\], \[Date Modified\], \[Size\], and \[Kind\]. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/30462b13b59c89c7ba9e142a2fcef05b/components-outline-view-intro%402x.png) + +An outline view includes at least one column that contains primary hierarchical data, such as a set of parent containers and their children. You can add columns, as needed, to display attributes that supplement the primary data; for example, sizes and modification dates. Parent containers have disclosure triangles that expand to reveal their children. + +Finder windows offer an outline view for navigating the file system. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/outline-views#Best-practices) + +Outline views work well to display text-based content and often appear in the leading side of a [split view](https://developer.apple.com/design/human-interface-guidelines/split-views), with related content on the opposite side. + +**Use a table instead of an outline view to present data that’s not hierarchical.** For guidance, see [Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables). + +**Expose data hierarchy in the first column only.** Other columns can display attributes that apply to the hierarchical data in the primary column. + +**Use descriptive column headings to provide context.** Use nouns or short noun phrases with [title-style capitalization](https://help.apple.com/applestyleguide/#/apsgb744e4a3?sub=apdca93e113f1d64) and no punctuation; in particular, avoid adding a trailing colon. Always provide column headings in a multi-column outline view. If you don’t include a column heading in a single-column outline view, use a label or other means to make sure there’s enough context. + +**Consider letting people click column headings to sort an outline view.** In a sortable outline view, people can click a column heading to perform an ascending or descending sort based on that column. You can implement additional sorting based on secondary columns behind the scenes, if necessary. If people click the primary column heading, sorting occurs at each hierarchy level. For example, in the Finder, all top-level folders are sorted, then the items within each folder are sorted. If people click the heading of a column that’s already sorted, the folders and their contents are sorted again in the opposite direction. + +**Let people resize columns.** Data displayed in an outline view often varies in width. It’s important to let people adjust column width as needed to reveal data that’s wider than the column. + +**Make it easy for people to expand or collapse nested containers.** For example, clicking a disclosure triangle for a folder in a Finder window expands only that folder. However, Option-clicking the disclosure triangle expands all of its subfolders. + +**Retain people’s expansion choices.** If people expand various levels of an outline view to reach a specific item, store the state so you can display it again the next time. This way, people won’t need to navigate back to the same place again. + +**Consider using alternating row colors in multi-column outline views.** Alternating colors can make it easier for people to track row values across columns, especially in wide outline views. + +**Let people edit data if it makes sense in your app.** In an editable outline view cell, people expect to be able to single-click a cell to edit its contents. Note that a cell can respond differently to a double click. For example, an outline view listing files might let people single-click a file’s name to edit it, but double-click a file’s name to open the file. You can also let people reorder, add, and remove rows if it would be useful. + +**Consider using a centered ellipsis to truncate cell text instead of clipping it.** An ellipsis in the middle preserves the beginning and end of the cell text, which can make the content more distinct and recognizable than clipped text. + +**Consider offering a search field to help people find values quickly in a lengthy outline view.** Windows with an outline view as the primary feature often include a search field in the toolbar. For guidance, see [Search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/outline-views#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/outline-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/outline-views#Related) + +[Column views](https://developer.apple.com/design/human-interface-guidelines/column-views) + +[Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables) + +[Split views](https://developer.apple.com/design/human-interface-guidelines/split-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/outline-views#Developer-documentation) + +[`OutlineGroup`](https://developer.apple.com/documentation/SwiftUI/OutlineGroup) — SwiftUI + +[`NSOutlineView`](https://developer.apple.com/documentation/AppKit/NSOutlineView) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/outline-views#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/1636D358-5C36-4027-B204-81FFE4D05B7D/3455_wide_250x141_1x.jpg) Stacks, Grids, and Outlines in SwiftUI ](https://developer.apple.com/videos/play/wwdc2020/10031) + diff --git a/skills/hig-components-layout/references/panels.md b/skills/hig-components-layout/references/panels.md new file mode 100644 index 00000000..c3d0cc57 --- /dev/null +++ b/skills/hig-components-layout/references/panels.md @@ -0,0 +1,75 @@ +--- +title: "Panels | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/panels + +# Panels + +In a macOS app, a panel typically floats above other open windows providing supplementary controls, options, or information related to the active window or current selection. + +![A stylized representation of a panel floating above a window. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/37f7c9e6dd4c635ccbae68b50200a74c/components-panel-intro%402x.png) + +In general, a panel has a less prominent appearance than an app’s [main window](https://developer.apple.com/design/human-interface-guidelines/windows#macOS-window-states). When the situation calls for it, a panel can also use a dark, translucent style to support a heads-up display (or _HUD_) experience. + +When your app runs in other platforms, consider using a modal view to present supplementary content that’s relevant to the current task or selection. For guidance, see [Modality](https://developer.apple.com/design/human-interface-guidelines/modality). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/panels#Best-practices) + +**Use a panel to give people quick access to important controls or information related to the content they’re working with.** For example, you might use a panel to provide controls or settings that affect the selected item in the active document or window. + +**Consider using a panel to present inspector functionality.** An _inspector_ displays the details of the currently selected item, automatically updating its contents when the item changes or when people select a new item. In contrast, if you need to present an _Info_ window — which always maintains the same contents, even when the selected item changes — use a regular window, not a panel. Depending on the layout of your app, you might also consider using a [split view](https://developer.apple.com/design/human-interface-guidelines/split-views) pane to present an inspector. + +**Prefer simple adjustment controls in a panel.** As much as possible, avoid including controls that require typing text or selecting items to act upon because these actions can require multiple steps. Instead, consider using controls like sliders and steppers because these components can give people more direct control. + +**Write a brief title that describes the panel’s purpose.** Because a panel often floats above other open windows in your app, it needs a title bar so people can position it where they want. Create a short title using a noun — or a noun phrase with [title-style capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64) — that can help people recognize the panel onscreen. For example, macOS provides familiar panels titled “Fonts” and “Colors,” and many apps use the title “Inspector.” + +**Show and hide panels appropriately.** When your app becomes active, bring all of its open panels to the front, regardless of which window was active when the panel opened. When your app is inactive, hide all of its panels. + +**Avoid including panels in the Window menu’s documents list.** It’s fine to include commands for showing or hiding panels in the [Window menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Window-menu), but panels aren’t documents or standard app windows, and they don’t belong in the Window menu’s list. + +**In general, avoid making a panel’s minimize button available.** People don’t usually need to minimize a panel, because it displays only when needed and disappears when the app is inactive. + +**Refer to panels by title in your interface and in help documentation.** In menus, use the panel’s title without including the term _panel_ : for example, “Show Fonts,” “Show Colors,” and “Show Inspector.” In help documentation, it can be confusing to introduce “panel” as a different type of window, so it’s generally best to refer to a panel by its title or — when it adds clarity — by appending _window_ to the title. For example, the title “Inspector” often supplies enough context to stand on its own, whereas it can be clearer to use “Fonts window” and “Colors window” instead of just “Fonts” and “Colors.” + +## [HUD-style panels](https://developer.apple.com/design/human-interface-guidelines/panels#HUD-style-panels) + +A HUD-style panel serves the same function as a standard panel, but its appearance is darker and translucent. HUDs work well in apps that present highly visual content or that provide an immersive experience, such as media editing or a full-screen slide show. For example, QuickTime Player uses a HUD to display inspector information without obstructing too much content. + +![A screenshot of a translucent HUD panel, used to display inspector information for a movie file, including the filename, format, frames per second, data rate, and the frame size of the movie content.](https://docs-assets.developer.apple.com/published/f3fccb3f4ad6963af1310c8f98c5a0f7/hud-style-panel%402x.png) + +**Prefer standard panels.** People can be distracted or confused by a HUD when there’s no logical reason for its presence. Also, a HUD might not match the current appearance setting. In general, use a HUD only: + + * In a media-oriented app that presents movies, photos, or slides + + * When a standard panel would obscure essential content + + * When you don’t need to include controls — with the exception of the disclosure triangle, most system-provided controls don’t match a HUD’s appearance. + + + + +**Maintain one panel style when your app switches modes.** For example, if you use a HUD when your app is in full-screen mode, prefer maintaining the HUD style when people take your app out of full-screen mode. + +**Use color sparingly in HUDs.** Too much color in the dark appearance of a HUD can be distracting. Often, you need only small amounts of high-contrast color to highlight important information in a HUD. + +**Keep HUDs small.** HUDs are designed to be unobtrusively useful, so letting them grow too large defeats their primary purpose. Don’t let a HUD obscure the content it adjusts, and make sure it doesn’t compete with the content for people’s attention. + +For developer guidance, see [`hudWindow`](https://developer.apple.com/documentation/AppKit/NSWindow/StyleMask-swift.struct/hudWindow). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/panels#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/panels#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/panels#Related) + +[Windows](https://developer.apple.com/design/human-interface-guidelines/windows) + +[Modality](https://developer.apple.com/design/human-interface-guidelines/modality) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/panels#Developer-documentation) + +[`NSPanel`](https://developer.apple.com/documentation/AppKit/NSPanel) — AppKit + +[`hudWindow`](https://developer.apple.com/documentation/AppKit/NSWindow/StyleMask-swift.struct/hudWindow) — AppKit + diff --git a/skills/hig-components-layout/references/scroll-views.md b/skills/hig-components-layout/references/scroll-views.md new file mode 100644 index 00000000..0f10a347 --- /dev/null +++ b/skills/hig-components-layout/references/scroll-views.md @@ -0,0 +1,123 @@ +--- +title: "Scroll views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/scroll-views + +# Scroll views + +A scroll view lets people view content that’s larger than the view’s boundaries by moving the content vertically or horizontally. + +![A stylized representation of a scrollable image view. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/395072e6a9ec2890d242c1d967a7cbe4/components-scroll-view-intro%402x.png) + +The scroll view itself has no appearance, but it can display a translucent _scroll indicator_ that typically appears after people begin scrolling the view’s content. Although the appearance and behavior of scroll indicators can vary per platform, all indicators provide visual feedback about the scrolling action. For example, in iOS, iPadOS, macOS, visionOS, and watchOS, the indicator shows whether the currently visible content is near the beginning, middle, or end of the view. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/scroll-views#Best-practices) + +**Support default scrolling gestures and keyboard shortcuts.** People are accustomed to the systemwide scrolling behavior and expect it to work everywhere. If you build custom scrolling for a view, make sure your scroll indicators use the elastic behavior that people expect. + +**Make it apparent when content is scrollable.** Because scroll indicators aren’t always visible, it can be helpful to make it obvious when content extends beyond the view. For example, displaying partial content at the edge of a view indicates that there’s more content in that direction. Although most people immediately try scrolling a view to discover if additional content is available, it’s considerate to draw their attention to it. + +**Avoid putting a scroll view inside another scroll view with the same orientation.** Nesting scroll views that have the same orientation can create an unpredictable interface that’s difficult to control. It’s alright to place a horizontal scroll view inside a vertical scroll view (or vice versa), however. + +**Consider supporting page-by-page scrolling if it makes sense for your content.** In some situations, people appreciate scrolling by a fixed amount of content per interaction instead of scrolling continuously. On most platforms, you can define the size of such a _page_ — typically the current height or width of the view — and define an interaction that scrolls one page at a time. To help maintain context during page-by-page scrolling, you can define a unit of overlap, such as a line of text, a row of glyphs, or part of a picture, and subtract the unit from the page size. For developer guidance, see [`PagingScrollTargetBehavior`](https://developer.apple.com/documentation/SwiftUI/PagingScrollTargetBehavior). + +**In some cases, scroll automatically to help people find their place.** Although people initiate almost all scrolling, automatic scrolling can be helpful when relevant content is no longer in view, such as when: + + * Your app performs an operation that selects content or places the insertion point in an area that’s currently hidden. For example, when your app locates text that people are searching for, scroll the content to bring the new selection into view. + + * People start entering information in a location that’s not currently visible. For example, if the insertion point is on one page and people navigate to another page, scroll back to the insertion point as soon as they begin to enter text. + + * The pointer moves past the edge of the view while people are making a selection. In this case, follow the pointer by scrolling in the direction it moves. + + * People select something and scroll to a new location before acting on the selection. In this case, scroll until the selection is in view before performing the operation. + + + + +In all cases, automatically scroll the content only as much as necessary to help people retain context. For example, if part of a selection is visible, you don’t need to scroll the entire selection into view. + +**If you support zoom, set appropriate maximum and minimum scale values.** For example, zooming in on text until a single character fills the screen doesn’t make sense in most situations. + +## [Scroll edge effects](https://developer.apple.com/design/human-interface-guidelines/scroll-views#Scroll-edge-effects) + +In iOS, iPadOS, and macOS, a _scroll edge effect_ is a variable blur that provides a transition between a content area and an area with [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) controls, such as [toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars). In most cases, the system applies a scroll edge effect automatically when a pinned element overlaps with scrolling content. If you use custom controls or layouts, the effect might not appear, and you may need to add it manually. For developer guidance, see [`ScrollEdgeEffectStyle`](https://developer.apple.com/documentation/SwiftUI/ScrollEdgeEffectStyle) and [`UIScrollEdgeEffect`](https://developer.apple.com/documentation/UIKit/UIScrollEdgeEffect). + +There are two styles of scroll edge effect: soft and hard. + + * Use a [`soft`](https://developer.apple.com/documentation/SwiftUI/ScrollEdgeEffectStyle/soft) edge effect in most cases, especially in iOS and iPadOS, to provide a subtle transition that works well for toolbars and interactive elements like buttons. + + * Use a [`hard`](https://developer.apple.com/documentation/SwiftUI/ScrollEdgeEffectStyle/hard) edge effect primarily in macOS for a stronger, more opaque boundary that’s ideal for interactive text, backless controls, or pinned table headers that need extra clarity. + + + + +**Only use a scroll edge effect when a scroll view is adjacent to floating interface elements.** Scroll edge effects aren’t decorative. They don’t block or darken like overlays; they exist to clarify where controls and content meet. + +**Apply one scroll edge effect per view.** In split view layouts on iPad and Mac, each pane can have its own scroll edge effect; in this case, keep them consistent in height to maintain alignment. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/scroll-views#Platform-considerations) + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/scroll-views#iOS-iPadOS) + +**Consider showing a page control when a scroll view is in page-by-page mode.** [Page controls](https://developer.apple.com/design/human-interface-guidelines/page-controls) show how many pages, screens, or other chunks of content are available and indicates which one is currently visible. For example, Weather uses a page control to indicate movement between people’s saved locations. If you show a page control with a scroll view, don’t show the scrolling indicator on the same axis to avoid confusing people with redundant controls. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/scroll-views#macOS) + +In macOS, a _scroll indicator_ is commonly called a _scroll bar_. + +**If necessary, use small or mini scroll bars in a panel.** When space is tight, you can use smaller scroll bars in panels that need to coexist with other windows. Be sure to use the same size for all controls in such a panel. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/scroll-views#tvOS) + +Views in tvOS can scroll, but they aren’t treated as distinct objects with scroll indicators. Instead, when content exceeds the size of the screen, the system automatically scrolls the interface to keep focused items visible. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/scroll-views#visionOS) + +In visionOS, the scroll indicator has a small, fixed size to help communicate that people can scroll efficiently without making large movements. To make it easy to find, the scroll indicator always appears in a predictable location with respect to the window: vertically centered at the trailing edge during vertical scrolling and horizontally centered at the window’s bottom edge during horizontal scrolling. + +When people begin swiping content in the direction they want it to scroll, the scroll indicator appears at the window’s edge, visually reinforcing the effect of their gesture and providing feedback about the content’s current position and overall length. When people look at the scroll indicator and begin a drag gesture, the indicator enables a jog bar experience that lets people manipulate the scrolling speed instead of the content’s position. In this experience, the scroll indicator reveals tick marks that speed up or slow down as people make small adjustments to their gesture, providing visual feedback that helps people precisely control scrolling acceleration. + +Video with custom controls. + +Content description: A recording showing a scroll indicator on a long page in the Notes app. As the viewer drags the page quickly, the indicator shows tick marks that match the scrolling speed. + +Play + +**If necessary, account for the size of the scroll indicator.** Although the indicator’s overall size is small, it’s a little thicker than the same component in iOS. If your content uses tight margins, consider increasing them to prevent the scroll indicator from overlapping the content. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/scroll-views#watchOS) + +**Prefer vertically scrolling content.** People are accustomed to using the Digital Crown to navigate to and within apps on Apple Watch. If your app contains a single list or content view, rotating the Digital Crown scrolls vertically when your app’s content is taller than the height of the display. + +**Use tab views to provide page-by-page scrolling.** watchOS displays tab views as pages. If you place tab views in a vertical stack, people can rotate the Digital Crown to move vertically through full-screen pages of content. In this scenario, the system displays a page indicator next to the Digital Crown that shows people where they are in the content, both within the current page and within a set of pages. For guidance, see [Tab views](https://developer.apple.com/design/human-interface-guidelines/tab-views). + +**When displaying paged content, consider limiting the content of an individual page to a single screen height.** Embracing this constraint clarifies the purpose of each page, helping you create a more glanceable design. However, if your app has long pages, people can still use the Digital Crown both to navigate between shorter pages and to scroll content in a longer page because the page indicator expands into a scroll indicator when necessary. Use variable-height pages judiciously and place them after fixed-height pages when possible. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/scroll-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/scroll-views#Related) + +[Page controls](https://developer.apple.com/design/human-interface-guidelines/page-controls) + +[Gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) + +[Pointing devices](https://developer.apple.com/design/human-interface-guidelines/pointing-devices) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/scroll-views#Developer-documentation) + +[`ScrollView`](https://developer.apple.com/documentation/SwiftUI/ScrollView) + +[`UIScrollView`](https://developer.apple.com/documentation/UIKit/UIScrollView) + +[`NSScrollView`](https://developer.apple.com/documentation/AppKit/NSScrollView) + +[`WKPageOrientation`](https://developer.apple.com/documentation/WatchKit/WKPageOrientation) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/scroll-views#Change-log) + +Date| Changes +---|--- +July 28, 2025| Added guidance for scroll edge effects. +February 2, 2024| Added artwork showing the behavior of the visionOS scroll indicator. +December 5, 2023| Described the visionOS scroll indicator and added guidance for integrating it with window layout. +June 5, 2023| Updated guidance for using scroll views in watchOS. + diff --git a/skills/hig-components-layout/references/sidebars.md b/skills/hig-components-layout/references/sidebars.md new file mode 100644 index 00000000..cbf43b08 --- /dev/null +++ b/skills/hig-components-layout/references/sidebars.md @@ -0,0 +1,109 @@ +--- +title: "Sidebars | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/sidebars + +# Sidebars + +A sidebar appears on the leading side of a view and lets people navigate between sections in your app or game. + +![A stylized representation of the top portion of a window's sidebar displaying a title, a section, and some folders. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d8bde769da53e8facee9d89e4362b83c/components-sidebar-intro%402x.png) + +A sidebar floats above content without being anchored to the edges of the view. It provides a broad, flat view of an app’s information hierarchy, giving people access to several peer content areas or modes at the same time. + +A sidebar requires a large amount of vertical and horizontal space. When space is limited or you want to devote more of the screen to other information or functionality, a more compact control such as a [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars) may provide a better navigation experience. For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/sidebars#Best-practices) + +**Extend content beneath the sidebar.** In iOS, iPadOS, and macOS, as with other controls such as toolbars and tab bars, sidebars float above content in the [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) layer. To reinforce the separation and floating appearance of the sidebar, extend content beneath it either by letting it horizontally scroll or applying a background extension view, which mirrors adjacent content to give the impression of stretching it under the sidebar. For developer guidance, see [`backgroundExtensionEffect()`](https://developer.apple.com/documentation/SwiftUI/View/backgroundExtensionEffect\(\)). + +![A screenshot of the leading side of an app on iPad. An image spans the upper part of the window, stopping at the edge of the sidebar.](https://docs-assets.developer.apple.com/published/d50ee5db90fbe0cae8f34304aa315053/sidebars-extend-content-beneath-sidebar-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![A screenshot of the leading side of an app on iPad. An image spans the upper part of the window, and uses a background extension effect to flip, blur, and extend the image beneath the sidebar to the edge of the window.](https://docs-assets.developer.apple.com/published/5cdac1170561cddf1930b4d74325c4dd/sidebars-extend-content-beneath-sidebar-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**When possible, let people customize the contents of a sidebar.** A sidebar lets people navigate to important areas in your app, so it works well when people can decide which areas are most important and in what order they appear. + +**Group hierarchy with disclosure controls if your app has a lot of content.** Using [disclosure controls](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls) helps keep the sidebar’s vertical space to a manageable level. + +**Consider using familiar symbols to represent items in the sidebar.** [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) provides a wide range of customizable symbols you can use to represent items in your app. If you need to use a custom icon, consider creating a [custom symbol](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Custom-symbols) rather than using a bitmap image. Download the SF Symbols app from [Apple Design Resources](https://developer.apple.com/design/resources/#sf-symbols). + +**Consider letting people hide the sidebar.** People sometimes want to hide the sidebar to create more room for content details or to reduce distraction. When possible, let people hide and show the sidebar using the platform-specific interactions they already know. For example, in iPadOS, people expect to use the built-in edge swipe gesture; in macOS, you can include a show/hide button or add Show Sidebar and Hide Sidebar commands to your app’s View menu. In visionOS, a window typically expands to accommodate a sidebar, so people rarely need to hide it. Avoid hiding the sidebar by default to ensure that it remains discoverable. + +**In general, show no more than two levels of hierarchy in a sidebar.** When a data hierarchy is deeper than two levels, consider using a split view interface that includes a content list between the sidebar items and detail view. + +**If you need to include two levels of hierarchy in a sidebar, use succinct, descriptive labels to title each group.** To help keep labels short, omit unnecessary words. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/sidebars#Platform-considerations) + + _No additional considerations for tvOS. Not supported in watchOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/sidebars#iOS) + +**Avoid using a sidebar.** A sidebar takes up a lot of space in landscape orientation and isn’t available in portrait orientation. Instead, consider using a [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars), which takes less space and remains visible in both orientations. + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/sidebars#iPadOS) + +When you use the [`sidebarAdaptable`](https://developer.apple.com/documentation/SwiftUI/TabViewStyle/sidebarAdaptable) style of tab view to present a sidebar, you choose whether to display a sidebar or a tab bar when your app opens. Both variations include a button that people can use to switch between them. This style also responds automatically to rotation and window resizing, providing a version of the control that’s appropriate to the width of the view. + +Developer note + +To display a sidebar only, use [`NavigationSplitView`](https://developer.apple.com/documentation/SwiftUI/NavigationSplitView) to present a sidebar in the primary pane of a split view, or use [`UISplitViewController`](https://developer.apple.com/documentation/UIKit/UISplitViewController). + +**Consider using a tab bar first.** A tab bar provides more space to feature content, and offers enough flexibility to navigate between many apps’ main areas. If you need to expose more areas than fit in a tab bar, the tab bar’s convertible sidebar-style appearance can provide access to content that people use less frequently. For guidance, see [Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars). + +**If necessary, apply the correct appearance to a sidebar.** If you’re not using SwiftUI to create a sidebar, you can use the [`UICollectionLayoutListConfiguration.Appearance.sidebar`](https://developer.apple.com/documentation/UIKit/UICollectionLayoutListConfiguration-swift.struct/Appearance-swift.enum/sidebar) appearance of a collection view list layout. For developer guidance, see [`UICollectionLayoutListConfiguration.Appearance`](https://developer.apple.com/documentation/UIKit/UICollectionLayoutListConfiguration-swift.struct/Appearance-swift.enum). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/sidebars#macOS) + +A sidebar’s row height, text, and glyph size depend on its overall size, which can be small, medium, or large. You can set the size programmatically, but people can also change it by selecting a different sidebar icon size in General settings. + +**Avoid stylizing your app by specifying a fixed color for all sidebar icons.** By default, sidebar icons use the current [accent color](https://developer.apple.com/design/human-interface-guidelines/color#App-accent-colors) and people expect to see their chosen accent color throughout all the apps they use. Although a fixed color can help clarify the meaning of an icon, you want to make sure that most sidebar icons display the color people choose. + +**Consider automatically hiding and revealing a sidebar when its container window resizes.** For example, reducing the size of a Mail viewer window can automatically collapse its sidebar, making more room for message content. + +**Avoid putting critical information or actions at the bottom of a sidebar.** People often relocate a window in a way that hides its bottom edge. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/sidebars#visionOS) + +**If your app’s hierarchy is deep, consider using a sidebar within a tab in a tab bar.** In this situation, a sidebar can support secondary navigation within the tab. If you do this, be sure to prevent selections in the sidebar from changing which tab is currently open. + +![A partial screenshot of the Music app in visionOS. The app's window includes a sidebar for navigating the music library, and the secondary pane includes a grid of playlists.](https://docs-assets.developer.apple.com/published/5e381525f4cccac8e9eb979fe4c984c6/visionos-sidebar-music%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/sidebars#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/sidebars#Related) + +[Split views](https://developer.apple.com/design/human-interface-guidelines/split-views) + +[Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/sidebars#Developer-documentation) + +[`sidebarAdaptable`](https://developer.apple.com/documentation/SwiftUI/TabViewStyle/sidebarAdaptable) — SwiftUI + +[`NavigationSplitView`](https://developer.apple.com/documentation/SwiftUI/NavigationSplitView) — SwiftUI + +[`sidebar`](https://developer.apple.com/documentation/SwiftUI/ListStyle/sidebar) — SwiftUI + +[`UICollectionLayoutListConfiguration`](https://developer.apple.com/documentation/UIKit/UICollectionLayoutListConfiguration-swift.struct) — UIKit + +[`NSSplitViewController`](https://developer.apple.com/documentation/AppKit/NSSplitViewController) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/sidebars#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/873F40BE-101A-4C0D-99F0-F5C7CE7B47A3/10046_wide_250x141_1x.jpg) Elevate the design of your iPad app ](https://developer.apple.com/videos/play/wwdc2025/208) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/sidebars#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added guidance for extending content beneath the sidebar. +August 6, 2024| Updated guidance to include the SwiftUI adaptable sidebar style. +December 5, 2023| Added artwork for iPadOS. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-components-layout/references/split-views.md b/skills/hig-components-layout/references/split-views.md new file mode 100644 index 00000000..2dc62e1d --- /dev/null +++ b/skills/hig-components-layout/references/split-views.md @@ -0,0 +1,110 @@ +--- +title: "Split views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/split-views + +# Split views + +A split view manages the presentation of multiple adjacent panes of content, each of which can contain a variety of components, including tables, collections, images, and custom views. + +![A stylized representation of a window consisting of three areas: a sidebar, a canvas, and an inspector. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/68c529d6dd40b4b46f1862f1cdbadec4/components-split-view-intro%402x.png) + +Typically, you use a split view to show multiple levels of your app’s hierarchy at once and support navigation between them. In this scenario, selecting an item in the view’s primary pane displays the item’s contents in the secondary pane. Similarly, a split view can display a tertiary pane if items in the secondary pane contain additional content. + +It’s common to use a split view to display a [sidebar](https://developer.apple.com/design/human-interface-guidelines/sidebars) for navigation, where the leading pane lists the top-level items or collections in an app, and the secondary and optional tertiary panes can present child collections and item details. Rarely, you might also use a split view to provide groups of functionality that supplement the primary view — for example, Keynote in macOS uses split view panes to present the slide navigator, the presenter notes, and the inspector pane in areas that surround the main slide canvas. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/split-views#Best-practices) + +**To support navigation, persistently highlight the current selection in each pane that leads to the detail view.** The selected appearance clarifies the relationship between the content in various panes and helps people stay oriented. + +**Consider letting people drag and drop content between panes.** Because a split view provides access to multiple levels of hierarchy, people can conveniently move content from one part of your app to another by dragging items to different panes. For guidance, see [Drag and drop](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/split-views#Platform-considerations) + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/split-views#iOS) + +**Prefer using a split view in a regular — not a compact — environment.** A split view needs horizontal space in which to display multiple panes. In a compact environment, such as iPhone in portrait orientation, it’s difficult to display multiple panes without wrapping or truncating the content, making it less legible and harder to interact with. + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/split-views#iPadOS) + +In iPadOS, a split view can include either two vertical panes, like Mail, or three vertical panes, like Keynote. + +**Account for narrow, compact, and intermediate window widths.** Since iPad windows are fluidly resizable, it’s important to consider the design of a split view layout at multiple widths. In particular, ensure that it’s possible to navigate between the various panes in a logical way. For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout). For developer guidance, see [`NavigationSplitView`](https://developer.apple.com/documentation/SwiftUI/NavigationSplitView) and [`UISplitViewController`](https://developer.apple.com/documentation/UIKit/UISplitViewController). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/split-views#macOS) + +In macOS, you can arrange the panes of a split view vertically, horizontally, or both. A split view includes dividers between panes that can support dragging to resize them. For developer guidance, see [`VSplitView`](https://developer.apple.com/documentation/SwiftUI/VSplitView) and [`HSplitView`](https://developer.apple.com/documentation/SwiftUI/HSplitView). + + * Vertical + * Horizontal + * Multiple + + + +![An illustration of a laptop screen that shows two panes stacked vertically.](https://docs-assets.developer.apple.com/published/8c23f101a012db47a8e2350e50432617/vertical-split-view%402x.png) + +![An illustration of a laptop screen that shows two panes arranged side by side, with a narrower pane on the left and a wider pane on the right.](https://docs-assets.developer.apple.com/published/713be8f9e61a9578b26087ad71ca6b23/horizontal-split-view%402x.png) + +![An illustration of a laptop screen divided into three panes, split both vertically and horizontally.](https://docs-assets.developer.apple.com/published/3e315fbb8f8ade8b2d3d4f105f8c4482/multiple-split-view%402x.png) + +**Set reasonable defaults for minimum and maximum pane sizes.** If people can resize the panes in your app’s split view, make sure to use sizes that keep the divider visible. If a pane gets too small, the divider can seem to disappear, becoming difficult to use. + +**Consider letting people hide a pane when it makes sense.** If your app includes an editing area, for example, consider letting people hide other panes to reduce distractions or allow more room for editing — in Keynote, people can hide the navigator and presenter notes panes when they want to edit slide content. + +**Provide multiple ways to reveal hidden panes.** For example, you might provide a toolbar button or a menu command — including a keyboard shortcut — that people can use to restore a hidden pane. + +**Prefer the thin divider style.** The thin divider measures one point in width, giving you maximum space for content while remaining easy for people to use. Avoid using thicker divider styles unless you have a specific need. For example, if both sides of a divider present table rows that use strong linear elements that might make a thin divider hard to distinguish, it might work to use a thicker divider. For developer guidance, see [`NSSplitView.DividerStyle`](https://developer.apple.com/documentation/AppKit/NSSplitView/DividerStyle-swift.enum). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/split-views#tvOS) + +In tvOS, a split view can work well to help people filter content. When people choose a filter category in the primary pane, your app can display the results in the secondary pane. + +**Choose a split view layout that keeps the panes looking balanced.** By default, a split view devotes a third of the screen width to the primary pane and two-thirds to the secondary pane, but you can also specify a half-and-half layout. + +**Display a single title above a split view, helping people understand the content as a whole.** People already know how to use a split view to navigate and filter content; they don’t need titles that describe what each pane contains. + +**Choose the title’s alignment based on the type of content the secondary pane contains.** Specifically, when the secondary pane contains a content collection, consider centering the title in the window. In contrast, if the secondary pane contains a single main view of important content, consider placing the title above the primary view to give the content more room. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/split-views#visionOS) + +**To display supplementary information, prefer a split view instead of a new window.** A split view gives people convenient access to more information without leaving the current context, whereas a new window may confuse people who are trying to navigate or reposition content. Opening more windows also requires you to carefully manage the relationship between views in your app or game. If you need to request a small amount of information or present a simple task that someone must complete before returning to their main task, use a [sheet](https://developer.apple.com/design/human-interface-guidelines/sheets). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/split-views#watchOS) + +In watchOS, the split view displays either the list view or a detail view as a full-screen view. + +**Automatically display the most relevant detail view.** When your app launches, show people the most pertinent information. For example, display information relevant to their location, the time, or their recent actions. + +**If your app displays multiple detail pages, place the detail views in a vertical[tab view](https://developer.apple.com/design/human-interface-guidelines/tab-views).** People can then use the Digital Crown to scroll between the detail view’s tabs. watchOS also displays a page indicator next to the Digital Crown, indicating the number of tabs and the currently selected tab. + +![A screenshot showing a detail view with a vertical tab on Apple Watch. The page indicator next to the Digital Crown shows that the fifth tab is currently selected.](https://docs-assets.developer.apple.com/published/3f36258648d54880e800568e88b5076b/split-view-watch-vertical-tab%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/split-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/split-views#Related) + +[Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars) + +[Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/split-views#Developer-documentation) + +[`NavigationSplitView`](https://developer.apple.com/documentation/SwiftUI/NavigationSplitView) — SwiftUI + +[`UISplitViewController`](https://developer.apple.com/documentation/UIKit/UISplitViewController) — UIKit + +[`NSSplitViewController`](https://developer.apple.com/documentation/AppKit/NSSplitViewController) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/split-views#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/A8CAF870-197F-4982-83D8-56513E5D7D0B/10000_wide_250x141_1x.jpg) Make your UIKit app more flexible ](https://developer.apple.com/videos/play/wwdc2025/282) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/split-views#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added iOS and iPadOS platform considerations. +December 5, 2023| Added guidance for split views in visionOS. +June 5, 2023| Added guidance for split views in watchOS. + diff --git a/skills/hig-components-layout/references/tab-bars.md b/skills/hig-components-layout/references/tab-bars.md new file mode 100644 index 00000000..4d42f566 --- /dev/null +++ b/skills/hig-components-layout/references/tab-bars.md @@ -0,0 +1,173 @@ +--- +title: "Tab bars | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/tab-bars + +# Tab bars + +A tab bar lets people navigate between top-level sections of your app. + +![A stylized representation of a tab bar containing four placeholder icons with names. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8737d6baf5cdb223521eb4dbe3cb45e5/components-tab-bar-intro%402x.png) + +Tab bars help people understand the different types of information or functionality that an app provides. They also let people quickly switch between sections of the view while preserving the current navigation state within each section. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/tab-bars#Best-practices) + +**Use a tab bar to support navigation, not to provide actions.** A tab bar lets people navigate among different sections of an app, like the Alarm, Stopwatch, and Timer tabs in the Clock app. If you need to provide controls that act on elements in the current view, use a [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars) instead. + +**Make sure the tab bar is visible when people navigate to different sections of your app.** If you hide the tab bar, people can forget which area of the app they’re in. The exception is when a modal view covers the tab bar, because a modal is temporary and self-contained. + +**Use the appropriate number of tabs required to help people navigate your app.** As a representation of your app’s hierarchy, it’s important to weigh the complexity of additional tabs against the need for people to frequently access each section; keep in mind that it’s generally easier to navigate among fewer tabs. Where available, consider a sidebar or a tab bar that adapts to a sidebar as an alternative for an app with a complex information structure. + +**Avoid overflow tabs.** Depending on device size and orientation, the number of visible tabs can be smaller than the total number of tabs. If horizontal space limits the number of visible tabs, the trailing tab becomes a More tab in iOS and iPadOS, revealing the remaining items in a separate list. The More tab makes it harder for people to reach and notice content on tabs that are hidden, so limit scenarios in your app where this can happen. + +**Don’t disable or hide tab bar buttons, even when their content is unavailable.** Having tab bar buttons available in some cases but not others makes your app’s interface appear unstable and unpredictable. If a section is empty, explain why its content is unavailable. + +**Include tab labels to help with navigation.** A tab label appears beneath or beside a tab bar icon, and can aid navigation by clearly describing the type of content or functionality the tab contains. Use single words whenever possible. + +**Consider using SF Symbols to provide familiar, scalable tab bar icons.** When you use [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols), tab bar icons automatically adapt to different contexts. For example, the tab bar can be regular or compact, depending on the device and orientation. Tab bar icons appear above tab labels in compact views, whereas in regular views, the icons and labels appear side by side. Prefer filled symbols or icons for consistency with the platform. + +![An illustration of two iPhone devices side by side. The first iPhone is in landscape orientation with a tab bar at the bottom of the screen, with tab bar icons on the leading edge of each tab and tab labels on the trailing edge. The second iPhone is in portrait orientation with a tab bar at the bottom of the screen, with tab bar icons above their respective tab labels.](https://docs-assets.developer.apple.com/published/6871e7b24b6da37f753c61deba02c8ab/tab-bar-landscape%402x.png) + +If you’re creating custom tab bar icons, see [Apple Design Resources](https://developer.apple.com/design/resources/) for tab bar icon dimensions. + +![A diagram of a tab bar, with callouts indicating the location of the tab bar icon and tab label.](https://docs-assets.developer.apple.com/published/eb47e442c964d54ed32f9324c71511d1/tab-bar-anatomy-callouts%402x.png) + +**Use a badge to indicate that critical information is available.** You can display a badge — a red oval containing white text and either a number or an exclamation point — on a tab to indicate that there’s new or updated information in the section that warrants a person’s attention. Reserve badges for critical information so you don’t dilute their impact and meaning. For guidance, see [Notifications](https://developer.apple.com/design/human-interface-guidelines/notifications). + +![An illustration of the bottom half of an iPhone in portrait orientation, with a tab bar at the bottom of the screen. Two of the tabs have red circular badges attached, indicating the presence of critical information.](https://docs-assets.developer.apple.com/published/29a93bc69eaa415e2e3d5440474a8d36/tab-bar-badges-iphone%402x.png) + +**Avoid applying a similar color to tab labels and content layer backgrounds.** If your app already has bright, colorful content in the content layer, prefer a monochromatic appearance for tab bars, or choose an accent color with sufficient visual differentiation. For more guidance, see [Liquid Glass color](https://developer.apple.com/design/human-interface-guidelines/color#Liquid-Glass-color). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/tab-bars#Platform-considerations) + + _No additional considerations for macOS. Not supported in watchOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/tab-bars#iOS) + +A tab bar floats above content at the bottom of the screen. Its items rest on a [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) background that allows content beneath to peek through. + +For tab bars with an attached accessory, like the MiniPlayer in Music, you can choose to minimize the tab bar and move the accessory inline with it when a person scrolls down. A person can exit the minimized state by tapping a tab or scrolling to the top of the view. For developer guidance, see [`TabBarMinimizeBehavior`](https://developer.apple.com/documentation/SwiftUI/TabBarMinimizeBehavior) and [`UITabBarController.MinimizeBehavior`](https://developer.apple.com/documentation/UIKit/UITabBarController/MinimizeBehavior). + +![An illustration of the bottom half of an iPhone in portrait orientation, with the Music app open. The MiniPlayer is open above the tab bar at the bottom of the screen.](https://docs-assets.developer.apple.com/published/1b8fb04a802aacd9c9f46ba7b16be080/tab-bar-with-accessory-expanded%402x.png) + +A tab bar with an attached accessory, expanded + +![An illustration of the bottom half of an iPhone in portrait orientation, with the Music app open. The tab bar is minimized into the currently open tab at the leading bottom corner of the screen, with the MiniPlayer at the bottom center, and the search tab in the trailing corner.](https://docs-assets.developer.apple.com/published/d074ff4013a38155a887ceeecf2417fa/tab-bar-with-accessory-collapsed%402x.png) + +A tab bar with an attached accessory, minimized + +A tab bar can include a distinct search item at the trailing end. For guidance, see [Search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields). + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/tab-bars#iPadOS) + +The system displays a tab bar near the top of the screen. You can choose to have the tab bar appear as a fixed element, or with a button that converts it to a sidebar. For developer guidance, see [`tabBarOnly`](https://developer.apple.com/documentation/SwiftUI/TabViewStyle/tabBarOnly) and [`sidebarAdaptable`](https://developer.apple.com/documentation/SwiftUI/TabViewStyle/sidebarAdaptable). + + * Tab bar + * Sidebar + + + +![A screenshot showing the Music app on iPad with the tab bar near the top of the screen.](https://docs-assets.developer.apple.com/published/66af6b050f67a05a82c5df2acb99913a/ipad-tab-bar-music-app%402x.png) + +![A screenshot showing the Music app on iPad with the tab bar converted to a sidebar on the leading edge of the screen.](https://docs-assets.developer.apple.com/published/cb52cc194e4067efff244c3b991a02a4/ipad-sidebar-music-app%402x.png) + +Note + +To present a sidebar without the option to convert it to a tab bar, use a [navigation split view](https://developer.apple.com/documentation/swiftui/navigationsplitview) instead of a tab view. For guidance, see [Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars). + +**Prefer a tab bar for navigation.** A tab bar provides access to the sections of your app that people use most. If your app is more complex, you can provide the option to convert the tab bar to a sidebar so people can access a wider set of navigation options. + +**Let people customize the tab bar.** In apps with a lot of sections that people might want to access, it can be useful to let people select items that they use frequently and add them to the tab bar, or remove items that they use less frequently. For example, in the Music app, a person can choose a favorite playlist to display in the tab bar. If you let people select their own tabs, aim for a default list of five or fewer to preserve continuity between compact and regular view sizes. For developer guidance, see [`TabViewCustomization`](https://developer.apple.com/documentation/SwiftUI/TabViewCustomization) and [`UITab.Placement`](https://developer.apple.com/documentation/UIKit/UITab/Placement). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/tab-bars#tvOS) + +A tab bar is highly customizable. For example, you can: + + * Specify a tint, color, or image for the tab bar background + + * Choose a font for tab items, including a different font for the selected item + + * Specify tints for selected and unselected items + + * Add button icons, like settings and search + + + + +By default, a tab bar is translucent, and only the selected tab is opaque. When people use the remote to focus on the tab bar, the selected tab includes a drop shadow that emphasizes its selected state. The height of a tab bar is 68 points, and its top edge is 46 points from the top of the screen; you can’t change either of these values. + +If there are more items than can fit in the tab bar, the system truncates the rightmost item by applying a fade effect that begins at the right side of the tab bar. If there are enough items to cause scrolling, the system also applies a truncating fade effect that starts from the left side. + +**Be aware of tab bar scrolling behaviors.** By default, people can scroll the tab bar offscreen when the current tab contains a single main view. You can see examples of this behavior in the Watch Now, Movies, TV Show, Sports, and Kids tabs in the TV app. The exception is when a screen contains a split view, such as the TV app’s Library tab or an app’s Settings screen. In this case, the tab bar remains pinned at the top of the view while people scroll the content within the primary and secondary panes of the split view. Regardless of a tab’s contents, focus always returns to the tab bar at the top of the page when people press Menu on the remote. + +**In a live-viewing app, organize tabs in a consistent way.** For the best experience, organize content in live-streaming apps with tabs in the following order: + + * Live content + + * Cloud DVR or other recorded content + + * Other content + + + + +For additional guidance, see [Live-viewing apps](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/tab-bars#visionOS) + +In visionOS, a tab bar is always vertical, floating in a position that’s fixed relative to the window’s leading side. When people look at a tab bar, it automatically expands; to open a specific tab, people look at the tab and tap. While a tab bar is expanded, it can temporarily obscure the content behind it. + +Video with custom controls. + +Content description: A recording showing a closeup of a tab bar along the side of an app's window in visionOS. The tab bar includes only symbols. The currently selected tab receives the hover effect, showing that someone is looking at it, and the bar expands to display both symbols and labels. + +Play + +**Supply a symbol and a text label for each tab.** A tab’s symbol is always visible in the tab bar. When people look at the tab bar, the system reveals tab labels, too. Even though the tab bar expands, you need to keep tab labels short so people can read them at a glance. + +![A screenshot showing a collapsed tab bar containing only symbols.](https://docs-assets.developer.apple.com/published/60282ea47a438f5b2bd84705212b44e4/visionos-tab-bar-collapsed%402x.png)Collapsed + +![A screenshot showing an expanded tab bar containing both symbols and labels.](https://docs-assets.developer.apple.com/published/df1a14ce3d5e2743bfdfb0fea47fc340/visionos-tab-bar-expanded%402x.png)Expanded + +**If it makes sense in your app, consider using a sidebar within a tab.** If your app’s hierarchy is deep, you might want to use a [sidebar](https://developer.apple.com/design/human-interface-guidelines/sidebars) to support secondary navigation within a tab. If you do this, be sure to prevent selections in the sidebar from changing which tab is currently open. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/tab-bars#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/tab-bars#Related) + +[Tab views](https://developer.apple.com/design/human-interface-guidelines/tab-views) + +[Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars) + +[Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars) + +[Materials](https://developer.apple.com/design/human-interface-guidelines/materials) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/tab-bars#Developer-documentation) + +[`TabView`](https://developer.apple.com/documentation/SwiftUI/TabView) — SwiftUI + +[`TabViewBottomAccessoryPlacement`](https://developer.apple.com/documentation/SwiftUI/TabViewBottomAccessoryPlacement) — SwiftUI + +[Enhancing your app’s content with tab navigation](https://developer.apple.com/documentation/SwiftUI/Enhancing-your-app-content-with-tab-navigation) — SwiftUI + +[`UITabBar`](https://developer.apple.com/documentation/UIKit/UITabBar) — UIKit + +[Elevating your iPad app with a tab bar and sidebar](https://developer.apple.com/documentation/UIKit/elevating-your-ipad-app-with-a-tab-bar-and-sidebar) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/tab-bars#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/873F40BE-101A-4C0D-99F0-F5C7CE7B47A3/10046_wide_250x141_1x.jpg) Elevate the design of your iPad app ](https://developer.apple.com/videos/play/wwdc2025/208) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/tab-bars#Change-log) + +Date| Changes +---|--- +December 16, 2025| Updated guidance for Liquid Glass. +July 28, 2025| Added guidance for Liquid Glass. +September 9, 2024| Added art representing the tab bar in iPadOS 18. +August 6, 2024| Updated with guidance for the tab bar in iPadOS 18. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-components-layout/references/tab-views.md b/skills/hig-components-layout/references/tab-views.md new file mode 100644 index 00000000..fb3b0310 --- /dev/null +++ b/skills/hig-components-layout/references/tab-views.md @@ -0,0 +1,68 @@ +--- +title: "Tab views | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/tab-views + +# Tab views + +A tab view presents multiple mutually exclusive panes of content in the same area, which people can switch between using a tabbed control. + +![A stylized representation of a view with two labeled tabs, the first of which is selected. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/4b2dbd07b3c6fe1d349d6db6aad5890b/components-tab-view-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/tab-views#Best-practices) + +**Use a tab view to present closely related areas of content.** The appearance of a tab view provides a strong visual indication of enclosure. People expect each tab to display content that is in some way similar or related to the content in the other tabs. + +**Make sure the controls within a pane affect content only in the same pane.** Panes are mutually exclusive, so ensure they’re fully self-contained. + +**Provide a label for each tab that describes the contents of its pane.** A good label helps people predict the contents of a pane before clicking or tapping its tab. In general, use nouns or short noun phrases for tab labels. A verb or short verb phrase may make sense in some contexts. Use title-style capitalization for tab labels. + +**Avoid using a pop-up button to switch between tabs.** A tabbed control is efficient because it requires a single click or tap to make a selection, whereas a pop-up button requires two. A tabbed control also presents all choices onscreen at the same time, whereas people must click a pop-up button to see its choices. Note that a pop-up button can be a reasonable alternative in cases where there are too many panes of content to reasonably display with tabs. + +**Avoid providing more than six tabs in a tab view.** Having more than six tabs can be overwhelming and create layout issues. If you need to present six or more tabs, consider another way to implement the interface. For example, you could instead present each tab as a view option in a pop-up button menu. + +For developer guidance, see [`NSTabView`](https://developer.apple.com/documentation/AppKit/NSTabView). + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/tab-views#Anatomy) + +The tabbed control appears on the top edge of the content area. You can choose to hide the control, which is appropriate for an app that switches between panes programmatically. + +![An illustration of a window in which a three-tab tabbed control is centered on the top edge of the content view.](https://docs-assets.developer.apple.com/published/05bb7fbc6365c3bab10db218644756c3/tab-views-top%402x.png) + +When you hide the tabbed control, the content area can be borderless, bezeled, or bordered with a line. A borderless view can be solid or transparent. + +**In general, inset a tab view by leaving a margin of window-body area on all sides of a tab view.** This layout looks clean and leaves room for additional controls that aren’t directly related to the contents of the tab view. You can extend a tab view to meet the window edges, but this layout is unusual. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/tab-views#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, or visionOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/tab-views#iOS-iPadOS) + +For similar functionality, consider using a [segmented control](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) instead. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/tab-views#watchOS) + +watchOS displays tab views using [page controls](https://developer.apple.com/design/human-interface-guidelines/components/presentation/page-controls). For developer guidance, see [`TabView`](https://developer.apple.com/documentation/SwiftUI/TabView) and [`verticalPage`](https://developer.apple.com/documentation/SwiftUI/TabViewStyle/verticalPage). + +![An illustration showing the page control next to the Digital Crown on Apple Watch. The current dot is enlarged, indicating that people can scroll through the current content, as well as scroll between pages.](https://docs-assets.developer.apple.com/published/10938a94cb663210f148e0fbce431e70/tab-view-watch-vertical%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/tab-views#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/tab-views#Related) + +[Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars) + +[Segmented controls](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/tab-views#Developer-documentation) + +[`TabView`](https://developer.apple.com/documentation/SwiftUI/TabView) — SwiftUI + +[`NSTabView`](https://developer.apple.com/documentation/AppKit/NSTabView) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/tab-views#Change-log) + +Date| Changes +---|--- +June 5, 2023| Added guidance for using tab views in watchOS. + diff --git a/skills/hig-components-layout/references/windows.md b/skills/hig-components-layout/references/windows.md new file mode 100644 index 00000000..17fd3813 --- /dev/null +++ b/skills/hig-components-layout/references/windows.md @@ -0,0 +1,188 @@ +--- +title: "Windows | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/windows + +# Windows + +A window presents UI views and components in your app or game. + +![A stylized representation of a window with close, minimize, and full-screen buttons. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/3c5ea22db1d7d414c160c95ed7f62ec9/components-window-intro%402x.png) + +In iPadOS, macOS, and visionOS, windows help define the visual boundaries of app content and separate it from other areas of the system, and enable multitasking workflows both within and between apps. Windows include system-provided interface elements such as frames and window controls that let people open, close, resize, and relocate them. + +Conceptually, apps use two types of windows to display content: + + * A _primary_ window presents the main navigation and content of an app, and actions associated with them. + + * An _auxiliary_ window presents a specific task or area in an app. Dedicated to one experience, an auxiliary window doesn’t allow navigation to other app areas, and it typically includes a button people use to close it after completing the task. + + + + +For guidance laying out content within a window on any platform, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout); for guidance laying out content in Apple Vision Pro space, see [Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout). For developer guidance, see [Windows](https://developer.apple.com/documentation/SwiftUI/Windows). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/windows#Best-practices) + +**Make sure that your windows adapt fluidly to different sizes to support multitasking and multiwindow workflows.** For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) and [Multitasking](https://developer.apple.com/design/human-interface-guidelines/multitasking). + +**Choose the right moment to open a new window.** Opening content in a separate window is great for helping people multitask or preserve context. For example, Mail opens a new window whenever someone selects the Compose action, so both the new message and the existing email are visible at the same time. However, opening new windows excessively creates clutter and can make navigating your app more confusing. Avoid opening new windows as default behavior unless it makes sense for your app. + +**Consider providing the option to view content in a new window.** While it’s best to avoid opening new windows as default behavior unless it benefits your user experience, it’s also great to give people the flexibility of viewing content in multiple ways. Consider letting people view content in a new window using a command in a [context menu](https://developer.apple.com/design/human-interface-guidelines/context-menus) or in the [File menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#File-menu). For developer guidance, see [`OpenWindowAction`](https://developer.apple.com/documentation/SwiftUI/OpenWindowAction). + +**Avoid creating custom window UI.** System-provided windows look and behave in a way that people understand and recognize. Avoid making custom window frames or controls, and don’t try to replicate the system-provided appearance. Doing so without perfectly matching the system’s look and behavior can make your app feel broken. + +**Use the term _window_ in user-facing content.** The system refers to app windows as _windows_ regardless of type. Using different terms — including _scene_ , which refers to window implementation — is likely to confuse people. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/windows#Platform-considerations) + + _Not supported in iOS, tvOS, or watchOS._ + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/windows#iPadOS) + +Windows present in one of two ways depending on a person’s choice in Multitasking & Gestures settings. + + * **Full screen.** App windows fill the entire screen, and people switch between them — or between multiple windows of the same app — using the app switcher. + + * **Windowed.** People can freely resize app windows. Multiple windows can be onscreen at once, and people can reposition them and bring them to the front. The system remembers window size and placement even when an app is closed. + + + + + * Full screen + * Windowed + + + +![A screenshot of the Notes app in full screen on iPad, with an open document titled Nature Walks. The app interface fills the entire screen, with no visible border to the window.](https://docs-assets.developer.apple.com/published/5daa697ab73d7e08de1e4fa78a56bfcb/windows-ipad-notes-fullscreen%402x.png) + +![A screenshot of the Notes app in a window on iPad, with an open document titled Nature Walks. The document window occupies the center of the screen, with the Home Screen background filling the rest of the screen behind it, and the Dock at the bottom.](https://docs-assets.developer.apple.com/published/0d1eca9806c6d60816eb9b6f436c28d3/windows-ipad-notes-windowed%402x.png) + +**Make sure window controls don’t overlap toolbar items.** When windowed, app windows include window controls at the leading edge of the toolbar. If your app has toolbar buttons at the leading edge, they might be hidden by window controls when they appear. To prevent this, instead of placing buttons directly on the leading edge, move them inward when the window controls appear. + +**Consider letting people use a gesture to open content in a new window.** For example, people can use the pinch gesture to expand a Notes item into a new window. For developer guidance, see [`collectionView(_:sceneActivationConfigurationForItemAt:point:)`](https://developer.apple.com/documentation/UIKit/UICollectionViewDelegate/collectionView\(_:sceneActivationConfigurationForItemAt:point:\)) (to transition from a collection view item), or [`UIWindowScene.ActivationInteraction`](https://developer.apple.com/documentation/UIKit/UIWindowScene/ActivationInteraction) (to transition from an item in any other view). + +Tip + +If 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`](https://developer.apple.com/documentation/QuickLook/QLPreviewSceneActivationConfiguration). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/windows#macOS) + +In macOS, people typically run several apps at the same time, often viewing windows from multiple apps on one desktop and switching frequently between different windows — moving, resizing, minimizing, and revealing the windows to suit their work style. + +To learn about setting up a window to display your game in macOS, see [Managing your game window for Metal in macOS](https://developer.apple.com/documentation/Metal/managing-your-game-window-for-metal-in-macos). + +#### [macOS window anatomy](https://developer.apple.com/design/human-interface-guidelines/windows#macOS-window-anatomy) + +A macOS window consists of a frame and a body area. People can move a window by dragging the frame and can often resize the window by dragging its edges. + +The _frame_ of a window appears above the body area and can include window controls and a [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars). In rare cases, a window can also display a bottom bar, which is a part of the frame that appears below body content. + +#### [macOS window states](https://developer.apple.com/design/human-interface-guidelines/windows#macOS-window-states) + +A macOS window can have one of three states: + + * **Main.** The frontmost window that people view is an app’s main window. There can be only one main window per app. + + * **Key.** Also called the _active window_ , the key window accepts people’s input. There can be only one key window onscreen at a time. Although the front app’s main window is usually the key window, another window — such as a panel floating above the main window — might be key instead. People typically click a window to make it key; when people click an app’s Dock icon to bring all of that app’s windows forward, only the most recently accessed window becomes key. + + * **Inactive.** A window that’s not in the foreground is an inactive window. + + + + +The system gives main, key, and inactive windows different appearances to help people visually identify them. For example, the key window uses color in the title bar options for closing, minimizing, and zooming; inactive windows and main windows that aren’t key use gray in these options. Also, inactive windows don’t use [vibrancy](https://developer.apple.com/design/human-interface-guidelines/materials) (an effect that can pull color into a window from the content underneath it), which makes them appear subdued and seem visually farther away than the main and key windows. + +![An illustration of a stack of three windows, as follows: An inactive window in the background, an app’s main window in the middle, and a key window appearing above the other two windows.](https://docs-assets.developer.apple.com/published/7ecd910726f347fb452d9ecd2b492d22/window-states%402x.png) + +Note + +Some 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. + +**Make sure custom windows use the system-defined appearances.** People rely on the visual differences between windows to help them identify the foreground window and know which window will accept their input. When you use system-provided components, a window’s background and button appearances update automatically when the window changes state; if you use custom implementations, you need to do this work yourself. + +**Avoid putting critical information or actions in a bottom bar, because people often relocate a window in a way that hides its bottom edge.** If you must include one, use it only to display a small amount of information directly related to a window’s contents or to a selected item within it. For example, Finder uses a bottom bar (called the status bar) to display the total number of items in a window, the number of selected items, and how much space is available on the disk. A bottom bar is small, so if you have more information to display, consider using an inspector, which typically presents information on the trailing side of a split view. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS) + +visionOS defines two main window styles: default and volumetric. Both a default window (called a _window_) and a volumetric window (called a _volume_) can display 2D and 3D content, and people can view multiple windows and volumes at the same time in both the Shared Space and a Full Space. + +![An illustration representing a window in visionOS. The illustration consists of two parallel rounded rectangles, slightly separated and displayed on an angle, positioned above a window bar.](https://docs-assets.developer.apple.com/published/e8dc51484c2e5f3289a5f6a878f4c47d/visionos-window-style-2d-window%402x.png)A window + +![An illustration representing a volume in visionOS. The illustration consists of a translucent cube. The base of the cube is darker than the other sides. The front of the cube is positioned above a window bar.](https://docs-assets.developer.apple.com/published/92d953d099f72f9909c47bad408f4c9b/visionos-window-style-3d-volume%402x.png)A volume + +Note + +visionOS 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`](https://developer.apple.com/documentation/SwiftUI/PlainWindowStyle). + +The system defines the initial position of the first window or volume people open in your app or game. In both the Shared Space and a Full Space, people can move windows and volumes to new locations. + +#### [visionOS windows](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS-windows) + +The default window style consists of an upright plane that uses an unmodifiable background [material](https://developer.apple.com/design/human-interface-guidelines/materials) called _glass_ and includes a close button, window bar, and resize controls that let people close, move, and resize the window. A window can also include a Share button, [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars), [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars), and one or more [ornaments](https://developer.apple.com/design/human-interface-guidelines/ornaments). By default, visionOS uses dynamic [scale](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Scale) to help a window’s size appear to remain consistent regardless of its proximity to the viewer. For developer guidance, see [`DefaultWindowStyle`](https://developer.apple.com/documentation/SwiftUI/DefaultWindowStyle). + +![A screenshot of a window for an app named 'Hello World' in visionOS. The window includes text and buttons for entering different experiences.](https://docs-assets.developer.apple.com/published/95650cb19e1930e6b08ca5aa3b5b06a0/visionos-window-2d%402x.png)A window + +**Prefer using a window to present a familiar interface and to support familiar tasks.** Help people feel at home in your app by displaying an interface they’re already comfortable with, reserving more [immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences) for the meaningful content and activities you offer. If you want to showcase bounded 3D content like a game board, consider using a [volume](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS-volumes). + +**Retain the window’s glass background.** The default glass background helps your content feel like part of people’s surroundings while adapting dynamically to lighting and using specular reflections and shadows to communicate the window’s scale and position. Removing the glass material tends to cause UI elements and text to become less legible and to no longer appear related to each other; using an opaque background obscures people’s surroundings and can make a window feel constricting and heavy. + +**Choose an initial window size that minimizes empty areas within it.** By default, a window measures 1280x720 pt. When a window first opens, the system places it about two meters in front of the wearer, giving it an apparent width of about three meters. Too much empty space inside a window can make it look unnecessarily large while also obscuring other content in people’s space. + +**Aim for an initial shape that suits a window’s content.** For example, a default Keynote window is wide because slides are wide, whereas a default Safari window is tall because most webpages are much longer than they are wide. For games, a tower-building game is likely to open in a taller window than a driving game. + +**Choose a minimum and maximum size for each window to help keep your content looking great.** People appreciate being able to resize windows as they customize their space, but you need to make sure your layout adjusts well across all sizes. If you don’t set a minimum and maximum size for a window, people could make it so small that UI elements overlap or so large that your app or game becomes unusable. For developer guidance, see [Positioning and sizing windows](https://developer.apple.com/documentation/visionOS/positioning-and-sizing-windows). + +![A screenshot of a window for an app in visionOS. The window includes text that discusses objects in orbit, and it includes buttons for viewing a satellite, the moon, and a telescope. The satellite button is selected and a 3D satellite is displayed.](https://docs-assets.developer.apple.com/published/db1e41fe4000281898003f792ff037c8/visionos-window-2d-with-volume%402x.png)A window containing 3D content + +**Minimize the depth of 3D content you display in a window.** The system adds highlights and shadows to the views and controls within a window, giving them the appearance of [depth](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Depth) and helping them feel more substantial, especially when people view the window from an angle. Although you can display 3D content in a window, the system clips it if the content extends too far from the window’s surface. To display 3D content that has greater depth, use a volume. + +#### [visionOS volumes](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS-volumes) + +You can use a volume to display 2D or 3D content that people can view from any angle. A volume includes window-management controls just like a window, but unlike in a window, a volume’s close button and window bar shift position to face the viewer as they move around the volume. For developer guidance, see [`VolumetricWindowStyle`](https://developer.apple.com/documentation/SwiftUI/VolumetricWindowStyle). + +![A screenshot of a volume containing a 3D globe in visionOS, beside a window.](https://docs-assets.developer.apple.com/published/99098a290c36254e48329511216e1d5a/visionos-window-3d%402x.png)A volume + +**Prefer using a volume to display rich, 3D content.** In contrast, if you want to present a familiar, UI-centric interface, it generally works best to use a [window](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS-windows). + +**Place 2D content so it looks good from multiple angles.** Because a person’s perspective changes as they move around a volume, the location of 2D content within it might appear to change in ways that don’t make sense. To pin 2D content to specific areas of 3D content inside a volume, you can use an attachment. + +**In general, use dynamic scaling.** Dynamic scaling helps a volume’s content remain comfortably legible and easy to interact with, even when it’s far away from the viewer. On the other hand, if you want a volume’s content to represent a real-world object, like a product in a retail app, you can use fixed scaling (this is the default). + +**Take advantage of the default baseplate appearance to help people discern the edges of a volume.** In visionOS 2 and later, the system automatically makes a volume’s horizontal “floor,” or _baseplate_ , visible by displaying a gentle glow around its border when people look at it. If your content doesn’t fill the volume, the system-provided glow can help people become aware of the volume’s edges, which can be particularly useful in keeping the resize control easy to find. On the other hand, if your content is full bleed or fills the volume’s bounds — or if you display a custom baseplate appearance — you may not want the default glow. + +**Consider offering high-value content in an ornament.** In visionOS 2 and later, a volume can include an ornament in addition to a toolbar and tab bar. You can use an ornament to reduce clutter in a volume and elevate important views or controls. When you use an attachment anchor to specify the ornament’s location, such as `topBack` or `bottomFront`, the ornament remains in the same position, relative to the viewer’s perspective, as they move around the volume. Be sure to avoid placing an ornament on the same edge as a toolbar or tab bar, and prefer creating only one additional ornament to avoid overshadowing the important content in your volume. For developer guidance, see [`ornament(visibility:attachmentAnchor:contentAlignment:ornament:)`](https://developer.apple.com/documentation/SwiftUI/View/ornament\(visibility:attachmentAnchor:contentAlignment:ornament:\)). + +**Choose an alignment that supports the way people interact with your volume.** As people move a volume, the baseplate can remain parallel to the floor of a person’s surroundings, or it can tilt to match the angle at which a person is looking. In general, a volume that remains parallel to the floor works well for content that people don’t interact with much, whereas a volume that tilts to match where a person is looking can keep content comfortably usable, even when the viewer is reclining. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/windows#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/windows#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +[Split views](https://developer.apple.com/design/human-interface-guidelines/split-views) + +[Multitasking](https://developer.apple.com/design/human-interface-guidelines/multitasking) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/windows#Developer-documentation) + +[Windows](https://developer.apple.com/documentation/SwiftUI/Windows) — SwiftUI + +[`WindowGroup`](https://developer.apple.com/documentation/SwiftUI/WindowGroup) — SwiftUI + +[`UIWindow`](https://developer.apple.com/documentation/UIKit/UIWindow) — UIKit + +[`NSWindow`](https://developer.apple.com/documentation/AppKit/NSWindow) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/windows#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/873F40BE-101A-4C0D-99F0-F5C7CE7B47A3/10046_wide_250x141_1x.jpg) Elevate the design of your iPad app ](https://developer.apple.com/videos/play/wwdc2025/208) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/windows#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added best practices, and updated with guidance for resizable windows in iPadOS. +June 10, 2024| Updated to include guidance for using volumes in visionOS 2 and added game-specific examples. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-components-menus/SKILL.md b/skills/hig-components-menus/SKILL.md new file mode 100644 index 00000000..68305e7d --- /dev/null +++ b/skills/hig-components-menus/SKILL.md @@ -0,0 +1,81 @@ +--- +name: hig-components-menus +version: 1.0.0 +description: >- + Apple HIG guidance for menu and button components including menus, context menus, + dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, + pull-down buttons, disclosure controls, and standard buttons. Use this skill + when the user says "how should my buttons look," "what goes in the menu bar," + "should I use a context menu or action sheet," "how do I design a toolbar," or + asks about button design, menu design, context menu, toolbar, menu bar, action + button, pop-up button, pull-down button, disclosure control, dock menu, edit + menu, or any menu/button component layout and behavior. Cross-references: + hig-components-search, hig-components-controls, hig-components-dialogs. +--- + +# Apple HIG: Menus and Buttons + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Menus should be contextual and predictable.** Standard items in standard locations. Follow platform conventions for ordering and grouping. + +2. **Use standard button styles.** System-defined styles communicate affordance and maintain visual consistency. Prefer them over custom designs. + +3. **Toolbars for frequent actions.** Most commonly used commands in the toolbar. Rarely used actions belong in menus. + +4. **Menu bar is the primary command interface on macOS.** Every command reachable from the menu bar. Toolbars and context menus supplement, not replace. + +5. **Context menus for secondary actions.** Right-click or long-press, relevant to the item under the pointer. Never put a command only in a context menu. + +6. **Pop-up buttons for mutually exclusive choices.** Select exactly one option from a set. + +7. **Pull-down buttons for action lists.** No current selection; they offer a set of commands. + +8. **Action buttons consolidate related actions** behind a single icon in toolbars or title bars. + +9. **Disclosure controls for progressive disclosure.** Show or hide additional content. + +10. **Dock menus: short and focused** on the most useful actions when the app is running. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [menus.md](references/menus.md) | General menu design | Item ordering, grouping, shortcuts | +| [context-menus.md](references/context-menus.md) | Context menus | Right-click, long press, secondary actions | +| [dock-menus.md](references/dock-menus.md) | Dock menus | macOS app-level actions, running state | +| [edit-menus.md](references/edit-menus.md) | Edit menus | Undo, copy, paste, standard items | +| [the-menu-bar.md](references/the-menu-bar.md) | Menu bar | macOS primary command interface, structure | +| [toolbars.md](references/toolbars.md) | Toolbars | Frequent actions, customization, placement | +| [buttons.md](references/buttons.md) | Buttons | System styles, sizing, affordance | +| [action-button.md](references/action-button.md) | Action button | Grouped secondary actions, toolbar use | +| [pop-up-buttons.md](references/pop-up-buttons.md) | Pop-up buttons | Mutually exclusive choice selection | +| [pull-down-buttons.md](references/pull-down-buttons.md) | Pull-down buttons | Action lists, no current selection | +| [disclosure-controls.md](references/disclosure-controls.md) | Disclosure controls | Progressive disclosure, show/hide | + +## Output Format + +1. **Component recommendation** -- which menu or button type and why. +2. **Visual hierarchy** -- placement, sizing, grouping within the interface. +3. **Platform-specific behavior** across iOS, iPadOS, macOS, visionOS. +4. **Keyboard shortcuts** (macOS) -- standard and custom shortcuts for menu items and toolbar actions. + +## Questions to Ask + +1. Which platforms? +2. Primary or secondary action? +3. How many actions need to be available? +4. macOS menu bar app? + +## Related Skills + +- **hig-components-search** -- Search fields, page controls alongside toolbars and menus +- **hig-components-controls** -- Toggles, pickers, segmented controls complementing buttons +- **hig-components-dialogs** -- Alerts, sheets, popovers triggered by menu items or buttons +- **hig-inputs** -- Keyboard shortcuts and pointer interactions with menus and toolbars + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-menus/references/action-button.md b/skills/hig-components-menus/references/action-button.md new file mode 100644 index 00000000..77ae959c --- /dev/null +++ b/skills/hig-components-menus/references/action-button.md @@ -0,0 +1,61 @@ +--- +title: "Action button | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/action-button + +# Action button + +The Action button gives people quick access to their favorite features on supported iPhone and Apple Watch models. + +![A sketch of an arrow pointing toward the Action button on Apple Watch, suggesting initiating an action. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/e9f0fbe50cec4b4b3ac0ef5daa14e321/inputs-action-button-intro%402x.png) + +On a supported device, people can use the Action button to run [App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts) or access system-provided functionality, like turning the flashlight on or off. On Apple Watch Ultra, the Action button supports activity-related actions, including workouts and dives. + +A person chooses a function for the Action button when they set up their device; later, they can adjust this choice in Settings. When someone associates an App Shortcut with the Action button, pressing the button runs the App Shortcut similarly to using their voice with Siri or tapping it in Spotlight. + +When designing your app or game, think of the Action button as another way for someone to quickly access a function that they use on a regular basis. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/action-button#Best-practices) + +**Support the Action button with a set of your app’s essential functions.** For example, if your cooking app includes an egg timer, a “Start Egg Timer” action might be one that people want to initiate when they press the Action button. You don’t need to offer an App Shortcut that opens your app, because the system provides this function already. Your app icon, widgets, and Apple Watch complications give people other quick ways to open your app. For additional guidance, see [App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts). + +**For each action you support, write a short label that succinctly describes it.** People see your labels when they visit Settings to configure the Action button’s behavior. Create labels that use [title-style capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64), begin with a verb, use present tense, and exclude articles and prepositions. Keep labels as short as possible, with a maximum of three words. For example, use “Start Race” instead of “Started Race” or “Start the Race.” + +**Prefer letting the system show people how to use the Action button with your app.** When you support the Action button, the system automatically helps people configure it to initiate one of your app’s functions. Avoid creating content that repeats the guidance offered in Settings for the Action button, or other usage tips the system provides. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/action-button#Platform-considerations) + + _Not supported in iPadOS, macOS, tvOS, or visionOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/action-button#iOS) + +**Let people use your actions without leaving their current context.** When possible, make use of lightweight multitasking capabilities like [Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities) and custom snippets to provide functionality without opening your app. For example, the “Set Timer” action doesn’t launch the Clock app; it prompts people to set a duration for the timer, and then launches a Live Activity with the countdown. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/action-button#watchOS) + +In watchOS, a person can assign the Action button’s first press to drop a waypoint, start a dive, or begin a specific workout. Beyond a single button press, the Action button also supports secondary actions like marking a segment or transitioning to the next modality during a multi-part workout. + +**Consider offering a secondary function that supports or advances the primary action people choose.** People often use the Action button without looking at the screen, so a subsequent button press needs to flow logically from the first press, while also making sense in the current context. If your app supports workout or dive actions, consider designing a simple, intuitive secondary function that people can easily learn and remember. Consider carefully before you offer more than one secondary function, because doing so can increase people’s cognitive load and make your app seem harder to use. + +**Prefer using subsequent button presses to support additional functionality rather than to stop or conclude a function.** If you need to let people stop their main task — as opposed to pausing the current function — offer this option within your interface instead. + +**Pause the current function when people press the Action button and side button together.** The exception is in a diving app where pausing a dive may be dangerous to the diver, causing them to lose track of their depth or not understand how long they’ve been underwater. Unless pausing the current function results in a negative experience, be sure to meet people’s expectations by letting them pause their current activity when they press both buttons at the same time. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/action-button#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/action-button#Related) + +[Workouts](https://developer.apple.com/design/human-interface-guidelines/workouts) + +[Digital Crown](https://developer.apple.com/design/human-interface-guidelines/digital-crown) + +[App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts) + +[Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/action-button#Change-log) + +Date| Changes +---|--- +September 12, 2023| Updated to include guidance for iOS. +September 14, 2022| New page. + diff --git a/skills/hig-components-menus/references/buttons.md b/skills/hig-components-menus/references/buttons.md new file mode 100644 index 00000000..50dc8712 --- /dev/null +++ b/skills/hig-components-menus/references/buttons.md @@ -0,0 +1,261 @@ +--- +title: "Buttons | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/buttons + +# Buttons + +A button initiates an instantaneous action. + +![A stylized representation of two horizontally aligned buttons. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/15781cd4e57f0e78b7a388a3fa009fa8/components-buttons-intro%402x.png) + +Versatile and highly customizable, buttons give people simple, familiar ways to do tasks in your app. In general, a button combines three attributes to clearly communicate its function: + + * **Style.** A visual style based on size, color, and shape. + + * **Content.** A symbol (or icon), text label, or both that a button displays to convey its purpose. + + * **Role.** A system-defined role that identifies a button’s semantic meaning and can affect its appearance. + + + + +There are also many button-like components that have distinct appearances and behaviors for specific use cases, like [toggles](https://developer.apple.com/design/human-interface-guidelines/toggles), [pop-up buttons](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons), and [segmented controls](https://developer.apple.com/design/human-interface-guidelines/segmented-controls). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/buttons#Best-practices) + +When buttons are instantly recognizable and easy to understand, an app tends to feel intuitive and well designed. + +**Make buttons easy for people to use.** It’s essential to include enough space around a button so that people can visually distinguish it from surrounding components and content. Giving a button enough space is also critical for helping people select or activate it, regardless of the method of input they use. As a general rule, a button needs a hit region of at least 44x44 pt — in visionOS, 60x60 pt — to ensure that people can select it easily, whether they use a fingertip, a pointer, their eyes, or a remote. + +**Always include a press state for a custom button.** Without a press state, a button can feel unresponsive, making people wonder if it’s accepting their input. + +## [Style](https://developer.apple.com/design/human-interface-guidelines/buttons#Style) + +System buttons offer a range of styles that support customization while providing built-in interaction states, accessibility support, and appearance adaptation. Different platforms define different styles that help you communicate hierarchies of actions in your app. + +**In general, use a button that has a prominent visual style for the most likely action in a view.** To draw people’s attention to a specific button, use a prominent button style so the system can apply an accent color to the button’s background. Buttons that use color tend to be the most visually distinctive, helping people quickly identify the actions they’re most likely to use. Keep the number of prominent buttons to one or two per view. Presenting too many prominent buttons increases cognitive load, requiring people to spend more time considering options before making a choice. + +**Use style — not size — to visually distinguish the preferred choice among multiple options.** When you use buttons of the same size to offer two or more options, you signal that the options form a coherent set of choices. By contrast, placing two buttons of different sizes near each other can make the interface look confusing and inconsistent. If you want to highlight the preferred or most likely option in a set, use a more prominent button style for that option and a less prominent style for the remaining ones. + +**Avoid applying a similar color to button labels and content layer backgrounds.** If your app already has bright, colorful content in the content layer, prefer using the default monochromatic appearance of button labels. For more guidance, see [Liquid Glass color](https://developer.apple.com/design/human-interface-guidelines/color#Liquid-Glass-color). + +## [Content](https://developer.apple.com/design/human-interface-guidelines/buttons#Content) + +**Ensure that each button clearly communicates its purpose.** Depending on the platform, a button can contain a symbol (or icon), a text label, or both to help people understand what it does. + +Note + +In 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](https://developer.apple.com/design/human-interface-guidelines/offering-help). + +**Try to associate familiar actions with familiar icons.** For example, people can predict that a button containing the `square.and.arrow.up` symbol will help them perform share-related activities. If it makes sense to use an icon in your button, consider using an existing or customized [symbol](https://developer.apple.com/design/human-interface-guidelines/sf-symbols). For a list of symbols that represent common actions, see [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons). + +**Consider using text when a short label communicates more clearly than an icon.** To use text, write a few words that succinctly describe what the button does. Using [title-style capitalization](https://help.apple.com/applestyleguide/#/apsgb744e4a3?sub=apdca93e113f1d64), consider starting the label with a verb to help convey the button’s action — for example, a button that lets people add items to their shopping cart might use the label “Add to Cart.” + +## [Role](https://developer.apple.com/design/human-interface-guidelines/buttons#Role) + +A system button can have one of the following roles: + + * **Normal.** No specific meaning. + + * **Primary.** The button is the default button — the button people are most likely to choose. + + * **Cancel.** The button cancels the current action. + + * **Destructive.** The button performs an action that can result in data destruction. + + + + +A button’s role can have additional effects on its appearance. For example, a primary button uses an app’s accent color, whereas a destructive button uses the system red color. + +![An example alert with three system buttons, labeled Primary, Destructive, and Cancel. The primary button uses a blue accent color, the destructive button uses text in the system red color, and the cancel button appears as a standard button.](https://docs-assets.developer.apple.com/published/ffa011d457181b94f56257d7d59f71aa/buttons-roles-alert%402x.png) + +**Assign the primary role to the button people are most likely to choose.** When a primary button responds to the Return key, it makes it easy for people to quickly confirm their choice. In addition, when the button is in a temporary view — like a [sheet](https://developer.apple.com/design/human-interface-guidelines/sheets), an editable view, or an [alert](https://developer.apple.com/design/human-interface-guidelines/alerts) — assigning it the primary role means that the view can automatically close when people press Return. + +**Don’t assign the primary role to a button that performs a destructive action, even if that action is the most likely choice.** Because of its visual prominence, people sometimes choose a primary button without reading it first. Help people avoid losing content by assigning the primary role to nondestructive buttons. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/buttons#Platform-considerations) + + _No additional considerations for tvOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/buttons#iOS-iPadOS) + +**Configure a button to display an activity indicator when you need to provide feedback about an action that doesn’t instantly complete.** Displaying an activity indicator within a button can save space in your user interface while clearly communicating the reason for the delay. To help clarify what’s happening, you can also configure the button to display a different label alongside the activity indicator. For example, the label “Checkout” could change to “Checking out…” while the activity indicator is visible. When a delay occurs after people click or tap your configured button, the system displays the activity indicator next to the original or alternative label, hiding the button image, if there is one. + +![An illustration of a button labeled Checkout.](https://docs-assets.developer.apple.com/published/f7a2f53cdd4755b1121c34f1df0e94ae/button-activity-indicator-hidden%402x.png) + +![An illustration of a button labeled Checking out, with an activity indicator on the leading side of the label.](https://docs-assets.developer.apple.com/published/f2d6023f16eed80487f72b630903d220/button-activity-indicator-visible%402x.png) + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/buttons#macOS) + +Several specific button types are unique to macOS. + +#### [Push buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#Push-buttons) + +The standard button type in macOS is known as a _push button_. You can configure a push button to display text, a symbol, an icon, or an image, or a combination of text and image content. Push buttons can act as the default button in a view and you can tint them. + +**Use a flexible-height push button only when you need to display tall or variable height content.** Flexible-height buttons support the same configurations as regular push buttons — and they use the same corner radius and content padding — so they look consistent with other buttons in your interface. If you need to present a button that contains two lines of text or a tall icon, use a flexible-height button; otherwise, use a standard push button. For developer guidance, see [`NSButton.BezelStyle.flexiblePush`](https://developer.apple.com/documentation/AppKit/NSButton/BezelStyle-swift.enum/flexiblePush). + +**Append a trailing ellipsis to the title when a push button opens another window, view, or app.** Throughout the system, an ellipsis in a control title signals that people can provide additional input. For example, the Edit buttons in the AutoFill pane of Safari Settings include ellipses because they open other views that let people modify autofill values. + +**Consider supporting spring loading.** On systems with a Magic Trackpad, _spring loading_ lets people activate a button by dragging selected items over it and force clicking — that is, pressing harder — without dropping the selected items. After force clicking, people can continue dragging the items, possibly to perform additional actions. + +#### [Square buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#Square-buttons) + +A _square button_ (also known as a _gradient button_) initiates an action related to a view, like adding or removing rows in a table. + +Square buttons contain symbols or icons — not text — and you can configure them to behave like push buttons, toggles, or pop-up buttons. The buttons appear in close proximity to their associated view — usually within or beneath it — so people know which view the buttons affect. + +**Use square buttons in a view, not in the window frame.** Square buttons aren’t intended for use in toolbars or status bars. If you need a button in a [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars), use a toolbar item. + +**Prefer using a symbol in a square button.** [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) provides a wide range of symbols that automatically receive appropriate coloring in their default state and in response to user interaction. + +**Avoid using labels to introduce square buttons.** Because square buttons are closely connected with a specific view, their purpose is generally clear without the need for descriptive text. + +For developer guidance, see [`NSButton.BezelStyle.smallSquare`](https://developer.apple.com/documentation/AppKit/NSButton/BezelStyle-swift.enum/smallSquare). + +#### [Help buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#Help-buttons) + +A _help button_ appears within a view and opens app-specific help documentation. + +Help buttons are circular, consistently sized buttons that contain a question mark. For guidance on creating help documentation, see [Offering help](https://developer.apple.com/design/human-interface-guidelines/offering-help). + +**Use the system-provided help button to display your help documentation.** People are familiar with the appearance of the standard help button and know that choosing it opens help content. + +**When possible, open the help topic that’s related to the current context.** For example, the help button in the Rules pane of Mail settings opens the Mail User Guide to a help topic that explains how to change these settings. If no specific help topic applies directly to the current context, open the top level of your app’s help documentation when people choose a help button. + +**Include no more than one help button per window.** Multiple help buttons in the same context make it hard for people to predict the result of clicking one. + +**Position help buttons where people expect to find them.** Use the following locations for guidance. + +View style| Help button location +---|--- +Dialog with dismissal buttons (like OK and Cancel)| Lower corner, opposite to the dismissal buttons and vertically aligned with them +Dialog without dismissal buttons| Lower-left or lower-right corner +Settings window or pane| Lower-left or lower-right corner + +**Use a help button within a view, not in the window frame.** For example, avoid placing a help button in a toolbar or status bar. + +**Avoid displaying text that introduces a help button.** People know what a help button does, so they don’t need additional descriptive text. + +#### [Image buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#Image-buttons) + +An _image button_ appears in a view and displays an image, symbol, or icon. You can configure an image button to behave like a push button, toggle, or pop-up button. + +**Use an image button in a view, not in the window frame.** For example, avoid placing an image button in a toolbar or status bar. If you need to use an image as a button in a toolbar, use a toolbar item. See [Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars). + +**Include about 10 pixels of padding between the edges of the image and the button edges.** An image button’s edges define its clickable area even when they aren’t visible. Including padding ensures that a click registers correctly even if it’s not precisely within the image. In general, avoid including a system-provided border in an image button; for developer guidance, see [`isBordered`](https://developer.apple.com/documentation/AppKit/NSButton/isBordered). + +**If you need to include a label, position it below the image button.** For related guidance, see [Labels](https://developer.apple.com/design/human-interface-guidelines/labels). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/buttons#visionOS) + +A visionOS button typically includes a visible background that can help people see it, and the button plays sound to provide feedback when people interact with it. + +Video with custom controls. + +Content description: A recording showing the top portion of a window in visionOS. The window contains several buttons, including a 'More' button, which receives the hover effect. The button is selected and a menu containing additional options appears. + +Play + +There are three standard button shapes in visionOS. Typically, an icon-only button uses a [`circle`](https://developer.apple.com/documentation/SwiftUI/ButtonBorderShape/circle) shape, a text-only button uses a [`roundedRectangle`](https://developer.apple.com/documentation/SwiftUI/ButtonBorderShape/roundedRectangle) or [`capsule`](https://developer.apple.com/documentation/SwiftUI/ButtonBorderShape/capsule) shape, and a button that includes both an icon and text uses the capsule shape. + +visionOS buttons use different visual styles to communicate four different interaction states. + +![An image of a circular button that contains an icon of an outlined square with rounded corners. The button background is dark and the dashed outline is white.](https://docs-assets.developer.apple.com/published/aed0b1c313448f088dd1ee24663db11e/visionos-button-state-idle%402x.png)Idle + +![An image of a circular button that contains an icon of an outlined square with rounded corners. The button background is medium dark and the outline is white.](https://docs-assets.developer.apple.com/published/29d708fd7985184cbee9d90d7684da92/visionos-button-state-hover%402x.png)Hover + +![An image of a circular button that contains an icon of an outlined square with rounded corners. The button background is white and the outline is black.](https://docs-assets.developer.apple.com/published/0b94e710605235dfca19ef853499cf26/visionos-button-state-selected%402x.png)Selected + +![An image of a circular button that contains an icon of an outlined square with rounded corners. The button background is very dark and the outline is light.](https://docs-assets.developer.apple.com/published/737120252765e5427161af32bb17e7fb/visionos-button-state-unavailable%402x.png)Unavailable + +Note + +In visionOS, buttons don’t support custom hover effects. + +In addition to the four states shown above, a button can also reveal a tooltip when people look at it for a brief time. In general, buttons that contain text don’t need to display a tooltip because the button’s descriptive label communicates what it does. + +Video with custom controls. + +Content description: An animation showing a tooltip appearing beneath a visionOS button. + +Play + +In visionOS, buttons can have the following sizes. + +Shape| Mini (28 pt)| Small (32 pt)| Regular (44 pt)| Large (52 pt)| Extra large (64 pt) +---|---|---|---|---|--- +Circular| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png) +Capsule (text only)| | ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| +Capsule (text and icon)| | | ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| +Rounded rectangle| | ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| ![A checkmark denoting availability.](https://docs-assets.developer.apple.com/published/9c1e6292b0ff3ee8f9e10917ad97f3da/table-availability-checkmark%402x.png)| + +**Prefer buttons that have a discernible background shape and fill.** It tends to be easier for people to see a button when it’s enclosed in a shape that uses a contrasting background fill. The exception is a button in a toolbar, context menu, alert, or [ornament](https://developer.apple.com/design/human-interface-guidelines/ornaments) where the shape and material of the larger component make the button comfortably visible. The following guidelines can help you ensure that a button looks good in different contexts: + + * When a button appears on top of a glass [window](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS), use the [`thin`](https://developer.apple.com/documentation/SwiftUI/Material/thin) material as the button’s background. + + * When a button appears floating in space, use the [glass material](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS) for its background. + + + + +**Avoid creating a custom button that uses a white background fill and black text or icons.** The system reserves this visual style to convey the toggled state. + +**In general, prefer circular or capsule-shape buttons.** People’s eyes tend to be drawn toward the corners in a shape, making it difficult to keep looking at the shape’s center. The more rounded a button’s shape, the easier it is for people to look steadily at it. When you need to display a button by itself, prefer a capsule-shape button. + +**Provide enough space around a button to make it easy for people to look at it.** Aim to place buttons so their centers are always at least 60 pts apart. If your buttons measure 60 pts or larger, add 4 pts of padding around them to keep the hover effect from overlapping. Also, it’s usually best to avoid displaying small or mini buttons in a vertical stack or horizontal row. + +**Choose the right shape if you need to display text-labeled buttons in a stack or row.** Specifically, prefer the rounded-rectangle shape in a vertical stack of buttons and prefer the capsule shape in a horizontal row of buttons. + +**Use standard controls to take advantage of the audible feedback sounds people already know.** Audible feedback is especially important in visionOS, because the system doesn’t play haptics. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/buttons#watchOS) + +watchOS displays all inline buttons using the [`capsule`](https://developer.apple.com/documentation/SwiftUI/ButtonBorderShape/capsule) button shape. When you place a button inline with content, it gains a material effect that contrasts with the background to ensure legibility. + +![An illustration that represents a screen on Apple Watch, which includes capsule-shaped Primary and Secondary buttons.](https://docs-assets.developer.apple.com/published/79565402ab107166de9aa0fe6eab4e6d/buttons-watch-full-width%402x.png) + +**Use a toolbar to place buttons in the corners.** The system automatically moves the time and title to accommodate toolbar buttons. The system also applies the [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) appearance to toolbar buttons, providing a clear visual distinction from the content beneath them. + +![An illustration showing toolbar buttons in the top leading and trailing corners, as well as three toolbar buttons across the bottom of the screen.](https://docs-assets.developer.apple.com/published/28835a2c6f34513eb0758beef1f6015d/buttons-watch-toolbar-corners%402x.png) + +**Prefer buttons that span the width of the screen for primary actions in your app.** Full-width buttons look better and are easier for people to tap. If two buttons must share the same horizontal space, use the same height for both, and use images or short text titles for each button’s content. + +**Use toolbar buttons to provide either navigation to related areas or contextual actions for the view’s content.** These buttons provide access to additional information or secondary actions for the view’s content. + +**Use the same height for vertical stacks of one- and two-line text buttons.** As much as possible, use identical button heights for visual consistency. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/buttons#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/buttons#Related) + +[Pop-up buttons](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) + +[Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) + +[Toggles](https://developer.apple.com/design/human-interface-guidelines/toggles) + +[Segmented controls](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) + +[Location button](https://developer.apple.com/design/human-interface-guidelines/privacy#Location-button) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/buttons#Developer-documentation) + +[`Button`](https://developer.apple.com/documentation/SwiftUI/Button) — SwiftUI + +[`UIButton`](https://developer.apple.com/documentation/UIKit/UIButton) — UIKit + +[`NSButton`](https://developer.apple.com/documentation/AppKit/NSButton) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/buttons#Change-log) + +Date| Changes +---|--- +December 16, 2025| Updated guidance for Liquid Glass. +June 9, 2025| Updated guidance for button styles and content. +February 2, 2024| Noted that visionOS buttons don’t support custom hover effects. +December 5, 2023| Clarified some terminology and guidance for buttons in visionOS. +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Updated guidance for using buttons in watchOS. + diff --git a/skills/hig-components-menus/references/context-menus.md b/skills/hig-components-menus/references/context-menus.md new file mode 100644 index 00000000..585a3731 --- /dev/null +++ b/skills/hig-components-menus/references/context-menus.md @@ -0,0 +1,105 @@ +--- +title: "Context menus | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/context-menus + +# Context menus + +A context menu provides access to functionality that’s directly related to an item, without cluttering the interface. + +![A stylized representation of a contextual menu beneath a clicking pointer. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/6145c402544704012a48978cf5ceb87a/components-context-menu-intro%402x.png) + +Although a context menu provides convenient access to frequently used items, it’s hidden by default, so people might not know it’s there. To reveal a context menu, people generally choose a view or select some content and then perform an action, using the input modes their current configuration supports. For example: + + * The system-defined touch or pinch and hold gesture in visionOS, iOS, and iPadOS + + * Pressing the Control key while clicking a pointing device in macOS and iPadOS + + * Using a secondary click on a Magic Trackpad in macOS or iPadOS + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/context-menus#Best-practices) + +**Prioritize relevancy when choosing items to include in a context menu.** A context menu isn’t for providing advanced or rarely used items; instead, it helps people quickly access the commands they’re most likely to need in their current context. For example, the context menu for a Mail message in the Inbox includes commands for replying and moving the message, but not commands for editing message content, managing mailboxes, or filtering messages. + +**Aim for a small number of menu items.** A context menu that’s too long can be difficult to scan and scroll. + +**Support context menus consistently throughout your app.** If you provide context menus for items in some places but not in others, people won’t know where they can use the feature and may think there’s a problem. + +**Always make context menu items available in the main interface, too.** For example, in Mail in iOS and iPadOS, the context menu items that are available for a message in the Inbox are also available in the toolbar of the message view. In macOS, an app’s menu bar menus list all the app’s commands, including those in various context menus. + +**If you need to use submenus to manage a menu’s complexity, keep them to one level.** A submenu is a menu item that reveals a secondary menu of logically related commands. Although submenus can shorten a context menu and clarify its commands, more than one level of submenu complicates the experience and can be difficult for people to navigate. If you need to include a submenu, give it an intuitive title that helps people predict its contents without opening it. For guidance, see [Submenus](https://developer.apple.com/design/human-interface-guidelines/menus#Submenus). + +**Hide unavailable menu items, don’t dim them.** Unlike a regular menu, which helps people discover actions they can perform even when the action isn’t available, a context menu displays only the actions that are relevant to the currently selected view or content. In macOS, the exceptions are the Cut, Copy, and Paste menu items, which may appear unavailable if they don’t apply to the current context. + +**Aim to place the most frequently used menu items where people are likely to encounter them first.** When a context menu opens, people often read it starting from the part that’s closest to where their finger or pointer revealed it. Depending on the location of the selected content, a context menu might open above or below it, so you might also need to reverse the order of items to match the position of the menu. + +**Show keyboard shortcuts in your app’s main menus, not in context menus.** Context menus already provide a shortcut to task-specific commands, so it’s redundant to display keyboard shortcuts too. + +**Follow best practices for using separators.** As with other types of menus, you can use separators to group items in a context menu and help people scan the menu more quickly. In general, you don’t want more than about three groups in a context menu. For guidance, see [Menus](https://developer.apple.com/design/human-interface-guidelines/menus). + +**In iOS, iPadOS, and visionOS, warn people about context menu items that can destroy data.** If you need to include potentially destructive items in your context menu — such as Delete or Remove — list them at the end of the menu and identify them as destructive (for developer guidance, see [`destructive`](https://developer.apple.com/documentation/UIKit/UIMenuElement/Attributes/destructive)). The system can display a destructive menu item using a red text color. + +## [Content](https://developer.apple.com/design/human-interface-guidelines/context-menus#Content) + +A context menu seldom displays a title. In contrast, each item in a context menu needs to display a short label that clearly describes what it does. For guidance, see [Menus > Labels](https://developer.apple.com/design/human-interface-guidelines/menus#Labels). + +**Include a title in a context menu only if doing so clarifies the menu’s effect.** For example, when people select multiple Mail messages and tap the Mark toolbar button in iOS and iPadOS, the resulting context menu displays a title that states the number of selected messages, reminding people that the command they choose affects all the messages they selected. + +**Represent menu item actions with familiar icons.** Icons help people recognize common actions throughout your app. Use the same icons as the system to represent actions such as Copy, Share, and Delete, wherever they appear. For a list of icons that represent common actions, see [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons). For additional guidance, see [Menus](https://developer.apple.com/design/human-interface-guidelines/menus). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/context-menus#Platform-considerations) + + _No additional considerations for tvOS. Not supported in watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/context-menus#iOS-iPadOS) + +**Provide either a context menu or an edit menu for an item, but not both.** If you provide both features for the same item, it can be confusing to people — and difficult for the system to detect their intent. See [Edit menus](https://developer.apple.com/design/human-interface-guidelines/edit-menus). + +**In iPadOS, consider using a context menu to let people create a new object in your app.** iPadOS lets you reveal a context menu when people perform a long press on the touchscreen or use a secondary click with an attached trackpad or keyboard. For example, Files lets people create a new folder by revealing a context menu in an area between existing files and folders. + +In iOS and iPadOS, a context menu can display a preview of the current content near the list of commands. People can choose a command in the menu or — in some cases — they can tap the preview to open it or drag it to another area. + +**Prefer a graphical preview that clarifies the target of a context menu’s commands.** For example, when people reveal a context menu on a list item in Notes or Mail, the preview shows a condensed version of the actual content to help people confirm that they’re working with the item they intend. + +**Ensure that your preview looks good as it animates.** As people reveal a context menu on an onscreen object, the system animates the preview image as it emerges from the content, dimming the screen behind the preview and the menu. It’s important to adjust the preview’s clipping path to match the shape of the preview image so that its contours, such as the rounded corners, don’t appear to change during animation. For developer guidance, see [`UIContextMenuInteractionDelegate`](https://developer.apple.com/documentation/UIKit/UIContextMenuInteractionDelegate). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/context-menus#macOS) + +On a Mac, a context menu is sometimes called a _contextual_ menu. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/context-menus#visionOS) + +**Consider using a context menu instead of a panel or inspector window to present frequently used functionality.** Minimizing the number of separate views or windows your app opens can help people keep their space uncluttered. + +**In general, avoid letting a context menu’s height exceed the height of the window.** In visionOS, a window includes system-provided components above and below its top and bottom edges, such as window-management controls and the Share menu, so a context menu that’s too tall could obscure them. As you consider the number of items to include, be guided by the ways people are likely to use your app. For example, people who use an app to accomplish in-depth, specialist tasks often expect to spend time learning a large number of sophisticated commands and might appreciate contextual access to them. On the other hand, people who use an app to perform a few simple actions may appreciate short contextual menus that are quick to scan and use. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/context-menus#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/context-menus#Related) + +[Menus](https://developer.apple.com/design/human-interface-guidelines/menus) + +[Edit menus](https://developer.apple.com/design/human-interface-guidelines/edit-menus) + +[Pop-up buttons](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) + +[Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/context-menus#Developer-documentation) + +[`contextMenu(menuItems:)`](https://developer.apple.com/documentation/SwiftUI/View/contextMenu\(menuItems:\)) — SwiftUI + +[`UIContextMenuInteraction`](https://developer.apple.com/documentation/UIKit/UIContextMenuInteraction) — UIKit + +[`popUpContextMenu(_:with:for:)`](https://developer.apple.com/documentation/AppKit/NSMenu/popUpContextMenu\(_:with:for:\)) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/context-menus#Change-log) + +Date| Changes +---|--- +December 5, 2023| Added guidance on hiding unavailable menu items. +June 21, 2023| Updated to include guidance for visionOS. +September 14, 2022| Refined guidance on including a submenu and added a guideline on using a context menu to support object creation in an iPadOS app. + diff --git a/skills/hig-components-menus/references/disclosure-controls.md b/skills/hig-components-menus/references/disclosure-controls.md new file mode 100644 index 00000000..bd483286 --- /dev/null +++ b/skills/hig-components-menus/references/disclosure-controls.md @@ -0,0 +1,84 @@ +--- +title: "Disclosure controls | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/disclosure-controls + +# Disclosure controls + +Disclosure controls reveal and hide information and functionality related to specific controls or views. + +![A stylized representation of collapsed and expanded disclosure buttons. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d9f8c2e1696219ad884582186a447524/components-disclosure-control-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Best-practices) + +**Use a disclosure control to hide details until they’re relevant.** Place controls that people are most likely to use at the top of the disclosure hierarchy so they’re always visible, with more advanced functionality hidden by default. This organization helps people quickly find the most essential information without overwhelming them with too many detailed options. + +## [Disclosure triangles](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Disclosure-triangles) + +A disclosure triangle shows and hides information and functionality associated with a view or a list of items. For example, Keynote uses a disclosure triangle to show advanced options when exporting a presentation, and the Finder uses disclosure triangles to progressively reveal hierarchy when navigating a folder structure in list view. + + * Collapsed + * Expanded + + + +![An illustration of three folders in a Finder list view. The folders are collapsed, with disclosure triangles on their leading edges pointing inward to indicate that they can be expanded to reveal their contents.](https://docs-assets.developer.apple.com/published/f2f0f58d9777abfc3a92f782963fbba6/disclosure-triangle-before%402x.png) + +![An illustration of three folders in a Finder list view. The first and third folders are collapsed, with disclosure triangles on their leading edges pointing inward to indicate that they can be expanded to reveal their contents. The second folder is expanded, with its disclosure triangle pointing down, revealing three subfolders inside.](https://docs-assets.developer.apple.com/published/88c62732eba28e9f3233e0dedf6d0946/disclosure-triangle-after%402x.png) + +A disclosure triangle points inward from the leading edge when its content is hidden and down when its content is visible. Clicking or tapping the disclosure triangle switches between these two states, and the view expands or collapses accordingly to accommodate the content. + +**Provide a descriptive label when using a disclosure triangle.** Make sure your labels indicate what is disclosed or hidden, like “Advanced Options.” + +For developer guidance, see [`NSButton.BezelStyle.disclosure`](https://developer.apple.com/documentation/AppKit/NSButton/BezelStyle-swift.enum/disclosure). + +## [Disclosure buttons](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Disclosure-buttons) + +A disclosure button shows and hides functionality associated with a specific control. For example, the macOS Save sheet shows a disclosure button next to the Save As text field. When people click or tap this button, the Save dialog expands to give advanced navigation options for selecting an output location for their document. + +A disclosure button points down when its content is hidden and up when its content is visible. Clicking or tapping the disclosure button switches between these two states, and the view expands or collapses accordingly to accommodate the content. + + * Collapsed + * Expanded + + + +![A screenshot of a collapsed save dialog in macOS. The dialog includes a closed disclosure button that expands the dialog to reveal additional options.](https://docs-assets.developer.apple.com/published/6d405bc1e4bd3743e610bf3dd4e17161/disclosure-button-before%402x.png) + +![A screenshot of an expanded save dialog in macOS. The dialog includes an open disclosure button that collapses the dialog to hide some options.](https://docs-assets.developer.apple.com/published/1d543abc1f07f34a01c63a3aac067ccd/disclosure-button-after%402x.png) + +**Place a disclosure button near the content that it shows and hides.** Establish a clear relationship between the control and the expanded choices that appear when a person clicks or taps a button. + +**Use no more than one disclosure button in a single view.** Multiple disclosure buttons add complexity and can be confusing. + +For developer guidance, see [`NSButton.BezelStyle.pushDisclosure`](https://developer.apple.com/documentation/AppKit/NSButton/BezelStyle-swift.enum/pushDisclosure). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Platform-considerations) + + _No additional considerations for macOS. Not supported in tvOS or watchOS._ + +### [iOS, iPadOS, visionOS](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#iOS-iPadOS-visionOS) + +Disclosure controls are available in iOS, iPadOS, and visionOS with the SwiftUI [`DisclosureGroup`](https://developer.apple.com/documentation/SwiftUI/DisclosureGroup) view. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Related) + +[Outline views](https://developer.apple.com/design/human-interface-guidelines/outline-views) + +[Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables) + +[Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Developer-documentation) + +[`DisclosureGroup`](https://developer.apple.com/documentation/SwiftUI/DisclosureGroup) — SwiftUI + +[`NSButton.BezelStyle.disclosure`](https://developer.apple.com/documentation/AppKit/NSButton/BezelStyle-swift.enum/disclosure) — AppKit + +[`NSButton.BezelStyle.pushDisclosure`](https://developer.apple.com/documentation/AppKit/NSButton/BezelStyle-swift.enum/pushDisclosure) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/1636D358-5C36-4027-B204-81FFE4D05B7D/3455_wide_250x141_1x.jpg) Stacks, Grids, and Outlines in SwiftUI ](https://developer.apple.com/videos/play/wwdc2020/10031) + diff --git a/skills/hig-components-menus/references/dock-menus.md b/skills/hig-components-menus/references/dock-menus.md new file mode 100644 index 00000000..180f83bf --- /dev/null +++ b/skills/hig-components-menus/references/dock-menus.md @@ -0,0 +1,40 @@ +--- +title: "Dock menus | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/dock-menus + +# Dock menus + +On a Mac, people can secondary click an app’s or game’s icon in the Dock to reveal a Dock menu, which presents both system-provided and custom items. + +![A stylized representation of a menu extending from an icon in the Dock. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b09af2b90f697b3e25f1985cce93f4ab/components-dock-menu-intro%402x.png) + +The system-provided Dock menu items can vary depending on whether the app is open. For example, the Dock menu for Safari includes menu items for actions like viewing a current window or creating a new window. + +Note + +Although 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](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/dock-menus#Best-practices) + +As with all menus, you need to label Dock menu items succinctly and organize them logically. For guidance, see [Menus](https://developer.apple.com/design/human-interface-guidelines/menus). + +**Make custom Dock menu items available in other places, too.** Not everyone uses a Dock menu, so it’s important to offer the same commands elsewhere, like in your menu bar menus or within your interface. + +**Prefer high-value custom items for your Dock menu.** For example, a Dock menu can list all currently or recently open windows, making it a convenient way to jump to the window people want. Also consider listing a few of the actions that are most likely to be useful when your app isn’t frontmost or when there are no open windows. For example, Mail includes items for getting new mail and composing a new message in addition to listing all open windows. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/dock-menus#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/dock-menus#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/dock-menus#Related) + +[Menus](https://developer.apple.com/design/human-interface-guidelines/menus) + +[Home Screen quick actions](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/dock-menus#Developer-documentation) + +[`applicationDockMenu(_:)`](https://developer.apple.com/documentation/AppKit/NSApplicationDelegate/applicationDockMenu\(_:\)) — AppKit + diff --git a/skills/hig-components-menus/references/edit-menus.md b/skills/hig-components-menus/references/edit-menus.md new file mode 100644 index 00000000..56d10e7a --- /dev/null +++ b/skills/hig-components-menus/references/edit-menus.md @@ -0,0 +1,88 @@ +--- +title: "Edit menus | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/edit-menus + +# Edit menus + +An edit menu lets people make changes to selected content in the current view, in addition to offering related commands like Copy, Select, Translate, and Look Up. + +![A stylized representation of an edit menu extending from selected text. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/2ee5b60d3d9877b65df7633d0321550a/components-edit-menu-intro%402x.png) + +In addition to text, an edit menu’s commands can apply to many types of selectable content, such as images, files, and objects like contact cards, charts, or map locations. In iOS, iPadOS, and visionOS, the system automatically detects the data type of a selected item, which can result in the addition of a related action to the edit menu. For example, selecting an address can add an item like _Get directions_ to the edit menu. + +Edit menus can look and behave slightly differently in different platforms. + + * In iOS, the edit menu displays commands in a compact, horizontal list that appears when people touch and hold or double-tap to select content in a view. People can tap a chevron on the trailing edge to expand it into a [context menu](https://developer.apple.com/design/human-interface-guidelines/context-menus). + + * In iPadOS, the edit menu looks different depending on how people reveal it. When people use touch interactions to reveal the menu, it uses the compact, horizontal appearance. In contrast, when people use a keyboard or pointing device to reveal it, the edit menu opens directly in a context menu. + + * In macOS, people can access editing commands in a context menu they can reveal while in an editing task, as well as through the app’s [Edit menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Edit-menu) in the menu bar. + + * In visionOS, people use the standard [pinch and hold](https://developer.apple.com/design/human-interface-guidelines/gestures#Standard-gestures) gesture to open the edit menu as a horizontal bar, or they can open it in a context menu. + + + + +Editing content is rare in tvOS and watchOS experiences, so the system doesn’t provide an edit menu in these platforms. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/edit-menus#Best-practices) + +**Prefer the system-provided edit menu.** People are familiar with the contents and behavior of the system-provided component, so creating a custom menu that presents the same commands is redundant and likely to be confusing. For a list of standard edit menu commands, see [`UIResponderStandardEditActions`](https://developer.apple.com/documentation/UIKit/UIResponderStandardEditActions). + +**Let people reveal an edit menu using the system-defined interactions they already know.** For example, people expect to touch and hold on a touchscreen, pinch and hold in visionOS, or use a secondary click with an attached trackpad or keyboard. Although the interactions to reveal an edit menu can differ based on platform, people don’t appreciate having to learn a custom interaction to perform a standard task. + +**Offer commands that are relevant in the current context, removing or dimming commands that don’t apply.** For example, if nothing is selected, avoid showing options that require a selection, such as Copy or Cut. Similarly, avoid showing a Paste option when there’s nothing to paste. + +**List custom commands near relevant system-provided ones.** For example, if you offer custom formatting commands, you can help maintain the ordering people expect by listing them after the system-provided commands in the format section. Avoid overwhelming people with too many custom commands. + +**When it makes sense, let people select and copy noneditable text.** People appreciate being able to paste static content — such as an image caption or social media status — into a message, note, or web search. In general, let people copy content text, but not control labels. + +**Support undo and redo when possible.** Like all menus, an edit menu doesn’t require confirmation before performing its actions, so people can easily use undo and redo to recover a previous state. For guidance, see [Undo and redo](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo). + +**In general, avoid implementing other controls that perform the same functions as edit menu items.** People typically expect to choose familiar edit commands in an edit menu, or use standard keyboard shortcuts. Offering redundant controls can crowd your interface, giving you less space for presenting actions that people might not already know about. + +**Differentiate different types of deletion commands when necessary.** For example, a Delete menu item behaves the same as pressing a Delete key, but a Cut menu item copies the selected content to the system pasteboard before deleting it. + +## [Content](https://developer.apple.com/design/human-interface-guidelines/edit-menus#Content) + +**Create short labels for custom commands.** Use verbs or short verb phrases that succinctly describe the action your command performs. For guidance, see [Labels](https://developer.apple.com/design/human-interface-guidelines/labels). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/edit-menus#Platform-considerations) + + _No additional considerations for visionOS. Not supported in tvOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/edit-menus#iOS-iPadOS) + +**Ensure your edit menu works well in both styles.** The system displays the compact, horizontal style when people use Multi-Touch gestures to reveal the edit menu, and the vertical style when people use a keyboard or pointing device to reveal it. For guidance using the vertical menu layout, see [Menus > iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/menus#iOS-iPadOS). + +**Adjust an edit menu’s placement, if necessary.** Depending on available space, the default menu position is above or below the insertion point or selection. The system also displays a visual indicator that points to the targeted content. Although you can’t change the shape of the menu or its pointer, you can change the menu’s position. For example, you might need to move the menu to prevent it from covering important content or parts of your interface. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/edit-menus#macOS) + +To learn about the order of items in a macOS app’s Edit menu, see [Edit menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Edit-menu). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/edit-menus#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/edit-menus#Related) + +[Menus](https://developer.apple.com/design/human-interface-guidelines/menus) + +[Context menus](https://developer.apple.com/design/human-interface-guidelines/context-menus) + +[The menu bar](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar) + +[Undo and redo](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/edit-menus#Developer-documentation) + +[`UIEditMenuInteraction`](https://developer.apple.com/documentation/UIKit/UIEditMenuInteraction) — UIKit + +[`NSMenu`](https://developer.apple.com/documentation/AppKit/NSMenu) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/edit-menus#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. +September 14, 2022| Added guidance on supporting both edit-menu styles in iPadOS. + diff --git a/skills/hig-components-menus/references/menus.md b/skills/hig-components-menus/references/menus.md new file mode 100644 index 00000000..58fd3d3b --- /dev/null +++ b/skills/hig-components-menus/references/menus.md @@ -0,0 +1,171 @@ +--- +title: "Menus | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/menus + +# Menus + +A menu reveals its options when people interact with it, making it a space-efficient way to present commands in your app or game. + +![A stylized representation of a menu containing a selected item and displaying a submenu. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/a64b5649dc039710622ba211979e116b/components-menus-intro%402x.png) + +Menus are ubiquitous in apps and games, so most people already know how to use them. Whether you use system-provided components or custom ones, people expect menus to behave in familiar ways. For example, people understand that opening a menu reveals one or more _menu items_ , each of which represents a command, option, or state that affects the current selection or context. The guidance for labeling and organizing menu items applies to all types of menus in all experiences. + +Note + +Several system-provided components also include menus that support specific use cases. For example, a [pop-up button](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) or [pull-down button](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) can reveal a menu of options directly related to its action; a [context menu](https://developer.apple.com/design/human-interface-guidelines/context-menus) lets people access a small number of frequently used actions relevant to their current view or task; and in macOS and iPadOS, [menu bar](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar) menus contain all the commands people can perform in the app or game. + +## [Labels](https://developer.apple.com/design/human-interface-guidelines/menus#Labels) + +A menu item’s label describes what it does and may include a symbol if it helps to clarify meaning. In an app, a menu item can also display the associated keyboard command, if there is one; in a game, a menu item rarely displays a keyboard command because a game typically needs to handle input from a wider range of devices and may offer game-specific mappings for various keys. + +Note + +Depending 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](https://developer.apple.com/design/human-interface-guidelines/menus#visionOS) and [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/menus#iOS-iPadOS). + +**For each menu item, write a label that clearly and succinctly describes it.** In general, label a menu item that initiates an action using a verb or verb phrase that describes the action, such as View, Close, or Select. For guidance labeling menu items that show and hide something in the interface or show the currently selected state of something, see [Toggled items](https://developer.apple.com/design/human-interface-guidelines/menus#Toggled-items). As with all the copy you write, let your app’s or game’s communication style guide the tone of the menu-item labels you create. + +**To be consistent with platform experiences, use title-style capitalization.** Although a game might have a different writing style, generally prefer using title-style capitalization, which capitalizes every word except articles, coordinating conjunctions, and short prepositions, and capitalizes the last word in the label, regardless of the part of speech. For complete guidance on this style of capitalization in English, see [title-style capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64). + +**Remove articles like _a_ , _an_ , and _the_ from menu-item labels to save space.** In English, articles always lengthen labels, but rarely enhance understanding. For example, changing a menu-item label from View Settings to View the Settings doesn’t provide additional clarification. + +**Show people when a menu item is unavailable.** An unavailable menu item often appears dimmed and doesn’t respond to interactions. If all of a menu’s items are unavailable, the menu itself needs to remain available so people can open it and learn about the commands it contains. + +**Append an ellipsis to a menu item’s label when the action requires more information before it can complete.** The ellipsis character (…) signals that people need to input information or make additional choices, typically within another view. + +## [Icons](https://developer.apple.com/design/human-interface-guidelines/menus#Icons) + +**Represent menu item actions with familiar icons.** Icons help people recognize common actions throughout your app. Use the same icons as the system to represent actions such as Copy, Share, and Delete, wherever they appear. For a list of icons that represent common actions, see [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons). + +**Don’t display an icon if you can’t find one that clearly represents the menu item.** Not all menu items need an icon. Be careful when adding icons for custom menu items to avoid confusion with other existing actions, and don’t add icons just for the sake of ornamentation. + +![An illustration of a menu containing the days of the week. Each menu item is represented by a different symbol with no relation to the corresponding day.](https://docs-assets.developer.apple.com/published/e612c40d780feb72382a1d387aa556f6/menus-days-of-the-week-incorrect-icons%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a menu containing the days of the week with no accompanying symbols.](https://docs-assets.developer.apple.com/published/72bddfbe313d096cac7f09d136d2a601/menus-days-of-the-week-correct-no-icons%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Use a single icon to introduce a group of similar items.** Instead of adding individual icons for each action, or reusing the same icon for all of them, establish a common theme with the symbol for the first item and rely on the menu item text to keep the remaining items distinct. + +![An illustration of an Edit menu that includes several similar Copy actions, with each represented by a different symbol.](https://docs-assets.developer.apple.com/published/7deb98def27f19a33794b9ec6cee02b4/menus-copy-actions-different-icons-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of an Edit menu that includes several similar Copy actions, with each represented by the same Copy symbol.](https://docs-assets.developer.apple.com/published/60241bb399a7e5faa06e9e53de4d858b/menus-copy-actions-repeated-icons-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of an Edit menu that includes several similar Copy actions. The first is represented by the Copy symbol, and the others with no symbol.](https://docs-assets.developer.apple.com/published/ee3e63278a8b0b023e35e963077f2596/menus-copy-actions-single-icon-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +## [Organization](https://developer.apple.com/design/human-interface-guidelines/menus#Organization) + +Organizing menu items in ways that reflect how people use your app or game can make your experience feel straightforward and easy to use. + +**Prefer listing important or frequently used menu items first.** People tend to start scanning a menu from the top, so listing high-priority items first often means that people can find what they want without reading the entire menu. + +**Consider grouping logically related items.** For example, grouping editing commands like Copy, Cut, and Paste or camera commands like Look Up, Look Down, and Look Left can help people remember where to find them. To help people visually distinguish such groups, use a separator. Depending on the platform and type of menu, a _separator_ appears between groups of items as a horizontal line or a short gap in the menu’s background appearance. + +**Prefer keeping all logically related commands in the same group, even if the commands don’t all have the same importance.** For example, people generally use Paste and Match Style much less often than they use Paste, but they expect to find both commands in the same group that contains more frequently used editing commands like Copy and Cut. + +**Be mindful of menu length.** People need more time and attention to read a long menu, which means they may miss the command they want. If a menu is too long, consider dividing it into separate menus. Alternatively, you might be able to use a submenu to shorten the list, such as listing difficulty levels in a submenu of a New Game menu item. The exception is when a menu contains user-defined or dynamically generated content, like the History and Bookmarks menus in Safari. People expect such a menu to accommodate all the items they add to it, so a long menu is fine, and scrolling is acceptable. + +## [Submenus](https://developer.apple.com/design/human-interface-guidelines/menus#Submenus) + +Sometimes, a menu item can reveal a set of closely related items in a subordinate list called a _submenu_. A menu item indicates the presence of a submenu by displaying a symbol — like a chevron — after its label. Submenus are functionally identical to menus, aside from their hierarchical positioning. + +**Use submenus sparingly.** Each submenu adds complexity to the interface and hides the items it contains. You might consider creating a submenu when a term appears in more than two menu items in the same group. For example, instead of offering separate menu items for Sort by Date, Sort by Score, and Sort by Time, a game could present a menu item that uses a submenu to list the sorting options Date, Score, and Time. It generally works well to use the repeated term — in this case, _Sort by_ — in the menu item’s label to help people predict the contents of the submenu. + +**Limit the depth and length of submenus.** It can be difficult for people to reveal multiple levels of hierarchical submenus, so it’s generally best to restrict them to a single level. Also, if a submenu contains more than about five items, consider creating a new menu. + +**Make sure a submenu remains available even when its nested menu items are unavailable.** A submenu item — like all menu items — needs to let people open it and learn about the commands it contains. + +**Prefer using a submenu to indenting menu items.** Using indentation is inconsistent with the system and doesn’t clearly express the relationships between the menu items. + +## [Toggled items](https://developer.apple.com/design/human-interface-guidelines/menus#Toggled-items) + +Menu items often represent attributes or objects that people can turn on or off. If you want to avoid listing a separate menu item for each state, it can be efficient to create a single, toggled menu item that communicates the current state and lets people change it. + +**Consider using a changeable label that describes an item’s current state.** For example, instead of listing two menu items like Show Map and Hide Map, you could include one menu item whose label changes from Show Map to Hide Map, depending on whether the map is visible. + +**Include a verb if a changeable label isn’t clear enough.** For example, people might not know whether the changeable labels HDR On and HDR Off describe actions or states. If you needed to clarify that these items represent actions, you could add verbs to the labels, like Turn HDR On and Turn HDR Off. + +**If necessary, display both menu items instead of one toggled item.** Sometimes, it helps people to view both actions or states at the same time. For example, a game could list both Take Account Online and Take Account Offline items, so when someone’s account is online, only the Take Account Offline menu item appears available. + +**Consider using a checkmark to show that an attribute is currently in effect.** It’s easy for people to scan for checkmarks in a list of attributes to find the ones that are selected. For example, in the standard Format > Font menu, checkmarks can make it easy for people notice the styles that apply to selected text. + +**Consider offering a menu item that makes it easy to remove multiple toggled attributes.** For example, if you let people apply several styles to selected text, it can work well to provide a menu item — such as Plain — that removes all applied formatting attributes at one time. + +## [In-game menus](https://developer.apple.com/design/human-interface-guidelines/menus#In-game-menus) + +In-game menus give players ways to control gameplay as well as determine [settings](https://developer.apple.com/design/human-interface-guidelines/settings) for the game as a whole. + +**Let players navigate in-game menus using the platform’s default interaction method.** People expect to use the same interactions to navigate your menus as they use for navigating other menus on the device. For example, players expect to navigate your game menus using touch in iOS and iPadOS, and direct and indirect gestures in visionOS. + +**Make sure your menus remain easy to open and read on all platforms you support.** Each platform defines specific sizes that work best for fonts and interaction targets. Sometimes, scaling your game content to display on a different screen — especially a mobile device screen — can make in-game menus too small for people to read or interact with. If this happens, modify the size of the tap targets and consider alternative ways to communicate the menu’s content. For guidance, see [Typography](https://developer.apple.com/design/human-interface-guidelines/typography) and [Touch controls](https://developer.apple.com/design/human-interface-guidelines/game-controls#Touch-controls). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/menus#Platform-considerations) + + _No additional considerations for macOS, tvOS, or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/menus#iOS-iPadOS) + +In iOS and iPadOS, a menu can display items in one of the following three layouts. + +![A diagram showing small, medium, and large menu layouts, each containing the same set of menu items.](https://docs-assets.developer.apple.com/published/d04cabb2d7b38602590cd6d59d79a0a0/small-medium-large-menu-layouts%402x.png) + + * **Small.** A row of four items appears at the top of the menu, above a list that contains the remaining items. For each item in the top row, the menu displays a symbol or icon, but no label. + + * **Medium.** A row of three items appears at the top of the menu, above a list that contains the remaining items. For each item in the top row, the menu displays a symbol or icon above a short label. + + * **Large (the default).** The menu displays all items in a list. + + + + +For developer guidance, see [`preferredElementSize`](https://developer.apple.com/documentation/UIKit/UIMenu/preferredElementSize). + +**Choose a small or medium menu layout when it can help streamline people’s choices.** Consider using the medium layout if your app has three important actions that people often want to perform. For example, Notes uses the medium layout to give people a quick way to perform the Scan, Lock, and Pin actions. Use the small layout only for closely related actions that typically appear as a group, such as Bold, Italic, Underline, and Strikethrough. For each action, use a recognizable symbol that helps people identify the action without a label. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/menus#visionOS) + +In visionOS, a menu can display items using the small or large layout styles that iOS and iPadOS define (for guidance, see [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/menus#iOS-iPadOS)). You can present a menu in your app or game from 3D content using a SwiftUI view. To ensure that your menu is always visible to people, even when other content occludes it, you can apply a [breakthrough effect](https://developer.apple.com/documentation/swiftui/view/presentationbreakthrougheffect\(_:\)). As in macOS, an open menu in a visionOS window can appear outside of the window’s boundaries. + +**Prefer displaying a menu near the content it controls.** Because people need to look at a menu item before tapping it, they might miss the item’s effect if the content it controls is too far away. + +![A partial screenshot showing an app window in visionOS. The window contains several buttons, including a 'More' button, which is selected. A menu containing a list of actions is displayed beneath the button.](https://docs-assets.developer.apple.com/published/b424693063f332d9edd65d555fec417e/visionos-notes-menu-popover-style%402x.png) + +**Prefer the subtle breakthrough effect in most cases.** This effect blends the presentation with its surrounding content, to maintain legibility and usability while preserving the depth and context of the scene. When you select [`automatic`](https://developer.apple.com/documentation/SwiftUI/BreakthroughEffect/automatic) for the breakthrough effect of a menu that overlaps with 3D content, the system applies [`subtle`](https://developer.apple.com/documentation/SwiftUI/BreakthroughEffect/subtle) by default. You can use [`prominent`](https://developer.apple.com/documentation/SwiftUI/BreakthroughEffect/prominent) if it’s important to display a menu prominently over the entire scene in your app or game, but this can disrupt the experience for people and potentially cause discomfort. Alternatively, you can use [`none`](https://developer.apple.com/documentation/SwiftUI/BreakthroughEffect/none) to fully occlude your menu behind other 3D content — for example, in a puzzle game that requires people to navigate around barriers — but this may make it difficult for people to see and access the menu. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/menus#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/menus#Related) + +[Pop-up buttons](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) + +[Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) + +[Context menus](https://developer.apple.com/design/human-interface-guidelines/context-menus) + +[The menu bar](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/menus#Developer-documentation) + +[`Menu`](https://developer.apple.com/documentation/SwiftUI/Menu) — SwiftUI + +[Menus and shortcuts](https://developer.apple.com/documentation/UIKit/menus-and-shortcuts) — UIKit + +[Menus](https://developer.apple.com/documentation/AppKit/menus) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/menus#Change-log) + +Date| Changes +---|--- +December 16, 2025| Added guidance for presenting menus with breakthrough effects in visionOS. +July 28, 2025| Added guidance for representing menu items with icons. +June 10, 2024| Added guidance for in-game menus and included game-specific examples. +June 21, 2023| Updated to include guidance for visionOS. +September 14, 2022| Added guidelines for using the small, medium, and large menu layouts in iPadOS. + diff --git a/skills/hig-components-menus/references/pop-up-buttons.md b/skills/hig-components-menus/references/pop-up-buttons.md new file mode 100644 index 00000000..99521c67 --- /dev/null +++ b/skills/hig-components-menus/references/pop-up-buttons.md @@ -0,0 +1,70 @@ +--- +title: "Pop-up buttons | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons + +# Pop-up buttons + +A pop-up button displays a menu of mutually exclusive options. + +![A stylized representation of a pop-up button displaying a set of options. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/334ac7588fce25fa319c3ef611eca905/components-pop-up-button-intro%402x.png) + +After people choose an item from a pop-up button’s menu, the menu closes, and the button can update its content to indicate the current selection. + +![A screenshot of Calendar on iPhone, with a new calendar event open for editing. The editing screen contains controls for setting the details of the event, including its start and end dates, travel time, repeat interval, calendar, invitees, alert options, and attachments.](https://docs-assets.developer.apple.com/published/519951a89c3c840e87eca8c5760f4d90/pop-up-button-closed%402x.png) + +![A screenshot of Calendar on iPhone, with a new calendar event open for editing. A pop-up button menu emerges from the Repeat button, with options for choosing a repeat interval from a list of preset options, or creating a custom one.](https://docs-assets.developer.apple.com/published/61386d60280871ab2649bc5b2020aab5/pop-up-button-open%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons#Best-practices) + +**Use a pop-up button to present a flat list of mutually exclusive options or states.** A pop-up button helps people make a choice that affects their content or the surrounding view. Use a [pull-down button](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) instead if you need to: + + * Offer a list of actions + + * Let people select multiple items + + * Include a submenu + + + + +**Provide a useful default selection.** A pop-up button can update its content to identify the current selection, but if people haven’t made a selection yet, it shows the default item you specify. When possible, make the default selection an item that most people are likely to want. + +**Give people a way to predict a pop-up button’s options without opening it.** For example, you can use an introductory label or a button label that describes the button’s effect, giving context to the options. + +**Consider using a pop-up button when space is limited and you don’t need to display all options all the time.** Pop-up buttons are a space-efficient way to present a wide array of choices. + +**If necessary, include a Custom option in a pop-up button’s menu to provide additional items that are useful in some situations.** Offering a Custom option can help you avoid cluttering the interface with items or controls that people need only occasionally. You can also display explanatory text below the list to help people understand how the options work. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons#Platform-considerations) + + _No additional considerations for iOS, macOS, or visionOS. Not supported in tvOS or watchOS._ + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons#iPadOS) + +**Within a popover or modal view, consider using a pop-up button instead of a disclosure indicator to present multiple options for a list item.** For example, people can quickly choose an option from the pop-up button’s menu without navigating to a detail view. Consider using a pop-up button in this scenario when you have a fairly small, well-defined set of options that work well in a menu. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons#Related) + +[Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) + +[Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons) + +[Menus](https://developer.apple.com/design/human-interface-guidelines/menus) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons#Developer-documentation) + +[`MenuPickerStyle`](https://developer.apple.com/documentation/SwiftUI/MenuPickerStyle) — SwiftUI + +[`changesSelectionAsPrimaryAction`](https://developer.apple.com/documentation/UIKit/UIButton/changesSelectionAsPrimaryAction) — UIKit + +[`NSPopUpButton`](https://developer.apple.com/documentation/AppKit/NSPopUpButton) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons#Change-log) + +Date| Changes +---|--- +October 24, 2023| Added artwork. +September 14, 2022| Added a guideline on using a pop-up button in a popover or modal view in iPadOS. + diff --git a/skills/hig-components-menus/references/pull-down-buttons.md b/skills/hig-components-menus/references/pull-down-buttons.md new file mode 100644 index 00000000..46034f56 --- /dev/null +++ b/skills/hig-components-menus/references/pull-down-buttons.md @@ -0,0 +1,77 @@ +--- +title: "Pull-down buttons | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons + +# Pull-down buttons + +A pull-down button displays a menu of items or actions that directly relate to the button’s purpose. + +![A stylized representation of a pull-down menu displaying a set of items. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/dbe57c62e67b173fe5203469df675796/components-pull-down-button-intro%402x.png) + +After people choose an item in a pull-down button’s menu, the menu closes, and the app performs the chosen action. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons#Best-practices) + +**Use a pull-down button to present commands or items that are directly related to the button’s action.** The menu lets you help people clarify the button’s target or customize its behavior without requiring additional buttons in your interface. For example: + + * An Add button could present a menu that lets people specify the item they want to add. + + * A Sort button could use a menu to let people select an attribute on which to sort. + + * A Back button could let people choose a specific location to revisit instead of opening the previous one. + + + + +If you need to provide a list of mutually exclusive choices that aren’t commands, use a [pop-up button](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) instead. + +**Avoid putting all of a view’s actions in one pull-down button.** A view’s primary actions need to be easily discoverable, so you don’t want to hide them in a pull-down button that people have to open before they can do anything. + +**Balance menu length with ease of use.** Because people have to interact with a pull-down button before they can view its menu, listing a minimum of three items can help the interaction feel worthwhile. If you need to list only one or two items, consider using alternative components to present them, such as buttons to perform actions and toggles or switches to present selections. In contrast, listing too many items in a pull-down button’s menu can slow people down because it takes longer to find a specific item. + +**Display a succinct menu title only if it adds meaning.** In general, a pull-down button’s content — combined with descriptive menu items — provides all the context people need, making a menu title unnecessary. + +**Let people know when a pull-down button’s menu item is destructive, and ask them to confirm their intent.** Menus use red text to highlight actions that you identify as potentially destructive. When people choose a destructive action, the system displays an [action sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) (iOS) or [popover](https://developer.apple.com/design/human-interface-guidelines/popovers) (iPadOS) in which they can confirm their choice or cancel the action. Because an action sheet appears in a different location from the menu and requires deliberate dismissal, it can help people avoid losing data by mistake. + +**Include an interface icon with a menu item when it provides value.** If you need to clarify an item’s meaning, you can display an [icon](https://developer.apple.com/design/human-interface-guidelines/icons) or image after its label. Using [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) for this purpose can help you provide a familiar experience while ensuring that the symbol remains aligned with the text at every scale. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons#Platform-considerations) + + _No additional considerations for macOS or visionOS. Not supported in tvOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons#iOS-iPadOS) + +Note + +You 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. + +**Consider using a More pull-down button to present items that don’t need prominent positions in the main interface.** A More button can help you offer a range of items where space is constrained, but it can also hinder discoverability. Although people generally understand that a More button offers additional functionality related to the current context, the ellipsis icon doesn’t necessarily help them predict its contents. To design an effective More button, weigh the convenience of its size against its impact on discoverability to find a balance that works in your app. + +![A screenshot of the Notes app on iPhone, open to a Notes document titled Nature Walks. The top toolbar includes a More button on the trailing edge.](https://docs-assets.developer.apple.com/published/5cdc980290422f59da0f79ab5f5efd13/menu-secondary-actions-collapsed%402x.png) + +![A screenshot of the Notes app on iPhone, open to a Notes document titled Nature Walks. The More button in the top toolbar is expanded, revealing the More menu with additional funtionality.](https://docs-assets.developer.apple.com/published/0d263e9b8df2b3f1e989a6383ebfaf5d/menu-secondary-actions-expanded%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons#Related) + +[Pop-up buttons](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) + +[Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons) + +[Menus](https://developer.apple.com/design/human-interface-guidelines/menus) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons#Developer-documentation) + +[`MenuPickerStyle`](https://developer.apple.com/documentation/SwiftUI/MenuPickerStyle) — SwiftUI + +[`showsMenuAsPrimaryAction`](https://developer.apple.com/documentation/UIKit/UIControl/showsMenuAsPrimaryAction) — UIKit + +[`pullsDown`](https://developer.apple.com/documentation/AppKit/NSPopUpButton/pullsDown) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons#Change-log) + +Date| Changes +---|--- +September 14, 2022| Refined guidance on designing a useful menu length. + diff --git a/skills/hig-components-menus/references/the-menu-bar.md b/skills/hig-components-menus/references/the-menu-bar.md new file mode 100644 index 00000000..12e17d87 --- /dev/null +++ b/skills/hig-components-menus/references/the-menu-bar.md @@ -0,0 +1,303 @@ +--- +title: "The menu bar | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/the-menu-bar + +# The menu bar + +On a Mac or an iPad, the menu bar at the top of the screen displays the top-level menus in your app or game. + +![A stylized representation of the macOS menu bar displaying a selected menu. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1196662c916a44013329c4c6a1ba03d4/components-the-menu-bar-intro%402x.png) + +Mac users are very familiar with the macOS menu bar, and they rely on it to help them learn what an app does and find the commands they need. To help your app or game feel at home in macOS, it’s essential to provide a consistent menu bar experience. + +Menu bar menus on iPad are similar to those on Mac, appearing in the same order and with familiar sets of menu items. When you adopt the menu structure that people expect from their experience on Mac, it helps them immediately understand and take advantage of the menu bar on iPad as well. + +Keyboard shortcuts in iPadOS use the same patterns as in macOS. For guidance, see [Standard keyboard shortcuts](https://developer.apple.com/design/human-interface-guidelines/keyboards#Standard-keyboard-shortcuts). + +![An illustration of an app window on iPad, with its menu bar appearing at the top of the screen and the Edit menu open.](https://docs-assets.developer.apple.com/published/7c3a4ae9470f62e0eb41b8ce297032f8/menu-bar-ipad-overview%402x.png) + +Menus in the menu bar share most of the appearance and behavior characteristics that all menu types have. To learn about menus in general — and how to organize and label menu items — see [Menus](https://developer.apple.com/design/human-interface-guidelines/menus). + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Anatomy) + +When present in the menu bar, the following menus appear in the order listed below. + + * _YourAppName_ (you supply a short version of your app’s name for this menu’s title) + + * File + + * Edit + + * Format + + * View + + * App-specific menus, if any + + * Window + + * Help + + + + +In addition, the macOS menu bar includes the Apple menu on the leading side and menu bar extras on the trailing side. See [macOS Platform considerations](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#macOS) for guidance. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Best-practices) + +**Support the default system-defined menus and their ordering.** People expect to find menus and menu items in an order they’re familiar with. In many cases, the system implements the functionality of standard menu items so you don’t have to. For example, when people select text in a standard text field, the system makes the Edit > Copy menu item available. + +**Always show the same set of menu items.** Keeping menu items visible helps people learn what actions your app supports, even if they’re unavailable in the current context. If a menu bar item isn’t actionable, disable the action instead of hiding it from the menu. + +**Represent menu item actions with familiar icons.** Icons help people recognize common actions throughout your app. Use the same icons as the system to represent actions such as Copy, Share, and Delete, wherever they appear. For a list of icons that represent common actions, see [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons). For additional guidance, see [Menus](https://developer.apple.com/design/human-interface-guidelines/menus). + +**Support the keyboard shortcuts defined for the standard menu items you include.** People expect to use the keyboard shortcuts they already know for standard menu items, like Copy, Cut, Paste, Save, and Print. Define custom keyboard shortcuts only when necessary. For guidance, see [Standard keyboard shortcuts](https://developer.apple.com/design/human-interface-guidelines/keyboards#Standard-keyboard-shortcuts). + +**Prefer short, one-word menu titles.** Various factors — like different display sizes and the presence of menu bar extras — can affect the spacing and appearance of your menus. One-word menu titles work especially well in the menu bar because they take little space and are easy for people to scan. If you need to use more than one word in the menu title, use title-style capitalization. + +## [App menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#App-menu) + +The app menu lists items that apply to your app or game as a whole, rather than to a specific task, document, or window. To help people quickly identify the active app, the menu bar displays your app name in bold. + +The app menu typically contains the following menu items listed in the following order. + +Menu item| Action| Guidance +---|---|--- +About _YourAppName_| Displays the About window for your app, which includes copyright and version information.| Prefer a short name of 16 characters or fewer. Don’t include a version number. +Settings…| Opens your [settings](https://developer.apple.com/design/human-interface-guidelines/settings) window, or your app’s page in iPadOS Settings.| Use only for app-level settings. If you also offer document-specific settings, put them in the File menu. +Optional app-specific items| Performs custom app-level setting or configuration actions.| List custom app-configuration items after the Settings item and within the same group. +Services (macOS only)| Displays a submenu of services from the system and other apps that apply to the current context.| +Hide _YourAppName_ (macOS only)| Hides your app and all of its windows, and then activates the most recently used app.| Use the same short app name you supply for the About item. +Hide Others (macOS only)| Hides all other open apps and their windows.| +Show All (macOS only)| Shows all other open apps and their windows behind your app’s windows.| +Quit _YourAppName_| Quits your app. Pressing Option changes Quit _YourAppName_ to Quit and Keep Windows.| Use the same short app name you supply for the About item. + +**Display the About menu item first.** Include a separator after the About menu item so that it appears by itself in a group. + +## [File menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#File-menu) + +The File menu contains commands that help people manage the files or documents an app supports. If your app doesn’t handle any types of files, you can rename or eliminate this menu. + +The File menu typically contains the following menu items listed in the following order. + +Menu item| Action| Guidance +---|---|--- +New _Item_| Creates a new document, file, or window.| For _Item_ , use a term that names the type of item your app creates. For example, Calendar uses _Event_ and _Calendar_. +Open| Can open the selected item or present an interface in which people select an item to open.| If people need to select an item in a separate interface, an ellipsis follows the command to indicate that more input is required. +Open Recent| Displays a submenu that lists recently opened documents and files that people can select, and typically includes a _Clear Menu_ item.| List document and filenames that people recognize in the submenu; don’t display file paths. List the documents in the order people last opened them, with the most recently opened document first. +Close| Closes the current window or document. Pressing Option changes Close to Close All. For a tab-based window, Close Tab replaces Close.| In a tab-based window, consider adding a Close Window item to let people close the entire window with one click or tap. +Close Tab| Closes the current tab in a tab-based window. Pressing Option changes Close Tab to Close Other Tabs.| +Close File| Closes the current file and all its associated windows.| Consider supporting this menu item if your app can open multiple views of the same file. +Save| Saves the current document or file.| Automatically save changes periodically as people work so they don’t need to keep choosing File > Save. For a new document, prompt people for a name and location. If you need to let people save a file in multiple formats, prefer a pop-up menu that lets people choose a format in the Save sheet. +Save All| Saves all open documents.| +Duplicate| Duplicates the current document, leaving both documents open. Pressing Option changes Duplicate to Save As.| Prefer Duplicate to menu items like Save As, Export, Copy To, and Save To because these items don’t clarify the relationship between the original file and the new one. +Rename…| Lets people change the name of the current document.| +Move To…| Prompts people to choose a new location for the document.| +Export As…| Prompts people for a name, output location, and export file format. After exporting the file, the current document remains open; the exported file doesn’t open.| Reserve the Export As item for when you need to let people export content in a format your app doesn’t typically handle. +Revert To| When people turn on autosaving, displays a submenu that lists recent document versions and an option to display the version browser. After people choose a version to restore, it replaces the current document.| +Page Setup…| Opens a panel for specifying printing parameters like paper size and printing orientation. A document can save the printing parameters that people specify.| Include the Page Setup item if you need to support printing parameters that apply to a specific document. Parameters that are global in nature, like a printer’s name, or that people change frequently, like the number of copies to print, belong in the Print panel. +Print…| Opens the standard Print panel, which lets people print to a printer, send a fax, or save as a PDF.| + +## [Edit menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Edit-menu) + +The Edit menu lets people make changes to content in the current document or text container, and provides commands for interacting with the Clipboard. Because many editing commands apply to any editable content, the Edit menu is useful even in apps that aren’t document-based. + +**Determine whether Find menu items belong in the Edit menu.** For example, if your app lets people search for files or other types of objects, Find menu items might be more appropriate in the File menu. + +The Edit menu typically contains the following top-level menu items, listed in the following order. + +Menu item| Action| Guidance +---|---|--- +Undo| Reverses the effect of the previous user operation.| Clarify the target of the undo. For example, if people just selected a menu item, you can append the item’s title, such as Undo Paste and Match Style. For a text entry operation, you might append the word _Typing_ to give Undo Typing. +Redo| Reverses the effect of the previous Undo operation.| Clarify the target of the redo. For example, if people just reversed a menu item selection, you can append the item’s title, such as Redo Paste and Match Style. For a text entry operation, you might append the word _Typing_ to give Redo Typing. +Cut| Removes the selected data and stores it on the Clipboard, replacing the previous contents of the Clipboard.| +Copy| Duplicates the selected data and stores it on the Clipboard.| +Paste| Inserts the contents of the Clipboard at the current insertion point. The Clipboard contents remain unchanged, permitting people to choose Paste multiple times.| +Paste and Match Style| Inserts the contents of the Clipboard at the current insertion point, matching the style of the inserted text to the surrounding text.| +Delete| Removes the selected data, but doesn’t place it on the Clipboard.| Provide a Delete menu item instead of an Erase or Clear menu item. Choosing Delete is the equivalent of pressing the Delete key, so it’s important for the naming to be consistent. +Select All| Highlights all selectable content in the current document or text container.| +Find| Displays a submenu containing menu items for performing search operations in the current document or text container. Standard submenus include: Find, Find and Replace, Find Next, Find Previous, Use Selection for Find, and Jump to Selection.| +Spelling and Grammar| Displays a submenu containing menu items for checking for and correcting spelling and grammar in the current document or text container. Standard submenus include: Show Spelling and Grammar, Check Document Now, Check Spelling While Typing, Check Grammar With Spelling, and Correct Spelling Automatically.| +Substitutions| Displays a submenu containing items that let people toggle automatic substitutions while they type in a document or text container. Standard submenus include: Show Substitutions, Smart Copy/Paste, Smart Quotes, Smart Dashes, Smart Links, Data Detectors, and Text Replacement.| +Transformations| Displays a submenu containing items that transform selected text. Standard submenus include: Make Uppercase, Make Lowercase, and Capitalize.| +Speech| Displays a submenu containing Start Speaking and Stop Speaking items, which control when the system audibly reads selected text.| +Start Dictation| Opens the dictation window and converts spoken words into text that’s added at the current insertion point. The system automatically adds the Start Dictation menu item at the bottom of the Edit menu.| +Emoji & Symbols| Displays a Character Viewer, which includes emoji, symbols, and other characters people can insert at the current insertion point. The system automatically adds the Emoji & Symbols menu item at the bottom of the Edit menu.| + +## [Format menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Format-menu) + +The Format menu lets people adjust text formatting attributes in the current document or text container. You can exclude this menu if your app doesn’t support formatted text editing. + +The Format menu typically contains the following top-level menu items, listed in the following order. + +Menu item| Action +---|--- +Font| Displays a submenu containing items for adjusting font attributes of the selected text. Standard submenus include: Show Fonts, Bold, Italic, Underline, Bigger, Smaller, Show Colors, Copy Style, and Paste Style. +Text| Displays a submenu containing items for adjusting text attributes of the selected text. Standard submenus include: Align Left, Align Center, Justify, Align Right, Writing Direction, Show Ruler, Copy Ruler, and Paste Ruler. + +## [View menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#View-menu) + +The View menu lets people customize the appearance of all an app’s windows, regardless of type. + +Important + +The View menu doesn’t include items for navigating between or managing specific windows; the [Window menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Window-menu) provides these commands. + +**Provide a View menu even if your app supports only a subset of the standard view functions.** For example, if your app doesn’t include a tab bar, toolbar, or sidebar, but does support full-screen mode, provide a View menu that includes only the Enter/Exit Full Screen menu item. + +**Ensure that each show/hide item title reflects the current state of the corresponding view.** For example, when the toolbar is hidden, provide a Show Toolbar menu item; when the toolbar is visible, provide a Hide Toolbar menu item. + +The View menu typically contains the following top-level menu items, listed in the following order. + +Menu item| Action +---|--- +Show/Hide Tab Bar| Toggles the visibility of the [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars) above the body area in a tab-based window +Show All Tabs/Exit Tab Overview| Enters and exits a view (similar to Mission Control) that provides an overview of all open tabs in a tab-based window +Show/Hide Toolbar| In a window that includes a [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars), toggles the toolbar’s visibility +Customize Toolbar| In a window that includes a toolbar, opens a view that lets people customize toolbar items +Show/Hide Sidebar| In a window that includes a [sidebar](https://developer.apple.com/design/human-interface-guidelines/sidebars), toggles the sidebar’s visibility +Enter/Exit Full Screen| In an app that supports a [full-screen experience](https://developer.apple.com/design/human-interface-guidelines/going-full-screen), opens the window at full-screen size in a new space + +## [App-specific menus](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#App-specific-menus) + +Your app’s custom menus appear in the menu bar between the View menu and the Window menu. For example, Safari’s menu bar includes app-specific History and Bookmarks menus. + +**Provide app-specific menus for custom commands.** People look in the menu bar when searching for app-specific commands, especially when using an app for the first time. Even when commands are available elsewhere in your app, it’s important to list them in the menu bar. Putting commands in the menu bar makes them easier for people to find, lets you assign keyboard shortcuts to them, and makes them more accessible to people using Full Keyboard Access. Excluding commands from the menu bar — even infrequently used or advanced commands — risks making them difficult for everyone to find. + +**As much as possible, reflect your app’s hierarchy in app-specific menus.** For example, Mail lists the Mailbox, Message, and Format menus in an order that mirrors the relationships of these items: mailboxes contain messages, and messages contain formatting. + +**Aim to list app-specific menus in order from most to least general or commonly used.** People tend to expect menus in the leading end of a list to be more specialized than menus in the trailing end. + +## [Window menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Window-menu) + +The Window menu lets people navigate, organize, and manage an app’s windows. + +Important + +The 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](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#View-menu); to close a window, people choose Close in the [File menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#File-menu). + +**Provide a Window menu even if your app has only one window.** Include the Minimize and Zoom menu items so people using Full Keyboard Access can use the keyboard to invoke these functions. + +**Consider including menu items for showing and hiding panels.** A [panel](https://developer.apple.com/design/human-interface-guidelines/panels) provides information, configuration options, or tools for interacting with content in a primary window, and typically appears only when people need it. There’s no need to provide access to the font panel or text color panel because the Format menu lists these panels. + +The Window menu typically contains the following top-level menu items, listed in the following order. + +Menu item| Action| Guidance +---|---|--- +Minimize| Minimizes the active window to the Dock. Pressing the Option key changes this item to Minimize All.| +Zoom| Toggles between a predefined size appropriate to the window’s content and the window size people set. Pressing the Option key changes this item to Zoom All.| Avoid using Zoom to enter or exit full-screen mode. The [View menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#View-menu) supports these functions. +Show Previous Tab| Shows the tab before the current tab in a tab-based window.| +Show Next Tab| Shows the tab after the current tab in a tab-based window.| +Move Tab to New Window| Opens the current tab in a new window.| +Merge All Windows| Combines all open windows into a single tabbed window.| +Enter/Exit Full Screen| In an app that supports a [full-screen experience](https://developer.apple.com/design/human-interface-guidelines/going-full-screen), opens the window at full-screen size in a new space.| Include this item in the Window menu only if your app doesn’t have a View menu. In this scenario, continue to provide separate Minimize and Zoom menu items. +Bring All to Front| Brings all an app’s open windows to the front, maintaining their onscreen location, size, and layering order. (Clicking the app icon in the Dock has the same effect.) Pressing the Option key changes this item to Arrange in Front, which brings an app’s windows to the front in a neatly tiled arrangement.| +_Name of an open app-specific window_| Brings the selected window to the front.| List the currently open windows in alphabetical order for easy scanning. Avoid listing panels or other modal views. + +## [Help menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Help-menu) + +The Help menu — located at the trailing end of the menu bar — provides access to an app’s help documentation. When you use the Help Book format for this documentation, macOS automatically includes a search field at the top of the Help menu. + +Menu item| Action| Guidance +---|---|--- +Send _YourAppName_ Feedback to Apple| Opens the Feedback Assistant, in which people can provide feedback.| +_YourAppName_ Help| When the content uses the Help Book format, opens the content in the built-in Help Viewer.| +_Additional Item_| | Use a separator between your primary help documentation and additional items, which might include registration information or release notes. Keep the total the number of items you list in the Help menu small to avoid overwhelming people with too many choices when they need help. Alternatively, consider linking to additional items from within your help documentation. + +For guidance, see [Offering help](https://developer.apple.com/design/human-interface-guidelines/offering-help); for developer guidance, see [`NSHelpManager`](https://developer.apple.com/documentation/AppKit/NSHelpManager). + +## [Dynamic menu items](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Dynamic-menu-items) + +In rare cases, it can make sense to present a _dynamic menu item_ , which is a menu item that changes its behavior when people choose it while pressing a modifier key (Control, Option, Shift, or Command). For example, the _Minimize_ item in the Window menu changes to _Minimize All_ when people press the Option key. + +**Avoid making a dynamic menu item the only way to accomplish a task.** Dynamic menu items are hidden by default, so they’re best suited to offer shortcuts to advanced actions that people can accomplish in other ways. For example, if someone hasn’t discovered the _Minimize All_ dynamic menu item in the Window menu, they can still minimize each open window. + +**Use dynamic menu items primarily in menu bar menus.** Adding a dynamic menu item to contextual or Dock menus can make the item even harder for people to discover. + +**Require only a single modifier key to reveal a dynamic menu item.** It can be physically awkward to press more than one key while simultaneously opening a menu and choosing a menu item, in addition to reducing the discoverability of the dynamic behavior. For developer guidance, see [`isAlternate`](https://developer.apple.com/documentation/AppKit/NSMenuItem/isAlternate). + +Tip + +macOS automatically sets the width of a menu to hold the widest item, including dynamic menu items. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Platform-considerations) + + _Not supported in iOS, tvOS, visionOS, or watchOS._ + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#iPadOS) + +The menu bar displays the top-level menus for your app or game, including both system-provided menus and any custom ones you choose to add. People reveal the menu bar by moving the pointer to the top edge of the screen, or swiping down from it. When visible, the menu bar occupies the same vertical space as the [status bar](https://developer.apple.com/design/human-interface-guidelines/status-bars) at the top edge of the screen. + +As with the macOS menu bar, the iPadOS menu bar provides a familiar way for people to learn what an app does, find the commands they need, and discover keyboard shortcuts. While they are similar in most respects, there are a few key differences between the menu bars on each platform. + +| iPadOS| macOS +---|---|--- +Menu bar visibility| Hidden until revealed| Visible by default +Horizontal alignment| Centered| Leading side +Menu bar extras| Not available| System default and custom +Window controls| In the menu bar when the app is full screen| Never in the menu bar +Apple menu| Not available| Always available +App menu| About, Services, and app visibility-related items not available| Always available + +**Because the menu bar is often hidden when running an app full screen, ensure that people can access all of your app’s functions through its UI.** In particular, always offer other ways to accomplish tasks assigned to dynamic menu items, since these are only available when a hardware keyboard is connected. Avoid using the menu bar as a catch-all location for functionality that doesn’t fit in elsewhere. + +**Reserve the YourAppName > Settings menu item for opening your app’s page in iPadOS Settings.** If your app includes its own internal preferences area, link to it with a separate menu item beneath Settings in the same group. Place any other custom app-wide configuration options in this section as well. + +**For apps with tab-style navigation, consider adding each tab as a menu item in the View menu.** Since each tab is a different view of the app, the View menu is a natural place to offer an additional way to navigate between tabs. If you do this, consider assigning key bindings to each tab to make navigation even more convenient. + +**Consider grouping menu items into submenus to conserve vertical space.** Menu item rows on iPad use more space than on Mac to make them easier to tap. Because of this, and the smaller screen sizes of some iPads, it can be helpful to group related items into submenus more frequently than in the menu bar on Mac. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#macOS) + +The menu bar in macOS includes the Apple menu, which is always the first item on the leading side of the menu bar. The Apple menu includes system-defined menu items that are always available, and you can’t modify or remove it. Space permitting, the system can also display menu bar extras in the trailing end of the menu bar. For guidance, see [Menu bar extras](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Menu-bar-extras). + +When menu bar space is constrained, the system prioritizes the display of menus and essential menu bar extras. To ensure that menus remain readable, the system may decrease the space between the titles, truncating them if necessary. + +When people enter full-screen mode, the menu bar typically hides until they reveal it by moving the pointer to the top of the screen. For guidance, see [Going full screen](https://developer.apple.com/design/human-interface-guidelines/going-full-screen). + +#### [Menu bar extras](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Menu-bar-extras) + +A menu bar extra exposes app-specific functionality using an icon that appears in the menu bar when your app is running, even when it’s not the frontmost app. Menu bar extras are on the opposite side of the menu bar from your app’s menus. For developer guidance, see [`MenuBarExtra`](https://developer.apple.com/documentation/SwiftUI/MenuBarExtra). + +When necessary, the system hides menu bar extras to make room for app menus. Similarly, if there are too many menu bar extras, the system may hide some to avoid crowding app menus. + +![A screenshot of the Input menu bar extra and its menu.](https://docs-assets.developer.apple.com/published/97a8b1969dd941fc8920da157b345fb5/menu-bar-extras%402x.png) + +**Consider using a symbol to represent your menu bar extra.** You can create an [icon](https://developer.apple.com/design/human-interface-guidelines/icons) or you can choose one of the [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols), using it as-is or customizing it to suit your needs. Both interface icons and symbols use black and clear colors to define their shapes; the system can apply other colors to the black areas in each image so it looks good on both dark and light menu bars, and when your menu bar extra is selected. The menu bar’s height is 24 pt. + +**Display a menu — not a popover — when people click your menu bar extra.** Unless the app functionality you want to expose is too complex for a menu, avoid presenting it in a [popover](https://developer.apple.com/design/human-interface-guidelines/popovers). + +**Let people — not your app — decide whether to put your menu bar extra in the menu bar.** Typically, people add a menu bar extra to the menu bar by changing a setting in an app’s settings window. To ensure discoverability, however, consider giving people the option of doing so during setup. + +**Avoid relying on the presence of menu bar extras.** The system hides and shows menu bar extras regularly, and you can’t be sure which other menu bar extras people have chosen to display or predict the location of your menu bar extra. + +**Consider exposing app-specific functionality in other ways, too.** For example, you can provide a [Dock menu](https://developer.apple.com/design/human-interface-guidelines/dock-menus) that appears when people Control-click your app’s Dock icon. People can hide or choose not to use your menu bar extra, but a Dock menu is aways available when your app is running. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Related) + +[Menus](https://developer.apple.com/design/human-interface-guidelines/menus) + +[Dock menus](https://developer.apple.com/design/human-interface-guidelines/dock-menus) + +[Standard keyboard shortcuts](https://developer.apple.com/design/human-interface-guidelines/keyboards#Standard-keyboard-shortcuts) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Developer-documentation) + +[`CommandMenu`](https://developer.apple.com/documentation/SwiftUI/CommandMenu) — SwiftUI + +[Adding menus and shortcuts to the menu bar and user interface](https://developer.apple.com/documentation/UIKit/adding-menus-and-shortcuts-to-the-menu-bar-and-user-interface) — UIKit + +[`NSStatusBar`](https://developer.apple.com/documentation/AppKit/NSStatusBar) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/873F40BE-101A-4C0D-99F0-F5C7CE7B47A3/10046_wide_250x141_1x.jpg) Elevate the design of your iPad app ](https://developer.apple.com/videos/play/wwdc2025/208) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added guidance for the menu bar in iPadOS. + diff --git a/skills/hig-components-menus/references/toolbars.md b/skills/hig-components-menus/references/toolbars.md new file mode 100644 index 00000000..aaf95a60 --- /dev/null +++ b/skills/hig-components-menus/references/toolbars.md @@ -0,0 +1,256 @@ +--- +title: "Toolbars | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/toolbars + +# Toolbars + +A toolbar provides convenient access to frequently used commands, controls, navigation, and search. + +![A stylized representation of a toolbar, with a Back control on the leading edge, and Compose, Share, and the More menu on the trailing edge. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/c88cf44cf526483c94aa15bd2eb984e1/components-toolbar-intro%402x.png) + +A toolbar consists of one or more sets of controls arranged horizontally along the top or bottom edge of the view, grouped into logical sections. + +Toolbars act on content in the view, facilitate navigation, and help orient people in the app. They include three types of content: + + * The title of the current view + + * Navigation controls, like back and forward, and [search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields) + + * Actions, or bar items, like [buttons](https://developer.apple.com/design/human-interface-guidelines/buttons) and [menus](https://developer.apple.com/design/human-interface-guidelines/menus) + + + + +In contrast to a toolbar, a [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars) is specifically for navigating between areas of an app. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/toolbars#Best-practices) + +**Choose items deliberately to avoid overcrowding.** People need to be able to distinguish and activate each item, so you don’t want to put too many items in the toolbar. To accommodate variable view widths, define which items move to the overflow menu as the toolbar becomes narrower. + +Note + +The 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. + +**Add a More menu to contain additional actions.** Prioritize less important actions for inclusion in the More menu. Try to include all actions in the toolbar if possible, and only add this menu if you really need it. + + * Standard + * Compact + + + +![A screenshot of the Notes app on Mac, with the window wide enough for the toolbar to include all of the available toolbar items. A More menu button appears on the trailing side of the toolbar, with the menu open beneath it.](https://docs-assets.developer.apple.com/published/38a70b5303c70f442fdf6e60c1caf000/toolbars-notes-app-expanded-icons%402x.png)The standard toolbar in macOS Notes includes a More menu with extra commands. + +![A screenshot of the Notes app on Mac, with the window narrow enough that the system moves several items from the toolbar into an overflow menu, including the More menu button. The overflow menu is open to show the items it includes.](https://docs-assets.developer.apple.com/published/d946d1a2815b1a181b0cd090e536cb21/toolbars-notes-app-collapsed-icons%402x.png)As the window narrows, the More menu moves into an overflow menu along with other toolbar items that no longer fit. + +**In iPadOS and macOS apps, consider letting people customize the toolbar to include their most common items.** Toolbar customization is especially useful in apps that provide a lot of items — or that include advanced functionality that not everyone needs — and in apps that people tend to use for long periods of time. For example, it works well to make a range of editing actions available for toolbar customization, because people often use different types of editing commands based on their work style and their current project. + +**Reduce the use of toolbar backgrounds and tinted controls.** Any custom backgrounds and appearances you use might overlay or interfere with background effects that the system provides. Instead, use the content layer to inform the color and appearance of the toolbar, and use a [`ScrollEdgeEffectStyle`](https://developer.apple.com/documentation/SwiftUI/ScrollEdgeEffectStyle) when necessary to distinguish the toolbar area from the content area. This approach helps your app express its unique personality without distracting from content. + +**Avoid applying a similar color to toolbar item labels and content layer backgrounds.** If your app already has bright, colorful content in the content layer, prefer using the default monochromatic appearance of toolbars. For more guidance, see [Liquid Glass color](https://developer.apple.com/design/human-interface-guidelines/color#Liquid-Glass-color). + +**Prefer using standard components in a toolbar.** By default, standard buttons, text fields, headers, and footers have corner radii that are concentric with bar corners. If you need to create a custom component, ensure that its corner radius is also concentric with the bar’s corners. + +**Consider temporarily hiding toolbars for a distraction-free experience.** Sometimes people appreciate a minimal interface to reduce distractions or reveal more content. If you support this, do so contextually when it makes the most sense, and offer ways to reliably restore hidden interface elements. For guidance, see [Going full screen](https://developer.apple.com/design/human-interface-guidelines/going-full-screen). For guidance specific to visionOS, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + +## [Titles](https://developer.apple.com/design/human-interface-guidelines/toolbars#Titles) + +**Provide a useful title for each window.** A title helps people confirm their location as they navigate your app, and differentiates between the content of multiple open windows. If titling a toolbar seems redundant, you can leave the title area empty. For example, Notes doesn’t title the current note when a single window is open, because the first line of content typically supplies sufficient context. However, when opening notes in separate windows, the system titles them with the first line of content so people can tell them apart. + +**Don’t title windows with your app name.** Your app’s name doesn’t provide useful information about your content hierarchy or any window or area in your app, so it doesn’t work well as a title. + +**Write a concise title.** Aim for a word or short phrase that distills the purpose of the window or view, and keep the title under 15 characters long so you leave enough room for other controls. + +## [Navigation](https://developer.apple.com/design/human-interface-guidelines/toolbars#Navigation) + +A toolbar with navigation controls appears at the top of a window, helping people move through a hierarchy of content. A toolbar also often contains a [search field](https://developer.apple.com/design/human-interface-guidelines/search-fields) for quick navigation between areas or pieces of content. In iOS, a navigation-specific toolbar is sometimes called a navigation bar. + +**Use the standard Back and Close buttons.** People know that the standard Back button lets them retrace their steps through a hierarchy of information, and the standard Close button closes a modal view. Prefer the standard symbols for each, and don’t use a text label that says _Back_ or _Close_. If you create a custom version of either, make sure it still looks the same, behaves as people expect, and matches the rest of your interface, and ensure you consistently implement it throughout your app or game. For guidance, see [Icons](https://developer.apple.com/design/human-interface-guidelines/icons). + +![An illustration of a capsule-shape Back button that includes the Back symbol on the leading side, grouped with Back in text on the trailing side.](https://docs-assets.developer.apple.com/published/de859b5c4d42c9df2e92c680d48a37b2/toolbars-navigation-action-back-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of the standard circular Back button that includes the standard Back symbol.](https://docs-assets.developer.apple.com/published/bf5f1cf48120b10f031bd9df57124f0f/toolbars-navigation-action-back-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +## [Actions](https://developer.apple.com/design/human-interface-guidelines/toolbars#Actions) + +**Provide actions that support the main tasks people perform.** In general, prioritize the commands that people are most likely to want. These commands are often the ones people use most frequently, but in some apps it might make sense to prioritize commands that map to the highest level or most important objects people work with. + +**Make sure the meaning of each control is clear.** Don’t make people guess or experiment to figure out what a toolbar item does. Prefer simple, recognizable symbols for items instead of text, except for actions like _edit_ that aren’t well-represented by symbols. For guidance on symbols that represent common actions, see [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons). + +![An illustration of an item group with text button labels for Filter, Delete, and New.](https://docs-assets.developer.apple.com/published/e39b41732b2b7cf5a40c682f6ec28448/toolbars-prefer-symbols-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of an item group with symbol button labels for Filter, Delete, and New.](https://docs-assets.developer.apple.com/published/a90ab6d6f58aa023f4b830e4045b507b/toolbars-prefer-symbols-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Prefer system-provided symbols without borders.** System-provided symbols are familiar, automatically receive appropriate coloring and vibrancy, and respond consistently to user interactions. Borders (like outlined circle symbols) aren’t necessary because the section provides a visible container, and the system defines hover and selection state appearances automatically. For guidance, see [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols). + +![An illustration of an item group with buttons for Filter and More. The buttons are labeled with symbols with circular borders.](https://docs-assets.developer.apple.com/published/90f36d797636e931c39663c146c1cb11/toolbars-icons-circle-outline-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of an item group with buttons for Filter and More. The buttons are labeled with symbols without borders.](https://docs-assets.developer.apple.com/published/e7b2189bb13488aab5e7eacc5eea9b1b/toolbars-icons-no-outline-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Use the`.prominent` style for key actions such as Done or Submit.** This separates and tints the action so there’s a clear focal point. Only specify one primary action, and put it on the trailing side of the toolbar. + +![An illustration of two toolbar items, with a Filter button on the leading side and a Done button on the trailing side. The buttons are ungrouped, and the Done button has the prominent style applied to indicate that it's the primary action.](https://docs-assets.developer.apple.com/published/36c552c629c8a980c83501134e53d749/toolbars-prominent-action-tinted%402x.png) + +## [Item groupings](https://developer.apple.com/design/human-interface-guidelines/toolbars#Item-groupings) + +You can position toolbar items in three locations: the leading edge, center area, and trailing edge of the toolbar. These areas provide familiar homes for navigation controls, window or document titles, common actions, and search. + + * **Leading edge.** Elements that let people return to the previous document and show or hide a sidebar appear at the far leading edge, followed by the view title. Next to the title, the toolbar can include a document menu that contains standard and app-specific commands that affect the document as a whole, such as Duplicate, Rename, Move, and Export. To ensure that these items are always available, items on the toolbar’s leading edge aren’t customizable. + + * **Center area.** Common, useful controls appear in the center area, and the view title can appear here if it’s not on the leading edge. In macOS and iPadOS, people can add, remove, and rearrange items here if you let them customize the toolbar, and items in this section automatically collapse into the system-managed overflow menu when the window shrinks enough in size. + + * **Trailing edge.** The trailing edge contains important items that need to remain available, buttons that open nearby inspectors, an optional search field, and the More menu that contains additional items and supports toolbar customization. It also includes a primary action like Done when one exists. Items on the trailing edge remain visible at all window sizes. + + + + +![A diagram of the top toolbar in the Freeform app on iPad. Callouts indicate the location of item groupings on the leading edge, center area, and trailing edge of the toolbar.](https://docs-assets.developer.apple.com/published/882504f8e992b3ce0e373f47523adf5e/toolbars-ipad-anatomy%402x.png) + +To position items in the groupings you want, pin them to the leading edge, center, or trailing edge, and insert space between buttons or other items where appropriate. + +**Group toolbar items logically by function and frequency of use.** For example, Keynote includes several sections that are based on functionality, including one for presentation-level commands, one for playback commands, and one for object insertion. + +**Group navigation controls and critical actions like Done, Close, or Save in dedicated, familiar, and visually distinct sections.** This reflects their importance and helps people discover and understand these actions. + +![An illustration of a top toolbar on iPhone, with controls for back, forward, tool selection, and the More menu grouped in a single section on the trailing edge.](https://docs-assets.developer.apple.com/published/9349ac4f406f84c24e98a6b9445b9560/toolbars-layout-grouping-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a top toolbar on iPhone, with controls for back and forward grouped on the leading edge, and controls for tool selection and the More menu grouped on the trailing edge.](https://docs-assets.developer.apple.com/published/2fede653e14b982c4b2c65f3ca657278/toolbars-layout-grouping-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Keep consistent groupings and placement across platforms.** This helps people develop familiarity with your app and trust that it behaves similarly regardless of where they use it. + +**Minimize the number of groups.** Too many groups of controls can make a toolbar feel cluttered and confusing, even with the added space on iPad and Mac. In general, aim for a maximum of three. + +**Keep actions with text labels separate.** Placing an action with a text label next to an action with a symbol can create the illusion of a single action with a combined text and symbol, leading to confusion and misinterpretation. If your toolbar includes multiple text-labeled buttons, the text of those buttons may appear to run together, making the buttons indistinguishable. Add separation by inserting fixed space between the buttons. For developer guidance, see [`UIBarButtonItem.SystemItem.fixedSpace`](https://developer.apple.com/documentation/UIKit/UIBarButtonItem/SystemItem/fixedSpace). + +![An illustration of a top toolbar on iPhone, with an Edit control with a text label and a Share control with a symbol grouped together on the trailing edge.](https://docs-assets.developer.apple.com/published/de7f7298c70900b9c2f65d5cae7c6d60/toolbars-layout-text-action-grouping-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a top toolbar on iPhone, with an Edit control with a text label and a Share control with a symbol grouped into individual sections on the trailing edge.](https://docs-assets.developer.apple.com/published/c46f284f584841d7783aa2090426ca9b/toolbars-layout-text-action-grouping-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/toolbars#Platform-considerations) + + _No additional considerations for tvOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/toolbars#iOS) + +**Prioritize only the most important items for inclusion in the main toolbar area.** Because space is so limited, carefully consider which actions are essential to your app and include those first. Create a More menu to include additional items. + +**Use a large title to help people stay oriented as they navigate and scroll.** By default, a large title transitions to a standard title as people begin scrolling the content, and transitions back to large when people scroll to the top, reminding them of their current location. For developer guidance, see [`prefersLargeTitles`](https://developer.apple.com/documentation/UIKit/UINavigationBar/prefersLargeTitles). + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/toolbars#iPadOS) + +**Consider combining a toolbar with a tab bar.** In iPadOS, a toolbar and a [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars) can coexist in the same horizontal space at the top of the view. This is particularly useful for layouts where you want to navigate between a few main app areas while keeping the full width of the window available for content. For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) and [Windows](https://developer.apple.com/design/human-interface-guidelines/windows). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/toolbars#macOS) + +In a macOS app, the toolbar resides in the frame at the top of a window, either below or integrated with the title bar. Note that window titles can display inline with controls, and toolbar items don’t include a bezel. + +![A diagram of a Finder window in macOS with callouts showing the location of the toolbar and the window frame.](https://docs-assets.developer.apple.com/published/a595dda6ba3dd30cbd7c9851d941be72/toolbars-mac-window-anatomy%402x.png) + +**Make every toolbar item available as a command in the menu bar.** Because people can customize the toolbar or hide it, it can’t be the only place that presents a command. In contrast, it doesn’t make sense to provide a toolbar item for every menu item, because not all menu commands are important enough or used often enough to warrant space in the toolbar. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/toolbars#visionOS) + +In visionOS, the system-provided toolbar appears along the bottom edge of a window, above the window-management controls, and in a parallel plane that’s slightly in front of the window along the z-axis. + +![A screenshot of a toolbar along the bottom of the Notes app window in visionOS.](https://docs-assets.developer.apple.com/published/47985b0aebd160790502368ff9e282a1/visionos-toolbar-notes-app%402x.png) + +To maintain the legibility of toolbar items as content scrolls behind them, visionOS uses a variable blur in the bar background. The variable blur anchors the bar above the scrolling content while letting the view’s glass material remain uniform and undivided. + +In visionOS, you can supply either a symbol or a text label for each toolbar item. When people look at a toolbar item that contains a symbol, visionOS reveals the text label, providing additional information. + +**Prefer using a system-provided toolbar.** The standard toolbar has a consistent and familiar appearance and is optimized to work well with eye and hand input. In addition, the system automatically places a standard toolbar in the correct position in relation to its window. + +![A screenshot of a toolbar in visionOS.](https://docs-assets.developer.apple.com/published/449acaaf0268d1fff08e9bf41b7c82d9/visionos-toolbar-standard-layout%402x.png) + +**Avoid creating a vertical toolbar.** In visionOS, [tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars) are vertical, so presenting a vertical toolbar could confuse people. + +**Try to prevent windows from resizing below the width of the toolbar.** visionOS doesn’t include a menu bar where each app lists all its actions, so it’s important for the toolbar to provide reliable access to essential controls regardless of a window’s size. + +**If your app can enter a modal state, consider offering contextually relevant toolbar controls.** For example, a photo-editing app might enter a modal state to help people perform a multistep editing task. In this scenario, the controls in the modal editing view are different from the controls in the main window. Be sure to reinstate the window’s standard toolbar controls when the app exits the modal state. + +**Avoid using a pull-down menu in a toolbar.** A pull-down menu lets you offer additional actions related to a toolbar item, but can be difficult for people to discover and may clutter your interface. Because a toolbar is located at the bottom edge of a window in visionOS, a pull-down menu might obscure the standard window controls that appear below the bottom edge. For guidance, see [Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/toolbars#watchOS) + +A toolbar button lets you offer important app functionality in a view that displays related content. You can place toolbar buttons in the top corners or along the bottom. If you place these buttons above scrolling content, the buttons always remain visible, as the content scrolls under them. + +![A screenshot showing toolbar buttons in the top leading and trailing corners.](https://docs-assets.developer.apple.com/published/464c7be02e97dcb7470c9b8202dc2b59/toolbars-watch-top-buttons%402x.png) + +Top toolbar buttons + +![A screenshot showing two toolbar buttons in the bottom leading and trailing corners.](https://docs-assets.developer.apple.com/published/53d742601fa4b250207336099587e1d3/toolbars-watch-bottom-buttons%402x.png) + +Bottom toolbar buttons + +For developer guidance, see [`topBarLeading`](https://developer.apple.com/documentation/SwiftUI/ToolbarItemPlacement/topBarLeading), [`topBarTrailing`](https://developer.apple.com/documentation/SwiftUI/ToolbarItemPlacement/topBarTrailing), or [`bottomBar`](https://developer.apple.com/documentation/SwiftUI/ToolbarItemPlacement/bottomBar). + +You can also place a button in the scrolling view. By default, a scrolling toolbar button remains hidden until people reveal it by scrolling up. People frequently scroll to the top of a scrolling view, so discovering a toolbar button is automatic. + +![A screenshot showing two toolbar buttons in the top leading and trailing corners. The toolbar also has a primary action button in the scroll view, but it's hidden.](https://docs-assets.developer.apple.com/published/027a24ac805a9e7976a1ccd1df68f0d3/toolbars-watch-primary-button-hidden%402x.png) + +Toolbar button hidden + +![A screenshot showing two toolbar buttons in the top leading and trailing corners. The toolbar also displays a primary action button in the scroll view.](https://docs-assets.developer.apple.com/published/e010a0cdf42f792ebb4715cdd5f65676/toolbars-watch-primary-button-visible%402x.png) + +Toolbar button shown + +For developer guidance, see [`primaryAction`](https://developer.apple.com/documentation/SwiftUI/ToolbarItemPlacement/primaryAction). + +**Use a scrolling toolbar button for an important action that isn’t a primary app function.** A toolbar button gives you the flexibility to offer important functionality in a view whose primary purpose is related to that functionality, but may not be the same. For example, Mail provides the essential New Message action in a toolbar button at the top of the Inbox view. The primary purpose of the Inbox is to display a scrollable list of email messages, so it makes sense to offer the closely related compose action in a toolbar button at the top of the view. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/toolbars#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/toolbars#Related) + +[Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars) + +[Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +[Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons) + +[Search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields) + +[Apple Design Resources](https://developer.apple.com/design/resources/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/toolbars#Developer-documentation) + +[Toolbars](https://developer.apple.com/documentation/SwiftUI/Toolbars) — SwiftUI + +[`UIToolbar`](https://developer.apple.com/documentation/UIKit/UIToolbar) — UIKit + +[`NSToolbar`](https://developer.apple.com/documentation/AppKit/NSToolbar) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/toolbars#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/toolbars#Change-log) + +Date| Changes +---|--- +December 16, 2025| Updated guidance for Liquid Glass. +June 9, 2025| Added guidance for grouping bar items, updated guidance for using symbols, and incorporated navigation bar guidance. +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Updated guidance for using toolbars in watchOS. + diff --git a/skills/hig-components-search/SKILL.md b/skills/hig-components-search/SKILL.md new file mode 100644 index 00000000..7804f7ff --- /dev/null +++ b/skills/hig-components-search/SKILL.md @@ -0,0 +1,68 @@ +--- +name: hig-components-search +version: 1.0.0 +description: >- + Apple HIG guidance for navigation-related components including search fields, + page controls, and path controls. Use this skill when the user says "how should + search work in my app," "I need a breadcrumb," "how do I paginate content," or + asks about search field, search bar, page control, path control, breadcrumb, + navigation component, search UX, search suggestions, search scopes, paginated + content navigation, or file path hierarchy display. Cross-references: + hig-components-menus, hig-components-controls, hig-components-dialogs, + hig-patterns. +--- + +# Apple HIG: Navigation Components + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Search: discoverable with instant feedback.** Place search fields where users expect them (top of list, toolbar/navigation bar). Show results as the user types. + +2. **Page controls: position in a flat page sequence.** For discrete, equally weighted pages (onboarding, photo gallery). Show current page and total count. + +3. **Path controls: file hierarchy navigation.** macOS path controls display location within a directory structure and allow jumping to any ancestor. + +4. **Search scopes narrow large result sets.** Provide scope buttons so users can filter without complex queries. + +5. **Clear empty states for search.** Helpful message suggesting corrections or alternatives, not a blank screen. + +6. **Page controls are not for hierarchical navigation.** Flat, linear sequences only. Use navigation controllers, tab bars, or sidebars for hierarchy. + +7. **Keep path controls concise.** Show meaningful segments only. Users can click any segment to navigate directly. + +8. **Support keyboard for search.** Command-F and system search shortcuts should activate search. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [search-fields.md](references/search-fields.md) | Search fields | Scopes, tokens, instant results, placement | +| [page-controls.md](references/page-controls.md) | Page controls | Dot indicators, flat page sequences | +| [path-controls.md](references/path-controls.md) | Path controls | Breadcrumbs, ancestor navigation | + +## Output Format + +1. **Component recommendation** -- search field, page control, or path control, and why. +2. **Behavior specification** -- interaction model (search-as-you-type, swipe for pages, click-to-navigate for paths). +3. **Platform differences** across iOS, iPadOS, macOS, visionOS. + +## Questions to Ask + +1. What type of content is being searched or navigated? +2. Which platforms? +3. How large is the dataset? +4. Is search the primary interaction? + +## Related Skills + +- **hig-components-menus** -- Toolbars and menu bars hosting search and navigation controls +- **hig-components-controls** -- Text fields, pickers, segmented controls in search interfaces +- **hig-components-dialogs** -- Popovers and sheets for expanded search or filtering +- **hig-patterns** -- Navigation patterns and information architecture +- **hig-foundations** -- Typography and layout for navigation components + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-search/references/page-controls.md b/skills/hig-components-search/references/page-controls.md new file mode 100644 index 00000000..0e22d504 --- /dev/null +++ b/skills/hig-components-search/references/page-controls.md @@ -0,0 +1,120 @@ +--- +title: "Page controls | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/page-controls + +# Page controls + +A page control displays a row of indicator images, each of which represents a page in a flat list. + +![A stylized representation of a page control with an indicator denoting the active page. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/a0dcd33d7bfca7feb019c4743b89c7c0/components-page-dots-intro%402x.png) + +The scrolling row of indicators helps people navigate the list to find the page they want. Page controls can handle an arbitrary number of pages, making them particularly useful in situations where people can create custom lists. + +Page controls appear as a series of small indicator dots by default, representing the available pages. A solid dot denotes the current page. Visually, these dots are always equidistant, and are clipped if there are too many to fit in the window. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/page-controls#Best-practices) + +**Use page controls to represent movement between an ordered list of pages.** Page controls don’t represent hierarchical or nonsequential page relationships. For more complex navigation, consider using a sidebar or split view instead. + +**Center a page control at the bottom of the view or window.** To ensure people always know where to find a page control, center it horizontally and position it near the bottom of the view. + +**Although page controls can handle any number of pages, don’t display too many**. More than about 10 dots are hard to count at a glance. If your app needs to display more than 10 pages as peers, consider using a different arrangement‚ such as a grid, that lets people navigate the content in any order. + +## [Customizing indicators](https://developer.apple.com/design/human-interface-guidelines/page-controls#Customizing-indicators) + +By default, a page control uses the system-provided dot image for all indicators, but it can also display a unique image to help people identify a specific page. For example, Weather uses the `location.fill` symbol to distinguish the current location’s page. + +If it enhances your app or game, you can provide a custom image to use as the default image for all indicators and you can also supply a different image for a specific page. For developer guidance, see [`preferredIndicatorImage`](https://developer.apple.com/documentation/UIKit/UIPageControl/preferredIndicatorImage) and [`setIndicatorImage(_:forPage:)`](https://developer.apple.com/documentation/UIKit/UIPageControl/setIndicatorImage\(_:forPage:\)). + +**Make sure custom indicator images are simple and clear.** Avoid complex shapes, and don’t include negative space, text, or inner lines, because these details can make an icon muddy and indecipherable at very small sizes. Consider using simple [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) as indicators or design your own icons. For guidance, see [Icons](https://developer.apple.com/design/human-interface-guidelines/icons). + +**Customize the default indicator image only when it enhances the page control’s overall meaning.** For example, if every page you list contains bookmarks, you might use the `bookmark.fill` symbol as the default indicator image. + +**Avoid using more than two different indicator images in a page control.** If your list contains one page with special meaning — like the current-location page in Weather — you can make the page easy to find by giving it a unique indicator image. In contrast, a page control that uses several unique images to mark several important pages is hard to use because people must memorize the meaning of each image. A page control that displays more than two types of indicator images tends to look messy and haphazard, even when each image is clear. + +![An illustration that represents the Weather app highlighted to show a page control at the bottom edge of the screen. The page control displays a mix of icons, such as weak sun, cloud, cloud with sun, and cloud with drizzle.](https://docs-assets.developer.apple.com/published/671a959d0a2a6baf234fcc2255b9abdb/page-indicator-customization-incorrect%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Using several different indicators can make a page control look busy and difficult to use. + +![An illustration that represents the Weather app highlighted to show a page control at the bottom edge of the screen. The page control displays the location symbol on the leading side followed by a series of dots.](https://docs-assets.developer.apple.com/published/b797a18ec978a588e29113b3a9f522b7/page-indicator-customization-correct%402x.png) + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)Using only two different indicators looks well-organized and provides a consistent experience. + +**Avoid coloring indicator images.** Custom colors can reduce the contrast that differentiates the current-page indicator and makes the page control visible on the screen. To ensure that your page control is easy to use and looks good in different contexts, let the system automatically color the indicators. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/page-controls#Platform-considerations) + + _Not supported in macOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/page-controls#iOS-iPadOS) + +A page control can adjust the appearance of indicators to provide more information about the list. For example, the control highlights the indicator of the current page so people can estimate the page’s relative position in the list. When there are more indicators than fit in the space, the control can shrink indicators at both sides to suggest that more pages are available. + +![An illustration of a page control. The page control displays a total of 9 dots. The center 5 dots use the default size; the second and eighth dots are about half the default size and the first and ninth dots are about one quarter the default size. The center dot is filled, indicating the location of the current page in the list.](https://docs-assets.developer.apple.com/published/6413d2970c5a12e6374d83bed419293c/page-controls-many-indicators%402x.png) + +People interact with page controls by tapping or scrubbing (to _scrub_ , people touch the control and drag left or right). Tapping on the leading or trailing side of the current-page indicator reveals the next or previous page; in iPadOS, people can also use the pointer to target a specific indicator. Scrubbing opens pages in sequence, and scrubbing past the leading or trailing edge of the control helps people quickly reach the first or last page. + +Developer note + +In the API, _tapping_ is a _discrete interaction_ , whereas _scrubbing_ is a _continuous interaction_ ; for developer guidance, see [`UIPageControl.InteractionState`](https://developer.apple.com/documentation/UIKit/UIPageControl/InteractionState-swift.enum). + +**Avoid animating page transitions during scrubbing.** People can scrub very quickly, and using the scrolling animation for every transition can make your app lag and cause distracting visual flashes. Use the animated scrolling transition only for tapping. + +A page control can include a translucent, rounded-rectangle background appearance that provides visual contrast for the indicators. You can choose one of the following background styles: + + * Automatic — Displays the background only when people interact with the control. Use this style when the page control isn’t the primary navigational element in the UI. + + * Prominent — Always displays the background. Use this style only when the control is the primary navigational control in the screen. + + * Minimal — Never displays the background. Use this style when you just want to show the position of the current page in the list and you don’t need to provide visual feedback during scrubbing. + + + + +For developer guidance, see [`backgroundStyle`](https://developer.apple.com/documentation/UIKit/UIPageControl/backgroundStyle-swift.property). + +**Avoid supporting the scrubber when you use the minimal background style.** The minimal style doesn’t provide visual feedback during scrubbing. If you want to let people scrub a list of pages in your app, use the automatic or prominent background styles. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/page-controls#tvOS) + +**Use page controls on collections of full-screen pages.** A page control is designed to operate in a full-screen environment where multiple content-rich pages are peers in the page hierarchy. Inclusion of additional controls makes it difficult to maintain focus while moving between pages. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/page-controls#visionOS) + +In visionOS, page controls represent available pages and indicate the current page, but people don’t interact with them. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/page-controls#watchOS) + +In watchOS, page controls can be displayed at the bottom of the screen for horizontal pagination, or next to the Digital Crown when presenting a vertical [tab view](https://developer.apple.com/design/human-interface-guidelines/components/layout-and-organization/tab-views). When using vertical tab views, the page indicator shows people where they are in the navigation, both within the current page and within the set of pages. The page control transitions between scrolling through a page’s content and scrolling to other pages. + +![An illustration representing a screen that includes a vertical tab view on Apple Watch. A page control next to the Digital Crown shows that the fourth tab is currently selected.](https://docs-assets.developer.apple.com/published/d8ac19e2578c57035e74fe697a15d573/page-controls-watch-vertical%402x.png) + +Vertical page control + +![An illustration representing a screen that includes a horizontal tab view on Apple Watch. A page control at the bottom shows that the second tab is currently selected.](https://docs-assets.developer.apple.com/published/0f915ec7b0e8755a2d60845617746f71/page-controls-watch-horizontal%402x.png) + +Horizontal page control + +**Use vertical pagination to separate multiple views into distinct, purposeful pages.** Give each page a clear purpose, and let people scroll through the pages using the Digital Crown. In watchOS, this design is more effective than horizontal pagination or many levels of hierarchical navigation. + +**Consider limiting the content of an individual page to a single screen height.** Embracing this constraint encourages each page to serve a clear and distinct purpose and results in a more glanceable design. Use variable-height pages judiciously and, if possible, only place them after fixed-height pages in your app design. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/page-controls#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/page-controls#Related) + +[Scroll views](https://developer.apple.com/design/human-interface-guidelines/scroll-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/page-controls#Developer-documentation) + +[`PageTabViewStyle`](https://developer.apple.com/documentation/SwiftUI/PageTabViewStyle) — SwiftUI + +[`UIPageControl`](https://developer.apple.com/documentation/UIKit/UIPageControl) — UIKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/page-controls#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Updated guidance for using page controls in watchOS. + diff --git a/skills/hig-components-search/references/path-controls.md b/skills/hig-components-search/references/path-controls.md new file mode 100644 index 00000000..50859e42 --- /dev/null +++ b/skills/hig-components-search/references/path-controls.md @@ -0,0 +1,40 @@ +--- +title: "Path controls | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/path-controls + +# Path controls + +A path control shows the file system path of a selected file or folder. + +![A stylized representation of a path control for a HIG Design document showing its root disk, parent folder, and selected item. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1266fc8267f96dc76fb9247aa5f08618/components-path-control-intro%402x.png) + +For example, choosing View > Show Path Bar in the Finder displays a path bar at the bottom of the window. It shows the path of the selected item, or the path of the window’s folder if nothing is selected. + +There are two styles of path control. + +![A screenshot of a Finder path bar that displays a hierarchy of four locations.](https://docs-assets.developer.apple.com/published/c7347a80a423da7a3886208113258675/path-controls-standard%402x.png) + +**Standard.** A linear list that includes the root disk, parent folders, and selected item. Each item appears with an icon and a name. If the list is too long to fit within the control, it hides names between the first and last items. If you make the control editable, people can drag an item onto the control to select the item and display its path in the control. + +![A screenshot of a path control showing a folder icon and a pop-up control.](https://docs-assets.developer.apple.com/published/6768a6d2292f05923976b90cd80c931d/path-controls-popup%402x.png) + +**Pop up.** A control similar to a [pop-up button](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) that shows the icon and name of the selected item. People can click the item to open a menu containing the root disk, parent folders, and selected item. If you make the control editable, the menu contains an additional Choose command that people can use to select an item and display it in the control. They can also drag an item onto the control to select it and display its path. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/path-controls#Best-practices) + +**Use a path control in the window body, not the window frame.** Path controls aren’t intended for use in toolbars or status bars. Note that the path control in the Finder appears at the bottom of the window body, not in the status bar. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/path-controls#Platform-considerations) + + _Not supported in iOS, iPadOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/path-controls#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/path-controls#Related) + +[File management](https://developer.apple.com/design/human-interface-guidelines/file-management) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/path-controls#Developer-documentation) + +[`NSPathControl`](https://developer.apple.com/documentation/AppKit/NSPathControl) — AppKit + diff --git a/skills/hig-components-search/references/search-fields.md b/skills/hig-components-search/references/search-fields.md new file mode 100644 index 00000000..7dc9dbcb --- /dev/null +++ b/skills/hig-components-search/references/search-fields.md @@ -0,0 +1,189 @@ +--- +title: "Search fields | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/search-fields + +# Search fields + +A search field lets people search a collection of content for specific terms they enter. + +![A stylized representation of a search field containing placeholder text and a dictation icon. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/73f9e564b79cbe48e29ae2a9f7b83682/components-search-field-intro%402x.png) + +A search field is an editable text field that displays a Search icon, a Clear button, and placeholder text where people can enter what they are searching for. Search fields can use a [scope control](https://developer.apple.com/design/human-interface-guidelines/search-fields#Scope-controls-and-tokens) as well as [tokens](https://developer.apple.com/design/human-interface-guidelines/search-fields#Scope-controls-and-tokens) to help filter and refine the scope of their search. Across each platform, there are different patterns for accessing search based on the goals and design of your app. + +For developer guidance, see [Adding a search interface to your app](https://developer.apple.com/documentation/SwiftUI/Adding-a-search-interface-to-your-app); for guidance related to systemwide search, see [Searching](https://developer.apple.com/design/human-interface-guidelines/searching). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/search-fields#Best-practices) + +**Display placeholder text that describes the type of information people can search for.** For example, the Apple TV app includes the placeholder text _Shows, Movies, and More_. Avoid using a term like _Search_ for placeholder text because it doesn’t provide any helpful information. + +**If possible, start search immediately when a person types.** Searching while someone types makes the search experience feel more responsive because it provides results that are continuously refined as the text becomes more specific. + +**Consider showing suggested search terms before search begins, or as a person types.** This can help someone search faster by suggesting common searches, even when the search itself doesn’t begin immediately. + +**Simplify search results.** Provide the most relevant search results first to minimize the need for someone to scroll to find what they’re looking for. In addition to prioritizing the most likely results, consider categorizing them to help people find what they want. + +**Consider letting people filter search results.** For example, you can include a scope control in the search results content area to help people quickly and easily filter search results. + +## [Scope controls and tokens](https://developer.apple.com/design/human-interface-guidelines/search-fields#Scope-controls-and-tokens) + +Scope controls and tokens are components you can use to let someone narrow the parameters of a search either before or after they make it. + + * A _scope control_ acts like a [segmented control](https://developer.apple.com/design/human-interface-guidelines/segmented-controls) for choosing a category for the search. + + * A _token_ is a visual representation of a search term that someone can select and edit, and acts as a filter for any additional terms in the search. + + + + +![A diagram of the Mail app on iPhone with the search field open above the keyboard and the word Design entered in the field. Callouts indicate a scope control at the top of the screen to switch between searching all mailboxes and the current mailbox, and a list of tokens in a Suggestions area beneath the control that represent different filters for the search.](https://docs-assets.developer.apple.com/published/c39602d60041fae736e46f91641d8373/search-fields-scope-control-tokens%402x.png) + +**Use a scope control to filter among clearly defined search categories.** A scope control can help someone move from a broader scope to a narrower one. For example, in Mail on iPhone, a scope control helps people move from searching their entire mailbox to just the specific mailbox they’re viewing. For developer guidance, see [Scoping a search operation](https://developer.apple.com/documentation/SwiftUI/Scoping-a-search-operation). + +**Default to a broader scope and let people refine it as they need.** A broader scope provides context for the full set of available results, which helps guide people in a useful direction when they choose to narrow the scope. + +**Use tokens to filter by common search terms or items.** When you define a token, the term it represents gains a visual treatment that encapsulates it, indicating that people can select and edit it as a single item. Tokens can clarify a search term, like filtering by a specific contact in Mail, or focus a search to a specific set of attributes, like filtering by photos in Messages. For the related macOS component, see [Token fields](https://developer.apple.com/design/human-interface-guidelines/token-fields). + +**Consider pairing tokens with search suggestions.** People may not know which tokens are available, so pairing them with search suggestions can help people learn how to use them. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/search-fields#Platform-considerations) + + _No additional considerations for visionOS_. + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/search-fields#iOS) + +There are three main places you can position the entry point for search: + + * In a tab bar at the bottom of the screen + + * In a toolbar at the bottom or top of the screen + + * Directly inline with content + + + + +Where search makes the most sense depends on the layout, content, and navigation of your app. + +#### [Search in a tab bar](https://developer.apple.com/design/human-interface-guidelines/search-fields#Search-in-a-tab-bar) + +You can place search as a visually distinct tab on the trailing side of a tab bar, which keeps search visible and always available as people switch between the sections of your app. + +![An illustration of a tab bar at the bottom of an iPhone screen. A tab for search appears on the trailing edge in a visually distinct group.](https://docs-assets.developer.apple.com/published/ca6977596a62743265fdd2132616a4c8/search-fields-search-as-tab%402x.png) + +When someone navigates to the search tab, the search field that appears can start as _focused_ or _unfocused_. + +![An illustration of an iPhone screen with search in a tab bar at the bottom of the screen. The tab bar is hidden by the keyboard and the search field is open above the keyboard, ready for text entry.](https://docs-assets.developer.apple.com/published/cbd1eb280ecd0f8f71aab784a2bcd042/search-fields-tab-focused%402x.png) + +Focused + +![An illustration of an iPhone screen with search in a tab bar at the bottom of the screen. The search tab is expanded into a field that hides the tabs to its leading side. A single remaining tab on the leading edge of the screen indicates that it's possible to navigate away, and the space above the tab bar is empty and available for other content.](https://docs-assets.developer.apple.com/published/196b81213f5131b324f952180a4e9c46/search-fields-tab-unfocused%402x.png) + +Unfocused + +**Start with the search field focused to help people quickly find what they need.** When the search field starts focused, the keyboard immediately appears with the search field above it, ready to begin the search. This provides a more transient experience that brings people directly back to their previous tab after they exit search, and is ideal when you want search to resolve quickly and seamlessly. + +**Start with the search field unfocused to promote discovery and exploration.** When the search field starts unfocused, the search tab expands into an unselected field at the bottom of the screen. This provides space on the rest of the screen for additional discovery or navigation before someone taps the field to begin the search. This is great for an app with a large collection of content to showcase, like Music or TV. + +#### [Search in a toolbar](https://developer.apple.com/design/human-interface-guidelines/search-fields#Search-in-a-toolbar) + +As an alternative to search in a tab bar, you can also place search in a toolbar either at the bottom or top of the screen. + + * You can include search in a bottom toolbar either as an expanded field or as a toolbar button, depending on how much space is available and how important search is to your app. When someone taps it, it animates into a search field above the keyboard so they can begin typing. + + * You can include search in a top toolbar, also called a navigation bar, where it appears as a toolbar button. When someone taps it, it animates into a search field that appears either above the keyboard or inline at the top if there isn’t space at the bottom. + + + + +![An illustration of an iPhone screen with search in a bottom toolbar. The search field is positioned in an isolated group between a Filter button on the leading edge and a Compose button on the trailing edge.](https://docs-assets.developer.apple.com/published/face9eed2f9c99f2c12ca3a400919e03/search-fields-ios-toolbar-with-items%402x.png) + +Search in a bottom toolbar + +![An illustration of an iPhone screen with search in a top toolbar. A Back button appears on the leading edge, and an Add button appears on the trailing edge. An button group with Search and More appears next to the Add button.](https://docs-assets.developer.apple.com/published/ca4d0118cd29bd05bd2fd114163a1f64/search-fields-ios-navigation-bar-item%402x.png) + +Search in a top toolbar + +**Place search at the bottom if there’s room.** You can either add a search field to an existing toolbar, or as a new toolbar where search is the only item. Search at the bottom is useful in any situation where search is a priority, since it keeps the search experience easy to reach. Examples of apps with search at the bottom in various toolbar layouts include Settings, where it’s the only item, and Mail and Notes, where it fits alongside other important controls. + +**Place search at the top when itʼs important to defer to content at the bottom of the screen, or thereʼs no bottom toolbar.** Use search at the top in cases where covering the content might interfere with a primary function of the app. The Wallet app, for example, includes event passes in a stack at the bottom of the screen for easy access and viewing at a glance. + +#### [Search as an inline field](https://developer.apple.com/design/human-interface-guidelines/search-fields#Search-as-an-inline-field) + +In some cases you might want your app to include a search field inline with content. + +**Place search as an inline field when its position alongside the content it searches strengthens that relationship.** When you need to filter or search within a single view, it can be helpful to have search appear directly next to content to illustrate that the search applies to it, rather than globally. For example, although the main search in the Music app is in the tab bar, people can navigate to their library and use an inline search field to filter their songs and albums. + +**Prefer placing search at the bottom.** Generally, even for search that applies to a subset of your app’s content, it’s better to locate search where people can reach it easily. The Settings app, for example, places search at the bottom both for its top-level search and for search in the section for individual apps. If there isn’t space at the bottom (because it’s occupied by a tab bar or other important UI, for example), it’s okay to place search inline at the top. + +**When at the top, position an inline search field above the list it searches, and pin it to the top toolbar when scrolling.** This helps keep it distinct from search that appears in other locations. + +### [iPadOS, macOS](https://developer.apple.com/design/human-interface-guidelines/search-fields#iPadOS-macOS) + +The placement and behavior of the search field in iPadOS and macOS is similar; on both platforms, clearing the field exits search and dismisses the keyboard if present. If your app is available on both iPad and Mac, try to keep the search experience as consistent as possible across both platforms. + +![An illustration of an iPad screen with a search field on the trailing edge of the top toolbar. The search field has the word Design entered into the field, and three search suggestions appear in a list beneath the field. The toolbar also includes an Inspector button, a group with New Folder and Favorite buttons, and a Share button next to the search field.](https://docs-assets.developer.apple.com/published/368ba21a44b4c65a4e53d3d2197d061b/search-fields-toolbar-search-ipad%402x.png)iPadOS + +![An illustration of a Mac screen with a search field on the trailing edge of the toolbar. The search field has the word Design entered into the field, and three search suggestions appear in a list beneath the field. The toolbar also includes an Inspector button, a group with New Folder and Favorite buttons, and a Share button next to the search field.](https://docs-assets.developer.apple.com/published/eb1970b09f7b35b39757201a31289bc3/search-fields-toolbar-search-mac%402x.png)macOS + +**Put a search field at the trailing side of the toolbar for many common uses.** Many apps benefit from the familiar pattern of search in the toolbar, particularly apps with split views or apps that navigate between multiple sources, like Mail, Notes, and Voice Memos. The persistent availability of search at the side of the toolbar gives it a global presence within your app, so it’s generally appropriate to start with a global scope for the initial search. + +**Include search at the top of the sidebar when filtering content or navigation there.** Apps such as Settings take advantage of search to quickly filter the sidebar and expose sections that may be multiple levels deep, providing a simple way for people to search, preview, and navigate to the section or setting they’re looking for. + +![An illustration of an iPad screen with a search field at the top of the sidebar on the leading edge of the screen.](https://docs-assets.developer.apple.com/published/8aed61a23fe2a9885d1a1d1da15a4b09/search-fields-ipad-search-in-sidebar%402x.png) + +**Include search as an item in the sidebar or tab bar when you want an area dedicated to discovery.** If your search is paired with rich suggestions, categories, or content that needs more space, it can be helpful to have a dedicated area for it. This is particularly true for apps where browsing and search go hand in hand, like Music and TV, where it provides a unified location to highlight suggested content, categories, and recent searches. A dedicated area also ensures search is always available as people navigate and switch sections of your app. + +![An illustration of an iPad screen with a tab bar at the top edge. The trailing side of the tab bar includes a Search tab with a distinct background color to differentiate it from other tab areas.](https://docs-assets.developer.apple.com/published/a2ab9bc29018fc1bbc604a91dfc905c7/search-fields-ipad-search-in-tab-bar%402x.png) + +**In a search field in a dedicated area, consider immediately focusing the field when a person navigates to the section to help people search faster and locate the field itself more easily.** An exception to this is on iPad when only a virtual keyboard is available, in which case it’s better to leave the field unfocused to prevent the keyboard from unexpectedly covering the view. + +**Account for window resizing with the placement of the search field.** On iPad, the search field fluidly resizes with the app window like it does on Mac. However, for compact views on iPad, itʼs important to ensure that search is available where it’s most contextually useful. For example, Notes and Mail place search above the column for the content list when they resize down to a compact view. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/search-fields#tvOS) + +A search screen is a specialized keyboard screen that helps people enter search text, displaying search results beneath the keyboard in a fully customizable view. For developer guidance, see [`UISearchController`](https://developer.apple.com/documentation/UIKit/UISearchController). + +![An illustration of a search screen in tvOS. The screen includes a field with a keyboard input area at the top, a scope control, and a grid of top results at the bottom.](https://docs-assets.developer.apple.com/published/590a4ef7b02ccd9758f0e52e5c261574/search-fields-tvos-search%402x.png) + +**Provide suggestions to make searching easier.** People typically don’t want to do a lot of typing in tvOS. To improve the search experience, provide popular and context-specific search suggestions, including recent searches when available. For developer guidance, see [Using suggested searches with a search controller](https://developer.apple.com/documentation/UIKit/using-suggested-searches-with-a-search-controller). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/search-fields#watchOS) + +When someone taps the search field, the system displays a text-input control that covers the entire screen. The app only returns to the search field after they tap the Cancel or Search button. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/search-fields#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/search-fields#Related) + +[Searching](https://developer.apple.com/design/human-interface-guidelines/searching) + +[Token fields](https://developer.apple.com/design/human-interface-guidelines/token-fields) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/search-fields#Developer-documentation) + +[Adding a search interface to your app](https://developer.apple.com/documentation/SwiftUI/Adding-a-search-interface-to-your-app) — SwiftUI + +[`searchable(text:placement:prompt:)`](https://developer.apple.com/documentation/SwiftUI/View/searchable\(text:placement:prompt:\)) — SwiftUI + +[`UISearchBar`](https://developer.apple.com/documentation/UIKit/UISearchBar) — UIKit + +[`UISearchTextField`](https://developer.apple.com/documentation/UIKit/UISearchTextField) — UIKit + +[`NSSearchField`](https://developer.apple.com/documentation/AppKit/NSSearchField) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/search-fields#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/BE8FF113-0FE1-40FC-86BF-FE95BE2FF7A5/5027_wide_250x141_1x.jpg) Discoverable design ](https://developer.apple.com/videos/play/wwdc2021/10126) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/D45C244B-2038-4692-99A0-6131ED5FD984/5084_wide_250x141_1x.jpg) Craft search experiences in SwiftUI ](https://developer.apple.com/videos/play/wwdc2021/10176) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/search-fields#Change-log) + +Date| Changes +---|--- +June 9, 2025| Updated guidance for search placement in iOS, consolidated iPadOS and macOS platform considerations, and added guidance for tokens. +September 12, 2023| Combined guidance common to all platforms. +June 5, 2023| Added guidance for using search fields in watchOS. + diff --git a/skills/hig-components-status/SKILL.md b/skills/hig-components-status/SKILL.md new file mode 100644 index 00000000..0746a80f --- /dev/null +++ b/skills/hig-components-status/SKILL.md @@ -0,0 +1,86 @@ +--- +name: hig-components-status +version: 1.0.0 +description: > + Apple HIG guidance for status and progress UI components including progress indicators, + status bars, and activity rings. Use this skill when asked about: "progress indicator", + "progress bar", "loading spinner", "status bar", "activity ring", "progress display", + determinate vs indeterminate progress, loading states, or fitness tracking rings. + Also use when the user says "how do I show loading state," "should I use a spinner + or progress bar," "what goes in the status bar," or asks about activity indicators. + Cross-references: hig-components-system for widgets and complications, + hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit + and activity ring data integration. +--- + +# Apple HIG: Status Components + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +### Progress Indicators + +1. **Show progress for operations longer than a second or two.** + +2. **Determinate when duration/percentage is known.** A filling progress bar gives users a clear sense of remaining work. Use for downloads, uploads, or any measurable process. + +3. **Indeterminate when duration is unknown.** A spinner communicates work is happening without promising a timeframe. Use for unpredictable network requests. + +4. **Prefer progress bars over spinners.** Determinate progress feels faster and more trustworthy. + +5. **Place indicators where content will appear.** Inline progress near the content area, not modal or distant. + +6. **Don't stack multiple indicators.** Aggregate simultaneous operations into one representation or show the most relevant. + +### Status Bars + +7. **Don't hide the status bar without good reason.** Reserve hiding for immersive experiences (full-screen media, games, AR). + +8. **Match status bar style to your content.** Light or dark for adequate contrast. + +9. **Respect safe areas.** No interactive content behind the status bar. + +10. **Restore promptly** when exiting immersive contexts. + +### Activity Rings + +11. **Activity rings are for Move, Exercise, and Stand goals.** Don't repurpose the ring metaphor for unrelated data. + +12. **Respect ring color conventions.** Red (Move), green (Exercise), blue (Stand) are strongly associated with Apple Fitness. + +13. **Use HealthKit APIs** for activity data rather than manual tracking. + +14. **Celebrate completions** with animation and haptics when rings close. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [progress-indicators.md](references/progress-indicators.md) | Progress bars and spinners | Determinate, indeterminate, inline placement, duration | +| [status-bars.md](references/status-bars.md) | iOS/iPadOS status bar | System info, visibility, style, safe areas | +| [activity-rings.md](references/activity-rings.md) | watchOS activity rings | Move/Exercise/Stand, HealthKit, fitness tracking, color | + +## Output Format + +1. **Indicator type recommendation** with rationale (determinate vs indeterminate). +2. **Timing and animation guidance** -- duration thresholds, animation style, transitions. +3. **Accessibility** -- VoiceOver progress announcements, live region updates. +4. **Platform-specific behavior** across targeted platforms. + +## Questions to Ask + +1. Is the duration known or unknown? +2. Which platforms? +3. How long does the operation typically take? +4. System-level or in-app indicator? + +## Related Skills + +- **hig-components-system** -- Widgets and complications displaying progress or status +- **hig-inputs** -- Gestures triggering progress states (pull-to-refresh) +- **hig-technologies** -- HealthKit for activity ring data; VoiceOver for progress announcements + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-status/references/activity-rings.md b/skills/hig-components-status/references/activity-rings.md new file mode 100644 index 00000000..b129e551 --- /dev/null +++ b/skills/hig-components-status/references/activity-rings.md @@ -0,0 +1,105 @@ +--- +title: "Activity rings | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/activity-rings + +# Activity rings + +Activity rings show an individual’s daily progress toward Move, Exercise, and Stand goals. + +![A stylized representation of a set of move, exercise, and stand activity rings denoting progress. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/715b90d471efa2d8c388287bc5fe1700/components-activity-ring-intro%402x.png) + +In watchOS, the Activity ring element always contains three rings, whose colors and meanings match those the Activity app provides. In iOS, the Activity ring element contains either a single Move ring representing an approximation of activity, or all three rings if an Apple Watch is paired. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/activity-rings#Best-practices) + +**Display Activity rings when they’re relevant to the purpose of your app.** If your app is related to health or fitness, and especially if it contributes information to HealthKit, people generally expect to find Activity rings in your interface. For example, if you structure a workout or health session around the completion of Activity rings, consider displaying the element on a workout metrics screen so that people can track their progress during their session. Similarly, if you provide a summary screen that appears at the conclusion of a workout, you could display Activity rings to help people check on their progress toward their daily goals. + +![A screenshot of an in-progress workout screen that displays the current timer value, followed by a list of the current Move, Exercise, and Stand values. The screen also displays an image of the Activity rings, where the state of each ring represents the current value.](https://docs-assets.developer.apple.com/published/868194b00a492b5d029cb3737ee7c7b9/activity-rings-summary%402x.png) + +**Use Activity rings only to show Move, Exercise, and Stand information.** Activity rings are designed to consistently represent progress in these specific areas. Don’t replicate or modify Activity rings for other purposes. Never use Activity rings to display other types of data. Never show Move, Exercise, and Stand progress in another ring-like element. + +**Use Activity rings to show progress for a single person.** Never use Activity rings to represent data for more than one person, and make sure it’s obvious whose progress you’re showing by using a label, a photo, or an avatar. + +**Always keep the visual appearance of Activity rings the same, regardless of where you display them.** Follow these guidelines to provide a consistent experience: + + * Never change the colors of the rings; for example, don’t use filters or modify opacity. + + * Always display Activity rings on a black background. + + * Prefer enclosing the rings and background within a circle. To do this, adjust the corner radius of the enclosing view rather than applying a circular mask. + + * Ensure that the black background remains visible around the outermost ring. If necessary, add a thin, black stroke around the outer edge of the ring, and avoid including a gradient, shadow, or any other visual effect. + + * Always scale the rings appropriately so they don’t seem disconnected or out of place. + + * When necessary, design the surrounding interface to blend with the rings; never change the rings to blend with the surrounding interface. + + + + +**To display a label or value that’s directly associated with an Activity ring, use the colors that match it.** To display the ring-specific labels _Move_ , _Exercise_ , and _Stand_ , or to display a person’s current and goal values for each ring, use the following colors, specified as RGB values. + +Move| Exercise| Stand +---|---|--- +![R-250,G-17,B-79](https://docs-assets.developer.apple.com/published/f347174d08cc485cd465646660bce083/activity-rings-color-swatch-red%402x.png)| ![R-166,G-255,B-0](https://docs-assets.developer.apple.com/published/462bfbf466935f89dcc63b1c79aa0a7c/activity-rings-color-swatch-green%402x.png)| ![R-0,G-255,B-246](https://docs-assets.developer.apple.com/published/a766fb1cbeeacd0434ca05b581168f1a/activity-rings-color-swatch-blue%402x.png) + +**Maintain Activity ring margins.** An Activity ring element must include a minimum outer margin of no less than the distance between rings. Never allow other elements to crop, obstruct, or encroach upon this margin or the rings themselves. + +**Differentiate other ring-like elements from Activity rings.** Mixing different ring styles can lead to a visually confusing interface. If you must include other rings, use padding, lines, or labels to separate them from Activity rings. Color and scale can also help provide visual separation. + +**Don’t send notifications that repeat the same information the Activity app sends.** The system already delivers Move, Exercise, and Stand progress updates, so it’s confusing for people to receive redundant information from your app. Also, don’t show an Activity ring element in your app’s notifications. It’s fine to reference Activity progress in a notification, but do so in a way that’s unique to your app and doesn’t replicate the same information the system provides. + +**Don’t use Activity rings for decoration.** Activity rings provide information to people; they don’t just embellish your app’s design. Never display Activity rings in labels or background graphics. + +**Don’t use Activity rings for branding.** Use Activity rings strictly to display Activity progress in your app. Never use Activity rings in your app’s icon or marketing materials. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/activity-rings#Platform-considerations) + + _No additional considerations for iPadOS or watchOS. Not supported in macOS, tvOS, or visionOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/activity-rings#iOS) + +Activity rings are available in iOS with [`HKActivityRingView`](https://developer.apple.com/documentation/HealthKitUI/HKActivityRingView). The appearance of the Activity ring element changes automatically depending on whether an Apple Watch is paired: + + * With an Apple Watch paired, iOS shows all three Activity rings. + + * Without an Apple Watch paired, iOS shows the Move ring only, which represents an approximation of a person’s activity based on their steps and workout information from other apps. + + + + +![A screenshot of the Activity summary in the iOS Fitness app with Apple Watch paired. All three Activity rings are displayed.](https://docs-assets.developer.apple.com/published/eab44acde68216f8cbace4a59594b7b6/activity-rings-watch-paired%402x.png) + +Apple Watch paired + +![A screenshot of the Activity summary in the iOS Fitness app with no Apple Watch paired. Only the Move ring is displayed.](https://docs-assets.developer.apple.com/published/ef6b2bf87ac8e2917dae8283236c2965/activity-rings-no-watch-paired%402x.png) + +No Apple Watch paired + +Because iOS shows Activity rings whether or not an Apple Watch is paired, activity history can include a combination of both styles. For example, Activity rings in Fitness have three rings when a person exercises with their Apple Watch paired, and only the Move ring when they exercise without their Apple Watch. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/activity-rings#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/activity-rings#Related) + +[Workouts](https://developer.apple.com/design/human-interface-guidelines/workouts) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/activity-rings#Developer-documentation) + +[`HKActivityRingView`](https://developer.apple.com/documentation/HealthKitUI/HKActivityRingView) — HealthKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/activity-rings#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/12499BF9-8217-4A56-81CA-5E7CB66904DD/9856_wide_250x141_1x.jpg) Track workouts with HealthKit on iOS and iPadOS ](https://developer.apple.com/videos/play/wwdc2025/322) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/30D3C2CB-B24D-467A-9B20-A369641E966F/4850_wide_250x141_1x.jpg) Build a workout app for Apple Watch ](https://developer.apple.com/videos/play/wwdc2021/10009) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/50551741-78CD-4E8A-9550-7D0EC29D7882/8035_wide_250x141_1x.jpg) Build custom workouts with WorkoutKit ](https://developer.apple.com/videos/play/wwdc2023/10016) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/activity-rings#Change-log) + +Date| Changes +---|--- +March 29, 2024| Enhanced guidance for displaying Activity rings and listed specific colors for displaying related content. +December 5, 2023| Added artwork representing Activity rings in iOS. + diff --git a/skills/hig-components-status/references/progress-indicators.md b/skills/hig-components-status/references/progress-indicators.md new file mode 100644 index 00000000..e268bf86 --- /dev/null +++ b/skills/hig-components-status/references/progress-indicators.md @@ -0,0 +1,116 @@ +--- +title: "Progress indicators | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/progress-indicators + +# Progress indicators + +Progress indicators let people know that your app isn’t stalled while it loads content or performs lengthy operations. + +![A stylized representation of a spinning indeterminate activity indicator above a progress bar. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/983ffd361839ffc1360b1542a8205a45/components-progress-indicators-intro%402x.png) + +Some progress indicators also give people a way to estimate how long they have to wait for something to complete. All progress indicators are transient, appearing only while an operation is ongoing and disappearing after it completes. + +Because the duration of an operation is either known or unknown, there are two types of progress indicators: + + * _Determinate_ , for a task with a well-defined duration, such as a file conversion + + * _Indeterminate_ , for unquantifiable tasks, such as loading or synchronizing complex data + + + + +Both determinate and indeterminate progress indicators can have different appearances depending on the platform. A determinate progress indicator shows the progress of a task by filling a linear or circular track as the task completes. _Progress bars_ include a track that fills from the leading side to the trailing side. _Circular progress indicators_ have a track that fills in a clockwise direction. + +![An image of a horizontal progress bar in macOS filled almost to the midpoint with solid color.](https://docs-assets.developer.apple.com/published/ec2a80ba694138d5ac65555f5e3b0734/progress-indicator-determinate-bar%402x.png)Progress bar + +![An image of a circular progress indicator in macOS filled almost to the eight o'clock position with solid color.](https://docs-assets.developer.apple.com/published/8288f9d55f529f513e7c3bd33bc3e17a/progress-indicator-determinate-circle%402x.png)Circular progress indicator + +An indeterminate progress indicator — also called an _activity indicator_ — uses an animated image to indicate progress. All platforms support a circular image that appears to spin; however, macOS also supports an indeterminate progress bar. + +![An image of a spinning, circular activity indicator in macOS.](https://docs-assets.developer.apple.com/published/6c1e23fcc6e04603423dacd5df6c48a3/progress-indicator-intermediate-spinner%402x.png)macOS + +![An image of a spinning activity indicator in watchOS.](https://docs-assets.developer.apple.com/published/02a8427a04f946d9b80d2907f84ab365/activity-indicators-watch%402x.png)watchOS + +For developer guidance, see [`ProgressView`](https://developer.apple.com/documentation/SwiftUI/ProgressView). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#Best-practices) + +**When possible, use a determinate progress indicator.** An indeterminate progress indicator shows that a process is occurring, but it doesn’t help people estimate how long a task will take. A determinate progress indicator can help people decide whether to do something else while waiting for the task to complete, restart the task at a different time, or abandon the task. + +**Be as accurate as possible when reporting advancement in a determinate progress indicator.** Consider evening out the pace of advancement to help people feel confident about the time needed for the task to complete. Showing 90 percent completion in five seconds and the last 10 percent in 5 minutes can make people wonder if your app is still working and can even feel deceptive. + +**Keep progress indicators moving so people know something is continuing to happen.** People tend to associate a stationary indicator with a stalled process or a frozen app. If a process stalls for some reason, provide feedback that helps people understand the problem and what they can do about it. + +**When possible, switch a progress bar from indeterminate to determinate.** If an indeterminate process reaches a point where you can determine its duration, switch to a determinate progress bar. People generally prefer a determinate progress indicator, because it helps them gauge what’s happening and how long it will take. + +**Don’t switch from the circular style to the bar style.** Activity indicators (also called _spinners_) and progress bars are different shapes and sizes, so transitioning between them can disrupt your interface and confuse people. + +**If it’s helpful, display a description that provides additional context for the task.** Be accurate and succinct. Avoid vague terms like _loading_ or _authenticating_ because they seldom add value. + +**Display a progress indicator in a consistent location.** Choosing a consistent location for a progress indicator helps people reliably find the status of an operation across platforms or within or between apps. + +**When it’s feasible, let people halt processing.** If people can interrupt a process without causing negative side effects, include a Cancel button. If interrupting the process might cause negative side effects — such as losing the downloaded portion of a file — it can be useful to provide a Pause button in addition to a Cancel button. + +**Let people know when halting a process has a negative consequence.** When canceling a process results in lost progress, it’s helpful to provide an [alert](https://developer.apple.com/design/human-interface-guidelines/alerts) that includes an option to confirm the cancellation or resume the process. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#Platform-considerations) + + _No additional considerations for tvOS or visionOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#iOS-iPadOS) + +#### [Refresh content controls](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#Refresh-content-controls) + +A refresh control lets people immediately reload content, typically in a table view, without waiting for the next automatic content update to occur. A refresh control is a specialized type of activity indicator that’s hidden by default, becoming visible when people drag down the view they want to reload. In Mail, for example, people can drag down the list of Inbox messages to check for new messages. + +![A screenshot of a refresh content control spinning while Mail checks for new messages.](https://docs-assets.developer.apple.com/published/861acc5c0d9d6821e3dd4fd7fb42606f/refresh-controls%402x.png) + +**Perform automatic content updates.** Although people appreciate being able to do an immediate content refresh, they also expect automatic refreshes to occur periodically. Don’t make people responsible for initiating every update. Keep data fresh by updating it regularly. + +**Supply a short title only if it adds value.** Optionally, a refresh control can include a title. In most cases, this is unnecessary, as the animation of the control indicates that content is loading. If you do include a title, don’t use it to explain how to perform a refresh. Instead, provide information of value about the content being refreshed. A refresh control in Podcasts, for example, uses a title to tell people when the last podcast update occurred. + +For developer guidance, see [`UIRefreshControl`](https://developer.apple.com/documentation/UIKit/UIRefreshControl). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#macOS) + +In macOS, an indeterminate progress indicator can have a bar or circular appearance. Both versions use an animated image to indicate that the app is performing a task. + +![An image of a completely filled horizontal progress bar in macOS. The fill is animated to cycle through various shade changes as progress continues.](https://docs-assets.developer.apple.com/published/53c298b42043574cfe1d304c01bfc967/progress-indicator-intermediate-bar%402x.png)Indeterminate progress bar + +![An image of a spinning, circular activity indicator in macOS.](https://docs-assets.developer.apple.com/published/6c1e23fcc6e04603423dacd5df6c48a3/progress-indicator-intermediate-spinner%402x.png)Indeterminate circular progress indicator + +**Prefer an activity indicator (spinner) to communicate the status of a background operation or when space is constrained.** Spinners are small and unobtrusive, so they’re useful for asynchronous background tasks, like retrieving messages from a server. Spinners are also good for communicating progress within a small area, such as within a text field or next to a specific control, such as a button. + +**Avoid labeling a spinning progress indicator.** Because a spinner typically appears when people initiate a process, a label is usually unnecessary. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#watchOS) + +By default the system displays the progress indicators in white over the scene’s background color. You can change the color of the progress indicator by setting its tint color. + +![An image of a progress bar filling from left to right in watchOS.](https://docs-assets.developer.apple.com/published/33bbf8ea9d047a5933e60cb120d3556e/progress-bar-watch%402x.png)Progress bar + +![An image of a circular progress indicator filling clockwise in watchOS.](https://docs-assets.developer.apple.com/published/9327014cf549f926741534698be7d5ee/progress-ring-watch%402x.png)Circular progress indicator + +![An image of a spinning activity indicator in watchOS.](https://docs-assets.developer.apple.com/published/02a8427a04f946d9b80d2907f84ab365/activity-indicators-watch%402x.png)Activity indicator + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#Developer-documentation) + +[`ProgressView`](https://developer.apple.com/documentation/SwiftUI/ProgressView) — SwiftUI + +[`UIProgressView`](https://developer.apple.com/documentation/UIKit/UIProgressView) — UIKit + +[`UIActivityIndicatorView`](https://developer.apple.com/documentation/UIKit/UIActivityIndicatorView) — UIKit + +[`UIRefreshControl`](https://developer.apple.com/documentation/UIKit/UIRefreshControl) — UIKit + +[`NSProgressIndicator`](https://developer.apple.com/documentation/AppKit/NSProgressIndicator) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/progress-indicators#Change-log) + +Date| Changes +---|--- +September 12, 2023| Combined guidance common to all platforms. +June 5, 2023| Updated guidance to reflect changes in watchOS 10. + diff --git a/skills/hig-components-status/references/status-bars.md b/skills/hig-components-status/references/status-bars.md new file mode 100644 index 00000000..47f69951 --- /dev/null +++ b/skills/hig-components-status/references/status-bars.md @@ -0,0 +1,38 @@ +--- +title: "Status bars | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/status-bars + +# Status bars + +A status bar appears along the upper edge of the screen and displays information about the device’s current state, like the time, cellular carrier, and battery level. + +![A stylized representation of an iPhone status bar with labels showing the time and cellular, Wi-Fi, and battery levels. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/f26343633aeaea4ae5297fae42787bf2/components-status-bar-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/status-bars#Best-practices) + +**Obscure content under the status bar.** By default, the background of the status bar is transparent, allowing content beneath to show through. This transparency can make it difficult to see information presented in the status bar. If controls are visible behind the status bar, people may attempt to interact with them and be unable to do so. Be sure to keep the status bar readable, and don’t imply that content behind it is interactive. Prefer using a scroll edge effect to place a blurred view behind the status bar. For developer guidance, see [`ScrollEdgeEffectStyle`](https://developer.apple.com/documentation/SwiftUI/ScrollEdgeEffectStyle) and [`UIScrollEdgeEffect`](https://developer.apple.com/documentation/UIKit/UIScrollEdgeEffect). + +**Consider temporarily hiding the status bar when displaying full-screen media.** A status bar can be distracting when people are paying attention to media. Temporarily hide these elements to provide a more immersive experience. The Photos app, for example, hides the status bar and other interface elements when people browse full-screen photos. + +![A screenshot of the top half of the Photos app on iPhone, showing a photo filling the screen. The status bar is visible at the top of the screen.](https://docs-assets.developer.apple.com/published/7312261e2309c5707b50e5361375c651/status-bar-visible%402x.png) + +The Photos app with the status bar visible + +![A screenshot of the top half of the Photos app on iPhone, showing a photo filling the screen. The status bar is hidden, and only the photo is visible.](https://docs-assets.developer.apple.com/published/546831607b77b71bf7928e60e9949e9b/status-bar-hidden%402x.png) + +The Photos app with the status bar hidden + +**Avoid permanently hiding the status bar.** Without a status bar, people have to leave your app to check the time or see if they have a Wi-Fi connection. Let people redisplay a hidden status bar with a simple, discoverable gesture. For example, when browsing full-screen photos in the Photos app, a single tap shows the status bar again. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/status-bars#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/status-bars#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/status-bars#Developer-documentation) + +[`UIStatusBarStyle`](https://developer.apple.com/documentation/UIKit/UIStatusBarStyle) — UIKit + +[`preferredStatusBarStyle`](https://developer.apple.com/documentation/UIKit/UIViewController/preferredStatusBarStyle) — UIKit + diff --git a/skills/hig-components-system/SKILL.md b/skills/hig-components-system/SKILL.md new file mode 100644 index 00000000..344127f8 --- /dev/null +++ b/skills/hig-components-system/SKILL.md @@ -0,0 +1,106 @@ +--- +name: hig-components-system +version: 1.0.0 +description: > + Apple HIG guidance for system experience components: widgets, live activities, + notifications, complications, home screen quick actions, top shelf, watch faces, + app clips, and app shortcuts. Use when asked about: "widget design", "live activity", + "notification design", "complication", "home screen quick action", + "top shelf", "watch face", "app clip", "app shortcut", "system experience". + Also use when the user says "how do I design a widget," "what should my notification + look like," "how do Live Activities work," "should I make an App Clip," or asks about + surfaces outside the main app. + Cross-references: hig-components-status for progress in widgets, hig-inputs for + interaction patterns, hig-technologies for Siri and system integration. +--- + +# Apple HIG: System Experiences + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +### General + +1. **Glanceable, immediate value.** System experiences bring your app's most important content to surfaces the user sees without launching your app. Design for seconds of attention. + +2. **Respect platform context.** A Lock Screen widget has different constraints than a Home Screen widget. A complication is far smaller than a top shelf item. + +### Widgets + +3. **Show relevant information, not everything.** Display the most useful subset, updated appropriately. + +4. **Support multiple sizes with distinct layouts.** Each size should be a thoughtful design, not a scaled version of another. + +5. **Deep-link on tap.** Take users to the relevant content, not the app's root screen. + +### Live Activities + +6. **Track events with a clear start and end.** Deliveries, scores, timers, rides. Design for both Dynamic Island and Lock Screen. + +7. **Stay updated and timely.** Stale data undermines trust. End promptly when the event concludes. + +### Notifications + +8. **Respect user attention.** Only send notifications for information users genuinely care about. No promotional or low-value notifications. + +9. **Actionable and self-contained.** Include enough context to understand and act without opening the app. Support notification actions. Use threading and grouping. + +### Complications + +10. **Focused data on the watch face.** Design for the smallest useful representation. Support multiple families. Budget updates wisely. + +### Home Screen Quick Actions + +11. **3-4 most common tasks.** Short titles, optional subtitles, relevant SF Symbol icons. + +### Top Shelf + +12. **tvOS showcase.** Feature content that entices: new episodes, featured items, recent content. + +### App Clips + +13. **Instant, focused functionality within a strict size budget.** Load quickly without App Store download. Only what's needed for the immediate task, then offer full app install. + +### App Shortcuts + +14. **Surface key actions to Siri and Spotlight.** Define shortcuts for frequent tasks. Use natural, conversational trigger phrases. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [widgets.md](references/widgets.md) | Widgets | Glanceable info, sizes, deep linking, timeline | +| [live-activities.md](references/live-activities.md) | Live Activities | Real-time tracking, Dynamic Island, Lock Screen | +| [notifications.md](references/notifications.md) | Notifications | Attention, actions, grouping, content | +| [complications.md](references/complications.md) | Complications | Watch face data, families, budgeted updates | +| [home-screen-quick-actions.md](references/home-screen-quick-actions.md) | Quick actions | Haptic Touch, common tasks, SF Symbols | +| [top-shelf.md](references/top-shelf.md) | Top shelf | Featured content, showcase | +| [app-clips.md](references/app-clips.md) | App Clips | Instant use, lightweight, focused task, NFC/QR | +| [watch-faces.md](references/watch-faces.md) | Watch faces | Custom complications, face sharing | +| [app-shortcuts.md](references/app-shortcuts.md) | App Shortcuts | Siri, Spotlight, voice triggers | + +## Output Format + +1. **System experience recommendation** -- which surface best fits the use case. +2. **Content strategy** -- what to display, priority, what to omit. +3. **Update frequency** -- refresh rate including system budget constraints. +4. **Size/family variants** -- which to support and how layout adapts. +5. **Deep link behavior** -- where tapping takes the user. + +## Questions to Ask + +1. What information needs to surface outside the app? +2. Which platform? +3. How frequently does the data update? +4. What is the primary glanceable need? + +## Related Skills + +- **hig-components-status** -- Progress indicators in widgets or Live Activities +- **hig-inputs** -- Interaction patterns for system experiences (Digital Crown for complications) +- **hig-technologies** -- Siri for App Shortcuts, HealthKit for complications, NFC for App Clips + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-components-system/references/app-clips.md b/skills/hig-components-system/references/app-clips.md new file mode 100644 index 00000000..62cf006f --- /dev/null +++ b/skills/hig-components-system/references/app-clips.md @@ -0,0 +1,387 @@ +--- +title: "App Clips | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/app-clips + +# App Clips + +An App Clip is a lightweight version of your app or game that provides an on-the-go or demo experience that’s instantly available. + +![A sketch of an app icon surrounded by a dashed line, suggesting an App Clip. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/45d063cf460141fa261373aeb111078f/technologies-app-clips-intro%402x.png) + +App Clips deliver an experience from your app or game without requiring people to download the full app from the App Store. App Clips focus on a fast solution to a task or contain a demo that showcases the full app or game, and they remain on the device for a limited amount of time while preserving people’s privacy. + +People discover and launch App Clips in a variety of situations and contexts. At a physical location, people launch an App Clip by scanning an App Clip Code, NFC tag, or a QR code. An App Clip Code tends to be the best way for people to discover and launch your App Clip because its distinct design is immediately recognizable, and people trust it to offer a fast, secure way to launch an App Clip. + +On their device, people launch an App Clip from location-based suggestions they permit in Siri Suggestions, the Maps app, Smart App Banners on websites, App Clip cards in Safari, and by tapping links others share with them in the Messages app. Starting with iOS 17, an app can include links and App Clip previews that people tap to launch another app’s App Clip. + +![A screenshot of an iPhone Lock Screen. The bottom half of the screen shows the App Clip card for a donut shop’s App Clip as it appears when the person invokes the App Clip.](https://docs-assets.developer.apple.com/published/513ba0042660873295cdbab4a21dccac/app-clips-hero-1%402x.png) + +![A screenshot of a donut shop’s App Clip on iPhone as it appears when a person confirms the App Clip’s launch on the App Clip card. The App Clip displays a list with various donuts the person can order.](https://docs-assets.developer.apple.com/published/80ef3fe27d095cad107352f204283551/app-clips-hero-2%402x.png) + +Consider creating an App Clip if your app provides an in-the-moment experience that helps people perform a task over a finite amount of time. For example: + + * A rental bike could come with an App Clip Code that people tap or scan to launch an App Clip that lets them rent the bike. + + * A coffee shop could offer an App Clip for fast advance orders that customers launch from a Smart App Banner or an App Clip card on the shop’s website. Customers could share a link to the website from the Messages app, which recipients then tap to launch the App Clip from within Messages. + + * A food truck could create marketing material (for example, a poster to promote a seasonal dish) that includes an App Clip Code. People can scan the App Clip Code with the Camera app on their device and instantly launch the App Clip to order the seasonal dish. + + * A restaurant could let diners pay for a meal by launching an App Clip from the Maps app or a suggestion from Siri Suggestions, or by holding their device close to an App Clip Code or NFC tag at their table. + + * A museum could have visitors scan App Clip Codes or QR codes on labels next to displayed works to launch an App Clip that reveals augmented reality content or provides audio commentary. + + + + +Consider creating an App Clip to let people experience your app or game before committing to a purchase or subscription. Focus on providing people with an opportunity to experience and understand your app or game. For example: + + * A game might offer an App Clip that lets people play a demo version of the game, including a tutorial and the first level of the game. + + * A fitness app might offer an App Clip with a free workout and a guided meditation. + + * A text editor might allow people to create and save a document using the demo App Clip. + + + + +For developer guidance, see [App Clips](https://developer.apple.com/documentation/AppClip). + +## [Designing your App Clip](https://developer.apple.com/design/human-interface-guidelines/app-clips#Designing-your-App-Clip) + +**Allow people to complete a task or a demo in your App Clip.** Don’t require people to install the full app to experience the entire demo, to complete a task, or to finish a level in a game. + +**Focus on essential features.** Interactions with App Clips are quick and focused. Limit features to what’s necessary to accomplish the task at hand. Reserve advanced or complex features for the app. If you offer a demo version of your full app, focus on essential features that give people a good sense of your game or your app’s functionality. + +**Don’t use App Clips solely for marketing purposes.** App Clips need to provide real value and help people accomplish tasks. Don’t use them as a means to advertise services or products, and don’t display ads in your App Clip. + +**Avoid using web views in your App Clip.** App Clips use native components and frameworks to offer an app-quality experience. If only web components are available to you, offer a quick link to your website instead of an App Clip. + +**Design a linear, easy-to-use, and focused user interface.** App Clips don’t need tab bars, complex navigation, or settings. Keep the number of screens and entry forms to a minimum. Remove extraneous information and reduce complexity in the user interface wherever possible. + +**On launch, show the most relevant part of your App Clip.** Skip unnecessary steps and take people immediately to the part of the App Clip that best fits their context. + +**Ensure people can use your App Clip immediately.** App Clips need to include all required assets, omit splash screens, and never make people wait on launch. + +**Ensure your App Clip is small.** The smaller your App Clip, the faster it will launch on a person’s device. Keeping your App Clip small is especially important when bandwidth is limited. As much as possible, reduce unnecessary code and remove unused assets. Avoid downloading additional data, which can take away the feeling of immediacy. + +**Make the App Clip shareable.** When someone shares a link to an App Clip in the Messages app, recipients can launch the App Clip from within the Messages app. Offer the ability to share links to specific points in your App Clip, and encourage people to share the App Clip with others. + +**Make it easy to pay for a service or product.** Entering payment information can be a long and error-prone task. Consider supporting [Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay) to offer express checkout and let people enter shipping information with no typing. + +**Avoid requiring people to create an account before they can benefit from your App Clip.** Creating an account is a complex task that takes time and effort. Consider not requiring an account, or think about asking people to create an account after they finish a task. If your App Clip requires an account to provide value, limit the amount of information people need to provide — for example, by offering [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple). + +**Provide a familiar, focused experience in your app.** When people install the full app, it replaces the App Clip on their device. From this moment, invocations that would have launched the App Clip launch the full app instead. Ensure your app provides a focused, familiar experience to people who previously used the App Clip. Don’t require additional steps that slow people down; for example, don’t require people to log in again when they transition from the App Clip to the app. + +### [Preserving privacy](https://developer.apple.com/design/human-interface-guidelines/app-clips#Preserving-privacy) + +The system imposes limits on App Clips to ensure people’s privacy. For example, App Clips can’t perform background operations. For developer guidance, see [Choosing the right functionality for your App Clip](https://developer.apple.com/documentation/AppClip/choosing-the-right-functionality-for-your-app-clip). + +**Limit the amount of data you store and handle yourself.** If you need to store people’s data — for example, login information — store it securely. In addition, don’t rely on the availability of data you previously stored on the device — the system may have removed the App Clip from the device between launches and deleted all of its data. If you store login information, securely store it off the device. + +**Consider offering Sign in with Apple.** Sign in with Apple securely retains login information off people’s devices and preserves their privacy. For guidance, see [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple). + +**Offer a secure way to pay for services or goods that also respects people’s privacy.** For example, consider offering [Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay). + +### [Showcasing your app](https://developer.apple.com/design/human-interface-guidelines/app-clips#Showcasing-your-app) + +People don’t manage App Clips themselves, and App Clips don’t appear on the Home screen. Instead, the system removes an App Clip after a period of inactivity. + +Because apps remain the best way to keep people engaged over time, the system helps them discover and install the full app: + + * On the App Clip card, people can either launch the App Clip or visit the full app’s page on the App Store. + + * When people first launch the App Clip, the system displays an app banner at the top of the screen. Like the App Clip card, the banner allows people to visit the app’s page on the App Store. + + + + +In addition, you can display an overlay in your App Clip that allows people to download the full app from within the App Clip. + +**Don’t compromise the user experience by asking people to install the full app.** If your App Clip offers an on-the-go experience, consider whether the App Clip card and the system-provided app banner provide enough incentive for people to download the full app. If your App Clip offers a demo experience, let people fully experience the demo before asking them to install the full app. + +**Pick the right time to recommend your app.** When someone completes a task or reaches a natural pause, display an [`SKOverlay`](https://developer.apple.com/documentation/StoreKit/SKOverlay) that allows people to initiate a download of your full app or game from the context of the App Clip. + +**Recommend your app in a nonintrusive, polite way.** Don’t ask people to install the full app repeatedly or interrupt them during a task. Push notifications aren’t a good way to ask people to install the app either. Clearly communicate your app’s additional features. + +For developer guidance, see [Recommending your app to App Clip users](https://developer.apple.com/documentation/AppClip/recommending-your-app-to-app-clip-users). + +### [Limiting notifications](https://developer.apple.com/design/human-interface-guidelines/app-clips#Limiting-notifications) + +App Clips provide the option to schedule and receive notifications for up to 8 hours after launch, enough time to follow up and complete most common tasks. + +**Only ask for permission to use notifications for an extended period of time if it’s really needed.** If your App Clip’s functionality spans more than a day, explicitly request permission to schedule and receive notifications. For example, a car rental company’s App Clip can ask for permission to send a notification that reminds people that they need to return a rented car soon. + +**Keep notifications focused.** Don’t send purely promotional notifications, and only use notifications in response to an explicit user action. If a person completes their task without leaving the App Clip, you might not need to send any notifications at all. + +**Use notifications to help people complete a task.** Notifications for an App Clip relate directly to the task the App Clip helps to accomplish. For example, an App Clip that helps people order food could send notifications related to a scheduled delivery. + +For developer guidance, see [Enabling notifications in App Clips](https://developer.apple.com/documentation/AppClip/enabling-notifications-in-app-clips). + +### [Creating App Clips for businesses](https://developer.apple.com/design/human-interface-guidelines/app-clips#Creating-App-Clips-for-businesses) + +If you’re a platform provider who services businesses, you may create several App Clip experiences in [App Store Connect](https://appstoreconnect.apple.com) and use a single App Clip to power them all. To people using the App Clip, it appears with the branding of an individual business or location instead of your own branding. + +**Use consistent branding.** When people see the App Clip card for a business, the brand for that business is front and center. Tone down your own branding and make sure the branding for the business is clearly visible to avoid confusing people when they enter the App Clip experience. + +**Consider multiple businesses.** An App Clip may power many different businesses or a business that has multiple locations. In both scenarios, people may end up using the App Clip for more than one business or location at a time. The App Clip must handle this use case and update its user interface accordingly. For example, consider a way to switch between recent businesses or locations within your App Clip, and verify a person’s location when they launch it. + +For developer guidance, see [Configuring App Clip experiences](https://developer.apple.com/documentation/AppClip/configuring-the-launch-experience-of-your-app-clip). + +## [Creating content for an App Clip card](https://developer.apple.com/design/human-interface-guidelines/app-clips#Creating-content-for-an-App-Clip-card) + +The system-provided App Clip card is people’s first interaction with your App Clip, so give careful consideration to its images and copy. + +**Be informative.** Make sure the image on the App Clip card clearly communicates the features offered by your App Clip, supported tasks, or content. + +**Prefer photography and graphics.** Avoid using a screenshot of your app’s user interface because it’s unlikely to communicate the purpose of your App Clip. Instead, use an image that helps people understand the App Clip’s value, or a photo of the location of its associated business or point of interest. + +**Avoid using text.** Text in the header image isn’t localizable, can be difficult to read, and can make a card image less aesthetically pleasing. + +**Adhere to image requirements.** Use a 1800x1200 px PNG or JPEG image without transparency. + +**Use concise copy.** An App Clip card requires both a title and a subtitle. Clearly express the purpose of your App Clip within the available space so people can read and understand it at a glance. Create a title that has no more than 30 characters and a subtitle that has no more than 56 characters. + +**Pick a verb for the action button that best fits your App Clip.** Possible verbs are _View_ , _Play_ , or _Open_. Pick _View_ for media, or if your App Clip provides informational or educational content. Pick _Play_ for games. Choose _Open_ for all other App Clips. + +![A horizontal row of two App Clip cards. The left App Clip card is for a game and uses Play as the verb for the action button. The right App Clip card is for an app and uses Open as the verb for the action button.](https://docs-assets.developer.apple.com/published/d23129c13777717e7b27c9a1e2b2f8b0/app-clips-card%402x.png) + +## [App Clip Codes](https://developer.apple.com/design/human-interface-guidelines/app-clips#App-Clip-Codes) + +App Clip Codes are the best way for people to discover your App Clip. Their distinct design is immediately recognizable, and they offer a fast, secure way to launch your App Clip. + +![An App Clip Code that uses a badge design with the App Clip logo.](https://docs-assets.developer.apple.com/published/a5b0ac2b9f76d76391473c86a4104ef9/with-appclip-logo%402x.png)App Clip Code with the App Clip logo + +![An App Clip Code that uses a design without the App Clip logo.](https://docs-assets.developer.apple.com/published/2441534012373af30bf4e6ac94bbcc20/without-appclip-logo%402x.png)App Clip Code without the App Clip logo + +App Clip Codes always use the designs Apple provides and follow size, placement, and printing guidelines. Choose between the badge design that uses the App Clip logo ( App Clip) or, when space is at a premium, a design without it. Create App Clip Codes that use a default color pair, or choose custom foreground and background colors. For developer guidance, see [Creating App Clip Codes](https://developer.apple.com/documentation/AppClip/creating-app-clip-codes). + +### [Interacting with App Clip Codes](https://developer.apple.com/design/human-interface-guidelines/app-clips#Interacting-with-App-Clip-Codes) + +App Clip Codes come in two variants: _scan-only_ or with an embedded NFC tag (_NFC-integrated_). + +![A scan-only App Clip Code with callouts for the center icon, visual code, and the App Clip logo.](https://docs-assets.developer.apple.com/published/3e01f3350c0634f35ba0cb54c46b4227/scan-only%402x.png) + +The scan-only variant uses a camera icon in its center to let people know to use the Camera app or the Code Scanner in Control Center to scan the App Clip Code. The NFC-integrated variant uses an iPhone icon at its center that guides people to hold their device close to the App Clip Code or to scan it using the NFC Tag Reader in Control Center. People can also scan an NFC-integrated App Clip Code with the Camera app or the Code Scanner in Control Center. For example: + + * A coffee shop could place an App Clip Code on their menu. A guest could hold their device close to the App Clip Code and instantly launch the shop’s App Clip to order a drink. + + * A gas station could have an NFC-integrated App Clip Code attached to each pump. A traveler could hold their device close to it to launch the gas station’s App Clip and use it to pay for their refill. + + * A video game creator could hand out marketing material at an industry event that includes an App Clip Code. An event attendee could scan the code to launch an App Clip that’s a playable demo of their latest video game. + + + + +![An illustration that shows how a person uses an App Clip Code on a table at a coffee shop. The left side of the illustration shows two people sitting at a table. A placard in the middle of the table contains an App Clip Code. The person on the left is using their camera to scan the App Clip Code. The right side of the illustration shows a zoomed-in version of the person's phone screen and the placard on the table.](https://docs-assets.developer.apple.com/published/331753285f06bb59ab3bae929756a505/interacting-coffee-shop-example%402x.png) + +### [Displaying App Clip Codes](https://developer.apple.com/design/human-interface-guidelines/app-clips#Displaying-App-Clip-Codes) + +When you start designing your App Clip Codes, choose the variant that works best for the way people use your App Clip. If people can physically access the App Clip Code, use the NFC-integrated variant. For example: + + * On a tabletop at a restaurant + + * Near a register at a retail store + + * In a storefront window + + * On signage + + * On a gift card or coupon + + + + +If you need to place your App Clip Code in an area that’s physically inaccessible or you need to display it digitally, use a scan-only App Clip Code. For example: + + * On posters or printed advertising + + * On signage behind a counter or unreachable in a storefront + + * On digital materials such as digital displays, in emails, or on images you post to social media + + + + +No matter which of the two variants you use, it’s important you carefully consider where you place your App Clip Code to ensure a reliable scanning experience. + +**Include the App Clip logo when space allows.** The logo helps make it clear that the code launches an App Clip; however, if you can’t meet the clear space requirements, use the App Clip Code design without the App Clip logo. Also, use the design without the App Clip logo if you place the App Clip Code on disposable paper or plastic items, or on items associated with gambling or drinking. For example, use the App Clip Code without the App Clip logo on playing cards, poker chips, or bar coasters. The App Clip logo is always part of the badge design where it appears below the App Clip Code; never use the App Clip logo on its own. + +**Place your App Clip Code on a flat or cylindrical surface only.** If you place your App Clip Code on a cylindrical surface — for example, on a scooter’s handlebar — make sure the width of the App Clip Code doesn’t exceed one-sixth of the cylinder’s circumference. + +![An illustration that shows a circle that represents a cylindrical surface. Lines divide the circle into six segments of equal size. One segment represents an App Clip Code and shows how the code doesn’t cover more than one-sixth, or 60 degrees, of the surface’s circumference.](https://docs-assets.developer.apple.com/published/5999e7c0f514a877839b74e365c8a7e2/app-clips-slice%402x.png) + +**Help your App Clip Code remain as flat as possible so it’s easy for people to scan.** To provide the best scanning experience, avoid displaying App Clip Codes on deformable materials that readily fold or crumple, such as paper, plastic, or fabric. If you need to make your App Clip Code available on a bag, flexible box, or other deformable object, display it on something rigid — like a card — that you attach to the object. If you create an App Clip Code sticker, make sure it adheres well to flat surfaces. + +**Place your App Clip Code in a location that helps ensure reliable scanning.** For example, place a scan-only App Clip Code in a location that offers enough light to ensure reliable scanning, and don’t require people to scan from a wide angle. + +**Make sure the App Clip Code is unobstructed.** Don’t overlay the App Clip Code with text, logos, or images. Never animate the App Clip Code or dim it. + +**Display the App Clip Code in an upright position.** Don’t rotate the generated App Clip Code or display the center glyph at an angle. + +![A correctly placed App Clip Code in the upright position.](https://docs-assets.developer.apple.com/published/a6eaaa833a98678b2b93f910f149bb6e/upright-display-right%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An incorrectly placed App Clip Code that's rotated 90 degrees to the left.](https://docs-assets.developer.apple.com/published/5897608f22eb0d296f1a8189c1f2e38b/upright-display-wrong-1%402x.png) + +![An X in a circle to indicate an invalid App Clip Code.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An incorrectly placed App Clip Code that's rotated 135 degrees to the right.](https://docs-assets.developer.apple.com/published/d4b3a7a3d5685fbec4194deb55bbb0c9/upright-display-wrong-2%402x.png) + +![An X in a circle to indicate an invalid App Clip Code.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Don’t create App Clip Codes that are too small.** App Clip Codes must adhere to the following specifications. + +Type| Minimum size +---|--- +Printed communications| Minimum diameter of 3/4 inch (1.9 cm). +Digital communications| Minimum size of 256×256 px. Use a PNG or SVG file. +NFC-integrated App Clip Code| The embedded NFC tag needs to be at least 35 mm in diameter or of equivalent size. For example, if your embedded NFC tag is 35 mm in diameter, your printed App Clip Code needs to be at least 1.37 inches (3.48 cm) in diameter. + +![An App Clip Code that uses the badge design and has a minimum diameter of 3/4 inch \(1.9 cm\).](https://docs-assets.developer.apple.com/published/604637e18752ed4948becd174afbc361/sizing-minimum-rectangle%402x.png) + +![An App Clip Code that uses the design without the App Clip logo and has a minimum diameter of 3/4 inch \(1.9 cm\).](https://docs-assets.developer.apple.com/published/0aa05fa8f03c37459ea683c058a35a2f/sizing-minimum-circular%402x.png) + +When determining the dimensions of your App Clip Codes, consider a distance to code size ratio of no more than 20:1. If possible, use a ratio of 10:1 to ensure reliable scanning. For example, an App Clip that people scan from 40 inches (101 cm) away needs to be at least 4 inches (10.16 cm) in diameter. + +If you display an App Clip Code near a QR Code or other scannable item, choose a size for the App Clip Code that’s at least the other code’s or item’s size. + +![An illustration of an App Clip Code next to a QR code. Red guides denote that both are the same size.](https://docs-assets.developer.apple.com/published/b693a5616cb7a4b58895496c6b834b2d/app-clip-with-qr-code%402x.png) + +**Provide enough space between an App Clip Code and adjacent App Clip Codes, graphics, or materials.** The minimum clear space around an App Clip Code is equal to the space between the center glyph and the circular code. If you place your App Clip Code next to another App Clip Code or other machine-readable code, leave enough clear space to allow for reliable scanning of each code. + +![An illustration that shows an App Clip Code with the badge design to the left of an App Clip Code without the App Clip logo. A red guide surrounds each App Clip Code, illustrating the clear space requirements.](https://docs-assets.developer.apple.com/published/60ce57295e138b8c399d9c229238f40d/app-clip-spacing%402x.png) + +### [Using clear messaging](https://developer.apple.com/design/human-interface-guidelines/app-clips#Using-clear-messaging) + +Add clear messaging that informs people how they can use the App Clip Code to launch your App Clip, especially if you use the design without the App Clip logo. For example, add a call to action next to an App Clip Code you display in an email or on a poster. Use the suggested call-to-action messaging or your own copy. Always use a simple, clear call to action. + +![An illustration that shows two people sitting at a table at a coffee shop. A placard in the middle of the table contains an App Clip Code. The right side of the illustration shows a zoomed-in version of the placard, which contains an App Clip Code and surrounding text that reads 'Place your order. Hold your iPhone near the menu to place your food order.'.](https://docs-assets.developer.apple.com/published/f168bf0bd2558212caf8059de39205e5/clear-messaging%402x.png) + +For a scan-only App Clip Code, you can use the following call to action: + + * Scan to [_describe what people can do with your App Clip_]. + + * Scan using the camera on your iPhone or iPad to [describe what people can do with your App Clip]. + + + + +For an NFC-integrated App Clip Code, you can use the following call to action: + + * Scan to [_describe what people can do with your App Clip_]. + + * Hold your iPhone near the [_object name_] to launch an App Clip that [_describe what a person can do with your App Clip_]. + + + + +For more information, see [NFC](https://developer.apple.com/design/human-interface-guidelines/nfc). + +**Adhere to[Guidelines for Using Apple Trademarks](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html) when referring to your App Clip and App Clip Codes.** For example, Apple trademarks can’t appear in your app name or images, always use title case when using the terms App Clips or App Clip Code, and so on. For additional information, see [Legal requirements](https://developer.apple.com/design/human-interface-guidelines/app-clips#Legal-requirements). + +### [Customizing your App Clip Code](https://developer.apple.com/design/human-interface-guidelines/app-clips#Customizing-your-App-Clip-Code) + +Use [App Store Connect](https://appstoreconnect.apple.com) or the [App Clip Code Generator](https://developer.apple.com/app-clips/resources/) command-line tool to create App Clip Codes, and follow best practices to ensure a reliable scanning experience. + +![Four App Clip badges, each using different colors. The two on the left use the badge design, and the two on the right use the design without the App Clip logo.](https://docs-assets.developer.apple.com/published/02d96548534ce28b92754477aadbf9bb/app-clips-customizing%402x.png) + +**Always use the generated App Clip Code.** Don’t create your own App Clip Code design or modify a generated App Clip Code in any way. Don’t apply filters, augment its colors, or add glows, shadows, gradients, or reflections. They negatively impact people’s scanning experience. When scaling a generated App Clip Code, don’t change the generated code’s aspect ratio, and be sure to scale all attributes of the App Clip Code — for example the stroke widths. + +![An illustration of an invalid App Clip Code with a changed aspect ratio.](https://docs-assets.developer.apple.com/published/2243d4c0011526cae9bd3d69e62907ae/customizing-wrong-1%402x.png) + +![An X in a circle to indicate an invalid App Clip Code.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of an invalid App Clip Code with a color gradient instead of a solid background color.](https://docs-assets.developer.apple.com/published/6578f646c8aae8d6ac64ef965b783175/customizing-wrong-2%402x.png) + +![An X in a circle to indicate an invalid App Clip Code.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of an invalid App Clip Code with a drop shadow effect.](https://docs-assets.developer.apple.com/published/658d3fafbc3dfdd11dc26f1b5a7aee48/customizing-wrong-3%402x.png) + +![An X in a circle to indicate an invalid App Clip Code.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Choose colors with enough contrast that ensure accurate scanning.** Each App Clip Code uses three colors: a foreground color, a background color, and a third color that’s generated for you based on the foreground and background colors. Both [App Store Connect](https://appstoreconnect.apple.com) and the [App Clip Code Generator](https://developer.apple.com/app-clips/resources/) command-line tool offer a selection of default color pairs. Alternatively, you can choose custom foreground and background colors. Note that you can’t choose custom colors that will lead to a suboptimal scanning experience. If your color selection doesn’t work well, neither App Store Connect nor the command-line tool will generate an App Clip Code. To help you choose a color combination that works well, both tools contain functionality to suggest a different foreground color based on your custom background color. For more information, see [Creating App Clip Codes with the App Clip Code Generator](https://developer.apple.com/documentation/AppClip/creating-app-clip-codes-with-the-app-clip-code-generator) and [Creating App Clip Codes with App Store Connect](https://developer.apple.com/documentation/AppClip/creating-app-clip-codes-with-app-store-connect). + +![An illustration of an App Clip Code that uses the badge design and has callouts for the background, foreground, and generated colors.](https://docs-assets.developer.apple.com/published/aae3a773b90a26b4870f4db43a0c3f94/app-clip-colors%402x.png) + +## [Printing guidelines](https://developer.apple.com/design/human-interface-guidelines/app-clips#Printing-guidelines) + +App Clip Codes offer the best experience to launch App Clips. As a result, it’s important to manufacture and display App Clip Codes that offer a reliable scanning experience for a long time. You can print App Clip Codes yourself, or work with a professional printing service — for example, [RR Donnelley](https://touchless.acc.rrd.com/). + +Always test printed App Clip Codes before you distribute them to be sure they’re scannable from a variety of angles. + +**Use high-quality, non-textured print materials.** Print App Clip Codes on matte finishes. Avoid shine, gloss, reflective or holographic overlays, as well as thin laminate finishes or materials. In case you need to laminate print material with an App Clip Code on it, use a matte laminate to avoid shine and reflections. If you place your App Clip Code outdoors, use UV-resistant materials or coatings to prevent fading from exposure to sunlight, rain, and other weather conditions. If you work with a professional printing service, use flexographic printing for best results. If you print the App Clip Codes yourself using a desktop printer, use an inkjet printer for best results. + +**Use high-resolution images and printer settings.** When rasterizing the SVG file, set the image resolution to at least 600 ppi, and print your App Clip Codes with a minimum resolution of 300 dpi. Consider leveling and calibrating your printer before printing to ensure a high print quality, and avoid poor color channel alignment, inaccurate gamma values, artifacts, or printing elliptical or otherwise distorted App Clip Codes. When using receipt printers, print App Clip Codes as close to the paper’s maximum bounds as possible. + +**Use correct color settings when you convert the generated SVG file to a CMYK image.** Both the [App Clip Code Generator](https://developer.apple.com/app-clips/resources/) command-line tool and [App Store Connect](https://appstoreconnect.apple.com) generate App Clip Codes as SVG files in the sRGB color space. To print colors that match the SVG file, convert the sRGB image to a CMYK image. Use a relative calorimetric (media-relative) intent when performing the conversion. Use “Generic CMYK ICC profile” on CMYK printers or “Gracol 2013 ICC profile” on CMYKOV printers and allow for a color tolerance CIELab Delta E of 2.5. + +**If you’re using a printer that only prints in grayscale, only generate grayscale App Clip Codes.** Codes generated in color and then printed in grayscale may work less reliably. + +**For NFC-integrated App Clip Codes, choose Type 5 NFC tags.** The embedded NFC tag needs to be at least 35 mm in diameter or of equivalent size. + +**If you create large batches of App Clip Codes, thoroughly test your printing workflow, and verify printed App Clip Codes.** For example, conduct small, inexpensive print runs using a subset of codes. Print your App Clip Codes on print templates with additional padded regions that allow you to display the encoded invocation URL and the SVG filename alongside each code for validation at the time of print. + +If you create many App Clip Codes with the [App Clip Code Generator](https://developer.apple.com/app-clips/resources/) tool or [App Store Connect](https://appstoreconnect.apple.com), you’ll likely work with a professional printing service. If this is the case, you need to handle a lot of SVG files. Because you have no way of knowing which App Clip Code encodes which URL by looking at an App Clip Code, you need to use a file that contains information about which SVG file maps to which invocation URL. Under any circumstance, careful file management, versioning, and change tracking are key to avoiding faulty print runs. For more information, see [Preparing multiple App Clip Codes for production](https://developer.apple.com/documentation/AppClip/preparing-multiple-app-clip-codes-for-production). + +### [Verifying your printer’s calibration](https://developer.apple.com/design/human-interface-guidelines/app-clips#Verifying-your-printers-calibration) + +A reliable scanning experience depends on the quality of your printed App Clip Codes. To ensure printing App Clip Codes results in a reliable scanning experience and to avoid using a printer that can’t print high-quality App Clip Codes, Apple offers [printer calibration test sheets](https://developer.apple.com/app-clips/resources/printer-calibration-test-sheets.zip) you can use to verify your printer’s settings and print quality. + +**Verify print quality of your chosen color pair with the printer calibration test sheet that shows text boxes for each default color pair.** Follow the instructions on the sheet to print it at the right scale and to verify that your printer can create high-quality App Clip Codes. + +**Verify your printer’s grayscale settings by printing the printer calibration test sheet that shows two grayscale bars.** If any of the specific gray colors are light or entirely missing, the printer may need calibration or may not be suitable for printing an App Clip Code that allows for reliable scanning. + +## [Legal requirements](https://developer.apple.com/design/human-interface-guidelines/app-clips#Legal-requirements) + +Only the Apple-provided App Clip Codes created in App Store Connect or with the App Clip Code Generator command-line tool and that follow these guidelines are approved for use. + +App Clip Codes are approved for use to indicate availability of an App Clip. Apple may update the App Clip Code design from time to time at Apple’s discretion. + +In the event your App Clip is no longer active, also stop displaying the App Clip Code associated with that inactive App Clip. + +You may not use the App Clip Code (including, without limitation, the Apple Logo, the App Clip mark, and the App Clip Code designs) as part of your own company name or as part of your product name. You may not seek copyright or trademark registration for the App Clip Codes or any elements contained therein. + +The App Clip Codes described in these guidelines must not be used in any manner that is likely to reduce, diminish, or damage the goodwill, value, or reputation associated with Apple or App Clips; or that infringes or violates the trademarks or other proprietary rights of any third party; or that is likely to cause confusion as to the source of products or services. + +Apple retains all rights to its trademarks, copyrights, or other intellectual property rights contained in the materials provided for use hereunder, including, without limitation, the App Clip Codes and any elements contained therein. + +Don’t add a symbol to App Clip Codes created in App Store Connect or with the App Clip Code Generator command-line tool. + +Don’t translate any Apple trademark. Apple trademarks must remain in English even when they appear within text in a language other than English. With Apple’s approval, a translation of the legal notice and credit lines (but not the trademarks) can be used in materials distributed outside the U.S. + +For more information about using Apple trademarks, see [Guidelines for Using Apple Trademarks](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/app-clips#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/app-clips#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/app-clips#Related) + +[Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay) + +[Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple) + +[Guidelines for Using Apple Trademarks and Copyrights](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/app-clips#Developer-documentation) + +[App Clips](https://developer.apple.com/documentation/AppClip) + +[App Store Connect](https://appstoreconnect.apple.com/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/app-clips#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/95357E8D-01E6-476E-9516-8AF54EC9794A/4878_wide_250x141_1x.jpg) What's new in App Clips ](https://developer.apple.com/videos/play/wwdc2021/10012) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/7120E473-4A84-447D-8B55-0F1614324E59/4879_wide_250x141_1x.jpg) Build light and fast App Clips ](https://developer.apple.com/videos/play/wwdc2021/10013) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/app-clips#Change-log) + +Date| Changes +---|--- +June 9, 2025| Updated guidance to include demo App Clips. +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-components-system/references/app-shortcuts.md b/skills/hig-components-system/references/app-shortcuts.md new file mode 100644 index 00000000..6ff2c0ce --- /dev/null +++ b/skills/hig-components-system/references/app-shortcuts.md @@ -0,0 +1,114 @@ +--- +title: "App Shortcuts | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/app-shortcuts + +# App Shortcuts + +An App Shortcut gives people access to your app’s key functions or content throughout the system. + +![A stylized representation of the Notes app appearing as the result in the Top Hit area of Spotlight, along with App Shortcuts for creating a new note and opening two other recent notes. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/183dda77d62e2ab7dae5994f2e754a26/components-app-shortcuts-intro%402x.png) + +People can initiate App Shortcuts using features like [Siri](https://developer.apple.com/design/human-interface-guidelines/siri), Spotlight, and the Shortcuts app; using hardware features like the [Action button](https://developer.apple.com/design/human-interface-guidelines/action-button) on iPhone or Apple Watch; or by [squeezing](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Squeeze) Apple Pencil. + +Because App Shortcuts are part of your app, they are available immediately when installation finishes. For example, a journaling app could offer an App Shortcut for making a new journal entry that’s available before a person opens the app for the first time. Once someone starts using your app, its App Shortcuts can reflect their choices, like those from FaceTime for calling recent contacts. + +![A partial screenshot of the Shortcuts app on iPhone showing App Shortcuts for FaceTime listed in a grid view. The App Shortcuts are in a group labeled Call Recents, and are each titled with the name of a recent FaceTime contact.](https://docs-assets.developer.apple.com/published/c5f6fb621f6aadfac85015446ec31542/app-shortcuts-personalized-choices%402x.png) + +App Shortcuts use [App Intents](https://developer.apple.com/documentation/AppIntents) to define actions within your app to make available to the system. Each App Shortcut includes one or more actions that represent a set of steps people might want to perform to accomplish a task. For example, a home security app might combine the two common actions of turning off the lights and locking exterior doors when a person goes to sleep at night into a single App Shortcut. Each app can include up to 10 App Shortcuts. + +Note + +When you use App Intents to make your app’s actions available to the system, in addition to the App Shortcuts that your app provides, people can also make their own custom shortcuts by combining actions in the Shortcuts app. Custom shortcuts give people flexibility to configure the behavior of actions, and enable workflows that perform tasks across multiple apps. For additional guidance, see the [Shortcuts User Guide](https://support.apple.com/guide/shortcuts/welcome/ios). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Best-practices) + +**Offer App Shortcuts for your app’s most common and important tasks.** Straightforward tasks that people can complete without leaving their current context work best, but you can also open your app if it helps people complete multistep tasks more easily. + +**Add flexibility by letting people choose from a set of options.** An App Shortcut can include a single optional value, or parameter, if it makes sense. For example, a meditation app could offer an App Shortcut that lets someone begin a specific type of meditation: “Start [morning, daily, sleep] meditation.” Include predictable and familiar values as options, because people won’t have the list in front of them for reference. For developer guidance, see [Adding parameters to an app intent](https://developer.apple.com/documentation/AppIntents/Adding-parameters-to-an-app-intent). + +![A diagram of the activation phrase of a shortcut for ordering a drink from a coffee app. The activation phrase contains an optional value for the name of the drink, which is underlined and called out as the shortcut's parameter.](https://docs-assets.developer.apple.com/published/30601265724ed100cf9fbbe64c8b9c9c/app-intents-parameter-diagram%402x.png) + +**Ask for clarification in response to a request that’s missing optional information.** For example, someone might say “Start meditation” without specifying the type (morning, daily, or sleep); you could follow up by suggesting the one they used most recently, or one based on the current time of day. If one option is most likely, consider presenting it as the default, and provide a short list of alternatives to choose from if a person doesn’t want the default choice. + +**Keep voice interactions simple.** If your phrase feels too complicated when you say it aloud, it’s probably too difficult to remember or say correctly. For example, “Start [sleep] meditation with nature sounds” appears to have two possible parameters: the meditation type, and the accompanying sound. If additional information is absolutely required, ask for it in a subsequent step. For additional guidance on writing dialogue text for voice interactions, see [Siri](https://developer.apple.com/design/human-interface-guidelines/siri). + +**Make App Shortcuts discoverable in your app.** People are most likely to remember and use App Shortcuts for tasks they do often, once they know the shortcut is available. Consider showing occasional tips in your app when people perform common actions to let them know an App Shortcut exists. For developer guidance, see [`SiriTipUIView`](https://developer.apple.com/documentation/AppIntents/SiriTipUIView). + +### [Responding to App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Responding-to-App-Shortcuts) + +As a person engages with an App Shortcut, your app can respond in a variety of ways, including with dialogue that Siri speaks aloud and custom visuals like snippets and Live Activities. + + * Snippets are great for custom views that display static information or dialog options, like showing the weather at a person’s location or confirming an order. For developer guidance, see [`ShowsSnippetView`](https://developer.apple.com/documentation/AppIntents/ShowsSnippetView). + + * [Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities) offer continuous access to information that’s likely to remain relevant and change over a period of time, and are great for timers and countdowns that appear until an event is complete. For developer guidance, see [`LiveActivityIntent`](https://developer.apple.com/documentation/AppIntents/LiveActivityIntent). + + + + +![A screenshot of the iPhone Home Screen with a custom snippet occupying the top half of the screen. The snippet includes buttons to confirm or cancel a delivery order from a coffee shop, along with the items in the order and the total price.](https://docs-assets.developer.apple.com/published/05c70d4c5b6a1d65a1ea0a1662b5aa83/app-shortcuts-siri-dialogue%402x.png) + +![A screenshot of the iPhone Home Screen with a Live Activity occupying the top quarter of the screen. The Live Activity shows the estimated time for the arrival of a delivery of an order from a coffee shop, along with the number of items in the order and a button to contact the delivery driver.](https://docs-assets.developer.apple.com/published/62d4ff80b64dba56a083468c467fdb64/app-shortcuts-live-activity%402x.png) + +**Provide enough detail for interaction on audio-only devices.** People can receive responses on audio-only devices such as AirPods and HomePod too, and may not always be able to see content onscreen. Include all critical information in the full dialogue text of your App Shortcuts. For developer guidance, see [`init(full:supporting:systemImageName:)`](https://developer.apple.com/documentation/AppIntents/IntentDialog/init\(full:supporting:systemImageName:\)). + +## [Editorial guidelines](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Editorial-guidelines) + +**Provide brief, memorable activation phrases and natural variants.** Because an App Shortcut phrase (or a variant you define) is what people say to run an App Shortcut with Siri, it’s important to keep it brief to make it easier to remember. You have to include your app name, but you can be creative with it. For example, Keynote accepts both “Create a Keynote” and “Add a new presentation in Keynote” as App Shortcut phrases for creating a new document. For developer guidance, see [`AppShortcutPhrase`](https://developer.apple.com/documentation/AppIntents/AppShortcutPhrase). + +**When referring to App Shortcuts or the Shortcuts app, always use title case and make sure that _Shortcuts_ is plural.** For example, _MyApp integrates with Shortcuts to provide a quick way to get things done with just a tap or by asking Siri, and offers App Shortcuts you can place on the Action button._ + +**When referring to individual shortcuts (not App Shortcuts or the Shortcuts app), use lowercase.** For example, _Run a shortcut by asking Siri or tapping a suggestion on the Lock Screen._ + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Platform-considerations) + + _No additional considerations for visionOS or watchOS. Not supported in tvOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#iOS-iPadOS) + +App Shortcuts can appear in the Top Hit area of Spotlight when people search for your app, or in the Shortcuts area below. Each App Shortcut includes a symbol from [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) that you choose to represent its functionality, or a preview image of an item that the shortcut links to directly. + +![A partial screenshot showing search results in Spotlight on iPhone, including the Top Hit area at the top of the screen with the Suggestions area beneath it. The Notes app appears as the Top Hit, with App Shortcuts appearing in a row to the right of the app icon: one titled New Note with a symbol of a pencil diagonally over a square, one titled Quick Note with a symbol of a scribbled line on a canvas, and one with a thumbnail of an embedded image for a recent note titled Nature. The Suggestions area includes a link to a web search for 'not,' and suggested autocomplete terms 'noteworthy' and 'notes'.](https://docs-assets.developer.apple.com/published/11e4814bf124943b889fc4f56a025431/app-shortcuts-spotlight-search-top-hit%402x.png) + +**Order shortcuts based on importance.** The order you choose determines how App Shortcuts initially appear in both Spotlight and the Shortcuts app, so it’s helpful to include the most generally useful ones first. Once people start using your App Shortcuts, the system updates to prioritize the ones they use most frequently. + +**Offer an App Shortcut that starts a Live Activity.** Live Activities allow people to track an event or the progress of a task in glanceable locations across their devices. For example, a cooking app could offer a Live Activity to show the time left until a dish is ready to take out of the oven. To make it easy for people to start a cooking timer, the app offers an App Shortcut that people can place on the Action button. For more information about Live Activities, see [Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#macOS) + +App Shortcuts aren’t supported in macOS. However, actions you create for your app using App Intents are supported, and people can build custom shortcuts using them with the Shortcuts app on Mac. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Related) + +[Siri](https://developer.apple.com/design/human-interface-guidelines/siri) + +[Siri Style Guide](https://developer.apple.com/siri/style-guide/) + +[Shortcuts User Guide](https://support.apple.com/guide/shortcuts/welcome/ios) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Developer-documentation) + +[App Intents](https://developer.apple.com/documentation/AppIntents) + +[SiriKit](https://developer.apple.com/documentation/SiriKit) + +[Making actions and content discoverable and widely available](https://developer.apple.com/documentation/AppIntents/Making-actions-and-content-discoverable-and-widely-available) — App Intents + +[Integrating custom data types into your intents](https://developer.apple.com/documentation/AppIntents/Integrating-custom-types-into-your-intents) — App Intents + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/4D88FD13-E491-4499-AA3F-8A84CF4BA607/9999_wide_250x141_1x.jpg) Design interactive snippets ](https://developer.apple.com/videos/play/wwdc2025/281) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/05A21C8D-2A52-47BF-85A6-EB13E720EC85/9971_wide_250x141_1x.jpg) Get to know App Intents ](https://developer.apple.com/videos/play/wwdc2025/244) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/CD2BF2ED-403B-4831-9B5C-8A774D0EB7C7/9344_wide_250x141_1x.jpg) Bring your app’s core features to users with App Intents ](https://developer.apple.com/videos/play/wwdc2024/10210) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts#Change-log) + +Date| Changes +---|--- +January 17, 2025| Updated and streamlined guidance. +June 5, 2023| New page. + diff --git a/skills/hig-components-system/references/complications.md b/skills/hig-components-system/references/complications.md new file mode 100644 index 00000000..2e833d51 --- /dev/null +++ b/skills/hig-components-system/references/complications.md @@ -0,0 +1,425 @@ +--- +title: "Complications | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/complications + +# Complications + +A complication displays timely, relevant information on the watch face, where people can view it each time they raise their wrist. + +![A stylized representation of an Apple Watch face that includes the time and a set of differently sized complications with labels. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/0da5c74b1de3ab3c76a9f7ff332dec5d/components-complications-intro%402x.png) + +People often prefer apps that provide multiple, powerful complications, because it gives them quick ways to view the data they care about, even when they don’t open the app. + +Most watch faces can display at least one complication; some can display four or more. + +Starting in watchOS 9, the system organizes complications (also known as _accessories_) into several families — like [circular](https://developer.apple.com/design/human-interface-guidelines/complications#Circular) and [inline](https://developer.apple.com/design/human-interface-guidelines/complications#Inline) — and defines some recommended layouts you can use to display your complication data. A watch face can specify the family it supports in each complication slot. Complications that work in earlier versions of watchOS can use the [legacy templates](https://developer.apple.com/design/human-interface-guidelines/complications#Legacy-templates), which define nongraphic complication styles that don’t take on a wearer’s selected color. + +Developer note + +Prefer using [WidgetKit](https://developer.apple.com/documentation/WidgetKit) to develop complications for watchOS 9 and later. For guidance, see [Migrating ClockKit complications to WidgetKit](https://developer.apple.com/documentation/WidgetKit/Converting-A-ClockKit-App). To support earlier versions of watchOS, continue to implement the ClockKit complication data source protocol (see [`CLKComplicationDataSource`](https://developer.apple.com/documentation/ClockKit/CLKComplicationDataSource)). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/complications#Best-practices) + +**Identify essential, dynamic content that people want to view at a glance.** Although people can use a complication to quickly launch an app, the complication behavior they appreciate more is the display of relevant information that always feels up to date. A static complication that doesn’t display meaningful data may be less likely to remain in a prominent position on the watch face. + +**Support all complication families when possible.** Supporting more families means that your complications are available on more watch faces. If you can’t display useful information for a particular complication family, provide an image that represents your app — like your app icon — that still lets people launch your app from the watch face. + +**Consider creating multiple complications for each family.** Supporting multiple complications helps you take advantage of shareable watch faces and lets people configure a watch face that’s centered on an app they love. For example, an app that helps people train for triathlons could offer three circular complications — one for each segment of the race — each of which deep-links to the segment-specific area in the app. This app could also offer a shareable watch face that’s preconfigured to include its swimming, biking, and running complications and to use its custom images and colors. When people choose this watch face, they don’t have to do any configuration before they can start using it. For guidance, see [Watch faces](https://developer.apple.com/design/human-interface-guidelines/watch-faces). + +**Define a different deep link for each complication you support.** It works well when each complication opens your app to the most relevant area. If all the complications you support open the same area in your app, they can seem less useful. + +**Keep privacy in mind.** With the Always-On Retina display, information on the watch face might be visible to people other than the wearer. Make sure you help people prevent potentially sensitive information from being visible to others. For guidance, see [Always On](https://developer.apple.com/design/human-interface-guidelines/always-on). + +**Carefully consider when to update data.** You provide a complication’s data in the form of a timeline where each entry has a value that specifies the time at which to display your data on the watch face. Different data sets might require different time values. For example, a meeting app might display information about an upcoming meeting an hour before the meeting starts, but a weather app might display forecast information at the time those conditions are expected to occur. You can update the timeline a limited number of times each day, and the system stores a limited number of timeline entries for each app, so you need to choose times that enhance the usefulness of your data. For developer guidance, see [Migrating ClockKit complications to WidgetKit](https://developer.apple.com/documentation/WidgetKit/Converting-A-ClockKit-App#Configure-your-timeline-provider). + +## [Visual design](https://developer.apple.com/design/human-interface-guidelines/complications#Visual-design) + +**Choose a ring or gauge style based on the data you need to display.** Many families support a ring or gauge layout that provides consistent ways to represent numerical values that can change over time. For example: + + * The closed style can convey a value that’s a percentage of a whole, such as for a battery gauge. + + * The open style works well when the minimum and maximum values are arbitrary — or don’t represent a percentage of the whole — like for a speed indicator. + + * Similar to the open style, the segmented style also displays values within an app-defined range, and can convey rapid value changes, such as in the Noise complication. + + + + +**Make sure images look good in tinted mode.** In tinted mode, the system applies a solid color to a complication’s text, gauges, and images, and desaturates full-color images unless you provide tinted versions of them. For developer guidance, see [`WidgetRenderingMode`](https://developer.apple.com/documentation/WidgetKit/WidgetRenderingMode). (If you’re using legacy templates, tinted mode applies only to graphic complications.) To help your complications perform well in tinted mode: + + * Avoid using color as the only way to communicate important information. You want people to get the same information in tinted mode as they do in nontinted mode. + + * When necessary, provide an alternative tinted-mode version of a full-color image. If your full-color image doesn’t look good when it’s desaturated, you can supply a different version of the image for the system to use in tinted mode. + + + + +**Recognize that people might prefer to use tinted mode for complications, instead of viewing them in full color.** When people choose tinted mode, the system automatically desaturates your complication, converting it to grayscale and tinting its images, gauges, and text using a single color that’s based on the wearer’s selected color. + +**When creating complication content, generally use line widths of two points or greater.** Thinner lines can be difficult to see at a glance, especially when the wearer is in motion. Use line weights that suit the size and complexity of the image. + +**Provide a set of static placeholder images for each complication you support.** The system uses placeholder images when there’s no other content to display for your complication’s data. For example, when people first install your app, the system can display a static placeholder while it checks to see if your app can generate a localized placeholder to use instead. Placeholder images can also appear in the carousel from which people select complications. Note that complication image sizes vary per layout (and per legacy template) and the size of a placeholder image may not match the size of the actual image you supply for that complication. For developer guidance, see [`placeholder(in:)`](https://developer.apple.com/documentation/WidgetKit/TimelineProvider/placeholder\(in:\)). + +## [Circular](https://developer.apple.com/design/human-interface-guidelines/complications#Circular) + +Circular layouts can include text, gauges, and full-color images in circular areas on the Infograph and Infograph Modular watch faces. The circular family also defines extra-large layouts for displaying content on the X-Large watch face. + +![A white musical notes icon displayed within a red circle. The circle’s outline is bright red for about ninety percent of the circumference and dull red for about ten percent, showing current progress.](https://docs-assets.developer.apple.com/published/894b82d3c9a300e9ee13ccb6b5db1b18/circular-closed-gauge-image%402x.png)Closed gauge image + +![The number one hundred in white text displayed within a green circle. The circle’s outline appears to overlap the starting point on the circumference by about five percent, showing current progress.](https://docs-assets.developer.apple.com/published/4c708bff423e1259099caeb43d49671e/circular-closed-gauge-text%402x.png)Closed gauge text + +![The number one point zero in white text, surrounded by a partial circle that begins at about the 8:00 position and ends at about the 4:00 position. The partial circle’s outline shades from green at the 8:00 position to violet the 4:00 position. A small green sun icon appears at about the 6:00 position.](https://docs-assets.developer.apple.com/published/654cf781ef7b3aae9d4849238bbc4518/circular-open-gauge-image%402x.png)Open gauge image + +![The number forty-two in white text, surrounded by a partial circle that begins at about the 8:00 position and ends at about the 4:00 position. The partial circle’s outline shades from blue at the 8:00 position to violet the 4:00 position. The letters A, Q, I appear in green text at about the 6:00 position.](https://docs-assets.developer.apple.com/published/e03f6469e57138b5b81c415a14822592/circular-open-gauge-simple-text%402x.png)Open gauge text + +![The number seventy-two in white text, surrounded by a partial circle that begins at about the 8:00 position and ends at about the 4:00 position. The partial circle’s outline shades from green at the 8:00 position to yellow the 4:00 position. Two numbers appear side by side at about the 6:00 position. Fifty-five appears in green text on the left and seventy-six appears in orange text on the right.](https://docs-assets.developer.apple.com/published/07a43e66647416847d4c126f2cc9a3a1/circular-open-gauge-range-text%402x.png)Open gauge range + +![An image of the breathe app icon.](https://docs-assets.developer.apple.com/published/f89731b0962fff02483c177a06a158e1/graphic-circular-image%402x.png)Image + +![A sunset icon displayed above the time seven twenty-four PM, centered within a circular area.](https://docs-assets.developer.apple.com/published/77444d60c23fb81c91b3cca54fdd0bc3/complication-graphic-circular-stack%402x.png)Stack image + +![Two lines of text centered within a circular area. The top line is the Apple stock symbol A A P L in white and the second line is the number 121.96 in green.](https://docs-assets.developer.apple.com/published/d91868e8b2928ef9ae237d15eb98fed0/complication-graphic-circular-stack-text%402x.png)Stack text + +You can also add text to accompany a regular-size circular image, using a design that curves the text along the bezel of some watch faces, like Infograph. The text can fill nearly 180 degrees of the bezel before truncating. + +![A line of white text that appears to follow the curve of the upper third of a circle. The text reads 8:00 AM yoga, flow studio. Centered below the text is the calendar date friday twenty-three displayed in a circular area.](https://docs-assets.developer.apple.com/published/1d10fccea806be8f043ccc0f39ea4caf/bezel-circular-text%402x.png)Closed gauge image + +As you design images for a regular-size circular complication, use the following values for guidance. + +Image| 40mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|--- +Image| 42x42 pt (84x84 px @2x)| 44.5x44.5 pt (89x89 px @2x)| 47x47 pt (94x94 px @2x)| 50x50 pt (100x100 px @2x) +Closed gauge| 27x27 pt (54x54 px @2x)| 28.5x28.5 pt (57x57 px @2x)| 31x31 pt (62x62 px @2x)| 32x32 pt (64x64 px @2x) +Open gauge| 11x11 pt (22x22 px @2x)| 11.5x11.5 pt (23x23 px @2x)| 12x12 pt (24x24 px @2x)| 13x13 pt (26x26 px @2x) +Stack (not text)| 28x14 pt (56x28 px @2x)| 29.5x15 pt (59X30 px @2x)| 31x16 pt (62x32px @ 2x)| 33.5x16.5 pt (67x33 px @2x) + +Note + +The system applies a circular mask to each image. + +A SwiftUI view that implements a regular-size circular complication uses the following default text values: + + * Style: Rounded + + * Weight: Medium + + * Text size: 12 pt (40mm), 12.5 pt (41mm), 13 pt (44mm), 14.5 pt (45mm/49mm) + + + + +If you want to design an oversized treatment of important information that can appear on the X-Large watch face — for example, the Contacts complication, which features a contact photo — use the extra-large versions of the circular family’s layouts. The following layouts let you display full-color images, text, and gauges in a large circular region that fills most of the X-Large watch face. Some of the text fields can support multicolor text. + +![A white musical notes icon displayed within a red circle. The circle’s outline is bright red for about sixty-six percent of the circumference and dull red for about ten percent, showing current progress.](https://docs-assets.developer.apple.com/published/6e62e84e78d7206a561aaadff4f7bf9d/complication-graphic-xl-circular-closed-gauge-image%402x.png)Closed gauge image + +![The number one eighty-five in blue text displayed within a blue circle. The circle’s outline is bright blue for eighty-five percent of the circumference and dull blue for fifteen percent, showing current progress.](https://docs-assets.developer.apple.com/published/88e7205fd0f8faa2b99412ab707b02d4/complication-graphic-xl-circular-closed-gauge-text%402x.png)Closed gauge text + +![The number fifty in light-blue text, surrounded by a partial light-blue circle that includes a teardrop shape at the bottom.](https://docs-assets.developer.apple.com/published/0b73bd54f4052f97317b84828b8ff150/complication-graphic-xl-circular-open-gauge-image%402x.png)Open gauge image + +![The number twenty-nine in green text, surrounded by a partial white circle that includes the letters A, Q, I in green text at the bottom.](https://docs-assets.developer.apple.com/published/8a6e7a02ffe907d8c0dd63ffb66e199a/complication-graphic-xl-circular-open-gauge-simple-text%402x.png)Open gauge text + +![The number fifty-six in white text, surrounded by a partial circle that shades from green at the 8:00 position to red at the 4:00 position. Two numbers appear side by side at the bottom of the partial circle. Fifty-two appears in green text on the left and eighty-nine appears in red text on the right.](https://docs-assets.developer.apple.com/published/80ec1e90fe34971189a61fc5a3fe04ab/complication-graphic-xl-circular-open-gauge-range-text%402x.png)Open gauge range + +![An image of the Breathe app icon.](https://docs-assets.developer.apple.com/published/78a8e3548c6f994f9565cd2e4b4e103b/complication-graphic-xl-circular-image%402x.png)Image + +![A red sunset icon displayed above the time seven twenty-four PM, centered within a circular area.](https://docs-assets.developer.apple.com/published/77444d60c23fb81c91b3cca54fdd0bc3/complication-graphic-xl-circular-stack-image%402x.png)Stack image + +![Two lines of text centered within a circular area. The top line is the Apple stock symbol A A P L in white and the second line is the number 121.96 in green.](https://docs-assets.developer.apple.com/published/d91868e8b2928ef9ae237d15eb98fed0/complication-graphic-xl-circular-stack-text%402x.png)Stack text + +Use the following values for guidance as you create images for an extra-large circular complication. + +Image| 40mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|--- +Image| 120x120 pt (240x240 px @2x)| 127x127 pt (254x254 px @2x)| 132x132 pt (264x264 px @2x)| 143x143 pt (286x286 px @2x) +Open gauge| 31x31 pt (62x62 px @2x)| 33x33 pt (66x66 px @2x)| 33x33 pt (66x66 px @2x)| 37x37 pt (74x74 px @2x) +Closed gauge| 77x77 pt (154x154 px @2x)| 81.5x81.5 (163x163 px @2x)| 87x87 pt (174x174 px @2x)| 91.5x91.5 (183x183 px @2x) +Stack| 80x40 pt (160x80 px @2x)| 85x42 (170x84 px @2x)| 87x44 pt (174x88 px @2x)| 95x48 pt (190x96 px @2x ) + +Note + +The system applies a circular mask to the circular, open-gauge, and closed-gauge images. + +Use the following values to create no-content placeholder images for your circular-family complications. + +Layout| 38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|---|--- +Circular| –| 42x42 pt (84x84 px @2x)| 44.5x44.5 pt (89x89 px @2x)| 47x47 pt (94x94 px @2x)| 50x50 pt (100x100 px @2x) +Bezel| –| 42x42 pt (84x84 px @2x)| 44.5x44.5 pt (89x89 px @2x)| 47x47 pt (94x94 px @2x)| 50x50 pt (100x100 px @2x) +Extra Large| –| 120x120 pt (240x240 px @2x)| 127x127 pt (254x254 px @2x)| 132x132 pt (264x264 px @2x)| 143x143 pt (286x286 px @2x) + +A SwiftUI view that implements an extra-large circular layout uses the following default text values: + + * Style: Rounded + + * Weight: Medium + + * Text size: 34.5 pt (40mm), 36.5 pt (41mm), 36.5 pt (44mm), 41 pt (45mm/49mm) + + + + +## [Corner](https://developer.apple.com/design/human-interface-guidelines/complications#Corner) + +Corner layouts let you display full-color images, text, and gauges in the corners of the watch face, like Infograph. Some of the templates also support multicolor text. + +![An icon showing a yellow sun partially obscured by a white cloud within a circular area.](https://docs-assets.developer.apple.com/published/d2505fe8bcd6129c02eee89133fae163/corner-circular-image%402x.png)Circular image + +![The value fourteen minutes and fifty-nine seconds displayed next to a thin solid bar. The text and the bar appear to follow the curve of the bottom-right quadrant of a circle. The timer app icon appears below the time value.](https://docs-assets.developer.apple.com/published/a21715e44b62556c939eb1031d4d7f55/corner-gauge-image%402x.png)Gauge image + +![The weather values fifty-five, shown in green, and seventy-six, shown in orange, displayed with a shaded solid bar between them. The bar shades from green to orange to match the values. The text and the bar appear to follow the curve of the top-right quadrant of a circle. The value seventy-two degrees appears in large white text above the temperature range.](https://docs-assets.developer.apple.com/published/9820a8d14b8494f9bc3992c504baf134/corner-gauge-text%402x.png)Gauge text + +![Two lines of text, both of which appear to follow the curve of the top-left quadrant of a circle. The top line contains the word cup in large white text. The bottom line contains the time ten oh nine AM followed by a plus sign and zero hours, all in orange text.](https://docs-assets.developer.apple.com/published/6a3616ce205f69ee7c3deebb63f24c82/corner-stack-text%402x.png)Stack text + +![A line displaying zero hours, zero minutes, and zero seconds in orange text. The line appears to follow the curve of the bottom-left quadrant of a circle. The stopwatch app icon appears below the line of text.](https://docs-assets.developer.apple.com/published/c829cc0f1c923486c897b4328e11559a/corner-text-image%402x.png)Text image + +As you design images for a corner complication, use the following values for guidance. + +Image| 40mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|--- +Circular| 32x32 pt (64x64 px @2x)| 34x34 pt (68x68 px @2x)| 36x36 pt (72x72 px @2x)| 38x38 pt (76x76 px @2x ) +Gauge| 20x20 pt (40x40 px @2x)| 21x21 pt (42x42 px @2x)| 22x22 pt (44x44 px @2x)| 24x24 pt (48x48 px @2x) +Text| 20x20 pt (40x40 px @2x)| 21x21 pt (42x42 px @2x)| 22x22 pt (44x44 px @2x)| 24x24 pt (48x48 px @2x) + +Note + +The system applies a circular mask to each image. + +Use the following values to create no-content placeholder images for your corner-family complications. + +38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|--- +–| 20x20 pt (40x40 px @2x)| 21x21 pt (42x42 px @2x)| 22x22 pt (44x44 px @2x)| 24x24 pt (48x48 px @2x) + +A SwiftUI view that implements a corner layout uses the following default text values: + + * Style: Rounded + + * Weight: Semibold + + * Text size: 10 pt (40mm), 10.5 pt (41mm), 11 pt (44mm), 12 pt (45mm/49mm) + + + + +## [Inline](https://developer.apple.com/design/human-interface-guidelines/complications#Inline) + +Inline layouts include utilitarian small and large layouts. + +Utilitarian small layouts are intended to occupy a rectangular area in the corner of a watch face, such as the Chronograph and Simple watch faces. The content can include an image, interface icon, or a circular graph. + +![The letters L, O, N displayed above the time six oh nine.](https://docs-assets.developer.apple.com/published/269280772375293a9bba7c48384bbc81/complication-utility-small-flat%402x.png)Flat + +![Two tear drop icons, each centered within a partial ring.](https://docs-assets.developer.apple.com/published/3321ec0b2fcd3a1aa7d7e50b082a82e2/complication-utility-small-ring-image%402x.png)Ring image + +![Two partial rings, each displaying the number sixty-three centered within them.](https://docs-assets.developer.apple.com/published/2fc1e12d51df2d6c708385b7d33ae3ad/complication-utility-small-ring-text%402x.png)Ring text + +![An image of the moon.](https://docs-assets.developer.apple.com/published/2316eb7e29bc98cbe606a332543e41ac/complication-utility-small-square%402x.png)Square + +As you design images for a utilitarian small layout, use the following values for guidance. + +Content| 38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|---|--- +Flat| 9-21x9 pt (18-42x18 px @2x)| 10-22x10 pt (20-44x20 px @2x)| 10.5-23.5x21 pt (21-47x21 @2x)| N/A| 12-26x12 pt (24-52x24 px @2x) +Ring| 14x14 pt (28x28 px @2x)| 14x14 pt (28x28 px @2x)| 15x15 pt (30x30 px @2x)| 16x16 pt (32x32 px @2x)| 16.5x16.5 pt (33x33 px @2x) +Square| 20x20 pt (40x40 px @2x)| 22x22 pt (44x44 px @2x)| 23.5x23.5 pt (47x47 px @2x)| 25x25 pt (50x50 px @2x)| 26x26 pt (52x52 px @2x) + +The utilitarian large layout is primarily text-based, but also supports an interface icon placed on the leading side of the text. This layout spans the bottom of a watch face, like the Utility or Motion watch faces. + +![The text eleven AM photo shoot displayed on one line in a large text size.](https://docs-assets.developer.apple.com/published/71cce6286d76ea16f2821b0cfdcb453e/complication-utility-large-flat%402x.png)Large flat + +As you design images for a utilitarian large layout, use the following values for guidance. + +Content| 38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|---|--- +Flat| 9-21x9 pt (18-42x18 px @2x)| 10-22x10 pt (20-44x20 px @2x)| 10.5-23.5x10.5 pt (21-47x21 px @2x)| N/A| 12-26x12 pt (24-52x24 px @2x) + +## [Rectangular](https://developer.apple.com/design/human-interface-guidelines/complications#Rectangular) + +Rectangular layouts can display full-color images, text, a gauge, and an optional title in a large rectangular region. Some of the text fields can support multicolor text. + +The large rectangular region works well for showing details about a value or process that changes over time, because it provides room for information-rich charts, graphs, and diagrams. For example, the Heart Rate complication displays a graph of heart-rate values within a 24-hour period. The graph uses high-contrast white and red for the primary content and a lower-contrast gray for the graph lines and labels, making the data easy to understand at a glance. + +Starting with watchOS 10, if you have created a rectangular layout for your watchOS app, the system may display it in the Smart Stack. You can optimize this presentation in a few ways: + + * By supplying background color or content that communicates information or aids in recognition + + * By using [intents](https://developer.apple.com/documentation/appintents/app-intents) to specify relevancy, and help ensure that your widget is displayed in the Smart Stack at times that are most appropriate and useful to people + + * By creating a custom layout of your information that is optimized for the Smart Stack + + + + +For developer guidance, see [`WidgetFamily.accessoryRectangular`](https://developer.apple.com/documentation/WidgetKit/WidgetFamily/accessoryRectangular). See [Widgets](https://developer.apple.com/design/human-interface-guidelines/widgets) for additional guidance on designing widgets for the Smart Stack. + +![Three lines of left-aligned text. The first line uses blue text to display the words water reminders. The second line uses white text to display the words thirty-two ounces consumed. The third line uses gray text to display the words four day streak, woo hoo.](https://docs-assets.developer.apple.com/published/eacc51c96f809a72dc4e293e1ce12231/rectangular-standard-body%402x.png)Standard body + +![Two lines of text displayed above a bar that can fill with color to indicate progress. The first line uses blue text to display a tear drop icon followed by the words water reminder. The second line uses white text to display the words thirty-two ounces consumed. The bar uses the same blue color as used in the first line of text to fill the bar from the left to about seventy percent of the total length.](https://docs-assets.developer.apple.com/published/cf5c53f181d423b5e950c27b3a8056d6/rectangular-text-gauge%402x.png)Text gauge + +![A line of text displayed above a graph. The text displays in white the words sixty-eight B, P, M, followed by the words two minutes ago, in red text. The graph shows many heart rate values over time.](https://docs-assets.developer.apple.com/published/f1b05dfd5648f270edc50eae0cbc2834/rectangular-large-image%402x.png)Large image + +Use the following values for guidance as you create images for a rectangular layout. + +Content| 40mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|--- +Large image with title *| 150x47 pt (300x94 px @2x)| 159x50 pt (318x100 px @2x)| 171x54 pt (342x108 px @2x)| 178.5x56 pt (357x112 px @2x) +Large image without title *| 162x69 pt (324x138 px @2x)| 171.5x73 pt (343x146 px @2x)| 184x78 pt (368x156 px @2x)| 193x82 pt (386x164 px @2x) +Standard body| 12x12 pt (24x24 px @2x)| 12.5x12.5 pt (25x25 px @2x)| 13.5x13.5 pt (27x27 px @2x)| 14.5x14.5 pt (29x29 px @2x) +Text gauge| 12x12 pt (24x24 px @2x)| 12.5x12.5 pt (25x25 px @2x)| 13.5x13.5 pt (27x27 px @2x)| 14.5x14.5 pt (29x29 px @2x) + +Note + +Both large-image layouts automatically include a four-point corner radius. + +A SwiftUI view that implements a rectangular layout uses the following default text values: + + * Style: Rounded + + * Weight: Medium + + * Text size: 16.5 pt (40mm), 17.5 pt (41mm), 18 pt (44mm), 19.5 pt (45mm/49mm) + + + + +## [Legacy templates](https://developer.apple.com/design/human-interface-guidelines/complications#Legacy-templates) + +### [Circular small](https://developer.apple.com/design/human-interface-guidelines/complications#Circular-small) + +Circular small templates display a small image or a few characters of text. They appear in the corner of the watch face (for example, in the Color watch face). + +![A tear drop icon centered within a partial ring.](https://docs-assets.developer.apple.com/published/099b811bae2a48a89ccd01a8a526dc78/complication-circular-small-ring-image%402x.png)Ring image + +![The number sixty-three centered within a partial ring.](https://docs-assets.developer.apple.com/published/1e800aa127d18b31519bf181383bf13f/complication-circular-small-ring-text%402x.png)Ring text + +![A stopwatch icon centered within a circular area.](https://docs-assets.developer.apple.com/published/ea77fbe94ab1c99437b6f05635904912/complication-circular-small-simple-image%402x.png)Simple image + +![The number sixty-eight and the degree symbol centered within a circular area.](https://docs-assets.developer.apple.com/published/a5f5c73d96c14ed8b45d4ed14cf5d3fe/complication-circular-small-simple-text%402x.png)Simple text + +![A sunset icon displayed above the time seven twenty-four PM, centered within a circular area.](https://docs-assets.developer.apple.com/published/bdbfa5a07a29ae3c91413454c0d45f5c/complication-circular-small-stack-image%402x.png)Stack image + +![The letters L, O, N displayed above the time six oh nine.](https://docs-assets.developer.apple.com/published/0bc5cc4c6505b400a2b3ed317c47293c/complication-circular-small-stack-text%402x.png)Stack text + +As you design images for a circular small complication, use the following values for guidance. + +Image| 38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|---|--- +Ring| 20x20 pt (40x40 px @2x)| 22x22 pt (44x44 px @2x)| 23.5x23.5 pt (47x47 px @2x)| 24x24 pt (48x48 px @2x)| 26x26 pt (52x52 px @2x) +Simple| 16x16 pt (32x32 px @2x)| 18x18 pt (36x36 px @2x)| 19x19 pt (38x38 px @2x)| 20x20 pt (40x40 px @2x)| 21.5x21.5 pt (43x43 px @2x) +Stack| 16x7 pt (32x14 px @2x)| 17x8 pt (34x16 px @2x)| 18x8.5 pt (36x17 px @2x)| 19x9 pt (38x18 px @2x)| 19x9.5 pt (38x19 px @2x) +Placeholder| 16x16 pt (32x32 px @2x)| 18x18x pt (36x36 px @2x)| 19x19 pt (38x38 px @2x)| 20x20 pt (40x40 px @2x)| 21.5x21.5 pt (43x43 px @2x) + +Note + +In each stack measurement, the width value represents the maximum size. + +### [Modular small](https://developer.apple.com/design/human-interface-guidelines/complications#Modular-small) + +Modular small templates display two stacked rows consisting of an icon and content, a circular graph, or a single larger item (for example, the bottom row of complications on the Modular watch face). + +![Text and numbers arranged in a two-row column. The top row displays the letters C and P and the number fourteen. The bottom row displays the letters M and H and the number twenty-eight.](https://docs-assets.developer.apple.com/published/d4768440b750b0614aca0bab1754c1bd/complication-modular-small-columns-text%402x.png)Columns text + +![A tear drop icon centered within a partial ring.](https://docs-assets.developer.apple.com/published/f89c9c4226b921580000237320197983/complication-modular-small-ring-image%402x.png)Ring image + +![The number sixty-three centered within a partial ring.](https://docs-assets.developer.apple.com/published/e9e15b071c1e272ef99ee09a583d6214/complication-modular-small-ring-text%402x.png)Ring text + +![An image of the moon.](https://docs-assets.developer.apple.com/published/d5a7bd5314f4a682df263d9f32224665/complication-modular-small-simple-image%402x.png)Simple image + +![The number sixty-eight and the degree symbol.](https://docs-assets.developer.apple.com/published/ea5c2c9f8f7d19da47f656816d13ccc4/complication-modular-small-simple-text%402x.png)Simple text + +![A sunset icon displayed above the time seven twenty-four PM.](https://docs-assets.developer.apple.com/published/74d96206654ce136baea6153f8f5916e/complication-modular-small-stack-image%402x.png)Stack image + +![The letters L, O, N displayed above the time six oh nine.](https://docs-assets.developer.apple.com/published/82cbeeb9536e51537483b6eb9294955d/complication-modular-small-stack-text%402x.png)Stack text + +As you design icons and images for a modular small complication, use the following values for guidance. + +Image| 38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|---|--- +Ring| 18x18 pt (36x36 px @2x)| 19x19 pt (38x38 px @2x)| 20x20 pt (40x40 px @2x)| 21x21 pt (42x42 px @2x)| 22.5x22.5 pt (45x45 px @2x) +Simple| 26x26 pt (52x52 px @2x)| 29x29 pt (58x58 px @2x)| 30.5x30.5 pt (61x61 px @2x)| 32x32 pt (64x64 px @2x)| 34.5x34.5 pt (69x69 px @2x) +Stack| 26x14 pt (52x28 px @2x)| 29x15 pt (58x30 px @2x)| 30.5x16 pt (61x32 px @2x)| 32x17 pt (64x34 px @2x)| 34.5x18 pt (69x36 px @2x) +Placeholder| 26x26 pt (52x52 px @2x)| 29x29 pt (58x58 px @2x)| 30.5x30.5 pt (61x61 px @2x)| 32x32 pt (64x64 px @2x)| 34.5x34.5 pt (69x69 px @2x) + +Note + +In each stack measurement, the width value represents the maximum size. + +### [Modular large](https://developer.apple.com/design/human-interface-guidelines/complications#Modular-large) + +Modular large templates offer a large canvas for displaying up to three rows of content (for example, in the center of the Modular watch face). + +![Activity-related information displayed in a three-row column. The top row displays a calorie count of 396 out of 660. The middle row displays a minute count of 13 out of 30. The bottom row displays an hour count of 3 out of 12.](https://docs-assets.developer.apple.com/published/9e6f3cc81365a53a8509935db81ab4f0/complication-modular-large-columns%402x.png)Columns + +![Weather-related information displayed in three left-aligned lines of text. The top row displays the location Cupertino California. The middle row displays sixty-eight degrees and cloudy. The bottom row displays a forecast high of seventy-two degrees and low of sixty-two degrees.](https://docs-assets.developer.apple.com/published/97d75fa71e7d4dcac61d89286cd9e415/complication-modular-large-standard-body%402x.png)Standard body + +![Sports-related information displayed in a two-column, two-row table with a title. The table title is Final Score. The first table row contains the number 14 followed by the text Central Prep. The second table row contains the number 28 followed by the text Mission High.](https://docs-assets.developer.apple.com/published/ab811ad4c90cc2c030da750ebd0be495/complication-modular-large-table%402x.png)Table + +![Calendar-related information displayed in two lines of fully justified text. The first line displays the word wednesday. The second line displays the abbreviation mar and the number nine in text that is about twice as tall as the text in the first line.](https://docs-assets.developer.apple.com/published/877462cb5be4b9764cf101897b0acc2a/complication-modular-large-tall-body%402x.png)Tall body + +As you design icons and images for a modular large complication, use the following values for guidance. + +Content| 38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|---|--- +Columns| 11-32x11 pt (22-64x22 px @2x)| 12-37x12 pt (24-74x24 px @2x)| 12.5-39x12.5 pt (25-78x25 px @2x)| 14-42x14 pt (28-84x28 px @2x)| 14.5-44x14.5 pt (29-88x29 px @2x) +Standard body| 11-32x11 pt (22-64x22 px @2x)| 12-37x12 pt (24-74x24 px @2x)| 12.5-39x12.5 pt (25-78x25 px @2x)| 14-42x14 pt (28-84x28 px @2x)| 14.5-44x14.5 pt (29-88x29 px @2x) +Table| 11-32x11 pt (22-64x22 px @2x)| 12-37x12 pt (24-74x24 px @2x)| 12.5-39x12.5 pt (25-78x25 px @2x)| 14-42x14 pt (28-84x28 px @2x)| 14.5-44x14.5 pt (29-88x29 px @2x) + +### [Extra large](https://developer.apple.com/design/human-interface-guidelines/complications#Extra-large) + +Extra large templates display larger text and images (for example, on the X-Large watch faces). + +![A tear drop icon centered within a partial ring.](https://docs-assets.developer.apple.com/published/f89c9c4226b921580000237320197983/complication-extralarge-ring-image%402x.png)Ring image + +![The number sixty-three centered within a partial ring.](https://docs-assets.developer.apple.com/published/e9e15b071c1e272ef99ee09a583d6214/complication-extralarge-ring-text%402x.png)Ring text + +![An image of the moon.](https://docs-assets.developer.apple.com/published/d5a7bd5314f4a682df263d9f32224665/complication-extralarge-simple-image%402x.png)Simple image + +![The number sixty-eight and the degree symbol.](https://docs-assets.developer.apple.com/published/ea5c2c9f8f7d19da47f656816d13ccc4/complication-extralarge-simple-text%402x.png)Simple text + +![A sunset icon displayed above the time seven twenty-four PM.](https://docs-assets.developer.apple.com/published/74d96206654ce136baea6153f8f5916e/complication-extralarge-stack-image%402x.png)Stack image + +![The letters L, O, N displayed above the time six oh nine.](https://docs-assets.developer.apple.com/published/82cbeeb9536e51537483b6eb9294955d/complication-extralarge-stack-text%402x.png)Stack text + +As you design icons and images for an extra large complication, use the following values for guidance. + +Image| 38mm| 40mm/42mm| 41mm| 44mm| 45mm/49mm +---|---|---|---|---|--- +Ring| 63x63 pt (126x126 px @2x)| 66.5x66.5 pt (133x133 px @2x)| 70.5x70.5 pt (141x141 px @2x)| 73x73 pt (146x146 px @2x)| 79x79 pt (158x158 px @2x) +Simple| 91x91 pt (182x182 px @2x)| 101.5x101.5 pt (203x203 px @2x)| 107.5x107.5 pt (215x215 px @2x)| 112x112 pt (224x224 px @2x)| 121x121 pt (242x242 px @2x ) +Stack| 78x42 pt (156x84 px @2x)| 87x45 pt (174x90 px @2x)| 92x47.5 pt (184x95 px @2x)| 96x51 pt (192x102 px @2x)| 103.5x53.5 pt (207x107 px @2x) +Placeholder| 91x91 pt (182x182 px @2x)| 101.5x101.5 pt (203x203 px @2x)| 107.5x107.5 pt (215x215 px @2x)| 112x112 pt (224x224 px @2x)| 121x121 pt (242x242 px @2x) + +Note + +In each stack measurement, the width value represents the maximum size. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/complications#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, tvOS, or visionOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/complications#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/complications#Related) + +[Watch faces](https://developer.apple.com/design/human-interface-guidelines/watch-faces) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/complications#Developer-documentation) + +[WidgetKit](https://developer.apple.com/documentation/WidgetKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/complications#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/56D03FE8-0566-429A-81D2-2F6566031498/8390_wide_250x141_1x.jpg) Design widgets for the Smart Stack on Apple Watch ](https://developer.apple.com/videos/play/wwdc2023/10309) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/34240770-1E20-456E-907F-3D06D6C87AFE/6544_wide_250x141_1x.jpg) Go further with Complications in WidgetKit ](https://developer.apple.com/videos/play/wwdc2022/10051) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/A37E04FC-826F-44B5-A5D8-36B41E5F73E5/6543_wide_250x141_1x.jpg) Complications and widgets: Reloaded ](https://developer.apple.com/videos/play/wwdc2022/10050) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/complications#Change-log) + +Date| Changes +---|--- +October 24, 2023| Replaced links to deprecated ClockKit documentation with links to WidgetKit documentation. +June 5, 2023| Updated guidance for rectangular complications to support them as widgets in the Smart Stack. +September 14, 2022| Added specifications for Apple Watch Ultra. + diff --git a/skills/hig-components-system/references/home-screen-quick-actions.md b/skills/hig-components-system/references/home-screen-quick-actions.md new file mode 100644 index 00000000..ca4ca04d --- /dev/null +++ b/skills/hig-components-system/references/home-screen-quick-actions.md @@ -0,0 +1,42 @@ +--- +title: "Home Screen quick actions | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions + +# Home Screen quick actions + +Home Screen quick actions give people a way to perform app-specific actions from the Home Screen. + +![A stylized representation of a set of menu items extending up from an app icon. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/2dfd04b8dd39ab0d828c4ab2a8e46ef2/components-home-screen-quick-actions-intro%402x.png) + +People can get a menu of available quick actions when they touch and hold an app icon (on a 3D Touch device, people can press on the icon with increased pressure to see the menu). For example, Mail includes quick actions that open the Inbox or the VIP mailbox, initiate a search, and create a new message. In addition to app-specific actions, a Home Screen quick action menu also lists items for removing the app and editing the Home Screen. + +Each Home Screen quick action includes a title, an interface icon on the left or right (depending on your app’s position on the Home Screen), and an optional subtitle. The title and subtitle are always left-aligned in left-to-right languages. Your app can even dynamically update its quick actions when new information is available. For example, Messages provides quick actions for opening your most recent conversations. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions#Best-practices) + +**Create quick actions for compelling, high-value tasks.** For example, Maps lets people search near their current location or get directions home without first opening the Maps app. People tend to expect every app to provide at least one useful quick action; you can provide a total of four. + +**Avoid making unpredictable changes to quick actions.** Dynamic quick actions are a great way to keep actions relevant. For example, it may make sense to update quick actions based on the current location or recent activities in your app, time of day, or changes in settings. Make sure that actions change in ways that people can predict. + +**For each quick action, provide a succinct title that instantly communicates the results of the action.** For example, titles like “Directions Home,” “Create New Contact,” and “New Message” can help people understand what happens when they choose the action. If you need to give more context, provide a subtitle too. Mail uses subtitles to indicate whether there are unread messages in the Inbox and VIP folder. Don’t include your app name or any extraneous information in the title or subtitle, keep the text short to avoid truncation, and take localization into account as you write the text. + +**Provide a familiar interface icon for each quick action.** Prefer using [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) to represent actions. For a list of icons that represent common actions, see [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons); for additional guidance, see [Menus](https://developer.apple.com/design/human-interface-guidelines/menus). + +If you design your own interface icon, use the Quick Action Icon Template that’s included with [Apple Design Resources for iOS and iPadOS](https://developer.apple.com/design/resources/#ios-apps). + +**Don’t use an emoji in place of a symbol or interface icon.** Emojis are full color, whereas quick action symbols are monochromatic and change appearance in Dark Mode to maintain contrast. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions#Related) + +[Menus](https://developer.apple.com/design/human-interface-guidelines/menus) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions#Developer-documentation) + +[Add Home Screen quick actions](https://developer.apple.com/documentation/UIKit/add-home-screen-quick-actions) — UIKit + diff --git a/skills/hig-components-system/references/live-activities.md b/skills/hig-components-system/references/live-activities.md new file mode 100644 index 00000000..4efc4239 --- /dev/null +++ b/skills/hig-components-system/references/live-activities.md @@ -0,0 +1,442 @@ +--- +title: "Live Activities | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/live-activities + +# Live Activities + +A Live Activity lets people track the progress of an activity, event, or task at a glance. + +![A stylized representation of the Dynamic Island, in collapsed and expanded form, displaying the score of a live sporting event. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/05e81f3cb457f179fa1343f0753499c7/components-live-activities-intro%402x.png) + +Live Activities let people keep track of tasks and events in glanceable locations across devices. They go beyond push notifications, delivering frequent content and status updates over a few hours and letting people interact with the displayed information. + +For example, a Live Activity might show the remaining time until a food delivery order arrives, live in-game information for a soccer match, or real-time fitness metrics and interactive controls to pause or cancel a workout. + +Live Activities start on iPhone or iPad and automatically appear in system locations across a person’s devices: + +Platform or system experience| Location +---|--- +iPhone and iPad| Lock Screen, Home Screen, in the Dynamic Island and StandBy on iPhone +Mac| The menu bar +Apple Watch| Smart Stack +CarPlay| CarPlay Dashboard + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/live-activities#Anatomy) + +Live Activities appear across the system in various locations like the _Dynamic Island_ and the Lock Screen. It serves as a unified home for alerts and indicators of ongoing activity. Depending on the device and system location where a Live Activity appears, the system chooses a _presentation_ style or a combination of styles to compose the appearance of your Live Activity. As a result, your Live Activity must support: + + * [Compact](https://developer.apple.com/design/human-interface-guidelines/live-activities#Compact) + + * [Minimal](https://developer.apple.com/design/human-interface-guidelines/live-activities#Minimal) + + * [Expanded](https://developer.apple.com/design/human-interface-guidelines/live-activities#Expanded) + + * [Lock Screen](https://developer.apple.com/design/human-interface-guidelines/live-activities#Lock-Screen) + + + + +In iOS and iPadOS, your Live Activity appears throughout the system using these presentations. Additionally, the system uses them to create default appearances for other contexts. For example, the compact presentation appears in the Dynamic Island on iPhone and consists of two elements that the system combines into a single view for Apple Watch and in CarPlay. + +### [Compact](https://developer.apple.com/design/human-interface-guidelines/live-activities#Compact) + +In the Dynamic Island, the system uses the compact presentation when only one Live Activity is active. The presentation consists of two separate elements: one on the leading side of the TrueDepth camera and one on the trailing side. Despite its limited space, the compact presentation displays up-to-date information about your app’s Live Activity. + +![An illustration that shows the compact leading and compact trailing views in the Dynamic Island.](https://docs-assets.developer.apple.com/published/4992561b879b5788db4f1f0360f88c38/type-compact%402x.png) + +For design guidance, see [Compact presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Compact-presentation). + +### [Minimal](https://developer.apple.com/design/human-interface-guidelines/live-activities#Minimal) + +When multiple Live Activities are active, the system uses the minimal presentation to display two of them in the Dynamic Island. One appears attached to the Dynamic Island while the other appears detached. Depending on its content size, the detached minimal presentation appears circular or oval. As with the compact presentation, people tap the minimal presentation to open its app or touch and hold it to see the expanded presentation. + +![An illustration that shows the minimal presentation in the Dynamic Island.](https://docs-assets.developer.apple.com/published/f90f614f67e66940fa8a3e8ca861b4d9/type-minimal%402x.png) + +For design guidance, see [Minimal presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Minimal-presentation). + +### [Expanded](https://developer.apple.com/design/human-interface-guidelines/live-activities#Expanded) + +When people touch and hold a Live Activity in compact or minimal presentation, the system displays the expanded presentation. + +![An illustration that shows the expanded view in the Dynamic Island.](https://docs-assets.developer.apple.com/published/4e5af6b7073ffa8245e0efd5e6815f0d/type-expanded%402x.png) + +For design guidance, see [Expanded presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Expanded-presentation). + +### [Lock Screen](https://developer.apple.com/design/human-interface-guidelines/live-activities#Lock-Screen) + +The system uses the Lock Screen presentation to display a banner at the bottom of the Lock Screen. In this presentation, use a layout similar to the expanded presentation. + +![A screenshot of a Live Activity on the Lock Screen of iPhone that supports the Dynamic Island.](https://docs-assets.developer.apple.com/published/fe50abc1d4dff465883107ba9448a19a/live-activity-lock-screen%402x.png) + +When you alert people about Live Activity updates on devices that don’t support the Dynamic Island, the Lock Screen presentation briefly appears as a banner that overlays the Home Screen or other apps. + +![A screenshot of a Live Activity that appears as a banner on the Home Screen of iPhone without Dynamic Island support.](https://docs-assets.developer.apple.com/published/2b1fef03830a1927b085c2efb8ddcaf9/live-activity-notch%402x.png) + +For design guidance, see [Lock Screen presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Lock-Screen-presentation). + +### [StandBy](https://developer.apple.com/design/human-interface-guidelines/live-activities#StandBy) + +On iPhone in StandBy, your Live Activity appears in the minimal presentation. When someone taps it, it transitions to the Lock Screen presentation, scaled up by 2x to fill the screen. If your Lock Screen presentation uses a custom background color, the system automatically extends it to the whole screen to create a seamless, full-screen design. + +![An image that shows the Lock Screen presentation of a Live Activity in StandBy, scaled up by 2x, with a dotted border to indicate the 2x scaling of the Live Activity.](https://docs-assets.developer.apple.com/published/fbbd5973af16593f3fd5ee7a2ddbebf8/live-activity-standby-default-outline%402x.png) + +For design guidance, see [StandBy presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#StandBy-presentation). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/live-activities#Best-practices) + +**Offer Live Activities for tasks and events that have a defined beginning and end.** Live Activities work best for tracking short to medium duration activities that don’t exceed eight hours. + +**Focus on important information that people need to see at a glance.** Your Live Activity doesn’t need to display everything. Think about what information people find most useful and prioritize sharing it in a concise way. When a person wants to learn more, they can tap your Live Activity to open your app where you can provide additional detail. + +**Don’t use a Live Activity to display ads or promotions**. Live Activities help people stay informed about ongoing events and tasks, so it’s important to display only information that’s related to those events and tasks. + +**Avoid displaying sensitive information.** Live Activities are prominently visible and could be viewed by casual observers; for example, on the Lock Screen or in the Always-On display. For content people might consider sensitive or private, display an innocuous summary and let people tap the Live Activity to view the sensitive information in your app. Alternatively, redact views that may contain sensitive information and let people configure whether to show sensitive data. For developer guidance, see [Creating a widget extension](https://developer.apple.com/documentation/WidgetKit/Creating-a-Widget-Extension#Hide-sensitive-content). + +**Create a Live Activity that matches your app’s visual aesthetic and personality in both dark and light appearances.** This makes it easier for people to recognize your Live Activity and creates a visual connection to your app. + +**If you include a logo mark, display it without a container.** This better integrates the logo mark with your Live Activity layout. Don’t use the entire app icon. + +**Don’t add elements to your app that draw attention to the Dynamic Island.** Your Live Activity appears in the Dynamic Island while your app isn’t in use, and other items can appear in the Dynamic Island when your app is open. + +**Ensure text is easy to read.** Use large, heavier-weight text — a medium weight or higher. Use small text sparingly and make sure key information is legible at a glance. + +![An illustration that shows text in the Dynamic Island that's small and difficult to read.](https://docs-assets.developer.apple.com/published/6305527c5b59013de149075e4a20a138/live-activities-text-incorrect-size%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration that shows text in the Dynamic Island with heavier weights and legible size.](https://docs-assets.developer.apple.com/published/1cdb8d4deff3d5465cf4c71642bc94de/live-activities-text-correct-size%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +### [Creating Live Activity layouts](https://developer.apple.com/design/human-interface-guidelines/live-activities#Creating-Live-Activity-layouts) + +**Adapt to different screen sizes and presentations.** Live Activities scale to fit various device screens. Create layouts and assets for various devices and scale factors, recognizing that the actual size on screen may vary or change. Ensure they look great everywhere by using the values in [Specifications](https://developer.apple.com/design/human-interface-guidelines/live-activities#Specifications) as guidance and providing appropriately sized content. + +**Adjust element size and placement for efficient use of space.** Create a layout that only uses the space you need to clearly display its content. Adapt the size and placement of elements in your Live Activity so they fit well together. + +**Use familiar layouts for custom views and layouts.** Templates with default system margins and recommended text sizes are available in [Apple Design Resources](https://developer.apple.com/design/resources/). Using them helps your Live Activity remain legible at a glance and fit in with the visual language of its surroundings; for example, the Smart Stack on Apple Watch. + +![An illustration that shows content in the Dynamic Island with even margins.](https://docs-assets.developer.apple.com/published/08f636dea59d0355bbc0c42d67026509/live-activities-margins%402x.png) + +**Use consistent margins and concentric placement.** Use even, matching margins between rounded shapes and the edges of the Live Activity, including corners, to ensure a harmonious fit. This prevents elements from poking into the rounded shape of the Live Activity and creating visual tension. For example, when placing a rounded rectangle near a corner of your Live Activity, match its corner radius to the outer corner radius of the Live Activity by subtracting the margin and using a SwiftUI container to apply the correct corner radius. For developer guidance, see [`ContainerRelativeShape`](https://developer.apple.com/documentation/SwiftUI/ContainerRelativeShape). + +![An illustration a Live Activity that draws content to the edge of the Dynamic Island.](https://docs-assets.developer.apple.com/published/881638db784a565ec2af57941e8dec5d/live-activities-rounded-shapes%402x.png) + +Keep content compact and snug within a margin that’s concentric to the outer edge of the Live Activity. + +![An illustration that shows how a Live Activity places an icon too far from the edge of the Dynamic Island.](https://docs-assets.developer.apple.com/published/f6ab85a99b55f39774f71e5f03d22455/live-activities-content-incorrect-position%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration that shows how a Live Activity places an icon close to the edge of the Dynamic Island without poking into the rounded shape of the Dynamic Island.](https://docs-assets.developer.apple.com/published/c533297be7133d3ebeb70eaa6445b7c4/live-activities-content-correct-position%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**When separating a block of content, place it in an inset container shape or use a thick line.** Don’t draw content all the way to the edge of the Dynamic Island. + +![An illustration that shows how a Live Activity draws content all the way to the edge of the Dynamic Island to separate content.](https://docs-assets.developer.apple.com/published/555c74e1fb1cdbb7a7f26c4da9a86cc8/live-activities-separating-content-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a Live Activity with content in an inset, rounded shape to group it together.](https://docs-assets.developer.apple.com/published/2efb360240b1bfe7f7eac8e7a5a72748/live-activities-separating-content-pill%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a Live Activity that uses a line to separate a block of content.](https://docs-assets.developer.apple.com/published/2494f07e0a4653b67e75bd967c32fb93/live-activities-separating-content-separator%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +Tip + +To align nonrounded content in the rounded corners of the Live Activity view, it may be helpful to blur the nonrounded content in your drawing tool. When the content is blurred, it may be easier to find the positioning that best aligns with the outer perimeter of the view. + +![An illustration that shows a Live Activity with blurred text that's too far from the edge of the Dynamic Island.](https://docs-assets.developer.apple.com/published/803af1a5bf16d67d55e8f71b7e45bf1e/live-activities-blur-content-incorrect-position%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration that shows a Live Activity with blurred text that's close to the edge of the Dynamic Island without poking into the rounded shape of the Dynamic Island.](https://docs-assets.developer.apple.com/published/f616e49dc9d2ab9564930596bd59be97/live-activities-blur-content-correct-position%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Dynamically change the height of your Live Activity on the Lock Screen or in the expanded presentation.** When there’s less information to show, reduce the height of the Live Activity to only use the space needed for the content. When more information becomes available, increase the height to display additional content. For example, a rideshare app might display a more compact Live Activity without additional details while it locates a driver. The app’s height extends as more information is available to display the estimated pickup time, driver details, and so on. + +### [Choosing colors](https://developer.apple.com/design/human-interface-guidelines/live-activities#Choosing-colors) + +**Carefully consider using a custom background color and opacity.** You can’t customize background colors for compact, minimal, and expanded presentations. However, you can use a custom background color for the Lock Screen presentation. If you set a custom background color or image for the Lock Screen presentation, ensure sufficient contrast — especially for tint colors on devices that feature an Always-On display with reduced luminance. + +**Use color to express the character and identity of your app.** Live Activities in the Dynamic Island use a black opaque background. Consider using bold colors for text and objects to convey the personality and brand of your app. Bold colors make your Live Activity recognizable at a glance, stand out from other Live Activities, and feel like a small, glanceable part of your app. Additionally, bold colors can help reinforce the relationship between elements in the Live Activity itself. + +**Tint your Live Activity’s key line color so that it matches your content.** When the background is dark — for example, in Dark Mode — a key line appears around the Dynamic Island to distinguish it from other content. Choose a key line color that’s consistent with the color of other elements in your Live Activity. For developer guidance, see [Creating custom views for Live Activities](https://developer.apple.com/documentation/ActivityKit/creating-custom-views-for-live-activities#Use-custom-colors). + +### [Adding transitions and animating content updates](https://developer.apple.com/design/human-interface-guidelines/live-activities#Adding-transitions-and-animating-content-updates) + +In addition to extending and contracting transitions, Live Activities use system and custom animations with a maximum duration of two seconds. Note that the system doesn’t perform animations on Always-On displays with reduced luminance. + +**Use animations to reinforce the information you’re communicating and to bring attention to updates.** In addition to moving the position of elements, you can animate elements in and out with the default content-replace transition, or create custom transitions using scale, opacity, and movement. For example, a sports app might use numeric content transitions for score changes or fade a timer in and out when it reaches zero. + +**Animate layout changes.** Content updates can require a change to your Live Activity layout — for example, when it expands to fill the screen in StandBy or when more information becomes available. During the transition to a new layout, preserve as much of the existing layout as possible by animating existing elements to their new positions rather than removing and animating them back in. + +**Try to avoid overlapping elements.** Sometimes, it’s best to animate out certain elements and then re-animate them in at a new position to avoid colliding with other parts of your transition. For example, when animating items in lists, only animate the element that moves to a new position and use fade-in-and-out transitions for the other list items. + +For developer guidance, see [Animating data updates in widgets and Live Activities](https://developer.apple.com/documentation/WidgetKit/Animating-data-updates-in-widgets-and-live-activities). + +### [Offering interactivity](https://developer.apple.com/design/human-interface-guidelines/live-activities#Offering-interactivity) + +**Make sure tapping the Live Activity opens your app at the right location.** Take people directly to related details and actions — don’t make them navigate to find relevant information. For developer guidance on SwiftUI views that support deep linking to specific screens, see [Linking to specific app scenes from your widget or Live Activity](https://developer.apple.com/documentation/WidgetKit/Linking-to-specific-app-scenes-from-your-widget-or-Live-Activity). + +**Focus on simple, direct actions.** Buttons or toggles take up space that might otherwise display useful information. Only include interactive elements for essential functionality that’s directly related to your Live Activity and that people activate once or temporarily pause and resume, like music playback, workouts, or apps that access the microphone to record live audio. If you offer interactivity, prefer limiting it to a single element to help people avoid accidentally tapping the wrong control. + +**Consider letting people respond to event or progress updates.** If an update to your Live Activity is something that a person could respond to, consider offering a button or toggle to let people take action. For example, the Live Activity of a rideshare app could include a button to contact the driver while waiting for a ride to arrive. + +### [Starting, updating, and ending a Live Activity](https://developer.apple.com/design/human-interface-guidelines/live-activities#Starting-updating-and-ending-a-Live-Activity) + +**Start Live Activities at appropriate times, and make it easy for people to turn them off in your app.** People expect Live Activities to start and provide important updates for a task at hand or at specific times, even automatically. For example, they might expect a Live Activity to start after a food order, making a rideshare request, or when their favorite sports team’s match begins. However, Live Activities that appear unexpectedly can be surprising or even unwanted. Consider offering controls that allow people to turn off a Live Activity in the app view that corresponds to the activity. For example, a sports app may offer a button that lets people unfollow a game or team. When people can’t easily control the appearance of Live Activities from your app, they may choose to turn off Live Activities in Settings altogether. + +**Offer an App Shortcut that starts your Live Activity.** App Shortcuts expose functionality to the system, allowing access in various contexts. For example, create an App Shortcut that allows people to start your Live Activity using the Action button on iPhone. For more information, see [App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts). + +**Update a Live Activity only when new content is available.** If the underlying content or status remains the same, maintain the same display until the underlying content or status changes. + +**Alert people only for essential updates that require their attention.** Live Activity alerts light up the screen and by default play the notification sound to alert people about updates they shouldn’t miss. Alerts also show the expanded presentation in the Dynamic Island or a banner on devices that don’t support the Dynamic Island. To ensure your Live Activities provide the most value, avoid alerting people too often or with updates that aren’t crucial, and don’t use push notifications alongside Live Activities for the same updates. + +**Let people track multiple events efficiently with a single Live Activity.** Instead of creating separate Live Activities people need to jump between to track different events, prefer a single Live Activity that uses a dynamic layout and rotates through events. For example, a sports app could offer a single Live Activity that cycles through scored points, substitutions, and fouls across multiple matches. + +**Always end a Live Activity immediately when the task or event ends, and consider setting a custom dismissal time.** When a Live Activity ends, the system immediately removes it from the Dynamic Island and in CarPlay. On the Lock Screen, in the Mac menu bar, and the watchOS Smart Stack, it remains for up to four hours. Depending on the Live Activity, showing a summary may only be relevant for a brief time after it ends. Consider choosing a custom dismissal time that’s proportional to the duration of your Live Activity. In most cases, 15 to 30 minutes is adequate. For example, a rideshare app could end its Live Activity when a ride completes and remain visible for 30 minutes to allow people to view the ride summary and leave a tip. For developer guidance, refer to [Displaying live data with Live Activities](https://developer.apple.com/documentation/ActivityKit/displaying-live-data-with-live-activities#End-the-Live-Activity). + +## [Presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Presentation) + +Your Live Activity needs to support all locations, devices, and their corresponding appearances. Because it appears across systems at different dimensions, create Live Activity layouts that best support each place they appear. + +**Start with the iPhone design, then refine it for other contexts.** Create standard designs for each presentation first. Then, depending on the functionality that your Live Activity provides, design additional custom layouts for specific contexts like iPhone in StandBy, CarPlay, or Apple Watch. For more information about custom layouts, refer to [StandBy](https://developer.apple.com/design/human-interface-guidelines/live-activities#StandBy), [CarPlay](https://developer.apple.com/design/human-interface-guidelines/live-activities#CarPlay), and [watchOS](https://developer.apple.com/design/human-interface-guidelines/live-activities#watchOS). + +### [Compact presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Compact-presentation) + +**Focus on the most important information.** Use the compact presentation to show dynamic, up-to-date information that’s essential to the Live Activity and easy to understand. For example, a sports app could display two team logos and the score. + +**Ensure unified information and design of the compact presentations in the Dynamic Island.** Though the TrueDepth camera separates the leading and trailing elements, design them to read as a single piece of information, and use consistent color and typography to help create a connection between both elements. + +**Keep content as narrow as possible and ensure it’s snug against the TrueDepth camera.** Try not to obscure key information in the status bar, and don’t add padding between content and the TrueDepth camera. Maintain a balanced layout with similarly sized views for both leading and trailing elements; for example, use shortened units or less precise data to maintain appropriate width and balance. + +![An illustration that shows a compact presentation that appears unbalanced and too wide because it uses padding around the TrueDepth camera.](https://docs-assets.developer.apple.com/published/51a8d7f39e6868d94bdc97170aaa48d2/live-activities-unbalanced-content%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration that shows a compact presentation that’s snug around the TrueDepth camera.](https://docs-assets.developer.apple.com/published/b8e383ef2dd391dab4fee6383311d9a5/live-activities-balanced-content%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Link to relevant app content.** When people tap a compact Live Activity, open your app directly to the related details. Ensure both leading and trailing elements link to the same screen. + +### [Minimal presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Minimal-presentation) + +**Ensure that your Live Activity is recognizable in the minimal presentation.** If possible, display updated information rather than just a logo, while ensuring people can quickly recognize your app. For example, the Timer app’s minimal Live Activity presentation displays the remaining time instead of a static icon. + +### [Expanded presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Expanded-presentation) + +**Maintain the relative placement of elements to create a coherent layout between presentations.** The expanded presentation is an enlarged version of the compact or minimal presentation. Ensure information and layouts expand predictably when the Live Activity expands. + +**Wrap content tightly around the TrueDepth camera.** Arrange content close to the TrueDepth camera, and try to avoid leaving too much room around it to use space more efficiently and to help diminish the camera’s presence. + +![An illustration that shows an expanded presentation of a Live Activity that leaves empty space next to the TrueDepth camera.](https://docs-assets.developer.apple.com/published/5e156a4d49df18dd990d45ba5f6e7f22/live-activities-layout-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration that shows an expanded presentation of a Live Activity that uses the space next to the TrueDepth camera.](https://docs-assets.developer.apple.com/published/9bbe31974cd97e499ef7e6606e195bca/live-activities-layout-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +### [Lock Screen presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Lock-Screen-presentation) + +**Don’t replicate notification layouts.** Create a unique layout that’s specific to the information that appears in the Live Activity. + +**Choose colors that work well on a personalized Lock Screen.** People customize their Lock Screen with wallpapers, custom tint colors, and widgets. To make a Live Activity fit a custom Lock Screen aesthetic while remaining legible, use custom background or tint colors and opacity sparingly. + +**Make sure your design, assets, and colors look great and offer enough contrast in Dark Mode and on an Always-On display.** By default, a Live Activity on the Lock Screen uses a light background color in the light appearance and a dark background color in the dark appearance. If you use a custom background color, choose a color that works well in both modes or a different color for each appearance. Verify your choices on a device with an Always-On display with reduced luminance because the system adapts colors as needed in this appearance. For guidance, see [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode) and [Always On](https://developer.apple.com/design/human-interface-guidelines/always-on); for developer guidance, see [About asset catalogs](https://help.apple.com/xcode/mac/current/#/dev10510b1f7). + +**Verify the generated color of the dismiss button.** The system automatically generates a matching dismiss button based on the background and foreground colors of your Live Activity. Verify that the generated color matches your design and adjust it if needed using [`activitySystemActionForegroundColor(_:)`](https://developer.apple.com/documentation/SwiftUI/View/activitySystemActionForegroundColor\(_:\)). + +**Use standard margins to align your design with notifications.** The standard layout margin for Live Activities on the Lock Screen is 14 points. While tighter margins may be appropriate for elements like graphics or buttons, avoid crowding the edges and creating a cluttered appearance. For developer guidance, see [`padding(_:_:)`](https://developer.apple.com/documentation/SwiftUI/View/padding\(_:_:\)). + +### [StandBy presentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#StandBy-presentation) + +**Update your layout for StandBy.** Make sure assets look great at the larger scale, and consider creating a custom layout that makes use of the extra space. For developer guidance, see [Creating custom views for Live Activities](https://developer.apple.com/documentation/ActivityKit/creating-custom-views-for-live-activities). + +**Consider using the default background color in StandBy.** The default background color seamlessly blends your Live Activity with the device bezel, achieves a softer look that integrates with a person’s surroundings, and allows the system to scale the Live Activity slightly larger because it doesn’t need to account for the margins around the TrueDepth camera. + +**Use standard margins and avoid extending graphic elements to the edge of the screen.** Without standard margins, content gets cut off as the Live Activity extends, making it feel broken. + +**Verify your design in Night Mode.** In Night Mode, the system applies a red tint to your Live Activity. Check that your Live Activity design uses colors that provide enough contrast in Night Mode. + +![A Live Activity, scaled to fill the screen on iPhone in StandBy.](https://docs-assets.developer.apple.com/published/c7f65b20bec28281075a61264019fe50/live-activity-standby-night-mode%402x.png) + +## [CarPlay](https://developer.apple.com/design/human-interface-guidelines/live-activities#CarPlay) + +In CarPlay, the system automatically combines the leading and trailing elements of the compact presentation into a single layout that appears on CarPlay Dashboard. + +Your Live Activity design applies to both CarPlay and Apple Watch, so design for both contexts. While Live Activities on Apple Watch can be interactive, the system deactivates interactive elements in CarPlay. For more information, refer to [watchOS](https://developer.apple.com/design/human-interface-guidelines/live-activities#watchOS) below. For developer guidance, refer to [Creating custom views for Live Activities](https://developer.apple.com/documentation/ActivityKit/creating-custom-views-for-live-activities). + +**Consider creating a custom layout if your Live Activity would benefit from larger text or additional information.** Instead of using the default appearance in CarPlay, declare support for a [`ActivityFamily.small`](https://developer.apple.com/documentation/WidgetKit/ActivityFamily/small) supplemental activity family. + +**Carefully consider including buttons or toggles in your custom layout.** In CarPlay, the system deactivates interactive elements in your Live Activity. If people are likely to start or observe your Live Activity while driving, prefer displaying timely content rather than buttons and toggles. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/live-activities#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in tvOS or visionOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/live-activities#macOS) + +Active Live Activities automatically appear in the Menu bar of a paired Mac using the compact, minimal, and expanded presentations. Clicking the Live Activity launches iPhone Mirroring to display your app. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/live-activities#watchOS) + +When a Live Activity begins on iPhone, it appears on a paired Apple Watch at the top of the Smart Stack. By default, the view displayed in the Smart Stack combines the leading and trailing elements from the Live Activity’s compact presentation on iPhone. + +If you offer a watchOS app and someone taps the Live Activity in the Smart Stack, it opens your watchOS app. Without a watchOS app, tapping opens a full-screen view with a button to open your app on the paired iPhone. + +**Consider creating a custom watchOS layout.** While the system provides a default view automatically, a custom layout designed for Apple Watch can show more information and add interactive functionality like a button or toggle. + +**Carefully consider including buttons or toggles in your custom layout.** The custom watchOS layout also applies to your Live Activity in CarPlay where the system deactivates interactive elements. If people are likely to start or observe your Live Activity while driving, don’t include buttons or toggles in your custom watchOS layout. For developer guidance, see [Creating custom views for Live Activities](https://developer.apple.com/documentation/ActivityKit/creating-custom-views-for-live-activities). + +![An illustration that shows the compact presentation of a Live Activity in the Dynamic Island on iPhone.](https://docs-assets.developer.apple.com/published/3f81a5e4da2d3e59a8018a9e1d45f52e/live-activities-ios-dynamic-island-default%402x.png)iPhone compact view + +![An illustration that shows the automatically generated default presentation of a Live Activity in a Smart Stack view, with the leading and trailing elements from the iPhone compact view spaced apart in the lower corners.](https://docs-assets.developer.apple.com/published/1441a47a3ba447c6ccbfbd8ba8565bd5/live-activity-watch-default-implementation%402x.png)Default Smart Stack view + +![An illustration that shows a custom presentation of a Live Activity in a Smart Stack view, with a balanced design that shows a graphical countdown timer balanced with explanatory text.](https://docs-assets.developer.apple.com/published/cd8ec7a71aab86b947906afbdd802f6b/live-activity-watch-custom-implementation%402x.png)Custom Smart Stack view + +**Focus on essential information and significant updates.** Use space in the Smart Stack as efficiently as possible and think of the most useful information that a Live Activity can convey: + + * Progress, like the estimated arrival time of a delivery + + * Interactive elements, like stopwatch or timer controls + + * Significant updates, like sports score changes + + + + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/live-activities#Specifications) + +When you design your Live Activities, use the following values for guidance. + +### [CarPlay dimensions](https://developer.apple.com/design/human-interface-guidelines/live-activities#CarPlay-dimensions) + +The system may scale your Live Activity to best fit a vehicle’s screen size and resolution. Use the listed values to verify your design: + +Live Activity size (pt) +--- +240x78 +240x100 +170x78 + +Test your designs with the CarPlay Simulator and the following configurations for Smart Display Zoom — available in in Settings > Display in CarPlay: + +Configuration| Resolution (pt) +---|--- +Widescreen| 1920x720 +Portrait| 900x1200 +Standard| 800x480 + +### [iOS dimensions](https://developer.apple.com/design/human-interface-guidelines/live-activities#iOS-dimensions) + +All values listed in the tables below are in points. + +Screen dimensions (portrait)| Compact leading| Compact trailing| Minimal (width given as a range)| Expanded (height given as a range)| Lock Screen (height given as a range) +---|---|---|---|---|--- +430x932| 62.33x36.67| 62.33x36.67| 36.67–45x36.67| 408x84–160| 408x84–160 +393x852| 52.33x36.67| 52.33x36.67| 36.67–45x36.67| 371x84–160| 371x84–160 + +The Dynamic Island uses a corner radius of 44 points, and its rounded corner shape matches the TrueDepth camera. + +Presentation type| Device| Dynamic Island width (pt) +---|---|--- +Compact or minimal| iPhone 17 Pro Max| 250 +| iPhone 17 Pro| 230 +| iPhone Air| 250 +| iPhone 17| 230 +| iPhone 16 Pro Max| 250 +| iPhone 16 Pro| 230 +| iPhone 16 Plus| 250 +| iPhone 16| 230 +| iPhone 15 Pro Max| 250 +| iPhone 15 Pro| 230 +| iPhone 15 Plus| 250 +| iPhone 15| 230 +| iPhone 14 Pro Max| 250 +| iPhone 14 Pro| 230 +Expanded| iPhone 17 Pro Max| 408 +| iPhone 17 Pro| 371 +| iPhone Air| 408 +| iPhone 17| 371 +| iPhone 16 Pro Max| 408 +| iPhone 16 Pro| 371 +| iPhone 16 Plus| 408 +| iPhone 16| 371 +| iPhone 15 Pro Max| 408 +| iPhone 15 Pro| 371 +| iPhone 15 Plus| 408 +| iPhone 15| 371 +| iPhone 14 Pro Max| 408 +| iPhone 14 Pro| 371 + +### [iPadOS dimensions](https://developer.apple.com/design/human-interface-guidelines/live-activities#iPadOS-dimensions) + +All values listed in the table below are in points. + +Screen dimensions (portrait)| Lock Screen (height given as a range) +---|--- +1366x1024| 500x84–160 +1194x834| 425x84–160 +1012x834| 425x84–160 +1080x810| 425x84–160 +1024x768| 425x84–160 + +### [macOS dimensions](https://developer.apple.com/design/human-interface-guidelines/live-activities#macOS-dimensions) + +Use the provided iOS dimensions. + +### [watchOS dimensions](https://developer.apple.com/design/human-interface-guidelines/live-activities#watchOS-dimensions) + +Live Activities in the Smart Stack use the same dimensions as watchOS widgets. + +Apple Watch size| Size of a Live Activity in the Smart Stack (pt) +---|--- +40mm| 152x69.5 +41mm| 165x72.5 +44mm| 173x76.5 +45mm| 184x80.5 +49mm| 191x81.5 + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/live-activities#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/live-activities#Developer-documentation) + +[ActivityKit](https://developer.apple.com/documentation/ActivityKit) + +[SwiftUI](https://developer.apple.com/documentation/SwiftUI) + +[WidgetKit](https://developer.apple.com/documentation/WidgetKit) + +[Developing a WidgetKit strategy](https://developer.apple.com/documentation/WidgetKit/Developing-a-WidgetKit-strategy) — WidgetKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/live-activities#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/3AE21C44-8831-4C0A-BCBE-68C437FB8FC8/9903_wide_250x141_1x.jpg) Turbocharge your app for CarPlay ](https://developer.apple.com/videos/play/wwdc2025/216) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/126547AE-9E47-4E15-AC05-5C50AB08CBEE/9952_wide_250x141_1x.jpg) What’s new in widgets ](https://developer.apple.com/videos/play/wwdc2025/278) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/F5E64E98-8296-44DA-89AE-814BAEA0A713/9220_wide_250x141_1x.jpg) Design Live Activities for Apple Watch ](https://developer.apple.com/videos/play/wwdc2024/10098) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/73CFB4C1-8568-43E9-AECF-D679A7355B99/8255_wide_250x141_1x.jpg) Design dynamic Live Activities ](https://developer.apple.com/videos/play/wwdc2023/10194) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/B13DB71E-9E8F-4A86-88B3-306C4E772627/8244_wide_250x141_1x.jpg) Meet ActivityKit ](https://developer.apple.com/videos/play/wwdc2023/10184) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/live-activities#Change-log) + +Date| Changes +---|--- +December 16, 2025| Updated guidance for all platforms, and added guidance for macOS and CarPlay. +June 10, 2024| Added guidance for Live Activities in watchOS. +October 24, 2023| Expanded and updated guidance and added new artwork. +June 5, 2023| Updated guidance to include features of iOS 17 and iPadOS 17. +November 3, 2022| Updated artwork and specifications. +September 23, 2022| New page. + diff --git a/skills/hig-components-system/references/notifications.md b/skills/hig-components-system/references/notifications.md new file mode 100644 index 00000000..0db65b19 --- /dev/null +++ b/skills/hig-components-system/references/notifications.md @@ -0,0 +1,153 @@ +--- +title: "Notifications | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/notifications + +# Notifications + +A notification gives people timely, high-value information they can understand at a glance. + +![A stylized representation of a notification mockup. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/49d8e391f869407a8b755b57ee180c83/components-notification-intro%402x.png) + +Before you can send any notifications to people, you have to get their consent (for developer guidance, see [Asking permission to use notifications](https://developer.apple.com/documentation/UserNotifications/asking-permission-to-use-notifications)). After agreeing, people generally use settings to specify the styles of notification they want to receive, and to specify delivery times for notifications that have different levels of urgency. To learn more about the ways people can customize the notification experience, see [Managing notifications](https://developer.apple.com/design/human-interface-guidelines/managing-notifications). + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/notifications#Anatomy) + +Depending on the platform, a notification can use various styles, such as: + + * A banner or view on a Lock Screen, Home Screen, Home View, or desktop + + * A badge on an app icon + + * An item in Notification Center + + + + +In addition, a notification related to direct communication — like a phone call or message — can provide an interface that’s distinct from noncommunication notifications, featuring prominent contact images (or _avatars_) and group names instead of the app icon. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/notifications#Best-practices) + +**Provide concise, informative notifications.** People turn on notifications to get quick updates, so you want to provide valuable information succinctly. + +**Avoid sending multiple notifications for the same thing, even if someone hasn’t responded.** People attend to notifications at their convenience. If you send multiple notifications for the same thing, you fill up Notification Center, and people may turn off all notifications from your app. + +**Avoid sending a notification that tells people to perform specific tasks within your app.** If it makes sense to offer simple tasks that people can perform without opening your app, you can provide [notification actions](https://developer.apple.com/design/human-interface-guidelines/notifications#Notification-actions). Otherwise, avoid telling people what to do because it’s hard for people to remember such instructions after they dismiss the notification. + +**Use an alert — not a notification — to display an error message.** People are familiar with both alerts and notifications, so you don’t want to cause confusion by using the wrong component. For guidance, see [Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts). + +**Handle notifications gracefully when your app is in the foreground.** Your app’s notifications don’t appear when your app is in the front, but your app still receives the information. In this scenario, present the information in a way that’s discoverable but not distracting or invasive, such as incrementing a badge or subtly inserting new data into the current view. For example, when a new message arrives in a mailbox that people are currently viewing, Mail simply adds it to the list of unread messages because sending a notification about it would be unnecessary and distracting. + +**Avoid including sensitive, personal, or confidential information in a notification.** You can’t predict what people will be doing when they receive a notification, so it’s essential to avoid including private information that could be visible to others. + +## [Content](https://developer.apple.com/design/human-interface-guidelines/notifications#Content) + +When a notification includes a title, the system displays it at the top where it’s most visible. In a notification related to direct communication, the system automatically displays the sender’s name in the title area; in a noncommunication notification, the system displays your app name if you don’t provide a title. + +**Create a short title if it provides context for the notification content.** Prefer brief titles that people can read at a glance, especially on Apple Watch, where space is limited. When possible, take advantage of the prominent notification title area to provide useful information, like a headline, event name, or email subject. If you can only provide a generic title for a noncommunication notification — like New Document — it can be better to let the system display your app name instead. Use title-style [capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64) and no ending punctuation. + +**Write succinct, easy-to-read notification content.** Use complete sentences, sentence case, and proper punctuation, and don’t truncate your message — the system does this automatically when necessary. + +**Provide generically descriptive text to display when notification previews aren’t available.** In Settings, people can choose to hide notification previews for all apps. In this situation, the system shows only your app icon and the default title _Notification_. To give people sufficient context to know whether they want to view the full notification, write body text that succinctly describes the notification content without revealing too many details, like “Friend request,” “New comment,” “Reminder,” or “Shipment” (for developer guidance, see [`hiddenPreviewsBodyPlaceholder`](https://developer.apple.com/documentation/UserNotifications/UNNotificationCategory/hiddenPreviewsBodyPlaceholder)). Use sentence-style [capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64) for this text. + +**Avoid including your app name or icon.** The system automatically displays a large version of your app icon at the leading edge of each notification; in a communication notification, the system displays the sender’s contact image badged with a small version of your icon. + +**Consider providing a sound to supplement your notifications.** Sound can be a great way to distinguish your app’s notifications and get someone’s attention when they’re not looking at the device. You can create a custom sound that coordinates with the style of your app or use a system-provided alert sound. If you use a custom sound, make sure it’s short, distinctive, and professionally produced. A notification sound can enhance the user experience, but don’t rely on it to communicate important information, because people may not hear it. Although people might also want a vibration to accompany alert sounds, you can’t provide such a vibration programmatically. For developer guidance, see [`UNNotificationSound`](https://developer.apple.com/documentation/UserNotifications/UNNotificationSound). + +## [Notification actions](https://developer.apple.com/design/human-interface-guidelines/notifications#Notification-actions) + +A notification can present a customizable detail view that contains up to four buttons people use to perform actions without opening your app. For example, a Calendar event notification provides a Snooze button that postpones the event’s alarm for a few minutes. For developer guidance, see [Handling notifications and notification-related actions](https://developer.apple.com/documentation/UserNotifications/handling-notifications-and-notification-related-actions). + +**Provide beneficial actions that make sense in the context of your notification.** Prefer actions that let people perform common, time-saving tasks that eliminate the need to open your app. For each button, use a short, title-case term or phrase that clearly describes the result of the action. Don’t include your app name or any extraneous information in the button label, keep the text brief to avoid truncation, and take localization into account as you write it. + +**Avoid providing an action that merely opens your app.** When people tap a notification or its preview, they expect your app to display related content, so presenting an action button that does the same thing clutters the detail view and can be confusing. + +**Prefer nondestructive actions.** If you must provide a destructive action, make sure people have enough context to avoid unintended consequences. The system gives a distinct appearance to the actions you identify as destructive. + +**Provide a simple, recognizable interface icon for each notification action.** An interface icon reinforces an action’s meaning, helping people instantly understand what it does. The system displays your interface icon on the trailing side of the action title. When you use [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols), you can choose an existing symbol that represents your command or edit a related symbol to create a custom icon. + +## [Badging](https://developer.apple.com/design/human-interface-guidelines/notifications#Badging) + +A badge is a small, filled oval containing a number that can appear on an app icon to indicate the number of unread notifications that are available. After people address unread notifications, the badge disappears from the app icon, reappearing when new notifications arrive. People can choose whether to allow an app to display badges in their notification settings. + +**Use a badge only to show people how many unread notifications they have.** Don’t use a badge to convey numeric information that isn’t related to notifications, such as weather-related data, dates and times, stock prices, or game scores. + +**Make sure badging isn’t the only method you use to communicate essential information.** People can turn off badging for your app, so if you rely on it to show people when there’s important information, people can miss the message. Always make sure that you make important information easy for people to find as soon as they open your app. + +**Keep badges up to date.** Update your app’s badge as soon as people open the corresponding notifications. You don’t want people to think there are new notifications available, only to find that they’ve already viewed them all. Note that reducing a badge’s count to zero removes all related notifications from Notification Center. + +**Avoid creating a custom image or component that mimics the appearance or behavior of a badge.** People can turn off notification badges if they choose, and will become frustrated if they have done so and then see what appears to be a badge. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/notifications#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or visionOS._ + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/notifications#watchOS) + +On Apple Watch, notifications occur in two stages: _short look_ and _long look_. People can also view notifications in Notification Center. On supported devices, people can double-tap to respond to notifications. + +You can help people have a great notification experience by designing app-specific assets and actions that are relevant on Apple Watch. If your watchOS app has an iPhone companion that supports notifications, watchOS can automatically provide default short-look and long-look interfaces if necessary. + +#### [Short looks](https://developer.apple.com/design/human-interface-guidelines/notifications#Short-looks) + +A short look appears when the wearer’s wrist is raised and disappears when it’s lowered. + +![An illustration that represents a short look notification from a generic app. It includes a large primary image in the center, a title, and a short preview of the notification content.](https://docs-assets.developer.apple.com/published/609f4ae816d78b5c87a340416f4874a9/notifications-short-looks%402x.png) + +**Avoid using a short look as the only way to communicate important information.** A short look appears only briefly, giving people just enough time to see what the notification is about and which app sent it. If your notification information is critical, make sure you deliver it in other ways, too. + +**Keep privacy in mind.** Short looks are intended to be discreet, so it’s important to provide only basic information. Avoid including potentially sensitive information in the notification’s title. + +#### [Long looks](https://developer.apple.com/design/human-interface-guidelines/notifications#Long-looks) + +Long looks provide more detail about a notification. If necessary, people can swipe vertically or use the Digital Crown to scroll a long look. After viewing a long look, people can dismiss it by tapping it or simply by lowering their wrist. + +![An illustration that represents a long look notification from a generic app. It includes a small primary image in the upper left corner, badging a platter with the notification title and content. Beneath the notification are two full width action buttons, the second of which extends off the screen to indicate that the view is scrollable.](https://docs-assets.developer.apple.com/published/a48f434c960e0f14429018803ee4b180/notifications-long-looks%402x.png) + +A custom long-look interface can be static or dynamic. The _static_ interface lets you display a notification’s message along with additional static text and images. The _dynamic_ interface gives you access to the notification’s full content and offers more options for configuring the appearance of the interface. + +You can customize the content area for both static and dynamic long looks, but you can’t change the overall structure of the interface. The system-defined structure includes a _sash_ at the top of the interface and a Dismiss button at the bottom, below all custom buttons. + +**Consider using a rich, custom long-look notification to let people get the information they need without launching your app.** You can use SwiftUI [Animations](https://developer.apple.com/documentation/SwiftUI/Animations) to create engaging, interruptible animations; alternatively, you can use [SpriteKit](https://developer.apple.com/documentation/SpriteKit) or [SceneKit](https://developer.apple.com/documentation/SceneKit). + +**At the minimum, provide a static interface; prefer providing a dynamic interface too.** The system defaults to the static interface when the dynamic interface is unavailable, such as when there is no network or the iPhone companion app is unreachable. Be sure to create the resources for your static interface in advance and package them with your app. + +**Choose a background appearance for the sash.** The system-provided sash, at the top of the long-look interface, displays your app icon and name. You can customize the sash’s color or give it a blurred appearance. If you display a photo at the top of the content area, you’ll probably want to use the blurred sash, which has a light, translucent appearance that gives the illusion of overlapping the image. + +**Choose a background color for the content area.** By default, the long look’s background is transparent. If you want to match the background color of other system notifications, use white with 18% opacity; otherwise, you can use a custom color, such as a color within your brand’s palette. + +**Provide up to four custom actions below the content area.** For each long look, the system uses the notification’s type to determine which of your custom actions to display as buttons in the notification UI. In addition, the system always displays a Dismiss button at the bottom of the long-look interface, below all custom buttons. If your watchOS app has an iPhone companion that supports notifications, the system shares the actionable notification types already registered by your iPhone app and uses them to configure your custom action buttons. + +#### [Double tap](https://developer.apple.com/design/human-interface-guidelines/notifications#Double-tap) + +People can double-tap to respond to notifications on supported devices. When a person responds to a notification with a double tap, the system selects the first nondestructive action as the response. + +**Keep double tap in mind when choosing the order of custom actions you present as responses to a notification.** Because a double tap runs the first nondestructive action, consider placing the action that people use most frequently at the top of the list. For example, a parking app that provides custom actions for extending the time on a paid parking spot could offer options to extend the time by 5 minutes, 15 minutes, or an hour, with the most common choice listed first. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/notifications#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/notifications#Related) + +[Managing notifications](https://developer.apple.com/design/human-interface-guidelines/managing-notifications) + +[Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/notifications#Developer-documentation) + +[Asking permission to use notifications](https://developer.apple.com/documentation/UserNotifications/asking-permission-to-use-notifications) — User Notifications + +[User Notifications UI](https://developer.apple.com/documentation/UserNotificationsUI) + +[User Notifications](https://developer.apple.com/documentation/UserNotifications) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/notifications#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/B63A08EA-8856-4C77-9E1B-EA1CAD990619/4986_wide_250x141_1x.jpg) Send communication and Time Sensitive notifications ](https://developer.apple.com/videos/play/wwdc2021/10091) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/3D8237BC-06E3-4711-8552-7008A5D5BAAD/3764_wide_250x141_1x.jpg) The Push Notifications primer ](https://developer.apple.com/videos/play/wwdc2020/10095) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/notifications#Change-log) + +Date| Changes +---|--- +October 24, 2023| Updated watchOS platform considerations with guidance for presenting notification responses to double tap. + diff --git a/skills/hig-components-system/references/top-shelf.md b/skills/hig-components-system/references/top-shelf.md new file mode 100644 index 00000000..d835a2fa --- /dev/null +++ b/skills/hig-components-system/references/top-shelf.md @@ -0,0 +1,135 @@ +--- +title: "Top Shelf | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/top-shelf + +# Top Shelf + +The Apple TV Home Screen provides an area called Top Shelf, which showcases your content in a rich, engaging way while also giving people access to their favorite apps in the Dock. + +![A stylized representation of a horizontal list of media previews above rows of Apple TV apps. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/73359c0fed7c9f8fd20b9a2c03ebfe66/components-top-shelf-intro%402x.png) + +When you support full-screen Top Shelf, people can swipe through multiple full-screen content views, play trailers and previews, and get more information about your content. + +Top Shelf is a unique opportunity to highlight new, featured, or recommended content and let people jump directly to your app or game to view it. For example, when people select Apple TV in the Dock, full-screen previews immediately begin playing and soon the Dock slides away. As people watch previews for the first show, they can swipe through previews of all other featured shows, stopping to select Play or More Info for a preview that interests them. + +The system defines several layout templates that you can use to give people a compelling Top Shelf experience when they select your app in the Dock. To help you position content, you can download these templates from [Apple Design Resources](https://developer.apple.com/design/resources/#tvos-apps). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Best-practices) + +**Help people jump right into your content.** Top Shelf provides a path to the content people care about most. Two of the system-provided layout templates — [carousel actions](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Carousel-actions) and [carousel details](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Carousel-details) — each include two buttons by default: A primary button intended to begin playback and a More Info button intended to open your app to a view that displays details about the content. + +**Feature new content.** For example, showcase new releases or episodes, highlight upcoming movies and shows, and avoid promoting content that people have already purchased, rented, or watched. + +**Personalize people’s favorite content.** People typically put the apps they use most often into Top Shelf. You can personalize their experience by showing targeted recommendations in the Top Shelf content you supply, letting people resume media playback or jump back into active gameplay. + +**Avoid showing advertisements or prices.** People put your app into Top Shelf because you’ve already sold them on it, so they may not appreciate seeing lots of ads from your app. Showing purchasable content in the Top Shelf is fine, but prefer putting the focus on new and exciting content, and consider displaying prices only when people show interest. + +**Showcase compelling dynamic content that can help draw people in and encourage them to view more.** If necessary, you can supply static images, but people typically prefer a captivating, dynamic Top Shelf experience that features the newest or highest rated content. To provide this experience, prefer creating [layered images](https://developer.apple.com/design/human-interface-guidelines/images#Layered-images) to display in Top Shelf. + +**If you don’t provide the recommended full-screen content, supply at least one static image as a fallback.** The system displays a static image when your app is in the Dock and in focus and full-screen content is unavailable. tvOS flips and blurs the image, ensuring that it fits into a width of 1920 pixels at the 16:9 aspect ratio. Use the following values for guidance. + +Image size +--- +2320x720 pt (2320x720 px @1x, 4640x1440 px @2x) + +**Avoid implying interactivity in a static image.** A static Top Shelf image isn’t focusable, and you don’t want to make people think it’s interactive. + +## [Dynamic layouts](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Dynamic-layouts) + +Dynamic Top Shelf images can appear in several ways: + + * A carousel of full-screen video and images that includes two buttons and optional details + + * A row of focusable content + + * A set of scrolling banners + + + + +### [Carousel actions](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Carousel-actions) + +The carousel actions layout style focuses on full-screen video and images and includes a few unobtrusive controls that help people see more. This layout style works especially well to showcase content that people already know something about. For example, it’s great for displaying user-generated content, like photos, or new content from a franchise or show that people are likely to enjoy. + +**Provide a title.** Include a succinct title, like the title of the show or movie or the title of a photo album. If necessary, you can also provide a brief subtitle. For example, a subtitle for a photo album could be a range of dates; a subtitle for an episode could be the name of the show. + +### [Carousel details](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Carousel-details) + +This layout style extends the carousel actions layout style, giving you the opportunity to include some information about the content. For example, you might provide information like a plot summary, cast list, and other metadata that helps people decide whether to choose the content. + +**Provide a title that identifies the currently playing content.** The content title appears near the top of the screen so it’s easy for people to read it at a glance. Above the title, you can also provide a succinct phrase or app attribution, like “Featured on _My App_.” + +### [Sectioned content row](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Sectioned-content-row) + +This layout style shows a single labeled row of sectioned content, which can work well to highlight recently viewed content, new content, or favorites. Row content is focusable, which lets people scroll quickly through it. A label appears when an individual piece of content comes into focus, and small movements on the remote’s Touch surface bring the focused image to life. You can also configure a sectioned content row to show multiple labels. + +**Provide enough content to constitute a complete row.** At a minimum, load enough images in a sectioned content row to span the full width of the screen. In addition, include at least one label for greater platform consistency and to provide additional context. + +You can use the following image sizes in a sectioned content row. + +#### [Poster (2:3)](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Poster-23) + +![An illustration showing an outlined rectangle that contains a slightly smaller rectangle, which contains a slight narrower rectangle. The outermost rectangle represents the actual size, the middle rectangle represents the visible or safe zone, and the innermost rectangle represents the unfocused size.](https://docs-assets.developer.apple.com/published/13d162f243a286d45bb107b4a7cb799b/icons-and-images-content-layout-2x3%402x.png) + +Aspect| Image size +---|--- +Actual size| 404x608 pt (404x608 px @1x, 808x1216 px @2x) +Focused/Safe zone size| 380x570 pt (380x570 px @1x, 760x1140 px @2x) +Unfocused size| 333x570 pt (333x570 px @1x, 666x1140 px @2x) + +#### [Square (1:1)](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Square-11) + +![An illustration showing an outlined square that contains a slightly smaller square, which contains a slightly smaller square. The outermost square represents the actual size, the middle square represents the visible or safe zone, and the innermost square represents the unfocused size.](https://docs-assets.developer.apple.com/published/eba53b409d9ed6226c9b1e965dc17033/icons-and-images-content-layout-1x1%402x.png) + +Aspect| Image size +---|--- +Actual size| 608x608 pt (608x608 px @1x, 1216x1216 px @2x) +Focused/Safe zone size| 570x570 pt (570x570 px @1x, 1140x1140 px @2x) +Unfocused size| 500x500 pt (500x500 px @1x, 1000x1000 px @2x) + +#### [16:9](https://developer.apple.com/design/human-interface-guidelines/top-shelf#169) + +![An illustration showing an outlined rectangle that contains a slightly smaller rectangle, which contains a slightly smaller rectangle. The outermost rectangle represents the actual size, the middle rectangle represents the visible or safe zone, and the innermost rectangle represents the unfocused size.](https://docs-assets.developer.apple.com/published/2b45c73a75fdeafef21cbb3c2923259a/icons-and-images-content-layout-16x9%402x.png) + +Aspect| Image size +---|--- +Actual size| 908x512 pt (908x512 px @1x, 1816x1024 px @2x) +Focused/Safe zone size| 852x479 pt (852x479 px @1x, 1704x958 px @2x) +Unfocused size| 782x440 pt (782x440 px @1x, 1564x880 px @2x) + +**Be aware of additional scaling when combining image sizes.** If your Top Shelf design includes a mixture of image sizes, keep in mind that images will automatically scale up to match the height of the tallest image if necessary. For example, a 16:9 image scales to 500 pixels high if included in a row with a poster or square image. + +#### [Scrolling inset banner](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Scrolling-inset-banner) + +This layout shows a series of large images, each of which spans almost the entire width of the screen. Apple TV automatically scrolls through these banners on a preset timer until people bring one into focus. The sequence circles back to the beginning after the final image is reached. + +When a banner is in focus, a small, circular gesture on the remote’s Touch surface enacts the system focus effect, animating the item, applying lighting effects, and, if the banner contains layered images, producing a 3D effect. Swiping on the Touch surface pans to the next or previous banner in the sequence. Use this style to showcase rich, captivating content, such as a popular new movie. + +**Provide three to eight images.** A minimum of three images is recommended for a scrolling banner to feel effective. More than eight images can make it hard to navigate to a specific image. + +**If you need text, add it to your image.** This layout style doesn’t show labels under content, so all text must be part of the image itself. In layered images, consider elevating text by placing it on a dedicated layer above the others. Add the text to the accessibility label of the image too, so [VoiceOver](https://developer.apple.com/design/human-interface-guidelines/voiceover) can read it. + +![An illustration showing a wide rectangle that contains of a smaller rectangle, which contains a slightly narrower rectangle. The outermost rectangle represents the actual size, the middle rectangle represents the visible or safe zone, and the innermost rectangle represents the unfocused size.](https://docs-assets.developer.apple.com/published/e7ca852b559e9d981c968703dbad0315/icons-and-images-content-layout-extra-wide%402x.png) + +Use the following size for a scrolling inset banner image: + +Aspect| Image size +---|--- +Actual size| 1940x692 pt (1940x692 px @1x, 3880x1384 px @2x) +Focused/Safe zone size| 1740x620 pt (1740x620 px @1x, 3480x1240 px @2x) +Unfocused size| 1740x560 pt (1740x560 px @1x, 3480x1120 px @2x) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/#tvos-apps) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/top-shelf#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/21CB7C2D-31A3-4DE5-A0EE-58FE214031F0/2713_wide_250x141_1x.jpg) Mastering the Living Room With tvOS ](https://developer.apple.com/videos/play/wwdc2019/211) + diff --git a/skills/hig-components-system/references/watch-faces.md b/skills/hig-components-system/references/watch-faces.md new file mode 100644 index 00000000..75b39ac3 --- /dev/null +++ b/skills/hig-components-system/references/watch-faces.md @@ -0,0 +1,40 @@ +--- +title: "Watch faces | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/watch-faces + +# Watch faces + +A watch face is a view that people choose as their primary view in watchOS. + +![A stylized representation of a series of Apple Watch faces. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/bdf9c3962f71506a149c0ee448c2a0ad/components-faces-intro%402x.png) + +The watch face is at the heart of the watchOS experience. People choose a watch face they want to see every time they raise their wrist, and they customize it with their favorite complications. People can even customize different watch faces for different activities, so they can switch to the watch face that fits their current context. + +In watchOS 7 and later, people can share the watch faces they configure. For example, a fitness instructor might configure a watch face to share with their students by choosing the Gradient watch face, customizing the color, and adding their favorite health and fitness complications. When the students add the shared watch face to their Apple Watch or the Watch app on their iPhone, they get a custom experience without having to configure it themselves. + +You can also configure a watch face to share from within your app, on your website, or through Messages, Mail, or social media. Offering shareable watch faces can help you introduce more people to your complications and your app. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/watch-faces#Best-practices) + +**Help people discover your app by sharing watch faces that feature your complications.** Ideally, you support multiple complications so that you can showcase them in a shareable watch face and provide a curated experience. For some watch faces, you can also specify a system accent color, images, or styles. If people add your watch face but haven’t installed your app, the system prompts them to install it. + +**Display a preview of each watch face you share.** Displaying a preview that highlights the advantages of your watch face can help people visualize its benefits. You can get a preview by using the iOS Watch app to email the watch face to yourself. The preview includes an illustrated device bezel that frames the face and is suitable for display on websites and in watchOS and iOS apps. Alternatively, you can replace the illustrated bezel with a high-fidelity hardware bezel that you can download from [Apple Design Resources](https://developer.apple.com/design/resources/#product-bezels) and composite onto the preview. For developer guidance, see [Sharing an Apple Watch face](https://developer.apple.com/documentation/ClockKit/sharing-an-apple-watch-face). + +**Aim to offer shareable watch faces for all Apple Watch devices.** Some watch faces are available on Series 4 and later — such as California, Chronograph Pro, Gradient, Infograph, Infograph Modular, Meridian, Modular Compact, and Solar Dial — and Explorer is available on Series 3 (with cellular) and later. If you use one of these faces in your configuration, consider offering a similar configuration using a face that’s available on Series 3 and earlier. To help people make a choice, you can clearly label each shareable watch face with the devices it supports. + +**Respond gracefully if people choose an incompatible watch face.** The system sends your app an error when people try to use an incompatible watch face on Series 3 or earlier. In this scenario, consider immediately offering an alternative configuration that uses a compatible face instead of displaying an error. Along with the previews you provide, help people understand that they might receive an alternative watch face if they choose a face that isn’t compatible with their Apple Watch. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/watch-faces#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, tvOS, or visionOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/watch-faces#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/watch-faces#Related) + +[Apple Design Resources — Product Bezels](https://developer.apple.com/design/resources/#product-bezels) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/watch-faces#Developer-documentation) + +[Sharing an Apple Watch face](https://developer.apple.com/documentation/ClockKit/sharing-an-apple-watch-face) — ClockKit + diff --git a/skills/hig-components-system/references/widgets.md b/skills/hig-components-system/references/widgets.md new file mode 100644 index 00000000..09384383 --- /dev/null +++ b/skills/hig-components-system/references/widgets.md @@ -0,0 +1,517 @@ +--- +title: "Widgets | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/widgets + +# Widgets + +A widget provides quick access to essential information and focused interactions from your app or game in additional contexts. + +![A stylized representation of a set of different-sized widgets on an iPad Home Screen. The image is tinted red to subtly reflect the red in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1d1cd14d565d4afe6ecd373b26d9ffc5/components-widgets-intro%402x.png) + +Widgets help people organize and personalize their devices by displaying timely, glanceable content and offering specific functionality. They appear in various contexts for a consistent experience across platforms. For example, a person might place a Weather widget: + + * On the Home Screen and Lock Screen of their iPhone and iPad + + * On the desktop and Notification Center of their Mac + + * On a horizontal or vertical surface when they wear Apple Vision Pro + + * At a fixed position in the Smart Stack of Apple Watch + + + + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/widgets#Anatomy) + +Widgets come in different sizes, ranging from small accessory widgets on iPhone, iPad, and Apple Watch to system family widgets that include an extra large size on iPad, Mac, and Apple Vision Pro. Additionally, widgets adapt their appearance to the context in which they appear and respond to a person’s device customization. Consider the following aspects when you design widgets: + + * The widget size to support + + * The context — devices and system experiences — in which the widget may appear + + * The rendering modes and color treatment that the widget receives based on the size and context + + + + +The WidgetKit framework provides default appearances and treatments for each widget size to fit the system experience or device where it appears. However, it’s important to consider creating a custom widget design that can provide the best experience for your content in each specific context. + +### [System family widgets](https://developer.apple.com/design/human-interface-guidelines/widgets#System-family-widgets) + +System family widgets offer a broad range of sizes and may include one or more interactive elements. + + * Small + * Medium + * Large + * Extra large + * Extra large portrait + + + +![An image of the small Calendar widget, showing only the current date and one event.](https://docs-assets.developer.apple.com/published/0089454df2b0b32f6ca892f3131bdb01/widgets-calendar-small%402x.png) + +![An image of the medium Calendar widget, which has the same height as the small widget, but twice the width. On the left, the widget repeats the small widget’s information, adding a birthday event; on the right the medium widget adds information about tomorrow’s events.](https://docs-assets.developer.apple.com/published/a29b600e231c019ccc0fd855603ac1be/widgets-calendar-medium%402x.png) + +![An image of the large Calendar widget, which has the same width as the medium widget, but a little more than twice the height. Like the medium widget, the large widget displays information about today on the left and information about tomorrow on the right. On both sides, the large version includes relevant time-of-day indicators.](https://docs-assets.developer.apple.com/published/d2a3a81b0ccbc123bb61e12b7da6b1ed/widgets-calendar-large%402x.png) + +![An image of the extra large Calendar widget, which is about twice the width of the large widget and a little shorter. The widget displays information about today and the following three days, including relevant time-of-day indicators in all four columns. The today column is a little wider than the columns for the other days.](https://docs-assets.developer.apple.com/published/f2738320bf945e097a8d16f35ca8d9c1/widgets-calendar-extra-large%402x.png) + +![An image of the extra large portrait Music widget, which has the same width as the large widget but is taller.](https://docs-assets.developer.apple.com/published/4ff038f07eaedfa7579dfa7e0ef38099/widgets-music-extra-large-portrait%402x.png) + +The following table shows supported contexts for each system family widget size: + +Widget size| iPhone| iPad| Mac| Apple Vision Pro +---|---|---|---|--- +System small| Home Screen, Today View, StandBy, and CarPlay| Home Screen, Today View, and Lock Screen| Desktop and Notification Center| Horizontal and vertical surfaces +System medium| Home Screen and Today View| Home Screen and Today View| Desktop and Notification Center| Horizontal and vertical surfaces +System large| Home Screen and Today View| Home Screen and Today View| Desktop and Notification Center| Horizontal and vertical surfaces +System extra large| Not supported| Home Screen and Today View| Desktop and Notification Center| Horizontal and vertical surfaces +System extra large portrait| Not supported| Not supported| Not supported| Horizontal and vertical surfaces + +### [Accessory widgets](https://developer.apple.com/design/human-interface-guidelines/widgets#Accessory-widgets) + +Accessory widgets display a very limited amount of information because of their size. + + * Accessory circular + * Accessory corner + * Accessory inline + * Accessory rectangular + + + +![An image of the circular accessory Calendar widget, showing only the time for the next event.](https://docs-assets.developer.apple.com/published/8f496e2dce59da3b8607cb07e4c4215c/widgets-accessory-calendar-circular%402x.png) + +![An image of the corner accessory Calendar widget. It displays the time and title of an upcoming meeting.](https://docs-assets.developer.apple.com/published/ee66466be7aa2d47efc551196156b8fa/widgets-accessory-corner-widget-watch%402x.png) + +![An image of the inline accessory Calendar widget, showing the date and the number of the next events.](https://docs-assets.developer.apple.com/published/b9af2a21096e381b9e3734e0119b7b09/widgets-accessory-calendar-inline%402x.png) + +![An image of the rectangular accessory Calendar widget. It displays the time of two simultaneous events and their titles.](https://docs-assets.developer.apple.com/published/8709b464372ab0810be34a951879ceec/widgets-accessory-calendar-rectangular%402x.png) + +They appear on the following devices: + +Widget size| iPhone| iPad| Apple Watch +---|---|---|--- +Accessory circular| Lock Screen| Lock Screen| Watch complications and in the Smart Stack +Accessory corner| Not supported| Not supported| Watch complications +Accessory inline| Lock Screen| Lock Screen| Watch complications +Accessory rectangular| Lock Screen| Lock Screen| Watch complications and in the Smart Stack + +### [Appearances](https://developer.apple.com/design/human-interface-guidelines/widgets#Appearances) + +A widget can appear in full-color, in monochrome with a tint color, or in a clear, translucent style. Depending on the location, device, and a person’s customization, the system may apply a tinted or clear appearance to the widget and its included full-color images, symbols, and glyphs. + +For example, a small system widget appears differently depending on the device and location: + + * On the Home Screen of iPhone and iPad, people choose from different appearances for widgets: light, dark, clear, and tinted. In light and dark appearances, widgets have a full-color design. In a clear appearance, the system desaturates the widget and adds translucency, highlights, and the Liquid Glass material. In a tinted appearance, the system desaturates the widget and its content, then applies a person’s selected tint color. + + + + +![An image of the small Stocks widget on the Home Screen in the full-color appearance.](https://docs-assets.developer.apple.com/published/c001f107005e17afb9e12d48d162dcb2/widgets-stocks-default%402x.png)Full-color + +![An image of the small Stocks widget on the Home Screen in the clear appearance.](https://docs-assets.developer.apple.com/published/ad7a87eea7f2be4863cf6a2e8d8a7639/widgets-stocks-clear%402x.png)Clear + +![An image of the small Stocks widget on the Home Screen in the tinted appearance.](https://docs-assets.developer.apple.com/published/25e58f2c47d8b6d863187721d5c4abe9/widgets-stocks-tinted%402x.png)Tinted + + * On Apple Vision Pro, the widget appears as a 3D object, surrounded by a frame. It takes on a full-color appearance with a glass- or paper-like coating layer that responds to lighting conditions. Additionally, people can choose a tinted appearance that applies a color from a set of system-provided color palettes. + + + + +![An image of the small Stocks widget on Apple Vision Pro.](https://docs-assets.developer.apple.com/published/4b4e42b658c77b47c0f40d4d433d7b3b/widgets-stocks-visionos-frame%402x.png) + + * On the Lock Screen of iPad, the widget takes on a monochromatic appearance without a tint color. + + + + +![An image of the small Stocks widget on the Lock Screen, showing the price of Apple stock.](https://docs-assets.developer.apple.com/published/58aef111a6a92a03981f5998720bca48/widgets-stocks-ipad-lock-screen%402x.png) + + * On the Lock Screen of iPhone in StandBy, the widget appears scaled up in size with the background removed. When the ambient light falls below a threshold, the system renders the widget with a monochromatic red tint. + + + + +![An image of the Stocks widget on the Lock Screen in StandBy, showing the price of Apple stock.](https://docs-assets.developer.apple.com/published/cc1129210235e90f1ee9045eaf85dfb9/widgets-stocks-standby%402x.png)StandBy + +![An image of the Stocks widget on the Lock Screen that uses the dark appearance in low-light conditions, showing the price of Apple stock.](https://docs-assets.developer.apple.com/published/eb666a28d966abb92b34bdb0d14d8e0b/widgets-stocks-standby-night-mode%402x.png)iPhone in StandBy during low-light conditions + +Similarly, a rectangular accessory widget appears as follows: + + * On the Lock Screen of iPhone and iPad, it takes on a monochromatic appearance without a tint color. + + * On Apple Watch, the widget can appear as a watch complication in both full-color and tinted appearances, and it can also appear in the Smart Stack. + + + + + * iPhone Lock Screen + * Watch complication + * Smart Stack on Apple Watch + + + +![A rectangular accessory Calendar widget on the Lock Screen of iPhone, displaying a team meeting at 4 P.M. in a conference room.](https://docs-assets.developer.apple.com/published/1bf7a8ed9890752d8aac424f5406e978/widgets-calendar-rectangular-ios%402x.png) + +![A rectangular Calendar watch complication, displaying a team meeting at 4 P.M. in a conference room.](https://docs-assets.developer.apple.com/published/817c517d1183f2d8a797d7b304cefab3/widgets-calendar-rectangular-watchos-complication%402x.png) + +![A Calendar widget in the Smart Stack on Apple Watch. It displays a team meeting at 4 P.M. in a conference room.](https://docs-assets.developer.apple.com/published/a2d56d27563c849f1a5bc6b24406c59d/widgets-calendar-rectangular-watchos-smart-stack%402x.png) + +Each appearance described above includes a [rendering mode](https://developer.apple.com/design/human-interface-guidelines/widgets#Rendering-modes) that depends on the platform and a person’s appearance settings: + + * The system uses the [full color](https://developer.apple.com/documentation/WidgetKit/WidgetRenderingMode/fullColor) rendering mode for system family widgets across all platforms to display your widget in full color. It doesn’t change the color of your views. + + * The system uses the [accented](https://developer.apple.com/documentation/WidgetKit/WidgetRenderingMode/accented) rendering mode for system family widgets across all platforms and for accessory widgets on Apple Watch. In the accented rendering mode, the system removes the background and replaces it with a tinted color effect for a tinted appearance and a Liquid Glass background for a clear appearance. Additionally, it divides the widget’s views into an accent group and a primary group, and then applies a solid color to each group. + + * The system uses the [vibrant](https://developer.apple.com/documentation/WidgetKit/WidgetRenderingMode/vibrant) rendering mode for widgets on the Lock Screen of iPhone and iPad, and on iPhone in StandBy in low-light conditions. It desaturates text, images, and gauges, and creates a vibrant effect by coloring your content appropriately for the Lock Screen background or a macOS desktop. Note that people can customize the Lock Screen with a tint color, and the system applies a red tint for widgets that appear on iPhone in StandBy in low-light conditions. + + + + +The following table lists the occurrences for each rendering mode per platform: + +Platform| Full-color| Accented| Vibrant +---|---|---|--- +iPhone| Home Screen, Today view, StandBy and CarPlay (with the background removed)| Home Screen and Today view| Lock Screen, StandBy in low-light conditions +iPad| Home Screen and Today view| Home Screen and Today view| Lock Screen +Apple Watch| Smart Stack, complications| Smart Stack, complications| Not supported +Mac| Desktop and Notification Center| Not supported| Desktop +Apple Vision Pro| Horizontal and vertical surfaces| Horizontal and vertical surfaces| Not supported + +For additional design guidance, see [Rendering modes](https://developer.apple.com/design/human-interface-guidelines/widgets#Rendering-modes). For developer guidance, see [Preparing widgets for additional platforms, contexts, and appearances](https://developer.apple.com/documentation/WidgetKit/Preparing-widgets-for-additional-contexts-and-appearances) and [`WidgetRenderingMode`](https://developer.apple.com/documentation/WidgetKit/WidgetRenderingMode). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/widgets#Best-practices) + +**Choose simple ideas that relate to your app’s main purpose.** Include timely content and relevant functionality. For example, people who use the Weather app are often most interested in the current high and low temperatures and weather conditions, so the Weather widgets prioritize this information. + +![An image of a small Weather widget showing current conditions for Cupertino. In text, the widget displays a temperature of 70 degrees, the condition Sunny, and forecast high and low temperatures of 75 degrees and 59 degrees, respectively. The widget also displays a yellow sun symbol above the word Sunny and the filled-in location indicator to the right of the word Cupertino.](https://docs-assets.developer.apple.com/published/6a3718b9d1eb04c89acbf3c32cf9101e/widgets-ios-weather-small%402x.png) + +**Aim to create a widget that gives people quick access to the content they want.** People appreciate widgets that display meaningful content and offer useful actions and deep links to key areas of your app. Replicating an app icon offers little additional value, and people may be less likely to keep it on their screens. + +**Prefer dynamic information that changes throughout the day.** If a widget’s content never appears to change, people may not keep it in a prominent position. Although widgets don’t update from minute to minute, it’s important to find ways to keep their content fresh to invite frequent viewing. + +**Look for opportunities to surprise and delight.** For example, you might design a unique visual treatment for your calendar widget to display on meaningful occasions, like birthdays or holidays. + +**Offer widgets in multiple sizes when doing so adds value.** Small widgets use their limited space to typically show a single piece of information while larger sizes support additional layers of information and actions. Avoid expanding a smaller widget’s content to simply fill a larger area. It’s more important to create one widget in the size that best represents the content than providing the widget in all sizes. + +**Balance information density.** Sparse layouts can make the widget seem unnecessary, while overly dense layouts are less glanceable. Create a layout that provides essential information at a glance and allows people to view additional details by taking a longer look. If your layout is too dense, consider improving its clarity by using a larger widget size or replacing text with graphics. + +**Display only the information that’s directly related to the widget’s main purpose.** In larger widgets, you can display more data — or more detailed visualizations of the data — but you don’t want to lose sight of the widget’s primary purpose. For example, all Calendar widgets display a person’s upcoming events. In each size, the widget remains centered on events while expanding the range of information as the size increases. + +**Use brand elements thoughtfully.** Incorporate brand colors, typefaces, and stylized glyphs to make your widget recognizable but don’t overpower useful information or make your widget look out of place. When you include brand elements, people seldom need your logo or app icon to help them recognize your widget. If your widget benefits from including a small logo — for example, if your widget displays content from multiple sources — a small logo in the top-right corner is sufficient. + +**Choose between automatically displaying content and letting people customize displayed information.** In some cases, people need to configure a widget to ensure it displays the information that’s most useful for them. For example, the Stocks widget lets people select the stocks they wish to track. In contrast, some widgets — like the Podcasts widget — automatically display recent content, so people don’t need to customize them. For developer guidance, see [Making a configurable widget](https://developer.apple.com/documentation/WidgetKit/Making-a-Configurable-Widget). + +**Avoid mirroring your widget’s appearance within your app.** Including an element in your app that looks like your widget but doesn’t behave like it can confuse people. Additionally, people may be less likely to try other ways to interact with such an element in your app because they expect it to behave like a widget. + +**Let people know when authentication adds value.** If your widget provides additional functionality when someone is signed in to your app, make sure people know that. For example, an app that shows upcoming reservations might include a message like “Sign in to view reservations” when people are signed out. + +### [Updating widget content](https://developer.apple.com/design/human-interface-guidelines/widgets#Updating-widget-content) + +To remain relevant and useful, widgets periodically refresh their information but don’t support continuous, real-time updates, and the system may adjust the limits for updates depending on various factors. + +**Keep your widget up to date.** Finding the appropriate update frequency for your widget depends on knowing how often the data changes and estimating when people need to see new data. For example, a widget that provides information about tidal conditions at a beach is useful if it updates on an hourly basis even though conditions change constantly. If people are likely to check your widget more frequently than you can update it, consider displaying text that describes when the data was last updated. + +**Use system functionality to refresh dates and times in your widget.** Because widget update frequency is limited, let the system automatically refresh date and time information to preserve update opportunities. Determine the update frequency that fits with the data you display and show content quickly without hiding stale data behind placeholder content. For developer guidance about widget updates, see [Keeping a widget up to date](https://developer.apple.com/documentation/WidgetKit/Keeping-a-Widget-Up-To-Date). + +**Use animated transitions to bring attention to data updates.** By default, many SwiftUI views animate content updates. Additionally, use standard and custom animations with a duration of up to two seconds to let people know when new information is available or when content displays differently. For developer guidance, see [Animating data updates in widgets and Live Activities](https://developer.apple.com/documentation/WidgetKit/Animating-data-updates-in-widgets-and-live-activities). + +### [Adding interactivity](https://developer.apple.com/design/human-interface-guidelines/widgets#Adding-interactivity) + +People tap or click a widget to launch its corresponding app. It can also include buttons and toggles to offer additional functionality without launching the app. For example, the Reminders widget includes toggles to mark a task as completed. When people interact with your widget in areas that aren’t buttons or toggles, the interaction launches your app. + +![An image of the large Reminders widget with a toggle for each task. None of the tasks is complete.](https://docs-assets.developer.apple.com/published/71a7227a45af08e53dccfcc4b9d9ffe4/widgets-reminders-large-unselected%402x.png)Incomplete tasks + +![An image of the large Reminders widget with a toggle for each task. The toggles for the first and third items in the list indicate that these tasks are complete.](https://docs-assets.developer.apple.com/published/6d2286d6fb3ded274a98ce9c2108f59f/widgets-reminders-large-selected%402x.png)Completed tasks + +**Offer simple, relevant functionality and reserve complexity for your app.** Useful widgets offer an easy way to complete a task or action that’s directly related to its content. + +**Ensure that a widget interaction opens your app at the right location.** Deep link to details and actions that directly relate to the widget’s content, and don’t make people navigate to the relevant area in the app. For example, when people click or tap a medium Stocks widget, the Stocks app opens to a page that displays information about the symbol. + +![An image of a medium Stocks watchlist widget, listing two stock market indices and one stock symbol. Each row displays the index or symbol name on the left, a graph section in the middle, and a current quote, including a value change, on the right.](https://docs-assets.developer.apple.com/published/bfe482d5903ff332d0027450f18a6a43/widgets-stocks-medium%402x.png) + +**Offer interactivity while remaining glanceable and uncluttered.** Multiple interaction targets — SwiftUI links, buttons, and toggles — might make sense for your content, but avoid creating app-like layouts in your widgets. Pay attention to the size of targets and make sure people can tap or click them with confidence and without accidentally performing unintended interactions. Note that inline accessory widgets offer only one tap target. + +### [Choosing margins and padding](https://developer.apple.com/design/human-interface-guidelines/widgets#Choosing-margins-and-padding) + +Widgets scale to adapt to the screen sizes of different devices and onscreen areas. Supply content at appropriate sizes to make sure that your widget looks great on every device and let the system resize or scale it as necessary. In iOS, the system ensures that your widget looks good on small devices by resizing the content you design for large devices. In iPadOS, the system renders your widget at a large size before scaling it down for display on the Home Screen. + +As you design for various devices and scale factors, use the values listed in [Specifications](https://developer.apple.com/design/human-interface-guidelines/widgets#Specifications) and the [Apple Design Resources](https://developer.apple.com/design/resources/) for guidance; for your production widget, use [SwiftUI](https://developer.apple.com/documentation/SwiftUI) to ensure flexibility. + +**In general, use standard margins to ensure legibility.** Use the standard margin width for widgets — 16 points for most widgets — to avoid crowding their edges and creating a cluttered appearance. If you need to use tighter margins — for example, to create content groupings for graphics, buttons, or background shapes — setting margins of 11 points can work well. Additionally, note that widgets use smaller margins on the desktop on Mac and on the Lock Screen, including in StandBy. For developer guidance, see [`padding(_:_:)`](https://developer.apple.com/documentation/SwiftUI/View/padding\(_:_:\)). + +**Coordinate the corner radius of your content with the corner radius of the widget.** To ensure that your content looks good within a widget’s rounded corners, use a SwiftUI container to apply the correct corner radius. For developer guidance, see [`ContainerRelativeShape`](https://developer.apple.com/documentation/SwiftUI/ContainerRelativeShape). + +### [Displaying text in widgets](https://developer.apple.com/design/human-interface-guidelines/widgets#Displaying-text-in-widgets) + +**Prefer using the system font, text styles, and SF Symbols.** Using the system font helps your widget look at home on any platform, while making it easier for you to display great-looking text in a variety of weights, styles, and sizes. Use SF Symbols to align and scale symbols with text that uses the system font. If you use a custom font, do so sparingly, and be sure it’s easy for people to read at a glance. It often works well to use a custom font for the large text in a widget and SF Pro for the smaller text. For guidance, see [Typography](https://developer.apple.com/design/human-interface-guidelines/typography) and [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols). + +**Avoid very small font sizes.** In general, display text using fonts at 11 points or larger. Text in a font that’s smaller than 11 points can be too hard for many people to read. + +**Avoid rasterizing text.** Always use text elements and styles to ensure that your text scales well and to allow VoiceOver to speak your content. + +Note + +In iOS, iPadOS, and visionOS, widgets support Dynamic Type sizes from Large to AX5 when you use [`Font`](https://developer.apple.com/documentation/SwiftUI/Font) to choose a system font or [`custom(_:size:)`](https://developer.apple.com/documentation/SwiftUI/Font/custom\(_:size:\)) to choose a custom font. For more information about Dynamic Type sizes, see [Supporting Dynamic Type](https://developer.apple.com/design/human-interface-guidelines/typography#Supporting-Dynamic-Type). + +### [Using color](https://developer.apple.com/design/human-interface-guidelines/widgets#Using-color) + +**Use color to enhance a widget’s appearance without competing with its content.** Beautiful colors draw the eye, but they’re best when they don’t prevent people from absorbing a widget’s information at a glance. In your asset catalog, you can also specify the colors you want the system to use as it generates your widget’s editing-mode user interface. + +**Convey meaning without relying on specific colors to represent information.** Widgets can appear monochromatic (with or without a custom tint color), and in watchOS, the system may invert colors depending on the watch face a person chooses. Use text and iconography in addition to color to express meaning. + +**Use full-color images judiciously.** When a person chooses a tinted or clear appearance for their widgets, the system by default desaturates full-color images. You can choose to render images in full-color, even when a person chooses a tinted or clear widget appearance. However, full-color images in these appearances draw special attention to the widget, which might make it feel as if the widget doesn’t belong to the platform. For example, a full-color image in a widget might appear out of place when a person chooses a clear widget appearance. Consider reserving full-color images to represent media content, such as album art for a music app’s widget, and use full-color images with smaller dimensions than the size of the widget. + +## [Rendering modes](https://developer.apple.com/design/human-interface-guidelines/widgets#Rendering-modes) + +### [Full-color](https://developer.apple.com/design/human-interface-guidelines/widgets#Full-color) + +**Support light and dark appearances.** Prefer light backgrounds for the light appearance and dark backgrounds for the dark appearance, and consider using the semantic system colors for text and backgrounds to let the colors dynamically adapt to the current appearance. You can also support different appearances by putting color variants in your asset catalog. For guidance, see [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode); for developer guidance, see [Asset management](https://developer.apple.com/documentation/Xcode/asset-management) and [Supporting Dark Mode in your interface](https://developer.apple.com/documentation/UIKit/supporting-dark-mode-in-your-interface). + +![An image of the small Notes widget. Below the yellow bar that contains the app icon and name, the widget displays a single note in black text on a white background.](https://docs-assets.developer.apple.com/published/fe8bbb296cb8ad12a123b95562d7c1f5/widgets-notes-light-appearance%402x.png) + +![An image of the small Notes widget. Below the yellow bar that contains the app icon and name, the widget displays a single note in white text on a black background.](https://docs-assets.developer.apple.com/published/3e2a0cd6e7b33ef2ea47970a271330fb/widgets-notes-dark-appearance%402x.png) + +### [Accented](https://developer.apple.com/design/human-interface-guidelines/widgets#Accented) + +**Group widget components into an accented and a primary group.** The accented rendering mode divides the widget’s view hierarchy into an accent group and a primary group. On iPhone, iPad, and Mac, the system tints primary and accented content white. On Apple Watch, the system tints primary content white and accented content in the color of the watch face. + +For developer guidance, see [`widgetAccentable(_:)`](https://developer.apple.com/documentation/SwiftUI/View/widgetAccentable\(_:\)) and [Optimizing your widget for accented rendering mode and Liquid Glass](https://developer.apple.com/documentation/WidgetKit/optimizing-your-widget-for-accented-rendering-mode-and-liquid-glass). + +### [Vibrant](https://developer.apple.com/design/human-interface-guidelines/widgets#Vibrant) + +**Offer enough contrast to ensure legibility.** In the vibrant rendering mode, the opacity of pixels within an image determines the strength of the blurred background material effect. Fully transparent pixels let the background material pass through as is. The brightness of pixels determines how vibrant they appear on the Lock Screen. Brighter gray values provide more contrast, and darker values provide less contrast. + +**Create optimized assets for the best vibrant effect.** Render content like images, numbers, and text at full opacity. Use white or light gray for the most prominent content and darker grayscale values for secondary elements to establish hierarchy. Confirm that image content has sufficient contrast in grayscale, and use opaque grayscale values, rather than opacities of white, to achieve the best vibrant material effect. + +## [Previews and placeholders](https://developer.apple.com/design/human-interface-guidelines/widgets#Previews-and-placeholders) + +**Design a realistic preview to display in the widget gallery.** Highlighting your widget’s capabilities — and clearly representing the experiences each widget type or size can provide — helps people make an informed decision. You can display real data in your widget preview, but if the data takes too long to generate or load, display realistic simulated data instead. + +**Design placeholder content that helps people recognize your widget.** An installed widget displays placeholder content while its data loads. Create an effective placeholder appearance by combining static interface components with semi-opaque shapes that stand in for dynamic content. For example, use rectangles of different widths to suggest lines of text, and circles or squares in place of glyphs and images. + +![An image of a small Tips widget that displays placeholder content on top of a yellow background. In the bottom half of the widget, three horizontal bars in different shades of yellow represent lines of text.](https://docs-assets.developer.apple.com/published/9f4ce7356e15184d0183af0e5effa04a/widgets-tips-placeholder-content%402x.png) + +![An image of a small Tips widget that displays actual data on top of a yellow background. The horizontal bars in the placeholder widget are replaced by three short lines of text in different shades of yellow.](https://docs-assets.developer.apple.com/published/aa5e504f019f5558fa61813932709755/widgets-tips-full-content%402x.png) + +**Write a succinct widget description.** The widget gallery displays descriptions that help people understand what each widget does. Begin a description with an action verb — for example, “See the current weather conditions and forecast for a location” or “Keep track of your upcoming events and meetings.” Avoid including unnecessary phrases that reference the widget itself, like “This widget shows…,” “Use this widget to…,” or “Add this widget.” Use approachable language and [sentence-style capitalization](https://support.apple.com/guide/applestyleguide/c-apsgb744e4a3/web#apdca93e113f1d64). + +**Group your widget’s sizes together, and provide a single description.** If your widget is available in multiple sizes, group them together so people don’t think each size is a different widget. Provide a single description of your widget — regardless of how many sizes you offer — to avoid repetition and to help people understand how each size provides a slightly different perspective on the same content and functionality. + +**Consider coloring the Add button.** After people choose your app in the widget gallery, an Add button appears below the group of widgets you offer. You can specify a color for this button to help remind people of your brand. + +![An illustration that represents the widget gallery open to the small widget for the Notes app. Below the widget is a page control showing that this is the first page of six; below the page control is a button that uses the Notes app's yellow accent color.](https://docs-assets.developer.apple.com/published/38cf8810029187a42a6873242a7a1571/widgets-add-button-tint-color-notes%402x.png) + +![An illustration that represents the widget gallery open to the small widget for the Weather app. Below the widget is a page control showing that this is the first page of six; below the page control is a button that uses the Weather app's blue accent color.](https://docs-assets.developer.apple.com/published/c1a2eced9508911b18e05bee9d3d107e/widgets-add-button-tint-color-weather%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/widgets#Platform-considerations) + + _No additional considerations for macOS. Not supported in tvOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/widgets#iOS-iPadOS) + +Widgets on the Lock Screen are functionally similar to watch complications and follow design principles for [Complications](https://developer.apple.com/design/human-interface-guidelines/complications) in addition to design principles for widgets. Provide useful information in your Lock Screen widget, and don’t treat it only as an additional way for people to launch into your app. In many cases, a design for complications also works well for widgets on the Lock Screen (and vice versa), so consider creating them in tandem. + +Your app can offer widgets on the Lock Screen in three different shapes: as inline text that appears above the clock, and as circular and rectangular shapes that appear below the clock. + +![A partial screenshot of the Lock Screen on iPhone that shows a Calendar widget and two Weather widgets below the time. From the left, the widgets are an inline text widget and two circular widgets.](https://docs-assets.developer.apple.com/published/685e1b1e81cd591a59e63f4b1ae3bde4/widget-lock-screen-display-appearances%402x.png) + +**Support the Always-On display on iPhone.** Devices with the Always-On display render widgets on the Lock Screen with reduced luminance. Use levels of gray that provide enough contrast in the Always-On display, and make sure your content remains legible. + +For developer guidance, see [Creating accessory widgets and watch complications](https://developer.apple.com/documentation/WidgetKit/Creating-accessory-widgets-and-watch-complications). + +**Offer Live Activities to show real-time updates.** Widgets don’t show real-time information. If your app allows people to track the progress of a task or event for a limited amount of time with frequent updates, consider offering Live Activities. Widgets and Live Activities use the same underlying frameworks and share design similarities. As a result, it can be a good idea to develop widgets and Live Activities in tandem and reuse code and design components for both features. For design guidance on Live Activities, see [Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities); for developer guidance, see [ActivityKit](https://developer.apple.com/documentation/ActivityKit). + +#### [StandBy and CarPlay](https://developer.apple.com/design/human-interface-guidelines/widgets#StandBy-and-CarPlay) + +On iPhone in StandBy, the system displays two small system family widgets side-by-side, scaled up so they fill the Lock Screen. By supporting StandBy, you also ensure your widgets work well in CarPlay. CarPlay and StandBy widgets both use the small system family widget with the background removed and scaled up to best fit the grid on the Widgets screen. Glanceable information and large text are especially important in CarPlay to make your widget easy to read on a car’s display. + +**Limit usage of rich images or color to convey meaning in StandBy.** Instead, make use of the additional space by scaling up and rearranging text so people can glance at the widget content from a greater distance. To seamlessly blend with the black background, don’t use background colors for your widget when it appears in StandBy. + + * Correct usage + * Incorrect usage + + + +![An image of iPhone in StandBy. It shows a Clock widget on the left that displays the time as 9:41 a.m. and a Weather widget set to Cupertino with the temperature at 70 degrees Fahrenheit on the right.](https://docs-assets.developer.apple.com/published/50672d631597de47734d331e2acfc4d7/widgets-standby-removed-background-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An image of iPhone in StandBy. It shows a Clock widget on the left that displays the time as 9:41 a.m. and a Weather widget set to Cupertino with the temperature at 70 degrees Fahrenheit on the right. The Watch widget appears with the background removed and the Weather widget isn't optimized for StandBy.](https://docs-assets.developer.apple.com/published/853c1452b137d14fde7385a83cd1238e/widgets-standby-with-background-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +For developer guidance, see [Displaying the right widget background](https://developer.apple.com/documentation/WidgetKit/Displaying-the-right-widget-background). + +On iPhone in StandBy in low-light conditions, the system renders widgets in a monochromatic look with a red tint. + +![An image of iPhone in low-light conditions. It shows a Clock widget on the left that displays the time as 9:41 a.m. and a Weather widget set to Cupertino with the temperature at 70 degrees Fahrenheit on the right.](https://docs-assets.developer.apple.com/published/52d35d40b1ddb2272b2d9abed4354afb/widgets-standby-low-light%402x.png) + +iPhone in low-light conditions + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/widgets#visionOS) + +Widgets in visionOS are 3D objects that people place on a horizontal or vertical surface. When a person places a widget on a surface, the widget persists in that location even when the person turns Apple Vision Pro off and back on. Widgets have a consistent, real-world scale. Their size, _mounting style_ , and _treatment style_ impact how a person perceives them. + +visionOS widgets appear in full-color by default, but they appear in the accented rendering mode when people personalize them with tint colors using a range of system-provided color palettes. Additionally, people can customize the frame width of widgets that use the elevated mounting style, and custom options that are unique to the widget. For example, visionOS doesn’t provide systemwide light or dark appearances. However, the Music poster widget offers its own customization option that lets people choose between a light and a dark theme that the app generates from the displayed album art. + +For developer guidance, see [Updating your widgets for visionOS](https://developer.apple.com/documentation/WidgetKit/Updating-your-widgets-for-visionOS). + +**Adapt your design and content for the spatial experience Apple Vision Pro provides.** In visionOS, widgets don’t float in isolation but are part of living rooms, kitchens, offices, and more. Consider this context early and think of widgets as part of someone’s surroundings when you bring your existing widgets to visionOS or design them from scratch. For example, the Music widget adapts to a poster-like appearance that’s glanceable across the room with large typography and a high-resolution image, and a productivity app might offer a small widget that easily fits on a desk. + +**Test your widgets across the full range of system color palettes and in different lighting conditions.** Make sure your widget’s tone, contrast, and legibility remain consistent and intentional. If you choose to exclude UI elements from tinting, test your widget in every provided tint color palette to make sure the untinted elements remain legible when a person customizes their widgets with tint colors. + +#### [Thresholds and sizes](https://developer.apple.com/design/human-interface-guidelines/widgets#Thresholds-and-sizes) + +Widgets on Apple Vision Pro can adapt based on a person’s proximity, and visionOS provides widgets with two key thresholds to design for: the [`simplified`](https://developer.apple.com/documentation/WidgetKit/LevelOfDetail/simplified) threshold for when a person views a widget at a distance, and the [`default`](https://developer.apple.com/documentation/WidgetKit/LevelOfDetail/default) threshold when a person views it nearby. + +![A placeholder image showing a widget viewed from a distance in visionOS.](https://docs-assets.developer.apple.com/published/0ab3137bf116e4640762c25ac6139f93/widgets-extra-large-portrait-far-proximity%402x.png)Viewed from a distance + +![A placeholder image showing a widget viewed from nearby in visionOS.](https://docs-assets.developer.apple.com/published/c3f6fbe96de6d0b9524ad7f2001755a6/widgets-extra-large-portrait-close-proximity%402x.png)Viewed from nearby + +Because widgets can appear throughout a person’s environment, it’s also important to match a widget’s size to the type of content it contains, and to be aware of how it appears at a variety of distances. + +**Design a responsive layout that shows the right level of detail for each of the two thresholds.** When a person views the widget at a distance, display a simplified version of your widget that shows fewer details and has a larger type size, and remove interactive elements like buttons or toggles. When a person views the widget from nearby, show more details and use a smaller type size. To create a smooth and consistent experience and help your layout feel continuous, maintain shared elements across both distance thresholds. + +**Offer widget family sizes that fit a person’s surroundings well.** Widgets map to real-world dimensions and have a permanent presence in a person’s spatial environment. Think about where people might place your widget — mounted to a wall, placed on a sideboard, or sitting next to a workplace — and choose a widget family size that’s right for that context. For example, offer a small system widget with content that people might place on a desk or an extra large widget to let people decorate their surroundings with something visually rich, like artwork or photography. + +**Display content in a way that remains legible from a range of distances.** To make a widget feel intentional and proportionate to where they place it, people can scale a widget from 75 to 125 percent in size. Use print design principles like clear hierarchy, strong typography, and scale to make sure your content remains glanceable. Include high-resolution assets that look good scaled up to every size. + +#### [Mounting styles](https://developer.apple.com/design/human-interface-guidelines/widgets#Mounting-styles) + +The way a widget appears on a surface plays a big role in how a person perceives it. To make it feel intentional and integrated into their surroundings, people place a widget on surfaces in distinct mounting styles. + + * **[Elevated](https://developer.apple.com/documentation/WidgetKit/WidgetMountingStyle/elevated) style**. On horizontal surfaces — for example, on a desk — the widget always appears elevated and gently tilts backward, providing a subtle angle that improves readability, and casts a soft shadow that helps it feel grounded on the surface. On vertical surfaces — for example, on a wall — the widget either appears elevated, sitting flush on the surface and similar to how you mount a picture frame. + + * **[Recessed](https://developer.apple.com/documentation/WidgetKit/WidgetMountingStyle/recessed) style**. On vertical surfaces — for example, on a wall — the widget can appear recessed, with content set back into the surface, creating a depth effect that gives the illusion of a cutout in the surface. Horizontal surfaces don’t use the recessed mounting style. + + + + +By default, widgets use the elevated mounting style, because it works for horizontal and vertical surfaces. + +**Choose the mounting style that fits your content and the experience you want to create.** By default, visionOS widgets use the elevated mounting style, which is ideal for content that you want to stand out and feel present, like reminders, media, or glanceable data. Recessed widgets are ideal for immersive or ambient content, like weather or editorial content, and people can only place them on a vertical surface. If a style doesn’t suit your widget, you can opt out of it for each widget. If you choose to only support the recessed mounting style, people can’t place the widget on a horizontal surface. For example, a weather app might only support the recessed mounting style to give the illusion of looking out of a window for its large and extra-large system family widgets, and only support the elevated style for its small system family widget. + +Developer note + +Use the [`supportedMountingStyles(_:)`](https://developer.apple.com/documentation/SwiftUI/WidgetConfiguration/supportedMountingStyles\(_:\)) property of your [`WidgetConfiguration`](https://developer.apple.com/documentation/SwiftUI/WidgetConfiguration) to declare supported mounting styles — elevated, recessed, or both — for all widgets included in the configuration. To offer a widget that only supports one mounting style and other widgets that support both mounting styles, create separate widget configurations. For example, create one widget configuration for the widget that only supports the recessed mounting style, and a second configuration for the widgets that support both mounting styles. + +**Test your elevated widget designs with each system-provided frame width.** People can choose from different system-defined frame widths for widgets that use the elevated mounting style. You can’t change your layout based on the frame width a person chooses, so make sure your widget layout stays visually balanced for each frame width. + +#### [Treatment styles](https://developer.apple.com/design/human-interface-guidelines/widgets#Treatment-styles) + +In addition to size and mounting style, the system applies one of two treatment styles to visionOS widgets. Choosing the right treatment for your widget helps reinforce the experience you want to create. + + * The [`paper`](https://developer.apple.com/documentation/WidgetKit/WidgetTexture/paper) style creates a more grounded, print-like style that feels solid and makes the widget feel like part of its surroundings. When lighting conditions change, widgets in the paper style become darker or lighter in response. + + * The [`glass`](https://developer.apple.com/documentation/WidgetKit/WidgetTexture/glass) style creates a lighter, layered look that adds depth and visual separation between foreground and background elements to emphasize clarity and contrast. The foreground elements always stay bright and legible, and don’t dim or brighten, even as ambient light changes. + + + + +**Choose the paper style for a print-like look that feels more like a real object in the room.** The entire widget responds to the ambient lighting and blends naturally into its surroundings. For example, the Music poster widget uses the paper style to display albums and playlists like framed artwork on a wall. + +**Choose the glass style for information-rich widgets.** Glass visually separates foreground and background elements, allowing you to decide which parts of your interface adapt to the surroundings and which stay visually consistent. Foreground elements appear in full color, unaffected by ambient lighting, to make sure important content stays sharp and legible. For example, a News widget appears with editorial images in the background with a soft, print-like look. Its headlines stay in the foreground, crisp and easy to read. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/widgets#watchOS) + +**Provide a colorful background that conveys meaning.** By default, widgets in the Smart Stack use a black background. Consider using a custom background color that provides additional meaning. For example, the Stocks app uses a red background for falling stock values and a green background if a stock’s value rises. + +**Encourage the system to display or elevate the position of your watchOS widget in the Smart Stack.** Relevancy information helps the system show your widget when people need it most. Relevance can be location-based or specific to ongoing system actions, like a workout. For developer guidance, see [RelevanceKit](https://developer.apple.com/documentation/RelevanceKit). + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/widgets#Specifications) + +As you design your widgets, use the following values for guidance. + +### [iOS dimensions](https://developer.apple.com/design/human-interface-guidelines/widgets#iOS-dimensions) + +Screen size (portrait, pt)| Small (pt)| Medium (pt)| Large (pt)| Circular (pt)| Rectangular (pt)| Inline (pt) +---|---|---|---|---|---|--- +430×932| 170x170| 364x170| 364x382| 76x76| 172x76| 257x26 +428x926| 170x170| 364x170| 364x382| 76x76| 172x76| 257x26 +414x896| 169x169| 360x169| 360x379| 76x76| 160x72| 248x26 +414x736| 159x159| 348x157| 348x357| 76x76| 170x76| 248x26 +393x852| 158x158| 338x158| 338x354| 72x72| 160x72| 234x26 +390x844| 158x158| 338x158| 338x354| 72x72| 160x72| 234x26 +375x812| 155x155| 329x155| 329x345| 72x72| 157x72| 225x26 +375x667| 148x148| 321x148| 321x324| 68x68| 153x68| 225x26 +360x780| 155x155| 329x155| 329x345| 72x72| 157x72| 225x26 +320x568| 141x141| 292x141| 292x311| N/A| N/A| N/A + +### [iPadOS dimensions](https://developer.apple.com/design/human-interface-guidelines/widgets#iPadOS-dimensions) + +Screen size (portrait, pt)| Target| Small (pt)| Medium (pt)| Large (pt)| Extra large (pt) +---|---|---|---|---|--- +768x1024| Canvas| 141x141| 305.5x141| 305.5x305.5| 634.5x305.5 +Device| 120x120| 260x120| 260x260| 540x260 +744x1133| Canvas| 141x141| 305.5x141| 305.5x305.5| 634.5x305.5 +Device| 120x120| 260x120| 260x260| 540x260 +810x1080| Canvas| 146x146| 320.5x146| 320.5x320.5| 669x320.5 +Device| 124x124| 272x124| 272x272| 568x272 +820x1180| Canvas| 155x155| 342x155| 342x342| 715.5x342 +Device| 136x136| 300x136| 300x300| 628x300 +834x1112| Canvas| 150x150| 327.5x150| 327.5x327.5| 682x327.5 +Device| 132x132| 288x132| 288x288| 600x288 +834x1194| Canvas| 155x155| 342x155| 342x342| 715.5x342 +Device| 136x136| 300x136| 300x300| 628x300 +954x1373 *| Canvas| 162x162| 350x162| 350x350| 726x350 +Device| 162x162| 350x162| 350x350| 726x350 +970x1389 *| Canvas| 162x162| 350x162| 350x350| 726x350 +Device| 162x162| 350x162| 350x350| 726x350 +1024x1366| Canvas| 170x170| 378.5x170| 378.5x378.5| 795x378.5 +Device| 160x160| 356x160| 356x356| 748x356 +1192x1590 *| Canvas| 188x188| 412x188| 412x412| 860x412 +Device| 188x188| 412x188| 412x412| 860x412 + +* When Display Zoom is set to More Space. + +### [visionOS dimensions](https://developer.apple.com/design/human-interface-guidelines/widgets#visionOS-dimensions) + +Widget| Size in pt| Size in mm (scaled to 100%) +---|---|--- +Small| 158x158| 268x268 +Medium| 338x158| 574x268 +Large| 338x354| 574x600 +Extra large| 450x338| 763x574 +Extra large portrait| 338x450| 574x763 + +### [watchOS dimensions](https://developer.apple.com/design/human-interface-guidelines/widgets#watchOS-dimensions) + +Apple Watch size| Size of a widget in the Smart Stack (pt) +---|--- +40mm| 152x69.5 +41mm| 165x72.5 +44mm| 173x76.5 +45mm| 184x80.5 +49mm| 191x81.5 + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/widgets#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/widgets#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/widgets#Developer-documentation) + +[WidgetKit](https://developer.apple.com/documentation/WidgetKit) + +[Developing a WidgetKit strategy](https://developer.apple.com/documentation/WidgetKit/Developing-a-WidgetKit-strategy) — WidgetKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/widgets#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/126547AE-9E47-4E15-AC05-5C50AB08CBEE/9952_wide_250x141_1x.jpg) What’s new in widgets ](https://developer.apple.com/videos/play/wwdc2025/278) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/4D354E1F-5016-49F7-9296-3D3722626480/9957_wide_250x141_1x.jpg) Design widgets for visionOS ](https://developer.apple.com/videos/play/wwdc2025/255) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/5631C647-3158-42F6-A1D3-50566815A1BB/8056_wide_250x141_1x.jpg) Bring widgets to life ](https://developer.apple.com/videos/play/wwdc2023/10028) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/widgets#Change-log) + +Date| Changes +---|--- +December 16, 2025| Updated guidance for all platforms, and added guidance for visionOS and CarPlay. +January 17, 2025| Corrected watchOS widget dimensions. +June 10, 2024| Updated to include guidance for accented widgets in iOS 18 and iPadOS 18. +June 5, 2023| Updated guidance to include widgets in watchOS, widgets on the iPad Lock Screen, and updates for iOS 17, iPadOS 17, and macOS 14. +November 3, 2022| Added guidance for widgets on the iPhone Lock Screen and updated design comprehensives for iPhone 14, iPhone 14 Pro, and iPhone 14 Pro Max. + diff --git a/skills/hig-foundations/SKILL.md b/skills/hig-foundations/SKILL.md new file mode 100644 index 00000000..fff4c514 --- /dev/null +++ b/skills/hig-foundations/SKILL.md @@ -0,0 +1,98 @@ +--- +name: hig-foundations +version: 1.0.0 +description: > + Apple Human Interface Guidelines design foundations. Use this skill when the user asks about + "HIG color", "Apple typography", "SF Symbols", "dark mode guidelines", "accessible design", + "Apple design foundations", "app icon", "layout guidelines", "materials", "motion", "privacy", + "right to left", "RTL", "inclusive design", branding, images, spatial layout, or writing style. + Also use when the user says "my colors look wrong in dark mode", "what font should I use", + "is my app accessible enough", "how do I support Dynamic Type", "what contrast ratio do I need", + "how do I pick system colors", or "my icons don't match the system style". + Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction + patterns, hig-components-layout for structural components, hig-components-content for display. +--- + +# Apple HIG: Design Foundations + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Prioritize content over chrome.** Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds. + +2. **Build in accessibility from the start.** Design for VoiceOver, Dynamic Type, Reduce Motion, Increase Contrast, and Switch Control from day one. Every interactive element needs an accessible label. + +3. **Use system colors and materials.** System colors adapt to light/dark mode, increased contrast, and vibrancy. Prefer semantic colors (`label`, `secondaryLabel`, `systemBackground`) over hard-coded values. + +4. **Use platform fonts and icons.** SF Pro, SF Compact, SF Mono by default. New York for serif. Follow the type hierarchy at recommended sizes. Use SF Symbols for iconography. + +5. **Match platform conventions.** Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action. + +6. **Respect privacy.** Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection. + +7. **Support internationalization.** Accommodate text expansion, right-to-left scripts, and varying date/number formats. Use Auto Layout for dynamic content sizing. + +8. **Use motion purposefully.** Animation should communicate meaning and spatial relationships. Honor Reduce Motion by providing crossfade alternatives. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [accessibility.md](references/accessibility.md) | Accessibility | VoiceOver, Dynamic Type, color contrast, motor accessibility, Switch Control, audio descriptions | +| [app-icons.md](references/app-icons.md) | App Icons | Icon grid, platform-specific sizes, single focal point, no transparency | +| [branding.md](references/branding.md) | Branding | Integrating brand identity within Apple's design language, subtle branding, custom tints | +| [color.md](references/color.md) | Color | System colors, Dynamic Colors, semantic colors, custom palettes, contrast ratios | +| [dark-mode.md](references/dark-mode.md) | Dark Mode | Elevated surfaces, semantic colors, adapted palettes, vibrancy, testing in both modes | +| [icons.md](references/icons.md) | Icons | Glyph icons, SF Symbols integration, custom icon design, icon weights, optical alignment | +| [images.md](references/images.md) | Images | Image resolution, @2x/@3x assets, vector assets, image accessibility | +| [immersive-experiences.md](references/immersive-experiences.md) | Immersive Experiences | AR/VR design, spatial immersion, comfort zones, progressive immersion levels | +| [inclusion.md](references/inclusion.md) | Inclusion | Diverse representation, non-gendered language, cultural sensitivity, inclusive defaults | +| [layout.md](references/layout.md) | Layout | Margins, spacing, alignment, safe areas, adaptive layouts, readable content guides | +| [materials.md](references/materials.md) | Materials | Vibrancy, blur, translucency, system materials, material thickness | +| [motion.md](references/motion.md) | Motion | Animation curves, transitions, continuity, Reduce Motion support, physics-based motion | +| [privacy.md](references/privacy.md) | Privacy | Permission requests, usage descriptions, privacy nutrition labels, minimal data collection | +| [right-to-left.md](references/right-to-left.md) | Right-to-Left | RTL layout mirroring, bidirectional text, icons that flip, exceptions | +| [sf-symbols.md](references/sf-symbols.md) | SF Symbols | Symbol categories, rendering modes, variable color, custom symbols, weight matching | +| [spatial-layout.md](references/spatial-layout.md) | Spatial Layout | visionOS window placement, depth, ergonomic zones, Z-axis design | +| [typography.md](references/typography.md) | Typography | SF Pro, Dynamic Type sizes, text styles, custom fonts, font weight hierarchy, line spacing | +| [writing.md](references/writing.md) | Writing | UI copy guidelines, tone, capitalization rules, error messages, button labels, conciseness | + +## Applying Foundations Together + +Consider how principles interact: + +1. **Color + Dark Mode + Accessibility** -- Custom palettes must work in both modes while maintaining WCAG contrast ratios. Start with system semantic colors. + +2. **Typography + Accessibility + Layout** -- Dynamic Type must scale without breaking layouts. Use text styles and Auto Layout for the full range of type sizes. + +3. **Icons + Branding + SF Symbols** -- Custom icons should match SF Symbols weight and optical sizing. Brand elements should integrate without overriding system conventions. + +4. **Motion + Accessibility + Feedback** -- Every animation must have a Reduce Motion alternative. Motion should reinforce spatial relationships, not decorate. + +5. **Privacy + Writing + Onboarding** -- Permission requests need clear, specific usage descriptions. Time them to when the user will understand the benefit. + +## Output Format + +1. **Cite the specific HIG foundation** with file and section. +2. **Note platform differences** for the user's target platforms. +3. **Provide concrete code patterns** (SwiftUI/UIKit/AppKit). +4. **Explain accessibility impact** (contrast ratios, Dynamic Type scaling, VoiceOver behavior). + +## Questions to Ask + +1. Which platforms are you targeting? +2. Do you have existing brand guidelines? +3. What accessibility level are you targeting? (WCAG AA, AAA, Apple baseline?) +4. System colors or custom? + +## Related Skills + +- **hig-platforms** -- How foundations apply per platform (e.g., type scale differences on watchOS vs macOS) +- **hig-patterns** -- Interaction patterns where foundations like writing and accessibility are critical +- **hig-components-layout** -- Structural components implementing layout principles +- **hig-components-content** -- Content display using color, typography, and images + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-foundations/references/accessibility.md b/skills/hig-foundations/references/accessibility.md new file mode 100644 index 00000000..11d9a347 --- /dev/null +++ b/skills/hig-foundations/references/accessibility.md @@ -0,0 +1,291 @@ +--- +title: "Accessibility | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/accessibility + +# Accessibility + +Accessible user interfaces empower everyone to have a great experience with your app or game. + +![A sketch of the Accessibility icon. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/f7e408b21d156daa60c2e30c0bcff9e5/foundations-accessibility-intro%402x.png) + +When you design for accessibility, you reach a larger audience and create a more inclusive experience. An accessible interface allows people to experience your app or game regardless of their capabilities or how they use their devices. Accessibility makes information and interactions available to everyone. An accessible interface is: + + * **Intuitive.** Your interface uses familiar and consistent interactions that make tasks straightforward to perform. + + * **Perceivable.** Your interface doesn’t rely on any single method to convey information. People can access and interact with your content, whether they use sight, hearing, speech, or touch. + + * **Adaptable.** Your interface adapts to how people want to use their device, whether by supporting system accessibility features or letting people personalize settings. + + + + +As you design your app, audit the accessibility of your interface. Use [Accessibility Inspector](https://developer.apple.com/documentation/Accessibility/accessibility-inspector) to highlight accessibility issues with your interface and to understand how your app represents itself to people using system accessibility features. You can also communicate how accessible your app is on the App Store using Accessibility Nutrition Labels. To learn more about how to evaluate and indicate accessibility feature support, see [Accessibility Nutrition Labels](https://developer.apple.com/help/app-store-connect/manage-app-accessibility/overview-of-accessibility-nutrition-labels) in App Store Connect help. + +## [Vision](https://developer.apple.com/design/human-interface-guidelines/accessibility#Vision) + +![An illustration containing five symbols associated with the topic of vision, including symbols representing text size, magnification, VoiceOver, and spoken dialogue.](https://docs-assets.developer.apple.com/published/bedd6018a62492eff46566493335ebe7/accessibility-vision-section-hero%402x.png) + +The people who use your interface may be blind, color blind, or have low vision or light sensitivity. They may also be in situations where lighting conditions and screen brightness affect their ability to interact with your interface. + +**Support larger text sizes.** Make sure people can adjust the size of your text or icons to make them more legible, visible, and comfortable to read. Ideally, give people the option to enlarge text by at least 200 percent (or 140 percent in watchOS apps). Your interface can support font size enlargement either through custom UI, or by adopting Dynamic Type. Dynamic Type is a systemwide setting that lets people adjust the size of text for comfort and legibility. For more guidance, see [Supporting Dynamic Type](https://developer.apple.com/design/human-interface-guidelines/typography#Supporting-Dynamic-Type). + +**Use recommended defaults for custom type sizes.** Each platform has different default and minimum sizes for system-defined type styles to promote readability. If you’re using custom type styles, follow the recommended defaults. + +Platform| Default size| Minimum size +---|---|--- +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 + +**Bear in mind that font weight can also impact how easy text is to read.** If you’re using a custom font with a thin weight, aim for larger than the recommended sizes to increase legibility. For more guidance, see [Typography](https://developer.apple.com/design/human-interface-guidelines/typography). + +![An illustration of a rectangular view containing the word 'Hello,' formatted bold, at a small font size.](https://docs-assets.developer.apple.com/published/b8366a96b31af036b2414243d299b011/accessibility-font-weight-small-bold%402x.png)Thicker weights are easier to read for smaller font sizes. + +![An illustration of a rectangular view containing the word 'Hello,' formatted thin, at a large font size.](https://docs-assets.developer.apple.com/published/1f164f6ff2cb994f3852340272a3df90/accessibility-font-weight-large-thin%402x.png)Consider increasing the font size when using a thin weight. + +**Strive to meet color contrast minimum standards.** To ensure all information in your app is legible, it’s important that there’s enough contrast between foreground text and icons and background colors. Two popular standards of measure for color contrast are the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) and the Accessible Perceptual Contrast Algorithm (APCA). Use standard contrast calculators to ensure your UI meets acceptable levels. [Accessibility Inspector](https://developer.apple.com/documentation/Accessibility/accessibility-inspector) uses the following values from WCAG Level AA as guidance in determining whether your app’s colors have an acceptable contrast. + +Text size| Text weight| Minimum contrast ratio +---|---|--- +Up to 17 pts| All| 4.5:1 +18 pts| All| 3:1 +All| Bold| 3:1 + +If your app doesn’t provide this minimum contrast by default, ensure it at least provides a higher contrast color scheme when the system setting Increase Contrast is turned on. If your app supports [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode), make sure to check the minimum contrast in both light and dark appearances. + +![An illustration of a button that has insufficient contrast between the button's title and background.](https://docs-assets.developer.apple.com/published/7da7a46683e0b9063fb1c9db6ab59bd9/accessibilty-button-poor-color-contrast%402x.png)A button with insufficient color contrast + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a button that has sufficient contrast between the button's title and background.](https://docs-assets.developer.apple.com/published/7e5df7edfe62df057eef743f9a449040/accessibilty-button-good-color-contrast%402x.png)A button with sufficient color contrast + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Prefer system-defined colors.** These colors have their own accessible variants that automatically adapt when people adjust their color preferences, such as enabling Increase Contrast or toggling between the light and dark appearances. For guidance, see [Color](https://developer.apple.com/design/human-interface-guidelines/color). + +![An illustration demonstrating how the system-defined color red appears above a light and dark background. In the illustration, a circle is positioned above a rounded rectangle. The left side of the rounded rectangle is light in color, and the right side is dark. The left side of the circle is slightly darker than the right side.](https://docs-assets.developer.apple.com/published/9fec337c567366d81319e2daf38b6a8a/accessibility-system-red-ios-default%402x.png)The `systemRed` default color in iOS + +![An illustration demonstrating how the system-defined accessibility-specific color red appears above a light and dark background. In the illustration, a circle is positioned above a rounded rectangle. The left side of the rounded rectangle is light in color, and the right side is dark. The left side of the circle is considerably darker than the right side.](https://docs-assets.developer.apple.com/published/9e1e71f5dff34acee2faaff88ac135a0/accessibility-system-red-ios-accessible%402x.png)The `systemRed` accessible color in iOS + +**Convey information with more than color alone.** Some people have trouble differentiating between certain colors and shades. For example, people who are color blind may have particular difficulty with pairings such as red-green and blue-orange. Offer visual indicators, like distinct shapes or icons, in addition to color to help people perceive differences in function and changes in state. Consider allowing people to customize color schemes such as chart colors or game characters so they can personalize your interface in a way that’s comfortable for them. + +![An illustration of a green circle to the left of a red circle.](https://docs-assets.developer.apple.com/published/5d62d6f6c6ff1563d80847b3b29e2125/accessibility-differentiate-with-shapes-incorrect%402x.png)For someone with red-green color blindness, these indicators might appear the same. + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a green circle containing a checkmark to the left of a red octagon containing an X.](https://docs-assets.developer.apple.com/published/e13c9c34a780c2d2ab0e614f55a3e73e/accessibility-differentiate-with-shapes-correct%402x.png)Both visual indicators and color help differentiate between indicators. + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Describe your app’s interface and content for VoiceOver.** VoiceOver is a screen reader that lets people experience your app’s interface without needing to see the screen. For more guidance, see [VoiceOver](https://developer.apple.com/design/human-interface-guidelines/voiceover). + +## [Hearing](https://developer.apple.com/design/human-interface-guidelines/accessibility#Hearing) + +![An illustration containing five symbols associated with the topic of hearing, including symbols representing sound, waveforms, and closed captioning.](https://docs-assets.developer.apple.com/published/eef3040be22f7aa6b10dc45b2918f9f8/accessibility-hearing-section-hero%402x.png) + +The people who use your interface may be deaf or hard of hearing. They may also be in noisy or public environments. + +**Support text-based ways to enjoy audio and video.** It’s important that dialogue and crucial information about your app or game isn’t communicated through audio alone. Depending on the context, give people different text-based ways to experience their media, and allow people to customize the visual presentation of that text: + + * **Captions** give people the textual equivalent of audible information in video or audio-only content. Captions are great for scenarios like game cutscenes and video clips where text synchronizes live with the media. + + * **Subtitles** allow people to read live onscreen dialogue in their preferred language. Subtitles are great for TV shows and movies. + + * **Audio descriptions** are interspersed between natural pauses in the main audio of a video and supply spoken narration of important information that’s presented only visually. + + * **Transcripts** provide a complete textual description of a video, covering both audible and visual information. Transcripts are great for longer-form media like podcasts and audiobooks where people may want to review content as a whole or highlight the transcript as media is playing. + + + + +For developer guidance, see [Selecting subtitles and alternative audio tracks](https://developer.apple.com/documentation/AVFoundation/selecting-subtitles-and-alternative-audio-tracks). + +**Use haptics in addition to audio cues.** If your interface conveys information through audio cues — such as a success chime, error sound, or game feedback — consider pairing that sound with matching haptics for people who can’t perceive the audio or have their audio turned off. In iOS and iPadOS, you can also use [Music Haptics](https://developer.apple.com/documentation/MediaAccessibility/music-haptics) and [Audio graphs](https://developer.apple.com/documentation/Accessibility/audio-graphs) to let people experience music and infographics through vibration and texture. For guidance, see [Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics). + +![An illustration of an iPhone device vibrating as music plays from the device.](https://docs-assets.developer.apple.com/published/1bf9d6ae5c3586a5163ce6abf0cabb95/accessibility-haptic-audio-combo%402x.png) + +**Augment audio cues with visual cues.** This is especially important for games and spatial apps where important content might be taking place off screen. When using audio to guide people towards a specific action, also add in visual indicators that point to where you want people to interact. + +## [Mobility](https://developer.apple.com/design/human-interface-guidelines/accessibility#Mobility) + +![An illustration containing five symbols associated with the topic of mobility, including symbols representing the keyboard, movement, and touch.](https://docs-assets.developer.apple.com/published/f8e9d74dc994111ba0ee7fa436fc2fc1/accessibility-mobility-section-hero%402x.png) + +Ensure your interface offers a comfortable experience for people with limited dexterity or mobility. + +**Offer sufficiently sized controls.** Controls that are too small are hard for many people to interact with and select. Strive to meet the recommended minimum control size for each platform to ensure controls and menus are comfortable for all when tapping and clicking. + +Platform| Default control size| Minimum control size +---|---|--- +iOS, iPadOS| 44x44 pt| 28x28 pt +macOS| 28x28 pt| 20x20 pt +tvOS| 66x66 pt| 56x56 pt +visionOS| 60x60 pt| 28x28 pt +watchOS| 44x44 pt| 28x28 pt + +**Consider spacing between controls as important as size.** Include enough padding between elements to reduce the chance that someone taps the wrong control. In general, it works well to add about 12 points of padding around elements that include a bezel. For elements without a bezel, about 24 points of padding works well around the element’s visible edges. + +![An illustration showing three buttons: rewind, play, and fast forward. The buttons have insufficient padding between them.](https://docs-assets.developer.apple.com/published/4148fe218b3f50b66d64eeda288de5be/accessibility-controls-spacing-incorrect%402x.png)Elements with insufficient padding + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration showing three buttons: rewind, play, and fast forward. The buttons are spaced apart, with sufficient padding between them.](https://docs-assets.developer.apple.com/published/98bc500a0a2cf15620b972de1fcce3b3/accessibility-controls-spacing-correct%402x.png)Elements with sufficient padding + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Support simple gestures for common interactions.** For many people, with or without disabilities, complex gestures can be challenging. For interactions people do frequently in your app or game, use the simplest gesture possible — avoid custom multifinger and multihand gestures — so repetitive actions are both comfortable and easy to remember. + +**Offer alternatives to gestures.** Make sure your UI’s core functionality is accessible through more than one type of physical interaction. Gestures can be less comfortable for people who have limited dexterity, so offer onscreen ways to achieve the same outcome. For example, if you use a swipe gesture to dismiss a view, also make a button available so people can tap or use an assistive device. + +![An illustration of a table view in edit mode. The rows of the table include delete buttons.](https://docs-assets.developer.apple.com/published/fa893cee3fa5c70e99dfefa85c0c390a/accessibility-tap-to-delete%402x.png)Edit and tap to delete + +![An illustration of a table view. One of the rows in the table is swiped to the left to reveal a delete button.](https://docs-assets.developer.apple.com/published/f6eb08c3c3a75f5b1b337b4813b4e95e/accessibility-swipe-to-delete%402x.png)Swipe to delete + +**Let people use Voice Control to give guidance and enter information verbally.** With Voice Control, people can interact with their devices entirely by speaking commands. They can perform gestures, interact with screen elements, dictate and edit text, and more. To ensure a smooth experience, label interface elements appropriately. For developer guidance, see [Voice Control](https://developer.apple.com/documentation/Accessibility/voice-control). + +**Integrate with Siri and Shortcuts to let people perform tasks using voice alone.** When your app supports Siri and Shortcuts, people can automate the important and repetitive tasks they perform regularly. They can initiate these tasks from Siri, the Action button on their iPhone or Apple Watch, and shortcuts on their Home Screen or in Control Center. For guidance, see [Siri](https://developer.apple.com/design/human-interface-guidelines/siri). + +**Support mobility-related assistive technologies.** Features like [VoiceOver](https://developer.apple.com/design/human-interface-guidelines/voiceover), AssistiveTouch, Full Keyboard Access, Pointer Control, and [Switch Control](https://developer.apple.com/documentation/Accessibility/switch-control) offer alternative ways for people with low mobility to interact with their devices. Conduct testing and verify that your app or game supports these technologies, and that your interface elements are appropriately labeled to ensure a great experience. For more information, see [Performing accessibility testing for your app](https://developer.apple.com/documentation/Accessibility/performing-accessibility-testing-for-your-app). + +## [Speech](https://developer.apple.com/design/human-interface-guidelines/accessibility#Speech) + +![An illustration containing five symbols associated with the topic of speech, including symbols representing waveforms and speech.](https://docs-assets.developer.apple.com/published/62f06a887d774ec29a27ce2be6d30444/accessibility-speech-section-hero%402x.png) + +Apple’s accessibility features help people with speech disabilities and people who prefer text-based interactions to communicate effectively using their devices. + +**Let people use the keyboard alone to navigate and interact with your app.** People can turn on Full Keyboard Access to navigate apps using their physical keyboard. The system also defines accessibility keyboard shortcuts and a wide range of other [keyboard shortcuts](https://support.apple.com/en-us/102650) that many people use all the time. Avoid overriding system-defined keyboard shortcuts and evaluate your app to ensure it works well with Full Keyboard Access. For additional guidance, see [Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards). For developer guidance, see [Support Full Keyboard Access in your iOS app](https://developer.apple.com/videos/play/wwdc2021/10120). + +**Support Switch Control.** Switch Control is an assistive technology that lets people control their devices through separate hardware, game controllers, or sounds such as a click or a pop. People can perform actions like selecting, tapping, typing, and drawing when your app or game supports the ability to navigate using Switch Control. For developer guidance, see [Switch Control](https://developer.apple.com/documentation/Accessibility/switch-control). + +## [Cognitive](https://developer.apple.com/design/human-interface-guidelines/accessibility#Cognitive) + +![An illustration containing five symbols associated with the topic of cognition, including symbols representing music, security, and information hierarchy.](https://docs-assets.developer.apple.com/published/0d837305d3c06f6ba0199cf2764df3fd/accessibility-cognitive-section-hero%402x.png) + +When you minimize complexity in your app or game, all people benefit. + +**Keep actions simple and intuitive.** Ensure that people can navigate your interface using easy-to-remember and consistent interactions. Prefer system gestures and behaviors people are already familiar with over creating custom gestures people must learn and retain. + +**Minimize use of time-boxed interface elements.** Views and controls that auto-dismiss on a timer can be problematic for people who need longer to process information, and for people who use assistive technologies that require more time to traverse the interface. Prefer dismissing views with an explicit action. + +**Consider offering difficulty accommodations in games.** Everyone has their own way of playing and enjoying games. To support a variety of cognitive abilities, consider adding the ability to customize the difficulty level of your game, such as offering options for people to reduce the criteria for successfully completing a level, adjust reaction time, or enable control assistance. + +**Let people control audio and video playback.** Avoid autoplaying audio and video content without also providing controls to start and stop it. Make sure these controls are discoverable and easy to act upon, and consider global settings that let people opt out of auto-playing all audio and video. For developer guidance, see [Animated images](https://developer.apple.com/documentation/Accessibility/animated-images) and [`isVideoAutoplayEnabled`](https://developer.apple.com/documentation/UIKit/UIAccessibility/isVideoAutoplayEnabled). + +**Allow people to opt out of flashing lights in video playback.** People might want to avoid bright, frequent flashes of light in the media they consume. A Dim Flashing Lights setting allows the system to calculate, mitigate, and inform people about flashing lights in a piece of media. If your app supports video playback, ensure that it responds appropriately to the Dim Flashing Lights setting. For developer guidance, see [Flashing lights](https://developer.apple.com/documentation/MediaAccessibility/flashing-lights). + +**Be cautious with fast-moving and blinking animations.** When you use these effects in excess, it can be distracting, cause dizziness, and in some cases even result in epileptic episodes. People who are prone to these effects can turn on the Reduce Motion accessibility setting. When this setting is active, ensure your app or game responds by reducing automatic and repetitive animations, including zooming, scaling, and peripheral motion. Other best practices for reducing motion include: + + * Tightening animation springs to reduce bounce effects + + * Tracking animations directly with people’s gestures + + * Avoiding animating depth changes in z-axis layers + + * Replacing transitions in x-, y-, and z-axes with fades to avoid motion + + * Avoiding animating into and out of blurs + + + + +**Optimize your app’s UI for Assistive Access.** Assistive Access is an accessibility feature in iOS and iPadOS that allows people with cognitive disabilities to use a streamlined version of your app. Assistive Access sets a default layout and control presentation for apps that reduces cognitive load, such as the following layout of the Camera app. + +![A screenshot of the Camera app in Assistive Access, showing an interface with three large buttons: Photo, Video, and Back.](https://docs-assets.developer.apple.com/published/186637e83d4ec29d3d20a8249be8a538/accessibility-assistive-access-camera%402x.png) + +![A screenshot of the Camera app open to the photo screen in Assistive Access, showing an interface with two large buttons: Take Photo and Back.](https://docs-assets.developer.apple.com/published/c2abc07058fc2e64295271c85c5d66eb/accessibility-assistive-access-camera-photo-mode%402x.png) + +To optimize your app for this mode, use the following guidelines when Assistive Access is turned on: + + * Identify the core functionality of your app and consider removing noncritical workflows and UI elements. + + * Break up multistep workflows so people can focus on a single interaction per screen. + + * Always ask for confirmation twice whenever people perform an action that’s difficult to recover from, such a deleting a file. + + + + +For developer guidance, see [Assistive Access](https://developer.apple.com/documentation/Accessibility/assistive-access). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/accessibility#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or watchOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/accessibility#visionOS) + +visionOS offers a variety of accessibility features people can use to interact with their surroundings in ways that are comfortable and work best for them, including head and hand Pointer Control, and a Zoom feature. + + * Pointer Control (hand) + * Pointer Control (head) + * Zoom + + + +Video with custom controls. + +Content description: A recording of a person's hand using Pointer Control to interact with content in an app's visionOS window. A line with a pointer at the end extends from the person's hand. It changes position within the field of view as the person moves their hand. + +Play + +Video with custom controls. + +Content description: A recording of someone using Pointer Control to interact with content in an app's visionOS window. The person isn't visible in the recording. Only the pointer is visible. It's centered in the field of view, and the person uses their head movement to position content beneath the pointer. + +Play + +![A screenshot of an app's window in visionOS. A zoom lens is visible above a portion of the window, and displays a zoomed-in version of the content beneath the lens.](https://docs-assets.developer.apple.com/published/087dd22d68c54c95cd70008020f6dc1e/visionos-accessibility-zoom-lens%402x.png) + +**Prioritize comfort.** The immersive nature of visionOS means that interfaces, animations, and interactions have a greater chance of causing motion sickness, and visual and ergonomic discomfort for people. To ensure the most comfortable experience, consider these tips: + + * Keep interface elements within a person’s field of view. Prefer horizontal layouts to vertical ones that might cause neck strain, and avoid demanding the viewer’s attention in different locations in quick succession. + + * Reduce the speed and intensity of animated objects, particularly in someone’s peripheral vision. + + * Be gentle with camera and video motion, and avoid situations where someone may feel like the world around them is moving without their control. + + * Avoid anchoring content to the wearer’s head, which may make them feel stuck and confined, and also prevent them from using assistive technologies like Pointer Control. + + * Minimize the need for large and repetitive gestures, as these can become tiresome and may be difficult depending on a person’s surroundings. + + + + +For additional guidance, see [Create accessible spatial experiences](https://developer.apple.com/videos/play/wwdc2023/10034) and [Design considerations for vision and motion](https://developer.apple.com/videos/play/wwdc2023/10078). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/accessibility#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/accessibility#Related) + +[Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) + +[Typography](https://developer.apple.com/design/human-interface-guidelines/typography) + +[VoiceOver](https://developer.apple.com/design/human-interface-guidelines/voiceover) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/accessibility#Developer-documentation) + +[Building accessible apps](https://developer.apple.com/accessibility/) + +[Accessibility framework](https://developer.apple.com/documentation/Accessibility) + +[Overview of Accessibility Nutrition Labels](https://devcms.apple.com/help/app-store-connect/manage-app-accessibility/overview-of-accessibility-nutrition-labels) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/accessibility#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/F5AEB5B6-FF48-4201-B110-A0EDA465F3B4/9961_wide_250x141_1x.jpg) Principles of inclusive app design ](https://developer.apple.com/videos/play/wwdc2025/316) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/163752B6-501D-4816-BA92-DBF33CCF0CD2/9917_wide_250x141_1x.jpg) Evaluate your app for Accessibility Nutrition Labels ](https://developer.apple.com/videos/play/wwdc2025/224) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/52E9AD54-DB4B-4BB0-93D9-7625A2A46A74/9166_wide_250x141_1x.jpg) Catch up on accessibility in SwiftUI ](https://developer.apple.com/videos/play/wwdc2024/10073) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/accessibility#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added guidance and links for Assistive Access, Switch Control, and Accessibility Nutrition Labels. +March 7, 2025| Expanded and refined all guidance. Moved Dynamic Type guidance to the Typography page, and moved VoiceOver guidance to a new VoiceOver page. +June 10, 2024| Added a link to Apple’s Unity plug-ins for supporting Dynamic Type. +December 5, 2023| Updated visionOS Zoom lens artwork. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-foundations/references/app-icons.md b/skills/hig-foundations/references/app-icons.md new file mode 100644 index 00000000..0b4d62a4 --- /dev/null +++ b/skills/hig-foundations/references/app-icons.md @@ -0,0 +1,210 @@ +--- +title: "App icons | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/app-icons + +# App icons + +A unique, memorable icon expresses your app’s or game’s purpose and personality and helps people recognize it at a glance. + +![A sketch of the App Store icon. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/05b8bbb4aac9f98ba8c77876fe5068b7/foundations-app-icons-intro%402x.png) + +Your app icon is a crucial aspect of your app’s or game’s branding and user experience. It appears on the Home Screen and in key locations throughout the system, including search results, notifications, system settings, and share sheets. A well-designed app icon conveys your app’s or game’s identity clearly and consistently across all Apple platforms. + +![An image that shows three variations of the Photos app's app icon as it appears on different platforms. The first variation is a rounded rectangle shape, and represents the iOS, iPadOS, and macOS icons. The second variation is an elongated, rounded rectangular shape, and represents the tvOS icon. The third variation is a circular shape, and represents the visionOS and watchOS icons. All variations have the same overall design over different background shapes.](https://docs-assets.developer.apple.com/published/298204fa29c2dc771deb8651963ce75a/app-icons-platform-appearance-overview%402x.png) + +## [Layer design](https://developer.apple.com/design/human-interface-guidelines/app-icons#Layer-design) + +Although you can provide a flattened image for your icon, layers give you the most control over how your icon design is represented. A layered app icon comes together to produce a sense of depth and vitality. On each platform, the system applies visual effects that respond to the environment and people’s interactions. + +iOS, iPadOS, macOS, and watchOS app icons include a background layer and one or more foreground layers that coalesce to create dimensionality. These icons take on Liquid Glass attributes like specular highlights, frostiness, and translucency, which respond to changes in lighting and, in iOS and iPadOS, device movement. + +Video with custom controls. + +Content description: An animation of the Podcasts app icon for iOS. As the animation plays, the icon rotates to the side and expands to show how layers are separated. It then collapses and returns to its original position. + +Play + +iOS app icon + +tvOS app icons use between two and five layers to create a sense of dynamism as people bring them into focus. When focused, the app icon elevates to the foreground in response to someone’s finger movement on their remote, and gently sways while the surface illuminates. The separation between layers and the use of transparency produce a feeling of depth during the parallax effect. + +Video with custom controls. + +Content description: An animation of the Photos app icon in tvOS moving to show the parallax effect. + +Play + +tvOS app icon + +A visionOS app icon includes a background layer and one or two layers on top, producing a three-dimensional object that subtly expands when people view it. The system enhances the icon’s visual dimensionality by adding shadows that convey a sense of depth between layers and by using the alpha channel of the upper layers to create an embossed appearance. + +Video with custom controls. + +Content description: An animation of the Photos app icon in visionOS moving to show the parallax effect. + +Play + +visionOS app icon + +You use your favorite design tool to craft the individual foreground layers of your app icon. For iOS, iPadOS, macOS, and watchOS icons, you then import your icon layers into Icon Composer, a design tool included with Xcode and available from the [Apple Developer website](https://developer.apple.com/icon-composer). In Icon Composer, you define the background layer for your icon, adjust your foreground layer placement, apply visual effects like transparency, define default, dark, clear, and tinted appearance variants, and export your icon for use in Xcode. For additional guidance, see [Creating your app icon using Icon Composer](https://developer.apple.com/documentation/Xcode/creating-your-app-icon-using-icon-composer). + +![A screenshot of the Photos app icon in Icon Composer.](https://docs-assets.developer.apple.com/published/3d4f8c4c6b744e77f32802201fb48fb7/app-icons-icon-composer-overview-photos%402x.png)Icon Composer + +For tvOS and visionOS app icons, you add your icon layers directly to an image stack in Xcode to form your complete icon. For developer guidance, see [Configuring your app icon using an asset catalog](https://developer.apple.com/documentation/Xcode/configuring-your-app-icon). + +**Prefer clearly defined edges in foreground layers.** To ensure system-drawn highlights and shadows look best, avoid soft and feathered edges on foreground layer shapes. + +**Vary opacity in foreground layers to increase the sense of depth and liveliness.** For example, the Photos icon separates its centerpiece into multiple layers that contain translucent pieces, bringing greater dynamism to the design. Importing fully opaque layers and adjusting transparency in Icon Composer lets you preview and make adjustments to your design based on how transparency and system effects impact one another. + +**Design a background that both stands out and emphasizes foreground content.** Subtle top-to-bottom, light-to-dark gradients tend to respond well to system lighting effects. Icon Composer supports solid colors and gradients for background layers, making it unnecessary to import custom background images in most cases. If you do import a background layer, make sure it’s full-bleed and opaque. + +**Prefer vector graphics when bringing layers into Icon Composer.** Unlike raster images, vector graphics (such as SVG or PDF) scale gracefully and appear crisp at any size. Outline artwork and convert text to outline in your design. For mesh gradients and raster artwork, prefer PNG format because it’s a lossless image format. + +## [Icon shape](https://developer.apple.com/design/human-interface-guidelines/app-icons#Icon-shape) + +An app icon’s shape varies based on a platform’s visual language. In iOS, iPadOS, and macOS, icons are square, and the system applies masking to produce rounded corners that precisely match the curvature of other rounded interface elements throughout the system and the bezel of the physical device itself. In tvOS, icons are rectangular, also with concentric edges. In visionOS and watchOS, icons are square and the system applies circular masking. + + * iOS, iPadOS, macOS + * tvOS + * visionOS, watchOS + + + +![An image of the Settings icon for iOS. The iOS, iPadOS, and macOS icon grid is overlaid on the icon to show how the icon's shape and its elements map to the grid.](https://docs-assets.developer.apple.com/published/a116649a6bdc5124779475fcd769caac/app-icons-settings-app-grid-square%402x.png) + +![An image of the Settings icon for tvOS. The tvOS icon grid is overlaid on the icon to show how the icon's shape and its elements map to the grid.](https://docs-assets.developer.apple.com/published/770ec58a9f9985410cdff8c38b8166ab/app-icons-settings-app-grid-rectangle%402x.png) + +![An image of the Settings icon for watchOS. The visionOS and watchOS icon grid is overlaid on the icon to show how the icon's shape and its elements map to the grid.](https://docs-assets.developer.apple.com/published/2ceefd0eeb7e039a43ab05fd4a5050fb/app-icons-settings-app-grid-circle%402x.png) + +**Produce appropriately shaped, unmasked layers.** The system masks all layer edges to produce an icon’s final shape. For iOS, iPadOS, and macOS icons, provide square layers so the system can apply rounded corners. For visionOS and watchOS, provide square layers so the system can create the circular icon shape. For tvOS, provide rectangular layers so the system can apply rounded corners. Providing layers with pre-defined masking negatively impacts specular highlight effects and makes edges look jagged. + +**Keep primary content centered to avoid truncation when the system adjusts corners or applies masking.** Pay particular attention to centering content in visionOS and watchOS icons. To help with icon placement, use the grids in the app icon production templates, which you can find in [Apple Design Resources](https://developer.apple.com/design/resources/). + +## [Design](https://developer.apple.com/design/human-interface-guidelines/app-icons#Design) + +Embrace simplicity in your icon design. Simple icons tend to be easiest for people to understand and recognize. An icon with fine visual features might look busy when rendered with system-provided shadows and highlights, and details may be hard to discern at smaller sizes. Find a concept or element that captures the essence of your app or game, make it the core idea of your icon, and express it in a simple, unique way with a minimal number of shapes. Prefer a simple background, such as a solid color or gradient, that puts the emphasis on your primary design — you don’t need to fill the entire icon canvas with content. + +![An image of the Podcasts app icon.](https://docs-assets.developer.apple.com/published/58a62b07273dbbc302df7a428103a16e/app-icons-embrace-simplicity-podcasts%402x.png)The Podcasts app icon + +![An image of the Home app icon.](https://docs-assets.developer.apple.com/published/4932ee4d526fc1b112e611f610a18b08/app-icons-embrace-simplicity-home%402x.png)The Home app icon + +**Provide a visually consistent icon design across all the platforms your app supports.** A consistent design helps people quickly find your app wherever it appears and prevents people from mistaking your app for multiple apps. + +**Consider basing your icon design around filled, overlapping shapes.** Overlapping solid shapes in the foreground, particularly when paired with transparency and blurring, can give an icon a sense of depth. + +![An illustration of two circles centered above a grid. One circle encloses the other. The inner circle has a solid fill. The outer circle is larger than the inner circle, allowing some space between them. The outer circle has no fill and shows just an outline.](https://docs-assets.developer.apple.com/published/6b02e91996a97adb2dbe53a8131cc380/app-icons-element-outline-shape%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of two circles centered above a grid. One circle encloses the other. The inner circle has a solid fill. The outer circle is larger than the inner circle, has no outline, and has a semi-transparent fill that allows the background grid to show through. Together, the two circles give the impression that the inner circle is resting upon the outer circle.](https://docs-assets.developer.apple.com/published/a8d0e9d7b802123c594cf9910fb44a50/app-icons-element-filled-shape%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Include text only when it’s essential to your experience or brand.** Text in icons doesn’t support accessibility or localization, is often too small to read easily, and can make an icon appear cluttered. In some contexts, your app name already appears nearby, making it redundant to display the name within the icon itself. Although displaying a mnemonic like the first letter of your app’s name can help people recognize your app or game, avoid including nonessential words that tell people what to do with it — like “Watch” or “Play” — or context-specific terms like “New” or “For visionOS.” If you include text in a tvOS app icon, make sure it’s above other layers so it’s not cropped by the parallax effect. + +**Prefer illustrations to photos and avoid replicating UI components.** Photos are full of details that don’t work well when displayed in different appearances, viewed at small sizes, or split into layers. Instead of using photos, create a graphic representation of the content that emphasizes the features you want people to notice. Similarly, if your app has an interface that people recognize, don’t just replicate standard UI components or use app screenshots in your icon. + +**Don’t use replicas of Apple hardware products.** Apple products are copyrighted and can’t be reproduced in your app icons. + +## [Visual effects](https://developer.apple.com/design/human-interface-guidelines/app-icons#Visual-effects) + +**Let the system handle blurring and other visual effects.** The system dynamically applies visual effects to your app icon layers, so there’s no need to include specular highlights, drop shadows between layers, beveled edges, blurs, glows, and other effects. In addition to interfering with system-provided effects, custom effects are static, whereas the system supplies dynamic ones. If you do include custom visual effects on your icon layers, use them intentionally and test carefully with Icon Composer, in Simulator, or on device to make sure they appear as expected and don’t conflict with system effects. + +**Create layer groupings to apply effects to multiple layers at once.** System effects typically occur on individual layers. If it makes sense for your design, however, you can group several layers together in Icon Composer or your design tool so effects occur at the group level. + +## [Appearances](https://developer.apple.com/design/human-interface-guidelines/app-icons#Appearances) + +In iOS, iPadOS, and macOS, people can choose whether their Home Screen app icons are default, dark, clear, or tinted in appearance. For example, someone may want to personalize their app icon appearance to complement their wallpaper. You can design app icon variants for every appearance variant, and the system automatically generates variants you don’t provide. + +![A grid showing the six different appearances of the Photos app icon in iOS. The top row shows the default, clear light, and tinted light icon variants. The bottom row shows the dark, clear dark, and tinted dark variants.](https://docs-assets.developer.apple.com/published/a91b68946df73b81596a9a29b0356a4a/app-icons-rendering-modes%402x.png) + +**Keep your icon’s features consistent across appearances.** To create a seamless experience, keep your icon’s core visual features the same in the default, dark, clear, and tinted appearances. Avoid creating custom icon variants that swap elements in and out with each variant, which may make it harder for people to find your app when they switch appearances. + +**Design dark and tinted icons that feel at home beside system app icons and widgets.** You can preserve the color palette of your default icon, but be mindful that dark icons are more subdued, and clear and tinted icons are even more so. A great app icon is visible, legible, and recognizable, regardless of its appearance variant. + +**Use your light app icon as the basis for your dark icon.** Choose complementary colors that reflect the default design, and avoid excessively bright images. Color backgrounds generally offer the greatest contrast in dark icons. For guidance, see [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode). + +**Consider offering alternate app icons.** In iOS, iPadOS, tvOS, and compatible apps running in visionOS, it’s possible to let people visit your app’s settings to choose an alternate version of your app icon. For example, a sports app might offer icons for different teams, letting someone choose their favorite. If you offer this capability, make sure each icon you design remains closely related to your content and experience. Avoid creating one someone might mistake for another app. + +Note + +Alternate 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](https://developer.apple.com/app-store/review/guidelines/#design). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/app-icons#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or macOS._ + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/app-icons#tvOS) + +**Include a safe zone to ensure the system doesn’t crop your content.** When someone focuses your app icon, the system may crop content around the edges as the icon scales and moves. To ensure that your icon’s content is always visible, keep a safe zone around it. Be aware that the safe zone can vary, depending on the image size, layer depth, and motion, and the system crops foreground layers more than background layers. + +![A diagram of the Photos app icon in tvOS with a white dotted line inside the outer border, which indicates the safe zone.](https://docs-assets.developer.apple.com/published/f2f3bf70c87e53889768b64a2faf5cf5/tvos-app-icon-safe-zone%402x.png) + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/app-icons#visionOS) + +**Avoid adding a shape that’s intended to look like a hole or concave area to the background layer.** The system-added shadow and specular highlights can make such a shape stand out instead of recede. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/app-icons#watchOS) + +**Avoid using black for your icon’s background.** Lighten a black background so the icon doesn’t blend into the display background. + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/app-icons#Specifications) + +The layout, size, style, and appearances of app icons vary by platform. + +Platform| Layout shape| Icon shape after system masking| Layout size| Style| Appearances +---|---|---|---|---|--- +iOS, iPadOS, macOS| Square| Rounded rectangle (square)| 1024x1024 px| Layered| Default, dark, clear light, clear dark, tinted light, tinted dark +tvOS| Rectangle (landscape)| Rounded rectangle (rectangular)| 800x480 px| Layered (Parallax)| N/A +visionOS| Square| Circular| 1024x1024 px| Layered (3D)| N/A +watchOS| Square| Circular| 1088x1088 px| Layered| N/A + +The system automatically scales your icon to produce smaller variants that appear in certain locations, such as Settings and notifications. + +App icons support the following color spaces: + + * sRGB (color) + + * Gray Gamma 2.2 (grayscale) + + * Display P3 (wide-gamut color in iOS, iPadOS, macOS, tvOS, and watchOS only) + + + + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/app-icons#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/app-icons#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/) + +[Icon Composer](https://developer.apple.com/icon-composer/) + +[Icons](https://developer.apple.com/design/human-interface-guidelines/icons) + +[Images](https://developer.apple.com/design/human-interface-guidelines/images) + +[Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/app-icons#Developer-documentation) + +[Creating your app icon using Icon Composer](https://developer.apple.com/documentation/Xcode/creating-your-app-icon-using-icon-composer) + +[Configuring your app icon using an asset catalog](https://developer.apple.com/documentation/Xcode/configuring-your-app-icon) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/app-icons#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/2C0F206D-6728-49F7-940E-DC5BC5C51B54/9911_wide_250x141_1x.jpg) Say hello to the new look of app icons ](https://developer.apple.com/videos/play/wwdc2025/220) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/93AA149B-9ACF-4281-8BAF-5AFF7CFA1CF0/10087_wide_250x141_1x.jpg) Create icons with Icon Composer ](https://developer.apple.com/videos/play/wwdc2025/361) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/app-icons#Change-log) + +Date| Changes +---|--- +June 9, 2025| Updated guidance to reflect layered icons, consistency across platforms, and best practices for Liquid Glass. +June 10, 2024| Added guidance for creating dark and tinted app icon variants for iOS and iPadOS. +January 31, 2024| Clarified platform availability for alternate app icons. +June 21, 2023| Updated to include guidance for visionOS. +September 14, 2022| Added specifications for Apple Watch Ultra. + diff --git a/skills/hig-foundations/references/branding.md b/skills/hig-foundations/references/branding.md new file mode 100644 index 00000000..e8d70219 --- /dev/null +++ b/skills/hig-foundations/references/branding.md @@ -0,0 +1,44 @@ +--- +title: "Branding | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/branding + +# Branding + +Apps and games express their unique brand identity in ways that make them instantly recognizable while feeling at home on the platform and giving people a consistent experience. + +![A sketch of a megaphone, suggesting communication. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8ea20e1bc15bc51d9242f39c27cbb0c6/foundations-branding-intro%402x.png) + +In addition to expressing your brand in your [app icon](https://developer.apple.com/design/human-interface-guidelines/app-icons) and throughout your experience, you have several opportunities to highlight it within the App Store. For guidance, see [App Store Marketing Guidelines](https://developer.apple.com/app-store/marketing/guidelines/). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/branding#Best-practices) + +**Use your brand’s unique voice and tone in all the written communication you display.** For example, your brand might convey feelings of encouragement and optimism by using plain words, occasional exclamation marks and emoji, and simple sentence structures. + +**Consider choosing an accent color.** On most platforms, you can specify a color that the system applies to app elements like interface icons, buttons, and text. In macOS, people can also choose their own accent color that the system can use in place of the color an app specifies. For guidance, see [Color](https://developer.apple.com/design/human-interface-guidelines/color). + +**Consider using a custom font.** If your brand is strongly associated with a specific font, be sure that it’s legible at all sizes and supports accessibility features like bold text and larger type. It can work well to use a custom font for headlines and subheadings while using a system font for body copy and captions, because the system fonts are designed for optimal legibility at small sizes. For guidance, see [Typography](https://developer.apple.com/design/human-interface-guidelines/typography). + +**Ensure branding always defers to content.** Using screen space for an element that does nothing but display a brand asset can mean there’s less room for the content people care about. Aim to incorporate branding in refined, unobtrusive ways that don’t distract people from your experience. + +**Help people feel comfortable by using standard patterns consistently.** Even a highly stylized interface can be approachable if it maintains familiar behaviors. For example, place UI components in expected locations and use standard symbols to represent common actions. + +**Resist the temptation to display your logo throughout your app or game unless it’s essential for providing context.** People seldom need to be reminded which app they’re using, and it’s usually better to use the space to give people valuable information and controls. + +**Avoid using a launch screen as a branding opportunity.** Some platforms use a launch screen to minimize the startup experience, while simultaneously giving the app or game a little time to load resources (for guidance, see [Launch screens](https://developer.apple.com/design/human-interface-guidelines/launching#Launch-screens)). A launch screen disappears too quickly to convey any information, but you might consider displaying a welcome or onboarding screen that incorporates your branding content at the beginning of your experience. For guidance, see [Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding). + +**Follow Apple’s trademark guidelines.** Apple trademarks must not appear in your app name or images. See [Apple Trademark List](https://www.apple.com/legal/intellectual-property/trademark/appletmlist.html) and [Guidelines for Using Apple Trademarks](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/branding#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/branding#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/branding#Related) + +[Marketing resources and identity guidelines](https://developer.apple.com/app-store/marketing/guidelines/) + +[Show more with app previews](https://developer.apple.com/app-store/app-previews/) + +[Color](https://developer.apple.com/design/human-interface-guidelines/color) + diff --git a/skills/hig-foundations/references/color.md b/skills/hig-foundations/references/color.md new file mode 100644 index 00000000..8cfea29d --- /dev/null +++ b/skills/hig-foundations/references/color.md @@ -0,0 +1,274 @@ +--- +title: "Color | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/color + +# Color + +Judicious use of color can enhance communication, evoke your brand, provide visual continuity, communicate status and feedback, and help people understand information. + +![A sketch of a paint palette, suggesting the use of color. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/10ec5551985c77cabaeaaaff016cdfd8/foundations-color-intro%402x.png) + +The system defines colors that look good on various backgrounds and appearance modes, and can automatically adapt to vibrancy and accessibility settings. Using system colors is a convenient way to make your experience feel at home on the device. + +You may also want to use custom colors to enhance the visual experience of your app or game and express its unique personality. The following guidelines can help you use color in ways that people appreciate, regardless of whether you use system-defined or custom colors. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/color#Best-practices) + +**Avoid using the same color to mean different things.** Use color consistently throughout your interface, especially when you use it to help communicate information like status or interactivity. For example, if you use your brand color to indicate that a borderless button is interactive, using the same or similar color to stylize noninteractive text is confusing. + +**Make sure all your app’s colors work well in light, dark, and increased contrast contexts.** iOS, iPadOS, macOS, and tvOS offer both light and [dark](https://developer.apple.com/design/human-interface-guidelines/dark-mode) appearance settings. [System colors](https://developer.apple.com/design/human-interface-guidelines/color#System-colors) vary subtly depending on the system appearance, adjusting to ensure proper color differentiation and contrast for text, symbols, and other elements. With the Increase Contrast setting turned on, the color differences become far more apparent. When possible, use system colors, which already define variants for all these contexts. If you define a custom color, make sure to supply light and dark variants, and an increased contrast option for each variant that provides a significantly higher amount of visual differentiation. Even if your app ships in a single appearance mode, provide both light and dark colors to support Liquid Glass adaptivity in these contexts. + +![A screenshot of the Notes app in iOS with the light system appearance and default contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is white. The shade of yellow is vibrant.](https://docs-assets.developer.apple.com/published/033f3f6540cc36385bc5993e2152895b/color-context-light-mode%402x.png) + +Default (light) + +![A screenshot of the Notes app in iOS with the light system appearance and increased contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is black. The shade of yellow is darker to provide more contrast and differentiation against the note's white background.](https://docs-assets.developer.apple.com/published/9fa4e239f30421b0f00ee77dcace0c14/color-context-light-mode-high-contrast%402x.png) + +Increased contrast (light) + +![A screenshot of the Notes app in iOS with the dark system appearance and default contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is white.](https://docs-assets.developer.apple.com/published/dc3523da3cba1dd53d3501c763335e6c/color-context-dark-mode%402x.png) + +Default (dark) + +![A screenshot of the Notes app in iOS with the dark system appearance and increased contrast. The Notes app is open to a note with the text 'Note'. The text is selected, which shows a yellow selection highlight and text editing menu. The Done button appears in the upper-right corner. The Liquid Glass background of the button is yellow, and its label, which shows a checkmark, is black.](https://docs-assets.developer.apple.com/published/95af2bc7dece914a5f870f38edac2998/color-context-dark-mode-high-contrast%402x.png) + +Increased contrast (dark) + +**Test your app’s color scheme under a variety of lighting conditions.** Colors can look different when you view your app outside on a sunny day or in dim light. In bright surroundings, colors look darker and more muted. In dark environments, colors appear bright and saturated. In visionOS, colors can look different depending on the colors of a wall or object in a person’s physical surroundings and how it reflects light. Adjust app colors to provide an optimal viewing experience in the majority of use cases. + +**Test your app on different devices.** For example, the True Tone display — available on certain iPhone, iPad, and Mac models — uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that primarily support reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style (for developer guidance, see [`UIWhitePointAdaptivityStyle`](https://developer.apple.com/documentation/BundleResources/Information-Property-List/UIWhitePointAdaptivityStyle)). Test tvOS apps on multiple brands of HD and 4K TVs, and with different display settings. You can also test the appearance of your app using different color profiles on a Mac — such as P3 and Standard RGB (sRGB) — by choosing a profile in System Settings > Displays. For guidance, see [Color management](https://developer.apple.com/design/human-interface-guidelines/color#Color-management). + +**Consider how artwork and translucency affect nearby colors.** Variations in artwork sometimes warrant changes to nearby colors to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when in map mode but switches to a dark color scheme when in satellite mode. Colors can also appear different when placed behind or applied to a translucent element like a toolbar. + +**If your app lets people choose colors, prefer system-provided color controls where available.** Using built-in color pickers provides a consistent user experience, in addition to letting people save a set of colors they can access from any app. For developer guidance, see [`ColorPicker`](https://developer.apple.com/documentation/SwiftUI/ColorPicker). + +## [Inclusive color](https://developer.apple.com/design/human-interface-guidelines/color#Inclusive-color) + +**Avoid relying solely on color to differentiate between objects, indicate interactivity, or communicate essential information.** When you use color to convey information, be sure to provide the same information in alternative ways so people with color blindness or other visual disabilities can understand it. For example, you can use text labels or glyph shapes to identify objects or states. + +**Avoid using colors that make it hard to perceive content in your app.** For example, insufficient contrast can cause icons and text to blend with the background and make content hard to read, and people who are color blind might not be able to distinguish some color combinations. For guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**Consider how the colors you use might be perceived in other countries and cultures.** For example, red communicates danger in some cultures, but has positive connotations in other cultures. Make sure the colors in your app send the message you intend. + +![An illustration of an upward-trending stock chart in the Stocks app in English. The line of the graph is green to indicate the rising value of the stock during the selected time period.](https://docs-assets.developer.apple.com/published/5969ae10a6eaca6879fb43df4f651e4d/color-inclusive-color-charts-english%402x.png)Green indicates a positive trend in the Stocks app in English. + +![An illustration of an upward-trending stock chart in the Stocks app in Chinese. The line of the graph is red to indicate the rising value of the stock during the selected time period.](https://docs-assets.developer.apple.com/published/e84b6e7089f1fb8f73712da462d66164/color-inclusive-color-charts-chinese%402x.png)Red indicates a positive trend in the Stocks app in Chinese. + +## [System colors](https://developer.apple.com/design/human-interface-guidelines/color#System-colors) + +**Avoid hard-coding system color values in your app.** Documented color values are for your reference during the app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Use APIs like [`Color`](https://developer.apple.com/documentation/SwiftUI/Color) to apply system colors. + +iOS, iPadOS, macOS, and visionOS also define sets of _dynamic system colors_ that match the color schemes of standard UI components and automatically adapt to both light and dark contexts. Each dynamic color is semantically defined by its purpose, rather than its appearance or color values. For example, some colors represent view backgrounds at different levels of hierarchy and other colors represent foreground content, such as labels, links, and separators. + +**Avoid redefining the semantic meanings of dynamic system colors.** To ensure a consistent experience and ensure your interface looks great when the appearance of the platform changes, use dynamic system colors as intended. For example, don’t use the [separator](https://developer.apple.com/documentation/uikit/uicolor/separator) color as a text color, or [secondary text label](https://developer.apple.com/documentation/uikit/uicolor/secondarylabel) color as a background color. + +## [Liquid Glass color](https://developer.apple.com/design/human-interface-guidelines/color#Liquid-Glass-color) + +By default, [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) has no inherent color, and instead takes on colors from the content directly behind it. You can apply color to some Liquid Glass elements, giving them the appearance of colored or stained glass. This is useful for drawing emphasis to a specific control, like a primary call to action, and is the approach the system uses for prominent button styling. Symbols or text labels on Liquid Glass controls can also have color. + +![A screenshot of the Done button in iOS, which appears as a checkmark on a blue Liquid Glass background.](https://docs-assets.developer.apple.com/published/df4d0a0bca32edb16d7ff86e34d6fe2d/color-liquid-glass-overview-tinted%402x.png)Controls can use color in the Liquid Glass background, like in a primary action button. + +![A screenshot of a tab bar in iOS, with the first tab selected. The symbol and text label of the selected tab bar item are blue.](https://docs-assets.developer.apple.com/published/5a9078b2ea4baec1f15773638c9377c6/color-liquid-glass-overview-color-over-tab-bar%402x.png)Symbols and text that appear on Liquid Glass can have color, like in a selected tab bar item. + +![A screenshot of the Share button in iOS over a colorful image. The colors from the background image infuse the Liquid Glass in the button, affecting its color.](https://docs-assets.developer.apple.com/published/9cf610d972c97dee46b9e206525b2ae7/color-liquid-glass-overview-clear%402x.png)By default, Liquid Glass picks up the color from the content layer behind it. + +For smaller elements like toolbars and tab bars, the system can adapt Liquid Glass between a light and dark appearance in response to the underlying content. By default, symbols and text on these elements follow a monochromatic color scheme, becoming darker when the underlying content is light, and lighter when it’s dark. Liquid Glass appears more opaque in larger elements like sidebars to preserve legibility over complex backgrounds and accommodate richer content on the material’s surface. + +**Apply color sparingly to the Liquid Glass material, and to symbols or text on the material.** If you apply color, reserve it for elements that truly benefit from emphasis, such as status indicators or primary actions. To emphasize primary actions, apply color to the background rather than to symbols or text. For example, the system applies the app accent color to the background in prominent buttons — such as the Done button — to draw attention and elevate their visual prominence. Refrain from adding color to the background of multiple controls. + +![A screenshot of the top half of an iPhone app that shows a toolbar with several buttons. All of the buttons in the toolbar use a blue accent color for their Liquid Glass background.](https://docs-assets.developer.apple.com/published/9b7b9adb67ee5f70839540534fdeb374/colors-liquid-glass-usage-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![A screenshot of the top half of an iPhone app that shows a toolbar with several buttons. Only the Done button in the toolbar uses a blue accent color for its Liquid Glass background.](https://docs-assets.developer.apple.com/published/3897d0d7c8736728d130dcc820e9a688/colors-liquid-glass-usage-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Avoid using similar colors in control labels if your app has a colorful background.** While color can make apps more visually appealing, playful, or reflective of your brand, too much color can be overwhelming and make control labels more difficult to read. If your app features colorful backgrounds or visually rich content, prefer a monochromatic appearance for toolbars and tab bars, or choose an accent color with sufficient visual differentiation. By contrast, in apps with primarily monochromatic content or backgrounds, choosing your brand color as the app accent color can be an effective way to tailor your app experience and reflect your company’s identity. + +**Be aware of the placement of color in the content layer.** Make sure your interface maintains sufficient contrast by avoiding overlap of similar colors in the content layer and controls when possible. Although colorful content might intermittently scroll underneath controls, make sure its default or resting state — like the top of a screen of scrollable content — maintains clear legibility. + +## [Color management](https://developer.apple.com/design/human-interface-guidelines/color#Color-management) + +A _color space_ represents the colors in a _color model_ like RGB or CMYK. Common color spaces — sometimes called _gamuts_ — are sRGB and Display P3. + +![Diagram showing the colors included in the sRGB space, compared to the larger number of colors included in the P3 color space.](https://docs-assets.developer.apple.com/published/c10d0ec4c78a6b824552058caac031b5/color-graphic-wide-color%402x.png) + +A _color profile_ describes the colors in a color space using, for example, mathematical formulas or tables of data that map colors to numerical representations. An image embeds its color profile so that a device can interpret the image’s colors correctly and reproduce them on a display. + +**Apply color profiles to your images.** Color profiles help ensure that your app’s colors appear as intended on different displays. The sRGB color space produces accurate colors on most displays. + +**Use wide color to enhance the visual experience on compatible displays.** Wide color displays support a P3 color space, which can produce richer, more saturated colors than sRGB. As a result, photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color can be more meaningful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in PNG format. Note that you need to use a wide color display to design wide color images and select P3 colors. + +**Provide color space–specific image and color variations if necessary.** In general, P3 colors and images appear fine on sRGB displays. Occasionally, it may be hard to distinguish two very similar P3 colors when viewing them on an sRGB display. Gradients that use P3 colors can also sometimes appear clipped on sRGB displays. To avoid these issues and to ensure visual fidelity on both wide color and sRGB displays, you can use the asset catalog of your Xcode project to provide different versions of images and colors for each color space. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/color#Platform-considerations) + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/color#iOS-iPadOS) + +iOS defines two sets of dynamic background colors — _system_ and _grouped_ — each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, use the grouped background colors ([`systemGroupedBackground`](https://developer.apple.com/documentation/UIKit/UIColor/systemGroupedBackground), [`secondarySystemGroupedBackground`](https://developer.apple.com/documentation/UIKit/UIColor/secondarySystemGroupedBackground), and [`tertiarySystemGroupedBackground`](https://developer.apple.com/documentation/UIKit/UIColor/tertiarySystemGroupedBackground)) when you have a grouped table view; otherwise, use the system set of background colors ([`systemBackground`](https://developer.apple.com/documentation/UIKit/UIColor/systemBackground), [`secondarySystemBackground`](https://developer.apple.com/documentation/UIKit/UIColor/secondarySystemBackground), and [`tertiarySystemBackground`](https://developer.apple.com/documentation/UIKit/UIColor/tertiarySystemBackground)). + +With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways: + + * Primary for the overall view + + * Secondary for grouping content or elements within the overall view + + * Tertiary for grouping content or elements within secondary elements + + + + +For foreground content, iOS defines the following dynamic colors: + +Color| Use for…| UIKit API +---|---|--- +Label| A text label that contains primary content.| [`label`](https://developer.apple.com/documentation/UIKit/UIColor/label) +Secondary label| A text label that contains secondary content.| [`secondaryLabel`](https://developer.apple.com/documentation/UIKit/UIColor/secondaryLabel) +Tertiary label| A text label that contains tertiary content.| [`tertiaryLabel`](https://developer.apple.com/documentation/UIKit/UIColor/tertiaryLabel) +Quaternary label| A text label that contains quaternary content.| [`quaternaryLabel`](https://developer.apple.com/documentation/UIKit/UIColor/quaternaryLabel) +Placeholder text| Placeholder text in controls or text views.| [`placeholderText`](https://developer.apple.com/documentation/UIKit/UIColor/placeholderText) +Separator| A separator that allows some underlying content to be visible.| [`separator`](https://developer.apple.com/documentation/UIKit/UIColor/separator) +Opaque separator| A separator that doesn’t allow any underlying content to be visible.| [`opaqueSeparator`](https://developer.apple.com/documentation/UIKit/UIColor/opaqueSeparator) +Link| Text that functions as a link.| [`link`](https://developer.apple.com/documentation/UIKit/UIColor/link) + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/color#macOS) + +macOS defines the following dynamic system colors (you can also view them in the Developer palette of the standard Color panel): + +Color| Use for…| AppKit API +---|---|--- +Alternate selected control text color| The text on a selected surface in a list or table.| [`alternateSelectedControlTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/alternateSelectedControlTextColor) +Alternating content background colors| The backgrounds of alternating rows or columns in a list, table, or collection view.| [`alternatingContentBackgroundColors`](https://developer.apple.com/documentation/AppKit/NSColor/alternatingContentBackgroundColors) +Control accent| The accent color people select in System Settings.| [`controlAccentColor`](https://developer.apple.com/documentation/AppKit/NSColor/controlAccentColor) +Control background color| The background of a large interface element, such as a browser or table.| [`controlBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/controlBackgroundColor) +Control color| The surface of a control.| [`controlColor`](https://developer.apple.com/documentation/AppKit/NSColor/controlColor) +Control text color| The text of a control that is available.| [`controlTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/controlTextColor) +Current control tint| The system-defined control tint.| [`currentControlTint`](https://developer.apple.com/documentation/AppKit/NSColor/currentControlTint) +Unavailable control text color| The text of a control that’s unavailable.| [`disabledControlTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/disabledControlTextColor) +Find highlight color| The color of a find indicator.| [`findHighlightColor`](https://developer.apple.com/documentation/AppKit/NSColor/findHighlightColor) +Grid color| The gridlines of an interface element, such as a table.| [`gridColor`](https://developer.apple.com/documentation/AppKit/NSColor/gridColor) +Header text color| The text of a header cell in a table.| [`headerTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/headerTextColor) +Highlight color| The virtual light source onscreen.| [`highlightColor`](https://developer.apple.com/documentation/AppKit/NSColor/highlightColor) +Keyboard focus indicator color| The ring that appears around the currently focused control when using the keyboard for interface navigation.| [`keyboardFocusIndicatorColor`](https://developer.apple.com/documentation/AppKit/NSColor/keyboardFocusIndicatorColor) +Label color| The text of a label containing primary content.| [`labelColor`](https://developer.apple.com/documentation/AppKit/NSColor/labelColor) +Link color| A link to other content.| [`linkColor`](https://developer.apple.com/documentation/AppKit/NSColor/linkColor) +Placeholder text color| A placeholder string in a control or text view.| [`placeholderTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/placeholderTextColor) +Quaternary label color| The text of a label of lesser importance than a tertiary label, such as watermark text.| [`quaternaryLabelColor`](https://developer.apple.com/documentation/AppKit/NSColor/quaternaryLabelColor) +Secondary label color| The text of a label of lesser importance than a primary label, such as a label used to represent a subheading or additional information.| [`secondaryLabelColor`](https://developer.apple.com/documentation/AppKit/NSColor/secondaryLabelColor) +Selected content background color| The background for selected content in a key window or view.| [`selectedContentBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/selectedContentBackgroundColor) +Selected control color| The surface of a selected control.| [`selectedControlColor`](https://developer.apple.com/documentation/AppKit/NSColor/selectedControlColor) +Selected control text color| The text of a selected control.| [`selectedControlTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/selectedControlTextColor) +Selected menu item text color| The text of a selected menu.| [`selectedMenuItemTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/selectedMenuItemTextColor) +Selected text background color| The background of selected text.| [`selectedTextBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/selectedTextBackgroundColor) +Selected text color| The color for selected text.| [`selectedTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/selectedTextColor) +Separator color| A separator between different sections of content.| [`separatorColor`](https://developer.apple.com/documentation/AppKit/NSColor/separatorColor) +Shadow color| The virtual shadow cast by a raised object onscreen.| [`shadowColor`](https://developer.apple.com/documentation/AppKit/NSColor/shadowColor) +Tertiary label color| The text of a label of lesser importance than a secondary label.| [`tertiaryLabelColor`](https://developer.apple.com/documentation/AppKit/NSColor/tertiaryLabelColor) +Text background color| The background color behind text.| [`textBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/textBackgroundColor) +Text color| The text in a document.| [`textColor`](https://developer.apple.com/documentation/AppKit/NSColor/textColor) +Under page background color| The background behind a document’s content.| [`underPageBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/underPageBackgroundColor) +Unemphasized selected content background color| The selected content in a non-key window or view.| [`unemphasizedSelectedContentBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/unemphasizedSelectedContentBackgroundColor) +Unemphasized selected text background color| A background for selected text in a non-key window or view.| [`unemphasizedSelectedTextBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/unemphasizedSelectedTextBackgroundColor) +Unemphasized selected text color| Selected text in a non-key window or view.| [`unemphasizedSelectedTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/unemphasizedSelectedTextColor) +Window background color| The background of a window.| [`windowBackgroundColor`](https://developer.apple.com/documentation/AppKit/NSColor/windowBackgroundColor) +Window frame text color| The text in the window’s title bar area.| [`windowFrameTextColor`](https://developer.apple.com/documentation/AppKit/NSColor/windowFrameTextColor) + +#### [App accent colors](https://developer.apple.com/design/human-interface-guidelines/color#App-accent-colors) + +Beginning in macOS 11, you can specify an _accent color_ to customize the appearance of your app’s buttons, selection highlighting, and sidebar icons. The system applies your accent color when the current value in General > Accent color settings is _multicolor_. + +![A screenshot of the accent color picker in the System Settings app.](https://docs-assets.developer.apple.com/published/93ebe4b08af4e94a5c4479459fc7905b/colors-accent-colors-picker-multicolor%402x.png) + +If people set their accent color setting to a value other than multicolor, the system applies their chosen color to the relevant items throughout your app, replacing your accent color. The exception is a sidebar icon that uses a fixed color you specify. Because a fixed-color sidebar icon uses a specific color to provide meaning, the system doesn’t override its color when people change the value of accent color settings. For guidance, see [Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/color#tvOS) + +**Consider choosing a limited color palette that coordinates with your app logo.** Subtle use of color can help you communicate your brand while deferring to the content. + +**Avoid using only color to indicate focus.** Subtle scaling and responsive animation are the primary ways to denote interactivity when an element is in focus. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/color#visionOS) + +**Use color sparingly, especially on glass.** Standard visionOS windows typically use the system-defined glass [material](https://developer.apple.com/design/human-interface-guidelines/materials), which lets light and objects from people’s physical surroundings and their space show through. Because the colors in these physical and virtual objects are visible through the glass, they can affect the legibility of colorful app content in the window. Prefer using color in places where it can help call attention to important information or show the relationship between parts of the interface. + +**Prefer using color in bold text and large areas.** Color in lightweight text or small areas can make them harder to see and understand. + +**In a fully immersive experience, help people maintain visual comfort by keeping brightness levels balanced.** Although using high contrast can help direct people’s attention to important content, it can also cause visual discomfort if people’s eyes have adjusted to low light or darkness. Consider making content fully bright only when the rest of the visual context is also bright. For example, avoid displaying a bright object on a very dark or black background, especially if the object flashes or moves. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/color#watchOS) + +**Use background color to support existing content or supply additional information.** Background color can establish a sense of place and help people recognize key content. For example, in Activity, each infographic view for the Move, Exercise, and Stand Activity rings has a background that matches the color of the ring. Use background color when you have something to communicate, rather than as a solely visual flourish. Avoid using full-screen background color in views that are likely to remain onscreen for long periods of time, such as in a workout or audio-playing app. + +**Recognize that people might prefer graphic complications to use tinted mode instead of full color.** The system can use a single color that’s based on the wearer’s selected color in a graphic complication’s images, gauges, and text. For guidance, see [Complications](https://developer.apple.com/design/human-interface-guidelines/complications). + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/color#Specifications) + +### [System colors](https://developer.apple.com/design/human-interface-guidelines/color#System-colors) + +Name| SwiftUI API| Default (light)| Default (dark)| Increased contrast (light)| Increased contrast (dark) +---|---|---|---|---|--- +Red| [`red`](https://developer.apple.com/documentation/SwiftUI/Color/red)| ![R-255,G-56,B-60](https://docs-assets.developer.apple.com/published/56ba9eebe119d2e1b3063503a2eb45b7/colors-unified-red-light%402x.png)| ![R-255,G-66,B-69](https://docs-assets.developer.apple.com/published/9d7a7df4db48b0dcbd2915724d010235/colors-unified-red-dark%402x.png)| ![R-233,G-21,B-45](https://docs-assets.developer.apple.com/published/5b3473fcd986facfdee26a24601c7082/colors-unified-accessible-red-light%402x.png)| ![R-255,G-97,B-101](https://docs-assets.developer.apple.com/published/d097760a50a181eb7f688e9d62f4e710/colors-unified-accessible-red-dark%402x.png) +Orange| [`orange`](https://developer.apple.com/documentation/SwiftUI/Color/orange)| ![R-255,G-141,B-40](https://docs-assets.developer.apple.com/published/57f431ec786e31e33f578ace3dbb8c78/colors-unified-orange-light%402x.png)| ![R-255,G-146,B-48](https://docs-assets.developer.apple.com/published/e906c25c1cadcb9cf7514d01b83f3bb7/colors-unified-orange-dark%402x.png)| ![R-197,G-83,B-0](https://docs-assets.developer.apple.com/published/2222321d0b29cad6987f0f6e26d198c1/colors-unified-accessible-orange-light%402x.png)| ![R-255,G-160,B-86](https://docs-assets.developer.apple.com/published/c82984219db600ea8396f4fd1933fc19/colors-unified-accessible-orange-dark%402x.png) +Yellow| [`yellow`](https://developer.apple.com/documentation/SwiftUI/Color/yellow)| ![R-255,G-204,B-0](https://docs-assets.developer.apple.com/published/bebac431675840fa7e0e70cce0a6eb76/colors-unified-yellow-light%402x.png)| ![R-255,G-214,B-0](https://docs-assets.developer.apple.com/published/80c02086ccc5f013058932129cf9c6d3/colors-unified-yellow-dark%402x.png)| ![R-161,G-106,B-0](https://docs-assets.developer.apple.com/published/a51b94b82d9ea46e9de2ab8da5a57bbe/colors-unified-accessible-yellow-light%402x.png)| ![R-254,G-223,B-67](https://docs-assets.developer.apple.com/published/cd06b12d9e053739b089fb102b70901e/colors-unified-accessible-yellow-dark%402x.png) +Green| [`green`](https://developer.apple.com/documentation/SwiftUI/Color/green)| ![R-52,G-199,B-89](https://docs-assets.developer.apple.com/published/b4226cfcf596812d46bd084322f47e65/colors-unified-green-light%402x.png)| ![R-48,G-209,B-88](https://docs-assets.developer.apple.com/published/7724e5dd4f60d300eaffe45c9a5e1f9d/colors-unified-green-dark%402x.png)| ![R-0,G-137,B-50](https://docs-assets.developer.apple.com/published/51471c6578d192e9dae6f40d8ace1835/colors-unified-accessible-green-light%402x.png)| ![R-74,G-217,B-104](https://docs-assets.developer.apple.com/published/aff6bca03c74050c6b78015925c8fd21/colors-unified-accessible-green-dark%402x.png) +Mint| [`mint`](https://developer.apple.com/documentation/SwiftUI/Color/mint)| ![R-0,G-200,B-179](https://docs-assets.developer.apple.com/published/5d07acb38b9d0d7098f0b92456a7d27c/colors-unified-mint-light%402x.png)| ![R-0,G-218,B-195](https://docs-assets.developer.apple.com/published/851d8c0c2bea51a9377ae31520097e8c/colors-unified-mint-dark%402x.png)| ![R-0,G-133,B-117](https://docs-assets.developer.apple.com/published/d24198fce4dd42183e7b35abc9b67c20/colors-unified-accessible-mint-light%402x.png)| ![R-84,G-223,B-203](https://docs-assets.developer.apple.com/published/72586072586bb6d91589cc4ab78177b1/colors-unified-accessible-mint-dark%402x.png) +Teal| [`teal`](https://developer.apple.com/documentation/SwiftUI/Color/teal)| ![R-0,G-195,B-208](https://docs-assets.developer.apple.com/published/6b8e5d90758cc858b4d3e20110a31f53/colors-unified-teal-light%402x.png)| ![R-0,G-210,B-224](https://docs-assets.developer.apple.com/published/d02bd29f4ba3580e84756f8c332fd677/colors-unified-teal-dark%402x.png)| ![R-0,G-129,B-152](https://docs-assets.developer.apple.com/published/f2137be89fb79e4822b633a450d6fc2c/colors-unified-accessible-teal-light%402x.png)| ![R-59,G-221,B-236](https://docs-assets.developer.apple.com/published/9a76a2333c746ded944e6610a01d4daf/colors-unified-accessible-teal-dark%402x.png) +Cyan| [`cyan`](https://developer.apple.com/documentation/SwiftUI/Color/cyan)| ![R-0,G-192,B-232](https://docs-assets.developer.apple.com/published/3eb3076ca71a16ce1bede399e815e736/colors-unified-cyan-light%402x.png)| ![R-60,G-211,B-254](https://docs-assets.developer.apple.com/published/34399c5683f58d0710a50625f2fbca64/colors-unified-cyan-dark%402x.png)| ![R-0,G-126,B-174](https://docs-assets.developer.apple.com/published/e54287c8eb8d532283dac9d646886953/colors-unified-accessible-cyan-light%402x.png)| ![R-109,G-217,B-255](https://docs-assets.developer.apple.com/published/6d3ef826eb37c61642d57f798de4d14f/colors-unified-accessible-cyan-dark%402x.png) +Blue| [`blue`](https://developer.apple.com/documentation/SwiftUI/Color/blue)| ![R-0,G-136,B-255](https://docs-assets.developer.apple.com/published/6ea9cabe180214ed99be04320df3501b/colors-unified-blue-light%402x.png)| ![R-0,G-145,B-255](https://docs-assets.developer.apple.com/published/580c321f95c59b2b4479be066d24f10f/colors-unified-blue-dark%402x.png)| ![R-30,G-110,B-244](https://docs-assets.developer.apple.com/published/f46653318bcfae105ff78fe412d64da2/colors-unified-accessible-blue-light%402x.png)| ![R-92,G-184,B-255](https://docs-assets.developer.apple.com/published/07b7bcb2d65911636342cee25db1f953/colors-unified-accessible-blue-dark%402x.png) +Indigo| [`indigo`](https://developer.apple.com/documentation/SwiftUI/Color/indigo)| ![R-97,G-85,B-245](https://docs-assets.developer.apple.com/published/2da5c45a0e483dcaac4447464da4b6a7/colors-unified-indigo-light%402x.png)| ![R-109,G-124,B-255](https://docs-assets.developer.apple.com/published/b5e1fd9a1fc2347cc7238668b2df251b/colors-unified-indigo-dark%402x.png)| ![R-86,G-74,B-222](https://docs-assets.developer.apple.com/published/e326f52473ede4e5427208f9929196d9/colors-unified-accessible-indigo-light%402x.png)| ![R-167,G-170,B-255](https://docs-assets.developer.apple.com/published/d19249c65dab279c41f16c802365df10/colors-unified-accessible-indigo-dark%402x.png) +Purple| [`purple`](https://developer.apple.com/documentation/SwiftUI/Color/purple)| ![R-203,G-48,B-224](https://docs-assets.developer.apple.com/published/2f07dfc6c397fba6d0abda5f5051a025/colors-unified-purple-light%402x.png)| ![R-219,G-52,B-242](https://docs-assets.developer.apple.com/published/04bce86fef3077014010ce6cfceb659f/colors-unified-purple-dark%402x.png)| ![R-176,G-47,B-194](https://docs-assets.developer.apple.com/published/a63779bec8a313582e11c6bbe348fc10/colors-unified-accessible-purple-light%402x.png)| ![R-234,G-141,B-255](https://docs-assets.developer.apple.com/published/82c3b96b548cbc455ef685f3e44d01d1/colors-unified-accessible-purple-dark%402x.png) +Pink| [`pink`](https://developer.apple.com/documentation/SwiftUI/Color/pink)| ![R-255,G-45,B-85](https://docs-assets.developer.apple.com/published/1486931dce50d7610a397607afc0fb4d/colors-unified-pink-light%402x.png)| ![R-255,G-55,B-95](https://docs-assets.developer.apple.com/published/d68a9dbf37bab028b011f68fdd794e9c/colors-unified-pink-dark%402x.png)| ![R-231,G-18,B-77](https://docs-assets.developer.apple.com/published/d696af68031ce91a63330e0469ff592b/colors-unified-accessible-pink-light%402x.png)| ![R-255,G-138,B-196](https://docs-assets.developer.apple.com/published/a64993da9a61253e266e411d76c2cefd/colors-unified-accessible-pink-dark%402x.png) +Brown| [`brown`](https://developer.apple.com/documentation/SwiftUI/Color/brown)| ![R-172,G-127,B-94](https://docs-assets.developer.apple.com/published/366eca06d26c2f759d6200a1e9b0a56f/colors-unified-brown-light%402x.png)| ![R-183,G-138,B-102](https://docs-assets.developer.apple.com/published/df6c5da440560b2054af5b55fe9b87f4/colors-unified-brown-dark%402x.png)| ![R-149,G-109,B-81](https://docs-assets.developer.apple.com/published/c80a760835a2bc94a68337d0208a469e/colors-unified-accessible-brown-light%402x.png)| ![R-219,G-166,B-121](https://docs-assets.developer.apple.com/published/3c6062e007c9d60e4684d063b3618786/colors-unified-accessible-brown-dark%402x.png) + +visionOS system colors use the default dark color values. + +### [iOS, iPadOS system gray colors](https://developer.apple.com/design/human-interface-guidelines/color#iOS-iPadOS-system-gray-colors) + +Name| UIKit API| Default (light)| Default (dark)| Increased contrast (light)| Increased contrast (dark) +---|---|---|---|---|--- +Gray| [`systemGray`](https://developer.apple.com/documentation/UIKit/UIColor/systemGray)| ![R-142,G-142,B-147](https://docs-assets.developer.apple.com/published/cc1289b6fd4b76c79bbeda356463232a/ios-default-systemgray%402x.png)| ![R-142,G-142,B-147](https://docs-assets.developer.apple.com/published/cc1289b6fd4b76c79bbeda356463232a/ios-default-systemgraydark%402x.png)| ![R-108,G-108,B-112](https://docs-assets.developer.apple.com/published/5d86cbc8b4ddef8b68954882b4c87a18/ios-accessible-systemgray%402x.png)| ![R-174,G-174,B-178](https://docs-assets.developer.apple.com/published/d00617ff05181a53d2cb5ddf143d502e/ios-accessible-systemgraydark%402x.png) +Gray (2)| [`systemGray2`](https://developer.apple.com/documentation/UIKit/UIColor/systemGray2)| ![R-174,G-174,B-178](https://docs-assets.developer.apple.com/published/d00617ff05181a53d2cb5ddf143d502e/ios-default-systemgray2%402x.png)| ![R-99,G-99,B-102](https://docs-assets.developer.apple.com/published/1f681e808c0f4f35a2e7642872719c8b/ios-default-systemgray2dark%402x.png)| ![R-142,G-142,B-147](https://docs-assets.developer.apple.com/published/cc1289b6fd4b76c79bbeda356463232a/ios-accessible-systemgray2%402x.png)| ![R-124,G-124,B-128](https://docs-assets.developer.apple.com/published/f941ec556140a435aa9556a993e57e63/ios-accessible-systemgray2dark%402x.png) +Gray (3)| [`systemGray3`](https://developer.apple.com/documentation/UIKit/UIColor/systemGray3)| ![R-199,G-199,B-204](https://docs-assets.developer.apple.com/published/bcbb9fb97382e52aa09de7239a6edcf7/ios-default-systemgray3%402x.png)| ![R-72,G-72,B-74](https://docs-assets.developer.apple.com/published/d99ad33dcdd426585e7107e1b130d713/ios-default-systemgray3dark%402x.png)| ![R-174,G-174,B-178](https://docs-assets.developer.apple.com/published/d00617ff05181a53d2cb5ddf143d502e/ios-accessible-systemgray3%402x.png)| ![R-84,G-84,B-86](https://docs-assets.developer.apple.com/published/693c40b65e2752b3a2b7741d61ebbb3b/ios-accessible-systemgray3dark%402x.png) +Gray (4)| [`systemGray4`](https://developer.apple.com/documentation/UIKit/UIColor/systemGray4)| ![R-209,G-209,B-214](https://docs-assets.developer.apple.com/published/5e1c546e8c78d9700b1ee58ce3a39972/ios-default-systemgray4%402x.png)| ![R-58,G-58,B-60](https://docs-assets.developer.apple.com/published/983cdcdfa9a664db0c5ff7c09905582a/ios-default-systemgray4dark%402x.png)| ![R-188,G-188,B-192](https://docs-assets.developer.apple.com/published/93644725b33daf923f7e3a146e9b2d42/ios-accessible-systemgray4%402x.png)| ![R-68,G-68,B-70](https://docs-assets.developer.apple.com/published/6439d861c1fe8a41615d5f09d3cde938/ios-accessible-systemgray4dark%402x.png) +Gray (5)| [`systemGray5`](https://developer.apple.com/documentation/UIKit/UIColor/systemGray5)| ![R-229,G-229,B-234](https://docs-assets.developer.apple.com/published/91f296b3990bfe6dcd28b1804c803581/ios-default-systemgray5%402x.png)| ![R-44,G-44,B-46](https://docs-assets.developer.apple.com/published/a8b1d65979b02865c203f18019b1084d/ios-default-systemgray5dark%402x.png)| ![R-216,G-216,B-220](https://docs-assets.developer.apple.com/published/616159815cf002c39f570affa027c298/ios-accessible-systemgray5%402x.png)| ![R-54,G-54,B-56](https://docs-assets.developer.apple.com/published/aacb35c6af213ef544f77d26df56df39/ios-accessible-systemgray5dark%402x.png) +Gray (6)| [`systemGray6`](https://developer.apple.com/documentation/UIKit/UIColor/systemGray6)| ![R-242,G-242,B-247](https://docs-assets.developer.apple.com/published/3d60e2b1bf4771610453a31de912647b/ios-default-systemgray6%402x.png)| ![R-28,G-28,B-30](https://docs-assets.developer.apple.com/published/5d86f031014f556ef2d26da001c1f639/ios-default-systemgray6dark%402x.png)| ![R-235,G-235,B-240](https://docs-assets.developer.apple.com/published/82102708ad5dc7921fc0473f6ace4613/ios-accessible-systemgray6%402x.png)| ![R-36,G-36,B-38](https://docs-assets.developer.apple.com/published/5dc6249020925c5ec09f88f8adc9bbaa/ios-accessible-systemgray6dark%402x.png) + +In SwiftUI, the equivalent of `systemGray` is [`gray`](https://developer.apple.com/documentation/SwiftUI/Color/gray). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/color#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/color#Related) + +[Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode) + +[Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) + +[Materials](https://developer.apple.com/design/human-interface-guidelines/materials) + +[Apple Design Resources](https://developer.apple.com/design/resources/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/color#Developer-documentation) + +[`Color`](https://developer.apple.com/documentation/SwiftUI/Color) — SwiftUI + +[`UIColor`](https://developer.apple.com/documentation/UIKit/UIColor) — UIKit + +[Color](https://developer.apple.com/documentation/AppKit/color) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/color#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_1x.jpg) Meet Liquid Glass ](https://developer.apple.com/videos/play/wwdc2025/219) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/color#Change-log) + +Date| Changes +---|--- +December 16, 2025| Updated guidance for Liquid Glass. +June 9, 2025| Updated system color values, and added guidance for Liquid Glass. +February 2, 2024| Distinguished UIKit and SwiftUI gray colors in iOS and iPadOS, and added guidance for balancing brightness levels in visionOS apps. +September 12, 2023| Enhanced guidance for using background color in watchOS views, and added color swatches for tvOS. +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Updated guidance for using background color in watchOS. +December 19, 2022| Corrected RGB values for system mint color (Dark Mode) in iOS and iPadOS. + diff --git a/skills/hig-foundations/references/dark-mode.md b/skills/hig-foundations/references/dark-mode.md new file mode 100644 index 00000000..a7ad3cac --- /dev/null +++ b/skills/hig-foundations/references/dark-mode.md @@ -0,0 +1,116 @@ +--- +title: "Dark Mode | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/dark-mode + +# Dark Mode + +Dark Mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments. + +![A sketch of concentric circles with half-filled areas, suggesting the presence of light and dark. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/f354bd96f1890df83e7f8e31835f80bc/foundations-dark-mode-intro%402x.png) + +In iOS, iPadOS, macOS, and tvOS, people often choose Dark Mode as their default interface style, and they generally expect all apps and games to respect their preference. In Dark Mode, the system uses a dark color palette for all screens, views, menus, and controls, and may also use greater perceptual contrast to make foreground content stand out against the darker backgrounds. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Best-practices) + +**Avoid offering an app-specific appearance setting.** An app-specific appearance mode option creates more work for people because they have to adjust more than one setting to get the appearance they want. Worse, they may think your app is broken because it doesn’t respond to their systemwide appearance choice. + +**Ensure that your app looks good in both appearance modes.** In addition to using one mode or the other, people can choose the Auto appearance setting, which switches between the light and dark appearances as conditions change throughout the day, potentially while your app is running. + +**Test your content to make sure that it remains comfortably legible in both appearance modes.** For example, in Dark Mode with Increase Contrast and Reduce Transparency turned on (both separately and together), you may find places where dark text is less legible when it’s on a dark background. You might also find that turning on Increase Contrast in Dark Mode can result in reduced visual contrast between dark text and a dark background. Although people with strong vision might still be able to read lower contrast text, such text could be illegible for many. For guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**In rare cases, consider using only a dark appearance in the interface.** For example, it can make sense for an app that supports immersive media viewing to use a permanently dark appearance that lets the UI recede and helps people focus on the media. + +![A screenshot of the Stocks app on iPhone in its standard dark-only appearance, showing the Apple Inc. stock in detail. The view includes a summary of the current stock price along with a graph of its performance over the past year.](https://docs-assets.developer.apple.com/published/50e3d01e38e69e84976f7a1747321ba8/dark-mode-stocks-app-dark-only-mode%402x.png) + +The Stocks app uses a dark-only appearance + +## [Dark Mode colors](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Dark-Mode-colors) + +The color palette in Dark Mode includes dimmer background colors and brighter foreground colors. It’s important to realize that these colors aren’t necessarily inversions of their light counterparts: while many colors are inverted, some are not. For more information, see [Specifications](https://developer.apple.com/design/human-interface-guidelines/color#Specifications). + +**Embrace colors that adapt to the current appearance.** Semantic colors (like [`labelColor`](https://developer.apple.com/documentation/AppKit/NSColor/labelColor) and [`controlColor`](https://developer.apple.com/documentation/AppKit/NSColor/controlColor) in macOS or [`separator`](https://developer.apple.com/documentation/UIKit/UIColor/separator) in iOS and iPadOS) automatically adapt to the current appearance. When you need a custom color, add a Color Set asset to your app’s asset catalog in Xcode, and specify the bright and dim variants of the color. Avoid using hard-coded color values or colors that don’t adapt. + +![An illustration of a square with a light background and four color swatches representing system colors in the light appearance.](https://docs-assets.developer.apple.com/published/083d8f0f70c26b7fdea230f7da1edfeb/dark-mode-system-colors-light%402x.png)System colors in the light appearance + +![An illustration of a square with a dark background and four color swatches representing system colors in the dark appearance.](https://docs-assets.developer.apple.com/published/247df4f7b00e65cdd3827de84135fcda/dark-mode-system-colors-dark%402x.png)System colors in the dark appearance + +**Aim for sufficient color contrast in all appearances.** Using system-defined colors can help you achieve a good contrast ratio between your foreground and background content. At a minimum, make sure the contrast ratio between colors is no lower than 4.5:1. For custom foreground and background colors, strive for a contrast ratio of 7:1, especially in small text. This ratio ensures that your foreground content stands out from the background, and helps your content meet recommended accessibility guidelines. + +**Soften the color of white backgrounds.** If you display a content image that includes a white background, consider slightly darkening the image to prevent the background from glowing in the surrounding Dark Mode context. + +### [Icons and images](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Icons-and-images) + +The system uses [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) (which automatically adapt to Dark Mode) and full-color images that are optimized for both the light and dark appearances. + +**Use SF Symbols wherever possible.** Symbols work well in both appearance modes when you use dynamic colors to tint them or when you add vibrancy. For guidance, see [Color](https://developer.apple.com/design/human-interface-guidelines/color). + +**Design separate interface icons for the light and dark appearances if necessary.** For example, an icon that depicts a full moon might need a subtle dark outline to contrast well with a light background, but need no outline when it displays on a dark background. Similarly, an icon that represents a drop of oil might need a slight border to make the edge visible against a dark background. + +![An illustration of a black droplet icon against a light background.](https://docs-assets.developer.apple.com/published/5377a16f9c47c32d5716a2de9e7e5ddb/dark-mode-icon-in-light-mode%402x.png)Icon in the light appearance with no border + +![An illustration of a black droplet icon against a dark background. The icon has a white border to distinguish it from the similar surrounding color.](https://docs-assets.developer.apple.com/published/a2ebe256a3e677367cc3e965e8282168/dark-mode-icon-in-dark-mode%402x.png)Icon in the dark appearance with border for better contrast + +**Make sure full-color images and icons look good in both appearances.** Use the same asset if it looks good in both the light and dark appearances. If an asset looks good in only one mode, modify the asset or create separate light and dark assets. Use asset catalogs to combine your assets into a single named image. + +![An illustration of two people sitting at a restaurant table done in a simple, abstract style. The illustration has a light background and its details are clearly visible.](https://docs-assets.developer.apple.com/published/017a90f0e42a841edec3d4238f408e9e/dark-mode-illustration-in-light-mode%402x.png)Illustration on a light background + +![An illustration of two people sitting at a restaurant table done in a simple, abstract style. The illustration has a dark background, and the darker portions of the image are hard to distinguish from the background.](https://docs-assets.developer.apple.com/published/97c07bc517069bf9175e7a3374ed95aa/dark-mode-illustration-in-dark-mode-incorrect%402x.png)On a dark background, the same illustration has poor contrast and many details are lost + +![An illustration of two people sitting at a restaurant table done in a simple, abstract style. The illustration has a dark background, and its color values are adjusted to be clearly visible in contrast to the background.](https://docs-assets.developer.apple.com/published/fa4aec31ae33aadce2ed0a0434c9c605/dark-mode-illustration-in-dark-mode-correct%402x.png)Illustration adjusted for better contrast on a dark background + +### [Text](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Text) + +The system uses vibrancy and increased contrast to maintain the legibility of text on darker backgrounds. + +**Use the system-provided label colors for labels.** The primary, secondary, tertiary, and quaternary label colors adapt automatically to the light and dark appearances. + +![An illustration of a button in the light appearance with dark primary label text.](https://docs-assets.developer.apple.com/published/4dc33e45cd6cae3da766f885044174e9/dark-mode-label-in-light-mode%402x.png)Primary label in the light appearance + +![An illustration of a button in the dark appearance with light secondary label text.](https://docs-assets.developer.apple.com/published/5a2df784b29a55d1db485c30efb94009/dark-mode-label-in-dark-mode%402x.png)Secondary label in the dark appearance + +**Use system views to draw text fields and text views.** System views and controls make your app’s text look good on all backgrounds, adjusting automatically for the presence or absence of vibrancy. When possible, use a system-provided view to display text instead of drawing the text yourself. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Platform-considerations) + + _No additional considerations for tvOS. Dark Mode isn’t supported in visionOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/dark-mode#iOS-iPadOS) + +In Dark Mode, the system uses two sets of background colors — called _base_ and _elevated_ — to enhance the perception of depth when one dark interface is layered above another. The base colors are dimmer, making background interfaces appear to recede, and the elevated colors are brighter, making foreground interfaces appear to advance. + +![A diagram that shows a stack of 4 terms on top of a black background. The term at the top shows the most contrast with the background and the term at the bottom shows the least.](https://docs-assets.developer.apple.com/published/0d71ac9f5186541dce35b5f702311bd0/base-with-four-semantic-colors%402x.png)Base + +![A diagram that shows a stack of 4 terms on top of a nearly black background. The term at the top shows the most contrast with the background and the term at the bottom shows the least.](https://docs-assets.developer.apple.com/published/0dacc182adc819b08eb8cdcc897b08a4/elevated-with-four-semantic-colors%402x.png)Elevated + +![A diagram that shows a stack of 4 terms on top of a white background. The term at the top shows the most contrast with the background and the term at the bottom shows the least.](https://docs-assets.developer.apple.com/published/cbbe9a39049fd3d3d2122876de64d207/light-with-four-semantic-colors%402x.png)Light + +**Prefer the system background colors.** Dark Mode is dynamic, which means that the background color automatically changes from base to elevated when an interface is in the foreground, such as a popover or modal sheet. The system also uses the elevated background color to provide visual separation between apps in a multitasking environment and between windows in a multiple-window context. Using a custom background color can make it harder for people to perceive these system-provided visual distinctions. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/dark-mode#macOS) + +When people choose the graphite accent color in General settings, macOS causes window backgrounds to pick up color from the current desktop picture. The result — called _desktop tinting_ — is a subtle effect that helps windows blend more harmoniously with their surrounding content. + +**Include some transparency in custom component backgrounds when appropriate.** Transparency lets your components pick up color from the window background when desktop tinting is active, creating a visual harmony that can persist even when the desktop picture changes. To help achieve this harmony, add transparency only to a custom component that has a visible background or bezel, and only when the component is in a neutral state, such as state that doesn’t use color. You don’t want to add transparency when the component is in a state that uses color, because doing so can cause the component’s color to fluctuate when the window background adjusts to a different location on the desktop or when the desktop picture changes. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Related) + +[Color](https://developer.apple.com/design/human-interface-guidelines/color) + +[Materials](https://developer.apple.com/design/human-interface-guidelines/materials) + +[Typography](https://developer.apple.com/design/human-interface-guidelines/typography) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_1x.jpg) Meet Liquid Glass ](https://developer.apple.com/videos/play/wwdc2025/219) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/174747D6-8723-4194-A932-7765179F1108/2949_wide_250x141_1x.jpg) Implementing Dark Mode on iOS ](https://developer.apple.com/videos/play/wwdc2019/214) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/dark-mode#Change-log) + +Date| Changes +---|--- +August 6, 2024| Added art contrasting the light and dark appearances. + diff --git a/skills/hig-foundations/references/icons.md b/skills/hig-foundations/references/icons.md new file mode 100644 index 00000000..69b46b4f --- /dev/null +++ b/skills/hig-foundations/references/icons.md @@ -0,0 +1,263 @@ +--- +title: "Icons | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/icons + +# Icons + +An effective icon is a graphic asset that expresses a single concept in ways people instantly understand. + +![A sketch of the Command key icon. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/e71f139e5e50d9d10d91830b0af405c1/foundations-icons-intro%402x.png) + +Apps and games use a variety of simple icons to help people understand the items, actions, and modes they can choose. Unlike [app icons](https://developer.apple.com/design/human-interface-guidelines/app-icons), which can use rich visual details like shading, texturing, and highlighting to evoke the app’s personality, an _interface icon_ typically uses streamlined shapes and touches of color to communicate a straightforward idea. + +You can design interface icons — also called _glyphs_ — or you can choose symbols from the SF Symbols app, using them as-is or customizing them to suit your needs. Both interface icons and symbols use black and clear colors to define their shapes; the system can apply other colors to the black areas in each image. For guidance, see [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/icons#Best-practices) + +**Create a recognizable, highly simplified design.** Too many details can make an interface icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly. In general, icons work best when they use familiar visual metaphors that are directly related to the actions they initiate or content they represent. + +**Maintain visual consistency across all interface icons in your app.** Whether you use only custom icons or mix custom and system-provided ones, all interface icons in your app need to use a consistent size, level of detail, stroke thickness (or weight), and perspective. Depending on the visual weight of an icon, you may need to adjust its dimensions to ensure that it appears visually consistent with other icons. + +![Diagram of four glyphs in a row. From the left, the glyphs are a camera, a heart, an envelope, and an alarm clock. Two horizontal dashed lines show the bottom and top boundaries of the row and a horizontal red line shows the midpoint. All four glyphs are solid black; some include interior detail lines in white. Parts of the alarm clock extend above the top dashed line because its lighter visual weight requires greater height to achieve balance with the other glyphs.](https://docs-assets.developer.apple.com/published/f1cf8ce0ca53b7cb3bce1391a378f6ce/custom-icon-sizes%402x.png)To help achieve visual consistency, adjust individual icon sizes as necessary… + +![Diagram of the same four glyphs shown above and the same horizontal dashed lines at top and bottom and horizontal red line through the middle. In this diagram, all four glyphs are solid gray; the interior detail lines are black to emphasize that all lines use the same weight.](https://docs-assets.developer.apple.com/published/91320cdd7a31574df355383d83eb1ceb/custom-icon-line-weights%402x.png)…and use the same stroke weight in every icon. + +**In general, match the weights of interface icons and adjacent text.** Unless you want to emphasize either the icons or the text, using the same weight for both gives your content a consistent appearance and level of emphasis. + +**If necessary, add padding to a custom interface icon to achieve optical alignment.** Some icons — especially asymmetric ones — can look unbalanced when you center them geometrically instead of optically. For example, the download icon shown below has more visual weight on the bottom than on the top, which can make it look too low if it’s geometrically centered. + +![Two images of a white arrow that points down to a white horizontal line segment within a black disk. The image on the right includes two horizontal pink bars — one between the top of the glyph and the top of the disk and the other between the bottom of the glyph and the bottom of the disk — that show the glyph is geometrically centered within the disk.](https://docs-assets.developer.apple.com/published/1c13eed753a1ebcfd6d35929738476c7/asymmetric-glyph%402x.png)An asymmetric icon can look off center even though it’s not. + +In such cases, you can slightly adjust the position of the icon until it’s optically centered. When you create an asset that includes your adjustments as padding around an interface icon (as shown below on the right), you can optically center the icon by geometrically centering the asset. + +![Two images of a white arrow that points down to a white horizontal line segment within a black disk. The image on the left includes the two horizontal pink bars in the same locations as in the previous illustration, but the glyph has been moved up by a few pixels. The image on the right includes a pink rectangle overlaid on top of the glyph to represent a padding area, which includes the extra pixels below the glyph.](https://docs-assets.developer.apple.com/published/c31bce31456820badff997c95db264c6/asymmetric-glyph-optically-centered%402x.png)Moving the icon a few pixels higher optically centers it; including the pixels in padding simplifies centering. + +Adjustments for optical centering are typically very small, but they can have a big impact on your app’s appearance. + +![Two images of a white arrow that points down to a white horizontal line segment within a black disk. The glyph on the left is geometrically centered and the one on the right is optically centered.](https://docs-assets.developer.apple.com/published/5d9da37476ee3225a29ce3efbfd86cac/asymmetric-glyph-before-and-after%402x.png)Before optical centering (left) and after optical centering (right). + +**Provide a selected-state version of an interface icon only if necessary.** You don’t need to provide selected and unselected appearances for an icon that’s used in standard system components such as toolbars, tab bars, and buttons. The system updates the visual appearance of the selected state automatically. + +![An image of two toolbar buttons that share a background. The left button shows the Filter icon in a selected state, using a blue tint color for its background. The right button shows the More icon in an unselected state, using the default appearance for toolbar buttons.](https://docs-assets.developer.apple.com/published/b5c874fca24c428b421c008b29709986/icons-selection-correct%402x.png)In a toolbar, a selected icon receives the app’s accent color. + +**Use inclusive images.** Consider how your icons can be understandable and welcoming to everyone. Prefer depicting gender-neutral human figures and avoid images that might be hard to recognize across different cultures or languages. For guidance, see [Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion). + +**Include text in your design only when it’s essential for conveying meaning.** For example, using a character in an interface icon that represents text formatting can be the most direct way to communicate the concept. If you need to display individual characters in your icon, be sure to localize them. If you need to suggest a passage of text, design an abstract representation of it, and include a flipped version of the icon to use when the context is right-to-left. For guidance, see [Right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left). + +![A partial screenshot of the SF Symbols app showing the info panel for the character symbol, which looks like the capital letter A. Below the image, the following eight localized versions of the symbol are listed: Latin, Arabic, Hebrew, Hindi, Japanese, Korean, Thai, and Chinese.](https://docs-assets.developer.apple.com/published/1037fd04c26206ca1b1dee2e34e123af/character-in-glyph%402x.png)Create localized versions of an icon that displays individual characters. + +![A partial screenshot of the SF Symbols app showing the info panel for the text dot page symbol, which looks like three left-aligned horizontal lines inside a rounded rectangle. Below the image, the left-to-right and right-to-left localized versions are shown.](https://docs-assets.developer.apple.com/published/2edc8ff4ae7af79f32543009ba2f7084/abstract-text-in-glyph%402x.png)Create a flipped version of an icon that suggests reading direction. + +**If you create a custom interface icon, use a vector format like PDF or SVG.** The system automatically scales a vector-based interface icon for high-resolution displays, so you don’t need to provide high-resolution versions of it. In contrast, PNG — used for app icons and other images that include effects like shading, textures, and highlighting — doesn’t support scaling, so you have to supply multiple versions for each PNG-based interface icon. Alternatively, you can create a custom SF Symbol and specify a scale that ensures the symbol’s emphasis matches adjacent text. For guidance, see [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols). + +**Provide alternative text labels for custom interface icons.** Alternative text labels — or accessibility descriptions — aren’t visible, but they let VoiceOver audibly describe what’s onscreen, simplifying navigation for people with visual disabilities. For guidance, see [VoiceOver](https://developer.apple.com/design/human-interface-guidelines/voiceover). + +**Avoid using replicas of Apple hardware products.** Hardware designs tend to change frequently and can make your interface icons and other content appear dated. If you must display Apple hardware, use only the images available in [Apple Design Resources](https://developer.apple.com/design/resources/) or the SF Symbols that represent various Apple products. + +## [Standard icons](https://developer.apple.com/design/human-interface-guidelines/icons#Standard-icons) + +For icons to represent common actions in [menus](https://developer.apple.com/design/human-interface-guidelines/menus), [toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars), [buttons](https://developer.apple.com/design/human-interface-guidelines/buttons), and other places in interfaces across Apple platforms, you can use these [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols). + +### [Editing](https://developer.apple.com/design/human-interface-guidelines/icons#Editing) + +Action| Icon| Symbol name +---|---|--- +Cut| ![An icon showing a pair of scissors.](https://docs-assets.developer.apple.com/published/16c5fe84ae743e06cf2d388fc64e0cf4/icons-symbols-meaning-cut%402x.png)| `scissors` +Copy| ![An icon showing two copies of a document.](https://docs-assets.developer.apple.com/published/a88919c55265efbadeac0df5e16ffd05/icons-symbols-meaning-copy%402x.png)| `document.on.document` +Paste| ![An icon showing a document in front of a clipboard.](https://docs-assets.developer.apple.com/published/20e32bbb2a3a94eb35d01ddfa9c630e0/icons-symbols-meaning-paste%402x.png)| `document.on.clipboard` +Done| ![An icon showing a checkmark.](https://docs-assets.developer.apple.com/published/833bd3b8ccdf0e2fee0893b3858ddae5/icons-symbols-meaning-done-save%402x.png)| `checkmark ` +Save +Cancel| ![An icon showing an X.](https://docs-assets.developer.apple.com/published/b834206c8d155bc1b0d9d17c206c6da3/icons-symbols-meaning-close-cancel%402x.png)| `xmark` +Close +Delete| ![An icon showing a trash can.](https://docs-assets.developer.apple.com/published/61f8368d02b05af22d3253a892ced7f3/icons-symbols-meaning-delete%402x.png)| `trash` +Undo| ![An icon showing an arrow curving toward the top left.](https://docs-assets.developer.apple.com/published/e3e973d07e4cfa983c92e37da5b3e104/icons-symbols-meaning-undo%402x.png)| `arrow.uturn.backward` +Redo| ![An icon showing an arrow curving toward the top right.](https://docs-assets.developer.apple.com/published/0f263db97ca2b7c31bbbd3cd5682d071/icons-symbols-meaning-redo%402x.png)| `arrow.uturn.forward` +Compose| ![An icon showing a pencil positioned over a square.](https://docs-assets.developer.apple.com/published/cfac914468b7fa2f287495f8644f3937/icons-symbols-meaning-compose%402x.png)| `square.and.pencil` +Duplicate| ![An icon showing a square with a plus sign on top of another square.](https://docs-assets.developer.apple.com/published/96323f746d3c67172648745420a15c27/icons-symbols-meaning-duplicate%402x.png)| `plus.square.on.square` +Rename| ![An icon showing a pencil.](https://docs-assets.developer.apple.com/published/8d3692b6e29cf0cdcb7885af414b2693/icons-symbols-meaning-rename%402x.png)| `pencil` +Move to| ![An icon showing a folder.](https://docs-assets.developer.apple.com/published/77c3e45c395bf2d2225c85979eca53a8/icons-symbols-meaning-move-to-folder%402x.png)| `folder` +Folder +Attach| ![An icon showing a paperclip.](https://docs-assets.developer.apple.com/published/e493eab83f8cc2a6f0aaa2ced386dcff/icons-symbols-meaning-attach%402x.png)| `paperclip` +Add| ![An icon showing a plus sign.](https://docs-assets.developer.apple.com/published/e0a7d36fc7aecfd6e49a4d0c0cb196af/icons-symbols-meaning-add%402x.png)| `plus` +More| ![An icon showing an ellipsis.](https://docs-assets.developer.apple.com/published/92e0b17a3881b62008563deb4a2aca40/icons-symbols-meaning-more%402x.png)| `ellipsis` + +### [Selection](https://developer.apple.com/design/human-interface-guidelines/icons#Selection) + +Action| Icon| Symbol name +---|---|--- +Select| ![An icon showing a checkmark in a circle.](https://docs-assets.developer.apple.com/published/7eac493b5a3896062a90328117d43e90/icons-symbols-meaning-select-all%402x.png)| `checkmark.circle` +Deselect| ![An icon showing an X.](https://docs-assets.developer.apple.com/published/b834206c8d155bc1b0d9d17c206c6da3/icons-symbols-meaning-deselect-close%402x.png)| `xmark` +Close +Delete| ![An icon showing a trash can.](https://docs-assets.developer.apple.com/published/61f8368d02b05af22d3253a892ced7f3/icons-symbols-meaning-delete%402x.png)| `trash` + +### [Text formatting](https://developer.apple.com/design/human-interface-guidelines/icons#Text-formatting) + +Action| Icon| Symbol name +---|---|--- +Superscript| ![An icon showing the capital letter A with the number 1 in the upper right corner.](https://docs-assets.developer.apple.com/published/7e5e3d9b1b0eb6f340f531841d6b27f9/icons-symbols-meaning-superscript%402x.png)| `textformat.superscript` +Subscript| ![An icon showing the capital letter A with the number 1 in the lower right corner.](https://docs-assets.developer.apple.com/published/aac330c124cac37a78e02d6049943e53/icons-symbols-meaning-subscript%402x.png)| `textformat.subscript` +Bold| ![An icon showing the capital letter B in bold.](https://docs-assets.developer.apple.com/published/c8695e06d6461e79c145e9b6627f70ac/icons-symbols-meaning-bold%402x.png)| `bold` +Italic| ![An icon showing the capital letter I in italics.](https://docs-assets.developer.apple.com/published/9f560283ff88d8d1d4b48f278a831b7b/icons-symbols-meaning-italic%402x.png)| `italic` +Underline| ![An icon showing the capital letter U with an underline.](https://docs-assets.developer.apple.com/published/3b0d371f10bde381bfa1c9a8999797ec/icons-symbols-meaning-underline%402x.png)| `underline` +​​Align Left| ![An icon showing a stack of four horizontal lines of varying widths that align at the left edge.](https://docs-assets.developer.apple.com/published/68c0ff42aa0ac813b57b663562198e15/icons-symbols-meaning-align-left%402x.png)| `text.alignleft` +Center| ![An icon showing a stack of four horizontal lines of varying widths that align in the center.](https://docs-assets.developer.apple.com/published/a10b48c850a047efd4a72cc2919c30da/icons-symbols-meaning-align-center%402x.png)| `text.aligncenter` +Justified| ![An icon showing a stack of four horizontal lines of identical widths.](https://docs-assets.developer.apple.com/published/d71f35b4f71149b0b908dd1ff8cfe01e/icons-symbols-meaning-align-justified%402x.png)| `text.justify` +Align Right| ![An icon showing a stack of four horizontal lines of varying widths that align at the right edge.](https://docs-assets.developer.apple.com/published/8af1da29f8f3173510521492642a82be/icons-symbols-meaning-align-right%402x.png)| `text.alignright` + +### [Search](https://developer.apple.com/design/human-interface-guidelines/icons#Search) + +Action| Icon| Symbol name +---|---|--- +Search| ![An icon showing a magnifying glass.](https://docs-assets.developer.apple.com/published/585f5454757731f942979247bf886ecb/icons-symbols-meaning-search%402x.png)| `magnifyingglass` +Find| ![An icon showing a magnifying glass above a document.](https://docs-assets.developer.apple.com/published/646c6a152822dde685e52a2791ff672f/icons-symbols-meaning-find%402x.png)| `text.page.badge.magnifyingglass` +Find and Replace +Find Next +Find Previous +Use Selection for Find +Filter| ![An icon showing a stack of three horizontal lines decreasing in width from top to bottom.](https://docs-assets.developer.apple.com/published/e0924492d663dac952860673a61f4f96/icons-symbols-meaning-filter%402x.png)| `line.3.horizontal.decrease` + +### [Sharing and exporting](https://developer.apple.com/design/human-interface-guidelines/icons#Sharing-and-exporting) + +Action| Icon| Symbol name +---|---|--- +Share| ![An icon showing an arrow pointing up from the middle of square.](https://docs-assets.developer.apple.com/published/b5fa28be3d82955fc380f44783befd32/icons-symbols-meaning-sharing%402x.png)| `square.and.arrow.up` +Export +Print| ![An icon showing a printer.](https://docs-assets.developer.apple.com/published/9de4d23e30e6fd8331215dd6dab12878/icons-symbols-meaning-print%402x.png)| `printer` + +### [Users and accounts](https://developer.apple.com/design/human-interface-guidelines/icons#Users-and-accounts) + +Action| Icon| Symbol name +---|---|--- +Account| ![An icon showing an abstract representation of a person’s head and shoulders in a circular outline.](https://docs-assets.developer.apple.com/published/512c86a1c2c99bc09991c89c1e535441/icons-symbols-meaning-account-user%402x.png)| `person.crop.circle` +User +Profile + +### [Ratings](https://developer.apple.com/design/human-interface-guidelines/icons#Ratings) + +Action| Icon| Symbol name +---|---|--- +Dislike| ![An icon showing a hand giving a thumbs down gesture.](https://docs-assets.developer.apple.com/published/189b97655ff655985deec03d0466b898/icons-symbols-meaning-dislike%402x.png)| `hand.thumbsdown` +Like| ![An icon showing a hand giving a thumbs up gesture.](https://docs-assets.developer.apple.com/published/6f38eef523ffbb4f1d6de22a6a022309/icons-symbols-meaning-like%402x.png)| `hand.thumbsup` + +### [Layer ordering](https://developer.apple.com/design/human-interface-guidelines/icons#Layer-ordering) + +Action| Icon| Symbol name +---|---|--- +Bring to Front| ![An icon showing a stack of three squares overlapping each other, with the top square using a solid fill style while the other squares are outlines.](https://docs-assets.developer.apple.com/published/c5da334738c9baf5ddaa0d6ed9de0af6/icons-symbols-meaning-bring-to-front%402x.png)| `square.3.layers.3d.top.filled` +Send to Back| ![An icon showing a stack of three squares overlapping each other, with the bottom square using a solid fill style while the other squares are outlines.](https://docs-assets.developer.apple.com/published/1006037b6fa15950ca7ceb933dbb4805/icons-symbols-meaning-send-to-back%402x.png)| `square.3.layers.3d.bottom.filled` +Bring Forward| ![An icon showing a stack of two squares overlapping each other, with the top square using a solid fill style while the other square is an outline.](https://docs-assets.developer.apple.com/published/88b18e0384bca2cd93151169bd507aa3/icons-symbols-meaning-bring-forward%402x.png)| `square.2.layers.3d.top.filled` +Send Backward| ![An icon showing a stack of two squares overlapping each other, with the bottom square using a solid fill style while the other square is an outline.](https://docs-assets.developer.apple.com/published/49eb0ed5381249d763d30d4e515bc57b/icons-symbols-meaning-send-backwards%402x.png)| `square.2.layers.3d.bottom.filled` + +### [Other](https://developer.apple.com/design/human-interface-guidelines/icons#Other) + +Action| Icon| Symbol name +---|---|--- +Alarm| ![An icon showing an alarm clock.](https://docs-assets.developer.apple.com/published/b777cb6bcc99642b037824c78a7efb0e/icons-symbols-meaning-alarm%402x.png)| `alarm` +Archive| ![An icon showing a file box.](https://docs-assets.developer.apple.com/published/50a3b677d72b3d031ea66d10198bfb59/icons-symbols-meaning-archive%402x.png)| `archivebox` +Calendar| ![An icon showing a calendar.](https://docs-assets.developer.apple.com/published/4b14bf07cf562405caebedb2e200e3dc/icons-symbols-meaning-calendar%402x.png)| `calendar` + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/icons#Platform-considerations) + + _No additional considerations for iOS, iPadOS, tvOS, visionOS, or watchOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/icons#macOS) + +#### [Document icons](https://developer.apple.com/design/human-interface-guidelines/icons#Document-icons) + +If your macOS app can use a custom document type, you can create a document icon to represent it. Traditionally, a document icon looks like a piece of paper with its top-right corner folded down. This distinctive appearance helps people distinguish documents from apps and other content, even when icon sizes are small. + +If you don’t supply a document icon for a file type you support, macOS creates one for you by compositing your app icon and the file’s extension onto the canvas. For example, Preview uses a system-generated document icon to represent JPG files. + +![An image of the Preview document icon for a JPG file.](https://docs-assets.developer.apple.com/published/bfe462604c63811cb542e7c0fc46185e/doc-icon-generated%402x.png) + +In some cases, it can make sense to create a set of document icons to represent a range of file types your app handles. For example, Xcode uses custom document icons to help people distinguish projects, AR objects, and Swift code files. + +![Image of an Xcode project document icon.](https://docs-assets.developer.apple.com/published/8cd56a7291cd6b41fe391958f704c823/doc-icon-custom-1%402x.png) + +![Image of a document icon for an AR object.](https://docs-assets.developer.apple.com/published/a1449177968f693c1bd68c2b146df7c3/doc-icon-custom-2%402x.png) + +![Image of a document icon for a Swift file.](https://docs-assets.developer.apple.com/published/495bd043bf65349ec96f6728941386f8/doc-icon-custom-3%402x.png) + +To create a custom document icon, you can supply any combination of background fill, center image, and text. The system layers, positions, and masks these elements as needed and composites them onto the familiar folded-corner icon shape. + +![A square canvas that contains a grid of pink lines and a jagged white EKG line that runs horizontally across the middle. The pink grid gets lighter in color toward the bottom edge.](https://docs-assets.developer.apple.com/published/2aed446834a2dc6e8275b6bd7a797ca9/doc-icon-parts-background-fill%402x.png)Background fill + +![A solid pink heart.](https://docs-assets.developer.apple.com/published/b59c836903d1b409ab9e21f81762df3e/doc-icon-parts-center-image%402x.png)Center image + +![The word heart in all caps.](https://docs-assets.developer.apple.com/published/56c5adedc0c08a167a4a03e706924ee6/doc-icon-parts-text%402x.png)Text + +![A custom document icon that displays the pink heart and the word heart on top of the pink grid and white EKG line.](https://docs-assets.developer.apple.com/published/d5da9148d27f60891780ab1a9546a111/doc-icon-parts%402x.png)macOS composites the elements you supply to produce your custom document icon. + +[Apple Design Resources](https://developer.apple.com/design/resources/#macos-apps) provides a template you can use to create a custom background fill and center image for a document icon. As you use this template, follow the guidelines below. + +**Design simple images that clearly communicate the document type.** Whether you use a background fill, a center image, or both, prefer uncomplicated shapes and a reduced palette of distinct colors. Your document icon can display as small as 16x16 px, so you want to create designs that remain recognizable at every size. + +**Designing a single, expressive image for the background fill can be a great way to help people understand and recognize a document type.** For example, Xcode and TextEdit both use rich background images that don’t include a center image. + +![Image of an Xcode project document icon.](https://docs-assets.developer.apple.com/published/8cd56a7291cd6b41fe391958f704c823/doc-icon-custom-1%402x.png) + +![Image of a TextEdit rich text document icon.](https://docs-assets.developer.apple.com/published/f32709a5ff5742e79fd03a58ae1dd9c6/doc-icon-fill-only%402x.png) + +**Consider reducing complexity in the small versions of your document icon.** Icon details that are clear in large versions can look blurry and be hard to recognize in small versions. For example, to ensure that the grid lines in the custom heart document icon remain clear in intermediate sizes, you might use fewer lines and thicken them by aligning them to the reduced pixel grid. In the 16x16 px size, you might remove the lines altogether. + +![Pixelated image of the heart document icon. The grid, the EKG line, the heart shape, and the word heart are visible but blurry.](https://docs-assets.developer.apple.com/published/1f8bc7946a75363224f373924b557a3a/doc-icon-fewer-details-1%402x.png)The 32x32 px icon has fewer grid lines and a thicker EKG line. + +![Pixelated image of the heart document icon, in which only the blurry heart shape and EKG line are visible.](https://docs-assets.developer.apple.com/published/e46ac887801d9a16393948c3f2098715/doc-icon-fewer-details-2%402x.png)The 16x16 px @2x icon retains the EKG line but has no grid lines. + +![Pixelated image of the heart document icon, in which only the blurry heart shape is visible.](https://docs-assets.developer.apple.com/published/fd0d2afcd76a9b25c1217ef2ffb1ad0e/doc-icon-fewer-details-3%402x.png)The 16x16 px @1x icon has no EKG line and no grid lines. + +**Avoid placing important content in the top-right corner of your background fill.** The system automatically masks your image to fit the document icon shape and draws the white folded corner on top of the fill. Create a set of background images in the sizes listed below. + + * 512x512 px @1x, 1024x1024 px @2x + + * 256x256 px @1x, 512x512 px @2x + + * 128x128 px @1x, 256x256 px @2x + + * 32x32 px @1x, 64x64 px @2x + + * 16x16 px @1x, 32x32 px @2x + + + + +**If a familiar object can convey a document’s type or its connection with your app, consider creating a center image that depicts it.** Design a simple, unambiguous image that’s clear and recognizable at every size. The center image measures half the size of the overall document icon canvas. For example, to create a center image for a 32x32 px document icon, use an image canvas that measures 16x16 px. You can provide center images in the following sizes: + + * 256x256 px @1x, 512x512 px @2x + + * 128x128 px @1x, 256x256 px @2x + + * 32x32 px @1x, 64x64 px @2x + + * 16x16 px @1x, 32x32 px @2x + + + + +**Define a margin that measures about 10% of the image canvas and keep most of the image within it.** Although parts of the image can extend into this margin for optical alignment, it’s best when the image occupies about 80% of the image canvas. For example, most of the center image in a 256x256 px canvas would fit in an area that measures 205x205 px. + +![Diagram of the solid pink heart shape within blue margins that measure 10 percent of the canvas width.](https://docs-assets.developer.apple.com/published/7cc19b2ae1e99d26ba69e1351683ede1/doc-icon-parts-margins%402x.png) + +**Specify a succinct term if it helps people understand your document type.** By default, the system displays a document’s extension at the bottom edge of the document icon, but if the extension is unfamiliar you can supply a more descriptive term. For example, the document icon for a SceneKit scene file uses the term _scene_ instead of the file extension _scn_. The system automatically scales the extension text to fit in the document icon, so be sure to use a term that’s short enough to be legible at small sizes. By default, the system capitalizes every letter in the text. + +![Image of a SceneKit scene document icon.](https://docs-assets.developer.apple.com/published/3b4bb7de9edb5870d3a162aae8153163/doc-icon-custom-extension%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/icons#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/icons#Related) + +[App icons](https://developer.apple.com/design/human-interface-guidelines/app-icons) + +[SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/icons#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/597D59A1-F123-4B08-BEE1-6D79A4C22268/1914_wide_250x141_1x.jpg) Designing Glyphs ](https://developer.apple.com/videos/play/wwdc2017/823) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/icons#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added a table of SF Symbols that represent common actions. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-foundations/references/images.md b/skills/hig-foundations/references/images.md new file mode 100644 index 00000000..6b841670 --- /dev/null +++ b/skills/hig-foundations/references/images.md @@ -0,0 +1,176 @@ +--- +title: "Images | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/images + +# Images + +To make sure your artwork looks great on all devices you support, learn how the system displays content and how to deliver art at the appropriate scale factors. + +![A sketch of a photo, suggesting imagery. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b0a68ac859ddb098858e92609997d307/foundations-images-intro%402x.png) + +## [Resolution](https://developer.apple.com/design/human-interface-guidelines/images#Resolution) + +Different devices can display images at different resolutions. For example, a 2D device displays images according to the resolution of its screen. + +A _point_ is an abstract unit of measurement that helps visual content remain consistent regardless of how it’s displayed. In 2D platforms, a point maps to a number of pixels that can vary according to the resolution of the display; in visionOS, a point is an angular value that allows visual content to scale according to its distance from the viewer. + +When creating bitmap images, you specify a _scale factor_ which determines the resolution of an image. You can visualize scale factor by considering the density of pixels per point in 2D displays of various resolutions. For example, a scale factor of 1 (also called @1x) describes a 1:1 pixel density, where one pixel is equal to one point. High-resolution 2D displays have higher pixel densities, such as 2:1 or 3:1. A 2:1 density (called @2x) has a scale factor of 2, and a 3:1 density (called @3x) has a scale factor of 3. Because of higher pixel densities, high-resolution displays demand images with more pixels. + +![Image of a circle that's in standard resolution at scale factor of @1x, and is 10 by 10 pixels.](https://docs-assets.developer.apple.com/published/a9b04545f30aff45ca503e263c02d464/image-resolution-1x%402x.png)1x (10x10 px) + +![Image of a circle that's in high resolution at a scale factor of @2x, and is 20 by 20 pixels.](https://docs-assets.developer.apple.com/published/cf203acc0ee6299833fb2e5b5c4a7348/image-resolution-2x%402x.png)2x (20x20 px) + +![Image of a circle that's in high resolution at a scale factor of @3x, and is 30 by 30 pixels.](https://docs-assets.developer.apple.com/published/0de9ee5144fc2278682eb211ac8f571d/image-resolution-3x%402x.png)3x (30x30 px) + +**Provide high-resolution assets for all bitmap images in your app, for every device you support.** As you add each image to your project’s asset catalog, identify its scale factor by appending “@1x,” “@2x,” or “@3x” to its filename. Use the following values for guidance; for additional scale factors, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout). + +Platform| Scale factors +---|--- +iPadOS, watchOS| @2x +iOS| @2x and @3x +visionOS| @2x or higher (see [visionOS](https://developer.apple.com/design/human-interface-guidelines/images#visionOS)) +macOS, tvOS| @1x and @2x + +**In general, design images at the lowest resolution and scale them up to create high-resolution assets.** When you use resizable vectorized shapes, you might want to position control points at whole values so that they’re cleanly aligned at 1x. This positioning allows the points to remain cleanly aligned to the raster grid at higher resolutions, because 2x and 3x are multiples of 1x. + +## [Formats](https://developer.apple.com/design/human-interface-guidelines/images#Formats) + +As you create different types of images, consider the following recommendations. + +Image type| Format +---|--- +Bitmap or raster work| De-interlaced PNG files +PNG graphics that don’t require full 24-bit color| An 8-bit color palette +Photos| JPEG files, optimized as necessary, or HEIC files +Stereo or spatial photos| Stereo HEIC +Flat icons, interface icons, and other flat artwork that requires high-resolution scaling| PDF or SVG files + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/images#Best-practices) + +**Include a color profile with each image.** Color profiles help ensure that your app’s colors appear as intended on different displays. For guidance, see [Color management](https://developer.apple.com/design/human-interface-guidelines/color#Color-management). + +**Always test images on a range of actual devices.** An image that looks great at design time may appear pixelated, stretched, or compressed when viewed on various devices. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/images#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or macOS._ + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/images#tvOS) + +Layered images are at the heart of the Apple TV user experience. The system combines layered images, transparency, scaling, and motion to produce a sense of realism and vigor that evokes a personal connection as people interact with onscreen content. + +#### [Parallax effect](https://developer.apple.com/design/human-interface-guidelines/images#Parallax-effect) + + _Parallax_ is a subtle visual effect the system uses to convey depth and dynamism when an element is in focus. As an element comes into focus, the system elevates it to the foreground, gently swaying it while applying illumination that makes the element’s surface appear to shine. After a period of inactivity, out-of-focus content dims and the focused element expands. + +Layered images are required to support the parallax effect. + +Video with custom controls. + +Content description: An animation of a tvOS app icon moving to show the parallax effect. + +Play + +#### [Layered images](https://developer.apple.com/design/human-interface-guidelines/images#Layered-images) + +A _layered image_ consists of two to five distinct layers that come together to form a single image. The separation between layers, along with use of transparency, creates a feeling of depth. As someone interacts with an image, layers closer to the surface elevate and scale, overlapping lower layers farther back and producing a 3D effect. + +Important + +Your tvOS [app icon](https://developer.apple.com/design/human-interface-guidelines/app-icons#tvOS) must use a layered image. For other focusable images in your app, including [Top Shelf](https://developer.apple.com/design/human-interface-guidelines/top-shelf) images, layered images are strongly encouraged, but optional. + +You can embed layered images in your app or retrieve them from a content server at runtime. For guidance on adding layered images to your app, see the [Parallax Previewer User Guide](https://help.apple.com/itc/parallaxpreviewer/). + +Developer note + +If 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. + +**Use standard interface elements to display layered images.** If you use standard views and system-provided focus APIs — such as [`FocusState`](https://developer.apple.com/documentation/SwiftUI/FocusState) — layered images automatically get the parallax treatment when people bring them into focus. + +**Identify logical foreground, middle, and background elements.** In foreground layers, display prominent elements like a character in a game, or text on an album cover or movie poster. Middle layers are perfect for secondary content and effects like shadows. Background layers are opaque backdrops that showcase the foreground and middle layers without upstaging them. + +**Generally, keep text in the foreground.** Unless you want to obscure text, bring it to the foreground layer for clarity. + +**Keep the background layer opaque.** Using varying levels of opacity to let content shine through higher layers is fine, but your background layer must be opaque — you’ll get an error if it’s not. An opaque background layer ensures your artwork looks great with parallax, drop shadows, and system backgrounds. + +**Keep layering simple and subtle.** Parallax is designed to be almost unnoticeable. Excessive 3D effects can appear unrealistic and jarring. Keep depth simple to bring your content to life and add delight. + +**Leave a safe zone around the foreground layers of your image.** When focused, content on some layers may be cropped as the layered image scales and moves. To ensure that essential content is always visible, keep it within a safe zone. For guidance, see [App icons](https://developer.apple.com/design/human-interface-guidelines/app-icons). + +**Always preview layered images.** To ensure your layered images look great on Apple TV, preview them throughout your design process using Xcode, the Parallax Previewer app for macOS, or the Parallax Exporter plug-in for Adobe Photoshop. Pay special attention as scaling and clipping occur, and readjust your images as needed to keep important content safe. After your layered images are final, preview them on an actual TV for the most accurate representation of what people will see. To download Parallax Previewer and Parallax Exporter, see [Resources](https://developer.apple.com/design/resources/#parallax-previewer). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/images#visionOS) + +In visionOS, people can view images at a much larger range of sizes than in any other platform, and the system dynamically scales the image resolution to match the current size. Because you can position images at specific angles within someone’s surroundings, image pixels may not line up 1:1 with screen pixels. + +**Create a layered app icon.** App icons in visionOS are composed of two to three layers that provide the appearance of depth by moving at subtly different rates when the icon is in focus. For guidance, see [Layer design](https://developer.apple.com/design/human-interface-guidelines/app-icons#Layer-design). + +**Prefer vector-based art for 2D images.** Avoid bitmap content because it might not look good when the system scales it up. If you use Core Animation layers, see [Drawing sharp layer-based content in visionOS](https://developer.apple.com/documentation/visionOS/drawing-sharp-layer-based-content) for developer guidance. + +**If you need to use rasterized images, balance quality with performance as you choose a resolution.** Although a @2x image looks fine at common viewing distances, its fixed resolution means that the system doesn’t dynamically scale it and it might not look sharp from close up. To help a rasterized image look sharp when people view it from a wide range of distances, you can use a higher resolution, but each increase in resolution results in a larger file size and may impact your app’s runtime performance, especially for resolutions over @6x. If you use images that have resolutions higher than @2x, be sure to also apply high-quality image filtering to help balance quality and performance (for developer guidance, see [`filters`](https://developer.apple.com/documentation/QuartzCore/CALayer/filters)). + +#### [Spatial photos and spatial scenes](https://developer.apple.com/design/human-interface-guidelines/images#Spatial-photos-and-spatial-scenes) + +In addition to 2D and stereoscopic images, visionOS apps and games can use RealityKit to display spatial photos and spatial scenes. A _spatial photo_ is a stereoscopic photo with additional spatial metadata, as captured on iPhone 15 Pro or later, Apple Vision Pro, or other compatible camera. A _spatial scene_ is a 3D image generated from a 2D image to add a parallax effect that responds to head movement. For developer guidance, see [`ImagePresentationComponent`](https://developer.apple.com/documentation/RealityKit/ImagePresentationComponent). + +**Make sure spatial photos render correctly in your app.** Use the stereo High-Efficiency Image Codec (HEIC) format to display a spatial photo in your app. When you add spatial metadata to a stereo HEIC, visionOS recognizes the photo as spatial and includes visual treatments that help minimize common causes of stereo-viewing discomfort. + +**Prefer the feathered glass background effect to display text over spatial photos.** If you need to place text over a spatial photo in your app or game, use the feathered glass background effect. The effect adds contrast to make the text readable, and it blurs out detail to help reduce visual discomfort when people view text over spatial photos. For developer guidance, see [`GlassBackgroundEffect`](https://developer.apple.com/documentation/SwiftUI/GlassBackgroundEffect). + +**Take visual comfort into consideration when you make spatial photos from existing 2D content.** When adjusting the spatial metadata of a photo for your app or game, consider how you want people to view your content. Metadata like disparity adjustment can alter how people perceive the 3D scene, and can cause visual discomfort from certain viewing positions. For developer guidance, see [Creating spatial photos and videos with spatial metadata](https://developer.apple.com/documentation/ImageIO/Creating-spatial-photos-and-videos-with-spatial-metadata). + +**Display spatial photos and spatial scenes in standalone views.** Avoid displaying spatial photos inline with other content, as this can cause visual discomfort. Instead, showcase spatial photos or spatial scenes in a separate view, like a sheet or window. If you must display stereoscopic images inline, provide generous spacing between the image and any inline content to help people’s eyes adjust to the depth changes. + +**Use spatial scenes in your app for specific moments.** Each spatial scene can take up to several seconds to generate from an existing image. Design experiences with this limitation in mind. For instance, the Photos app offers an explicit action to create a spatial scene while immersed in a single photo. Avoid displaying too many spatial scenes at once. Instead, use scroll views, pagination, or explicit actions to move to new photos and keep the visual information hierarchy simple. + +**When displaying immersively, prefer minimal UI.** For example, the Spatial Gallery app displays a single piece of content with a small caption and a single Back button, relying on swipe gestures to navigate between items. + +**Prefer displaying larger spatial scenes that you center in someone’s field of view.** When people view a spatial scene, they may move their head laterally to view the parallax effect. Smaller spatial scenes provide less of a parallax effect and may not be as impactful to viewers. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/images#watchOS) + +**In general, avoid transparency to keep image files small.** If you always composite an image on the same solid background color, it’s more efficient to include the background in the image. However, transparency is necessary in complication images, menu icons, and other interface icons that serve as template images, because the system uses it to determine where to apply color. + +**Use autoscaling PDFs to let you provide a single asset for all screen sizes.** Design your image for the 40mm and 42mm screens at 2x. When you load the PDF, WatchKit automatically scales the image based on the device’s screen size, using the values shown below: + +Screen size| Image scale +---|--- +38mm| 90% +40mm| 100% +41mm| 106% +42mm| 100% +44mm| 110% +45mm| 119% +49mm| 119% + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/images#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/images#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/images#Developer-documentation) + +[Drawing sharp layer-based content in visionOS](https://developer.apple.com/documentation/visionOS/drawing-sharp-layer-based-content) — visionOS + +[Images](https://developer.apple.com/documentation/SwiftUI/Images) — SwiftUI + +[`UIImageView`](https://developer.apple.com/documentation/UIKit/UIImageView) — UIKit + +[`NSImageView`](https://developer.apple.com/documentation/AppKit/NSImageView) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/images#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/8226C70F-64DC-4FF1-9956-2DC0751A2143/8241_wide_250x141_1x.jpg) Support HDR images in your app ](https://developer.apple.com/videos/play/wwdc2023/10181) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/09438FDD-3E8B-42A3-A364-78E1A7F2CE6B/1915_wide_250x141_1x.jpg) Get Started with Display P3 ](https://developer.apple.com/videos/play/wwdc2017/821) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/images#Change-log) + +Date| Changes +---|--- +December 16, 2025| Added guidance for spatial photos and spatial scenes in visionOS. +December 5, 2023| Clarified guidance on choosing a resolution for a rasterized image in a visionOS app. +June 21, 2023| Updated to include guidance for visionOS. +September 14, 2022| Added specifications for Apple Watch Ultra. + diff --git a/skills/hig-foundations/references/immersive-experiences.md b/skills/hig-foundations/references/immersive-experiences.md new file mode 100644 index 00000000..580f8c47 --- /dev/null +++ b/skills/hig-foundations/references/immersive-experiences.md @@ -0,0 +1,174 @@ +--- +title: "Immersive experiences | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/immersive-experiences + +# Immersive experiences + +In visionOS, you can design apps and games that extend beyond windows and volumes, immersing people in your content. + +![A sketch that suggests Apple Vision Pro. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/63fd96e56c2b19f4451f688728f0b013/foundations-immersive-experiences-intro%402x.png) + +You can choose whether your visionOS app or game launches in the Shared Space or in a Full Space. In the _Shared Space_ , your software runs alongside other experiences, and people can switch between them much as they do on a Mac; in a _Full Space_ , your app or game runs alone, hiding other experiences and helping people immerse themselves in your content. Apps and games can support different types of immersion, and can transition fluidly between the Shared Space and a Full Space at any time. + +## [Immersion and passthrough](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Immersion-and-passthrough) + +In visionOS, people use passthrough to see their physical surroundings. _Passthrough_ provides real-time video from the device’s external cameras, helping people feel comfortable and connected to their physical context. + +People can also use the [Digital Crown](https://developer.apple.com/design/human-interface-guidelines/digital-crown) at any time to manage app or game content or adjust passthrough. For example, people can press and hold the Digital Crown to recenter content in their field of view or double-click it to briefly hide all content and show passthrough for a clear view of their surroundings. + +The system also helps people remain comfortable by automatically changing the opacity of content in certain situations. For example, if someone gets too close to a physical object in `mixed` immersion, the content in front of them dims briefly so they can see their immediate physical surroundings more clearly. In more immersive experiences — such as in the `progressive` and `full` styles described below — the system defines a boundary that extends about 1.5 meters from the initial position of the wearer’s head. As their head gets close to this boundary, the entire experience begins to fade and passthrough increases. When their head moves beyond this boundary, the immersive visuals are replaced in space by the app’s icon, and are restored when the wearer returns to their original location or recenters their view using the Digital Crown. + +### [Immersion styles](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Immersion-styles) + +When your app or game transitions to a Full Space, the system hides other apps so people can focus on yours. In a Full Space, you can display 3D content that isn’t bound by a window, in addition to content in standard windows and volumes. For developer guidance, see [`automatic`](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle/automatic). + +visionOS offers several ways to immerse people in your content in the Shared Space as well as when you transition to a Full Space. For example, you can: + + * **Use dimmed passthrough to bring attention to your content.** You can subtly dim or tint passthrough and other visible content to bring attention to your app in the Shared Space without hiding other apps and games, or create a more focused experience in a Full Space. While passthrough is tinted black by default, you can apply a custom tint color to create a dynamic experience in your app. For developer guidance, see [`SurroundingsEffect`](https://developer.apple.com/documentation/SwiftUI/SurroundingsEffect). + + + + + * Without dimmed passthrough + * With dimmed passthrough + + + +![A screenshot of a window in the Shared Space.](https://docs-assets.developer.apple.com/published/3aa6d97e5947c39a73cfd8dd7e9c4dff/immersive-spaces-shared-space-regular-content%402x.png) + +![A screenshot of a highlighted window in the Shared Space with dimmed passthrough.](https://docs-assets.developer.apple.com/published/d6645a2853d8dc87e99062f5f575222b/immersive-spaces-shared-space-dimmed-content%402x.png) + + * **Create unbounded 3D experiences.** Use the `mixed` immersion style in a Full Space to blend your content with passthrough. When your app or game runs in a Full Space, you can request access to information about nearby physical objects and room layout, helping you display virtual content in a person’s surroundings. The `mixed` immersion style doesn’t define a boundary. Instead, when a person gets too close to a physical object, the system automatically makes nearby content semi-opaque to help them remain aware of their surroundings. For developer guidance, see [`mixed`](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle/mixed) and [ARKit](https://developer.apple.com/documentation/ARKit). + + * **Use`progressive` immersion to blend your custom environment with a person’s surroundings.** You can use the `progressive` style in a Full Space to display a custom environment that partially replaces passthrough. You can also define a specific range of immersion that works best with your app or game, and display content in portrait or landscape orientation. While in your immersive experience, people can use the Digital Crown to adjust the amount of immersion within either the default range of 120- to 360-degrees or a custom range, if you specify one. The system automatically defines an approximately 1.5-meter boundary when an experience transitions to the `progressive` style. For developer guidance, see [`progressive`](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle/progressive). + + + + +Video with custom controls. + +Content description: A recording of a fully immersive experience in which a video player window appears on top of an Environment. As the viewer adjusts the Digital Crown, passthrough increases to reveal more of the person's physical surroundings. + +Play + + * **Use`full` immersion to create a fully immersive experience.** You can use the `full` style in a Full Space to display a 360-degree custom environment that completely replaces passthrough and transports people to a new place. As with the `progressive` style, the system defines an approximately 1.5-meter boundary when a fully immersive experience starts. For developer guidance, see [`full`](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle/full). + + + + + * Full Space (Mixed) + * Full Space (Progressive) + * Full Space (Immersive) + + + +![A screenshot of an app running in a Full Space using the mixed immersion style in visionOS.](https://docs-assets.developer.apple.com/published/bb7e4d2d5f14673af8223f16b8ef8367/immersive-spaces-full-space-mixed-style%402x.png)Mixed immersion style in a Full Space blending in-app objects with real-world surroundings + +![A screenshot of an app running in a Full Space using the progressive immersion style in visionOS.](https://docs-assets.developer.apple.com/published/7c6bd28f709239805551dfe4db2f4f0e/immersive-spaces-full-space-progressive-style%402x.png)Progressive immersion style in a Full Space blending the app’s custom environment with real-world surroundings + +![A screenshot of an app running in a Full Space using the full immersion style in visionOS.](https://docs-assets.developer.apple.com/published/3e8f31614811987239868bca745cd798/immersive-spaces-full-space-full-style%402x.png)Full immersion style in a Full Space showing a 360-degree custom environment + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Best-practices) + +**Offer multiple ways to use your app or game.** In addition to giving people the freedom to choose their experiences, it’s essential to design your software to support the accessibility features people use to personalize the ways they interact with their devices. For guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**Prefer launching your app or game in the Shared Space or using the`mixed` immersion style.** Launching in the Shared Space lets people reference your app or game while using other running software, and enables seamless switching between them. If your app or game provides a fully immersive or `progressive` style experience, launching in the `mixed` immersion style or with a window-based experience in the Shared Space gives people more control, letting them choose when to increase immersion. + +**Reserve immersion for meaningful moments and content.** Not every task benefits from immersion, and not every immersive task needs to be fully immersive. Although people sometimes want to enter a different world, they often want to stay grounded in their surroundings while they’re using your app or game, and they can appreciate being able to use other software and system features at the same time. Instead of assuming that your app or game needs to be fully immersive most of the time, design ways for people to immerse themselves in the individual tasks and content that make your experience unique. For example, people can browse their albums in Photos using a familiar app window in the Shared Space, but when they want to examine a single photo, they can temporarily transition to a more immersive experience in a Full Space where they can expand the photo and appreciate its details. + +**Help people engage with key moments in your app or game, regardless of the level of immersion.** Cues like dimming, tinting, [motion](https://developer.apple.com/design/human-interface-guidelines/motion), [scale](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Scale), and [Spatial Audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio#visionOS) can help draw people’s attention to a specific area of content, whether it’s in a window in the Shared Space or in a completely immersive experience in a Full Space. Start with subtle cues that gently guide people’s attention, strengthening the cues only when there’s a good reason to do so. + +**Prefer subtle tint colors for passthrough.** In visionOS 2 and later, you can tint passthrough to help a person’s surroundings visually coordinate with your content, while also making their hands look like they belong in your experience. Avoid bright or dramatic tints that can distract people and diminish the sense of immersion. For developer guidance, see [`SurroundingsEffect`](https://developer.apple.com/documentation/SwiftUI/SurroundingsEffect). + +## [Promoting comfort](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Promoting-comfort) + +**Be mindful of people’s visual comfort.** For example, although you can place 3D content anywhere while your app or game is running in a Full Space, prefer placing it within people’s [field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view). Also, make sure you display motion in comfortable ways while your software runs in a Full Space to avoid causing distraction, confusion, or discomfort. For guidance, see [Motion](https://developer.apple.com/design/human-interface-guidelines/motion). + +**Choose a style of immersion that supports the movements people might make while they’re in your app or game.** It’s essential to choose the right style for your immersive experience because it allows the system to respond appropriately when people move. Although people can make minor physical movements while in an immersive experience — such as shifting their weight, turning around, or switching between sitting and standing — making excessive movements can cause the system to interrupt some experiences. In particular, avoid using the `progressive` or `full` immersion styles or transition back to the `mixed` immersion style if you think people might need to move beyond the 1.5-meter boundary. + +**Avoid encouraging people to move while they’re in a progressive or fully immersive experience.** Some people may not want to move, or are unable to move because of a disability or their physical surroundings. Design ways for people to interact with content without moving. For example, let people bring a virtual object closer to them instead of expecting them to move closer to the object. + +**If you use the`mixed` immersion style, avoid obscuring passthrough too much.** People use passthrough to help them understand and navigate their physical surroundings, so it’s important to avoid displaying virtual objects that block too much of their view. If your app or game displays virtual objects that could substantially obscure passthrough, use the `full` or `progressive` immersion styles instead of `mixed`. + +**Adopt ARKit if you want to blend custom content with someone’s surroundings.** For example, you might want to integrate virtual content into someone’s surroundings or use the wearer’s hand positions to inform your experience. If you need access to these types of sensitive data, you must request people’s permission. For guidance, see [Privacy](https://developer.apple.com/design/human-interface-guidelines/privacy); for developer guidance, see [`SceneReconstructionProvider`](https://developer.apple.com/documentation/ARKit/SceneReconstructionProvider). + +## [Transitioning between immersive styles](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Transitioning-between-immersive-styles) + +**Design smooth, predictable transitions when changing immersion.** Help people prepare for different experiences by providing gentle transitions that let people visually track changes. Avoid sudden, jarring transitions that might be disorienting or uncomfortable. For developer guidance, see [`CoordinateSpaceProtocol`](https://developer.apple.com/documentation/SwiftUI/CoordinateSpaceProtocol). + +**Let people choose when to enter or exit a more immersive experience.** It can be disorienting for someone to suddenly enter a more immersive experience when they’re not expecting it. Instead, provide a clear action to enter or exit immersion so people can decide when to be more immersed in your content, and when to leave. For example, Keynote provides a prominent Exit button in its fully immersive Rehearsal environment to help people return to the slide-viewing window. Avoid requiring people to use system controls to reduce immersion in your experience. + +**Indicate the purpose of an exit control.** Make sure your button clarifies whether it returns people to a previous, less immersive context or quits an experience altogether. If exiting your immersive experience also quits your app or game, consider providing controls that let people pause or return to a place where they can save their progress before quitting. + +## [Displaying virtual hands](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Displaying-virtual-hands) + +When your immersive app or game transitions to a Full Space, it can ask permission to hide a person’s hands and instead show virtual hands that represent them. + +**Prefer virtual hands that match familiar characteristics.** For example, match the positions and gestures of the viewer’s hands so they can continue to interact with your app or game in ways that feel natural. Hands that work in familiar ways help people stay immersed in the experience when in fully virtual worlds. + +**Use caution if you create virtual hands that are larger than the viewer’s hands.** Virtual hands that are significantly bigger than human hands can prevent people from seeing the content they’re interested in and can make interactions feel clumsy. Also, large virtual hands can seem out of proportion with the space, appearing to be too close to the viewer’s face. + +**If there’s an interruption in hand-tracking data, fade out virtual hands and reveal the viewer’s own hands.** Don’t let the virtual hands become unresponsive and appear frozen. When hand-tracking data returns, fade the virtual hands back in. + +## [Creating an environment](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Creating-an-environment) + +When your app or game transitions to a Full Space, you can replace passthrough with a custom environment that partially or completely surrounds a person, transporting them to a new place. The following guidelines can help you design a beautiful environment that people appreciate. + +**Minimize distracting content.** To help immerse people in a primary task like watching a video, avoid displaying a lot of movement or high-contrast details in your environment. Alternatively, when you want to draw people’s attention to certain areas of your environment, consider techniques like using the highest quality textures and shapes in the important area while using lower quality assets and dimming in less important areas. + +**Help people distinguish interactive objects in your environment.** People often use an object’s proximity to help them decide if they can interact with it. For example, when you place a 3D object far away from people, they often don’t try to touch or move toward it, but when you place a 3D object close to people, they’re more likely to try interacting with it. + +**Keep animation subtle.** Small, gentle movements, like clouds drifting or transforming, can enrich your custom environment without distracting people or making them uncomfortable. Always avoid displaying too much movement near the edges of a person’s field of view. For guidance, see [Motion](https://developer.apple.com/design/human-interface-guidelines/motion). + +**Create an expansive environment, regardless of the place it depicts.** A small, restrictive environment can make people feel uncomfortable and even claustrophobic. + +**Use Spatial Audio to create atmosphere.** In visionOS, you use Spatial Audio to play sound that people can perceive as coming from specific locations in space, not just from speakers (for guidance, see [Playing audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio)). As you design a soundscape that enhances your custom environment, keep the experience fresh and captivating by avoiding too much repetition or looping. If people can play other audio while they’re in your environment — for example, while watching a movie — be sure to lower the volume of the soundscape or stop it completely. + +**In general, avoid using a flat 360-degree image to create your environment.** A 360-degree image doesn’t tend to give people a sense of scale when they view it in an environment, so it can reduce the immersiveness of the experience. Prefer creating object meshes that include lighting, and use shaders to implement subtle animations like the movements of clouds or leaves or the reflections of objects. + +**Help people feel grounded.** Always provide a ground plane mesh so people don’t feel like they’re floating. If you must use a flat 360-degree image in your environment, adding a ground plane mesh can help it feel more realistic. + +**Minimize asset redundancy.** Using the same assets or models too frequently tends to make an environment feel less realistic. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, tvOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Related) + +[Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout) + +[Motion](https://developer.apple.com/design/human-interface-guidelines/motion) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Developer-documentation) + +[Creating fully immersive experiences in your app](https://developer.apple.com/documentation/visionOS/creating-fully-immersive-experiences) — visionOS + +[Incorporating real-world surroundings in an immersive experience](https://developer.apple.com/documentation/visionOS/incorporating-real-world-surroundings-in-an-immersive-experience) — visionOS + +[`ImmersionStyle`](https://developer.apple.com/documentation/SwiftUI/ImmersionStyle) — visionOS + +[Immersive spaces](https://developer.apple.com/documentation/SwiftUI/Immersive-spaces) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/15489B11-8744-483D-AD38-EF78D8962FF4/8126_wide_250x141_1x.jpg) Principles of spatial design ](https://developer.apple.com/videos/play/wwdc2023/10072) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/942191E7-9B98-487D-AE81-400D58285B31/8129_wide_250x141_1x.jpg) Design spatial SharePlay experiences ](https://developer.apple.com/videos/play/wwdc2023/10075) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/BEBF6FDD-D987-4A45-AF6F-6D4C4575E69F/9198_wide_250x141_1x.jpg) Create custom environments for your immersive apps in visionOS ](https://developer.apple.com/videos/play/wwdc2024/10087) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Change-log) + +Date| Changes +---|--- +June 9, 2025| Clarified guidance and noted the availability of portrait-oriented progressive immersion. +November 19, 2024| Refined immersion style guidance and added artwork. +June 10, 2024| Added guidance for tinting passthrough and specifying initial, minimum, and maximum immersion levels. +May 7, 2024| Added guidance for creating an environment. +February 2, 2024| Clarified guidance for choosing an immersion style that matches the experience your app provides. +October 24, 2023| Updated artwork. +June 21, 2023| New page. + diff --git a/skills/hig-foundations/references/inclusion.md b/skills/hig-foundations/references/inclusion.md new file mode 100644 index 00000000..7946182b --- /dev/null +++ b/skills/hig-foundations/references/inclusion.md @@ -0,0 +1,189 @@ +--- +title: "Inclusion | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/inclusion + +# Inclusion + +Inclusive apps and games put people first by prioritizing respectful communication and presenting content and functionality in ways that everyone can access and understand. + +![A sketch of two people, suggesting inclusion. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/498c87708887321ec79abcf0c45abc66/foundations-inclusion-intro%402x.png) + +To help you design an inclusive app or game, consider the following goals as you review the words and images you use and the experiences you offer. + +As with all design, designing an inclusive app is an iterative process that takes time to get right. Throughout the process, be prepared to examine your assumptions about how other people think and feel and be open to evolving knowledge and understanding. + +## [Inclusive by design](https://developer.apple.com/design/human-interface-guidelines/inclusion#Inclusive-by-design) + +Simple, intuitive experiences are at the core of well-designed apps and games. To design an intuitive experience, you start by investigating people’s goals and perspectives so you can present content that resonates with them. + +Empathy is an important tool in this investigation because it helps you understand how people with different perspectives might respond to the content and experiences you create. For example, you might discover that from some perspectives a word or image is incomprehensible or has a meaning you don’t intend. + +Although each person’s perspective comprises a unique intersection of human qualities that’s both distinct and dynamic, all perspectives arise from human characteristics and experiences that everyone shares, including: + + * Age + + * Gender and gender identity + + * Race and ethnicity + + * Sexuality + + * Physical attributes + + * Cognitive attributes + + * Permanent, temporary, and situational disabilities + + * Language and culture + + * Religion + + * Education + + * Political or philosophical opinions + + * Social and economic context + + + + +As you examine your app or game through different perspectives, avoid framing the work as merely a search for content that might give offense. Although no design should contain offensive material or experiences, an inoffensive app or game isn’t necessarily an inclusive one. Focusing on inclusion can help you avoid potentially offensive content while also helping you create a welcoming experience that everyone can enjoy. + +## [Welcoming language](https://developer.apple.com/design/human-interface-guidelines/inclusion#Welcoming-language) + +Using plain, inclusive language welcomes everyone and helps them understand your app or game. Carefully review the writing in your experience to make sure that your tone and words don’t exclude people. Here are a few tips for writing text — also known as _copy_ — that’s direct, easy to understand, and inclusive. + +**Consider the tone of your copy from different perspectives.** The style of your writing communicates almost as much as the words you use. Although different apps use different communication styles, make sure the tone you use doesn’t send messages you don’t intend. For example, an academic tone can make an app or game seem like it welcomes only high levels of education. As you seek the style that’s right for your experience, be clear, direct, and respectful. + +**Pay attention to how you refer to people.** It typically works well to use _you_ and _your_ to address people directly. Referring to people indirectly as _the user_ or _the player_ can make your experience feel distant and unwelcoming. Also, consider reserving words like _we_ and _our_ to represent your software or company; otherwise, these terms can suggest a personal relationship with people that might be interpreted as insulting or condescending. + +**Avoid using specialized or technical terms without defining them.** Using specialized or technical terms can make your writing more succinct, but doing so excludes people who don’t know what the terms mean. If you must use such terms, be sure to define them first and make the definitions easy for people to look up. Even when people know the definition of a specialized or technical term in a sentence, the sentence is easier to read — and translate — when it uses plain language instead. + +**Replace colloquial expressions with plain language.** Colloquial expressions are often culture-specific and can be difficult to translate. Worse, some colloquial phrases have exclusionary meanings you might not know. For example, the phrases _peanut gallery_ and _grandfathered in_ both arose from oppressive contexts and continue to exclude people. Even when a colloquial phrase doesn’t have an exclusionary meaning, it can still exclude everyone who doesn’t understand it. + +**Consider carefully before including humor.** Humor is highly subjective and — similar to colloquial expressions — difficult to translate from one culture to another. Including humor in your experience risks confusing people who donʼt understand it, irritating people who tire of repeatedly encountering it, and insulting people who interpret it differently. For additional writing guidance, see [Writing inclusively](https://help.apple.com/applestyleguide/#/apdcb2a65d68). + +## [Being approachable](https://developer.apple.com/design/human-interface-guidelines/inclusion#Being-approachable) + +An approachable app or game doesn’t require people to have particular skills or knowledge before they can use it, and it gives people a clear path toward deepening their understanding over time. Here are two ways to help make an experience approachable. + + * Present a clear, straightforward interface. To help you design a simple interface that fits in with other experiences on each platform, see [Designing for iOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios), [Designing for iPadOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados), [Designing for macOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos), [Designing for tvOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos), [Designing for visionOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos), [Designing for watchOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos), and [Designing for games](https://developer.apple.com/design/human-interface-guidelines/designing-for-games). + + * Build in ways to learn how to use your app or game. Consider designing an onboarding flow that helps people who are new to your experience take a step-by-step approach while letting others skip straight to the content they want. For guidance, see [Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding). + + + + +## [Gender identity](https://developer.apple.com/design/human-interface-guidelines/inclusion#Gender-identity) + +Throughout history, cultures around the world have recognized a spectrum of self-identity and expression that expands beyond the binary variants of woman and man. + +You can help everyone feel welcome in your app or game by avoiding unnecessary references to specific genders. For example, a recipe-sharing app that uses copy like “You can let a subscriber post his or her recipes to your shared folder” could avoid unnecessary gender references by using an alternative like “Subscribers can post recipes to your shared folder.” In addition to using the gender-neutral noun “subscribers,” the revised copy avoids the unnecessary singular pronouns “his” and “her,” helping the sentence remain inclusive when it’s localized for languages that use gendered pronouns. + +In addition, you can often avoid referencing a specific gender in an avatar, emoji, glyph, or game character. To welcome everyone to your app or game, prefer giving people the tools they need to customize such items as they choose. + +If you need to depict a generic person or people, use a nongendered human image to reinforce the message that _generic person_ means _human_ , not _man_ or _woman_. SF Symbols provides many nongendered glyphs you can use, such as the figure and person symbols shown here: + +![A solid silhouette of a person from the shoulders up, within a circle.](https://docs-assets.developer.apple.com/published/22f3909c1b433ca2181d2fdcf193fff7/person-crop-circle%402x.png)person.crop.circle + +![Solid silhouettes of three people, with the left silhouette in the foreground and the other two in the background, all from the shoulders up.](https://docs-assets.developer.apple.com/published/5edbc84a409deb59e72f4d780b8e7b94/person-3-fill%402x.png)person.3.fill + +![A solid silhouette of a person standing with an arm raised high on the left side of the image.](https://docs-assets.developer.apple.com/published/ea7ebde0ec424a8dc74961a3670724b2/figure-wave%402x.png)figure.wave + +Most apps and games don’t need to know a person’s gender, but if you require this information — such as for health or legal reasons — consider providing inclusive options, such as _nonbinary_ , _self-identify_ , and _decline to state_. In this situation, you could also let people specify the pronouns they use so you can address them properly when necessary. + +## [People and settings](https://developer.apple.com/design/human-interface-guidelines/inclusion#People-and-settings) + +Portraying human diversity is one of the most noticeable ways your app or game can welcome everyone. When people recognize others like themselves within an experience and its related materials, they’re less likely to feel excluded and can be more likely to think they’ll benefit from it. + +As you create copy and images that represent people, portray a range of human characteristics and activities. For example, a fitness app could feature exercise moves demonstrated by people with different racial backgrounds, body types, ages, and physical capabilities. If you need to depict occupations or behaviors, avoid stereotypical representations, such as showing only male doctors, female nurses, or heroes and villains that may perpetuate real-world racial or gender stereotypes. + +Also review the settings and objects you show. For example, showing high levels of affluence might make sense in some scenarios, but in other cases it can be unwelcoming and make an experience seem out of touch. When it makes sense in your app or game, prefer showing places, homes, activities, and items that are familiar and relatable to most people. + +## [Avoiding stereotypes](https://developer.apple.com/design/human-interface-guidelines/inclusion#Avoiding-stereotypes) + +Everyone holds biases and stereotypes — often unconsciously — and it can be challenging to discover how they affect your thoughts. A goal of inclusive design is to become aware of your biases and generalizations so you can recognize where they might influence your design decisions. + +For example, consider an app that helps people manage account access for various family members. If this app uses a stereotypical definition of _family_ — such as a woman, a man, and their biological children — it’s likely to communicate this perspective in its copy and images. Because the app assumes that people’s families fit this narrow definition, it excludes everyone whose family is different. + +Although the assumption made in the account-access app might seem like an obvious mistake, it’s important to realize that not all assumptions are so easy to spot. For example, consider an app or game that requires people to choose security questions they can answer for future identity confirmation, such as: + + * What was your favorite subject in college? + + * What was the make of your first car? + + * How did you feel when you first saw a rainbow? + + + + +From some perspectives these questions refer to commonplace events, but all are based on experiences that not everyone has. Using a context-specific experience to communicate something is useless for everyone who doesn’t share that context and effectively excludes them. To create alternatives to the culture- and capability-specific questions above, you might reference more universal human experiences like: + + * What’s your favorite activity? + + * What was the name of your first friend? + + * What quality describes you best? + + + + +Basing design decisions on stereotypes or assumptions inevitably leads to exclusion because generalizations can’t reflect the diversity of human perspectives. Avoiding assumptions and instead concentrating on inclusion can help you craft experiences that benefit everyone. + +## [Accessibility](https://developer.apple.com/design/human-interface-guidelines/inclusion#Accessibility) + +An inclusive app or game is accessible to everyone. People rely on Apple’s accessibility features — such as VoiceOver, Display Accommodations, closed captioning, Switch Control, and Speak Screen — to customize their devices for their individual needs, so it’s essential to support these features. + +It’s also essential to avoid assuming that any disability might prevent someone from wanting to enjoy the experience your software provides. Making an assumption like this can result in designs that limit the potential audience for your app or game. In contrast, when you make each experience accessible, you give everyone the opportunity to benefit from your app or game in ways that work for them. + +To help you design an app or game that everyone can enjoy, remember that: + + * Each disability is a spectrum. For example, visual disabilities range from low vision to complete blindness, and include things like color blindness, blurry vision, light sensitivity, and peripheral vision loss. + + * Everyone can experience disabilities. In addition to disabilities that most people experience as they age, there are _temporary disabilities_ — like short-term hearing loss due to an infection — and _situational disabilities_ — like being unable to hear while on a noisy train — that can affect everyone at various times. + + + + +As you design content that welcomes people of all abilities, consider the following tips. + +**Avoid images and language that exclude people with disabilities.** For example, include people with disabilities when you represent a variety of people, and avoid language that uses a disability to express a negative quality. + +**Take a people-first approach when writing about people with disabilities.** For example, you could describe an individual’s accomplishments and goals before mentioning a disability they may have. If you’re writing about a specific person or community, find out how they self-identify; for more guidance, see [Writing about disability](https://help.apple.com/applestyleguide/#/apd49cbb2b06). + +**Prioritize simplicity and perceivability.** Prefer familiar, consistent interactions that make tasks simple to perform, and ensure that everyone can perceive your content, whether they use sight, hearing, or touch. + +To learn more about making your app or game accessible, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +## [Languages](https://developer.apple.com/design/human-interface-guidelines/inclusion#Languages) + +People expect to customize their device by choosing a language for text and a region for formatting values like date, time, and money. To welcome a global audience, first prepare your software to handle languages and regions other than your own — a process called _internationalization_ — and provide translated text and resources for specific locales. For an overview of internationalization, see [Expanding your app to new markets](https://developer.apple.com/localization/); for developer guidance on localization, see [Localization](https://developer.apple.com/documentation/Xcode/localization). + +Creating an inclusive experience can also help you prepare for localization. For example, using plain language, avoiding unnecessary gender references, representing a variety of people, and avoiding stereotypes and culture-specific content, can put you in a good position to create versions of your software localized into more languages. Using [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) for the glyphs in your app or game can also help streamline localization. In addition to providing many language-specific glyphs, SF Symbols includes glyphs you can use in both left-to-right and right-to-left contexts; for guidance, see [Right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left). + +As you localize your app or game and related content, also be aware of the ways you use color. Colors often have strong culture-specific meanings, so it’s essential to discover how people respond to specific colors in each locale you support. In some places, for example, white is associated with death or grief, whereas in other places, it’s associated with purity or peace. If you use color as a way to communicate, make sure your color choices communicate the same thing in each version of your software. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/inclusion#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/inclusion#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/inclusion#Related) + +[Writing inclusively](https://help.apple.com/applestyleguide/#/apdcb2a65d68) + +[Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/inclusion#Developer-documentation) + +[Localization](https://developer.apple.com/documentation/Xcode/localization) — Xcode + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/inclusion#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/F5AEB5B6-FF48-4201-B110-A0EDA465F3B4/9961_wide_250x141_1x.jpg) Principles of inclusive app design ](https://developer.apple.com/videos/play/wwdc2025/316) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/90B67086-3A99-49A5-965A-D35DB6552AE0/5206_wide_250x141_1x.jpg) The practice of inclusive design ](https://developer.apple.com/videos/play/wwdc2021/10275) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/30932E3E-C589-4804-B16E-D0003DEF0F02/5247_wide_250x141_1x.jpg) The process of inclusive design ](https://developer.apple.com/videos/play/wwdc2021/10304) + diff --git a/skills/hig-foundations/references/layout.md b/skills/hig-foundations/references/layout.md new file mode 100644 index 00000000..ddd54a29 --- /dev/null +++ b/skills/hig-foundations/references/layout.md @@ -0,0 +1,425 @@ +--- +title: "Layout | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/layout + +# Layout + +A consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices. + +![A sketch of a small rectangle in the upper-left quadrant of a larger rectangle, suggesting the position of a user interface element within a window. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/fe3e14f290a6986d2490634a9e2fab0c/foundations-layout-intro%402x.png) + +Your app’s layout helps ground people in your content from the moment they open it. People expect familiar relationships between controls and content to help them use and discover your app’s features, and designing the layout to take advantage of this makes your app feel at home on the platform. + +Apple provides templates, guides, and other resources that can help you integrate Apple technologies and design your apps and games to run on all Apple platforms. See [Apple Design Resources](https://developer.apple.com/design/resources/). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/layout#Best-practices) + +**Group related items to help people find the information they want.** For example, you might use negative space, background shapes, colors, materials, or separator lines to show when elements are related and to separate information into distinct areas. When you do so, ensure that content and controls remain clearly distinct. + +**Make essential information easy to find by giving it sufficient space.** People want to view the most important information right away, so don’t obscure it by crowding it with nonessential details. You can make secondary information available in other parts of the window, or include it in an additional view. + +**Extend content to fill the screen or window.** Make sure backgrounds and full-screen artwork extend to the edges of the display. Also ensure that scrollable layouts continue all the way to the bottom and the sides of the device screen. Controls and navigation components like sidebars and tab bars appear on top of content rather than on the same plane, so it’s important for your layout to take this into account. + +When your content doesn’t span the full window, use a background extension view to provide the appearance of content behind the control layer on either side of the screen, such as beneath the sidebar or inspector. For developer guidance, see [`backgroundExtensionEffect()`](https://developer.apple.com/documentation/SwiftUI/View/backgroundExtensionEffect\(\)) and [`UIBackgroundExtensionView`](https://developer.apple.com/documentation/UIKit/UIBackgroundExtensionView). + +![A screenshot of a full screen iPad app with a sidebar on the leading edge. A photo of Mount Fuji fills the top half of the content area. The photo subtly blurs as it reaches the top of the screen, where toolbar items float above it grouped on the trailing edge. Where the photo meets the sidebar, the image flips, blurs, and extends fully beneath the sidebar to the edge of the screen.](https://docs-assets.developer.apple.com/published/ffacfee843cc378d0af09d8926f2408b/layout-background-extention-view%402x.png) + +## [Visual hierarchy](https://developer.apple.com/design/human-interface-guidelines/layout#Visual-hierarchy) + +**Differentiate controls from content.** Take advantage of the Liquid Glass material to provide a distinct appearance for controls that’s consistent across iOS, iPadOS, and macOS. Instead of a background, use a scroll edge effect to provide a transition between content and the control area. For guidance, see [Scroll views](https://developer.apple.com/design/human-interface-guidelines/scroll-views). + +**Place items to convey their relative importance.** People often start by viewing items in reading order — that is, from top to bottom and from the leading to trailing side — so it generally works well to place the most important items near the top and leading side of the window, display, or [field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view). Be aware that reading order varies by language, and take [right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left) languages into account as you design. + +**Align components with one another to make them easier to scan and to communicate organization and hierarchy.** Alignment makes an app look neat and organized and can help people track content while scrolling or moving their eyes, making it easier to find information. Along with indentation, alignment can also help people understand an information hierarchy. + +**Take advantage of progressive disclosure to help people discover content that’s currently hidden.** For example, if you can’t display all the items in a large collection at once, you need to indicate that there are additional items that aren’t currently visible. Depending on the platform, you might use a [disclosure control](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls), or display parts of items to hint that people can reveal additional content by interacting with the view, such as by scrolling. + +**Make controls easier to use by providing enough space around them and grouping them in logical sections.** If unrelated controls are too close together — or if other content crowds them — they can be difficult for people to tell apart or understand what they do, which can make your app or game hard to use. For guidance, see [Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars). + +## [Adaptability](https://developer.apple.com/design/human-interface-guidelines/layout#Adaptability) + +Every app and game needs to adapt when the device or system context changes. In iOS, iPadOS, tvOS, and visionOS, the system defines a collection of _traits_ that characterize variations in the device environment that can affect the way your app or game looks. Using SwiftUI or Auto Layout can help you ensure that your interface adapts dynamically to these traits and other context changes; if you don’t use these tools, you need to use alternative methods to do the work. + +Here are some of the most common device and system variations you need to handle: + + * Different device screen sizes, resolutions, and color spaces + + * Different device orientations (portrait/landscape) + + * System features like Dynamic Island and camera controls + + * External display support, Display Zoom, and resizable windows on iPad + + * Dynamic Type text-size changes + + * Locale-based internationalization features like left-to-right/right-to-left layout direction, date/time/number formatting, font variation, and text length + + + + +**Design a layout that adapts gracefully to context changes while remaining recognizably consistent.** People expect your experience to work well and remain familiar when they rotate their device, resize a window, add another display, or switch to a different device. You can help ensure an adaptable interface by respecting system-defined safe areas, margins, and guides (where available) and specifying layout modifiers to fine-tune the placement of views in your interface. + +**Be prepared for text-size changes.** People appreciate apps and games that respond when they choose a different text size. When you support [Dynamic Type](https://developer.apple.com/design/human-interface-guidelines/typography#Supporting-Dynamic-Type) — a feature that lets people choose the size of visible text in iOS, iPadOS, tvOS, visionOS, and watchOS — your app or game can respond appropriately when people adjust text size. To support Dynamic Type in your Unity-based game, use Apple’s accessibility plug-in (for developer guidance, see [Apple – Accessibility](https://github.com/apple/unityplugins/blob/main/plug-ins/Apple.Accessibility/Apple.Accessibility_Unity/Assets/Apple.Accessibility/Documentation~/Apple.Accessibility.md)). For guidance on displaying text in your app, see [Typography](https://developer.apple.com/design/human-interface-guidelines/typography). + +**Preview your app on multiple devices, using different orientations, localizations, and text sizes.** You can streamline the testing process by first testing versions of your experience that use the largest and the smallest layouts. Although it’s generally best to preview features like wide-gamut color on actual devices, you can use Xcode Simulator to check for clipping and other layout issues. For example, if your iOS app or game supports landscape mode, you can use Simulator to make sure your layouts look great whether the device rotates left or right. + +**When necessary, scale artwork in response to display changes.** For example, viewing your app or game in a different context — such as on a screen with a different aspect ratio — might make your artwork appear cropped, letterboxed, or pillarboxed. If this happens, don’t change the aspect ratio of the artwork; instead, scale it so that important visual content remains visible. In visionOS, the system automatically [scales](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Scale) a window when it moves along the z-axis. + +## [Guides and safe areas](https://developer.apple.com/design/human-interface-guidelines/layout#Guides-and-safe-areas) + +A _layout guide_ defines a rectangular region that helps you position, align, and space your content on the screen. The system includes predefined layout guides that make it easy to apply standard margins around content and restrict the width of text for optimal readability. You can also define custom layout guides. For developer guidance, see [`UILayoutGuide`](https://developer.apple.com/documentation/UIKit/UILayoutGuide) and [`NSLayoutGuide`](https://developer.apple.com/documentation/AppKit/NSLayoutGuide). + +A _safe area_ defines the area within a view that isn’t covered by a toolbar, tab bar, or other views a window might provide. Safe areas are essential for avoiding a device’s interactive and display features, like Dynamic Island on iPhone or the camera housing on some Mac models. For developer guidance, see [`SafeAreaRegions`](https://developer.apple.com/documentation/SwiftUI/SafeAreaRegions) and [Positioning content relative to the safe area](https://developer.apple.com/documentation/UIKit/positioning-content-relative-to-the-safe-area). + +**Respect key display and system features in each platform.** When an app or game doesn’t accommodate such features, it doesn’t feel at home in the platform and may be harder for people to use. In addition to helping you avoid display and system features, safe areas can also help you account for interactive components like bars, dynamically repositioning content when sizes change. + +For templates that include the guides and safe areas for each platform, see [Apple Design Resources](https://developer.apple.com/design/resources/). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/layout#Platform-considerations) + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/layout#iOS) + +**Aim to support both portrait and landscape orientations.** People appreciate apps and games that work well in different device orientations, but sometimes your experience needs to run in only portrait or only landscape. When this is the case, you can rely on people trying both orientations before settling on the one you support — there’s no need to tell people to rotate their device. If your app or game is landscape-only, make sure it runs equally well whether people rotate their device to the left or the right. + +**Prefer a full-bleed interface for your game.** Give players a beautiful interface that fills the screen while accommodating the corner radius, sensor housing, and features like Dynamic Island. If necessary, consider giving players the option to view your game using a letterboxed or pillarboxed appearance. + +**Avoid full-width buttons.** Buttons feel at home in iOS when they respect system-defined margins and are inset from the edges of the screen. If you need to include a full-width button, make sure it harmonizes with the curvature of the hardware and aligns with adjacent safe areas. + +**Hide the status bar only when it adds value or enhances your experience.** The status bar displays information people find useful and it occupies an area of the screen most apps don’t fully use, so it’s generally a good idea to keep it visible. The exception is if you offer an in-depth experience like playing a game or viewing media, where it might make sense to hide the status bar. + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/layout#iPadOS) + +People can freely resize windows down to a minimum width and height, similar to window behavior in macOS. It’s important to account for this resizing behavior and the full range of possible window sizes when designing your layout. For guidance, see [Multitasking](https://developer.apple.com/design/human-interface-guidelines/multitasking#iPadOS) and [Windows](https://developer.apple.com/design/human-interface-guidelines/windows#iPadOS). + +**As someone resizes a window, defer switching to a compact view for as long as possible.** Design for a full-screen view first, and only switch to a compact view when a version of the full layout no longer fits. This helps the UI feel more stable and familiar in as many situations as possible. For more complex layouts such as [split views](https://developer.apple.com/design/human-interface-guidelines/split-views), prefer hiding tertiary columns such as inspectors as the view narrows. + +**Test your layout at common system-provided sizes, and provide smooth transitions.** Window controls provide the option to arrange windows to fill halves, thirds, and quadrants of the screen, so it’s important to check your layout at each of these sizes on a variety of devices. Be sure to minimize unexpected UI changes as people adjust down to the minimum and up to the maximum window size. + +**Consider a convertible tab bar for adaptive navigation.** For many apps, you don’t need to choose between a tab bar or sidebar for navigation; instead, you can adopt a style of tab bar that provides both. The app first launches with your choice of a sidebar or a tab bar, and then people can tap to switch between them. As the view resizes, the presentation style changes to fit the width of the view. For guidance, see [Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars). For developer guidance, see [`sidebarAdaptable`](https://developer.apple.com/documentation/SwiftUI/TabViewStyle/sidebarAdaptable). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/layout#macOS) + +**Avoid placing controls or critical information at the bottom of a window.** People often move windows so that the bottom edge is below the bottom of the screen. + +**Avoid displaying content within the camera housing at the top edge of the window.** For developer guidance, see [`NSPrefersDisplaySafeAreaCompatibilityMode`](https://developer.apple.com/documentation/BundleResources/Information-Property-List/NSPrefersDisplaySafeAreaCompatibilityMode). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/layout#tvOS) + +**Be prepared for a wide range of TV sizes.** On Apple TV, layouts don’t automatically adapt to the size of the screen like they do on iPhone or iPad. Instead, apps and games show the same interface on every display. Take extra care in designing your layout so that it looks great in a variety of screen sizes. + +**Adhere to the screen’s safe area.** Inset primary content 60 points from the top and bottom of the screen, and 80 points from the sides. It can be difficult for people to see content that close to the edges, and unintended cropping can occur due to overscanning on older TVs. Allow only partially displayed offscreen content and elements that deliberately flow offscreen to appear outside this zone. + +![An illustration of a TV with a safe zone border on all sides. In width, the top and bottom borders measure 60 points, and the side borders both measure 80 points.](https://docs-assets.developer.apple.com/published/1be425edd08beb67cba3c1000983581f/visual-design-safe-zone%402x.png) + +**Include appropriate padding between focusable elements.** When you use UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they’re focused, and make sure you don’t let them overlap important information. For developer guidance, see [About focus interactions for Apple TV](https://developer.apple.com/documentation/UIKit/about-focus-interactions-for-apple-tv). + +![An illustration that uses vertical shaded rectangles to show padding between focusable items.](https://docs-assets.developer.apple.com/published/1cfcdddb80150197945945a6884a9ade/visual-design-padding%402x.png) + +#### [Grids](https://developer.apple.com/design/human-interface-guidelines/layout#Grids) + +The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item comes into focus. + +If you use the UIKit collection view flow element, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see [`UICollectionViewFlowLayout`](https://developer.apple.com/documentation/UIKit/UICollectionViewFlowLayout). + + * Two-column + * Three-column + * Four-column + * Five-column + * Six-column + * Seven-column + * Eight-column + * Nine-column + + + +![An illustration of Apple TV, displaying a two-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.](https://docs-assets.developer.apple.com/published/29cbd7ef913d834c991bd303816e410d/visual-design-grid-2-column%402x.png) + +#### [Two-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Two-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 860 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +![An illustration of Apple TV, displaying a three-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.](https://docs-assets.developer.apple.com/published/efc27c2f40d150e6350f03d8709527d8/visual-design-grid-3-column%402x.png) + +#### [Three-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Three-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 560 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +![An illustration of Apple TV, displaying a four-column grid of media items. Additional media items are partially visible on the right side of the screen.](https://docs-assets.developer.apple.com/published/b02a182e769f7a89201719f46547dabf/visual-design-grid-4-column%402x.png) + +#### [Four-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Four-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 410 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +![An illustration of Apple TV, displaying a five-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.](https://docs-assets.developer.apple.com/published/6eebe97a166aceb55ed18304ac46be8d/visual-design-grid-5-column%402x.png) + +#### [Five-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Five-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 320 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +![An illustration of Apple TV, displaying a six-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.](https://docs-assets.developer.apple.com/published/a2a7efa8dc58b3615082ba7e62e81437/visual-design-grid-6-column%402x.png) + +#### [Six-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Six-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 260 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +![An illustration of Apple TV, displaying a seven-column grid of media items. Additional media items are partially visible on the right side of the screen.](https://docs-assets.developer.apple.com/published/3e625b746a4a31f083020cfa91674bd6/visual-design-grid-7-column%402x.png) + +#### [Seven-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Seven-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 217 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +![An illustration of Apple TV, displaying an eight-column grid of media items. Additional media items are partially visible on the right side and bottom edge of the screen.](https://docs-assets.developer.apple.com/published/71f872111291a6f1b465ddfd4f4dc246/visual-design-grid-8-column%402x.png) + +#### [Eight-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Eight-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 184 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +![An illustration of Apple TV, displaying a nine-column grid of media items.](https://docs-assets.developer.apple.com/published/19125b211b45864b26f33d8f54a98a87/visual-design-grid-9-column%402x.png) + +#### [Nine-column grid](https://developer.apple.com/design/human-interface-guidelines/layout#Nine-column-grid) + +Attribute| Value +---|--- +Unfocused content width| 160 pt +Horizontal spacing| 40 pt +Minimum vertical spacing| 100 pt + +**Include additional vertical spacing for titled rows.** If a row has a title, provide enough spacing between the bottom of the previous unfocused row and the center of the title to avoid crowding. Also provide spacing between the bottom of the title and the top of the unfocused items in the row. + +**Use consistent spacing.** When content isn’t consistently spaced, it no longer looks like a grid and it’s harder for people to scan. + +**Make partially hidden content look symmetrical.** To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/layout#visionOS) + +The guidance below can help you lay out content within the windows of your visionOS app or game, making it feel familiar and easy to use. For guidance on displaying windows in space and best practices for using depth, scale, and field of view in your visionOS app, see [Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout). To learn more about visionOS window components, see [Windows > visionOS](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS). + +Note + +When 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. + +**Consider centering the most important content and controls in your app or game.** Often, people can more easily discover and interact with content when it’s near the middle of a window, especially when the window is large. + +**Keep a window’s content within its bounds.** In visionOS, the system displays window controls just outside a window’s bounds in the XY plane. For example, the Share menu appears above the window and the controls for resizing, moving, and closing the window appear below it. Letting 2D or 3D content encroach on these areas can make the system-provided controls, especially those below the window, difficult for people to use. + +**If you need to display additional controls that don’t belong within a window, use an ornament.** An ornament lets you offer app controls that remain visually associated with a window without interfering with the system-provided controls. For example, a window’s toolbar and tab bar appear as ornaments. For guidance, see [Ornaments](https://developer.apple.com/design/human-interface-guidelines/ornaments). + +**Make a window’s interactive components easy for people to look at.** You need to include enough space around an interactive component so that visually identifying it is easy and comfortable, and to prevent the system-provided hover effect from obscuring other content. For example, place buttons so their centers are at least 60 points apart. For guidance, see [Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes), [Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout), and [Buttons > visionOS](https://developer.apple.com/design/human-interface-guidelines/buttons#visionOS). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/layout#watchOS) + +**Design your content to extend from one edge of the screen to the other.** The Apple Watch bezel provides a natural visual padding around your content. To avoid wasting valuable space, consider minimizing the padding between elements. + +![An illustration of the Workout app’s main list of workouts on Apple Watch. A callout indicates that the currently focused workout item spans the full width of the available screen area.](https://docs-assets.developer.apple.com/published/9b9b27a4e9e752fc4ed6be98f5eb5b0d/layout-full-width%402x.png) + +**Avoid placing more than two or three controls side by side in your interface.** As a general rule, display no more than three buttons that contain glyphs — or two buttons that contain text — in a row. Although it’s usually better to let text buttons span the full width of the screen, two side-by-side buttons with short text labels can also work well, as long as the screen doesn’t scroll. + +![A diagram of an Apple Watch screen showing two side-by-side buttons beneath three lines of text.](https://docs-assets.developer.apple.com/published/25c5882538789bded5a9953eb5e2001f/layout-controls%402x.png) + +**Support autorotation in views people might want to show others.** When people flip their wrist away, apps typically respond to the motion by sleeping the display, but in some cases it makes sense to autorotate the content. For example, a wearer might want to show an image to a friend or display a QR code to a reader. For developer guidance, see [`isAutorotating`](https://developer.apple.com/documentation/WatchKit/WKExtension/isAutorotating). + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/layout#Specifications) + +### [iOS, iPadOS device screen dimensions](https://developer.apple.com/design/human-interface-guidelines/layout#iOS-iPadOS-device-screen-dimensions) + +Model| Dimensions (portrait) +---|--- +iPad Pro 12.9-inch| 1024x1366 pt (2048x2732 px @2x) +iPad Pro 11-inch| 834x1194 pt (1668x2388 px @2x) +iPad Pro 10.5-inch| 834x1194 pt (1668x2388 px @2x) +iPad Pro 9.7-inch| 768x1024 pt (1536x2048 px @2x) +iPad Air 13-inch| 1024x1366 pt (2048x2732 px @2x) +iPad Air 11-inch| 820x1180 pt (1640x2360 px @2x) +iPad Air 10.9-inch| 820x1180 pt (1640x2360 px @2x) +iPad Air 10.5-inch| 834x1112 pt (1668x2224 px @2x) +iPad Air 9.7-inch| 768x1024 pt (1536x2048 px @2x) +iPad 11-inch| 820x1180 pt (1640x2360 px @2x) +iPad 10.2-inch| 810x1080 pt (1620x2160 px @2x) +iPad 9.7-inch| 768x1024 pt (1536x2048 px @2x) +iPad mini 8.3-inch| 744x1133 pt (1488x2266 px @2x) +iPad mini 7.9-inch| 768x1024 pt (1536x2048 px @2x) +iPhone 17 Pro Max| 440x956 pt (1320x2868 px @3x) +iPhone 17 Pro| 402x874 pt (1206x2622 px @3x) +iPhone Air| 420x912 pt (1260x2736 px @3x) +iPhone 17| 402x874 pt (1206x2622 px @3x) +iPhone 16 Pro Max| 440x956 pt (1320x2868 px @3x) +iPhone 16 Pro| 402x874 pt (1206x2622 px @3x) +iPhone 16 Plus| 430x932 pt (1290x2796 px @3x) +iPhone 16| 393x852 pt (1179x2556 px @3x) +iPhone 16e| 390x844 pt (1170x2532 px @3x) +iPhone 15 Pro Max| 430x932 pt (1290x2796 px @3x) +iPhone 15 Pro| 393x852 pt (1179x2556 px @3x) +iPhone 15 Plus| 430x932 pt (1290x2796 px @3x) +iPhone 15| 393x852 pt (1179x2556 px @3x) +iPhone 14 Pro Max| 430x932 pt (1290x2796 px @3x) +iPhone 14 Pro| 393x852 pt (1179x2556 px @3x) +iPhone 14 Plus| 428x926 pt (1284x2778 px @3x) +iPhone 14| 390x844 pt (1170x2532 px @3x) +iPhone 13 Pro Max| 428x926 pt (1284x2778 px @3x) +iPhone 13 Pro| 390x844 pt (1170x2532 px @3x) +iPhone 13| 390x844 pt (1170x2532 px @3x) +iPhone 13 mini| 375x812 pt (1125x2436 px @3x) +iPhone 12 Pro Max| 428x926 pt (1284x2778 px @3x) +iPhone 12 Pro| 390x844 pt (1170x2532 px @3x) +iPhone 12| 390x844 pt (1170x2532 px @3x) +iPhone 12 mini| 375x812 pt (1125x2436 px @3x) +iPhone 11 Pro Max| 414x896 pt (1242x2688 px @3x) +iPhone 11 Pro| 375x812 pt (1125x2436 px @3x) +iPhone 11| 414x896 pt (828x1792 px @2x) +iPhone XS Max| 414x896 pt (1242x2688 px @3x) +iPhone XS| 375x812 pt (1125x2436 px @3x) +iPhone XR| 414x896 pt (828x1792 px @2x) +iPhone X| 375x812 pt (1125x2436 px @3x) +iPhone 8 Plus| 414x736 pt (1080x1920 px @3x) +iPhone 8| 375x667 pt (750x1334 px @2x) +iPhone 7 Plus| 414x736 pt (1080x1920 px @3x) +iPhone 7| 375x667 pt (750x1334 px @2x) +iPhone 6s Plus| 414x736 pt (1080x1920 px @3x) +iPhone 6s| 375x667 pt (750x1334 px @2x) +iPhone 6 Plus| 414x736 pt (1080x1920 px @3x) +iPhone 6| 375x667 pt (750x1334 px @2x) +iPhone SE 4.7-inch| 375x667 pt (750x1334 px @2x) +iPhone SE 4-inch| 320x568 pt (640x1136 px @2x) +iPod touch 5th generation and later| 320x568 pt (640x1136 px @2x) + +Note + +All scale factors in the table above are UIKit scale factors, which may differ from native scale factors. For developer guidance, see [`scale`](https://developer.apple.com/documentation/UIKit/UIScreen/scale) and [`nativeScale`](https://developer.apple.com/documentation/UIKit/UIScreen/nativeScale). + +### [iOS, iPadOS device size classes](https://developer.apple.com/design/human-interface-guidelines/layout#iOS-iPadOS-device-size-classes) + +A size class is a value that’s either regular or compact, where _regular_ refers to a larger screen or a screen in landscape orientation and _compact_ refers to a smaller screen or a screen in portrait orientation. For developer guidance, see [`UserInterfaceSizeClass`](https://developer.apple.com/documentation/SwiftUI/UserInterfaceSizeClass). + +Different size class combinations apply to the full-screen experience on different devices, based on screen size. + +Model| Portrait orientation| Landscape orientation +---|---|--- +iPad Pro 12.9-inch| Regular width, regular height| Regular width, regular height +iPad Pro 11-inch| Regular width, regular height| Regular width, regular height +iPad Pro 10.5-inch| Regular width, regular height| Regular width, regular height +iPad Air 13-inch| Regular width, regular height| Regular width, regular height +iPad Air 11-inch| Regular width, regular height| Regular width, regular height +iPad 11-inch| Regular width, regular height| Regular width, regular height +iPad 9.7-inch| Regular width, regular height| Regular width, regular height +iPad mini 7.9-inch| Regular width, regular height| Regular width, regular height +iPhone 17 Pro Max| Compact width, regular height| Regular width, compact height +iPhone 17 Pro| Compact width, regular height| Compact width, compact height +iPhone Air| Compact width, regular height| Regular width, compact height +iPhone 17| Compact width, regular height| Compact width, compact height +iPhone 16 Pro Max| Compact width, regular height| Regular width, compact height +iPhone 16 Pro| Compact width, regular height| Compact width, compact height +iPhone 16 Plus| Compact width, regular height| Regular width, compact height +iPhone 16| Compact width, regular height| Compact width, compact height +iPhone 16e| Compact width, regular height| Compact width, compact height +iPhone 15 Pro Max| Compact width, regular height| Regular width, compact height +iPhone 15 Pro| Compact width, regular height| Compact width, compact height +iPhone 15 Plus| Compact width, regular height| Regular width, compact height +iPhone 15| Compact width, regular height| Compact width, compact height +iPhone 14 Pro Max| Compact width, regular height| Regular width, compact height +iPhone 14 Pro| Compact width, regular height| Compact width, compact height +iPhone 14 Plus| Compact width, regular height| Regular width, compact height +iPhone 14| Compact width, regular height| Compact width, compact height +iPhone 13 Pro Max| Compact width, regular height| Regular width, compact height +iPhone 13 Pro| Compact width, regular height| Compact width, compact height +iPhone 13| Compact width, regular height| Compact width, compact height +iPhone 13 mini| Compact width, regular height| Compact width, compact height +iPhone 12 Pro Max| Compact width, regular height| Regular width, compact height +iPhone 12 Pro| Compact width, regular height| Compact width, compact height +iPhone 12| Compact width, regular height| Compact width, compact height +iPhone 12 mini| Compact width, regular height| Compact width, compact height +iPhone 11 Pro Max| Compact width, regular height| Regular width, compact height +iPhone 11 Pro| Compact width, regular height| Compact width, compact height +iPhone 11| Compact width, regular height| Regular width, compact height +iPhone XS Max| Compact width, regular height| Regular width, compact height +iPhone XS| Compact width, regular height| Compact width, compact height +iPhone XR| Compact width, regular height| Regular width, compact height +iPhone X| Compact width, regular height| Compact width, compact height +iPhone 8 Plus| Compact width, regular height| Regular width, compact height +iPhone 8| Compact width, regular height| Compact width, compact height +iPhone 7 Plus| Compact width, regular height| Regular width, compact height +iPhone 7| Compact width, regular height| Compact width, compact height +iPhone 6s Plus| Compact width, regular height| Regular width, compact height +iPhone 6s| Compact width, regular height| Compact width, compact height +iPhone SE| Compact width, regular height| Compact width, compact height +iPod touch 5th generation and later| Compact width, regular height| Compact width, compact height + +### [watchOS device screen dimensions](https://developer.apple.com/design/human-interface-guidelines/layout#watchOS-device-screen-dimensions) + +Series| Size| Width (pixels)| Height (pixels) +---|---|---|--- +Apple Watch Ultra (3rd generation)| 49mm| 422| 514 +10, 11| 42mm| 374| 446 +10, 11| 46mm| 416| 496 +Apple Watch Ultra (1st and 2nd generations)| 49mm| 410| 502 +7, 8, and 9| 41mm| 352| 430 +7, 8, and 9| 45mm| 396| 484 +4, 5, 6, and SE (all generations)| 40mm| 324| 394 +4, 5, 6, and SE (all generations)| 44mm| 368| 448 +1, 2, and 3| 38mm| 272| 340 +1, 2, and 3| 42mm| 312| 390 + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/layout#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/layout#Related) + +[Right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left) + +[Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout) + +[Layout and organization](https://developer.apple.com/design/human-interface-guidelines/layout-and-organization) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/layout#Developer-documentation) + +[Composing custom layouts with SwiftUI](https://developer.apple.com/documentation/SwiftUI/composing-custom-layouts-with-swiftui) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/layout#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/1E740BE0-AF55-430B-B8C2-346CA2982476/6549_wide_250x141_1x.jpg) Compose custom layouts with SwiftUI ](https://developer.apple.com/videos/play/wwdc2022/10056) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/2546ECBD-6443-41EC-921D-6429026F8B67/1700_wide_250x141_1x.jpg) Essential Design Principles ](https://developer.apple.com/videos/play/wwdc2017/802) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/layout#Change-log) + +Date| Changes +---|--- +September 9, 2025| Added specifications for iPhone 17, iPhone Air, iPhone 17 Pro, iPhone 17 Pro Max, Apple Watch SE 3, Apple Watch Series 11, and Apple Watch Ultra 3. +June 9, 2025| Added guidance for Liquid Glass. +March 7, 2025| Added specifications for iPhone 16e, iPad 11-inch, iPad Air 11-inch, and iPad Air 13-inch. +September 9, 2024| Added specifications for iPhone 16, iPhone 16 Plus, iPhone 16 Pro, iPhone 16 Pro Max, and Apple Watch Series 10. +June 10, 2024| Made minor corrections and organizational updates. +February 2, 2024| Enhanced guidance for avoiding system controls in iPadOS app layouts, and added specifications for 10.9-inch iPad Air and 8.3-inch iPad mini. +December 5, 2023| Clarified guidance on centering content in a visionOS window. +September 15, 2023| Added specifications for iPhone 15 Pro Max, iPhone 15 Pro, iPhone 15 Plus, iPhone 15, Apple Watch Ultra 2, and Apple Watch SE. +June 21, 2023| Updated to include guidance for visionOS. +September 14, 2022| Added specifications for iPhone 14 Pro Max, iPhone 14 Pro, iPhone 14 Plus, iPhone 14, and Apple Watch Ultra. + diff --git a/skills/hig-foundations/references/materials.md b/skills/hig-foundations/references/materials.md new file mode 100644 index 00000000..0452bf57 --- /dev/null +++ b/skills/hig-foundations/references/materials.md @@ -0,0 +1,238 @@ +--- +title: "Materials | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/materials + +# Materials + +A material is a visual effect that creates a sense of depth, layering, and hierarchy between foreground and background elements. + +![A sketch of overlapping squares, suggesting the use of transparency to hint at background content. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/7dbd8b65138bed71acdeb36135193681/foundations-materials-intro%402x.png) + +Materials help visually separate foreground elements, such as text and controls, from background elements, such as content and solid colors. By allowing color to pass through from background to foreground, a material establishes visual hierarchy to help people more easily retain a sense of place. + +Apple platforms feature two types of materials: Liquid Glass, and standard materials. [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) is a dynamic material that unifies the design language across Apple platforms, allowing you to present controls and navigation without obscuring underlying content. In contrast to Liquid Glass, the [standard materials](https://developer.apple.com/design/human-interface-guidelines/materials#Standard-materials) help with visual differentiation within the content layer. + +## [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) + +Liquid Glass forms a distinct functional layer for controls and navigation elements — like tab bars and sidebars — that floats above the content layer, establishing a clear visual hierarchy between functional elements and content. Liquid Glass allows content to scroll and peek through from beneath these elements to give the interface a sense of dynamism and depth, all while maintaining legibility for controls and navigation. + +**Don’t use Liquid Glass in the content layer.** Liquid Glass works best when it provides a clear distinction between interactive elements and content, and including it in the content layer can result in unnecessary complexity and a confusing visual hierarchy. Instead, use [standard materials](https://developer.apple.com/design/human-interface-guidelines/materials#Standard-materials) for elements in the content layer, such as app backgrounds. An exception to this is for controls in the content layer with a transient interactive element like [sliders](https://developer.apple.com/design/human-interface-guidelines/sliders) and [toggles](https://developer.apple.com/design/human-interface-guidelines/toggles); in these cases, the element takes on a Liquid Glass appearance to emphasize its interactivity when a person activates it. + +**Use Liquid Glass effects sparingly.** Standard components from system frameworks pick up the appearance and behavior of this material automatically. If you apply Liquid Glass effects to a custom control, do so sparingly. Liquid Glass seeks to bring attention to the underlying content, and overusing this material in multiple custom controls can provide a subpar user experience by distracting from that content. Limit these effects to the most important functional elements in your app. For developer guidance, see [Applying Liquid Glass to custom views](https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views). + +**Only use clear Liquid Glass for components that appear over visually rich backgrounds.** Liquid Glass provides two variants — [`regular`](https://developer.apple.com/documentation/SwiftUI/Glass/regular) and [`clear`](https://developer.apple.com/documentation/SwiftUI/Glass/clear) — that you can choose when building custom components or styling some system components. The appearance of these variants can differ in response to certain system settings, like if people choose a preferred look for Liquid Glass in their device’s display settings, or turn on accessibility settings that reduce transparency or increase contrast in the interface. + +The _regular_ variant blurs and adjusts the luminosity of background content to maintain legibility of text and other foreground elements. Scroll edge effects further enhance legibility by blurring and reducing the opacity of background content. Most system components use this variant. Use the regular variant when background content might create legibility issues, or when components have a significant amount of text, such as alerts, sidebars, or popovers. + +![A visual example of the regular variant of Liquid Glass, which appears darker when there is a dark background beneath it.](https://docs-assets.developer.apple.com/published/91bd48556358ab3deb6720c982aa8503/materials-ios-liquid-glass-regular-on-dark%402x.png)On dark background + +![A visual example of the regular variant of Liquid Glass, which appears lighter when there is a light background beneath it.](https://docs-assets.developer.apple.com/published/07aee30876315c8b2985a59a3ac1df31/materials-ios-liquid-glass-regular-on-light%402x.png)On light background + +The _clear_ variant is highly translucent, which is ideal for prioritizing the visibility of the underlying content and ensuring visually rich background elements remain prominent. Use this variant for components that float above media backgrounds — such as photos and videos — to create a more immersive content experience. + +![A visual example of the clear variant of Liquid Glass, which allows the visual detail of the background beneath it to show through.](https://docs-assets.developer.apple.com/published/fe0cd9171626ada19f9ea7343f60a426/materials-ios-liquid-glass-clear%402x.png) + +For optimal contrast and legibility, determine whether to add a dimming layer behind components with clear Liquid Glass: + + * If the underlying content is bright, consider adding a dark dimming layer of 35% opacity. For developer guidance, see [`clear`](https://developer.apple.com/documentation/SwiftUI/Glass/clear). + + * If the underlying content is sufficiently dark, or if you use standard media playback controls from AVKit that provide their own dimming layer, you don’t need to apply a dimming layer. + + + + +For guidance about the use of color, see [Liquid Glass color](https://developer.apple.com/design/human-interface-guidelines/color#Liquid-Glass-color). + +## [Standard materials](https://developer.apple.com/design/human-interface-guidelines/materials#Standard-materials) + +Use standard materials and effects — such as [blur](https://developer.apple.com/documentation/UIKit/UIBlurEffect), [vibrancy](https://developer.apple.com/documentation/UIKit/UIVibrancyEffect), and [blending modes](https://developer.apple.com/documentation/AppKit/NSVisualEffectView/BlendingMode-swift.enum) — to convey a sense of structure in the content beneath Liquid Glass. + +**Choose materials and effects based on semantic meaning and recommended usage.** Avoid selecting a material or effect based on the apparent color it imparts to your interface, because system settings can change its appearance and behavior. Instead, match the material or vibrancy style to your specific use case. + +**Help ensure legibility by using vibrant colors on top of materials.** When you use system-defined vibrant colors, you don’t need to worry about colors seeming too dark, bright, saturated, or low contrast in different contexts. Regardless of the material you choose, use vibrant colors on top of it. For guidance, see [System colors](https://developer.apple.com/design/human-interface-guidelines/color#System-colors). + +![An illustration of a Share button with a translucent background material and a symbol. The symbol uses the systemGray3 color and is difficult to see against the background material.](https://docs-assets.developer.apple.com/published/8a395765f911660a5e16b3bdb30ddd2f/materials-legibility-non-vibrant-label%402x.png)Poor contrast between the material and `systemGray3` label + +![An X in a circle to indicate incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a Share button with a translucent background material and a symbol. The symbol uses vibrant color and is clearly visible against the background material.](https://docs-assets.developer.apple.com/published/7495cfbce7d79a1f5635ea2a729dfc24/materials-legibility-primary-label%402x.png)Good contrast between the material and vibrant color label + +![A checkmark in a circle to indicate correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Consider contrast and visual separation when choosing a material to combine with blur and vibrancy effects.** For example, consider that: + + * Thicker materials, which are more opaque, can provide better contrast for text and other elements with fine features. + + * Thinner materials, which are more translucent, can help people retain their context by providing a visible reminder of the content that’s in the background. + + + + +For developer guidance, see [`Material`](https://developer.apple.com/documentation/SwiftUI/Material). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/materials#Platform-considerations) + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/materials#iOS-iPadOS) + +In addition to Liquid Glass, iOS and iPadOS continue to provide four standard materials — ultra-thin, thin, regular (default), and thick — which you can use in the content layer to help create visual distinction. + +![An illustration of the iOS and iPadOS ultraThin material above a colorful background. Where the material overlaps the background, it provides a diffuse gradient of the background colors.](https://docs-assets.developer.apple.com/published/2ad0598be0bf67fb23e479f102e16b59/materials-ios-material-background-ultrathin%402x.png)`ultraThin` + +![An illustration of the iOS and iPadOS thin material above a colorful background. Where the material overlaps the background, it provides a diffuse and slightly darkened gradient of the background colors.](https://docs-assets.developer.apple.com/published/d298de701d98a146b1436fdf21d0b7ce/materials-ios-material-background-thin%402x.png)`thin` + +![An illustration of the iOS and iPadOS regular material above a colorful background. Where the material overlaps the background, it provides a diffuse and darkened gradient of the background colors.](https://docs-assets.developer.apple.com/published/93a77ac4cfc0786664563a0691498b05/materials-ios-material-background-regular%402x.png)`regular` + +![An illustration of the iOS and iPadOS thick material above a colorful background. Where the material overlaps the background, it provides a dark, muted gradient of the background colors.](https://docs-assets.developer.apple.com/published/2532ddf965d0effa12f528ac10b5a0b3/materials-ios-material-background-thick%402x.png)`thick` + +iOS and iPadOS also define vibrant colors for labels, fills, and separators that are specifically designed to work with each material. Labels and fills both have several levels of vibrancy; separators have one level. The name of a level indicates the relative amount of contrast between an element and the background: The default level has the highest contrast, whereas quaternary (when it exists) has the lowest contrast. + +Except for quaternary, you can use the following vibrancy values for labels on any material. In general, avoid using quaternary on top of the [`thin`](https://developer.apple.com/documentation/SwiftUI/Material/thin) and [`ultraThin`](https://developer.apple.com/documentation/SwiftUI/Material/ultraThin) materials, because the contrast is too low. + + * [`UIVibrancyEffectStyle.label`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/label) (default) + + * [`UIVibrancyEffectStyle.secondaryLabel`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/secondaryLabel) + + * [`UIVibrancyEffectStyle.tertiaryLabel`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/tertiaryLabel) + + * [`UIVibrancyEffectStyle.quaternaryLabel`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/quaternaryLabel) + + + + +You can use the following vibrancy values for fills on all materials. + + * [`UIVibrancyEffectStyle.fill`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/fill) (default) + + * [`UIVibrancyEffectStyle.secondaryFill`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/secondaryFill) + + * [`UIVibrancyEffectStyle.tertiaryFill`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/tertiaryFill) + + + + +The system provides a single, default vibrancy value for a [separator](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/separator), which works well on all materials. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/materials#macOS) + +macOS provides several standard materials with designated purposes, and vibrant versions of all [system colors](https://developer.apple.com/design/human-interface-guidelines/color#Specifications). For developer guidance, see [`NSVisualEffectView.Material`](https://developer.apple.com/documentation/AppKit/NSVisualEffectView/Material-swift.enum). + +**Choose when to allow vibrancy in custom views and controls.** Depending on configuration and system settings, system views and controls use vibrancy to make foreground content stand out against any background. Test your interface in a variety of contexts to discover when vibrancy enhances the appearance and improves communication. + +**Choose a background blending mode that complements your interface design.** macOS defines two modes that blend background content: behind window and within window. For developer guidance, see [`NSVisualEffectView.BlendingMode`](https://developer.apple.com/documentation/AppKit/NSVisualEffectView/BlendingMode-swift.enum). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/materials#tvOS) + +In tvOS, Liquid Glass appears throughout navigation elements and system experiences such as Top Shelf and Control Center. Certain interface elements, like image views and buttons, adopt Liquid Glass when they gain focus. + +![A screenshot of the Destination Video app running in tvOS. The app shows a screen with details about a video called A BOT-anist Adventure. The background is a colorful image of the main character in a scene from the video. The interface elements floating above the background adopt a Liquid Glass appearance to allow background color to show through and create a more immersive media experience.](https://docs-assets.developer.apple.com/published/fd83bb7f079cac7b59cb692d8e1c6707/materials-tvos-media-player%402x.png) + +In addition to Liquid Glass, tvOS continues to provide standard materials, which you can use to help define structure in the content layer. The thickness of a standard material affects how prominently the underlying content shows through. For example, consider using standard materials in the following ways: + +Material| Recommended for +---|--- +[`ultraThin`](https://developer.apple.com/documentation/SwiftUI/Material/ultraThin)| Full-screen views that require a light color scheme +[`thin`](https://developer.apple.com/documentation/SwiftUI/Material/thin)| Overlay views that partially obscure onscreen content and require a light color scheme +[`regular`](https://developer.apple.com/documentation/SwiftUI/Material/regular)| Overlay views that partially obscure onscreen content +[`thick`](https://developer.apple.com/documentation/SwiftUI/Material/thick)| Overlay views that partially obscure onscreen content and require a dark color scheme + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS) + +In visionOS, windows generally use an unmodifiable system-defined material called _glass_ that helps people stay grounded by letting light, the current Environment, virtual content, and objects in people’s surroundings show through. Glass is an adaptive material that limits the range of background color information so a window can continue to provide contrast for app content while becoming brighter or darker depending on people’s physical surroundings and other virtual content. + +Video with custom controls. + +Content description: A recording of the Music app window in visionOS. The window uses the glass material and adapts as the viewing angle and lighting change. + +Play + +Note + +visionOS doesn’t have a distinct Dark Mode setting. Instead, glass automatically adapts to the luminance of the objects and colors behind it. + +**Prefer translucency to opaque colors in windows.** Areas of opacity can block people’s view, making them feel constricted and reducing their awareness of the virtual and physical objects around them. + +![An illustration of a field of view in visionOS with a window in the center. The window has an opaque background that obstructs its surroundings.](https://docs-assets.developer.apple.com/published/137ceb38a96227aa8a9d2021ee82a8e2/materials-visionos-opaque-window-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a field of view in visionOS with a window in the center. The window has a translucent material background that allows its surroundings to pass through.](https://docs-assets.developer.apple.com/published/3f23b3476f6cf8cc77fdcb91a0c15063/materials-visionos-glass-window%402x.png) + +![A checkmark in a circle to indicate correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**If necessary, choose materials that help you create visual separations or indicate interactivity in your app.** If you need to create a custom component, you may need to specify a system material for it. Use the following examples for guidance. + + * The [`thin`](https://developer.apple.com/documentation/SwiftUI/Material/thin) material brings attention to interactive elements like buttons and selected items. + + * The [`regular`](https://developer.apple.com/documentation/SwiftUI/Material/regular) material can help you visually separate sections of your app, like a sidebar or a grouped table view. + + * The [`thick`](https://developer.apple.com/documentation/SwiftUI/Material/thick) material lets you create a dark element that remains visually distinct when it’s on top of an area that uses a `regular` background. + + + + +![An illustration of a field of view in visionOS with a window in the center. The window is composed of a sidebar on the left and a content area on the right, with a text field at the top and a button in the lower-right corner. The sidebar uses regular material, while the text field uses thick material and the button uses thin material.](https://docs-assets.developer.apple.com/published/c3577aa1e00689431e49973173a151f9/visionos-materials-window-example%402x.png) + +To ensure foreground content remains legible when it displays on top of a material, visionOS applies vibrancy to text, symbols, and fills. Vibrancy enhances the sense of depth by pulling light and color forward from both virtual and physical surroundings. + +visionOS defines three vibrancy values that help you communicate a hierarchy of text, symbols, and fills. + + * Use [`UIVibrancyEffectStyle.label`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/label) for standard text. + + * Use [`UIVibrancyEffectStyle.secondaryLabel`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/secondaryLabel) for descriptive text like footnotes and subtitles. + + * Use [`UIVibrancyEffectStyle.tertiaryLabel`](https://developer.apple.com/documentation/UIKit/UIVibrancyEffectStyle/tertiaryLabel) for inactive elements, and only when text doesn’t need high legibility. + + + + +![An illustration of a Share button with a translucent background material and a symbol. The symbol uses the default vibrant label color and has very high contrast against the background material.](https://docs-assets.developer.apple.com/published/8f850521ecc2e3953e8e693fe7b4887b/materials-visionos-label-vibrant-primary%402x.png)`label` + +![An illustration of a Share button with a translucent background material and a symbol. The symbol uses the secondary vibrant label color and has high contrast against the background material.](https://docs-assets.developer.apple.com/published/876503f2b2b5fd1783e359128ffd2482/materials-visionos-label-vibrant-secondary%402x.png)`secondaryLabel` + +![An illustration of a Share button with a translucent background material and a symbol. The symbol uses the tertiary vibrant label color and has muted contrast against the background material.](https://docs-assets.developer.apple.com/published/b3b80e5f23b286f6c7897780676e6dfe/materials-visionos-label-vibrant-tertiary%402x.png)`tertiaryLabel` + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/materials#watchOS) + +**Use materials to provide context in a full-screen modal view.** Because full-screen modal views are common in watchOS, the contrast provided by material layers can help orient people in your app and distinguish controls and system elements from other content. Avoid removing or replacing material backgrounds for modal sheets when they’re provided by default. + +![An illustration of a modal view in watchOS with an example title, descriptive text, and a single action button. The modal completely covers the screen with a transparent material, and uses a thinner material for the button along with vibrant label text.](https://docs-assets.developer.apple.com/published/b9bdbaa947d461e98681c9fbb87a7052/watchos-modal-view-material-background%402x.png) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/materials#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/materials#Related) + +[Color](https://developer.apple.com/design/human-interface-guidelines/color) + +[Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) + +[Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/materials#Developer-documentation) + +[Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass) + +[`glassEffect(_:in:)`](https://developer.apple.com/documentation/SwiftUI/View/glassEffect\(_:in:\)) — SwiftUI + +[`Material`](https://developer.apple.com/documentation/SwiftUI/Material) — SwiftUI + +[`UIVisualEffectView`](https://developer.apple.com/documentation/UIKit/UIVisualEffectView) — UIKit + +[`NSVisualEffectView`](https://developer.apple.com/documentation/AppKit/NSVisualEffectView) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/materials#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_1x.jpg) Meet Liquid Glass ](https://developer.apple.com/videos/play/wwdc2025/219) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/materials#Change-log) + +Date| Changes +---|--- +September 9, 2025| Updated guidance for Liquid Glass. +June 9, 2025| Added guidance for Liquid Glass. +August 6, 2024| Added platform-specific art. +December 5, 2023| Updated descriptions of the various material types, and clarified terms related to vibrancy and material thickness. +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Added guidance on using materials to provide context and orientation in watchOS apps. + diff --git a/skills/hig-foundations/references/motion.md b/skills/hig-foundations/references/motion.md new file mode 100644 index 00000000..262e739c --- /dev/null +++ b/skills/hig-foundations/references/motion.md @@ -0,0 +1,103 @@ +--- +title: "Motion | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/motion + +# Motion + +Beautiful, fluid motions bring the interface to life, conveying status, providing feedback and instruction, and enriching the visual experience of your app or game. + +![A sketch of three overlapping diamonds, suggesting the movement of an element from left to right. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1a0efd7807cfcba7a5821be86b20bafc/foundations-motion-intro%402x.png) + +Many system components automatically include motion, letting you offer familiar and consistent experiences throughout your app or game. System components might also adjust their motion in response to factors like accessibility settings or different input methods. For example, the movement of [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials#Liquid-Glass) responds to direct touch interaction with greater emphasis to reinforce the feeling of a tactile experience, but produces a more subdued effect when a person interacts using a trackpad. + +If you design custom motion, follow the guidelines below. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/motion#Best-practices) + +**Add motion purposefully, supporting the experience without overshadowing it.** Don’t add motion for the sake of adding motion. Gratuitous or excessive animation can distract people and may make them feel disconnected or physically uncomfortable. + +**Make motion optional.** Not everyone can or wants to experience the motion in your app or game, so it’s essential to avoid using it as the only way to communicate important information. To help everyone enjoy your app or game, supplement visual feedback by also using alternatives like [haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics) and [audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio) to communicate. + +## [Providing feedback](https://developer.apple.com/design/human-interface-guidelines/motion#Providing-feedback) + +**Strive for realistic feedback motion that follows people’s gestures and expectations.** In nongame apps, accurate, realistic motion can help people understand how something works, but feedback motion that doesn’t make sense can make them feel disoriented. For example, if someone reveals a view by sliding it down from the top, they don’t expect to dismiss the view by sliding it to the side. + +**Aim for brevity and precision in feedback animations.** When animated feedback is brief and precise, it tends to feel lightweight and unobtrusive, and it can often convey information more effectively than prominent animation. For example, when a game displays a succinct animation that’s precisely tied to a successful action, players can instantly get the message without being distracted from their gameplay. Another example is in visionOS: When people tap a panorama in Photos, it quickly and smoothly expands to fill the space in front of them, helping them track the transition without making them wait to enjoy the content. + +**In apps, generally avoid adding motion to UI interactions that occur frequently.** The system already provides subtle animations for interactions with standard interface elements. For a custom element, you generally want to avoid making people spend extra time paying attention to unnecessary motion every time they interact with it. + +**Let people cancel motion.** As much as possible, don’t make people wait for an animation to complete before they can do anything, especially if they have to experience the animation more than once. + +**Consider using animated symbols where it makes sense.** When you use SF Symbols 5 or later, you can apply animations to SF Symbols or custom symbols. For guidance, see [Animations](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Animations). + +## [Leveraging platform capabilities](https://developer.apple.com/design/human-interface-guidelines/motion#Leveraging-platform-capabilities) + +**Make sure your game’s motion looks great by default on each platform you support.** In most games, maintaining a consistent frame rate of 30 to 60 fps typically results in a smooth, visually appealing experience. For each platform you support, use the device’s graphics capabilities to enable default settings that let people enjoy your game without first having to change those settings. + +**Let people customize the visual experience of your game to optimize performance or battery life.** For example, consider letting people switch between power modes when the system detects the presence of an external power source. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/motion#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or tvOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/motion#visionOS) + +In addition to subtly communicating context, drawing attention to information, and enriching immersive experiences, motion in visionOS can combine with [depth](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Depth) to provide essential feedback when people look at interactive elements. Because motion is likely to be a large part of your visionOS experience, it’s crucial to avoid causing distraction, confusion, or discomfort. + +**As much as possible, avoid displaying motion at the edges of a person’s field of view.** People can be particularly sensitive to motion that occurs in their peripheral vision: in addition to being distracting, such motion can even cause discomfort because it can make people feel like they or their surroundings are moving. If you need to show an object moving in the periphery during an immersive experience, make sure the object’s brightness level is similar to the rest of the visible content. + +**Help people remain comfortable when showing the movement of large virtual objects.** If an object is large enough to fill a lot of the [field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view), occluding most or all of [passthrough](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Immersion-and-passthrough), people can naturally perceive it as being part of their surroundings. To help people perceive the object’s movement without making them think that they or their surroundings are moving, you can increase the object’s translucency, helping people see through it, or lower its contrast to make its motion less noticeable. + +Note + +People 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. + +**Consider using fades when you need to relocate an object.** When an object moves from one location to another, people naturally watch the movement. If such movement doesn’t communicate anything useful to people, you can fade the object out before moving it and fade it back in after it’s in the new location. + +**In general, avoid letting people rotate a virtual world.** When a virtual world rotates, the experience typically upsets people’s sense of stability, even when they control the rotation and the movement is subtle. Instead, consider using instantaneous directional changes during a quick fade-out. + +**Consider giving people a stationary frame of reference.** It can be easier for people to handle visual movement when it’s contained within an area that doesn’t move. In contrast, if the entire surrounding area appears to move — for example, in a game that automatically moves a player through space — people can feel unwell. + +**Avoid showing objects that oscillate in a sustained way.** In particular, you want to avoid showing an oscillation that has a frequency of around 0.2 Hz because people can be very sensitive to this frequency. If you need to show objects oscillating, aim to keep the amplitude low and consider making the content translucent. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/motion#watchOS) + +SwiftUI provides a powerful and streamlined way to add motion to your app. If you need to use WatchKit to animate layout and appearance changes — or create animated image sequences — see [`WKInterfaceImage`](https://developer.apple.com/documentation/WatchKit/WKInterfaceImage#1652345). + +Note + +All 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. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/motion#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/motion#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +[Accessibility](https://www.apple.com/accessibility/) + +[Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout) + +[Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/motion#Developer-documentation) + +[Animating views and transitions](https://developer.apple.com/tutorials/SwiftUI/animating-views-and-transitions) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/motion#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/B38CC217-7635-48EF-B8C9-F7954F390CCE/9273_wide_250x141_1x.jpg) Enhance your UI animations and transitions ](https://developer.apple.com/videos/play/wwdc2024/10145) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/A8C0D750-CF09-48F3-982B-0D1B870F273F/9279_wide_250x141_1x.jpg) Create custom visual effects with SwiftUI ](https://developer.apple.com/videos/play/wwdc2024/10151) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/2C47B638-090D-4CBB-9E9E-EBE8114536D9/8132_wide_250x141_1x.jpg) Design considerations for vision and motion ](https://developer.apple.com/videos/play/wwdc2023/10078) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/motion#Change-log) + +Date| Changes +---|--- +September 9, 2025| Added guidance for Liquid Glass. +June 10, 2024| Added game-specific examples and enhanced guidance for using motion in games. +February 2, 2024| Enhanced guidance for minimizing peripheral motion in visionOS apps. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-foundations/references/privacy.md b/skills/hig-foundations/references/privacy.md new file mode 100644 index 00000000..4d0811d6 --- /dev/null +++ b/skills/hig-foundations/references/privacy.md @@ -0,0 +1,231 @@ +--- +title: "Privacy | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/privacy + +# Privacy + +Privacy is paramount: it’s critical to be transparent about the privacy-related data and resources you require and essential to protect the data people allow you to access. + +![A sketch of an upright hand, suggesting protection. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/161fec1d77c705ccf076fb4c67d32f5c/foundations-privacy-intro%402x.png) + +People use their devices in very personal ways and they expect apps to help them preserve their privacy. + +When you submit a new or updated app, you must provide details about your privacy practices and the privacy-relevant data you collect so the App Store can display the information on your product page. (You can manage this information at any time in [App Store Connect](https://help.apple.com/app-store-connect/#/dev1b4647c5b).) People use the privacy details on your product page to make an informed decision before they download your app. To learn more, see [App privacy details on the App Store](https://developer.apple.com/app-store/app-privacy-details/). + +![A screenshot of the App Privacy screen in an app’s App Store product page. The top card in the screen is titled Data Used to Track You and lists contact info, other data, and identifiers. The bottom card is titled Data Linked to You and lists health and fitness, financial info, contact info, purchases, location, and contacts.](https://docs-assets.developer.apple.com/published/50727e3a2229fda1e6fa93ca9677cc7f/privacy-social-media-app-store-nutrition-labels%402x.png) + +An app’s App Store product page helps people understand the app’s privacy practices before they download it. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/privacy#Best-practices) + +**Request access only to data that you actually need.** Asking for more data than a feature needs — or asking for data before a person shows interest in the feature — can make it hard for people to trust your app. Give people precise control over their data by making your permission requests as specific as possible. + +**Be transparent about how your app collects and uses people’s data.** People are less likely to be comfortable sharing data with your app if they don’t understand exactly how you plan to use it. Always respect people’s choices to use system features like Hide My Email and Mail Privacy Protection, and be sure you understand your obligations with regard to app tracking. To learn more about Apple privacy features, see [Privacy](https://www.apple.com/privacy/); for developer guidance, see [User privacy and data use](https://developer.apple.com/app-store/user-privacy-and-data-use/). + +**Process data on the device where possible.** In iOS, for example, you can take advantage of the Apple Neural Engine and custom CreateML models to process the data right on the device, helping you avoid lengthy and potentially risky round trips to a remote server. + +**Adopt system-defined privacy protections and follow security best practices.** For example, in iOS 15 and later, you can rely on CloudKit to provide encryption and key management for additional data types, like strings, numbers, and dates. + +## [Requesting permission](https://developer.apple.com/design/human-interface-guidelines/privacy#Requesting-permission) + +Here are several examples of the things you must request permission to access: + + * Personal data, including location, health, financial, contact, and other personally identifying information + + * User-generated content like emails, messages, calendar data, contacts, gameplay information, Apple Music activity, HomeKit data, and audio, video, and photo content + + * Protected resources like Bluetooth peripherals, home automation features, Wi-Fi connections, and local networks + + * Device capabilities like camera and microphone + + * In a visionOS app running in a Full Space, ARKit data, such as hand tracking, plane estimation, image anchoring, and world tracking + + * The device’s advertising identifier, which supports app tracking + + + + +The system provides a standard alert that lets people view each request you make. You supply copy that describes why your app needs access, and the system displays your description in the alert. People can also view the description — and update their choice — in Settings > Privacy. + +**Request permission only when your app clearly needs access to the data or resource.** It’s natural for people to be suspicious of a request for personal information or access to a device capability, especially if there’s no obvious need for it. Ideally, wait to request permission until people actually use an app feature that requires access. For example, you can use the [location button](https://developer.apple.com/design/human-interface-guidelines/privacy#Location-button) to give people a way to share their location after they indicate interest in a feature that needs that information. + +**Avoid requesting permission at launch unless the data or resource is required for your app to function.** People are less likely to be bothered by a launch-time request when it’s obvious why you’re making it. For example, people understand that a navigation app needs access to their location before they can benefit from it. Similarly, before people can play a visionOS game that lets them bounce virtual objects off walls in their surroundings, they need to permit the game to access information about their surroundings. + +**Write copy that clearly describes how your app uses the ability, data, or resource you’re requesting.** The standard alert displays your copy (called a _purpose string_ or _usage description string_) after your app name and before the buttons people use to grant or deny their permission. Aim for a brief, complete sentence that’s straightforward, specific, and easy to understand. Use sentence case, avoid passive voice, and include a period at the end. For developer guidance, see [Requesting access to protected resources](https://developer.apple.com/documentation/UIKit/requesting-access-to-protected-resources) and [App Tracking Transparency](https://developer.apple.com/documentation/AppTrackingTransparency). + +| Example purpose string| Notes +---|---|--- +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| The app records during the night to detect snoring sounds.| An active sentence that clearly describes how and why the app collects the data. +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| Microphone access is needed for a better experience.| A passive sentence that provides a vague, undefined justification. +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| Turn on microphone access.| An imperative sentence that doesn’t provide any justification. + +Here are several examples of the standard system alert: + + * Example 1 + * Example 2 + * Example 3 + + + +![A screenshot of a permission alert for a social media app displaying a purpose string that reads Allow Social Media to access your location? Turning on location will allow us to show you nearby post locations. Below the string is a small map image containing the Precise On notice and below the map are three buttons in a stack. From the top, the buttons are titled Allow Once, Allow While Using App, and Don’t Allow.](https://docs-assets.developer.apple.com/published/cc8f1498cf0906c5cbba7b0a71fff511/privacy-social-media-post-location-alert%402x.png) + +![A screenshot of a permission alert for a social media app displaying a purpose string that reads Social Media Would Like to Access Your Photos. Allow access to photos to upload photos from your library. The string is followed by three buttons in a stack. From the top, the buttons are titled Select Photos, Allow Access to All Photos, and Don’t Allow.](https://docs-assets.developer.apple.com/published/6143de7f950793edc8d632a54bf5d2bb/privacy-social-media-post-photo-alert%402x.png) + +![A screenshot of a permission alert for a social media app displaying a purpose string that reads Social Media Would Like to Access Your Contacts. Find friends using Social Media and add them to your network. The string is followed by two side-by-side buttons: Don’t Allow and Allow.](https://docs-assets.developer.apple.com/published/9a0f4d978424e52a782b4f1596426415/privacy-social-media-friends-contacts-alert%402x.png) + +### [Pre-alert screens, windows, or views](https://developer.apple.com/design/human-interface-guidelines/privacy#Pre-alert-screens-windows-or-views) + +Ideally, the current context helps people understand why you’re requesting their permission. If it’s essential to provide additional details, you can display a custom screen or window before the system alert appears. The following guidelines apply to custom views that display before system alerts that request permission to access protected data and resources, including camera, microphone, location, contact, calendar, and tracking. + +**Include only one button and make it clear that it opens the system alert.** People can feel manipulated when a custom screen or window also includes a button that doesn’t open the alert because the experience diverts them from making their choice. Another type of manipulation is using a term like “Allow” to title the custom screen’s button. If the custom button seems similar in meaning and visual weight to the allow button in the alert, people can be more likely to choose the alert’s allow button without meaning to. Use a term like “Continue” or “Next” to title the single button in your custom screen or window, clarifying that its action is to open the system alert. + +![A screenshot of an app's pre-alert screen that reads Turning on location services allows us to provide features like: alerts when your friends are nearby, news of events happening near you, tagging and sharing your location. You can change this later in the Settings app. Below the text is a button titled Next.](https://docs-assets.developer.apple.com/published/bda87e1bb5098ab79fee0d0a3be3a10b/privacy-custom-messaging-correct%402x.png) + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Don’t include additional actions in your custom screen or window.** For example, don’t provide a way for people to leave the screen or window without viewing the system alert — like offering an option to close or cancel. + +![A screenshot of an app’s pre-alert screen that includes a button titled Cancel that appears below the Next button.](https://docs-assets.developer.apple.com/published/56cc76fcd5f87de8dae06080b81358f2/privacy-custom-messaging-incorrect-cancel-button%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Don’t include an option to cancel. + +![A screenshot of an app’s pre-alert screen that includes a Close button in the top-left corner. The Next button appears near the bottom of the screen.](https://docs-assets.developer.apple.com/published/a5cb7d6881eb22e248afd3f806743f67/privacy-custom-messaging-incorrect-close-button%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Don’t include an option to close the view. + +### [Tracking requests](https://developer.apple.com/design/human-interface-guidelines/privacy#Tracking-requests) + +App tracking is a sensitive issue. In some cases, it might make sense to display a custom screen or window that describes the benefits of tracking. If you want to perform app tracking as soon as people launch your app, you must display the system-provided alert before you collect any tracking data. + +**Never precede the system-provided alert with a custom screen or window that could confuse or mislead people.** People sometimes tap quickly to dismiss alerts without reading them. A custom messaging screen, window, or view that takes advantage of such behaviors to influence choices will lead to rejection by App Store review. + +There are several prohibited custom-screen designs that will cause rejection. Some examples are offering incentives, displaying a screen or window that looks like a request, displaying an image of the alert, and annotating the screen behind the alert (as shown below). To learn more, see [App Review Guidelines: 5.1.1 (iv)](https://developer.apple.com/app-store/review/guidelines/#data-collection-and-storage). + + * Incentive + * Imitation request + * Alert image + * Alert annotation + + + +![A screenshot of an app’s pre-tracking message that reads Allow tracking and get a $100 credit toward your next purchase. Below the text is an image of a dollar sign inside a circle. Below the image is a button titled Get $100 credit.](https://docs-assets.developer.apple.com/published/6000f4e89c244b12c8438aec034f7d1b/privacy-custom-messaging-prohibited-incentive%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Don’t offer incentives for granting the request. You can’t offer people compensation for granting their permission, and you can’t withhold functionality or content or make your app unusable until people allow you to track them. + +![A screenshot of an app’s pre-tracking message that reads Allow tracking for a better experience. Below the text is a bar graph image that shows four bars increasing in height from left to right. Below the graph is a button titled Allow Tracking.](https://docs-assets.developer.apple.com/published/f1d292d13b6548e9eb72397e0d3ad760/privacy-custom-messaging-prohibited-imitation%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Don’t display a custom screen that mirrors the functionality of the system alert. In particular, don’t create a button title that uses “Allow” or similar terms, because people don’t allow anything in a pre-alert screen. + +![A screenshot of an app’s pre-tracking message that reads Choose Allow when prompted. Below the text is an image of the system-provided alert. Below the image is a button titled Continue. The Allow While Using the App button in the system-provided alert image is circled.](https://docs-assets.developer.apple.com/published/5ae208fd0806ac0d7e89f9939a93c6e5/privacy-custom-messaging-prohibited-alert%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Don’t show an image of the standard alert and modify it in any way. + +![A screenshot of an app’s pre-tracking message that reads Allow tracking for a better experience. The app’s custom screen also includes an upward-pointing arrow and the words Choose Allow in the lower third of the screen.](https://docs-assets.developer.apple.com/published/780cf726198155101ee7cff6d786669f/privacy-custom-messaging-prohibited-alert-annotation%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Don’t add a visual cue that draws people’s attention to the system alert’s Allow buttons. + +## [Location button](https://developer.apple.com/design/human-interface-guidelines/privacy#Location-button) + +In iOS, iPadOS, and watchOS, Core Location provides a button so people can grant your app temporary authorization to access their location at the moment a task needs it. A location button’s appearance can vary to match your app’s UI and it always communicates the action of location sharing in a way that’s instantly recognizable. + +![An image of a lozenge-shaped blue button that displays a white location indicator — that is, a narrow arrow head shape that points to the top right — followed by the text Current Location.](https://docs-assets.developer.apple.com/published/2d4e44adec80170cec96d3446617e700/location-button%402x.png) + +The first time people open your app and tap a location button, the system displays a standard alert. The alert helps people understand how using the button limits your app’s access to their location, and reminds them of the location indicator that appears when sharing starts. + +![A screenshot of the alert displayed by the location button that appears on top of a background image showing a partial map. The alert reads Allow Social Media to access your location? Turning on location will allow us to show you nearby post locations. Below this text the alert displays a small image of the map, zoomed in to show part of Cupertino. Below the map are three buttons; from the top the titles are Allow Once, Allow While Using App, and Don't Allow.](https://docs-assets.developer.apple.com/published/5cff6abb7fc42b749c616ab763a09968/privacy-social-media-map-location-alert%402x.png) + +After people confirm their understanding of the button’s action, simply tapping the location button gives your app one-time permission to access their location. Although each one-time authorization expires when people stop using your app, they don’t need to reconfirm their understanding of the button’s behavior. + +Note + +If 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`](https://developer.apple.com/documentation/CoreLocationUI/LocationButton) (SwiftUI) and [`CLLocationButton`](https://developer.apple.com/documentation/CoreLocationUI/CLLocationButton) (Swift). + +**Consider using the location button to give people a lightweight way to share their location for specific app features.** For example, your app might help people attach their location to a message or post, find a store, or identify a building, plant, or animal they’ve encountered in their location. If you know that people often grant your app _Allow Once_ permission, consider using the location button to help them benefit from sharing their location without having to repeatedly interact with the alert. + +**Consider customizing the location button to harmonize with your UI.** Specifically, you can: + + * Choose the system-provided title that works best with your feature, such as “Current Location” or “Share My Current Location.” + + * Choose the filled or outlined location glyph. + + * Select a background color and a color for the title and glyph. + + * Adjust the button’s corner radius. + + + + +To help people recognize and trust location buttons, you can’t customize the button’s other visual attributes. The system also ensures a location button remains legible by warning you about problems like low-contrast color combinations or too much translucency. In addition to fixing such problems, you’re responsible for making sure the text fits in the button — for example, button text needs to fit without truncation at all accessibility text sizes and when translated into other languages. + +Important + +If 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. + +## [Protecting data](https://developer.apple.com/design/human-interface-guidelines/privacy#Protecting-data) + +Protecting people’s information is paramount. Give people confidence in your app’s security and help preserve their privacy by taking advantage of system-provided security technologies when you need to store information locally, authorize people for specific operations, and transport information across a network. + +Here are some high-level guidelines. + +**Avoid relying solely on passwords for authentication.** Where possible, use [passkeys](https://developer.apple.com/documentation/authenticationservices/public-private_key_authentication/supporting_passkeys/) to replace passwords. If you need to continue using passwords for authentication, augment security by requiring two-factor authentication (for developer guidance, see [Securing Logins with iCloud Keychain Verification Codes](https://developer.apple.com/documentation/AuthenticationServices/securing-logins-with-icloud-keychain-verification-codes)). To further protect access to apps that people keep logged in on their device, use biometric identification like Face ID, Optic ID, or Touch ID. For developer guidance, see [Local Authentication](https://developer.apple.com/documentation/LocalAuthentication). + +**Store sensitive information in a keychain.** A keychain provides a secure, predictable user experience when handling someone’s private information. For developer guidance, see [Keychain services](https://developer.apple.com/documentation/Security/keychain-services). + +**Never store passwords or other secure content in plain-text files.** Even if you restrict access using file permissions, sensitive information is much safer in an encrypted keychain. + +**Avoid inventing custom authentication schemes.** If your app requires authentication, prefer system-provided features like [passkeys](https://developer.apple.com/documentation/authenticationservices/public-private_key_authentication/supporting_passkeys/), [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple) or [Password AutoFill](https://developer.apple.com/documentation/Security/password-autofill). For related guidance, see [Managing accounts](https://developer.apple.com/design/human-interface-guidelines/managing-accounts). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/privacy#Platform-considerations) + + _No additional considerations for iOS, iPadOS, tvOS, or watchOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/privacy#macOS) + +**Sign your app with a valid Developer ID.** If you choose to distribute your app outside the store, signing your app with Developer ID identifies you as an Apple developer and confirms that your app is safe to use. For developer guidance, see [Xcode Help](https://developer.apple.com/go/?id=ios-app-distribution-guide). + +**Protect people’s data with app sandboxing.** Sandboxing provides your app with access to system resources and user data while protecting it from malware. All apps submitted to the Mac App Store require sandboxing. For developer guidance, see [Configuring the macOS App Sandbox](https://developer.apple.com/documentation/Xcode/configuring-the-macos-app-sandbox). + +**Avoid making assumptions about who is signed in.** Because of fast user switching, multiple people may be active on the same system. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/privacy#visionOS) + +By default, visionOS uses ARKit algorithms to handle features like persistence, world mapping, segmentation, matting, and environment lighting. These algorithms are always running, allowing apps and games to automatically benefit from ARKit while in the Shared Space. + +ARKit doesn’t send data to apps in the Shared Space; to access ARKit APIs, your app must open a Full Space. Additionally, features like Plane Estimation, Scene Reconstruction, Image Anchoring, and Hand Tracking require people’s permission to access any information. For developer guidance, see [Setting up access to ARKit data](https://developer.apple.com/documentation/visionOS/setting-up-access-to-arkit-data). + +In visionOS, user input is private by design. The system automatically displays hover effects when people look at interactive components you create using SwiftUI or RealityKit, giving people the visual feedback they need without exposing where they’re looking before they tap. For guidance, see [Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes) and [Gestures > visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS). + +Developer access to device cameras works differently in visionOS than it does in other platforms. Specifically, the back camera provides blank input and is only available as a compatibility convenience; the front camera provides input for [spatial Personas](https://developer.apple.com/design/human-interface-guidelines/shareplay#visionOS), but only after people grant their permission. If the iOS or iPadOS app you’re bringing to visionOS includes a feature that needs camera access, remove it or replace it with an option for people to import content instead. For developer guidance, see [Making your existing app compatible with visionOS](https://developer.apple.com/documentation/visionOS/making-your-app-compatible-with-visionos). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/privacy#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/privacy#Related) + +[Entering data](https://developer.apple.com/design/human-interface-guidelines/entering-data) + +[Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/privacy#Developer-documentation) + +[Requesting access to protected resources](https://developer.apple.com/documentation/UIKit/requesting-access-to-protected-resources) — UIKit + +[Security](https://developer.apple.com/documentation/Security) + +[Requesting authorization to use location services](https://developer.apple.com/documentation/CoreLocation/requesting-authorization-to-use-location-services) — CoreLocation + +[App Tracking Transparency](https://developer.apple.com/documentation/AppTrackingTransparency) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/privacy#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/0A08BD06-2B59-45BA-AA75-C9206946195D/9945_wide_250x141_1x.jpg) Integrate privacy into your development process ](https://developer.apple.com/videos/play/wwdc2025/246) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/473C8E4A-1764-482D-BE24-B3A7BBDBD526/9996_wide_250x141_1x.jpg) What’s new in passkeys ](https://developer.apple.com/videos/play/wwdc2025/279) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/39DEAE04-CBAD-401A-973C-3916F2B9624A/9251_wide_250x141_1x.jpg) What’s new in privacy ](https://developer.apple.com/videos/play/wwdc2024/10123) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/privacy#Change-log) + +Date| Changes +---|--- +June 21, 2023| Consolidated guidance into new page and updated for visionOS. + diff --git a/skills/hig-foundations/references/right-to-left.md b/skills/hig-foundations/references/right-to-left.md new file mode 100644 index 00000000..73347391 --- /dev/null +++ b/skills/hig-foundations/references/right-to-left.md @@ -0,0 +1,206 @@ +--- +title: "Right to left | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/right-to-left + +# Right to left + +Support right-to-left languages like Arabic and Hebrew by reversing your interface as needed to match the reading direction of the related scripts. + +![A sketch of a right-aligned bulleted list within a window, suggesting an interface displayed in a right-to-left language. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/5d683460f2af897b631f4dad86fd3473/foundations-rtl-intro%402x.png) + +When people choose a language for their device — or just your app or game — they expect the interface to adapt in various ways (to learn more, see [Localization](https://developer.apple.com/localization/)). + +System-provided UI frameworks support right-to-left (RTL) by default, allowing system-provided UI components to flip automatically in the RTL context. If you use system-provided elements and standard layouts, you might not need to make any changes to your app’s automatically reversed interface. + +If you want to fine-tune your layout or enhance specific localizations to adapt to different currencies, numerals, or mathematical symbols that can occur in various locales in countries that use RTL languages, follow these guidelines. + +## [Text alignment](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Text-alignment) + +**Adjust text alignment to match the interface direction, if the system doesn’t do so automatically.** For example, if you left-align text with content in the left-to-right (LTR) context, right-align the text to match the content’s mirrored position in the RTL context. + +![An illustration showing a layout of text and images in an interface. Three bars that represent text are left-aligned above a rounded rectangle area. A placeholder image is centered in the area, above another bar at the bottom edge. The bar inside the area is left-aligned.](https://docs-assets.developer.apple.com/published/7bdc0741a96d6e2aa88b79c64e151c8a/text-alignment-ltr-screen%402x.png)Left-aligned text in the LTR context + +![An illustration showing a layout of text and images in an interface. Three bars that represent text are right-aligned above a rounded rectangle area. A placeholder image is centered in the area, above another bar at the bottom edge. The bar inside the area is right-aligned. The placeholder image isn't flipped.](https://docs-assets.developer.apple.com/published/10386033d677b3fd65ec33ac16d67e56/text-alignment-rtl-screen%402x.png)Right-aligned content in the RTL context + +**Align a paragraph based on its language, not on the current context.** When the alignment of a paragraph — defined as three or more lines of text — doesn’t match its language, it can be difficult to read. For example, right-aligning a paragraph that consists of LTR text can make the beginning of each line difficult to see. To improve readability, continue aligning one- and two-line text blocks to match the reading direction of the current context, but align a paragraph to match its language. + +![An image showing two paragraphs of placeholder copy. The first paragraph is in Arabic and is right-aligned. The second paragraph is in English and is left-aligned.](https://docs-assets.developer.apple.com/published/b32ae443b1d7daa1bb661b56b42b8a34/paragraph-alignment-correct%402x.png)A left-aligned paragraph in the RTL context + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An image showing two paragraphs of placeholder copy. The first paragraph is in Arabic and the second paragraph is in English. Both paragraphs are right-aligned.](https://docs-assets.developer.apple.com/published/738bda44c81a146b02cbd67db5985ff2/paragraph-alignment-wrong%402x.png)A right-aligned paragraph in the RTL context + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Use a consistent alignment for all text items in a list.** To ensure a comfortable reading and scanning experience, reverse the alignment of all items in a list, including items that are displayed in a different script. + +![An illustration of a right-aligned list of gray bars that represent right-to-left text.](https://docs-assets.developer.apple.com/published/8e497bdc80a98b7896b492d2e5bfb57b/mixed-script-list-alignment-correct%402x.png)Right-aligned content in the RTL context + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a list of gray bars. The first, third, fourth, and fifth bars represent right-to-left text. The second bar is incorrectly left-aligned.](https://docs-assets.developer.apple.com/published/8764f467c4870522419bb26fa5894c09/mixed-script-list-alignment-wrong%402x.png)Mixed alignment in the RTL content + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +## [Numbers and characters](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Numbers-and-characters) + +Different RTL languages can use different number systems. For example, Hebrew text uses Western Arabic numerals, whereas Arabic text might use either Western or Eastern Arabic numerals. The use of Western and Eastern Arabic numerals varies among countries and regions and even among areas within the same country or region. + +If your app covers mathematical concepts or other number-centric topics, it’s a good idea to identify the appropriate way to display such information in each locale you support. In contrast, apps that don’t address number-related topics can generally rely on system-provided number representations. + +![From the left, the numerals one, two, and three in Western Arabic numerals.](https://docs-assets.developer.apple.com/published/c40d3d208a9aee56d680d6915fb44fff/textformat-123-ltr%402x.png)Western Arabic numerals + +![From the right, the numerals one, two, and three in Eastern Arabic numerals.](https://docs-assets.developer.apple.com/published/8a9f9c2f6fb291304a5d93e27be0bead/textformat-123-ar%402x.png)Eastern Arabic numerals + +**Don’t reverse the order of numerals in a specific number.** Regardless of the current language or the surrounding content, the digits in a specific number — such as “541,” a phone number, or a credit card number — always appear in the same order. + +![From the left, the two words order and number followed by the number 123456 in Latin script.](https://docs-assets.developer.apple.com/published/e6ae8d9dab2a6da825829cf88bfb6adb/latin-numerals%402x.png)Latin + +![From the right, the two words order and number followed by the number 12345 in Hebrew script.](https://docs-assets.developer.apple.com/published/8b4b0b82384424720d861865ac61ad37/hebrew-numerals%402x.png)Hebrew + +![From the right, the two words order and number in Arabic script, followed by the number 12345 in Western Arabic numerals.](https://docs-assets.developer.apple.com/published/427e50992b8e4900fa7f64c73ad8c0b1/western-arabic-numerals%402x.png)Arabic (Western Arabic numerals) + +![From the right, the two words order and number in Arabic script, followed by the number 12345 in Eastern Arabic numerals.](https://docs-assets.developer.apple.com/published/6edfa8597370c06b66cdbbaae728f97b/eastern-arabic-numerals%402x.png)Arabic (Eastern Arabic numerals) + +**Reverse the order of numerals that show progress or a counting direction; never flip the numerals themselves.** Controls like progress bars, sliders, and rating controls often include numerals to clarify their meaning. If you use numerals in this way, be sure to reverse the order of the numerals to match the direction of the flipped control. Also reverse a sequence of numerals if you use the sequence to communicate a specific order. + +![A horizontal row of five stars. From the left, the first three and a half stars are filled. Below the stars is a row of Latin numerals, each numeral vertically aligned with a star above. From the left, the numerals are one, two, three, four, and five.](https://docs-assets.developer.apple.com/published/d249f8e9df8a8dfcf1526dc3f5c4dd5b/match-numeral-order-to-directional-controls-latin%402x.png)Latin + +![A horizontal row of five stars. From the right, the first three and a half stars are filled. Below the stars is a row of Eastern Arabic numerals, each numeral vertically aligned with a star above. From the right, the numerals are one, two, three, four, and five.](https://docs-assets.developer.apple.com/published/77bb1e2c8c704fa2235bd7cc8d7acf31/match-numeral-order-to-directional-controls-eastern-arabic%402x.png)Arabic (Eastern Arabic numerals) + +![A horizontal row of five stars. From the right, the first three and a half stars are filled. Below the stars is a row of Western Arabic numerals, each numeral vertically aligned with a star above. From the right, the numerals are one, two, three, four, and five.](https://docs-assets.developer.apple.com/published/164c27556e186de5aa0c0312639f1c8f/match-numeral-order-to-directional-controls-western-arabic-hebrew%402x.png)Hebrew + +![A horizontal row of five stars. From the right, the first three and a half stars are filled. Below the stars is a row of Western Arabic numerals, each numeral vertically aligned with a star above. From the right, the numerals are one, two, three, four, and five.](https://docs-assets.developer.apple.com/published/164c27556e186de5aa0c0312639f1c8f/match-numeral-order-to-directional-controls-western-arabic-hebrew%402x.png)Arabic (Western Arabic numerals) + +## [Controls](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Controls) + +**Flip controls that show progress from one value to another.** Because people tend to view forward progress as moving in the same direction as the language they read, it makes sense to flip controls like sliders and progress indicators in the RTL context. When you do this, also be sure to reverse the positions of the accompanying glyphs or images that depict the beginning and ending values of the control. + +![An illustration of a volume control slider. The left side has a right-facing speaker glyph with no sound emerging, and the right side has a right-facing speaker glyph with sound waves projecting from it, showing that moving the thumb from left to right makes the volume louder.](https://docs-assets.developer.apple.com/published/7ef757b48788617e37c2a275b6b47f6d/flipped-directional-control-ltr%402x.png)A directional control in the LTR context + +![An illustration of a volume control slider. The right side has a left-facing speaker glyph with no sound emerging, and the left side has a left-facing speaker glyph with sound waves projecting from it, showing that moving the thumb from right to left makes the volume louder.](https://docs-assets.developer.apple.com/published/b5619e5a9fb04db70e26dac8c20313b2/flipped-directional-control-rtl%402x.png)A directional control in the RTL context + +**Flip controls that help people navigate or access items in a fixed order.** For example, in the RTL context, a back button must point to the right so the flow of screens matches the reading order of the RTL language. Similarly, next or previous buttons that let people access items in an ordered list need to flip in the RTL context to match the reading order. + +**Preserve the direction of a control that refers to an actual direction or points to an onscreen area.** For example, if you provide a control that means “to the right,” it must always point right, regardless of the current context. + +**Visually balance adjacent Latin and RTL scripts when necessary.** In buttons, labels, and titles, Arabic or Hebrew text can appear too small when next to uppercased Latin text, because Arabic and Hebrew don’t include uppercase letters. To visually balance Arabic or Hebrew text with Latin text that uses all capitals, it often works well to increase the RTL font size by about 2 points. + +![A horizontal row of three blue oval buttons. Each button is labeled with the word download. From the left, the labels are in Latin, Arabic, and Hebrew scripts, with the English label using all capital letters. Two horizontal red lines run across all three buttons, the top line is the ascender line and the bottom line is the baseline. Every letter in the English label touches both lines. Only the last two letters in the Arabic label touch or extend below the baseline; only the last letter touches the ascender line. No letters in the Hebrew label touch either line. In comparison with the Latin label, both the Arabic and Hebrew labels look small.](https://docs-assets.developer.apple.com/published/190b48a71d8d934047905be986732fb4/download-uneven-vertical-height%402x.png)Arabic and Hebrew text can look too small next to uppercased Latin text of the same font size. + +![A horizontal row of three blue oval buttons. Each button is labeled with the word download. From the left, the labels are in Latin, Arabic, and Hebrew scripts, with the English label using all capital letters. Two horizontal red lines run across all three buttons, the top line is the ascender line and the bottom line is the baseline. Every letter in the English label touches both lines. The last two letters in the Arabic label touch or extend below the baseline, and the first and last letters extend above the ascender line. All letters in the Hebrew label touch the base line and the ascender line. The increased size of the Arabic and Hebrew labels make them look similar in size to the Latin label.](https://docs-assets.developer.apple.com/published/19099f313875cd49849a1ca28f1dfca4/download-even-vertical-height%402x.png)You can slightly increase the font size of Arabic and Hebrew text to visually balance uppercased Latin text. + +## [Images](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Images) + +**Avoid flipping images like photographs, illustrations, and general artwork.** Flipping an image often changes the image’s meaning; flipping a copyrighted image could be a violation. If an image’s content is strongly connected to reading direction, consider creating a new version of the image instead of flipping the original. + +![A simplified illustration of a globe that uses solid black shapes to show most of Africa, Europe, Asia, Australia, and Antarctica.](https://docs-assets.developer.apple.com/published/ca80fd6003c4ebff97714123a33c974e/image-displayed-right%402x.png) + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![A simplified illustration of a globe that shows a horizontally flipped Eastern hemisphere with Africa on the far right and Australia on the far left.](https://docs-assets.developer.apple.com/published/0310648a2b1ff40a796e5544d057d30b/image-displayed-wrong%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Reverse the positions of images when their order is meaningful.** For example, if you display multiple images in a specific order like chronological, alphabetical, or favorite, reverse their positions to preserve the order’s meaning in the RTL context. + +![An illustration showing a layout of text and images within a rounded rectangle. A short bar representing text is left-aligned in the upper-left corner. Below the bar is an area that contains four squares, including a blue square with a placeholder image on the left side. From the left, a row of five square areas at the bottom of the rectangle contain the following shapes: heart, circle, star, square, and triangle.](https://docs-assets.developer.apple.com/published/f8e833e7f73aa3f6ce268dd33f174862/image-positions-ltr%402x.png)Items with meaningful positions in the LTR context + +![An illustration showing a layout of text and images within a rounded rectangle. A short bar representing text is right-aligned in the upper-right corner. Below the bar is an area that contains four squares, including a blue square with a placeholder image on the right side. From the right, a row of five square areas at the bottom of the rectangle contain the following shapes: heart, circle, star, square, and triangle.](https://docs-assets.developer.apple.com/published/5071b9cf5e2c0a2395803018149eab87/image-positions-rtl%402x.png)Items with meaningful positions in the RTL context + +## [Interface icons](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Interface-icons) + +When you use [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) to supply interface icons for your app, you get variants for the RTL context and localized symbols for Arabic and Hebrew, among other languages. If you create custom symbols, you can specify their directionality. For developer guidance, see [Creating custom symbol images for your app](https://developer.apple.com/documentation/UIKit/creating-custom-symbol-images-for-your-app). + +![Three horizontal lines, stacked evenly on top of each other. Each line is preceded by a bullet on left. The shape of a closed book with its spine on the left. A rounded rectangle containing a left-aligned row of three dots. A pencil is slanted at about forty-five degrees, with its point right of the rightmost dot and its eraser extending out of the top-right corner of the rectangle. A rounded rectangle with a black bar across the top that occupies about a quarter of the rectangle's height. A left-aligned row of white dots is in the left side of the bar. A rounded rectangle that contains a smaller, solid-black rounded rectangle near the left side. Outside the rectangle and to the right is a solid-black semicircle with a vertical straight edge that's close to the vertical right side of the rectangle.](https://docs-assets.developer.apple.com/published/eec2236f5595e04904c2b5494696ec1b/directional-symbols-ltr%402x.png)LTR variants of directional symbols + +![Three horizontal lines, stacked evenly on top of each other. Each line is preceded by a bullet on right. The shape of a closed book with its spine on the right. A rounded rectangle containing a right-aligned row of three dots. A pencil is slanted at about forty-five degrees, with its point left of the leftmost dot and its eraser extending out of the middle of the rectangle's top. A rounded rectangle with a black bar across the top that occupies about a quarter of the rectangle's height. A right-aligned row of white dots is in the right side of the bar. A rounded rectangle that contains a smaller, solid-black rounded rectangle near the right side. Outside the rectangle and to the left is a solid-black semicircle with a vertical straight edge that's close to the vertical left side of the rectangle.](https://docs-assets.developer.apple.com/published/9f036ccf7a0ca74375f080c94feb77a3/directional-symbols-rtl%402x.png)RTL variants of directional symbols + +**Flip interface icons that represent text or reading direction.** For example, if an interface icon uses left-aligned bars to represent text in the LTR context, right-align the bars in the RTL context. + +![A rounded rectangle that contains three horizontal left-aligned lines.](https://docs-assets.developer.apple.com/published/298befd594e841846cd466f60d2bea6a/doc-plaintext-ltr%402x.png)LTR variant of a symbol that represents text + +![A rounded rectangle that contains three horizontal right-aligned lines.](https://docs-assets.developer.apple.com/published/bfae7054f6aec52f1a63e31b6c0db79d/doc-plaintext-rtl%402x.png)RTL variant of a symbol that represents text + +**Consider creating a localized version of an interface icon that displays text.** Some interface icons include letters or words to help communicate a script-related concept, like font-size choice or a signature. If you have a custom interface icon that needs to display actual text, consider creating a localized version. For example, SF Symbols offers different versions of the signature, rich-text, and I-beam pointer symbols for use with Latin, Hebrew, and Arabic text, among others. + +![A small X left-aligned above a horizontal line. A stylized signature begins at the X and finishes at the right end of the line. A rounded rectangle containing a capital letter A in the top-left corner and a stack of two horizontal lines in the top-right corner. A placeholder image appears in the bottom half of the rectangle. A large capital letter A to the left of a tall I-beam cursor.](https://docs-assets.developer.apple.com/published/431f27ff945804173931cfd38f595b2c/text-icon-localized-latin%402x.png)Latin + +![A small X right-aligned above a horizontal line. A stylized signature begins at the X and finishes at the left end of the line. A rounded rectangle containing the letter Alef in the top-right corner and a stack of two horizontal lines in the top-left corner. A placeholder image appears in the bottom half of the rectangle. A large letter Alef to the right of a tall I-beam cursor.](https://docs-assets.developer.apple.com/published/b457fc7b677ccbf085cd1ea1d8bc5601/text-icon-localized-hebrew%402x.png)Hebrew + +![A small X right-aligned above a horizontal line. A stylized signature begins at the X and finishes at the left end of the line. A rounded rectangle containing the letter Ain in the top-right corner and a stack of two horizontal lines in the top-left corner. A placeholder image appears in the bottom half of the rectangle. A large letter Dad to the right of a tall I-beam cursor.](https://docs-assets.developer.apple.com/published/7c91fa369eb21255aed0a545bcf9b62d/text-icon-localized-arabic%402x.png)Arabic + +If you have a custom interface icon that uses letters or words to communicate a concept unrelated to reading or writing, consider designing an alternative image that doesn’t use text. + +**Flip an interface icon that shows forward or backward motion.** When something moves in the same direction that people read, they typically interpret that direction as forward; when something moves in the opposite direction, people tend to interpret the direction as backward. An interface icon that depicts an object moving forward or backward needs to flip in the RTL context to preserve the meaning of the motion. For example, an icon that represents a speaker typically shows sound waves emanating forward from the speaker. In the LTR context, the sound waves come from the left, so in the RTL context, the icon needs to flip to show the waves coming from the right. + +![The outline of a speaker with three concentric curved lines emanating to the right.](https://docs-assets.developer.apple.com/published/d43d629eea61239a9268d6616551b48c/speaker-wave-3-ltr%402x.png)LTR variant of a symbol that depicts forward motion + +![The outline of a speaker with three concentric curved lines emanating to the left.](https://docs-assets.developer.apple.com/published/d10bb4c00b214c16a802183377134b59/speaker-wave-3-rtl%402x.png)RTL variant of a symbol that depicts forward motion + +**Don’t flip logos or universal signs and marks.** Displaying a flipped logo confuses people and can have legal repercussions. Always display a logo in its original form, even if it includes text. People expect universal symbols and marks like the checkmark to have a consistent appearance, so avoid flipping them. + +![A rounded square that contains the black Apple TV logo, which consists of a solid black apple to the left of the lowercase letters T and V.](https://docs-assets.developer.apple.com/published/7c7eb6d19b63d77412c7754893c0f65c/appletv-ltr%402x.png)A logo + +![A checkmark.](https://docs-assets.developer.apple.com/published/31cfb3b8b93a1747eddac562a979a9cb/checkmark-ltr%402x.png)A universal symbol or mark + +**In general, avoid flipping interface icons that depict real-world objects.** Unless you use the object to indicate directionality, it’s best to avoid flipping an icon that represents a familiar item. For example, clocks work the same everywhere, so a traditional clock interface icon needs to look the same regardless of language direction. Some interface icons might seem to reference language or reading direction because they represent items that are slanted for right-handed use. However, most people are right-handed, so flipping an icon that shows a right-handed tool isn’t necessary and might be confusing. + +![A black disk with two white lines in the nine o'clock position.](https://docs-assets.developer.apple.com/published/2d167db99027c9f44270a86a273f225f/clock-fill-ltr%402x.png) + +![A pencil with an eraser, slanted at about forty-five degrees with the point in the bottom-left.](https://docs-assets.developer.apple.com/published/6597719e77e19638bb265cd6c58f9a8a/pencil-ltr%402x.png) + +![The silhouette of a game controller with a white plus sign on the left and two white buttons on the right.](https://docs-assets.developer.apple.com/published/c3f51c228de248bf096aae7164836eab/gamecontroller-fill-ltr%402x.png) + +**Before merely flipping a complex custom interface icon, consider its individual components and the overall visual balance.** In some cases, a component — like a badge, slash, or magnifying glass — needs to adhere to a visual design language regardless of localization. For example, SF Symbols maintains visual consistency by using the same backslash to represent the prohibition or negation of a symbol’s meaning in both LTR and RTL versions. + +![A silhouette of a speaker pointing right with a backslash on top of it.](https://docs-assets.developer.apple.com/published/0557fd6fd8fc1b2c347cd869baa6ae0e/speaker-slash-fill-ltr%402x.png)LTR variant of a symbol that includes a backslash + +![A silhouette of a speaker pointing left with a backslash on top of it.](https://docs-assets.developer.apple.com/published/42dc822fc59ebc4c8d02d6e6c7fa0959/speaker-slash-fill-rtl%402x.png)RTL variant of a symbol that includes a backslash + +In other cases, you might need to flip a component (or its position) to ensure the localized version of the icon still makes sense. For example, if a badge represents the actual UI that people see in your app, it needs to flip if your UI flips. Alternatively, if a badge modifies the meaning of an interface icon, consider whether flipping the badge preserves both the modified meaning and the overall visual balance of the icon. In the images shown below, the badge doesn’t depict an object in the UI, but keeping it in the top-right corner visually unbalances the cart. + +![A silhouette of a wheeled shopping cart that faces right. A white plus sign inside a black disk is in the top-right corner.](https://docs-assets.developer.apple.com/published/faa9849953c7b1b1470db91ed25125d0/cart-fill-badge-plus-ltr%402x.png) + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![A silhouette of a wheeled shopping cart that faces left. A white plus sign inside a black disk is in the top-right corner.](https://docs-assets.developer.apple.com/published/c065f8369e681461bc34ea590b80994b/cart-fill-badge-rtl-unbalanced%402x.png) + +![An X in a circle to indicate an incorrect example.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![A silhouette of a wheeled shopping cart that faces left. A white plus sign inside a black disk is in the top-left corner.](https://docs-assets.developer.apple.com/published/97251e1850265c3b1d654d1e4631ca74/cart-fill-badge-plus-rtl%402x.png) + +![A checkmark in a circle to indicate a correct example.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +If your custom interface icon includes a component that can imply handedness, like a tool, consider preserving the orientation of the tool while flipping the base image if necessary. + +![A rounded rectangle that contains a black dot in the top-right corner. The outline of a magnifying glass that contains a stack of two left-aligned lines is on top of the rectangle and to the left of the dot, slanted at about 135 degrees.](https://docs-assets.developer.apple.com/published/0c8dd8148be262162bb75a017e2ae197/mail-and-text-magnifyingglass-ltr%402x.png)LTR variant of a symbol that depicts a tool + +![A rounded rectangle that contains a black dot in the top-left corner. The outline of a magnifying glass that contains a stack of two rightt-aligned lines is on top of the rectangle and to the right of the dot, slanted at about 135 degrees.](https://docs-assets.developer.apple.com/published/f3ca739120456691b67e55d150596716/mail-and-text-magnifyingglass-rtl%402x.png)RTL variant of a symbol that depicts a tool + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +[Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) + +[SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Developer-documentation) + +[Localization](https://developer.apple.com/localization/) + +[Preparing views for localization](https://developer.apple.com/documentation/SwiftUI/Preparing-views-for-localization) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/4498DDBC-5903-48A6-85EB-47BCACA39DFB/9915_wide_250x141_1x.jpg) Enhance your app’s multilingual experience ](https://developer.apple.com/videos/play/wwdc2025/222) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/7F5167EA-F6A3-4605-83FF-FF75E802969C/6527_wide_250x141_1x.jpg) Design for Arabic ](https://developer.apple.com/videos/play/wwdc2022/10034) + diff --git a/skills/hig-foundations/references/sf-symbols.md b/skills/hig-foundations/references/sf-symbols.md new file mode 100644 index 00000000..881debfd --- /dev/null +++ b/skills/hig-foundations/references/sf-symbols.md @@ -0,0 +1,310 @@ +--- +title: "SF Symbols | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/sf-symbols + +# SF Symbols + +SF Symbols provides thousands of consistent, highly configurable symbols that integrate seamlessly with the San Francisco system font, automatically aligning with text in all weights and sizes. + +![A sketch of the SF Symbols icon. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/06d528652b87b23f1cecaf5faceedf30/foundations-sf-symbols-intro%402x.png) + +You can use a symbol to convey an object or concept wherever interface icons can appear, such as in toolbars, tab bars, context menus, and within text. + +Availability of individual symbols and features varies based on the version of the system you’re targeting. Symbols and symbol features introduced in a given year aren’t available in earlier operating systems. + +Visit [SF Symbols](https://developer.apple.com/sf-symbols/) to download the app and browse the full set of symbols. Be sure to understand the terms and conditions for using SF Symbols, including the prohibition against using symbols — or images that are confusingly similar — in app icons, logos, or any other trademarked use. For developer guidance, see [Configuring and displaying symbol images in your UI](https://developer.apple.com/documentation/UIKit/configuring-and-displaying-symbol-images-in-your-ui). + +## [Rendering modes](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Rendering-modes) + +SF Symbols provides four rendering modes — monochrome, hierarchical, palette, and multicolor — that give you multiple options when applying color to symbols. For example, you might want to use multiple opacities of your app’s accent color to give symbols depth and emphasis, or specify a palette of contrasting colors to display symbols that coordinate with various color schemes. + +To support the rendering modes, SF Symbols organizes a symbol’s paths into distinct layers. For example, the `cloud.sun.rain.fill` symbol consists of three layers: the primary layer contains the cloud paths, the secondary layer contains the paths that define the sun and its rays, and the tertiary layer contains the raindrop paths. + +![An image of the cloud sun rain fill symbol. The cloud is black and the raindrops and sun are gray to indicate that the cloud is in the primary layer.](https://docs-assets.developer.apple.com/published/42c350caa5e5117d40d45ac28c258832/sf-three-layers-primary%402x.png)Primary + +![An image of the cloud sun rain fill symbol. The sun is black and the raindrops and cloud are gray to indicate that the sun is in the secondary layer.](https://docs-assets.developer.apple.com/published/9acc461ef73c512ab21e4713fcdc75a3/sf-three-layers-secondary%402x.png)Secondary + +![An image of the cloud sun rain fill symbol. The raindrops are black and the sun and cloud are gray to indicate that the raindrops are in the primary layer.](https://docs-assets.developer.apple.com/published/f2ec783b9aedc7f59c3485efb83fbb94/sf-three-layers-tertiary%402x.png)Tertiary + +Depending on the rendering mode you choose, a symbol can produce various appearances. For example, Hierarchical rendering mode assigns a different opacity of a single color to each layer, creating a visual hierarchy that gives depth to the symbol. + +![An image of the cloud sun rain fill symbol that uses three different opacities of the system blue color in the symbol’s three different layers: the cloud is fully opaque, the sun is about 50% opaque, and the raindrops are about 25% opaque.](https://docs-assets.developer.apple.com/published/35fe9f56dee989f094845e640951fef5/sf-three-layers-color%402x.png) + +To learn more about supporting rendering modes in custom symbols, see [Custom symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Custom-symbols). + +SF Symbols supports the following rendering modes. + +**Monochrome** — Applies one color to all layers in a symbol. Within a symbol, paths render in the color you specify or as a transparent shape within a color-filled path. + +![A diagram showing a row of eight symbols, all of which use a single opacity of the system blue color.](https://docs-assets.developer.apple.com/published/b296a9ee1b06b49c011209c83b537096/sf-monochrome%402x.png) + +**Hierarchical** — Applies one color to all layers in a symbol, varying the color’s opacity according to each layer’s hierarchical level. + +![A diagram showing a row of eight symbols, each of which uses different opacities of the system blue color. From the left, the square and arrow up symbol uses full opacity for the arrow and low opacity in the square. Next, folder badge plus uses full opacity for the badge and low opacity for the folder. Trash slash uses full opacity for the slash and low opacity for the can. Calendar day timeline right uses full opacity for the horizontal indicator and low opacity for the square and dots. List number uses full opacity for the column of numbers and low opacity for the horizontal lines. Text format A B C dotted underline uses full opacity for the dots under the low-opacity letters. iPhone radio waves left and right uses full opacity for the device outline, mid opacity in the screen area, and low opacity for the radio wave lines. Lastly, the PC symbol uses full opacity for the device outline and the onscreen sad face and horizontal lines and mid opacity in the screen background.](https://docs-assets.developer.apple.com/published/c035476f6266b094b051d4e392329092/sf-hierarchical%402x.png) + +**Palette** — Applies two or more colors to a symbol, using one color per layer. Specifying only two colors for a symbol that defines three levels of hierarchy means the secondary and tertiary layers use the same color. + +![A diagram showing a row of eight symbols, each of which uses a combination of gray and the system blue color. From the left, the square and arrow up symbol uses blue for the arrow and light gray for the square. Next, folder badge plus uses blue for the badge and light gray for the folder. Trash slash uses blue for the slash and light gray for the can. Calendar day timeline right uses blue for the horizontal indicator and light gray for the square and dots. List number uses blue for the column of numbers and light gray for the horizontal lines. Text format A B C dotted underline uses blue for the dots under the light gray letters. iPhone radio waves left and right uses blue for the device outline, medium gray in the screen area, and light gray for the radio wave lines. Lastly, the PC symbol uses blue for the device outline and the onscreen sad face and horizontal lines and medium gray in the screen background.](https://docs-assets.developer.apple.com/published/5ea6a976464ec36e5dbdbf30588a25e0/sf-palette%402x.png) + +**Multicolor** — Applies intrinsic colors to some symbols to enhance meaning. For example, the `leaf` symbol uses green to reflect the appearance of leaves in the physical world, whereas the `trash.slash` symbol uses red to signal data loss. Some multicolor symbols include layers that can receive other colors. + +![A diagram showing a row of eight symbols, using combinations of various colors. From the left, the square and arrow up symbol uses blue for all lines. Next, folder badge plus uses green for the badge and blue for the folder. Trash slash uses red for both the slash and the can. Calendar day timeline right uses red for the horizontal indicator, dark gray for the square, and light gray for the dots. List number uses black for the column of numbers and medium gray for the horizontal lines. Text format A B C dotted underline uses red for the dots under the black letters. iPhone radio waves left and right uses blue for all lines. Lastly, the PC symbol uses yellow for the device outline, white for the onscreen sad face and horizontal lines, and blue in the screen background.](https://docs-assets.developer.apple.com/published/82097ab3d98f098d12935ab4d6c1c896/sf-multicolor%402x.png) + +Regardless of rendering mode, using system-provided colors ensures that symbols automatically adapt to accessibility accommodations and appearance modes like vibrancy and Dark Mode. For developer guidance, see [renderingMode(_:)](https://developer.apple.com/documentation/swiftui/image/renderingmode\(_:\)). + +**Confirm that a symbol’s rendering mode works well in every context.** Depending on factors like the size of a symbol and its contrast with the current background color, different rendering modes can affect how well people can discern the symbol’s details. You can use the automatic setting to get a symbol’s preferred rendering mode, but it’s still a good idea to check the results for places where a different rendering mode might improve a symbol’s legibility. + +## [Gradients](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Gradients) + +In SF Symbols 7 and later, gradient rendering generates a smooth linear gradient from a single source color. You can use gradients across all rendering modes for both system and custom colors and for custom symbols. Gradients render for symbols of any size, but look best at larger sizes. + +![The sun symbol with a solid yellow fill.](https://docs-assets.developer.apple.com/published/2df52fad04d6250f02143138ff76da14/sf-symbols-sun-solid-fill%402x.png)Solid fill + +![The sun symbol with a gradient fill derived from a single yellow source color. The gradient color is bright on the left edge of the symbol, and subtly darkens as it approaches the right edge.](https://docs-assets.developer.apple.com/published/18a48b9b3b9f3842ff42f1331edeb5fb/sf-symbols-sun-gradient-fill%402x.png)Gradient fill + +## [Variable color](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Variable-color) + +With variable color, you can represent a characteristic that can change over time — like capacity or strength — regardless of rendering mode. To visually communicate such a change, variable color applies color to different layers of a symbol as a value reaches different thresholds between zero and 100 percent. + +For example, you could use variable color with the `speaker.wave.3` symbol to communicate three different ranges of sound — plus the state where there’s no sound — by mapping the layers that represent the curved wave paths to different ranges of decibel values. In the case of no sound, no wave layers get color. In all other cases, a wave layer receives color when the sound reaches a threshold the system defines based on the number of nonzero states you want to represent. + +![A diagram showing four versions of the speaker wave three symbol, each of which displays color in a different number of wave paths. From the left, the number of waves with color is zero, one, two, and three.](https://docs-assets.developer.apple.com/published/e03af602ef484d26ff5cc3428e98079a/sf-variable-color%402x.png) + +Sometimes, it can make sense for some of a symbol’s layers to opt out of variable color. For example, in the `speaker.wave.3` symbol shown above, the layer that contains the speaker path doesn’t receive variable color because a speaker doesn’t change as the sound level changes. A symbol can support variable color in any number of layers. + +**Use variable color to communicate change — don’t use it to communicate depth.** To convey depth and visual hierarchy, use Hierarchical rendering mode to elevate certain layers and distinguish foreground and background elements in a symbol. + +## [Weights and scales](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Weights-and-scales) + +SF Symbols provides symbols in a wide range of weights and scales to help you create adaptable designs. + +![A diagram showing the square and arrow up symbol in all 27 weights and scales.](https://docs-assets.developer.apple.com/published/a46e2c294c605c4f5e5f626c67d6bb2d/sf-scales-weights%402x.png) + +Each of the nine symbol weights — from ultralight to black — corresponds to a weight of the San Francisco system font, helping you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts. + +Each symbol is also available in three scales: small, medium (the default), and large. The scales are defined relative to the cap height of the San Francisco system font. + +![A diagram showing the first of three images of the plus circle symbol followed by the capitalized word add. In each image, the word uses the same size, but the symbol uses a different size. The symbol size is small in this image. Two parallel horizontal lines appear across all three images. The top line shows the height of the capital letter A and the bottom line is the baseline under the word add. In this small symbol, the circle touches both lines.](https://docs-assets.developer.apple.com/published/bf6a6d81c531a772bbe9c768af32f0b8/sf-symbol-scale-small%402x.png)Small + +![The second of three images of the plus circle symbol followed by the capitalized word add. In this medium symbol, the circle extends slightly above and below the lines.](https://docs-assets.developer.apple.com/published/aa672f59358a8bb354e4ea9e7d258467/sf-symbol-scale-medium%402x.png)Medium + +![The third of three images of the plus circle symbol followed by the capitalized word add. In this large symbol, the vertical line of the plus sign almost touches both lines.](https://docs-assets.developer.apple.com/published/6696a9dbf59f8ef7118ac712067de2e6/sf-symbol-scale-large%402x.png)Large + +Specifying a scale lets you adjust a symbol’s emphasis compared to adjacent text, without disrupting the weight matching with text that uses the same point size. For developer guidance, see [`imageScale(_:)`](https://developer.apple.com/documentation/SwiftUI/View/imageScale\(_:\)) (SwiftUI), [`UIImage.SymbolScale`](https://developer.apple.com/documentation/UIKit/UIImage/SymbolScale) (UIKit), and [`NSImage.SymbolConfiguration`](https://developer.apple.com/documentation/AppKit/NSImage/SymbolConfiguration-swift.class) (AppKit). + +## [Design variants](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Design-variants) + +SF Symbols defines several design variants — such as fill, slash, and enclosed — that can help you communicate precise states and actions while maintaining visual consistency and simplicity in your UI. For example, you could use the slash variant of a symbol to show that an item or action is unavailable, or use the fill variant to indicate selection. + +Outline is the most common variant in SF Symbols. An outlined symbol has no solid areas, resembling the appearance of text. Most symbols are also available in a fill variant, in which the areas within some shapes are solid. + +In addition to outline and fill, SF Symbols also defines variants that include a slash or enclose a symbol within a shape like a circle, square, or rectangle. In many cases, enclosed and slash variants can combine with outline or fill variants. + +![A diagram showing two rows of the same five symbols. In the top row, every symbol uses the outline variant; the bottom row shows the fill variant of each symbol. From the left, the symbols are heart, heart slash, heart circle, heart square, and a heart in a rectangle.](https://docs-assets.developer.apple.com/published/c4486c6d1dc36ea164665276e912139a/sf-variants%402x.png) + +SF Symbols provides many variants for specific languages and writing systems, including Latin, Arabic, Hebrew, Hindi, Thai, Chinese, Japanese, Korean, Cyrillic, Devanagari, and several Indic numeral systems. Language- and script-specific variants adapt automatically when the device language changes. For guidance, see [Images](https://developer.apple.com/design/human-interface-guidelines/right-to-left#Images). + +![A diagram with eight rows of the same twelve symbols, where each row shows a localized version of the symbol. From the left the symbols are doc rich text, doc rich text fill, character book closed, character book closed fill, character bubble, character bubble fill, character, text format superscript, text format subscript, text format size, character text box, and character cursor I beam.](https://docs-assets.developer.apple.com/published/cf9d526c8f3a39b600f0226125a2b228/sf-localized%402x.png) + +Symbol variants support a range of design goals. For example: + + * The outline variant works well in toolbars, lists, and other places where you display a symbol alongside text. + + * Symbols that use an enclosing shape — like a square or circle — can improve legibility at small sizes. + + * The solid areas in a fill variant tend to give a symbol more visual emphasis, making it a good choice for iOS tab bars and swipe actions and places where you use an accent color to communicate selection. + + + + +In many cases, the view that displays a symbol determines whether to use outline or fill, so you don’t have to specify a variant. For example, an iOS tab bar prefers the fill variant, whereas a toolbar takes the outline variant. + +## [Animations](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Animations) + +SF Symbols provides a collection of expressive, configurable animations that enhance your interface and add vitality to your app. Symbol animations help communicate ideas, provide feedback in response to people’s actions, and signal changes in status or ongoing activities. + +Animations work on all SF Symbols in the library, in all rendering modes, weights, and scales, and on custom symbols. For considerations when animating custom symbols, see [Custom symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Custom-symbols). You can control the playback of an animation, whether you want the animation to run from start to finish, or run indefinitely, repeating its effect until a condition is met. You can customize behaviors, like changing the playback speed of an animation or determining whether to reverse an animation before repeating it. For developer guidance, see [Symbols](https://developer.apple.com/documentation/Symbols) and [`SymbolEffect`](https://developer.apple.com/documentation/Symbols/SymbolEffect). + +**Appear** — Causes a symbol to gradually emerge into view. + +Video with custom controls. + +Content description: A video showing three symbols with the same appear animation effect applied to each. In each animation, the symbol layers gradually animate into view. From the left, the symbols are an antenna with radio waves that animate from the center outward, a photo stack with lines representing a stack animating from the bottom to the top, and a waveform animating from left to right. + +Play + +**Disappear** — Causes a symbol to gradually recede out of view. + +Video with custom controls. + +Content description: A video showing three symbols with the same disappear animation effect applied to each. In each animation, all the symbol layers gradually animate out of view. From the left, the symbols are a folder with a badge plus icon, two overlapping lightbulbs, and two overlapping chat bubbles + +Play + +**Bounce** — Briefly scales a symbol with an elastic-like movement that goes either up or down and then returns to the symbol’s initial state. The bounce animation plays once by default and can help communicate that an action occurred or needs to take place. + +Video with custom controls. + +Content description: A video showing three symbols with the same bounce animation effect applied to each. In each animation, the symbol layers individually bounce. From the left, the symbols are a music note with three lines, text that reads haha, and the Live Photos icon. + +Play + +**Scale** — Changes the size of a symbol, increasing or decreasing its scale. Unlike the bounce animation, which returns the symbol to its original state, the scale animation persists until you set a new scale or remove the effect. You might use the scale animation to draw people’s attention to a selected item or as feedback when people choose a symbol. + +Video with custom controls. + +Content description: A video showing three symbols with the same scale animation effect applied to each. In each animation, the symbol decreases in size, and after a pause, increases back to the original size. From the left, the symbols are a PIP exit window, a 3D stack of three diagonally positioned squares, and an overlapping HomePod and HomePod mini. + +Play + +**Pulse** — Varies the opacity of a symbol over time. This animation automatically pulses only the layers within a symbol that are annotated to pulse, and optionally can pulse all layers within a symbol. You might use the pulse animation to communicate ongoing activity, playing it continuously until a condition is met. + +Video with custom controls. + +Content description: A video showing three symbols with the same pulse animation effect applied to each. In each animation, one layer pulses its opacity. From the left, the symbols are the AirPlay icon with a pulsing screen, a chat bubble with a waveform that is overlapped with a pulsing pause button, and a pulsing rectangle to represent a screen that is overlapped with a person icon. + +Play + +**Variable color** — Incrementally varies the opacity of layers within a symbol. This animation can be cumulative or iterative. When cumulative, color changes persist for each layer until the animation cycle is complete. When iterative, color changes occur one layer at a time. You might use variable color to communicate progress or ongoing activity, such as playback, connecting, or broadcasting. You can customize the animation to autoreverse — meaning reverse the animation to the starting point and replay the sequence — as well as hide inactive layers rather than reduce their opacity. + +The arrangement of layers within a symbol determines how variable color behaves during a repeating animation. Symbols with layers that are arranged linearly where the start and end points don’t meet are annotated as _open loop_. Symbols with layers that follow a complete shape where the start and end points do meet, like in a circular progress indicator, are annotated as _closed loop_. Variable color animations for symbols with closed loop designs feature seamless, continuous playback. + +Video with custom controls. + +Content description: A video showing three symbols with the same variable color animation effect applied to each. In each animation, color is added one path at a time. From the left, the symbols are a speaker with color cycling through three sound waves, a Wi-Fi symbol with color cycling through two paths that represent signal strength before reversing and replaying the animation, and a sprinkler icon with color cycling through droplets. + +Play + +**Replace** — Replaces one symbol with another. The replace animation works between arbitrary symbols and across all weights and rendering modes. This animation features three configurations: + + * Down-up, where the outgoing symbol scales down and the incoming symbol scales up, communicating a change in state. + + * Up-up, where both the outgoing and incoming symbols scale up. This configuration communicates a change in state that includes a sense of forward progression. + + * Off-up, where the outgoing symbol hides immediately and the incoming symbol scales up. This configuration communicates a state change that emphasizes the next available state or action. + + + + +Video with custom controls. + +Content description: A video showing three symbols with the same replace animation effect applied to each. In each animation, one symbol is replaced by a new symbol, and then replaced by the original symbol. From the left, the symbols are a grid of four squares replaced by a bulleted list, a cloud with rain replaced by a cloud partly blocking the sun, and microphone symbol replaced by an x symbol in a circle. + +Play + +From left to right: down-up, up-up, off-up + +**Magic Replace** — Performs a smart transition between two symbols with related shapes. For example, slashes can draw on and off, and badges can appear or disappear, or you can replace them independently of the base symbol. Magic Replace is the new default replace animation, but doesn’t occur between unrelated symbols; the default down-up animation occurs instead. You can choose a custom direction for the fallback animation in these situations if you prefer one other than the default. + +Video with custom controls. + +Content description: A video showing three symbols each with a shape being added, removed, or replaced using the Magic Replace animation effect. In each animation, the symbol is transformed, and then the transformation is reverted. From the left, the symbols are a credit card with a triangle caution shape added, a microphone with a diagonal slash added, and a circular ID with a checkmark badge replaced by an X badge. + +Play + +**Wiggle** — Moves the symbol back and forth along a directional axis. You might use the wiggle animation to highlight a change or a call to action that a person might overlook. Wiggle can also add a dynamic emphasis to an interaction or reinforce what the symbol is representing, such as when an arrow points in a specific direction. + +Video with custom controls. + +Content description: A video showing three symbols that wiggle laterally, rotationally, or along a linear axis. From the left, the symbols are an arrow pointing down at a container that wiggles vertically; a stack of two photos that wiggles rotationally; and a top-down car between two lane markers with arrows pointing inward that wiggles horizontally. + +Play + +**Breathe** — Smoothly increases and decreases the presence of a symbol, giving it a living quality. You might use the breathe animation to convey status changes, or signal that an activity is taking place, like an ongoing recording session. Breathe is similar to pulse; however pulse animates by changing opacity alone, while breathe changes both opacity and size to convey ongoing activity. + +Video with custom controls. + +Content description: A video showing three symbols that breathe in and out, growing and shrinking in size and changing opacity in a smooth rhythm. From the left, the symbols are a stylized waveform of vertical lines that expand and contract from left to right with a pulse of variable opacity; a pair of translation word bubbles that grow with reduced opacity, then shrink with increased opacity; and three concentric mindfulness rings that pulse outward with reduced opacity, then inward with increased opacity. + +Play + +**Rotate** — Rotates the symbol to act as a visual indicator or imitate an object’s behavior in the real world. For example, when a task is in progress, rotation confirms that it’s working as expected. The rotate animation causes some symbols to rotate entirely, while in others only certain parts of the symbol rotate. Symbols like the desk fan, for example, use the By Layer rotation option to spin only the fan blades. + +Video with custom controls. + +Content description: A video showing three symbols that either rotate completely or contain a rotating shape. From the left, the symbols are a rotating gear; a desk fan with rotating fan blades; and two dots rotating on concentric orbital paths around a center circle. + +Play + +**Draw On / Draw Off** — In SF Symbols 7 and later, draws the symbol along a path through a set of guide points, either from offscreen to onscreen (Draw On) or from onscreen to offscreen (Draw Off). You can draw all layers at once, stagger them, or draw each layer one at a time. You might use the draw animation to convey progress, as with a download, or to reinforce the meaning of a symbol, like a directional arrow. + +**Apply symbol animations judiciously.** While there’s no limit to how many animations you can add to a view, too many animations can overwhelm an interface and distract people. + +**Make sure that animations serve a clear purpose in communicating a symbol’s intent.** Each type of animation has a discrete movement that communicates a certain type of action or elicits a certain response. Consider how people might interpret an animated symbol and whether the animation, or combination of animations, might be confusing. + +**Use symbol animations to communicate information more efficiently.** Animations provide visual feedback, reinforcing that something happened in your interface. You can use animations to present complex information in a simple way and without taking up a lot of visual space. + +**Consider your app’s tone when adding animations.** When animating a symbol, think about what the animation can convey and how that might align with your brand identity and your app’s overall style and tone. For guidance, see [Branding](https://developer.apple.com/design/human-interface-guidelines/branding). + +## [Custom symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Custom-symbols) + +If you need a symbol that SF Symbols doesn’t provide, you can create your own. To create a custom symbol, first export the template for a symbol that’s similar to the design you want, then use a vector-editing tool to modify it. For developer guidance, see [Creating custom symbol images for your app](https://developer.apple.com/documentation/UIKit/creating-custom-symbol-images-for-your-app). + +Important + +SF 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. + +Using a process called _annotating_ , you can assign a specific color — or a specific hierarchical level, such as primary, secondary, or tertiary — to each layer in a custom symbol. Depending on the rendering modes you support, you can use a different mode in each instance of the symbol in your app. + +**Use the template as a guide.** Create a custom symbol that’s consistent with the ones the system provides in level of detail, optical weight, alignment, position, and perspective. Strive to design a symbol that is: + + * Simple + + * Recognizable + + * Inclusive + + * Directly related to the action or content it represents + + + + +For guidance, see [Icons](https://developer.apple.com/design/human-interface-guidelines/icons). + +**Assign negative side margins to your custom symbol if necessary.** SF Symbols supports negative side margins to aid optical horizontal alignment when a symbol contains a badge or other elements that increase its width. For example, negative side margins can help you horizontally align a stack of folder symbols, some of which include a badge. The name of each margin includes the relevant configuration — such as “left-margin-Regular-M” — so be sure to use this naming pattern if you add margins to your custom symbols. + +**Optimize layers to use animations with custom symbols.** If you want to animate your symbol by layer, make sure to annotate the layers in the SF Symbols app. The Z-order determines the order that you want to apply colors to the layers of a variable color symbol, and you can choose whether to animate those changes from front-to-back, or back-to-front. You can also animate by layer groups to have related layers move together. + +**Test animations for custom symbols.** It’s important to test your custom symbols with all of the animation presets because the shapes and paths might not appear how you expect when the layers are in motion. To get the most out of this feature, consider drawing your custom symbols with whole shapes. For example, a custom symbol similar to the `person.2.fill` symbol doesn’t need to create a cutout for the shape representing the person on the left. Instead, you can draw the full shape of the person, and in addition to that, draw an offset path of the person on the right to help represent the gap between them. You can later annotate this offset path as an erase layer to render the symbol as you want. This method of drawing helps preserve additional layer information that allows for animations to perform as you expect. + +**Avoid making custom symbols that include common variants, such as enclosures or badges.** The SF Symbols app offers a component library for creating variants of your custom symbol. Using the component library allows you to create commonly used variants of your custom symbol while maintaining design consistency with the included SF Symbols. + +**Provide alternative text labels for custom symbols.** Alternative text labels — or accessibility descriptions — let VoiceOver describe visible UI and content, making navigation easier for people with visual disabilities. For guidance, see [VoiceOver](https://developer.apple.com/design/human-interface-guidelines/voiceover). + +**Don’t design replicas of Apple products.** Apple products are copyrighted and you can’t reproduce them in your custom symbols. Also, you can’t customize a symbol that SF Symbols identifies as representing an Apple feature or product. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Related) + +[Download SF Symbols](https://developer.apple.com/sf-symbols/) + +[Typography](https://developer.apple.com/design/human-interface-guidelines/typography) + +[Icons](https://developer.apple.com/design/human-interface-guidelines/icons) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Developer-documentation) + +[Symbols](https://developer.apple.com/documentation/Symbols) — Symbols framework + +[Configuring and displaying symbol images in your UI](https://developer.apple.com/documentation/UIKit/configuring-and-displaying-symbol-images-in-your-ui) — UIKit + +[Creating custom symbol images for your app](https://developer.apple.com/documentation/UIKit/creating-custom-symbol-images-for-your-app) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/4F1E5BC7-921E-46C0-927A-D84295787A94/9994_wide_250x141_1x.jpg) What’s new in SF Symbols 7 ](https://developer.apple.com/videos/play/wwdc2025/337) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Change-log) + +Date| Changes +---|--- +July 28, 2025| Updated with guidance for Draw animations and gradient rendering in SF Symbols 7. +June 10, 2024| Updated with guidance for new animations and features of SF Symbols 6. +June 5, 2023| Added a new section on animations. Included animation guidance for custom symbols. +September 14, 2022| Added a new section on variable color. Removed instructions on creating custom symbol paths, exporting templates, and layering paths, deferring to developer articles that cover these topics. + diff --git a/skills/hig-foundations/references/spatial-layout.md b/skills/hig-foundations/references/spatial-layout.md new file mode 100644 index 00000000..7e454d8b --- /dev/null +++ b/skills/hig-foundations/references/spatial-layout.md @@ -0,0 +1,142 @@ +--- +title: "Spatial layout | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/spatial-layout + +# Spatial layout + +Spatial layout techniques help you take advantage of the infinite canvas of Apple Vision Pro and present your content in engaging, comfortable ways. + +![A sketch of axes in the X, Y, and Z dimensions, suggesting three-dimensional layout. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/e13737927c465ae264094aa019129252/foundations-spatial-layout-intro%402x.png) + +## [Field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view) + +A person’s _field of view_ is the space they can see without moving their head. The dimensions of an individual’s field of view while wearing Apple Vision Pro vary based on factors like the way people configure the Light Seal and the extent of their peripheral acuity. + +![A screenshot of a blank app window in visionOS. A series of concentric circles overlay the image, conveying 30-, 60-, and 90-degree fields of view.](https://docs-assets.developer.apple.com/published/88086621da558b375ed5ef8ea0002283/visionos-field-of-view-layout%402x.png) + +Important + +The system doesn’t provide information about a person’s field of view. + +**Center important content within the field of view.** By default, visionOS launches an app directly in front of people, placing it within their field of view. In an immersive experience, you can help people keep their attention on important content by keeping it centered and not displaying distracting motion or bright, high-contrast objects in the periphery. + + * Upright viewing + * Angled viewing + + + +Video with custom controls. + +Content description: An animation of a person wearing Apple Vision Pro and sitting upright in a chair. The person is directly facing a square that represents an app window in visionOS that's centered in the person's field of view. A dotted line animates from the person's eyes to the center of the window. + +Play + +Video with custom controls. + +Content description: An animation of a person wearing Apple Vision Pro and reclining in a chair. The person is looking at a square that represents an app window in visionOS. The app window is positioned a short distance from the person, is raised in the air, and is tilted toward the person so it's centered within the person's field of view. A dotted line animates from the person's eyes to the center of the window. + +Play + +**Avoid anchoring content to the wearer’s head.** Although you generally want your app to stay within the field of view, anchoring content so that it remains statically in front of someone can make them feel stuck, confined, and uncomfortable, especially if the content obscures a lot of passthrough and decreases the apparent stability of their surroundings. Instead, anchor content in people’s space, giving them the freedom to look around naturally and view different objects in different locations. + +## [Depth](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Depth) + +People rely on visual cues like distance, occlusion, and shadow to perceive depth and make sense of their surroundings. On Apple Vision Pro, the system automatically uses visual effects like color temperature, reflections, and shadow to help people perceive the depth of virtual content. When people move a virtual object in space — or when they change their position relative to that object — the visual effects change the object’s apparent depth, making the experience feel more lifelike. + +Because people can view your content from any angle, incorporating small amounts of depth throughout your interface — even in standard windows — can help it look more natural. When you use SwiftUI, the system adds visual effects to views in a 2D window, making them appear to have depth. For developer guidance, see [Adding 3D content to your app](https://developer.apple.com/documentation/visionOS/adding-3d-content-to-your-app). + +![A screenshot of a 2D Notes window in visionOS. A note titled Nature Walks is open on the trailing side of the view, with sketches of leaves accompanied by handwritten text descriptions.](https://docs-assets.developer.apple.com/published/2b07a7f22124deaea6c2ce31a93d8833/visionos-spatial-layout-2d-window%402x.png) + +If you need to present content with additional depth, you use RealityKit to create a 3D object (for developer guidance, see [RealityKit](https://developer.apple.com/documentation/RealityKit)). You can display the 3D object anywhere, or you can use a _volume_ , which is a component that displays 3D content. A volume is similar to a window, but without a visible frame. For guidance, see [visionOS volumes](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS-volumes). + +Video with custom controls. + +Content description: A recording showing a 3D model of a satellite within a visionOS volume. As the viewer approaches the satellite and manipulates its orientation, light reflections adjust based on the position of the viewer and angle of the satellite. + +Play + +**Provide visual cues that accurately communicate the depth of your content.** If visual cues are missing or they conflict with a person’s real-world experience, people can experience visual discomfort. + +**Use depth to communicate hierarchy.** Depth helps an object appear to stand out from surrounding content, making it more noticeable. People also tend to notice changes in depth: for example, when a sheet appears over a window, the window recedes along the z-axis, allowing the sheet to come forward and become visually prominent. + +**In general, avoid adding depth to text.** Text that appears to hover above its background is difficult to read, which slows people down and can sometimes cause vision discomfort. + +**Make sure depth adds value.** In general, you want to use depth to clarify and delight — you don’t need to use it everywhere. As you add depth to your design, think about the size and relative importance of objects. Depth is great for visually separating large, important elements in your app, like making a tab bar or toolbar stand out from a window, but it may not work as well on small objects. For example, using depth to make a button’s symbol stand out from its background can make the button less legible and harder to use. Also review how often you use different depths throughout your app. People need to refocus their eyes to perceive each difference in depth, and doing so too often or quickly can be tiring. + +## [Scale](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Scale) + +visionOS defines two types of scale to preserve the appearance of depth while optimizing usability. + +_Dynamic scale_ helps content remain comfortably legible and interactive regardless of its proximity to people. Specifically, visionOS automatically increases a window’s scale as it moves away from the wearer and decreases it as the window moves closer, making the window appear to maintain the same size at all distances. + +Video with custom controls. + +Content description: An animation that shows a square representing an app window in a 3D space. The square animates to move back along its plane from its initial position. As it moves, it dynamically grows in size. A frame representing the original position remains visible for comparison. After the movement is complete, the entire environment rotates to convey that, from the viewer's angle, the window always remains the same size. + +Play + +_Fixed scale_ means that an object maintains the same scale regardless of its proximity to people. A fixed-scale object appears smaller when it moves farther from the viewer along the z-axis, similar to the way an object in a person’s physical surroundings looks smaller when it’s far away than it does when it’s close up. + +Video with custom controls. + +Content description: An animation that shows a square representing an app window in a 3D space. The square animates to move back along its plane from its initial position. As it moves, it becomes smaller. A frame representing the original position remains visible for comparison. After the movement is complete, the entire environment rotates to convey that, from the viewer's angle, the window appears to have receded into the distance. + +Play + +To support dynamic scaling and the appearance of depth, visionOS defines a point as an angle, in contrast to other platforms, which define a point as a number of pixels that can vary with the [resolution](https://developer.apple.com/design/human-interface-guidelines/images#Resolution) of a 2D display. + +**Consider using fixed scale when you want a virtual object to look exactly like a physical object.** For example, you might want to maintain the life-size scale of a product you offer so it can look more realistic when people view it in their space. Because interactive content needs to scale to maintain usability as it gets closer or farther away, prefer applying fixed scale sparingly, reserving it for noninteractive objects that need it. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Best-practices) + +**Avoid displaying too many windows.** Too many windows can obscure people’s surroundings, making them feel overwhelmed, constricted, and even uncomfortable. It can also make it cumbersome for people to relocate an app because it means moving a lot of windows. + +**Prioritize standard, indirect gestures.** People can make an _indirect_ gesture without moving their hand into their field of view. In contrast, making a _direct_ gesture requires people to touch the virtual object with their finger, which can be tiring, especially when the object is positioned at or above their line of sight. In visionOS, people use indirect gestures to perform the standard gestures they already know. When you prioritize indirect gestures, people can use them to interact with any object they look at, whatever its distance. If you support direct gestures, consider reserving them for nearby objects that invite close inspection or manipulation for short periods of time. For guidance, see [Gestures > visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS). + +**Rely on the Digital Crown to help people recenter windows in their field of view.** When people move or turn their head, content might no longer appear where they want it to. If this happens, people can press the [Digital Crown](https://developer.apple.com/design/human-interface-guidelines/digital-crown) when they want to recenter content in front of them. Your app doesn’t need to do anything to support this action. + +**Include enough space around interactive components to make them easy for people to look at.** When people look at an interactive element, visionOS displays a visual hover effect that helps them confirm the element is the one they want. It’s crucial to include enough space around an interactive component so that looking at it is easy and comfortable, while preventing the hover effect from crowding other content. For example, place multiple, regular-size [buttons](https://developer.apple.com/design/human-interface-guidelines/buttons#visionOS) so their centers are at least 60 points apart, leaving 16 points or more of space between them. Also, don’t let controls overlap other interactive elements or views, because doing so can make selecting a single element difficult. + +**Let people use your app with minimal or no physical movement.** Unless some physical movement is essential to your experience, help everyone enjoy it while remaining stationary. + +**Use the floor to help you place a large immersive experience.** If your immersive experience includes content that extends up from the floor, place it using a flat horizontal plane. Aligning this plane with the floor can help it blend seamlessly with people’s surroundings and provide a more intuitive experience. + +To learn more about windows and volumes in visionOS, see [Windows > visionOS](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS); for guidance on laying content within a window, see [Layout > visionOS](https://developer.apple.com/design/human-interface-guidelines/layout#visionOS). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, tvOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Related) + +[Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +[Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Developer-documentation) + +[Presenting windows and spaces](https://developer.apple.com/documentation/visionOS/presenting-windows-and-spaces) — visionOS + +[Positioning and sizing windows](https://developer.apple.com/documentation/visionOS/positioning-and-sizing-windows) — visionOS + +[Adding 3D content to your app](https://developer.apple.com/documentation/visionOS/adding-3d-content-to-your-app) — visionOS + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/2EFC2AAC-0656-4A18-B4C9-8E23CCD81E90/9989_wide_250x141_1x.jpg) Meet SwiftUI spatial layout ](https://developer.apple.com/videos/play/wwdc2025/273) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/15489B11-8744-483D-AD38-EF78D8962FF4/8126_wide_250x141_1x.jpg) Principles of spatial design ](https://developer.apple.com/videos/play/wwdc2023/10072) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/38E4EE32-29B5-4478-B8B6-35B8ACA67B16/8130_wide_250x141_1x.jpg) Design for spatial user interfaces ](https://developer.apple.com/videos/play/wwdc2023/10076) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Change-log) + +Date| Changes +---|--- +March 29, 2024| Emphasized the importance of keeping interactive elements from overlapping each other. +June 21, 2023| New page. + diff --git a/skills/hig-foundations/references/typography.md b/skills/hig-foundations/references/typography.md new file mode 100644 index 00000000..2f919329 --- /dev/null +++ b/skills/hig-foundations/references/typography.md @@ -0,0 +1,1146 @@ +--- +title: "Typography | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/typography + +# Typography + +Your typographic choices can help you display legible text, convey an information hierarchy, communicate important content, and express your brand or style. + +![A sketch of a small letter A to the left of a large letter A, suggesting the use of typography to convey hierarchical information. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d90940d120149af7220e4fedfd1c10bd/foundations-typography-intro%402x.png) + +## [Ensuring legibility](https://developer.apple.com/design/human-interface-guidelines/typography#Ensuring-legibility) + +**Use font sizes that most people can read easily.** People need to be able to read your content at various viewing distances and under a variety of conditions. Follow the recommended default and minimum text sizes for each platform — for both custom and system fonts — to ensure your text is legible on all devices. Keep in mind that font weight can also impact how easy text is to read. If you use a custom font with a thin weight, aim for larger than the recommended sizes to increase legibility. + +Platform| Default size| Minimum size +---|---|--- +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 + +**Test legibility in different contexts.** For example, you need to test game text for legibility on each platform on which your game runs. If testing shows that some of your text is difficult to read, consider using a larger type size, increasing contrast by modifying the text or background colors, or using typefaces designed for optimized legibility, like the system fonts. + +![A screenshot that shows a game running on iPhone in landscape. A name appears above each of 3 plants and a status message appears in a rounded rectangle in the top-right corner. All text uses a size that's too small, and the 3 plant names don't have visible backgrounds.](https://docs-assets.developer.apple.com/published/aaf334356178859f6e86eb42913c53dd/game-typography-incorrect%402x.png) + +Testing a game on a new platform can show where text is hard to read. + +![A screenshot that shows a game running on iPhone in landscape. A name appears within a shaded lozenge shape above each of 3 plants and a status message appears in a rounded rectangle in the top-right corner. All text uses a size that's at least the recommended minimum.](https://docs-assets.developer.apple.com/published/4c38de72c94767cbb6bd7763720ef281/game-typography-correct%402x.png) + +Increasing text size and adding visible background shapes can help make text easier to read. + +**In general, avoid light font weights.** For example, if you’re using system-provided fonts, prefer Regular, Medium, Semibold, or Bold font weights, and avoid Ultralight, Thin, and Light font weights, which can be difficult to see, especially when text is small. + +## [Conveying hierarchy](https://developer.apple.com/design/human-interface-guidelines/typography#Conveying-hierarchy) + +**Adjust font weight, size, and color as needed to emphasize important information and help people visualize hierarchy.** Be sure to maintain the relative hierarchy and visual distinction of text elements when people adjust text sizes. + +**Minimize the number of typefaces you use, even in a highly customized interface.** Mixing too many different typefaces can obscure your information hierarchy and hinder readability, in addition to making an interface feel internally inconsistent or poorly designed. + +**Prioritize important content when responding to text-size changes.** Not all content is equally important. When someone chooses a larger text size, they typically want to make the content they care about easier to read; they don’t always want to increase the size of every word on the screen. For example, when people increase text size to read the content in a tabbed window, they don’t expect the tab titles to increase in size. Similarly, in a game, people are often more interested in a character’s dialog than in transient hit-damage values. + +## [Using system fonts](https://developer.apple.com/design/human-interface-guidelines/typography#Using-system-fonts) + +Apple provides two typeface families that support an extensive range of weights, sizes, styles, and languages. + +**San Francisco (SF)** is a sans serif typeface family that includes the SF Pro, SF Compact, SF Arabic, SF Armenian, SF Georgian, SF Hebrew, and SF Mono variants. + +![The phrase 'The quick brown fox jumps over the lazy dog.' shown in the San Francisco Pro font.](https://docs-assets.developer.apple.com/published/e270b0f4e91f523bb7372a39447ad4e4/typography-sanfrancisco%402x.png) + +The system also offers SF Pro, SF Compact, SF Arabic, SF Armenian, SF Georgian, and SF Hebrew in rounded variants you can use to coordinate text with the appearance of soft or rounded UI elements, or to provide an alternative typographic voice. + +**New York (NY)** is a serif typeface family designed to work well by itself and alongside the SF fonts. + +![The phrase 'The quick brown fox jumps over the lazy dog.' shown in the New York font.](https://docs-assets.developer.apple.com/published/8dcb4d6f97b97a957a0d73e4ee85730c/typography-new-york%402x.png) + +You can download the San Francisco and New York fonts [here](https://developer.apple.com/fonts/). + +The system provides the SF and NY fonts in the _variable_ font format, which combines different font styles together in one file, and supports interpolation between styles to create intermediate ones. + +Note + +Variable 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. + +To help you define visual hierarchies and create clear and legible designs in many different sizes and contexts, the system fonts are available in a variety of weights, ranging from Ultralight to Black, and — in the case of SF — several widths, including Condensed and Expanded. Because SF Symbols use equivalent weights, you can achieve precise weight matching between symbols and adjacent text, regardless of the size or style you choose. + +![The word 'text' shown in the SF Pro font, repeated in two rows of nine columns each. The rows show upright and italic styles, and the columns show font weights ranging from ultralight to black.](https://docs-assets.developer.apple.com/published/8b07ec795d9ad16c787edb0030018a09/font-weight-sf-pro%402x.png) + +Note + +[SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-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. + +The system defines a set of typographic attributes — called text styles — that work with both typeface families. A _text style_ specifies a combination of font weight, point size, and leading values for each text size. For example, the _body_ text style uses values that support a comfortable reading experience over multiple lines of text, while the _headline_ style assigns a font size and weight that help distinguish a heading from surrounding content. Taken together, the text styles form a typographic hierarchy you can use to express the different levels of importance in your content. Text styles also allow text to scale proportionately when people change the system’s text size or make accessibility adjustments, like turning on Larger Text in Accessibility settings. + +**Consider using the built-in text styles.** The system-defined text styles give you a convenient and consistent way to convey your information hierarchy through font size and weight. Using text styles with the system fonts also ensures support for Dynamic Type and larger accessibility type sizes (where available), which let people choose the text size that works for them. For guidance, see [Supporting Dynamic Type](https://developer.apple.com/design/human-interface-guidelines/typography#Supporting-Dynamic-Type). + +**Modify the built-in text styles if necessary.** System APIs define font adjustments — called _symbolic traits_ — that let you modify some aspects of a text style. For example, the bold trait adds weight to text, letting you create another level of hierarchy. You can also use symbolic traits to adjust leading if you need to improve readability or conserve space. For example, when you display text in wide columns or long passages, more space between lines (_loose leading_) can make it easier for people to keep their place while moving from one line to the next. Conversely, if you need to display multiple lines of text in an area where height is constrained — for example, in a list row — decreasing the space between lines (_tight leading_) can help the text fit well. If you need to display three or more lines of text, avoid tight leading even in areas where height is limited. For developer guidance, see [`leading(_:)`](https://developer.apple.com/documentation/SwiftUI/Font/leading\(_:\)). + +Developer note + +You can use the constants defined in [`Font.Design`](https://developer.apple.com/documentation/SwiftUI/Font/Design) to access all system fonts — don’t embed system fonts in your app or game. For example, use [`Font.Design.default`](https://developer.apple.com/documentation/SwiftUI/Font/Design/default) to get the system font on all platforms; use [`Font.Design.serif`](https://developer.apple.com/documentation/SwiftUI/Font/Design/serif) to get the New York font. + +**If necessary, adjust tracking in interface mockups.** In a running app, the system font dynamically adjusts tracking at every point size. To produce an accurate interface mockup of an interface that uses the variable system fonts, you don’t have to choose a discrete optical size at certain point sizes, but you might need to adjust the tracking. For guidance, see [Tracking values](https://developer.apple.com/design/human-interface-guidelines/typography#Tracking-values). + +## [Using custom fonts](https://developer.apple.com/design/human-interface-guidelines/typography#Using-custom-fonts) + +**Make sure custom fonts are legible.** People need to be able to read your custom font easily at various viewing distances and under a variety of conditions. While using a custom font, be guided by the recommended minimum font sizes for various styles and weights in [Specifications](https://developer.apple.com/design/human-interface-guidelines/typography#Specifications). + +**Implement accessibility features for custom fonts.** System fonts automatically support Dynamic Type (where available) and respond when people turn on accessibility features, such as Bold Text. If you use a custom font, make sure it implements the same behaviors. For developer guidance, see [Applying custom fonts to text](https://developer.apple.com/documentation/SwiftUI/Applying-Custom-Fonts-to-Text). In a Unity-based game, you can use [Apple’s Unity plug-ins](https://github.com/apple/unityplugins) to support Dynamic Type. If the plug-in isn’t appropriate for your game, be sure to let players adjust text size in other ways. + +## [Supporting Dynamic Type](https://developer.apple.com/design/human-interface-guidelines/typography#Supporting-Dynamic-Type) + +Dynamic Type is a system-level feature in iOS, iPadOS, tvOS, visionOS, and watchOS that lets people adjust the size of visible text on their device to ensure readability and comfort. For related guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +![A screenshot of a Mail message on iPhone, using the default font size. From the left, the message header displays the sender's contact photo or initials, followed by a two-line layout with the sender name and date on top and the recipient name and attachment glyph on the bottom. The message body contains four lines of text and the address of Muir Woods National Monument.](https://docs-assets.developer.apple.com/published/65fab16931136a1aa542fb71e9ec181b/typography-default-type%402x.png) + +Mail content at the default text size + +![A screenshot of a Mail message on iPhone, using the largest accessibility font size. From the top, the message header displays the sender name on one line, followed by the truncated recipient name on the next line, and the date and attachment glyph on the third line. Below the header and message title, the first line and part of the second line of body text are visible on the screen.](https://docs-assets.developer.apple.com/published/5840a6f168607659543494f5cebe266d/typography-dynamic-type%402x.png) + +Mail content at the largest accessibility text size + +For a list of available Dynamic Type sizes, see [Specifications](https://developer.apple.com/design/human-interface-guidelines/typography#Specifications). You can also download Dynamic Type size tables in the [Apple Design Resources](https://developer.apple.com/design/resources/) for each platform. + +For developer guidance, see [Text input and output](https://developer.apple.com/documentation/SwiftUI/Text-input-and-output). To support Dynamic Type in Unity-based games, use [Apple’s Unity plug-ins](https://github.com/apple/unityplugins). + +**Make sure your app’s layout adapts to all font sizes.** Verify that your design scales, and that text and glyphs are legible at all font sizes. On iPhone or iPad, turn on Larger Accessibility Text Sizes in Settings > Accessibility > Display & Text Size > Larger Text, and confirm that your app remains comfortably readable. + +**Increase the size of meaningful interface icons as font size increases.** If you use interface icons to communicate important information, make sure they’re easy to view at larger font sizes too. When you use [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols), you get icons that scale automatically with Dynamic Type size changes. + +**Keep text truncation to a minimum as font size increases.** In general, aim to display as much useful text at the largest accessibility font size as you do at the largest standard font size. Avoid truncating text in scrollable regions unless people can open a separate view to read the rest of the content. You can prevent text truncation in a label by configuring it to use as many lines as needed to display a useful amount of text. For developer guidance, see [`numberOfLines`](https://developer.apple.com/documentation/UIKit/UILabel/numberOfLines). + +**Consider adjusting your layout at large font sizes.** When font size increases in a horizontally constrained context, inline items (like glyphs and timestamps) and container boundaries can crowd text and cause truncation or overlapping. To improve readability, consider using a stacked layout where text appears above secondary items. Multicolumn text can also be less readable at large sizes due to horizontal space constraints. Reduce the number of columns when the font size increases to avoid truncation and enhance readability. For developer guidance, see [`isAccessibilityCategory`](https://developer.apple.com/documentation/UIKit/UIContentSizeCategory/isAccessibilityCategory). + +**Maintain a consistent information hierarchy regardless of the current font size.** For example, keep primary elements toward the top of a view even when the font size is very large, so that people don’t lose track of these elements. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/typography#Platform-considerations) + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/typography#iOS-iPadOS) + +SF Pro is the system font in iOS and iPadOS. iOS and iPadOS apps can also use NY. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/typography#macOS) + +SF Pro is the system font in macOS. NY is available for Mac apps built with Mac Catalyst. macOS doesn’t support Dynamic Type. + +**When necessary, use dynamic system font variants to match the text in standard controls.** Dynamic system font variants give your text the same look and feel of the text that appears in system-provided controls. Use the variants listed below to achieve a look that’s consistent with other apps on the platform. + +Dynamic font variant| API +---|--- +Control content| [`controlContentFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/controlContentFont\(ofSize:\)) +Label| [`labelFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/labelFont\(ofSize:\)) +Menu| [`menuFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/menuFont\(ofSize:\)) +Menu bar| [`menuBarFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/menuBarFont\(ofSize:\)) +Message| [`messageFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/messageFont\(ofSize:\)) +Palette| [`paletteFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/paletteFont\(ofSize:\)) +Title| [`titleBarFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/titleBarFont\(ofSize:\)) +Tool tips| [`toolTipsFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/toolTipsFont\(ofSize:\)) +Document text (user)| [`userFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/userFont\(ofSize:\)) +Monospaced document text (user fixed pitch)| [`userFixedPitchFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/userFixedPitchFont\(ofSize:\)) +Bold system font| [`boldSystemFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/boldSystemFont\(ofSize:\)) +System font| [`systemFont(ofSize:)`](https://developer.apple.com/documentation/AppKit/NSFont/systemFont\(ofSize:\)) + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/typography#tvOS) + +SF Pro is the system font in tvOS, and apps can also use NY. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/typography#visionOS) + +SF Pro is the system font in visionOS. If you use NY, you need to specify the type styles you want. + +visionOS uses bolder versions of the Dynamic Type body and title styles and it introduces Extra Large Title 1 and Extra Large Title 2 for wide, editorial-style layouts. For guidance using vibrancy to indicate hierarchy in text and symbols, see [Materials > visionOS](https://developer.apple.com/design/human-interface-guidelines/materials#visionOS). + +**In general, prefer 2D text.** The more visual depth text characters have, the more difficult they can be to read. Although a small amount of 3D text can provide a fun visual element that draws people’s attention, if you’re going to display content that people need to read and understand, prefer using text that has little or no visual depth. + +![A screenshot that shows the correct placement of 2D text on a window in visionOS.](https://docs-assets.developer.apple.com/published/b7eca42cb50603b5ae1630781ce6d4c7/visionos-typography-2d-text-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![A screenshot that shows the incorrect placement of 3D text on a window in visionOS.](https://docs-assets.developer.apple.com/published/8568cd71b363e427fb91a874b8c30aa8/visionos-typography-3d-text-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Make sure text looks good and remains legible when people scale it.** Use a text style that makes the text look good at full scale, then test it for legibility at different scales. + +**Maximize the contrast between text and the background of its container.** By default, the system displays text in white, because this color tends to provide a strong contrast with the default system background material, making text easier to read. If you want to use a different text color, be sure to test it in a variety of contexts. + +**If you need to display text that’s not on a background, consider making it bold to improve legibility.** In this situation, you generally want to avoid adding shadows to increase text contrast. The current space might not include a visual surface on which to cast an accurate shadow, and you can’t predict the size and density of shadow that would work well with a person’s current Environment. + +**Keep text facing people as much as possible.** If you display text that’s associated with a point in space, such as a label for a 3D object, you generally want to use _billboarding_ — that is, you want the text to face the wearer regardless of how they or the object move. If you don’t rotate text to remain facing the wearer, the text can become impossible to read because people may view it from the side or a highly oblique angle. For example, imagine a virtual lamp that appears to be on a physical desk with a label anchored directly above it. For the text to remain readable, the label needs to rotate around the y-axis as people move around the desk; in other words, the baseline of the text needs to remain perpendicular to the person’s line of sight. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/typography#watchOS) + +SF Compact is the system font in watchOS, and apps can also use NY. In complications, watchOS uses SF Compact Rounded. + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/typography#Specifications) + +You can display emphasized variants of system text styles using symbolic traits. In SwiftUI, use the [`bold()`](https://developer.apple.com/documentation/SwiftUI/Text/bold\(\)) modifier; in UIKit, use [`traitBold`](https://developer.apple.com/documentation/UIKit/UIFontDescriptor/SymbolicTraits-swift.struct/traitBold) in the [`UIFontDescriptor`](https://developer.apple.com/documentation/UIKit/UIFontDescriptor) API. The emphasized weights can be medium, semibold, bold, or heavy. The following specifications include the emphasized weight for each text style. + +### [iOS, iPadOS Dynamic Type sizes](https://developer.apple.com/design/human-interface-guidelines/typography#iOS-iPadOS-Dynamic-Type-sizes) + + * xSmall + * Small + * Medium + * Large (default) + * xLarge + * xxLarge + * xxxLarge + + + +#### [xSmall](https://developer.apple.com/design/human-interface-guidelines/typography#xSmall) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 31| 38| Bold +Title 1| Regular| 25| 31| Bold +Title 2| Regular| 19| 24| Bold +Title 3| Regular| 17| 22| Semibold +Headline| Semibold| 14| 19| Semibold +Body| Regular| 14| 19| Semibold +Callout| Regular| 13| 18| Semibold +Subhead| Regular| 12| 16| Semibold +Footnote| Regular| 12| 16| Semibold +Caption 1| Regular| 11| 13| Semibold +Caption 2| Regular| 11| 13| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [Small](https://developer.apple.com/design/human-interface-guidelines/typography#Small) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 32| 39| Bold +Title 1| Regular| 26| 32| Bold +Title 2| Regular| 20| 25| Bold +Title 3| Regular| 18| 23| Semibold +Headline| Semibold| 15| 20| Semibold +Body| Regular| 15| 20| Semibold +Callout| Regular| 14| 19| Semibold +Subhead| Regular| 13| 18| Semibold +Footnote| Regular| 12| 16| Semibold +Caption 1| Regular| 11| 13| Semibold +Caption 2| Regular| 11| 13| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [Medium](https://developer.apple.com/design/human-interface-guidelines/typography#Medium) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 33| 40| Bold +Title 1| Regular| 27| 33| Bold +Title 2| Regular| 21| 26| Bold +Title 3| Regular| 19| 24| Semibold +Headline| Semibold| 16| 21| Semibold +Body| Regular| 16| 21| Semibold +Callout| Regular| 15| 20| Semibold +Subhead| Regular| 14| 19| Semibold +Footnote| Regular| 12| 16| Semibold +Caption 1| Regular| 11| 13| Semibold +Caption 2| Regular| 11| 13| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [Large (default)](https://developer.apple.com/design/human-interface-guidelines/typography#Large-default) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 34| 41| Bold +Title 1| Regular| 28| 34| Bold +Title 2| Regular| 22| 28| Bold +Title 3| Regular| 20| 25| Semibold +Headline| Semibold| 17| 22| Semibold +Body| Regular| 17| 22| Semibold +Callout| Regular| 16| 21| Semibold +Subhead| Regular| 15| 20| Semibold +Footnote| Regular| 13| 18| Semibold +Caption 1| Regular| 12| 16| Semibold +Caption 2| Regular| 11| 13| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [xLarge](https://developer.apple.com/design/human-interface-guidelines/typography#xLarge) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 36| 43| Bold +Title 1| Regular| 30| 37| Bold +Title 2| Regular| 24| 30| Bold +Title 3| Regular| 22| 28| Semibold +Headline| Semibold| 19| 24| Semibold +Body| Regular| 19| 24| Semibold +Callout| Regular| 18| 23| Semibold +Subhead| Regular| 17| 22| Semibold +Footnote| Regular| 15| 20| Semibold +Caption 1| Regular| 14| 19| Semibold +Caption 2| Regular| 13| 18| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [xxLarge](https://developer.apple.com/design/human-interface-guidelines/typography#xxLarge) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 38| 46| Bold +Title 1| Regular| 32| 39| Bold +Title 2| Regular| 26| 32| Bold +Title 3| Regular| 24| 30| Semibold +Headline| Semibold| 21| 26| Semibold +Body| Regular| 21| 26| Semibold +Callout| Regular| 20| 25| Semibold +Subhead| Regular| 19| 24| Semibold +Footnote| Regular| 17| 22| Semibold +Caption 1| Regular| 16| 21| Semibold +Caption 2| Regular| 15| 20| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [xxxLarge](https://developer.apple.com/design/human-interface-guidelines/typography#xxxLarge) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 40| 48| Bold +Title 1| Regular| 34| 41| Bold +Title 2| Regular| 28| 34| Bold +Title 3| Regular| 26| 32| Semibold +Headline| Semibold| 23| 29| Semibold +Body| Regular| 23| 29| Semibold +Callout| Regular| 22| 28| Semibold +Subhead| Regular| 21| 28| Semibold +Footnote| Regular| 19| 24| Semibold +Caption 1| Regular| 18| 23| Semibold +Caption 2| Regular| 17| 22| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +### [iOS, iPadOS larger accessibility type sizes](https://developer.apple.com/design/human-interface-guidelines/typography#iOS-iPadOS-larger-accessibility-type-sizes) + + * AX1 + * AX2 + * AX3 + * AX4 + * AX5 + + + +#### [AX1](https://developer.apple.com/design/human-interface-guidelines/typography#AX1) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 44| 52| Bold +Title 1| Regular| 38| 46| Bold +Title 2| Regular| 34| 41| Bold +Title 3| Regular| 31| 38| Semibold +Headline| Semibold| 28| 34| Semibold +Body| Regular| 28| 34| Semibold +Callout| Regular| 26| 32| Semibold +Subhead| Regular| 25| 31| Semibold +Footnote| Regular| 23| 29| Semibold +Caption 1| Regular| 22| 28| Semibold +Caption 2| Regular| 20| 25| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [AX2](https://developer.apple.com/design/human-interface-guidelines/typography#AX2) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 48| 57| Bold +Title 1| Regular| 43| 51| Bold +Title 2| Regular| 39| 47| Bold +Title 3| Regular| 37| 44| Semibold +Headline| Semibold| 33| 40| Semibold +Body| Regular| 33| 40| Semibold +Callout| Regular| 32| 39| Semibold +Subhead| Regular| 30| 37| Semibold +Footnote| Regular| 27| 33| Semibold +Caption 1| Regular| 26| 32| Semibold +Caption 2| Regular| 24| 30| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [AX3](https://developer.apple.com/design/human-interface-guidelines/typography#AX3) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 52| 61| Bold +Title 1| Regular| 48| 57| Bold +Title 2| Regular| 44| 52| Bold +Title 3| Regular| 43| 51| Semibold +Headline| Semibold| 40| 48| Semibold +Body| Regular| 40| 48| Semibold +Callout| Regular| 38| 46| Semibold +Subhead| Regular| 36| 43| Semibold +Footnote| Regular| 33| 40| Semibold +Caption 1| Regular| 32| 39| Semibold +Caption 2| Regular| 29| 35| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [AX4](https://developer.apple.com/design/human-interface-guidelines/typography#AX4) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 56| 66| Bold +Title 1| Regular| 53| 62| Bold +Title 2| Regular| 50| 59| Bold +Title 3| Regular| 49| 58| Semibold +Headline| Semibold| 47| 56| Semibold +Body| Regular| 47| 56| Semibold +Callout| Regular| 44| 52| Semibold +Subhead| Regular| 42| 50| Semibold +Footnote| Regular| 38| 46| Semibold +Caption 1| Regular| 37| 44| Semibold +Caption 2| Regular| 34| 41| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [AX5](https://developer.apple.com/design/human-interface-guidelines/typography#AX5) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 60| 70| Bold +Title 1| Regular| 58| 68| Bold +Title 2| Regular| 56| 66| Bold +Title 3| Regular| 55| 65| Semibold +Headline| Semibold| 53| 62| Semibold +Body| Regular| 53| 62| Semibold +Callout| Regular| 51| 60| Semibold +Subhead| Regular| 49| 58| Semibold +Footnote| Regular| 44| 52| Semibold +Caption 1| Regular| 43| 51| Semibold +Caption 2| Regular| 40| 48| Semibold + +Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +### [macOS built-in text styles](https://developer.apple.com/design/human-interface-guidelines/typography#macOS-built-in-text-styles) + +Text style| Weight| Size (points)| Line height (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 26| 32| Bold +Title 1| Regular| 22| 26| Bold +Title 2| Regular| 17| 22| Bold +Title 3| Regular| 15| 20| Semibold +Headline| Bold| 13| 16| Heavy +Body| Regular| 13| 16| Semibold +Callout| Regular| 12| 15| Semibold +Subheadline| Regular| 11| 14| Semibold +Footnote| Regular| 10| 13| Semibold +Caption 1| Regular| 10| 13| Medium +Caption 2| Medium| 10| 13| Semibold + +Point size based on image resolution of 144 ppi for @2x designs. + +### [tvOS built-in text styles](https://developer.apple.com/design/human-interface-guidelines/typography#tvOS-built-in-text-styles) + +Text style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Title 1| Medium| 76| 96| Bold +Title 2| Medium| 57| 66| Bold +Title 3| Medium| 48| 56| Bold +Headline| Medium| 38| 46| Bold +Subtitle 1| Regular| 38| 46| Medium +Callout| Medium| 31| 38| Bold +Body| Medium| 29| 36| Bold +Caption 1| Medium| 25| 32| Bold +Caption 2| Medium| 23| 30| Bold + +Point size based on image resolution of 72 ppi for @1x and 144 ppi for @2x designs. + +### [watchOS Dynamic Type sizes](https://developer.apple.com/design/human-interface-guidelines/typography#watchOS-Dynamic-Type-sizes) + + * xSmall + * Small + * Large + * xLarge + * xxLarge + * xxxLarge + + + +#### [xSmall](https://developer.apple.com/design/human-interface-guidelines/typography#xSmall) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 30| 32.5| Bold +Title 1| Regular| 28| 30.5| Semibold +Title 2| Regular| 24| 26.5| Semibold +Title 3| Regular| 17| 19.5| Semibold +Headline| Semibold| 14| 16.5| Semibold +Body| Regular| 14| 16.5| Semibold +Caption 1| Regular| 13| 15.5| Semibold +Caption 2| Regular| 12| 14.5| Semibold +Footnote 1| Regular| 11| 13.5| Semibold +Footnote 2| Regular| 10| 12.5| Semibold + +#### [Small (default 38mm)](https://developer.apple.com/design/human-interface-guidelines/typography#Small-default-38mm) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 32| 34.5| Bold +Title 1| Regular| 30| 32.5| Semibold +Title 2| Regular| 26| 28.5| Semibold +Title 3| Regular| 18| 20.5| Semibold +Headline| Semibold| 15| 17.5| Semibold +Body| Regular| 15| 17.5| Semibold +Caption 1| Regular| 14| 16.5| Semibold +Caption 2| Regular| 13| 15.5| Semibold +Footnote 1| Regular| 12| 14.5| Semibold +Footnote 2| Regular| 11| 13.5| Semibold + +#### [Large (default 40mm/41mm/42mm)](https://developer.apple.com/design/human-interface-guidelines/typography#Large-default-40mm41mm42mm) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 36| 38.5| Bold +Title 1| Regular| 34| 36.5| Semibold +Title 2| Regular| 27| 30.5| Semibold +Title 3| Regular| 19| 21.5| Semibold +Headline| Semibold| 16| 18.5| Semibold +Body| Regular| 16| 18.5| Semibold +Caption 1| Regular| 15| 17.5| Semibold +Caption 2| Regular| 14| 16.5| Semibold +Footnote 1| Regular| 13| 15.5| Semibold +Footnote 2| Regular| 12| 14.5| Semibold + +#### [xLarge (default 44mm/45mm/49mm)](https://developer.apple.com/design/human-interface-guidelines/typography#xLarge-default-44mm45mm49mm) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 40| 42.5| Bold +Title 1| Regular| 38| 40.5| Semibold +Title 2| Regular| 30| 32.5| Semibold +Title 3| Regular| 20| 22.5| Semibold +Headline| Semibold| 17| 19.5| Semibold +Body| Regular| 17| 19.5| Semibold +Caption 1| Regular| 16| 18.5| Semibold +Caption 2| Regular| 15| 17.5| Semibold +Footnote 1| Regular| 14| 16.5| Semibold +Footnote 2| Regular| 13| 15.5| Semibold + +#### [xxLarge](https://developer.apple.com/design/human-interface-guidelines/typography#xxLarge) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 41| 43.5| Bold +Title 1| Regular| 39| 41.5| Semibold +Title 2| Regular| 31| 33.5| Semibold +Title 3| Regular| 21| 23.5| Semibold +Headline| Semibold| 18| 20.5| Semibold +Body| Regular| 18| 20.5| Semibold +Caption 1| Regular| 17| 19.5| Semibold +Caption 2| Regular| 15| 18.5| Semibold +Footnote 1| Regular| 15| 17.5| Semibold +Footnote 2| Regular| 14| 16.5| Semibold + +#### [xxxLarge](https://developer.apple.com/design/human-interface-guidelines/typography#xxxLarge) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 42| 44.5| Bold +Title 1| Regular| 40| 42.5| Semibold +Title 2| Regular| 32| 34.5| Semibold +Title 3| Regular| 22| 24.5| Semibold +Headline| Semibold| 19| 21.5| Semibold +Body| Regular| 19| 21.5| Semibold +Caption 1| Regular| 18| 20.5| Semibold +Caption 2| Regular| 17| 19.5| Semibold +Footnote 1| Regular| 16| 18.5| Semibold +Footnote 2| Regular| 15| 17.5| Semibold + +### [watchOS larger accessibility type sizes](https://developer.apple.com/design/human-interface-guidelines/typography#watchOS-larger-accessibility-type-sizes) + + * AX1 + * AX2 + * AX3 + + + +#### [AX1](https://developer.apple.com/design/human-interface-guidelines/typography#AX1) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 44| 46.5| Bold +Title 1| Regular| 42| 44.5| Semibold +Title 2| Regular| 34| 41| Semibold +Title 3| Regular| 24| 26.5| Semibold +Headline| Semibold| 21| 23.5| Semibold +Body| Regular| 21| 23.5| Semibold +Caption 1| Regular| 18| 20.5| Semibold +Caption 2| Regular| 17| 19.5| Semibold +Footnote 1| Regular| 16| 18.5| Semibold +Footnote 2| Regular| 15| 17.5| Semibold + +#### [AX2](https://developer.apple.com/design/human-interface-guidelines/typography#AX2) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 45| 47.5| Bold +Title 1| Regular| 43| 46| Semibold +Title 2| Regular| 35| 37.5| Semibold +Title 3| Regular| 25| 27.5| Semibold +Headline| Semibold| 22| 24.5| Semibold +Body| Regular| 22| 24.5| Semibold +Caption 1| Regular| 19| 21.5| Semibold +Caption 2| Regular| 18| 20.5| Semibold +Footnote 1| Regular| 17| 19.5| Semibold +Footnote 2| Regular| 16| 17.5| Semibold + +#### [AX3](https://developer.apple.com/design/human-interface-guidelines/typography#AX3) + +Style| Weight| Size (points)| Leading (points)| Emphasized weight +---|---|---|---|--- +Large Title| Regular| 46| 48.5| Bold +Title 1| Regular| 44| 47| Semibold +Title 2| Regular| 36| 38.5| Semibold +Title 3| Regular| 26| 28.5| Semibold +Headline| Semibold| 23| 25.5| Semibold +Body| Regular| 23| 25.5| Semibold +Caption 1| Regular| 20| 22.5| Semibold +Caption 2| Regular| 19| 21.5| Semibold +Footnote 1| Regular| 18| 20.5| Semibold +Footnote 2| Regular| 17| 19.5| Semibold + +### [Tracking values](https://developer.apple.com/design/human-interface-guidelines/typography#Tracking-values) + +#### [iOS, iPadOS, visionOS tracking values](https://developer.apple.com/design/human-interface-guidelines/typography#iOS-iPadOS-visionOS-tracking-values) + + * SF Pro + * SF Pro Rounded + * New York + + + +#### [SF Pro](https://developer.apple.com/design/human-interface-guidelines/typography#SF-Pro) + +Size (points)| Tracking (1/1000 em)| Tracking (points) +---|---|--- +6| +41| +0.24 +7| +34| +0.23 +8| +26| +0.21 +9| +19| +0.17 +10| +12| +0.12 +11| +6| +0.06 +12| 0| 0.0 +13| -6| -0.08 +14| -11| -0.15 +15| -16| -0.23 +16| -20| -0.31 +17| -26| -0.43 +18| -25| -0.44 +19| -24| -0.45 +20| -23| -0.45 +21| -18| -0.36 +22| -12| -0.26 +23| -4| -0.10 +24| +3| +0.07 +25| +6| +0.15 +26| +8| +0.22 +27| +11| +0.29 +28| +14| +0.38 +29| +14| +0.40 +30| +14| +0.40 +31| +13| +0.39 +32| +13| +0.41 +33| +12| +0.40 +34| +12| +0.40 +35| +11| +0.38 +36| +10| +0.37 +37| +10| +0.36 +38| +10| +0.37 +39| +10| +0.38 +40| +10| +0.37 +41| +9| +0.36 +42| +9| +0.37 +43| +9| +0.38 +44| +8| +0.37 +45| +8| +0.35 +46| +8| +0.36 +47| +8| +0.37 +48| +8| +0.35 +49| +7| +0.33 +50| +7| +0.34 +51| +7| +0.35 +52| +6| +0.33 +53| +6| +0.31 +54| +6| +0.32 +56| +6| +0.30 +58| +5| +0.28 +60| +4| +0.26 +62| +4| +0.24 +64| +4| +0.22 +66| +3| +0.19 +68| +2| +0.17 +70| +2| +0.14 +72| +2| +0.14 +76| +1| +0.07 +80| 0| 0 +84| 0| 0 +88| 0| 0 +92| 0| 0 +96| 0| 0 + +Not all apps express tracking values as 1/1000 em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [SF Pro Rounded](https://developer.apple.com/design/human-interface-guidelines/typography#SF-Pro-Rounded) + +Size (points)| Tracking (1/1000 em)| Tracking (points) +---|---|--- +6| +87| +0.51 +7| +80| +0.54 +8| +72| +0.57 +9| +65| +0.57 +10| +58| +0.57 +11| +52| +0.56 +12| +46| +0.54 +13| +40| +0.51 +14| +35| +0.48 +15| +30| +0.44 +16| +26| +0.41 +17| +22| +0.37 +18| +21| +0.37 +19| +20| +0.37 +20| +18| +0.36 +21| +17| +0.35 +22| +16| +0.34 +23| +16| +0.35 +24| +15| +0.35 +25| +14| +0.35 +26| +14| +0.36 +27| +14| +0.36 +28| +13| +0.36 +29| +13| +0.37 +30| +12| +0.37 +31| +12| +0.36 +32| +12| +0.38 +33| +12| +0.39 +34| +12| +0.38 +35| +11| +0.38 +36| +11| +0.39 +37| +10| +0.38 +38| +10| +0.39 +39| +10| +0.38 +40| +10| +0.39 +41| +10| +0.38 +42| +10| +0.39 +43| +9| +0.38 +44| +8| +0.37 +45| +8| +0.37 +46| +8| +0.36 +47| +8| +0.37 +48| +8| +0.35 +49| +8| +0.36 +50| +7| +0.34 +51| +6| +0.32 +52| +6| +0.33 +53| +6| +0.31 +54| +6| +0.32 +56| +6| +0.30 +58| +4| +0.25 +60| +4| +0.23 +62| +4| +0.21 +64| +3| +0.19 +66| +2| +0.16 +68| +2| +0.13 +70| +2| +0.14 +72| +2| +0.11 +76| +1| +0.07 +80| 0| 0.00 +84| 0| 0.00 +88| 0| 0.00 +92| 0| 0.00 +96| 0| 0.00 + +Not all apps express tracking values as 1/1000 em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [New York](https://developer.apple.com/design/human-interface-guidelines/typography#New-York) + +Size (points)| Tracking (1/1000 em)| Tracking (points) +---|---|--- +6| +40| +0.23 +7| +32| +0.22 +8| +25| +0.20 +9| +20| +0.18 +10| +16| +0.15 +11| +11| +.12 +12| +6| +0.07 +13| +4| +0.05 +14| +2| +0.03 +15| +0| +0.00 +16| -2| -0.03 +17| -4| -0.07 +18| -6| -0.11 +19| -8| -0.15 +20| -10| -0.20 +21| -10| -0.21 +22| -10| -0.23 +23| -11| -0.25 +24| -11| -0.26 +25| -11| -0.27 +26| -12| -0.29 +27| -12| -0.32 +28| -12| -0.33 +29| -12| -0.34 +30| -12| -0.37 +31| -13| -0.39 +32| -13| -0.41 +33| -13| -0.42 +34| -14| -0.45 +35| -14| -0.48 +36| -14| -0.49 +38| -14| -0.52 +40| -14| -0.55 +42| -14| -0.57 +44| -14| -0.62 +46| -14| -0.65 +48| -14| -0.68 +50| -14| -0.71 +52| -14| -0.74 +54| -15| -0.79 +58| -15| -0.85 +62| -15| -0.91 +66| -15| -0.97 +70| -16| -1.06 +72| -16| -1.09 +80| -16| -1.21 +88| -16| -1.33 +96| -16| -1.50 +100| -16| -1.56 +120| -16| -1.88 +140| -16| -2.26 +160| -16| -2.58 +180| -17| -2.99 +200| -17| -3.32 +220| -18| -3.76 +240| -18| -4.22 +260| -18| -4.57 + +Not all apps express tracking values as 1/1000 em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [macOS tracking values](https://developer.apple.com/design/human-interface-guidelines/typography#macOS-tracking-values) + +Size (points)| Tracking (1/1000 em)| Tracking (points) +---|---|--- +6| +41| +0.24 +7| +34| +0.23 +8| +26| +0.21 +9| +19| +0.17 +10| +12| +0.12 +11| +6| +0.06 +12| 0| 0.0 +13| -6| -0.08 +14| -11| -0.15 +15| -16| -0.23 +16| -20| -0.31 +17| -26| -0.43 +18| -25| -0.44 +19| -24| -0.45 +20| -23| -0.45 +21| -18| -0.36 +22| -12| -0.26 +23| -4| -0.10 +24| +3| +0.07 +25| +6| +0.15 +26| +8| +0.22 +27| +11| +0.29 +28| +14| +0.38 +29| +14| +0.40 +30| +14| +0.40 +31| +13| +0.39 +32| +13| +0.41 +33| +12| +0.40 +34| +12| +0.40 +35| +11| +0.38 +36| +10| +0.37 +37| +10| +0.36 +38| +10| +0.37 +39| +10| +0.38 +40| +10| +0.37 +41| +9| +0.36 +42| +9| +0.37 +43| +9| +0.38 +44| +8| +0.37 +45| +8| +0.35 +46| +8| +0.36 +47| +8| +0.37 +48| +8| +0.35 +49| +7| +0.33 +50| +7| +0.34 +51| +7| +0.35 +52| +6| +0.31 +53| +6| +0.33 +54| +6| +0.32 +56| +6| +0.30 +58| +5| +0.28 +60| +4| +0.26 +62| +4| +0.24 +64| +4| +0.22 +66| +3| +0.19 +68| +2| +0.17 +70| +2| +0.14 +72| +2| +0.14 +76| +1| +0.07 +80| 0| 0 +84| 0| 0 +88| 0| 0 +92| 0| 0 +96| 0| 0 + +Not all apps express tracking values as 1/1000 em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [tvOS tracking values](https://developer.apple.com/design/human-interface-guidelines/typography#tvOS-tracking-values) + +Size (points)| Tracking (1/1000 em)| Tracking (points) +---|---|--- +6| +41| +0.24 +7| +34| +0.23 +8| +26| +0.21 +9| +19| +0.17 +10| +12| +0.12 +11| +6| +0.06 +12| 0| 0.0 +13| -6| -0.08 +14| -11| -0.15 +15| -16| -0.23 +16| -20| -0.31 +17| -26| -0.43 +18| -25| -0.44 +19| -24| -0.45 +20| -23| -0.45 +21| -18| -0.36 +22| -12| -0.26 +23| -4| -0.10 +24| +3| +0.07 +25| +6| +0.15 +26| +8| +0.22 +27| +11| +0.29 +28| +14| +0.38 +29| +14| +0.40 +30| +14| +0.40 +31| +13| +0.39 +32| +13| +0.41 +33| +12| +0.40 +34| +12| +0.40 +35| +11| +0.38 +36| +10| +0.37 +37| +10| +0.36 +38| +10| +0.37 +39| +10| +0.38 +40| +10| +0.37 +41| +9| +0.36 +42| +9| +0.37 +43| +9| +0.38 +44| +8| +0.37 +45| +8| +0.35 +46| +8| +0.36 +47| +8| +0.37 +48| +8| +0.35 +49| +7| +0.33 +50| +7| +0.34 +51| +7| +0.35 +52| +6| +0.31 +53| +6| +0.33 +54| +6| +0.32 +56| +6| +0.30 +58| +5| +0.28 +60| +4| +0.26 +62| +4| +0.24 +64| +4| +0.22 +66| +3| +0.19 +68| +2| +0.17 +70| +2| +0.14 +72| +2| +0.14 +76| +1| +0.07 +80| 0| 0 +84| 0| 0 +88| 0| 0 +92| 0| 0 +96| 0| 0 + +Not all apps express tracking values as 1/1000 em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs. + +#### [watchOS tracking values](https://developer.apple.com/design/human-interface-guidelines/typography#watchOS-tracking-values) + + * SF Compact + * SF Compact Rounded + + + +#### [SF Compact](https://developer.apple.com/design/human-interface-guidelines/typography#SF-Compact) + +Size (points)| Tracking (1/1000 em)| Tracking (points) +---|---|--- +6| +50| +0.29 +7| +30| +0.21 +8| +30| +0.23 +9| +30| +0.26 +10| +30| +0.29 +11| +24| +0.26 +12| +20| +0.23 +13| +16| +0.20 +14| +14| +0.19 +15| +4| +0.06 +16| 0| 0.00 +17| -4| -0.07 +18| -8| -0.14 +19| -12| -0.22 +20| 0| 0.00 +21| -2| -0.04 +22| -4| -0.09 +23| -6| -0.13 +24| -8| -0.19 +25| -10| -0.24 +26| -11| -0.28 +27| -12| -0.30 +28| -12| -0.34 +29| -14| -0.38 +30| -14| -0.42 +31| -15| -0.45 +32| -16| -0.50 +33| -17| -0.55 +34| -18| -0.60 +35| -18| -0.63 +36| -20| -0.69 +37| -20| -0.72 +38| -20| -0.74 +39| -20| -0.76 +40| -20| -0.78 +41| -20| -0.80 +42| -20| -0.82 +43| -20| -0.84 +44| -20| -0.86 +45| -20| -0.88 +46| -20| -0.92 +47| -20| -0.94 +48| -20| -0.96 +49| -21| -1.00 +50| -21| -1.03 +51| -21| -1.05 +52| -21| -1.07 +53| -22| -1.11 +54| -22| -1.13 +56| -22| -1.20 +58| -22| -1.25 +60| -22| -1.32 +62| -22| -1.36 +64| -23| -1.44 +66| -24| -1.51 +68| -24| -1.56 +70| -24| -1.64 +72| -24| -1.69 +76| -25| -1.86 +80| -26| -1.99 +84| -26| -2.13 +88| -26| -2.28 +92| -28| -2.47 +96| -28| -2.62 + +Not all apps express tracking values as 1/1000 em. Point size based on image resolution of 144 ppi for @2x designs. + +#### [SF Compact Rounded](https://developer.apple.com/design/human-interface-guidelines/typography#SF-Compact-Rounded) + +Size (points)| Tracking (1/1000 em)| Tracking (points) +---|---|--- +6| +28| +0.16 +7| +26| +0.18 +8| +24| +0.19 +9| +22| +0.19 +10| +20| +0.20 +11| +18| +0.19 +12| +16| +0.19 +13| +14| +0.18 +14| +12| +0.16 +15| +10| +0.15 +16| +8| +0.12 +17| +6| +0.10 +18| +4| +0.07 +19| +2| +0.04 +20| 0| 0.00 +21| -2| -0.04 +22| -4| -0.09 +23| -6| -0.13 +24| -8| -0.19 +25| -10| -0.24 +26| -11| -0.28 +27| -12| -0.30 +28| -12| -0.34 +29| -14| -0.38 +30| -14| -0.42 +31| -15| -0.45 +32| -16| -0.50 +33| -17| -0.55 +34| -18| -0.60 +35| -18| -0.63 +36| -20| -0.69 +37| -20| -0.72 +38| -20| -0.74 +39| -20| -0.76 +40| -20| -0.78 +41| -20| -0.80 +42| -20| -0.82 +43| -20| -0.84 +44| -20| -0.86 +45| -20| -0.88 +46| -20| -0.92 +47| -20| -0.94 +48| -20| -0.96 +49| -21| -1.00 +50| -21| -1.03 +51| -21| -1.05 +52| -21| -1.07 +53| -22| -1.11 +54| -22| -1.13 +56| -22| -1.20 +58| -22| -1.25 +60| -22| -1.32 +62| -22| -1.36 +64| -23| -1.44 +66| -24| -1.51 +68| -24| -1.56 +70| -24| -1.64 +72| -24| -1.69 +76| -25| -1.86 +80| -26| -1.99 +84| -26| -2.13 +88| -26| -2.28 +92| -28| -2.47 +96| -28| -2.62 + +Not all apps express tracking values as 1/1000 em. Point size based on image resolution of 144 ppi for @2x designs. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/typography#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/typography#Related) + +[Fonts for Apple platforms](https://developer.apple.com/fonts/) + +[SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/typography#Developer-documentation) + +[Text input and output](https://developer.apple.com/documentation/SwiftUI/Text-input-and-output) — SwiftUI + +[Text display and fonts](https://developer.apple.com/documentation/UIKit/text-display-and-fonts) — UIKit + +[Fonts](https://developer.apple.com/documentation/AppKit/fonts) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/typography#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/E4CD1309-352A-444E-96A5-FB5D6BA69725/9167_wide_250x141_1x.jpg) Get started with Dynamic Type ](https://developer.apple.com/videos/play/wwdc2024/10074) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/F688D32F-15D2-4082-9505-DB2FA7FE0B0B/6736_wide_250x141_1x.jpg) Meet the expanded San Francisco font family ](https://developer.apple.com/videos/play/wwdc2022/110381) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/EA12E035-968D-4B74-AC8D-26CFD8F365A7/3823_wide_250x141_1x.jpg) The details of UI typography ](https://developer.apple.com/videos/play/wwdc2020/10175) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/typography#Change-log) + +Date| Changes +---|--- +December 16, 2025| Added emphasized weights to the Dynamic Type style specifications for each platform. +March 7, 2025| Expanded guidance for Dynamic Type. +June 10, 2024| Added guidance for using Apple’s Unity plug-ins to support Dynamic Type in a Unity-based game and enhanced guidance on billboarding in a visionOS app or game. +September 12, 2023| Added artwork illustrating system font weights, and clarified tvOS specification table descriptions. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-foundations/references/writing.md b/skills/hig-foundations/references/writing.md new file mode 100644 index 00000000..af8b233e --- /dev/null +++ b/skills/hig-foundations/references/writing.md @@ -0,0 +1,91 @@ +--- +title: "Writing | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/writing + +# Writing + +The words you choose within your app are an essential part of its user experience. + +![A sketch of a document and pencil, suggesting written content. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/5bd05331c62b850b25ac62f8581b97b6/foundations-writing-intro%402x.png) + +Whether you’re building an onboarding experience, writing an alert, or describing an image for accessibility, designing through the lens of language will help people get the most from your app or game. + +## [Getting started](https://developer.apple.com/design/human-interface-guidelines/writing#Getting-started) + +**Determine your app’s voice.** Think about who you’re talking to, so you can figure out the type of vocabulary you’ll use. What types of words are familiar to people using your app? How do you want people to feel? The words for a banking app might convey trust and stability, for example, while the words in a game might convey excitement and fun. Create a list of common terms, and reference that list to keep your language consistent. Consistent language, along with a voice that reflects your app’s values, helps everything feel more cohesive. + +**Match your tone to the context.** Once you’ve established your app’s voice, vary your tone based on the situation. Consider what people are doing while they’re using your app — both in the physical world and within the app itself. Are they exercising and reached a goal? Or are they trying to make a payment and received an error? Situational factors affect both what you say and how you display the text on the screen. + +Compare the tone of these two examples from Apple Watch. In the first, the tone is straightforward and direct, reflecting the seriousness of the situation. In the second, the tone is light and congratulatory. + +![A screenshot of a Fall Detection message that reads: it looks like you've taken a hard fall.](https://docs-assets.developer.apple.com/published/6f5dc2b2e349ff901f831b3ba2c109c5/writing-fall-detection-message%402x.png) + +![A screenshot of an Activity message that reads: you set a personal record for your longest daily Move streak, 35 days!](https://docs-assets.developer.apple.com/published/55bb6afa80bc2f2034a1909d7f672bfc/writing-move-streak-message%402x.png) + +**Be clear.** Choose words that are easily understood and convey the right thing. Check each word to be sure it needs to be there. If you can use fewer words, do so. When in doubt, read your writing out loud. + +**Write for everyone.** For your app to be useful for as many people as possible, it needs to speak to as many people as possible. Choose simple, plain language and write with accessibility and localization in mind, avoiding jargon and gendered terminology. For guidance, see [Writing inclusively](https://help.apple.com/applestyleguide/#/apdcb2a65d68) and [VoiceOver](https://developer.apple.com/design/human-interface-guidelines/voiceover); for developer guidance, see [Localization](https://developer.apple.com/documentation/xcode/localization). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/writing#Best-practices) + +**Consider each screen’s purpose**. Pay attention to the order of elements on a screen, and put the most important information first. Format your text to make it easy to read. If you’re trying to convey more than one idea, consider breaking up the text onto multiple screens, and think about the flow of information across those screens. + +**Be action oriented.** Active voice and clear labels help people navigate through your app from one step to the next, or from one screen to another. When labeling buttons and links, it’s almost always best to use a verb. Prioritize clarity and avoid the temptation to be too cute or clever with your labels. For example, just saying “Send” often works better than “Let’s do it!” For links, avoid using “Click here” in favor of more descriptive words or phrases, such as “Learn more about UX Writing.” This is especially important for people using screen readers to access your app. + +**Build language patterns.** Consistency builds familiarity, helping your app feel cohesive, intuitive, and thoughtfully designed. It also makes writing for your app easier, as you can return to these patterns again and again. + +**Adopt capitalization rules that align with your app’s style, then apply them consistently.** While certain components, like [button labels](https://developer.apple.com/design/human-interface-guidelines/buttons#Content), have specific guidelines, how you format text reflects your app’s voice. Title case is generally considered formal, while sentence case is more casual. Choose a style for each UI element type and use it consistently throughout your app — for example, title case for all alerts or sentence case for all headlines. + +**Give clear guidance and use consistent language throughout processes with multiple steps.** If your app has a flow that spans multiple screens, decide how you want to label the actions that take people from one step to the next. Begin with language like “Get Started” to indicate you’re starting a flow. You can use the button label to hint at the next step, or use terms like “Continue” or “Next,” but be consistent with what you choose. Make it clear when a flow is complete by using language like “Done.” + +**Use possessive pronouns sparingly.** Possessive pronouns like _my_ and _your_ are often unnecessary to establish context. For example, “Favorites” conveys the same message as “Your Favorites,” and is more succinct. If you do use possessive pronouns, use them consistently throughout your app, and try not to switch perspectives. Avoid using _we_ altogether because it may be unclear who the “we” in question refers to. This is particularly problematic in error messages like “We’re having trouble loading this content.” Something like “Unable to load content” is much clearer. + +**Write for how people use each device.** People may use your app on several types of devices. While your language needs to be consistent across them, think about where it would be helpful to adjust your text to make it suitable for different devices. Make sure you describe gestures correctly on each device — for example, not saying “click” for a touch device like iPhone or iPad where you mean “tap.” + +Where and how people use a device, its screen size, and its location all affect how you write for your app. iPhone and Apple Watch, for example, offer opportunities for personalization, but their small screens require brevity. TVs, on the other hand, are often in common living spaces, and several people are likely to see anything on the screen, so consider who you’re addressing. Bigger screens also require brevity, as the text must be large for people to see it from a distance. + +**Provide clear next steps on any blank screens.** An empty state, like a completed to-do list or bookmarks folder with nothing in it, can provide a good opportunity to make people feel welcome and educate them about your app. Empty states can also showcase your app’s voice, but make sure that the content is useful and fits the context. An empty screen can be daunting if it isn’t obvious what to do next, so guide people on actions they can take, and give them a button or link to do so if possible. Remember that empty states are usually temporary, so don’t show crucial information that could then disappear. + +**Write clear error messages.** It’s always best to help people avoid errors. When an error message is necessary, display it as close to the problem as possible, avoid blame, and be clear about what someone can do to fix it. For example, “That password is too short” isn’t as helpful as “Choose a password with at least 8 characters.” Remember that errors can be frustrating. Interjections like “oops!” or “uh-oh” are typically unnecessary and can sound insincere. If you find that language alone can’t address an error that’s likely to affect many people, use that as an opportunity to rethink the interaction. + +**Choose the right delivery method.** There are many ways to get people’s attention, whether or not they are actively using your app. When there’s something you want to communicate, consider the urgency and importance of the message. Think about the context in which someone might see the message, whether it requires immediate action, and how much supporting information someone might need. Choose the correct delivery method, and use a tone appropriate for the situation. For guidance, see [Notifications](https://developer.apple.com/design/human-interface-guidelines/notifications), [Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts), and [Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets). + +**Keep settings labels clear and simple.** Help people easily find the settings they need by labeling them as practically as possible. If the setting label isn’t enough, add an explanation. Describe what it does when turned on, and people can infer the opposite. In the Handwashing Timer setting for Apple Watch, for example, the description explains that a timer can start when you’re washing your hands. It isn’t necessary to tell you that a timer won’t start when this setting is off. + +![A partial screenshot showing the Handwashing Timer description, which reads: Apple Watch can detect when you're washing your hands and start a 20-second timer.](https://docs-assets.developer.apple.com/published/f368879d77e8dfdff158067bc3888c5f/writing-handwashing-settings%402x.png) + +If you need to direct someone to a setting, provide a direct link or button, rather than trying to describe its location. For guidance, see [Settings](https://developer.apple.com/design/human-interface-guidelines/settings). + +**Show hints in text fields.** If your app allows people to enter their own text, like account or contact information, label all fields clearly, and use hint or placeholder text so people know how to format the information. You can give an example in hint text, like “name@example.com,” or describe the information, such as “Your name.” Show errors right next to the field, and instruct people how to enter the information correctly, rather than scolding them for not following the rules. “Use only letters for your name” is better than “Don’t use numbers or symbols.” Avoid robotic error messages with no helpful information, like “Invalid name.” For guidance, see [Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/writing#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/writing#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/writing#Related) + +[Apple Style Guide](https://help.apple.com/applestyleguide/#/) + +[Writing inclusively](https://help.apple.com/applestyleguide/#/apdcb2a65d68) + +[Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) + +[Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) + +[Color](https://developer.apple.com/design/human-interface-guidelines/color) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/writing#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/B533077E-165E-43D5-98B8-DBF95101C0B2/10001_wide_250x141_1x.jpg) Make a big impact with small writing changes ](https://developer.apple.com/videos/play/wwdc2025/404) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/E58B8A59-15C1-4FB4-B61A-23DBA2AF6D28/6530_wide_250x141_1x.jpg) Writing for interfaces ](https://developer.apple.com/videos/play/wwdc2022/10037) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/writing#Change-log) + +Date| Changes +---|--- +December 16, 2025| Clarified guidance on language patterns, and added guidance for possessive pronouns. +February 27, 2023| New page. + diff --git a/skills/hig-inputs/SKILL.md b/skills/hig-inputs/SKILL.md new file mode 100644 index 00000000..43f4d203 --- /dev/null +++ b/skills/hig-inputs/SKILL.md @@ -0,0 +1,116 @@ +--- +name: hig-inputs +version: 1.0.0 +description: > + Apple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, + keyboards, game controllers, pointers, Digital Crown, eye tracking, focus system, + remotes, spatial interactions, gyroscope, accelerometer, and nearby interactions. + Use when asked about: "gesture design", "Apple Pencil", "keyboard shortcuts", + "game controller", "pointer support", "mouse support", "trackpad", "Digital Crown", + "eye tracking", "visionOS input", "focus system", "remote control", "gyroscope", + "spatial interaction". Also use when the user says "what gestures should I support," + "how do I add keyboard shortcuts," "how does input work on Apple TV," "should I + support Apple Pencil," or asks about input device handling. + Cross-references: hig-components-status, hig-components-system, + hig-technologies for VoiceOver and Siri. +--- + +# Apple HIG: Inputs + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +### General + +1. **Support multiple input methods.** Touch, pointer, keyboard, pencil, voice, eyes, hands, controllers. Design for the inputs available on each platform. On iPadOS, support both touch and pointer; on macOS, both pointer and keyboard. + +2. **Consistent feedback for every input action.** Visible, audible, or haptic response. + +### Gestures + +3. **Standard gestures must behave consistently.** Tap to activate, swipe to scroll/navigate, pinch to zoom, long press for context menus, drag to move. Don't override system gestures (edge swipes for back, Home, notifications). + +4. **Use standard recognizers; keep custom gestures discoverable.** Apple's built-in recognizers handle edge cases and accessibility. If you add non-standard gestures, provide hints or coaching to teach them. + +### Apple Pencil + +5. **Precision drawing, markup, and selection.** Support pressure, tilt, and hover. Distinguish finger from Pencil when appropriate (finger pans, Pencil draws). + +6. **Support Scribble in text fields.** Users expect to write with Pencil in any text input. + +### Keyboards + +7. **Keyboard shortcuts and full navigation.** Standard shortcuts (Cmd+C/V/Z) plus custom ones visible in the iPadOS Command key overlay. Logical tab order. + +8. **Respect the software keyboard.** Adjust layout when keyboard appears. Use keyboard-avoidance APIs. + +### Game Controllers + +9. **MFi controllers with on-screen fallbacks.** Map to extended gamepad profile, sensible defaults, remappable. Always offer touch or keyboard alternatives. + +### Pointer and Trackpad + +10. **Native feel.** Hover effects, pointer shape adaptation, standard cursor behaviors. Two-finger scroll, pinch to zoom, swipe to navigate. + +### Digital Crown + +11. **Primary scrolling and value-adjustment input on watchOS.** Scrolling lists, adjusting values, navigating views. Haptic feedback at detents. + +### Eyes and Spatial (visionOS) + +12. **Look and pinch.** Generous hit targets (eye tracking is less precise than touch). Avoid sustained gaze for activation. Direct hand manipulation in immersive experiences. + +### Focus System + +13. **Critical for tvOS and visionOS.** Predictable focus movement. Every interactive element focusable. Clear visual indicators (scale, highlight, elevation). Logical focus groups. + +### Remotes + +14. **Siri Remote: limited surface.** Touch area for swiping, clickpad for selection, few physical buttons. Keep interactions simple. + +### Motion and Nearby + +15. **Gyroscope, accelerometer, UWB: use judiciously.** Suits gaming, fitness, AR. Not for essential tasks. Provide calibration and reset. For UWB, communicate distance and direction with visual or haptic cues. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [gestures.md](references/gestures.md) | Touch gestures | Tap, swipe, pinch, long press, drag, system gestures | +| [apple-pencil-and-scribble.md](references/apple-pencil-and-scribble.md) | Apple Pencil | Precision, pressure, tilt, hover, handwriting | +| [keyboards.md](references/keyboards.md) | Keyboards | Shortcuts, navigation, software keyboard, Command key | +| [game-controls.md](references/game-controls.md) | Game controllers | MFi, extended gamepad, remapping, fallbacks | +| [pointing-devices.md](references/pointing-devices.md) | Pointer/trackpad | Hover, cursor morphing, trackpad gestures | +| [digital-crown.md](references/digital-crown.md) | Digital Crown | Scrolling, value adjustment, haptic detents | +| [eyes.md](references/eyes.md) | Eye tracking | Look and tap, gaze targeting, hit target sizing | +| [spatial-interactions.md](references/spatial-interactions.md) | Spatial input | Hand gestures, direct manipulation, immersive input | +| [focus-and-selection.md](references/focus-and-selection.md) | Focus system | tvOS/visionOS navigation, focus indicators, groups | +| [remotes.md](references/remotes.md) | Remotes | Touch surface, clickpad, simple interactions | +| [gyro-and-accelerometer.md](references/gyro-and-accelerometer.md) | Motion sensors | Gyroscope, accelerometer, calibration, gaming | +| [nearby-interactions.md](references/nearby-interactions.md) | Nearby interactions | U1 chip, directional finding, proximity triggers | +| [camera-control.md](references/camera-control.md) | Camera Control | iPhone camera hardware button, quick launch | + +## Output Format + +1. **Input method recommendations by platform** and how they interact. +2. **Gesture specification table** -- standard and custom gestures with expected behaviors. +3. **Keyboard shortcut recommendations** following system conventions. +4. **Accessibility input alternatives** for VoiceOver, Switch Control, etc. + +## Questions to Ask + +1. Which platforms and input devices? +2. Productivity or casual app? +3. Custom gestures in the design? +4. Game controller support needed? + +## Related Skills + +- **hig-components-status** -- Progress indicators responding to input (pull-to-refresh) +- **hig-components-system** -- System experiences with unique input constraints +- **hig-technologies** -- VoiceOver, Siri voice input, ARKit spatial gesture context + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-inputs/references/apple-pencil-and-scribble.md b/skills/hig-inputs/references/apple-pencil-and-scribble.md new file mode 100644 index 00000000..36402fc9 --- /dev/null +++ b/skills/hig-inputs/references/apple-pencil-and-scribble.md @@ -0,0 +1,148 @@ +--- +title: "Apple Pencil and Scribble | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble + +# Apple Pencil and Scribble + +Apple Pencil helps make drawing, handwriting, and marking effortless and natural, in addition to performing well as a pointer and UI interaction tool. + +![A sketch of a scribble mark, suggesting drawing with Apple Pencil. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/48578c745cec42fe322ab69c99575b38/inputs-apple-pencil-and-scribble-intro%402x.png) + +Apple Pencil is a versatile, intuitive tool for iPad apps that offers pixel‑level precision when jotting notes, sketching, painting, marking up documents, and more. Scribble lets people use Apple Pencil to enter text in any text field through fast, private, on-device handwriting recognition. + +For details on Apple Pencil features and compatibility, see [Apple Pencil](https://www.apple.com/apple-pencil/). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Best-practices) + +**Support behaviors people intuitively expect when using a marking instrument.** Most people have a lot of experience with real-world marking tools, and this knowledge informs their expectations when they use Apple Pencil with your app. To provide a delightful experience, think about the ways people interact with nondigital pencils, pens, and other marking instruments, and proactively support actions that people may naturally attempt. For example, people often want to write in the margins of documents or books. + +**Let people choose when to switch between Apple Pencil and finger input.** For example, if your app supports Apple Pencil for marking, also ensure that your app’s controls respond to Apple Pencil so people don’t have to switch to using their finger to activate them. In this scenario, a control that doesn’t support Apple Pencil input might seem to be unresponsive, giving the impression of a malfunction or low battery. (Scribble only supports Apple Pencil input.) + +**Let people make a mark the moment Apple Pencil touches the screen**. You want the experience of putting Apple Pencil to screen to mirror the experience of putting a classic pencil to paper, so it’s essential to avoid requiring people to tap a button or enter a special mode before they can make a mark. + +**Help people express themselves by responding to the way they use Apple Pencil.** Apple Pencil may sense tilt (altitude), force (pressure), orientation (azimuth), and [barrel roll](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Barrel-roll). Use this information to affect the strokes Apple Pencil makes, such as by varying thickness and intensity. When responding to pressure, keep things simple and intuitive. For example, it feels natural to affect continuous properties — such as ink opacity or brush size — by varying the pressure. + +![An illustration of Apple Pencil tilted up from a horizontal line by 45 degrees.](https://docs-assets.developer.apple.com/published/71e341540baa3fa3bd5bdf01a55cc8a8/apple-pencil-altitude%402x.png)Altitude + +![An illustration of Apple Pencil drawing a curved line that increases in thickness as more pressure is applied to the tool.](https://docs-assets.developer.apple.com/published/ce6370f2a90cf23b39ee77f7ba64ff02/apple-pencil-pressure%402x.png)Pressure + +![An illustration of Apple Pencil balancing on its tip at the center of a circle that has degree marks around its circumference. A line from the center of the circle to one of the degree marks indicates the angle at which Apple Pencil is tilted.](https://docs-assets.developer.apple.com/published/e3cd83ae350aac7fe4886903d65ac495/apple-pencil-azimuth%402x.png)Azimuth + +**Provide visual feedback to indicate a direct connection with content.** Make sure Apple Pencil appears to directly and immediately manipulate content it touches onscreen. Avoid letting Apple Pencil appear to initiate seemingly disconnected actions, or affect content on other parts of the screen. + +**Design a great left- and right-handed experience.** Avoid placing controls in locations that may be obscured by either hand. If there’s a chance controls may become obscured, consider letting people reposition them. + +![An illustration of an iPad app that shows a stack of three circular controls on both side edges. A drawing of a person’s left hand holding an Apple Pencil is shown at the bottom-left corner of the screen, partially obscuring the controls on that side. The controls on the left edge are grayed out to indicate the original position they no longer occupy, while the controls on the right edge are bright to indicate their final position.](https://docs-assets.developer.apple.com/published/386201ad5a8d093d8c72fc4db57978aa/apple-pencil-controls-moved-right%402x.png) + +![An illustration of an iPad app that shows a stack of three circular controls on both side edges. A drawing of a person’s right hand holding an Apple Pencil is shown at the bottom-right corner of the screen, partially obscuring the controls on that side. The controls on the right edge are grayed out to indicate the original position they no longer occupy, while the controls on the left edge are bright to indicate their final position.](https://docs-assets.developer.apple.com/published/6b9182644f4624493d4fbe541186a4dc/apple-pencil-controls-moved-left%402x.png) + +## [Hover](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Hover) + +**Use hover to help people predict what will happen when Apple Pencil touches the screen.** For example, as people hold Apple Pencil above the screen, a hover preview can show the dimensions and color of the mark that the current tool can make. As much as possible, avoid continuously modifying the preview as people move Apple Pencil closer or farther from the screen. A preview that changes according to height is unlikely to clarify the mark Apple Pencil will make, and frequent visual variations can be very distracting to people. + +**Avoid using hover to initiate an action.** Unlike tapping a button or marking the screen, hovering is a relatively imprecise motion that doesn’t require people to think about the actual distance between Apple Pencil and the display. You don’t want people to inadvertently perform an action — especially a destructive action that they might want to undo — just because they hold Apple Pencil near the screen. + +**Prefer showing a preview value that’s near the middle in a range of dynamic values.** Dynamic properties like opacity or flow can be difficult to depict at the highest or lowest ends of the spectrum. For example, previewing the appearance of a brush mark made with the maximum pressure could occlude the area in which people are marking; in contrast, depicting a mark made with the minimum pressure could be hard for people to detect, making the preview an inaccurate representation of an actual mark or even invisible. + +![An illustration of Apple Pencil hovering slightly above a gray rectangle that represents the screen. A small blue oval beneath the tip represents a preview.](https://docs-assets.developer.apple.com/published/d18ccebb3a51a66f6c6151bc1414d9a1/apple-pencil-preview-small%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of Apple Pencil hovering slightly above a gray rectangle that represents the screen. A medium blue oval beneath the tip represents a preview.](https://docs-assets.developer.apple.com/published/4c5b24f4381fc1ed83af48f2a7ae3268/apple-pencil-preview-medium%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of Apple Pencil hovering slightly above a gray rectangle that represents the screen. A large blue oval beneath the tip represents a preview.](https://docs-assets.developer.apple.com/published/50d3aa8162579aced9bd752b856b5f6b/apple-pencil-preview-large%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Consider using hover to support relevant interactions close to where people are marking.** For example, you might respond to hover by displaying a contextual menu of tool sizes when people perform a gesture like [squeeze](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Squeeze) or press a modifier key on an attached keyboard. Revealing a menu near where people are marking lets them make choices without moving Apple Pencil or their hands to another part of the screen. + +**Prefer showing hover previews for Apple Pencil, not for a pointing device.** Although a pointing device can also respond to hover gestures, it might be confusing to provide the same visual feedback for both devices. If it makes sense in your app, you can restrict your hover preview to Apple Pencil only. For developer guidance, see [Adopting hover support for Apple Pencil](https://developer.apple.com/documentation/UIKit/adopting-hover-support-for-apple-pencil). + +## [Double tap](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Double-tap) + +**Respect people’s settings for the double-tap gesture when they make sense in your app.** By default, models of Apple Pencil that support the double-tap gesture respond by toggling between the current tool and the eraser, but people can set the gesture to toggle between the current and previous tool, show and hide the color picker, or do nothing at all. If your app supports these behaviors, let people use their preferred gestures to perform them. If the systemwide double-tap settings don’t make sense in your app, you can still use the gesture to change the interaction mode. For example, a 3D app that offers a mesh-editing tool could use double tap to toggle between the tool’s raise and lower modes. + +**Give people a way to specify custom double-tap behavior if necessary.** If you offer custom double-tap behavior in addition to some or all of the default behaviors, provide a control that lets people choose the custom behavior mode. People need to know which mode they’re in; otherwise, they may get confused when your app responds differently to their interactions. In this scenario, make sure it’s easy for people to discover the custom behavior your app supports, but don’t turn it on by default. + +**Avoid using the double-tap gesture to perform an action that modifies content.** In rare cases, it’s possible for people to double-tap accidentally, which means that they may not even be aware that your app has performed the action. Prefer using double tap to perform actions that are easy for people to undo. In particular, avoid using double tap to perform a potentially destructive action that might result in data loss. + +## [Squeeze](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Squeeze) + +Using Apple Pencil Pro, people can squeeze to perform an action. You can design a custom behavior that responds to squeeze, but recognize that people may choose to configure the squeeze gesture to run an [App Shortcut](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts) instead of app-specific actions. + +Note + +The 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. + +**Treat squeeze as a single, quick gesture that performs a discrete — not continuous — action.** People sometimes squeeze with a lot of force, so holding a squeeze or squeezing several times quickly can be tiring. Help people remain comfortable by responding to a single squeeze and promptly displaying the result. + +**If you use squeeze to reveal app UI, like a contextual menu, display it close to Apple Pencil Pro.** Displaying the result of a squeeze near the tip of Apple Pencil Pro strengthens the connection between the device and the gesture, and can help people stay engaged with their task. + +**Define squeeze actions that are nondestructive and easy to undo.** As with the double-tap gesture, people can make the squeeze gesture without meaning to, so it’s essential to avoid using squeeze to perform an action that could result in data loss. + +## [Barrel roll](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Barrel-roll) + +While marking with Apple Pencil Pro, people can use a barrel-roll gesture to change the type of mark they’re making. For example, while using Apple Pencil Pro to highlight content in Notes, people can barrel-roll to rotate the angle of the mark. + +**Use barrel roll only to modify marking behavior, not to enable navigation or display other controls.** In contrast to double tap and squeeze, barrel roll is naturally related to marking and doesn’t make sense for performing an interface action. + +## [Scribble](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Scribble) + +With Scribble and Apple Pencil, people can simply write wherever text is accepted in your app — they don’t have to tap or switch modes first. Because Scribble is fully integrated into iPadOS, it’s available to all apps by default. + +**Make text entry feel fluid and effortless.** By default, Scribble works in all standard text components — such as text fields, text views, search fields, and editable fields in web content — except password fields. If you use a custom text field in your app, avoid making people tap or select it before they can begin writing. + +**Make Scribble available everywhere people might want to enter text.** Unlike using the keyboard, using Apple Pencil encourages people to treat the screen the way they treat a sheet of paper. Help strengthen this perception in your app by making Scribble consistently available in places where text entry seems natural. For example, in Reminders, it’s natural for people to create a new reminder by writing it in the blank space below the last item, even though the area doesn’t contain a text field. For developer guidance, see [`UIIndirectScribbleInteraction`](https://developer.apple.com/documentation/UIKit/UIIndirectScribbleInteraction-1nfjm). + +**Avoid distracting people while they write.** Some text field behaviors work well for keyboard input, but can disrupt the natural writing experience that Apple Pencil provides. For example, it’s best to avoid displaying autocompletion text as people write in a text field because the suggestions can visually interfere with their writing. It’s also a good idea to hide a field’s placeholder text the moment people begin to write so that their input doesn’t appear to overlap it. + +**While people are writing in a text field, make sure it remains stationary.** In some cases, it can make sense to move a text field when it becomes focused: for example, a search field might move to make more room to display results. Such a movement is fine when people are using the keyboard, but when they’re writing it can make them feel like they’ve lost control of where their input is going. If you can’t prevent a text field from moving or resizing, consider delaying the change until people pause their writing. + +**Prevent autoscrolling text while people are writing and editing in a text field.** When transcribed text autoscrolls, people might try to avoid writing on top of it. Worse, if text scrolls while people are using Apple Pencil to select it, they might select a different range of text than they want. + +**Give people enough space to write.** A small text field can feel uncomfortable to write in. When you know that Apple Pencil input is likely, improve the writing experience in your app by increasing the size of the text field before people begin to write in it or when they pause writing; avoid resizing a text field while people are writing. For developer guidance, see [`UIScribbleInteraction`](https://developer.apple.com/documentation/UIKit/UIScribbleInteraction). + +![An illustration showing a stack of two text fields, where the top field is about half the width of the bottom field. Both text fields contain the word Name in the leading end, followed by a person's signature. The top text field is too narrow to fit all of the signature and is marked with an X in a circle to indicate incorrect usage. The bottom text field is wide enough to fit the full signature and is marked with a checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/0e2cd3f5562569097b9f668253dac0f7/apple-pencil-scribble%402x.png) + +## [Custom drawing](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Custom-drawing) + +Using [PencilKit](https://developer.apple.com/documentation/PencilKit), you can let people take notes, annotate documents and images, and draw with the same low-latency experience that iOS provides. PencilKit also makes it easy to create a custom drawing canvas in your app and offer a state-of-the-art tool picker and ink palette. + +**Help people draw on top of existing content.** By default, the colors on your PencilKit canvas dynamically adjust to Dark Mode, so people can create content in either mode and the results will look great in both. However, when people draw on top of existing content like a PDF or a photo, you want to prevent the dynamic adjustment of colors so that the markup remains sharp and visible. + +**Consider displaying custom undo and redo buttons when your app runs in a compact environment.** In a regular environment, the tool picker includes undo and redo buttons, but in a compact environment it doesn’t. In a compact environment, you could display undo and redo buttons in a toolbar. You might also consider supporting the standard 3-finger undo/redo gesture, so people can use it in any environment. For guidance, see [Undo and redo](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo). + +![An illustration of an iPad screen in landscape on the left and an iPhone screen in portrait on the right. Both screens show the tool picker at the bottom edge of the screen. The iPad screen shows the standard undo and redo buttons in the left end of the tool picker, and the iPhone screen shows the undo button in the top toolbar.](https://docs-assets.developer.apple.com/published/7587fbeb4272d990e295d093f79e1ef8/apple-pencil-undo-redo-buttons%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Platform-considerations) + + _Not supported in iOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Related) + +[Entering data](https://developer.apple.com/design/human-interface-guidelines/entering-data) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Developer-documentation) + +[PencilKit](https://developer.apple.com/documentation/PencilKit) + +[PaperKit](https://developer.apple.com/documentation/PaperKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/BE1C66C1-9D8C-4EF7-BE9A-A36251A00B86/10006_wide_250x141_1x.jpg) Meet PaperKit ](https://developer.apple.com/videos/play/wwdc2025/285) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/2104DC8F-01CE-453F-AF0E-A499CB193E97/9354_wide_250x141_1x.jpg) Squeeze the most out of Apple Pencil ](https://developer.apple.com/videos/play/wwdc2024/10214) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble#Change-log) + +Date| Changes +---|--- +May 7, 2024| Added guidance for handling squeeze and barrel roll on Apple Pencil Pro. +September 12, 2023| Updated artwork. +November 3, 2022| Added guidelines for using hover to enhance your app. + diff --git a/skills/hig-inputs/references/camera-control.md b/skills/hig-inputs/references/camera-control.md new file mode 100644 index 00000000..4b76a1a7 --- /dev/null +++ b/skills/hig-inputs/references/camera-control.md @@ -0,0 +1,107 @@ +--- +title: "Camera Control | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/camera-control + +# Camera Control + +The Camera Control provides direct access to your app’s camera experience. + +![A stylized representation of the Camera Control.](https://docs-assets.developer.apple.com/published/73774a69a0e7738c02ffdaeccfe03830/inputs-camera-control-intro%402x.png) + +On iPhone 16 and iPhone 16 Pro models, the Camera Control quickly opens your app’s camera experience to capture moments as they happen. When a person lightly presses the Camera Control, the system displays an overlay that extends from the device bezel. + +![A screenshot showing callouts to the Camera Control and overlay on iPhone in landscape orientation.](https://docs-assets.developer.apple.com/published/3d9efd41aaf5eb91e9d51fdf57a26472/camera-control-button-callout%402x.png) + +The overlay allows people to quickly adjust controls. A person can view the available controls by lightly double-pressing the Camera Control. After selecting a control, they can slide their finger on the Camera Control to adjust a value to capture their content as they want. + +![A partial screenshot of the Camera Control overlay displaying its controls.](https://docs-assets.developer.apple.com/published/59fe90435020556bfc9b5ed3f003b651/camera-control-picker%402x.png)Controls in the overlay + +## [Anatomy](https://developer.apple.com/design/human-interface-guidelines/camera-control#Anatomy) + +The Camera Control offers two types of controls for adjusting values or changing between options: + + * A _slider_ provides a range of values to choose from, such as how much contrast to apply to the content. + + * A _picker_ offers discrete options, such as turning a grid on and off in the viewfinder. + + + + +![A partial screenshot of the Camera Control overlay displaying a slider control.](https://docs-assets.developer.apple.com/published/3bb2ecfcd292742f087c064e5dfd1ec5/camera-control-slider-control%402x.png)Slider control + +![A partial screenshot of the Camera Control overlay displaying a picker control.](https://docs-assets.developer.apple.com/published/27e6bc8836d9265133dd150098c3865d/camera-control-picker-control%402x.png)Picker control + +In addition to custom controls that you create, the system provides a set of standard controls that you can optionally include in the overlay to allow someone to adjust their camera’s zoom and exposure. + +![A partial screenshot of the Camera Control overlay displaying the system zoom factor control.](https://docs-assets.developer.apple.com/published/3bb2ecfcd292742f087c064e5dfd1ec5/system-control-type-zoom-factor%402x.png)Zoom factor control + +![A partial screenshot of the Camera Control overlay displaying the system exposure bias control.](https://docs-assets.developer.apple.com/published/47568cc559bb20a5cea03ded2199916b/system-control-type-exposure-bias%402x.png)Exposure bias control + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/camera-control#Best-practices) + +**Use SF Symbols to represent control functionality.** The system doesn’t support custom symbols; instead, pick a symbol from SF Symbols that clearly denotes a control’s behavior. iOS offers thousands of symbols you can use to represent the controls your app shows in the overlay. Symbols for controls don’t represent their current state. To view available symbols, see the Camera & Photos section in the [SF Symbols app](https://developer.apple.com/sf-symbols/). + +![A partial screenshot of the Camera Control overlay displaying a camera flash control that uses the bolt.fill symbol.](https://docs-assets.developer.apple.com/published/29e9dac71ac35e1d3d9510a545fce3c3/camera-control-picker-sf-symbols-flash%402x.png)The `bolt.fill` symbol that represents a control for the camera flash + +![A partial screenshot of the Camera Control overlay displaying a camera filters control that uses the camera.filters symbol.](https://docs-assets.developer.apple.com/published/17466338143a202a0241d26725f23048/camera-control-picker-sf-symbols-filters%402x.png)The `camera.filters` symbol that represents a control for filters + +**Keep names of controls short.** Control labels adhere to Dynamic Type sizes, and longer names may obfuscate the camera’s viewfinder. + +**Include units or symbols with slider control values to provide context.** Providing descriptive information in the overlay, such as EV, %, or a custom string, helps people understand what the slider controls. For developer guidance, see [`localizedValueFormat`](https://developer.apple.com/documentation/AVFoundation/AVCaptureSlider/localizedValueFormat). + +![A partial screenshot showing an example of the Camera Control overlay with a slider control displaying a value and context for the type of value.](https://docs-assets.developer.apple.com/published/00f466e6926811164965fdb40483a34c/system-control-with-label%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)Value with context + +![A partial screenshot showing an example of the Camera Control overlay with a slider control displaying a value without information about what the value represents.](https://docs-assets.developer.apple.com/published/b965fe40e836dfce1361f8653c3d2abb/system-control-no-label%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Value without context + +**Define prominent values for a slider control.** Prominent values are ones people choose most frequently, or values that are evenly spaced, like the major increments of zoom factor. When a person slides on the Camera Control to adjust a slider control, the system more easily lands on prominent values you define. For developer guidance, see [`prominentValues`](https://developer.apple.com/documentation/AVFoundation/AVCaptureSlider/prominentValues-199dz). + +**Make space for the overlay in the viewfinder.** The overlay and control labels occupy the screen area adjacent to the Camera Control in both portrait and landscape orientations. To avoid overlapping the interface elements of your camera capture experience, place your UI outside of the overlay areas. Maximize the height and width of the viewfinder and allow the overlay to appear and disappear over it. + +![Partial screenshots showing the Camera Control overlay with its control's label in the viewport in portrait and landscape orientations on iPhone.](https://docs-assets.developer.apple.com/published/efa0584ce5fa07cd540174b71ef59d6d/camera-control-portrait-landscape-orientation%402x.png) + +**Minimize distractions in the viewfinder.** When capturing a photo or video, people appreciate a large preview image with as few visual distractions as possible. Avoid duplicating controls, like sliders and toggles, in your UI and the overlay when the system displays the overlay. + +![A partial screenshot showing an example of the Camera Control overlay with UI elements removed from the capture viewport.](https://docs-assets.developer.apple.com/published/9cd4da3793671dd837c50d855ab265df/camera-control-screen-ui-good-example%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)Keep UI minimal. + +![A partial screenshot showing an example of the Camera Control overlay with UI elements duplicated in the capture viewport.](https://docs-assets.developer.apple.com/published/eb4a1bc88b0f16c3074d57f8ff3afb9f/camera-control-screen-ui-bad-example%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)Avoid showing controls in the viewfinder that people access in the overlay. + +**Enable or disable controls depending on the camera mode.** For example, disable video controls when taking photos. The overlay supports multiple controls, but you can’t remove or add controls at runtime. + +**Consider how to arrange your controls.** Order commonly used controls toward the middle to allow quick access, and include lesser used controls on either side. When a person lightly presses the Camera Control to open the overlay again, the system remembers the last control they used in your app. + +**Allow people to use the Camera Control to launch your experience from anywhere.** Create a locked camera capture extension that lets people configure the Camera Control to launch your app’s camera experience from their locked device, the Home Screen, or from within other apps. For guidance, see [Camera experiences on a locked device](https://developer.apple.com/design/human-interface-guidelines/controls#Camera-experiences-on-a-locked-device). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/camera-control#Platform-considerations) + + _Not supported in iPadOS, macOS, watchOS, tvOS, or visionOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/camera-control#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/camera-control#Related) + +[SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) + +[Controls](https://developer.apple.com/design/human-interface-guidelines/controls) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/camera-control#Developer-documentation) + +[Enhancing your app experience with the Camera Control](https://developer.apple.com/documentation/AVFoundation/enhancing-your-app-experience-with-the-camera-control) — AVFoundation + +[`AVCaptureControl`](https://developer.apple.com/documentation/AVFoundation/AVCaptureControl) — AVFoundation + +[LockedCameraCapture](https://developer.apple.com/documentation/LockedCameraCapture) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/camera-control#Change-log) + +Date| Changes +---|--- +September 9, 2024| New page. + diff --git a/skills/hig-inputs/references/digital-crown.md b/skills/hig-inputs/references/digital-crown.md new file mode 100644 index 00000000..26c1dd02 --- /dev/null +++ b/skills/hig-inputs/references/digital-crown.md @@ -0,0 +1,83 @@ +--- +title: "Digital Crown | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/digital-crown + +# Digital Crown + +The Digital Crown is an important hardware input for Apple Vision Pro and Apple Watch. + +![A sketch of a curved arrow beside a Digital Crown, that suggests turning the Digital Crown. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/3b12fdaf898877ad12d62535cea6d032/inputs-digital-crown-intro%402x.png) + +On both Apple Vision Pro and Apple Watch, people can use the Digital Crown to interact with the system; on Apple Watch, people can also use the Digital Crown to interact with apps. + +![A close-up photograph of a person's head wearing Apple Vision Pro, with their index finger pointing at the Digital Crown.](https://docs-assets.developer.apple.com/published/b421afd55a6401eeacedaa088b02d909/digital-crown-apple-vision-pro%402x.png)The Digital Crown on Apple Vision Pro + +![A close-up photograph of Apple Watch, shown at an angle, with the Digital Crown prominently featured at the center of the image.](https://docs-assets.developer.apple.com/published/b557ec51bcbcaac70485ca87eda59c40/digital-crown-apple-watch%402x.png)The Digital Crown on Apple Watch + +## [Apple Vision Pro](https://developer.apple.com/design/human-interface-guidelines/digital-crown#Apple-Vision-Pro) + +On Apple Vision Pro, people use the Digital Crown to: + + * Adjust volume + + * Adjust the amount of immersion in a portal, an Environment, or an app or game running in a Full Space (for guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences)) + + * Recenter content so it’s in front of them + + * Open Accessibility settings + + * Exit an app and return to the Home View + + + + +## [Apple Watch](https://developer.apple.com/design/human-interface-guidelines/digital-crown#Apple-Watch) + +As people turn the Digital Crown, it generates information you can use to enhance or facilitate interactions with your app, like scrolling or operating standard or custom controls. + +Starting with watchOS 10, the Digital Crown takes on an elevated role as the primary input for navigation. On the watch face, people turn the Digital Crown to view widgets in the Smart Stack, and on the Home Screen, people use it to move vertically through their collection of apps. Within apps, people turn the Digital Crown to switch between vertically paginated tabs, and to scroll through list views and variable height pages. + +Beyond its use for navigation, turning the Digital Crown generates information you can use to enhance or facilitate interactions with your app, such as inspecting data or operating standard or custom controls. + +Note + +Apps don’t respond to presses on the Digital Crown because watchOS reserves these interactions for system-provided functionality like revealing the Home Screen. + +Most Apple Watch models provide haptic feedback for the Digital Crown, which gives people a more tactile experience as they scroll through content. By default, the system provides linear haptic _detents_ — or taps — as people turn the Digital Crown a specific distance. Some system controls, like table views, provide detents as new items scroll onto the screen. + +**Anchor your app’s navigation to the Digital Crown.** Starting with watchOS 10, turning the Digital Crown is the main way people navigate within and between apps. List, tab, and scroll views are vertically oriented, allowing people to use the Digital Crown to easily move between the important elements of your app’s interface. When anchoring interactions to the Digital Crown, also be sure to back them up with corresponding touch screen interactions. + +**Consider using the Digital Crown to inspect data in contexts where navigation isn’t necessary.** In contexts where the Digital Crown doesn’t need to navigate through lists or between pages, it’s a great tool to inspect data in your app. For example, in World Clock, turning the Digital Crown advances the time of day at a selected location, allowing people to compare various times of day to their current time. + +**Provide visual feedback in response to Digital Crown interactions.** For example, pickers change the currently displayed value as people use the Digital Crown. If you track turns directly, use this data to update your interface programmatically. If you don’t provide visual feedback, people are likely to assume that turning the Digital Crown has no effect in your app. + +**Update your interface to match the speed with which people turn the Digital Crown.** People expect turning the Digital Crown to give them precise control over an interface, so it works well to use this speed to determine the speed at which you make changes. Avoid updating content at a rate that makes it difficult for people to select values. + +**Use the default haptic feedback when it makes sense in your app.** If haptic feedback doesn’t feel right in the context of your app — for example, if the default detents don’t match your app’s animation — turn off the detents. You can also adjust the haptic feedback behavior for tables, letting them use linear detents instead of row-based detents. For example, if your table has rows with significantly different heights, linear detents may give people a more consistent experience. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/digital-crown#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, or tvOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/digital-crown#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/digital-crown#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +[Action button](https://developer.apple.com/design/human-interface-guidelines/action-button) + +[Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/digital-crown#Developer-documentation) + +[`WKCrownDelegate`](https://developer.apple.com/documentation/WatchKit/WKCrownDelegate) — WatchKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/digital-crown#Change-log) + +Date| Changes +---|--- +December 5, 2023| Added artwork for Apple Vision Pro and Apple Watch, and clarified that visionOS apps don’t receive direct information from the Digital Crown. +June 21, 2023| Updated to include guidance for visionOS. +June 5, 2023| Added guidelines emphasizing the central role of the Digital Crown for navigation. + diff --git a/skills/hig-inputs/references/eyes.md b/skills/hig-inputs/references/eyes.md new file mode 100644 index 00000000..0b12d1e4 --- /dev/null +++ b/skills/hig-inputs/references/eyes.md @@ -0,0 +1,120 @@ +--- +title: "Eyes | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/eyes + +# Eyes + +In visionOS, people look at a virtual object to identify it as a target they can interact with. + +![A sketch of a human eye. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/126393ded1c486236fc7a9feabea30ea/inputs-eyes-intro%402x.png) + +When people look at an interactive element, visionOS highlights it, providing visual feedback that helps them confirm the item is one they want. The visual feedback, or _hover effect_ , shows people that they can use an [indirect gesture](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS) like tap to interact with the element. + +Video with custom controls. + +Content description: A recording of the Settings app showing the hover effect appear on several individual settings in turn as someone's eyes move from one to another. + +Play + +In some cases, the system can automatically display an expanded view of a component after people look at it. For example, when people look at a tab bar, the entire bar resizes to reveal text labels next to each tab. In this scenario, an individual tab also highlights before the tab bar expansion to let people select it before revealing the labels. Another example is a button that can reveal a tooltip when people look at it. + +Important + +To 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](https://developer.apple.com/documentation/visionOS/adopting-best-practices-for-privacy). + +visionOS also supports _focus effects_ that help people navigate apps and the system using a connected input device like a keyboard or game controller. Focus effects are unrelated to the hover effect; to learn more, see [Focus and selection](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/eyes#Best-practices) + +**Always give people multiple ways to interact with your app.** Design your app to support the accessibility features people use to personalize the ways they interact with their devices. For guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**Design for visual comfort.** Help people accomplish their primary task by making sure that the objects they need to use are within their [field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view). When your app or game is running in the Shared Space or a Full Space, the system automatically places the first window or volume people open in a convenient location in front of them. While running in a Full Space, your app or game can also request access to information about a person’s head pose to help you place 3D content appropriately. In all cases, you can improve the visual comfort of your experience when you avoid requiring people to make multiple quick eye adjustments, either over a large area or through multiple levels of depth. For guidance, see [Depth](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Depth). + +**Place content at a comfortable viewing distance.** For example, to help people remain comfortable while they read or engage with content over time, aim to place it at least one meter away. In general, you don’t want to place content very close to people unless they’ll view or interact with it for only a little while. + +**Prefer using standard UI components.** System-provided components respond consistently when people look at them. If your custom components use different visual cues to provide visual feedback, it can be difficult for people to learn and remember how these components work. + +## [Making items easy to see](https://developer.apple.com/design/human-interface-guidelines/eyes#Making-items-easy-to-see) + +**Minimize visual distractions.** When there’s a lot of visual noise, it can be difficult for people to find the object they’re looking for. Visual movement can be even more distracting: When people sense movement — especially in their peripheral vision — they tend to respond automatically by looking at it, making it hard to keep looking at the object they’re interested in. For example, revealing content near a button people are looking at can cause them to involuntarily look at the new content instead of the button. + +**Make it easy for people to look at an item by providing enough space around it.** Because eyes naturally tend to make small, quick adjustments in direction even while people are looking at one place, crowding UI objects together can make it difficult for people to look at one of them without jumping to another. You can help ensure that there’s enough space between interactive items by using a margin of at least 16 points around the bounds of each item or by placing items so that their centers are always at least 60 points apart. For additional layout guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) and [Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout). + +**Avoid using a repeating pattern or texture that fills the field of view.** In some cases, people’s eyes can lock onto different elements in a pattern or texture, making the elements appear to have different depths. To avoid this effect, consider using the pattern in a smaller area. + +## [Encouraging interaction](https://developer.apple.com/design/human-interface-guidelines/eyes#Encouraging-interaction) + +**Consider using subtle visual cues to encourage people to look at the item they’re most likely to want.** For example, it often works well to place the item near the center of the field of view or use techniques like gentle motion, increased contrast, or variations in color or scale to draw people’s attention. In general, prefer cues that are noticeable without being flashy or harsh. + +**In general, give an interactive item a rounded shape.** People’s eyes tend to be drawn toward the corners in a shape, making it difficult to keep looking at the shape’s center. The more rounded an item’s shape, the easier it is for people to use their eyes to target it. + +![A square button.](https://docs-assets.developer.apple.com/published/d60c5b225c91f041c5ef7e273a9219b6/visionos-eyes-sharp-button-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![A circular button.](https://docs-assets.developer.apple.com/published/61afcfc99cebef8a0feae23fc5803edc/visionos-eyes-rounded-button-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**If you create an interactive component that consists of more than one element, be sure to provide an overall containing shape that visionOS can highlight.** For example, if an image and a label below it combine to act as one interactive component, you need to define a custom region that encompasses both elements, allowing visionOS to highlight the entire region when people look at either element. + +## [Custom hover effects](https://developer.apple.com/design/human-interface-guidelines/eyes#Custom-hover-effects) + +When it makes sense in your app or game, you can design a hover effect that animates in a custom way when people look at an element, including system-provided or custom UI elements and RealityKit entities. You can use a custom hover effect to replace or augment a standard effect. + +Before you start designing custom hover effects, it’s important to understand how they work. To enable a custom hover effect for an element, you create two states or appearances for it: one that shows the custom hover effect and one that doesn’t. When someone looks at the element in your app or game, the system applies your predefined hover effect in a process that’s outside of your software’s process. This means that you don’t know when the system applies a custom hover effect or what state the element is in at that moment. The out-of-process nature of a custom hover effect also means that it can’t run code that requires knowing when people are looking at the element. + +As an example that shows what a custom hover effect can and can’t do, consider a photo-browsing app where a photo’s custom effect displays a different symbol depending on whether people have added the photo to Favorites. The app specifies the appropriate symbol for a photo’s custom hover effect and the system displays the effect if people look at the photo. However, the hover effect can’t perform the favoriting action because the system doesn’t tell the app when someone is looking at the photo. + +**Prefer using a custom hover effect to emphasize or enhance a special moment in your experience.** People are accustomed to the standard hover effects that provide visual feedback or, in the case of tab bars or tooltips, additional information, so a custom hover effect can be especially noticeable. Adding too many custom hover effects — or using them when standard effects are sufficient — can dilute the impact of your design, distract people from their task, and even cause visual discomfort. + +**Choose the right delay.** An element’s custom hover effect can appear instantly, after a short delay, or after a slightly longer delay, depending on how you expect people to interact with the element. + + * **No delay (default).** A custom hover effect that appears without delay tends to be especially useful when the effect is subtle or invites interaction, like when a knob appears on a slider. + + * **Short delay.** Consider using a short delay to let people look at an element and quickly interact with it without waiting for the effect to appear; for example, the expansion of tabs in a tab bar works this way. + + * **Long delay.** If your custom hover effect shows additional information, like when a tooltip appears below a button, a slightly longer delay can work well because most people won’t need to view the additional information every time. + + + + +**Aim to keep one or more of the element’s primary views unchanged in both states of a custom hover effect.** When at least one primary view remains constant during a hover effect’s animation, it provides visual stability that can help people follow the element’s transition. If all of an element’s views move or change during a custom hover effect, it can disorient people and make them lose track of what’s happening. + +**Thoroughly test custom hover effects.** Testing is the only way to determine whether a custom hover effect looks good, responds appropriately, and makes your experience feel alive without distracting people. Aim to test your custom hover effects while wearing Apple Vision Pro so you can develop intuition about how to use them to enhance your experience. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/eyes#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, tvOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/eyes#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/eyes#Related) + +[Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences) + +[Gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) + +[Spatial layout](https://developer.apple.com/design/human-interface-guidelines/spatial-layout) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/eyes#Developer-documentation) + +[Adopting best practices for privacy and user preferences](https://developer.apple.com/documentation/visionOS/adopting-best-practices-for-privacy) — visionOS + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/eyes#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/CA8CE5A1-B113-403F-BCB7-87871B4BBB52/10053_wide_250x141_1x.jpg) Design hover interactions for visionOS ](https://developer.apple.com/videos/play/wwdc2025/303) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/C6CDCC79-CCD0-4D2F-A4D1-8FC70DC663DB/8127_wide_250x141_1x.jpg) Design for spatial input ](https://developer.apple.com/videos/play/wwdc2023/10073) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/2C47B638-090D-4CBB-9E9E-EBE8114536D9/8132_wide_250x141_1x.jpg) Design considerations for vision and motion ](https://developer.apple.com/videos/play/wwdc2023/10078) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/eyes#Change-log) + +Date| Changes +---|--- +June 10, 2024| Added guidance for custom hover effects. +March 29, 2024| Added artwork showing the visionOS hover effect. +October 24, 2023| Clarified the difference between focus effects and the visionOS hover effect. +June 21, 2023| New page. + diff --git a/skills/hig-inputs/references/focus-and-selection.md b/skills/hig-inputs/references/focus-and-selection.md new file mode 100644 index 00000000..d1e8518c --- /dev/null +++ b/skills/hig-inputs/references/focus-and-selection.md @@ -0,0 +1,120 @@ +--- +title: "Focus and selection | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/focus-and-selection + +# Focus and selection + +Focus helps people visually confirm the object that their interaction targets. + +![A sketch of a frame around a circular interface element, suggesting locking focus on an object. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/13b5befef4936f31ce74db6aa05b7a0e/inputs-focus-and-selection-intro%402x.png) + +Focus supports simplified, component-based navigation. Using inputs like a remote, game controller, or keyboard, people bring focus to the components they want to interact with. + +In many cases, focusing an item also selects it. The exception is when automatic selection might cause a distracting context shift, like opening a new view. In tvOS, for example, people use the remote to move focus from item to item as they seek the one they want, but because selecting a focused item opens or activates it, selection requires a separate gesture. + +Different platforms communicate focus in different ways. For example, iPadOS and macOS show focus by drawing a ring around an item or highlighting it; tvOS generally uses the [parallax effect](https://developer.apple.com/design/human-interface-guidelines/images#Parallax-effect) to give the focused item an appearance of depth and liveliness. The combination of focus effects and interactions is sometimes called a _focus system_ or _focus model_. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#Best-practices) + +**Rely on system-provided focus effects.** System-defined focus effects are precisely tuned to complement interactions with Apple devices, providing experiences that feel responsive, fluid, and lifelike. Incorporating system-provided focus behaviors gives your app consistency and predictability, helping people understand it quickly. Consider creating custom focus effects only if it’s absolutely necessary. + +**Avoid changing focus without people’s interaction.** People rely on the focus system to help them know where they are in your app. If you change focus without their interaction, people have to spend time finding the newly focused item, delaying their current task. The exception is when people are moving focus using an input device that lets them make discrete, directional movements — like a keyboard, remote, or game controller — and a previously focused item disappears. In this scenario, there are only a small number of items within one discrete step of the previously focused item, so moving focus to one of these remaining items ensures that the focus indicator is in a location people can easily find. When people aren’t moving focus by using such an input device, you can’t predict the item they’ll target next, so it’s generally best to simply hide the focus indicator when the focused object disappears. + +**Be consistent with the platform as you help people bring focus to items in your app.** For example, in iPadOS and macOS, a full keyboard access mode helps people use the keyboard to reach every control, so you only need to support focus for content elements like list items, text fields, and search fields, and not for controls like buttons, sliders, and toggles. In contrast, tvOS users rely on using directional gestures on a remote or game controller (or pressing the arrow keys on an attached keyboard) to reach every onscreen element, so you need to make sure that people can bring focus to every element in your app. + +**Indicate focus using visual appearances that are consistent with the platform.** For example, consider a window that contains a list of items. In iPadOS and macOS, the system draws focused list items using white text and a background highlight that matches the app’s accent color, drawing unfocused items using the standard text color and a gray background highlight (for developer guidance, see [`UICollectionView`](https://developer.apple.com/documentation/UIKit/UICollectionView) and [`NSTableView`](https://developer.apple.com/documentation/AppKit/NSTableView)). + +**In general, use a focus ring for a text or search field, but use a highlight in a list or collection.** Although you can use a focus ring to draw attention to an item that fills a cell, like a photo, it’s usually easier for people to view lists and collections when an entire row is highlighted. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#Platform-considerations) + + _Not supported in iOS or watchOS._ + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#iPadOS) + +iPadOS 15 and later defines a focus system that supports keyboard interactions for navigating text fields, text views, and sidebars, in addition to various types of collection views and other custom views in your app. + +The iPadOS and tvOS focus systems are similar. People perform actions by moving a focus indicator to an item and then selecting it (for guidance, see [tvOS](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#tvOS)). Although the underlying system is the same, the user experiences are a little different. tvOS uses _directional focus_ , which means people can use the same interaction — that is, swiping the Siri Remote or using only the arrow keys on a connected keyboard — to navigate to every onscreen component. In contrast, iPadOS defines _focus groups_ , which represent specific areas within an app, like a sidebar, grid, or list. Using focus groups, iPadOS can support two different keyboard interactions. + + * Pressing the Tab key moves focus among focus groups, letting people navigate to sidebars, grids, and other app areas. + + * Pressing an arrow key supports a directional focus interaction that’s similar to tvOS, but limited to navigation among items in the same focus group. For example, people can use an arrow key to move through the items in a list or a sidebar. + + + + +Onscreen components can indicate focus by using the halo effect or the highlighted appearance. + +The _halo_ focus effect — also known as the _focus ring_ — displays a customizable outline around the component. You can apply the halo effect to custom views and to fully opaque content within a collection or list cell, such as an image. + +![An illustration of a collection view of photos showing the standard halo effect that outlines the focused photo.](https://docs-assets.developer.apple.com/published/2bfe6fedc5a6a8ecf6d7e74e9492a096/focus-and-selection-halo-focus-effect%402x.png) + +**Customize the halo focus effect when necessary.** By default, the system uses an item’s shape to infer the shape of its halo. If the system-provided halo doesn’t give you the appearance you want, you can refine it to match contours like rounded corners or shapes defined by Bézier paths. You can also adjust a halo’s position if another component occludes or clips it. For example, you might need to ensure that a badge appears above the halo or that a parent view doesn’t clip it. For developer guidance, see [`UIFocusHaloEffect`](https://developer.apple.com/documentation/UIKit/UIFocusHaloEffect). + +![An illustration of a collection view of photos showing a rounded-rectangle halo effect that outlines the focused photo.](https://docs-assets.developer.apple.com/published/1a84f872d0624355e89fa03b357ddd13/focus-and-selection-customized-halo%402x.png) + +The _highlighted_ appearance — in which the component’s text uses the app’s accent color — also indicates focus, but it’s not a focus effect. The highlight appearance occurs automatically when people select a collection view cell on which you’ve set content configurations (for developer guidance, see [`UICollectionViewCell`](https://developer.apple.com/documentation/UIKit/UICollectionViewCell)). + +![An illustration of a list of menu items with the second item highlighted. The item's title and icon are tinted with a red accent color.](https://docs-assets.developer.apple.com/published/01261865c38379fa118f16057a54f23e/focus-and-selection-highlighted-appearance%402x.png) + +**Ensure that focus moves through your custom views in ways that make sense.** As people continue pressing the Tab key, focus moves through focus groups in reading order: leading to trailing, and top to bottom. Although focus moves through system-provided views in ways that people expect, you might need to adjust the order in which the focus system visits your custom views. For example, if you want focus to move down through a vertical stack of custom views before it moves in the trailing direction to the next view, you need to identify the stack container as a single focus group. For developer guidance, see [`focusGroupIdentifier`](https://developer.apple.com/documentation/UIKit/UIFocusEnvironment/focusGroupIdentifier). + +**Adjust the priority of an item to reflect its importance within a focus group.** When a group receives focus, its _primary item_ automatically receives focus too, making it easy for people to select the item they’re most likely to want. You can make an item primary by increasing its priority. For developer guidance, see [`UIFocusGroupPriority`](https://developer.apple.com/documentation/UIKit/UIFocusGroupPriority). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#tvOS) + +**In a full-screen experience, let people use gestures to interact with the content, not to move focus.** When an item displays in full screen, it doesn’t show focus, so people naturally assume that their gestures will affect the object, and not its focus state. + +**Avoid displaying a pointer.** People expect to navigate a fixed number of items by changing focus, not by trying to drag a tiny pointer around a huge screen. While free-form movement might make sense during gameplay, such as when looking for a hidden object or flying a plane, use the focus model when people navigate menus and other interface elements. If your app requires a pointer, make sure it’s highly visible and feels integrated with your experience. + +**Design your interface to accommodate components in various focus states.** In tvOS, focusable items can have up to five different states, each of which is visually distinct. Because focusing an item often increases its scale, you need to supply assets for the larger, focused size to ensure they always look sharp, and you need to make sure the larger item doesn’t crowd the surrounding interface. + +State| Description +---|--- +![An image of an unfocused button on top of a photograph. A small drop shadow makes it appear very close to the content behind it, with a translucent background infused by the colors of the content, and a high-contrast text color.](https://docs-assets.developer.apple.com/published/bfc53c88dc7a84a9ca45d43d8f7fb550/focus-and-selection-state-unfocused%402x.png)| The viewer hasn’t brought focus to the item. Unfocused items appear less prominent than focused items. +![An image of a focused button on top of a photograph. It’s larger than an unfocused button, and a drop shadow makes it appear farther away from the content behind it, with an opaque white background and a black text label.](https://docs-assets.developer.apple.com/published/882b1286aa16b7a8d4a6367778a984b9/focus-and-selection-state-focused%402x.png)| The viewer brings focus to the item. A focused item visually stands out from the other onscreen content through elevation to the foreground, illumination, and animation. +![An image of a highlighted button on top of a photograph. It’s the same size as an unfocused button, and a drop shadow makes it appear a little farther away from the surface of the content behind it, with an opaque white background and a black text label.](https://docs-assets.developer.apple.com/published/d5388fe044717ba970895f33bdbebe3c/focus-and-selection-state-highlighted%402x.png)| The viewer chooses the focused item. A focused item provides instant visual feedback when people choose it. For example, a button might briefly invert its colors and animate before it transitions to its selected appearance. +![An image of a selected button on top of a photograph. It’s the same size as an unfocused button, and a small drop shadow makes it appear very close to the content behind it, with an opaque white background and a black text label.](https://docs-assets.developer.apple.com/published/ea6520ec5576b19ad7952c35a28c2dfc/focus-and-selection-state-selected%402x.png)| The viewer has chosen or activated the item in some way. For example, a heart-shaped button that people can use to favorite a photo might appear filled in the selected state and empty in the deselected state. +![An image of an unavailable button on top of a photograph. It’s the same size as an unfocused button. It lacks a drop shadow and appears to rest directly on the content behind it, with a translucent background tinted by the the colors of nearby content, and a low-contrast text color.](https://docs-assets.developer.apple.com/published/c1d9c327cbefe45ef0aeef12b93b956c/focus-and-selection-state-unavailable%402x.png)| The viewer can’t bring focus to the item or choose it. An unavailable item appears inactive. + +For developer guidance, see [Adding user-focusable elements to a tvOS app](https://developer.apple.com/documentation/UIKit/adding-user-focusable-elements-to-a-tvos-app). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#visionOS) + +visionOS supports the same focus system as in iPadOS and tvOS, letting people use a connected input device like a keyboard or game controller to interact with apps and the system. + +Note + +When 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](https://developer.apple.com/design/human-interface-guidelines/eyes)). The hover effect isn’t related to the focus system. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#Related) + +[Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes) + +[Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#Developer-documentation) + +[Focus Attributes](https://developer.apple.com/documentation/TVML/focus-attributes) — TVML + +[Focus-based navigation](https://developer.apple.com/documentation/UIKit/focus-based-navigation) — UIKit + +[About focus interactions for Apple TV](https://developer.apple.com/documentation/UIKit/about-focus-interactions-for-apple-tv) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/C6CDCC79-CCD0-4D2F-A4D1-8FC70DC663DB/8127_wide_250x141_1x.jpg) Design for spatial input ](https://developer.apple.com/videos/play/wwdc2023/10073) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/38E4EE32-29B5-4478-B8B6-35B8ACA67B16/8130_wide_250x141_1x.jpg) Design for spatial user interfaces ](https://developer.apple.com/videos/play/wwdc2023/10076) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/F9A980A7-B00A-4856-9172-FDB610A419E5/3509_wide_250x141_1x.jpg) Design for the iPadOS pointer ](https://developer.apple.com/videos/play/wwdc2020/10640) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#Change-log) + +Date| Changes +---|--- +October 24, 2023| Clarified the difference between focus effects and the visionOS hover effect. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-inputs/references/game-controls.md b/skills/hig-inputs/references/game-controls.md new file mode 100644 index 00000000..afdb6f95 --- /dev/null +++ b/skills/hig-inputs/references/game-controls.md @@ -0,0 +1,156 @@ +--- +title: "Game controls | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/game-controls + +# Game controls + +Precise, intuitive game controls enhance gameplay and can increase a player’s immersion in the game. + +![A sketch of a D-pad control from a game controller, suggesting gameplay. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b6c5b8cb6c62c9dd9f5e59ae745d6465/inputs-game-controls-intro%402x.png) + +On Apple platforms, a game can support input from physical game controllers or default system interactions, like touch, a remote, or a mouse and keyboard. Players might prefer to use physical game controllers, but there are two important reasons to also support a platform’s default interaction methods: + + * Even though all platforms except watchOS support physical game controllers, not every player might have access to one. + + * Players appreciate games that let them use the platform interaction method they’re most familiar with. + + + + +To reach the widest audience and provide the best experience for each platform, keep these factors in mind when choosing the input methods to support. + +## [Touch controls](https://developer.apple.com/design/human-interface-guidelines/game-controls#Touch-controls) + +For iOS and iPadOS games, supporting touch interaction means that you can provide virtual controls on top of game content while also letting players interact with game elements by touching them directly. You can use the [Touch Controller](https://developer.apple.com/documentation/TouchController) framework to add these virtual controls to your game. Keep the following guidelines in mind to create an enjoyable touch control experience. + +**Determine whether it makes sense to display virtual controls on top of game content.** In general, virtual game controls benefit games that offer a large number of actions or require players to control movement. However, sometimes gameplay is more immersive and effective when players can interact directly with in-game objects. Look for opportunities to reduce the amount of virtual controls that overlap your game content by associating actions with in-game gestures instead. For example, consider letting players tap objects to select them instead of adding a virtual selection button. + +**Place virtual buttons where they’re easy to access.** Take into account the device’s boundaries and [safe areas](https://developer.apple.com/design/human-interface-guidelines/layout#Guides-and-safe-areas) as well as comfortable locations for controls. Make sure to position buttons where they don’t overlap system features like the Home indicator or Dynamic Island on iPhone. Place frequently used buttons near a player’s thumb, avoiding the circular regions where players expect movement and camera input to happen. Place secondary controls, like menus, at the top of the screen. + +![A graphic that shows ideal placement for touch controls for an iPhone in landscape orientation.](https://docs-assets.developer.apple.com/published/dd0cd40a5b38af26ea97072ecf987b24/game-controls-touch-input-heat-map%402x.png) + +Placing virtual controls within reach of people’s thumbs can make your game more comfortable to play. + +**Make sure controls are large enough.** Make sure frequently used controls are a minimum size of 44x44 pt, and less important controls, such as menus, are a minimum size of 28x28 pt to accommodate people’s fingers. + +**Always include visible and tactile press states.** A virtual control feels unresponsive without a visual and physical press state. Help players understand when they successfully interact with a button by adding a visual press state effect, such as a glow, that they can see even when their finger is covering the control. Combine this press state with sound and haptics to enhance the feeling of feedback. For guidance, see [Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics). + +![A right hand holding an iPhone in landscape orientation. The thumb is pressing down on a virtual button, and the button indicates its press state by increasing its opacity and showing a glow effect around it.](https://docs-assets.developer.apple.com/published/7e633e5b94444a3590ce03fee0d5c3df/game-controls-press-state%402x.png) + +**Use symbols that communicate the actions they perform.** Choose artwork that visually represents the action each button performs, such as a graphic of a weapon to represent an attack. Avoid using abstract shapes or controller-based naming like A, X, or R1 as artwork, which makes it harder for players to understand and remember what specific controls do. + +![A game controller button with a graphic of a square mapping to a virtual button with a graphic of a hand making a gesture to pick up an object.](https://docs-assets.developer.apple.com/published/d5ba7d4086cc786b24b789e29bfd3507/game-controls-button-to-action%402x.png) + +**Show and hide virtual controls to reflect gameplay.** Take advantage of the dynamic nature of touch controls and adapt what controls players see onscreen depending on their context. You can hide controls when an action isn’t available or relevant, letting you reduce clutter and help players concentrate on what’s important. For example, consider hiding movement controls until a player touches the screen to reduce the amount of UI overlapping your game content. + + * Visible control + * Hidden control + + + +![A graphic that shows gameplay with a virtual control to move the character that's more visible while the character is moving.](https://docs-assets.developer.apple.com/published/2c9a0444ff10b37e8e5b54a9036d482e/game-controls-thumbstick-in-motion%402x.png) + +When the thumbstick moves to the right, it becomes more visible and shows a highlight to indicate the movement direction. + +![A graphic that shows gameplay with a virtual control to move the character that's less visible while the character is at rest.](https://docs-assets.developer.apple.com/published/8feb4b819cccdf9a74fa7c3ccd5d6e42/game-controls-thumbstick-at-rest%402x.png) + +When the thumbstick is at rest, the virtual control fades to show it’s not in use. + +**Combine functionality into a single control.** Consider redesigning game mechanics that require players to press multiple buttons at the same time or in a sequence. Leverage gestures such as double tap and touch and hold to provide different variations of the same action, such as touch and hold to use a special powered up version of an attack. For multiple actions, such as walking or sprinting, consider combining the actions into a single control. + +![A graphic of a virtual button that supports both single tap and touch and hold gestures.](https://docs-assets.developer.apple.com/published/a92df74768951a55f0f4d406eedb6b4a/game-controls-power-up-action%402x.png) + +**Map movement and camera controls to predictable behavior.** Typically, players expect to control movement using the left side of their screen, and control camera direction using the right side of their screen. Maximize the amount of space that players can control both movement and the camera direction by using as large of an input area as possible. For movement control, opt to show a virtual thumbstick wherever the player lands their thumb instead of a static thumbstick position. For camera control, opt to use direct touch to pan the camera instead of a virtual thumbstick. + +![A graphic that shows placement for movement controls on the left side of the screen, and placement for camera controls on the right side of the screen.](https://docs-assets.developer.apple.com/published/7bc00774e35dd1839091df6f8c16a830/game-controls-camera-thumbstick-zones%402x.png) + +## [Physical controllers](https://developer.apple.com/design/human-interface-guidelines/game-controls#Physical-controllers) + +**Support the platform’s default interaction method.** A game controller is an optional purchase, but every iPhone and iPad has a touchscreen, every Mac has a keyboard and a trackpad or mouse, every Apple TV has a remote, and every Apple Vision Pro responds to gestures people make with their eyes and hands. If you support game controllers, try to make sure there’s a fallback for using the platform’s default interaction method. For developer guidance, see [Adding touch controls to games that support game controllers in iOS](https://developer.apple.com/documentation/GameController/adding-touch-controls-to-games-that-support-game-controllers-in-ios). + +**Tell people about game controller requirements.** In tvOS and visionOS, you can require the use of a physical game controller. The App Store displays a “Game Controller Required” badge to help people identify such apps. Remember that people can open your game at any time, even without a connected controller. If your app requires a game controller, check for its presence and gracefully prompt people to connect one. For developer guidance, see [`GCRequiresControllerUserInteraction`](https://developer.apple.com/documentation/BundleResources/Information-Property-List/GCRequiresControllerUserInteraction). + +**Automatically detect whether a controller is paired.** Instead of having players manually set up a physical game controller, you can automatically detect whether a controller is paired and get its profile. For developer documentation, see [Game Controller](https://developer.apple.com/documentation/GameController). + +![An illustration of a game controller with callouts that indicate the locations of the controller’s triggers, shoulder buttons, directional pad, and thumbsticks.](https://docs-assets.developer.apple.com/published/40b70c72921efd92b91da0453533baaa/game-controls-controller-anatomy%402x.png) + +**Customize onscreen content to match the connected game controller.** To simplify your game’s code, the Game Controller framework assigns standard names to controller elements based on their placement, but the colors and symbols on an actual game controller may differ. Be sure to use the connected controller’s labeling scheme when referring to controls or displaying related content in your interface. For developer guidance, see [`GCControllerElement`](https://developer.apple.com/documentation/GameController/GCControllerElement). + +**Map controller buttons to expected UI behavior.** Outside of gameplay, players expect to navigate your game’s UI in a way that matches the familiar behavior of the platform they’re playing on. When not controlling gameplay, follow these conventions across all Apple platforms: + +Button| Expected behavior for UI +---|--- +A| Activates a control +B| Cancels an action or returns to previous screen +X| — +Y| — +Left shoulder| Navigates left to a different screen or section +Right shoulder| Navigates right to a different screen or section +Left trigger| — +Right trigger| — +Left/right thumbstick| Moves selection +Directional pad| Moves selection +Home/logo| Reserved for system controls +Menu| Opens game settings or pauses gameplay + +**Support multiple connected controllers.** If there are multiple controllers connected, use labels and glyphs that match the one that the player is actively using. If your game supports multiplayer, use the appropriate labels and symbols when referring to a specific player’s controller. If you need to refer to buttons on multiple controllers, consider listing them together. + +**Prefer using symbols, not text, to refer to game controller elements.** The Game Controller framework makes [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) available for most elements, including the buttons on various brands of game controllers. Using symbols instead of text descriptions can be especially helpful for players who aren’t experienced with controllers because it doesn’t require them to hunt for a specific button label during gameplay. + +![A screenshot of the SF Symbols app showing symbols in the Gaming category.](https://docs-assets.developer.apple.com/published/c76627e659aa17ab46a638437cc5d33c/game-controls-sf-symbols-gaming-category%402x.png) + +## [Keyboards](https://developer.apple.com/design/human-interface-guidelines/game-controls#Keyboards) + +Keyboard players appreciate using keyboard bindings to speed up their interactions with apps and games. + +**Prioritize single-key commands.** Single-key commands are generally easier and faster for players to perform, especially while they’re simultaneously using a mouse or trackpad. For example, you might use the first letter of a menu item as a shortcut, such as I for Inventory or M for Map; you might also map the game’s main action to the Space bar, taking advantage of the key’s relatively large size. + +**Test key binding comfort game using an Apple keyboard.** For example, if a key binding uses the Control key (^) on a non-Apple keyboard, consider remapping it to the Command key (⌘) on an Apple keyboard. On Apple keyboards, the Command key is conveniently located next to the Space bar, making it especially easy to reach when players are using the W, A, S, and D keys. + +**Take the proximity of keys into account.** For example, if players navigate using the W, A, S, and D keys, consider using nearby keys to define other high-value commands. Similarly, if there’s a group of closely related actions, it can work well to map their bindings to keys that are physically close together, such as using the number keys for inventory categories. + +**Let players customize key bindings.** Although players tend to expect a reasonable set of defaults, many people need to customize a game’s key bindings for personal comfort and play style. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/game-controls#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or tvOS. Not supported in watchOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/game-controls#visionOS) + +**Match spatial game controller behavior to hand input.** In addition to supporting a wide array of wireless game controllers, your visionOS game can also support spatial game controllers such as PlayStation VR2 Sense controller. Allow players to interact with your game in a similar manner to how they interact using their hands. Specifically, support looking at an object and pressing the controller’s left or right trigger button to indirectly interact, or reaching out and pressing the left or right trigger button to directly interact. For more information, see [visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/game-controls#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/game-controls#Related) + +[Designing for games](https://developer.apple.com/design/human-interface-guidelines/designing-for-games) + +[Gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) + +[Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards) + +[Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/game-controls#Developer-documentation) + +[Create games for Apple platforms](https://developer.apple.com/games/) + +[Touch Controller](https://developer.apple.com/documentation/TouchController) + +[Game Controller](https://developer.apple.com/documentation/GameController) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/game-controls#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/2DB746B8-E0B0-4ED1-B250-902DB7A0F3E7/9196_wide_250x141_1x.jpg) Design advanced games for Apple platforms ](https://developer.apple.com/videos/play/wwdc2024/10085) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/AD3141F9-6984-4328-9388-551C8677F6A2/4973_wide_250x141_1x.jpg) Tap into virtual and physical game controllers ](https://developer.apple.com/videos/play/wwdc2021/10081) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/51863C09-0E96-4230-91A3-B85E950FBF3D/9205_wide_250x141_1x.jpg) Explore game input in visionOS ](https://developer.apple.com/videos/play/wwdc2024/10094) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/game-controls#Change-log) + +Date| Changes +---|--- +June 9, 2025| Updated touch control best practices, updated game controller mapping for UI, and added guidance for spatial game controller support in visionOS. +June 10, 2024| Added guidance for supporting touch controls and changed title from Game controllers. + diff --git a/skills/hig-inputs/references/gestures.md b/skills/hig-inputs/references/gestures.md new file mode 100644 index 00000000..5dd2b692 --- /dev/null +++ b/skills/hig-inputs/references/gestures.md @@ -0,0 +1,208 @@ +--- +title: "Gestures | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/gestures + +# Gestures + +A gesture is a physical motion that a person uses to directly affect an object in an app or game on their device. + +![A sketch of a pointing hand swiping in a curved motion toward the right, suggesting touch interaction with a device. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/21ef165b3e1da4255ee2a9a55796afc0/inputs-gestures-intro%402x.png) + +Depending on the device they’re using, people can make gestures on a touchscreen, in the air, or on a range of input devices such as a trackpad, mouse, remote, or game controller that includes a touch surface. + +Every platform supports basic gestures like tap, swipe, and drag. Although the precise movements that make up basic gestures can vary per platform and input device, people are familiar with the underlying functionality of these gestures and expect to use them everywhere. For a list of these gestures, see [Standard gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#Standard-gestures). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/gestures#Best-practices) + +**Give people more than one way to interact with your app.** People commonly prefer or need to use other inputs — such as their voice, keyboard, or Switch Control — to interact with their devices. Don’t assume that people can use a specific gesture to perform a given task. For guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**In general, respond to gestures in ways that are consistent with people’s expectations.** People expect most gestures to work the same regardless of their current context. For example, people expect tap to activate or select an object. Avoid using a familiar gesture like tap or swipe to perform an action that’s unique to your app; similarly, avoid creating a unique gesture to perform a standard action like activating a button or scrolling a long view. + +**Handle gestures as responsively as possible.** Useful gestures enhance the experience of direct manipulation and provide immediate feedback. As people perform a gesture in your app, provide feedback that helps them predict its results and, if necessary, communicates the extent and type of movement required to complete the action. + +**Indicate when a gesture isn’t available.** If you don’t clearly communicate why a gesture doesn’t work, people might think your app has frozen or they aren’t performing the gesture correctly, leading to frustration. For example, if someone tries to drag a locked object, the UI may not indicate that the object’s position has been locked; or if they try to activate an unavailable button, the button’s unavailable state may not be clearly distinct from its available state. + +## [Custom gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#Custom-gestures) + +**Add custom gestures only when necessary.** Custom gestures work best when you design them for specialized tasks that people perform frequently and that aren’t covered by existing gestures, like in a game or drawing app. If you decide to implement a custom gesture, make sure it’s: + + * Discoverable + + * Straightforward to perform + + * Distinct from other gestures + + * Not the only way to perform an important action in your app or game + + + + +**Make custom gestures easy to learn.** Offer moments in your app to help people quickly learn and perform custom gestures, and make sure to test your interactions in real use scenarios. If you’re finding it difficult to use simple language and graphics to describe a gesture, it may mean people will find the gesture difficult to learn and perform. + +**Use shortcut gestures to supplement standard gestures, not replace them.** While you may supply a custom gesture to quickly access parts of your app, people also need simple, familiar ways to navigate and perform actions, even if it means an extra tap or two. For example, in an app that supports navigation through a hierarchy of views, people expect to find a Back button in a top toolbar that lets them return to the previous view with a single tap. To help accelerate this action, many apps also offer a shortcut gesture — such as swiping from the side of a window or touchscreen — while continuing to provide the Back button. + +**Avoid conflicting with gestures that access system UI.** Several platforms offer gestures for accessing system behaviors, like edge swiping in watchOS or rolling your hand over to access system overlays in visionOS. It’s important to avoid defining custom gestures that might conflict with these interactions, as people expect these controls to work consistently. In specific circumstances within games or immersive experiences, developers can work around this area by deferring the system gesture. For more information, see the platform considerations for iOS, iPadOS, watchOS, and visionOS. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/gestures#Platform-considerations) + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/gestures#iOS-iPadOS) + +In addition to the [standard gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#Standard-gestures) supported in all platforms, iOS and iPadOS support a few other gestures that people expect. + +Gesture| Common action +---|--- +Three-finger swipe| Initiate undo (left swipe); initiate redo (right swipe). +Three-finger pinch| Copy selected text (pinch in); paste copied text (pinch out). +Four-finger swipe (iPadOS only)| Switch between apps. +Shake| Initiate undo; initiate redo. + +**Consider allowing simultaneous recognition of multiple gestures if it enhances the experience.** Although simultaneous gestures are unlikely to be useful in nongame apps, a game might include multiple onscreen controls — such as a joystick and firing buttons — that people can operate at the same time. For guidance on integrating touchscreen input with Apple Pencil input in your iPadOS app, see [Apple Pencil and Scribble](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/gestures#macOS) + +People primarily interact with macOS using a [keyboard](https://developer.apple.com/design/human-interface-guidelines/keyboards) and mouse. In addition, they can make [standard gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#Standard-gestures) on a Magic Trackpad, Magic Mouse, or a [game controller](https://developer.apple.com/design/human-interface-guidelines/game-controls) that includes a touch surface. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/gestures#tvOS) + +People expect to use [standard gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#Standard-gestures) to navigate tvOS apps and games with a compatible remote, Siri Remote, or [game controller](https://developer.apple.com/design/human-interface-guidelines/game-controls) that includes a touch surface. For guidance, see [Remotes](https://developer.apple.com/design/human-interface-guidelines/remotes). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS) + +visionOS supports two categories of gestures: indirect and direct. + +People use an _indirect_ gesture by looking at an object to target it, and then manipulating that object from a distance — indirectly — with their hands. For example, a person can look at a button to focus it and select it by quickly tapping their finger and thumb together. Indirect gestures are comfortable to perform at any distance, and let people quickly change focus between different objects and select items with minimal movement. + +Video with custom controls. + +Content description: A recording showing a closeup view of the top portion of a window in visionOS. A button in the window becomes highlighted. A picture-in-picture window is visible in the bottom-right corner of the recording. It shows a person's hand performing the indirect tap gesture. In response to the gesture, the highlighted button in the window activates. + +Play + +People use a _direct_ gesture to physically touch an interactive object. For example, people can directly type on the visionOS keyboard by tapping the virtual keys. Direct gestures work best when they are within reach. Because people may find it tiring to keep their arms raised for extended periods, direct gestures are best for infrequent use. visionOS also supports direct versions of all standard gestures, allowing people the choice to interact directly or indirectly with any standard component. + +Video with custom controls. + +Content description: A recording showing a table with a vertical stack of three virtual cubic blocks on it in visionOS. A person moves their hand toward the blocks from right to left, and their extended fingers touch and push aside the center block. The center block falls to the side, and the other block also tumbles onto the tabletop. + +Play + +Here are the standard direct gestures people use in visionOS; see [Specifications](https://developer.apple.com/design/human-interface-guidelines/gestures#Specifications) for a list of standard indirect gestures. + +Direct gesture| Common use +---|--- +Touch| Directly select or activate an object. +Touch and hold| Open a contextual menu. +Touch and drag| Move an object to a new location. +Double touch| Preview an object or file; select a word in an editing context. +Swipe| Reveal actions and controls; dismiss views; scroll. +With two hands, pinch and drag together or apart| Zoom in or out. +With two hands, pinch and drag in a circular motion| Rotate an object. + +**Support standard gestures everywhere you can.** For example, as soon as someone looks at an object in your app or game, tap is the first gesture they’re likely to make when they want to select or activate it. Even if you also support custom gestures, supporting standard gestures such as tap helps people get comfortable with your app or game quickly. + +**Offer both indirect and direct interactions when possible.** Prefer indirect gestures for UI and common components like buttons. Reserve direct gestures and custom gestures for objects that invite close-up interaction or specific motions in a game or interactive experience. + +**Avoid requiring specific body movements or positions for input.** Not all people can perform specific body movements or position themselves in certain ways at all times, whether due to disability, spatial constraints, or other environmental factors. If your experience requires movement, consider supporting alternative inputs to let people choose the interaction method that works best for them. + +#### [Designing custom gestures in visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#Designing-custom-gestures-in-visionOS) + +If you want to offer a specific interaction for your experience that people can’t perform using an existing system gesture, consider designing a custom gesture. To offer this type of interaction, your app needs to be running in a Full Space, and you must request people’s permission to access information about their hands. For developer guidance, see [Setting up access to ARKit data](https://developer.apple.com/documentation/visionOS/setting-up-access-to-arkit-data). + +![A screenshot of a person's hands performing a custom gesture, placing the two hands together to form a heart, while playing a visionOS game.](https://docs-assets.developer.apple.com/published/363ecbc8eeb441809f62ae935e13fbdc/visionos-custom-spatial-gesture-happy-beam%402x.png) + +**Prioritize comfort.** Continually test ergonomics of all interactions that require custom gestures. A custom interaction that requires people to keep their arms raised for even a little while can be physically tiring, and repeating very similar movements many times in succession can stress people’s muscles and joints. + +**Carefully consider complex custom gestures that involve multiple fingers or both hands.** People may not always have both hands available when using your app or game. If you require a more complex gesture for your experience, consider also offering an alternative that requires less movement. + +**Avoid custom gestures that require using a specific hand.** It can increase someone’s cognitive load if they need to remember which hand to use to trigger a custom gesture. It may also make your experience less welcoming to people with strong hand-dominance or limb differences. + +#### [Working with system overlays in visionOS](https://developer.apple.com/design/human-interface-guidelines/gestures#Working-with-system-overlays-in-visionOS) + +In visionOS 2 and later, people can look at the palm of one hand and use gestures to quickly access system overlays for Home and Control Center. These interactions are available systemwide, and are reserved solely for accessing system overlays. + +Note + +The 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. + +When designing apps and games that use custom gestures or anchor content to a person’s hands, it’s important to take interactions with the system overlays into consideration. + +**Reserve the area around a person’s hand for system overlays and their related gestures.** If possible, don’t anchor content to a person’s hands or wrists. If you’re designing a game that involves hand-anchored content, place it outside of the immediate area of someone’s hand to avoid colliding with the Home indicator. + +![An illustration of a person's open hand with the palm facing upward. A dashed circular line above the hand indicates the area reserved for system overlays.](https://docs-assets.developer.apple.com/published/de8c04a523a3e225c723c5c09c458e1c/visionos-hand-area-of-focus%402x.png)The area reserved for interacting with system overlays. + +![An illustration of a person's open hand with the palm facing upward. A button with a circle icon representing the Home indicator appears above the palm.](https://docs-assets.developer.apple.com/published/961d33f07da24b20848f3502d2cea134/visionos-spatial-gesture-home-indicator%402x.png)A person looks at their palm to reveal the Home indicator. + +![An illustration of a person's open hand with the palm facing downward. An overlay with the status bar appears above the hand.](https://docs-assets.developer.apple.com/published/f1d5a8816f65f35853ccd513355272d8/visionos-spatial-gesture-control-center%402x.png)A person turns their hand to reveal the status bar, and can tap to open Control Center. + +**Consider deferring the system overlay behavior when designing an immersive app or game.** In certain circumstances, you may not want the Home indicator to appear when someone looks at the palm of their hand. For example, a game that uses virtual hands or gloves may want to keep someone within the world of the story, even if they happen to look at their hands from different angles. In such cases, when your app is running in a Full Space, you can choose to require a tap to reveal the Home indicator instead. For developer guidance, see [`persistentSystemOverlays(_:)`](https://developer.apple.com/documentation/SwiftUI/View/persistentSystemOverlays\(_:\)). + +![An image of a person's open hand with the palm facing upward, shown from the person's perspective. A button with a circle icon representing the Home indicator appears above the palm. The image background shows the room that's the person's surroundings.](https://docs-assets.developer.apple.com/published/dc6b4a94633c063ddd432dcc8043cae3/gestures-default-home-indicator%402x.png)Default behavior in the Shared Space + +![An image of a person's open hand with the palm facing upward, shown from the person's perspective. A button with a circle icon representing the Home indicator appears above the palm. The image background shows a forest in a fully immersive space.](https://docs-assets.developer.apple.com/published/96cb708d391f1ab78a77d23c7f2e0442/gestures-home-indicator-in-immersive-space%402x.png)Default behavior in a Full Space + +![An image of a person's open hand wearing a bulky space suit glove, shown from the person's perspective. The palm faces upward, and no button appears above it. The image background shows a starry sky in a fully immersive space.](https://docs-assets.developer.apple.com/published/b978fe99b00df892890e1d194f704a83/gestures-fully-immersive-game-with-glove%402x.png)Deferred behavior in a Full Space + +Note + +Apps 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. + +**Use caution when designing custom gestures that involve a rolling motion of the hand, wrist, and forearm.** This specific motion is reserved for revealing system overlays. Since system overlays always display on top of app content and your app isn’t aware of when they’re visible, it’s important to test any custom gestures or content that might conflict. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/gestures#watchOS) + +#### [Double tap](https://developer.apple.com/design/human-interface-guidelines/gestures#Double-tap) + +In watchOS 11 and later, people can use the double-tap gesture to scroll through lists and scroll views, and to advance between vertical tab views. Additionally, you can specify a toggle or button as the primary action in your app, or in your widget or Live Activity when the system displays it in the Smart Stack. Double-tapping in a view with a primary action highlights the control and then performs the action. The system also supports double tap for custom actions that you offer in [notifications](https://developer.apple.com/design/human-interface-guidelines/notifications), where it acts on the first nondestructive action in the notification. + +**Avoid setting a primary action in views with lists, scroll views, or vertical tabs.** This conflicts with the default navigation behaviors that people expect when they double-tap. + +**Choose the button that people use most commonly as the primary action in a view.** Double tap is helpful in a nonscrolling view when it performs the action that people use the most. For example, in a media controls view, you could assign the primary action to the play/pause button. For developer guidance, see [`handGestureShortcut(_:isEnabled:)`](https://developer.apple.com/documentation/SwiftUI/View/handGestureShortcut\(_:isEnabled:\)) and [`primaryAction`](https://developer.apple.com/documentation/SwiftUI/HandGestureShortcut/primaryAction). + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/gestures#Specifications) + +### [Standard gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#Standard-gestures) + +The system provides APIs that support the familiar gestures people use with their devices, whether they use a touchscreen, an indirect gesture in visionOS, or an input device like a trackpad, mouse, remote, or game controller. For developer guidance, see [Gestures](https://developer.apple.com/documentation/SwiftUI/Gestures). + +Gesture| Supported in| Common action +---|---|--- +Tap| iOS, iPadOS, macOS, tvOS, visionOS, watchOS| Activate a control; select an item. +Swipe| iOS, iPadOS, macOS, tvOS, visionOS, watchOS| Reveal actions and controls; dismiss views; scroll. +Drag| iOS, iPadOS, macOS, tvOS, visionOS, watchOS| Move a UI element. +Touch (or pinch) and hold| iOS, iPadOS, tvOS, visionOS, watchOS| Reveal additional controls or functionality. +Double tap| iOS, iPadOS, macOS, tvOS, visionOS, watchOS| Zoom in; zoom out if already zoomed in; perform a primary action on Apple Watch Series 9 and Apple Watch Ultra 2. +Zoom| iOS, iPadOS, macOS, tvOS, visionOS| Zoom a view; magnify content. +Rotate| iOS, iPadOS, macOS, tvOS, visionOS| Rotate a selected item. + +For guidance on supporting additional gestures and button presses on specific input devices, see [Pointing devices](https://developer.apple.com/design/human-interface-guidelines/pointing-devices), [Remotes](https://developer.apple.com/design/human-interface-guidelines/remotes), and [Game controls](https://developer.apple.com/design/human-interface-guidelines/game-controls). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/gestures#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/gestures#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +[Eyes](https://developer.apple.com/design/human-interface-guidelines/eyes) + +[Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/gestures#Developer-documentation) + +[Gestures](https://developer.apple.com/documentation/SwiftUI/Gestures) — SwiftUI + +[`UITouch`](https://developer.apple.com/documentation/UIKit/UITouch) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/gestures#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/B38CC217-7635-48EF-B8C9-F7954F390CCE/9273_wide_250x141_1x.jpg) Enhance your UI animations and transitions ](https://developer.apple.com/videos/play/wwdc2024/10145) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/C6CDCC79-CCD0-4D2F-A4D1-8FC70DC663DB/8127_wide_250x141_1x.jpg) Design for spatial input ](https://developer.apple.com/videos/play/wwdc2023/10073) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/gestures#Change-log) + +Date| Changes +---|--- +September 9, 2024| Added guidance for working with system overlays in visionOS and made organizational updates. +September 15, 2023| Updated specifications to include double tap in watchOS. +June 21, 2023| Changed page title from Touchscreen gestures and updated to include guidance for visionOS. + diff --git a/skills/hig-inputs/references/gyro-and-accelerometer.md b/skills/hig-inputs/references/gyro-and-accelerometer.md new file mode 100644 index 00000000..ac65f94d --- /dev/null +++ b/skills/hig-inputs/references/gyro-and-accelerometer.md @@ -0,0 +1,40 @@ +--- +title: "Gyroscope and accelerometer | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer + +# Gyroscope and accelerometer + +On-device gyroscopes and accelerometers can supply data about a device’s movement in the physical world. + +![A sketch of a gyroscope, suggesting movement. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d095e989767ecf0537fa99b6ea46b50a/inputs-gyroscope-intro%402x.png) + +You can use accelerometer and gyroscope data to provide experiences based on real-time, motion-based information in apps and games that run in iOS, iPadOS, and watchOS. tvOS apps can use gyroscope data from the Siri Remote. For developer guidance, see [Core Motion](https://developer.apple.com/documentation/CoreMotion). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer#Best-practices) + +**Use motion data only to offer a tangible benefit to people.** For example, a fitness app might use the data to provide feedback about people’s activity and general health, and a game might use the data to enhance gameplay. Avoid gathering data simply to have the data. + +Important + +If 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. + +**Outside of active gameplay, avoid using accelerometers or gyroscopes for the direct manipulation of your interface.** Some motion-based gestures may be difficult to replicate precisely, may be physically challenging for some people to perform, and may affect battery usage. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer#Developer-documentation) + +[Getting processed device-motion data](https://developer.apple.com/documentation/CoreMotion/getting-processed-device-motion-data) — Core Motion + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/5077B5B0-643B-4E31-9C5E-6E766326D3F3/5225_wide_250x141_1x.jpg) Measure health with motion ](https://developer.apple.com/videos/play/wwdc2021/10287) + diff --git a/skills/hig-inputs/references/keyboards.md b/skills/hig-inputs/references/keyboards.md new file mode 100644 index 00000000..7e85e5df --- /dev/null +++ b/skills/hig-inputs/references/keyboards.md @@ -0,0 +1,234 @@ +--- +title: "Keyboards | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/keyboards + +# Keyboards + +A physical keyboard can be an essential input device for entering text, playing games, controlling apps, and more. + +![A sketch of a keyboard, suggesting keyboard input. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/041dcf36a378d11a3727a6ff04989365/inputs-keyboard-intro%402x.png) + +People can connect a physical keyboard to any device except Apple Watch. Mac users tend to use a physical keyboard all the time and iPad users often do. Many games work well with a physical keyboard, and people can prefer using one instead of a [virtual keyboard](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards) when entering a lot of text. + +Keyboard users often appreciate using keyboard shortcuts to speed up their interactions with apps and games. A _keyboard shortcut_ is a combination of a primary key and one or more modifier keys (Control, Option, Shift, and Command) that map to a specific command. A keyboard shortcut in a game — called a _key binding_ — often consists of a single key. + +Apple defines standard keyboard shortcuts to work consistently across the system and most apps, helping people transfer their knowledge to new experiences. Some apps define custom keyboard shortcuts for the app-specific commands people use most; most games define custom key bindings that make it quick and efficient to use the keyboard to control the game. For guidance, see [Game controls](https://developer.apple.com/design/human-interface-guidelines/game-controls#Keyboards). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/keyboards#Best-practices) + +**Support Full Keyboard Access when possible.** Available in iOS, iPadOS, macOS, and visionOS, Full Keyboard Access lets people navigate and activate windows, menus, controls, and system features using only the keyboard. To test Full Keyboard Access in your app or game, turn it on in the Accessibility area of the system-supplied Settings app. For developer guidance, see [Support Full Keyboard Access in your iOS app](https://developer.apple.com/videos/play/wwdc2021/10120/) and [`isFullKeyboardAccessEnabled`](https://developer.apple.com/documentation/AppKit/NSApplication/isFullKeyboardAccessEnabled). + +Important + +Although 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](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection#iPadOS); for developer guidance, see [Focus-based navigation](https://developer.apple.com/documentation/uikit/focus-based_navigation). + +**Respect standard keyboard shortcuts.** While using most apps, people generally expect to rely on the standard keyboard shortcuts that work in other apps and throughout the system. If your app offers a unique action that people perform frequently, prefer creating a [custom](https://developer.apple.com/design/human-interface-guidelines/keyboards#Custom-keyboard-shortcuts) shortcut for it instead of repurposing a standard one that people associate with a different action. While playing a game, people may expect to use certain standard keyboard shortcuts — such as Command–Q to quit the game — but they also expect to be able to modify each game’s key bindings to fit their personal play style. For guidance, see [Game controls](https://developer.apple.com/design/human-interface-guidelines/game-controls#Keyboards). + +## [Standard keyboard shortcuts](https://developer.apple.com/design/human-interface-guidelines/keyboards#Standard-keyboard-shortcuts) + +**In general, don’t repurpose standard keyboard shortcuts for custom actions.** People can get confused when the shortcuts they know work differently in your app or game. Only consider redefining a standard shortcut if its action doesn’t make sense in your experience. For example, if your app doesn’t support text editing, it doesn’t need a text-styling command like Italic, so you might repurpose Command–I for an action that has more relevance, like Get Info. + +People expect each of the following standard keyboard shortcuts to perform the action listed in the table below. + +Primary key| Keyboard shortcut| Action +---|---|--- +Space| Command-Space| Show or hide the Spotlight search field. +| Shift-Command-Space| Varies. +| Option-Command-Space| Show the Spotlight search results window. +| Control-Command-Space| Show the Special Characters window. +Tab| Shift-Tab| Navigate through controls in a reverse direction. +| Command-Tab| Move forward to the next most recently used app in a list of open apps. +| Shift-Command-Tab| Move backward through a list of open apps (sorted by recent use). +| Control-Tab| Move focus to the next group of controls in a dialog or the next table (when Tab moves to the next cell). +| Control-Shift-Tab| Move focus to the previous group of controls. +Esc| Esc| Cancel the current action or process. +Esc| Option-Command-Esc| Open the Force Quit dialog. +Eject| Control-Command-Eject| Quit all apps (after changes have been saved to open documents) and restart the computer. +| Control-Option-Command-Eject| Quit all apps (after changes have been saved to open documents) and shut the computer down. +F1| Control-F1| Toggle full keyboard access on or off. +F2| Control-F2| Move focus to the menu bar. +F3| Control- F3| Move focus to the Dock. +F4| Control-F4| Move focus to the active (or next) window. +| Control-Shift-F4| Move focus to the previously active window. +F5| Control-F5| Move focus to the toolbar. +| Command-F5| Turn VoiceOver on or off. +F6| Control-F6| Move focus to the first (or next) panel. +| Control-Shift-F6| Move focus to the previous panel. +F7| Control-F7| Temporarily override the current keyboard access mode in windows and dialogs. +F8| | Varies. +F9| | Varies. +F10| | Varies. +F11| | Show desktop. +F12| | Hide or display Dashboard. +Grave accent (`)| Command-Grave accent| Activate the next open window in the frontmost app. +| Shift-Command-Grave accent| Activate the previous open window in the frontmost app. +| Option-Command-Grave accent| Move focus to the window drawer. +Hyphen (-)| Command-Hyphen| Decrease the size of the selection. +| Option-Command-Hyphen| Zoom out when screen zooming is on. +Left bracket ({)| Command-Left bracket| Left-align a selection. +Right bracket (})| Command-Right bracket| Right-align a selection. +Pipe (|)| Command-Pipe| Center-align a selection. +Colon (:)| Command-Colon| Display the Spelling window. +Semicolon (;)| Command-Semicolon| Find misspelled words in the document. +Comma (,)| Command-Comma| Open the app’s settings window. +| Control-Option-Command-Comma| Decrease screen contrast. +Period (.)| Command-Period| Cancel an operation. +| Control-Option-Command-Period| Increase screen contrast. +Question mark (?)| Command-Question mark| Open the app’s Help menu. +Forward slash (/)| Option-Command-Forward slash| Turn font smoothing on or off. +Equal sign (=)| Shift-Command-Equal sign| Increase the size of the selection. +| Option-Command-Equal sign| Zoom in when screen zooming is on. +3| Shift-Command-3| Capture the screen to a file. +| Control-Shift-Command-3| Capture the screen to the Clipboard. +4| Shift-Command-4| Capture a selection to a file. +| Control-Shift-Command-4| Capture a selection to the Clipboard. +8| Option-Command-8| Turn screen zooming on or off. +| Control-Option-Command-8| Invert the screen colors. +A| Command-A| Select every item in a document or window, or all characters in a text field. +| Shift-Command-A| Deselect all selections or characters. +B| Command-B| Boldface the selected text or toggle boldfaced text on and off. +C| Command-C| Copy the selection to the Clipboard. +| Shift-Command-C| Display the Colors window. +| Option-Command-C| Copy the style of the selected text. +| Control-Command-C| Copy the formatting settings of the selection and store on the Clipboard. +D| Option-Command-D| Show or hide the Dock. +| Control-Command-D| Display the definition of the selected word in the Dictionary app. +E| Command-E| Use the selection for a find operation. +F| Command-F| Open a Find window. +| Option-Command-F| Jump to the search field control. +| Control-Command-F| Enter full screen. +G| Command-G| Find the next occurrence of the selection. +| Shift-Command-G| Find the previous occurrence of the selection. +H| Command-H| Hide the windows of the currently running app. +| Option-Command-H| Hide the windows of all other running apps. +I| Command-I| Italicize the selected text or toggle italic text on or off. +| Command-I| Display an Info window. +| Option-Command-I| Display an inspector window. +J| Command-J| Scroll to a selection. +M| Command-M| Minimize the active window to the Dock. +| Option-Command-M| Minimize all windows of the active app to the Dock. +N| Command-N| Open a new document. +O| Command-O| Display a dialog for choosing a document to open. +P| Command-P| Display the Print dialog. +| Shift-Command-P| Display the Page Setup dialog. +Q| Command-Q| Quit the app. +| Shift-Command-Q| Log out the person currently logged in. +| Option-Shift-Command-Q| Log out the person currently logged in without confirmation. +S| Command-S| Save a new document or save a version of a document. +| Shift-Command-S| Duplicate the active document or initiate a Save As. +T| Command-T| Display the Fonts window. +| Option-Command-T| Show or hide a toolbar. +U| Command-U| Underline the selected text or turn underlining on or off. +V| Command-V| Paste the Clipboard contents at the insertion point. +| Shift-Command-V| Paste as (Paste as Quotation, for example). +| Option-Command-V| Apply the style of one object to the selection. +| Option-Shift-Command-V| Paste the Clipboard contents at the insertion point and apply the style of the surrounding text to the inserted object. +| Control-Command-V| Apply formatting settings to the selection. +W| Command-W| Close the active window. +| Shift-Command-W| Close a file and its associated windows. +| Option-Command-W| Close all windows in the app. +X| Command-X| Remove the selection and store on the Clipboard. +Z| Command-Z| Undo the previous operation. +| Shift-Command-Z| Redo (when Undo and Redo are separate commands rather than toggled using Command-Z). +Right arrow| Command-Right arrow| Change the keyboard layout to current layout of Roman script. +| Shift-Command-Right arrow| Extend selection to the next semantic unit, typically the end of the current line. +| Shift-Right arrow| Extend selection one character to the right. +| Option-Shift-Right arrow| Extend selection to the end of the current word, then to the end of the next word. +| Control-Right arrow| Move focus to another value or cell within a view, such as a table. +Left arrow| Command-Left arrow| Change the keyboard layout to current layout of system script. +| Shift-Command-Left arrow| Extend selection to the previous semantic unit, typically the beginning of the current line. +| Shift-Left arrow| Extend selection one character to the left. +| Option-Shift-Left arrow| Extend selection to the beginning of the current word, then to the beginning of the previous word. +| Control-Left arrow| Move focus to another value or cell within a view, such as a table. +Up arrow| Shift-Command-Up arrow| Extend selection upward in the next semantic unit, typically the beginning of the document. +| Shift-Up arrow| Extend selection to the line above, to the nearest character boundary at the same horizontal location. +| Option-Shift-Up arrow| Extend selection to the beginning of the current paragraph, then to the beginning of the next paragraph. +| Control-Up arrow| Move focus to another value or cell within a view, such as a table. +Down arrow| Shift-Command-Down arrow| Extend selection downward in the next semantic unit, typically the end of the document. +| Shift-Down arrow| Extend selection to the line below, to the nearest character boundary at the same horizontal location. +| Option-Shift-Down arrow| Extend selection to the end of the current paragraph, then to the end of the next paragraph (include the paragraph terminator, such as Return, in cut, copy, and paste operations). +| Control-Down arrow| Move focus to another value or cell within a view, such as a table. + +The system also defines several keyboard shortcuts for use with localized versions of the system, localized keyboards, keyboard layouts, and input methods. These shortcuts don’t correspond directly to menu commands. + +Keyboard shortcut| Action +---|--- +Control-Space| Toggle between the current and last input source. +Control-Option-Space| Switch to the next input source in the list. +[Modifier key]-Command-Space| Varies. +Command-Right arrow| Change keyboard layout to current layout of Roman script. +Command-Left arrow| Change keyboard layout to current layout of system script. + +## [Custom keyboard shortcuts](https://developer.apple.com/design/human-interface-guidelines/keyboards#Custom-keyboard-shortcuts) + +**Define custom keyboard shortcuts for only the most frequently used app-specific commands.** People appreciate using keyboard shortcuts for actions they perform frequently, but defining too many new shortcuts can make your app seem difficult to learn. + +**Use modifier keys in ways that people expect.** For example, pressing Command while dragging moves items as a group, and pressing Shift while drag-resizing constrains resizing to the item’s aspect ratio. In addition, holding an arrow key moves the selected item by the smallest app-defined unit of distance until people release the key. + +Here are the modifier keys and the symbols that represent them. + +Modifier key| Symbol| Recommended usage +---|---|--- +Command| ![Outline of a stylized clover shape.](https://docs-assets.developer.apple.com/published/43dd468e7f303fbaa3abbf3935292ae2/Keyboard_Command.svg)| Prefer the Command key as the main modifier key in a custom keyboard shortcut. +Shift| ![Outline of an upward-pointing arrow.](https://docs-assets.developer.apple.com/published/3a7e5aed7275031a8c41a7fb7789e41f/Keyboard_Shift.svg)| Prefer the Shift key as a secondary modifier that complements a related shortcut. +Option| ![Line segments that suggest a horizontally transformed Z shape combined with a short horizontal segment aligned with the top of the Z.](https://docs-assets.developer.apple.com/published/8b064ad029d2012128a6aaeb1322b290/Keyboard_Option.svg)| Use the Option modifier sparingly for less-common commands or power features. +Control| ![A shallow, upside-down V shape.](https://docs-assets.developer.apple.com/published/5c92c8350588d52ff786bf763b18e9e7/Keyboard_Control.svg)| Avoid using the Control key as a modifier. The system uses Control in many systemwide features and shortcuts, like moving focus or capturing screenshots. + +Tip + +Some 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. + +**List modifier keys in the correct order.** If you use more than one modifier key in a custom shortcut, always list them in this order: Control, Option, Shift, Command. + +**Avoid adding Shift to a shortcut that uses the upper character of a two-character key.** People already understand that they must hold the Shift key to type the upper character of a two-character key, so it’s clearer to simply list the upper character in the shortcut. For example, the keyboard shortcut for Hide Status Bar is Command-Slash, whereas the keyboard shortcut for Help is Command-Question mark, not Shift-Command-Slash. + +**Let the system localize and mirror your keyboard shortcuts as needed.** The system automatically localizes a shortcut’s primary and modifier keys to support the currently connected keyboard; if your app or game switches to a right-to-left layout, the system automatically mirrors the shortcut. For guidance, see [Right to left](https://developer.apple.com/design/human-interface-guidelines/right-to-left). + +**Avoid creating a new shortcut by adding a modifier to an existing shortcut for an unrelated command.** For example, because people are accustomed to using Command-Z for undoing an action, it would be confusing to use Shift-Command-Z as the shortcut for a command that’s unrelated to undo and redo. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/keyboards#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or tvOS. Not supported in watchOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/keyboards#visionOS) + +In visionOS, an app’s keyboard shortcuts appear in the shortcut interface that displays when people hold the Command key on a connected keyboard. Similar in organization to an app’s [menu bar menus](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar) on iPad or Mac, the shortcut interface on Apple Vision Pro displays app commands in familiar system-defined menu categories such as File, Edit, and View. Unlike menu bar menus, the shortcut interface displays all relevant categories in one view, listing within each category only available commands that also have shortcuts. + +**Write descriptive shortcut titles.** Because the shortcut interface displays a flat list of all items in each category, submenu titles aren’t available to provide context for their child items. Make sure each shortcut title is descriptive enough to convey its action without the additional context a submenu title might provide. For developer guidance, see [`discoverabilityTitle`](https://developer.apple.com/documentation/UIKit/UIKeyCommand/discoverabilityTitle). + +**Recognize that people see an overlay when they use a physical keyboard with your visionOS app or game.** When people connect a physical keyboard while using your visionOS app or game, the system displays a virtual keyboard overlay that provides typing completion and other controls. + +Video with custom controls. + +Content description: A recording that shows two hands typing on a physical keyboard while the person runs an app in visionOS. A virtual window is visible above the physical keyboard, and displays the entered text and suggestions. + +Play + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/keyboards#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/keyboards#Related) + +[Virtual keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards) + +[Entering data](https://developer.apple.com/design/human-interface-guidelines/entering-data) + +[Pointing devices](https://developer.apple.com/design/human-interface-guidelines/pointing-devices) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/keyboards#Developer-documentation) + +[`KeyboardShortcut`](https://developer.apple.com/documentation/SwiftUI/KeyboardShortcut) — SwiftUI + +[Input events](https://developer.apple.com/documentation/SwiftUI/Input-events) — SwiftUI + +[Handling key presses made on a physical keyboard](https://developer.apple.com/documentation/UIKit/handling-key-presses-made-on-a-physical-keyboard) — UIKit + +[Mouse, Keyboard, and Trackpad](https://developer.apple.com/documentation/AppKit/mouse-keyboard-and-trackpad) — AppKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/keyboards#Change-log) + +Date| Changes +---|--- +June 9, 2025| Moved game-specific key bindings guidance to the Game controls page. +June 10, 2024| Added game-specific guidance and made organizational updates. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-inputs/references/nearby-interactions.md b/skills/hig-inputs/references/nearby-interactions.md new file mode 100644 index 00000000..b68624b1 --- /dev/null +++ b/skills/hig-inputs/references/nearby-interactions.md @@ -0,0 +1,70 @@ +--- +title: "Nearby interactions | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/nearby-interactions + +# Nearby interactions + +Nearby interactions support on-device experiences that integrate the presence of people and objects in the nearby environment. + +![A sketch of curved lines beside a circular area containing a smaller circle, suggesting audio approaching a person in a room from a specific direction. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/4ee9418314d3a8bbdc8e7586a9e3c787/inputs-nearby-interactions-intro%402x.png) + +A great nearby interaction feels intuitive and natural to people, because it builds on their innate awareness of the world around them. For example, a person playing music on their iPhone can continue listening on their HomePod mini when they bring the devices close together, simply by transferring the audio output from their iPhone to the HomePod mini. + +Nearby interactions are available on devices that support Ultra Wideband technology (to learn more, see [Ultra Wideband availability](https://support.apple.com/en-us/HT212274)), and rely on the [Nearby Interaction](https://developer.apple.com/documentation/NearbyInteraction) framework. Before participating in nearby interaction experiences, people grant permission for their device to interact while they’re using your app. The Nearby Interaction APIs help you preserve people’s privacy by relying on randomly generated device identifiers that last only as long as the interaction session your app initiates. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Best-practices) + +**Consider a task from the perspective of the physical world to find inspiration for a nearby interaction.** For example, although people can easily use your app’s UI to transfer a song from their iPhone to their HomePod mini, initiating the transfer by bringing the devices close together makes the task feel rooted in the physical world. Discovering the physical actions that inform the concept of a task can help you create an engaging experience that makes performing it feel easy and natural. + +**Use distance, direction, and context to inform an interaction.** Although your app may get information from a variety of sources, prioritizing nearby, contextually relevant information can help you deliver experiences that feel organic. For example, if people want to share content with a friend in a crowded room, the iOS share sheet can suggest a likely recipient by using on-device knowledge about the person’s most frequent and recent contacts. Combining this knowledge with information from nearby devices that include the U1 chip can let the share sheet improve the experience by suggesting the closest contact the person is facing. + +**Consider how changes in physical distance can guide a nearby interaction.** In the physical world, people generally expect their perception of an object to sharpen as they get closer to it. A nearby interaction can mirror this experience by providing feedback that changes with the proximity of an object. For example, when people use iPhone to find an AirTag, the display transitions from a directional arrow to a pulsing circle as they get closer. + +**Provide continuous feedback.** Continuous feedback reflects the dynamism of the physical world and strengthens the connection between a nearby interaction and the task people are performing. For example, when looking for a lost item in Find My, people get continuous updates that communicate the item’s direction and proximity. Keep people engaged by providing uninterrupted feedback that responds to their movements. + +**Consider using multiple feedback types to create a holistic experience.** Fluidly transitioning among visual, audible, and haptic feedback can help a nearby interaction’s task feel more engaging and real. Using more than one type of feedback also lets you vary the experience to coordinate with both the task and the current context. For example, while people are interacting with the device screen, visual feedback makes sense; while people are interacting with their environment, audible and haptic feedback often work better. + +**Avoid using a nearby interaction as the only way to perform a task.** You can’t assume that everyone can experience a nearby interaction, so it’s essential to provide alternative ways to get things done in your app. + +## [Device usage](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Device-usage) + +**Encourage people to hold the device in portrait orientation.** Holding a device in landscape can decrease the accuracy and availability of information about the distance and relative direction of other devices. If you support only portrait orientation while your nearby interaction feature runs, prefer giving people implicit, visual feedback on how to hold the device for an optimal experience; when possible, avoid explicitly telling people to hold the device in portrait. + +**Design for the device’s directional field of view.** Nearby interaction relies on a hardware sensor with a specific field of view similar to that of the Ultra Wide camera in iPhone 11 and later. If a participating device is outside of this field of view, your app might receive information about its distance, but not its relative direction. + +**Help people understand how intervening objects can affect the nearby interaction experience in your app.** When other people, animals, or sufficiently large objects come between two participating devices, the accuracy or availability of distance and direction information can decrease. Consider adding advice on avoiding this situation to onboarding or tutorial content you present. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Platform-considerations) + + _No additional considerations for iPadOS. Not supported in macOS, tvOS, or visionOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#iOS) + +On iPhone, Nearby Interaction APIs provide a peer device’s distance and direction. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#watchOS) + +On Apple Watch, Nearby Interaction APIs provide a peer device’s distance. Also, all watchOS apps participating in a nearby interaction experience must be in the foreground. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Developer-documentation) + +[Nearby Interaction](https://developer.apple.com/documentation/NearbyInteraction) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/0F487599-C14E-48B0-AEB0-A752DFF26E95/5165_wide_250x141_1x.jpg) Design for spatial interaction ](https://developer.apple.com/videos/play/wwdc2021/10245) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/E6812719-14BF-4392-84FC-E1CFC1650B71/3558_wide_250x141_1x.jpg) Meet Nearby Interaction ](https://developer.apple.com/videos/play/wwdc2020/10668) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Change-log) + +Date| Changes +---|--- +June 21, 2023| Changed page title from Spatial interactions. + diff --git a/skills/hig-inputs/references/pointing-devices.md b/skills/hig-inputs/references/pointing-devices.md new file mode 100644 index 00000000..8a5362d8 --- /dev/null +++ b/skills/hig-inputs/references/pointing-devices.md @@ -0,0 +1,237 @@ +--- +title: "Pointing devices | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/pointing-devices + +# Pointing devices + +People can use a pointing device like a trackpad or mouse to navigate the interface and initiate actions. + +![A sketch of an arrow-shaped pointer, suggesting use of a mouse or trackpad. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d62ce652f0470403da6dfbad1b1ad2b0/inputs-pointing-devices-intro%402x.png) + +People appreciate the precision and flexibility that pointing devices offer. On a Mac, people typically expect to combine a pointing device with a keyboard as they navigate apps and the system. On iPad and Apple Vision Pro, a pointing device gives people an additional way to interact with apps and content, without replacing touch, eyes, or gestures. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Best-practices) + +**Be consistent when responding to mouse and trackpad gestures.** People expect most gestures to work the same throughout the system, regardless of the app or game they’re using. On a Mac, for example, people rely on the “Swipe between pages” gesture to behave the same way whether they’re browsing individual document pages, webpages, or images. + +**Avoid redefining systemwide trackpad gestures.** Even in a game that uses app-specific gestures in a custom way, people expect systemwide gestures to be available; for example, people expect to make familiar gestures to reveal the Dock or Mission Control in macOS. Remember that Mac users can customize the gestures for performing systemwide actions. + +**Provide a consistent experience in your app, whether people are using gestures, eyes, a pointing device, or a keyboard.** People expect to move fluidly between multiple types of input, and they don’t want to learn different interactions for each mode or for each app they use. + +**Let people use the pointer to reveal and hide controls that automatically minimize or fade out.** In iPadOS, for example, people can reveal the minimized Safari toolbar by holding the pointer over it (the toolbar minimizes again when the pointer moves away). People can also move the pointer to reveal or hide playback controls while they watch a full-screen video. + +**Provide a consistent experience when people press and hold a modifier key while interacting with objects in your app.** For example, if people can duplicate an object by pressing and holding the Option key while they drag that object, ensure the result is the same whether they drag using touch or the pointer. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Platform-considerations) + + _No additional considerations for iOS. Not supported in tvOS or watchOS._ + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#iPadOS) + +iPadOS builds on the traditional pointer experience, automatically adapting the pointer to the current context and providing rich visual feedback at a level of precision that enhances productivity and simplifies common tasks on a touchscreen device. The iPadOS pointing system gives people an additional way to interact with apps and content — it doesn’t replace touch. + +**Allow multiple selection in custom views when necessary.** In iPadOS 15 and later, people can click and drag the pointer over multiple items to select them. As people use the pointer in this way, it expands into a visible rectangle that selects the items it encompasses. Standard nonlist collection views support this interaction by default; if you want to support multiple selection in custom views, you need to implement it yourself. For developer guidance, see [`UIBandSelectionInteraction`](https://developer.apple.com/documentation/UIKit/UIBandSelectionInteraction). + +**Distinguish between pointer and finger input only if it provides value.** For example, a scrubber can give people an additional way to target a location in a video when they’re using the pointer. In this scenario, people can drag the playhead using either the pointer or touch, but they can use the pointer to click a precise seek destination. + +#### [Pointer shape and content effects](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Pointer-shape-and-content-effects) + +iPadOS integrates the appearance and behavior of both the pointer and the element it moves over, bringing focus to the item the pointer is targeting. You can support the system-provided pointer effects or modify them to suit your experience. + +By default, the pointer’s shape is a circle, but it can display a system-defined or custom shape when people move it over specific elements or regions. For example, the pointer automatically uses the familiar I-beam shape when people move it over a text-entry area. + +Video with custom controls. + +Content description: A video snippet showing the bottom half of a new event popover in Calendar. At the beginning of the video, the pointer is within the URL field and it uses the I-beam shape. As the pointer moves between the URL and Notes fields, it briefly reverts to its default circular shape; when the pointer enters the Notes field, it uses the I-beam shape again. + +Play + +With a _content effect_ , the UI element or region beneath the pointer can also change its appearance when people hold the pointer over it. Depending on the type of content effect, the pointer can retain its current shape or transform into a shape that integrates with the element’s new appearance. + +iPadOS defines three content effects that bring focus to different types of interactive elements in your app: highlight, lift, and hover. + +The _highlight_ effect transforms the pointer into a translucent, rounded rectangle that acts as a background for a control and includes a gentle parallax. The subtle highlighting and movement bring focus to the control without distracting people from their task. By default, iPadOS applies the highlight effect to bar buttons, tab bars, segmented controls, and edit menus. + +Video with custom controls. + +Content description: A video snippet showing a small area at the bottom of a Photos window. Nature photos that show purple flowers, rocks in a stream, and grass are visible just above the tab bar, which shows the Photos and For You tabs. At the beginning of the video, the Photos tab is highlighted. Because bar items receive the highlight effect, the pointer becomes the highlighted rounded rectangle that surrounds the tab’s glyph and title. The highlighted rounded rectangle slides from one tab to the other as the pointer moves. + +Play + +The _lift_ effect combines a subtle parallax with the appearance of elevation to make an element seem like it’s floating above the screen. As the pointer fades out beneath the element, iPadOS creates the illusion of lift by scaling the element up while adding a shadow below it and a soft specular highlight on top of it. By default, iPadOS applies the lift effect to app icons and to buttons in Control Center. + +Video with custom controls. + +Content description: A video snippet showing the left end of the Dock in front of the Home Screen. From the left, the visible app icons are Messages, Safari, Music, Mail, and Files. As the pointer moves across the first three icons from the left, it disappears beneath each icon in turn, lifting it slightly and letting it return to its original position before moving to the next icon. + +Play + +_Hover_ is a generic effect that lets you apply custom scale, tint, or shadow values to an element as the pointer moves over it. The hover effect combines your custom values to bring focus to an item, but it doesn’t transform the default pointer shape. + +Video with custom controls. + +Content description: A video snippet showing an alert floating above the top half of a new event popover in Calendar. The alert contains text that reads Are you sure you want to discard this new event? and a button titled Discard Changes. As the pointer moves into the alert button, the button background darkens. + +Play + +#### [Pointer accessories](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Pointer-accessories) + +Pointer accessories are visual indicators that help people understand how they can use the pointer to interact with the current UI element. For example, a pointer approaching a resizable element might display small arrows to indicate that the element allows resizing along a certain axis. + +Unlike pointer shapes and content effects, accessories are secondary items that can combine with any pointer to communicate additional information. For developer guidance, see [`UIPointerAccessory`](https://developer.apple.com/documentation/UIKit/UIPointerAccessory). + +**Use clear, simple images to create custom accessories.** A pointer accessory is small, so it’s essential to create an image that communicates the pointer interaction without using too many details. + +**Consider using the accessory transition to signal a change in an element’s state or behavior.** In addition to animating the appearance and disappearance of pointer accessories, the system also animates the transitions among accessory shapes and positions that can accompany content effects. For example, you could communicate that an add action has become unavailable by transitioning the pointer accessory from the `plus` symbol to the `circle.slash` symbol. + +#### [Pointer magnetism](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Pointer-magnetism) + +iPadOS helps people use the pointer to target an element by making the element appear to attract the pointer. People can experience this magnetic effect when they move the pointer close to an element and when they flick the pointer toward an element. + +When people move the pointer close to an element, the system starts transforming the pointer’s shape as soon as it reaches the element’s hit region. Because an element’s hit region typically extends beyond its visible boundaries, the pointer begins to transform before it appears to touch the element itself, creating the illusion that the element is pulling the pointer toward it. + +Video with custom controls. + +Content description: A video snippet showing an area at the bottom of Clock. The World Clock tab is selected and clock images and information for San Francisco, New York, and London are partially visible in the window. As the pointer moves in the tab bar, its highlighted rounded rectangle appearance seems to show a slight resistance as it slides from the World Clock tab to the Alarm tab and back again. + +Play + +When people flick the pointer toward an element, iPadOS examines the pointer’s trajectory to discover the element that’s the most likely target. When there’s an element in the pointer’s path, the system uses magnetism to pull the pointer toward the element’s center. + +By default, iPadOS applies magnetism to elements that use the lift effect (like app icons) and the highlight effect (like bar buttons), but not to elements that use hover. Because an element that supports hover doesn’t transform the default pointer shape, adding magnetism could be jarring and might make people feel that they’ve lost control of the pointer. + +The system also applies magnetism to text-entry areas, where it can help people avoid skipping to another line if they make unintended vertical movements while they’re selecting text. + +#### [Standard pointers and effects](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Standard-pointers-and-effects) + +**When possible, support the system-provided content effects.** People quickly become accustomed to the content effects they see throughout the system and generally expect their experience to apply to every app they use. To provide a consistent user experience, align your interactions with the design intent of each effect. Specifically: + + * Use highlight for a small element that has a transparent background. + + * Use lift for a small element that has an opaque background. + + * Use hover for large elements and customize the scale, tint, and shadow attributes as needed (for guidance, see [Customizing pointers](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Customizing-pointers)). + + + + +**Prefer the system-provided pointer appearances for standard buttons and text-entry areas.** You can help people feel more comfortable with your app when the pointer behaves in ways they expect. + +**Add padding around interactive elements to create comfortable hit regions.** You might need to experiment to determine the right size for an element’s hit region. If the hit region is too small, it can make people feel that they have to be extra precise when interacting with the element. On the other hand, when an element’s hit region is too large, people can feel that it takes a lot of effort to pull the pointer away from the element. In general, it works well to add about 12 points of padding around elements that include a bezel; for elements without a bezel, it works well to add about 24 points of padding around the element’s visible edges. + +![An illustration of a button that has a filled, rounded-rectangle bezel. The button is centered on top of a shaded rectangle that extends beyond the button by the same distance on all sides. Centered on each side, a callout indicates that the padding between the button and each edge of the shaded rectangle is 12 points.](https://docs-assets.developer.apple.com/published/3993cfe0b8ec1f79e7c27496d92b240e/padding-for-button-with-bezel%402x.png) + +![An illustration of a symbol centered on top of a shaded rectangle that extends beyond the symbol by the same distance on all sides. Centered on each side, a callout indicates that the padding between the symbol and each edge of the shaded rectangle is 24 points.](https://docs-assets.developer.apple.com/published/58bee8289c0508cc5b9e83f030925cb6/padding-for-glyph%402x.png) + +![An illustration of a button without a bezel, centered on top of a shaded rectangle that extends beyond the button by the same distance on all sides. Centered on each side, a callout indicates that the padding between the button and each edge of the shaded rectangle is 24 points.](https://docs-assets.developer.apple.com/published/5a79ca3d0a9d4bbd3bf71c23bf8c5da3/padding-for-button-without-bezel%402x.png) + +**Create contiguous hit regions for custom bar buttons.** If there’s space between the hit regions of adjacent buttons in a bar, people may experience a distracting motion when the pointer reverts briefly to its default shape as it moves between buttons. + +**Specify the corner radius of a nonstandard element that receives the lift effect.** With the system-provided lift effect, the pointer transforms to match the element’s shape as it fades out. By default, the pointer uses the system-defined corner radius to transform into a rounded rectangle. If your element is a different shape — if it’s a circle, for example — you need to provide the radius so the pointer can animate seamlessly into the shape of the element. For developer guidance, see [`UIPointerShape.roundedRect(_:radius:)`](https://developer.apple.com/documentation/UIKit/UIPointerShape-swift.enum/roundedRect\(_:radius:\)). + +#### [Customizing pointers](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Customizing-pointers) + +**Prefer system-provided pointer effects for custom elements that behave like standard elements.** When a custom element behaves like a standard one, people generally expect to interact with it using familiar pointer interactions. For example, if buttons in a custom toolbar don’t use the standard highlight effect, people might think they’re broken. + +**Use pointer effects in consistent ways throughout your app.** For example, if your app helps people draw, provide a similar pointer experience for every drawing area in your app so that people can apply the knowledge they gain in one area to the others. + +**Avoid creating gratuitous pointer and content effects.** People notice when the appearance of the pointer or the UI element beneath it changes, and they expect the changes to be useful. Creating a purely decorative pointer effect can distract and even irritate people without providing any practical value. + +**Keep custom pointer shapes simple.** Ideally, the pointer’s shape signals the action people can take in the current context without drawing too much attention to itself. If people don’t instantly understand your custom pointer shape, they’re likely to waste time trying to discover what the shape means. + +**Consider enhancing the pointer experience by displaying custom annotations that provide useful information.** For example, you could display X and Y values when people hold the pointer over a graphing area in your app. Keynote uses annotations to display the current width and height of a resizable image. + +![An illustration of a custom pointer hovering over a resize handle on the edge of a shaded rectangle. Above the pointer is a small annotation that displays the image’s width and height values against a dark background.](https://docs-assets.developer.apple.com/published/291aebad59eee8712e94047fcca4e7cf/useful-pointer-annotation%402x.png) + +**Avoid displaying instructional text with a pointer.** A pointer that displays instructional text can make an app seem complicated and difficult to use. Instead of providing instructions, prioritize clarity and simplicity in your interface, so that people can quickly grasp how to use your app whether they’re using the pointer or touching the screen. + +**Consider the interplay of shadow, scale, and element spacing when defining custom hover effects.** In general, reserve scaling for elements that can increase in size without crowding nearby elements. For example, scaling doesn’t work well for a table row because a row can’t expand without overlapping adjacent rows. For an element that has little space around it, consider using a hover effect that includes tint, but not scale and shadow. Note that it doesn’t work well to use shadow without including scale, because an unscaled element doesn’t appear to get closer to the viewer even when its shadow implies that it’s elevated above the screen. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#macOS) + +macOS supports a wide range of standard mouse and trackpad interactions that people can customize. For example, when a click or gesture isn’t a primary way to interact with content, people can often turn it on or off based on their current workflow. People can also choose specific regions of a mouse or trackpad to invoke secondary clicks, and select specific finger combinations and movements for certain gestures. + +Click or gesture| Expected behavior| Mouse| Trackpad +---|---|---|--- +Primary click| Select or activate an item, such as a file or button.| ●| ● +Secondary click| Reveal contextual menus.| ●| ● +Scrolling| Move content up, down, left, or right within a view.| ●| ● +Smart zoom| Zoom in or out on content, such as a web page or PDF.| ●| ● +Swipe between pages| Navigate forward or backward between individually displayed pages.| ●| ● +Swipe between full-screen apps| Navigate forward or backward between full-screen apps and spaces.| ●| ● +Mission Control (double-tap the mouse with two fingers or swipe up on the trackpad with three or four fingers)| Activate Mission Control.| ●| ● +Lookup and data detectors (force click with one finger or tap with three fingers)| Display a lookup window above selected content.| | ● +Tap to click| Perform the primary click action using a tap rather than a click.| | ● +Force click| Click then press firmly to display a Quick Look window or lookup window above selected content. Apply a variable amount of pressure to affect pressure-sensitive controls, such as variable speed media controls.| | ● +Zoom in or out (pinch with two fingers)| Zoom in or out.| | ● +Rotate (move two fingers in a circular motion)| Rotate content, such as an image.| | ● +Notification Center (swipe from the edge of the trackpad)| Display Notification Center.| | ● +App Exposé (swipe down with three or four fingers)| Display the current app’s windows in Exposé.| | ● +Launchpad (pinch with thumb and three fingers)| Display the Launchpad.| | ● +Show Desktop (spread with thumb and three fingers)| Slide all windows out of the way to reveal the desktop.| | ● + +#### [Pointers](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Pointers) + +macOS offers a variety of standard pointer styles, which your app can use to communicate the interactive state of an interface element or the result of a drag operation. + +Pointer| Name| Meaning| AppKit API +---|---|---|--- +![A pointer that resembles a diagonal arrow pointing up and to the left.](https://docs-assets.developer.apple.com/published/5be2c381c17d5d868866b3a5de1013f8/pointers-arrow%402x.png)| Arrow| Standard pointer for selecting and interacting with content and interface elements.| [`arrow`](https://developer.apple.com/documentation/AppKit/NSCursor/arrow) +![A closed, gloved hand.](https://docs-assets.developer.apple.com/published/6680cdb870edf5364f84a483fd2bead9/pointers-closed-hand%402x.png)| Closed hand| Dragging to reposition the display of content within a view—for example, dragging a map around in Maps.| [`closedHand`](https://developer.apple.com/documentation/AppKit/NSCursor/closedHand) +![A pointer arrow with a small menu-like square to the right of the arrow.](https://docs-assets.developer.apple.com/published/0cb033cee3b55bd4be661b28b928fdc1/pointers-contextual-menu%402x.png)| Contextual menu| A contextual menu is available for the content below the pointer. This pointer is generally shown only when the Control key is pressed.| [`contextualMenu`](https://developer.apple.com/documentation/AppKit/NSCursor/contextualMenu) +![A plus symbol.](https://docs-assets.developer.apple.com/published/d55eabe14365af873000aa389e5fad6c/pointers-crosshair%402x.png)| Crosshair| Precise rectangular selection is possible, such as when viewing an image in Preview.| [`crosshair`](https://developer.apple.com/documentation/AppKit/NSCursor/crosshair) +![A small pointer arrowhead with a circle underneath; the circle contains an Ex.](https://docs-assets.developer.apple.com/published/528819d511869de26beb1fd5008ac773/pointers-disappearing-item%402x.png)| Disappearing item| A dragged item will disappear when dropped. If the item references an original item, the original is unaffected. For example, when dragging a mailbox out of the favorites bar in Mail, the original mailbox isn’t removed.| [`disappearingItem`](https://developer.apple.com/documentation/AppKit/NSCursor/disappearingItem) +![A small pointer arrowhead with a circle underneath; the circle contains a plus symbol.](https://docs-assets.developer.apple.com/published/ccc7052f9bc6fb302d913633c648adcd/pointers-drag-copy%402x.png)| Drag copy| Duplicates a dragged—not moved—item when dropped into the destination. Appears when pressing the Option key during a drag operation.| [`dragCopy`](https://developer.apple.com/documentation/AppKit/NSCursor/dragCopy) +![A curved arrow, pointing up and to the right.](https://docs-assets.developer.apple.com/published/47dfbfd5f1bf3141dbf875f47446d1fd/pointers-drag-link%402x.png)| Drag link| During a drag and drop operation, creates an alias of the selected file when dropped. The alias points to the original file, which remains unmoved. Appears when pressing the Option and Command keys during a drag operation.| [`dragLink`](https://developer.apple.com/documentation/AppKit/NSCursor/dragLink) +![Opposing veritcal braces, used to form an insertion marker.](https://docs-assets.developer.apple.com/published/060f443dee8d260a1a1191d7831e36b7/pointers-horizontal-beam%402x.png)| Horizontal I beam| Selection and insertion of text is possible in a horizontal layout, such as a TextEdit or Pages document.| [`iBeam`](https://developer.apple.com/documentation/AppKit/NSCursor/iBeam) +![An open, gloved hand.](https://docs-assets.developer.apple.com/published/a5daee642ccc8fb3ac550d176b2d1932/pointers-open-hand%402x.png)| Open hand| Dragging to reposition content within a view is possible.| [`openHand`](https://developer.apple.com/documentation/AppKit/NSCursor/openHand) +![A small pointer arrowhead with a do not enter symbol underneath.](https://docs-assets.developer.apple.com/published/2daaf47bef26569f92f30a9016095dde/pointers-operation-not-allowed%402x.png)| Operation not allowed| A dragged item can’t be dropped in the current location.| [`operationNotAllowed`](https://developer.apple.com/documentation/AppKit/NSCursor/operationNotAllowed) +![A gloved hand, with the index finger extended.](https://docs-assets.developer.apple.com/published/25193808b5e72d5983ff26764889718a/pointers-pointing-hand%402x.png)| Pointing hand| The content beneath the pointer is a URL link to a webpage, document, or other item.| [`pointingHand`](https://developer.apple.com/documentation/AppKit/NSCursor/pointingHand) +![A horizontal bar with a downward-pointing arrow at its midpoint.](https://docs-assets.developer.apple.com/published/328443ed3b5dd85c84de91a60ed30b43/pointers-resize-down%402x.png)| Resize down| Resize or move a window, view, or element downward.| [`resizeDown`](https://developer.apple.com/documentation/AppKit/NSCursor/resizeDown) +![A vertical bar with a left-pointing arrow at its midpoint.](https://docs-assets.developer.apple.com/published/34113d73f24c003f4b3715e0cef8fbf6/pointers-resize-left%402x.png)| Resize left| Resize or move a window, view, or element to the left.| [`resizeLeft`](https://developer.apple.com/documentation/AppKit/NSCursor/resizeLeft) +![A vertical bar with left- and right-pointing arrows extending from its midpoint.](https://docs-assets.developer.apple.com/published/478726bb1a630013de1f77b3bccde9e0/pointers-resize-left-right%402x.png)| Resize left/right| Resize or move a window, view, or element to the left or right.| [`resizeLeftRight`](https://developer.apple.com/documentation/AppKit/NSCursor/resizeLeftRight) +![A vertical bar with a right-pointing arrow at its midpoint.](https://docs-assets.developer.apple.com/published/6045fce093cc242bf438393155b77992/pointers-resize-right%402x.png)| Resize right| Resize or move a window, view, or element to the right.| [`resizeRight`](https://developer.apple.com/documentation/AppKit/NSCursor/resizeRight) +![A horizontal bar with an up-pointing arrow at its midpoint.](https://docs-assets.developer.apple.com/published/34576a4ab42dea114abf11b3ee57a4f8/pointers-resize-up%402x.png)| Resize up| Resize or move a window, view, or element upward.| [`resizeUp`](https://developer.apple.com/documentation/AppKit/NSCursor/resizeUp) +![A horizontal bar with up- and down-pointing arrows extending from its midpoint.](https://docs-assets.developer.apple.com/published/d55d0d01c955105a957231266affb447/pointers-resize-up-down%402x.png)| Resize up/down| Resize or move a window, view, or element upward or downward.| [`resizeUpDown`](https://developer.apple.com/documentation/AppKit/NSCursor/resizeUpDown) +![Opposing horizontal braces, used to form an insertion marker.](https://docs-assets.developer.apple.com/published/15923a8cac833b5bb1fd69b4a395c4a9/pointers-vertical-beam%402x.png)| Vertical I beam| Selection and insertion of text is possible in a vertical layout.| [`iBeamCursorForVerticalLayout`](https://developer.apple.com/documentation/AppKit/NSCursor/iBeamCursorForVerticalLayout) + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#visionOS) + +In visionOS, people can attach an external pointing device or keyboard, and use both devices while they continue to use their eyes and hands. If people look at an element and then move the pointer, the system brings focus to the element under the pointer. Your app doesn’t have to do anything to support this behavior. + +When a pointing device is attached, the area people are looking at determines the pointer’s context. For example, when people shift their eyes from one window to another, the pointer’s context seamlessly transitions to the new window. + +Video with custom controls. + +Content description: A recording that shows a pointer moving around, highlighting items, and scrolling content within a Safari window in visionOS. A picture-in-picture window is visible in the bottom left corner of the recording. It shows a person's hand operating a trackpad next to a keyboard outside the field of view. The person's gestures on the trackpad correspond to the pointer movements. + +Play + +When people use an attached pointing device that supports gestures, like a trackpad or mouse, the pointer hides while people are gesturing, minimizing visual distraction. In this scenario, the pointer remains hidden until people move it, when it reappears in the location they’re looking at. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Related) + +[Entering data](https://developer.apple.com/design/human-interface-guidelines/entering-data) + +[Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Developer-documentation) + +[Input events](https://developer.apple.com/documentation/SwiftUI/Input-events) — SwiftUI + +[Pointer interactions](https://developer.apple.com/documentation/UIKit/pointer-interactions) — UIKit + +[Mouse, Keyboard, and Trackpad](https://developer.apple.com/documentation/AppKit/mouse-keyboard-and-trackpad) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/F9A980A7-B00A-4856-9172-FDB610A419E5/3509_wide_250x141_1x.jpg) Design for the iPadOS pointer ](https://developer.apple.com/videos/play/wwdc2020/10640) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-inputs/references/remotes.md b/skills/hig-inputs/references/remotes.md new file mode 100644 index 00000000..57a455f9 --- /dev/null +++ b/skills/hig-inputs/references/remotes.md @@ -0,0 +1,67 @@ +--- +title: "Remotes | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/remotes + +# Remotes + +The Siri Remote is the primary input method for Apple TV, helping people feel connected to onscreen content from across the room. + +![A sketch of an Apple TV remote, suggesting interaction with onscreen content. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/04cb8e9dcd1006a14957bda7627222ad/inputs-remotes-intro%402x.png) + +In addition to several specific buttons, the Siri Remote combines a clickpad and touch surface to support familiar gestures like swipe and press that people use to navigate tvOS apps, browse channels and content, play and pause media, and make selections. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/remotes#Best-practices) + +**Prefer using standard gestures to perform standard actions.** Unless people are actively playing a game, they expect the remote to behave in standard ways in every app they use. Redefining or repurposing standard remote behaviors can cause confusion and add complexity to your experience. For guidance, see [Gestures](https://developer.apple.com/design/human-interface-guidelines/remotes#Gestures). + +**Be consistent with the tvOS focus experience.** The [focus experience](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection) forges a strong connection between people and the content they’re viewing. Reinforce this link in your app by ensuring that you combine gestures with the focus experience in ways that are familiar to people, such as always moving focus in the same direction as the gesture. + +**Provide clear feedback that shows people what happens when they make gestures in your app.** For example, lightly resting a thumb on the remote shows people where to swipe down so that they can reveal an info area. + +**Define new gestures only when it makes sense in your app.** Within gameplay, for example, custom gestures can be a fun part of the experience. In most other situations, people expect to use standard gestures and may not appreciate having to discover or remember new ones. + +**Differentiate between press and tap, and avoid responding to an inadvertent tap.** Pressing is an intentional action, and it works well for choosing a button, confirming a selection, and initiating an action during gameplay. Tap gestures are fine for navigation or showing additional information, but keep in mind that people might cause an inadvertent tap when they rest a thumb on the remote, pick it up, move it around, or hand it to someone else, so it often works well to avoid responding to taps during live video playback. + +**Consider using the position of a tap to aid with navigation or gameplay.** The remote can differentiate between up, down, left, and right tap gestures on the touch surface. Respond to positional taps only if it makes sense in the context of your app and if such behavior is intuitive and discoverable. + +**In almost all cases, open the parent of the current screen when people press the Back button.** At the top level of an app or game, the parent is the Apple TV Home Screen; within an app, the parent is defined by the app hierarchy, and isn’t necessarily the previous screen. The exception to this standard behavior is when people are actively playing a game, where it can be easy to accidentally press the Back button repeatedly. To avoid disrupting gameplay in this scenario, respond to the Back button by opening an in-game pause menu that lets people use a different interaction to navigate back to the game’s main menu. When the in-game pause menu is open, respond to a Back-button press by closing the menu and resuming the game. Note that people press and hold the Back button to go to the Home Screen from any location. For guidance, see [Buttons](https://developer.apple.com/design/human-interface-guidelines/remotes#Buttons). + +**Respond correctly to the Play/Pause button during media playback.** When playing music or video, people expect pressing the Play/Pause button to play, pause, or resume playback. + +## [Gestures](https://developer.apple.com/design/human-interface-guidelines/remotes#Gestures) + +The clickpad’s touch surface detects swipes and presses. + +**Swipe.** Swiping lets people scroll effortlessly through large numbers of items with movement that starts fast and then slows down, based on the strength of the swipe. When people swipe up or down on the edge of the remote, they can speed through items very quickly. + +**Press.** People press to activate a control or select an item. Also, people press before swiping to activate scrubbing mode. + +## [Buttons](https://developer.apple.com/design/human-interface-guidelines/remotes#Buttons) + +Ensure that your app or game responds to specific presses in the following ways. + +Button or area| Expected behavior in an app| Expected behavior in a game +---|---|--- +Touch surface (swipe)| Navigates. Changes focus.| Performs directional pad behavior. +Touch surface (press)| Activates a control or an item. Navigates deeper.| Performs primary button behavior. +Back| Returns to previous screen. Exits to Apple TV Home Screen.| Pauses/resumes gameplay. Returns to previous screen, exits to main game menu, or exits to Apple TV Home Screen. +Play/Pause| Activates media playback. Pauses/resumes media playback.| Performs secondary button behavior. Skips intro video. + +## [Compatible remotes](https://developer.apple.com/design/human-interface-guidelines/remotes#Compatible-remotes) + +Some remotes that are compatible with Apple TV include buttons for browsing live TV or other channel-based content. For example, a remote might include a button people can use to open an electronic program guide (EPG) and other buttons they can use to browse the guide or change channels. For developer guidance, see [Providing Channel Navigation](https://developer.apple.com/documentation/TVServices/providing-channel-navigation); for design guidance, see [EPG experience](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#EPG-experience). + +**If your live-viewing app provides an EPG, respond to a remote’s EPG-browsing buttons in ways people expect.** When people press a “guide” or “browse” button, they expect your EPG to open. While they’re viewing your EPG, people expect to navigate through it by pressing a “page up” or “page down” button. Avoid responding to these buttons in other ways while people are browsing the EPG. On the Siri Remote and compatible remotes, people can also tap on the upper or lower area of the Touch surface to browse the EPG. If your app doesn’t support an EPG experience, the system routes these button presses to the default guide app on the viewer’s device. + +**While your content plays, respond to a compatible remote’s “page up” or “page down” button by changing the channel.** People expect these buttons to behave differently when they switch between viewing content and browsing an EPG. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/remotes#Platform-considerations) + + _Not supported in iOS, iPadOS, macOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/remotes#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/remotes#Related) + +[Use your Siri Remote or Apple TV Remote with Apple TV](https://support.apple.com/en-us/HT205305) + diff --git a/skills/hig-inputs/references/spatial-interactions.md b/skills/hig-inputs/references/spatial-interactions.md new file mode 100644 index 00000000..00edbfd8 --- /dev/null +++ b/skills/hig-inputs/references/spatial-interactions.md @@ -0,0 +1,70 @@ +--- +title: "Nearby interactions | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/spatial-interactions + +# Nearby interactions + +Nearby interactions support on-device experiences that integrate the presence of people and objects in the nearby environment. + +![A sketch of curved lines beside a circular area containing a smaller circle, suggesting audio approaching a person in a room from a specific direction. The image is overlaid with rectangular and circular grid lines and is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/4ee9418314d3a8bbdc8e7586a9e3c787/inputs-nearby-interactions-intro%402x.png) + +A great nearby interaction feels intuitive and natural to people, because it builds on their innate awareness of the world around them. For example, a person playing music on their iPhone can continue listening on their HomePod mini when they bring the devices close together, simply by transferring the audio output from their iPhone to the HomePod mini. + +Nearby interactions are available on devices that support Ultra Wideband technology (to learn more, see [Ultra Wideband availability](https://support.apple.com/en-us/HT212274)), and rely on the [Nearby Interaction](https://developer.apple.com/documentation/NearbyInteraction) framework. Before participating in nearby interaction experiences, people grant permission for their device to interact while they’re using your app. The Nearby Interaction APIs help you preserve people’s privacy by relying on randomly generated device identifiers that last only as long as the interaction session your app initiates. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Best-practices) + +**Consider a task from the perspective of the physical world to find inspiration for a nearby interaction.** For example, although people can easily use your app’s UI to transfer a song from their iPhone to their HomePod mini, initiating the transfer by bringing the devices close together makes the task feel rooted in the physical world. Discovering the physical actions that inform the concept of a task can help you create an engaging experience that makes performing it feel easy and natural. + +**Use distance, direction, and context to inform an interaction.** Although your app may get information from a variety of sources, prioritizing nearby, contextually relevant information can help you deliver experiences that feel organic. For example, if people want to share content with a friend in a crowded room, the iOS share sheet can suggest a likely recipient by using on-device knowledge about the person’s most frequent and recent contacts. Combining this knowledge with information from nearby devices that include the U1 chip can let the share sheet improve the experience by suggesting the closest contact the person is facing. + +**Consider how changes in physical distance can guide a nearby interaction.** In the physical world, people generally expect their perception of an object to sharpen as they get closer to it. A nearby interaction can mirror this experience by providing feedback that changes with the proximity of an object. For example, when people use iPhone to find an AirTag, the display transitions from a directional arrow to a pulsing circle as they get closer. + +**Provide continuous feedback.** Continuous feedback reflects the dynamism of the physical world and strengthens the connection between a nearby interaction and the task people are performing. For example, when looking for a lost item in Find My, people get continuous updates that communicate the item’s direction and proximity. Keep people engaged by providing uninterrupted feedback that responds to their movements. + +**Consider using multiple feedback types to create a holistic experience.** Fluidly transitioning among visual, audible, and haptic feedback can help a nearby interaction’s task feel more engaging and real. Using more than one type of feedback also lets you vary the experience to coordinate with both the task and the current context. For example, while people are interacting with the device screen, visual feedback makes sense; while people are interacting with their environment, audible and haptic feedback often work better. + +**Avoid using a nearby interaction as the only way to perform a task.** You can’t assume that everyone can experience a nearby interaction, so it’s essential to provide alternative ways to get things done in your app. + +## [Device usage](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Device-usage) + +**Encourage people to hold the device in portrait orientation.** Holding a device in landscape can decrease the accuracy and availability of information about the distance and relative direction of other devices. If you support only portrait orientation while your nearby interaction feature runs, prefer giving people implicit, visual feedback on how to hold the device for an optimal experience; when possible, avoid explicitly telling people to hold the device in portrait. + +**Design for the device’s directional field of view.** Nearby interaction relies on a hardware sensor with a specific field of view similar to that of the Ultra Wide camera in iPhone 11 and later. If a participating device is outside of this field of view, your app might receive information about its distance, but not its relative direction. + +**Help people understand how intervening objects can affect the nearby interaction experience in your app.** When other people, animals, or sufficiently large objects come between two participating devices, the accuracy or availability of distance and direction information can decrease. Consider adding advice on avoiding this situation to onboarding or tutorial content you present. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Platform-considerations) + + _No additional considerations for iPadOS. Not supported in macOS, tvOS, or visionOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#iOS) + +On iPhone, Nearby Interaction APIs provide a peer device’s distance and direction. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#watchOS) + +On Apple Watch, Nearby Interaction APIs provide a peer device’s distance. Also, all watchOS apps participating in a nearby interaction experience must be in the foreground. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Developer-documentation) + +[Nearby Interaction](https://developer.apple.com/documentation/NearbyInteraction) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/0F487599-C14E-48B0-AEB0-A752DFF26E95/5165_wide_250x141_1x.jpg) Design for spatial interaction ](https://developer.apple.com/videos/play/wwdc2021/10245) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/E6812719-14BF-4392-84FC-E1CFC1650B71/3558_wide_250x141_1x.jpg) Meet Nearby Interaction ](https://developer.apple.com/videos/play/wwdc2020/10668) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/nearby-interactions#Change-log) + +Date| Changes +---|--- +June 21, 2023| Changed page title from Spatial interactions. + diff --git a/skills/hig-patterns/SKILL.md b/skills/hig-patterns/SKILL.md new file mode 100644 index 00000000..d5956fb1 --- /dev/null +++ b/skills/hig-patterns/SKILL.md @@ -0,0 +1,104 @@ +--- +name: hig-patterns +version: 1.0.0 +description: > + Apple Human Interface Guidelines interaction and UX patterns. Use this skill when the user asks about + "onboarding flow", "user onboarding", "app launch", "loading state", "drag and drop", "search pattern", + "settings design", "notifications", "modality", "multitasking", "feedback pattern", "haptics", + "undo redo", "file management", data entry, sharing, collaboration, full screen, audio, video, + haptic feedback, ratings, printing, help, or account management in Apple apps. + Also use when the user says "how should onboarding work", "my app takes too long to load", + "should I use a modal here", "how do I handle errors", "when should I ask for permissions", + "how to show progress", or "what's the right way to confirm a delete". + Cross-references: hig-foundations for underlying principles, hig-platforms for platform specifics, + hig-components-layout for navigation, hig-components-content for data display. +--- + +# Apple HIG: Interaction Patterns + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Minimize modality.** Use modality only when it is critical to get attention, a task must be completed or abandoned, or saving changes is essential. Prefer non-modal alternatives. + +2. **Provide clear feedback.** Every action should produce visible, audible, or haptic response. Activity indicators for indeterminate waits, progress bars for determinate, haptics for physical confirmation. + +3. **Support undo over confirmation dialogs.** Destructive actions should be reversible when possible. Undo is almost always better than "Are you sure?" + +4. **Launch quickly.** Display a launch screen that transitions seamlessly into the first screen. No splash screens with logos. Restore previous state. + +5. **Defer sign-in.** Let users explore before requiring account creation. Support Sign in with Apple and passkeys. + +6. **Keep onboarding brief.** Three screens max. Let users skip. Teach through progressive disclosure and contextual hints. + +7. **Use progressive disclosure.** Show essentials first, let users drill into details. Don't overwhelm with every option on one screen. + +8. **Respect user attention.** Consolidate notifications, minimize interruptions, give users control over alerts. Never use notifications for marketing. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [charting-data.md](references/charting-data.md) | Charting Data | Data visualization patterns, accessible charts, interactive elements | +| [collaboration-and-sharing.md](references/collaboration-and-sharing.md) | Collaboration & Sharing | Share sheets, activity views, collaborative editing, SharePlay | +| [drag-and-drop.md](references/drag-and-drop.md) | Drag and Drop | Drag sources, drop targets, spring loading, multi-item drag, visual feedback | +| [entering-data.md](references/entering-data.md) | Entering Data | Text fields, pickers, steppers, input validation, keyboard types, autofill | +| [feedback.md](references/feedback.md) | Feedback | Alerts, action sheets, haptic patterns, sound feedback, visual indicators | +| [file-management.md](references/file-management.md) | File Management | Document browser, file providers, iCloud integration, document lifecycle | +| [going-full-screen.md](references/going-full-screen.md) | Going Full Screen | Full-screen transitions, immersive content, exiting full screen | +| [launching.md](references/launching.md) | Launching | Launch screens, state restoration, cold vs warm launch | +| [live-viewing-apps.md](references/live-viewing-apps.md) | Live Viewing Apps | Live content display, real-time updates, Live Activities, Dynamic Island | +| [loading.md](references/loading.md) | Loading | Activity indicators, progress views, skeleton screens, lazy loading, placeholders | +| [managing-accounts.md](references/managing-accounts.md) | Managing Accounts | Sign in with Apple, passkeys, account creation, credential autofill, account deletion | +| [managing-notifications.md](references/managing-notifications.md) | Managing Notifications | Permission requests, grouping, actionable notifications, provisional delivery | +| [modality.md](references/modality.md) | Modality | Sheets, alerts, popovers, full-screen modals, when to use each | +| [multitasking.md](references/multitasking.md) | Multitasking | iPad Split View, Slide Over, Stage Manager, responsive layout, size class transitions | +| [offering-help.md](references/offering-help.md) | Offering Help | Contextual tips, onboarding hints, help menus, support links | +| [onboarding.md](references/onboarding.md) | Onboarding | Welcome screens, feature highlights, progressive onboarding, skip options | +| [playing-audio.md](references/playing-audio.md) | Playing Audio | Audio sessions, background audio, Now Playing, audio routing, interruptions | +| [playing-haptics.md](references/playing-haptics.md) | Playing Haptics | Core Haptics, UIFeedbackGenerator, haptic patterns, custom haptics | +| [playing-video.md](references/playing-video.md) | Playing Video | Video player controls, picture-in-picture, AirPlay, full-screen video | +| [printing.md](references/printing.md) | Printing | Print dialogs, page setup, AirPrint integration | +| [ratings-and-reviews.md](references/ratings-and-reviews.md) | Ratings & Reviews | SKStoreReviewController, timing, frequency limits, in-app feedback | +| [searching.md](references/searching.md) | Searching | Search bars, suggestions, scoped search, results display, recents | +| [settings.md](references/settings.md) | Settings | In-app vs Settings app, preference organization, toggles, defaults | +| [undo-and-redo.md](references/undo-and-redo.md) | Undo and Redo | Shake to undo, undo/redo stack, multi-level undo | +| [workouts.md](references/workouts.md) | Workouts | Workout sessions, live metrics, Always On display, summaries, HealthKit | + +## Pattern Selection Guide + +| User Goal | Recommended Pattern | Avoid | +|---|---|---| +| First app experience | Brief onboarding (max 3 screens) + progressive disclosure | Long tutorials, mandatory sign-up | +| Waiting for content | Skeleton screens or progress indicators | Blocking spinners with no context | +| Confirming destructive action | Undo support | Excessive "Are you sure?" dialogs | +| Collecting user input | Inline validation, smart defaults, autofill | Modal forms for simple inputs | +| Requesting permissions | Contextual, just-in-time with explanation | Requesting all permissions at launch | +| Providing feedback | Haptics + visual indicator | Silent actions with no confirmation | +| Organizing preferences | In-app settings for frequent items | Burying all settings in system Settings app | + +## Output Format + +1. **Recommended pattern with rationale**, citing the relevant reference file. +2. **Step-by-step implementation** covering each screen or state. +3. **Platform variations** for targeted platforms. +4. **Common pitfalls** that violate HIG for this pattern. + +## Questions to Ask + +1. Where in the app does this pattern appear? What comes before and after? +2. Which platforms? +3. Designing from scratch or improving an existing flow? +4. Does this involve sensitive actions? (Destructive operations, payments, permissions) + +## Related Skills + +- **hig-foundations** -- Accessibility, color, typography, and privacy principles underlying every pattern +- **hig-platforms** -- Platform-specific pattern implementations +- **hig-components-layout** -- Structural components (tab bars, sidebars, split views) for navigation patterns +- **hig-components-content** -- Content display within patterns (charts, collections, search results) + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-patterns/references/charting-data.md b/skills/hig-patterns/references/charting-data.md new file mode 100644 index 00000000..305eba09 --- /dev/null +++ b/skills/hig-patterns/references/charting-data.md @@ -0,0 +1,81 @@ +--- +title: "Charting data | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/charting-data + +# Charting data + +Presenting data in a chart can help you communicate information with clarity and appeal. + +![A sketch of a bar chart, suggesting data representation. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/bc4a2c4e929441fc51874ce49b4a5129/patterns-charting-data-intro%402x.png) + +Charts provide efficient ways to communicate complex information without requiring people to read and interpret a lot of text. The graphical nature of charts also gives you additional opportunities to express the personality of your experience and add visual interest to your interface. To learn about the components you use to create a chart, see [Charts](https://developer.apple.com/design/human-interface-guidelines/charts). + +A chart can range from a simple graphic that provides glanceable information to a rich, interactive experience that can form the centerpiece of your app and encourage people to explore the data from various perspectives. Whether simple or complex, you can use charts to help people perform data-driven tasks that are important to them, such as: + + * Analyzing trends based on historical or predicted values + + * Visualizing the current state of a process, system, or quantity that changes over time + + * Evaluating different items — or the same item at different times — by comparing data across multiple categories + + + + +Not every collection of data needs to be displayed in a chart. If you simply need to provide data — and you don’t need to convey information about it or help people analyze it — consider offering the data in other ways, such as in a list or table that people can scroll, search, and sort. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/charting-data#Best-practices) + +**Use a chart when you want to highlight important information about a dataset.** Charts are visually prominent, so they tend to draw people’s attention. Take advantage of this prominence by clearly communicating what people can learn from the data they care about. + +**Keep a chart simple, letting people choose when they want additional details.** Resist the temptation to pack as much data as possible into a chart. Too much data can make a chart visually overwhelming and difficult to use, obscuring the relationships and other information you want to convey. If you have a lot of data to present — or a lot of functionality to provide — consider giving people a way to reveal it gradually. For example, you might let people choose to view different levels of detail or subsets of data to match their interest. To help people learn how to use an interactive chart, you might offer several versions of the chart, each with more functionality than the last. + +**Make every chart in your app accessible.** A chart communicates visually through graphical representations of data and visual descriptions. In addition to the visual descriptions you display, it’s crucial to provide both accessibility labels that describe chart values and components, and accessibility elements that help people interact with the chart. For guidance, see [Enhancing the accessibility of a chart](https://developer.apple.com/design/human-interface-guidelines/charts#Enhancing-the-accessibility-of-a-chart). + +## [Designing effective charts](https://developer.apple.com/design/human-interface-guidelines/charting-data#Designing-effective-charts) + +**In general, prefer using common chart types.** People tend to be familiar with common chart types — such as bar charts and line charts — so using one of these types in your app can make it more likely that people will already know how to read your chart. For guidance, see [Charts](https://developer.apple.com/design/human-interface-guidelines/charts). + +**If you need to create a chart that presents data in a novel way, help people learn how to interpret the chart.** For example, when a Watch pairs with iPhone, Activity introduces the Activity rings by animating them individually, showing people how each ring maps to the move, exercise, and stand metrics. + +**Examine the data from multiple levels or perspectives to find details you can display to enhance the chart.** For example, viewing the data from a macro level can help you determine high-level summaries that people might be interested in, like totals or averages. From a mid-level perspective, you might find ways to help people identify useful subsets of the data, whereas examining individual data points might help you find ways to draw people’s attention to specific values or items. Displaying information that helps people view the chart from various perspectives can encourage them to engage with it. + +![A screenshot of the Stocks app on iPhone. The app uses a line chart to depict the performance of a stock over the currently chosen one-month period.](https://docs-assets.developer.apple.com/published/75cea76eff7e6ee353ad230c147be3da/charts-stocks%402x.png) + +![A screenshot of the Activity screen in the Health app on iPhone. The app uses a set of three bar charts to depict information from the three Activity Rings over the currently chosen one-day period.](https://docs-assets.developer.apple.com/published/b82e0965a76f384beca174253f9c6113/charts-activity%402x.png) + +**Aid comprehension by adding descriptive text to the chart.** Descriptive text titles, subtitles, and annotations help emphasize the most important information in a chart and can highlight actionable takeaways. You can also display brief descriptive text that serves as a headline or summary for a chart, helping people grasp essential information at a glance. For example, Weather displays text that summarizes the information people need right now — such as “Chance of light rain in the next hour” — above the scrolling list of hourly forecasts for the next 24 hours. Although a descriptive headline or summary can make a chart more accessible, it doesn’t take the place of accessibility labels. + +**Match the size of a chart to its functionality, topic, and level of detail.** In general, a chart needs to be large enough to comfortably display the details you need to include and expansive enough for the interactivity you want to support. For example, you always want to make it easy for people to read a chart’s details and descriptive text — like labels and annotations — but you might also want to give people enough room to change the scope of a chart or investigate the data from different perspectives. On the other hand, you might want to use a small chart to offer glanceable information about an individual item or to provide a snapshot or preview of a larger version of the chart that people can reveal in a different view. + +**Prefer consistency across multiple charts, deviating only when you need to highlight differences.** If multiple charts in your app serve a similar purpose, you generally don’t want to imply that the charts are unrelated by using a different type or style for each one. Also, using a consistent visual approach for the charts in your app lets people use what they learn about one chart to help them understand another. Consider using different chart types and styles when you need to highlight meaningful differences between charts. + +**Maintain continuity among multiple charts that use the same data.** When you use multiple charts to help people explore one dataset from different perspectives, it’s important to use one chart type and consistent colors, annotations, layouts, and descriptive text to signal that the dataset remains the same. For example, the Health Trends screen shows small charts that each use a specific visual style to depict a recent trend in an area like steps or resting heart rate. When people choose a chart to reveal all their data in that area, the expanded version uses the same style, colors, marks, and annotations to strengthen the relationship between the versions. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/charting-data#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/charting-data#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/charting-data#Related) + +[Charts](https://developer.apple.com/design/human-interface-guidelines/charts) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/charting-data#Developer-documentation) + +[Swift Charts](https://developer.apple.com/documentation/Charts) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/charting-data#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/89D5888B-58DA-4F47-8E3C-998253F6BA98/9954_wide_250x141_1x.jpg) Bring Swift Charts to the third dimension ](https://developer.apple.com/videos/play/wwdc2025/313) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/FA764D2D-4E15-4E91-91BA-BDAC80FB901B/6694_wide_250x141_1x.jpg) Design app experiences with charts ](https://developer.apple.com/videos/play/wwdc2022/110342) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/4BBCB61E-65ED-43FE-8F7B-81524E0C96BE/6692_wide_250x141_1x.jpg) Design an effective chart ](https://developer.apple.com/videos/play/wwdc2022/110340) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/charting-data#Change-log) + +Date| Changes +---|--- +September 23, 2022| New page. + diff --git a/skills/hig-patterns/references/collaboration-and-sharing.md b/skills/hig-patterns/references/collaboration-and-sharing.md new file mode 100644 index 00000000..59b96f1a --- /dev/null +++ b/skills/hig-patterns/references/collaboration-and-sharing.md @@ -0,0 +1,86 @@ +--- +title: "Collaboration and sharing | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing + +# Collaboration and sharing + +Great collaboration and sharing experiences are simple and responsive, letting people engage with the content while communicating effectively with others. + +![A sketch of a person with an overlapping checkmark, suggesting effective collaboration. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ff23fbfe77df77f6bd5dd710a474b15b/patterns-collaboration-and-sharing-intro%402x.png) + +System interfaces and the Messages app can help you provide consistent and convenient ways for people to collaborate and share. For example, people can share content or begin a collaboration by dropping a document into a Messages conversation or selecting a destination in the familiar share sheet. + +After a collaboration begins, people can use the Collaboration button in your app to communicate with others, perform custom actions, and manage details. In addition, people can receive Messages notifications when collaborators mention them, make changes, join, or leave. + +You can take advantage of Messages integration and the system-provided sharing interfaces whether you implement collaboration and sharing through CloudKit, iCloud Drive, or a custom solution. To offer these features when you use a custom collaboration infrastructure, make sure your app also supports universal links (for developer guidance, see [Supporting universal links in your app](https://developer.apple.com/documentation/Xcode/supporting-universal-links-in-your-app)). + +In addition to helping people share and collaborate on documents, visionOS supports immersive sharing experiences through SharePlay. For guidance, see [SharePlay](https://developer.apple.com/design/human-interface-guidelines/shareplay). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#Best-practices) + +**Place the Share button in a convenient location, like a toolbar, to make it easy for people to start sharing or collaborating.** In iOS 16, the system-provided share sheet includes ways to choose a file-sharing method and set permissions for a new collaboration; iPadOS 16 and macOS 13 introduce similar appearance and functionality in the sharing popover. In your SwiftUI app, you can also enable sharing by presenting a share link that opens the system-provided share sheet when people choose it; for developer guidance, see [`ShareLink`](https://developer.apple.com/documentation/SwiftUI/ShareLink). + +![An illustration of a Notes document on iPhone. The document toolbar prominently features the Share button next to the More button.](https://docs-assets.developer.apple.com/published/00e4629ef73463727909ceecefdf902f/collaboration-share-button%402x.png) + +**If necessary, customize the share sheet or sharing popover to offer the types of file sharing your app supports.** If you use CloudKit, you can add support for sending a copy of a file by passing both the file and your collaboration object to the share sheet. Because the share sheet has built-in support for multiple items, it automatically detects the file and makes the “send copy” functionality available. With iCloud Drive, your collaboration object supports “send copy” functionality by default. For custom collaboration, you can support “send copy” functionality in the share sheet by including a file — or a plain text representation of it — in your collaboration object. + +**Write succinct phrases that summarize the sharing permissions you support.** For example, you might write phrases like “Only invited people can edit” or “Everyone can make changes.” The system uses your permission summary in a button that reveals a set of sharing options that people use to define the collaboration. + +![An illustration of a Notes document with the share sheet open on iPhone, with collaboration options set to indicate that only invited people can edit the selected document.](https://docs-assets.developer.apple.com/published/b30d247d67d1ba3841be8414b65b7320/collaboration-sharing-permission-invited%402x.png) + +![An illustration of a Notes document with the share sheet open on iPhone, with collaboration options set to indicate that everyone can make changes to the selected document.](https://docs-assets.developer.apple.com/published/2bb4701135ff5cf50b67122ea93ea1ef/collaboration-sharing-permission-everyone%402x.png) + +**Provide a set of simple sharing options that streamline collaboration setup.** You can customize the view that appears when people choose the permission summary button to provide choices that reflect your collaboration functionality. For example, you might offer options that let people specify who can access the content and whether they can edit it or just read it, and whether collaborators can add new participants. Keep the number of custom choices to a minimum and group them in ways that help people understand them at a glance. + +**Prominently display the Collaboration button as soon as collaboration starts.** The system-provided Collaboration button reminds people that the content is shared and identifies who’s sharing it. Because the Collaboration button typically appears after people interact with the share sheet or sharing popover, it works well to place it next to the Share button. + +![An illustration of a Notes document open on iPhone. The document toolbar prominently features the Collaboration button next to the Share button.](https://docs-assets.developer.apple.com/published/22a789e7f8d5b3b6a22b3763b21288bd/collaboration-status-active-collaboration-button%402x.png) + +**Provide custom actions in the collaboration popover only if needed.** Choosing the Collaboration button in your app reveals a popover that consists of three sections. The top section lists collaborators and provides communication buttons that can open Messages or FaceTime, the middle section contains your custom items, and the bottom section displays a button people use to manage the shared file. You don’t want to overwhelm people with too much information, so it’s crucial to offer only the most essential items that people need while they use your app to collaborate. For example, Notes summarizes the most recent updates and provides buttons that let people get more information about the updates or view more activities. + +![An illustration of a Notes document on iPhone. A menu is open from the Collaboration button in the document toolbar, with buttons to display the most recent updates and activities.](https://docs-assets.developer.apple.com/published/3ecf0a2e3ac684c0d5bcf8b7d54812bc/collaboration-custom-popover-notes%402x.png) + +**If it makes sense in your app, customize the title of the modal view’s collaboration-management button.** People choose this button — titled “Manage Shared File” by default — to reveal the collaboration-management view where they can change settings and add or remove collaborators. If you use CloudKit sharing, the system provides a management view for you; otherwise, you create your own. + +**Consider posting collaboration event notifications in Messages.** Choose the type of event that occurred — such as a change in the content or the collaboration membership, or the mention of a participant — and include a universal link people can use to open the relevant view in your app. For developer guidance, see [`SWHighlightEvent`](https://developer.apple.com/documentation/SharedWithYou/SWHighlightEvent). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or macOS. Not available in tvOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#visionOS) + +By default, the system supports screen sharing for an app running in the Shared Space by streaming the current window to other collaborators. If one person transitions the app to a Full Space while sharing is in progress, the system pauses the stream for other people until the app returns to the Shared Space. For guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#watchOS) + +In your SwiftUI app running in watchOS, use [`ShareLink`](https://developer.apple.com/documentation/SwiftUI/ShareLink) to present the system-provided share sheet. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#Related) + +[Activity views](https://developer.apple.com/design/human-interface-guidelines/activity-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#Developer-documentation) + +[Shared with You](https://developer.apple.com/documentation/SharedWithYou) + +[`ShareLink`](https://developer.apple.com/documentation/SwiftUI/ShareLink) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/74342B30-92E9-48F3-B0F2-6E42C8FD9391/6506_wide_250x141_1x.jpg) Design for Collaboration with Messages ](https://developer.apple.com/videos/play/wwdc2022/10015) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/9785075B-13E9-4631-AD74-77B814019BF4/6589_wide_250x141_1x.jpg) Enhance collaboration experiences with Messages ](https://developer.apple.com/videos/play/wwdc2022/10095) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/39FE3E81-AB11-4FEE-AE05-37951E2ADB12/6587_wide_250x141_1x.jpg) Integrate your custom collaboration app with Messages ](https://developer.apple.com/videos/play/wwdc2022/10093) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/collaboration-and-sharing#Change-log) + +Date| Changes +---|--- +December 5, 2023| Added artwork illustrating button placement and various types of collaboration permissions. +June 21, 2023| Updated to include guidance for visionOS. +September 14, 2022| New page. + diff --git a/skills/hig-patterns/references/drag-and-drop.md b/skills/hig-patterns/references/drag-and-drop.md new file mode 100644 index 00000000..586bb6e7 --- /dev/null +++ b/skills/hig-patterns/references/drag-and-drop.md @@ -0,0 +1,134 @@ +--- +title: "Drag and drop | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/drag-and-drop + +# Drag and drop + +Using drag and drop, people can move or duplicate selected photos, text, and other content by dragging the selection from one location to another. + +![A sketch of two overlapping squares containing an arrow pointing to the upper-left, suggesting a transition to a new destination. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/e5f75d051f0c1030012fab8220990cc6/patterns-drag-and-drop-intro%402x.png) + +To perform drag and drop, people select content in one location, called the _source_ , and drop it in another, called the _destination_. These locations can be in the same container — like a text view — or in different containers, like text views on opposite sides of a split view, or even in different apps. + +Depending on various factors, the drag and drop action might _move_ the selected content to the destination or _copy_ it. After a successful drop, moved content exists only in the destination; copied content exists in both locations. As a general rule, dropping selected content within the same container moves it, whereas dropping content in a different container copies it. Dragging and dropping content between apps always results in a copy. + +People use different interactions to perform drag and drop depending on platform. For example: + + * In visionOS, people pinch and hold a virtual object while dragging it to a new location in any direction, including along the z-axis. + + * iOS and iPadOS support drag and drop through gestures on the touchscreen, interactions with a pointing device, and through full keyboard-access mode. + + * Universal Control lets people drag content between their Mac and iPad. + + * On a Mac, people can interact with a pointing device, use full keyboard access mode, or use VoiceOver to perform drag and drop. + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Best-practices) + +**As much as possible, support drag and drop throughout your app.** Most people are familiar with drag and drop and they often try it everywhere. When you use system-provided components — such as text fields and text views — you get built-in support for drag and drop. + +**Offer alternative ways to accomplish drag-and-drop actions.** Sometimes, drag-and-drop operations are inconvenient or impossible for people to perform, so it’s important to provide other ways to do the same things. For example, you can include menu commands that people can use to copy an item and move it to another location. In iOS and iPadOS, you can use accessibility APIs to identify sources and destinations so that people can use assistive technologies to drag and drop in your app (for developer guidance, see [`accessibilityDragSourceDescriptors`](https://developer.apple.com/documentation/ObjectiveC/NSObject-swift.class/accessibilityDragSourceDescriptors) and [`accessibilityDropPointDescriptors`](https://developer.apple.com/documentation/ObjectiveC/NSObject-swift.class/accessibilityDropPointDescriptors)). + +**Determine when dragging and dropping content within your app results in a move or a copy.** In general, a move makes sense when the source and destination containers are the same — such as dragging text from one location to another within a document — and a copy makes sense when they’re different, like dragging an image from one document to another. Before you change these defaults, consider the behavior that most people expect and prefer the one that is least likely to result in frustration or data loss. + +**Support multi-item drag and drop when it makes sense.** People appreciate the convenience of dragging a group of items to a destination, instead of dragging each item separately. In iOS, iPadOS, macOS, and visionOS, people can select multiple items and drag them as a group; macOS also lets people select multiple items from several apps and drag them as a group. In iPadOS, people can select an item, start dragging it, and add other items to the group without stopping the drag operation. + +**Prefer letting people undo a drag-and-drop operation.** Sometimes, people inadvertently drop content in the wrong destination, so they appreciate being able to undo the action and return to their previous state. You might also be able to help people avoid mistakes by asking for confirmation before completing a drag-and-drop operation that can’t be undone. In macOS, for example, the Finder asks for confirmation when people drag a file into a write-only folder because they won’t be able to open the folder and remove the dropped item. In some situations, it might make sense to provide a way to reverse the results of drag and drop when people can’t undo it. For example, Photos lets people cancel photo sharing after dropping a photo into a shared photo stream. + +**Consider offering multiple versions of dragged content, ordered from highest to lowest fidelity.** By providing multiple alternatives, the destination can choose the highest quality version it can accept. For example, if people can drag a line drawing they created in your app, you could offer a PDF vector representation, a lossless PNG image with transparency, and a lossy JPEG image without transparency, in that order. Another example is an app that uses rich, complicated objects, like charts. This app might offer the native chart object followed by a simpler version — like an image of the chart — for destinations that don’t support chart objects. + +**Consider supporting spring loading.** Spring loading lets people activate certain controls, like buttons and segmented controls, by dragging selected content over them. For example, Calendar lets people drag a selected event over the day, week, month, or year segments in the toolbar, giving them a convenient way to move the event to a different date. On a Mac equipped with a Magic Trackpad, a button or segmented control can activate when people force-click it while continuing to hold the content; on iPad, these components can activate when people hover over them while holding the content. + +## [Providing feedback](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Providing-feedback) + +Drag and drop is a dynamic process that can result in multiple outcomes. To help people feel in control the process, it’s crucial to provide clear and continuous feedback throughout. + +**Display a drag image as soon as people drag a selection about three points.** It works well to create a translucent representation of the content people are dragging. Translucency helps distinguish the representation from the original content and lets people see destinations as they pass over them. Display the drag image until people drop the content. + +**If it adds clarity, modify the drag image to help people predict the result of a drag-and-drop operation.** For example, when dragging a photo into a document, the drag image could expand to show the default size of the photo in the document. You can also use drag _flocking_ to visually group multiple drag items — letting people confirm that they haven’t missed an item they want to drag — and then ungroup the items when people drop them. Although changing the drag image can provide valuable feedback, avoid creating a distracting experience in which the drag image is constantly and radically changing. + +**Show people whether a destination can accept dragged content.** For example, you might display an insertion point or highlight a containing view only when the destination can accept a dragged item, and show no visual feedback — or an explicit “not allowed” image, like the `circle.slash` from SF Symbols — when it can’t. Display highlighting or other visual cues only while the content is positioned above the destination, removing the visual feedback when people drag the content away. When there are multiple possible destinations, provide visual cues that help people identify one at a time. + +**When people drop an item on an invalid destination, or when dropping fails, provide visual feedback.** For example, the item can move back from its current location to its source (if the source is still visible) or it can scale up and fade out to give the impression of the item evaporating instead of landing successfully. + +## [Accepting drops](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Accepting-drops) + +**Scroll the contents of a destination when necessary.** When people drag an item within a scrolling container that has a lot of content, the content can automatically scroll as people move the item over it. This behavior makes it easy for people to find the right place to drop the item, but if they continue the drag operation outside of the container, automatic scrolling is no longer necessary. System-provided text views and text fields behave this way by default. + +**When there’s a choice, pick the richest version of dropped content your app can accept.** For example, if people drag a chart object from another app, the drag operation might offer both the rich, native chart object and a simple image of it. If your app supports charts, extract and display the native chart object; it it doesn’t, use the image instead. + +**Extract only the relevant portion of dropped content if necessary.** For example, when people drag a contact to a recipient field in an email, Mail displays only the name and email address, not the contact’s address information. + +**When a physical keyboard is attached, check for the Option key at drop time.** When people hold the Option key while dragging, they can force a drag-and-drop operation within the same container to behave like a copy. If people stop holding Option before dropping content in the same container, the drag operation results in a move. + +**Provide feedback when dropped content needs time to transfer.** For example, you might display a progress indicator to help people estimate how long the transfer will take. In collections, lists, and tables, you might also display a placeholder at the drop location so people know where to find the content after it finishes transferring. The system can display an alert when a time-consuming transfer occurs between apps. + +**Provide feedback when dropped content initiates a task or action.** If people drop content onto a control that initiates a task — such as printing — show people that the task has begun and keep them informed of its progress. + +**Apply appropriate styling to dropped text.** When the source and destination both support the same text styles, make sure dropped text maintains its original font, typeface, size, and other attributes. Otherwise, apply the destination’s style to dropped text. + +**After a drop, maintain the content’s selection state in the destination, updating it in the source as needed.** People expect the content they drop to remain selected so they can immediately act on it. When the source and destination are the same container, the content disappears from its original location when the drag operation performs a move. When a drag operation within the same container performs a copy, remove the selection state from the content that remains in the original location. When people drag selected content to a different container, deselect the content in the source. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Platform-considerations) + + _Not supported in tvOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#iOS-iPadOS) + +**Let people perform multiple simultaneous drag activities.** In iPadOS, people can sequentially add items to an in-progress drag session, gathering as many items as their fingers can handle. For example, people can select an app icon on the Home Screen, start dragging it, and select additional app icons before dropping all of them in a different Home Screen or in a folder. To support this interaction, you need to let people add items during a drag — providing visual feedback through flocking — and accept multiple, simultaneous drops. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#macOS) + +**Consider letting people drag content from your app into the Finder.** When you support this, be sure to present the content in a format your app can open later. For example, Calendar lets people drag an event to the Finder as a `.ics` file. People can share this file with others or drag it back to Calendar to open it. When necessary, you can output dragged content in a _clipping_ , which is a temporary container for storing dragged content. For example, most system apps let people drag text to the Finder, where it appears as a clipping. Later, people can drag the clipping into a text field or other location that accepts text. Note that a drag-and-drop clipping isn’t related to the Clipboard. + +**Let people drag selected content from an inactive window without first making the window active.** Selected content in an inactive window is known as a _background selection_ and has a different appearance from selected content in the active window. In general, people expect to drag a background selection to the active window without bringing the inactive window forward. + +**When possible, let people drag individual items from an inactive window without affecting an existing background selection.** For example, people can drag an unselected file from an inactive Finder window without deselecting any of the window’s selected files. + +**Consider displaying a badge during multi-item drag operations.** A badge is a small filled oval containing a number you can use to indicate the number of items people are dragging. If a destination can accept only a subset of dragged items, update the badge to show the new number. + +**Consider changing the pointer appearance to indicate what will happen when people drop content.** In addition to using the _copy_ pointer, you might want to use the _drag link_ , _disappearing item_ , and _operation not allowed_ pointers, depending on the situation. For guidance, see [Pointers](https://developer.apple.com/design/human-interface-guidelines/pointing-devices#Pointers). + +**As much as possible, let people select and drag content with a single motion.** Unless people are selecting multiple items, they appreciate it when they don’t have to pause between making a selection and starting the drag operation. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#visionOS) + +**When possible, launch your app to handle content that people drop into empty space.** When you associate a user activity with draggable app content, your app can open a window or scene that handles the content when people drop it. For example, when people drop a URL into empty space, it launches Safari; when people drop Quick Look–supported content, Quick Look launches to display it. For developer guidance, see [`NSUserActivity`](https://developer.apple.com/documentation/Foundation/NSUserActivity). + +Video with custom controls. + +Content description: A recording that shows a wearer dragging a 3D file named meteor out of a Finder window. The wearer drags the file into empty space, dropping it in an area that's visually near a table in their physical surroundings. The dropped file opens, showing a 3D meteor that appears to float above the table. + +Play + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Related) + +[Universal Control](https://support.apple.com/en-us/HT212757) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Developer-documentation) + +[Drag and drop](https://developer.apple.com/documentation/UIKit/drag-and-drop) — UIKit + +[Drag and Drop](https://developer.apple.com/documentation/AppKit/drag-and-drop) — AppKit + +[File Provider](https://developer.apple.com/documentation/FileProvider) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/9CCE8A5D-A751-441C-B88F-FB91E2D1958E/4949_wide_250x141_1x.jpg) What's new in UIKit ](https://developer.apple.com/videos/play/wwdc2021/10059) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/F93E642C-EBBD-479E-AC7F-F801103EF53F/5227_wide_250x141_1x.jpg) SwiftUI on the Mac: The finishing touches ](https://developer.apple.com/videos/play/wwdc2021/10289) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/5C8F0205-3AE9-4647-870B-5C10FB7EA6FF/3520_wide_250x141_1x.jpg) Designed for iPad ](https://developer.apple.com/videos/play/wwdc2020/10206) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop#Change-log) + +Date| Changes +---|--- +October 24, 2023| Added artwork. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/entering-data.md b/skills/hig-patterns/references/entering-data.md new file mode 100644 index 00000000..aae13e20 --- /dev/null +++ b/skills/hig-patterns/references/entering-data.md @@ -0,0 +1,69 @@ +--- +title: "Entering data | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/entering-data + +# Entering data + +When you need information from people, design ways that make it easy for them to provide it without making mistakes. + +![A sketch of a pencil writing within a field, suggesting data entry. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/34d57a13e8fcf5f561a1d9c1eccf8e30/patterns-entering-data-intro%402x.png) + +Entering information can be a tedious process regardless of the interaction methods people use. Improve the experience by: + + * Pre-gathering as much information as possible to minimize the amount of data that people need to supply + + * Supporting all available input methods so people can choose the method that works for them + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/entering-data#Best-practices) + +**Get information from the system whenever possible.** Don’t ask people to enter information that you can gather automatically — such as from settings — or by getting their permission, such as their location or calendar information. + +**Be clear about the data you need.** For example, you might display a prompt in a text field — like “username@company.com” — or provide an introductory label that describes the information, like “Email.” You can also prefill fields with reasonable default values, which can minimize decision making and speed data entry. + +**Use a secure text-entry field when appropriate.** If your app or game needs sensitive data, use a field that obscures people’s input as they enter it, typically by displaying a small filled circle symbol for each character. For developer guidance, see [`SecureField`](https://developer.apple.com/documentation/SwiftUI/SecureField). In tvOS, you can also configure a [digit entry view](https://developer.apple.com/design/human-interface-guidelines/digit-entry-views) to obscure the numerals people enter (for developer guidance, see [`isSecureDigitEntry`](https://developer.apple.com/documentation/TVUIKit/TVDigitEntryViewController/isSecureDigitEntry)). When you use the system-provided text field in visionOS, the system shows the entered data to the wearer, but not to anyone else; for example, a secure text field automatically blurs when people use AirPlay to stream their content. + +**Never prepopulate a password field.** Always ask people to enter their password or use biometric or keychain authentication. For guidance, see [Managing accounts](https://developer.apple.com/design/human-interface-guidelines/managing-accounts). + +**When possible, offer choices instead of requiring text entry.** It’s usually easier and more efficient to choose from lists of options than to type information, even when a keyboard is conveniently available. When it makes sense, consider using a picker, menu, or other selection component to give people an easy way to provide the information you need. + +**As much as possible, let people provide data by dragging and dropping it or by pasting it.** Supporting these interactions can ease data entry and make your experience feel more integrated with the rest of the system. + +**Dynamically validate field values.** People can get frustrated when they have to go back and correct mistakes after filling out a lengthy form. When you verify values as soon as people enter them — and provide feedback as soon as you detect a problem — you give them the opportunity to correct errors right away. For numeric data in particular, consider using a number formatter, which automatically configures a text field to accept only numeric values. You can also configure a formatter to display the value in a specific way, such as with a certain number of decimal places, as a percentage, or as currency. + +**When data entry is necessary, make sure people understand that they must provide the required data before they can proceed.** For example, if you include a Next or Continue button after a set of text fields, make the button available only after people enter the data you require. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/entering-data#Platform-considerations) + + _No additional considerations for iOS, iPadOS, tvOS, visionOS, or watchOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/entering-data#macOS) + +**Consider using an expansion tooltip to show the full version of clipped or truncated text in a field.** An _expansion tooltip_ behaves like a regular tooltip, appearing when the pointer rests on top of a field. Apps running in macOS — including iOS and iPadOS apps running on a Mac — can use an expansion tooltip to help people view the complete data they entered when a text field is too small to display it. For guidance, see [Offering help > macOS, visionOS](https://developer.apple.com/design/human-interface-guidelines/offering-help#macOS-visionOS). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/entering-data#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/entering-data#Related) + +[Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields) + +[Virtual keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards) + +[Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/entering-data#Developer-documentation) + +[Input events](https://developer.apple.com/documentation/SwiftUI/Input-events) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/entering-data#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/9CCE8A5D-A751-441C-B88F-FB91E2D1958E/4949_wide_250x141_1x.jpg) What's new in UIKit ](https://developer.apple.com/videos/play/wwdc2021/10059) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/entering-data#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/feedback.md b/skills/hig-patterns/references/feedback.md new file mode 100644 index 00000000..1d76ac21 --- /dev/null +++ b/skills/hig-patterns/references/feedback.md @@ -0,0 +1,67 @@ +--- +title: "Feedback | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/feedback + +# Feedback + +Feedback helps people know what’s happening, discover what they can do next, understand the results of actions, and avoid mistakes. + +![A sketch of a pointer surrounded by a circular set of short lines, suggesting a response to a mouse click. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d7e2c91a509e05b5e8ee422c6fea86b3/patterns-feedback-intro%402x.png) + +Providing clear, consistent feedback as people interact with your app or game can make it feel intuitive and encourage deeper exploration. Feedback can communicate several different things, such as: + + * The current status of something + + * The success or failure of an important task or action + + * A warning about an action that can have negative consequences + + * An opportunity to correct a mistake or problematic situation + + + + +The most effective feedback tends to match the significance of the information to the way it’s delivered. For example, it often works well to display status information in a passive way so that people can view it when they need it. In contrast, a warning about possible data loss needs to interrupt people so they have a chance to avoid the problem. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/feedback#Best-practices) + +**Make sure all feedback is accessible.** When you use multiple ways to provide feedback, you reach more people and give them the opportunity to receive the feedback in ways that work for them. For example, when you provide feedback using color, text, sound, and haptics, people can receive it whether they silence their device, look away from the screen, or use VoiceOver. (For guidance on providing haptic feedback, see [Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics).) + +**Consider integrating status feedback into your interface.** When status feedback is available near the items it describes, people get important information without having to take action or leave their current context. For example, Mail in iOS and iPadOS describes the most recent update and displays the number of unread messages in the toolbar of the mailbox screen, making the information unobtrusive but easy for people to check when they’re interested. + +**Use alerts to deliver critical — and ideally actionable — information.** By design, alerts disrupt the current context, so you need to match the importance of the information to the level of interruption. Alerts can lose their impact if you use them too often or to deliver unimportant information. For guidance, see [Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts). + +**Warn people when they initiate a task that can cause data loss that’s unexpected and irreversible.** In contrast, don’t warn people when data loss is the expected result of their action. For example, the Finder doesn’t warn people every time they throw away a file because deleting the file is the expected result. + +**When it makes sense, confirm that a significant action or task has completed.** For example, people appreciate getting feedback that confirms a successful Apple Pay transaction. It’s generally best to reserve this type of confirmation for activities that are sufficiently important — because people typically expect their action or task to succeed, they only need to know when it doesn’t. + +**Show people when a command can’t be carried out and help them understand why.** For example, if people request directions without specifying a destination, Maps tells them that it can’t provide directions to and from the same location. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/feedback#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or visionOS._ + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/feedback#watchOS) + +**Avoid displaying an indeterminate progress indicator — such as a loading indicator — in a watchOS app.** An animated indicator can make people think they need to continue paying attention to the display, which isn’t a good user experience. To provide a better experience, reassure people that they’ll receive a notification when the process completes. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/feedback#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/feedback#Related) + +[Playing audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio) + +[Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics) + +[Motion](https://developer.apple.com/design/human-interface-guidelines/motion) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/feedback#Developer-documentation) + +[Animation and haptics](https://developer.apple.com/documentation/UIKit/animation-and-haptics) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/feedback#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/42/E55D60D2-C7D7-4F96-9A9D-8AF4C7D6BB49/2247_wide_250x141_1x.jpg) Designing Fluid Interfaces ](https://developer.apple.com/videos/play/wwdc2018/803) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/2546ECBD-6443-41EC-921D-6429026F8B67/1700_wide_250x141_1x.jpg) Essential Design Principles ](https://developer.apple.com/videos/play/wwdc2017/802) + diff --git a/skills/hig-patterns/references/file-management.md b/skills/hig-patterns/references/file-management.md new file mode 100644 index 00000000..fb9fda5a --- /dev/null +++ b/skills/hig-patterns/references/file-management.md @@ -0,0 +1,135 @@ +--- +title: "File management | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/file-management + +# File management + +Some apps can support documents and files that people expect to manage throughout the system. + +![A sketch of a document with the upper right corner folded in, suggesting interaction with files. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/c753c4f8870e5c729becf174c1f0c5e5/patterns-file-management-intro%402x.png) + +Document-based apps — such as Pages, Keynote, Photos, and Preview — help people create, edit, and save documents and files, often providing customized ways for people to browse for content they want to open in the app. + +People also expect to browse documents without first opening a document-based app. On a Mac, for example, people use the Finder to access the macOS file system; on iPhone, iPad, and Apple Vision Pro, people use the Files app to manage the documents and files on their device. In watchOS and tvOS, people don’t typically create, edit, or manage documents, so these systems don’t provide a document-browsing interface. + +## [Creating and opening files](https://developer.apple.com/design/human-interface-guidelines/file-management#Creating-and-opening-files) + +**Use app menus and keyboard shortcuts to give people convenient ways to create and open documents.** In iPadOS and macOS, people expect to create new documents or open existing ones using familiar menu commands. When you provide commands like New or Open, iPadOS presents them in the shortcuts interface that displays when people hold the Command key on a connected hardware keyboard, and macOS presents them in the menu bar File menu. Regardless of the availability of keyboard shortcuts, include an Add (+) button to help people create a new document. In a macOS app, you put the add action in the File menu (for guidance, see [File menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#File-menu)). + +**If your app requires a custom file browser, support people’s understanding of the platform’s file system.** People who are familiar with the Finder and Files apps already understand the basic layout of their device’s file system. Although you might want to show the most relevant part of the file system when your custom file browser opens — for example, a Documents or iCloud folder or the most recently selected location — let people use your browser to view the rest of the file system if they want. + +## [Saving work](https://developer.apple.com/design/human-interface-guidelines/file-management#Saving-work) + +**Help people be confident that their work is always preserved unless they cancel or delete it.** In general, avoid making people take an explicit action to save their work. Instead, automatically perform periodic saves while they’re editing and when they close a file or switch to another app. + +**Hide file extensions by default, but let people view them if they choose.** Be sure to reflect the current choice in all the save or open interfaces you display. + +## [Quick Look previews](https://developer.apple.com/design/human-interface-guidelines/file-management#Quick-Look-previews) + +Quick Look helps you create previews of the files your app handles so that people can view them within your app and in some cases interact with them. For example, you can use Quick Look to let people listen to a preview of an audio file, add markup to a photo’s preview, or rotate and scale a 3D file preview to examine it in different ways. + +**Use a Quick Look viewer to let people preview a file even when your app can’t open it.** If your app lets people attach or otherwise interact with files that it doesn’t support, implementing a Quick Look viewer lets people preview those files without leaving your app. + +**Consider implementing a Quick Look generator if your app produces custom file types.** A Quick Look generator lets other apps — including the Finder, Files, and Spotlight — display previews of your documents, making it easier for people to find them. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/file-management#Platform-considerations) + + _No additional considerations for tvOS, visionOS, or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/file-management#iOS-iPadOS) + +#### [Document launcher](https://developer.apple.com/design/human-interface-guidelines/file-management#Document-launcher) + +Starting in iOS 18 and iPadOS 18, document-based apps can use the system’s document launcher to give people a consistent, highly graphical way to browse, open, and create files. The document launcher presents a full-screen experience that highlights key elements of your app’s theme, while making it easy for people to create new documents. For developer guidance, see [`DocumentGroupLaunchScene`](https://developer.apple.com/documentation/SwiftUI/DocumentGroupLaunchScene). + +The document launcher consists of three main parts: + + * A _title card_ that displays the app title and two app-specific buttons + + * A background image that appears behind the title card and additional images — called _accessories_ — that can appear around it + + * A sheet that contains a file browser and optional app-specific controls + + + + +You can customize all three parts of the document launcher. Although the system automatically displays your app name in the title card, you specify the text and functions of the card’s primary and secondary buttons. You can also create a custom background image, one or more accessory images to surround the title card, and provide some custom controls that can appear in the file browser’s toolbar. + +![A screenshot of a writing app's document launcher on iPad in landscape orientation. The document launcher displays a custom background and two accessory images. At the bottom, the file browser sheet provides 3 tabs: Recents, Shared, and Browse.](https://docs-assets.developer.apple.com/published/5c3d3fe966c8f4d89b462856bec0ed24/file-management-document-launcher%402x.png) + +**Assign the title card’s buttons to your app’s most important functions.** The primary button typically creates a new document, and the secondary button can provide additional options. For example, the primary button in Numbers is Start Writing and the secondary button is Choose a Template. + +**Provide a background that’s clearly distinct from the accessories and title card.** You can use a solid color, a gradient, or a pattern. Avoid including complex images or patterns that might distract from foreground elements. + +**Be mindful of accessory placement.** For example, you can place accessories both in front of and behind the title card to create the appearance of depth, but you need to make sure that your app name and both buttons remain clearly visible. Avoid cluttering the title card with too many accessories, and be sure to test its overall appearance across the range of screen sizes and device orientations that you support. + +**Use animation sparingly.** Too much motion on the display can confuse or disorient people. If you want to animate your accessories, consider creating gentle, repeating animations that subtly highlight and enhance your app’s content. For example, you might create an animation that makes an accessory appear to breathe or sway softly. For guidance, see [Motion](https://developer.apple.com/design/human-interface-guidelines/motion). + +#### [File provider app extension](https://developer.apple.com/design/human-interface-guidelines/file-management#File-provider-app-extension) + +If your app can share its files with other apps, you can create a file provider app extension that displays a custom interface for importing, exporting, opening, and moving your app’s documents. For developer guidance, see [File Provider](https://developer.apple.com/documentation/FileProvider). An _app extension_ is code you provide that people can install and use to extend the functionality of a specific area of the system; to learn more, see [App extensions](https://developer.apple.com/app-extensions/). + +**When someone uses your file provider extension to open or import documents, display only documents that are appropriate in the current context.** For example, if a PDF-editing app loads your extension, only list PDF files for opening or import. You might also want to display additional information, such as modification dates, sizes, and whether documents are local or remote. + +**Let people select a destination when exporting and moving documents.** Unless your app stores documents in a single directory, let people navigate to a specific destination in your directory hierarchy. You could also provide a way to add new subdirectories. + +**Avoid including a custom top toolbar.** Your extension loads within a modal view that already includes a toolbar. Providing a second toolbar is confusing and takes space away from your content. + +Your app can also let people browse and open files from other apps. For developer guidance, see [Adding a document browser to your app](https://developer.apple.com/documentation/UIKit/adding-a-document-browser-to-your-app). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/file-management#macOS) + +#### [Custom file management](https://developer.apple.com/design/human-interface-guidelines/file-management#Custom-file-management) + +People have strong associations with the familiar file browsing experience of the Finder and most document-based apps. Use the default file browser unless you have an important reason to create a custom one. + +**Make your custom file-opening interface convenient.** For example, people might appreciate an “open recent” action in addition to the simple “open” action. You might also want to let people choose criteria on which to filter the file-browsing experience, or select multiple documents to open at once. In a macOS open panel, you can customize the title of the Open button to reflect the task — for example, if your app lets people insert a file’s contents into the current document, you might change the title to Insert. + +**Provide a save interface to let people change a file’s name, format, or location.** By default, a new document’s title is “Untitled” until people choose a custom name. As with a document-opening interface, a save view can also provide a browsing experience that defaults to a logical location to help people place the saved document where they want. If you support saving content in different formats, also give people a way to choose a specific file format. + +**Consider extending the functionality of the Save dialog.** If it makes sense in your app, you can add a custom accessory view containing useful settings or options to the Save dialog. For example, the dialog for saving Mail messages as files contains an option to include attachments. + +#### [Finder Sync extensions](https://developer.apple.com/design/human-interface-guidelines/file-management#Finder-Sync-extensions) + +If your app syncs local and remote files, you can create a Finder Sync app extension to express file synchronization status and control within the Finder. For developer guidance, see [Finder Sync](https://developer.apple.com/documentation/FinderSync). + +For example, you can use a Finder Sync extension to: + + * Display badges in the Finder to indicate the sync status of items + + * Provide custom contextual menu items that perform file and folder management tasks, like favoriting and adding password-protection + + * Provide custom toolbar buttons that perform global actions, like initiating a sync operation + + + + +**Help people avoid losing work if they turn off autosaving.** People can turn off autosaving by selecting the “Ask to keep changes when closing documents” toggle in Desktop & Dock settings. In this scenario, show that a document has unsaved changes and present a save dialog when people choose to close the document, quit your app, log out, or restart. + +**When autosaving is off, make sure people know when a document has unsaved changes.** To show that there are unsaved changes, display a dot on the document window’s close button and next to the document’s name in your app’s Window menu. When autosaving is on, showing a dot in these locations is confusing, because it implies that people need to take action to avoid losing their work. Regardless of autosave status, you can append “Edited” to the document’s title in the title bar, but be sure to remove this suffix as soon as autosave occurs or when people explicitly save their work. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/file-management#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/file-management#Related) + +[Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars) + +[File menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#File-menu) + +[Printing](https://developer.apple.com/design/human-interface-guidelines/printing) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/file-management#Developer-documentation) + +[Documents](https://developer.apple.com/documentation/SwiftUI/Documents) — SwiftUI + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/file-management#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/68960E87-E488-40C3-90E3-A820B5119FF0/3727_wide_250x141_1x.jpg) Build document-based apps in SwiftUI ](https://developer.apple.com/videos/play/wwdc2020/10039) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/file-management#Change-log) + +Date| Changes +---|--- +June 10, 2024| Added guidelines for using the document launcher in iOS and iPadOS. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/going-full-screen.md b/skills/hig-patterns/references/going-full-screen.md new file mode 100644 index 00000000..8dc8ff8f --- /dev/null +++ b/skills/hig-patterns/references/going-full-screen.md @@ -0,0 +1,79 @@ +--- +title: "Going full screen | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/going-full-screen + +# Going full screen + +iPhone, iPad, and Mac offer full-screen modes that let people expand a window to fill the screen, hiding system controls and providing a distraction-free environment. + +![A sketch of two outward-pointing arrows arranged in a vertical line extending from the upper-left to the bottom-right, suggesting expansion. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b07f350730ba32976cba9f14829b2ce1/patterns-going-full-screen-intro%402x.png) + +Apple TV and Apple Watch don’t offer full-screen modes because apps and games already fill the screen by default. Apple Vision Pro doesn’t offer a full-screen mode because people can expand a window to fill more of their view or use the Digital Crown to hide passthrough and transition to a more immersive experience (for guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences)). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#Best-practices) + +**Support full-screen mode when it makes sense for your experience.** People appreciate full-screen mode when they want to concentrate on a task or be immersed in content. Consider offering a full-screen mode if your experience lets people play a game; view media like videos or photo slideshows; or perform an in-depth task that benefits from a distraction-free environment. + +**If necessary, adjust your layout in full-screen mode, but don’t programmatically resize your window.** When a window is larger in full-screen mode than in non-full-screen mode, you want to keep essential content prominent while making good use of the extra space. For example, it might make sense to adjust the proportions of your interface without changing which items appear. If you make such adjustments, be sure they’re subtle enough to maintain a consistent interface and avoid causing visually jarring transitions between modes. + +**Continue to provide access to essential features and controls so people can complete their task without exiting full-screen mode.** For example, a full-screen media experience needs to make playback controls persistently available or easy to reveal when people need them. + +**Except in games, let people reveal the Dock while your iPadOS or macOS app is in full-screen mode.** In iPadOS and macOS, it’s important to preserve access to the Dock so people can quickly open other apps and Dock items. To help prevent people from accidentally revealing the Dock while they’re playing your full-screen game, you can ask iPadOS to ignore an initial swipe up from the screen’s bottom edge or hide the Dock entirely in macOS. For developer guidance, see [`preferredScreenEdgesDeferringSystemGestures`](https://developer.apple.com/documentation/SwiftUI/UIHostingController/preferredScreenEdgesDeferringSystemGestures) (SwiftUI), [`preferredScreenEdgesDeferringSystemGestures`](https://developer.apple.com/documentation/UIKit/UIViewController/preferredScreenEdgesDeferringSystemGestures) (UIKit) and [`hideDock`](https://developer.apple.com/documentation/AppKit/NSApplication/PresentationOptions-swift.struct/hideDock) (AppKit). + +**After people switch away from your full-screen experience, help them resume where they left off when they return.** For example, a game or a slideshow needs to pause automatically when people leave the experience so they don’t miss anything. + +**Let people choose when to exit full-screen mode.** People generally don’t expect full-screen mode to end automatically when they switch to a different experience or finish an absorbing activity, like playing a game or viewing a movie. + +**Prioritize content by temporarily hiding toolbars and navigation controls.** You can offer a distraction-free environment by hiding elements when content is the primary focus, such as when viewing full-screen photos or reading a document. If you implement such behavior, let people restore the hidden elements with a familiar gesture or action like tapping, swiping down, or moving the cursor to the top of the screen. Be sure to keep controls visible when they’re essential for navigation or performing tasks. Although a visionOS window can hide its toolbars or navigation controls, people generally expect different types of immersive experiences while wearing Apple Vision Pro; for guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#Platform-considerations) + + _Not supported in tvOS, visionOS, or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#iOS-iPadOS) + +**Consider deferring system gestures to prevent accidental exits in a full-screen app or game.** By default, the Home Screen indicator automatically hides shortly after someone switches to your app or game. It reappears when someone interacts with the bottom portion of the screen, allowing them to swipe once to exit. Whenever possible, retain this behavior because it’s familiar and what people expect. If supporting this results in unexpected exits, you can enable two swipes rather than one to exit. For developer guidance, see [`preferredScreenEdgesDeferringSystemGestures`](https://developer.apple.com/documentation/SwiftUI/UIHostingController/preferredScreenEdgesDeferringSystemGestures). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#macOS) + +**Use the system-provided full-screen experience.** Using the system’s full-screen support ensures that your full-screen window works well in all contexts. For example, some Mac models include a camera housing that occupies an area at the top-center of the screen. Using the system’s full-screen support automatically accommodates this area. For developer guidance, see [`toggleFullScreen(_:)`](https://developer.apple.com/documentation/AppKit/NSWindow/toggleFullScreen\(_:\)). + +**In a game, don’t change the display mode when players go full screen.** People expect to be in control of their display mode, and changing it automatically doesn’t improve performance. + +For additional developer guidance, see [Managing your game window for Metal in macOS](https://developer.apple.com/documentation/Metal/managing-your-game-window-for-metal-in-macos). + +**Always let people choose when to enter full-screen mode.** Prefer letting people use your window’s Enter Full Screen button, View menu item, or the Control-Command-F keyboard shortcut. Avoid offering a custom menu of window modes. In a game, you might also provide a custom [toggle](https://developer.apple.com/design/human-interface-guidelines/toggles) that turns full-screen mode on and off. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +[Multitasking](https://developer.apple.com/design/human-interface-guidelines/multitasking) + +[Windows](https://developer.apple.com/design/human-interface-guidelines/windows) + +[The menu bar](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#Developer-documentation) + +[`fullScreenCover(item:onDismiss:content:)`](https://developer.apple.com/documentation/SwiftUI/View/fullScreenCover\(item:onDismiss:content:\)) — SwiftUI + +[`NSScreen`](https://developer.apple.com/documentation/AppKit/NSScreen) — AppKit + +[`NSWindow.CollectionBehavior`](https://developer.apple.com/documentation/AppKit/NSWindow/CollectionBehavior-swift.struct) — AppKit + +[Managing your game window for Metal in macOS](https://developer.apple.com/documentation/Metal/managing-your-game-window-for-metal-in-macos) — Swift, Objective-C + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/873F40BE-101A-4C0D-99F0-F5C7CE7B47A3/10046_wide_250x141_1x.jpg) Elevate the design of your iPad app ](https://developer.apple.com/videos/play/wwdc2025/208) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/going-full-screen#Change-log) + +Date| Changes +---|--- +June 9, 2025| Updated guidance for hiding toolbars and navigation controls, and deferring Home Screen indicator gestures in full-screen iOS and iPadOS apps and games. +June 10, 2024| Enhanced guidance for playing a game in full-screen mode. + diff --git a/skills/hig-patterns/references/launching.md b/skills/hig-patterns/references/launching.md new file mode 100644 index 00000000..5282163f --- /dev/null +++ b/skills/hig-patterns/references/launching.md @@ -0,0 +1,81 @@ +--- +title: "Launching | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/launching + +# Launching + +A streamlined launch experience helps people start using your app or game immediately. + +![A sketch of a square containing an arrow pointing to the upper-right corner, suggesting a transition to a new state. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/5ef419551a96fe1df7df2bd5d610b5dc/patterns-launching-intro%402x.png) + +Launching begins when someone opens your app or game, includes an initial download, and ends when the first screen is ready. After launching completes, you might offer an [onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding) experience, which can give people a high-level view of your app or game. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/launching#Best-practices) + +**Launch instantly.** People want to start interacting with your app or game right away, and sometimes they don’t want to wait more than a couple of seconds. + +**If the platform requires it, provide a launch screen.** In iOS, iPadOS, and tvOS, the system displays your launch screen the moment your app or game starts and quickly replaces it with your first screen, giving people the impression that your experience is fast and responsive. For guidance, see [Launch screens](https://developer.apple.com/design/human-interface-guidelines/launching#Launch-screens). macOS, visionOS, and watchOS don’t require launch screens. + +**If you need a splash screen, consider displaying it at the beginning of your onboarding flow.** A splash screen is a beautiful graphic that succinctly communicates branding and other information you need to provide. If you don’t provide an onboarding experience, you might display your splash screen as soon as launching completes. + +**Restore the previous state when your app restarts so people can continue where they left off.** Avoid making people retrace steps to reach their previous location in your app or game. Restore granular details of the previous state as much as possible. For example, scroll the view to people’s most recent position, and display windows in the same state and location in which people left them. + +## [Launch screens](https://developer.apple.com/design/human-interface-guidelines/launching#Launch-screens) + + _Not applicable for macOS, visionOS, or watchOS._ + +**Downplay the launch experience.** A launch screen isn’t part of an onboarding experience or a splash screen, and it isn’t an opportunity for artistic expression. A launch screen’s sole function is to enhance the perception of your experience as quick to launch and immediately ready to use. + +**Design a launch screen that’s nearly identical to the first screen of your app or game.** If you include elements that look different when launching completes, people may experience an unpleasant flash between the launch screen and your first screen. If your app or game displays a solid color before transitioning to the first screen, create a launch screen that displays only that solid color. Also make sure that your launch screen matches the device’s current orientation and appearance mode. + +**Avoid including text on your launch screen, even if your first screen displays text.** Because the content in a launch screen doesn’t change, any text you display won’t be localized. + +**Don’t advertise.** The launch screen isn’t a branding opportunity. Avoid creating a screen that looks like a splash screen or an “About” window, and don’t include logos or other branding elements unless they’re a fixed part of your app’s first screen. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/launching#Platform-considerations) + + _No additional considerations for macOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/launching#iOS-iPadOS) + +**Launch in the appropriate orientation.** If your app or game supports both portrait and landscape modes, launch using the device’s current orientation. If your interface only runs in one orientation, launch in that orientation and let people rotate the device if necessary. Ensure a landscape-only interface responds correctly, regardless of whether people enter landscape orientation by rotating the device left or right. For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/launching#tvOS) + +Note + +Unlike the [layered images](https://developer.apple.com/design/human-interface-guidelines/images#Layered-images) throughout much of a tvOS app, the launch screen is static. + +**In a live-viewing app, consider automatically starting playback soon after people start the app.** People come to your app to watch TV, so you might want to start playing new or recently viewed live content after a few seconds of inactivity. For guidance, see [Live-viewing apps](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/launching#visionOS) + +**Consider launching in the Shared Space even if your app is fully immersive.** Opening a window in the Shared Space lets you provide more context about your app or game while giving it time to load, and it also lets you present a control that people can use to open your fully immersive experience. In general, people appreciate being able to choose when to transition to a Full Space, especially if they’re currently running other apps in the Shared Space. For guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/launching#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/launching#Related) + +[Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding) + +[Loading](https://developer.apple.com/design/human-interface-guidelines/loading) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/launching#Developer-documentation) + +[Specifying your app’s launch screen](https://developer.apple.com/documentation/Xcode/specifying-your-apps-launch-screen) — Xcode + +[Responding to the launch of your app](https://developer.apple.com/documentation/UIKit/responding-to-the-launch-of-your-app) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/launching#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/38776A03-1056-4A47-9AB0-E4A8652AD5C4/2662_wide_250x141_1x.jpg) Optimizing App Launch ](https://developer.apple.com/videos/play/wwdc2019/423) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/2C48F507-180B-4858-BB26-488C234B067F/1920_wide_250x141_1x.jpg) Love at First Launch ](https://developer.apple.com/videos/play/wwdc2017/816) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/launching#Change-log) + +Date| Changes +---|--- +June 10, 2024| Added guidance on displaying a splash screen. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/live-viewing-apps.md b/skills/hig-patterns/references/live-viewing-apps.md new file mode 100644 index 00000000..8249e796 --- /dev/null +++ b/skills/hig-patterns/references/live-viewing-apps.md @@ -0,0 +1,79 @@ +--- +title: "Live-viewing apps | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps + +# Live-viewing apps + +As you design a live-viewing app, prioritize the content and create fun, fluid interactions that encourage immersion in the live-viewing experience. + +![A sketch of a television containing a play button, suggesting playback of media. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/cba28a7b98ccba8fdc5f498d69753ce8/patterns-live-viewing-intro%402x.png) + +Live-viewing apps need to elevate and prioritize live content. In every screen, draw people’s attention to live content and make sure they can distinguish it from video-on-demand (VOD) content at a glance. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#Best-practices) + +**Feature live content prominently and make it easy to access.** People come to your app to watch content, so you want to minimize the interval between starting your app and playing content. When live content is in the first tab, people don’t have to tap more than once to start viewing it. + +**Let people tap once — or not at all — to start playback.** For example, you might display a Watch Now button on top of featured or recently viewed live content. When people tap this button, it immediately disappears and playback begins, replacing your app’s UI with a full-screen, immersive viewing experience. + +**Make sure live content looks live.** People need to be able to distinguish live content from VOD content. Although simply playing live content is the best way to make it feel live, you can also help people recognize live content by marking it in some way. For example, you might display other channels in a collection row titled “Live” and give each item a visual indicator — such as a badge, symbol, or sash — that identifies it as live. + +**Consider indicating the progress of currently playing live content.** People appreciate knowing where they’ll land when they jump into in-progress live content. You can use a progress bar or other indicator to show people how much content remains. + +**Give people additional actions and viewing alternatives.** In addition to playback, which always needs to be the primary action, make it easy for people to record, restart, download, and perform other actions that you support. Display these actions in the same order throughout your app — for example, Watch, Start Over, Record, and Favorite. Also, if the currently playing content is playing again at other times, show this information so that people can schedule their viewing. + +**Consider using a content footer for browsing channels during playback.** A content footer lets people browse without taking them out of the live playback experience. If you decide to use a content footer, be sure to: + + * Give it a subtle treatment, such as a darkening, to keep text legible and help all items remain visually distinct from the content playing behind it. + + * Make it easy for people to identify the thumbnail that represents the currently playing content by, for example, badging the thumbnail or tinting its progress bar. + + * Match the categories in the content footer to those in your electronic program guide (for related guidance, see [EPG experience](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#EPG-experience)). + + * Design a simple, predictable way for people to invoke and dismiss the content footer — for example, if swiping up invokes the footer, people would expect swiping down to dismiss it. + + + + +**Provide instant visual feedback when people change channels.** This is essential for two reasons: people need confirmation that they’ve arrived at the channel they want, and providing feedback can give the streaming content some time to load. + +**Match audio to the current context.** When people start playing live content, they expect the audio to match even if they switch to browsing while the content plays in the background. However, when people navigate away from the live tab in your app, they leave the live-viewing context, so audio needs to stop. + +## [EPG experience](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#EPG-experience) + +Live-viewing apps typically provide an electronic program guide (EPG) that contains information about scheduled programming. Follow these guidelines to give people a streamlined EPG experience that feels designed specifically for your live-viewing app. + +**Prominently display current information and make it easy to return to playback.** When people first open the EPG, the current program, channel, and time needs to be easy to spot so they can instantly return to the current channel. + +**Make browsing the EPG effortless.** A typical EPG contains a lot of information, so it’s important to help people page, scroll, or jump through it easily. Also consider providing a My Channels group or a Favorites group that gives people quick access to the content they view most often. + +**Group content into familiar categories to help people find it more easily.** For example, you might use categories like Movies, TV Shows, Kids, Sports, and Popular. If your app includes a content footer, organize content thumbnails using the same categories as in the EPG. + +**Let people browse the EPG without leaving their current content.** For example, you can continue playing content in a picture-in-picture (PiP) mode or in the background while people browse the EPG. + +## [Cloud DVR](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#Cloud-DVR) + +If you support digital video recording (DVR) in the cloud, follow these guidelines to provide a great recording experience in your live-viewing app. + +**Let people start and stop recording from the info panel.** While live-streaming, people want to reveal the info panel to start recording immediately. + +**Let people record a future program in a view that provides details about the content.** Also, give people the option to record only that program or all future episodes. + +**Help people adapt the recording experience to their needs.** Let people specify precisely what they want to record, such as only the current episode, only new episodes, or only games that involve specific teams. + +**Allow playback and other content-specific actions within your cloud DVR area.** When people open a view that displays content details in your cloud DVR section, let them play or delete content and, if applicable, adjust recording settings. + +**Consider offering a control that lets people manage cloud DVR settings.** For example, you might let people delete recordings they’ve already watched or content that’s older than a certain number of days. Ideally, help people avoid running out of space by letting them set up automatic storage management, which overwrites the oldest or already viewed content. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/live-viewing-apps#Related) + +[Remotes](https://developer.apple.com/design/human-interface-guidelines/remotes) + +[Playing video](https://developer.apple.com/design/human-interface-guidelines/playing-video) + diff --git a/skills/hig-patterns/references/loading.md b/skills/hig-patterns/references/loading.md new file mode 100644 index 00000000..1abe27a9 --- /dev/null +++ b/skills/hig-patterns/references/loading.md @@ -0,0 +1,59 @@ +--- +title: "Loading | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/loading + +# Loading + +The best content-loading experience finishes before people become aware of it. + +![A sketch of a spinning indeterminate activity indicator, suggesting data loading. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/cfdf824156ed794426ac55a2cb38ec15/patterns-loading-intro%402x.png) + +If your app or game loads assets, levels, or other content, design the behavior so it doesn’t disrupt or negatively impact the user experience. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/loading#Best-practices) + +**Show something as soon as possible.** If you make people wait for loading to complete before displaying anything, they can interpret the lack of content as a problem with your app or game. Instead, consider showing placeholder text, graphics, or animations as content loads, replacing these elements as content becomes available. + +**Let people do other things in your app or game while they wait for content to load.** Loading content in the background helps give people access to other actions. For example, a game could load content in the background while players learn about the next level or view an in-game menu. For developer guidance, see [Improving the player experience for games with large downloads](https://developer.apple.com/documentation/GameKit/improving-the-player-experience-for-games-with-large-downloads). + +**If loading takes an unavoidably long time, give people something interesting to view while they wait.** For example, you might provide gameplay hints, display tips, or introduce people to new features. Gauge the remaining loading time as accurately as possible to help you avoid giving people too little time to enjoy your placeholder content or having so much time that you need to repeat it. + +**Improve installation and launch time by downloading large assets in the background.** Consider using the [Background Assets](https://developer.apple.com/documentation/BackgroundAssets) framework to schedule asset downloads — like game level packs, 3D character models, and textures — to occur immediately after installation, during updates, or at other nondisruptive times. + +## [Showing progress](https://developer.apple.com/design/human-interface-guidelines/loading#Showing-progress) + +**Clearly communicate that content is loading and how long it might take to complete.** Ideally, content displays instantly, but for situations where loading takes more than a moment or two, you can use system-provided components — called _progress indicators_ — to show that loading is ongoing. In general, you use a _determinate_ progress indicator when you know how long loading will take, and you use an _indeterminate_ progress indicator when you don’t. For guidance, see [Progress indicators](https://developer.apple.com/design/human-interface-guidelines/progress-indicators). + +**For games, consider creating a custom loading view.** Standard progress indicators work well in most apps, but can sometimes feel out of place in a game. Consider designing a more engaging experience by using custom animations and elements that match the style of your game. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/loading#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or visionOS._ + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/loading#watchOS) + +**As much as possible, avoid showing a loading indicator in your watchOS experience.** People expect quick interactions with their Apple Watch, so aim to display content immediately. In situations where content needs a second or two to load, it’s better to display a loading indicator than a blank screen. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/loading#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/loading#Related) + +[Launching](https://developer.apple.com/design/human-interface-guidelines/launching) + +[Progress indicators](https://developer.apple.com/design/human-interface-guidelines/progress-indicators) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/loading#Developer-documentation) + +[Background Assets](https://developer.apple.com/documentation/BackgroundAssets) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/loading#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/A51258F3-769A-4301-BE75-0DDE23322569/9860_wide_250x141_1x.jpg) Discover Apple-Hosted Background Assets ](https://developer.apple.com/videos/play/wwdc2025/325) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/loading#Change-log) + +Date| Changes +---|--- +June 9, 2025| Revised guidance for storing downloads to reflect downloading large assets in the background. +June 10, 2024| Added guidelines for showing progress and storing downloads, and enhanced guidance for games. + diff --git a/skills/hig-patterns/references/managing-accounts.md b/skills/hig-patterns/references/managing-accounts.md new file mode 100644 index 00000000..f5f20b9f --- /dev/null +++ b/skills/hig-patterns/references/managing-accounts.md @@ -0,0 +1,107 @@ +--- +title: "Managing accounts | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/managing-accounts + +# Managing accounts + +When it doesn’t create an unnecessary barrier to your experience, an account can be a convenient way for people to access their content and track personal details. + +![A sketch of a person, suggesting personal information. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/bc6ed656b5ef4483ce1c17d7e0042ce2/patterns-managing-accounts-intro%402x.png) + +Ask people to create an account only if your core functionality requires it; otherwise, let people enjoy your app or game without one. If you require an account, consider using [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple) to give people a consistent sign-in experience they can trust and the convenience of not having to remember multiple accounts and authentication methods. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#Best-practices) + +**Explain the benefits of creating an account and how to sign up.** If your app or game requires an account, write a brief, friendly description of the reasons for the requirement and its benefits. Display this message in your sign-in view. + +**Delay sign-in for as long as possible.** People often abandon apps when they’re forced to sign in before they can do anything useful. To help avoid this situation, give people a chance to get a sense of what your app or game does before asking them to make a commitment to it. For example, a shopping app might let people browse as much as they want, requiring sign-in only when they’re ready to make a purchase. + +**If you don’t use Sign in with Apple in your iOS, iPadOS, macOS, or visionOS app, prefer using a passkey.** Passkeys simplify account creation and authentication, eliminating the need for people to create or enter passwords. When an app supports passkeys, people simply provide their user name when creating a new account or signing in to an existing one. For developer guidance, see [Supporting passkeys](https://developer.apple.com/documentation/AuthenticationServices/supporting-passkeys). If you need to continue using passwords for authentication, augment security by requiring two-factor authentication (for developer guidance, see [Securing Logins with iCloud Keychain Verification Codes](https://developer.apple.com/documentation/AuthenticationServices/securing-logins-with-icloud-keychain-verification-codes)). + +**Always identify the authentication method you offer.** For example, if you display a button for signing in to your app with Face ID, title it using a phrase like “Sign In with Face ID” instead of a generic phrase like “Sign In.” + +**Refer only to authentication methods that are available in the current context.** For example, don’t reference Face ID on a device that doesn’t offer it. Check the device’s capabilities and use the appropriate terminology. For developer guidance, see [`LABiometryType`](https://developer.apple.com/documentation/LocalAuthentication/LABiometryType). + +**In general, avoid offering an app-specific setting for opting in to biometric authentication.** People turn on biometric authentication at the system level, so presenting an in-app setting is redundant and could be confusing. + +**Avoid using the term _passcode_ to refer to account authentication.** People create a passcode to unlock their device or authenticate for Apple services. If you use the term in your interface, people might think you’re asking them to reuse their passcode in your app or game. + +## [Deleting accounts](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#Deleting-accounts) + +If you help people create an account within your app or game, you must also help them delete it, not just deactivate it. In addition to following the guidelines below, be sure to understand and comply with your region’s legal requirements related to account deletion and the right to be forgotten. + +Important + +If 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. + +**Provide a clear way to initiate account deletion within your app or game.** If people can’t perform account deletion within your app, you must provide a direct link to the webpage on which people can do so. Make the link easy to discover — for example, don’t bury it in your Privacy Policy or Terms of Service pages. + +Developer note + +If people used [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple) to create an account within your app, you revoke the associated tokens when they delete their account. See [`Token revocation`](https://developer.apple.com/documentation/SigninwithAppleRESTAPI/Revoke-tokens). + +**Provide a consistent account-deletion experience whether people perform it within your app or game or on the website.** For example, avoid making one version of the deletion flow longer or more complicated than the other. + +**Consider letting people schedule account deletion to occur in the future.** People can appreciate the opportunity to use their remaining services or wait until their subscription auto-renews before deleting their account. If you offer a way to schedule account deletion, offer an option for immediate deletion as well. + +**Tell people when account deletion will complete, and notify them when it’s finished.** Because it can sometimes take a while to fully delete an account, it’s essential to keep people informed about the status of the deletion process so they know what to expect. + +**If you support in-app purchases, help people understand how billing and cancellation work when they delete their account.** For example, you might need to help people understand the following scenarios: + + * Billing for an auto-renewable subscription continues through Apple until people cancel the subscription, regardless of whether they delete their account. + + * After they delete their account, people need to cancel their subscription or request a refund. + + + + +In addition to helping people understand these scenarios, provide information that describes how to cancel subscriptions and manage purchases. For guidance, see [Helping people manage their subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Helping-people-manage-their-subscriptions) and [Providing help with in-app purchases](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Providing-help-with-in-app-purchases). + +Note + +Even if people didn’t use your app to purchase the subscription, you still need to support account deletion. + +## [TV provider accounts](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#TV-provider-accounts) + +Many popular TV providers let people sign in to their accounts at the system level, eliminating the need to authenticate on an app-by-app basis. If your TV provider app requires people to sign in, use TV Provider Authentication to provide the most efficient onboarding experience. + +**Avoid displaying a sign-out option when people are signed in at the system level.** If your app must include a sign-out option, invoking it needs to prompt people to navigate to Settings > TV Provider to sign out of their account. + +**Never instruct people to sign out by adjusting privacy controls.** The TV provider controls in Settings > Privacy aren’t a sign-out mechanism. These settings help people manage the apps that can access their TV provider account. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or visionOS._ + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#tvOS) + +Most people interact with Apple TV using a remote, not a keyboard, so ask for the minimum amount of information necessary. + +**Prefer letting people use another device to sign up or authenticate.** When you configure your app’s associated domains, Apple TV can work with other devices to safely suggest sign-in credentials, including [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple). For developer guidance, see [Configuring an associated domain](https://developer.apple.com/documentation/Xcode/configuring-an-associated-domain). + +**When people are signed in to a shared account, avoid asking them to choose their profile every time they become the current user.** In tvOS 16 and later, your app can share its credentials with all users while storing each individual’s profile and user data separately. When you support this type of sharing, your app can automatically use the current user’s profile without asking each person to sign in separately to a shared account. For developer guidance, see [`kSecUseUserIndependentKeychain`](https://developer.apple.com/documentation/Security/kSecUseUserIndependentKeychain) and [`User Management Entitlement`](https://developer.apple.com/documentation/BundleResources/Entitlements/com.apple.developer.user-management). + +**Minimize data entry.** If you need to gather more than a small amount of information, ask people to visit a website from another device. If you need an email address, show the email keyboard screen, which includes a list of recently entered addresses. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#watchOS) + +Use iCloud synchronization to provide access to the Keychain, letting people autofill user names and passwords and preserve app settings. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#Related) + +[Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding) + +[Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#Developer-documentation) + +[Supporting passkeys](https://developer.apple.com/documentation/AuthenticationServices/supporting-passkeys) — Authentication Services + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/473C8E4A-1764-482D-BE24-B3A7BBDBD526/9996_wide_250x141_1x.jpg) What’s new in passkeys ](https://developer.apple.com/videos/play/wwdc2025/279) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/9D0EBBBA-766E-4306-A14C-39339DD76D58/9271_wide_250x141_1x.jpg) What’s new in device management ](https://developer.apple.com/videos/play/wwdc2024/10143) + diff --git a/skills/hig-patterns/references/managing-notifications.md b/skills/hig-patterns/references/managing-notifications.md new file mode 100644 index 00000000..040250e1 --- /dev/null +++ b/skills/hig-patterns/references/managing-notifications.md @@ -0,0 +1,99 @@ +--- +title: "Managing notifications | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/managing-notifications + +# Managing notifications + +Notifications can give people timely and important information, whether the device is locked or in use. + +![A sketch of bell with a small overlapping circle, suggesting a notification sound. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ba0d1e169421e490842a4009ee7d09e5/patterns-managing-notifications-intro%402x.png) + +You need to get permission before sending any notification. The system lets people change this decision in settings, where they can also silence all notifications (except for government alerts in some locales). + +## [Integrating with Focus](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Integrating-with-Focus) + +People appreciate receiving a notification for something they care about, but they don’t always appreciate being interrupted. To help people manage the experience, the system lets them specify delivery times and set up a Focus. + + * A Focus helps people filter notifications during a time period they reserve for an activity like sleeping, working, reading, or driving. + + * Delivery scheduling lets people choose whether to receive notification alerts immediately or in a summary that’s delivered at times they choose. + + + + +People identify the contacts and apps that can break through a Focus to deliver notification alerts. In a Work Focus, for example, people might want to receive alerts from work colleagues, family members, and work-related apps as soon as notifications arrive. People might also want to receive all Time Sensitive notification alerts during a Focus. A _Time Sensitive_ notification contains essential information people appreciate getting right away. + +Important + +Even though a Focus might delay the delivery of a notification alert, the notification itself is available as soon as it arrives. + +To support these behavior customizations, you first identify the types of notifications your app or game can send. If you support direct communications — like phone calls and messages — you use _communication_ notifications; for all other types of tasks, you use _noncommunication_ notifications. To support communication notifications, you adopt SiriKit intents, which means people can use Siri to customize notification behaviors; for developer guidance, see [`INSendMessageIntent`](https://developer.apple.com/documentation/Intents/INSendMessageIntent) and [`UNNotificationContentProviding`](https://developer.apple.com/documentation/UserNotifications/UNNotificationContentProviding). + +You need to specify a system-defined interruption level for each noncommunication notification you send. The system uses the interruption level to help determine when to deliver the alert; when a communication notification arrives, the system uses the sender to determine when to deliver the alert. + +The system defines four interruption levels for noncommunication notifications: + + * _Passive_. Information people can view at their leisure, like a restaurant recommendation. + + * _Active_ (the default). Information people might appreciate knowing about when it arrives, like a score update on their favorite sports team. + + * _Time Sensitive_. Information that directly impacts the person and requires their immediate attention, like an account security issue or a package delivery. + + * _Critical_. Urgent information about health and safety that directly impacts the person and demands their immediate attention. Critical notifications are extremely rare and typically come from governmental and public agencies or apps that help people manage their health or home. + + + + +Notification alerts in each system-defined interruption level can behave in the following ways: + +Interruption level| Overrides scheduled delivery| Breaks through Focus| Overrides Ring/Silent switch on iPhone and iPad +---|---|---|--- +Passive| No| No| No +Active| No| No| No +Time Sensitive| Yes| Yes| No +Critical| Yes| Yes| Yes + +Note + +Because a Critical notification can override the Ring/Silent switch and break through scheduled delivery and Focus, you must get an entitlement to send one. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Best-practices) + +**Build trust by accurately representing the urgency of each notification.** People have several ways to adjust how they receive your notifications — including turning off all notifications — so it’s essential to be as realistic as possible when assigning an interruption level. You don’t want people to feel that a notification uses a high level of urgency to interrupt them with low-priority information. + +**Use the Time Sensitive interruption level only for notifications that are relevant in the moment.** To help people understand the benefits of letting Time Sensitive notifications break through a Focus or scheduled delivery, make sure the notification is about an event that’s happening now or will happen within an hour. The first time a Time Sensitive notification arrives from your app, the system describes how such a notification works and gives people a way to turn it off if they don’t agree that the information requires their immediate attention. Going forward, the system periodically gives people additional opportunities to evaluate how your Time Sensitive notification is working for them. For developer guidance, see [`UNNotificationInterruptionLevel`](https://developer.apple.com/documentation/UserNotifications/UNNotificationInterruptionLevel). + +## [Sending marketing notifications](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Sending-marketing-notifications) + +Don’t use notifications to send marketing or promotional content unless people explicitly agree to receive such information. When people want to learn about new features, content, or events related to your app or game, they can grant their permission to receive marketing notifications. For example, people who use a subscription app might appreciate getting an offer to become a subscriber, and game players might want to receive a special offer related to a live game event. + +**Never use the Time Sensitive interruption level to send a marketing notification.** People may have agreed to receive marketing notifications from your app, but such a notification must never break through a Focus or scheduled delivery setting. + +**Get people’s permission if you want to send them promotional or marketing notifications.** Before you send these notifications to people, you must receive their explicit permission to do so. Create an alert, modal view, or other interface that describes the types of information you want to send and gives people a clear way to opt in or out. + +**Make sure people can manage their notification settings within your app.** In addition to requesting permission to send informational or marketing notifications, you must also provide an in-app settings screen that lets people change their choice. For guidance, see [Settings](https://developer.apple.com/design/human-interface-guidelines/settings). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or visionOS._ + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#watchOS) + +By default, the notification settings people use for apps on their iPhone apply to the same apps on their Apple Watch. People can manage these settings in the Apple Watch app on iPhone, or they can access per-notification options — such as Mute 1 Hour or Turn off Time Sensitive — by swiping left when a notification arrives on their Apple Watch. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Related) + +[Privacy](https://developer.apple.com/design/human-interface-guidelines/privacy) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Developer-documentation) + +[User Notifications](https://developer.apple.com/documentation/UserNotifications) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/managing-notifications#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/B63A08EA-8856-4C77-9E1B-EA1CAD990619/4986_wide_250x141_1x.jpg) Send communication and Time Sensitive notifications ](https://developer.apple.com/videos/play/wwdc2021/10091) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/3D8237BC-06E3-4711-8552-7008A5D5BAAD/3764_wide_250x141_1x.jpg) The Push Notifications primer ](https://developer.apple.com/videos/play/wwdc2020/10095) + diff --git a/skills/hig-patterns/references/modality.md b/skills/hig-patterns/references/modality.md new file mode 100644 index 00000000..1f4ba019 --- /dev/null +++ b/skills/hig-patterns/references/modality.md @@ -0,0 +1,82 @@ +--- +title: "Modality | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/modality + +# Modality + +Modality is a design technique that presents content in a separate, dedicated mode that prevents interaction with the parent view and requires an explicit action to dismiss. + +![A sketch of an active window above an inactive window, suggesting focus on the frontmost window. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/9efb35fd7fafa01ce3447dc6f13ae2d8/patterns-modality-intro%402x.png) + +Presenting content modally can: + + * Ensure that people receive critical information and, if necessary, act on it + + * Provide options that let people confirm or modify their most recent action + + * Help people perform a distinct, narrowly scoped task without losing track of their previous context + + * Give people an immersive experience or help them concentrate on a complex task + + + + +Depending on the platform, you might use different components to present these types of modal experiences. For example, all platforms can present an _alert_ , which is a modal view that delivers important information related to your app or game. In addition, each platform may define various types of modal views for presenting context-specific options, such as _activity views,_ _sheets_ , and _confirmation dialogs_ or _action sheets_. To help people perform a distinct task, iOS, iPadOS, and macOS apps tend to use sheets or popovers, but iPadOS, macOS, and visionOS apps might also just use a separate window. + +To provide a temporary experience, like viewing media, or to help people perform a distinct, multistep task, like editing content, apps can offer a full-screen modal experience. In contrast, apps may also offer nonmodal types of full-screen experiences; for guidance, see [Going full screen](https://developer.apple.com/design/human-interface-guidelines/going-full-screen). visionOS apps can offer a range of immersive experiences; for guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/modality#Best-practices) + +**Present content modally only when there’s a clear benefit.** A modal experience takes people out of their current context and requires an action to dismiss, so it’s important to use modality only when it helps people focus or make choices that affect their content or device. + +**Aim to keep modal tasks simple, short, and streamlined.** If a modal task is too complicated, people can lose track of the task they suspended when they entered the modal view, especially if the modal view obscures their previous context. + +**Take care to avoid creating a modal experience that feels like an app within your app.** In particular, presenting a hierarchy of views within a modal task can make people forget how to retrace their steps. If a modal task must contain subviews, provide a single path through the hierarchy and avoid including buttons that people might mistake for the button that dismisses the modal view. + +**Consider using a full-screen modal style for in-depth content or a complex task.** A modal experience that fills a window or the device display minimizes distractions, so it can work well for presenting videos, photos, or camera views, or to support a multistep task like marking up a document or editing a photo. When a visionOS app runs alongside other apps in the Shared Space, a full-screen modal presentation fills a window; if people transition the app to a Full Space, the full-screen modal presentation can become a more immersive experience. + +**Always give people an obvious way to dismiss a modal view.** In general, it works well to follow the platform conventions people already know. For example, in iOS, iPadOS, and watchOS apps, people typically expect to find a button in the top toolbar or swipe down; in macOS and tvOS apps, people expect to find a button in the main content view. + +**When necessary, help people avoid data loss by getting confirmation before closing a modal view.** Regardless of whether people use a dismiss gesture or a button, if closing the view could result in the loss of user-generated content, be sure to explain the situation and give people ways to resolve it. For example, in iOS, you might present an action sheet that includes a save option. + +**Make it easy to identify a modal view’s task.** When people enter a modal view, they switch away from their previous context and might not return to it right away. When you provide a title that names the modal view’s task — or additional text that describes the task or provides guidance — you can help people keep their place in your app. + +**Let people dismiss a modal view before presenting another one.** Allowing multiple modal views to be visible at the same time tends to create visual clutter and can make your app seem scattered and disorganized. People need to remember the context they were in before a modal view appears, so presenting multiple views adds to people’s cognitive load, especially when a modal view hides another one by appearing on top of it. Although an alert can appear on top of all other content — including other modal views — you never want to display more than one alert at the same time. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/modality#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/modality#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/modality#Related) + +[Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets) + +[Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts) + +[Popovers](https://developer.apple.com/design/human-interface-guidelines/popovers) + +[Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets) + +[Activity views](https://developer.apple.com/design/human-interface-guidelines/activity-views) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/modality#Developer-documentation) + +[Presentation modifiers](https://developer.apple.com/documentation/SwiftUI/View-Presentation) — SwiftUI + +[`UIModalPresentationStyle`](https://developer.apple.com/documentation/UIKit/UIModalPresentationStyle) — UIKit + +[Modal Windows and Panels](https://developer.apple.com/documentation/AppKit/modal-windows-and-panels) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/modality#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/modality#Change-log) + +Date| Changes +---|--- +December 5, 2023| Enhanced guidance for in-depth modal experiences and clarified guidance on multiple modal views. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/multitasking.md b/skills/hig-patterns/references/multitasking.md new file mode 100644 index 00000000..5788b1ad --- /dev/null +++ b/skills/hig-patterns/references/multitasking.md @@ -0,0 +1,131 @@ +--- +title: "Multitasking | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/multitasking + +# Multitasking + +Multitasking lets people switch quickly from one app to another, performing tasks in each. + +![A sketch of two side-by-side windows in a split view arrangement, suggesting multitasking. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/94f1391bf700ee7af09ad0f966dd7b36/patterns-multitasking-intro%402x.png) + +People expect to use multitasking on their devices, and they may think something is wrong if your app doesn’t allow it. With rare exceptions — such as some games, and Apple Vision Pro apps running in a Full Space — every app needs to work well with multitasking. + +In addition to app switching, multitasking can present different experiences on different devices; see [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/multitasking#Platform-considerations). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/multitasking#Best-practices) + +A great multitasking experience helps people accomplish tasks in multiple apps by managing content in a variety of simultaneous contexts. Because you don’t know when people will initiate multitasking, your app or game always needs to be prepared to save and restore their context. + +**Pause activities that require people’s attention or active participation when they switch away.** If your app is a game or a media-viewing app, for example, make sure people don’t miss anything when they switch to another app. When they switch back, let them continue as if they never left. + +**Respond smoothly to audio interruptions.** Occasionally, audio from another app or the system itself may interrupt your app’s audio. For example, an incoming phone call or a music playlist initiated by Siri might interrupt your app’s audio. When situations like these occur, people expect your app to respond in the following ways: + + * Pause audio indefinitely for primary audio interruptions, such as playing music, podcasts, or audiobooks. + + * Temporarily lower the volume or pause the audio for shorter interruptions, such as GPS directional notifications, and resume the original volume or playback when the interruption ends. + + + + +For guidance, see [Playing audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio). + +**Finish user-initiated tasks in the background.** When someone starts a task like downloading assets or processing a video file, they expect it to finish even if they switch away from your app. If your app is in the middle of performing a task that doesn’t need additional input, complete it in the background before suspending. + +**Use notifications sparingly.** Your app can send notifications when it’s suspended or running in the background. If people start an important or time-sensitive task in your app, and then switch away from it, they might appreciate receiving a notification when the task completes so they can switch back to your app and take the next step. In contrast, people don’t generally need to know the moment a routine or secondary task completes. In this scenario, avoid sending an unnecessary notification; instead, let people check on the task when they return to your app. For guidance, see [Managing notifications](https://developer.apple.com/design/human-interface-guidelines/managing-notifications). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/multitasking#Platform-considerations) + + _Not supported in watchOS._ + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/multitasking#iOS) + +On iPhone, multitasking lets people use FaceTime or watch a video in Picture in Picture while they also use a different app. + +![A screenshot of the app switcher on iPhone, showing four open apps.](https://docs-assets.developer.apple.com/published/519ce5b2d1298e573aab62d4ea3427c9/multitasking-app-switcher-iphone%402x.png) + +The app switcher displays all currently open apps. + +![A screenshot of Mail on iPhone, showing an individual email. On top of the email body content, a small image in the bottom-left corner shows the person currently in a FaceTime call.](https://docs-assets.developer.apple.com/published/f68005bf620706a5d6c6c03d09af37f4/multitasking-pip-iphone%402x.png) + +A current FaceTime call can continue while people use another app. + +### [iPadOS](https://developer.apple.com/design/human-interface-guidelines/multitasking#iPadOS) + +On iPad, people can view and interact with the [windows](https://developer.apple.com/design/human-interface-guidelines/windows) of several different apps at the same time. An individual app can also support multiple open windows, which lets people view and interact with more than one window in the same app at one time. + +People can use iPad with either full-screen or windowed apps. When full screen, apps occupy the full screen, and people can switch between individual app windows using the app switcher. + +![A screenshot of the iPad app switcher in landscape orientation, showing five open apps. Thumbnail representations of the apps are arranged in a grid.](https://docs-assets.developer.apple.com/published/b1c2946808ad75c7036af18706a55b79/multitasking-ipad-app-switcher%402x.png) + +When using windowed apps, app windows are resizable, and people can arrange them to suit their needs with behavior similar to macOS. The system provides window controls for common tiling configurations, entering full screen, minimizing, and closing windows. The system identifies the frontmost window by coloring its window controls and casting a drop shadow on windows behind it. For guidance, see [Windows > iPadOS](https://developer.apple.com/design/human-interface-guidelines/windows#iPadOS). + +![A screenshot of two windowed apps on iPad in landscape orientation. The frontmost app window overlaps and casts a shadow on the one behind it, and has colored window controls to indicate that the window is active. Both windows sit atop the Home Screen background, and the Dock appears at the bottom.](https://docs-assets.developer.apple.com/published/433d49d66e117152f7cca9605ebe9628/multitasking-ipad-windows-maps-landmarks%402x.png) + +Additionally, videos and FaceTime calls can also play in a Picture in Picture overlay above other content regardless of whether apps are full screen or windowed. + +Note + +Apps don’t control multitasking configurations or receive any indication of the ones that people choose. + +To help your app respond correctly when people open it while windowed, make sure it adapts gracefully to different screen sizes. For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout) and [Windows](https://developer.apple.com/design/human-interface-guidelines/windows); for developer guidance, see [Multitasking on iPad, Mac, and Apple Vision Pro](https://developer.apple.com/documentation/UIKit/multitasking-on-ipad-mac-and-apple-vision-pro). To learn more about how people use iPad multitasking features, see [Use multitasking on your iPad](https://support.apple.com/en-us/HT207582). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/multitasking#macOS) + +On Mac, multitasking is the default experience because people typically run more than one app at a time, switching between windows and tasks as they work. When multiple app windows are open, macOS applies drop shadows that make the windows appear layered on the desktop, and applies other visual effects to help people distinguish different window states; for guidance, see [macOS window states](https://developer.apple.com/design/human-interface-guidelines/windows#macOS-window-states). + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/multitasking#tvOS) + +On Apple TV, people can play or browse content while also playing movies or TV shows in Picture in Picture (where supported). + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/multitasking#visionOS) + +On Apple Vision Pro, people can run multiple apps at the same time in the Shared Space, viewing and switching between windows and volumes throughout the space. + +Only one window is active at a time in the Shared Space. When people look from one window to another, the window they’re currently looking at becomes active while the previous window becomes more translucent and appears to recede along the z-axis. Closing an app window in the Shared Space transitions the app to the background without quitting it. + +Note + +When 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. + +**Avoid interfering with the system-provided multitasking behavior.** When people look from one window to another, visionOS applies a feathered mask to the window they look away from to clarify its changed state. To avoid interfering with this visual feedback, don’t change the appearance of a window’s edges. + +Video with custom controls. + +Content description: A recording showing the Notes app and the Settings app in the Shared Space in visionOS. The viewer first repositions the Notes window to slightly overlap the Settings window before activating Settings and then switching back to Notes. Each time an app becomes active, the system applies feathering to the inactive app's window. + +Play + +**Don’t pause a window’s video playback when people look away from it.** In visionOS, as in macOS, people expect the playback they start in one window to continue while they view or perform a task in another window. + +**Be prepared for situations where your audio can duck.** Unless an app is currently the Now Playing app, its audio can duck when people look away from it to another app. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/multitasking#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/multitasking#Related) + +[Layout](https://developer.apple.com/design/human-interface-guidelines/layout) + +[Windows](https://developer.apple.com/design/human-interface-guidelines/windows) + +[Playing video](https://developer.apple.com/design/human-interface-guidelines/playing-video) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/multitasking#Developer-documentation) + +[Responding to the launch of your app](https://developer.apple.com/documentation/UIKit/responding-to-the-launch-of-your-app) — UIKit + +[Multitasking on iPad, Mac, and Apple Vision Pro](https://developer.apple.com/documentation/UIKit/multitasking-on-ipad-mac-and-apple-vision-pro) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/multitasking#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/873F40BE-101A-4C0D-99F0-F5C7CE7B47A3/10046_wide_250x141_1x.jpg) Elevate the design of your iPad app ](https://developer.apple.com/videos/play/wwdc2025/208) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/A8CAF870-197F-4982-83D8-56513E5D7D0B/10000_wide_250x141_1x.jpg) Make your UIKit app more flexible ](https://developer.apple.com/videos/play/wwdc2025/282) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/multitasking#Change-log) + +Date| Changes +---|--- +June 9, 2025| Reorganized guidance in platform considerations, and added guidance for multitasking with multiple windows in iPadOS. +December 5, 2023| Added artwork for primary and auxiliary windows in iPadOS. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/offering-help.md b/skills/hig-patterns/references/offering-help.md new file mode 100644 index 00000000..38eabce6 --- /dev/null +++ b/skills/hig-patterns/references/offering-help.md @@ -0,0 +1,117 @@ +--- +title: "Offering help | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/offering-help + +# Offering help + +Although the most effective experiences are approachable and intuitive, you can provide contextual help when necessary. + +![A sketch of a question mark, suggesting help is available. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/c09494b87143553d5b544aade5282148/patterns-offering-help-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/offering-help#Best-practices) + +**Let your app’s tasks inform the types of help people might need.** For example, you might help people perform simple, one- or two-step tasks by displaying an inline view that succinctly describes the task. In contrast, if your app or game supports complex or multistep tasks you might want to provide a tutorial that teaches people how to accomplish larger goals. In general, directly relate the help you provide to the precise action or task people are doing right now and make it easy for people to dismiss or avoid the help if they don’t need it. + +**Use relevant and consistent language and images in your help content.** Always make sure guidance is appropriate for the current context. For example, if someone’s using the Siri Remote with your tvOS experience, don’t show tips or images that feature a game controller. Also be sure the terms and descriptions you use are consistent with the platform. For example, don’t write copy that tells people to click a button on an iPhone or tap a menu item on a Mac. + +**Make sure all help content is inclusive.** For guidance, see [Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion). + +**Avoid bloating your help content by explaining how standard components or patterns work.** Instead, describe the specific action or task that a standard element performs in your app or game. If your experience introduces a unique control or expects people to use an input device in a nonstandard way — such as holding the Siri Remote rotated 90 degrees — orient people quickly, preferring animation or graphics to educate instead of a lengthy description. + +## [Creating tips](https://developer.apple.com/design/human-interface-guidelines/offering-help#Creating-tips) + +A tip is a small, transient view that briefly describes how to use a feature in your app. Tips are a great way to teach people about new or less obvious features in your app, or help them discover faster ways to accomplish a task. For developer guidance, see [TipKit](https://developer.apple.com/documentation/TipKit). + +**Use the most appropriate tip type for your app’s user interface.** Display a popover tip when you want to preserve the content flow, or an inline tip when you want to ensure that surrounding information is visible. You can use an annotation-style inline tip when pointing to a specific UI element, or a hint-style tip when it’s not related to a specific piece of UI. + +![An illustration of a popover-style tip on iPhone. The tip appears atop nearby content, and points to a feature depicted by a blue star icon. The content beneath the tip is obscured.](https://docs-assets.developer.apple.com/published/2a1deca274cc855ac01321f3a583b858/offering-help-tip-popover%402x.png) + +Popover + +![An illustration of an annotation-style tip on iPhone. The tip is embedded among the surrounding content, and points to a feature depicted by a blue star icon. Displaced text appears above and below the tip.](https://docs-assets.developer.apple.com/published/e2b5c6a0a9d94a6c7a16cb1b2c9be517/offering-help-tip-annotation%402x.png) + +Annotation + +![An illustration of an hint-style tip on iPhone. The tip is embedded among the surrounding content. Displaced text appears above and below the tip.](https://docs-assets.developer.apple.com/published/706238176beb6869a8cf4cd06e22912c/offering-help-tip-hint%402x.png) + +Hint + +**Use tips for simple features.** Tips work best on features that are easy to describe and that people can complete with a few simple steps. If a feature requires more than three actions, it’s probably too complicated for a tip. + +**Make tips short, actionable, and engaging.** A tip’s goal is to encourage people to try new features. Use direct, action-oriented language to describe what the feature does and explain how to use it. Keep your tips to one or two sentences and avoid including content that’s promotional or related to a different feature or user flow. Promotional content is anything that advertises, sells, or isn’t aligned with the current context of what the person is doing. + +**Define rules to help ensure your tips reach the intended audience.** Not everyone benefits from every tip. For example, people who’ve already used a feature won’t appreciate viewing a tip that describes it. Use parameter-based or event-based eligibility rules to control when a tip appears, and only display a tip if someone might benefit from its use. When your app has more than one tip, set the display frequency so tips display at a reasonable cadence — for example, once every 24 hours. + +**If there’s an image or symbol that people associate with the feature, consider including it in the tip, and prefer the filled variant.** For example, a tip with a star can help people understand that the tip is related to favorites. + +![An illustration of a hint-style tip with an unfilled blue star symbol on the leading side.](https://docs-assets.developer.apple.com/published/e4a119cd09255a5e22c5132263c39cd9/offering-help-tip-symbol-usage-unfilled-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a hint-style tip with a filled blue star symbol on the leading side.](https://docs-assets.developer.apple.com/published/be5eb0f23474419bcb3b182b24c24d77/offering-help-tip-symbol-usage-filled-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +If the feature is represented by an image that the tip connects to directly, avoid repeating the same image in both the tip and the UI. + +![An illustration of an annotation-style tip pointing to a feature depicted by a blue star icon. The tip includes a similar blue star symbol on its leading side.](https://docs-assets.developer.apple.com/published/b35499b146567d76a7ca996cf3efb9e9/offering-help-tip-symbol-usage-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of an annotation-style tip pointing to a feature depicted by a blue star icon. The tip is text-only and omits an accompanying symbol.](https://docs-assets.developer.apple.com/published/afa3b233a9ec05e15e54fd1ec909c015/offering-help-tip-symbol-usage-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +**Use buttons to direct people to information or options.** If your feature has settings people can customize, or you want to redirect people to an area where they can learn more about a feature, consider adding a button. Buttons can take people directly to the settings where they make adjustments. Or if there’s more information people might find useful, add a button to take them to additional resources, such as a setup flow. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/offering-help#Platform-considerations) + + _No additional considerations for iOS, iPadOS, tvOS, or watchOS._ + +### [macOS, visionOS](https://developer.apple.com/design/human-interface-guidelines/offering-help#macOS-visionOS) + +A _tooltip_ (called a _help tag_ in user documentation) displays a small, transient view that briefly describes how to use a component in the interface. In apps that run on a Mac — including iPhone and iPad apps — tooltips can appear when a person holds the pointer over an element; in visionOS apps, a tooltip can appear when a person looks at an element or holds the pointer over it. For developer guidance, see [`help(_:)`](https://developer.apple.com/documentation/SwiftUI/View/help\(_:\)-6oiyb). + +![An illustration of a toolbar in macOS Finder with the pointer over the Back button. A tooltip with the title See folders you viewed previously appears beneath the pointer.](https://docs-assets.developer.apple.com/published/a5dc5c63ac62773df2b4aea95ad85f39/offering-help-macos-tooltip-help-tag%402x.png) + +**Describe only the control that people indicate interest in.** When people want to know how to use a specific control, they don’t want to learn how to use nearby controls or how to perform a larger task. + +**Explain the action or task the control initiates.** It often works well to begin the description with a verb — for example, “Restore default settings” or “Add or remove a language from the list.” + +**In general, avoid repeating a control’s name in its tooltip.** Repeating the name takes up space in the tooltip and rarely adds value to the description. + +**Be brief.** As much as possible, limit tooltip content to a maximum of 60 to 75 characters (note that localization often changes the length of text). To make a description brief and direct, consider using a sentence fragment and omitting articles. If you need a lot of text to describe a control, consider simplifying your interface design. + +**Use sentence case.** Sentence case tends to appear more casual and approachable. If you write complete sentences, omit ending punctuation unless it’s required to be consistent with your app’s style. + +**Consider offering context-sensitive tooltips.** For example, you could provide different text for a control’s different states. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/offering-help#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/offering-help#Related) + +[Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +[Writing](https://developer.apple.com/design/human-interface-guidelines/writing) + +[Help menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Help-menu) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/offering-help#Developer-documentation) + +[TipKit](https://developer.apple.com/documentation/TipKit) + +[`NSHelpManager`](https://developer.apple.com/documentation/AppKit/NSHelpManager) — AppKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/offering-help#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/7BCB7D16-5D51-419D-B332-E008219FB631/8293_wide_250x141_1x.jpg) Make features discoverable with TipKit ](https://developer.apple.com/videos/play/wwdc2023/10229) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/offering-help#Change-log) + +Date| Changes +---|--- +December 5, 2023| Included visionOS in guidance for creating tooltips. +September 12, 2023| Added guidance for creating tips. + diff --git a/skills/hig-patterns/references/onboarding.md b/skills/hig-patterns/references/onboarding.md new file mode 100644 index 00000000..c074cfcc --- /dev/null +++ b/skills/hig-patterns/references/onboarding.md @@ -0,0 +1,69 @@ +--- +title: "Onboarding | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/onboarding + +# Onboarding + +Onboarding can help people get a quick start using your app or game. + +![A sketch of a waving hand, suggesting a gesture of welcoming. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/044d56043e30ee77f306a8613041311b/patterns-onboarding-intro%402x.png) + +Ideally, people can understand your app or game simply by experiencing it, but if onboarding is necessary, design a flow that’s fast, fun, and optional. When available, onboarding occurs after [launching](https://developer.apple.com/design/human-interface-guidelines/launching) is complete — it isn’t part of the launch experience. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/onboarding#Best-practices) + +**Teach through interactivity.** People tend to grasp and retain information better when they can actually perform the task they’re learning about instead of just viewing instructional material. As much as possible, provide an interactive onboarding experience where people can safely test an action, discover a feature, or try out a game mechanic. + +**Consider providing a collection of context-specific tips instead of a single onboarding flow.** Integrating contextually relevant tips into your experience can help people learn about their current task while they make progress in your app or game. A context-specific tip can also help people learn better because it lets them concentrate on a single action or task before encountering new information. When you have instructional content that refers to a specific area of the interface, display these instructions near that area. For developer guidance, see [TipKit](https://developer.apple.com/documentation/TipKit). + +**If you need to present a prerequisite onboarding flow, design a brief, enjoyable experience that doesn’t require people to memorize a lot of information.** When onboarding is quick and entertaining, people are more likely to complete it. In contrast, if you try to teach too much, people can feel overwhelmed and may be less likely to remember what they learned. + +**If it makes sense to offer a separate tutorial, consider making it optional.** If you let people skip the tutorial when they first launch your app or game, don’t present it again on subsequent launches, but make sure it’s easy for people to find if they want to view it later. For example, you could make the tutorial available in a help, account, or settings area within your app or game. + +**Keep onboarding content focused on the experience you provide.** People enter your onboarding flow to learn about your app or game; they don’t need to learn how to use the system or the device. + +## [Additional content](https://developer.apple.com/design/human-interface-guidelines/onboarding#Additional-content) + +**Briefly display a splash screen if necessary.** If you need to include a splash screen, design a beautiful graphic that communicates succinctly. Aim to display your splash screen just long enough for people to absorb the information at a glance without feeling that it’s delaying their experience. + +**Don’t let large downloads hinder onboarding.** People want to start using your app or game immediately after first launching it, whether they participate in an onboarding flow or skip it. Consider including enough media and other content in your software package to prevent people from having to wait for downloads to complete before they can start interacting with your app or game. For guidance, see [Launching](https://developer.apple.com/design/human-interface-guidelines/launching). + +**Avoid displaying licensing details within your onboarding flow.** Let the App Store display agreements and disclaimers so people can read them before downloading your app or game. If you must include these items within the onboarding flow, integrate them in a balanced way that doesn’t disrupt the experience. + +## [Additional requests](https://developer.apple.com/design/human-interface-guidelines/onboarding#Additional-requests) + +**Postpone nonessential setup flows or customization steps.** Provide reasonable default settings so most people can immediately start interacting with your app or game without performing additional configuration. + +**If your app or game needs access to private data or resources before it can function, consider integrating the permission request into your onboarding flow.** In this scenario, making the request during your onboarding flow gives you the opportunity to show people why your app or game needs their permission and the benefits of granting it. Otherwise, present a permission request when people first access the specific function that relies on private data or resources. For guidance, see [Requesting permission](https://developer.apple.com/design/human-interface-guidelines/privacy#Requesting-permission). + +**Prefer letting people experience your app or game before prompting them for ratings or purchases.** People can be more likely to respond positively to such requests when they’ve had a chance to become engaged with your app or game. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/onboarding#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/onboarding#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/onboarding#Related) + +[Launching](https://developer.apple.com/design/human-interface-guidelines/launching) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +[Offering help](https://developer.apple.com/design/human-interface-guidelines/offering-help) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/onboarding#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/BE8FF113-0FE1-40FC-86BF-FE95BE2FF7A5/5027_wide_250x141_1x.jpg) Discoverable design ](https://developer.apple.com/videos/play/wwdc2021/10126) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/B27C091C-CF5C-4E42-B1E2-9172615462AB/2724_wide_250x141_1x.jpg) Designing Award Winning Apps and Games ](https://developer.apple.com/videos/play/wwdc2019/802) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/2C48F507-180B-4858-BB26-488C234B067F/1920_wide_250x141_1x.jpg) Love at First Launch ](https://developer.apple.com/videos/play/wwdc2017/816) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/onboarding#Change-log) + +Date| Changes +---|--- +June 10, 2024| Clarified different approaches to onboarding and added a guideline on displaying a splash screen. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/playing-audio.md b/skills/hig-patterns/references/playing-audio.md new file mode 100644 index 00000000..02767258 --- /dev/null +++ b/skills/hig-patterns/references/playing-audio.md @@ -0,0 +1,124 @@ +--- +title: "Playing audio | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/playing-audio + +# Playing audio + +People expect rich audio experiences that automatically adjust when the context changes on the device. + +![A sketch of a speaker emitting sound waves, suggesting the playback of audio. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1cf1272e2d6283fc614294242efe2145/patterns-playing-audio-intro%402x.png) + +Devices can play audio in a variety of ways, such as through internal or external speakers, headphones, and wirelessly through devices that use Bluetooth or AirPlay. To manipulate sound on their devices people use several types of controls, including volume buttons, the Ring/Silent switch on iPhone, headphone controls, the Control Center volume slider, and sound controls in third-party accessories. Whether sound is a primary part of your experience or an embellishment, you need to make sure it behaves as people expect as they make changes to volume and output. + +**Silence.** People switch a device to silent when they want to avoid being interrupted by unexpected sounds like ringtones and incoming message tones. In this scenario, they also want to silence nonessential sounds, such as keyboard clicks, sound effects, game soundtracks, and other audible feedback. When a device is in silent mode, it plays only the audio that people explicitly initiate, like media playback, alarms, and audio/video messaging. + +**Volume.** People expect their volume settings to affect all sound in the system — including music and in-app sound effects — regardless of the method they use to adjust the volume. An exception is the ringer volume on iPhone, which people can adjust separately in Settings. + +**Headphones.** People use headphones to keep their listening private and in some cases to free their hands. When connecting headphones, people expect sound to reroute automatically without interruption; when disconnecting headphones, they expect playback to pause immediately. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Best-practices) + +**Adjust levels automatically when necessary — don’t adjust the overall volume.** Your app can adjust relative, independent volume levels to achieve a great mix of audio, but the system volume always governs the final output. + +**Permit rerouting of audio when possible.** People often want to select a different audio output device. For example, they may want to listen to music through their living room stereo, car radio, or Apple TV. Support this capability unless there’s a compelling reason not to. + +**Use the system-provided volume view to let people make audio adjustments.** The volume view includes a volume-level slider and a control for rerouting audio output. You can customize the appearance of the slider. For developer guidance, see [`MPVolumeView`](https://developer.apple.com/documentation/MediaPlayer/MPVolumeView). + +**Choose an audio category that fits the way your app or game uses sound.** Depending on the audio category you choose, your app’s sounds can mix with other audio, play while your app is in the background, or stop when people set the Ring/Silent switch to silent. As much as possible, pick a category that helps your app meet people’s expectations. For example, don’t make people stop listening to music from another app if you don’t need to. For developer guidance, see [`AVAudioSession.Category`](https://developer.apple.com/documentation/AVFAudio/AVAudioSession/Category-swift.struct). + +Category| Meaning| Behavior +---|---|--- +Solo ambient| Sound isn’t essential, but it silences other audio. For example, a game with a soundtrack.| Responds to the silence switch. Doesn’t mix with other sounds. Doesn’t play in the background. +Ambient| Sound isn’t essential, and it doesn’t silence other audio. For example, a game that lets people play music from another app during gameplay in place of the game’s soundtrack.| Responds to the silence switch. Mixes with other sounds. Doesn’t play in the background. +Playback| Sound is essential and might mix with other audio. For example, an audiobook or educational app that teaches a foreign language, which people might want to listen to after leaving the app.| Doesn’t respond to the silence switch. May or may not mix with other sounds. Can play in the background. +Record| Sound is recorded. For example, a note-taking app that offers an audio recording mode. An app of this nature might switch its category to playback if it lets people play the recorded notes.| Doesn’t respond to the silence switch. Doesn’t mix with other sounds. Can record in the background. +Play and record| Sound is recorded and played, potentially simultaneously. For example, an audio messaging or video calling app.| Doesn’t respond to the silence switch. May or may not mix with other sounds. Can record and play in the background. + +**Respond to audio controls only when it makes sense.** People can control audio playback from outside your app’s interface — such as in Control Center or with controls on their headphones — regardless of whether your app is in the foreground or background. If your app is actively playing audio, in a clear audio-related context, or connected to a device that uses Bluetooth or AirPlay, it’s fine to respond to audio controls. Otherwise, when people activate a control, avoid halting audio currently playing from another app. + +**Avoid repurposing audio controls.** People expect audio controls to behave consistently in all apps, so it’s essential to avoid redefining the meaning of an audio control in your app. If your app doesn’t support certain controls, don’t respond to them. + +**Consider creating custom audio player controls only if you need to offer commands that the system doesn’t support.** For example, you might want to define custom increments for skipping forward or backward, or present content that’s related to the playing audio, such as a sports score. + +**Let other apps know when your app finishes playing temporary audio.** If your app can temporarily interrupt the audio of other apps, be sure to flag your audio session in a way that lets other apps know when they can resume. For developer guidance, see [`notifyOthersOnDeactivation`](https://developer.apple.com/documentation/AVFAudio/AVAudioSession/SetActiveOptions/notifyOthersOnDeactivation). + +## [Handling interruptions](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Handling-interruptions) + +Although most apps and games rely on the system’s default interruption behavior, you can customize this behavior to better accommodate your needs. + +**Determine how to respond to audio-session interruptions.** For example, if your app supports recording or other audio-related tasks that people don’t want interrupted, you can tell the system to avoid interrupting the currently playing audio for an incoming call unless people choose to accept it. Another example is a VoIP app, which must end a call when people close the Smart Folio of their iPad while they’re using the built-in microphone. Closing the Smart Folio automatically mutes the iPad microphone and by default interrupts the audio session associated with it. If a VoIP app restarts the audio session when people reopen their Smart Folio, it risks invading people’s privacy by unmuting the microphone without their knowledge. You can inspect an audio-session interruption to help determine the right way to respond; for developer guidance, see [Handling audio interruptions](https://developer.apple.com/documentation/AVFAudio/handling-audio-interruptions). + +**When an interruption ends, determine whether to resume audio playback automatically.** Sometimes, audio from a different app can interrupt the audio your app is playing. An interruption can be _resumable_ , like an incoming phone call, or _nonresumable_ , like when people start a new music playlist. Use the interruption type and your app’s type to decide whether to resume playback automatically. For example, a media playback app that’s actively playing audio when an interruption occurs can check to be sure the type is resumable before continuing playback when the interruption ends. On the other hand, a game doesn’t need to check the interruption type before automatically resuming playback, because a game plays audio without an explicit user choice. For developer guidance, see [`shouldResume`](https://developer.apple.com/documentation/AVFAudio/AVAudioSession/InterruptionOptions/shouldResume). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Platform-considerations) + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/playing-audio#iOS-iPadOS) + +**Use the system’s sound services to play short sounds and vibrations.** For developer guidance, see [Audio Services](https://developer.apple.com/documentation/AudioToolbox/audio-services). + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/playing-audio#macOS) + +In macOS, notification sounds mix with other audio by default. + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/playing-audio#tvOS) + +In tvOS, the system plays audio only when people initiate it, through interactions within apps and games or when performing device calibrations. For example, tvOS doesn’t play sounds to accompany components like alerts or notifications. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/playing-audio#visionOS) + +Subtle, expressive sounds are everywhere in visionOS, enhancing experiences and providing essential feedback when people look at a virtual object and use gestures to interact with it. The system combines audio algorithms with information about a person’s physical surroundings to produce _Spatial Audio_ , which is sound that people can perceive as coming from specific locations in space, not just from speakers. + +Important + +In 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](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +In visionOS, audio playback from the Now Playing app pauses automatically when people close the app’s window, and audio from an app that isn’t the Now Playing app can duck when people look away from it to different app. + +**Prefer playing sound.** People generally choose to keep sounds audible while they’re wearing the device, so an app that doesn’t play sound — especially in an immersive moment — can feel lifeless and may even seem broken. Throughout the design process, look for opportunities to create meaningful sounds that aid navigation and help people understand the spatial qualities of your app. + +**Design custom sounds for custom UI elements.** In general, a system-provided element plays sound to help people locate it and receive feedback when they interact with it. To help people interact with your custom elements, design sounds that provide feedback and enhance the spatial experience of your app. + +**Use Spatial Audio to create an intuitive, engaging experience.** Because people can perceive Spatial Audio as coming from anywhere around them, it works especially well in a fully immersive context as a way to help an experience feel lifelike. _Ambient audio_ provides pervasive sounds that can help anchor people in a virtual world and an _audio source_ can sound like it comes from a specific object. As you build the soundscape for your app, consider using both types of audio. + +**Consider defining a range of places from which your app sounds can originate.** Spatial Audio helps people locate the object that’s making sound, whether it’s stationary or moving in space. For example, when people move an app window that’s playing audio, the sound continues to come directly from the window, wherever people move it. + +**Consider varying sounds that people could perceive as repetitive over time.** For example, the system subtly varies the pitch and volume of the virtual keyboard’s sounds, suggesting the different sounds a physical keyboard can make as people naturally vary the speed and forcefulness of their typing. An efficient way to achieve a pleasing variation in sound is to randomize a sound file’s pitch and volume during playback, instead of creating different files. + +**Decide whether you need to play sound that’s fixed to the wearer or tracked by the wearer.** People perceive _fixed_ sound as if it’s pointed at them, regardless of the direction they look or the virtual objects they move. In contrast, people tend to perceive _tracked_ sound as coming from a particular object, so moving the object closer or farther away changes what they hear. In general, you want to use tracked sound to enhance the realism of your experience, but there could be cases where fixed sound is a good choice. For example, Mindfulness uses fixed sound to envelop the wearer in an engaging, peaceful setting. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/playing-audio#watchOS) + +In watchOS, the system manages audio playback. An app can play short audio clips while it’s active and running in the foreground, or it can play longer audio that continues even when people lower their wrist or switch to another app. For developer guidance, see [Playing Background Audio](https://developer.apple.com/documentation/WatchKit/playing-background-audio). + +**Use the recommended encoding values for media assets.** Specifically, use the 64 kbps HE-AAC (High-Efficiency Advanced Audio Coding) format to produce good-quality audio with lower data requirements. + +**Consider** **presenting a Now Playing view so people can control current or recently played audio without leaving your app.** The system-provided Now Playing view also displays information about the current audio source — which might be another app on a person’s Apple Watch or iPhone — and automatically selects the current or most recently used source. For developer guidance, see [Adding a Now Playing View](https://developer.apple.com/documentation/WatchKit/adding-a-now-playing-view). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Related) + +[Playing video](https://developer.apple.com/design/human-interface-guidelines/playing-video) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Developer-documentation) + +[Configuring your app for media playback](https://developer.apple.com/documentation/AVFoundation/configuring-your-app-for-media-playback) — AVFoundation + +[`AVAudioSession`](https://developer.apple.com/documentation/AVFAudio/AVAudioSession) — AVFAudio + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/FAD92809-C8B7-4968-802C-C662B1AF6C94/8340_wide_250x141_1x.jpg) Explore immersive sound design ](https://developer.apple.com/videos/play/wwdc2023/10271) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/15489B11-8744-483D-AD38-EF78D8962FF4/8126_wide_250x141_1x.jpg) Principles of spatial design ](https://developer.apple.com/videos/play/wwdc2023/10072) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/28DB1BEB-3F4F-4418-ACD3-779DBFB889CB/5196_wide_250x141_1x.jpg) Immerse your app in Spatial Audio ](https://developer.apple.com/videos/play/wwdc2021/10265) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/playing-audio#Change-log) + +Date| Changes +---|--- +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/playing-haptics.md b/skills/hig-patterns/references/playing-haptics.md new file mode 100644 index 00000000..f8fd3f6d --- /dev/null +++ b/skills/hig-patterns/references/playing-haptics.md @@ -0,0 +1,280 @@ +--- +title: "Playing haptics | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/playing-haptics + +# Playing haptics + +Playing haptics can engage people’s sense of touch and bring their familiarity with the physical world into your app or game. + +![A sketch of a horizontal line of three slightly overlapping circles, suggesting vibration. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/367115f42d7b6235a3087fd140366955/patterns-playing-haptics-intro%402x.png) + +Depending on the platform and the device people are using, the system can play haptics in addition to visual and auditory feedback. For example, components like switches, sliders, and pickers automatically play haptic feedback on supported iPhone models; on Apple Watch, the Taptic Engine generates haptics for a number of built-in feedback patterns, which watchOS combines with an audible tone. On a Mac that’s equipped with a Force Touch trackpad, an app can play haptics while people drag content or when they force click to change the speed of media controls. + +In addition to built-in haptic capabilities, some external input devices can also play haptics. For example: + + * In an iPadOS, macOS, tvOS, or visionOS app or game, [game controllers](https://developer.apple.com/design/human-interface-guidelines/game-controls) can provide haptic feedback (for developer guidance, see [Playing Haptics on Game Controllers](https://developer.apple.com/documentation/CoreHaptics/playing-haptics-on-game-controllers)). + + * [Apple Pencil Pro](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble) and some trackpads can provide haptic feedback when connected to certain iPad models. (For details on Apple Pencil features and compatibility, see [Apple Pencil](https://www.apple.com/apple-pencil/).) + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Best-practices) + +**Use system-provided haptic patterns according to their documented meanings.** People recognize standard haptics because the system plays them consistently on interactions with standard controls. If the documented use case for a pattern doesn’t make sense in your app or game, avoid using the pattern to mean something else. Instead, use a generic pattern or create your own, where supported. For guidance, see [Custom haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Custom-haptics). + +**Use haptics consistently throughout your app or game.** It’s important to build a clear, causal relationship between each haptic and the action that causes it so people learn to associate certain haptic patterns with certain experiences. If a haptic doesn’t reinforce a cause-and-effect relationship, it can be confusing and seem gratuitous. For example, if your game plays a specific haptic pattern when a character fails to finish a mission, people associate that pattern with a negative outcome. If you use the same haptic pattern for a positive outcome like a level completion, people will be confused. + +**Prefer using haptics to complement other feedback in your app or game.** When visual, auditory, and tactile feedback are in harmony — as they generally are in the physical world — the user experience is more coherent and can seem more natural. For example, you generally want to match the intensity and sharpness of a haptic with the intensity and sharpness of the animation it accompanies. You can also synchronize sound with haptics; for developer guidance, see [Delivering Rich App Experiences with Haptics](https://developer.apple.com/documentation/CoreHaptics/delivering-rich-app-experiences-with-haptics). + +**Avoid overusing haptics.** Sometimes a haptic can feel just right when it happens occasionally, but become tiresome when it plays frequently. Doing user testing can help you discover a balance that most people appreciate. Often, the best haptic experience is one that people may not be conscious of, but miss when it’s turned off. + +**In most apps, prefer playing short haptics that complement discrete events.** Although long-running haptics that accompany a gameplay flow can enhance the experience, long-running haptics in an app can dilute the meaning of the feedback and distract people from their task. On Apple Pencil Pro, for example, continuous or long-lasting haptics don’t tend to clarify the writing or drawing experience and can even make holding the pencil less pleasant. + +**Make haptics optional.** Let people turn off or mute haptics, and make sure people can still enjoy your app or game without them. + +**Be aware that playing haptics might impact other user experiences.** By design, haptics produce enough physical force for people to feel the vibration. Ensure that haptic vibrations don’t disrupt experiences involving device features like the camera, gyroscope, or microphone. + +## [Custom haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Custom-haptics) + +Games often use custom haptics to enhance gameplay. Although it’s less common, nongame apps might also use custom haptics to provide a richer, more delightful experience. + +You can design custom haptic patterns that vary dynamically, based on user input or context. For example, the impact players feel when a game character jumps from a tree can be stronger than when the character jumps in place, and substantial experiences — like a collision or a hit — can feel very different from subtle experiences like the approach of footsteps or a looming danger. + +There are two basic building blocks you can use to generate custom haptic patterns. + + * _Transient_ events are brief and compact, often feeling like taps or impulses. The experience of tapping the Flashlight button on the Home Screen is an example of a transient event. + + * _Continuous_ events feel like sustained vibrations, such as the experience of the lasers effect in a message. + + + + +Regardless of the type of haptic event you use to generate a custom haptic, you can also control its _sharpness_ and _intensity_. You can think of sharpness as a way to abstract a haptic experience into the waveform that produces the corresponding physical sensations. Specifying sharpness lets you relay to the system your intent for the experience. For example, you might use sharpness values to convey an experience that’s soft, rounded, or organic, or one that’s crisp, precise, or mechanical. As the term implies, intensity means the strength of the haptic. + +By combining transient and continuous events, varying sharpness and intensity, and including optional audio content, you can create a wide range of different haptic experiences. For developer guidance, see [Core Haptics](https://developer.apple.com/documentation/CoreHaptics). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Platform-considerations) + +### [iOS](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#iOS) + +On supported iPhone models, you can add haptics to your experience in the following ways: + + * Use standard UI components — like [toggles](https://developer.apple.com/design/human-interface-guidelines/toggles), [sliders](https://developer.apple.com/design/human-interface-guidelines/sliders), and [pickers](https://developer.apple.com/design/human-interface-guidelines/pickers) — that play Apple-designed system haptics by default. + + * When it makes sense, use a feedback generator to play one of several predefined haptic patterns in the categories of [notification](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Notification), [impact](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Impact), and [selection](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Selection) (for developer guidance, see [`UIFeedbackGenerator`](https://developer.apple.com/documentation/UIKit/UIFeedbackGenerator)). + + + + +#### [Notification](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Notification) + +Notification haptics provide feedback about the outcome of a task or action, such as depositing a check or unlocking a vehicle. + +Video with custom controls. + +Content description: An animation that represents a series of two haptic pulses of various durations and strengths by showing bars of different sizes and playing audio tones of different pitches. This particular pattern represents a success. + +Play + +**Success.** Indicates that a task or action has completed. + +Video with custom controls. + +Content description: An animation that represents a series of two haptic pulses of various durations and strengths by showing bars of different sizes and playing audio tones of different pitches. This particular pattern represents a warning. + +Play + +**Warning.** Indicates that a task or action has produced a warning of some kind. + +Video with custom controls. + +Content description: An animation that represents a series of four haptic pulses of various durations and strengths by showing bars of different sizes and playing audio tones of different pitches. This particular pattern represents an error. + +Play + +**Error.** Indicates that an error has occurred. + +#### [Impact](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Impact) + +Impact haptics provide a physical metaphor you can use to complement a visual experience. For example, people might feel a tap when a view snaps into place or a thud when two heavy objects collide. + +Video with custom controls. + +Content description: An animation that represents a single haptic pulse of a specific duration and strength by showing a bar of a specific size and playing an audio tone of a specific pitch. This particular pattern represents a light impact. + +Play + +**Light.** Indicates a collision between small or lightweight UI objects. + +Video with custom controls. + +Content description: An animation that represents a single haptic pulse of a specific duration and strength by showing a bar of a specific size and playing an audio tone of a specific pitch. This particular pattern represents a medium impact. + +Play + +**Medium.** Indicates a collision between medium-sized or medium-weight UI objects. + +Video with custom controls. + +Content description: An animation that represents a single haptic pulse of a specific duration and strength by showing a bar of a specific size and playing an audio tone of a specific pitch. This particular pattern represents a heavy impact. + +Play + +**Heavy.** Indicates a collision between large or heavyweight UI objects. + +Video with custom controls. + +Content description: An animation that represents a single haptic pulse of a specific duration and strength by showing a bar of a specific size and playing an audio tone of a specific pitch. This particular pattern represents a rigid impact. + +Play + +**Rigid.** Indicates a collision between hard or inflexible UI objects. + +Video with custom controls. + +Content description: An animation that represents a single haptic pulse of a specific duration and strength by showing a bar of a specific size and playing an audio tone of a specific pitch. This particular pattern represents a soft impact. + +Play + +**Soft.** Indicates a collision between soft or flexible UI objects. + +#### [Selection](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Selection) + +Selection haptics provide feedback while the values of a UI element are changing. + +Video with custom controls. + +Content description: An animation that represents a single haptic pulse of a specific duration and strength by showing a bar of a specific size and playing an audio tone of a specific pitch. This particular pattern represents a selection. + +Play + +**Selection.** Indicates that a UI element’s values are changing. + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#macOS) + +When a Magic Trackpad is available, your app can provide one of the three following haptic patterns in response to a drag operation or force click. + +Haptic feedback pattern| Description +---|--- +Alignment| Indicates the alignment of a dragged item. For example, this pattern could be used in a drawing app when the people drag a shape into alignment with another shape. Other scenarios where this type of feedback could be used might include scaling an object to fit within specific dimensions, positioning an object at a preferred location, or reaching the beginning/end or minimum/maximum of something like a scrubber in a video app. +Level change| Indicates movement between discrete levels of pressure. For example, as people press a fast-forward button on a video player, playback could increase or decrease and haptic feedback could be provided as different levels of pressure are reached. +Generic| Intended for providing general feedback when the other patterns don’t apply. + +For developer guidance, see [`NSHapticFeedbackPerformer`](https://developer.apple.com/documentation/AppKit/NSHapticFeedbackPerformer). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#watchOS) + +Apple Watch Series 4 and later provides haptic feedback for the Digital Crown, which gives people a more tactile experience as they scroll through content. By default, the system provides linear haptic detents that people can feel as they rotate the Digital Crown. Some system controls, like table views, provide detents as new items scroll onto the screen. For developer guidance, see [`WKHapticType`](https://developer.apple.com/documentation/WatchKit/WKHapticType). + +watchOS defines the following set of haptics, each of which conveys a specific meaning to people. + + * Notification + * Up + * Down + * Success + * Failure + * Retry + * Start + * Stop + * Click + + + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Notification.** Tells the person that something significant or out of the ordinary has happened and requires their attention. The system plays this same haptic when a local or remote notification arrives. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Up.** Tells the person that an important value increased above a significant threshold. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Down.** Tells the person that an important value decreased below a significant threshold. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Success.** Tells the person that an action completed successfully. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Failure.** Tells the person that an action failed. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Retry.** Tells the person that an action failed but they can retry it. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Start.** Tells the person that an activity started. Use this haptic when starting a timer or any other activity that a person can explicitly start and stop. The stop haptic usually follows this haptic. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Stop.** Tells the person that an activity stopped. Use this haptic when stopping a timer or other activity that the person previously started. + +Video with custom controls. + +Content description: An animation that represents an arrangement of haptic pulses of various durations and strengths by showing a set of thin vertical lines that symbolize sound waves. + +Play + +**Click.** Provides the sensation of a dial clicking, helping you communicate progress at predefined increments or intervals. Overusing the click haptic tends to diminish its utility and can even be confusing when clicks overlap each other. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +[Gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Developer-documentation) + +[Core Haptics](https://developer.apple.com/documentation/CoreHaptics) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/100FA6DD-1A48-485A-AFC2-47FDB92376D3/5210_wide_250x141_1x.jpg) Practice audio haptic design ](https://developer.apple.com/videos/play/wwdc2021/10278) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/9EEAE751-B5EE-4934-8F3A-38361FBA05DE/3277_wide_250x141_1x.jpg) Introducing Core Haptics ](https://developer.apple.com/videos/play/wwdc2019/520) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Change-log) + +Date| Changes +---|--- +May 7, 2024| Added guidance for playing haptics on Apple Pencil Pro. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/playing-video.md b/skills/hig-patterns/references/playing-video.md new file mode 100644 index 00000000..5d06e204 --- /dev/null +++ b/skills/hig-patterns/references/playing-video.md @@ -0,0 +1,180 @@ +--- +title: "Playing video | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/playing-video + +# Playing video + +People expect to enjoy rich video experiences on their devices, regardless of the app or game they’re using. + +![A sketch of a play button, suggesting video playback. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/26e9c68a8a956a2f5ed6b1d9988c0dce/patterns-playing-video-intro%402x.png) + +The system provides video players designed for you to use to embed playback experiences within your app or game in iOS, iPadOS, macOS, tvOS, and visionOS. You can also offer your content through the TV app in these platforms, which gives people a convenient and consistent viewing experience. + +The system-provided video players support different aspect-ratio playback modes and in most platforms, Picture in Picture (PiP) viewing mode. Although people can switch modes during playback, by default, the system selects one of the following playback modes based on a video’s aspect ratio: + + * In full-screen — or _aspect-fill_ — mode, the video scales to fill the display, and some edge cropping may occur. This mode is the default for wide video (2:1 through 2.40:1). For developer guidance, see [`resizeAspectFill`](https://developer.apple.com/documentation/AVFoundation/AVLayerVideoGravity/resizeAspectFill). + + * In fit-to-screen — or _aspect_ — mode, the entire video is visible onscreen, and letterboxing or pillarboxing occurs as needed. This mode is the default for standard video (4:3, 16:9, and anything up to 2:1) and ultrawide video (anything above 2.40:1). For developer guidance, see [`resizeAspect`](https://developer.apple.com/documentation/AVFoundation/AVLayerVideoGravity/resizeAspect). + + + + +In visionOS and tvOS, the built-in video player also provides _transport controls,_ which let people perform playback tasks, like turning on subtitles or changing the audio language, and actions, like adding a show to a library or favoriting a clip. Below the transport controls, the video player displays _content tabs_ , like Info, Episodes, or Chapters, that can provide supporting information and help streamline navigation. In visionOS, the transport controls appear as an [ornament](https://developer.apple.com/design/human-interface-guidelines/ornaments). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/playing-video#Best-practices) + +**Use the system video player to give people a familiar and convenient experience.** The built-in video player provides an exceptional video playback experience that offers consistent interactions and behaviors that let people concentrate on enjoying immersive content. If your app truly requires a custom video player, reference the behavior and interface of the system video player to help you provide an experience that people can instantly understand. A custom experience that diverges slightly from the system-provided experience can cause frustration because people don’t know which of their habitual interactions they can continue to use. + +**Always display video content at its original aspect ratio.** When video content uses embedded letterbox or pillarbox padding to conform to a specific aspect ratio, the system may be unable to correctly scale the video based on the current playback mode. Padding embedded within the video frame can cause videos to appear smaller in both full-screen and fit-to-screen modes. It also prevents videos from displaying correctly in edge-to-edge, non-full-screen contexts, like Picture in Picture mode on iPad. + +Here are some examples that show how padding can affect video display on iPhone Xs. + + * Result of padding a 4:3 video + * Result of padding a 21:9 video + + + +![An illustration of iPhone in landscape orientation. A blue rectangle shows the AVKit safe area within the screen. Overlaying the safe area and extending beyond it on all sides is a purple rectangle that represents the 4:3 video area, which doesn't include any embedded padding.](https://docs-assets.developer.apple.com/published/d0ed256c73ed2b5b8cba4baf20d437e1/video-fill-4-3-right%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)4:3 video in full-screen viewing mode + +![An illustration of iPhone in landscape orientation. A blue rectangle shows the AVKit safe area within the screen. Overlaying the safe area and extending beyond its top and bottom edges is a purple rectangle that represents the 4:3 video area. Attached to the left and right edges of the purple rectangle are two vertical pink rectangles that extend to the left and right device edges, representing embedded pillarboxes.](https://docs-assets.developer.apple.com/published/f6c10e1815aabff99ace1a053ba75757/video-fill-4-3-wrong%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)4:3 video with embedded padding, in full-screen viewing mode + +![A legend for the illustrations, identifying blue as the AVKit safe area, purple as the video area, and pink as the embedded padding.](https://docs-assets.developer.apple.com/published/fc703118ebdf69f3c70d70ffce64727e/legend-letter-pillar%402x.png) + +![An illustration of iPhone in landscape orientation. A blue rectangle shows the AVKit safe area within the screen. Overlaying the safe area and extending to the top and bottom edges of the device is a purple rectangle representing the 21:9 video area, which doesn't include any embedded padding.](https://docs-assets.developer.apple.com/published/bc4f68b42fb171bb35e19393dbe741f1/video-fit-21-9-right%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)21:9 video in fit-to-screen viewing mode + +![An illustration of iPhone in landscape orientation. A blue rectangle shows the AVKit safe area within the screen. Overlaying the safe area is a purple rectangle representing the 21:9 video area plus two horizontal pink rectangles attached to its top and bottom edges, representing embedded letterboxes. The area that includes the video and the letterboxes extends to the top and bottom edges of the device, but doesn't extend to the left and right edges of the safe area.](https://docs-assets.developer.apple.com/published/ce74b05ac601afa8404fd40db9cc8380/video-fit-21-9-wrong%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)21:9 video with embedded padding, in fit-to-screen viewing mode + +![A legend for the illustrations, identifying blue as the AVKit safe area, purple as the video area, and pink as the embedded padding.](https://docs-assets.developer.apple.com/published/fc703118ebdf69f3c70d70ffce64727e/legend-letter-pillar%402x.png) + +**Provide additional information when it adds value.** In iOS, iPadOS, tvOS, and visionOS, you can customize a video’s additional information by providing an image, title, description, and other useful information. In general, restrict this content so that it doesn’t obscure media playback. For developer guidance, see [`externalMetadata`](https://developer.apple.com/documentation/AVFoundation/AVPlayerItem/externalMetadata). + +**Support the interactions people expect, regardless of the input device they’re using to control playback.** For example, people expect to press Space on a connected keyboard to play or pause media playback on Apple Vision Pro, Mac, iPhone, iPad, and Apple TV. Similarly, people expect to move through their media on Apple TV by making familiar, intuitive gestures with the Siri Remote. For guidance, see Keyboards and Remotes. + +**If people need to access playback options or content-specific information in your tvOS app, consider adding a transport control or a custom content tab.** People typically open a transport control or content tab while they’re watching a video, so it’s essential to provide only the most useful actions and information. Help people return quickly to the viewing experience by making sure your actions don’t take more than a step or two and your content is succinct. Use a transport control to support a playback-related action like favoriting a video; use custom content tabs to display supplementary information or recommendations. + +**Avoid allowing audio from different sources to mix as viewers switch between modes.** Mixed audio is an unpleasant and frustrating user experience. In general, audio mixes when at least one of the audio sources fails to handle secondary audio correctly. Here is a typical scenario: While watching a full-screen video, the viewer moves it into the PiP window, where the system automatically mutes the video. In the full-screen window, the viewer starts a game that plays background music, then switches to the PiP window and unmutes the video. If the game doesn’t handle secondary audio appropriately, its audio mixes with the audio from the unmuted video. For developer guidance, see [`silenceSecondaryAudioHintNotification`](https://developer.apple.com/documentation/AVFAudio/AVAudioSession/silenceSecondaryAudioHintNotification). + +## [Integrating with the TV app](https://developer.apple.com/design/human-interface-guidelines/playing-video#Integrating-with-the-TV-app) + +The TV app provides global access to favorite, recently played, and recommended video content from across the system. When people initiate content playback within your app, the TV app automatically opens your app and transitions to it. Follow these guidelines to help the TV app experience feel like an integrated part of your app. + +**Ensure a smooth transition to your app.** The TV app fades to black when transitioning to your app and doesn’t show your app’s launch screen. Maintain visual continuity with this transition by immediately presenting your own black screen before starting to play or resume content. + +**Show the expected content immediately.** People expect the content they choose to begin playing as soon as the transition to your app completes, especially when resuming playback. Jump right from your app’s black screen into content, and avoid displaying splash screens, detail screens, intro animations, or any other barriers that make it take longer to reach content. In rare situations where you must display an interstitial element before the selected media plays, people can choose Select to step through the element, or choose Play if they want to skip the interstitial content and start playback. + +**Avoid asking people if they want to resume playback.** If playback can be resumed, do so automatically without prompting for confirmation. + +**Play or pause playback when people press Space on a connected Bluetooth keyboard.** Pressing Space to control media playback is an interaction people expect, regardless of the keyboard they’re using. + +**Make sure content plays for the correct viewer.** If your app supports multiple user profiles, the TV app can specify a profile when issuing a playback request. Make your app automatically switch to this profile before starting playback. If a playback request doesn’t specify a profile, ask the viewer to choose one before playback begins so this information is available in the future. + +**Use the previous end time when resuming playback of a long video clip.** Resuming playback at the previous stopping point lets people quickly continue where they left off. + +### [Loading content](https://developer.apple.com/design/human-interface-guidelines/playing-video#Loading-content) + +**Avoid displaying loading screens when possible.** A loading screen is unnecessary if your content loads quickly, but if loading takes more than two seconds, consider showing a black loading screen with a centered activity spinner and no surrounding content. + +**Start playback immediately.** If you must display a loading screen, display it only until enough content loads for playback to begin. Continue loading remaining content in the background. + +**Minimize loading screen content.** If you include branding or images on your loading screen, do so minimally while maintaining the black background that helps provide a seamless transition to playback. + +### [Exiting playback](https://developer.apple.com/design/human-interface-guidelines/playing-video#Exiting-playback) + +After exiting playback, people remain in your app rather than returning to the TV app, so it’s a good idea to help them avoid becoming disoriented. + +**Show a contextually relevant screen.** When exiting playback, display a detail view for the content the viewer was just watching and include an option to resume playback. If a detail view isn’t available, show either a menu that lists this content or your app’s main menu. + +**Be prepared for an immediate exit.** Prepare an exit view as soon as possible after receiving a playback notification so you’re ready to display the view if people exit immediately after playback begins. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/playing-video#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or macOS._ + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/playing-video#tvOS) + +**Defer to content when displaying logos or noninteractive overlays above video.** A small, unobtrusive logo or countdown timer may be appropriate for your video, but avoid large, distracting overlays that don’t enhance the viewing experience. Also, be aware that some devices are prone to image retention, so it’s generally better to keep overlays short and to prefer translucent graphics in Standard Dynamic Range (SDR) to bright, opaque content. + +**Show interactive overlays gracefully.** Some videos display interactive overlays, such as quizzes, surveys, and progress check-ins. For the best user experience, implement a minimum delay of 0.5 seconds to pause playing media, and display an interactive overlay. Give people a clear way to dismiss the overlay and resume media playback after they finish interacting. + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/playing-video#visionOS) + +**Help people stay comfortable when playing video in your app.** Often, an app doesn’t control the content in the videos it plays, but you can help people stay comfortable by: + + * Letting them choose when to start playing a video + + * Using a small window for playback, letting people resize it if they want + + * Making sure people can see their surroundings during playback + + + + +**In a fully immersive experience, avoid letting virtual content obscure playback or transport controls.** In a fully immersive context, the system automatically places the video player at a predictable location that provides an optimal viewing experience. Use this location to help make sure that no virtual content occludes the default playback or transport controls in the ornament near the bottom of the player. + +**Avoid automatically starting a fully immersive video playback experience.** People need control over their experience and they’re unlikely to appreciate being launched into a fully immersive video without warning. + +**Create a thumbnail track if you want to support scrubbing.** The system displays thumbnails as people scrub to different times in the video, helping them choose the section they want. To improve performance, supply a set of thumbnails that each measure 160 px in width. For developer guidance, see [HTTP Live Streaming (HLS) Authoring Specification for Apple Devices > Trick Play](https://developer.apple.com/documentation/http-live-streaming/hls-authoring-specification-for-apple-devices#Trick-Play). + +**Avoid expanding an inline video player to fill a window.** When you display the system-provided player view in a window, playback controls appear in the same plane as the player view and not in an ornament that floats above the window. Inline video needs to be 2D and you want to make sure that window content remains visible around the player so people don’t expect a more immersive playback experience. For developer guidance, see [`AVPlayerViewController`](https://developer.apple.com/documentation/AVKit/AVPlayerViewController). + +**Use a RealityKit video player if you need to play video in a view like a splash screen or a transitional view.** In situations like these, people generally expect the video to lead into the next experience, so they don’t need playback controls or system-provided integration, like dimming and view anchoring. The RealityKit video player automatically uses the correct aspect ratio for both 2D and 3D video and supports closed captions. RealityKit can also help you play video as a special effect on the surface of a custom view or object. For developer guidance, see [RealityKit](https://developer.apple.com/documentation/RealityKit). + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/playing-video#watchOS) + +In watchOS, the system manages video playback. Apps can play short video clips while the app is active and running in the foreground. You can use a movie element to embed clips in your interface and play video inline, or you can play a clip in a separate interface. For developer guidance, see [`VideoPlayer`](https://developer.apple.com/documentation/AVKit/VideoPlayer). + +**Keep video clips short.** Prefer shorter clips of no longer than 30 seconds. Long clips consume more disk space and require people to keep their wrists raised for longer periods of time, which can cause fatigue. + +**Use the recommended sizes and encoding values for media assets.** In particular, avoid scaling video clips, which affects performance and results in a suboptimal appearance. The following table lists the recommended encoding and resolution values for video assets. The audio encoding values apply to both movies and audio-only assets. + +Attribute| Value +---|--- +Video codec| H.264 High Profile +Video bit rate| 160 kbps at up to 30 fps +Resolution (full screen)| 208x260 px (portrait orientation) +Resolution (16:9)| 320x180 px (landscape orientation) +Audio| 64 kbps HE-AAC + +**Avoid creating a poster image that looks like a system control.** You want people to understand that they can tap a movie element for playback; you don’t want to confuse people by making movie elements look like something else. + +**Consider creating a poster image that represents a video clip’s contents.** When people tap a poster image, the system replaces the image with the video and begins inline playback. A relevant poster image can help people make an informed decision about whether to view the video. In general, avoid creating a poster image that has nothing to do with the content or that people might mistake for a control. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/playing-video#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/playing-video#Related) + +[Playing audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/playing-video#Developer-documentation) + +[Configuring your app for media playback](https://developer.apple.com/documentation/AVFoundation/configuring-your-app-for-media-playback) — AVFoundation + +[AVKit](https://developer.apple.com/documentation/AVKit) + +[HTTP Live Streaming](https://developer.apple.com/streaming/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/playing-video#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/344FB830-5184-4C63-8D0C-D8861D31A70D/6645_wide_250x141_1x.jpg) Create a great video playback experience ](https://developer.apple.com/videos/play/wwdc2022/10147) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/3F1BA6AB-BC74-4A1A-A440-90BA4AE5A23D/10042_wide_250x141_1x.jpg) Explore video experiences for visionOS ](https://developer.apple.com/videos/play/wwdc2025/304) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/53F0161E-DB14-4A7D-8A94-B76244201AB8/5102_wide_250x141_1x.jpg) Deliver a great playback experience on tvOS ](https://developer.apple.com/videos/play/wwdc2021/10191) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/playing-video#Change-log) + +Date| Changes +---|--- +September 12, 2023| Corrected the recommended width for a thumbnail in visionOS. +June 21, 2023| Updated to include guidance for visionOS. + diff --git a/skills/hig-patterns/references/printing.md b/skills/hig-patterns/references/printing.md new file mode 100644 index 00000000..32d743fb --- /dev/null +++ b/skills/hig-patterns/references/printing.md @@ -0,0 +1,50 @@ +--- +title: "Printing | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/printing + +# Printing + +An iOS, iPadOS, macOS, or visionOS app can integrate system-provided print functionality when it makes sense, presenting custom printer- and document-specific options if necessary. + +![A sketch of a printer, suggesting printing. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1194b45798f16b503c0a91c6d8ed3ecc/patterns-printing-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/printing#Best-practices) + +**Make printing discoverable.** Help people find your print action by placing it in standard system locations. For example, include a Print item in your macOS app’s File menu; in your iOS or iPadOS app, add a toolbar button that opens an [action sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets). If your macOS app has a toolbar, you might want to put a Print button there, too, but consider making it an optional button that people can add when they customize the toolbar. + +**Present a printing option only when it’s possible.** If there’s nothing onscreen to print, or no printers are available, dim the Print item in a macOS app’s File menu and remove the Print action from the Action sheet in an iOS or iPadOS app. If you implement a custom print button, dim or hide it when printing isn’t possible. + +**Present relevant printing options.** If it makes sense to offer options like selecting a page range, requesting multiple copies, or printing on both sides — and the printer supports the options — use the system-provided view to present them. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/printing#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or visionOS. Not supported in tvOS or watchOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/printing#macOS) + +**If your macOS app offers app-specific print options that the system doesn’t offer, consider creating a custom category for the print panel.** By default, the print panel offers several categories of settings, such as Layout, Paper Handling, and Media & Quality. Give your custom category a unique name, such as your app name, and include options that help people have a great print experience in your app. For example, Keynote offers presentation-specific options, like the ability to print presenter notes, slide backgrounds, and skipped slides. + +**If your app supports document-specific page settings, consider presenting a page setup dialog.** A _page setup dialog_ includes rarely changed settings for page size, orientation, and scaling that apply to printing a particular document. If this makes sense in your app, avoid implementing features the system already provides. For example, you don’t need to include options like changing the page orientation or printing in reverse order because the system implements these options. + +**Make sure interdependencies between options are clear.** For example, if double-sided printing is available, an option to print on transparencies becomes unavailable. + +**Separate advanced features from frequently used features.** Consider using a disclosure control to hide advanced options until they’re needed. Label advanced options as _Advanced Options_. + +**Consider letting people preview the effect of a setting.** For example, you could update a thumbnail image to show the effect of changing a tone control. + +**Consider storing modified settings with the document.** At minimum, it makes sense to store print settings until the document is closed in case people want to print it again. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/printing#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/printing#Related) + +[File management](https://developer.apple.com/design/human-interface-guidelines/file-management) + +[File menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#File-menu) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/printing#Developer-documentation) + +[`UIPrintInteractionController`](https://developer.apple.com/documentation/UIKit/UIPrintInteractionController) — UIKit + +[`NSDocument`](https://developer.apple.com/documentation/AppKit/NSDocument) — AppKit + diff --git a/skills/hig-patterns/references/ratings-and-reviews.md b/skills/hig-patterns/references/ratings-and-reviews.md new file mode 100644 index 00000000..9878415c --- /dev/null +++ b/skills/hig-patterns/references/ratings-and-reviews.md @@ -0,0 +1,48 @@ +--- +title: "Ratings and reviews | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews + +# Ratings and reviews + +People often view the ratings and reviews for an app or game before they download it. + +![A sketch of a half-filled star, suggesting a favorability rating. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1d5f982affa4088005ecd7c8d6edddff/patterns-ratings-and-reviews-intro%402x.png) + +Delivering a great overall experience is the best way to encourage positive ratings and reviews, but it’s also crucial to choose the right time to ask people for feedback. Although every app is different, some possible ways to do this involve looking at how many times or how frequently people launch your app, the number of features someone explores, or the number of tasks they complete. + +People can always rate your app within the App Store. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews#Best-practices) + +**Ask for a rating only after people have demonstrated engagement with your app or game.** For example, you might prompt people when they complete a game level or a significant task. Avoid asking for a rating on first launch or during onboarding, because people haven’t had enough time to gain a clear understanding of your app’s value or form an opinion. People may even be more likely to leave negative feedback if they feel an app is asking for a rating before they get a chance to use it. + +![An illustration of the UI that appears when a person is prompted to rate an app or game in macOS.](https://docs-assets.developer.apple.com/published/b0aee2c246e2cfd035ba21ed1a2004c3/ratings-and-reviews-ios-alert%402x.png) + +**Avoid interrupting people while they’re performing a task or playing a game.** Asking for feedback can disrupt the user experience and feel like a burden. Look for natural breaks or stopping points in your app or game where a rating request is less likely to be bothersome. + +**Avoid pestering people.** Repeated rating requests can be irritating, and may even negatively influence people’s opinion of your app. Consider allowing at least a week or two between requests, prompting again after people demonstrate additional engagement with your experience. + +**Prefer the system-provided prompt.** iOS, iPadOS, and macOS offer a consistent, nonintrusive way for apps and games to request ratings and reviews. When you identify places in your experience where it makes sense to ask for feedback, the system checks for previous feedback and — if there isn’t any — displays an in-app prompt that asks for a rating and an optional written review. People can supply feedback or dismiss the prompt with a single tap or click; they can also opt out of receiving these prompts for all apps they have installed. The system automatically limits the display of the prompt to three occurrences per app within a 365-day period. For developer guidance, see [`RequestReviewAction`](https://developer.apple.com/documentation/StoreKit/RequestReviewAction). + +**Weigh the benefits of resetting your summary rating against the potential disadvantage of showing fewer ratings.** When you release a new version of your app or game, you can reset the summary of individual ratings you received since the last reset. Although resetting means that the ratings reflect the current version, it also tends to result in having fewer ratings overall, which can discourage some people from downloading your app. For developer guidance, see [Reset app summary rating](https://help.apple.com/app-store-connect/#/devfb7e87af8). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews#Related) + +[Ratings, reviews, and responses](https://developer.apple.com/app-store/ratings-and-reviews/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews#Developer-documentation) + +[`RequestReviewAction`](https://developer.apple.com/documentation/StoreKit/RequestReviewAction) — StoreKit + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews#Change-log) + +Date| Changes +---|--- +September 12, 2023| Added artwork. + diff --git a/skills/hig-patterns/references/searching.md b/skills/hig-patterns/references/searching.md new file mode 100644 index 00000000..7e9cfadd --- /dev/null +++ b/skills/hig-patterns/references/searching.md @@ -0,0 +1,70 @@ +--- +title: "Searching | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/searching + +# Searching + +People use various search techniques to find content on their device, within an app, and within a document or file. + +![A sketch of a magnifying glass, suggesting the search for information. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d80bc4d95013730b824dc7956f912b4d/patterns-searching-intro%402x.png) + +To search for content within an app, people generally expect to use a [search field](https://developer.apple.com/design/human-interface-guidelines/search-fields). When it makes sense, you can personalize the search experience by using what you know about how people interact with your app. For example, you might display recent searches, search suggestions, completions, or corrections based on terms people searched earlier in your app. + +In some cases, people appreciate the ability to scope a search or filter the results. For example, people might want to search for items by specifying attributes like creation date, file size, or file type. For guidance, see [Scope controls and tokens](https://developer.apple.com/design/human-interface-guidelines/search-fields#Scope-controls-and-tokens). You can also help people find content within an open document or file by implementing ways to find content in a window or page in your iOS, iPadOS, or macOS app. + +In iOS, iPadOS, and macOS, Spotlight helps people find content across all apps in the system and on the web. When you index and provide information about your app’s content, people can use Spotlight to find content your app contains without opening it first. For guidance, see [Systemwide search](https://developer.apple.com/design/human-interface-guidelines/searching#Systemwide-search). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/searching#Best-practices) + +**If search is important, consider making it a primary action.** For example, in the Apple TV, Photos, and Phone apps in iOS, search occupies a distinct tab in the [tab bar](https://developer.apple.com/design/human-interface-guidelines/tab-bars). In the Notes app, a search field is in the [toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars), making search clearly visible and easily accessible. + +**Aim to make your app’s content searchable through a single location.** People appreciate having one clearly identified location they can use to find anything in your app that they are looking for. For apps with clearly distinct sections, it may still be useful to offer a local search. For example, search acts as a filter on the current view when searching your Recents and Contacts in the iOS Phone app. + +**Use placeholder text to indicate what content is searchable.** For example, the Apple TV app includes the placeholder text _Shows, Movies, and More_. + +**Clearly display the current scope of a search.** Use a descriptive placeholder text, a [scope control](https://developer.apple.com/design/human-interface-guidelines/search-fields#Scope-controls-and-tokens), or a title to help reinforce what someone is currently searching. For example, in the Mail app there is always a clear reference to the mailbox someone is searching. + +**Provide suggestions to make searching easier.** When you display a personʼs recent searches or offer search suggestions both before and while they’re typing, you can help people search faster and type less. For developer guidance, see [`searchSuggestions(_:)`](https://developer.apple.com/documentation/SwiftUI/View/searchSuggestions\(_:\)). + +**Take privacy into consideration before displaying search history.** People might not appreciate having their search history appear where others might see it. Depending on the context, consider providing other ways to narrow the search instead. If you do show search history, provide a way for people to clear it if they want. + +## [Systemwide search](https://developer.apple.com/design/human-interface-guidelines/searching#Systemwide-search) + +**Make your app’s content searchable in Spotlight.** You can share content with Spotlight by making it indexable and specifying descriptive attributes known as _metadata_. Spotlight extracts, stores, and organizes this information to allow for fast, comprehensive searches. + +**Define metadata for custom file types you handle.** Supply a Spotlight File Importer plug-in that describes the types of metadata your file format contains. For developer guidance, see [`CSImportExtension`](https://developer.apple.com/documentation/CoreSpotlight/CSImportExtension). + +**Use Spotlight to offer advanced file-search capabilities within the context of your app.** For example, you might include a button that instantly initiates a Spotlight search based on the current selection. You might then display a custom view that presents the search results or a filtered subset of them. + +**Prefer using the system-provided open and save views.** The system-provided open and save views generally include a built-in search field that people can use to search and filter the entire system. For related guidance, see [File management](https://developer.apple.com/design/human-interface-guidelines/file-management). + +**Implement a Quick Look generator if your app produces custom file types.** A Quick Look generator helps Spotlight and other apps show previews of your documents. For developer guidance, see [Quick Look](https://developer.apple.com/documentation/QuickLook). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/searching#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/searching#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/searching#Related) + +[Search fields](https://developer.apple.com/design/human-interface-guidelines/search-fields) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/searching#Developer-documentation) + +[Adding your app’s content to Spotlight indexes](https://developer.apple.com/documentation/CoreSpotlight/adding-your-app-s-content-to-spotlight-indexes) — Core Spotlight + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/searching#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/50ADDE23-F013-4993-8B1D-09368B4BD5F4/9259_wide_250x141_1x.jpg) Support semantic search with Core Spotlight ](https://developer.apple.com/videos/play/wwdc2024/10131) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/6E076CE0-7DDF-4471-B6F0-005ADF9C7960/6500_wide_250x141_1x.jpg) What’s new in iPad app design ](https://developer.apple.com/videos/play/wwdc2022/10009) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/D45C244B-2038-4692-99A0-6131ED5FD984/5084_wide_250x141_1x.jpg) Craft search experiences in SwiftUI ](https://developer.apple.com/videos/play/wwdc2021/10176) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/searching#Change-log) + +Date| Changes +---|--- +June 9, 2025| Updated best practices with general guidance from Search fields, and reorganized guidance for systemwide search. + diff --git a/skills/hig-patterns/references/settings.md b/skills/hig-patterns/references/settings.md new file mode 100644 index 00000000..b77c06eb --- /dev/null +++ b/skills/hig-patterns/references/settings.md @@ -0,0 +1,84 @@ +--- +title: "Settings | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/settings + +# Settings + +People expect apps and games to just work, but they also appreciate having ways to customize the experience to fit their needs. + +![A sketch of a gear, suggesting configuration. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/38706162753c93aa16bfa6295987c33a/patterns-settings-intro%402x.png) + +On all Apple platforms, the system-provided Settings app lets people adjust things like the overall appearance of the system, network connections, account details, accessibility requirements, and language and region settings. On some platforms, the system-provided Settings app can also include settings for specific apps and games, often letting people adjust whether the app or game can access location information, use device features like microphone or camera, and integrate with system features like notifications, Siri, or Search. + +When necessary, you can provide a custom settings area within your app or game to offer general settings that affect your overall experience, like interface style or game-saving behavior. If you need to offer settings that affect only a specific task, you can provide these options within the task itself, so people don’t have to leave the experience to customize it. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/settings#Best-practices) + +**Aim to provide default settings that give the best experience to the largest number of people.** For example, you can automatically maximize performance for the device your game is running on instead of asking players to make this choice after your game launches (for developer guidance, see [Improving your game’s graphics performance and settings](https://developer.apple.com/documentation/Metal/improving-your-games-graphics-performance-and-settings)). When you choose appropriate default settings, people may not have to make any adjustments before they can start enjoying your app or game. + +**Minimize the number of settings you offer.** Although people appreciate having control over an app or game, too many settings can make the experience feel less approachable, while also making it hard to find a particular setting. + +**Make settings available in ways people expect.** For example, when a physical keyboard is connected, people often use the standard Command-Comma (,) keyboard shortcut to open an app’s settings, whereas in a game, players often use the Esc (Escape) key. + +**Avoid using settings to ask for setup information you can get in other ways.** For example, a game can automatically detect a connected controller or accessory instead of asking the player to identify it; an app can detect whether people are currently using Dark Mode. + +**Respect people’s systemwide settings and avoid including redundant versions of them in your custom settings area.** People expect to use the system-provided Settings app to manage global options like accessibility accommodations, scrolling behavior, and authentication methods, and they expect all apps and games to adhere to their choices. Including custom versions of global options in your settings area is likely to confuse people because it implies that systemwide settings may not apply to your app or game and that changing your custom version of a global setting may affect other apps and games, too. + +## [General settings](https://developer.apple.com/design/human-interface-guidelines/settings#General-settings) + +**Put general, infrequently changed settings in your custom settings area.** People must suspend what they’re doing to open an app’s or game’s settings area, so you want to include options that people don’t need to change all the time. For example, an app might list options for adjusting window configuration; a game might let players specify game-saving behavior or keyboard mappings; both apps and games might offer options related to people’s accounts. + +## [Task-specific options](https://developer.apple.com/design/human-interface-guidelines/settings#Task-specific-options) + +**When possible, prefer letting people modify task-specific options without going to your settings area.** For example, if people can adjust things like showing or hiding parts of the current view, reordering a collection of items, or filtering a list, make these options available in the screens they affect, where they’re discoverable and convenient. Putting this type of option in a separate settings area disconnects it from its context, requiring people to suspend their task to make adjustments, and often hiding the results until people resume the task. + +Note + +In games, players tend to adjust their approach to a specific task as part of the gameplay, not as a settings option to change. + +## [System settings](https://developer.apple.com/design/human-interface-guidelines/settings#System-settings) + +**Add only the most rarely changed options to the system-provided Settings app.** If it makes sense to add your app’s or game’s settings to the system-provided Settings app, consider providing a button that opens it directly from your interface. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/settings#Platform-considerations) + + _No additional considerations for iOS, iPadOS, tvOS, or visionOS._ + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/settings#macOS) + +When people choose the Settings item in your app’s or game’s App menu, your custom settings window opens. Typically, a custom settings window contains a toolbar that includes buttons for switching between views — called _panes_ — that each contain a group of related settings. + +**Include a settings item in the[App menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#App-menu).** Avoid adding settings buttons to a window’s toolbar, because doing so decreases the space available for essential commands that people use frequently. If you provide document-level options, add this item to your app’s [File menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#File-menu). + +**Dim a settings window’s minimize and maximize buttons.** It’s quick to open a custom settings window using the standard Command–Comma (,) keyboard command, so there’s no need to keep the window in the Dock, and because a settings window accommodates the size of the current pane, people don’t need to expand the window to see more. + +**In your settings window, use a noncustomizable toolbar that remains visible and always indicates the active toolbar button.** A settings window’s toolbar identifies the areas people can customize and helps people navigate among those areas. People rely on a stable settings interface to help them find what they need. + +**Update the window’s title to reflect the currently visible pane.** If your settings window doesn’t have multiple panes, use the title _App Name_ Settings. + +**Restore the most recently viewed pane.** People often adjust related settings more than once, so it can be convenient when a settings window opens to the last pane people used. + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/settings#watchOS) + +In watchOS, apps and games don’t add custom settings to the system-provided Settings app. As an alternative, consider making a small number of essential options available at the bottom of the main view or letting people use a More menu to reconfigure objects. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/settings#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/settings#Related) + +[Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/settings#Developer-documentation) + +[`Settings`](https://developer.apple.com/documentation/SwiftUI/Settings) — SwiftUI + +[`UserDefaults`](https://developer.apple.com/documentation/Foundation/UserDefaults) — Foundation + +[Preference Panes](https://developer.apple.com/documentation/PreferencePanes) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/settings#Change-log) + +Date| Changes +---|--- +June 10, 2024| Reorganized some guidance into new topics and added game-specific examples. + diff --git a/skills/hig-patterns/references/undo-and-redo.md b/skills/hig-patterns/references/undo-and-redo.md new file mode 100644 index 00000000..16671563 --- /dev/null +++ b/skills/hig-patterns/references/undo-and-redo.md @@ -0,0 +1,58 @@ +--- +title: "Undo and redo | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/undo-and-redo + +# Undo and redo + +Undo and redo gives people easy ways to reverse many types of actions, which can also help people explore and experiment safely as they learn a new interface or task. + +![A sketch of an arrow that starts right, curves upward, and points to the left, suggesting a return to the start. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/768e64b5954af63fd6f4e9e4a3c5275a/patterns-undo-redo-intro%402x.png) + +People expect undo and redo to let them reverse their recent actions, so they’re likely to try undoing — often multiple times — until something changes. In a situation like this, people might not remember which of their previous actions an undo is targeting, which can lead to unintended changes and frustration. To help people remain in control, it’s essential to help people predict the outcome of undoing and redoing and to highlight the results. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#Best-practices) + +**Help people predict the results of undo and redo as much as possible.** On iPhone, for example, you can describe the result in the alert that displays when people shake the device, giving them the option of performing the undo or canceling it. If you provide undo and redo menu items, you can modify the menu item labels to identify the result. For example, a document-based app might use menu item labels like Undo Typing or Redo Bold. + +**Show the results of an undo or redo.** Sometimes, the most recent action that people want to undo affects content or an area that’s no longer visible. In cases like this, it’s crucial to highlight the result of each undo and redo to keep people from thinking that the action had no effect, which can lead them to perform it repeatedly. For example, if people undo after deleting a paragraph in a document area that’s no longer onscreen, you might scroll the document to show the restored paragraph. + +**Let people undo multiple times.** Avoid placing unnecessary limits on the number of times people can undo or redo. People generally expect to undo every action they’ve performed since taking a logical step like opening a document or saving their work. + +**Consider giving people the option to revert multiple changes at once.** In some scenarios, people might appreciate the ability to undo a batch of discrete but related actions — like incremental adjustments to a single property or attribute — so they don’t have to undo each individual adjustment. In other cases, it can make sense to give people a convenient way to undo all the changes they made since opening a document or saving their work. + +**Provide undo and redo buttons only when necessary.** People generally expect to initiate undo and redo in system-supported ways, such as choosing the items in a macOS app’s Edit menu, using keyboard shortcuts on a Mac or iPad, or shaking their iPhone. If it’s important to provide dedicated undo and redo buttons in your app, use the standard system-provided symbols and put the buttons in a toolbar. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#Platform-considerations) + + _No additional considerations for visionOS. Not supported in tvOS or watchOS._ + +### [iOS, iPadOS](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#iOS-iPadOS) + +**Avoid redefining standard gestures for undo and redo.** For example, people can use a three-finger swipe to initiate an undo or redo, or shake their iPhone. As with all standard gestures, redefining them in your interface runs the risk of confusing people and making your experience unpredictable. + +**Briefly and precisely describe the operation to be undone or redone.** The undo and redo alert title automatically includes a prefix of “Undo ” or “Redo ” (including the trailing space). You need to provide an additional word or two that describes what’s being undone or redone, to appear after this prefix. For example, you might create alert titles such as “Undo Name” or “Redo Address Change.” + +### [macOS](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#macOS) + +**Place undo and redo commands in the Edit menu and support the standard keyboard shortcuts.** Mac users expect to find undo and redo at the top of the Edit menu; they also expect to use Command–Z and Shift–Command–Z to perform undo and redo, respectively. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#Related) + +[Feedback](https://developer.apple.com/design/human-interface-guidelines/feedback) + +[Pointing devices](https://developer.apple.com/design/human-interface-guidelines/pointing-devices) + +[Standard keyboard shortcuts](https://developer.apple.com/design/human-interface-guidelines/keyboards#Standard-keyboard-shortcuts) + +[Edit menu](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Edit-menu) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#Developer-documentation) + +[`UndoManager`](https://developer.apple.com/documentation/Foundation/UndoManager) — Foundation + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/undo-and-redo#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/2546ECBD-6443-41EC-921D-6429026F8B67/1700_wide_250x141_1x.jpg) Essential Design Principles ](https://developer.apple.com/videos/play/wwdc2017/802) + diff --git a/skills/hig-patterns/references/workouts.md b/skills/hig-patterns/references/workouts.md new file mode 100644 index 00000000..2dfd1d3b --- /dev/null +++ b/skills/hig-patterns/references/workouts.md @@ -0,0 +1,76 @@ +--- +title: "Workouts | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/workouts + +# Workouts + +A great workout or fitness experience encourages people to engage with their current activity and helps them track their progress on their devices. + +![A sketch of a person running, suggesting exercise. The image is overlaid with rectangular and circular grid lines and is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/94f9af416ac4b86e302f1f487b8a1372/patterns-workouts-intro%402x.png) + +People can wear their Apple Watch during many types of workouts, and they might carry their iPhone or iPad during fitness activities like walking, wheelchair pushing, and running. In contrast, people tend to use their larger or more stationary devices like iPad Pro, Mac, and Apple TV to participate in live or recorded workout sessions by themselves or with others. + +You can create a workout experience for Apple Watch, iPhone, or iPad that helps people reach their goals by leveraging activity data from the device and using familiar components to display fitness metrics. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/workouts#Best-practices) + +**In a watchOS fitness app, use workout sessions to provide useful data and relevant controls.** During a fitness app’s active workout sessions, watchOS continues to display the app as time passes between wrist raises, so it’s important to provide the workout data people are most likely to care about. For example, you might show elapsed or remaining time, calories burned, or distance traveled, and offer relevant controls like lap or interval markers. + +**Avoid distracting people from a workout with information that’s not relevant.** For example, people don’t need to review the list of workouts you offer or access other parts of your app while they’re working out. Here is an arrangement that many watchOS workout apps use, including Workout: + +![A screenshot of the leftmost Workout screen for an Outdoor Walk workout. Clockwise from the top-left corner are the End, Resume, New, and Segment buttons.](https://docs-assets.developer.apple.com/published/f893039e593af4d8e40eb6d374dfc6a3/workouts-large-buttons%402x.png) + +Large buttons that control the in-progress session — such as End, Resume, and New — appear on the leftmost screen. + +![A screenshot of the middle Workout screen for an Outdoor Walk workout. Five lines of data are visible. From the top, the screen shows the elapsed time, the active calories, the current heart rate, the average pace, and the elevation.](https://docs-assets.developer.apple.com/published/8de838390249b16301bfc5495947da37/workouts-metrics%402x.png) + +Metrics and other data appear on a dedicated screen that people can read at a glance. + +![A screenshot of the rightmost Workout screen, which shows information about the music currently playing.](https://docs-assets.developer.apple.com/published/acc22020a6613bd6558ce8ea836aa156/workouts-media-playback%402x.png) + +If supported, media playback controls appear on the rightmost screen. + +**Use a distinct visual appearance to indicate an active workout.** During a workout, people appreciate being able to recognize an active session at a glance. The metrics page can be a good way to show that a session is active because the values update in real time. In addition to displaying updating values, you can further distinguish the metrics screen by using a unique layout. + +**Provide workout controls that are easy to find and tap.** In addition to making it easy for people to pause, resume, and stop a workout, be sure to provide clear feedback that indicates when a session starts or stops. + +**Help people understand the health information your app records if sensor data is unavailable during a workout.** For example, water may prevent a heart-rate measurement, but your app can still record data like the distance people swam and the number of calories they burned. If your app supports the _Swimming_ or _Other_ workout types, explain the situation using language that’s similar to the language used in the system-provided Workout app, as shown below: + +| Example text from the Workout app +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| GPS is not used during a Pool Swim, and water may prevent a heart-rate measurement, but Apple Watch will still track your calories, laps, and distance using the built-in accelerometer. +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| In this type of workout, you earn the calorie equivalent of a brisk walk anytime sensor readings are unavailable. +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| GPS will only provide distance when you do a freestyle stroke. Water might prevent a heart-rate measurement, but calories will still be tracked using the built-in accelerometer. + +**Provide a summary at the end of a session.** A summary screen confirms that a workout is finished and displays the recorded information. Consider enhancing the summary by including Activity rings, so that people can easily check their current progress. + +**Discard extremely brief workout sessions.** If a session ends a few seconds after it starts, either discard the data automatically or ask people if they want to record the data as a workout. + +**Make sure text is legible for when people are in motion.** When a session requires movement, use large font sizes, high-contrast colors, and arrange text so that the most important information is easy to read. + +**Use Activity rings correctly.** The Activity rings view is an Apple-designed element featuring one or more rings whose colors and meanings match those in the Activity app. Use them only for their documented purpose. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/workouts#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or watchOS. Not supported in macOS, tvOS, or visionOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/workouts#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/workouts#Related) + +[Activity rings](https://developer.apple.com/design/human-interface-guidelines/activity-rings) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/workouts#Developer-documentation) + +[WorkoutKit](https://developer.apple.com/documentation/WorkoutKit) + +[Workouts and activity rings](https://developer.apple.com/documentation/HealthKit/workouts-and-activity-rings) — HealthKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/workouts#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/12499BF9-8217-4A56-81CA-5E7CB66904DD/9856_wide_250x141_1x.jpg) Track workouts with HealthKit on iOS and iPadOS ](https://developer.apple.com/videos/play/wwdc2025/322) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/50551741-78CD-4E8A-9550-7D0EC29D7882/8035_wide_250x141_1x.jpg) Build custom workouts with WorkoutKit ](https://developer.apple.com/videos/play/wwdc2023/10016) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/30D3C2CB-B24D-467A-9B20-A369641E966F/4850_wide_250x141_1x.jpg) Build a workout app for Apple Watch ](https://developer.apple.com/videos/play/wwdc2021/10009) + diff --git a/skills/hig-platforms/SKILL.md b/skills/hig-platforms/SKILL.md new file mode 100644 index 00000000..34d11745 --- /dev/null +++ b/skills/hig-platforms/SKILL.md @@ -0,0 +1,84 @@ +--- +name: hig-platforms +version: 1.0.0 +description: > + Apple Human Interface Guidelines for platform-specific design. Use this skill when the user asks about + "designing for iOS", "iPad app design", "macOS design", "tvOS", "visionOS", "watchOS", "Apple platform", + "which platform", platform differences, platform-specific conventions, or multi-platform app design. + Also use when the user says "should I design differently for iPad vs iPhone", "how does my app work + on visionOS", "what's different about macOS apps", "porting my app to another platform", + "universal app design", or "what input methods does this platform use". + Cross-references: hig-foundations for shared design foundations, hig-patterns for interaction patterns, + hig-components-layout for navigation structures, hig-components-content for content display. +--- + +# Apple HIG: Platform Design + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +1. **Each platform has a distinct identity.** Do not port designs between platforms. Respect each platform's conventions, interaction models, and user expectations. + +2. **iOS: touch-first.** Direct manipulation on a handheld screen. Optimize for one-handed use. Navigation uses tab bars and push/pop stacks. + +3. **iPadOS: expanded canvas.** Support Split View, Slide Over, and Stage Manager. Use sidebars and multi-column layouts. Support pointer and keyboard alongside touch. + +4. **macOS: pointer and keyboard.** Dense information display is acceptable. Use menu bars, toolbars, and keyboard shortcuts extensively. Windows are resizable with precise control. + +5. **tvOS: remote and focus.** Viewed from a distance. Design for the Siri Remote with focus-based navigation. Large text, simple layouts, linear navigation. + +6. **visionOS: spatial interaction.** 3D environment using windows, volumes, and spaces. Eye tracking for targeting, indirect gestures for interaction. Respect ergonomic comfort zones. + +7. **watchOS: glanceable and brief.** Information consumable at a glance. Brief interactions. Digital Crown, haptics, and complications for timely content. + +8. **Games: own paradigm.** Free to define in-game interaction models, but still respect platform conventions for system interactions (notifications, accessibility, controllers). + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [designing-for-ios.md](references/designing-for-ios.md) | iOS | Touch, tab bars, navigation stacks, gestures, screen sizes, safe areas | +| [designing-for-ipados.md](references/designing-for-ipados.md) | iPadOS | Multitasking, sidebars, pointer, keyboard, Apple Pencil, Stage Manager | +| [designing-for-macos.md](references/designing-for-macos.md) | macOS | Menu bars, toolbars, window management, keyboard shortcuts, dense layouts, Dock | +| [designing-for-tvos.md](references/designing-for-tvos.md) | tvOS | Focus engine, Siri Remote, lean-back experience, content-forward, parallax | +| [designing-for-visionos.md](references/designing-for-visionos.md) | visionOS | Spatial computing, windows/volumes/spaces, eye tracking, hand gestures, depth | +| [designing-for-watchos.md](references/designing-for-watchos.md) | watchOS | Glanceable UI, Digital Crown, complications, notifications, haptics | +| [designing-for-games.md](references/designing-for-games.md) | Games | Controllers, immersive experiences, platform-specific conventions, accessibility | + +## Decision Framework + +1. **Identify the primary use context.** On the go (iOS/watchOS), at a desk (macOS), on the couch (tvOS), spatial environment (visionOS)? + +2. **Match input to interaction.** Touch for direct manipulation, pointer for precision, gaze+gesture for spatial, Digital Crown for quick scrolling, remote for focus navigation. + +3. **Adapt, don't replicate.** A macOS sidebar becomes a tab bar on iPhone. A visionOS volume has no equivalent on watchOS. Translate intent, not implementation. + +4. **Leverage platform strengths.** Live Activities on iOS, Desktop Widgets on macOS, complications on watchOS, immersive spaces on visionOS. + +5. **Maintain brand consistency** while respecting each platform's visual language and interaction patterns. + +## Output Format + +1. **Platform-specific recommendations** citing relevant HIG sections. +2. **Platform differences table** comparing navigation, input, layout, and conventions. +3. **Implementation notes** per platform including recommended APIs and adaptation strategies. + +## Questions to Ask + +1. Which platforms are you targeting? +2. New app or adapting an existing one? If existing, which platform is the base? +3. SwiftUI or UIKit/AppKit? +4. Need to support older OS versions? +5. Primary use context? (On the go, desk, couch, spatial, glanceable?) + +## Related Skills + +- **hig-foundations** -- Shared principles (color, typography, accessibility, layout) across platforms +- **hig-patterns** -- Interaction patterns that manifest differently per platform +- **hig-components-layout** -- Navigation structures (tab bars, sidebars, split views) that vary by platform +- **hig-components-content** -- Content display that adapts across platforms + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-platforms/references/designing-for-games.md b/skills/hig-platforms/references/designing-for-games.md new file mode 100644 index 00000000..a84942ed --- /dev/null +++ b/skills/hig-platforms/references/designing-for-games.md @@ -0,0 +1,159 @@ +--- +title: "Designing for games | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/designing-for-games + +# Designing for games + +When people play your game on an Apple device, they dive into the world you designed while relying on the platform features they love. + +![A stylized representation of a game controller shown on top of a grid. The image is overlaid with rectangular and circular grid lines and is tinted green to subtly reflect the green in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/87a9000504347b999d742d13b3b73635/platforms-games-intro%402x.png) + +As you create or adapt a game for Apple platforms, learn how to integrate the fundamental platform characteristics and patterns that help your game feel at home on all Apple devices. To learn what makes each platform unique, see [Designing for iOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios), [Designing for iPadOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados), [Designing for macOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos), [Designing for tvOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos), [Designing for visionOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos), and [Designing for watchOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos). For developer guidance, see [Games Pathway](https://developer.apple.com/games/pathway/). + +## [Jump into gameplay](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Jump-into-gameplay) + +**Let people play as soon as installation completes.** You don’t want a player’s first experience with your game to be waiting for a lengthy download. Include as much playable content as you can in your game’s initial installation while keeping the download time to 30 minutes or less. Download additional content in the background. For guidance, see [Loading](https://developer.apple.com/design/human-interface-guidelines/loading). + +**Provide great default settings.** People appreciate being able to start playing without first having to change a lot of settings. Use information about a player’s device to choose the best defaults for your game, such as the device resolution that makes your graphics look great, automatic recognition of paired accessories and game controllers, and the player’s accessibility settings. Also, make sure your game supports the platform’s most common interaction methods. For guidance, see [Settings](https://developer.apple.com/design/human-interface-guidelines/settings). + +**Teach through play.** Players often learn better when they discover new information and mechanics in the context of your game’s world, so it can work well to integrate configuration and onboarding flows into a playable tutorial that engages people quickly and helps them feel successful right away. If you also have a written tutorial, consider offering it as a resource players can refer to when they have questions instead of making it a prerequisite for gameplay. For guidance, see [Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding). + +**Defer requests until the right time.** You don’t want to bombard people with too many requests before they start playing, but if your game uses certain sensors on an Apple device or personalizes gameplay by accessing data like hand-tracking, you must first get the player’s permission (for guidance, see [Privacy](https://developer.apple.com/design/human-interface-guidelines/privacy)). To help people understand why you’re making such a request, integrate it into the scenario that requires the data. For example, you could ask permission to track a player’s hands between an initial cutscene and the first time they can use their hands to control the action. Also, make sure people spend quality time with your game before you ask them for a rating or review (for guidance, see [Ratings and reviews](https://developer.apple.com/design/human-interface-guidelines/ratings-and-reviews)). + +[![A sketch of a square containing an arrow pointing to the upper-right corner, suggesting a transition to a new state. The image is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/95c588c36ab492f99a5a71addbabef12/patterns-launching-thumbnail%402x.png) Launching ](https://developer.apple.com/design/human-interface-guidelines/launching) + +[![A sketch of a waving hand, suggesting a gesture of welcoming. The image is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d95e8d3a568083918565701d3fe5360e/patterns-onboarding-thumbnail%402x.png) Onboarding ](https://developer.apple.com/design/human-interface-guidelines/onboarding) + +[![A sketch of a spinning indeterminate activity indicator, suggesting data loading. The image is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/d3c4485e4c81890440c23e3f64d5511e/patterns-loading-thumbnail%402x.png) Loading ](https://developer.apple.com/design/human-interface-guidelines/loading) + +## [Look stunning on every display](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Look-stunning-on-every-display) + +**Make sure text is always legible.** When game text is hard to read, people can struggle to follow the narrative, understand important instructions and information, and stay engaged in the experience. To keep text comfortably legible on each device, ensure that it contrasts well with the background and uses at least the recommended minimum text size in each platform. For guidance, see [Typography](https://developer.apple.com/design/human-interface-guidelines/typography); for developer guidance, see [Adapting your game interface for smaller screens](https://developer.apple.com/documentation/Metal/adapting-your-game-interface-for-smaller-screens). + +Platform| Default text size| Minimum text size +---|---|--- +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 + +**Make sure buttons are always easy to use.** Buttons that are too small or too close together can frustrate players and make gameplay less fun. Each platform defines a recommended minimum button size based on its default interaction method. For example, buttons in iOS must be at least 44x44 pt to accommodate touch interaction. For guidance, see [Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons). + +Platform| Default button size| Minimum button size +---|---|--- +iOS, iPadOS| 44x44 pt| 28x28 pt +macOS| 28x28 pt| 20x20 pt +tvOS| 66x66 pt| 56x56 pt +visionOS| 60x60 pt| 28x28 pt +watchOS| 44x44 pt| 28x28 pt + +**Prefer resolution-independent textures and graphics.** If creating resolution-independent assets isn’t possible, match the resolution of your game to the resolution of the device. In visionOS, prefer vector-based art that can continue to look good when the system dynamically scales it as people view it from different distances and angles. For guidance, see [Images](https://developer.apple.com/design/human-interface-guidelines/images). + +**Integrate device features into your layout.** For example, a device may have rounded corners or a camera housing that can affect parts of your interface. To help your game look at home on each device, accommodate such features during layout, relying on platform-provided safe areas when possible (for developer guidance, see [Positioning content relative to the safe area](https://developer.apple.com/documentation/UIKit/positioning-content-relative-to-the-safe-area)). For guidance, see [Layout](https://developer.apple.com/design/human-interface-guidelines/layout); for templates that include safe-area guides, see [Apple Design Resources](https://developer.apple.com/design/resources/). + +**Make sure in-game menus adapt to different aspect ratios.** Games need to look good and behave well at various aspect ratios, such as 16:10, 19.5:9, and 4:3. In particular, in-game menus need to remain legible and easy to use on every device — and, if you support them, in both orientations on iPhone and iPad — without obscuring other content. To help ensure your in-game menus render correctly, consider using dynamic layouts that rely on relative constraints to adjust to different contexts. Avoid fixed layouts as much as possible, and aim to create a custom, device-specific layout only when necessary. For guidance, see [In-game menus](https://developer.apple.com/design/human-interface-guidelines/menus#In-game-menus). + +**Design for the full-screen experience.** People often enjoy playing a game in a distraction-free, full-screen context. In macOS, iOS, and iPadOS, full-screen mode lets people hide other apps and parts of the system UI; in visionOS, a game running in a Full Space can completely surround people, transporting them somewhere else. For guidance, see [Going full screen](https://developer.apple.com/design/human-interface-guidelines/going-full-screen). + +[![A sketch of a small rectangle in the upper-left quadrant of a larger rectangle, suggesting the position of a user interface element within a window. The image is overlaid with rectangular and circular grid lines and is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/0db27821e97ac9613ac0cc103892a10d/foundations-layout-thumbnail%402x.png) Layout ](https://developer.apple.com/design/human-interface-guidelines/layout) + +[![A sketch of a small letter A to the left of a large letter A, suggesting the use of typography to convey hierarchical information. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/30a9c2adbbfa1602133dcfb2f5bfeaab/foundations-typography-thumbnail%402x.png) Typography ](https://developer.apple.com/design/human-interface-guidelines/typography) + +[![A sketch of two outward-pointing arrows arranged in a vertical line extending from the upper-left to the bottom-right, suggesting expansion. The image is tinted orange to subtly reflect the orange in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/335e1e0476ff4830a1a4add07fb016a0/patterns-going-full-screen-thumbnail%402x.png) Going full screen ](https://developer.apple.com/design/human-interface-guidelines/going-full-screen) + +## [Enable intuitive interactions](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Enable-intuitive-interactions) + +**Support each platform’s default interaction method.** For example, people generally use touch to play games on iPhone; on a Mac, players tend to expect keyboard and mouse or trackpad support; and in a visionOS game, people expect to use their eyes and hands while making indirect and direct gestures. As you work to ensure that your game supports each platform’s default interaction method, pay special attention to control sizing and menu behavior, especially when bringing your game from a pointer-based context to a touch-based one. + +Platform| Default interaction methods| Additional interaction methods +---|---|--- +iOS| Touch| Game controller +iPadOS| Touch| Game controller, keyboard, mouse, trackpad, Apple Pencil +macOS| Keyboard, mouse, trackpad| Game controller +tvOS| Remote| Game controller, keyboard, mouse, trackpad +visionOS| Touch| Game controller, keyboard, mouse, trackpad, spatial game controller +watchOS| Touch| – + +**Support physical game controllers, while also giving people alternatives.** Every platform except watchOS supports physical game controllers. Although the presence of a game controller makes it straightforward to port controls from an existing game and handle complex control mappings, recognize that not every player can use a physical game controller. To make your game available to as many players as possible, also offer alternative ways to interact with your game. For guidance, see [Physical controllers](https://developer.apple.com/design/human-interface-guidelines/game-controls#Physical-controllers). + +**Offer touch-based game controls that embrace the touchscreen experience on iPhone and iPad.** In iOS and iPadOS, your game can allow players to interact directly with game elements, and to control the game using virtual controls that appear on top of your game content. For design guidance, see [Touch controls](https://developer.apple.com/design/human-interface-guidelines/game-controls#Touch-controls). + +[![A sketch of a D-pad control from a game controller, suggesting gameplay. The image is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/36867292ccfd45e0f937f522d7e214f7/inputs-game-controls-thumbnail%402x.png) Game controls ](https://developer.apple.com/design/human-interface-guidelines/game-controls) + +[![A sketch of a pointing hand swiping in a curved motion toward the right, suggesting touch interaction with a device. The image is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ca100cc13bcc2fbb7168bebc1da95af8/inputs-gestures-thumbnail%402x.png) Gestures ](https://developer.apple.com/design/human-interface-guidelines/gestures) + +[![A sketch of an arrow-shaped pointer, suggesting use of a mouse or trackpad. The image is tinted purple to subtly reflect the purple in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/69b91fbe2b281f7b638d380a3a6aa416/inputs-pointing-devices-thumbnail%402x.png) Pointing devices ](https://developer.apple.com/design/human-interface-guidelines/pointing-devices) + +## [Welcome everyone](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Welcome-everyone) + +**Prioritize perceivability.** Make sure people can perceive your game’s content whether they use sight, hearing, or touch. For example, avoid relying solely on color to convey an important detail, or providing a cutscene that doesn’t include descriptive subtitles or offer other ways to read the content. For specific guidance, see: + + * Text sizes + + * Color and effects + + * Motion + + * Interactions + + * Buttons + + + + +**Help players personalize their experience.** Players have a variety of preferences and abilities that influence their interactions with your game. Because there’s no universal configuration that suits everyone, give players the ability to customize parameters like type size, game control mapping, motion intensity, and sound balance. You can take advantage of built-in [Apple accessibility technologies](https://developer.apple.com/accessibility/) to support accessibility personalizations, whether you’re using system frameworks or [Unity plug-ins](https://github.com/Apple/UnityPlugins). + +**Give players the tools they need to represent themselves.** If your game encourages players to create avatars or supply names or descriptions, support the spectrum of self-identity and provide options that represent as many human characteristics as possible. + +**Avoid stereotypes in your stories and characters.** Ask yourself whether you’re depicting game characters and scenarios in a way that perpetuates real-life stereotypes. For example, does your game depict enemies as having a certain race, gender, or cultural heritage? Review your game to uncover and remove biases and stereotypes and — if references to real-life cultures and languages are necessary — be sure they’re respectful. + +[![A sketch of the Accessibility icon. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8b7b11d06dd958f4e9449f0a5acdadbd/foundations-accessibility-thumbnail%402x.png) Accessibility ](https://developer.apple.com/design/human-interface-guidelines/accessibility) + +[![A sketch of two people, suggesting inclusion. The image is tinted yellow to subtly reflect the yellow in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/bbb606721d228138791654cb9f6f426c/foundations-inclusion-thumbnail%402x.png) Inclusion ](https://developer.apple.com/design/human-interface-guidelines/inclusion) + +## [Adopt Apple technologies](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Adopt-Apple-technologies) + +**Integrate Game Center to help players discover your game across their devices and connect with their friends.** [Game Center](https://developer.apple.com/game-center/) is Apple’s social gaming network, available on all platforms. Game Center lets players keep track of their progress and achievements and allows you to set up leaderboards, challenges, and multiplayer activities in your game. For design guidance, see [Game Center](https://developer.apple.com/design/human-interface-guidelines/game-center); for developer guidance, see [GameKit](https://developer.apple.com/documentation/GameKit). + +**Let players pick up their game on any of their devices.** People often have a single iCloud account that they use across multiple Apple devices. When you support [GameSave](https://developer.apple.com/documentation/GameSave), you can help people save their game state and start back up exactly where they left off on a different device. + +**Support haptics to help players feel the action.** When you adopt Core Haptics, you can compose and play custom haptic patterns, optionally combined with custom audio content. Core Haptics is available in iOS, iPadOS, tvOS, and visionOS, and supported on many game controllers. For guidance, see [Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics); for developer guidance, see [Core Haptics](https://developer.apple.com/documentation/CoreHaptics) and [Playing Haptics on Game Controllers](https://developer.apple.com/documentation/CoreHaptics/playing-haptics-on-game-controllers). + +**Use Spatial Audio to immerse players in your game’s soundscape.** Providing multichannel audio can help your game’s audio adapt automatically to the current device, enabling an immersive Spatial Audio experience where supported. For guidance, see [Playing audio > visionOS](https://developer.apple.com/design/human-interface-guidelines/playing-audio#visionOS); for developer guidance, see [Explore Spatial Audio](https://developer.apple.com/news/?id=fakg1z5b). + +**Take advantage of Apple technologies to enable unique gameplay mechanics.** For example, you can integrate technologies like augmented reality, machine learning, and [HealthKit](https://developer.apple.com/documentation/HealthKit), and request access to location data and functionality like camera and microphone. For a full list of Apple technologies, features, and services, see [Technologies](https://developer.apple.com/design/human-interface-guidelines/technologies). + +[![A sketch of the Game Center icon. The image is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/304edbb771279f5c096419df2cd735fe/technologies-game-center-thumbnail%402x.png) Game Center ](https://developer.apple.com/design/human-interface-guidelines/game-center) + +[![A sketch of the iCloud icon. The image is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/2b14682c9fa6e5d71042fa722c12bb3f/technologies-icloud-thumbnail%402x.png) iCloud ](https://developer.apple.com/design/human-interface-guidelines/icloud) + +[![A sketch of an add button, suggesting the purchase of additional digital assets within an app. The image is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/de58b03338460608880147558546707a/technologies-in-app-purchase-thumbnail%402x.png) In-app purchase ](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase) + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Related) + +[Game Center](https://developer.apple.com/design/human-interface-guidelines/game-center) + +[Game controls](https://developer.apple.com/design/human-interface-guidelines/game-controls) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Developer-documentation) + +[Games Pathway](https://developer.apple.com/games/get-started/) + +[Create games for Apple platforms](https://developer.apple.com/games/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/6C097D36-BE91-4B04-854A-E6264DA86F15/9890_wide_250x141_1x.jpg) Level up your games ](https://developer.apple.com/videos/play/wwdc2025/209) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/2DB746B8-E0B0-4ED1-B250-902DB7A0F3E7/9196_wide_250x141_1x.jpg) Design advanced games for Apple platforms ](https://developer.apple.com/videos/play/wwdc2024/10085) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/designing-for-games#Change-log) + +Date| Changes +---|--- +June 9, 2025| Updated guidance for touch-based controls and Game Center. +June 10, 2024| New page. + diff --git a/skills/hig-platforms/references/designing-for-ios.md b/skills/hig-platforms/references/designing-for-ios.md new file mode 100644 index 00000000..b389da34 --- /dev/null +++ b/skills/hig-platforms/references/designing-for-ios.md @@ -0,0 +1,66 @@ +--- +title: "Designing for iOS | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/designing-for-ios + +# Designing for iOS + +People depend on their iPhone to help them stay connected, play games, view media, accomplish tasks, and track personal data in any location and while on the go. + +![A stylized representation of an iPhone frame shown on top of a grid. The image is overlaid with rectangular and circular grid lines and is tinted green to subtly reflect the green in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/fcb6f603e6672e3443637efe652e5bdb/platforms-iOS-intro%402x.png) + +As you begin designing your app or game for iOS, start by understanding the following fundamental device characteristics and patterns that distinguish the iOS experience. Using these characteristics and patterns to inform your design decisions can help you provide an app or game that iPhone users appreciate. + +**Display.** iPhone has a medium-size, high-resolution display. + +**Ergonomics.** People generally hold their iPhone in one or both hands as they interact with it, switching between landscape and portrait orientations as needed. While people are interacting with the device, their viewing distance tends to be no more than a foot or two. + +**Inputs.** Multi-Touch [gestures](https://developer.apple.com/design/human-interface-guidelines/gestures), [virtual keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards), and [voice](https://developer.apple.com/design/human-interface-guidelines/siri) control let people perform actions and accomplish meaningful tasks while they’re on the go. In addition, people often want apps to use their [personal data](https://developer.apple.com/design/human-interface-guidelines/privacy) and input from the device’s [gyroscope and accelerometer](https://developer.apple.com/design/human-interface-guidelines/gyro-and-accelerometer), and they may also want to participate in [spatial interactions](https://developer.apple.com/design/human-interface-guidelines/spatial-interactions). + +**App interactions.** Sometimes, people spend just a minute or two checking on event or social media updates, tracking data, or sending messages. At other times, people can spend an hour or more browsing the web, playing games, or enjoying media. People typically have multiple apps open at the same time, and they appreciate switching frequently among them. + +**System features.** iOS provides several features that help people interact with the system and their apps in familiar, consistent ways. + + * [Widgets](https://developer.apple.com/design/human-interface-guidelines/widgets) + + * [Home Screen quick actions](https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions) + + * [Spotlight](https://developer.apple.com/design/human-interface-guidelines/searching) + + * [Shortcuts](https://developer.apple.com/design/human-interface-guidelines/siri#Shortcuts-and-suggestions) + + * [Activity views](https://developer.apple.com/design/human-interface-guidelines/activity-views) + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios#Best-practices) + +Great iPhone experiences integrate the platform and device capabilities that people value most. To help your design feel at home in iOS, prioritize the following ways to incorporate these features and capabilities. + + * Help people concentrate on primary tasks and content by limiting the number of onscreen controls while making secondary details and actions discoverable with minimal interaction. + + * Adapt seamlessly to appearance changes — like device orientation, Dark Mode, and Dynamic Type — letting people choose the configurations that work best for them. + + * Support interactions that accommodate the way people usually hold their device. For example, it tends to be easier and more comfortable for people to reach a control when it’s located in the middle or bottom area of the display, so it’s especially important let people swipe to navigate back or initiate actions in a list row. + + * With people’s permission, integrate information available through platform capabilities in ways that enhance the experience without asking people to enter data. For example, you might accept payments, provide security through biometric authentication, or offer features that use the device’s location. + + + + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/#ios-apps) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios#Developer-documentation) + +[iOS Pathway](https://developer.apple.com/ios/get-started/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_1x.jpg) Meet Liquid Glass ](https://developer.apple.com/videos/play/wwdc2025/219) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + diff --git a/skills/hig-platforms/references/designing-for-ipados.md b/skills/hig-platforms/references/designing-for-ipados.md new file mode 100644 index 00000000..1fdd308f --- /dev/null +++ b/skills/hig-platforms/references/designing-for-ipados.md @@ -0,0 +1,64 @@ +--- +title: "Designing for iPadOS | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados + +# Designing for iPadOS + +People value the power, mobility, and flexibility of iPad as they enjoy media, play games, perform detailed productivity tasks, and bring their creations to life. + +![A stylized representation of an iPad frame shown on top of a grid. The image is overlaid with rectangular and circular grid lines and is tinted green to subtly reflect the green in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/9601c88115bc94c01906416dbb3b8be8/platforms-iPadOS-intro%402x.png) + +As you begin designing your app or game for iPad, start by understanding the following fundamental device characteristics and patterns that distinguish the iPadOS experience. Using these characteristics and patterns to inform your design decisions can help you provide an app or game that iPad users appreciate. + +**Display.** iPad has a large, high-resolution display. + +**Ergonomics.** People often hold their iPad while using it, but they might also set it on a surface or place it on a stand. Positioning the device in different ways can change the viewing distance, although people are typically within about 3 feet of the device as they interact with it. + +**Inputs.** People can interact with iPad using Multi-Touch [gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) and [virtual keyboards](https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards), an attached [keyboard](https://developer.apple.com/design/human-interface-guidelines/keyboards) or [pointing device](https://developer.apple.com/design/human-interface-guidelines/pointing-devices), [Apple Pencil](https://developer.apple.com/design/human-interface-guidelines/apple-pencil-and-scribble), or [voice](https://developer.apple.com/design/human-interface-guidelines/siri), and they often combine multiple input modes. + +**App interactions.** Sometimes, people perform a few quick actions on their iPad. At other times, they spend hours immersed in games, media, content creation, or productivity tasks. People frequently have multiple apps open at the same time, and they appreciate viewing more than one app onscreen at once and taking advantage of inter-app capabilities like drag and drop. + +**System features.** iPadOS provides several features that help people interact with the system and their apps in familiar, consistent ways. + + * [Multitasking](https://developer.apple.com/design/human-interface-guidelines/multitasking) + + * [Widgets](https://developer.apple.com/design/human-interface-guidelines/widgets) + + * [Drag and drop](https://developer.apple.com/design/human-interface-guidelines/drag-and-drop) + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados#Best-practices) + +Great iPad experiences integrate the platform and device capabilities that people value most. To help your experience feel at home in iPadOS, prioritize the following ways to incorporate these features and capabilities. + + * Take advantage of the large display to elevate the content people care about, minimizing modal interfaces and full-screen transitions, and positioning onscreen controls where they’re easy to reach, but not in the way. + + * Use viewing distance and input mode to help you determine the size and density of the onscreen content you display. + + * Let people use Multi-Touch gestures, a physical keyboard or trackpad, or Apple Pencil, and consider supporting unique interactions that combine multiple input modes. + + * Adapt seamlessly to appearance changes — like device orientation, multitasking modes, Dark Mode, and Dynamic Type — and transition effortlessly to running in macOS, letting people choose the configurations that work best for them. + + + + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/#ios-apps) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados#Developer-documentation) + +[iPadOS Pathway](https://developer.apple.com/ipados/get-started/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/designing-for-ipados#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/873F40BE-101A-4C0D-99F0-F5C7CE7B47A3/10046_wide_250x141_1x.jpg) Elevate the design of your iPad app ](https://developer.apple.com/videos/play/wwdc2025/208) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_1x.jpg) Meet Liquid Glass ](https://developer.apple.com/videos/play/wwdc2025/219) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + diff --git a/skills/hig-platforms/references/designing-for-macos.md b/skills/hig-platforms/references/designing-for-macos.md new file mode 100644 index 00000000..f9c54d6d --- /dev/null +++ b/skills/hig-platforms/references/designing-for-macos.md @@ -0,0 +1,70 @@ +--- +title: "Designing for macOS | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/designing-for-macos + +# Designing for macOS + +People rely on the power, spaciousness, and flexibility of a Mac as they perform in-depth productivity tasks, view media or content, and play games, often using several apps at once. + +![A stylized representation of a Mac shown on top of a grid. The image is overlaid with rectangular and circular grid lines and is tinted green to subtly reflect the green in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/c553fef2b37b038dea23f7ef210433b9/platforms-macOS-intro%402x.png) + +As you begin designing your app or game for macOS, start by understanding the fundamental device characteristics and patterns that distinguish the macOS experience. Using these characteristics and patterns to inform your design decisions can help you provide an app or game that Mac users appreciate. + +**Display.** A Mac typically has a large, high-resolution display, and people can extend their workspace by connecting additional displays, including their iPad. + +**Ergonomics.** People generally use a Mac while they’re stationary, often placing the device on a desk or table. In the typical use case, the viewing distance can range from about 1 to 3 feet. + +**Inputs.** People expect to enter data and control the interface using any combination of input modes, such as physical [Keyboards](https://developer.apple.com/design/human-interface-guidelines/keyboards), [Pointing devices](https://developer.apple.com/design/human-interface-guidelines/pointing-devices), [Game controls](https://developer.apple.com/design/human-interface-guidelines/game-controls), and [Siri](https://developer.apple.com/design/human-interface-guidelines/siri). + +**App interactions.** Interactions can last anywhere from a few minutes of performing some quick tasks to several hours of deep concentration. People frequently have multiple apps open at the same time, and they expect smooth transitions between active and inactive states as they switch from one app to another. + +**System features.** macOS provides several features that help people interact with the system and their apps in familiar, consistent ways. + + * [The menu bar](https://developer.apple.com/design/human-interface-guidelines/the-menu-bar) + + * [File management](https://developer.apple.com/design/human-interface-guidelines/file-management) + + * [Going full screen](https://developer.apple.com/design/human-interface-guidelines/going-full-screen) + + * [Dock menus](https://developer.apple.com/design/human-interface-guidelines/dock-menus) + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos#Best-practices) + +Great Mac experiences integrate the platform and device capabilities that people value most. To help your design feel at home in macOS, prioritize the following ways to incorporate these features and capabilities. + + * Leverage large displays to present more content in fewer nested levels and with less need for modality, while maintaining a comfortable information density that doesn’t make people strain to view the content they want. + + * Let people resize, hide, show, and move your windows to fit their work style and device configuration, and support full-screen mode to offer a distraction-free context. + + * Use the menu bar to give people easy access to all the commands they need to do things in your app. + + * Help people take advantage of high-precision input modes to perform pixel-perfect selections and edits. + + * Handle keyboard shortcuts to help people accelerate actions and use keyboard-only work styles. + + * Support personalization, letting people customize toolbars, configure windows to display the views they use most, and choose the colors and fonts they want to see in the interface. + + + + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/#macos-apps) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos#Developer-documentation) + +[macOS Pathway](https://developer.apple.com/macos/get-started/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/5CD0E251-424E-490F-89CF-1E64848209A6/9910_wide_250x141_1x.jpg) Meet Liquid Glass ](https://developer.apple.com/videos/play/wwdc2025/219) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/1AAA030E-2ECA-47D8-AE09-6D7B72A840F6/10044_wide_250x141_1x.jpg) Get to know the new design system ](https://developer.apple.com/videos/play/wwdc2025/356) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/754D8BF7-206F-4342-8705-7B836D449D9C/10015_wide_250x141_1x.jpg) Build an AppKit app with the new design ](https://developer.apple.com/videos/play/wwdc2025/310) + diff --git a/skills/hig-platforms/references/designing-for-tvos.md b/skills/hig-platforms/references/designing-for-tvos.md new file mode 100644 index 00000000..e50ca678 --- /dev/null +++ b/skills/hig-platforms/references/designing-for-tvos.md @@ -0,0 +1,68 @@ +--- +title: "Designing for tvOS | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos + +# Designing for tvOS + +People enjoy the vibrant content, immersive experiences, and streamlined interactions that tvOS delivers in media and games, as well as in fitness, education, and home utility apps. + +![A stylized representation of a TV screen shown on top of a grid. The image is overlaid with rectangular and circular grid lines and is tinted green to subtly reflect the green in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/cd98e6ef7baa3ddd91de67f43a979c8e/platforms-tvOS-intro%402x.png) + +As you begin designing your app or game for tvOS, start by understanding the following fundamental device characteristics and patterns that distinguish the tvOS experience. Using these characteristics and patterns to inform your design decisions can help you provide an app or game that tvOS users appreciate. + +**Display.** A TV typically has a very large, high-resolution display. + +**Ergonomics.** Although people generally remain many feet away from their stationary TV — often 8 feet or more — they sometimes continue to interact with content as they move around the room. + +**Inputs.** People can use a [remote](https://developer.apple.com/design/human-interface-guidelines/remotes), a [game controller](https://developer.apple.com/design/human-interface-guidelines/game-controls), their [voice](https://developer.apple.com/design/human-interface-guidelines/siri), and apps running on their other devices to interact with Apple TV. + +**App interactions.** People can get deeply immersed in a single experience — often lasting hours — but they also appreciate using a picture-in-picture view to simultaneously follow an alternative app or video. + +**System features.** Apple TV users expect their apps and games to integrate well with the following system experiences. + + * [Integrating with the TV app](https://developer.apple.com/design/human-interface-guidelines/playing-video#Integrating-with-the-TV-app) + + * [SharePlay](https://developer.apple.com/design/human-interface-guidelines/shareplay) + + * [Top Shelf](https://developer.apple.com/design/human-interface-guidelines/top-shelf) + + * [TV provider accounts](https://developer.apple.com/design/human-interface-guidelines/managing-accounts#TV-provider-accounts) + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos#Best-practices) + +Great tvOS experiences integrate the platform and device capabilities that people value most. To help your experience feel at home in tvOS, prioritize the following ways to incorporate these features and capabilities. + + * Support powerful, delightful interactions through the fluid, familiar gestures people make with the Siri Remote. + + * Embrace the tvOS focus system, letting it gently highlight and expand onscreen items as people move among them, helping them know what to do and where they are at all times. + + * Deliver beautiful, edge-to-edge artwork, subtle and fluid animations, and engaging audio, wrapping people in a rich, cinematic experience that’s clear, legible, and captivating from across the room. + + * Enhance multiuser support by making sign-in easy and infrequent, handling shared sign-in, and automatically switching profiles when people change the current viewer. + + + + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/#tvos-apps) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos#Developer-documentation) + +[tvOS Pathway](https://developer.apple.com/tvos/get-started/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/B17CF999-313D-4C0D-A791-D2A5DD5F9242/3789_wide_250x141_1x.jpg) Build SwiftUI apps for tvOS ](https://developer.apple.com/videos/play/wwdc2020/10042) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/designing-for-tvos#Change-log) + +Date| Changes +---|--- +September 14, 2022| Refined best practices for multiuser support. + diff --git a/skills/hig-platforms/references/designing-for-visionos.md b/skills/hig-platforms/references/designing-for-visionos.md new file mode 100644 index 00000000..96da90b5 --- /dev/null +++ b/skills/hig-platforms/references/designing-for-visionos.md @@ -0,0 +1,85 @@ +--- +title: "Designing for visionOS | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos + +# Designing for visionOS + +When people wear Apple Vision Pro, they enter an infinite 3D space where they can engage with your app or game while staying connected to their surroundings. + +![A stylized representation of Apple Vision Pro shown on top of a grid. The image is overlaid with rectangular and circular grid lines and is tinted green to subtly reflect the green in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/9d51f701c7321cced431aac9d5212b9e/platforms-visionOS-intro%402x.png) + +As you begin designing your app or game for visionOS, start by understanding the fundamental device characteristics and patterns that distinguish the platform. Use these characteristics and patterns to inform your design decisions and help you create immersive and engaging experiences. + +**Space.** Apple Vision Pro offers a limitless canvas where people can view virtual content like [windows](https://developer.apple.com/design/human-interface-guidelines/windows), [volumes](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS-volumes), and 3D objects, and choose to enter deeply immersive experiences that can transport them to different places. + +**Immersion.** In a visionOS app, people can fluidly transition between different levels of [immersion](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). By default, an app launches in the _Shared Space_ where multiple apps can run side-by-side and people can open, close, and relocate windows. People can also choose to transition an app to a _Full Space_ , where it’s the only app running. While in a Full Space app, people can view 3D content blended with their surroundings, open a portal to view another place, or enter a different world. + +**Passthrough.** [Passthrough](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences#Immersion-and-passthrough) provides live video from the device’s external cameras, and helps people interact with virtual content while also seeing their actual surroundings. When people want to see more or less of their surroundings, they use the [Digital Crown](https://developer.apple.com/design/human-interface-guidelines/digital-crown) to control the amount of passthrough. + +**Spatial Audio.** Apple Vision Pro combines acoustic and visual-sensing technologies to model the sonic characteristics of a person’s surroundings, automatically making audio sound natural in their space. When an app receives a person’s permission to access information about their surroundings, it can fine-tune [Spatial Audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio#visionOS) to bring custom experiences to life. + +**Eyes and hands.** In general, people perform most actions by using their [eyes](https://developer.apple.com/design/human-interface-guidelines/eyes) to look at a virtual object and making an _indirect_ [gesture](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS), like a tap, to activate it. People can also interact with a virtual object by using a _direct_ gesture, like touching it with a finger. + +**Ergonomics.** While wearing Apple Vision Pro, people rely entirely on the device’s cameras for everything they see, both real and virtual, so maintaining visual comfort is paramount. The system helps maintain comfort by automatically placing content so it’s relative to the wearer’s head, regardless of the person’s height or whether they’re sitting, standing, or lying down. Because visionOS brings content to people — instead of making people move to reach the content — people can remain at rest while engaging with apps and games. + +**Accessibility.** Apple Vision Pro supports [accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) technologies like VoiceOver, Switch Control, Dwell Control, Guided Access, Head Pointer, and many more, so people can use the interactions that work for them. In visionOS, as in all platforms, system-provided UI components build in accessibility support by default, while system frameworks give you ways to enhance the accessibility of your app or game. + +Important + +When 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](https://support.apple.com/guide/apple-vision-pro). 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. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos#Best-practices) + +Great visionOS apps and games are approachable and familiar, while offering extraordinary experiences that can surround people with beautiful content, expanded capabilities, and captivating adventures. + +**Embrace the unique features of Apple Vision Pro.** Take advantage of space, Spatial Audio, and immersion to bring life to your experiences, while integrating passthrough and spatial input from eyes and hands in ways that feel at home on the device. + +**Consider different types of immersion as you design ways to present your app’s most distinctive moments.** You can present experiences in a windowed, UI-centric context, a fully immersive context, or something in between. For each key moment in your app, find the minimum level of immersion that suits it best — don’t assume that every moment needs to be fully immersive. + +**Use windows for contained, UI-centric experiences.** To help people perform standard tasks, prefer standard [windows](https://developer.apple.com/design/human-interface-guidelines/windows#visionOS) that appear as planes in space and contain familiar controls. In visionOS, people can relocate windows anywhere they want, and the system’s [dynamic scaling](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Scale) helps keep window content legible whether it’s near or far. + +**Prioritize comfort.** To help people stay comfortable and physically relaxed as they interact with your app or game, keep the following fundamentals in mind. + + * Display content within a person’s [field of view](https://developer.apple.com/design/human-interface-guidelines/spatial-layout#Field-of-view), positioning it relative to their head. Avoid placing content in places where people have to turn their head or change their position to interact with it. + + * Avoid displaying [motion](https://developer.apple.com/design/human-interface-guidelines/motion#visionOS) that’s overwhelming, jarring, too fast, or missing a stationary frame of reference. + + * Support [indirect gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#visionOS) that let people interact with apps while their hands rest in their lap or at their sides. + + * If you support direct gestures, make sure the interactive content isn’t too far away and that people don’t need to interact with it for extended periods. + + * Avoid encouraging people to move too much while they’re in a fully [immersive experience](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + + + + +**Help people share activities with others.** When you use [SharePlay](https://developer.apple.com/design/human-interface-guidelines/shareplay#visionOS) to support shared activities, people can view the _spatial Personas_ of other participants, making it feel like everyone is together in the same space. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/#visionos-apps) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos#Developer-documentation) + +[visionOS Pathway](https://developer.apple.com/visionos/get-started/) + +[Creating your first visionOS app](https://developer.apple.com/documentation/visionOS/creating-your-first-visionos-app) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/B2E0763D-C5D2-4191-AC0B-F99D56BE781F/9208_wide_250x141_1x.jpg) Design interactive experiences for visionOS ](https://developer.apple.com/videos/play/wwdc2024/10096) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/A207EE2A-D9E6-4FAB-A557-ABEAA68840AB/9197_wide_250x141_1x.jpg) Design great visionOS apps ](https://developer.apple.com/videos/play/wwdc2024/10086) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/15489B11-8744-483D-AD38-EF78D8962FF4/8126_wide_250x141_1x.jpg) Principles of spatial design ](https://developer.apple.com/videos/play/wwdc2023/10072) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos#Change-log) + +Date| Changes +---|--- +February 2, 2024| Included a link to Apple Vision Pro User Guide. +September 12, 2023| Updated intro artwork. +June 21, 2023| New page. + diff --git a/skills/hig-platforms/references/designing-for-watchos.md b/skills/hig-platforms/references/designing-for-watchos.md new file mode 100644 index 00000000..69bd57cc --- /dev/null +++ b/skills/hig-platforms/references/designing-for-watchos.md @@ -0,0 +1,74 @@ +--- +title: "Designing for watchOS | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos + +# Designing for watchOS + +When people glance at their Apple Watch, they know they can access essential information and perform simple, timely tasks whether they’re stationary or in motion. + +![A stylized representation of an Apple Watch frame shown on top of a grid. The image is overlaid with rectangular and circular grid lines and is tinted green to subtly reflect the green in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/4fb079e34e794b1a6b9fc03acf2c22a4/platforms-watchOS-intro%402x.png) + +As you begin designing your app for Apple Watch, start by understanding the following fundamental device characteristics and patterns that distinguish the watchOS experience. Using these characteristics and patterns to inform your design decisions can help you provide an app that Apple Watch users appreciate. + +**Display.** The small Apple Watch display fits on the wrist while delivering an easy-to-read, high-resolution experience. + +**Ergonomics.** Because people wear Apple Watch, they’re usually no more than a foot away from the display as they raise their wrist to view it and use their opposite hand to interact with the device. In addition, the Always On display lets people view information on the watch face when they drop their wrist. + +**Inputs.** People can navigate vertically or inspect data by turning the [Digital Crown](https://developer.apple.com/design/human-interface-guidelines/digital-crown), which offers consistent control on the watch face, the Home Screen, and within apps. They can provide input even while they’re in motion with standard [gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) like tap, swipe, and drag. Pressing the [Action button](https://developer.apple.com/design/human-interface-guidelines/action-button) initiates an essential action without looking at the screen, and using [shortcuts](https://developer.apple.com/design/human-interface-guidelines/siri#Shortcuts-and-suggestions) helps people perform their routine tasks quickly and easily. People can also take advantage of data that device features provide, such as GPS, sensors for blood oxygen and heart function, and the altimeter, accelerometer, and gyroscope. + +**App interactions.** People glance at the Always On display many times throughout the day, performing concise app interactions that can last for less than a minute each. People frequently use a watchOS app’s related experiences — like complications, notifications, and Siri interactions — more than they use the app itself. + +**System features.** watchOS provides several features that help people interact with the system and their apps in familiar, consistent ways. + + * [Complications](https://developer.apple.com/design/human-interface-guidelines/complications) + + * [Notifications](https://developer.apple.com/design/human-interface-guidelines/notifications) + + * [Always On](https://developer.apple.com/design/human-interface-guidelines/always-on) + + * [Watch faces](https://developer.apple.com/design/human-interface-guidelines/watch-faces) + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos#Best-practices) + +Great Apple Watch experiences are streamlined and specialized, and integrate the platform and device capabilities that people value most. To help your experience feel at home in watchOS, prioritize the following ways to incorporate these features and capabilities. + + * Support quick, glanceable, single-screen interactions that deliver critical information succinctly and help people perform targeted actions with a simple gesture or two. + + * Minimize the depth of hierarchy in your app’s navigation, and use the [Digital Crown](https://developer.apple.com/design/human-interface-guidelines/digital-crown) to provide vertical navigation for scrolling or switching between screens. + + * Personalize the experience by proactively anticipating people’s needs and using on-device data to provide actionable content that’s relevant in the moment or very soon. + + * Use [complications](https://developer.apple.com/design/human-interface-guidelines/complications) to provide relevant, potentially dynamic data and graphics right on the watch face where people can view them on every wrist raise and tap them to dive straight into your app. + + * Use [notifications](https://developer.apple.com/design/human-interface-guidelines/notifications) to deliver timely, high-value information and let people perform important actions without opening your app. + + * Use background content such as [color](https://developer.apple.com/design/human-interface-guidelines/color) to convey useful supporting information, and use [materials](https://developer.apple.com/design/human-interface-guidelines/materials) to illustrate hierarchy and a sense of place. + + * Design your app to function independently, complementing your notifications and complications by providing additional details and functionality. + + + + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/#watchos-apps) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos#Developer-documentation) + +[watchOS Pathway](https://developer.apple.com/watchos/get-started/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/29B2363D-8DFB-4A25-A3DB-A804582858FD/9956_wide_250x141_1x.jpg) What’s new in watchOS 26 ](https://developer.apple.com/videos/play/wwdc2025/334) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos#Change-log) + +Date| Changes +---|--- +June 5, 2023| Enhanced guidance for providing a glanceable, focused app experience, and emphasized the importance of the Digital Crown in navigation. + diff --git a/skills/hig-project-context/SKILL.md b/skills/hig-project-context/SKILL.md new file mode 100644 index 00000000..502661de --- /dev/null +++ b/skills/hig-project-context/SKILL.md @@ -0,0 +1,133 @@ +--- +name: hig-project-context +version: 1.0.0 +description: >- + Create or update a shared Apple design context document that other HIG skills + use to tailor guidance. Use when the user says "set up my project context," + "what platforms am I targeting," "configure HIG settings," or when starting a + new Apple platform project. Also activates when other HIG skills need project + context but none exists yet. This skill creates .claude/apple-design-context.md + so that hig-foundations, hig-platforms, hig-components-*, hig-inputs, and + hig-technologies can provide targeted advice without repetitive questions. +--- + +# Apple HIG: Project Context + +Create and maintain `.claude/apple-design-context.md` so other HIG skills can skip redundant questions. + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Gathering Context + +Before asking questions, auto-discover context from: + +1. **README.md** -- Product description, platform targets +2. **Package.swift / .xcodeproj** -- Supported platforms, minimum OS versions, dependencies +3. **Info.plist** -- App category, required capabilities, supported orientations +4. **Existing code** -- Import statements reveal frameworks (SwiftUI vs UIKit, HealthKit, etc.) +5. **Assets.xcassets** -- Color assets, icon sets, dark mode variants +6. **Accessibility audit** -- Grep for accessibility modifiers/attributes + +Present findings and ask the user to confirm or correct. Then gather anything still missing: + +### 1. Product Overview +- What does the app do? (one sentence) +- Category (productivity, social, health, game, utility, etc.) +- Stage (concept, development, shipped, redesign) + +### 2. Target Platforms +- Which Apple platforms? (iOS, iPadOS, macOS, tvOS, watchOS, visionOS) +- Minimum OS versions +- Universal or platform-specific? + +### 3. Technology Stack +- UI framework: SwiftUI, UIKit, AppKit, or mixed? +- Architecture: single-window, multi-window, document-based? +- Apple technologies in use? (HealthKit, CloudKit, ARKit, etc.) + +### 4. Design System +- System defaults or custom design system? +- Brand colors, fonts, icon style? +- Dark mode and Dynamic Type support status + +### 5. Accessibility Requirements +- Target level (baseline, enhanced, comprehensive) +- Specific considerations (VoiceOver, Switch Control, etc.) +- Regulatory requirements (WCAG, Section 508) + +### 6. User Context +- Primary personas (1-3) +- Key use cases and environments (desk, on-the-go, glanceable, immersive) +- Known pain points or design challenges + +### 7. Existing Design Assets +- Figma/Sketch files? +- Apple Design Resources in use? +- Existing component library? + +## Context Document Template + +Generate `.claude/apple-design-context.md` using this structure: + +```markdown +# Apple Design Context + +## Product +- **Name**: [App name] +- **Description**: [One sentence] +- **Category**: [Category] +- **Stage**: [Concept / Development / Shipped / Redesign] + +## Platforms +| Platform | Supported | Min OS | Notes | +|----------|-----------|--------|-------| +| iOS | Yes/No | | | +| iPadOS | Yes/No | | | +| macOS | Yes/No | | | +| tvOS | Yes/No | | | +| watchOS | Yes/No | | | +| visionOS | Yes/No | | | + +## Technology +- **UI Framework**: [SwiftUI / UIKit / AppKit / Mixed] +- **Architecture**: [Single-window / Multi-window / Document-based] +- **Apple Technologies**: [List any: HealthKit, CloudKit, ARKit, etc.] + +## Design System +- **Base**: [System defaults / Custom design system] +- **Brand Colors**: [List or reference] +- **Typography**: [System fonts / Custom fonts] +- **Dark Mode**: [Supported / Not yet / N/A] +- **Dynamic Type**: [Supported / Not yet / N/A] + +## Accessibility +- **Target Level**: [Baseline / Enhanced / Comprehensive] +- **Key Considerations**: [List any specific needs] + +## Users +- **Primary Persona**: [Description] +- **Key Use Cases**: [List] +- **Known Challenges**: [List] +``` + +## Updating Context + +When updating an existing context document: + +1. Read the current `.claude/apple-design-context.md` +2. Ask what has changed +3. Update only the changed sections +4. Preserve all unchanged information + +## Related Skills + +- **hig-platforms** -- Platform-specific guidance +- **hig-foundations** -- Color, typography, layout decisions +- **hig-patterns** -- UX pattern recommendations +- **hig-components-*** -- Component recommendations +- **hig-inputs** -- Input method coverage +- **hig-technologies** -- Apple technology relevance + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-technologies/SKILL.md b/skills/hig-technologies/SKILL.md new file mode 100644 index 00000000..0bbb3113 --- /dev/null +++ b/skills/hig-technologies/SKILL.md @@ -0,0 +1,131 @@ +--- +name: hig-technologies +version: 1.0.0 +description: > + Apple HIG guidance for Apple technology integrations: Siri, Apple Pay, HealthKit, + HomeKit, ARKit, machine learning, generative AI, iCloud, Sign in with Apple, + SharePlay, CarPlay, Game Center, in-app purchase, NFC, Wallet, VoiceOver, Maps, + Mac Catalyst, and more. Use when asked about: "Siri integration", "Apple Pay", + "HealthKit", "HomeKit", "ARKit", "augmented reality", "machine learning", + "generative AI", "iCloud sync", "Sign in with Apple", "SharePlay", "CarPlay", + "in-app purchase", "NFC", "VoiceOver", "Maps", "Mac Catalyst". Also use when + the user says "how do I integrate Siri," "what are the Apple Pay guidelines," + "how should my AR experience work," "how do I use Sign in with Apple," or asks + about any Apple framework or service integration. + Cross-references: hig-inputs for input methods, hig-components-system for widgets. +--- + +# Apple HIG: Technologies + +Check for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered. + +## Key Principles + +### General + +1. **Apple technologies extend app capabilities through system integration.** Each technology has established user-facing patterns; deviating creates confusion and erodes trust. + +2. **Privacy and user control are paramount.** Especially for health, payment, and identity technologies. Request only needed data, explain why, respect choices. + +### Siri and Voice + +3. **Natural, predictable, recoverable.** Clear conversational intent phrases that complete quickly and confirm results. Support App Shortcuts for proactive suggestions. Handle errors with clear fallbacks. + +### Payments and Commerce + +4. **Transparent and frictionless.** Standard Apple Pay button styles. Never ask for card details when Apple Pay is available. Clearly describe what the user is buying, the price, and whether it's one-time or subscription. + +### Health and Fitness + +5. **Health data is deeply personal.** Explain the health benefit before requesting access. CareKit tasks should be encouraging. ResearchKit consent flows must be thorough, readable, and respect autonomy. + +### Smart Home + +6. **Simple and reliable.** Immediate response when controlling devices. Clear device state. Graceful handling of connectivity issues. + +### Augmented Reality + +7. **Genuine value, not gimmicks.** Use AR when spatial context improves understanding. Guide setup (surface, lighting, space). Provide clear exit back to standard interaction. + +### Machine Learning and Generative AI + +8. **Enhance without surprising.** Smart suggestions, image recognition, text prediction. Clearly attribute AI-generated content. Controls to edit, regenerate, or dismiss. Let users correct mistakes. + +### Identity and Authentication + +9. **Sign in with Apple as top option.** Standard button styles. Respect email hiding preference. ID Verifier: guided flows, don't store sensitive data beyond what verification requires. + +### Cloud and Data + +10. **Invisible and reliable sync.** Data appears on all devices without manual intervention. Handle conflicts gracefully. Never lose data. + +### Shared Experiences + +11. **Real-time participation.** SharePlay: support multiple participants, show presence, handle latency. AirPlay: appropriate Now Playing metadata. + +### Automotive + +12. **Driver safety first.** Minimize interaction complexity, large touch targets, no distracting content. Only permitted app types: audio, messaging, EV charging, navigation, parking, quick food ordering. + +### Accessibility + +13. **Baseline requirement.** Every element has a meaningful VoiceOver label, trait, and action. Support Dynamic Type, Switch Control, and other assistive technologies. Test entirely with VoiceOver enabled. + +## Reference Index + +| Reference | Topic | Key content | +|---|---|---| +| [siri.md](references/siri.md) | Siri | Intents, shortcuts, voice interaction, App Shortcuts | +| [apple-pay.md](references/apple-pay.md) | Apple Pay | Payment buttons, checkout flow, security | +| [tap-to-pay-on-iphone.md](references/tap-to-pay-on-iphone.md) | Tap to Pay | Merchant flows, contactless payment | +| [in-app-purchase.md](references/in-app-purchase.md) | In-app purchase | Subscriptions, one-time purchases, transparency | +| [healthkit.md](references/healthkit.md) | HealthKit | Health data access, privacy, permissions | +| [carekit.md](references/carekit.md) | CareKit | Care plans, tasks, health management | +| [researchkit.md](references/researchkit.md) | ResearchKit | Studies, informed consent, data collection | +| [homekit.md](references/homekit.md) | HomeKit | Smart home control, device state, scenes | +| [augmented-reality.md](references/augmented-reality.md) | ARKit | Spatial context, surface detection, setup | +| [machine-learning.md](references/machine-learning.md) | Core ML | Predictions, smart features, confidence handling | +| [generative-ai.md](references/generative-ai.md) | Generative AI | Attribution, editing, responsible AI, uncertainty | +| [icloud.md](references/icloud.md) | iCloud | CloudKit, cross-device sync, conflict resolution | +| [sign-in-with-apple.md](references/sign-in-with-apple.md) | Sign in with Apple | Authentication, privacy, button styles | +| [id-verifier.md](references/id-verifier.md) | ID Verifier | Identity verification, document scanning | +| [shareplay.md](references/shareplay.md) | SharePlay | Shared experiences, participant presence | +| [airplay.md](references/airplay.md) | AirPlay | Media streaming, Now Playing, wireless display | +| [carplay.md](references/carplay.md) | CarPlay | Driver safety, permitted app types, large targets | +| [game-center.md](references/game-center.md) | Game Center | Achievements, leaderboards, multiplayer | +| [voiceover.md](references/voiceover.md) | VoiceOver | Screen reader, labels, traits, accessibility | +| [wallet.md](references/wallet.md) | Wallet | Passes, tickets, loyalty cards | +| [nfc.md](references/nfc.md) | NFC | Tag reading, quick interactions, App Clips | +| [maps.md](references/maps.md) | Maps | Location display, annotations, directions | +| [mac-catalyst.md](references/mac-catalyst.md) | Mac Catalyst | iPad to Mac, menu bar, keyboard, pointer | +| [live-photos.md](references/live-photos.md) | Live Photos | Motion capture, playback, editing | +| [imessage-apps-and-stickers.md](references/imessage-apps-and-stickers.md) | iMessage apps | Messages extension, stickers, compact UI | +| [shazamkit.md](references/shazamkit.md) | ShazamKit | Audio recognition, music identification | +| [always-on.md](references/always-on.md) | Always-on display | Dimmed state, power efficiency, reduced updates | +| [photo-editing.md](references/photo-editing.md) | Photo editing | System photo editor, filters, adjustments | + +## Output Format + +1. **Implementation checklist** -- step-by-step requirements per Apple's guidelines. +2. **Required vs optional features** for approval. +3. **Privacy and permission requirements** -- data access, usage descriptions. +4. **User-facing flow** from permission prompt through task completion. +5. **Testing guidance** -- key scenarios including edge cases. + +## Questions to Ask + +1. Which Apple technology? +2. Core use case? +3. Which platforms? +4. API requirements and entitlements reviewed? +5. What data or permissions needed? + +## Related Skills + +- **hig-inputs** -- Input methods interacting with technologies (voice for Siri, Pencil for AR, gestures for Maps) +- **hig-components-system** -- Widgets, complications, Live Activities surfacing technology data +- **hig-components-status** -- Progress indicators for technology operations (sync, payment, AR loading) + +--- + +*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)* diff --git a/skills/hig-technologies/references/airplay.md b/skills/hig-technologies/references/airplay.md new file mode 100644 index 00000000..dd02b0f1 --- /dev/null +++ b/skills/hig-technologies/references/airplay.md @@ -0,0 +1,125 @@ +--- +title: "AirPlay | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/airplay + +# AirPlay + +AirPlay lets people stream media content wirelessly from iOS, iPadOS, macOS, and tvOS devices to Apple TV, HomePod, and TVs and speakers that support AirPlay. + +![A sketch of the AirPlay icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/593648369fde5b646fed363f6b420ccd/technologies-AirPlay-intro%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/airplay#Best-practices) + +**Prefer the system-provided media player.** The built-in media player offers a standard set of controls and supports features like chapter navigation, subtitles, closed captioning, and AirPlay streaming. It’s also easy to implement, provides a consistent and familiar playback experience across the system, and accommodates the needs of most media apps. Consider designing a custom video player only if the system-provided player doesn’t meet your app’s needs. For developer guidance, see [`AVPlayerViewController`](https://developer.apple.com/documentation/AVKit/AVPlayerViewController). + +![A screenshot of the system-provided media player paused while playing a video.](https://docs-assets.developer.apple.com/published/f6ea036a0e6db3780504adc3c8afece4/airplay-video-screen%402x.png) + +**Provide content in the highest possible resolution.** Your [HTTP Live Streaming](https://developer.apple.com/documentation/http-live-streaming) (HLS) playlist needs to include the full range of available resolutions so that people can experience your content in the resolution that’s appropriate for the device they’re using (AVFoundation automatically selects the resolution based on the device). If you don’t include a range of resolutions, your content looks low quality when people stream it to a device that can play at higher resolutions. For example, content that looks great on iPhone at 720p will look low quality when people use AirPlay to stream it to a 4K TV. + +**Stream only the content people expect.** Avoid streaming content like background loops and short video experiences that make sense only within the context of the app itself. For developer guidance, see [`usesExternalPlaybackWhileExternalScreenIsActive`](https://developer.apple.com/documentation/AVFoundation/AVPlayer/usesExternalPlaybackWhileExternalScreenIsActive). + +**Support both AirPlay streaming and mirroring.** Supporting both features gives people the most flexibility. + +**Support remote control events.** When you do, people can choose actions like play, pause, and fast forward on the lock screen, and through interaction with Siri or HomePod. For developer guidance, see [Remote command center events](https://developer.apple.com/documentation/MediaPlayer/remote-command-center-events). + +**Don’t stop playback when your app enters the background or when the device locks.** For example, people expect the TV show they started streaming from your app to continue while they check their mail or put their device to sleep. In this type of scenario, it’s also crucial to avoid automatic mirroring because people don’t want to stream other content on their device without explicitly choosing to do so. + +**Don’t interrupt another app’s playback unless your app is starting to play immersive content.** For example, if your app plays a video when it launches or auto-plays inline videos, play this content on only the local device, while allowing current playback to continue. For developer guidance, see [`ambient`](https://developer.apple.com/documentation/AVFAudio/AVAudioSession/Category-swift.struct/ambient). + +**Let people use other parts of your app during playback.** When AirPlay is active, your app needs to remain functional. If people navigate away from the playback screen, make sure other in-app videos don’t begin playing and interrupt the streaming content. + +**If necessary, provide a custom interface for controlling media playback.** If you can’t use the system-provided media player, you can create a custom media player that gives people an intuitive way to enter AirPlay. If you need to do this, be sure to provide custom buttons that match the appearance and behavior of the system-provided ones, including distinct visual states that indicate when playback starts, is occurring, or is unavailable. Use only Apple-provided symbols in custom controls that initiate AirPlay, and position the AirPlay icon correctly in your custom player — that is, in the lower-right corner (in iOS 16 and iPadOS 16 and later). + +## [Using AirPlay icons](https://developer.apple.com/design/human-interface-guidelines/airplay#Using-AirPlay-icons) + +You can download AirPlay icons in [Resources](https://developer.apple.com/design/resources/). You have the following options for displaying the AirPlay icon in your app. + +### [Black AirPlay icon](https://developer.apple.com/design/human-interface-guidelines/airplay#Black-AirPlay-icon) + +Use the black AirPlay icon on white or light backgrounds when other technology icons also appear in black. + +![Two black AirPlay icons. The left one is the audio AirPlay icon, represented by a triangle below three concentric lines. The right one is the video AirPlay icon, represented by a triangle below a rounded rectangle.](https://docs-assets.developer.apple.com/published/86e9b97be338e8f54764489242441e37/airplay-black-icon-set%402x.png) + +### [White AirPlay icon](https://developer.apple.com/design/human-interface-guidelines/airplay#White-AirPlay-icon) + +Use the white AirPlay icon on black or dark backgrounds when other technology icons also appear in white. + +![Two white AirPlay icons. The left one is the audio AirPlay icon, represented by a triangle below three concentric lines. The right one is the video AirPlay icon, represented by a triangle below a rounded rectangle.](https://docs-assets.developer.apple.com/published/62baec25a6d8215e9f28971b08bf18b3/airplay-white-icon-set%402x.png) + +### [Custom color AirPlay icon](https://developer.apple.com/design/human-interface-guidelines/airplay#Custom-color-AirPlay-icon) + +Use a custom color when other technology icons also appear in the same color. + +![Two blue AirPlay icons. The left one is the audio AirPlay icon, represented by a triangle below three concentric lines. The right one is the video AirPlay icon, represented by a triangle below a rounded rectangle.](https://docs-assets.developer.apple.com/published/91abb9f30406a70ef7f08541fd4e191b/airplay-custom-color-icon-set%402x.png) + +**Position the AirPlay icon consistently with other technology icons.** If you display other technology icons within shapes, you can display the AirPlay icon in the same manner. + +**Don’t use the AirPlay icon or name in custom buttons or interactive elements.** Use the icon and the name _AirPlay_ only in noninteractive ways. + +**Pair the icon with the name _AirPlay_ correctly.** You can show the name below or beside the icon if you also reference other technologies in this way. Use the same font you use in the rest of your layout. Avoid using the AirPlay icon within text or as a replacement for the name _AirPlay_. + +**Emphasize your app over AirPlay.** Make references to AirPlay less prominent than your app name or main identity. + +## [Referring to AirPlay](https://developer.apple.com/design/human-interface-guidelines/airplay#Referring-to-AirPlay) + +**Use correct capitalization when using the term _AirPlay_.** _AirPlay_ is one word, with an uppercase _A_ and uppercase _P_ , each followed by lowercase letters. If your layout displays only all-uppercase designations, you can typeset _AirPlay_ in all uppercase to match the style of the rest of the layout. + +**Always use _AirPlay_ as a noun.** + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Use AirPlay to listen on your speaker +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| AirPlay to your speaker +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| You can AirPlay with [App Name] + +**Use terms like _works with_ , _use_ , _supports_ , and _compatible_.** + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| [App Name] is compatible with AirPlay +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| AirPlay-enabled speaker +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| You can use AirPlay with [App Name] +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| [App Name] has AirPlay + +**Use the name _Apple_ with the name _AirPlay_ if desired.** + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Compatible with Apple AirPlay + +**Refer to AirPlay if appropriate and to add clarity.** If your content is specific to AirPlay, you can use Airplay to make that clear. You can also refer to AirPlay in technical specifications. + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| [App Name] now supports AirPlay + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/airplay#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or visionOS. Not supported in watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/airplay#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/airplay#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/) + +[Apple Trademark List](https://www.apple.com/legal/intellectual-property/trademark/appletmlist.html) + +[Guidelines for Using Apple Trademarks and Copyrights](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/airplay#Developer-documentation) + +[AVFoundation](https://developer.apple.com/documentation/AVFoundation) + +[AVKit](https://developer.apple.com/documentation/AVKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/airplay#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/8FCAD355-E1A3-4407-9261-95A3D6026DE8/2661_wide_250x141_1x.jpg) Reaching the Big Screen with AirPlay 2 ](https://developer.apple.com/videos/play/wwdc2019/501) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/airplay#Change-log) + +Date| Changes +---|--- +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/always-on.md b/skills/hig-technologies/references/always-on.md new file mode 100644 index 00000000..b24ca652 --- /dev/null +++ b/skills/hig-technologies/references/always-on.md @@ -0,0 +1,62 @@ +--- +title: "Always On | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/always-on + +# Always On + +On devices that include the Always On display, the system can continue to display an app’s interface when people suspend their interactions with the device. + +![A sketch of an Apple Watch containing a person running, suggesting an Always On display. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b4927d8e754728228fdf9997f28acc35/technologies-always-on-intro%402x.png) + +In the Always On state, a device can continue to give people useful, glanceable information in a low-power, privacy-preserving way by dimming the display and minimizing onscreen motion. The system can display different items depending on the device. + + * On iPhone 14 Pro and iPhone 14 Pro Max, the system displays Lock Screen items like [Widgets](https://developer.apple.com/design/human-interface-guidelines/widgets) and [Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities) when people set aside their device face up and stop interacting with it. + + * When people drop their wrist while wearing Apple Watch, the system dims the watch face, continuing to display the interface of the app as long as it’s either frontmost or running a background session. + + + + +On both devices, the system displays notifications while in Always On, and people can tap the display to exit Always On and resume interactions. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/always-on#Best-practices) + +**Hide sensitive information.** It’s crucial to redact personal information that people wouldn’t want casual observers to view, like bank balances or health data. You also need to hide personal information that might be visible in a notification; for guidance, see [Notifications](https://developer.apple.com/design/human-interface-guidelines/notifications). + +**Keep other types of personal information glanceable when it makes sense.** On Apple Watch, for example, people typically appreciate getting pace and heart rate updates while they’re working out; on iPhone, people appreciate getting a glanceable update on a flight arrival or a notification when a ride-sharing service arrives. If people don’t want any information to be visible, they can turn off Always On. + +**Keep important content legible and dim nonessential content.** You can increase dimming on secondary text, images, and color fills to give more prominence to the information that’s important to people. For example, a to-do list app might remove row backgrounds and dim each item’s additional details to highlight its title. Also, if you display rich images or large areas of color, consider removing the images and using dimmed colors. + +**Maintain a consistent layout.** Avoid making distracting interface changes when Always On begins or ends and throughout the Always On experience. For example, when Always On begins, prefer transitioning an interactive component to an unavailable appearance — don’t just remove it. Within the Always On context, aim to make infrequent, subtle updates to the interface. For example, a sports app might pause granular play-by-play updates while in Always On, only updating the score when it changes. Note that unnecessary changes during Always On can be especially distracting on iPhone, because people often put their device face up on a surface, making motion on the screen visible even when they’re not looking directly at it. + +**Gracefully transition motion to a resting state; don’t stop it instantly.** Smoothly finishing the current motion helps communicate the transition and avoids making people think that something went wrong. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/always-on#Platform-considerations) + + _No additional considerations for iOS or watchOS. Not supported in iPadOS, macOS, tvOS, or visionOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/always-on#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/always-on#Related) + +[Designing for watchOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/always-on#Developer-documentation) + +[Designing your app for the Always On state](https://developer.apple.com/documentation/watchOS-Apps/designing-your-app-for-the-always-on-state) — watchOS apps + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/always-on#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/8D3FA0CE-F9A3-4CD8-82D2-375A2BA54AF1/4843_wide_250x141_1x.jpg) What's new in watchOS 8 ](https://developer.apple.com/videos/play/wwdc2021/10002) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/30D3C2CB-B24D-467A-9B20-A369641E966F/4850_wide_250x141_1x.jpg) Build a workout app for Apple Watch ](https://developer.apple.com/videos/play/wwdc2021/10009) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/934A2652-91C0-41AD-A35E-BC4E2ABC6F71/4884_wide_250x141_1x.jpg) What's new in SwiftUI ](https://developer.apple.com/videos/play/wwdc2021/10018) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/always-on#Change-log) + +Date| Changes +---|--- +September 12, 2023| Updated intro image artwork. +September 23, 2022| Expanded guidance to cover the Always On display on iPhone 14 Pro and iPhone 14 Pro Max. + diff --git a/skills/hig-technologies/references/apple-pay.md b/skills/hig-technologies/references/apple-pay.md new file mode 100644 index 00000000..a5ea65ec --- /dev/null +++ b/skills/hig-technologies/references/apple-pay.md @@ -0,0 +1,441 @@ +--- +title: "Apple Pay | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/apple-pay + +# Apple Pay + +Apple Pay is a secure, easy way to make payments for physical goods and services — as well as donations and subscriptions — in apps running on iPhone, iPad, Mac, Apple Vision Pro, Apple Watch, on websites, and on any browser. + +![A sketch of a dollar sign, suggesting Apple Pay. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/4ae8b2e3b4d91aa604d2836031526f06/technologies-Apple-Pay-intro%402x.png) + +People authorize payments and provide shipping and contact information, using credentials that are securely stored on the device. + +Tip + +It’s important to understand the difference between Apple Pay and [In-app purchase](https://developer.apple.com/design/human-interface-guidelines/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. + +Apps and websites that accept Apple Pay display it as an available payment option, and include an Apple Pay button in the purchasing flow that people tap to bring up a payment sheet. During checkout, the payment sheet can show the credit or debit card linked to Apple Pay, purchase amount (including tax and fees), shipping options, and contact information. People make any necessary adjustments and then authorize payment and complete the purchase. For developer guidance, see [Apple Pay](https://developer.apple.com/documentation/PassKit/apple-pay). + +All websites that offer Apple Pay must include a privacy statement and adhere to the [Acceptable use guidelines for Apple Pay on the web](https://developer.apple.com/apple-pay/acceptable-use-guidelines-for-websites/). For developer guidance, see [Apple Pay on the Web](https://developer.apple.com/documentation/ApplePayontheWeb). For a hands-on demo of Apple Pay on the web, see [Apple Pay on the web interactive demo](https://applepaydemo.apple.com). + +![A screenshot of a payment sheet that displays details about a purchase, including bank information, shipping address, and the total amount.](https://docs-assets.developer.apple.com/published/5d04903da870750a01127a7674d93e3c/apple-pay-sheet%402x.png) + +The device performs payment authentication in most cases where the device supports Face ID, Touch ID, or Optic ID. In some cases, the system transfers payment authentication to a nearby iPhone, iPad, or Apple Watch via a secure Bluetooth connection or a scannable code. + +![An illustration of a MacBook Pro on the left and an iPhone on the right. The MacBook Pro displays a Safari window that shows an online store with Apple Pay buttons for checking out and adding to a bag. The iPhone displays an Apple Pay payment sheet.](https://docs-assets.developer.apple.com/published/dd757533a7c6981c4932724381e10ad2/apple-pay-hero%402x.png) + +## [Offering Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Offering-Apple-Pay) + +**Offer Apple Pay on all devices and browsers that support it.** If the device doesn’t support Apple Pay, don’t present Apple Pay as a payment option. Use Apple Pay APIs to evaluate when a device can support Apple Pay. For developer guidance, see [`PKPaymentAuthorizationController`](https://developer.apple.com/documentation/PassKit/PKPaymentAuthorizationController) (iOS, watchOS) and [`canMakePayments`](https://developer.apple.com/documentation/ApplePayontheWeb/ApplePaySession/canMakePayments) (web). + +**If you use Apple Pay APIs to find out whether someone has an active card in Wallet, you must make Apple Pay the primary — but not necessarily sole — payment option everywhere you use the APIs.** For example, you might pre-select Apple Pay as the payment option when you display it alongside other options. For developer guidance, see [Offering Apple Pay in Your App](https://developer.apple.com/documentation/PassKit/offering-apple-pay-in-your-app) (iOS, watchOS) and [Checking for Apple Pay availability](https://developer.apple.com/documentation/ApplePayontheWeb/checking-for-apple-pay-availability) (web). + +**If you also offer other payment methods, offer Apple Pay at the same time.** Feature Apple Pay at least as prominently as the other options on every page or screen that offers or accepts payment methods. + +**If you use an Apple Pay button to start the Apple Pay payment process, you must use the Apple-provided API to display it.** Unlike a button graphic, the buttons produced by the API always have the correct appearance and are localized automatically. + +**If you use a custom button to start the Apple Pay payment process, make sure your custom button doesn’t display “Apple Pay” or the Apple Pay logo.** In this scenario, you must let people know that you accept Apple Pay by displaying the Apple Pay mark or referencing Apple Pay in text on the same page that displays your payment button. + +![An illustration that shows the correct arrangement of the Apple Pay logo above a custom button titled 'Order Now'.](https://docs-assets.developer.apple.com/published/b19a9822ebe73af2ed72bfbdd28ea560/custom-button-yes%402x.png) + +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration that shows the incorrect arrangement of the Apple Pay logo above a custom button titled 'Apple Pay'.](https://docs-assets.developer.apple.com/published/5e2e1ab926f9963755c0547a3621b125/custom-button-no%402x.png) + +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Use Apple Pay buttons only to start the Apple Pay payment process and, when appropriate, the Apple Pay set-up process.** When people choose an Apple Pay button to make a purchase, but their device doesn’t have Apple Pay set up, they’re given the opportunity to set up Apple Pay. Don’t use Apple Pay buttons in any other ways. + +**Don’t hide an Apple Pay button or make it appear unavailable.** If an Apple Pay button can’t be used yet, such as when a product size or color hasn’t been selected, gracefully point out the problem after someone taps or clicks the button. + +**Use the Apple Pay mark only to communicate that Apple Pay is accepted.** The Apple Pay mark doesn’t facilitate payment. Never use it as a payment button or position it as a button. When using the Apple Pay mark to indicate Apple Pay as the selected payment method, you can create a separate custom button conforming to your app’s design to initiate the Apple Pay payment. + +**Inform search engines that Apple Pay is accepted on your website.** If your website uses semantic markup to provide product details to search engines, list Apple Pay as a payment option. + +For app developer guidance, see [Apple Pay](https://developer.apple.com/documentation/PassKit/apple-pay). For website developer guidance, including how to determine whether Apple Pay on the web is available, see [Apple Pay on the Web](https://developer.apple.com/documentation/ApplePayontheWeb). + +## [Streamlining checkout](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Streamlining-checkout) + +**Provide a cohesive checkout experience.** It’s best when the entire checkout flow feels tightly integrated with your app or website. To strengthen people’s perception of integration, use your branding throughout the checkout experience and avoid opening different pages or windows. For website checkout flows in particular, opening new windows during the process can cause confusion and may even lead people to think they’ve been handed off to a different website. + +**If Apple Pay is available, assume the person wants to use it.** Consider presenting the Apple Pay button as the first payment option, displaying it larger than other options, or using a line to visually separate it from other choices. + +**Accelerate single-item purchases with Apple Pay buttons on product detail pages.** In addition to offering a shopping cart, consider putting Apple Pay buttons on product detail pages so people can purchase an individual item quickly. Purchases initiated in this way need to be for an individual item only, excluding any items that already reside in the shopping cart. If the shopping cart contains an item purchased directly from a product detail page, remove the item from the cart after the purchase is complete. + +**Accelerate multi-item purchases with express checkout.** Consider providing an express checkout feature that immediately displays the payment sheet, allowing people to purchase multiple items quickly using a single shipping method and destination. If you offer a coupon or promotional code, you can enhance the express checkout experience by letting people enter it on the payment sheet. + +**Collect necessary information, like color and size options, before people reach the Apple Pay button.** When additional information is needed at checkout time — perhaps because the customer forgot to choose an option — gracefully point out the problem and help them correct it. Use highlighting or warning text to identify missing information, and automatically navigate to the problematic field so people can correct it quickly and complete their purchase. + +**Collect optional information before checkout begins.** There’s no way to input optional data — like gift messages or delivery instructions — on the payment sheet, so collect this information ahead of time or even after the purchase is complete. + +**Gather multiple shipping methods and destinations before showing the payment sheet.** The payment sheet lets people select a single shipping method and destination for an entire order. If your customers can choose different shipping methods and destinations for individual items in an order, collect those details before Apple Pay checkout begins, instead of on the payment sheet. + +**For in-store pickup, help people choose a pickup location before displaying the payment sheet.** After a customer chooses the pickup location they want, use the read-only format to display the location’s address on the payment sheet. For developer guidance, see [Displaying a Read-Only Pickup Address](https://developer.apple.com/documentation/PassKit/displaying-a-read-only-pickup-address). + +**Prefer information from Apple Pay.** Assume that Apple Pay information is complete and up to date. Even if your app or website has existing contact, shipping, and payment information, consider fetching the latest from Apple Pay during checkout to reduce potential corrections. + +**Avoid requiring account creation prior to purchase.** If you want people to register for an account, ask them to do so on the order confirmation page. Prepopulate as many registration fields as possible using information provided by the payment sheet during checkout. + +![An illustration of an order confirmation screen on iPhone. The screen contains a button for creating an account and a button for signing up with Apple Pay.](https://docs-assets.developer.apple.com/published/0c5bcc6893b93e48a9d28c2c91dadb3b/payment-sheet-before-account%402x.png) + +**Report the result of the transaction so that people can view it in the payment sheet.** In failure cases, the payment sheet can display the errors that you provide, so people can take steps to fix the problem. + +**Display an order confirmation or thank-you page.** After the payment sheet shows the result of the transaction, display an order confirmation page to thank people for their purchase, provide details about when the order will ship, and indicate how to check its status. Listing Apple Pay on the confirmation page isn’t necessary, but if you do, show it after the last four digits of the account used to process the transaction or as a separate note. For example, ”1234 (Apple Pay)” or ”Paid with Apple Pay.” + +### [Customizing the payment sheet](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Customizing-the-payment-sheet) + +**Only present and request essential information.** People may get confused or have privacy concerns if the payment sheet includes extraneous information. For example, it makes sense to see a contact email address but not a shipping address if the purchase is a gift card that will be delivered electronically. Showing or asking for a shipping address in this scenario may give the false impression that something will be physically delivered. + +**Display the active coupon or promotional code, or give people a way to enter it.** For example, if people can enter a code before the payment sheet appears, displaying it on the sheet can reassure them that the code works as they expect. Alternatively, allowing code entry on the payment sheet can be particularly beneficial in an express checkout flow. + +**Let people choose the shipping method in the payment sheet.** To the extent space permits, show a clear description, a cost, and, optionally, an estimated delivery or pickup date — or range of dates — for each available option. In iOS 15 and later, you can take advantage of the shipping method’s calendar and time-zone support to provide accurate delivery or pickup information, regardless of the customer’s current location. For developer guidance, see [`PKDateComponentsRange`](https://developer.apple.com/documentation/PassKit/PKDateComponentsRange). + +**For in-store pickup, consider letting people choose a pickup window that works for them.** You can use the shipping method to supply a range of dates and times from which people can choose. + +**Use line items to explain additional charges, discounts, pending costs, add-on donations, recurring, and future payments.** A line item includes a label and cost; a line item for a recurring payment can also include a frequency. Don’t use line items to show an itemized list of products that make up the purchase. For developer guidance, see [`paymentSummaryItems`](https://developer.apple.com/documentation/PassKit/PKPaymentRequest/paymentSummaryItems); for guidance on donations, see [Supporting donations](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-donations). + + * iOS + * Web + + + +![A screenshot of an in-app payment sheet that includes an additional charge for gift wrap and a credit applied for a coupon.](https://docs-assets.developer.apple.com/published/b3d9d7f7a3968b37723a73f7332a3ec8/payment-sheet-ios%402x.png) + +![A screenshot of a webpage payment sheet that includes an additional charge for gift wrap and a credit applied for a coupon.](https://docs-assets.developer.apple.com/published/ff1b8604f18eb85fb8b6cf4662399b5b/payment-sheet-web%402x.png) + +**Keep line items short.** Make line items specific and easily understandable at a glance. Whenever possible, fit line items on a single line. + +**Provide a business name after the word _Pay_ on the same line as the total.** Use the same business name people will see when they look for the charge on their bank or credit card statement. This provides reassurance that payment is going to the right place. For example, Pay [_Business_Name_]. + +**If you’re not the end merchant, specify both your business name and the end merchant’s name in the payment sheet.** There are a few ways your app, App Clip, or website might help people make a purchase from an end merchant that’s unrelated to your company. For example, a marketplace app can help people make a purchase from an end merchant they might not recognize. Another example is an app that offers a self-checkout service people can use to pay for an item in an end merchant’s physical store without visiting the store’s checkout counter. In scenarios like these, people might not realize two businesses are involved in the transaction, so it’s essential to name both businesses and clarify their roles. When your app acts as an intermediary for an end merchant, clearly and succinctly describe the situation in the Pay line of the payment sheet, using something like Pay [_End_Merchant_Business_Name_ (via _Your_Business_Name_)]. + +**Clearly disclose when additional costs may be incurred after payment authorization.** In some cases, the total cost may be unknown at checkout time. For example, the price of a car ride based on distance or time might change after checkout. Or, a customer might want to add a tip after a product is delivered. In situations like these, and when local regulations allow, you can provide a clear explanation in the payment sheet and a subtotal marked as Amount Pending. If you’re preauthorizing a specific amount, be sure the payment sheet accurately reflects this information. + +**Handle data entry and payment errors gracefully.** If an error occurs during checkout, help people resolve it quickly so they can complete their transaction. For related guidance, see [Data validation](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Data-validation). + +### [Displaying a website icon](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Displaying-a-website-icon) + +Many websites provide an icon that can display with bookmarks, in URL fields, or on a device’s Home screen. Websites that support Apple Pay can display this icon in a summary view and in the payment sheet of the connected device that’s used to authorize payment. The icon provides visual reassurance that payment is going to the right place. + +If your website supports Apple Pay, provide an icon in the following sizes for use in the summary view and the payment sheet: + +@2x| @3x +---|--- +60x60 pt (120x120 px @2x)| 60x60 pt (180x180 px @3x) + +![An illustration of an Apple Pay payment sheet on iPhone, which shows a website icon above the payment details.](https://docs-assets.developer.apple.com/published/69ae379313b720a151bf5eda6edc712f/web-icon-payment%402x.png) + +## [Handling errors](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Handling-errors) + +Provide clear, actionable guidance when problems occur during checkout or payment processing, so people can resolve problems quickly and complete their transaction. + +### [Data validation](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Data-validation) + +Your app or website can respond to user input when the payment sheet appears, when people change certain field values on the payment sheet, and after they authenticate the transaction. Use these opportunities to check for data entry problems and to provide clear and consistent messaging. + + * iOS + * Web + + + +![A screenshot of an in-app Apple Pay payment sheet on iPhone that shows an error with the shipping address.](https://docs-assets.developer.apple.com/published/057eb557e82a7dc0d59ff9d65470088d/pay-sheet-error-ios%402x.png) + +Payment sheet error messaging + +![A screenshot of an in-app shipping screen on iPhone. The screen denotes the zip code doesn't match the city for the home address. Options exist to select or add a different shipping address.](https://docs-assets.developer.apple.com/published/6a42ac3ec83ff9f41a1f370368626d6a/detail-view-error-ios%402x.png) + +Custom detail view error messaging + +![A screenshot of a webpage Apple Pay payment sheet that shows an error with the shipping address.](https://docs-assets.developer.apple.com/published/0c3c7e0628e9de82ef6d42745b1f248c/pay-sheet-error-web%402x.png)Payment sheet error messaging + +![A screenshot of a webpage Apple Pay payment sheet that shows an error with the shipping address. An overlay appears over the payment sheet and denotes the zip code doesn't match the city for the home address. Options exist to select a different shipping address or edit the shipping address.](https://docs-assets.developer.apple.com/published/a45156f5412182c743a9c448effb3ba2/detail-view-error-web%402x.png)Custom detail view error messaging + +When data is invalid, system-provided error messaging calls attention to relevant fields on the payment sheet. People can choose a field to view additional details and resolve the problem. Provide customized error messages for the detail view that appears when people choose a problematic field. + +For developer guidance, see [`PKPaymentAuthorizationViewControllerDelegate`](https://developer.apple.com/documentation/PassKit/PKPaymentAuthorizationViewControllerDelegate) (iOS, watchOS) and [Apple Pay on the Web](https://developer.apple.com/documentation/ApplePayontheWeb) (web). + +Note + +For 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. + +**Avoid forcing compliance with your business logic.** Design a data validation process that’s intelligent enough to ignore irrelevant data and infer missing data whenever possible. For example, if your app requires a five-digit zip code but someone enters a Zip+4 code, ignore the additional digits rather than asking for a correction. Let people enter phone numbers in multiple formats — such as with and without dashes, and with and without a country code — without producing an error. + +**Provide accurate status reporting to the system.** When a problem occurs, it’s essential that your app or website accurately indicate the type of problem so the system can show the most relevant error message on the payment sheet. This is done by accompanying your custom error message with the correct status code. For developer guidance, see [`PKPaymentError`](https://developer.apple.com/documentation/PassKit/PKPaymentError) (iOS, watchOS) and [Apple Pay Status Codes](https://developer.apple.com/documentation/ApplePayontheWeb/apple-pay-status-codes) (web). + +**Succinctly and specifically describe the problem when data is invalid or incorrectly formatted.** Reference the relevant field and indicate exactly what’s expected. For example, if people enter an invalid zip code, instead of showing “Address is invalid,” show a specific message like “Zip code doesn’t match city.” If the shipping address is unserviceable, indicate why with a message like “Shipping not available for this state.” Use noun phrases with sentence-style capitalization and no ending punctuation. Aim to keep messages at 128 characters or fewer to avoid truncation. + +### [Payment processing](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Payment-processing) + +**Handle interruptions correctly.** A user-driven event like a cancellation or a system-driven event like a timeout could cause an interruption in the payment flow, resulting in the payment sheet being dismissed. When such an event occurs, you must cancel any in-progress payment. After the payment sheet dismisses, people can restart the process by choosing the Apple Pay button again. For developer guidance, see [`PKPaymentAuthorizationViewControllerDelegate`](https://developer.apple.com/documentation/PassKit/PKPaymentAuthorizationViewControllerDelegate) (iOS, watchOS) and [`oncancel`](https://developer.apple.com/documentation/ApplePayontheWeb/ApplePaySession/oncancel) (web). + +## [Supporting subscriptions](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) + +Your app or website can use Apple Pay to request authorization for recurring fees. A recurring fee can be a fixed amount, such as a monthly movie ticket subscription, or — when local regulations allow — a variable amount like a weekly grocery order. The initial authorization can also include discounts and additional fees. + + * iOS + * Web + + + +![A screenshot of an in-app Apple Pay payment sheet for a fixed subscription, which includes a monthly amount.](https://docs-assets.developer.apple.com/published/598121af8dc2f5d00ce80d355d6d2729/fixed-subscription-ios%402x.png) + +Fixed subscription + +![A screenshot of an in-app Apple Pay payment sheet for a variable subscription, which includes the text 'Amount Pending'.](https://docs-assets.developer.apple.com/published/a24e657401a34cab6c8ab0c1d03ef486/variable-subscription-ios%402x.png) + +Variable subscription (where local regulations allow) + +![A screenshot of a webpage Apple Pay payment sheet for a fixed subscription, which includes a monthly amount.](https://docs-assets.developer.apple.com/published/75a6f66060365e76b23843a88f224cf7/fixed-subscription-web%402x.png)Fixed subscription + +![A screenshot of a webpage Apple Pay payment sheet for a variable subscription, which includes the text 'Amount Pending'.](https://docs-assets.developer.apple.com/published/3634a4f2623354156da063d269487042/variable-subscription-web%402x.png)Variable subscription (where local regulations allow) + +**Clarify subscription details before showing the payment sheet.** Before asking people to authorize a recurring payment, make sure they fully understand the billing frequency and any other terms of service. You can reiterate the billing frequency on the payment sheet. + +**Include line items that reiterate billing frequency, discounts, and additional upfront fees.** Use these line items to remind people what they’re authorizing. If no payment is required at authorization time, clearly disclose when billing will occur. + + * iOS + * Web + + + +![A screenshot of an in-app Apple Pay payment sheet for a fixed subscription that doesn’t require payment until after the first month. The total shows a zero dollar amount.](https://docs-assets.developer.apple.com/published/8ed56d3b421d47c4a69fbcfc1bdfade1/no-payment-required-ios%402x.png) + +No payment required at authorization + +![A screenshot of a webpage Apple Pay payment sheet for a fixed subscription that doesn’t require payment until after the first month. The total shows a zero dollar amount.](https://docs-assets.developer.apple.com/published/f209fbe0a166cb02e54827dcb6632384/no-payment-required-web%402x.png)No payment required at authorization + +**Clarify the current payment amount in the total line.** Make sure people know the amount they’re being billed at the time of authorization. + +**Only show the payment sheet when a subscription change results in additional fees.** When the someone changes a subscription, authorization isn’t necessary if the cost decreases or remains the same. + +### [Supporting donations](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-donations) + +[Approved nonprofits](https://developer.apple.com/support/apple-pay-nonprofits/) can use Apple Pay to accept donations. + +**Use a line item to denote a donation.** Display a line item on the payment sheet that reminds people they’re authorizing a donation; for example, display Donation $50.00. + +**Streamline checkout by offering predefined donation amounts.** You can reduce steps in the donation process by offering one-step recommended donations, like $25, $50, $100. Be sure to include an Other Amount option too, so people can customize the donation if they prefer. + +## [Using Apple Pay buttons](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) + +The system provides several Apple Pay button types and styles you can use in your app or website. In contrast to the Apple Pay buttons, you use the [Apple Pay mark](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Apple-Pay-mark) to communicate the availability of Apple Pay as a payment option. + +Don’t create your own Apple Pay button design or attempt to mimic the system-provided button designs. + +For developer guidance, see [`PKPaymentButtonType`](https://developer.apple.com/documentation/PassKit/PKPaymentButtonType) and [`PKPaymentButtonStyle`](https://developer.apple.com/documentation/PassKit/PKPaymentButtonStyle) (iOS and macOS), [`WKInterfacePaymentButton`](https://developer.apple.com/documentation/WatchKit/WKInterfacePaymentButton) (watchOS), and [Apple Pay on the Web](https://developer.apple.com/documentation/ApplePayontheWeb) (web). + +### [Button types](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Button-types) + +Apple provides several types of buttons so you can choose the button type that fits best with the terminology and flow of your purchase or payment experience. + +Use the Apple-provided APIs to create Apple Pay buttons. When you use the system-provided APIs, you get: + + * A button that is guaranteed to use an Apple-approved caption, font, color, and style + + * Assurance that the button’s contents maintain ideal proportions as you change its size + + * Automatic translation of the button’s caption into the language that’s set for the device + + * Support for configuring the button’s corner radius to match the style of your UI + + * A system-provided alternative text label that lets VoiceOver describe the button + + + + +Payment button type| Example usage +---|--- +![Buy with Apple Pay button](https://docs-assets.developer.apple.com/published/c63bb3158d4973c31f4f2e76adee2d68/button-buy-with%402x.png)| An area in an app or website where people can make a purchase, such as a product detail page or shopping cart page. +![Pay with Apple Pay button](https://docs-assets.developer.apple.com/published/d1dc839a6cd292c468d42c4f7fa20fc8/button-pay-with%402x.png)| An app or website that lets people pay bills or invoices, such as those for a utility — like cable or electricity — or a service like plumbing or car repair. +![Check out with Apple Pay button](https://docs-assets.developer.apple.com/published/938ad772f7ba7140ee7c7b032337f8c4/button-check-out-with%402x.png)| An app or website offering a shopping cart or purchase experience that includes other payment buttons that start with the text _Check out_. +![Continue with Apple Pay button](https://docs-assets.developer.apple.com/published/83f8c34a93a972f8cedf64cac44cdad3/button-continue-with%402x.png)| An app or website offering a shopping cart or purchase experience that includes other payment buttons that start with the text _Continue with_. +![Book with Apple Pay button](https://docs-assets.developer.apple.com/published/c5ceac3ac7e040e6106f95fa72286231/button-book-with%402x.png)| An app or website that helps people book flights, trips, or other experiences. +![Donate with Apple Pay button](https://docs-assets.developer.apple.com/published/36b4b86965004357d73697f65a56c741/button-donate-with%402x.png)| An app or website for an [approved nonprofit](https://developer.apple.com/support/apple-pay-nonprofits/) that lets people make donations. +![Subscribe with Apple Pay button](https://docs-assets.developer.apple.com/published/f26578120fff5b938b6894963a947cc8/button-subscribe-with%402x.png)| An app or website that lets people purchase a subscription, such as a gym membership or a meal-kit delivery service. +![Reload with Apple Pay button](https://docs-assets.developer.apple.com/published/18ff812da6b0212e8d4b5c9644c2c7dc/button-reload-with%402x.png)| An app or website that uses the term _reload_ to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan. +![Add Money with Apple Pay button](https://docs-assets.developer.apple.com/published/0d5b936ea985c356fdb99f879224a0f3/button-add-money-with%402x.png)| An app or website that uses the term _add money_ to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan. +![Top Up with Apple Pay button](https://docs-assets.developer.apple.com/published/747433b17fdd5b2f6f8f0aa76acf4a11/button-top-up-with%402x.png)| An app or website that uses the term _top up_ to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan. +![Order with Apple Pay button](https://docs-assets.developer.apple.com/published/d7c48459937a938855d22653d7d04a2b/button-order-with%402x.png)| An app or website that lets people place orders for items like meals or flowers. +![Rent with Apple Pay button](https://docs-assets.developer.apple.com/published/30470f4c261461682b066b8d1f1c9079/button-rent-with%402x.png)| An app or website that lets people rent items like cars or scooters. +![Support with Apple Pay button](https://docs-assets.developer.apple.com/published/c597752d72d4df70bf18946f4c1d7007/button-support-with%402x.png)| An app or website that uses the term _support_ to help people give money to projects, causes, organizations, and other entities. +![Contribute with Apple Pay button](https://docs-assets.developer.apple.com/published/93488e8f05b54ba3b62aaeb891b70aa9/button-contribute-with%402x.png)| An app or website that uses the term _contribute_ to help people give money to projects, causes, organizations, and other entities. +![Tip with Apple Pay button](https://docs-assets.developer.apple.com/published/75b841bad8e7857633b61b7e96aa6660/button-tip-with%402x.png)| An app or website that lets people tip for goods or services. +![Apple Pay button](https://docs-assets.developer.apple.com/published/61bec328eef83e2a656d8f82768c219e/ap-button%402x.png)| An app or website that has stylistic reasons to use a button that can have a smaller minimum width or that doesn’t specify a call to action. If you choose a payment button type that isn’t supported on the version of the operating system your app or website is running in, the system may replace it with this button. + +When a device supports Apple Pay, but it hasn’t been set up yet, you can use the Set up Apple Pay button to show that Apple Pay is accepted and to give people an explicit opportunity to set it up. + +![Set up Apple Pay button](https://docs-assets.developer.apple.com/published/6cd4e0f51f10a280e70eb9cc2325d1d1/button-set-up%402x.png) + +You can display the Set up Apple Pay button on pages such as a Settings page, a user profile screen, or an interstitial page. Tapping the button in any of these locations needs to initiate the process of adding a card. + +### [Button styles](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Button-styles) + +You can use the _automatic_ style to let the current system appearance determine the appearance of the Apple Pay buttons in your app (for developer guidance, see [`PKPaymentButtonStyle.automatic`](https://developer.apple.com/documentation/PassKit/PKPaymentButtonStyle/automatic)). If you want to control the button appearance yourself, you can use one of the following options. For web developer guidance, see [`ApplePayButtonStyle`](https://developer.apple.com/documentation/ApplePayontheWeb/ApplePayButtonStyle). + +#### [Black](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Black) + +Use on white or light-color backgrounds that provide sufficient contrast. Don’t use on black or dark backgrounds. + +![An illustration showing the correct placement of a black Apple Pay button over a light background.](https://docs-assets.developer.apple.com/published/a43fe0ccf43a3a34f043949225b6c4d5/apple-pay-black-yes%402x.png) + +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration showing the incorrect placement of a black Apple Pay button over a dark background.](https://docs-assets.developer.apple.com/published/ef1773a19ca65487a65f75bb99496c40/apple-pay-black-no%402x.png) + +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +#### [White with outline](https://developer.apple.com/design/human-interface-guidelines/apple-pay#White-with-outline) + +Use on white or light-color backgrounds that don’t provide sufficient contrast. Don’t place on dark or saturated backgrounds. + +![An illustration showing the correct placement of a white, outlined Apple Pay button over a light background.](https://docs-assets.developer.apple.com/published/3ae557e25ef4b90277cd75d448fef392/apple-pay-outline-yes%402x.png) + +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration showing the incorrect placement of a white, outlined Apple Pay button over a dark background.](https://docs-assets.developer.apple.com/published/0f49f420cd2712bd8a285c56ce7dee2f/apple-pay-outline-no%402x.png) + +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +#### [White](https://developer.apple.com/design/human-interface-guidelines/apple-pay#White) + +Use on dark-color backgrounds that provide sufficient contrast. + +![An illustration showing the correct placement of a white Apple Pay button over a dark background.](https://docs-assets.developer.apple.com/published/8e5e6f393b1c53f2e6e3a778663d0236/apple-pay-white-yes%402x.png) + +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration showing the incorrect placement of a white Apple Pay button over a light background.](https://docs-assets.developer.apple.com/published/d0cf8a7d077fcc20e2cc86ebd5e8261e/apple-pay-white-no%402x.png) + +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +### [Button size and position](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Button-size-and-position) + +**Prominently display the Apple Pay button.** Make the Apple Pay button no smaller than other payment buttons, and avoid making people scroll to see it. + +![An illustration showing an Apple Pay button positioned correctly above a custom Add to Cart button. Both buttons are the same size.](https://docs-assets.developer.apple.com/published/b201eefa5937df07aa4fcff10cf3ac36/ap-same-size-correct%402x.png) + +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration showing an Apple Pay button positioned incorrectly at a smaller size above a larger custom Add to Cart button.](https://docs-assets.developer.apple.com/published/53a56e2127330516c38ffda8308e7f82/ap-smaller-incorrect%402x.png) + +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Position the Apple Pay button correctly in relation to an Add to Cart button.** In a side-by-side layout, place the Apple Pay button to the right of an Add to Cart button. + +![An illustration showing a Check Out with Apple Pay button correctly positioned to the right of a custom Add to Cart button.](https://docs-assets.developer.apple.com/published/3d08f86fef8bbf8ef8d0bb30e95911e0/ap-right-side-correct%402x.png) + +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration showing a Check Out with Apple Pay button incorrectly positioned to the left of a custom Add to Cart button.](https://docs-assets.developer.apple.com/published/f2b08052e5161c66959816ab2949e4b5/ap-left-side-incorrect%402x.png) + +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +In a stacked layout, place the Apple Pay button above an Add to Cart button. + +![An illustration of a Check Out with Apple Pay button correctly positioned above a custom Add to Cart button.](https://docs-assets.developer.apple.com/published/b201eefa5937df07aa4fcff10cf3ac36/ap-top-correct%402x.png) + +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a Check Out with Apple Pay button incorrectly positioned below a custom Add to Cart button.](https://docs-assets.developer.apple.com/published/2cd6a51f04852337fc16dacb58198851/ap-below-incorrect%402x.png) + +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Adjust the corner radius to match the appearance of other buttons.** By default, an Apple Pay button has rounded corners. You can change the corner radius to produce a button with square corners or a capsule-shape button. For developer guidance, see [`cornerRadius`](https://developer.apple.com/documentation/PassKit/PKPaymentButton/cornerRadius). + +![An illustration showing a Check Out with Apple Pay button above a custom Add to Cart button. Both buttons have 90-degree corners.](https://docs-assets.developer.apple.com/published/d910506f4d9d613db7d6c977fcba8fbd/minimum-corner-radii%402x.png)Minimum corner radius + +![An illustration showing a Check Out with Apple Pay button above a custom Add to Cart button. Both buttons have the default corner radius.](https://docs-assets.developer.apple.com/published/3788cd425c4fac8526a8888bc08bfedf/default-corner-radii%402x.png)Default corner radius + +![An illustration showing a Check Out with Apple Pay button above a custom Add to Cart button. Both buttons have the maximum corner radius, which results in a lozenge-like appearance.](https://docs-assets.developer.apple.com/published/bc7e5ae216657c5583c15aeeed5e5938/maximum-corner-radii%402x.png)Maximum corner radius + +**Maintain the minimum button size and margins around the button.** Be mindful that the button title may vary in length depending on the locale. + +Note + +If 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. + +![An illustration of an Apple Pay button, labeled to indicate minimum margins of one-tenth the button’s height, a 100-point minimum width, and a 30-point minimum height.](https://docs-assets.developer.apple.com/published/b87d2cdec70ad67f8b095e47d7585ef5/minimum-apple-pay%402x.png) + +![An illustration of a Donate with Apple Pay button, labeled to indicate minimum margins of one-tenth the button’s height, a 140-point minimum width, and a 30-point minimum height.](https://docs-assets.developer.apple.com/published/e7aede97d7f6acfd2f5b097ce5850168/minimum-apple-pay-donate%402x.png) + +Use the following values for guidance. + +Button| Minimum width| Minimum height| Minimum margins +---|---|---|--- +Apple Pay| 100pt (100px @1x, 200px @2x)| 30pt (30px @1x, 60px @2x)| 1/10 of the button’s height +Book with Apple Pay| 140pt (140px @1x, 280px @2x)| 30pt (30px @1x, 60px @2x)| 1/10 of the button’s height +Buy with Apple Pay +Check out with Apple Pay +Donate with Apple Pay +Set up Apple Pay +Subscribe with Apple Pay + +### [Apple Pay mark](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Apple-Pay-mark) + +Use the Apple Pay mark graphic to show that Apple Pay is an available payment option when showing other payment options in a similar manner. The Apple Pay mark isn’t a button; if you need an Apple Pay button, choose one of the buttons described in [Button types](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Button-types). For design guidance related to showing Apple Pay as a payment option, see [Offering Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Offering-Apple-Pay). + +![A row of four credit card logos, all of which are the same size and shape. The leftmost logo is the Apple Pay mark.](https://docs-assets.developer.apple.com/published/eb623bea0d2c8176ba590efef4493b9d/apple-pay-mark-with-payment-options%402x.png) + +**Use only the artwork provided by Apple, with no alterations other than height.** You can specify a height for the Apple Pay mark, but make sure that the height you use is equal to or larger than other payment brand marks in your payment flow. Don’t adjust the width, corner radius, or aspect ratio of the artwork; don’t add a trademark symbol or any other content; don’t remove the border; don’t add visual effects to the mark, such as shadows, glows, or reflections; and don’t flip, rotate, or animate the Apple Pay mark. + +**Maintain a minimum clear space around the mark of 1/10 of its height.** Don’t let the Apple Pay mark share its surrounding border with another graphic or button. + +Download the Apple Pay mark graphic and full usage guidelines [here](https://developer.apple.com/apple-pay/marketing/). + +## [Referring to Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Referring-to-Apple-Pay) + +As with all Apple product names, use Apple Pay exactly as shown in [Apple Trademark List](https://www.apple.com/legal/intellectual-property/trademark/appletmlist.html) — never make it plural or possessive — and adhere to [Guidelines for Using Apple Trademarks](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html). + +You can use plain text to promote Apple Pay and indicate that Apple Pay is a payment option. + +**Capitalize Apple Pay in text as it appears in the Apple Trademark list.** Use two words with an uppercase _A_ , an uppercase _P_ , and lowercase for all other letters. Display Apple Pay entirely in uppercase only when doing so is necessary for conforming to an established, typographic interface style, such as in an app that capitalizes all text. + +**Never use the Apple logo to represent the name _Apple_ in text.** In the United States, use the registered trademark symbol (®) the first time Apple Pay appears in body text. Don’t include a registered trademark symbol when Apple Pay appears as a selection option during checkout. + +| Example text +---|--- +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Purchase with Apple Pay +![Correct usage](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Purchase with Apple Pay® +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| Purchase with ApplePay +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| Purchase with  Pay +![Incorrect usage](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| Purchase with APPLE PAY + +**Coordinate the font face and size with your app.** Don’t mimic Apple typography. Instead, use text attributes that are consistent with the rest of your app or website. + +**Don’t translate _Apple Pay_ or any other Apple trademark.** Always use Apple trademarks in English, even when they appear within non-English text. + +**In a payment selection context, you can display a text-only description of Apple Pay only when all payment options have text-only descriptions.** If any other payment option description includes an icon or logo, you must use the Apple Pay mark as described in [Offering Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Offering-Apple-Pay). + +**When promoting your app’s use of Apple Pay, follow App Store guidelines.** Before promoting Apple Pay for your app, refer to the [App Store marketing guidelines](https://developer.apple.com/app-store/marketing/guidelines/). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, visionOS, or watchOS. Not supported in tvOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Related) + +[Apple Pay Marketing Guidelines](https://developer.apple.com/apple-pay/marketing/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Developer-documentation) + +[Apple Pay](https://developer.apple.com/documentation/PassKit/apple-pay) — PassKit + +[Apple Pay on the Web](https://developer.apple.com/documentation/ApplePayontheWeb) + +[`WKInterfacePaymentButton`](https://developer.apple.com/documentation/WatchKit/WKInterfacePaymentButton) — WatchKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/FC715972-F367-4C86-A291-5C0358E5E230/9873_wide_250x141_1x.jpg) What’s new in Apple Pay ](https://developer.apple.com/videos/play/wwdc2025/201) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Change-log) + +Date| Changes +---|--- +December 16, 2025| Clarified supported platforms, including web browsers and Apple Vision Pro. +June 10, 2024| Updated links to developer guidance for offering Apple Pay on the web. +September 12, 2023| Updated artwork. +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/augmented-reality.md b/skills/hig-technologies/references/augmented-reality.md new file mode 100644 index 00000000..b965c226 --- /dev/null +++ b/skills/hig-technologies/references/augmented-reality.md @@ -0,0 +1,247 @@ +--- +title: "Augmented reality | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/augmented-reality + +# Augmented reality + +Augmented reality (or AR) lets you deliver immersive, engaging experiences that seamlessly blend virtual objects with the real world. + +![A sketch of an AR icon, suggesting augmented reality. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/02ff28e8d3bace3009b72a074f90ae26/technologies-augmented-reality-intro%402x.png) + +Using the device’s camera to present the physical world onscreen live, your app can superimpose three-dimensional virtual objects, creating the illusion that these objects actually exist. Depending on the platform and the experiences your app offers, people can reorient the device to explore the objects from different angles, interact with objects using gestures and movement, and even join other people in multiuser AR experiences. For developer guidance, see [ARKit](https://developer.apple.com/documentation/ARKit). + +**Offer AR features only on capable devices.** If your app’s primary purpose is AR, make your app available only to devices that support ARKit. If your app includes features that require specific AR capabilities, or if AR features are optional in your app, don’t show people an error if they try to use these features on a device that doesn’t support them; instead, simply avoid offering the feature on an unsupported device. For developer guidance, see [Verifying Device Support and User Permission](https://developer.apple.com/documentation/ARKit/verifying-device-support-and-user-permission). + +Note + +The 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](https://developer.apple.com/documentation/ARKit). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Best-practices) + +**Let people use the entire display.** Devote as much of the screen as possible to displaying the physical world and your app’s virtual objects. Avoid cluttering the screen with controls and information that diminish the immersive experience. + +**Strive for convincing illusions when placing realistic objects.** Design detailed 3D assets with lifelike textures to create objects that appear to inhabit the physical environment in which you place them. Using information from ARKit, you can scale objects properly and position them on detected real-world surfaces, reflect environmental lighting conditions and simulate camera grain, cast top-down diffuse object shadows on real-world surfaces, and update visuals as the camera’s position changes. To help avoid breaking the illusion you create, make sure your app updates scenes 60 times per second so objects don’t appear to jump or flicker. + +**Consider how virtual objects with reflective surfaces show the environment.** Reflections in ARKit are approximations based on the environment captured by the camera. To help maintain the illusion that an AR experience is real, prefer small or coarse reflective surfaces that downplay the effect of these approximations. + +**Use audio and haptics to enhance the immersive experience.** A sound effect or bump sensation is a great way to confirm that a virtual object has made contact with a physical surface or other virtual object. Background music can also help envelop people in the virtual world. For guidance, see [Playing audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio) and [Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics). + +**Minimize text in the environment.** Display only the information that people need for your app experience. + +**If additional information or controls are necessary, consider displaying them in screen space.** Content in _screen space_ appears fixed to a consistent location either in the virtual world or, less commonly, on the device screen. It’s typically easy for people to find and view content in screen space because it remains stationary while the underlying AR environment moves with the device. + +**Consider using indirect controls when you need to provide persistent controls.** _Indirect controls_ are not part of the virtual environment — instead, they are 2D controls displayed in screen space. If people need access to persistent controls in your app, consider placing the controls so that people don’t have to adjust how they’re holding the device to reach them. Also, consider using translucency in an indirect control to help avoid blocking the underlying scene. For example, the Measure app uses screen space to display a mix of translucent and opaque controls that people use to measure objects in the real world. + +![A screenshot of the Measure app on iPhone showing a bunch of carrots. A line segment extends from one end of a carrot to the other end. The measurement is four and a half inches.](https://docs-assets.developer.apple.com/published/8a3faa907452d5fdb2771a64ffdcdb62/augmented-reality-measure-carrots%402x.png) + +**Anticipate that people will use your app in a wide variety of real-world environments.** People may open your app in a place where there isn’t much room to move around or there aren’t any large, flat surfaces. Clearly communicate your app’s requirements and expectations to people up front to help them understand how their physical environment can affect their AR experience. You might also consider offering different sets of features for use in different environments. + +**Be mindful of people’s comfort.** Holding a device at a certain distance or angle for a prolonged period can be fatiguing. To help avoid causing fatigue, consider placing objects at a distance that reduces the need to move the device closer to the object; in a game, consider keeping levels short and intermixed with brief periods of downtime. + +**If your app encourages people to move, introduce motion gradually.** For example, you might not want to make people dodge a virtual projectile as soon as they enter your AR game. Give people time to adapt to the AR experience in your app and then progressively encourage movement. + +**Be mindful of people’s safety.** When people are immersed in an AR experience, they’re not necessarily aware of their physical surroundings, so making rapid, sweeping, or expansive motions might be dangerous. Consider ways of making your app safe to operate; for example, a game could avoid encouraging large or sudden movements. + +## [Providing coaching](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Providing-coaching) + +Before people can enjoy an AR experience in your app, they need to move their device in ways that lets ARKit evaluate the surroundings and detect surfaces. Consider using the built-in coaching view to show people what to do and provide feedback during the initialization process. You can also use the coaching view to help people reinitialize AR — a process known as _relocalization_ — after an AR experience is interrupted by, for example, people switching briefly to a different app. For guidance on relocalization, see [Handling interruptions](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Handling-interruptions); for developer guidance, see [`ARCoachingOverlayView`](https://developer.apple.com/documentation/ARKit/ARCoachingOverlayView). + +![An illustration of an iPhone screen showing the corner of a room viewed through the camera. On the screen is a translucent overlay containing the surface-detection indicator. The indicator is a white square with rounded corners projected into the 3D space. A small iPhone is shown scanning back and forth along the base of the square. A circle of dots trailing the iPhone emphasizes the movement.](https://docs-assets.developer.apple.com/published/a8f541f789d28879cd0d2c9862cbdcba/augmented-reality-coaching-overlay%402x.png) + +**Hide unnecessary app UI while people are using a coaching view.** By default, the coaching view appears automatically when initialization or relocalization starts, so be prepared to hide unrelated UI to help people concentrate on the coaching view’s instructions. + +**If necessary, offer a custom coaching experience.** Although you can configure the system-provided coaching view to help people provide specific information — such as the detection of a horizontal or vertical plane — you might need additional information or want to use a different visual style. If you want to design a custom coaching experience, use the system-provided coaching view for reference. + +## [Helping people place objects](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Helping-people-place-objects) + +**Show people when to locate a surface and place an object.** You can use the system-provided coaching view to help people find a horizontal or vertical flat surface on which to place an object. After ARKit detects a surface, your app can display a custom visual indicator to show when object placement is possible. You can help people understand how the placed object will look in the environment by aligning your indicator with the plane of the detected surface. + +![An illustration of a complex visual placement indicator consisting of a circular shape with markers indicating a center and diameter, inside right-angle shapes framing a square. The indicator is shown in 3D perspective with the longest edge on the bottom.](https://docs-assets.developer.apple.com/published/b5533e905940a2c62239bc80b16dbc46/augmented-reality-app-specific-indicator%402x.png)App-specific indicator + +**When people place an object, immediately integrate that object into the AR environment.** Although surface detection quickly and progressively refines accuracy, it’s best to avoid waiting for more accurate data before placing an object. Use the information available to respond instantly when people place an object; then, when surface detection completes, subtly refine the object’s position if necessary. For example, if people place an object beyond the bounds of the detected surface, gently nudge the object back onto the surface. For developer guidance on refining an object’s position, see [`ARTrackedRaycast`](https://developer.apple.com/documentation/ARKit/ARTrackedRaycast). + +**Consider guiding people toward offscreen virtual objects.** Sometimes, it can be difficult for people to locate an object that’s positioned offscreen. When this is the case, you can help people find such objects by offering visual or audible cues. For example, if an object is offscreen to the left, you could display an indicator along the left edge of the screen that guides people to point the camera in that direction. + +**Avoid trying to precisely align objects with the edges of detected surfaces.** In AR, surface boundaries are approximations that may change as people’s surroundings are further analyzed. + +**Incorporate plane classification information to inform object placement.** For example, only let people place a virtual piece of furniture on a plane that’s classified as “floor,” or require a plane to be classified as “table” in order to place a virtual game board. + +## [Designing object interactions](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Designing-object-interactions) + +**Let people use direct manipulation to interact with objects when possible.** It’s more immersive and intuitive when people can interact with onscreen 3D objects by touching them directly, than by using indirect controls in screen space. However, in situations where people are moving around as they use your app, indirect controls can work better. + +![An illustration showing a cube and a hand with the index finger touching the cube. There's a curved line intersecting the finger and cube to indicate the movement of the finger to the right as it directly manipulates the object.](https://docs-assets.developer.apple.com/published/e68ef4f9413642524873ee66cd4bba4e/augmented-reality-user-interaction-direct%402x.png)Direct manipulation + +![An illustration showing a cube. Below the cube are two buttons, each with a circular arrow pointing in the opposite direction, offering indirect ways to rotate the cube.](https://docs-assets.developer.apple.com/published/dcd7ceea5314b22c0bb24dfe45008651/augmented-reality-user-interaction-indirect%402x.png)Indirect controls + +**Let people directly interact with virtual objects using standard, familiar gestures.** For example, consider supporting a single-finger drag gesture for moving objects, and a two-finger rotation gesture for spinning objects. For guidance, see [Gestures](https://developer.apple.com/design/human-interface-guidelines/gestures). + +**In general, keep interactions simple.** Touch gestures are inherently two-dimensional, but an AR experience involves the three dimensions of the real world. Consider the following approaches to simplifying people’s interactions with virtual objects. + +![An illustration showing a sphere. The base of the sphere is on a grid. Two lines that are parallel to the grid and perpendicular to each other pass through the center of the sphere. There's an arrow at the tip of each line, indicating movement direction across the two-dimensional surface of the grid.](https://docs-assets.developer.apple.com/published/d0ac02ed21a0af9534631b63c824b9d7/augmented-reality-plane-movement%402x.png)Limit movement to the two-dimensional surface on which the object rests. + +![An illustration showing a sphere. A dotted line runs vertically through the center of the sphere. An arrow wraps around the outside of the sphere and the vertical line, from left to right, indicating the ability to rotate the sphere around the line.](https://docs-assets.developer.apple.com/published/0c40f98719aee4f83f34e9255fac4f29/augmented-reality-axis-rotation%402x.png)Limit object rotation to a single axis. + +**Respond to gestures within reasonable proximity of interactive virtual objects.** It can be difficult for people to be precise when aiming to touch specific points on objects that are small, thin, or placed at a distance. When your app detects a gesture near an interactive object, it’s usually best to assume that people want to affect that object. + +**Let people initiate object scaling when it makes sense in your app.** For example, if your app lets people explore an imaginary environment, it probably makes sense to support object scaling because your app doesn’t need to represent the real world. On the other hand, if your app helps shoppers decide on furniture to buy, letting people scale a chair object doesn’t help them visualize how the chair will look in a room. + +Tip + +Regardless 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. + +**Be wary of potentially conflicting gestures.** A two-finger pinch gesture, for example, is similar to a two-finger rotation gesture. If you implement two similar gestures like this, be sure to test your app and make sure they’re interpreted properly. + +**Strive for virtual object movement that’s consistent with the physics of your app’s AR environment.** People don’t necessarily expect an object to move smoothly over a rough or uneven surface, but they do expect objects to remain visible during movement. Aim to keep moving objects attached to real-world surfaces and avoid causing objects to jump or vanish and reappear as people resize, rotate, or move them. + +**Explore even more engaging methods of interaction.** Gestures aren’t the only way for people to interact with virtual objects in AR. Your app can use other factors, like motion and proximity, to bring content to life. A game character, for example, could turn its head to look at a person as they walk toward it. + +## [Offering a multiuser experience](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Offering-a-multiuser-experience) + +When multiple people share your app’s AR experience, each participant maps the environment independently and ARKit automatically merges the maps. For developer guidance, see [`isCollaborationEnabled`](https://developer.apple.com/documentation/ARKit/ARWorldTrackingConfiguration/isCollaborationEnabled). + +**Consider allowing people occlusion.** If your app supports placing virtual objects behind people who appear in the device’s camera feed, enhance the illusion of reality by letting the people occlude the objects. For developer guidance, see [Occluding virtual content with people](https://developer.apple.com/documentation/ARKit/occluding-virtual-content-with-people). + +**When possible, let new participants enter a multiuser AR experience.** Unless your app requires all participants to join before the experience begins, consider using implicit map merging to let new people quickly join an ongoing AR experience. For developer guidance, see [`isCollaborationEnabled`](https://developer.apple.com/documentation/ARKit/ARWorldTrackingConfiguration/isCollaborationEnabled). + +## [Reacting to real-world objects](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Reacting-to-real-world-objects) + +You can enhance an AR experience by using known images and objects in the real-world environment to make virtual content appear. For example, an app that recognizes theater posters for a sci-fi film could cause virtual space ships to emerge from the posters and fly around the environment. Another example is an app for an art museum that presents a virtual tour guide when it recognizes a sculpture. To support experiences like these, your app provides a set of 2D reference images or 3D reference objects, and ARKit indicates when and where it detects any of these items in the current environment. For developer guidance, see [Detecting Images in an AR Experience](https://developer.apple.com/documentation/ARKit/detecting-images-in-an-ar-experience). + +**When a detected image first disappears, consider delaying the removal of virtual objects that are attached to it.** ARKit doesn’t track changes to the position or orientation of each detected image. To help prevent virtual objects from flickering, consider waiting up to one second before fading them out or removing them. + +**Limit the number of reference images in use at one time.** Image detection performance works best when ARKit looks for 100 or fewer distinct images in the real-world environment. If you need more than 100 reference images, you can change the set of active reference images based on context. For example, a museum guide app could ask permission to use location services to determine the part of the museum a person is in, and then look only for images displayed in that area. + +**Limit the number of reference images requiring an accurate position.** Updating the position of a reference image requires more resources. Use a tracked image when the image may move in the environment or when an attached animation or virtual object is small compared to the size of the image. + +## [Communicating with people](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Communicating-with-people) + +**If you must display instructional text, use approachable terminology.** AR is an advanced concept that may be intimidating to some people. To help make it approachable, avoid using technical terms like ARKit, world detection, and tracking. Instead, use friendly, conversational terms that most people will understand. + +Do| Don’t +---|--- +Unable to find a surface. Try moving to the side or repositioning your phone.| Unable to find a plane. Adjust tracking. +Tap a location to place the _[name of object to be placed]_.| Tap a plane to anchor an object. +Try turning on more lights and moving around.| Insufficient features. +Try moving your phone more slowly.| Excessive motion detected. + +**In a three-dimensional context, prefer 3D hints.** For example, placing a 3D rotation indicator around an object is more intuitive than displaying text-based instructions in a 2D overlay. Avoid displaying textual overlay hints in a 3D context unless people aren’t responding to contextual hints. + +![An illustration of a cube. The base of the cube is indicated with a grid, and the active side of the cube is outlined in blue. Arrows follow a continuous circle around the cube to the right, hinting that the cube can be rotated within the 3D context.](https://docs-assets.developer.apple.com/published/43871ef4bb55592e7474b1905da12f98/augmented-reality-3d-hint%402x.png)Prefer a 3D hint in a 3D context. + +![An illustration of a cube. The base of the cube is indicated with a grid, and underneath the cube is the word Rotate, hinting that the cube can be rotated within the 3D space.](https://docs-assets.developer.apple.com/published/d60c7354a3ed6528ea35765cd86a970c/augmented-reality-2d-hint%402x.png)If necessary, use a 2D hint in a 3D context. + +**Make important text readable.** Use screen space to display text used for critical labels, annotations, and instructions. If you need to display text in 3D space, make sure the text faces people and that you use the same type size regardless of the distance between the text and the labeled object. + +**If necessary, provide a way to get more information.** Design a visual indicator that fits with your app experience to show people that they can tap for more information. + +![An illustration of an iPhone screen in landscape orientation showing the corner of a room viewed through the camera. In the room are two AR objects: a desk and a chair. Each object has a label attached to the object by a vertical line. The label in each object ends with a greater-than sign to indicate the label can be tapped for more information.](https://docs-assets.developer.apple.com/published/341d2c982c2042c369769344be588e6f/augmented-reality-labels%402x.png) + +Camera view + +![An illustration of an iPhone screen in landscape orientation showing a full-screen view with the detailed information for a chair. On the left side of the screen is an image of the chair, in the middle is a vertical separator line, and on the right is the model number, price, and size of the chair.](https://docs-assets.developer.apple.com/published/3dcd4c7352111a30f5fab8370b060836/augmented-reality-popover%402x.png) + +Detail view + +## [Handling interruptions](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Handling-interruptions) + +ARKit can’t track device position and orientation during an interruption, such as when people briefly switch to another app or accept a phone call. After an interruption ends, previously placed virtual objects are likely to appear in the wrong real-world positions. When you support relocalization, ARKit attempts to restore those virtual objects to their original real-world positions using new information. For developer guidance, see [Managing Session Life Cycle and Tracking Quality](https://developer.apple.com/documentation/ARKit/managing-session-life-cycle-and-tracking-quality). + +**Consider using the system-provided coaching view to help people relocalize.** During relocalization, ARKit attempts to reconcile its previous state with new observations of the current environment. To make these observations more useful, you can use the coaching view to help people return the device to its previous position and orientation. + +![An illustration of an iPhone screen showing the corner of a room viewed through the camera. On the screen is a translucent overlay containing the surface-detection indicator. The indicator is a white square with rounded corners projected into the 3D space. A small iPhone is shown scanning back and forth along the base of the square. A circle of dots trailing the iPhone emphasizes the movement.](https://docs-assets.developer.apple.com/published/f39344a998cd544223592f8b13c118fb/augmented-reality-vertical-orientation%402x.png) + +**Consider hiding previously placed virtual objects during relocalization.** To avoid flickering or other unpleasant visual effects during relocalization, it can be best to hide virtual objects and redisplay them in their new positions. + +**Minimize interruptions if your app supports both AR and non-AR experiences.** One way to avoid interruptions is by embedding a non-AR experience within an AR experience so that people can handle the task without exiting and re-entering AR. For example, if your app helps people decide on a piece of furniture to purchase by placing the item in a room, you might let them change the upholstery without leaving the AR experience. + +**Allow people to cancel relocalization.** If people don’t position and orient their device near where it was before an interruption, relocalization continues indefinitely without success. If coaching people to resume their session isn’t successful, consider providing a reset button or other way to restart the AR experience. + +**Indicate when the front-facing camera is unable to track a face for more than about half a second.** Use a visual indicator to indicate that the camera can no longer track the person’s face. If you need to provide text instructions in this situation, keep them to a minimum. + +## [Suggesting problem resolutions](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Suggesting-problem-resolutions) + +**Let people reset the experience if it doesn’t meet their expectations.** Don’t force people to wait for conditions to improve or struggle with object placement. Give them a way to start over again and see if they have better results. + +![An illustration showing a corner of a brightly lit office that contains a desk and chair.](https://docs-assets.developer.apple.com/published/13887c5129d1c8add4ff07c5b0ba86e5/augmented-reality-sufficient-lighting%402x.png)Sufficient lighting + +![An illustration showing a corner of a dark office that contains a desk and chair.](https://docs-assets.developer.apple.com/published/346b5de0b7f08b0a510192cae8189cab/augmented-reality-insufficient-lighting%402x.png)Insufficient lighting + +**Suggest possible fixes if problems occur.** Analysis of the real-world environment and surface detection can fail or take too long for a variety of reasons — insufficient light, an overly reflective surface, a surface without enough detail, or too much camera motion. If your app is notified of these problems, use straightforward, friendly language to offer suggestions for resolving them. + +Problem| Possible suggestion +---|--- +Insufficient features detected.| Try turning on more lights and moving around. +Excessive motion detected.| Try moving your phone slower. +Surface detection takes too long.| Try moving around, turning on more lights, and making sure your phone is pointed at a sufficiently textured surface. + +## [Icons and badges](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Icons-and-badges) + +Apps can display an AR icon in controls that launch ARKit-based experiences. You can download this icon in [Resources](https://developer.apple.com/design/resources/#ios-apps). + +![The AR glyph.](https://docs-assets.developer.apple.com/published/05428c411e6c937857838da1fa944416/augmented-reality-glyph%402x.png) + +![A button containing the AR glyph and the text View in AR.](https://docs-assets.developer.apple.com/published/5df46e31e22d0b25d2ad1a5e6342eb1d/augmented-reality-glyph-button%402x.png) + +**Use the AR glyph as intended.** The glyph is strictly for initiating an ARKit-based experience. Never alter the glyph (other than adjusting its size and color), use it for other purposes, or use it in conjunction with AR experiences not created using ARKit. + +**Maintain minimum clear space.** The minimum amount of clear space required around an AR glyph is 10% of the glyph’s height. Don’t let other elements infringe on this space or occlude the glyph in any way. + +![An illustration that shows the AR glyph centered within a frame that represents the minimum clear space to leave around the glyph.](https://docs-assets.developer.apple.com/published/4a22c5126bd05f8291ab3637b01c89b9/augmented-reality-glyph-minimum-clear-space%402x.png) + +Apps that include collections of products or other objects can use badging to identify specific items that can be viewed in AR using ARKit. For example, an app that sells vintage collectibles might use a badge to mark items that people can preview in their home before making a purchase. + +![An illustration of a partial iPhone screen. On the screen is an app with four gray squares in a grid layout, each containing a picture of a vintage toy: one robot, and three rocket ships. In the upper left corner of each square is the AR badge with the glyph and the text AR.](https://docs-assets.developer.apple.com/published/ebffaa99bc0113cb9c94f8cf5da94ace/augmented-reality-badging%402x.png) + +**Use the AR badges as intended and don’t alter them.** You can download AR badges, available in collapsed and expanded form, in [Resources](https://developer.apple.com/design/resources/#ios-apps). Use these images exclusively to identify products or other objects that can be viewed in AR using ARKit. Never alter the badges, change their color, use them for other purposes, or use them in conjunction with AR experiences not created with ARKit. + +![The AR badge with both the glyph and the text AR.](https://docs-assets.developer.apple.com/published/65ae0b4baf76d633cb247880b2c4f338/augmented-reality-badge-iconandtext%402x.png)AR badge + +![The glyph-only AR badge.](https://docs-assets.developer.apple.com/published/807119fbf8f1c62a35dddde3fdc0a026/augmented-reality-badge-icon%402x.png)Glyph-only AR badge + +**Prefer the AR badge to the glyph-only badge.** In general, use the glyph-only badge for constrained spaces that can’t accommodate the AR badge. Both badges work well at their default size. + +**Use badging only when your app contains a mixture of objects that can be viewed in AR and objects that cannot.** If all objects in your app can be viewed in AR, then badging is redundant. + +**Keep badge placement consistent and clear.** A badge looks best when displayed in one corner of an object’s photo. Always place it in the same corner and make sure it’s large enough to be seen clearly (but not so large that it occludes important detail in the photo). + +**Maintain minimum clear space.** The minimum amount of clear space required around an AR badge is 10% of the badge’s height. Don’t allow other elements to infringe on this space and occlude the badge in any way. + +![An illustration of the AR badge with the AR glyph and text AR. A frame surrounds the badge to indicate leaving clear space around the badge.](https://docs-assets.developer.apple.com/published/ac95fbcb89cd066b471e15c74e0475b4/augmented-reality-badge-iconandtext-clear%402x.png) + +![An illustration of the glyph-only AR badge. A frame surrounds the badge to indicate leaving clear space around the badge.](https://docs-assets.developer.apple.com/published/6b63f2ad4df182c7be792b90e56abec7/augmented-reality-badge-icon-clear%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, or watchOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#visionOS) + +With the wearer’s [permission](https://developer.apple.com/design/human-interface-guidelines/privacy#visionOS), you can use ARKit in your visionOS app to detect surfaces in a person’s surroundings, use a person’s hand and finger postions to inform your [custom gestures](https://developer.apple.com/design/human-interface-guidelines/gestures#Designing-custom-gestures-in-visionOS), support interactions that incorporate nearby physical objects into your [immersive experience](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences), and more. For developer guidance, see [ARKit](https://developer.apple.com/documentation/ARKit). + +Video with custom controls. + +Content description: A recording showing a 3D model of a meteor in visionOS rotating above a physical table. + +Play + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Related) + +[Playing haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics) + +[Gestures](https://developer.apple.com/design/human-interface-guidelines/gestures) + +[Apple Design Resources](https://developer.apple.com/design/resources/#ios-apps) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Developer-documentation) + +[ARKit](https://developer.apple.com/documentation/ARKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/augmented-reality#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/D9569ADB-FA90-4DB7-9987-A4366BA0E921/6628_wide_250x141_1x.jpg) Qualities of great AR experiences ](https://developer.apple.com/videos/play/wwdc2022/10131) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/53F3827F-2C69-44D5-9D85-73AF3FF759FD/4965_wide_250x141_1x.jpg) Explore ARKit 5 ](https://developer.apple.com/videos/play/wwdc2021/10073) + diff --git a/skills/hig-technologies/references/carekit.md b/skills/hig-technologies/references/carekit.md new file mode 100644 index 00000000..5ea1553e --- /dev/null +++ b/skills/hig-technologies/references/carekit.md @@ -0,0 +1,224 @@ +--- +title: "CareKit | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/carekit + +# CareKit + +People can use CareKit apps to manage care plans related to a chronic illness like diabetes, recover from an injury or surgery, or achieve health and wellness goals. + +![A sketch of the CareKit icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ca3abb9c5686138572c9d3649257809f/technologies-CareKit-intro%402x.png) + +To learn more about CareKit, see [Research & Care > CareKit](https://www.researchandcare.org/carekit/). + +CareKit 2.0 contains two projects, CareKit UI and CareKit Store. CareKit UI provides a wide variety of prebuilt views you can use to create a custom CareKit app. CareKit Store defines a database scheme that incorporates CareKit entities — such as patients, care plans, tasks, and contacts — so you can store and manage data on the patient’s device. CareKit 2.0 provides seamless synchronization between your database and the UI, so you can always keep a care plan up to date. For developer guidance, see [CareKit](https://carekit-apple.github.io/CareKit/documentation/carekit). + +## [Data and privacy](https://developer.apple.com/design/human-interface-guidelines/carekit#Data-and-privacy) + +Nothing is more important than protecting people’s privacy and safeguarding the extremely sensitive data your CareKit app collects and stores. + +**Provide a coherent privacy policy.** During the app submission process, you must provide a URL to a clearly stated privacy policy, so that people can view the policy when they click the link in the App Store page for your app. For developer guidance, see [App information > App Store Connect help](https://help.apple.com/app-store-connect/#/dev219b53a88). + +In addition to the data that people enter into your CareKit app, you may be able to access data through iOS features and capabilities. You must receive people’s permission before accessing data through these features, and you must protect people’s data whether people enter it into your app or you get it from the device or the system. For developer guidance, see [Protecting user privacy](https://developer.apple.com/documentation/HealthKit/protecting-user-privacy). + +### [HealthKit integration](https://developer.apple.com/design/human-interface-guidelines/carekit#HealthKit-integration) + +HealthKit is the central repository for health and fitness data in iOS and watchOS. When you support HealthKit in your CareKit app, you can ask people for permission to access and share their health and fitness data with designated caregivers. + +**Request access to health data only when you need it.** It makes sense to request access to weight information when people log their weight, for example, but not immediately after your app launches. When your request is clearly related to the current context, you help people understand your app’s intentions. Also, people can change the permissions they grant, so it’s a good idea to make a request every time your app needs access. For developer guidance, see [`requestAuthorization(toShare:read:completion:)`](https://developer.apple.com/documentation/HealthKit/HKHealthStore/requestAuthorization\(toShare:read:completion:\)). + +**Clarify your app’s intent by adding descriptive messages to the standard permission screen.** People expect to see the system-provided permission screen when asked to approve access to health data. Write a few succinct sentences that explain why you need the information and how people can benefit from sharing it with your app. Avoid adding custom screens that replicate the standard permission screen’s behavior or content. + +**Manage health data sharing solely through the system’s privacy settings.** People expect to globally manage access to their health information in Settings > Privacy. Don’t confuse people by building additional screens in your app that affect the flow of health data. + +For related design guidance, see [HealthKit](https://developer.apple.com/design/human-interface-guidelines/healthkit). For developer guidance, see [HealthKit](https://developer.apple.com/documentation/HealthKit). + +### [Motion data](https://developer.apple.com/design/human-interface-guidelines/carekit#Motion-data) + +If it’s useful for treatment and if people give permission, your app can get motion information from the device to determine if people are standing still, walking, running, cycling, or driving. When people are walking or running, you can also determine the step count, pace, and number of flights of stairs ascended or descended. + +Motion information can also include custom data collected as part of physical therapy. For example, some ResearchKit tasks use device sensors to test flexibility, range of motion, and ambulatory capability. + +For developer guidance, see [Core Motion](https://developer.apple.com/documentation/CoreMotion). + +### [Photos](https://developer.apple.com/design/human-interface-guidelines/carekit#Photos) + +Pictures are a great way to communicate treatment progress. With people’s permission, your app can access the device’s camera and photos to share pictures with a care team. For example, a care plan might include a request for people to share periodic photos of an injury, so the physician can monitor the healing process. + +For developer guidance, see [`UIImagePickerController`](https://developer.apple.com/documentation/UIKit/UIImagePickerController). + +### [ResearchKit integration](https://developer.apple.com/design/human-interface-guidelines/carekit#ResearchKit-integration) + +A ResearchKit app lets people participate in important medical research studies. Your CareKit app can incorporate ResearchKit features to display related surveys, tasks, and charts, if appropriate. ResearchKit also includes an informed consent module, which your CareKit app can use to request people’s permission to collect and share data. + +For related design guidance, see [ResearchKit](https://developer.apple.com/design/human-interface-guidelines/researchkit). For developer guidance, see [Research & Care > Developers](https://www.researchandcare.org/developers/). + +## [CareKit views](https://developer.apple.com/design/human-interface-guidelines/carekit#CareKit-views) + +CareKit UI provides customizable views organized into three categories — tasks, charts, and contacts — and defines several default view styles in each. To design a CareKit app, you simply choose the view styles you need and supply CareKit Store data to display in them. + +Each view category is designed to support specific types of content and interaction. To ensure a consistent experience, use each view type for its intended purpose. + +Category| Purpose +---|--- +[Tasks](https://developer.apple.com/design/human-interface-guidelines/carekit#Tasks)| Present tasks, like taking medication or doing physical therapy. Support logging of patient symptoms and other data. +[Charts](https://developer.apple.com/design/human-interface-guidelines/carekit#Charts)| Display graphical data that can help people understand how their treatment is progressing. +[Contact views](https://developer.apple.com/design/human-interface-guidelines/carekit#Contact-views)| Display contact information. Support communication through phone, message, and email, and link to a map of the contact’s location. + +![A screenshot of a CareKit app screen on iPhone that shows completed and uncompleted days, a medication task, a chart that compares the patient's nausea with their medication intake, and a logging task the patient can use to log each occurrence of nausea.](https://docs-assets.developer.apple.com/published/977d2f1a52a79ab993cf5bc0aa8389ac/carekit-tasks-and-charts%402x.png) + +Tasks and charts + +![A screenshot of a CareKit app screen on iPhone that shows contact information for two doctors, including buttons for phone, message, email, and map directions.](https://docs-assets.developer.apple.com/published/0f6c59a217b3fdb5ca70493daeba877a/carekit-contacts%402x.png) + +Contacts + +A CareKit UI view consists of a header and may include a stack of content subviews. Located at the top of the view, the header can display text, a symbol, and a disclosure indicator, and can include a separator at its bottom edge. The content stack appears below the header and displays your content subviews in a vertical arrangement. + +![An illustration of a CareKit task view. Callouts indicate the header area at the top of the view, which contains the title on the left and an optional disclosure indicator on the right. A subview area below the header includes circular checkmark buttons for marking off medication intake at different times of the day. Additional callouts point to the subview area and the horizontal separator between the header and the subview.](https://docs-assets.developer.apple.com/published/8e48aa29bf75edb650e9b644c2b031f9/carekit-view-components%402x.png) + +CareKit UI takes care of all the layout constraints within a view, so you don’t have to worry about breaking existing constraints when you add new subviews to the stack. + +### [Tasks](https://developer.apple.com/design/human-interface-guidelines/carekit#Tasks) + +A care plan generally presents a set of prescribed actions for people to perform, such as taking medication, eating specific foods, exercising, or reporting symptoms. CareKit UI defines several styles of task views you can use to display prescribed actions. Typically, you customize a task view by providing the information to display, often by specifying data stored in an on-device CareKit Store database. In some cases, you might also supply custom UI elements. + +A task can contain the following types of information. + +Information| Required| Description| Example value +---|---|---|--- +Title| Yes| A word or short phrase that introduces the task.| _Ibuprofen_ +Schedule| Yes| The schedule on which a task must be completed.| _Four times a day_ +Instructions| No| Detailed instructions, recommendations, and warnings.| _Take 1 tablet every 4–6 hours (not to exceed 4 tablets daily)._ +Group ID| No| An identifier you can use to group similar tasks in ways that make sense in your app.| A category identifier like _medication_ or _exercise_. + +In CareKit 2.0, CareKit UI defines five styles of task views: simple, instructions, log, checklist, and grid. Each style is designed to support a particular use case. + +**Use the simple style for a one-step task.** The default simple-style view consists of a header area that contains a title, subtitle, and button. You provide the title and subtitle, and you can provide a custom image to display in the button when the task is complete. If you don’t supply an image, CareKit shows that a task is complete by filling in the button and displaying a checkmark. Because the default simple-style view doesn’t include a content stack, consider using a different task style if you need to display additional content. + +![An illustration of a task for taking a single dose of medicine at a specific time of day. The filled-in circle and checkmark indicate that the task is complete.](https://docs-assets.developer.apple.com/published/a85ed842da7f8c4866c33137ad075e1d/carekit-simple-task%402x.png) + +**Use the instructions style when you need to add informative text to a simple task.** For example, if a single-step medication task needs to include additional information — such as “Take on an empty stomach” or “Take at bedtime” — you can use an instructions-style task to display it. + +![An illustration of a task for taking a single dose of medicine at a specific time of day. The task includes instructions for how to take the dose. Below the instructions, the task shows the word completed and a checkmark to indicate that the task is complete.](https://docs-assets.developer.apple.com/published/e5b168ae1bdb4df6888510dbced322b6/carekit-instructions-task%402x.png) + +**Use the log style to help people log events.** For example, you could use this task style to display a button people can tap whenever they feel nauseated. The log-style task can automatically display a timestamp every time the patient logs an event. + +![An illustration of a task for logging incidents of nausea. The task's header area includes a title, a time range, and a disclosure button to display additional details. The subview area includes instructions, a Log button, and a time completed.](https://docs-assets.developer.apple.com/published/b95b554f7b57ae7ccf0d8cd30ff17edb/carekit-log-task%402x.png) + +**Use the checklist style to display a list of actions or steps in a multistep task.** For example, if people must take a medication three times per day, you could display the three scheduled times in a checklist. Each checklist item can include a text description and a button that people can tap to mark the item as done. By default, a checklist task can also display instructional text below the list. + +![An illustration of a task that directs the patient to take a medicine at breakfast, lunch, and dinner. Filled-in circles containing checkmarks next to breakfast and lunch show that the patient has taken the first two doses.](https://docs-assets.developer.apple.com/published/ab87d6ff81ae4ee55ce96f6ba8442646/carekit-checklist-task%402x.png) + +**Use the grid style to display a grid of buttons in a multistep task.** Like the checklist style, the grid style also supports a multistep task, but it displays the steps in a more compact arrangement. You can supply a succinct title for each button (if you need to provide additional description for each button, you might want to use the checklist style instead). By default, a grid-style task can also display instructional text below the grid of buttons. Unlike other task styles, the grid style gives you access to its underlying collection view, which means that you can display custom UI elements in the grid layout. + +![An illustration of a task that consists of three circles that represent three doses of a medicine. The first two circles are filled in and contain checkmarks, indicating that the patient has already taken two doses.](https://docs-assets.developer.apple.com/published/9a88f8e5d4239b399b13d5107025304a/carekit-grid-task%402x.png) + +**Consider using color to reinforce the meaning of task items.** Color can be a good way to help people understand information at a glance. For example, you could use one color for medications and a different color for physical activities. Always avoid using color as the only way to convey information. For guidance, see [Color](https://developer.apple.com/design/human-interface-guidelines/color). + +**Combine accuracy with simplicity when describing a task and its steps.** For example, use a medication’s marketing name instead of its chemical description. Also, when the context of a task helps to clarify meaning, minimize the number of words you use. For example, a daily medication task generally tells people when to take specific medications, so it may be unnecessary to repeat words like _take_. + +**Consider supplementing multistep or complex tasks with videos or images.** Visually demonstrating how to perform a task can help people avoid mistakes. + +### [Charts](https://developer.apple.com/design/human-interface-guidelines/carekit#Charts) + +Chart views let you present data and trends in graphical ways that can help people visualize their progress in a care plan. CareKit chart views can display both current and historical data, and update automatically with new data. + +In CareKit 2.0, CareKit UI provides three chart styles: bar, scatter, and line. For each style, you provide a descriptive title and subtitle, supply axis markers — like days of the week — and specify the data set. + +![An illustration of a bar chart with days of the week on the x-axis and dosage numbers on the y-axis. The bar on Thursday reaches a value of two on the y-axis, indicating that the medicine was taken twice that day.](https://docs-assets.developer.apple.com/published/a97874787391ab1483b41b1e991874f7/carekit-bar-chart%402x.png)Bar chart + +![An illustration of a scatter chart with days of the week on the x-axis and dosage numbers on the y-axis. A dot on Thursday reaches a value of two on the y-axis, indicating that the medicine was taken twice that day.](https://docs-assets.developer.apple.com/published/c858b864bc6bf226d2cf3ce047e23698/carekit-scatter-chart%402x.png)Scatter chart + +![An illustration of a line chart with days of the week on the x-axis and dosage numbers on the y-axis. The line is at zero on the y-axis for all days but Thursday, where it reaches a value of two, indicating that the medicine was taken twice that day.](https://docs-assets.developer.apple.com/published/c0d97975de87ccec41d5c82e80b3bab4/carekit-line-chart%402x.png)Line chart + +**Consider highlighting narratives and trends to illustrate progress.** For example, your app could display a bar chart that shows a correlation between the number of times people took medication and their level of pain. Displaying such data can encourage better adherence to a care plan. + +**Label chart elements clearly and succinctly.** Long, detailed labels can make a chart difficult to read and understand. Keep labels short and avoid repeating the same information. For example, a heart rate chart might use the term _BPM_ in an axis label instead of using it in the label of every data point. + +**Use distinct colors.** In general, avoid using different shades of the same color to mean different things. Also ensure that you use colors with sufficient contrast. For related guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**Consider providing a legend to add clarity.** If the colors you use to represent different types of data aren’t immediately clear, include a legend that clearly and succinctly describes them. + +**Clearly denote units of time.** People need to know whether time-based data is represented in seconds, minutes, hours, days, weeks, months, or years. If you don’t want to include this information in individual data value labels, include it in an axis label or elsewhere on the chart. + +**Consolidate large data sets for greater readability.** A large amount of data can make a chart unreadable by reducing the size of individual data points and presenting too much visible information. Look for ways to group and organize data for clarity and simplicity. + +**If necessary, offset data to keep charts proportional.** It’s easy for very small data points to get lost or become unreadable in a chart that also contains very large data points. If the difference between data points is significant, find ways to offset or restructure the data so all data points are readable. + +For developer guidance, see [CareKit > Chart Interfaces](https://carekit-apple.github.io/CareKit/documentation/carekit/chart-interfaces). To learn about ResearchKit charts, see the [ResearchKit GitHub project](https://github.com/ResearchKit/ResearchKit). + +### [Contact views](https://developer.apple.com/design/human-interface-guidelines/carekit#Contact-views) + +A care plan typically includes a care team and other trusted individuals who can help patients follow the plan. CareKit UI defines a contact view you can use to help patients communicate with the people in their care plan. + +In CareKit 2.0, CareKit UI provides two styles of the contact view: simple and detailed. + +![An illustration of a simple contact view that displays a person glyph, followed by a doctor's name and practice type, and a disclosure button to display additional information.](https://docs-assets.developer.apple.com/published/4e1f4b08ca6472985f22dfaebdc82d71/carekit-simple-contact%402x.png)Simple + +![An illustration of a detailed contact view that displays a person glyph, followed by a doctor's name and practice type in a header area. In a subview area, the view displays information about the doctor, and buttons for calling, messaging, emailing, and navigating to the doctor's physical address.](https://docs-assets.developer.apple.com/published/8a0dd3b99492a6b0ec10e4c3307d2f94/carekit-detailed-contact%402x.png)Detailed + +**Consider using color to categorize care team members.** Color can help people identify care team members at a glance. + +## [Notifications](https://developer.apple.com/design/human-interface-guidelines/carekit#Notifications) + +Notifications can tell people when it’s time to take medication or complete a task, and badging your app icon can show that there’s an unread message from a caregiver. Apple Watch can also display a notification from your app; for guidance, see [Notifications](https://developer.apple.com/design/human-interface-guidelines/notifications). + +**Minimize notifications.** Care plans vary from patient to patient. While one individual may have only a few daily tasks to complete, another may have a long list. Use notifications sparingly so people don’t feel overwhelmed. When possible, consider coalescing multiple items into a single notification. + +**Consider providing a detail view.** In addition to providing more information, a notification detail view can help people take immediate action without leaving their current context to open your app. For example, you could use a notification detail view to display a list of pending tasks so that people can quickly mark them as complete. + +## [Symbols and branding](https://developer.apple.com/design/human-interface-guidelines/carekit#Symbols-and-branding) + +CareKit uses a variety of built-in symbols to help people understand what they can do in a care app. For example, CareKit can display the phone, messaging, and envelope symbols in a contact view and the clock symbol in a log-style task view. + +Although you can customize the default symbols, most view styles work best with the CareKit-provided symbols. The exception is the highly customizable grid-style task view, which can display your custom UI in a grid layout. + +In a grid view, you might want to display custom symbols that are relevant to the unique content and experience in your app. You could use symbols to indicate the grouping of tasks; for example, a pill to represent medication tasks, or a person walking to represent exercise tasks. In this scenario, consider using [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) to illustrate custom items in your app. + +Using SF Symbols in your app gives you: + + * Designs that coordinate with CareKit’s visual design language + + * Support for creating custom symbols to represent the unique content in your app + + + + +**Design a relevant care symbol.** If you need to customize a symbol, be sure the design is closely related to your app or the general concept of health and wellness. Avoid creating a purely decorative symbol or using a corporate logo as a custom symbol. + +**Incorporate refined, unobtrusive branding.** People use CareKit apps to help them achieve their health and wellness goals; they don’t want to see advertising. To avoid distracting people from their care plan, subtly incorporate your brand through your app’s use of color and communication style. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/carekit#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/carekit#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/carekit#Related) + +[Research & Care > CareKit](https://www.researchandcare.org/carekit/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/carekit#Developer-documentation) + +[CareKit](https://carekit-apple.github.io/CareKit/documentation/carekit) + +[Research & Care > Developers](https://www.researchandcare.org/developers/) + +[Protecting user privacy](https://developer.apple.com/documentation/HealthKit/protecting-user-privacy) — HealthKit + +[HealthKit](https://developer.apple.com/documentation/HealthKit) + +[ResearchKit GitHub project](https://github.com/ResearchKit/ResearchKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/carekit#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/196C46B0-DF68-4947-B211-4FEECE415A6E/3408_wide_250x141_1x.jpg) What's new in CareKit ](https://developer.apple.com/videos/play/wwdc2020/10151) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/EAFF830B-8468-49BA-A5DC-D3A3E8B7F463/4960_wide_250x141_1x.jpg) Build a research and care app, part 1: Setup onboarding ](https://developer.apple.com/videos/play/wwdc2021/10068) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/carekit#Change-log) + +Date| Changes +---|--- +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/carplay.md b/skills/hig-technologies/references/carplay.md new file mode 100644 index 00000000..96f7ce50 --- /dev/null +++ b/skills/hig-technologies/references/carplay.md @@ -0,0 +1,119 @@ +--- +title: "CarPlay | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/carplay + +# CarPlay + +CarPlay lets people get directions, make calls, send and receive messages, listen to music, and more from their car’s built-in display, all while staying focused on the road. + +![A sketch of the CarPlay icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/a1087b54e07bb75c8e79e0f764d21ca1/technologies-CarPlay-intro%402x.png) + +People download CarPlay apps from the App Store and install them on iPhone like any other app. When people connect their iPhone with their vehicle, app icons for installed CarPlay apps appear on the CarPlay Home screen. + +CarPlay is designed for drivers to use while they’re driving. Keep this context in mind as you design your CarPlay app, providing features that help people perform tasks quickly and with minimal interaction. + +To create the interface of your CarPlay app, you use the system-defined templates that are appropriate for the type of app you’re developing, such as audio, communication, navigation, or fueling. For each template, your app provides the content and iOS renders it in CarPlay. Because the system displays UI components and handles the interface with the vehicle, you don’t need to adjust your layout for different screen resolutions, or manage input from different types of hardware like touchscreens, knobs, or touch pads. + +To learn how to create various types of CarPlay apps and use the system-provided templates, see [CarPlay App Programming Guide](https://developer.apple.com/carplay/documentation/CarPlay-App-Programming-Guide.pdf). The general design guidelines below apply to all types of CarPlay apps. + +## [iPhone interactions](https://developer.apple.com/design/human-interface-guidelines/carplay#iPhone-interactions) + +CarPlay shows compatible apps from the connected iPhone on the car’s built-in display, applying simplified interfaces that are optimized for use while driving. + +**Eliminate app interactions on iPhone when CarPlay is active.** Interactions with your app need to occur using the car’s built-in controls and display. If your app requires setup on iPhone, make sure people perform it before the vehicle is in motion. + +**Never lock people out of CarPlay because the connected iPhone requires input.** Your app needs to function when iPhone is inaccessible — for example, when people put it in a bag or in the trunk while driving. If people must resolve a problem on the connected iPhone, let them do so after the vehicle stops. + +**Make sure your app works without requiring people to unlock iPhone.** Most people use CarPlay while their iPhone is locked, so ensure that the features you provide in your CarPlay app work as expected in this scenario. + +### [Audio](https://developer.apple.com/design/human-interface-guidelines/carplay#Audio) + +In CarPlay, keep in mind that your app coexists with other audio sources, such as the car’s own built-in radio and voice prompts from the navigation system. Regardless of whether audio is a primary aspect of your app’s experience, you need to know how people expect audio to behave so you can meet those expectations. + +**Let people choose when to start playback.** In general, avoid beginning playback automatically unless your app’s purpose is to play a single source of audio, or your app is resuming previously interrupted audio. Also, avoid starting an audio session until you’re ready to actually play audio because starting a session silences other audio sources, like the car’s built-in radio. + +**Start playback as soon as audio has sufficiently loaded.** After people make a selection, it may take several seconds for audio to begin playing, depending on buffering and network conditions. The system keeps the selection highlighted and displays a spinning activity indicator until your app signals that the audio is ready to play. + +**Display the Now Playing screen when audio is ready to play.** Don’t delay playback until descriptive information completes loading. If necessary, continue loading such information in the background, and show it when it’s available. + +**Resume audio playback after an interruption only when it’s appropriate.** For example, your app can resume audio after a temporary interruption like a phone call. Permanent interruptions, such as a music playlist initiated by Siri, are nonresumable. When a resumable interruption occurs, your app needs to resume playback when the interruption ends if audio was actively playing when the interruption started. + +**When necessary, automatically adjust audio levels, but don’t change the overall volume.** Although your app can adjust relative, independent volume levels to achieve a great mix of audio, people need to control the final output volume. + +## [Layout](https://developer.apple.com/design/human-interface-guidelines/carplay#Layout) + +CarPlay supports a wide range of display resolutions with varying pixel densities and aspect ratios. The system automatically scales app icons and interfaces based on the resolution of the display, so they always appear onscreen at roughly the same size. Some common screen sizes are listed in the table below. + +Dimensions (pixels)| Aspect ratio +---|--- +800x480| 5:3 +960x540| 16:9 +1280x720| 16:9 +1920x720| 8:3 + +**Provide useful, high-value information in a clean layout that’s easy to scan from the driver’s seat.** Don’t clutter the screen with nonessential details and unnecessary visual embellishments. + +**Maintain an overall consistent appearance throughout your app.** In general, ensure that elements with similar functions look similar. + +**Ensure that primary content stands out and feels actionable.** Large items tend to appear more important than smaller ones and are easier for people to tap. In general, place the most important content and controls in the upper half of the screen. + +## [Color](https://developer.apple.com/design/human-interface-guidelines/carplay#Color) + +Color can indicate interactivity, impart vitality, and provide visual continuity. + +**In general, prefer a limited color palette that coordinates with your app logo.** Subtle use of color is a great way to communicate your brand. + +**Avoid using the same color for interactive and noninteractive elements.** If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap. + +**Test your app’s color scheme under a variety of lighting conditions in an actual car.** Lighting varies significantly based on time of day, weather, window tinting, and more. Colors you see on your computer at design time won’t always look the same when your app is used in the real world. Consider how color brightness might affect the experience of driving at night, and how low-contrast colors can wash out in direct sunlight. If necessary, make adjustments to provide the best possible viewing experience in the majority of use cases. + +**Ensure your app looks great in both dark and light environments.** CarPlay supports both light and dark appearances, and may automatically adjust the current appearance based on lighting conditions. + +**Choose colors that help you communicate effectively with everyone.** Different people see and interpret colors differently. For guidance on using colors in ways that people appreciate, see [Inclusive color](https://developer.apple.com/design/human-interface-guidelines/color#Inclusive-color). + +## [Icons and images](https://developer.apple.com/design/human-interface-guidelines/carplay#Icons-and-images) + +CarPlay supports both landscape and portrait displays and both @2x (low resolution) and @3x (high resolution) scale factors. + +**Supply high-resolution images with scale factors of @2x and @3x for all CarPlay artwork in your app.** The system automatically shows the correct images and scales them appropriately, based on the resolution and size of the car’s display. + +**Mirror your iPhone app icon.** A well-designed app icon works well in CarPlay and on iPhone, without the need for a second design. + +**Don’t use black for your icon’s background.** Lighten a black background or add a border so the icon doesn’t blend into the display background. + +Create your CarPlay app icon in the following sizes: + +@2x (pixels)| @3x (pixels) +---|--- +120x120| 180x180 + +## [Error handling](https://developer.apple.com/design/human-interface-guidelines/carplay#Error-handling) + +A CarPlay app needs to handle errors gracefully and report them to people only when absolutely necessary. + +**Report errors in CarPlay, not on the connected iPhone.** If you must notify people of a problem, do so clearly in CarPlay. Never direct people to pick up their iPhone to read or resolve an error. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/carplay#Platform-considerations) + + _No additional considerations for iOS. Not supported in iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/carplay#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/carplay#Related) + +[CarPlay](http://developer.apple.com/carplay/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/carplay#Developer-documentation) + +[CarPlay App Programming Guide](https://developer.apple.com/carplay/documentation/CarPlay-App-Programming-Guide.pdf) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/carplay#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/3AE21C44-8831-4C0A-BCBE-68C437FB8FC8/9903_wide_250x141_1x.jpg) Turbocharge your app for CarPlay ](https://developer.apple.com/videos/play/wwdc2025/216) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/carplay#Change-log) + +Date| Changes +---|--- +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/game-center.md b/skills/hig-technologies/references/game-center.md new file mode 100644 index 00000000..66b4330c --- /dev/null +++ b/skills/hig-technologies/references/game-center.md @@ -0,0 +1,343 @@ +--- +title: "Game Center | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/game-center + +# Game Center + +Game Center is Apple’s social gaming network, which lets players track their progress and connect with friends across Apple platforms, and boosts the discovery of your game across players’ devices. + +![A sketch of the Game Center icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/4df10f335123d3744626913e7fc71a02/technologies-Game-Center-intro%402x.png) + +Supporting Game Center in your game allows players to: + + * Discover new games their friends are playing. + + * Seamlessly invite friends to play. + + * See the latest activity from their games across the system, in the Apple Games app, the App Store, notifications, and more. + + + + +By enabling the player activities listed above, supporting Game Center also helps surface your game to more players across Apple platforms. + +You can add Game Center into your game using the GameKit framework, which provides a full-featured UI that makes it easy for players to access and view their Game Center data within your game. Alternatively, you can also use GameKit to present this data within your own custom UI. For developer guidance, see [GameKit](https://developer.apple.com/documentation/GameKit). + +## [Accessing Game Center](https://developer.apple.com/design/human-interface-guidelines/game-center#Accessing-Game-Center) + +To provide the best Game Center experience for your players, begin by determining whether the player is signed in to their Game Center account on the system when they launch your game. If they aren’t, initialize the player with Game Center at that time. This provides the most seamless user experience, and maximizes discovery opportunities for your game, such as in the Top Played chart and in social recommendations through players’ friends. + +### [Integrating the access point](https://developer.apple.com/design/human-interface-guidelines/game-center#Integrating-the-access-point) + +The Game Center _access point_ is an Apple-designed UI element that lets players view their Game Center profile and information without leaving your game. For developer guidance, see [Adding an access point to your game](https://developer.apple.com/documentation/GameKit/adding-an-access-point-to-your-game). + +![An iPhone screenshot of the game The Coast, on the title screen. The access point control, a circular button with a diagonal rocket symbol, sits in the upper corner on the leading edge.](https://docs-assets.developer.apple.com/published/9774fc7f07482493ee1559593dc08e53/games-access-point-collapsed%402x.png) + +In iOS, iPadOS, and macOS the access point leads players to the Game Overlay, a system overlay that allows players to view their progress and start game activities. + +![An illustration composed of an iPhone screenshot and an iPad screenshot, both of the game The Coast, with the Game Overlay appearing over the top of each. In the iPhone screenshot the overlay covers the entire screen, while in the iPad screenshot the overlay appears vertically on the trailing edge.](https://docs-assets.developer.apple.com/published/bd606a6020d893c8275928bfcf22bc36/games-game-overlay%402x.png) + +In visionOS and tvOS, the access point leads players to the in-game dashboard, a full-screen view of a player’s Game Center activity that appears on top of your game. + +**Display the access point in menu screens.** Consider adding the access point to the main menu or the settings area of your game. Avoid displaying the access point during active gameplay or in temporary splash screens, cinematic flows, or tutorials that might precede your game’s main menu screen. + +**Avoid placing controls near the access point.** You can choose to present the access point at any of the four corners of the screen in a fixed position. Remember that the access point has both a collapsed and expanded version, so check whether the access point overlaps any important UI and controls and adjust your layout accordingly. + +Note + +In 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](https://developer.apple.com/documentation/GameKit/adding-an-access-point-to-your-game#Configure-the-access-point-on-visionOS). + +**Consider pausing your game while the Game Overlay or dashboard is present.** Pausing your game can help players view their Game Center information without feeling like the game is continuing without them. + +### [Using custom UI](https://developer.apple.com/design/human-interface-guidelines/game-center#Using-custom-UI) + +Your game can include custom links into the Game Overlay (in iOS, iPadOS, macOS) or the dashboard (in visionOS and tvOS). Your custom UI can deep-link into specific areas within both such as leaderboards or a player’s Game Center profile. + +**Use the artwork Game Center provides in custom links.** When referencing Game Center features in custom UI, use the official artwork from [Apple Design Resources](https://developer.apple.com/design/resources/#technologies). Preserve the appearance of this artwork and don’t adjust the dimensions or visual effects. + +**Use the correct terminology in custom links.** The following table describes how to use Game Center terminology correctly so that you can avoid confusing players in custom UI. + +Term| Incorrect terms| Localization +---|---|--- +Game Center| GameKit, GameCenter, game center| Use the system-provided translation of _Game Center_ +Game Center Profile| Profile, Account, Player Info| Use the system-provided translation of _Game Center_ and localize _Profile_ +Achievements| Awards, Trophies, Medals| +Leaderboards| Rankings, Scores, Leaders| +Challenges| Competitions| +Add Friends| Add, Add Profiles, Include Friends| + +## [Achievements](https://developer.apple.com/design/human-interface-guidelines/game-center#Achievements) + +Achievements give players an added incentive to stay engaged with your game. Game Center achievements appear in a collectible card format that highlights the player’s progress and showcases your artwork. For developer guidance, see [Rewarding players with achievements](https://developer.apple.com/documentation/GameKit/rewarding-players-with-achievements). + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the Achievements overview screen.](https://docs-assets.developer.apple.com/published/026715959db42c83de8cc04dc399dd03/games-achievement-overlay%402x.png) + +Achievements overview + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the detail view of a single achievement.](https://docs-assets.developer.apple.com/published/fa2b92d24d82b3cae0748a731df621e8/games-achievement-overlay-detail%402x.png) + +Achievement detail + +### [Integrating achievements into your game](https://developer.apple.com/design/human-interface-guidelines/game-center#Integrating-achievements-into-your-game) + +**Align with Game Center achievement states.** Game Center defines four achievement states: locked, in-progress, hidden, and completed. The system groups achievements by completion status, displaying completed achievements in the Completed group and all other achievements in the Locked group. When you map your achievements to the four Game Center achievement states, you give players a consistent experience and you help them see at a glance the types of achievements your game offers. + +**Determine a display order.** The order in which you upload achievements is the order in which they appear, so consider the order you want before uploading files. For example, you might want your achievements to appear in an order that corresponds to the most common path through your game. + +**Be succinct when describing achievements.** The achievement card limits the title and description to two lines each. If your title or description wraps beyond two lines, the card truncates the text. Use title-style capitalization for the achievement title and sentence-style capitalization for the description. + +![A diagram of an achievement card, with callouts indicating the achievement image, title, and description.](https://docs-assets.developer.apple.com/published/54e27c562164cbf32aff9722a4058bf0/games-achievement-anatomy%402x.png) + +**Give players a sense of progress.** When you use progressive achievements, the system displays player progress and provides encouraging messages like “Youʼre more than halfway to completing Great Lakes Freighter in The Coast. Keep going!” to help motivate players to complete them. + +### [Creating achievement images](https://developer.apple.com/design/human-interface-guidelines/game-center#Creating-achievement-images) + +**Design rich, high-quality images that help players feel rewarded.** Achievements are a prominent feature in Game Center UI, so it’s essential to design high-quality assets that catch the eye and encourage players to return to your game. Avoid reusing the same asset to represent more than one achievement. If you don’t provide an asset for an achievement, the card shows a placeholder image instead. + +**Create artwork in the appropriate size and format.** The system applies a circular mask to your achievement image, so be sure to keep content centered. Use the following specifications to create images. + + * iOS, iPadOS, macOS, visionOS + * tvOS + + + +![A diagram of the layout for an achievement image in iOS, iPadOS, macOS, and visionOS, with callouts indicating the image size and mask diameter.](https://docs-assets.developer.apple.com/published/ba7aed683c8f0f112ce7024ce5a9a34f/ios-achievement-image-layout%402x.png) + +Attribute| Value +---|--- +Format| PNG, TIF, or JPG +Color space| sRGB or P3 +Resolution| 72 DPI (minimum) +Image size| 512x512 pt (1024x1024 px @2x) +Mask diameter| 512 pt (1024 px @2x) + +![A diagram of the layout for an achievement image in tvOS, with callouts indicating the image size and mask diameter.](https://docs-assets.developer.apple.com/published/1e98f3b125dd0babeb08bfbaf4873fed/tvos-achievement-image-layout%402x.png) + +Attribute| Value +---|--- +Format| PNG, TIF, or JPG +Color space| sRGB or P3 +Resolution| 72 DPI (minimum) +Image size| 320x320 pt (640x640 px @2x) +Mask diameter| 200 pt (400 px @2x) + +## [Leaderboards](https://developer.apple.com/design/human-interface-guidelines/game-center#Leaderboards) + +Leaderboards are a great way to encourage friendly competition within your game. When you adopt Game Center, players can easily check their ranking against friends and global players as well as receive notifications when their friends challenge them or pass their score on a leaderboard. You can take advantage of the system-designed UI or present leaderboard information within custom UI. For developer guidance, see [Encourage progress and competition with leaderboards](https://developer.apple.com/documentation/GameKit/encourage-progress-and-competition-with-leaderboards). + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the Leaderboards overview screen.](https://docs-assets.developer.apple.com/published/63770530177075f25554a9eefa82a959/games-leaderboards-overlay%402x.png) + +Leaderboards overview + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the detail view of a single leaderboard.](https://docs-assets.developer.apple.com/published/825cea7230ad7958b60f681aef7bb407/games-leaderboards-detail%402x.png) + +Leaderboard detail + +**Choose a leaderboard type.** Game Center supports two types of leaderboards: _classic_ and _recurring_. + + * A _classic leaderboard_ tracks a player’s best all-time score. Classic leaderboards are always active with no ending. The following are examples of goals you might include in a classic leaderboard: + + * Strive for the most perfect score in a rhythm game. + + * Collect the most coins in a single dungeon run. + + * Achieve the longest continuous time in an endless runner. + + * A _recurring leaderboard_ resets based on a time interval you define, such as every week or every day. Recurring leaderboards can increase engagement by giving players more chances to take the lead. The following are examples of features that work well with recurring leaderboards: + + * Daily rotating puzzles + + * Seasonal or holiday-themed events + + * Weekly leaderboards for different battle modes + + + + +**Take advantage of leaderboard sets for multiple leaderboards.** Leaderboard sets are an organization system that can make it easier for players to find the board they’re looking for. Consider grouping leaderboard sets by themes or gameplay experiences, such as: + + * Difficulty modes (Easy, Standard, Hard) + + * Activity types (Combat, Crafting, Farming) + + * Genres and themes (Disco, Pop, Rock) + + + + +**Add leaderboard images.** Leaderboard artwork gives you another opportunity to reinforce your game’s visual aesthetic. Aim to create a unique image for each leaderboard in your game that reflects and showcases the gameplay involved in leaderboard ranking. Leaderboards appear across the system, promoting ways for players to engage and compete with friends, and having compelling images helps attract players and gives them a sense of the experience. + +For games that run in iOS, iPadOS, and macOS, use a single image for your leaderboard image. For games that run in tvOS, provide a set of images that animate when the artwork is in focus. To learn more about focus effects, see [Focus and selection](https://developer.apple.com/design/human-interface-guidelines/focus-and-selection). For help creating focusable images, download the tvOS template from [Apple Design Resources](https://developer.apple.com/design/resources/#tvos-apps). Use the following specifications to create leaderboard artwork. + + * iOS, iPadOS, macOS + * tvOS + + + +![A diagram of the layout for a leaderboard image in iOS, iPadOS, and macOS, with callouts indicating the image size and mask diameter.](https://docs-assets.developer.apple.com/published/a41db2a595bec653175fcfb13b50b9ed/leaderboard-image-layout-general%402x.png) + +Attribute| Value +---|--- +Format| JPEG, JPG, or PNG +Color space| sRGB or P3 +Resolution| 72 DPI (minimum) +Image size| 512x512 pt (1024x1024 px @2x) +Cropped area| 512x312 pt (1024x624 px @2x) + +![A diagram of the layout for a leaderboard image in tvOS, with callouts indicating the image size, focused size, and unfocused size.](https://docs-assets.developer.apple.com/published/631b5255803637a7084fe167f971810c/tvos-multi-layered-leaderboard-image%402x.png) + +Attribute| Value +---|--- +Format| PNG, TIF, or JPG +Color space| sRGB or P3 +Resolution| 72 DPI (minimum) +Image size| 659x371 pt (1318x742 px @2x) +Focused size| 618x348 pt (1236x696 px @2x) +Unfocused size| 548x309 pt (1096x618 px @2x) + +Note + +Be 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. + +## [Challenges](https://developer.apple.com/design/human-interface-guidelines/game-center#Challenges) + +Challenges turn single player activities into multiplayer experiences with friends. Challenges are built on top of leaderboards and allow players to connect with their friends and participate in competitions with time limits. For developer documentation, see [Creating engaging challenges from leaderboards](https://developer.apple.com/documentation/GameKit/creating-engaging-challenges-from-leaderboards). + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the Challenges overview screen.](https://docs-assets.developer.apple.com/published/63176e29afb5351d511719cafdf1bb0d/games-challenges-overlay%402x.png) + +Challenges overview + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the detail view of a single challenge.](https://docs-assets.developer.apple.com/published/ddfb071869dd7577f3e43f955f1b6ce7/games-challenges-overlay-detail%402x.png) + +Challenge detail + +**Create engaging challenges.** Challenges are great for short, skill-based gameplay activities that have a clear way of gauging players’ accomplishments. Create challenges that take 1-5 minutes to play, with gameplay that players can complete individually. Examples of compelling challenges are: + + * Complete the fastest lap in a racing level. + + * Defeat the most enemies in a single round. + + * Solve a daily puzzle with the fewest mistakes. + + + + +**Avoid creating challenges that track overall progress or personal best scores.** These can give regular players an unfair advantage. Instead, track players’ most recent score after each attempt at your challenge. This helps keep your challenge motivating by placing all players on a level playing field. + +**Make it easy to jump into your challenge.** Players can access challenges through invitation links, the Game Overlay, or in the Games app in iOS, iPadOS, and macOS. Always deep-link to the exact mode or level where your challenge begins, and help first-time players complete any initial onboarding before beginning the challenge. For example, if your game requires a tutorial level to understand basic controls, launch the player into the tutorial first and present UI that lets them know your game automatically jumps into the challenge afterward. + +![A diagram of a challenge card, with callouts indicating the challenge title, artwork, and number of players, and the system-provided gradient at the bottom of the card.](https://docs-assets.developer.apple.com/published/73d82f1a3511b11cab8ffb1d3026283d/games-challenge-anatomy%402x.png) + +**Create high-quality artwork that encourages players to engage with your challenges.** The system shows your challenge’s artwork in the Game Overlay, Games app, and in the preview of an invitation link. Avoid placing the primary content of your artwork in an area where the challenge’s title and description might cover it. If you need to use text in your challenge image, provide the appropriate localized versions through App Store Connect or Xcode. Use the following specifications to create challenge artwork. + +![A diagram of the layout for a challenge image, with callouts indicating the image size and cropped area.](https://docs-assets.developer.apple.com/published/3f26192095237c3c95276f37dd349ab6/games-challenge-image-specs%402x.png) + +Attribute| Value +---|--- +Format| JPEG, JPG, or PNG +Color space| sRGB or P3 +Resolution| 72 DPI (minimum) +Image size| 1920x1080 pt (3840x2160 px @2x) +Cropped area| 1465x767 pt (2930x1534 px @2x) + +## [Multiplayer activities](https://developer.apple.com/design/human-interface-guidelines/game-center#Multiplayer-activities) + +Game Center supports both real-time and turn-based multiplayer activities that make it easy to connect players with friends or other players. Players can access multiplayer gameplay through party codes, the Game Overlay, the dashboard, or in the Games app. For developer documentation, see [Creating activities for your game](https://developer.apple.com/documentation/GameKit/creating-activities-for-your-game). + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the Multiplayer levels overview screen.](https://docs-assets.developer.apple.com/published/f89b2ebd744907258cc4543688d5d011/games-multiplayer-overlay%402x.png) + +Multiplayer levels overview + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the detail view of a single multiplayer level.](https://docs-assets.developer.apple.com/published/b96755c00a2049def7aa3ce15c11c544/games-multiplayer-overlay-detail%402x.png) + +Multiplayer level detail + +**Use party codes to invite players to multiplayer activities.** Game Center party codes are a great way to coordinate real-time multiplayer sessions whether you use Game Center matchmaking and networking facilities or provide your own. Game Center generates alpha-numeric party codes that are typically eight characters long, such as “2MP4-9CMF.” When integrating party codes into your multiplayer games, consider the following guidelines for the best player experience: + + * Allow players to join gameplay late, leave early, and return later. + + * Provide a way for players to view the current party code in your game. + + * Allow players to enter a party code manually. + + + + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the in-game UI for setting up or joining a multiplayer activity using a custom code.](https://docs-assets.developer.apple.com/published/21aa655690fc4f5ec113e47e587774ab/games-multiplayer-custom-code%402x.png) + +**Support multiplayer activities through in-game UI.** The Game Overlay and Game Center dashboard help players find other people for a multiplayer match without leaving your game. Game Center’s default multiplayer interface lets a player invite nearby or recent players, Game Center friends, and contacts. You can also choose to present multiplayer functionality within your custom UI. For developer guidance, see [Finding multiple players for a game](https://developer.apple.com/documentation/GameKit/finding-multiple-players-for-a-game). + +![An iPhone screenshot of the game The Coast with the Game Overlay open, showing the in-game UI starting a multiplayer activity.](https://docs-assets.developer.apple.com/published/1b1d8dd189678fda25a18976d990b485/games-multiplayer-in-game-ui%402x.png) + +**Provide engaging activity artwork.** Players see the preview image for a multiplayer activity throughout the system, such as in a party code, the Games app, or in-game UI. Use the following specifications to create your artwork. + +![A diagram of a multiplayer activity card, with callouts indicating the activity title, artwork, and number of players, and the system-provided gradient at the bottom of the card.](https://docs-assets.developer.apple.com/published/8f8b825cdf198a9194e816edefef3c45/games-multiplayer-anatomy%402x.png) + +![A diagram of the layout for a multiplayer activity image, with callouts indicating the image size and cropped area.](https://docs-assets.developer.apple.com/published/3f26192095237c3c95276f37dd349ab6/games-multiplayer-image-specs%402x.png) + +Attribute| Value +---|--- +Format| JPEG, JPG, or PNG +Color space| sRGB or P3 +Resolution| 72 DPI (minimum) +Image size| 1920x1080 pt (3840x2160 px @2x) +Cropped area| 1465x767 pt (2930x1534 px @2x) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/game-center#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or visionOS._ + +### [tvOS](https://developer.apple.com/design/human-interface-guidelines/game-center#tvOS) + +**Display an optional image at the top of the dashboard.** In tvOS, you can add an additional piece of artwork to the dashboard to highlight your game’s aesthetic. Use a simple, easily recognizable image that looks great at a distance. Consider using your game’s logo or word mark; however, don’t use your app icon for this image. Use the following specifications to create a dashboard image. + +![A diagram of the layout for a tvOS dashboard image, with a callout indicating the image size.](https://docs-assets.developer.apple.com/published/438f3caaa842926ba5a0f54470c64373/tvos-dashboard-image%402x.png) + +Attribute| Value +---|--- +Image size| 600x180 pt (1200x360 px @2x) +Format| PNG, TIF, or JPG +Color space| sRGB or P3 +Resolution| 72 DPI (minimum) + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/game-center#watchOS) + +**Be aware of Game Center support on watchOS.** While GameKit features and API are available for watchOS games, keep in mind that there’s no system-supported Game Center UI that you can invoke on watchOS. Instead, Game Center content for watchOS games appears on a connected iPhone. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/game-center#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/game-center#Related) + +[Designing for games](https://developer.apple.com/design/human-interface-guidelines/designing-for-games) + +[Game controls](https://developer.apple.com/design/human-interface-guidelines/game-controls) + +[Apple Design Resources](https://developer.apple.com/design/resources/#technologies) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/game-center#Developer-documentation) + +[GameKit](https://developer.apple.com/documentation/GameKit) + +[Creating activities for your game](https://developer.apple.com/documentation/GameKit/creating-activities-for-your-game) + +[Creating engaging challenges from leaderboards](https://developer.apple.com/documentation/GameKit/creating-engaging-challenges-from-leaderboards) + +[Create games for Apple platforms](https://developer.apple.com/games/) + +[Game Porting Toolkit](https://developer.apple.com/games/game-porting-toolkit/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/game-center#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/0BEC1E9E-5221-48F9-853B-BEDA2BE23D63/9892_wide_250x141_1x.jpg) Get started with Game Center ](https://developer.apple.com/videos/play/wwdc2025/214) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/0C96EE37-E8A0-46DB-88B3-3BF6C3F633DD/9893_wide_250x141_1x.jpg) Engage players with the Apple Games app ](https://developer.apple.com/videos/play/wwdc2025/215) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/game-center#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added guidance for new challenges and multiplayer activities, and considerations for the Apple Games app and Game Overlay. Updated guidance and specifications for activity preview images. +February 2, 2024| Added links to developer guidance on using the access point and dashboard in a visionOS game. +September 12, 2023| Added artwork for the iOS achievement layout. +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/generative-ai.md b/skills/hig-technologies/references/generative-ai.md new file mode 100644 index 00000000..48450a02 --- /dev/null +++ b/skills/hig-technologies/references/generative-ai.md @@ -0,0 +1,110 @@ +--- +title: "Generative AI | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/generative-ai + +# Generative AI + +Generative AI empowers you to enhance your app or game with dynamic content and offer intelligent features that unlock new levels of creativity, connection, and productivity. + +![A sketch of a pencil surrounded by sparkly stars, suggesting generative intelligence. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/5b2d1dc127432336c055e1a7ebf09a30/technologies-generative-ai-intro%402x.png) + +Generative artificial intelligence uses [machine learning](https://developer.apple.com/design/human-interface-guidelines/machine-learning) models to create and transform text, images, and other content. Use it to offer novel, delightful features that help people express themselves creatively, communicate effectively, and complete tasks more easily. For instance, generative AI can enable people to edit text, create imaginative stories and images, or interact with a character in a game that uses AI-generated dialog. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Best-practices) + +**Design your experience responsibly.** Responsible AI is the intentional design and development of AI features that considers their direct and indirect impacts on people, systems, and society. With generative AI, it’s often easy to quickly prototype an exciting new feature for your app, yet challenging to create a robust experience that works in all real-world situations. Unlike classic programming, small changes to inputs (or even the same input, when given multiple times) often produce very different outcomes with generative AI. You also can’t always anticipate what requests people will make and how the AI will respond. Orient your design process around crafting AI experiences that are inclusive, designed with care, and protect privacy. + +**Keep people in control.** While AI can manipulate and create content, respect people’s agency and ensure they remain in charge of decision making and the overall experience. Honor their requests when in scope and the expected output is clear, and handle sensitive content carefully. Give them the ability to dismiss new content they don’t want, and revert or retry content transformations or other actions they don’t agree with. Clearly identify when and where you use AI. + +**Ensure an inclusive experience for all.** AI models learn from data and tend to favor the most common information. This may lead to harmful, unintended biases and stereotypes. Take extra care when designing your AI feature to consider how assumptions and personal attributes might impact the feature you have in mind. For example, if you generate images or descriptions of people, ask people to provide the information needed for the feature to work well rather than solely inferring personal or cultural characteristics. Seek clarity before making assumptions that may lead to common stereotypes, such as about gender identities or relationship types. Test your feature across a diverse set of people to identify and correct stereotypes, and ensure inclusive results. For guidance, see [Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) and [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +**Design engaging and useful generative features.** Generative AI is a powerful tool, but it’s not the right solution for every situation. Offer generative features when and where they provide clear and specific value, like time savings, improved communication, or enhanced creativity. + +**Ensure a great experience even when generative features aren’t available or people opt not to use them.** In some cases, generative AI may be essential to an experience, and there’s no reasonable non-AI substitute. In other cases, AI may play a complementary role that enhances your app’s core functionality, but isn’t critical for people achieving their goals. For example, Genmoji offers a fun way to create new, original emoji, but people can still use regular emoji too. The Apple Intelligence summarization feature makes catching up with notifications faster, but people can still read notifications without it. When possible, consider offering a non-AI fallback so people can always enjoy your app or game. + +## [Transparency](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Transparency) + +**Communicate where your app uses AI.** Letting people know when and where your app uses AI sets expectations and gives people the opportunity to knowingly choose to use an AI-powered feature. Never trick someone into thinking they’re interacting with or viewing content authored by a human if they’re actually interacting with AI. Ensure your approach to disclosure aligns with any regulations in the regions where you offer your app. + +**Set clear expectations about what your AI-powered feature can and can’t do.** Clarifying your experience’s capabilities and limitations helps people establish a mental model of your feature. For example, when you introduce a feature, you might offer a brief tutorial. For open-ended features like a search bar or generation prompt, consider offering curated suggestions that make it easy to get started. If your feature has known limitations, let people know up front, show them how to get good results, and explain why when inferior results occur. For guidance, see [Limitations](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Limitations). + +## [Privacy](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Privacy) + +**Prefer on-device processing.** Depending on your needs, you may be able to get great responses using on-device models, which prevent people’s information from leaving the device. For example, you may choose to use the on-device models available through the Apple Foundation Models framework. On-device models may also respond quicker than server-based models, and are available even when the device is offline. Server-based models are usually good options in situations that need larger, powerful models that require more memory and power than is typically available on a person’s device. Always consider privacy and user experience tradeoffs when selecting a model type. If you’re using server-based processing, process as much information as you can locally first and minimize what’s shared. Make sure people know if their information may be sent to a server, can see what’s being shared, and understand what data may be stored off-device or even used for training. + +**Ask permission before using personal information and usage data.** Some interactions with an AI model may involve sensitive information, like personal details, messages, photos, and feature usage information. After obtaining permission, use the minimum data you need and always offer a clear way to opt out of its use. If you need sensitive data for model improvement or storage, get explicit permission and handle it with care. If you share data with third parties, understand their approach to privacy. Be aware that model outputs can inadvertently contain sensitive information. Note that [apps for kids](https://developer.apple.com/app-store/kids-apps/) have stricter rules and laws around what data you can use. For guidance, see [Requesting permission](https://developer.apple.com/design/human-interface-guidelines/privacy#Requesting-permission). + +**Clearly disclose how your app and its model use and store personal information.** People are more likely to be comfortable sharing data when they understand how it’s used. Empower people to make an informed decision about what data they share with your AI model. When asking for permission to use someone’s information, explain the benefits in a way that’s concise, specific, and easy to understand. Articulate whether your model uses personal information for training and improvement. + +## [Models and datasets](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Models-and-datasets) + +**Thoughtfully evaluate model capabilities.** There are different types of generative models, some of which possess general knowledge, while others are trained for specific tasks. It’s important to understand the capabilities of any model you consider. As early as you can, get a hands-on look at the models and data available to help orient your design. Keep in mind that some model types may be unavailable to people in certain situations due to factors like device compatibility, network access, and battery level. For example, the [Foundation Models](https://developer.apple.com/documentation/FoundationModels) framework requires a compatible device with Apple Intelligence turned on. + +**Be intentional when choosing or creating a dataset.** Whether you’re training a model from scratch or customizing an existing model, the data you choose greatly impacts the model’s behavior. When you teach and evaluate your AI model, choose datasets that include a diverse range of subject matter representations. Learn where your data comes from and how it was gathered. Ensure you have relevant licenses for all data you don’t personally own, and offer appropriate choices when using people’s data. Most datasets gathered from the real world are imperfect, so allow time for testing and evaluation to proactively mitigate bias and misinformation that a model might learn and replicate. + +## [Inputs](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Inputs) + +**Guide people on how to use your generative feature.** Consider how to steer and educate people toward producing great results. One technique is to offer diverse, predefined example inputs that hint at what’s possible for a feature. + +**Raise awareness about and minimize the chance of hallucinations.** When a generative model is unsure how to respond to a request, it may produce content that seems plausible but is made up. These hallucinations can misinform people because the model may convincingly present the information as factual, even when it’s not. Generative models sometimes get details wrong, like dates of important events or information about people, so it’s important to clearly communicate that AI-generated content may contain errors. You can minimize the chance of hallucinations and limit their impact by carefully scoping what you ask a model to generate. Avoid requesting factual information unless you’re confident the model has access to verified and up-to-date information for the task. Avoid using AI-generated content in situations where a possible hallucination could misinform and harm someone. + +**Consider consequences and get permission before performing destructive or potentially problematic tasks.** Before performing a task, consider whether a mistake or the inability to reverse the action might cause more work or stress for people. Avoid automating destructive actions, like deleting photos, and actions that are hard to undo, like making a purchase on a person’s behalf. Generally, ask for confirmation before performing a significant action on someone’s behalf. Keep in mind that certain situations may be prohibited or have extra rules. Review and adhere to model-specific usage policies, as well as government and regulatory AI policy as it applies to each locale in which the generative features will be available. + +## [Outputs](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Outputs) + +**Help people improve requests when blocked or undesirable results occur.** Minimize scoped or blocked output by coaching people how to be more successful next time. For example, if prompted to generate harmful content, Image Playground says that it’s “Unable to use that description.” When possible, consider offering example requests that might lead to better results. + +**Reduce unexpected and harmful outcomes with thoughtful design and thorough testing.** People generally use apps with good intentions, but harmful outcomes can still arise from both accidental and purposeful misuse, and when responding to potentially sensitive topics. It may not be possible to mitigate every harmful scenario, but taking a proactive approach to identify risks, devise policies to address them, and evaluate features can help minimize the chance of misuse and harm. Consider ways people might interact with your feature and test those scenarios. Challenge your policies and expected use cases. See what happens when requests are out-of-scope, unrelated to the app experience you designed, and not well-represented by the model’s training data. Try requests that are poorly phrased, vague, or ambiguous; include personal, sensitive, or controversial topics; and encourage harmful or incorrect results. Use what you learn to improve your model, inform prevention, and respond thoughtfully. + +**Strive to avoid replicating copyrighted content.** Large AI models are trained using vast datasets from the internet and other sources. This means most generative models are familiar with and can unintentionally produce content similar to published work, including copyrighted content. You can reduce the likelihood of copyright infringement by building upon existing models that already protect against this, and by carefully curating inputs. For example, you might let people choose from a set of pre-approved prompts. You could also explicitly tell the model to avoid mimicking certain content or styles. + +**Factor processing time into your design.** _Latency_ is how much time it takes for a model to produce an output. Non-generative models, such as [people tracking in ARKit](https://developer.apple.com/documentation/arkit/capturing-body-motion-in-3d) and the [Vision](https://developer.apple.com/documentation/Vision) machine learning framework, typically have low latency and are suitable to run in real-time on camera feeds. Generative models typically take longer to produce a result, so design a loading experience or generate in the background while a person uses another part of the app. For guidance, see [Loading](https://developer.apple.com/design/human-interface-guidelines/loading). + +**Consider offering alternate versions of results.** Depending on the design of your feature, it might work best to present a single result or multiple meaningfully different results from which people can choose. Offering people a choice can give them a greater sense of control and help bridge the gap between the model’s interpretation and what someone actually wants. For example, Image Playground can generate multiple images that represent a person, allowing someone to pick the one they prefer. For guidance, see [Multiple options](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Multiple-options). + +## [Continuous improvement](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Continuous-improvement) + +**Consider ways to improve your model over time.** You may want to update your model to adapt to people’s behavior, respond to feedback, include new data, and leverage enhanced capabilities. You can make some improvements, such as updating a list of blocked words, frequently and independent of the app development cycle, and you can plan significant improvements and new features around regular app updates. Plan for fine-tuning, retesting, and prompt engineering when updating to a newer, more capable base model. If you train your own model, retrain with additional data and fine-tune to improve performance. Thoroughly test and refine all model updates to identify and correct unexpected behavior. + +**Let people share feedback on outputs.** Feedback can help you identify and respond to unexpected outcomes and new potential issues that arise despite thorough testing. Feedback also gives people a way to celebrate what they like best about your AI experience and report concerns when outputs don’t match their expectations. Establish trust by taking feedback seriously and resolving issues quickly. Always make providing feedback voluntary. Respect people’s time by placing a feedback affordance in a clear location that doesn’t interrupt the experience. Consider offering a quick and easy way to give positive and negative feedback, like simple thumbs-up and thumbs-down buttons. You might also offer a way to share detailed feedback for complicated issues. For guidance, see [Explicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Explicit-feedback) and [Implicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback). + +**Design flexible, adaptable features.** Generative AI is a rapidly advancing technology, and models and their resource needs are constantly evolving. Consider ways your app or game can adapt as capabilities and models improve. For example, you may want to separate your model from your user experience so you can swap out the model for other models over time. Lay a foundation that allows for future adjustments like this, while still offering the same great user experience. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Related) + +[Machine learning](https://developer.apple.com/design/human-interface-guidelines/machine-learning) + +[Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) + +[Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) + +[Privacy](https://developer.apple.com/design/human-interface-guidelines/privacy) + +[Loading](https://developer.apple.com/design/human-interface-guidelines/loading) + +[Acceptable Use Requirements for the Foundation Models Framework](https://developer.apple.com/apple-intelligence/acceptable-use-requirements-for-the-foundation-models-framework) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/6F92E66E-52A5-4289-9F76-A3E6983F9250/10049_wide_250x141_1x.jpg) Explore prompt design & safety for on-device foundation models ](https://developer.apple.com/videos/play/wwdc2025/248) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/51620FBA-75C7-46B5-BCBA-800F38AEE3A5/10048_wide_250x141_1x.jpg) Discover machine learning & AI frameworks on Apple platforms ](https://developer.apple.com/videos/play/wwdc2025/360) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Developer-documentation) + +[Apple Intelligence and machine learning](https://developer.apple.com/documentation/TechnologyOverviews/ai-machine-learning) + +[Foundation Models](https://developer.apple.com/documentation/FoundationModels) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/generative-ai#Change-log) + +Date| Changes +---|--- +June 9, 2025| New page. + diff --git a/skills/hig-technologies/references/healthkit.md b/skills/hig-technologies/references/healthkit.md new file mode 100644 index 00000000..59c315cd --- /dev/null +++ b/skills/hig-technologies/references/healthkit.md @@ -0,0 +1,120 @@ +--- +title: "HealthKit | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/healthkit + +# HealthKit + +HealthKit is the central repository for health and fitness data in iOS, iPadOS, and watchOS. + +![A sketch of the HealthKit icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/1ea6de75ffe8173e0253ce0b4bf27b83/technologies-HealthKit-intro%402x.png) + +When you support HealthKit in your app, you can ask people for permission to access and update their health information. + +Important + +If your app doesn’t provide health and fitness functionality, don’t request access to people’s private health data. + +For example, a nutrition app might ask for permission to retrieve people’s weight and activity data, so it can define calorie consumption goals and make dietary recommendations. In this scenario, the nutrition app could also send data — such as the calories that people log — to HealthKit, which can include the data in its global progress metrics. + +![A screenshot of the Health app's summary screen on iPhone, showing current data for activity, active energy, stair speed, heart rate, resting energy, and stand minutes.](https://docs-assets.developer.apple.com/published/fdb416a7e3e60d832ba22dd317fae712/health-summary%402x.png) + +For developer guidance, see [HealthKit](https://developer.apple.com/documentation/HealthKit). + +## [Privacy protection](https://developer.apple.com/design/human-interface-guidelines/healthkit#Privacy-protection) + +You must request permission to access people’s data, and you must take all necessary steps to protect that data. After you receive permission, it’s essential to maintain people’s trust by clearly showing them how you use their data. For developer guidance, see [Protecting user privacy](https://developer.apple.com/documentation/HealthKit/protecting-user-privacy). + +**Provide a coherent privacy policy.** During the app submission process, you must provide a URL to a clearly stated privacy policy, so that people can view the policy when they click the link in the App Store page for your app. For developer guidance, see [App Information > App Store Connect Help](https://help.apple.com/app-store-connect/#/dev219b53a88). + +**Request access to health data only when you need it.** It makes sense to request access to weight information when people log their weight, for example, but not immediately after your app launches. When your request is clearly related to the current context, you help people understand your app’s intentions. Also, people can change the permissions they grant, so your app needs to make a request every time it needs access. For developer guidance, see [`requestAuthorization(toShare:read:completion:)`](https://developer.apple.com/documentation/HealthKit/HKHealthStore/requestAuthorization\(toShare:read:completion:\)). + +**Clarify your app’s intent by adding descriptive messages to the standard permission screen.** People expect to see the system-provided permission screen when asked to approve access to health data. Write a few succinct sentences that explain why you need the information and how people can benefit from sharing it with your app. Avoid adding custom screens that replicate the standard permission screen’s behavior or content. + +![A screenshot of a Health Access screen on iPhone, which asks for permission for an app to write and read mindful minute data.](https://docs-assets.developer.apple.com/published/68014b16fae04d2ed8dfeecee91a4c39/health-access-requests%402x.png) + +**Manage health data sharing solely through the system’s privacy settings.** People expect to globally manage access to their health information in Settings > Privacy. Don’t confuse people by building additional screens in your app that affect the flow of health data. + +## [Activity rings](https://developer.apple.com/design/human-interface-guidelines/healthkit#Activity-rings) + +You can enhance your app’s health and wellness offerings by displaying the Activity ring element to show people’s progress toward their Move, Exercise, and Stand goals. The Activity app defines the position and color of each ring, so people are familiar with the element and understand what it means. + +![A screenshot of the Activity app's History screen on iPhone, which shows daily activity rings progress for June and part of July.](https://docs-assets.developer.apple.com/published/26eb6fb57c43110b544e51e0760790d5/activity-months%402x.png) + +**Use Activity rings for Move, Exercise, and Stand information only.** Activity rings consistently represent progress in these specific areas. Don’t attempt to replicate or modify Activity rings for other purposes or to display other types of data. Never show Move, Exercise, and Stand progress in another ring-like element. + +**Use Activity rings to show progress for a single person.** Never use Activity rings to represent data for more than one person, and make sure it’s obvious whose progress is shown, such as by using a label, a photo, or an avatar. + +**Don’t use Activity rings for ornamentation.** Activity rings provide information to people; they don’t merely embellish your app’s design. Never display Activity rings in labels or background graphics. + +**Don’t use Activity rings for branding.** Use Activity rings strictly to display Activity progress in your app. Never use Activity rings in your app’s icon or marketing materials. + +**Maintain Activity ring and background colors.** For a consistent user experience, the visual appearance of Activity rings must always be the same, regardless of the context in which they appear. Never change the look of the rings or background by using filters, changing colors, or modifying opacity. Instead, design the surrounding interface to blend with the rings. For example, enclose the rings within a circle. Always scale the rings appropriately so they don’t seem disconnected or out of place. + +**Maintain Activity ring margins.** An Activity ring element must include a minimum outer margin of no less than the distance between rings. Never allow other elements to crop, obstruct, or encroach upon this margin or the rings themselves. To display an Activity ring element within a circle, adjust the corner radius of the enclosing view rather than applying a circular mask. + +**Differentiate other ring-like elements from Activity rings.** Mixing different ring styles can lead to a visually confusing interface. If you must include other rings, use padding, lines, or labels to separate them from Activity rings. Color and scale can also help provide visual separation. + +**Provide app-specific information only in Activity notifications.** The system already delivers Move, Exercise, and Stand progress updates. Don’t repeat this same information, and never show an Activity ring element in your app’s notifications. It’s fine to reference Activity progress in a notification, but do so in a way that’s unique to your app and doesn’t replicate the same information provided by the system. + +For developer guidance, see [`HKActivityRingView`](https://developer.apple.com/documentation/HealthKitUI/HKActivityRingView). + +## [Apple Health icon](https://developer.apple.com/design/human-interface-guidelines/healthkit#Apple-Health-icon) + +The Apple Health icon shows that an app works with HealthKit and the Health app. The following guidelines help you use the icon correctly. To learn how to refer to HealthKit and the Health app in copy and UI text, see [Editorial guidelines](https://developer.apple.com/design/human-interface-guidelines/healthkit#Editorial-guidelines); to learn about using the “Works with Apple Health” badge in your marketing communications, see [Works with Apple Health](https://developer.apple.com/health-fitness/works-with-apple-health/). + +![A screenshot of an onboarding screen for an app named Eating Habits, which displays the Apple Health icon and text that describes how syncing health data from Eating Habits can help people manage their health. At the bottom of the screen is a Sync Health Data button and a Skip for Now button.](https://docs-assets.developer.apple.com/published/50410b9d99b8e796d03d763d8dddc14c/health-icon-onboard-screen%402x.png) + +**Use only the Apple-provided icon.** Don’t create your own Apple Health icon design or attempt to mimic any Apple-provided designs. Download the Apple Health app icon from [Apple Design Resources](https://developer.apple.com/design/resources/#technologies). + +**Display the name _Apple Health_ close to the Apple Health icon.** Displaying both elements near each other reminds people that the icon represents the Health app. + +**Display the Apple Health icon consistently with other health-related app icons.** In a view that contains other app icons, make the Apple Health icon no smaller than other icons. + +**Don’t use the Apple Health icon as a button.** Use the icon only to indicate compatibility with the Health app. + +**Don’t alter the appearance of the Apple Health icon.** Don’t mask the icon to change its corner radius or present it in a circular shape. Don’t add embellishments like borders, color overlays, gradients, shadows, or other visual effects. + +**Maintain a minimum clear space around the Apple Health icon of 1/10 of its height.** Don’t composite the icon onto another graphic element. + +**Don’t use the Apple Health icon within text or as a replacement for the terms _Health_ , _Apple Health_ , or _HealthKit_.** See [Editorial guidelines](https://developer.apple.com/design/human-interface-guidelines/healthkit#Editorial-guidelines) to learn how to properly reference the Health app and HealthKit in text. + +**Don’t display Health app images or screenshots.** Like all Apple images, these designs are copyrighted and can’t appear in your app or marketing materials. You can include an Activity ring element in your app to display Move, Exercise, and Stand progress; for guidance, see [Activity rings](https://developer.apple.com/design/human-interface-guidelines/healthkit#Activity-rings). + +## [Editorial guidelines](https://developer.apple.com/design/human-interface-guidelines/healthkit#Editorial-guidelines) + +**Refer to the Health app as _Apple Health_ or _the Apple Health app_.** In your app and marketing text, using _Apple Health_ adds clarity. + +**Don’t use the term _HealthKit_.** _HealthKit_ is a developer-facing term that names the framework your app uses to access health data. If you need to explain to people how your app works with their data, use the term _the Apple Health app_. For example, you might say that your app “works with the Apple Health app” or “uses data from the Apple Health app.” + +**Use correct capitalization when using the term _Apple Health_.** _Apple Health_ is two words, with an uppercase A and uppercase H, followed by lowercase letters. You can display _Apple Health_ entirely in uppercase only when you need to conform to an established typographic interface style, such as in an app that capitalizes all text. + +**Use the system-provided translation of _Health_ to avoid confusing people.** It’s best to refer to the Apple Health app using the translation that people view on their device. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/healthkit#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or watchOS. Not supported in macOS, tvOS, or visionOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/healthkit#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/healthkit#Related) + +[Works with Apple Health](https://developer.apple.com/health-fitness/works-with-apple-health/) + +[Activity rings](https://developer.apple.com/design/human-interface-guidelines/activity-rings) + +[Apple Design Resources](https://developer.apple.com/design/resources/#technologies) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/healthkit#Developer-documentation) + +[HealthKit](https://developer.apple.com/documentation/HealthKit) + +[Protecting user privacy](https://developer.apple.com/documentation/HealthKit/protecting-user-privacy) — HealthKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/healthkit#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/7DE5718A-6B6C-41A6-A60B-2C9A6D7B7CE1/9855_wide_250x141_1x.jpg) Meet the HealthKit Medications API ](https://developer.apple.com/videos/play/wwdc2025/321) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/12499BF9-8217-4A56-81CA-5E7CB66904DD/9856_wide_250x141_1x.jpg) Track workouts with HealthKit on iOS and iPadOS ](https://developer.apple.com/videos/play/wwdc2025/322) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/A7FCCDAF-8770-4E6C-86A2-56DDB2095E3E/9232_wide_250x141_1x.jpg) Explore wellbeing APIs in HealthKit ](https://developer.apple.com/videos/play/wwdc2024/10109) + diff --git a/skills/hig-technologies/references/homekit.md b/skills/hig-technologies/references/homekit.md new file mode 100644 index 00000000..13cdd82b --- /dev/null +++ b/skills/hig-technologies/references/homekit.md @@ -0,0 +1,343 @@ +--- +title: "HomeKit | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/homekit + +# HomeKit + +HomeKit lets people securely control connected accessories in their homes using Siri or the Home app on iPhone, iPad, Apple Watch, and Mac. + +![A sketch of the HomeKit icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/ebafbd857c1881bf0f090c3592d8a2d6/technologies-HomeKit-intro%402x.png) + +In iOS, the Home app also lets people manage and configure accessories. + +Your iOS, tvOS, or watchOS app can integrate with HomeKit (and by extension the Home app) to provide a custom or accessory-specific experience. For example, you can: + + * Help people set up, name, and organize their accessories + + * Allow fine-grained accessory configuration and control + + * Provide access to custom accessory features + + * Show people how to create powerful, hands-free automations + + * Provide support + + + + +For developer guidance, see [HomeKit](https://developer.apple.com/documentation/HomeKit). If you’re an MFi licensee, visit the [MFi portal](https://mfi.apple.com) for guidance on naming and messaging for accessory packaging. + +## [Terminology and layout](https://developer.apple.com/design/human-interface-guidelines/homekit#Terminology-and-layout) + +HomeKit models the home as a hierarchy of objects and defines a vocabulary of terms that refer to them. The Home app uses the HomeKit object model and terminology to give people intuitive control of accessories by voice, app, and automation. + +It’s crucial for your app to use the terminology and object model that HomeKit defines, so that you can reinforce people’s understanding and make home automation feel approachable. + +In the HomeKit model, the [home](https://developer.apple.com/design/human-interface-guidelines/homekit#Homes) object is the root of a hierarchy that contains all other objects, such as [rooms](https://developer.apple.com/design/human-interface-guidelines/homekit#Rooms), [accessories](https://developer.apple.com/design/human-interface-guidelines/homekit#Accessories-services-and-characteristics), and [zones](https://developer.apple.com/design/human-interface-guidelines/homekit#Zones). When there’s more than one home, each home is the root of a different hierarchy. + +**Acknowledge the hierarchical model that HomeKit uses.** Even if your app doesn’t organize accessories by rooms and zones in its UI, it’s useful to reference the HomeKit model when helping people set up or control their accessories. People need to know where accessories are located so they can use Siri and HomePod to control them by speaking commands like “Siri, turn on the lights upstairs,” or “It’s dark in here.” For more guidance, see [Siri interactions](https://developer.apple.com/design/human-interface-guidelines/homekit#Siri-interactions). + +**Make it easy for people to find an accessory’s related HomeKit details.** If your app’s organization is based on accessories, don’t hide other HomeKit information, such as an accessory’s zone or room, in a hard-to-discover settings screen. Instead, consider making the related HomeKit information easily available in an accessory detail view. + +**Recognize that people can have more than one home.** Even if your app doesn’t support the concept of multiple homes per user, consider providing the relevant home information in an accessory detail view. + +**Don’t present duplicate home settings.** If your app has a different perspective on the organization of a home, don’t confuse people by asking them to set up all or parts of their homes again or by showing a duplicate settings view. Always defer to the settings people made in the Home app and find an intuitive way to present these details in your UI. + +### [Homes](https://developer.apple.com/design/human-interface-guidelines/homekit#Homes) + +HomeKit uses the term _home_ to represent a physical home, office, or other location of relevance to people. One person might have multiple homes. + +### [Rooms](https://developer.apple.com/design/human-interface-guidelines/homekit#Rooms) + +A _room_ represents a physical room in a home. Rooms don’t have attributes like size or location; they’re simply names that have meaning to people, such as _Bedroom_ or _Office_. When people assign accessories to a room, they can use voice commands like “Siri, turn on all the lights except the bedroom,” or “Siri, turn on the kitchen and hallway lights.” + +### [Accessories, services, and characteristics](https://developer.apple.com/design/human-interface-guidelines/homekit#Accessories-services-and-characteristics) + +The term _accessory_ represents a physical, connected home accessory, like a ceiling fan, lamp, lock, or camera. HomeKit uses _category_ to represent a type of accessory, such as thermostat, fan, or light. Typically, an accessory manufacturer assigns each accessory to a category, but your app can help people make this assignment if necessary. For example, a switch that’s connected to a fan or a lamp needs to be assigned to the same category as the accessory it controls. + +A controllable feature of an accessory, such as the switch on a connected light, is known as a _service_. Some accessories offer multiple services. For example, a connected garage door might let people control the light and the door separately, or a connected outlet might support separate control of the top outlet and the bottom outlet. Apps don’t use the word _service_ in the UI; instead, they use names that describe the service, such as _garage door opener_ and _ceiling fan light_. When people use Siri to control the accessories in their homes, they speak the service name, not the accessory name. For more guidance on naming, see [Help people choose useful names](https://developer.apple.com/design/human-interface-guidelines/homekit#Help-people-choose-useful-names). + +A _characteristic_ is a controllable attribute of a service. For example, in a ceiling fan, the fan service might have a speed characteristic and the light service might have a brightness characteristic. Apps don’t use the word _characteristic_ in the UI; instead, they use terms that describe the attribute, such as _speed_ and _brightness_. + +A _service group_ represents a group of accessory services that someone might want to control as a unit. For example, if there’s a floor lamp and two table lamps in one corner of a room, people might assign all three services to a service group named _reading lamps_. Doing so would let people use the _reading lamps_ service group to control these three lights independently of all other lights in the room. + +### [Actions and scenes](https://developer.apple.com/design/human-interface-guidelines/homekit#Actions-and-scenes) + +The term _action_ refers to the changing of a service’s characteristic, such as adjusting the speed of a fan or the brightness of a light. People and automation can initiate actions. + +A _scene_ is a group of actions that control one or more services in one or more accessories. For example, people might create a _Movie Time_ scene that lowers the shades and dims the lights in the living room, or a _Good Morning_ scene that turns on the lights, raises the shades, and starts the coffee maker in the kitchen. + +Tip + +The HomeKit API uses the term _action set_ instead of _scene_. In your app’s UI, always use the term _scene_. + +### [Automations](https://developer.apple.com/design/human-interface-guidelines/homekit#Automations) + + _Automations_ cause accessories to react to certain situations, such as when a person’s location changes, a particular time of day occurs, another accessory turns on or off, or a sensor detects something. For example, an automation could turn on the house lights at sunset or when people arrive home. + +### [Zones](https://developer.apple.com/design/human-interface-guidelines/homekit#Zones) + +A _zone_ represents an area in the home that contains multiple rooms, such as _upstairs_ or _downstairs_. Setting up a zone is optional, but doing so lets people control multiple accessories at one time. For example, assigning all downstairs lights to a zone named _downstairs_ lets people use voice commands like “Siri, turn off all the lights downstairs.” + +## [Setup](https://developer.apple.com/design/human-interface-guidelines/homekit#Setup) + +**Use the system-provided setup flow to give people a familiar experience.** The HomeKit setup flow works more quickly than traditional setup flows because it lets people name accessories, join networks, pair with HomeKit, assign room and service categories, and designate favorites in just a few steps. Using the system-provided setup flow lets you concentrate on promoting the custom functionality that makes your accessory unique. For developer guidance, see [`performAccessorySetup(using:completionHandler:)`](https://developer.apple.com/documentation/HomeKit/HMAccessorySetupManager/performAccessorySetup\(using:completionHandler:\)). + +**Provide context to explain why you need access to people’s Home data.** Create a purpose string with a phrase that describes why you’re asking for permission to access data, such as “Lets you control this accessory with the Apple Home app and Siri across your Apple devices.” + +**Don’t require people to create an account or supply personal information.** Instead, defer to HomeKit for any information you might need. If your app provides additional services that require an account, such as cloud services, make account setup optional and wait until after initial HomeKit setup to offer it. + +**Honor people’s setup choices.** When people choose to use HomeKit to set up your accessory, don’t force them to set up other platforms during the HomeKit setup flow. A cross-platform setup experience prevents people from using the accessory right away and can cause confusion by presenting too many ways to control the accessory. + +**Carefully consider how and when to provide a custom accessory setup experience.** Always begin by presenting the system-provided setup flow. Then, after the accessory’s basic functionality is available, offer a custom post-setup experience that highlights the unique features of your accessory and helps people get the most out of it. For example, a light manufacturer’s app could help people create personalized light scenes in their homes using key colors scanned in from photos in their library. + +### [Help people choose useful names](https://developer.apple.com/design/human-interface-guidelines/homekit#Help-people-choose-useful-names) + +**Suggest service names that suit your accessory.** If your app detects when someone creates a suboptimal name for Siri voice controls, recommend alternatives that you know will work well for most people. Never suggest company names or model numbers for use as service names. + +**Check that the names people provide follow HomeKit naming rules.** If your app lets people rename services, make sure that the new names follow the rules. (The system-provided setup flow automatically checks the original names.) If people enter a name that breaks one or more rules, briefly explain the problem and suggest some alternative names that work. Here are the rules: + + * Use only alphanumeric, space, and apostrophe characters. + + * Start and end with an alphabetic or numeric character. + + * Don’t include emojis. + + + + +| Example service names +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Reading lamp +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| 📚 lamp +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| 2nd garage door +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| #2 garage door + +**Help people avoid creating names that include location information.** Although it’s natural for someone to use “kitchen light” to name a light in the kitchen, including the room name in the service name can lead to unpredictable results when controlling the accessory by voice. Your app can detect service names that duplicate location information and help people fix them. For example, you might present a post-setup experience that removes the room or zone from a service name and encourages people to assign the accessory to that room or zone instead. + +## [Siri interactions](https://developer.apple.com/design/human-interface-guidelines/homekit#Siri-interactions) + +HomeKit supports powerful, hands-free control using voice commands. You can help people use Siri to interact with accessories, services, and zones in their home quickly and efficiently. + +**Present example voice commands to demonstrate using Siri to control accessories during setup.** As soon as people complete the setup of a new accessory, consider using the service name they chose in a few example Siri phrases and encourage people to try them out. + +**After setup, consider teaching people about more complex Siri commands.** People might not be aware of the broad range of natural language phrases they can use with Siri and HomePod to control their accessories. After setup is complete, find useful places throughout your app to help people learn about these types of commands. For example, in a scene detail view, you could tell people, _You can say “Hey Siri, set ‘Movie Time.’”_ + +In addition to recognizing the names of homes, rooms, zones, services, and scenes, Siri can also use information such as accessory category and characteristic to identify a service. For example, when people use terms like _brighter_ or _dim_ , Siri recognizes that they’re referring to a service that has a brightness characteristic, even if they don’t speak the name of the service. + +To illustrate the power and flexibility of Siri commands, here are some examples of the types of phrases that people could use to control their accessories. + +Phrase| Siri understands +---|--- +“Turn on the floor lamp”| Service (_floor lamp_) +“Show me the entryway camera”| Service (_entryway camera_) +“Turn on the light”| Accessory category (_light_) +“Turn off the living room light”| Room (_living room_) +Accessory category (_light_) +“Make the living room a little bit brighter”| Room (_living room_) +Accessory category (implied) +Brightness characteristic (_brighter_) +“Turn on the recessed lights”| Service group (_recessed lights_) +“Turn off the lights upstairs”| Accessory category (_lights_) +Zone (_upstairs_) +“Dim the lights in the bedroom and nursery”| Accessory category (_lights_) +Brightness characteristic (_dim_) +Rooms (_bedroom_ , _nursery_) +“Run Good night”| Scene (_Good night_) +“Is someone in the living room?”| Accessory category (implied) +Occupancy detection characteristic (implied) +“Is my security system tripped?”| Accessory category (_security system_) +“Did I leave the garage door open?”| Accessory category (_garage door_) +Open characteristic (_open_) +“Did I forget to turn off the lights in the Tahoe House?”| Accessory category (_lights_) +Home (_Tahoe House_) +“It’s dark in here”| Current home (_here_) +Current room (via HomePod) +Accessory category (implied) + +**Recommend that people create zones and service groups, if they make sense for your accessory.** If people might benefit from using context-specific voice commands to control your accessory, suggest these types of interactions and help people set them up. For example, if you provide an accessory such as a light, switch, or thermostat, you could suggest setting up a zone named “upstairs” or a service group named “media center” to support commands like “Siri, turn off the upstairs lights,” or “Siri, activate the media center.” + +**Offer shortcuts only for accessory-specific functionality that HomeKit doesn’t support.** HomeKit lets people use ordinary (or natural) language to control accessories without requiring any additional configuration, so you avoid confusing people by offering shortcuts that duplicate HomeKit functionality. Instead, consider offering shortcuts for complementary functionality that your app provides. For example, if people often want to order filters for an air conditioner that you support, you might offer a shortcut like “Order AC filters.” To learn how to provide phrases that people can use for shortcuts, see [Shortcuts and suggestions](https://developer.apple.com/design/human-interface-guidelines/siri#Shortcuts-and-suggestions). + +**If your app supports both HomeKit and shortcuts, help people understand the difference between these types of voice control.** People can get confused if they’re presented with multiple methods of voice control. Be sure you clearly indicate what’s possible with shortcuts, and never encourage people to create a shortcut for a scene or action that HomeKit already supports. + +## [Custom functionality](https://developer.apple.com/design/human-interface-guidelines/homekit#Custom-functionality) + +Your app is a great place to help people appreciate the unique functionality of your accessory. For example, an app for a light that displays different colors could help people create HomeKit scenes using colors imported from their photos. + +**Be clear about what people can do in your app and when they might want to use the Home app.** For example, if your app supports only lights, consider encouraging people to create a “Movie Time” scene that not only dims the lights, but also closes the shades, and turns on the TV to a specific input. To do this, first guide people to set up a scene that includes only your accessory’s actions — in this scenario, dimming the lights. Then, your app can suggest that people open the Home app to add their HomeKit-compatible shades and TV to the scene you helped them create. For guidance on how to refer to the Home app, see [Referring to HomeKit](https://developer.apple.com/design/human-interface-guidelines/homekit#Referring-to-HomeKit). + +**Defer to HomeKit if your database differs from the HomeKit database.** Give people a seamless experience by automatically reflecting changes made in the Home app or in other third-party HomeKit apps. If you must ask people to manage conflicts in your app, present the conflict visually so that they have a clear picture of the choice they need to confirm. For example, if someone changes an accessory’s service name in the Home app, your app can detect this change and could show both names side by side to confirm that the person wants to use the new name in your app, too. + +**Ask permission to update the HomeKit database when people make changes in your app.** You don’t want to surprise people by changing something in the Home app, so it’s essential to get permission or an indication of intent before you write to the database. In particular, never overwrite HomeKit database settings without a person’s explicit direction. + +### [Cameras](https://developer.apple.com/design/human-interface-guidelines/homekit#Cameras) + +Your app can display still images or streaming video from a connected HomeKit IP camera. + +**Don’t block camera images.** It’s fine to supplement the camera’s content with useful features, such as an alert calling attention to potentially interesting activity. However, avoid covering portions of the camera’s images with other content. + +**Show a microphone button only if the camera supports bidirectional audio.** A nonfunctioning microphone button takes up valuable display space in your app and risks confusing people. + +## [Using HomeKit icons](https://developer.apple.com/design/human-interface-guidelines/homekit#Using-HomeKit-icons) + +Use the HomeKit icon in setup or instructional communications related to HomeKit technology. + +![The HomeKit icon.](https://docs-assets.developer.apple.com/published/926a46dc1cdf9647a94303a329c43645/homekit-glyph%402x.png) + +In addition, you can use the Apple Home app icon when referencing the Apple Home app or in a button that opens the Apple Home app [product page](https://itunes.apple.com/us/app/home/id1110145103?mt=8) in the App Store. + +![The Apple Home app icon, which includes a stylized house with a chimney on the right side of its roof, depicted in graduated shades of orange.](https://docs-assets.developer.apple.com/published/2dd7e937870e9cde3c818264d031e15c/homeapp-icon%402x.png) + +**Use only Apple-provided icons.** Don’t create your own HomeKit or Home app icon design or attempt to mimic the Apple-provided designs. Download HomeKit icons in [Resources](https://developer.apple.com/design/resources/). + +### [Styles](https://developer.apple.com/design/human-interface-guidelines/homekit#Styles) + +You have several options for displaying the HomeKit icon. + +#### [Black HomeKit icon](https://developer.apple.com/design/human-interface-guidelines/homekit#Black-HomeKit-icon) + +Use the HomeKit icon on white or light backgrounds when other technology icons appear in black. + +![A black outlined HomeKit icon.](https://docs-assets.developer.apple.com/published/739a8ed96d427f7a1e8eb680feab203c/homekit-black-icon-set%402x.png) + +#### [White HomeKit icon](https://developer.apple.com/design/human-interface-guidelines/homekit#White-HomeKit-icon) + +Use the HomeKit icon on black or dark backgrounds when other technology icons appear in white. + +![A white outlined HomeKit icon.](https://docs-assets.developer.apple.com/published/86f0a2b6f128e579b0b2400f3e8c7fa7/homekit-white-icon-set%402x.png) + +#### [Custom color HomeKit icon](https://developer.apple.com/design/human-interface-guidelines/homekit#Custom-color-HomeKit-icon) + +Use a custom color when other technology icons appear in the same color. + +![A blue outlined HomeKit icon.](https://docs-assets.developer.apple.com/published/f7e6e6aaf077dbcb7cba53cbadf8436d/homekit-custom-color-icon-set%402x.png) + +**Position the HomeKit icon consistently with other technology icons.** When other technology icons are contained within shapes, treat the HomeKit icon in the same manner. + +![An illustration of three app icons listed in a horizontal row. Text above the icons reads 'Integrate with'. The leftmost app icon is the HomeKit icon in a circle, above the text 'Apple HomeKit'. The remaining two app icons contain squares with dashed frames witihn circles, above text that reads 'Technology'.](https://docs-assets.developer.apple.com/published/d4b79f9c55760002e886eb66776c4044/homekit-settings%402x.png) + +**Use the HomeKit icon noninteractively.** Don’t use the icon and the name _HomeKit_ in custom interactive elements or buttons. You can use the Apple Home app icon to open the app’s product page in the App Store. + +![An illustration of an incorrectly used HomeKit icon in a circular button styled with a chrome appearance.](https://docs-assets.developer.apple.com/published/08c6b1888cd04ea864bfe8d037eb1814/homekit-donot1%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of a button incorrectly titled 'HomeKit' with a custom gradient background.](https://docs-assets.developer.apple.com/published/0c8ae4ebd1f0d755d78391a46602eda0/homekit-donot2%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Don’t use the HomeKit icon within text or as a replacement for the word HomeKit.** See [Referring to HomeKit](https://developer.apple.com/design/human-interface-guidelines/homekit#Referring-to-HomeKit) to learn how to properly reference HomeKit in text. + +![The first in a series of images showing examples of the HomeKit icon when used in text. In this example, the icon correctly appears first in the line, and then the text 'Lights set with HomeKit.'](https://docs-assets.developer.apple.com/published/36d82399473bdcb7c28130fd4451d8a2/homekit-lights-right%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![The second in a series of images showing examples of the HomeKit icon when used in text. This example depicts the icon incorrectly positioned after the word 'with' in the text 'Lights set with HomeKit.'](https://docs-assets.developer.apple.com/published/c807ea2f349cf7b4765dbf556583c701/homekit-lights-wrong1%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![The third in a series of images showing examples of the HomeKit icon when used in text. This example depicts the icon incorrectly positioned at the end of the line of text that reads 'Lights set with'.](https://docs-assets.developer.apple.com/published/5b77fd061bc43cba46493fd96a9bae74/homekit-lights-wrong2%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Pair the icon with the name _HomeKit_ correctly.** You can show the name below or beside the icon if other technologies are referenced in this way. Use the same font that’s used on the rest of your layout. For related guidance, see [Referring to HomeKit](https://developer.apple.com/design/human-interface-guidelines/homekit#Referring-to-HomeKit). + +![An illustration of a view containing setup information within an app. The top of the view includes the title 'Setup' above a divider line. Three rows with icons, text, and disclosure buttons for displaying additional information appear below the divider. The first row includes the HomeKit icon followed by the word 'HomeKit'. The other two rows display dashed squares representing other app icons, each followed by the word 'Name'.](https://docs-assets.developer.apple.com/published/e3e956f06b1658b6e2a1776c9015ad66/homekit-setup%402x.png)Using the icon and name in setup or instructional content + +![An illustration of a view containing a grid of four app buttons. The top of the view includes the title 'Apps' above a divider line. Two rows of buttons and labels appear below the divider. The first button in the first row includes the Apple Home app icon, and appears above the text 'Apple Home'. The remaining buttons include dashed squares representing other app icons, and each appears above the text 'App Name'.](https://docs-assets.developer.apple.com/published/2ff6f6ad2861c485ab76b4f2561de95e/homekit-apps%402x.png)Using the icon and name referencing the Apple Home app + +## [Referring to HomeKit](https://developer.apple.com/design/human-interface-guidelines/homekit#Referring-to-HomeKit) + +**Emphasize your app over HomeKit.** Make references to HomeKit or Apple Home less prominent than your app name or main identity. + +**Adhere to Apple’s trademark guidelines.** Apple trademarks can’t appear in your app name or images. In text, use Apple product names exactly as shown on the [Apple Trademark List](https://www.apple.com/legal/intellectual-property/trademark/appletmlist.html). + + * Use Apple product names in singular form only; do not make Apple product names possessive. + + * Don’t translate Apple, Apple Home, HomeKit, or any other Apple trademark. + + * Don’t use category descriptors. For example, say iPad, not tablet. + + * Don’t indicate any kind of sponsorship, partnership, or endorsement from Apple. + + * Attribute Apple, HomeKit, and all other Apple trademarks with the correct credit lines wherever legal information appears within your app. + + * Refer to Apple devices and operating systems only in technical specifications or compatibility descriptions. + + + + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Use HomeKit to turn on your lights from your iPhone or iPad. +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| Use HomeKit to turn on your lights from your iOS devices. + +See [Guidelines for Using Apple Trademarks](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html). + +### [Referencing HomeKit and the Home app](https://developer.apple.com/design/human-interface-guidelines/homekit#Referencing-HomeKit-and-the-Home-app) + +**Use correct capitalization when using the term _HomeKit_.** _HomeKit_ is one word, with an uppercase _H_ and uppercase _K_ , followed by lowercase letters. _Apple Home_ is two words, with an uppercase _A_ and uppercase _H_ , followed by lowercase letters. If your layout displays only all-uppercase designations, _HomeKit_ or _Apple Home_ can be typeset in all uppercase to match the style of the rest of the layout. + +**Don’t use the name _HomeKit_ as a descriptor.** Instead use terms like _works with_ , _use_ , _supports_ , or _compatible_. + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| [Brand] lightbulbs work with HomeKit. +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| HomeKit-enabled thermostat. +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| You can use HomeKit with [App Name]. +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| HomeKit lightbulbs. + +**Don’t suggest that HomeKit is performing an action or function.** + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Back door is unlocked with HomeKit. +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| HomeKit unlocked the back door. + +**Use the name _Apple_ with the name _HomeKit_ , if desired.** + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Compatible with Apple HomeKit. + +**Use the name _HomeKit_ for setup, configuration, and instructions, if desired.** + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Open HomeKit settings. + +**Use the app name _Apple Home_ whenever referring specifically to the app.** On the first mention of the app in body copy, use the complete name _Apple Home_. Subsequent mentions can refer to the Home app. + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Open the Apple Home app. +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| Open the Apple Home app. Your accessory and room will now appear in the Home app. +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| Open Home. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/homekit#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/homekit#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/homekit#Related) + +[Apple Design Resources](https://developer.apple.com/design/resources/) + +[Guidelines for Using Apple Trademarks and Copyrights](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/homekit#Developer-documentation) + +[HomeKit](https://developer.apple.com/documentation/HomeKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/homekit#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/8C81F0E7-2E4C-4F4F-82FE-A9EBC73A913D/5239_wide_250x141_1x.jpg) Add support for Matter in your smart home app ](https://developer.apple.com/videos/play/wwdc2021/10298) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/homekit#Change-log) + +Date| Changes +---|--- +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/icloud.md b/skills/hig-technologies/references/icloud.md new file mode 100644 index 00000000..99e9ad29 --- /dev/null +++ b/skills/hig-technologies/references/icloud.md @@ -0,0 +1,52 @@ +--- +title: "iCloud | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/icloud + +# iCloud + +iCloud is a service that lets people seamlessly access the content they care about — photos, videos, documents, and more — from any device, without performing explicit synchronization. + +![A sketch of the iCloud icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/928d419006d55a9003163836f73f4339/technologies-iCloud-intro%402x.png) + +A fundamental aspect of iCloud is transparency. People don’t need to know where content resides. They can just assume they’re always accessing the latest version. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/icloud#Best-practices) + +**Make it easy to use your app with iCloud.** People turn on iCloud in Settings and expect apps to work with it automatically. If you think people might want to choose whether to use iCloud with your app, show a simple option the first time your app opens that provides a choice between using iCloud for all data or not at all. + +**Avoid asking which documents to keep in iCloud.** Most people expect all of their content to be available in iCloud and don’t want to manage the storage of individual documents. Consider how your app handles and exposes content, and try to perform more file-management tasks automatically. + +**Keep content up to date when possible.** In an app that supports iCloud, it’s best when people always have access to the most recent content. However, you need to balance this experience with respect to device storage and bandwidth constraints. If your app works with very large documents, it may be better to let people control when updated content is downloaded. If your app fits in this category, design a way to indicate that a more recent version of a document is available in iCloud. When a document is updating, provide subtle feedback if the download takes more than a few seconds. + +**Respect iCloud storage space.** iCloud is a finite resource for which people pay. Use iCloud to store information people create and understand, and avoid using it for app resources or content you can regenerate. Even if your app doesn’t implement iCloud support, remember that iCloud backups include the contents of every app’s Documents folder. To avoid using up too much space, be picky about the content you place in the Documents folder. + +**Make sure your app behaves appropriately when iCloud is unavailable.** If someone manually turns off iCloud or turns on Airplane Mode, you don’t need to display an alert notifying them iCloud is unavailable. However, it may still be helpful to unobtrusively let people know that changes they make won’t be available on other devices until they restore iCloud access. + +**Keep app state information in iCloud.** In addition to storing documents and other files, you can use iCloud to store settings and information about the state of your app. For example, a magazine app might store the last page viewed so when the app is opened on another device, someone can continue reading from where they left off. If you use iCloud to store settings, make sure it’s for ones people want applied to all of their devices. For example, some settings might be more useful at work than at home. + +**Warn about the consequences of deleting a document.** When someone deletes a document in an app that supports iCloud, the document is removed from iCloud and all other devices too. Show a warning and ask for confirmation before performing the deletion. + +**Make conflict resolution prompt and easy.** To the extent possible, try to detect and resolve version conflicts automatically. If this can’t be done, display an unobtrusive notification that makes it easy to differentiate and choose between the conflicting versions. Ideally, conflict resolution occurs as early as possible, so time isn’t wasted in the wrong version. + +**Include iCloud content in search results.** People with iCloud accounts assume their content is universally available, and they expect search results to reflect this perspective. + +**For games, consider saving player progress in iCloud.** Although you can implement this functionality yourself, the GameSave framework offers an efficient solution. It synchronizes save data across devices and offers built-in alerts you can use to help players handle syncing issues during offline play or when conflicts arise. Alternatively, you can implement custom UI that uses GameSave data to resolve these situations. For developer guidance, see [GameSave](https://developer.apple.com/documentation/GameSave). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/icloud#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/icloud#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/icloud#Developer-documentation) + +[CloudKit](https://developer.apple.com/documentation/CloudKit) + +[GameSave](https://developer.apple.com/documentation/GameSave) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/icloud#Change-log) + +Date| Changes +---|--- +June 9, 2025| Added guidance for synchronizing game data through iCloud. + diff --git a/skills/hig-technologies/references/id-verifier.md b/skills/hig-technologies/references/id-verifier.md new file mode 100644 index 00000000..a2a7661c --- /dev/null +++ b/skills/hig-technologies/references/id-verifier.md @@ -0,0 +1,73 @@ +--- +title: "ID Verifier | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/id-verifier + +# ID Verifier + +ID Verifier lets your iPhone app read mobile IDs in person without requiring external hardware. + +![A sketch of progressively larger curved lines emerging from the bottom corner of an ID card, suggesting ID Verifier. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8d77246d289837a097f0556d6e7d2c7d/technologies-ID-Verifier-Apps-intro%402x.png) + +Beginning in iOS 17, you can integrate ID Verifier into your app, letting iPhone read ISO18013-5 compliant mobile IDs and helping you support in-person ID verification. For example, personnel at a concert venue can use your app on iPhone to verify customers’ ages. + +Using ID Verifier has advantages for both customers and organizations. + + * Customers only present the minimum data needed to prove their age or identity, without handing over their ID card or showing their device. + + * Apple provides the key components of the certificate issuance, management, and validation process, simplifying app development and enabling a consistent and trusted ID verification experience. + + + + +Depending on the needs of your app, you can use ID Verifier to make the following types of requests: + + * **Display Only request.** Use a Display Only request to display data — such as a person’s name or age alongside their photo portrait — within system-provided UI on the requester’s iPhone, so the requester can visually confirm the person’s identity. When you make a Display Only request, the customer’s data remains within the system-provided UI and isn’t transmitted to your app. For developer guidance, see [`MobileDriversLicenseDisplayRequest`](https://developer.apple.com/documentation/ProximityReader/MobileDriversLicenseDisplayRequest). + + * **Data Transfer request.** Use a Data Transfer request only when you have a legal verification requirement and you need to store or process information like a person’s address or date of birth. You must request an additional entitlement to make a Data Transfer request. To learn more, see [Get started with ID Verifier](https://developer.apple.com/wallet/id-verifier/); for developer guidance, see [`MobileDriversLicenseDataRequest`](https://developer.apple.com/documentation/ProximityReader/MobileDriversLicenseDataRequest) and [`MobileDriversLicenseRawDataRequest`](https://developer.apple.com/documentation/ProximityReader/MobileDriversLicenseRawDataRequest). + + + + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/id-verifier#Best-practices) + +**Ask only for the data you need.** People may lose trust in the experience if you ask for more data than you need to complete the current verification. For example, if you need to ensure that a customer is at least a minimum age, use a request that specifies an age threshold; avoid requesting the customer’s current age or birth date. For developer guidance, see [`ageAtLeast(_:)`](https://developer.apple.com/documentation/ProximityReader/MobileDriversLicenseDataRequest/Element/ageAtLeast\(_:\)). + +**If your app qualifies for Apple Business Register, register for ID Verifier to ensure that people can view essential information about your organization when you make a request.** Registering for ID Verifier with Apple Business Register lets you provide your official organization name and logo for the system to display on customers’ devices as part of the ID verification UI. To learn if your app qualifies and how to register, see [Apple Business Register](https://register.apple.com/services/login?returnTo=/signin/tap-to-present-id-on-iphone). + +**Provide a button that initiates the verification process.** Use a label like Verify Age in a button that performs a simple age check or Verify Identity for a more detailed identity data request. Avoid including a symbol that specifies a particular type of communication, like NFC or QR codes. Never include the Apple logo in any button label. + +Button type| Example usage +---|--- +![An illustration of a Verify Age button.](https://docs-assets.developer.apple.com/published/68f99fdea3def2ba04aee092c3465400/id-verifier-button-age%402x.png)| An app that checks whether people are old enough to attend an event or access a venue, like a concert hall. +![An illustration of a Verify Identity button.](https://docs-assets.developer.apple.com/published/1e827d68149ef111a2ff7ebec21912a0/id-verifier-button-identity%402x.png)| An app that verifies whether specific identity information matches expected values, such as name and birth date when picking up a rental car. + +**In a Display Only request, help the person using your app provide feedback on the visual confirmation they perform.** For example, when the reader displays the customer’s portrait, you might provide buttons labeled Matches Person and Doesn’t Match Person so your app can receive an approved or rejected value as part of the response. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/id-verifier#Platform-considerations) + + _No additional considerations for iOS. Not supported in iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/id-verifier#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/id-verifier#Related) + +[Apple Business Register](https://register.apple.com/services/login?returnTo=/signin/tap-to-present-id-on-iphone) + +[IDs in Wallet](https://learn.wallet.apple/id) + +[Identity verification](https://developer.apple.com/design/human-interface-guidelines/wallet#Identity-verification) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/id-verifier#Developer-documentation) + +[Adopting the Verifier API in your iPhone app](https://developer.apple.com/documentation/ProximityReader/adopting-the-verifier-api-in-your-iphone-app) — ProximityReader + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/id-verifier#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/0F2B5692-7E7D-4716-9E5F-63E4A4FA13ED/8168_wide_250x141_1x.jpg) What’s new in Wallet and Apple Pay ](https://developer.apple.com/videos/play/wwdc2023/10114) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/id-verifier#Change-log) + +Date| Changes +---|--- +September 12, 2023| New page. + diff --git a/skills/hig-technologies/references/imessage-apps-and-stickers.md b/skills/hig-technologies/references/imessage-apps-and-stickers.md new file mode 100644 index 00000000..1a50b0e1 --- /dev/null +++ b/skills/hig-technologies/references/imessage-apps-and-stickers.md @@ -0,0 +1,105 @@ +--- +title: "iMessage apps and stickers | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers + +# iMessage apps and stickers + +An iMessage app can help people share content, collaborate, and even play games with others in a conversation; stickers are images that people can use to decorate a conversation. + +![A sketch of the iMessage App Store icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8a7764e72eeafa784a8f5343e1242096/technologies-iMessage-Apps-intro%402x.png) + +An iMessage app or sticker pack is available within the context of a Messages conversation and also in effects in both Messages and FaceTime. You can create an iMessage app or sticker pack as a standalone app or as an app extension within your iOS or iPadOS app. For developer guidance, see [Messages](https://developer.apple.com/documentation/Messages) and [Adding Sticker packs and iMessage apps to the system Stickers app, Messages camera, and FaceTime](https://developer.apple.com/documentation/Messages/adding-sticker-packs-and-imessage-apps-to-the-system-stickers-app-messages-camera-and-facetime). + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Best-practices) + +**Prefer providing one primary experience in your iMessage app.** People are in a conversational flow when they choose your app, so your functionality or content needs to be easy to understand and immediately available. If you want to provide multiple types of functionality or different collections of content, consider creating a separate iMessage app for each one. + +**Consider surfacing content from your iOS or iPadOS app.** For example, your iMessage app could offer app-specific information that people might want to share — such as a shopping list or a trip itinerary — or support a simple, collaborative task, like deciding where to go for a meal or which movie to watch. + +**Present essential features in the compact view.** People can experience your iMessage app in a compact view that appears below the message transcript, or they can expand the view to occupy most of the window. Make sure the most frequently used items are available in the compact view, reserving additional content and features for the expanded view. + +**In general, let people edit text only in the expanded view.** The compact view occupies roughly the same space as the keyboard. To ensure that the iMessage app’s content remains visible while people edit, display the keyboard in the expanded view. + +**Create stickers that are expressive, inclusive, and versatile.** Whether your stickers are rich, static images or short animations, make sure that each one remains legible against a wide range of backgrounds and when rotated or scaled. You can also use transparency to help people visually integrate a sticker with text, photos, and other stickers. + +**For each sticker, provide a localized alternative description.** VoiceOver can help people use your sticker pack by speaking a sticker’s alternative description. + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Specifications) + +### [Icon sizes](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Icon-sizes) + +The icon for an iMessage app or sticker pack can appear in Messages, the App Store, notifications, and Settings. After people install your iMessage app or sticker pack, its icon also appears in the app drawer in the Messages app. + +You supply a square-cornered icon for each extension you offer, and the system automatically applies a mask that rounds the corners. + +To ensure that your icon looks great in any context and on various devices, create a square-cornered icon in the following sizes: + +Usage| @2x (pixels)| @3x (pixels) +---|---|--- +Messages, notifications| 148x110| - +| 143x100| - +| 120x90| 180x135 +| 64x48| 96x72 +| 54x40| 81x60 +Settings| 58x58| 87x87 +App Store| 1024x1024| 1024x1024 + +### [Sticker sizes](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Sticker-sizes) + +Messages supports small, regular, and large stickers. Pick the size that works best for your content and prepare all of your stickers at that size; don’t mix sizes within a single sticker pack. Messages displays stickers in a grid, organized differently for different sizes. + +![An illustration showing a grid of small stickers in the bottom half of an iPhone screen. Eight stickers are visible in the area, followed by a partial row of four, arranged in three rows.](https://docs-assets.developer.apple.com/published/a64edfeafbb874560b2a72b04505ff43/sticker-sizes-small%402x.png) + +Small + +![An illustration showing a grid of regular stickers in the bottom half of an iPhone screen. Six stickers are visible in the area, in two rows of three.](https://docs-assets.developer.apple.com/published/092a81eb61dbb7310098aecf4c0c73a7/sticker-sizes-regular%402x.png) + +Regular + +![An illustration showing a grid of large stickers in the bottom half of an iPhone screen. Two stickers are fully visible in the area, followed by a partial row of two additional stickers.](https://docs-assets.developer.apple.com/published/7d0d3ead02ab892c2eaa8c575707c3d5/sticker-sizes-large%402x.png) + +Large + +Create your sticker images using the following @3x dimensions for the sticker size you chose. If necessary, the system generates @2x and @1x versions by downscaling the images at runtime. For developer guidance, see [`MSStickerSize`](https://developer.apple.com/documentation/Messages/MSStickerSize). + +Sticker size| @3x dimensions (pixels) +---|--- +Small| 300x300 +Regular| 408x408 +Large| 618x618 + +A sticker file must be 500 KB or smaller in size. For each supported format, the table below provides guidance for using transparency and animation. + +Format| Transparency| Animation +---|---|--- +PNG| 8-bit| No +APNG| 8-bit| Yes +GIF| Single-color| Yes +JPEG| No| No + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Related) + +[iMessage Apps and Stickers](https://developer.apple.com/imessage/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Developer-documentation) + +[Messages](https://developer.apple.com/documentation/Messages) + +[Adding Sticker packs and iMessage apps to the system Stickers app, Messages camera, and FaceTime](https://developer.apple.com/documentation/Messages/adding-sticker-packs-and-imessage-apps-to-the-system-stickers-app-messages-camera-and-facetime) — Messages + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/7/FC4A4C67-CCE9-46D5-9376-D071D53B4FB2/1925_wide_250x141_1x.jpg) Express Yourself! ](https://developer.apple.com/videos/play/wwdc2017/820) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/imessage-apps-and-stickers#Change-log) + +Date| Changes +---|--- +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/in-app-purchase.md b/skills/hig-technologies/references/in-app-purchase.md new file mode 100644 index 00000000..e33da769 --- /dev/null +++ b/skills/hig-technologies/references/in-app-purchase.md @@ -0,0 +1,263 @@ +--- +title: "In-app purchase | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/in-app-purchase + +# In-app purchase + +People can use in-app purchase to pay for virtual goods — like premium content, digital goods, and subscriptions — securely within your app. + +![A sketch of an add button, suggesting the purchase of additional digital assets within an app. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/201d9efc48577c3322506c6fec1d57aa/technologies-IAP-intro%402x.png) + +You can also promote and offer in-app purchases directly through the App Store. For developer guidance, see [In-App Purchase](https://developer.apple.com/documentation/StoreKit/in-app-purchase). + +Tip + +In-app purchase and [Apple Pay](https://developer.apple.com/design/human-interface-guidelines/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. + +Using in-app purchase, there are four types of content you can offer: + + * _Consumable_ content like lives or gems in a game. After purchase, consumable content depletes as people use it, and people can purchase it again. + + * _Non-consumable_ content like premium features in an app. Purchased non-consumable content doesn’t expire. + + * _Auto-renewable subscriptions_ to virtual content, services, and premium features in your app on an ongoing basis. An auto-renewable subscription continues to automatically renew at the end of each subscription period until people choose to cancel it. + + * _Non-renewing subscriptions_ to a service or content that lasts for a limited time, like access to an in-game battle pass. People purchase a non-renewing subscription each time they want to extend their access to the service or content. + + + + +![A screenshot of The Coast game’s in-app purchase store on iPad, featuring a row of five boosts that include lighthouse repairs and a power surge, above a row of five in-game maps with names like World Canals, The Great Lakes, and Famous Bays.](https://docs-assets.developer.apple.com/published/842775b676356f64f170bf778ddcac4f/iap-intro%402x.png) + +For marketing and business guidance, see [In-app purchase](https://developer.apple.com/in-app-purchase/) and [Auto-renewable subscriptions](https://developer.apple.com/app-store/subscriptions/). For information about what you can and can’t sell in your app, including in-app purchase usage requirements and restrictions, see [App Review Guidelines](https://developer.apple.com/app-store/review/guidelines/). + +Note + +For 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](https://developer.apple.com/in-app-purchase/advanced-commerce-api/) for an overview, and see [Advanced Commerce API](https://developer.apple.com/documentation/AdvancedCommerceAPI) for developer guidance. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Best-practices) + +**Let people experience your app before making a purchase.** People may be more inclined to invest in paid items or features after they’ve enjoyed your app and discovered its value. If you offer auto-renewable subscriptions, consider supporting limited free access to your content; for guidance, see [Auto-renewable subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Auto-renewable-subscriptions). + +**Design an integrated shopping experience.** You don’t want people to think they’ve entered a different app when they browse and purchase your digital products. Present products and handle transactions in ways that mirror the style of your app. + +**Use simple, succinct product names and descriptions.** Titles that don’t truncate or wrap and plain, direct language can help people find products quickly. + +**Display the total billing price for each in-app purchase you offer, regardless of type.** People need to know the total billing amount for every purchase they consider. + +**Display your store only when people can make payments.** If someone canʼt make payments — for example, because of parental restrictions — consider hiding your store or displaying UI that explains why the store isnʼt available. For developer guidance, see [`canMakePayments`](https://developer.apple.com/documentation/StoreKit/AppStore/canMakePayments). + +**Use the default confirmation sheet.** When someone initiates an in-app purchase, the system displays a confirmation sheet to help prevent accidental purchases. Don’t modify or replicate this sheet. + +### [Supporting Family Sharing](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Supporting-Family-Sharing) + +People can use Family Sharing to share access to their purchased content — such as auto-renewable subscriptions and non-consumable in-app purchases — with up to five additional family members, across all their Apple devices. To encourage people to take advantage of the Family Sharing support you offer, consider the following guidelines. + +**Prominently mention Family Sharing in places where people learn about the content you offer.** For example, including “Family” or “Shareable” in a subscription or item name and referring to Family Sharing in your sign-up screen can highlight the feature and help people make an informed choice. + +**Help people understand the benefits of Family Sharing and how to participate.** When you turn on Family Sharing, people can receive notifications about the change, depending on their current settings. For example, an existing subscriber whose sharing setting is turned off (the default) receives a notice from Apple that invites them to share their subscription with family members. Similarly, a family member can get a notification about content that’s being shared with them. (To learn more about the types of notifications people can receive, see [Auto-renewable subscriptions](https://developer.apple.com/app-store/subscriptions/).) + +**Aim to customize your in-app messaging so that it makes sense to both purchasers and family members.** For example, when a family member views shared content for the first time, you might welcome them with wording like “Your family subscription includes…”. + +### [Providing help with in-app purchases](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Providing-help-with-in-app-purchases) + +Sometimes, people need help with a purchase or want to request a refund. To help make this experience convenient, you can present custom UI within your app that provides assistance, offers alternative solutions, and helps people initiate the system-provided refund flow. For developer guidance, see [`beginRefundRequest(for:in:)`](https://developer.apple.com/documentation/StoreKit/Transaction/beginRefundRequest\(for:in:\)-65tph); for related guidance specific to auto-renewable subscriptions, see [Helping people manage their subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Helping-people-manage-their-subscriptions). + +**Provide help that customers can view before they request a refund.** In addition to including a link to the system-provided refund flow, your custom purchase-help screen can provide assistance you tailor to your app. For example, your custom screen might help people resolve problems with missing purchases, answer frequently asked questions about the in-app purchases you offer, and give people ways to submit feedback or contact you directly for support. + +![A partial screenshot of an app’s help screen on iPhone. The Back button is in the top-left of the screen. In a list titled ’How can we help?’ there are the following five help items, each of which can open a new screen: Missing a Purchase, Frequently Asked Questions, Request a Refund, Submit Feedback, and Contact Us.](https://docs-assets.developer.apple.com/published/44193c071a05fe28f61658f9e37204f2/custom-purchase-help%402x.png) + +**Use a simple title for the refund action, like “Refund” or “Request a Refund”.** The system-provided refund flow makes it clear that people request a refund from Apple, so there’s no need to reiterate this information. + +**Help people find the problematic purchase.** For each recent purchase you display, include contextual information that helps people identify the one they want. For example, you might display an image of the product — along with its name and description — and list the original purchase date. + +![A partial screenshot of an app’s refund screen titled Request a Refund on iPhone. The Back button in the top-left of the screen is labeled 'Help' to indicate it takes people back to the help screen. In a list titled Purchases, the screen displays the following three recent purchases: Power Surge, Les Cheneaux Islands, and Cape Cod.](https://docs-assets.developer.apple.com/published/3c43b3f13901fd62f0b6e33ef423bccb/custom-refund-request%402x.png) + +**Consider offering alternative solutions.** For example, if the customer didn’t receive the item they purchased, you might offer immediate fulfillment or a conciliatory item. Regardless of the alternatives you offer, make it clear that people can still request a refund. + +**Make it easy for people to request a refund.** Although your purchase-help screen can offer useful information and alternative solutions, make sure this content doesn’t create a barrier to requesting a refund. For example, avoid making people scroll or open another screen to reveal your refund-request button. When people choose your refund-request item, they automatically enter the system-provided refund flow shown below. + +![A screenshot of the system-provided refund-request sheet on iPhone. The title Request Refund appears in the top center and a close button is in the top right. Below the title, the sheet displays the following information about the refund item: an image of a lighthouse, the title Power Surge for The Coast, the cost $2.99, the purchase date June 5, 2023, and the Apple Account chavez four at iCloud dot com. Below the item information, the sheet lists the following five issues to choose from: I didn’t mean to buy this, A child/minor made purchase without permission, My purchase does not work as expected, Purchase not received, and Other. A checkmark appears next to My purchase does not work as expected. Below the list is the statement ’You may lose access to refunded items’ and a Request Refund button at the bottom of the sheet.](https://docs-assets.developer.apple.com/published/b250a6bd0c37753634151f9684b8fb56/system-refund-flow-1%402x.png) + +![A screenshot of the system-provided confirmation sheet on iPhone, which displays a checkmark icon and the title ’Your request has been submitted.’ Below the title, the sheet displays the following text: 'You’ll receive an email at chavez four at iCloud dot com with a status update within 48 hours. To check the status of claims, go to https report a problem dot Apple dot com.' A Done button appears at the bottom of the sheet.](https://docs-assets.developer.apple.com/published/a19a34e3ab18f32175e03f2dd227cd60/system-refund-flow-2%402x.png) + +**Avoid characterizing or providing guidance on Apple’s refund policies.** For example, don’t speculate about whether customers will receive the refund they request. To help people understand the refund-request process, you can provide a link to [Request a refund for apps or content that you bought from Apple](https://support.apple.com/en-us/HT204084). + +## [Auto-renewable subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Auto-renewable-subscriptions) + +**Call attention to subscription benefits during onboarding.** By showing the value of your subscription when people first launch your app, you can educate them on how the app works and help them understand what they’ll gain by subscribing. Include a strong call to action and a clear summary of subscription terms (see [Making signup effortless](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Making-signup-effortless)). For related guidance, see [Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding). + +![A screenshot of the Wave Journal app running on iPhone. The bottom half of the screen includes a highlighted area with the first of five pages that describe the benefits of subscribing, a Try It Free button, and a Sign In button.](https://docs-assets.developer.apple.com/published/84b9d8763a621f9983c223e0a06d8d3d/iphone-onboarding%402x.png) + +**Offer a range of content choices, service levels, and durations.** People appreciate the flexibility to choose the subscription that best meets their needs. + +**Consider letting people try your content for free before signing up.** Limited free access gives people the opportunity to sample your content and encourages people who already engaged with your content to sign up. For example, you might offer a freemium app, a metered paywall, or a free trial. + + * Freemium app + * Metered paywall + * Free trial + + + +![A screenshot of a page titled Upgrade to Pro on a freemium app running on iPhone. The top half of the screen describes pro features and includes a close button in the top right. The bottom half of the screen shows two subscription options: the Annual Plan, which costs $29.99 per year, comes with a 1-week free trial period, and is a savings of 50% over the monthly plan; and a Monthly Plan that costs $4.99 per month. A checkmark appears next to the Annual Plan subscription. The bottom of the screen includes a Try It Free button.](https://docs-assets.developer.apple.com/published/592286b7e427356873de8605db5836f3/freemium-app%402x.png) + +![A screenshot of a metered paywall app running on iPhone that offers free viewing of a limited number of articles per month. The screen includes a message indicating that the reader has reached the free article limit for the month, above a button with the title See Your Options. The bottom of the screen includes an option to sign in as an existing subscriber.](https://docs-assets.developer.apple.com/published/cd8631333afb08ae643a553aa484392d/paywall-meter%402x.png) + +![A screenshot of the Wave Journal app running on iPhone. The bottom half of the screen includes a highlighted Try It Free button.](https://docs-assets.developer.apple.com/published/a66594e715ba9809c02ff2843dbc32d4/iphone-free-trial%402x.png) + +**Prompt people to subscribe at relevant times, like when they near their monthly limit of free content.** Additionally, consider making it easy for people to subscribe at any time by including prompts at relevant points throughout your app. + +**Encourage a new subscription only when someone isn’t already a subscriber.** Otherwise, people may believe their existing subscription has lapsed when that’s not actually the case. If you offer the same subscription options in multiple apps or through your website, provide a sign-in option so people don’t think they have to pay multiple times for the same service. + +### [Making signup effortless](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Making-signup-effortless) + +A simple and informative sign-up experience makes it easy for people to act on their interest in your content, whether they’re in your app or viewing your App Store product page. + +**Provide clear, distinguishable subscription options.** Use short, self-explanatory names that differentiate subscription options from one another, and specify the price and duration for each option. If you offer an introductory price, be sure to list the introductory price, the duration of the offer, and the standard price the customer pays after the offer ends. + +**Simplify initial signup by asking only for necessary information.** A lengthy sign-up process may lower your subscription conversion rate. Defer asking for additional information until after people have signed up. + +**In your tvOS app, help people sign up or authenticate using another device.** Instead of asking people to input information in your tvOS app, send a code to another device where they can enter the information you need. + +**Give people more information in your app’s sign-up screen.** In addition to including links to your Terms of Service and Privacy Policy in your app and App Store metadata, the in-app sign-up screen needs to include: + + * The subscription name, duration, and the content or services provided during each subscription period + + * The billing amount, correctly localized for the territories and currencies where the subscription is available for purchase + + * A way for existing subscribers to sign in or restore purchases + + + + +For example, the Forest Explorer sign-up screen displays billing totals for monthly, biannual, and annual subscriptions in the most prominent positions. In subordinate positions, it shows breakdowns of the biannual and annual prices, so that people can compare the values and make an informed choice. The sign-up screen also contains a button that existing subscribers can use to restore their purchases. + +![A screenshot of the Forest Explorer app running on iPhone. The screenshot displays a forested area as the first of three images in the top half of the screen. Below the image are three buttons with subscription options: Intrepid Pro, which costs $14.99 per month; Intrepid Pro with Ads, which costs $9.99 per month; and Redeem Code.](https://docs-assets.developer.apple.com/published/7a5f5cdc4159bb6dcc1cd7cb56a98267/iphone-upgrade%402x.png) + +**Clearly describe how a free trial works.** It’s particularly important to make sure people know that when the free trial is over, a payment will be automatically initiated for the next subscription period. For example, the Ocean Journal sign-up screen explicitly states both the duration of the free trial and the amount that’s billed when it ends. + +![A screenshot of the Ocean Journal app running on Apple Watch, and displaying a modal view that describes a benefit of subscribing. Below the description area is a Subscribe Now button with subscription terms below it.](https://docs-assets.developer.apple.com/published/8057a7f6c9b89ff6820aea77d919a408/watch-onboarding%402x.png) + +**Include a sign-up opportunity in your app’s settings.** App and account settings are common places for people to look for a way to subscribe. + +### [Supporting offer codes](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Supporting-offer-codes) + +In iOS and iPadOS, subscription offer codes let you use both online and offline channels to give new, existing, and lapsed subscribers free or discounted access to your subscription content. For example, you might provide offer codes through email, give them out at a store or event, or print one on a physical product. + +There are two types of offer codes you can support: + + * A _one-time use code_ is a unique code you generate in App Store Connect. People can redeem a one-time use code through a [redemption URL](https://developer.apple.com/help/app-store-connect/manage-subscriptions/set-up-offer-codes/#distribute-offer-codes) (a shareable link), within your app (when you support redemption), or by entering it in the App Store, where they’re prompted to install your app if they haven’t already. Consider using one-time use codes when your distribution is small or when you need to restrict access to a code. + + * A _custom code_ is a code you create, such as NEWYEAR or SPRINGSALE. People can redeem a custom code through a redemption URL or within your app (when you support redemption). Consider using a custom code when you want to support a large campaign that requires a mass distribution of codes. + + + + +For developer guidance on implementing offer codes, see [Offer codes](https://developer.apple.com/documentation/storekit/implementing-offer-codes-in-your-app) and [Set up offer codes](https://developer.apple.com/help/app-store-connect/manage-subscriptions/set-up-offer-codes). For guidance on other types of offers, see [Providing subscription offers](https://developer.apple.com/app-store/subscriptions/#providing-subscription-offers). + +**Clearly explain offer details.** To help people make an informed decision, provide a straightforward and succinct description of your offer in your marketing materials. + +**Follow guidelines for creating a custom code.** A custom code can contain only alphanumeric ASCII characters. Don’t use special characters, including Chinese and Arabic characters. + +**Tell people how to redeem a custom code.** Because people can’t redeem a custom code by entering it in their App Store account settings, it’s important to let them know that they can redeem it through a redemption URL or within your app. + +**Consider supporting offer redemption within your app.** The system automatically provides screens that present the offer-redemption flow, whether people redeem the offer in your app or in the App Store. When you use StoreKit API to let people redeem offer codes within your app, the only custom UI you need to create is one that initiates the system-provided flow. For developer guidance, see [`presentOfferCodeRedeemSheet(in:)`](https://developer.apple.com/documentation/StoreKit/AppStore/presentOfferCodeRedeemSheet\(in:\)) and [`offerCodeRedemption(isPresented:onCompletion:)`](https://developer.apple.com/documentation/SwiftUI/View/offerCodeRedemption\(isPresented:onCompletion:\)). There are several natural places to provide this custom UI. For example, you could add a “Redeem Code” button to your paywall, onboarding screens, or your app’s settings screen. + +![A screenshot of the Forest Explorer app’s subscription sign-up page on iPhone. The Redeem Code button is highlighted out of the three subscription buttons.](https://docs-assets.developer.apple.com/published/d9787d1349b4d5b6a524d8a5debc4e44/iphone-custom-redeem%402x.png) + +![A screenshot of an app’s subscription settings screen on iPhone. It includes the app name, subscription level, price, and next billing date, above buttons for Manage Subscription, Restore Purchase, and Redeem Code.](https://docs-assets.developer.apple.com/published/dd8be196f4f16567a2db77fcacce2784/subscription-management%402x.png) + +After people tap your custom redeem button, the system automatically provides a series of code-redemption screens like the ones shown below. + +![An illustration representing a code redemption screen on iPhone. The top of the screen contains a large icon area above the label Redeem Code and a text field containing placeholder text that says Enter Code. The bottom of the screen contains a tappable link to view Terms and Conditions.](https://docs-assets.developer.apple.com/published/5804d3dd4239644341f2e78fd38fb62e/system-provided-redemption-1%402x.png) + +![An illustration representing a code redemption screen on iPhone. The top of the screen contains a photo area. A small icon overlaps some of the lower-left corner of the photo area. Below the photo area is the label Offer Name in large text, and below the label is small text that reads '1 month free, then $4.99 per month.' The bottom of the screen contains a Redeem Offer button and a tappable link to view Terms and Conditions.](https://docs-assets.developer.apple.com/published/365222311809b58c9e80d8462f137d1f/system-provided-redemption-3%402x.png) + +**Supply an engaging and informative promotional image.** Creating this optional image can help people understand the value of your content. If you don’t supply a promotional image, the code redemption screens use your app icon by default. To learn more, see [Promoting your in-app purchases](https://developer.apple.com/app-store/promoting-in-app-purchases/). + +**Help people benefit from unlocked content as soon as they complete the redemption flow.** Think about ways to align the post-redemption experience in your app with the subscriber’s new status. For example, you might provide a welcome experience for new subscribers or a brief tour of new features for an existing subscriber who’s unlocked additional functionality. In particular, be prepared to welcome people who subscribe before they open your app for the first time. For example, if you require people to create an account or sign in before they can use your app, make this process as smooth as possible for new subscribers who haven’t experienced it before. + +### [Helping people manage their subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Helping-people-manage-their-subscriptions) + +Supporting subscription management means people can upgrade, downgrade, or cancel a subscription without leaving your app. Offering subscription management within your app also gives you a natural place to provide help for common subscriber issues and present alternative offers for people to consider. + +![A screenshot of an app’s subscription settings screen on iPhone. It includes the app name, subscription level, price, and next billing date, above buttons for Manage Subscription, Restore Purchase, and Redeem Code.](https://docs-assets.developer.apple.com/published/dd8be196f4f16567a2db77fcacce2784/subscription-management%402x.png) + +**Provide summaries of the customer’s subscriptions.** In particular, people appreciate viewing the upcoming renewal date without having to search for it. Consider displaying this information in a settings or account screen, near the subscription-management option. For developer guidance, see [`Product.SubscriptionInfo`](https://developer.apple.com/documentation/StoreKit/Product/SubscriptionInfo). + +**Consider using the system-provided subscription-management UI.** Using StoreKit APIs lets you present a consistent experience that helps people manage or cancel their subscriptions without leaving your app. For developer guidance, see [`showManageSubscriptions(in:)`](https://developer.apple.com/documentation/StoreKit/AppStore/showManageSubscriptions\(in:\)). + +![A screenshot of an app’s subscription management screen on iPhone. It includes the app name, subscription level, price, and next billing date, above a list of subscription options and a Cancel Subscription button.](https://docs-assets.developer.apple.com/published/ea9b497104cc62f2db2bdb539eecca6b/system-cancel-flow-1%402x.png) + +![A screenshot of an app’s subscription management screen on iPhone. An alert in the center of the screen asks for confirmation to cancel the subscription. The alert includes the text: Confirm Cancellation. If you confirm and cancel your subscription now, you can still access it until July 2023. The alert includes Not Now and Confirm buttons.](https://docs-assets.developer.apple.com/published/b9bf428278819948a07d4297ec7f9649/system-cancel-flow-2%402x.png) + +**Consider ways to encourage a subscriber to keep their subscription or resubscribe later.** When you use StoreKit APIs, your app is notified when someone chooses to cancel their subscription. In this scenario, you might want to extend a personalized offer as an alternative to cancellation or invite people to describe their reasons for canceling in an exit survey. In addition to giving you insights into various customer problems, survey feedback can also help inform messaging for retention and win-back strategies. + +![A screenshot of a resubscribe screen in the Math School app running on iPhone. The bottom half of the screen includes the label Resubscribe to Math School in large text, and the first of five pages which describe benefits of resubscribing. Below the page view area is a Resubscribe Now button with a six-month resubscription offer at 50 percent off, and a Sign In button.](https://docs-assets.developer.apple.com/published/72ac419f0368a58ac5f36dba3b3c8a85/promotional-offer%402x.png) + +**Always make it easy for customers to cancel an auto-renewable subscription.** If the manage subscription action is deep within an app — or hard to recognize — subscribers can feel they’re being discouraged or prevented from canceling. + +**Consider creating a branded, contextual experience to complement the system-provided management UI.** Within your custom UI, you might offer a popular premium tier or provide personalized suggestions for alternative plans based on what you know about the customer’s preferences or how they use your app. For example, you can create a promotional offer that provides a discounted price for a specific period of time. You might also consider subscription [offer codes](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Supporting-offer-codes) to help you win back lapsed subscribers and encourage existing subscribers to upgrade. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or visionOS._ + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#watchOS) + +The sign-up screen in your watchOS app needs to display the same set of information about your subscription options that you display in other versions of your app. For the complete list of required items, see [Making signup effortless](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Making-signup-effortless). The following guidelines can help you design a sign-up screen that feels at home on Apple Watch. + +**Clearly describe the differences between versions of your app that run on different devices.** If your watchOS app supports different functionality or provides a subset of the content that’s available on other devices, be sure to clarify these differences in your description. Be straightforward about the advantages of accessing subscription content through your watchOS app without implying that the experience is identical to the ones in other versions of your app. + +![A screenshot of an app running on Apple Watch. The screen includes text that reads: Intrepid Pro. Unlock 90,000 topographic maps, advanced GPS features, and offline access for trail guidance anywhere. A Close button appears in the top-left corner of the screen.](https://docs-assets.developer.apple.com/published/00bc22f23ed8cc2eb6be337decc3af7b/clarify-description-before%402x.png) + +A description that might lead people to expect access to 90,000 maps on their Apple Watch + +![A screenshot of an app running on Apple Watch. The screen includes text that reads: Intrepid Pro. Use advanced GPS features for trail guidance on Apple Watch. Unlock 90,000 topographic maps for use on iPhone and other devices. A Close button appears in the top-left corner of the screen.](https://docs-assets.developer.apple.com/published/ee0a650637153e7fd6506555082cca8c/clarify-description-after%402x.png) + +A description that clarifies how the subscription works on Apple Watch in contrast with other devices + +**Consider using a modal sheet to display the required information.** After people respond to your call to action to learn more about your subscription offers, you can use a modal sheet to present all required items in a single view. Even though people must scroll the view to access all the information, displaying it in a modal sheet helps your app UI remain streamlined and concise. Also, a modal sheet’s default Close button makes it easy for people to return to your free content with one tap. If you create a custom sign-up view instead of using a modal sheet, design a complete, efficient flow and include a Close or Cancel button that lets people return to your free content. + +**Make subscription options easy to compare on a small screen.** People need to understand the terms of each subscription option before they can choose one. Aim to display the duration and discount information for each option in a compact way that’s easy to scan and compare. Here are two ways you might present subscription options in your watchOS app: + + * Display each option in a separate button. Using one button per payment option lets people start the signup process with one tap. In this design, it’s important to lock up each button with its description so that people can see how these elements are related, especially while scrolling. + + * Display a list of options, followed by a button people tap to start the signup process. Using a list to display one option per row gives you a compact design that minimizes scrolling while making subscription choices easy to scan and understand. In this design, the button’s title can update to reflect the chosen option. + + + + +![A screenshot of an app running on Apple Watch. The screen includes two subscription buttons: $4.99 per month and $29.99 per year. A Close button appears in the top-left corner of the screen.](https://docs-assets.developer.apple.com/published/d1beed8e9dddac07a14bd09ed184a984/lock-up-option-information%402x.png) + +One payment option per button + +![A screenshot of an app running on Apple Watch. The screen includes a list of subscription options: $4.99 billed monthly and $29.99 billed yearly. The $29.99 option is selected. A $29.99 per year button appears at the bottom of the screen, and a Close button appears in the top-left corner of the screen.](https://docs-assets.developer.apple.com/published/2c6e9ab3b201604f462d49cbd3473813/list-option-information%402x.png) + +One payment option per list row, followed by a button that updates to display the chosen option + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Related) + +[In-App Purchase](https://developer.apple.com/in-app-purchase/) + +[Offering Subscriptions](https://developer.apple.com/app-store/subscriptions/) + +[App Review Guidelines](https://developer.apple.com/app-store/review/guidelines/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Developer-documentation) + +[In-App Purchase](https://developer.apple.com/documentation/StoreKit/in-app-purchase) — StoreKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/9F28A37E-92AA-46D7-8805-8A7CDE31F9E8/9154_wide_250x141_1x.jpg) What’s new in StoreKit and In-App Purchase ](https://developer.apple.com/videos/play/wwdc2024/10061) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Change-log) + +Date| Changes +---|--- +September 12, 2023| Updated artwork and guidance for redeeming offer codes. +November 3, 2022| Added a guideline for displaying the total billing price for every in-app purchase item and consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/live-photos.md b/skills/hig-technologies/references/live-photos.md new file mode 100644 index 00000000..c10517ea --- /dev/null +++ b/skills/hig-technologies/references/live-photos.md @@ -0,0 +1,54 @@ +--- +title: "Live Photos | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/live-photos + +# Live Photos + +Live Photos lets people capture favorite memories in a sound- and motion-rich interactive experience that adds vitality to traditional still photos. + +![A sketch of the Live Photos icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/dc6a4a0eb43d1336511cf15379c03a04/technologies-Live-Photos-intro%402x.png) + +When Live Photos is available, the Camera app captures additional content — including audio and extra frames — before and after people take a photo. People press a Live Photo to see it spring to life. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/live-photos#Best-practices) + +**Apply adjustments to all frames.** If your app lets people apply effects or adjustments to a Live Photo, make sure those changes are applied to the entire photo. If you don’t support this, give people the option of converting it to a still photo. + +**Keep Live Photo content intact.** It’s important for people to experience Live Photos in a consistent way that uses the same visual treatment and interaction model across all apps. Don’t disassemble a Live Photo and present its frames or audio separately. + +**Implement a great photo sharing experience.** If your app supports photo sharing, let people preview the entire contents of Live Photos before deciding to share. Always offer the option to share Live Photos as traditional photos. + +**Clearly indicate when a Live Photo is downloading and when the photo is playable.** Show a progress indicator during the download process and provide some indication when the download is complete. + +**Display Live Photos as traditional photos in environments that don’t support Live Photos.** Don’t attempt to replicate the Live Photos experience provided in a supported environment. Instead, show a traditional, still representation of the photo. + +**Make Live Photos easily distinguishable from still photos.** The best way to identify a Live Photo is through a hint of movement. Because there are no built-in Live Photo motion effects, like the one that appears as you swipe through photos in the full-screen browser of Photos app, you need to design and implement custom motion effects. + +In cases where movement isn’t possible, show a system-provided badge above the photo, either with or without text. Never include a playback button that a viewer can interpret as a video playback button. + +![A nighttime photo of an alpine lake with a system-provided Live Photo badge with the text Live in the upper left corner.](https://docs-assets.developer.apple.com/published/a87d82a66bbb1352833d3bf3deb1e325/live-photo-badge-with-text%402x.png) + +![A nighttime photo of an alpine lake with a system-provided Live Photo badge without text in the upper left corner.](https://docs-assets.developer.apple.com/published/912dc316a86639661c2f1758145e55db/live-photo-badge%402x.png) + +**Keep badge placement consistent.** If you show a badge, put it in the same location on every photo. Typically, a badge looks best in a corner of a photo. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/live-photos#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or tvOS. Not supported in watchOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/live-photos#visionOS) + +In visionOS, people can view a Live Photo, but they can’t capture one. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/live-photos#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/live-photos#Developer-documentation) + +[`PHLivePhoto`](https://developer.apple.com/documentation/Photos/PHLivePhoto) — PhotoKit + +[LivePhotosKit JS](https://developer.apple.com/documentation/LivePhotosKitJS) — LivePhotosKit JS + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/live-photos#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/80B5C413-F0CF-44C1-9EE1-7BBC8C8978F0/4937_wide_250x141_1x.jpg) What’s new in camera capture ](https://developer.apple.com/videos/play/wwdc2021/10047) + diff --git a/skills/hig-technologies/references/mac-catalyst.md b/skills/hig-technologies/references/mac-catalyst.md new file mode 100644 index 00000000..2692d814 --- /dev/null +++ b/skills/hig-technologies/references/mac-catalyst.md @@ -0,0 +1,216 @@ +--- +title: "Mac Catalyst | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/mac-catalyst + +# Mac Catalyst + +When you use Mac Catalyst to create a Mac version of your iPad app, you give people the opportunity to enjoy the experience in a new environment. + +![A sketch of an iPad overlapping a Mac, suggesting an iPad app running on Mac. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/b26e178c0943cda75bc8463228e18dd1/technologies-Mac-Catalyst-intro%402x.png) + +## [Before you start](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Before-you-start) + +Many iPad apps are great candidates for creating a Mac app built with Mac Catalyst. This is especially true for apps that already work well on iPad and support key iPad features, such as: + +**Drag and drop.** When you support drag and drop in your iPad app, you also get support for drag and drop in the Mac version. + +**Keyboard navigation and shortcuts.** Even though a physical keyboard may not always be available on iPad, iPad users appreciate using the keyboard to navigate and keyboard shortcuts to streamline their interactions. On the Mac, people expect apps to offer both keyboard navigation and shortcuts. + +**Multitasking.** Apps that do a good job scaling the interface to support Split View, Slide Over, and Picture in Picture lay the necessary groundwork to support the extensive window resizability that Mac users expect. + +**Multiple windows**. By supporting multiple scenes on iPad, you also get support for multiple windows in the macOS version of your app. + +Although great iPad apps can provide a solid foundation for creating a Mac app built with Mac Catalyst, some apps rely on frameworks or features that don’t exist on a Mac. For example, if the essential features of your experience require capabilities like gyroscope, accelerometer, or rear camera, frameworks like HealthKit or ARKit, or if the primary function you offer is something like marking, handwriting, or navigation, your app might not be suitable for the Mac. + +Creating a Mac version of your iPad app with Mac Catalyst gives the app automatic support for fundamental macOS features such as: + + * Pointer interactions and keyboard-based focus and navigation + + * Window management + + * Toolbars + + * Rich text interaction, including copy and paste as well as contextual menus for editing + + * File management + + * Menu bar menus + + * App-specific settings in the system-provided Settings app + + + + +System-provided UI elements take on a more Mac-like appearance, too; for example: + + * Split view + + * File browser + + * Activity view + + * Form sheet + + * Contextual actions + + * Color picker + + + + +To learn more about the characteristics that distinguish the Mac experience, see [Designing for macOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos). For developer guidance, see [Mac Catalyst](https://developer.apple.com/documentation/UIKit/mac-catalyst). + +Developer note + +To 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](https://developer.apple.com/documentation/UIKit/uikit-catalog-creating-and-customizing-views-and-controls) and build the macOS target. + +## [Choose an idiom](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Choose-an-idiom) + +When you first create your Mac app using Mac Catalyst, Xcode defaults to the “Scale Interface to Match iPad” setting, or _iPad idiom_. With this setting, the system ensures that your Mac app appears consistent with the macOS display environment without requiring significant changes to the app’s layout. However, text and graphics may appear slightly less detailed because iPadOS views and text scale down to 77% in macOS when you use the iPad idiom. For example, the system scales text that uses the iPadOS baseline font size of 17pt down to 13pt in macOS. + +When your app feels at home on the Mac using the iPad idiom, consider switching to the _Mac idiom_. With this setting, text and artwork render in more detail, some interface elements and views take on an even more Mac-like appearance, and graphics-intensive apps may see improved performance and lower power consumption. + +You’re most likely to benefit from the Mac idiom if your app displays a lot of text, detailed artwork, or animations, but choosing this idiom can also mean that you need to spend additional time updating your Mac app’s layout, text, and images. + +**When you adopt the Mac idiom, thoroughly audit your app’s layout, and plan to make changes to it.** To help with this effort, consider using a separate asset catalog to contain your Mac app’s assets instead of reusing the asset catalog that contains your iPad app’s assets. + +**Adjust font sizes as needed.** With the Mac idiom, text renders at 100% of its configured size, which can appear too large without adjustment. When possible, use text styles and avoid fixed font sizes. + +**Make sure views and images look good in the Mac version of your app.** With the Mac idiom, iPadOS views render at 100% of their size, making them appear more detailed. To help you visualize the difference, consider the two depictions of an image asset shown below. One version illustrates how the asset appears when you use the iPad idiom, and the other version shows how the asset appears when you adopt the Mac idiom. Both depictions are zoomed in to show how the image renders with more details when you use the Mac idiom. + + * iPad idiom + * Mac idiom + + + +![Zoomed icon for the California Academy of Sciences point-of-interest in Maps to show how the system renders it with less details if you choose the iPad idiom.](https://docs-assets.developer.apple.com/published/584dcc4acfee462c4e401bf375efeab0/ipad-idiom%402x.png) + +![Zoomed icon for the California Academy of Sciences point-of-interest in Maps to show how the system renders it with more details if you choose the Mac idiom.](https://docs-assets.developer.apple.com/published/7467ee8fcd5eae619d2fc538dc73141f/mac-idiom%402x.png) + +Developer note + +When 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](https://developer.apple.com/documentation/UIKit/choosing-a-user-interface-idiom-for-your-mac-app). + +**Limit your appearance customizations to standard macOS appearance customizations that are the same or similar to those available in iPadOS.** Not all appearance customizations available to iPadOS controls are available to macOS controls. + +## [Integrate the Mac experience](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Integrate-the-Mac-experience) + +When you use Mac Catalyst to create a Mac version of your iPad app, you need to ensure that your Mac app gives people a rich Mac experience. Regardless of the idiom you choose, it’s essential to go beyond simply displaying your iPadOS layout in a macOS window. + +iPadOS and macOS each define patterns and conventions that are rooted in the different ways people use their devices. Before you dive in and update specific views and controls, become familiar with the main differences between the platforms so you can create a great Mac app. + +### [Navigation](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Navigation) + +Many iPad and Mac apps organize data in similar ways, but they use different controls and visual indicators to help people understand and navigate through the data. + +Typically, iPad apps use the following components to organize their content and features: + + * [Split views](https://developer.apple.com/design/human-interface-guidelines/split-views). A split view supports hierarchical navigation, which consists of a two- or three-column interface that shows a primary column, an optional supplementary column, and a secondary pane of content. Frequently, apps use the primary column to create a sidebar-based interface where changes in the sidebar drive changes in the optional supplementary column, which then affect the content in the content pane. + + * [Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars). A tab bar supports flat navigation by displaying top-level categories in a persistent bar at the bottom of the screen. + + * [Page controls](https://developer.apple.com/design/human-interface-guidelines/page-controls). A page control displays dots at the bottom of the screen that indicate the position of the current page in a flat list of pages. + + + + +If you use a tab bar in your iPad app, consider using a split view with a sidebar or a segmented control. Both items are similar to macOS navigation conventions. To choose between a split view or a segmented control, consider the following: + + * A split view with a sidebar displays a list of top-level items, each of which can disclose a list of child items. Using a sidebar streamlines navigation, because each tab’s contents are available within the sidebar. By using a sidebar on both iPad and Mac, you create a consistent layout that makes it easy for iPad users to start using the Mac version of your app. + + * A segmented control and a tab bar both accommodate similar interactions, such as mutually exclusive selection. In general, using a split view instead of a tab bar works better than using a segmented control. However, a segmented control can work well on the Mac if your app uses a flat navigation hierarchy. + + + + +**Make sure people retain access to important tab-bar items in the Mac version of your app.** Regardless of whether you use a split view or a segmented control instead of a tab bar in your iPad app, be sure to give people quick access to top-level items by listing them in the macOS View menu. + +**Offer multiple ways to move between pages.** Mac users — especially those who interact using a pointing device or only the keyboard — appreciate Next and Previous buttons in addition to iPad or trackpad gestures that let them swipe between pages. + +### [Inputs](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Inputs) + +Although both iPad and Mac accept user input from a range of devices — such as keyboard, mouse, and trackpad — touch interactions are the basis for iPadOS conventions. In contrast, keyboard and mouse interactions inform most macOS conventions. + +Most iPadOS gestures convert automatically when you create your Mac app using Mac Catalyst; for example: + +iPadOS gesture…| Translates to mouse interaction +---|--- +Tap| Left or right click +Touch and hold| Click and hold +Pan| Left click and drag + +iPadOS gesture…| Translates to trackpad gesture +---|--- +Tap| Click +Touch and hold| Click and hold +Pan| Click and drag +Pinch| Pinch +Rotate| Rotate + +Developer note + +The system sends the two touches in the pinch and rotate gestures to the view under the pointer, not the view under each touch. + +### [App icons](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#App-icons) + +**Create a macOS version of your app icon.** Great macOS app icons showcase the lifelike rendering style that people expect in macOS while maintaining a harmonious experience across all platforms. + +### [Layout](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Layout) + +To take advantage of the wider Mac screen in ways that give Mac users a great experience, consider updating your layout in the following ways: + + * Divide a single column of content and actions into multiple columns. + + * Use the regular-width and regular-height size classes, and consider reflowing elements in the content area to a side-by-side arrangement as people resize the window. + + * Present an inspector UI next to the main content instead of using a popover. + + + + +**Consider moving controls from the main UI of your iPad app to your Mac app’s toolbar.** Be sure to list the commands associated with these controls in the menus of your Mac app’s menu bar. + +**As much as possible, adopt a top-down flow.** Mac apps place the most important actions and content near the top of the window. If your iPad app provides controls in a toolbar, put these controls in the window toolbar of the macOS version of your app. + +**Relocate buttons from the side and bottom edges of the screen.** On iPad, placing buttons on these screen edges can help people reach them, but on a Mac, this ergonomic consideration doesn’t apply. You may want to relocate these controls to other areas or put them in the toolbar of your macOS window. + +### [Menus](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Menus) + +Mac users are familiar with the persistent menu bar and expect to find all of an app’s commands in it. In contrast, iPadOS doesn’t have a persistent menu bar, and iPad users expect to find app commands within the app’s UI or in the shortcut interface that displays when they hold the Command key on a connected keyboard. + +Developer note + +To support keyboard shortcuts for menu commands, use [`UIKeyCommand`](https://developer.apple.com/documentation/UIKit/UIKeyCommand). For developer guidance, see [Adding menus and shortcuts to the menu bar and user interface](https://developer.apple.com/documentation/UIKit/adding-menus-and-shortcuts-to-the-menu-bar-and-user-interface). + +If you provide [pop-up buttons](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons) or [pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons) that reveal a menu in your iPad app, the menu automatically takes on a macOS appearance in the Mac app you create with Mac Catalyst. + +Developer note + +To add and remove custom app menus, use [`UIMenuBuilder`](https://developer.apple.com/documentation/UIKit/UIMenuBuilder) and add menu items that represent your iPad app’s commands as menu items with [`UICommand`](https://developer.apple.com/documentation/UIKit/UICommand). + +The system automatically converts the context menus in your iPad app to context menus in the macOS version of your app. As you create the Mac version of your app, consider looking for additional places to support context menus. Mac users tend to expect every object in your app to offer a context menu of relevant actions. Note that on a Mac, a context menu is sometimes called a _contextual_ menu. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Platform-considerations) + + _No additional considerations for iPadOS or macOS. Not supported in iOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Related) + +[Designing for macOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Developer-documentation) + +[Mac Catalyst](https://developer.apple.com/documentation/UIKit/mac-catalyst) — UIKit + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/C0F7535C-FB17-48D8-8530-F959A9471DCE/3273_wide_250x141_1x.jpg) Designing iPad Apps for Mac ](https://developer.apple.com/videos/play/wwdc2019/809) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/mac-catalyst#Change-log) + +Date| Changes +---|--- +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/machine-learning.md b/skills/hig-technologies/references/machine-learning.md new file mode 100644 index 00000000..8ac9bacc --- /dev/null +++ b/skills/hig-technologies/references/machine-learning.md @@ -0,0 +1,394 @@ +--- +title: "Machine learning | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/machine-learning + +# Machine learning + +Machine learning enables apps and games to learn from data and usage patterns, letting you improve existing experiences and create engaging new ones. + +![A sketch of sparkly stars, suggesting intelligence. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/6fe06d9e174eb8a410485291f18f3428/technologies-machine-learning-intro%402x.png) + +In addition to providing familiar features like image recognition and content recommendations, your app can use machine learning to forge deep connections with people and help them accomplish more with less effort. + +For related guidance on how to use machine learning models to enable intelligent content creation experiences, see [Generative AI](https://developer.apple.com/design/human-interface-guidelines/generative-ai). + +## [Planning your design](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Planning-your-design) + +Machine learning apps use _models_ to perform tasks like recognizing images or finding relationships among numerical data. A great machine learning app depends on well-designed models as much as it depends on a well-designed UI and user experience. For insight into the process of designing models, see [Create ML](https://developer.apple.com/documentation/CreateML). + +As you design your models, keep the intended experience of your app in mind. It can take a long time to adjust the behavior of models, so be prepared to change the way you use data and metrics if the app experience needs to change. + +Designing the UI and user experience of a machine learning app can be uniquely challenging. Because a machine learning app bases its behavior on the data it receives — reacting to changing information and conditions — you can’t design specific reactions to a static set of scenarios. Instead, you design the experience by teaching the app how to interpret data and react accordingly. + +To help you meet this challenge, first consider the role that machine learning plays in your app. Defining the [role](https://developer.apple.com/design/human-interface-guidelines/machine-learning#The-role-of-machine-learning-in-your-app) of machine learning in your app can help you discover areas in which you can explore the ways machine learning can affect the experience your app provides. + +Use the machine learning role you identify to help you define ways your app can receive and display data. There are several patterns — grouped into _inputs_ and _outputs_ — that provide guidance in areas such as getting feedback, displaying data, handling mistakes, and supporting corrections. Use the guidance in these patterns to help you integrate machine learning into your app in ways that people appreciate. + +## [The role of machine learning in your app](https://developer.apple.com/design/human-interface-guidelines/machine-learning#The-role-of-machine-learning-in-your-app) + +Machine learning systems vary widely, and the ways an app can use machine learning vary widely, too. As you approach the design of your app, think about how its features use machine learning in each of the following areas. + +### [Critical or complementary](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Critical-or-complementary) + +If an app can still work without the feature that machine learning supports, machine learning is complementary to the app; otherwise, it’s a critical dependency. For example: + + * The keyboard uses machine learning to provide QuickType suggestions. Because the keyboard still works without these suggestions, machine learning plays a complementary role in the app. + + * Face ID relies on machine learning to perform accurate face recognition. Without machine learning, Face ID would not work. + + + + +In general, the more critical an app feature is, the more people need accurate and reliable results. On the other hand, if a complementary feature delivers results that aren’t always of the highest quality, people might be more forgiving. + +### [Private or public](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Private-or-public) + +Machine learning results depend on data. To make good design decisions, you need to know as much as possible about the types of data your app feature needs. In general, the more sensitive the data, the more serious the consequences of inaccurate or unreliable results. For example: + + * If a health app misinterprets data and incorrectly recommends a visit to the doctor, people are likely to experience anxiety and may lose trust in the app. + + * If a music app misinterprets data and recommends an artist that people don’t like, they’re likely to view the result as an inconsequential mistake. + + + + +As with critical app features, features that use sensitive data must prioritize accuracy and reliability. Regardless of the sensitivity of the data, all apps must protect user privacy at all times. + +### [Proactive or reactive](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Proactive-or-reactive) + +A _proactive_ app feature provides results without people requesting it to do so. Proactive features can prompt new tasks and interactions by providing unexpected, sometimes serendipitous results. In contrast, a _reactive_ app feature provides results when people ask for them or when they take certain actions. Reactive features typically help people as they perform their current task. For example: + + * QuickType suggests words in reaction to what people type. + + * Siri Suggestions can proactively suggest a shortcut based on people’s recent routines. + + + + +Because people don’t ask for the results that a proactive feature provides, they may have less tolerance for low-quality information. To reduce the possibility that people will find proactive results intrusive or irrelevant, you may need to use additional data for the feature. + +### [Visible or invisible](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Visible-or-invisible) + +Apps may use machine learning to support visible or invisible features. People are usually aware of visible app features because such features tend to offer suggestions or choices that people view and interact with. For example, a visible keyboard feature tries to guess the word that people are typing and presents the most likely words in a list from which people choose. + +As the name suggests, an invisible feature provides results that aren’t obvious to people. For example, the keyboard learns how people type over time so it can optimize the tap area for each key and help them make fewer typing mistakes. Because this app feature improves the typing experience without requiring people to make choices, many people aren’t aware that the feature exists. + +People’s impression of the reliability of results can differ depending on whether a feature is visible or invisible. With a visible feature, people form an opinion about the feature’s reliability as they choose from its results. It’s harder for an invisible feature to communicate its reliability — and potentially receive feedback — because people may not be aware of the feature at all. + +### [Dynamic or static](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Dynamic-or-static) + +All machine learning models can improve, but some improve dynamically, as people interact with the app feature, and others improve offline and affect the feature only when the app updates. For example: + + * Face ID improves dynamically as people’s faces gradually change over time. + + * Photos improves its object recognition capabilities with every new iOS release. + + + + +In addition to the frequency of app updates, static or dynamic improvements can affect other parts of the user experience, too. For example, dynamic features often incorporate forms of [calibration](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Calibration) and feedback (either [implicit](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback) or [explicit](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Explicit-feedback)), whereas static features might not. + +## [Explicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Explicit-feedback) + +Explicit feedback provides actionable information your app can use to improve the content and experience it presents to people. Unlike [implicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback) — which is information an app gleans from user actions — explicit feedback is information people provide in response to a specific request from the app. + +![An illustration of a menu above a screen representing presented content on iPhone. The menu includes a variety of options for interacting with the content on screen, including an option to 'Love' the presented content, and an option to 'Suggest Less Like This.'](https://docs-assets.developer.apple.com/published/0e334bc6d525d9f3f7c67feda7a7d6a3/machine-learning-explicit-feedback%402x.png) + +_Favoriting_ — marking an item for quick access in the future — and _social feedback_ — expressing emotions towards others — are common user interactions that seem like mechanisms that supply explicit feedback. However, these tools actually provide implicit feedback because they don’t support app-specific requests. People use favoriting and social feedback to accomplish their own goals and apps can gather implicit feedback from these interactions. + +**Request explicit feedback only when necessary.** People must take action to provide explicit feedback, so it’s best to avoid requesting it if possible. Instead, consider using implicit feedback to learn how people interact with your app without asking them to do extra work. + +**Always make providing explicit feedback a voluntary task.** You want to communicate that explicit feedback can help improve the experience without making people feel that providing it is mandatory. + +**Use simple, direct language to describe each explicit feedback option and its consequences.** Avoid using imprecise terms such as _dislike_ because such terms don’t convey consequences and can be hard to translate. Instead, describe each option in a way that helps people understand what happens when they choose the option, such as: + + * Suggest less pop music + + * Suggest more thrillers + + * Mute politics for a week + + + + +**Add icons to an option description if it helps people understand it.** Icons can help clarify or emphasize part of an option description. Avoid using an icon by itself, because it might not be clear enough to communicate granularity or consequences. + +**Consider offering multiple options when requesting explicit feedback.** Providing [multiple options](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Multiple-options) can give people a sense of control and help them identify unwanted suggestions and remove them from your app. To help people provide feedback, consider offering options that become progressively more specific so that it’s easy for people to clarify their response. + +**Act immediately when you receive explicit feedback and persist the resulting changes.** For example, if people identify content they don’t want to see, that the content instantly disappears from their view and doesn’t appear elsewhere in your app. When you react immediately to feedback and show that your app remembers it, you build people’s trust in the value of providing it. + +**Consider using explicit feedback to help improve when and where you show results.** For example, people might like a result, but they may not want to see it at certain times or in certain contexts. Explicit feedback on when and where to show results can help you fine-tune the experience people have in your app. + +## [Implicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback) + +Implicit feedback is information that arises as people interact with your app’s features. Unlike the specific responses you get from [explicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Explicit-feedback), implicit feedback gives you a wide range of information about user behavior and preferences. Although incorporating implicit feedback isn’t required for a great machine learning app, the feedback can help you improve your app’s user experience without asking people to do any extra work. + +![A screenshot of a Workout app screen on Apple Watch. The screen includes text that reads 'It looks like you're working out', above buttons in a scrolling list. The two visible buttons are titled 'Record Outdoor Run' and 'Record Indoor Run'.](https://docs-assets.developer.apple.com/published/68449e74388866bc399481c1edf3c285/machine-learning-implicit-feedback%402x.png) + +**Always secure people’s information.** Implicit feedback can gather potentially sensitive user information, so you must be particularly careful to maintain strict controls on user privacy. + +**Help people control their information.** As an app developer, you know that the more you understand about the behavior of your users — both within your app and in other apps — the more you can improve the experience your app provides. Although most people understand the benefits of making their information available to multiple apps, they may still be surprised when things they do in one app affect experiences they have in a different app. Worse, people may assume that apps are sharing their private information, which can cause them to lose trust in the apps. It’s important to tell people how your app gets and shares their information and to give people ways to restrict the flow of their information. + +**Don’t let implicit feedback decrease people’s opportunities to explore.** Implicit feedback tends to reinforce people’s behavior, which can improve the user experience in the short term, but may worsen it in the long term. For example, it might seem like a good idea to give people a set of suggestions that matches all the things they’re interested in now, but doing so doesn’t encourage them to explore new things. + +**When possible, use multiple feedback signals to improve suggestions and mitigate mistakes.** Implicit feedback is indirect, so it can be difficult to discern a person’s actual intent in the information you gather. For example, if someone views a photo, shares it in a message, and adds it to a shared album, it doesn’t necessarily mean they have positive feelings about the photo. Incorporate implicit feedback from multiple sources and interactions to help you avoid misinterpreting people’s intentions. + +**Consider withholding private or sensitive suggestions.** People often share their accounts and devices with others, or switch from using a personal device to a communal one. If your app receives implicit feedback related to private or sensitive topics, avoid offering recommendations based on that feedback. + +**Prioritize recent feedback.** People’s tastes can change frequently, so base your recommendations on recent implicit feedback. For example, Face ID prioritizes recent facial input because it’s most likely to represent what the person looks like now. If recent feedback isn’t available, you can fall back to historical feedback. + +**Use feedback to update predictions on a cadence that matches the person’s mental model of the feature.** For example, people expect typing suggestions to update immediately as they’re typing. On the other hand, giving people continuously updated song recommendations makes it hard to consider individual songs and could make them feel rushed or overwhelmed. + +**Be prepared for changes in implicit feedback when you make changes to your app’s UI.** Even small UI changes can lead to noticeable changes in the amount and types of implicit feedback. For example, changing the location of a button can affect how people use it, even if there’s no change in the benefit they get from the button’s action. Take such changes into account when interpreting the implicit feedback you receive from interactions in your app. + +**Beware of confirmation bias.** Implicit feedback is constrained by what people can actually see and do in your app and other apps — it rarely gives you insight into new things they might like to do. Avoid relying solely on implicit feedback to inform your results. + +## [Calibration](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Calibration) + +Calibration is a process during which people provide information that an app feature needs before it can function. To use Face ID, for example, a person must first scan their face. + +![A screenshot of the Face ID setup screen on iPhone. A face appears inside the circular frame and tick marks around the frame show that a face scan hasn't begun yet. Text below the frame explains how to perform a scan, and appears above a 'Get Started' button.](https://docs-assets.developer.apple.com/published/35c07afee36cc51a609e574ef26d2ddf/machine-learning-calibration%402x.png) + +In general, only use calibration when your feature can’t function without that initial information. If your feature can work without calibration, consider using other ways to gather the information you need, such as [implicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback) or possibly [explicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Explicit-feedback). + +**Always secure people’s information.** During calibration, people may provide sensitive information and you must make sure it remains secure. + +**Be clear about why you need people’s information.** Typically, calibration is required before people can use a feature, so it’s essential that they understand the value of providing their information. As you briefly describe how people can benefit from your feature, emphasize what it does rather than how it works. + +**Collect only the most essential information.** Designing a unique experience that requests a minimal amount of information can make people more comfortable participating in the process and increase their trust in your app. + +**Avoid asking people to participate in calibration more than once.** Also, it’s best when calibration occurs early in the user experience. As people continue using your app or feature, you can use implicit or explicit feedback to evolve your information about them without asking them to participate again. An exception is a feature that needs calibration with an object instead of a person. For example, an app that helps people improve their baseball swing might need to calibrate with each new baseball field. + +**Make calibration quick and easy.** Even a brief calibration experience takes time and requires effort from people. An ideal calibration experience makes it easy for people to respond, without compromising the quality of the information they provide. The following guidelines can help you create a streamlined calibration experience. + + * Prioritize getting a few pieces of important information and infer the rest from other sources or by getting people’s feedback. + + * Avoid asking for information that most people would have to look up. + + * Avoid asking people to perform actions that might be difficult. + + + + +**Make sure people know how to perform calibration successfully.** After people decide to participate in calibration, give them an explicit goal and show their progress towards it. For example, Face ID calibration briefly describes what people need to do and changes the appearance of the tick marks encircling the face as people progress through scanning. + +**Immediately provide assistance if progress stalls.** When progress stalls, people can feel stuck or powerless, and they may lose trust in your app. In this situation, it’s crucial to give people actionable recommendations that quickly get them back on track. As you provide this guidance, never imply that something’s wrong or that people are at fault, and never leave people without a clear next step. + +**Confirm success.** The moment people successfully complete calibration, reward their time and effort by giving them a clear path towards using the feature. Providing an explicit completion to the calibration experience reinforces the unique nature of the experience and helps people switch their focus to your feature. + +**Let people cancel calibration at any time.** Make sure you give people an easy way to cancel the experience at any point and avoid implying any judgement about their choice. There’s no need to provide any messaging that mentions the canceled calibration, because the next time people attempt to use the feature, they’ll have another chance to participate. + +**Give people a way to update or remove information they provided during calibration.** Letting people edit their information gives them more control and can lead them to have greater trust in your app. Although the calibration experience can help people edit their responses, it’s a good idea to let people edit their information outside of the calibration experience so that they feel free to make changes at any time. + +## [Corrections](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Corrections) + +People use corrections to fix mistakes that apps make. For example, if a photo app automatically crops a photo in a way people don’t like, they can correct the mistake by cropping the photo in a different way. + +![A screenshot of the Camera app on iPhone showing a photo of a flower in editing mode. The crop and straighten function is selected, revealing grab bars on all edges of the photo. The tilt wheel button below the photo shows that someone chose a small tilt in the positive direction.](https://docs-assets.developer.apple.com/published/5d7804fb0a2eadb8e384ae2fc6a5ae0c/machine-learning-corrections%402x.png) + +**Give people familiar, easy ways to make corrections.** When your app makes a mistake, you don’t want people to be confused about how to correct it. You can avoid causing confusion by showing the steps your app takes as it performs the automated task. For example, Photos highlights the controls it uses to auto-crop a photograph so that people can use the same controls to refine or undo the results. + +**Provide immediate value when people make a correction.** Reward people’s effort by instantly displaying corrected content, especially when the feature is critical or you’re responding to direct user input. Also, be sure to persist the updates so people don’t have to make the same corrections again. + +**Let people correct their corrections.** Sometimes, people make a correction without realizing that they’ve made a mistake. As you do with all corrections, respond immediately to an updated correction and persist the update. + +**Always balance the benefits of a feature with the effort required to make a correction.** People may not mind when a feature that automates a task makes a mistake, but they’re likely to stop using the feature if it seems easier to perform the task themselves. + +**Never rely on corrections to make up for low-quality results.** Although corrections can reduce the impact of a mistake, depending on them may erode people’s trust in your app and reduce the value of your feature. + +**Learn from corrections when it makes sense.** A correction is a type of [implicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback) that can give you valuable information about ways your app doesn’t meet people’s expectations. Before you use a correction to update your models, make sure that the correction will lead to higher quality results. + +**When possible, use guided corrections instead of freeform corrections.** Guided corrections suggest specific alternatives, so they require less user effort; freeform corrections don’t suggest specific alternatives, so they require more input from people. An example of guided correction is a speech-to-text feature that gives people a list of alternative text completions from which to choose. In contrast, Photos offers freeform correction so that people can adjust the auto-cropping of a photo as they see fit. If it makes sense in your app, you can support a combination of guided and freeform corrections. + +## [Mistakes](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Mistakes) + +It’s inevitable that your app will make mistakes. Although people may not expect perfection, mistakes can damage their experience and decrease their trust in your app. To help you avoid negative consequences, it’s crucial to: + + * Anticipate mistakes. As much as possible, design ways to avoid mistakes and mitigate them when they happen. + + * Help people handle mistakes. Mistakes can have a wide range of consequences, so the tools you provide to handle a mistake must be able to address those consequences. + + * Learn from mistakes when doing so improves your app. In some cases, learning from a mistake might have undesirable effects, such as causing unpredictability in the user experience. When it makes sense, use each mistake as a data point that can refine your machine learning models and improve your app. + + + + +There are several machine learning patterns that can help you address mistakes: + + * [Limitations](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Limitations) help you set people’s expectations about the accuracy of your suggestions. + + * [Corrections](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Corrections) give people a way to be successful even when your results are wrong. + + * [Attribution](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Attribution) gives people insight into where suggestions come from, which can help them understand mistakes. + + * [Confidence](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Confidence) helps you gauge the quality of your results, which can impact how you present them. + + * Feedback — both [explicit](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Explicit-feedback) and [implicit](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback) — lets people tell you about mistakes that you might not be aware of. + + + + +**Understand the significance of a mistake’s consequences.** For example, incorrect keyboard suggestions might annoy people, but suggesting a travel route that results in a missed flight is a serious inconvenience. Show empathy by providing corrective actions or tools that match the seriousness of the mistake. + +**Make it easy for people to correct frequent or predictable mistakes.** If you don’t give people an easy way to correct mistakes, they can lose trust in your app. + +**Continuously update your feature to reflect people’s evolving interests and preferences and help avoid mistakes.** For example, you can use implicit feedback to discover changes in people’s tastes and habits. It’s also a good idea to update your feature with domain-specific information, such as current trends in popular entertainment. Ideally, people don’t have to do any work to benefit from improvements in your app. + +**When possible, address mistakes without complicating the UI.** Some patterns, such as corrections and limitations, tend to integrate seamlessly with an app’s UI, whereas others, like attributions, can be harder to integrate. Balance a pattern’s effect on the UI with its potential for compounding the mistake. For example, if you update the UI with an attribution that turns out to be wrong, the effect of the original mistake is magnified. + +**Be especially careful to avoid mistakes in proactive features.** A proactive feature — like a suggestion based on people’s behaviors — promises valuable results without asking people to do anything to get them. However, because people don’t request a proactive feature, they often have less patience with its mistakes. Mistakes made by proactive features can also cause people to feel that they have less control. + +**As you work on reducing mistakes in one area, always consider the effect your work has on other areas and overall accuracy.** For example, optimizing an image-recognition app to improve how it recognizes dogs might result in a decreased ability to recognize cats. As your models evolve, be prepared for mistakes to evolve, too. Use what you know about people’s preferences to help you determine the areas to work on. + +## [Multiple options](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Multiple-options) + +Depending on the design of your feature, it might work best to present a single result or multiple results from which people can choose. Providing multiple options can give people a greater sense of control and can help bridge the gap between your model’s predictions and what people actually want. Multiple options can also encourage people to have realistic expectations about the types of results your app generates. + +![A screenshot of the Maps app on Mac, displaying the San Francisco Bay Area. The map shows three different routes between San Francisco and Apple Park.](https://docs-assets.developer.apple.com/published/0daed168f6ffe2e94d93384a6eb01537/machine-learning-multiple-options%402x.png) + +You might present multiple options to people in the following contexts: + + * Suggested options, a proactive feature that suggests content to people based on the their past interactions. For example, For You recommendations from Apple Music. + + * Requested options, a reactive feature that suggests potential next steps to people based on their recent actions. For example, Quick Type suggestions. + + * Corrections, which are actions people take to fix mistakes your app has made when it’s acting on their behalf. For example, the Photos Auto-Crop feature. + + + + +**Prefer diverse options.** When possible, balance the accuracy of a response with the diversity of multiple options. For example, Apple Maps generally suggests more than one route to a destination, such as a route without tolls, a scenic route, or a route that uses highways. Providing different types of options helps people choose the one that they prefer and can also suggest new items that might interest them. + +**In general, avoid providing too many options.** People must evaluate each option before making a choice, so more options increases cognitive load. When possible, list options on one screen so people don’t have to scroll to find the right one. + +**List the most likely option first.** When you know how your [confidence](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Confidence) values correlate with the quality of your results, you might use them to rank the options. You might also consider using contextual information, such as the time of day or the current location, to help you determine the most likely option. If it makes sense in your app, select the first option by default so people can quickly achieve their goals without reading through every option. + +**Make options easy to distinguish and choose.** For example, in a routing app, people often need to make route choices quickly to avoid going the wrong way. When options look similar, help people distinguish between them by providing a brief description of each one and taking particular care to highlight the differences. In cases where there are too many options to display in a single view, such as with content recommendations, consider grouping options in categories that people can scan rapidly. + +**Learn from selections when it makes sense.** People give you [implicit feedback](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Implicit-feedback) every time they make a selection. When it doesn’t adversely affect the user experience, use this feedback to refine the options you provide and increase the chance that you’ll present the most likely option first. In general, continuing to offer incorrect results is likely to decrease people’s trust in the quality of your app’s predictions. + +## [Confidence](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Confidence) + +Confidence indicates the measure of certainty for a result. Not all models produce confidence values by default, so you might consider generating them if you can use them to improve the user experience of your app. + +![A screenshot of a flight tracker app on iPhone. The screen displays a flight from SFO to LAX from June 3rd through June 7th. The screen shows the current lowest flight cost with a recommendation to watch over the next four weeks for a lower price. The screen includes buttons labeled 'Track' and 'View Flights', and a search field to find new dates for comparison. The active tab on the screen is titled 'Track', and there are other tabs titled 'Search' and 'Flights.'](https://docs-assets.developer.apple.com/published/7a0d563c16ee37610e81485029b35707/machine-learning-confidence%402x.png) + +Although it might seem like higher confidence produces a higher quality result — and therefore a better user experience — it doesn’t necessarily work that way. You need to verify that your confidence values correspond to the quality of your results. For example, you might review values for multiple confidence thresholds or compare values across multiple versions of your app. If you’re not sure how your confidence values correlate with the quality of your results, it’s not a good idea to convey confidence to people. + +**Know what your confidence values mean before you decide how to present them.** For example, people may forgive low-quality results from [critical or complementary](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Critical-or-complementary) features — especially when results are accompanied by [attribution](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Attribution) or other contextual information — but presenting low-quality results in a prominent way is likely to erode trust in your app. + +**In general, translate confidence values into concepts that people already understand.** Simply displaying a confidence value doesn’t necessarily help people understand how it relates to a result. For example, a feature that suggests new music based on a person’s listening habits might calculate that there’s a 97% match between a new song and the songs they usually listen to. However, displaying “97% match” next to the new song as an attribution doesn’t communicate enough information to help people make a choice. In contrast, providing an attribution that clearly identifies the behavior — such as “Because you listen to pop music” — can be more actionable. + +**In situations where attributions aren’t helpful, consider ranking or ordering the results in a way that implies confidence levels.** If you must display confidence directly, consider expressing it in terms of semantic categories. For example, a feature that predicts travel prices might replace ranges of confidence numbers with categories like “high chance” and “low chance” to give context to the values and help people understand and compare the results. + +**In scenarios where people expect statistical or numerical information, display confidence values that help them interpret the results.** For example, weather predictions, sports statistics, and polling numbers are often accompanied by specific values that express the accuracy of the data as an interval or a percentage. + +**Whenever possible, help people make decisions by conveying confidence in terms of actionable suggestions.** Understanding people’s goals is key to expressing confidence in ways that help them make decisions. For example, if your feature predicts when an item will be at its lowest price, you know that people want to optimize how they spend their time and money. For a feature like this, displaying percentages or other numerical confidence values would be less valuable than providing actionable suggestions like “This is a good time to buy,” or “Consider waiting for a better price.” + +**Consider changing how you present results based on different confidence thresholds.** If high or low levels of confidence have a meaningful impact on the ways people can experience the results, it’s a good idea to adapt your presentation accordingly. For example, when confidence is high, the face recognition feature in Photos simply displays the photos that contain a specific person, but when confidence is lower, the feature asks people to confirm whether the photos contain the person before showing more. + +**When you know that confidence values correspond to result quality, you generally want to avoid showing results when confidence is low.** Especially when a feature is proactive and can make unbidden suggestions, poor results can cause people to be annoyed and even lose trust in the feature. For suggestions and proactive features, it’s a good idea to set a confidence threshold below which you don’t offer results. + +## [Attribution](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Attribution) + +An attribution expresses the underlying basis or rationale for a result, without explaining exactly how a model works. Depending on the design of your app, you might want to use attributions to impart transparency and give people insight into your results. For example, if your app suggests books for people to read, you might use an attribution like “Because you’ve read mysteries” when you suggest books in the “thrillers” category. + +![An illustration of a screen on iPhone, which shows an area that contains recommended videos. The area is labeled 'For You' and includes a row of two video icons. A third video icon is partially visible on the right side of the screen, hinting at additional recommendations.](https://docs-assets.developer.apple.com/published/e071666dc22644640278e74736950868/machine-learning-attribution%402x.png) + +To help you decide whether to include attributions in your app, consider how you want them to affect people. For example, you might want attributions to: + + * Encourage people to change what they do in your app + + * Minimize the impact of [mistakes](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Mistakes) + + * Help people build a mental model of your feature + + * Promote trust in your app over time + + + + +**Consider using attributions to help people distinguish among results.** For example, if you present a set of results as [multiple options](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Multiple-options), including attributions can help people choose an option based on their understanding of the premise that led to it, such as “New books by authors you’ve read.” + +**Avoid being too specific or too general.** Overly specific attributions can make people feel like they have to do additional work to interpret the results, whereas overly general attributions typically don’t provide useful information. In apps that make content recommendations, general attributions can make people feel like your app is not treating them as individuals, but overly specific attributions can make people think that your app is watching them too closely. The best attributions strike a balance between these extremes. + +**Keep attributions factual and based on objective analysis.** To be useful, an attribution needs to help people reason about a result; you don’t want to provoke an emotional response. Don’t provide an attribution that implies understanding or judgment of people’s emotions, preferences, or beliefs. For example, an app that recommends new content to people can use an attribution like “Because you’ve read nonfiction” instead of an attribution like “Because you love nonfiction.” + +**In general, avoid technical or statistical jargon.** In most situations, using percentages, statistics, and other technical jargon doesn’t help people assess the results you provide. The exception to this is when the result itself is of a statistical or technical nature, such as information in the areas of weather, sports, polling and election results, or scientific data. + +## [Limitations](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Limitations) + +Every feature — whether it’s based on machine learning or not — has certain limitations to what it can deliver. In general, there are two types of limitations: things a feature can’t do well and things a feature can’t do at all. When there’s a mismatch between people’s expectations about a feature and what the feature can actually accomplish, a limitation can seem like a defect. For example, people might expect: + + * Photos to perform a search that covers every category they can imagine + + * Siri to respond to queries that aren’t well defined, like “What is the meaning of life?” + + * FaceID to work from every angle + + + + +An important part of the design process is to identify the scenarios where limitations impact the user experience and design ways to help people work with them. For example: + + * Set people’s expectations before they use the feature. + + * Show people how to get the best results while they’re using the feature. + + * When inferior results occur, explain why so that people can understand the feature better. + + + + +![A screenshot of the Memoji recording sheet on iPhone. The app shows a person's Memoji, above a message that reads 'Low light', which helps convey that additional light is required for a high-quality recording.](https://docs-assets.developer.apple.com/published/fca31a41168248b160fde791dc573041/machine-learning-limitations%402x.png) + +**Help people establish realistic expectations.** When a limitation may have a serious effect on user experience but happens rarely, consider making people aware of the limitation before they use your app or feature. You might describe the limitation in marketing materials or within the feature’s context so that people can decide how they want to rely on the feature. If the effects of a limitation aren’t serious, you can help set people’s expectations by providing [attributions](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Attribution). + +**Demonstrate how to get the best results.** If you don’t provide guidance for using a feature, people may assume it’ll do everything they want. When you proactively show people how to get good results, you help them benefit from the feature and establish a more accurate mental model of the feature’s capabilities. There are many ways to show people the best ways to use a feature, such as: + + * Use placeholder text to suggest input. In Photos, the search bar displays the text “Photos, People, Places…” to help people understand what they can search for before they begin typing. Photos also displays a description of how it scans the photo library to offer search suggestions. + + * As people interact with the feature, provide feedback on their actions to guide them towards a result without overwhelming them. For example, while people are interacting with Animoji, the feature responds to current conditions and suggests how people can improve their results by adjusting the lighting or moving closer to the camera. + + * Suggest alternative ways to accomplish the goal instead of showing no results. To do this successfully, you need to understand the goal well enough to suggest alternatives that make sense. For example, if people ask Siri to set a timer on a Mac, Siri suggests setting a reminder instead, because timers aren’t available in macOS. This suggestion makes sense because people’s goal is to receive an alert at a certain time. + + + + +**Explain how limitations can cause unsatisfactory results.** People can get frustrated when it seems that your feature works intermittently. Ideally, your feature can recognize and describe the reasons for poor results to make people aware of the limitations and help them to adjust their expectations. For example, Animoji tells people that it doesn’t work well in the dark. + +**Consider telling people when limitations are resolved.** When people use a feature frequently, they learn to avoid the interactions that fail because of the feature’s limitations. When you update your app to remove a limitation, you might want to notify people so that they can adjust their mental model of your feature and return to interactions they’d previously avoided. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Related) + +[Generative AI](https://developer.apple.com/design/human-interface-guidelines/generative-ai) + +[Privacy](https://developer.apple.com/design/human-interface-guidelines/privacy) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Developer-documentation) + +[Apple Intelligence and machine learning](https://developer.apple.com/documentation/TechnologyOverviews/ai-machine-learning) + +[Create ML](https://developer.apple.com/documentation/CreateML) + +[Core ML](https://developer.apple.com/documentation/CoreML) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/6F92E66E-52A5-4289-9F76-A3E6983F9250/10049_wide_250x141_1x.jpg) Explore prompt design & safety for on-device foundation models ](https://developer.apple.com/videos/play/wwdc2025/248) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/51620FBA-75C7-46B5-BCBA-800F38AEE3A5/10048_wide_250x141_1x.jpg) Discover machine learning & AI frameworks on Apple platforms ](https://developer.apple.com/videos/play/wwdc2025/360) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/machine-learning#Change-log) + +Date| Changes +---|--- +October 24, 2023| Added art to Corrections section. +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/maps.md b/skills/hig-technologies/references/maps.md new file mode 100644 index 00000000..b2329211 --- /dev/null +++ b/skills/hig-technologies/references/maps.md @@ -0,0 +1,221 @@ +--- +title: "Maps | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/maps + +# Maps + +A map displays outdoor or indoor geographical data in your app or on your website. + +![A sketch of a tri-fold map, suggesting navigation. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/2438a971853ddedc25626eb9d276d71e/technologies-maps-intro%402x.png) + +A map uses a familiar interface that supports much of the same functionality as the system-provided Maps app, such as zooming, panning, and rotation. A map can also include annotations and overlays and show routing information, and you can configure it to use a standard graphical view, a satellite image-based view, or a view that’s a hybrid of both. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/maps#Best-practices) + +**In general, make your map interactive.** People expect to be able to zoom, pan, and otherwise interact with maps in familiar ways. Noninteractive elements that obscure the map can interfere with people’s expectations for how maps behave. + +**Pick a map emphasis style that suits the needs of your app.** There are two emphasis styles to choose from: + + * The _default_ style presents a version of the map with fully saturated colors, and is a good option for most standard map applications without a lot of custom elements. This style is also useful for keeping visual alignment between your map and the Maps app, in situations when people might switch between them. + + * The _muted_ style, by contrast, presents a desaturated version of the map. This style is great if you have a lot of information-rich content that you want to stand out against the map. + + + + +![A screenshot of a map on iPhone showing Coit Tower with the default emphasis style.](https://docs-assets.developer.apple.com/published/603ad0c458f464ad072a94aa10ee89bb/maps-default-appearance%402x.png) + +Default style + +![A screenshot of a map on iPhone showing Coit Tower with desaturated colors, representing the muted emphasis style.](https://docs-assets.developer.apple.com/published/31d94cbb32ab028e061cfff44b8e7c6a/maps-muted-appearance%402x.png) + +Muted style + +For developer guidance, see [`MKStandardMapConfiguration.EmphasisStyle`](https://developer.apple.com/documentation/MapKit/MKStandardMapConfiguration/EmphasisStyle-swift.enum). + +**Help people find places in your map.** Consider offering a search feature combined with a way to filter locations by category. The search field for a shopping mall map, for example, might include filters that make it easy to find common store types, like clothing, housewares, electronics, jewelry, and toys. + +**Clearly identify elements that people select.** When someone selects a specific area or other element on the map, use distinct styling like an outline and color variation to call attention to the selection. + +**Cluster overlapping points of interest to improve map legibility.** A _cluster_ uses a single pin to represent multiple points of interest within close proximity. As people zoom in on a map, clusters expand to progressively reveal individual points of interest. + +![A screenshot of a single pin with the number three, representing a cluster of three points of interest that are within close proximity.](https://docs-assets.developer.apple.com/published/26a4541efb07044a1fa8f7a06cd0551c/maps-points-of-interest-cluster%402x.png)Points of interest in a cluster + +![A screenshot of three orange pins when zoomed in, representing three individual points of interest.](https://docs-assets.developer.apple.com/published/bb8de6a531cbd567d480addff18221ee/maps-points-of-interest-individual%402x.png)Individual points of interest when zoomed in + +**Help people see the Apple logo and legal link.** It’s fine when parts of your interface temporarily cover the logo and link, but don’t cover these elements all the time. Follow these guidelines to help keep the Apple logo and legal link visible: + + * Use adequate padding to separate the logo and link from the map boundaries and your custom controls. For example, it works well to use 7 points of padding on the sides of the elements and 10 points above and below them. + + * Avoid causing the logo and link to move with your interface. It’s best when the Apple logo and legal link appear to be fixed to the map. + + * If your custom interface can move relative to the map, use the lowest position of the custom element to determine the placement of the logo and link. For example, if your app lets people pull up a custom card from the bottom of the screen, place the Apple logo and legal link 10 points above the lowest resting position of the card. + + + + +Note + +The Apple logo and legal link aren’t shown on maps that are smaller than 200x100 pixels. + +## [Custom information](https://developer.apple.com/design/human-interface-guidelines/maps#Custom-information) + +**Use annotations that match the visual style of your app.** Annotations identify custom points of interest on your map. The default annotation marker has a red tint and a white pin icon. You can change the tint to match the color scheme of your app. You can also change the icon to a string or image, like a logo. An icon string can contain any characters, including Unicode characters, but keep it to two to three characters in length for readability. For developer guidance, see [`MKAnnotationView`](https://developer.apple.com/documentation/MapKit/MKAnnotationView). + +**If you want to display custom information that’s related to standard map features, consider making them independently selectable.** When you support selectable map features, the system treats Apple-provided features (including points of interest, territories, and physical features) independently from other annotations that you add. You can configure custom appearances and information to represent these features when people select them. For developer guidance, see [`MKMapFeatureOptions`](https://developer.apple.com/documentation/MapKit/MKMapFeatureOptions). + +**Use overlays to define map areas with a specific relationship to your content.** + + * _Above roads_ , the default level, places the overlay above roads but below buildings, trees, and other features. This is great for situations where you want people to have an idea of what’s below the overlay, while still clearly understanding that it’s a defined space. + + * _Above labels_ places the overlay above both roads and labels, hiding everything beneath it. This is useful for content that you want to be fully abstracted from the features of the map, or when you want to hide areas of the map that aren’t relevant. + + + + +For developer guidance, see [Displaying overlays on a map](https://developer.apple.com/documentation/MapKit/displaying-overlays-on-a-map) and [`MKOverlayLevel`](https://developer.apple.com/documentation/MapKit/MKOverlayLevel). + +**Make sure there’s enough contrast between custom controls and the map.** Insufficient contrast makes controls hard to see and can cause them to blend in with the map. Consider using a thin stroke or light drop shadow to help a custom control stand out, or applying blend modes to the map area to increase its contrast with the controls atop it. + +## [Place cards](https://developer.apple.com/design/human-interface-guidelines/maps#Place-cards) + +Place cards display rich place information in your app or website, such as operating hours, phone numbers, addresses, and more. This enables you to provide structured and up-to-date information for places that you specify, and add depth to search results. + +### [Displaying place cards in a map](https://developer.apple.com/design/human-interface-guidelines/maps#Displaying-place-cards-in-a-map) + +You can present a place card that appears directly in your map anytime someone selects a place. This is a great way to provide place information in a map with multiple places that you specify, like a map of bookstores that an author plans to visit on their book signing tour. For developer guidance, see [`mapItemDetailSelectionAccessory(_:)`](https://developer.apple.com/documentation/MapKit/MapContent/mapItemDetailSelectionAccessory\(_:\)), [`mapView(_:selectionAccessoryFor:)`](https://developer.apple.com/documentation/MapKit/MKMapViewDelegate/mapView\(_:selectionAccessoryFor:\)), and [`selectionAccessory`](https://developer.apple.com/documentation/MapKitJS/Annotation/selectionAccessory). + +You can also display place cards for other places on a map, such as points of interest, territories, and physical features, to provide valuable context to people about nearby places. For developer guidance, see [`mapFeatureSelectionAccessory(_:)`](https://developer.apple.com/documentation/SwiftUI/View/mapFeatureSelectionAccessory\(_:\)), [`mapView(_:selectionAccessoryFor:)`](https://developer.apple.com/documentation/MapKit/MKMapViewDelegate/mapView\(_:selectionAccessoryFor:\)), and [`selectableMapFeatureSelectionAccessory`](https://developer.apple.com/documentation/MapKitJS/Map/selectableMapFeatureSelectionAccessory). + +Developer note + +In 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](https://developer.apple.com/documentation/MapKitJS/displaying-place-information-using-the-maps-embed-api). + +The system defines several place card styles, which specify the size, appearance, and information included in a place card. + + * The _automatic_ style lets the system determine the place card style based on the size of your map view. + + * The _callout_ style displays a place card in a popover style next to the selected place. You can further specify the style of a callout — the _full_ callout style displays a large, detailed place card, and the _compact_ callout style displays a space-saving, more concise place card. If you don’t specify a callout style, the system defaults to the _automatic_ callout style, which determines the callout style based on your map’s view size. + + * The _caption_ style displays an “Open in Apple Maps” link. + + * The _sheet_ style displays a place card in a [sheet](https://developer.apple.com/design/human-interface-guidelines/sheets). + + + + +For developer guidance, see [`MapItemDetailSelectionAccessoryStyle`](https://developer.apple.com/documentation/MapKit/MapItemDetailSelectionAccessoryStyle), [`MKSelectionAccessory.MapItemDetailPresentationStyle`](https://developer.apple.com/documentation/MapKit/MKSelectionAccessory/MapItemDetailPresentationStyle), and [`PlaceSelectionAccessoryStyle`](https://developer.apple.com/documentation/MapKitJS/PlaceSelectionAccessoryStyle). + + * Full callout + * Compact callout + * Caption + * Sheet + + + +![A screenshot of the full callout style place card in a map on iPad. The top of the place card contains a header image and the place name, category, and rating. The place card also includes a tile with operating hours; a tile with the website, phone number, and address; and a tile with an 'Open in Apple Maps' link.](https://docs-assets.developer.apple.com/published/7b978f0c16b84311c4d3f9f35d9c0fb4/maps-place-card-ipad-full%402x.png) + +![A screenshot of the compact callout style place card in a map on iPad. The place card includes the place name, category, shortened address, rating, and 'Open in Apple Maps' link.](https://docs-assets.developer.apple.com/published/ad7dc822fa480dfe3b4fa5d344536518/maps-place-card-ipad-compact%402x.png) + +![A screenshot of the caption style place card in a map on iPad. The place card contains an 'Open in Apple Maps' link.](https://docs-assets.developer.apple.com/published/f200b2f25897fefc55d30b6c5b6258c5/maps-place-card-ipad-link%402x.png) + +![A screenshot of the sheet style place card in a map on iPad, which appears on top of the map view. The top of the place card contains a header image and the place name, category, and rating. The place card also includes a tile with operating hours; a tile with the website, phone number, and address; and a tile with an 'Open in Apple Maps' link.](https://docs-assets.developer.apple.com/published/d5b8b635c902d62449c481531152bae9/maps-place-card-ipad-sheet%402x.png) + +Full callout style place cards appear differently depending on a person’s device. The system presents the full callout style place card in a popover style in iPadOS and macOS, and as a [sheet](https://developer.apple.com/design/human-interface-guidelines/sheets) in iOS. + +![A screenshot of the full callout style place card in a map on iPhone. The place card appears as a sheet from the bottom edge of the device.](https://docs-assets.developer.apple.com/published/6499250814a43a161484e99968aa503c/maps-place-card-iphone-full%402x.png) + +**Consider your map presentation when choosing a style.** The full callout style place card offers people the richest experience, presenting them with the most information about a place directly in your map. However, be sure to choose a place card style that fits in the context of your map. For example, if your app displays a small map with many annotations, consider using the compact callout style for a space-saving presentation that shows place information while maintaining the context of the other places that you specify in your map. + +**Make sure your place card looks great on different devices and window sizes.** If you choose to specify a style, ensure that the content in your place card remains viewable on different devices and as window sizes change. For full callout style place cards, you can set a minimum width to prevent text from overflowing on smaller devices. + +**Avoid duplicating information.** Consider what information you already display in your app or website when you choose a place card style. For example, the full callout style place card might display information that your app already shows. In this case, the compact callout or caption style might be a better complement. + +**Keep the location on your map visible when displaying a place card.** This helps people maintain a sense of where the location is on your map while getting detailed place information. You can set an offset distance for your place card and point it to the selected location. For developer guidance, see [`offset(_:)`](https://developer.apple.com/documentation/SwiftUI/View/offset\(_:\)), [`accessoryOffset`](https://developer.apple.com/documentation/MapKit/MKAnnotationView/accessoryOffset), and [`selectionAccessoryOffset`](https://developer.apple.com/documentation/MapKitJS/Annotation/selectionAccessoryOffset). + +### [Adding place cards outside of a map](https://developer.apple.com/design/human-interface-guidelines/maps#Adding-place-cards-outside-of-a-map) + +You can also display place information outside of a map in your app or website. For example, you might want to display a list of places rather than a map, like in search results or a store locator, and present a place card when people select one. For developer guidance, see [`mapItemDetailSelectionAccessory(_:)`](https://developer.apple.com/documentation/MapKit/MapContent/mapItemDetailSelectionAccessory\(_:\)), [`mapItemDetail(_:)`](https://developer.apple.com/documentation/MapKit/MKSelectionAccessory/mapItemDetail\(_:\)), and [`PlaceDetail`](https://developer.apple.com/documentation/MapKitJS/PlaceDetail). + +Important + +If 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:)`](https://developer.apple.com/documentation/SwiftUI/View/mapItemDetailSheet\(item:displaysMap:\)) and [`init(mapItem:displaysMap:)`](https://developer.apple.com/documentation/MapKit/MKMapItemDetailViewController/init\(mapItem:displaysMap:\)). + +**Use location-related cues in surrounding content to help communicate that people can open a place card.** For example, you can display place names and addresses alongside a button for more details to help indicate that people can interact with it to get place information. For a space-efficient design, you can include a map pin icon with a place name to help communicate that people can open a place card. + +## [Indoor maps](https://developer.apple.com/design/human-interface-guidelines/maps#Indoor-maps) + +Apps connected with specific venues like shopping malls and stadiums can design custom interactive maps that help people locate and navigate to indoor points of interest. Indoor maps can include overlays that highlight specific areas, such as rooms, kiosks, and other locations. They can also include text labels, icons, and routes. + + * Example 1 + * Example 2 + * Example 3 + + + +![A screenshot of a map on iPhone, displaying the San Jose International airport and the surrounding area. A card in the bottom half of the screen displays information and options, including the airport name and buttons for sharing, closing the card, navigating to the airport, calling the airport, visiting the airport's website, and more.](https://docs-assets.developer.apple.com/published/669a55f1fc7dd419351d60b4decfbbf5/indoor-maps-example1%402x.png) + +![A screenshot of a map on iPhone, displaying Terminal B at the San Jose International airport. Gate numbers are displayed above the terminal on the map. A minimized card containing information and options for the airport is visible at the bottom of the screen.](https://docs-assets.developer.apple.com/published/bd86841c0079e56b609826b4b97c24aa/indoor-maps-example2%402x.png) + +![A screenshot of a map on iPhone, displaying a close-up view of a terminal at the San Jose International airport. A security checkpoint, first aid stations, restrooms, an escalator, and a gate number are displayed on the map. A minimized card containing a search field and a Browse SJC button is visible at the bottom of the screen.](https://docs-assets.developer.apple.com/published/b36b5ea10535fbb6b42f3ca319bba1e7/indoor-maps-example3%402x.png) + +**Adjust map detail based on the zoom level.** Too much detail can cause a map to appear cluttered. Show large areas like rooms and buildings at all zoom levels. Then, progressively add more detailed features and labels as the map is zoomed in. An airport map might show only terminals and gates when zoomed out, but reveal individual stores and restrooms when zoomed in. + +![A screenshot of a map on iPhone, zoomed in to show the location of an elevator in San Jose International airport. A minimized card containing information about the elevator is visible at the bottom of the screen.](https://docs-assets.developer.apple.com/published/b4dc405bf622e949194d8b8e4394ef9f/indoor-maps-elevator%402x.png) + +**Use distinctive styling to differentiate the features of your map.** Using color along with icons can help distinguish different types of areas, stores, and services, and make it easy for people to quickly find what they’re looking for. + +**Offer a floor picker if your venue includes multiple levels.** A floor picker lets people quickly jump between floors. If you implement this feature, keep floor numbers concise for simplicity. In most cases, a list of floor numbers — rather than floor names — is sufficient. + +**Include surrounding areas to provide context.** Adjacent streets, playgrounds, and other nearby locations can all help orient people when they use your map. If these areas are noninteractive, use dimming and a distinct color to make them appear supplemental. + +![A screenshot of a map on iPhone, zoomed in to show the numbers and locations of some gates in a terminal at San Jose International airport. Other areas, including parking structures, are displayed without details. A minimized card containing a search field and a Browse SJC button is visible at the bottom of the screen.](https://docs-assets.developer.apple.com/published/222bc580a24623284ceb5a388d31521a/indoor-maps-surroundings%402x.png) + +**Consider supporting navigation between your venue and nearby transit points.** Make it easy to enter and exit your venue by offering routing to and from nearby bus stops, train stations, parking lots, garages, and other transit locations. You might also offer a way for people to quickly switch over to Apple Maps for additional navigation options. + +**Limit scrolling outside of your venue.** This can help people avoid getting lost when they swipe too hard on your map. When possible, keep at least part of your indoor map visible onscreen at all times. To help people stay oriented, you may need to adjust the amount of scrolling you permit based on the zoom level. + +**Design an indoor map that feels like a natural extension of your app.** Don’t try to replicate the appearance of Apple Maps. Instead, make sure area overlays, icons, and text match the visual style of your app. For guidance, see [Indoor Mapping Data Format](https://register.apple.com/resources/imdf/). + +![A screenshot of a custom map in an app on iPhone, showing an airport concourse. Elements of the map are tinted green to correspond with the app's UI, and custom icons represent gates, security checkpoints, and an information booth.](https://docs-assets.developer.apple.com/published/d87fb8004dcbd26d042a43ef797a1022/indoor-maps-custom-map-design%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/maps#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or visionOS._ + +### [watchOS](https://developer.apple.com/design/human-interface-guidelines/maps#watchOS) + +On Apple Watch, maps are static snapshots of geographic locations. Place a map in your interface at design time and show the appropriate region at runtime. The displayed region isn’t interactive; tapping it opens the Maps app on Apple Watch. You can add up to five annotations to a map to highlight points of interest or other relevant information. For developer guidance, see [`WKInterfaceMap`](https://developer.apple.com/documentation/WatchKit/WKInterfaceMap). + +![A screenshot of a map on Apple Watch, displaying Apple Park and some of the surrounding area.](https://docs-assets.developer.apple.com/published/befea7e8b96bc123bfef582ba3857d64/maps-watch1%402x.png) + +**Fit the map interface element to the screen.** The entire element needs to be visible on the Apple Watch display without requiring scrolling. + +**Show the smallest region that encompasses the points of interest.** The content within a map interface element doesn’t scroll, so all key content must be visible within the displayed region. + +For developer guidance, see [`WKInterfaceMap`](https://developer.apple.com/documentation/WatchKit/WKInterfaceMap). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/maps#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/maps#Developer-documentation) + +[MapKit](https://developer.apple.com/documentation/MapKit) + +[MapKit JS](https://developer.apple.com/documentation/MapKitJS) + +[Indoor Mapping Data Format](https://register.apple.com/resources/imdf/) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/maps#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/33B45785-076C-43F4-85FC-8D11F70E7A57/9878_wide_250x141_1x.jpg) Go further with MapKit ](https://developer.apple.com/videos/play/wwdc2025/204) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/04977BF3-7B89-4A9E-AE42-79BD268F4684/9212_wide_250x141_1x.jpg) Unlock the power of places with MapKit ](https://developer.apple.com/videos/play/wwdc2024/10097) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/maps#Change-log) + +Date| Changes +---|--- +December 18, 2024| Added guidance for place cards and included additional artwork. +September 12, 2023| Added artwork. +September 23, 2022| Added guidelines for presenting custom information, refined best practices, and consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/nfc.md b/skills/hig-technologies/references/nfc.md new file mode 100644 index 00000000..a29c9371 --- /dev/null +++ b/skills/hig-technologies/references/nfc.md @@ -0,0 +1,51 @@ +--- +title: "NFC | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/nfc + +# NFC + +Near-field communication (NFC) allows devices within a few centimeters of each other to exchange information wirelessly. + +![A sketch of progressively larger curved lines extending toward the right, suggesting near-field communication. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/5635074c80716ec35b369bee5dc930d0/technologies-nfc-intro%402x.png) + +iOS apps running on supported devices can use NFC scanning to read data from electronic tags attached to real-world objects. For example, a person can scan a toy to connect it with a video game, a shopper can scan an in-store sign to access coupons, or a retail employee can scan products to track inventory. + +## [In-app tag reading](https://developer.apple.com/design/human-interface-guidelines/nfc#In-app-tag-reading) + +An app can support single- or multiple-object scanning when the app is active, and display a scanning sheet whenever people are about to scan something. + +![An illustration of a scanning sheet on iPhone, which includes the text Ready to Scan and Hold your device near the NFC tag, and a Cancel button.](https://docs-assets.developer.apple.com/published/588da10ebfa2ce6ed48d0ebdd9507735/nfc-ready-to-scan%402x.png) + +**Don’t encourage people to make contact with physical objects.** To scan a tag, an iOS device must simply be within close proximity of the tag. It doesn’t need to actually touch the tag. Use terms like _scan_ and _hold near_ instead of _tap_ and _touch_ when asking people to scan objects. + +**Use approachable terminology.** Near-field communication may be unfamiliar to some people. To make it approachable, avoid referring to technical, developer-oriented terms like _NFC_ , _Core NFC_ , _Near-field communication_ , and _tag_. Instead, use friendly, conversational terms that most people will understand. + +Use| Don’t use +---|--- +Scan the [_object name_].| Scan the NFC tag. +Hold your iPhone near the [_object name_] to learn more about it.| To use NFC scanning, tap your phone to the [_object_]. + +**Provide succinct instructional text for the scanning sheet.** Provide a complete sentence, in sentence case, with ending punctuation. Identify the object to scan, and revise the text appropriately for subsequent scans. Keep the text short to avoid truncation. + +First scan| Subsequent scans +---|--- +Hold your iPhone near the [_object name_] to learn more about it.| Now hold your iPhone near another [_object name_]. + +## [Background tag reading](https://developer.apple.com/design/human-interface-guidelines/nfc#Background-tag-reading) + +Background tag reading lets people scan tags quickly any time, without needing to first open your app and initiate scanning. On devices that support background tag reading, the system automatically looks for nearby compatible tags whenever the screen is illuminated. After detecting and matching a tag with an app, the system shows a notification that the people can tap to send the tag data to the app for processing. Note that background reading isn’t available when an NFC scanning sheet is visible, Wallet or Apple Pay are in use, cameras are in use, the device is in Airplane Mode, and the device is locked after a restart. + +![An illustration of a notification banner above the Home screen on iPhone, which offers an opportunity to open a specific app to process NFC tag data detected nearby.](https://docs-assets.developer.apple.com/published/f42e796e585f504e450d1bf030a66d69/nfc-background%402x.png) + +**Support both background and in-app tag reading.** Your app must still provide an in-app way to scan tags, for people with devices that don’t support background tag reading. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/nfc#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/nfc#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/nfc#Developer-documentation) + +[Core NFC](https://developer.apple.com/documentation/CoreNFC) + diff --git a/skills/hig-technologies/references/photo-editing.md b/skills/hig-technologies/references/photo-editing.md new file mode 100644 index 00000000..b2c3cecb --- /dev/null +++ b/skills/hig-technologies/references/photo-editing.md @@ -0,0 +1,40 @@ +--- +title: "Photo editing | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/photo-editing + +# Photo editing + +Photo-editing extensions let people modify photos and videos within the Photos app by applying filters or making other changes. + +![A sketch of crop marks surrounded by two arrows, suggesting photo editing. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/0923c23bdf3aebd4a8b7d94e43cb0efd/technologies-photo-editing-intro%402x.png) + +Edits are always saved in the Photos app as new files, safely preserving the original versions. + +To access a photo editing extension, a photo must be in edit mode. While in edit mode, tapping the extension icon in the toolbar displays an action menu of available editing extensions. Selecting one displays the extension’s interface in a modal view containing a top toolbar. Dismissing this view confirms and saves the edit, or cancels it and returns to the Photos app. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/photo-editing#Best-practices) + +**Confirm cancellation of edits.** Editing a photo or video can be time consuming. If someone taps the Cancel button, don’t immediately discard their changes. Ask them to confirm that they really want to cancel, and inform them that any edits will be lost after cancellation. There’s no need to show this confirmation if no edits have been made yet. + +**Don’t provide a custom top toolbar.** Your extension loads within a modal view that already includes a toolbar. Providing a second toolbar is confusing and takes space away from the content being edited. + +**Let people preview edits.** It’s hard to approve an edit if you can’t see what it looks like. Let people see the result of their work before closing your extension and returning to the Photos app. + +**Use your app icon for your photo editing extension icon.** This instills confidence that the extension is in fact provided by your app. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/photo-editing#Platform-considerations) + + _No additional considerations for iOS, iPadOS, or macOS. Not supported in tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/photo-editing#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/photo-editing#Developer-documentation) + +[App extensions](https://developer.apple.com/app-extensions/) + +[PhotoKit](https://developer.apple.com/documentation/PhotoKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/photo-editing#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/022CCFA2-C212-48DB-A086-2068695D160D/2961_wide_250x141_1x.jpg) Introducing Photo Segmentation Mattes ](https://developer.apple.com/videos/play/wwdc2019/260) + diff --git a/skills/hig-technologies/references/researchkit.md b/skills/hig-technologies/references/researchkit.md new file mode 100644 index 00000000..01a1e24c --- /dev/null +++ b/skills/hig-technologies/references/researchkit.md @@ -0,0 +1,134 @@ +--- +title: "ResearchKit | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/researchkit + +# ResearchKit + +A research app lets people everywhere participate in important medical research studies. + +![A sketch of the ResearchKit icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/9bd44d7f951617f42270a366911fe357/technologies-ResearchKit-intro%402x.png) + +The ResearchKit framework provides predesigned screens and transitions that make it easy to design and build an engaging custom research app. For developer guidance, see [Research & Care > ResearchKit](https://www.researchandcare.org/researchkit/). + +These guidelines are for informational purposes only and don’t constitute legal advice. Contact an attorney to obtain advice with respect to the development of a research app and any applicable laws. + +## [Creating the onboarding experience](https://developer.apple.com/design/human-interface-guidelines/researchkit#Creating-the-onboarding-experience) + +When opening a research app for the first time, people encounter a series of screens that introduce them to the study, determine their eligibility to participate, request permission to proceed with the study, and, when appropriate, grant access to personal data. These screens aren’t typically revisited once they’ve been completed, so clarity is essential. + +**Always display the onboarding screens in the correct order.** + +![A diagram showing four boxes in a horizontal row. Beginning with the leftmost box, an arrow pointing toward the right connects each box to the next. From the left, the boxes are labeled Introduction, Eligibility, Informed consent, and Permission to access data.](https://docs-assets.developer.apple.com/published/e6a857b89c1b4b7b254861411fa0d08d/researchkit-diagram%402x.png) + +### [1\. Introduction](https://developer.apple.com/design/human-interface-guidelines/researchkit#1-Introduction) + +**Provide an introduction that informs and provides a call to action.** Clearly describe the subject and purpose of your study. Also allow existing participants to quickly log in and continue an in-progress study. + +![A screenshot that shows a ResearchKit app's introductory screen on iPhone, which invites someone to join a study.](https://docs-assets.developer.apple.com/published/b2e12c8eeedeb58c2b31f6da926be952/introduction-screen%402x.png) + +### [2\. Determine eligibility](https://developer.apple.com/design/human-interface-guidelines/researchkit#2-Determine-eligibility) + +**Determine eligibility as soon as possible.** People don’t need to move on to the consent section if they’re not eligible for the study. Only present eligibility requirements that are necessary for your study. Use simple, straightforward language that describes the requirements, and make it easy to enter information. + +![A screenshot that shows a ResearchKit app's eligibility screen on iPhone. The screen includes fields that ask for a person's age, location, and type of smartphone. The bottom of the screen includes 'Back' and 'Submit' buttons, and the top of the screen includes a button for returning to the previous screen and a button for help.](https://docs-assets.developer.apple.com/published/c458c3b78dc70a5ec20e2fbcfdfcce32/eligibility-screen%402x.png) + +### [3\. Get informed consent](https://developer.apple.com/design/human-interface-guidelines/researchkit#3-Get-informed-consent) + +**Make sure participants understand your study before you get their consent.** ResearchKit helps you make the consent process concise and friendly, while still allowing you to incorporate into the consent any legal requirements or requirements set by an institutional review board or ethics review board. Make sure that your app complies with the applicable App Store Guidelines, including the consent requirements. Typically, the consent section explains how the study works, ensures that participants understand the study and their responsibilities, and gets the participant’s consent. + +**Break a long consent form into easily digestible sections.** Each section can cover one aspect of the study, such as data gathering, data use, potential benefits, possible risks, time commitment, how to withdraw, and so on. For each section, use simple, straightforward language to provide a high-level overview. If necessary, provide a more detailed explanation of the section that participants can read by tapping a Learn More button. Participants need to be able to view the entire consent form before they agree to participate. + +**If it makes sense, provide a quiz that tests the participant’s understanding.** You might do this for questions the participant would otherwise be asked when obtaining consent in person. + +![A screenshot that shows a ResearchKit app's quiz screen on iPhone. The screen displays a multiple-choice question designed to make sure people understand the study. The bottom of the screen includes a 'Next' button, and the top of the screen includes a button for returning to the previous screen and a button for help.](https://docs-assets.developer.apple.com/published/09184ffb5a698e998d39bb44458911a8/consent-quiz-screen%402x.png) + +**Get the participant’s consent and, if appropriate, some contact information.** After agreeing to join the study, participants receive a confirmation dialog, followed by screens in which they provide their signature and contact details. Most research apps email participants a PDF version of the consent form for their records. + +![A screenshot that shows a ResearchKit app's consent screen on iPhone. The screen recaps key points about the study, shows the person's name, and asks the person to confirm whether they'd like to participate in the study. The bottom of the screen includes 'Disagree' and 'Accept' buttons, and the top of the screen includes a button for returning to the previous screen and a button for help.](https://docs-assets.developer.apple.com/published/46b3fb7e5f95abccac05269223545a05/consent-signature-screen%402x.png) + +### [4\. Request permission to access data](https://developer.apple.com/design/human-interface-guidelines/researchkit#4-Request-permission-to-access-data) + +**Get permission to access the participant’s device or data, and to send notifications.** Clearly explain why your research app needs access to location, Health, or other data, and don’t request access to data that isn’t critical to your study. If your app requires it, also ask for permission to send notifications to the participant’s device. + +![A screenshot that shows a ResearchKit app's consent screen on iPhone. The screen recaps key points about the study, and offers the choice to share data with researchers for future research purposes, or only for this particular study. The bottom of the screen includes an 'Accept' button, and the top of the screen includes a button for returning to the previous screen and a button for help.](https://docs-assets.developer.apple.com/published/bcceaf89b0a6997c37f5179229674b84/permissions-health-data-screen%402x.png) + +## [Conducting research](https://developer.apple.com/design/human-interface-guidelines/researchkit#Conducting-research) + +To get input from participants, your study might use surveys, active tasks, or a combination of both. Depending on the architecture of your study, participants may interact with each section multiple times or only once. + +**Create surveys that keep participants engaged.** ResearchKit provides many customizable screens you can use in your surveys, and makes it easy to present questions that require different types of answers, such as true or false, multiple choice, dates and times, sliding scales, and open-ended text entry. As you use ResearchKit screens to design a survey, follow these guidelines to provide a great experience: + + * Tell participants how many questions there are and about how long the survey will take. + + * Use one screen per question. + + * Show participants their progress in the survey. + + * Keep the survey as short as possible. Several short surveys tend to work better than one long survey. + + * For questions that require some additional explanation, use the standard font for the question and a slightly smaller font for the explanatory text. + + * Tell participants when the survey is complete. + + + + +![A screenshot that shows a ResearchKit app's survey screen on iPhone. This particular screen asks someone to specify Parkinson's disease symptoms from a list and tap a 'Next' button to continue the survey. The top of the screen includes a 'Close' button.](https://docs-assets.developer.apple.com/published/ee125d1de4ec07f41856c9bab67ee0c3/survey-question-type1-screen%402x.png) + +**Make active tasks easy to understand.** An active task requires the participant to engage in an activity, such as speaking into the microphone, tapping fingers on the screen, walking, or performing a memory test. Follow these guidelines to encourage participants to perform an active task and give them the best chance of success: + + * Describe how to perform the task using clear, simple language. + + * Explain any requirements, such as if the task must be performed at a particular time or under specific circumstances. + + * Make sure participants can tell when the task is complete. + + + + +![A screenshot that shows a ResearchKit app's active task screen on iPhone. This particular screen shows an illustration of a person walking, and instructions that explain how to perform a Walk and Balance active task. A list of requirements is shown, along with a 'Get started' button. The top of the screen includes a 'Close' button.](https://docs-assets.developer.apple.com/published/efdeed00e3196a8eaea5155ff78b0015/active-tasks-screen%402x.png) + +## [Managing personal information and providing encouragement](https://developer.apple.com/design/human-interface-guidelines/researchkit#Managing-personal-information-and-providing-encouragement) + +ResearchKit offers a profile screen you can use to let participants manage personal information while they’re in your research app. It’s also a good idea to design a custom screen that motivates people and gives them a way to track progress in the study. Ideally, both screens are accessible at all times in your app. + +**Use a profile to help participants manage personal data related to your study.** A profile screen can let people edit data that might change during the course of the study — such as weight or sleep habits — and remind them of upcoming activities. A profile screen can also provide an easy way to leave a study and view important information, such as the consent document and privacy policy. + +![A screenshot that shows a ResearchKit app's profile screen on iPhone. This particular screen includes a list of fields for personal information like name and birth year. Each field includes a button for editing the field's value. The top of the screen includes a settings button, and the bottom of the screen includes tabs for 'Tracking', 'History' and 'Profile'. The active tab is 'Profile'.](https://docs-assets.developer.apple.com/published/9112be9b40dfaec1cc5270f94adc4645/profile-screen%402x.png) + +**Use a dashboard to show progress and motivate participants to continue.** If appropriate for your study, use a dashboard to provide encouraging feedback, such as daily progress, weekly assessments, results from specific activities, and even results that compare the participant’s results with aggregated results from others in the study. + +![A screenshot that shows a ResearchKit app's history screen on iPhone. This particular screen shows a log of active tasks performed over two days. The bottom of the screen includes tabs for 'Tracking', 'History' and 'Profile'. The active tab is 'History'.](https://docs-assets.developer.apple.com/published/d5c1639ec410f2064db916c146e27f17/dashboard-screen%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/researchkit#Platform-considerations) + + _No additional considerations for iOS or iPadOS. Not supported in macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/researchkit#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/researchkit#Related) + +[Research & Care > ResearchKit](https://www.researchandcare.org/researchkit/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/researchkit#Developer-documentation) + +[Research & Care > Developers](https://www.researchandcare.org/developers/) + +[Protecting user privacy](https://developer.apple.com/documentation/HealthKit/protecting-user-privacy) — HealthKit + +[ResearchKit GitHub project](https://github.com/ResearchKit/ResearchKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/researchkit#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/196C46B0-DF68-4947-B211-4FEECE415A6E/3408_wide_250x141_1x.jpg) What's new in CareKit ](https://developer.apple.com/videos/play/wwdc2020/10151) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/EAFF830B-8468-49BA-A5DC-D3A3E8B7F463/4960_wide_250x141_1x.jpg) Build a research and care app, part 1: Setup onboarding ](https://developer.apple.com/videos/play/wwdc2021/10068) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/E6EBBD96-C3E4-4A7E-908A-A692F708AE26/2633_wide_250x141_1x.jpg) ResearchKit and CareKit Reimagined ](https://developer.apple.com/videos/play/wwdc2019/217) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/researchkit#Change-log) + +Date| Changes +---|--- +September 12, 2023| Updated artwork. + diff --git a/skills/hig-technologies/references/shareplay.md b/skills/hig-technologies/references/shareplay.md new file mode 100644 index 00000000..d7ac3256 --- /dev/null +++ b/skills/hig-technologies/references/shareplay.md @@ -0,0 +1,142 @@ +--- +title: "SharePlay | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/shareplay + +# SharePlay + +SharePlay helps multiple people share activities — like viewing a movie, listening to music, playing a game, or sketching ideas on a whiteboard — while they’re in a FaceTime call or Messages conversation. + +![A sketch of the SharePlay icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/cd055a691d877485d819f837a6eb15a7/technologies-Share-Play-intro%402x.png) + +The system synchronizes app playback on all participating devices to support seamless media and content sharing that lets everyone enjoy the experience simultaneously. In visionOS, SharePlay helps people enjoy these experiences while they’re together in the same virtual space. + +When someone shares content during a FaceTime call, the system asks each participant to launch the app to begin the experience. If people don’t have the app installed, the SharePlay alert encourages them to download it from the App Store. If you make the platform-specific versions of your app available as a [Universal Purchase](https://developer.apple.com/support/universal-purchase/), people can make one purchase and use your app and their in-app purchases across all the platforms you support. + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/shareplay#Best-practices) + +**Let people know that you support SharePlay.** People often expect media playback experiences to be shareable, so indicate this capability in your interface. For example, you can use the `shareplay` SF Symbol to identify the content or experiences in your app that support SharePlay. + +**If part of your app requires a subscription, consider ways to help nonsubscriber participants quickly join a group activity.** For example, you might offer temporary or provisional access to nonsubscribers or let an existing subscriber send a one-time pass to a friend. To make it easy for family members to share your content in a SharePlay experience, you can support [Family Sharing](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Supporting-Family-Sharing). If people can start a subscription during a SharePlay experience, present a streamlined version of your sign-up flow so they can join the activity without making others wait. For guidance, see [Auto-renewable subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Auto-renewable-subscriptions). + +**Support Picture in Picture (PiP) when possible.** On iPhone and iPad, people can open a shared video in a PiP window. On a Mac, a shared video opens in a background window that people can move into the foreground when they want to watch. + +**Use the term _SharePlay_ correctly.** You can use _SharePlay_ as a noun — as in “Join SharePlay” — and also as a verb when describing a direct action in your interface. For example, in a button or sheet that lets people share a movie-viewing activity, you can use a phrase like “SharePlay Movie.” Avoid using an adjective with SharePlay; for example, in your visionOS app, don’t add terms like _virtual_ or _spatial_. Avoid changing the term _SharePlay_ in any way; for example, don’t use variations like _SharePlayed_ , _SharePlays_ , or _SharePlaying_. + +## [Sharing activities](https://developer.apple.com/design/human-interface-guidelines/shareplay#Sharing-activities) + +An _activity_ is an app-defined type of shareable experience. For example, an app that lets people view videos might define a separate activity for viewing each type of content — like movies, TV shows, and uploaded videos — and display a different description for each activity. You can define as many different activities as make sense in your app. For developer guidance, see [Defining your app’s SharePlay activities](https://developer.apple.com/documentation/GroupActivities/defining-your-apps-shareplay-activities). + +**Briefly describe each activity.** When people receive an invitation to participate in an activity, your description helps them understand the experience they’re about to share. For example, a video-viewing app might associate its descriptive movie view with a movie-viewing activity. In this case, the descriptive view might display a movie’s title, a plot summary, and a poster image. Write a simple, meaningful description that’s short enough to avoid truncation. + +**Make it easy to start sharing an activity.** If there’s no session available when people start a shareable activity, you can present UI that lets them start a group activity. In response, the system asks people if they want to share or continue the experience solo. + +![A screenshot of the TV app on iPhone. The screen shows an alert overlaid on a video and text. The alert includes buttons titled 'SharePlay', 'Start Only for Me', and 'Cancel'.](https://docs-assets.developer.apple.com/published/b49187e8ae95c92981bc07c390d8a8dc/shareplay-start-alert%402x.png) + +![A screenshot of the TV app on iPhone. The screen shows a video with SharePlay turned on. The area around the Dynamic Island includes an icon of the person being shared with, badged with the app logo, and the text 'Started A BOT-anist'. A FaceTime call with the SharePlay recipient sits in an overlay in the lower right corner of the screen.](https://docs-assets.developer.apple.com/published/456da5b33017a74c5fa4f41ba03b1be8/shareplay-sharing-content%402x.png) + +**Help people prepare to join a session before displaying the activity.** For example, if people must log in, download content, or make a payment before they can participate, display views that help them perform these tasks before showing the activity UI. Make these tasks as simple and effortless as possible so people can join the group activity quickly. + +**When possible, defer app tasks that might delay a shared activity.** For example, if your app needs to know a participant’s profile, consider asking for this information at a convenient time, like when playback pauses or finishes. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/shareplay#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, or tvOS. Not supported in watchOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/shareplay#visionOS) + +People expect most visionOS apps to support SharePlay. While wearing Apple Vision Pro, people choose the Spatial option in FaceTime to share content and activities with others. + +In a shared activity, FaceTime can show representations of other participants — called spatial Personas — within each wearer’s space, making everyone feel like they’re sharing the same experience in the same place. During a shared experience in FaceTime, people can interact with each other in natural ways through their spatial Personas. For example, people can speak or gesture directly to others, tell when someone is paying attention to them, and know which person is using a shared tool or resource. + +visionOS uses the concept of _shared context_ to describe the characteristics of a shared activity that help people feel physically present with others while connecting over the same content. A shared context helps give people confidence that they’re experiencing the same thing as everyone else. + +When people feel that they’re truly sharing an experience, social dynamics can encourage authentic, intuitive interactions. For example, people can communicate verbally and nonverbally to make plans, take turns, and share resources. + +Note + +During 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. + +**Choose the spatial Persona template that suits your shared activity.** When you design a shared activity, you can use a spatial Persona template to specify a layout for arranging spatial Personas in the shared activity space. The system provides three spatial Persona templates: side-by-side, surround, and conversational. + +The side-by-side template places participants next to each other along a curved line segment, all facing the shared content. The side-by-side template gives everyone a great view of the content, making it a good choice for helping people watch media together. Because people aren’t facing each other in this arrangement, the side-by-side template can encourage less nonverbal interaction than other spatial Persona templates. + +![An illustration representing a side-by-side shared activity in visionOS. Participants are positioned next to one another and facing a shared screen.](https://docs-assets.developer.apple.com/published/165cd2e63eb739bc3209ac651d63b0d7/visionos-shareplay-side-by-side%402x.png) + +The system-applied surround template arranges participants all the way around the shared content in the center. This spatial Persona template works especially well when the content is 3D, because each participant views it from a different angle. In the surround template, participants face each other as if they were grouped around a table, promoting both verbal and nonverbal interactions. + +![An illustration representing a surround shared activity in visionOS. Participants are gathered in a circle around shared content.](https://docs-assets.developer.apple.com/published/a3653114364ca9d18cbaaec62c6d1cba/visionos-shareplay-surround%402x.png) + +The conversational template also groups participants around a center point, but places your content along the circle, not at its center. Because of this position, not everyone has the same view of your content, and it might not be convenient for everyone to interact with it. Consider using the conversational arrangement if your experience is more about people being together while your app performs a task in the background like playing music. + +![An illustration representing a conversational shared activity in visionOS. Participants are positioned in a semi-circle formation around shared content.](https://docs-assets.developer.apple.com/published/6606d08491fb7172de59f9f745c32b8f/visionos-shareplay-conversational%402x.png) + +For developer guidance, see [`SystemCoordinator`](https://developer.apple.com/documentation/GroupActivities/SystemCoordinator) and [`SpatialTemplatePreference`](https://developer.apple.com/documentation/GroupActivities/SpatialTemplatePreference). + +**Be prepared to launch directly into your shared activity.** When one person shares your activity with others on a FaceTime call, the system minimizes friction by automatically launching your app for everyone. In this scenario, you want to avoid displaying any windows that aren’t related to the shared activity. For example, if people need to sign in before joining the activity, be sure to present this task in an autodismissible window that disappears as soon as people finish providing the required input. + +**Help people enter a shared activity together, but don’t force them.** When one participant changes their level of immersion, the system tells you so you can synchronize the experience for everyone. Before synchronizing, check whether changing a person’s level of immersion would disrupt their current task; if it would, offer them the choice to join the updated experience. For example, if someone is editing content in an unshared window, you might present an alert that lets them choose to transition. For guidance, see [Immersive experiences](https://developer.apple.com/design/human-interface-guidelines/immersive-experiences). + +**Smoothly update a shared activity when new participants join.** When someone joins an in-progress activity, you need to integrate them without disrupting the experience for everyone else. For example, it’s important to update shared immersive content to keep all participants synchronized. Also, consider designing ways to accommodate up to five participants in your arrangement, updating their positions as necessary. + +#### [Maintaining a shared context](https://developer.apple.com/design/human-interface-guidelines/shareplay#Maintaining-a-shared-context) + +When your shared activity runs in a Full Space, the system helps your app maintain a shared context by using a single coordinate system to arrange your content and all participants, automatically synchronizing the size, position, and orientation of your app for each person. You’re responsible for displaying objects, playing sounds, and supporting interactions in ways that enhance the feeling of sharing the experience. + +**Make sure everyone views the same state of your app.** If your app has more than one state — such as a media app that provides both minimal and theater-like viewing modes — you need to avoid letting different participants view different states, because doing so can diminish people’s sense of being together in a shared space. The exception to this is when someone needs to temporarily exit a shared activity; for guidance, see [Adjusting a shared context](https://developer.apple.com/design/human-interface-guidelines/shareplay#Adjusting-a-shared-context). + +**Use Spatial Audio to enrich your shared activity.** Playing Spatial Audio can help you strengthen the realism of the shared experience. For guidance, see [Playing audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio). + +**When possible, let people discover natural, social solutions to confusions or conflicts that might arise during a shared experience.** For example, if only one participant at a time can use a virtual tool, avoid displaying UI, like tool-use controls or notifications, and instead let people speak or gesture to the group when they want to use the tool. If conflicts can arise during your shared activity — for example, if multiple people try to change the same content at the same time — consider implementing a simple rule, like last change wins, and letting people use the rule to define behavior that’s acceptable to the group. + +**Help people keep their private and shared content separate.** By default, the system clearly differentiates a shared window from windows that aren’t shared. For example, when people use Music to listen together, the shared Music window appears as a new window for everyone, while any individual’s open library window remains separate and unshared. If your app can open multiple windows, help people share the one they want and make it easy for them to distinguish shared from unshared windows. If possible, also let people drag content they want to share from a private window to a shared one. + + * Private + * Selected + * Shared + + + +![An image of a private TV window in visionOS, with a translucent button above the window labeled Not Shared.](https://docs-assets.developer.apple.com/published/4d6d10f5b53dbe935c61cadf9a4c400c/visionos-shareplay-status-idle%402x.png)Content in a TV window is private by default. + +![An image of a private TV window in visionOS, with the button above the window selected. A menu emerges downward from the button with options for sharing the window.](https://docs-assets.developer.apple.com/published/04fc57f305c864a6162e1ac4f470b551/visionos-shareplay-status-selected%402x.png)People can select the Share button to choose whether, and with whom, to share the viewing experience. + +![An image of a shared TV window in visionOS. The button above the window is labeled with the SharePlay icon and the text Shared.](https://docs-assets.developer.apple.com/published/d0310d65563f9a03ccbcc738ead1be77/visionos-shareplay-status-sharing%402x.png)When sharing, the app clearly communicates the shared state. + +#### [Adjusting a shared context](https://developer.apple.com/design/human-interface-guidelines/shareplay#Adjusting-a-shared-context) + +Sometimes, it makes sense to adjust the shared context of a shared activity so each participant can customize their experience, such as for comfort or accessibility. In other situations, strictly maintaining a shared context might decrease people’s enjoyment of the experience. For example, when content has only one ideal viewing angle, each participant might need their own. + +**Let people personalize their experience without changing the experience for others.** For example, people might need to adjust various settings, like volume or subtitles, to make views and interactions accessible or make themselves more comfortable. + +![An image of a TV window in visionOS. The image is split down the center to contrast the personalized experiences of two people: Person 1 has subtitles turned on, while Person 2 has subtitles turned off.](https://docs-assets.developer.apple.com/published/adc28b9c915736776dbb296379be01b9/visionos-shareplay-subtitles-personalization%402x.png)When sharing, two people watching the same video can choose separately whether to turn subtitles on or off. + +**Consider when to give each participant a unique view of the shared content.** Some content looks best when people view it from a specific perspective. For example, people can share a Spatial Capture in a standard window with other people’s spatial Personas visible around it. However, to perceive the depth in a Spatial Capture, each person needs to view it from the right angle. In this scenario, a person could temporarily transition to a Full Space that hides other participants and ensures the right viewing angle for them, even while everyone else continues to view the standard window and each other. If it makes sense to provide per-person versions of your shared content, be sure to continue synchronizing people’s positions and your app context to maintain the shared experience. + +**Make it easy for people to exit and rejoin a shared activity.** Sometimes, people need to perform an unrelated task in your app or a different one, or engage with their physical surroundings. When this happens, you need to present a control or other component that lets people quickly rejoin the shared activity. In addition, you might want to continue displaying the shared content so people can stay informed about the ongoing shared experience while they’re hiding their spatial Persona. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/shareplay#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/shareplay#Related) + +[Auto-renewable subscriptions](https://developer.apple.com/design/human-interface-guidelines/in-app-purchase#Auto-renewable-subscriptions) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/shareplay#Developer-documentation) + +[Group Activities](https://developer.apple.com/documentation/GroupActivities) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/shareplay#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/27EAC954-289C-4966-9422-B86B964D4BED/10055_wide_250x141_1x.jpg) Share visionOS experiences with nearby people ](https://developer.apple.com/videos/play/wwdc2025/318) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/942191E7-9B98-487D-AE81-400D58285B31/8129_wide_250x141_1x.jpg) Design spatial SharePlay experiences ](https://developer.apple.com/videos/play/wwdc2023/10075) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/C1ABC187-BCC7-4576-A088-141E732E411A/8303_wide_250x141_1x.jpg) Add SharePlay to your app ](https://developer.apple.com/videos/play/wwdc2023/10239) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/shareplay#Change-log) + +Date| Changes +---|--- +December 5, 2023| Added artwork for visionOS. +June 21, 2023| Updated to include guidance for visionOS. +December 19, 2022| Clarified guidance for helping nonsubscribers join a group activity. + diff --git a/skills/hig-technologies/references/shazamkit.md b/skills/hig-technologies/references/shazamkit.md new file mode 100644 index 00000000..03d0cfd2 --- /dev/null +++ b/skills/hig-technologies/references/shazamkit.md @@ -0,0 +1,47 @@ +--- +title: "ShazamKit | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/shazamkit + +# ShazamKit + +ShazamKit supports audio recognition by matching an audio sample against the ShazamKit catalog or a custom audio catalog. + +![A sketch of the ShazamKit icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/74c2e960c2dd11cd7352fb44d0f703aa/technologies-ShazamKit-intro%402x.png) + +You can use ShazamKit to provide features like: + + * Enhancing experiences with graphics that correspond with the genre of currently playing music + + * Making media content accessible to people with hearing disabilities by providing closed captions or sign language that syncs with the audio + + * Synchronizing in-app experiences with virtual content in contexts like online learning and retail + + + + +If you need the device microphone to get audio samples for your app to recognize, you must request access to it. As with all types of permission requests, it’s important to help people understand why you’re asking for access. For guidance, see [Privacy](https://developer.apple.com/design/human-interface-guidelines/privacy). + +![A screenshot of the Math School app’s permission alert on iPhone. The alert reads 'Math School would like to access your microphone. Synchronize reading and math exercises with videos played by your teacher.' There are two buttons available: Not Now and Allow.](https://docs-assets.developer.apple.com/published/b79bf93e025e4493d87cb274a21a8c97/shazamkit-mic-permission%402x.png) + +## [Best practices](https://developer.apple.com/design/human-interface-guidelines/shazamkit#Best-practices) + +After you receive permission to access the microphone for features that use ShazamKit, follow these guidelines. + +**Stop recording as soon as possible.** When people allow your app to record audio for recognition, they don’t expect the microphone to stay on. To help preserve privacy, only record for as long as it takes to get the sample you need. + +**Let people opt in to storing your app’s recognized songs to their iCloud library.** If your app can store recognized songs to iCloud, give people a way to first approve this action. Even though both the Music Recognition control and the Shazam app show your app as the source of the recognized song, people appreciate having control over which apps can store content in their library. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/shazamkit#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/shazamkit#Resources) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/shazamkit#Developer-documentation) + +[ShazamKit](https://developer.apple.com/documentation/ShazamKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/shazamkit#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/E875B0F9-12EF-4A12-B0B3-01A3DE667DD9/4934_wide_250x141_1x.jpg) Explore ShazamKit ](https://developer.apple.com/videos/play/wwdc2021/10044) + diff --git a/skills/hig-technologies/references/sign-in-with-apple.md b/skills/hig-technologies/references/sign-in-with-apple.md new file mode 100644 index 00000000..e7b0bad8 --- /dev/null +++ b/skills/hig-technologies/references/sign-in-with-apple.md @@ -0,0 +1,288 @@ +--- +title: "Sign in with Apple | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple + +# Sign in with Apple + +Sign in with Apple provides a fast, private way to sign into apps and websites, giving people a consistent experience they can trust and the convenience of not having to remember multiple accounts and passwords. + +![A sketch of the Apple logo, suggesting Sign in with Apple. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/0e77230e8cf51c67c7d3a883ec8e0373/technologies-SIWA-intro%402x.png) + +Supporting Sign in with Apple lets people use the Apple Account they already have to sign in or sign up, and skip filling out forms, verifying email addresses, and choosing passwords. In cases where you choose to ask for a name and email address, people have the option to share a unique, random email address that automatically relays messages to their personal email address. For developer guidance, see [Authentication Services](https://developer.apple.com/documentation/AuthenticationServices). + +You can offer Sign in with Apple in every version of your app or website across all platforms — including non-Apple platforms. + +Sign in with Apple makes it easy for people to authenticate with Face ID, Touch ID, or Optic ID and has two-factor authentication built in for an added layer of security. Apple doesn’t use Sign in with Apple to profile people or their activity in apps. + +## [Offering Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Offering-Sign-in-with-Apple) + +Follow these guidelines to offer Sign in with Apple when it’s most convenient for people. + +**Ask people to sign in only in exchange for value.** People need to understand why you’re asking them to sign in, so it can work well to display a brief, approachable description of sign-in benefits. For example, you might want to tell people that signing in lets them personalize the app experience, access additional features, or synchronize data. + +**Delay sign-in as long as possible.** People often abandon apps when they’re forced to sign in before doing anything useful. Give them a chance to familiarize themselves with your app before making a commitment. For example, a live-streaming app could let people explore available content before signing in to stream something. + +**If you require an account, ask people to set it up before offering any sign-in options.** Start by explaining the reasons for requiring an account. Then, after people complete account setup, let them choose a convenient way to sign in to their new account by offering Sign in with Apple and any other sign-in methods you support. + +**Consider letting people link an existing account to Sign in with Apple.** When you support this type of linking, people can get the convenience of using Sign in with Apple while maintaining access to the information in an account they’ve already set up. You can offer account linking before or after people sign in to their existing account. For example: + + * If people share an email address through Sign in with Apple and it matches the address in an existing account, you can suggest that they link Sign in with Apple to that account. + + * If people used an existing user name and password to sign in, you can display an account-linking suggestion in their account’s settings view or another logical place. + + + + +**In a commerce app, wait until after people make a purchase before asking them to create an account.** If you support a guest checkout system, give people a quick way to create an account after the transaction completes. For example, if you support Apple Pay, let people create an account on the order confirmation page. In cases where people have already provided their name and email address during the Apple Pay transaction, you don’t need to ask for this information. + +![An illustration representing an order confirmation screen on iPhone. The screen includes buttons titled 'Create Account' and 'Sign up with Apple'.](https://docs-assets.developer.apple.com/published/0a8fc114b12c4ad6fdc4a0c1835957ec/create-account-after-purchase%402x.png) + +**As soon as Sign in with Apple completes, welcome people to their new account.** Help people use their new account right away; don’t delay the experience by asking for information that isn’t required. + +**Indicate when people are currently signed in.** You can help people confirm their sign-in method by displaying a phrase like “Using Sign in with Apple” in places like a settings or account interface. + +## [Collecting data](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Collecting-data) + +People appreciate Sign in with Apple for its privacy and convenience. Although some apps or websites may require additional information — such as a date of birth or a region of residence — it’s essential to minimize your requests for data as people set up an account. Build on the trust that people have in Sign in with Apple by describing why you need additional data and clearly displaying the data you receive. + +**Clarify whether the additional data you request is required or just recommended.** If the data is legally or contractually required — such as an agreement to terms of service, country or region of residence, birth date, or information required by a region’s real-identity laws — make sure people understand that they must supply the additional information to complete the setup of their account. If additional data isn’t required but can improve the user experience, make sure people know the request is optional and help them understand the benefits of providing the information. + +**Don’t ask people to supply a password.** A key benefit of Sign in with Apple is that people don’t have to create and memorize additional passwords. Unless people have stopped using Sign in with Apple with your app or website, don’t ask for a password. + +**Avoid asking for a personal email address when people supply a private relay address.** Using Sign in with Apple, people can choose to share a private relay address that automatically forwards messages to their verified personal email account. It’s essential to respect this choice and avoid overriding it by asking for a personal email address. If you present customer service, retail, or other experiences that request identification via email address, you can: + + * Make sure that people can view their private relay address in your app or website + + * Direct people to Settings > Apple Account > Password & Security > Apps using Apple Account to retrieve their private relay address + + * Use other identifying values, like an order number or phone number collected as part of a purchase + + + + +**Give people a chance to engage with your app before asking for optional data.** As people use your app, you can help them discover places where they can benefit from sharing more information with you. For example, you might suggest that they provide a contact phone number if they want real-time text updates, or social network information if they want to play games with friends. If people choose not to provide optional information, don’t prevent them from accessing their account or using all the features of your app. + +**Be transparent about the data you collect.** People value knowing how you use the data that they share with you. One way you can be transparent is to welcome people by using the name or email address they shared. Doing this helps establish how you use this information and, for a relay address, shows people where to find it in the future. If you don’t display all the data that people provide, they are likely to wonder why you asked for it. + +## [Displaying buttons](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Displaying-buttons) + +Apple provides several Sign in with Apple buttons you can use to let people set up an account and sign in. If necessary, you can create a custom button to offer Sign in with Apple; for guidelines, see [Creating a custom Sign in with Apple button](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Creating-a-custom-Sign-in-with-Apple-button). + +**Prominently display a Sign in with Apple button.** Make a Sign in with Apple button no smaller than other sign-in buttons, and avoid making people scroll to see the button. + +### [Using the system-provided buttons](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Using-the-system-provided-buttons) + +When you use the system-provided APIs to create a Sign in with Apple button, you get the following advantages. + + * A button that’s guaranteed to use an Apple-approved appearance + + * Assurance that the button’s contents maintain ideal proportions as you change its style + + * Automatic translation of the button’s title into the language specified by the device + + * Support for configuring the button’s corner radius to match the style of your UI (iOS, macOS, and web) + + * A system-provided alternative text label that lets VoiceOver describe the button + + + + +For developer guidance, see [`ASAuthorizationAppleIDButton`](https://developer.apple.com/documentation/AuthenticationServices/ASAuthorizationAppleIDButton) (iOS, macOS, and tvOS), [`WKInterfaceAuthorizationAppleIDButton`](https://developer.apple.com/documentation/WatchKit/WKInterfaceAuthorizationAppleIDButton) (watchOS), and [Displaying Sign in with Apple buttons on the web](https://developer.apple.com/documentation/signinwithapple/displaying-sign-in-with-apple-buttons-on-the-web). You can also visit [Sign in with Apple button](https://appleid.apple.com/signinwithapple/button) to view and adjust live previews of web-based buttons and get the code. + +The system provides several variants of the button title. Depending on the platform on which your content runs, choose the variant that fits the terminology of your sign-in experience and use it consistently throughout your interfaces. + +The following button titles are available for iOS, macOS, tvOS, and the web: + +![An illustration of a button that includes the Apple logo and text that reads 'Sign in with Apple'.](https://docs-assets.developer.apple.com/published/7510291ce4d0cd5b91bd325078a054e9/apple-account-sign-in-with%402x.png) + +![An illustration of a button that includes the Apple logo and text that reads 'Sign up with Apple'.](https://docs-assets.developer.apple.com/published/388906b461513478bbce1fe4cc630580/apple-account-sign-up-with%402x.png) + +![An illustration of a button that includes the Apple logo and text that reads 'Continue with Apple'.](https://docs-assets.developer.apple.com/published/79964d884643f563e51cfbc5df0853b0/apple-account-continue-with%402x.png) + +For watchOS, the system provides one title:  Sign in. + +![An illustration of a button for watchOS, that includes the Apple logo and text that reads 'Sign in'.](https://docs-assets.developer.apple.com/published/3a70b1f9a818c85bcc92761c26c6ae56/apple-account-watch-44mm-no-background%402x.png) + +Depending on the platform, the system provides up to three options for the appearance of the Sign in with Apple button: white, white with an outline, and black. Choose the appearance that works best with the background on which the button displays. + +#### [White](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#White) + +The white style is available on all platforms and the web. Use this style on dark backgrounds that provide sufficient contrast. + +![An illustration of a white button correctly positioned on a dark shaded background. The button includes the Apple logo and text that reads 'Sign in with Apple'.](https://docs-assets.developer.apple.com/published/52f84df8a5d3921114072cafe76d1cd3/apple-account-white-yes%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a white button incorrectly positioned on a light shaded background. The button includes the Apple logo and text that reads 'Sign in with Apple'.](https://docs-assets.developer.apple.com/published/c3c4e3ed3533fbc8864352c6da51f542/apple-account-white-no%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +#### [White with outline](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#White-with-outline) + +The white outlined style is available in iOS, macOS, and the web. Use this style on white or light-color backgrounds that don’t provide sufficient contrast with the white button fill. Avoid using this style on a dark or saturated background, because the black outline can add visual clutter; instead, use the [white](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#White) style to contrast with a dark background. + +![An illustration of a white, outlined button correctly positioned on a light shaded background. The button includes the Apple logo and text that reads 'Sign in with Apple'.](https://docs-assets.developer.apple.com/published/b47cf86de6868de43b8d7503337522fe/apple-account-outline-yes%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a white, outlined button incorrectly positioned on a dark shaded background. The button includes the Apple logo and text that reads 'Sign in with Apple'.](https://docs-assets.developer.apple.com/published/6268116e2d5a47d1fc06a359de891181/apple-account-outline-no%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +#### [Black](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Black) + +The black style is available on all platforms and the web. Use this style on white or light-color backgrounds that provide sufficient contrast; don’t use it on black or dark backgrounds. + +![An illustration of a black button correctly positioned on a light shaded background. The button includes the Apple logo and text that reads 'Sign in with Apple'.](https://docs-assets.developer.apple.com/published/915b5d4767463bca63ab0adafa6846f9/apple-account-black-yes%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a black button incorrectly positioned on a dark shaded background. The button includes the Apple logo and text that reads 'Sign in with Apple'.](https://docs-assets.developer.apple.com/published/c3da65d8c76a981f91ebfdaf21de74af/apple-account-black-no%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +Unlike the black Sign in with Apple button for other platforms, the watchOS button uses a fill color that’s not fully black. To contrast with the pure black background of Apple Watch, the watchOS button uses the system-defined dark gray appearance. + +![An illustration of a dark shaded button for watchOS on a black background, that includes the Apple logo and text that reads 'Sign in'.](https://docs-assets.developer.apple.com/published/dbd9944a0b54c61b4ad31ae7a1ba5a82/apple-account-watch-44mm%402x.png) + +#### [Button size and corner radius](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Button-size-and-corner-radius) + +**Adjust the corner radius to match the appearance of other buttons in your app.** By default, the Sign in with Apple button has rounded corners. In iOS, macOS, and the web, you can change the corner radius to produce a button with square corners or a capsule-shape button. For developer guidance, see [`cornerRadius`](https://developer.apple.com/documentation/AuthenticationServices/ASAuthorizationAppleIDButton/cornerRadius) (iOS and macOS) and [Displaying Sign in with Apple buttons on the web](https://developer.apple.com/documentation/signinwithapple/displaying-sign-in-with-apple-buttons-on-the-web). + +![An illustration of a 'Sign in with Apple' button with 90-degree corners.](https://docs-assets.developer.apple.com/published/4f279ff515dfcb50faf6f085acceffb9/apple-account-minimum-corner-radii%402x.png)Minimum corner radius + +![An illustration of a 'Sign in with Apple' button with the default corner radius.](https://docs-assets.developer.apple.com/published/7510291ce4d0cd5b91bd325078a054e9/apple-account-default-corner-radii%402x.png)Default corner radius + +![An illustration of a 'Sign in with Apple' button with the maximum corner radius, which results in a capsule-like appearance.](https://docs-assets.developer.apple.com/published/baeeaf354ab05437b35812f154e33497/apple-account-maximum-corner-radii%402x.png)Maximum corner radius + +**Maintain the minimum button size and margin around the button in iOS, macOS, and the web.** Be mindful that the button title may vary in length depending on the locale. Use the following values for guidance. + +Minimum width| Minimum height| Minimum margin +---|---|--- +140pt (140px @1x, 280px @2x)| 30pt (30px @1x, 60px @2x)| 1/10 of the button’s height + +### [Creating a custom Sign in with Apple button](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Creating-a-custom-Sign-in-with-Apple-button) + +If your interface requires it, you can create a custom Sign in with Apple button for iOS, macOS, or the web. For example, you may want to align logos across multiple sign-in buttons, use buttons that display only a logo, or adjust the button’s font, bezel, or background appearance to coordinate with your UI. + +![An illustration that includes two side-by-side partial iPhones showing sign-in screens. The screen on the left includes four stacked buttons: Sign in with Apple, Sign in with X, Sign in with Y, and Sign in with Z. The Sign in with Apple button includes an Apple logo before its title. The Sign in with X button includes a filled circle before its title. The Sign in with Y button includes a filled square before its title. The Sign in with Z button includes a filled triangle before its title. The screen on the right includes a heading that reads 'Sign in with', which appears above a row of four square buttons containing glyphs. The first square button contains the Apple logo. The second square button contains a filled circle. The third square button contains a filled square. The fourth square button contains a filled triangle. The circle, square, and triangle shapes represent a variety of logos.](https://docs-assets.developer.apple.com/published/7b12d1db6d56480ab4000122522945e1/custom-sign-in-screens%402x.png) + +Always make sure that people can instantly identify your custom button as a Sign in with Apple button. If your custom button differs too much from the standard one, people may not feel comfortable using it to set up an account or sign in. App Review evaluates all custom Sign in with Apple buttons. + +[Apple Design Resources](https://developer.apple.com/design/resources/) provides downloadable Apple logo artwork you can use to create custom Sign in with Apple buttons that display either a logo only or a logo and text. The logo files are available in PNG, SVG, and PDF formats, and the artwork for both types of buttons includes both black and white versions. Here are examples of the black and white logo-only art files, each with a background added for visibility. + +![A illustration of a black Apple logo within a white square, which is surrounded by a thick, shaded border. The white square represents the minimum amount of clear space between the Apple logo and other interface elements.](https://docs-assets.developer.apple.com/published/ed607e1cf28c1cd7497035516c9d06cf/siwa-black-logo-only%402x.png) + +![A illustration of a white Apple logo within a black square, which is surrounded by a thick, light border. The black square represents the minimum amount of clear space between the Apple logo and other interface elements.](https://docs-assets.developer.apple.com/published/76a7de0f49ff86242e7a08f53ec57bb5/siwa-white-logo-only%402x.png) + +All downloadable logo files include padding that simplifies positioning the logo in a button. Logo-only logo files include horizontal and vertical padding that ensures the correct proportion of the logo relative to the button. In addition to padding that keeps the logo and button correctly proportioned, logo files for buttons with text also include horizontal padding that provides a minimum margin between the logo and the button’s leading edge and title. + +Use only the logo artwork downloaded from [Apple Design Resources](https://developer.apple.com/design/resources/); never create a custom Apple logo. As you create a custom Sign in with Apple button, follow these guidelines for using the downloadable logo file: + + * Use the logo file to position the Apple logo in a button; never use the Apple logo as a button. + + * Match the height of the logo file to the height of the button. + + * Don’t crop the logo file. + + * Don’t add vertical padding. + + + + +To make sure that your custom button is visually consistent with the system-provided Sign in with Apple button, don’t change the following attributes. + + * Titles. Use only _Sign in with Apple_ , _Sign up with Apple_ , or _Continue with Apple_. + + * General shape. Buttons that combine the logo with text are always rectangular; logo-only buttons can be circular or rectangular. + + * Logo and title colors. Within a button, both items must be either black or white; don’t use custom colors. + + + + +To coordinate with your app design, you can change: + + * Title font. You can also adjust the font’s weight and size. + + * Title case. You can capitalize every letter in the title. + + * Background appearance. The overall color needs to remain black or white. If necessary, you can include a subtle texture or gradient to help the button harmonize with your interface. + + * Button corner radius. You can use a corner radius value that matches the other buttons in your UI. + + * Button bezel and shadow. For example, you can use a stroke to emphasize the button bezel or add a drop shadow. + + + + +#### [Custom buttons with a logo and text](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Custom-buttons-with-a-logo-and-text) + +**Choose the format of the logo file based on the height of your button.** Because SVG and PDF are vector-based formats, you can use these files in buttons of any height. Use the PNG files only in buttons that are 44 points tall, which is the default (and recommended) button height in iOS. Logos are available in small, medium, and large sizes, so you can match logo sizes in all the sign-up buttons you display. + +**Prefer the system font for the title — that is, Sign in with Apple, Sign up with Apple, or Continue with Apple.** Regardless of the font you choose, the title and button height of your custom button need to use the same proportions that the system uses. Using the system font for example, the title’s font size would be 43% of the button’s height — in other words, the button’s height would be 233% of the title’s font size, rounded to the nearest integer. Here are two examples that show these proportions using different sizes of the system font. + +![An illustration of a Sign in with Apple button, with callouts that indicate a button height of 44 points and a font size of 19 points.](https://docs-assets.developer.apple.com/published/4d402bbb5bfa51a2e8ac34066866ff84/left-aligned-correct-proportions-2%402x.png) + +![An illustration of a Sign in with Apple button, with callouts that indicate a button height of 56 points and a font size of 24 points.](https://docs-assets.developer.apple.com/published/b63e73cbcaf41594057e62ad49483d87/left-aligned-correct-proportions-1%402x.png) + +**In general, preserve the capitalization style of the title.** By default, all variants of the button title capitalize the first word — that is, _Sign_ or _Continue_ — and _Apple_ ; all other letters are lowercase. Avoid changing this style unless your interface uses only uppercase. + +**Keep the title and logo vertically aligned within the button.** To do this, vertically align the title to the middle of the button, then add the logo image, making sure its height matches the height of the button. Because the logo image includes top and bottom padding, vertically aligning the title in the button ensures that the title, the logo, and the button stay properly aligned. + +**Inset the logo if necessary.** If you need to horizontally align the Apple logo with other authentication logos, you can adjust the space between the logo and the button’s leading edge. + +**Maintain a minimum margin between the title and the right edge of the button.** Ensure the margin measures at least 8% of the button’s width. + +**Maintain the minimum button size and margin around the button.** Be mindful that the button title may vary in length depending on the locale. Use the following values for guidance. + +Minimum width| Minimum height| Minimum margin +---|---|--- +140 pt (140 px @1x, 280 px @2x)| 30 pt (30 px @1x, 60 px @2x)| 1/10 of the button’s height + +#### [Custom logo-only buttons](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Custom-logo-only-buttons) + +**Choose the format of the logo file based on the size of your button.** The downloadable artwork for logo-only buttons is available in SVG, PDF, and PNG formats. Use the vector-based SVG and PDF formats for buttons of any size; use the PNG format only in buttons that measure 44x44 pt. + +**Don’t add horizontal padding to a logo-only image.** A logo-only Sign in with Apple button always has a 1:1 aspect ratio, and the artwork already includes the correct padding on all sides. + +**Use a mask to change the default square shape of the logo-only image.** For example, you might want to use a circular or rounded rectangular shape to present all logo-only sign-in buttons. Never crop the Apple-provided artwork to decrease its built-in padding or use the logo by itself, and avoid including additional padding. + +![An illustration of a logo-only Sign in with Apple button. The button includes only the Apple logo, and the button has rounded corners.](https://docs-assets.developer.apple.com/published/add0de82a670c705e32126fd9ee002e1/siwa-logo-masked-rounded-rect%402x.png)Rounded rectangle mask + +![An illustration of a logo-only Sign in with Apple button. The button includes only the Apple logo, and the button has square corners.](https://docs-assets.developer.apple.com/published/b54adc4cec33d05188ec292f4b27e56f/siwa-logo-default%402x.png)No mask + +![An illustration of a logo-only Sign in with Apple button. The button includes only the Apple logo, and the button is circular.](https://docs-assets.developer.apple.com/published/fe14635b234c465506a70990d162ff78/siwa-logo-masked-circle%402x.png)Circular mask + +**Maintain a minimum margin around the button.** Ensure the margin measures at least 1/10 of the button’s height. + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Related) + +[Sign in with Apple button](https://appleid.apple.com/signinwithapple/button) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Developer-documentation) + +[Authentication Services](https://developer.apple.com/documentation/AuthenticationServices) + +[Displaying Sign in with Apple buttons on the web](https://developer.apple.com/documentation/signinwithapple/displaying-sign-in-with-apple-buttons-on-the-web) — Sign in with Apple + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/B671AE75-5224-4AA1-BB31-F4CBA7E95342/5002_wide_250x141_1x.jpg) Move beyond passwords ](https://developer.apple.com/videos/play/wwdc2021/10106) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/AB014534-6C60-4B00-9D7D-E2EDD02E3D6E/5211_wide_250x141_1x.jpg) Simplify sign in for your tvOS apps ](https://developer.apple.com/videos/play/wwdc2021/10279) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/D792218F-60EA-427D-8034-204243D383C7/2645_wide_250x141_1x.jpg) Introducing Sign In with Apple ](https://developer.apple.com/videos/play/wwdc2019/706) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple#Change-log) + +Date| Changes +---|--- +September 14, 2022| Refined guidance on supporting existing accounts, helping people set up a new account, and indicating the current sign-in status. Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/siri.md b/skills/hig-technologies/references/siri.md new file mode 100644 index 00000000..41e0c03c --- /dev/null +++ b/skills/hig-technologies/references/siri.md @@ -0,0 +1,523 @@ +--- +title: "Siri | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/siri + +# Siri + +Siri makes it easy for people to accomplish everyday tasks quickly, using voice, touch, or automation. + +![A sketch of the Siri icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/4198addd86e0d7d3c38660dd8b20fca0/technologies-Siri-intro%402x.png) + +When you use [SiriKit](https://developer.apple.com/documentation/SiriKit) to define the tasks and actions that your app supports, people can use Siri to perform them even when your app isn’t running. If you’re an accessory maker, you can also help people use Siri to control your accessories by integrating them with [HomeKit](https://developer.apple.com/design/human-interface-guidelines/homekit) or [AirPlay](https://developer.apple.com/design/human-interface-guidelines/airplay). Here are some of the ways people can use Siri to interact with your app or accessory: + + * Ask Siri to perform a system-defined task that your app supports, like send a message, play a song, or start a workout. + + * Run a _shortcut_ , which is a way to accelerate actions your app defines through onscreen interactions or by voice. + + * Use the Shortcuts app to adjust what a shortcut does, including combining several actions to perform one multistep shortcut. + + * Tap a _suggestion_ to perform a shortcut with your app (Siri can _suggest_ shortcuts that people might want to perform, based on their current context and the information you provide). + + * Use Siri to control an accessory that integrates with your app. + + + + +Siri works with your products on iPhone, iPad, Mac, Apple Watch, HomePod, and AirPods, so people can use it almost everywhere. + +When you make your app’s tasks available through Siri, you have several opportunities to customize the user experience. At a fundamental level, you customize the flow and functionality of the everyday tasks and actions you support to implement your business requirements. To reinforce this functionality throughout the user experience, you can write dialogue that reflects the style and tone of your company’s communications and design custom UI that incorporates your app’s visual style into the Siri interface. + +As you approach the job of integrating your app with Siri, assess the actions your app performs and learn how people use your app without voice interaction. Then consider the following steps: + + * Identify key tasks in your app that people might want to perform on a regular basis. + + * Drive engagement by telling the system about your app’s key tasks and by supporting suggestions. + + * For actions that people can perform through voice interaction, design functional conversational flows that feel natural. + + * Explore the various ways people might perform your app’s tasks — such as in a hands-free situation — and the devices they might be using, such as Apple Watch or iPad. + + + + +## [Integrating your app with Siri](https://developer.apple.com/design/human-interface-guidelines/siri#Integrating-your-app-with-Siri) + +Tasks are at the core of your app’s integration with Siri. SiriKit builds on the idea of a person’s intention to perform a task by using the term _intent_ to represent a task an app supports. The communication between your app and Siri is based on the intents — that is, the tasks — your app helps people perform. + +SiriKit defines _system intents_ that represent common tasks — such as sending a message, calling a friend, and starting a workout — and groups related intents into domains. A _domain_ is a category of tasks that Siri knows how to talk about, like messaging, calling, and workouts. For a complete list of domains and the actions in each domain that iOS and watchOS support, see [System intents](https://developer.apple.com/design/human-interface-guidelines/siri#System-intents). + +When possible, take advantage of the intents that SiriKit defines. Using system-provided intents can make your job easier, while still giving you opportunities to customize the experience. However, if your app offers tasks that aren’t represented by system-defined intents — like ordering a meal or shopping for groceries — you can create a _custom intent_ (for guidance, see [Custom intents](https://developer.apple.com/design/human-interface-guidelines/siri#Custom-intents)). + +### [A closer look at intents](https://developer.apple.com/design/human-interface-guidelines/siri#A-closer-look-at-intents) + +When people use Siri to ask questions and perform actions, Siri does the language processing and semantic analysis needed to turn their requests into intents for your app to handle. The exception is the personal phrase that people create to run a shortcut: When people speak the exact phrase, Siri recognizes it without doing additional processing or analysis. + +As a designer, your main job is to present clear, actionable content that helps clarify and streamline the interactions people have with Siri to get things done in your app. Some of these interactions happen while your app and SiriKit communicate about handling the intent, so it’s helpful to be familiar with the related SiriKit terminology. At a high level, your app processes an intent in three phases: resolve, confirm, and handle. + +First, your app and SiriKit must agree on what the request means in the _resolve_ phase. You can think of this phase as the time to ask people for everything your app needs and, if necessary, ask for additional information or clarification. For example, if people ask to send a message to Amy, and they have multiple contacts named Amy, a messaging app can have Siri ask which Amy they mean. Details related to an intent, like a message recipient’s name, are known as _parameters_. In the resolve phase, you can indicate the parameters that are required to complete an action and those that are optional. For developer guidance, see [Resolving the Parameters of an Intent](https://developer.apple.com/documentation/SiriKit/resolving-the-parameters-of-an-intent). + +The second phase — called the _confirm_ phase — happens when you have all the information you need to handle the intent. This phase can give people a chance to make sure they want to complete the task. For example, tasks that have financial impact require confirmation. In addition to asking for a person’s consent, you can present an error during this phase if something will prevent your app from completing the action. For example, if people use an app to order an item for pickup when the pickup location is closed, the app can describe why it can’t complete the action right now. Presenting this error during the confirm phase avoids making people wait until they’re paying for the item to find out that their request has failed. For developer guidance, see [Confirming the Details of an Intent](https://developer.apple.com/documentation/SiriKit/confirming-the-details-of-an-intent). + +Third, your app performs the task and tells SiriKit what it actually did in the _handle_ phase. You can provide both visual and textual information that tells people what your app did to handle their request. For example, an app that lets people order coffee might present a receipt that describes the order. Siri can speak or display the information your app provides. For developer guidance, see [Handling an Intent](https://developer.apple.com/documentation/SiriKit/handling-an-intent). + +### [Provide information about actions and support suggestions](https://developer.apple.com/design/human-interface-guidelines/siri#Provide-information-about-actions-and-support-suggestions) + +Most apps support large numbers of actions, but people tend to perform only a handful of them on a regular basis. When you tell the system about people’s regular actions and describe new ones you think they’ll want to perform in the future, Siri can _suggest_ shortcuts for both types of actions when people are likely to be interested in them. + +For example, in an app that’s all about coffee, the most frequent action might be to order a cup of coffee, while less frequent actions might include buying coffee beans or locating a new coffee shop. In this example, the coffee app would share information about the _order coffee_ action so that Siri can suggest a shortcut for this action when people usually want to do it, like weekday mornings. The app could also tell Siri about an action that people haven’t performed yet, but might be interested in — like ordering a new seasonal variation of their favorite coffee — so that Siri might suggest a shortcut for this action. + +Siri can use signals like location, time of day, and type of motion (such as walking, running, or driving), to intelligently predict just the right time and place to suggest actions from your app. Depending on the information your app shares and people’s current context, Siri can offer shortcut _suggestions_ on the lock screen, in search results, or on the [Siri watch face](https://support.apple.com/guide/watch/faces-and-features-apde9218b440/watchos#apdcc88df92c). Siri can also use some types of information to suggest actions that system apps support, such as using Calendar to add an event shared by your app. Here are some example scenarios. + + * Shortly before 7:30 a.m., Siri might suggest the _order coffee_ action to people who use the coffee app every morning. + + * After people use a box office–type app to buy tickets to a movie, Siri might remind them to turn on Do Not Disturb shortly before showtime. + + * Siri might suggest an automation that starts a workout in a person’s favorite workout app and plays their favorite workout playlist as they enter their usual gym. + + * When people enter the airport after a home-bound flight, Siri might suggest they request a ride home from their favorite ride-sharing app. + + + + +When you provide information about your actions to the system, people can also use the Shortcuts app to create shortcuts for the system and custom intents you support. For guidance, see [Shortcuts and suggestions](https://developer.apple.com/design/human-interface-guidelines/siri#Shortcuts-and-suggestions). + +### [Design a great voice experience](https://developer.apple.com/design/human-interface-guidelines/siri#Design-a-great-voice-experience) + +A great voice interface helps people feel confident they’ll get the results they want, even when they’re not sure what they can say. Siri supports different voice experiences for system-provided intents and custom intents. With a system intent, Siri does the natural language processing for you, letting people interact with your app in various conversational ways. With a custom intent, your app helps people perform a task that Siri doesn’t know about yet, which results in a different type of support for the voice experience. Custom intents give you additional opportunities to customize conversational dialogue, but also require people to create and speak a precise phrase to start the interaction. + +As a designer, you have several ways to enhance both types of conversational experiences and help people specify what they want without engaging in lengthy exchanges. + +For system-provided intents, you help Siri communicate with people about the action they want to accomplish by providing essential information and defining any app-specific terminology that might come up during the conversation. You don’t have to write additional dialogue for Siri to speak because Siri already knows about the actions in the system-defined domains and understands many ways that people may talk about them. For example, if you need to confirm the recipient’s name during the resolve phase of a messaging intent, you simply indicate that the required parameter value is missing and Siri says to the sender “Who do you want to send it to?” + +Even though you don’t write custom dialogue for system-provided intents, you can enhance the voice experience in other ways. For example, if people ask Siri to “play MyMusicApp” as they enter their gym, you could respond by playing their workout playlist. + +When you support a custom intent, people start the action by using their personal invocation phrase; if people don’t speak their phrase precisely, Siri doesn’t initiate the intent. Although you can suggest a memorable phrase for people to use, your principal job is to write clear, direct dialogue, often in the form of follow-up questions, to help people accomplish the action in as few steps as possible. + +For example, a coffee app might suggest _Order coffee_ as a phrase people could use to reorder a favorite cup of coffee. In a scenario where people usually use _Order coffee_ to order a cappuccino in various sizes, the coffee app could follow up with custom dialogue that builds on this knowledge, like “What size of cappuccino?” For other types of actions, more open-ended questions can be better at helping people accomplish the task efficiently. For example, if people start a grocery shopping action by saying _Add to cart_ , the grocery shopping app could follow up with “OK, what do you want?” + +### [Recognize that people use Siri in different contexts](https://developer.apple.com/design/human-interface-guidelines/siri#Recognize-that-people-use-Siri-in-different-contexts) + +People can use Siri to get things done while they’re in a car, working out, using apps on a device, or interacting with HomePod. You don’t always know the context in which people are using Siri to perform your app’s actions, so flexibility is key to help people have a great experience no matter what they’re doing. + +To communicate with people regardless of their current context, supply information that Siri can provide both vocally and visually. Supporting both voice and screen-based content lets Siri decide which communication method works best for people in their current situation. For example, Siri speaks to people through their AirPods if they say “Hey Siri” while using them. + +In voice-only situations, Siri verbally describes information that would have been presented onscreen in other situations. Consider a food-delivery app that requires people to confirm a transaction before completing the order. In a voice-only scenario, Siri may say “Your total is fifteen dollars, and your order will take thirty minutes to arrive at your door. Ready to order?” In contrast, when people can view the cost and delivery information onscreen, Siri might simply say “Ready to order?” When you support custom intents, you’re responsible for supplying the voice-only dialogue that describes these types of onscreen information. + +## [System intents](https://developer.apple.com/design/human-interface-guidelines/siri#System-intents) + +SiriKit defines a large number of system intents that represent common tasks people do, such as playing music, sending messages to friends, and managing notes. For system intents, Siri defines the conversational flow, while your app provides the data to complete the interaction. + +SiriKit provides the following intents. + +Domain (link to developer guidance)| Intents +---|--- +[VoIP Calling](https://developer.apple.com/documentation/SiriKit/voip-calling)| Initiate calls. +[Workouts](https://developer.apple.com/documentation/SiriKit/workouts)| Start, pause, resume, end, and cancel workouts. +[Lists and Notes](https://developer.apple.com/documentation/SiriKit/lists-and-notes)| Create notes. +Search for notes. +Create reminders based on a date, time, or location. +[Media](https://developer.apple.com/documentation/SiriKit/media)| Search for and play media content, such as video, music, audiobooks, and podcasts. +Like or dislike items. +Add items to a library or playlist. +[Messaging](https://developer.apple.com/documentation/SiriKit/messaging)| Send messages. +Search for messages. +Read received messages. +[Payments](https://developer.apple.com/documentation/SiriKit/payments)| Send payments. +Request payments. +[Car Commands](https://developer.apple.com/documentation/SiriKit/car-commands)| Activate hazard lights or honk the horn. +Lock and unlock the doors. +Check the current fuel or power level. + +### [Design responses to system intents](https://developer.apple.com/design/human-interface-guidelines/siri#Design-responses-to-system-intents) + +People use Siri for convenience, and they expect a fast response. Your app needs to perform the system intents it supports quickly and accurately so that people have a great experience when they choose your app to get things done. + +**Whenever possible, complete requests without leaving Siri.** If a request must be finished in your app, take people directly to the expected destination. Don’t show intermediary screens or messages that slow down the experience. + +**When a request has a financial impact, default to the safest and least expensive option.** Never deceive people or misrepresent information. For a purchase with multiple pricing levels, don’t default to the most expensive. When people make a payment, don’t charge extra fees without informing them. + +**When people request media playback from your app, consider providing alternative results if the request is ambiguous.** When you display alternative results within the Siri UI, people can easily choose a different piece of content if your first offering isn’t what they want. + +**On Apple Watch, design a streamlined workflow that requires minimal interaction.** Whenever possible, use intelligent defaults instead of asking for input. For example, a music app could respond to a nonspecific request — like “Play music with MyMusicApp” — by playing a favorite playlist. If you must present options to people, offer a small number of relevant choices that reduce the need for additional prompting. + +### [Enhance the voice experience for system intents](https://developer.apple.com/design/human-interface-guidelines/siri#Enhance-the-voice-experience-for-system-intents) + +Help people learn how to use Siri to get things done in your app, and make conversation with Siri feel natural in the context of your brand, by defining app-specific terms and alternative ways people might refer to your app. + +**Create example requests.** When people tap the Help button in the Siri interface, they view a guide that can include example phrases that you supply. Write phrases that demonstrate the easiest and most efficient ways to use Siri with your app. For developer guidance, see [Intent Phrases](https://developer.apple.com/documentation/SiriKit/intent-phrases). + +**Define custom vocabulary that people use with your app.** Help Siri learn more about the actions your app performs by defining specific terms people might actually use in requests, like account names, contact names, photo tags, photo album names, ride options, and workout names. Make sure these terms are nongeneric and unique to your app. Never include other app names, terms that are obviously connected with other apps, inappropriate language, or reserved phrases, like _Hey Siri_. Note that Siri uses the terms you define to help resolve requests, but there’s no guarantee that Siri will recognize them. + +**Consider defining alternative app names.** If people might refer to your app in different ways, it’s a good idea to provide a list of alternative names to help Siri understand what people mean. For example, a UnicornChat app might define the term _Unicorn_ as an alternative app name. Never impersonate other apps by listing their names as alternative names for your app. + +### [Design a custom interface for a system intent](https://developer.apple.com/design/human-interface-guidelines/siri#Design-a-custom-interface-for-a-system-intent) + +If it makes sense in your iOS app, you can supply custom interface elements or a completely custom UI for Siri or Maps to display along with your intent response. A watchOS app can’t provide a custom UI for Siri to display on Apple Watch. + +**Avoid including extraneous or redundant information.** A custom interface lets you bring elements from your app into the Siri interface, but displaying information that isn’t related to the action can distract people. You also want to avoid duplicating information that the system can display in the Siri or Maps interface. For developer guidance, see [`INParameter`](https://developer.apple.com/documentation/Intents/INParameter). + +**Make sure people can still perform the action without viewing your custom interface.** People can switch to voice-only interaction with Siri at any time, so it’s crucial to help Siri speak the same information that you display in your custom interface. + +**Use ample margins and padding in your custom interface.** Avoid extending content to the edges of your interface unless it’s content that appears to flow naturally offscreen, like a map. In general, provide a margin of 20 points between each edge of your interface and the content. Use the app icon that appears above your interface to guide alignment: content tends to look best when it’s lined up with the center of this icon. + +**Minimize the height of your interface.** The system displays other elements above and below your custom interface, such as the text prompt, the spoken response, and the Siri waveform. Aim for a custom interface height that’s no taller than half the height of the screen, so people can see all your content without scrolling. + +**Refrain from displaying your app name or icon.** The system automatically shows this information, so it’s redundant to include it in your custom interface. + +For developer guidance, see [Creating an Intents UI Extension](https://developer.apple.com/documentation/SiriKit/creating-an-intents-ui-extension). + +## [Custom intents](https://developer.apple.com/design/human-interface-guidelines/siri#Custom-intents) + +If your app lets people perform an everyday task that doesn’t fit into any of the SiriKit domains, you can create a custom intent to represent it (see [System intents](https://developer.apple.com/design/human-interface-guidelines/siri#System-intents) for a list of domains). You can also use a custom or system intent to support a shortcut, which gives people a quick way to initiate frequently performed actions by speaking a simple phrase or accepting a suggestion from Siri. To learn how to integrate your intents with the system so that people can discover them and add them to Siri, see [Shortcuts and suggestions](https://developer.apple.com/design/human-interface-guidelines/siri#Shortcuts-and-suggestions). + +### [Custom intent categories and responses](https://developer.apple.com/design/human-interface-guidelines/siri#Custom-intent-categories-and-responses) + +Although your custom intent won’t belong to a SiriKit domain, you’ll need to model it on a system-defined _intent category_ that’s related to your action. SiriKit defines several categories that represent generic tasks, like create, order, share, and search. Because these definitions are in the system, Siri knows how to communicate with people about common actions that are associated with each category — like placing an order or sharing content — in ways that feel natural. + +It’s important to choose the category that best represents your action because the category influences the ways Siri speaks about it and the controls people might see in the interface. For example, a coffee app would likely choose the order category to represent its custom _order coffee_ intent, and as a result, Siri can speak default responses that make sense in the context of this action, like “Ready to order?” and “OK. Ordering.” Category choice can have other effects, too: Because the order category includes actions that have financial impact, using this category for the _order coffee_ intent means that people will be asked to authenticate before completing the action. + +For several categories, the system defines additional verbs that are related to the category’s default action. You can use these alternative verbs to help ensure that the Siri dialogue and the button titles displayed in the interface align with the way you present your app’s actions. For example, in addition to the default verb _order_ , the order category includes the verbs _buy_ and _book_. + +SiriKit defines the following custom intent categories and associated verbs. + +Category| Default verb| Additional verbs +---|---|--- +Generic| Do| Run, go +Information| View| Open +Order| Order| Book, buy +Start| Start| Navigate +Share| Share| Post, send +Create| Create| Add +Search| Search| Find, filter +Download| Download| Get +Other| Set| Request, toggle, check in + +SiriKit also defines three response types: + + * Confirmation. Confirms that people still want to perform the action. + + * Success. Indicates that the action has been initiated. + + * Error. Tells people that the action can’t be completed. + + + + +In several custom intent categories, SiriKit defines default dialogue for each response type. For example, the default confirmation dialogue for the order category is, “Ready to order?” and the default success dialogue for the share category is, “OK. Shared.” + +To customize a response, you create a template that combines dialogue you write with placeholders for relevant information your app can supply while it’s working on the intent. For example, a coffee app might enhance the default order confirmation dialogue by providing custom content that includes a placeholder for the total cost of the order. + +Depending on the response type, your custom dialogue is presented before or after the default dialogue. For example, confirmation responses present the default dialogue after any custom dialogue. In the coffee app example, the customized confirmation dialogue would begin with something like, “Your large coffee with cream comes to $2.50” and end with the default dialogue, “Ready to order?” + +### [Design a custom intent](https://developer.apple.com/design/human-interface-guidelines/siri#Design-a-custom-intent) + +If a built-in SiriKit intent represents your action’s purpose, adopt that intent instead of defining a custom intent. For example, if you’d like to offer a shortcut for sending a message, adopt [`INSendMessageIntent`](https://developer.apple.com/documentation/Intents/INSendMessageIntent); if you’d like to offer a shortcut for playing media, adopt [`INPlayMediaIntent`](https://developer.apple.com/documentation/Intents/INPlayMediaIntent). For guidance, see [System intents](https://developer.apple.com/design/human-interface-guidelines/siri#System-intents). + +**If your app’s action requires a custom intent, pick the category that most closely matches the action.** A category informs the system about the general function of an intent or shortcut — like order, download, or search — and affects the text and spoken dialogue presented to people when a shortcut is offered by the system or used with Siri. You design the flow of conversation for the custom intents you offer, so it’s essential that you choose a category that corresponds to the meaning of each intent. + +Tip + +If 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. + +**Design custom intents that accelerate common, useful tasks.** Take advantage of the familiarity people have with your app, and make it easier for them to initiate the tasks they perform most often. + +**Ensure that your intent works well in every scenario.** Make it easy for people to run your intent as a shortcut, regardless of how they initiate it. For example, be prepared for people to run it using their voice on devices with and without a screen, from suggestions on the lock screen or the Siri face on Apple Watch, from search, and within a multistep shortcut. + +**In general, design custom intents for tasks that aren’t overly complex.** People benefit the most from intents that reduce the number of actions required to complete a task. Don’t counteract that simplicity by requiring people to engage in a lengthy conversation with your app. You can also reduce the likelihood of user errors by limiting custom intents to clearly defined tasks. + +**Design your intents to be long-lived.** Avoid offering intents that are date-specific or associated with temporary data. For example, it’s not a good idea for a travel app to offer a custom intent for each specific itinerary. A better intent might use follow-up questions to let people get the itinerary for one of their upcoming trips. + +**Don’t request permission to use Siri.** If your app supports only custom intents — and not system intents — you don’t need to get permission to use Siri before letting people create and use voice shortcuts for your intents. Asking for permission can slow people down and could discourage them from using your app’s custom intents. + +**Support background operation.** The best intents support shortcuts that run quickly and don’t pull people out of their current context. Strive to support custom intents that can run in the background without bringing your app to the front. Supporting background operation also ensures that people can complete the task in hands-free and voice-only scenarios. + +### [Help people customize their requests](https://developer.apple.com/design/human-interface-guidelines/siri#Help-people-customize-their-requests) + +Custom intents can offer follow-up questions that let people do more with a single intent by refining its results on the fly. For example, if you offer an _order coffee_ intent, you can help people get exactly what they want by asking them questions like, “What size?”, “What flavor?”, and “Which location?” Details like size, flavor, and location are _parameters_ your app can define to help people personalize their request. + +People supply parameter values to personalize an intent by responding to your follow-up questions or by editing existing values in the Shortcuts app. For example, if you offer an _order ground coffee_ intent that includes a parameter for the grind size, you might supply a follow-up question like, “Which grind?” For people who typically order the coarse grind, you could simplify the interaction by using the value _coarse_ as the default parameter value in a dialogue like, “Do you want coarse-ground coffee?” If people choose a different grind, you can follow up by presenting the full list of options. In voice-only scenarios, Siri speaks your follow-up questions and sends you the responses. When people use the Shortcuts app to edit a parameter value, you receive the new value when they use the associated shortcut. For developer guidance, see [Adding User Interactivity with Siri Shortcuts and the Shortcuts App](https://developer.apple.com/documentation/SiriKit/adding-user-interactivity-with-siri-shortcuts-and-the-shortcuts-app). + +**Design intents that require as few follow-up questions as possible.** Often, an intent can fulfill a request without asking any follow-up questions. Although follow-up questions make intents more flexible, you don’t want to force people into a long interaction. In most cases, it’s best to offer just one or two follow-up questions. + +**List the smallest number of options possible, and sort the items in a way that makes sense.** As with too many follow-up questions, giving people too many options can make completing the task feel onerous. As you determine whether to include an item, consider its complexity as well as its utility. In a food-ordering app, for example, it might be easier for people to parse a list of individual menu items than a list of orders, each of which contains multiple items. After you identify a small number of useful items, consider sorting them by recency, frequency, or popularity. + +**Make sure each follow-up question is meaningful.** Ideally, each follow-up question helps people make an important choice. If options or questions you present are too granular or too similar, the conversation can become repetitive, and people may feel like using your intent is too much work. + +**Design parameters that are easy for people to understand and use.** Aim for parameters that represent simple values or attributes and name them using simple, straightforward terms. For example, a soup-ordering app might define parameters for the type of soup, the serving size, and a delivery location, using names like _soup_ , _size_ , and _location_. For guidance, see [Shortcuts and suggestions](https://developer.apple.com/design/human-interface-guidelines/siri#Shortcuts-and-suggestions). + +**Ask for confirmation only when necessary.** An intent can ask people for confirmation before completing the task or when interpreting an answer to a follow-up question. Apps that support tasks that have financial impact, like an app that helps people place orders, must ask for confirmation before completing an order. For tasks that don’t have financial impact, asking for confirmation can feel like too much extra work and can sometimes discourage people from completing their request. In all cases, avoid asking for confirmation more than once. + +**Support follow-up questions when it makes sense.** For example, an app that helps people order food might offer options for pickup or delivery, but ask for a specific location only after people choose the delivery option. + +**Prioritize the options you offer based on the context in which people run your shortcut.** For example, if people use your shortcut to order an item for pickup, offer pickup locations that are currently close by. Offering options that adapt to the context in which your shortcut is run can help people avoid creating separate shortcuts for specific options. + +**Consider adjusting the parameter values you offer when people set up your shortcut.** When you indicate that a parameter has dynamic options, you can enhance the shortcut setup experience in two ways: + + * You can find and present parameter values that are relevant to the context people are in while they’re setting up the shortcut. For example, if people use the Shortcuts app to choose a value for a store-location parameter, the parameter can dynamically generate a list of stores that are currently closest to the device. + + * You can present a comprehensive list of parameter values. When people set up a shortcut, having an extensive list of parameter values can help them create the shortcut they want. In contrast, when people use a shortcut to accelerate an action, they generally prefer the convenience of having a shorter list of choices. + + + + +For developer guidance, see the `storeLocation` parameter in the intent definition file of the [Soup Chef: Accelerating App Interactions with Shortcuts](https://developer.apple.com/documentation/SiriKit/soup-chef-accelerating-app-interactions-with-shortcuts) sample code project. + +### [Enhance the voice experience for custom intents](https://developer.apple.com/design/human-interface-guidelines/siri#Enhance-the-voice-experience-for-custom-intents) + +**Aim to create conversational interactions.** You can customize what Siri says throughout the voice experience, including the handling of follow-up questions. Try writing a script and acting it out with another person to see how well your dialogue works in a face-to-face exchange. Experiencing custom dialogue in this way can help you find places where the interaction doesn’t feel natural. + +**Help people understand errors and failures.** The system provides some default error descriptions, but it’s best to enhance error responses so that they’re specific to the current situation. For example, if chicken noodle soup is sold out, a soup app can respond with a custom error like, “Sorry, we’re out of chicken noodle soup” instead of “Sorry, we can’t complete your order.” + +**Strive for engaging voice responses.** Remember that people may perform your app’s tasks from their HomePod, using “Hey Siri” with their AirPods, or through CarPlay without looking at a screen. In these cases, the voice response needs to convey the same essential information that the visual elements display to ensure that people can get what they need no matter how they interact with Siri. + +**Create voice responses that are concise, descriptive, and effective in voice-driven scenarios.** As with a shortcut title, an effective custom spoken response clearly conveys what’s happening as the shortcut runs. If you ask follow-up questions, be sure to customize the default dialogue for clarity. For example, “Which soup?” is clearer than “Which one?” + +**Avoid unnecessary repetition.** People tend to run voice shortcuts frequently, so they may hear the same prompt multiple times when answering follow-up questions or dealing with errors. Use the context of the current conversation to remove as many details from the prompts as possible. Avoid including unnecessary words or attempts at humor, because both can become irritating over time. + +**Help conversations with Siri feel natural.** People interact with Siri in a variety of ways, like choosing a list item by saying “the second one,” or, in the case of a soup-ordering app, saying “large” or “small” instead of “bowl” or “cup.” You can make people’s Siri interactions feel more natural when you give the system alternative terms and phrases that work as app-specific synonyms (like using “bowl” as a synonym for “large”). Also consider enhancing clarity by providing alternative dialogue options for Siri to speak. For example, the soup app might present a list of onscreen menu options like “1 clam chowder,” or “1 clam chowder and 1 tomato,” but speak these options as “Which order? The one with clam chowder only or the one that includes tomato?” + +**Exclude your app name.** The system provides verbal and visual attribution for your app when responding to people. Including your appʼs name in a verbal response is redundant and may make the experience of interacting with Siri feel less natural. Siri speaks your app’s name less frequently when people have used a shortcut several times, because it isn’t necessary to keep reminding them which app is responding. + +**Don’t attempt to mimic or manipulate Siri.** Never impersonate Siri, attempt to reproduce the functionality that Siri provides, or provide a response that appears to come from Apple. + +**Be appropriate and respect parental controls.** Never present offensive or demeaning content. Keep in mind that many families use parental controls to restrict explicit content and content that’s based on specific rating levels. + +**Avoid using personal pronouns.** Create content that’s inclusive of all people. + +**Consider letting people view more options in your app.** If the list of options doesn’t include the items people need, you might want to include an item that lets people open your app to see more. In the list, you could use copy like, “See more in _App Name_ ,” and in spoken dialogue, you might encourage people to say, “More options.” + +**Keep responses device-independent.** People may use Siri to interact with your app via Apple Watch, HomePod, iPad, iPhone, or CarPlay. If you must provide device-specific wording, make sure it accurately reflects the person’s current device. + +**Don’t advertise.** Don’t include advertisements, marketing, or in-app purchase sales pitches in your intent content. + +## [Shortcuts and suggestions](https://developer.apple.com/design/human-interface-guidelines/siri#Shortcuts-and-suggestions) + +When you support shortcuts, people have a variety of ways to discover and interact with the custom and system intents your app provides. For example: + + * Siri can suggest a shortcut for an action people have performed at least once by offering it in search results, on the lock screen, and in the Shortcuts app. + + * Your app can supply a shortcut for an action that people haven’t done yet but might want to do in the future, so that the Shortcuts app can suggest it or it can appear on the [Siri watch face](https://support.apple.com/guide/watch/faces-and-features-apde9218b440/watchos#apdcc88df92c). + + * People can use the Shortcuts app to view all their shortcuts and even combine actions from different apps into multistep shortcuts. + + * People can also use the Shortcuts app to automate a shortcut by defining the conditions that can run it, like time of day or current location. + + + + +The Shortcuts app is also available in macOS 12 and later and in watchOS 7 and later. For developer guidance, see [SiriKit](https://developer.apple.com/documentation/SiriKit). + +Developer note + +The Add to Siri method for adding shortcuts is no longer supported. See [App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts) for ways to integrate your app with Siri and the system. + +### [Make app actions widely available](https://developer.apple.com/design/human-interface-guidelines/siri#Make-app-actions-widely-available) + + _Donating_ information about the actions your app supports helps the system offer them to people in various ways, such as: + + * In search results + + * Throughout the Shortcuts app + + * On the lock screen as a Siri Suggestion + + * Within the Now Playing view (for recently played media content) + + * During Wind Down + + + + +Donations also power Automation Suggestions in the Shortcut app’s Gallery, making it easy for people to set up automations for hands-free interactions with your app. + +You can also tell the system about shortcuts for actions people haven’t taken yet or make a shortcut available on the Siri watch face (for guidance, see [Suggest Shortcuts people might want to add to Siri](https://developer.apple.com/design/human-interface-guidelines/siri#Suggest-Shortcuts-people-might-want-to-add-to-Siri) and [Display shortcuts on the Siri watch face](https://developer.apple.com/design/human-interface-guidelines/siri#Display-shortcuts-on-the-Siri-watch-face)). For developer guidance, see [Donating Shortcuts](https://developer.apple.com/documentation/SiriKit/donating-shortcuts). + +**Make a donation every time people perform the action.** When you donate a shortcut each time people perform the associated action, you help the system more accurately predict the best time and place to offer the shortcut. + +**Only donate actions that people actually perform.** For example, a coffee-ordering app donates the _Order coffee_ shortcut every time people order coffee, but not when people do something else, like browse the menu. Similarly, a media app donates information about a song — like its title and album — only when people are actually listening to it. (For developer guidance, see [Improving Siri Media Interactions and App Selection](https://developer.apple.com/documentation/SiriKit/improving-siri-media-interactions-and-app-selection).) + +**Remove donations for actions that require corresponding data.** If information required by a donated action no longer exists, your app needs to delete the donation so the shortcut isn’t suggested anymore. For example, if people delete a contact in a messaging app, the app needs to delete donations for messaging that contact. When people create a shortcut themselves, only they can delete it. For developer guidance, see [Deleting Donated Shortcuts](https://developer.apple.com/documentation/SiriKit/deleting-donated-shortcuts). + +**If your app handles reservations, consider donating them to the system.** These items — like ticketed events, travel itineraries, or reservations for restaurants, flights, or movies — automatically appear as suggestions in Calendar or Maps. When you donate a reservation, it can appear on the lock screen with a suggestion to check in with your app or as a reminder that uses current traffic conditions to recommend when people should leave. For developer guidance, see [Donating Reservations](https://developer.apple.com/documentation/SiriKit/donating-reservations). + +#### [Suggest Shortcuts people might want to add to Siri](https://developer.apple.com/design/human-interface-guidelines/siri#Suggest-Shortcuts-people-might-want-to-add-to-Siri) + +If your app supports an action that people haven’t performed yet but might find useful, you can provide a _suggested_ shortcut to the system so that people can discover it. For example, if people use a coffee-ordering app to order their daily coffee but not to order a holiday special, the app might still want to give them a way to do this with an _Order holiday coffee_ shortcut. + +Suggested shortcuts appear in both the Gallery and the shortcut editor in the Shortcuts app. For developer guidance, see [Offering Actions in the Shortcuts App](https://developer.apple.com/documentation/SiriKit/offering-actions-in-the-shortcuts-app). + +#### [Display shortcuts on the Siri watch face](https://developer.apple.com/design/human-interface-guidelines/siri#Display-shortcuts-on-the-Siri-watch-face) + +On Apple Watch, people can run shortcuts in several ways. For example, people can ask Siri, tap a shortcut [complication](https://developer.apple.com/design/human-interface-guidelines/complications) on a watch face, or use the Shortcuts app available in watchOS 7 and later. You can also make shortcuts available on the Siri watch face. + +To have a shortcut appear on the Siri watch face, you define a _relevant_ shortcut by including information like the time of day at which your shortcut is relevant and how the shortcut can display on the Siri watch face. The information you supply lets the Siri watch face intelligently display your shortcut to people when they’re in the appropriate context. + +For developer guidance, see [Defining Relevant Shortcuts for the Siri Watch Face](https://developer.apple.com/documentation/SiriKit/defining-relevant-shortcuts-for-the-siri-watch-face). + +### [Create shortcut titles and subtitles](https://developer.apple.com/design/human-interface-guidelines/siri#Create-shortcut-titles-and-subtitles) + +Shortcut titles and subtitles appear when the system suggests them. In Siri Suggestions on iPhone and Apple Watch, a shortcut can also display an image. + +**Be concise but descriptive.** An effective title conveys what happens when the shortcut runs. A subtitle can provide additional detail that supplements — but doesn’t duplicate — the title. + +**Start titles with a verb and use sentence-style capitalization without punctuation.** Think of a shortcut title as a brief instruction. + +| Example title +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| _Order my favorite coffee_ +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| _Large latte_ +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| _Show today’s forecast_ +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| _Weather forecast_ + +**Lead with important information.** Long titles and subtitles may be truncated in certain contexts, depending on the device’s screen size. + +**Exclude your app name.** The system already identifies the app associated with a shortcut. + +**Localize titles and subtitles.** Providing content in multiple languages ensures an equally great experience for people everywhere. + +**Consider providing a custom image for a more engaging suggestion.** For example, the shortcut for _Order my favorite coffee_ could show a cup of the customer’s favorite coffee. Create an image that measures: + + * 60x60 pt (180x180 px @ 3x) to display in an iOS app + + * 34x34 pt (68x68 px @2x) to display on the Siri watch face on the 44mm Apple Watch (watchOS scales down the image for smaller watches) + + + + +### [Provide default phrases for shortcuts](https://developer.apple.com/design/human-interface-guidelines/siri#Provide-default-phrases-for-shortcuts) + +Your app provides default phrases for shortcuts during setup. People can personalize these phrases when adding your shortcuts to Siri. + +**Keep phrases short and memorable.** Bear in mind that people must speak your phrase verbatim, so long or confusing phrases may result in mistakes and frustration. Two- and three-word phrases tend to work best. More words can be harder for people to remember, and phrases that are too long will get truncated. + +**Make sure the phrases you suggest are accurate and specific.** Phrases like _Reorder coffee_ or _Order my usual coffee_ clearly describe what the shortcut does, which makes it easier for people to remember the phrase later. Also make sure that your suggested phrases are specific to each shortcut’s scope. For example, _Watch baseball_ is clearer and more memorable than _Watch sports_. It’s also important to avoid implying that people can vary a shortcut’s invocation phrase to get a different result. For example, people might interpret a phrase like _Order a large clam chowder_ to mean that your shortcut will give them what they want if they substitute “small” for “large” and “lobster bisque” for “clam chowder.” + +**Don’t commandeer core Siri commands.** For example, never suggest a phrase like _Call 911_ or include the text _Hey Siri_. + +### [Make shortcuts customizable](https://developer.apple.com/design/human-interface-guidelines/siri#Make-shortcuts-customizable) + +When you define a parameter for each detail your app needs to perform an intent, people can customize the shortcut by editing these details in the Shortcuts app. + +To show people which details they can edit and how their edits affect the action, you provide a _parameter summary_. A parameter summary succinctly describes the action by using the parameters in a sentence that begins with a verb. For example, a customizable _Order coffee_ shortcut could display a parameter summary like “Order _quantity_ _coffee_ ” where _quantity_ and _coffee_ are the parameters that people can edit. Here’s an example of how the _Order coffee_ shortcut might look after people supply values for the _quantity_ and _coffee_ parameters. + +**Provide a parameter summary for each custom intent you support.** At minimum, include in your parameter summary all parameters your intent requires and any parameters that receive values from other apps or actions. The summary doesn’t have to include optional parameters or parameters that people aren’t likely to edit; if you omit parameters like these from the summary, people can still access them in the Show More section. + +**Craft a short parameter summary that’s clearly related to your intent’s title.** When the intent title and the parameter summary are similar, it’s easy for people to recognize the action regardless of where they view it. Aim to use the same words in the summary and the title — in particular, it’s helpful to begin both phrases with the same verb. For example, if your intent title is “Search encyclopedia,” a good parameter summary could be “Search encyclopedia for _search term_.” + +**Aim for a parameter summary that reads like a sentence.** Use sentence-style capitalization, but don’t include ending punctuation. When possible, avoid punctuation entirely. Punctuation within a summary — especially colons, semicolons, and parentheses — can make the summary hard to read and understand. + +**Provide multiple parameter summaries when necessary.** If your action includes a parameter that has a parent-child relationship with other parameters, you can provide multiple variants of the summary based on the current value of the parent parameter. For example, if your _order coffee_ shortcut lets people specify whether they want to pick up their order or have it delivered, your parameter summary can reflect the current choice. In this scenario, create one parameter summary that helps people pick a store location and another summary that helps them pick a delivery address. Be sure to use a consistent grammatical structure and parameter order in all variants of the summary that you create. + +**Provide output parameters for information that people can use in a multistep shortcut.** For example, an _order coffee_ action might provide output that includes the estimated delivery time and the cost of the order. With this information, people could create a multistep shortcut that messages a friend about the delivery time and logs the transaction in their favorite budgeting app. + +**Consider defining an input parameter.** When you define an input parameter for an action, the action can automatically receive output from a preceding action in a multistep shortcut. For example, if your action applies a filter to the image it receives in an _image_ parameter, you might designate _image_ as the input parameter so that it automatically accepts images from other actions. You configure an input parameter in your intent definition file (shown in [Adding User Interactivity with Siri Shortcuts and the Shortcuts App](https://developer.apple.com/documentation/SiriKit/adding-user-interactivity-with-siri-shortcuts-and-the-shortcuts-app#3239040)). + +**Help people distinguish among different variations of the same action.** For example, an app that offers a _send message_ action might use a contact photo to help people visually distinguish the various messages they send. To do this, choose the parameter that’s most identifiable to people and designate it as the key parameter (shown in [Adding User Interactivity with Siri Shortcuts and the Shortcuts App](https://developer.apple.com/documentation/SiriKit/adding-user-interactivity-with-siri-shortcuts-and-the-shortcuts-app#3239040)). Be sure to provide an image for the key parameter every time you donate the action (for developer guidance, see [`INImage`](https://developer.apple.com/documentation/Intents/INImage)). + +**Avoid providing multiple actions that perform the same basic task.** For example, instead of providing an action that adds text to a note and a different action that adds an image, consider providing a single action that lets people add both types of content. Providing a few high-level actions can make it easier for people to understand what the actions do when they’re combined in a multistep shortcut. + +For developer guidance, see [Shortcut-Related UI](https://developer.apple.com/documentation/SiriKit/shortcut-related-ui). + +## [Editorial guidelines](https://developer.apple.com/design/human-interface-guidelines/siri#Editorial-guidelines) + +**Don’t refer to Siri using pronouns like “she,” “him,” or “her.”** Ideally, just use the word _Siri_. For example, _After you add a shortcut to Siri, you can run the shortcut anytime by asking Siri_. + +**Use correct capitalization and punctuation when using the term _Hey Siri_.** _Hey Siri_ is two words, italicized or in quotes, with an uppercase _H_ and uppercase _S_. Do not follow the term with an ellipsis. + +| Example text +---|--- +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| _Say Hey Siri to activate Siri._ +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png)| _Say “Hey Siri” to activate Siri._ +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| _Say Hey Siri… to activate Siri._ +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png)| _Say “hey Siri” to activate Siri._ + +**In a localized context, translate only the word _Hey_ in the phrase _Hey Siri_.** As an Apple trademark, _Siri_ is never translated. Here is a list of acceptable translations for the phrase _Hey Siri_ : + +Locale code| _Hey Siri_ translation| Locale code| _Hey Siri_ translation +---|---|---|--- +ar_AE| يا Siri| fr_CA| Dis Siri +ar_SA| يا Siri| fr_CH| Dis Siri +da_DK| Hej Siri| fr_FR| Dis Siri +de_AT| Hey Siri| it_CH| Ehi Siri +de_CH| Hey Siri| it_IT| Ehi Siri +de_DE| Hey Siri| ja_JP| Hey Siri +en_AU| Hey Siri| ko_KR| Siri야 +en_CA| Hey Siri| ms_MY| Hai Siri +en_GB| Hey Siri| nb_NO| Hei Siri +en_IE| Hey Siri| nl_BE| Hé, Siri +en_IN| Hey Siri| nl_NL| Hé Siri +en_NZ| Hey Siri| no_NO| Hei Siri +en_SG| Hey Siri| pt_BR| E aí Siri +en_US| Hey Siri| ru_RU| привет Siri +en_ZA| Hey Siri| sv_SE| Hej Siri +es_CL| Oye Siri| th_TH| หวัดดี Siri +es_ES| Oye Siri| tr_TR| Hey Siri +es_MX| Oye Siri| zh_CN| 嘿Siri +es_US| Oye Siri| zh_HK| 喂 Siri +fi_FI| Hei Siri| zh_TW| 嘿 Siri +fr_BE| Dis Siri| | + +### [Referring to Shortcuts](https://developer.apple.com/design/human-interface-guidelines/siri#Referring-to-Shortcuts) + +**When referring to the Shortcuts feature or app, always typeset with a capital S and make sure that _Shortcuts_ is plural.** For example, _MyApp integrates with Shortcuts to provide a quick way to get things with just a tap or by asking Siri._ + +**When referring to individual shortcuts (that is, not the feature or the Shortcuts app), use lowercase.** For example, _Run a shortcut by asking Siri or tapping a suggestion on the Lock Screen_. + +**Use the right terminology when describing how people can use Shortcuts in your app.** People run shortcuts by asking Siri, so your wording needs to be very similar to phrases like _Run a shortcut by asking Siri_ or _Run the shortcut by asking Siri with your personalized phrase_ (localized as appropriate). Avoid using phrases like _add voice shortcuts_ , _make a voice command_ , _create a voice prompt_ , or any other variation. Instead, consider a phrase like _Add a shortcut to Siri to run with your voice_ (localized as appropriate). + +To encourage people to create or use shortcuts in ways other than voice — like automations, Home Screen shortcuts, and other methods — use a phrase that doesn’t specify a particular method, like _For quick access, add to Shortcuts_. + +Note + +Use translations of your app name and the word _Shortcuts_ — but not _Siri_ — when referring to them in a localized context. + +### [Referring to Apple products](https://developer.apple.com/design/human-interface-guidelines/siri#Referring-to-Apple-products) + +**Adhere to Apple’s trademark guidelines.** Apple trademarks can’t appear in your app name or images. In text, use Apple product names exactly as shown on the [Apple Trademark List](https://www.apple.com/legal/intellectual-property/trademark/appletmlist.html). + + * Use Apple product names in singular form only; don’t make Apple product names possessive. + + * Don’t translate Apple, Siri, or any other Apple trademark. + + * Don’t use category descriptors. For example, say iPad, not tablet. + + * Don’t indicate any kind of sponsorship, partnership, or endorsement from Apple. + + * Attribute Apple, Siri, and all other Apple trademarks with the correct credit lines wherever legal information appears within your app. + + * Refer to Apple devices and operating systems only in technical specifications or compatibility descriptions. + + + + +See [Guidelines for Using Apple Trademarks](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/siri#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/siri#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/siri#Related) + +[App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts) + +[Design for intelligence](https://developer.apple.com/news/?id=mb3c4r4r) + +[Guidelines for using Apple trademarks and copyrights](https://www.apple.com/legal/intellectual-property/guidelinesfor3rdparties.html) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/siri#Developer-documentation) + +[SiriKit](https://developer.apple.com/documentation/SiriKit) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/siri#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/3055294D-836B-4513-B7B0-0BC5666246B0/4D88FD13-E491-4499-AA3F-8A84CF4BA607/9999_wide_250x141_1x.jpg) Design interactive snippets ](https://developer.apple.com/videos/play/wwdc2025/281) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/siri#Change-log) + +Date| Changes +---|--- +June 5, 2023| Removed Add to Siri guidance. Added references to the new [App Shortcuts](https://developer.apple.com/design/human-interface-guidelines/app-shortcuts) page. +May 2, 2023| Consolidated guidance into one page. + diff --git a/skills/hig-technologies/references/tap-to-pay-on-iphone.md b/skills/hig-technologies/references/tap-to-pay-on-iphone.md new file mode 100644 index 00000000..e8fd1c15 --- /dev/null +++ b/skills/hig-technologies/references/tap-to-pay-on-iphone.md @@ -0,0 +1,208 @@ +--- +title: "Tap to Pay on iPhone | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone + +# Tap to Pay on iPhone + +Tap to Pay on iPhone lets merchants accept contactless payments using an app on their iPhone, without having to connect external hardware. + +![A sketch of progressively larger curved lines extending toward the right within a circle, suggesting Tap to Pay on iPhone. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/8dc8e961db3023f79bbdaaec49b8c194/technologies-TapToPay-intro%402x.png) + +When you support Tap to Pay on iPhone in your iOS payment app, you help merchants present a consistent and trusted payment experience to their customers. + +Note + +Tap to Pay on iPhone works alongside your existing payment-acceptance hardware and accessories. + +Before you can integrate Tap to Pay on iPhone into your iOS app, you need to work with a supported payment service provider (PSP), request the Tap to Pay on iPhone entitlement, and use [ProximityReader](https://developer.apple.com/documentation/ProximityReader) APIs, either through the PSP’s SDK or by adopting the framework. For high-level guidance — including marketing recommendations for letting people know about your app’s new capabilities — see [Tap to Pay on iPhone](https://developer.apple.com/tap-to-pay/); for developer guidance, see [Setting up Tap to Pay on iPhone](https://developer.apple.com/documentation/ProximityReader/setting-up-the-entitlement-for-tap-to-pay-on-iPhone). + +Note + +If your PSP offers an SDK that supplies user interfaces for experiences like showing a tap result, see the documentation the PSP provides. + +## [Enabling Tap to Pay on iPhone](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Enabling-Tap-to-Pay-on-iPhone) + +Before your app can enable Tap to Pay on iPhone and configure a merchant’s device, the merchant must accept the relevant terms and conditions. Use the ProximityReader API to help you get the current status and present an acceptance flow only when necessary. For developer guidance, see [Adding support for Tap to Pay on iPhone to your app](https://developer.apple.com/documentation/ProximityReader/adding-support-for-tap-to-pay-on-iphone-to-your-app#Display-the-Terms-and-Conditions-interface-to-the-merchant). + +**Help merchants accept Tap to Pay on iPhone terms and conditions before they begin interacting with their customers.** Merchants must accept the terms and conditions before you perform the initial device configuration, so it works well when they can do so before they begin a checkout or other customer-facing flow. For example, you can provide buttons that let people accept Tap to Pay on iPhone terms and conditions from within your [in-app messaging](https://developer.apple.com/tap-to-pay/marketing-guidelines/#in-your-app) or onboarding flows. + +![An illustration of an app screen that describes the feature and contains a button labeled 'Enable Tap to Pay on iPhone'.](https://docs-assets.developer.apple.com/published/a41cd2da2fc8940033e2ea6b75606197/tap-to-pay-introduction-screen%402x.png)An app screen that offers a way to accept Tap to Pay on iPhone terms and conditions + +![An illustration of an app screen that contains a button labeled 'Try a test transaction'.](https://docs-assets.developer.apple.com/published/3b8b8486581947e539f4acee1007fba4/tap-to-pay-confirmation-screen%402x.png)An app screen that shows Tap to Pay on iPhone is enabled and offers a way to try it + +**Present Tap to Pay on iPhone terms and conditions only to an administrative user.** If a nonadministrator tries to activate the feature, present a message explaining that administrator access is required. If your app’s primary users are enterprise or nonadministrative users, you can let an administrator accept Tap to Pay on iPhone terms and conditions through a web interface or a different app, including one that can run on devices other than iPhone. Contact your PSP for implementation details. + +**If necessary, help merchants make sure their device is up to date.** If your PSP requires specific versions of iOS, be sure to present the terms and conditions only after the merchant updates their device. + +## [Educating merchants](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Educating-merchants) + +Some merchants may be unfamiliar with Tap to Pay on iPhone, so it’s important to give them a quick and easy way to get started. + +**Provide a tutorial that describes the supported payment types and shows how to use Tap to Pay on iPhone to accept each type.** You can offer this tutorial by: + + * Including it in a Learn More option in your in-app messaging + + * Automatically presenting it after merchants accept the Tap to Pay on iPhone terms and conditions + + * Automatically presenting it to new users of your app + + * Making it easy to find in a consistent place like your app’s help content or settings area + + + + +You can build your app’s tutorial using Apple-approved assets from the [Tap to Pay on iPhone marketing guidelines](https://developer.apple.com/tap-to-pay/marketing-guidelines/), or you can use the [`ProximityReaderDiscovery`](https://developer.apple.com/documentation/ProximityReader/ProximityReaderDiscovery) API to provide a pre-built merchant education experience. Apple ensures that the API is up to date and is localized for the merchant’s region. + +![An illustration of an app's Tutorials screen in Settings, with a link to open the merchant education tutorial experience.](https://docs-assets.developer.apple.com/published/6e4f01e90092b71a1a173c0bdf4c9726/tap-to-pay-merchant-settings-tutorials%402x.png) + +Your app’s settings area is a good place to make sure the tutorial is always available. + +![An illustration of the Tap to Pay on iPhone merchant education tutorial sheet, which includes an image of the Tap to Pay behavior and instructions for how to accept a first payment.](https://docs-assets.developer.apple.com/published/e5bab425805217aa9d34d7107b751d75/tap-to-pay-merchant-education-contactless-cards%402x.png) + +The merchant education tutorial provided by the `ProximityReaderDiscovery` API. + +If you design your own tutorial, make sure it shows how to: + + * Launch a checkout flow for each type of payment + + * Help a customer position their contactless card or digital wallet on the merchant’s device for payment + + * Handle PIN entry for a card, including accessibility mode + + + + +Finally, provide an opportunity at the end of the tutorial for merchants who haven’t accepted the Tap to Pay on iPhone terms and conditions yet to do so. + +## [Checking out](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Checking-out) + +Checking out is a time-sensitive action, and merchants need the process to work smoothly. As you design your checkout flow, be prepared to: + + * Offer payment options in addition to Tap to Pay on iPhone, as necessary + + * Respond quickly if a merchant initiates checkout before enabling Tap to Pay on iPhone + + * Help merchants perform checkout even if device configuration is still in progress + + * Present pre-payment actions that affect the final total before checkout completes + + + + +**Provide Tap to Pay on iPhone as a checkout option whether the feature is enabled or not.** Including a Tap to Pay on iPhone button gives merchants the flexibility to use the feature without exiting the checkout flow. When merchants tap the button, present the terms and conditions if necessary and automatically display the Tap to Pay on iPhone screen when configuration completes. + +**Avoid making merchants wait to use Tap to Pay on iPhone.** In addition to performing the initial configuration for each device, you need to perform a subsequent configuration each time your app becomes frontmost. To minimize potential wait times, prepare the feature as soon as your app starts and immediately after each transition to the foreground. For developer guidance, see [`prepare(using:)`](https://developer.apple.com/documentation/ProximityReader/PaymentCardReader/prepare\(using:\)). + +**Make sure the Tap to Pay on iPhone checkout option is available even if configuration is continuing in the background.** Merchants must always be able to select the Tap to Pay on iPhone checkout option in a checkout flow. During configuration, let merchants select the checkout option and then display a progress indicator — avoid waiting for configuration to complete before making the option available. In most scenarios, you can display an indeterminate progress indicator, but if ProximityReader API shows that configuration is ongoing, display a determinate progress indicator. For guidance, see [Progress indicators](https://developer.apple.com/design/human-interface-guidelines/progress-indicators); for developer guidance see [`PaymentCardReader.Event.updateProgress(_:)`](https://developer.apple.com/documentation/ProximityReader/PaymentCardReader/Event/updateProgress\(_:\)). + +![An illustration of an app screen that displays a determinate progress indicator followed by the text 'Preparing Tap to Pay on iPhone' above a purchase total.](https://docs-assets.developer.apple.com/published/75c45da83b016a137a5f42a6d0df9eb7/tap-to-pay-processing-screen-determinate-progress%402x.png)An app screen that displays a determinate progress indicator during configuration + +![An illustration of an app screen that displays an indeterminate progress indicator followed by the text 'Preparing Tap to Pay on iPhone' above a purchase total.](https://docs-assets.developer.apple.com/published/44204349e40fe79fed0268cb77c6411a/tap-to-pay-processing-screen-indeterminate-progress%402x.png)An app screen that displays an indeterminate progress indicator during configuration + +**If your app supports multiple payment-acceptance methods, make the Tap to Pay on iPhone button easy to find.** Avoid making merchants scroll to access the feature. If your app doesn’t support other payment acceptance options, open Tap to Pay on iPhone automatically when checkout begins. + +**Make it easy for merchants to switch between Tap to Pay on iPhone and the hardware accessories you support.** Even though your support for Tap to Pay on iPhone is separate from your support for a hardware accessory, such as a Bluetooth chip and PIN card reader, you can streamline the user experience by helping merchants set up both methods at the same time. After setup, make sure merchants can choose the appropriate payment-acceptance method during the checkout flow without having to visit your app settings. + +**For the label of the button that activates the feature, use “Tap to Pay on iPhone” or, if space is constrained, “Tap to Pay.”** The exception is if Tap to Pay on iPhone is the only payment-acceptance method you support. In this case, you can reuse your existing Charge or Checkout buttons to activate Tap to Pay on iPhone. If you support multiple payment-acceptance methods and you use icons in the buttons that activate them, use the `wave.3.right.circle` or `wave.3.right.circle.fill` [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) in your Tap to Pay on iPhone button. Always avoid including the Apple logo in Tap to Pay on iPhone buttons. + +![An illustration of a 'Tap to Pay' button containing an icon. The button correctly includes a wave symbol followed by the words 'Tap to Pay on iPhone'.](https://docs-assets.developer.apple.com/published/2847ded54a90ef597b34b7ff333e47b2/tap-to-pay-on-iphone-symbol-correct%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a 'Tap to Pay' button containing an icon. The button incorrectly includes the Apple logo followed by the words 'Tap to Pay on iPhone'.](https://docs-assets.developer.apple.com/published/cb1cece72b73adf6bed5429864699859/tap-to-pay-on-iphone-logo-incorrect%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +Important + +Use the “Tap to Pay on iPhone” label only for payment actions. For language you can use for nonpayment actions, see [Additional interactions](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Additional-interactions). + +**Design your Tap to Pay on iPhone button to match the other buttons in your app.** Although you must use the labels “Tap to Pay on iPhone” or “Tap to Pay” as described above, you can use the button color and shape that coordinate best with your interface. + +**Determine the final amount that customers need to pay before merchants initiate the Tap to Pay on iPhone experience.** For example, if your app supports tipping or other customer interactions that can affect the total, make sure merchants offer these interactions before displaying the Tap to Pay on iPhone screen. Aim to display the final amount customers need to pay in the Tap to Pay on iPhone screen. + +**If you support pre-payment options in your checkout flow, display them before the Tap to Pay on iPhone screen.** For example, if you support the selection of different payment types, you can display these options in your checkout screen after a merchant taps the Tap to Pay on iPhone button and before you open the Tap to Pay on iPhone screen. + +## [Displaying results](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Displaying-results) + +Customers pay by _tapping_ — that is, bringing a contactless card or digital wallet near the Tap to Pay on iPhone screen in your app. After a successful tap (and after a successful PIN entry, if required), Tap to Pay on iPhone displays a checkmark and gives your app an object that contains the encrypted payment information you send to your PSP for processing. When a tap fails, Tap to Pay on iPhone displays an error screen. Your app is responsible for displaying transaction results after a successful tap or offering alternative payment options after an unsuccessful tap. + +**Start processing a transaction as soon as possible.** The system provides API you can use to request the result of a successful tap before the Tap to Pay on iPhone screen finishes displaying the checkmark animation that indicates tap completion. For developer guidance, see [`returnReadResultImmediately`](https://developer.apple.com/documentation/ProximityReader/PaymentCardReader/Options-swift.struct/returnReadResultImmediately). + +**Display a progress indicator while payment is authorizing before you show your transaction result screen.** Transaction authorization can take several seconds to complete, depending on factors like connectivity for both the PSP and the merchant’s device. To ensure a smooth visual transition, display your authorization [progress indicator](https://developer.apple.com/design/human-interface-guidelines/progress-indicators) after the Tap to Pay on iPhone screen animation finishes (for developer guidance, see [`PaymentCardReader.Event.readyForTap`](https://developer.apple.com/documentation/ProximityReader/PaymentCardReader/Event/readyForTap)). + +![An illustration of an app's checkout screen showing an indeterminate progress indicator followed by the text 'Authorizing' above a purchase total.](https://docs-assets.developer.apple.com/published/2088576700f5d0e5370d538a6c0c200d/tap-to-pay-authorizing-payment%402x.png) + +**Clearly display the result of a transaction, whether it’s declined or successful.** A transaction can be declined for reasons like insufficient funds, suspicion of fraud, or when the customer enters an incorrect PIN. As much as possible, also give the merchant ways to offer customers a digital receipt, such as through a QR code or text message. + +![An illustration of an app's checkout screen showing a green checkmark in a green circle above a purchase total. Below the total is the text 'Select receipt option' followed by a stack of three buttons.](https://docs-assets.developer.apple.com/published/30ad60568d0f86ea398c3b80ca642521/tap-to-pay-confirmed-payment%402x.png) + +![An illustration of an app's checkout screen showing a red X in a red circle above a purchase total. Below the total is the text 'Select receipt option' followed by a stack of three buttons.](https://docs-assets.developer.apple.com/published/0afbca661875947cdc85284e89322a98/tap-to-pay-unconfirmed-payment%402x.png) + +**Help merchants complete the checkout flow when a payment can’t complete with Tap to Pay on iPhone.** For example, a tap can fail when a card isn’t readable, isn’t from a supported payment network, doesn’t allow transactions at the stated amount, or doesn’t allow online PIN entry. In cases like these, you can: + + * Present a new screen or reuse your checkout screen, letting merchants accept an alternate form of payment, like cash + + * Support checkout with a different method, like external hardware or a payment link + + * Relaunch Tap to Pay on iPhone, if a customer has another card they want to try + + + + +![An illustration of an app's checkout screen showing a red X in a red circle above the text 'Payment not completed' followed by a purchase total. Below the total is the text 'Select payment option' followed by four buttons, including Tap to Pay on iPhone.](https://docs-assets.developer.apple.com/published/4e43882f08c5c4e7203d0ef0dcf25415/tap-to-pay-unsuccessful-transaction%402x.png) + +After you receive payment card data, you might also encounter scenarios like the ones listed below. If such scenarios occur, contact your PSP for guidance on addressing them. + + * Some regions require Strong Customer Authentication (SCA) support, which means that although the payment card might not require a card PIN during a tap, the bank that issues the card can request a PIN after receiving the transaction processing request. In this scenario, your app may need to display the PIN entry screen instead of the transaction result. + + * In some regions your app may need to meet additional requirements to address the limitations of some cards, such as those in Offline PIN markets. Some PSPs support additional PIN fallback functionality to collect partial data from a tap, letting merchants continue the payment with another method such as a payment link. + + + + +**If the system returns an error that the merchant must address, display a clear description of the problem and recommend an appropriate resolution.** For example, if the device’s version of iOS doesn’t support Tap to Pay on iPhone, present an [alert](https://developer.apple.com/design/human-interface-guidelines/alerts) that recommends updating to the latest version. For developer guidance, see [`PaymentCardReaderSession.ReadError`](https://developer.apple.com/documentation/ProximityReader/PaymentCardReaderSession/ReadError). + +**Make it easy for merchants to get help with issues they can’t resolve.** For example, direct merchants to the help content in your app or on your website, and provide an action that contacts your support team. + +## [Additional interactions](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Additional-interactions) + +Tap to Pay on iPhone lets merchants read a payment card when there’s no transaction amount to support use cases like looking up a past transaction, or retaining card information to ensure future payment, issue refunds, or verify customer information. + +**Use a generic label in a button that opens the Tap to Pay on iPhone screen to read a payment card when there’s no transaction amount.** Don’t include “Tap to Pay on iPhone” or “Tap to Pay” in such a label; instead, use a generic label like “Look Up,” “Store Card,” “Verify,” or “Refund.” + +When customers have other types of NFC-compatible cards or passes in Apple Wallet — such as loyalty, discount, and points cards — Tap to Pay on iPhone lets merchants read these items at the same time that they read a payment card or independently. + +**If your app supports an independent loyalty card transaction, distinguish this flow from a payment-acceptance flow that uses Tap to Pay on iPhone.** It works well to give merchants a separate, clearly labeled button to initiate a loyalty card transaction. To help merchants avoid choosing the wrong button by mistake, avoid including “Tap to Pay on iPhone,” “Tap to Pay,” or other payment-related terms in the label for a loyalty-transaction button. + +![An illustration of a button labeled 'Loyalty Card'.](https://docs-assets.developer.apple.com/published/e586a72bca99cdaa8c68fb4b99c8e209/loyalty-card%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a button labeled 'Tap to Pay on iPhone - Loyalty'.](https://docs-assets.developer.apple.com/published/72070690d8e7d35c7c79169e018faa39/tap-to-pay-on-iphone-loyalty%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Platform-considerations) + + _No additional considerations for iOS. Not supported in iPadOS, macOS, tvOS, visionOS, or watchOS._ + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Related) + +[Tap to Pay on iPhone Marketing guidelines](https://developer.apple.com/tap-to-pay/marketing-guidelines/) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Developer-documentation) + +[Adding support for Tap to Pay on iPhone to your app](https://developer.apple.com/documentation/ProximityReader/adding-support-for-tap-to-pay-on-iphone-to-your-app) — ProximityReader + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/tap-to-pay-on-iphone#Change-log) + +Date| Changes +---|--- +January 17, 2024| Updated merchant education guidance. +May 7, 2024| Updated to include guidance on enabling the feature and educating merchants. +March 3, 2023| Enhanced guidance for educating merchants and improving their experience. +September 14, 2022| Refined guidance on preparing Tap to Pay on iPhone and helping merchants learn how to use the feature. + diff --git a/skills/hig-technologies/references/voiceover.md b/skills/hig-technologies/references/voiceover.md new file mode 100644 index 00000000..155c5665 --- /dev/null +++ b/skills/hig-technologies/references/voiceover.md @@ -0,0 +1,90 @@ +--- +title: "VoiceOver | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/voiceover + +# VoiceOver + +VoiceOver is a screen reader that lets people experience your app’s interface without needing to see the screen. + +![A sketch of the VoiceOver icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/477ffccb67999218b412ec3b1466e58d/technologies-VoiceOver-intro%402x.png) + +By supporting VoiceOver, you help people who are blind or have low vision access information in your app and navigate its interface and content when they can’t see the display. + +VoiceOver is supported in apps and games built for Apple platforms. It’s also supported in apps and games developed in Unity using [Apple’s Unity plug-ins](https://github.com/apple/unityplugins). For related guidance, see [Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility). + +## [Descriptions](https://developer.apple.com/design/human-interface-guidelines/voiceover#Descriptions) + +You inform VoiceOver about your app’s content by providing alternative text that explains your app’s interface and the content it displays. + +**Provide alternative labels for all key interface elements.** VoiceOver uses alternative labels (which aren’t visible onscreen) to audibly describe your app’s interface. System-provided controls have generic labels by default, but you should provide more descriptive labels that convey your app’s functionality. Add labels to any custom elements your app defines. Be sure to keep your descriptions up-to-date as your app’s interface and content change. For developer guidance, see [Accessibility modifiers](https://developer.apple.com/documentation/SwiftUI/View-Accessibility). + +**Describe meaningful images.** If you don’t describe key images in your app’s content, people can’t use VoiceOver to fully experience them within your app. Because VoiceOver helps people understand the interface surrounding images too, such as nearby captions, describe only the information the image itself conveys. + +**Make charts and other infographics fully accessible.** Provide a concise description of each infographic that explains what it conveys. If people can interact with the infographic to get more or different information, make these interactions available to people using VoiceOver, too. The accessibility APIs offer ways to represent custom interactive elements so that assistive technologies can help people use them. For guidance, see [Charts](https://developer.apple.com/design/Human-Interface-Guidelines/charts#Enhancing-the-accessibility-of-a-chart). + +**Exclude purely decorative images from VoiceOver.** It’s unnecessary to describe images that are decorative and don’t convey useful or actionable information. Excluding these images shows respect for people’s time and reduces cognitive load when they use VoiceOver. For developer guidance, see [`accessibilityHidden(_:)`](https://developer.apple.com/documentation/SwiftUI/View/accessibilityHidden\(_:\)), [`accessibilityElement`](https://developer.apple.com/documentation/AppKit/NSAccessibility-c.protocol/accessibilityElement), and [`isAccessibilityElement`](https://developer.apple.com/documentation/UIKit/UIAccessibilityElement/isAccessibilityElement). + +## [Navigation](https://developer.apple.com/design/human-interface-guidelines/voiceover#Navigation) + +**Use titles and headings to help people navigate your information hierarchy.** The title is the first information someone receives from an assistive technology when arriving on a page or screen in your app. Offer unique titles that succinctly describe each page’s content and purpose. Likewise, use accurate section headings that help people build a mental model of each page’s information hierarchy. + +**Specify how elements are grouped, ordered, or linked.** Proximity, alignment, and other visible contextual cues help sighted people perceive the relationships between elements. Examine your app for places where relationships among elements are visual only. Then, describe these relationships to VoiceOver. + +VoiceOver reads elements in the same order people read content in the their active language and locale. For example, in US English, this is top-to-bottom, left-to-right. In the ungrouped example below, VoiceOver describes each image before moving on to the captions. In the grouped example, VoiceOver describes each image with its respective caption. + +![An illustration of the top portion of an iPhone. The UI onscreen shows two images. On the left is a basket of mangoes, and on the right is a basket of artichokes. There are captions beneath the images that read 'Mangoes come from trees that belong to the genus Mangifera' and 'Artichokes come from a variety of a species of thistle.' The images and captions are all contained within a single VoiceOver frame.](https://docs-assets.developer.apple.com/published/164a6323c5f3d7ec48c750a90eddd4ad/voiceover-incorrect-grouping%402x.png) + +Ungrouped related elements make it hard for VoiceOver to accurately describe the UI. + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +![An illustration of the top portion of an iPhone. The UI onscreen shows two images. On the left is a basket of mangoes, and on the right is a basket of artichokes. There are captions beneath the images that read 'Mangoes come from trees that belong to the genus Mangifera' and 'Artichokes come from a variety of a species of thistle.' Just the image of mangoes and its caption are contained within a single VoiceOver frame.](https://docs-assets.developer.apple.com/published/0965e3a106c0727f2b62404a1874f9e7/voiceover-correct-grouping%402x.png) + +Grouped related elements help VoiceOver accurately describe the UI. + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +For developer guidance, see [`shouldGroupAccessibilityChildren`](https://developer.apple.com/documentation/ObjectiveC/NSObject-swift.class/shouldGroupAccessibilityChildren). + +**Inform VoiceOver when visible content or layout changes occur.** People may find an unexpected content or layout change confusing because it means their mental map of the content is no longer accurate. It’s crucial to report visible changes so VoiceOver and other assistive technologies can help people update their understanding of the content. For developer guidance, see [`AccessibilityNotification`](https://developer.apple.com/documentation/Accessibility/AccessibilityNotification). + +**Support the VoiceOver rotor when possible.** People can use an interface element called the VoiceOver rotor to navigate a document or webpage by headings, links, and other content types. You can help people navigate content in your app by identifying these elements to the rotor. The rotor can also bring up the braille keyboard. For developer guidance, see [`AccessibilityRotorEntry`](https://developer.apple.com/documentation/SwiftUI/AccessibilityRotorEntry) (SwiftUI), [`UIAccessibilityCustomRotor`](https://developer.apple.com/documentation/UIKit/UIAccessibilityCustomRotor) (UIKit), and [`NSAccessibilityCustomRotor`](https://developer.apple.com/documentation/AppKit/NSAccessibilityCustomRotor) (AppKit). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/voiceover#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, tvOS, or watchOS._ + +### [visionOS](https://developer.apple.com/design/human-interface-guidelines/voiceover#visionOS) + +**Be mindful that custom gestures aren’t always accessible.** When VoiceOver is turned on in visionOS, apps and games that define custom gestures don’t receive hand input by default. This ensures people can explore the interface using their voice, without an app responding to hand input at the same time. A person can opt out of this behavior by enabling Direct Gesture mode, which disables standard VoiceOver gestures and lets apps process hand input directly. For developer guidance, see [Improving accessibility support in your visionOS app](https://developer.apple.com/documentation/visionOS/improving-accessibility-support-in-your-app). + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/voiceover#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/voiceover#Related) + +[Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) + +[Inclusion](https://developer.apple.com/design/human-interface-guidelines/inclusion) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/voiceover#Developer-documentation) + +[Accessibility](https://developer.apple.com/documentation/Accessibility) + +[VoiceOver](https://developer.apple.com/documentation/Accessibility/voiceover) + +[Supporting VoiceOver in your app](https://developer.apple.com/documentation/UIKit/supporting-voiceover-in-your-app) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/voiceover#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/48/23AF104C-7CFE-4F7B-AEC6-46F54121AE92/2966_wide_250x141_1x.jpg) Writing Great Accessibility Labels ](https://developer.apple.com/videos/play/wwdc2019/254) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/119/1A6C1BBD-8ADD-4B35-896E-7EBAA39B82FC/5019_wide_250x141_1x.jpg) Tailor the VoiceOver experience in your data-rich apps ](https://developer.apple.com/videos/play/wwdc2021/10121) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/49/669BA7EE-2BAE-4B94-84E7-41D399756313/3471_wide_250x141_1x.jpg) VoiceOver efficiency with custom rotors ](https://developer.apple.com/videos/play/wwdc2020/10116) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/voiceover#Change-log) + +Date| Changes +---|--- +March 7, 2025| New page. + diff --git a/skills/hig-technologies/references/wallet.md b/skills/hig-technologies/references/wallet.md new file mode 100644 index 00000000..44faf56f --- /dev/null +++ b/skills/hig-technologies/references/wallet.md @@ -0,0 +1,420 @@ +--- +title: "Wallet | Apple Developer Documentation" +source: https://developer.apple.com/design/human-interface-guidelines/wallet + +# Wallet + +Wallet helps people securely store their credit and debit cards, driver’s license or state ID, transit cards, event tickets, keys, and more on iPhone and Apple Watch. + +![A sketch of the Wallet icon. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.](https://docs-assets.developer.apple.com/published/485464590c29a6fc839b0a60a3aa2556/technologies-Wallet-intro%402x.png) + +People use their cards and passes in Wallet to make Apple Pay purchases, track their orders, confirm their identity, and streamline activities like boarding a plane, attending a concert, or receiving a discount. + +When you integrate Apple Wallet into your app, you can create custom passes and present them the moment people need them, securely verify an individual’s identity so they can access personal content, and offer detailed receipts and tracking information where it’s most convenient. For developer guidance, see [Wallet](https://developer.apple.com/documentation/PassKit/wallet). + +## [Passes](https://developer.apple.com/design/human-interface-guidelines/wallet#Passes) + +**Offer to add new passes to Wallet.** When people do something that results in a new pass — like checking into a flight, purchasing an event ticket, or registering for a store reward program — you can present system-provided UI that helps them add the pass to Wallet with one tap (for developer guidance, see [`addPasses(_:withCompletionHandler:)`](https://developer.apple.com/documentation/PassKit/PKPassLibrary/addPasses\(_:withCompletionHandler:\))). If people want to review a pass before adding it, you can display a custom view that displays the pass and provides an Add to Apple Wallet button; for developer guidance, see [`PKAddPassesViewController`](https://developer.apple.com/documentation/PassKit/PKAddPassesViewController). + +**Help people add a pass that they created outside of your app.** If people create a pass using your website or another device, suggest adding it to Wallet the next time they open your app. If people decline your suggestion, don’t ask them again. + +**Add related passes as a group.** If your app generates multiple passes, like boarding passes for a multi-connection flight, add all passes at the same time so people don’t have to add each one individually. If people can receive a group of passes from your website — such as a set of tickets for an event — bundle them together so that people can download all of them at one time. For developer guidance, see [Distributing and updating a pass](https://developer.apple.com/documentation/WalletPasses/distributing-and-updating-a-pass). + +**Display an Add to Apple Wallet button to let people add an existing pass that isn’t already in Wallet.** If people previously declined your suggestion to add a pass to Wallet — or if they removed the pass — a button makes it easy to add it if they change their minds. You can display an Add to Apple Wallet button wherever the corresponding pass information appears in your app. For developer guidance, see [`PKAddPassButton`](https://developer.apple.com/documentation/PassKit/PKAddPassButton). You can also display an Add to Apple Wallet badge in an email or on a webpage; for guidance, see [Add to Apple Wallet guidelines](https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/). + +**Let people jump from your app to their pass in Wallet.** Wherever your app displays information about a pass that exists in Wallet, you can offer a link that opens it directly. Label the link something like “View in Wallet.” + +**Tell the system when your pass expires.** Wallet automatically hides expired passes to reduce crowding, while also providing a button that lets people revisit them. To help ensure the system hides passes appropriately, set the expiration date, relevant date, and voided properties of each pass correctly; for developer guidance, see [`Pass`](https://developer.apple.com/documentation/WalletPasses/Pass). + +**Always get people’s permission before deleting a pass from Wallet.** For example, you could include an in-app setting that lets people specify whether they want to delete passes manually or have them removed automatically. If necessary, you can display an alert before deleting a pass. + +**Help the system suggest a pass when it’s contextually relevant.** Ideally, passes automatically appear when they’re needed so people don’t have to manually locate them. When you supply information about when and where your pass is relevant, the system can display a link to it on the Lock Screen when people are most likely to want it. For example, a gym membership card could appear on the Lock Screen as people enter the gym. For developer guidance, see [Showing a Pass on the Lock Screen](https://developer.apple.com/documentation/WalletPasses/showing-a-pass-on-the-lock-screen). Starting in iOS 18 and watchOS 11, the system starts a Live Activity for poster event ticket style passes when they’re relevant. + +![A screenshot of the Lock Screen on iPhone, showing a notification about an upcoming flight.](https://docs-assets.developer.apple.com/published/cebddf30f9508581b883f85eccdba873/screen-notification%402x.png) + +Lock screen notification + +![A screenshot of the Lock Screen on iPhone, showing a Live Activity of an upcoming event.](https://docs-assets.developer.apple.com/published/1fb12c1d6aa8a295ee97a709f68915ef/poster-event-live-activity%402x.png) + +Live Activity + +**Update passes as needed.** Physical passes don’t typically change, but a digital pass can reflect updates to events. An airline boarding pass, for example, can automatically update to display flight delays and gate changes. + +**Use change messages only for updates to time-critical information.** A change message interrupts people’s current workflow, so it’s essential to send one only when you make an update they need to know about. For example, people need to know when there’s a gate change in a boarding pass, but they don’t need to know when a customer service phone number changes. Never use a change message for marketing or other noncritical communication. Change messages are available on a per-field basis; for developer guidance, see [Adding a Web Service to Update Passes](https://developer.apple.com/documentation/WalletPasses/adding-a-web-service-to-update-passes). + +## [Designing passes](https://developer.apple.com/design/human-interface-guidelines/wallet#Designing-passes) + +Wallet uses a consistent design aesthetic to strengthen familiarity and build trust. Instead of merely replicating the appearance of a physical item, design a clean, simple pass that looks at home in Wallet. + +![An illustration that represents an iPhone next to an Apple Watch. Each device displays a Wallet pass for a flight.](https://docs-assets.developer.apple.com/published/ab8facb271621ba07477e89c7c65f8a5/pass-intro%402x.png) + +**Design a pass that looks great and works well on all devices.** Passes can look different on different devices. For example, when a pass appears on Apple Watch, it doesn’t display all the images it displays when it appears on iPhone (for guidance, see [Passes for Apple Watch](https://developer.apple.com/design/human-interface-guidelines/wallet#Passes-for-Apple-Watch)). Don’t put essential information in elements that might be unavailable on certain devices. Also, don’t add padding to images; for example, watchOS crops white space from some images. + +**Avoid using device-specific language.** You can’t predict the device people will use to view your pass, so don’t write text that might not make sense on a particular device. For example, text that tells people to “slide to view” content doesn’t make sense when it appears on Apple Watch. + +**Make your pass instantly identifiable.** Using color — especially a color that’s linked to your brand — can help people recognize your pass as soon as they see it. Make sure that pass content remains comfortably readable against the background you choose. + +**Keep the front of a pass uncluttered so people can get important information at a glance.** Show essential information — like an event date or account balance — in the top-right area of the pass so people can still see it when the pass is collapsed in Wallet. Use the rest of the pass front to provide important information; consider putting extra information on the back of a pass (iOS) or in a details screen (watchOS). + +**Prefer an NFC-compatible pass.** People appreciate having a contactless pass, because it means that they can just hold their device near a reader. If you support both NFC and a barcode or QR code, the code appears on the back of the pass (in iOS) or in the details screen (in watchOS). In iOS, you can display a QR code or barcode on the front of your pass if necessary for your design. + +**Reduce image sizes for optimal performance.** People can receive passes via email or a webpage. To make downloads as fast as possible, use the smallest image files that still look great. + +**Provide an icon that represents your company or brand.** The system includes your icon when displaying information about a relevant pass on the Lock Screen. Mail also uses the icon to represent your pass in an email message. You can use your app icon or design an icon for this purpose. + +### [Pass styles](https://developer.apple.com/design/human-interface-guidelines/wallet#Pass-styles) + +The system defines several pass _styles_ for categories like boarding pass, coupon, store card, and event ticket. Pass styles specify the appearance and layout of content in your pass, and the information that the system needs to suggest your pass when it’s relevant (for guidance, see [Passes](https://developer.apple.com/design/human-interface-guidelines/wallet#Passes)). + +Although each pass style is different, all styles display information using the basic layout areas shown below: + +![A diagram that shows a four-row arrangement of layout areas in a pass. The top row contains a logo, logo text, and an essential area. The second row contains a primary area. The third row contains an area for secondary and auxiliary fields, and the bottom row contains an area for codes and an optional footer.](https://docs-assets.developer.apple.com/published/84df5c51eeb08eafa967b5fac77e5d86/pass-layout-diagram%402x.png) + +All passes display a logo image, and some can display additional images in other areas depending on the pass style. To display information in the layout areas, use the following [`PassFields`](https://developer.apple.com/documentation/WalletPasses/PassFields). + +Field| Layout area| Use to provide… +---|---|--- +Header| Essential| Critical information that needs to remain visible when the pass is collapsed in Wallet. +Primary| Primary| Important information that helps people use the pass. +Secondary and auxiliary| Secondary and auxiliary| Useful information that people might not need every time they use the pass. +Back| Not shown in diagram| Supplemental details that don’t need to be on the pass front. + +In general, a pass can have up to three header fields, one primary field, up to four secondary fields, and up to four auxiliary fields. Depending on the amount of content you display in each field, some fields may not be visible. + +**Display text only in pass fields.** Don’t embed text in images — it’s not accessible and not all images are displayed on all devices — and avoid using custom fonts that might make text hard to read. + +#### [Boarding passes](https://developer.apple.com/design/human-interface-guidelines/wallet#Boarding-passes) + +Use the boarding pass style for train tickets, airline boarding passes, and other types of transit passes. Typically, each pass corresponds to a single trip with a specific starting and ending point. + +A boarding pass can display logo and footer images, and it can have up to two primary fields and up to five auxiliary fields. + + * Example + * Layout + + + +![An illustration representing a boarding pass that includes a square QR code. The boarding pass is for a flight from SFO in San Francisco to LGA in New York.](https://docs-assets.developer.apple.com/published/1656e78a2371c7828d25a5c5ffcddad6/boarding%402x.png) + +![A diagram that shows the layout of a boarding pass. A top row contains a logo, logo text, and header field areas. A second row contains primary field areas and an airplane icon. A third row contains an auxiliary fields area. The fourth row contains a secondary fields area. The fifth row contains a footer area. The bottom of the pass contains a barcode area.](https://docs-assets.developer.apple.com/published/d9c8d4f88fd387194d5349d1de1f8ede/boarding-pass-layout%402x.png) + +#### [Coupons](https://developer.apple.com/design/human-interface-guidelines/wallet#Coupons) + +Use the coupon style for coupons, special offers, and other discounts. A coupon can display logo and strip images, and it can have up to four secondary and auxiliary fields, all displayed on one row. + + * Example + * Layout + + + +![An illustration representing a coupon pass. The pass includes a company name and icon, glyphs of clothing items, a discount offer of 15% off, and an expiration of June 5, 2023.](https://docs-assets.developer.apple.com/published/69bfb27a52f67ad10eb88d66276d0fa8/coupon%402x.png) + +![A diagram that shows the layout of a coupon pass. A top row contains a logo, logo text, and header field areas. A second row contains a primary field area with a callout labeled 'Strip image'. A third row contains a secondary and auxiliary fields area. The fourth row contains a barcode area.](https://docs-assets.developer.apple.com/published/e9ff886bf6d8e3f3202e165f5e0e5889/coupon-pass-layout%402x.png) + +#### [Store cards](https://developer.apple.com/design/human-interface-guidelines/wallet#Store-cards) + +Use the store card style for store loyalty cards, discount cards, points cards, and gift cards. If an account related to a store card carries a balance, the pass usually shows the current balance. + +A store card can display logo and strip images, and it can have up to four secondary and auxiliary fields, all displayed on one row. + + * Example + * Layout + + + +![An illustration representing a store card pass. The pass includes a company name and icon, a reward point value, an illustration of a coffee cup, a reward value amount, and an updated date.](https://docs-assets.developer.apple.com/published/f81fefc86a3b46a8052c2164131d2583/store-card%402x.png) + +![A diagram that shows the layout of a store card pass. A top row contains a logo, logo text, and header field areas. A second row contains a primary field area with a callout labeled 'Strip image'. A third row contains a secondary and auxiliary fields area. The fourth row contains a barcode area.](https://docs-assets.developer.apple.com/published/7b648e914e0e99562fcf512efb115175/store-card-layout%402x.png) + +#### [Event tickets](https://developer.apple.com/design/human-interface-guidelines/wallet#Event-tickets) + +Use the event ticket pass style to give people entry into events like concerts, movies, plays, and sporting events. Typically, each pass corresponds to a specific event, but you can also use a single pass for several events, as with a season ticket. + +An event ticket can display logo, strip, background, or thumbnail images. However, if you supply a strip image, don’t include a background or thumbnail image. You can also include an extra row of up to four auxiliary fields. For developer guidance, see the `row` property of [`PassFields.AuxiliaryFields`](https://developer.apple.com/documentation/WalletPasses/PassFields/AuxiliaryFields-data.dictionary). + + * Example + * Layout 1 + * Layout 2 + + + +![An illustration representing an event ticket pass. The pass includes a company name and icon, a date and time, an illustration of a person bowling, a bowling alley name, and a lane number.](https://docs-assets.developer.apple.com/published/a0a42a2d3a332050cdcaba0eefa6d0ec/event-ticket%402x.png) + +![A diagram that shows one layout style for an event ticket pass. A top row contains a logo, logo text, and header field areas. A second row contains areas for primary fields, secondary fields, and a thumbnail. A third row contains an auxiliary fields area. The fourth row contains a barcode area.](https://docs-assets.developer.apple.com/published/b43416bbcd92dc2d60485a97d1d94bda/event-ticket-layout-1%402x.png) + +![A diagram that shows a second layout for an event ticket pass. A top row contains a logo, logo text, and header field areas. A second row contains a primary field area with a callout labeled 'Strip image'. A third row contains a secondary fields area. The fourth row contains an auxiliary fields area. The fifth row contains a barcode area.](https://docs-assets.developer.apple.com/published/428687f3fc4317c43ecd549547d7606f/event-ticket-layout-2%402x.png) + +In iOS 18 and later, the system defines an additional style for contactless event tickets called _poster event ticket_. Poster event tickets offer a rich visual experience that prominently features the event artwork, provides easy access to additional event information, and integrates with system apps like Weather and Maps. + +Important + +Poster event tickets aren’t compatible with tickets that require a QR code or barcode for entry. + +A poster event ticket displays an event logo and background image, and can optionally display a separate ticket issuer or event company logo. The system uses metadata about your event to structure ticket information and suggest relevant actions. You must provide a required set of metadata in [`SemanticTags`](https://developer.apple.com/documentation/WalletPasses/SemanticTags) for all poster event tickets, and an additional set of required metadata depending on the event type — general, sports, or live performance. You can also add optional metadata to further enhance your ticket. For example, you can specify an admission level for a live performance, like General Admission, which the system displays with the seating information. For developer guidance, see [Supporting semantic tags in Wallet passes](https://developer.apple.com/documentation/WalletPasses/supporting-semantic-tags-in-wallet-passes). + + * Example + * Layout + + + +![An illustration representing a poster event ticket pass. The pass includes an event name, a date and time, a background image, seat information, a venue name, and a secondary logo.](https://docs-assets.developer.apple.com/published/5545e8e95a5b5e9a8c29a25a05e49001/poster-event-ticket%402x.png) + +![A diagram that shows the layout style for a poster event ticket pass. The background image is centered in the ticket. The header contains a logo and logo text on the left, and the date and time on the right. The footer contains primary text and seating information, and venue name and region on the bottom left, and a secondary logo on the bottom right.](https://docs-assets.developer.apple.com/published/69231d5f9da8e4f0821934f631aaad1f/poster-event-ticket-layout%402x.png) + +The system uses the metadata that you provide to generate a Maps shortcut to the venue directions and an event guide below the ticket when in the Wallet app. The event guide provides convenient access to information like the weather forecast and venue map, and to quick actions like checking the baggage policy and ordering food. You can display a minimum of one and up to four quick action buttons in the event guide; if you include more than four, the system collapses them into a menu. You can optionally include additional ticket information, such as pre-paid parking details, which the system also displays below the ticket. + +![An illustration of a poster event ticket in the Wallet app with additional ticket information, Maps shortcut, and event guide tiles displayed below the ticket.](https://docs-assets.developer.apple.com/published/cbcd171b0cd5a3431b0e8996cca7572a/poster-event-in-wallet-app%402x.png) + +Additional ticket information, Maps shortcut, and event guide tiles below the ticket in the Wallet app + +![An illustration of the event guide with three quick actions, a weather forecast, and a venue map.](https://docs-assets.developer.apple.com/published/2373cc358447143bdc95bb8b683793bb/poster-event-event-guide%402x.png) + +Event guide + +**Create a vibrant and engaging background.** As the centerpiece of a poster event ticket, your background image serves as a visual representation of the event. Limit text in your artwork, and create an image that’s easily identifiable to help people quickly find their ticket among other passes in their Wallet app. If your background image is a solid color or includes a solid color in the footer, consider setting a footer background color to better blend the background image with the footer. + +**Position your background image in the safe area.** The system displays ticket information in the header and footer, which overlap the background image. To ensure that the content in your artwork isn’t covered, position it in the safe area. For developer guidance, see `footerBackgroundColor` in [`Pass`](https://developer.apple.com/documentation/WalletPasses/Pass). + +**Ensure sufficient contrast so that ticket information is easy to read.** By default, the system applies a gradient in the header and a blur effect in the footer of your poster event ticket to provide sufficient contrast between the background image and ticket information. Consider adjusting the gradient and blur effect if you need more contrast. The system can also automatically determine the best text color for ticket information and labels based on your background image. If you choose to customize text colors, make sure to select a color that provides sufficient contrast, especially if you set a footer background color or a seat section color to support wayfinding. For developer guidance, see `useAutomaticColors` in [`Pass`](https://developer.apple.com/documentation/WalletPasses/Pass) and `seatSectionColor` in [`SemanticTagType.Seat`](https://developer.apple.com/documentation/WalletPasses/SemanticTagType/Seat-data.dictionary). + +![An illustration of a poster event ticket with good contrast between the background image and ticket information.](https://docs-assets.developer.apple.com/published/eb1dcdb8d7e2e2867927fe038db19b9a/poster-event-ticket-good-contrast%402x.png) + +![A checkmark in a circle to indicate correct usage.](https://docs-assets.developer.apple.com/published/88662da92338267bb64cd2275c84e484/checkmark%402x.png) + +![An illustration of a poster event ticket with poor contrast between the background image and ticket information.](https://docs-assets.developer.apple.com/published/ad1b01e421bb814d97f375fc1ec7f9db/poster-event-ticket-poor-contrast%402x.png) + +![An X in a circle to indicate incorrect usage.](https://docs-assets.developer.apple.com/published/209f6f0fc8ad99d9bf59e12d82d06584/crossout%402x.png) + +**Consider using the additional information tile for extra event details.** When you have more information about the event that people may find helpful, the additional information tile below the ticket is a great place to put it. If you have additional information that’s essential to display on the front of the ticket, keep the text short to avoid cluttering the footer. For developer guidance, see `additionalTicketAttributes` in [`SemanticTags`](https://developer.apple.com/documentation/WalletPasses/SemanticTags) and [`PassFields.AdditionalInfoFields`](https://developer.apple.com/documentation/WalletPasses/PassFields/AdditionalInfoFields-data.dictionary). + +**Continue to support event tickets for earlier versions of iOS.** People expect contactless event tickets to work, regardless of their device’s software version. Continue to provide primary, secondary, and auxiliary information in [`PassFields`](https://developer.apple.com/documentation/WalletPasses/PassFields) and image assets for your event ticket. This enables the system to automatically generate the appropriate ticket style for a person’s device; otherwise, your ticket appears empty on devices running earlier versions of iOS. + +#### [Generic passes](https://developer.apple.com/design/human-interface-guidelines/wallet#Generic-passes) + +Use the generic style for a type of pass that doesn’t fit into the other categories, such as a gym membership card or coat-check claim ticket. A generic pass can display logo and thumbnail images, and it can have up to four secondary and auxiliary fields, all displayed on one row. + + * Example + * Layout 1 + * Layout 2 + + + +![An illustration representing a generic pass. The pass is a membership card for a gym, and includes a company name and icon, a membership level, an illustration of a person lifting weights, a policy holder name, a member ID, and a barcode.](https://docs-assets.developer.apple.com/published/2f8c9366433d611399132b3075659cba/generic%402x.png) + +![A diagram that shows one layout style for a generic pass. A top row contains a logo, logo text, and header field areas. A second row contains areas for a primary field and a thumbnail. A third row contains a secondary fields area. A fourth row contains an auxiliary fields area. The fifth row contains a rectangular barcode area.](https://docs-assets.developer.apple.com/published/0ea8eaf5a48417f07aed39a2e317710e/generic-pass-layout-1%402x.png) + +![A diagram that shows a second layout style for a generic pass. A top row contains a logo, logo text, and header field areas. A second row contains areas for a primary field and a thumbnail. A third row contains a secondary and auxiliary fields area. The fourth row contains a square barcode area.](https://docs-assets.developer.apple.com/published/17f44895905b4c1e99b22bdab5c2842f/generic-pass-layout-2%402x.png) + +### [Passes for Apple Watch](https://developer.apple.com/design/human-interface-guidelines/wallet#Passes-for-Apple-Watch) + +On Apple Watch, Wallet displays passes in a scrolling carousel of cards. People can add your pass to their Apple Watch even if you don’t create a watch-specific app, so it’s important to understand how your pass can look on the device. + +![A screenshot of a selected flight pass in a list of passes on Apple Watch. The pass includes information about a flight from SFO to LGA. The next pass in the list is a gym membership card with a barcode.](https://docs-assets.developer.apple.com/published/9b54ebf2a350a1e748a38c0b2cc3b74a/watch-card-and-details%402x.png) + +People can tap a pass on their Apple Watch to reveal a details screen that displays additional information in a scroll view. In some cases, people can also tap a specific transaction to get more information. + +![A screenshot of a flight pass on Apple Watch. The pass includes information about a flight from SFO to LGA, and appears above a QR code.](https://docs-assets.developer.apple.com/published/0f74b7b757684a79981367adf14d6adb/watch-pass-design-intro%402x.png) + +Each pass style specifies the fields and images that can appear in the basic layout areas shown below: + +![A diagram that shows the basic layout of a pass on Apple Watch. A top row contains a logo image and an essential field area. A second row contains a primary field area. A third row contains a secondary and auxiliary fields area.](https://docs-assets.developer.apple.com/published/063f7297022ac58ae52b2b9fa2f0121d/watch-layout-diagram%402x.png) + +If some information doesn’t fit within the layout areas, the system displays it in the scrolling details screen. + +Important + +In every style, watchOS crops the strip image to fit the aspect ratio of the card interface and may crop white space from other images. + + * Boarding + * Coupon + * Store + * Event + * Generic + + + +![A diagram that shows the layout of a boarding pass on Apple Watch. The first row contains a logo image and departure or boarding time information. The second row contains origin and destination information. The third row contains the passenger name and seat.](https://docs-assets.developer.apple.com/published/70059954f5ceacc74c7fa523ca38459d/watch-layout-boarding-pass%402x.png) + +![A diagram that shows the layout of a coupon pass on Apple Watch. The first row contains a logo image and expiration date. The second row contains a strip image. The third row is unused.](https://docs-assets.developer.apple.com/published/184da4080f64c5ffa176008657f87e34/watch-layout-coupon%402x.png) + +![A diagram that shows the layout of a store card on Apple Watch. The top first row contains a logo image and an unused area. The second row contains a strip image. The third row contains a member name and number.](https://docs-assets.developer.apple.com/published/d438a08c78a49375fc86caca42894869/watch-layout-store-card%402x.png) + +![A diagram that shows the layout of an event ticket on Apple Watch. The first row contains a logo image and an event start date. The second row contains information about the event. The third row contains an attendee name and seat location.](https://docs-assets.developer.apple.com/published/4f41a88ccd4e2d10c941e9b49273cd3a/watch-layout-event-ticket%402x.png) + +![A diagram that shows the layout of a generic pass on Apple Watch. The first row contains a logo image and an expiration date. The second row contains a strip image. The third row contains a name and number.](https://docs-assets.developer.apple.com/published/f9b2258cd5e574a410899f54f831094a/watch-layout-generic-pass%402x.png) + +## [Order tracking](https://developer.apple.com/design/human-interface-guidelines/wallet#Order-tracking) + +When you support order tracking, Wallet can display information about an order a customer placed through your app or website, updating the information whenever the status of the order changes. In iOS 17 and later, you can help people start tracking their order right from your app or website and offer additional ways to add their order to Wallet. + +![A screenshot of an order fulfillment screen for a food truck app on iPhone. The screen displays information about an order placed, and includes a status bar, shipping address, list of items ordered, and additional order details.](https://docs-assets.developer.apple.com/published/4b6816949b9b5352ebc3fad695086d73/wallet-ot-status-order-placed%402x.png) + +![A screenshot of an order fulfillment screen for a food truck app on iPhone. The screen displays information about an order placed, and denotes that the order was delivered today. The screen includes the shipping address, a link to track the shipment, a list of items ordered, and additional order details.](https://docs-assets.developer.apple.com/published/c00bddf304d7468dcb19bdf076772174/wallet-ot-status-delivered%402x.png) + +Wallet presents a dashboard that displays a customer’s active and completed orders. People can choose an order to view details about it, like the items they ordered and fulfillment information for shipping and pickup. + +![A screenshot of a dashboard that displays an order history screen for a food truck app on iPhone. The screen displays a search field, a list of active orders, and a list of orders placed this month.](https://docs-assets.developer.apple.com/published/a5fe5f2ee6fc90e3e8e299c0f506e5b8/wallet-ot-dashboard%402x.png) + +Dashboard + +The [Wallet Orders](https://developer.apple.com/documentation/WalletOrders) schema defines the properties you use to provide order data like product descriptions, order status, contact information, and shipping and pickup details, including estimated arrival dates, addresses, tracking numbers, and pickup instructions. Wallet displays the information you supply within consistent, system-defined interfaces. To help people get the information they need quickly and conveniently, supply as much information as you can, using the properties that match your order processes. + +![A screenshot of an order fulfillment screen for a food truck app on iPhone. The screen displays information about an order placed, and includes a status bar, shipping address, list of items ordered, and additional order details. Callouts identify different fields on the screen, including the merchant logo and display name, the order status and description, the tracking link, and various line items.](https://docs-assets.developer.apple.com/published/e5ec23af37b6a9d9cbc90e5d5f47bf8a/wallet-ot-status-on-the-way-fields%402x.png) + +**Make it easy for people to add an order to Wallet.** For example, when a customer completes an Apple Pay transaction in your app or website, use [`PKPaymentOrderDetails`](https://developer.apple.com/documentation/PassKit/PKPaymentOrderDetails) (app) or [`ApplePayPaymentOrderDetails`](https://developer.apple.com/documentation/ApplePayontheWeb/ApplePayPaymentOrderDetails) (web) to automatically add the order to Wallet. In iOS 17 and later, you can use [`AddOrderToWalletButton`](https://developer.apple.com/documentation/FinanceKitUI/AddOrderToWalletButton) to display the system-provided Track with Apple Wallet button in relevant areas of your app or website — such as in pages for order confirmation, status, or tracking — or in emails to customers. If a person already added an order to Wallet, trying to add it again opens Wallet and displays the order. + +**Make information about an order available immediately after people place it.** People need to confirm that their order was received, even when payment, processing, and fulfillment are still pending. If you won’t have details until a later time, provide the data you have at the time of the order and supply a status [description](https://developer.apple.com/documentation/walletorders/order) like “Check back later for full order details.” + +**Provide fulfillment information as soon as it’s available, and keep the status up to date.** When you supply fulfillment data or you change the status of an order, the system updates the order information and can automatically send a notification to customers. The system uses the fulfillment status you report to update the order’s current status to a value like Order Placed, Processing, Ready for Pickup, Picked Up, Out for Delivery, Delivered, or — if something goes wrong — Issue or Canceled. For guidance on describing a status, see [Displaying order and fulfillment details](https://developer.apple.com/design/human-interface-guidelines/wallet#Displaying-order-and-fulfillment-details). + +**Supply a high-resolution logo image that uses a nontransparent background.** The system displays your logo image in the dashboard and detail view, so you want to make sure that people can instantly recognize it at various sizes. Use the PNG or JPEG format to create a logo image that measures 300x300 pixels. To help ensure that your logo image renders correctly, be sure to use a nontransparent background. For developer guidance, see [logo](https://developer.apple.com/documentation/walletorders/merchant). + +**Supply distinct, high-resolution product images that use nontransparent backgrounds.** The system displays a product’s image — along with descriptive information you supply — in the detail views, order dashboard, and notifications for an order or a fulfillment. When creating a product image, use a straightforward depiction and a solid, nontransparent background. Showing a product in a “lifestyle” context or against a busy background can make the item hard to distinguish at small sizes. For each product, use the PNG or JPEG format to create an image that measures 300x300 pixels. + +![An illustration of donut, representing a product image. Horizontal and vertical lines extend along the bottom and right side of the image, and include labels that denote the illustration is 300 pixels wide by 300 pixels high.](https://docs-assets.developer.apple.com/published/b0c17d4dfe72b98ca8a2d5e085affccb/wallet-ot-product-images%402x.png) + +**In general, keep text brief.** People appreciate being able to read text at a glance, and the system can truncate text that’s too long. + +**Use clear, approachable language, and localize the text you provide.** You want to make sure that all your customers can read the information in an order. Also, make sure the price you show matches the final price the customer confirmed. + +### [Displaying order and fulfillment details](https://developer.apple.com/design/human-interface-guidelines/wallet#Displaying-order-and-fulfillment-details) + +An order gives people ways to contact the merchant and displays details about their Apple Pay purchase, including fulfillment status and per-item information. + +**Provide a link to an area where people manage their order.** When you provide a universal link, people can open your order management area even if they don’t have your app installed. To learn more about universal links, see [Allowing apps and websites to link to your content](https://developer.apple.com/documentation/Xcode/allowing-apps-and-websites-to-link-to-your-content); for developer guidance, see [`Order`](https://developer.apple.com/documentation/WalletOrders/Order). + +**Clearly describe each item so people can verify that their order contains everything they expect.** You can use the [`LineItem`](https://developer.apple.com/documentation/WalletOrders/LineItem) property to provide information like a product’s price, name, and image. An order lists the line items for every item the customer ordered; a fulfillment lists only the line items that fulfillment includes. When appropriate, you can also attach a PDF receipt to an individual transaction related to an order. + +**Supply a prioritized list of your apps that might be installed on the device.** The system uses this list when it needs to display a link to your app within the order details view. For example, if you provide multiple apps and more than one of them is installed on the device, the system displays a link to the installed app that’s highest on your list. If none of your apps are installed on the device, the system displays a link to the first app on your list. For developer guidance, see [`Order`](https://developer.apple.com/documentation/WalletOrders/Order). + +**Avoid sending duplicate notifications.** For example, you can tell the system to avoid sending order-related notifications through Wallet when the customer has one of your associated apps installed. + +**Make it easy for customers to contact the merchant.** Provide multiple contact methods, so people can choose the one that works best for them. At minimum, you need to provide a link to the merchant’s website or landing page, but you can also provide a Messages for Business link, a phone number, an email address, and a link to a support page. When people choose the Contact button in an order, the system displays a menu of the contact methods you supply. For developer guidance, see [`Merchant`](https://developer.apple.com/documentation/WalletOrders/Merchant). + +![A screenshot of an order detail screen for a food truck app on iPhone. The screen displays a list of donuts ordered. Above the list is an overlay containing buttons to message or email the merchant, get online support, or call customer service.](https://docs-assets.developer.apple.com/published/2aedf894ea8e8d11e1b560725c1c6093/wallet-ot-contacts%402x.png) + +**Help people track their order.** A multi-item order can have multiple fulfillments, where each fulfillment is either shipping or pickup. For example, if a customer orders a pair of shoes and a T-shirt, the customer might want to have one item shipped, while picking up the other. Regardless of fulfillment type, you need to supply enough information for people to know where their items are and when to expect them at the destination they specified. In addition to an estimated time of arrival, here’s some information that people particularly appreciate: + + * A link that opens the carrier’s website to a page with information about a shipping fulfillment. When possible, provide a direct link — in addition to a tracking number — so people can easily view the most up-to-date shipping information. If necessary, display this link on any intermediate order-tracking page you open. + + * A scannable barcode when one is required to pick up the order in a pickup fulfillment. It’s convenient when people can offer the barcode from within Wallet instead of finding it in an email or webpage. + + * Clear, detailed instructions that can help people receive or pick up their order. + + + + +![A screenshot of an order fulfillment screen for a food truck app on iPhone. The top of the screen displays information about an order placed, and denotes that the order arrives tomorrow. The screen includes the shipping address, a link to track the shipment, a list of items ordered, and additional order details. The bottom of the screen displays another order placed, which is ready for pickup. In place of the shipping address is a Barcode button and a pickup address.](https://docs-assets.developer.apple.com/published/bd11abab3cc21427dc4d20a123cbebfa/wallet-ot-status-pickup-details%402x.png) + +**Keep the fulfillment screen centered on order tracking.** For example, if you recommend your app or other services to customers, be sure to prioritize order-tracking information over other content in the screen. + +**Choose shipping-fulfillment values that match the details you have about the shipping process.** If you know the carrier, enter its name in the `carrier` property; otherwise, leave the default “Track Shipment” value. If you can access details about a carrier’s interim shipping steps — such as when a fulfillment is on the way or out for delivery — indicate each step by using specific status values like `onTheWay`, `outForDelivery`, or `delivered`. In contrast, if you don’t have access to a carrier’s shipping details, use the `shipped` status. In both cases, provide a tracking link (when one is available) so people can track their order on their own. For developer guidance, see [`ShippingFulfillment`](https://developer.apple.com/documentation/WalletOrders/ShippingFulfillment). + +**Keep customers informed through relevant fulfillment status descriptions.** A great status message is approachable, accurate, and clearly related to the status it describes. In addition to supplying information that helps people understand the status of their order, a status message also gives you an opportunity to use your brand’s communication style. + +**Be direct and thorough when describing an Issue or Canceled status.** People generally need to know why there’s a problem and what they can do about it. + +## [Identity verification](https://developer.apple.com/design/human-interface-guidelines/wallet#Identity-verification) + +On iPhone running iOS 16 and later, people can store an ID card in Wallet, and later allow an app or App Clip to access information on the card to verify their identity without leaving their current context. For example, a person might need to confirm their identity when they apply for a credit card within their banking app. To learn how to support in-person mobile ID verification, see [ID Verifier](https://developer.apple.com/design/human-interface-guidelines/id-verifier). + +Developer note + +Apple 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](https://developer.apple.com/documentation/PassKit/requesting-identity-data-from-a-wallet-pass). + +To help you offer a consistent experience that people can trust, Apple provides a Verify with Wallet button you can use in your app when you need to ask for identify verification. The button reveals a sheet that describes your request and lets people agree to share their information or cancel. + +**Present a Wallet verification option only when the device supports it.** If the current device can’t return the identify information you request, don’t display a Verify with Apple Wallet button. Be prepared to present a fallback view that offers a different verification method if Verify with Apple Wallet isn’t available; for developer guidance, see [`VerifyIdentityWithWalletButton`](https://developer.apple.com/documentation/PassKit/VerifyIdentityWithWalletButton). + +**Ask for identity information only at the precise moment you need it.** People can be suspicious of a request for personal information if it doesn’t seem to be related to their current action. If your app needs identity verification, for example, wait to ask for this information until people are completing the process or transaction that requires it; don’t request verification before people are ready to start the process or when they’re simply creating an account. + +**Clearly and succinctly describe the reason you need the information you’re requesting.** You must write text that explains why people need to share identity information with your app (this text is called a _purpose string_ or _usage description string_). The system displays your purpose string in the verification sheet so people can make an informed decision. Here are a couple of examples: + +To verify…| To support…| Example purpose string +---|---|--- +Identity| Opening an account for which proof of identity is legally required to prevent fraud| Federal law requires this information to verify your identity and also to help [App Name] prevent fraud. +Driving privilege| Renting a vehicle that requires legal driving privileges| Applicable state law requires [App Name] to verify your driving privileges. + +For each purpose string, aim for a brief, complete sentence that’s direct, specific, and easy for everyone to understand. Use sentence case, avoid passive voice, and include a period at the end. + +**Ask only for the data you actually need.** People may lose trust in your app if you ask for more data than you need to complete the current task or action. For example, if you need to ensure that a customer is at least a certain age, use a request that specifies an age threshold; avoid requesting the customer’s current age or birth date. For developer guidance, see [`age(atLeast:)`](https://developer.apple.com/documentation/PassKit/PKIdentityElement/age\(atLeast:\)). + +**Clearly indicate whether you will keep the data and — if you need to keep it — specify how long you’ll do so.** To help people trust your app, it’s essential to explain how long you might need to keep the personal information they agree to share with you. When you use PassKit APIs to specify a duration — such as a particular period, indefinitely, or only as long as it takes to complete the current verification — the system automatically displays explanatory content in the verification sheet. For developer guidance, see [`PKIdentityIntentToStore`](https://developer.apple.com/documentation/PassKit/PKIdentityIntentToStore). + +**Choose the system-provided verification button that matches your use case and the visual design of your app.** The system provides the following button labels to support various use cases: + +Button type| Consider using when… +---|--- +![An illustration of a Verify Age with Apple Wallet button.](https://docs-assets.developer.apple.com/published/7ef983aea59530abf3f038216593ab5d/wallet-button-verify-age%402x.png)| Your app can complete the current transaction after you verify a person’s age. An example transaction is making a car available to lease. +![An illustration of a Verify Identity with Apple Wallet button.](https://docs-assets.developer.apple.com/published/4e32d4445048f4cea05d1d169e915ba4/wallet-button-verify-identity%402x.png)| Your app can complete the current transaction after you verify a person’s identity. An example transaction is a car rental. +![An illustration of a Continue with Apple Wallet button.](https://docs-assets.developer.apple.com/published/41c3befed0a2af0868dbcba871a415a2/wallet-button-continue-with%402x.png)| Verify with Wallet forms one part of a verification process that also requires people to supply additional information not provided by Verify with Wallet, such as a Social Security number or phone number. Examples include opening a financial account or performing a background check. +![An illustration of a Verify with Apple Wallet button.](https://docs-assets.developer.apple.com/published/ac3614b1e4b5622cae8533bbe1749d4d/wallet-button-verify-with%402x.png)| Your app can complete the current verification flow without additional steps, but the “Verify Age,” “Verify Identity,” and “Continue” button labels aren’t appropriate for your use case. An example is an app that helps people sign up for a government service. + +All button labels are also available in a multiline variant that the system automatically uses when horizontal space is constrained. For developer guidance, see [`PKIdentityButton.Label`](https://developer.apple.com/documentation/PassKit/PKIdentityButton/Label). + +The verification button always uses white letters on a black background. You can choose the style that includes a light outline if you need to ensure that the button contrasts well with a dark background in your app. In addition, you can use the [`cornerRadius`](https://developer.apple.com/documentation/PassKit/PKIdentityButton/cornerRadius) property to adjust the verification button’s corners to match other related buttons in your interface. For developer guidance, see [`PKIdentityButton.Style.blackOutline`](https://developer.apple.com/documentation/PassKit/PKIdentityButton/Style/blackOutline). + +## [Platform considerations](https://developer.apple.com/design/human-interface-guidelines/wallet#Platform-considerations) + + _No additional considerations for iOS, iPadOS, macOS, visionOS, or watchOS. Not supported in tvOS._ + +## [Specifications](https://developer.apple.com/design/human-interface-guidelines/wallet#Specifications) + +### [Pass image dimensions](https://developer.apple.com/design/human-interface-guidelines/wallet#Pass-image-dimensions) + +As you design images for your wallet passes, create PNG files and use the following values for guidance. + +Image| Supported pass styles| Filename| Dimensions (pt) +---|---|---|--- +Logo| Boarding pass, coupon, store card, event ticket, generic pass| `logo.png`| Any, up to 160x50 +Primary logo| Poster event ticket| `primaryLogo.png`| Any, up to 126x30 +Secondary logo| Poster event ticket| `secondaryLogo.png`| Any, up to 135x12 +Icon| All| `icon.png`| 38x38 +Background| Event ticket, poster event ticket| `background.png` (event ticket), `artwork.png` (poster event ticket)| 180x220 (event ticket), 358x448 (poster event ticket) +Strip| Coupon, store card, event ticket| `strip.png`| 375x144 (coupon, store card), 375x98 (event ticket) +Footer| Boarding pass| `footer.png`| Any, up to 286x15 +Thumbnail| Event ticket, generic pass| `thumbnail.png`| 90x90 + +Note + +Dimensions 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. + +## [Resources](https://developer.apple.com/design/human-interface-guidelines/wallet#Resources) + +#### [Related](https://developer.apple.com/design/human-interface-guidelines/wallet#Related) + +[Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay) + +[ID Verifier](https://developer.apple.com/design/human-interface-guidelines/id-verifier) + +#### [Developer documentation](https://developer.apple.com/design/human-interface-guidelines/wallet#Developer-documentation) + +[FinanceKitUI](https://developer.apple.com/documentation/FinanceKitUI) + +[FinanceKit](https://developer.apple.com/documentation/FinanceKit) + +[PassKit (Apple Pay and Wallet)](https://developer.apple.com/documentation/PassKit) + +[Wallet Passes](https://developer.apple.com/documentation/WalletPasses) + +[Wallet Orders](https://developer.apple.com/documentation/WalletOrders) + +#### [Videos](https://developer.apple.com/design/human-interface-guidelines/wallet#Videos) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/C03E6E6D-A32A-41D0-9E50-C3C6059820AA/FCB194FA-035A-4955-A518-B59CE8541D6D/9231_wide_250x141_1x.jpg) What’s new in Wallet and Apple Pay ](https://developer.apple.com/videos/play/wwdc2024/10108) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/D35E0E85-CCB6-41A1-B227-7995ECD83ED5/0F2B5692-7E7D-4716-9E5F-63E4A4FA13ED/8168_wide_250x141_1x.jpg) What’s new in Wallet and Apple Pay ](https://developer.apple.com/videos/play/wwdc2023/10114) + +[![](https://devimages-cdn.apple.com/wwdc-services/images/124/560ECBAA-5557-428A-96EC-6E716EF90909/6534_wide_250x141_1x.jpg) What’s new in Wallet and Apple Pay ](https://developer.apple.com/videos/play/wwdc2022/10041) + +## [Change log](https://developer.apple.com/design/human-interface-guidelines/wallet#Change-log) + +Date| Changes +---|--- +January 17, 2025| Added specifications for pass image dimensions. +December 18, 2024| Added guidance for the poster event ticket style. +September 12, 2023| Added guidance for helping people add orders to Wallet. +February 20, 2023| Enhanced guidance for presenting order-tracking information and added artwork. +November 30, 2022| Added guidance to include a carrier name in status information for a shipping fulfillment. +September 14, 2022| Added guidelines for using Verify with Wallet, updated guidance on providing shipping status values and descriptions, and consolidated guidance into one page. + diff --git a/skills/html-injection-testing/SKILL.md b/skills/html-injection-testing/SKILL.md index afc3b660..5ed60195 100644 --- a/skills/html-injection-testing/SKILL.md +++ b/skills/html-injection-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: HTML Injection Testing -description: This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test content injection vulnerabilities". It provides comprehensive HTML injection attack techniques and testing methodologies. +name: html-injection-testing +description: "This skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test content injection vuln..." metadata: author: zebbern version: "1.1" diff --git a/skills/hubspot-integration/SKILL.md b/skills/hubspot-integration/SKILL.md index ca429d1f..99a8fa24 100644 --- a/skills/hubspot-integration/SKILL.md +++ b/skills/hubspot-integration/SKILL.md @@ -1,6 +1,6 @@ --- name: hubspot-integration -description: "Expert patterns for HubSpot CRM integration including OAuth authentication, CRM objects, associations, batch operations, webhooks, and custom objects. Covers Node.js and Python SDKs. Use when: hubspot, hubspot api, hubspot crm, hubspot integration, contacts api." +description: "Expert patterns for HubSpot CRM integration including OAuth authentication, CRM objects, associations, batch operations, webhooks, and custom objects. Covers Node.js and Python SDKs. Use when: hubs..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/hugging-face-cli/SKILL.md b/skills/hugging-face-cli/SKILL.md index e5ac6cae..db236447 100644 --- a/skills/hugging-face-cli/SKILL.md +++ b/skills/hugging-face-cli/SKILL.md @@ -1,6 +1,6 @@ --- name: hugging-face-cli -description: "Execute Hugging Face Hub operations using the `hf` CLI. Use when the user needs to download models/datasets/spaces, upload files to Hub repositories, create repos, manage local cache, or run compute jobs on HF infrastructure. Covers authentication, file transfers, repository creation, cache operations, and cloud compute." +description: "Execute Hugging Face Hub operations using the `hf` CLI. Use when the user needs to download models/datasets/spaces, upload files to Hub repositories, create repos, manage local cache, or run comput..." source: "https://github.com/huggingface/skills/tree/main/skills/hugging-face-cli" risk: safe --- diff --git a/skills/hugging-face-jobs/SKILL.md b/skills/hugging-face-jobs/SKILL.md index 70c43c8d..6efabe58 100644 --- a/skills/hugging-face-jobs/SKILL.md +++ b/skills/hugging-face-jobs/SKILL.md @@ -1,6 +1,6 @@ --- name: hugging-face-jobs -description: "This skill should be used when users want to run any workload on Hugging Face Jobs infrastructure. Covers UV scripts, Docker-based jobs, hardware selection, cost estimation, authentication with tokens, secrets management, timeout configuration, and result persistence. Designed for general-purpose compute workloads including data processing, inference, experiments, batch jobs, and any Python-based tasks. Should be invoked for tasks involving cloud compute, GPU workloads, or when users mention running jobs on Hugging Face infrastructure without local setup." +description: "This skill should be used when users want to run any workload on Hugging Face Jobs infrastructure. Covers UV scripts, Docker-based jobs, hardware selection, cost estimation, authentication with tok..." license: "Complete terms in LICENSE.txt" source: "https://github.com/huggingface/skills/tree/main/skills/hugging-face-jobs" risk: safe diff --git a/skills/hybrid-cloud-networking/SKILL.md b/skills/hybrid-cloud-networking/SKILL.md index fb72b613..8e16fdcd 100644 --- a/skills/hybrid-cloud-networking/SKILL.md +++ b/skills/hybrid-cloud-networking/SKILL.md @@ -1,6 +1,6 @@ --- name: hybrid-cloud-networking -description: Configure secure, high-performance connectivity between on-premises infrastructure and cloud platforms using VPN and dedicated connections. Use when building hybrid cloud architectures, connecting data centers to cloud, or implementing secure cross-premises networking. +description: "Configure secure, high-performance connectivity between on-premises infrastructure and cloud platforms using VPN and dedicated connections. Use when building hybrid cloud architectures, connecting ..." --- # Hybrid Cloud Networking diff --git a/skills/idor-testing/SKILL.md b/skills/idor-testing/SKILL.md index 945e16d0..cd70a455 100644 --- a/skills/idor-testing/SKILL.md +++ b/skills/idor-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: IDOR Vulnerability Testing -description: This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references," or "bypass authorization to access other users' data." It provides comprehensive guidance for detecting, exploiting, and remediating IDOR vulnerabilities in web applications. +name: idor-testing +description: "This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references,..." metadata: author: zebbern version: "1.1" diff --git a/skills/incident-runbook-templates/SKILL.md b/skills/incident-runbook-templates/SKILL.md index f0e595e4..52562edf 100644 --- a/skills/incident-runbook-templates/SKILL.md +++ b/skills/incident-runbook-templates/SKILL.md @@ -1,6 +1,6 @@ --- name: incident-runbook-templates -description: Create structured incident response runbooks with step-by-step procedures, escalation paths, and recovery actions. Use when building runbooks, responding to incidents, or establishing incident response procedures. +description: "Create structured incident response runbooks with step-by-step procedures, escalation paths, and recovery actions. Use when building runbooks, responding to incidents, or establishing incident resp..." --- # Incident Runbook Templates diff --git a/skills/infinite-gratitude/SKILL.md b/skills/infinite-gratitude/SKILL.md index 2362abe3..d4803d9e 100644 --- a/skills/infinite-gratitude/SKILL.md +++ b/skills/infinite-gratitude/SKILL.md @@ -1,5 +1,5 @@ --- -name: Infinite Gratitude +name: infinite-gratitude description: Multi-agent research skill for parallel research execution (10 agents, battle-tested with real case studies). risk: safe source: https://github.com/sstklen/infinite-gratitude diff --git a/skills/inngest/SKILL.md b/skills/inngest/SKILL.md index 10df9fe2..2c4ea4ef 100644 --- a/skills/inngest/SKILL.md +++ b/skills/inngest/SKILL.md @@ -1,6 +1,6 @@ --- name: inngest -description: "Inngest expert for serverless-first background jobs, event-driven workflows, and durable execution without managing queues or workers. Use when: inngest, serverless background job, event-driven workflow, step function, durable execution." +description: "Inngest expert for serverless-first background jobs, event-driven workflows, and durable execution without managing queues or workers. Use when: inngest, serverless background job, event-driven wor..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/interactive-portfolio/SKILL.md b/skills/interactive-portfolio/SKILL.md index 110f519d..c0d9270d 100644 --- a/skills/interactive-portfolio/SKILL.md +++ b/skills/interactive-portfolio/SKILL.md @@ -1,6 +1,6 @@ --- name: interactive-portfolio -description: "Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio." +description: "Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios,..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/internal-comms-anthropic/SKILL.md b/skills/internal-comms-anthropic/SKILL.md index 56ea935b..f9233c37 100644 --- a/skills/internal-comms-anthropic/SKILL.md +++ b/skills/internal-comms-anthropic/SKILL.md @@ -1,6 +1,6 @@ --- -name: internal-comms -description: A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.). +name: internal-comms-anthropic +description: "A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal ..." license: Complete terms in LICENSE.txt --- diff --git a/skills/internal-comms-community/SKILL.md b/skills/internal-comms-community/SKILL.md index 56ea935b..3570ab60 100644 --- a/skills/internal-comms-community/SKILL.md +++ b/skills/internal-comms-community/SKILL.md @@ -1,6 +1,6 @@ --- -name: internal-comms -description: A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.). +name: internal-comms-community +description: "A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal ..." license: Complete terms in LICENSE.txt --- diff --git a/skills/istio-traffic-management/SKILL.md b/skills/istio-traffic-management/SKILL.md index 8a34203b..bc849666 100644 --- a/skills/istio-traffic-management/SKILL.md +++ b/skills/istio-traffic-management/SKILL.md @@ -1,6 +1,6 @@ --- name: istio-traffic-management -description: Configure Istio traffic management including routing, load balancing, circuit breakers, and canary deployments. Use when implementing service mesh traffic policies, progressive delivery, or resilience patterns. +description: "Configure Istio traffic management including routing, load balancing, circuit breakers, and canary deployments. Use when implementing service mesh traffic policies, progressive delivery, or resilie..." --- # Istio Traffic Management diff --git a/skills/javascript-mastery/SKILL.md b/skills/javascript-mastery/SKILL.md index 8ff57410..35222dad 100644 --- a/skills/javascript-mastery/SKILL.md +++ b/skills/javascript-mastery/SKILL.md @@ -1,6 +1,6 @@ --- name: javascript-mastery -description: "Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced patterns like async/await and functional programming. Use when explaining JS concepts, debugging JavaScript issues, or teaching JavaScript fundamentals." +description: "Comprehensive JavaScript reference covering 33+ essential concepts every developer should know. From fundamentals like primitives and closures to advanced patterns like async/await and functional p..." --- # 🧠 JavaScript Mastery diff --git a/skills/javascript-testing-patterns/SKILL.md b/skills/javascript-testing-patterns/SKILL.md index d7cd039e..7c41f110 100644 --- a/skills/javascript-testing-patterns/SKILL.md +++ b/skills/javascript-testing-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: javascript-testing-patterns -description: Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, setting up test infrastructure, or implementing TDD/BDD workflows. +description: "Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use..." --- # JavaScript Testing Patterns diff --git a/skills/k8s-manifest-generator/SKILL.md b/skills/k8s-manifest-generator/SKILL.md index fda9fb5c..6ac2c01e 100644 --- a/skills/k8s-manifest-generator/SKILL.md +++ b/skills/k8s-manifest-generator/SKILL.md @@ -1,6 +1,6 @@ --- name: k8s-manifest-generator -description: Create production-ready Kubernetes manifests for Deployments, Services, ConfigMaps, and Secrets following best practices and security standards. Use when generating Kubernetes YAML manifests, creating K8s resources, or implementing production-grade Kubernetes configurations. +description: "Create production-ready Kubernetes manifests for Deployments, Services, ConfigMaps, and Secrets following best practices and security standards. Use when generating Kubernetes YAML manifests, creat..." --- # Kubernetes Manifest Generator diff --git a/skills/k8s-security-policies/SKILL.md b/skills/k8s-security-policies/SKILL.md index 09fceae5..00c1a10f 100644 --- a/skills/k8s-security-policies/SKILL.md +++ b/skills/k8s-security-policies/SKILL.md @@ -1,6 +1,6 @@ --- name: k8s-security-policies -description: Implement Kubernetes security policies including NetworkPolicy, PodSecurityPolicy, and RBAC for production-grade security. Use when securing Kubernetes clusters, implementing network isolation, or enforcing pod security standards. +description: "Implement Kubernetes security policies including NetworkPolicy, PodSecurityPolicy, and RBAC for production-grade security. Use when securing Kubernetes clusters, implementing network isolation, or ..." --- # Kubernetes Security Policies diff --git a/skills/kpi-dashboard-design/SKILL.md b/skills/kpi-dashboard-design/SKILL.md index 36bdc09f..0de6b022 100644 --- a/skills/kpi-dashboard-design/SKILL.md +++ b/skills/kpi-dashboard-design/SKILL.md @@ -1,6 +1,6 @@ --- name: kpi-dashboard-design -description: Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use when building business dashboards, selecting metrics, or designing data visualization layouts. +description: "Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use when building business dashboards, selecting metrics, or designing data ..." --- # KPI Dashboard Design diff --git a/skills/langchain-architecture/SKILL.md b/skills/langchain-architecture/SKILL.md index 15cdf183..63eb6a87 100644 --- a/skills/langchain-architecture/SKILL.md +++ b/skills/langchain-architecture/SKILL.md @@ -1,6 +1,6 @@ --- name: langchain-architecture -description: Design LLM applications using the LangChain framework with agents, memory, and tool integration patterns. Use when building LangChain applications, implementing AI agents, or creating complex LLM workflows. +description: "Design LLM applications using the LangChain framework with agents, memory, and tool integration patterns. Use when building LangChain applications, implementing AI agents, or creating complex LLM w..." --- # LangChain Architecture diff --git a/skills/langfuse/SKILL.md b/skills/langfuse/SKILL.md index 3fd579c6..3c9f3ef3 100644 --- a/skills/langfuse/SKILL.md +++ b/skills/langfuse/SKILL.md @@ -1,6 +1,6 @@ --- name: langfuse -description: "Expert in Langfuse - the open-source LLM observability platform. Covers tracing, prompt management, evaluation, datasets, and integration with LangChain, LlamaIndex, and OpenAI. Essential for debugging, monitoring, and improving LLM applications in production. Use when: langfuse, llm observability, llm tracing, prompt management, llm evaluation." +description: "Expert in Langfuse - the open-source LLM observability platform. Covers tracing, prompt management, evaluation, datasets, and integration with LangChain, LlamaIndex, and OpenAI. Essential for debug..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/langgraph/SKILL.md b/skills/langgraph/SKILL.md index de595e2c..e94f0f14 100644 --- a/skills/langgraph/SKILL.md +++ b/skills/langgraph/SKILL.md @@ -1,6 +1,6 @@ --- name: langgraph -description: "Expert in LangGraph - the production-grade framework for building stateful, multi-actor AI applications. Covers graph construction, state management, cycles and branches, persistence with checkpointers, human-in-the-loop patterns, and the ReAct agent pattern. Used in production at LinkedIn, Uber, and 400+ companies. This is LangChain's recommended approach for building agents. Use when: langgraph, langchain agent, stateful agent, agent graph, react agent." +description: "Expert in LangGraph - the production-grade framework for building stateful, multi-actor AI applications. Covers graph construction, state management, cycles and branches, persistence with checkpoin..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/launch-strategy/SKILL.md b/skills/launch-strategy/SKILL.md index b1c4593e..1e38e66d 100644 --- a/skills/launch-strategy/SKILL.md +++ b/skills/launch-strategy/SKILL.md @@ -1,6 +1,6 @@ --- name: launch-strategy -description: "When the user wants to plan a product launch, feature announcement, or release strategy. Also use when the user mentions 'launch,' 'Product Hunt,' 'feature release,' 'announcement,' 'go-to-market,' 'beta launch,' 'early access,' 'waitlist,' or 'product update.' This skill covers phased launches, channel strategy, and ongoing launch momentum." +description: "When the user wants to plan a product launch, feature announcement, or release strategy. Also use when the user mentions 'launch,' 'Product Hunt,' 'feature release,' 'announcement,' 'go-to-market,'..." --- # Launch Strategy diff --git a/skills/linkerd-patterns/SKILL.md b/skills/linkerd-patterns/SKILL.md index 34a73c47..cdd9fa38 100644 --- a/skills/linkerd-patterns/SKILL.md +++ b/skills/linkerd-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: linkerd-patterns -description: Implement Linkerd service mesh patterns for lightweight, security-focused service mesh deployments. Use when setting up Linkerd, configuring traffic policies, or implementing zero-trust networking with minimal overhead. +description: "Implement Linkerd service mesh patterns for lightweight, security-focused service mesh deployments. Use when setting up Linkerd, configuring traffic policies, or implementing zero-trust networking ..." --- # Linkerd Patterns diff --git a/skills/lint-and-validate/SKILL.md b/skills/lint-and-validate/SKILL.md index 313fed0f..e8813f0e 100644 --- a/skills/lint-and-validate/SKILL.md +++ b/skills/lint-and-validate/SKILL.md @@ -1,6 +1,6 @@ --- name: lint-and-validate -description: "Automatic quality control, linting, and static analysis procedures. Use after every code modification to ensure syntax correctness and project standards. Triggers onKeywords: lint, format, check, validate, types, static analysis." +description: "Automatic quality control, linting, and static analysis procedures. Use after every code modification to ensure syntax correctness and project standards. Triggers onKeywords: lint, format, check, v..." allowed-tools: Read, Glob, Grep, Bash --- diff --git a/skills/linux-privilege-escalation/SKILL.md b/skills/linux-privilege-escalation/SKILL.md index 39db53b2..a0997eb5 100644 --- a/skills/linux-privilege-escalation/SKILL.md +++ b/skills/linux-privilege-escalation/SKILL.md @@ -1,6 +1,6 @@ --- -name: Linux Privilege Escalation -description: This skill should be used when the user asks to "escalate privileges on Linux", "find privesc vectors on Linux systems", "exploit sudo misconfigurations", "abuse SUID binaries", "exploit cron jobs for root access", "enumerate Linux systems for privilege escalation", or "gain root access from low-privilege shell". It provides comprehensive techniques for identifying and exploiting privilege escalation paths on Linux systems. +name: linux-privilege-escalation +description: "This skill should be used when the user asks to "escalate privileges on Linux", "find privesc vectors on Linux systems", "exploit sudo misconfigurations", "abuse SUID binaries", "exploit cron jobs ..." metadata: author: zebbern version: "1.1" diff --git a/skills/linux-shell-scripting/SKILL.md b/skills/linux-shell-scripting/SKILL.md index e0fd143a..18fc1eeb 100644 --- a/skills/linux-shell-scripting/SKILL.md +++ b/skills/linux-shell-scripting/SKILL.md @@ -1,6 +1,6 @@ --- -name: Linux Production Shell Scripts -description: This skill should be used when the user asks to "create bash scripts", "automate Linux tasks", "monitor system resources", "backup files", "manage users", or "write production shell scripts". It provides ready-to-use shell script templates for system administration. +name: linux-shell-scripting +description: "This skill should be used when the user asks to "create bash scripts", "automate Linux tasks", "monitor system resources", "backup files", "manage users", or "write production shell scripts". It pr..." metadata: author: zebbern version: "1.1" diff --git a/skills/llm-app-patterns/SKILL.md b/skills/llm-app-patterns/SKILL.md index 548a3f54..8b1d879d 100644 --- a/skills/llm-app-patterns/SKILL.md +++ b/skills/llm-app-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: llm-app-patterns -description: "Production-ready patterns for building LLM applications. Covers RAG pipelines, agent architectures, prompt IDEs, and LLMOps monitoring. Use when designing AI applications, implementing RAG, building agents, or setting up LLM observability." +description: "Production-ready patterns for building LLM applications. Covers RAG pipelines, agent architectures, prompt IDEs, and LLMOps monitoring. Use when designing AI applications, implementing RAG, buildin..." --- # 🤖 LLM Application Patterns diff --git a/skills/llm-evaluation/SKILL.md b/skills/llm-evaluation/SKILL.md index 499974d1..79b6420e 100644 --- a/skills/llm-evaluation/SKILL.md +++ b/skills/llm-evaluation/SKILL.md @@ -1,6 +1,6 @@ --- name: llm-evaluation -description: Implement comprehensive evaluation strategies for LLM applications using automated metrics, human feedback, and benchmarking. Use when testing LLM performance, measuring AI application quality, or establishing evaluation frameworks. +description: "Implement comprehensive evaluation strategies for LLM applications using automated metrics, human feedback, and benchmarking. Use when testing LLM performance, measuring AI application quality, or ..." --- # LLM Evaluation diff --git a/skills/loki-mode/SKILL.md b/skills/loki-mode/SKILL.md index e7278ce7..42ce9588 100644 --- a/skills/loki-mode/SKILL.md +++ b/skills/loki-mode/SKILL.md @@ -1,6 +1,6 @@ --- name: loki-mode -description: Multi-agent autonomous startup system for Claude Code. Triggers on "Loki Mode". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security, data/ML, business operations, marketing, HR, and customer success. Takes PRD to fully deployed, revenue-generating product with zero human intervention. Features Task tool for subagent dispatch, parallel code review with 3 specialized reviewers, severity-based issue triage, distributed task queue with dead letter handling, automatic deployment to cloud providers, A/B testing, customer feedback loops, incident response, circuit breakers, and self-healing. Handles rate limits via distributed state checkpoints and auto-resume with exponential backoff. Requires --dangerously-skip-permissions flag. +description: "Multi-agent autonomous startup system for Claude Code. Triggers on "Loki Mode". Orchestrates 100+ specialized agents across engineering, QA, DevOps, security, data/ML, business operations, marketin..." --- # Loki Mode - Multi-Agent Autonomous Startup System diff --git a/skills/mcp-builder-ms/SKILL.md b/skills/mcp-builder-ms/SKILL.md index 79263539..211a7656 100644 --- a/skills/mcp-builder-ms/SKILL.md +++ b/skills/mcp-builder-ms/SKILL.md @@ -1,6 +1,6 @@ --- -name: mcp-builder -description: Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP), Node/TypeScript (MCP SDK), or C#/.NET (Microsoft MCP SDK). +name: mcp-builder-ms +description: "Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate exte..." --- # MCP Server Development Guide diff --git a/skills/mcp-builder/SKILL.md b/skills/mcp-builder/SKILL.md index 8a1a77a4..7d90a389 100644 --- a/skills/mcp-builder/SKILL.md +++ b/skills/mcp-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: mcp-builder -description: Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK). +description: "Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate exte..." license: Complete terms in LICENSE.txt --- diff --git a/skills/memory-forensics/SKILL.md b/skills/memory-forensics/SKILL.md index 9058793f..3b449600 100644 --- a/skills/memory-forensics/SKILL.md +++ b/skills/memory-forensics/SKILL.md @@ -1,6 +1,6 @@ --- name: memory-forensics -description: Master memory forensics techniques including memory acquisition, process analysis, and artifact extraction using Volatility and related tools. Use when analyzing memory dumps, investigating incidents, or performing malware analysis from RAM captures. +description: "Master memory forensics techniques including memory acquisition, process analysis, and artifact extraction using Volatility and related tools. Use when analyzing memory dumps, investigating inciden..." --- # Memory Forensics diff --git a/skills/memory-safety-patterns/SKILL.md b/skills/memory-safety-patterns/SKILL.md index 1e9a8ab2..f736a6f6 100644 --- a/skills/memory-safety-patterns/SKILL.md +++ b/skills/memory-safety-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: memory-safety-patterns -description: Implement memory-safe programming with RAII, ownership, smart pointers, and resource management across Rust, C++, and C. Use when writing safe systems code, managing resources, or preventing memory bugs. +description: "Implement memory-safe programming with RAII, ownership, smart pointers, and resource management across Rust, C++, and C. Use when writing safe systems code, managing resources, or preventing memory..." --- # Memory Safety Patterns diff --git a/skills/metasploit-framework/SKILL.md b/skills/metasploit-framework/SKILL.md index 2282770a..fa662925 100644 --- a/skills/metasploit-framework/SKILL.md +++ b/skills/metasploit-framework/SKILL.md @@ -1,6 +1,6 @@ --- -name: Metasploit Framework -description: This skill should be used when the user asks to "use Metasploit for penetration testing", "exploit vulnerabilities with msfconsole", "create payloads with msfvenom", "perform post-exploitation", "use auxiliary modules for scanning", or "develop custom exploits". It provides comprehensive guidance for leveraging the Metasploit Framework in security assessments. +name: metasploit-framework +description: "This skill should be used when the user asks to "use Metasploit for penetration testing", "exploit vulnerabilities with msfconsole", "create payloads with msfvenom", "perform post-exploitation", "u..." metadata: author: zebbern version: "1.1" diff --git a/skills/micro-saas-launcher/SKILL.md b/skills/micro-saas-launcher/SKILL.md index 581cac68..7ff3841b 100644 --- a/skills/micro-saas-launcher/SKILL.md +++ b/skills/micro-saas-launcher/SKILL.md @@ -1,6 +1,6 @@ --- name: micro-saas-launcher -description: "Expert in launching small, focused SaaS products fast - the indie hacker approach to building profitable software. Covers idea validation, MVP development, pricing, launch strategies, and growing to sustainable revenue. Ship in weeks, not months. Use when: micro saas, indie hacker, small saas, side project, saas mvp." +description: "Expert in launching small, focused SaaS products fast - the indie hacker approach to building profitable software. Covers idea validation, MVP development, pricing, launch strategies, and growing t..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/microservices-patterns/SKILL.md b/skills/microservices-patterns/SKILL.md index 548972b9..833c1e6d 100644 --- a/skills/microservices-patterns/SKILL.md +++ b/skills/microservices-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: microservices-patterns -description: Design microservices architectures with service boundaries, event-driven communication, and resilience patterns. Use when building distributed systems, decomposing monoliths, or implementing microservices. +description: "Design microservices architectures with service boundaries, event-driven communication, and resilience patterns. Use when building distributed systems, decomposing monoliths, or implementing micros..." --- # Microservices Patterns diff --git a/skills/ml-pipeline-workflow/SKILL.md b/skills/ml-pipeline-workflow/SKILL.md index 48bd22ac..9bdd5f72 100644 --- a/skills/ml-pipeline-workflow/SKILL.md +++ b/skills/ml-pipeline-workflow/SKILL.md @@ -1,6 +1,6 @@ --- name: ml-pipeline-workflow -description: Build end-to-end MLOps pipelines from data preparation through model training, validation, and production deployment. Use when creating ML pipelines, implementing MLOps practices, or automating model training and deployment workflows. +description: "Build end-to-end MLOps pipelines from data preparation through model training, validation, and production deployment. Use when creating ML pipelines, implementing MLOps practices, or automating mod..." --- # ML Pipeline Workflow diff --git a/skills/mobile-design/SKILL.md b/skills/mobile-design/SKILL.md index f4109e76..255dc528 100644 --- a/skills/mobile-design/SKILL.md +++ b/skills/mobile-design/SKILL.md @@ -1,6 +1,6 @@ --- name: mobile-design -description: Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches principles and constraints, not fixed layouts. Use for React Native, Flutter, or native mobile apps. +description: "Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches pr..." allowed-tools: Read, Glob, Grep, Bash --- # Mobile Design System diff --git a/skills/modern-javascript-patterns/SKILL.md b/skills/modern-javascript-patterns/SKILL.md index cd229d2b..4d2d2c7f 100644 --- a/skills/modern-javascript-patterns/SKILL.md +++ b/skills/modern-javascript-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: modern-javascript-patterns -description: Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications. +description: "Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, effici..." --- # Modern JavaScript Patterns diff --git a/skills/monorepo-management/SKILL.md b/skills/monorepo-management/SKILL.md index 8892da39..29c725f7 100644 --- a/skills/monorepo-management/SKILL.md +++ b/skills/monorepo-management/SKILL.md @@ -1,6 +1,6 @@ --- name: monorepo-management -description: Master monorepo management with Turborepo, Nx, and pnpm workspaces to build efficient, scalable multi-package repositories with optimized builds and dependency management. Use when setting up monorepos, optimizing builds, or managing shared dependencies. +description: "Master monorepo management with Turborepo, Nx, and pnpm workspaces to build efficient, scalable multi-package repositories with optimized builds and dependency management. Use when setting up monor..." --- # Monorepo Management diff --git a/skills/moodle-external-api-development/SKILL.md b/skills/moodle-external-api-development/SKILL.md index c5a9a09f..9ccdb5bf 100644 --- a/skills/moodle-external-api-development/SKILL.md +++ b/skills/moodle-external-api-development/SKILL.md @@ -1,6 +1,6 @@ --- name: moodle-external-api-development -description: Create custom external web service APIs for Moodle LMS. Use when implementing web services for course management, user tracking, quiz operations, or custom plugin functionality. Covers parameter validation, database operations, error handling, service registration, and Moodle coding standards. +description: "Create custom external web service APIs for Moodle LMS. Use when implementing web services for course management, user tracking, quiz operations, or custom plugin functionality. Covers parameter va..." --- # Moodle External API Development diff --git a/skills/multi-cloud-architecture/SKILL.md b/skills/multi-cloud-architecture/SKILL.md index 97b0cbeb..b69976e3 100644 --- a/skills/multi-cloud-architecture/SKILL.md +++ b/skills/multi-cloud-architecture/SKILL.md @@ -1,6 +1,6 @@ --- name: multi-cloud-architecture -description: Design multi-cloud architectures using a decision framework to select and integrate services across AWS, Azure, and GCP. Use when building multi-cloud systems, avoiding vendor lock-in, or leveraging best-of-breed services from multiple providers. +description: "Design multi-cloud architectures using a decision framework to select and integrate services across AWS, Azure, and GCP. Use when building multi-cloud systems, avoiding vendor lock-in, or leveragin..." --- # Multi-Cloud Architecture diff --git a/skills/n8n-mcp-tools-expert/SKILL.md b/skills/n8n-mcp-tools-expert/SKILL.md index 62c4619d..b32a454c 100644 --- a/skills/n8n-mcp-tools-expert/SKILL.md +++ b/skills/n8n-mcp-tools-expert/SKILL.md @@ -1,6 +1,6 @@ --- name: n8n-mcp-tools-expert -description: "Expert guide for using n8n-mcp MCP tools effectively. Use when searching for nodes, validating configurations, accessing templates, managing workflows, or using any n8n-mcp tool. Provides tool selection guidance, parameter formats, and common patterns." +description: "Expert guide for using n8n-mcp MCP tools effectively. Use when searching for nodes, validating configurations, accessing templates, managing workflows, or using any n8n-mcp tool. Provides tool sele..." source: "https://github.com/czlonkowski/n8n-skills/tree/main/skills/n8n-mcp-tools-expert" risk: safe --- diff --git a/skills/n8n-node-configuration/SKILL.md b/skills/n8n-node-configuration/SKILL.md index 0bfc1d3a..c19778f5 100644 --- a/skills/n8n-node-configuration/SKILL.md +++ b/skills/n8n-node-configuration/SKILL.md @@ -1,6 +1,6 @@ --- name: n8n-node-configuration -description: "Operation-aware node configuration guidance. Use when configuring nodes, understanding property dependencies, determining required fields, choosing between get_node detail levels, or learning common configuration patterns by node type." +description: "Operation-aware node configuration guidance. Use when configuring nodes, understanding property dependencies, determining required fields, choosing between get_node detail levels, or learning commo..." source: "https://github.com/czlonkowski/n8n-skills/tree/main/skills/n8n-node-configuration" risk: safe --- diff --git a/skills/neon-postgres/SKILL.md b/skills/neon-postgres/SKILL.md index a07eb608..425a1ad3 100644 --- a/skills/neon-postgres/SKILL.md +++ b/skills/neon-postgres/SKILL.md @@ -1,6 +1,6 @@ --- name: neon-postgres -description: "Expert patterns for Neon serverless Postgres, branching, connection pooling, and Prisma/Drizzle integration Use when: neon database, serverless postgres, database branching, neon postgres, postgres serverless." +description: "Expert patterns for Neon serverless Postgres, branching, connection pooling, and Prisma/Drizzle integration Use when: neon database, serverless postgres, database branching, neon postgres, postgres..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/nestjs-expert/SKILL.md b/skills/nestjs-expert/SKILL.md index e224f672..ab8d3fec 100644 --- a/skills/nestjs-expert/SKILL.md +++ b/skills/nestjs-expert/SKILL.md @@ -1,6 +1,6 @@ --- name: nestjs-expert -description: Nest.js framework expert specializing in module architecture, dependency injection, middleware, guards, interceptors, testing with Jest/Supertest, TypeORM/Mongoose integration, and Passport.js authentication. Use PROACTIVELY for any Nest.js application issues including architecture decisions, testing strategies, performance optimization, or debugging complex dependency injection problems. If a specialized expert is a better fit, I will recommend switching and stop. +description: "Nest.js framework expert specializing in module architecture, dependency injection, middleware, guards, interceptors, testing with Jest/Supertest, TypeORM/Mongoose integration, and Passport.js auth..." category: framework displayName: Nest.js Framework Expert color: red diff --git a/skills/network-101/SKILL.md b/skills/network-101/SKILL.md index 6db8ec59..c106f958 100644 --- a/skills/network-101/SKILL.md +++ b/skills/network-101/SKILL.md @@ -1,6 +1,6 @@ --- -name: Network 101 -description: This skill should be used when the user asks to "set up a web server", "configure HTTP or HTTPS", "perform SNMP enumeration", "configure SMB shares", "test network services", or needs guidance on configuring and testing network services for penetration testing labs. +name: network-101 +description: "This skill should be used when the user asks to "set up a web server", "configure HTTP or HTTPS", "perform SNMP enumeration", "configure SMB shares", "test network services", or needs guidance on c..." metadata: author: zebbern version: "1.1" diff --git a/skills/nextjs-app-router-patterns/SKILL.md b/skills/nextjs-app-router-patterns/SKILL.md index 46af54ae..352e059c 100644 --- a/skills/nextjs-app-router-patterns/SKILL.md +++ b/skills/nextjs-app-router-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: nextjs-app-router-patterns -description: Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components. +description: "Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Serve..." --- # Next.js App Router Patterns diff --git a/skills/nft-standards/SKILL.md b/skills/nft-standards/SKILL.md index f57aa864..f49c41f9 100644 --- a/skills/nft-standards/SKILL.md +++ b/skills/nft-standards/SKILL.md @@ -1,6 +1,6 @@ --- name: nft-standards -description: Implement NFT standards (ERC-721, ERC-1155) with proper metadata handling, minting strategies, and marketplace integration. Use when creating NFT contracts, building NFT marketplaces, or implementing digital asset systems. +description: "Implement NFT standards (ERC-721, ERC-1155) with proper metadata handling, minting strategies, and marketplace integration. Use when creating NFT contracts, building NFT marketplaces, or implementi..." --- # NFT Standards diff --git a/skills/nodejs-backend-patterns/SKILL.md b/skills/nodejs-backend-patterns/SKILL.md index 8cc21b38..73534780 100644 --- a/skills/nodejs-backend-patterns/SKILL.md +++ b/skills/nodejs-backend-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: nodejs-backend-patterns -description: Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures. +description: "Build production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when..." --- # Node.js Backend Patterns diff --git a/skills/notebooklm/SKILL.md b/skills/notebooklm/SKILL.md index 2be7e161..873afeb5 100755 --- a/skills/notebooklm/SKILL.md +++ b/skills/notebooklm/SKILL.md @@ -1,6 +1,6 @@ --- name: notebooklm -description: Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses. +description: "Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth...." --- # NotebookLM Research Assistant Skill diff --git a/skills/notion-template-business/SKILL.md b/skills/notion-template-business/SKILL.md index 74e25db6..de00c124 100644 --- a/skills/notion-template-business/SKILL.md +++ b/skills/notion-template-business/SKILL.md @@ -1,6 +1,6 @@ --- name: notion-template-business -description: "Expert in building and selling Notion templates as a business - not just making templates, but building a sustainable digital product business. Covers template design, pricing, marketplaces, marketing, and scaling to real revenue. Use when: notion template, sell templates, digital product, notion business, gumroad." +description: "Expert in building and selling Notion templates as a business - not just making templates, but building a sustainable digital product business. Covers template design, pricing, marketplaces, market..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/observability-monitoring-slo-implement/SKILL.md b/skills/observability-monitoring-slo-implement/SKILL.md index 0513fb98..5974d684 100644 --- a/skills/observability-monitoring-slo-implement/SKILL.md +++ b/skills/observability-monitoring-slo-implement/SKILL.md @@ -1,6 +1,6 @@ --- name: observability-monitoring-slo-implement -description: "You are an SLO (Service Level Objective) expert specializing in implementing reliability standards and error budget-based practices. Design SLO frameworks, define SLIs, and build monitoring that balances reliability with delivery velocity." +description: "You are an SLO (Service Level Objective) expert specializing in implementing reliability standards and error budget-based practices. Design SLO frameworks, define SLIs, and build monitoring that ba..." --- # SLO Implementation Guide diff --git a/skills/observe-whatsapp/SKILL.md b/skills/observe-whatsapp/SKILL.md index 5b4160a6..64691cd3 100644 --- a/skills/observe-whatsapp/SKILL.md +++ b/skills/observe-whatsapp/SKILL.md @@ -1,6 +1,6 @@ --- name: observe-whatsapp -description: "Observe and troubleshoot WhatsApp in Kapso: debug message delivery, inspect webhook deliveries/retries, triage API errors, and run health checks. Use when investigating production issues, message failures, or webhook delivery problems." +description: "Observe and troubleshoot WhatsApp in Kapso: debug message delivery, inspect webhook deliveries/retries, triage API errors, and run health checks. Use when investigating production issues, message f..." source: "https://github.com/gokapso/agent-skills/tree/master/skills/observe-whatsapp" risk: safe --- diff --git a/skills/on-call-handoff-patterns/SKILL.md b/skills/on-call-handoff-patterns/SKILL.md index b7fad637..4a5639d5 100644 --- a/skills/on-call-handoff-patterns/SKILL.md +++ b/skills/on-call-handoff-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: on-call-handoff-patterns -description: Master on-call shift handoffs with context transfer, escalation procedures, and documentation. Use when transitioning on-call responsibilities, documenting shift summaries, or improving on-call processes. +description: "Master on-call shift handoffs with context transfer, escalation procedures, and documentation. Use when transitioning on-call responsibilities, documenting shift summaries, or improving on-call pro..." --- # On-Call Handoff Patterns diff --git a/skills/onboarding-cro/SKILL.md b/skills/onboarding-cro/SKILL.md index 97315d69..ad1f41f6 100644 --- a/skills/onboarding-cro/SKILL.md +++ b/skills/onboarding-cro/SKILL.md @@ -1,6 +1,6 @@ --- name: onboarding-cro -description: When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activation," "first-run experience," "empty states," "onboarding checklist," "aha moment," or "new user experience." For signup/registration optimization, see signup-flow-cro. For ongoing email sequences, see email-sequence. +description: "When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activati..." --- # Onboarding CRO diff --git a/skills/paid-ads/SKILL.md b/skills/paid-ads/SKILL.md index 2b3acd92..a2badf1b 100644 --- a/skills/paid-ads/SKILL.md +++ b/skills/paid-ads/SKILL.md @@ -1,6 +1,6 @@ --- name: paid-ads -description: "When the user wants help with paid advertising campaigns on Google Ads, Meta (Facebook/Instagram), LinkedIn, Twitter/X, or other ad platforms. Also use when the user mentions 'PPC,' 'paid media,' 'ad copy,' 'ad creative,' 'ROAS,' 'CPA,' 'ad campaign,' 'retargeting,' or 'audience targeting.' This skill covers campaign strategy, ad creation, audience targeting, and optimization." +description: "When the user wants help with paid advertising campaigns on Google Ads, Meta (Facebook/Instagram), LinkedIn, Twitter/X, or other ad platforms. Also use when the user mentions 'PPC,' 'paid media,' '..." --- # Paid Ads diff --git a/skills/paypal-integration/SKILL.md b/skills/paypal-integration/SKILL.md index 16a1ab81..901daebb 100644 --- a/skills/paypal-integration/SKILL.md +++ b/skills/paypal-integration/SKILL.md @@ -1,6 +1,6 @@ --- name: paypal-integration -description: Integrate PayPal payment processing with support for express checkout, subscriptions, and refund management. Use when implementing PayPal payments, processing online transactions, or building e-commerce checkout flows. +description: "Integrate PayPal payment processing with support for express checkout, subscriptions, and refund management. Use when implementing PayPal payments, processing online transactions, or building e-com..." --- # PayPal Integration diff --git a/skills/paywall-upgrade-cro/SKILL.md b/skills/paywall-upgrade-cro/SKILL.md index 69791185..8407c41e 100644 --- a/skills/paywall-upgrade-cro/SKILL.md +++ b/skills/paywall-upgrade-cro/SKILL.md @@ -1,6 +1,6 @@ --- name: paywall-upgrade-cro -description: When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value. +description: "When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," ..." --- # Paywall and Upgrade Screen CRO diff --git a/skills/pci-compliance/SKILL.md b/skills/pci-compliance/SKILL.md index cec4432a..a7e9bcc8 100644 --- a/skills/pci-compliance/SKILL.md +++ b/skills/pci-compliance/SKILL.md @@ -1,6 +1,6 @@ --- name: pci-compliance -description: Implement PCI DSS compliance requirements for secure handling of payment card data and payment systems. Use when securing payment processing, achieving PCI compliance, or implementing payment card security measures. +description: "Implement PCI DSS compliance requirements for secure handling of payment card data and payment systems. Use when securing payment processing, achieving PCI compliance, or implementing payment card ..." --- # PCI Compliance diff --git a/skills/pdf-official/SKILL.md b/skills/pdf-official/SKILL.md index f6a22ddf..4d9d85f4 100644 --- a/skills/pdf-official/SKILL.md +++ b/skills/pdf-official/SKILL.md @@ -1,6 +1,6 @@ --- -name: pdf -description: Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale. +name: pdf-official +description: "Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmaticall..." license: Proprietary. LICENSE.txt has complete terms --- diff --git a/skills/pentest-checklist/SKILL.md b/skills/pentest-checklist/SKILL.md index bbf7ff77..f4b232ca 100644 --- a/skills/pentest-checklist/SKILL.md +++ b/skills/pentest-checklist/SKILL.md @@ -1,6 +1,6 @@ --- -name: Pentest Checklist -description: This skill should be used when the user asks to "plan a penetration test", "create a security assessment checklist", "prepare for penetration testing", "define pentest scope", "follow security testing best practices", or needs a structured methodology for penetration testing engagements. +name: pentest-checklist +description: "This skill should be used when the user asks to "plan a penetration test", "create a security assessment checklist", "prepare for penetration testing", "define pentest scope", "follow security test..." metadata: author: zebbern version: "1.1" diff --git a/skills/pentest-commands/SKILL.md b/skills/pentest-commands/SKILL.md index 5fdf22aa..560237cf 100644 --- a/skills/pentest-commands/SKILL.md +++ b/skills/pentest-commands/SKILL.md @@ -1,6 +1,6 @@ --- -name: Pentest Commands -description: This skill should be used when the user asks to "run pentest commands", "scan with nmap", "use metasploit exploits", "crack passwords with hydra or john", "scan web vulnerabilities with nikto", "enumerate networks", or needs essential penetration testing command references. +name: pentest-commands +description: "This skill should be used when the user asks to "run pentest commands", "scan with nmap", "use metasploit exploits", "crack passwords with hydra or john", "scan web vulnerabilities with nikto", "en..." metadata: author: zebbern version: "1.1" diff --git a/skills/personal-tool-builder/SKILL.md b/skills/personal-tool-builder/SKILL.md index 8453bd52..38dd7a84 100644 --- a/skills/personal-tool-builder/SKILL.md +++ b/skills/personal-tool-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: personal-tool-builder -description: "Expert in building custom tools that solve your own problems first. The best products often start as personal tools - scratch your own itch, build for yourself, then discover others have the same itch. Covers rapid prototyping, local-first apps, CLI tools, scripts that grow into products, and the art of dogfooding. Use when: build a tool, personal tool, scratch my itch, solve my problem, CLI tool." +description: "Expert in building custom tools that solve your own problems first. The best products often start as personal tools - scratch your own itch, build for yourself, then discover others have the same i..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/plaid-fintech/SKILL.md b/skills/plaid-fintech/SKILL.md index a1258c7d..465b9406 100644 --- a/skills/plaid-fintech/SKILL.md +++ b/skills/plaid-fintech/SKILL.md @@ -1,6 +1,6 @@ --- name: plaid-fintech -description: "Expert patterns for Plaid API integration including Link token flows, transactions sync, identity verification, Auth for ACH, balance checks, webhook handling, and fintech compliance best practices. Use when: plaid, bank account linking, bank connection, ach, account aggregation." +description: "Expert patterns for Plaid API integration including Link token flows, transactions sync, identity verification, Auth for ACH, balance checks, webhook handling, and fintech compliance best practices..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/planning-with-files/SKILL.md b/skills/planning-with-files/SKILL.md index 84d026a5..60a951e1 100644 --- a/skills/planning-with-files/SKILL.md +++ b/skills/planning-with-files/SKILL.md @@ -1,7 +1,7 @@ --- name: planning-with-files version: "2.1.2" -description: Implements Manus-style file-based planning for complex tasks. Creates task_plan.md, findings.md, and progress.md. Use when starting complex multi-step tasks, research projects, or any task requiring >5 tool calls. +description: "Implements Manus-style file-based planning for complex tasks. Creates task_plan.md, findings.md, and progress.md. Use when starting complex multi-step tasks, research projects, or any task requirin..." user-invocable: true allowed-tools: - Read diff --git a/skills/playwright-skill/SKILL.md b/skills/playwright-skill/SKILL.md index 98c82145..6fada950 100644 --- a/skills/playwright-skill/SKILL.md +++ b/skills/playwright-skill/SKILL.md @@ -1,6 +1,6 @@ --- name: playwright-skill -description: Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing. +description: "Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login ..." --- **IMPORTANT - Path Resolution:** diff --git a/skills/podcast-generation/SKILL.md b/skills/podcast-generation/SKILL.md index 7f2e7205..a7ee1efb 100644 --- a/skills/podcast-generation/SKILL.md +++ b/skills/podcast-generation/SKILL.md @@ -1,6 +1,6 @@ --- name: podcast-generation -description: Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creation from content, or integrating with Azure OpenAI Realtime API for real audio output. Covers full-stack implementation from React frontend to Python FastAPI backend with WebSocket streaming. +description: "Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creatio..." --- # Podcast Generation with GPT Realtime Mini diff --git a/skills/postgres-best-practices/SKILL.md b/skills/postgres-best-practices/SKILL.md index c1ad772e..c307dcec 100644 --- a/skills/postgres-best-practices/SKILL.md +++ b/skills/postgres-best-practices/SKILL.md @@ -1,5 +1,5 @@ --- -name: supabase-postgres-best-practices +name: postgres-best-practices description: Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations. license: MIT metadata: diff --git a/skills/postmortem-writing/SKILL.md b/skills/postmortem-writing/SKILL.md index 4253b606..f1d816a2 100644 --- a/skills/postmortem-writing/SKILL.md +++ b/skills/postmortem-writing/SKILL.md @@ -1,6 +1,6 @@ --- name: postmortem-writing -description: Write effective blameless postmortems with root cause analysis, timelines, and action items. Use when conducting incident reviews, writing postmortem documents, or improving incident response processes. +description: "Write effective blameless postmortems with root cause analysis, timelines, and action items. Use when conducting incident reviews, writing postmortem documents, or improving incident response proce..." --- # Postmortem Writing diff --git a/skills/pptx-official/SKILL.md b/skills/pptx-official/SKILL.md index b93b875f..84087ad3 100644 --- a/skills/pptx-official/SKILL.md +++ b/skills/pptx-official/SKILL.md @@ -1,6 +1,6 @@ --- -name: pptx -description: "Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks" +name: pptx-official +description: "Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layo..." license: Proprietary. LICENSE.txt has complete terms --- diff --git a/skills/prisma-expert/SKILL.md b/skills/prisma-expert/SKILL.md index 9b25003e..5638fe0d 100644 --- a/skills/prisma-expert/SKILL.md +++ b/skills/prisma-expert/SKILL.md @@ -1,6 +1,6 @@ --- name: prisma-expert -description: Prisma ORM expert for schema design, migrations, query optimization, relations modeling, and database operations. Use PROACTIVELY for Prisma schema issues, migration problems, query performance, relation design, or database connection issues. +description: "Prisma ORM expert for schema design, migrations, query optimization, relations modeling, and database operations. Use PROACTIVELY for Prisma schema issues, migration problems, query performance, re..." --- # Prisma Expert diff --git a/skills/privilege-escalation-methods/SKILL.md b/skills/privilege-escalation-methods/SKILL.md index bfe17dc5..289c86c6 100644 --- a/skills/privilege-escalation-methods/SKILL.md +++ b/skills/privilege-escalation-methods/SKILL.md @@ -1,6 +1,6 @@ --- -name: Privilege Escalation Methods -description: This skill should be used when the user asks to "escalate privileges", "get root access", "become administrator", "privesc techniques", "abuse sudo", "exploit SUID binaries", "Kerberoasting", "pass-the-ticket", "token impersonation", or needs guidance on post-exploitation privilege escalation for Linux or Windows systems. +name: privilege-escalation-methods +description: "This skill should be used when the user asks to "escalate privileges", "get root access", "become administrator", "privesc techniques", "abuse sudo", "exploit SUID binaries", "Kerberoasting", "pass..." metadata: author: zebbern version: "1.1" diff --git a/skills/product-manager-toolkit/SKILL.md b/skills/product-manager-toolkit/SKILL.md index f0d605bf..e0d660cc 100644 --- a/skills/product-manager-toolkit/SKILL.md +++ b/skills/product-manager-toolkit/SKILL.md @@ -1,6 +1,6 @@ --- name: product-manager-toolkit -description: Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies. Use for feature prioritization, user research synthesis, requirement documentation, and product strategy development. +description: "Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies. Use for feature prioritizati..." --- # Product Manager Toolkit diff --git a/skills/prometheus-configuration/SKILL.md b/skills/prometheus-configuration/SKILL.md index ca5d6579..392b818c 100644 --- a/skills/prometheus-configuration/SKILL.md +++ b/skills/prometheus-configuration/SKILL.md @@ -1,6 +1,6 @@ --- name: prometheus-configuration -description: Set up Prometheus for comprehensive metric collection, storage, and monitoring of infrastructure and applications. Use when implementing metrics collection, setting up monitoring infrastructure, or configuring alerting systems. +description: "Set up Prometheus for comprehensive metric collection, storage, and monitoring of infrastructure and applications. Use when implementing metrics collection, setting up monitoring infrastructure, or..." --- # Prometheus Configuration diff --git a/skills/prompt-caching/SKILL.md b/skills/prompt-caching/SKILL.md index 7c30fc89..f30a5a1f 100644 --- a/skills/prompt-caching/SKILL.md +++ b/skills/prompt-caching/SKILL.md @@ -1,6 +1,6 @@ --- name: prompt-caching -description: "Caching strategies for LLM prompts including Anthropic prompt caching, response caching, and CAG (Cache Augmented Generation) Use when: prompt caching, cache prompt, response cache, cag, cache augmented." +description: "Caching strategies for LLM prompts including Anthropic prompt caching, response caching, and CAG (Cache Augmented Generation) Use when: prompt caching, cache prompt, response cache, cag, cache augm..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/prompt-engineering-patterns/SKILL.md b/skills/prompt-engineering-patterns/SKILL.md index a5383998..dc7efc82 100644 --- a/skills/prompt-engineering-patterns/SKILL.md +++ b/skills/prompt-engineering-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: prompt-engineering-patterns -description: Master advanced prompt engineering techniques to maximize LLM performance, reliability, and controllability in production. Use when optimizing prompts, improving LLM outputs, or designing production prompt templates. +description: "Master advanced prompt engineering techniques to maximize LLM performance, reliability, and controllability in production. Use when optimizing prompts, improving LLM outputs, or designing productio..." --- # Prompt Engineering Patterns diff --git a/skills/prompt-library/SKILL.md b/skills/prompt-library/SKILL.md index 2421a27f..51d374f4 100644 --- a/skills/prompt-library/SKILL.md +++ b/skills/prompt-library/SKILL.md @@ -1,6 +1,6 @@ --- name: prompt-library -description: "Curated collection of high-quality prompts for various use cases. Includes role-based prompts, task-specific templates, and prompt refinement techniques. Use when user needs prompt templates, role-play prompts, or ready-to-use prompt examples for coding, writing, analysis, or creative tasks." +description: "Curated collection of high-quality prompts for various use cases. Includes role-based prompts, task-specific templates, and prompt refinement techniques. Use when user needs prompt templates, role-..." --- # 📝 Prompt Library diff --git a/skills/protocol-reverse-engineering/SKILL.md b/skills/protocol-reverse-engineering/SKILL.md index 3cbf76e8..ad8a8fae 100644 --- a/skills/protocol-reverse-engineering/SKILL.md +++ b/skills/protocol-reverse-engineering/SKILL.md @@ -1,6 +1,6 @@ --- name: protocol-reverse-engineering -description: Master network protocol reverse engineering including packet analysis, protocol dissection, and custom protocol documentation. Use when analyzing network traffic, understanding proprietary protocols, or debugging network communication. +description: "Master network protocol reverse engineering including packet analysis, protocol dissection, and custom protocol documentation. Use when analyzing network traffic, understanding proprietary protocol..." --- # Protocol Reverse Engineering diff --git a/skills/pydantic-models-py/SKILL.md b/skills/pydantic-models-py/SKILL.md index b46dc1ef..8b12ba3f 100644 --- a/skills/pydantic-models-py/SKILL.md +++ b/skills/pydantic-models-py/SKILL.md @@ -1,6 +1,6 @@ --- name: pydantic-models-py -description: Create Pydantic models following the multi-model pattern with Base, Create, Update, Response, and InDB variants. Use when defining API request/response schemas, database models, or data validation in Python applications using Pydantic v2. +description: "Create Pydantic models following the multi-model pattern with Base, Create, Update, Response, and InDB variants. Use when defining API request/response schemas, database models, or data validation ..." --- # Pydantic Models diff --git a/skills/python-packaging/SKILL.md b/skills/python-packaging/SKILL.md index 21f798bd..d05c4572 100644 --- a/skills/python-packaging/SKILL.md +++ b/skills/python-packaging/SKILL.md @@ -1,6 +1,6 @@ --- name: python-packaging -description: Create distributable Python packages with proper project structure, setup.py/pyproject.toml, and publishing to PyPI. Use when packaging Python libraries, creating CLI tools, or distributing Python code. +description: "Create distributable Python packages with proper project structure, setup.py/pyproject.toml, and publishing to PyPI. Use when packaging Python libraries, creating CLI tools, or distributing Python ..." --- # Python Packaging diff --git a/skills/rag-engineer/SKILL.md b/skills/rag-engineer/SKILL.md index b20c7ce9..68bad1f6 100644 --- a/skills/rag-engineer/SKILL.md +++ b/skills/rag-engineer/SKILL.md @@ -1,6 +1,6 @@ --- name: rag-engineer -description: "Expert in building Retrieval-Augmented Generation systems. Masters embedding models, vector databases, chunking strategies, and retrieval optimization for LLM applications. Use when: building RAG, vector search, embeddings, semantic search, document retrieval." +description: "Expert in building Retrieval-Augmented Generation systems. Masters embedding models, vector databases, chunking strategies, and retrieval optimization for LLM applications. Use when: building RAG, ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/rag-implementation/SKILL.md b/skills/rag-implementation/SKILL.md index e8e34719..531b706f 100644 --- a/skills/rag-implementation/SKILL.md +++ b/skills/rag-implementation/SKILL.md @@ -1,6 +1,6 @@ --- name: rag-implementation -description: Build Retrieval-Augmented Generation (RAG) systems for LLM applications with vector databases and semantic search. Use when implementing knowledge-grounded AI, building document Q&A systems, or integrating LLMs with external knowledge bases. +description: "Build Retrieval-Augmented Generation (RAG) systems for LLM applications with vector databases and semantic search. Use when implementing knowledge-grounded AI, building document Q&A systems, or int..." --- # RAG Implementation diff --git a/skills/react-best-practices/SKILL.md b/skills/react-best-practices/SKILL.md index 25bbe87e..353c6fa6 100644 --- a/skills/react-best-practices/SKILL.md +++ b/skills/react-best-practices/SKILL.md @@ -1,6 +1,6 @@ --- -name: vercel-react-best-practices -description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. +name: react-best-practices +description: "React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance pat..." --- # Vercel React Best Practices diff --git a/skills/react-flow-architect/SKILL.md b/skills/react-flow-architect/SKILL.md index 73fafe39..b6f5724f 100644 --- a/skills/react-flow-architect/SKILL.md +++ b/skills/react-flow-architect/SKILL.md @@ -1,6 +1,6 @@ --- name: react-flow-architect -description: "Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements." +description: "Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or..." --- # ReactFlow Architect diff --git a/skills/react-flow-node-ts/SKILL.md b/skills/react-flow-node-ts/SKILL.md index e0a90a64..b1c7d6a9 100644 --- a/skills/react-flow-node-ts/SKILL.md +++ b/skills/react-flow-node-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: react-flow-node-ts -description: Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components. +description: "Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing no..." --- # React Flow Node diff --git a/skills/react-modernization/SKILL.md b/skills/react-modernization/SKILL.md index 41b6c9c3..0783adb1 100644 --- a/skills/react-modernization/SKILL.md +++ b/skills/react-modernization/SKILL.md @@ -1,6 +1,6 @@ --- name: react-modernization -description: Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions. +description: "Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to..." --- # React Modernization diff --git a/skills/react-native-architecture/SKILL.md b/skills/react-native-architecture/SKILL.md index 32f460c5..3559d219 100644 --- a/skills/react-native-architecture/SKILL.md +++ b/skills/react-native-architecture/SKILL.md @@ -1,6 +1,6 @@ --- name: react-native-architecture -description: Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects. +description: "Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecti..." --- # React Native Architecture diff --git a/skills/readme/SKILL.md b/skills/readme/SKILL.md index dbd0e0fb..e16ba838 100644 --- a/skills/readme/SKILL.md +++ b/skills/readme/SKILL.md @@ -1,6 +1,6 @@ --- name: readme -description: "When the user wants to create or update a README.md file for a project. Also use when the user says 'write readme,' 'create readme,' 'document this project,' 'project documentation,' or asks for help with README.md. This skill creates absurdly thorough documentation covering local setup, architecture, and deployment." +description: "When the user wants to create or update a README.md file for a project. Also use when the user says 'write readme,' 'create readme,' 'document this project,' 'project documentation,' or asks for he..." source: "https://github.com/Shpigford/skills/tree/main/readme" risk: safe --- diff --git a/skills/receiving-code-review/SKILL.md b/skills/receiving-code-review/SKILL.md index 4ea72cdf..5d99c5ab 100644 --- a/skills/receiving-code-review/SKILL.md +++ b/skills/receiving-code-review/SKILL.md @@ -1,6 +1,6 @@ --- name: receiving-code-review -description: Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation +description: "Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performat..." --- # Code Review Reception diff --git a/skills/red-team-tools/SKILL.md b/skills/red-team-tools/SKILL.md index e3d2e677..4052e623 100644 --- a/skills/red-team-tools/SKILL.md +++ b/skills/red-team-tools/SKILL.md @@ -1,6 +1,6 @@ --- -name: Red Team Tools and Methodology -description: This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or needs security researcher techniques and tool configurations from top bug bounty hunters. +name: red-team-tools +description: "This skill should be used when the user asks to "follow red team methodology", "perform bug bounty hunting", "automate reconnaissance", "hunt for XSS vulnerabilities", "enumerate subdomains", or ne..." metadata: author: zebbern version: "1.1" diff --git a/skills/referral-program/SKILL.md b/skills/referral-program/SKILL.md index f6a1e284..d22ecf43 100644 --- a/skills/referral-program/SKILL.md +++ b/skills/referral-program/SKILL.md @@ -1,6 +1,6 @@ --- name: referral-program -description: "When the user wants to create, optimize, or analyze a referral program, affiliate program, or word-of-mouth strategy. Also use when the user mentions 'referral,' 'affiliate,' 'ambassador,' 'word of mouth,' 'viral loop,' 'refer a friend,' or 'partner program.' This skill covers program design, incentive structure, and growth optimization." +description: "When the user wants to create, optimize, or analyze a referral program, affiliate program, or word-of-mouth strategy. Also use when the user mentions 'referral,' 'affiliate,' 'ambassador,' 'word of..." --- # Referral & Affiliate Programs diff --git a/skills/research-engineer/SKILL.md b/skills/research-engineer/SKILL.md index 3fed5186..341e2bcf 100644 --- a/skills/research-engineer/SKILL.md +++ b/skills/research-engineer/SKILL.md @@ -1,6 +1,6 @@ --- name: research-engineer -description: "An uncompromising Academic Research Engineer. Operates with absolute scientific rigor, objective criticism, and zero flair. Focuses on theoretical correctness, formal verification, and optimal implementation across any required technology." +description: "An uncompromising Academic Research Engineer. Operates with absolute scientific rigor, objective criticism, and zero flair. Focuses on theoretical correctness, formal verification, and optimal impl..." --- # Academic Research Engineer diff --git a/skills/saga-orchestration/SKILL.md b/skills/saga-orchestration/SKILL.md index 4f2412be..5f08e489 100644 --- a/skills/saga-orchestration/SKILL.md +++ b/skills/saga-orchestration/SKILL.md @@ -1,6 +1,6 @@ --- name: saga-orchestration -description: Implement saga patterns for distributed transactions and cross-aggregate workflows. Use when coordinating multi-step business processes, handling compensating transactions, or managing long-running workflows. +description: "Implement saga patterns for distributed transactions and cross-aggregate workflows. Use when coordinating multi-step business processes, handling compensating transactions, or managing long-running..." --- # Saga Orchestration diff --git a/skills/salesforce-development/SKILL.md b/skills/salesforce-development/SKILL.md index 0a0e8a55..14bf62a7 100644 --- a/skills/salesforce-development/SKILL.md +++ b/skills/salesforce-development/SKILL.md @@ -1,6 +1,6 @@ --- name: salesforce-development -description: "Expert patterns for Salesforce platform development including Lightning Web Components (LWC), Apex triggers and classes, REST/Bulk APIs, Connected Apps, and Salesforce DX with scratch orgs and 2nd generation packages (2GP). Use when: salesforce, sfdc, apex, lwc, lightning web components." +description: "Expert patterns for Salesforce platform development including Lightning Web Components (LWC), Apex triggers and classes, REST/Bulk APIs, Connected Apps, and Salesforce DX with scratch orgs and 2nd ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/sast-configuration/SKILL.md b/skills/sast-configuration/SKILL.md index 2c0bbe9a..11785e43 100644 --- a/skills/sast-configuration/SKILL.md +++ b/skills/sast-configuration/SKILL.md @@ -1,6 +1,6 @@ --- name: sast-configuration -description: Configure Static Application Security Testing (SAST) tools for automated vulnerability detection in application code. Use when setting up security scanning, implementing DevSecOps practices, or automating code vulnerability detection. +description: "Configure Static Application Security Testing (SAST) tools for automated vulnerability detection in application code. Use when setting up security scanning, implementing DevSecOps practices, or aut..." --- # SAST Configuration diff --git a/skills/scanning-tools/SKILL.md b/skills/scanning-tools/SKILL.md index b784b60f..b1da1f49 100644 --- a/skills/scanning-tools/SKILL.md +++ b/skills/scanning-tools/SKILL.md @@ -1,6 +1,6 @@ --- -name: Security Scanning Tools -description: This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detect malware", "check cloud security", or "evaluate system compliance". It provides comprehensive guidance on security scanning tools and methodologies. +name: scanning-tools +description: "This skill should be used when the user asks to "perform vulnerability scanning", "scan networks for open ports", "assess web application security", "scan wireless networks", "detect malware", "che..." metadata: author: zebbern version: "1.1" diff --git a/skills/screen-reader-testing/SKILL.md b/skills/screen-reader-testing/SKILL.md index cca655ab..5a1d73e5 100644 --- a/skills/screen-reader-testing/SKILL.md +++ b/skills/screen-reader-testing/SKILL.md @@ -1,6 +1,6 @@ --- name: screen-reader-testing -description: Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support. +description: "Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology supp..." --- # Screen Reader Testing diff --git a/skills/scroll-experience/SKILL.md b/skills/scroll-experience/SKILL.md index ee4c569f..9d5b03f4 100644 --- a/skills/scroll-experience/SKILL.md +++ b/skills/scroll-experience/SKILL.md @@ -1,6 +1,6 @@ --- name: scroll-experience -description: "Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website." +description: "Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product p..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/secrets-management/SKILL.md b/skills/secrets-management/SKILL.md index bcaea66b..8438e5a7 100644 --- a/skills/secrets-management/SKILL.md +++ b/skills/secrets-management/SKILL.md @@ -1,6 +1,6 @@ --- name: secrets-management -description: Implement secure secrets management for CI/CD pipelines using Vault, AWS Secrets Manager, or native platform solutions. Use when handling sensitive credentials, rotating secrets, or securing CI/CD environments. +description: "Implement secure secrets management for CI/CD pipelines using Vault, AWS Secrets Manager, or native platform solutions. Use when handling sensitive credentials, rotating secrets, or securing CI/CD ..." --- # Secrets Management diff --git a/skills/security-compliance-compliance-check/SKILL.md b/skills/security-compliance-compliance-check/SKILL.md index 984160f9..068f80ed 100644 --- a/skills/security-compliance-compliance-check/SKILL.md +++ b/skills/security-compliance-compliance-check/SKILL.md @@ -1,6 +1,6 @@ --- name: security-compliance-compliance-check -description: "You are a compliance expert specializing in regulatory requirements for software systems including GDPR, HIPAA, SOC2, PCI-DSS, and other industry standards. Perform compliance audits and provide implementation guidance." +description: "You are a compliance expert specializing in regulatory requirements for software systems including GDPR, HIPAA, SOC2, PCI-DSS, and other industry standards. Perform compliance audits and provide im..." --- # Regulatory Compliance Check diff --git a/skills/security-scanning-security-dependencies/SKILL.md b/skills/security-scanning-security-dependencies/SKILL.md index f6d0ab93..fe32e8fc 100644 --- a/skills/security-scanning-security-dependencies/SKILL.md +++ b/skills/security-scanning-security-dependencies/SKILL.md @@ -1,6 +1,6 @@ --- name: security-scanning-security-dependencies -description: "You are a security expert specializing in dependency vulnerability analysis, SBOM generation, and supply chain security. Scan project dependencies across ecosystems to identify vulnerabilities, assess risks, and recommend remediation." +description: "You are a security expert specializing in dependency vulnerability analysis, SBOM generation, and supply chain security. Scan project dependencies across ecosystems to identify vulnerabilities, ass..." --- # Dependency Vulnerability Scanning diff --git a/skills/segment-cdp/SKILL.md b/skills/segment-cdp/SKILL.md index fd1a5e8e..1624d9f1 100644 --- a/skills/segment-cdp/SKILL.md +++ b/skills/segment-cdp/SKILL.md @@ -1,6 +1,6 @@ --- name: segment-cdp -description: "Expert patterns for Segment Customer Data Platform including Analytics.js, server-side tracking, tracking plans with Protocols, identity resolution, destinations configuration, and data governance best practices. Use when: segment, analytics.js, customer data platform, cdp, tracking plan." +description: "Expert patterns for Segment Customer Data Platform including Analytics.js, server-side tracking, tracking plans with Protocols, identity resolution, destinations configuration, and data governance ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/sendgrid-automation/SKILL.md b/skills/sendgrid-automation/SKILL.md index 0c44fedf..8d4cd7af 100644 --- a/skills/sendgrid-automation/SKILL.md +++ b/skills/sendgrid-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: sendgrid-automation -description: "Automate SendGrid email operations including sending emails, managing contacts/lists, sender identities, templates, and analytics via Rube MCP (Composio). Always search tools first for current schemas." +description: "Automate SendGrid email operations including sending emails, managing contacts/lists, sender identities, templates, and analytics via Rube MCP (Composio). Always search tools first for current sche..." requires: mcp: [rube] --- diff --git a/skills/senior-architect/SKILL.md b/skills/senior-architect/SKILL.md index 30160d0e..c6dc6060 100644 --- a/skills/senior-architect/SKILL.md +++ b/skills/senior-architect/SKILL.md @@ -1,6 +1,6 @@ --- name: senior-architect -description: Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns. +description: "Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. I..." --- # Senior Architect diff --git a/skills/senior-fullstack/SKILL.md b/skills/senior-fullstack/SKILL.md index 43f9d9e6..2f12f688 100644 --- a/skills/senior-fullstack/SKILL.md +++ b/skills/senior-fullstack/SKILL.md @@ -1,6 +1,6 @@ --- name: senior-fullstack -description: Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows. +description: "Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architec..." --- # Senior Fullstack diff --git a/skills/service-mesh-observability/SKILL.md b/skills/service-mesh-observability/SKILL.md index 27e82561..0c54fa84 100644 --- a/skills/service-mesh-observability/SKILL.md +++ b/skills/service-mesh-observability/SKILL.md @@ -1,6 +1,6 @@ --- name: service-mesh-observability -description: Implement comprehensive observability for service meshes including distributed tracing, metrics, and visualization. Use when setting up mesh monitoring, debugging latency issues, or implementing SLOs for service communication. +description: "Implement comprehensive observability for service meshes including distributed tracing, metrics, and visualization. Use when setting up mesh monitoring, debugging latency issues, or implementing SL..." --- # Service Mesh Observability diff --git a/skills/shodan-reconnaissance/SKILL.md b/skills/shodan-reconnaissance/SKILL.md index 3bb1bdaf..c0f7c75a 100644 --- a/skills/shodan-reconnaissance/SKILL.md +++ b/skills/shodan-reconnaissance/SKILL.md @@ -1,6 +1,6 @@ --- -name: Shodan Reconnaissance and Pentesting -description: This skill should be used when the user asks to "search for exposed devices on the internet," "perform Shodan reconnaissance," "find vulnerable services using Shodan," "scan IP ranges with Shodan," or "discover IoT devices and open ports." It provides comprehensive guidance for using Shodan's search engine, CLI, and API for penetration testing reconnaissance. +name: shodan-reconnaissance +description: "This skill should be used when the user asks to "search for exposed devices on the internet," "perform Shodan reconnaissance," "find vulnerable services using Shodan," "scan IP ranges with Shodan,"..." metadata: author: zebbern version: "1.1" diff --git a/skills/shopify-apps/SKILL.md b/skills/shopify-apps/SKILL.md index ef66cab1..67260300 100644 --- a/skills/shopify-apps/SKILL.md +++ b/skills/shopify-apps/SKILL.md @@ -1,6 +1,6 @@ --- name: shopify-apps -description: "Expert patterns for Shopify app development including Remix/React Router apps, embedded apps with App Bridge, webhook handling, GraphQL Admin API, Polaris components, billing, and app extensions. Use when: shopify app, shopify, embedded app, polaris, app bridge." +description: "Expert patterns for Shopify app development including Remix/React Router apps, embedded apps with App Bridge, webhook handling, GraphQL Admin API, Polaris components, billing, and app extensions. U..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/signup-flow-cro/SKILL.md b/skills/signup-flow-cro/SKILL.md index 26615e08..bff3ef2f 100644 --- a/skills/signup-flow-cro/SKILL.md +++ b/skills/signup-flow-cro/SKILL.md @@ -1,6 +1,6 @@ --- name: signup-flow-cro -description: When the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions "signup conversions," "registration friction," "signup form optimization," "free trial signup," "reduce signup dropoff," or "account creation flow." For post-signup onboarding, see onboarding-cro. For lead capture forms (not account creation), see form-cro. +description: "When the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions "signup conversions," "registration friction," "signup form optimi..." --- # Signup Flow CRO diff --git a/skills/skill-creator-ms/SKILL.md b/skills/skill-creator-ms/SKILL.md index 1f27c72a..64751848 100644 --- a/skills/skill-creator-ms/SKILL.md +++ b/skills/skill-creator-ms/SKILL.md @@ -1,5 +1,5 @@ --- -name: skill-creator +name: skill-creator-ms description: Guide for creating effective skills for AI coding agents working with Azure SDKs and Microsoft Foundry services. Use when creating new skills or updating existing skills. --- diff --git a/skills/skill-creator/SKILL.md b/skills/skill-creator/SKILL.md index 5ea8b178..ece41ef9 100644 --- a/skills/skill-creator/SKILL.md +++ b/skills/skill-creator/SKILL.md @@ -1,6 +1,6 @@ --- name: skill-creator -description: "This skill should be used when the user asks to create a new skill, build a skill, make a custom skill, develop a CLI skill, or wants to extend the CLI with new capabilities. Automates the entire skill creation workflow from brainstorming to installation." +description: "This skill should be used when the user asks to create a new skill, build a skill, make a custom skill, develop a CLI skill, or wants to extend the CLI with new capabilities. Automates the entire s..." version: 1.3.0 author: Eric Andrade created: 2025-02-01 diff --git a/skills/skill-developer/SKILL.md b/skills/skill-developer/SKILL.md index 4c26d2dd..6e1c9b4b 100644 --- a/skills/skill-developer/SKILL.md +++ b/skills/skill-developer/SKILL.md @@ -1,6 +1,6 @@ --- name: skill-developer -description: Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns, file paths, content patterns), enforcement levels (block, suggest, warn), hook mechanisms (UserPromptSubmit, PreToolUse), session tracking, and the 500-line rule. +description: "Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skil..." --- # Skill Developer Guide diff --git a/skills/slack-automation/SKILL.md b/skills/slack-automation/SKILL.md index 56851603..cd450345 100644 --- a/skills/slack-automation/SKILL.md +++ b/skills/slack-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: slack-automation -description: "Automate Slack messaging, channel management, search, reactions, and threads via Rube MCP (Composio). Send messages, search conversations, manage channels/users, and react to messages programmatically." +description: "Automate Slack messaging, channel management, search, reactions, and threads via Rube MCP (Composio). Send messages, search conversations, manage channels/users, and react to messages programmatica..." requires: mcp: [rube] --- diff --git a/skills/slack-bot-builder/SKILL.md b/skills/slack-bot-builder/SKILL.md index 8b8e7642..bef5b5d1 100644 --- a/skills/slack-bot-builder/SKILL.md +++ b/skills/slack-bot-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: slack-bot-builder -description: "Build Slack apps using the Bolt framework across Python, JavaScript, and Java. Covers Block Kit for rich UIs, interactive components, slash commands, event handling, OAuth installation flows, and Workflow Builder integration. Focus on best practices for production-ready Slack apps. Use when: slack bot, slack app, bolt framework, block kit, slash command." +description: "Build Slack apps using the Bolt framework across Python, JavaScript, and Java. Covers Block Kit for rich UIs, interactive components, slash commands, event handling, OAuth installation flows, and W..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/slack-gif-creator/SKILL.md b/skills/slack-gif-creator/SKILL.md index 16660d8c..b6bd79cd 100644 --- a/skills/slack-gif-creator/SKILL.md +++ b/skills/slack-gif-creator/SKILL.md @@ -1,6 +1,6 @@ --- name: slack-gif-creator -description: Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack." +description: "Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me ..." license: Complete terms in LICENSE.txt --- diff --git a/skills/slo-implementation/SKILL.md b/skills/slo-implementation/SKILL.md index 91f3d6ac..ba599607 100644 --- a/skills/slo-implementation/SKILL.md +++ b/skills/slo-implementation/SKILL.md @@ -1,6 +1,6 @@ --- name: slo-implementation -description: Define and implement Service Level Indicators (SLIs) and Service Level Objectives (SLOs) with error budgets and alerting. Use when establishing reliability targets, implementing SRE practices, or measuring service performance. +description: "Define and implement Service Level Indicators (SLIs) and Service Level Objectives (SLOs) with error budgets and alerting. Use when establishing reliability targets, implementing SRE practices, or m..." --- # SLO Implementation diff --git a/skills/smtp-penetration-testing/SKILL.md b/skills/smtp-penetration-testing/SKILL.md index 980d5052..c2236583 100644 --- a/skills/smtp-penetration-testing/SKILL.md +++ b/skills/smtp-penetration-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: SMTP Penetration Testing -description: This skill should be used when the user asks to "perform SMTP penetration testing", "enumerate email users", "test for open mail relays", "grab SMTP banners", "brute force email credentials", or "assess mail server security". It provides comprehensive techniques for testing SMTP server security. +name: smtp-penetration-testing +description: "This skill should be used when the user asks to "perform SMTP penetration testing", "enumerate email users", "test for open mail relays", "grab SMTP banners", "brute force email credentials", or "a..." metadata: author: zebbern version: "1.1" diff --git a/skills/social-content/SKILL.md b/skills/social-content/SKILL.md index 12fa7ef9..33f40cf2 100644 --- a/skills/social-content/SKILL.md +++ b/skills/social-content/SKILL.md @@ -1,6 +1,6 @@ --- name: social-content -description: "When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter/X, Instagram, TikTok, Facebook, or other platforms. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' or 'viral content.' This skill covers content creation, repurposing, and platform-specific strategies." +description: "When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter/X, Instagram, TikTok, Facebook, or other platforms. Also use when the user mentions 'LinkedIn..." --- # Social Content diff --git a/skills/solidity-security/SKILL.md b/skills/solidity-security/SKILL.md index 68760d30..f22c995a 100644 --- a/skills/solidity-security/SKILL.md +++ b/skills/solidity-security/SKILL.md @@ -1,6 +1,6 @@ --- name: solidity-security -description: Master smart contract security best practices to prevent common vulnerabilities and implement secure Solidity patterns. Use when writing smart contracts, auditing existing contracts, or implementing security measures for blockchain applications. +description: "Master smart contract security best practices to prevent common vulnerabilities and implement secure Solidity patterns. Use when writing smart contracts, auditing existing contracts, or implementin..." --- # Solidity Security diff --git a/skills/sql-injection-testing/SKILL.md b/skills/sql-injection-testing/SKILL.md index f51e5f24..d69f0527 100644 --- a/skills/sql-injection-testing/SKILL.md +++ b/skills/sql-injection-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: SQL Injection Testing -description: This skill should be used when the user asks to "test for SQL injection vulnerabilities", "perform SQLi attacks", "bypass authentication using SQL injection", "extract database information through injection", "detect SQL injection flaws", or "exploit database query vulnerabilities". It provides comprehensive techniques for identifying, exploiting, and understanding SQL injection attack vectors across different database systems. +name: sql-injection-testing +description: "This skill should be used when the user asks to "test for SQL injection vulnerabilities", "perform SQLi attacks", "bypass authentication using SQL injection", "extract database information through ..." metadata: author: zebbern version: "1.1" diff --git a/skills/sql-optimization-patterns/SKILL.md b/skills/sql-optimization-patterns/SKILL.md index 2d076877..d516e83c 100644 --- a/skills/sql-optimization-patterns/SKILL.md +++ b/skills/sql-optimization-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: sql-optimization-patterns -description: Master SQL query optimization, indexing strategies, and EXPLAIN analysis to dramatically improve database performance and eliminate slow queries. Use when debugging slow queries, designing database schemas, or optimizing application performance. +description: "Master SQL query optimization, indexing strategies, and EXPLAIN analysis to dramatically improve database performance and eliminate slow queries. Use when debugging slow queries, designing database..." --- # SQL Optimization Patterns diff --git a/skills/sqlmap-database-pentesting/SKILL.md b/skills/sqlmap-database-pentesting/SKILL.md index eb682bf7..437225d4 100644 --- a/skills/sqlmap-database-pentesting/SKILL.md +++ b/skills/sqlmap-database-pentesting/SKILL.md @@ -1,6 +1,6 @@ --- -name: SQLMap Database Penetration Testing -description: This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap," "dump tables and columns from a vulnerable database," or "perform automated database penetration testing." It provides comprehensive guidance for using SQLMap to detect and exploit SQL injection vulnerabilities. +name: sqlmap-database-pentesting +description: "This skill should be used when the user asks to "automate SQL injection testing," "enumerate database structure," "extract database credentials using sqlmap," "dump tables and columns from a vulner..." metadata: author: zebbern version: "1.1" diff --git a/skills/ssh-penetration-testing/SKILL.md b/skills/ssh-penetration-testing/SKILL.md index 9cc9f998..a28a7640 100644 --- a/skills/ssh-penetration-testing/SKILL.md +++ b/skills/ssh-penetration-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: SSH Penetration Testing -description: This skill should be used when the user asks to "pentest SSH services", "enumerate SSH configurations", "brute force SSH credentials", "exploit SSH vulnerabilities", "perform SSH tunneling", or "audit SSH security". It provides comprehensive SSH penetration testing methodologies and techniques. +name: ssh-penetration-testing +description: "This skill should be used when the user asks to "pentest SSH services", "enumerate SSH configurations", "brute force SSH credentials", "exploit SSH vulnerabilities", "perform SSH tunneling", or "au..." metadata: author: zebbern version: "1.1" diff --git a/skills/stitch-ui-design/SKILL.md b/skills/stitch-ui-design/SKILL.md index ffea5043..29a1ad89 100644 --- a/skills/stitch-ui-design/SKILL.md +++ b/skills/stitch-ui-design/SKILL.md @@ -1,6 +1,6 @@ --- name: stitch-ui-design -description: Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google. +description: "Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help cra..." risk: safe source: "self" --- diff --git a/skills/stripe-integration/SKILL.md b/skills/stripe-integration/SKILL.md index 5ad98e49..ea0c0901 100644 --- a/skills/stripe-integration/SKILL.md +++ b/skills/stripe-integration/SKILL.md @@ -1,6 +1,6 @@ --- name: stripe-integration -description: Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows. +description: "Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or ..." --- # Stripe Integration diff --git a/skills/swiftui-expert-skill/SKILL.md b/skills/swiftui-expert-skill/SKILL.md index 4cbb9043..b13f8438 100644 --- a/skills/swiftui-expert-skill/SKILL.md +++ b/skills/swiftui-expert-skill/SKILL.md @@ -1,6 +1,6 @@ --- name: swiftui-expert-skill -description: "Write, review, or improve SwiftUI code following best practices for state management, view composition, performance, modern APIs, Swift concurrency, and iOS 26+ Liquid Glass adoption. Use when building new SwiftUI features, refactoring existing views, reviewing code quality, or adopting modern SwiftUI patterns." +description: "Write, review, or improve SwiftUI code following best practices for state management, view composition, performance, modern APIs, Swift concurrency, and iOS 26+ Liquid Glass adoption. Use when buil..." source: "https://github.com/AvdLee/SwiftUI-Agent-Skill/tree/main/swiftui-expert-skill" risk: safe --- diff --git a/skills/tailwind-design-system/SKILL.md b/skills/tailwind-design-system/SKILL.md index d6d650e8..2bb6dc50 100644 --- a/skills/tailwind-design-system/SKILL.md +++ b/skills/tailwind-design-system/SKILL.md @@ -1,6 +1,6 @@ --- name: tailwind-design-system -description: Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns. +description: "Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI..." --- # Tailwind Design System diff --git a/skills/telegram-bot-builder/SKILL.md b/skills/telegram-bot-builder/SKILL.md index 9f6adf1e..b4349045 100644 --- a/skills/telegram-bot-builder/SKILL.md +++ b/skills/telegram-bot-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: telegram-bot-builder -description: "Expert in building Telegram bots that solve real problems - from simple automation to complex AI-powered bots. Covers bot architecture, the Telegram Bot API, user experience, monetization strategies, and scaling bots to thousands of users. Use when: telegram bot, bot api, telegram automation, chat bot telegram, tg bot." +description: "Expert in building Telegram bots that solve real problems - from simple automation to complex AI-powered bots. Covers bot architecture, the Telegram Bot API, user experience, monetization strategie..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/telegram-mini-app/SKILL.md b/skills/telegram-mini-app/SKILL.md index 53891869..2d9e632e 100644 --- a/skills/telegram-mini-app/SKILL.md +++ b/skills/telegram-mini-app/SKILL.md @@ -1,6 +1,6 @@ --- name: telegram-mini-app -description: "Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app." +description: "Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and build..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/temporal-python-testing/SKILL.md b/skills/temporal-python-testing/SKILL.md index e61fc6c9..8413daf1 100644 --- a/skills/temporal-python-testing/SKILL.md +++ b/skills/temporal-python-testing/SKILL.md @@ -1,6 +1,6 @@ --- name: temporal-python-testing -description: Test Temporal workflows with pytest, time-skipping, and mocking strategies. Covers unit testing, integration testing, replay testing, and local development setup. Use when implementing Temporal workflow tests or debugging test failures. +description: "Test Temporal workflows with pytest, time-skipping, and mocking strategies. Covers unit testing, integration testing, replay testing, and local development setup. Use when implementing Temporal wor..." --- # Temporal Python Testing Strategies diff --git a/skills/terraform-module-library/SKILL.md b/skills/terraform-module-library/SKILL.md index 4ea8937c..efc82b88 100644 --- a/skills/terraform-module-library/SKILL.md +++ b/skills/terraform-module-library/SKILL.md @@ -1,6 +1,6 @@ --- name: terraform-module-library -description: Build reusable Terraform modules for AWS, Azure, and GCP infrastructure following infrastructure-as-code best practices. Use when creating infrastructure modules, standardizing cloud provisioning, or implementing reusable IaC components. +description: "Build reusable Terraform modules for AWS, Azure, and GCP infrastructure following infrastructure-as-code best practices. Use when creating infrastructure modules, standardizing cloud provisioning, ..." --- # Terraform Module Library diff --git a/skills/test-fixing/SKILL.md b/skills/test-fixing/SKILL.md index 2a435fd8..a9967562 100644 --- a/skills/test-fixing/SKILL.md +++ b/skills/test-fixing/SKILL.md @@ -1,6 +1,6 @@ --- name: test-fixing -description: Run tests and systematically fix all failing tests using smart error grouping. Use when user asks to fix failing tests, mentions test failures, runs test suite and failures occur, or requests to make tests pass. +description: "Run tests and systematically fix all failing tests using smart error grouping. Use when user asks to fix failing tests, mentions test failures, runs test suite and failures occur, or requests to ma..." --- # Test Fixing diff --git a/skills/theme-factory/SKILL.md b/skills/theme-factory/SKILL.md index 90dfceaf..acca0c00 100644 --- a/skills/theme-factory/SKILL.md +++ b/skills/theme-factory/SKILL.md @@ -1,6 +1,6 @@ --- name: theme-factory -description: Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly. +description: "Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifac..." license: Complete terms in LICENSE.txt --- diff --git a/skills/threat-modeling-expert/SKILL.md b/skills/threat-modeling-expert/SKILL.md index 4dec8d18..19a1bb2c 100644 --- a/skills/threat-modeling-expert/SKILL.md +++ b/skills/threat-modeling-expert/SKILL.md @@ -1,6 +1,6 @@ --- name: threat-modeling-expert -description: "Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement extraction. Use for security architecture reviews, threat identification, and secure-by-design planning." +description: "Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement extraction. Use for security architecture r..." --- # Threat Modeling Expert diff --git a/skills/top-web-vulnerabilities/SKILL.md b/skills/top-web-vulnerabilities/SKILL.md index ecbbcc1b..92a62e50 100644 --- a/skills/top-web-vulnerabilities/SKILL.md +++ b/skills/top-web-vulnerabilities/SKILL.md @@ -1,6 +1,6 @@ --- -name: Top 100 Web Vulnerabilities Reference -description: This skill should be used when the user asks to "identify web application vulnerabilities", "explain common security flaws", "understand vulnerability categories", "learn about injection attacks", "review access control weaknesses", "analyze API security issues", "assess security misconfigurations", "understand client-side vulnerabilities", "examine mobile and IoT security flaws", or "reference the OWASP-aligned vulnerability taxonomy". Use this skill to provide comprehensive vulnerability definitions, root causes, impacts, and mitigation strategies across all major web security categories. +name: top-web-vulnerabilities +description: "This skill should be used when the user asks to "identify web application vulnerabilities", "explain common security flaws", "understand vulnerability categories", "learn about injection attacks", ..." metadata: author: zebbern version: "1.1" diff --git a/skills/trigger-dev/SKILL.md b/skills/trigger-dev/SKILL.md index 09ed74bb..434b1579 100644 --- a/skills/trigger-dev/SKILL.md +++ b/skills/trigger-dev/SKILL.md @@ -1,6 +1,6 @@ --- name: trigger-dev -description: "Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task." +description: "Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background ta..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/twilio-communications/SKILL.md b/skills/twilio-communications/SKILL.md index 80f52940..645f5838 100644 --- a/skills/twilio-communications/SKILL.md +++ b/skills/twilio-communications/SKILL.md @@ -1,6 +1,6 @@ --- name: twilio-communications -description: "Build communication features with Twilio: SMS messaging, voice calls, WhatsApp Business API, and user verification (2FA). Covers the full spectrum from simple notifications to complex IVR systems and multi-channel authentication. Critical focus on compliance, rate limits, and error handling. Use when: twilio, send SMS, text message, voice call, phone verification." +description: "Build communication features with Twilio: SMS messaging, voice calls, WhatsApp Business API, and user verification (2FA). Covers the full spectrum from simple notifications to complex IVR systems a..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/typescript-advanced-types/SKILL.md b/skills/typescript-advanced-types/SKILL.md index 42753f25..412a2938 100644 --- a/skills/typescript-advanced-types/SKILL.md +++ b/skills/typescript-advanced-types/SKILL.md @@ -1,6 +1,6 @@ --- name: typescript-advanced-types -description: Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects. +description: "Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex..." --- # TypeScript Advanced Types diff --git a/skills/ui-ux-pro-max/SKILL.md b/skills/ui-ux-pro-max/SKILL.md index 0c39a41f..b3910c39 100644 --- a/skills/ui-ux-pro-max/SKILL.md +++ b/skills/ui-ux-pro-max/SKILL.md @@ -1,351 +1,351 @@ ---- -name: ui-ux-pro-max -description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples." ---- - -# UI/UX Pro Max - Design Intelligence - -Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations. - -## When to Apply - -Reference these guidelines when: -- Designing new UI components or pages -- Choosing color palettes and typography -- Reviewing code for UX issues -- Building landing pages or dashboards -- Implementing accessibility requirements - -## Rule Categories by Priority - -| Priority | Category | Impact | Domain | -|----------|----------|--------|--------| -| 1 | Accessibility | CRITICAL | `ux` | -| 2 | Touch & Interaction | CRITICAL | `ux` | -| 3 | Performance | HIGH | `ux` | -| 4 | Layout & Responsive | HIGH | `ux` | -| 5 | Typography & Color | MEDIUM | `typography`, `color` | -| 6 | Animation | MEDIUM | `ux` | -| 7 | Style Selection | MEDIUM | `style`, `product` | -| 8 | Charts & Data | LOW | `chart` | - -## Quick Reference - -### 1. Accessibility (CRITICAL) - -- `color-contrast` - Minimum 4.5:1 ratio for normal text -- `focus-states` - Visible focus rings on interactive elements -- `alt-text` - Descriptive alt text for meaningful images -- `aria-labels` - aria-label for icon-only buttons -- `keyboard-nav` - Tab order matches visual order -- `form-labels` - Use label with for attribute - -### 2. Touch & Interaction (CRITICAL) - -- `touch-target-size` - Minimum 44x44px touch targets -- `hover-vs-tap` - Use click/tap for primary interactions -- `loading-buttons` - Disable button during async operations -- `error-feedback` - Clear error messages near problem -- `cursor-pointer` - Add cursor-pointer to clickable elements - -### 3. Performance (HIGH) - -- `image-optimization` - Use WebP, srcset, lazy loading -- `reduced-motion` - Check prefers-reduced-motion -- `content-jumping` - Reserve space for async content - -### 4. Layout & Responsive (HIGH) - -- `viewport-meta` - width=device-width initial-scale=1 -- `readable-font-size` - Minimum 16px body text on mobile -- `horizontal-scroll` - Ensure content fits viewport width -- `z-index-management` - Define z-index scale (10, 20, 30, 50) - -### 5. Typography & Color (MEDIUM) - -- `line-height` - Use 1.5-1.75 for body text -- `line-length` - Limit to 65-75 characters per line -- `font-pairing` - Match heading/body font personalities - -### 6. Animation (MEDIUM) - -- `duration-timing` - Use 150-300ms for micro-interactions -- `transform-performance` - Use transform/opacity, not width/height -- `loading-states` - Skeleton screens or spinners - -### 7. Style Selection (MEDIUM) - -- `style-match` - Match style to product type -- `consistency` - Use same style across all pages -- `no-emoji-icons` - Use SVG icons, not emojis - -### 8. Charts & Data (LOW) - -- `chart-type` - Match chart type to data type -- `color-guidance` - Use accessible color palettes -- `data-table` - Provide table alternative for accessibility - -## How to Use - -Search specific domains using the CLI tool below. - ---- - -## Prerequisites - -Check if Python is installed: - -```bash -python3 --version || python --version -``` - -If Python is not installed, install it based on user's OS: - -**macOS:** -```bash -brew install python3 -``` - -**Ubuntu/Debian:** -```bash -sudo apt update && sudo apt install python3 -``` - -**Windows:** -```powershell -winget install Python.Python.3.12 -``` - ---- - -## How to Use This Skill - -When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: - -### Step 1: Analyze User Requirements - -Extract key information from user request: -- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. -- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. -- **Industry**: healthcare, fintech, gaming, education, etc. -- **Stack**: React, Vue, Next.js, or default to `html-tailwind` - -### Step 2: Generate Design System (REQUIRED) - -**Always start with `--design-system`** to get comprehensive recommendations with reasoning: - -```bash -python3 .claude/skills/ui-ux-pro-max/scripts/search.py " " --design-system [-p "Project Name"] -``` - -This command: -1. Searches 5 domains in parallel (product, style, color, landing, typography) -2. Applies reasoning rules from `ui-reasoning.csv` to select best matches -3. Returns complete design system: pattern, style, colors, typography, effects -4. Includes anti-patterns to avoid - -**Example:** -```bash -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" -``` - -### Step 3: Supplement with Detailed Searches (as needed) - -After getting the design system, use domain searches to get additional details: - -```bash -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "" --domain [-n ] -``` - -**When to use detailed searches:** - -| Need | Domain | Example | -|------|--------|---------| -| More style options | `style` | `--domain style "glassmorphism dark"` | -| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` | -| UX best practices | `ux` | `--domain ux "animation accessibility"` | -| Alternative fonts | `typography` | `--domain typography "elegant luxury"` | -| Landing structure | `landing` | `--domain landing "hero social-proof"` | - -### Step 4: Stack Guidelines (Default: html-tailwind) - -Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**. - -```bash -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "" --stack html-tailwind -``` - -Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn` - ---- - -## Search Reference - -### Available Domains - -| Domain | Use For | Example Keywords | -|--------|---------|------------------| -| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | -| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | -| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | -| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | -| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | -| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | -| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | -| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache | -| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize | -| `prompt` | AI prompts, CSS keywords | (style name) | - -### Available Stacks - -| Stack | Focus | -|-------|-------| -| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | -| `react` | State, hooks, performance, patterns | -| `nextjs` | SSR, routing, images, API routes | -| `vue` | Composition API, Pinia, Vue Router | -| `svelte` | Runes, stores, SvelteKit | -| `swiftui` | Views, State, Navigation, Animation | -| `react-native` | Components, Navigation, Lists | -| `flutter` | Widgets, State, Layout, Theming | -| `shadcn` | shadcn/ui components, theming, forms, patterns | - ---- - -## Example Workflow - -**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" - -### Step 1: Analyze Requirements -- Product type: Beauty/Spa service -- Style keywords: elegant, professional, soft -- Industry: Beauty/Wellness -- Stack: html-tailwind (default) - -### Step 2: Generate Design System (REQUIRED) - -```bash -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa" -``` - -**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns. - -### Step 3: Supplement with Detailed Searches (as needed) - -```bash -# Get UX guidelines for animation and accessibility -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux - -# Get alternative typography options if needed -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography -``` - -### Step 4: Stack Guidelines - -```bash -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind -``` - -**Then:** Synthesize design system + detailed searches and implement the design. - ---- - -## Output Formats - -The `--design-system` flag supports two output formats: - -```bash -# ASCII box (default) - best for terminal display -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system - -# Markdown - best for documentation -python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown -``` - ---- - -## Tips for Better Results - -1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" -2. **Search multiple times** - Different keywords reveal different insights -3. **Combine domains** - Style + Typography + Color = Complete design system -4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues -5. **Use stack flag** - Get implementation-specific best practices -6. **Iterate** - If first search doesn't match, try different keywords - ---- - -## Common Rules for Professional UI - -These are frequently overlooked issues that make UI look unprofessional: - -### Icons & Visual Elements - -| Rule | Do | Don't | -|------|----|----- | -| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | -| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | -| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | -| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | - -### Interaction & Cursor - -| Rule | Do | Don't | -|------|----|----- | -| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | -| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | -| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | - -### Light/Dark Mode Contrast - -| Rule | Do | Don't | -|------|----|----- | -| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | -| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | -| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | -| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | - -### Layout & Spacing - -| Rule | Do | Don't | -|------|----|----- | -| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | -| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | -| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | - ---- - -## Pre-Delivery Checklist - -Before delivering UI code, verify these items: - -### Visual Quality -- [ ] No emojis used as icons (use SVG instead) -- [ ] All icons from consistent icon set (Heroicons/Lucide) -- [ ] Brand logos are correct (verified from Simple Icons) -- [ ] Hover states don't cause layout shift -- [ ] Use theme colors directly (bg-primary) not var() wrapper - -### Interaction -- [ ] All clickable elements have `cursor-pointer` -- [ ] Hover states provide clear visual feedback -- [ ] Transitions are smooth (150-300ms) -- [ ] Focus states visible for keyboard navigation - -### Light/Dark Mode -- [ ] Light mode text has sufficient contrast (4.5:1 minimum) -- [ ] Glass/transparent elements visible in light mode -- [ ] Borders visible in both modes -- [ ] Test both modes before delivery - -### Layout -- [ ] Floating elements have proper spacing from edges -- [ ] No content hidden behind fixed navbars -- [ ] Responsive at 375px, 768px, 1024px, 1440px -- [ ] No horizontal scroll on mobile - -### Accessibility -- [ ] All images have alt text -- [ ] Form inputs have labels -- [ ] Color is not the only indicator -- [ ] `prefers-reduced-motion` respected +--- +name: ui-ux-pro-max +description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, cr..." +--- + +# UI/UX Pro Max - Design Intelligence + +Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations. + +## When to Apply + +Reference these guidelines when: +- Designing new UI components or pages +- Choosing color palettes and typography +- Reviewing code for UX issues +- Building landing pages or dashboards +- Implementing accessibility requirements + +## Rule Categories by Priority + +| Priority | Category | Impact | Domain | +|----------|----------|--------|--------| +| 1 | Accessibility | CRITICAL | `ux` | +| 2 | Touch & Interaction | CRITICAL | `ux` | +| 3 | Performance | HIGH | `ux` | +| 4 | Layout & Responsive | HIGH | `ux` | +| 5 | Typography & Color | MEDIUM | `typography`, `color` | +| 6 | Animation | MEDIUM | `ux` | +| 7 | Style Selection | MEDIUM | `style`, `product` | +| 8 | Charts & Data | LOW | `chart` | + +## Quick Reference + +### 1. Accessibility (CRITICAL) + +- `color-contrast` - Minimum 4.5:1 ratio for normal text +- `focus-states` - Visible focus rings on interactive elements +- `alt-text` - Descriptive alt text for meaningful images +- `aria-labels` - aria-label for icon-only buttons +- `keyboard-nav` - Tab order matches visual order +- `form-labels` - Use label with for attribute + +### 2. Touch & Interaction (CRITICAL) + +- `touch-target-size` - Minimum 44x44px touch targets +- `hover-vs-tap` - Use click/tap for primary interactions +- `loading-buttons` - Disable button during async operations +- `error-feedback` - Clear error messages near problem +- `cursor-pointer` - Add cursor-pointer to clickable elements + +### 3. Performance (HIGH) + +- `image-optimization` - Use WebP, srcset, lazy loading +- `reduced-motion` - Check prefers-reduced-motion +- `content-jumping` - Reserve space for async content + +### 4. Layout & Responsive (HIGH) + +- `viewport-meta` - width=device-width initial-scale=1 +- `readable-font-size` - Minimum 16px body text on mobile +- `horizontal-scroll` - Ensure content fits viewport width +- `z-index-management` - Define z-index scale (10, 20, 30, 50) + +### 5. Typography & Color (MEDIUM) + +- `line-height` - Use 1.5-1.75 for body text +- `line-length` - Limit to 65-75 characters per line +- `font-pairing` - Match heading/body font personalities + +### 6. Animation (MEDIUM) + +- `duration-timing` - Use 150-300ms for micro-interactions +- `transform-performance` - Use transform/opacity, not width/height +- `loading-states` - Skeleton screens or spinners + +### 7. Style Selection (MEDIUM) + +- `style-match` - Match style to product type +- `consistency` - Use same style across all pages +- `no-emoji-icons` - Use SVG icons, not emojis + +### 8. Charts & Data (LOW) + +- `chart-type` - Match chart type to data type +- `color-guidance` - Use accessible color palettes +- `data-table` - Provide table alternative for accessibility + +## How to Use + +Search specific domains using the CLI tool below. + +--- + +## Prerequisites + +Check if Python is installed: + +```bash +python3 --version || python --version +``` + +If Python is not installed, install it based on user's OS: + +**macOS:** +```bash +brew install python3 +``` + +**Ubuntu/Debian:** +```bash +sudo apt update && sudo apt install python3 +``` + +**Windows:** +```powershell +winget install Python.Python.3.12 +``` + +--- + +## How to Use This Skill + +When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: + +### Step 1: Analyze User Requirements + +Extract key information from user request: +- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. +- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. +- **Industry**: healthcare, fintech, gaming, education, etc. +- **Stack**: React, Vue, Next.js, or default to `html-tailwind` + +### Step 2: Generate Design System (REQUIRED) + +**Always start with `--design-system`** to get comprehensive recommendations with reasoning: + +```bash +python3 .claude/skills/ui-ux-pro-max/scripts/search.py " " --design-system [-p "Project Name"] +``` + +This command: +1. Searches 5 domains in parallel (product, style, color, landing, typography) +2. Applies reasoning rules from `ui-reasoning.csv` to select best matches +3. Returns complete design system: pattern, style, colors, typography, effects +4. Includes anti-patterns to avoid + +**Example:** +```bash +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" +``` + +### Step 3: Supplement with Detailed Searches (as needed) + +After getting the design system, use domain searches to get additional details: + +```bash +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "" --domain [-n ] +``` + +**When to use detailed searches:** + +| Need | Domain | Example | +|------|--------|---------| +| More style options | `style` | `--domain style "glassmorphism dark"` | +| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` | +| UX best practices | `ux` | `--domain ux "animation accessibility"` | +| Alternative fonts | `typography` | `--domain typography "elegant luxury"` | +| Landing structure | `landing` | `--domain landing "hero social-proof"` | + +### Step 4: Stack Guidelines (Default: html-tailwind) + +Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**. + +```bash +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "" --stack html-tailwind +``` + +Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn` + +--- + +## Search Reference + +### Available Domains + +| Domain | Use For | Example Keywords | +|--------|---------|------------------| +| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | +| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | +| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | +| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | +| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | +| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | +| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | +| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache | +| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize | +| `prompt` | AI prompts, CSS keywords | (style name) | + +### Available Stacks + +| Stack | Focus | +|-------|-------| +| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | +| `react` | State, hooks, performance, patterns | +| `nextjs` | SSR, routing, images, API routes | +| `vue` | Composition API, Pinia, Vue Router | +| `svelte` | Runes, stores, SvelteKit | +| `swiftui` | Views, State, Navigation, Animation | +| `react-native` | Components, Navigation, Lists | +| `flutter` | Widgets, State, Layout, Theming | +| `shadcn` | shadcn/ui components, theming, forms, patterns | + +--- + +## Example Workflow + +**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" + +### Step 1: Analyze Requirements +- Product type: Beauty/Spa service +- Style keywords: elegant, professional, soft +- Industry: Beauty/Wellness +- Stack: html-tailwind (default) + +### Step 2: Generate Design System (REQUIRED) + +```bash +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa" +``` + +**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns. + +### Step 3: Supplement with Detailed Searches (as needed) + +```bash +# Get UX guidelines for animation and accessibility +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux + +# Get alternative typography options if needed +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography +``` + +### Step 4: Stack Guidelines + +```bash +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind +``` + +**Then:** Synthesize design system + detailed searches and implement the design. + +--- + +## Output Formats + +The `--design-system` flag supports two output formats: + +```bash +# ASCII box (default) - best for terminal display +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system + +# Markdown - best for documentation +python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown +``` + +--- + +## Tips for Better Results + +1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" +2. **Search multiple times** - Different keywords reveal different insights +3. **Combine domains** - Style + Typography + Color = Complete design system +4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues +5. **Use stack flag** - Get implementation-specific best practices +6. **Iterate** - If first search doesn't match, try different keywords + +--- + +## Common Rules for Professional UI + +These are frequently overlooked issues that make UI look unprofessional: + +### Icons & Visual Elements + +| Rule | Do | Don't | +|------|----|----- | +| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | +| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | +| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | +| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | + +### Interaction & Cursor + +| Rule | Do | Don't | +|------|----|----- | +| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | +| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | +| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | + +### Light/Dark Mode Contrast + +| Rule | Do | Don't | +|------|----|----- | +| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | +| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | +| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | +| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | + +### Layout & Spacing + +| Rule | Do | Don't | +|------|----|----- | +| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | +| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | +| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | + +--- + +## Pre-Delivery Checklist + +Before delivering UI code, verify these items: + +### Visual Quality +- [ ] No emojis used as icons (use SVG instead) +- [ ] All icons from consistent icon set (Heroicons/Lucide) +- [ ] Brand logos are correct (verified from Simple Icons) +- [ ] Hover states don't cause layout shift +- [ ] Use theme colors directly (bg-primary) not var() wrapper + +### Interaction +- [ ] All clickable elements have `cursor-pointer` +- [ ] Hover states provide clear visual feedback +- [ ] Transitions are smooth (150-300ms) +- [ ] Focus states visible for keyboard navigation + +### Light/Dark Mode +- [ ] Light mode text has sufficient contrast (4.5:1 minimum) +- [ ] Glass/transparent elements visible in light mode +- [ ] Borders visible in both modes +- [ ] Test both modes before delivery + +### Layout +- [ ] Floating elements have proper spacing from edges +- [ ] No content hidden behind fixed navbars +- [ ] Responsive at 375px, 768px, 1024px, 1440px +- [ ] No horizontal scroll on mobile + +### Accessibility +- [ ] All images have alt text +- [ ] Form inputs have labels +- [ ] Color is not the only indicator +- [ ] `prefers-reduced-motion` respected diff --git a/skills/unity-ecs-patterns/SKILL.md b/skills/unity-ecs-patterns/SKILL.md index 309808af..af178f89 100644 --- a/skills/unity-ecs-patterns/SKILL.md +++ b/skills/unity-ecs-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: unity-ecs-patterns -description: Master Unity ECS (Entity Component System) with DOTS, Jobs, and Burst for high-performance game development. Use when building data-oriented games, optimizing performance, or working with large entity counts. +description: "Master Unity ECS (Entity Component System) with DOTS, Jobs, and Burst for high-performance game development. Use when building data-oriented games, optimizing performance, or working with large ent..." --- # Unity ECS Patterns diff --git a/skills/upstash-qstash/SKILL.md b/skills/upstash-qstash/SKILL.md index 87b45695..f99a7925 100644 --- a/skills/upstash-qstash/SKILL.md +++ b/skills/upstash-qstash/SKILL.md @@ -1,6 +1,6 @@ --- name: upstash-qstash -description: "Upstash QStash expert for serverless message queues, scheduled jobs, and reliable HTTP-based task delivery without managing infrastructure. Use when: qstash, upstash queue, serverless cron, scheduled http, message queue serverless." +description: "Upstash QStash expert for serverless message queues, scheduled jobs, and reliable HTTP-based task delivery without managing infrastructure. Use when: qstash, upstash queue, serverless cron, schedul..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/using-git-worktrees/SKILL.md b/skills/using-git-worktrees/SKILL.md index 9d52d80c..70c56f4b 100644 --- a/skills/using-git-worktrees/SKILL.md +++ b/skills/using-git-worktrees/SKILL.md @@ -1,6 +1,6 @@ --- name: using-git-worktrees -description: Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification +description: "Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verifi..." --- # Using Git Worktrees diff --git a/skills/using-neon/SKILL.md b/skills/using-neon/SKILL.md index 64895e64..2af3f903 100644 --- a/skills/using-neon/SKILL.md +++ b/skills/using-neon/SKILL.md @@ -1,6 +1,6 @@ --- name: using-neon -description: "Guides and best practices for working with Neon Serverless Postgres. Covers getting started, local development with Neon, choosing a connection method, Neon features, authentication (@neondatabase/auth), PostgREST-style data API (@neondatabase/neon-js), Neon CLI, and Neon's Platform API/SDKs. Use for any Neon-related questions." +description: "Guides and best practices for working with Neon Serverless Postgres. Covers getting started, local development with Neon, choosing a connection method, Neon features, authentication (@neondatabase/..." source: "https://github.com/neondatabase/agent-skills/tree/main/skills/neon-postgres" risk: safe --- diff --git a/skills/uv-package-manager/SKILL.md b/skills/uv-package-manager/SKILL.md index 3d9fc495..2ce5c50f 100644 --- a/skills/uv-package-manager/SKILL.md +++ b/skills/uv-package-manager/SKILL.md @@ -1,6 +1,6 @@ --- name: uv-package-manager -description: Master the uv package manager for fast Python dependency management, virtual environments, and modern Python project workflows. Use when setting up Python projects, managing dependencies, or optimizing Python development workflows with uv. +description: "Master the uv package manager for fast Python dependency management, virtual environments, and modern Python project workflows. Use when setting up Python projects, managing dependencies, or optimi..." --- # UV Package Manager diff --git a/skills/vercel-deploy-claimable/SKILL.md b/skills/vercel-deploy-claimable/SKILL.md index 99a82935..d880c269 100644 --- a/skills/vercel-deploy-claimable/SKILL.md +++ b/skills/vercel-deploy-claimable/SKILL.md @@ -1,6 +1,6 @@ --- name: vercel-deploy-claimable -description: "Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'Create a preview deployment', 'Deploy and give me the link', or 'Push this live'. No authentication required - returns preview URL and claimable deployment link." +description: "Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'Create a preview deployment', 'Deploy and..." source: "https://github.com/vercel-labs/agent-skills/tree/main/skills/claude.ai/vercel-deploy-claimable" risk: safe --- diff --git a/skills/verification-before-completion/SKILL.md b/skills/verification-before-completion/SKILL.md index 2f14076e..fc3c8f54 100644 --- a/skills/verification-before-completion/SKILL.md +++ b/skills/verification-before-completion/SKILL.md @@ -1,6 +1,6 @@ --- name: verification-before-completion -description: Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always +description: "Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evide..." --- # Verification Before Completion diff --git a/skills/viral-generator-builder/SKILL.md b/skills/viral-generator-builder/SKILL.md index afc1aec2..8d6a4604 100644 --- a/skills/viral-generator-builder/SKILL.md +++ b/skills/viral-generator-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: viral-generator-builder -description: "Expert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers the psychology of sharing, viral mechanics, and building tools people can't resist sharing with friends. Use when: generator tool, quiz maker, name generator, avatar creator, viral tool." +description: "Expert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers the psychology of sharing, viral mechanic..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/voice-agents/SKILL.md b/skills/voice-agents/SKILL.md index 276c08b4..ffc9c9f9 100644 --- a/skills/voice-agents/SKILL.md +++ b/skills/voice-agents/SKILL.md @@ -1,6 +1,6 @@ --- name: voice-agents -description: "Voice agents represent the frontier of AI interaction - humans speaking naturally with AI systems. The challenge isn't just speech recognition and synthesis, it's achieving natural conversation flow with sub-800ms latency while handling interruptions, background noise, and emotional nuance. This skill covers two architectures: speech-to-speech (OpenAI Realtime API, lowest latency, most natural) and pipeline (STT→LLM→TTS, more control, easier to debug). Key insight: latency is the constraint. Hu" +description: "Voice agents represent the frontier of AI interaction - humans speaking naturally with AI systems. The challenge isn't just speech recognition and synthesis, it's achieving natural conversation flo..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/voice-ai-development/SKILL.md b/skills/voice-ai-development/SKILL.md index 0526ce93..6674e4ee 100644 --- a/skills/voice-ai-development/SKILL.md +++ b/skills/voice-ai-development/SKILL.md @@ -1,6 +1,6 @@ --- name: voice-ai-development -description: "Expert in building voice AI applications - from real-time voice agents to voice-enabled apps. Covers OpenAI Realtime API, Vapi for voice agents, Deepgram for transcription, ElevenLabs for synthesis, LiveKit for real-time infrastructure, and WebRTC fundamentals. Knows how to build low-latency, production-ready voice experiences. Use when: voice ai, voice agent, speech to text, text to speech, realtime voice." +description: "Expert in building voice AI applications - from real-time voice agents to voice-enabled apps. Covers OpenAI Realtime API, Vapi for voice agents, Deepgram for transcription, ElevenLabs for synthesis..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/wcag-audit-patterns/SKILL.md b/skills/wcag-audit-patterns/SKILL.md index 1347ff24..dfdb7b71 100644 --- a/skills/wcag-audit-patterns/SKILL.md +++ b/skills/wcag-audit-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: wcag-audit-patterns -description: Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns. +description: "Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac..." --- # WCAG Audit Patterns diff --git a/skills/web-artifacts-builder/SKILL.md b/skills/web-artifacts-builder/SKILL.md index 8b39b19f..88d19c62 100644 --- a/skills/web-artifacts-builder/SKILL.md +++ b/skills/web-artifacts-builder/SKILL.md @@ -1,6 +1,6 @@ --- name: web-artifacts-builder -description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. +description: "Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state ma..." license: Complete terms in LICENSE.txt --- diff --git a/skills/web3-testing/SKILL.md b/skills/web3-testing/SKILL.md index 46743809..fe8a84fa 100644 --- a/skills/web3-testing/SKILL.md +++ b/skills/web3-testing/SKILL.md @@ -1,6 +1,6 @@ --- name: web3-testing -description: Test smart contracts comprehensively using Hardhat and Foundry with unit tests, integration tests, and mainnet forking. Use when testing Solidity contracts, setting up blockchain test suites, or validating DeFi protocols. +description: "Test smart contracts comprehensively using Hardhat and Foundry with unit tests, integration tests, and mainnet forking. Use when testing Solidity contracts, setting up blockchain test suites, or va..." --- # Web3 Smart Contract Testing diff --git a/skills/webapp-testing/SKILL.md b/skills/webapp-testing/SKILL.md index 47262153..d4dde0ce 100644 --- a/skills/webapp-testing/SKILL.md +++ b/skills/webapp-testing/SKILL.md @@ -1,6 +1,6 @@ --- name: webapp-testing -description: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. +description: "Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browse..." license: Complete terms in LICENSE.txt --- diff --git a/skills/wiki-architect/SKILL.md b/skills/wiki-architect/SKILL.md index acbcd10c..7c718fc2 100644 --- a/skills/wiki-architect/SKILL.md +++ b/skills/wiki-architect/SKILL.md @@ -1,6 +1,6 @@ --- name: wiki-architect -description: Analyzes code repositories and generates hierarchical documentation structures with onboarding guides. Use when the user wants to create a wiki, generate documentation, map a codebase structure, or understand a project's architecture at a high level. +description: "Analyzes code repositories and generates hierarchical documentation structures with onboarding guides. Use when the user wants to create a wiki, generate documentation, map a codebase structure, or..." --- # Wiki Architect diff --git a/skills/wiki-changelog/SKILL.md b/skills/wiki-changelog/SKILL.md index d94d7dc4..fc7de0c8 100644 --- a/skills/wiki-changelog/SKILL.md +++ b/skills/wiki-changelog/SKILL.md @@ -1,6 +1,6 @@ --- name: wiki-changelog -description: Analyzes git commit history and generates structured changelogs categorized by change type. Use when the user asks about recent changes, wants a changelog, or needs to understand what changed in the repository. +description: "Analyzes git commit history and generates structured changelogs categorized by change type. Use when the user asks about recent changes, wants a changelog, or needs to understand what changed in th..." --- # Wiki Changelog diff --git a/skills/wiki-page-writer/SKILL.md b/skills/wiki-page-writer/SKILL.md index c2afc7af..62944f34 100644 --- a/skills/wiki-page-writer/SKILL.md +++ b/skills/wiki-page-writer/SKILL.md @@ -1,6 +1,6 @@ --- name: wiki-page-writer -description: Generates rich technical documentation pages with dark-mode Mermaid diagrams, source code citations, and first-principles depth. Use when writing documentation, generating wiki pages, creating technical deep-dives, or documenting specific components or systems. +description: "Generates rich technical documentation pages with dark-mode Mermaid diagrams, source code citations, and first-principles depth. Use when writing documentation, generating wiki pages, creating tech..." --- # Wiki Page Writer diff --git a/skills/wiki-qa/SKILL.md b/skills/wiki-qa/SKILL.md index d0869f57..4761ec5c 100644 --- a/skills/wiki-qa/SKILL.md +++ b/skills/wiki-qa/SKILL.md @@ -1,6 +1,6 @@ --- name: wiki-qa -description: Answers questions about a code repository using source file analysis. Use when the user asks a question about how something works, wants to understand a component, or needs help navigating the codebase. +description: "Answers questions about a code repository using source file analysis. Use when the user asks a question about how something works, wants to understand a component, or needs help navigating the code..." --- # Wiki Q&A diff --git a/skills/wiki-researcher/SKILL.md b/skills/wiki-researcher/SKILL.md index 83e29e5c..985842ca 100644 --- a/skills/wiki-researcher/SKILL.md +++ b/skills/wiki-researcher/SKILL.md @@ -1,6 +1,6 @@ --- name: wiki-researcher -description: Conducts multi-turn iterative deep research on specific topics within a codebase with zero tolerance for shallow analysis. Use when the user wants an in-depth investigation, needs to understand how something works across multiple files, or asks for comprehensive analysis of a specific system or pattern. +description: "Conducts multi-turn iterative deep research on specific topics within a codebase with zero tolerance for shallow analysis. Use when the user wants an in-depth investigation, needs to understand how..." --- # Wiki Researcher diff --git a/skills/wiki-vitepress/SKILL.md b/skills/wiki-vitepress/SKILL.md index 096a3cec..2c71a1fd 100644 --- a/skills/wiki-vitepress/SKILL.md +++ b/skills/wiki-vitepress/SKILL.md @@ -1,6 +1,6 @@ --- name: wiki-vitepress -description: Packages generated wiki Markdown into a VitePress static site with dark theme, dark-mode Mermaid diagrams with click-to-zoom, and production build output. Use when the user wants to create a browsable website from generated wiki pages. +description: "Packages generated wiki Markdown into a VitePress static site with dark theme, dark-mode Mermaid diagrams with click-to-zoom, and production build output. Use when the user wants to create a browsa..." --- # Wiki VitePress Packager diff --git a/skills/windows-privilege-escalation/SKILL.md b/skills/windows-privilege-escalation/SKILL.md index bc014a83..c9b0d64c 100644 --- a/skills/windows-privilege-escalation/SKILL.md +++ b/skills/windows-privilege-escalation/SKILL.md @@ -1,6 +1,6 @@ --- -name: Windows Privilege Escalation -description: This skill should be used when the user asks to "escalate privileges on Windows," "find Windows privesc vectors," "enumerate Windows for privilege escalation," "exploit Windows misconfigurations," or "perform post-exploitation privilege escalation." It provides comprehensive guidance for discovering and exploiting privilege escalation vulnerabilities in Windows environments. +name: windows-privilege-escalation +description: "This skill should be used when the user asks to "escalate privileges on Windows," "find Windows privesc vectors," "enumerate Windows for privilege escalation," "exploit Windows misconfigurations," ..." metadata: author: zebbern version: "1.1" diff --git a/skills/wireshark-analysis/SKILL.md b/skills/wireshark-analysis/SKILL.md index 9269ce18..b560df3b 100644 --- a/skills/wireshark-analysis/SKILL.md +++ b/skills/wireshark-analysis/SKILL.md @@ -1,6 +1,6 @@ --- -name: Wireshark Network Traffic Analysis -description: This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow TCP/UDP streams", "detect network anomalies", "investigate suspicious traffic", or "perform protocol analysis". It provides comprehensive techniques for network packet capture, filtering, and analysis using Wireshark. +name: wireshark-analysis +description: "This skill should be used when the user asks to "analyze network traffic with Wireshark", "capture packets for troubleshooting", "filter PCAP files", "follow TCP/UDP streams", "detect network anoma..." metadata: author: zebbern version: "1.1" diff --git a/skills/wordpress-penetration-testing/SKILL.md b/skills/wordpress-penetration-testing/SKILL.md index 0c70bb82..15c20093 100644 --- a/skills/wordpress-penetration-testing/SKILL.md +++ b/skills/wordpress-penetration-testing/SKILL.md @@ -1,6 +1,6 @@ --- -name: WordPress Penetration Testing -description: This skill should be used when the user asks to "pentest WordPress sites", "scan WordPress for vulnerabilities", "enumerate WordPress users, themes, or plugins", "exploit WordPress vulnerabilities", or "use WPScan". It provides comprehensive WordPress security assessment methodologies. +name: wordpress-penetration-testing +description: "This skill should be used when the user asks to "pentest WordPress sites", "scan WordPress for vulnerabilities", "enumerate WordPress users, themes, or plugins", "exploit WordPress vulnerabilities"..." metadata: author: zebbern version: "1.1" diff --git a/skills/workflow-automation/SKILL.md b/skills/workflow-automation/SKILL.md index f0ebe2d8..3b507de9 100644 --- a/skills/workflow-automation/SKILL.md +++ b/skills/workflow-automation/SKILL.md @@ -1,6 +1,6 @@ --- name: workflow-automation -description: "Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off. This skill covers the platforms (n8n, Temporal, Inngest) and patterns (sequential, parallel, orchestrator-worker) that turn brittle scripts into production-grade automation. Key insight: The platforms make different tradeoffs. n8n optimizes for accessibility" +description: "Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, wor..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/workflow-orchestration-patterns/SKILL.md b/skills/workflow-orchestration-patterns/SKILL.md index 323bc3b9..c0f9af07 100644 --- a/skills/workflow-orchestration-patterns/SKILL.md +++ b/skills/workflow-orchestration-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: workflow-orchestration-patterns -description: Design durable workflows with Temporal for distributed systems. Covers workflow vs activity separation, saga patterns, state management, and determinism constraints. Use when building long-running processes, distributed transactions, or microservice orchestration. +description: "Design durable workflows with Temporal for distributed systems. Covers workflow vs activity separation, saga patterns, state management, and determinism constraints. Use when building long-running ..." --- # Workflow Orchestration Patterns diff --git a/skills/xlsx-official/SKILL.md b/skills/xlsx-official/SKILL.md index 22db189c..c5b658a1 100644 --- a/skills/xlsx-official/SKILL.md +++ b/skills/xlsx-official/SKILL.md @@ -1,6 +1,6 @@ --- -name: xlsx -description: "Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas" +name: xlsx-official +description: "Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, ...." license: Proprietary. LICENSE.txt has complete terms --- diff --git a/skills/xss-html-injection/SKILL.md b/skills/xss-html-injection/SKILL.md index cdde5603..f2579264 100644 --- a/skills/xss-html-injection/SKILL.md +++ b/skills/xss-html-injection/SKILL.md @@ -1,6 +1,6 @@ --- -name: Cross-Site Scripting and HTML Injection Testing -description: This skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection vulnerabilities", "steal cookies via XSS", or "bypass content security policies". It provides comprehensive techniques for detecting, exploiting, and understanding XSS and HTML injection attack vectors in web applications. +name: xss-html-injection +description: "This skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection vulnerabiliti..." metadata: author: zebbern version: "1.1" diff --git a/skills/zapier-make-patterns/SKILL.md b/skills/zapier-make-patterns/SKILL.md index e637974b..bae1b378 100644 --- a/skills/zapier-make-patterns/SKILL.md +++ b/skills/zapier-make-patterns/SKILL.md @@ -1,6 +1,6 @@ --- name: zapier-make-patterns -description: "No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points. This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power " +description: "No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity ..." source: vibeship-spawner-skills (Apache 2.0) --- diff --git a/skills/zustand-store-ts/SKILL.md b/skills/zustand-store-ts/SKILL.md index a743bf89..ac710e1b 100644 --- a/skills/zustand-store-ts/SKILL.md +++ b/skills/zustand-store-ts/SKILL.md @@ -1,6 +1,6 @@ --- name: zustand-store-ts -description: Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand. +description: "Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reacti..." --- # Zustand Store diff --git a/skills_index.json b/skills_index.json index 9c0c2dfd..2b87801d 100644 --- a/skills_index.json +++ b/skills_index.json @@ -4112,6 +4112,132 @@ "risk": "unknown", "source": "unknown" }, + { + "id": "hig-components-content", + "path": "skills/hig-components-content", + "category": "uncategorized", + "name": "hig-components-content", + "description": "Apple Human Interface Guidelines for content display components. Use this skill when the user asks about \"charts component\", \"collection view\", \"image view\", \"web view\", \"color well\", \"image well\", \"activity view\", \"lockup\", \"data visualization\", \"content display\", displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says \"how should I display charts\", \"what's the best way to show images\", \"should I use a web view\", \"how do I build a grid of items\", \"what component shows media\", or \"how do I present a share sheet\". Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-components-controls", + "path": "skills/hig-components-controls", + "category": "uncategorized", + "name": "hig-components-controls", + "description": "Apple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, labels, token fields, virtual keyboards, rating indicators, and gauges. Use this skill when the user says \"picker or segmented control,\" \"how should my form look,\" \"what keyboard type should I use,\" \"toggle vs checkbox,\" or asks about picker design, toggle, switch, slider, stepper, text field, text input, segmented control, combo box, label, token field, virtual keyboard, rating indicator, gauge, form design, input validation, or control state management. Cross-references: hig-components-menus, hig-components-dialogs, hig-components-search.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-components-dialogs", + "path": "skills/hig-components-dialogs", + "category": "uncategorized", + "name": "hig-components-dialogs", + "description": "Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views. Use this skill when the user says \"should I use an alert or a sheet,\" \"how do I show a confirmation dialog,\" \"when should I use a popover,\" \"my modals are annoying users,\" or asks about alert design, action sheet, popover, sheet, modal, dialog, digit entry, confirmation dialog, warning dialog, modal presentation, non-modal content, destructive action confirmation, or overlay UI patterns. Cross-references: hig-components-menus, hig-components-controls, hig-components-search, hig-patterns.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-components-layout", + "path": "skills/hig-components-layout", + "category": "uncategorized", + "name": "hig-components-layout", + "description": "Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about \"sidebar\", \"split view\", \"tab bar\", \"tab view\", \"scroll view\", \"window design\", \"panel\", \"list view\", \"table view\", \"column view\", \"outline view\", \"navigation structure\", \"app layout\", \"boxes\", \"ornaments\", or organizing content hierarchically in Apple apps. Also use when the user says \"how should I organize my app\", \"what navigation pattern should I use\", \"my layout breaks on iPad\", \"how do I build a sidebar\", \"should I use tabs or a sidebar\", or \"my app doesn't adapt to different screen sizes\". Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-components-menus", + "path": "skills/hig-components-menus", + "category": "uncategorized", + "name": "hig-components-menus", + "description": "Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure controls, and standard buttons. Use this skill when the user says \"how should my buttons look,\" \"what goes in the menu bar,\" \"should I use a context menu or action sheet,\" \"how do I design a toolbar,\" or asks about button design, menu design, context menu, toolbar, menu bar, action button, pop-up button, pull-down button, disclosure control, dock menu, edit menu, or any menu/button component layout and behavior. Cross-references: hig-components-search, hig-components-controls, hig-components-dialogs.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-components-search", + "path": "skills/hig-components-search", + "category": "uncategorized", + "name": "hig-components-search", + "description": "Apple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says \"how should search work in my app,\" \"I need a breadcrumb,\" \"how do I paginate content,\" or asks about search field, search bar, page control, path control, breadcrumb, navigation component, search UX, search suggestions, search scopes, paginated content navigation, or file path hierarchy display. Cross-references: hig-components-menus, hig-components-controls, hig-components-dialogs, hig-patterns.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-components-status", + "path": "skills/hig-components-status", + "category": "uncategorized", + "name": "hig-components-status", + "description": "Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: \"progress indicator\", \"progress bar\", \"loading spinner\", \"status bar\", \"activity ring\", \"progress display\", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says \"how do I show loading state,\" \"should I use a spinner or progress bar,\" \"what goes in the status bar,\" or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-components-system", + "path": "skills/hig-components-system", + "category": "uncategorized", + "name": "hig-components-system", + "description": "Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts. Use when asked about: \"widget design\", \"live activity\", \"notification design\", \"complication\", \"home screen quick action\", \"top shelf\", \"watch face\", \"app clip\", \"app shortcut\", \"system experience\". Also use when the user says \"how do I design a widget,\" \"what should my notification look like,\" \"how do Live Activities work,\" \"should I make an App Clip,\" or asks about surfaces outside the main app. Cross-references: hig-components-status for progress in widgets, hig-inputs for interaction patterns, hig-technologies for Siri and system integration.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-foundations", + "path": "skills/hig-foundations", + "category": "uncategorized", + "name": "hig-foundations", + "description": "Apple Human Interface Guidelines design foundations. Use this skill when the user asks about \"HIG color\", \"Apple typography\", \"SF Symbols\", \"dark mode guidelines\", \"accessible design\", \"Apple design foundations\", \"app icon\", \"layout guidelines\", \"materials\", \"motion\", \"privacy\", \"right to left\", \"RTL\", \"inclusive design\", branding, images, spatial layout, or writing style. Also use when the user says \"my colors look wrong in dark mode\", \"what font should I use\", \"is my app accessible enough\", \"how do I support Dynamic Type\", \"what contrast ratio do I need\", \"how do I pick system colors\", or \"my icons don't match the system style\". Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction patterns, hig-components-layout for structural components, hig-components-content for display.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-inputs", + "path": "skills/hig-inputs", + "category": "uncategorized", + "name": "hig-inputs", + "description": "Apple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, eye tracking, focus system, remotes, spatial interactions, gyroscope, accelerometer, and nearby interactions. Use when asked about: \"gesture design\", \"Apple Pencil\", \"keyboard shortcuts\", \"game controller\", \"pointer support\", \"mouse support\", \"trackpad\", \"Digital Crown\", \"eye tracking\", \"visionOS input\", \"focus system\", \"remote control\", \"gyroscope\", \"spatial interaction\". Also use when the user says \"what gestures should I support,\" \"how do I add keyboard shortcuts,\" \"how does input work on Apple TV,\" \"should I support Apple Pencil,\" or asks about input device handling. Cross-references: hig-components-status, hig-components-system, hig-technologies for VoiceOver and Siri.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-patterns", + "path": "skills/hig-patterns", + "category": "uncategorized", + "name": "hig-patterns", + "description": "Apple Human Interface Guidelines interaction and UX patterns. Use this skill when the user asks about \"onboarding flow\", \"user onboarding\", \"app launch\", \"loading state\", \"drag and drop\", \"search pattern\", \"settings design\", \"notifications\", \"modality\", \"multitasking\", \"feedback pattern\", \"haptics\", \"undo redo\", \"file management\", data entry, sharing, collaboration, full screen, audio, video, haptic feedback, ratings, printing, help, or account management in Apple apps. Also use when the user says \"how should onboarding work\", \"my app takes too long to load\", \"should I use a modal here\", \"how do I handle errors\", \"when should I ask for permissions\", \"how to show progress\", or \"what's the right way to confirm a delete\". Cross-references: hig-foundations for underlying principles, hig-platforms for platform specifics, hig-components-layout for navigation, hig-components-content for data display.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-platforms", + "path": "skills/hig-platforms", + "category": "uncategorized", + "name": "hig-platforms", + "description": "Apple Human Interface Guidelines for platform-specific design. Use this skill when the user asks about \"designing for iOS\", \"iPad app design\", \"macOS design\", \"tvOS\", \"visionOS\", \"watchOS\", \"Apple platform\", \"which platform\", platform differences, platform-specific conventions, or multi-platform app design. Also use when the user says \"should I design differently for iPad vs iPhone\", \"how does my app work on visionOS\", \"what's different about macOS apps\", \"porting my app to another platform\", \"universal app design\", or \"what input methods does this platform use\". Cross-references: hig-foundations for shared design foundations, hig-patterns for interaction patterns, hig-components-layout for navigation structures, hig-components-content for content display.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-project-context", + "path": "skills/hig-project-context", + "category": "uncategorized", + "name": "hig-project-context", + "description": "Create or update a shared Apple design context document that other HIG skills use to tailor guidance. Use when the user says \"set up my project context,\" \"what platforms am I targeting,\" \"configure HIG settings,\" or when starting a new Apple platform project. Also activates when other HIG skills need project context but none exists yet. This skill creates .claude/apple-design-context.md so that hig-foundations, hig-platforms, hig-components-*, hig-inputs, and hig-technologies can provide targeted advice without repetitive questions.", + "risk": "unknown", + "source": "unknown" + }, + { + "id": "hig-technologies", + "path": "skills/hig-technologies", + "category": "uncategorized", + "name": "hig-technologies", + "description": "Apple HIG guidance for Apple technology integrations: Siri, Apple Pay, HealthKit, HomeKit, ARKit, machine learning, generative AI, iCloud, Sign in with Apple, SharePlay, CarPlay, Game Center, in-app purchase, NFC, Wallet, VoiceOver, Maps, Mac Catalyst, and more. Use when asked about: \"Siri integration\", \"Apple Pay\", \"HealthKit\", \"HomeKit\", \"ARKit\", \"augmented reality\", \"machine learning\", \"generative AI\", \"iCloud sync\", \"Sign in with Apple\", \"SharePlay\", \"CarPlay\", \"in-app purchase\", \"NFC\", \"VoiceOver\", \"Maps\", \"Mac Catalyst\". Also use when the user says \"how do I integrate Siri,\" \"what are the Apple Pay guidelines,\" \"how should my AR experience work,\" \"how do I use Sign in with Apple,\" or asks about any Apple framework or service integration. Cross-references: hig-inputs for input methods, hig-components-system for widgets.", + "risk": "unknown", + "source": "unknown" + }, { "id": "hosted-agents-v2-py", "path": "skills/hosted-agents-v2-py",