Iconografia no Windows
A iconografia é um conjunto de imagens visuais e símbolos que ajudam os usuários a entender e se mover pelo 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.
O Windows 11 usa três tipos de ícones: aplicativo, sistema e tipo de arquivo. Este artigo se concentra nas duas primeiras.
Dica
Este artigo descreve como a linguagem de Design Fluente é aplicada a aplicativos do Windows. Para obter mais informações, consulte Design fluente - Iconografia.
Ícones de aplicativos
Os ícones de 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 seu aplicativo por meio de uma metáfora. Para obter mais informações sobre como projetar e construir o ícone do seu aplicativo, consulte Ícones de aplicativo.
Ícones do sistema
Use ícones do sistema dentro da interface do usuário do aplicativo para itens como barras de comandos, navegação ou indicadores de status. O Windows 11 apresenta uma nova fonte de ícone do sistema, Segoe Fluent Icons. Essa nova fonte complementa a geometria no Windows 11.
Todos os glifos em Ícones fluentes de Segoe são desenhados em um estilo monolinha. Isso significa que eles são criados através 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.
Para obter mais informações sobre como usar ícones na interface do usuário do aplicativo, consulte Ícones em aplicativos do Windows.
Tamanho do ícone
As métricas de fonte para Segoe Fluent Icons correspondem a como designers e desenvolvedores estão acostumados a trabalhar com ícones SVG e bitmap.
Cada glifo de fonte é projetado para que a área do ícone seja quadrada. Um ícone com um tamanho de fonte de 16 epx é o equivalente a um ícone de 16 x 16 epx, para tornar o dimensionamento e o posicionamento mais previsíveis.
Modificadores
Você pode construir visualmente glifos de ícone do sistema combinando um ícone base com um ícone modificador.
Os ícones básicos são o elemento principal de uma metáfora visual. Os elementos básicos devem ocupar toda a pegada do ícone.
Os ícones modificadores modificam o significado do ícone base. Os elementos modificadores devem ser colocados em um dos quadrantes inferiores da pegada do ícone.
Apenas o ícone base
Por si só, o ícone da folha de papel comunica o conceito de um arquivo.
Ícone base + ícone modificador
Adicionar uma seta para cima ao ícone do arquivo altera o significado do ícone para representar um arquivo carregado.
Disposição em camadas
A camada de ícone é uma técnica que você usa para sobrepor dois glifos. Recomendamos 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 dos símbolos. Embora a iconografia não exija localização na maioria dos casos, certos ícones podem ser aceitáveis em uma cultura, mas não em outra. Valide suas escolhas de iconografia com o contexto em que você as usará.
Exemplos
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
Windows developer