Silhuetas de aplicativos do Windows

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

Consulte também os Conceitos Básicos de Conteúdo para disposições comuns de conteúdo e controles.

Silhueta de navegação superior

Um NavigationView pode ser usado na parte superior da camada de conteúdo do aplicativo, criando uma conexão com o conteúdo abaixo. Observe o local do controle de identidade do usuário/pessoa/imagem 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 56epx, complementando grandes partes de mídia. Use margens menores para necessidades de conteúdo menores/mais apertadas.

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

Silhueta da barra de menus

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

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

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

Silhueta de navegação à esquerda

Os controles NavigationView se baseiam automaticamente na camada base do aplicativo. Isso traz mais foco para a tarefa primária da área de conteúdo. Observe o local do controle de identidade do usuário/pessoa/imagem ao usar a navegação à esquerda.

As margens de conteúdo podem variar. Este exemplo usa margens 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, pois outros elementos de design reforçam a coesão, o conteúdo não é aninhado em expansores ou o conteúdo não deve ser agrupado logicamente.

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

Silhueta de visualização de guia

Um TabView pode se integrar à camada base do aplicativo e ao controle da barra de título. Isso traz mais foco para a tarefa primária da área de conteúdo, nesse caso, composição e edição de código.

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

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