Iconography
Comunicar acciones o funciones de forma clara y comprensible.
Iconos
Pueden utilizarse para representar acciones comunes, son pequeños gráficos utilizados para simbolizar acciones, archivos, dispositivos y directorios comunes, en harmonía están diseñados para ser sencillos, modernos, simpáticos y a veces extravagantes.
Cada icono se reduce a su forma mínima, expresando características esenciales, las formas de los iconos son gruesas y geométricas. Tienen un aspecto simétrico y coherente, lo que garantiza su legibilidad y claridad, incluso en tamaños pequeños.
Tamaño estándar
Los íconos estándar se visualizan a 24 dp x 24 dp. Para obtener una precisión de píxeles perfecta, se crean íconos para visualizarlos a escala del 100%.
Tamaños adicionales
Los íconos admiten tamaños adicionales: 20 dp, 40 dp y 48 dp, siendo 20 dp principalmente para escritorio, diseños densos y visuales a pequeña escala, y 40 dp y 48 dp optimizados para pantalla o titulares, además de tamaños de pantalla más grandes siempre en escala de 8 dp.
Contenido del Icono
Los íconos debe permanecer dentro del área activa, que es la región de una imagen que es poco probable que quede oculta a la vista, si se necesita un peso visual adicional, el contenido puede extenderse al relleno entre el área activa y el área de recorte (el tamaño completo de un gráfico). Ninguna parte del ícono debe sobresalir del área de recorte.
Área activa
El contenido de los iconos se limita al área activa de 20 dp x 20 dp, con 2 dp de relleno alrededor del perímetro.
Padding
2 dp de padding rodea el área en vivo.
Área activa densa
El contenido del ícono se limita al área activa de 16 dp x 16 dp, con 2 dp de relleno alrededor del perímetro.
Padding denso
2dp de padding rodea el área en vivo.
Formas de líneas clave
Grid de iconos y línea clave
La retícula de iconos establece reglas claras para el posicionamiento coherente, pero flexible, de los elementos gráficos.
Las formas de las líneas clave son la base de la cuadrícula. Utilizando estas formas básicas como directrices, puede mantener proporciones visuales coherentes en todos los iconos del sistema.
Formas básicas (geometría)
Existen líneas clave específicas para determinadas formas: círculo, cuadrado, rectángulo, ortogonales y diagonales. Estas formas básicas ayudan a unificar los iconos del sistema de Google y a regular su colocación en la cuadrícula de iconos.
Claridad (perfección del píxel)
Para evitar distorsionar un icono, coloque los iconos “en píxel” convirtiendo las coordenadas X e Y en números enteros, sin decimales.
Métricas de los íconos
Anatomía
1. Terminal de trazo
2. Esquina
3. Zona de contador
4. Trazo
5. Contra-trazo
6. Zona límite
Esquinas
Los radios de las esquinas son 2 dp por defecto. Las esquinas interiores deben ser cuadradas, no redondeadas. Para formas de 2 dp de ancho o menos, las esquinas no deben ser redondeadas.
Trazo
Los iconos utilizan una anchura de trazo uniforme de 2 puntos, incluidas las curvas, los ángulos y los trazos interiores y exteriores.
Formas complejas de iconos
Si un ícono requiere detalles complejos, pueden realizarse sutiles ajustes para mejorar su legibilidad. Estos ajustes se denominan correcciones ópticas. Cualquier corrección óptica debe utilizar las formas geométricas en las que se basan todos los demás iconos, sin sesgar ni distorsionar esas formas.
Ajustes complejos
El ícono del clip utiliza 1,5 dp del área de trazo posible de 2 dp para encajar varias curvas en el espacio de icono de 24 x 24 dp.
Escala pequeña
Este icono utiliza un trazo de 1,5 dp para mostrar ondas dentro del espacio para iconos de 24 x 24 dp.
Espacio
Un espacio adecuado debe rodear los iconos del sistema para permitir la legibilidad y el tacto. Los iconos de 24 dp pueden utilizar un objetivo táctil de 48 dp.
1. Zona libre
2. Colocación
Alineación del trazo
La colocación del trazo afecta al aspecto general de un icono, dependiendo de si el trazo se coloca en el interior, en el centro o en el exterior de una forma. En la mayoría de los casos, el trazo se alinea mejor con el interior de una forma.
1. Icono estándar
2. Alineación del trazo interior
3. Alineación de trazo central
4. Alineación del trazo exterior
La alineación del trazo con el interior de la forma produce un ícono legible con un peso de trazo coherente.
Para una legibilidad y un reconocimiento óptimos, el estilo de ícono estándar debe mantenerse en algunos casos, como los íconos humanos de cuerpo entero o los íconos propietarios.
Usos correctos
También puedes consultar
Color System
Illustrations
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
