Conception d'applications mobiles : interactions et animations simples pour chaque application

1. Introduction: Si vous voulez innover quelque chose de nouveau dans votre vie, cela devrait prendre cela. Je suis Johny Vino. Je suis Interaction Designer, Motion Designer, Prototype et Visual Designer. Souvent, mes conceptions sont non conventionnelles, nouvelles et entièrement spécialisées dans le design humanisé. Aujourd'hui, nous allons apprendre comment pouvons-nous créer l'idée dans votre tête au prototype mobile réel, qui est rempli de beaucoup d'émotions, de personnalité, et une identité unique dans le design. Pour suivre cette classe, vous n'avez pas besoin d'être réellement concepteur UX/UI en ce moment. Vous pouvez être n'importe qui comme un graphiste, graphiste ou des ingénieurs, ou vous avez juste une idée dans votre esprit et vous voulez faire de cette idée un produit en direct. Aujourd'hui, je vais créer une application pour les adolescents. Je vais vous montrer quelle est la façon dont il est actuellement conçu, et comment pouvons-nous l'améliorer. Nous allons montrer comment nous allons améliorer la conception visuelle de l'application. Troisièmement, nous allons réellement prototype en utilisant des principes pour nous assurer comment nous pouvons ajouter cet élément micro interaction et la personnalité à l'application. Vous pouvez suivre en téléchargeant un fichier d'esquisse dans ce cours de conception. Vous pouvez également appliquer toute la pensée que je vais enseigner, et appliquer ces principes aussi dans vos propres idées comme le projet. Je suis venu au design parce qu'il est beau et je fais quelque chose de beau, mais je veux rester dans le design parce que je peux faire de grands changements dans le monde. L' interaction est juste un moyen vraiment cool. Je suis excité de voir ce que vous allez trouver. Commençons. 2. Humaniser la conception d'application: Aujourd'hui cours, nous allons couvrir comment pouvons-nous ajouter de la personnalité et de l'émotion dans la conception d'applications. Il est super important dans la conception d'applications nos jours parce que la conception d'applications sont en train de changer la vie de tout le monde, comment l'interagir avec le monde. chose la plus importante dans l'application est chaque jour, il y a des centaines d'applications que les gens publient dans l'App Store. Application la plus réussie, nous avons toujours une question comment cette application est si réussie parce qu'ils ont ajouté ce niveau d'émotion et de sentiment à l'application. Donc aujourd'hui, nous allons couvrir cela. Comment pouvez-vous faire ce sentiment dans n'importe quelle application font ? Comment pouvez-vous ajouter la personnalité de petites micro-interactions touchant l'application ? Parce que je viens d'un petit village de communauté de petites personnes, tout se passe surtout de communication humaine à humaine comme commander de la nourriture, comme poster un message, tout est si humain. Mais quand je passe dans un monde de la technologie, tout est tellement numérique. J' ai donc une passion de savoir comment apporter cet élément humain que j'avais dans mon passé dans le monde numérique. Alors que de retour à ma place ou les gens dans un village ou n'importe où dans le monde peuvent utiliser votre application, pas seulement avoir des gens dans une ville de technologie. J' ai commencé à faire du design tout seul, mais je ne savais pas par où commencer parce que dans ma région il n'y a pas d'écoles de design. J' ai donc commencé à faire des applications, toutes les idées. Tous les jours, j'ai eu quelques idées alors j'ai commencé à faire de mes idées un vrai prototype. J' ai posté en ligne tous les jours pour passer comme deux ans. Beaucoup de gens ont dit : « Oh, ça a l'air unique. Vos idées sont si uniques. » Je me dis : « Parce que je n'apprends pas le design, parce que je ne connais pas les règles. Je fais tout ce que je pense. » Donc, puisque vous commencez comme un débutant, vous êtes déjà hors de la boîte. N' aie pas peur. Vous êtes déjà bien que les gens vraiment expérimentés parce que toutes les idées que vous allez venir maintenant vont être super uniques. Alors soyez confiant et apprenez de cette classe. Comment l'idée que vous avez peut-elle l'amener au monde et partager régulièrement au monde ce que vous faites ? Nous allons les apprendre en créant une véritable étape du produit de l'idée que vous avez en ce moment et comment pouvons-nous le créer en une étape. La procédure à suivre est super importante pour tout projet parce que quand vous dites une idée à quelqu'un, sera comme, c'est cool. Mais ils ne comprennent pas ce que ça fait quand ils l'utilisent. Donc, en effacant pas à pas, vous allez donner à quelqu' un une vraie action dans le mobile où ils peuvent simplement cliquer et se sentir, cela se sent vraiment agréable, j'aimerais vraiment avoir cette application. La plupart du temps, lorsque vous travaillez sur les différentes parties prenantes comme les ingénieurs, comme les managers, l'équipe marketing, ils n'ont aucune idée des conceptions que vous faites. Ils ne peuvent prendre des décisions que lorsqu'ils voient quand quelque chose bouge. Par exemple, il y a une différence entre un storyboard et un film réel. Quand tu regardes un film, tu as le sentiment. Ce n'est pas juste comme un concept. La création d'une application dans un produit réel prend six mois, mais vous pouvez le faire en une seule journée. C' est pourquoi marcher à travers est super important pour communiquer le sentiment que vous essayez de communiquer afin que les gens puissent réellement prendre des décisions basées sur cela. Au cours de ce cours, nous allons créer une application de régime spécialement pour les adolescents et les enfants. Nous commencerons à partir d'un fichier de croquis de base que je vais fournir. Vous pouvez télécharger à partir de nos ressources. À partir de cela, je vais vous montrer comment nous pouvons améliorer cela dans le prochain niveau de conception visuelle. Ensuite, nous allons tester ce produit en utilisant InVision, puis je vais vous montrer comment pouvez-vous ajouter un élément de micro-interaction de moment aha dans l'application. Enfin, je vais vous apprendre comment vous pouvez communiquer vos idées à un client, au monde ou aux ingénieurs. Ma pensée était, comment pouvons-nous rapidement saisir cette information de notre esprit et faire de cette idée un produit en direct ? Donc, je viens avec cette idée du processus rapide de deux heures de venir avec l'idée, créer et de concevoir et de faire du prototype. Nous allons utiliser le sketch qui est pour la conception de l'interface utilisateur, et nous allons également utiliser InVision pour tester notre prototype. Visuellement, comment est la hiérarchie des polices, quel hôte les couleurs fonctionne, et après cela, nous allons utiliser un logiciel de principe où nous créons des animations, micro-interactions et faisons bouger les choses. Enfin, je vais vous apprendre quelques trucs et astuces dans Keynote. Comment vous pouvez réellement mettre toutes vos vidéos dans Keynote pour les présenter aux gens. Tous ces logiciels que j'ai mentionnés en ce moment sont disponibles pour un essai gratuit pendant un mois ou 15 jours. Donc tu n'as pas besoin de t'inquiéter. Il suffit d'aller sur ces sites et de télécharger les logiciels. Donc, l'étape suivante, nous allons voir à quoi ressemblent les grandes applications. 3. Bonnes applications IRL: Dans cette classe, regardons quelles sont les grandes applications que nous utilisons chaque jour dans notre vie et ce qui les rend vraiment géniales, et ce qui leur donne un sentiment d'expérience d'application mémorable. Alors commençons simplement par regarder quelles sont les fonctionnalités de l'iPhone que nous avons en ce moment que nous utilisons littéralement tous les jours. Par exemple, le Control Center où nous faisons des changements de luminosité, sur les changements et tout. Faisons simplement glisser vers le bas, cette interaction elle-même, vous ressentez la différence. Il a juste glissé vers le bas, c'est si naturel. Ce n'est pas seulement que depuis que j'enregistre l'écran, il me montre en fait un point de la façon dont je suis en train d'enregistrer l'écran. Si nous améliorons la luminosité, vous pouvez voir comment ils changent la luminosité là-bas. En fait, quelque chose comme le son, ils le mettent en sourdine. Il y a tellement de détails impliqués dans ce son. Super intéressant est comme le toucher, qui est ici. Vous pouvez vraiment voir comme le toucher donne par bar et ma lampe de poche augmente. Donc toutes ces choses qu'ils capturent le monde réel et ils mettent cette expérience sur le mobile, et c'est pourquoi tout le monde se sent comme l'iPhone est super facile à utiliser parce qu'ils utilisent cette petite expérience humaine qu'ils le font indirectement que les gens ne se rendent pas compte. Regardons une autre application. Cette année, ils ont présenté comme Apple Best App Award, juste une application de crayon simple. La chose cool qu'ils ont fait est cette barre, où vous pouvez aimer changer rapidement la pince. Tu vois, comme ça. Dans le passé, quand nous étions à l'école, nous avons changé les nips dans notre téléphone comme dans un crayon. Donc, ils utilisent ça comme changer de crayon comme une expérience humaine en de vrais détails, quand ils mettent tant d'efforts sur. Faire ces changements de couleur. Donc, c'est ce que je dis à bord comme cette application se sent bien et nous ne comprenons pas pourquoi il se sent bien, c'est en fait qu'ils impliquent l'expérience humaine que nous avions avant. Regardons une autre application que j'ai faite et publiée dans l'App Store. Donc juste une calculatrice d'IMC simple que vous pouvez vérifier votre IMC, où vous pouvez simplement glisser rapidement vers le bas au lieu de donner comme un menu déroulant où vous pouvez juste « Oh, quelle est la taille de mon poids ? » Vous pouvez simplement glisser vers le bas. C' est super intéressant et vous pouvez entrer le poids ou le sexe que vous voulez. J' ai ajouté comme une petite touche de manger comme si on jouait à ce jeu. Donc, j'aime juste dans le mur ce principe, je fais défiler vers le bas et donc vraiment vous donner le résultat. Bien que, cela ressemble vraiment à un onglet d'aide, ce n'est pas ennuyeux comme tout le monde peut l'utiliser et c'est bien à utiliser. Enfin, nous pouvons regarder une autre application que j'admire vraiment, c'est comme une page de temps. Donc je viens de le télécharger maintenant. Donc ça me donne juste un, oh, ravi de te rencontrer. Les mots qu'ils utilisent, c' est que c'est toujours comme un humain qui te parle. Alors juste ils demandent quelles couleurs vous voulez, quelles couleurs vous aimez. Vous pouvez choisir la couleur que vous voulez. C'est ce que j'ai fait. Vous pouvez voir tout votre calendrier, il a juste l'air bien. Il ne se sent pas comme un calendrier ordinaire, il se sent super intelligent. Une fonctionnalité vraiment cool que j'aime à propos de cette application est comme comment ils font un réglage qui est super intéressant. Cliquez sur les alertes intelligentes. Comme si nous cliquons sur les pluies, elles apparaissent comme des alertes, vous voulez une notification quand il pleut. Si nous voulons comme quel est le temps de partir et quel type de voiture vous utilisez, tout cela est comme des éléments humains comme vous allez marcher ou vous allez prendre une voiture. Donc, ce sont comme des éléments vraiment minuscules, mais ces petits éléments rendent cette application super unique, personne ne peut le faire et tout le monde peut se rappeler clairement que c'est de cette application laps de temps. Donc, c'est ce que nous allons voir dans notre classe aujourd'hui, comment vous pouvez créer une application comme celle-ci. Ces applications ne sont pas seulement comme vous donner la fonctionnalité, ces applications sont mémorables parce que c'est beau, c'est magnifique, et en même temps, il est intemporel. C' est ce qui est vraiment important pendant que vous faites un design. Faites-vous un design tendance ou intemporel ? Maintenant, nous avons vu quelques exemples de toutes les grandes applications sont faites dans un produit en direct. Commençons à utiliser un croquis et créons notre propre design. 4. Préparer votre concept: Donc, la première étape de faire une grande application n'est pas de faire une interaction complexe. La première étape est que vous devez apprendre les bases. J' appelle ça comme une grammaire de l'anglais. Si vous voulez parler anglais, vous devez apprendre les bases de la grammaire, alors vous seul pouvez casser et créer quelque chose de nouveau. Si vous ne suivez pas ces règles, il faudra beaucoup de temps pour configurer la mise en page de base. Mais si vous connaissez les règles, vous pouvez commencer et être créatif. Les entreprises comme Google et Apple, bientôt ils ont tellement d'appareils et ils ont aussi [inaudible]. Ils ont déjà créé toutes ces règles de base. Quelle est la taille minimale que vous devez utiliser ? Quelles couleurs sont vraiment accessibles à tout le monde ? Pour différents pays, quelles couleurs devraient réellement ? Quel est l'élément de navigation dont vous avez besoin aussi ? Tous ces éléments sont accessibles si vous allez à aimer Material Design, vous allez trouver toutes ces ressources et il est disponible gratuitement et ils vous fournissent aussi beaucoup d'exemples comme ce que vous pouvez faire, ce que vous ne pouvez pas faire. Alors commencez par là. Ensuite, vous pouvez les appliquer dans votre conception. Alors commençons à faire notre propre idée. Hier, je parlais à ma sœur. Elle a dit : « Si vous entraînez les enfants dès leur plus jeune âge à faire la forme physique, il y aura plus de santé sur l'avenir. » J' ai donc pensé à faire un concept de conception d' interaction qui encourage les enfants à réellement interagir et à faire du fitness. Commençons par écrire quelles sont les caractéristiques ou comme les choses que nous devons faire pour donner des recommandations d'exercice aux enfants. Donc, les choses de base que nous devons savoir, c'est le genre qu'ils sont. Plus tard, nous avons besoin de taille, nous avons besoin de quel poids ils sont actuellement, et nous pouvons également leur demander, quel est votre poids désiré ? Nous pouvons poser quelques questions comme, quel est le mode de vie ? Quelle est la nourriture qu'ils mangent ? Enfin, montre comme un écran qui traite toutes les informations et affiche ensuite votre écran d'accueil avec le résultat, ceux-ci sont recommandés exercice pour vous. Donc, vous devez écrire fondamentalement toutes les fonctionnalités rapidement. Peu importe ce qui vous vient à l'esprit ou que vous pouvez parler à votre ami ou aux utilisateurs que vous ciblez, vous pouvez demander aux enfants quelles informations ils ont besoin et vous pouvez remplir toutes ces informations dans un papier pour commencer. Parfois, au début, quand j'ai commencé à concevoir, je suis resté coincé avec je dois capturer toutes les fonctionnalités et j'ai tout mis en place, mais vous allez le faire grossièrement. Quelle est la principale chose dont nous avons besoin ? Habituellement, choisissez cinq choses principales dont nous avons besoin pour cette application ou quatre choses principales. Pour que votre interaction soit plus ciblée et plus simple au lieu de rassembler toutes les informations à la première fois. Maintenant, commençons à mettre en esquisse toutes les vitesses d'esquisse ou les fonctionnalités que nous avons faites ici. Application Sketches qui vous aide à visualiser rapidement votre design. C' est super simple à utiliser. N' importe qui comme un gros nerd, ou n'importe qui peut commencer à utiliser l'application. Donc, vous avez déjà fait un fichier de base ou vous montrer quelles sont les choses dont nous avons discuté, nous avons besoin d'un sexe, nous avons besoin d'une taille, et nous avons besoin d'un poids, et nous avons besoin d'un poids désiré. Ils veulent réaliser par exemple s'ils sont en 80 tours, ils veulent aller à 60 tours. Ce sont donc les informations de base dont nous avons besoin. Après avoir entré toutes ces informations, nous allons les recommander avec les résultats. J' ai fait beaucoup d'erreur intentionnelle dans ce [inaudible] spécifique parce que ce sont les choses que font la plupart des débutants. Quand je suis débutant, j'ai fait toutes les erreurs. Donc je veux juste vous faire savoir que ces erreurs sont super courantes et vous pouvez facilement éviter ces choses. Donc erreur super commune tout le monde fait. Ce n'est pas une grosse affaire, mais si vous travaillez dans une entreprise et que vous présentez un design, et je voudrais une erreur d'orthographe en faisant des choses. C' est super simple, mais c'est vraiment grand. C' est le premier que je dirais. Puis une seconde je dirais connaître une typographie comme un style de hiérarchie. C' est super important. Par exemple, l'écran actuel. Vous voyez tous les écrans, presque la même apparence. n'y a donc pas de hiérarchie appropriée, laquelle est la première, ce qui est plus important. Donc je vais juste nettoyer rapidement ce truc. Donc, je toujours comme je l'ai dit ici avant un site Web comme les directives humain-ordinateur comme Apple, ils ont fait une ligne directrice claire de ce qui est la taille de titre que vous pouvez utiliser, ce qui est une taille de paragraphe que vous pouvez utiliser. Par exemple, 16 est super minuscule pour les en-têtes. Donc, vous pouvez utiliser 34 ou similaire si vous voulez avoir 32, sont les tailles qu'il montre immédiatement ceci est cap. Donc, le niveau secondaire c'est comme un paragraphe. Maintenant, je voulais dire entrer un style de police différent comme, par exemple, ceci un titre et ce sous-texte de figure. Mais différencier vraiment clairement. Si vous êtes regardé comme Google Material Design dado est vraiment intentionnellement, vraiment bon. Est comme pour séparer ce type de minuscules titres, ils utilisent bouchon complet. Ainsi, vous pouvez sélectionner tous les calques et aller Texte et il y a une fonction à appeler comme Transformation. Si nous cliquons en majuscules, c'est fait. Donc, maintenant, vous pouvez rapidement voir qu'il y a une nette différence entre le titre et l'option que vous voulez. La troisième erreur commune beaucoup de gens font. Comme vous allez immédiatement trouver des trous comme un concepteur débutant ou quelqu'un comme pour l'opportunité est comme un espacement. Par exemple 35, j'ai 35 espacement ici et j'ai comme un espace 13 ici et comme un 43. C' est une astuce qui est super facile à apprendre. C' est comme un système de grille à huit. Ainsi, par exemple, lorsque vous souhaitez maintenir un espacement entre les éléments, vous pouvez placer aléatoirement des éléments. Tu vas donner comme un multiple de huit. Par exemple, je veux que ce soit comme 16 et que ce soit comme 16. Donc, vous allez faire une constante comme l'espacement, et la troisième chose est le dimensionnement. Par exemple, beaucoup de designers quand nous commençons à concevoir, nous n'avons aucune idée de la taille de ce bouton à être et nous dessinons simplement un bouton. La taille minimale d'un bouton est de 44 pixels. Donc, actuellement, la hauteur dit 39, mais c'est assez correct, mais c'est en fait petit quand vous utilisez réellement une empreinte de pouce. Vous ne pouvez pas cliquer sur ces boutons. Vous devez donc vous assurer que votre minimum est de 44 hauteur. Donc, j'avais l'habitude d'utiliser comme 48 comme taille minimale pour que ce bouton et être comme super facile à cliquer, et comme je l'ai dit, quand vous concevez vous prenez soin de quelqu'un, quand ils sont juste sur la route et qu'ils veulent remplir le formulaire, vous avez pour vous assurer qu'il est facilement cliquable. Si c'est super minuscule, ils peuvent cliquer. Rapidement, nous allons marcher à travers comme, comme je l'ai dit, nous pouvons utiliser le même style de titre ici. Copiez rapidement le style et collez-le ici. Donc, lorsque vous alignez, assurez-vous que ces polices sont également alignées dans un angle droit. L' espacement est clairement correct. C' est huit systèmes multiples et à l'extérieur. Donc, il y a aussi une question comme ce qui est l'espace extérieur, vous devez donner. Vous avez généralement la taille minimale ici pour donner les deux côtés comme étendue éteinte. La dernière chose que je veux dire est comme les couleurs. J' adore jouer aux couleurs. Vous pouvez simplement utiliser des couleurs aléatoires parce que les couleurs signifient des choses différentes pour les gens. Donc pour celui-ci, je n'ai même pas besoin de couleurs parce que chaque fois que vous allez utiliser des couleurs, vous prêtez attention à cette partie spécifique. Vous voulez qu'ils cliquent dessus, et actuellement je ne veux pas que quelqu'un clique sur les 10 minutes. Donc, vous allez juste en faire une couleur qui n'est pas si importante et c'est un niveau secondaire de couleur, c'est pourquoi j'ai utilisé le gris. Comme vous l'avez vu comme toutes les couleurs que j'utilise n'est pas pur noir. J' utilise comme un champ bleuté. Cela semblait noir. Si j'utilise du noir bleuté, c'est plus pratique pour les yeux. Donc, ce sont comme de minuscules petits secrets comme beaucoup d'applications s'appliquent dans le produit. Vous pouvez colorier le colorant. Je vais partager ces fichiers avec vous. Ils seront dans votre dossier de ressources. Vous pouvez télécharger et vous pouvez jouer autour et assurez-vous que toutes les polices SSR. L' espacement, les faces de police que vous maintenez sont parfaitement alignés. La prochaine leçon que je vais vous enseigner que cette classe est tout au sujet après que vous avez appris le niveau de base, suivant est comme comment pouvons-nous le rendre plus personnel comme élément humain dans l'ensemble de l'application. 5. Tester votre conception: Nous avons donc appliqué toutes les règles de base. Maintenant, nous allons vérifier rapidement comment fonctionne la hiérarchie des polices, la couleur fonctionne sur un appareil, ou les boutons en cours sont cliquables ou non. Nous pouvons donc le faire rapidement en utilisant InVision. J' ai donc une InVision intégrée en utilisant l'application appelée Craft. Vous pouvez télécharger gratuitement. Lorsque vous téléchargez, il y aura une option appelée téléchargement de votre design. Vous avez juste besoin de sélectionner toute l'option que vous devez faire, vous devez entrer le nom. Si vous cliquez sur Publier, il y aura une lecture sonore, et c'est tout. Maintenant, tous vos dessins que vous avez faits en ce moment, les fils que vous avez faits, ils viendront sur le mobile. Vous devez toujours vérifier votre appareil. En raison de certaines personnes font des tests d'utilisateurs sur ce qu'ils pensent, mais ils sont en train de cliquer poser des questions comme, « Pourriez-vous sélectionner cette option ? Qu'est-ce que tu en penses ? » Ainsi, vous pouvez rapidement connaître tous ces détails en affichant dans l'appareil. Alors comment vous devez travailler ou vous avez trouvé des problèmes comme le temps et les couleurs sont super minuscules. Donc, ce que vous pouvez faire rapidement est, vous pouvez revenir à l'esquisse, et changer rapidement la police. Ensuite, vous savez comment utiliser 10. Donc, je veux rapidement mentionner un conseil rapide pour utiliser une police, un minimum de 14. Vous devez commencer par 14, puis 16, 18, 24, 36. Il s'agit de la hiérarchie de base de la police que vous devez utiliser. Alors je vais y aller et mettre 14 ici. Ici aussi, je vais appliquer les mêmes styles. Donc, je vais juste faire un clic droit et copier ce style que je vais coller ici. Lorsque nous faisons une icône, ne faites pas d'icône dans des formes aléatoires. Si vous voulez faire une icône, assurez-vous que la hauteur est comme 24. C' est aussi pour le style d'icône, qui fait un pointu comme 24, 48, 96. Ce sont les tailles qu'ils utilisent habituellement. Maintenant, ils utilisent une taille de police ici. Comme c'est un filaire, je ne maintiens pas cet espace avant, mais tu vas appliquer tout l'espacement que je t'ai déjà enseigné. Alors maintenant, nous avons fait tous les changements. Nous pouvons rapidement cliquer sur ce plan de travail et cliquer sur Publier. C' est ça. Encore une fois, il a eu un son. Si vous actualisez à nouveau l'écran, il est là. Maintenant, nous avons rapidement fait tous les changements. La police est assez grande, et je peux voir les icônes. Donc, c'est comme ça que vous allez constamment itérer en voyant le mobile est super important. Parce que la plupart du temps, lorsque nous commençons en tant que design, nous allons travailler sur un grand moniteur ou un ordinateur portable. Ensuite, si vous allez plus loin pour vérifier sur le mobile, parce que c'est là que les utilisateurs vont utiliser un produit. Alors maintenant, vous pouvez avoir une question que combien de fois je dois itérer. Si vous continuez à itérer, vous devez itérer tout au long de l'année. Donc, vous devez vous arrêter à un moment donné et réellement lancer le produit. Ensuite, seulement il y aura beaucoup d'utilisateurs utiliseront votre produit et donneront des avis ou des commentaires. Essayez d'itérer comme cinq fois. Ce n'est pas un nombre, mais cinq fois faire une très grande itération. Ensuite, vous devez passer à la suivante. La prochaine étape est l'étape la plus importante que je vais vous enseigner est savoir comment pouvons-nous humaniser cela. Comment pouvons-nous rendre cela plus attrayant, c'est comment vous l'avez utilisé. Plus précisément, nous itérons pour les deux pour les enfants. Alors, comment pouvons-nous personnaliser le design pour eux ? 6. Ajouter de la personnalité: Maintenant, faisons les trucs amusants. On a fait tous les trucs de base comme l'espacement. Maintenant, nous allons créer cet élément humain, et les émotions, et les sentiments dans l'application. Réfléchissons à la façon dont nous pouvons réellement penser à ces idées. Parce que la pensée est super importante, je vais vous apprendre comment vous pouvez explorer et penser ce type d'élément humain dans votre application. Donc, je vais esquisser différentes idées. Quelles sont les différentes façons dont nous pouvons recueillir ces informations autrement que dans les formulaires ? Comme, juste dans la hauteur. Donc, au début, ce que j'ai fait est, littéralement, j'ai googlé une partie de la mesure de la taille de l'enfant, l'instrument de mesure du poids. Donc j'ai eu cette inspiration ici. Il y a un petit enfant qu'ils sont debout près d'une mesure de hauteur et celui-ci montre une personne qu'ils mettent, comme vous vous souvenez dans l'ancien temps, ils mettent une balance sur votre tête pour mesurer ou votre taille dans votre maison. J' ai téléchargé un tas d'inspiration de Google. Alors ce que j'ai fait est, je viens de remue-méninges comme, ok, nous pouvons avoir un curseur, qui apparaît rapidement de haut en bas, vous pouvez glisser pour entrer la valeur, ou comme curseur gauche et droite pour donner une valeur. Puis j'ai pensé, pourquoi pouvons-nous utiliser tout l'écran pour une valeur puis je mets l'échelle sur la droite et les détails sur la gauche. Donc enfin, je dessine ce personnage est littéralement comme pris de combiné ce boulon en majors que j'ai pris, comme il y a une échelle sur la tête d'un gars et il y a des marques sur le mur. J' ai donc mis les marques sur le mur à droite et il y a un petit gamin avec une balance sur la tête. Donc, vous pouvez apporter beaucoup d'idées différentes, mais la façon dont il avait été tiré est juste de penser, quelle est la façon différente et innovante que vous pouvez montrer cette information et juste plus intéressant pour le public cible spécifique. C' est ainsi que je mesure la taille et le poids, je dirais que vous suivez le même principe. Je viens de Google quelques-unes des balances de poids que les enfants utilisent. J' ai trouvé ce fascinant vieux style de l'échelle de poids rond. Maintenant, même si c'est tellement numérique, c'est tellement cool de voir comment ça bouge. J' ai donc pris cette inspiration dans une échelle normale et ajouté une échelle de poids. Mais les enfants peuvent avoir un caractère. C' est en fait comme si vous augmentez le poids du personnage de l'enfant va grandir et comme plus petit. Enfin, pour l'écran d'accueil, j'ai fait un petit tuck tel dans ok, basé sur toutes vos données, nous avons ces recommandations pour vous. Faisons un dernier écran. C' est tout ce que vous avez pour remuer rapidement des idées et les esquisser dans un papier et les montrer aux gens. Ok, ce sont des idées différentes que j'ai et vous leur demandez de choisir quelle idée est la plus intéressante. Pour que vous puissiez prendre rapidement des décisions au lieu de tout faire sur un écran parce que cela prend du temps lorsque vous faites quelque chose dans un croquis. Donc, j'ai toujours parlé de croquis autre que de travailler sur un ordinateur portable parce que lorsque vous esquissez votre esprit n'est pas dans un monde numérique, vous êtes complètement hors du monde numérique. Lorsque vous esquissez en utilisant votre main, la façon dont le cerveau fonctionne est complètement différente. Parce que lorsque vous êtes sur un ordinateur, vous essayez d'obtenir beaucoup d'inspiration. Oh je peux utiliser cette application au lieu de [inaudible] mais quand vous esquissez, tout est de votre cerveau. Donc tu es super concentré. Je veux donner un conseil que lorsque vous esquissez, tout simplement personne ne se soucie de ce qu'il ressemble visuellement. Vous êtes juste en train de cartographier l'idée. Alors esquissez rapidement tout ce qui vous vient à l'esprit et compréhension de vous ou des concepteurs avec lesquels vous travaillez. Donc, après avoir tout esquissé, nous allons simplement transformer toutes les idées que nous avons en un sketch-up. J' organise les écrans en fonction de chaque étape. Si vous voulez faire une promenade, vous devez vous assurer que toutes vos planches impaires sont à un état différent. Par exemple, je sais sans animation ce que je vais faire. Par exemple, si je clique sur mâle ici, il sera ici. Ensuite, si je clique sur suivant, il y aura de la hauteur et il y aura cette barre. Si je fais glisser cette barre, ça sera 169. Si je clique sur suivant, il va demander du poids, et si je change le poids, la forme de la personne va changer. Donc, vous devez vous assurer que vous organisez toutes vos animations dans un tableau différent impair afin qu'il soit facile de faire le pas à pas. Sinon, ce sera vraiment difficile pour toi de faire une promenade à travers. Vous pouvez tout faire dans un seul écran bien que ce soit super dur. Par exemple, cela aussi je sais que mon animation va fonctionner de cette façon. Je vais glisser vers le bas et il va être cliquer sur le joueur et encore une fois il va jouer toute l'activité. Donc, chaque chose devait être une couche spécifique distincte afin que ce soit super simple pour vous de le faire en principe. Maintenant, tous les écrans sont prêts, et je partagerai le fichier d'esquisse également dans le dossier de ressources afin que vous puissiez télécharger, et à partir de cela, vous pouvez continuer à me suivre sur la façon dont j'importe toute la conception en principe et crée réellement le nous en avons parlé. Comment pouvez-vous créer ce pas à pas qui est plus intéressant à partager ? 7. Créer des transitions simples: Maintenant, regardons comment pouvons-nous importer ce design dans Principe et commencer à faire de l'animation. D' abord, je vais juste aimer avoir un numéro de plan de travail, ce sera super utile. J' utilise donc un plug-in rapide appelé Sketch Number Artboard. Nous y allons et cliquez sur les lignes et avons un stile de nombre de un à trois. D' accord. Ensuite, vous avez comme 11 écrans en ce moment. Donc, ce serait super facile lorsque vous importez tout dans Principe afin que vous sachiez à quel écran vous vous connectez ensuite. Ouvrons le Principe. J' utilise principalement Principe, c'est un logiciel qui vous aide à créer un prototype très rapidement. Un avantage de l'utilisation du principe est que vous pouvez importer le fichier Principal dans iPhone afin que vous puissiez facilement faire des tests. C' est comme un vrai labo lorsque vous exportez un fichier Principal. Donc maintenant, nous sommes en principe, la chose que nous devons faire est juste de cliquer sur l'importation et vous devez sélectionner le document. C' est le seul document que nous avons sélectionné en ce moment. Donc maintenant j'utilise sketch et je vais sélectionner 3x pour que ma qualité de mon design soit vraiment élevée. Ensuite, je vais cliquer sur la page Importer. Donc, il va rendre toute la page que vous concevez dans une esquisse dans le Principe. Boum. Tous les écrans sont ici écrire maintenant. Donc, après avoir importé au principe, l'étape de base que vous devez faire et l'astuce beaucoup de bigness ou beaucoup de gens qui n'utilisent pas l'animation ils ne le savent pas, vous avez juste besoin de sélectionner le plan de travail, vous pouvez sélectionner ici ou vous pouvez même sélectionner ici, ne sélectionnez pas de rectangle. Par exemple, si je clique ici, c'est sélectionner un rectangle. Vous devez sélectionner le plan de travail, et vous allez cliquer ici et cliquer sur Onglet. Vous allez le faire à plusieurs reprises pour tous les plans de travail. Alors maintenant, je me suis connecté, si vous voyez en haut, c'est une chronologie. Le compte sur le dessus il y aura une petite fenêtre venir en dessous, c'est ce qu'on appelle la chronologie. Maintenant, nous n'allons pas toucher à ça, mais vous pouvez voir toutes les flèches sont connectées. Cela signifie que si vous cliquez dessus, il ira à ici. Si vous cliquez sur ce bouton, il passera à la suivante. On vient de faire un prototype de click-through. J' ai juste besoin de tester que si vous cliquez ici, ça va ici. Il va ici et je clique juste. Je clique juste et les animations se produisent automatiquement. Donc, le problème ici en ce moment est Principe est basé sur les couches. Par exemple, si je clique ici, cette ronde noire va là-bas parce que ces deux ont le même nom. Donc, c'est comme l'animation automatique mais le seul problème ici est parfois que les noms ne sont pas correctement mentionnés. Donc les choses que nous ne voulons pas, ça commence à animer, certaines choses que nous ne voulons même pas comme par exemple celle-ci. C' est de l'animation au hasard. C' est là que vient le truc. Vous devez vous assurer que rien ne s'anime au hasard. Donc l'astuce est que vous allez copier toute cette couche. Vous devez aller au deuxième plan de travail et couper tout, commande X et commande V, et commande X et commande V. Ce qu'il va réellement faire, c'est qu'il va renommer tous les noms, ramasser automatiquement couper et coller. Donc, par exemple, si je clique maintenant, il n'y a pas d'animation car il n'y a pas de nom commun car Principe l'a renommé lorsque vous coupez et collez. Essayons ici. Tu vois, il y a une animation qui se passe. C' est parce que peut-être la robe de cette fille est semblable au nom de la robe des gars. Tu vois, elle a un chemin trois, chemin trois, et il a le chemin trois comme une robe. Donc, ce que vous allez littéralement faire est, encore une fois, vous allez couper toute la couche et coller ici et couper et coller ici. Donc maintenant, si vous cliquez à travers, il n'y a pas d'animation qui se passe. Parfois, nous pensons comme, oh, pourquoi ne pas utiliser juste l'animation automatique ? Mais l'animation automatique que vous ne pouvez pas contrôler. Comme vous l'avez vu précédemment, l'animation automatique se déplace aléatoirement. Donc, lorsque vous faites l'animation automatique, vous ne pouvez pas le contrôler car vous devez contrôler lequel animer, ce qui ne peut pas être animé. Alors seulement vous pouvez créer votre design, parce que la mission ne va pas faire de design pour vous, vous allez faire l'animation que vous voulez. Donc vite il suffit de copier coller tous ces trucs pour s'assurer que rien n'est auto-animé. Donc je vais vous apprendre ce que nous pouvons faire d'autres choses pour le rendre vraiment amusant, pas seulement comme si je clique ici, ça ira là-bas. Donc, pour le rendre plus lisse, ce que je vais faire rapidement, c'est que je vais copier coller ces groupes. J' ai donc choisi ces deux groupes. Je vais le copier et le coller dans un plan de travail précédent, et je vais le déplacer un peu vers la droite. Donc, vous pouvez le faire en utilisant cet outil appelé X. Lorsque vous passez le curseur sur le x, il y aura comme une flèche. Donc, vous avez juste besoin d'aimer glisser ici. Donc techniquement, ce que nous voulons dire, c'est comme si cette illustration allait venir de gauche à droite. Parce que dans cet écran, il est sur la droite et l'écran précédent vous mettez l'illustration sur la gauche. Donc je vais juste montrer à la démo ce qui se passe. Si je clique ici, voir, il vient de gauche à droite parce que vous aviez l'illustration à gauche. Si vous déplacez l'illustration vers la droite, elle viendra de droite. Alors c'est tout. Si vous voulez comme, oh, je veux de bas, vous pouvez utiliser y. ne le changez pas manuellement, ne bougez pas manuellement. Vous devez vous assurer que vous utilisez y, en utilisant ces flèches, parce que c'est super parfait. Alors j'ai déménagé de bas. Maintenant, je vais le tester. Tu vois, ça vient de bas. Donc, ce sont vraiment basiques, si vous savez que vous pouvez faire n'importe quoi. Donc je vais le faire littéralement de bas, mais pas si bas. Mais il bloque toujours mon écran, donc ce que vous pouvez faire est en fait simplement descendre sous cette couche afin qu'il n'ait pas le symbole ici. Pour même le rendre vraiment plus lisse, ce que l'astuce est les chiffres. C' est donc ce qu'on appelle la chronologie. Lorsque vous cliquez sur cette flèche, c'est comme une chronologie, elle affiche zéro seconde, une seconde, deux secondes . Donc, cette animation se passe dans, si nous cliquons dessus, 0.3 millisecondes. Donc ça arrive trop vite. Pour le rendre plus lisse, l'astuce est que vous devez cliquer sur cette flèche. C' est la flèche. J'ai déjà beaucoup d'animation pour moi, j'ai une animation par défaut appelée 140. Pour cette classe, nous pouvons créer une nouvelle animation. Vous devez donc cliquer sur le printemps. Donc, vous pouvez voir le script, printemps est comme trop de charme, si vous voulez linéaire, Easy In, il y a tellement d'options par défaut. Mais je vais t'apprendre mon secret sur comment on peut le rendre plus lisse. Donc, afin de réduire la tension afin qu'il ressent cette forme, je fais habituellement 100 ou 120. Donc, c'est super important, si vous ne le faites pas, c' est ce qui rend cette dernière touche haut de gamme de la rendre super lisse. En outre, la chose la plus importante que vous devriez toujours faire graphique d'animation. Si vous faites un prototype, tous doivent ressentir la même animation. On ne peut pas être comme si on était super printemps, on était super lisse. Vous devez vous assurer que toutes les animations sont identiques. Donc tu vas appliquer la même chose à ici, 100. Si vous allez utiliser le même type, vous pouvez réellement ajouter ceci. Si vous cliquez sur plus vous pouvez ajouter Skillshare. J' ai donc ajouté un calque donc je n'ai pas besoin de changer encore et encore ce graphique, il est automatiquement modifié. Donc quand je clique, tu vois, c'est super lisse. Ce sont donc les étapes d'animation de base que vous devez faire. Donc je vais juste faire venir ce gars de droite à gauche parce que le mâle est de droite à gauche. Donc je vais coller ici, et je vais bouger un peu ici. Donc, comme vous le voyez, je ne touche pas les numéros manuellement, vous avez juste besoin d'un jeu avec la flèche. Je veux que l'opacité, l' opacité signifie l'isolant soit zéro. Tu vois ? Je veux juste que l'opacité soit super zéro. Puis quand il va ici, il devient automatiquement 100. Donc, vous n'avez pas besoin de vous soucier de ce qui se passera ici, vous avez juste besoin de vous soucier de l'opacité que vous voulez. J' ai donc atteint zéro et quand je clique sur mâle, on dirait que ça vient de zéro à 100. Donc maintenant, si j'ai choisi le genre, ça marche parfaitement. Comme nous nous attendions, super lisse et se sent comme une véritable application. Maintenant, ce que nous allons faire est que nous avons sélectionné ce mâle et nous pouvons le nommer comme un homme parce que nous savons que nous allons utiliser cette personne à travers l'application. Donc on peut nommer ça comme un homme et je vais nommer un homme pour tous les plans de travail. Pourquoi c'est super important, c'est qu'il s'anime automatiquement. Maintenant, c'est l'animation automatique va fonctionner comme vous le vouliez parce que vous définissez qu'il est mâle, le nom de la chose. Alors maintenant, vous voyez la magie. Une fois que vous avez terminé le sexe, vous allez cliquer sur suivant et voir le gars s'animer automatiquement parce que vous avez nommé le calque même. Ceci est masculin et l'écran suivant ce nom de groupe est également masculin. Si vous cliquez dessus, voyez, ce n'est pas lisse mais vous pouvez voir la différence. C' est en fait que cette personne déménage là, là, là. Tu vois ? C'est là que automatique est bon parce que nous l'avons nommé correctement, cela ne se produit pas automatiquement. 8. Personnaliser les animations: Donc, maintenant, nous savons quel caractère nous devons maintenir à travers différents plans de travail. Donc maintenant ce que je veux faire est, nous sélectionnons le sexe, maintenant nous allons sélectionner une taille. Hauteur, ce que je vais sélectionner, quand je clique ici, il est clair pour le gars cheveux de pousser. Grandir signifie que les cheveux grandissent un peu plus grand. Donc, ce qui se passe ici, c'est quand je clique ici, la personne est dans un alignement différent de sorte qu'elle se déplace de gauche à droite, ce n'est pas lisse. Donc ce que je vais faire, c'est que je vais supprimer ici. Je vais copier cette personne, je vais coller le mâle ici. Donc vous voyez, si je passe de 65 à 69 ans, rien ne change. Mais nous allons le faire manuellement. C' est là que je vais vous apprendre l'option de la balance. L' échelle n'est rien d'autre que le développement faire comme 1.1 et assurez-vous de sélectionner les deux couches et aligné sur les fonds, pas aligné sur le fond. Assurez-vous qu'ils sont de la même hauteur afin qu'ils ne bougent pas autant. Donc maintenant, si je glisse vers 699, voir, il y a une transition en douceur. Nous finissons la hauteur, maintenant nous allons faire le poids. Maintenant, c'est une partie un peu complexe parce que le poids est dans un style circulaire, ce n'est pas comme linéaire, linéaire est assez facile. Ce que nous allons faire, c'est que nous devons le faire manuellement. C' est un peu ennuyeux, mais vous devez le faire manuellement. Par exemple 160, vous devez vous assurer que ce 160, ici aussi 160. Voir dans le précédent, il a changé à 162 parce que nous l'avons renommé. Maintenant, nous allons nous assurer que tous les noms sont identiques. Supprimez ce numéro. Pourquoi on a le même numéro ? J' essaie juste de te dire que si tu as un même numéro, c'est vraiment animer. Je vais vous montrer l'exemple. Si cliquez ici, ce 160 est en fait en train de passer d'ici à ici. Je vois ici que quelque chose bouge automatiquement, la tête d'un homme. Donc, chaque fois que ça arrive, il suffit de copier cet homme parce que cet homme est le seul problème. Je vais couper, coller, couper, coller. Donc maintenant je renomme le nom correctement, par exemple, 140. Je vais le faire 140. Je vais donc le renommer rapidement pour m'assurer que les deux ont le même nom, par exemple. Deux cents est en fait 200 dans le plan de travail suivant afin qu'il anime la propriété. Mais pour certains chiffres, nous introduisons de nouveaux. Par exemple, lorsque vous faites défiler, nous introduisons 210 et 220. Donc, ce que nous allons faire, c'est que nous allons copier ce calque et coller ici, et le déplacer vers le bas pour nous assurer qu'il continue le tour. Alors maintenant tout est parfait. Si vous faites glisser, on dirait qu'il glisse autour. Si nous entrons tout le poids, la taille, et ce que nous voulons être un enfant, pas nous. Laissez l'enfant entrer tous les détails et l'enfant veut enfin au moins l'exercice de récompense qu'ils peuvent faire. Donc, au lieu de atterrir directement à un écran d'accueil, faites-le, vous pouvez faire quelque chose d'intéressant. Je vais donc ajouter un nouveau plan de travail entre les deux. Pour afficher rapidement, vous pouvez cliquer sur insérer et je vais insérer le plan de travail. Faites rapidement une animation rapide, je vais faire une animation ici. Donc je vais copier tout ça au centre. Donc, il devient rectangle parce que vous deviez ajuster le rayon. C'est une autre chose. Radius est la chose que vous utilisez pour faire cela. J' ai donc ajouté cette couche en plus pour montrer que nous sommes en train de calculer un taux. Montrez un peu d'engagement. Donc ce que je vais faire ici, c'est que je veux une autre couche ici, comme une barre de chargement. Alors, comment peux-tu faire ça ? Que parfois on a une question. On fait quelque chose et entre les deux, on a une nouvelle idée et on dit : « Comment puis-je ajouter ça ? » Donc c'est un truc que nous pouvons faire facilement. Donc ce que je vais faire, c'est comme si j'allais ici. Par exemple, je vais faire un chargement comme une barre. Ainsi, vous pouvez dessiner un cercle. Donc, si vous connaissez déjà le sketch ou si vous êtes comme débutant, vous pouvez apprendre beaucoup de ce petit truc comme comment pouvons-nous faire une barre de chargement en ligne. Sur Skillshare, il y a bien sûr beaucoup où ils vous apprennent à fabriquer les formes. Je ne vais pas le faire maintenant, mais je dis rapidement que si vous utilisez des ciseaux, vous pouvez couper cette forme pour ressembler à une barre de chargement. Je vais augmenter la largeur. Jusqu' à ce que vous ayez une forme lisse, je vais ajouter ce coin arrondi. Je vais avoir une couleur blanche. Par exemple, vous vous demandez peut-être ce qui se passe réellement ? Donc, nous entrons toutes les données et je vais cliquer sur suivant. Ça va être cet écran. Donc maintenant, nous rompons cette connexion et nous connectons cet écran. Pensez comme les plans de travail, pensez que l'animation principale est simple, comme si vous organisez un tas de cartes dans la table et que vous connectez simplement différentes cartes. De cette carte, allez ici. C' est ce que j'ai comparé à la réalisation de films, c'est comme un story-board. Mais si vous connectez un storyboard, il devient un film. C' est le secret des principes. Maintenant, je clique ici, il est venu et le chargement est rien ne se passe. C' est là que ce principe est super intelligent. C' est comme si vous pouviez créer des composants. Les composants sont appelés comme la création d'animation dans l'animation. Donc ce que cela signifie est comme une barre de chargement, je veux que ce soit comme une rotation. Donc, je sélectionne cette couche, crée un composant, vous le trouvez en haut. Cliquez là et je vais dupliquer le plan de travail. Vous allez donc sélectionner le plan de travail et cliquer sur la commande D ou comme copier, coller pour dupliquer le plan de travail. Donc c'est la barre de chargement. Quand je clique sur ce plan de travail, ce côté pour aller ici, c'est tout. Mais il n'y a rien d'animation qui se passe parce que nous n'avons rien fait. Ce que nous allons faire, c'est quand je clique dessus, ça va aller ici. Aussi, ça va changer l'angle. Il y a une autre fonctionnalité ici. Donc je vous ai déjà appris beaucoup de choses ; X Y, changer l'opacité, augmenter l'échelle, le rayon. La dernière chose, c'est super sympa, c'est l'angle. Donc je vais faire comme un angle de 360, quelque chose comme ça. Quand je clique dessus, vous verrez qu'il y a comme une rotation rapide qui se passe. Au lieu de 360, si la grille 3,600, elle va tourner en continu. Tu vois, c'est une rotation continue, mais c'est super rapide. Donc, à ce moment-là, ce que vous pouvez faire est comme, comme je l'ai dit, si vous voulez changer la durée. C'est comme le montage de films. Si vous allez ici et qu'il y a une chronologie et vous pouvez étendre la chronologie. Je suis juste en train de zoomer ici en utilisant comme une barre tactile Mac. Si vous épinglez le zoom, cette fois va se développer et se contracter. Dans le temps où je vais m'ajuster à trois secondes. Donc, ce sera un peu plus lent. Donc cette animation va se produire plus lentement, vous voyez ? Un peu plus lent. Pour qu'on puisse le commander. Donc, ce qui est la chose, c'est que cette animation complète est une animation séparée à l'intérieur du plan de travail. Lorsque je clique ici, il devrait s'animer car il ne s'anime pas automatiquement. Voir, le problème est que la rotation se produit seulement quand on clique parce que j'ai fait tapoter. Donc, ce que vous allez faire est au lieu de taper, vous allez supprimer cette flèche et cliquer sur ce plan de travail. Il y a une fonction appelée auto. Il commence automatiquement à tourner, c'est tout. Donc, quand je clique ici, et quand je clique à nouveau sur cela va venir. Donc, si je passe à la recommandation, recommandation, je veux être un peu plus dramatique quand elle arrive ou quand elle est faite. Donc, ce que je vais faire en fait, c'est que je vais sélectionner tout le groupe pour que je puisse l'animer. Chaque fois que vous voulez tout faire pour bouger, vous devez le regrouper. Chose triste quand je tape ici, ceux-ci doivent être au lieu de venir directement, je veux être comme à gauche et à droite comme nous l'avons fait avant. Je veux être comme venir d'ici, tu vois ? Je veux que la carte soit comme un par un au lieu de tout venir en même temps. C' est comme ça que fonctionne la physique mondiale. Comme si tu lançais trois balles. Donc, ce sera comme aller un par un en fonction de la vitesse. Donc vous allez utiliser la physique que vous avez appris dans une école, vous êtes maintenant utilisé. Donc vous allez utiliser ces choses ici. Alors, quelle première chose vient en premier ? Donc la première chose arrive en premier. Deuxième chose que je veux être un peu de retard dans le temps. Alors je vais juste bouger. Cette fois, c'est en fait comme un retard. Cela va commencer en premier, ça va commencer en deuxième. Celui vert, ce gars ici va être perdu. Il se passe quelque chose de plus dont on n'a pas besoin, tu vois ? Ce groupe, on ne sait même pas qui c'est. Donc, nous allons simplement cliquer dessus et supprimer l'animation. Cliquez sur. Voir la douceur de la chose. Donc, vous allez juste venir avec le prototype super rapidement et cliquez sur mâle, suivant, la taille, et le poids et décider du poids et il est en train de charger, et il donne une autre cellule. C'est fait. 9. Ajouter des détails surprenants: Alors, comment pouvons-nous le rendre plus intéressant en utilisant des formes, des couleurs ? C' est pourquoi je viens avec ce petit concept de comment pouvons-nous commencer l'activité dans des trucs comme le bouton de jeu ennuyeux ? C' est juste qu'il est fonctionnellement bon, mais ce n'est pas si intéressant. Donc je vais ajouter ce moment aha comme ajouter une petite micro réaction ici. Alors, comment peux-tu faire ça ? Sélectionnez un calque spécifique par exemple, la flèche. Je vais montrer, balayez vers le bas. Donc, vous sélectionnez les flèches spécifiques et cliquez sur, Créer un composant. Comme je l'ai fait avant, vous pouvez en fait dupliquer cette flèche. Vous allez déplacer cette flèche un peu vers le bas. Parce que comme je l'ai déjà dit, tu bouges quelque chose. De cette flèche à cet écran, la flèche va se déplacer vers le bas. Donc la partie secrète est ce que nous allons faire. Ce qui est drôle, c'est que nous allons dire, de cette flèche aller ici automatiquement. De celui-ci, nous allons dire, revenez automatiquement. Je peux vous montrer ici ces petits détails. Ces petits détails, si vous commencez à le remarquer, vous pouvez remarquer dans toutes les applications, comme un Lift ou Uber ou Google, G-mail chaque logiciel a cette minuscule, petite chose qui attire notre attention, qu'ils veulent vous pour donner le focus. Donc ce que je vais faire est, si je veux commencer par l'activité donc je vais juste glisser vers le bas cette carte. Donc, au départ, nous venons de le faire appuyer pour faire un test. Mais après cela, il y a tellement de fonctionnalités intéressantes sont là. Une chose intéressante que j'aime vraiment est Drag Begin. Ainsi, la fonction Drag Begin est, lorsque vous faites glisser vers le bas. Donc, je vais dire un Drag Commence, et le Drag Commence de ce spécifique comme une carte. Faire glisser signifie, faire glisser et cette carte devait être plus petite, lorsque le glissement commence. Alors c'est ce que j'ai dit, pendant que tu parles à quelqu'un que tu dis et qu'il devait être plus petit. Vous pouvez voir comme quand j'ai besoin d'une petite interaction sur un seul écran, ça s'appelle une micro-interaction. Ces choses que nous créons, nous ne créons pas entre les écrans. Nous créons à l'intérieur de l'écran. Comme cette flèche, cette flèche est à l'intérieur de l'écran où ils sont est une petite chose. Maintenant ce que je vais faire, c'est, à l'intérieur de l'écran, je veux que ce soit plus grand et plus grand. Donc, je sélectionne ce groupe, groupe tout, Créer un composant et je vais à Auto. Comme je l'ai déjà dit, je vais réduire et augmenter. Comme je l'ai dit, de plus grande chose à plus petite chose et plus petite à plus grande. Donc, ce sera juste comme aller et venir voir. Pour donner une chose plus urgente. C' est dire balayez vers le bas pour commencer. Donc je vais glisser vers le bas. Ça commence à clignoter, ça me donne une direction de vous devez commencer tout de suite. Donc, quand j'ai fait ça, rien ne se passe parce que nous ne connectons pas l'écran suivant. Mais celui-ci a parfaitement fonctionné. Je clique, celui-ci fonctionne parfaitement. Si vous ne suivez pas ces astuces et astuces, cela prendra vraiment beaucoup de temps. Comme nous avons suivi tout le truc et nous savons, j'ai passé beaucoup d'années à comprendre toutes ces erreurs. Je t'ai tout dit, donc c'est super facile pour toi. Une fois que vous commencez à jouer avec, c'est super facile. Maintenant, nous pouvons rapidement donner une photo de l'ensemble de la marche à travers super rapidement. Je vais le faire, Start. Ensuite, je vais sélectionner un sexe masculin, puis la taille, puis je vais sélectionner le poids 180 lbs. À côté du poids, il est comme 160, et il est de chargement et de me donner un exercice différent. Maintenant, si je balaie vers le bas et que l'activité a déjà commencé et que je veux la fermer, c'est tout. Vous aviez déjà un concept et vous avez fait votre concept vraiment magnifiquement, fait sur un temps très court. Maintenant, nous avons créé toute la vidéo de l'application. L' étape suivante est la chose la plus importante. Il s'agit de partager votre design et d'obtenir de vrais commentaires d'un vrai utilisateur. 10. Partagez votre design d'application: Donc, finalement, on l'a fait. Nous avons fait une application que nous avions une idée et juste dans notre tête, nous venons de faire des vidéos de mouvement en direct. Donc maintenant est la partie la plus importante. Vous allez partager votre design avec les gens et super ouvert sur. Rétroaction, recevoir des commentaires est super important. Le design ne fait pas seulement une itération finale, cela va avoir comme 10 itérations. Donc vous allez être comme super ouvert et poser des questions comme tant de façons, comme pourquoi ils aiment, ce qu'ils ressentent. Vous allez poser beaucoup de questions comme sentiment, et vous allez juste les montrer, au lieu de leur dire, eh bien, comment le beau design ressemble. Vous devez formuler une question de la façon dont ils peuvent vous donner beaucoup de critiques, et un autre deuxième point qui est super important est que, nous avons fait beaucoup d'hypothèses pendant que nous faisons du design. Par exemple, j'ai dit, les enfants adorent vraiment voir l'illustration, les enfants adorent vraiment voir ce type d'échelle. Vous devez traquer toute l'hypothèse, quelle est l'hypothèse que vous avez faite pour vous-même. Ensuite, pendant que vous testez votre produit, vous devez vous assurer que toutes les hypothèses sont correctes ou erronées. Donc tu vas apprendre continuellement, ok, j'ai fait cette hypothèse, mais les enfants n'aiment même pas ça. Ils n'aiment pas du tout l'illustration, ils veulent juste une liste déroulante. Donc, avoir les pensées ouvertes qu'il est fait de vous en tant que designer vous rendrait meilleur. Au lieu de simplement pousser, ce design que j'ai fait, vous devez le développer. Encore une fois, vous dire que vous aimez être ouvert aux commentaires est super important si vous êtes un concepteur. Si vous n'êtes pas ouvert aux commentaires, et si quelqu'un dit que ce design est mauvais, vous voulez l'accepter et demander comme pourquoi vous pensez que c'est mauvais, comme quelle chose spécifique est mauvaise ? Donc, si vous posez tant de questions, il y aura comme signaler des choses. Donc, ne pas, cependant, regarder comme aléatoire comme des commentaires vagues. Ces couleurs ont l'air sympa. Comme si tu devais demander pourquoi ça a l'air sympa. La bonne chose à propos du principe est comme, une fois que nous avons fait l'animation, nous pouvons réellement l'enregistrer dans l'ordinateur lui-même. Donc, il y a un bouton d'enregistrement ici, il y a comme un petit bouton vidéo et vous cliquez dessus, et je vais être comme cliquer et je vais sélectionner Homme, puis ensuite et je vais sélectionner la hauteur, suivant et je vais pour sélectionner le poids, et je vais sélectionner le poids désiré que je veux. Ensuite, et il se charge continuellement, et ça vous donne le résultat et je vais glisser vers le bas et commencer. Une fois l'activité terminée, j'ai fini. Donc, c'est littéralement, la chose cool à ce sujet comme ils se portent dans la vidéo, sorte que vous pouvez partager n'importe où, signer la fenêtre, mettre un nom. Je vais cliquer sur Enregistrer. En attendant, il s'agit d'exporter, je vais vous montrer dans Photoshop, que pendant que vous présentez en ligne, vous devez vous assurer à quoi ressemblera votre design dans différents appareils. Si vous concevez pour iPhone X, je vais montrer comme une maquette mobile rapide, où vous pouvez mettre votre vidéo à l'intérieur. Donc, si vous avez Adobe CC, vous pouvez mettre une vidéo dans la pile Photoshop. Donc, j'ai déjà fait une maquette, vous pouvez télécharger en ligne, trouver une maquette. Alors ce que vous allez faire, c'est que vous allez cliquer sur Command-O, c'est comme ouvrir un nouveau fichier, et je vais m'ouvrir comme une vidéo que nous avons faite en ce moment. Ensuite, comme super simple, vous allez simplement cliquer et faire glisser ici comme ceci, et votre vidéo est déjà dans. Dans Photoshop, si vous voulez réduire la vidéo, c'est super grand, et je vais rapidement cliquer sur Commande-T pour la transformer et je vais la réduire, et je vais m'aligner sur la taille du mobile. Donc je suis aligné correctement, donc tout est parfait, la vidéo est parfaitement alignée, et j'ai un calque que vous pouvez masquer à la forme de l'iPhone, comme une encoche. Donc, je fais un clic droit sur la vidéo. Vous devez donc vous dissocier d'abord parce que vous ne pouvez pas mettre le groupe. Alors je vais me dégrouper. Maj-Commande-G pour le dégrouper, sorte que la vidéo deviendra comme un calque, si vous pouvez faire glisser et voir les vidéos en cours d'exécution voir. Maintenant, ce que vous allez faire est de faire un clic droit dessus, Créer un masque d'écrêtage, c'est tout. Voyez-le, c'est comme un vrai mobile, comme vos vidéos dans un vrai mobile. Comme vous voyez les vidéos trop longues, tous les calques ci-dessous vous devez vous assurer qu'il correspond également à la longueur de la vidéo. Donc j'ai tout jumelé, vous voyez que tout fonctionne parfaitement, la vidéo est en cours d'exécution, vous avez terminé, et maintenant vous allez cliquer sur ces trois points. Si vous cliquez sur Render Video, il va rendre la vidéo. J' ai déjà défini le Skillshare et mis Skillshare avec maquette. Donc, c'est vraiment cool que vous puissiez également télécharger votre MP4 dans comme Skillshare. Donc, si vous suivez ce que je viens de dire en ce moment, vous pouvez mettre sur votre propre maquette ou vous pouvez sélectionner vos propres appareils, et juste mettre à l'intérieur et télécharger sur les ressources Skillshare. La deuxième chose que je veux partager, c'est comme partager des idées avec les clients. Donc celle-là, c'est comme une démo, comme une diapositive que j'ai faite, et je vais montrer le prototype qu'on a fait en ce moment. Le truc cool à propos de Keynote est que vous avez juste besoin d'aller là-bas et de copier cette vidéo, il suffit de copier, et d'aller à Keynote et juste de la coller, et juste de redimensionner un peu. Une autre chose secrète que j'avais appris récemment est que si nous cliquons sur la liste d'objets, va montrer comme un calque, comme un croquis, et vous allez faire glisser cette vidéo vers le bas. Je vais joindre ce fichier Keynote afin que vous puissiez l'utiliser, comme le mobile ci-dessus, j'ai c'est comme une maquette. Donc tu peux utiliser cette maquette. Donc, la façon dont vous devez présenter avec des clients ou n'importe lequel est que je vais cliquer sur le film de démarrage automatique. Donc, quand vous présentez avec un client, vous pouvez juste dire, « Oh, c' est une vidéo que j'ai faite », vous devez dire : « Eh bien, quel est le problème que nous essayons de résoudre ? Comment pouvons-nous encourager les enfants et les adolescents à s' inscrire à l'application de fitness qu'ils voient pour la première fois ? » C' est donc le problème que nous avons. Nous pouvons le faire en utilisant trois principe de conception. Il peut être mignon, amusant et excitant. Ensuite, vous allez montrer comme, oh, c' est le concept de la version 1 que j'ai, le sondage, nous avons comme une jolie illustration, et puis vous allez montrer. Il s'agit de la version 2, et c'est la version finale. Cette version que nous recherchons avec autant d'utilisateurs, ils l'aiment tous, et nous avons préféré cette version. C' est ainsi que nous allons présenter votre travail, lorsque vous parlez à des clients, lorsque vous commencez à vous inscrire en tant que débutant. Le troisième a comme, maintenant vous êtes en train de penser que vous travaillez dans une entreprise comme un rôle à temps plein. troisième est comme comment vous allez communiquer avec les développeurs sur prototype que vous avez fait et simplement leur demander quelles sont les contraintes techniques qu'ils ont. Combien de temps ce type d'interaction va prendre, et aussi vous pouvez leur demander de tester, parce que les développeurs sont comme ils sont différents concepteurs, mais vous pouvez demander leurs commentaires de ce qu'ils pensent. Le principal est super puissant dans ce domaine. Donc, vous avez juste besoin d'aller au fichier principal et juste un clic droit dessus, et si nous cliquons sur Partager, Airdrop, il montre automatiquement mon mobile, et dans mon mobile, j'ai déjà une application principale que j'ai téléchargé à partir de l'App Store. Donc maintenant, je vais cliquer dessus, et il envoie automatiquement immédiatement j'ouvre mon prototype dans mon téléphone, et cela ressemble exactement à l'application. Personne ne peut différencier ceci est une application ou c'est comme un prototype. Donc maintenant ce qu'on va faire, c'est donner ce prototype à mon ingénieur, il va juste cliquer sur ce que je clique ici. Par exemple, ici je vais lui demander d'aimer, vous allez remplir vos détails de profil. Donc je vais juste aimer jeter une question ouverte, et il va juste cliquer où il veut cliquer. Vous avez juste besoin de regarder silencieusement ce qui se passe. Vous allez leur demander de dire continuellement ce qu'ils pensent dans leur esprit, comme  : « Oh, je pensais que ça va être là, mais ça se comporte comme ça. » Après avoir aimé itérer sur tant de choses, vous savez maintenant, comme le rythme que vous avez créé, la musique que vous avez créée, et vous pouvez sentir la différence de la façon dont vous faites la différence dans la vie des gens, et les rendre heureux, rendre n'importe quel processus transparent pour tout le monde à utiliser. Évidemment, ce sera une expérience différente, puisque c'est une application pour enfants, nous sommes allés pour plus d'illustration façon, si c'est Centre Price hub, nous allons essayer quelque chose de différent, mais vous allez toujours vous donner un touche personnelle. C' est super important. Si vous pouvez vraiment suivre la façon dont je vous enseigne, vous trouvez que vous pouvez le faire en utilisant vos propres idées. 11. Réflexions finales: Félicitations, a finalement fait après l'appris à venir avec une idée, comment faire votre idée comme un cadre métallique, comment faire un clairement unique visuellement. Nous avons également appris à ajouter cette touche personnelle et émotionnelle à l'application. Plus important encore, vous apprendrez à obtenir des commentaires des gens et à continuer à les itérer. J' espère que vous avez appris beaucoup de choses et beaucoup de nouvelles choses grâce à cette série de vidéos, je crois que vous allez continuer à expérimenter et partager beaucoup de nouvelles idées folles et innovantes à travers le monde qui regardent cette vidéo. N' oubliez pas de poster tous vos designs, et comme tous les designs que vous faites dans une galerie de projets. Merci encore d'avoir suivi ce cours. Je suis super excité et curieux de voir ce que vous allez faire. 12. Découvrez d'autres cours sur Skillshare: