AdobeXDestabeleceu-se como uma ferramenta poderosa para prototipagem. Especialmente interessante é a possibilidade de integrar controle de voz. Essa função permite que você faça interações com seu protótipo por meio de comandos verbais. Neste guia, você aprenderá como implementar o controle de voz no Adobe XD. Assim, seu protótipo não apenas se tornará mais amigável, mas também elevará a interatividade a um novo nível.
Principais descobertas
- O controle de voz permite a interação com objetos por meio de comandos de voz.
- Dicas visuais são cruciais para deixar claro aos usuários que comandos de voz podem ser utilizados.
- Você pode definir seus próprios comandos de voz e determinar suas reações no protótipo.
Guia passo a passo
Crie seu Artboard
Comece criando um novo Artboard. Escolhendo uma cor de fundo adequada, você dará ao seu protótipo uma aparência moderna. Aqui, você pode, por exemplo, escolher um tom suave para criar um ambiente agradável.
Adicionar texto
Agora é hora de se comunicar de forma relevante. Use a ferramenta de texto para adicionar um campo de texto onde você coloca a pergunta “O que posso fazer por você?”. Formate o texto de forma atraente para destacá-lo. Um tamanho de fonte de 90 pontos é ideal para ser chamativo, sem parecer sobrecarregado.
Dicas visuais para controle de voz
Para sinalizar ao usuário que comandos de voz são possíveis, você deve criar um símbolo de microfone. Você pode criar um microfone visual desenhando um retângulo arredondado e utilizando a ferramenta de círculo. Certifique-se de combinar elementos decorativos de forma que resultem em um design atraente.
Adicione o segundo campo de texto
Agora adicione outro campo de texto que exiba mensagens como “Feche este aplicativo”. Escolha uma formatação de texto adequada para destacá-lo. O objetivo é mostrar ativamente aos usuários quais entradas de voz eles podem fornecer.
Criar animações
Para adicionar elementos dinâmicos ao seu aplicativo, você deve criar vários Artboards. Estes mostrarão os diferentes estados do seu protótipo durante o uso interativo. Você pode definir a estrutura das animações no protótipo, de modo que uma animação suave seja iniciada ao dar um comando de voz.
Sincronize as animações
Use configurações de animação para definir as transições entre as telas. Você pode usar o Auto-Animate para garantir que a animação durante as fases de carregamento ocorra de forma fluida. Isso proporciona uma experiência de uso positiva enquanto os usuários aguardam suas entradas.
Use comandos de voz no modo protótipo
Agora, mude para o modo protótipo e defina a transição do controle de voz. O gatilho deve ser ajustado para o controle de voz, não para o toque. Defina o comando “Feche este aplicativo” como gatilho para a próxima ação. Para cada comando, você deve atribuir uma animação específica e duração.
Teste o protótipo
Assim que tudo estiver definido, vá para o painel de pré-visualização e teste seu aplicativo. Durante o teste, mantenha a barra de espaço pressionada para dar comandos de voz. Verifique se o seu protótipo reage corretamente às entradas de voz e se as animações funcionam. Teste o comando “Feche este aplicativo” e observe o processo.
Resumo – Usando controle de voz de forma eficaz no Adobe XD
Neste guia, você aprendeu como implementar controle de voz no Adobe XD. Você passou pelos passos para criar um protótipo, adicionar campos de texto e dicas visuais, bem como definir animações e transições. Essa técnica ajudará você a melhorar a interação do usuário e tornar seu protótipo mais atraente.
FAQ
Como posso ativar o controle de voz no Adobe XD?O controle de voz pode ser ativado definindo comandos de voz no modo protótipo.
Posso definir meus próprios comandos de voz?Sim, você pode definir seus próprios comandos de voz no protótipo e determinar suas reações.
Como testo o controle de voz?No painel de pré-visualização, você pode testar o controle de voz mantendo a barra de espaço pressionada e pronunciando seu comando.
