So verwenden Sie Responsive-Größenänderung und -einschränkungen in Adobe XD

In diesem Lernprogramm werden wir einige neue Funktionen in Adobe XD kennenlernen, nämlich „responsive resize und grenzen“. Diese im September 2018 hinzugefügten Funktionen ermöglichen eine echte Skalierung von Designs in Adobe XD, sodass wir wirklich reaktionsschnelle Webdesign-Funktionen erhalten. 

Zur Demonstration dieser neuen Funktionen verwende ich das Bones iOS-Drahtgitter-Kit, das in Envato Elements verfügbar ist:

Bones IOS Wireframe Kit

Schau das Video

Größenänderung vor dem XD-Update

Bevor Adobe XD seine neuen Größenänderungsfunktionen einführte, bedeutete die Größenänderung eines Designs, dass alle erforderlichen Elemente manuell neu positioniert wurden. Sie würden beispielsweise Ihre Zeichenfläche vergrößern, dann die oberen Leistenelemente und alle anderen Objekte entsprechend positionieren, neu ausrichten und ihre Größe ändern. Nicht ideal.

Responsive Größe jetzt ändern

Responsive Resize nimmt all diese manuelle Arbeit in Anspruch und behebt Dinge automatisch für Sie. Öffnen Sie ein Dokument in Adobe XD und Sie werden feststellen, dass im Eigenschaftsbereich ein Umschalten der Responsive-Größenänderung erfolgt:

Wenn ich nun dieselbe Zeichenfläche in der Größe verändere, werden Sie sehen, dass zentral ausgerichtetes Objekt in der Mitte bleibt, rechts ausgerichtete Objekte rechts und linksbündige Objekte links bleiben. Wenn ich die Zeichenfläche vertikal strecke, bleibt die Positionierung der Oberflächenelemente perfekt erhalten.

Ursprüngliche und skalierte Benutzeroberfläche in Adobe XD

Anpassung der Ausrichtung

Die Ausrichtung und der Abstand von Objekten können an Ihre Bedürfnisse angepasst werden. Wenn Sie sich beispielsweise die vier Elemente unten auf unserem Demobildschirm ansehen, werden Sie feststellen, dass bei der Größenänderung die E-Mail- und Passworteingaben etwas zu weit voneinander entfernt sind (wie wir wissen, ist die Nähe ein wichtiger Faktor beim Entwerfen visueller Beziehungen).

Wenn Sie die Eingaben zuerst gruppieren, können Sie Adobe XD darüber informieren, dass sie visuell miteinander verbunden werden sollen. Sie werden daher bei der Größenänderung näher zusammengehalten (beachten Sie die rosa Linie um die Gruppe):

Einschränkungen

Manuelle Einschränkungen gehen noch einen Schritt weiter, da wir noch genauer festlegen können, wie Adobe XD mit responsiver Größenänderung umgeht.

Unter der Responsive Resize Umschalten gibt es einen Schalter, um den Prozess durchzuführen Handbuch, anstatt Automatik. Mit den Steuerelementen können wir für jedes Objekt festlegen, an welchen Kanten der Zeichenfläche es haften soll, und ob seine Höhe oder Breite fixiert werden soll.

Hier ist zum Beispiel eine Schnittstelle, bei der die Größe der Objekte automatisch angepasst wird. Es ist überhaupt nicht schlecht, aber es könnte besser sein:

Automatische Größenanpassung

Wenn ein oder zwei der Elemente manuell festgelegt sind, können Sie sicherstellen, dass die Schaltfläche "Folgen" am oberen Rand haftet, die Registerkarten dasselbe tun und der Post-Inhalt alle links ausgerichtet bleibt:

Manuelle Einschränkungen: viel besser!

Fazit

Laden Sie das neueste Adobe XD-Update herunter und probieren Sie es mit den neuen responsive Größeneinstellungen aus. Ich garantiere Ihnen, dass Ihnen gefällt, was Sie finden! Mit diesem Update hat Adobe einen sehr langwierigen Prozess extrem intuitiv und schnell gemacht. In Kombination mit Funktionen wie Repeat Grid ist das responsive Design in Adobe XD für das Design komplexer Benutzeroberflächen besonders leistungsfähig.

Weitere Informationen zu Adobe XD