Richtlinien für Größenänderungen in schmale Layouts

Artikel
07/22/2015

Entwerfen Sie die Benutzeroberfläche Ihrer App so, dass sie sich an hohe und schmale Ansichten anpasst, wenn Benutzer die Größe der App ändern. Berücksichtigen Sie die Richtlinien in diesem Thema, wenn Sie Folgendes planen:

Sie möchten anstelle der standardmäßigen Mindestbreite von 500 Pixel eine Mindestbreite von 320 Pixel (schmales Layout) in Ihrer App verwenden.
Sie möchten ein App-Design implementieren, das zu einem vertikalen Layout wechselt, wenn der Benutzer die Größe der App so ändert, dass sie höher als breit ist (hohes Layout).

Allgemeine Empfehlungen finden Sie unter Guidelines for supporting multiple screen sizes. Spezielle Ratschläge zum Entwerfen von Spielen für schmale Layouts finden Sie in der Ideensammlung für Spiele.

Ein Beispiel für die Anwendung dieser Richtlinien finden Sie hier:

Beispiele

Schmale Layouts

Die standardmäßige Mindestbreite einer Windows Store-App beträgt 500 Pixel. Hier sehen Sie eine App mit einer Breite von 500 Pixel.

App mit der standardmäßigen Mindestbreite von 500 Pixel.

Und hier sehen Sie die App mit einer Breite von 320 Pixel.

App mit geringer Mindestbreite von 320 Pixel.

Wenn Sie eine Mindestbreite von weniger als 500 Pixel unterstützen möchten, sind einige Designänderungen erforderlich, damit die App bei dieser Breite funktionsfähig und verwendbar ist. Beachten Sie die Informationen unter Empfohlene und nicht empfohlene Vorgehensweisen, um sicherzustellen, dass Ihre App bei einer Breite von weniger als 500 Pixel effektiv ist.

Hohe Layouts

Außerdem können Sie Designänderungen für die Anzeige der App mit größerer Höhe als Breite vornehmen. Sie können die App z. B. so entwerfen, dass sie nicht horizontal, sondern vertikal verschoben wird, wenn sie höher als breit ist.

Hier sehen Sie eine App, die bei der Anzeige im Vollbildmodus horizontal verschoben wird.

App, die bei der Anzeige im Vollbildmodus horizontal verschoben wird

Hier sehen Sie die App, wenn sie höher als breit ist. Die App wird vertikal verschoben.

App, die höher als breit ist und vertikal verschoben wird.

Sollte meine App eine Mindestbreite von 320 Pixeln unterstützen?

Die Entscheidung, ob eine App eine geringere Breite als die Mindestbreite unterstützen soll, hängt davon ab, welche Aktionen Benutzer mit der App durchführen sollen. In den folgenden allgemeinen Szenarien sollten geringe Breiten bis 320 Pixel unterstützt werden:

Multitasking ist für Ihre App wichtig.
Sie möchten, dass Benutzer Ihre App auf dem Bildschirm lassen.
Ihre App arbeitet in einem Ergänzungsszenario mit einer anderen App zusammen.
Ihre App passt sich bei der Anzeige mit geringer Breite gut an.

Wenn Sie die standardmäßige Mindestbreite von 500 Pixel beibehalten, sind für die Anzeige der App mit geringen Breiten keine besonderen Designänderungen erforderlich.

Empfohlene und nicht empfohlene Vorgehensweisen

Wenn Ihre App bei der Anzeige im Vollbildmodus horizontal verschoben wird, wechseln Sie zur vertikalen Verschiebung, wenn die App höher als breit ist.
Um die schmale Größe zu unterstützen, nehmen Sie folgende Designänderungen vor, wenn die Breite der App weniger als 500 Pixel beträgt:
- Verwenden Sie den kleineren Schaltflächenstil für die Schaltfläche "Zurück". Weitere Informationen zu den Größen der Schaltfläche "Zurück" finden Sie in der Symbolliste.
- Verwenden Sie 20 Pixel für den linken Rand.
- Verwenden Sie den Schriftgrad 20 pt für den App-Kopf.
- Verwenden Sie kleinere Offsetwerte für Seitenübergangsanimationen und Inhaltsübergangsanimationen.
Hier sehen Sie die Rechner-App mit einer normalen Breite:

Hier sehen Sie dieselbe App mit einer Breite von 320 Pixel. Entsprechend den Empfehlungen für schmale Layouts beträgt der linke Rand nun 20 Pixel, und die Schriftgröße in der Kopfzeile wurde auf 20 Punkt reduziert
Falls Ihre App bei der Anzeige im Vollbildmodus vertikal verschoben wird, verwenden Sie ein einspaltiges Layout oder eine Einzelansicht, wenn die App höher als breit ist. Sie können die genaue Breite festlegen, bei der das App-Layout auf ein einspaltiges Layout bzw. eine Einzelansicht umgeschaltet wird. Stellen Sie sicher, dass Benutzer im einspaltigen Layout bzw. in der Einzelansicht zwischen den Bereichen navigieren können.
Entwerfen Sie Ihr App-Layout und alle Steuerelemente so, dass sie auch bei der Mindestgröße funktionieren. Ihre Steuerelemente müssen sowohl in hohen als auch in schmalen App-Fenstern verwendbar sein. Achten Sie besonders auf folgende Steuerelemente:
Es darf keine Navigation zu einem anderen Teil der App stattfinden, wenn die Fenstergröße in die geringe Breite geändert wird.
Unterstützen Sie keine Breite geringer als die standardmäßige Mindestbreite (500 Pixel), wenn der überwiegende Teil der App-Funktionen in der schmalen Ansicht nicht beibehalten werden kann.