Patrones de navegación (aplicaciones de la Tienda Windows)

Applies to Windows only

Organiza el contenido de tu aplicación de la Tienda Windows para que los usuarios puedan navegar de manera fácil e intuitiva. Si usas los diseños de navegación correctos, podrás limitar los controles que aparecerán constantemente en la pantalla. Esto permite que los usuarios se concentren en el contenido actual.

La navegación en las aplicaciones de la Tienda Windows se basa en dos patrones: jerárquico y plano. Una aplicación puede usar cualquiera de los dos, o una combinación de ambos.

Patrón jerárquico

Este patrón hace que las aplicaciones de la Tienda Windows sean rápidas y fluidas. Es mejor para aplicaciones con grandes colecciones de contenido o muchas secciones de contenido diferentes que un usuario puede explorar. La mayoría de las aplicaciones de la Tienda Windows usan un sistema de navegación jerárquico.

Consulta esta funcionalidad con más detalle como parte de nuestra serie Características de la aplicación, de principio a fin:  Navegación jerárquica, de principio a fin (HTML y XAML)

Páginas de detalles, sección y concentrador en una aplicación de la Tienda Windows

Las páginas de concentrador son el punto de acceso del usuario a la aplicación. Aquí, el contenido se muestra en una vista panorámica horizontal enriquecida que ofrece a los usuarios una vista rápida de lo que es nuevo y está disponible.

El concentrador consta de distintas categorías de contenido, cada una de las cuales se asigna a las páginas de sección de la aplicación.

 

Las páginas de sección son el segundo nivel de una aplicación. El contenido se puede mostrar de la manera que mejor represente el escenario y el contenido que incluye la sección.

La página de sección consta de elementos individuales, cada uno de ellos con su propia página de detalles. Las páginas de sección también pueden aprovechar la agrupación y el diseño de estilo panorámico.

 

Las páginas de detalles son el tercer nivel de una aplicación. Aquí se muestran los detalles de los elementos individuales, cuyo formato puede variar enormemente según el tipo de contenido en particular.

La página de detalles consta de detalles de elemento o funcionalidades. Las páginas de detalles pueden contener mucha información o un solo objeto, como una imagen o un vídeo.

 

Patrón plano

Muchas aplicaciones de la Tienda Windows usan un patrón de navegación plano. Este patrón se usa en aplicaciones como juegos, exploradores o aplicaciones de creación de documentos, para que el usuario se desplace por las páginas, las pestañas o los modos que residen en el mismo nivel jerárquico. A diferencia del patrón jerárquico, no suele haber un botón Atrás permanente ni una pila de navegación, por lo que para moverse por las páginas se usan vínculos directos dentro del contenido, como en el primer ejemplo que mostramos aquí, o mediante la barra de navegación, como se muestra en el segundo ejemplo.

Consulta esta funcionalidad con más detalle como parte de nuestra serie Características de la aplicación, de principio a fin:  Navegación plana, de principio a fin (HTML y XAML)

ejemplos de navegación plana

 

Este patrón es mejor cuando el escenario clave implica cambiar rápidamente entre un pequeño número de páginas o pestañas, como por ejemplo, en aplicaciones de explorador web como Internet Explorer, libros electrónicos y juegos.

Navegación en lienzo

 

encabezado, botón Atrás, encabezados de sección e iconos como elementos de navegación

 

  1. Encabezado y botón Atrás

    El encabezado etiqueta la página actual y resulta útil para que el usuario sepa dónde se encuentra. El botón Atrás permite al usuario volver rápidamente a donde estaba.

  2. Etiquetas de sección o categoría

    Estas etiquetas mueven al usuario a distintas secciones o categorías de contenido.

  3. Otros destinos

    Puedes usar iconos, flechas, botones, resultados de búsqueda u otros destinos personalizados como elementos de navegación. En algunos juegos puedes encontrar ejemplos de elementos de navegación con formas interesantes.

 

Aplicación Bing Noticias que muestra el encabezado, la etiqueta de sección y vínculo a más información

 

La barra de la aplicación superior

Cambiando del borde superior o inferior de la pantalla, un usuario muestra las barras de la aplicación. La barra de la aplicación superior también se denomina barra de navegación. Puedes colocar elementos de navegación en la barra de la aplicación superior para que haya más área de pantalla disponible para que el contenido de tu aplicación destaque. Si lo prefieres, puedes colocar los elementos de navegación en los lienzos si los usuarios los necesitan con frecuencia cuando usan la aplicación, siempre y cuando tenerlos allí no afecte negativamente a la experiencia con la aplicación. Tú decides si los elementos de navegación se quedan en la barra superior o en el lienzo.

 

acceso a la barra de navegación

 

Por lo general, las etiquetas de sección o categoría se encuentran en la barra de navegación, como en Hulu Plus.

 

barra de navegación de la aplicación Hulu Plus

 

Muchas aplicaciones usan la barra de la aplicación superior para proporcionar métodos abreviados de teclado. Por ejemplo, en la aplicación ESPN, un usuario puede navegar a una página de transmisión de juegos haciendo clic en un marcador deportivo que se encuentra sobre las etiquetas de sección en la barra de la aplicación superior.

 

barra de navegación de la aplicación ESPN

 

La barra de la aplicación superior también puede ofrecer a los usuarios una vista previa del contenido en la página de destino. En el siguiente ejemplo de aplicación de compras, puedes previsualizar las imágenes del producto en la barra de la aplicación antes de entrar en la página de detalles del producto.

 

barra de navegación de la aplicación Vevo

 

Te alentamos a llevar tu diseño más allá mediante el uso de las barras de la aplicación de formas creativas. En Fresh Paint, la barra de la aplicación superior trasciende su función de navegación dedicada y se duplica como una caja de herramientas de pintura.

 

barra de navegación de Fresh Paint

 

Zoom semántico

El zoom semántico permite examinar una vista y moverse por ella de manera rápida y fluida, sobre todo si la vista es una larga lista panorámica.

 

Aplicación de ejemplo en vista acercada y en vista alejada

 

Por ejemplo, en Great British Chefs, la página de concentrador tiene una sección de destacados, seguida de cinco secciones panorámicas horizontales visualmente enriquecidas. La aplicación usa el zoom semántico para que sea más fácil saltar a cada una de las cinco secciones.

 

Zoom semántico en Great British Chefs

Para obtener más información, consulta Directrices sobre zoom semántico.

Temas relacionados

Para diseñadores
Diseños de comandos
Diseño
Botón Atrás
Directrices para controles de navegación centralizada en aplicaciones de la Tienda Windows
Directrices para controles de navegación centralizada en aplicaciones de la Tienda de Windows Phone
Directrices para barras de la aplicación
Hacer que la barra de la aplicación sea accesible
Para desarrolladores (HTML)
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
Muestra del control de concentrador HTML
Muestra del control AppBar HTML
Muestra de control NavBar HTML
Muestra de navegación e historial de navegación
Tu primera aplicación: Parte 3: Navegación y objetos de PageControl
Agregar barras de la aplicación
Agregar barras de navegación
Ir de una página a otra (HTML)
Para desarrolladores (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Muestra del control de concentrador XAML
Muestra de control AppBar XAML
Muestra de navegación XAML
Tu primera aplicación: Parte 3: Navegación, diseño y vistas
Tu primera aplicación: Agregar navegación y vistas a una aplicación de la Tienda Windows con C++ (tutorial 3 de 4)
Agregar barras de la aplicación (XAML)
Ir de una página a otra (XAML)
Para desarrolladores (aplicaciones de Windows en tiempo de ejecución con DirectX con C++)
Creación de una barra de la aplicación o Configuración

 

 

Mostrar:
© 2014 Microsoft