Novas diretrizes de ícone de estilo para suplementos do Office
O Perpétuo Office 2016 e posteriormente usam a iconografia de estilo Fresh da Microsoft. Se preferir que seus ícones correspondam ao estilo Monoline do Microsoft 365, consulte Diretrizes de ícone de estilo monoline para suplementos do Office.
Estilo 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 esse estilo para se ajustar melhor aos clientes perpétuos do Office.
Práticas recomendadas
Siga estas diretrizes ao criar seus ícones.
Fazer | Não fazer |
---|---|
Mantenha os visuais simples e claros, focando 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 glifos do Fabric Core para comandos de suplemento na faixa de opções de aplicativo do Office ou menus contextuais. Os ícones do Fabric Core são estilisticamente 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 geralmente entram em conflito com os estilos de ícone de faixa de opções do aplicativo do Office e podem competir pela atenção do usuário em um 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. A seguir estão os tamanhos com suporte – três são necessários.
- 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 suplemento, consulte Create listagens efetivas no AppSource e no Office para obter 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
Os ícones do Office normalmente são compostos por um elemento base com modificadores conceituais e de ação 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. Em 32 px, limite o número de modificadores para um máximo de dois. Em 16 px, limite o número de modificadores para 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 melhores resultados, aplique as diretrizes de preenchimento listadas na tabela na seção a seguir.
Modificadores
Todos os modificadores devem ter um recorte transparente de 1 px entre cada elemento, incluindo o plano de fundo. Os elementos não devem se sobrepor 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. Esses ícones não são renderizados com interface do usuário fluente e a paleta de cores é diferente da paleta descrita no Microsoft UI Fabric | Cores | Compartilhado.
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 diretrizes a seguir ao uso de 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. 16 px e ícones menores são ligeiramente mais escuros e mais vibrantes 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 | 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 acima | |
Cinza Médio 32 | 158, 158, 158 | #9E9E9E | 32 px e acima | |
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 acima | |
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 acima | |
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 acima | |
Verde 16 | 104, 164, 144 | #68A490 | 16 px e abaixo | |
Vermelho 32 | 216, 99, 68 | #D86344 | 32 px e acima | |
Vermelho 16 | 214, 85, 50 | #D65532 | 16 px e abaixo | |
Roxo 32 | 152, 104, 185 | #9868B9 | 32 px e acima | |
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 diretrizes a seguir para maximizar a legibilidade em configuraçõ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
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulteEnviar e exibir comentários de