Quadros de Janela

Observação

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

A maioria dos programas deve usar quadros de janela padrão. Aplicativos imersivos podem ter um modo de tela inteira que oculta o quadro da janela. Considere usar vidro estrategicamente para um visual mais simples, mais leve e coeso.

Com um quadro de janela, os usuários podem manipular uma janela e exibir o título e o ícone para identificar seu conteúdo.

Um quadro de janela típico.

Nota: Diretrizes relacionadas ao gerenciamento de janelas e identidade visual são apresentadas em artigos separados.

Conceitos de design

Quadros de janela de vidro

Os quadros de janela de vidro são um novo aspecto marcante da estética do Microsoft Windows, com o objetivo de serem atraentes e leves. Esses quadros translúcidos dão às janelas uma aparência aberta e menos intrusiva, ajudando os usuários a se concentrarem no conteúdo e na funcionalidade em vez da interface ao seu redor.

Quadros de janela de vidro.

Você pode usar vidro estrategicamente em pequenas regiões dentro de uma janela que toque no quadro da janela. Essas regiões parecem fazer parte do quadro da janela, embora tecnicamente façam parte da área de cliente da janela.

Neste exemplo, glass é usado na área do cliente para torná-lo como parte do quadro.

Quadros ocultos

Às vezes, o melhor quadro de janela não é nenhum quadro. Geralmente, esse é o caso da janela principal de aplicativos imersivos em tela inteira que não são usados em conjunto com outros programas, como media players, jogos e aplicativos de quiosque.

Os visualizadores de conteúdo geralmente se beneficiam de ter a opção de mostrar conteúdo em tela inteira. Exemplos incluem o Windows Internet Explorer , Windows Live Galeria de Fotos, Windows Movie Maker HD, Microsoft PowerPoint e Microsoft Word.

Neste exemplo, Reprodutor Multimídia do Windows pode exibir seu conteúdo em tela inteira.

Quadros personalizados

A maioria dos aplicativos do Windows deve usar os quadros de janela padrão. No entanto, para aplicativos imersivos, em tela inteira e autônomos, como jogos e aplicativos de quiosque, pode ser apropriado usar quadros personalizados para qualquer janela que não seja mostrada em tela inteira. A motivação para usar quadros personalizados deve ser dar à experiência geral uma sensação única, não apenas para identidade visual.

Os quadros personalizados são apropriados para aplicativos imersivos, em tela inteira e autônomos, como jogos.

Diretrizes

Quadros de janela

• Use quadros de janela padrão.

  • Exceção: Para dar a aplicativos autônomos de tela inteira imersiva uma sensação única:

    • Considere ocultar o quadro de janela da janela primária.

    • Considere usar quadros personalizados para a janela secundária.

    • Se um quadro personalizado for apropriado, escolha um design leve e não chame muita atenção para si mesmo.

      Incorreto:

      

      Neste exemplo, o quadro personalizado chama muita atenção para si mesmo.

• Não adicione controles a um quadro de janela. Em vez disso, coloque os controles dentro da janela.

  Incorreto:

  

  Correto:

  

  No exemplo correto, o controle está dentro da área do cliente em vez do quadro da janela.

Modo de tela inteira

• Para programas que têm um modo de tela inteira opcional, para habilitar o modo de tela inteira:

  • Tenha um comando modal de tela inteira na barra de menus ou na barra de ferramentas. Quando o usuário clicar no comando, mostre o comando em seu estado selecionado.

    

    Este exemplo mostra o comando de tela inteira junto com sua tecla de atalho padrão.

• Use F11 para a tecla de atalho de tela inteira.

• Se houver uma barra de ferramentas e o modo de tela inteira for comumente usado, também terá um botão de barra de ferramentas gráfica com uma dica de ferramenta de tela inteira.

  

  Exemplos de botões da barra de ferramentas de tela inteira.

• Para reverter de volta do modo de tela inteira:

  • Tenha um comando modal de tela inteira na barra de menus ou na barra de ferramentas. Quando o usuário clicar no comando, mostre o comando em seu estado limpo.
  • Use F11 para a tecla de atalho de tela inteira. Se ainda não estiver atribuído, o Esc também poderá ser usado para essa finalidade.

Vidro

Os quadros de janela padrão usam vidro automaticamente no Windows, mas você também pode usar vidro em regiões que tocam no quadro da janela.

• Considere usar vidro estrategicamente em pequenas regiões tocando o 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.
• 
• Neste exemplo, o Glass concentra a atenção do usuário no conteúdo em vez dos controles.
• 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.

Correto:

Neste exemplo, o vidro é usado para dar à janela Alt+Tab uma aparência leve. O Glass funciona para essa janela porque consiste em elementos gráficos e um único rótulo de texto forte.

Incorreto:

Neste exemplo incorreto, o uso de vidro está distraindo. Uma tela de fundo de janela simples seria uma opção melhor.