Share
Dans la première partie de cette série en deux parties, je vous ai montré comment prendre une idée initiale pour une application Android et la développer en un plan détaillé - pour cartographier les écrans individuels qui constitueront votre application terminée..
En utilisant l'exemple d'une application de voyage qui aide les utilisateurs à planifier et à réserver une aventure estivale amusante avec tous leurs amis, nous avons identifié notre public cible en créant un profil d'utilisateur (souvenez-vous de notre ami Sasha?), Puis créé une liste de fonctionnalités. ce serait parfait pour la version 1.0 de notre application (et parfait pour Sasha). Enfin, nous avons créé une liste d’écrans et une carte montrant exactement comment tous ces écrans vont s'emboîter.
Nous avons couvert beaucoup de terrain dans la première partie, mais jusqu'à présent, notre planification était un peu abstraite et de haut niveau. Dans la deuxième partie, nous allons nous approcher de près en personnalisant et en encadrant les écrans individuels qui composeront notre application..
À la fin de ce didacticiel, vous aurez créé un prototype numérique que vous pourrez installer et tester sur votre propre smartphone ou tablette Android..
Nous allons plonger et commencer à créer des structures en fil de fer!
Wireframing est l'endroit où vous esquissez tous les principaux composants de l'interface utilisateur que vous souhaitez placer sur un écran particulier. Les structures filaires ont pour but de définir la structure d'un écran. Il ne s'agit pas de donner des détails plus précis sur l'apparence d'un écran. Essayez donc de ne pas vous perdre dans les détails du graphisme. Pour le moment, il suffit de savoir que vous allez placer un menu sur l'écran A; vous n'avez pas à vous soucier de la couleur de ce menu ni de la manière dont vous allez styler le texte du menu.
Pour plus d'informations sur les connexions filaires, consultez les ressources suivantes:
Les structures filaires sont assez trompeuses. Elles peuvent ressembler à des esquisses rapides et simples, mais elles constituent en fait un outil puissant pour explorer, définir et affiner l'interface utilisateur de votre application. Ils peuvent également vous aider à identifier les défauts de vos conceptions d'écran initiales avant d'investir trop de temps dans la mise au point de ces conceptions..
Il est beaucoup plus facile de mettre une grosse croix dans une structure filaire, de tourner la page dans votre cahier et de recommencer plutôt que de réécrire complètement le code que vous avez déjà utilisé. heures travaille sur.
J'ai donc assez longtemps fait l'éloge de la wireframing! Comment allez-vous créer une structure en fil de fer?
Vous avez quelques options:
Un fil de papier de l'écran Réservez un hôtel de notre application.Créez des structures filaires numériques à l'aide d'un logiciel de retouche d'images professionnel tel que Adobe Photoshop ou d'un programme filaire spécialisé tel que Pidoco, Axure, InDesign, Sketch, Omnigraffle ou Balsamiq Mockups..
Un fil de fer de l'écran d'accueil, créé à l'aide de Balsamiq.Mais pourquoi vous limiter à un seul outil, alors que vous pouvez profiter des avantages des deux? Les filaments papier et numériques ont chacun leur propre ensemble de forces et de faiblesses. Les structures numériques sont idéales pour créer des structures polies et précises, mais la navigation dans plusieurs menus n’est pas toujours le meilleur moyen de faire couler toutes ces idées. Elle n’est certainement pas idéale lorsque vous souhaitez tester rapidement plusieurs idées différentes! D'autre part, les structures filaires en papier sont idéales pour une session de brainstorming à tir rapide, mais vous pouvez avoir du mal à créer des structures en fil qui soient suffisamment précises et suffisamment détaillées pour servir de modèle au type d'écran que vous allez créer.
Je vous recommande de créer vos premiers brouillons à l'aide d'un crayon et d'un crayon (ce qui est idéal pour laisser libre cours à votre créativité), puis, une fois que vous disposez d'un ensemble de structures filaires en papier, vous pouvez passer du temps à les affiner à l'aide d'un logiciel de filaire numérique..
C’est l’approche que j’utiliserai dans ce didacticiel, mais gardez à l’esprit que la création d’images en fil de fer est un exercice créatif. Par conséquent, il n’existe aucune règle absolue. Utilisez la méthode qui vous convient le mieux.
Pour vous donner le meilleur aperçu possible du processus de wireframing et de prototypage, je vais choisir un écran de mon application de voyage et le travailler dans le reste de cet article. L'écran que je vais choisir comme cobaye est la liste de contrôle, car je pense que cet écran en particulier contient des éléments d'interface utilisateur difficiles qui constitueront un exemple intéressant..
Juste pour vous rafraîchir la mémoire, dans la première partie, j'ai écrit la description suivante de la façon dont j'ai imaginé l'écran de liste de contrôle terminé:
Dans son état par défaut, cet écran affiche une liste de contrôle de toutes les tâches que l'utilisateur doit exécuter afin de planifier un voyage réussi. Si vous appuyez sur une tâche, l’utilisateur sera amené à un écran où il pourra s’acquitter de cette tâche. Chaque fois que l'utilisateur termine une tâche, cet élément est coché sa liste de contrôle.
Pour créer un premier brouillon, saisissez du papier et l’outil de votre choix, puis tracez le contour rectangulaire d’un smartphone ou d’une tablette typique..
Je vais commencer par ajouter tous les éléments de navigation à ma structure filaire. En regardant ma carte d'écran, je constate que l'utilisateur doit pouvoir accéder à trois écrans de la liste de contrôle:
Ces écrans représentent deux types de navigation différents: la navigation en arrière et la navigation en avant..
"Sélectionner une ville" est l'écran précédent dans le flux de mon application. Il représente donc l'utilisateur qui recule dans l'historique de l'application. Android gère automatiquement ce type de navigation vers l'arrière (généralement via la touche programmable «Retour» du smartphone ou de la tablette). Vous n'avez donc pas besoin d'ajouter de navigation explicite «Sélectionnez une ville» à votre interface utilisateur..
Les deux autres écrans sont un peu différents, car ils représentent l'utilisateur qui progresse dans notre application. Le système ne gère pas automatiquement la navigation vers l'avant. Il est donc de notre responsabilité de fournir à l'utilisateur tout le nécessaire pour pouvoir naviguer sur ces écrans..
Ces éléments de navigation vont prendre la forme de deux Affichages, que je vais organiser sous la forme d’une liste de contrôle (bien, deux éléments ne sont pas vraiment une liste, mais si je continuais à travailler sur ce projet, j’ajouterais éventuellement plus de tâches à cette liste). Dans leur état par défaut, chaque Affichage rappelle à l'utilisateur qu'il doit effectuer cette tâche, par exemple «Vous devez toujours réserver un hôtel!». Lorsque l'utilisateur appuie sur Affichage, cela les mènera à l'écran Réserver un hôtel ou Réserver un hôtel, afin qu'ils puissent s'acquitter de cette tâche.
Lorsque l'utilisateur termine une tâche, le Affichage mettra à jour pour afficher des informations sur l'hôtel de l'utilisateur ou ses modalités de transport (je ne vais pas ajouter ces informations à ma structure filaire pour le moment, mais il faut en tenir compte).
Pour créer un effet de liste de contrôle, je vais créer un correspondant ImageView pour chaque Affichage. Dans son état par défaut, chaque ImageView affichera une croix rouge, mais une fois que l'utilisateur aura terminé une tâche, elle sera remplacée par une coche verte.
Enfin, je vais ajouter un titre Affichage, qui affichera tout ce que l'utilisateur a choisi d'appeler ce voyage particulier.
Lors de la construction de votre structure filaire, vous risquez de rencontrer des éléments d'interface utilisateur susceptibles de fonctionner dans de nombreuses positions et de différentes tailles. La création d'une structure en papier ne prend pas beaucoup de temps. Si vous avez d'autres idées, prenez quelques instants pour les câbler. En fait, vous devriez essayer d’esquisser quelques alternatives pour chaque écran afin que vous puissiez décider quelle idée a le plus de potentiel.
Rincez et répétez l'opération pour chaque écran de votre application, jusqu'à ce que vous disposiez d'un jeu complet de cadres en papier. La prochaine étape consiste à transformer ces premiers brouillons en structures filaires numériques plus raffinées..
De nombreux logiciels ont été créés spécifiquement pour l'encodage en fil de fer. Il vaut donc la peine de passer un peu de temps à rechercher vos options sur Google. Toutefois, si vous préférez, vous pouvez utiliser votre logiciel de retouche d'images préféré, tel que Adobe Photoshop..
Personnellement, je suis fan de Balsamiq Mockups!
Prenez le temps de créer et de perfectionner votre conception dans le logiciel de votre choix, et soyez à l'affût de toutes les occasions de peaufiner et d'affiner votre structure filaire. Travailler avec un nouvel outil peut également générer de nouvelles idées. Par conséquent, si vous êtes soudain frappé par une inspiration qui vous dit comment améliorer votre conception, prenez du papier et filarisez ces idées. S'ils résistent à l'examen minutieux des encadrements sur papier, alors intégrez ces modifications à votre structure numérique..
Encore une fois, rincez et répétez pour le reste de vos écrans.
Il est temps de tester vos conceptions en créant un prototype numérique basé sur vos structures filaires..
Le prototypage vous donne la possibilité d'acquérir une expérience pratique de l'apparence et du fonctionnement de votre conception sur un véritable appareil Android, mais il vous permet également de tester la traduction de votre conception à travers plusieurs configurations d'écran, via des appareils virtuels Android..
Alors, comment créez-vous un prototype numérique?
Le moyen le plus simple consiste à utiliser Android Studio, qui constitue également un puissant outil de prototypage numérique grâce à l'éditeur de présentation graphique intégré de l'IDE. Tout au long de cette section, je vais utiliser de nombreuses nouvelles fonctionnalités introduites dans Android Studio 2.2. Si vous souhaitez suivre, assurez-vous que vous utilisez bien Android Studio 2.2 Preview 1 ou une version ultérieure..
Pour créer notre prototype, démarrez Android Studio et créez un nouveau projet. Pour que les choses restent simples, je vais utiliser le modèle "Activité vide". Étant donné que vous allez tester ce prototype sur votre propre appareil Android, assurez-vous de définir le SDK minimal de votre projet sur une option compatible avec votre smartphone ou votre tablette Android..
Une fois qu'Android Studio a créé votre projet, ouvrez son activity_main.xml déposer et supprimer cet ennuyeux 'Hello World' Affichage qu'Android Studio ajoute à cette disposition par défaut. Assurez-vous d'avoir sélectionné l'onglet "Conception" pour pouvoir voir la palette et la zone de dessin d'Android Studio..
Nous sommes maintenant prêts à donner vie à notre fil de fer! Commençons par le haut, avec le titre de l'écran. Il est assez évident que cela va être un Affichage, mais qu'en est-il de son contenu? Lorsque l'utilisateur commence à planifier un voyage, il peut appeler ce voyage comme bon lui semble. Comment savoir quel texte utiliser dans notre prototype??
Traiter avec du texte variable est un thème récurrent dans ce prototype, prenons donc quelques instants pour explorer ce problème plus en détail maintenant..
Les prototypes sont un outil puissant dans l'arsenal du développeur d'applications, mais ne nous laissons pas emporter. Lorsqu'un écran contient des éléments variables, il est impossible de créer un prototype pour chaque version de cet écran. C’est certainement le cas de notre liste de contrôle, car l’utilisateur peut nommer son voyage comme bon lui semble. Voyage 1 au décousu et trop excité Des vacances d'été de rêve remplies de plaisir, et tout entre.
Alors que c'est impossible Pour tester tous les titres imaginables, un prototype est l’opportunité parfaite pour mettre votre conception sous pression sérieuse en testant les variables les plus étranges et les plus merveilleuses auxquelles vous pouvez penser..
Pour mon prototype de liste de contrôle, je vais créer trois ressources de chaîne: une représentant le titre «typique» que la plupart des utilisateurs choisiront, une ressource inhabituellement courte et une qui est sérieusement longue. Tester ces extrêmes est l’un des moyens les plus efficaces d’éliminer tous les problèmes potentiels qui pourraient se dissimuler dans vos conceptions d’écrans..
Une fois que vous avez créé ces ressources de chaîne, vous devez donner à ce texte un endroit où vivre. Affichage de la palette et déposez-le sur la toile.
Android Studio 2.2 a introduit les concepts de contraintes, qui sont pratiques pour construire rapidement des prototypes numériques (et des interfaces utilisateur en général). Vous pouvez créer des contraintes manuellement, mais pourquoi faire tout ce travail alors qu'Android Studio peut faire le travail dur pour vous?
Il existe deux manières de faire en sorte qu'Android Studio crée des contraintes, explorez donc les deux. La première méthode consiste à utiliser autoconnect. Assurez-vous donc que ce mode est activé en basculant le Connexion automatique bouton (où le curseur est positionné dans la capture d'écran ci-dessous).
Maintenant, faites glisser votre Affichage à l'endroit où il devrait apparaître dans votre mise en page. Je veux que mon titre soit centré, donc je vais faire glisser le Affichage au milieu de la toile et relâchez. Lorsque vous relâchez le Affichage, Android Studio répondra en créant toutes les contraintes nécessaires pour tenir cette Affichage en place.
Notez que lorsque deux contraintes tirent un widget dans des directions opposées, ces contraintes apparaissent sous forme de lignes irrégulières. C'est pourquoi ces contraintes sont différentes des contraintes normales..
Si vous ne savez pas si votre Affichage est parfaitement centré, faites-le glisser légèrement le long de l’axe horizontal. Des info-bulles apparaissent de chaque côté du widget, affichant sa position actuelle le long des axes horizontal gauche et droit. Faites glisser le Affichage jusqu'à ce que vous obteniez un partage même 50/50.
Définir cette Affichage pour afficher l'une des ressources de chaîne que vous avez créées pour votre titre - la chaîne avec laquelle vous commencez n'a pas d'importance, car vous les testerez toutes de toute façon!
Ensuite, nous allons construire notre liste de contrôle. Je vais utiliser deux images dans ma liste de contrôle: une coche verte qui apparaît lorsque l'utilisateur a terminé une tâche et une croix rouge pour indiquer que cet élément figure toujours dans la liste "Tâches" de l'utilisateur. Créez ces images et ajoutez-les à celles de votre projet. tirable dossier.
Ensuite, ouvrez votre strings.xml déposer et créer les deux messages par défaut:
Faites glisser deux Affichages de la palette et déposez-les sur la toile, ne vous inquiétez pas pour que tout soit parfaitement aligné pour l'instant. Définir ces Affichages pour afficher vos ressources de chaîne par défaut.
Ensuite, prenez deux ImageViews de la palette et déposez-les sur la toile. Que vous relâchez chaque ImageView, Android Studio vous invitera à sélectionner un dessinable à afficher. Nous allons commencer par prototyper la version par défaut de cet écran, donc sélectionnez l’image croix rouge pour les deux ImageViews.
À ce stade, nous avons ajouté tous les éléments d'interface utilisateur nécessaires, mais depuis que nous les avons tous déposés de manière aléatoire sur la toile, il est probable que votre prototype ne présente pas beaucoup de ressemblance avec votre structure filaire. Encore une fois, ce sont des contraintes pour le sauvetage!
Le second moyen par lequel Android Studio peut créer automatiquement des contraintes est via le moteur d'inférence. Passez du temps à traîner votre Affichagele sable ImageViews dans la position parfaite sur la toile, puis donner Android Studio Inférer les contraintes bouton un clic (où le curseur est positionné dans la capture d'écran ci-dessous).
Lorsque vous cliquez sur ce bouton, Android Studio crée automatiquement toutes les contraintes requises pour diffuser votre mise en page actuelle..
C'est la version par défaut de cet écran triée, mais nous devons également tester la manière dont cet écran s'adapte une fois que l'utilisateur commence à cocher des tâches dans leur liste "Tâches". En fin de compte, je veux ces Affichages pour afficher des informations de base sur les réservations d'hôtel et les préparatifs de voyage de l'utilisateur. Cela nous oppose à un vieil ennemi: le texte variable.
Cet écran doit être suffisamment flexible pour afficher des informations sur les hôtels (et les aéroports, les gares, etc.) portant des noms vraiment longs, mais cela ne devrait pas sembler étrange si l'utilisateur réserve dans un hôtel aussi cool et branché que son nom est une seule lettre, ou le symbole pi (ouais, c’est cette type d'hôtel).
Une fois encore, la solution consiste à créer plusieurs chaînes représentant le texte le plus compliqué que votre mise en page pourrait éventuellement avoir à gérer. Si vous ne savez pas à quel point vos ressources de chaîne doivent être extrêmes, vous pouvez toujours vous adresser à votre ami Internet pour obtenir des conseils. Dans ce scénario, je passerais un certain temps à rechercher des hôtels et des aéroports, en recherchant plus particulièrement les hôtels longs, courts ou tout simplement bizarre noms, puis utiliser les meilleurs exemples dans mes ressources de chaîne.
Une fois que vous avez créé toutes vos ressources, vous pouvez effectuer quelques tests préliminaires en basculant entre les différentes ressources de chaîne et les éléments dessinables, puis en vérifiant la sortie dans l'éditeur de disposition intégré d'Android Studio..
Bien que cela ne vous donne pas le même niveau de perspicacité que de tester votre application sur un véritable appareil Android ou AVD, beaucoup plus rapide, ce qui en fait le moyen idéal pour identifier tout problème immédiat et criant avec votre mise en page.
Il est probable que vous aurez besoin de mélanger votre Affichagele sable ImageViews un peu pour trouver l’équilibre parfait entre une mise en page pouvant afficher une grande quantité de texte et une mise en page qui n’a pas l’air bizarre de n’afficher que quelques lettres.
Si vous avez besoin de faire quelques ajustements (je sais que je devais le faire!), Saisissez simplement les widgets dans le canevas et faites-les glisser vers un nouvel emplacement. Une fois que vous êtes satisfait du résultat, donnez simplement la Inférer les contraintes bouton un autre clic et Android Studio va créer un tout nouvel ensemble de contraintes pour vous.
Voici mon prototype fini.
Pas mal, mais le vrai test est de savoir comment cette disposition se traduit sur les smartphones, tablettes et AVD Android avec différentes configurations d'écran. C'est donc exactement ce que nous allons faire ensuite..
Rien ne remplace l'expérience pratique de l'apparence et du fonctionnement de votre prototype sur un périphérique réel. Commencez donc par installer votre projet sur votre propre smartphone ou tablette Android, puis passez un peu de temps à interagir avec celui-ci, juste pour avoir une idée du expérience globale de l'utilisateur. N'oubliez pas de tester votre prototype en mode paysage et portrait!
Si vous identifiez des problèmes ou des opportunités pour améliorer la conception de votre écran, notez-les afin de savoir exactement quels changements vous devez appliquer une fois que vous avez terminé de tester votre prototype..
Si votre application doit offrir la meilleure expérience utilisateur possible à tous vos utilisateurs, elle doit être suffisamment flexible pour s'adapter à toute une gamme de configurations d'écran. Une fois que vous avez minutieusement testé votre prototype sur votre propre appareil Android, vous devez créer plusieurs AVD dotés de tailles et de densités d'écran différentes, puis tester votre prototype sur chacun d'entre eux. Encore une fois, si vous remarquez quelque chose d'inhabituel à propos de votre prototype ou si vous avez une idée de la façon dont vous pourriez améliorer la conception, notez ces modifications pour ne pas les oublier..
Une fois que vous avez minutieusement testé la version par défaut de votre mise en page, vous devez tester l'adaptation de votre prototype une fois que l'utilisateur commence à cocher des tâches de leur liste de contrôle..
Mettre à jour les deux ImageViews afficher la coche verte qui s’affiche, et changer le texte par défaut pour deux des ressources de chaîne de remplacement - encore une fois, comme nous allons tester toutes nos ressources de chaîne, peu importe par quoi vous commencez.
Cette nouvelle version de votre prototype est soumise au même processus de test rigoureux, ce qui signifie que vous devez l'installer sur votre appareil Android pour bénéficier d'une expérience pratique, puis la tester sur plusieurs DAV, avec différentes configurations d'écran. Comme toujours, notez vos découvertes. Ensuite, rincez et répétez pour toutes les ressources de chaîne que vous avez créées pour votre liste de contrôle et votre titre. Affichages.
Une fois que vous avez terminé les tests, vous devriez revoir vos notes. Si vous devez seulement apporter de petites modifications, vous pourrez peut-être appliquer ces modifications directement à votre prototype et à vos structures filaires numériques. Toutefois, si ces changements sont plus spectaculaires ou s’apparentent à une refonte complète, vous devriez passer un peu de temps à les explorer plus en détail. Dans l’idéal, vous devriez soumettre vos nouvelles idées au même processus de wireframing, de prototypage et de test que vos idées initiales, car c’est toujours le moyen le plus efficace de régler tout problème avec vos conceptions.
Bien sûr, il est frustrant de se retrouver à l’étape de la wireframing alors qu’il semblait avoir presque terminé le processus de conception, mais il est temps de chercher de nouvelles idées. toujours temps bien dépensé.
Même si vous finissez par abandonner ces idées au profit de votre conception originale, au moins, vous saurez que vous travaillez réellement avec les meilleures conceptions d'écran que vous pourrez imaginer. Il n’ya rien de pire que d’investir une tonne de temps et d’efforts dans un projet, quand tout le temps vous avez un doute lancinant dans votre esprit que peut-être, juste peut-être, vous auriez dû emprunter un itinéraire différent.
Fondamentalement, si le prototypage a suscité de nouvelles idées, le moment est venu de les explorer.!
Une fois que vous avez testé toutes les versions de votre prototype sur une gamme d’AVD, il ne vous reste plus qu’une chose à faire: créer un prototype de chaque écran de votre carte d’écran et soumettre chaque dernière au même niveau de contrôle..
Dans cette série en deux parties, nous avons examiné comment transformer une idée initiale en une conception détaillée..
Cela peut sembler beaucoup de travail (parce que, soyons honnêtes, cela est beaucoup de travail), mais chaque étape de ce processus vous aidera à résoudre tous les problèmes de conception et à identifier les possibilités d’améliorer votre application..
La planification, la configuration en fil de fer et le prototypage peuvent vous faire gagner du temps à long terme en réduisant vos chances de devoir faire face à des problèmes majeurs plus tard. Dès que vous commencez à écrire du code, la résolution des problèmes de conception devient beaucoup Plus difficile.
Mais au final, investir autant de temps et d’énergie dans la mise au point de la conception sous-jacente de votre application vous aidera à offrir une meilleure expérience à vos utilisateurs. Cela signifie plus de téléchargements, plus de critiques positives et plus de personnes recommandant votre application à leurs amis et à leur famille, et qui ne voudraient pas de cela.?
Accentsconagua