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
21 de fev de 2023
- Guia do usuário do Adobe XD
- Introdução
- Novidades no Adobe XD
- Perguntas frequentes
- Criar designs e protótipos e compartilhar com o Adobe XD
- Gerenciamento de cores
- Requisitos de sistema
- Noções básicas sobre a área de trabalho
- Alterar o idioma do aplicativo no Adobe XD
- Acessar kits de design de interface
- Acessibilidade no Adobe XD
- Atalhos de teclado
- Dicas e truques
- Design
- Pranchetas, guias e camadas
- Formas, objetos e caminho
- Selecionar, redimensionar e girar objetos
- Mover, alinhar, distribuir e organizar objetos
- Agrupar, bloquear, duplicar, copiar e virar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Criar elementos de repetição
- Criar designs de perspectiva com transformações em 3D
- Editar objetos usando operações boolianas
- Texto e fontes
- Componentes e estados
- Mascaramento e efeitos
- Layout
- Vídeos e animações Lottie
- Protótipo
- Criar protótipos interativos
- Animar protótipos
- Propriedades de objeto compatíveis com a Animação automática
- Criar protótipos com teclados e controles
- Criar protótipos usando reprodução e comandos de voz
- Criar transições temporizadas
- Adicionar sobreposições
- Criar protótipos de voz
- Criar links de âncora
- Criar hiperlinks
- Visualizar designs e protótipos
- Compartilhar, exportar e analisar
- Compartilhar pranchetas selecionadas
- Compartilhar designs e protótipos
- Definir permissões de acesso para links
- Trabalhar com protótipos
- Revisar protótipos
- Trabalhar com especificações de design
- Compartilhar especificações de design
- Inspecionar especificações de design
- Navegar em especificações de design
- Revisar e comentar especificações de design
- Exportar ativos de design
- Exportar e baixar ativos de especificações de design
- Compartilhamento em grupo para corporações
- Fazer backup ou transferir ativos do XD
- Sistemas de design
- Sistemas de design com as Bibliotecas da Creative Cloud
- Trabalhar com ativos de documento no Adobe XD
- Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
- Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
- Trabalhar com tokens de design
- Usar ativos das Bibliotecas da Creative Cloud
- Documentos na nuvem
- Integrações e plug-ins
- Trabalhar com ativos externos
- Trabalhar com ativos de design do Photoshop
- Copiar e colar ativos do Photoshop
- Importar ou abrir designs do Photoshop
- Trabalhar com ativos do Illustrator no Adobe XD
- Abrir ou importar designs do Illustrator
- Copiar vetores do Illustrator para o XD
- Plug-ins para o Adobe XD
- Criar e gerenciar plug-ins
- Integração do JIRA com o XD
- Plug-in do Slack para XD
- Plug-in do Zoom para XD
- Publicar o design do XD no Behance
- XD para iOS e Android
- Solução de problemas
- Problemas conhecidos e corrigidos
- Instalação e atualizações
- Inicialização e falha
- Documentos na nuvem e bibliotecas da Creative Cloud
- Prototipagem, publicação e revisão
- Não é possível gravar interações de protótipo no macOS Catalina
- Problemas com fluxos de trabalho de publicação
- Links publicados não são exibidos nos navegadores
- Protótipos não são renderizados corretamente nos navegadores
- Painel de comentários aparecendo repentinamente em links compartilhados
- Não é possível publicar bibliotecas
- Importação, exportação e trabalho em outros aplicativos
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 exibir 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.