Aller au contenu principal

☝🏼 Écran tactile : En savoir plus

En savoir plus (Discover More) transforme une zone d'un projet en bouton qui fait apparaître un calque masqué contenant plus de détails, et le referme au toucher suivant.

L'écran diffuse un projet d'affichage dynamique classique, dans cet exemple une playlist vidéo accompagnée d'un logo. Une zone du design est transformée en bouton, ici le libellé DISCOVER CIRCULAR JOURNEY dans le coin inférieur.

Un appui sur ce bouton fait apparaître le calque masqué, dans cet exemple une image unique qui raconte l'histoire du produit. Un nouvel appui sur le bouton, ou sur le bouton GO BACK, ramène l'écran à la playlist.

🎯 Idéal pour le commerce et les showrooms, où un passant décide en une seconde s'il veut en savoir plus.

Deux vues du même écran tactile : une page produit avec un bouton DISCOVER CIRCULAR JOURNEY, et la page de détail masquée qu'il ouvre, avec un bouton GO BACK

🏗️ Comment le configurer​

Tout se construit dans l'éditeur de projet, sans aucun code. Le module Interactivity doit être activé sur votre compte.

  1. Créez un projet et disposez le design comme vous le souhaitez.

    Éditeur de projet avec le design de la page produit disposé sur le canevas

  2. Ajoutez le calque que vous voulez faire apparaître par-dessus le design. Dans cet exemple, il s'agit d'un calque image contenant l'histoire du produit.

    Éditeur de projet avec l'image de détail ajoutée comme nouveau calque par-dessus le design

  3. Masquez ce calque : dans la liste LAYERS, cliquez sur son bouton 👁️ en forme d'œil. Le calque reste dans le projet mais n'apparaît pas à l'écran.

    Liste LAYERS avec le bouton œil du calque Circular journey désactivé

  4. Ajoutez la zone que les personnes toucheront. Dans cet exemple, il s'agit d'un calque Shape placé sur le visuel du bouton, avec Fill Opacity réglé sur 0, de sorte que la zone capte le toucher sans être visible.

    Calque Shape sélectionné sur le canevas au-dessus du bouton, avec Fill Opacity réglé sur 0 dans ses attributs

  5. Ce calque Shape toujours sélectionné, faites défiler jusqu'à sa section INTERACTIVITY et définissez :

    • Click Interaction : Enable
    • Click Action : Show hidden layer
    • Target Layer : le calque que vous avez masqué à l'étape 3
    • Hide Target Layer Mode : On Click, pour qu'un second toucher le masque de nouveau

    Section INTERACTIVITY du calque Shape, avec Click Interaction activé, Click Action réglé sur Show hidden layer et le calque Circular Journey comme cible

    Pas de section INTERACTIVITY ?

    Si un calque n'a pas de section INTERACTIVITY, le module Interactivity n'est pas activé sur votre compte. Ouvrez un ticket depuis la section Support et nous l'activerons pour vous.

  6. Ouvrez SETTINGS > TIMING et réglez Repeat type sur Loop this project, afin que le projet reste à l'écran au lieu de passer au suivant.

    Onglet TIMING des paramètres du projet avec Repeat type réglé sur Loop this project

  7. Planifiez le projet sur l'appareil cible en tant que projet unique, puis ☁️ publiez-le.

  8. ✅ C'est fait. Toute personne qui touche la zone choisie fait apparaître le calque masqué, et le referme d'un nouveau toucher.

Les scénarios interactifs se configurent avec nous

La navigation tactile, les déclencheurs API et socket ainsi que les scénarios personnalisés sont configurés pour votre compte par l'équipe Voome. Dites-nous ce que vous souhaitez voir se produire à l'écran et nous nous en chargeons : réservez une démo si vous découvrez Voome, ou ouvrez un ticket depuis la section Support si vous êtes déjà client.