Skalieren Sie ein Design in Adobe XD CC, um Layouts für Geräte verschiedener Größen zu erstellen.
create-webpage-header_1000x560

In diesem Beispiel haben wir einen Header für eine mobile Web-Seite erstellt, der als Ausgangsbasis für die Designs unterschiedlicher Gerätegrößen dient. Zur Übertragung der Zeichenfläche für Tablet- und Desktop-Screens haben wir die Funktion „Responsive Resize“ aktiviert. Mit „Responsive Resize“ ermittelt XD automatisch, wie Elemente im Design skaliert und angeordnet werden.

Es ist wichtig, dass Sie zunächst selbst ausprobieren, wie die Ebenen auf Ihrer Zeichenfläche am besten angeordnet werden, bevor Sie „Responsive Resize“ verwenden. Sie können auch eine Kombination der automatischen und manuellen Einstellungen verwenden, um Objekte in Ihrem Design zu skalieren und zu fixieren.

create-webpage-header_step1

Weiter unten sehen Sie das Ergebnis unserer Experimente. Wir haben untersucht, was passiert, wenn Objekte als separate Elemente beibehalten oder auf unterschiedliche Weise gruppiert werden. Die beste Methode in diesem Beispiel war es, die Icons zu gruppieren und dann wiederum das Logo mit dieser Gruppe zu gruppieren. In diesem Fall erwies sich die Einstellung „Automatisch“ als optimal, um das Logo und die Icons oben links und oben rechts auf der Zeichenfläche mit einer festen Höhe und den passenden Abständen zu fixieren.

Die pinken Fadenkreuze zeigen, wie die Objekte im Verhältnis zu den Rändern der Zeichenfläche positioniert sind.

create-webpage-header_step2

Nach der Fertigstellung des Basis-Designs haben wir die Elemente auf eine neue Zeichenfläche für Tablets kopiert und „Responsive Resize“ aktiviert. Anschließend haben wir die manuellen Einstellungen für das große Logo und die Tagline in der Mitte des Designs deaktiviert, alle Elemente ausgewählt und durch Ziehen auf der neuen Zeichenfläche positioniert. Wenn Sie Elemente in Ihr eigenes Design ziehen, achten Sie darauf, was automatisch skaliert und neu positioniert wird und was nicht.

create-webpage-header_step3

Die Einstellungen in diesem Beispiel funktionierten gut. Nur das große Logo und die Tagline mussten manuell angepasst werden.

create-webpage-header_step4

„Responsive Resize“ ermöglichte eine schnelle Wiederverwendung des UI-Designs einer App für Tablets und das Web.

create-webpage-header_step5

Sie wissen nun, wie Sie Screens für unterschiedliche Geräte designen, ohne für jede Größe von vorne beginnen zu müssen.

02/25/2019

Adobe Stock-Anbieter: Weidong

War diese Seite hilfreich?