UC02286 · Conceber o design de interface para dispositivos móveis

Introdução

O design de interface (UI) para dispositivos móveis é uma disciplina específica dentro do design digital. O telemóvel não é um computador pequeno: tem um ecrã reduzido, usa-se com o dedo (não rato), funciona em movimento, com interrupções constantes, frequentemente com uma só mão e por vezes sob luz solar directa.

Esta UC (25h) prepara o aluno para conceber interfaces móveis profissionais, cobrindo: - Princípios de UI mobile e as guidelines das duas plataformas dominantes (Material Design e HIG). - Componentes de interface e padrões de navegação. - Sistemas de layout, grelhas e espaçamento. - Tipografia, cor, dark mode e tokens. - Microinterações, estados e feedback. - Construção de um design system e preparação do handoff para programadores.

A ferramenta de referência é o Figma, standard da indústria.

1. UI design mobile

1.1 O que distingue o mobile

1.2 Princípios fundamentais

1. Clareza: cada ecrã tem um objectivo principal evidente.
2. Toque primeiro: tudo o que é interactivo é facilmente tocável.
3. Conteúdo acima do cromo: a interface recua para o conteúdo brilhar.
4. Consistência: padrões previsíveis reduzem esforço cognitivo.
5. Feedback: cada acção tem resposta imediata.
6. Tolerância ao erro: confirmar acções destrutivas, permitir desfazer.

1.3 A regra do polegar

A maioria segura o telemóvel com uma mão e interage com o polegar. A zona inferior central do ecrã é a mais confortável; o topo é difícil de alcançar. Por isso as acções primárias (tab bar, botões principais) vivem em baixo, e os títulos/informação no topo.

2. Material Design vs Human Interface Guidelines

2.1 As duas escolas

As plataformas têm linguagens de design próprias. Ignorá-las produz apps que "parecem erradas".

Material Design (Google / Android): - Metáfora de papel e tinta: superfícies com elevação e sombra. - Cores vivas, tipografia Roboto. - FAB (Floating Action Button) para a acção principal. - Navegação por bottom navigation, navigation drawer.

Human Interface Guidelines (Apple / iOS): - Ênfase em clareza, deferência e profundidade. - Sombras subtis, blur, translucidez. - Tipografia San Francisco (SF Pro). - Navegação por tab bar e navigation bar com botão "voltar" no topo-esquerda.

2.2 Comparação prática

2.3 Estratégia multiplataforma

Três abordagens: 1. Nativo por plataforma: respeitar cada guideline (melhor experiência, mais custo). 2. Marca forte transversal: linguagem própria coerente nas duas (ex: Spotify). 3. Híbrido: base comum + ajustes nativos pontuais (navegação, controlos de sistema).

A escolha depende da marca, orçamento e público.

3. Componentes de UI

3.1 Padrões de navegação

Tab bar / Bottom navigation: - 3 a 5 destinos de topo de hierarquia. - Sempre visível, troca instantânea. - Ícone + label.

Navigation drawer (menu lateral): - Para muitas secções secundárias. - Acede-se por ícone "hambúrguer" ou swipe. - Risco: esconde navegação (menos descoberta).

Bottom sheet: - Painel que sobe da base. - Modal: bloqueia o fundo (acções, escolhas). - Persistente: coexiste com conteúdo.

Tabela de decisão:

3.2 Botões e hierarquia de acção

Regra de ouro: um botão primário por ecrã. Vários botões "fortes" anulam a hierarquia.

3.3 Inputs e formulários

• Label visível sempre (placeholder não substitui label).
• Teclado correcto: email, numérico, telefone, URL.
• Validação inline, com mensagem específica ("Email inválido", não "Erro").
• Estados: empty, focus, filled, error, disabled.
• Autofill e autocomplete sempre que possível.

Minimizar campos: cada campo adicional reduz a taxa de conclusão.

3.4 Cards, listas e grelhas

• Card: agrupa conteúdo relacionado; usar para itens com várias propriedades.
• Lista: vertical, densa, ideal para ecrã estreito.
• Grelha: para conteúdo visual (fotos, produtos), 2-3 colunas.

Separar com espaço e divisores subtis, evitando molduras pesadas.

4. Layout e grelhas

4.1 O sistema de 8pt

Todas as dimensões são múltiplos de 8 (com half-step de 4 para detalhes finos).

Porquê 8: - Divisível, escala bem em @1x/@2x/@3x. - Reduz decisões arbitrárias. - Consistência visual automática.

4.2 Spacing system (tokens)

Margem lateral standard do ecrã: 16 pt.

4.3 Grelha de colunas

No mobile usa-se tipicamente uma grelha de 4 colunas com gutter de 16 pt e margem de 16 pt. Alinhar componentes à grelha cria ritmo visual.

4.4 Safe areas

Os ecrãs têm obstruções do sistema: notch, Dynamic Island, status bar, home indicator.

A safe area é a zona livre dessas obstruções.

• Conteúdo interactivo e crítico dentro da safe area.
• Fundos/imagens podem estender-se até à borda (edge-to-edge).
• Em web: usar env(safe-area-inset-*) com viewport-fit=cover.

4.5 Responsividade

• Mobile-first: desenhar para o ecrã mais pequeno e crescer.
• Breakpoints: telefone pequeno (~360), telefone grande (~430), tablet (~768+).
• Orientação: prever portrait e landscape.
• Reflow: definir o que reflui, esconde ou reposiciona em cada tamanho.

5. Tipografia e cor mobile

5.1 Escala tipográfica

Definir uma escala de papéis em vez de tamanhos ad-hoc:

Corpo mínimo confortável: 16 pt (evita zoom automático em iOS Safari).

5.2 Boas práticas tipográficas

• Uma ou duas famílias no máximo.
• Line-height ~1.4-1.5 para corpo.
• Comprimento de linha limitado (~35-50 caracteres no mobile).
• Hierarquia por tamanho e peso, não por muitas cores.

5.3 Cor e contraste

Aplicar WCAG 2.1 AA:

• Não usar só a cor para informação (acessibilidade a daltónicos).
• Testar em condições reais (luz solar).

5.4 Dark mode

O modo escuro não é inversão de cores:

• Superfície base: cinzento muito escuro (#121212), não preto puro (reduz halação).
• Reduzir saturação das cores vivas.
• Elevação por luminosidade: superfícies mais altas ficam mais claras.
• Garantir contraste em ambos os temas.
• Desenhar light + dark desde o início, não como retrofit.

5.5 Design tokens

Um token mapeia um nome semântico a um valor:

# Primitivos
blue-600   = #4F46E5
gray-900   = #121212
gray-050   = #FAFAFA

# Semânticos (light / dark)
color-primary       = blue-600
color-surface       = gray-050 / gray-900
color-text          = gray-900 / gray-050
radius-md           = 12
elevation-1         = sombra subtil

Vantagens: troca de tema, rebranding e consistência num único ponto de controlo. Os tokens ligam directamente design e código.

6. Microinterações e feedback

6.1 Estados dos componentes

Cada componente interactivo precisa de estados desenhados:

Esquecer estados produz interfaces "mortas" e confusas.

6.2 Microinterações

São pequenas animações com propósito funcional:

• Confirmar acção (botão afunda ao toque).
• Mostrar progresso (spinner, barra, skeleton).
• Guiar atenção (entrada de novo item com fade).
• Reforçar marca e prazer (animação de "gosto").

Princípios de animação aplicados a UI: - Timing: 150-300 ms para a maioria. - Easing: ease-out para entradas, ease-in para saídas. - Significado: animar transformações de estado, não decorar. - Respeitar prefers-reduced-motion.

6.3 Feedback

Três canais: - Visual: mudança de estado, animação, toast. - Sonoro: usar com parcimónia. - Háptico: vibração subtil (Taptic Engine no iOS) para confirmar acções importantes.

Toda a acção significativa deve dar feedback imediato: o utilizador nunca deve duvidar se funcionou.

6.4 Estados vazios, de carregamento e de erro

São os estados mais esquecidos e os que mais distinguem uma app polida.

7. Design system e handoff

7.1 O que é um design system

Conjunto coerente de princípios, tokens, componentes e padrões documentados, partilhados entre designers e programadores. Garante consistência e acelera o trabalho.

Camadas: 1. Fundações: cor, tipografia, espaçamento, grelha (tokens). 2. Componentes: botões, inputs, cards, navegação. 3. Padrões: fluxos e composições recorrentes. 4. Documentação: quando e como usar cada peça.

7.2 Componentes em Figma

• Criar componente principal → instâncias herdam mudanças.
• Auto layout para componentes que reflui com o conteúdo.
• Bibliotecas partilhadas publicadas para a equipa.
• Nomear de forma sistemática (Button/Primary/Large).

7.3 Variantes e propriedades

Agrupar estados de um componente num único, controlado por propriedades:

Component: Button
  Property "Type":   Primary | Secondary | Text
  Property "Size":   Small | Medium | Large
  Property "State":  Default | Hover | Pressed | Disabled
  Property "Icon":   Boolean (com/sem ícone)

Espelha as props do componente em código, facilitando o handoff.

7.4 Especificação para programadores

O handoff entrega:

O Dev Mode / Inspect do Figma gera medidas e snippets CSS automaticamente.

7.5 Boas práticas de handoff

• Camadas e componentes bem nomeados.
• Ficheiro organizado (páginas, secções, cover).
• Documentar regras de uso.
• Marcar interações e transições (protótipo).
• Manter fonte única de verdade (não versões dispersas).

Um handoff cuidado poupa horas de dúvidas e retrabalho.

Conclusão

Conceber UI mobile exige equilibrar estética, usabilidade e restrições da plataforma. Dominar as guidelines (Material e HIG), construir sobre uma base de tokens e grelha de 8pt, desenhar todos os estados e organizar tudo num design system com handoff claro é o que separa um protótipo amador de um produto pronto a desenvolver. O Figma é o ambiente onde isto tudo se materializa.