So fügen Sie Videos Motion Graphics hinzu
Die meisten Produktvideos brauchen nicht mehr Bewegung. Sie müssen den Blick des Zuschauers zur richtigen Sekunde an die richtige Stelle lenken. Wenn Sie Videos Motion Graphics hinzufügen, sollte jede Grafik eine von zwei Aufgaben erfüllen: zeigen, wohin man schauen muss, oder erklären, was etwas bedeutet. Alles andere ist Dekoration, und bei einer Bildschirmaufnahme konkurriert Dekoration mit der Benutzeroberfläche, die Sie gerade erklären.
Unten finden Sie die 8 Grafiken, die wirklich einen Mehrwert bieten, die jeweiligen Timing-Regeln, eine Vorher-Nachher-Shot-Liste für eine 60-sekündige Anleitung sowie 3 Wege zur Erstellung.
Der Test, den jede Grafik bestehen muss
Spielen Sie den Clip mit und ohne Grafik ab. Findet der Zuschauer die richtige Schaltfläche oder Zahl mit der Grafik schneller? Wenn die ehrliche Antwort lautet: „Es sieht schöner aus“, dann entfernen Sie sie. Zwei weitere Prüfungen helfen, das meiste Durcheinander zu vermeiden:
- Nur eine Grafik animiert gleichzeitig. Versetzen Sie die Einblendungen um mindestens eine halbe Sekunde, sonst nimmt der Zuschauer keine davon wahr.
- Die Grafik erscheint passend zum Kommentar. Wenn der Sprecher „Klicken Sie auf Export“ sagt und die Markierung erst 2 Sekunden später erscheint, sucht der Zuschauer bereits. Blenden Sie sie genau zum Wort oder ein paar Frames vorher ein.
8 Grafiken, die in einer Bildschirmaufnahme ihren Platz verdienen
| Grafik | Aufgabe | Faustregel |
|---|---|---|
| Callout (Textlabel) | Benennt das Element auf dem Bildschirm | 2 bis 6 Wörter, mindestens doppelt so lange eingeblendet wie die Lesezeit |
| Zoom + Hervorhebung | Zeigt, wo die Aktion stattfindet | Vor dem Klick zoomen, 1 bis 2 Sekunden nach dem Klick halten |
| Schrittzähler | Zeigt dem Zuschauer den Fortschritt | Gleiche Ecke, gleicher Stil, bei jedem Schritt |
| Bauchbinde | Benennt eine Person oder einen Abschnitt | Unteres Drittel, nicht über der erklärten Benutzeroberfläche |
| Titelkarte | Trennt Kapitel voneinander | 2 bis 3 Sekunden, 1 Textzeile |
| Animierter Pfeil | Zeigt auf etwas, das durch Zoom nicht isolierbar ist | Einzeichnen, dann stillstehen lassen |
| Datenzähler | Lässt eine Zahl wirken | In etwa 1 Sekunde hochzählen, dann den Endwert halten |
| Übergang | Markiert einen Szenen- oder Themenwechsel | 1 Stil pro Video, unter einer halben Sekunde |
Callouts
Ein Callout sollte das Steuerelement benennen oder das Ergebnis angeben: „Rechnungseinstellungen“ oder „Rechnung gesendet“. Beschränken Sie sich auf 6 Wörter. Die Untertitel-Richtlinien der BBC empfehlen mindestens etwa 0,3 Sekunden pro Wort für Untertitel. Da der Zuschauer bei einer Bildschirmaufnahme auch die Benutzeroberfläche scannt, sollten Sie diesen Wert verdoppeln: Ein Callout mit 4 Wörtern benötigt etwa 2,5 Sekunden, nicht 1,2.
Zoom + Hervorhebung
Die nützlichste Motion Graphic für Bildschirmaufnahmen, aber auch die am häufigsten überstrapazierte. Zoomen Sie 0,5 Sekunden vor dem Klick hinein, halten Sie den Zoom, während das Ergebnis erscheint, und zoomen Sie dann wieder heraus, damit der Zuschauer den Kontext sieht. Eine Hervorhebung (ein weicher Rahmen oder abgedunkelter Hintergrund) erfüllt denselben Zweck, ohne den Bildausschnitt zu bewegen – ideal für komplexe Dashboards, bei denen Zoomen den Kontext verdecken würde. Verwenden Sie pro Aktion entweder das eine oder das andere.
Schrittzähler
„Schritt 3 von 5“ in einer festen Ecke zeigt dem Zuschauer, wie viel noch vor ihm liegt. Behalten Sie Position und Stil bei und ändern Sie nur die Zahl. Bei weniger als 3 Schritten können Sie darauf verzichten.
Bauchbinden
In Produktvideos dienen Bauchbinden dazu, den Sprecher in einem Kamera-Bubble zu benennen oder einen Abschnitt zu kennzeichnen („Admin-Ansicht“). Achten Sie auf die Platzierung: Im unteren Bereich der meisten Web-Apps befinden sich Speichern-Leisten und Chat-Widgets.
Titelkarten
Verwenden Sie diese zwischen Kapiteln, nicht bei jedem Schritt. Ein 60-sekündiges Video benötigt eine Titelkarte am Anfang. Eine Titelkarte, die lange Lesezeit erfordert, ist nur ein Absatz, der sich als Grafik ausgibt.
Animierte Pfeile
Ein Pfeil ist besser als ein Zoom, wenn zwei Dinge auf dem Bildschirm zusammenhängen, etwa „dieser Schalter ändert jene Vorschau“. Lassen Sie ihn in etwa 0,3 Sekunden einzeichnen und dann anhalten. Ein hüpfender Pfeil lenkt so lange ab, wie er hüpft.
Datenzähler
Das Hochzählen auf „1.240 Tickets“ verleiht einer Statistik in einer Demo oder einem Launch-Clip Gewicht. In einer Anleitung ist dies selten angebracht. Animieren Sie schnell und halten Sie den Endwert, sonst bleibt dem Zuschauer nur die Bewegung in Erinnerung.
Übergänge
Verwenden Sie 1 Stil pro Video und nur bei Szenen- oder Themenwechseln. Zwischen zwei Schritten auf demselben Bildschirm ist ein einfacher Schnitt meist am besten. Vermeiden Sie Blitzeffekte: Das WCAG-Erfolgskriterium zu 3 Blitzen oder weniger existiert, da blitzende Inhalte Anfälle und Migräne auslösen können.
Regeln für konsistente animierte Overlays
Animierte Overlays wirken professionell, wenn sie wie ein System aufgebaut sind:
1. Ein Bewegungsstil. Gleiches Easing, gleiche Einblendrichtung, gleiche Dauer für jedes Callout. Wenn Callouts in Schritt 1 von links einschieben, tun sie das auch in Schritt 5. 2. Marken-Templates, einmal erstellt. Schriftarten, Farben, Logo-Animation und Titelkarten-Layout gehören in ein gespeichertes Template und sollten nicht pro Video neu erstellt werden. Jedes der unten genannten Tools unterstützt dies in irgendeiner Form. 3. Ein Sicherheitsbereich. Halten Sie Text von den Bildrändern und den gezeigten UI-Elementen fern. Markieren Sie den Sicherheitsbereich in Ihrem Template. 4. Grafiken folgen dem Skript. Schreiben Sie zuerst den Kommentar und markieren Sie dann das Wort, an dem die Grafik hängen soll. Kein Wort, keine Grafik.
Vorher und Nachher: Shot-Liste für eine 60-sekündige Anleitung
Eine 60-sekündige Anleitung zum Thema „Erste Rechnung versenden“ in einer typischen SaaS-Abrechnungs-App. „Vorher“ ist die Rohaufnahme mit Kommentar.
| Zeit | Vorher (Rohaufnahme) | Nachher (mit Motion Graphics) |
|---|---|---|
| 0:00–0:03 | Dashboard, Cursor bewegt sich ziellos | Titelkarte: „Erste Rechnung versenden“ mit Logo-Animation, 3 Sekunden |
| 0:03–0:10 | Sprecher erklärt das Ziel über dem Dashboard | Schrittzähler erscheint („Schritt 1 von 4“); Hervorhebung auf dem Tab „Rechnungen“, während der Sprecher ihn nennt |
| 0:10–0:18 | Klick auf Rechnungen, Seite lädt | Zoom auf die Schaltfläche „Neue Rechnung“ 0,5 Sekunden vor dem Klick; Callout „Neue Rechnung“ |
| 0:18–0:32 | Eingabe von Kunde, Positionen, Betrag | Schritt 2 von 4; Herauszoomen, um das gesamte Formular zu zeigen; Weichzeichner auf der echten Kunden-E-Mail |
| 0:32–0:40 | Scrollen zum Fälligkeitsdatum | Schritt 3 von 4; Pfeil vom Feld Fälligkeitsdatum zur Vorschau der Zahlungsbedingungen |
| 0:40–0:50 | Klick auf Senden, Bestätigungs-Toast | Schritt 4 von 4; Zoom auf den Toast; Callout „Rechnung gesendet“, 2,5 Sekunden gehalten |
| 0:50–0:57 | Sprecher erwähnt Erinnerungen | Slide-Übergang zum Bildschirm Erinnerungen; Hervorhebung auf dem Schalter |
| 0:57–1:00 | Video endet auf dem Dashboard | Endkarte mit Titel des nächsten Videos, gleiches Template wie am Anfang |
Das sind 16 grafische Ereignisse in 60 Sekunden. Es funktioniert, weil die Einblendungen versetzt sind und jede an einem Wort im Skript hängt. Der Weichzeichner dient dem Datenschutz und ist die eine Grafik, die Sie bei echten Kundendaten niemals weglassen sollten.
3 Wege, Videos Motion Graphics hinzuzufügen
1. Ein klassischer Editor: Premiere, After Effects oder DaVinci Resolve
Adobe Premiere mit After Effects. Motion Graphics-Templates (.mogrt-Dateien) werden in After Effects erstellt und in Premiere wiederverwendet. Laut Adobes Hilfeseite ziehen Sie ein Template aus dem Bedienfeld „Grafik-Templates“ auf eine Videospur und bearbeiten es dann im Tab „Bearbeiten“ des Bedienfelds „Eigenschaften“. Datenbasierte Templates füllen Balkendiagramme und Liniengrafiken mit Daten aus Tabellenkalkulationen – der sauberste Weg für präzise Datenzähler und Diagramme.
DaVinci Resolve. Die Fusion-Seite ist ein knotenbasierter Compositor innerhalb von Resolve mit über 200 Werkzeugen. Sie können in Fusion Bauchbinden, animierte Hintergründe und Übergänge erstellen, diese als Makros speichern und nur die Steuerelemente freigeben, die ein Editor bearbeiten soll. Diese erscheinen dann in der Effektbibliothek der Edit-Seite für jedes Projekt. Resolve ist ein kostenloser Download; Resolve Studio kostet 295 $.
Am besten geeignet für: Teams mit einem Motion Designer, der Vorlagen einmalig erstellt, und Editoren, die diese wiederverwenden. Kompromiss: Zooms und Callouts bei einer Bildschirmaufnahme müssen jedes Mal manuell per Keyframe gesetzt werden.
2. Ein vorlagenbasierter Editor: Canva oder CapCut
Canva ermöglicht es Ihnen, Seiten, Elemente und Text zu animieren über die Schaltfläche „Animieren“, mit Voreinstellungen für Langsam, Mittel oder Schnell oder exakten Ein- und Ausblenddauern. Mit „Element-Timing anzeigen“ legen Sie fest, wann jedes Element erscheint, und mit „Animation erstellen“ können Sie ein Element entlang eines Bewegungspfads ziehen. Marken-Kits speichern Logos, Farben und Schriftarten, damit Vorlagen markenkonform bleiben.
CapCut bietet eine Bibliothek mit Textvorlagen und Textanimationen, und auf dem Desktop können Sie Position, Skalierung, Drehung und Deckkraft per Keyframe steuern. So erstellen Sie einen manuellen Zoom oder ein gleitendes Callout.
Am besten geeignet für: Marketer, die bereits mit diesen Tools arbeiten und animierten Text über kurzen Clips benötigen. Kompromiss: Keines der Tools ist auf Bildschirmaufnahmen spezialisiert, daher sind Zooms, die Klicks folgen, Cursor-Bereinigung und Unschärfen zum Datenschutz manuelle Arbeit.
3. Clevera: Overlays auf einer Timeline oder ein Briefing in einfachen Worten
Clevera beginnt bei der Aufnahme. Für KI-erzählte Anleitungsvideos und Produktdemos glättet es den Cursor, hebt wichtige Interaktionen hervor und wendet einen intelligenten Zoom an, während es den Voiceover schreibt und synchronisiert. Die meiste Arbeit für Zoom und Hervorhebung aus der obigen Shot-Liste ist bereits erledigt, bevor Sie den Editor öffnen.
Im Timeline-Editor fügen Sie dann den Rest hinzu oder passen ihn an: Text-, Bild-, Unschärfe- und Highlighter-Overlays, Titelkarten, Intro-Karten, Logo-Enthüllungen, Zooms und Übergänge wie Zoom-Cross, Treppe, Jalousie, Auflösen, Soft Wipe und Slide. Titelkarten, Logo-Enthüllungen und Videostile werden als vorgefertigte oder benutzerdefinierte Vorlagen gespeichert, sodass das zweite Video wie das erste aussieht. Wenn Sie nur Ihre eigene Aufnahme mit Zooms, Overlays und Titelkarten gestalten möchten, verbraucht die Option „Styled (share-ready)“ keine KI-Credits. Sie ist daher in jedem Plan unbegrenzt verfügbar, einschließlich Free (in Free teilen Sie per Link oder Einbettung; MP4-Downloads sind in Starter und Pro enthalten).
Für Grafiken außerhalb dieser Liste verwenden Sie Beschreiben Sie, was Sie möchten im KI-Motion-Graphics-Generator. Sie schreiben ein freies Briefing, wie z. B. „Füge einen animierten Zähler von 0 bis 1.240 bei 0:45 hinzu und einen Pfeil vom Fälligkeitsdatum-Feld zur Vorschau der Bedingungen“, und Clevera erstellt animierte Grafiken über dem bestehenden Video. Die Overlay-Liste des Editors enthält keinen dedizierten Pfeil oder Zähler, daher ist dies der richtige Weg dafür.
Änderungen an Text, Hervorhebungen und Unschärfen in einem veröffentlichten Clevera-Video werden auf jedem gehosteten Link und jeder Einbettung aktualisiert, sodass ein umbenanntes Schaltflächen-Label nur einmal korrigiert werden muss. Neue UI erfordert weiterhin neues Videomaterial.
Am besten geeignet für: Produkt-, Support- und Marketing-Teams, die jede Woche Anleitungen ohne Editor erstellen. Kompromiss: Der KI-Rekorder erfasst nur Websites und Web-Apps, daher stammt Material von Desktop-Software aus der Desktop-App oder einem Upload. Lesen Sie den nächsten Abschnitt für Aufgaben, die das Tool nicht übernehmen sollte.
Was Clevera von sich aus hinzugefügt hat und was nicht
Im Oktober 2026 ließen wir den KI-Rekorder von Clevera eine kurze Aufgabe in einer Demo-To-Do-App erfassen, 0:58 an Rohmaterial, und verwandelten es in ein Anleitungsvideo. Etwa 50 Sekunden und 9 Credits später enthielt die Timeline bereits eine Intro-Karte, eine Logo-Enthüllung und automatische Zooms bei 1,5-facher und 1,8-facher Vergrößerung, gekürzt auf 0:40. Das sind die Titelkarten- und Zoom-Zeilen der Shot-Liste. Callouts, ein Schrittzähler und Pfeile waren nicht vorhanden; diese müssen Sie selbst hinzufügen.
Wir haben dann „Styled for sharing“ auf dieselbe Aufnahme angewendet, mit unserer Team-Vorlage anstelle der integrierten Standard-Vorlage. Es dauerte etwa 25 Sekunden und 0 Credits. Das Ergebnis lief 1:07, länger als die Quelle aufgrund der Intro-Karte, mit 2 automatischen Zooms bei 1,8-facher Vergrößerung und dem Editor, der auf dem Stil-Panel für Hintergrund, Polsterung, Ecken und Cursor geöffnet war. Die aufgezeichnete Seite selbst wirkte verblasst und kontrastarm; das Stil-Panel rahmt das Material ein, es korrigiert es nicht.
Die 1:07 lange „Styled for sharing“-Version derselben Aufnahme, unbearbeitet, 0 Credits.
Für den Briefing-Weg erstellte ein benutzerdefiniertes Briefing eine 1:00 lange animierte Infografik mit einem Ladebalken in etwa 7 bis 8 Minuten für 86 Credits. Die Zahlen stimmten, aber die im Briefing geschriebenen 15 Sekunden wurden ignoriert (die Länge wird im Format-Menü festgelegt) und die Quellzeile war zu klein für ein Telefon. Dieser Clip wurde von Grund auf neu erstellt. Wir haben Grafiken, die über eine bestehende Aufnahme gelegt werden, noch nicht getestet.
Die 1:00 lange animierte Infografik, die Clevera aus dem Briefing zurückgab, unbearbeitet.
Wann sich ein Motion Designer bezahlt macht
KI-Editoren und Vorlagen decken die Grafiken in diesem Leitfaden ab. Sie ersetzen keinen Motion Designer für:
- Ein Launch-Hero-Video oder einen Markenfilm, bei dem jeder Frame kunstvoll gestaltet ist und die Bewegung selbst die Botschaft ist.
- Getrackte Grafiken auf bewegtem Material, wie ein Label, das einem Telefon in einer handgeführten Aufnahme folgt.
- 3D, Charakteranimation oder benutzerdefinierte Illustrationen in Bewegung.
- Ihr Vorlagensystem. Eine Woche Arbeitszeit eines Designers, der Ihre Bauchbinden, Titelkarten und Logo-Enthüllungen in After Effects oder Fusion erstellt, zahlt sich für jedes Video aus, das Ihr Team danach erstellt, in jedem Tool, das Vorlagen akzeptiert.
Die übliche Aufteilung: ein Designer für das System und den Flaggschiff-Launch, ein KI-Tool oder Vorlagen-Editor für die wöchentlichen Anleitungen.
Beginnen Sie mit dem Zoom
Wenn Sie Ihrer nächsten Bildschirmaufnahme eine Sache hinzufügen, dann einen Zoom, der eine halbe Sekunde vor dem Klick landet. Er behebt die häufigste Beschwerde über Produktvideos: „Ich konnte nicht sehen, worauf Sie geklickt haben“. Jede andere Grafik in diesem Leitfaden baut auf dieser Gewohnheit auf, den Blick des Zuschauers dorthin zu lenken, wo die Erzählung hinweist.
