Introducción al diseño de aplicaciones para UWPIntroduction to UWP app design

ejemplo de aplicación de iluminación

Las instrucciones de diseño para la Plataforma universal de Windows (UWP) son un recurso que te ayuda a diseñar y crear fantásticas aplicaciones.The Universal Windows Platform (UWP) design guidance is a resource to help you design and build beautiful, polished apps.

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.It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

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.This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

Escalado y píxeles efectivosEffective pixels and scaling

Las aplicaciones para UWP se ejecutan en todos los dispositivos Windows 10, desde la televisión hasta la tableta o el PC.UWP apps run on all Windows 10 devices, from your TV to your tablet or 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?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

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.UWP helps by automatically adjusting UI elements so that they're legible and easy to interact with on all devices and screen sizes.

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.When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. 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).This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). 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.The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

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.Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. 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.Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. (En nuestras instrucciones, epx, ep y px se usan indistintamente).(In our guidelines, epx, ep, and px are used interchangeably.)

Al diseñar, puedes ignorar la densidad de píxeles y la resolución de pantalla real.You can ignore the pixel density and the actual screen resolution when designing. 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).Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

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.When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. 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.For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

Múltiplos de cuatroMultiples of four

The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (e.g. 4*1.5 = 6). Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (Note that text doesn't have this requirement; text can have any size and position.)

grid

DiseñoLayout

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.Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. Empecemos desde el comienzo de la interfaz de usuario de la aplicación para UWP.Let's start from the very beginning of your UWP app's UI.

Ventanas, marcos y páginasWindows, Frames, and Pages

When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

Frame

You can think of your app's UI as a collection of pages. It's up to you to decide what should go on each page, and the relationships between pages.

To learn how you can organize your pages, see Navigation basics.

Frame

Diseño de páginaPage layout

¿Qué aspecto deberían tener esas páginas?What should those pages look like? 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.Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. Las páginas suelen contener tres tipos de elementos de interfaz de usuario:Pages typically contain three types of UI elements:

  • Los elementos de navegación ayudan a los usuarios a elegir el contenido que quieren mostrar.Navigation elements help users choose the content they want to display.
  • Los elementos de comandos inician acciones, como manipular, guardar o compartir contenido.Command elements initiate actions, such as manipulating, saving, or sharing content.
  • Los elementos de contenido muestran el contenido de la aplicación.Content elements display the app's content.

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.To learn more about how to implement common UWP app patterns, see the Page layout article.

También puedes usar Windows Template Studio en Visual Studio para empezar a trabajar con un diseño para la aplicación.You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

ControlsControls

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.UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. 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.These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

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.For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

EstiloStyle

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.Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. De esa manera, reflejan el sistema Fluent Design, en cuanto que son adaptables, comprensivos y atractivos.In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. 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.Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

Los controles comunes son enormemente personalizables: puedes cambiar el color de primer plano de un control o personalizar su apariencia completamente.Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. Para invalidar los estilos predeterminados de los controles, usa estilo ligero o crea controles personalizados en XAML.To override the default styles in controls, use lightweight styling or create custom controls in XAML.

Gif de color de énfasis

ShellShell

Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

tiles on start menu

EntradasInputs

UWP apps rely on smart interactions. You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. However, you can also design your apps for specific input modes.

inputs

DispositivosDevices

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.Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

Facilidad de usoUsability

Por último, aunque no menos importante, la usabilidad consiste en hacer que la experiencia de tu aplicación esté abierta a todos los usuarios.Last but not least, usability is about making your app's experience open to all users. 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.Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

Si estás diseñando para un público internacional, quizás quieras consultar Globalización y localización.If you're designing for international audiences, you might want to check out Globalization and localization.

También puedes pensar en las características de accesibilidad para usuarios con limitaciones visuales, auditivas y de movilidad.You might also want to consider accessibility features for users with limited sight, hearing, and mobility. 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.If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

Herramientas y kits de herramientas de diseñoTools and design toolkits

Ahora que conoces las características de diseño básicas, ¿qué tal si empiezas a diseñar tu aplicación para UWP?Now that you know about the basic design features, how about getting started with designing your UWP app?

Proporcionamos una serie de herramientas que te ayudarán en el proceso de diseño:We provide a variety of tools to help your design process:

  • 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.See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • Para lograr que el equipo esté configurado para escribir código para aplicaciones para UWP, consulta nuestro artículo Introducción > Preparación.To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • Para obtener ideas sobre cómo implementar la interfaz de usuario para UWP, echa un vistazo a nuestras completas aplicaciones para UWP de ejemplo.For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

Resumen en vídeoVideo summary

Siguiente: Sistema Fluent DesignNext: 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.If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.