El diseño de una aplicación que tenga buena apariencia en una muy amplia variedad de dispositivos puede ser un desafío. Afortunadamente, la UWP proporciona un conjunto de características integradas y bloques de compilación universales que te ayudarán a crear una experiencia de usuario que funcione bien con una diversidad de dispositivos, pantallas y métodos de entrada.
Funciones UWP
Demos un vistazo a algunas de las funciones que se obtienen al crear una aplicación para UWP.
Escalado y píxeles efectivos
Las aplicaciones para UWP ajustan automáticamente el tamaño de los controles, las fuentes y otros elementos de la interfaz de usuario para que sean legibles y fáciles de interaccionar en todos los dispositivos.
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.
Debido al 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. Por lo tanto, ¿cómo afecta esto a la manera de diseñar la aplicación?
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).
Cuando el sistema escala la interfaz de usuario, lo hace en múltiplos de 4. Para garantizar un aspecto nítido, ajusta los diseños a la cuadrícula de 4 x 4 píxeles: convierte los márgenes, los tamaños y las posiciones de los elementos de la interfaz de usuario a un múltiplo de 4 píxeles efectivos. Ten en cuenta que el texto no tiene este requisito; el texto puede tener cualquier tamaño y posición.
En esta ilustración se muestran elementos de diseño que se asignan a la cuadrícula de 4 x 4 píxeles. El elemento de diseño siempre tendrá bordes nítidos.
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 una lista de las clases de tamaño y resoluciones efectivas, consulta el artículo Tamaños de pantalla y puntos de interrupción.
Entrada universal e interacciones inteligentes
Otra funcionalidad integrada de la UWP es la entrada universal habilitada a través de interacciones inteligentes. Aunque puedes diseñar tus aplicaciones para dispositivos y modos de entrada específicos, no es necesario. Esto es porque las aplicaciones Windows universales se basan de forma predeterminada en interacciones inteligentes. Esto significa que puedes diseñar con la interacción mediante clic sin tener que saber o definir si el clic procede de un clic del mouse real o de la presión de un dedo.
Controles y estilos universales
La UWP también proporciona algunos bloques de creación útiles que facilitan el diseño de aplicaciones para varias familias de dispositivos.
- Controles universales
La UWP proporciona un conjunto de controles universales que se garantiza que funcionan bien en todos los dispositivos que ejecutan Windows. Este conjunto de controles universales incluye de todo, desde controles de formulario comunes, como botones de opción y cuadros de texto, hasta controles sofisticados como la vista de cuadrícula y la vista de lista, que pueden generar listas de elementos de un flujo de datos y una plantilla. Estos controles tienen en cuenta las entradas y se implementan con el conjunto adecuado de funciones de entrada, estados de evento y funcionalidad general para cada familia de dispositivos.
Para obtener una lista completa de estos controles y los patrones que se pueden crear a partir de ellos, consulta la sección Controles y patrones.
- Estilos universales
Tu aplicación para UWP obtiene automáticamente un conjunto predeterminado de estilos que ofrecen estas características:
- Un conjunto de estilos que proporcionan automáticamente a la aplicación un tema claro u oscuro (a tu elección) y puede incorporar la preferencia de color de énfasis que el usuario prefiera.
- Una tabla de tipos Segoe que garantiza que el texto de la aplicación aparezca nítido en todos los dispositivos.
- Animaciones predeterminadas para interacciones.
- Compatibilidad automática para modos de alto contraste. Estos estilos se diseñaron teniendo en cuenta el alto contraste, para que cuando se ejecute tu aplicación en un dispositivo en modo de alto contraste, se visualice correctamente.
- Compatibilidad automática con otros idiomas. Nuestros estilos predeterminados seleccionan automáticamente la fuente correcta para cada idioma compatible con Windows. Puedes incluso usar varios idiomas en la misma aplicación, y se mostrarán correctamente.
- Compatibilidad integrada para el orden de lectura de derecha a izquierda.
Puedes personalizar estos estilos predeterminados para dar un toque personal a la aplicación o reemplazarlos por completo con los tuyos propios para crear una experiencia visual única. Por ejemplo, este es un diseño para una aplicación meteorológica con un estilo visual único:
UWP y el sistema de diseño Fluent
El sistema de diseño Fluent te ayuda a crear interfaces de usuario modernas y claras que incorporan luz, profundidad, movimiento, materiales y escala. El diseño Fluent se está aplicando en dispositivos y aplicaciones de Windows 10 para crear experiencias atractivas, llamativas e intuitivas.
¿Cómo puedes incorporar el diseño Fluent a tu aplicación? Agregamos continuamente nuevos controles y funciones que lo hacen fácil. Esta es una lista de funciones de diseño Fluent actuales para UWP:
- Acrílico es un tipo de pincel que crea superficies semitransparentes.
- Parallax agrega perspectiva tridimensional, profundidad y movimiento al contenido en desplazamiento, como las listas de desplazamiento.
- Mostrar utiliza luz para crear un efecto de superposición del ratón que ilumina elementos interactivos de la interfaz de usuario.
- Animaciones conectadas proporciona escenas de transición logradas que mejoran la facilidad de uso, manteniendo el contexto y proporcionando continuidad.
También hemos actualizado nuestras directrices de diseño (lo que estás leyendo actualmente), de manera que se basen en los principios de diseño Fluent.
Anatomía de una aplicación para UWP típica
Ahora que hemos descrito los bloques de creación de aplicaciones para UWP, echemos un vistazo a cómo reunirlos para crear una interfaz de usuario.
Una interfaz de usuario moderna es algo complejo que se compone de texto, formas, colores y animaciones formadas en última instancia por píxeles individuales de la pantalla del dispositivo que estás usando. Al empezar a diseñar una interfaz de usuario, la gran cantidad de opciones puede ser abrumadora.
Para que las cosas sean más sencillas, vamos a definir la anatomía de una aplicación desde una perspectiva de diseño. Supongamos que una aplicación se compone de pantallas y páginas. Cada página tiene una interfaz de usuario que consta de tres tipos de elementos de interfaz de usuario: elementos de contenido, de comandos y de navegación.
AQUÍ ENCOTRARÁS MAS SOBRE DISEÑO PARA UWP