A volta preditiva é o resultado de uma operação de navegação por gestos em que o usuário deslizou de volta para visualizar o destino do gesto de volta antes de concluí-lo completamente. Isso permite que o usuário decida se quer continuar, em outras palavras, se "comprometer" com o gesto "Voltar" ou permanecer na visualização atual.
A volta preditiva oferece uma experiência de navegação mais suave e intuitiva ao usar a navegação por gestos. Ele aproveita animações integradas para informar aos usuários onde as ações os levarão para reduzir resultados inesperados.
Use as orientações de design apresentadas nesta página se o design do app exigir uma navegação de retorno para transições e animações personalizadas para momentos importantes. Para a maioria dos apps, não é necessário implementar a navegação de retorno personalizada, porque as animações de volta preditiva integradas mostram ao usuário para onde ele vai.
Suporte para volta preditiva
O suporte à volta preditiva está disponível usando uma navegação de retorno padrão ou personalizada. Se você estiver usando a navegação de retorno padrão, poderá ativar o recurso facilmente. Leia mais sobre como oferecer suporte à volta preditiva.
Depois da ativação, seu app cria animações de volta à tela inicial, entre atividades e tarefas.
Você também pode fazer upgrade da dependência do componente do Material Design para a versão 1.10.0-alpha02 ou mais recente do MDC Android e receber estas animações de componentes do Material Design:
Design para navegação por gestos
Conferir se o app tem suporte de ponta a ponta
Para ajudar os usuários, a navegação de volta preditiva respeita os encartes de gesto definidos nos recursos de ponta a ponta. Evite adicionar gestos de toque ou áreas de arrastar nessas áreas de gesto.
Superfícies em tela cheia
Se o app criar transições personalizadas para superfícies em tela cheia, use estas orientações de design.
Quando o usuário faz um gesto de volta em uma superfície de tela cheia, essa superfície é totalmente desanexada da borda durante a visualização da parte de trás, e o usuário pode manipulá-la diretamente. No entanto, o design não pode sugerir visualmente ao usuário que a conclusão de um gesto de volta dispensa um item na direção do gesto de volta.
Por exemplo, você pode usar transições de superfície em tela cheia ao dispensar telas de detalhes de volta para listas verticais para indicar visualmente ao usuário que ele está desfazendo a ação anterior. No vídeo 1, um evento da agenda é dispensado novamente para a visualização de dia. Para melhorar a tatilidade, o design adiciona uma ultrapassagem sutil para absorver parte da tensão da mola acumulada durante o gesto.
Visualização traseira
Ao apresentar animações preditivas ao usuário, um estado de pré-confirmação mantido pelo app mede quando o usuário executou um gesto de volta de ponta a ponta, mas não se comprometeu com ele ao soltar. É necessário fornecer parâmetros que se apliquem a esse estado de pré-confirmação.
A quantidade de movimentos exibidos é baseada na distância que o usuário pode se mover do local em que o gesto começou.
Especificações de movimento
As superfícies de tela cheia são diretamente afetadas pela mudança de x e y desde o início do gesto. Nesta seção, descrevemos as especificações e os valores que reguem a mecânica usada para feedback na tela.
As figuras a seguir mostram as especificações de movimento recomendadas para animações de superfície.
1 Margens: 5% da largura em cada lado (relacionadas à área de superfície descrita em 3)
2 Mudança calculada se a janela estiver sendo dimensionada para o centro. Calcule a margem de 8 dp necessária: ((largura da tela / 20) - 8) dp
3 A superfície é dimensionada para 90% do tamanho, deixando 10% disponível para margens (consulte 1).
4 Deixe um intervalo de 8 dp da borda da tela
Recomendamos manter os parâmetros listados para uma experiência consistente, mas você pode mudar as especificações para criar uma animação personalizada.
Na figura anterior, a largura da tela é 1280, tornando o x-shift em 56 dp. A fórmula para isso é:
((1280/20)-8)= 56 dp x-shift
1 Espaço entre a margem e a margem do dispositivo disponível para deslocamento y.
2 Se a superfície mudar para fora da tela, reduza-a em no máximo 50%.
2 A superfície começa centralizada verticalmente, com a mudança y definida desta forma:
- Limitar o deslocamento y para que a superfície nunca passe da margem da tela de 8 dp
- Para evitar que a superfície pare abruptamente, use um interpolador de desaceleração e faça o mapeamento para o limite do deslocamento y.
3 Preservar a margem de 8 dp quando a superfície for curta o suficiente
Para animação personalizada, você precisa definir todos os parâmetros a seguir.
Parâmetro |
Valor |
Contexto |
|---|---|---|
X Shift |
((largura da tela / 20) - 8) dp |
Mudança máxima, deixa a margem de 8 dp |
Deslocamento Y |
((altura da tela disponível / 20) -8) dp |
Mudança máxima, deixa a margem de 8 dp |
Escala |
90% |
Escala mínima do tamanho da janela |
Os desenvolvedores que implementam a animação personalizada usando as APIs Predictive Back Progress usam esses parâmetros.
Compromisso com a ação
Quando um usuário gesticula depois do ponto de confirmação e solta, uma animação é mostrada que confirma a conclusão da ação.
Quando os usuários realizam gestos rapidamente, eles geralmente são interpretados como deslizamentos rápidos. Esse tipo de interação pode aplicar altas velocidades a elementos na tela. Portanto, no contexto de visualizações de retorno, o sistema absorve essa velocidade animando momentaneamente a superfície em direção ao estado máximo de visualização antes de executar a animação de confirmação.
A intensidade da rolagem determina quanto da animação de visualização é mostrada antes de executar a animação de confirmação. O tipo de animação mostrado depende do conteúdo que está sendo dispensado, como mostrado no vídeo 2.
Cancelar ação
O vídeo 4 mostra um exemplo do que acontece quando um usuário libera antes do limite, com uma animação confirmando que a ação foi cancelada. Para superfícies em tela cheia, a janela se move e escalona rapidamente de volta ao estado original de borda a borda antes do início do gesto.