Application mobile: Prototypage rapide d’applications mobiles avec Xamarin.Forms

Avatar

James

La création de prototypes d’applications mobiles est une partie importante du processus de conception. Il est extrêmement utile pour les développeurs et les utilisateurs de test de pouvoir interagir avec un prototype afin de découvrir comment l’application se comportera lorsqu’elle sera terminée, mais la construction de prototypes peut être intimidante en raison du temps important qu’il faut. Cela est particulièrement vrai lorsque vous êtes invité à créer des prototypes pour plusieurs plates-formes mobiles, ce qui se produit le plus souvent. Avec Xamarin.Forms, cependant, il est rapide et facile de créer des interfaces utilisateur partagées entre Android, iOS et Windows Phone.

Wireframes vs maquettes vs prototypes

Ces termes sont souvent utilisés de manière interchangeable dans le monde mobile. Afin de comprendre pourquoi vous pouvez utiliser Xamarin.Forms pour le prototypage, examinons les différences entre ces termes de conception.

Login_Wireframe

Maquettes

Les wireframes sont statiques, basse fidélité représentation du design. Ils sont généralement en noir et blanc, le bleu étant parfois utilisé pour afficher les liens et / ou les boutons. Les wireframes doivent être créés avant les maquettes ou les prototypes, car ils constituent l’épine dorsale de la conception de votre application mobile.

Conclusion: Les wireframes sont rapides à créer et sont généralement utilisés comme documentation pour votre projet.

Profile_Mockup

Maquettes

Les maquettes sont statiques, haute fidélité représentation des dessins. Ces images en couleur doivent ressembler presque exactement au produit final en termes de couleurs, icônes, boutons, etc. Les maquettes représentent la structure des informations et démontrent les fonctionnalités de base de votre application de manière statique.

Conclusion: Les maquettes sont plus rapides à créer que les prototypes et sont idéales pour recueillir des commentaires sur la conception dans son intégralité.

Prototypes

Les prototypes sont un moyenne à haute fidélité représentation du produit final simule l’interaction utilisateur. Il est plus probable que vos prototypes soient de fidélité moyenne, ce qui signifie qu’ils n’auront pas à être aussi précis que les maquettes en ce qui concerne la conception de votre application. Les prototypes devraient permettre aux testeurs d’interagir avec l’application d’une manière similaire au produit final.
Prorotype_Image
Conclusion: La création de prototypes coûte cher, mais elle permet aux parties prenantes de prévisualiser l’application mobile dans son intégralité.

Xamarin.Forms pour le prototypage

Le prototypage peut être coûteux et long, mais Xamarin.Forms vous permet de créer des prototypes pour les trois plates-formes en écrivant du code en XAML ou C # juste une temps, réduisant considérablement cette douleur. Xamarin.Forms vous permet également de mettre de vraies applications sur de vrais appareils pour montrer vos prototypes. Il vous permet de créer rapidement un prototype, puis de le placer sur des appareils iOS, Android et Windows afin que votre client ou partie prenante puisse découvrir l’interaction utilisateur de votre application. C’est un outil assez puissant dans le processus de conception et de développement.

Alors… codons!

Nous allons utiliser l’application mobile Swarm de Foursquare pour notre exemple de prototypage. Voici quelques écrans pour lesquels nous devrions pouvoir créer facilement des prototypes:
Swarm_Screenshots

La configuration initiale

Créez une nouvelle application Xamarin.Forms. Je vais nommer le mien «SwarmPrototype». Maintenant, ajoutez un nouveau fichier XAML FormP ContentPage nommé «LoginPage».

Dans votre fichier App.cs, modifiez la méthode App () existante afin que notre LoginPage s’affiche dès que l’application démarre. Nous allons également envelopper la LoginPage dans une NavigationPage et modifier certaines propriétés de la barre de navigation.

public App ()
{
   // The root page of your application
   MainPage = new NavigationPage(new LoginPage())
   {
      BarBackgroundColor = Color.Transparent,
      BarTextColor = Color.White
   };
}

Cela nous donne une NavigationPage, qui fournit des propriétés de navigation simples afin que nous puissions facilement passer d’un écran à l’autre à travers notre prototype. La barre de navigation aura un texte blanc pour représenter les captures d’écran ci-dessus.

S’identifier

Passons maintenant à notre LoginPage.xaml. Vous pouvez voir qu’il nous a automatiquement donné une page de contenu dans laquelle nous devrons ajouter du contenu. Tout d’abord, ajoutez un StackLayout avec 200 rembourrages sur le dessus et un fond orange.


   
   

Maintenant, à l’intérieur de notre stacklayout, qui est orienté verticalement par défaut, nous voulons ajouter une étiquette, deux entrées et trois boutons. L’étiquette et les deux entrées ressembleront à ceci:

Comme vous pouvez le voir, nous avons une étiquette, puis deux entrées à l’intérieur d’une autre superposition. La raison pour laquelle j’ai mis ces deux entrées à l’intérieur d’un nouveau stacklayout est pour que je puisse m’assurer que l’espacement = « 20 » dans notre stacklayout principal ne s’applique pas à ces éléments. Voici le reste de la XAML pour la page de connexion:


   

Une dernière chose

Nous avons maintenant une page de connexion statique, ce qui est un bon début, mais les prototypes sont censés être interactifs; nous voulons que l’application navigue lorsque l’utilisateur clique sur le bouton «Connexion». Dans le fichier LoginPage.xaml.cs, nous allons ajouter un gestionnaire d’événements pour ce bouton ainsi qu’une ligne de code pour masquer la barre de navigation sur la LoginPage.

public LoginPage ()
{
   InitializeComponent ();
   NavigationPage.SetHasNavigationBar (this, false);
   buttonLogin.Clicked += async (object sender, EventArgs e) => {
   await Navigation.PushAsync (new ActivityFeedPage ());
   };
}

Dans le gestionnaire d’événements, nous utilisons la propriété Navigation (donnée par le NavigationPage que nous avons configuré dans notre fichier App.cs) pour pousser un nouveau ActivityFeedPage. Vous devrez ajouter un nouveau fichier ContentPage XAML nommé «ActivityFeedPage» pour que cela fonctionne.

Notre page de connexion est maintenant prête! Si nous exécutons l’application, nous pouvons voir que, même si nous n’avons écrit qu’un seul fichier XAML, il semble et se sent natif sur Android et iOS.
Login_Screenshots

Continuez à coder!

Je vous invite à consulter les guides Xamarin.Forms et à essayer de créer vous-même les deux pages suivantes. Si vous rencontrez des problèmes, jetez un œil au projet terminé sur mon GitHub. Je ferai également une conférence invité plus approfondie sur ce sujet à l’Université de Xamarin le 24 septembre. Obtenez votre essai gratuit de 30 jours afin que vous puissiez me rejoindre pour cette impressionnante session de prototypage rapide!

#Prototypage #rapide #dapplications #mobiles #avec #XamarinForms