Directrices de icono de estilo nuevo para complementos de Office
Perpetual Office 2016 y versiones posteriores usan la iconografía de estilo Fresh de Microsoft. Si prefiere que los iconos coincidan con el estilo monolínea de Microsoft 365, consulte Directrices de icono de estilo monolínea para complementos de Office.
Estilo visual de Office Fresh
Los iconos frescos solo incluyen elementos comunicativos esenciales. Los elementos que no son esenciales, como la perspectiva, el degradado o la fuente de luz, se han eliminado. Los iconos simplificados admiten un análisis más rápido de comandos y controles. Siga este estilo para adaptarse mejor a los clientes perpetuos de Office.
Procedimientos recomendados
Siga estas instrucciones al crear los iconos.
| Correcto | Incorrecto |
|---|---|
| Mantenga los objetos visuales simples y claros, centrándose en los elementos clave de la comunicación. | No use los artefactos que hacen que su icono parezca confuso. |
| Use el lenguaje de iconos de Office para representar comportamientos o conceptos. | No repropósito de glifos de Fabric Core para los comandos de complemento en la cinta de opciones de la aplicación de Office o en los menús contextuales. Los iconos de Fabric Core son estilísticamente diferentes y no coinciden. |
| Reutilice metáforas visuales comunes de Office, como el pincel para dar formato o la lupa para efectuar búsquedas. | No reutilice metáforas visuales para distintos comandos. Usar el mismo icono para diferentes acciones puede causar confusión. |
| Vuelva a dibujar los iconos para que sean más grandes o pequeños. Tómese el tiempo para volver a dibujar recortes, esquinas y bordes redondeados para maximizar la claridad de la línea. | No cambie el tamaño de los iconos reduciendo o aumentando el tamaño. Esto puede provocar una mala calidad visual y acciones confusas. Los íconos complejos creados con un tamaño más grande pueden perder claridad si se hacen más pequeños sin volver a dibujarlos. |
| Utilice un relleno blanco para mejorar la accesibilidad. La mayoría de los objetos de los iconos requerirá un fondo blanco para sean legibles tanto en los temas de la interfaz de usuario como en los modos de contraste alto. | Evite depender de su logotipo o marca para comunicar lo que hace un comando. Las marcas comerciales no siempre son reconocibles en tamaños de icono más pequeños cuando se aplican los modificadores. Las marcas de marca a menudo entran en conflicto con los estilos de icono de la cinta de opciones de la aplicación de Office y pueden competir por la atención del usuario en un entorno saturado. |
| Use el formato PNG con un fondo transparente. | Ninguna |
| Evite usar contenido localizable en sus iconos, incluidos los caracteres tipográficos, las indicaciones de los bordes irregulares de párrafo y los signos de interrogación. | Ninguna |
Requisitos y recomendaciones para el tamaño del icono
Los iconos de escritorio de Office son imágenes de mapa de bits. Los diferentes tamaños se presentan según la configuración de PPP del usuario y el modo táctil. Incluya los ocho tamaños admitidos para crear la mejor experiencia para todas las resoluciones y contextos compatibles. Los siguientes son los tamaños admitidos: se requieren tres.
- 16 px (obligatorio)
- 20 px
- 24 px
- 32 px (obligatorio)
- 40 px
- 48 px
- 64 px (recomendado, mejor para Mac)
- 80 px (obligatorio)
Importante
Para obtener una imagen que sea el icono representativo del complemento, consulte Creación de descripciones eficaces en AppSource y en Office para conocer el tamaño y otros requisitos.
Asegúrese de volver a dibujar los iconos para todos los tamaños en lugar de reducirlos para que se ajusten a ellos.
Anatomía y diseño del icono
Los iconos de Office normalmente se componen de un elemento base con modificadores conceptuales y de acción superpuestos. Los modificadores de acción representan conceptos tales como agregar, abrir, nuevo o cerrar. Los modificadores conceptuales representan el estado, la alteración o una descripción del icono.
Para crear los comandos que se alinean con la interfaz de usuario de Office, siga las directrices de diseño para los elementos base y los modificadores. De este modo asegura que los comandos tengan un aspecto profesional y que sus clientes puedan confiar en el complemento. Si hace excepciones a estas directrices, hágalo de forma intencionada.
La imagen siguiente muestra el diseño de los elementos base y los modificadores de un icono de Office.
- Centrar los elementos base en el marco de píxel con relleno vacío alrededor.
- Colocar modificadores de acción en la parte superior izquierda.
- Colocar modificadores conceptuales en la parte inferior derecha.
- Limitar el número de elementos en sus iconos. En 32 px, limita el número de modificadores a un máximo de dos. En 16 px, limita el número de modificadores a uno.
Relleno de un elemento base
Colocar elementos base de forma coherente a través de tamaños. Si no puede centrar los elementos base en el marco, puede alinearlos en la parte superior izquierda, dejando los píxeles adicionales en la parte inferior derecha. Para obtener mejores resultados, aplique las directrices de relleno que aparecen en la tabla de la sección siguiente.
Modificadores
Todos los modificadores deben tener un recorte transparente de 1 px entre cada elemento, incluido el fondo. Los elementos no deben superponerse directamente. Cree un espacio en blanco entre las reglas y los bordes. Los modificadores pueden variar de tamaño ligeramente, pero utilice estas dimensiones como punto de partida.
| Tamaño de icono | Relleno alrededor del elemento base | Tamaño del modificador |
|---|---|---|
| 16 px | 0 | 9 px |
| 20 px | 1 px | 10 px |
| 24 px | 1 px | 12 px |
| 32 px | 2 px | 14 px |
| 40 px | 2 px | 20 px |
| 48 px | 3 px | 22 px |
| 64 px | 5 px | 29 px |
| 80 px | 5 px | 38 px |
Colores del icono
Nota:
Estas directrices de colores son para iconos de la cinta de opciones utilizados en Comandos de complementos. Estos iconos no se representan con la interfaz de usuario de Fluent y la paleta de colores es diferente de la paleta descrita en Microsoft UI Fabric | Colores | Compartido.
Los iconos de Office tienen una paleta de colores limitada. Utilice los colores que se muestran en la tabla siguiente para garantizar una integración sin interrupciones en la interfaz de usuario de Office. Aplique las siguientes directrices al uso del color.
- Utilizar colores para comunicar el significado en lugar de para adornar. Debe resaltar o enfatizar una acción, un estado o un elemento que diferencie explícitamente la marca.
- Si es posible, utilice un solo color adicional además de gris. Limitar los colores adicionales a dos como máximo.
- Los colores deben tener un aspecto coherente en todos los tamaños del icono. Los iconos de Office tienen paletas de color ligeramente diferentes para tamaños de icono diferente. 16 px e iconos más pequeños son ligeramente más oscuros y más vibrantes que 32 px e iconos más grandes. Sin estos ajustes sutiles, los colores podrían variar dependiendo del tamaño.
| Nombre del color | RGB | Hexa | Color | Categoría |
|---|---|---|---|---|
| Texto gris (80) | 80, 80, 80 | #505050 |
|
Texto |
| Texto gris (95) | 95, 95, 95 | #5F5F5F |
|
Texto |
| Texto gris (105) | 105, 105, 105 | #696969 |
|
Texto |
| Gris oscuro 32 | 128, 128, 128 | #808080 |
|
32 px y superior |
| Gris medio 32 | 158, 158, 158 | #9E9E9E |
|
32 px y superior |
| Gris claro TODOS | 179, 179, 179 | #B3B3B3 |
|
Todos los tamaños |
| Gris oscuro 16 | 114, 114, 114 | #727272 |
|
16 px y por debajo |
| Gris medio 16 | 144, 144, 144 | #909090 |
|
16 e inferior |
| Azul 32 | 77, 130, 184 | #4d82B8 |
|
32 px y superior |
| Azul 16 | 74, 125, 177 | #4A7DB1 |
|
16 px y por debajo |
| Amarillo TODOS | 234, 194, 130 | #EAC282 |
|
Todos los tamaños |
| Naranja 32 | 231, 142, 70 | #E78E46 |
|
32 px y superior |
| Naranja 16 | 227, 142, 70 | #E3751C |
|
16 px y por debajo |
| Rosa TODOS | 230, 132, 151 | #E68497 |
|
Todos los tamaños |
| Verde 32 | 118, 167, 151 | #76A797 |
|
32 px y superior |
| Verde 16 | 104, 164, 144 | #68A490 |
|
16 px y por debajo |
| Rojo 32 | 216, 99, 68 | #D86344 |
|
32 px y superior |
| Rojo 16 | 214, 85, 50 | #D65532 |
|
16 px y por debajo |
| Púrpura 32 | 152, 104, 185 | #9868B9 |
|
32 px y superior |
| Púrpura 16 | 137, 89, 171 | #8959AB |
|
16 px y por debajo |
Iconos en modos de contraste alto
Los iconos de Office están diseñados para representarse correctamente en los modos de contraste alto. Los elementos en primer plano también se diferencian de los fondos para maximizar la legibilidad y permitir el cambio de color. En los modos de contraste alto, Office volverá a colorear de negro completo cualquier píxel del icono con un valor rojo, verde o azul inferior a 190. Todos los demás píxeles serán blancos. En otras palabras, se evalúa cada canal RGB donde los valores de 0 a 189 son negros y los valores de 190 a 255 son blancos. Otros temas de contraste alto cambian el color usando el mismo umbral de valor 190 pero con reglas distintas. Por ejemplo, el tema blanco de contraste alto cambiará el color de todos los píxeles que superen 190 a opaco, pero conservará los demás píxeles como transparentes. Aplique las siguientes directrices para maximizar la legibilidad en la configuración de contraste alto.
- Fije el objetivo de diferenciar los elementos de primer y segundo plano a lo largo del umbral de valor 190.
- Siga los estilos visuales del icono de Office.
- Use colores de nuestra paleta de icono.
- Evite el uso de los degradados.
- Evite grandes bloques de color con valores similares.