Partilhar via

Diretrizes de design de interação do widget

  • Artigo

Observação

Algumas informações relacionam-se ao produto de pré-lançamento, o qual poderá ser substancialmente modificado antes do lançamento comercial. A Microsoft não oferece nenhuma garantia, explícita ou implícita, quanto às informações fornecidas aqui.

Importante

O recurso descrito neste tópico está disponível nas compilações de pré-visualização do Canal do Desenvolvedor do Windows, começando com a compilação 25217. Para saber mais sobre compilações de pré-visualização do Windows, confira Windows 10 Insider Preview.

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 fornecer uma ou mais frases de chamariz. Quando o usuário clica em uma frase de chamariz, o widget deve iniciar o aplicativo ou site associado em vez de implementar 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 o clima por vários dias, mas clicar em um dos dias não expandirá os detalhes embutidos, mas iniciará o aplicativo ou a Web.

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
small 1
medium 3
large 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 em resposta a um cursor

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 é recolhido. Na imagem à direita, o menu suspenso é expandido e se estende sobre a borda do widget

Os widgets podem se estender um pouco além do tamanho do widget temporariamente se o usuário estiver interagindo com um menu ou menu suspenso. O comportamento do menu deve ser leve e fechar o menu se um usuário clicar fora do menu / área suspensa.