Los creadores de aplicaciones de Fluent Design System para WindowsThe Fluent Design System for Windows app creators

Encabezado de Fluent Design

IntroducciónIntroduction

Fluent Design System es nuestro sistema para la creación de interfaces de usuario adaptables, comprensivas y atractivas.The Fluent Design System is our system for creating adaptive, empathetic, and beautiful user interfaces.

PrincipiosPrinciples

Adaptables: las experiencias Fluent parecen naturales en todos los dispositivos.Adaptive: Fluent experiences feel natural on each device

Las experiencias Fluent se adaptan al entorno.Fluent experiences adapt to the environment. Una experiencia Fluent resulta cómoda en una tableta, un PC de escritorio y una Xbox; incluso funciona perfectamente en unos cascos de realidad mixta.A Fluent experience feels comfortable on a tablet, a desktop PC, and an Xbox—it even works great on a Mixed Reality headset. Y cuando agregas más hardware, como un monitor adicional para tu PC, una experiencia Fluent puede sacarle mayor partido.And when you add more hardware, like an additional monitor for your PC, a Fluent experience takes advantage of it.

Comprensivas: las experiencias Fluent son intuitivas e intensas.Empathetic: Fluent experiences are intuitive and powerful

Las experiencias Fluent se ajustan al comportamiento y la intención: entienden y anticipan cuando es necesario.Fluent experiences adjust to behavior and intent—they understand and anticipate what’s needed. Reúnen a personas e ideas, tanto si están en lados opuestos del mundo o sentadas una al lado de la otra.They unite people and ideas, whether they’re on opposite sides of the globe or standing right next to each other.

Atractivas: las experiencias Fluent son interesantes y envolventes.Beautiful: Fluent experiences are engaging and immersive

Mediante la incorporación de elementos del mundo físico, una experiencia Fluent aprovecha algo fundamental.By incorporating elements of the physical world, a Fluent experience taps into something fundamental. El uso de luz, sombra, movimiento, profundidad y textura permite organizar la información de manera que resulte intuitiva e instintiva.It uses light, shadow, motion, depth, and texture to organize information in a way that feels intuitive and instinctual.

Aplicar Fluent Design a la aplicación con UWPApplying Fluent Design to your app with UWP

Logotipo de Fluent Design

Nuestras directrices de diseño explican cómo aplicar los principios de Fluent Design a las aplicaciones.Our design guidelines explain how to apply Fluent Design principles to apps. ¿Qué tipo de aplicaciones?What type of apps? Aunque muchas de nuestras directrices se pueden aplicar a cualquier plataforma, hemos creado UWP (Plataforma universal de Windows) para admitir Fluent Design.While many of our guidelines can be applied to any platform, we created UWP (the Universal Windows Platform) to support Fluent Design.

Las características de Fluent Design están integradas en UWP.Fluent Design features are built into UWP. Algunas de estas características, como píxeles efectivos y el sistema de entrada universal, son automáticas.Some of these features—such as effective pixels and the universal input system—are automatic. No tienes que escribir código adicional para poder usarlas.You don't have to write any extra code to take advantage of them. Otras características, como acrílico, son opcionales; puedes agregarlas a tu aplicación escribiendo el código que las incluya.Other features, like acrylic, are optional; you add them to your app by writing code to include them.

Estamos incorporando controles de UWP al escritorio para que puedas mejorar el aspecto, la sensación y la funcionalidad de las aplicaciones de Windows o WPF existentes con características de Fluent Design.We're bringing UWP controls to the desktop so that you can enhance the look, feel, and functionality of your existing WPF or Windows applications with Fluent Design features. Para más información, consulta Hospedar los controles de UWP en aplicaciones de WPF y Windows Forms.To learn more, see Host UWP controls in WPF and Windows Forms applications.

Además de instrucciones de diseño, nuestros artículos sobre Fluent Design también muestran cómo escribir el código que permite hacer realidad tu diseño.In addition to design guidance, our Fluent Design articles also show you how to write the code that makes your designs happen. UWP usa XAML, un lenguaje de marcado que facilita la creación de interfaces de usuario.UWP uses XAML, a markup-based language that makes it easier to create user interfaces. A continuación te mostramos un ejemplo:Here's an example:

<Grid BorderBrush="Blue" BorderThickness="4">
    <TextBox Text="Design with XAML" Margin="20" Padding="16,24"/>
</Grid>

Si no estás familiarizado con el desarrollo para UWP, consulta nuestra página de introducción a UWP.If you're new to UWP development, check out our Get started with UWP page.

Encontrar un ajuste naturalFind a natural fit

¿Cómo puedes hacer natural una aplicación en una variedad de dispositivos?How do you make an app feel natural on a variety of devices? Haciéndola sentir como si se hubiese diseñado teniendo en cuenta cada uno de los dispositivos.By making it feel as though it were designed with each specific device in mind. Un diseño de interfaz de usuario que se adapta a diferentes tamaños de pantalla, de modo que no hay ningún espacio desperdiciado (tampoco ninguna congestión), hace que la experiencia parezca natural, como si se hubiese diseñado para ese dispositivo.A UI layout that adapts to different screen sizes so there's no wasted space (but no crowding either) makes an experience feel natural, as though it were designed for that device.

imagen fpo

Diseño de puntos de interrupción adecuadosDesign for the right breakpoints

En lugar de diseñar cada tamaño de pantalla individual, el hecho de centrarse en unos anchos claves (también denominados "puntos de interrupción") puede simplificar en gran medida tus diseños y código mientras tu aplicación se ve estupendamente en pantallas pequeñas y grandes.Instead of designing for every individual screen size, focusing on a few key widths (also called "breakpoints") can greatly simplify your designs and code while still making your app look great on small to large screens.

Más información sobre los tamaños de pantalla y puntos de interrupciónLearn about screen sizes and breakpoints

imagen fpo

Creación de un diseño dinámicoCreate a responsive layout

Para que una aplicación funcione de manera natural, debe adaptar su diseño a los distintos tamaños de pantalla y dispositivos.For an app to feel natural, it should adapt its layout to different screen sizes and devices. Puedes usar ajustes de tamaño automático, paneles de diseño, estados visuales e incluso definiciones de interfaz de usuario independientes en XAML para crear una interfaz de usuario adaptativa.You can use automatic sizing, layout panels, visual states, and even separate UI definitions in XAML to create a responsive UI.

Más información sobre el diseño dinámicoLearn about responsive design

imagen fpo

Diseño para una variedad de dispositivosDesign for a spectrum of devices

Las aplicaciones para UWP pueden ejecutarse en una amplia variedad de dispositivos Windows.UWP apps can run on a wide variety of Windows-powered devices. Resulta útil comprender qué dispositivos están disponibles, para qué se han diseñado y cómo interactúan los usuarios con ellos.It's helpful to understand which devices are available, what they're made for, and how users interact with them.

Más información sobre los dispositivos UWPLearn about UWP devices

imagen fpo

Optimización para la entrada adecuadaOptimize for the right input

Las aplicaciones para UWP admiten automáticamente interacciones comunes con mouse, teclado, lápiz y función táctil.UWP apps automatically support common mouse, keyboard, pen, and touch interactions. No necesitas hacer nada más.There's nothing extra you have to do. Sin embargo, si quieres, puedes mejorar tu aplicación gracias a la compatibilidad optimizada con entradas específicas, como el lápiz y Surface Dial.But, if you'd like to, you can enhance your app with optimized support for specific inputs, like pen and the Surface Dial.

Más información sobre las entradas y las interaccionesLearn about inputs and interactions

IntuitivaMake it intuitive

Una experiencia resulta intuitiva cuando se comporta tal y como espera el usuario.An experience feels intuitive when it behaves the way the user expects it to. Al usar controles y patrones establecidos, y aprovechar la compatibilidad de la plataforma con la accesibilidad y la globalización, estás creando una experiencia sin esfuerzo que ayuda a los usuarios a ser más productivos.By using established controls and patterns and taking advantage of platform support for accessibility and globalization, you create an effortless experience that helps users be more productive.

Demostrar empatía consiste en hacer lo correcto en el momento correcto.Demonstrating empathy is about doing the right thing at the right time.

Las experiencias Fluent usan controles y patrones de forma coherente, por lo que se comportan tal y como espera el usuario.Fluent experiences use controls and patterns consistently, so they behave in ways the user has learned to expect. Las experiencias Fluent son accesibles a personas con una amplia diversidad de capacidades físicas e incorporan características de globalización para que todo el mundo pueda usarlas.Fluent experiences are accessible to people with a wide range of physical abilities, and incorporate globalization features so people around the world can use them.

imagen fpo

Provisión de la navegación adecuadaProvide the right navigation

Crea una experiencia fácilmente mediante la estructura de la aplicación y los componentes de navegación adecuados.Create an effortless experience by using the right app structure and navigation components.

Más información sobre la navegaciónLearn about navigation

imagen fpo

InteractividadBe interactive

Los botones, las barras de comandos, los métodos abreviados de teclado y los menús contextuales permiten a los usuarios interactuar con la aplicación; son las herramientas que convierten una experiencia estática en algo dinámico.Buttons, command bars, keyboard shortcuts, and context menus enable users to interact with your app; they're the tools that change a static experience into something dynamic.

Más información sobre los comandosLearn about commanding

imagen fpo

Uso del control adecuado para el trabajoUse the right control for the job

Los controles son los bloques de creación de la interfaz de usuario. Usar el control adecuado te ayuda a crear una interfaz de usuario que se comporta tal y como esperan los usuarios.Controls are the building blocks of the user interface; using the right control helps you create a user interface that behaves the way users expect it to. UWP proporciona más de 45 controles, que van desde botones simples hasta los eficaces controles de datos.UWP provides more than 45 controls, ranging from simple buttons to powerful data controls.

Más información sobre los controles de UWPLearn about UWP controls

imagen inclusiva

Inclusividad Una aplicación bien diseñada es accesible para las personas con discapacidades.Be inclusive A well-designed app is accessible to people with disabilities. Con algo de código adicional, puedes compartir tu aplicación con personas de todo el mundo.With some extra coding, you can share your app with people around the world.

Más información sobre la facilidad de usoLearn about Usability

Atractiva y envolventeBe engaging and immersive

Fluent Design no tiene que ver con efectos llamativos.Fluent Design isn't about flashy effects. Incorpora efectos físicos que realmente mejoran la experiencia del usuario, ya que emulan experiencias para las que se ha programado nuestro cerebro a fin de procesarlas eficazmente.It incorporates physical effects that truly enhance the user experience, because they emulate experiences that our brains are programmed to process efficiently.

Usar luzUse light

La luz tiene una forma de atraer nuestra atención.Light has a way of drawing our attention. Crea atmósfera y sensación de espacio, y es una herramienta muy práctica para iluminar la información.It creates atmosphere and a sense of place, and it’s a practical tool to illuminate information.

Agrega luz a tu aplicación para UWP:Add light to your UWP app:

imagen fpo

Mostrar resaltadoReveal highlight

La opción Mostrar resaltado usa luz para hacer que los elementos interactivos destaquen entre los otros. La luz ilumina los elementos con los que el usuario puede interactuar, de forma que se revelan los bordes ocultos.Reveal highlight uses light to make interactive elements stand out. Light illuminates the elements the user can interact with, revealing hidden borders. La opción Revelar está habilitada automáticamente en algunos controles, como las vistas de lista y de cuadrícula.Reveal is automatically enabled on some controls, such as list view and grid view. Para habilitarla en otros controles, aplica nuestros estilos predefinidos de Mostrar resaltado.You can enable it on other controls by applying our predefined Reveal highlight styles.

imagen fpo

Reveal focusReveal focus

La opción Revelar foco utiliza luz para destacar el elemento que actualmente tiene el foco de entrada.Reveal focus uses light to call attention to the element that currently has input focus.

Crear una sensación de profundidadCreate a sense of depth

Vivimos en un mundo tridimensional.We live in a three-dimensional world. Al incorporar intencionadamente profundidad a la interfaz de usuario, hemos transformado una interfaz plana y en 2D en algo más, algo que presenta de manera eficaz los conceptos y la información mediante la creación de una jerarquía visual.By purposefully incorporating depth into the UI, we transform a flat, 2-D interface into something more—something that efficiently presents information and concepts by creating a visual hierarchy. Reinventa cómo las cosas se relacionan entre sí, dentro de un entorno físico y por niveles.It reinvents how things relate to each other within a layered, physical environment

Agrega profundidad a tu aplicación para UWP:Add depth to your UWP app:

imagen fpo

ParallaxParallax

Parallax crea la ilusión de profundidad al hacer que los objetos en primer plano se muevan más rápidamente que los objetos en segundo plano.Parallax creates the illusion of depth by making items in the foreground appear to move more quickly than items in the background.

Incorporar movimientoIncorporate motion

Piensa en un diseño de movimiento similar al de una película.Think of motion design like a movie. Las transiciones sin interrupciones te ayudan a concentrarte en la historia y a darle vida a tus experiencias.Seamless transitions keep you focused on the story, and bring experiences to life. Podemos trasladar esas sensaciones a nuestros diseños, y llevar a los usuarios de una tarea a otra con una calidad cinematográfica.We can invite those feelings into our designs, leading people from one task to the next with cinematic ease.

Agrega movimiento a tu aplicación para UWP:Add motion to your UWP app:

GIF de continuidad

Animaciones conectadasConnected animations

Las animaciones conectadas ayudan al usuario a mantener el contexto creando una transición sin interrupciones entre escenas.Connected animations help the user maintain context by creating a seamless transition between scenes.

Crearla con el material adecuadoBuild it with the right material

Las cosas que nos rodean en el mundo real son sensoriales y estimulantes.The things that surround us in the real world are sensory and invigorating. Se doblan, se estiran, rebotan, se dispersan y se deslizan.They bend, stretch, bounce, shatter, and glide. Estas cualidades materiales se trasladan a entornos digitales, lo que hace que la gente quiera alcanzarlos y tocar nuestros diseños.Those material qualities translate to digital environments, making people want to reach out and touch our designs.

Agrega material a tu aplicación para UWP:Add material to your UWP app:

imagen fpo

AcrílicoAcrylic

Acrílico es un tipo de material translúcido que permite al usuario ver las capas de contenido, estableciendo una jerarquía de elementos de interfaz de usuario.Acrylic is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.

Kits de herramientas de diseño y ejemplos de códigoDesign toolkits and code samples

¿Quieres empezar a crear tus propias aplicaciones con Fluent Design?Want to get started creating your own apps with Fluent Design? Nuestros kits de herramientas para Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer y Sketch te ayudarán a empezar a crear tus diseños, y nuestros ejemplos te ayudarán a crear código con mayor rapidez.Our toolkits for Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer, and Sketch will help jumpstart your designs, and our samples will help get you coding faster.

imagen fpo

Página de kits de herramientas de diseño y ejemplosDesign toolkits and samples page

Echa un vistazo a nuestra página de kits de herramientas de diseño y ejemplos.Check out our Design toolkits and samples page