Orientação para design de interação de widgets

Este artigo fornece orientações detalhadas para desenhar interação para widgets do Windows.

Um widget deve ser visível e focado, e deve representar um único aspeto do propósito principal da aplicação. Os widgets podem fornecer uma ou mais chamadas à ação. Quando o utilizador clica num call to action, o widget deve lançar a aplicação ou site associado em vez de implementar a ação no próprio widget. Um widget tem apenas uma página principal que pode albergar múltiplas interações. Clicar num item no widget nunca deve levar-te a uma vista completamente diferente do widget. Por exemplo, num widget de meteorologia podes mostrar o tempo de vários dias, mas clicar num dos dias não expande os detalhes online, mas sim abre a aplicação ou a web.

Segue-se o número máximo de pontos de contacto recomendados para cada tamanho de widget suportado.

Tamanho do widget Pontos de contacto máximos
pequeno 1
meio 3
grande 4

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

  • Pivots não serão suportados dentro dos widgets
  • As Páginas L2 não serão suportadas dentro dos widgets
  • O scroll vertical ou horizontal não será suportado nos Widgets

Contentores

As imagens seguintes mostram exemplos de utilizações de elementos de contentores num modelo de widget. Os contentores agrupam elementos visuais em colunas e linhas para criar uma estrutura hierárquica em grelha.

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

As imagens seguintes mostram exemplos de utilização de elementos de ligação de imagem num modelo de widget.

Duas imagens de widgets que ilustram ligações de imagens. As imagens estão organizadas em colunas e filas formando uma grelha.

Pagination

As imagens seguintes mostram exemplos de paginação num template de widget. Os controlos de paginação podem ser alinhados horizontal ou verticalmente. As setas de navegação aparecem em resposta ao passar o cursor.

Este conjunto de duas imagens mostra a 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 atualmente ativa. Na segunda imagem, um cursor passa o rato sobre uma seta apontando para baixo na parte inferior do widget, permitindo ao utilizador avançar para a página seguinte. Existe uma seta correspondente que aponta para cima no topo do widget para navegar até à página anterior.

Este conjunto de duas imagens mostra paginação vertical. Na primeira imagem, uma fila de pontos está alinhada ao longo da parte inferior. Um ponto é maior para indicar a página atualmente ativa. Na segunda imagem, um cursor passa o rato sobre uma seta apontada para a direita no lado direito do widget, permitindo ao utilizador avançar para a página seguinte. Existe uma seta correspondente apontando para a esquerda no lado esquerdo do widget para navegar até à página anterior.

Estas duas imagens demonstram como os controlos de paginação ficam quando o widget tem fundo de imagem.

As imagens seguintes mostram exemplos de hiperligações num modelo de widget.

Duas imagens de widgets que ilustram hiperligações. A primeira imagem mostra uma sequência de texto com hiperligação. O texto é simples. Na segunda imagem, um cursor do rato paira sobre o hiperlink, o que faz com que o texto fique sublinhado.

Uma imagem que mostra um hiperlink centrado 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 numa coluna do lado direito. Um check verde indica que esta colocação dos dois elementos está correta.

Duas imagens de widgets que ilustram menus suspensos. Na imagem da esquerda, o menu suspenso está colapsado. Na imagem da direita, o menu suspenso é expandido e estende-se sobre a borda do widget

Os widgets podem estender-se temporariamente ligeiramente para além das suas dimensões se o utilizador estiver a interagir com um menu ou uma lista pendente. O comportamento do menu deve ser uma rejeição leve e fechar o menu se o utilizador clicar fora do menu / área suspensa.

  • Last updated on