Sobald Ihre Aufnahme hochgeladen ist, öffnet sich der Step by step guide im Knowledge Base-Portal. Jeder Schritt wird automatisch basierend auf dem erfassten Workflow generiert, wobei der Schritttitel und die Beschreibung aus den aufgezeichneten Aktionen vorab ausgefüllt sind.
Jeder Schritt zeigt links den aufgenommenen Bildschirm und einen rechten Fensterbereich mit bearbeitbaren Optionen. Dieser Artikel behandelt alles, was Sie tun können, um Ihren Leitfaden vor der Veröffentlichung zu verfeinern und zu verbessern
Wann man jedes Bearbeitungswerkzeug verwenden sollte
Das Bearbeitungs-Toolkit bietet eine breite Palette an Funktionen. Zu wissen, wann man jedes einzelne verwenden sollte, hilft Ihnen, effizienter zu arbeiten.
Werkzeug | Am besten verwendet, wenn | Beispiel |
|---|---|---|
Blur | Ein Bildschirm enthält Passwörter, API-Schlüssel, personenbezogene Daten oder interne URLs | Das Ausblenden einer Kunden-E-Mail-Adresse, die während eines Onboarding-Walkthroughs im Admin-Panel sichtbar ist |
Im Rampenlicht | Ein Element auf einem besetzten Bildschirm muss hervorstechen. | Hervorheben eines kleinen Links, der in einer dichten Einstellungsseite versteckt ist |
Textüberlagerung | Du musst einen Schritt mit einem Label, einer Warnung oder einem Aufruf annotieren, der nicht in der Benutzeroberfläche ist | Das Hinzufügen von "Noch nicht auf Speichern klicken" in Rot über einem Button, den der Nutzer vorerst überspringen sollte |
Höhepunkt | Du möchtest die Aufmerksamkeit mit Farbe anziehen, ohne den Rest des Bildschirms zu dimmen | Ein gelbes Feld um das Feld zu zeichnen, das der Nutzer als Nächstes ausfüllen sollte |
Bildüberlagerung | Du möchtest zusammen mit dem Screenshot ein Diagramm, einen Symbolschlüssel oder ein Marken-Asset anzeigen | Hinzufügen einer nummerierten Legende zu einem komplexen Dashboard-Screenshot |
Ernte | Der aufgezeichnete Bildschirm enthält irrelevante Browser-Chrome oder Seitenleisten, die von der Aufgabe ablenken | Das Ausschneiden der Bookmarks-Leiste und der nicht zusammenhängenden Seitenleisten |
Zoomen Sie ein | Ein Hotspot oder Klickziel ist klein und leicht zu übersehen | Zoomen auf einen kleinen Schalter oben rechts auf dem Bildschirm |
Animate-Klick | Ein statischer Screenshot zeigt nicht, was passiert, wenn ein Button oder Link angeklickt wird | Das Dropdown-Menü wird angezeigt, nachdem der Nutzer auf einen Menüpunkt geklickt hat |
Inhalt der Bearbeitungsschritte
Verwenden Sie den rechten Bereich, um diese Elemente für jeden Schritt zu ändern:
Titel – Geben Sie den Schritttitel ein. Um einen Hyperlink hinzuzufügen, wählen Sie den Text aus und klicken Sie auf das Hyperlink-Symbol .
Beschreibung – Fügen Sie Anweisungen oder Kontext hinzu. Formatieren Sie mit Fett, Kursiv, Unterstreichung, geordneter Liste, ungeordneter Liste und Hyperlink.
Diabild – Klicken Sie auf Bild ersetzen , um den aufgenommenen Screenshot zu tauschen (maximal 10 MB; unterstützte Formate: JPG oder PNG; empfohlene Auflösung: 1920×892, mindestens 100×100).
Wählen Sie aus dem Original – Wählen Sie ein Bild aus dem aufgenommenen Video aus. Verwenden Sie Feinabstimmungs-Millisekunden für Präzision.
Meine Uploads – Klicke auf Hochladen, um eine Datei aus deinem lokalen Explorer auszuwählen.
Klicken Sie auf Einfügen , um sich zu bewerben.
Um einen neuen Schritt einzufügen, fahren Sie mit der Maus zwischen zwei bestehenden Schritten und klicken Sie auf das + -Symbol.
HINWEIS
Die in jedem Schritt verwendeten Bilder stammen aus deiner aufgenommenen Sitzung. Du kannst ein beliebiges Bild aus der Originalaufnahme auswählen, um einen neuen Schritt zu erstellen oder ein bestehendes Bild zu ersetzen.
Elemente hinzufügen
Diese Werkzeuge legen visuelle Verbesserungen direkt auf das Schrittbild.
Blur
Verstecke sensible oder private Informationen in einem Screenshot.
Klicken Sie auf "Blur " > hinzufügen.
Stelle sicher, dass der Schalter "Unschärfe anzeigen " aktiviert ist.
Geben Sie einen Namen für den Blur ein.
Wählen Sie den Schritt , auf den Sie es anwenden möchten. Jedes Unschärfeelement ist auf einen bestimmten Schritt zugeschnitten. Wiederholen Sie das bei Bedarf für andere Schritte.
Wähle eine Form: Kreis oder Rechteck.
Stellen Sie den Regler für Intensität (Opazität) ein.
Klicken Sie auf Anwenden.
Um eine Unschärfe zu entfernen, fähre mit der Maus darüber in der Liste – klicke auf Mehr () > Löschen. Klicke oben auf Hinzufügen , um weitere Unschärfeelemente hinzuzufügen.
HINWEIS
Du kannst mehrere Unschärfeeffekte zu einem einzigen Bild hinzufügen.
Bild
Überlagern Sie ein zusätzliches Bild auf einen Schritt.
Klicken Sie auf Bild > hinzufügen.
Im Dialogfeld "Meine Uploads" wählen Sie ein zuvor hochgeladenes Bild aus oder klicken Sie auf Hochladen , um Ihre lokalen Dateien zu durchsuchen. Vordefinierte Bild-Assets sind ebenfalls verfügbar.
Im Abschnitt Größe und Position wählen Sie:
Freiform – Größe und Position frei anpassen. Geben Sie einen genauen Wert im Winkelfeld ein oder verwenden Sie Drehen nach links () oder Drehen nach rechts () manuell.
Auf den Bildschirm anpassen – Das Bild füllt standardmäßig den Bildbereich des Schrittes aus.
Klicken Sie auf Anwenden.
Im Rampenlicht
Lenken Sie die Aufmerksamkeit auf einen bestimmten Bereich, indem Sie alles außerhalb dimmen.
Klicken Sie auf Spotlight > hinzufügen.
Gib einen Namen für das Rampenlicht ein.
Wählen Sie den Schritt , auf den Sie es anwenden möchten.
Wähle eine Form: Kreis oder Rechteck.
Klicken Sie auf Anwenden.
Zum Entfernen fahren Sie mit der Maus über den Scheinwerfer in der Liste – Mehr () > Löschen. Klicken Sie auf Hinzufügen Neu, um weitere Scheinwerfer hinzuzufügen.
HINWEIS
Alle Bereiche außerhalb des Scheinwerfers werden gedimmt. Derzeit kann man die Helligkeit des gedimmten Bereichs nicht anpassen.
Text
Füge benutzerdefinierte Textanmerkungen über das Schrittbild hinzu.
Klicke auf Text > Hinzufügen.
Geben Sie Ihren Text ein. Formatieren Sie mit Fett, Kursiv, Unterstreichung, geordneter/ungeordneter Liste oder Hyperlink.
Wählen Sie eine Schriftart und eine Schriftgröße.
Wähle eine Farbe aus der Palette.
Stelle die Rotation mit der Grad-Regelung ein.
Klicken Sie auf Anwenden.
Zum Bearbeiten klicken Sie auf das Symbol Bearbeiten (). Um zu löschen, klicken Sie auf Mehr () > Löschen. Klicken Sie auf Hinzufügen von Neu für zusätzliche Textelemente.
Höhepunkt
Markiere wichtige Bereiche im Schrittbild mit einer farbigen Überlagerung.
Klicken Sie auf Markierung > Hinzufügen.
Stellen Sie sicher, dass der Schalter für Hervorhebung anzeigen aktiviert ist.
Geben Sie einen Namen ein.
Wähle eine Form: Kreis oder Rechteck.
Wählen Sie eine Farbe aus der Liste oder klicken Sie auf +, um eine benutzerdefinierte Farbe zu verwenden.
Klicken Sie auf Anwenden.
Zum Entfernen fahren Sie mit der Maus über das Highlight → Mehr () > Löschen. Klicken Sie auf Neu hinzufügen für weitere Highlights.
Bildübergänge
Zoomeffekt
Wenden Sie einen Zoomeffekt an, um die Aufmerksamkeit auf Hotspots oder wichtige Bereiche im Schrittbild zu lenken.
Klicken Sie auf die +- Taste oben rechts im Bild, um heranzuzoomen.
Klicken Sie auf die − -Taste, um herauszuzoomen.
Nutzen Sie dies, um den Leser auf ein kleines oder leicht übersehenes Element zu lenken – ein Kontrollkästchen, einen Umschalter, einen Link, ohne den umgebenden Kontext auszuschneiden.
Animate-Klick
Statt eines statischen Bildes animieren Sie einen Schritt, indem Sie einen kurzen Videoclip um den aufgezeichneten Klick herum abspielen – nützlich, wenn das Ergebnis eines Klicks (ein Dropdown-Menü, ein sich erweiterndes Panel) für den Leser wichtig ist.
Wählen Sie den gewünschten Schritt aus.
Im rechten Fenster gehe zu Bildübergang.
Wähle Animate, klick.
Wählen Sie eine Dauer aus:
3 Sekunden – zeigt 1,5 Sekunden vor und nach dem Klick an. Am besten für schnelle, einfache Interaktionen.
5 Sekunden – ausgewogen; gut für die meisten Fälle, in denen eine kurze Animation nötig ist.
10 Sekunden – zeigt bis zu 5 Sekunden auf jeder Seite an; am besten für langsamere Übergänge wie Seitenladen oder animierte UI-Antworten. Die Dauer wird je nach verfügbarem Material angepasst.
Der Schritt spielt sich als Mini-Video ab, zentriert auf den Klickpunkt.
Bild bearbeiten
Ernte
Schneide das Schrittbild zu, um einen bestimmten Bereich zu fokussieren.
Klicken Sie auf Zuschneiden.
Wählen Sie ein Seitenverhältnis:
Original (320:141)
Gepflogenheit
Quadrat (1:1)
Landschaft (16:9)
Porträt (9:16)
Für Benutzerdefiniert zieht man den Ausschnittbereich auf das Bild. Der Abschnitt Ausschnitt zeigt die resultierende Breite, Höhe und das Seitenverhältnis.
Klicken Sie auf Umwerben , um zu speichern.
HINWEIS
Nach dem Zuschneiden wird nur der ausgewählte Bereich hervorgehoben und auf der Knowledge Base-Seite sichtbar.
Verwaltung zusätzlicher Elemente
Um alle Verbesserungen in einem Schritt zu überprüfen und zu verwalten:
Erweitern Sie den Abschnitt "Hinzugefügte Elemente " im rechten Fenster.
Mit der Maus über ein beliebiges Element:
Klicken Sie auf Bearbeiten (), um es zu aktualisieren.
Klicken Sie auf Löschen (), um es zu entfernen.
Fehlerbehebung von Bearbeitungsproblemen
Ein Unschärfe oder Spotlight, den ich angewendet habe, wird in der veröffentlichten Anleitung nicht angezeigt – überprüfe, ob der Schalter Unschärfe anzeigen oder Hervorhebung anzeigen für das Element aktiviert ist. Elemente sind standardmäßig versteckt, bis der Schalter aktiviert ist, sie bleiben als gespeicherte Konfigurationen in deinem Editor, werden aber erst auf der Knowledge Base-Seite gerendert, wenn sie aktiv sind.
Animate-Klick zeigt für einen Schritt "nicht verfügbar" an – Animate-Klick funktioniert nur für Schritte, deren Diabild direkt aus der Originalaufnahme stammt. Wenn du das Bild durch einen benutzerdefinierten Upload über Meine Uploads ersetzt hast, ist die Animationsquelle nicht mehr verfügbar. Entweder setze zum Originalframe mit Select from Original zurück oder nutze Zoom als Alternative.
Ich habe ein Schrittbild zugeschnitten, aber jetzt kann der Leser den umgebenden Kontext nicht mehr sehen – Zuschneiden ist pro Schritt permanent. Nach der Anwendung ist nur der zugeschnittene Bereich sichtbar. Wenn du den Kontext wiederherstellen musst, klicke erneut auf Zuschneiden und wähle Original als Seitenverhältnis, um zum vollständigen Bild zurückzuverkehren.
Textannotationen sehen im Editor gut aus, sind aber auf der Knowledge Base-Seite zu klein – Schriftgrößen, die auf einer großen Editor-Leinwand passend aussehen, können auf verschiedenen Bildschirmgrößen klein erscheinen. Verwenden Sie für die Hauptannotationen eine Schriftgröße von mindestens 16 bis 18 Pixel und schauen Sie die Anleitung auf der Knowledge Base-Seite vor, bevor Sie veröffentlichen, um die Lesbarkeit zu überprüfen.
Der Abschnitt "Hinzugefügte Elemente" ist leer, aber ich weiß, dass ich eine Unschärfe angewendet habe – Unschärfen, Spotlights und andere Elemente werden pro Schritt gespeichert. Stelle sicher, dass du im linken Panel den richtigen Schritt ausgewählt hast, Elemente eines Schrittes erscheinen nicht in der Liste der hinzugefügten Elemente eines anderen.
Nächste Schritte
Sobald Ihr Leitfaden ausgereift ist, können Sie veröffentlichen, übersetzen, klonen oder Zugriff verwalten. Siehe Schritt-für-Schritt-Anleitung verwalten für Übersetzung, Klonen, Entveröffentlichen und Einstellungen.