Partilhar via

Fundamentos do design do widget

Este artigo fornece orientações detalhadas para projetar a interface do usuário para um widget do Windows.

Tamanhos dos widgets

Uma captura de tela mostrando modelos de widget 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 meteorologia. 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. Recomenda-se que crie e considere todos os 3 tamanhos e adapte o seu design especificamente para cada tamanho. Os tamanhos pequenos e médios proporcionam uma melhor capacidade de descoberta, uma vez que são apresentados 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 flexibilidade na personalização dos widgets que escolhem fixar no quadro de widgets.

Pequeno

Os princípios do widget visualizáveis e focados se tornam 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 todas as funcionalidades que poderiam caber confortavelmente em um widget grande. Concentre-se numa interação do utilizador ou nas informações essenciais que podem ser exibidas aqui com 1 alvo tátil.

Média

O widget de tamanho médio permite mais espaço em comparação com o pequeno, e assim mais funcionalidade ou informações adicionais podem ser incluídas. O widget médio também pode fornecer a mesma experiência focada que o widget pequeno, mas fornecer alvos de toque 2-3.

Grande

Tamanhos grandes permitem que mais informações sejam apresentadas, mas o conteúdo ainda deve ser focado e facilmente consumível. Alternativamente, um cartão de tamanho grande pode destacar uma imagem ou tópico e ter uma experiência mais imersiva. O tamanho grande deve ter no máximo 3 a 4 áreas de toque.

Cor e temática

Três modelos de widget de exemplo demonstrando o tema leve. O primeiro é um widget vazio com um backgronud branco. O segundo é um widget vazio com um fundo de gradiente claro. O terceiro é um widget com um 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 backgroud preto. O segundo é um widget vazio com um fundo gradiente escuro. O terceiro é um widget com um fundo de imagem. Todos os três têm a palavra

O Windows 11 suporta dois modos de cor: claro e escuro. Cada modo consiste em um conjunto de valores de cor neutra que são ajustados automaticamente para garantir o contraste ideal. Para cada tamanho de widget suportado, 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 plano de fundo do widget suporta personalização com um fundo sólido claro/escuro, tonalidade gradiente 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 fundo gradiente claro e texto em uma fonte preta escura. A imagem é marcada com uma verificaçã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 fundo colorida 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 fundo de cor dessaturada e texto em uma fonte preta escura. A imagem é marcada com uma verificação verde para indicar que o alto contraste torna o texto legível.

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

As Web Content Accessibility Guidelines (WCAG) 2.0 nível AA requer uma relação de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. As WCAG 2.1 requerem uma relação de contraste de pelo menos 3:1 para componentes gráficos e da interface do utilizador (tais como bordas de entrada de formulário). WCAG Nível AAA requer uma relação 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 disso, há um diagrama de um widget onde a área dentro das margens é colorida em azul para mostrar a área de conteúdo.

Cada widget tem uma margem de 16px em torno dele e uma área de atribuição de 48px onde não pode ser colocado conteúdo. O único componente que pode estar na margem do lado direito e na margem inferior é os pontos de paginação. Para obter exemplos do posicionamento dos pontos de paginação, consulte a seção de paginação do Widget interaction design guidance.

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

Para widgets que usam contêineres, a calha entre cada elemento é de 4px, e os contêineres devem tocar nas 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 perfeito em pixels em diferentes resoluções de tela.

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

Tipografia

Duas sequências da frase

Uma tabela mostrando texto de exemplo para diferentes elementos de tipo de um widget. A tabela é recriada em texto simples 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 cartões adaptáveis
Legenda 12/16 epx Pequeno, mais leve
Corpo 14/20 epx Padrão, mais leve
Corpo (para hiperligações) 14/20 epx Padrão, mais leve, acento
Corpo Forte 14/20 epx Padrão, mais ousado
Corpo Grande 18/24 epx Médio, mais leve
Corpo Maior 18/24 EPX Médio, mais ousado
Subtítulo 20/28 EPX Grande, mais ousado
Título 28/36 epx Extra grande, mais ousado

Segoe UI é o tipo de letra usado em Widgets e em todo o Windows. A rampa de tipos acima inclui as formulações de como definir corretamente os estilos certos no Adaptive Cards Designer. O estilo do tipo de letra não deve desviar-se das fórmulas especificadas acima. Para obter mais informações sobre como usar o Adaptive Cards Designer para criar modelos de widget, consulte Criar um modelo de widget com o Adaptive Card Designer.

Dois exemplos de widgets com a frase

Dentro do Adaptive Cards Designer, os títulos e o texto principal 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 destaque é usada apenas para hiperlinks.

Iconografia

Fotos de perfil

Quatro ocorrências de uma foto de perfil circular em tamanhos decrescentes da esquerda para a direita. As imagens são rotuladas como

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

Dicas de ferramentas

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

As dicas de ferramentas podem ser usadas quando o texto do título é truncado no widget. Para as práticas recomendadas, o texto deve caber perfeitamente dentro do espaço do widget e não precisa de truncamento, no entanto, isso nem sempre pode 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 em um widget.

  • Last updated on