Diseño de páginaPage layout

En las aplicaciones de Windows, cada página normalmente tiene elementos de navegación, comandos y contenido.In Windows apps, each Page generally has navigation, command, and content elements.

La aplicación puede tener varias páginas: cuando un usuario inicia una aplicación de Windows, el código de la aplicación crea un marco para colocarlo dentro de la ventana de la aplicación.Your app can have multiple pages: when a user launches a Windows app, the application code creates a Frame to place inside of the application's Window. A continuación, el marco puede navegar entre las instancias de la página de la aplicación.The Frame can then navigate between the application's Page instances.

La mayoría de las páginas siguen una estructura de diseño común. En este artículo veremos los elementos de la interfaz de usuario que necesitarás y dónde deben colocarse en una página.Most pages follow a common layout structure, and this article covers which UI elements you'll need, and where they should go on a page.

Estructura de la página

El diseño de la aplicación comienza con el modelo de navegación que elijas, que define el modo en que los usuarios navegarán entre las páginas de la aplicación.Your app layout begins with the navigation model you choose, which defines how your users navigate between pages in your app. En este artículo, trataremos dos patrones de navegación comunes: navegación izquierda y navegación superior.For this article, we'll discuss two common navigation patterns: left nav and top nav. Para obtener instrucciones sobre cómo elegir otras opciones de navegación, consulta Conceptos básicos del diseño de navegación para las aplicaciones de Windows.For guidance on choosing other navigation options, see Navigation design basics for Windows apps.

Patrones de navegación superior e izquierdo

Navegación izquierdaLeft nav

La navegación izquierda, o el patrón panel de navegación, normalmente se reserva para la navegación de nivel de aplicación y existe en el nivel superior de la aplicación, lo que significa que siempre debe estar visible y disponible.Left nav, or the nav pane pattern, is generally reserved for app-level navigation and exists at the highest level within the app, meaning that it should always be visible and available. Se recomienda la navegación izquierda cuando hay más de cinco elementos de navegación o más de cinco páginas en la aplicación.We recommend left nav when there are more than five navigational items, or more than five pages in your app. Normalmente, el patrón del panel de navegación contiene los elementos siguientes:The nav pane pattern typically contains:

  • Elementos de navegaciónNavigation items
  • Punto de entrada a la configuración de la aplicaciónEntry point into app settings
  • Punto de entrada a la configuración de la cuentaEntry point into account settings

El control NavigationView implementa el patrón de navegación izquierdo para UWP.The NavigationView control implements the left nav pattern for UWP.

Cuando se selecciona un elemento de navegación, el marco debe desplazarse a la página del elemento seleccionado.When a navigation item is selected, the Frame should navigate to the selected item's Page.

Panel de navegación expandido

El botón de menú permite a los usuarios expandir y contraer el panel de navegación.The menu button allows users to expand and collapse the nav pane. Cuando el tamaño de la pantalla es superior a 640 px, al hacer clic en el botón de menú, se contrae el panel de navegación en una barra.When the screen size is larger than 640 px, clicking the menu button collapses the nav pane into a bar.

Panel de navegación compacto

Cuando el tamaño de la pantalla es inferior a 640 px, el panel de navegación está totalmente contraído.When the screen size is smaller than 640 px, the nav pane is fully collapsed.

Panel de navegación minimizado

Navegación superiorTop nav

La navegación superior también puede actuar como navegación de nivel superior.Top nav can also act as top-level navigation. Mientras que la navegación izquierda es contraíble, la navegación superior siempre está visible.While left nav is collapsible, top nav is always visible. El control NavigationView implementa los patrones de navegación superior y de pestañas para UWP.The NavigationView control implements the top navigation and tabs pattern for UWP.

Navegación superior

Barra de comandosCommand bar

También puedes proporcionar a los usuarios acceso fácil a las tareas más comunes de tu aplicación.Next, you might want to provide users with easy access to your app's most common tasks. Una barra de comandos puede proporcionar acceso a los comandos del nivel de la aplicación o la página, y se puede usar con cualquier patrón de navegación.A command bar can provide access to app-level or page-level commands, and it can be used with any navigation pattern.

Colocación de la barra de comandos en la parte superiorcommand bar placement at top

La barra de comandos se puede colocar en la parte superior o inferior de la página, lo que sea más adecuado para la aplicación.The command bar can be placed at the top or bottom of the page, whichever is best for your app.

Colocación de la barra de comandos en la parte inferior

ContenidoContent

Por último, el contenido varía mucho de una aplicación a otra, por lo que puede presentar contenido de muchas maneras diferentes.Finally, content varies widely from app to app, so you can present content in many different ways. Aquí se describen algunos patrones de página comunes que puedes usar en la aplicación.Here, we describe some common page patterns that you might want to use in your app. Muchas aplicaciones usan algunos o todos estos patrones de página comunes para mostrar diferentes tipos de contenido.Many apps use some, or all, of these common page patterns to display different types of content. De igual modo, no dudes en mezclar y combinar estos patrones para optimizar la aplicación.Likewise, feel free to mix and match these patterns to optimize for your app.

Página de aterrizajeLanding

página de aterrizaje

Las páginas de aterrizaje, también conocida como pantallas prominentes, suele aparecer en el nivel superior de la experiencia de una aplicación.Landing pages, also known as hero screens, often appear at the top level of an app experience. El gran área de superficie actúa como una fase para que las aplicaciones resalten el contenido que los usuarios puedan querer explorar y consumir.The large surface area serves as a stage for apps to highlight content that users may want to browse and consume.

ColeccionesCollections

galería

Las colecciones permiten a los usuarios examinar grupos de contenido o datos.Collections allow users to browse groups of content or data. La vista de cuadrícula es una buena opción para las fotos o el contenido centrado en multimedia, y la vista de lista es una buena opción para el contenido con mucho texto o datos.Grid view is a good option for photos or media-centric content, and list view is a good option for text-heavy content or data.

Maestro y detallesMaster/detail

Maestro/detalles

El modelo maestro y detalles consta de una vista de lista (maestra) y una vista de contenido (detalles).The master/details model consists of a list view (master) and a content view (detail). Ambos paneles son fijos y tienen un desplazamiento vertical.Both panes are fixed and have vertical scrolling. Cuando se selecciona un elemento en la vista de lista, la vista de contenido se actualiza en consecuencia.When an item in the list view is selected, the content view is correspondingly updated.

FormulariosForms

formulario

Un formulario es un grupo de controles que recopila y envía datos de los usuarios.A form is a group of controls that collect and submit data from users. La mayoría, si no todas las aplicaciones, usan algún tipo de formulario para las páginas de configuración, iniciar sesión en portales, los centros de comentarios, la creación de cuentas u otros fines.Most, if not all apps, use a form of some sort for settings pages, log in portals, feedback hubs, account creation, or other purposes.

Aplicaciones de ejemploSample apps

Para ver cómo se pueden implementar estos patrones, consulta nuestras aplicaciones de Windows de ejemplo:To see how these patterns can be implemented, check out our Windows sample apps: