Introducción al diseño de aplicaciones de WindowsIntroduction to Windows app design

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.The Windows app 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

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.The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

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 %.UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. La unidad base es 4 porque es el único entero que se puede escalar por números no enteros (por ejemplo, 4*1,5 = 6).The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (for example, 4*1.5 = 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.Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. (Ten en cuenta que el texto no tiene este requisito; el texto puede tener cualquier tamaño y posición).(Note that text doesn't have this requirement; text can have any size and position.)

cuadrícula

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

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.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

Puedes considerar la interfaz de usuario de tu aplicación como una colección de páginas.You can think of your app's UI as a collection of pages. Depende de ti decidir qué debe ir en cada página y las relaciones entre las páginas.It's up to you to decide what should go on each page, and the relationships between pages.

Para obtener información sobre cómo puedes organizar las páginas, consulta Conceptos básicos de navegación.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.

ControlesControls

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

Tu aplicación para UWP interactuará con la experiencia más amplia de Windows con iconos y notificaciones en el Shell de Windows.Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

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.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. Su potencial procede del contenido que incluyen y de la inteligencia y la capacidad con la que se ofrecen.Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

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.UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. Para obtener instrucciones sobre cómo diseñar ventanas para tu aplicación para UWP, consulta Directrices de activos de ventanas e iconos.For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

ventanas en el menú Inicio

EntradasInputs

Las aplicaciones para UWP dependen de interacciones inteligentes.UWP apps rely on smart interactions. 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.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. En cambio, también puedes diseñar tus aplicaciones para modos de entrada específicos.However, you can also design your apps for specific input modes.

entradas

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: Fluent Design SystemNext: 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.