Bloco 1 · UI design mobile

O que é UI design mobile

UI (User Interface) = camada visual e interactiva com que o utilizador toca.

No mobile, o ecrã é pequeno, o input é toque e o contexto é móvel (interrupções, uma mão, luz solar).

Princípios-chave:

• Clareza: cada ecrã tem um propósito.
• Toque primeiro: alvos grandes (mínimo 44×44 pt).
• Conteúdo > cromo: o conteúdo manda, a interface recua.
• Consistência: padrões previsíveis.

Material Design vs HIG

Conhecer ambos evita interfaces que parecem "estranhas" na plataforma errada.

Plataforma e expectativas

O utilizador tem modelos mentais da sua plataforma:

• O iOS coloca o "voltar" no topo-esquerda + swipe da borda.
• O Android tem botão de sistema "voltar".

Respeitar convenções reduz a curva de aprendizagem.

Um botão "partilhar" deve usar o ícone nativo de cada sistema, não um genérico.

Bloco 2 · Componentes de UI

Navegação

• Tab bar / Bottom navigation: 3-5 destinos de topo, sempre visíveis.
• Navigation drawer: menu lateral para muitas secções secundárias.
• Bottom sheet: painel que sobe da base para acções contextuais ou conteúdo extra.
• Back / Up: regressar no fluxo.

Regra: destinos principais na tab bar; o resto em drawer ou sheet.

Botões e acções

Hierarquia de botões:

• Primário (filled): a acção principal do ecrã, um por vista.
• Secundário (outlined / tonal): acções alternativas.
• Terciário (text): acções de baixo peso (Cancelar).

FAB (Material): acção mais provável, flutuante no canto.

Alvo mínimo de toque: 44×44 pt (iOS) / 48×48 dp (Android).

Inputs e formulários

• Text fields com label sempre visível (não só placeholder).
• Teclado adequado ao campo (email, número, telefone).
• Validação inline com mensagem clara.
• Estados: vazio, focado, preenchido, erro, desativado.

Boa prática: minimizar campos. Cada campo extra reduz a conversão.

Cards e listas

• Card: agrupa conteúdo relacionado num bloco com elevação.
• Lista: itens verticais, eficiente em ecrãs estreitos.
• Grelha: para conteúdo visual (galeria, produtos).

Usar espaçamento e divisores para separar, não molduras pesadas.

Bloco 3 · Layout e grelhas

Sistema de 8pt

Todas as medidas (espaçamento, tamanhos, margens) são múltiplos de 8: 8, 16, 24, 32, 40...

Vantagens:

• Consistência visual automática.
• Escala bem em densidades diferentes (@1x, @2x, @3x).
• Decisões mais rápidas (menos valores arbitrários).

Para detalhes finos usa-se o half-step de 4.

Spacing system e margens

Margem lateral típica do ecrã: 16 pt.

Safe areas

Os ecrãs modernos têm notch, Dynamic Island e indicador home.

A safe area é a zona livre de obstruções do sistema.

• Conteúdo interactivo dentro da safe area.
• Fundos e imagens podem ir até à borda (edge-to-edge).
• Usar safe-area-inset (web) ou guides nativos.

Responsividade mobile

• Layout fluido: largura em percentagem / flex, não fixa.
• Breakpoints: telefone pequeno, telefone grande, tablet.
• Orientação: portrait e landscape.
• Conteúdo adaptativo: o que reflui, o que se esconde, o que reposiciona.

Desenhar para o menor ecrã primeiro (mobile-first).

Bloco 4 · Tipografia e cor mobile

Escalas tipográficas

Uma escala define tamanhos consistentes por papel:

Corpo mínimo legível no mobile: 16 pt (evita zoom forçado no iOS).

Contraste e legibilidade

WCAG: contraste mínimo 4.5:1 para texto normal, 3:1 para texto grande.

• Evitar texto cinzento-claro sobre branco.
• Testar sob luz solar (mobile usa-se na rua).
• Não depender só da cor para transmitir informação.

Ferramentas: Stark, Contrast Checker.

Dark mode

O modo escuro não é "inverter cores".

• Usar cinzentos escuros (#121212), não preto puro.
• Reduzir a saturação das cores vivas.
• Elevação por luminosidade, não por sombra.
• Garantir contraste em ambos os temas.

Desenhar light + dark desde o início, via tokens.

Tokens de design

Um token é uma variável nomeada para um valor de design:

color-primary      = #4F46E5
color-surface      = #FFFFFF (light) / #121212 (dark)
text-on-surface    = #1A1A1A (light) / #EAEAEA (dark)
radius-md          = 12

Mudar o valor num sítio actualiza todo o produto. Base de qualquer design system.

Bloco 5 · Microinterações e feedback

Estados dos componentes

Cada componente interactivo tem múltiplos estados:

• Default: repouso.
• Hover (relevante em web/tablet com cursor).
• Pressed / Active: durante o toque.
• Focused: navegação por teclado/acessibilidade.
• Loading: a processar.
• Disabled: indisponível.
• Error: problema.

Desenhar todos evita interfaces que parecem "mortas".

Microinterações

Pequenas animações com propósito:

• Confirmar uma acção (botão "afunda" ao tocar).
• Mostrar progresso (spinner, barra).
• Guiar atenção (item novo entra com fade).
• Dar prazer (animação de "gosto").

Timing: 200-300 ms é o ponto ideal. Demasiado lento irrita.

Feedback e haptics

• Visual: mudança de estado, animação.
• Sonoro: usado com parcimónia.
• Háptico: vibração subtil ao confirmar (iOS Taptic Engine).

Cada acção significativa deve ter feedback imediato — o utilizador nunca deve duvidar se "funcionou".

Estados vazios e de erro

• Empty state: ecrã sem dados ainda. Explicar e sugerir acção ("Adiciona o teu primeiro item").
• Error state: o que falhou + como resolver + botão "tentar de novo".
• Loading: skeleton screens em vez de spinner quando possível.

Estes estados costumam ser esquecidos — fazem a diferença na qualidade.

Bloco 6 · Design system e handoff

Componentes em Figma

Um componente é um elemento reutilizável (botão, card, input).

• Edita-se o componente principal → todas as instâncias actualizam.
• Auto layout para componentes que reflui com o conteúdo.
• Organizar numa biblioteca partilhada.

Resultado: consistência + velocidade na equipa.

Variantes e propriedades

Variantes agrupam estados de um componente num só:

Botão
 ├ Tipo: Primário | Secundário | Texto
 ├ Tamanho: S | M | L
 ├ Estado: Default | Hover | Pressed | Disabled
 └ Ícone: Sim | Não

O dev escolhe a combinação por props, igual ao código.

Especificação para dev

O handoff entrega ao programador:

• Medidas (spacing, tamanhos) em tokens.
• Cores com nome do token.
• Tipografia (estilo, peso, line-height).
• Estados e comportamento.
• Assets exportados (@1x/@2x/@3x ou SVG).

Figma gera CSS/specs no modo Inspect / Dev Mode.

Boas práticas de handoff

• Nomear camadas e componentes de forma clara.
• Documentar regras (quando usar cada componente).
• Marcar interações e transições.
• Manter o ficheiro organizado (páginas, secções).

Um bom handoff poupa horas de perguntas ao programador.