Le processus de conception UX/UI - Création de maquettes et d'un design final

1. Aperçu du cours: parcourir l'ensemble du processus U X que vous je conçois en utilisant Adobe X'd apprendre à la fois l'interface utilisateur et la conception de l'expérience utilisateur en suivant un projet de conception d'APP mobile du début à la fin. Way va d'abord parcourir le processus U X en apprenant les fondamentaux de la conception UX et en développant une grande variété de livrables UX, y compris une personnalité utilisateur, fichier médiocre, une carte de parcours utilisateur et enfin, un diagramme de flux utilisateur. Ensuite arrivera à Adobe X'd pour créer un cadre de fil de faible fidélité et enfin créer un design polonais en ajoutant des icônes finales, couleurs, boutons et un style sous la forme d'une mise en page haute fidélité. Enfin, liera tout cela ensemble à la création d'un prototype de travail que nous pouvons utiliser pour les tests utilisateur. Présentation de vol sont juste un fantastique départ de la paix pour votre nouveau portefeuille de U X Y sont en croissance . Adobe X'd est un choix fantastique pour les aspirants ou professionnels ux Vous. Je concepteurs si facile à apprendre. Les logiciels Adobe seront enseignés en détail. Tout le monde a besoin de comprendre les fondements de la grande conception UX et le processus qui la sous-tend. Après avoir suivi ce cours, vous serez en mesure d'intégrer à la fois les idées UX et New I et à vos projets de travail quotidiens et même d'avoir un aperçu de la vie des designers U X you I, ces lunettes pour tout le monde qui comprend des graphistes, Les développeurs Web, tous ceux qui souhaitent en savoir plus sur le processus U X Y en réalisant un projet pratique et réel. Alors rejoignez-moi pour ce voyage complet et amusant à travers tout le processus U X ey afin que vous puissiez commencer à vous enthousiasmer à propos de cette arène fantastique et gratifiante du design numérique voir dans la classe. 2. Guide du cours et groupe Facebook: Tout d'abord, bienvenue au cours, et j'espère que cette classe sera trop excité par le processus de conception U X you I et obtenir deux plus l' aise en utilisant Adobe X T pour le cadrage de fil. Je voulais vous faire savoir que j'ai un groupe d'étudiants sur Facebook, travaille dans des projets de poste comme des questions et que j'ai quelqu'un sur une fois avec nous pour obtenir des commentaires. Nous présentons également des défis en matière de conception dans ce groupe et pour vous tenir au courant des choses qui se déroulent dans le monde U X Y et des choses liées à Adobe X'd. Tout ce que j'ai à faire est de vous chercher le groupe d'étudiants XY y et la barre de recherche Facebook et de cliquer sur les groupes pour nous trouver, et nous sommes impatients de vous y rencontrer. Je voulais prendre un moment pour parler du flux de cours. Ce cours est divisé en quelques sections différentes. La première partie est la théorie X et plonge dans notre personnona utilisateur, leparcours client, parcours client carte et les diagrammes de flux. C' est une section basée sur la théorie, donc elle se concentrera davantage sur le processus et moins sur le logiciel. La section théorique du cours peut être trouvée dans la classe de processus de conception U X ey sur le partage des compétences . Le lien sera affiché ici dans la section des notes de cette leçon. Vous pouvez également le trouver en consultant mon profil sur le partage de compétences. La deuxième phase de notre cours passe à la création sont Low Fidelity Wire Frame et Adobe X'd. La section suivante du cours se déplace dans la phase de conception, où nous commençons à ajouter la mise en page des couleurs et stylisé son design. Nous créons une mise en page haute fidélité et un prototype fonctionnel. Ce cours se concentre davantage sur le processus de conception à moins que j'apprenne Adobe X'd, même si vous apprendrez beaucoup en marchant avec moi. Si vous voulez avoir un logiciel détaillé, étape par étape axée sur la classe, J'enseigne dans Adobe X'd masterclass ici sur le partage des compétences. Encore une fois, vous pouvez le trouver dans le lien dans la section notes de cette classe ou le trouver sur mon profil de partage de compétences . Maintenant, plongons dans une théorie de l'UX, et je te verrai dans la leçon suivante. N' oubliez pas de rejoindre le groupe Facebook après avoir suivi le cours de théorie du design U X Y . Nos leçons nous plongons dans la création sont des fils de faible fidélité pour lui ici dans la toute prochaine leçon. Il n'est certainement pas nécessaire de prendre la classe de théorie pour tirer beaucoup de cette section du cours, mais il est utile de connaître le processus UX. Nous sommes juste passés pour arriver au point où nous sommes maintenant prêts à mettre notre cadre métallique en marche . 3. wireframe faible et fidelité,: Bienvenue dans Adobe X'd. Nous allons d'abord créer notre cadre filaire basse fidélité. Ensuite, on va passer à un cadre en fil haute fidélité. On va montrer les graphismes des photos et des icônes. Et enfin, nous allons relier tout cela en prototype en un prototype que nous pourrons éventuellement tester avec les utilisateurs pour pouvoir aller de l'avant et retourner à la planche à dessin. Si nous avons besoin de modifier quoi que ce soit avant qu'il passe à l'étape finale après l'approbation du client , qui sera l'étape de développement où il sera revêtu et le développeur prendra relais et, espérons-le, en fera une application de travail téléchargeable sur un téléphone. On ne va pas faire ce dernier morceau, mais on va t'emmener jusqu'à la phase de test et passer par ce processus avec toi. Donc, nous y voilà. Allons-y et commençons. On va sauter dans tout ça. Je suppose que vous avez déjà un peu de connaissance d'Adobe X'd. N' hésitez pas à suivre ces cours si vous avez besoin d'une formation Adobe X'd. Je vais donc me convenir, avoir un peu de connaissance pratique d'Adobe X'd, mais je vais encore ralentir dans certains domaines. Donc une chose qui m'aide vraiment à démarrer, c'est qu'il y a quelque chose qui t'appelle. Je les enfants. Ah, donc vous savez, kits d'interface utilisateur et peuvent les télécharger. Et ils pourraient fournir un monde d'aide en termes de mise en page et de blocage de base . Donc c'est celui qui vient d'Adobe lui-même, et je vais vous montrer comment aller de l'avant et l'attraper. Mais regardez tous ces merveilleux petit genre de cadres de fils de disposition de base que nous pouvons saisir et utiliser et adapter à nos propres conceptions qui n'ont pas à commencer à partir de zéro. C' est toujours très gentil. Bien sûr, vous pouvez toujours commencer à partir de zéro si vous le souhaitez. Um, ce genre de te donne un peu d'avance avec quelques petites icônes et des choses différentes qui peuvent vraiment gagner beaucoup de temps. Donc, pour pouvoir accéder à ce fichier particulier, vous devez aller au dossier. Et quand vous avez X d ouvrir le fichier et vous obtenez je les enfants et vous devez descendre les cadres de fil va ouvrir une nouvelle fenêtre dans votre navigateur et vous allez être en mesure de télécharger ce kit particulier que j'utilise. Alors va télécharger des enfants et tu auras l'un. Je vais l'utiliser un peu. Je ne vais pas dépendre beaucoup de lui, parce que je veux un peu vous montrer comment je fais la mise en page conçue à partir de zéro aussi bien. Donc, cela va juste aider avec quelques endroits spécifiques où nous pouvons avoir besoin d'attraper un Nikon ou deux et gagner un peu de temps. Vous remarquerez que ce que vous je kit est a une couleur bleue à elle. Et ce que j'aimerais faire quand je suis dans l'étape effrayante du fil de basse fidélité où tout est, parfois tu as été esquissé sur papier. C' est très brut. C' est très basique. On a juste une idée générale de bloquer sa mise en page et où les choses sont des positions . J' ai aimé garder les choses en noir et blanc et gris. Donc on va éliminer cette couleur. Et comment on fait ça ? Nous avons tout ce document plein de cette couleur bleue. Comment pouvons-nous changer tout ça très rapidement ? Eh bien, comme vous le savez, ces styles aériens globaux ici, donc si je change les couleurs ici va changer globalement. Donc, je vais sélectionner quelques de ces couleurs bleues. Je vais aller éditer, et je vais juste glisser ça jusqu'à Grey, le glisser en gris, et ça va changer tout le bleu. Vous avez édité cela jusqu'au gris, rendre ce genre de nuance similaire de grâce sorte d'obscurité. Et c'est un bleu clair. Ou pour en faire un gris clair. Donc vous remarquez comment tout le bleu a été changé ici pour qu'on puisse y retourner. Il reste quelques petites zones bleues. Il pourrait, parce que ce n'est pas totalement gris va glisser que seulement là-bas nous allons. Maintenant, nous avons un style plus faible fidélité, et vous pouvez penser, Eh bien, ce bleu ne dérangera personne. Mais si nos couleurs de marque sont un peu plus pour la couleur verte, vous savez qu'il est logique d'éliminer la couleur comme vous le savez, parce que les clients vont regarder les couleurs et ce n'est pas ma couleur finale. Donc, si vous faites du noir et blanc, tout devient un peu plus comme un cadre métallique esquissé de faible fidélité. Ensuite, nous allons commencer par un premier écran. On va y aller. Écran d'inscription. C' est fini. Ce premier vert, nous allons obtenir un peu d'aide de ou vous je ne peux pas que nous avons téléchargé et nous avons plusieurs options d'inscription différentes. Et donc, quand nous revenons au processus U X que nous venons de traverser, nous avons découvert quelques domaines auxquels nous avons besoin de deux choses auxquelles nous devons réfléchir lors notre processus de connexion. Et l'une de ces choses était de s'assurer que nous avions une option d'inscription rapide. Donc on va en avoir besoin pour concevoir un écran qui va pouvoir l'inscrire, obtenir des informations de base. Il y aura aussi un bouton pour le consigner avec votre compte Facebook. Nous devons donc garder tous ceux en jeu pendant que nous concevons la mise en page pour cela. Alors quel type d'écran d'inscription fonctionnerait selon vous ? Probablement mieux pour cette application. Nous voulions être propres et simples. Nous ne voulons pas avoir beaucoup d'éléments de conception pour qu'ils puissent travailler à travers. Je voulais être très simple, et donc je vais prendre celui-là. C' est en fait le numéro cinq. Inscrivez-vous. Et je vais juste copier ça. Je vais ouvrir un nouveau document et on va le faire sur l'iPhone X. Bien sûr, les choses peuvent changer. Tu pourrais laver ce cours dans cinq ans. Soyez comme l'iPhone X. C'est de vieilles nouvelles. Mais c'est le plus récent en ce moment, alors allons-y et faisons-le. Vous remarquerez un écran beaucoup plus grand, beaucoup plus immobilier parce que vous n'avez plus le bouton. Donc on va pouvoir avoir plus de place sur cette version particulière. Bien sûr, vous pouvez toujours prototyper et montrer différentes tailles ainsi que nous arrivons à la fin. Vous pouvez redimensionner certains de ces deux écrans de téléphone différents que vous pourriez faire un android est de montrer au client si vous deviez jamais développer une version Android de cette application, vous pouvez lui montrer comment il peut adapter comment la conception pourrait s'adapter à peut-être un écran plus court . Donc médico-légal, instant, on va rester avec l'iPhone suivant. Voici notre côté et notre écran. On va changer ça de manière significative pour en faire la nôtre. Donc, quand il s'agit de cadres de fil de basse fidélité Ah, beaucoup de ces fois leur esquissé. Donc, nous ne voulons pas ajouter plus de détails en dehors de cela et parfois même en ajoutant ces bulles arrondies pourrait même être trop. Et parfois, euh, sans terre, ils me laissent aller et clic droit et je me fais désoigner la grille. Nous utilisons simplement ceci comme un raccourci rapide. Nous allons faire beaucoup d'autres écrans à partir de zéro, mais juste une sorte de vous montrer comment vous pouvez faire un peu court vous certains de ces modèles pour gagner des tonnes de temps. Alors tout ce que j'ai fait, c'est moi, non ? Cliquez sur. C' était un élément de groupe. Donc je l'ai juste détoilé et je vais voir si je ne peux pas retourner dans ces coins. Alors on y va. Voici nos coins arrondis qui mettent ça à zéro. Et la raison pour laquelle je fais ça, c'est que je ne veux pas ajouter beaucoup de style. ce moment, on est au stade de la basse fidélité. Le style n'est pas le but. Il s'agit de l'utilitaire de base et et comment l'utilisateur va travailler à travers le cadre métallique et moins sur la marque ou le style ou quoi que ce soit. Je garde juste que c'est basique que possible. Donc ici, nous allons avoir une chance de peut-être mettre le logo ou le nom de la société dira au nom était bon de ce type dans les noms d'applications. Nous supposons juste une sorte de photo avec le logo. Il y aurait bien pour qu'ils sachent quelle application Ils ont ouvert beaucoup de temps pour avoir un écran de connexion , et la charge était très minuscule. Ils ne savent pas quelle application il ouvre. Vous devez rendre cela incroyablement évident et peut-être aussi codé par couleur. Ce qui est génial dans la conception de mise en page, c'est parfois que les gens conçoivent un grand fond, donc ils ont tout blanc. Alors allons-y et glissons ça. On aura tout blanc, peut-être le logo ici. Mais ce qui est génial, surtout sur un écran plus grand, c'est d'ajouter un type de boxier très contrasté aide à décomposer la mise en page et aide l' utilisateur à décomposer les informations un peu mieux. utilisant ces boîtes à contraste élevé, vous n'avez pas trop de boîtes, vous n'avez pas de boîte compétitive, alors disons que nous devons peut-être avoir quelques informations ici. Il commence à devenir trop et commence orteil. Rendre la conception et la mise en page un peu occupé. Mais parfois en utilisant ces sombres, vous remarquerez beaucoup de menus de hamburger et genre de menus haut collante menus d'en-tête lorsque vous faites défiler vers le bas le généralement un contraste élevé signifiant là noir si le fond blanc est blanc sur le reste de l'écran et l'inverse. Et c'est pour une bonne raison, parce que le contraste est votre ami quand il s'agit de vous X design amical et vous je conçois donc juste un peu de je vais vous donner une sorte de ces conseils utiles en cours de route. C' est un peu moins sur l'utilisation de ce logiciel un peu plus sur les fondements de la création d'une bonne mise en page et un bon design. 4. wireframe faible et fidelité, l'écran d'ouverture: Alors réfléchissons à ce que nous devons avoir ici. Donc nous avons besoin d' , nom d'utilisateur,d' un mot de passe, connexion, et nous adorons pouvoir unnom d'utilisateur,d'un mot de passe,d'une connexion, et nous adorons pouvoir vérifier le mot de passe. Mais allons-y et gardons cela simple et juste avoir une connexion de base. Et nous devons aussi penser qu'il est évident que c'est vous qui avez besoin de mettre votre email ? Parfois, ce n'est pas toujours évident ce que vous devez mettre là, Alors allons-y et ajoutons. Je vais juste maintenir l'option enfoncée en maintenant l'option et en faisant glisser, et je suis capable de dupliquer ça très rapidement. Je viens de taper le nom d'utilisateur. Je vais juste mettre ça en dessous, et ensuite je vais tenir Option. Je vais mettre un mot de passe qui veulent vraiment rendre cela est évident que possible pour notre utilisateur Toe connexion, et ceux-ci peuvent être rendus plus petits si nous avons besoin d'être juste assez où ils peuvent le lire. Donc, faisant 12 nous ne faisons pas encore de styles globaux. On est juste en train de faire des croquis de base. Assurez-vous qu'il y a suffisamment d'espacement entre ces éléments, mais nous voulons également nous assurer qu'ils ne sont pas trop éloignés. Donc si j'ai ça ici, ça semble déconnecté. Et c'est une unité à laquelle la personne a besoin d'orteil pour prêter attention. Donc les garder proches ensemble, mais évidemment pas si près qu'il se sent bondé. Donc juste regarder votre espacement un peu. Alors, de quoi d'autre avons-nous besoin ? J' aime utiliser des barres de séparation et un peu voir cette petite barre de séparation sorte d'aide une fois de plus. Une autre façon de décomposer votre mise en page sans la rendre occupée. Parce que parfois vous allez utiliser une boîte à contraste élevé ici, et vous avez toujours besoin d'une sorte de ligne de division ou quelque chose pour décomposer continuellement l' information, car il s'agit d'un ensemble d'options entièrement séparé. Donc, moi, personnellement, nous avons beaucoup plus d'immobilier d'écran que quand c'était un peu assemblé. Donc on peut, vous savez, laisser le design respirer un peu. Cela pourrait nous donner l'occasion d'avoir un peu d'une image plus grande ici, alors passons en quelque sorte cette ligne de guitare bas a tout expédié vers le bas, vraiment utiliser l'écran immobilier que vous avez, surtout sur un nouveau ou un téléphone. Ok, pour qu'on puisse aller faire glisser ça vers le bas. Je vais rendre ce peu plus grand un peu plus important. D' accord ? Peut-être pas aussi grand. Peut-être qu'il suffit de doubler quoi ? A l'origine, c'est waas. Et maintenant, nous avons des options, euh, genre d'options ici. Donc, ce que j'aimerais faire est évidemment qu'ils doivent appuyer sur Entrée pour pouvoir soumettre leur mot de passe. Donc je vais garder cette unité connectée, et je vais aller de l'avant et faire ce journal maintenant, agrandir ça. On ne va pas s'inquiéter pour le type de combat. On va juste faire une typographie de base, juste une sorte de choix par défaut. Ah, police de caractères, qui va être aérienne pour l'instant. Nous pouvons toujours changer cela avec des styles globaux. Plus tard, allez-y. Et un groupe de groupement de cet élément, il a obtenu n'importe quel visage. Et maintenant, nous avons ce bouton de connexion une fois de plus, nous voulons faire des boutons de contraste élevé, Donc, nous voulons lui faire la couleur opposée de leur arrière-plan ou le contraire en termes de contrastes. Si nous avons un fond blanc, nous aimons avoir un bouton plus sombre et l'inverse est vrai aussi, et c'est quelque chose que nous pourrions encore explorer. Ceci dans ce cas, est d'être en mesure de savoir, Est-ce que nous faisons tout sur un fond sombre et ensuite avoir tout dans des boîtes blanches ou avoir tout dans un fond blanc ? Et nous n'y sommes pas encore tout à fait. C' est de la faible fidélité. Donc, continuons à travailler sur les boutons de base. cas où vous auriez la ligne de démarcation ici est une sorte d'option différente ici . Connectez-vous avec Facebook. Nous pouvons toujours couleur pourrait que plus tard avec pour le rendre plus évident que son Facebook, ce qui en fait la couleur bleue Facebook eso Il y a toujours des opportunités ici pour mettre le logo, et, euh, nous pouvons comprendre cela plus tard. Donc, en ce qui concerne les boutons de base, avons-nous besoin d'autre chose ? Voulons-nous donner l'option toe se connecter avec Google ? Um, ça va être une option. On peut toujours travailler avec n'importe qui qui va développer ça, c'est la question que vous pouvez poser pendant ce processus, c'est que vous savez à quel point c'est facile. Est-ce pour obtenir le journal Facebook ? Et comment est-il facile d'obtenir le Google aussi, et vaut-il la peine d'obtenir la connexion Google ? Y a-t-il suffisamment d'utilisateurs et notre population cible ? Ils vont avoir Google pour être en mesure de faire ça une option ou passer par tous les tracas pour en faire une option. Nous allons rester avec Facebook pour l'instant, et nous allons juste les prendre en quelque sorte. Donc vous vous demandez probablement, pourquoi ne faites-vous pas ça ? Pourquoi tu ne mets pas le bouton à côté ? , Ce qui se passe ici,c'est qu'ils deviennent un peu confus. Ces boutons sont un peu trop proches les uns des autres. Ah, connectez-vous. Vous ne voulez pas que les utilisateurs ne confondent jamais. C' est C'est la connexion Facebook est un chemin d'utilisateur totalement différent qu'ils vont prendre la connexion avec Facebook. Et donc nous voulons garder ces éléments un peu séparés, pas requis, pas requis, mais juste quelque chose à laquelle je pense pendant le processus de mise en page. Ok, donc nous pouvons même avoir aller de l'avant sur ce groupe, et c'est probablement un peu trop avoir à m'empêcher en tant que vous je sorte de designer dans le graphiste de faire trop de travail de design. Je dois m'arrêter et dire OK, je commence à me mettre trop dans le cadre de fil haute fidélité. Gardions ça simple. Restez simple. Donc au lieu de jouer avec ce chaud et de le garder comme ça Ok, alors je vais aller de l'avant et mettre une photo ou un logo ici. Ça va être très, très basique. Donc c'est un peu notre écran de connexion. Vous pouvez imaginer une photo là-bas et des opportunités de journalisation. C' est là que nous commençons à développer un type de travail avec notre flux d'utilisateurs. Donc, comme nous avons déjà développé ou diagramme de flux utilisateur dans une leçon précédente, il pourrait y avoir la connexion Facebook et cette inscription. Donc on va devoir passer par ces processus. Allons faire le Facebook. Ça va être plus facile. Et donc je vais passer en mode prototype et je vais créer quelques tableaux d'art ici. On va en créer un ici et un ici. Donc c'est là qu'ils vont se séparer. Donc l'utilisateur va soit aller vers la connexion avec Facebook, soit ils vont se connecter maintenant. Et comme on commence à faire ça, on y retourne et on y . Nous avons une étape critique que nous avons laissée de côté. Que se passe-t-il s'ils n'ont pas déjà de compte ? Nous devons avoir une chance pour eux de s'inscrire pour un compte. Donc c'est certainement quelque chose que nous avons besoin d'incorporer en quelque sorte. Nous avons certainement l'immobilier de l'écran pour incorporer cela pour aller et supprimer ce supplémentaire . Je vais revenir en mode design. Alors allons de l'avant et ajoutons un bouton de plus et allons prendre une sorte de pilule ronde sur celui-ci. Encore une fois, nous voulons trop styler les yeux choses et le fil de base à un stade friending de fil de faible fidélité . Allons de l'avant et dupliquons ce bouton ici. Donc, c'est connectez-vous maintenant. Hum, donc on va changer un peu, se connecter avec ton compte, et ça va être l'inscription est un compte à l'étranger, ok. Ou que pourriez-vous créer ? Créer une connexion ? Ça pourrait sembler un peu mieux. Super. Un bûcher dans les animaux vont et tout ça. Facebook tout le chemin en bas. Et maintenant on doit penser à Ok, comment on présente ces boutons ? Donc, nous avons une sorte de votre connexion de base. Maintenant, nous pouvons avoir un peu de l'immobilier écran, ont été glisser un peu vers le haut. Log garderait tout ça ensemble en une seule unité parce qu'ils vont se connecter, se connecter, et nous allons avoir le Facebook comme prochaine option ici. D' accord ? D' accord. Et donc créer une connexion. Alors, où avoir ça en bas. Et je vais leur donner une chance de créer une connexion, et nous allons faire des options de couleur différentes. Donc nous sommes toujours dans un environnement noir, blanc et gris, mais ça ne veut pas dire que je ne peux pas aller de l'avant et prendre ça. Allez à mon à l'actif de couleur et genre de spectacle que ce serait une couleur différente. Différent contraste, Affaiblir, Alléger un peu. Ou nous pourrions l'assombrir et rendre la connexion à votre compte un peu plus légère. Nous avons beaucoup de boutons ici, et nous devons trouver un moyen de simplifier encore plus ça donc je vais passer quelques instants à travailler avec les boutons ici pour voir si je ne peux pas trouver une présentation et une mise en page plus simples . Et je vais parler de la raison pour laquelle j'ai fini là où j'ai fini 5. wireframe faible et fidelité, processus de connexion - partie 2: à droite. J' ai donc passé quelques minutes en sorte de travailler sur ce jeu pour essayer de trouver ce que je pense être tout ce dont nous avons besoin ici et peut-être dans une sorte de bonne façon générale, nous n'avons pas à nous soucier des icônes ou quelque chose de spécifique, mais je Je pense que c'est bien que je me connecte en quelque sorte avec ton compte juste en dessous. Mais aussi, j'ai déplacé la journalisation du créateur en dessous parce que nous voulons rendre cela un peu plus évident parce qu'ils n'ont pas encore de connexion. La première chose qu'ils vont faire est de jeter un coup d'œil juste sous le journal avec vos comptes. Je pense juste à l'expérience utilisateur ici, pensant à ce qu'ils pensent quand je me connecte personnellement. En fait, je suis allé sur mon téléphone et je me suis connecté à une des cartes. Juste un peu penser à Et si je n'avais pas de compte ? Où mes yeux ont-ils regardé ? Et ils vont juste sous la connexion au compte. Mais ce faisant, un peu de recherche et d'étude et de recherche d'exemples est vraiment utile dans ce genre de situations. J' ai décidé de mettre le genre de Facebook en bas. On va pouvoir avoir un très joli bleu à contraste élevé. Donc ils vont certainement non, c'est une connexion Facebook et une sorte de garder ça bas en bas. Ça aurait pu être déplacé un peu plus haut. Mais je ne voulais pas avoir trois boutons l'un à côté de l'autre parce que quand tu essaies signer ce numéro très rapidement, tu seras comme, Ah, toi juste une seconde. Tu vas faire une pause il y a. Sur quel bouton dois-je appuyer ? Et cela pourrait être momentanément déroutant. Et on ne veut pas ça. Il va mettre juste assez d'espacement pour séparer ces deux options différentes. Tellement génial, allons-y et avançons. Nous avons beaucoup d'écrans à faire. Allons de l'avant et faisons la connexion avec votre compte Facebook. Donc ce sera un écran très simple va se connecter, et nous allons donner l'autorisation. Ça va être très, très simple. Ça va être autorisé. Mettez l'autorisation juste là. Le bouton. Vous devez vous soucier du style ou de la taille encore, donc c'est très simple. Autorise Facebook à créer un compte. Il y aura probablement une photo ou un logo quelque part ici. Mais encore une fois, ça devient trop dans le design de pour m'arrêter là. C' est donc un printemps très simple. Je ne pense pas qu'ils avaient besoin des autres options, mais autorisés. Et puis c'est bon Dieu de vous connecter et d'aller à l'écran d'accueil. Donc, l'option suivante est de s'inscrire pour un compte, ce qui pourrait être un peu plus fastidieux, mais nous essayons de rendre cela aussi facile que possible d'un processus. On va aller de l'avant et prendre ces boutons. Je vais tenir l'option et aller l'attraper ici. Ok, donc c'est s'inscrire pour un compte. Nous avons besoin d'une sorte d'en-tête. Allez-y et prenez ceci ici et faites-en une couleur différente. Et cela sera inscrit. Inscrivez-vous pour un compte et finira par devoir changer ces identifiants dans un nouveau compte . D' accord. Et ça change mes petits en-têtes. Ici. Ce sera l'autorisation Facebook, puis se connecter à l'écran de connexion à la maison. Ok, super. Alors maintenant, commencez à voir un cadre de fil très, très basique qui se réunissent. Vous fait toujours enregistrer votre travail. D' accord. Sur mon ordinateur pour sauver ce type qui ne gâche pas. Donc, ce que nous pouvons faire, c'est que je peux y aller et y retourner, obtenir un peu d'aide ici. On va toujours le personnaliser. Et voici le côté de voir si nous avons des informations détaillées. Voici quelques options d'inscription différentes et nous voulons rester cohérents du point de vue U I. Vous voulez avoir le même style de bulles tout au long, et on y arrivera plus tard dans des simulations de haute fidélité pour ainsi pour l'instant, c'est une sorte de saisir cette zone qui est similaire à ce qu'on utilise avant. Et donc j'utilise juste ceci est un guide rugueux et rugueux , et c'est vraiment pour moi juste d'attraper certaines de ces zones de texte et on n'aura pas besoin de tout ça , donc je suis juste en train de regrouper. Ok, donc voici ce qu'il nous faut. Et j'aime ce format que j'ai ici, accord ? Et puis nous pouvons aussi voir comment c'est en bas. Garder cette cohérence là. Donc ce qu'il nous faut, nous allons avoir un nom d'utilisateur. Nous y arriverons dans le besoin de configurer le mot de passe. Ils vont probablement avoir besoin de confirmer le mot de passe. Quelles autres choses seront nécessaires ? Que dans ce Quelque chose où nous pourrions parler avec l'entreprise et aller, quelles sont les informations requises ? Il va falloir que tu sois capable d'avoir un utilisateur inscrit. Et ce sera parfois pas le cas. Tu es sous ton contrôle. Cela pourrait être sous ce que la société va vouloir des utilisateurs quand ils s'inscrivent pour un compte. Donc ils vont vouloir avoir un disque Aiken mâle vous garantir qu'ils vont vouloir avoir un e-mail pour vous Un moyen de vous contacter et de vous envoyer des promotions et des messages de vente. Ils veulent vraiment avoir des courriels. Donc email, et donc ça va être dans ce format. Donc, je suis juste une sorte de copier-coller. Triché un peu. J' ai eu un peu d'aide de ça. Vous je template, êtes-vous je gamine ? Ce n'est pas un problème. Tout ce que vous montez juste un fil effiloché. On pourrait s'asseoir ici avec un tapis de croquis et faire la même chose. Où est tricher un peu en le rendant plus rapide dans un format numérique. Donc nom d'utilisateur mot de passe confirmer mot de passe e-mail. On n'aura pas besoin de données, naissance ou de pays. Nous voulons faire le moins possible, mais je peux garantir que ce sont les bases, qu'ils auront besoin de la sécurité pour avoir un e-mail. Ils peuvent même avoir besoin d'un e-mail de confirmation. Et c'est quelque chose que vous pourriez travailler avec le développeur sur la couche sur son une chose très mineure. Mais tant que nous avons la structure de base dans les mises en page a été inscrit pour un compte , c'est tout. Mais tant que nous avons la structure de base dans les mises en page a été inscrit pour un compte , Nous ne voulons pas qu'il y ait beaucoup de choses ici, et j'aime le garder au milieu de l'écran juste là. Ok, donc c'est basique. On n'a pas besoin d'avoir quoi que ce soit d'autre. Vous auriez besoin d'un bouton ? Vous n'avez pas de bouton ici. Allons-y et tirons vers le bas l'option et attrapez le bouton ici et ça va être inscrire , finir de vous inscrire. Nous pouvons travailler sur la copie de l'écriture ou de l'écriture de texte plus tard a été faire boutons de base ici, afin de terminer. Le processus d'inscription aura une petite flèche là éventuellement quand nous arriverons au côté de la conception , et c'est à peu près tout et puis il pourrait être automatiquement connecté. Donc, terminez le processus et connectez-vous, laissez les utilisateurs savoir qu'ils n'ont pas à revenir en arrière et tapez cela. Donc maintenant, nous avons deux divisions différentes, et ces deux options de journalisation vont se charger dans le même écran de connexion. Donc quand ils se connecteront, ils viendront à l'écran d'accueil. On va passer en mode prototype. On va ajouter un autre tableau d'art ici. Ok, donc on reliera tout ça quand on fera le cadre en fil haute fidélité, aura l'espacement. Corriger si vous le souhaitez, mais aura des chemins qui vont de cette façon et qui vont de cette façon similaire à notre flux utilisateur que nous avons mis ensemble. Donc ça va être utile. Nous allons faire référence au flux d'utilisateurs que nous avons développé dans le processus U X. Pour être en mesure de connaître le flux exact. On va trouver des téléviers ici. Donc ça va être l'écran d'accueil. On va passer beaucoup de temps là-dessus. C' est un écran très important. Tout le monde va revenir à l'écran d'accueil plusieurs fois dans le processus ou quand ils se connectent . Donc, nous voulons vraiment nous assurer qu'il s'agit d'un écran d'accueil très accueillant, qu'ils ont accès op à leurs options pour leur compte. Mais ils peuvent également être envoyés dans la bonne direction. Donc, nous y voilà. Faisons ça. L' écran de connexion est donc critique. Donc, nous voulons faire cela un simple est possible. Mais ce sera un peu le défi est que nous avons beaucoup de choses dont nous avons besoin pour présenter beaucoup d'options différentes que nous devons présenter à l'utilisateur. Ils doivent pouvoir accéder à leurs informations de comptage, et ils doivent être envoyés à l'étape Découverte de l'application où ils peuvent découvrir quel restaurant ou épicerie ah, ils veulent utiliser. Donc, quand la première chose que je veux faire est de mettre en place un petit menu ici où ils peuvent accéder à leurs comptes,ce ils peuvent accéder à leurs comptes, sera un en-tête collant, ça sera sur tous les écrans. Ils seront toujours en mesure d'avoir accès à ce petit écran. Ça va le rendre sombre. Et faisons comme un petit cercle pour notre utilisateur et que ce genre de chevauchement un peu une fois de plus, n'obtenez pas trop dans le design. dois constamment pleuvoir ma tentation de mettre des éléments de design et de le garder très basique. Les soldats assument des photos là-bas. Prenons ce texte ici, et on va avoir un nom d'utilisateur. Je ne vais pas obtenir le nom d'utilisateur spécifique, et nous allons avoir besoin d'une sorte d'informations de compte. C' est là que nous allons juste comprendre, OK, mettons le nom d'utilisateur sur la gauche. Et nous pourrions avoir un menu de hamburger simple afin que nous puissions avoir autant d'options que possible cachées à laquelle ils ont toujours accès. Et ça ne prend pas beaucoup d'immobilier à l'écran. Je vais aller de l'avant et prendre une icône de menu hamburger rapide. J' ai développé un peu un design d'application mobile et ma masterclass UX. Une autre classe distincte que j'ai et en quelque sorte de l'avoir développé. Et je vais aller chercher ce genre de menu de hamburger parce que j'y suis allé et que je ne l'aurais pas. Si vous voulez savoir comment créer cela, revenez aux leçons précédentes sur le Dhobi X'd et vous serez en mesure de comprendre comment créer n'importe quelle icône imaginable. Je vais juste faire un clic droit. J' ai besoin d'un lien de l'ONU sur Lincoln. Je ne veux pas qu'il soit lié à un précédent, euh, documents. Voici notre petit menu hamburger. Rappelez-vous, nous devons rendre ce noir et blanc et gris pour faire gris, et finalement nous allons devoir explorer. Quand ils cliquent dessus, il glisse, il descend. Nous le découvrirons plus tard dans le processus. Mais nous devons savoir qu'ils ont au moins accès à leurs comptes. Vous avez un nom d'utilisateur, nous avons des paramètres dont nous aurons besoin. Il s'agit d'un type d'application de départ. Ils vont commander de la nourriture. Et donc il y aura toujours une icône de panier qui devra être disponible pour qu'ils puissent taper dessus. Soit vérifier, voir ce qu'il y a dans leur panier. Ils peuvent avoir 20 articles dans le panier qui doivent passer en revue leur part. Nous devons donc toujours lui donner accès à leurs paramètres de compte via ce menu hamburger . Mais nous devons aussi leur donner un accès au panier. Donc, c'est pourquoi l'écran va être difficile, parce que je pense à toutes ces options donnaient aux utilisateurs. Nous devons rendre aussi facile que possible de digérer toutes ces options différentes et ne pas submerger l'utilisateur. 6. Wireframe à faible fidélité, la finition.: dans ce cas, je vais aller à notre petit kit juste ici, et je suis dans les éléments U I et j'ai quelques icônes vraiment bonbons dandy que nous pourrions attraper juste pour cadrage rapide de fil. On pourrait faire une dernière icône de panier plus tard, donc je vais prendre cette petite icône de sac. Je le copie juste pour le ramener dans notre projet et allons-y et amenons-le. C' est déjà blanc, donc c'est très pratique. Crois que c'est lié. Voyons si on ne peut pas. Contrairement au simple, c'est sur Link it. On y va. Maintenant, nous y avons accès. Maintenez, déplacer et mettre à l'échelle un peu plus grand que l'amour d'être en mesure d'avoir une sorte d'indication de la façon dont les articles de shopping maney ou dans le sac. Donc pour l'instant, je vais juste faire un simple cercle pour que vous puissiez savoir comment sont les icônes de Maney là-dedans. Je ne vais pas le faire lire. Je ne vais pas en ajouter trop. Ragoût impair numéro trois. Juste pour avoir un exemple qui est toujours agréable de savoir combien d'articles vous avez, surtout quand il s'agit d'épicerie. C' est agréable de savoir combien d'articles air dans votre panier. Rendons ça un peu plus petit et faisons-le de bonne taille. On pourra finaliser ça plus tard. Juste très, très basique. Il y en a trois. Icône de notre panier. Quelques choses qu'on peut faire. Ça pourrait commencer à changer ça, voir si on ne peut pas diviser le menu des hamburgers dans le panier pour qu'ils ne le fassent pas. Ils ne sont pas trop proches l'un de l'autre. Vous voulez donner trop d'options trop proches ensemble. Je n'ai pas non plus une séparation naturelle des options aidera l'utilisateur à briser ces options. Ok, donc vous avez le panier sur le menu hamburger droit sur la gauche, et c'est logique. Panier J'ai toujours mis sur la droite parce que les gens sont tellement habitués au panier étant sur la droite. Il ne fait presque aucun doute que c'est là que ça va être si juste basé sur le comportement de l'utilisateur . Dans le passé, j'ai ce panier sur les droits très utile, et beaucoup de système sur la gauche. Je pense que les gens ont l'habitude de pouvoir y accéder sur le côté gauche. Ah, donc nous allons en quelque sorte finesse nous n'avons pas toujours besoin d'une photo de profil. Je pense que dans ce cas, il pourrait en faire un peu trop d'éléments ici est tout ce dont ils ont besoin pour avoir votre nom d'utilisateur et votre petit écran. Donc on va évaluer ça un peu plus tard pour voir si c'est si on a de la place pour la photo ou pas. Et c'est là que nous avons beaucoup d'opportunités et de flexibilité avec leur mise en page. Nous avons donc tous les éléments essentiels auxquels ils ont besoin d'avoir accès. L' en-tête collant sera sur chaque écran que vous verrez à partir d'ici une fois qu'ils se connecteront et auront accès à l'écran d'accueil que ces en-têtes collants seront là, donc ça va être cohérent. Alors maintenant, c'est là que nous avons l'option. Ici nous sommes allés et est-ce que vous êtes des recherches ? Et nous déterminons que nous voulons être en mesure d'envoyer les gens dans la bonne direction tout de suite. Il pourrait donc y avoir deux options principales : une option de livraison d'épicerie et une option de livraison de restaurant , et nous voulons envoyer les gens vers cette voie dès que possible. Donc la façon dont j'ai pensé est d'avoir un beau visuel, juste une photo. Rien de trop fou de chacun et d'avoir de l'épicerie. Et puis nous avons les autres options restaurants disponibles. Qui que ce soit deux options simples mis en place ici. Nous avons un restaurant sur le dessus de l'épicerie sur le fond, et quand je fais une sorte de fausse fidélité, je n'utilise pas de photos. Beaucoup de fois, quand je fais des photos, j'aimerais m'en tenir à la même nuance de gris pour que vous puissiez le comprendre. C' est une photo. Certaines personnes, quand elles ont esquissé, vont faire le genre X de lignes à travers la boîte. Vous pouvez indiquer une photo, tout ce que vous voulez faire, tout ce que vous vous sentez à l'aise avec. Je vais juste faire ce genre de nuance plus foncée pour indiquer une photo. Alors c'est tout. On peut combler un peu l'écart avec ça. Assurez-vous que la bonne taille, mais une fois de plus ne pas passer beaucoup de temps dessus. Tu fais juste une mise en page approximative. Tu continues de dire ça, mais je dois toujours m'arrêter parce que ce n'est pas un design approuvé. Nous allons revenir en arrière et modifier cela pendant que nous avons parlé au client alors que nous faisons plus de recherches au fur et à mesure que nous revenons et testons, il peut y avoir des changements importants à cela. Donc, vous ne voulez pas passer beaucoup de temps sur quelque chose qui pourrait finir par être changé manière significative à aller de l'avant. C' est pourquoi vous ne faites pas beaucoup du cadre de fil de basse fidélité qui va laisser cet excès. C' est ainsi que ça. Tout ce dont nous avons besoin reviendrait à notre flux d'utilisateurs. Nous pouvons passer en revue les documents UX comme notre persona. Nous pourrions penser à la cartographie du parcours de nos clients. D' accord. Y a-t-il autre chose que nous devons inclure en regardant ce flux utilisateur si c'est pourquoi nous développons le flux utilisateur avant d'entrer dans un cadre métallique ? Parce que maintenant nous avons une bonne idée de l'endroit où l'utilisateur va aller, où il peut aller et quelles options nous devons avoir. Alors allons de l'avant et envoyons-les dans deux directions différentes. On peut les envoyer au restaurant. Ils peuvent avoir une liste de restaurants ou obtenir une liste de produits d'épicerie. Alors allons de l'avant et créons le prochain vert. On commence à aller un peu plus vite, d' accord ? Et ils vont aussi faire apparaître une option et ce qu'on fait. On ne va pas encore dupliquer ça. Je vais créer une sorte de mise en page pour l'un de ceux-ci et dupliqué, donc je n'ai pas à faire la même mise en page deux fois. Commençons par le restaurant d'abord et je vais changer ça à cause de mon flux d'utilisateurs . J' ai l'épicerie en haut et le restaurant en bas, donc ça va garder le même format, donc ce sera la liste du restaurant. Donc ils vont cliquer sur le restaurant, et c'est ce qu'ils vont voir. Il y a beaucoup de choses que nous devons inclure ici. On pourrait inclure une sorte de spatule photo. Zoomez ici l'école basculer en mode design. On pourrait avoir une photo ici qui a une sorte de restaurants. Ou encore mieux, nous pourrions avoir une carte, comme dans notre flux d'utilisateurs. Nous parlons de l'idée d'avoir une carte où ils peuvent voir à quel point le restaurant est plus proche d' eux, pour qu'il puisse avoir une carte du restaurant. Cela aura 10 points avec le genre des meilleurs et vous êtes dans un rayon de 5 km . Je vais vouloir une liste. Nous ne voulons pas que cette carte soit trop grande parce que nous ne voulons pas prendre de biens immobiliers de valeur . Mais nous pouvons toujours avoir une flèche ici pour indiquer qu'ils peuvent développer le menu ou la carte extérieur. Nous allons avoir une sorte d'icône pour lui faire savoir qu'ils peuvent étendre la carte pour prendre le contrôle de tout l'écran. D' accord. Et nous avons une petite flèche ici que nous pouvons utiliser copier-coller et doivent être l' icône parfaite . Peu importe, parce qu'on va finir par le changer à un moment donné. Ce sera une sorte d'indicateur. Je peux toujours dissocier ça. Et je pourrais même éditer cette icône si je le voulais, juste pour en faire un peu plus d'une flèche orientée vers le bas. Ok, pour qu'ils sachent qu'ils peuvent tirer dessus, et ça va se développer à travers l'écran. Ce sera une carte du restaurant ou juste le mettre juste là au milieu. Maintenant, nous avons besoin d'avoir une liste de restaurants. Je vais comprendre comment ils vont le commander et comment ils peuvent comprendre l'ordre afin qu'ils puissent le commander par pertinence sont les plus pertinents qui peuvent le commander par les meilleurs commentaires. Donc nous allons avoir besoin d'une sorte de jetée de recherche où ils pourraient filtrer tout et ensuite nous avons besoin de la liste elle-même. Nous voulons aller de l'avant et faire cette zone de restaurant filtre. Je ne veux pas prendre beaucoup d'espace parce que nous devons pouvoir au moins faire la liste des restaurants sur la moitié supérieure de l'écran. Donc nous avons dû avoir des restaurants filtrants ici, juste une étiquette simple. Et je vais faire quelques boîtes ici pour indiquer comment ils peuvent filtrer. Nous devons donc penser à qui, qui, comment nous voulons qu'ils puissent filtrer. Ah, eh bien, le 1er 1 est par avis. Allons de l'avant et faisons votre petite bulle de révision. Apportez ce travail afin de revoir nos évaluations, rend juste ce bouton parfait parce que nous pourrions toujours aller de l'avant et faire l'outil de grille de répétition et créer les autres Et nous voulons aussi avoir un peu d'indications de ce genre de façon qu'ils peuvent Allez-y et avez une option de menu déroulant ici, juste là pour qu'ils puissent cliquer. Allons-y et prenons notre petite prise. Notre flèche ici n'est pas forcée d'être géniale. Ceci indique qu'ils savent qu'il peut s'agir d'une option de menu déroulant. Nous voulons toujours donner aux gens cette indication de ce que c'est. Ok, donc c'est un peu ton bouton d'évaluation. Vraiment ? Fait grossièrement. Que voulons-nous faire d'autre ? Allons de l'avant et cliquez sur la répétition. Je vais aller de l'avant, mettre en évidence tous ces éléments, puis faire l'outil de grille de répétition. Et allons juste y aller et faire trois pour maintenant. Je ne veux pas donner trop d'options aux gens, et je vais sur un clic droit et un groupe de la grille. Alors, qu'est-ce qu'il y a d'autres choses qu'on peut faire ici pour que les gens filtrent ? Donc vous avez une évaluation que vous avez E t a. Avez-vous estimé le temps de la raison pour laquelle nous avons cette carte qui va énumérer combien de temps il va savoir, euh, coupe de votre emplacement et alors que nous commençons à développer ce genre d'idée de e t Lorsque vous vous inscrivez pour un compte, qu'obtenez-vous ? Besoin de savoir ? Qu' est-ce que cette application va avoir besoin d'être capable de développer cette capacité de vous montrer combien de temps il faudrait un restaurant particulier pour vous livrer. Ils vont avoir besoin de ta robe. Donc c'est là que vous retournez à cette inscription originale et y allez. Vous devez taper leur emplacement ou ils auront besoin de donner la permission à Geo vous localiser. Donc c'est une sorte d'option que nous devons commencer à évoluer et quelque chose qui aurait peut-être pu être développé dans le flux utilisateur. Mais ce n'est pas quelque chose que j'ai pensé pendant ce processus. Et c'est bon. Vous devez en avoir pour ne pas penser à chaque petit truc à mettre dans votre flux utilisateur. Alors réfléchissons à ça. Nous avons deux options. Nous pouvons les faire entrer dans l'adresse de leur compte, mais je pense qu'il vaut mieux localiser Ah, cette personne parce qu'elle peut être au travail et qu'une commande de nourriture ou de sortie est livrée à leur travail. Donc au lieu d'avoir un lien avec une adresse personnelle, alors on va aller de l'avant et faire des recherches, trouver quelle est la meilleure façon de présenter ça dans le processus, et je reviens tout de suite. 7. wireframe faible et fidelité, l'écran d'inscription: faire un peu de recherche sur cette question. Je pensais qu'il serait préférable d'avoir un écran contextuel lors de la connexion avec Facebook, connexion ou de l'inscription à un compte. Donc, juste avant d'arriver au genre de votre écran d'accueil, vous allez avoir un petit module pop-up sont motiles qui va apparaître et vous faire, Ah, Ah, autoriser l'accès à Geo, vous localiser pour trouver votre position et toujours avoir un clic . Permettez toujours. Donc, ils n'ont pas besoin de l'avoir à chaque fois qu'ils se connectent, ce qui serait très pratique pour les utilisateurs répétés. Donc ce que je fais n'est pas en quelque sorte de mettre l'écran juste ici, là où il doit être, où il va apparaître. ce moment, j'ai Il est un écran séparé. Mais quand je commencerai à lier ce mode vers le haut et le prototype un peu plus tard dans la classe, je vais vous montrer comment vous pouvez, hum, quelque sorte indiquer une pop up. Mais ce ne sera pas un écran séparé. Ça va être plus posé sur le screener, cet écran, cet écran, importe ce qu'ils enregistrent, mais ça va être un peu plus d'être un autre écran, mais ça va être un pop up sur vous à travers l'écran de l'écran, et vous pouvez l'indiquer et vous êtes en mode prototypage et aperçu, et je vais vous montrer comment le faire un peu plus tard. Nous avons donc ce genre d'étape critique. Et c'était génial que nous l'ayons fait parce que maintenant l'APP a accès à votre emplacement, donc nous pouvons maintenant la lister par quelle distance ? Comment sont la rapidité avec laquelle ce restaurant peut vous livrer, ce qui serait et A, qui est un type vraiment unique de qualité. Et nous devons en quelque sorte contacter le développeur est si cela est approuvé pour voir comment c'est possible, est-il réaliste de pouvoir rechercher tous ces par ET A. Nous aimerions vraiment ça. Si c'est trop cher pour coder, nous devons abandonner cette idée. Donc, c'est plutôt soigné de penser à cela tôt dans le processus. Donc, si nous avons besoin de contacter quelqu'un qui prendrait la relève, qui développerait ce codage, nous pourrions commencer, les impliquer dans ce processus de planification afin de ne pas les jeter de surprises et de partir. On ne peut pas faire ça. C' est trop cher. Ainsi, être capable de réduire le travail sur ces questions et d'amener d'autres membres de l'équipe dès le début du processus aidera tout le monde. Donc je ne veux pas donner beaucoup d'options parce que, comme nous l'avons fait, êtes-vous une sorte de phase de découverte X où nous avons parlé de sa personnalité d'utilisateur ? Ils n'ont pas beaucoup de temps. On a un marler de deux ans. Ils veulent commander le dîner. Les vraiment fatigués. Ils ont travaillé toute la journée. Donc, ne jetons pas les termes d'options pour nous ne voulons pas que cela soit trop compliqué d'une application . Alors gardons ça aux notes et à l'e. A. Et nous allons aussi avoir un bouton de recherche parce que vous savez qu'ils vont avoir besoin de chercher restaurant qu'ils veulent parce qu'ils ont peut-être une idée. Oh, j'aime vous savez, Texas Roadhouse, ou j'aime McDonald's, et ils veulent pouvoir chercher le nom. Donc, nous allons avoir un simple bouton de recherche, et ce ne sera pas un menu déroulant. Il va y avoir un petit verre ici, alors allons chercher une icône rapide pour que ça puisse indiquer que ce ne sera pas un menu déroulant. Allons à notre belle, euh, feuille de triche ici, faire de la section des icônes. Voyez si je ne trouve pas une petite loupe rapide, loupe, quoi que vous vouliez vous référer, il y en a une qui fonctionne parfaitement pour ce dont nous avons besoin pour un cadre en fil de basse fidélité. Nous devons nous soucier du style de la marque. On a donc une petite recherche. J' ai appelé ici et on pourrait trouver l'emplacement de ça plus tard. Nous voulons juste indiquer au client ou à celui qui va examiner ces documents et les approuver que ce sera une option de recherche. Allez-y et délier ceci afin que je puisse juste en faire un lien noir et blanc et puis je serai en mesure d'avoir accès à la couleur. Je vais juste en faire cette couleur. Alors c'est tout. C' est tout ce dont nous avons besoin pour les options de filtre. Et maintenant, nous sommes prêts à commencer à faire notre liste de restaurants. Alors maintenant, nous pensons aux entrées de restaurant, et nous voulons être en mesure de monter une bonne quantité ici pour qu'ils n'aient pas à s'asseoir là et faire leur doigt et retourner tout le temps pour faire défiler vers le bas. Nous voulons donc pouvoir accueillir au moins cinq ou six restaurants. Mais nous ne voulons pas qu'elle ait l'air bondée non plus. Nous devons donc réfléchir à ce qui est l'information la plus essentielle à inscrire sur une liste de restaurants , et nous l'explorons un peu au cours de notre processus. Mais c'est là que nous arrivons vraiment à le comprendre et à le faire entrer un peu plus en détail. Donc, c'est Gwen Zoom et ce que j'aime, hum, hum, Adobe X T. Si je voulais aller de l'avant et avoir ce fini et doublé encore et encore, je pourrais émettre l'outil de grille de répétition clic sur la grille de répétition, et je pourrais aller de l'avant et voir facilement combien d'entre eux je pourrais tenir sur l'écran afin que grille de répétition pour vous faire économiser une tonne de temps. Alors réfléchissons à ça. Nous avons une note de recherche, donc nous voulons être en mesure de rechercher par notes. Alors laissez-moi voir si je ne peux pas attraper une icône d'étoile ou même juste en concevoir une ici très rapidement avec un outil de broche. J' ai ma petite étoile ici. Voyez si je ne peux pas le répliquer sur le côté droit. Laissez-moi faire un peu plus de contraste ici. Et on pourrait penser un peu à la nuance de la couleur. Pas nécessairement la couleur, mais peut-être le contraste de la couleur. Donc on peut penser à faire un remplissage pour lister un gris très clair, , ou dans ce cas, on pourrait même faire un peu d'arrière-plan gris plus foncé. Donc je vais juste tenir, option et dupliquer ceci et l'amener ici et faire un genre de gris vraiment, vraiment clair et ensuite faire cette boîte blanche pour que ce genre de vraiment éclater un peu sur l'arrière-plan. Il suffit d'aider l'utilisateur à voir la liste sur l'arrière-plan. arrière-plan n'a pas à se battre contre la liste. Faisons de ces étoiles assez grandes pour voir la note, et ce que nous pourrions faire, c'est que nous pourrions faire des évaluations comme d'avoir à montrer cinq étoiles. Si c'est un cinq étoiles, nous devons penser au genre de système d'évaluation que nous voulons avoir pour cette application. Donc on va rester avec Star System parce que je pense qu'on va attraper un peu de ça un autre site d'évaluation. En plus, on va chercher des informations, donc ça doit être quelque chose qu'on peut travailler avec. Le développeur pourrait tirer cette information de Donc une fois de plus, une autre occasion de parler aux développeurs. Découvrez quelle est la meilleure façon d'afficher notre meilleure façon de faire le système de notation que nous puissions le faire. Mais regardez combien de biens immobiliers qui occupe ces cinq étoiles est un restaurant classé cinq étoiles qui prend beaucoup trop de biens immobiliers. Donc, une chose que nous pourrions faire est que l'étoile indique une révision, mais l'avoir dans un système américain. Rendons l'étoile un peu plus grande, rends-la plus évidente. Rends-le un peu plus haut. Contraste. Ajoutons une sorte de couleur foncée, avons une cote syndicale, et ensuite nous pourrions avoir un système numérique. Donc, dupliquons ceci et disons, 4.4 sur 5. Cela nous évitera d'avoir à faire toutes ces étoiles différentes, et nous pouvons avoir notre système de notation ici. Que le système de notation soit sur la droite est l'information la plus importante va être le nom du restaurant et le genre de restaurant qu'il est. Et maintenant que je viens de mentionner que vous pensez, Oh, c' est là qu'on va constamment aller et venir, ça fait partie du processus de châssis en fil de basse fidélité . Vous revenez constamment en arrière et ajoutez des choses que vous avez oubliées ou obtenez des idées et essayez de les incorporer. Parce que maintenant que je fais la note que je me rends compte et que je viens de mentionner le type de restaurant , ne serait-ce pas bien d'aller de l'avant et d'avoir un filtre de type restaurant où vous allez ? Je veux de la nourriture brésilienne. Je veux de la nourriture mexicaine qui sera vraiment essentiel quand il s'agit de restaurants pour que ce soit une option qu' il va falloir intégrer dans notre zone de recherche. Allons-y. Je sais que nous voulons rester simple, mais je pense qu'en ajouter une de plus, peut-être que ne pas faire cette boîte est grand. Nous pourrions aller de l'avant et serrer cela sans avoir à faire une deuxième rangée. On verra si on peut le faire sans le faire paraître trop à l'étroit, et on va devoir trouver un autre nom pour le type parce que ce n'est pas très clair. Euh, tu veux faire Ah, restaurant, hum, restaurant à thème type restaurant, style de cuisine. Laisse-moi faire des recherches sur ce qui serait le meilleur nom pour cette catégorie, et je reviendrai tout de suite. 8. Rédiger des listes avec l'écran Cont.: vous remarquerez. Je suis constamment en train de faire de la recherche. Et c'est quand vous faites des amis de fil de faible fidélité. Vous n'êtes pas seulement en train de rassembler les choses en arrêtant constamment le processus, en faisant de la recherche, parlant peut-être à votre client et en revenant pour essayer de faire fonctionner cela. Il ne sera pas conçu en une seule journée. Ce que j'ai fait, c'est que je suis allé à mes plus proches concurrents, qui est grubhub, qui n'a pas de livraison locale, mais il n'en a pas plus dans les grandes villes. J' ai vu ce qu'ils avaient et ils l'ont appelé cuisines. qui est logique quel genre de cuisine vous avez. sandwichs mexicains américains, ce genre de trucs. J' ai donc eu l'idée de la cuisine d'eux et d'être en mesure de se connecter à cette application et l'étudier et en quelque sorte d'avoir quelques idées. J' ai aussi remarqué qu'ils ont le même avenir que je voulais intégrer avec le mien, savoir le délai de livraison. Donc être capable de voir comment ils l'ont géré, pas nécessairement les copier, mais juste obtenir un peu de ah, quelques idées fraîches et ils ont déjà implémenté cela. Donc c'est juste sympa de voir une sorte de finition, exposer exactement ce que j'essaie de faire. Cela aide vraiment à générer ces idées. Revenons à notre liste. Donc, nous avons notre note. On veut peut-être trouver un moyen de diviser un peu ça. Donc, nous allons juste obtenir une petite barre de séparation, parce que lorsque vous avez une grande mise en page conçue lorsque vous avez beaucoup d'éléments différents ensemble, il est toujours agréable d'avoir des barres de séparation. Les boîtes à contraste élevé permettent de le décomposer afin que l'utilisateur puisse voir comment tout est bien classé dans un espace restreint. Alors faisons ce faible contraste. Ça rend ça très léger, Gracie. Le faible contraste ici et je vais faire référence au contraste beaucoup dans cette classe, vous voulez être en mesure vous assurer que vous pourriez avoir un nom long ou court, et cela fonctionne bien dans cet espace. Donc, souvent quand je fais des noms, je fais semblant de noms. Je fais de très longs noms juste pour que je puisse avoir le pire scénario en termes de combien de place je vais avoir besoin pour correspondre à ce nom long parce que vous avez ce beau design. Mais si vous ne laissez pas assez de place pour le nom du restaurant ou les données qui vont être branchées là-bas. Les développeurs pourraient avoir du mal à travailler avec votre design. Vous voulez vous assurer que votre design est flexible ? Cela pourrait fonctionner avec beaucoup de longueurs différentes. C' est un nom de restaurant qu'on n'aime pas. Nous devons l'avoir assez grand, mais j'aime le garder audacieux. On va devoir avoir le style de la cuisine. Donc, il faut que le Mexicain fasse un alignement à gauche et que ce soit ici pour avoir un nom de restaurant. On a le type de cuisine, on a la note, et on veut aussi mettre le E T A aussi, si on veut avoir combien de temps il faudra pour y arriver. qui est un peu une fonctionnalité soignée de notre application à laquelle nous devons penser est-ce que cela va être possible du point de vue du développement du codage, du point de vue du développement du codage, parce qu'ils vont encore avoir besoin d'informations pour développer un droit. Ta. Si vous commandez 50 enchiladas, ça prendra plus de 10 minutes pour faire 50 enchiladas. Donc, nous devons commencer à penser que c'est possible ? Puis-je obtenir un t t t a à ce stade ou deux après le poids jusqu'à ce que je vais vérifier pour être en mesure d' obtenir mon TA là-bas. Nous devons donc penser à cela comme une possibilité. Retournez au développeur et remue-méninges. Donc, est capable de faire un peu de recherche. Et j'ai réalisé que, hum, ne faisons pas ET en ce moment. Je ne pense pas que nous aurons assez d'informations pour avoir un ET A réaliste, surtout des restaurants locaux qui n'ont peut-être pas le temps de donner des commentaires sur leur activité . Ça ne va pas marcher, je pense, dans la région, sauf si c'est une grande chaîne de restaurants qui a la logistique pour gérer cette partie de l' information. Donc, je mets juste l'emplacement loin de l'emplacement géographique de l'endroit où vous êtes actuellement, et aussi quand je pense à finaliser ce petit bloc pour pouvoir le reproduire, m' assurant que j'ai assez de place pour un très long nom de restaurant et je ne suis pas sûr c'est suffisant parce qu'il y a des noms assez longs de restaurants là-bas, donc nous devons être en mesure de savoir qu'il pourrait s'effondrer en deux lignes de type et avoir suffisamment d'espace ici, donc cela ne change pas la taille de la boîte. Donc, cela peut signifier que nous devons réduire cela plus bas pour que tout cela puisse être expédié par une seule ligne. On doit juste s'assurer que notre boîte sera assez grande. Développeurs vraiment, vraiment bon à obtenir. J' apprécie ça, euh, d'avoir assez d'espace pour qu'ils aient des vies effondrées de type. Un peu de garder le développeur à l'esprit. Ça aidera tout le monde dans le processus. Vous êtes sûr qu'on en a assez pour s'adapter au cours. On pourrait toujours rendre les choses un peu plus petites. Bon, maintenant tu peux avoir deux lignes. Leur école l'avait cru. Et allons-y et on a repris ça. Nous savons que ça va s'effondrer automatiquement. On a assez de place, si génial. Donc si nous nous sentons heureux à ce sujet, je voulais avoir une sorte d'indication ici sur la droite, peut-être une couleur à contraste élevé, couleur de marque ou un rouge, ou quelque chose où ils peuvent indiquer qu'ils pourraient aller à l'atterrissage du site Web ou de ce restaurant et commencer à ajouter des éléments de menu. Donc je pense que nous sommes prêts à reproduire, donc je vais aller de l'avant et regrouper cette grosse boîte ensemble. Je ne pense pas qu'on ait besoin de ce type ici, alors je vais juste regrouper cette bulle ensemble et on va aller de l'avant. Faire l'outil de grille de répétition. J' adorerais m'adapter. Mon but était de cinq. J' aimerais en faire six, mais je ne veux pas qu'elle soit entassée. Voyons à quoi ressemble six. On peut aller de l'avant, aller dans les colonnes et s'effondre. C' est à ça que six ressembleraient. Je ne pense pas que ce soit trop bondé. On pourrait toujours y retourner et ajouter un peu plus de place. Donc on va ajouter 10 pixels entre ou 12. Voyez à quoi ressemble 10 pixels entre chaque écoute et j'adore la façon dont l'arrière-plan a ce gris clair parce que ça aide vraiment ce blanc à sortir mieux si nous n'avions pas le gris, tout commence à se fondre. Il est difficile de différencier où se trouve la liste des restaurants en arrière-plan. Mais juste avoir cette couleur différente aide énormément à être en mesure de trouver et de décomposer cette information. Alors nous allons trouver à cela juste un peu. N' oubliez nous ne voulons pas nous plonger dans le côté design des choses. Déplaçons ça. Je veux juste m'assurer que tout est aligné. Donc, nous avons la recherche en ligne avec la fin de ça. Donc tout a un aspect cohérent. La même chose avec ici. On pourrait peut-être y aller. Pris cela ensemble de sorte que ce côté gauche est aligné sur les listes de restaurants. Donc je voulais avoir un fond blanc là pour les bulles qui voulaient zoomer à un moment difficile de les trouver. Ils se fondent dans l'arrière-plan pour la même raison que ceux-ci avaient du mal à apparaître sur un fond blanc. Donc juste donner un peu de contraste entre cet arrière-plan dans cette couleur d'arrière-plan en zoomant. Prenons une bonne idée de la mise en page. Tout est-il facile à trouver ? Pourrais-je lire le nom du restaurant clairement faire tous les éléments digestibles, faciles à lire, à comprendre. Dwight ont les bonnes icônes pour être en mesure d'indiquer que j'ai besoin de ce que je dois faire pour obtenir que de développer comme cette carte que je voulais développer et prendre en charge l'écran est que assez indication est tout genre de facile à lire. Donc, c'est ce qu'il faut faire avant de passer à autre chose. Parce que plus nous entrons dans le processus, plus nous allons vraiment commencer à avoir une idée de la façon dont cette application va circuler. Et quand nous commencerons à faire la mise en page High Fidelity, ce qui est génial dans un Adobe X'd car vous verrez à quel point il est rapide d'en faire un design poli, euh, euh,par la suite parce que nous allons littéralement tomber dans . Les photos allaient changer de couleur, et ça va vraiment commencer à prendre vie. Et c'est ce qui est tellement besoin de faire haute fidélité des cadres métalliques de ma chose préférée à faire. Donc on y arrive. On a l'écran d'identification. Ce qui est merveilleux à ce sujet, c'est ce côté et l'écran pour le restaurant pour l'épicerie. Ça va être la même chose, donc je peux copier et coller ça notre planche et faire un tour ici. Donc ce sera une branche de décision et le genre de parcours de l'utilisateur, et ils vont cliquer sur un restaurant et aller au restaurant et continuer au processus de départ. Ah, ils pourraient aussi aller faire de l'épicerie s'ils le voulaient. C' est donc agréable de montrer cette option de cadre métallique. Et nous passerions tout ça à l'épicerie pour un balisage. Souviens-toi, Sticky Header sera sur tous les écrans. Donc, nous y voilà. Voici ce que nous avons jusqu'à présent. Regarde ce qu'on a déjà fait. Nous avons un slog et des options de journalisation d'écran. Nous avons une boîte pop-up pour nous aider à obtenir les informations dont nous avons besoin de la part de l'utilisateur pour effectuer notre recherche plus tard, nous avons nos options de restaurant d'épicerie. On les a emmenés à l'épicerie ou au restaurant. Et maintenant, nous sommes prêts à faire la page d'accueil du restaurant. Donc, ils obtiennent une sélection de l'une de ces options. Peut-être celle qui est la mieux notée. Peut-être qu'ils vont cliquer sur les évaluations et cliquer sur le plus haut et cliquer sur le haut. Ensuite, ils vont aller à la page de destination des États-Unis. On va être les prochains. Allons de l'avant et copions et collez ceci. Donc on va couper pour garder la, euh, cette petite boîte ici. Et au lieu de faire de ça une carte, on va avoir une carte. Plus tard. On va faire une photo du restaurant. On n'a plus besoin de ces filtres. Il a déposé le filtre depuis la suppression. Pas besoin de toutes ces options et de ce que nous voulons aller de l'avant et commencer à avoir le genre de menu dans le même style. Donc je pense que c'est exactement ce qu'on va faire. Un sur le groupe de cette grille. Et nous avons juste besoin de l'option la plus haute pour pouvoir aller de l'avant et personnaliser cela. Maintenant, nous devons penser à ce que nous voulons sur la page d'accueil du restaurant. Ce qui est important à voir après avoir voulu explorer le restaurant Ah, la photo des aliments que vous pouvez faire défiler étaient probablement la chose que je veux savoir. Je veux savoir à quoi ressemblent les plats ? Comment ont-ils l'air ? Appétitif. Et il y a donc ces photos pourraient être une sorte de glissement où vous pourriez prendre votre doigt et juste avoir un carrousel coulissant. Faisons ça. Indiquons, Ah, carrousel. D' une certaine façon, on pourrait le faire. Il y a deux répétitions. Ça va. Retirez la bordure des cercles de répétition qui indiquent le nombre de photos disponibles pour faire défiler . Ok, ce sera un peu d'éducation. Et peut-être qu'on pourrait avoir une indication. Où es-tu, Steve ? Une photo. Mets ça en arrière-plan. Laisse-moi rendre ça un peu plus sombre. Pas la frontière, mais Phil. Et ça peut indiquer la photo. Et cela pourrait indiquer que vous voyez peut-être un peu de l'autre photo à côté. Et ce que j'aime dans ce genre de ça vous donne un petit aperçu. Alors, tu sais, en quelque sorte quoi ? De quelle façon vous voulez faire glisser un balayage vers la gauche ou la droite ? Quelle photo semble plus appétissante dans un petit teaser sur les côtés gauche et droit. C' est plutôt sympa. Nicotrol. Ces air alignés correctement, nous pourrions avoir un encadré comme ça. Plus d'espacement entre nos photos. C' est un peu plus évident il n'y a pas. Donc il y a une sorte de notre nom du restaurant. Alors allons-y. Dupliquez le nom du restaurant. J' ai besoin d'avoir ça quelque part. Donc on pourrait avoir un restaurant nommé ici comme un en-tête et rendre ça plus sombre, puis notre système de menu. Alors voici notre menu. Je ne veux pas avoir des types de menu. Et puis, au lieu d'avoir à continuer à les envoyer. On l'envoie déjà sur beaucoup d'écrans différents, donc on pourrait utiliser des menus contextuels. On pourrait faire des glissades. Nous pourrions faire Ah, des menus qui s'étendent mais pas nécessairement apporter dans un autre écran. Essayez juste de réduire la quantité d'écrans totalement différents que l'utilisateur va devoir passer à la commande. 9. Liste de menu: Maintenant, nous devons penser à quand vous êtes sur la page de destination. Quelle est la meilleure façon de présenter tous les différents types de menu que vous avez parce que vous avez hors-d'œuvre, des plats, des desserts, petites assiettes, top nous avons beaucoup de différentes catégories, et nous ne voulons pas les submerger. Je me sens comme un format de liste si nous avons fait un format de liste et pourrait être un peu difficile, parce que peut-être ce qu'ils recherchent est au bas de la liste. Et ils doivent se brouiller pour obtenir des plats pour les orteils ou l'école pour obtenir des desserts. Donc, je pense que peut-être une mise en page basée sur une colonne côte à côte pourrait fonctionner un peu mieux, et donc ils seraient en mesure de voir plus un peu plus haut dans cela à l'écran. Donc, nous allons une sorte de justice semble faire un très léger petit Warner. Je ne vais pas passer trop de temps là-dessus et la frontière avec alléger et voyons si nous ne pouvons pas utiliser le super outil de répétition. Alors prenons notre petit titre ici, et ce sera le dessert. Il n'y a pas tout ça. On va être des desserts, mais on va pouvoir avoir une idée. Faisons un alignement central de ce que ça va ressembler. Ce que je vais faire, c'est peut-être avoir l'occasion d'avoir un symbole ou une photo qui indiquerait un dessert. Donc pour indiquer une icône, je vais juste aller ragoût un cercle d'avion. On ne va pas concevoir. L' icône le fera dans la phase suivante, mais nous devons nous assurer que nous avons assez de place pour les noms très longs. Tout ne sera pas un nom court et concis. Gardons-le large. Trouve-le un groupe. Voyons à quoi ça ressemble. Avec la répétition, Great Tool est dû à des colonnes et faisons six profondeurs. Faisons huit. Juste pour vraiment s'assurer que nous montrons un nom de restaurant que nos catégories de restaurants qui peuvent avoir beaucoup de catégories de restaurants. Faisons la même largeur et la colonne ici. Voyons donc combien de pixels que IHS c'est Ah, c'est à 14 et nous allons faire 14. Qu' en pensez-vous ? Tu crois que ça marche ? Parce qu'il faut réfléchir à la prochaine étape s'ils veulent commander un dessert. Et donc je pense, vous savez, je ne suis pas sûr que ça marche, parce que si vous faites un petit menu déroulant. Disons qu'il y a un peu de pop down. Ensuite, vous pourriez sortir comme ça et vous serez en mesure de l'ajouter. Mais je pense d'un point de vue développemental du point de vue du codage qui peut peut-être avoir quelques problèmes avec le menu pop-out. Donc je vais vraiment abandonner toute cette idée, et je vais revenir à cette idée de faire les colonnes. Tu as remarqué comment j'ai dû tester ça ? J' ai dû tester ça en mer, mais j'allais marcher ou pas. Et je ne savais pas que ça allait marcher jusqu'à ce que je commence à penser que je pourrais avoir deux pour l' envoyer sur un écran séparé. Et je veux éviter ça. Donc ça ne va pas marcher pour cette raison que je vais garder ça juste au cas où j'en aurais besoin plus tard. Glissez ça. Donc retravailler cela un peu pour avoir une meilleure sorte d'action de menu pop-out quand cela arrive , juste un peu de faire quelque chose de très simple. C' est une sorte de traverser. Mais je l'ai rendu beaucoup plus maigre ou donc je peux faire l'outil de grille de répétition et adapter au moins six de ces gars, tout dans un endroit très agréable, concis a été fermé. L' effondrement, le modèle ici un peu. Donc peut-être juste ici. Je veux dire, les visages, les plats, les desserts. Continuez à descendre la liste. Et puis nous devons comprendre ce qui va se passer quand nous cliquerons sur l'option Développer . Et ce sera un peu sur l'écran suivant, où nous allons développer ça. Débarrassez-vous de tout ça. Tous ces articles, gars, nous allons en quelque sorte dupliquer ce que nous avons ici, et ce sera ce qui se passera lors de l'expansion du menu. Alors que va-t-il se passer ? Sous le groupe de la grille, on pourrait avoir accès à tout ça et on va les expédier, donc ça va être une sorte de liste déroulante de style accordéon. Cela aurait pu tomber avec toutes les différentes options ici. Et rappelez-vous, comme nous l'avons fait avant. Nous devons nous assurer que nous avons de la place pour de très longs noms parce qu'il y a des noms très longs dans les restaurants. Donc, nous allons peut-être réduire la taille du texte, et peut-être que nous avons juste besoin de l'avoir comme une attente régulière. Donc, cela laissera beaucoup de place pour les options de très grande taille. Nous avons un panier doit être en mesure d'ajouter ces articles au panier. Nous avons donc besoin d'un signe plus ou moins pour pouvoir indiquer qu'ils veulent quatre frites. Ils veulent juste un frire et une sorte de bouton qui indique ajouter au panier. Donc, nous avons assez de place ici pour pouvoir le faire. Donc on va le faire ensuite. Ok, donc j'ai pu travailler là-dessus un peu et j'ai eu quelques boutons très arcade pour indiquer le genre d'actions que l'utilisateur doit prendre pour pouvoir l'ajouter au sac. Dans ce cas, j'appelais dans un chariot, mais je pense que nous devons probablement appeler ça un sac. Ça va aller faire du shopping. C' est agréable de pouvoir ajouter des choses à un sac. Quand vous allez le chercher au restaurant, vous ajoutez à un sac. Ce genre de choses nous trouvons un peu de ce langage pendant que je travaille dans ce processus, et donc nous allons avoir besoin d'un bouton qui indique, ajouter le sac. Alors allons de l'avant et faisons un petit bouton de contraste plus élevé et allons de l'avant et changeons la facture. Donc, ce genre d'aide cet élément à sortir et à ne pas rivaliser autant avec l'ajout aux éléments. Donc vous pouvez dire comme ce genre d'encombrant que j'ai conçu en ce moment, nous allons affiner ça un peu plus tard. Mais je pense qu'en termes de place, je devrais avoir assez de place pour pouvoir remplir les options ici. Je pourrais toujours rendre le type un peu plus petit, le déplacer un peu vers la gauche. Et quand on fait ce que je dessine, on peut toujours nous effondrer. Rendez cela un peu plus raffiné pour nous donner un peu plus de place pour des noms d'options de côté plus longs . Donc ce que je vais faire ici, c'est que je vais penser que j'ai toujours ça comme outil de grille de répétition . Il va s'effondrer à nouveau et l'enlever de la grille de répétition pour que je puisse prendre cette option , roupir ensemble et la répéter avec le type à l'intérieur. Donc je pense qu'on a fait cinq options et qu'on s'effondre ici, on pourrait mettre un peu d'espacement entre les deux. Je ne sais pas si cela aide ou non. Peut-être que c'est le cas. Une chose que je veux faire avant de faire tout ça. Laisse-moi alléger le coup sur la frontière. On ne veut pas penser à une frontière, alors laissez-moi descendre et en faire une. Faisons un 0.6 juste comme se lever un peu. Maintenant, je suis prêt taux. Et maintenant quel genre de démonstration ? Que se passe-t-il quand il s'effondre ? Ils cliquent sur ce bouton. Ce n'est pas un écran complètement différent, mais c'est quelque chose que nous allons pouvoir n'avoir pas montré d'animation. Lorsque nous faisons un mode prototype quand nous relions tout ensemble, nous allons montrer le menu déroulant pour qu'il l'ait sur un écran séparé sur X d. Um, pour pouvoir accomplir cette animation, même si ce ne sera pas un écran séparé pour l'utilisateur. Super. Donc, nous allons zoomer, voir ce que nous avons jusqu'à présent, donc là, capable d'ajouter différents éléments secondaires. Maintenant, nous allons aller de l'avant et cliquer sur les utilisateurs qui vont cliquer sur le panier, ils seront prêts à vérifier. Maintenant que je pense à OK, vous ajoutez des options à votre sac. Maintenant quoi ? Donc, disons avoir ajouté l'option un et l'option à une option trois. Comment puis-je sortir ? Est-ce que je viens au panier ? Ce n'est pas évident ce que vous faites ensuite, donc je dois être capable de trouver un moyen de revenir à la page d'accueil du restaurant, de pouvoir avoir un écran de départ ou avoir la possibilité de toujours vérifier immédiatement. Donc juste ajouter quelques autres éléments détaillés que le travailleur orteil veut avoir une page de destination ? Nous ne pouvions même pas avoir une option pour mettre une copie, peut-être quelques phrases sur le nom du restaurant et aussi besoin d'avoir un endroit pour le trouver sur la carte. Donc nous allons avoir besoin d'être en mesure d'avoir ça comme une option pour. Donc je vais changer ça et avoir peut-être une petite icône de carte, voir si je ne peux pas trouver une icône de carte ici dans nos petits éléments vous une fois qu'il ne sera pas un bon ou en fait vous savez quel meilleur moyen je sais exactement ce qu'on peut faire. Je pourrais aller dans Adobe Illustrator. Je vais chercher mon paquet de branding que j'ai ensemble. Et j'ai l'icône parfaite pour indiquer une carte. Donc on va l'utiliser. Cela fait partie de notre image de marque pour notre, euh, notre application. Pourquoi ne pas incorporer l'élément opérationnel de son application dans la conception de l'icône ? Alors laissez-moi aller prendre quelques uns d'entre eux et exporter ceux-ci afin que je puisse les avoir comme icônes dans le W x d. 10. Panier panier: Je suis en train de peaufiner notre mise en page, en ajoutant toutes sortes de détails qui sont nécessaires pour que l'utilisateur ait toutes les informations il a besoin pour vérifier correctement et ajouter au panier. Nous voulions donc avoir l'option BAP. Je voulais montrer à quel point le restaurant était loin de leur emplacement, et ils peuvent également cliquer sur cela et une petite boîte pop-up va aller de l'avant et charger une carte qui montrera une sorte de rugueuse e t. A. Basé sur l'ordre qu'ils ont mis dans leur cour. Et je voulais m'assurer que nous avions des notes ici et certains de ces détails qui étaient sur la page précédente afin qu'ils puissent être cohérents avec la page de destination. Donc, je voulais aussi avoir ou de vous bouton de commande au bas si jamais ils étaient de se confondre et ne pas savoir qu'ils étaient prêts à vérifier quand ils ont une commande de révision, sorte de leur rappeler qu'ils pouvaient aller de l'avant et vérifier. Et je voulais aussi avoir une indication ici que lorsque vous ajoutez quelque chose aux chariots, quelque chose se passe et nous pourrions faire une animation quand nous allons à la mise en page haute fidélité qui peut indiquer peut-être que cela zoome dans un peu de surgit. Elle ne changerait pas sa couleur pour savoir que vous pouvez cliquer ici pour faire le processus de retrait à tout moment. Vous voulez ajouter quelque chose au panier ? Donc on va faire ça. On va ajouter un autre écran ici, et ça va être pour l'animation pour plus tard. Nous allons juste aller de l'avant et montrer à quoi ça ressemble et le cadre filaire basse fidélité afin que nous puissions montrer au client comment nous avions prévu de faire en termes d'animation et de . Ah, indication claire qu'il y a que le processus de départ est prêt à aller de l'avant. Qu' est-ce qu'on peut faire ici ? On peut le rendre un peu plus grand. On pourrait avoir ça un peu plus grand et on va faire une animation plus tard, alors on va en quelque sorte le faire tomber quand je pourrais le faire tout à fait. On va juste montrer ce qui changerait quand quelque chose est ajouté aux voitures. Disons que deux éléments ont été ajoutés à la carte. Disons que ces inverses diront que devient plus sombre et que le nombre devient plus léger est de montrer l' indication d'un changement. C' est peut-être rouge. Peut-être que c'est une couleur différente, et nous pouvons l'indiquer de sorte que l'utilisateur voudra cliquer dessus. Alors changeons l'ombre ici. Je sais qu'on fait du noir et blanc pour l'instant, mais indiquons qu'il y a beaucoup de changements. Donc, l'ajouter au panier ce sera automatiquement ajouté la carte et avoir une petite animation pop. Peut-être qu'il fait un zoom avant et un zoom arrière juste une très petite quantité. Tellement fantastiques étaient très proches. Regardez jusqu'où nous sommes allés si loin dans le processus. Tous les écrans que nous nous moquons et nous allons un peu plus loin que beaucoup de gens font, ce sont des cadres en fil de basse fidélité. Beaucoup de gens dessinent ça sur papier, donc ils ne pensent pas à ces petits détails que nous sommes. Mais quand il s'agit de développer le cadre de fil haute fidélité, nous avons vraiment beaucoup fait. Nous avons fait beaucoup de travail de base pour savoir où se passaient les choses que nous devons juste affiner le côté graphique Alors maintenant que nous avons ceci fait, quelle est la prochaine étape ? Allons à notre diagramme de flux utilisateur il a ajouté des choses dans le panier. Maintenant, ils vont vouloir être en mesure de vérifier et de revoir la voiture pour voir combien est tout. Donc, nous avons besoin d'une sorte d'un chèque page de panier ou, dans ce cas, un écran de panier qui va vivre les taxes au total et combien cette application coûte comme un frais de service. Alors voici notre écran de panier, donc on va aller de l'avant et le titre Quelque chose va de l'avant, fais-le. Ah, panier et nous voulons pouvoir commencer à montrer le E T A. Maintenant que nous savons que nous avons le montant qui est commandé. On connaît le restaurant. Nous connaissons l'emplacement. Nous avons toutes les données dont nous avons besoin pour être en mesure de montrer montrer l' heure estimée d'arrivée pour notre livraison de nourriture. Donc, au lieu d'avoir ces photos en haut, on pourrait avoir une chance de faire de ça une carte. Donc, ce sera une carte visible avec un e. T. T. A. Il y avait deux personnes ont cette icône aller utiliser notre petit symbole de marque que nous avons dans notre logo est leur icône. Je pourrais être en mesure de détoiler cela et changer les couleurs et encore une fois juste garder fierté simple. Seulement l'ombre là-bas. Ce sera donc une sorte d'indication de l'endroit où il se trouve. On va avoir un petit bouton, et j'ai, je pense, le parfait. Je vais aller de l'avant et m'ouvrir par un petit tricheur elle ici et voir si je ne peux pas trouver quelque chose pour indiquer l'e t. A. Avoir une petite bulle pour mettre le numéro dans, voir à quel point c'est facile une fois que vous avez un peu de ces conçu. Parfois, je vais revenir à des projets antérieurs et vous prendre des éléments I à partir de là. Là, c'est parfait ici. C' est ce que je veux. Ok, donc ça va indiquer et un. Disons que l'E T. A sera le cas. Disons que c'est une heure d'arrivée de 12 minutes, 12 minutes. Il y a et A. Il y a un emplacement sur le panier. On n'a plus besoin de cette information. Sur notre organigramme, nous avons pu voir des concurrents, restaurants à proximité qui avaient peut-être un délai de livraison plus rapide, donc nous voulons être en mesure d'avoir cela dans notre cadre métallique aussi, parce que je pense que c'est un peu à avoir. Donc nous allons avoir ici. Et ça va être un peu génial parce qu'on ne veut pas que les gens regardent ça . Tu vois ça ? C' est leur heure d'arrivée. Rendons ça un peu plus sombre, Bray et faisons ça. Faisons un point avec Eero, et ce sera un autre restaurant ici. On va devoir trouver des moyens graphiques pour s'assurer que c'est évident. Pourrions-nous faire la mise en page haute fidélité ? Que ce n'est pas le restaurant, c'est le restaurant où ils vérifient ? C' est le restaurant dont ils vont avoir l'option. Peut-être que c'est undélai de livraison plus rapide, délai de livraison plus rapide, accord, et c'est du même type. Donc peut-être que c'est de la nourriture mexicaine, et qu'il charge un autre restaurant mexicain qui se trouve avoir un délai de livraison plus rapide. Donc, au lieu d'offrir un restaurant aléatoire avait et veulent chinois, je voulais mexicain qu'il soit dans la même catégorie de type alimentaire. Ok, donc voici un sac à provisions. Nous n'avons plus besoin de tous ces éléments afin que nous puissions le supprimer Nous sommes de garder notre ordre de révision ou allons dire que l'achat maintenant terminer l'ordre sera le moins mais à la fin. Et nous ne voulons pas de l'écran. Nous avons fait une sorte de recherche U X et avons décidé que nous voulions avoir un écran de vérification très, très, très simple. On veut juste un écran. Nous ne voulons pas que l'utilisateur ait à faire défiler, alors allons-y et réduisons cela afin que l'utilisateur n'ait pas à faire défiler. On va faire de notre mieux pour que tu ailles faire ça. Cliquez sur le haut de mon nom de tableau d'art supérieur et obtenez que ce soit la taille de l'écran. Super. Vous ne voulez pas qu'ils défilent. Nous voulons vraiment essayer de rester concis. Si nous ne pouvons pas sortir les menus, Will le fera. Ok, donc ce sera, euh, aliment 1. On va avoir une sorte de retrait. Nous devons être en mesure de retirer du panier. Donc ce que je vais faire, c'est aller de l'avant, emprunter à l'écran en face. Il faut toujours donner aux gens la possibilité de retirer et de revenir en arrière dans le temps. Voici le genre de notre article à supprimer. Nous voulons également leur donner la possibilité non seulement de supprimer l'article, mais d'en supprimer peut-être un. Peut-être qu'il y en a cinq et là, mais ils ne voulaient que quatre frites, mais il y a cinq frites qu'on doit avoir. Donnez-leur également la possibilité d'ajouter soustraire. Je vais emprunter ces éléments depuis que je les ai déjà signés. 11. Finir la vérification: J' ai passé environ 10 minutes à travailler sur ces deux prochains écrans, et je veux en quelque sorte parcourir les raisons pour lesquelles j'ai pris des décisions de mise en page. Donc, nous avons une sorte de processus de vérification très simple. Nous voulons avoir un écran unique. Nous ne voulons pas avoir à faire défiler le processus de vérification, et j'ai pensé que lister tous vos articles et les avoir être pliables, mais aussi avoir les taxes listées. Il y a des frais de service et de livraison, mais aussi avoir une zone où ils peuvent taper et ajouter un pourboire parce que c'est agréable de pouvoir livrer quelque chose et de ne pas avoir à se soucier de donner un pourboire à quelqu'un. C' est déjà une partie du processus et enfin de très facile à lire Total et un bouton de commande maintenant et de sorte que quand ils cliquent sur le bouton de commande maintenant, ils vont venir sur cet écran. J' ai pu obtenir cela à partir de la feuille de triche un peu vous, Je kit que nous avons téléchargé à partir d'Adobe le Will kit cadre, et cela m'a sauvé une tonne de temps d'avoir à taper toutes ces choses et de comprendre ce qui est nécessaire pour une carte de crédit. C' était vraiment agréable de copier et de coller ceci. Nous pourrons l'adapter à notre propre style plus tard. Mais j'ai ajouté ce portefeuille Ajouter carte de crédit parce que nous voulons est la première fois qu'ils vérifient. Ils n'ont pas de carte de crédit dans les dossiers, donc nous allons devoir leur donner la possibilité d'ajouter une carte de crédit pour qu'ils aient tous à faire cette étape la prochaine fois. Il sera juste envie d'utiliser votre carte sur la boîte pop-up et ils cliquent, Oui, et donc nous commençons à vraiment affiner ça. Faites toutes les options disponibles à l'utilisateur pour la conception. Il va falloir que cette petite boîte pop-up dessine ça aussi. Donc il y a, vous savez, moment, nous avons juste les bases, donc nous le ferons un peu plus tard au fur et à mesure que nous entrons dans le processus. Donc, il y a vraiment une sorte d'écran trois écrans que l'utilisateur va passer par le processus de retrait , et nous pourrions penser que c'était trop ? Y a-t-il un moyen de consolider ? Je ne pense pas qu'il y en ait. J' essaie de simplifier encore plus ce processus. C' est alors que je pourrais parler à d'autres personnes qui ont la propriété de ce projet et comprendre ce que sont leurs pensées et leurs idées, en particulier parler aux développeurs qui peuvent avoir ah, solution sont certains pop up une option slide out ce qui pourrait rendre ce processus encore plus rapide. Donc, pour l'instant, pour cadre de fil de base et obtenir quelques idées du processus global, Je pense que cela fonctionne bien. Ils examinent la commande qu'ils examinent, ils cliquent maintenant sur la commande, et ils doivent ajouter l'adoption. Et puis il y aura encore un écran après ça. Et ce sera ce qui se passera quand ils auront un processus de départ réussi et ça va montrer que l' E.T.A E.T.A E.T.A est un très grand écran de carte. Donc ce que je pourrais faire est de dupliquer quelque chose ici. Peut-être qu'ici nous avons déjà une carte et nous l'agrandissons un peu plus loin. Ça va montrer combien de temps ça va prendre. Nous n'avons plus besoin des concurrents, car ils sont passés de l'avant et passer leur commande. Mettez ceci avant et au centre, et je crois que si nous revenons au diagramme de la réserve, nous avions l'option de contacter le restaurant s'ils voulaient changer la commande. Copions ce bouton pour que ça puisse être, Ah, Ah, changer d'ordre, ordre d' annonce. Et ce bouton aura un écran pop-up qui aura accès au numéro et peut-être un message texte capacités pour contacter le restaurant. Donc, faisons une autre option que je pense revenir au diagramme de flux utilisateur que nous avons créé. Il y a aussi la possibilité de revoir, mais cela ne viendra pas un peu plus tard dans le processus. Donc nous l'avons fait. Nous leur donnons la possibilité de modifier ou d'ajouter de l'ordre. Rendons le NAPA vraiment grand, et cela sera mis à jour mais un peu plus grand. Au fur et à mesure que la personne se rapproche, ce sera comme uber où le cours où elle obtient le testament change et ensuite nous aurons l' écran lors de la livraison réussie qui leur demandera de revoir l'expérience. Donc la livraison réussie et ils auront une capacité d'être en mesure de l'évaluer Donc, livraison de livraison réussie. On aura, comme peut-être un joli graphique. C' est une chance de faire un peu de travail de design plus tard, et de pouvoir vendre croisée. Nous voulons les renvoyer, intéressés et commander des courses, les rendre excités par la prochaine étape. Bien sûr, leurs chariots vont être à zéro parce qu'ils viennent de s'en aller. droite ? Donc il y a encore tellement de choses à concevoir. Nous devons concevoir les menus pop-out. Nous devons concevoir ce qui se passe quand ils cliquent sur la carte. S' il doit y avoir un pop up The New Yorker, ça ira directement dans le chariot. Il y a beaucoup de choses que nous devons développer. Ce n'est qu'un angle. Est-ce ce seul voyage à travers, vérifier hors d'un restaurant, Nous avons encore besoin de leur faire vérifier une nouvelle épicerie Étaient pas à faire que cette classe, parce qu'il faudrait 20 à 30 heures pour vraiment concevoir chaque écran dans la faible fidélité manière. Donc nous allons nous concentrer sur ce processus que nous avons fait et le travailler ensuite. Passez à la haute fidélité. C' est ma partie préférée. C' est la partie amusante que nous pourrions incorporer les bras de marque. Le logo va faire quelques icônes personnalisées. On va y ajouter notre palette de couleurs, et ça va être un processus très rapide. C' est le travail dur Nous avons fait tout le très difficile pour le travail, et maintenant il est temps d'éclore sur ce designer, vraiment plonger dans le nouveau je désire. 12. Cadre de wireframe haute fidélité - Commencez: C' est là que le plaisir se passe vraiment. Nous sommes prêts à aborder enfin, ce cadre de fil haute fidélité quand nous arrivons à vraiment apporter dans la partie design des choses et avoir du plaisir et courir un peu sauvage. C' est là que mon fond de design graphique brille vraiment et est utile. Et si vous avez un fond de conception, c'est fantastique. C' est là que vous pouvez vraiment jouer et utiliser vos compétences. Donc ici, nous avons notre cadre de fil basse fidélité fouetté. Ici. Nous avons une merveilleuse sorte de départ, et maintenant nous arrivons à tout polir ou simplement aller écran par écran. Nous pouvons ne pas être en mesure de les faire tous, mais nous sommes fait est beaucoup d'écrans que possible et une quantité décente de temps. Donc, l'une des premières choses que nous voulons faire est de configurer nos couleurs, nos polices pour une marque et d'apporter certains de nos fichiers de logo. J' ai donc un guide de marque que j'ai développé dans Adobe Illustrator et je l'ai à votre disposition pour le télécharger. Si vous voulez aller de l'avant et utiliser ceci comme une marque simulée pour vous et j'ai tous ces différents types d'actifs de style mis en place. J' ai des codes hexadécimaux de couleur. J' ai quelques logos sur un fond sombre et sur un fond blanc, et j'ai quelques icônes de couleur différente. Donc je vais juste apporter tout ça en P et G. Je vais juste te montrer ça rapidement. Pourquoi pas ? Pourquoi ne pas te montrer tous les petits pas que je traverse ? Je vais juste créer plusieurs petites planches d'art autour de mes logos. Asseyez-vous et je suis le groupe ici. Donc tout ce que j'ai fait a été créé des tableaux d'art autour de chacun de ces éléments dont je vais avoir besoin car un PNG transparent va effacer l'exportation de fond qui et toutes sortes d'exportation joliment. Vous êtes dans votre guide des ressources téléchargeables. J' ai des actifs locaux de marque grub. J' ai toutes les icônes en tant que S. P G, et j'ai aussi certains des fichiers locaux aussi transparents. P et G vont traîner ça et se débrouiller avec ça dans notre maquette de haute fidélité . Maintenant que nous avons quelques fichiers pour travailler avec des images, revenons dans Adobe X'd afin de configurer les choix de type ainsi que de configurer nos codes hexadécimaux dans nos actifs de couleur. Vous êtes les trois codes hexadécimaux que j'ai développés pour cette marque particulière. Je vais juste les amener un par un dans Adobe X T, et ça va dessiner une boîte qui va cliquer dessus pour remplir. Et je vais juste accélérer ce code hexadécimal et puis je vais décocher la frontière, et puis je peux l'ajouter comme les actifs allait faire un clic droit sur ajouter de la couleur aux actifs. Je vais juste dupliquer cette boîte et faire la même chose. Allez-y et chargez mes autres couleurs. Ce que j'aime dans Adobe X'd, c'est ce panneau de style global où nous pouvons éditer certains de ces styles et il ne le fait pas globalement sur l'ensemble du document parce que vous pourriez voir que nous avons déjà fait tellement quand il s'agit de notre type et de sorte qu'il soit conçu pour être honte si nous devions entrer et changer chacun des choix de type pour celui que nous aimerions. Donc, ce que vous pouvez faire est voici les quatre qui sont actuellement utilisés sur le document. On pourrait commencer à avoir un peu d'une hiérarchie de types en cours ? Déterminez ce qui va être notre H un ou nos gros en-têtes. Qu' est-ce qui va être notre H 2 ? Un peu d'en-tête de plus petite taille. Quel sera notre paragraphe ? Notre type de copie corporelle. On pourrait aller de l'avant et définir la police. Attendez et allez-y et mettez tout ça en place. Donc, si jamais nous avons besoin de le changer à l'échelle mondiale et de changer 50 écrans différents, nous avons juste un clic droit de l'orteil, allez à modifier. Et vous pouvez aller de l'avant et le changer une fois qu'ils sont tous configurés et nous allons changer toutes les polices qui sont définies à ce style global. Donc c'est très pratique quand tu te fais. Je conçois. Donc ce que je vais faire si je veux comprendre ce qui est sélectionné en ce moment comme nous l'avons fait notre cadre métallique basse fidélité était un peu fou. On l'a juste giflé ensemble. Donc, maintenant, nous devons être un peu plus précis quand il s'agit de ce type de problèmes, parce que nous allons commencer à concevoir beaucoup plus d'écrans et à finir tout ça. Donc, disons que je veux savoir Qu'est-ce que cette antenne 16 J'ai eu quatre différents dont nous avions besoin Title ces et assurez-vous que nous avons mis en place un bon type R G avant de continuer. Donc je vais faire un clic droit, et il pourrait mettre en surbrillance sur toile, et ça va mettre en évidence tout le type qui est utilisé ici. Donc, on dirait que ça va être coupé d'un en-tête supérieur ici. Alors attrape-le. Euh, allez-y et nommez ce type d'en-tête supérieur. C' est juste le genre de m'aider à savoir quand utiliser ce style particulier ou ce que ce style est. Je vais aller à la prochaine. Allons de l'avant et soulignons cela sur la toile. Ok, donc c'est notre texte de bouton pour que je puisse voir tous les boutons. Avoir ce type à elle. Allons de l'avant et bouton dio do, mais dans le texte. Et on va aller de l'avant et faire ça. Continuez tout au long. Ok, ça va être notre copie du corps. Un peu plus petit. On va passer par ça et tout mettre en place pour qu'on puisse avoir non seulement un gentil type, Harkey. On sait quelle sera la taille de l'en-tête. Ce qui va être si tout est cohérent dans toute la pièce, donc je sais que tous les en-têtes ou 14 points taille ou 16 points, toutes les copies du corps, 10 points et une attente régulière. Donc, tout est en quelque sorte ensemble. Vous pouvez définir les couleurs. Vous avez paramétré votre type et nous nous sommes limités à ce type alors que nous travaillons sur son type de design parce que nous pouvons finir par changer la police de caractères, nous pouvons finir par changer la taille et pouvons toujours ajouter plus de styles de caractères que nous avons vraiment parce que nous pouvons finir par changer la police de caractères, nous pouvons finir par changer la taille et pouvons toujours ajouter plus de styles de caractères que nous avons vraiment concevoir. Donc ça va toujours être une sorte de zone de travail pour nous. Nous allons continuer à l'ajouter et à l'éditer comme nous continuons à le faire, faisons quelques symboles. Donc nous aurions pu le faire un peu dans la faible fidélité. Mais quand nous faisons la faible fidélité, nous ne pensons pas à toute cette configuration encore parce que les conceptions n'ont même pas encore été approuvées. Maintenant que nous avons une sorte d'approbation pour passer à autre chose et faire vraiment une mise en page de finition lisse , nous allons essayer de relier tous nos symboles vers le haut. Donc, lorsque nous lions des symboles, nous pouvons le changer globalement. Alors maintenant, ça. J' ai fait ce que j'ai fait. Est-ce que j'ai raison ? Cliquez sur Et je viens de créer Assembler à partir de cela. Maintenant, voici mon symbole. Alors maintenant je peux aller de l'avant et changer ça pour lire si je veux. Ce que je dois faire est de remplacer ce symbole. Il suffit de maintenir l'option enfoncée et juste remplacer le symbole par le symbole de lien. Donc maintenant, quand je retournerai et que j'ai changé le symbole, ça va le faire sur les deux. Et je n'ai pas besoin de m'asseoir là et de changer la couleur des deux. Cela vous sera vraiment utile si vous liez tous vos symboles de sorte que tout ce que vous avez à faire est d'appuyer sur un bouton et tous changent sur tous les différents en-têtes. Nous allons installer ça et faire que l'assemblage étaient aussi voulus pour nos sacs à provisions assembler. Donc, quand un clic droit et faire assembler afin que nous puissions également changer le panier de livraison la même manière, je ferais probablement l'en-tête comme un symbole afin que je puisse changer cet en-tête sur tous les différents en-têtes à la fois parce que Je peux vouloir les changer tous à la fin du processus de conception peut être, le client dit que je voudrais que l'en-tête soit blanc. Ce ne sera pas un gros problème pour nous de le changer sur 100 écrans s'ils sont tous liés comme un symbole. Donc je vais faire ça très vite. Je vais aller de l'avant et obtenir tous ces liens pour que nous devions changer tout ça très rapidement. 13. C'est un cadre de la fidélité - l'écran de connexion: Donc, ce que j'ai fait ici, c'est que j'ai regroupé cet élément. Je vais aller de l'avant et un groupe et montrer ce que j'ai fait tous ces symboles individuels de l'air, différents symboles liés. Si vous allez par ici, vous pouvez voir tous ces symboles de liens avec, bien sûr, les nommer afin que vous puissiez venir à savoir lesquels le menu hamburger. Lesquels non, mais ils sont tous individuels, donc je peux les changer en tant que symboles individuels ainsi que ce graphique ou barre d'arrière-plan. Donc tout ce que j'ai fait, c'est que j'ai regroupé tout ça, et je suis en quelque sorte en train de les glisser en place. Il obtient qu'il s'accroche bien au haut de la page, a été en mesure de remplacer ceux tous très rapidement. Et maintenant que je les ai en symboles et que tu te montres à quel point c'est amusant, alors on va aller au menu des hamburgers juste ici. C' est notre symbole de lien. Allons de l'avant et donnons tout ça. Et maintenant je vais pouvoir éditer afin que je puisse aller de l'avant, sélectionner ce symbole de lien que sur le groupe et je veux tous les changer. Alors maintenant, je l'ai fait tout rouge comme ça. Donc, si nous voulons expérimenter avec la couleur. On pourrait commencer à vraiment peaufiner cet en-tête. Donc, si je veux utiliser notre couleur de marque ici, je veux en quelque sorte la changer pour ce genre de couleur vert bleu. Juste comme ça, c'est fait. Je veux aussi changer cette couleur pour qu'un gris clair soit fait. Je l'ai fait globalement sur tous. Nous ne devons pas nous asseoir là et le faire encore et encore dans chaque écran. Je veux dire, c'est incroyable. J' aime vraiment cette partie de X'd voulait changer un sac à provisions pour une certaine couleur. Peut-être que nous voulons ajouter une nouvelle couleur à notre palais parce que cette marque a été développée en collant sur le logo. Mais ça ne pensait pas à toi. Je, euh, et j'ai besoin d'un bouton très contrasté, un bouton très lumineux qui est très différent du vert. Donc, il apparaît vraiment. On va ajouter un nouvel élément de couleur ici. Je vais juste ajouter une nouvelle couleur. Et rendons ça dorée à Phil pour en faire un rouge parce que c'est très différent du vert. Mais peut-être ajouter juste un petit peu de c'est peut-être un peu rose pour lui donner une sorte de dynamisme brillant. Vous avez juste un peu de folie pour trouver le bon cours de couleur. Nous pourrions nous amuser dans Illustrator et perroquet ensemble pour trouver la bonne palette de couleurs. Je veux quelque chose d'assez lumineux et éclatant pour que vous puissiez certainement le voir. Qui sait comment je change ça ? Regardez ce changement sur tous les en-têtes. J' adore qu'on puisse changer cette petite boîte. Nous pourrions même maintenant que nous n'avons pas à le faire sur tous. On peut juste faire celle-là. Peut-être faire cette petite bulle rouge. Qu' est-ce qu'il y a à edit ? Ça peut être pas avoir une frontière et faire une ville rose. Je pense que je pourrais avoir besoin de groupe de l'ONU ce symbole parce que j'ai ah, tapez ici. Faisons le type blanc. On y va. Donc je pense que ça commence à être sympa. Et nous voulons peut-être glisser quelque chose dans cet assemblage peut-être une photo juste comme une petite photo de remplissage pour que je puisse télécharger toutes mes photos de Pecs ALS donc avoir un très bon headshots. Je vais aller de l'avant et la traîner dedans. C' est Dragger juste au-dessus de la photo. Il doit être automatiquement rempli. Nous pouvons doubler, cliquer et ajuster le recadrage. Joli zoomé sur la photo. Là. Maintenant, il a tout changé pour que vous puissiez commencer à voir l'en-tête se rassembler. On pourrait changer cette, euh, barre d' arrière-plan pour notre marque de couleur foncée gris. Et là, vous l'avez. Nous avons une sorte de tête supérieure ou fait sur tous les écrans. Donc, juste une sorte de vous montrer comment ce style global peut vraiment être utile lorsque nous commençons à développer tous ces différents éléments. Alors maintenant, on va recommencer au début. Nous commençons juste notre première page. On va commencer à passer à la droite maintenant que le style global a été mis en place. Il y a encore une chose que je vais faire. Et je vais en avoir besoin pour mon écran de connexion. Je vais avoir besoin d'un logo, donc je vais l'apporter comme un symbole est Eh bien, donc si jamais on tweet le logo est sur tous les écrans, ça n'est pas globalement. J' ai donc localisé les fichiers PNG, et la ressource téléchargeable est Mais si vous faites une entreprise différente, vous pourriez essayer de trouver un PNG de votre société de logos. Donc maintenant, je vais traîner dans les deux. J' ai donc deux versions différentes. J' en ai un qui fonctionne bien et les espaces restreints, donc une sorte de présentation horizontale. Et puis j'ai une sorte de version empilée aussi, et j'en ai un sur fond noir sur un fond sombre. Allons-y et amenons les quatre et on va juste ajouter ça comme un symbole. C' est une sorte de processus de mise en place de votre part. Il y a beaucoup de mise en place initiale, mais est allé tout mettre en place. Ça va très vite, et je te promets que ça va s'amuser. Et ils étaient encore en quelque sorte de mettre en place une sorte de trucs ennuyeux qui fait partie du concepteur U I est qu'il pourrait y avoir des pièces fastidieuses qui pourraient être des parties amusantes. Donc, obtenons un de ceux-ci qui fonctionnera vraiment bien sur ce fond gris différent . Et allons-y, faites ce sont la couleur grise de marque. Vous avez un peu d'une nuance plus foncée pour affaiblir l'utilisation. Nous devons trouver ce qui fonctionnerait le mieux. Ou on pourrait même le changer pour notre Kareen. Éclairez-le un peu et amenez celui qui fonctionnera sur des arrière-plans sombres afin qu'il puisse l'amener ou l'amener. Donc, il semble que je l'ai développé avec cette couleur plus foncée orteil fonctionne très bien sur le gris. Donc, quand vous faites Gray Dragon et cela fonctionne très bien, mais je veux l'essayer avec cette couleur plus claire. Je pense que c'est sympa. Je vais juste retourner à la planche à dessin très rapidement et développer une version qui fonctionne très bien sur cette version, qui serait, je crois, une version grise juste comme ça. Et j'exporterai ça en PNG et je te verrai tout de suite. Donc, avez toutes les versions du logo qui fonctionneront sur tous les arrière-plans chargés dans. Donc maintenant, on peut changer et voir ce qui a l'air génial. Je pense que ça pourrait être un peu long. Vous avez un peu trop d'espace. Alors faisons la version empilée du logo juste ici au milieu. C' est là que nous arrivons à faire des travaux de conception. Nous n'avons pas à nous inquiéter tant au sujet du client extrêmement ont toujours été inquiets l'expérience client. Mais c'est là que nous pouvons vraiment nous concentrer sur ce qui a l'air bien, ce qui me semble bien en tant que designer, , pour qu'on puisse faire quelques choses. C' est ce que nous C'est le moment où nous décidons, Voulez-vous un fond solide ? Envoyez ça à l'arrière. Nous voulons un fond solide. Voulons-nous avoir une sorte de deux tonalités ? Nous pourrions le faire descendre jusqu'ici et nous pouvons utiliser des éléments de fond pour aider à faire ressortir certains boutons. Donc, nous voulons une sorte de bouton de connexion est de vraiment se réunir. Vous pourriez avoir cet arrêt à mi-chemin, et nous pouvons ajouter une autre boîte ici pour avoir un contraste sombre. Faisons couper notre couleur foncée. Envoyez ça à l'arrière pour que vous puissiez voir qu'on doit tout éteindre. Mais tu as un peu ce look à deux tons. Il pourrait vraiment mettre en évidence ce bouton où ces deux sont divisés. Donc, il utilise ces éléments de conception pour vraiment attirer votre oeil vers l'endroit où vous voulez que l'utilisateur aille, ce qui dans ce cas serait votre connexion à votre compte. Et donc nous devons avoir ce bouton de contraste élevé. Donc je veux vraiment avoir une sorte de ce genre sombre de couleur rose clair. Je pense que nous avons déjà mis ça dans notre panel d'actifs, mais pour une raison quelconque, il s'est perdu. Mais c'est bon, alors on va dessiner une nouvelle boîte. Je veux vraiment ce bouton. Les pop out. On va trouver un très bon bouton de contraste. Enlève cette frontière. On va juste faire de ça un atout de couleur le changerait toujours plus tard. Voici notre couleur rouge. Alors faisons-la, mais dans une belle pop, sortez à vous une sorte de couleur. Donc ce ne sera pas cette couleur, est-ce pas ? Parce que ça se fond à l'intérieur. Faisons une sorte de couleur opposée. Ça va vraiment t'attirer l'œil. Nous voulons créer un journal dans un autre, c'est ça va être un chemin de journalisation différent afin que vous puissiez vous connecter avec votre boîte. Si vous en avez déjà un. La journalisation créée sera un peu différente, mais pas radicalement différente, donc nous pouvons voir avec quelles couleurs ressembleraient bien. ce bouton particulier. Et puis avec notre connexion avec notre compte Facebook, nous pourrions rendre ça bleu. Donc je vais aller sur Facebook et prendre n'importe quelle couleur officielle de Facebook bleue est négative. Chargez cette couleur hexadécimale. 14. wireframe haute fidélité, fidelity - Écrire d'accès - part2: façon. J' ai pris une capture d'écran de la couleur Facebook ici, et je vais juste prendre l'outil pipette et l'échantillon que je veux vraiment être précis. Quand il s'agit de Facebook, cela apparaît vraiment. Eh bien, je fais le bon bouton ici. Il descend ici, enlève une frontière et nous laisse faire un Phil bleu, et nous sommes prêts à le frapper avec White. Vous avez des éléments supplémentaires dont nous n'avons pas besoin. Rendons cela un peu plus léger d'une nuance à ce petit bouton de séparation apparaît. On n'a plus besoin de ça et on change ça en blanc dans notre couleur blanche. Alors qu'est-ce que tu en penses ? Donc c'est le genre de version que nous avons jusqu'à présent. Probablement. C' est une sorte d'autre visuel pour t'attraper ici. Peut-être moins de slogan. Trouvez votre meilleur repas maintenant, ou une sorte de slogan ou de type pour inciter les gens à se connecter et se réjouir de l'utilisation de cette application. C' est aussi un moment où je duplique les tableaux d'art et je peux le mettre côte à côte était, une fois que nous avons déterminé cet écran de connexion, ça va vraiment commencer à déterminer comment tout le reste est à l'air. Ces premiers écrans sont si critiques dans le processus de conception est une fois que nous avons mis en place toutes sortes de si nous allons utiliser un Bracker noir sur un fond clair quel type de logo nous utilisons  ? On va préparer ça, préparer le terrain pour tout aller de l'avant. Donc on doit passer beaucoup de temps à s'assurer que c'est juste pour pouvoir revenir à ce qu'on avait avant. Faites ce type de journalisation Ces boutons apparaissent vraiment là-bas. C' est sympa. Vous pouvez dupliquer cela autant que vous voulez faire la même chose avec les conceptions de logo, je vais faire un design local. Je vais le mettre juste à côté d'une copie. Changez-le, modifiez-le , voyez si j'ai aimé l'ancienne copie plutôt que la nouvelle, et continuez vers l'avant. On va essayer celle-là, mais j'ai attendu avec un gris clair ou peut-être rester avec du blanc, juste une sorte d'inverser tout ça. Ok, donc c'est une option pour continuer jusqu'à ce qu'on trouve ce qu'on pense être bien . Et nous voulons que tout soit évident pour l'utilisateur qui est allé à l'utilisateur pour pouvoir trouver les boutons aussi facilement que possible. Et parfois, l'utilisation de ces arrière-plans plus sombres aide vraiment. Parce qu'avec le blanc, tout se fond en quelque sorte. Donc, l'utilisation de ce genre de boîtes colorées est utile. On pourrait faire une boîte solide. On peut toujours filtrer la photo de retour. On pourrait le faire un peu plus tard. C' est une sorte de frapper ça. Fais ce blanc. Vous voyez, maintenant que nous avons mis nos Siles mondiales, c'est beaucoup plus facile genre d'orteil, choisissez vos palais et choisissez votre type. Qu' est-ce que vous en pensez jusqu'à maintenant ? J' aimerais pouvoir recevoir des commentaires en direct dans cette classe, mais quel fond vous apparaît le plus ? C' est là que tu peux peut-être le mettre devant quelqu'un d'autre et aller quoi ? Qu' est-ce qui semble mieux ? Qu' est-ce qui fonctionne mieux ? Il y a toujours la possibilité d'avoir un fond blanc entièrement et ensuite de faire notre logo que nous avons ici. Donc il y a une sorte de journal de base dans lequel je ne suis pas une énorme Vanna pourrait toujours expérimenter et faire. Peut-être une boîte en diagonale qui traverse qui a eu l'outil de broche et voir à quoi il ressemble pour briser le moule un peu à expérimenter afin que vous puissiez voir ici la grande variété d'options de mise en page que j'ai et vous pourriez voir où cela peut être l'un des le plus grand défi n'est pas le manque d'idées, mais le manque d'orientation et la question de savoir ce qui va le mieux fonctionner. Donc je vais aller de l'avant et expérimenter avec une autre option, et ça va incorporer une photo pour voir si la photo ne peut pas décomposer genre de grandes zones vides, mais sans la rendre trop occupée. Donc, nous allons juste dessiner la boîte de conteneur pour mettre notre photo et nous allons juste une bordure de clic. Allons de l'avant et apportons une sorte de photo générique pour maintenant la nourriture et allait trouver le bon recadrage. Je vais juste double clic de très bon. Et j'ai supposé et tiré de cette nourriture parce que c'est ce que nous voulons avec ce que les gens ont faim quand ils ouvrent cette application. Allons séduire avec peu de nourriture, sortez de l'ombre. Vous pouvez avoir un peu d'ombre portée, donc il semble un peu superposé. Vous pouvez même maintenir l'option enfoncée et en quelque sorte de faire cela un peu d'une photo arrondie qui pourrait me regarder. Je pense que le logo doit vraiment apparaître un peu plus à moins que nous ne décidions de le ramener en bas. Mais donne-nous une chance de déplacer nos boutons un peu plus près les uns les autres, mais pas trop près de là, non ? Et on pourrait mettre notre petit logo ici tant qu'il est évident que c'est tout. Pour que cela puisse être génial, on changera ça en bleu. On pourrait même faire une boîte à deux tonalités. Vous avez juste le fond et le bleu sont verts. Peu importe ce que tu appellerais, je suppose que c'est plus vert, n'est-ce pas ? Bleu vert et ils pourraient arrondir, peut-être tirer vers le bas option. Et autour de ça, vous avez un peu un bord arrondi ici, mais aussi un bord arrondi ici sur le côté opposé. Au sommet, on commence à s'occuper. Je veux vraiment nettoyer la mise en page simple pour notre écran de connexion. Je pourrais même avoir les logos si je n'arrive pas à regarder tout le chemin par ici. Cela a une sorte de vert et le logo de coopérer qui semble un peu mieux, donc c'est une option de journalisation. J' aime l'idée d'utiliser une photo. La photo pourrait être échangée. Et puisque nous n'avons pas à nous soucier que la photo ait du texte sur le dessus ou tout autre problème avec une photo randomisée parce qu'il n'y a rien de plus qui pourrait être difficile à lire. Nous pourrions être très flexibles avec cela. Et j'aime cette idée pour qu'elle puisse être échangée. Et j'aurais aimé qu'Adobe X ait des capacités de retouche photo où je peux changer ça, euh, faire un ton ou faire une sorte de retouche photo, mais je n'ai pas cette capacité. Ensuite, je vais dans un magasin de photos et je ramène cette photo. Si je voulais avoir une sorte de tonalité duo ou simple en couleur, regardez-la. Je vais en quelque sorte aller au point com de Peck Sal et trouver quelques photos qui pourraient marcher. Je pense qu'avoir une photo et la connexion aide vraiment en quelque sorte à savoir que vous êtes dans une application de commande alimentaire . Je pense que ça a vraiment beaucoup de sens, que tu as un peu faim avant de te connecter. Donc, je pense que c'est une bonne décision de conception de décider d'aller de cette façon parce que cet écran pourrait être n'importe quelle application. Crier. C' est juste un petit logo, et c'est vraiment propre et simple, mais n'a pas beaucoup de personnalité à elle. Et c'est là que vous pouvez commencer à penser à cette expérience utilisateur et ajouter un coup de poing de personnalité. Eh bien, tu n'es jamais occupé, mais tu veux que tu sois amusant, tu veux jouer. Cela dépend de ce que votre public cible cherche. Uh, amusez-vous un peu avec nous et avons des visuels tout au long. 15. wireframe haute fidélité, l'écran de connexion - Partie 3: J' ai téléchargé quelques photos pour vérifier. Le temps va les faire passer, voir si je ne trouve pas la bonne combinaison de recadrage de la photo. Je ne veux pas recadrer le haut du bol. J' aime avoir une petite fourchette là-dedans. Ça a l'air vraiment merveilleux. Ça a l'air propre. Voyons si on ne trouve pas de meilleure photo. Toujours trouver une meilleure photo parce que vous seriez surpris ce qui fonctionne ? J' aime cette photo. Peut-être que si je fais une sorte d'un zoom dans le recadrage sont serrés recadrage comme ils disent. Ça a l'air vraiment sympa. C' est compliqué. Il y a beaucoup de détails là-dedans, et je ne veux pas déjà compliquer cet écran de connexion. Donc peut-être qu'on a besoin de trouver un très simple C'est sympa. Si je zoom et que ça n'a pas l'air fait maison, ça ressemble au Dieu dans un restaurant. J' aime bien celui-là. Oh, c'est de trouver ce bon recadrage. Tu veux mettre la fourchette là-dedans ? Donc ce n'est pas comme ça que cette courbe est. Je ne sais pas si les bols Brown combattent cette courbe, alors revenons à ce qu'on avait avant, qui est ce très joli simple bol. Ce n'est pas compliqué, n'y a pas beaucoup de choses qui se passent avec sa photo très simple. Et je pense que cela fonctionne très bien avec ce journal et les écrans trouvent le recadrage que je pense fonctionnerait, et il y a notre écran de connexion. Donc, ce que nous pouvons faire, c'est que nous pourrions commencer à supprimer ceux que nous pensons que cela ne fonctionne pas. Je ne veux pas avoir tous ces écrans ici et gardons un autour de la diapositive ici juste pour qu'il ne sache jamais ce qu'on pourrait vouloir revenir à cette disposition. Nous y voilà. Nous avons son écran de connexion fait avec le premier vert fait, et nous pourrions faire quelques ajustements avec des boutons. Ce que j'ai fait, c'est que j'ai décidé de garder ça la couleur bleue verte de marque ce journal dans votre compte cause qui va être le bouton le plus largement utilisé, et j'ai décidé de faire créer le long en rouge parce que je veux que les années du Nouvel An soient en mesure de voir ce bouton très facilement. Donc j'ai pensé que ça pourrait être le contraste élevé, couleur différente. Je veux m'assurer que c'est là que nous devions vraiment pointilleux avec les marges et le rembourrage. Assurez-vous que les marges et le rembourrage ou le même entendent qu'ils sont ici et que vous pouvez utiliser l'option Snap to grid, qui est un peu ce que nous utilisons ici est une sorte de guides intelligents. Je suppose que vous pourriez dire que c'est dans tous les programmes Adobe. Celui-ci pourrait avoir plus d'espacement parce qu'il y a, ah tapez rythme là-bas et connectez-vous avec Facebook. On pourrait juste mettre une petite frontière ici. Peut-être une lumière comme une couleur. Un peu mieux sortir. Qui sait ? Fais la frontière une. Vous avez cette option là où vous avez cette attaque. Ça aide vraiment ce bouton à sortir si on se sent comme ça. Le bleu foncé est trop sombre contre le gris pour qu'on puisse le gâcher. Mais j'aime garder la cohérence avec mes boutons. Et voici une autre chose avec des boutons. On peut s'embêter avec les coins pour que ça puisse lui donner une forme de pilule. On pourrait lui faire une très légère forme de pilule parce qu'on nous a pris ça dans le balisage de faible fidélité. Mais maintenant, nous pouvons le faire. Voyons voir pré sélectionner tous ces. Faisons cette bordure un peu plus petite pour faire cette 1.5 et voyons ce que nous pourrions faire avec les formes des pilules. Donc, voici où on peut le changer ici. Voici une sorte de sélection dans le panneau d'apparence. Eh bien dit, Essayez-en un. Continuez à augmenter son essai. 11. Essayons quatre. J' aime la légère autour. Ce genre d'ajoute un très gentil polonais. Regarde ça, n'est-ce pas ? Je n'aime pas que ça arrondisse pour ce cas particulier. C' est juste un peu juste un peu. Donc ce genre d'adoucit tout. Avoir ces beaux bords arrondis. Ok, donc je me sens toujours comme ça. Le bleu aussi. C' est trop de la même nuance, et cela n'apparaît pas autant. J' ajoute toujours une légère ombre portée à ces choses, qu'on puisse juste descendre à son apparence. Faites une petite ombre portée. Voyez comment ça aide vraiment ce bouton à sortir. On dirait que c'est une pression sur un bouton. Faisons la même chose avec tous, pour que cela puisse être cohérent, donc c'est ajouter un peu d'ombre portée. Donc maintenant, on a presque l'impression qu'il est superposé, c'est vraiment sympa. Ok, maintenant je peux modifier la taille du logo. Assurez-vous que c'est au milieu. Si je traîne ça, voyez ces petits guides intelligents qui nous aident par le vrai milieu. Et rappelez-vous, vous avez toujours la possibilité de basculer sur les grilles. Nous allons aller de l'avant et sélectionner mon tableau d'art top, et nous pouvons basculer une grille pour voir si nous ne pouvons pas utiliser cette grille pour nous aider à trouver l' emplacement exact de certains éléments. J' aime utiliser des grilles. Je n'aime pas être coincé. Je me sens comme des grilles qui prennent les décisions pour moi. Donc, j'aime faire une sorte de conception approximative de la façon dont je l'aime. Je fais juste de petits mouvements et je le mets sur la grille. Je sais que beaucoup de gens aiment commencer avec la grille, mais beaucoup de fois j'aime en quelque sorte de conçu par je fais ma mise en page et ensuite faire n'importe quelle sorte de réglage fin comme vous voyez la petite différence ici entre l'endroit où cette grille à quatre colonnes est que nous pouvons facilement accrocher cela au bord, nous avons l' impression d'utiliser la grille pour nous aider avec votre mise en page, mais la grille n'a pas de boîtes dans. Vous savez, cela ne limitait pas notre design libre, puisque si vous êtes le genre de personne qui aime commencer avec des grilles, vous pouvez aller de l'avant et charger vos grilles. Il y a aussi des grilles carrées. Qui vous a un peu plus d'une mariée traditionnelle ou il fait la chronique, euh, on fait des sites Web. Vous pouvez le faire en fonction de la note de 12 colonnes, ce qui est vraiment populaire à faire. On pourrait mettre votre caniveau dans le problème avec et tout ce jazz s. Donc je vais juste utiliser ça pour peut-être mettre tout ça au bord de ce point de grille . Donc je vais juste arrêter tout ça au bord. quelque sorte me donne un peu de fondations et de savoir que les gouttières air de la même largeur ici, et nous voulons aussi votre bouton Facebook, non ? Il en va de même pour éteindre mes grilles. Et j'ai l'impression qu'on se rapproche de ça pour s'assurer que ça va être pareil avec le haut du bas. Assurez-vous que cette alliance centrale voit comment elle est apparue dans ce petit bleu. Mais notre petite ligne bleue monte vers le bas. Maintenant je sais que c'est parfaitement au centre, hors de la paix. Hey, sauvegardons ça. Je me sens plutôt bien à ce sujet. Passons donc à l'écran suivant. Ce qu'on a fait, c'est qu'on a des antécédents plus sombres. On va en quelque sorte dans cette direction. Donc, cela pourrait donner le ton pour l'application que peut-être nous avons des arrière-plans plus sombres d'eux boîtes plus légères sur le dessus, par opposition à avoir un fond blanc avec peut-être, comme des boutons gris sur le dessus, qui est quoi ? Comment on l'a conçu pour avoir ce fond clair. Donc on va voir ce qui se passe quand on arrivera à ce point si un fond sombre va marcher ici. Nous devons revenir à ce genre de méthode. Donc, nous essayons juste d'obtenir notre style ici, essayant d'avoir une idée de la cohérence que nous pouvons utiliser tout au long. Alors on va aller de l'avant, Hop dans ça va être très facile, parce que tu es fondamentalement le même écran. On va juste effacer certaines des couleurs ici. On va faire ça très vite, et je reviendrai tout de suite. 16. Wireframe haute fidélité - Pop-up Screen: droits annoncés temps pour l'inscription à une page de compte est allé de l'avant et a fait de ce fond le symbole, ce grand type de fond Sur notre premier écran. J' ai fait cet assemblage là-dessus. Je suis toujours une copie et collé, comme le reste de l'écran. Donc, ils sont tous comme des symboles. Donc, si jamais je voulais changer la couleur, il serait facile de le changer sur les deux. Donc, si je veux tout revenir à cette couleur, qui semble en fait assez belle, um, nous pourrions le faire pour tous les écrans et ensuite échanger tout beaucoup plus facile, donc assurez-vous juste d'utiliser ces symboles liés comme autant que possible. Alors faisons ce genre de couleur. Et nous pouvons aussi faire cet assemblage. Ce sera un peu un bouton standard qu'on aura. Nous pourrions toujours faire un clic droit et faire assembler, et ensuite mettre ça à part ici. Nous avons déjà nos petits bords arrondis, bords très légèrement arrondis, et nous pourrions simplement changer cela quand nous en avons besoin. Alors inscrivez-vous pour un compte. Probablement besoin d'être un peu plus grand type, taille comme tout très évident et facile pour l'utilisateur même essayer que comme un blanc. Oui, on pourrait apporter notre logo. Gardez-le sur le fond. C' est en bas, ici. Gardons-le au fond et on pourrait le garder dans la même position. Je dois aller de l'avant et faire le logo pendant que nous sommes là. Ça va. Faites-le assembler. Je vais à droite. Cliquez sur. Faites-en un symbole. Je vais faire le logo. Fond noir. Alors maintenant, quand je copierai et collez Aiken, basculez ça. Cela pourrait apporter des changements très facilement. Nous pouvons continuer à avoir une photo en haut ici sur l'option de maintien du Tambor. Adoucit ce coin arrondi ici. Voilà le point. Ça va l'adoucir. Amenez ça. Je dois faire une photo différente. Faites l'autre que nous voulions utiliser sur l'autre. On y va. Faites un bon recadrage serré pour qu'il ne semble pas trop occupé. Tu veux mettre cette fourchette là-dedans et t'assurer que ce n'est pas arrondi et assurer qu'on n'a pas de frontière ? Je voudrais incorporer ce bleu vert sur chaque écran du possible, parce que je veux être capable de le connecter donc c'est un point que nous pouvons décider. Est-ce que nous aimons les gris au travail ne fonctionne pas. Alors, qu'est-ce qui est génial d'avoir ça lié ? Alors, je vais à mes symboles. Je ne suis qu'un titre, ce fond d'écran d'arrière-plan et nous pouvons jouer avec les couleurs ici. Alors je vais aller de l'avant et le rendre tout bleu. Tu te sens comme une œuvre bleue ? Je me sens comme une œuvre noire. Alors, comment peut-on incorporer le bleu ici ? Nous pouvons toujours terminer le processus d'inscription. On pourrait faire ce bouton, espérons-le, et le rapprocher de la fin. Il va passer à notre grille et voir si on ne peut pas monter ces lignes de remorquage. Tout est cohérent. Quand aurait le même bord arrondi ici, sorte que nous pouvons toujours revenir en arrière pour voir ce que nous avons utilisé. Et on a utilisé un quatre. Donc je vais revenir en arrière et appliquer la même option arrondie. Super. Maintenant, nous sommes juste en train de peaufiner la mise en page que vous devriez. Nous avons assez d'espace de respiration entre tous les éléments de conception. Remarquez comment cela aide tant à avoir un peu de place pour respirer. Assurez-vous juste que l'espacement ici est cohérent et cela nous donne une chance d'avoir un peu d'une photo plus grande parfaite comme ça, recadrer comment ? Elle est coupée en deux. Leur genre de crée une culture dynamique. J' étais heureux et sauver. On a deux écrans en bas. Ah, 100 de plus à y aller. , On ne va pas faire les 100,mais on fera au moins 10 écrans de plus. Donc l'autorisation Facebook va prendre ce symbole ici. Mais c'est le dos. Les choses vont commencer très vite maintenant qu'on commence à établir une sorte de normes de marque ici pour vous, je les standards. Donc, ce sera le même bouton exact. Alors pourquoi ne pas prendre ce bouton et aller de l'avant et mettre notre autorisation là-dedans ? Et puis nous avons notre texte de bouton. On n'aime pas ce blanc. Donc ce que ça va être, c'est probablement au lieu d'être un écran séparé, ça va être une boîte pop-up. Donc ça va juste apparaître ici pour autoriser ça ne va pas t'envoyer à un écran. Donc, ce que je voulais faire, c'est avoir un effet floue très quelque part par rapport à ce que vous voyez ici, où vous avez une sorte de pop-up box, mais ça brouille en arrière-plan. Je sais que IOS l'a fait il y a quelques années quand ils ont fait une mise à niveau de gooey, et ça a été une chose très populaire à faire. Donc c'est un peu l'effet que j'essayais d'imiter. Mais il semble que je ne suis pas capable de prendre ça et de le brouiller dans son ensemble parce que ça ne me donne pas cette option ici. Donc je vais faire un peu tricher ici. Je vais juste prendre une capture d'écran de mon écran et l'apporter en photo, et je serai capable d'avoir le même effet pour pouvoir émuler cet effet. Je vais apporter cette photo avec le bureau. Tu l'entends ? ISS Il va partir que nous n'avons plus besoin de ça. On verra si on ne peut pas imiter cet effet en utilisant une photo, ce qui donne le genre de sentiment qui va apparaître et une sorte de sombre là-dedans et juste me donner le bouton rapide pour appuyer sur ESO que je suis en ce moment. C' est sur fond flou. Essayez le flou de l'objet. Voyez si je ne peux pas avoir un effet plus floue. Parfait. Juste là. Alors maintenant ce que nous pouvons faire et nous faisons aller dans le gémissement prototype. Nous commençons à lier cela, sera en mesure d'appuyer sur ce bouton et il apparaîtra et restera toujours sur ce look comme il reste toujours sur cet écran. Et donc on a appuyé sur ce bouton, on peut le lécher là où il ira juste ici. Maintenant, nous avons notre deuxième pop up. Peu importe la façon dont vous vous connectez, vous allez devoir donner un accès local à votre emplacement, et nous pouvons avoir un événement unique. Cela n'a pas à se produire chaque fois qu'ils se connectent, ce qui est bien. Donc ça va styliser cette petite zone de boîte pop-up mobile pour correspondre à notre marque pour qu'on puisse la rendre, euh, plus sombre. Fais-le. Cette couleur peut continuer à utiliser le blanc, et nous pourrions en faire un joli bouton de contraste élevé. Nous pourrions le faire sont de couleur verte de marque. Nous pouvons utiliser le même bord arrondi que nous utilisons ici. Donc nous utilisons un quatre ici sur ces petites boîtes pour qu'on puisse en faire quatre ici pour qu'il soit cohérent avec tous nos bords arrondis sur tout ce que nous faisons. J' ai l'impression qu'on est plutôt contents de ça. On peut rouler avec. Nous pouvons faire cela encore plus haut, plus de contraste, mais que nous avons presque besoin de lire. Parfois, ça veut dire avertissement. Tu sais, quand un associé rouge quand il a une décision de partager, euh, euh, informations importantes, comme la localisation. Vous ne voulez pas utiliser le rouge parce que c'est presque un avertissement comme ceci n'est pas ce que vous êtes censé faire. Donc, d'un point de vue psychologique, parfois coller avec le tueur de marque plus doux pourrait fonctionner et avoir la case à cocher Toujours autoriser . Super. Et nous pourrions même faire une petite ombre portée ici, avoir une ombre un peu plus importante là-bas. Alors maintenant, nous arrivons à faire l'écran d'accueil, l'écran d'accueil de l'utilisateur. Donc ça pourrait être une page très importante qui va les envoyer à l'épicerie un restaurant quand tu le rendras très propre. Um, simple et facile à utiliser. Vous allez passer quelques instants à travailler dessus, et nous allons continuer à travailler sur tout ce projet. Donc, juste pour le temps, je suis allé de l'avant et j'ai passé environ 20 minutes à travailler sur ce que je pense être un bon à exposer. On a déjà fait beaucoup de ça à l'avance. Je ne voulais pas prendre trop de temps sur chaque vert en passant par le processus. Mais je veux parler de la raison pour laquelle j'ai fini à cette étape finale. Donc en ce moment, j'ai pensé à utiliser les deux boîtes et en quelque sorte d'avoir un arrière-plan montrant à travers. Mais après un certain temps, j'ai pensé qu'il avait l'air un peu occupé d'avoir cette bordure d'arrière-plan tout autour ces deux boîtes. Donc, faire un peu droit à la pointe lui a donné un look vraiment moderne, propre et lisse qui, à mon avis, fonctionnait très bien. Et j'ai aussi eu un problème à mettre l'épicerie sur la photo. Donc je devais être très prudent sur la photo que j'ai choisie, parce que si elle était trop occupée, elle n'apparaissait pas. Alors j'ai essayé de le mettre dans des boîtes. J' ai essayé beaucoup de façons différentes pour le faire fonctionner, et aussi une autre chose est que j'avais besoin d'avoir une sorte de texte ici, donc nous devons donner une sorte de direction à l'utilisateur parce que quand nous avons juste eu l'épicerie et restaurant sorte d'évident ce que vous appuyez. Mais il est agréable d'avoir une sorte de verbale appelée l'action ainsi que pour vous guider dans le processus pour vous inviter à entrer. J' ai donc choisi votre choix, ai une sorte de pointage étroit vers le haut et vers le bas pour vraiment le faire. Évidemment, vous sélectionnez l'un des autres et que vous avez deux options. Nous avons déjà notre tête supérieure ou fait que nous l'avons fait plus tôt dans la leçon, sorte que cela était déjà terminé. Donc, cette page est essentiellement faite. Juste trouvé les bonnes photos, essayé de trouver la bonne mise en page. Et peut-être que ces photos peuvent changer de temps en temps, selon peut-être votre restaurant préféré. C' est quelque chose que nous pourrions explorer plus tard. Donc c'est une sorte de cet écran principal de la maison de l'utilisateur. On en a fini avec celle-là. Allons de l'avant et passons à l'autre, ce qui va être un peu plus compliqué parce qu'il faut trouver les couleurs et les tailles de caractères , tout pour ce prochain écran 17. Écran de liste: Faisons leur liste de restaurants. Donc on avait une carte de restaurant qui est censée être là, et ça va charger Google Maps. Donc, il a juste fallu une sorte de capture d'écran générique de Google Maps qui peut juste prendre ce cadre et glisser dans notre photo de cette façon. Alors allez-y et soyez automatiquement rogné et faisons une ombre portée ici. Donc ça surgit vraiment ici. Allons faire avancer ça. Et nous avons aussi une sorte de truc de localisation. C' est en fait un ancien logo, donc nous incorporons quelque chose de nos actifs de marque pour avoir le marqueur de localisation ici. Donc on va juste mettre ça sur la couleur actuelle et en faire une couleur qui va vraiment se démarquer si rouge. Et ça dit la carte du restaurant. Mais nous n'avons pas vraiment besoin de dire carte du restaurant, parce que je pense qu'il est assez évident que c'est l'emplacement du restaurant que l' emplacement actuel. Mais nous voulons aussi montrer tous les autres sur la carte aux vrais problèmes, mettre quelques-uns juste pour montrer un exemple. Donc, il y a notre carte, et maintenant nous pouvons un peu gâcher avec ces bulles, et maintenant que nous connaissons l'angle ou le nombre de courbures ici, ça dit sur cinq, je crois que nous en avons fait quatre sur tous les autres boutons. Donc juste changer les coins ronds à quatre pour correspondre à tout ce que nous avons fait ici quand nous venons de confirmer pour et que Ford veut de la cohérence là-bas. Donc maintenant, nous pouvons déterminer. Avons-nous besoin d'un fond sombre ou d'un fond clair pour notre page d'annonce ? Donc, c'est ce que ce serait si c'était un fond sombre. Je pense qu'il apparaît vraiment bien, mais il peut aussi essayer une sorte de notre couleur plus claire aussi, parce que nous ne l'avons pas vraiment fait. On en a un peu plus sombre pour se connecter. Mais si nous l'avons changé ici quand vous vous êtes connecté, c'est OK. Il est toujours jolis concours compatibles avec les couleurs de la marque. Oui. Et qu'est-ce qui est génial avec l'outil de grille de répétition ? Au lieu d'avoir à changer toutes ces petites choses, je peux aller de l'avant, supprimer tout sauf le haut, rendre cela parfait, et puis je pourrais juste faire la grille de répétition. Faisons ça rouge. Nous ne voulons pas avoir de frontière. Vous faites cette note d'étoiles que nous pourrions faire qui sont le nom du restaurant de couleur bleue. On verra ce que ça ressemble au bleu et cette couleur. Allons le changer pour l'une de nos couleurs grises de marque ainsi que toute la copie corporelle. C' est ce bordel avec l'espacement. C' est là que nous trouvons vraiment Tune notre look de type et combien de marge reste. Vous faites tous les petits réglages qu'on doit faire pour changer la couleur de la bordure, rendre plus foncée, prendre son outil de pipette et obtenir peut-être cette couleur claire ou pas, avoir une bordure du tout, ou ombre portée, ce qui serait compatible avec leurs boutons. Et donc je pense vraiment que rester avec cette couleur de fond plus foncée pourrait mieux fonctionner pour vraiment aider ce bleu vert pop out, vous remarquez comment j'utilise cette très petite bouche. Je le fais juste pour The Star, ce qui est important. Je le fais pour le nom du restaurant, qui est important, et j'ai ce bouton rouge pour indiquer passer à l'étape suivante, alors assurons que nous avons le même marché arrondi de Horner est un quatre Oh, qui a l'air charmant. Nous devons aussi mettre des coins arrondis ici, mais juste sur deux bords, je serais stylisé. C' est un peu ça. N' a pas besoin d'être voir l'option de maintien. Je veux juste changer. Non, nous pouvons styliser ceci et le rendre vraiment arrondi sur un bord, peu près que nous ne pouvions pas avoir une sorte de bord arrondi là-bas. Créons et zéro ce qui fait bien sur les bords ici. Je vais juste passer en revue l'apparence, arrondir les bords, puis arrondir les coins et puis changer la bordure de taille peut être coupé cette moitié. Peut-être faire 1.5 juste là au milieu et ensuite faire la couleur. Il nous faut le montant. Voyez qui a ces petits bords souples. Je pense que ça a l'air beaucoup mieux de cette façon. Faisons en sorte que tout soit aligné. C' est obtenir votre outil de broche, s' assurer qu'il est agréable et bien aligné. Et faisons-le assembler pendant qu'on y est, parce qu'on va dupliquer ça beaucoup. Faites-le de la bonne taille. Ce que j'aime à ce sujet correspond en quelque sorte à tout ce que nous avons fait jusqu'à présent avec ce très petit bord doux, non ? Alors faisons un clic droit. Faites-en un symbole faire mai peut se rétrécir. Donc, lorsque nous dupliquons que tous les objets soient liés afin que nous puissions bien jouer avec les éléments d' ID de contraste ici, nous pourrions faire ce genre de gris clair décoller de la bordure. C' est à l'envers dans nos petits bords souples, et de cette façon nous n'avons plus besoin de cette petite ligne de séparation. Nous avons un peu de zone de contraste ici pour vraiment se démarquer. Ok, on y arrive. Faisons en sorte que les restaurants de boulder filtrent parce que je veux que ça se distingue vraiment comme une option. Rendons le plus grand. Faites-le peut-être 12 points. Nous pourrions toujours aller à nos styles de personnages et cliquer sur l'un de ces types d'en-tête supérieurs. Peut-être que cela nous aidera à obtenir les mêmes tailles d'en-tête. Ils utilisent votre nom. Allons faire tomber ça. Donc, il y a juste assez un peu plus de rembourrage et d'espacement là-bas et faisons du travail débarrassé. N' oublions pas notre grille qui nous aidera aussi, et j'ai besoin d'un peu plus d'espace immobilier horizontal, donc je ne vais pas aller jusqu'à ce bout, donc je l'utilise juste pour m'assurer que c'est un peu aligné, mais j'ai besoin de plus d'espace horizontal. J' ai beaucoup de choses à tenir ici. Mais tu vois, j'ai encore des marges très généreuses, beaucoup de marge de respiration. Alors faisons ces bulles la même que cette bulle ici. Donc on n'a pas d'accident vasculaire cérébral sur ceux pour enlever la frontière. Nous avons la parole autour de ce parfait, et nous voulons changer notre petit aérodrome aussi. Match. Donc maintenant, nous avons besoin d'un symbole noir euro non damé parce que nous voulons faire un nouveau symbole. Ça va être d'une couleur différente. J' ai donc pris quelques instants pour échanger les flèches pour avoir nos bords plus doux. Et nous voulons aussi modifier nos icônes ici. Donc, en ce moment, c'est une icône très rugueuse. Nous voulons continuer à utiliser que vous je sorte de doux, bords arrondis. Alors recréons ce petit symbole. Nous pourrions le faire très rapidement et simplement obtenir l'outil de cercle. Je vais juste faire une bordure, et on va prendre la même couleur que nous faisions avant, trouver la bonne épaisseur et ensuite juste dessiner une petite extension de la barre de recherche et se déplacer dans les coins ici. Est-ce que votre panneau d'apparence obtenir son outil pipette dans l'échantillon sont grands et ont une épaisseur similaire  ? Et nous y sommes. Nous venons de le recréer dans notre style. Regroupez-le ensemble, supprimez l'ancien et amenez-le, Plus petit, zoom arrière. Vous savez, nous avons des icônes personnalisées. Nous avons recherché UTA évaluations dans la cuisine. Donc si on a l'impression d'être à un point d'arrêt, on a l'impression que c'est parfait. Nous pouvons utiliser l'outil de la grille de répétition. Répliquez-le, mais nous devons vraiment nous sentir confiants. Et c'est une décision. Quand nous jouons avec ce bouton, je pense que cela pourrait sembler un peu mieux que le rouge parce que je pense que le rouge répété six fois pourrait être trop attention. Vous devez vraiment utiliser le rouge et encore plus subtil que notre marque bleue. Eh bien, nous allons répliquer ce était de rassembler un groupe et faire répétition grille et aller de l'avant, faire de nous beaucoup qui vont s'asseoir ici. Donc 1234 Maintenant, nous devons trouver le bon espacement juste là. Parfait. Donc, nous pouvons également étendre cela un peu, quelque chose à cliquer sur le tableau d'art principal. Vous pouvez supprimer tout cela. Je n'ai plus besoin de ça. Étendre notre planche vers le bas pour que nous puissions montrer comment il défile. Donc, nous le faisons. Le mode prototype que l'utilisateur pourra faire défiler vers le bas devrait être un peu plus réaliste. Super. Il y a donc nos options ici. Donc ce qu'on va faire, c'est que l'utilisateur va cliquer sur un de ces restaurants et on va l'appeler Restaurant Select. On va choisir cette deuxième option, et ils vont passer à l'écran suivant. Donc, ce seront les écrans de menu. On va faire quelque chose de très, très similaire à quoi ? Nous avons deux secondes pour rester cohérent avec notre thème. 18. Écran de menu: Voici la page d'accueil de notre restaurant, nous avons donc l'idée de pouvoir parcourir toutes les dernières photos qui sont téléchargées pour les éléments du menu. Alors allons de l'avant et glisser-déposer quelques-unes de ces photos. Je me sens assez heureux avec la mise en page déjà. Comment il ISS. Alors amenons un de ces aliments et amenons quelques autres en les mettant au rebut afin que vous puissiez dire qu'il y a une photo à parcourir. Je pense que ces points sont géniaux. Cela indique que je peux passer le pouce et allons de l'avant et mettre ce stott comme des blancs et jeté la deuxième photo à droite. Il y a une photo là-bas sur la gauche, qui fait défiler. Merveilleux. Alors allons de l'avant et adaptons un peu le même style. Allons de l'avant et apportons ça. Qu' est-ce que copier et coller ici parce que c'est un symbole quand cela est lié ? Si jamais nous voulons changer l'arrière-plan partout, nous n'avons pas cette option. Faites-le vite. Alors maintenant qu'on est en train de se mettre en place, amenons-en ça. Je crois que c'est réglé sur un style de personnage, l'en-tête donc tout va avoir la même taille. Allons parler de ça. Alors faisons la même chose qu'on a fait en haut. Allons-y et je regroupe la grille et nous allons tout supprimer, sauf le haut . Et puis on va pouvoir jouer avec cette profondeur, le même style. Donc je vais te donner le vert et on va faire les bords très doux, enlever la frontière des loyers et répéter. Fondamentalement, obtenons notre icône que nous avons utilisé notre symbole. Cliquez sur mon symbole Dragon là-dedans. Je veux le retourner pour indiquer qu'il s'effondre style accordéon, et ce sera la flèche pointant vers le bas. Assurez-vous que c'est plus sombre et que nous avons fini. Donc, nous devons voir à quelle vitesse pourrait devenir plus rapide et plus rapide. Comme nous établissons tout, Mlle fait que de nombreux côtés. Super. On en a déjà fini avec celle-là. Donc maintenant, nous devons faire cette partie où il s'effondre un peu, donc ce sera essentiellement cet écran. Mais ce que cela a ajouté menu déroulant accordéon. Alors quand avant, est-ce que l'effondrement du menu pliable juste en quelque sorte de gagner du temps ? Donc fait la même chose où j'ai effacé tous ces et fait l'un, puis fait l'outil de grille de répétition pour tous les faire. Alors maintenant, l'écran suivant était censé indiquer quand il a ajouté le sac. Il y a une sorte d'animation qui se passe dans le haut quand on va pouvoir travailler cette animation en faisant l'écran. Et ce qui est génial, c'est qu'on peut aller de l'avant. Croyez-le parce que maintenant nous avons tout cela conçu parce que la seule différence avec l' écran, il va y avoir une petite animation qui se passe. On va utiliser une auto innée pour pouvoir animer cette icône en haut. On va rendre ça un peu plus grand sur la poétesse de l'écran, déclipsée, et on ne l'a plus fait assembler. On va rendre ça un peu plus grand. Et voici une petite animation qui se passe. Je vais devoir en prendre deux autres ici. Ils ont donc ajouté deux articles à leur panier. Dans cet exemple, vous deviez en faire un deux. Nous allons vous montrer comment faire l'animation automatique pour faire cela animé. Une fois que nous commençons à relier tout pour gagner un peu de temps. J' ai passé un peu de temps en quelque sorte à développer les deux prochains ensembles d'écrans. Et je veux juste expliquer pourquoi j'ai fait ce que j'ai fait. Donc la dernière fois que nous sommes partis, nous avons fait ce petit écran où nous allons pouvoir l'animer plus tard et ils pourraient ajouter au panier, et ensuite ils seront en mesure de revoir leur commande. Ils vont à leur panier. Et ce que j'ai fait, c'est que tu remarqueras que j'en connais un ou que j'ai le fond sombre, et je l'ai fait intentionnellement. Donc, quand ils vont au processus de retrait, ils voient en fait un arrière-plan plus léger différent. Et certainement ils prendront note que c'est une direction différente. Ils se préparent à vérifier. C' est un peu différent, et je trouve que lorsque vous faites une longue liste et que vous faites des chiffres, c'est beaucoup plus facile à lire sur un fond blanc qui est sur l'arrière-plan plus sombre. J' ai donc décidé de garder le processus de vérification avec un fond blanc pour le garder propre et simple pour le processus de départ, et juste une sorte de cassé ces sorte d'utiliser une combinaison des boutons verts et pour ceux vraiment, éléments vraiment importants que je veux vraiment mettre en évidence, encore plus que les boutons verts est, euh, ce genre de couleur rouge, qui serait l'ordre maintenant et la carte de charge. Donc il y a une sorte de ce que j'ai fait là-bas. Il y a des écrans très similaires qui vont passer à cet écran de carte. J' ai juste une sorte de carte qui va montrer votre E T A et un simple changement dans l'ordre des annonces , et vous avez le partage où vous pouvez le changer hors de votre commande. Et c'est très similaire à la boîte pop-up que nous avons faite plus tôt. Donc c'est une sorte de copie et collé qu'ici il est dans le même style. J' ai des icônes pour ma petite feuille de triche. Vous l'aimez et coupez un flou de l'arrière-plan en utilisant le flou d'arrière-plan similaire à ce que j'ai fait auparavant. Donc, ce n'est pas un écran séparé mais va apparaître sur celui-ci et sera capable de montrer que lorsque nous faisons l'animation en mode prototype et comme tout ensemble, donc c'est un dernier printemps à faire, et c'est réussi livraison. J' ai pensé que je pourrais peut-être incorporer quelques photos ici et en quelque sorte marcher à travers le processus du pouvoir en pensant à cela. Donc, nous avons, ah, livraison réussie et ont ce bouton de restaurant agréable examen qu'ils compriment et examinent le restaurant. serait plus d'écrans que nous pourrions dio à un autre jour, mais nous allons nous concentrer sur cet écran, donc je reçois une petite icône de chéquier et je vais télécharger un de ces et je l'ai là. Mais j'aime incorporer quelques photos, donc j'aimerais avoir un appel à l'action afin que vous puissiez revoir le restaurant. Mais, hey, revenons à l'écran d'accueil et passons quelques courses. Nous allons vous garder dans l'APP. Permet de vous garder intéressé à l'utiliser à plus parce que plus vous utilisez cette application, plus l'argent de l'entreprise gagne de l'argent. Apportons une photo d'épicerie, voyons si j'en ai une ici, copiez-la et collez-la. Donc intéressé à commander des courses ? Non. Nous pourrions simplement recadrer cette photo en tant que telle dit que vers l'arrière dans le système de superposition juste faire le support de commande les supports si intéressés par l'ordre et l'épicerie. Donc nous aurions pu avoir une petite icône de case à cocher ici et nous avons besoin de l'avoir sur une sorte de fond de contraste plus élevé. On peut donc voir cette petite action, à moins que cela ne soit un peu plus petit. Donc intéressé par l'ordre et l'épicerie niveau flèche vers le bas. Je pense que nous avons un downy ou juste ici que nous pouvons localiser, gagner un peu de temps. Nous avons déjà fait cette icône, et parfois vous pouvez avoir des icônes sur le côté, donc tout comme vous l'aimez, vous pouvez collectionner des icônes et avoir tous regroupés afin que vous puissiez être en mesure de les localiser et le faire glisser dans sans avoir à revenir aux écrans précédents. Là. Juste un petit conseil là-bas. Je n'ai pas eu le temps de configurer cela avec cette classe, mais si vous aviez un peu de temps supplémentaire aide vraiment quand vous faites 50 écrans différents . Alors quoi ? La flèche pour indiquer là Donc, il pourrait avoir ah avis restaurant genre de groupe ces ensemble livraison réussie et le restaurant d'examen. Je vais localiser une petite nana, bloquer Icahn et mettre ça ici. Mais je pense qu'on en a assez fini ici. Je pense qu'il y a tellement d'autres écrans nous pouvons le développer pour le temps, pour un genre d'enseignement de ce processus. Je pense qu'on est à un bon point d'arrêt. On va avoir un processus de plus à faire. Donc, nous avons une application merveilleusement conçue qui a été passé beaucoup de temps à faire des recherches de fond . Nous avons fait tout le processus U X, développé une persona sans flux utilisateur, et nous avons intégré que faire notre faible fidélité maintenant sont élevés pour le design Libya Final 2% . Une chose de plus quand nous le présentons, vous voulez être en mesure d'avoir un cadre de fil de travail afin que je puisse cliquer et avoir les liens aller à endroits afin que nous puissions faire des tests utilisateur et aussi montrer au client et avoir dans notre portefeuille à montrer son puits, si ce n'est pas pour un client, on va le faire. Maintenant, on va passer en mode prototype. Je vais aller de l'avant et dans cette vidéo va être une nouvelle leçon. Je suis excité parce que c'est une partie vraiment amusante où les choses commencent vraiment à prendre vie pour que nous puissions aller dans la note prototype et le lier à Next. Je verrai dans la leçon suivante 19. Prototyping, relier tout de la totalité: Nous allons donc le relier en minutes de prototype dans le gémit du prototype Adobe X'd. On va tout relier. Vous devez être en mode prototype. Pour pouvoir le faire, je supprime tous les écrans inutiles. Nous avons juste les principaux éléments dont nous avons besoin et partons. Je vais aller de l'avant et sauver. Il s'agit d'un nouveau document juste pour avoir une sauvegarde supplémentaire en main. Faisons-le. Ok, Donc quand le mode prototype, vous avez déjà un peu passé en revue comment le lien fonctionne et comment faire l'animation automatique. Ça va être un processus très rapide. Je ne vais pas entrer dans la façon dont tu fais des animations. On va relier ça, puisque tu as déjà eu des leçons sur la façon de faire ça auparavant. Donc c'est un bon clic sur notre truc ici. Donc maintenant, nous devons nous souvenir de notre flux utilisateur. Donc quand ils vont se connecter à votre compte, vous allez directement à la boîte pop-up parce que vous allez aller directement vous connecter. Tu vas tout droit à travers. Tu n'as même pas besoin de monter ici, descends ici. Donc ça va être un lien vers cette page et on va faire un robinet. Donc, ce n'est qu'un simple clic de bouton. On ne va pas faire d'animation auto. Nous faisons juste une transition simple et faisons une dissolution. Ok, donc maintenant on va lier notre création d'une connexion, qui va être juste ici, va à cette page. Il va enregistrer nos paramètres précédents, donc nous n'avons pas à rester là et le faire encore et encore, et Facebook va avoir un écran pop-up. Donc maintenant, nous devons comprendre, comment faire pour faire ce pop up dessus, puisque nous avons déjà fait le travail de fond là-dessus , , tout ce que nous avons à faire est connecté ici. On a déjà fait le travail pour que ça ressemble à un pop up. Et ça pourrait être qu'on peut faire quelque chose d'un peu différent ici. On pourrait faire une animation automatique d'automne ou une superposition. Essayons de superposer. Il le superposera sur l'image précédente. Voyons comment ça marche. D' accord, donc on a tout ça lié. Donc maintenant supposons qu'ils cliquent sur autoriser et nous voulons aussi être vraiment envie d'obtenir détails. Nous pourrions avoir un écran séparé C'est exactement comme ça qui a la case à cocher. Donc, lorsque vous vérifiez, il passe à l'état de l'écran vérifié. Mais on va juste cliquer sur Autoriser On ne va pas toujours permettre. Nous allons aller directement aux options ici et nous ne ferons pas superposer la transition en retard . Et nous pouvons toujours faire Slide gauche il diapositive. Droit. Uh, faisons juste un simple dissous pour l'instant. Nous pourrions toujours faire l'animation de fantaisie un peu plus tard une fois que nous lions tout. Donc maintenant on ne l'est pas. On n'a pas fait d'épicerie. On n'a pas encore travaillé là-dessus, mais on a fait le restaurant. Donc s'ils cliquent n'importe où sur cette grande image, ils vont atterrir en retard sur la page du restaurant. Donc supposons qu'ils choisissent le restaurant numéro deux ou n'importe où ici est pour l'exemple. Ils vont pouvoir aller directement à la page de destination. Alors maintenant, quand ils cliquent sur l'un des côtés, supposons que cliquez sur le 2ème 1 Il va être un menu déroulant. Bon clic sur ça. Donc ça va être une dissoudre et on pourrait essayer une animation et voir à quoi ça ressemble. Donc, nous allons l'explorer un peu plus tard. Était pourrait en quelque sorte faire un lien de base. Donc, une fois qu'ils cliquent ici, ils ajoutent au sac pour cliquer sur n'importe lequel de ces boutons de la partie arrière, ils vont aller de l'avant, arriver à ça. Ça va être une sorte d'écran d'animation. Donc cette petite chose va apparaître et revenir. Cliquez ici et nous allons faire une animation automatique. Et nous allons jouer autour de l'animation automatique pour voir comment ça a l'air bien. Et donc on y va. C' est juste une sorte d'écran de transition. Revenons à la transition vers ici. Juste une transition simple. Tu sais, on va continuer à descendre. Le processus est assez facile. Ce qu'ils vont faire ici, c'est qu'ils vont passer commande maintenant et cliquer ici, et ensuite ils vont débiter la carte. Ça pourrait être d'autres écrans que nous pourrions développer laters à la carte de crédit à portefeuille, puis aller de l'avant et cliquer sur la carte et puis changer d'annonce ou ils vont changer dans cet ordre va avoir une boîte pop-up et nous allons faire que la transition. Super. Et donc c'est aussi une autre option pour revoir le restaurant qui va apparaître automatiquement après le processus. Donc ce qu'on va faire, c'est qu'on va relier ça ici pour que tout soit lié. C' était très rapide, très rapide. On va aller plus en détail sur ça dans un instant. Donc, ne vous inquiétez pas si vous vous sentez un peu perdu, Voici toutes nos connexions est mis en évidence. Tout ce que j'ai pu voir toutes les connexions Flux très simple que nous n'avons pas développé qui sont là où ils vont à l'épicerie encore plusieurs arcs différents que nous n'avons pas développés. Mais pour juste un test simple, cela fonctionnera très bien. Allons de l'avant et sauvegardons et faisons un test et voyons si nous devons modifier l'une de nos transitions au fur et à mesure que nous avançons. Donc je vais cliquer en arrière et vous commencez mon aperçu ici. Si tu accroches ce petit bouton d'aperçu, ça va ouvrir notre aperçu. Voici donc l'aperçu de notre site Web. On pourrait vraiment le tester. On peut ouvrir ça sur son téléphone aussi pour le tester. Mais je viens juste ici dans mon navigateur si longtemps avec mon compte. Donc je sais que c'est cliquable. Je pourrais créer un journal dans Arkan, connecter avec Facebook. Allons, fouettons avec mes ou, hum, quoi de plus avec mes bougies ? Ils ont déjà mon compte connecté. Ok, alors voici mon accès local autorisé. Donc, je suis allé à, hum, permettre. Alors je suis là, retour à l'écran. Donc je veux aller chercher des restaurants. Cela et ce que nous développons. Balancez un choix sur le restaurant. Alors maintenant voici mon restaurant afin que je puisse cliquer sur n'importe lequel d'entre eux juste pour tester l'utilisateur afin qu'ils puissent le tester. Cliquez ici et OK, donc voici quelques éléments secondaires. Voyons ce qu'ils ont. Nous pouvons toujours revenir en arrière et changer tous ces noms, donc je crois que le 2ème 1 est celui qui est cliquable Cliquez ouvrir. C' est génial. Donc maintenant, voici un peu où nous devons travailler en quelque sorte sur les transitions. J' ai cliqué dessus, mais je ne peux pas m'effondrer. Ce serait bien de pouvoir ajouter cela, donc nous devons ajouter un autre écran lorsque nous cliquons dessus et il retourne à cette page. Hum, pour qu'on puisse cuisiner ça maintenant. Chaque fois que je vois un problème, allons-y et résolvons-le tout de suite. Allons ici. Donc ils sont ici, et j'adorerais ce lien d'orteil vers cette page. Donc juste en regardant que dos dans un cycle, c'est bon pour une belle transition. Donc maintenant, si on passe à l'aperçu, on pourrait commencer l'état n'importe où. Démarrez l'aperçu n'importe où. Il suffit de mettre en surbrillance où vous voulez commencer et de cliquer sur jouer. N' importe qui s'y rendrait. Alors, cliquez sur cette deuxième option, n' est-ce pas ? Donc si je clique à nouveau dessus, ça va revenir à l'écran précédent. On dirait qu'il s'effondre dans ce Nice. Et j'ai juste besoin de réparer cette photo. Cette photo a dû être supprimée. En quelque sorte. C' est une bonne option. Et maintenant je veux ajouter le sac. Laisse-moi ajouter un sac. On y va. Il y a ajouter le sac et, euh OK, donc je pense juste ici, allons de l'avant et commande. Maintenant, je suis plutôt content de ça. Nous pourrions toujours développer tout ça plus tard. Ajouter une astuce. Ça va être une autre petite transition, notre animation ou changer le total. Vous pouvez le faire avec les animations et les différents écrans. Alors commandez maintenant. Donc, on va débiter la carte et il partirait. Donc ça va me donner 12 minutes et A. Ce serait une carte vivante chaque fois qu'elle sera développée. Alors qu'une charge, quel que soit l' E.T . A. est développé par l'algorithme et nous pouvons changer un ordre d'addition. Écoute, un changement hors de l'ordre ici avec ceux va apparaître boîte ici. C' est arrivé. Pour que je puisse changer. Et à ma commande, je peux appeler ou SMS. Disons que j'ai appelé et que c'est une livraison réussie. Je peux passer en revue le restaurant et aller à un autre écran de travail, le revoir, ou m'intéresser à l'ordre et à l'épicerie et allons-y et relier ce retour. Maintenant que nous sommes là, nous voulons relier tout cela jusqu'à la page d'accueil de l'épicerie, qui va être en haut, que nous n'avons pas encore développé. Et puis revoir Restaurant pourrait aller sur le nouvel écran où ils peuvent examiner le restaurant . Vous pourriez voir que je peux continuer avec ça un peu. Ça ne va pas modifier quelques choses. J' ai remarqué quelques photos. Cette photo manquait sur une sorte de réparation. Donc, lorsque vous faites l'option de menu déroulant, vous ne voyez pas cette image disparaître. Il suffit de faire quelques réglages et de le réparer. Et je vais vous montrer comment faire l'animation ici qui fera de ce petit sac une sorte de pop up and down et lui donner un peu de jiggle pour montrer une sorte d'animation que quelque chose a été ajouté au sac. 20. Prototyping - Créer des animations: J' ai donc passé environ 20 à 30 minutes à réfléchir à la façon dont tout ça va s'animer dans l'aperçu et à ajouter un peu d'excitation et d'animation pour que ce ne soit pas seulement statique de passer d'une page à l'autre. Il y a une sorte de mouvement pour montrer au client, mais aussi pour montrer au développeur comment aimerait que les choses s'effondrer se déplacent, se déplacer d'écran à écran. Je vais juste marcher à travers certaines choses Ah, va te montrer à l'écran. Là où je vais te montrer, c'est comment ça rend cette petite animation. Mais il y a une sorte d'action où vous avez ajouté à la carpe qui change la couleur en rouge. Il devient un peu plus grand à l'écran, puis il revient à l'état normal. Donc, si vous vouliez avoir ah critiques de leçons sur la façon d'utiliser les outils d'animation et de transition et et et Adobe X'd Jeremy Deegan a quelques leçons impressionnantes à ce sujet dans la section Adobe X'd à la fin de la classe de vérifier définitivement cela. Monte dans cette section. Si vous voulez vraiment trouver une sorte de retour aux bases en termes d'apprentissage à faire certaines de ces animations et transitions, mais en quelque sorte montrer comment je l'ai fait avec ce projet pratique. Voici l'animation qui a pris trois écrans différents. Une sorte de faire l'animation. Je pourrais ajouter encore plus si je veux avoir une animation plus lisse avec ce petit, hum, ajouter au panier. Mais voici une sorte d'image de base. Nous avons donc notre page de destination cliquez sur Ajouter le sac. Ils vont cliquer sur l'écran. Donc, la différence ici est le mode prototype de tendance Arman. ce moment, je vais cliquer sur le tableau d'art, et je vais aller de l'avant et vous dire que c'est juste une transition typique. Ah, transition très simple. n'y a pas de temps dedans, donc il entre directement dans la transition. n'y a pas de décoloration qui se passe, donc fondamentalement, vous cliquez sur pour ajouter au sac. Il va à la même copie, mais vous avez remarqué la différence. Ici. Vous avez une sorte d'état gris, et puis vous avez une sorte de votre ajout des deux éléments différents au panier, et donc quand vous montez, j'ai trois écrans différents pour que l'animation se produise. Donc la prochaine, j'ai fait la transition, je n'ai pas animé automatiquement. Et alors quoi ? Cela fera l'animation automatique de cet état jusqu'à cet état, et vous remarquerez que je l'ai fait un peu plus grand pour indiquer une sorte de zoom avant de l'icône, un peu de mouvement pour que leurs yeux attirés vers le haut de la afin qu'ils sachent. Ok, j'ai ajouté au panier. Il conseille également à l'utilisateur de cliquer sur le panier pour continuer le processus s'il ne voyait pas le bouton d'examen de la commande ci-dessous. Donc, tout est prévu. Il y a une raison derrière toutes les animations. Ils n'ont pas l'air jolis. Il y a une sorte de façons dont nous sommes. Nous attirons l'utilisateur vers ses objectifs le plus rapidement possible , ce qui le rend facile et intuitif. Voici donc la transition dans laquelle il entre, et c'est ce qui est différent car le déclencheur est un temps. Donc, ce qui se passe est qu'il entre dans cette transition et effectue automatiquement une transition temporelle afin qu'il passe à l'écran suivant en haut sans avoir à cliquer ou interagir. Ça va arriver avec le temps, donc la durée est d'une seconde. Donc après une seconde, tu es à l'écran, ça va apparaître dans cet écran et faire l'animation, et tu auras une autre fois. Transition automatique, animer vers le haut est le dernier est l'état final. Donc, vous avez déjà eu la petite animation arriver, et maintenant vous avez les deux ajoutés dans le panier, et puis tout se comporter comme normal à ce stade. C' est l'écran que vous vous connecteriez ensuite. S' ils cliquent depuis un panier en haut, ils vont cliquer ici. Donc je sais que c'est un peu compliqué, mais retournez en arrière et étudiez les bases des leçons de Jeremy Demons où il traverse vraiment, en quelque sorte revient aux bases avec certaines de ces transitions. Ils ont une idée de la façon d'émuler certains d'entre eux dans vos conceptions. Donc je ne vais pas entrer dans les détails, mais c'est une sorte de spectacle. Tu as un peu ce que j'ai fait là pour que ça arrive et pourquoi j'ai fait ce genre de pourquoi derrière. Pourquoi je ferais ça animé pour que je puisse faire savoir à l'utilisateur que c'est maintenant un panier cliquable. Une sorte emblématique de attire vraiment votre œil là-haut. C' est ainsi que ça s'est passé en revue quelques autres que j'ai fait ici. Vous pouvez voir comment vous devez créer un type de plusieurs écrans et états pour obtenir quelques transitions à aller. Certaines transitions se produisent, ce qui est un écran. Je ne vais pas passer en revue ça. C' est ce qui se passe. Je vais aller cliquer sur les aperçus et j'ai pu voir certaines des animations que j'ai construites ici. Donc nous allons faire avec vous connecter à votre compte. On va juste y aller, et donc on va le permettre. Donc ça va y avoir une animation qui va venir et vous montrer comment faire pour que cette animation se produise. Donc, vous cliquez sur Autoriser qu'il va aller à l'écran d'accueil. Ça va faire un peu de zoom arrière sur les photos. Ajoute donc une belle animation. Mais vous remarquez aussi comment les flèches dépensent deux. Il y a une sorte d'action qui se passe, et c'est lisse. Alors comment j'ai fait ça, c'est que je suis allé ici et que j'ai dû faire à différents écrans. Donc nous avons cet état, qui va être un peu votre, euh, avant l'état. Donc ça va venir ici, laisse-moi aller et cliquer sur la transition pour que je puisse te montrer. C' est donc juste votre transition standard. Ah, et il a une durée de 0,4 2e. Donc, cela va à l'écran. Est-ce qu'il a encore une transition ? Ce que je veux faire, c'est que je veux faire de cette transformation. Et je voulais être cette animation agréable et lisse. Donc, pour ce faire, vous devez faire auto un coéquipier. Donc je vais cliquer sur le dessus, et je vais te montrer le genre de ce que j'ai utilisé ici. Donc, c'est l'animation automatique. J' ai fait une seconde, ce qui est un peu plus long. Donc, vous pouvez vraiment voir l'animation apparaître en place. Vous pouvez vraiment voir la quantité de photos. Ce n'est pas si rapide que vous le manquez, et je change aussi les positions des boutons. Donc j' ai ces ai flèches. Je suis désolé. Les flèches, les flèches gauche et droite pointent vers la gauche et la droite. Et ici, ils sont venus de haut en bas, pour que vous puissiez voir quand vous le faites. L' animation automatique qu'il va prendre d'une transition à une autre est un peu comme utiliser des images clés. Si quelqu'un a déjà travaillé en flash ou est un autre genre de programme comme ça, vous pouvez avoir votre image clé va passer de cet orteil le suivant. C' est une sorte d'auto. Comment l'animation automatique fonctionne Une fois de plus regardé Jeremy Diggins leçons. Je ne peux pas souligner assez à quel point c'est génial de vraiment revenir aux bases quand il vient air vraiment apprendre ce que vous pourriez faire avec les transitions et le mode d'animation automatique et prototype . Donc, j'ai fait quelques très petites animations, pas rien qui prend tout l'écran juste de petites choses. Ce genre de fait aide à l'application se sentir un peu plus vivant et a un peu d'action, mais pas tant d'action qu'il est distrayant. Prenons donc, par exemple, la carte qui voit ce très petit changement par rapport à la carte, et ce que nous avons ici, c'est que nous avons un député ici. C' est notre dernier état de la scène. Cela se connecte tout le chemin vers le bas au panier donc c'est un peu l'état précédent. Donc vous avez la carte traînée ici en bas, et je viens de faire une animation automatique automatique simple. Donc, vous savez, puisque sur le temps pour qu'ils n'aient pas à cliquer sur quoi que ce soit, ils apparaissent juste sur l'écran et ils attendent 0,6 seconde, puis le vert suivant se déplace automatiquement et c'est une animation automatique. Donc ça va être uneanimation agréable et lisse, animation agréable et lisse, et la carte remonte à l'endroit où elle devrait être. Donc, c'est juste une très petite chose que vous pouvez ajouter à vraiment ajouter. Inspirez un peu de vie dans votre application sur le même fantôme de cet état de sorte que vous remarquerez. C' est un peu tout ici en bas. Vous avez un peu de blanc ici si vous montez au sommet. Je l'ai tiré vers le haut pour que vous puissiez en quelque sorte voir que tout petit snap up animation donne impression qu'il est plus interactif sur les pièces. J' ai fait la même chose. J' ai essayé de faire un peu sur chaque page juste pour être cohérent. Et voici la carte. Il s'enclenche en quelque sorte. Un peu d'avoir cet état avant sont l'état avant juste ici et puis il s'enclenche en place, et ça les affine. L' application a dit qu'il apparait juste à l'emplacement final. Une sorte de voir la carte se déplacer vers cette destination finale Pour que vous puissiez voir juste quelques petites choses qui vont de l'avant et vous montrer le projet final que nous avons jusqu'à présent, nous sommes prêts à présenter ceci aux utilisateurs pour faire des tests utilisateurs. Et il y aura une nouvelle section dans le cours. Donc si elle n'est pas là, elle devrait être là très bientôt. Et si c'est là, allez-y et continuez sur Teoh, les tests de l'utilisateur Nous allons juste faire un peu de choses brièvement genre de ce que je fais avec les tests utilisateur et genre de quelques-unes des meilleures façons de tester votre application. Et puis une fois que vous utilisez vos tests, vous revenez en arrière et vous révisez et vous faites quelques révisions. outre, les clients impliqués dans ce processus de révision jusqu'à ce que nous puissions préparer cette dernière chose , alors vous êtes prêt à l'envoyer au développement dans le code, et c'est là que vous pouvez être une ressource pour le développeur. Onda les a laissés travailler leur magie pour en faire une réalité.