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 MockupQu'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. Le téléphone est un vrai modèle avec son propre maillage d'écran, 645 Ko au total, donc la Dynamic Island est une géométrie modélisée et non une forme dessinée par-dessus votre capture.
- 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 de navigation 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 cliquables partout sur la capture, y compris dans les zones qu'il faut faire défiler pour atteindre
- Un compteur d'écrans qui affiche aussi le titre de l'écran, en plus de la barre de liens
- Fonctionne sur téléphone et tablette, où le glisser remplace la molette
Meilleurs cas d'usage
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
Créer un Mobile Mockup
Étape 1 : Importez vos captures
Dans l'éditeur de projet, ouvrez l'onglet Contenu et ajoutez une image par écran :
- Tout format d'image que votre navigateur ouvre, JPG, PNG et WebP compris. Un PDF fonctionne aussi, et chaque page devient un écran
- Une image correspond à un écran, donc une capture sur toute la hauteur s'importe telle quelle, sans recadrage
- Importez plusieurs fichiers en une fois, ou importez-en un depuis une URL
- Un PDF est limité à 200 pages et 50 Mo par fichier, et les liens qu'il contient deviennent des hotspots sur l'écran où ils se trouvaient
- Les captures sont optimisées automatiquement pour un chargement rapide
Capturez en portrait, autour de 1200px de large, et laissez l'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.
Étape 2 : Ordonnez et nommez les écrans
L'ordre dans l'onglet Contenu est l'ordre dans lequel les visiteurs les parcourent :
- Faites glisser un écran pour le déplacer
- Donnez un titre à chaque écran : il s'affiche dans le compteur, qui doit donc rester activé pour qu'on le voie
- Supprimez un écran dont vous ne voulez plus, ou effacez-les tous d'un coup depuis le menu Contenu
- Ajoutez d'autres écrans à tout moment
Étape 3 : Réglez l'écran et le défilement
Définissez l'apparence de l'écran et son mouvement dans l'onglet Paramètres :
- Couleur de l'appareil : teinte le corps du téléphone, le blanc étant le modèle tel qu'il a été construit
- Fond d'écran : la couleur derrière votre capture
- Luminosité, contraste et saturation de l'écran : les trois démarrent à 1, l'image exactement telle que vous l'avez importée
- Compteur d'écrans : affiche ou masque la position et le titre
- Vitesse et amortissement du défilement : la distance parcourue par un cran de molette et la rapidité avec laquelle il s'arrête
Étape 4 : Ajoutez des hotspots
Placez des hotspots sur une capture pour ouvrir un lien, aller à un autre écran ou afficher une note. Un hotspot est ancré à l'image entière et non à la partie visible, il reste donc sur la section à laquelle il appartient pendant que le visiteur défile. Les deux mockups les dessinent sur l'écran, et ils restent cliquables au doigt sur un téléphone, c'est ainsi qu'on suit un parcours de bout en bout.
Paramètres du Mobile Mockup
L'écran et le défilement ont leurs propres sections dans l'onglet Paramètres. Les fonds, la barre de liens, le zoom et la rotation utilisent les mêmes panneaux que les autres types de projet.
Couleur de l'appareil
Teinte le corps du téléphone. Il démarre en blanc pur, le modèle exactement tel qu'il a été construit, et toute autre couleur teinte cette finition au lieu de la repeindre.
Fond d'écran
La couleur peinte derrière votre capture. Elle remplit aussi l'espace au-dessus et en dessous quand l'image est plus courte que l'écran, choisissez donc une teinte proche du fond de votre application.
Luminosité de l'écran
À quel point l'écran paraît allumé, de 0,2 à 1,6. Il démarre à 1, c'est-à-dire exactement les pixels que vous avez importés : en dessous l'écran s'assombrit, au-dessus il sature comme un téléphone à pleine luminosité.
Contraste de l'écran
Appliqué à la capture au moment du rendu, de 0,5 à 2, en démarrant à 1 pour l'image intacte. Montez-le un peu quand un design plat perd ses contours sur un petit écran.
Saturation de l'écran
La même idée pour la couleur, de 0 à 2 et en démarrant à 1. À 0 la capture passe en niveaux de gris, une façon rapide de montrer un wireframe sans en exporter un.
Compteur d'écrans
Un petit badge avec le titre de l'écran devant et la position ensuite, par exemple Tarifs · 2 / 5, ou seulement 2 / 5 quand l'écran n'a pas de titre. C'est là que les titres apparaissent, donc le désactiver les masque aussi, ce qui convient pour une capture unique.
Vitesse de défilement
La distance parcourue par le contenu à chaque cran de molette. Réduisez-la sur un écran très long pour que le visiteur puisse s'arrêter où il veut.
Amortissement du défilement
La rapidité avec laquelle le contenu rattrape la molette. Les valeurs basses freinent en douceur, les valeurs hautes réagissent au quart de tour.
Fond de la scène
Le décor derrière le téléphone : une couleur unie, un dégradé, un motif ou votre propre image.
Comment les visiteurs naviguent
Il y a deux mouvements distincts. Le contenu bouge dans l'écran, et les écrans changent un par un. L'un ne déclenche pas l'autre.
Faire défiler dans l'écran
La molette, le pavé tactile ou un glisser vertical qui commence sur le téléphone déplacent la capture courante vers le haut et vers le bas. Les flèches Haut et Bas et les touches Page haut et Page bas font la même chose.
Changer d'écran
Les boutons de la barre de navigation passent d'un écran à l'autre, comme les flèches Gauche et Droite, avec Début et Fin pour aller au premier et au dernier. Arriver en bas d'un écran ne passe pas au suivant, et chaque écran s'ouvre en haut.
Tourner le téléphone
Un glisser qui commence sur le fond tourne l'appareil jusqu'à 75 degrés à gauche et à droite et 40 degrés vers le haut et vers le bas, puis il revient de face au relâchement. Un glisser qui commence sur le téléphone fait défiler au lieu de tourner.
Zoom
Les boutons de zoom rapprochent la caméra, c'est ainsi qu'un visiteur lit les petits textes d'une capture. Ils sont désactivés tant que vous ne les activez pas dans l'onglet Menu. La molette fait toujours défiler la capture, elle ne zoome jamais.
Ce qu'elle ne fait pas
Une partie est voulue, l'autre n'est pas encore construite. Dans les deux cas, mieux vaut le savoir avant d'enregistrer une démo :
- Une page de PDF défile rarement sur un téléphone. Ajustée à la largeur de cet écran, une page n'atteint pas sa hauteur, elle reste donc centrée avec des bandes au-dessus et en dessous. Ce sont les captures en pleine hauteur qui défilent ici.
- Arriver en bas d'un écran ne passe pas au suivant. Changer d'écran est toujours une action volontaire.
- Un seul écran est affiché à la fois. Les autres ne sont pas visibles autour.
- La section Écran teinte la coque du téléphone, mais le blanc pur correspond à la finition d'usine, choisissez donc #fefefe pour une coque blanche.
- Il y a un seul appareil, un téléphone haut de gamme. Pas encore d'autre modèle ni de tablette.
Conseils pour de bons Mobile Mockups
- 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
- Alignez le fond d'écran sur le fond de votre application pour qu'une capture courte ne repose pas sur une bande blanche
- Nommez les écrans d'après ce qu'ils montrent, pas Écran 1 et Écran 2
- 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