Áreas clicáveis e ligações

Transformar imagens em um caminho navegável.

Para que serve

Definir quais elementos levam a outras telas e testar se a meta pode ser alcançada.

Quando usar

Para um protótipo clicável com imagens enviadas.

Antes de começar

• Telas enviadas e nomeadas
• Destino de cada botão planejado

Exemplo

A área Editar endereço abre a tela de formulário; Salvar leva à confirmação.

Passo a passo

1. Abrir Ligações. Na aba Protótipo do estudo, encontre o conjunto de imagens e clique em Ligações na tela inicial. Confira o nome da tela no editor aberto: é sobre essa imagem que você vai desenhar os destinos. Tela inicial.

2. Marcar áreas. Arraste sobre o botão Editar endereço para desenhar uma área. Se disponível, Detectar botões com IA sugere áreas para revisão. Clique na área e ajuste seus limites; ela deve cobrir o botão sem invadir outro controle. Botão Editar endereço · Área sem sobreposição indevida.

3. Definir destinos. Na lista de áreas, preencha Rótulo da área e Destino da área. Ligue Editar endereço ao formulário e Salvar à confirmação. Repita nas telas intermediárias e clique em Salvar ligações; aguarde Ligações salvas antes de fechar. Editar → formulário · Salvar → confirmação.

4. Percorrer o caminho. Clique em Testar ligações no editor e percorra Editar endereço, formulário e confirmação. Cada clique deve abrir o destino definido. Em Montar, selecione Imagens com ligações no bloco; confira início e meta e corrija qualquer aviso de tela inalcançável. O clique abre o destino esperado.

Validar antes da coleta

Em Montar, Prévia do estudo aplica grupos, regras e triagem do rascunho sem criar sessões nem ocupar cotas. Em tarefas Figma, site e entrevista, ela mostra Resposta simulada para testar a lógica: o autor informa o desfecho; isso não comprova uma interação real.

Prévia em nova aba permite conferir cada bloco no desktop ou celular, incluindo navegação interativa no Figma e conversa simulada na entrevista. Essa prévia por bloco não aplica os saltos do estudo.

Para validar site, gravação, voz e follow-up de IA reais, publique e, em Compartilhar, use Abrir link em nova aba. O link publicado abre uma participação real em /r/[token]: ela pode gerar respostas e consumir cota. Separe essa participação ao analisar a coleta.

Como ler o resultado

• Áreas com rótulo e destino
• Um caminho verificável entre início e meta

Cuidados e limites

• Sugestões da IA precisam de revisão de tamanho, rótulo e destino.
• Uma imagem com aparência de botão não navega sozinha.

Continue no guia interativo

Ligar telas com áreas clicáveis

Guias relacionados

• Trazer telas do Figma ou de imagens
• Escolher navegação e meta da tarefa
• Entrevista com IA