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.
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 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, sigue esta guía de diseño.
Vista previa posterior
Cuando un usuario realiza un gesto atrás en una superficie de pantalla completa, el área interna debe reducirse a medida que avanza el gesto. Tan pronto como el usuario supere el umbral de confirmación, el contenido debe cambiar al siguiente estado con un fundido, que le informará al usuario dónde lo llevará la acción.
Interpolación
El interpolador utilizado garantiza que la pantalla salga rápidamente. Los parámetros son (.1, .1, 0, 1) para coincidir con el interpolador que se usa para las animaciones de SystemUI.
Cancelar acción
Si el usuario libera el gesto en un estado de no confirmación, el contenido regresa y reduce la escala a su estado y tamaño originales antes de que comience el gesto, lo que deshace los cambios de estado.
Especificaciones de movimiento
Parámetro |
Valor inicial |
Valor objetivo |
La importancia |
|---|---|---|---|
Salir de la báscula |
100% |
90% |
|
Ingresar báscula |
El 110% |
100% |
|
Atenuación de salida |
100% |
0% |
Se atenúa al valor objetivo en el umbral de progreso del 35% |
Ingresar Atenuación |
0% |
100% |
Ingresa la atenuación inicial en el umbral de progreso del 35% |
Transición de elementos compartidos (vistas cruzadas)
Si tu app crea transiciones personalizadas integradas en la app para las transiciones de elementos compartidos de Views, usa la siguiente guía de diseño.
Cuando un usuario realiza un gesto atrás en las transiciones de un elemento compartido, 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 debe 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 elementos compartidos cuando descartas las pantallas de detalles de nuevo a listas verticales para indicarle visualmente al usuario que está deshaciendo la acción anterior. En el video 3, 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 transiciones de elementos compartidos se ven directamente afectadas por el cambio 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 |
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 6, 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. Para las transiciones de elementos compartidos, 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.