Ficha 02 · Especificar as interações de um protótipo

Parte I · Verdadeiro ou Falso (20 pts)

Indica V ou F e justifica.

1. Um overlay no Figma mostra conteúdo por cima do frame actual sem navegar para outro frame. (5 pts)
2. A transição "Back" deve usar a mesma direcção de uma transição "Push" de avanço. (5 pts)
3. ease-out é geralmente adequado para a entrada de elementos. (5 pts)
4. As variáveis num protótipo permitem reagir a estado (ex: mostrar um badge se o carrinho tem itens). (5 pts)

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.

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.

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)