Definieren von Layouts und Ansichten (Windows Store-Apps mit JavaScript und HTML)

Sie können Windows Store-Apps erstellen, die durch konsistente und vorhersagbare Verwaltung der Benutzeroberfläche eine dynamische und harmonische Erfahrung für eine Vielzahl von Formfaktoren, Anzeigegrößen und Ansichtszuständen bieten. Sie möchten, dass Ihre App toll aussieht, wenn Benutzer sie auf einem Tablet oder einem großen HD-Monitor anzeigen, wenn sie ihren Bildschirm in das Hochformat drehen und wenn sie die App-Größe ändern. Wenn Sie die von Ihren Benutzern verwendeten Geräte und Ansichten einplanen, kann Ihre UI entsprechend der Wahl des Benutzers elegant dynamisch umgebrochen werden.

Vollbild im Querformat, Vollbild im Hochformat und schmale Ansicht nach Größenänderung

Beim Angeben der UI einer Windows Store-App mit JavaScript sind zwei primäre Faktoren wichtig: die von der App unterstützten Ansichten und die für die App erforderlichen Layouts. Sie verwenden Cascading Stylesheets (CSS), um die Arbeit zu erledigen.

CSS Sie beschreiben und verwalten Ihre Benutzeroberfläche durch standardbasiertes CSS, das den Inhalt von der Darstellung trennt, d. h. das, was dargestellt ist, wird von dem getrennt, wie es dargestellt ist. Durch diese Trennung können Sie eine konsistente, brauchbare und angenehme Benutzeroberfläche bereitstellen, die mehrere Geräte, Formfaktoren, Bildschirmgrößen, Benutzereinstellungen und Ansichtszustände unterstützt.

Layouts Layouts sind Mechanismen, mit denen Ihre App die von ihr unterstützten Ansichten anpasst. Sie entwerfen, strukturieren und präsentieren Ihren Inhalt mithilfe von CSS3-Layoutmodulen (Cascading Stylesheets, Level 3) wie Rastern, mehreren Spalten, Bereichen und FlexBoxes, die sich an die vom Benutzer gewählte Ansicht anpassen können.

Eine App mit der Funktion semantischer Zoom kann semantische Schwellenwerte angeben, sodass die UI je nach Granularität und Menge der angezeigten Informationen zwischen einem Rasterlayout und einem linearen Layout wechseln kann.

Ansichten Eine Ansicht ist die Art und Weise, in der ein Benutzer auf Inhalt zugreift und ihn ändert.

  • Ausrichtung im Querformat oder Hochformat
  • Vollbild oder geänderte Größe
  • Schwenkbare, zoomfähige, skalierte oder in der Größe geänderte Benutzeroberfläche
  • Bestimmte UI-Elements wie ein Suchergebnisbereich oder eine Ordnerstruktur

Zum Definieren von Layouts und Ansichten für eine Windows Store-App müssen Sie mit HTML, JavaScript und CSS vertraut sein.

Inhalt dieses Abschnitts

ThemaBeschreibung

Schnellstart: Definieren von App-Layouts

Sie können für beliebige Fenstergrößen oder -ausrichtungen App-Layouts definieren.

Schnellstart: Entwerfen von Apps für verschiedene Fenstergrößen

Wenn Sie eine App so entwerfen möchten, dass sie bei allen Fenstergrößen gut aussieht und funktioniert, müssen Sie die Entscheidung treffen, ob Sie zusätzliche Layouts als Erweiterung des standardmäßigen horizontalen Vollbildlayouts erstellen möchten.

So wird's gemacht: Hinzufügen von Funktionen zur Rastervorlage

Sie können die Visual Studio-Vorlage "Raster-Anwendung" um zusätzliche Grundfunktionen erweitern, die Ihre Anwendung aufwerten.

Auswählen eines Layouts

Wenn Sie den Benutzern Ihrer Windows Store-App eine Benutzeroberfläche bieten möchten, die so flexibel und anpassbar wie möglich ist, müssen Sie zunächst den für Ihren Inhalt und die Ansichten, über die der Inhalt genutzt wird, am besten geeigneten Layoutmodus auswählen. In diesem Thema werden die Cascading Stylesheet-Layoutfeatures der Stufe 3 (CSS3) beschrieben, die in Windows 8 für Windows Store-Apps unterstützt werden.

Gestalten einer App-Seite

Mithilfe der im Folgenden beschriebenen Gestaltungsmuster können Sie das Layout der Benutzeroberflächenelemente auf den Seiten Ihrer App festlegen. Durch ein durchgängiges Muster für Ränder, Seitenköpfe, Bundstegbreiten und weitere vergleichbare Elemente wird app-übergreifend ein geschlossenes Gesamtbild gewahrt, und Sie erreichen, dass die Benutzer Interaktionen überall im System leichter verstehen können.

 

Verwandte Themen

Gestalten der Benutzeroberfläche
Gestalten einer App-Seite

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.