Partilhar via


Silhuetas de aplicativos do Windows

As silhuetas indicam um padrão comum de relações entre elementos, como camadas de aplicativos, menus, navegação, comandos e áreas de conteúdo. Este artigo concentra-se nas silhuetas comuns usadas em vários aplicativos da caixa de entrada do Windows.

Consulte também Noções básicas de conteúdo para obter arranjos comuns de conteúdo e controles.

Silhueta da barra de navegação superior

Um exemplo de uma aplicação de navegação de topo

Um NavigationView pode ser usado na parte superior da camada de conteúdo da aplicação, criando uma conexão com o conteúdo abaixo. Note a localização do controlo de identidade/pessoa/imagem do utilizador no ao usar a navegação superior.

Colocar a navegação na mesma linha que os comandos pode ser útil ao tentar maximizar a quantidade de espaço vertical para o conteúdo abaixo.

As margens de conteúdo podem variar. Este exemplo usa margens de 56epix, complementando grandes peças de mídia. Use margens menores para necessidades de conteúdo menores/mais restritas.

No Windows 11, o Fotos é um bom exemplo de um aplicativo que usa uma silhueta de navegação superior.

Um exemplo de um aplicativo de barra de menus

Um MenuBar pode ser usado como parte da camada base juntamente com um CommandBar. Isso traz mais foco para a tarefa principal da área de conteúdo, neste caso composição e edição.

Este exemplo mostra um editor de texto usando margens de 12epx para complementar a utilidade do aplicativo.

No Windows 11, o Bloco de Notas é um bom exemplo de um aplicativo que usa uma silhueta da barra de menus.

Silhueta de navegação à esquerda

Um exemplo de um aplicativo de navegação à esquerda

controlos do NavigationView posicionam-se automaticamente na camada base do aplicativo. Isso traz mais foco para a tarefa principal da área de conteúdo. Observe a localização do controle de identidade/pessoa/imagem do utilizador , quando usar a navegação à esquerda.

As margens de conteúdo podem variar. Este exemplo usa margens de 56epx para complementar a coesão do conteúdo dentro dos expansores. Use margens menores quando a coesão de conteúdo for menos preocupante, porque outros elementos de design reforçam a coesão, o conteúdo não está aninhado em expansores ou o conteúdo não deve ser logicamente agrupado.

No Windows 11, Configurações é um bom exemplo de um aplicativo que usa uma silhueta de navegação à esquerda.

Silhueta da Vista de Abas

Um exemplo de um aplicativo de exibição de guia

Um TabView pode integrar-se com a camada baseda aplicação e o controlo da barra de título. Isso traz mais foco para a tarefa principal da área de conteúdo, neste caso a composição e edição de código.

Este exemplo mostra um editor de texto usando margens de 12epx para complementar a utilidade do aplicativo.

No Windows 11, o Terminal é um bom exemplo de um aplicativo que usa uma silhueta de exibição de guia.