Adobe XD Version vom August und September 2018
xd-mnemonic

Adobe XD ist ein vektorbasiertes Tool, mit dem Sie Nutzererlebnisse (User Experiences, UX) für Websites und iOS-/Android-Apps entwerfen und Prototypen dafür erstellen können. Sie können ganz einfach zwischen Wireframe-Modus, Visual Design, Interaktionsdesign, Prototyperstellung, Vorschau und Freigabe umschalten – und das alles in einem einzigen, leistungsstarken Tool.

XD wurde für Designer unterschiedlichster Inhalte und Zwecke konzipiert: UX-/UI-Designer, Interaktions-Designer, Experience-Designer, Produktdesigner, Web-Designer, App-Designer, Grafikdesigner, Unternehmer und andere mehr.


Neue Funktionen in Adobe XD 12

 Die XD Version vom September 2018 besitzt folgende interessante neue Funktionen:

Verbesserungen:

Mehr dazu erfahren Sie in den folgenden Abschnitten.

Responsive Resize und Bedingungen

Beim Gestalten von Designs für verschiedene Geräte müssen Sie auf die verschiedenen Bildschirmgrößen achten, die auf Smartphones, Tablets und Desktops verwendet werden. Da nicht alle Designer die gleichen Geräte verwenden, muss berücksichtigt werden, wie Inhalte auf Bildschirmen unterschiedlicher Größe dargestellt werden. 

Um dieses Benutzerproblem zu lösen, wurde für Adobe XD eine Funktion mit dem Namen „Responsive Resize“ entwickelt, mit der Objekte zur optimalen Anpassung an mehrere Bildschirmgrößen skalieren werden, während bei unterschiedlicher Größe die räumlichen relativen Positionen beibehalten werden. Weitere Informationen zu Responsive Resize und Bedingungen finden Sie unter Responsive Resize.

In diesem Video erhalten Sie weitere Informationen zu Responsive Resize.


Responsive Resize
Responsive Resize – das Ergebnis
Bedingungen für Objektgruppen festlegen
Bedingungen für Objektgruppen einrichten

Zeitgesteuerte Übergänge

Mit zeitgesteuerten Übergängen wird eine Kombination von Verzögerung und Dauer auf Übergänge zwischen Zeichenflächen angewendet, um schnelle Onboarding-Flows oder Schleifen zu erstellen. Hierzu verwenden Sie den neuen Trigger vom Typ Zeitgesteuert.

Mit dem Trigger Zeitgesteuert können Sie jetzt den Übergang zwischen Zeichenflächen mit einer bestimmten zeitlichen Verzögerung ablaufen lassen. Dies ist hilfreich, um einen Prototyp für Onboarding- oder Entscheidungs-Flows zu erstellen. 

Wenn Sie im Prototypmodus einen Übergang zwischen zwei Zeichenflächen erstellen, können Sie jetzt Zeitgesteuert anstelle von Antippen auswählen und die Dauer der Verzögerung sowie den gewünschten Übergang festlegen. XD speichert dann die Attribute von diesem Bildschirm und schlägt sie als Standard für weitere Bildschirme vor. Weitere Informationen zu zeitgesteuerten Übergängen finden Sie unter Zeitgesteuerte Übergänge verwenden.

In diesem Video erhalten Sie weitere Informationen zu zeitgesteuerten Übergängen.


Zeitgesteuerte Übergänge festlegen
Zeitgesteuerte Übergänge festlegen

A. „Trigger“ auf „Zeitgesteuert“ festlegen B. „Verzögerung“ in Sekunden angeben C. Als „Aktion“ „Übergang“ einstellen D. „Dauer“ in „Sekunden“ angeben 

Integrierte Rechtschreibprüfung

Adobe XD bietet jetzt eine integrierte Rechtschreibprüfung, die in Echtzeit direkt auf der Design-Arbeitsfläche ausgeführt wird. Diese Funktion schlägt Korrekturen auf Grundlage der Betriebssystemsprache vor. Sie haben auch die Möglichkeit, dem Wörterbuch neue Wörter hinzuzufügen.

Bisher mussten Benutzer die Inhalte in eine andere Anwendung kopieren oder einfügen, um sie auf Rechtschreib- und Tippfehler zu überprüfen. 

Ab dieser Version können Sie eine Rechtschreibprüfung des ausgewählten Textes ausführen und Rechtschreibfehler anzeigen lassen und korrigieren.

Hinweis:

Stellen Sie vor dem Starten der Rechtschreibprüfung sicher, dass Sie im Menü Bearbeiten die Rechtschreibprüfung aktiviert haben.

Rechtschreibung prüfen
Rechtschreibung prüfen

Weitere Informationen zur Rechtschreibprüfung finden Sie unter Rechtschreibung prüfen.

Verbesserungen bei der Anzeige von Web-Prototypen im Vollbildmodus

Für Benutzer, die Designs im Browser anzeigen, wurde das Skalierungsverhalten beim Wechsel in den Vollbildmodus verbessert.

Web- und benutzerdefinierte Zeichenflächen werden jetzt ab dem oberen Rand des Browsers angezeigt, ohne dass Probleme mit schwarzen Lücken auftreten. Zeichenflächen für Mobilgeräte sind jedoch weiterhin im Vollbildmodus auf dem Bildschirm zentriert.

Diese Verbesserungen bieten eine realistischere Darstellung beim Anzeigen einer Zeichenfläche im Webformat.

In diesem Video erhalten Sie weitere Informationen zu den Verbesserungen bei der Anzeige von Web-Prototypen im Vollbildmodus.


Full-screen-(Before)
Früheres Verhalten
Verbessertes Skalierungsverhalten, wenn ein Web-Prototyp im Vollbildmodus angezeigt wird
Verbessertes Verhalten

Dies entspricht dem tatsächlichen Browserverhalten, da die Hintergrundfarbe der Browser immer Weiß ist und standardmäßig keine schwarze Hintergrundfarbe hinzugefügt wird.

Verbesserungen bei der Standard- und Vollbildansicht:

  • Wenn die Zeichenfläche breiter als der verfügbare horizontale Abstand ist, wird der Prototyp so skaliert, dass die Breite ohne horizontalen Bildlauf Platz hat.
  • Wenn Sie (im Eigenschafteninspektor) die Viewport-Höhe definiert haben, wird zuerst die Höhe des Prototyps angepasst und dann die Breite skaliert, um das Seitenverhältnis beizubehalten. Sie können auch einen vertikalen Bildlauf zum Anzeigen des Inhalts unterhalb der Viewport-Höhe durchführen.
  • Handelt es sich bei dem erstellten Prototyp um eine Web- oder benutzerdefinierte Zeichenfläche, wird der veröffentlichte Link im Webbrowser ab dem oberen Rand des Browser-Fensters angezeigt, wenn der Vollbildmodus aktiviert ist. Designs für Mobil- und Tablet-Geräte bleiben auf dem Bildschirm zentriert.
  • Die Hintergrundfarbe im Vollbildmodus ist nicht mehr Schwarz, sondern Weiß. Dies entspricht dem tatsächlichen Browserverhalten, da Browser standardmäßig keine schwarze Hintergrundfarbe verwenden.

Verbesserungen bei der Darstellung von Zeichenflächen auf Mobilgeräten:

  • Der Inhalt wird an die Höhe angepasst und die Breite wird bei gleichbleibendem Seitenverhältnis entsprechend skaliert.
  • Wenn Sie den veröffentlichten Link in einem Webbrowser im Vollbildmodus anzeigen, wird der Inhalt in der Mitte des Browser-Fensters angezeigt. 

Neue Funktionen in Adobe XD 11

Elementextrahierung in Design-Spezifikationen

Ab XD 11.0 können Sie für den Export markierte Ebenen als Elemente in Design-Spezifikationen einschließen und Entwickler können alle so markierten Ebenen über den Link zur Design-Spezifikation herunterladen.

Entwickler können dann festlegen, ob Vektorelemente als SVG-, PNG- oder PDF-Dateien heruntergeladen werden und Bitmap-Elemente als PNG- oder PDF-Dateien.

Exportieren von Elementen
Markierte Elemente exportieren
Markierte Elemente exportieren

Weitere Informationen finden Sie unter Elementextrahierung in Design-Spezifikationen.

Elemente im Bedienfeld „Elemente“ anders anordnen

Ab dieser Version von Adobe XD können Sie Ihre Elemente organisieren und neu anordnen, indem Sie einzelne oder mehrere Elemente über das Bedienfeld Elemente ziehen. 

Elemente anders anordnen
Elemente anders anordnen

Weitere Informationen finden Sie unter Elemente im Bedienfeld „Elemente“ anders anordnen.

Private Einladungen im Web verwenden

Mit Adobe XD haben Sie die Möglichkeit, über die Weboberfläche sichere Einladungen für Design-Spezifikationen und Prototypen (öffentliche und private Links) nur an benannte Personen zu senden. Wenn ein Designer eine sichere benannte Einladung veröffentlicht, kann er mithilfe der Option Einladen weitere interne und externe Reviewer einladen.

Vom Browser aus private Einladungen an Benutzer senden
Vom Browser aus private Einladungen an Benutzer senden

Hinweis:

Die Option Einladen ist nur für den Designer des Dokuments sichtbar. Die eingeladenen Stakeholder können niemanden einladen, es sei denn, der Designer erteilt ihnen dazu die Berechtigung.

Weitere Informationen finden Sie unter Private Einladungen im Web verwenden.

Unterstützung von @mention für Kommentare

Mit @mention können Sie die Namen der Benutzer anzeigen, die eingeladen wurden, auf eine private Design-Spezifikation zuzugreifen. Bei öffentlichen Prototypen und Design-Spezifikationen erscheinen in der Reviewerliste nur Benutzer, die mindestens einen Kommentar abgegeben haben. Der namentlich erwähnte Reviewer erhält entweder eine E-Mail oder eine Benachrichtigung vom Creative Cloud-Client. Wenn Sie auf die Benachrichtigung klicken, werden Sie zur entsprechenden Zeichenfläche weitergeleitet.

@mention
@mention

Weitere Informationen finden Sie unter Arbeitsablauf für Reviewer.

Unterstützung verschiedener Konturtypen in Design-Spezifikationen

Ab XD 11.0 können Benutzer ein beliebiges Objekt in den freigegebenen Design-Spezifikationen auswählen und auf seine Rahmen klicken, um die auf dem Bildschirm verwendeten Konturen anzuzeigen. 

Konturtypen
A. Konturtypen 

Weitere Informationen finden Sie unter Auswertung der Design-Spezifikationen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie