Aller au contenu principal
/Documentation

Mobile Mockup

Placez les captures de votre application sur l'écran d'un téléphone en 3D. Les visiteurs font défiler chaque capture dans l'écran et passent de l'une à l'autre avec la barre de navigation ou les flèches du clavier.

Créer un Mobile Mockup
Ouvrir la version interactive

Qu'est-ce qu'un Mobile Mockup ?

Un projet Mobile Mockup affiche vos captures sur un téléphone en 3D. Une image correspond à un écran. Les captures hautes ne sont pas réduites pour tenir : le visiteur les fait défiler dans l'écran, exactement comme il ferait défiler la vraie application. Cinq captures donnent cinq écrans, que le visiteur parcourt un par un.

  • Une capture haute par écran, qui défile dans l'écran du téléphone
  • Molette, pavé tactile ou glisser vertical sur l'appareil pour faire défiler l'écran courant
  • La barre et les flèches du clavier pour passer d'un écran à l'autre
  • Faites glisser le fond pour tourner le téléphone, et activez les boutons de zoom de la barre pour lire les petits textes
  • Des hotspots partout sur la capture, y compris dans les zones qu'il faut faire défiler pour atteindre
  • Un écran en direct : collez un lien et la vraie page se charge dans l'écran
  • Un compteur d'écrans qui affiche aussi le titre de l'écran, plus une barre de liens

Idéal pour

Démos d'application

Montrez une application mobile écran par écran sans envoyer personne sur un store

Parcours d'onboarding

Une étape par écran, dans l'ordre où un nouvel utilisateur les rencontrerait

Revues de prototype

Partagez vos exports de design avec un client et laissez-le faire défiler chaque écran en entier

Présentations client

Présentez la version mobile dans une proposition ou une étude de cas

Portfolios de design mobile

Rassemblez les applications et les sites mobiles que vous avez conçus, un écran chacun

Vues responsive

Montrez la version téléphone d'un site, à côté de la version desktop ou seule

Fichiers et limites

  • Des images ou des PDF. Une image correspond à un écran, et chaque page d'un PDF devient un écran.
  • Un PDF peut compter jusqu'à 200 pages et peser jusqu'à 50 Mo. Ses liens deviennent des hotspots sur les écrans où ils se trouvaient : un lien web ouvre la page, un lien interne au document mène à l'écran correspondant.
  • Les captures sont ajustées à la largeur de l'écran. Une très grande capture est réduite proportionnellement et jamais recadrée : une capture sur toute la hauteur garde toute sa longueur.
  • Importez plusieurs fichiers à la fois, ou utilisez Importer depuis une URL pour récupérer une image à partir d'une adresse web.
  • Ajoutez un écran en direct pour charger une vraie page web dans l'écran, au lieu d'une image de cette page. La page doit autoriser son intégration, et l'éditeur le vérifie quand vous l'ajoutez.
  • Les fichiers importés comptent dans le stockage de votre espace de travail : 50 Mo en Free, 10 Go en Pro, 25 Go en Business.

Créer un Mobile Mockup

  1. 1. Importez vos captures

    Ouvrez l'onglet Contenu et ajoutez une capture sur toute la hauteur par écran, en portrait.

    • Laissez chaque image aussi haute que l'écran l'est vraiment : la largeur est ajustée à l'écran et la hauteur est ce que le visiteur fait défiler
    • Ou ajoutez un écran en direct avec le lien d'une page

  2. 2. Ordonnez et nommez les écrans

    Faites glisser un écran pour le déplacer. Donnez un titre à chacun : les titres s'affichent dans le compteur d'écrans, qui doit donc rester activé si vous voulez qu'on les voie.

  3. 3. Ajoutez des hotspots

    Dans l'onglet Hotspots, placez des zones cliquables sur une capture pour ouvrir un lien, aller à un autre écran, afficher une info-bulle ou ouvrir une pop-up. Un hotspot est ancré à l'image entière : il défile donc avec la partie de l'écran à laquelle il appartient.

  4. 4. Réglez l'appareil et l'écran

    Dans Paramètres, sous Général, choisissez la couleur du téléphone, ajustez l'écran et réglez le défilement.

  5. 5. Partagez-le

    Enregistrez, puis copiez le lien ou le code d'intégration depuis l'onglet Partager.

Paramètres

Tout ce qui suit se trouve dans l'onglet Paramètres de l'éditeur, classé sous le sous-onglet où vous le trouverez : Général, Scène ou Caméra.

Général

Les informations de base (le titre et la description du projet) figurent en haut pour tous les types. En dessous viennent les réglages de l'objet lui-même.

Appareil

Couleur de l'appareil : le blanc conserve la finition d'origine du téléphone, et toute autre couleur remplace la couleur du boîtier, jamais celle de l'écran.

Écran

Arrière-plan de l'écran remplit l'écran derrière votre capture, ainsi que les bandes au-dessus et en dessous d'une capture courte. Luminosité (0,2 à 1,6), contraste (0,5 à 2) et saturation (0 à 2) démarrent tous à 1, soit l'image exactement telle qu'importée. Une saturation de 0 l'affiche en niveaux de gris. Afficher le compteur d'écrans, activé par défaut, affiche le titre et la position, par exemple Tarifs · 2 / 5.

Défilement

Vitesse de défilement (0,25 à 3, 1 par défaut) est la distance parcourue par la capture pour un cran de molette. Lissage du défilement (0,02 à 0,5, 0,12 par défaut) est la rapidité avec laquelle elle rattrape la molette : une valeur haute suit la molette de près, une valeur basse glisse jusqu'à l'arrêt.

Scène

Ce qui entoure l'objet, et la finition Réalisme appliquée à toute l'image.

Arrière-plan

Une couleur unie, un dégradé ou votre propre image (avec un flou facultatif), plus un motif facultatif par-dessus.

Réalisme

Un grain argentique sur l'image (de 0 à 100, 15 par défaut) et la part de ce grain qui tombe sur l'écran, un grain fixe ou animé, un vignettage, l'ombre que le téléphone projette sur sa surface (avec son intensité et sa douceur), et Reflet de l'écran, la quantité de reflets sur la vitre (0 pour un écran mat, 40 par défaut).

Caméra

Le point de départ de la vue, et la liberté qu'ont les visiteurs pour la déplacer.

Caméra

Zoom initial, de 0,5 à 2, sans que la vue s'ouvre jamais assez près pour que l'appareil sorte du cadre. Zoom minimum (0,3 à 1) et Zoom maximum (1 à 3) limitent les boutons de zoom de la barre : ils n'apparaissent donc que lorsque ces boutons sont activés. Rotation horizontale (jusqu'à 75 degrés de chaque côté) et Inclinaison verticale (jusqu'à 40) orientent la caméra. Faire pivoter par glissement, activé par défaut, permet aux visiteurs de tourner le téléphone en faisant glisser le fond. Réinitialiser rétablit le zoom, ses limites et les deux angles, et laisse Faire pivoter par glissement tel quel.

Hotspots, menu et sons

À côté de Fichiers, l'onglet Contenu propose trois autres sous-onglets : Hotspots, Menu et Sounds.

Hotspots

Les hotspots se placent n'importe où sur une capture. Ils sont ancrés à l'image entière, défilent donc avec l'écran, et restent touchables au doigt sur un téléphone : c'est ainsi qu'on suit un parcours de bout en bout.

Un hotspot peut mener à une autre page, ouvrir un lien, afficher une info-bulle ou ouvrir une pop-up. Fonctionnement des hotspots

Sounds

Tous les types de projet peuvent avoir une musique de fond. Ajoutez des pistes en MP3, M4A, WAV, OGG ou FLAC, de 20 minutes maximum chacune. Elles sont compressées à environ 1 Mo par minute et comptent dans le stockage de votre espace de travail. Vous pouvez répéter la liste de lecture, régler le volume et afficher un petit lecteur à côté de la barre. La lecture automatique démarre au premier appui ou à la première touche du visiteur, car les navigateurs bloquent le son jusque-là.

Filmez-le dans Studio

Tous les types de projet peuvent être filmés dans Studio. Ouvrez l'onglet Studio du projet, choisissez des mouvements de caméra pensés pour ce type, et transformez le projet en vidéo, en GIF, en image fixe ou en page à part entière à partager. Studio lit les fichiers et les paramètres de ce projet : ce que vous réglez ici s'y retrouve. Lire la documentation Studio · Voir les mouvements de caméra de chaque type

Limites actuelles

  • Une page de PDF défile rarement sur un téléphone : ajustée à la largeur de cet écran, elle reste plus courte que lui, et se retrouve donc centrée avec des bandes au-dessus et en dessous. Ce sont les captures sur toute la hauteur qui défilent ici.
  • Arriver en bas d'un écran ne fait pas passer au suivant. Changer d'écran est toujours une action volontaire.
  • Il y a un seul modèle de téléphone. Pour un ordinateur portable, créez plutôt un Desktop Mockup. Il n'y a pas de tablette.
  • Sur un écran en direct, les visiteurs font défiler la vraie page dans l'écran, et les hotspots restent là où vous les avez placés au lieu de défiler avec la page.
  • Dans Studio, un écran en direct apparaît comme un simple arrière-plan d'écran, car la vraie page ne peut pas être enregistrée.

Conseils

  • Exportez une capture sur toute la hauteur par écran plutôt que d'assembler des morceaux.
  • Capturez en portrait : l'écran est bien plus haut que large, et une image en paysage laisse des bandes au-dessus et en dessous.
  • Gardez la même largeur pour toutes les captures, afin que le contenu ne change pas de taille d'un écran à l'autre.
  • Accordez l'arrière-plan de l'écran au fond de votre application, pour qu'une capture courte ne repose pas sur une bande blanche.
  • Placez les hotspots là où un utilisateur toucherait dans la vraie application.
  • Réduisez la vitesse de défilement quand un écran est très long.