Compartilhar via


Novas diretrizes de ícones de estilo para Suplementos do Office

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.

Ilustração da recomendação para redesenhar ícones por tamanho em vez de encolher ícones. Por exemplo, poderá ter de utilizar menos elementos num ícone pequeno em vez de reduzir verticalmente uma imagem maior.

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.

Um elemento base de ícone no centro com um modificador no canto inferior direito e um modificador de ação no canto superior esquerdo.

  • 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 Cor Categoria
Texto Cinza (80) 80, 80, 80 #505050 Cor cinzenta 80 para texto. Texto
Texto Cinza (95) 95, 95, 95 #5F5F5F Cor cinzenta 95 para texto. Texto
Texto Cinza (105) 105, 105, 105 #696969 Cor cinzenta 105 para texto. Texto
Cinza Escuro 32 128, 128, 128 #808080 Cor cinzenta escura para 32 px e maior. 32 px e superior
Cinza Médio 32 158, 158, 158 #9E9E9E Cor cinzenta média para 32 px e maior. 32 px e superior
Cinza Claro TODO 179, 179, 179 #B3B3B3 Cor cinzenta clara para todos os tamanhos de imagem. Todos os tamanhos
Cinza Escuro 16 114, 114, 114 #727272 Cor cinzenta escura para 16 px e menor. 16 px e abaixo
Cinza Médio 16 144, 144, 144 #909090 Cor cinzenta média para 16 px e menor. 16 e abaixo
Azul 32 77, 130, 184 #4d82B8 Cor azul para 32 px e maior. 32 px e superior
Azul 16 74, 125, 177 #4A7DB1 Cor azul para 16 px e menor. 16 px e abaixo
Amarelo TODO 234, 194, 130 #EAC282 Cor amarela para todos os tamanhos de imagem. Todos os tamanhos
Laranja 32 231, 142, 70 #E78E46 Cor de laranja para 32 px e maior. 32 px e superior
Laranja 16 227, 142, 70 #E3751C Cor de laranja para 16 px e menor. 16 px e abaixo
Rosa TODO 230, 132, 151 #E68497 Cor cor de rosa para todos os tamanhos de imagem. Todos os tamanhos
Verde 32 118, 167, 151 #76A797 Cor verde para 32 px e maior. 32 px e superior
Verde 16 104, 164, 144 #68A490 Cor verde para 16 px e menor. 16 px e abaixo
Vermelho 32 216, 99, 68 #D86344 Cor vermelha para 32 px e maior. 32 px e superior
Vermelho 16 214, 85, 50 #D65532 Cor vermelha para 16 px e menor. 16 px e abaixo
Roxo 32 152, 104, 185 #9868B9 Cor roxa para 32 px e maior. 32 px e superior
Roxo 16 137, 89, 171 #8959AB Cor roxa para 16 px e menor. 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.

Confira também