Compartir a través de


Introducción a los dispositivos de doble pantalla

Los dispositivos de doble pantalla son dispositivos portátiles con dos pantallas simétricas que funcionan conjuntamente de manera exclusiva para proporcionar productividad en un factor de forma flexible.

Con los dispositivos de doble pantalla, como Microsoft Surface Duo, los usuarios pueden realizar las tareas en cualquier lugar más rápido que nunca: pueden tomar notas en una pantalla y revisar la propuesta completa del proyecto en la otra mientras están de viaje, sentarse en una mesa para escribir un correo electrónico detallado mediante un teclado de software o hardware mientras esperan para comer y, después, ver un vídeo, explorar la web o leer un libro mientras continúan con su vida.

a dual-screen device

Aunque los dispositivos de doble pantalla abren nuevas posibilidades para las aplicaciones, las aplicaciones existentes funcionarán de la forma esperada en los dispositivos y habrá mejoras que obtendrás sin tener que hacer nada. Dichas mejoras se indican en esta documentación, mientras que también se muestran nuevas maneras de mejorar la experiencia de la aplicación al hacer que esta tenga en cuenta la naturaleza de doble pantalla del dispositivo.

Aunque hay diferentes dispositivos de doble pantalla en el mercado y cada vez habrá más, creemos que puede haber una forma común de enfocar el diseño de las aplicaciones para estos dispositivos. Esperamos que esto ayude a que la aplicación llegue a más dispositivos sin tener que volver a realizar el diseño desde cero para cada dispositivo.

En este artículo, se explican los conceptos y modelos de diseño comunes que se aplican, independientemente del sistema operativo de destino o del lenguaje de desarrollo que se use. Para información específica de la plataforma sobre el desarrollo de aplicaciones para dispositivos de doble pantalla, consulte Kotlin y Java, React Native, Xamarin, Desarrollo de juegos de Unity, Tecnologías web o Windows.

La tecnología sigue evolucionando y nuestra guía puede cambiar a medida que progresemos. Te agradecemos tus comentarios.

Introducción a doble pantalla

Los dispositivos de doble pantalla pueden encontrarse en diversas variaciones de hardware y diseño industrial. Surface Duo, lanzado recientemente junto con otros dispositivos planeados, pretenden ayudar a definir la categoría, pero otros dispositivos pueden tener pantallas más grandes o diseños de bisagras diferentes. Al diseñar las aplicaciones, ten en cuenta que debes evitar el diseño de las especificaciones de cualquier dispositivo específico disponible hoy en día.

Todos los dispositivos de doble pantalla pueden plegarse, voltearse y girarse. Ambas pantallas se pueden usar como pantallas o una de ellas puede funcionar como teclado. Los diferentes factores de forma admiten una amplia variedad de actividades y permiten al usuario ajustar el dispositivo a su situación. Al aprovechar los distintos modos con la aplicación, ayudará a los usuarios a alcanzar más objetivos.

overview of dual-screen modes

Cuando el usuario inicia una aplicación, su ventana principal se abre maximizada y ocupa el ancho y el alto completos de una sola pantalla. De esta manera, los usuarios pueden tener varias aplicaciones abiertas a la vez, lo que permite el uso en paralelo de aplicaciones y escenarios intuitivos de arrastrar y colocar.

an app on each screen

Una aplicación también puede aparecer en ambas pantallas, lo que se conoce como diseño distribuido. De manera predeterminada, la aplicación actuará como si se estuviera mostrando en una pantalla más grande. Puedes modificar los diseños de aplicaciones existentes para acomodar la unión entre las dos pantallas o puedes seguir y diseñar la aplicación con los controles de diseño creados específicamente para sacar el máximo partido de los dispositivos de doble pantalla. Esta opción se describe con más detalle más adelante en este artículo.

an app spanned across both screens

Adopción y mejora de las características existentes

Hay muchas características que ya puedes aprovechar con las aplicaciones que seguirán funcionando sin ningún esfuerzo en los dispositivos de doble pantalla admitidos por Microsoft y seguirán proporcionando una buena experiencia en la aplicación. Se tratarán antes de explicar cómo diseñar la aplicación específicamente para escenarios de doble pantalla.

Diseños de aplicaciones dinámicos

Si diseñas la aplicación para que use diseños dinámicos, tendrá un aspecto excelente en todos los dispositivos, independientemente del tamaño y la orientación de la pantalla del dispositivo. Usa técnicas de diseño existentes para la plataforma de interfaz de usuario que quieras que se escalen automáticamente para rellenar la pantalla. Si tienes elementos de pantalla que dependen del tamaño y la relación de aspecto, usa las API proporcionadas por la plataforma de interfaz de usuario para ajustar el diseño cuando cambie el tamaño o la relación de aspecto.

Dado que la aplicación se ejecuta en muchos dispositivos diferentes, probablemente ya la has desarrollado para que se adapte a varios tamaños de pantalla y de ventana, por lo que debería seguir funcionando sin problemas. Sin embargo, recuerda que es posible que tengas que tener en cuenta los nuevos tamaños de pantalla y relaciones de aspecto que no son habituales para PC y dispositivos móviles, como vertical (vista más alta), horizontal (vista más ancha), vertical doble (el ancho de vertical duplicado) y horizontal doble (el alto de horizontal duplicado).

Consideración de todas las orientaciones del dispositivo

Esperamos que los usuarios sean creativos al usar dispositivos de doble pantalla de la manera que funcione para ellos. Esto significa que es posible que la aplicación no se use siempre en la orientación típica (vertical para Android u horizontal para Windows). Considera la posibilidad de admitir todas las orientaciones y configuraciones de pantalla. Por ejemplo, si la aplicación está diseñada principalmente para la orientación vertical, pero es compatible con muchas entradas de texto, es posible que los usuarios tengan más probabilidades de usarla en orientación horizontal en un dispositivo de doble pantalla con el teclado en la pantalla inferior.

Los diseños de doble pantalla pueden proporcionar un entorno mejor para multitarea. No siempre sabrá en qué modo el usuario va a sostener el dispositivo; pero conocer los modos posibles permite optimizar la aplicación para aquellos modos que mejor se adapten a la aplicación.

Nuestros estudios muestran que los usuarios se sienten más cómodos escribiendo en una superficie plana. Si la aplicación está orientada en gran medida a escribir, como una aplicación para tomar notas, puedes optimizarla para usarla en un diseño horizontal (si es que aún no lo está).

multi-task on two screens

Compatibilidad con diversas entradas

Muchos dispositivos, incluidos los nuevos dispositivos de doble pantalla, admiten una amplia variedad de entradas, incluidas las táctiles, de escritura y mediante lápiz. La flexibilidad de los dispositivos de doble pantalla permite que un usuario cambie rápidamente entre los modos para que se adapten a su tarea. Para garantizar una experiencia de usuario excelente, asegúrate de que la aplicación admita todos los tipos de entrada disponibles para que el usuario siga teniendo el control y pueda interactuar con la aplicación de la manera que prefiera.

Arrastrar y colocar

Asegurarse de que la aplicación admite la característica de arrastrar y colocar es otra manera de garantizar una excelente experiencia del usuario al usar distintos tipos de entrada, no solo para dispositivos de doble pantalla, sino también para todos los demás tipos de dispositivos.

Ya puedes aprovechar la característica de arrastrar y colocar. Sin embargo, un dispositivo de doble pantalla que ejecuta aplicaciones en paralelo se presta especialmente a las interacciones de arrastrar y colocar para obtener una excelente experiencia en la aplicación.

Para habilitar la característica de arrastrar y colocar en la aplicación, piensa en escenarios en los que los usuarios pueden manipular directamente texto, vínculos, imágenes u objetos enriquecidos desde dentro o fuera de la experiencia de la aplicación y, a continuación:

  1. En cualquier lugar en el que puedas cortar, copiar y pegar, habilita la característica de arrastrar y colocar.
  2. En cualquier lugar en el que puedas compartir contenido, considera la posibilidad de habilitar la característica de arrastrar y colocar.

Opción de varias instancias de la aplicación

Es posible que los usuarios quieran aprovechar la segunda pantalla para ver contenido diferente desde la misma aplicación. Para habilitar esta opción, considera la posibilidad de admitir varias instancias, donde se ejecutan en paralelo varias instancias de la aplicación.

Experiencia de imagen incrustada para los elementos multimedia

Si estás creando una aplicación multimedia que pueda beneficiarse de seguir reproduciendo vídeo en primer plano mientras se ejecuta otra aplicación, considera la posibilidad de admitir experiencias de imagen incrustada. Con más superficie de pantalla, se ofrece al usuario la posibilidad de realizar multitarea viendo el vídeo y realizando otra tarea al mismo tiempo.

Consideraciones de la experiencia del usuario de doble pantalla

En la sección anterior, hablamos sobre las características que se pueden admitir en la aplicación que no son específicas de los dispositivos de doble pantalla, pero que pueden mejorar la experiencia del usuario cuando la aplicación se ejecuta en un dispositivo de este tipo. Ahora observaremos qué se puede hacer para proporcionar una experiencia única solo cuando la aplicación se ejecuta en un dispositivo de doble pantalla.

En un dispositivo de doble pantalla, la aplicación puede ejecutarse en una sola pantalla o en ambas. Cuando una sola aplicación se presenta en dos pantallas, se denomina distribuida. La forma en que la aplicación responde al hecho de estar en un estado distribuido puede tener un gran impacto en la experiencia del usuario. Los modos únicos que habilita un dispositivo de doble pantalla pueden revelar maneras sin precedentes en que se puede usar la aplicación. Por ejemplo, los dispositivos que tienen uniones por el medio se prestan para escenarios de productividad que aprovechan la compartimentación de contenido.

A continuación, se indican algunos principios que se deben tener en cuenta antes de decidir qué técnicas específicas de diseño de doble pantalla pueden ser adecuadas para la aplicación:

  • Proporcionar valor continuo
    • El estado distribuido debe enriquecer la experiencia del usuario como parte del flujo de tareas en paralelo que se realizan con la aplicación. No debe ser un estado personalizado que solo sea útil momentáneamente. En lugar de pensar en pantallas específicas, piensa en la imagen general.
  • No solo se trata de distribución
    • Las aplicaciones no deben ser excelentes solo cuando se distribuyen. No ocultes la funcionalidad fundamental en el estado distribuido, de forma que el usuario deba distribuir nuestra aplicación para poder realizar una tarea básica.
  • Los usuarios siempre tienen el control
    • Para evitar experiencias impredecibles (o potencialmente destructivas) para los usuarios, las aplicaciones no deben introducir automáticamente un estado distribuido sin una acción intencionada iniciada por el usuario. Permite que el usuario decida.
  • Hacer que la distribución sea predecible
    • Comprende la intención del usuario de distribuir y diseñar para ello. Asegúrate de que el resultado de la distribución sea predecible y que agregue valor en cualquier momento dado.

La distribución es elección del usuario

Se autoriza a los usuarios para que tengan control total sobre el uso de la aplicación, incluso cuando quieren distribuirla. Algunas aplicaciones, como las calculadoras, pueden que no tengan un buen aspecto o que no obtengan ninguna ventaja de esta configuración, pero sigue siendo elección del usuario. Sin embargo, en caso de que la mayoría de los usuarios no opten por distribuir la aplicación, puedes decidir que es válido no hacer nada para adaptarse a la acción del usuario.

Mientras que en este artículo se proporcionan diferentes ideas sobre cómo puede que quieras controlar el diseño de varias pantallas, asegúrate de elegir una opción adecuada para los usuarios y la aplicación.

Consideración de la intención del usuario y la orientación del dispositivo

Al diseñar la experiencia de la aplicación para aprovechar dos pantallas, es importante tener información sobre la intención del usuario a la hora de realizar la distribución, tanto en la configuración horizontal doble como en la vertical doble. Aunque aún se deben hacer muchos estudios, empezamos a observar una tendencia para estas preferencias del usuario:

  • En la configuración horizontal doble, los usuarios quieren usar más superficie de pantalla, por lo que las dos pantallas se usan para expandir el área de contenido.
  • En la configuración vertical doble, los usuarios prefieren actividades de multitarea o productividad, por lo que las dos pantallas se usan para separar y agrupar contenido.

Ten esto en cuenta para decidir cómo aplicar los modelos de diseño de doble pantalla. ¿El usuario se beneficia si adaptas completamente la experiencia y el diseño de la aplicación o puedes admitir la distribución simplemente mediante la organización de los controles y elementos de la aplicación para que no se oculten con la unión?

Consideración de todos los diseños compatibles

Existen cuatro escenarios de diseño que se deben tener en cuenta al diseñar la experiencia de la aplicación para un dispositivo de doble pantalla en función de si la aplicación está en una sola pantalla o distribuida, así como de si la vista es predeterminada o en pantalla completa.

supported layouts

  • Una sola pantalla predeterminada

    • De manera predeterminada, la aplicación se abre en un estado maximizado y ocupa una sola pantalla. En los modos de doble pantalla, los usuarios pueden ejecutar dos aplicaciones una al lado de la otra para comparar, consumir o hacer referencias cruzadas de contenido simultáneamente.
    • Compatible de manera predeterminada. Si la aplicación se ha diseñado para que funcione con diferentes tamaños de pantalla y orientaciones verticales y horizontales, tal como se describe anteriormente, no es necesario que hagas nada más.
  • Pantalla distribuida predeterminada

    • Cuando el dispositivo está en un modo de doble pantalla (vertical doble u horizontal doble), los usuarios pueden extender una sola aplicación en ambas pantallas, lo que permite más espacio para el contenido. El usuario es responsable de distribuir la aplicación; no se trata de un estado en el que la aplicación entra mediante programación.
    • La compatibilidad es opcional. El modo distribuido es único para los dispositivos de doble pantalla. Si no realizas ninguna modificación en la aplicación, se comportará como si se estuviera mostrando en una pantalla grande. Sin embargo, puedes implementar una serie de optimizaciones de diseño para hacer que la aplicación aproveche las características únicas de los dispositivos de doble pantalla. Estas características se describen con más detalle más adelante en este artículo.
  • Una sola pantalla completa

    • Esta opción es similar al diseño predeterminado, a excepción de que la interfaz de usuario del sistema (barra de tareas, bandeja del sistema, barra de aplicaciones, nombre de la aplicación) se oculta para crear una experiencia envolvente, ideal para la reproducción de vídeos y juegos.
    • La compatibilidad es opcional. Puedes usar las API disponibles para poner la aplicación en modo de pantalla completa.
  • Pantalla completa distribuida

    • Puedes expandir la aplicación mediante programación para usar el modo de pantalla completa cuando esté distribuida. Si el usuario distribuye una aplicación que se muestra en una sola pantalla en modo de pantalla completa, esta permanece en pantalla completa.
    • La compatibilidad es opcional. Considera la posibilidad de aprovechar la pantalla completa en un modo distribuido, así como en una sola pantalla.

Funcionamiento de la unión

Un diseño distribuido tiene lugar cuando una sola aplicación se presenta en dos pantallas. De manera predeterminada, si una aplicación no está personalizada para este escenario, el sistema notifica a la aplicación que ahora ocupa un mayor ancho y alto de pantalla, y la interfaz de usuario de la aplicación cambia de tamaño para ajustarse a las nuevas dimensiones de la pantalla.

Cuando una aplicación se distribuye en dos pantallas, se forma una unión (espacio entre las dos pantallas). Se trata de un producto derivado de la creación de un dispositivo de doble pantalla. En esta sección se tratan algunas de las ideas y técnicas que se pueden considerar para hacer que la aplicación funcione con la unión.

¿Siempre me adapto a la unión?

En función de la aplicación, es posible que algunas interfaces de usuario se adapten perfectamente para usarse tal cual. Si el usuario puede manipular el contenido de la aplicación para evitar la obstrucción provocada por la unión, puedes optar por no hacer nada especial para que se adapte a la unión.

Por ejemplo, una aplicación de mapa puede distribuir ambas pantallas para aprovechar la superficie de pantalla, pero no hacer nada para controlar la unión porque el usuario puede mover el contenido del mapa para evitar dicha unión. Esta opción se describe con más detalle más adelante en la sección Lienzo extendido.

spanning map

En la imagen siguiente se muestra una interfaz de usuario de cuadrícula en la que el usuario puede desplazarse fácilmente para evitar la unión. Sin embargo, si la interfaz de usuario no se desplaza, como la barra de herramientas que está encima de la cuadrícula, puedes considerar la posibilidad de realizar la distribución hasta el límite, que es una de las técnicas que se abordan más adelante. Te sugerimos que pruebes diferentes ideas de diseño con los usuarios para decidir cuál es la mejor opción para la aplicación.

UI that snaps to natural boundaries

Evitar la unión

Desplazamiento del contenido a un lado

Dado que hay una unión obvia en medio de las dos pantallas, en algunas interfaces de usuario, especialmente los elementos que están centrados en el diseño de la aplicación, pueden ocultarse debido a la unión cuando el usuario distribuye la aplicación. Esto no provoca ningún problema funcional y la aplicación sigue funcionando. Sin embargo, se podría proporcionar una mejor experiencia si la interfaz de usuario se desplazara a un lado de la pantalla. Se trata de una regla general para evitar que se muestre texto o contenido en la unión, ya que puede afectar a la legibilidad y facilidad de uso de la aplicación.

Los diálogos iniciados por la aplicación deben moverse a una de las pantallas en lugar de ajustarse en ambas, especialmente cuando hay botones o acciones que los usuarios deben realizar.

Dialog that avoids the seam on a larger device

Un menú inferior debe moverse a un lado u otro en lugar de ajustarse entre las dos pantallas.

Dialog that avoids the seam on the surface duo

Los menús contextuales invocados por el usuario deben tratar las uniones como límite, especialmente si se invocan cerca del borde de la pantalla.

Menu that avoids the vertical seam

Los menús desplegables en la aplicación o los contenedores expansibles deben cambiar la dirección de la expansión.

Menu that avoids the horizontal seam

Cuando la aplicación está distribuida, mueve la interfaz de usuario al centro de la pantalla superior o izquierda en lugar de al centro de toda la región de la aplicación.

UI that avoids the seam

Distribución en la unión

Alineación con el borde de la unión con un número par de columnas

Cuando la interfaz de usuario tiene un diseño tabular o de cuadrícula, puede ser más fácil para los usuarios ver y usar la aplicación si las líneas verticales u horizontales están alineadas con la unión.

UI that aligns with the seam

Usa un número par de columnas en la cuadrícula, especialmente para contenedores, tablas, etc., y ten en cuenta los márgenes de la unión.

UI that has an even number of columns

Además, muchas aplicaciones aprovechan la interfaz de usuario de pantalla parcial superpuesta sobre el contenido de la aplicación. En función de su tamaño, es posible que quieras que la interfaz de usuario superpuesta ocupe toda la segunda pantalla en su lugar. Esto puede hacer que la aplicación sea más fácil de usar y más nítida visualmente. Ten en cuenta que la interfaz de usuario parcial superpuesta a veces puede implicar que sea contraíble o temporal, por lo que debes ser consciente de las implicaciones de la interacción al cambiar este comportamiento. Esta técnica puede ser más adecuada para dispositivos de menor tamaño.

overlaid UI vs dual-screen layout with vertical seam

overlaid UI vs dual-screen layout with horizontal seam

Reorganización de los elementos de interfaz de usuario

Desplazamiento a cualquier lado de la unión

Una técnica de diseño dinámico que se puede usar para la optimización para dispositivos de doble pantalla consiste en reorganizar el contenido cuando cambia la orientación o el tamaño de la pantalla. En lugar de ajustar arbitrariamente los elementos de la aplicación en las dos pantallas, puedes reorganizarlos con mejores agrupaciones para adaptar el contenido de la aplicación de forma más intencionada.

example of rearranged UI elements

Enmascaramiento y división

Hay dos maneras en las que el software puede controlar la unión. Una es mediante enmascaramiento y la otra mediante división.

a spanned image using masking compared with using splitting

La técnica de enmascaramiento representa la imagen detrás de la unión. Cuando una imagen se obstruye parcialmente, nuestro cerebro conecta de forma natural los elementos "no visibles". Esta técnica suele ser mejor para los elementos multimedia (vídeo, fotos, etc.), así como para los escenarios de tipo de lienzo en los que es más importante mantener la continuidad de la imagen que asegurarse de que se muestre todo el contenido.

La técnica de división representa la imagen recortándola y separándola. Este es el mismo comportamiento que se experimenta cuando se muestra una aplicación en varios monitores. Esta técnica funciona bien para las aplicaciones que tienen muchos controles, como botones que pueden aparecer en el centro de las dos pantallas.

Cada opción tiene sus ventajas en función del tipo de aplicación que se va a crear y seguimos obteniendo información sobre el mejor comportamiento predeterminado para los distintos casos.

Patrones de aplicaciones de doble pantalla

Las técnicas descritas anteriormente son principalmente para adaptarse a la unión, de modo que la aplicación siga proporcionando valor a los usuarios. Los patrones siguientes permiten aprovechar el hecho de que haya dos pantallas.

Estos son los cinco patrones de doble pantalla que se deben tener en cuenta. No son los únicos patrones para los dispositivos de doble pantalla, pero se proporcionan como punto de partida para hacer crecer la imaginación.

an overview of dual-screen patterns

Lienzo extendido

El patrón de lienzo extendido es el patrón de doble pantalla más sencillo, pero es eficaz. Puedes tener este patrón en cuenta si necesitas un lienzo más grande para tareas como dibujar o si la aplicación tiene un lienzo de flujo libre por el que el usuario puede desplazarse libremente para evitar la unión en caso de que contenido importante quede oculto. Esto proporciona la ventaja de ofrecer a la aplicación más superficie de pantalla, en lugar de restringirla a una pantalla o a otra.

Este patrón solo se aplica a la parte de lienzo de la interfaz de usuario. Es posible que tengas que usar una de las otras técnicas para adaptar la unión si vas a ocultar la parte de la aplicación que no es de lienzo.

drawing example of extended canvas UI

tabular and map examples of extended canvas UI

Valor clave:

Extender el lienzo permite a los usuarios aprovechar la superficie mayor de la pantalla que ofrecen los dispositivos de doble pantalla.

Tipos de aplicaciones que pueden beneficiarse de este patrón:

  • Aplicaciones de mapas.
  • Aplicaciones de lienzo para dibujar.

Detalles de lista

El patrón de lista y detalles tiene un panel principal (normalmente con una vista de lista) y un panel de detalles para el contenido. Cuando se selecciona un elemento en la lista, se actualiza el panel de detalles. Este patrón es adecuado para cuando se tiene un área de visualización más amplia. Se usa con frecuencia para libretas de direcciones y correo electrónico.

Al aprovechar las dos pantallas distintas y ajustarlas al límite natural, podrías usar una pantalla para mostrar la lista "elementos" y la otra para mostrar los detalles del elemento seleccionado.

examples of list detail UI

examples of complex list detail UI

Tal y como se mencionó anteriormente, estamos empezando a observar la tendencia de los usuarios a preferir el uso de la vista horizontal doble para usar el espacio de pantalla más grande. Por este motivo, puedes considerar la posibilidad de mostrar las vistas de lista y detalles en paralelo en el modo vertical doble, pero cambiar para mostrar solo la vista de lista o la vista de detalles en modo horizontal doble.

list detail UI in dual-portrait vs dual-landscape mode

Valor clave:

Separar la navegación o la información general de los detalles permite a los usuarios profundizar más en el contenido, a la vez que se mantienen en su posición en la lista o el agregado globales.

Tipos de aplicaciones que pueden beneficiarse de este patrón:

  • Aplicaciones que tienen listas o galerías.
  • Aplicaciones de correo.
  • Aplicaciones de programación.
  • Aplicaciones de selección de fotos o imágenes.
  • Aplicaciones de música con listas de reproducción y detalles de canciones.
  • Aplicaciones con una sólida estructura de navegación.

Dos páginas

Algunas aplicaciones tienden naturalmente a ofrecer una experiencia de paginación similar a la de un libro. Puedes usar el límite natural para mostrar varios elementos de una colección, como páginas o imágenes, que, de lo contrario, podrían haber obligado al usuario a verlos de uno en uno.

En función de la aplicación, puedes decidir paginar por dos páginas o avanzar una página cada vez.

an example of two page document UI

an example of two page card UI

Valor clave:

El uso de la metáfora esqueumórfica de un libro para presentar una página en cada pantalla puede hacer que la aplicación sea más atractiva para la lectura.

Tipos de aplicaciones que pueden beneficiarse de este patrón:

  • Aplicaciones orientadas a documentos.
  • Aplicaciones con contenido paginado.
  • Aplicaciones creadas para la lectura.
  • Aplicaciones con un lienzo con elemento (p. ej., notas o paneles de creación artística).

Vista doble

Tener dos pantallas ofrece una prestación natural para comparar y contrastar dos versiones del mismo tipo de contenido en paralelo, como dos imágenes, listas o documentos.

an example UI of a find the differences game with side by side images

También se puede usar para mostrar la misma información de dos formas diferentes al mismo tiempo, con lo que cada pantalla funciona sin problemas para proporcionar más información al usuario. Por ejemplo, una lista de restaurantes en una pantalla y un mapa con ubicaciones en la otra.

example of UI with directions and map on different screens

Si quieres obtener una experiencia similar a la vista doble sin tener que diseñar dos vistas específicas, considera la posibilidad de admitir la existencia de varias instancias con la aplicación para aprovechar la compatibilidad integrada que proporciona el sistema operativo. Esto puede ser útil para comparar dos productos abiertos en dos pestañas u otros escenarios similares.

an example UI of dual view that can also be achieved by multi-instance

Valor clave:

Tener varias vistas de la misma aplicación en el mismo contenedor, lo que permite comparar el contenido de tipo similar en paralelo.

Tipos de aplicaciones que pueden beneficiarse de este patrón:

  • Herramientas de edición que se benefician de tener los estados previos y posteriores en paralelo (p. ej., código de Markdown y vista previa).
  • Contenido y contexto en paralelo (p. ej., 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 independiente (p. ej., el lienzo en un lado y las notas en el otro).

Panel complementario

El patrón del panel complementario es una gran oportunidad para aprovechar las ventajas de una superficie de pantalla superior, al tomar superficies de segundo nivel que, de lo contrario, estarían ocultas, y exponerlas cuando la aplicación está distribuida.

example of companion pane UI with image and controls

También puedes aprovechar las dos pantallas colocando el lienzo de la aplicación en una pantalla y usando la otra para mantener las herramientas que manipulan el contenido del lienzo. Cuando se usa el panel complementario para un escenario de herramientas, debido a la ergonomía, es probable que sea más adecuado que las herramientas se sitúen a la derecha o en la parte inferior, pero puedes probar la aplicación para ver qué funciona mejor en tu caso.

an example of companion pane UI with charts or editing

an example of companion pane UI with tables or a game controller

Valor clave:

Muestra el contexto complementario para aumentar las tareas de los usuarios, normalmente con una relación principal/secundaria, al llevar a la superficie funcionalidades de nivel 2 previamente escondidas, a fin de obtener un acceso más rápido.

Separar el contenido del consumo de herramientas para interacciones facilita a los usuarios el análisis y el foco en el contenido. Proporciona una experiencia más ergonómica al tener herramientas más próximas a las manos, especialmente en los modos de doble pantalla horizontal.

Tipos de aplicaciones que pueden beneficiarse de este patrón:

  • Aplicaciones de productividad que tienen información complementaria que aparece junto al contenido principal.
  • Herramientas de creatividad, como aplicaciones para dibujar imágenes.
  • Aplicaciones de edición de música o vídeo.
  • Aplicaciones de juegos.

Pasos siguientes

Seleccione una plataforma de desarrollo para obtener información sobre cómo crear aplicaciones de pantalla doble: