Mobile Apps designen: Einfache Interaktionen und Animationen für jede App

1. Einführung: Wenn Sie etwas Neues in Ihrem Leben innovieren wollen, sollte es das nehmen. Ich bin Johny Vino. Ich bin Interaction Designer, Motion Designer und Prototype und Visual Designer. Oft sind meine Entwürfe unkonventionell, neu und voll spezialisiert auf humanisiertes Design. Heute werden wir lernen, wie wir die Idee in Ihrem Kopf zu tatsächlichen Live-mobilen Prototyp zu schaffen , der mit vielen Emotionen, Persönlichkeit und einer einzigartigen Identität im Design gefüllt ist . Um diese Klasse zu nehmen, müssen Sie jetzt nicht wirklich UX/UI-Designer sein. Sie können jeder wie ein Grafikdesigner, Visual Designer oder Ingenieure sein, oder Sie haben einfach eine Idee im Kopf und Sie möchten diese Idee zu einem Live-Produkt machen. Heute werde ich eine App für Teenager erstellen. Ich werde Ihnen zeigen, wie es derzeit gestaltet ist und wie wir es verbessern können. Wir werden zeigen, wie wir das visuelle Design der App verbessern werden. Drittens werden wir tatsächlich Prototypen mit Prinzipien verwenden, um sicherzustellen, wie wir dieses Mikro-Interaktionselement und Persönlichkeit der App hinzufügen können. Sie können folgen, indem Sie eine Skizzendatei in diesem Entwurfskurs herunterladen. Sie können auch all das Denken anwenden, das ich lehren werde, und diese Prinzipien auch in Ihren eigenen Ideen wie Projekt anwenden. Ich kam zum Design, weil es schön aussieht und ich etwas Schönes mache, aber ich möchte im Design bleiben, weil ich große Veränderungen in der Welt vornehmen kann. Interaktion ist nur ein wirklich cooles Medium. Ich freue mich, zu sehen, was du dir einfällt. Lasst uns loslegen. 2. Humanisiertes App-Design: Heute Klasse, werden wir abdecken, wie wir Persönlichkeit und Emotion in App-Design hinzufügen können. Es ist sehr wichtig im App-Design heutzutage, weil App-Design das Leben aller verändern, wie die Interaktion mit der Welt. Das Wichtigste in der App ist jeden Tag, es gibt Hunderte von Apps, die Menschen im App Store veröffentlichen. Die erfolgreichste App, wir haben immer eine Frage, wie diese App so erfolgreich ist , weil sie diese Ebene der Emotion und Gefühl, um die App hinzugefügt. Also, heute werden wir das abdecken. Wie können Sie dieses Gefühl in jeder App tun? Wie können Sie die Persönlichkeit kleiner Mikro-Interaktionen hinzufügen, die die App berühren? Weil ich aus einem kleinen Dorf der Gemeinschaft von kleinen Menschen komme, passiert alles meist menschlich zu menschlicher Kommunikation wie Essen bestellen, wie eine Nachricht zu posten, alles ist so menschlich. Aber wenn ich in eine technologische Welt ziehe, ist alles so digital. Also habe ich eine Leidenschaft, wie man dieses menschliche Element, das ich in meiner Vergangenheit hatte, in die digitale Welt bringen kann. Damit wieder an meiner Stelle oder Menschen in einem Dorf oder irgendwo auf der Welt Ihre App verwenden können, haben nicht nur Menschen in einer Tech City. Ich habe selbst angefangen, Design zu machen, aber ich hatte keine Ahnung, wo ich anfangen soll, denn in meiner Gegend gibt es keine Designschulen. Also fing ich an, Apps zu machen, alle Ideen. Jeden Tag bekam ich ein paar Ideen, so dass ich begann, meine Ideen zu einem echten Prototyp zu machen. Ich habe jeden Tag online gepostet für wie Pass zwei Jahre. Viele Leute sagten: „Oh, das sieht einzigartig aus. Ihre Ideen sind so einzigartig.“ Ich sage: „Weil ich Design nicht lerne, weil ich keine Regeln kenne. Ich tue nur, was ich denke.“ Da du also als Anfänger beginnst, bist du schon einsatzbereit. keine Angst. Sie sind schon weit gut als die Menschen wirklich erlebt, weil alle Ideen, die Sie jetzt kommen werden, wird super einzigartig sein. Sei also einfach zuversichtlich und lerne von dieser Klasse. Wie kann die Idee, die Sie haben, bringen Sie es die Welt und teilen Sie der Welt regelmäßig, was Sie tun. Wir werden diese lernen, indem wir eine eigentliche Vorgehensweise für das Produkt der Idee erstellen , die Sie gerade haben , und wie können wir das in einem Walk-through erstellen. Walk-through ist für jedes Projekt super wichtig, denn wenn Sie jemandem eine Idee sagen, wird es so sein, dass es cool ist. Aber sie können nicht verstehen, wie es sich tatsächlich anfühlt, wenn sie es benutzen. Also durch Clearing Walk-through, Sie gehen, um jemanden eine echte Aktion in der mobilen, wo sie einfach klicken und fühlen, das fühlt sich wirklich nett, Ich würde wirklich lieben, diese App haben. Die meiste Zeit, wenn Sie an den verschiedenen Stakeholdern wie Ingenieure arbeiten, wie Manager, Marketing-Team, haben sie keine Ahnung, welche Designs Sie erstellen. Sie können Entscheidungen nur treffen, wenn sie tatsächlich sehen, wenn sich etwas bewegt. Zum Beispiel gibt es einen Unterschied zwischen einem Storyboard und einem tatsächlichen Film. Wenn man sich einen Film anschaut, bekommt man das Gefühl. Es ist nicht nur wie ein Konzept. Erstellen einer App in ein echtes Produkt dauert sechs Monate, aber Sie können es an einem Tag tun. Deshalb ist Spaziergang durch ist super wichtig, um zu kommunizieren, welches Gefühl Sie versuchen zu kommunizieren, damit die Menschen tatsächlich Entscheidungen treffen können, basierend darauf. Während dieser Klasse werden wir eine Diät-App speziell für Jugendliche und Kinder erstellen. Wir werden von einer grundlegenden Skizzendatei beginnen, die ich zur Verfügung stellen werde. Sie können von unseren Ressourcen herunterladen. Daraus werde ich Ihnen zeigen, wie wir das in die nächste Ebene des visuellen Designs verbessern können . Dann werden wir dieses Produkt mit InVision testen, dann werde ich Ihnen zeigen, wie Sie Mikro-Interaktionselement von aha Moment in der App hinzufügen können . Schließlich werde ich Ihnen beibringen, wie Sie Ihre Ideen an einen Kunden, in die Welt oder an Ingenieure weitergeben können . Mein Gedanke war, wie können wir diese Informationen schnell aus unserem Kopf holen und diese Idee zu einem Live-Produkt machen? Also komme ich auf diese Idee des zweistündigen schnellen Prozesses, die Idee zu entwickeln, zu entwerfen und zu konstruieren und zu Prototypen zu machen. Wir werden Skizze verwenden, die eigentlich für UI-Design ist, und wir werden auch InVision verwenden, um unseren Prototyp zu testen. Visuell, wie ist die Schrift Hierarchie, welche Host die Farben funktioniert, und danach werden wir Prinzip-Software verwenden, wo wir Animation erstellen, Mikro-Interaktion und machen die Dinge tatsächlich bewegen. Schließlich werde ich Ihnen einige Tipps und Tricks in Keynote beibringen. Wie Sie tatsächlich alle Ihre Videos in Keynote setzen können, um Menschen zu präsentieren. Alle diese Software, die ich gerade erwähnt habe, sind für einen Monat oder 15 Tage kostenlos Testversion verfügbar . Also brauchen Sie sich keine Sorgen zu machen. Sie gehen einfach auf diese Website und laden Sie die Software herunter. Im nächsten Schritt werden wir sehen, wie tolle Apps tatsächlich aussehen. 3. Great Apps IRL: Schauen wir uns in dieser Klasse an, was sind die großartigen Apps, die wir jeden Tag in unserem Leben verwenden und was sie wirklich großartig macht, und was ihnen ein Gefühl von unvergesslichen App-Erlebnis geben. Also lassen Sie uns einfach nur mit Blick auf die iPhone-Funktionen, die wir jetzt haben, dass wir buchstäblich jeden Tag verwenden. Zum Beispiel das Control Center, in dem wir Helligkeitsänderungen vornehmen, auf Änderungen und alles. Lassen Sie uns einfach nach unten streichen, diese Interaktion selbst, Sie spüren den Unterschied. Es ist einfach nach unten geklaut, es ist so natürlich. Es ist nicht nur, dass, seit ich den Bildschirm aufnehme, es zeigt mir tatsächlich einen Punkt, wie ich tatsächlich den Bildschirm aufnehme. Wenn wir die Helligkeit verbessern, können Sie sehen, wie sie die Helligkeit dort ändern. In der Tat, so etwas wie Sound, sie sind es tatsächlich stummschalten. Es gibt so viele Details, die in diesem Sound involviert sind. Super interessant ist wie die Berührung, die hier ist. Sie können tatsächlich sehen, wie die Berührung durch Bar für Bar geben und meine Taschenlampe steigt. Also all diese Dinge, die sie aus der realen Welt erfassen und sie setzen diese Erfahrung auf das Handy, und deshalb fühlt sich jeder, als wäre das iPhone super einfach zu bedienen, weil sie diese winzige menschliche Erfahrung nutzen , die sie indirekt tun, dass Die Leute wissen es nicht. Schauen wir uns eine andere App an. In diesem Jahr präsentierten sie sich wie Apple Best App Award, nur eine einfache Bleistift-App. Das coole, was sie gemacht haben, ist diese Bar, wo Sie gerne schnell die Nip wechseln können. Siehst du, so. In der Vergangenheit, als wir in der Schule waren, haben wir tatsächlich die Nips in unserem Telefon wie in einem Bleistift gewechselt. So verwenden sie dies wie das Wechseln von Bleistift wie eine menschliche Erfahrung in echte Details, wenn sie so viel Mühe auf. Machen Sie diese Farbänderungen. Also das ist, was ich sage an Bord wie diese App fühlt sich großartig an und wir verstehen nicht, warum es sich gut anfühlt, es ist tatsächlich sie menschliche Erfahrung, die wir vorher hatten. Schauen wir uns eine andere App an, die ich im App Store erstellt und veröffentlicht habe. Also nur ein einfacher BMI Rechner, den Sie Ihren BMI überprüfen können, wo Sie einfach schnell nach unten streichen können, anstatt wie ein Dropdown-Menü zu geben, wo Sie einfach „Oh, was ist die Höhe meines Gewichts?“ Sie können einfach nach unten streichen. Es ist super interessant und Sie können das Gewicht oder Geschlecht eingeben, das Sie wollen. Ich fügte hinzu, wie ein kleiner Hauch wie Essen, wie wir dieses Spiel gespielt haben. Also mag ich einfach in der Wand dieses Prinzip, ich scrollen nach unten und so tatsächlich geben Sie das Ergebnis. Obwohl dies wie eine wirklich wie eine Hilfe-Registerkarte, ist es nicht langweilig, wie jeder es verwenden kann und es ist in Ordnung zu verwenden. Schließlich können wir uns eine andere App ansehen, die ich wirklich bewundere, es ist wie eine Zeitseite. Also habe ich es gerade jetzt heruntergeladen. Also gibt es mir nur eine, oh, nett, dich kennenzulernen. Die Worte, die sie benutzen, ist, es fühlt sich immer noch an wie ein Mensch, der zu Ihnen spricht. Also fragen sie nur, welche Farben du willst, welche Farben du magst. Sie können die gewünschte Farbe auswählen. Das habe ich getan. Sie können alle Ihren Kalender sehen, es sieht einfach gut aus. Es fühlt sich nicht wie ein gewöhnlicher Kalender an, es fühlt sich super schlau an. Eine wirklich coole Funktion, die ich über diese App mag, ist wie sie machen eine Einstellung, die super interessant ist. Lassen Sie uns auf intelligente Warnungen klicken. Wenn wir auf Regen klicken, sie tatsächlich wie Warnungen angezeigt, Sie wollen eine Benachrichtigung, wenn es regnet. Wenn wir wollen, was ist die Zeit zu verlassen und welche Art von Auto Sie verwenden, all dies sind wie menschliche Elemente wie Sie gehen gehen oder Sie werden ein Auto nehmen. Also das sind wie wirklich winzige Elemente, aber diese winzigen Elemente machen diese App super einzigartig, niemand kann dies machen und jeder kann klar daran erinnern, dass dies von diesem Zeitraffer App ist. Das ist, was wir heute in unserer Klasse sehen werden, wie Sie eine App wie diese erstellen können. Diese Apps sind nicht nur wie geben Sie die Funktionalität, diese Apps sind unvergesslich, weil es schön ist, es ist atemberaubend, und gleichzeitig ist es zeitlos. Das ist es, was wirklich wichtig ist, während Sie ein Design erstellen. Machen Sie ein Design, das trendy oder zeitlos ist? Jetzt haben wir ein Beispiel für alle großartigen Apps gesehen, die in einem Live-Produkt gemacht werden. Beginnen wir mit einer Skizze und erstellen Sie unser eigenes Design. 4. Ihre Konzepte vorbereiten: Der erste Schritt, eine großartige Apps zu machen, ist also keine komplexe Interaktion. Der erste Schritt ist, dass Sie die Grundlagen lernen müssen. Ich nenne das wie eine Grammatik des Englischen. Wenn Sie Englisch sprechen möchten, müssen Sie die Grundlagen der Grammatik lernen, dann können Sie nur etwas Neues brechen und erstellen. Wenn Sie diese Regeln nicht befolgen, dauert es wirklich viel Zeit, um das grundlegende Layout einzurichten. Aber wenn Sie die Regeln kennen, können Sie loslegen und kreativ sein. Unternehmen wie Google und Apple, bald haben sie so viele Geräte und sie auch [unhörbar]. Sie haben bereits alle diese Grundregeln erstellt. Was ist eine Mindestgröße, die Sie verwenden müssen? Welche Farben sind wirklich für jeden zugänglich? Welche Farben sollten für verschiedene Länder eigentlich? Was ist das Navigationselement, das Sie auch benötigen? All diese sind zugänglich, wenn Sie Material Design mögen, Sie werden all diese Ressourcen finden und es ist frei verfügbar und sie bieten Ihnen auch viele ähnliche Beispiele wie, was Sie tun können, was Sie nicht tun können. Also fangen Sie zuerst dort an. Dann können Sie diese in Ihr Design anwenden. Also fangen wir an, unsere eigene Idee zu machen. Gestern habe ich mit meiner Schwester geredet. Sie sagte: „Wenn du die Kinder im frühen Alter trainierst, um die Fitness zu machen, wird es gesünder in der Zukunft sein.“ Also dachte ich daran, ein Konzept des Interaktionsdesigns zu machen , das Kinder dazu ermutigt, tatsächlich zu interagieren und Fitness zu machen. Beginnen wir mit dem Aufschreiben, was sind die Funktionen oder wie die Dinge, die wir tun müssen , um Empfehlung der Übung für Kinder zu geben. Die grundlegenden Dinge, die wir wissen müssen, sind, wie das Geschlecht sie sind. Später brauchen wir Größe, wir brauchen, in welchem Gewicht sie derzeit sind, und wir können sie auch fragen, was ist Ihr gewünschtes Gewicht? Wir können einige Fragen stellen wie, was ist der Lebensstil? Was sind die Lebensmittel, die sie essen? Schließlich zeigt sich wie ein Bildschirm, der alle Informationen verarbeitet und dann Ihren Home-Bildschirm mit dem Ergebnis zeigt, sind diese Übung für Sie empfohlen. Sie müssen also im Grunde alle Funktionen schnell aufschreiben. Was auch immer Sie in den Sinn kommen oder Sie können mit Ihrem Freund oder den Benutzern, die Sie zielen, sprechen , Sie können die Kinder fragen, welche Informationen sie benötigen und Sie können alle diese Informationen in einem Papier füllen, um zu beginnen. Manchmal, als ich anfing zu entwerfen, blieb ich fest damit, dass ich alle Funktionen erfassen muss und ich eine ganze Sache zusammenstelle, aber du wirst es grob tun. Was ist die Hauptsache, die wir brauchen? In der Regel wählen Sie fünf wichtige Dinge, die wir für diese App oder vier wichtige Dinge benötigen. Damit Ihre Interaktion fokussierter und einfacher wäre anstatt alle Informationen beim ersten Mal zu sammeln. Lassen Sie uns nun anfangen, alle Skizzen Geschwindigkeit oder die Features, die wir hier gemacht haben, in die Skizze zu bringen . Sketches App, die Ihnen hilft, schnell Ihr Design zu visualisieren. Es ist super einfach zu bedienen. Jeder mag einen großen Nerd, oder jeder kann anfangen, die App zu verwenden. Sie haben also bereits eine Grunddatei erstellt oder zeigen Ihnen, was die Dinge sind, die wir besprochen haben, wir brauchen ein Geschlecht, wir brauchen eine Größe, und wir brauchen ein Gewicht, und wir brauchen ein gewünschtes Gewicht. Sie wollen zum Beispiel erreichen, wenn sie in 80 Runden sind, sie wollen auf 60 Runden gehen. Das sind also die grundlegenden Informationen, die wir brauchen. Nachdem sie alle diese Informationen eingegeben haben, werden wir sie mit den Ergebnissen empfehlen. Ich habe viele absichtliche Fehler in diesem spezifischen [unhörbar] gemacht, weil das die Dinge sind, die die meisten Anfänger tun. Als ich ein Anfänger bin, habe ich alle Fehler gemacht. Also möchte ich Sie nur wissen lassen, dass diese Fehler super häufig sind und Sie können diese Dinge leicht vermeiden. So super häufiger Fehler jeder tun. Es ist keine große Sache, aber wenn Sie in einer Firma arbeiten und ein Design präsentieren, und ich würde gerne einen Rechtschreibfehler machen, Dinge zu machen. Es ist super einfach, aber es ist wirklich groß. Das ist der erste, den ich sagen würde. Dann eine zweite würde ich sagen, eine Typografie wie ein Hierarchie-Stil zu kennen. Das ist super wichtig. Zum Beispiel der aktuelle Bildschirm. Sie sehen alle Bildschirme, sehen fast gleich aus. Es gibt also keine richtige Hierarchie, die man zuerst ist, was wichtiger ist. Also werde ich dieses Ding schnell aufräumen. Also habe ich immer, wie ich hier vor einer Website wie Mensch-Computer-Richtlinien wie Apple sagte, sie haben eine klare Richtlinie darüber gemacht, was Überschriftengröße Sie verwenden können, was ist eine Absatzgröße, die Sie verwenden können. Zum Beispiel ist 16 super winzig für Überschriften. So können Sie 34 verwenden oder mögen, wenn Sie 32 haben möchten, das sind die Größen, die es sofort zeigt, dass dies Überschrift ist. Also die sekundäre Ebene ist es wie ein Absatz. Nun meinte ich die Eingabe einer anderen Schriftart Stile wie zum Beispiel diese Überschrift und dieser Abbildung Subtext. Aber differenzieren Sie wirklich klar. Wenn Sie wie Google Material Design angesehen werden, ist dado wirklich absichtlich, wirklich gut. Ist wie diese Art von winzigen Überschriften zu trennen, verwenden sie volle Kappe. So können Sie alle Ebenen auswählen und gehen Text und es gibt eine Funktion wie Transformation aufzurufen. Wenn wir auf Großbuchstaben klicken, ist es fertig. So können Sie jetzt schnell sehen, dass es eine klare Unterscheidung zwischen der Überschrift und der gewünschten Option gibt. Der dritte häufige Fehler, den viele Leute tun. Wie Sie gehen sofort finden Löcher wie ein Anfänger Designer oder jemand wie für Zweckmäßigkeit ist wie ein Abstand. Zum Beispiel 35, ich habe 35 Abstand hier und ich habe wie ein 13 Leerzeichen hier und wie ein 43. Das ist ein Trick, der super leicht zu erlernen ist. Es ist wie ein acht Gittersystem. Wenn Sie beispielsweise einen Abstand zwischen dem Element beibehalten möchten, können Sie Elemente nach dem Zufallsprinzip platzieren. Du wirst wie ein Vielfaches von acht geben. Zum Beispiel möchte ich, dass dies wie 16 ist und das wie 16. Also wirst du eine Konstante wie Abstand machen, und drittens ist die Dimensionierung. Zum Beispiel, viele Designer, wenn wir anfangen zu entwerfen, haben wir keine Ahnung, wie die Größe dieses Knopfes ist , und wir zeichnen nur einen Knopf. Die Mindestgröße für eine Schaltfläche ist wie 44 Pixel. Derzeit sagt die Höhe 39, aber das ist ziemlich okay, aber das ist eigentlich klein, wenn Sie tatsächlich einen Fingerdaumenabdruck verwenden. Sie können nicht wirklich auf diese Schaltflächen klicken. So müssen Sie sicherstellen, dass Ihr Minimum 44 Höhe ist. Also habe ich wie 48 als Mindestgröße verwendet, so dass Taste und wie super einfach zu klicken sein, und wie gesagt, wenn Sie entwerfen Sie sich um jemanden kümmern, wenn sie nur auf der Straße gehen und sie das Formular ausfüllen wollen, haben Sie , um sicherzustellen, dass es leicht anklickbar ist. Wenn es super winzig ist, können sie klicken. Schnell gehen wir durch, wie ich sagte, wir können hier den gleichen Überschriftenstil verwenden. Kopieren Sie schnell Stil und fügen Sie hier ein. Wenn Sie also ausrichten, stellen Sie sicher, dass diese Schriftarten auch im rechten Winkel ausgerichtet sind. Der Abstand ist eindeutig korrekt. Es ist acht mehrere Systeme und draußen. Also gibt es auch eine Frage wie, was der Außenraum ist, den Sie geben müssen. Normalerweise haben Sie hier die Mindestgröße, um beide Seiten als ausgestorbenes Ausmaß zu geben. Das letzte, was ich sagen möchte, ist wie Farben. Also liebe ich es, Farben zu spielen. Sie können einfach zufällige Farben verwenden, weil Farben verschiedene Dinge für Menschen bedeuten. Also für diesen, ich brauche nicht einmal Farben, denn wann immer Sie gehen, um Farben zu verwenden, Sie Aufmerksamkeit auf diesen bestimmten Teil. Sie wollen, dass sie darauf klicken, und derzeit möchte ich nicht, dass jemand auf die 10 Minuten klicken. Also werden Sie es einfach zu einer Farbe machen , die nicht so wichtig ist und es ist eine sekundäre Ebene der Farbe, deshalb habe ich grau verwendet. Wie Sie gesehen haben, wie alle Farben, die ich benutze, ist nicht rein schwarz. Ich benutze wie ein bläuliches Feld. Das schien schwarz. Wenn ich bläuliches Schwarz verwende, ist es eigentlich bequemer für die Augen. Das sind also kleine Geheimnisse, wie viele Apps im Produkt gelten. Sie können färben. Ich werde diese Akten mit Ihnen teilen. Sie befinden sich in Ihrem Ressourcenordner. Sie können herunterladen und Sie können herumspielen und sicherstellen, dass alle Schriftarten SSR. Der Abstand, die Schriftflächen, die Sie beibehalten, sind perfekt ausgerichtet. Die nächste Lektion werde ich Ihnen beibringen, dass diese Klasse alles über, nachdem Sie die grundlegende gelernt haben, nächste Ebene ist wie können wir es persönlicher machen wie menschliches Element in der gesamten Anwendung. 5. Ihren Entwurf testen: Also haben wir alle Grundregeln angewendet. Jetzt werden wir schnell überprüfen, wie die Schrifthierarchie funktioniert, die Farbe auf einem Gerät funktioniert oder die erstellten Schaltflächen anklickbar sind oder nicht. So können wir das schnell mit InVision tun. Also habe ich eine InVision integriert mit App namens Craft. Sie können kostenlos herunterladen. Wenn Sie herunterladen, wird es eine Option namens Hochladen Ihres Designs geben. Sie müssen nur alle Optionen auswählen, die Sie tun müssen, Sie müssen den Namen eingeben. Wenn Sie auf Veröffentlichen klicken, wird ein Sound wiedergegeben, und das war's. Nun, all Ihre Entwürfe, die Sie gerade gemacht haben, die Drahtmodelle, die Sie gemacht haben, werden auf das Handy kommen. Sie müssen immer Ihr Gerät überprüfen. Aufgrund einiger Leute testen einige Benutzer, was sie denken, aber sie klicken, stellen einige Fragen wie : „Könnten Sie diese Option auswählen? Was denkst du?“ So können Sie schnell alle diese Details kennen, indem Sie in das Gerät eintauchen. Also, wie Sie arbeiten müssen oder Sie Probleme wie die Zeit und die Farben sind super winzig. Also, was Sie schnell tun können, ist, Sie wieder zur Skizze gehen und schnell die Schriftart ändern können . Dann wissen Sie es, wie man 10 benutzt. Also möchte ich schnell einen schnellen Tipp erwähnen, dass Sie eine Schriftart verwenden, mindestens 14. Du musst mit 14 beginnen, dann 16, 18, 24, 36. Dies sind grundlegende Hierarchie der Schrift, die Sie verwenden müssen. Also werde ich fortfahren und 14 hierher bringen. Auch hier werde ich die gleichen Stile anwenden. Also werde ich einfach mit der rechten Maustaste klicken und diesen Stil kopieren, den ich hier einfügen werde. Wenn wir ein Symbol machen, machen Sie kein Symbol in zufälligen Formen. Wenn Sie ein Symbol erstellen möchten, stellen Sie sicher, dass die Höhe wie 24 ist. Das ist auch für Icon-Stil, das macht eine scharfe wie 24, 48, 96. Das sind die Größen, die sie normalerweise verwenden. Nun, sie verwenden eine Schriftgröße hier. Da es sich um ein Drahtmodell handelt, behalte ich diesen Raum vorher nicht, aber du wirst alle Abstände anwenden, die ich dir vorher beigebracht habe. Also, jetzt haben wir alle Änderungen vorgenommen. Wir können schnell auf diese Zeichenfläche klicken und auf Veröffentlichen klicken. Das war's. Wieder bekam es ein Geräusch. Wenn Sie den Bildschirm erneut aktualisieren, ist er hier. Jetzt haben wir schnell alle Änderungen vorgenommen. Die Schrift ist ziemlich groß, und ich kann die Symbole sehen. So werden Sie ständig iterieren, indem das Handy sehen, ist super wichtig. Denn die meiste Zeit, wenn wir als Design beginnen, werden wir an einem großen Monitor oder Laptop arbeiten. Dann, wenn Sie weiter gehen, um auf dem Handy zu überprüfen, weil das ist, wo Benutzer gehen, um ein Produkt zu verwenden. Also, jetzt können Sie eine Frage haben, wie oft ich iterieren muss. Wenn Sie weiter iterieren, müssen Sie das ganze Jahr über iterieren. Sie müssen also an einem Punkt anhalten und das Produkt tatsächlich starten. Dann wird nur es viele Benutzer werden Ihr Produkt verwenden und Bewertungen oder Feedback geben. Versuchen Sie, wie fünf Mal zu iterieren. Es ist keine Zahl, aber fünf Mal machen eine wirklich große Iteration. Dann musst du zum nächsten übergehen. Der nächste Schritt ist der wichtigste Schritt, den ich Ihnen beibringen werde, ist, wie können wir das vermenschlichen. Wie können wir das attraktiver machen, so haben Sie es benutzt? Speziell, wir iterieren für beide für Kinder. Wie können wir das Design für sie anpassen? 6. Persönlichkeit hinzufügen: Lasst uns das lustige Zeug machen. Wir haben all das grundlegende Zeug wie Abstände gemacht. Jetzt werden wir das menschliche Element und die Emotionen und die Gefühle in der App erschaffen . Lasst uns Brainstormen, wie wir über diese Ideen nachdenken können. Weil Denken sehr wichtig ist, werde ich Ihnen beibringen, wie Sie diese Art von menschlichem Element in Ihrer App erkunden und denken können. Also werde ich verschiedene Ideen skizzieren. Was sind die verschiedenen Möglichkeiten, wie wir diese Informationen sammeln können, außer wie in Formularen? Wie, nur in die Höhe. Also zunächst, was ich getan habe, ist, buchstäblich habe ich einige der Größe des Kindes gegoogelt, Gewichtsmessgerät. Also habe ich diese Inspiration hier bekommen. Es gibt ein kleines Kind, das sie in der Nähe einer Höhenmessung stehen und diese zeigt eine Person, die sie setzen, wie Sie sich in der alten Zeit erinnern, sie setzen eine Skala auf Ihren Kopf zu messen oder Ihre Höhe in Ihrem Haus. Ich habe eine Reihe von Inspiration von Google heruntergeladen. Dann, was ich getan habe, ist, ich brainstorming wie, okay, wir können einen Schieberegler haben , der schnell nach oben und unten erscheint, Sie können schieben, um den Wert einzugeben, oder wie links und rechts Schieberegler, um Werte zu geben. Dann dachte ich mir, warum können wir den ganzen Bildschirm für einen Wert verwenden, dann setze ich die Skala auf der rechten Seite und die Details auf der linken Seite. Also schließlich zeichne ich diesen Charakter ist buchstäblich wie aus diesem Bolzen in Majors nahm ich, wie es eine Skala auf dem Kopf eines Kerls und es gibt eine Markierungen an der Wand. Also habe ich die Markierungen an die Wand auf der rechten Seite gelegt und es gibt ein kleines Kind mit einer Skala auf dem Kopf. So können Sie einige verschiedene Ideen mitbringen, aber die Art und Weise, wie es gezeichnet wurde, ist einfach zu denken, was sind die verschiedenen und innovativen Art und Weise, wie Sie diese Informationen zeigen können und einfach interessanter für die spezifische Zielgruppe. So misse ich Größe und Gewicht, würde ich sagen, Sie folgen dem gleichen Prinzip. Ich google nur einige der Gewichtswaagen, die Kinder verwenden. Ich fand diesen faszinierenden alten Stil der runden Gewichtswaage. Nun, obwohl es so digital ist, ist das so cool zu sehen, wie es sich bewegt. Also nahm ich diese Inspiration in eine normale Waage und fügte auch eine Gewichtswaage hinzu. Aber Kinder können einen Charakter haben. Es ist eigentlich wie, wenn Sie das Gewicht des Kindes Charakter zu erhöhen wird wachsen und wie kleiner. Schließlich, für den Home-Bildschirm habe ich eine kleine Tuck so in Ordnung, basierend auf all Ihren Daten haben wir diese Empfehlungen für Sie. Lasst uns einen letzten Bildschirm machen. Das ist alles, was Sie brauchen, um Ideen schnell zu brainstormen , sie in einem Papier zu skizzieren und den Menschen zu zeigen. Okay, das sind verschiedene Ideen, die ich habe, und du bittest sie, auszuwählen, welche Idee interessanter ist. So können Sie schnell Entscheidungen treffen, anstatt alles auf einem Bildschirm zu machen , weil es Zeit braucht, wenn Sie etwas in einer Skizze zu machen. Also habe ich immer erwähnt, anders als an einem Laptop zu arbeiten , denn wenn Sie skizzieren, ist Ihr Geist nicht in einer digitalen Welt, Sie sind völlig aus der digitalen Welt. Wenn Sie tatsächlich mit der Hand skizzieren, ist die Art und Weise, wie das Gehirn funktioniert, völlig anders. Denn wenn Sie auf einem Computer sind, versuchen Sie, eine Menge Inspiration zu bekommen. Oh, ich kann diese App anstelle von [unhörbar] verwenden, aber wenn Sie skizzieren, ist alles von Ihrem Gehirn. So bist du super fokussiert. Ich möchte einen Tipp geben, dass sich beim Skizzieren niemand darum kümmert, wie es visuell aussieht. Du mappst nur die Idee ab. Skizzieren Sie also schnell, was Ihnen in den Sinn kommt und verstehen Sie oder die Designer, mit denen Sie arbeiten. Nachdem wir alles skizziert haben, werden wir einfach alle Ideen, die wir haben, in eine Skizze umwandeln. Ich ordne die Bildschirme nach jedem Schritt an. Wenn Sie einen Walk-Through machen möchten, müssen Sie sicherstellen, dass sich alle ungeraden Boards in einem anderen Zustand befinden. Zum Beispiel weiß ich ohne Animation, was ich tun werde. Zum Beispiel, wenn ich auf männliche hier klicke, wird es hier sein. Wenn ich dann auf Weiter klicke, wird es Höhe geben und es wird diese Bar geben. Wenn ich diese Leiste schiebe, wird es 169 sein. Wenn ich als nächstes klicke, wird es nach Gewicht fragen, und wenn ich das Gewicht ändere, wird sich die Form der Person ändern. Sie müssen also sicherstellen, dass Sie alle Ihre Animation in einem anderen separaten ungeraden Board anordnen , so dass es einfach ist, den Walk-through zu machen. Sonst wird es wirklich schwer für dich, einen Spaziergang durch zu machen. Sie können alles in einem einzigen Bildschirm tun, obwohl es super hart sein wird. Zum Beispiel, das auch ich weiß, meine Animation wird auf diese Weise funktionieren. Ich werde nach unten streichen und es wird auf den Spieler klicken und wieder wird es die ganze Aktivität spielen. Also musste jede einzelne Sache eine separate spezifische Schicht sein , so dass es für Sie super einfach ist, im Prinzip zu tun. Jetzt sind alle Bildschirme bereit, und ich werde die Skizzendatei auch im Ressourcenordner teilen, so dass Sie herunterladen können, und von diesem können Sie mir weiterhin folgen, wie ich das gesamte Design ins Prinzip importiere und tatsächlich die Walk-through, über den wir gesprochen haben. Wie können Sie diese Vorgehensweise erstellen, die interessanter zu teilen ist? 7. Einfache Übergänge erstellen: Sehen wir uns nun an, wie wir dieses Design in Principle importieren und mit der Erstellung von Animationen beginnen können . Zuerst werde ich nur gerne mit einer Zeichenfläche Zahlen, es wird super hilfreich sein. Also verwende ich ein schnelles Plug-In namens Sketch Number Artboard. Wir gehen dorthin und klicken auf Reihen und haben eine Zahl von eins bis drei. Ok. Dann haben Sie jetzt wie 11 Bildschirme. Es wäre also super einfach, wenn Sie alles in Principle importieren , damit Sie wissen, zu welchem Bildschirm Sie als nächstes eine Verbindung herstellen. Lasst uns das Prinzip öffnen. Ich benutze meistens Principle, es ist eine Software, die Ihnen hilft, Prototypen wirklich schnell zu erstellen. Ein Vorteil der Verwendung des Prinzips ist, dass Sie die Principal-Datei in das iPhone importieren können, so dass Sie leicht testen können. Es fühlt sich wie ein echtes Labor an, wenn Sie eine Principal-Datei exportieren. Also, jetzt sind wir im Prinzip, die Sache, die wir tun müssen, ist, klicken Sie einfach auf Import und Sie müssen das Dokument auswählen. Dies ist das einzige Dokument, das wir gerade ausgewählt haben. Also jetzt verwende ich Skizze und ich werde 3x auswählen , so dass meine Qualität meines Designs wirklich hoch ist. Dann werde ich auf Import-Seite klicken. Es wird also die gesamte Seite, die Sie in einer Skizze entwerfen, in das Prinzip gerendert. Bumm. Alle Bildschirme sind jetzt hier zu schreiben. Also nach dem Import in das Prinzip, den grundlegenden Schritt, den Sie tun müssen, und der Trick eine Menge Großheit oder viele Leute, die keine Animation verwenden, die sie nicht wissen, dass, Sie müssen nur die Zeichenfläche auswählen, können Sie hier auswählen oder Sie können auch hier auswählen, wählen Sie kein Rechteck aus. Wenn ich zum Beispiel hier klicke, wird ein Rechteck ausgewählt. Wählen Sie die Zeichenfläche aus, klicken Sie hier und klicken Sie auf Tab. Sie werden immer wieder für alle Zeichenflächen tun. Also jetzt habe ich mich angeschlossen, wenn du oben siehst, ist es eine Zeitleiste. Die Zählung oben wird ein kleines Fenster unten sein, es heißt Timeline. Jetzt werden wir das nicht berühren, aber Sie können sehen, dass alle Pfeile verbunden sind. Es bedeutet, wenn Sie darauf klicken, wird es hier gehen. Wenn Sie auf diese Schaltfläche klicken, wird es zum nächsten gehen. Also haben wir gerade einen Click-Through-Prototyp erstellt. Ich muss nur testen, dass, wenn Sie hier klicken, es geht hier. Es geht hier und ich klicke nur. Ich klicke nur und Animationen werden automatisch ausgeführt. Das Problem hier im Moment ist also Principles basierend auf Schichten. Zum Beispiel, wenn ich hier klicke, geht diese schwarze Runde dorthin, weil beide den gleichen Namen haben. Das ist also wie automatische Animation, aber das einzige Problem hier ist manchmal, dass die Namen nicht richtig erwähnt werden. Also die Dinge, die wir nicht wollen, es fangen an zu animieren, einige Dinge, die wir nicht einmal wollen, wie zum Beispiel dieses. Es ist zufällig animiert. Da kommt der Trick. Sie müssen sicherstellen, dass nichts zufällig animiert wird. Der Trick ist also, dass Sie diese ganze Ebene kopieren werden. Sie müssen auf die zweite Zeichenfläche gehen und alles ausschneiden, Befehl X und Befehl V, und Befehl X und Befehl V. Was es tatsächlich tun wird, ist es alle Namen umbenennen, automatisch ausschneiden und einfügen. Wenn ich zum Beispiel jetzt klicke, gibt es keine Animation, da es keinen allgemeinen Namen gibt da Principle ihn beim Ausschneiden und Einfügen umbenannt hat. Versuchen wir es hier. Siehst du, es gibt Animationen. Es liegt daran, dass das Kleid dieses Mädchens dem Namen des Kleides ähnlich ist. Siehst du, sie hat einen Weg drei, Pfad drei, und er hat Pfad drei wie ein Kleid. Was Sie also buchstäblich tun werden, ist, wieder, Sie werden die ganze Schicht schneiden und hier einfügen und ausschneiden und einfügen. Wenn Sie also auf Trog klicken, gibt es keine Animation. Manchmal denken wir wie, oh, warum nicht einfach Auto-Animation verwenden? Aber die automatische Animation, die Sie nicht steuern können. Wie Sie bereits gesehen haben, bewegt sich die automatische Animation zufällig. Wenn Sie also automatisch animieren, können Sie sie nicht steuern, da Sie steuern müssen, welche animiert werden soll, was nicht animiert werden kann. Dann können Sie nur Ihr Design erstellen, denn Mission wird nicht Design für Sie machen, werden Sie Animation machen, die Sie wollen. So schnell kopieren Sie einfach all dieses Zeug einfügen, um sicherzustellen, dass nichts automatisch animiert wird. Also werde ich Ihnen beibringen, was andere Dinge wir tun können, um es wirklich Spaß zu machen, nicht nur, wenn ich hier klicke, wird es dorthin gehen. Also, um es am glatter zu machen, was ich schnell tun werde, ist, dass ich diese Gruppen kopieren werde. Also habe ich diese beiden Gruppen ausgewählt. Ich werde es kopieren und in eine vorherige Zeichenfläche einfügen, und ich werde es ein wenig auf die rechte Seite verschieben. So können Sie das mit diesem Tool namens X tun. Wenn Sie den Mauszeiger über das x bewegen, wird es wie ein Pfeil sein. Also müssen Sie nur gerne hier streichen. Technisch gesehen, was wir meinen, es ist so würde diese Illustration von links nach rechts kommen. Denn in diesem Bildschirm ist es auf der rechten Seite und auf dem vorherigen Bildschirm, die Sie die Illustration auf der linken Seite. Also werde ich nur der Demo zeigen, was los ist. Wenn ich hier klicke, sehen Sie, es kommt von links nach rechts, weil Sie die Abbildung auf der linken Seite hatten. Wenn Sie die Abbildung nach rechts verschieben, wird sie von rechts kommen. Das war's also. Wenn Sie wollen, oh, ich will von unten, können Sie y verwenden. Ändern Sie es nicht manuell, gehen Sie nicht manuell nach unten. Sie müssen sicherstellen, dass Sie y verwenden, diese Pfeile verwenden, weil es super perfekt ist. Also zog ich von unten. Jetzt werde ich es testen. Siehst du, es kommt von unten. Das sind also wirklich einfach, wenn Sie wissen, dass Sie alles tun können. Also werde ich es buchstäblich von unten machen, aber nicht so unten. Aber immer noch blockiert es meinen Bildschirm, also was Sie tun können, ist tatsächlich einfach unter diese Ebene zu bewegen , so dass es hier nicht das Symbol hat. Um es sogar wirklich glatter zu machen, was der Trick ist, sind die Zahlen. Dies wird also Timeline genannt. Wenn Sie auf diesen Pfeil klicken, ist dies wie eine Zeitleiste, es zeigt Null Sekunden, eine Sekunde, zwei Sekunden. Diese Animation geschieht also in, wenn wir darauf klicken, 0,3 Millisekunden. Es passiert also zu schnell. Um es glatter zu machen, ist der Trick, dass Sie auf diesen Pfeil klicken müssen. Das ist der Pfeil. Ich habe bereits eine Menge Animation für mich, ich habe eine Standard-Animation namens 140. Für diese Klasse können wir eine neue Animation erstellen. Sie müssen also auf den Frühling klicken. So können Sie das Skript sehen, Frühling ist wie zu viel Charme, wenn Sie linear wollen, Easy In, gibt es so viele Standardoptionen. Aber ich werde dir mein Geheimnis beibringen, wie wir es glatter machen können. Um also die Spannung zu reduzieren, so dass es diese Form fühlt, mache ich normalerweise 100 oder 120. Das ist also super wichtig, wenn Sie das nicht tun, ist das, was diesen letzten erstklassigen Touch macht, es super glatt zu machen. Auch das Wichtigste, was Sie immer Animationsdiagramm machen sollten. Wenn Sie einen Prototyp erstellen, müssen alle die gleiche Animation spüren. Man kann nicht so sein, als wäre man super Frühling, man ist super glatt. Sie müssen sicherstellen, dass alle Animationen gleich aussehen. Also wirst du das Gleiche auf hier anwenden, 100. Wenn Sie den gleichen Typ verwenden möchten, können Sie dies tatsächlich hinzufügen. Wenn Sie auf Plus klicken, können Sie Skillshare hinzufügen. Also habe ich eine Ebene hinzugefügt, damit ich dieses Diagramm nicht immer wieder ändern muss , es wird automatisch geändert. Also, wenn ich klicke, sehen, es ist super glatt. Dies sind also die grundlegenden Animationsschritte, die Sie tun müssen. Also werde ich diesen Kerl einfach von rechts nach links kommen lassen , weil das Männchen von rechts nach links ist. Also werde ich hier einfügen, und ich werde ein bisschen hierher bewegen. Also, wie Sie sehen, ich bin nicht berühren alle Zahlen manuell, Sie brauchen nur ein Spiel mit dem Pfeil. Ich möchte, dass die Deckkraft, Deckkraft Isolator Null ist. Sehen Sie? Ich möchte nur, dass die Deckkraft super Null ist. Dann, wenn es hier geht, wird es automatisch 100. Sie müssen sich also keine Gedanken darüber machen, was hier passieren wird Sie müssen sich nur Gedanken darüber machen, welche Deckkraft Sie wollen. Also habe ich es auf Null geschafft und wenn ich männlich klicke, fühlt es sich an, als würde es von Null auf 100 kommen. Also, wenn ich jetzt das Geschlecht ausgewählt habe, funktioniert es perfekt. Wie wir erwartet haben, super glatt und fühlt sich wie eine echte App. Nun, was wir tun werden, ist, dass wir dieses Männchen ausgewählt und wir können es als Männchen nennen , weil wir wissen, dass wir diese Person durch die App benutzen werden. Also können wir das als Männchen nennen und ich werde männlich für alle Zeichenflächen nennen. Warum es super wichtig ist, ist es automatisch animieren. Jetzt ist es automatische Animation wird in der Art, wie Sie wollten arbeiten , weil Sie definieren, dass er männlich ist, der Name der Sache. Jetzt siehst du die Magie. Nachdem Sie das Geschlecht beendet haben, klicken Sie auf Weiter und sehen der Typ automatisch animiert wird, weil Sie die Ebene gleich benannt haben. Dies ist männlich und der nächste Bildschirm dieser Gruppenname ist auch männlich. Wenn Sie darauf klicken, sehen Sie, es ist nicht glatt, aber Sie können den Unterschied sehen. Es ist eigentlich, dass diese Person dorthin zieht, da, da. Sehen Sie? Dies ist, wo Automatik gut ist, weil wir es richtig genannt haben, es passiert nicht automatisch. 8. Animationen anpassen: Jetzt wissen wir, welchen Charakter wir durch verschiedene Zeichenflächen pflegen müssen. Also, jetzt, was ich tun will, ist, wählen wir das Geschlecht, jetzt werden wir eine Höhe wählen. Höhe, was ich werde wählen, wenn ich hier klicke, ist es klar, dass der Kerl Haare wachsen. Zu wachsen bedeutet, dass die Haare ein wenig größer werden. Was hier passiert ist, wenn ich hier klicke, ist die Person in einer anderen Ausrichtung , so dass sie sich von links nach rechts bewegt, das ist nicht glatt. Also, was ich tun werde, ist, dass ich hier löschen werde. Ich werde diese Person kopieren, ich werde das Männchen hier einfügen. Also siehst du, wenn ich von 65 auf 69 gehe, ändert sich nichts. Aber wir werden es manuell tun. Das ist, wo ich Ihnen die Skalierungsoption beibringen werde. Skalieren ist nichts anderes als Entwicklung tun Sie es wie 1.1 und stellen Sie sicher, dass Sie die beiden Layer auswählen und an den Böden ausgerichtet, nicht an der Unterseite ausgerichtet. Stellen Sie sicher, dass diese von der gleichen Höhe sind, so dass sie sich nicht so viel bewegen. Also, wenn ich jetzt zu 699 wischen, sehen Sie, gibt es einen reibungslosen Übergang. Wir beenden die Höhe, jetzt werden wir das Gewicht machen. Jetzt ist es ein wenig komplexer Teil, weil das Gewicht in einem kreisförmigen Stil ist, es ist nicht wie linear, linear ist ziemlich einfach. Was wir also tun werden, ist, dass wir das manuell machen müssen. Das ist ein bisschen ärgerlich, aber das muss man manuell machen. Zum Beispiel 160, Sie müssen sicherstellen, dass diese 160, hier auch 160. Siehe im vorherigen, es änderte sich in 162, weil wir es umbenannt haben. Jetzt werden wir sicherstellen, dass alle Namen gleich sind. Entfernen Sie diese Nummer. Warum haben wir die gleiche Nummer? Ich versuche dir nur zu sagen, wenn du eine gleiche Nummer hast, sie animiert. Ich zeige Ihnen ein Beispiel. Wenn Sie hier klicken, bewegt sich diese 160 tatsächlich von hier nach hier. Ich sehe hier etwas bewegt sich automatisch, der Kopf eines Mannes. Also, wenn das passiert, kopieren Sie einfach diesen Mann, denn dieser Mann ist das einzige Problem. Ich werde schneiden, einfügen, schneiden, einfügen. Also, jetzt benenne ich den Namen richtig um, zum Beispiel 140. Ich werde es 140 machen. Also werde ich es schnell umbenennen, um sicherzustellen, dass beide zum Beispiel den gleichen Namen haben. Zweihundert ist eigentlich 200 in der nächsten Zeichenfläche, so dass es Eigenschaft animieren. Aber für einige Zahlen, wir führen neue. Wenn Sie zum Beispiel scrollen, führen wir tatsächlich 210 und 220 ein. Was wir also tun werden, ist, dass wir diese Ebene kopieren und hier einfügen und sie nach unten verschieben, um sicherzustellen, dass sie die Runde fortsetzt. Also, jetzt ist alles perfekt. Wenn Sie einfach gleiten, fühlt es sich an, als ob es um gleitet. Wenn wir das ganze Gewicht, die Größe eingeben und was wir ein Kind sein wollen, nicht wir. Lassen Sie das Kind geben Sie alle Details und das Kind wollen endlich zumindest Belohnung Übung, die sie tun können. Also, anstatt direkt auf einen Home-Bildschirm zu landen, machen Sie es, können Sie etwas Interessantes machen. Also werde ich dazwischen eine neue Zeichenfläche hinzufügen. Um schnell zu zeigen, können Sie auf Einfügen klicken und ich werde Zeichenfläche einfügen. Schnell eine schnelle Animation machen, ich werde einige eine Animation hier zu tun. Also werde ich das Ganze in die Mitte kopieren. So wird es Rechteck, weil Sie den Radius anpassen mussten. Das ist eine andere Sache. Radius ist die Sache, die Sie verwenden, um dies zu tun. Also habe ich diese Ebene zusätzlich hinzugefügt, um zu zeigen, dass wir tatsächlich eine Rate berechnen. Zeigen Sie ein wenig Engagement. Also, was ich hier eigentlich tun werde, ist, dass ich eine andere Schicht hier will, wie eine Ladeleiste. Also, wie kannst du das tun? Dass wir manchmal eine Frage bekommen. Wir machen etwas und dazwischen haben wir eine neue Idee und wir „Wie kann ich das hinzufügen?“ Das ist also ein Trick, den wir leicht machen können. Also, was ich tun werde, ist, als würde ich hierher gehen. Zum Beispiel werde ich eine Ladung wie eine Bar machen. So können Sie einen Kreis zeichnen. Also, wenn Sie bereits Skizze kennen oder wenn Sie wie Anfänger sind, können Sie viele von diesem winzigen Zeug lernen, wie können wir eine Ladestange online machen. Auf Skillshare gibt es natürlich viele, wo sie Ihnen beibringen, wie man die Formen herstellt. Ich werde das jetzt nicht tun, aber ich sage schnell, wenn Sie eine Schere verwenden, können Sie diese Form abschneiden, um wie eine Ladestange aussehen zu können. Ich werde die Breite vergrößern. Bis Sie eine glatte Form haben, werde ich diese abgerundete Ecke hinzufügen. Ich werde wie eine weiße Farbe haben. Zum Beispiel fragen Sie sich vielleicht, was eigentlich passiert? Also geben wir alle Daten ein und ich werde weiter klicken. Es wird dieser Bildschirm sein. Also, jetzt brechen wir diese Verbindung und wir verbinden diesen Bildschirm. Denken Sie wie die Zeichenflächen, denken Sie, wie Prinzip Animation ist einfach, wie Sie eine Reihe von Karten in der Tabelle arrangieren und Sie nur verschiedene Karten verbinden. Von dieser Karte, geh hier. Das habe ich mit dem Filmemachen verglichen, es wie ein Story-Boarding. Aber wenn Sie ein Storyboard anschließen, wird es zu einem Film. Das ist das Geheimnis des Prinzips. Jetzt klicke ich hier, es kam und Laden ist nichts passiert. Das ist also, wo dieses Prinzip super schlau ist. Es ist, als ob Sie Komponenten erstellen können. Komponenten ist wie das Erstellen von Animationen innerhalb der Animation. Also, was das bedeutet, ist wie ein Ladebalken, ich möchte, dass es wie Drehen ist. Also wähle ich diese Ebene aus, erstelle Komponente, du findest sie oben. Klicken Sie dort und ich werde die Zeichenfläche duplizieren. Sie werden also die Zeichenfläche auswählen und auf Befehl D klicken oder kopieren, einfügen, um die Zeichenfläche zu duplizieren. Das ist also der Ladebalken. Wenn ich auf diese Zeichenfläche klicke, diese Seite, um hier zu gehen, das ist es. Aber es gibt nichts Animation, weil wir nichts getan haben. Was wir tun werden ist, wenn ich hier klicke, wird es hier gehen. Außerdem wird es den Winkel ändern. Es gibt eine andere Funktionalität hier. Also habe ich Ihnen schon viel beigebracht; X Y, Ändern der Deckkraft, Erhöhung der Skala, Radius. Letzte Sache, super nette Sache ist Winkel. Also werde ich wie Winkel von 360, so etwas tun. Wenn ich darauf klicke, werden Sie sehen, dass es wie eine schnelle Rotation passiert. Statt 360, wenn Raster 3.600 wird es kontinuierlich drehen. Siehst du, es dreht sich kontinuierlich, aber es ist super schnell. Also zu dieser Zeit, was Sie tun können, wie ich sagte, wenn Sie die Zeitlänge ändern wollen. Es ist wie Filmbearbeitung. Wenn Sie hier gehen und es gibt eine Timeline und Sie können die Timeline erweitern. Ich bin nur Pin-Zoomen hier wie eine Mac-Touchleiste. Wenn Sie den Zoom anheften, wird diese Zeit erweitert und zusammengezogen. In der Zeit, in der ich mich auf drei Sekunden einstellen werde. Es wird also ein bisschen langsamer sein. Diese Animation wird also langsamer passieren, siehst du? Etwas langsamer. Damit wir es bestellen können. Also, was die Sache ist wie diese komplette Animation ist separate Animation in der Zeichenfläche. Wenn ich hier klicke, sollte es animiert werden, da es nicht automatisch animiert wird. Sehen Sie, das Problem ist, dass die Rotation nur passiert, wenn geklickt wurde, weil ich tippen. Also, was Sie tun werden, ist, anstatt zu tippen, Sie gehen, um den Pfeil zu löschen und klicken Sie auf die Zeichenfläche. Es gibt eine Funktion namens auto. Es beginnt automatisch zu drehen, das war's. Also, wenn ich hier klicke, und wenn ich wieder auf das klicke, wird alles kommen. Also, wenn ich zur Empfehlung gehe, Empfehlung möchte ich etwas dramatischer sein, wenn es kommt oder wenn es gemacht wird. Was ich eigentlich tun werde, ist, dass ich alles gruppieren werde , damit ich es animieren kann. Wann immer Sie das Ganze bewegen wollen, müssen Sie es gruppieren. Traurige Sache, wenn ich hier tippe, diese werden statt direkt kommen, ich will wie links und rechts sein, wie wir es vorher getan haben. Ich will so sein wie von hier kommen, siehst du? Ich möchte, dass die Karte wie eins nach dem anderen ist, anstatt alles in der gleichen Zeit zu kommen. So funktioniert die Weltphysik. Wie wenn du drei Bälle wirfst. Also wird es wie gehen eins nach dem anderen basierend auf der Geschwindigkeit. Du wirst also die Physik benutzen, die du in einer Schule gelernt hast, du bist jetzt gewöhnt. Also wirst du diese Dinger hier benutzen. Also, was kommt zuerst? Das erste, was zuerst kommt. Zweitens möchte ich ein wenig Zeitverzögerung sein. Also werde ich mich einfach bewegen. Diesmal ist das eigentlich wie eine Verzögerung. Dies wird zuerst beginnen, das wird an zweiter Stelle beginnen. Diese grüne, dieser Typ hier wird verloren gehen. Etwas zusätzliches passiert, was wir nicht brauchten, siehst du? Diese Gruppe, wir wissen nicht mal, wer das ist. Also werden wir einfach darauf klicken und Animation entfernen. Klicken Sie auf. Sehen Sie die Glätte des Dings. So werden Sie einfach kommen mit dem Prototyp super schnell und klicken Sie auf männliche, nächste, Größe und Gewicht und entscheiden, Gewicht und es ist geladen, und es gibt eine andere Zelle. Es ist erledigt. 9. Überraschende Details hinzufügen: Wie können wir es mit Formen und Farben interessanter machen? Deshalb komme ich auf dieses kleine Konzept, wie können wir die Aktivität in Sachen wie langweiligen Play-Button starten? Das ist einfach funktionell gut, aber es ist nicht so interessant. Also werde ich diesen Aha-Moment hinzufügen, als würde ich hier winzige Mikroreaktion hinzufügen. Also, wie kannst du das tun? Wählen Sie einen bestimmten Layer aus, z. B. den Pfeil. Ich werde es zeigen, streichen Sie nach unten. So wählen Sie die spezifischen Pfeile und klicken Sie auf, Komponente erstellen. Wie ich es vorher getan habe, können Sie diesen Pfeil tatsächlich duplizieren. Du wirst diesen Pfeil ein wenig nach unten bewegen. Weil, wie ich schon sagte, du bewegst etwas nach unten. Von diesem Pfeil zu diesem Bildschirm bewegt sich der Pfeil nach unten. Der geheime Teil ist das, was wir tun werden. Das Lustige ist, dass wir sagen werden, von diesem Pfeil gehen Sie hier automatisch. Von diesem, werden wir sagen, gehen Sie automatisch zurück. Ich kann dir zeigen, dass du diese winzigen Details siehst. Diese winzigen Details, wenn Sie anfangen, es zu bemerken, können Sie in allen Apps bemerken, wie ein Lift oder Uber oder Google, G-mail jede Software hat diese winzige, winzige Sache, die unsere Aufmerksamkeit erregt, dass sie Sie wollen , um den Fokus zu geben. Also, was ich tun werde, ist, wenn ich mit Aktivität beginnen möchte, so werde ich einfach diese Karte nach unten streichen. Also anfangs haben wir es einfach angezapft, um einen Test zu machen. Aber danach gibt es so viele interessante Funktionalitäten. Eine interessante Sache, die ich wirklich liebe, ist Drag Begin. Die Funktion „Ziehen beginnen“ ist also, wenn Sie nach unten ziehen. Also werde ich sagen, ein Drag Beginnt, und der Drag Beginnt dieser Spezifische wie eine Karte. Ziehen bedeutet, ziehen und diese Karte musste kleiner sein, wenn der Zug beginnt. Also, das habe ich gesagt, während du mit jemandem sprichst, den du sagst, und mit einem Drag, musste es kleiner sein. Sie können sehen, wie wenn ich eine winzige Interaktion auf einem einzigen Bildschirm brauche, wird es eine Mikro-Interaktion genannt. Diese Dinge, die wir erschaffen, schaffen wir nicht zwischen den Bildschirmen. Wir erstellen innerhalb des Bildschirms. Wie dieser Pfeil ist dieser Pfeil innerhalb des Bildschirms, wo sie sind winzige Sache. Nun, was ich tun werde, ist, innerhalb des Bildschirms, ich will, dass das größer und größer ist. Also wähle ich diese Gruppe aus, gruppiere alles, Create Component und ich gehe zu Auto. Wie ich bereits sagte, werde ich nach unten skalieren und nach oben skalieren. Wie gesagt, von größerem zu kleinerem Ding und kleiner zu größer. So wird es einfach sein, wie hin und her zu gehen zu sehen. Um dringendere Sache zu geben. Es heißt, Streichen Sie nach unten, um zu beginnen. Also werde ich nach unten streichen. Es fängt an zu blinken, es gibt mir eine Richtung, dass du sofort anfangen musst. Als ich das tat, passiert nichts, weil wir den nächsten Bildschirm nicht verbinden. Aber dieser hier hat perfekt funktioniert. Ich klicke, dieser hier funktioniert perfekt. Wenn Sie diesen Tricks und Tipps nicht folgen, wird es wirklich lange dauern. Da wir den ganzen Trick verfolgt haben und wir wissen, habe ich viele Jahre damit verbracht, all diese Fehler herauszufinden. Ich habe dir alles gesagt, also ist es super einfach für dich. Sobald Sie anfangen, damit zu spielen, ist es super einfach. Jetzt können wir schnell einen Schuss vom ganzen Spaziergang durch super schnell geben. Ich werde es tun, Start. Dann werde ich ein männliches Geschlecht zu wählen, und dann Höhe, dann werde ich das Gewicht 180 lbs zu wählen.Neben Gewicht ist es wie 160, und es ist Laden und gibt mir verschiedene Übung. Wenn ich jetzt nach unten streichen und die Aktivität bereits begonnen hat und ich sie schließen möchte, ist das alles. Du hattest schon ein Konzept und hast dein Konzept wirklich schön gemacht, auf wirklich kurzer Zeit gemacht. Jetzt haben wir das ganze Video der App erstellt. Der nächste Schritt ist das Wichtigste. Es teilt Ihr Design und erhält echtes Feedback von einem echten Benutzer. 10. Teilen Sie Ihr App-Design: Endlich haben wir es geschafft. Wir haben eine App gemacht, die wir eine Idee hatten und nur in unserem Kopf, wir haben gerade in Live-Motion-Motion-Videos gemacht. So ist jetzt der wichtigste Teil. Du wirst dein Design mit Leuten teilen und super offen über. Feedback, Feedback zu erhalten, ist super wichtig. Design macht nicht nur eine endgültige Iteration, dies wird wie 10 Iteration haben. Also wirst du wie super offen sein und Fragen stellen wie so viele Arten, wie warum sie mögen, was sie fühlen. Sie werden eine Menge wie Gefühl Frage stellen, und Sie werden nur zeigen, sie, anstatt ihnen zu sagen, na ja, wie sieht schönes Design aus. Sie müssen eine Frage in der Art und Weise gestalten, dass sie Ihnen viele Kritiker geben können, und ein weiterer zweiter Punkt, der super wichtig ist, ist, dass wir viel Annahme gemacht haben, während wir Design machen. Zum Beispiel, sagte ich, Kinder lieben es wirklich, Illustration zu sehen, Kinder wirklich lieben, diese Art von Skala zu sehen. Sie müssen die ganze Annahme aufspüren, was sind die Annahme, die Sie für sich selbst gemacht haben. Während Sie Ihr Produkt testen, müssen Sie sicherstellen, dass alle Annahmen richtig oder falsch sind. Also wirst du ständig lernen, okay, ich habe diese Annahme getroffen, aber Kinder mögen es nicht einmal. Sie mögen keine Illustration, sie wollen nur ein Drop Down. also die offenen Gedanken haben, machen Sie sich als Designer besser. Anstatt nur zu schieben, dieses Design, das ich gemacht habe, müssen Sie es entwickeln. Auch hier ist es sehr wichtig, Ihnen offen für Feedback zu sagen, wenn Sie ein Designer sind. Wenn Sie sich nicht für Feedback öffnen und wenn jemand sagt, dass dieses Design schlecht ist, wollen Sie das akzeptieren und fragen, warum Sie denken, dass es schlecht ist, wie was spezifische Sache ist schlecht? Wenn du also so viele Fragen stellst, wird es so sein, als ob du auf Dinge hinweisst. Also schauen Sie nicht nach wie zufällig wie vage Feedback. Diese Farben sehen schön aus. Als ob Sie fragen müssen, warum das schön aussieht. Das Gute am Prinzip ist, dass wir, sobald wir die Animation gemacht haben, sie tatsächlich im Computer selbst aufnehmen können. Also gibt es einen Aufnahme-Button hier, gibt es wie eine kleine Video-Taste und Sie darauf klicken, und ich werde wie klicken und ich werde Männlich auswählen, und dann als nächstes und ich werde die Höhe auswählen, als nächstes und ich gehe , um das Gewicht auszuwählen, und ich werde das gewünschte Gewicht auswählen, das ich möchte. Als nächstes, und es wird kontinuierlich geladen, und es gibt Ihnen das Ergebnis und ich werde nach unten rutschen und anfangen. Nachdem die Aktivität erledigt ist, bin ich fertig. Also das ist buchstäblich, die coole Sache über diese, wie sie Sport in das Video, so können Sie überall teilen, Zeichen Fenster, setzt einen Namen. Ich werde auf Speichern klicken. In der Zwischenzeit wird es exportiert, ich werde Ihnen in Photoshop zeigen, dass Sie, während Sie online präsentieren , sicherstellen müssen, wie Ihr Design auf verschiedenen Geräten aussehen wird. Wenn Sie für iPhone X entwerfen, werde ich wie schnelle mobile Mockup zeigen, wo Sie Ihr Video hineinlegen können. Wenn Sie also Adobe CC haben, können Sie tatsächlich ein Video in den Photoshop-Stapel einfügen. Also habe ich bereits ein Mockup gemacht, Sie können online herunterladen, ein Mockup finden. Dann, was Sie tun werden, ist, dass Sie auf Command-O klicken, es ist wie das Öffnen einer neuen Datei, und ich werde wie ein Video öffnen, das wir gerade gemacht haben. Als nächstes genau wie super einfach, Sie werden nur klicken und ziehen Sie hier so, und Ihr Video ist bereits in. Wenn Sie in Photoshop das Video verkleinern möchten, ist es super groß, und ich werde schnell auf Befehlstaste-T klicken, um es zu transformieren, und ich werde es verkleinern, und ich werde mich in die mobile Größe ausrichten. Also richte ich richtig aus, so dass alles perfekt ist, das Video ist perfekt ausgerichtet, und ich habe eine Ebene, die Sie auf die iPhone-Form maskieren können, wie eine Kerbe. Also klicke ich mit der rechten Maustaste auf das Video. Daher müssen Sie zuerst die Gruppierung aufheben, da Sie die Gruppe nicht setzen können. Also werde ich die Gruppierung aufheben. Umschalttaste-Befehlstaste-G, um die Gruppierung aufzuheben, so dass das Video wie eine Ebene wird, wenn Sie schieben und sehen Sie die Videos laufen sehen können. Nun, was Sie tun werden, ist mit der rechten Maustaste darauf, Create Clipping Mask, das ist es. Sehen Sie es, es fühlt sich an wie ein echtes Handy, wie Ihre Videos in einem echten Handy. Wie Sie die Videos zu lang sehen, müssen Sie alle folgenden Ebenen sicherstellen, dass es auch die Videolänge entspricht. Also habe ich alles abgestimmt, du siehst, dass alles perfekt funktioniert , das Video läuft, du bist fertig, und jetzt wirst du auf diese drei Punkte klicken. Wenn Sie auf „Video rendern“ klicken, wird das Video gerendert. Ich habe bereits die Skillshare gesetzt und Skillshare mit Mockup gesetzt. So ist es wie wirklich cool, dass Sie auch Ihre MP4 in wie Skillshare hochladen können. Wenn Sie also gerade folgen, was ich gesagt habe, können Sie Ihr eigenes Mockup anlegen oder Ihre eigenen Geräte auswählen und einfach reinlegen und auf die Skillshare Ressourcen hochladen. Zweitens, was ich teilen möchte, ist, wie Ideen mit Kunden zu teilen. Das hier, es ist wie eine Demo, wie eine Folie, die ich gemacht habe, und ich werde den Prototyp zeigen, den wir gerade gemacht haben. Die coole Sache an Keynote ist, dass Sie nur dorthin gehen und dieses Video kopieren, einfach kopieren und zu Keynote gehen und es einfach einfügen und einfach ein wenig Größe ändern müssen. Eine weitere geheime Sache, die ich vor kurzem gelernt hatte, ist, als ob wir auf die Objektliste klicken , wie eine Ebene zeigen, wie eine Skizze, und Sie werden das Video nach unten ziehen. Ich werde diese Keynote-Datei anhängen, damit Sie das verwenden können, wie das obige Handy, das ich habe, ist es wie ein Mockup. Also kannst du das Modell benutzen. Die Art und Weise, wie Sie mit Clients oder irgendeinem präsentieren müssen , ist, dass ich auf Auto-Startup-Film klicken werde. Wenn Sie also mit einem Kunden präsentieren, können Sie einfach sagen: „Oh, das ist ein Video, das ich gemacht habe“, Sie müssen sagen: „Nun, was ist das Problem, das wir lösen wollen? Wie können wir Kinder und Jugendliche ermutigen sich für die Fitness-App anzumelden, die sie zum ersten Mal sehen?“ also das Problem, das wir haben. Wir können dies mit drei Design-Prinzipien machen. Es kann süß, lustig und aufregend sein. Dann wirst du zeigen wie, oh, das ist Version 1 Konzept, das ich habe, die Umfrage, wir haben wie eine süße Illustration, und dann wirst du es zeigen. Dies ist die Version 2, und dies ist die endgültige Version. Diese Version recherchieren wir mit so vielen Benutzern, sie alle mögen es, und wir bevorzugten diese Version. So präsentieren wir Ihre Arbeit, wenn Sie mit Kunden sprechen, wenn Sie als Anfänger beginnen, sich anzumelden. Der dritte hat wie, jetzt gehen Sie tatsächlich davon aus, dass Sie in einem Unternehmen als Vollzeitrolle arbeiten. Der dritte ist so, wie Sie mit Entwicklern darüber kommunizieren werden welchen Prototyp Sie gemacht haben und sie nur fragen, welche technischen Einschränkungen sie haben. Wie viel Zeit diese Art von Interaktion dauern wird, und auch Sie können sie bitten, zu testen, weil Entwickler sind, wie sie verschiedene Designer sind, aber Sie können ihr Feedback von dem, was sie denken fragen. Der Principal ist dabei super mächtig. Also müssen Sie nur zur Hauptdatei gehen und einfach mit der rechten Maustaste darauf klicken, und wenn wir auf Teilen, Airdrop klicken, zeigt es automatisch mein Handy, und in meinem Handy habe ich bereits eine Haupt-App, die ich aus App Store heruntergeladen habe. Also, jetzt werde ich darauf klicken, und es automatisch senden Sie es sofort Ich öffne meinen Prototyp in meinem Telefon, und das sieht genau wie App aus. Niemand kann unterscheiden, dass dies eine App ist oder das ist wie ein Prototyp. Also, was wir jetzt tun werden, ist, diesen Prototyp meinem Ingenieur zu geben, er wird einfach durchklicken, was ich hier klicke. Zum Beispiel, hier werde ich ihn bitten zu mögen, Sie gehen, um Ihr Profil Details zu füllen. Also werde ich nur gerne offene Frage werfen, und er wird nur klicken, wo er klicken will. Du musst nur schweigend beobachten, was passiert. Sie werden sie bitten, ständig zu sagen, was sie in ihrem Kopf denken „Oh, ich dachte, das wird hier sein, aber es verhält sich so.“ Nachdem Sie so viel durchlaufen haben, wissen Sie jetzt, wie der Rhythmus, den Sie geschaffen haben, die Musik, die Sie erstellt haben, und Sie können den Unterschied spüren, wie Sie im Leben der Menschen Unterschied machen und sie glücklich machen, macht jeden Prozess nahtlos für jedermann zu verwenden. Offensichtlich wird es eine andere Erfahrung sein, da es eine Kinder-App ist, gingen wir für wie mehr Illustration Weg, wenn es Center Price Hub werden wir etwas anderes versuchen, aber Sie werden immer noch ein persönliche Note. Das ist super wichtig. Wenn Sie tatsächlich dem Weg folgen können, den ich Ihnen lehre, finden Sie, dass Sie es mit Ihren eigenen Ideen tun können. 11. Letzte Gedanken: Glückwunsch, schließlich machte es nach dem gelernt, wie man mit einer Idee kommt, wie man Ihre Idee wie ein Drahtrahmen macht, wie man eine deutlich visuell einzigartig macht. Außerdem haben wir gelernt, wie man der App diese persönliche und emotionale Note hinzufügt. Am wichtigsten ist, dass Sie lernen, wie Sie Feedback von Menschen erhalten und weiter iterieren. Ich hoffe, dass Sie durch diese Videoserie eine Menge Dinge und viele neue Dinge gelernt haben. Ich glaube, Sie werden weiter experimentieren und viele neue verrückte, innovative Ideen durch die ganze Welt teilen , die dieses Video ansehen. Vergessen Sie nicht, alle Ihre Entwürfe und wie alle Entwürfe, die Sie in einer Projektgalerie erstellen, zu posten . Nochmals vielen Dank für die Teilnahme an dieser Klasse. Ich bin super aufgeregt und neugierig zu sehen, was du machen wirst. 12. Entdecke mehr Kurse auf Skillshare: