Conceptos básicos de diseño de las aplicaciones para UWPDesign basics for UWP apps

Icono de conceptos básicos de diseño

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 nuestra aplicación Fluent Design System, 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.

IntroducciónOverview

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

Introducción a las características de UWP combinada con procedimientos recomendados para crear aplicaciones que se escalan a la perfección en todo tipo de dispositivos diseñados para Windows.An introduction to UWP features combined with best practices for creating apps that scale beautifully on all types of Windows-powered devices.

Fluent Design SystemFluent Design System

Fluent Design System presenta nuestros objetivos y principios para la creación de interfaces de usuario adaptables, comprensivas y atractivas.The Fluent Design System presents our goals and principles for creating adaptive, empathetic, and beautiful user interfaces.

Conceptos básicosBasics

Conceptos básicos de navegaciónNavigation basics

La navegación en las aplicaciones para UWP se basa en un modelo flexible de estructuras de navegación, elementos de navegación y características de nivel del sistema.Navigation in UWP apps is based on a flexible model of navigation structures, navigation elements, and system-level features. Este artículo es una introducción a estos componentes y te muestra cómo usarlos juntos para crear una buena experiencia de navegación.This article introduces you to these components and shows you how to use them together to create a good navigation experience.

Conceptos básicos de comandosCommand basics

Los elementos de comandos son los elementos interactivos de la interfaz de usuario que permiten al usuario realizar acciones como enviar un correo electrónico, eliminar un elemento o enviar un formulario.Command elements are the interactive UI elements that enable the user to perform actions, such as sending an email, deleting an item, or submitting a form. En este artículo se describen los elementos de comandos (como los botones y las casillas), las interacciones que admiten y las superficies de comandos (como las barras de comandos y los menús contextuales) para hospedarlos.This article describes the command elements, such as buttons and check boxes, the interactions they support, and the command surfaces (such as command bars and context menus) for hosting them.

Conceptos básicos de contenidoContent basics

El propósito principal de cualquier aplicación es proporcionar acceso a contenido: en una aplicación de edición de fotos, la fotografía es el contenido; en una aplicación de viajes, los mapas y la información acerca de los destinos de viaje son el contenido; y así sucesivamente.The main purpose of any app is to provide access to content: in a photo-editing app, the photo is the content; in a travel app, maps and info about travel destinations is the content; and so on. Este artículo proporciona recomendaciones de diseño de contenido para los tres escenarios de contenido: consumo, creación e interacción.This article provides content design recommendations for the three content scenarios: consumption, creation, and interaction.

TutorialesTutorials

Aprende a crear una aplicación básica de edición de fotos en XAML y C#.Learn how to create a basic photo-editing application in XAML and C#.

1. Crear una interfaz de usuario básica1. Create a basic UI

Usa XAML para crear una interfaz de usuario básica.Use XAML to create a basic user interface.

2. Crear un diseño adaptativo2. Create an adaptive layout

Proporciona a la aplicación de edición de fotos un diseño adaptativo.Give the photo-editing application an adaptive layout.

3. Crear estilos personalizados3. Create custom styles

Proporciona un aspecto propio a nuestros controles para UWP mediante la creación de estilos personalizados.Give our UWP controls your own look and feel by creating custom styles.