En travaillant sur la conception de l'interface utilisateur de la version mobile du site ou de l'application mobile, j'ai essayé différentes façons de la présenter aux clients. Jusqu'à présent, j'ai choisi Invision, mais il y a un certain nombre de points.



Premièrement, le coût. Pour les pros, ce n'est pas un problème, mais pour de nombreux concepteurs débutants, le minimum de 13 $ par mois est un montant assez décent.

Deuxièmement, pour une raison quelconque, le problème de glisser la souris au-dessus des boutons actifs n'est toujours pas résolu. Autrement dit - le défilement vers le bas sur le bouton actif fonctionne comme un clic. Et cela est très gênant dans des interfaces assez complexes.

Une autre option - Figma - n'est pas encore maîtrisée, et le fait qu'elle deviendra un standard de l'industrie. Par conséquent, certains concepteurs le contourneront également.

Faire une présentation du design d'une application mobile dans Axure

L'option la plus simple et la plus abordable reste Axure en collaboration avec Axshare. Et ici, Invision commence à manquer d'acuité - les clients ne sont pas toujours en mesure de présenter en détail le travail avec l'application dans leur esprit.

Commençons donc à développer nos propres outils. Et la première étape consiste à créer un modèle pour Axure avec le cadre d'un téléphone mobile conditionnel. Pour ce faire, nous avons besoin d'un cadre de téléphone en PNG avec un «trou» à l'écran et la structure des écrans.

Au début - tout est simple: nous posons l'image du téléphone, nous mettons en haut le cadre intégré dans la taille du trou d'écran. Mais il y a un moment désagréable. Il est lié aux fonctionnalités de l'élément Inline Frame.
Cet élément crée une fenêtre dans le prototype pour télécharger diverses informations - un cadre. Dans celui-ci, vous pouvez définir la sortie d'un autre écran de la structure ou insérer un lien vers le site.

Le problème se pose dans les barres de défilement. Ils peuvent être affichés ou masqués. Mais avec les barres de défilement masquées, le rembobinage est désactivé - les longs écrans de l'application ne s'affichent donc pas en dynamique. Pas une commande.

Pour résoudre le problème, nous utilisons une technique de masque (merci crackjack ).

1. Convertissez le cadre en ligne en panneau dynamique. Activez l'affichage des barres de défilement (si elles sont désactivées).
2. Nous traduisons à nouveau le cadre et le cadre du téléphone dans le panneau dynamique, dans lequel nous désactivons les barres de défilement. Nous modifions également la taille de notre masque à 360x640 afin que les barres de défilement du cadre ne ressortent pas.

Le reste est déjà plus facile - sur l'écran principal, nous avons toujours le cadre du téléphone dans un cadre et un mannequin. Dans le cadre, nous chargeons la sortie de l'écran suivant sur la liste, nous établissons la navigation et c'est tout. N'oubliez pas de combiner les éléments du premier écran en un groupe et de créer un panneau dynamique à partir de celui-ci.

Le panneau lui-même peut être aligné au milieu du navigateur. Dans les paramètres Épingler au navigateur, marquez les paramètres Centre et Haut. Nous publions tout sur Axshare et envoyons le lien au client.

Raccourci. Modèle prêt pour Axure

J'ai téléchargé le résultat en tant que fichier terminé. Vous pouvez télécharger gratuitement le modèle pour Axure ici .

Point important

Le modèle est conçu pour 360 mises en page de largeur. Cela se fait exprès. Les dispositions en 320 de large semblent trop petites pour l'œil sur l'écran de l'ordinateur de bureau, et les dispositions de la taille d'origine - 1080 (et même 640), au contraire - trop grandes.

PS Je n'écrirai pas d'instructions standard quoi et où. Je veux donner des choses plus pratiques pour améliorer le travail des designers ux / ui.

Je me ferai un plaisir de répondre aux questions et serai ravi des suggestions d'optimisation!