Ficha 02 · Especificar as interações de um protótipo
- Triggers e transições
- Estados
- Especificação de animações
Parte I · Verdadeiro ou Falso (20 pts)
Indica V ou F e justifica.
- Um overlay no Figma mostra conteúdo por cima do frame actual sem navegar para outro frame. (5 pts)
- A transição "Back" deve usar a mesma direcção de uma transição "Push" de avanço. (5 pts)
ease-outé geralmente adequado para a entrada de elementos. (5 pts)- As variáveis num protótipo permitem reagir a estado (ex: mostrar um badge se o carrinho tem itens). (5 pts)
- V — Overlays sobrepõem-se ao frame (menus, bottom sheets, modais) sem mudar de ecrã.
- F — O "Back" deve ter a direcção inversa do avanço (se push entra pela direita, back sai para a direita), reforçando o modelo espacial.
- V —
ease-out(rápido a começar, lento a parar) dá sensação responsiva às entradas. - V — Variáveis guardam estado; condições reagem a ele (badge, login, contadores).
Parte II · Especificar transições e estados (40 pts)
Recebes um fluxo de 4 ecrãs de uma app de notas: Lista de notas → Detalhe da nota → Editar nota → (guardar) volta ao Detalhe. Há ainda um menu de opções acessível por um botão.
Exercício 1 · Tabela de transições (20 pts)
Cria uma tabela que especifique cada navegação: origem, gesto (trigger), destino, tipo de transição e duração.
Especificação de transições (referência)
| # | Origem | Trigger | Destino | Transição | Duração |
|---|---|---|---|---|---|
| 1 | Lista | On tap (item) | Detalhe | Smart Animate (card → ecrã) | 300 ms ease-out |
| 2 | Detalhe | On tap "Voltar" / swipe | Lista | Back (inverso de 1) | 300 ms ease-in |
| 3 | Detalhe | On tap "Editar" | Editar | Push (entra da direita) | 250 ms ease-out |
| 4 | Editar | On tap "Guardar" | Detalhe | Back + confirmação | 250 ms + toast |
| 5 | Editar | On tap "Cancelar" | Detalhe | Back (sem guardar) | 250 ms |
| 6 | Qualquer | On tap "Menu" | Menu (overlay) | Open overlay (slide/dissolve) | 200 ms |
| 7 | Menu | Tap fora / fechar | — | Close overlay | 200 ms |
Notas: avanços e recuos com direcções coerentes; menu como overlay e não navegação.
Exercício 2 · Estados do botão "Guardar" (20 pts)
Especifica todos os estados do botão "Guardar" do ecrã Editar e o comportamento associado.
Estados do botão "Guardar" (referência)
| Estado | Aspecto | Comportamento |
|---|---|---|
| Disabled | Cinzento, opacidade 40% | Quando não há alterações; não clicável |
| Default | Cor primária, filled | Quando há alterações por guardar |
| Pressed | Escurece ~8% | Durante o toque (~120 ms) |
| Loading | Spinner em vez de label | Durante o guardar; bloqueia novo toque |
| Sucesso | Checkmark breve + toast "Guardado" | Após gravar; depois navega para Detalhe |
| Erro | Mensagem + botão volta a Default | Se a gravação falhar; permite tentar de novo |
Notas: transição suave entre estados (sem cortes secos); feedback háptico no sucesso (mobile); respeitar prefers-reduced-motion.
Parte III · Especificar uma microinteração com animação (40 pts)
Especifica em detalhe a microinteração de "adicionar nota aos favoritos" (ícone de estrela), de forma que um programador a possa implementar sem dúvidas. Inclui: trigger, regras (estados), feedback visual/háptico e parâmetros de animação (propriedades, timing, easing). (40 pts)
Especificação — Microinteração "Favoritar nota" (referência)
Trigger - On tap no ícone de estrela.
Regras / estados
- Estado A: não favorito — estrela contornada (outline), cor text-muted.
- Estado B: favorito — estrela preenchida (filled), cor primary (ou amarelo).
- O toque alterna entre A e B (toggle), actualizando a variável isFavorite.
Feedback - Visual: a estrela muda de outline para filled com pequena animação. - Háptico: vibração leve (impact light) no momento da mudança (mobile). - Opcional: contador de favoritos incrementa/decrementa com animação numérica.
Parâmetros de animação
- Ao favoritar (A→B):
- Estrela faz scale: 1 → 1.3 → 1 (pequeno "pop").
- Mudança de cor (outline→filled) em paralelo.
- Duração total ~300 ms; easing ease-out no crescimento, leve overshoot.
- Opcional: pequenas partículas/brilho a sair da estrela (~400 ms).
- Ao desfavoritar (B→A):
- Estrela faz scale 1 → 0.9 → 1.
- Cor volta a text-muted.
- Duração ~200 ms, ease-in-out, sem partículas.
Estados de borda
- Sem ligação: enfileirar a alteração e reflectir optimisticamente; reverter visual se falhar a sincronização.
- prefers-reduced-motion: substituir a animação de scale por simples mudança de estado (sem movimento).
Acessibilidade
- Alvo de toque ≥ 44×44 pt.
- aria-pressed/label "Favoritar" / "Remover dos favoritos".
(Avaliar: trigger, dois estados claros, feedback multicanal, parâmetros de animação concretos (propriedade + valores + timing + easing), tratamento de estados de borda e acessibilidade.)