Introducción al diseño de aplicaciones de Windows

ejemplo de aplicación de iluminación

Las instrucciones de diseño de aplicaciones de Windows son un recurso que te ayuda a diseñar y compilar fantásticas aplicaciones.

No se trata de una lista de reglas prescriptivas, sino de un documento dinámico, diseñado para adaptarse a la evolución de nuestro sistema Fluent Design, así como a las necesidades de nuestra comunidad de creación de aplicaciones.

Esta introducción proporciona una descripción general de las características de diseño universal que se incluyen en cada aplicación para UWP, que te ayudan a crear interfaces de usuario (IU) que se adapten con elegancia a una amplia gama de dispositivos.

Escalado y píxeles efectivos

Las aplicaciones para UWP se ejecutan en todos los dispositivos Windows 10, desde la televisión hasta la tableta o el PC. ¿Cómo puedo diseñar una interfaz de usuario que se vea bien en una amplia variedad de dispositivos y tamaños de pantalla?

misma aplicación en varios dispositivos

UWP te ayuda al ajustar automáticamente los elementos de la interfaz de usuario para que sean legibles y sea fácil interactuar con ellos en todos los dispositivos y tamaños de pantalla.

Cuando la aplicación se ejecuta en un dispositivo, el sistema usa un algoritmo para normalizar la manera en que los elementos de la interfaz de usuario se muestran en la pantalla. Este algoritmo de escalado tiene en cuenta la distancia de visualización y la densidad de la 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 px en un dispositivo Surface Hub a 3 metros de distancia sea tan legible para el usuario como una fuente de 24 px en un teléfono de 5 pulgadas a unos centímetros de distancia.

distancias de visualización para diferentes dispositivos

Debido al funcionamiento del sistema de escalado, al diseñar la aplicación para UWP, estás diseñando en píxeles efectivos, no en píxeles físicos reales. Los píxeles efectivos (epx) son una unidad de medida virtual y se utilizan para expresar las dimensiones y el espaciado del diseño, con independencia de la densidad de la pantalla. (En nuestras instrucciones, epx, ep y px se usan indistintamente).

Al diseñar, puedes ignorar la densidad de píxeles y la resolución de pantalla real. En su lugar, diseña la resolución efectiva (la resolución en píxeles efectivos) de una clase de tamaño (para obtener más información, consulta el artículo Tamaños de pantalla y puntos de interrupción).

Sugerencia

Al crear bocetos de pantalla en los programas de edición de imágenes, establece el valor de PPP en 72 y las dimensiones de imagen en la resolución eficaz de la clase de tamaño que quieres obtener. Para obtener una lista de clases de tamaño y resoluciones efectivas, consulta el artículo Tamaños de pantalla y puntos de interrupción.

Múltiplos de cuatro

Los tamaños, los márgenes y las posiciones de los elementos de la interfaz de usuario siempre deberían estar en múltiplos de 4 epx en tus aplicaciones para UWP.

UWP se escala en una variedad de dispositivos con niveles predefinidos de escalado del 100 %, 125 %, 150 %, 175 %, 200 %, 225 %, 250 %, 300 %, 350 % y 400 %. La unidad base es 4 porque se puede escalar a estos niveles como número entero (por ejemplo, 4 x 125 % = 5, 4 x 150 % = 6). Al usar múltiplos de cuatro, se alinean todos los elementos de la interfaz de usuario con píxeles enteros y se garantiza que los elementos de la interfaz de usuario tengan contornos afilados y nítidos. (Ten en cuenta que el texto no tiene este requisito; el texto puede tener cualquier tamaño y posición).

cuadrícula

Diseño

Dado que las aplicaciones para UWP se adaptan automáticamente a todos los dispositivos, el diseño de una de estas aplicaciones para cualquier dispositivo sigue la misma estructura. Empecemos desde el comienzo de la interfaz de usuario de la aplicación para UWP.

Ventanas, marcos y páginas

Cuando se inicia una aplicación para UWP en cualquier dispositivo con Windows 10, se inicia en una Ventana con un Marco, lo que permite navegar entre instancias de Página.

Captura de pantalla de Window con Frame.

Puedes considerar la interfaz de usuario de tu aplicación como una colección de páginas. Depende de ti decidir qué debe ir en cada página y las relaciones entre las páginas.

Para obtener información sobre cómo puedes organizar las páginas, consulta Conceptos básicos de navegación.

Captura de pantalla de la página de la colección.

Diseño de página

¿Qué aspecto deberían tener esas páginas? Bien, la mayoría de las páginas siguen una estructura común para proporcionar coherencia, de forma que los usuarios puedan desplazarse fácilmente entre las páginas de la aplicación y dentro de ellas. Las páginas suelen contener tres tipos de elementos de interfaz de usuario:

  • Los elementos de navegación ayudan a los usuarios a elegir el contenido que quieren mostrar.
  • Los elementos de comandos inician acciones, como manipular, guardar o compartir contenido.
  • Los elementos de contenido muestran el contenido de la aplicación.

Un patrón de diseño común

Para más información sobre cómo implementar patrones comunes de aplicaciones para UWP, consulta el artículo Diseño de página.

También puedes usar Windows Template Studio en Visual Studio para empezar a trabajar con un diseño para la aplicación.

Controles

La plataforma de diseño de UWP proporciona un conjunto de controles comunes cuyo funcionamiento está garantizado en todos los dispositivos de Windows y que cumplen los principios de nuestro sistema Fluent Design. Estos controles incluyen todo, desde controles simples, como botones y los elementos de texto, hasta controles sofisticados que pueden generar listas a partir de un conjunto de datos y una plantilla.

controles UWP

Para obtener una lista completa de los controles de UWP y los patrones que se pueden crear a partir de ellos, consulta la sección Controles y patrones.

Estilo

Los controles comunes reflejan automáticamente el tema y el color de énfasis del sistema, el trabajo con todo tipo de entradas y la adaptación a todos los dispositivos. De esa manera, reflejan el sistema Fluent Design, en cuanto que son adaptables, comprensivos y atractivos. Los controles comunes usan luz, movimiento y profundidad en sus estilos predeterminados, con lo cual al usarlos, vas a incorporar nuestro sistema Fluent Design en tu aplicación.

Los controles comunes son enormemente personalizables: puedes cambiar el color de primer plano de un control o personalizar su apariencia completamente. Para invalidar los estilos predeterminados de los controles, usa estilo ligero o crea controles personalizados en XAML.

Gif de color de énfasis

Shell

Tu aplicación para UWP interactuará con la experiencia más amplia de Windows con iconos y notificaciones en el Shell de Windows.

En el menú Inicio y cuando se inicia tu aplicación se muestran ventanas que proporcionan una idea de qué está sucediendo en la aplicación. Su potencial procede del contenido que incluyen y de la inteligencia y la capacidad con la que se ofrecen.

Las aplicaciones para UWP tienen cuatro tamaños de ventana (pequeño, mediano, ancho y grande) que se pueden personalizar con el icono y la identidad de la aplicación. Para obtener instrucciones sobre cómo diseñar ventanas para tu aplicación para UWP, consulta Directrices de activos de ventanas e iconos.

ventanas en el menú Inicio

Entradas

Las aplicaciones para UWP dependen de interacciones inteligentes. Puedes diseñar basándote en una interacción mediante clic sin tener que saber o definir si el clic procede de un mouse o un lápiz, o de la pulsación de un dedo. En cambio, también puedes diseñar tus aplicaciones para modos de entrada específicos.

Captura de pantalla de iconos que designan distintos modos de entrada.

Dispositivos

dispositivos

Del mismo modo, si bien UWP adapta automáticamente la aplicación a diferentes dispositivos, también puedes optimizar tu aplicación para UWP para dispositivos específicos.

Facilidad de uso

Breve vídeo de figuras de palo que muestran personas con distintas capacidades.

Por último, aunque no menos importante, la usabilidad consiste en hacer que la experiencia de tu aplicación esté abierta a todos los usuarios. Todo el mundo pueden beneficiarse de una experiencia del usuario realmente inclusiva; consulta Facilidad de uso para aplicaciones para UWP para ver cómo hacer que tu aplicación sea fácil de usar por todos los usuarios.

Si estás diseñando para un público internacional, quizás quieras consultar Globalización y localización.

También puedes pensar en las características de accesibilidad para usuarios con limitaciones visuales, auditivas y de movilidad. Si la accesibilidad se integra en el diseño desde el principio, hacer que tu aplicación sea accesible no requiere mucho más tiempo y esfuerzo.

Herramientas y kits de herramientas de diseño

Ahora que conoces las características de diseño básicas, ¿qué tal si empiezas a diseñar tu aplicación para UWP?

Proporcionamos una serie de herramientas que te ayudarán en el proceso de diseño:

  • Consulta nuestra página de kits de herramientas de diseño para conocer los kits de herramientas XD, Illustrator, Photoshop, Framer y Sketch, así como para obtener descargas de herramientas de diseño y fuentes adicionales.

  • Para lograr que el equipo esté configurado para escribir código para aplicaciones para UWP, consulta nuestro artículo Introducción > Preparación.

  • Para obtener ideas sobre cómo implementar la interfaz de usuario para UWP, echa un vistazo a nuestras completas aplicaciones para UWP de ejemplo.

Resumen en vídeo

Siguiente: Fluent Design System

Si quieres obtener información sobre los principios que rigen Fluent Design (el sistema de diseño de Microsoft) y ver más características que puedes incorporar a tu aplicación para UWP, sigue con Sistema Fluent Design.