Directrices para controles de navegación centralizada en aplicaciones de la Tienda de Windows Phone

Artículo
04/07/2015

Partes del control de navegación centralizada (encabezado de navegación centralizada, encabezado de sección de navegación centralizada, etc.)

Descripción

El control de navegación centralizada (en el teléfono, y cuya finalidad es usarse solo en vertical) muestra una serie de secciones en las que se puede presionar para moverlas de un lado a otro. Es un contenedor a pantalla completa y un modelo de navegación de una aplicación.

Las experiencias de navegación centralizada (anteriormente denominada panorámica) forman parte de la apariencia original de Windows Phone. Al contrario que una aplicación diseñada para encajar dentro de los límites de la pantalla del teléfono, una aplicación de navegación centralizada ofrece una manera única de ver los controles, los datos y los servicios, a través de un lienzo virtual panorámico que se extiende en el plano horizontal más allá de los confines de la pantalla. En Windows Phone, estas vistas inherentemente dinámicas usan contenido y animaciones superpuestas de tal modo que las capas se mueven con fluidez a distintas velocidades, de forma similar a los efectos de paralaje.

Las secciones de una aplicación de navegación centralizada sirven como punto de partida para experiencias más enriquecidas. Tu objetivo debería ser ofrecer a los usuarios una presentación de contenido visualmente enriquecida.

Ejemplos

Aplicación de Windows Phone: un control de navegación centralizada

La interfaz de usuario consta de capas que se mueven de forma independiente: un color o imagen de fondo, un encabezado de navegación centralizada, encabezados de sección de navegación centralizada y secciones de navegación centralizada.

Si se define una imagen de fondo, esta será la capa situada más al fondo y tiene como fin dar a la navegación centralizada ese aspecto enriquecido de revista. La imagen de fondo que, por lo general, es una imagen sin bordes, es posiblemente la parte más visual de la aplicación.

El encabezado de navegación centralizada identifica la aplicación y debería estar a la vista independientemente de cómo acceda el usuario a la aplicación.

Las secciones de navegación centralizada son los componentes de la aplicación de navegación centralizada que contienen otros controles y contenido. Las secciones de navegación centralizada se mueven a la misma velocidad que el movimiento panorámico táctil o el toque rápido. El encabezado de sección de navegación centralizada es opcional para cualquier sección de navegación centralizada determinada.

Las miniaturas pueden ser un elemento importante que vinculen a contenido o elementos multimedia de otras páginas.

Control de navegación centralizada con miniaturas

Guía de uso

En función de los requisitos de la aplicación, puedes añadir varias secciones de navegación centralizada al control de navegación centralizada, donde cada una de ellas ofrecerá un propósito funcional diferente. Por ejemplo, una sección puede contener una serie de vínculos y controles, mientras que otra sección es un repositorio de imágenes en miniatura. Un usuario puede desplazarse hacia detrás y hacia delante por estas secciones usando la compatibilidad con gestos integrada en el control de navegación centralizada.

Directrices de diseño

El comportamiento y representación del control de navegación centralizada solo son posibles en sentido vertical.
Un control de navegación centralizada puede tener temas y puedes invalidar los colores predeterminados, etc.
Usa el efecto de encapsulado del control de navegación centralizada para Windows Phone con el fin de encapsular desde la última sección hasta la primera y viceversa. Un control de navegación con una o dos secciones no se encapsulará. Un control de navegación con tres secciones sí se encapsulará.
En Windows Phone, si usas una barra de la aplicación, define el modo de la barra de la aplicación a minimizado. Este modo está diseñado específicamente para maximizar el espacio de la pantalla en una página de navegación centralizada. Para obtener más información, consulta Barra de la aplicación para Windows Phone.
Muestra una barra de progreso en la Bandeja del sistema o un indicador de "carga" de pantalla completa mientras tu control de navegación centralizada se inicia.
Muestra una barra de progreso en la Bandeja del sistema cuando una sección de un control de navegación centralizada se está actualizando pero no está bloqueando la interacción del usuario.
Primera visita: la primera sección mostrada debería tener el encabezado de navegación centralizada correctamente alineado a la izquierda. No hay ninguna directriz estándar sobre qué sección es la predeterminada; eso depende del contenido presentado.
Para las visitas posteriores al mismo control de navegación centralizada, lleva al usuario de vuelta a la sección de donde salió.
No crees más de cinco secciones en un control de navegación centralizada. Esta indicación se proporciona por motivos de rendimiento y con el fin de limitar el número de áreas por las que el usuario tiene que navegar. Usa menos secciones cuando los contenidos sean complejos. No abrumes al usuario con demasiadas secciones. Con solo cuatro o cinco secciones, los usuarios pueden hacerse una idea de dónde están y qué hay a la izquierda y a la derecha.
No uses un control Pivot dentro de un control de navegación centralizada ni viceversa. No obstante, puedes vincular un elemento de una sección de navegación centralizada a una página diferente que contenga un control Pivot.
No uses controles que puedan realizar movimientos panorámicos o de desplazamiento dentro de un control de navegación centralizada. Por ejemplo, colocar un control de mapa dentro de una sección de navegación centralizada puede dificultar el uso del control de navegación centralizada. La entrada del gesto se confunde. Por ejemplo, si tienes un control deslizante e intentas deslizarlo hacia la izquierda y estás en una sección del control de navegación centralizada, no queda claro si quieres desplazar la sección o mover el control deslizante. La solución para un control que necesita la entrada del gesto es colocarlo en su propia página e ir hasta ella. Puedes colocar un control que tenga deshabilitados los gestos en una sección de navegación centralizada, como por ejemplo, un mapa. Puedes superponer un botón que active el mapa. Al pulsar el botón, se va a una página diferente que solo contiene el mapa. En dicha página, el usuario podría presionar el botón Atrás para volver a la sección de navegación centralizada.
Si necesitas más información sobre cuándo usar un control de navegación centralizada en lugar de un control dinámico, echa un vistazo a estos temas:

Encabezados de navegación centralizada:

Usa texto sin formato o imágenes, como por ejemplo, un logotipo. También puedes usar varios elementos, como un logotipo y texto (u otros elementos de la interfaz de usuario).
Asegúrate de que el color de la imagen o la fuente del encabezado permiten que se vea claramente en toda la imagen de fondo (ya que los dos se mueven de forma independiente). Usa estilos y fuentes del sistema salvo que sea necesario proporcionar una experiencia de marca específica que use otra fuente, tamaño o color.
Evita usar animaciones en el encabezado o cambiar su tamaño de forma dinámica.
Para lograr coherencia, haz que el encabezado de navegación centralizada coincida con el icono de inicio mostrado en Inicio.
Al desarrollar tu control de navegación centralizada y diseñar los encabezados, evita los problemas de oclusión con la Bandeja del sistema u otros elementos.

Encabezados de sección de navegación centralizada:

Usa texto sin formato o imágenes, como por ejemplo, un logotipo. También puedes usar varios elementos, como un logotipo y texto (u otros elementos de la interfaz de usuario).
Asegúrate de que el color de la imagen o la fuente del encabezado permiten que se vea claramente en toda la imagen de fondo (ya que los dos se mueven de forma independiente). Usa estilos y fuentes del sistema salvo que sea necesario proporcionar una experiencia de marca específica que use otra fuente, tamaño o color.
Evita usar animaciones en el encabezado o cambiar su tamaño de forma dinámica.

Secciones de navegación centralizada:

Mantén intacta la belleza de la experiencia del control de navegación centralizada. Para ello, intenta elegir bien el texto y las imágenes que incluyes en el contenido de la sección, para que no quede sobrecargado y resulte pesado para el usuario.
Si usas el desplazamiento vertical, ten en cuenta la orientación. El desplazamiento vertical en una sección de navegación centralizada es aceptable siempre que el ancho de la sección sea superior al ancho de la pantalla.
Considera la posibilidad de ocultar secciones de navegación centralizada hasta que tengan contenido que mostrar.

Gráficos de fondo

Un fondo oscuro, suave y de bajo contraste es lo más recomendable. De un solo color o con un degradado.
Una foto sutil y discreta en el fondo puede hacer que un control de navegación centralizada resulte atractivo a la vista. No obstante, se deben evitar las fotos con colores vivos, porque pueden dificultar la lectura de las secciones. Una técnica práctica consiste en usar un filtro blanco o negro semitransparente (un rectángulo) sobre la foto. Puedes hacerlo en una herramienta de edición de mapas de bits y a continuación aplanar la imagen.
Una imagen de fondo debería abarcar todo el control de navegación centralizada. Eso significa que su relación de aspecto debería coincidir con la del control de navegación centralizada y su tamaño debería tener en cuenta el rendimiento, la resolución típica de los dispositivos y la resolución más grande de los dispositivos. Te recomendamos usar el formato JPEG para mantener un tamaño reducido de los archivos.
Puedes cambiar de una imagen de fondo a otra incluso cuando la aplicación está ejecutándose. Sin embargo, solo se puede mostrar una imagen a la vez.

Miniaturas

Usa imágenes recortadas que destaquen un sujeto identificable en lugar de reducir el tamaño de toda una imagen. Si la imagen no es identificable sin texto, se pueden usar hasta dos líneas de texto para identificar el contenido.