Erstellen Sie Prototypen mit Adobe XD

Erstellen Sie Prototypen mit Adobe XD
(Bildnachweis: Zukunft)

Im modernen Web- und App-Design gibt es oft Zeiten, in denen die Interaktion keine ganz neue Seite oder keinen neuen Bildschirm öffnet. Der moderne Ansatz zum Erstellen interaktiver Inhalte erfordert Übergänge zwischen Elementen der Designoberfläche, sodass der Benutzer von der Erfahrung des Änderns von Inhalten überrascht und beeindruckt ist. Dies alles geschieht auf demselben Bildschirm oder derselben Seite ohne Aktualisierung. Das Entwerfen und Verfeinern dieser Art von Interaktionen kann einige Zeit in Anspruch nehmen. Es lohnt sich jedoch, dies zu tun, bevor Sie Ihren Code schreiben.

Dies ist, was Adobe XD in den letzten Monaten der Entwicklung richtig gemacht hat. Erstellen Sie Inhalte in einem Status auf einem Bildschirm, verschieben Sie diesen Inhalt in den neuen Status auf dem neuen Bildschirm und wählen Sie einfach die Option 'Automatisch animieren' für den Übergang. Der gesamte Inhalt, der auf beiden Bildschirmen gleich ist, wird automatisch von einer Position zur anderen animiert. Wenn Sie nicht möchten, dass der gesamte Inhalt auf beiden Bildschirmen angezeigt wird, machen Sie den Inhalt auf dem ersten Bildschirm unsichtbar, damit er an seinen Platz übergeht.

Informieren Sie sich über andere Adobe-Software wie Adobe Dimension .



  • 8 wichtige Prototyping- und Build-Tools

Hier zeigen wir Ihnen, wie Sie einen App-Prototyp erstellen, der genau dies tut (für mehr Wie erstelle ich eine App? Tutorials, sehen Sie sich unseren Überblick über die besten an. Darüber hinaus ermöglicht eine neue Funktion von XD dem Benutzer, die Interaktionen mit seiner Stimme zu steuern. Wir werden dies als Designmerkmal untersuchen und wie die App auch mit dem Benutzer sprechen kann, was einige interessante Designmöglichkeiten bietet.

Laden Sie die Projektdateien herunter für dieses Tutorial.

01. Projekt starten

Erstellen Sie Prototypen mit Adobe XD: Starten Sie das Projekt

Preiserhöhung für Adobe Creative Cloud-Studenten
Installieren Sie XD und starten Sie ein neues Projekt(Bildnachweis: Web Designer)

Wenn Sie nicht über Adobe XD verfügen, können Sie es herunterladen und installieren Hier . Öffnen Sie nach Abschluss der Installation die Software. Auf dem Begrüßungsbildschirm können Sie eine Bildschirmgröße zum Herunterladen auswählen. In diesem Fall wählen Sie das iPhone 6/7/8, da dies die richtige Größe für dieses Projekt ist. Sie werden jedoch feststellen, dass verschiedene Größen verfügbar sind.

02. Importieren Sie das erste Bild

Erstellen Sie Prototypen mit Adobe XD: Importieren Sie das erste Bild

Finden Sie Ihr erstes Bild und importieren Sie es(Bildnachweis: Web Designer)

Es gibt verschiedene Möglichkeiten, Bilder zu importieren. In diesem Fall gehen Sie jedoch zu Datei> Importieren. Wählen Sie den Ordner 'Assets' aus den Projektdateien. Das erste zu importierende Bild ist 'sky.png'. Platzieren Sie es oben auf dem Bildschirm und bewegen Sie es nur ein paar Pixel nach unten.

03. Platzieren Sie die Kabine

Erstellen Sie Prototypen mit Adobe XD: Platzieren Sie die Kabine

Bringen Sie weitere Bilder ein(Bildnachweis: Web Designer)

Das nächste Bild für das Design ist 'cab.png'. Importieren Sie dies einfach auf die gleiche Weise wie im vorherigen Schritt und platzieren Sie es dann, um den Bildschirm auszufüllen. Importieren Sie abschließend das Bild 'tree.png' und platzieren Sie es am unteren Bildschirmrand mit den Bäumen über dem See.

04. Bringen Sie das Logo ein

Der Grund, warum diese Bilder separate Ebenen sind, besteht darin, dass sie beim Erstellen eines Übergangs zwischen Bildschirmen separat verschoben werden können. Gehen Sie zum Menü Datei und wählen Sie Importieren. Wählen Sie diesmal 'logo.ai', ein Vektorbild. Platzieren Sie dieses Bild in der oberen Mitte des Bildschirms.

05. Fügen Sie einen Kreis hinzu

Erstellen Sie Prototypen mit Adobe XD: Fügen Sie einen Kreis hinzu

Zeichnen Sie mit dem Kreiswerkzeug um das Logo(Bildnachweis: Web Designer)

Wählen Sie das Kreiswerkzeug und zeichnen Sie einen Kreis, der nur geringfügig größer als das Logo ist. Entfernen Sie im Eigenschaftenfenster rechts den Strich und machen Sie den Hintergrund schwarz. Wählen Sie Hintergrundunschärfe und reduzieren Sie die Helligkeit auf -30, damit der Kreis immer noch schwarz ist.

06. Ordnen Sie die Grafiken neu an

Erstellen Sie Prototypen mit Adobe XD: Ordnen Sie die Grafiken neu an

Senden Sie den Kreis unter dem Logo(Bildnachweis: Web Designer)

Jetzt muss sich der Kreis hinter das Logo bewegen. Wählen Sie Objekt> Anordnen und senden Sie rückwärts. Wie bei anderen Adobe-Produkten ist es auch so Cmd / Ctrl + [ um eine Grafik in der Ebenenreihenfolge rückwärts zu verschieben. Wenn Sie die rechte eckige Klammer verwenden, wird ein Objekt in der Reihenfolge nach vorne gebracht.

07. Lass das Mikrofon fallen

Erstellen Sie Prototypen mit Adobe XD: Lassen Sie das Mikrofon fallen

Platzieren und ändern Sie die Größe des Mikrofonbilds und zeichnen Sie einen Kreis darum(Bildnachweis: Web Designer)

Importieren Sie nun das Bild 'mic.ai' und ändern Sie die Größe des Bildes auf eine relativ kleine Größe. Platzieren Sie dies am unteren Bildschirmrand. Zeichnen Sie einen Kreis darum und deaktivieren Sie die Füllung, damit sie entfernt wird. Dann machen Sie den Strich weiß und zwei Pixel breit. Positionieren Sie das um das Mikrofonbild.

08. SMS

Verwenden Sie das Textwerkzeug, um die Wörter 'Speak to Search' unter dem Mikrofon einzufügen. Machen Sie den Text weiß und ändern Sie ihn in Helvetica Neue Condensed Black. Klicken Sie unten links auf dem Bildschirm auf das Bedienfeldsymbol „Assets“, um es zu öffnen. Klicken Sie bei ausgewähltem Text auf dem Bildschirm auf das Symbol '+' neben 'Zeichenstile', um dieses Format für den Text zu speichern.

09. Tritt einer Gruppe bei

Wählen Sie das Symbol des Ebenenbedienfelds unten links auf dem Bildschirm. Wählen Sie auf dem Bildschirm den Suchtext und Umschalt-Klick um den Kreis und das Mikrofonsymbol hinzuzufügen. Gehen Sie zu Objekt und wählen Sie Gruppe. Benennen Sie diese Gruppe im Ebenenbedienfeld in 'Suchen' um. Es ist nützlich, Gruppen zu benennen, insbesondere wenn Sie diese animieren.

Erstellen Sie Prototypen mit Adobe XD: Gruppieren Sie das Logo

Gruppieren Sie das Logo und den Kreis(Bildnachweis: Web Designer)

Wählen Sie wie im letzten Schritt das Logo und den unscharfen Kreis aus und gruppieren Sie sie dann. Benennen Sie im Ebenenbedienfeld das gesamte Gruppenlogo um, damit es leicht erkennbar ist, wenn Sie es später erneut bearbeiten müssen. Im Moment ist das Design für den ersten Bildschirm fertig.

11. Zusätzliche Elemente

Erstellen Sie Prototypen mit Adobe XD: Zusätzliche Elemente

Bringen Sie weitere Designelemente für Animationszwecke ein(Bildnachweis: Web Designer)

Obwohl der erste Bildschirm vollständig ist, müssen noch weitere Designelemente hinzugefügt werden. Auf diese Weise wird eine Animation erstellt, indem die Position der Elemente zwischen den Bildschirmen geändert wird. Gehen Sie zum Rechteck-Werkzeug und halten Sie Verschiebung um ein Quadrat auf dem Bildschirm hinzuzufügen und den Rand weiß zu machen.

12. Unterschiedlicher Import

Erstellen Sie Prototypen mit Adobe XD: Unterschiedlicher Import

Ziehen Sie einfach Bilder aus den Ordnern Ihres Betriebssystems(Bildnachweis: Web Designer)

Öffnen Sie nun den Ordner für die Assets über Ihr Betriebssystem. Wählen Sie das Bild 'cab1.png' aus und ziehen Sie es direkt auf das Quadrat, das Sie im vorherigen Schritt erstellt haben. Es wird automatisch darin maskiert. Doppelklicken Sie, um die Position des Bildes zu bearbeiten und sicherzustellen, dass die Kabine auf dem Quadrat sichtbar ist.

13. Fügen Sie ein Etikett hinzu

Erstellen Sie Prototypen mit Adobe XD: Fügen Sie ein Etikett hinzu

Verwenden Sie das Textwerkzeug, um Assets Beschriftungen hinzuzufügen(Bildnachweis: Web Designer)

Fügen Sie mit dem Textwerkzeug die Bezeichnung 'Forest Cabin' unter dem Text hinzu und formatieren Sie den Text im Bedienfeld 'Assets' im gespeicherten Stil aus Schritt 8. Wählen Sie das Bild und die Beschriftung aus und gruppieren Sie sie. Nennen Sie die Gruppe 'linke Kabine' im Ebenenbedienfeld.

14. Duplizieren Sie die Gruppe

Erstellen Sie Prototypen mit Adobe XD: Duplizieren Sie die Gruppe

Kopieren Sie Ihre Schnittstellenelemente und fügen Sie sie ein, anstatt das Raster wiederholen zu verwenden(Bildnachweis: Web Designer)

Normalerweise ist das Wiederholen eines Schnittstellenelements die perfekte Aufgabe für das Werkzeug 'Gitter wiederholen'. Dies erfordert jedoch eine spezielle Animation, die mit dem Wiederholungsraster nicht funktioniert. Wählen Sie die Bild- und Textgruppe aus, kopieren Sie sie und fügen Sie sie so ein, dass sie sich neben dem Original befindet. Fügen Sie stattdessen das Bild 'cab2.png' hinzu.

15. Benennen Sie um und kopieren Sie erneut

Erstellen Sie Prototypen mit Adobe XD: Benennen Sie sie um und kopieren Sie sie erneut

Aktualisieren Sie den kopierten Text nach Bedarf(Bildnachweis: Web Designer)

Ändern Sie den Text in 'Schneekabine' und nennen Sie im Ebenenbedienfeld 'Rechte Kabine'. Wählen Sie sowohl die linke als auch die rechte Kabine aus und duplizieren Sie sie, positionieren Sie die Duplikate unten und aktualisieren Sie ihren Text und ihre Bilder mit 'Cabin3.png' und 'Cabin4.png'. Gruppieren Sie beide und nennen Sie die Gruppe 'untere Kabine'.

16. Texttitel

Erstellen Sie Prototypen mit Adobe XD: Benennen Sie sie um und kopieren Sie sie erneut

Fügen Sie weiteren Text hinzu(Bildnachweis: Web Designer)

Fügen Sie der Seite Text mit dem Text 'Suchergebnisse für Kabinen' hinzu. Geben Sie dieser Schriftart Rockwell und speichern Sie diese in den Zeichenstilen im Bedienfeld „Assets“. Positionieren Sie nun die Gruppe 'Untere Kabine' ganz unten auf dem Bildschirm und nehmen Sie das Erscheinungsbild auf Null, sodass es auf diesem Bildschirm nicht sichtbar ist.

iPhone 8 plus Größe in Zoll

17. Ändern der Deckkraft

Erstellen Sie Prototypen mit Adobe XD: Ändern der Deckkraft

Stellen Sie die Deckkraft für die linke und rechte Kabine auf Null(Bildnachweis: Web Designer)

Wählen Sie nun die linke und die rechte Kabine aus, verschieben Sie sie an den unteren Bildschirmrand und setzen Sie den Schieberegler für das Erscheinungsbild auf Null. Wiederholen Sie diesen Vorgang erneut für den Suchtext. Wenn wir zu einem anderen Bildschirm wechseln, werden diese alle auf ihre neuen Positionen animiert. Bewegen Sie im Ebenenbedienfeld die linke Kabine über alle anderen Kabinengruppen.

18. Duplizieren Sie den Bildschirm

Erstellen Sie Prototypen mit Adobe XD: Duplizieren Sie den Bildschirm

Duplizieren Sie den Bildschirm, verschieben Sie das Logo und machen Sie es unsichtbar(Bildnachweis: Web Designer)

Wählen Sie die Zeichenfläche aus, indem Sie auf ihren Namen klicken. Doppelklicken Sie dann auf die Zeichenfläche und ändern Sie den Namen in 'Startseite'. Kopieren Sie die Zeichenfläche, fügen Sie sie ein und benennen Sie sie in 'Suchen' um. Wählen Sie nun das Logo aus und verschieben Sie es fast bis zum Bildschirm. Reduzieren Sie dann das Erscheinungsbild auf Null.

19. Verschieben Sie die Hintergründe

Erstellen Sie Prototypen mit Adobe XD: Verschieben Sie die Hintergründe

Verschieben Sie den Hintergrund und andere Elemente(Bildnachweis: Web Designer)

Wählen Sie das Himmelsbild aus und bewegen Sie es auf dem Bildschirm leicht nach oben. Wählen Sie das Kabinenbild aus und verschieben Sie es nach oben, bis sich die Kabine oben auf dem Bildschirm befindet. Klicken Sie dann auf das Baumbild und bewegen Sie es über die Kabine. Wählen Sie abschließend die Suchgruppe aus und reduzieren Sie das Erscheinungsbild auf Null.

20. Neue Elemente werden angezeigt

Erstellen Sie Prototypen mit Adobe XD: Neue Elemente werden angezeigt

Lassen Sie nun neue Elemente erscheinen(Bildnachweis: Web Designer)

Wählen Sie die Suchergebnisse im Ebenenbedienfeld aus und erhöhen Sie das Erscheinungsbild auf 100. Verschieben Sie sie auf dem Bildschirm nach oben. Wiederholen Sie diesen Vorgang für die linke Kabine, die rechte Kabine und die untere Kabine. Verwenden Sie das Stiftwerkzeug, um eine einfache Zurück-Schaltfläche zu zeichnen und einen Kreis um sie herum hinzuzufügen. Machen Sie den Hintergrund unscharf und reduzieren Sie die Helligkeit auf -30.

21. Vervollständigen Sie die Zurück-Taste

Wählen Sie den Zurückpfeil und den Kreis aus, gruppieren Sie sie und nennen Sie sie im Ebenenbedienfeld 'Zurück'. Wechseln Sie in den 'Prototype'-Modus, indem Sie oben links auf der XD-Oberfläche auf' Prototype 'klicken. Wählen Sie den Startbildschirm aus, ziehen Sie den blauen Pfeil auf den Suchbildschirm. Ein Popup-Fenster wird angezeigt.

22. Sprachbefehl

Erstellen Sie Prototypen mit dem Befehl Adobe XD: Voice

Das Hinzufügen von Sprachbefehlen ist einfach(Bildnachweis: Web Designer)

Ändern Sie den Trigger in Voice und geben Sie das Wort 'search' als Sprachbefehl ein, um dies zu steuern. Ändern Sie die Aktion in 'Automatisch animieren' und 'Einfacher Fang'. Machen Sie die Dauer 1,5s. Klicken Sie im Suchbildschirm auf die Schaltfläche 'Zurück' und ziehen Sie den blauen Pfeil zurück zum Startbildschirm. Ändern Sie einfach den Auslöser in Tippen.

23. Testen Sie den Prototyp

Erstellen Sie Prototypen mit Adobe XD: Testen Sie den Prototyp

Drücken Sie die Wiedergabetaste, um Ihren Prototyp zu testen(Bildnachweis: Web Designer)

Oben rechts auf der XD-Oberfläche befindet sich eine Wiedergabetaste. Klicken Sie darauf und ein funktionierender Prototyp wird auf dem Bildschirm angezeigt. Auf der Homepage müssen Sie die Leertaste gedrückt halten, während Sie den Sprachbefehl 'Suchen' sprechen. Wenn Sie die Leertaste loslassen, gelangen Sie zum nächsten Bildschirm und animieren die grafische Oberfläche in Position.

24. Zurück gehen

Erstellen Sie Prototypen mit Adobe XD: Zurück

wie man Comic-Stil färbt
Drücken Sie die Zurück-Taste, um zum Startbildschirm zurückzukehren(Bildnachweis: Web Designer)

Sobald der Übergang ausgeführt wurde, können Sie die Zurück-Taste drücken, um zum Startbildschirm zurückzukehren. Schließen Sie den Prototyp und klicken Sie auf den Suchbildschirm. Klicken Sie dann auf den blauen Pfeil rechts (nicht ziehen). Ändern Sie den Trigger auf Zeit, setzen Sie die Verzögerung auf 0 und setzen Sie die Aktion auf Sprachwiedergabe. Machen Sie die Rede 'Suchergebnisse für verfügbare Kabinen'.

25. Sprachbestätigung

Erstellen Sie Prototypen mit Adobe XD: Sprachbestätigung

Testen Sie die Sprachbestätigung und kehren Sie dann zur Entwurfsansicht zurück(Bildnachweis: Web Designer)

Testen Sie dies jetzt mit der Wiedergabetaste, um eine Sprachbestätigung der Suche zu hören. Schließen Sie den Prototyp, wenn Sie dies ausprobiert haben. Ein weiterer Bildschirm wird erstellt. Klicken Sie also oben links auf der XD-Oberfläche wieder auf die Ansicht 'Design'. Klicken Sie auf den Suchbildschirm, indem Sie auf den Namen klicken, und kopieren Sie ihn und fügen Sie ihn ein.

26. Bild skalieren

Erstellen Sie Prototypen mit Adobe XD: Skalieren des Bildes

Benennen Sie Ihren neuen Bildschirm um und ändern Sie die Größe des Kabinenbilds(Bildnachweis: Web Designer)

Benennen Sie den neuen Bildschirm in 'Kabine' um. Doppelklicken Sie auf das Bild für die Ebene 'Linke Kabine'. Ändern Sie die Größe der Eckgriffe so, dass sie den Bildschirm ausfüllen, und positionieren Sie das Bild so neu, dass es diesen Bildschirm abdeckt. Klicken Sie auf den Suchergebnistext und verkleinern Sie das Erscheinungsbild auf Null, um es aus der Ansicht zu entfernen.

27. Neue Bildschirmelemente

Erstellen Sie Prototypen mit Adobe XD: Neue Bildschirmelemente

Es ist Zeit, einige neue Elemente einzubringen(Bildnachweis: Web Designer)

Doppelklicken Sie auf den Text 'Forest Cabin', da er Teil der Gruppe ist. Vergrößern Sie die Textgröße auf 26 Pixel und verschieben Sie sie auf dem Bildschirm leicht nach oben. Fügen Sie dem Bildschirm in Helvetica Neue Medium Text mit einer Größe von 14 Pixel hinzu und setzen Sie ihn auf Weiß, um sich vom Hintergrund abzuheben. Fügen Sie mit dem Linienwerkzeug unter der Überschrift eine weiße Linie hinzu.

28. Erstellen Sie eine Schaltfläche

Erstellen Sie Prototypen mit Adobe XD: Erstellen Sie eine Schaltfläche

Erstellen Sie ein abgerundetes Rechteck, das Sie als Schaltfläche verwenden können(Bildnachweis: Web Designer)

Verwenden Sie das Rechteck-Werkzeug, um ein Rechteck auf dem Bildschirm am unteren Rand des Entwurfs zu zeichnen. Ziehen Sie die Eckgriffe hinein, um dieser Form runde Ecken zu geben. Fügen Sie dazu das Wort 'Reserve' hinzu, indem Sie den gespeicherten Zeichenstil im Bedienfeld Assets für Helvetica Neue in Condensed Bold verwenden.

29. Wechseln Sie in den Prototyp-Modus

Erstellen von Prototypen mit Adobe XD: Wechseln Sie in den Prototypenmodus

Wechseln Sie in den Prototyp-Modus, wenn alles vorhanden ist(Bildnachweis: Web Designer)

Alle Designelemente sind jetzt für das gesamte Design der App vorhanden. Wechseln Sie in den Modus 'Prototyp', indem Sie oben links auf das Wort 'Prototyp' klicken. Klicken Sie im Suchbildschirm auf die Gruppe 'Waldhütte' des Bildes und des Textes. Ziehen Sie den blauen Griff von hier auf den Bildschirm 'Kabine'.

30. Animationseinstellungen

Erstellen Sie Prototypen mit Adobe XD: Animationseinstellungen

Passen Sie die Animationseinstellungen an, damit die Dinge weiter laufen(Bildnachweis: Web Designer)

Wählen Sie im Popup-Fenster für den Übergang zwischen den Bildschirmen Tippen als Auslöser und wählen Sie dann Aktion automatisch animieren. Machen Sie es sich einfach, aber reduzieren Sie die Dauer auf 0,6 Sekunden. Dies stellt sicher, dass die Animation nicht schleift - die Bewegung des ersten Bildschirms zum zweiten Bildschirm hatte viel Bewegung, die einen längeren Übergang erforderte.

Erstellen Sie Prototypen mit Adobe XD: Verknüpfen Sie die Schaltfläche

Sobald Sie die Zurück-Schaltfläche verknüpft haben, können Sie sie testen(Bildnachweis: Web Designer)

Wählen Sie nun die Schaltfläche 'Zurück' im letzten Bildschirm und ziehen Sie den blauen Pfeil von diesem zurück zum Bildschirm 'Suchen'. Alle Einstellungen aus dem vorherigen Übergang sollten gespeichert werden. Sie können dies jetzt testen, indem Sie auf die Wiedergabetaste klicken.

32. Selbst animiert

Erstellen Sie Prototypen mit Adobe XD: Automatisch animieren

Jetzt können Sie sehen, wie die automatische Animation funktioniert(Bildnachweis: Web Designer)

Was Sie jetzt mit der automatischen Animation sehen werden, ist, dass das Bild erweitert wird, um den Bildschirm auszufüllen, und die Elemente, die nicht mehr benötigt werden, ausgeblendet werden, während der neue Text eingeblendet wird. Das Gegenteil passiert, wenn Sie zurückkehren. Dies bietet eine gute Möglichkeit, die automatische Animation auf drei Bildschirmen anzuzeigen.

So ändern Sie die Perspektive eines Bildes in Photoshop

33. Speichern Sie das Projekt

Erstellen Sie Prototypen mit Adobe XD: Speichern Sie das Projekt

Vergessen Sie nicht, eine lokale Kopie Ihres Projekts zu speichern(Bildnachweis: Web Designer)

Standardmäßig sollte Ihr Projekt automatisch in der Creative Cloud gespeichert werden. Es ist jedoch eine gute Idee, eine Kopie auf Ihrer eigenen Festplatte zu speichern, falls Probleme auftreten. Klicken Sie auf Datei> Speichern, ändern Sie den Speicherort auf Ihren eigenen Computer und benennen Sie das Projekt mit einem geeigneten Namen.

34. Das Projekt teilen

Erstellen Sie Prototypen mit Adobe XD: Teilen Sie das Projekt

Verwenden Sie die Schaltfläche 'Teilen', um Ihr Projekt an andere Personen zu senden(Bildnachweis: Web Designer)

Beim Prototyping geht es darum, das Projekt an anderen Personen zu testen. Glücklicherweise gibt es oben rechts auf der XD-Oberfläche eine Schaltfläche zum Teilen, die dies zu einem Kinderspiel macht. Klicken Sie auf die Schaltfläche 'Teilen' und wählen Sie im angezeigten Drop-Menü die Option 'Zur Überprüfung freigeben'.

35. Prototyp veröffentlichen

Erstellen Sie Prototypen mit Adobe XD: Veröffentlichen Sie Prototypen

Erstellen Sie einen öffentlichen Link, damit Benutzer das Projekt im Browser testen können(Bildnachweis: Web Designer)

Im nächsten Bildschirm wird Ihnen mitgeteilt, dass die Unterstützung für die automatische Animation für das Web noch nicht verfügbar ist, sie jedoch in Kürze verfügbar sein wird. Klicken Sie auf Öffentlichen Link erstellen und dann auf den Link oben rechts, um den öffentlichen Link in einem Webbrowser aufzurufen. Sie müssen die Leertaste gedrückt halten, um den Sprachbefehl mit dem Prototyp zu verwenden.

36. Videoversion

Erstellen Sie Prototypen mit Adobe XD: Video-Version

Alternativ können Sie die Schnittstelle in Aktion als Video aufzeichnen(Bildnachweis: Web Designer)

Ein anderer Prototyp kann gemeinsam genutzt werden, indem die Schnittstelle in Aktion aufgezeichnet wird. Klicken Sie auf die Schaltfläche 'Teilen' und wählen Sie 'Video aufnehmen'. Dies öffnet ein Fenster und wenn Sie dieses schließen, werden Sie aufgefordert, eine Aufzeichnung des Bildschirms als MP4-Datei zu speichern. Dies ist auch eine nützliche Möglichkeit, Ihren Prototyp freizugeben.

Dieser Artikel wurde ursprünglich in Ausgabe 285 des Creative Web Design Magazins veröffentlicht Webdesigner . Kaufen Sie hier die Ausgabe 285 oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: