Ícones para aplicativos do Windows

Os ícones fornecem uma abreviação visual para uma ação, um conceito ou um produto. Compactando o significado em uma imagem simbólica, os ícones podem cruzar barreiras de idioma e ajudar a conservar um recurso valioso: espaço na tela.

Ícones bons se harmonizam com a tipografia e com o restante da linguagem do design. Eles não misturam metáforas, e comunicam apenas o que é necessário, o mais rápido e simplesmente possível.

Os ícones podem aparecer em aplicativos e fora deles:

Ícones dentro do aplicativo

Dentro do aplicativo, você usa ícones para representar uma ação, como copiar texto ou ir para a página de configurações.

Ícones fora do aplicativo

Fora do aplicativo, o Windows usa um ícone para representar o aplicativo no menu Iniciar e na barra de tarefas. Se o usuário optar por fixar seu aplicativo no menu Iniciar, o bloco iniciar do aplicativo poderá apresentar o ícone do aplicativo. O ícone do aplicativo aparece na barra de título e você pode optar por criar uma tela inicial com o logotipo do aplicativo.

Este artigo descreve os ícones no seu aplicativo. Para saber mais sobre ícones fora do aplicativo (ícones de aplicativo), consulte o artigo Iconografia no Windows .

Saber quando usar ícones

Ícones podem economizar espaço, mas quando você deve usá-los?

Use um ícone para ações, como recortar, copiar, colar e salvar ou para itens em um menu de navegação.

Use um ícone se já existir um para o conceito que você deseja representar. (Para ver se existe um ícone, verifique a lista de ícones da Segoe.)

Use um ícone se for fácil para o usuário entender o que ele significa e se for simples o bastante para ser entendido em tamanhos pequenos.

Não use um ícone se o significado não está claro, ou se para que fique claro seja necessário usar uma forma complexa.

Usar o tipo certo de ícone

Há muitas maneiras de criar um ícone. É possível: Usar uma fonte de símbolo como Segoe MDL2 Assets. Você pode criar sua própria imagem baseada em vetor. Usar uma imagem de bitmap, embora isso não seja recomendado. Aqui está um resumo das maneiras pelas quais você pode adicionar um ícone ao seu aplicativo.

Ícone predefinido

A Microsoft fornece mais de 1.000 ícones na forma da fonte Segoe MDL2 Assets. Pode não ser intuitivo obter um ícone de uma fonte, mas a tecnologia de exibição de fonte do Windows significa que esses ícones parecerão nítidos e afiados em qualquer exibição, em qualquer resolução e em qualquer tamanho. Para obter instruções, consulte Segoe MDL2 Assets icons.

Fonte

Você não precisa usar a fonte Segoe MDL2 Assets. Você pode usar qualquer fonte que o usuário tenha instalado em seu sistema, como Wingdings ou Webdings.

Arquivo SVG

Os recursos SVG (Elementos Gráficos Vetoriais Escalonáveis) são ideais para ícones, pois eles sempre parecem afiados em qualquer tamanho ou resolução. A maioria dos aplicativos de desenho pode exportar para SVG. Para obter instruções, confira SVGImageSource.

Objeto Geometry

Como os arquivos SVG, objetos geométricos são um recurso baseado em vetor, então sempre têm aparência nítida. No entanto, é complicado criar um objeto geométrico, pois você precisa especificar individualmente cada ponto e curva. É uma boa opção somente se você precisar modificar o ícone enquanto o aplicativo estiver em execução (para animá-lo, por exemplo). Para ver instruções, confira Mover e desenhar comandos para objetos geométricos.

Imagem de bitmap

Você pode usar uma imagem de bitmap (como PNG, GIF ou JPEG), embora não a recomendemos.

As imagens bitmap são criadas com um tamanho específico para poderem ser dimensionadas dependendo do tamanho desejado do ícone e da resolução da tela. Quando a imagem é reduzida horizontalmente (encolhida), ela pode parecer desfocada. Quando ele é escalado verticalmente, ele pode parecer bloqueado e pixelado. Se você precisar usar uma imagem de bitmap, recomendamos usar um PNG ou GIF em um JPEG.

Fazer um ícone fazer algo

Depois de ter um ícone, a próxima etapa é fazê-lo fazer algo associando-o a um comando ou a uma ação de navegação. A melhor maneira é adicionar o ícone a um botão ou a uma barra de comandos.

Você também pode animar um ícone para chamar a atenção para um componente de interface do usuário, como o próximo botão em um tutorial, ou para refletir a ação associada ao ícone de forma divertida e interessante. Para obter mais informações, consulte AnimatedIcon.

Criar um botão de ícone

Você pode colocar um ícone em um botão padrão. Como você pode usar botões em uma ampla variedade de locais, usar um ícone dessa forma oferece um pouco mais de flexibilidade para onde o ícone de ação é exibido.

Aqui está uma maneira de adicionar um ícone a um botão:

Etapa 1
Defina a família de fontes do botão como Segoe MDL2 Assets e sua propriedade de conteúdo como o valor Unicode do glifo que você deseja usar:

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Etapa 2
Use um dos objetos de elemento de ícone: BitmapIcon, FontIcon, PathIcon, ImageIcon ou SymbolIcon. Essa técnica oferece mais tipos de ícones para escolher. Ele também permite combinar ícones e outros tipos de conteúdo, como texto, se desejar.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Criar uma série de ícones em uma barra de comandos

Quando você tiver uma série de comandos juntos, como recortar/copiar/colar ou um conjunto de comandos de desenho para um programa de edição de fotos, coloque-os juntos em uma barra de comandos. Uma barra de comando usa um ou mais botões ou botões de alternância da barra de aplicativos, cada um representando uma ação. Cada botão tem uma propriedade Icon que você usa para controlar qual ícone ele exibe. Existem diversas maneiras de especificar o ícone.

A maneira mais fácil é usar a lista de ícones predefinidos. Basta especificar o nome do ícone, como Voltar ou Parar, e o sistema o desenhará:

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Para obter a lista completa de nomes de ícone, consulte a referência de enumeração Símbolo.

Há outras maneiras de fornecer ícones para um botão em uma barra de comandos:

• FontIcon: o ícone é baseado em um glifo da família de fontes especificada.
• BitmapIcon: o ícone é baseado em um arquivo de imagem bitmap com o URI especificado.
• PathIcon: o ícone é baseado em Dados de caminho .
• ImageIcon: o ícone é baseado em um tipo de arquivo de imagem compatível com a classe Image .

Para saber mais sobre barras de comandos, consulte o artigo Barra de comandos.

Artigos relacionados

• Ícones e logotipos de aplicativos
• AnimatedIcon