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.
Procedure consigliate
Ecco alcuni scenari utili per l'applicazione di questo modello di progettazione:
| 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. |
| 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. |
| 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. |
| 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: