Visão geral de widgets

Windows Widgets são pequenos contêineres de interface do usuário que exibem texto e gráficos, associados a um aplicativo instalado no dispositivo. Os widgets instalados são exibidos em uma grade no Painel de Widgets: um painel de submenu que se sobrepõe na área de trabalho do Windows quando o usuário clica no ícone Widgets na barra de tarefas, usa o atalho Windows+W ou desliza da borda esquerda para a direita da tela. Os widgets ajudam as pessoas a estarem sempre atualizadas com assuntos importante para elas agregando conteúdo personalizado e ações rápidas dos aplicativos que usam. Eles podem ser consumidos e acionados rapidamente. Os widgets não são destinados a substituir aplicativos e sites, mas sim fornecer acesso descomplicado às informações mais relevantes ou às funcionalidades mais usadas, que as pessoas podem acessar ou ativar instantaneamente. Ao criar um widget, considere o tipo de valor que ele oferecerá aos consumidores. 

Captura de tela do Painel de Widgets. O painel é um retângulo arredondado com o horário exibido na parte superior, seguido por uma barra de pesquisa. O restante do painel é uma grade de retângulos arredondados, cada um representando um widget. Os widgets individuais mostram as principais notícias, o clima atual, o tráfego atual e outras informações.

Terminologia de widgets

Termo Definição
Host de widgets Um aplicativo que exibe e gerencia widgets Windows. O Widgets Board integrado ao Windows 11 é um host de widget.
Painel de Widgets O Widgets Board é um componente do sistema de Windows 11 exibido na área de trabalho quando o usuário clica no ícone widgets na barra de tarefas, usa o atalho Windows+W ou passa o dedo da borda esquerda da tela. O Quadro de Widgets exibe os widgets e gerencia seu layout no quadro.
Widget Um pequeno contêiner de interface do usuário que apresenta conteúdo ou ações de um aplicativo. Você pode definir seu conteúdo com um Cartão Adaptável ou exibir HTML de uma URL com um provedor de widget Web. Os widgets fornecem informações e ações rapidamente, com links para seu aplicativo para tarefas mais detalhadas.
Provedor de widget Um provedor de widget é um aplicativo Windows que fornece conteúdo a ser exibido no widget. O provedor de widget tem o conteúdo, o layout e os elementos interativos do widget.

Importante

Os widgets da Web estão disponíveis apenas para usuários do Espaço Econômico Europeu (EEE). Verifique os requisitos de widget da Web antes de selecionar o conteúdo HTML.

Diretrizes sobre design de widgets

Para um widget Adaptive Card, defina os elementos visuais e interativos em um modelo JSON do Cartões Adaptáveis. Use o designer de Cartões Adaptáveis para editar o cartão e, em seguida, valide as propriedades, tamanhos, temas e ações do host específicos do Windows no Quadro de Widgets. As opções de renderizador e host do Designer não substituem o teste no Windows. Para um widget da Web, projete o conteúdo HTML para os requisitos de tamanho, tema e interação do widget; o Designer de Cartões Adaptáveis não edita esse HTML.

Ambas as abordagens de renderização devem seguir os princípios de design do widget abaixo. Para configuração de conteúdo da Web, solicitações de recursos e mensagens, consulte provedores de widget da Web.

Para obter um passo a passo detalhado dos elementos visuais de um widget, confira Estados do widget e componentes internos da interface do usuário.

Princípios dos widgets

Para criar ótimos widgets Windows, considere os seguintes princípios à medida que você projeta e desenvolve seus widgets:

Visão geral

Um widget deve entregar imediatamente seu valor primário ao usuário.

Objetivo & Útil

Um widget deve servir a uma finalidade clara e primária.

Previsível e calmo

Os comportamentos e padrões de um widget ajudam os usuários a concluir tarefas previsivelmente.

Ancorado no usuário

Um widget deve refletir as necessidades, as preferências e as intenções do usuário. O conteúdo deve ser baseado nos próprios dados do usuário ou em interesses explicitamente declarados.

Tempestiva

Um widget deve exibir informações relevantes no momento certo e no contexto certo.

Como planejar a experiência de widget do aplicativo

  1. Com base em sua compreensão sobre os clientes, identifique o conteúdo mais importante ou as ações mais úteis que os usuários podem acessar rapidamente sem abrir o aplicativo ou o site. Considere os princípios enumerados na seção Princípios do widget e pense em como eles podem se aplicar ao aplicativo.
  2. O aplicativo pode dar suporte a vários widgets individuais. Determine o número de widgets separados aos quais que você dará suporte para que cada widget se concentre em uma finalidade específica.
  3. Determine o conteúdo que você quer incluir para cada widget. Um só widget pode dar suporte a três tamanhos diferentes: pequeno, médio e grande. Para cada widget, pense em qual conteúdo traria mais valor para os usuários e as necessidades de negócios. Para cada tamanho, de pequeno para grande, a finalidade do widget deve permanecer a mesma, mas a quantidade de informações exibidas deve se expandir com tamanhos maiores. Recomendamos que os provedores de widget implementem todos os tamanhos de widget para dar aos usuários a flexibilidade de personalizar o layout do widget.
  4. Pense nas interações do usuário que o widget oferecerá. Os usuários podem clicar no título do widget ou em qualquer destino de clique definido no widget. Essas interações podem ativar atalhos de link profundo no aplicativo ou no site que levam os usuários diretamente ao conteúdo de interesse, para que não precisem navegar desde a raiz do aplicativo. Considere os diferentes modelos de navegação oferecidos.
  5. Escolha a implementação do provedor e o formato de conteúdo. Um aplicativo de área de trabalho Win32 empacotado pode fornecer conteúdo do Adaptive Card ou usar as APIs de widget da Web para exibir HTML. Um PWA (Aplicativo Web Progressivo) usa definições de widget em seu manifesto do aplicativo Web e manipula eventos em um service worker. Consulte provedores de Widget, provedores de widget Web ou Criar widgets orientados por PWA para o caminho de implementação correspondente.

Nesta seção

Estados e UI do widget

Conceitos básicos de design de widgets

Design de interação de widget

Criar um modelo de widget com o designer Cartões Adaptáveis

Integrar com o seletor de widget

Consulte também