Iconografia em Windows 11

A iconografia é um conjunto de imagens visuais e símbolos que ajudam os usuários a entender e percorrer seu aplicativo. Os ícones são usados em toda a interface do usuário como metáforas visuais que representam um conceito, ação ou status.

Windows 11 usa três tipos de ícones: aplicativo, sistema e tipo de arquivo. Este artigo se concentra nas duas primeiras.

Ícones do aplicativo

Os ícones do aplicativo representam seu aplicativo no shell do Windows. Eles são usados principalmente para abrir seu aplicativo, mas também representam seu aplicativo onde quer que ele apareça no shell do Windows.

Os ícones do aplicativo devem representar a funcionalidade principal do aplicativo por meio de uma metáfora. Para obter mais informações sobre como projetar e construir o ícone do aplicativo, consulte Iconografia no Windows.

Ícones do sistema

Windows 11 apresenta uma nova fonte de ícone do sistema, Segoe Fluent Icons. Essa nova fonte complementa a geometria em Windows 11.

Todos os glifos em Segoe Fluent Icons são desenhados em um estilo monolinha. Isso significa que eles são criados por meio de um único traço de 1 epx.

Os glifos em Segoe Fluent Icons seguem três princípios estéticos:

• Mínimo: os glifos contêm apenas os detalhes necessários para comunicar o conceito.
• Harmonioso: os glifos são baseados em formas simples e geométricas.
• Evoluído: os glifos usam metáforas modernas que são facilmente compreendidas.

Dimensionamento

As métricas de fonte para Segoe Fluent Icons correspondem à maneira como designers e desenvolvedores estão acostumados a trabalhar com ícones de SVG e bitmap.

Cada glifo de fonte é projetado para que o volume da área de ícone seja um quadrado em. Um ícone com um tamanho de fonte de 16 epx é o equivalente a um ícone de 16x16-epx, para tornar o dimensionamento e o posicionamento mais previsíveis.

Anatomia

Você pode construir visualmente glifos de ícone do sistema combinando um ícone de base com um ícone de modificador.

Ícones base são o elemento main de uma metáfora visual. Os elementos base devem ocupar todo o volume de ícones.

Os ícones do modificador modificam o significado do ícone base. Os elementos modificador devem ser colocados em um dos quadrantes inferiores do volume do ícone.

Somente ícone base
Por conta própria, o ícone de folha de papel comunica o conceito de um arquivo.

Ícone base + ícone do modificador
Adicionar uma seta para cima ao ícone de arquivo altera o significado do ícone para representar um arquivo carregado.

Camadas

Camadas de ícone é uma técnica que você usa para sobrepor dois glifos. É recomendável usar camadas de ícone para criar um estado diferente do mesmo ícone (por exemplo, um estado ativo ou selecionado).

Localização

Entenda as conotações culturais de símbolos. Embora a iconografia não exija localização na maioria dos casos, determinados ícones podem ser aceitáveis em uma cultura, mas não em outra. Valide suas opções de iconografia com o contexto no qual você as usará.

Exemplos

Dica

Abra o aplicativo Galeria do WinUI 3 e veja Princípios de iconografia em ação. O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub