Interações de Página

As Interações de Objeto são usadas principalmente para criar protótipos interativos, mas também podem ser usadas para fornecer links para especificações e requisitos dentro de projetos.

As Interações de Página são usadas quando você deseja criar um link de uma página do Moqups para um local diferente, seja dentro do projeto do Moqups ou fora dele.

As Interações de Página podem ser usadas para simular:

• Navegação entre telas de um aplicativo móvel
• Navegação entre diferentes páginas de um site

Neste artigo, explicaremos cada parte de uma Interação de Página e como aplicá-la. Também mostraremos como editar, duplicar ou excluir interações.

Painel de Interações

O Painel de Interações está localizado na Barra Lateral Direita e a partir deste Painel você poderá:

• Ver todas as Interações que foram aplicadas a um objeto

• Criar uma Interação

• Adicionar um Hotspot

• Controlar como as interações são exibidas na seção Opções:

  • Mostrar hotspots: Exibe os hotspots clicáveis no modo de edição.
  • Mostrar indicadores de interação: Adiciona um emblema de iluminação a objetos com interações – na página e no Painel de Camadas – no modo de edição.
  • Revelar destino da interação: No modo Visualização, exibe um tooltip com a ação e o destino quando você passa o cursor sobre um objeto.

Gatilho, Ação e Destino

Uma Interação de Página é composta de três partes: um Gatilho, uma Ação e um Destino.

Gatilho

Um Gatilho é o evento que coloca uma interação em movimento. Usando o dropdown superior, você pode escolher entre vários gatilhos: Ao Clicar ou Tocar, Ao Clicar com o Botão Direito, Ao Clicar Duas Vezes, Entrada do Mouse, Saída do Mouse.

Ação

Uma Ação é a instrução que será executada após um gatilho ser acionado. O segundo dropdown permite escolher Ações que se aplicam a Interações de Página ou Interações de Objeto.

Para Interações de Página, você pode escolher: Ir para a Página, Abrir Link ou Voltar.

Destino

Um Destino é o resultado final visível ao final de uma interação. No caso das Interações de Página, quando você abre o dropdown de destino, verá a Árvore de Páginas do seu projeto e, a partir daí, pode escolher qualquer página como Destino.

Dependendo de qual página você está partindo, você também pode optar por ir para a Página Pai, Próxima Página ou Página Anterior.

Para definir um destino, você também pode clicar no botão de destino verde ao lado do dropdown e escolher uma página de destino diretamente no Painel de Páginas.

Adicionar interações de página

Para adicionar uma Interação de Página usando o dropdown de destino:

1. Selecione o objeto ou grupo ao qual deseja adicionar a interação
2. Clique na Aba Interações para abrir o painel
3. Escolha um Gatilho no dropdown superior
4. No segundo dropdown, selecione uma Ação da lista de Interações de Página
5. No dropdown Destino, selecione uma opção de página
6. Clique em Concluído para aplicar a interação

Para adicionar uma Interação de Página usando o botão de destino:

1. Selecione o objeto ou grupo ao qual deseja adicionar a interação
2. Clique na Aba Interações para abrir o painel
3. Escolha um Gatilho no dropdown superior
4. No segundo dropdown, selecione uma Ação da lista de Interações de Página
5. Clique no botão verde Destino para ativar o Modo de Seleção de Destino
6. Clique em qualquer Página ou no Painel de Páginas para defini-la como a página de destino
7. Clique em Concluído para aplicar a interação.

Editar, duplicar ou excluir interações de página

Quando você aplica uma interação a um objeto, ela aparece imediatamente na Lista de Interações no topo do Painel de Interações. À medida que você adiciona mais interações ao mesmo objeto, verá que elas também aparecem lá. Você pode facilmente editar ou excluir qualquer interação da lista – ou duplicar uma interação para reutilização rápida.

Editar Interação

Editar uma interação é útil quando você deseja alterar partes de uma interação já existente. Usando a função de edição, você pode atualizar o Gatilho, a Ação ou o Destino individualmente – sem afetar as outras partes da interação.

Para editar uma interação:

1. Selecione o objeto ou grupo de objetos cuja interação você deseja editar
2. Clique na Aba Interações para abrir o Painel de Interações
3. No topo do painel, localize a interação que deseja editar
4. Clique no botão Editar para ativar o modo de edição
5. Altere a interação e clique em Concluído para salvar suas alterações
6. Sua interação atualizada piscará em verde na lista por alguns segundos

Duplicar Interação

Muitas vezes, você pode querer aplicar diferentes variações de uma interação ao mesmo objeto. A função Duplicar permite duplicar uma interação existente e, em seguida, editar seu Gatilho, Ação e Destino conforme necessário.

Para duplicar uma interação:

1. Selecione o objeto ou grupo de objetos do qual deseja duplicar uma interação
2. Clique na Aba Interações para abrir o painel de Interações
3. No topo do painel, localize a interação que deseja duplicar
4. Clique no ícone Duplicar e uma interação idêntica aparecerá na Lista de Interações no topo do painel
5. Para editar a nova interação, clique no botão Editar e siga as etapas da seção Editar Interações deste artigo

Excluir Interação

Para excluir uma interação:

1. Selecione o objeto ou grupo de objetos do qual deseja excluir uma interação
2. Clique na Aba Interações para abrir o painel de Interações
3. No topo do painel, localize a interação que deseja excluir
4. Clique no botão Excluir

Perguntas e respostas

Quais interações funcionam em um PDF exportado?

Todas as Interações de Página funcionam normalmente, com exceção do Voltar, que depende do histórico do seu navegador para a direção. As Interações de Objeto não funcionam em PDFs.

Se você quiser fornecer às partes interessadas um protótipo totalmente funcional, convide-as como convidados do projeto ou compartilhe um link do projeto. Saiba como fazer ambos em Compartilhamento. Você também pode exportar um visualizador HTML offline interativo.