Raycast: Die Kunst der Produktivitäts-UI
Wie Raycast Reaktionszeiten unter 50ms mit Persönlichkeit erreichte: macOS-natives Design, Tastatur-Exzellenz, Erweiterungs-Ökosystem und HUD-Muster. Mit Swift-Implementierungsmustern.
Raycast: Die Kunst der Produktivitäts-UI
„Wir glauben, dass die besten Tools sich zurückhalten." — Raycast Team
Raycast ist ein macOS-Launcher, der Spotlight für Power-User ersetzt hat. Er demonstriert, wie man für maximale Effizienz gestaltet und dabei Wärme und Persönlichkeit bewahrt.
Warum Raycast wichtig ist
Raycast beweist, dass funktionale Software nicht kalt wirken muss. Es vereint: - Blitzschnelle Geschwindigkeit (startet in <50ms) - Tastatur-zentrierte Bedienung - Erweiterbarkeit durch einen Store - Persönlichkeit durch liebevolle Details
Wichtige Errungenschaften: - Hat neu definiert, was ein Launcher sein kann - Hat bewiesen, dass Entwickler-Tools Persönlichkeit haben können - Hat ein florierendes Extension-Ökosystem geschaffen - Hat neue Standards für macOS-natives Design gesetzt
Zentrale Erkenntnisse
- 50ms ist die Geschwindigkeitsschwelle - Nutzer nehmen jede Latenz über 50ms wahr; behandle dies als harte technische Anforderung, nicht als Richtlinie
- Native Plattform-Integration schafft Vertrauen - Vibrancy, SF Symbols, System-Akzentfarben und Standard-Shortcuts lassen Raycast wie ein Teil von macOS wirken
- Tastaturkürzel müssen auffindbar sein - Zeige Shortcuts inline in den Ergebnissen (⌘1, ⌘2), nicht versteckt in Tooltips oder Dokumentation
- Persönlichkeit ohne Performance-Einbußen - Konfetti bei Erfolgen, verspielte Leerzustände und clevere Texte erzeugen Freude ohne zusätzliche Latenz
- Extension-Ökosysteme brauchen eine Design-Sprache - Third-Party-Extensions fühlen sich nativ an, weil sie dieselben Formularkomponenten, Action Panels und Navigationsmuster verwenden
Grundlegende Design-Prinzipien
1. Sofortige Reaktion
Raycast fühlt sich wie eine Erweiterung deiner Gedanken an. Keine Latenz. Kein Warten.
So erreichen sie es: - Native Swift-Implementierung (kein Electron) - Vorgeladener Extension-Index - Aggressives Caching - Optimierte Rendering-Pipeline
Die 50ms-Regel: Wenn etwas länger als 50ms dauert, merken es die Nutzer. Raycast behandelt dies als harte Anforderung.
Design-Implikationen: - Zeige die UI sofort, lade Daten asynchron - Skeleton-States für aufwendige Operationen - Blockiere niemals den Main Thread - Bevorzuge lokale Verarbeitung gegenüber Netzwerkaufrufen
// Raycast-style instant response pattern
struct SearchView: View {
@State private var results: [Result] = []
@State private var isLoading = false
var body: some View {
VStack {
// Show immediately with cached data
ForEach(cachedResults) { result in
ResultRow(result)
}
if isLoading {
// Unobtrusive loading indicator
ProgressView()
.scaleEffect(0.5)
}
}
.task(id: query) {
isLoading = true
results = await search(query)
isLoading = false
}
}
}
2. Tiefe macOS-Integration
Raycast fühlt sich an, als gehöre es zu macOS. Es respektiert Plattform-Konventionen und erweitert gleichzeitig die Grenzen.
Native Verhaltensweisen: - Vibrancy und Blur (NSVisualEffectView) - System-Akzentfarben - SF Symbols durchgehend - Native Tastaturkürzel - Respektiert System Dark/Light Mode
Implementierung:
// macOS vibrancy
struct RaycastWindow: View {
var body: some View {
VStack {
// Content
}
.background(.ultraThinMaterial) // Native blur
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
}
}
// System accent color
Text("Selected")
.foregroundStyle(.tint) // Follows system preference
// SF Symbols with semantic colors
Image(systemName: "checkmark.circle.fill")
.foregroundStyle(.green)
Fenster-Design:
┌────────────────────────────────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░ ░░ │
│ ░░ > Search Raycast... ░░ │
│ ░░ ░░ │
│ ░░ ┌────────────────────────────────────────────────┐ ░░ │
│ ░░ │ [A] Applications Cmd+1 │ ░░ │
│ ░░ │ [F] File Search Cmd+2 │ ░░ │
│ ░░ │ [C] Clipboard History Cmd+3 │ ░░ │
│ ░░ │ [S] System Commands Cmd+4 │ ░░ │
│ ░░ └────────────────────────────────────────────────┘ ░░ │
│ ░░ ░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└────────────────────────────────────────────────────────────┘
↑ Vibrancy zeigt den Desktop durch das Fenster
3. Tastatur-Exzellenz mit visuellem Feedback
Jede Aktion hat ein Tastaturkürzel. Jedes Kürzel hat eine visuelle Bestätigung.
Shortcut-Anzeigemuster:
ERGEBNISLISTE:
┌────────────────────────────────────────────────────────────┐
│ Zuletzt verwendete Anwendungen │
│ │
│ (*) Visual Studio Code Cmd+1 │
│ ~/Projects/my-app │
│ │
│ ( ) Figma Cmd+2 │
│ ~/Design/project.fig │
│ │
│ ( ) Terminal Cmd+3 │
│ │
│ ───────────────────────────────────────────────────────────│
│ Aktionen Cmd+K oder -> zeigt │
└────────────────────────────────────────────────────────────┘
Action Panel:
┌────────────────────────────────────────────────────────────┐
│ Aktionen für „Visual Studio Code" esc <- │
│ │
│ Öffnen Enter │
│ In neuem Fenster öffnen Cmd+Enter │
│ ──────────────────────────────────────────────────────── │
│ Im Finder zeigen Cmd+Shift+F │
│ Pfad kopieren Cmd+Shift+C │
│ ──────────────────────────────────────────────────────── │
│ In den Papierkorb verschieben Cmd+Backspace │
└────────────────────────────────────────────────────────────┘
Design-Prinzipien: - Zeige Shortcuts inline (nicht in Tooltips) - Gruppiere Shortcuts nach Modifier-Taste - Verwende Standard-macOS-Shortcuts wo erwartet - Mnemonische Muster (⌘⇧F = Finder)
4. Persönlichkeit in den Details
Raycast ist effizient, aber nicht steril. Kleine Freuden machen es unvergesslich.
Beispiele: - Konfetti bei Erfolgen - Dezente Sounds für Aktionen - Verspielte Leerzustände - Easter Eggs für Power-User
Leerzustand-Beispiel:
┌────────────────────────────────────────────────────────────┐
│ │
│ [?] │
│ │
│ Keine Ergebnisse für „asdfgh" │
│ │
│ Versuche etwas anderes zu suchen, │
│ oder schau dir den Extension Store an │
│ │
│ [Extensions durchstöbern] │
│ │
└────────────────────────────────────────────────────────────┘
Konfetti-Muster (für Erfolge):
// After completing onboarding, earning badge, etc.
ConfettiView()
.transition(.opacity)
.animation(.spring(), value: showConfetti)
Persönlichkeits-Richtlinien: - Freude darf nicht verzögern - Feiern werden verdient (nicht zufällig) - Persönlichkeit in der Formulierung („Keine Ergebnisse für…" statt „Fehler: 0 Ergebnisse") - Sound ist optional und unaufdringlich
5. Extension-Ökosystem-Design
Raycasts Extension Store ist wunderschön gestaltet.
Extension-Karte:
┌────────────────────────────────────────────────────────────┐
│ ┌──────┐ │
│ │ [+] │ GitHub │
│ │ │ Durchsuche Repos, PRs und Issues │
│ └──────┘ │
│ ★★★★★ 1.2k Bewertungen • Von Raycast │
│ │
│ [Installieren] │
└────────────────────────────────────────────────────────────┘
Extension-Detailansicht:
┌────────────────────────────────────────────────────────────┐
│ │
│ ← GitHub [Deinstall.] │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [Screenshot der Extension in Verwendung] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Befehle │
│ ├─ Repositories durchsuchen │
│ ├─ Meine Pull Requests │
│ ├─ Issues durchsuchen │
│ └─ Issue erstellen │
│ │
│ Änderungsprotokoll │
│ ├─ v2.1.0 Organisations-Filterung hinzugefügt │
│ └─ v2.0.0 Komplette Neuentwicklung mit neuer API │
│ │
└────────────────────────────────────────────────────────────┘
6. Formulardesign für Extensions
Extensions verwenden ein einheitliches Formularsystem.
Formularmuster:
┌────────────────────────────────────────────────────────────┐
│ Create GitHub Issue esc │
│ │
│ Repository │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ raycast/extensions ▾ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Title │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Bug: Search not working │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Description │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ When I search for... │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ Labels (optional) │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ [bug] [needs-triage] + │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ [Create Issue ⌘↵] [Cancel esc] │
│ │
└────────────────────────────────────────────────────────────┘
Styling der Formularkomponenten:
// Raycast-style form in SwiftUI
Form {
Section("Repository") {
Picker("", selection: $repo) {
ForEach(repos) { repo in
Text(repo.name).tag(repo)
}
}
.labelsHidden()
}
Section("Title") {
TextField("Bug: ...", text: $title)
}
Section("Description") {
TextEditor(text: $description)
.frame(minHeight: 100)
}
}
.formStyle(.grouped)
Designmuster zum Lernen
Das Search-First-Muster
Alles beginnt mit der Suche.
┌────────────────────────────────────────────────────────────┐
│ > | │
│ ^ Cursor steht sofort hier beim Start │
│ │
│ Tippen Sie, um Befehle, Apps, Dateien und mehr zu suchen │
└────────────────────────────────────────────────────────────┘
Implementierung: - Auto-Fokus auf Suche beim Start - Fuzzy-Matching mit Hervorhebungen - Intelligentes Ranking (kürzlich + häufig + relevant) - Ergebnisse erscheinen während der Eingabe
Hierarchische Navigation
Tiefe Funktionalität ohne Komplexität.
Ebene 1: Hauptsuche
↓ Enter
Ebene 2: Extension-Befehle
↓ Enter
Ebene 3: Aktionsergebnisse
↓ ⌘K
Ebene 4: Aktionspanel
Immer: esc geht eine Ebene zurück
HUD-Bestätigungen
Schnelles Feedback ohne Unterbrechung.
Nach einer Aktion:
┌────────────────────────┐
│ ✓ In Zwischenablage │
│ kopiert │
└────────────────────────┘
↑ Erscheint kurz, blendet aus
Erfordert kein Schließen
// HUD pattern
struct HUDView: View {
@State private var show = false
var body: some View {
if show {
Text("✓ Copied")
.padding(.horizontal, 16)
.padding(.vertical, 8)
.background(.regularMaterial)
.cornerRadius(8)
.transition(.opacity.combined(with: .scale))
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
withAnimation { show = false }
}
}
}
}
}
Was man von Raycast übernehmen sollte
Für Launcher/Such-UI
- 50ms oder nichts - Geschwindigkeit ist nicht verhandelbar
- Tastaturkürzel überall - Auffindbar, nicht versteckt
- Fuzzy-Suche mit Hervorhebung - Zeigen, warum Ergebnisse übereinstimmen
- Aktionspanels (⌘K) - Kontextsensitive Aktionen
- HUD-Bestätigungen - Schnelles, nicht-blockierendes Feedback
Für macOS-Apps
- Native Vibrancy - NSVisualEffectView/.material verwenden
- SF Symbols - Konsistent mit dem System
- Systemfarben - Akzentfarben-Einstellung respektieren
- Kontinuierliche Ecken - .cornerRadius(style: .continuous)
- Standard-Tastaturkürzel - ⌘C, ⌘V usw. nicht neu erfinden
Spezifische Techniken
| Technik | Anwendung |
|---|---|
| Sofortiger Start | Fenster vorwärmen, Inhalte lazy laden |
| Fuzzy-Suche | Fuse.js oder ähnliche Bibliothek verwenden |
| Shortcut-Hinweise | Inline ⌘1, ⌘2 usw. in Ergebnissen |
| Aktionspanel | Sekundäre Aktionen mit ⌘K oder → |
| HUD-Feedback | Toast-Stil, automatisches Ausblenden |
| Extension API | Klare Verträge, konsistente UI |
Farbsystem
Raycast verwendet semantische Farben, die an das System gebunden sind.
// Raycast-inspired semantic colors
extension Color {
static let rayBackground = Color(nsColor: .windowBackgroundColor)
static let raySecondary = Color.secondary
static let rayTertiary = Color(nsColor: .tertiaryLabelColor)
// Status colors
static let raySuccess = Color.green
static let rayWarning = Color.orange
static let rayError = Color.red
// Accent follows system
static let rayAccent = Color.accentColor
}
// Dark mode example
struct ResultRow: View {
var body: some View {
HStack {
Image(systemName: "app.fill")
.foregroundStyle(.secondary)
Text("Application Name")
.foregroundStyle(.primary)
Spacer()
Text("⌘ 1")
.font(.caption)
.foregroundStyle(.tertiary)
.padding(.horizontal, 6)
.padding(.vertical, 2)
.background(Color.secondary.opacity(0.2))
.cornerRadius(4)
}
.padding(.horizontal, 12)
.padding(.vertical, 8)
}
}
Zentrale Erkenntnisse
“Jede Millisekunde zählt. Nutzer spüren den Unterschied zwischen 50ms und 100ms.”
“Tastaturkürzel sollten entdeckbar sein, nicht aus der Dokumentation auswendig gelernt werden müssen.”
“Persönlichkeit macht Software einprägsam. Effizienz macht sie unverzichtbar.”
“Erweiterungen sollten sich nativ anfühlen, nicht angeschraubt. Dieselbe UI-Sprache, dieselben Interaktionen.”
Häufig gestellte Fragen
Wie erreicht Raycast Reaktionszeiten unter 50ms?
Raycast verwendet eine native Swift-Implementierung (kein Electron), lädt den Erweiterungsindex beim Start vor, cached Suchergebnisse aggressiv und optimiert die Rendering-Pipeline. Die UI erscheint sofort, während Daten asynchron geladen werden. Die 50ms-Schwelle wird als harte Vorgabe behandelt, nicht als Ziel.
Warum sieht Raycast so nativ auf macOS aus?
Raycast verwendet NSVisualEffectView für Vibrancy/Blur, SF Symbols für alle Icons, System-Akzentfarben, die Benutzereinstellungen respektieren, und Standard-macOS-Tastaturkürzel. Das Fenster hat einen durchgehenden Eckenradius und folgt automatisch dem System-Dark/Light-Modus.
Was ist Raycasts Ansatz bei Tastaturkürzeln?
Jede Aktion hat ein Tastaturkürzel, das inline in den Ergebnissen angezeigt wird (⌘1, ⌘2, etc.), nicht versteckt in Tooltips. Kürzel verwenden mnemonische Muster (⌘⇧F für Finder, ⌘⇧C für Copy Path). Das Action Panel (⌘K) bietet sekundäre Aktionen mit eigenen Kürzeln.
Wie fügt Raycast Persönlichkeit hinzu, ohne langsamer zu werden?
Feiern werden verdient und sind kurz—Konfetti erscheint nach Erfolgen, nicht zufällig. Leere Zustände haben verspielte Texte (“Keine Ergebnisse für…” statt “Fehler: 0 Ergebnisse”). Töne sind optional und unaufdringlich. Freude blockiert niemals den Nutzer oder erhöht die Latenz.
Wie bewahrt Raycasts Erweiterungssystem Konsistenz?
Alle Erweiterungen verwenden dieselben UI-Komponenten (Formulare, Listen, Action Panels), folgen denselben Navigationsmustern (Enter zum Vertiefen, Escape zum Zurückgehen) und erben das System-Styling. Die API erzwingt Konsistenz, sodass Drittanbieter-Erweiterungen nicht von eingebauten Funktionen zu unterscheiden sind.
Ressourcen
- Website: raycast.com
- Store: raycast.com/store - Erweiterungsdesign studieren
- Dokumentation: Richtlinien zur Erweiterungsentwicklung
- Blog: Engineering-Beiträge zur Performance
- GitHub: github.com/raycast - Open-Source-Erweiterungen