Freigeben über

Zwei Seitenentwurfsmuster

  • Artikel

Durch die Nutzung der Metapher eines Buchs wird das zweiseitige Muster natürlich dazu neigen, ein buchähnliches Paging-Erlebnis zu bieten. Sie können die natürliche Grenze verwenden, um mehrere Elemente aus einer Sammlung anzuzeigen – z. B. Seiten oder Bilder – die andernfalls erforderlich sind, dass der Benutzer jeweils eins anzeigen muss.

Je nach App können Sie sich für zwei Seiten gleichzeitig entscheiden oder jeweils eine Seite voranbringen.

Diagram shows the two page design pattern.

Bewährte Methoden

Nachfolgend finden Sie einige Szenarien, die Sie beim Anwenden dieses Entwurfsmusters unterstützen:

Diagram shows two pages side-by-side, like a book, with no content under the hinge.

Empfohlen Nicht empfohlen
Verwenden Sie zwei Bildschirme, um zwei vollständig getrennte Seitenansichten zu haben. Zeigen Sie die Seite nicht über zwei Bildschirme an, die unter dem Schiebege übergeben werden.

Diagram shows items on separate pages, not under the hinge.

Empfohlen Nicht empfohlen
Verwenden Sie zweiseitiges Format, um aktionenfähige Elemente für Ihre Onboarding-/Anweisungsinhalte anzuzeigen. Zeigen Sie keine aktionenbaren Elemente auf zwei Bildschirmen an, die unter dem Schiebege übergeben werden.

Diagram shows each individual page expanded to take up both screens in dual-landscape mode, where the user can see all content.

Empfohlen Nicht empfohlen
Zeigen Sie Ihre Inhalte als einzelne Seite an, wenn das Gerät in ein doppelseitiges Querformat gedreht wird. Sperren Sie die Ausrichtung des Geräts nicht. Zulassen, dass der Benutzer das Gerät drehen kann, um Inhalte mit einem größeren Bildschirm anzuzeigen.

Diagram shows a placeholder or other element on the second screen if no content exists.

Empfohlen Nicht empfohlen
Verwenden Sie eine Abbildung oder einen visuellen Indikator auf dem zweiten Bildschirm, wenn nur ein Bildschirm benötigt wird. Über zwei Bildschirme hinweg erstreckt sich kein einzelnes Zeichenblatt, um den Platz zu füllen.

Typen von Apps, die von diesem Muster profitieren können

  • Dokumentorientierte App
  • Apps mit Inhalten, die paginiert sind
  • Dedizierte Lese-Apps
  • Apps mit einem elementisierten Zeichenbereich, z. B. Notizen und Artboards

Codebeispiele

Diese Projekte zeigen eine einfache Implementierung des zwei Seitenentwurfsmusters, das Sie in Ihren Apps verwenden können:

Nächste Schritte

Berücksichtigen Sie diese anderen Entwurfsmuster: