Reaktionsfähige DesigntechnikenResponsive design techniques

UWP-Apps verwenden effektive Pixel, um sicherzustellen, dass deine Benutzeroberfläche auf allen Geräten mit Windows erkennbar ist und verwendet werden kann.UWP apps use effective pixels to guarantee that your UI will be legible and usable on all Windows-powered devices. Warum sollten also Sie überhaupt die Benutzeroberfläche Ihrer App für eine bestimmte Gerätefamilie anpassen wollen?So, why would you ever want to customize your app's UI for a specific device family?

  • Effektive Bildschirmbereichsnutzung und reduzierte NavigationTo make the most effective use of space and reduce the need to navigate

    Wenn du eine App für ein Gerät mit einem kleinen Bildschirm entwickelst, z. B. ein Tablet, kann die App auf einem PC mit einem viel größeren Bildschirm verwendet werden, ein großer Teil des Bildschirmbereichs bleibt jedoch vermutlich ungenutzt.If you design an app to look good on a device that has a small screen, such as a tablet, the app will be usable on a PC with a much bigger display, but there will probably be some wasted space. Sie können die App anpassen, damit mehr Inhalt angezeigt wird, wenn eine bestimmte Bildschirmgröße überschritten wird.You can customize the app to display more content when the screen is above a certain size. Bei einer Shopping-App beispielsweise wird auf einem Tablet ggf. jeweils eine Kategorie anzeigt, während auf einem PC oder Laptop mehrere Kategorien und Produkte gleichzeitig angezeigt werden.For example, a shopping app might display one merchandise category at a time on a tablet, but show multiple categories and products simultaneously on a PC or laptop.

    Durch das Platzieren von mehr Inhalt auf dem Bildschirm reduzieren Sie die erforderliche Navigation des Benutzers.By putting more content on the screen, you reduce the amount of navigation that the user needs to perform.

  • So profitierst du von GerätefunktionenTo take advantage of devices' capabilities

    Bestimmte Geräte verfügen über bestimmte Gerätefunktionen.Certain devices are more likely to have certain device capabilities. Laptops verfügen beispielsweise wahrscheinlich über einen Positionssensor und eine Kamera, während ein PC möglicherweise beide nicht aufweist.For example, laptops are likely to have a location sensor and a camera, while a TV might not have either. Ihre App kann erkennen, welche Funktionen verfügbar sind und Features die Verwendung dieser ermöglichen.Your app can detect which capabilities are available and enable features that use them.

  • So optimierst du für EingabenTo optimize for input

    Die universelle Steuerelementbibliothek kann mit allen Eingabetypen (Toucheingabe, Stift, Tastatur, Maus) verwendet werden. Sie können jedoch eine Optimierung für bestimmte Eingabetypen erreichen, indem Sie Ihre UI-Elemente neu anordnen.The universal control library works with all input types (touch, pen, keyboard, mouse), but you can still optimize for certain input types by re-arranging your UI elements. Wenn Sie z. B. Elemente für die Navigation am unteren Bildschirmrand platzieren, ist der Zugriff auf diese für Smartphonebenutzer einfacher; die meisten PC-Benutzer hingegen erwarten, dass Elemente für die Navigation eher am oberen Bildschirmrand angezeigt werden.For example, if you place navigation elements at the bottom of the screen, they'll be easier for phone users to access—but most PC users expect to see navigation elements toward the top of the screen.

Wenn Sie die Benutzeroberfläche Ihrer App für bestimmte Bildschirmbreiten optimieren, spricht man vom Erstellen eines reaktionsfähigen Designs.When you optimize your app's UI for specific screen widths, we say that you're creating a responsive design. Im folgenden werden sechs reaktionsfähige Designtechniken aufgeführt, mit denen Sie die Benutzeroberfläche Ihrer App anpassen können:Here are six responsive design techniques you can use to customize your app's UI.

Tipp

Viele UWP-Steuerelemente implementieren dieses dynamische Verhalten automatisch.Many UWP controls automatically implement these responsive behaviors. Zum Erstellen einer dynamischen Benutzeroberfläche empfiehlt es sich, die UWP-Steuerelemente zu überprüfen.To create a responsive UI, we recommend checking out the UWP controls.

Ändern der PositionReposition

Du kannst den Ort und die Position der UI-Elemente ändern, um die Fenstergröße optimal zu nutzen.You can alter the location and position of UI elements to make the most of the window size. In diesem Beispiel werden im kleineren Fenster die Elemente vertikal übereinander dargestellt.In this example, the smaller window stacks elements vertically. Wenn die App in ein größeres Fenster übersetzt wird, können Elemente die größere Fensterbreite nutzen.When the app translates to a larger window, elements can take advantage of the wider window width.

Ändern der Position

In diesem Beispielentwurf einer Foto-App ändert die Foto-App die Position des Inhalts auf größeren Bildschirmen.In this example design for a photo app, the photo app repositions its content on larger screens.

Ändern der GrößeResize

Du kannst das Verhalten für die Fenstergröße optimieren, indem du die Ränder und die Größe der Benutzeroberflächenelemente anpasst.You can optimize for the window size by adjusting the margins and size of UI elements. Dadurch kann beispielsweise die Lesbarkeit auf einem größeren Bildschirm verbessert werden, indem der Inhaltsframe einfach vergrößert wird.For example, this could augment the reading experience on a larger screen by simply growing the content frame.

Ändern der Größe von Designelementen

NeuanordnenReflow

Durch Änderung der Anordnung von UI-Elementen basierend auf dem Gerät und der Ausrichtung kann Ihre App eine optimale Ansicht der Inhalte bieten.By changing the flow of UI elements based on device and orientation, your app can offer an optimal display of content. Beim Wechseln zu einem größeren Bildschirm ist es beispielsweise eventuell sinnvoll, Spalten hinzuzufügen, zu größeren Containern zu wechseln oder Listenelemente auf andere Weise zu generieren.For instance, when going to a larger screen, it might make sense to add columns, use larger containers, or generate list items in a different way.

Dieses Beispiel zeigt, wie eine einzelne Spalte mit vertikal scrollendem Inhalt auf einem kleineren Bildschirm zur Anzeige von zwei Textspalten auf einem größeren Bildschirm neu angeordnet werden kann.This example shows how a single column of vertically scrolling content on a smaller screen that can be reflowed on a larger screen to display two columns of text.

Neuanordnen von Designelementen

Anzeigen/ausblendenShow/hide

Das Ein- und Ausblenden von UI-Elementen kann von der Bildschirmfläche abhängig gemacht werden sowie davon, ob das Gerät zusätzliche Funktionen, bestimmte Situationen oder bevorzugte Bildschirmausrichtungen unterstützt.You can show or hide UI elements based on screen real estate, or when the device supports additional functionality, specific situations, or preferred screen orientations.

Ausblenden von Designelementen

Bei Medienplayer-Steuerelementen werden z. B. auf kleineren Bildschirmen weniger Schaltflächen und auf größeren Bildschirmen ein erweiterter Satz angezeigt.For example, media player controls reduce the button set on smaller screens and expand on larger screens. Der Medienplayer in einem größeren Fenster kann wesentlich mehr Funktionen auf dem Bildschirm anzeigen als in einem kleineren Fenster.The media player on a larger window can handle far more on-screen functionality than it can on a smaller window.

Die Methode zum Ein- und Ausblenden umfasst die Wahl, wann mehr Metadaten angezeigt werden sollen.Part of the reveal-or-hide technique includes choosing when to display more metadata. Bei kleineren Fenstern ist es am besten, eine minimale Menge an Metadaten anzuzeigen.With smaller windows, it's best to show a minimal amount of metadata. In größeren Fenstern kann eine beträchtliche Menge von Metadaten angezeigt werden.With larger windows, a significant amount of metadata can be surfaced. Einige Beispiele für das Anzeigen oder Ausblenden von Metadaten:Some examples of when to show or hide metadata include:

  • In einer E-Mail-App können Sie den Avatar des Benutzers anzeigen.In an email app, you can display the user's avatar.
  • In einer Musik-App können Sie weitere Informationen zu einem Album oder Interpreten anzeigen.In a music app, you can display more info about an album or artist.
  • In einer Video-App können Sie weitere Informationen zu einem Film oder einer Show anzeigen, z. B. Details zu Besetzung und Crew.In a video app, you can display more info about a film or a show, such as showing cast and crew details.
  • In jeder App können Sie Spalten aufteilen und mehr Details anzeigen.In any app, you can break apart columns and reveal more details.
  • In jeder App können Sie etwas vertikal oder horizontal anordnen.In any app, you can take something that's vertically stacked and lay it out horizontally. Beim Wechseln von Smartphone oder Phablet auf größere Geräte, können aus gestapelten Listenelementen Zeilen mit Listenelementen und Spalten mit Metadaten werden.When going from phone or phablet to larger devices, stacked list items can change to reveal rows of list items and columns of metadata.

ErsetzenReplace

Mit diesem Verfahren kann die Benutzeroberfläche für bestimmte Breakpoints geändert werden.This technique lets you switch the user interface for a specific breakpoints. In diesem Beispiel ist der Navigationsbereich mit seiner kompakten, kurzzeitigen Benutzeroberfläche gut für kleinere Bildschirme geeignet, auf einem größeren Bildschirm stellen jedoch Registerkarten u. U. die bessere Wahl dar.In this example, the nav pane and its compact, transient UI works well for a smaller screen, but on a larger screen, tabs might be a better choice.

Ersetzen von Designelementen

Das Steuerelement NavigationView unterstützt dieses dynamische Verfahren, indem es Benutzern ermöglicht, den Bereich oben oder links zu positionieren.The NavigationView control supports this responsive technique, by letting users set the pane position to either top or left.

Ändern der ArchitekturRe-architect

Sie können die Architektur Ihrer App reduzieren oder erweitern, um eine bessere Darstellung für bestimmte Geräte zu erzielen.You can collapse or fork the architecture of your app to better target specific devices. In diesem Beispiel zeigt die Erweiterung des Fensters das gesamte Master/Detail-Muster an.In this example, expanding the window shows the entire master/details pattern.

ein Beispiel für das erneute Erstellen der Architektur einer Benutzeroberfläche