Teilen über

Designmuster für duale Ansicht

  • Artikel

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.

Screenshot shows the dual view experience with similar views side by side and the same data presented different ways.

Bewährte Methoden

Nachfolgend finden Sie einige Szenarien, die Ihnen beim Anwenden dieses Entwurfsmusters helfen:

Screenshot shows the preferred dual view contrasted with the list detail pattern.

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.

Screenshot shows visual indicators that are synchronized for the selected item on both screens.

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.

Screenshot shows the two screens used to compare data, instead of a list and detail display.

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.

Screenshot shows using the two screens to preview and edit at the same time, but not on both screens interchangeably.

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: