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

Artículo
04/07/2015

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

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.
Etiquetas de sección o categoría

Estas etiquetas mueven al usuario a distintas secciones o categorías de contenido.
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