Resultados de aprendizagem

1. Desenhar UX/UI de uma app interativa.
2. Construir sistema de design + componentes.
3. Prototipar e testar.
4. Implementar em tecnologia adequada (web/app/kiosk).

Diferença

A complexidade está nos estados e transições.

Princípios de UX (recap)

• Pesquisa → personas, user stories (UC02285).
• Arquitetura de informação clara.
• Wireframe → mockup → protótipo.
• Sistema de design com tokens + componentes.
• Teste de usabilidade com utilizadores reais.
• Acessibilidade (UC02636).

Plataformas

Cada um tem inputs/distâncias/contexto próprios.

Inputs

• Toque — alvos grandes (≥ 44 px), gestos comuns.
• Rato/teclado — hover, atalhos.
• Controlador — focus + setas, distância de visualização.
• Voz/gesto — exigem feedback claro.
• Multitouch — gestos avançados (pinch/swipe).

Tokens e componentes

• Design tokens — cor, espaçamento, tipografia, raios, sombras.
• Componentes — botões, inputs, cards, modais, listas — com estados.
• Padrões — navegação, formulários, feedback.
• Variantes (size/tom/destaque) e dark mode.

Ferramentas: Figma (variants, auto layout, variables).

Estados de componente

Cada elemento interativo tem múltiplos estados a desenhar:

default  hover  focus  active  selected
disabled  loading  error  success  empty

Esquecer focus (teclado), disabled ou loading é o erro nº 1 de UI iniciante.

Padrões de navegação

• Topo / Tabs — secções principais.
• Bottom nav (mobile) — alcance do polegar.
• Drawer/Hamburger — secundário.
• Breadcrumbs — onde estou em hierarquias.
• Search — encontrar diretamente.

Consistente em todo o app; regra dos ≤ 3 cliques para o essencial.

Estados de ecrã

Cada ecrã tem 5 estados a considerar:

1. Vazio (primeira vez, sem dados).
2. Loading.
3. Erro (com ação clara).
4. Sucesso (feedback).
5. Dados normais.

Esquecer "vazio" e "erro" é amador.

Microinterações

Pequenos detalhes que comunicam estado e dão delight:

• Feedback ao tocar (ripple, escala).
• Animações curtas (≤ 200 ms) em transições.
• Lottie (UC02242) para microanimações leves.
• Sempre com reduced motion respeitado.

Prototipagem (Figma)

• Frames ligados com transições.
• Auto Layout para componentes responsivos.
• Componentes + variantes para estados.
• Variables / modes para light/dark, idiomas.

Teste com 3-5 utilizadores reais (UC02285).

Implementação

Hand-off do Figma → developer; idealmente com design tokens sincronizados.

Workflow

1. Briefing + personas.
2. Sitemap + user flows.
3. Wireframes mobile-first.
4. Sistema de design (tokens + componentes).
5. Mockups + protótipo.
6. Teste de usabilidade.
7. Implementar; QA + acessibilidade.
8. Lançar + iterar.