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.
Zuletzt aktualisiert am
21. Februar 2023
- Adobe XD Benutzerhandbuch
- Einführung
- Neue Funktionen in Adobe XD
- Häufige Fragen
- Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
- Farbmanagement
- Systemanforderungen
- Arbeitsbereich – Grundlagen
- Ändern der in Adobe XD angezeigten Sprache
- Zugriff auf UI-Design-Kits
- Barrierefreiheit in Adobe XD
- Tastaturbefehle
- Tipps und Tricks
- Design erstellen
- Zeichenflächen, Hilfslinien und Ebenen
- Formen, Objekte und Pfade
- Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
- Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
- Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
- Festlegen von Strichen, Flächen und Schlagschatten für Objekte
- Erstellen sich wiederholender Elemente
- Perspektivisches Design mit 3D-Transformationen
- Bearbeiten von Objekten mithilfe boolescher Operationen
- Text und Schriften
- Komponenten und Zustände
- Maskierung und Effekte
- Layout
- Videos und Lottie-Animationen
- Prototypen erstellen
- Erstellen interaktiver Prototypen
- Animieren von Prototypen
- Für Auto-Animate unterstützte Objekteigenschaften
- Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
- Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
- Erstellen zeitgesteuerter Übergänge
- Hinzufügen von Overlays
- Sprachprototypen erstellen
- Erstellen von Ankerlinks
- Erstellen von Hyperlinks
- Testen von Designs und Prototypen
- Freigeben, Exportieren und Review
- Ausgewählte Zeichenflächen freigeben
- Freigeben von Designs und Prototypen
- Zugriffsberechtigungen für Links festlegen
- Arbeiten mit Prototypen
- Prototyp-Review
- Arbeiten mit Design-Spezifikationen
- Freigeben von Design-Spezifikationen
- Auswerten von Design-Spezifikationen
- Navigation in Design-Spezifikationen
- Reviews und Kommentarfunktion zu Design-Spezifikationen
- Exportieren von Design-Assets
- Exportieren und Herunterladen von Assets aus Design-Spezifikationen
- Gruppenfreigabe für Unternehmen
- Sichern oder übertragen von XD Elementen
- Design-Systeme
- Cloud-Dokumente
- Integrationen und Plug-ins
- Arbeiten mit externen Elementen
- Arbeiten mit Design-Elementen aus Photoshop
- Kopieren und Einfügen von Elementen aus Photoshop
- Importieren oder Öffnen von Photoshop-Designs
- Arbeiten mit Illustrator-Elementen in Adobe XD
- Öffnen oder Importieren von Illustrator-Designs
- Vektordateien aus Illustrator nach XD kopieren
- Plug-ins für Adobe XD
- Erstellen und Verwalten von Plug-ins
- Jira-Integration für Adobe XD
- Slack-Plug-in für XD
- Zoom-Plug-in für XD
- Designs von XD aus auf Behance freigeben
- XD für iOS und Android
- Fehlerbehebung
- Bekannte und behobene Probleme
- Installation und Updates
- Absturz beim Programmstart
- Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
- XD wird beendet, wenn Sie sich von Creative Cloud abmelden
- Problem mit dem Abonnementstatus unter Windows
- Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
- Generierung von Absturzbildern auf Windows
- Sammlung und Freigabe von Absturzprotokollen
- Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
- Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
- Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
- Probleme mit Arbeitsabläufen für die Veröffentlichung
- Veröffentlichte Links werden in Browsern nicht angezeigt
- Prototypen werden in Browsern nicht korrekt dargestellt
- Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
- Bibliotheken können nicht veröffentlicht werden
- Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
Hier erfahren Sie, wie Sie Ankerlinks erstellen, um die Navigation innerhalb einer Zeichenfläche zu verbessern.
Adobe XD bietet Ihnen die Möglichkeit, beim Entwickeln 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.
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:
-
-
Ziehen Sie die Prototypverdrahtung auf der Zeichenfläche nach unten bis zu dem Punkt, zu dem der Link führen soll.
-
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.
A. Wählen Sie den Trigger-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
-
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.
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?
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.