Mithilfe von Responsive Resize und Bedingungen können Sie Designs für mehrere Bildschirmgrößen und Layouts erstellen

Was ist Responsive Resize?

Beim Entwickeln 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, müssen Designer berücksichtigen, 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.

Responsive Resize
Responsive Resize

Wie funktioniert Responsive Resize?

Mit Responsive Resize prognostiziert XD, welche Bedingungen Sie wahrscheinlich anwenden werden, und wendet diese Bedingungen beim Skalieren von Objekten automatisch an. 

Zum Erzielen eines responsiven Verhaltens mussten Designer bisher Bedingungen manuell auf mehrere Objekte anwenden, um das Objektverhalten bei Größenänderungen zu definieren. Dieses eintönige und zeitintensive Verfahren beruhte eher auf Vermutungen und sich wiederholenden Bewegungen, die den kreativen Aspekt der Designentwicklung in den Hintergrund drängte.

XD wendet Bedingungen automatisch an, indem die von Ihnen ausgewählten Objekte, ihre Gruppierungsstruktur und die Nähe zu den Kanten der übergeordneten Gruppe sowie die Layoutinformationen analysiert werden.

Responsive Resize
Responsive Resize mit einem Element, dessen Größe geändert wird

Markierungen für Responsive Resize

Beim Skalieren werden auf dem zu skalierenden Objekt rosa Markierungen angezeigt. Diese Markierungen zeigen an, welche Bedingungsregeln auf eine Gruppe angewendet werden. XD bietet eine visuelle und kontextbezogene Methode, um zu ermitteln, wie sich die Responsive Resize-Bedingungen in Kombination mit den manuellen Bedingungen auswirken.

Markierungen in Responsive Resize
Zu skalierende Gruppe mit rosa Markierungen

Responsive Resize und Gruppen

Vor dem Skalieren können Sie ähnliche Objekte gruppieren, um Beziehungen zwischen ihnen herzustellen. XD behält die Gruppierung der Objekte standardmäßig bei und ermöglicht es Ihnen, mit einem Anordnungsverfahren, das Sie bereits verwenden, eine Hierarchie in den Projekten herzustellen. Die Gruppierung von Objekten bleibt nach der Skalierung erhalten.

Hinweis:

Symbole werden von Responsive Resize nicht unterstützt. Um dieses Problem zu umgehen, heben Sie die Gruppierung der Symbole auf und skalieren die Gruppe.

Ähnliche Objekte gruppieren
Ähnliche Objekte vor dem Skalieren gruppieren

Bedingungen manuell bearbeiten

Wenn Sie mit den Ergebnissen des Responsive Resize nicht zufrieden sind, können Sie die Bedingungsregeln manuell bearbeiten. Durch Definieren manueller Bedingungen können Sie explizit festlegen, wie sich Objekte verhalten, wenn Sie ein Symbol, eine Zeichenfläche oder eine Gruppe mit den darin enthaltenen Ebenen skalieren.

Wählen Sie Manuell, um die Bedingungen manuell zu bearbeiten, die von Responsive Resize für Objekte festgelegt wurden. Manuelle Bedingungen überschreiben immer die Bedingungen, die von XD automatisch festgelegt wurden. Mithilfe der folgenden Bedingungen können Sie die Regeln festlegen und das Verhalten der verschiedenen Komponenten steuern.

  • Feste/variable Breite
  • Feste/variable Höhe
  • Fester/variabler linker Rand
  • Fester/variabler rechter Rand
  • Fester/variabler oberer Rand
  • Fester/variabler unterer Rand
Bedingungen
Manuelle Bedingungen festlegen
Bedingungen für einzelne Objekte festlegen
Bedingungen für einzelne Objekte festlegen
Bedingungen für Objektgruppen festlegen
Bedingungen für eine Objektgruppe festlegen

Responsives Skalieren von Zeichenflächen

Standardmäßig ist Responsive Resize für Zeichenflächen deaktiviert. Sie können die Funktion jedoch aktivieren, damit Zeichenflächen responsiv skaliert werden.

So aktivieren Sie Responsive Resize:

  1. Wählen Sie die Zeichenfläche im Designsmodus aus.

  2. Klicken Sie im Eigenschafteninspektor auf die Ein-/Aus-Schaltfläche, um Responsive Resize einzuschalten.

    Responsive Resize einschalten, „Manuell“ auswählen und Bedingungen anzeigen
    Responsive Resize ein- oder ausschalten
  3. Wählen Sie die folgenden Optionen für Responsive Resize:

    • Automatisch: Bedingungen werden automatisch zum Skalieren der Zeichenfläche verwendet.
    • Manuell: Ermöglicht Ihnen das Festlegen von manuellen Bedingungen im Eigenschafteninspektor.
    Responsive Resize einschalten, „Manuell“ auswählen und Bedingungen anzeigen
    Responsive Resize einschalten, „Manuell“ auswählen und Bedingungen anzeigen

Wie überschreibe ich Responsive Resize für Gruppen?

Responsive Resize ist das Standardverhalten beim Skalieren einer Mehrfachauswahl oder Gruppe. Um die Aktivierung von Responsive Resize aufzuheben, haben Sie folgende Möglichkeiten: 

  • Verwenden Sie für eine skalierte Größenänderung die Umschalttaste, um das Responsive-Verhalten vorübergehend zu überschreiben. Ziehen Sie einen der Auswahlziehpunkte an den Ecken, um beim Skalieren das Seitenverhältnis der Gruppe beizubehalten.
  • Deaktivieren Sie die Option „Responsive Resize“ im Eigenschafteninspektor.

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