Zum Hauptinhalt springen

Listenansicht

Überblick​

Listenansichten werden verwendet, um große Datenmengen schnell anzuzeigen. Listenansichten existieren in Verbindung mit einer Tabellenansicht und zeigen strukturierte Daten an. Listenansichten können auch als Benutzeroberflächenelement existieren, das nur eine Liste von Elementen anzeigt. Ein Listenelement ist leicht gewichtet und enthält in der Regel nur eine Detailzeile sowie Inline-Aktionen.

Zu verwenden​

  • Zum Anzeigen vom System generierter Daten wie einer Liste der letzten Aktivitäten, eines Revisionsverlaufs, von Kontakten oder kürzlich hinzugefügter Datensätze.
  • Zum Anzeigen einfacher Elemente wie Notizen oder einer Liste von Dokumenten.
  • Wenn der Hauptanwendungsfall die Anzeige von Daten ist.

Nicht zu verwenden​

  • Wenn der Hauptanwendungsfall der Datenvergleich ist. Verwenden Sie stattdessen die Tabellenansicht.
  • Wenn Sie komplexe Daten zeigen möchten. Verwenden Sie stattdessen die Tabellenansicht.
  • Wenn Sie die Aufmerksamkeit des Benutzers auf nur ein Objekt lenken möchten. Verwenden Sie stattdessen die Kartenansicht.

Formatierung​

Aufbau​

Aufbau der Listenansicht

  1. Titel (obligatorisch): Gibt einen kurzen Hinweis darauf, worum es in der Listenansicht geht, mit optionalem Zähler, der die Anzahl der Listen in der Ansicht angibt.
  2. Suchfilter (optional): Verwenden Sie diese Option, um den Datensatz durch die Suche nach Schlüsselwörtern zu filtern.
  3. Untertitel (optional): Der Untertitel enthält bei Bedarf zusätzliche kontextbezogene Informationen.
  4. Aktionen der Listenansicht (optional): Ermöglicht die Durchführung von handlungsrelevanten Aktionen für die Daten, entweder für den gesamten Satz oder für ausgewählte Datensätze in der Listenansicht.
  5. Listeneintrag (Pflichtfeld): Ein Element der Listenansicht, das in der Ansicht im definierten Format angezeigt wird.
  6. Seitensteuerungselemente (optional): Verwenden Sie diese Option, um nach Bedarf weitere Listenelemente anzuzeigen.

Details der Listenelemente​

Details der Listenelemente

Aufbau eines Elements in der Listenansicht

Jedes Listenelement besteht aus den folgenden Elementen:

  1. Auswahlsteuerung (optional): Ermöglicht die Auswahl von einem oder mehreren Listenelementen.
  2. Detailbereich (Pflichtfeld): Zeigt App-abhängige Informationen zum Listenelement an.
  3. Listenelement-Aktionen (optional): Bietet die Möglichkeit, Aktionen für das Listenelement auszuführen.

Alle Listenelemente in der Listenansicht müssen dieselben Datentypen enthalten. Fügen Sie in einem Listenelement keine Details ein, die die anderen Listenelemente nicht haben.

Verwenden Sie Symbole nur, um zusätzlichen Kontext zu den Daten bereitzustellen und den begleitenden Inhalt visuell aufzuwerten. Die Verwendung von Symbolen für alle Listenelemente muss einheitlich sein: Entweder haben alle Listenelemente Symbole oder keines von ihnen hat Symbole.

Aktionen für Listenelemente können in Form von Aktionsschaltflächen oder Symbolschaltflächen erfolgen.

Layout, Größenanpassung und dynamischer Umbruch​

  • Die Listenansicht und die zugehörigen Listenelemente nehmen immer die gesamte Breite des Containers ein.
  • Der gesamte Inhalt eines Listenelements muss sichtbar sein. Längerer Text eines Listenelements wird in die nächste Zeile umbrochen, mit der Möglichkeit, weitere Informationen in einer Detailansicht (Drawer, neue Seite, modales Fenster) anzuzeigen. Schneiden Sie keinen Text in Listenelementen ab.

Funktionen für Listenansichten​

Zustand „Leer“ und Zustand „Wird geladen“​

  • Wenn keine Daten angezeigt werden können oder wenn Bedingungen die Anzeige von Daten verhindern, informieren Sie die Benutzer unter Verwendung des Zustands „Leer“. In der Meldung müssen das Problem und die Mittel zur Behebung des Problems klar angegeben werden.
  • Wenn Daten abgerufen werden, wird der Benutzer mit dem Zustand „Wird geladen“ informiert. Die Nachricht muss eindeutig mitteilen, dass die Daten geladen werden, und erklären, warum der Benutzer warten muss.
  • Über Aktionsschaltflächen kann bei Bedarf ein Neuladen der Seite ausgelöst werden.

Leerer Status für Listenansichtsmuster Beispiel für einen leeren Status in einer Listenansicht

Leerer Status für Listenansichtsmuster Beispiel für einen Ladestatus in einer Listenansicht

Reaktionsfähigkeit​

Listenansichten sind vollständig responsiv und passen sich bei verschiedenen Formfaktoren an die Größe ihres Containers an.

Reaktionsfähigkeit für Listenansichtmuster Von links nach rechts: Listenansicht auf Desktop, Tablet und Mobilgeräten.

Filter für Listenansicht​

Filtern bietet die Möglichkeit, bestimmte Datensätze zu bearbeiten. Die Filterung kann über den Suchfilter erfolgen, mit dem Benutzer den Datensatz durch Eingabe eines Schlüsselworts eingrenzen können.

Filter für Listenansicht

Auswahl von Listenelementen​

In der Listenansicht kann je nach Anwendungsfall die Einzel- oder Mehrfachauswahl von Listenelementen aktiviert werden.

Auswahl von Elementen in der Listenansicht

Ressourcen​

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)