quarta-feira, abril, 2019

Motion Design não precisa ser difícil

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas
Loading...
FavoriteLoadingFavoritar este Post
Categoria:

O Motion ajuda a tornar as interfaces de usuário expressivas e fáceis de usar. Apesar de ter muito potencial, o movimento é talvez o menos compreendido de todas as disciplinas de design. Isso pode ser devido a ser um dos membros mais novos da família de UI. O design visual e de interação remonta às GUIs iniciais, mas o motion precisou esperar que o hardware moderno renderizasse a animação sem problemas. A sobreposição entre UI motion e animação tradicional também confunde as águas. Uma vida inteira pode ser gasta dominando os 12 princípios básicos da Disney , isso significa que o UI Motion é similarmente complexo? As pessoas geralmente me dizem que projetar o movimento é complicado ou que escolher os valores certos é ambíguo. Eu afirmo que nas áreas mais importantes para UI, o motion pode e deve ser simples.

Onde começar

O principal trabalho do Motion é ajudar os usuários a navegar em um aplicativo, ilustrando a relação entre os elementos de UI. Motion também tem a capacidade de adicionar caracteres a um aplicativo com ícones animados, logotipos e ilustrações; no entanto, o estabelecimento da usabilidade deve ter prioridade sobre o acréscimo de expressividade. Antes de flexionar suas habilidades de animação de personagens, vamos começar projetando uma forte base de movimento focando nas transições de navegação.

Padrões de transição

Ao projetar uma transição nav, simplicidade e consistência são fundamentais. Para conseguir isso, escolheremos dois tipos de padrões de movimento:

  • Transições baseadas em um contêiner
  • Transições sem um contêiner.

Transições baseadas em um contêiner

1

Elementos como texto, ícones e imagens são agrupados dentro de contêineres

Se uma composição envolve um contêiner como um botão, cartão ou lista, o design de transição é baseado na animação do contêiner. Geralmente, os contêineres são fáceis de detectar com base em suas bordas visíveis, mas lembre-se de que eles também podem ficar invisíveis até o início da transição, como um item de lista sem divisores. Esse padrão se divide em três etapas:

1. Animar os contêineres usando o material de alívio padrão (o que significa que ele acelera rapidamente e, em seguida, suavemente diminui para descansar). Neste exemplo, as dimensões do contêiner e os raios de canto são animados de um botão circular para um retângulo que preenche a tela.

22. Escale os elementos no contêiner para caber na largura. Os elementos são fixados no topo e mascarados dentro do contêiner. Isso cria uma conexão clara entre o contêiner e os elementos internos.

3

* A animação diminuiu para ilustrar como os elementos são dimensionados e mascarados dentro de um contêiner

3. Os elementos que saem durante a transição desaparecem à medida que o contêiner acelera. Elementos que entram no fade quando o contêiner desacelera. Um truque perfeito de efeito de mão é alcançado ao desvanecer os elementos conforme eles se movem rapidamente.

4

* Animação desacelerou para ilustrar como os elementos saem e entram usando fades

Aplicar esse padrão a todas as transições envolvendo um contêiner estabelece um estilo consistente. Isso também torna clara a relação entre as composições inicial e final, já que elas estão ligadas pelo contêiner animado. Para mostrar a flexibilidade desse padrão, aqui ele é aplicado a cinco composições diferentes:

5

* A animação diminuiu para ilustrar como as composições de início e fim são vinculadas pelo contêiner

Alguns contêineres simplesmente deslizam para fora da tela usando o material alívio de padrão. A direção em que ele desliza é informada pela localização do componente ao qual está associado. Por exemplo, tocar no ícone de uma gaveta de nav na parte superior esquerda deslizará o container da esquerda.

6

Se um contêiner entra de dentro dos limites da tela, ele desaparece e se expande. Em vez de animar a partir da escala de 0%, ela começa em 95% para evitar chamar a atenção excessivamente para a transição. A animação de escala usa o abrandamento de desaceleração do Material , o que significa que ele começa no pico de velocidade e suavemente diminui para descansar. Para sair, o recipiente simplesmente desaparece sem escala. As animações de saída foram projetadas para serem mais sutis do que as entradas para focar a atenção em novos conteúdos.

7

* A animação diminuiu para ilustrar como os contêineres podem entrar com uma animação de esmaecimento e escala

Transições sem um contêiner

Algumas composições não terão um contêiner para basear o design de transição, como tocar em um ícone em uma navegação inferior que leve o usuário a um novo destino. Nestes casos, um padrão de duas etapas é usado:

1. A composição inicial sai desaparecendo, então a composição final entra desvanecendo-se.

2. À medida que a composição final se desvanece, também se expande sutilmente usando o abrandamento da desaceleração do material. Mais uma vez, a escala é aplicada apenas à composição de entrada para enfatizar o conteúdo novo em detrimento do antigo.

8

* Animação desacelerou para ilustrar como as transições sem um contêiner usam desbotamento e dimensionamento

Se as composições inicial e final tiverem uma relação espacial ou sequencial clara, o movimento compartilhado pode ser usado para reforçá-la. Ao navegar por um componente de passo, por exemplo, as composições de início e fim compartilham um movimento de deslizamento vertical à medida que elas se desvanecem. Isso reforça seu layout vertical. Ao tocar no próximo botão em um fluxo de integração, as composições compartilham um movimento de deslizamento horizontal. Mover-se da esquerda para a direita reforça a noção de progresso em uma sequência. O movimento compartilhado usa o alívio padrão do material.

9

* A animação diminuiu para ilustrar o movimento compartilhado vertical e horizontal

_______________________

Melhores práticas

Mantenha simples

Dada a alta frequência e os laços estreitos com a usabilidade, as transições de nav geralmente devem favorecer a funcionalidade sobre o estilo. Isso não quer dizer que eles nunca devam ser estilizados, apenas certifique-se de que as escolhas de estilo sejam justificadas pela marca. O movimento de captura de olho geralmente é melhor reservado para elementos como pequenos ícones, logotipos, carregadores ou estados vazios. O exemplo simples abaixo pode não receber tanta atenção no Dribbble, mas contribuirá para um aplicativo mais útil.

10 (1)

* A animação diminuiu para mostrar diferentes estilos de movimento

Escolha a duração certa e facilite

As transições de navegação devem usar durações que priorizem a funcionalidade sendo rápidas, mas não tão rápidas que se tornem desorientadoras. As durações são escolhidas com base em quanto da tela a animação ocupa. Como as transições de nav geralmente ocupam a maior parte da tela, uma longa duração de 300ms é uma boa regra geral. Por outro lado, componentes pequenos, como um switch, usam uma duração curta de 100 ms. Se uma transição parecer muito rápida ou lenta, ajuste sua duração em incrementos de 25ms até atingir o equilíbrio correto.

O Alívio (easing) descreve a taxa que as animações aceleram e desaceleram. A maioria das transições de nav usa o easing padrão do Material, que é um tipo de atenuação assimétrico. Isso significa que os elementos se aceleram rapidamente e depois diminuem a velocidade para focar a atenção no final da transição. Esse tipo de atenuação dá às animações uma qualidade natural, já que os objetos no mundo real não são iniciados ou parados instantaneamente. Se uma transição parecer rígida ou robótica, é provável que o alinhamento simétrico ou linear tenha sido erroneamente escolhido.

11

* A animação diminuiu para ilustrar diferentes tipos de atenuação

<hr size=0 width=”100%” align=center>

Os padrões e as melhores práticas descritos neste artigo pretendem estabelecer um estilo de movimento prático e sutil. Isso é adequado para a maioria dos aplicativos, mas algumas marcas podem exigir expressões mais intensas de estilo.

Uma vez que as transições de navegação são atendidas, o desafio de adicionar caractere ao seu aplicativo é iniciado. É aí que os padrões simples são inadequados e a arte da animação realmente brilha.

 

Artigo original 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Leia mais >