---

Edición especial de Windows 10 de 2015

Volumen 30, número 11

Diseño de IU: Diseño dinámico para aplicaciones universales de Windows

Por Mike Jacobs | Windows 2015

Una aplicación universal de Windows se puede ejecutar en cualquier dispositivo basado en Windows, desde un teléfono, a una tableta o un PC. Incluso puede crear aplicaciones universales de Windows que se ejecuten en dispositivos compactos, como wearables o electrodomésticos. Puede limitar la aplicación a una única familia de dispositivos (por ejemplo, la familia de dispositivos móviles) o puede ponerla a disposición de todos los dispositivos que ejecuten Windows.

Diseñar una aplicación que se vea bien en esa variedad de dispositivos puede ser un reto. Así pues, ¿cómo se puede diseñar una aplicación que proporcione un gran experiencia de usuario en dispositivos con tamaños de pantalla y métodos de entrada tan dispares? Afortunadamente, la Plataforma universal de Windows (UWP) proporciona un conjunto de características integradas y bloques de creación universales para ayudarle a conseguirlo. En este artículo se describen las características de diseño de la UWP y se proporcionan recomendaciones para crear una IU dinámica que se adapte a distintos dispositivos y factores de forma.

Para empezar, echemos un vistazo a algunas de las características que se obtienen al crear una aplicación universal de Windows. No tiene que hacer nada para beneficiarse de estas características: están integradas en la UWP.

Una de estas características es el escalado de plataformas, que optimiza la IU en función del tipo de dispositivo con tecnología de Windows que se usa. El sistema emplea un algoritmo para normalizar la forma de mostrar controles, fuentes y otros elementos de la IU en la pantalla. Este algoritmo de escalado tiene en cuenta la distancia de visión y la densidad de pantalla (píxeles por pulgada) para optimizar el tamaño percibido (en lugar del tamaño físico). El algoritmo de escalado garantiza que una fuente de 24 píxeles en una pantalla de Surface Hub a 3 metros de distancia sea tan legible para el usuario como una fuente de 24 píxeles en una pantalla de smartphone de 5 pulgadas a unos centímetros de distancia. Debido al funcionamiento del sistema de escalado, al diseñar la aplicación universal de Windows, se diseña en píxeles efectivos, en lugar de en píxeles físicos reales.

Otra capacidad integrada de la UWP es una entrada universal habilitada a través de interacciones inteligentes. Aunque puede diseñar sus aplicaciones para métodos de entrada y dispositivos específicos, no es obligatorio. El motivo es que las aplicaciones universales de Windows, de forma predeterminada, dependen de interacciones inteligentes. Eso significa que puede diseñar una interacción basada en clic sin saber ni definir si el clic procede de un mouse real o un toque con el dedo.

Bloques de creación universales

Además, la UWP proporciona útiles bloques de creación que facilitan el diseño de aplicaciones para familias con varios dispositivos. Estos bloques de creación incluyen controles universales, estilos universales y plantillas universales.

El buen funcionamiento de los controles universales está garantizado en todos los dispositivos con tecnología de Windows, desde smartphones a pantallas de Surface Hub. Ejecutan la gama desde controles de formulario comunes, como botones de radio y cuadros de texto, a controles sofisticados, como vistas de cuadrícula y lista, que pueden generar listas de elementos a partir de una secuencia de datos y una plantilla. Estos controles reconocen las entradas y se implementan con el conjunto adecuado de prestaciones de entrada, estados de evento y funcionalidad general para cada familia de dispositivos.

La UWP también proporciona a las aplicaciones un conjunto predeterminado de estilos que optimiza la presentación para cualquier factor de forma de destino. Puede personalizar los estilos predeterminados o sustituirlos por completo para crear experiencias visuales únicas. Los estilos universales ofrecen una gran cantidad de funcionalidades, por ejemplo:

• Un conjunto de estilos que proporciona a la aplicación automáticamente la elección de un tema claro u oscuro y que permite incorporar la preferencia de color de énfasis del usuario
• Una rampa de tipos basados en Segoe que garantiza que el texto de la aplicación sea nítido en todos los dispositivos
• Animaciones predeterminadas para las interacciones
• Compatibilidad automática con modos de alto contraste. Estos estilos se diseñaron con los altos contrastes en mente, de modo que, cuando una aplicación se ejecuta en un dispositivo en el modo de alto contraste, se ve correctamente
• Compatibilidad automática con otros idiomas. Los estilos predeterminados seleccionan automáticamente la fuente correcta para cada idioma compatible con Windows. Incluso puede usar varios idiomas en la misma aplicación y se mostrarán correctamente
• Compatibilidad integrada para el orden de lectura de derecha a izquierda

Finalmente, la UWP proporciona plantillas universales para Adobe Illustrator y Microsoft PowerPoint y contiene todo lo necesario para empezar a diseñar aplicaciones de UWP. Estas plantillas cuentan con controles y diseños universales para todas las clases de tamaño de dispositivo universales. Para descargar las plantillas, vaya a la sección de descargas de Diseño del Centro de desarrollo de Windows: bit.ly/1KHun6J.

Conocer los dispositivos

Para proporcionar la mejor experiencia de usuario posible en sus aplicaciones, es importante familiarizarse con las distintas familias de dispositivos que admite UWP. Al diseñar para un dispositivo particular, las consideraciones principales incluyen cómo se verá la aplicación en el dispositivo, cómo interactuará el usuario con el dispositivo y dónde, cómo y cuándo se usará la aplicación en el dispositivo.

Smartphones El dispositivo informático más usado de todos, el teléfono, puede hacer muchas cosas con una superficie de pantalla reducida y entradas básicas. Los teléfonos están disponibles en varios tamaños, pero la mayoría tienen entre 4 y 6 pulgadas en diagonal. Los teléfonos de más de 6 pulgadas se suelen llamar phablets. Aunque la experiencia de la aplicación en phablets es similar a la de los teléfonos de tamaño estándar, las pantallas más grandes permiten ciertos cambios importantes en el consumo de contenido.

Los teléfonos se usan, principalmente, con una orientación vertical, debido a la facilidad de tener el teléfono en una mano e interactuar con este. Las experiencias que funcionan bien en orientación horizontal son, entre otras, visualización de fotos y vídeos, lectura de libros y composición de texto. Independientemente de su tamaño y modos de uso, los teléfonos comparten algunas características. Principalmente, los usa una persona (el propietario del dispositivo) y suelen estar al alcance, a menudo dentro del bolsillo o el bolso. Normalmente, se usan durante periodos breves de tiempo.

Los usuarios interactúan con sus teléfonos a través del tacto y la voz. La mayoría de teléfonos cuentan con una cámara, micrófono y sensores de movimiento y ubicación.

Tabletas Las tabletas ultraportátiles son el paso intermedio entre los teléfonos y los portátiles. A menudo equipadas con pantallas táctiles, cámaras, micrófonos y acelerómetros, las tablets están disponibles en varios tamaños de pantalla, normalmente, entre 7 y 13 pulgadas. Como sucede con los teléfonos, un solo usuario, el propietario, suele usar la tablet. Se suelen usar en casa y durante más tiempo que los teléfonos. Los usuarios interactúan con las tabletas a través de la función táctil, el lápiz y, a veces, un teclado y mouse.

PC y portátiles Los PC de Windows incluyen una amplia gama de dispositivos y tamaños de pantalla. En general, los PC y portátiles pueden mostrar más información que los teléfonos o tabletas. Los tamaños de pantalla más comunes son de 13 o más pulgadas. Las aplicaciones en PC y portátiles se pueden compartir, pero solo las usa un usuario a la vez y, normalmente, durante periodos más largos. Las aplicaciones se pueden mostrar en una vista de ventana, cuyo tamaño determina el usuario. Los usuarios de PC y portátil interactúan con las aplicaciones con un mouse y teclado, principalmente, pero muchos portátiles y algunos PC admiten también la interacción con la función táctil. Los PC y equipos de escritorio no suelen tener tantos sensores integrados como otros dispositivos, y la mayoría están equipados solo con una cámara y un micrófono.

Dispositivos de Surface Hub Microsoft Surface Hub es un dispositivo de colaboración en equipo de gran pantalla diseñado para su uso simultáneo por parte de varios usuarios. Surface Hub está disponible en tamaños de pantalla de 55 y 84 pulgadas. Las aplicaciones de Surface Hub se comparten durante periodos de tiempo breves, por ejemplo, reuniones, y pueden tener uno de cuatro estados: relleno (una vista fija que ocupa el área de plataforma disponible), completo (vista de pantalla completa estándar), acoplado (una vista variable que ocupa la parte derecha o izquierda de la plataforma) y fondo (oculto mientras se ejecuta la aplicación, disponible en el conmutador de tareas). Surface Hub admite la interacción con la función táctil, lápiz, voz y teclado. También incluye una cámara y un micrófono.

Dispositivos de Internet de las cosas de Windows Esta clase emergente se centra en la integración de pequeños elementos electrónicos, sensores y conectividad en objetos físicos. Estos dispositivos se suelen conectar a través de una red o Internet para notificar los datos del mundo real que detectan y, en algunos casos, actuar sobre ellos. Un dispositivo puede carecer de pantalla (un dispositivo sin periféricos) o estar conectado a una pequeña pantalla (dispositivo con periféricos) de 3,5 pulgadas o menos. Las entradas y la funcionalidad del dispositivo pueden variar en gran medida entre dispositivos.

Diseño para dispositivos específicos

Dado que Windows trabaja en segundo plano para garantizar que la IU sea legible y funcional en todos los dispositivos, no tiene que personalizar la aplicación para ningún dispositivo ni tamaño de pantalla concreto. Sin embargo, puede que, en algunas ocasiones, sí que sea recomendable hacerlo. Por ejemplo, si la aplicación se ejecuta en un PC o portátil, puede mostrar contenido adicional que molestaría en la pantalla de un dispositivo más pequeño, como un teléfono.

Hay muchas formas de mejorar la aplicación para tamaños de pantalla específicos. Algunas son fáciles y rápidas, mientras que otras requieren cierto trabajo.

Para empezar, hablemos un poco más de los píxeles efectivos. Como ya he mencionado, al diseñar la aplicación universal de Windows, se diseña en píxeles efectivos, no en píxeles físicos reales. Los píxeles efectivos le permiten centrarse en el tamaño que se percibe realmente de un elemento de IU, sin necesidad de preocuparse de la densidad de píxeles ni la distancia de visualización de distintos dispositivos. Por ejemplo, al diseñar un elemento de una pulgada por una pulgada, parecerá que el elemento tenga aproximadamente una pulgada en todos los dispositivos. En una pantalla extremadamente grande con una gran densidad de píxeles, puede que el elemento tenga 200 por 200 píxeles físicos, mientras que, en un dispositivo más pequeño, como un teléfono, puede tener 150 x 150 píxeles.

Entonces, ¿cómo afecta esto a la forma de diseñar la aplicación? Al diseñar, puede ignorar la densidad de píxeles y la resolución de pantalla real. En su lugar, puede diseñar para la resolución efectiva (la resolución en píxeles efectivos) de una clase de tamaño. Más adelante, hablaré de las resoluciones de clase de tamaño. Una sugerencia rápida: Al crear bocetos de pantalla en programas de edición de imágenes, asegúrese de definir los PPP en 72 y de definir las dimensiones de la imagen como la resolución efectiva para la clase de tamaño a la que se orienta.

Para garantizar que las aplicaciones se pueden escalar sin problemas, es importante seguir la regla de los cuatro: Ajuste los diseños a la cuadrícula de 4 x 4 píxeles al asignar a los márgenes, tamaños y posiciones de los elementos de la IU, incluida la posición del texto, un múltiplo de cuatro píxeles efectivos. La Ilustración 1 muestra elementos de diseño asignados a la cuadrícula de 4 x 4 píxeles. El elemento de diseño siempre tendrá bordes nítidos. En cambio, los elementos de diseño que no se asignen a la cuadrícula 4 x 4 tendrán bordes borrosos en algunos dispositivos.

Ilustración 1 Alineación con la cuadrícula de 4 x 4 píxeles para una representación nítida de texto e imágenes

A pesar de estos recursos y funcionalidad, puede que, en alguna ocasión, quiera personalizar la IU de la aplicación para una familia de dispositivos específica. Por ejemplo, puede que necesite aprovechar al máximo el espacio y reducir la carga de navegación de los usuarios. Una aplicación diseñada para mostrarse correctamente en un dispositivo con una pantalla pequeña, como un teléfono, se podrá usar en un PC con una pantalla mucho más grande, pero, probablemente, se malgastará parte del espacio. Puede personalizar la aplicación para que muestre más contenido cuando la pantalla supere cierto tamaño. Por ejemplo, una aplicación de compra puede mostrar una categoría de producto a la vez en un teléfono, pero mostrar varias categorías y productos simultáneamente en un PC o portátil. Al poner más contenido en la pantalla, se reduce la navegación que tendrá que hacer el usuario.

Existen otros escenarios, por ejemplo, si necesita aprovechar al máximo la funcionalidad de un dispositivo. Es probable que los teléfonos tengan un sensor de ubicación y una cámara, por ejemplo, mientras que puede que un PC no los tenga. La aplicación puede detectar las funcionalidades disponibles y habilitar las características que las usan.

Finalmente, puede que quiera optimizar las entradas. La biblioteca de controles universal funciona con todos los tipos de entradas (función táctil, lápiz, teclado y mouse), pero puede reorganizar los elementos de la IU para optimizarla para ciertos tipos de entrada. Por ejemplo, si coloca elementos de navegación en la parte inferior de la pantalla, los usuarios de teléfonos podrán acceder fácilmente, pero la mayoría de usuarios de PC esperan encontrar los elementos de navegación en la parte superior de la pantalla.

Técnicas de diseño dinámico

Al optimizar la IU de la aplicación para un ancho de pantalla específico, está creando un diseño dinámico. Hay varias técnicas de diseño dinámico útiles que se pueden usar para personalizar la IU de la aplicación y aprovechar al máximo la superficie de pantalla y las funcionalidades disponibles de los distintos tipos de dispositivo. Hay seis técnicas que se deben tener en cuenta: cambio de posición, cambio de tamaño, redistribución, revelación, reemplazo y sitio y cambio de arquitectura.

Cambiar la posición de los elementos de la IU de la aplicación es una forma de sacar el máximo partido al dispositivo. En la Ilustración 2, la vista vertical de un teléfono o phablet requiere una IU desplazable porque solo se ve un marco completo a la vez. Cuando la aplicación se ejecuta en una tableta u otro dispositivo que permite dos marcos completos en pantalla, en orientación vertical u horizontal, el marco B se puede cambiar para ocupar un espacio dedicado. Si usa una cuadrícula para el posicionamiento, puede seguir usándola para cambiar la posición de los elementos de la IU.

Ilustración 2 Cambio de posición de marcos para aprovechar las pantallas más grandes

Otra forma de optimizar el marco consiste en cambiar el tamaño de los márgenes y elementos de IU para aprovechar pantallas más pequeñas o grandes. Esto podría permitirle aumentar la experiencia de lectura en una pantalla más grande, por ejemplo, al aumentar el tamaño del marco de contenido y, de este modo, dejar espacio para más texto y reducir el desplazamiento necesario. Con el mismo token, distintos tamaños de marco ofrecen la oportunidad de redistribuir elementos de IU en función del dispositivo y la orientación. Por ejemplo, al pasar a una pantalla mayor, tiene sentido usar contenedores más grandes, agregar columnas y generar elementos de lista de una forma distinta a la usada en un smartphone.

La revelación de elementos de IU es una técnica eficaz para hacer surgir la funcionalidad que admite un dispositivo específico (por ejemplo, la cámara de un smartphone) y, al mismo tiempo, proporcionar opciones para aprovechar los distintos tamaños y orientaciones de pantalla. Un ejemplo común de revelación u ocultación de IU es el de los controles de reproducción multimedia, cuyo conjunto de botones se reduce en los dispositivos más pequeños y se amplía en los más grandes. El reproductor multimedia de un PC, por ejemplo, puede controlar una mayor funcionalidad en pantalla que el de un teléfono.

Parte de la técnica de revelación u ocultación consiste en elegir cuándo se deben mostrar más metadatos. Cuando la superficie es escasa, es mejor mostrar los metadatos mínimos, mientras que un portátil o PC de escritorio permite mostrar una cantidad significativa de metadatos. A continuación se incluyen algunos ejemplos de control de visualización u ocultación de metadatos:

• Aplicación de correo electrónico: mostrar el avatar del usuario
• Aplicación de música: mostrar más información sobre un álbum o intérprete
• Aplicación de vídeo: mostrar más información acerca de una película o programa, como los créditos
• Cualquier aplicación: desglosar columnas y mostrar más detalles
• Cualquier aplicación poner en vertical cualquier contenido apilado verticalmente; en dispositivos de mayor tamaño, los elementos de listas apiladas pueden cambiar para revelar filas de elementos de listas y columnas de metadatos

Los dos últimas técnicas de IU dinámica son el reemplazo y el cambio de arquitectura. La técnica de reemplazo permite cambiar la IU para una orientación o clase de tamaño de dispositivo concreta. Por ejemplo, un dispositivo compacto puede mostrar una serie apilada de botones mientras que, en una pantalla más grande, estos controles se sustituyen por pestañas situadas en la parte superior de la pantalla.

Finalmente, puede contraer o bifurcar la arquitectura de la aplicación para orientarla mejor a dispositivos específicos. En el ejemplo de la Ilustración 3, al pasar del dispositivo izquierdo al derecho, se muestra la unión de páginas. La imagen ilustra una aplicación doméstica inteligente que, en una pantalla de mayor tamaño, combina los controles domésticos y el panel de configuración en una única pantalla. En un dispositivo más pequeño, los controles y opciones de configuración se muestran en distintas pantallas.

Ilustración 3 Cambio de arquitectura de visualización de aplicación para distintos tamaños de pantalla

Puntos de interrupción de diseño

El número de dispositivos objetivo y tamaños de pantalla del ecosistema de Windows 10 es demasiado grande para preocuparse de optimizar la IU para cada uno de ellos. En lugar de eso, es recomendable diseñar para tres anchos clave (también llamados puntos de interrupción): 320, 720 y 1024 píxeles efectivos. La Ilustración 4 describe los puntos de interrupción.

Ilustración 4 Diseño de puntos de interrupción para una IU dinámica

Clase de tamaño	Pequeño	Mediano	Grande
Ancho en píxeles efectivos	320	720	1024
Tamaño de pantalla típico (diagonal)	De 4” a 6”	De más de 6” a 12”	13” y más
Dispositivos típicos	Teléfonos	Tabletas, teléfonos con pantalla grande	PC, portátil, Surface Hub

Al diseñar para puntos de interrupción específicos, considere el espacio en pantalla disponible para la aplicación (o la ventana de la aplicación). Cuando la aplicación se ejecuta en pantalla completa, la ventana de la aplicación tiene el tamaño de la pantalla, pero, en otros casos, es más pequeña.

Al diseñar para una IU pequeña, cada píxel cuenta, así que se puede ocultar la funcionalidad que no resulta esencial para el escenario principal y colocarla en un menú o barra de herramientas. También es buena idea mostrar una columna o región de contenido a la vez y usar un icono para representar la búsqueda, en lugar de mostrar un cuadro de búsqueda.

Al pasar a las IU de tamaño medio, puede aprovechar el espacio adicional para mostrar un cuadro de búsqueda (si tiene) y organizar el contenido principal en dos columnas o regiones. Al pasar a una IU grande, se pueden mostrar más funcionalidades y contenidos, lo que reduce el número de clics e interacciones de IU necesarias para obtener contenido o realizar acciones.

Recuerde que un ancho de 320 píxeles efectivos puede significar que la aplicación se está ejecutando en un teléfono o una pequeña ventana de un PC con una pantalla grande, así que asegúrese de considerar la entrada principal del dispositivo: función táctil o mouse. En dispositivos táctiles, puede facilitar la navegación e interacción de dispositivos portátiles al colocar elementos de navegación y comandos en la parte inferior de la pantalla, donde se puede acceder a ellos con el pulgar. Sin embargo, los usuarios que usan un mouse esperan encontrar los elementos de navegación en la parte superior de la pantalla. La aplicación puede usar la propiedad Windows.UI.ViewManagement.UI­ViewSettings.UserInteractionMode para detectar el dispositivo de entrada principal y ajustar la IU según corresponda.

La Plataforma universal de Windows permite a las aplicaciones ejecutarse en una variedad de dispositivos, desde wearables con diminutas pantallas al enorme Surface Hub. Al implementar técnicas de diseño dinámico y aprovechar los bloques de creación (controles y estilos) y características integradas de la plataforma, resulta posible crear una IU que se vea a la perfección en dispositivos de cualquier forma y tamaño.

---

Mike Jacobstrabaja como desarrollador de contenido sénior para Microsoft. Durante muchos años, ha documentado los aspectos de presentación y gráficos de las tecnologías de Microsoft, desde Direct2D a Windows Presentation Foundation y Silverlight.

Gracias a los siguientes expertos técnicos de Microsoft por revisar y contribuir a este artículo: JeffArnold, Eugene Gavrilov, Ross Heeter, Chigusa Sansen, Joe Tobens, así como a Mike Bottemiller (Murphy & Associates)
Jeff Arnold es diseñador principal sénior en Windows. Su equipo trabaja junto con el equipo de la Plataforma de desarrollo para proporcionar soluciones creativas y tangibles dentro de la evolución de la UWP.
Mike Bottemiller es consultor sénior en Murphy & Associates y escribe para Microsoft. Su trayectoria profesional va desde las pruebas de software a la publicación de contenido y la gestión de proyectos. Actualmente trabaja como escritor y se centra en el diseño y la experiencia del usuario. Ha escrito artículos y guías de diseño para Visual Studio, Xbox y aplicaciones de UWP.
Eugene Gavrilov
Ross Heeter es diseñador principal sénior de Microsoft. Está especializado en interacciones entre dispositivos, plataformas y entradas, y ha trabajado en Xbox, diseñando el panel de la consola, Compañero SmartGlass y en experiencias de Indie Games Creator’s Club. Actualmente diseña experiencias de aplicaciones para el grupo Windows and Devices Group.
Chigusa Sansen es administrador de programas sénior en Microsoft y ha trabajado en muchas experiencias de IU, desde Windows CE a Windows Mobile, PC, teléfonos, tabletas y Xbox. Ha contribuido a las evoluciones principales de la experiencia del usuario de Windows Phone y Windows 10 (UWP) desde la perspectiva del marco de trabajo de IU.
Joe Tobens es diseñador sénior en Microsoft. Ha diseñado y documentado IU dinámicas para varios dispositivos y aplicaciones para Windows 10. Actualmente, trabaja en las entradas para el grupo Windows and Devices Group.