Apariencia e identidad visual del quiosco

Pasos y configuración

Primero consulte qué elementos puede personalizar y cómo puede quedar el resultado. Los números de las ilustraciones corresponden a los pasos siguientes. Todo es opcional; cambie solo lo necesario.

Aspecto del quiosco horizontal y vertical

Ilustración localizada a partir de la captura facilitada. Los textos del menú instalado pueden variar.

El mismo quiosco en horizontal y vertical. Es un diseño de ejemplo; el número de aplicaciones no impone una distribución fija.

Estructura de una tarjeta de aplicación

Invitación a tocar la pantalla

Ilustración localizada a partir de la captura facilitada. Los textos del menú instalado pueden variar.

El verde representa la capa de aplicaciones, el azul la de presentación y el plano transparente frontal la invitación a tocar. Los contornos de color solo explican la organización; no forman parte de la imagen subida. Configure la invitación a tocar en el paso 5.

Distribución con galería de fotos

La distribución con galería cambia el menú (3). Añada fotos y configure el recorte en el paso 4. El recorte rellena el área y puede cortar bordes; sin recorte se muestra toda la foto sobre fondo desenfocado.

Fondo global y texto del diálogo

11

Aviso de inactividad

La aplicación se cerrará.

Continuar

Ejemplos reales de la capa de aplicaciones: aspecto y contenido propios

Estos ejemplos muestran capas de aplicaciones en uso real: menús personalizados con logotipos, colores y contenido de los usuarios. La capa admite pantallas horizontales y verticales.

1. Elija el logotipo de la capa de aplicaciones. Elija una imagen de logotipo de sus archivos. Utilice fondo transparente si debe integrarse en el panel. Cambiar el color del panel no elimina un rectángulo blanco incluido en la imagen. El logotipo y sus colores no se recolorean automáticamente.
2. Introduzca el título del menú. Introduzca el título que verán los visitantes, como «Centro de visitantes». El nombre de ubicación en la administración y el título del menú son campos distintos.
3. Elija la distribución del menú y el tamaño de los iconos.
   • Tipo de distribución de aplicaciones — Elija «Con galería de fotos» o «Sin galería de fotos». Las fotos cambian el espacio disponible y la distribución. Sin galería, ese espacio se utiliza para aplicaciones.
   • Tamaño de los iconos de aplicaciones — El control cambia el tamaño de la imagen dentro de una tarjeta. Por ejemplo, 60 % escala la imagen en su área, no el número de aplicaciones ni el tamaño de la tarjeta. Va del 0 al 100 %. Al 0 %, la imagen no es visible.

   El quiosco elige tamaños y distribución según el número de aplicaciones, la orientación y el diseño. Las cuadrículas 5 × 3 y 4 × 5 son ejemplos, no un ajuste de columnas. Si solo hay una aplicación, puede abrirla directamente sin mostrar el menú.

4. Añada fotos y configure el recorte.

   Añada y retire fotos en la pestaña «Galería de fotos de la capa de aplicaciones». Después seleccione «Con galería de fotos» en Imagen de marca. Subir fotos no selecciona por sí solo esa distribución.

   • Recorte de archivos de la galería de la capa de aplicaciones — Habilitado: la foto rellena el área y puede recortarse en los bordes. Deshabilitado: se muestra toda la foto y una versión desenfocada rellena el espacio restante.

   Esta galería pertenece al menú del quiosco. Es independiente de la aplicación Galería y de las imágenes de las campañas.

5. Configure la invitación a tocar la pantalla.

   Una imagen superpuesta a la capa de presentación indica que se puede tocar para abrir la capa de aplicaciones. Es independiente del logotipo y las fotos. Elija una imagen para cada orientación utilizada. Las zonas transparentes dejan visible el contenido inferior.

   La invitación a tocar no sustituye la navegación de una web. Si utiliza Sitio web sin controles del sistema, el desarrollador puede añadir botones para volver al menú o a las campañas. Consulte el ejemplo y las instrucciones en la guía para controlar las capas desde su web.
   • Pantalla horizontal: 16:9
   • Pantalla vertical: 9:16
   • Diseño propio: prepare una imagen transparente con la resolución de destino para cada orientación utilizada. Súbala y selecciónela en el ajuste de superposición correspondiente.
   • Gráficos y posición: sitúe el icono o texto en cualquier lugar del archivo. Las zonas transparentes mantienen visible el contenido.
   • Qué hace la superposición: es un añadido sobre la capa de presentación, no una tercera capa independiente. La posición de un icono no define el área táctil; el cambio depende de los ajustes de capas y aplicaciones.

   También puede utilizar los PNG transparentes originales siguientes. Súbalos en la imagen de marca de la ubicación al campo de orientación correspondiente. El damero de la vista previa indica transparencia y no forma parte del archivo.

   Horizontal

   

   PNG · 2048 × 1152 px

   Descargar PNG – Horizontal

   Vertical

   

   PNG · 1152 × 2048 px

   Descargar PNG – Vertical

   En los pasos 6–11 definirá los colores de cada elemento del quiosco. Cada grupo afecta a un elemento concreto, como el panel principal o el fondo del icono.

   Cada grupo tiene dos controles: «Color de fondo» define el fondo y «Color del texto y los símbolos» los elementos del primer plano. Empiece por paneles y tarjetas y compruebe la legibilidad tras cada cambio.

   Haga clic en la muestra junto al campo. Ajuste tono, brillo y transparencia y confirme con ACEPTAR. Si conoce el código exacto de su marca, puede introducirlo directamente.

   Asegure suficiente contraste: texto oscuro sobre fondo claro o al revés. Los colores de la interfaz no recolorean fotos, vídeos, logotipos subidos ni contenido de webs externas.
6. Defina los colores del panel principal. El panel con logotipo, título y reloj: a la izquierda en horizontal y arriba en vertical.
   • Color de fondo: El fondo del panel principal.
   • Color del texto y los símbolos: Texto y símbolos que utilizan el color del primer plano del panel principal.
7. Defina los colores del panel secundario. El área de contenido del menú: a la derecha en horizontal y debajo del panel principal en vertical.
   • Color de fondo: El fondo del panel secundario, también utilizado en otras pantallas de aplicaciones.
   • Color del texto y los símbolos: Texto y símbolos asociados sobre este fondo.
8. Defina el fondo de los iconos de aplicaciones. El área detrás de la imagen de un icono de aplicación.
   • Color de fondo: El fondo del icono, especialmente visible alrededor de imágenes pequeñas o transparentes.
   • Color del texto y los símbolos: Utilizado por otros controles. No recolorea la imagen del icono del menú.
9. Defina los fondos de botones y nombres de aplicaciones. El fondo de nombres y botones que utilizan este color.
10. Defina los colores del texto y los símbolos de botones y aplicaciones. Nombres de aplicaciones y símbolos de los controles correspondientes.
11. Defina el fondo global de las aplicaciones.

    El fondo global se utiliza en el diálogo de inactividad y en aplicaciones como el reproductor USB y Laberinto. No define el fondo principal del menú de tarjetas. Compruebe el contraste y mantenga los valores predeterminados si no necesita cambiarlos.

    • Color de fondo: El fondo de los elementos que utilizan este grupo de colores.
    • Color del texto y los símbolos: Texto y símbolos asociados, por ejemplo en el aviso de inactividad.

Guarde los cambios. El servidor pone en cola la capa actualizada para los dispositivos de la ubicación. Deben estar conectados y las imágenes nuevas deben terminar de descargarse. Compruebe el resultado en un dispositivo asignado; guardar el formulario no confirma la entrega.