Das Spotlight-Element ermöglicht es Ihnen, den Betrachter auf einen bestimmten Bereich eines Schrittes zu lenken, indem Sie alles außerhalb des definierten Spotlight-Bereichs dimmen. Alle Bereiche außerhalb des Spotlight-Bereichs werden gedimmt. Derzeit kann die Helligkeit des gedimmten Bereichs nicht angepasst werden.
Spotlight für reale Szenarien
| Szenario | Empfohlene Konfiguration |
|---|---|
| Einen Nutzer anleiten, in einer Produktdemo auf einen bestimmten Button zu klicken | Rechteckige Form, so dimensioniert, dass sie den Knopf bedeckt |
| Hervorheben eines Symbols oder Statusindikators | Kreisform, entsprechend dem Symbol angepasst |
| Aufmerksamkeit auf ein Navigationsmenü oder einen Element in der Seitenleiste lenken | Rechteckige Form, die den Menübereich abdeckt |
| Fokussierung auf ein Formularfeld während eines Onboarding-Walkthroughs | Rechteckige Form, ausgerichtet auf den Eingabebereich |
Hinzufügen eines Spotlight-Elements
Fügen Sie Spotlight zu einer Schritt-für-Schritt-Anleitung hinzu
- Navigiere zu dem Schritt, zu dem du ein Spotlight hinzufügen möchtest.
- Im rechten Fensterfeld scrollen Sie zum Abschnitt Elemente hinzufügen .
- Klicken Sie auf Spotlight. Wenn bereits ein oder mehrere Spotlight-Elemente hinzugefügt wurden, klicken Sie auf Hinzufügen Neu, um ein weiteres einzufügen.
- Verwenden Sie das Augensymbol oben rechts im Spotlight-Panel, um die Sichtbarkeit des Spotlights für den Endnutzer umzuschalten. Versteckte Spotlights sind im veröffentlichten Flo nicht sichtbar, können aber jederzeit wieder sichtbar gemacht werden.
- Aktiviere den Schalter "Andere Elemente ausblenden ", um alle anderen Elemente im aktuellen Schritt vorübergehend auszublenden, während du den Spotlight konfigurierst. Andere Elemente sind vorübergehend ausgeblendet und werden nicht gelöscht.
- Im Namensfeld geben Sie ein beschreibendes Label für das Spotlight-Element ein.
- Wählen Sie unter Form eine Form aus dem Dropdown-Menü:
- Rechteck – am besten geeignet, um Buttons, Formularfelder, Panels oder horizontale UI-Bereiche hervorzuheben.
- Kreis – geeignet für Symbole, Avatare oder kreisförmige UI-Komponenten.
- Klicken Sie auf Anwenden , um das Spotlight-Element zu speichern.
Spotlight-Erklärungsvideo / interaktives Video hinzufügen
- Navigiere zu dem Schritt, zu dem du ein Spotlight hinzufügen möchtest.
- Im rechten Fensterfeld scrollen Sie zum Abschnitt Elemente hinzufügen .
- Klicken Sie auf Spotlight. Wenn bereits ein oder mehrere Spotlight-Elemente hinzugefügt wurden, klicken Sie auf Hinzufügen Neu, um ein weiteres einzufügen.
- Verwenden Sie das Augensymbol oben rechts im Spotlight-Panel, um die Sichtbarkeit des Spotlights für den Endnutzer umzuschalten. Versteckte Spotlights sind im veröffentlichten Flo nicht sichtbar, können aber jederzeit wieder sichtbar gemacht werden.
- Aktiviere den Schalter "Andere Elemente ausblenden ", um alle anderen Elemente im aktuellen Schritt vorübergehend auszublenden, während du den Spotlight konfigurierst. Andere Elemente sind vorübergehend ausgeblendet und werden nicht gelöscht.
- Im Namensfeld geben Sie eine beschreibende Bezeichnung für das Spotlight-Element ein (z. B.
Spotlight - Submit Button,Spotlight - Navigation Menu). - Im Startzeit-Feld geben Sie den Zeitstempel ein, bei dem das Scheinwerferlicht erscheinen sollte.
- Im Feld "Endzeit" geben Sie den Zeitstempel ein, bei dem das Scheinwerferlicht verschwinden sollte.
- Um einen exakten Frame auszuwählen, verwenden Sie die Option Select exact Frame (15 fps). Verwenden Sie die Pfeiltasten, um Bild für Bild zu navigieren, oder geben Sie direkt eine Frame-Nummer ein. Klicken Sie auf Auswählen zum Bestätigen oder auf Abbrechen , um zu verwerfen.
- Wählen Sie unter Form eine Form aus dem Dropdown-Menü:
- Rechteck – am besten geeignet, um Buttons, Formularfelder, Panels oder horizontale UI-Bereiche hervorzuheben.
- Kreis – geeignet für Symbole, Avatare oder kreisförmige UI-Komponenten.
- Klicken Sie auf Anwenden , um das Spotlight-Element zu speichern.
Verwaltung von Spotlight-Elementen
Nach dem Hinzufügen werden die Spotlight-Elemente im Spotlight-Panel aufgelistet, wobei jedes den Namen des Spotlights und den angewandten Schritt anzeigt.
- Fügen Sie einen weiteren Spotlight hinzu – Klicken Sie oben im Panel auf Hinzufügen , um ein zusätzliches Spotlight-Element zu konfigurieren.
- Spotlight bearbeiten – Klicken Sie auf einen beliebigen Spotlight in der Liste, um das Konfigurationsfeld zu öffnen, in dem Name, Schritt und Form geändert werden können. Klicken Sie auf Anwenden , um Änderungen zu speichern, auf Abbrechen , um zum Spotlight-Bereich zurückzukehren, oder auf das Löschen-Icon , um es zu löschen.
- Einen Spotlight löschen – Fahre mit der Maus über einen Spotlight in der Liste, um das Drei-Punkte-Menü anzuzeigen. Klicken Sie darauf und wählen Sie Löschen , um das Spotlight-Element dauerhaft zu entfernen.
Best Practices
- Verwenden Sie beschreibende Namen – Beschriften Sie jeden Scheinwerfer deutlich, damit er leichter zu erkennen und zu verwalten ist, besonders wenn mehrere Scheinwerfer über verschiedene Schritte verteilt sind.
- Verstecken statt löschen – Deaktiviere vorübergehend Spotlights, die nicht benötigt werden, anstatt sie zu löschen. Dadurch bleibt die Konfiguration für die zukünftige Nutzung erhalten.
- Nach dem Auftragen neu dimensionieren und neu positionieren – Stellen Sie sicher, dass der Scheinwerfer den vorgesehenen Bereich auf der Leinwand genau abdeckt.
- Verwenden Sie Spotlights sparsam – Vermeiden Sie es, Spotlights über zu viele aufeinanderfolgende Schritte anzubringen, um ihre Wirksamkeit zu erhalten.
- Vorschau nach Anwendung – Überprüfen Sie, ob der gedimmte Bereich keine weiteren wichtigen Inhalte auf dem Bildschirm verdeckt.