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 se concentra nas silhuetas comuns, conforme usado em vários aplicativos internos do Windows.

Consulte também Noções básicas de conteúdo para arranjos 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/pessoa/imagem do usuário 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 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 principal da área de conteúdo, nesse caso, composição e edição.

Este exemplo ilustra um editor de texto usando margens 12epx para complementar o utilitário 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 repousam automaticamente na camada base do aplicativo. Isso traz mais foco para a tarefa principal da área de conteúdo. Observe o local do controle de identidade/pessoa/imagem do usuário 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 do 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.

Exibição de tabulação Silhueta

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

Este exemplo ilustra um editor de texto usando margens 12epx para complementar o utilitário do aplicativo.

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