Designmuster für duale Ansicht
Mit zwei Bildschirmen kann man zwei Versionen desselben Inhaltstyps vergleichen. Sie können zwei Bilder, zwei Listen oder zwei Dokumente nebeneinander vergleichen.
Sie können auch die gleichen Informationen auf zwei verschiedene Arten gleichzeitig anzeigen. Jeder Bildschirm funktioniert nahtlos, um mehr Informationen für den Benutzer bereitzustellen. Zeigen Sie beispielsweise eine Liste von Restaurants auf einem Bildschirm und einer Karte mit Standorten auf dem anderen an.
Wenn Sie eine duale Ansichts-like-Erfahrung erreichen möchten, ohne zwei bestimmte Ansichten zu entwerfen, sollten Sie stattdessen mehrere Instanzen mit Ihrer App unterstützen. Dieser Ansatz nutzt die integrierte Unterstützung des Betriebssystems. Diese Erfahrung könnte nützlich sein, um zwei Produkte zu vergleichen, die auf zwei Registerkarten oder anderen ähnlichen Szenarien geöffnet wurden.
Bewährte Methoden
Nachfolgend finden Sie einige Szenarien, die Ihnen beim Anwenden dieses Entwurfsmusters helfen:
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie die linke Seite des Bildschirms, um Inhalte in einer Ansicht anzuzeigen, während Sie den zweiten Bildschirm verwenden, um denselben Inhalt in einer anderen Ansicht anzuzeigen. | Verwenden Sie keinen linken Bildschirm, um eine Liste und den zweiten Bildschirm anzuzeigen, um Details anzuzeigen. Das ist das Entwurfsmuster für Listendetails. |
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie visuelle Indikatoren, um die gleichen Informationen in zwei verschiedenen Ansichten anzuzeigen. | Verwenden Sie keine visuellen Elemente. Nicht die Verwendung der visuellen Indikatoren kann dazu führen, dass eine Listendetailsansicht angezeigt wird. |
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie zwei Bildschirme, um die gleiche Instanz des Produkts zu vergleichen. | Verfügen Sie nicht über eine Liste auf einem Bildschirm und Details auf dem zweiten Bildschirm. |
| Empfohlen | Nicht empfohlen |
|---|---|
| Verwenden Sie den zweiten Bildschirm, um Änderungen des Inhalts auf dem ersten Bildschirm in einer dualen Ansicht zu bearbeiten oder zu markupn. | Erlauben Sie Benutzern nicht, Änderungen an beiden Bildschirmen in einer Dualansicht zu bearbeiten oder zu markieren. |
Typen von Apps, die von diesem Muster profitieren können
- Bearbeitungstools, die davon profitieren, vor/nach Zuständen nebeneinander zu verfügen. Beispielsweise markdown-Code und Vorschau.
- Inhalte und Kontext nebeneinander. Beispielsweise eine Karte und eine Liste von Restaurants.
- Apps, mit denen der Benutzer ähnliche Elemente vergleicht.
- Mit zwei Canvass mit koordiniertem Inhalt, aber jede Seite wird getrennt. Beispiel: Canvas auf einer Seite, notieren Sie sich auf der anderen Seite.
Codebeispiele
Diese Projekte zeigen eine einfache Implementierung der dualen Ansicht, die Sie in Ihren Apps verwenden können:
Nächste Schritte
Berücksichtigen Sie diese anderen Entwurfsmuster: