Designmuster für Listendetails
Das Listendetailsetailmuster verfügt über einen Hauptbereich und einen Detailbereich für Inhalte. Der Hauptbereich ist in der Regel eine Listenansicht. Wenn ein Element in der Liste ausgewählt wird, wird der Detailbereich aktualisiert. Dieses Muster eignet sich von Natur aus gut für Szenarien mit einem breiteren Anzeigebereich. Es wird häufig für E-Mails und Adressbücher verwendet.
Wenn Sie die beiden unterschiedlichen Bildschirme nutzen und an der natürlichen Grenze ausrichten, können Sie einen Bildschirm verwenden, um die Elementliste und die andere anzuzeigen, um Details des ausgewählten Elements anzuzeigen.
Durch die Trennung von Navigation oder Übersicht von Details können Benutzer tiefer in Inhalte drillen, während sie sich in Bezug auf ihre Position in der Gesamtliste oder Aggregat befinden.
Bewährte Methoden
Nachfolgend finden Sie einige Szenarien, die Sie beim Anwenden dieses Entwurfsmusters unterstützen:
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie die linke Seite des Bildschirms, um eine Liste und die rechte Seite anzuzeigen, um die Details des ausgewählten Elements aus der Liste anzuzeigen. | Zeigen Sie die Liste nicht auf den beiden Bildschirmen an, verwenden Sie den zweiten Bildschirm für eine Detailansicht. |
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie im linken Bildschirm eine untere Menünavigation im Verhältnis zur Liste auf der linken Bildschirmseite. | Verfügen Sie nicht über eine untere Menünavigation auf dem linken Bildschirm, und die Liste erstreckt sich über zwei Bildschirme. |
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie eine Seitenmenünavigation mit der Liste auf dem linken Bildschirm und Details auf dem rechten Bildschirm. | Verfügen Sie nicht über eine untere Menünavigation über zwei Bildschirme im Listendetail. |
| Empfohlen | Nicht empfohlen |
|---|---|
| Zeigen Sie Details an, wenn das Gerät in eine doppelte Querformatausrichtung gedreht wird (mit einer Zurück-Schaltfläche, um zur Liste zurückzukehren). | Zeigen Sie keine Liste auf einem Bildschirm und Details auf dem anderen Bildschirm an, wenn das Gerät in eine doppelte Querformatausrichtung gedreht wird. |
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie den zweiten Bildschirm, um ein größeres Bild aus der Liste der Bildgalerie anzuzeigen. | Zeigen Sie den Listenkatalog nicht über zwei Anzeigen an, die durch den Schieber durchlaufen werden. |
Typen von Apps, die von diesem Muster profitieren können
- Apps mit Listen oder Katalogen
- E-Mail-Apps
- Zeitplanungs-Apps
- Apps zum Zusammenstellen von Fotos oder Bildern
- Musik-Apps mit Wiedergabelisten und Lieddetails
- Apps mit starker Navigationsstruktur
Codebeispiele
Diese Projekte zeigen eine einfache Implementierung des Listendetaildesignmusters, das Sie in Ihren Apps verwenden können:
Hinweis
Beim Arbeiten an einer Liste/Detail-Ansicht
Stellen Sie sicher, dass Sie beim Wechseln von einem einzelnen Bildschirm zu einem übergreifenden Listendetailmodus ein Element auswählen, das dem Benutzer für die Detailansicht angezeigt werden soll. Andernfalls kann sich der Bildschirm für die Detailansicht für den Benutzer gebrochen fühlen. Er kann den Benutzer verärren, wobei eine Aktion erforderlich ist, um sie mit Informationen auszufüllen.
Einige Optionen umfassen das letzte berührte Element in der Listenansicht oder das oberste Element in der Liste oder das zuletzt geänderte Element.
Nächste Schritte
Berücksichtigen Sie diese anderen Entwurfsmuster: