Contexto
Los componentes son elementos predefinidos, como los ladrillos LEGO, que puedes ensamblar de diversas maneras para construir tu pantalla de inicio, insertar contenido, así como componerlos y ordenarlos para lograr un objetivo deseado. Un diseño basado en componentes te permite crear el marco ideal y único de tu pantalla de inicio.
Lista de componentes
Estos elementos son las bases de tu pantalla de inicio. Conéctalos, reorganízalos y agrégales contenido para crear la pantalla de inicio perfecta para tu app.
Estructura de los componentes
Cuando los componentes se conectan de forma vertical, forman una estructura en la pantalla de inicio. Al aplicar el contenido, obtienes una pantalla de inicio predefinida.
Funcionalidad de los componentes
Algunos de ellos se pueden reordenar, multiplicar o incluso desactivar.
- Componentes reordenados
Cambia el orden de los componentes para modificar la estructura vertical de la pantalla de inicio.
- Componentes multiplicados
Multiplica el mismo componente varias veces para aplicar diferentes tipos de contenido.
- Componentes desactivados
Desactiva los componentes que no quieres y usa solo aquellos que funcionen mejor.
Visibilidad de los componentes
Para que resulte más sencillo, algunos de los componentes también pueden desglosarse en elementos más pequeños. Puedes desactivar la funcionalidad específica de un solo componente que no quieras que esté ahí.
Ejemplos:
Cómo aplicar contenido a los componentes
1. Imagen principal
La imagen principal se estructura como imagen + botón y es lo primero que ve el usuario al abrir la app. La práctica recomendada para utilizar este componente es representar visualmente tu marca con la imagen y usar el botón como enlace a la acción más importante que deseas que los usuarios realicen.
Botón con enlace a:
- Pedido
- Ofertas
- Recompensas
- Promociones
- Acciones personalizadas [URL/Deeplink]
Si, por algún motivo, no quieres que el botón esté ahí, también puedes desactivarlo.
Configurar la imagen principal es fácil y puedes hacerlo con estos pasos:
- Elige la versión de la imagen principal (regular o compacta).
- Elige la acción del botón (hacia dónde dirigirá al usuario).
- Elige los colores y el texto del botón (texto, color de fondo).
- Elige la imagen (qué imagen representa mejor la acción del botón).
Es necesario proporcionar los siguientes detalles para que este componente se agregue a tu pantalla de inicio:
|
Atributo |
Descripción |
Tipo |
Valor de ejemplo |
Se traduce |
|
Imagen de fondo |
Imagen principal |
URL (imagen) |
Sí |
|
|
Color de fondo del botón |
Color de fondo del botón de llamada a la acción (sin presionar) |
Color HEX |
#00112233 |
No |
|
Color de fondo del botón (presionado) |
Color de fondo del botón de llamada a la acción cuando el usuario lo presiona |
Color HEX |
#00112233 |
No |
|
Color del texto del botón |
Color del texto que figura en el botón |
Color HEX |
#00112233 |
No |
|
Color del texto del botón (presionado) |
Color del texto en el botón cuando el usuario lo presiona |
Color HEX |
#00112233 |
No |
|
Etiqueta del botón |
Texto que se muestra en el botón |
Texto |
Hacer pedido |
Sí |
|
Acción |
Acción que se debe activar cuando el usuario toca el botón |
Acción (consulta la siguiente tabla) |
Pedido |
No |
2. Lista de imágenes grandes
La lista de imágenes grandes muestra el contenido en un control deslizante con imágenes grandes, de modo que en la pantalla entre solo una tarjeta de contenido completa y haya una indicación de la siguiente tarjeta de contenido (si hay varias).
Incluye un encabezado y una lista de artículos. El encabezado puede incluir un enlace si se muestra un tipo de contenido predeterminado en el componente. No se admite un enlace en el encabezado con los artículos personalizados.
Usa el componente de lista de imágenes grandes para mostrar lo siguiente:
- Artículos de noticia
- Ofertas
- Recompensas
- Promociones
- Locales cercanos
- Acciones personalizadas (muestra las tarjetas con imagen, texto y acción personalizados)
Es necesario proporcionar los siguientes detalles para que este componente se agregue a tu pantalla de inicio:
|
Atributo |
Descripción |
Tipo |
Valor de ejemplo |
Se traduce |
|
Título del encabezado |
Texto que figura en el encabezado. Si está vacío, el encabezado no se mostrará |
Texto |
Ofertas |
Sí |
|
Enlace del encabezado |
Texto que figura en el enlace del encabezado. Si está vacío, el enlace del encabezado no se mostrará |
Texto |
Ver todo |
Sí |
|
Imagen visible |
Si se debe mostrar una imagen para cada elemento del componente |
Sí/no |
Sí |
No |
|
Título visible |
Si se debe mostrar un título para cada elemento del componente |
Sí/no |
Sí |
No |
|
Descripción visible |
Si se debe mostrar una descripción para cada elemento del componente |
Sí/no |
Sí |
No |
|
Contenido |
Tipo de contenido que debe mostrarse en el componente |
Contenido (consulta la siguiente tabla) |
Ofertas |
Sí |
Ejemplos:
3. Lista de imágenes pequeñas
La lista de imágenes pequeñas muestra el contenido en un control deslizante con una imagen de tamaño medio. Aquí se aplican las mismas reglas que para la lista de imágenes grandes.
Incluye un encabezado y una lista de artículos. El encabezado puede incluir un enlace si se muestra un tipo de contenido predeterminado en el componente. No se admite un enlace en el encabezado con los artículos personalizados.
Usa el componente de lista de imágenes pequeñas para mostrar lo siguiente:
- Artículos de noticia
- Ofertas
- Recompensas
- Promociones
- Locales cercanos
- Acciones personalizadas (muestra las tarjetas con imagen, texto y acción personalizados)
Es necesario proporcionar los siguientes detalles para que este componente se agregue a tu pantalla de inicio:
|
Atributo |
Descripción |
Tipo |
Valor de ejemplo |
Se traduce |
|
Título del encabezado |
Texto que figura en el encabezado. Si está vacío, el encabezado no se mostrará |
Texto |
Noticias |
Sí |
|
Enlace del encabezado |
Texto que figura en el enlace del encabezado. Si está vacío, el enlace del encabezado no se mostrará |
Texto |
Ver todo |
Sí |
|
Imagen visible |
Si se debe mostrar una imagen para cada elemento del componente |
Sí/no |
Sí |
No |
|
Título visible |
Si se debe mostrar un título para cada elemento del componente |
Sí/no |
Sí |
No |
|
Descripción visible |
Si se debe mostrar una descripción para cada elemento del componente |
Sí/no |
Sí |
No |
|
Contenido |
Tipo de contenido que debe mostrarse en el componente |
Contenido (consulta la siguiente tabla) |
Noticias |
Sí |
Ejemplos:
4. Lista de locales
La lista de locales solo se utiliza como un componente que permite mostrar los locales cercanos en la pantalla de inicio de la app. Otra manera de hacer esto es usar un componente de lista de imágenes grandes o medianas, como se explicó anteriormente.
Es necesario proporcionar los siguientes detalles para que este componente se agregue a tu pantalla de inicio:
|
Atributo |
Descripción |
Tipo |
Valor de ejemplo |
Se traduce |
|
Título del encabezado |
Texto que figura en el encabezado. Si está vacío, el encabezado no se mostrará |
Texto |
Cerca |
Sí |
|
Enlace del encabezado |
Texto que figura en el enlace del encabezado. Si está vacío, el enlace del encabezado no se mostrará |
Texto |
Ver todo |
Sí |
|
Nombre del local visible |
Si se debe mostrar el nombre del local para cada local en el componente |
Sí/no |
Sí |
No |
|
Distancia visible |
Si se debe mostrar la distancia para cada local en el componente |
Sí/no |
Sí |
No |
|
Dirección y horario de apertura visible |
Si se deben mostrar la dirección y los horarios de apertura para cada local en el componente |
Sí/no |
Sí |
No |
|
Etiqueta “ORDER WITH APP” visible |
Si la etiqueta “ORDER WITH APP” es visible para cada local en el componente |
Sí/no |
Sí |
No |
Ejemplo:
5. Vista de texto
La vista de texto es un componente utilizado principalmente con fines informativos. Se puede incluir un enlace a una página externa o, eventualmente, a un deep link implementado dentro de la app.
Es necesario proporcionar los siguientes detalles para que este componente se agregue a tu pantalla de inicio:
|
Atributo |
Descripción |
Tipo |
Valor de ejemplo |
Se traduce |
|
Título |
Texto del título que se debe mostrar |
Texto |
Restricciones debido al COVID-19 |
Sí |
|
Información |
Texto de la información que se debe mostrar |
Texto |
Durante este tiempo sin precedentes en que debemos aplicar restricciones debido al COVID-19, solo aceptamos pedidos para llevar y con envío a domicilio |
Sí |
|
Enlace |
Texto del enlace que se debe mostrar |
Texto |
Más información |
Sí |
|
Acción del enlace |
Acción que se debe activar cuando el usuario toca el enlace |
Acción |
URL (https://google.com) en el navegador en la app |
Sí |
Ejemplo:
Puedes utilizar este componente como una combinación de lo siguiente:
6. Componente basado en funciones
Este componente solo está disponible si se habilitaron determinadas funciones en la app de tu marca.
Componente de recomendación
Si tu app tiene activado el programa de recomendación, este componente aparecerá en la página de inicio para promocionar esa funcionalidad.
Plantillas predefinidas
Aquí te brindamos algunos ejemplos para mostrarte en general cómo puedes estructurar la página de inicio.
Definiciones
Acciones
|
Opción |
Descripción |
Dónde se puede abrir |
Notas |
|
Noticias |
Abre la lista de artículos de noticias |
N/C |
|
|
Pedido |
Abre la página de pedidos |
N/C |
|
|
Recompensas |
Abre la página de recompensas y la pestaña “Rewards” |
N/C |
|
|
Ofertas |
Abre la página de recompensas y la pestaña “Offers” |
N/C |
|
|
Promociones |
Abre la página de recompensas y la pestaña “Offers” |
N/C |
|
|
Locales |
Abre la pantalla con la lista de Store Finder |
N/C |
No disponible para el componente principal |
|
URL personalizada |
URL |
Navegador externo (Safari/Chrome) |
Tipos de contenido predeterminados
|
Opción |
Descripción |
|
Noticias |
Lista de artículos de noticias configurada en el CMS |
|
Ofertas |
Lista de ofertas disponibles para el usuario |
|
Recompensas |
Lista de recompensas configuradas en el MC |
|
Promociones |
Lista de promociones disponibles para el usuario o el dispositivo. Si el usuario no está conectado, se muestra un elemento para pedirle que se registre o inicie sesión |
|
Locales |
Indica que se le mostrará al usuario una lista de los locales más cercanos |
Contenido personalizado
Compatible con la lista de imágenes grandes y la lista de imágenes pequeñas.
|
Atributo |
Descripción |
Tipo |
Valor de ejemplo |
|
Imagen |
Imagen deseada que se presentará dentro del elemento La imagen debe tener una relación de aspecto de 3:2 |
URL u otro recurso de imagen |
www.google.com |
|
Título |
Título deseado que se presentará dentro del componente del elemento |
Texto |
¡Te damos la bienvenida al nuevo local! |
|
Descripción |
Descripción deseada que se presentará dentro del componente del elemento |
Texto |
¡Ven a visitar el local más nuevo de la ciudad! |
|
Acción |
Acción personalizada que se proporcionará al hacer clic en el elemento |
URL |
www.google.com |
Imágenes de la pantalla de inicio
Se utilizan como imagen de bienvenida en la página de inicio de la app. Puedes elegir una imagen de inicio regular o compacta.
Ten en cuenta que es muy importante no colocar ningún texto ni logotipo fuera del área segura, ya que, de hacerlo, quedará oculto tras el botón o la barra de estado.
También recuerda que, en el caso de las marcas que utilizan Loyalty, el área segura es diferente. Consulta los requisitos para la pantalla de inicio en este artículo sobre Loyalty .
Imagen regular de la pantalla de inicio
Requisitos
- Tamaño de la imagen: 1125 x 1665 píxeles
- Área segura: 1125 x 1205 píxeles
- Formato: PNG, JPG
- Nombre del archivo: hero_image.png
Imagen compacta de la pantalla de inicio
Requisitos
- Tamaño de la imagen: 1125 x 996 píxeles
- Área segura: 1125 x 580 píxeles
- Formato: PNG, JPG
- Nombre de archivo: hero_image_compact.png
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.