Apparence et identité visuelle du kiosque

Étapes et paramètres

Commencez par découvrir les éléments personnalisables et le résultat possible. Les numéros des illustrations correspondent aux étapes ci-dessous. Toutes les options sont facultatives ; ne modifiez que le nécessaire.

Apparence de la borne en paysage et portrait

Illustration localisée à partir de la capture fournie. Les libellés du menu installé peuvent différer.

La même borne en paysage et portrait. C’est un exemple de design ; le nombre d’applications n’impose pas une disposition fixe.

Structure d’une tuile d’application

Invitation au toucher

Illustration localisée à partir de la capture fournie. Les libellés du menu installé peuvent différer.

Le vert représente la couche applications, le bleu la couche présentation et le plan transparent au premier plan l’invitation au toucher. Les contours colorés expliquent l’organisation ; ils ne font pas partie de l’image importée. Configurez l’invitation au toucher à l’étape 5.

Disposition avec galerie de photos

La disposition avec galerie modifie le menu (3). Ajoutez les photos et réglez le recadrage à l’étape 4. Le recadrage remplit la zone en pouvant couper les bords ; sans recadrage, la photo entière apparaît sur un fond flouté.

Fond global et texte de dialogue

11

Avertissement d’inactivité

L’application va se fermer.

Continuer

Exemples réels de couche applications : votre apparence et vos contenus

Ces exemples montrent des couches applications en usage réel : menus personnalisés avec logos, couleurs et contenus des utilisateurs. La couche applications prend en charge les écrans paysage et portrait.

1. Choisissez le logo de la couche applications. Choisissez une image de logo dans vos médias. Utilisez un fond transparent pour l’intégrer au panneau. Modifier la couleur du panneau ne supprime pas un rectangle blanc inclus dans l’image. Le logo et ses couleurs ne sont pas recolorés automatiquement.
2. Saisissez le titre du menu. Saisissez le titre visible dans le menu, par exemple « Centre des visiteurs ». Le nom du site dans l’administration et le titre du menu sont deux champs distincts.
3. Choisissez la disposition du menu et la taille des icônes.
   • Type de disposition des applications — Choisissez « Avec galerie de photos » ou « Sans galerie de photos ». Les photos modifient l’espace disponible et la disposition. Sans galerie, cet espace sert aux applications.
   • Taille des icônes d’applications — Le curseur modifie la taille de l’image dans une tuile. Par exemple, 60 % redimensionne l’image dans sa zone, et non le nombre d’applications ni la taille de la tuile. La plage va de 0 à 100 %. À 0 %, l’image est invisible.

   La borne adapte la taille et la disposition des tuiles au nombre d’applications, à l’orientation et au modèle choisi. Les grilles 5 × 3 et 4 × 5 sont des exemples, pas un réglage du nombre de colonnes. Avec une seule application, l’appareil peut l’ouvrir directement sans menu.

4. Ajoutez des photos et réglez le recadrage.

   Ajoutez et supprimez les photos dans l’onglet « Galerie de photos de la couche applications ». Sélectionnez ensuite « Avec galerie de photos » dans l’identité visuelle. Importer des photos ne sélectionne pas à lui seul cette disposition.

   • Recadrage des médias de la galerie de la couche applications — Activé : la photo remplit sa zone et ses bords peuvent être coupés. Désactivé : la photo entière est affichée, avec une version floutée de la même image dans l’espace restant.

   Cette galerie appartient au menu de la borne. Elle est distincte de l’application Galerie et des images diffusées en campagne.

5. Définissez l’invitation au toucher.

   Une image superposée à la couche présentation indique aux visiteurs qu’ils peuvent toucher l’écran pour ouvrir la couche applications. Elle est distincte du logo et des photos. Choisissez une image par orientation utilisée. Les zones transparentes laissent voir les contenus dessous.

   L’invitation au toucher ne remplace pas la navigation du site. Si vous utilisez Site web sans les commandes du système, le développeur peut ajouter des boutons de retour au menu ou aux campagnes. Consultez l’exemple et les instructions dans le guide de commande des couches depuis votre site.
   • Écran paysage : 16:9
   • Écran portrait : 9:16
   • Visuel personnalisé : préparez une image transparente à la résolution cible pour chaque orientation utilisée. Importez-la et sélectionnez-la dans le réglage de superposition correspondant.
   • Graphismes et placement : placez l’icône ou le texte librement dans le fichier. Les zones transparentes laissent les contenus visibles.
   • Rôle de la superposition : c’est un ajout au-dessus de la couche présentation, pas une troisième couche autonome. La position d’une icône ne définit pas la zone tactile ; la transition dépend des réglages de couches et d’applications.

   Vous pouvez aussi utiliser les PNG transparents d’origine ci-dessous. Importez-les dans l’identité visuelle du site, dans le champ de l’orientation correspondante. Le damier de l’aperçu indique la transparence et ne fait pas partie du fichier.

   Format horizontal

   

   PNG · 2 048 × 1 152 px

   Télécharger le PNG – Format horizontal

   Format vertical

   

   PNG · 1 152 × 2 048 px

   Télécharger le PNG – Format vertical

   Aux étapes 6 à 11, vous définissez les couleurs des éléments de la borne. Chaque groupe concerne un élément précis, comme le panneau principal ou le fond des icônes.

   Chaque groupe a deux commandes : « Couleur d’arrière-plan » définit le fond et « Couleur du texte et des symboles » les éléments correspondants au premier plan. Commencez par les panneaux et tuiles, puis vérifiez la lisibilité après chaque modification.

   Cliquez sur l’échantillon à côté du champ. Ajustez la teinte, la luminosité et la transparence, puis confirmez avec OK. Vous pouvez aussi saisir directement le code exact de votre couleur.

   Assurez un contraste suffisant : texte foncé sur fond clair ou inversement. Les couleurs de l’interface ne recolorent pas les photos, vidéos, logos importés ou contenus de sites tiers.
6. Définissez les couleurs du panneau principal. Le panneau avec le logo, le titre et l’horloge : à gauche en paysage, en haut en portrait.
   • Couleur d’arrière-plan : Le fond du panneau principal.
   • Couleur du texte et des symboles : Le texte et les symboles utilisant la couleur de premier plan du panneau principal.
7. Définissez les couleurs du panneau secondaire. La zone de contenu du menu : à droite en paysage, sous le panneau principal en portrait.
   • Couleur d’arrière-plan : Le fond du panneau secondaire, également utilisé sur d’autres écrans d’applications.
   • Couleur du texte et des symboles : Le texte et les symboles associés sur ce fond.
8. Définissez le fond des icônes d’applications. La zone derrière l’image d’une icône d’application.
   • Couleur d’arrière-plan : Le fond de l’icône, surtout visible autour d’une image petite ou transparente.
   • Couleur du texte et des symboles : Utilisé par certaines autres commandes. Cela ne recolore pas l’image de l’icône du menu.
9. Définissez les fonds des boutons et noms d’applications. Le fond des noms et boutons utilisant cette couleur.
10. Définissez les couleurs du texte et des symboles des boutons et applications. Les noms d’applications et les symboles des commandes concernées.
11. Définissez le fond global des applications.

    Le fond global sert notamment au compte à rebours d’inactivité et à certaines applications, dont le lecteur USB et Labyrinthe. Il ne définit pas le fond principal du menu en tuiles. Vérifiez le contraste et conservez les valeurs par défaut si elles conviennent.

    • Couleur d’arrière-plan : Le fond des éléments utilisant ce groupe de couleurs.
    • Couleur du texte et des symboles : Le texte et les symboles associés, par exemple dans l’avertissement d’inactivité.

Enregistrez vos modifications. Le serveur met la couche actualisée en file pour les appareils du site. Ils doivent être connectés et les nouvelles images entièrement téléchargées. Vérifiez le résultat sur un appareil rattaché ; enregistrer le formulaire ne confirme pas la réception.