Móvil: Iconos

Contexto

En este artículo, queremos ofrecerte información general sobre el uso de iconos, así como de las imágenes de la pantalla de inicio. Veamos uno a uno.

Antes de empezar...

... recuerda que los iconos deben ser tan simples y fáciles de interpretar como sea posible. El usuario que ve un icono debe entender rápidamente y en su totalidad lo que significa y lo que hace. Ten en cuenta que tu marca puede ofrecer servicios a clientes de todo el mundo y de diferentes ámbitos, por lo que debes elegir símbolos universales y con un significado lo más claro posible.

Ejemplo:

El icono de la izquierda no es correcto. Tiene demasiados colores, no tiene el tamaño adecuado, no está bien recortado e incluye demasiados detalles.

El icono de la derecha es correcto. Es simple y está dimensionado y recortado correctamente. Lo creamos para ti :)

Iconos

La iconografía es una de las partes más fundamentales de la interfaz de usuario. Es un lenguaje visual que representa comandos y contenidos, y revela el significado detrás de la funcionalidad. Los iconos deben representar siempre metáforas visuales sencillas que los usuarios puedan entender y reconocer al instante.

Puedes elegir entre dos conjuntos de iconos que te proporcionamos, o bien puedes crear los tuyos propios siguiendo nuestras pautas sobre iconos.

Ten en cuenta que siempre puedes cambiar los colores de los iconos en el Centro de personalización para que representen de forma más adecuada tu marca.

Conjuntos de iconos Figma

Conjunto de iconos - Con mayor grosor 

Conjunto de iconos - Con menor grosor

Iconos grandes

Los iconos grandes se usan en varios lugares de la app. Deberás diseñarlos de acuerdo con el estilo de tu marca. También puedes utilizar los que se proporcionan en el conjunto. Si deseas sustituir solo algunos de los iconos del conjunto, asegúrate de que los nuevos iconos tengan el mismo estilo visual que aquellos.

Requisitos

• Tamaño del icono: 48 x 48 píxeles
• Formato: SVG
• Convención de nomenclatura adecuada

Iconos del tipo de pedido

En función de los tipos de pedidos que la app de tu marca haya habilitado, se proporcionarán los iconos correspondientes.

Opción de comida para llevar

Si la app de tu marca habilitó curbside como tipo de pedido, deberían aparecer estos iconos.

Oferta/recompensa - Canales de canje

En función de los canales de canje que la app de tu marca haya habilitado, se proporcionarán los iconos correspondientes.

Pedidos inteligentes - Modos de traslado

Si la app de tu marca habilitó los pedidos inteligentes como función, estos iconos deberían estar cubiertos.

Iconos medianos

Estos son los iconos más utilizados en la app. Deberás diseñarlos de acuerdo con el estilo de tu marca. También puedes utilizar los que se proporcionan en el conjunto.

Requisitos

• Tamaño del icono: 24 x 24 píxeles
• Formato: SVG
• Convención de nomenclatura adecuada

Vista previa del conjunto de iconos con menos grosor

Vista previa del conjunto de iconos con más grosor

Iconos pequeños

Se utilizan en muy pocos lugares de la app. Deberás diseñarlos de acuerdo con el estilo de tu marca. También puedes utilizar los que se proporcionan en el conjunto.

Requisitos

• Tamaño del icono: 16 x 16 píxeles
• Formato: SVG
• Convención de nomenclatura adecuada

Otros iconos

Este grupo incluye los iconos utilizados en la pantalla del mapa, así como los iconos de signo más y menos que se usan en la pantalla de artículos. Deberás diseñarlos de acuerdo con el estilo de tu marca. También puedes utilizar los que se proporcionan en el conjunto.

Requisitos

• Tamaño del icono: se define debajo de cada icono
• Formato: SVG
• Convención de nomenclatura adecuada

Ten en cuenta lo siguiente: Si tu app utilizará idiomas como árabe o hebreo, debes proporcionar algunos iconos RTL (de derecha a izquierda). Encontrarás todos los iconos necesarios en el archivo Figma en las secciones de RTL (para los grupos de iconos más gruesos y más finos).

Si tienes previsto crear tu propio conjunto de iconos, debes seguir la nomenclatura que ya utilizamos. Encontrarás los nombres de los iconos en Figma en la barra lateral de capas.