Crie widgets para visionOS

Olá! Esta é a sessão "Criar widgets para visionOS". Meu nome é Jonathan e, daqui a pouco, Moritz estará aqui para compartilhar mais sobre widgets. Widgets são informações visuais e úteis que ajudam as pessoas a se manterem conectadas com o que importa, sem precisar abrir um app. Os widgets facilitam o acesso ao conteúdo útil, como previsão do tempo, compromissos agendados ou acompanhamento de metas. Nesta sessão, mostraremos como essas ideias se aplica ao visionOS e como você pode criar widgets que se encaixam nos ambientes, aproveitando os recursos espaciais e visuais da plataforma. No visionOS, os widgets ganham nova forma. Eles se tornam objetos tridimensionais que se adaptam perfeitamente ao ambiente. Fixados na parede, mesa ou prateleira, eles mantêm as informações do app acessíveis e em destaque.

Moritz e eu vamos mostrar a você o sistema de design que dá vida aos widgets. Vamos explorar os princípios que orientam seu comportamento no espaço e dar dicas práticas para os novos materiais, estilos e tamanhos. Os widgets não só têm ótima aparência como também pertencem ao ambiente. Se o seu app para iPad já inclui widgets, você começou muito bem. Ativando o modo de compatibilidade, os widgets são enviados para o visionOS, onde adotam automaticamente um novo tratamento espacial e visual. Esse tratamento dá aos designs nova profundidade e dimensão, além de permitir que as pessoas os coloquem facilmente no ambientes.

Você também pode criar widgets nativos específicos para o visionOS. Eles dão acesso a tamanhos específicos da plataforma e aprimoram o estilo visual, tornando o widget mais integrado ao ambiente. O widget Music Poster é um ótimo exemplo: simula um pôster em uma sala, indo além de uma interface na tela. Para ajudar no design, vamos analisar os quatro princípios básicos dos widgets no Vision Pro. O primeiro é a persistência, um aspecto essencial dos widgets no visionOS. Quando um widget é colocado no espaço, ele mantém sua posição no espaço. Ele permanece ancorado e persiste entre as sessões, mesmo com a troca de ambientes ou quando o dispositivo é desligado e ligado novamente.

O próximo princípio é o tamanho fixo. Os widgets têm uma escala consistente e real, sendo proporcionais em qualquer lugar. O widget Music Poster usa o tamanho extragrande, com proporções que lembram uma moldura de arte impressa. Os widgets no visionOS são persistentes, de tamanho fixo e altamente personalizáveis para apps e pessoas. As pessoas podem personalizar a aparência dos widgets, enquanto você pode oferecer opções de estilo para que eles se integrem a diversos ambientes.

E, por fim, há a percepção de proximidade. Os widgets no visionOS ajustam a aparência e o layout conforme a proximidade da pessoa, sempre mostrando o nível certo de detalhes, seja de longe ou de perto.

Analisaremos todos os princípios, começando pela persistência e como ela influencia o comportamento dos widgets nos ambientes. Uma vez posicionado, o widget permanece fixo no ambiente. Isso possibilita a criação de experiências persistentes e contextuais, que coexistem com as pessoas em seus ambientes. Antes de explorarmos os detalhes, é útil entender como as pessoas acessam widgets no visionOS. Elas podem encontrar e adicionar widgets pelo app Widgets na grade inicial, facilitando a descoberta e a integração a qualquer espaço. Quando alguém adiciona um widget do app Widgets, ele inicialmente aparece solto, flutuando ao lado da janela da biblioteca. Para fixá-lo, o widget deve ser colocado em uma superfície horizontal ou vertical. Isso o fixa em sua posição permanente. Em uma superfície horizontal, como uma mesa ou prateleira, o widget se inclina suavemente para a pessoa que o coloca. Esse ângulo melhora a legibilidade. Uma sombra é projetada, que dá a sensação de integração ao espaço.

Em uma parede, os widgets ficam nivelados à superfície e projetam uma sombra realista, como uma moldura. Os widgets no visionOS estão sempre em uma moldura, o que conecta o conteúdo digital com o ambiente ao redor.

Ao pensar em quais widgets levar para o visionOS ou criar um do zero, ajuda considerá-los como parte do ambiente em que estão inseridos.

Portanto, crie considerando o contexto. Eles não flutuarão isoladamente, mas estarão em cozinhas, salas, escritórios e outros ambientes. O ambiente molda como widget é visto e usado. Considerar isso desde o início contribui para experiências melhores.

Vamos usar o widget Tempo como exemplo. No visionOS, o formato de Tempo é grande como uma janela. O design prioriza uma representação clara das condições atuais, criando a ilusão de olhar através de uma janela. O texto foi idealizado para ser facilmente lido à distância, garantindo clareza quando fixado na parede. A mudança na escala e presença visual mostra como os widgets podem se adaptar e melhorar os espaços onde estão inseridos. Quando posicionado, o widget fica no lugar, e as pessoas podem adicionar vários. O visionOS permite que várias instâncias do mesmo widget, várias cópias domesmo widget, coexistam em um único ambiente. Quando dispostos na parede, encaixam-se em um layout de grade. Seguir as diretrizes de design multiplataforma garante que o widget se encaixe com outros widgets em uma grade.

Para obter orientações gerais sobre a criação de widgets, consulte a sessão "Criar ótimos widgets" de nosso colega Mac.

Por coexistir no mundo real com o Vision, o comportamento do widget reflete essa integração. Os widgets aparecem atrás de todo o conteúdo virtual, reforçando sua conexão com o ambiente. Eles só se fixam em superfícies físicas, não se fixando nem permanecendo em ambientes virtuais. Agora que cobrimos como os widgets persistem no espaço, vamos explorar sua escala no espaço. O segundo princípio é o tamanho fixo. Para integrar-se bem aos objetos reais, o conteúdo digital deve ser proporcional. Por isso, os widgets no visionOS têm dimensões definidas e consistentes, garantindo perfeita integração, seja na parede, na mesa ou na prateleira.

Assim como em outras plataformas, o visionOS oferece vários modelos de widgets. Mas, aqui, esses tamanhos refletem as dimensões reais. Isso significa que os tamanhos escolhidos têm presença física no ambiente. Faça escolhas conscientes. Pense em onde o widget pode ser colocado, na parede ou ao lado de um espaço de trabalho, e escolha o tamanho adequado a esse contexto. Como os widgets dividem espaço com objetos reais, o layout é essencial. Crie designs com princípios design gráfico ou sinalização, use hierarquia clara, tipografia forte e escala bem planejada para garantir legibilidade a diferentes distâncias. Este exemplo mostra como o tamanho reforça o contexto. Se estiver criando um widget para produtividade, um modelo pequeno pode ser ideal para caber facilmente na mesa. Esse tipo é ideal para uma lista de afazeres, por exemplo. Ele pode ficar ao lado do Mac Virtual Display e permanecer visível enquanto alguém trabalha. Se a intenção for permitir que as pessoas decorem o ambiente no Vision Pro com algo visualmente impactante, como uma obra de arte ou fotografia, o modelo extragrande é a melhor opção. Ele transforma o widget em uma peça de destaque, mais como uma arte na parede do que uma interface. Já exploramos como escolher o tamanho certo do modelo pode encaixar o widget em diferentes contextos. Mas o tamanho não é rígido. As pessoas podem redimensioná-lo. O modelo pode ser redimensionado usando o ajuste no canto, variando de 75% a 125% sem comprometer o layout. Como os widgets podem ser redimensionados e vistos de perto, garanta que seus ativos sejam sempre de alta resolução. Com isso, passarei a palavra para Moritz, que mostrará como tornar os widgets verdadeiramente pessoais, expressivos e adaptáveis a diferentes ambientes. Olá. Sou Moritz. É empolgante mostrar como os widgets no visionOS podem ser personalizados, pelas pessoas e pelas opções que você oferece como desenvolvedor. Essas escolhas permitem uma personalização intuitiva dos widgets que se adaptam à pessoa e ao ambiente.

Vamos explorar melhor como isso acontece. Ao criar o widget, você pode definir sua aparência escolhendo entre dois tratamentos estilísticos. Papel: um estilo de design mais realista, sólido e integrado ao ambiente. Vidro: um estilo mais claro e em camadas, criando profundidade e separação visual entre o primeiro e o segundo planos. Cada um confere uma presença distinta no espaço, e escolher o ideal reforça a experiência que você quer proporcionar. Vamos começar com o Papel. Se você busca uma aparência realista, o Papel é a escolha certa. Esse tratamento faz o widget interagir com a iluminação ambiente, garantindo uma integração natural ao ambiente.

Por exemplo, o widget Music Poster usa o estilo Papel para exibir álbuns e playlists como artes emolduradas na parede.

Visualmente, o estilo Papel tem alguns elementos importantes.

Uma moldura fornecida pelo sistema, o conteúdo que você projeta e controla e um revestimento reflexivo sutil unem os elementos e reagem à luz ambiente. Enquanto o Papel busca integração ao ambiente, o Vidro tem outra abordagem: destacar clareza e contraste, ideal para widgets ricos em informações.

Os elementos em primeiro plano sempre aparecem em cores, independentemente da iluminação ambiente, garantindo nitidez e legibilidade do conteúdo.

O Vidro cria uma separação visual entre o primeiro e o segundo planos, permitindo definir quais elementos da interface interagem com o ambiente e quais permanecem constantes.

No widget News, as imagens editoriais ficam em segundo plano com uma impressão suave, enquanto as manchetes ficam em primeiro plano, sempre nítidas e fáceis de ler.

O estilo Vidro combina várias camadas para criar profundidade, clareza e uma presença marcante no espaço.

A moldura do sistema ancora o widget à superfície. O fundo, ou apoio, fica atrás do conteúdo e pode ser totalmente personalizado.

A camada dupla de interface dá profundidade sutil. É uma versão mais escura e sombreada da interface, posicionada atrás do conteúdo principal.

A camada da interface abriga o conteúdo principal, como texto, glifos e gráficos. Elementos que devem permanecer claros, nítidos e legíveis.

A camada de revestimento oferece um acabamento leve e reflexivo, permitindo que o widget reaja à luz ambiente. Juntas, essas camadas formam a estrutura visual do estilo Vidro, proporcionando clareza, profundidade e flexibilidade.

Agora que exploramos a estrutura visual de um widget, vamos descobrir como personalizá-los ainda mais, começando pela cor. O visionOS oferece várias paletas que funcionam em diversos ambientes. São sete opções claras e sete escuras, permitindo o ajuste do estilo sem tirar o destaque do widget em qualquer ambiente. Ao criar seu widget, é importante testar o conteúdo em toda a gama de paletas de cores do sistema.

Os widgets não tem tonalidade, exibindo fielmente as cores originais do design.

Uma vez colocados, é possível personalizá-los com uma cor na interface de configuração.

Você pode decidir se o fundo do widget também ganhará um tom. Se decidir que não para preservar uma foto ou ilustração, certifique-se de que ele ainda combine com a paleta de cores escolhida. E lembre-se: a moldura do widget é sempre colorida e não pode ser excluída. Cor e estilo ajudam o widget a se encaixar no ambiente. Mas os materiais também influenciam a percepção conforme a luz muda.

O Papel escurece com o ambiente para manter a integração visual. O Vidro mantém os elementos brilhantes e legíveis, mesmo com pouca luz.

Assim como os materiais ajudam os widgets a se integrarem à iluminação, os estilos de montagem definem a relação com o espaço ao redor.

O posicionamento de um widget na parede influencia sua percepção, seja como um objeto em exposição ou uma vista para algo além. O visionOS disponibiliza dois estilos de montagem: Elevado e Embutido, que fica dentro da parede.

O estilo Embutido cria a ilusão de um recorte na parede, com o conteúdo voltado para o espaço.

É ideal para conteúdo imersivo ou ambiental, como previsão do tempo ou imagens editoriais, em que a profundidade aprimora a experiência.

O estilo Elevado coloca o widget na superfície da parede, como uma moldura. É ideal para conteúdo que deve se destacar e ficar fixos, como lembretes, mídias ou informações rápidas.

Os widgets usam o estilo Elevado por um bom motivo. Funciona bem em superfícies verticais e horizontais, sendo uma opção versátil para vários tipos de widget.

Quando colocado em uma superfície horizontal, como uma mesa, o widget sempre usa o estilo Elevado para manter uma apresentação consistente.

O estilo Embutido cria uma sensação de profundidade, como no widget Tempo, que parece a uma janela para outro ambiente. Ele é disponibilizado apenas em superfícies verticais, pois depende de um alinhamento que não funcionaria em mesas. O estilo Embutido pode ser desativado ou exclusivo. Mas lembre-se de que isso elimina o posicionamento horizontal. Outra maneira de personalizar a aparência de um widget é ajustando a largura da moldura.

Há cinco opções disponíveis, independentes do tamanho do modelo, variando de fina a espessa.

Teste o layout em todas as larguras para garantir o equilíbrio. Lembre-se de que, no estilo Embutido, a largura da moldura é fixa e não pode ser personalizada.

Largura da moldura, estilo de montagem e tonalidade estão na interface de personalização, para cada pessoa ajustar o widget de acordo com seu estilo e espaço.

O sistema oferece opções padrão, mas permite ampliar a interface com ajustes personalizados para seu design.

Por exemplo, o widget Music Poster disponibiliza temas claros e escuros gerados pela arte do álbum, além de uma opção automática que adapta o tom conforme a hora do dia.

Exponha parâmetros como esses para oferecer personalização relevante ao conteúdo, tornando o widget mais expressivo e adaptável. Exploramos como os widgets são personalizados, estilizados e posicionados no ambiente.

Há mais um recurso que faz com que os widgets do visionOS realmente se destaquem: a detecção de proximidade. Ele envia ao widget um sinal poderoso: a proximidade da pessoa. Com isso, o widget ajusta a densidade das informações em tempo real, mantendo a legibilidade, a relevância e o detalhamento, esteja a pessoa visualizando de perto ou de longe.

O visionOS define dois limites fundamentais para o design.

Padrão, quando o widget é visto de perto, e Simplificado, quando é visto de longe. Para usar ambas as opções, basta fazer ajustes no layout, como reduzir os detalhes ou modificar o tamanho da fonte, para manter o conteúdo visível a qualquer distância.

Por exemplo, no widget Sports, apenas os detalhes essenciais são vistos de longe.

Quando alguém se aproxima, informações mais detalhadas do jogo são reveladas.

Para proporcionar uma experiência fluida e uniforme, procure manter elementos comuns entre os dois limites de distância sempre. Isso mantém a continuidade do layout, ajustando o tamanho de cada elemento para garantir legibilidade a qualquer distância. Adaptar o layout é importante, mas a proximidade também afeta a interação das pessoas com o widget.

Os widgets oferecem interações rápidas e intuitivas. Por exemplo, você pode incluir um botão para exibir detalhes extras de um jogo de beisebol ao vivo.

Use a detecção de proximidade para garantir que as áreas interativas do widget sejam facilmente acessadas, independentemente da distância da pessoa. Se o widget não incluir interação, um toque abrirá o app como um atalho rápido.

Então, como você deve usar a detecção de proximidade? Ela não é necessária para todo widget, mas adaptar-se à distância pode melhorar a clareza.

Pense nisso como um design responsivo, em que o tamanho angular, não a tela, muda conforme a proximidade da pessoa. O layout se ajusta para mostrar o nível certo de detalhes.

Exploramos como os widgets no visionOS podem ocupar espaços, reagir ao ambiente e até se ajustar à proximidade das pessoas.

Do layout e materiais à interação e personalização, há muitas oportunidades para criar algo útil e genuinamente pessoal.

Antes de terminar, é preciso se lembrar de alguns pontos essenciais.

Reflita como o conteúdo pode se encaixar nesse novo contexto. Se o app já tem widgets, descubra como eles podem ter um novo significado no ambiente de outra pessoa. E se você estiver criando uma experiência nativa para o visionOS, pense em quais tipos de conteúdo visível e contínuo podem oferecer valor real no dia.

Para saber mais sobre os detalhes técnicos e como integrar widgets ao seu app, confira "Novidades do WidgetKit". O visionOS agora abre caminho para uma nova dimensão de widgets. E mal esperamos para saber o que você vai criar! Agradecemos a participação. O restante é sobre espaçamento, estilo e saber quando parar. Vielen Dank!