Diretrizes de design de interação do widget

Este artigo fornece diretrizes detalhadas para criar interação para widgets do Windows.

Um widget deve ser visível e focado e deve representar um único aspecto da finalidade principal do aplicativo. Os widgets podem apresentar uma ou mais chamadas para ação. Quando o usuário clicar em uma chamada para ação, o widget deverá abrir o aplicativo ou site associado, em vez de executar a ação no próprio widget. Um widget tem apenas uma página principal que pode abrigar várias interações. Clicar em um item no widget nunca deve levá-lo a uma visualização completamente diferente do widget. Por exemplo, em um widget de clima, você pode mostrar a previsão para vários dias, mas, ao clicar em um desses dias, os detalhes não serão expandidos ali mesmo no widget; em vez disso, o app ou a versão web será aberto.

Veja a seguir o número máximo de pontos de toque recomendados para cada tamanho de widget compatível.

Tamanho do widget Máximo de pontos de contato
pequeno 1
meio 3
grande 4

Os seguintes elementos de navegação não são suportados em Widgets do Windows:

  • Os pivôs não serão suportados em widgets
  • Páginas L2 não serão suportadas em widgets
  • A rolagem vertical ou horizontal não será suportada em Widgets

Contêineres

As imagens a seguir mostram exemplos de usos de elementos de contêiner em um modelo de widget. Os contêineres agrupam elementos visuais em colunas e linhas para criar uma estrutura de grade hierárquica.

Quatro imagens de widgets que ilustram contêineres. Os widgets nas imagens têm elementos divididos em linhas e colunas para fornecer uma estrutura de grade hierárquica.

As imagens a seguir mostram exemplos de usos de elementos de link de imagem em um modelo de widget.

Duas imagens de widgets que ilustram links de imagens. As imagens são organizadas em colunas e linhas formando uma grade.

Paginação

As imagens a seguir mostram exemplos de paginação em um modelo de widget. Os controles de paginação podem ser alinhados horizontal ou verticalmente. As setas de navegação aparecem ao passar o cursor sobre o elemento.

Este conjunto de duas imagens mostra paginação horizontal. Na primeira imagem, uma coluna de pontos está alinhada ao longo do lado direito. Um ponto é maior para indicar a página ativa no momento. Na segunda imagem, um cursor passa o mouse sobre uma seta apontando para baixo na parte inferior do widget que permite que o usuário vá para a próxima página. Há uma seta apontando para cima correspondente na parte superior do widget para navegar até a página anterior.

Este conjunto de duas imagens mostra paginação vertical. Na primeira imagem, uma linha de pontos está alinhada ao longo da parte inferior. Um ponto é maior para indicar a página ativa no momento. Na segunda imagem, um cursor passa o mouse sobre uma seta apontando para a direita no lado direito do widget que permite que o usuário vá para a próxima página. Há uma seta apontando para a esquerda correspondente no lado esquerdo do widget para navegar até a página anterior.

Essas duas imagens demonstram como os controles de paginação ficam quando o widget tem um plano de fundo de imagem.

As imagens a seguir mostram um exemplo de hiperlinks em um modelo de widget.

Duas imagens de widgets que ilustram hiperlinks. A primeira imagem mostra uma sequência de texto com hiperlink. O texto é simples. Na segunda imagem, um cursor do mouse passa sobre o hiperlink, o que faz com que o texto seja sublinhado.

Uma imagem mostrando um hiperlink centralizado na parte inferior do widget, logo acima da linha horizontal de pontos de paginação. Um X vermelho indica que os pontos de paginação e o hiperlink não devem estar no mesmo espaço. À direita, outra imagem mostra o hiperlink na parte inferior, mas os pontos de paginação estão alinhados verticalmente em uma coluna do lado direito. Uma marca verde indica que esse posicionamento dos dois elementos está correto.

Duas imagens de widgets que ilustram menus suspensos. Na imagem à esquerda, o menu suspenso está recolhido. Na imagem à direita, o menu suspenso está expandido e se estende além da borda do widget

Os widgets podem se expandir ligeiramente além de suas dimensões temporariamente se o usuário estiver interagindo com um menu ou uma lista suspensa. O comportamento do menu deve ser leve e fechar o menu se um usuário clicar fora da área menu/menu suspenso.

  • Last updated on