Erstellen von Ankerlinks in Adobe XD

Hier erfahren Sie, wie Sie Ankerlinks erstellen, um die Navigation innerhalb einer Zeichenfläche zu verbessern.

Adobe XD bietet Ihnen die Möglichkeit, beim Erstellen von Prototypen Ankerlinks zu erstellen, um so den Bildlauf zu bestimmten Abschnitten auf einer Zeichenfläche zu vereinfachen. Ankerlinks erlauben eine schnellere Navigation und verbessern die Bedienung bei Designs mit einer langen Seite oder einem langen Textartikel.

Ankerlinks
Verbesserte Navigation innerhalb einer Zeichenfläche

Möchten Sie einen Bildlauf simulieren, indem Sie schnell zu bestimmten Abschnitten auf einer Zeichenfläche navigieren? Führen Sie dazu die folgenden Schritte aus:

  1. Wechseln Sie in den Prototypmodus, indem Sie auf Prototyp klicken. Wählen Sie auf der Zeichenfläche das Objekt aus, für das Sie einen Ankerlink definieren wollen.

  2. Ziehen Sie die Prototypverdrahtung auf der Zeichenfläche nach unten bis zu dem Punkt, zu dem der Link führen soll.

  3. Klicken Sie auf die Prototypverdrahtung, um das Fenster Interaktion anzuzeigen, das im Eigenschafteninspektor erscheint und die folgenden Optionen enthält:

    • Trigger: Wählen Sie die Option Antippen aus.
    • Aktion: Wählen Sie die Option Bildlauf zu aus. Möchten Sie einem Trigger mehrere Aktionen zuweisen? Dann finden Sie weitere Informationen in diesem Artikel.
    • Ziel: Wählen Sie die Zielebene aus.
    • Y-Versatz: Geben Sie einen Wert für den Y-Versatz ein, der die relative Position zur Oberkante des verdrahteten Objekts festlegt. Ziehen Sie den Griff für den Y-Versatz auf der Zeichenfläche nach links. Der Wert für den Y-Versatz ändert sich entsprechend. Bei einer Position über dem verdrahteten Objekt ist der Wert für den Versatz negativ, darunter positiv.
    • Easing: Wählen Sie eine Option aus, um Easing-Effekte zu simulieren. Wählen Sie zum Beispiel Ease Out, damit Ihre Animation langsam aus dem Prototyp ausgeblendet wird.
    • Dauer: Geben Sie die Dauer an. Der Übergang zwischen zwei Zeichenflächen kann maximal fünf Sekunden dauern.
    Ankerlinks

    A. Wählen Sie den Tripper-Typ aus B. Aktionstyp auf „Bildlauf zu“ festlegen C. Zielzeichenfläche festlegen D. Wert für Y-Versatz eingeben E. Easing-Effekte auswählen F. Dauer eingeben 

  4. Um den Bildlaufeffekt zu testen, klicken Sie auf 

Weitere Informationen

„Verwenden Sie Ankerlinks, um eine Landingpage für ein Tierbuch mit Navigation zurück zum Anfang zu erstellen.“ Howard Pinksy, Senior XD Evangelist, Adobe.

Im folgenden Video erfahren Sie, wie’s geht. 

Dauer: 3 Minuten

Sie wissen nun, wie Sie Ankerlinks erstellen können. Laden Sie also gleich das Beispiel-UI-Kit herunter, das mehrere Beispiele für Webdesigns mit einer Seite enthält, und probieren Sie es selbst aus.

Datei herunterladen

Wie geht’s weiter?

Sie haben gelernt, wie Sie Navigationslinks in Ihr Design einfügen. Als Nächstes zeigen wir Ihnen, wie Sie zu Ihrem Design mehrere Interaktionen mit Sprachbefehlen und Sprachwiedergabe hinzufügen.

Noch Fragen oder Ideen?

Fragen Sie die Community

Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.

Adobe-Logo

Bei Ihrem Konto anmelden