Condividi tramite


Modello di progettazione a doppia visualizzazione

Avere due schermate offre un'opportunità naturale per confrontare due versioni dello stesso tipo di contenuto. È possibile confrontare due immagini, due elenchi o due documenti affiancati.

È anche possibile visualizzare le stesse informazioni in due modi diversi contemporaneamente. Ogni schermata funziona perfettamente per fornire altre informazioni all'utente. Ad esempio, visualizzare un elenco di ristoranti su una schermata e una mappa con posizioni sull'altra.

Se si vuole ottenere un'esperienza simile a una doppia visualizzazione senza progettare due visualizzazioni specifiche, è consigliabile supportare invece più istanze con l'app. Questo approccio sfrutta il supporto predefinito fornito dal sistema operativo. Questa esperienza può essere utile per confrontare due prodotti aperti su due schede o altri scenari simili.

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

Procedure consigliate

Ecco alcuni scenari utili per l'applicazione di questo modello di progettazione:

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

Cosa fare Cosa non fare
Usare il lato sinistro dello schermo per visualizzare il contenuto in una visualizzazione mentre si usa la seconda schermata per visualizzare lo stesso contenuto in una visualizzazione diversa. Non usare la schermata sinistra per visualizzare un elenco e la seconda schermata per visualizzare i dettagli. Questo è il modello di progettazione dei dettagli dell'elenco.

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

Cosa fare Cosa non fare
Usare gli indicatori visivi per visualizzare le stesse informazioni in due visualizzazioni diverse. Non usare oggetti visivi non usati in modo improprio. L'uso degli indicatori visivi nel modo corretto può comportare una visualizzazione dei dettagli elenco.

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

Cosa fare Cosa non fare
Usare due schermate per confrontare la stessa istanza del prodotto. Non avere un elenco su una schermata e i dettagli nella seconda schermata.

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

Cosa fare Cosa non fare
Usare la seconda schermata per modificare o modificare le modifiche dal contenuto nella prima schermata in una doppia visualizzazione. Non consentire agli utenti di modificare o modificare le modifiche in entrambi gli schermi in una doppia visualizzazione.

Tipi di app che possono trarre vantaggio da questo modello

  • Strumenti di modifica che traggono vantaggio dalla presenza di stati precedenti/successivi affiancati. Ad esempio, codice markdown e anteprima.
  • Contenuto e contesto affiancato. Ad esempio, una mappa e un elenco di ristoranti.
  • App che consentono all'utente di confrontare elementi simili.
  • Avere due canvas con contenuti coordinati, ma mantenere separati ogni pagina. Ad esempio, canvas da un lato, prendere nota dell'altra.

Esempi di codice

Questi progetti mostrano una semplice implementazione di doppia visualizzazione che è possibile usare nelle app:

Passaggi successivi

Considerare questi altri modelli di progettazione: