Fermer

décembre 18, 2020

Points à prendre en compte avant d'implémenter une interface utilisateur dans Xamarin Forms


Quelles mesures devons-nous prendre avant de commencer à coder pour garantir une interface utilisateur propre, livrée à temps?

Howdy! 🙋‍♀ Je suis tellement excité pour le message d'aujourd'hui! Parce qu'aujourd'hui, nous allons apprendre quelques conseils importants lors de la création de l'interface utilisateur dans Xamarin Forms.

Parfois, lorsque nous devons créer une interface utilisateur, nous «réfléchissons en codant» et nous n'utilisons pas de processus de développement d'interface utilisateur antérieur. Mais quelles sont les conséquences de cette pratique? Si nous concevons pendant le codage, il se peut qu'il y ait des choses que nous ne voyons pas au début et que nous pourrions réaliser après avoir appliqué du code. Cela peut finir par prendre beaucoup de temps si nous devons retravailler les choses et, par conséquent, nous allons livrer un produit avec moins de vitesse.

Alors, qu'est-ce que je suggère? 🧐 Ma suggestion est que, avant de commencer à écrire du code, nous appliquons un processus précédent que j'appellerai une «stratégie de développement d'interface utilisateur», et ce sera le sujet que nous aborderons dans cet article.

Un rapide Vue d'ensemble: Nous allons toucher la base avec quelques points clés que nous devons garder à l'esprit avant de commencer à développer une interface utilisateur. Nous ferons référence à un exemple d’interface utilisateur obtenu à partir de Dribble !

Alors, commençons! 😎

 L'interface utilisateur est bleu clair avec des cases blanches. La colonne principale se lit comme suit: Ce que nous devons garder à l'esprit pour créer une interface utilisateur: identifier la meilleure mise en page à utiliser; Identifiez les composants que vous devez utiliser; Divisez en blocs l'ordre de développement; Ayez les ressources dont vous avez besoin à portée de main. La colonne latérale contient une autre liste, avec un titre "Guys Trip" et une liste ci-dessous montrant certaines choses que vous pouvez ajouter au voyage dans un accordéon étendu (comme l'ajout d'un vol, d'un hôtel, etc.), 14 conversations non développées et un moniteur de voyage avec 23 notifications non étendues.

Dans l'image ci-dessus, je mentionne les points que je considère les plus importants à prendre en considération. Ci-dessous nous allons les détailler un par un:

1. Identifiez la meilleure mise en page à utiliser 🕵‍♂

Avant de commencer, il est très important d'identifier la ou les mises en page que vous allez utiliser, en tenant compte de quelques points importants:

  • 📌 Cette mise en page est-elle la le plus optimal en termes de performances de mon application?
  • 📌 Existe-t-il un moyen de simplifier la ou les mises en page afin d'améliorer les performances et d'utiliser moins de code dans l'application?
  • 📌 Si la grille est utilisée, est-ce que je compte correctement le nombre de lignes et de colonnes? Est-ce que j'ajoute des éléments inutiles?

Une fois que nous aurons les réponses à toutes ces questions, nous pouvons passer à l 'étape suivante!

2. Identifiez les composants à utiliser 🕵‍♂

Il est important que nous sachions clairement les composants que nous utiliserons dans notre application. Parfois, nous avons une conception qui peut être entièrement couverte avec les contrôles natifs disponibles dans Xamarin Forms. Mais à d'autres occasions, on peut nous présenter un scénario dans lequel nous devons décider d'utiliser un composant externe ou de développer un moteur de rendu personnalisé. Si vous rencontrez ce scénario, avant de prendre une décision, voici quelques questions qui vous aideront dans la décision:

  • 📌 En fonction du temps, qu'est-ce qui me coûterait moins cher: confier à mon équipe le développement d'un composant personnalisé ou trouver un bibliothèque de composants qui correspondent à mes besoins?
  • 📌 La bibliothèque de composants a-t-elle un bon support et répond-elle à toutes mes attentes?
  • 📌 Ai-je aimé les avis des clients précédents?

Après cela, vous pouvez avoir une réponse plus claire! Et vous pouvez passer à l'étape suivante.

Par exemple: Dans l'exemple d'interface utilisateur, nous avons choisi d'utiliser un fournisseur externe. Dans l'image ci-dessus, nous avons un élément d'accordéon, nous pouvons donc utiliser celui disponible chez Telerik. Vous pouvez obtenir plus d'informations ici .

3. Diviser en blocs l'ordre pour se développer 🕵‍♂

Ce point nous aide à mieux organiser la manière dont nous développerons notre travail. Cela dépend de la façon dont vous vous sentez plus à l'aise: certaines personnes préfèrent diviser textuellement l'interface utilisateur qu'elles doivent développer en blocs; d'autres préfèrent le diviser par composants ou fonctionnalités. Mais si vous remarquez, dans tous les cas, ils ont divisé leur travail dans un ordre spécifique. Cela peut vous aider beaucoup à fixer des objectifs beaucoup plus réalistes en fonction du délai de livraison pour votre client, surtout si vous ne faites que commencer!

4. Ayez les ressources dont vous avez besoin à portée de main 🕵‍♂

Nous n'avons pas toujours la liberté de rechercher les images pour créer notre application, les clients peuvent les avoir. Il est important que nous gérions toutes ces ressources (polices, images, etc.) au cas où le client ne pourrait pas les fournir facilement.

Cela ne signifie pas que nous ne pouvons pas commencer notre développement si nous ne les avons pas couverts – nous pouvons utiliser ressources de substitution. Mais assurez-vous de commencer à les demander dès le début afin que, au moment de la livraison, vous n'ayez pas à attendre plus longtemps juste pour obtenir des ressources qui auraient dû être fournies dès le début.


C'est fait! Enfin, nous pouvons commencer le reste du développement !! L'exécution de ces conseils n'est pas obligatoire. Cependant, avoir ce processus en place nous aide à mieux gérer notre développement d'une interface graphique ou de tout autre type de développement. J'espère que cela vous aidera à mieux organiser et optimiser votre temps et votre code!

Bon reste de la semaine! À la prochaine! 🙋‍♀️





Source link