Hotspots

Ein Hotspot ist ein dediziertes interaktives Objekt, dem Sie eine Seiten- oder Objektinteraktion hinzufügen können.

Obwohl Hotspots sich wie andere Objekte verhalten, wenn es um das Verschieben, Skalieren, Gruppieren und Sperren geht, sind sie dazu gedacht, in einem interaktiven Prototyp unsichtbar zu sein. Dementsprechend funktionieren sie in den Modi Bearbeiten und Vorschau anders als andere Objekte:

• Im Bearbeitungsmodus erscheinen sie als durchscheinendes grünes Overlay, sodass Sie mit ihnen arbeiten und sehen können, wo sie angewendet wurden. Sie können sie aber auch ausblenden, damit sie Ihre laufende Arbeit nicht stören.
• Im Vorschau-Modus sind Hotspots aktiv und reagieren auf Benutzeraktionen (sogenannte „Auslöser"). Im Vorschau-Modus sind Hotspots standardmäßig unsichtbar – Sie können sie jedoch vorübergehend sichtbar machen, indem Sie die Shift-Taste gedrückt halten.

Der Vorteil der Verwendung eines Hotspots – anstatt eine Seiten- oder Objektinteraktion auf ein vorhandenes Objekt anzuwenden – besteht darin, dass Sie seine Größe und Form unabhängig von den Objekten auf der Seite anpassen können. Das bedeutet, dass Sie einem bestimmten Bereich einer Seite oder einer Gruppe von Objekten Interaktivität hinzufügen können.

Hier sind einige Anwendungsfälle für Hotspots:

• Mehrere Interaktionsbereiche auf einem größeren, einzelnen hochgeladenen Bild anwenden, z. B. einem fertigen Design
• Bestimmte Interaktionsbereiche für Schablonen aus mehreren Elementen, wie z. B. Menüs, definieren

Hotspots hinzufügen

Sie können einen Hotspot entweder an der Position Ihres Cursors oder über einem bestimmten Objekt hinzufügen. Oder Sie können den Hotspot selbst mit dem Quick Draw-Toolkit zeichnen.

Genau wie alle anderen Objekte – Schablonen, Bilder, Symbole und Vorlagen – sind Hotspots im Gliederungs-Panel aufgelistet. Wenn Hotspots zur Seite hinzugefügt werden, erscheinen sie ganz oben im Gliederungsbaum. Standardmäßig werden sie nach Nummer benannt, entsprechend der Reihenfolge, in der sie der Seite hinzugefügt wurden. Um den Namen eines Hotspots zu ändern, doppelklicken Sie einfach auf seinen aktuellen Titel im Gliederungsbaum.

Einen Hotspot zur Seite hinzufügen

So fügen Sie einen Hotspot an der Position Ihres Cursors hinzu:

1. Ohne ausgewähltes Objekt rechtsklicken Sie auf die Seite und klicken Sie auf Hotspot hinzufügen

   oder

   Klicken Sie auf die Schaltfläche Hotspot hinzufügen im Interaktions-Panel

So erstellen Sie einen Hotspot über einem bestimmten Objekt:

1. Rechtsklicken Sie auf die Seite und klicken Sie auf Hotspot hinzufügen

   oder

   Klicken Sie auf die Schaltfläche Hotspot hinzufügen im Interaktions-Panel

2. Ein Hotspot erscheint über dem Rahmen des Objekts und passt sich dessen Abmessungen an

Einen Hotspot auf der Seite zeichnen

So zeichnen Sie einen Hotspot aus dem Quick Draw-Toolkit oder per Tastaturkürzel:

1. Klicken Sie auf die Hotspot-Schaltfläche im Dropdown oder drücken Sie die H-Taste.
2. Klicken Sie und ziehen Sie den Fadenkreuz-Cursor, um einen oder mehrere Hotspots zu erstellen.
3. Fügen Sie Interaktionen über das Interaktions-Panel hinzu

Klebeverhalten für Hotspots

Klebende Hotspots sind sehr nützlich, wenn Sie einen Hotspot zu einem Element innerhalb einer Gruppe von Objekten oder zu einem bestimmten Bereich innerhalb eines einzelnen Objekts hinzufügen. Sie könnten dies beispielsweise tun, um einen anklickbaren Punkt oder eine Schaltfläche innerhalb dieses größeren Bereichs zu erstellen. Wenn Sie das Design dann neu anordnen, bewegt sich der Hotspot mit.

Wenn der Hotspot jedoch genau die gleiche Größe wie ein Objekt oder eine Gruppe hat, müssen Sie den Hotspot zur Seite schieben, um das Objekt greifen und verschieben zu können. In diesem Fall ist es daher besser, eine Objektinteraktion anstelle eines Hotspots anzuwenden.

Standardmäßig ist das Klebeverhalten für alle Hotspots aktiviert, aber Sie können es im Format-Panel deaktivieren.

So schalten Sie das Klebeverhalten eines Hotspots ein oder aus:

1. Wählen Sie einen Hotspot aus
2. Gehen Sie zur Rechten Seitenleiste und klicken Sie auf den Format-Tab, um das Format-Panel zu öffnen
3. Navigieren Sie zum Abschnitt Klebeverhalten.
4. Klicken Sie auf die Schaltfläche Klebend oder Normal, um das entsprechende Verhalten anzuwenden
5. Ziehen Sie den Hotspot über das Objekt oder die Gruppe, an der er kleben soll

Hotspots formatieren

Nachdem Sie einen Hotspot erstellt haben, können Sie seine Größe und Position anpassen oder seine Ecken abrunden. Sie können Hotspots auch ausblenden, indem Sie sie unsichtbar machen.

Größe

Verwenden Sie auf der Seite die Größenänderungs-Handles, um die Größe des Hotspots zu ändern.

Verwenden Sie im Format-Panel die Eingaben für Breite & Höhe für präzise Werte und Feinabstimmung, und verwenden Sie die Pfeiltasten auf der Tastatur, wenn Sie diese Werte schrittweise ändern möchten.

Sperren Sie die Proportionen eines Hotspots mit der Schaltfläche Seitenverhältnis sperren. Nachdem ein Hotspot gesperrt wurde, müssen Sie das Seitenverhältnis entsperren, wenn Sie seine Größe auf der horizontalen oder vertikalen Achse ändern möchten.

Position

Wählen Sie auf der Seite einen Hotspot aus und ziehen Sie ihn an die gewünschte Position.

Legen Sie im Format-Panel die Position des Hotspots fest, indem Sie die genauen Koordinaten in die Eingabefelder eingeben. Die Position Ihres Hotspots wird als Pixelabstand von den linken und oberen Rändern gemessen. Sie können die Pfeiltasten Ihrer Tastatur verwenden, um diese Werte schrittweise zu ändern.

Abgerundete Ecken

Sie können die Ecken eines Hotspots abrunden, damit er Ihren Grafiken oder Schaltflächen entspricht:

So runden Sie die Ecken eines Hotspots ab:

1. Wählen Sie einen Hotspot aus
2. Gehen Sie zur Rechten Seitenleiste und klicken Sie auf den Format-Tab, um das Format-Panel zu öffnen
3. Navigieren Sie zum Abschnitt Abgerundete Ecken.
4. Standardmäßig gilt die Pixelabrundung für alle Ecken, aber Sie können auf die Schaltfläche Ecken trennen klicken, um jede einzeln anzupassen.
5. Die Option Radius skalieren passt die Pixelgröße an, um die Proportionen der Abrundung beizubehalten, wenn Sie ein Objekt vergrößern oder verkleinern.

Sichtbarkeit

Im Bearbeitungsmodus sind alle Hotspots auf einer Seite mit einem durchscheinenden grünen Overlay sichtbar.

Wenn Sie alle Hotspots unsichtbar machen möchten, während Sie am Projekt arbeiten:

1. Klicken Sie auf den Interaktions-Tab, um das Interaktions-Panel zu öffnen
2. Gehen Sie zum Abschnitt Optionen und deaktivieren Sie Hotspots anzeigen

Interaktionen zu Hotspots hinzufügen

Jede Interaktion besteht aus drei Teilen: einem Auslöser, einer Aktion und einem Ziel.

• Ein Auslöser ist das Ereignis, das eine Interaktion in Gang setzt.
• Eine Aktion ist eine Anweisung, die ausgeführt wird, nachdem ein Auslöser aktiviert wurde.
• Ein Ziel ist das endgültige Ergebnis, das am Ende einer Interaktion sichtbar ist.

Der Prozess, einem Hotspot eine Interaktion hinzuzufügen, ist genau derselbe wie das Hinzufügen einer Interaktion zu einem anderen Objekt. In diesem Fall ist das „Objekt" jedoch ein unsichtbarer Hotspot, der einen interaktiven Bereich auf der Seite repräsentiert.

Sie können einem Hotspot entweder Seiteninteraktionen oder Objektinteraktionen hinzufügen.

Lesen Sie unseren Artikel zu Seiteninteraktionen und den Artikel zu Objektinteraktionen für weitere Informationen zu diesen Interaktionen sowie detaillierte Anweisungen zur Anwendung auf alle Objekte, einschließlich Hotspots.

Wenn Sie jedoch sofort loslegen möchten, finden Sie hier einige kurze Anweisungen:

So fügen Sie einem Hotspot eine Interaktion hinzu:

1. Wählen Sie den Hotspot aus, dem Sie die Interaktion hinzufügen möchten
2. Klicken Sie auf den Interaktions-Tab, um das Panel zu öffnen
3. Wählen Sie einen Auslöser aus dem oberen Dropdown
4. Wählen Sie im zweiten Dropdown eine Aktion aus der Liste Seiteninteraktion oder Objektinteraktion
5. Legen Sie ein Ziel fest, indem Sie das Dropdown oder die Fadenkreuz-Schaltfläche verwenden, um ein Objekt oder eine Seite als Endpunkt der Interaktion auszuwählen.
6. Klicken Sie auf Fertig, um die Interaktion anzuwenden

Interaktionen bearbeiten, duplizieren oder löschen

Wenn Sie einem Objekt eine Interaktion zuweisen, erscheint sie sofort in der Interaktionsliste oben im Interaktions-Panel. Wenn Sie demselben Objekt weitere Interaktionen hinzufügen, sehen Sie, dass diese dort ebenfalls erscheinen. Sie können jede Interaktion aus der Liste einfach bearbeiten oder löschen – oder eine Interaktion für die schnelle Wiederverwendung duplizieren.

Interaktion bearbeiten

Das Bearbeiten einer Interaktion ist nützlich, wenn Sie Teile einer bereits vorhandenen Interaktion ändern möchten. Mit der Bearbeitungsfunktion können Sie den Auslöser, die Aktion oder das Ziel einzeln aktualisieren – ohne die anderen Teile der Interaktion zu beeinflussen.

So bearbeiten Sie eine Interaktion:

1. Wählen Sie das Objekt oder die Gruppe von Objekten aus, deren Interaktion Sie bearbeiten möchten
2. Klicken Sie auf den Interaktions-Tab, um das Interaktions-Panel zu öffnen
3. Suchen Sie oben im Panel die Interaktion, die Sie bearbeiten möchten
4. Klicken Sie auf die Schaltfläche Bearbeiten, um den Bearbeitungsmodus zu aktivieren
5. Ändern Sie die Interaktion und klicken Sie auf Fertig, um Ihre Änderungen zu speichern
6. Ihre aktualisierte Interaktion blinkt einige Sekunden lang grün in der Liste

Interaktion duplizieren

Oft möchten Sie möglicherweise verschiedene Variationen einer Interaktion auf dasselbe Objekt anwenden. Mit der Duplizierungsfunktion können Sie eine vorhandene Interaktion duplizieren und dann deren Auslöser, Aktion und Ziel an Ihre Bedürfnisse anpassen.

So duplizieren Sie eine Interaktion:

1. Wählen Sie das Objekt oder die Gruppe von Objekten aus, von denen Sie eine Interaktion duplizieren möchten
2. Klicken Sie auf den Interaktions-Tab, um das Interaktions-Panel zu öffnen
3. Suchen Sie oben im Panel die Interaktion, die Sie duplizieren möchten
4. Klicken Sie auf das Symbol Duplizieren, und eine identische Interaktion erscheint in der Interaktionsliste oben im Panel
5. Um die neue Interaktion zu bearbeiten, klicken Sie auf die Schaltfläche Bearbeiten und folgen Sie den Schritten aus dem Abschnitt Interaktionen bearbeiten dieses Artikels

Interaktion löschen

So löschen Sie eine Interaktion:

1. Wählen Sie das Objekt oder die Gruppe von Objekten aus, von denen Sie eine Interaktion löschen möchten
2. Klicken Sie auf den Interaktions-Tab, um das Interaktions-Panel zu öffnen
3. Suchen Sie oben im Panel die Interaktion, die Sie löschen möchten
4. Klicken Sie auf die Schaltfläche Löschen