Alterne para o modo de Protótipo. Selecione o objeto na prancheta em que você deseja adicionar um link de âncora.
Última atualização em
10/02/2023
Saiba como criar links de âncora para melhorar a experiência de navegação em uma prancheta.
Com o Adobe XD, você pode criar links de âncora ao desenvolver protótipos e rolar até seções específicas em uma prancheta. Use links de âncora para navegação mais rápida e utilização aprimorada ao criar formulários longos ou artigos extensos.
Deseja simular sua experiência de rolagem navegando rapidamente para seções específicas em uma prancheta? Siga estas etapas para começar.
Arraste o fio de prototipagem para baixo da prancheta até chegar ao ponto ao qual deseja ligar.
Clique no fio de prototipagem para exibir o painel Interação exibido no Inspetor de propriedades com as seguintes opções:
- Acionador: defina como Tocar.
- Tipo de ação: defina como Rolar para. Deseja atribuir várias ações a um acionador? Para obter mais informações, leia este artigo.
- Destino: Selecione a camada de destino.
- Deslocamento Y: digite o valor do deslocamento Y que é relativo à parte superior do objeto com fio. Arraste a alça do deslocamento y para a esquerda da prancheta e observe que o valor do deslocamento y muda. Qualquer valor acima do objeto com fio é um deslocamento negativo e abaixo é um deslocamento positivo.
- Atenuação: selecione uma opção para aplicar efeitos de atenuação. Por exemplo, selecione Fade Out para que as animações do protótipo comecem rápidas e diminuam gradativamente de velocidade até o final.
- Duração: insira a duração de tempo. A duração máxima que pode ser definida para uma transição entre duas pranchetas é de cinco segundos.
A. Selecionar o tipo de acionador B. Definir o tipo de ação como Rolar para C. Selecionar a prancheta de destino D. Inserir o valor do deslocamento Y E. Escolher um efeito de atenuação F. Inserir a duração
Para visualizar o efeito de rolagem na prancheta, selecione .
Saiba mais
“Use links de âncora para criar uma página de aterrissagem incrível para um livro de animais com uma interação de trás para cima”, conta Howard Pinksy, evangelista sênior do XD na Adobe.
Assista a este vídeo para obter mais informações.
Duração: 3 minutos
Agora que você sabe como criar links de âncora, baixe o kit de interface de exemplo, que inclui vários exemplos de designs da Web de uma página e experimente você mesmo.
O que vem por aí?
Você aprendeu a adicionar links de navegação ao design. Dê mais um passo e aprenda a adicionar várias interações usando comandos de voz e reproduções ao design.
Tem alguma dúvida ou sugestão?
Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
