Novas diretrizes de ícones de estilo para Suplementos do Office

Artigo
07/16/2024

O Office 2016 perpétuo e posterior utiliza a iconografia de estilo Novo da Microsoft. Se preferir que os seus ícones correspondam ao estilo Monoline do Microsoft 365, consulte Diretrizes de ícones de estilo Monoline para Suplementos do Office.

Estilo de elemento visual do Office Fresh

Os ícones Fresh incluem apenas elementos comunicativos essenciais. Elementos não essenciais, como perspectiva, gradientes e uma fonte de luz, foram removidos. Os ícones simplificados suportam a análise mais rápida de comandos e controles. Siga este estilo para se adaptar melhor aos clientes perpétuos do Office.

Práticas recomendadas

Siga estas diretrizes quando criar os ícones.

Fazer	Não fazer
Mantenha os elementos visuais simples e claros, concentrando-se nos elementos-chave da comunicação.	Não usar artefatos que façam com que o ícone pareça confuso.
Usar a linguagem de ícones do Office para representar comportamentos ou conceitos.	Não reutilize os glifos Fabric Core para comandos de suplementos no friso da aplicação do Office ou nos menus contextuais. Os ícones do Fabric Core são estilicamente diferentes e não correspondem.
Reutilizar metáforas visuais comuns do Office, como o pincel para formatar ou a lupa para localizar.	Não reutilizar metáforas visuais para comandos diferentes. Usar o mesmo ícone para conceitos e comportamentos diferentes pode causar confusão.
Redesenhar os ícones para deixá-los pequenos ou maiores. Dedicar um tempo para redesenhar recortes, cantos e bordas arredondadas para maximizar a clareza da linha.	Não redimensionar os ícones reduzindo-os ou aumentando-os. Isso pode levar a uma baixa qualidade visual e a ações confusas. Os ícones complexos criados em um tamanho maior podem perder clareza ao ser redimensionados para ficar menores sem um redesenho.
Use um preenchimento branco para acessibilidade. A maioria dos objetos em seus ícones exigirá um fundo branco para ser legível nos temas da interface do usuário do Office e nos modos de alto contraste.	Evite confiar no seu logotipo ou marca para comunicar o que um comando de suplemento faz. Nem sempre é possível reconhecer as marcas em ícones menores e quando os modificadores são aplicados. As marcas de marca entram frequentemente em conflito com os estilos de ícone do friso da aplicação do Office e podem competir pela atenção dos utilizadores num ambiente saturado.
Usar o formato PNG com uma tela de fundo transparente.	Nenhum
Evitar usar conteúdo localizável nos ícones, como caracteres tipográficos, indicações de parágrafos e pontos de interrogação.	Nenhum

Recomendações e requisitos de tamanho de ícone

Os ícones da área de trabalho do Office são imagens bitmap. Os tamanhos diferentes serão renderizados, dependendo do modo de toque e da configuração de DPI do usuário. Inclua todos os oito tamanhos com suporte para criar a melhor experiência para todas as resoluções e contextos com suporte. Seguem-se os tamanhos suportados: são necessários três.

16 px (obrigatório)
20 px
24 px
32 px (obrigatório)
40 px
48 px
64 px (recomendado, melhor para Mac)
80 px (obrigatório)

Importante

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

Não se esqueça de redesenhar seus ícones para cada tamanho em vez de reduzi-los para que caibam.

Anatomia e layout do ícone

Normalmente, os ícones do Office são compostos por um elemento base com modificadores de ação e conceptuais sobrepostos.  Os modificadores de ação representam conceitos como adicionar, abrir, novo ou fechar. Os modificadores conceituais representam status, alteração ou uma descrição do ícone.

Para criar comandos que se alinhem à interface do usuário do Office, siga as diretrizes de layout para o elemento básico e os modificadores. Isso garante que seus comandos tenham uma aparência profissional e seus clientes confiem no seu suplemento. Se você fizer exceções a essas diretrizes, faça intencionalmente.

A imagem a seguir mostra o layout de elementos básicos e modificadores em um ícone do Office.

Elementos básicos centrais no quadro do pixel com preenchimento todo vazio.
Coloque modificadores de ação na parte superior esquerda.
Coloque modificadores conceituais no canto inferior direito.
Limite o número de elementos em seus ícones. A 32 px, limite o número de modificadores para um máximo de dois. A 16 px, limite o número de modificadores a um.

Preenchimento do elemento básico

Coloque elementos básicos com tamanhos consistentes. Se os elementos básicos não puderem ser centralizados no quadro, alinhe-os no canto superior esquerdo, deixando os pixels extras na parte inferior direita. Para obter os melhores resultados, aplique as diretrizes de preenchimento listadas na tabela na secção seguinte.

Modificadores

Todos os modificadores devem ter um recorte transparente de 1 px entre cada elemento, incluindo o fundo. Os elementos não devem sobrepor-se diretamente. Crie um espaço em branco entre as regras e as bordas. Os modificadores podem variar um pouco de tamanho, mas use essas dimensões como ponto de partida.

Tamanho do ícone	Preenchimento em torno do elemento básico	Tamanho do modificador
16 px	0	9 px
20 px	1px	10 px
24 px	1px	12 px
32 px	2px	14 px
40 px	2px	20 px
48 px	3px	22 px
64 px	5px	29 px
80 px	5px	38 px

Cores do ícone

Observação

Estas diretrizes de cor são destinadas a ícones da faixa de opções usados em Comandos do suplemento. Estes ícones não são compostos com a IU Fluente e a paleta de cores é diferente da paleta descrita em Microsoft UI Fabric | Cores | Partilhado.

Os ícones do Office têm uma paleta de cores limitada. Use as cores listadas na tabela a seguir para garantir uma integração perfeita com a interface de usuário do Office. Aplique as seguintes diretrizes à utilização da cor.

Use cor para transmitir significado, não como enfeite. Ela deve destacar ou enfatizar uma ação, status ou um elemento que diferencie explicitamente a marca.
Se possível, use somente uma cor além do cinza. Limite as cores adicionais a no máximo duas.
As cores devem ter uma aparência consistente em todos os tamanhos de ícone. Os ícones do Office têm paletas de cores um pouco diferentes para tamanhos de ícones diferentes. Os ícones de 16 px e mais pequenos são ligeiramente mais escuros e vibrantes do que 32 px e ícones maiores. Sem esses ajustes sutis, as cores parecem variar entre os tamanhos.

Nome da cor	RGB	Hex	Categoria
Texto Cinza (80)	80, 80, 80	#505050	Texto
Texto Cinza (95)	95, 95, 95	#5F5F5F	Texto
Texto Cinza (105)	105, 105, 105	#696969	Texto
Cinza Escuro 32	128, 128, 128	#808080	32 px e superior
Cinza Médio 32	158, 158, 158	#9E9E9E	32 px e superior
Cinza Claro TODO	179, 179, 179	#B3B3B3	Todos os tamanhos
Cinza Escuro 16	114, 114, 114	#727272	16 px e abaixo
Cinza Médio 16	144, 144, 144	#909090	16 e abaixo
Azul 32	77, 130, 184	#4d82B8	32 px e superior
Azul 16	74, 125, 177	#4A7DB1	16 px e abaixo
Amarelo TODO	234, 194, 130	#EAC282	Todos os tamanhos
Laranja 32	231, 142, 70	#E78E46	32 px e superior
Laranja 16	227, 142, 70	#E3751C	16 px e abaixo
Rosa TODO	230, 132, 151	#E68497	Todos os tamanhos
Verde 32	118, 167, 151	#76A797	32 px e superior
Verde 16	104, 164, 144	#68A490	16 px e abaixo
Vermelho 32	216, 99, 68	#D86344	32 px e superior
Vermelho 16	214, 85, 50	#D65532	16 px e abaixo
Roxo 32	152, 104, 185	#9868B9	32 px e superior
Roxo 16	137, 89, 171	#8959AB	16 px e abaixo

Ícones em modos de alto contraste

Os ícones do Office foram projetados para renderizar bem em modos de alto contraste. Elementos de primeiro plano são bem diferenciados dos planos de fundo para maximizar a legibilidade e habilitar a recoloração. Nos modos de alto contraste, o Office recolore qualquer pixel do seu ícone com um valor vermelho, verde ou azul menor que 190 para totalmente preto. Todos os outros pixels ficam na cor branca. Em outras palavras, cada canal RGB é avaliado onde, os valores de 0 a 189 ficam pretos e os valores de 190 a 255 ficam brancos. Outros temas de alto contraste fazem a recoloração usando o mesmo limite de valor de 190, mas com regras diferentes. Por exemplo, o tema de branco de alto contraste recolore todos pixels maiores que 190 para opaco, mas todos os outros pixels para transparente. Aplique as seguintes diretrizes para maximizar a legibilidade em definições de alto contraste.

Vise diferenciar elementos de primeiro plano e de plano de fundo ao longo do limite de valor de 190.
Siga os estilos visuais dos ícones do Office.
Use cores da nossa paleta de ícones.
Evite o uso de gradientes.
Evite blocos grandes de cores com valores similares.

Compartilhar via