Navigation Drawer (Cajón de Navegación) Android
El cajón es un panel de navegación que las transiciones desde el borde izquierdo de la pantalla y muestra las principales opciones de navegación de la aplicación.
Viendo el cajón de navegación
El usuario puede llevar el cajón de navegación en la pantalla deslizando desde el borde izquierdo de la pantalla o tocando el icono de la aplicación en la barra de acción.
Como el cajón de navegación expande, se recubre el contenido, pero no la barra de acción. Cuando el cajón está completamente extendida, la barra de acción se ajusta a su contenido mediante la sustitución del título de la barra de acción actual con el nombre de la aplicación y la eliminación de todas las acciones que sean contextualmente a la vista debajo del cajón de la navegación. El menú de desbordamiento con los elementos de acción estándar para ajustes y la ayuda sigue siendo visible.
El usuario puede abrir el panel del cajón al tocar el indicador de cajón de navegación.
Debido a que son transitorios, cajones de navegación hacen visitas más despejado. También se puede utilizar en niveles más profundos en la jerarquía de navegación, lo que permite a los usuarios cambiar a las pantallas más importantes de su aplicación desde cualquier parte de la aplicación.
Abra el cajón desde cualquier lugar de su aplicación al golpear desde el borde izquierdo de la pantalla.
Descartando el cajón de navegación
Cuando se expande el cajón de navegación, el usuario puede descartarlo en una de cuatro maneras:
- Tocar el contenido fuera del cajón de navegación
- Al deslizar hacia la izquierda en cualquier parte de la pantalla (incluyendo deslizar el borde de la derecha)
- Al tocar el icono de la aplicación / título en la barra de acción
- Al pulsar Back
Cuándo utilizar el cajón de navegación
El cajón de navegación no es un reemplazo general de exploración de nivel superior a través de los hilanderos o tabulaciones. La estructura de su aplicación debe guiar su elección de qué patrón utilizar para la conmutación de nivel superior. Para obtener más información sobre los mecanismos de conmutación de nivel superior, consulte la Estructura de la aplicación patrón de diseño.
Estos son algunos ejemplos en los que los cajones de navegación funcionan mejor:
Más de 3 visitas de alto nivel
Cajones de navegación son grandes para mostrar un gran número de objetivos de navegación al mismo tiempo. Utilice el cajón de navegación si usted tiene más de 3 únicos puntos de vista de nivel superior. Si no es así, utilice las lengüetas fijas para la organización de nivel superior para facilitar el descubrimiento y la interacción.
Cruz-navegación desde los niveles inferiores
Si su aplicación requiere cruzada de navegación entre las pantallas de nivel inferior, considere el uso del cajón de navegación. Debido a que es accesible desde cualquier punto de la aplicación, el cajón permite una navegación eficiente de las pantallas de nivel inferior a otros lugares importantes en su aplicación.
El cajón de navegación hace cruzada de navegación en los niveles más bajos posibles.
Ramas de navegación profundas
Si usted tiene ramas particularmente profundas, vaya hasta el nivel superior de la aplicación puede llegar a ser repetitivo y pesado con Up y sola Back. Desde cajones de navegación son accesibles desde cualquier lugar de la aplicación, la navegación hasta el nivel superior es más rápido y más eficiente.
El cajón de navegación permite ir rápidamente a la de nivel superior de la aplicación, eliminando la necesidad de atrás o arriba secuencias repetitivas.
Hubs de Navegación
El cajón de navegación es un reflejo de la estructura de su aplicación y se muestran sus principales centros de navegación. Piense en los centros de navegación como los lugares en su aplicación que el usuario tendrá que visitar con frecuencia o utilizar como punto de partida para otras partes de la aplicación. Como mínimo, los centros de navegación son los puntos de vista de nivel superior, ya que corresponden a las principales áreas funcionales de su aplicación.
Si la estructura de su aplicación es profunda, puede agregar las pantallas de los niveles más bajos que sus usuarios probablemente visitar a menudo y hacer que esos centros de navegación también.
El cajón de navegación contiene todos los centros de navegación de su aplicación. Incluya sus mejores pantallas de nivel, así como importantes las pantallas de nivel inferior.
Para facilitar el acceso al cajón de la navegación en los centros de navegación, todas las pantallas que corresponden a una entrada en tu cajón de navegación deberían mostrar el indicador de cajón de navegación al lado del icono de la aplicación en la barra de acción. Al tocar el icono de la aplicación hace que el cajón de navegación para deslizarse por la izquierda.
Todas las demás pantallas de nivel inferior muestran el indicador tradicional Up junto al icono de la aplicación. El cajón sigue siendo accesible con un borde-golpe, pero no aparece en la barra de acción.
Icono de la aplicación con el indicador del cajón de la navegación.
Contenido del cajón de navegación
Mantener el contenido del cajón de navegación centrado en la navegación aplicación. Exponer los centros de navegación de su aplicación como elementos de lista en el interior del cajón de la navegación - un elemento por fila.
Títulos, iconos y contadores
Puede estructurar objetivos de navegación mediante la adición de títulos.Los títulos no son interactivos, pero sólo organizan objetivos de navegación en temas funcionales. Si usted tiene muchos objetivos de navegación, utilice títulos para orientar al usuario dentro del cajón.
Objetivos de navegación pueden tener iconos principales opcionales, así como los contadores que se arrastran. Utilice los contadores para informar a los usuarios acerca de un estado de cambio de datos en la vista correspondiente.
Utilice títulos e iconos para organizar su cajón.
Elementos de navegación plegables están divididas. Use el lado izquierdo para la navegación y el derecho a contraer y expandir elementos.
Elementos de navegación plegables
Si usted tiene muchos puntos de vista con algunos subordinados a otros, considerar el colapso en un solo elemento expansible para ahorrar espacio. El padre en el cajón de navegación y luego se convierte en un elemento de división. El lado izquierdo permite la navegación a la vista del elemento primario, y el lado derecho se derrumba o se amplía la lista de elementos secundarios.
En el lanzamiento, el estado inicial de los elementos plegables depende de usted.Como regla general, todas las entradas de la vista de nivel superior de la gaveta de navegación deben ser visibles. Si tiene muchos elementos plegables, considere colapsar todos los elementos para permitir al usuario ver las vistas de primer nivel en su totalidad.
Cuando el usuario abre el cajón de una pantalla de nivel inferior, expanda la rama correspondiente de la vista de nivel superior para dar un mayor sentido de lugar y poner de relieve las oportunidades de navegación cerca de la ubicación actual del usuario en la aplicación.
Cajones de navegación y barras de acción
Cuando el usuario se expande el cajón de la navegación, el foco cambia a la tarea de seleccionar un elemento del cajón.Debido a que el cajón no superponer la barra de acción, los usuarios no se dan cuenta de que los elementos de la barra de acciones no pertenecen al cajón de navegación.
Para reducir la confusión, ajustar el contenido de la barra de acción para el siguiente, una vez que el cajón está totalmente expandido:
- Icono de la aplicación
- Nombre de la App
- Retire las acciones de la barra de acción que son contextualmente a la vista subyacente (como Crear, Actualizar).Usted puede mantener acciones con alcance global, como "Buscar".
- Menú Desbordamiento con metas de navegación esperados, tales como configuración y Ayuda.
Limpie la barra de acción cuando el cajón está totalmente expandido. Retire las acciones que no son necesarios y mostrar el nombre de su aplicación en el área de título.
Acciones
Mantener acciones en el lado derecho de la barra de acción y en el desbordamiento
No colocar acciones en el cajón de la navegación.Acciones pertenecen en la barra de acción, y el usuario espera ver allí. Tenga en cuenta que no todas las aplicaciones utilizan el patrón de cajón de navegación. Puede ser tentador para exponer todas las posibilidades de su aplicación en un solo lugar, pero debe tener la imagen más grande en mente.Coloque sus acciones en las que todas las aplicaciones que muestran.
Esto también se aplica a los objetivos comunes de navegación, como el acceso a ayuda o configuración de la aplicación. De acuerdo con el estilo de guía convención Ayuda y configuraciones siempre se encuentran en el desbordamiento de la acción.
Mantenga Ayuda y Ajustes en el desborde.
Barras de acción contextual
A veces, el usuario estará en un estado en el que aparece una barra de acción contextual (CAB) en lugar de la barra de acción de la aplicación. Esto ocurre normalmente cuando el usuario selecciona texto o selecciona varios elementos, después de un gesto de pulsar y mantener. Mientras que el CAB es visible, aún debe permitir al usuario abrir el cajón de navegación mediante un golpe de borde. Sin embargo, sustituya el CAB con la barra de acciones estándar, mientras que el cajón de navegación abierta. Cuando el usuario cierra el cajón, vuelva a mostrar la CAB.
Ocultar barras de acciones contextuales, mientras que el cajón es visible.
Si el usuario se desplaza fuera de una vista con el contenido seleccionado, anule la selección del contenido antes de antes de navegar a la nueva vista.
Detalles de interacción
Introducir el usuario para el cajón en la primera utilización
Tras la primera puesta en marcha de la aplicación, introducir el usuario para el cajón de navegación abriendo automáticamente. Esto asegura que los usuarios saben sobre el cajón de la navegación y los lleva a aprender acerca de la estructura de su aplicación mediante la exploración de su contenido. Continuar mostrando el cajón sobre los lanzamientos posteriores hasta que el usuario se expande de forma activa el cajón de navegación manualmente. Una vez que sepa que el usuario sabe cómo abrir el cajón, el lanzamiento de la aplicación con el cajón cerrado de navegación.
En el primer uso, mostrar el cajón de navegación automática para ayudar al usuario a comprender el funcionamiento y la estructura de la aplicación.
Dar al usuario un rápido vistazo
Si el usuario toca el borde extremo izquierdo de la pantalla (dentro de 20 DP de la izquierda), tienen el cajón ojeada a cabo tan pronto como el dedo hace contacto con la pantalla. Esto promueve el descubrimiento accidental y proporciona información más rica.
El cajón de navegación se asoma cuando el usuario toca el borde extremo izquierdo de la pantalla.
Reflejos
Al abrir el cajón de la navegación de una pantalla en la que se representa en el interior del cajón, destacar su entrada en el cajón. A la inversa, si se abre el cajón de una pantalla que no está en la lista en el cajón, ninguno de los elementos del cajón debe ser resaltado.
Impacto de la gaveta en general la aplicación de navegación
El cajón de navegación es una alternativa a otros patrones de navegación de nivel superior. Para hacer que las aplicaciones con cajones de navegación funcionan consistentemente con las aplicaciones que utilizan una ficha o patrón hilandero, recordar que se aplican todos los requisitos de navegación para el sistema hacia atrás y arriba.
Preste especial atención a las siguientes situaciones:
Sistema De vuelta en el nivel superior de la aplicación
Sistema Tocar Volver al nivel superior de la aplicación no se abre el cajón de navegación. En cambio, Back System se comporta de acuerdo con las normas de navegación para el nivel superior, tales como la navegación hacia la aplicación anterior dentro de la tarea o la navegación a la pantalla principal.
Back System no muestra el cajón, pero se comporta de acuerdo con las normas de navegación para el nivel superior.
Back System después de la navegación cruzada para reducir los niveles de jerarquía
Si el usuario navega a una pantalla de menor jerarquía del cajón de navegación y la pantalla tiene un padre directo, entonces la pila se reinicia y Volver Volver señala al padre la pantalla de destino. Este comportamiento de espalda es el mismo que cuando un usuario navega en una aplicación de una notificación.
Cambiar la pila Back si su destino de navegación de nivel inferior tiene padres directos.
Estilo
La anchura del cajón de navegación depende del contenido que desea mostrar, pero debe estar entre un mínimo de 240 dp y un máximo de 320 dp. La altura de los elementos de línea individuales no debe ser inferior a 48 dp. Consulte la guía de diseño que sigue las recomendaciones sobre el relleno y el espaciado.
Directrices de diseño para el cajón de navegación.
Elija el fondo del cajón para que coincida mejor tema de su aplicación. Véanse los siguientes ejemplos para una luz Holo y un cajón de temática oscura Holo.
Cajones de Navegación en Holo Holo luz y oscuridad temática apps.
Navegación Cajón Checklist
Incluso si ya apoya a un cajón de navegación similares, actualice su cajón a este patrón para asegurarse de que:
- La barra de acciones se mantiene en su lugar y se ajusta a su contenido.
- Su cajón de navegación recubre el contenido.
- Cualquier punto de vista representado en el cajón tiene un indicador de cajón de navegación en la barra de acción que permite que el cajón se abra al tocar el icono de la aplicación.
- Usted se aprovecha de la nueva transición cajón visual.
- Cualquier punto de vista que no están representados en el cajón mantiene el indicador tradicional Up en su barra de acción.
- Usted permanece en sincronía con los patrones generales de navegación para arriba y hacia atrás.
Comentarios
Publicar un comentario