El gesto atrás predictivo es el resultado de una operación de navegación por gestos en la que un usuario desliza el dedo hacia atrás para obtener una vista previa del destino del gesto atrás antes de completarlo por completo. Esto le permite al usuario decidir si continuar (en otras palabras, "confirmar" el gesto de retroceso) o permanecer en la vista actual.
El gesto atrás predictivo proporciona una experiencia de navegación más intuitiva y fluida mientras se usa la navegación por gestos. Aprovecha las animaciones integradas para informar a los usuarios dónde los llevarán sus acciones para reducir resultados inesperados.
Usa la guía de diseño incluida en esta página si el diseño de tu app requiere navegación hacia atrás para transiciones y animaciones personalizadas en momentos clave. En la mayoría de las apps, no es necesario que implementes la navegación hacia atrás personalizada porque las animaciones de atrás predictivo integradas le muestran al usuario adónde irá.
Compatibilidad con el gesto atrás predictivo
La compatibilidad con el gesto atrás predictivo está disponible, ya sea que se use una navegación hacia atrás predeterminada o personalizada. Si usas la navegación hacia atrás predeterminada, puedes habilitar la función fácilmente. Obtén más información sobre cómo admitir el gesto atrás predictivo.
Después de que habilites la función, tu app tendrá animaciones integradas, como volver a la página principal, cambiar de actividad y cambiar de tarea.
También puedes actualizar tu dependencia de componente de Material a la versión 1.10.0-alpha02 o una posterior de MDC Android para recibir las siguientes animaciones de componentes de Material:
Cómo diseñar para la navegación por gestos
Cómo asegurarte de que tu app sea compatible de borde a borde
Para ayudar a tus usuarios, la navegación hacia atrás predictiva respeta las inserciones de gestos definidas en las funciones de borde a borde. Evita agregar gestos táctiles o objetivos de arrastre debajo de estas áreas de gestos.
Superficies de pantalla completa
Si tu app crea transiciones personalizadas integradas en plataformas de pantalla completa, usa esta guía de diseño.
Cuando un usuario hace un gesto atrás en una superficie de pantalla completa, la superficie se separa por completo del borde de la pantalla durante la vista previa, y el usuario puede manipularla directamente. Sin embargo, el diseño no debería sugerir visualmente al usuario que completar un gesto atrás descarta un elemento en la dirección del gesto atrás.
Por ejemplo, puedes usar transiciones de superficie de pantalla completa cuando descartas pantallas de detalles de vuelta a listas verticales para indicarle visualmente al usuario que está deshaciendo la acción anterior. En el video 1, un evento de calendario se descarta y se muestra en la vista de día. Para mejorar la textura, el diseño agrega un exceso sutil para absorber parte de la tensión que se acumula durante el gesto.
Vista previa posterior
Cuando se presentan animaciones predictivas al usuario, un estado de confirmación previa que mantiene la app mide cuándo el usuario realizó un gesto atrás de borde a borde, pero no lo aceptó. Para ello, debes proporcionar los parámetros que se apliquen a este estado de confirmación previa.
La cantidad de movimiento que se muestra se basa en el lugar más alejado en que el usuario puede moverse de la ubicación en la que comenzó el gesto.
Especificaciones de movimiento
Las superficies de pantalla completa se ven directamente afectadas por el cambio de x e y desde el principio del gesto. En esta sección, se describen las especificaciones y los valores que rigen la mecánica utilizada para los comentarios en pantalla.
En las siguientes imágenes, se muestran las especificaciones de movimiento recomendadas para las animaciones de superficie.
1 Márgenes: El 5% del ancho a ambos lados (relacionado con el área de superficie descrita en 3)
2 Cambio calculado si se escala la ventana al centro. Calcula el margen de 8 dp requerido: ((ancho de la pantalla / 20) - 8) dp
3 La superficie se escala al 90%, lo que deja un 10% disponible para los márgenes (consulta 1).
4 Deja un espacio de 8 dp desde el borde de la pantalla
Te recomendamos que mantengas los parámetros enumerados para obtener una experiencia coherente, pero puedes modificar las especificaciones para crear una animación personalizada.
En la figura anterior, el ancho de la pantalla es de 1280, con lo cual el desplazamiento de x es de 56 dp. La fórmula es la siguiente:
((1280/20)-8)= 56 dp x-shift
1 Espacio entre el borde y el margen del dispositivo disponible para Mayúsculas y
2 Si la superficie se desplaza fuera de la pantalla, reduce su escala en no más de un 50%.
2 La superficie comienza centrada verticalmente, con y-shift definido de la siguiente manera:
- Limita el desplazamiento y para que la superficie nunca pase el margen de pantalla de 8 dp.
- Para evitar que la superficie se detenga de forma abrupta, usa un interpolador de desaceleración y aplica un mapa hasta el límite de cambio de y
3 Conserva el margen de 8 dp una vez que la superficie sea lo suficientemente corta
Para la animación personalizada, debes definir todos los parámetros siguientes.
Parámetro |
Valor |
La importancia |
|---|---|---|
Cambio en X |
((ancho de la pantalla / 20) - 8) dp |
Cambio máximo, deja un margen de 8 dp |
Cambio en el eje Y |
((altura de pantalla disponible / 20) -8) dp |
Cambio máximo, deja un margen de 8 dp |
Escala |
El 90% |
Escala mínima del tamaño de la ventana |
Los desarrolladores que implementan la animación personalizada con las APIs de Predictive Back Progress usan estos parámetros.
Interpolación del progreso de los gestos
Se puede derivar un valor de progreso lineal del gesto del usuario, pero no debe usarse directamente para animaciones de vista previa. En cambio, los comentarios deben adaptarse a lo que ayuda al usuario durante la acción hacia atrás. Ingresa el valor de progreso con un token STANDARD_DECELERATE o PathInterpolator(0f, 0f, 0f, 1f) para que el gesto sea más evidente al principio. Esta respuesta mejora la detección de movimiento al comienzo del gesto y emplea la desaceleración para controlar la respuesta de una manera clara y agradable a la vista.
Compromiso con la acción
Cuando un usuario hace un gesto más allá del punto de confirmación y lo lanza, se muestra una animación que confirma la finalización de la acción.
Cuando los usuarios realizan gestos con rapidez, por lo general, se interpretan como deslizamientos. Este tipo de interacción puede aplicar velocidades altas a los elementos en pantalla, por lo que, en el contexto de las vistas previas inversas, el sistema absorbe esa velocidad animando temporalmente la superficie hacia su estado máximo de vista previa antes de ejecutar la animación de confirmación.
La intensidad del deslizamiento determina qué porcentaje de la animación de vista previa se muestra antes de ejecutar la animación de confirmación. El tipo de animación que se muestra depende del contenido que se descarte, como se muestra en el video 2.
Cancelar acción
En el video 4, se muestra un ejemplo de lo que sucede cuando un usuario lanza antes del umbral y se muestra una animación que confirma que se canceló la acción. En el caso de las superficies de pantalla completa, la ventana se mueve rápidamente y se reduce la escala a su estado original de borde a borde antes de que comenzara el gesto.