Conceitos básicos de design de widgets

Este artigo fornece diretrizes detalhadas para criar a interface do usuário para um widget Windows.

Tamanhos de widget

Uma captura de tela mostrando modelos de widgets em branco ilustrando tamanhos pequenos, médios e grandes. Uma captura de tela mostrando exemplos de tamanhos pequenos, médios e grandes para um widget de clima. Uma captura de tela mostrando exemplos de tamanhos pequenos, médios e grandes para um widget de tráfego.

Os widgets fornecem três tamanhos para o usuário escolher. É recomendável que você crie e considere todos os três tamanhos e adapte seu design especificamente para cada tamanho. Tamanhos pequenos e médios fornecem melhor capacidade de descoberta, pois são exibidos com mais frequência no feed dinâmico. Tamanhos grandes são úteis para exibir informações mais detalhadas. O suporte a vários tamanhos permite aos usuários a flexibilidade de personalizar os widgets que eles optam por fixar no quadro de widgets.

Pequeno

Os princípios de widget relanceável e focalizado tornam-se mais importantes nas decisões de design tomadas para o widget de tamanho pequeno. O widget de tamanho pequeno não deve tentar forçar toda a funcionalidade que poderia caber confortavelmente em um widget grande. Concentre-se em uma interação do usuário ou em uma informação importante que pode ser exibida aqui com um alvo de toque.

Médio

O widget de tamanho médio permite mais espaço em comparação com o pequeno e, portanto, mais funcionalidade ou informações adicionais podem ser incluídas. O widget médio também pode fornecer a mesma experiência focalizada que o widget pequeno, mas fornecer de dois a três destinos de toque.

Grande

Tamanhos grandes permitem que mais informações sejam apresentadas, mas o conteúdo ainda deve ser focalizado e facilmente consumível. Como alternativa, um cartão grande pode destacar uma imagem ou tópico e proporcionar uma experiência mais imersiva. O tamanho grande não deve ter mais do que três a quatro destinos de toque.

Cor e temas

Três modelos de widget de exemplo demonstrando o tema claro. O primeiro é um widget vazio com um plano de fundo branco. O segundo é um widget vazio com um plano de fundo gradiente claro. O terceiro é um widget com um plano de fundo de imagem. Todos os três têm a palavra

Três modelos de widget de exemplo demonstrando o tema escuro. O primeiro é um widget vazio com um plano de fundo preto. O segundo é um widget vazio com um plano de fundo gradiente escuro. O terceiro é um widget com um plano de fundo de imagem. Todos os três têm a palavra

Windows 11 dá suporte a dois modos de cor: claro e escuro. Cada modo consiste em um conjunto de valores de cores neutras que são ajustados automaticamente para garantir o contraste ideal. Para cada tamanho de widget compatível, certifique-se de criar designs separados para temas claros e escuros para que o widget se integre perfeitamente ao sistema operacional mais amplo e à escolha de tema do usuário. O fundo do widget suporta personalização com um fundo claro/escuro sólido, gradiente de cor ou fundo de imagem.

Dois exemplos de widgets lado a lado. O exemplo à esquerda tem um plano de fundo gradiente claro e texto em uma fonte cinza claro. A imagem é marcada com um X vermelho para indicar que o baixo contraste torna o texto ilegível. A imagem à direita tem um plano de fundo gradiente claro e texto em uma fonte preta escura. A imagem possui uma marca de seleção verde para indicar que o alto contraste torna o texto legível.

Dois exemplos de widgets lado a lado. O exemplo à esquerda tem uma imagem de plano de fundo com cor altamente saturada e texto em uma fonte escura. A imagem é marcada com um X vermelho para indicar que o baixo contraste torna o texto ilegível. A imagem à direita tem um plano de fundo com cor sem saturação e texto em uma fonte preta escura. A imagem possui uma marca de seleção verde para indicar que o alto contraste torna o texto legível.

Ao escolher cores, imagens e conteúdo de tela de fundo, verifique se há contraste de cores suficiente para garantir a legibilidade e a acessibilidade.

O nível AA do WCAG (Diretrizes de Acessibilidade de Conteúdo da Web) 2.0 requer uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O WCAG 2.1 requer uma taxa de contraste de pelo menos 3:1 para elementos gráficos e componentes de interface do usuário (como bordas de entrada de formulário). O Nível AAA do WCAG requer uma taxa de contraste de pelo menos 7:1 para texto normal e 4,5:1 para texto grande. O texto grande é definido como 14 pontos (normalmente 18,66 px) e negrito ou maior, ou 18 pontos (normalmente 24 px) ou maior.

Margens

Um diagrama de um widget com diretrizes indicando as margens. Ao lado, há um diagrama de um widget em que a área dentro das margens possui cor azul para mostrar a área de conteúdo.

Cada widget tem uma margem de 16px ao seu redor e uma área de Atribuição de 48px na qual o conteúdo não pode ser colocado. O único componente que pode viver na margem direita e na margem inferior são os pontos de paginação. Para obter exemplos do posicionamento dos pontos de Paginação, consulte a seção de Paginação do Diretrizes de design de interação do widget.

Dois exemplos de widgets lado a lado. A imagem à esquerda mostra linhas guia dividindo o widget em três colunas, ilustrando espaçamento de 4 pixels entre as colunas. A imagem à direita mostra linhas guia dividindo o widget em três linhas, ilustrando espaçamento de 4 pixels entre as linhas.

Para widgets que usam contêineres, o espaçamento entre cada elemento é de 4px, e os contêineres devem tocar as bordas das margens. Seu conteúdo também deve usar valores de espaçamento e dimensionamento de Múltiplos de Quatro Px para obter um design limpo e de pixel perfeito em diferentes resoluções de tela.

Você também deve consultar as diretrizes para espaçamento e margens nas Noções básicas de design de conteúdo para aplicativos do Windows ao projetar seu conteúdo.

Tipografia

Duas cadeias de caracteres da frase

Uma tabela que mostra texto de exemplo para diferentes elementos de tipo de um widget. A tabela é recriada em texto sem formatação sem a aparência renderizada dentro do texto abaixo da imagem.

Para acessibilidade, a tabela a seguir apresenta o texto da tabela mostrada na imagem acima.

Exemplo Tamanho/altura da linha Fórmula de cartas adaptativas
Legenda 16/12 epx Pequeno, Mais Leve
Corpo 14/20 epx Padrão, Mais Leve
Corpo (para hiperlinks) 14/20 epx Padrão, Mais Leve, Ênfase
Corpo Forte 14/20 epx Padrão, Negrito Mais Escuro
Corpo Grande 18/24 epx Médio, Mais Leve
Corpo maior 18/24 epx Médio, Negrito
Subtítulo 20/28 epx Grande, Negrito
Título 28/36 de epx Extra Grande, Mais Negrito

Segoe UI é a fonte usada em Widgets e no Windows. A rampa de tipo acima inclui as formulações de como definir corretamente os estilos certos no Designer Cartões Adaptáveis. O estilo de tipografia não deve desviar das fórmulas mencionadas acima. Para obter mais informações sobre como usar o Designer de Cartões Adaptáveis para criar modelos de widget, consulte Criar um modelo de widget com o Designer Cartões Adaptáveis.

Dois widgets de exemplo com a frase

No Designer de Cartões Adaptativos, os títulos e o texto do corpo usam a cor padrão associada ao tema do widget. Uma opção adicional para diferenciar ainda mais o título do texto do corpo é usar a versão sutil da cor padrão. A cor de ênfase é usada apenas para hiperlinks.

Iconografia

Imagens de perfil

Quatro instâncias de uma imagem de perfil circular em tamanhos decrescentes da esquerda para a direita. As imagens estão rotuladas como

Se o widget incluir a exibição de perfis de usuário (por exemplo, um feed de mídia social ou stream) use um dos seguintes tamanhos de perfil circulares permitidos: 96x96px, 48x48px, 32x32px ou 24x24px.

Dicas de ferramenta

Uma imagem de um widget de calendário mostrando um compromisso no calendário. O cursor do mouse está passando sobre a linha de assunto do compromisso, que está truncada, e uma dica de ferramenta mostra a linha de assunto completa.

As dicas de ferramenta podem ser usadas quando o texto do cabeçalho é truncado no widget. Para práticas recomendadas, o texto deve se ajustar perfeitamente no espaço do widget e não precisar de truncamento, no entanto, isso pode nem sempre acontecer dependendo de cenários como localização de idioma, dimensionamento de texto do sistema ou ao citar algo (ou seja, título do artigo, nome de uma música). Isso não se aplica ao corpo de texto de um widget.

  • Last updated on