Preparar recursos para Marketplace App
Volver a la guía de Marketplace App
Usa estos recursos para preparar una experiencia visual coherente para los usuarios de Customer App. Las imágenes de marca y las pantallas de inicio pueden ayudar a identificar la primera pantalla, el estado de carga, los estados vacíos y las opciones de tipo de pedido en distintos dispositivos.
Antes de actualizar una imagen
Crea cada imagen para el propósito de visualización específico y usa las dimensiones documentadas y el formato PNG. Las imágenes de la aplicación y las pantallas de inicio se integran en el código de la aplicación. Después de cambiar una, vuelve a compilar la aplicación y envía la nueva versión a Google Play o Apple App Store. Los clientes verán el cambio después de instalar la versión actualizada.
Especificaciones de imágenes de Customer App
| Nombre del recurso | Dimensiones | Formato |
|---|---|---|
| Home Hero | 1242 × 2344 px | PNG |
| Logotype | 400 × 400 px | PNG |
| Empty active orders | 500 × 500 px | PNG |
| Not found | 808 × 693 px | PNG |
| Empty past orders | 500 × 500 px | PNG |
| Tutorial Images (1 to 6) | 1242 × 1708 px | PNG |
| Business list banner | 750 × 724 px | PNG |
| Order type – Curbside | 592 × 200 px | PNG |
| Order type – Delivery | 592 × 200 px | PNG |
| Order type – Drivethru | 592 × 200 px | PNG |
| Order type – Eatin | 592 × 200 px | PNG |
| Order type – Pickup | 592 × 200 px | PNG |
| Order type – Catering Delivery | 592 × 200 px | PNG |
| Order type – Catering Pickup | 592 × 200 px | PNG |
| Category All | 230 × 230 px | PNG |
| Logo Long | 584 × 130 px | PNG |
| No Network | 1002 × 904 px | PNG |
| Dummy product | 678 × 509 px | PNG |
Pantallas de inicio
Una imagen o pantalla de inicio es el primer elemento visual que ven los clientes mientras carga la aplicación móvil. Puede reforzar la identidad visual de la aplicación, mostrar claramente que está cargando y hacer que la transición a la aplicación sea coherente. Mantén la imagen sencilla y enfocada: incluye el logotipo de la aplicación y otros elementos visuales clave, evita texto denso o gráficos complejos, y usa colores, fuentes y estilos gráficos que coincidan con el resto de la aplicación.
Diseña pantallas de inicio con la resolución requerida para cada dispositivo y orientación. PNG es el formato documentado porque admite imágenes de alta calidad y transparencia. Antes del lanzamiento, prueba las imágenes en varios dispositivos para comprobar que se vean claras en orientaciones vertical y horizontal.
Pantallas de inicio de Android
La imagen y la tabla documentadas para Android muestran las mismas dimensiones en vertical y horizontal. Otra imagen relacionada de recursos de compilación presenta las dimensiones horizontales en la orientación inversa. Conserva los valores documentados a continuación hasta que la configuración de la aplicación confirme el campo requerido; no inviertas las dimensiones de otra guía.
| Orientación | Densidad | Dimensiones | Formato |
|---|---|---|---|
| Vertical | ldpi (Low DPI) | 200 × 320 px | PNG |
| Vertical | xhdpi (Extra High DPI) | 720 × 1280 px | PNG |
| Vertical | xxhdpi/hdpi (Extra Extra High DPI/High DPI) | 960 × 1600 px | PNG |
| Vertical | xxxhdpi/mdpi (Extra Extra Extra High DPI/Medium DPI) | 1280 × 1920 px | PNG |
| Horizontal | ldpi (Low DPI) | 200 × 320 px | PNG |
| Horizontal | xhdpi (Extra High DPI) | 720 × 1280 px | PNG |
| Horizontal | xxhdpi/hdpi (Extra Extra High DPI/High DPI) | 960 × 1600 px | PNG |
| Horizontal | xxxhdpi/mdpi (Extra Extra Extra High DPI/Medium DPI) | 1280 × 1920 px | PNG |
Pantallas de inicio de iOS
| Orientación | Dispositivo | Dimensiones | Formato |
|---|---|---|---|
| Vertical | iPad | 1536 × 2048 px | PNG |
| Vertical | iPhone 3/4 | 640 × 960 px | PNG |
| Vertical | iPhone 5/6 Plus | 640 × 960 px | PNG |
| Horizontal | iPad | 2048 × 1536 px | PNG |
| Horizontal | iPhone | 2208 × 1242 px | PNG |
| Cualquiera | Cualquier dispositivo | 2732 × 2732 px | PNG |
Por qué son importantes las imágenes de inicio
- Reconocimiento de marca: una imagen de inicio puede incluir el logotipo y otros elementos de marca para que sea más fácil reconocer la aplicación.
- Primera impresión: la pantalla de apertura puede establecer un tono claro y profesional desde el primer contacto.
- Atractivo visual: una transición visual mientras carga la aplicación puede mantener el interés y la atención.
- Experiencia de usuario: un indicador de carga puede fijar expectativas y reducir la espera percibida.
- Coherencia: que coincida con el resto del diseño ayuda a crear una experiencia unificada.
Planifica, compila y prueba
Antes de integrar los recursos, prepara todos los tamaños y orientaciones requeridos. Prueba las pantallas en los dispositivos compatibles y luego vuelve a compilar la aplicación para incluir los recursos en el código. Sube la versión resultante a la tienda correspondiente para que los clientes reciban las nuevas imágenes.
Casos de uso
El mismo flujo puede servir a un marketplace de entrega de comida que quiere una pantalla de inicio reconocible, a un minorista de moda que actualiza las imágenes por temporada o a una aplicación multiservicio que usa un tratamiento visual distinto para cada servicio. En todos los casos, la imagen debe corresponder al campo, formato, dimensiones y proceso de publicación asignados.
Los recursos coherentes con el tamaño correcto ayudan a crear una experiencia de aplicación reconocible y profesional en los dispositivos compatibles.