Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Encabezado básico de navegación
Si piensa en una aplicación como una colección de páginas, la navegación describe el acto de mover entre páginas y dentro de una página. Es el punto de partida de la experiencia del usuario y es cómo los usuarios encuentran el contenido y las características que les interesan. Es muy importante, pero puede ser difícil de lograr.
Tiene una gran cantidad de opciones para realizar la navegación. Podrías:
ejemplo de navegación 1 Requerir que los usuarios pasen por una serie de páginas en orden.
ejemplo de navegación 2 Proporcione un menú que permita a los usuarios saltar directamente a cualquier página.
ejemplo de navegación 3 Coloque todo en una sola página y proporcione mecanismos de filtrado para ver el contenido.
Aunque no hay ningún diseño de navegación único que funcione para cada aplicación, hay principios y directrices que le ayudarán a decidir el diseño adecuado para la aplicación.
Principios de buena navegación
Comencemos con los principios básicos del buen diseño de navegación:
- Coherencia: Cumpla las expectativas del usuario.
- Simplicidad: No hagas más de lo que necesitas.
- Claridad: Proporcione rutas de acceso y opciones claras.
Coherencia
La navegación debe ser coherente con las expectativas del usuario. El uso de controles estándar con los que los usuarios están familiarizados y siguiendo las convenciones estándar para iconos, ubicación y estilo harán que la navegación sea predecible e intuitiva para los usuarios.
imagen de componentes de página
Los usuarios esperan encontrar determinados elementos de la interfaz de usuario en ubicaciones estándar.
Simplicidad
Menos elementos de navegación simplifican la toma de decisiones para los usuarios. Proporcionar fácil acceso a destinos importantes y ocultar elementos menos importantes ayudará a los usuarios a obtener dónde quieren, más rápido.
Primera captura de pantalla de una barra verde que tiene una marca de verificación verde y la palabra Do en ella.
Vista de navegación buena
Presentar elementos de navegación en un menú de navegación conocido.
no pongas como ejemplo
navview malo
No sobresuma a los usuarios con muchas opciones de navegación.
Claridad
Las rutas de acceso claras permiten la navegación lógica para los usuarios. Hacer que las opciones de navegación sean obvias y aclarando las relaciones entre páginas deben impedir que los usuarios se pierdan.
Captura de pantalla de un simulacro de una aplicación que muestra rutas de acceso claras para la navegación de un usuario.
Los destinos se etiquetan claramente para que los usuarios sepan dónde están.
Recomendaciones generales
Ahora, tomemos nuestros principios de diseño, coherencia, simplicidad y claridad, y utilícelos para obtener algunas recomendaciones generales.
- Piense en los usuarios. Realice un seguimiento de las rutas típicas que pueden llevar a través de la aplicación y, para cada página, piense en por qué el usuario está allí y dónde puede querer ir.
- Evite jerarquías de navegación profunda. Si va más allá de dos niveles de navegación, proporcione una barra de ruta de navegación que muestre al usuario dónde se encuentran y les permita volver a salir rápidamente. De lo contrario, corre el riesgo de que el usuario se quede en una jerarquía profunda de la que tendrán dificultades para salir.
- Evite el "pogo-sticking". El pogo-sticking ocurre cuando hay contenido relacionado, pero navegar hasta él requiere que el usuario suba un nivel y luego baje nuevamente.
Usa la estructura correcta
Ahora que está familiarizado con los principios generales de navegación, ¿cómo debe estructurar la aplicación? Hay dos estructuras generales: planas y jerárquicas.
Páginas organizadas en una estructura plana
Plano/lateral
En una estructura plana/lateral, las páginas existen en paralelo. Puede ir de una página a otra en cualquier orden.
Se recomienda usar una estructura plana cuando:
- Las páginas se pueden ver en cualquier orden.
- Las páginas son claramente distintas entre sí y no tienen una relación primaria o secundaria obvia.
- Hay menos de 8 páginas en el grupo.
(Cuando hay más páginas, puede ser difícil que los usuarios comprendan cómo las páginas son únicas o comprender su ubicación actual dentro del grupo. Si no cree que sea un problema para la aplicación, continúe y haga que las páginas sean del mismo nivel. De lo contrario, considere la posibilidad de usar una estructura jerárquica para dividir las páginas en dos o más grupos más pequeños).
Páginas organizadas en una jerarquía
Jerárquico
En una estructura jerárquica, las páginas se organizan en una estructura similar a un árbol. Cada página secundaria tiene una página principal, pero una página principal puede tener una o varias páginas secundarias. Para llegar a una subpágina, se viaja a través de la página principal.
Las estructuras jerárquicas son adecuadas para organizar contenido complejo que abarca una gran cantidad de páginas. El inconveniente es una sobrecarga de navegación: cuanto más profunda sea la estructura, más clics son necesarios para ir de una página a otra.
Se recomienda una estructura jerárquica cuando:
- Las páginas deben recorrerse en un orden específico.
- Hay una relación clara de padre-hijo entre las páginas.
- Hay más de 7 páginas en el grupo.
una aplicación con una estructura híbrida
Combinación de estructuras
No tiene que elegir una estructura ni la otra; muchas aplicaciones bien diseñadas usan ambas. Una aplicación puede usar estructuras planas para páginas de nivel superior que se pueden ver en cualquier orden y estructuras jerárquicas para las páginas que tienen relaciones más complejas.
Si la estructura de navegación tiene varios niveles, se recomienda que los elementos de navegación punto a punto solo se vinculen a los elementos del mismo nivel dentro de su subárbol actual. Considere la ilustración adyacente, que muestra una estructura de navegación que tiene dos niveles:
- En el nivel 1, el elemento de navegación punto a punto debe proporcionar acceso a las páginas A, B y C.
- En el nivel 2, los elementos de navegación punto a punto de las páginas A2 solo deben vincularse a las otras páginas A2. No deben vincularse a las páginas de nivel 2 del subárbol C.
Usar los controles adecuados
Una vez que haya decidido en una estructura de página, debe decidir cómo navegan los usuarios a través de esas páginas. XAML proporciona una variedad de controles de navegación para ayudar a garantizar una experiencia de navegación coherente y confiable en la aplicación.
Imagen de marco
Frame
Con pocas excepciones, cualquier aplicación que tenga varias páginas usa un marco. Normalmente, una aplicación tiene una página principal que contiene el marco y un elemento de navegación principal, como un control de vista de navegación. Cuando el usuario selecciona una página, el marco se carga y lo muestra.
pestañas e imagen dinámica
Navegación superior
Muestra una lista horizontal de vínculos a páginas en el mismo nivel. El control NavigationView implementa el patrón de navegación superior.
Use la navegación superior cuando:
- Desea mostrar todas las opciones de navegación en la pantalla.
- Deseas más espacio para el contenido de la aplicación.
- Los iconos no pueden describir claramente las categorías de navegación.
pestañas e imagen dinámica
Pestañas
Muestra un conjunto horizontal de pestañas y su contenido respectivo. El control TabView es útil para mostrar varias páginas (o documentos) al tiempo que proporciona al usuario la capacidad de reorganizar, abrir o cerrar pestañas.
Use pestañas cuando:
- Quiere que los usuarios puedan abrir, cerrar o reorganizar pestañas dinámicamente.
- Espera que haya un gran número de pestañas abiertas a la vez.
- Espera que los usuarios puedan mover fácilmente pestañas entre ventanas de la aplicación que usan pestañas, similares a los exploradores web, como Microsoft Edge.
pestañas e imagen dinámica
Ruta de navegación
Muestra una lista horizontal de vínculos a páginas en cada uno de los niveles superiores. El control BreadcrumbBar implementa el patrón de navegación de migas de pan.
Use una ruta de navegación cuando:
- Quiere mostrar la ruta de acceso a la ubicación actual.
- Tiene muchos niveles de navegación
- Espera que los usuarios puedan volver a cualquier nivel anterior.
imagen de navview
Navegación izquierda
Muestra una lista vertical de vínculos a páginas de nivel superior. Úsala en estos casos:
- Las páginas existen en el nivel superior.
- Hay muchos elementos de navegación (más de 5)
- No espera que los usuarios cambien entre páginas con frecuencia.
Imagen de los detalles de la lista
Lista y detalles
Muestra una lista de elementos. Al seleccionar un elemento se muestra su página correspondiente en la sección de detalles. Úsala en estos casos:
- Espera que los usuarios cambien entre elementos secundarios con frecuencia.
- Quiere permitir que el usuario realice operaciones de alto nivel, como eliminar o ordenar, en elementos individuales o grupos de elementos, y también desea permitir que el usuario vea o actualice los detalles de cada elemento.
La lista y los detalles son adecuados para las bandejas de entrada de correo electrónico, las listas de contactos y la entrada de datos.
Imagen de hipervínculos y botones
Hipervínculos
Los elementos de navegación incrustados pueden aparecer en el contenido de una página. A diferencia de otros elementos de navegación, que deben ser coherentes entre las páginas, los elementos de navegación incrustados en contenido son únicos de la página a la página.
Directrices para el comportamiento personalizado de navegación hacia atrás
Si decide proporcionar su propia navegación de pila trasera, la experiencia debe ser coherente con otras aplicaciones. Se recomienda seguir los siguientes patrones para las acciones de navegación:
| Acción de navegación | ¿Agregar al historial de navegación? |
|---|---|
| Página por página, diferentes grupos de pares | Sí
En esta ilustración, el usuario navega desde el nivel 1 de la aplicación hasta el nivel 2, cruzando grupos del mismo nivel, por lo que la navegación se agrega al historial de navegación. Diagrama de navegación entre grupos del mismo nivel en el que se muestra el usuario que navega del grupo uno al grupo dos y el de vuelta al grupo uno. En la siguiente ilustración, el usuario navega entre dos grupos del mismo nivel en el mismo nivel, cruzando de nuevo grupos del mismo nivel, por lo que la navegación se agrega al historial de navegación. Diagrama de navegación entre grupos del mismo nivel en el que se muestra el usuario que navega del grupo uno al grupo dos y, después, al grupo tres y al grupo dos. |
| Página a página, mismo grupo del mismo nivel, sin elemento de navegación en pantalla
El usuario navega de una página a otra con el mismo grupo de iguales. No hay ningún elemento de navegación en pantalla (como NavigationView) que proporcione navegación directa a ambas páginas. |
Sí
En la ilustración siguiente, el usuario navega entre dos páginas del mismo grupo de pares, y esta navegación debería añadirse al historial de navegación. Navegación dentro de un grupo del mismo nivel |
| Página a página, mismo grupo de iguales, con un elemento de navegación en pantalla
El usuario navega de una página a otra en el mismo grupo de pares. Ambas páginas se muestran en el mismo elemento de navegación, como NavigationView. |
Depende
Sí, se añade al historial de navegación, con dos excepciones notables. Si esperas que los usuarios de la aplicación cambien entre las páginas del grupo del mismo nivel con frecuencia, o si quieres conservar la jerarquía de navegación, no agregues al historial de navegación. En este caso, cuando el usuario presiona atrás, vuelva a la última página antes de que el usuario navegue al grupo del mismo nivel actual. Navegación entre grupos del mismo nivel cuando hay un elemento de navegación presente |
| Mostrar una interfaz de usuario transitoria
La aplicación muestra una ventana emergente o secundaria, como un cuadro de diálogo, una pantalla de presentación o un teclado en pantalla, o la aplicación entra en un modo especial, como el modo de selección múltiple. |
No
Cuando el usuario presiona el botón Atrás, descarte la interfaz de usuario transitoria (oculte el teclado en pantalla, cancele el cuadro de diálogo, etc.) y vuelva a la página que generó la interfaz de usuario transitoria. Mostrar una interfaz de usuario transitoria |
| Enumerar elementos
La aplicación muestra el contenido de un elemento en pantalla, como los detalles del elemento seleccionado en la lista o la lista de detalles. |
No
La enumeración de elementos es similar a navegar dentro de un grupo del mismo nivel. Cuando el usuario presiona el botón de retroceso, navegue a la página que está antes de la actual, que contiene la enumeración de elementos. Enumeración de elementos |
Siguiente: Agregar código de navegación a la aplicación
En el siguiente artículo, Implementar navegación básica, se muestra el código necesario para usar un control para habilitar la navegación básica entre dos páginas de la aplicación.
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
