Modello di progettazione di due pagine

  • Articolo

Sfruttando la metafora di un libro, i due modelli di pagina tendono naturalmente a fornire un'esperienza di paging simile al libro. È possibile usare il limite naturale per visualizzare diversi elementi di una raccolta, ad esempio pagine o immagini, che altrimenti potrebbero avere richiesto all'utente di visualizzare uno alla volta.

A seconda dell'app, è possibile decidere di impaginare due pagine contemporaneamente o avanzare una pagina alla volta.

Diagram shows the two page design pattern.

Procedure consigliate

Ecco alcuni scenari per guidarvi quando si applica questo modello di progettazione:

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

Cosa fare Cosa non fare
Usare due schermate per avere due visualizzazioni di pagina completamente separate. Non visualizzare la pagina tra due schermi che passano sotto la cerniera.

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

Cosa fare Cosa non fare
Usare il formato a due pagine per visualizzare elementi utilizzabili per il contenuto di onboarding/istruzione. Non visualizzare elementi utilizzabili su due schermi che passano sotto la cerniera.

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

Cosa fare Cosa non fare
Visualizzare il contenuto come una singola pagina quando il dispositivo viene ruotato in un doppio panorama. Non bloccare l'orientamento del dispositivo. Consentire all'utente di ruotare il dispositivo per visualizzare il contenuto con uno schermo più grande.

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

Cosa fare Cosa non fare
Usare un indicatore visivo o illustrazione nella seconda schermata se il contenuto richiede solo una schermata. Non estendere una singola pagina tra due schermate per riempire lo spazio.

Tipi di app che possono trarre vantaggio da questo modello

  • App orientata ai documenti
  • App con contenuto impaginato
  • App progettate per la lettura
  • App con un'area di disegno elementi, ad esempio note e schede d'arte

Esempi di codice

Questi progetti mostrano una semplice implementazione del modello di progettazione di due pagine che è possibile usare nelle app:

Passaggi successivi

Prendere in considerazione questi altri modelli di progettazione: