Richtlinien zur Unterstützung mehrerer Bildschirmgrößen

Artikel
05/15/2015

Windows- und Windows Phone Store-Apps können auf einer Vielzahl von Geräte mit unterschiedlichen Bildschirmgrößen und -auflösungen ausgeführt werden. Benutzer können auch die Bildschirmausrichtung ändern, die Größe der App – wenn sie unter Windows ausgeführt wird – kontinuierlich auf eine Mindestbreite ändern oder die App neben anderen Apps anzeigen. Unabhängig davon, ob ein Benutzer die App auf einem Telefon, Tablet-PC, Laptop, Desktop-PC oder PPI-Gerät verwendet, müssen Sie sicherstellen, dass die UI optisch ansprechend ist und einwandfrei funktioniert. Folgen Sie beim Entwerfen einer UI, die sich an sämtliche Bildschirmgrößen und Ausrichtungen anpasst, die folgenden Richtlinien.

Spezifische Anweisungen zum Anpassen einer Windows Store-App an schmale Fenstergrößen finden Sie unter Guidelines for resizing to narrow layouts.

Beschreibung

Ihre App wird wahrscheinlich auf Geräten mit unterschiedlichen Bildschirmgrößen ausgeführt, z. B. einem Telefon mit geringer Bildschirmgröße, einem Laptop mit mittlerer Bildschirmgröße und vielleicht auf einem All-in-One- oder PPI-Bildschirm. Je nach Bildschirmgröße und -ausrichtung variiert der Anteil des sichtbaren Bereichs Ihrer App, den die App nutzen kann.

Beispiel-App auf einem Tabletgerät

Beispiel-App auf einem großen Desktopmonitor

Folgende Begriffe sind wichtig für das Verständnis der Skalierung auf verschiedene Bildschirmgrößen.

Benennung	Beschreibung
Bildschirmgröße	Die physische Größe des Bildschirms in Zoll. Normalerweise wird hierzu die Diagonale gemessen.
Bildschirmauflösung	Die vom Bildschirm unterstützte Pixelanzahl in horizontaler und vertikaler Dimension. Beispiel: 1366 x 768.
Seitenverhältnis	Die Form des Bildschirms als Verhältnis der Breite zur Höhe. Beispiel: 16:9.

Plattform, Steuerelemente und Vorlagen sind alle so konzipiert, dass sie sich für unterschiedliche Bildschirmgrößen, Auflösungen und Seitenverhältnisse eignen. Ein großer Teil des Layouts einer App passt sich automatisch an Bildschirmänderungen an. Sie müssen jedoch das Layout der obersten Ebene, die Inhaltsbereiche, die App-Navigation und die Befehle berücksichtigen, um sicherzustellen, dass sie auf größeren Bildschirmen vorhersehbar und intuitiv platziert werden.

In den folgenden Tabellen sind die wichtigsten Bildschirmgrößen aufgeführt, die Sie beim Entwerfen Ihrer App berücksichtigen müssen.

Vollbildgröße (effektive Pixelauflösung)	Beschreibung des Geräts
1366 x 768	Tablet-PCs, Convertible-Tablet-PCs und viele Laptops (Seitenverhältnis 16:9); Basisauflösung für Laptops und Desktop-PCs
1920 x 1080	Große Laptops und Geräte (Seitenverhältnis 16:9)
2560 x 1440	Sehr große All-in-One-Geräte (Seitenverhältnis 16:9)
1280 x 800 und 800 x 1280	Kleine, in erster Linie für Hochformat ausgelegte Geräte (Seitenverhältnis 16:10)
1024 x 768 und 768 x 1024	Kleine, in erster Linie für Querformat ausgelegte Geräte (Seitenverhältnis 4:3)
1371 x 857 und 857 x 1371	Kleine Geräte (Seitenverhältnis 16:10)
384 x 640	4,5-Zoll-Smartphone (Seitenverhältnis 15:9)
400 x 711	4,7-Zoll-Smartphone (Seitenverhältnis 16:9)
450 x 800	5,5-Zoll-Smartphone (Seitenverhältnis 16:9)
491 x 873	6-Zoll-Smartphone (Seitenverhältnis 16:9)

Wenn eine App unter Windows, nicht auf Windows Phone, ausgeführt werden soll, müssen Sie die Bildschirmgröße berücksichtigen, wenn ein Benutzer zwei Apps verwendet, die sich den Bildschirm teilen, oder der Benutzer die App auf die Mindestbreite reduziert.

Split-Screen-Größe (effektive Pixelauflösung)	Beschreibung
672 x 768	In zwei Hälften geteilter Bildschirm auf einem 1366 x 768-Gerät
500 x 768	Standardmäßige Mindestgröße für Apps; in zwei Hälften geteilter Bildschirm auf einem 1024 x 768-Gerät
320 x 768	Mindestgröße für Apps, die eine Mindestbreite von 320 Pixel unterstützen

Weitere Empfehlungen zur Skalierung finden Sie unter Guidelines for scaling to pixel density.

Wichtige Vollbild- und Split-Screen-Fenstergrößen

Empfohlene und nicht empfohlene Vorgehensweisen

Verwenden Sie, wenn möglich, flexible Steuerelemente, um dynamisch umgebrochene Inhalte zu unterstützen. Zu den flexiblen Steuerelementen zählen das XAML Grid control, das CSS-Raster, das mehrspaltige CSS-Layout und ScrollViewer control. Rastersteuerelemente können beispielsweise bestimmte Abschnitte der Benutzeroberfläche so anpassen, dass der verfügbare Platz je nach Bildschirmauflösung des Anzeigegeräts optimal ausgenutzt wird. Sie können auch – je nach verfügbarem Platz auf der Anzeige – Inhalte basierend auf der Größe anderen Zellen zuweisen.
Gestalten Sie das Layout und die Steuerelemente Ihrer App so, dass diese an Anzeigen der Mindestgröße angepasst werden können und vollständig funktionsfähig sind:
- Die standardmäßige Mindestbreite für Windows Store-Apps beträgt 500 Pixel.
- Die nicht standardmäßige Mindestbreite für Windows Store-Apps beträgt 320 Pixel.
- Die Mindestbreite (nicht anpassbar) für Windows Phone Store-Apps beträgt 384 Pixel (Hochformat) und 640 Pixel (Querformat).
Die Benutzeroberfläche und die Steuerelemente müssen in einem Fenster beliebiger Größe funktionieren, einschließlich der oben genannten Mindestgrößen. Achten Sie besonders auf folgende Steuerelemente:
Legen Sie Ihr App-Design so aus, dass der Platz auf einem großen Bildschirm effektiv genutzt wird, und verwenden Sie ein Layout, das automatisch dynamisch umgebrochen wird. Vermeiden Sie große leere Bereiche.
Testen Sie die Funktion Ihrer App auf den wichtigsten Gerätegrößen. Neben tatsächlichen Geräten können Sie zum Testen auch Microsoft Visual Studio Simulator für Windows Store-Apps verwenden. Damit simulieren Sie die Ausführung der App auf physischen Bildschirmen mit verschiedenen Größen, Auflösungen und Ausrichtungen.
Geben Sie für alle input fields eine Mindestgröße an. Mindestgrößen stellen sicher, dass Eingabefelder nicht verschwinden, wenn der Benutzer die Fenstergröße ändert.
Testen Sie, ob die Eingabefelder der App von der Bildschirmtastatur verdeckt werden.
Gehen Sie bei der Verwendung einer absoluten Anordnung sorgfältig vor: Bei nicht ordnungsgemäßer Verwendung kann dies dazu führen, dass die UI nicht auf Änderungen der Fenstergröße und Ausrichtung reagieren kann. Anstatt das Layout hart zu codieren, sollten Sie für die Layoutgestaltung Ihrer UI Positionen verwenden, die zur Laufzeit berechnet werden.
Entwerfen Sie Ihre App für verschiedene Pixeldichten. Weitere Informationen finden Sie unter Richtlinien zum Skalieren auf die Pixeldichte.

Nur Windows Store-Apps

Stellen Sie sicher, dass Ihre App bis zur standardmäßigen Mindestbreite von 500 Pixel vollständig funktionsfähig ist. Spezifische Empfehlungen finden Sie unter Guidelines for narrow layouts.
Wenn Ihre App bei kleineren Größen gut funktioniert, und Sie Benutzer dazu ermuntern möchten, Ihre App auf dem Bildschirm angezeigt zu lassen, können Sie die nicht standardmäßige Mindestbreite von 320 Pixel unterstützen.
Stellen Sie sicher, dass Benutzer die gewünschten Aufgaben weiter ausführen können, wenn sie die Größe von Apps ändern. Behalten Sie z. B. die aktuelle Seite der App, den Status von Bildlaufleisten, die Auswahl und den Fokus bei.
Unterstützen Sie Charms bei allen Bildschirmgrößen. Stellen Sie sicher, dass Flyouts und Bereiche entsprechend skaliert werden.

Hinweis Unter Windows 8 konnte der Benutzer beim Ändern der App-Größe nur zwischen drei Ansichtszuständen wählen: Vollbildansicht, angedockte Ansicht und gefüllte Ansicht. Unter Windows 8.1 können Benutzer eine beliebige App-Größe zwischen Vollbildansicht und Mindestbreite wählen.

Weitere Hinweise zur Verwendung

Automatische Unterstützung von Ausrichtungsänderungen

Benutzer können ihre Telefone, Tablet-PCs und Monitore drehen. Windows behandelt sowohl das Quer- als auch das Hochformat automatisch, sofern Ihre App kein festes Layout verwendet. Sie müssen nur einplanen, wie sich die Breite der App auf ihr Layout auswirkt.

Weitere Informationen dazu, wann die Verwendung eines festen Layouts gegenüber einem flexiblen Layout vorzuziehen ist, finden Sie unten im Abschnitt zum festen Layout.

Quer- und Hochformatlayouts

Verhalten von in der Größe geänderten Apps (nur Windows Store-Apps)

Bei der gleichzeitigen Anzeige mehrerer Apps auf dem Bildschirm gelten die folgenden Besonderheiten für die Interaktion mit der UI:

Wenn der Benutzer die Charms aufruft, gelten diese unabhängig von der Größe der App oder ihrer Position auf dem Bildschirm immer für die App, die der Benutzer zuletzt verwendet hat.
Zwischen den Apps auf dem Bildschirm sind Ziehpunkte vorhanden. Benutzer ändern die Größe von App-Fenstern, indem sie den Ziehpunkt verschieben. Der Ziehpunkt zeigt auch, welche App den Fokus hat.
Versucht der Benutzer, die Größe einer App mithilfe des Ziehpunkts unter die Mindestbreite zu verkleinern, wird die App ausgeblendet.
Dreht der Benutzer das Gerät oder den Monitor, während er mehrere Apps anzeigt, ändert sich die Ausrichtung der Apps nicht.

Feste Layouts

Die meisten Apps können ein dynamisches Layout verwenden, das sich an Änderungen in der Bildschirmgröße und in der Auflösung anpasst und den Inhalt dynamisch umbricht. In manchen Fällen ist für die App möglicherweise ein festes Layout erforderlich. Apps, die nicht inhaltsbezogen sind oder auf der Integrität der Grafik beruhen (beispielsweise Spiele-Apps), müssen ein festes (absolutes) Layout verwenden. Windows skaliert diese Apps mit einem in die Plattform integrierten Verfahren zur passenden Skalierung automatisch passend.

Wenn Sie zum Schluss kommen, dass Ihre App ein festes Layout benötigt, das nicht an verschiedene Bildschirmgrößen angepasst werden soll, können Sie durch passendes Skalieren bewirken, dass das feste Layout den Bildschirm bei verschiedenen Bildschirmgrößen ausfüllt. Dies wird in den folgenden Bildern gezeigt.

Passend skalieren für ein Spiel mit festem Layout

Führen Sie zum passenden Skalieren folgende Schritte aus:

Entwerfen Sie das Layout für die Basisauflösung, beispielsweise 1366 x 768 Pixel (PC/Tablet) oder 384 x 640 Pixel (Smartphone). Dieses Layout wird auf größeren Bildschirmen skaliert.
Platzieren Sie den festen Inhalt in einem ViewBox-Steuerelement (ViewBox in JavaScript and HTML oder Viewbox in C#/VB/C++ and XAML). Das ViewBox-Steuerelement skaliert ein festes Layout so, dass es auf den Bildschirm passt.
Stellen Sie sicher, dass das ViewBox-Steuerelement auf eine Breite und Höhe von 100 % skaliert ist.
Legen Sie die festen Größeneigenschaften des ViewBox-Elements auf die festen Pixelgrößen Ihres Layouts (beispielsweise 1366 x 768 oder 384 x 640) fest.
Wählen Sie eine Farbe für das Letterboxformat. Da feste Steuerelemente nicht als Reaktion auf Änderungen am Seitenverhältnis oder an der Bildschirmgröße dynamisch geändert werden, werden bei der Methode mit passender Skalierung automatisch Zentrierung und das Letterboxformat (horizontal oder vertikal) auf den Inhalt der App angewendet. Die Farbe der Letterboxleisten wird durch die Hintergrundfarbe der obersten Ebene des App-Layouts definiert. Wir empfehlen, eine dunkle Farbe wie Schwarz auszuwählen, die zur Hardware passt, eine neutral Farbe wie Grau, die bewusst gewählt wirkt, oder eine Farbe, die auch im App-Inhalt vorkommt.
Stellen Sie Vektorressourcen oder Ressourcen mit hoher Auflösung bereit. Beim passenden Skalieren wird die Anwendung auf einem großen Desktopmonitor auf verschiedene Größen bis zu 180 % (für Windows) oder 280 % (für Windows Phone) der Designgröße der App skaliert. Vektorressourcen wie beispielsweise SVG-Ressourcen (Scalable Vector Graphics), XAML-Ressourcen (Extensible Application Markup Language) oder Designgrundtypen werden ohne Skalierungsartefakte oder Verschwimmen skaliert. Wenn Rasterressourcen (beispielsweise Bitmapbilder) benötigt werden, stellen Sie MRT-Ressourcen bereit.

Die folgenden Bilder veranschaulichen, wie sich die Qualität skalarer Bilder (rechts) im Vergleich zu Vektorbildern (links) verschlechtert, wenn sie größer skaliert werden.
Platzieren Sie keine adaptiven Steuerelemente im ViewBox-Steuerelement.