Wählen Sie im Designmodus im Text-Objekt den Text aus, den Sie verknüpfen wollen.
Zuletzt aktualisiert am
21. März 2022
Hier erfahren Sie, wie Sie aus Adobe XD Prototypen auf externe Webseiten verlinken können.
Jeder Text oder jede Komponente in Ihrem Design kann einen Link zu einer externen Webseite oder einer E-Mail-Adresse enthalten. Nachdem Sie einen Hyperlink erstellt haben, können Sie ihn in der Vorschau anzeigen und die Design-Spezifikationen für Stakeholder freigeben.
Text-Hyperlinks erstellen
Um Text oder eine Komponente mit einer Webseite oder einer E-Mail-Adresse zu verknüpfen, führen Sie die folgenden Schritte aus:
Fügen Sie im Eigenschafteninspektor in das Feld URL hier einfügen im Abschnitt Text folgende Einträge ein:
Link zu einer sicheren Webseite
Um einen Link zu einer sicheren Webseite (https) zu erstellen, geben Sie die URL der Webseite ein. Beispiel: https://www.adobe.com.
Link zu einer E-Mail Adresse
Um eine Verknüpfung zu einer E-Mail-Adresse herzustellen, geben Sie mailto: gefolgt von der E-Mail-Adresse des Empfängers ein. Beispiel: mailto:john@xyz.com.
Sobald Sie einen Text-Hyperlink im Designmodus definiert haben:
- Auf der Leinwand wird der verlinkte Text standardmäßig unterstrichen.
- Wenn nur ein Teil des Textes mit einem Hyperlink versehen ist, sehen Sie bei der Auswahl des Textobjekts im Canvas einen Bindestrich (-) im Feld URL hier einfügen.
- Wenn Sie im Prototyp-Modus ein Textobjekt auswählen, das Hyperlinks enthält, werden die Hyperlinks im Eigenschafteninspektor angezeigt.
- Sie können einen Text-Hyperlink im Design- oder Prototyp-Modus bearbeiten.
Wenn Sie den Link zu den Design-Spezifikationen veröffentlichen und freigeben, können die Beteiligten den Hyperlink einsehen.
Objekt- oder Komponenten-Hyperlink erstellen
Um ein Objekt oder eine Komponente mit einer Webseite oder einer E-Mail-Adresse zu verknüpfen, führen Sie die folgenden Schritte aus:
Link zu einer sicheren Webseite
Um einen Link zu einer sicheren Webseite (https) zu erstellen, geben Sie die URL der Webseite ein. Beispiel: https://www.adobe.com.
Link zu einer E-Mail Adresse
Um eine Verknüpfung zu einer E-Mail-Adresse herzustellen, geben Sie mailto: gefolgt von der E-Mail-Adresse des Empfängers ein. Beispiel: mailto:john@xyz.com.
Um eine Vorschau des Hyperlinks anzuzeigen, klicken Sie auf Desktop-Vorschau.
Wenn Sie auf einen Hyperlink klicken, wird dieser immer in einer separaten Browser-Registerkarte geöffnet.
Wenn Sie den Link zu den Design-Spezifikationen veröffentlichen und freigeben, können die Beteiligten den Hyperlink einsehen.
Hyperlink-Text in den Modi Design und Prototyp
Zusätzlich zur Definition eines Hyperlinks für Text im Designmodus können Sie auch einen Hyperlink für sein Textobjekt im Prototypmodus definieren. Der im Designmodus definierte Hyperlink hat Vorrang vor dem Hyperlink im Prototypmodus. In Desktop-Vorschau oder Prototyp-Link:
- Wenn Sie auf einen Teil des Textes klicken, für den keine Hyperlinks definiert sind, wird der im Prototyp-Modus definierte Hyperlink geöffnet.
- Wenn Sie den gesamten Text innerhalb eines Textobjekts im Designmodus mit einem Hyperlink versehen und das Textobjekt im Prototypmodus mit dem Auslöser Antippen verlinken, funktioniert der Hyperlink im Prototypmodus nicht.
XD-App:
- Wenn Sie eine URL mit einem anderen Protokoll als https oder mailto oder ohne Protokoll hinzufügen oder die URL eine ungültige Domain hat, erhalten Sie eine Warnung. Korrigieren Sie die URL.
Desktop-Vorschau und Prototyp-Link:
- Wenn Sie auf einen Hyperlink klicken, der ein anderes Protokoll als https oder mailto hat, oder kein Protokoll hat, oder die URL eine ungültige Domain hat, wird die URL nicht geöffnet. Sie erhalten eine Fehlermeldung am unteren Rand des Bildschirms.
- Wenn Sie auf einen Hyperlink mit einer gültigen Domain klicken, führt XD eine Sicherheitsüberprüfung der verlinkten Website durch. Wenn die Sicherheitsüberprüfung fehlschlägt, erhalten Sie eine Sicherheitswarnung. Sie können wählen, ob Sie fortfahren oder die URL verlassen möchten.
Weitere Informationen
Sehen Sie sich dieses 3-minütige Video an, um mehr über die Arbeit mit Hyperlinks in XD zu erfahren.
Verwandte Ressourcen
Noch Fragen oder Ideen?
Haben Sie eine Frage oder eine Idee, die Sie uns mitteilen möchten? Werden Sie Teil der Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen!
Entwerfen von UX-Prototypen mit Adobe XD
Erstelle interaktive Modelle für Websites und mobile Apps.
