Crie interações avançadas para o visionOS

Olá! Meu nome é Nathan. Sou designer na equipe Apple Design. Esta sessão mostra como criar interações por foco para o visionOS. Com novas formas de responder ao olhar, seus apps parecem mais interativos e passam a sensação de que a mente das pessoas está guiando a experiência.

Estes são os tópicos de hoje: vamos analisar os fundamentos dos comandos visuais, explorar efeitos personalizados, fazer o conteúdo rolar só com o olhar e manter controles importantes na tela. Vamos começar. Como você deve saber, as pessoas navegam no visionOS com os olhos e as mãos. Elas olham para um elemento e tocam para selecioná-lo. Confira alguns lembretes para garantir que seu app funcione bem com os olhos e as mãos. Coloque o conteúdo mais importante na frente da pessoa, para facilitar a visualização e o uso. Para elementos interativos, prefira formas arredondadas, como círculos, cápsulas e retângulos arredondados. Eles atraem o olhar para o centro da forma.

Para interações precisas, reserve para cada elemento pelo menos 60 pontos de espaço. Os elementos podem ser menores, desde que cada um tenha um espaço total de 60 pontos.

Em objetos 3D com dimensão fixa, 60 pontos é quase igual a um tamanho angular de 2 graus e meio, equivalente a cerca de 4,4 cm para um objeto a 1 metro de distância.

Aplique efeitos de destaque a todos os elementos interativos. Componentes padrão como este menu serão destacados automaticamente.

Para componentes personalizados, adicione o efeito de destaque e verifique se a sua forma corresponde à forma do conteúdo.

Aplique também esses efeitos de destaque a objetos 3D selecionáveis.

Para saber mais sobre conceitos básicos, confira o sessão "Design para entrada espacial" de 2023. Hoje, vamos conferir interações mais avançadas para apps, começando com efeitos personalizados. O destaque padrão funciona bem na maioria dos casos, mas você pode ampliá-lo ou substituí-lo por suas próprias animações. Chamamos isso de efeitos de foco personalizados. Usamos efeitos de foco personalizados em todo o visionOS.

As barras de abas são abertas para mostrar os nomes de cada aba. O botão de voltar expande para mostrar o título da página anterior. Controles deslizantes mostram um botão para incentivar a interação.

Dicas de ferramentas aparecem abaixo dos botões para descrevê-los.

No Safari, a barra de navegação expande para mostrar as abas do navegador. E, na Visualização da Casa, ícones de ambientes revelam mais detalhes da paisagem.

Você também pode criar efeitos personalizados como esses em seus apps.

Eles são perfeitos para dar feedback, mantendo a personalidade do app ou o estilo visual do jogo. Antes, vamos entender melhor como eles funcionam. Para proteger a privacidade, o sistema aplica efeitos de foco fora do processo do app, para que o app não saiba para onde a pessoa está olhando. Em vez de responder a um evento de foco diretamente, as visualizações definem dois estados: a aparência padrão e a aparência com foco. O sistema anima a transição entre esses estados quando a pessoa olha para a visualização ou desvia o olhar.

Isso é ótimo para reproduzir animações, como aprendemos, mas significa que não é possível usar efeitos personalizados para realizar ações dentro do app. Vou mostrar o que isso significa. Vamos supor que eu esteja criando um app de fotos. Eu poderia adicionar um botão de download para a pessoa salvar suas fotos favoritas.

Ou usar um efeito para mostrar o tamanho do download quando a pessoa olhasse para ele, já que é só uma animação. Mas não poderia baixar conteúdo apenas olhando para o botão, pois isso exigiria que meu app soubesse quando o efeito é aplicado.

Em vez disso, a pessoa precisará executar um gesto de toque para salvar a foto.

Portanto, os efeitos personalizados geram animações. Que tipos de animações funcionam melhor? Em geral, elas se encaixam em três categorias: Animações instantâneas, com atraso e progressivas. As animações instantâneas começam logo que a pessoa olha para uma visualização. No app Atenção Plena, os botões exibem um ícone de seta para mostrar que há opções disponíveis.

O reprodutor de vídeo padrão exibe o tempo quando a pessoa olha para o cursor de reprodução. Essas informações extras são pequenas, contextuais e não interativas. Às vezes, as animações instantâneas são muito rápidas, pois geram movimento quando a pessoa tenta olhar ao redor. Nesse caso, usamos as animações com atraso. Elas geralmente mostram mais conteúdo após um breve atraso.

As dicas de ferramentas são um ótimo exemplo. O atraso permite que a pessoa pressione o botão rapidamente. O título só aparece se alguém demonstra mais interesse.

Outro exemplo é o botão de perfil do Safari, que segue o mesmo padrão com um layout diferente.

Por fim, temos as animações progressivas. São como as animações com atraso, mas com uma dica no início e uma curva personalizada. Confira os ícones de ambiente na Visualização da Casa. Assim que a pessoa olha, eles expandem lentamente para revelar mais da paisagem. O efeito deixa claro que o ícone expandirá se a pessoa continuar olhando para ele, mas só será aberto totalmente se ela demonstrar intenção clara. Isso permite que a pessoa olhe a grade inteira sem os ícones se expandirem.

Neste exemplo, o cartão expande para revelar o texto completo. Essas animações progressivas são um equilíbrio entre animações instantâneas e com atraso. Eles dão uma resposta imediata, sem distrações.

Para criar uma animação progressiva, tente uma curva como esta. Ela começa suavemente e termina com um rápido efeito de mola. Essa animação costuma funcionar melhor quando as visualizações expandem para mostrar mais conteúdo. Enquanto você avalia esses efeitos em seus apps, vou compartilhar algumas melhores práticas. Primeiro, forneça elementos de ancoragem. Os melhores efeitos personalizados mantêm parte da visualização igual. Estes elementos estáticos, como o título, são de ancoragem, pois fornecem contexto e ajudam a pessoa a entender as novidades.

Se o texto mudar quando a pessoa olhar para uma visualização, o movimento poderá interromper a leitura, então tente manter o texto fixo.

Se uma visualização for completamente diferente em seus dois estados, a pessoa pode ficar confusa sobre para o que está olhando.

E os efeitos de foco devem sempre partir de um elemento visível. Se não houver uma indicação de onde algo está, a pessoa terá dificuldade de encontrar ou se surpreenderá ao descobrir por acaso. Se houver elementos ocultos, mostre-os quando a pessoa olhar para algo visível. Aqui, por exemplo, o controle de redimensionamento aparece ao olhar para o canto da janela. Isso ajuda a pessoa a encontrar os controles que procura.

Em seguida, aplique efeitos personalizados com cuidado.

Pense em onde os efeitos personalizados poderiam oferecer foco, como nesta bússola. Mostre mais informações, como o status do local, ou crie momentos agradáveis, como uma cachoeira animada.

Mas não faça muitas mudanças enquanto a pessoa olha ao redor. Efeitos em excesso, como mostrar o nome de cada marcação no mapa, podem desviar a atenção do conteúdo ou causar desconforto visual. Efeitos de escala, mesmo sutis, podem causar distração em áreas muito usadas, como botões da barra de ferramentas ou células de tabela, pois movem os elementos que a pessoa tenta visualizar. Para essas áreas, mantenha o efeito de destaque padrão. Use efeitos sutis.

Os melhores efeitos personalizados são sutis e funcionam bem em áreas pequenas, como o botão de download anterior.

Evite aplicar efeitos personalizados em visualizações grandes, como esta foto. Isso gera muito movimento e pode deixar a experiência confusa.

Para imagens como essa, evite efeitos que desbotem as cores.

Uma boa solução é um efeito de destaque que dá uma resposta instantânea e some, assim a pessoa pode conferir as cores reais da foto. Isso se aplica a objetos 3D, como esta planta. Ela é realçada e exibe as cores reais.

Por último, evite movimentos inesperados. Isso acontece com frequência. Você acha que tem uma boa ideia, mas acaba tendo efeitos colaterais. Vou mostrar a você. A visão geral de abas do Safari exibe uma grade de abas abertas. Você pode ter uma ótima ideia: e se ocultarmos o botão de fechar por padrão em todas as abas e o mostrarmos apenas ao olhar para uma delas? Parece mais limpo, não é? Quando você olha para uma aba e o botão aparece, seu olhar instintivamente se dirige para ela. Isso pode fazer com que a pessoa feche acidentalmente a aba ao tentar selecioná-la, já que agora está olhando para o botão de fechar enquanto toca. Em vez disso, você tente algo do tipo: faça o botão surgir aos poucos até a metade quando a pessoa olhar para a aba, depois mostre o botão completo quando ela olhar para ele.

Além de deixar uma grade com muitas abas visualmente mais limpa, isso evita o fechamento acidental. É fundamental testar esses efeitos em um dispositivo real. É impossível testá-los assistindo a um vídeo, pois eles reagem de acordo com o lugar para onde você olha. Também adoro o simulador do visionOS, mas ele não substitui o teste em um dispositivo real.

Criar efeitos personalizados é um processo iterativo, mais do que outras partes da interface. Prepare-se para testar várias opções e passar um tempo fazendo ajustes.

Com o tempo, você saberá o que funciona e o que não funciona, mas, se tiver uma ideia, faça o teste. Pode funcionar. Vamos falar agora sobre outra interação incrível: Olhe para rolar a tela. Ela permite que a pessoa role a tela apenas com os olhos. No Safari, quando olho para o final da página, ela sobe com uma animação suave.

No app Música, quando olho para a última playlist, ela rola para o centro.

Isso facilita a navegação, pois seus olhos acompanham o conteúdo, trazendo-o para a tela. É uma interação leve que funciona junto com a rolagem com as mãos.

A rolagem começa quando a pessoa olha para perto da borda da área rolável, nas partes superior e inferior no caso de rolagem vertical ou nas laterais no caso de rolagem horizontal.

Como a opção Olhe para rolar a tela não é ativada por padrão e o seu app pode ter muitas visualizações, você precisa definir quais visualizações usará. Para decidir, leve em conta alguns aspectos:

Se a visualização for principalmente para leitura ou navegação, ative o recurso. O recurso Olhe para rolar a tela é ótimo para ler um artigo em apps como Safari ou procurar um programa em apps como TV.

Porém, em apps como Ajustes, a pessoa quer encontrar logo a opção certa. Ela não lê cada opção da lista, então o recurso Olhe para rolar a tela não é adequado nesse caso. Em geral, para visualização de controles da interface, não ative Olhe para rolar a tela.

Considere também seu conteúdo. Geralmente, o recurso Olhe para rolar a tela funciona melhor no conteúdo principal do app. No app Notas, a nota em si rola quando a pessoa olha para as bordas, mas a lista à esquerda não, seguindo o padrão que acabamos de mostrar em Ajustes.

Por fim, pense na consistência dentro do app.

No app TV, há uma lista de programas relacionados, igual à lista na biblioteca principal, então a pessoa espera que o recurso Olhe para rolar a tela funcione aqui também.

Agora que você tem uma noção de quais visualizações devem usar o recurso, vamos saber como deixar a rolagem natural e previsível.

O ideal é que as visualizações com o recurso Olhe para rolar a tela ativado tenham a largura ou a altura total da janela. Isso oferece à pessoa um bom espaço para rolar e fornece bordas claras para ela olhar.

Se a visualização de rolagem estiver inserida na janela, defina limites claros para a pessoa saber para onde olhar.

Se o app usa a posição de rolagem para animar conteúdo em outra velocidade, aplicar efeitos de paralaxe ou acionar animações personalizadas, considere ajustar o design para rolar na velocidade normal. Ou talvez o recurso Olhe para rolar a tela não seja adequado para essas visualizações. Quando a visualização de rolagem preenche a janela, tem bordas claras e rola normalmente, a navegação é suave e previsível. Por fim, vamos conferir os controles persistentes, um recurso sutil que faz uma grande diferença. Este é um reprodutor de vídeo padrão no visionOS. Os controles de reprodução são exibidos e ocultados com um toque. Se os controles estiverem ativados, serão ocultados automaticamente após um atraso. Isso funciona bem, mas os controles podem ser ocultados com o olhar. Agora, mantemos os controles visíveis enquanto você olha para eles e os ocultamos quando você olha para o vídeo. Você pode nem notar isso no início, já que ele funciona conforme o esperado.

Se o app usa um reprodutor de vídeo padrão integrado, em janela ou imersivo, esse comportamento será automático. Mas se o app usa controles de vídeo personalizados, você precisará ativar esse comportamento. Isso é ótimo para mais do que apenas apps de vídeo! O FaceTime mantém os controles das chamadas, e o app Atenção Plena mantém os controles da sessão. Sempre que uma interface é ocultada automaticamente após um atraso, seja para um vídeo ou uma experiência imersiva, adote esse comportamento de persistência. Como vimos, há muitas maneiras de dar vida aos seus apps com interações por foco: animando a interface com efeitos personalizados, rolando visualizações com o olhar e usando controles de mídia persistentes.

Ao projetar apps com esses recursos em mente, teste algumas ideias para saber o que funciona. Procure oportunidades para aplicar efeitos de foco personalizados em seus apps. Você pode criá-los no SwiftUI ou no RealityKit. Saiba mais detalhes sobre como criá-los nas sessões de 2024. Para ativar os comportamentos de Olhe para rolar a tela e persistência, confira a documentação em developer.apple.com. Obrigado e divirta-se!