Design da parte traseira preditivo

A volta preditiva é o resultado de uma operação de navegação por gestos em que um usuário deslizou de volta para visualizar o destino do gesto "Voltar" antes de concluí-lo totalmente. 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 mais intuitiva ao usar a navegação por gestos. Ele usa animações integradas para informar aos usuários para onde as ações os levarão para reduzir resultados inesperados.

Use as orientações de design nesta página se o design do app exigir a navegação de retorno para transições e animações personalizadas para momentos importantes.

Suporte à 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 que você ativar o recurso, seu app terá animações integradas, como 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:

Garantir que o app tenha 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 gestos.

Figura 1:encartes de gestos do sistema. Evite posicionar totalmente as áreas de toque nessas áreas.

Superfícies em tela cheia

Se o app criar transições personalizadas para superfícies em tela cheia, siga estas orientações de design.

Vídeo 1. Exemplo de volta preditiva da superfície em tela cheia.


Visualização traseira

Quando um usuário executa um gesto de volta em uma superfície de tela cheia, a área interna precisa ser reduzida à medida que o gesto avança. Assim que o usuário ultrapassa o limite de confirmação, o conteúdo precisa mudar para o próximo estado usando um esmaecimento, informando ao usuário para onde a ação o levará.

Interpolação

O interpolador usado garante que a tela saia rapidamente. Os parâmetros são (.1, .1, 0, 1) para corresponder ao interpolador usado para as animações da SystemUI.

Cancelar ação

Se o usuário soltar o gesto em um estado sem confirmação, o conteúdo volta e volta rapidamente ao estado e ao tamanho originais antes que o gesto seja iniciado, desfazendo qualquer mudança de estado.

Vídeo 2. Exemplo de estado sem compromisso e ação de cancelamento.

Especificações de movimento

Parâmetro

Valor inicial

Valor desejado

O contexto

Sair da balança

100%

90%

Inserir escala

110%

100%

Sair do modo de esmaecimento

100%

0%

Esmaece até o valor desejado ao atingir o limite de progresso de 35%

Entrar no esmaecimento

0%

100%

O esmaecimento começa quando o limite é de 35%

Vídeo 3. Adicionar uma ultrapassagem sutil para absorver a tensão da mola acumulada durante o gesto

Transição de elementos compartilhados (visualizações cruzadas)

Se o seu app criar transições personalizadas para transições de elementos compartilhados para visualizações, use as orientações de design a seguir.

Quando um usuário faz um gesto de volta em transições de um elemento compartilhado, a superfície se separa totalmente da borda da tela durante a visualização da parte de trás, e o usuário pode a manipular diretamente. No entanto, o design não pode sugerir visualmente ao usuário que realizar um gesto de volta dispensa um item na direção dele.

Por exemplo, você pode usar transições de elementos compartilhados 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 3, um evento da agenda é dispensado novamente para a visualização "Dia". Para melhorar a tatilidade, o design adiciona uma sobreposição 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 fez um gesto de volta de ponta a ponta, mas não se comprometeu com isso ao soltar. É necessário fornecer parâmetros que se apliquem a esse estado de pré-confirmação.

A quantidade de movimento mostrada é baseada na distância que o usuário pode se mover do local em que o gesto começou.

Vídeo 4. Exemplo de prévia

Especificações de movimento

As transições de elementos compartilhados são diretamente afetadas pelas mudanças x e y desde o início do gesto. Esta seção descreve as especificações e os valores que regem 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.

Figura 2:parâmetros de deslocamento, escala e margem de superfície para deslizar da borda esquerda"

1 Margens: 5% da largura em ambos os lados (relacionadas à área de superfície descrita em 3)

2 Deslocamento calculado se a janela for redimensionada 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 as 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 de 56 dp. A fórmula para isso é:

((1.280/20) - 8)= 56 dp X-shift

Figura 3:parâmetros de deslocamento e escala Y para deslizar da borda esquerda. A superfície em tela cheia mostra uma prévia da parte de trás.

1 Espaço entre a margem do dispositivo e a borda disponível para deslocamento em y

2 Se a superfície sair da tela, reduza a superfície em no máximo 50%.

2 A superfície começa centralizada verticalmente, com o deslocamento y definido desta forma:

  • Limitar o deslocamento y para que a superfície nunca ultrapasse a margem da tela de 8 dp
  • Para evitar que a superfície pare abruptamente, use um interpolador de desaceleração e mapeie 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

O contexto

Mudança X

((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.

Interpolação do progresso do gesto

Um valor de progresso linear pode ser derivado do gesto do usuário, mas não pode ser usado diretamente para animações de visualização. Em vez disso, o feedback deve ser adaptado para o que ajuda o usuário durante a ação de retorno. Alimente o valor do progresso com um token STANDARD_DECELERATE ou PathInterpolator(0f, 0f, 0f, 1f) para que o gesto seja mais aparente no início. Esse feedback melhora a detecção de movimento no início do gesto e usa desaceleração para controlar o feedback de maneira visualmente agradável e clara.

Compromisso com a ação

Vídeo 5. Exemplo de lançamento rápido para confirmaçã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 executam gestos rapidamente, eles geralmente são interpretados como deslizamentos. Esse tipo de interação pode aplicar altas velocidades a elementos na tela. Portanto, no contexto das visualizações anteriores, 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 do deslize rápido 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

Vídeo 6. Exemplo de cancelamento de uma ação

O vídeo 6 mostra um exemplo do que acontece quando um usuário solta antes do limite, mostrando uma animação confirmando que a ação foi cancelada. Para transições de elementos compartilhados, a janela se move e volta rapidamente ao estado original de borda a borda antes do início do gesto.