Crie snippets interativos

Olá! Meu nome é Ray. Sou designer na equipe Apple Design. Hoje, você aprenderá a criar snippets interativos. Snippets interativos são visualizações compactas no App Intents. Eles mostram informações atualizadas e oferecem ações rápidas no seu app. Os snippets podem aparecer nos lugares compatíveis com o App Intents.

Isso inclui o Spotlight, a Siri e o app Atalhos. Essa integração amplia o alcance e a utilidade do seu app no sistema. Os snippets ficam na parte superior da tela, sobrepondo outros tipos de conteúdo. Então eles são úteis e não tiram as pessoas de seu contexto. Eles permanecem até você confirmar, cancelar ou deslizar para fechar.

Isso torna snippets ótimos para exibir tarefas e informações simples do app. Eles incluem layouts visuais avançados para refletir a identidade única do app. Também são compatíveis com elementos como botões e exibem informações atualizadas, para novo nível de interatividade ao App Intents. Com isso, começaremos abordando a aparência do conteúdo e do layout do seu snippet. Depois, aprenderemos a realizar interações concisas e úteis. E abordaremos como usar diferentes snippets, como resultados e confirmações. Snippets do App Intents oferecem experiências diretas, com conteúdo claro. Um aspecto importante da visualização é o tamanho da fonte. O texto nos snippets é maior que os padrões do sistema. Uma fonte maior chama atenção para as informações mais importantes no momento. Disponibilize espaço suficiente entre os elementos para não congestionar o layout. Mantenha margens consistentes nos Snippets para um layout claro. Isso mantém o snippet organizado, permitindo o foco no que é importante. Use a API ContainerRelativeShape para margens responsivas e adaptáveis.

Usar texto maior também limita o espaço. Evite conteúdos com mais de 340 pontos de altura, o que exige rolagem e gera atritos. Em vez disso, deixe o conteúdo conciso com apenas as informações mais importantes. O snippet direciona as pessoas para a visualização relevante no app. Fundos vibrantes com a identidade visual destacam snippets sobre outros conteúdos. No entanto, isso pode dificultar a leitura do conteúdo. Verifique o contraste do snippet à distância, indo além das proporções padrão. Se o conteúdo for difícil de ler, aumente o contraste entre o layout e o fundo. Isso ajudará a manter o snippet nítido, mesmo ao usar fundos vibrantes. É assim que você facilita a leitura e a compreensão no seu snippet. Vamos falar sobre interatividade. A interatividade torna os snippets mais stateful e acionáveis. Incorpore botões para executar ações simples e relevantes ao usar o Intent. Os snippets podem mostrar dados atualizados com as informações mais recentes.

Saiba como usar a interatividade neste exemplo de Intent de monitoramento de água. Um botão para adicionar água torna os dados mais acionáveis e a experiência mais leve.

Os dados são atualizados com escala e desfoque. Isso fornece um feedback visual claro para a ação. Atualizar dados no próprio snippet reforça a confiança no App Intent para rotinas. Seu snippet também pode incluir botões e conteúdo atualizado ao mesmo tempo.

Snippet equalizador exibe ajustes de áudio atualizados e pré-ajustes disponíveis. O snippet deve oferecer ações relevantes para complementar a tarefa principal. Mesmo sem interatividade, os snippets podem animar as informações do app.

Vamos falar sobre tipos de snippet. São dois: resultados e confirmações. Snippets de resultados incluem dados de confirmação ou que não exigem outras ações. Sem tarefas de acompanhamento ou decisões, a visualização tem apenas o botão OK. Resultados são ótimos para snippets, como a verificação do status de um pedido. A seguir, temos os snippets de confirmação. Use confirmações quando o Intent precisar de uma ação antes de mostrar o resultado. Vamos explorar este Intent de pedido de café. O snippet confirma o pedido, permitindo ajustes na quantidade de espresso. O botão de ação, como Pedir, mostra o próximo passo. A confirmação é ajustável.

Após confirmar o pedido, como latte com 2 doses de espresso, o snippet de resultado mostra o resultado dessa escolha. Esse padrão ajuda as pessoas a entender que iniciaram um intent e vê-lo concluída. Vamos saber quando mostrar um diálogo: diálogo é o que a Siri fala com o App Intent. É essencial para interações que priorizam a voz. Com AirPods, é possível ouvir o diálogo e responder sem olhar para a tela. Torne o snippet compreensível por si só, mesmo sem diálogo visível ou audível. O snippet deve comunicar o objetivo do Intent, sem depender de diálogo. Isso ajuda a remover a redundância e torna o snippet mais intuitivo.

Use confirmações e resultados para solicitar uma ação ou mostrar um resultado. Vamos conferir o que aprendemos e o que está por vir. Crie snippets leves, intuitivos e claros, com interações e snippets adequados. Para saber sobre criação de App Intents, confira estas sessões. Mal podemos esperar por seus snippets! Obrigado!