Richtlinien für Listenansichten und Rasteransichten

[Dieser Artikel enthält spezielle Informationen zu UWP-Apps und Windows 10. Eine Windows 8.1-Anleitung erhalten Sie, indem Sie die PDF-Datei mit Windows 8.1-Richtlinien herunterladen.]

Listen bieten konsistente, für Touch-Geräte optimierte Möglichkeiten zum Anzeigen und Interagieren mit sammlungsbasierten App-Inhalten. Listenansicht- und Rasteransicht-Steuerelemente ermöglichen das effektive Anzeigen von Listen. Mit Listenansicht- und Rasteransicht-Steuerelementen können Sie Elemente kategorisieren und Gruppenüberschriften zuweisen, Elemente per Drag & Drop verschieben, Inhalte pflegen und Elemente neu anordnen.

Listenansicht oder Rasteransicht?

Obwohl Listen- und Rasteransichten über ähnliche Funktionen verfügen, werden sie für unterschiedliche Zwecke verwendet.

Listenansichten werden empfohlen für:

• Anzeigen von textlastigen Content-Sammlungen.
• Navigieren in einer einzelnen oder kategorisierten Content-Sammlung.
• Erstellen des Masterbereichs im Master/Details-Muster Das Master/Details-Muster wird häufig in E-Mail-Apps verwendet. In einem Bereich befindet sich eine Liste mit auswählbaren Elementen, im anderen eine detaillierte Ansicht des ausgewählten Elements. Unter Das richtige Muster wählen in diesem Artikel finden Sie ein Beispiel dieser Ansicht.

Das Listenlayout enthält Gruppenköpfe und wird als einzelne Spalte angezeigt, die von oben nach unten gelesen und vertikal bewegt wird bzw. einen vertikalen Bildlauf aufweist.

Rasteransichten werden empfohlen für:

• Anzeigen von bildlastigen Content-Sammlungen
• Anzeigen von Content-Bibliotheken Unter Das richtige Muster wählen in diesem Artikel finden Sie ein Beispiel dieser Ansicht.
• Formatierung der beiden Inhaltsansichten für semantischen Zoom.

Das Rasterlayout wird immer vertikal bewegt, und das Layout der Elemente ist von links nach rechts und von oben nach unten angeordnet.

Auswahl des richtigen Musters

Listen dienen zum Anzeigen von Content-Bibliotheken, Master/Details-Daten oder statischen Daten.

• Content-Bibliothek

  Verwenden Sie eine Content-Bibliothek, um eine Content-Sammlung oder -Bibliothek anzuzeigen. Wird häufig verwendet, um Medien wie Bilder und Videos zu präsentieren. In einer Content-Bibliothek erwarten Benutzer, dass sie auf ein Element tippen können, um eine Aktion aufzurufen.

  

   

• Master/Details-Daten

  Bei der Verwendung eines Master/Details-Musters können Sie den Masterbereich mit einer Listenansicht organisieren. Der Masterbereich zeigt eine Liste mit auswählbaren Elementen an. Wenn der Benutzer ein Element im Masterbereich auswählt, werden zusätzliche Informationen zum gewählten Element im Detailbereich angezeigt. Der Detailbereich enthält häufig eine Rasteransicht.

  

   

  Sie können mehrere Listen miteinander verketten, um komplexe Master-/Detailhierarchien zu erstellen. Weitere Informationen finden Sie unter Master/Details-Muster.

• Statische Daten

  Statische Daten dient ausschließlich der Präsentation nicht interaktiver Inhalte, da die meisten Typen der Interaktivität deaktiviert werden. Es eignet sich für Elementauflistungen, die schreibgeschützt sind und keine Aktivierung oder Navigation zulassen.

Auswahlmodus

In diesem Modus können Benutzer Aktionen für Elemente auswählen und durchführen. Er kann über ein Kontextmenü aufgerufen werden, indem Sie bei gedrückter STRG- oder UMSCHALTTASTE auf ein Element klicken oder in einer Fotogalerie-Ansicht auf einem Element auf ein Ziel zeigen.

Es gibt drei verschiedene Auswahlmodi:

• Einzeln: Dabei kann der Benutzer jeweils nur ein Element auswählen.
• Mehrfach: Der Benutzer kann mehrere Elemente ohne Modifizierer auswählen.
• Erweitert: Dabei kann der Benutzer mit Zusatztasten mehrere Elemente auswählen, z. B. durch Gedrückthalten der UMSCHALTTASTE.

Wenn der Auswahlmodus aktiviert ist, werden Kontrollkästchen neben jedem Listenelement angezeigt, und Aktionen können am oberen oder unteren Bildschirmrand erscheinen.

Durch Tippen auf ein Element wird es ausgewählt. Das Tippen auf die Aktion auf der Befehlsleiste wirkt sich auf alle ausgewählten Elemente aus. Wenn kein Element ausgewählt ist, sind die Aktionen auf der Befehlsleiste mit Ausnahme von „Alle auswählen“ in der Regel inaktiv.

Im Auswahlmodus funktioniert das einfache Ausblenden nicht. Wenn Sie außerhalb des Frames tippen, in dem der Auswahlmodus aktiv ist, wird der Modus nicht beendet. Dadurch wird die unbeabsichtigte Deaktivierung des Modus verhindert. Per Klick auf die Zurück-Schaltfläche wird der Mehrfachauswahlmodus beendet.

Wenn eine Aktion ausgewählt wurde, wird eine visuelle Bestätigung angezeigt. Zeigen Sie bei Bedarf Animationen an. Ziehen Sie die Anzeige eines Bestätigungsdialogfelds für bestimmte Aktionen in Erwägung, insbesondere bei destruktiven Aktionen wie Löschen.

Der Auswahlmodus ist auf die Seite beschränkt, auf der er aktiv ist. Er wirkt sich nicht auf Elemente außerhalb dieser Seite aus.

Der Einstiegspunkt für den Auswahlmodus sollte neben dem Inhalt platziert werden, auf den er sich auswirkt.

Empfehlungen für die Befehlsleiste finden Sie unter Richtlinien für Befehlsleisten.

Mehrfachauswahlmodus

Der Bearbeitungsmodus ermöglicht die Bearbeitung von Zeilenelementen. Er kann über die Schaltfläche für den Bearbeitungsmodus auf der Befehlsleiste oder über ein Kontextmenü aufgerufen werden.

Ein Einstiegspunkt für den Mehrfachauswahlmodus sollte nach der Liste platziert werden, die er ändert.

Per Klick auf die Zurück-Schaltfläche wird der Mehrfachauswahlmodus beendet. Durch Aufrufen des Bearbeitungsmodus werden alle Befehlsleisten entfernt. Wenn beim Aufrufen des Auswahlmodus andere Frames sichtbar sind, werden diese Frames abgeblendet.

Im Bearbeitungsmodus funktioniert das einfache Ausblenden nicht. Wenn Sie außerhalb des Frames mit dem aktiven Auswahlmodus tippen, wird der Modus dadurch nicht beendet. Dadurch wird die unbeabsichtigte Deaktivierung des Modus verhindert.

Der Bearbeitungsmodus ist auf die Seite beschränkt, auf der er aktiv ist. Er wirkt sich nicht auf Elemente außerhalb dieser Seite aus.

Empfehlungen

• Elemente in derselben Listen- oder Rasteransicht sollten dasselbe Verhalten aufweisen.
• Wenn Ihre Liste in Gruppen unterteilt ist, verwenden Sie den semantischen Zoom, der Benutzern die Navigation in gruppierten Inhalten erleichtert.

Verwandte Themen

Hub

Master/Details

Navigationsbereich

Semantischer Zoom