Patrón de diseño de vista dual
Tener dos pantallas ofrece una oportunidad natural para comparar dos versiones del mismo tipo de contenido. Puede comparar dos imágenes, dos listas o dos documentos en paralelo.
También puede mostrar la misma información de dos maneras diferentes al mismo tiempo. Cada pantalla funciona sin problemas para proporcionar más información al usuario. Por ejemplo, muestre una lista de restaurantes en una pantalla y un mapa con ubicaciones en la otra.
Si desea lograr una experiencia similar a una vista dual sin diseñar dos vistas específicas, considere la posibilidad de admitir varias instancias con la aplicación. Este enfoque aprovecha la compatibilidad integrada que proporciona el sistema operativo. Esta experiencia podría ser útil para comparar dos productos abiertos en dos pestañas u otros escenarios similares.
Estos son algunos escenarios que le ayudarán a aplicar este patrón de diseño:
Cosas que hacer | Cosas que evitar |
---|---|
Use el lado izquierdo de la pantalla para mostrar contenido en una vista mientras usa la segunda pantalla para ver el mismo contenido en otra vista. | No use la pantalla izquierda para mostrar una lista y la segunda pantalla para mostrar los detalles. Es el patrón de diseño de detalles de lista. |
Cosas que hacer | Cosas que evitar |
---|---|
Use indicadores visuales para mostrar la misma información en dos vistas diferentes. | No use objetos visuales incorrectamente. No usar los indicadores visuales de la manera correcta puede dar lugar a una vista de detalles de lista. |
Cosas que hacer | Cosas que evitar |
---|---|
Use dos pantallas para comparar la misma instancia del producto. | No tenga una lista en una pantalla y detalles en la segunda pantalla. |
Cosas que hacer | Cosas que evitar |
---|---|
Use la segunda pantalla para editar o marcar los cambios del contenido de la primera pantalla en una vista doble. | No permita que los usuarios editen o marquen los cambios en ambas pantallas en una vista dual. |
- Herramientas de edición que se benefician de tener estados previos y posteriores en paralelo. Por ejemplo, código markdown y vista previa.
- Contenido y contexto en paralelo. Por ejemplo, un mapa y una lista de restaurantes.
- Aplicaciones que permiten al usuario comparar elementos similares.
- Tener dos lienzos con contenido coordinado, pero mantener cada página separada. Por ejemplo, lienzo en un lado, tenga en cuenta la otra.
Estos proyectos muestran una implementación sencilla de doble vista que puede usar en las aplicaciones:
Tenga en cuenta estos otros patrones de diseño: