Apprenez le design UI/UX en créant votre première application mobile !

1. Intro Angel Davchev: enfer, les gars. Bienvenue. Je m'appelle Sonya. J' enseigne ce cours. Nous pouvons apprendre à concevoir une application mobile zones. La femme me fait. Je suis un designer UX moi-même. Eh bien, plus de cinq ans d'expérience dans l'anglais a lancé de nombreux amplis du marché à la fois pleuré et sauvage plat. L' un d'eux tient. Let's a été présenté dans le magazine Forbes a reçu le prix Katie au pouvoir en 2000 et 16. Expériences utilisateur sans cesse grandissantes entreprises Profession du monde entier recherchent concepteurs de bonne utilisation pour les aider à résoudre leurs problèmes comme ils utilisent concepteur. Votre travail est de rendre l'utilisateur confortable en utilisant votre chemin. Je suis heureux de vous avoir à bord et j'espère que vous apprendrez beaucoup de ce cours. Restez à l'écoute pour un voyage passionnant en 2. Introduction au cours: Bienvenue à bord. Mesdames et messieurs, Merci d' avoir pris cette classe où vous pouvez apprendre à concevoir une application mobile pour réserver des billets en utilisant divers U. Y dans de nouvelles techniques X. Ce verre suppose que vous avez des connaissances antérieures sur un logiciel de conception tel que l'illustrateur de boutique photo pour Adobe Experience Design. Si vous n'avez pas de connaissances préalables, ne vous inquiétez pas. Vous pouvez toujours suivre. Ce verre est destiné aux personnes qui veulent apprendre que vous êtes dans la conception de vos œufs et la conception mobile . Que vous soyez un débutant, intermédiaire ou même un pro, je pourrais avoir un truc ou deux dans mon sommeil qui peut augmenter vos connaissances. Apprendre n'est jamais suffisant. Vous apprendrez quels problèmes, er persona. Et pourquoi est-il important dans la conception de l'expérience utilisateur, Vous apprendrez ce qui est flux utilisateur et quel est le but de celui-ci. Et enfin, vous apprenez à concevoir l'application réelle. Le logiciel que nous allons utiliser. 12 Cette série est appelée Sigma et l'autorité de conduite gratuitement au signal point com. Figue plus est parmi les pires mous les plus populaires pour vous. Pourquoi et vous conception des œufs et vous pouvez l'utiliser dans le navigateur. Cependant, je vous recommande de ne pas connaître l'application de bureau. Maintenant. Si vous ne voulez pas utiliser la stigmatisation parce que vous utilisez un autre logiciel, comme plein de Shop ou de sketch, peut-être que c'est bien, parce que vous pouvez toujours suivre cette classe. Chaque vidéo aura son propre panneau d'actifs. Ici vous trouverez différentes images et icônes nécessaires pour compléter les vidéos. Puisque notre classe ne comporte pas de sujets comme je peux concevoir ou que la photographie utilisera ces actifs, ils sont libres d'utiliser. Et vous pouvez voir les liens poupée Recon, d'autres actifs si vous le souhaitez. Enfin, vous aurez besoin d'une attitude positive pour terminer ce cours. Et rappelez-vous que l'apprentissage n'est jamais suffisant. Merci d'avoir rejoint mon verre et commençons. 3. Profil utilisateur: dans cette vidéo, nous allons jeter un oeil sur ce qui est personnel d'un utilisateur. Et pourquoi est-il si important dans la conception de l'expérience utilisateur ? J' ai déjà préparé l'usurpateur Sana pour cette vidéo, donc nous allons juste en discuter maintenant. Qu' est-ce qu'un Père Noël usurpateur ? Pensez-y comme une représentation de fiction de votre client idéal. Dans le monde du marketing, il y a un terme appelé Target, et c'est un groupe de personnes qui partagent les mêmes caractéristiques. Comportement, tranche d'âge lourde et revenu qui peuvent être ciblés comme clients potentiels pour votre entreprise est le monde de l'expérience utilisateur. L' utilisateur persona est quelque chose de similaire à cela. Lorsque vous construisez un frère, vous devez toujours rechercher et définir qui va être un utilisateur. Des choses comme les habitudes, les besoins , l' âge, etc. Déploiement d'un nouvel utilisateur pour Sana En créant un modèle, vous avez une compréhension claire de ce que votre produit devrait ressembler et ressentir Si vous voulez que les utilisateurs utilisent votre produit, vous devez le construire pour qu'ils l'aiment. N' oubliez pas que vous créez toujours pour les utilisateurs car c'est l'utilisateur qui dirige votre entreprise. Si votre utilisateur peut naviguer dans votre application. Hero, période diligente en tant que concepteur d'expérience utilisateur, vous devez suivre le comportement des utilisateurs et construire le produit de cette façon. En règle générale, pensez aux utilisateurs comme des petits enfants qui sont facilement perdus s'ils ne voient pas une flèche pointant leur direction. Examinons maintenant notre persona utilisateur. Si vous Google usurpateur fils de modèles, vous devriez trouver quelque chose de similaire à cela. Le but du modèle est de personnifier le groupe de personnes que nous sommes venus pour être les utilisateurs de notre application qui rendra un travail beaucoup plus facile une fois que nous avons une compréhension claire de ce que nous devrions construire et pour qui nous le construisons. Disons que notre équipe de recherche d'utilisateurs nous a fourni suffisamment de données pour nous permettre de construire ce modèle. Comme vous pouvez le voir, notre utilisateur s'appelle Tobias Swenson. C' est un étudiant de 24 ans de Göteborg, en Suède. C' est un sortant, aime faire la fête le week-end et se rend dans de nouveaux endroits quand il le peut. Comme vous pouvez le voir sur une image, qui est en bas avec elle de, um, splash dot com, le biais est rarement vu sans son téléphone. Il est vraiment actif sur les réseaux sociaux, mais c'est aussi exploré et sortant. L' étude de ce modèle nous dit que même s'il est averti de la technologie, acheter un billet pour techno 14 Burling ne devrait pas être un tracas pour les bayous. Son jeune énergique et aime voir la valeur réelle rapidement. Comme n'importe quel autre millénaire. Il aime ses réseaux sociaux, qu'il écoute des histoires sur Instagram, tweets ou des parchemins. Chronologie sur Facebook. Sachant que nous nous rendons compte que l'écran de connexion devrait avoir des canaux de médias sociaux inclus et voir Tobias comme une personne active devient frustré par Internet lent, nous devrions probablement exclure la connexion avec e-mail, car cela nécessite plusieurs étapes qui entrent en conflit avec le comportement de notre utilisateur. Taper des courriels, mots rapides et confirmer des mots de passe par e-mail peut être frustrant pour le biais, car il pourrait emprunter Internet à un café pour acheter des billets pour une fête. Tout au long de cela, vidéos se réfèrent au modèle de persona de l'utilisateur. Quand nous allons prendre des décisions dans notre conception, c'est tout pour cette vidéo. Suspensez-le et examinez l'usurpateur certains de modèle aussi longtemps que vous le souhaitez. Merci de regarder, et je vous verrai dans la prochaine vidéo 4. Flux d'utilisateur: Bienvenue, les gars. Dans cette vidéo, nous allons apprendre ce qu'il y a dans le flux utilisateur et pourquoi est-ce important et la conception de l'expérience utilisateur ? J' ai déjà conçu le flux utilisateur pour un projet. Regardons attentivement et examinons chaque partie. Années de flux est le chemin emprunté par l'utilisateur pour compléter il y a un site Web pour une application. Dans notre cas, puisque nous concevons une application de réservation de billets, le flux utilisateur guide l'utilisateur à acheter des billets pour son concert préféré. conception et le flux utilisateur sont une partie cruciale dans toute application, car il définit un guide visuel clair sur la façon dont l'application doit ressembler et comment l' utilisateur va naviguer avec chaque rectangle représente un écran séparé qui existera dans notre demande. Les flèches indiquent la relation entre l'écran. Tout d'abord, nous avons notre point d'entrée utilisateur, qui est la Splash Queen. agit de l'écran qui apparaît dès que l'utilisateur veut vous l'application. Après les charges d'implication en arrière-plan, l'écran de démarrage s'estompe et a été présenté avec l'écran de connexion. L' écran de connexion est important pour notre application, puisque l'objectif de l'application est que l'utilisateur achète des billets. Nous allons avoir besoin de lui ou de sa loi sur les orteils dans notre demande pour obtenir un baiser ou ses informations personnelles. Une fois que l'utilisateur se connecte, il est présenté avec l'écran du parti Lee. Ici, l'utilisateur peut trouver une liste des parties qui sont disponibles pour la journée. Comme nous pouvons le voir, l'utilisateur peut passer à l'écran du calendrier où il ou elle peut sélectionner un jour dans le calendrier et voir la partie disponible pour ce jour particulier. De là, l'utilisateur peut également accéder à Tickets Queen. Si l'utilisateur n'a pas acheté de billets, il est affiché sur un écran vide. Maintenant, la conception d'un écran vide est une conception importante de l'expérience utilisateur de trading. En tant que concepteur, vous devez toujours inclure un graphique approprié, un texte à l'état vide indiqué et un appel à l'action qui ne donnera jamais l'utilisateur et ne le laissera pas dans une impasse. Dans notre cas, s'il n'y a pas de tickets disponibles dans la reine des tickets, nous devrions ajouter un appel à l'action qui dit quelque chose comme Acheter des tickets maintenant et nous allons reprendre l' utilisateur dans le cycle. Ok, Donc revenons à l'écran de la liste des parties quand l'utilisateur tape sur au moins élément dans un écran de parti Lee . Il est redirigé vers le Single Partis Queen, qui contient des détails sur ce parti particulier, comme le lieu du parti, le prix du billet. Lorsque le spectacle commencera, ainsi qu'un petit échantillon vidéo pour ce deejay particulier à partir de l'écran unique, l'utilisateur peut naviguer vers l'écran vidéo, où il peut regarder l'échantillon vidéo disponible et se familiariser avec les de la musique. La chose la plus importante que l'utilisateur peut faire dans l'écran du parti unique est de réserver des billets pour cette partie en particulier. Il est ensuite amené à l'écran de réservation des billets, qu'il ou elle peut choisir le nombre de billets à acheter dans les informations de carte de crédit. Après cela, on lui montre un message de réussite. Si l'achat a été couronné de succès ou si un message d'erreur n'a pas été terminé, afficher un message de réussite ou d'erreur est crucial pour l'utilisateur, tel qu'il est. Donner des commentaires sur l'achat ou non des commentaires à l'utilisateur est l' une des choses les plus importantes dans la conception de l'expérience utilisateur car en tant que concepteur, vous ne devriez jamais laisser l'utilisateur dans un état où il ou elle ne sait pas ce qui est qui se passe. Une fois les billets achetés avec succès, l'utilisateur est ensuite amené à la reine des tickets, où il est montré les billets achetés. Ceci conclut le chemin emprunté par l'utilisateur. Il termine le cycle complet en utilisant notre application. Et ceci conclut notre vidéo. se voit dans la prochaine. 5. Écran d'éclaboussure: dans cette vidéo, nous allons apprendre à râper un écran de démarrage pour un projet. L' écran de démarrage est une partie intégrante de plus lorsque l'application, parce que c'est la première chose que l'utilisateur voit. Une fois qu'il regarde l'application, il sert dans les deux sens. Il couvre l'ensemble de l'écran pendant que l'application se charge en arrière-plan. Sauf si l'utilisateur obtient la formule avec la marque implications, l' un de l'écran principal est chargé, l'écran de démarrage s'estompe. Maintenant, nous allons créer un écran de démarrage pour notre projet. Sélectionnez Direct Channel 2 ou appuyez sur sont dans votre clavier. Dessinez un rectangle qui couvre l'ensemble de l'écran. Modifiez le nom du calque BG pour l'arrière-plan et déplacez vers le bas des calques. Stack génie Color à un B 1540 Maintenant, créons le bas pour l'application. Sélectionnez les lèvres à inclure. Cliquez sur cette modification pour restreindre sa proportion et sa taille changeante. 260 pixels au centre assez. Retirez son champ et que Ah, 40 pixels tracent à elle. Dupliquez ce cercle et ainsi, comme le précédent. À un effet, avec une goutte peu profonde avec 44 pixels, flou et supprimer les valeurs de ex et pourquoi changer sa couleur à TD pour être Pacey. Maintenant, passez au panneau des ressources et sélectionnez cette image. C' est une image libre de tout ça terne. De Splash dot com. Déplacez-le à notre reine éclaboussée et descendu au bâton du repaire. Sélectionnez le premier à sauter et l'image droite Cliquez sur Sélectionner utilisé comme masque. Sélectionnez le groupe de mess et la première ellipse. Regroupez-les ensemble. Modifiez le nom en Lovell Image. Maintenant, nous allons utiliser l'outil de type et taper Burling. Certainement. billets changent la couleur blanche de sa taille à 30 pixels et centre demain. Brisez le mot pour que Berlin et Technol soient en une seule ligne. Les billets sont dingues. Sélectionnez à la fois Berlin et techno travaux et a changé le poids avant pour boulon. Sélectionnez le travail des billets et a changé son poids à la lumière. Super. Maintenant, on peut centrer ça. Sélectionnez à la fois l'image du logo et les tickets techno de Berlin. Bien eux ensemble. Appelez ceci plus bas et centrez-le vers le haut sur notre écran. Super. Maintenant, nous avons notre reine splash 6. Écran logn: Bienvenue, les gars. Dans cette vidéo, nous allons apprendre à concevoir un écran de connexion pour un projet. Maintenant, ah, l'écran de connexion n'est pas une partie cruciale pour une application. Mais dans notre cas, c'est le cas. Puisqu' ils sont heureux, c'est d'acheter des billets. On va avoir besoin d'informations sur les utilisateurs qui étudient la personnalité graisseuse. Nous voyons que notre utilisateur aime beaucoup utiliser les médias sociaux. Donc, au lieu de concevoir, appartenir, écran pourquoi nom d'utilisateur du mot de passe. Quand nous saisissons le mot de passe, nous allons utiliser la journalisation sociale. La journalisation sociale est un moyen plus facile pour les utilisateurs de se connecter à une application. Puisque l'information est déjà fournie à un canal de médias sociaux. Concevrons un écran de connexion dès maintenant. abord, allons choisir un plus long et avec un grand haut Maintenant, nous allons créer les bouteilles pour une journalisation des médias sociaux, sélectionner l'outil rectangle cliquer sur ceux et taper 345 pixels pour le avec et 60 pixels. Pour la hauteur, modifiez le rayon d'angle des pixels et centrez celui-ci vers le haut. Changeons la couleur de l'orteil. Trois B 59 Mon nom, qui est une couleur hexadécimale pour Facebook. À moins que cela en effet à elle une navette de dépôt avec 10 pixels flous, cinq pixels pleins de valeur I et 20% de capacité. Super maintenant. Donc, laissez l'outil de type et de frappe venir continuer avec Facebook et placer ceci ou la base de pour les changements de poids bas, gras et taille 24 pixels. Maintenant, puisque Bellis Loy est une forme condensée, modifions l'espacement des lettres à 4%. Changeons le centre blanc de l'orteil vous-même de Yeah, et passons à nos panneaux d'actifs. Sélectionnons ce Facebook. Je viens, je le fournit et faites glisser une porte à nos caméras, sélectionnez l'icône Facebook et la base de sa bouteille et les centrer, regroupés pour le fond Facebook. Super. Maintenant, dupliquons cette bouteille en la sélectionnant, en maintenant le boulon sur votre clavier et en le faisant glisser vers le bas. Changements pour continuer Gmail. Envoyez-les avec l'autre travail. Maintenant, marchons sur Facebook. Je viens avec le Jimmy comme un couteau fourni dans le panneau des actifs. Donc, comme le Jimmy comme sur et traîné sur le compte, sélectionnez la base en bas et centrez-les vers le haut. Maintenant, enfin, nous devons changer la couleur à cette base, et le changement change. Pour voir plusieurs 1610 Grande. Maintenant, nous avons notre écran de blogs 7. Écran de liste des parties: Bonjour, les gars. Bienvenue dans cette vidéo, nous allons concevoir la fête Lee Screen pour application. Les listes des fêtes. Queen est essentiellement l'écran principal de notre application, car c'est un point d'accès à de nombreux écrans différents, tels que l'écran du calendrier, l'écran du ticket dans l'écran du parti unique. Le but principal de l'écran de la liste des partis est de fournir à l'utilisateur une liste des parties disponibles , même ils ne parlent pas et passons aux affaires. Tout d'abord, sélectionnez votre outil rectangle et dessinez un rectangle sur l'ensemble de l'écran. Changez son nom pour être Jeep pour l'arrière-plan et déplacez-le vers le bas dans le dernier ordre. Changeons sa couleur à 071 9 à 3. Maintenant, utilisons-nous sur l'image pour améliorer notre arrière-plan. Visuellement, je ne veux pas cette image de tous les splash dot com, ce qui peut faire est bien gratuitement. Alors laissez cette image glisser. Il fonctionnera sur nos caméras trois tailles et le positionnera selon le goût réel. Déplaçons maintenant l'image vers le bas dans notre pile de calques. Super. Ok, ajoutons une autre sensation à cette image, qui va être un ingrédient linéaire avec la même couleur que l'arrière-plan sur les deux arrêts de couleur sélectionnez le premier Grady en point, et nous avons déplacé sa capacité à zéro juste cela jusqu'à ce qu'il se marie bien avec le fond. Maintenant, nous allons avoir ah, Heather à notre écran. Plus tard, nous allons convertir ceci en un composant. Feel more nous permet de créer des composants, et nous les utilisons sur plusieurs écrans, ce qui facilitera beaucoup notre travail. De plus, lorsque nous effectuons un changement, il reflétera sur toutes les copies de composants. Sélectionnez à nouveau l'outil Rectangle et dessinez un rectangle plein avec les modifications. Hauteur : 140 pixels. Renommez ce BG pour l'arrière-plan et déplacez un calque vers le bas dans la pile de calques. Cliquez sur ce globe oculaire à côté de celui-ci pour masquer les calques. Background Group utilise le contrôle Genome votre clavier, et nous avons nommé ce groupe orteil Heller. Maintenant, sélectionnez l'heure à dans les parties de frappe à Berlin. Change le téléphone. Babel neige la taille du téléphone 30 pixels, le poids avant trop gras. L' espacement des lettres à 4% depuis le bruit de Bevan une forme condensée et finalement changé la couleur orteil blanc. Ce sera notre titre. Déplacez le titre dans la poussette et déplacez-le vers le haut. Sélectionnez à nouveau le globe oculaire en regard de la couche de sol pour voir l'arrière-plan. Maintenant, déplacez le titre 20 pixels du bas de l'arrière-plan dit Eyeball à nouveau sur le joueur d' arrière-plan. Maintenant, copions avec le titre en maintenant vieux et en le déplaçant vers le haut. Modifiez la taille du téléphone 18 pixels, déplacez-le vers la gauche et déplacez 14 pixels du haut du titre. Ok, on va changer ça pour un rendez-vous. Par exemple, 17 novembre 2000 et 18. Positionnons-le en conséquence. Maintenant, passons au panneau d'actifs et saisissons les icônes que je fournit sélectives et déplacez-les vers nos caméras. Déplacons-les dans le dossier du tueur et positionnons-les au bord de l'écran vers la droite. Aligné avec le haut de la journée et changeons leur couleur orteil blanc. Les cycles représenteront respectivement l'écran des tickets et l'écran du calendrier . Ok, donc sélectionnable et déplacé, hum, 15 pixels du bord de l'écran. Super. Ok, sélectionnons notre en-tête Fuller. Maintenant ce qui est génial de se conformer à la télévision sélectionné et cliquez, cette icône serait juste créer un signal de composant sur créatif informé, bien que notre dossier Passons à la gauche et Let's Kobe mais tenant vieux et boire droit sur notre campus. Cela crée maintenant une copie de l'ensemble de notre composant, que nous pouvons utiliser sur tous nos écrans. Voyons comment les composants fonctionnent. Nous avons fait une erreur d'orthographe des groupes de travail dans notre titre. Changeons ça. Mountain Tore Messer de Born et vous permet d'appeler les changements réfléchissent sur notre copie vers la droite. Voyez, c'est à quel point ils fonctionnent facilement avec des composants dans les signaux. Maintenant, la seule chose qui nous reste est de créer la liste des partis elle-même. Sélectionnez ou un seul, aussi. Cliquez une fois en tapant 325 pixels pour la semaine et 120 pixels pour la hauteur. Juste ceci au centre de votre écran et changer la couleur de l'orteil. Un bœuf 1540 Changer les coronaires quatre pixels et nous allons sur efficacement une navette de tambour . 10 pixels flouent cinq pixels pour le blanc vous et 24 7 40 changement d'opacité BG pour l' arrière-plan. Passez à arrêter son panneau et sélectionnez cette image, qui ont Donald à nouveau à partir d'un point de splash com. Il suffit d'aller à Splash Dot com et de taper techno dans la barre de recherche. Vous pouvez trouver beaucoup d'images à jouer avec une image sélective et faites-la glisser vers nos caméras . Réglons avec 95 pixels, 97 pixels pour la hauteur. Déplacez cela en conséquence dans notre panneau et ajusté 10 pixels à partir de la gauche du bord. Changons le rayon d'angle à deux pixels. Sélectionnez à la fois l'image et l'arrière-plan et regroupez-les en utilisant le contrôle G. Renommons ce groupe en liste. Je l'ai dit. Sélectionnez le type à nouveau et tapez. Tu connais Kravitz. Changons l'alignement à gauche jusqu'au milieu. Changez la couleur orteil blanc et changez la taille de police 24 pixels. Positionnez ceci et la ligne de 10 pixels à partir de la droite de l'image Café Destexhe en maintenant vieux et en le faisant glisser vers le bas. Modifiez la taille de la police à 18 pixels et l'attente du téléphone pour réserver a changé le champ. Donc passivité à 70%. Et passons à Burke Hind, Pamela Rama et Bar Sélectionnez à la fois le texte de naissance et Kravitz et regroupez-les ensemble. Appelez cela douloureux et déplacez-le dans notre article de liste. Sélectionnez ce groupe et dupliqué en maintenant l'ancien et en le faisant glisser vers le bas. Zoom avant et tamponnons les ponts. Déplacez ceci vers le haut et déplacez-le vers le bas. Maintenant, changez. Cela commence et changer cela à 13h00. Changé sa taille de téléphone orteil, 18 pixel et cette taille de téléphone 14 pixels, puis juste eux en conséquence. Rebaptisons son groupe Démarrer dupliqué en maintenant vieux et en le faisant glisser vers la droite. Déplaçons les 20 pixels les uns des autres. Changez celui-ci aussi le prix, qui indiquera le prix des billets et changera cela à quelque chose comme 18 ans. Renommez ceci en conséquence. Maintenant, la seule chose qui nous reste est de concevoir un appel à l'action. Ah, la direction froide est quelque chose qui incite à l'action pour l'utilisateur. Par exemple, achetez des billets. Saisissez le texte à en tapant des tickets cadeaux. Changeons la forme d'un bus. La taille amusante 14 pixels. Déplaçons ça à gauche. Mettez-le à l'intérieur du titre West et changez sa couleur en e. D. Deux d. Deux d. J. C. Changer la première façon de voter et nous allons zoomer pour ajuster cela à la balle. Maintenant, j'ai ajouté sur l'icône Flèche aux actifs, alors attrapons-le et passons à nos chameaux. Ok, laisse la position d'ici. Déplaçons le dans notre groupe d'articles de liste. Maintenant, nous allons le déplacer. 10 pixels ou cinq pixels de la get tickets. Sélectionnons-les tous les deux et regroupez-les. On appellera cette ville huit. Qui se dresse Appel à l'action, Plus de porte au bord de notre arrière-plan pour l'élément de liste et de la magie. 10 pixels vers la gauche. Super. Nous savons que nous avons conçu notre article de liste. Enfin, nous allons convertir cet élément de liste en composant. Donc on peut l'utiliser à nouveau ? Sélectionnez-le et cliquez sur, Créer une conformité, Créer une conformité, déplacez-le vers la gauche et copayé en maintenant Holt et en le faisant glisser vers l'appareil photo. Envoyez-nous à Il a été dupliqué quatre fois, tenant vieux traîné vers le bas et avec quelque chose comme 10 pixels faire le GAM et enfin, quatre chose. Donc, ce sont tous ces titres. a poussé vers le bas de votre écran et les déplacer. 15 gros social. La bouteille. Ok, donc nous avons maintenant la liste des articles pour nos fêtes. Je vais poster la vidéo sur Remplissez les données maintenant. Bienvenue de retour. Comme vous pouvez le voir, j'ai calculé les données pour une variété avec divers noms de deejay, lieux , prix des billets etc. J' ai aussi changé les images des différentes parties. Maintenant, le signal ne nous permet pas d'ajouter des images ou d'autres éléments dans nos instances de composants. La façon dont nous résolvons ceci est de placer toutes les images dans un composant maître. Allez à l'élément de la liste et cliquez sur les Aibos sur les images que vous ne voulez pas afficher et c'est tout. Les gars n'auraient pas fini l'écran Bartoli. Jusqu' à présent, nous avons appris beaucoup de choses, comme la façon dont un élément de liste doit être organisé avec des images, des informations et des appels à l'action. Enfin, nous apprenons quels sont les composants dans la Fig ? MMA ? Comment travailler avec eux et pourquoi sont-ils importants dans la conception ? Merci d'avoir regardé. Je te verrai dans la prochaine vidéo. 8. Écran unique pour les parties: Bienvenue, les garçons et les filles. Dans cette vidéo, nous allons concevoir l'écran de fête unique comme mentionné précédemment dans cette reine. Nous allons mettre les détails sur le parti sélectif, comme le nom du deejay, le lieu de la fête, la date, l'heure à laquelle le deejay commence ainsi que le prix du billet. On va aussi mettre l'exemple de vidéo du deejay pour que l'utilisateur puisse avoir un meilleur sentiment ou quel genre de réflexion ? Ce lieu deejay de l'expérience utilisateur. Perspective. C' est une caractéristique importante pour notre application. Enfin, dans ce vert, on va mettre un appel à l'action en bas pour que l'utilisateur puisse acheter des billets pour cette fête. Ok, commençons. Les premières choses d'abord. Nous allons utiliser l'image plein écran afin de pouvoir améliorer visuellement l'arrière-plan et lui donner un blanc foncé, ce qui est complémentaire de la suppression de notre application. Comme d'habitude, je ne vis pas cette image de sunsplash dot com. Je vais le fournir dans le panneau SS, passer sur le panneau d'actifs orteils. Donc, comme l'image et le déplacer vers notre toile, traîné vers le bas dans la pile de repères, positionnez-le en conséquence. Vous aimez Ajoutons un autre champ à cette image, qui sera Polina Grady. Hum et nous allons utiliser la même couleur pour les deux arrêts de couleur. La couleur va être un peu de 71 9 à 3. Et changeons l'opacité des arrêts de voiture. Le premier arrêt de couleur va être de 66% de capacité, et le 2ème 1 va être quelque chose comme 93 Grady Inbar lisse. Jusqu' à ce que tu veux, on va utiliser le composant capillaire de notre leçon précédente. Copiez le composant capillaire en sélectionnant le défaut de maintien et en le faisant glisser sur notre campus. Maintenant, puisque l'écran de parti unique est une formule ultérieure Party Lee écran, nous devons fournir à notre utilisateur loin de ne jamais revenir à la reine précédente. La façon de le faire est d'avoir une bouteille arrière. Maintenant, comme nous ne pouvons pas modifier nos composants et autres choses, nous allons devoir modifier notre composant maître. Tu sais, notre panel d'actifs ? J' ai fourni un dos. Je viens sélectif et Dragon vieux maîtres de la conformité changement de couleur blanc et la position en conséquence. En plus de la date, comme vous pouvez le voir dans nos composants, par exemple, nous pouvons voir l'icône de retour. Maintenant. La seule chose qui nous reste, c'est de courtiser la date. Cliquez sur le globe oculaire à côté de la date pour le masquer. Super, nous avons maintenant le bouton de retour pour notre écran. Ensuite, ajoutons le titre. Aller au panneau d'actifs graphique de décoration sélectionné, que j'ai fourni et se déplacer vers les caméras. Maintenant, ouvrez votre type 2 et tapez. Vous savez, Kravitz change la taille du téléphone 50 pixels. Le poids avant est vote, et la couleur est blanche. Aligné ces deux graphismes de décoration et déplacer quelque chose comme cinq pixels du bas de celui-ci. Sélectionnez-les à la fois les rainurés et changez ceci en un titre. Donc, comme le groupe de titre déplacé vers le Heller et déplaçant 50 pixels du bas des cheveux, quittons notre détail. Grinçant. Sélectionnez le délai de saisie à nouveau des dates. Changer la taille amusante 18 pixels, une ligne vers la gauche, changer la couleur blanche et changer l'opacité. 40% aligné ceux-ci avec le porte-titre Bolt et faites glisser vers le bas et a changé son magasin. Date spécifiée, qui est 17 novembre 2000 et 18. Changer la capacité de ce champ 100% et changer la taille du téléphone à 24 pixels, les aligner et déplacer quelque chose comme cinq pixels du bas de la date. Alors laissez-les tous les deux et regroupez-les ensemble. Faites une copie de ce groupe en maintenant l'ancien et faites-le glisser vers la droite. Déplacez ce groupe quelque chose comme 25 pixels vers la droite. Modifiez ceci en un emplacement. Changez ceci pour Burke Hind Panorama Bar. Changez la semaine de ce mot pour que le travail du bar passe en dessous. Sélectionnez les deux groupes, copiez-les en maintenant l'ancien et en faisant glisser vers le bas. Déplacé sur quelque chose comme 10 pixels à travers le bas. Modifions cette information en conséquence pour refléter celle de notre écran précédent. Alors commencez, qui va être un passé moi, mon et le prix du billet, qui va être âgé de 18 ans. Cela donc il va correspondre ici. Bougeons la balle. Deux groupes pour environ cinq pixels de plus. Ok, super. Allons débile ensemble et appelons ce groupe en entier et déplaçons quelque chose comme 30 pixels du bas de notre titre. Maintenant, prenons la vidéo. Un café simple. Un groupe de la grippe en tenant vieux et en le faisant glisser vers le bas, se déplaçant à l'extérieur du groupe et l'appeler vidéo avec quelque chose comme 40 pixels du bas de la Mpaluku. Changons l'opacité du travail supérieur à 100%. Supprimons le travail inférieur. Maintenant, passez à notre panneau d'actifs. Alors laissez cette image que j'ai fournie et déplacez-la vers nos caméras, faites-la glisser à l'intérieur de notre groupe vidéo et ajustée comme cinq pixels au bas du prix du billet . Changez le prix du billet en simple officiel Jim. Juste le avec hors de l'image à 210 pixels, la hauteur à 120 pixels. Le rayon de coin quatre vaisseaux AP une autre sensation à elle. Ce sera une couleur unie noire de 50 % de capacité. La dernière chose est à une autre image affective, qui va être une ombre portée. Le flou sera de 10 pixels. Le pourquoi bien, vous serez cinq pixels et la capacité sera de 60%. Cela rendra l'image se démarquer de l'arrière-plan. Le dernier orteil ici est le fond de jeu. Déplacer pour la famille des actifs, Sélectionnez le fond de jeu, que j'ai fourni et faites-le glisser ou vers nos caméras. Mettez-le dans le groupe vidéo. Let's Century en sélectionnant le fond de jeu et l'image et envoyé à lui en utilisant nos icônes d'alignement . Super. Nous avons maintenant un échantillon vidéo. En cliquant sur ce bouton, l'utilisateur prendra à un nouvel écran froid. L' écran vidéo. Maintenant, la seule chose manquante orteil notre conception est l'appel à l'action fond Copia beurre de notre écran de connexion et déplacé vers notre campus, en alignant vers le bas de l'écran et déplacé quelque chose comme 15 pixels d'environ. Maintenant, renommons ceci en ville A pour un appel à l'action. Supprimons cette icône. Changez ceci en billets cadeaux. Changeons la couleur de celui-ci pour que vous êtes donc en une seule ligne. 23 Changeons aussi la couleur de ces milieux à cette voiture été, qui est et tu de ils voient maintenant. La dernière chose à faire ici est de créer un composant de notre appel à l'action afin utiliser sur d'autres écrans, cliquez sur le composant quittant Tyco et nous allons le faire glisser sur l'extérieur, copié en tenant vieux et boire en tournée est venu avec positionnons-le en conséquence. 15 pixels du bas de celui-ci. C' est ça, les gars, ça conclut nos leçons. Je te verrai dans la prochaine. 9. Écran de réservation de billets: Bonjour encore, les garçons et les filles. Dans cette vidéo, nous allons continuer à nous appuyer sur notre conception précédente, l'écran de fête unique. Nous allons concevoir une partie de réservation de billets qui sera présentée dans un modèle qui glisse à partir du bas de l'écran juste après que l'utilisateur clique sur l'appel à l'action. Mais prends des billets. Le but de ceci est bénéfique pour l'utilisateur car il ne perdra pas le focus en se faisant naviguer. Deux écrans différents dans ce plus demandera à l'utilisateur d'entrer son nom et les détails de la carte de crédit dans Rio pour faire un achat pour les billets lorsque vous travaillez des données sensibles telles que les détails de carte de crédit. Il est primordial que vous ne croyez pas que l'utilisateur dans le Voy ne sait pas ce qui se passe avec le sien pour son argent. C' est pourquoi DF doit fournir à l'utilisateur des commentaires sur ce qui se passe. Ok, laissons parler et passons aux affaires. Les premières choses d'abord. Assurez-vous que vous avez une copie de l'écran précédent car nous allons supprimer certaines choses après avoir copié la reine précédente a livré le titre. Les informations saluent dans l'échantillon vidéo, mais laissez l'appel à la bouteille d'action. Puisque nous allons utiliser plus tard, il suffit de cliquer sur le globe oculaire la semaine prochaine pour le cacher. Ensuite, sélectionnez l'image d'arrière-plan et appliquez efficacement. L' effet est Leibler 20 pixels pour le M O. La raison pour laquelle nous estompons l'arrière-plan. Ils travaillent le focus de l'utilisateur sur l'intestin coulissant. L' arrière-plan sera toujours là, mais moins important. Maintenant, sélectionnez votre rectangle et dessinez un rectangle d'une semaine entière, mais changez sa hauteur à 600 pixels. Cliquez sur ce cycle en regard du coin. La sueur de Brady Le rayon de coin indépendant à l'angle direct dans les 2 premiers champs d'entrée avait 15 pixels et laissait le reste de zéro. Le premier pied de temps se sent référé au coin supérieur gauche et supérieur droit respectif. Juste ce calque, il est donc le bas de l'écran. Maintenant, nous allons changer la couleur orteil un B une femme pour zéro et nous allons monter une autre sensation à elle, qui va être de couleur unie noir de 40% de capacité. Enfin, nous allons changer la couleur motile dis calque l'exclusion et faire glisser un rectangle dans la pile de calques . Maintenant, ouvrez votre type 2 et tapez réservez un billet. La taille amusante de celui-ci est de 18 pixels. Le bol des salaires avant et la couleur est blanche. Mais changez l'opacité. 40% dupliquer cela en tenant vieux et en le faisant glisser vers le bas. Renommez-le pour signifier, Oh Kravitz, changez la taille de police 40 pixels et changez l'opacité de celui-ci à 100%. Maintenant, avons juste ceci et nous allons lire cinq pixels vers le bas. Sélectionnez les deux et déplacez-les ici. Ajustez-le et déposez-les comme 10 pixels. Maintenant, ouvrez le rectangle à nouveau et cliquez une fois. Changez la largeur à 95 pixels, et la hauteur à 75 changé quelques-uns au même saut que nous utilisons pour un appel à des bouteilles d'action , beaucoup ceux-ci dans le coin supérieur droit de notre modèle. Et nous allons avoir un individu de chœur à 15 pixels dans le deuxième champ d'entrée pour lisser seulement le coin supérieur droit. Maintenant, nous allons conduire une copie de notre étiquette en tenant vieux et en la faisant glisser sur des arrière-plans de torpille. Sélectionnez à la fois l'arrière-plan et l'étiquette et Sentara changer la couleur de ces 2071 93 et changer l'opacité à 70% ce qui porte à la piste totale de Cope Jalloh V en tenant vieux et faisant glisser vers le bas, changer cela à 18 ans, changer la taille de la police à 34 pixels et ramener l'opacité que nous voulons à partir d'un bon pourcentage. Centrer les deux. Sélectionnez tout regroupant Hitler de Coley. Ok, faisons un ajustement rapide à ça. Sélectionnez à la fois Nina Kravitz et réservez A billets textes et les aligner sur le bord de l' écran. Déplacé vers le haut de 15 pixels vers la droite. Super. Maintenant, nous allons concevoir un numéro pas à pas, qui va fournir à l'utilisateur la possibilité d'acheter un ou plusieurs billets, Sélectionnez ce groupe et dupliqué en maintenant vieux et en le faisant glisser vers le bas. Supprimez tout ce qu'il contient sauf cette étiquette. Nous avons nommé cet orteil combien de tickets maintenant sur notre panneau d'actifs et sélectionnez Augmenter et diminuer Aiko, que j'ai fourni. Déplacez-les sur notre toile et je les aime sur les bords de l'écran. Déplacez le plus je viens 10 pixels vers la gauche. Sélectionnez le cycle mineur et la justice dans la ligne avec ce texte. Maintenant, sélectionnez-les à la fois et au centre d'eux tous grands. Ouvrez votre type deux et en tapant un. Ce sera le montant initial hors billets changer la taille de l'avant à 50 picks off et la couleur blanche. Centrez ces et sélectionnez à la fois les icônes et le correctif et sélectionnez et Landau regroupés verticalement ensemble. Et ne fais pas partie de ce groupe. Qui a nommé ce groupe au numéro pas à pas. Ok, maintenant l'alignement. 30 pixels vers le bas du bord de ce rectangle. Ok, Quand l'utilisateur tape sur le plus et moins, il ajustera le montant au fur et à mesure que le nombre de billets change. Le prix devrait également changer pour refléter les changements en temps réel. Ceci est crucial pour l'expérience de l'utilisateur. Sélectionnez le nombre de groupe pas à pas et dupliqué en maintenant l'ancien et faites-le glisser vers le bas, en déplaçant 30 pixels vers le bas. Sélectionnez ce groupe avec les icônes du nombre et supprimez. Renommez ceci en nom d'utilisateur et changez également l'étiquette . Ton nom. Sélectionnez égalementle bon single également et dessinez un rectangle de 345 pixels en semaines et de 50 pixels en hauteur. Changez le rayon d'angle à deux picks de la couleur blanche et la capacité à 10 % de position . Ce cinq pixels vers le bas du bord de l'étiquette. Maintenant, ouvrez votre type deux en tapant le nom de notre utilisateur, qui est le biais, Svensson. Ok, changeons les deux avant de la circulaire STD. Change la lettre. Espacement 0%. La taille du formulaire est de 20 pixels et la couleur est blanche. Maintenant, Circular STD est une forme plus lisible que le noi de Baba. Placez-le 10 pixels vers la droite à partir du bord du rectangle. Ok, ça va être notre champ d'entrée à nouveau. Dupliquez ce groupe en maintenant l'ancien et faites-le glisser vers le bas et à nouveau avec 30 pixels. Ok, Nous avons nommé ce numéro de carte d'orteil et renommé l'étiquette ainsi que le numéro de carte tapant un numéro aléatoire de 16 chiffres qui est regroupé en quatre groupes par quatre chiffres et séparé par des tirets. Cela symbolisera le numéro de la carte, or ou les actifs, Penhall. Et prenez la carte monstre bas et buvez-la dans notre numéro de carte. Tu sentirais le bouger. 10 pixels vers la gauche, à partir du bord à droite du rectangle. Ok, nous ajoutons le logo afin que l'utilisateur puisse obtenir une rétroaction visuelle indiquant qu'il s'agit d'une carte existante et que tout va bien. Rappelez-vous lorsque vous travaillez avec des données sensibles telles que celle-ci. Il est primordial que vous fournissiez des commentaires à l'utilisateur. Super. Maintenant, passons sur le panneau ou actifs à nouveau et attrapons l'icône d'erreur et déplacez-le sur notre canevas. Placez-le au même endroit que le logo MasterCard, mais masquez-le en cliquant sur le globe oculaire à côté de vous. Cette icône apparaîtra si un numéro de carte de crédit est impliqué. En outre, bien à sur l'étiquette d'erreur en dessous du champ d'entrée qui dit numéro de carte est Valley. Essayez encore. Changons le formulaire à 12 pixels et utilisons la même couleur que l'erreur, qui est E B 001 B. Cachons pour l'instant. Que sélectionnons notre logo MasterCard et placez-le dans notre groupe de numéros de carte. Cachons l'icône de l'air en cliquant sur le globe oculaire à côté. Sélectionnez le groupe de numéros de carte et dupliquez-le à nouveau en maintenant le moule et en le faisant glisser vers le bas et déplaçant 30 pixels vers le bas à partir du champ de saisie du numéro de carte. Maintenant, ce toit sera la date d'expiration de la carte de crédit. Renommez-le et changez bien LaBella. Maintenant, nous allons supprimer le logo de la voiture musculaire, le niveau de terreur et l'icône d'erreur. Puisque nous n'avons pas besoin d'eux. Changez ceci en octobre 2000 et 20 qui indiquera la date d'expiration d'une voiture. Maintenant, il n'y a pas besoin que ce rectangle soit ce grand Celeste. Ajustez avec elle. Maintenant, sélectionnez cette étiquette et un rectangle et centrez-les vers le haut. Super. Maintenant, sélectionnez le groupe de date d'expiration et rivaliser à nouveau en maintenant vieux et faites-le glisser vers la droite cette fois et marié 30 pixels vers la droite. Ce sera le numéro de cartes sérieux qui va qui se trouve sur le dos de la carte. Maintenant, c'est un numéro de l'Egypte. Mais on va le cacher en mettant des astérisques en marche. Sélectionnez les deux avec le rectangle et le centre vers le haut. Ok , je vais cacher notre appel à l'action en bas et changer les bâtons pour vérifier. Ok, maintenant nous avons nos billets de livre. Design Queen. Rendez-vous dans la prochaine vidéo 10. Écran de calendrier: Eh bien, bonjour encore. Les garçons et les filles dans cette vidéo plongeront profondément et concevront un écran de calendrier pour l'application . L' écran du calendrier est un endroit où l'utilisateur peut choisir une date particulière du mois et vérifier s'il y a des parties disponibles pour ce jour. Parlons maintenant de scénarios de cas réels ici. Il n'y a pas de fête disponible à chaque date que la plupart de mes clubs travaillent pour les week-ends et rarement un jour de semaine. Cela signifie que notre calendrier devrait nous permettre de choisir des dates qui sont affaiblies ou proches. Dans notre cas, on va commencer de jeudi jusqu'à dimanche. Cela signifie que les lundis, mardis et mercredis sont désactivés. Pour faire la différence entre les jours disponibles et ceux qui ne le sont pas, nous allons utiliser un état désactivé. Un état désactivé est un état où les éléments ne sont pas sélectionnables. Ça veut dire qu'on va devoir les faire paraître différents de l'autre élément. Ceci est généralement réalisé en changeant la couleur et la capacité de l'élément. Ok, assez parler. Allons aux affaires. Tout d'abord, ouvrez votre rectangle pour dessiner un rectangle qui couvre l'ensemble de l'écran. Renommez-le en DJ et déplacez-le vers le bas, hors de la pile de calques. Changer la couleur de celui-ci pour vous deviné que c'est votre 71923 Ok, Comme vous pouvez le voir, nous avons une copie sur Heather Composant placé sur nos caméras. Nous allons concevoir l'écran du calendrier pour être un sélecteur de modèle plein écran. Pour y parvenir, nous devons apporter quelques changements dans notre santé. Comme vous vous en souvenez, nous ne pouvons pas faire de changements , stocker des installations, donc nous devons mettre à jour nos composants principaux, aller à son panneau d'actifs, saisir l'icône des vêtements et le mettre dans notre composant de masse, aligner en haut et à droite. Assurez-vous qu'il s'enclenche sur les bords et passez à nos composants dans des trucs. Comme vous pouvez le voir avec Rep répliqué que je viens dans notre instance maintenant hype l'icône du calendrier sur le cycle du ticket, puisque nous ne les laissons pas finalement changé le titre à notre instance, aussi. Choisissez. Ils Maintenant, nous allons concevoir sont calendrier réel. Revenez sur le panneau RSS et saisissez cette icône en forme de flèche. Placez-le sur notre toile et en alignant vers la gauche, faire une copie, élever en tenant, tenant, le faisant glisser vers la droite. Cliquez dessus et choisissez retourner horizontalement pour le retourner horizontalement. Ouvrez votre type 2 et tapez dans le mois. Rappelez-vous, la taille du téléphone est une très grande source. Le téléphone paie boulon mais a changé la couleur pour le saut que nous avons utilisé pour les fonds . Centrez-le sur notre écran et sélectionnez les anciennes icônes. Et le travail Novembre et les regrouper ensemble appelé son groupe Calendrier Heather. Maintenant, nous allons créer les jours calendaires. Attrapez votre type 2 à nouveau. Je tape le travail dans les deux pour lundi. Change les téléphones, attend pour réserver. Modifiez la taille du téléphone à 20 pixels. La voiture est blanche avec 80 % de capacité alignée. Ce travail sur le bord gauche de l'écran. Maintenant, je vais poster la vidéo et le dupliquer six fois de plus pour représenter les sept jours de la semaine. Bienvenue de retour. Comme vous pouvez le voir, j'ai créé les jours de la semaine et je les regroupe ou les nomme jours calendaires. Maintenant, nous allons créer les dates réelles que nous avons. Tapez deux à nouveau et tapez un. Modifiez le poids avant à la fois une taille de 30 pixels. La couleur est blanche et pleine capacité placer ce sous notre jeudi est que c'est le début du mois en déplaçant 30 pixels vers le bas. Ok, je vais poster la vidéo à nouveau et créer les dates sur le calendrier. Gagnez du temps. Ok, les gars, bienvenue. Comme vous pouvez le voir, il se passe beaucoup de choses. Alors laissez-moi vous expliquer. J' ai aligné ces jours calendrier, Heller et Calendar 50 pixels du top off choisir une date. Et ces jours calendaires sont à 50 pixels du bas du calendrier. Heyler J'ai regroupé tous les rôles indiquant les dates et les espacer 30 pixels chacun. Comme vous pouvez le voir, les jours du lundi au mercredi sont d'une couleur différente indiquant qu'il ne peut pas y avoir clic. Il s'agit de l'état de désactivation. Le stand off plus tôt tout ce que j'ai fait était de changer l'opacité de 30%. Ce cercle indique ici l'état du pied. C' est un diamètre de 50 à 52 picks et la couleur est la même chose que vous utilisez pour les bouteilles. Enfin, nous avons notre appel à l'action qui applique la date sélective et ferme le mobile. Ce fond apparaît sur Lee. Si nous avons sélectionné la date, c'est tout. Les gars n'auraient pas la conception de l'écran du calendrier. Je vous verrai dans la prochaine vidéo 11. Écran vidéo: Bonjour encore. Mesdames et messieurs, bienvenue à notre série Dans cette vidéo va concevoir l'écran vidéo. Ici, l'utilisateur peut voir une courte vidéo simple représentant un deejay de la partie sélectionnée si vous vous souvenez d'une vidéo précédente sur la façon de concevoir l'écran de parti unique avec ajouté une vidéo de mâle avec un fond de jeu. Quand l'utilisateur appuie sur ce tamoul, il est redirigé vers l'écran vidéo. Maintenant, cette reine attend un modèle plein écran, le même que notre écran de calendrier. L' utilisateur peut voir la vidéo et contrôler la chronologie vidéo à l'aide d'une barre latérale comme d'habitude parler assez. Passons aux affaires, Ouvrez votre rectum et dessinez un rectangle qui colore l'ensemble de l'écran comme d'habitude, renommez en arrière-plan BJP et, comme d'habitude, descendant notre pile de calques. Changeons la couleur de celui-ci à notre couleur préférée, qui est 071 93. Comme vous pouvez le voir avec l'instance du ciel ou les composants Hiller qui doivent changer, cliquez sur le globe oculaire pour que l'icône du calendrier, l'icône du ticket, la date et le titre cliquent sur le globe oculaire de l'icône des vêtements. Lorsque l'utilisateur appuie sur l'icône des vêtements, le mobile se referme à l'écran de la partie unique. Pas de déménagement ou de nos actifs. Penhall. Prenez l'image et déplacez-la vers nos caméras. C' est la même image que nous avons utilisée dans notre écran de fête unique, et elle va représenter notre vidéo, faire quatre semaines et changer son battage médiatique. 265 jours de congé. Positionnement au centre de l'écran. Excellent assemblage laissé à la conception est la barre malade. Prenez un angle droit pour cliquer sur les murs et en faire 345 pixels avec et centralement vers le haut. Faites la hauteur de trois pixels et changez la couleur de celui-ci. 103 quatre pour a. Cela représentera les barres malades qui ont grandi dupliqué en appuyant sur le contrôle C et le contrôle V et changer la couleur du blanc. Ce sera le temps écoulé des barres de mer. Faites-le 75 pixels avec Now, prenez sur un tabouret de congé et rapide un. Cliquez sur l'icône de chaîne pour restreindre les proportions du cercle et modifier la semaine 25 pixels. Cela changera automatiquement la hauteur à 25 pixels. Changez la couleur du cercle blanc et placez-le pour être Etch hors du temps écoulé. Ce sera le contrôle des barres malades, que l'utilisateur peut légère. Changer les vidéos Temps Enfin, ouvrez votre temps à et en tapant zéro charbon 16 barre oblique un charbon 30 Changé la faute à circulaire STD. La lettre Espacement à zéro La taille réelle est de 16 pixels sur le devant. Le poids se rencontre et la couleur est des endroits blancs sur le bord droit, quelque part en dessous du Sigmar. Ce numéro représente le Stein de notre Elect et le lien vidéo sélectionné. Sélectionnez les lèvres et les rectangles et regroupez-les ensemble. Renommez ces grands bars organisant Baylor et c'est tout. Les gars n'auraient pas notre conception d'écran vidéo. Je te verrai dans la prochaine vidéo. 12. Écran de ticket: Bienvenue aux garçons et filles sérieux dans cette vidéo va jeter un oeil sur la façon de concevoir l'écran des billets comme nous l'avons mentionné précédemment. L' écran des billets est un endroit où l'utilisateur peut voir ses billets d'achat. Pensez-y comme un type spécial de portefeuille qui existe sur votre téléphone. Maintenant, parlons de concevoir le billet réel. On va s'assurer que c'était authentique. Nous allons donc concevoir le ticket virtuel pour ressembler à un billet en temps réel. Nous allons utiliser les mêmes données de notre parti. Le billet a été acheté pour, comme le nom du deejay, le lieu avec le prix du billet et le moment où nous commencerions. Enfin, nous allons utiliser un barco pour notre billet. Le code-barres est nécessaire pour que les personnes à la porte qui utilisent des lecteurs de codes-barres spéciaux puissent authentifier le billet. Nous allons utiliser en ligne pour générer le Barco, simplement Google jusqu'à générateur de code à barres gratuit et cliquez sur la première ou la deuxième requête de résultat . Là, vous pouvez générer l'image de code-barres et vous pouvez le doubler comme un fichier PNG. En outre, je suis plus pourquoi l'image de code-barres dans le panneau d'actifs. Maintenant, comme d'habitude, assez parler et passons aux affaires. Tout d'abord, exercice habituel. Créez l'arrière-plan, en utilisant notre rectangle et notre couleur préférée. Sélectionner, diriger et aller aux pieds. Faire un imbécile et pleine hauteur. Droit ? Single Renommez-le BG pour l'arrière-plan. Déplacer notre pile de couches. Changer sa couleur à 07123 Maintenant, puisque l'écran de ticket est un écran intérieur dans notre application, nous devons fournir à l'utilisateur loin de ne jamais revenir. Maintenant, si vous vous souvenez de notre leçon précédente concernant l'écran de fête unique, nous avons ajouté un gros fond pour le composant Heather. Allez dans le Heller Component Systems et cliquez sur les globes oculaires de tout sauf la Big Bottle, et le titre a changé le titre pour mes enfants ou mon portefeuille si vous préférez cela de cette façon. Ok, nous avons conçu le ticket réel. Maintenant saisir la direction Goto à nouveau et cliquez sur les murs changer la couleur de fond en blanc changé avec orteil, 345 pixels et la hauteur orteil, 465 pixels. Centrez cela et changez le coin. Quatre pixels de Brady Maintenant dans notre panneau d'actifs, nous avons la même image que nous avons utilisée pour l'arrière-plan dans les parties célibataires sélectives Queen et déplacées vers nos caméras. Assurez-vous que c'est la même chose avec le rectangle et pour la hauteur que nous allons utiliser, avoir la hauteur sur le rectangle pour le faire. Sélection et dactylographie. 465 pixels divisés par deux dans notre champ de saisie. Ici, nous pouvons créer les équations mathématiques toe calculer automatiquement la hauteur de l' image. Ok, maintenant ajoutons un rayon de coin à cette image aussi. Cliquez ici pour ajouter des coins indépendants et taper des pixels. Dans les 2 premières entrées, cela agira pour les pixels. Coin est en haut à gauche et dans le coin supérieur droit, respectivement. Maintenant vient la partie amusante. Sélectionnez le tabouret lib et cliquez sur ceux. Cliquer cette modification pour restreindre les proportions du cercle et taper 35 pixels pour la semaine. Sélectionnez le cercle en place à D H R. Pour obtenir, vous verrez les lignes rouges s'accrocher. Ok, sélectionnez le cercle et copiez en maintenant l'ancien et en le faisant glisser vers la droite. Assurez-vous que la copie s'accroche également. Super. Maintenant, sélectionnez les deux ellipses et regroupez-les ensemble. Assurez-vous d'en faire une copie en appuyant sur la touche C de votre clavier. Maintenant, sélectionnez à la fois le rectangle dans les cercles en maintenant le navire et le poinçonnage. Soustraire la sélection. Tu vois, ça fait un ticket comme un rectangle. Déplacez la soustraction ci-dessous, et assurez-vous que vous avez basé les cercles précédemment Kobe. Il contrôlerait le sur ton clavier. Placez maintenant ce groupe au-dessus de l'image et sélectionnez à la fois l'image et les cercles. Et il soustrait à nouveau l'exaltation. Regroupez tout ensemble. Et nous avons appelé ces ukip beat. Nous avons maintenant un temps réel pour venir ici. Maintenant, plaçons les données. Copiez les informations de notre écran de parti unique et en les basant. Ne vous assurez pas qu'il s'agit d'une ligne centrale et que vous déplacez 30 pixels du haut. Maintenant, tout est le même sauf ceci le nom du DJ dans le nom du lieu de notre centre aligné. La dernière chose à faire à notre billet est l'orteil à l'aboiement. Plus sur le panneau RSS, sélectionnez un code-barres que j'ai fourni et placez-le sur notre toile. Vous pouvez également, comme je l'ai mentionné précédemment, faire votre propre code à barres en allant en ligne et rechercher des convertisseurs de codes à barres gratuits. D' accord. La dernière chose à faire est de regrouper tout ensemble et de faire un ticket. Nous pouvons également faire un composant à partir du billet. Donc, cliquez sur de grands composants et des films sur copie, mais en maintenant vieux et en le faisant glisser vers l'appareil photo. Maintenant, si vous achetez plus d'un billet, faisons un café. Creux pour être authentique. Et c'est tout pour la leçon d'aujourd'hui. Les gars, je vous verrai dans la prochaine vidéo. 13. Écran vide: bienvenue à la deuxième vidéo au-dessus de l'écran du ticket, l'écran d'état vide. Dans cette courte vidéo, nous apprenons à concevoir à l'état vide pour obtenir l'écran. Depuis l'écran du billet est accessible à partir de notre écran d'accueil, un k. l'écran du parti. Il y a une possibilité que cette reine n'ait aucun contenu, voit l'utilisateur. n'avons pas encore acheté de billets à cette fin que nous concevons sur Empty State, qui montrera s'il n'y a pas de tickets dans l'écran de la figure. Si vous vous souvenez, nous l'avons mentionné dans l'utilisateur pour la vidéo. Comment un écran vide devrait ressembler aux éléments sont un graphique approprié, un message qui explique pourquoi il n'y a pas de contenu ici dans un appel à l'action qui fera que l' utilisateur fasse quelque chose dans notre cas. Achetez des billets. Donc, sans plus tarder, passons aux affaires. Je suppose que vous avez déjà créé votre arrière-plan, en utilisant le rectangle sur notre couleur préférée. Sinon, faites-le maintenant, nous utilisons le même Heller. Il y a un écran de ticket où nous avons un gros fond et un titre d'écran maintenant dans notre panneau d'actifs . J' ai fourni le graphique pour cette leçon. Prends-le et mets-le sur nos caméras. Comme vous pouvez le voir, c'est le même Michael utilisé dans notre composant de cheveux pour nous lier aux billets Queen seulement plus grand et une couleur différente. Placez-le au milieu de nos caméras. Maintenant, ouvrez votre type, aussi, et tapez. On dirait que tu n'as pas d'enfants. bateau a changé les quatre côtés pour cela. 30 décroche le téléphone. Attendez, il est régulier et la couleur est blanche. La dernière chose à faire est de centrer. Alignez ce texte et assurez-vous qu'il s'insère dans notre écran en cassant ces mots. Maintenant, placez-le. 30 pesos ne sont pas une doublure graphique et centrale pour Kemalist. Donc, il à la fois le graphique et le texte et les regrouper ensemble centré les alignés sur le moulin nos caméras. Maintenant, la dernière chose à faire est de remorquer à l'appel à l'action, copier et coller la direction du code de nos écrans précédents et changer le contenu pour réserver billets. Maintenant, assurez-vous qu'il s'agit d'une ligne centrale et de 15 pixels du bas. C' est ça, les gars. Nous en avons fait la conception finale pour l'application. Je vous verrai dans la prochaine vidéo où nous discuterons de ce que nous avons appris jusqu'à présent et préparerons à relever le défi. Merci beaucoup pour votre attention. 14. Conclu: Bienvenue à la conclusion du verre, les gars. Tout d'abord, je veux dire Félicitations pour avoir fini ce verre. Merci d'être mon public. J' espère sincèrement que vous aimez quelque chose de ces Siri pour récapituler. Nous apprenons à concevoir un flux utilisateur, un utilisateur persona et de nombreux types d'écrans que pour une application mobile tout au long vidéos à saupoudré conseils utiles qui contribuent à une bonne expérience utilisateur. Rappelez-vous, l'utilisateur est une clé de toute entreprise, et vous devez toujours concevoir pour l'utilisateur. Je pense à l'application comme un engin de fantaisie qui sert d'outil pour l'utilisateur, plus il peut faire les choses, mieux pour lui et les morts d'affaires. Étais-tu l'expérience utilisateur pas à pas ? Les concepteurs s'assurent que les utilisateurs se sentent à l'aise lorsqu'ils utilisent leurs applications. Et maintenant, le défi en fait deux défis. La première partie consiste à concevoir l'écran de réussite et l'écran d'erreur. Si vous vous souvenez quand l'utilisateur achète les billets, il est redirigé vers la reine des succès ou des erreurs. Selon le résultat de l'achat, le défi est de concevoir ces reines utilisent les techniques que vous avez apprises dans ces vidéos pour les réaliser ou vous pourriez penser que vous avez une meilleure solution. Allez-y et utilisez-le. La deuxième partie est de concevoir Ah toute l'application de réservation en utilisant les techniques que vous avez appris jusqu'à présent. Le haut peut être là où ils étaient. Vous aimez la réservation d'hôtel , les billets d' avion , la réservation de table etc. Je suis prêt à vous de décider une fois de plus. Merci d'avoir fait partie de ma classe. Et j'espère vous rencontrer à nouveau dans le futur Siri