Richtlinien für das Skalieren auf Bildschirme (Windows Store-Apps)
In diesem Thema werden bewährte Methoden zum Gestalten und Erstellen eines Layouts für Windows Store-Apps beschrieben, das sich an die verschiedenen von Windows 8 unterstützten Bildschirmgrößen anpasst.
Windows 8 kann auf Bildschirmen verschiedenster Größen ausgeführt werden - von kleinen Tabletbildschirm über mittelgroße Laptopbildschirme bis hin zu großen Desktopbildschirmen oder All-in-One-Bildschirmen. Windows Store-Apps können mit allen Bildschirmgrößen ausgeführt werden, die Windows 8 unterstützt. Im Allgemeinen haben größere Bildschirme auch höhere Auflösungen. Daher bieten diese größeren Bildschirme einen größeren Anzeigebereich, den die App nutzen kann.
In diesem Dokument werden die folgenden Begriffe verwendet.
| Term | Description |
|---|---|
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. |
Bildschirmgröße
Am stärksten schlägt sich die Bildschirmgröße bei Windows Store-Apps in der Bildschirmauflösung nieder. Größere Bildschirme haben eine höhere Auflösung und bieten daher mehr verfügbaren Platz bzw. mehr freie Fläche für eine Anwendung. Benutzer erwarten bei größeren Bildschirmen, mehr Inhalt und mehr Funktionalität zu sehen.
Die Verwaltung dieser Bildschirmfläche muss vom App-Entwickler und -Designer gut durchdacht werden. Das Erscheinungsbild der App auf großen Bildschirmen hängt von den Parametern ab, die Sie beim Design und bei der Entwicklung für das Layout definieren.
Plattform, Steuerelemente und Vorlagen sind alle so konzipiert, dass sie sich für unterschiedliche Bildschirmgrößen eignen. Ein großer Teil des Layouts einer App lässt sich mit geringem zusätzlichem Aufwand oder Code skalieren. Das Layout der obersten Ebene, die Inhaltsbereiche, die App-Navigation und die Befehle erfordern einige Überlegungen, um sicherzustellen, dass sie auf größeren Bildschirmen vorhersehbar und intuitiv platziert werden.
Im folgenden Bild wird veranschaulicht, wie große leere Bereiche entstehen können, wenn Sie kein anpassbares Layout für große Bildschirme erstellen.
.png "Großer leerer Bereich aufgrund eines inflexiblen Layouts")
Minimale Bildschirmauflösungen
Eine App sollte zwei primäre Bildschirmauflösungen unterstützen:
- Die minimale Auflösung für die Ausführung von Windows Store-Apps beträgt 1024 x 768.
- Für die Unterstützung aller Features von Windows 8 (einschließlich Multitasking mit Andocken) ist mindestens eine Auflösung von 1366 x 768 erforderlich. Weitere Informationen zur angedockten Ansicht finden Sie unter Richtlinien für angedockte und gefüllte Ansichten.
Windows Store-Apps können nicht mit den Auflösungen 1024 x 600 oder 1280 x 720 ausgeführt werden.
In der folgenden Tabelle finden Sie die empfohlenen Methoden für die primären Bildschirmauflösungen.
| Methode | Beschreibung |
|---|---|
Entwerfen Sie für die minimale Auflösung 1024 x 768. |
Diese Methode bietet folgende Vorteile:
|
Entwerfen Sie für die optimale Auflösung 1366 x 768. |
Diese Methode bietet folgende Vorteile:
|
Entwerfen für größere Bildschirme
Wenn Sie eine App für größere Bildschirme entwerfen, müssen Sie berücksichtigen, wie Layout, Ästhetik, Proportionen und Steuerelemente auf einen größeren Bereich angewendet werden können. Darüber hinaus kann jede App beliebig viele unterschiedlich komplexe Layouts haben. Jedes Layout kann für größere Bildschirme einzeln betrachtet werden.
In der folgenden Tabelle finden Sie die empfohlenen Methoden für größere Bildschirme.
| Methode | Beschreibung |
|---|---|
Füllen Sie den Bildschirm aus. |
Diese Methode hat den Vorteil, dass die Benutzer unabhängig von der Bildschirmgröße einen so umfassenden Eindruck wie möglich haben. Apps sollten den Eindruck erwecken, dass sie den Bildschirm bestmöglich ausfüllen und durchdacht für unterschiedliche Bildschrmgrößen gestaltet wurden. Benutzer, die größere Monitor kaufen, erwarten von ihren Apps, dass sie auf diesen großen Bildschirmen gut aussehen und den Bildschirm nach Möglichkeit mit mehr Inhalt füllen. |
Entscheiden Sie zwischen einem festen oder adaptiven Layout. |
Es gibt zwei Techniken, die Sie verwenden können, um eine App zu erstellen, die auf verschiedene Bildschirmgrößen skaliert werden kann. Die Auswahl hängt von der Komplexität des Layouts und von den Verwendungsszenarien ab. |
Festes Layout
Ein festes Layout treffen Sie am häufigsten bei Spielen oder spieleähnlichen Apps an, die hauptsächlich aus Bitmapbildern bestehen. Diese Art von Layout hat meist eine feste Inhaltsmenge (beispielsweise ein Spielbrett). Mehr Inhalt anzuzeigen ist nicht möglich oder würde vermutlich keinen Mehrwert bieten. Diese Layouts können oder werden nicht dynamisch geändert oder an verschiedene Bildschirmgrößen angepasst, da sie mit festen Pixelwerten entworfen werden. Windows 8 skaliert diese Apps mit einem in die Plattform integrierten Verfahren automatisch passend.
.jpg "Festes Layout bei verschiedenen Bildschirmgrößen")
Festes Layout: Passend skalieren
Wenn Sie zum Schluss kommen, dass Ihre App ein festes Layout benötigt, das nicht an verschiedene Bildschirmgrößen angepasst werden kann, können Sie durch passendes Skalieren bewirken, dass das feste Layout den Bildschirm bei verschiedenen Bildschirmgrößen ausfüllt. Dies wird im folgenden Bild gezeigt.
.png "Passend skalieren für festes Layout")
In der folgenden Tabelle finden Sie die empfohlenen Methoden für Apps, die die Funktionalität für passendes Skalieren verwenden.
| Methode | Beschreibung |
|---|---|
Beginnen Sie mit den Basisauflösungen. |
Wenn Sie ein festes Layout designen, entwerfen Sie dieses zunächst für die Basisauflösungen 1024 x 768 und 1366 x 768. Dieses Layout wird auf größere Bildschirme skaliert. |
Platzieren Sie den festen Inhalt in einem ViewBox-Steuerelement. |
Das ViewBox-Steuerelement skaliert ein festes Layout so, dass es auf den Bildschirm passt. |
Platzieren Sie keine adaptiven Steuerelemente (beispielsweise "AppBar") im ViewBox-Steuerelement. |
Diese Steuerelemente passen sich automatisch an verschiedene Bildschirmgrößen an. |
Definieren Sie Stil und Farbe für das Letterboxformat. |
Da feste App-Layouts 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. Sie können die Wahrnehmung positiv beeinflussen, indem Sie für das Letterboxformat einen Stil und eine Farbe definieren, die mit dem Stil bzw. der Farbe der App oder der Hardware harmonieren. Die Farbe des Letterboxformats 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 200 % 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 Bilder bereit, die doppelt so groß sind wie die Designgröße. Die Bilder können dann kleiner statt größer skaliert werden. Die folgenden Bilder veranschaulichen, wie sich die Qualität skalarer Bilder (rechts) im Vergleich zu Vektorbildern (links) verschlechtert, wenn sie größer skaliert werden.
|
.png "Größenänderung von Vektorbildern und skalaren Bildern")
Adaptives Layout
Adaptive Layouts sind am häufigsten in Apps für die Nutzung, Verwaltung und Erstellung von Inhalten anzutreffen. Diese Layouts bestehen meist aus definierten proportionalen Elementen mit einem Drahtmodell der obersten Ebene. So hat beispielsweise eine Newsreader-App eine Kopfzeile, eine Fußzeile und in der Mitte einen Inhaltsbereich. Diese Layouts ändern sich dynamisch und passen sich an verschiedene Bildschirmgrößen an. Sie zeigen mehr Inhalt an und füllen die Fläche gemäß den Regeln des Layouts dynamisch. Windows 8 unterstützt diese Apps mit adaptiven Layouttechniken, die weiter unten ausführlicher beschrieben werden.
.jpg "Adaptives Layout bei verschiedenen Bildschirmgrößen")
Adaptives Layout: Verwalten der Fläche
Wenn Sie zum Schluss kommen, dass als App-Layout ein adaptives Layout zur Anpassung an verschiedene Bildschirmgrößen geeignet ist, bestimmen Sie anhand der folgenden Überlegungen, wie die App die gesamte verfügbare Fläche ausnutzen kann.
In der folgenden Tabelle finden Sie die empfohlenen Methoden für Apps mit adaptivem Layout.
| Methode | Beschreibung |
|---|---|
Bestimmen Sie, wie die einzelnen adaptiven Bereiche die verfügbare Fläche nutzen können. |
Bestimmen Sie für jede Zelle, die Sie als in horizontaler oder vertikaler Richtung adaptiv identifiziert haben, wie das App-Layout diese Fläche auf einem größeren Bildschirm nutzen soll. |
Bestimmen Sie das Layoutdrahtmodell der obersten Ebene. |
Dieses Drahtmodell sollte die Bereiche der obersten Ebene der App beschreiben. Aus dem Drahtmodell sollten die Positionen der Bereiche für Kopfzeile, Navigation und Inhalt hervorgehen. Im folgenden Bild wird ein Drahtmodell der obersten Ebene veranschaulicht.
|
Bestimmen Sie, welche Teile des Layout fest bzw. adaptiv sind. |
Bestimmen Sie für jede Zelle des Drahtmodells der obersten Ebene, wie die Größe der einzelnen Zellen vertikal und horizontal angepasst werden soll, wenn die App in verschiedenen Größen angezeigt wird. Diese Beschreibung des Drahtmodells der obersten Ebene und das Größenänderungsverhalten können Sie verwenden, um die Parameter für ein GridLayout-Objekt zu definieren.
|
Bestimmen Sie, welche Dimensionen der einzelnen adaptiven Bereiche angepasst werden. |
Bestimmen Sie für jede Zelle, die Sie als in horizontaler oder vertikaler Richtung adaptiv identifiziert haben, wie das App-Layout diese Fläche auf größeren Bildschirmen nutzen soll. |
Bestimmen Sie, wie die App die Fläche in adaptiven Dimensionen nutzen soll. |
Wenn Sie bestimmt haben, wie die einzelnen Bereiche der App an unterschiedliche Größen angepasst werden sollen, müssen Sie im nächsten Schritt überlegen, wie die App die Fläche nutzen soll. Es gibt viele Techniken, die die App verwenden und kombinieren kann, um die Fläche zu nutzen. Alle diese Techniken werden von der Windows 8-Plattform und den zugehörigen Steuerelementen unterstützt. |
Stellen Sie sicher, dass die Breite und Höhe aller Auflistungsansichten auf 100 % festgelegt ist. |
Ein ListView-Steuerelement füllt automatisch die verfügbare Fläche mit weiteren Elementen.
|
Verwenden Sie für Text gegebenenfalls ein mehrspaltiges Layout. |
Beim mehrspaltigen Layout werden zur Verbesserung der Lesbarkeit automatisch Spalten hinzugefügt, und der Inhalt wird umgebrochen, um die verfügbare Fläche auszufüllen.
|
Verwenden Sie gegebenenfalls für Bilder ein canvas-Objekt. |
Ein canvas-Objekt wird automatisch erweitert, um die verfügbare Fläche auszufüllen.
|
Zeigen Sie mehr Leerraum. |
Zeigen Sie die gleiche Menge von App-Inhalt an, indem Sie zusätzlichen Leerraum einfügen.
|
Zeigen Sie mehr von der App. |
Zeigen Sie eine größeren Teile des Inhalts der App. Abhängig vom Umbrechen des Inhalts sind Sie möglicherweise auch in der Lage, mehr Leeraum anzuzeigen.
|
.png "Design eines Drahtmodells der obersten Ebene")
.png "Spezifikation des Drahtmodells")
.png "Auf einem kleinen und auf einem großen Bildschirm angezeigte Auflistung")
.png "Auf einem kleinen und auf einem großen Bildschirm angezeigtes mehrspaltiges Layout")
.png "Auf einem kleinen und auf einem großen Bildschirm angezeigte Canvas")
.png "Zwei Kachellayouts mit Leerraum")
.png "Zwei Kachellayouts")
Testen des App-Layouts
Es ist wichtig, Apps mit verschiedenen Bildschirmgrößen zu testen. Uns ist bewusst, dass den meisten Entwicklern nicht beliebig viele Geräte zur Verfügung stehen. Daher haben wir Unterstützung für das Testen von Apps mit verschiedenen Bildschirmgrößen in Tools wie Visual Studio 11 integriert. Dort können Entwickler mit Windows Simulator ihre Apps wie im folgenden Bild gezeigt mit den verschiedensten Bildschirmgrößen, Ausrichtungen und Pixeldichten ausführen.
.png "Windows Simulator in Visual Studio 11")
Blend für Microsoft Visual Studio 2012 für Windows 8 (siehe folgendes Bild) bietet ein Plattformmenü, mit dessen Hilfe Entwickler im Handumdrehen Apps mit verschiedenen Bildschirmgrößen und Pixeldichten designen können. Die Canvas in Blend wird abhängig von der im Plattformmenü ausgewählten Bildschirmoption dynamisch aktualisiert.
.png "Plattformmenü von Blend mit einer Vielzahl an Optionen für die Bildschirmgröße")
Related topics
Build date: 7/2/2013