Layout

Das Layout der App – sowohl der Inhalt als auch die Navigation zwischen Seiten – ist äußerst wichtig für das gesamte Design und die Benutzerfreundlichkeit der App. Das Layout kann eine Hierarchie erstellen, Ihre Inhalte organisieren und Ihre Marke widerspiegeln. Die Benutzerfreundlichkeit einer App hängt von der Struktur der Seiten und Inhalte ab.

Layout in Windows

Windows-Layouts sind authentisch digital. Sie reflektieren das digitale Medium und vermeiden Bezüge zur analogen Welt, die im digitalen Raum oft unnötig und sogar irreführend sind. Durch die Freiheit, die uneingeschränkte digitale Layouts bieten, lassen sich leistungsfähige, ansprechende Apps und Inhalte erstellen.

Windows-Layouts sind sauber, übersichtlich und sorgen für eine aufgeräumte Canvas. Sie können Steuerelemente auf die App-Leisten an den Rändern der App verschieben. Die wichtigsten Features einer App können auf der Canvas im Mittelpunkt stehen und so die Benutzerfreundlichkeit verbessern.

Je nach Inhalt der App können Sie eine leichte, luftige Komposition mit großen, interaktiven Elementen erstellen oder eher eine komprimierte Oberfläche, auf der zahlreiche Inhalte und Befehle zur Verfügung stehen. Die Leselisten-App verfügt beispielsweise über ein offenes, minimalistisches Layout. Berücksichtigen Sie, welche Elemente der App sichtbar sind, welche sich außerhalb der Canvas befinden und wie Ihre Wahl des Layouts die Benutzerfreundlichkeit und Nutzung der App beeinflusst.

Bei der Xbox Music-App kommen ein neuartiges vertikales Raster und vertikales Schwenken zum Einsatz, um einen großen Inhaltsbereich auf einmal darzustellen. Die feste App-Leiste am unteren Rand sorgt dafür, dass häufig verwendete Steuerelemente immer verfügbar sind. So können Benutzer schnell in ihren Wiedergabelisten navigieren und dabei andere Bereiche der App erkunden.

Innovation beim Layout

Bei Songza, einer Musik-App, die sich je nach Benutzerszenario verändert, finden wir ein minimalistisches, horizontales Layout vor. Da die Benutzer dieser App die meiste Zeit Musik hören und nicht aktiv navigieren, ist weniger tatsächlich mehr.

In vielen Apps wird ein hierarchisches Navigationssystem genutzt. Der Hub bzw. die Startseite ist der Einstiegspunkt des Benutzers in die App und in die zusätzlichen Inhaltsebenen. Er zeigt Inhalte in einer Ansicht mit umfassenden Verschiebungsfunktionen an, die Benutzern einen schnellen Überblick über neue und spannende Infos verschafft und ihnen die Möglichkeit bietet, anschließend tiefer in den Inhalt Ihrer App einzutauchen. Die Hubsteuerung bietet Ihnen ein Framework und die Flexibilität, Ihre App an Ihr Markenimage anzupassen.

Die hierarchische Navigation ist nur ein App-Layout-Modell. Nutzen Sie das Layout- und Navigationsmodell, das am besten zu Ihrer Marke passt und die optimale Benutzerfreundlichkeit bietet. Bei Gestaltung und Layout sind der Kreativität keine Grenzen gesetzt – so können Designer wahrlich einzigartige Inhalte schaffen.

Denken Sie daran, dass Sie die App sowohl im Hoch- als auch im Querformat nutzen können. Entscheiden Sie, ob das Raster, auf dem der Inhalt angeordnet ist, vertikal oder horizontal am effektivsten ist. Da immer mehr Apps die moderne Designsprache von Windows nutzen, passen sich auch die Herangehensweisen an das App-Layout und -Design immer mehr an individuelle Bedürfnisse und Marken an. Das Layout bietet Raum für Innovationen – so heben Sie sich mit Ihrer App von der Konkurrenz ab. Ausführliche Informationen zum Windows-Rastersystem finden Sie unter Gestalten einer App-Seite.

Beispiele

Facebook

Facebook nutzt ein streng rasterbasiertes Layout für die Organisation seiner verschiedenen Inhalte und Befehle auf der Canvas. So können Benutzer direkt mit allen von Facebook bereitgestellten Diensten interagieren.

Foursquare

Foursquare ist eine App, bei der es hauptsächlich um Orte und neue Inhalte geht. Mit markanten Bildern für die jeweils vorgestellten Orte spiegelt das Layout der App diese Zielsetzung wider. Bewertungen und Rezensionen sind unter dem Bild verankert. So wird eine einheitliche Komposition geschaffen, dank der Benutzer einen Ort auf einen Blick einschätzen und per Berührung näher kennenlernen können.

Das Layout von Foursquare ist dynamisch. Es restrukturiert sich selbst und passt sich so optimal an die Inhalte der jeweiligen Bereiche der App an. Bei einem Schwenk ganz nach links in der App wird eine Karte von beliebten Orten in der Nähe angezeigt. Beim Tippen auf einen Ort wird eine Detailseite mit allen Check-ins und Kommentaren der Benutzer angezeigt. Durch Tippen auf eines dieser Elemente wird ein Ausschnitt der Empfehlung angezeigt.

NOOK

Bei der NOOK-App von Barnes and Noble kommen die grundlegenden Konzepte eines hierarchischen, Hub-basierten Modells zum Einsatz. Dieses wird jedoch umfassend angepasst, wodurch ein einzigartiges, für NOOK typisches Design erschaffen wird. Anstatt nur Titelbilder anzuzeigen, wird mit einer schwachen Schattierung unter den Büchern dezent ihre physische Qualität untermalt. In diesem Fall wirkt die App durch die Andeutung des analogen Gegenstücks für den Benutzer authentischer.

Verwandte Themen

Richtlinien für die Hubsteuerung

Navigationsmuster

Gestalten einer App-Seite

Gestalten der Benutzeroberfläche (Windows Runtime-Apps)

Auswählen eines Layouts (Windows Store-Apps mit JavaScript und HTML)

Gestalten der Benutzeroberfläche (XAML)

Galerie