Elementos gráficos

Elementos gráficos mostram relações, hierarquia e ênfase visualmente. Eles incluem planos de fundo, faixas, vidro, agregadores, separadores, sombras e alças.

Um exemplo com vários tipos de elementos gráficos.

Elementos gráficos geralmente não são interativos. No entanto, separadores são interativos para conteúdo redimensionável e identificadores são gráficos que mostram interatividade.

Observação: Diretrizes relacionadas a caixas de grupo, animações , ícones e de identidade visual são apresentadas em artigos separados.

Essa é a interface do usuário certa?

Embora os elementos gráficos sejam um meio visual forte de indicar relações, o uso excessivo deles adiciona desordem visual e reduz o espaço disponível em uma superfície. Eles devem ser usados com moderação.

Uma tendência de design no Microsoft Windows é uma aparência mais simples e limpa eliminando elementos gráficos e linhas desnecessários.

Para decidir se um elemento gráfico é necessário, considere estas perguntas:

• A apresentação e a comunicação do design são tão claras e eficazes sem o elemento? Em caso afirmativo, remova-o.
• Você pode comunicar efetivamente as relações usando o layout sozinho? Nesse caso, use layout em vez disso. Você pode colocar controles relacionados um ao lado do outro e colocar espaçamento extra entre controles não relacionados. Você também pode usar recuo para mostrar relações hierárquicas.

Neste exemplo, o layout sozinho é usado para mostrar relações de controle.

• A comunicação é eficaz sem texto? Caso contrário, use uma caixa de grupo , separador rotulado ou outro rótulo .

Padrões de uso

Elementos gráficos têm vários padrões de uso:

Elemento	Descrição
Ilustrações gráficas use para comunicar uma ideia visualmente.	Ilustrações gráficas são semelhantes a ícones, exceto que podem ter qualquer tamanho e geralmente não são interativas. Neste exemplo, uma ilustração gráfica é usada para sugerir a natureza de um recurso.
de planos de fundo use para enfatizar ou desenfatizar diferentes tipos de conteúdo.	Planos de fundo podem ser usados para enfatizar conteúdo importante. de fundo vermelho neste exemplo, uma tela de fundo é usada para enfatizar uma tarefa importante. planos de fundo também podem ser usados para desenfatizar o conteúdo secundário. Neste exemplo, as tarefas secundárias são desacentadas localizando-as em um painel de tarefas.
faixas usado para indicar status importante.	Em contraste com os planos de fundo, as faixas enfatizam principalmente uma única cadeia de caracteres de texto. Neste exemplo, uma faixa é usada para indicar que as configurações da página são controladas pela Política de Grupo.
de Vidro use estrategicamente para reduzir o peso visual de uma janela.	O vidro pode reduzir o peso de uma superfície concentrando-se no conteúdo em vez da própria janela. Neste exemplo, o glass concentra a atenção do usuário no conteúdo em vez dos controles.
agregadores use para criar uma relação visual entre controles fortemente relacionados.	neste exemplo, um plano de fundo agregador é usado para enfatizar a relação entre os botões voltar e encaminhar no Explorer. Neste exemplo, um agregador de limites é usado para enfatizar a relação entre os controles e fazer com que eles se sintam como um único controle em vez de oito.
separadores de use para separar controles fracos relacionados ou não relacionados.	Separadores podem ser interativos ou não interativos. separadores interativos entre conteúdo redimensionável são conhecidos como divisores. neste exemplo, um separador interativo é usado para conteúdo redimensionável. de informações do navegador Neste exemplo, o separador não é interativo.
sombras use para fazer com que o conteúdo se destaque visualmente em sua tela de fundo.	Neste exemplo, as sombras fazem com que a arte se destaque na tela de fundo.
manipula use para indicar que um objeto pode ser movido ou redimensionado.	As alças são sempre interativas e seu comportamento é sugerido pelo ponteiro do mouse sobre o foco. Nesses exemplos, os identificadores indicam que um objeto pode ser redimensionado.

Diretrizes

Geral

• Não transmita informações essenciais apenas por meio de elementos gráficos. Isso apresenta problemas de acessibilidade para usuários com deficiência visual ou deficiências.

Designs gráficos

• Os gráficos são mais eficazes quando reforçam uma única ideia simples. Elementos gráficos complexos que exigem o pensamento para interpretar não funcionam bem. Hieróglifos são mais bem deixados para desenhos de cavernas.

  Incorreto:

  gráficos complexos

  Neste exemplo, um gráfico complexo do Windows XP tenta explicar de forma ineficaz uma decisão de confiança complexa.

• Não use setas, divisas, quadros de botão ou outras funcionalidades associadas a controles interativos. Isso convida os usuários a interagir com seus elementos gráficos.

• Evite faixas de vermelho puro, amarelo e verde em seus desenhos. Para evitar confusão, reserve essas cores para comunicar o status. Se você precisar usar essas cores para algo diferente de status, use tons mudos em vez de cores puras.

• Use designs culturalmente neutros. O que pode ter um certo significado em um país, região ou cultura pode não ter o mesmo significado em outro.

• Evite usar pessoas, rostos, gênero ou partes do corpo, bem como símbolos religiosos, políticos e nacionais. Essas imagens podem não ser facilmente traduzidas ou podem ser ofensivas.

• Quando você deve representar pessoas ou usuários, represente-os genericamente; evitar representações realistas.

Planos de fundo e faixas

• Para enfatizar o conteúdo, use o texto escuro em um plano de fundo claro. O texto preto em um plano de fundo cinza claro ou amarelo funciona bem.

  

  Neste exemplo, o link recebe a atenção do usuário porque está em um plano de fundo amarelo.

• Para desenfatizar o conteúdo, use texto claro em um plano de fundo escuro. O texto em branco em um plano de fundo cinza escuro ou azul funciona bem.

  

  Neste exemplo, a tela de fundo escura desacenta o conteúdo.

• Se um gradiente for usado, verifique se a cor do texto tem um bom contraste em todo o gradiente.

• Sempre use um ícone de 16 x 16 pixels para chamar a atenção para a faixa. Faixas são muito fáceis de ignorar caso contrário. Para obter mais diretrizes e exemplos, consulte Ícones Padrão.

• Use planos de fundo e faixas com cuidado. Embora a intenção da tela de fundo ou faixa possa ser enfatizar o conteúdo, muitas vezes os resultados são o oposto de um fenômeno conhecido como "cegueira de faixa".

Vidro

• Considere usar vidro estrategicamente em regiões pequenas tocando no quadro da janela sem texto. Fazer isso pode dar a um programa uma aparência mais simples, mais leve e coesa, fazendo com que a região pareça fazer parte do quadro.
• Não use vidro em situações em que um plano de fundo de janela simples seria mais atraente ou mais fácil de usar.

Separadores

• Use linhas verticais e horizontais para separadores. Certifique-se de ter espaço suficiente entre os separadores e o conteúdo que está sendo separado.
• Para separadores entre conteúdo considerável (divisores), exiba o ponteiro de redimensionamento no foco.

Nestes exemplos, ponteiros de redimensionamento são mostrados no foco.

Sombras

• Use apenas para fazer com que o conteúdo ou os objetos mais significativos do programa que estão sendo arrastados se destaquem visualmente em sua tela de fundo. Considere sombras como desordem visual em outras circunstâncias.

Suporte a DPI alto

• Suporte a modos de vídeo de 96 e 120 pontos por polegada (dpi). Detecte o modo dpi na inicialização e manipule eventos de alteração de dpi. O Windows é otimizado para 96 e 120 dpi e usa 96 dpi por padrão.
• Prefira fornecer bitmaps separados renderizados especificamente para 96 e 120 dpi em vez de gráficos de dimensionamento. Pelo menos forneça versões de 96 e 120 dpi para os bitmaps mais importantes e visíveis e centralize ou dimensione as outras. Esses aplicativos são considerados "altamente conscientes do DPI" e fornecem uma melhor experiência visual geral do que os programas que são dimensionados automaticamente pelo Windows.
  • Desenvolvedores: você pode declarar um programa com reconhecimento de alta dpi (e impedir o dimensionamento automático) definindo o sinalizador de reconhecimento de dpi no manifesto do programa ou chamando a API SetProcessDPIAware() durante a inicialização do programa. Você pode usar macros para simplificar a seleção dos gráficos corretos. Para bitmaps win32, você pode usar SS_CENTERIMAGE para centralizar ou SS_REALSIZECONTROL para dimensionar.
• Verifique seu programa no 96 e 120 dpi para:
  • Gráficos muito pequenos ou grandes demais.
  • Gráficos sendo recortados, sobrepostos ou não adequados corretamente.
  • Gráficos mal estendidos ("pixilados").
  • Texto recortado ou não encaixado em planos de fundo gráficos.

Texto

• Para acessibilidade e localização, não use nenhum texto em elementos gráficos. Faça exceções apenas para representar identidade visual e texto como um conceito abstrato.