Partilhar via


Caixilharia

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 orientações ainda se aplica em princípio, mas a apresentação e os exemplos não refletem as nossas orientações de conceção atuais .

A maioria dos programas deve usar molduras de janela padrão. As aplicações imersivas podem ter um modo de ecrã inteiro que oculta a moldura da janela. Considere usar o vidro estrategicamente para um visual mais simples, leve e coeso.

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

captura de tela da moldura da janela ao redor da janela do bloco de notas

Uma moldura de janela típica.

Nota: Diretrizes relacionadas à de gerenciamento de janelas e de marca são apresentadas em artigos separados.

Conceitos de design

Caixilharia de vidro

As caixilharias de vidro são um novo aspeto marcante da estética do Microsoft Windows, com o objetivo de ser atraente e leve. 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.

captura de tela da moldura de vidro ao redor da calculadora

Caixilharia de vidro.

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

captura de tela da janela com borda translúcida

Neste exemplo, o vidro é usado na área do cliente para torná-lo parecido com parte da estrutura.

Molduras ocultas

Às vezes, a melhor moldura de janela não é nenhuma moldura. Este é geralmente o caso da janela principal de aplicativos de imersivos de tela cheia que não são usados em conjunto com outros programas, como players de mídia, jogos e aplicativos de quiosque.

Os visualizadores de conteúdo geralmente se beneficiam da opção de mostrar o conteúdo em tela cheia. Os exemplos incluem Windows Internet Explorer, Windows Live Photo Gallery, Windows Movie Maker HD, Microsoft PowerPoint e Microsoft Word.

captura de ecrã do leitor multimédia na vista de ecrã inteiro

Neste exemplo, o Windows Media Player pode exibir seu conteúdo em tela cheia.

Quadros personalizados

A maioria dos aplicativos do Windows deve usar os quadros de janela padrão. No entanto, para aplicativos imersivos, em tela cheia 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 cheia. A motivação para usar molduras personalizadas deve ser dar à experiência geral uma sensação única, não apenas para de marca.

ilustração de quebra-cabeça de imagem mexida e moldura

Os quadros personalizados são apropriados para aplicações imersivas, de ecrã inteiro e autónomas, como jogos.

Orientações

Caixilharia

  • Use molduras de janela padrão.

    • Exceção: Para dar uma sensação única às aplicações autónomas e imersivas em ecrã inteiro:
      • Considere ocultar a moldura da janela do janela principal.

      • Considere o uso de quadros personalizados para janela secundária.

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

        Incorreto:

        captura de tela do quadro que distrai

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

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

    Incorreto:

    captura de tela do controle no quadro da janela

    Correto:

    captura de tela do controle na área do cliente

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

Modo de ecrã inteiro

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

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

      captura de tela da janela com o item de menu em tela cheia

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

  • Use F11 para a tecla de atalho em tela cheia.

  • Se houver uma barra de ferramentas e o modo de tela cheia for comumente usado, também tenha um botão gráfico da barra de ferramentas com uma dica de ferramenta em tela cheia.

    captura de tela dos botões de tela cheia e reverter

    Exemplos de botões da barra de ferramentas em tela cheia.

  • Para reverter do modo de tela cheia:

    • Tenha um comando modal em tela cheia na barra de menus ou barra de ferramentas. Quando o usuário clicar no comando, mostre-o em seu estado limpo.
    • Use F11 para a tecla de atalho em tela cheia. Se ainda não tiver sido atribuído, o Esc também pode ser utilizado para este fim.

Vidro

As caixilharias padrão usam vidro automaticamente no Windows, mas você também pode usar vidro em regiões que tocam a moldura da janela.

  • Considere usar o vidro estrategicamente em pequenas regiões tocando a moldura da janela sem texto. Isso pode dar a um programa uma aparência mais simples, leve e coesa, fazendo com que a região pareça fazer parte do quadro.
  • captura de tela da janela com borda translúcida
  • 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 fundo de janela liso seria mais atraente ou mais fácil de usar.

Correto:

captura de tela da janela com quatro gráficos e rótulos

Neste exemplo, o vidro é usado para dar à janela Alt+Tab uma aparência leve. O vidro funciona para esta janela porque consiste em gráficos e uma etiqueta de texto única e forte.

Incorreto:

captura de tela da janela com doze gráficos

Neste exemplo incorreto, o uso de vidro está a distrair. Um fundo de janela simples seria uma escolha melhor.