Diretrizes de ícone de estilo monoline para suplementos do Office

A iconografia de estilo monoline é usada em aplicativos do Office. Se preferir que seus ícones correspondam ao estilo Fresh do perpétuo Office 2016 e posterior, consulte Diretrizes de ícone de estilo fresco para suplementos do Office.

Estilo visual do Office Monoline

O objetivo do estilo Monoline de ter iconografia consistente, clara e acessível para comunicar ação e recursos com visuais simples, garantir que os ícones sejam acessíveis a todos os usuários e ter um estilo consistente com os usados em outros lugares do Windows.

As diretrizes a seguir são para desenvolvedores de terceiros que desejam criar ícones para recursos que sejam consistentes com os ícones que já apresentam produtos do Office.

Princípios de design

• Simples, limpo, claro.
• Contêm apenas elementos necessários.
• Inspirado no estilo de ícone do Windows.
• Acessível a todos os usuários.

Transmitir significado

• Use elementos descritivos, como uma página, para representar um documento ou um envelope para representar o email.
• Use o mesmo elemento para representar o mesmo conceito. Por exemplo, o email é sempre representado por um envelope, não por um carimbo.
• Use uma metáfora principal durante o desenvolvimento do conceito.

Redução de elementos

• Reduza o ícone ao seu significado principal, usando apenas elementos essenciais para a metáfora.
• Limite o número de elementos em um ícone para dois, independentemente do tamanho do ícone.

Consistência

Tamanhos, arranjo e cor dos ícones devem ser consistentes.

Estilo

Perspectiva

Os ícones monoline são voltados para a frente por padrão. Certos elementos que exigem perspectiva e/ou rotação, como um cubo, são permitidos, mas as exceções devem ser mantidas ao mínimo.

Enfeite

Monoline é um estilo limpo mínimo. Tudo usa cor plana, o que significa que não há gradientes, texturas ou fontes de luz.

Projetar

Tamanhos

Recomendamos que você produza cada ícone em todos esses tamanhos para dar suporte a dispositivos DPI altos. Os tamanhos absolutamente necessários são 16 px, 20 px e 32 px, pois esses são os tamanhos de 100%.

16 px, 20 px, 24 px, 32 px, 40 px, 48 px, 64 px, 80 px, 96 px

Importante

Para obter uma imagem que seja o ícone representativo do suplemento, consulte Create listagens efetivas no AppSource e no Office para obter tamanho e outros requisitos.

Layout

A seguir está um exemplo de layout de ícone com um modificador.

Elementos

• Base: o conceito main que o ícone representa. Esse geralmente é o único visual necessário para o ícone, mas às vezes o conceito main pode ser aprimorado com um elemento secundário, um modificador.

• Modificador Qualquer elemento que sobrepõe a base; ou seja, um modificador que normalmente representa uma ação ou um status. Ele modifica o elemento base agindo como uma adição, alteração ou um descritor.

Construção

Posicionamento do elemento

Os elementos base são colocados no centro do ícone dentro do preenchimento. Se ele não puder ser colocado perfeitamente centralizado, a base deve errar para o canto superior direito. No exemplo a seguir, o ícone está perfeitamente centrado.

No exemplo a seguir, o ícone está falhando à esquerda.

Os modificadores são quase sempre colocados no canto inferior direito da tela de ícone. Em alguns casos raros, os modificadores são colocados em um canto diferente. Por exemplo, se o elemento base estiver irreconhecível com o modificador no canto inferior direito, considere colocá-lo no canto superior esquerdo.

Padding

Cada ícone de tamanho tem uma quantidade especificada de preenchimento ao redor do ícone. O elemento base permanece dentro do preenchimento, mas o modificador deve bater até a borda da tela, estendendo-se fora do preenchimento até a borda do ícone. As imagens a seguir mostram o preenchimento recomendado a ser usado para cada um dos tamanhos de ícone.

16px	20px	24px	32px	40px	48px	64px	80px	96px

Pesos de linha

Monoline é um estilo dominado por formas de linha e descritas. Dependendo do tamanho que você está produzindo, o ícone deve usar os pesos de linha a seguir.

Tamanho do ícone:	16px	20px	24px	32px	40px	48px	64px	80px	96px
Peso da linha:	1px	1px	1px	1px	2px	2px	2px	2px	3px
Ícone de exemplo:

Recortes

Quando um elemento de ícone é colocado em cima de outro elemento, um recorte (do elemento inferior) é usado para fornecer espaço entre os dois elementos, principalmente para fins de legibilidade. Isso geralmente acontece quando um modificador é colocado em cima de um elemento base, mas também há casos em que nenhum dos elementos é um modificador. Esses recortes entre os dois elementos às vezes são chamados de "gap".

O tamanho da lacuna deve ser a mesma largura que o peso da linha usado nesse tamanho. Se fizer um ícone de 16 px, a largura da lacuna será de 1px e, se for um ícone de 48 px, a diferença deverá ser de 2px. O exemplo a seguir mostra um ícone de 32 px com uma diferença de 1px entre o modificador e a base subjacente.

Em alguns casos, a lacuna pode ser aumentada em um px de 1/2 se o modificador tiver uma borda diagonal ou curva e a lacuna padrão não fornecer separação suficiente. Isso provavelmente afetará apenas os ícones com peso de linha 1px: 16 px, 20 px, 24 px e 32 px.

Preenchimentos em segundo plano

A maioria dos ícones no conjunto de ícones Monoline exige preenchimentos em segundo plano. No entanto, há casos em que o objeto não teria naturalmente um preenchimento, portanto, nenhum preenchimento deve ser aplicado. Os ícones a seguir têm um preenchimento em branco.

Os ícones a seguir não têm preenchimento. (O ícone de engrenagem está incluído para mostrar que o buraco central não está preenchido.)

Melhores práticas para preenchimentos

Fazer

• Preencha qualquer elemento que tenha um limite definido e naturalmente teria um preenchimento.
• Use uma forma separada para criar o preenchimento em segundo plano.
• Use Preenchimento em Segundo Plano da paleta de cores.
• Mantenha a separação de pixel entre elementos sobrepostos.
• Preencha entre vários objetos.

Não fazer

• Não preencha objetos que não seriam preenchidos naturalmente; por exemplo, um clipe de papel.
• Não preencha colchetes.
• Não preencha números atrás ou caracteres alfa.

Cor

A paleta de cores foi projetada para simplicidade e acessibilidade. Ele contém quatro cores neutras e duas variações para azul, verde, amarelo, vermelho e roxo. A laranja não está incluída intencionalmente na paleta de cores ícone Monoline. Cada cor destina-se a ser usada de maneiras específicas, conforme descrito nesta seção.

Paleta

Como usar a cor

Na paleta de cores Monoline, todas as cores têm variações Autônoma, Contorno e Preenchimento. Geralmente, os elementos são construídos com um preenchimento e uma borda. As cores são aplicadas em um dos seguintes padrões.

• Somente a cor autônoma para objetos que não têm preenchimento.
• A borda usa a cor Delinear e o preenchimento usa a cor Preencher.
• A borda usa a cor Autônoma e o preenchimento usa a cor Preenchimento em Segundo Plano.

Veja a seguir exemplos de uso de cor.

A situação mais comum será fazer com que um elemento use o Dark Gray Autônomo com Preenchimento em Segundo Plano.

Ao usar um Preenchimento colorido, ele deve estar sempre com a cor de contorno correspondente. Por exemplo, o Preenchimento Azul só deve ser usado com o Contorno Azul. Mas há duas exceções a esta regra geral.

• O Preenchimento em Segundo Plano pode ser usado com qualquer cor autônoma.
• O Preenchimento Cinza Claro pode ser usado com duas cores de contorno diferentes: Cinza Escuro ou Cinza Médio.

Quando usar a cor

A cor deve ser usada para transmitir o significado do ícone em vez de embelezamento. Ele deve realçar a ação para o usuário. Quando um modificador é adicionado a um elemento base que tem cor, o elemento base normalmente é transformado em Cinza Escuro e Preenchimento de Fundo para que o modificador possa ser o elemento de cor, como o caso abaixo, com o modificador "X" sendo adicionado à base de imagem no ícone mais à esquerda do conjunto a seguir.

Você deve limitar seus ícones a uma cor adicional, além do Tópico e preenchimento mencionados acima. No entanto, mais cores podem ser usadas se for vital para sua metáfora, com um limite de duas cores adicionais além de cinza. Em casos raros, há exceções quando mais cores são necessárias. A seguir estão bons exemplos de ícones que usam apenas uma cor.

Mas os ícones a seguir usam muitas cores.

Use Cinza Médio para "conteúdo" interior, como linhas de grade em um ícone de uma planilha. Cores interiores adicionais são usadas quando o conteúdo precisa mostrar o comportamento do controle.

Linhas de texto

Quando as linhas de texto estiverem em um "contêiner" (por exemplo, texto em um documento), use cinza médio. As linhas de texto não em um contêiner devem ser Cinza Escuro.

Texto

Evite usar caracteres de texto em ícones. Como os produtos do Office são usados em todo o mundo, queremos manter os ícones o mais neutros possível.

Produção

Formato de arquivo de ícone

Os ícones finais devem ser salvos como .png arquivos de imagem. Use o formato PNG com um plano de fundo transparente e tenha profundidade de 32 bits.

Confira também

• Elemento manifesto do ícone
• Elemento manifesto IconUrl
• Elemento manifesto HighResolutionIconUrl
• Criar um ícone para o seu suplemento