Ficha 02 · Navegação, fluxo, prototipagem e handoff

Parte I · Navegação

Exercício 1 · Padrão certo (10 pts)

Indica o padrão de navegação adequado a cada caso:

a) App de banco com 5 secções principais (Conta, Cartões, Transferir, Investir, Mais). ___

b) Site institucional com 4 secções e 20+ páginas. ___

c) App de mensagens com lista + conversa aberta ao lado (tablet/desktop). ___

Exercício 2 · Hamburger sim/não (5 pts)

Quando não deves usar um menu hamburger?

Exercício 3 · Breadcrumbs (5 pts)

Onde fazem sentido breadcrumbs e onde não?

Parte II · Fluxos e estados

Exercício 4 · Fluxo de tarefa (15 pts)

Desenha em caixas + setas o fluxo "Adicionar produto ao carrinho e finalizar compra" num site de e-commerce, considerando os caminhos feliz e pelo menos 2 caminhos alternativos (ex.: produto sem stock, pagamento falha).

Exercício 5 · Erros previsíveis (10 pts)

Lista 4 tipos de erro que um app deve prever no fluxo de login e o que mostrar em cada.

Parte III · Prototipar em Figma

Exercício 6 · Componentes e variantes (10 pts)

O que ganhas em criar um componente Botão com variantes em Figma, em vez de copiar/colar?

Exercício 7 · Auto-layout (10 pts)

O que é o Auto-layout do Figma e dá um exemplo concreto de quando o usar.

Exercício 8 · Prototipar interação (10 pts)

Tens um botão "Adicionar ao carrinho" em Figma. Descreve como prototipar:

a) O toque no botão a abrir um pequeno toast "Adicionado ao carrinho".

b) O número do badge do carrinho aumentar em 1.

Parte IV · Handoff e implementação

Exercício 9 · Handoff (15 pts)

O que entregas a um developer para que possa implementar um ecrã sem perguntar 50 dúvidas?

Exercício 10 · Tokens em código (10 pts)

Tens estes tokens vindos do Figma:

color/primary    = #2D6CDF
color/text       = #1A1A1A
space/sm         = 8 px
space/md         = 16 px
radius/md        = 12 px

Escreve um excerto CSS que os declare como custom properties num :root e use-os num botão.