Lernen Sie UI/UX Design durch die Erstellung Ihrer ersten mobilen App!

1. Einführung Angel Davchev: Hölle, Leute. Willkommen. Mein Name ist Sonya. Ich unterrichte diese Klasse. Wir können lernen, wie man ein mobiles Anwendungsgebiet entwirft. Frau macht mich. Ich bin selbst UX Designer. Nun, über fünf Jahre Erfahrung in der englischen startete viele Ampere vom Markt für weinte und wilde Wohnung. Einer von ihnen hält. Let's wurde in Forbes Magazin vorgestellt erhielt den herrschenden Katie Award in den Jahren 2000 und 16. Benutzererfahrungen ständig wachsende Profession-Unternehmen aus der ganzen Welt suchen nach guten Verwendungs-Designer, um ihnen durch ihre Probleme zu helfen, wie sie Designer verwenden. Ihre Aufgabe ist es, den Benutzer bequem mit Ihrem Weg zu machen. Ich freue mich, Sie an Bord zu haben und hoffe, dass Sie viel von dieser Klasse lernen werden. Bleiben Sie dran für eine spannende Reise 2. Kurseinführung: Willkommen an Bord. Meine Damen und Herren, Vielen Dank, dass Sie diese Klasse besucht haben, wo Sie lernen können, wie Sie eine mobile Anwendung für die Buchung von Tickets mit verschiedenen U. Y in neuen X-Techniken entwerfen Buchung von Tickets mit verschiedenen U. können. Dieses Glas setzt voraus, dass Sie über Vorkenntnisse aus einer Designsoftware wie Fotoshop Illustrator für Adobe Experience Design verfügen. Wenn Sie keine Vorkenntnisse haben, sich keine Sorgen. Du kannst immer noch mitverfolgen. Dieses Glas richtet sich an Menschen, die lernen möchten, dass Sie in Ihrem Eierdesign und mobilen Design sind . Ob Sie ein Anfänger, Mittelstufe oder sogar ein Profi sind, ich könnte einen oder zwei Trick in meinem Schlaf haben, der Ihr Wissen erhöhen kann. Lernen ist nie genug. Sie werden lernen, welche Probleme, er persona. Und warum ist es wichtig in User Experience Design, Sie werden lernen, was ist der Benutzerfluss und was ist der Zweck davon. Und schließlich lernen Sie, wie Sie die eigentliche Anwendung entwerfen. Die Software, die wir benutzen werden. 12 Diese Serie wird Sigma genannt und führen Autorität kostenlos bei signal dot com. Feige mehr gehört zu den beliebtesten weichen schlechtesten für Sie. Warum und Sie Eier entwerfen und Sie können es im Browser verwenden. jedoch, Ich empfehlejedoch,dass Sie die Desktopanwendung nicht kennen. Jetzt. Wenn Sie nicht Stigma verwenden möchten, weil Sie eine andere Software verwenden, wie voll von Shop oder Skizze, vielleicht ist das in Ordnung, weil Sie immer noch dieser Klasse folgen können. Jedes Video wird sein eigenes Asset-Panel haben. Hier finden Sie verschiedene Bilder und Icons, die Sie benötigen, um die Videos zu vervollständigen. Da unsere Klasse keine Themen wie ich entwerfen kann oder Fotografie diese Assets verwenden wird , sind sie frei zu verwenden. Und Sie können die Links Recon Puppe sehen, andere Vermögenswerte, wenn Sie möchten. Schließlich werden Sie eine positive Einstellung benötigen, um diese Klasse zu absolvieren. Und denken Sie daran, Lernen ist nie genug. Danke, dass du mein Glas beigetreten bist und lass uns loslegen. 3. Persona für Nutzer: in diesem Video werden wir einen Blick darauf werfen, was ein Benutzer persönlich ist. Und warum ist es im User Experience Design so wichtig? Ich habe den Usurpenten Sana bereits für dieses Video vorbereitet, also werden wir es jetzt noch besprechen. Was zur Hölle ist ein Usurpfer-Weihnachtsmann? Betrachten Sie es als eine fiktive Darstellung von Ihrem idealen Kunden. In der Marketing-Welt gibt es einen Begriff namens Target, und das ist eine Gruppe von Menschen, die dieselben Eigenschaften haben. Verhalten, hohe Altersspanne und Einkommen, die als potenzielle Kunden für Ihr Unternehmen angestrebt werden können die User Experience Welt. Die Benutzerpersona ist etwas Ähnliches. Wenn Sie einen Bruder bauen, sollten Sie immer recherchieren und definieren, wer ein Benutzer sein wird. Dinge wie Gewohnheiten, Bedürfnisse Ziele , Alter , etc. Bereitstellen neuer Benutzer für Sana Durch das Erstellen einer Vorlage haben Sie ein klares Verständnis dafür, wie Ihr Produkt aussehen und sich anfühlen sollte. Wenn Sie möchten, dass Benutzer Ihr Produkt verwenden, sollten Sie es so erstellen, dass es ihnen gefällt. Denken Sie daran, dass Sie immer für die Benutzer erstellen, da der Benutzer derjenige ist, der Ihr Unternehmen vorantreibt. Wenn Ihr Benutzer durch Ihre APP navigieren kann. Held, fleißige Zeit als User Experience Designer, sollten Sie das Verhalten der Benutzer folgen und das Produkt auf diese Weise erstellen. Als allgemeine Faustregel betrachten die Benutzer als kleine Kinder, die leicht verloren gehen, wenn sie keinen Pfeil sehen ihre Richtung zeigt. Lassen Sie uns nun unsere Benutzerpersona untersuchen. Wenn Sie Google Usurper Sohn von Vorlagen, sollten Sie etwas Ähnliches finden. Der Zweck der Vorlage ist es, die Gruppe von Menschen zu personifizieren, die wir kamen, um die Benutzer aus unserer Anwendung zu sein , die einen Job viel einfacher machen, wenn wir ein klares Verständnis haben , was wir bauen sollten und für wen wir es bauen. Nehmen wir an, unser Anwenderforschungsteam hat uns genügend Daten für uns zur Verfügung gestellt, um diese Vorlage zu erstellen . Wie Sie sehen können, heißt unser Benutzer Tobias Swenson. Er ist ein 24-jähriger Student aus Göteborg, Schweden. Er ist ein ausgehender Mensch, feiert gerne an den Wochenenden und reist an neue Orte, wenn er kann. Wie Sie aus einem Bild sehen können, das mit ihm von, äh, , splash dot com ist, wird die Voreingenommenheit selten ohne sein Telefon gesehen. Er ist wirklich aktiv von den sozialen Medien, aber es ist auch erkunden und ausgehend. Das Studium dieser Vorlage sagt uns, dass, obwohl er technisch versiert ist, Kauf eines Tickets für Techno 14 Burling kein Ärger für die Bayous sein sollte. Sein junger energischer und liebt es, realen Wert schnell zu sehen. Genau wie jedes andere Jahrtausendjahr. Er mag seine Social Media, egal ob er Geschichten auf Instagram, Tweets oder Schriftrollen durchstößt . Timeline auf Facebook. wir wissen, dass wir erkennen, dass der Anmeldebildschirm Social-Media-Kanäle enthalten sollte und Tobias als eine Person zu sehen, die aktiv ist, wird frustriert durch langsames Internet, sollten wir wahrscheinlich die Protokollierung mit E-Mail ausschließen, da es erfordert mehrere Schritte, die mit dem Verhalten von unserem Benutzer kollidieren. Eintippen von E-Mails, schnellen Wörtern und das Bestätigen von Passwörtern per E-Mail kann frustrierend für die Voreingenommenheit sein, weil er möglicherweise Internet aus einem Café ausleihen, um Tickets für eine Party zu kaufen. Während dieser Zeit beziehen sich Videos auf die Benutzer-Persona-Vorlage. Wenn wir Entscheidungen in unserem Design treffen werden , dann ist es für dieses Video. Pausieren Sie es und untersuchen Sie den Usurper einige der Vorlage, solange Sie möchten. Vielen Dank für das Ansehen, und ich werde Sie im nächsten Video sehen 4. Benutzerfluss: Willkommen zurück, Leute. In diesem Video erfahren wir, was im User Flow ist und warum ist es wichtig und User Experience Design? Ich habe den Benutzerfluss bereits für ein Projekt entworfen. Schauen wir es uns genau an und untersuchen jedes Teil. Jahre des Flusses ist der Weg, den Benutzer nimmt, um vor in einer Website für eine Anwendung zu vervollständigen . In unserem Fall, da wir eine Ticketbuchungsanwendung entwerfen, leitet der Benutzerfluss den Benutzer, Tickets für sein Lieblingskonzert zu kaufen. Entwerfen und Benutzerfluss ist ein entscheidender Bestandteil jeder Anwendung, da es eine klare visuelle Anleitung definiert, wie die Anwendung aussehen soll und wie der Benutzer mit jedem Rechteck navigiert, stellt einen separaten Bildschirm dar, der innerhalb unserer Anwendung. Die Pfeile geben die Beziehung zwischen dem Bildschirm an. Erstens haben wir unseren Benutzereingangspunkt, die Splash Queen ist. Dies ist der Bildschirm, der angezeigt wird, sobald der Benutzer die Anwendung wünscht. Nachdem die Implikation im Hintergrund geladen wurde, verblasst der Begrüßungsbildschirm und wurde mit dem Anmeldebildschirm angezeigt. Der Anmeldebildschirm ist wichtig für unsere Anwendung, da das Ziel für die Anwendung darin besteht, dass der Benutzer Tickets kaufen kann. Wir brauchen ihn oder ihr Zehengesetz in unsere Bewerbung, um Kuss oder ihre persönlichen Informationen zu erhalten . Nachdem sich der Benutzer angemeldet hat, wird ihm der Party-Lee-Bildschirm angezeigt. Hier kann der Benutzer eine Liste der Parteien finden, die für den Tag zur Verfügung stehen. Wie wir sehen können, kann der Benutzer auf den Kalenderbildschirm gehen, wo er oder sie einen Tag im Kalender auswählen und sehen kann , welche Partei für diesen bestimmten Tag verfügbar ist. Von hier aus kann der Benutzer auch auf Tickets Queen zugreifen. Wenn der Benutzer noch keine Tickets gekauft hat, wird er auf einem leeren Bildschirm angezeigt. Jetzt ist das Entwerfen eines leeren Bildschirms ein wichtiges Trading User Experience Design. Als Designer sollten Sie immer eine geeignete Grafik, einen Text mit dem angegebenen leeren Zustand und einen Aufruf zur Aktion, der den Benutzer nie gegeben hat und ihn nicht in einer Sackgasse lässt. in unserem Fall keine Tickets verfügbar sind, Wennin unserem Fall keine Tickets verfügbar sind,sollten wir einen Call to Action hinzufügen, der so etwas wie Tickets jetzt kaufen sagt und wir werden den Benutzer wieder in den Zyklus bringen . Okay, also zurück zum Party-Listenbildschirm, wenn der Benutzer auf mindestens Element in einem Party-Lee-Bildschirm tippt . Er wird an die Single Parties Queen weitergeleitet, die Details zu dieser bestimmten Partei wie Party-Veranstaltungsort, den Ticketpreis enthält . Wenn die Show gestartet wird, sowie ein kleines Videobeispiel für diesen bestimmten Deejay vom Single-Party-Bildschirm, kann der Benutzer zum Videobildschirm navigieren, wo er das verfügbare Video-Sample ansehen und sich mit den DJs Musik. Das Wichtigste, was der Benutzer in der Single-Party-Bildschirm tun kann, ist, Tickets für diese bestimmte Partei zu buchen . Er wird dann auf den Buchtickets Bildschirm gebracht , den er oder sie in den Kreditkarteninformationen auswählen kann, wie viele Tickets zu kaufen sind. Danach ihm oder sie eine Erfolgsmeldung angezeigt. Wenn der Kauf erfolgreich war oder eine Fehlermeldung, wenn der Kauf nicht abgeschlossen wurde, ist die Anzeige einer Erfolgs- oder Fehlermeldung für den Benutzer von entscheidender Bedeutung, wie er oder sie ist. Feedback darüber zu geben, ob die Tickets gekauft wurden oder nicht Feedback an den Benutzer gegeben ist eines der wichtigsten Dinge im User Experience Design, denn als Designer sollten Sie den Benutzer nie in einem Zustand lassen, in dem er oder sie nicht weiß, was passiert. Nachdem die Tickets erfolgreich gekauft wurden, wird der Nutzer dann zur Kartenkönigin gebracht, wo ihm die gekauften Tickets angezeigt werden. Damit wird der Pfad, den der Benutzer einnimmt, abgeschlossen. Er vervollständigt den gesamten Zyklus mit unserer Anwendung. Und das schließt unser Video ab. Wir sehen uns in der nächsten. 5. Splashscreen: in diesem Video lernen wir, wie man einen Begrüßungsbildschirm für ein Projekt gleitet. Der Begrüßungsbildschirm ist ein integraler Bestandteil mehr während der Anwendung, weil es das erste ist, was der Benutzer sieht. Sobald er die Anwendung beobachtet, wird sie in beide Richtungen bedient. Es deckt den gesamten Bildschirm ab, während die Anwendung im Hintergrund geladen wird. Wenn der Benutzer keine Formel mit der Implikationsmarke erhält, wird einer der Hauptbildschirm geladen, der Begrüßungsbildschirm verblasst. Lassen Sie uns nun einen Begrüßungsbildschirm für unser Projekt erstellen. Wählen Sie Direct Channel 2 aus oder drücken Sie die Taste befinden sich auf der Tastatur. Zeichnen Sie ein Rechteck, das den gesamten Bildschirm bedeckt. Ändern Sie den Namen des Layers BG für den Hintergrund und bewegen Sie sich zum unteren Rand der Ebenen. Stapel Genie Farbe zu einem B 1540 Nun lassen Sie uns die untere für die Anwendung erstellen. Wählen Sie die Lippen aus, die Sie einschließen möchten. Klicken Sie auf diesen Wechselbalg, um dessen Proportion und sich ändernde Größe zu beschränken. 260 Pixel zentriert genug. Entfernen Sie sein Feld und das Ah, 40 Pixel Strich, um es. Duplizieren Sie diesen Kreis und so, wie der vorherige. Bei einem Effekt, mit einem Tropfen flach mit 44 Pixeln, verwischen und entfernen Sie die Werte von ex und warum ändern Sie seine Farbe in TD zu Pacey. Wechseln Sie nun zum Bedienfeld „Assets“ und wählen Sie dieses Bild aus. Dies ist ein freies Bild von dumpf all it. Von splash dot com. Bewegen Sie es zu unserer gespritzten Königin und gesenkt auf die Höhle Stab. Wählen Sie die erste, um springt und das Bild rechts Klicken Sie auf Als Maske verwendet auswählen. Wählen Sie die Durcheinander Gruppe und die erste Ellipse aus. Gruppieren Sie sie zusammen. Ändern Sie den Namen in Lovell Image. Lassen Sie uns nun das Typwerkzeug verwenden und Burling eingeben. Auf jeden Fall. Tickets ändern die Farbe Weiß seine Größe auf 30 Pixel und Mitte morgen. Brechen Sie das Wort, so dass Berlin und Technol in einer Zeile sind. Tickets sind wahnsinnig. Wählen Sie sowohl Berlin als auch Techno Werke aus und änderte das Frontgewicht in Bolzen. Wählen Sie die Tickets arbeiten und änderte sein Gewicht auf Licht. Großartig. Jetzt können wir es zentrieren. Wählen Sie sowohl das Logo-Bild als auch die Berliner Techno-Tickets aus. Gutes sie zusammen. Rufen Sie das tiefer an und zentrieren Sie es auf unserem Bildschirm. Großartig. Jetzt haben wir unsere Splash Queen 6. Logn: Willkommen das, Leute. In diesem Video lernen wir, wie man einen Anmeldebildschirm für ein Projekt entwirft. Nun, ah, Anmeldebildschirm ist kein entscheidender Teil für eine Anwendung. Aber in unserem Fall ist es das. Da sie glücklich sind, ist es, Tickets zu kaufen. Wir brauchen ein paar Benutzerinformationen, die Greaser-Persona studieren. Wir sehen, dass unsere Nutzer gerne Social Media nutzen. Also statt zu entwerfen, gehören, Bildschirm warum Benutzername des Passworts. Wenn wir das Passwort eingeben, verwenden wir Social Logging. Social Logging ist eine einfachere Möglichkeit für Personen, sich bei einer Anwendung anzumelden. Da die Informationen bereits zu einem Social-Media-Kanal zur Verfügung gestellt werden. Lassen Sie uns jetzt einen Anmeldebildschirm entwerfen. Zuerst wählen wir eine längere und mit einem großen oben Jetzt werden wir die Flaschen für eine Social-Media-Protokollierung erstellen , wählen Sie das Rechteck-Werkzeug klicken Sie auf diejenigen und geben 345 Pixel für die mit und 60 Pixel. Sie für die Höhe den Eckenradius für Pixel, ÄndernSie für die Höhe den Eckenradius für Pixel,und zentrieren Sie ihn nach oben. Lassen Sie uns die Farbe der Zehe ändern. Three B 59 Mein Name, der ein Hex Farbe für Facebook ist. Es sei denn, dass in der Tat ein Drop Shuttle mit 10 Pixel verschwommen, fünf Pixel voll von I Wert und 20% Kapazität. Großartig jetzt. Also lassen Sie die Typ-Tool und Eingabe kommen weiter mit Facebook und legen Sie diese oder die Grundlage für unteren Änderungen Gewicht, Fett und Größe 24 Pixel. Nun, da Bellis Loy eine verdichtete Form ist, ändern wir den Buchstabenabstand auf 4%. Lassen Sie uns die weiße Mitte der Füllung von Yeah ändern, und gehen wir zu unseren Asset-Panels. Lassen Sie uns diese Facebook auswählen. Ich komme, Ich stelle es zur Verfügung und ziehen Sie eine Tür zu unseren Kameras, wählen Sie das Facebook-Symbol und die Basis ihrer Flasche und zentrieren Sie sie nach oben, gruppiert zusammen für den Facebook-Boden. Großartig. Nun lassen Sie uns diese Flasche duplizieren, indem Sie sie auswählen, Bolzen auf Ihrer Tastatur halten und nach unten ziehen. Lassen Sie uns Änderungen Gmail fortzusetzen. Jetzt schicken wir sie mit der anderen Arbeit hoch. Jetzt lass uns die Facebook gehen. Ich komme mit dem Jimmy, wie ein Messer im Asset-Panel. Also, wie die Jimmy gerne auf und zog über Konto, wählen Sie die Basis von unten und zentrieren Sie sie nach oben. Nun, endlich, müssen wir die Farbe auf diese Basis ändern, und Veränderungen ändern sich. Um mehrere zu sehen 1610 Große. Jetzt haben wir unseren Blogging-Bildschirm 7. Party: Hallo, Leute. Willkommen zurück in diesem Video, wir werden die Partei Lee Screen für die Anwendung zu entwerfen. Die Parteilisten. Queen ist im Wesentlichen der Hauptbildschirm unserer Anwendung, da es ein Zugangspunkt zu vielen verschiedenen Bildschirmen ist, wie dem Kalenderbildschirm, dem Ticketbildschirm im Single-Party-Bildschirm. Der Hauptzweck aus der Parteiliste Bildschirm ist es, dem Benutzer eine Liste der verfügbaren Parteien zur Verfügung zu stellen , auch sie so in Nicht sprechen und lassen Sie uns zum Geschäft. zunächst Wählen SiezunächstIhr Rechteck-Werkzeug aus und zeichnen Sie ein Rechteck über den gesamten Bildschirm. Ändern Sie seinen Namen in Jeep für Hintergrund und verschieben Sie ihn in der letzten Reihenfolge nach unten. Ändern wir seine Farbe auf 071 9 zu 3. Lassen Sie uns nun auf dem Bild verwenden, um unseren Hintergrund zu verbessern. Visuell möchte ich dieses Bild nicht von allen splash dot com, was tun kann, ist gut kostenlos. Also lassen Sie dieses Bild in Ziehen. Es funktioniert auf unsere Kameras drei Größen und positioniert es nach echten Wünschen. Lassen Sie uns nun das Bild in unserem Ebenenstapel nach unten verschieben. Großartig. Okay, lassen Sie uns ein weiteres Gefühl zu diesem Bild hinzufügen, das wird eine lineare Zutat mit der gleichen Farbe wie der Hintergrund auf beiden Farbstopps wählen Sie die erste Grady in Punkt, und wir haben seine Kapazität auf Null verschoben nur dies, bis es sich gut mit dem Hintergrund vermischt. Jetzt werden wir Ach, Heather auf unseren Bildschirm haben . Später werden wir dies in eine Komponente konvertieren. Feel more ermöglicht es uns, Komponenten zu erstellen, und wir verwenden sie über mehrere Bildschirme, die unsere Arbeit sehr erleichtern. Plus, wenn wir eine Änderung vornehmen, wird es auf alle Komponenten Kopien reflektieren. Wählen Sie das Rechteck-Werkzeug erneut aus, und zeichnen Sie ein Rechteck, das voll mit den Änderungen ist. Höhe: 140 Pixel. Benennen Sie dieses BG als Hintergrund um und verschieben Sie eine Ebene im Layer-Stapel nach unten. Klicken Sie auf diesen Augapfel daneben, um die Ebenen auszublenden. Hintergrundgruppe verwendet Steuerung Genome Ihre Tastatur, und wir nannten diese Gruppe Zehe Heller. Wählen Sie nun die Zeit, um in Tipppartys in Berlin. Wechseln Sie das Telefon. Babel schneit das Telefon Größe 30 Pixel, das Frontgewicht zu fett. Der Buchstabenabstand auf 4% seit Bevan Rauschen eine verdichtete Form und schließlich änderte die Farbe Zehe weiß. Das wird unser Titel sein. Bewegen Sie den Titel in den Kinderwagen und bewegen Sie ihn nach oben. Wählen Sie den Augapfel erneut neben der Bodenschicht aus, um den Hintergrund zu sehen. Bewegen Sie nun den Titel 20 Pixel von der Unterseite des Hintergrunds sagte Augapfel wieder auf dem Hintergrund Spieler. Lassen Sie uns nun mit Titel kopieren, indem Sie alt halten und nach oben bewegen. Ändern Sie die Größe des Telefons 18 Pixel, verschieben Sie es nach links und verschieben Sie 14 Pixel vom oberen Rand des Titels. Okay, wir werden das in ein Date ändern. Zum Beispiel 17. November 2000 und 18. Lassen Sie es uns entsprechend positionieren. Nun gehen wir zum Asset-Panel und greifen die Symbole, die ich selektiv zur Verfügung stellen, und verschieben Sie sie zu unseren Kameras. Verschieben wir sie in den Ordner des Mörders und positionieren sie am Rand des Bildschirms nach rechts. Richtet sie mit der Spitze aus dem Tag und lassen Sie uns ihre Farbe Zehe weiß ändern. Die Zyklen werden jeweils den Ticketbildschirm und den Kalenderbildschirm darstellen . Okay, so wählbar und verschoben, um, 15 Pixel vom Rand des Bildschirms. Großartig. Okay, wählen wir unseren Header Fuller aus. Nun, was ist toll, im Fernsehen ausgewählt und klicken Sie, dieses Symbol würde nur eine Komponente Signal über kreative informiert erstellen, obwohl unsere Ordner Lassen Sie uns nach links bewegen und Let's Kobe aber halten alte und trinken rechts auf unsere Campus. Dadurch wird nun eine Kopie aller unserer Komponenten erstellt, die wir auf allen unseren Bildschirmen verwenden können. Mal sehen, wie die Komponenten funktionieren. Wir haben einen Fehler gemacht, die Werkgruppen in unseren Titel zu schreiben. Lass es uns ändern. Mountain Tore Messer von Born und lässt Sie nennen die Änderungen reflektieren auf unsere Kopie auf der rechten Seite. Sehen Sie, so einfach funktionieren diese mit Komponenten in Signalen. Jetzt bleibt uns das einzige, was übrig ist, die Parteiliste selbst zu erstellen. Wählen Sie oder eine einzelne, auch. Klicken Sie einmal auf 325 Pixel für die Woche und 120 Pixel für die Höhe. Nur dies in die Mitte des Bildschirms und ändern Sie die Farbe Zehe. Ein Rindfleisch 1540 Ändern Sie die Koronare vier Pixel und lassen Sie uns auf effektiv ein Trommel-Shuttle . 10 Pixel Unschärfe fünf Pixel für die weiße werden Sie und 24 7 40 Deckkraft ändern Delayer BG für Hintergrund. Bewegen Sie sich, um sein Panel zu verhaften und wählen Sie dieses Bild, die Donald es wieder von einem splash dot com haben. Gehen Sie einfach zu splash dot com und geben Sie techno in die Suchleiste ein. Sie können viele Bilder finden, um mit selektivem Bild zu spielen und ziehen Sie es über unsere Kameras . Lassen Sie uns mit 95 Pixel anpassen, 97 Pixel für die Höhe. Verschieben Sie dies entsprechend in unser Panel und passen Sie 10 Pixel von links vom Rand an. Ändern wir den Eckenradius in zwei Pixel. Wählen Sie sowohl das Bild als auch den Hintergrund und gruppieren Sie sie mit der Steuerung G. Lassen Sie uns diese Gruppe in Liste umbenennen. Ich habe es gesagt. Wählen Sie den Typ aus, den Sie erneut eingeben möchten. Du kennst Kravitz. Ändern wir die Ausrichtung nach links bis zur Mitte. Ändern Sie die Farbe Zehe Weiß und ändern Sie die Schriftgröße 24 Pixel. Positionieren Sie diese und die Linie von 10 Pixel von rechts aus dem Bild Kaffee Destexhe, indem alte halten und ziehen Sie es nach unten. Ändern Sie die Schriftgröße auf 18 Pixel und das Telefon warten, um zu buchen, hat das Feld geändert. So Passivität zu 70%. Und lassen Sie uns dies in Burke Hind ändern, Pamela Rama und Bar Wählen Sie sowohl die Geburt Art Text und Kravitz und gruppieren Sie sie zusammen. Nennen Sie das schmerzhaft und verschieben Sie es in unseren Listeneintrag. Wählen Sie diese Gruppe aus und duplizieren Sie sie, indem Sie die alte Taste gedrückt halten und nach unten ziehen. Vergrößern wir uns und lassen Sie uns die Decks abwischen. Verschieben Sie diese nach oben und verschieben Sie sie nach unten. Jetzt ändern. Dies beginnt und ändern Sie dies auf 13 Uhr. Ändern Sie seine Telefongröße Zehe, 18 Pixel und dieses Telefon Größe 14 Pixel und dann nur sie entsprechend. Lassen Sie uns seine Gruppe umbenennen Start dupliziert, indem Sie alt halten und nach rechts ziehen. Verschieben wir sie 20 Pixel voneinander. Ändern Sie diesen auch Preis, der den Ticketpreis anzeigt und ändern Sie dies in etwas wie 18 Jahre alt. Benennen Sie dies entsprechend um. Jetzt bleibt uns nur noch ein Aufruf zum Handeln zu entwerfen. Ah, kalte Richtung ist etwas, das Aktionen für den Benutzer anstiftet. zum Beispiel Kaufen Siezum BeispielTickets. Schnappen Sie sich den Text in der Eingabe von Geschenkgutscheinen. Lassen Sie uns die Form eines Busses ändern. Die lustige Größe 14 Pixel. Lass uns das nach links bewegen. Setzen Sie es in den West-Titel und ändern Sie seine Farbe in e. D. Two d. J. J. C. Ändern Sie den vorderen Weg, um zu stimmen und lassen Sie uns zoomen, um dies an den Ball anzupassen. Jetzt habe ich auf Pfeil-Symbol zu den Assets hinzugefügt, also lasst uns es packen und ging zu unseren Kamelen. Okay, lässt die Position von hier. Lassen Sie uns es in unsere Liste Artikel Gruppe verschieben. Jetzt lass es uns bewegen. 10 Pixel oder fünf Pixel von den Get Tickets. Lassen Sie uns beide auswählen und gruppieren. Wir nennen diese Stadt acht. Was steht Call to action, Mehr Tür zum Rand unseres Hintergrunds für Listenelement und Magie. 10 Pixel nach links. Großartig. Wir wissen, dass wir unseren Listenartikel entworfen haben. Schließlich werden wir dieses Listenelement in eine Komponente konvertieren. Also können wir es wieder benutzen? Lassen Sie uns es auswählen und klicken Sie auf, Konformität erstellen, verschieben Sie es nach links und co bezahlt, indem Sie Holt halten und ziehen Sie es zurück in Richtung Kamera. Lassen Sie uns senden Es wurde viermal dupliziert, halten alte nach unten gezogen und mit etwas wie 10 Pixel tun die GAM und schließlich, vier Sache. Es sind also all diese Titel. Er hat ihn an den unteren Rand des Bildschirms geworfen und bewegt sie. 15 große soziale. Die Flasche. Okay, also haben wir jetzt die Listengegenstände für unsere Partys. Ich werde das Video auf „Daten füllen“ veröffentlichen. Willkommen zurück. Wie Sie sehen können, berechnete ich die Daten für eine Vielzahl mit verschiedenen Deejay-Namen, Veranstaltungsorte , Ticketpreise, etc. Ich habe auch die Bilder von den verschiedenen Parteien geändert. Nun Signal erlaubt es uns nicht, Bilder oder andere Elemente in unsere Komponenteninstanzen hinzuzufügen. Die Art und Weise, wie wir dies lösen, besteht darin, alle Bilder in eine Master-Komponente zu setzen. Gehen Sie zum Listenelement und klicken Sie auf die Aibos aus den Bildern, die Sie nicht zeigen möchten , und das war's. Jungs hätten den Bartoli-Bildschirm nicht fertig. Bisher haben wir viele Dinge gelernt, wie zum Beispiel, wie ein Listenelement mit Bildern, Informationen und Call to Action organisiert werden soll . Schließlich lernen wir, was sind Komponenten in Abb? MMA? Wie man mit ihnen arbeitet und warum sind sie wichtig im Design? Danke, dass Sie zugesehen haben. Ich werde Sie im nächsten Video sehen. 8. Single: Willkommen zurück, Jungs und Mädchen. In diesem Video werden wir den Single-Party-Bildschirm entwerfen, wie bereits in dieser Königin erwähnt. Wir werden die Details über die selektive Partei angeben, wie den Namen des Deejay, den Partystandort, das Datum, die Uhrzeit, an der der Deejay beginnt, sowie den Ticketpreis. Wir werden auch das Beispielvideo des Deejay setzen, damit der Benutzer ein besseres Gefühl bekommen kann oder welche Art von Musing? Dieser Deejay Ort aus der Benutzererfahrung. Perspektive. Dies ist ein wichtiges Merkmal für unsere Anwendung. Endlich, in diesem Grün, werden wir einen Call to Action unten setzen, damit der Benutzer Tickets für diese Party kaufen kann. Okay, fangen wir an. Erste Dinge zuerst. Wir werden das Vollbildbild verwenden, damit wir den Hintergrund visuell verbessern und ihm ein dunkles Weiß geben können , was mit dem Abzug unserer Anwendung ergänzend ist. Wie immer lebe ich dieses Bild nicht von sunsplash dot com. Ich werde es im SS-Panel zur Verfügung stellen, bewegen Sie sich über das Asset-Panel. Also, wie das Bild und verschieben Sie es zurück auf unsere Leinwand, nach unten in den Verstapel gezogen, positionieren Sie es entsprechend. Sie mögen Lassen Sie uns ein weiteres Feld zu diesem Bild hinzufügen, das Polina Grady sein wird. Ähm und wir werden die gleiche Farbe für beide Off-Farbstopps verwenden. Die Farbe wird ein paar von 71 9 zu 3. Und lasst uns die Deckkraft von den Autostopps ändern. Der erste Farbstopp wird 66% Kapazität sein, und der 2. 1 wird so etwas wie 93 glatte Grady Inbar sein. Bis du das nächste Mal magst, verwenden wir die Haarkomponente aus unserer vorherigen Lektion. Kopieren Sie die Haarkomponente, indem Sie Halte Fehler auswählen und auf unseren Campus ziehen. Nun, da der Single-Party-Bildschirm eine nachfolgende Formel Party Lee Bildschirm ist, müssen wir unseren Benutzer weg, um nie wieder zur vorherigen Königin zu kommen. Der Weg, dies zu tun, ist, eine Flasche zurück zu haben. Jetzt, da wir unsere Komponenten und Sachen nicht modifizieren können, müssen wir unsere Master-Komponente modifizieren. Wissen Sie, unser Asset-Panel? Ich habe einen Rücken zur Verfügung gestellt. Ich komme selektiv und Dragon alte Tour Meister Konformität ändern Farbe weiß und Position entsprechend. Am Anfang des Datums, wie Sie in unsere Komponenten sehen können, Instanz, Instanz, können wir das Symbol „Zurück“ sehen. Jetzt. Das einzige, was uns bleibt, ist, das Date zu hype. Klicken Sie auf den Augapfel neben dem Datum, um es zu verstecken. Großartig, wir haben jetzt die Zurück-Taste für unseren Bildschirm. Als nächstes fügen wir den Titel hinzu. Gehen Sie auf das Assets-Panel ausgewählte Dekorationsgrafik, die ich bereitgestellt habe, und bewegen sich über in Richtung Kameras. Öffnen Sie nun Ihren Typ zwei und geben Sie ein. Sie wissen, Kravitz ändern die Größe des Telefons 50 Pixel. Das Frontgewicht ist Abstimmung, und die Farbe ist weiß. Richten Sie diese beiden Dekorationsgrafik aus und bewegen Sie so etwas wie fünf Pixel von der Unterseite . Wählen Sie sie beide gerillt und ändern Sie diesen in einen Titel. So, wie die Titelgruppe zum Heller überging und 50 Pixel von der Unterseite des Haares bewegt , lassen Sie uns unser Detail beenden. Quietschen. Wählen Sie die Uhrzeit für die erneute Eingabe von Datumsangaben aus. Ändern Sie die lustige Größe 18 Pixel, eine Linie auf der linken Seite, ändern Sie die Farbe Weiß und ändern Sie die Deckkraft. 40% richteten diese mit dem Titelhalter Bolt aus und ziehen Sie es nach unten und änderte seinen Laden. Angegebenes Datum, das 17 vom November 2000 und 18. Ändern Sie die Kapazität dieses Feldes 100% und ändern Sie die Telefongröße auf 24 Pixel, richten Sie sie aus und verschieben Sie etwas wie fünf Pixel vom unteren Rand des Datums. Also lass sie beide und gruppiere sie zusammen. Erstellen Sie eine Kopie dieser Gruppe, indem Sie die alte Taste gedrückt halten, und ziehen Sie sie nach rechts. Verschieben Sie diese Gruppe etwa 25 Pixel nach rechts. Ändern Sie dies in einen Speicherort. Ändern Sie dies in Burke Hind Panorama Bar. Ändern Sie die Woche dieses Wortes, damit die Bararbeit darunter geht. Wählen Sie beide Gruppen aus, kopieren Sie sie, indem Sie die alte Taste gedrückt halten und nach unten ziehen. Verschiebt auf etwas wie 10 Pixel durch den Boden. Lassen Sie uns diese Informationen entsprechend ändern, um die von unserem vorherigen Bildschirm widerzuspiegeln. Also fangen Sie an, was einer an mir vorbei sein wird, mein und Ticketpreis , mein und Ticketpreis ,der 18 Jahre alt sein wird. Dies, so wird es hier passen. Lass uns den Ball bewegen. Zwei Gruppen für etwa fünf Pixel mehr. Ok, großartig. Lassen Sie uns zusammen stumm gehen und diese Gruppe in vollem Umfang nennen und so etwas wie 30 Pixel von unten aus unserem Titel bewegt . Jetzt lasst uns das Video haben. Einfacher Kaffee. Eine Gruppe von der Grippe, indem Sie alte halten und ziehen Sie es nach unten, bewegen sich außerhalb von der Gruppe und nennen Sie es Video mit so etwas wie 40 Pixel von der Unterseite des Mpaluku. Lassen Sie uns die Deckkraft der oberen Arbeit auf 100% ändern. Lassen Sie uns die untere Arbeit löschen. Wechseln Sie nun zu unserem Asset-Panel. Also lassen Sie dieses Bild, das ich bereitgestellt habe, und verschieben Sie es zu unseren Kameras, ziehen Sie es in unsere Videogruppe und angepasst wie fünf Pixel an den unteren Rand des Ticketpreises . Ändern Sie den Ticketpreis zu einfachen Jim offiziellen. Nur die mit aus dem Bild 210 Pixel, die Höhe auf 120 Pixel. Der Eckradius vier Gefäße AP ein anderes Gefühl dazu. Es wird eine einfarbige schwarz um 50% Kapazität sein. Die letzte Sache ist zu anderen affektiven Bild, das wird ein Schlagschatten sein. Die Unschärfe beträgt 10 Pixel. Das warum gut, werden Sie fünf Pixel und die Kapazität wird 60% sein. Dadurch hebt sich das Bild vom Hintergrund ab. Das letzte, was Zehe hier ist, ist der Spielboden. Bewegen Sie sich für Assets Familie, Wählen Sie das Spiel unten, die ich zur Verfügung gestellt habe und ziehen Sie es oder auf unsere Kameras. Legen Sie es in die Videogruppe. Lassen Sie uns Century, indem Sie das Spiel unten und Bild auswählen und es mit unseren Ausrichtungssymbolen gesendet . Großartig. Wir haben jetzt Video-Sample. Durch Klicken auf diese, wird der Benutzer zu einem neuen Bildschirm kalt. Der Videobildschirm. Jetzt ist das einzige, was fehlt Toe unser Design ist der Aufruf zur Aktion unten Copia Butter von unserem Login-Bildschirm und zog über zu unserem Campus, Ausrichtung auf den unteren Rand des Bildschirms und bewegt etwas wie 15 Pixel von etwa. Nun lasst uns dies in Stadt A umbenennen, um zu handeln. Lassen Sie uns dieses Symbol löschen. Ändern Sie dies in Geschenktickets. Lassen Sie uns die Farbe ändern, um Sie sind so in einer Zeile. 23 Lassen Sie uns auch die Farbe dieser Hintergründe zu diesem gewesen Auto ändern, die et tu de sie jetzt sehen. Das letzte, was hier zu tun ist, ist, eine Komponente aus unserem Aufruf zum Handeln zu erstellen, um es auf anderen Bildschirmen zu verwenden, klicken Sie auf die Komponente beenden Tyco und ziehen Sie es über außerhalb, kopiert durch Halten alten und trinken zurück auf Tour kam mit lasst uns es entsprechend positionieren. 15 Pixel von der Unterseite. Das war's, Leute, das schließt unsere Lektionen. Wir sehen uns im nächsten. 9. Tickets buchen: Hallo wieder, Jungs und Mädchen. In diesem Video werden wir weiter auf unserem vorherigen Design, dem Single-Party-Bildschirm, aufbauen . Wir werden einen Ticketbuchungsteil entwerfen, der in einem Modell präsentiert wird, das vom unteren Bildschirmrand direkt nach dem Klick auf den Call to Action gleitet. Aber besorgen Sie Tickets. Der Zweck davon ist vorteilhaft für den Benutzer, weil er nicht den Fokus verlieren wird, indem navigiert wird. Zwei verschiedene Bildschirm in diesem mehr wird den Benutzer bitten, seinen Namen und Kreditkartendaten in Rio einzugeben , um einen Kauf für die Tickets zu tätigen, wenn sie sensiblen Daten wie Kreditkartendaten arbeiten . Es ist von größter Bedeutung, dass Sie nicht glauben, dass der Benutzer in der Voy nicht weiß, was mit seinem für ihr Geld vor sich geht . Aus diesem Grund muss DF dem Benutzer Feedback geben, was vor sich geht. Okay, lass uns das Reden verlassen und lass uns zur Sache gehen. Erste Dinge zuerst. Stellen Sie sicher, dass Sie eine Kopie des vorherigen Bildschirms haben, da wir einige Dinge löschen werden, nachdem Sie die vorherige Königin den Titel geliefert haben. Die Info begrüßt im Videobeispiel, aber lassen Sie die Call-to-Action-Flasche. Da wir später verwenden werden, klicken Sie einfach auf den Augapfel nächste Woche, um es zu verstecken. als nächstes Wählen Sieals nächstesdas Hintergrundbild aus und wenden Sie effektiv an. Der Effekt ist Leibler 20 Pixel für das M O. Der Grund, warum wir den Hintergrund verwischen. Sie arbeiten den Fokus des Benutzers auf den Gleitdarm. Der Hintergrund wird immer noch da sein, aber weniger prominent. Wählen Sie nun Ihr Rechteck aus und zeichnen Sie ein Rechteck, das die ganze Woche ist, aber ändern Sie seine Höhe auf 600 Pixel. Klicken Sie auf diesen Zyklus neben der Ecke. Bradys Schweiß Unabhängige Eckenradius zum direkten Winkel in den ersten 2 Eingabefeldern hatte 15 Pixel und lassen den Rest von Null. Das erste Mal Fuß fühlt sich auf die obere linke und obere rechte Ecke beziehungsweise bezeichnet. Nur diese Schicht, so ist es so am unteren Rand des Bildschirms. Nun ändern wir die Farbe Zehe eine B eine Frau für Null und lassen Sie uns ein anderes Gefühl, es, das wird einfarbig schwarz um 40% Kapazität sein. Schließlich ändern wir die Farbe Motile Dis Layer den Ausschluss und ziehen ein Rechteck in den Layer-Stapel . Öffnen Sie nun Ihren Typ zwei und geben Sie ein Ticket ein. Die lustige Größe ist 18 Pixel. Die vorderen Löhne Schüssel und die Farbe ist weiß. Aber ändern Sie die Deckkraft. 40% duplizieren dies, indem Sie alt halten und nach unten ziehen. Benennen Sie es zu bedeuten, Oh Kravitz, ändern Sie die Schriftgröße 40 Pixel und ändern Sie die Deckkraft wieder auf 100%. Jetzt lasst uns genau das haben und wir werden fünf Pixel unten lesen. Wählen Sie beide aus und verschieben Sie sie hierher. Passen Sie ihn an und lassen Sie sie wie 10 Pixel fallen. Öffnen Sie nun das Rechteck wieder und klicken Sie einmal. Ändern Sie die Breite auf 95 Pixel, und die Höhe auf 75 geändert ein paar auf das gleiche Hopping wir für einen Aufruf zur Aktion Flaschen verwenden , viel diese in der oberen rechten Ecke unseres Modells. Und lassen Sie uns einen Chor individuell mit 15 Pixeln im zweiten Eingabefeld haben, um nur die obere rechte Ecke zu glätten . Lassen Sie uns nun eine Kopie unseres Etiketts fahren, indem Sie alte halten und es auf Torpedo-Hintergründe ziehen. Wählen Sie sowohl den Hintergrund als auch die Beschriftung und Sentara ändern Sie die Farbe dieser 2071 93 und ändern Sie die Deckkraft auf 70% bringen dies auf die Gesamtspur von Cope Jalloh V, indem Sie alt halten und nach unten ziehen, ändern Sie dies auf 18 Jahre alt, Ändern Sie die Schriftgröße auf 34 Pixel und bringen Sie die gewünschte Deckkraft von gutem Prozent zurück. Zentrieren Sie beide. Wählen Sie alles aus, was Coleys Hitler zusammenfasst. Okay, lassen Sie uns eine schnelle Anpassung daran vornehmen. Wählen Sie sowohl Nina Kravitz und buchen Sie ein Ticket Texte und die Linie sie an den Rand des Bildschirms. Jetzt nach oben 15 Pixel nach rechts verschoben. Großartig. Jetzt werden wir eine Zahl Stepper zu entwerfen, die den Benutzer mit der Möglichkeit bieten, ein oder mehrere Tickets zu kaufen, Wählen Sie diese Gruppe und dupliziert, indem Sie alte halten und ziehen Sie es nach unten. Löschen Sie alles darin, außer diesem Etikett. Wir haben diesen Toe benannt, wie viele Tickets jetzt über zu unserem Asset-Panel und wählen Aiko erhöhen und verringern, die ich bereitgestellt habe. Bewege sie auf unsere Leinwand und ich mag sie an den Rändern des Bildschirms. Verschieben Sie das Plus Ich komme 10 Pixel nach links. Wählen Sie den Nebenzyklus und die Justiz in der Zeile mit diesem Text aus. Jetzt wählen Sie sie beide und Mitte von ihnen alle großartig. Öffnen Sie Ihren Typ zwei und geben Sie einen ein. Dies wird der Anfangsbetrag von Tickets ändern Sie die vordere Größe auf 50 Picks aus und die Farbe weiß. Zentrieren Sie diese und wählen Sie sowohl die Symbole als auch die Korrektur und wählen Sie und Landau vertikal gruppiert zusammen. Und nicht in dieser Gruppe. Wer hat diese Gruppe benannt, um Stepper zu nummerieren. Okay, jetzt Ausrichtung. 30 Pixel vom Rand dieses Rechtecks entfernt. Okay, Wenn der Benutzer auf das Plus und Minus tippt, wird er den Betrag anpassen, wenn sich die Anzahl der Tickets ändert. Der Preis sollte sich auch ändern, um Veränderungen in Echtzeit widerzuspiegeln. Dies ist von entscheidender Bedeutung für die Benutzererfahrung. Wählen Sie die Zahl Stepper Gruppe und dupliziert, indem Sie alt halten und ziehen Sie sie nach unten, bewegen Sie 30 Pixel nach unten. Wählen Sie diese Gruppe mit Symbolen aus der Nummer aus und löschen Sie sie. Benennen Sie diesen in Benutzername um und ändern Sie auch das Label . Dein Name. Wählen Sie auch die richtige Single aus, und zeichnen Sie ein Rechteck, das 345 Pixel in Wochen und 50 Pixel hoch ist. Ändern Sie den Eckenradius in zwei Picks aus der Farbe Weiß und die Kapazität auf 10% Position . Diese fünf Pixel vom Rand des Etiketts entfernt. Öffnen Sie nun Ihren Typ zwei in der Eingabe des Namens unseres Benutzers, Was ist die Voreingenommenheit, Svensson. Okay, lasst uns die vorderen zwei Circular STD ändern. Ändern Sie den Brief. Abstand 0%. Die Formulargröße beträgt 20 Pixel und die Farbe ist weiß. Nun, Circular STD ist eine besser lesbare Form als Babas Noi. Platzieren Sie es 10 Pixel von der Kante des Rechtecks nach rechts. Okay, das wird wieder unser Eingabefeld sein. Duplizieren Sie diese Gruppe, indem Sie alt halten und ziehen Sie sie nach unten und wieder mit 30 Pixeln. Okay, wir benannten diese Zehenkartennummer und benannten das Etikett auch in eine Kartennummer um, die eine zufällige 16-stellige Zahl eingibt, die in vier Gruppen durch vier Ziffern gruppiert und durch Bindestriche getrennt ist. Dies symbolisiert die Kartennummer, Gold oder Vermögenswerte, Penhall. Und nimm die Monsterkarte niedrig und trinke sie in unsere Kartennummer. Sie würden das Gefühl haben, es zu bewegen. 10 Pixel nach links, vom Rand von der rechten Seite vom Rechteck. Okay, wir fügen das Logo hinzu, damit der Benutzer ein visuelles Feedback erhalten kann, dass es sich um eine vorhandene Karte handelt und alles in Ordnung ist. Denken Sie daran, wenn Sie mit sensiblen Daten wie diesen arbeiten. Es ist von größter Bedeutung, dass Sie dem Benutzer Feedback geben. Großartig. Nun gehen wir über sie oder Assets Panel wieder und packten das Fehlersymbol und verschieben Sie es auf unsere Leinwand. Platzieren Sie es an der gleichen Stelle wie das MasterCard-Logo, aber blenden Sie es aus, indem Sie auf den Augapfel neben Ihnen klicken. Dieses Symbol wird angezeigt, wenn eine Kreditkartennummer involviert ist. Darüber hinaus gut auf Fehler-Label unterhalb des Eingabefeldes, das die Kartennummer sagt, ist Valley. Versuchen Sie es noch einmal. Lassen Sie uns das Formular auf 12 Pixel ändern und die gleiche Farbe wie der Fehler verwenden , der E B 001 B. Lassen Sie uns es für jetzt ausblenden. Que lassen Sie uns unser MasterCard-Logo auswählen und es in unserer Kartennummerngruppe platzieren. Lassen Sie uns das Luftsymbol ausblenden, indem Sie auf den Augapfel daneben klicken. Wählen Sie die Kartennummerngruppe aus und duplizieren Sie sie erneut, indem Sie die Form gedrückt halten und sie nach unten ziehen und 30 Pixel von der Kante aus dem Eingabefeld für die Kartennummer verschieben. Jetzt wird dieses Dach das Ablaufdatum für Kreditkarte sein. Benennen Sie es um und ändern Sie LaBella's gut. Jetzt werden wir das Muscle Car Logo, das Terror Level und das Fehlersymbol löschen . Weil wir sie nicht brauchen. Ändern Sie dies auf Oktober 2000 und 20, die das Ablaufdatum für ein Auto angeben. Jetzt gibt es keine Notwendigkeit, dass dieses Rechteck diese große Celeste ist. Passen Sie damit an. Wählen Sie nun diese Beschriftung und ein Rechteck aus und zentrieren Sie sie nach oben. Großartig. Wählen Sie nun Ablaufdatum Gruppe und konkurrieren Sie erneut, indem Sie alte und ziehen Sie es nach rechts dieses Mal und heiratete 30 Pixel nach rechts. Dies wird die Karten ernsthaft Nummer, die geht, die auf der Rückseite von der Karte gefunden wird . Jetzt ist es eine Behandlung Ägypten Nummer. Aber wir werden es verstecken, indem wir Sternchen in Schritt setzen. Wählen Sie beide mit dem Rechteck und der Mitte nach oben aus. Okay, lass mich unseren Aufruf zur Aktion unten verstecken und lasst uns die Stöcke ändern, um zu überprüfen. Okay, jetzt haben wir unsere Buchtickets. Queen Design Wir sehen uns im nächsten Video 10. Kalenderbild: Nun, hallo nochmal. Jungen und Mädchen in diesem Video tauchen tief und entwerfen einen Kalenderbildschirm für die Anwendung . Der Kalenderbildschirm ist ein Ort, an dem der Benutzer ein bestimmtes Datum im Monat auswählen und prüfen kann , ob es Parteien für diesen Tag gibt. Lassen Sie uns jetzt einige echte Fallszenarien sprechen. Es gibt nicht jedes Datum eine Party, an dem die meisten meiner Clubs an Wochenenden und selten an einem Wochentag arbeiten . Das bedeutet, dass unser Kalender es uns ermöglichen sollte, Termine auszuwählen, die geschwächt sind oder nahe daran liegen. In unserem Fall fangen wir von Donnerstag bis Sonntag an. Das bedeutet, dass montags, dienstags und mittwochs ausgeschaltet sind, um zu unterscheiden, welche Tage verfügbar sind und welche nicht, wir einen behinderten Zustand verwenden. Ein deaktivierter Zustand ist ein Zustand, in dem Elemente nicht auswählbar sind. Das heißt, wir müssen sie anders aussehen lassen als das andere Element. Dies wird normalerweise durch Ändern der Farbe und der Kapazität des Elements erreicht. Okay, genug Reden. Gehen wir zur Sache. zunächst das Rechteck, Öffnen Siezunächst das Rechteck,um ein Rechteck zu zeichnen, das den gesamten Bildschirm bedeckt. Benennen Sie es in DJ um und verschieben Sie es nach unten, vom Ebenenstapel. Ändern Sie die Farbe davon, um Sie erraten, es ist Ihre 71923 Okay, Wie Sie sehen können, haben wir eine Kopie über Heather Component auf unsere Kameras platziert. Wir werden den Kalenderbildschirm so gestalten, dass er eine Vollbild-Modellauswahl ist. Um dies zu erreichen, müssen wir einige Veränderungen in unserer Gesundheit vornehmen. Wie Sie sich erinnern, können wir keine Änderungen vornehmen, speichern Installationen, also müssen wir unsere Master-Komponenten aktualisieren, zu ihrem Asset-Panel gehen, das Kleidungssymbol greifen und es in unsere Massenkomponente legen, nach oben und rechts ausrichten. Stellen Sie sicher, dass es an den Kanten einrastet und gehen Sie zu unseren Komponenten in Sachen. Wie Sie sehen können, mit Rep repliziert, dass ich in unsere Instanz komme jetzt Hype das Kalendersymbol auf dem Ticketzyklus, da wir sie nicht endlich den Titel auf unsere Instanz geändert haben, auch. Pflücken. Sie Jetzt lassen Sie uns Design sind tatsächliche Kalender. Gehen Sie zurück zum RSS-Panel und greifen Sie dieses Pfeilsymbol. Platzieren Sie es auf unserer Leinwand und richten Sie nach links aus, erstellen Sie eine Kopie, erhöhen Sie durch Halten, Halten Ziehen Sie es nach rechts rechts. Klicken Sie darauf und wählen Sie „Horizontal drehen“, um es horizontal zu spiegeln. Öffnen Sie Ihren Typ 2 und geben Sie den Monat ein. Denken Sie daran, die Telefongröße ist eine sehr große Quelle. Das Telefon Löhne bolzen, aber änderte die Farbe auf das Hüpfen, das wir für Böden verwendet haben . Zentrieren Sie es auf unserem Bildschirm und wählen Sie ältere Symbole aus. Und die Arbeit November und Gruppe sie zusammen genannt seine Gruppe Kalender Heather. Jetzt werden wir die Kalendertage erstellen. Schnappen Sie sich noch einmal Ihren Typ zwei. Ich tippe die Arbeit in beiden für Montag. Wechseln Sie die Telefone, wartet, um zu buchen. Ändern Sie die Größe des Telefons auf 20 Pixel. Das Auto ist weiß mit 80% Kapazität ausgerichtet. Dies funktioniert am linken Rand des Bildschirms. Jetzt werde ich das Video posten und es noch sechs Mal duplizieren, um die sieben Tage der Woche zu repräsentieren . Willkommen zurück. Wie Sie sehen können, habe ich die Wochentage erstellt und gruppiert sie zusammen oder benennt sie Kalendertage. Jetzt lassen Sie uns die tatsächlichen Daten erstellen, die wir haben. Geben Sie erneut zwei ein, und geben Sie eins ein. Ändern Sie das vordere Gewicht zurück auf beide eine Größe von 30 Pixel. Die Farbe ist weiß und volle Kapazität Platz dies unter unserem Donnerstag ist, das ist der Anfang des Monats bewegt 30 Pixel nach unten. Okay, ich werde das Video nochmal posten und die Daten über den Kalender erstellen. Sparen Sie etwas Zeit. Okay, Leute, willkommen zurück. Wie Sie sehen können , ist ziemlich viel los. Lassen Sie mich das erklären. Ich habe diese Kalender ausgerichtet, Heller und Kalender Tage 50 Pixel von oben aus wählen Sie ein Datum. Und diese Kalendertage sind 50 Pixel vom unteren Rand des Kalenders. Heyler Ich habe alle Rollen gruppiert, die die Daten angeben und sie 30 Pixel pro. Wie Sie sehen können, die Tage von Montag bis Mittwoch eine andere Farbe, die anzeigt, dass es nicht klicken kann . Dies ist der Deaktivierungsstatus. Die Grube aus früher alles, was ich getan habe, war die Deckkraft 30% zu ändern. Dieser Kreis zeigt hier den Fußzustand an. Es ist ein 50 bis 52 Picks Ozean Durchmesser und die Farbe ist die gleiche Sache, die Sie für Flaschen verwenden . Schließlich haben wir unseren Aufruf zum Handeln, der das selektive Datum anwendet und das Handy schließt. Diese Unterseite erscheint auf Lee. Wenn wir das Datum ausgewählt haben, ist es das. Jungs würden das Kalender-Screen-Design nicht haben. Ich werde Sie im nächsten Video sehen 11. Video-Bildschirm: Hallo, schon wieder. Meine Damen und Herren, willkommen zurück zu unserer Serie In diesem Video wird der Bildschirm entwerfen. Hier kann der Benutzer ein kurzes Video einfach sehen, das einen Deejay der ausgewählten Partei darstellt, wenn Sie sich von einem vorherigen Video erinnern, wie man den Single-Party-Bildschirm mit einem Video von männlichen mit einem Play-Boden entwerfen . Wenn der Benutzer auf das Tamil tippt, er zum Videobildschirm weitergeleitet. Jetzt erwartet diese Königin ein Vollbildmodell, wie unser Kalenderbildschirm. Der Benutzer kann das Video sehen und steuern Sie die Video-Timeline mit einer Seitenleiste wie üblich genug sprechen. Lassen Sie uns zur Sache kommen, Öffnen Sie Ihr Rektum und zeichnen Sie ein Rechteck, das den gesamten Bildschirm wie üblich färbt, Umbenennung in BJP-Hintergrund und, wie üblich, Bewegen unserer Ebene Stack. Lassen Sie uns die Farbe davon in unsere Lieblingsfarbe ändern, die 071 93. Wie Sie mit Himmel Instanz oder Hiller Komponenten sehen können, die ändern müssen, klicken Sie auf den Augapfel so das Kalender-Symbol, das Ticket-Symbol, das Datum und den Titel klicken Sie auf den Augapfel aus dem Kleidungssymbol. Wenn der Benutzer auf das Kleidungssymbol tippt, wird das Mobiltelefon wieder auf den Bildschirm für Einzelparteien geschlossen. Kein Umzug oder zu unserem Vermögen. Penhall. Schnappen Sie sich das Bild und bewegen Sie es zu unseren Kameras. Dies ist das gleiche Bild, das wir in unserem Single-Party-Bildschirm verwendet haben, und es wird unser Video repräsentieren, es vier Wochen machen und seinen Hype ändern. 265 freie Tage. Positionierung in der Mitte des Bildschirms. Ausgezeichnete Fugen links zu entwerfen ist die Krankenstange. Schnappen Sie sich einen rechten Winkel, um Wände zu klicken und machen Sie es 345 Pixel in mit und zentral nach oben. Machen Sie die Höhe drei Pixel und ändern Sie die Farbe davon. 103 vier für a. Dies wird die Krankheitsbalken darstellen, die durch Drücken von Kontrolle C und Control V dupliziert wurden und die Farbe von Weiß ändern. Dies wird die Seebars verstrichene Zeit sein. Machen Sie es 75 Pixel in mit Now, greifen Sie auf einen Urlaub Hocker und schnell ein. Klicken Sie auf das Kettensymbol, um die Proportionen des Kreises einzuschränken und die 25 Pixel der Woche zu ändern . Dadurch wird die Höhe automatisch auf 25 Pixel geändert. Ändern Sie die Farbe des Kreises weiß und platzieren Sie ihn auf Etch aus der verstrichenen Zeit. Dies wird die Krankenstäbe Kontrolle sein, die der Benutzer geringfügig machen kann. Ändern Sie die Videos Zeit Schließlich, öffnen Sie Ihre Zeit zu und Eingabe Null Kohle 16 Schrägstrich ein Kohle 30 Ändern Sie den Fehler auf kreisförmige STD. Der Buchstabenabstand auf Null Die volle Größe beträgt 16 Pixel auf der Vorderseite. Das Gewicht trifft sich und die Farbe ist weiße Stellen am rechten Rand, irgendwo unterhalb des Sigmar. Diese Zahl stellt unseren Electe's Stein und den ausgewählten Video-Link dar. Wählen Sie die Lippen und die Rechtecke aus und gruppieren Sie sie zusammen. Benennen Sie diese große Bar um, die Baylor organisiert, und das war's. Jungs würden nicht unser Video-Screen-Design haben. Ich werde Sie im nächsten Video sehen. 12. Ticket: Willkommen zurück zu den ernsthaften Jungen und Mädchen in diesem Video wird einen Blick auf die Gestaltung des Ticketbildschirms, wie wir bereits erwähnt. Der Ticketbildschirm ist ein Ort, an dem der Benutzer seine Kauftickets sehen kann. Betrachten Sie es als eine besondere Art von Geldbörse, die auf Ihrem Telefon vorhanden ist. Lassen Sie uns jetzt reden, um das eigentliche Ticket zu entwerfen. Wir werden dafür sorgen, dass das authentisch ist. Also werden wir das virtuelle Ticket so gestalten, dass es einem Echtzeit-Ticket ähnelt. Wir werden die gleichen Daten von unserer Partei verwenden. Das Ticket wurde für gekauft, wie der Name des Deejay, der Veranstaltungsort mit einem Ticketpreis und wann wir anfangen würden. Endlich werden wir einen Barco für unser Ticket benutzen. Der Barcode wird benötigt, damit Personen an der Tür eine spezielle Art von Barcodeleser verwenden , um das Ticket zu authentifizieren. Wir werden online verwenden, um den Barco zu generieren, einfach Google up kostenlose Barcode-Generator und klicken Sie auf die erste oder die zweite Ergebnisabfrage . Dort können Sie das Barcode-Bild erzeugen und es als PNG-Datei verdoppeln. Außerdem bin ich über, warum das Barcode-Bild im Assets-Panel. Jetzt, wie immer, genug Reden und lasst uns zur Sache gehen. Erstens, üblicher Bohrer. Erstellen Sie den Hintergrund, mit unserem Rechteck und unsere Lieblingsfarbe. Wählen Sie, richten Sie und gehen Sie Fuß. Machen Sie einen Narren und volle Höhe. Richtig? Single Benennen Sie es BG für Hintergrund um. bewegen unseren Schichtstapel nach unten. Ändern Sie seine Farbe auf 07123 Nun, da der Ticketbildschirm ein innerer Bildschirm in unserer Anwendung ist, müssen wir dem Benutzer weg zur Verfügung stellen, um nie zurück zu kommen. nun Wenn Sie sichnunaus unserer vorherigen Lektion bezüglich des Single-Party-Bildschirms erinnern, haben wir eine große Unterseite für Heather Komponente hinzugefügt. Gehen Sie zu den Heller Component Systems und klicken Sie aus den Augäpfeln alles außer der Big Bottle, und der Titel änderte den Titel auf meine Kinder oder meine Brieftasche, wenn Sie es so bevorzugen. Okay, lassen Sie das eigentliche Ticket entwerfen. Nun greifen Regie Goto wieder und klicken Wände ändern die Hintergrundfarbe in weiß geändert mit Zehe, 345 Pixel und der Höhe toe, 465 Pixel geändert. Zentrieren Sie das oben und ändern Sie die Ecke. Bradys vier Pixel Jetzt haben wir in unserem Asset-Panel das gleiche Bild, das wir für Hintergrund in den Einzelparteien Queen selektiv verwendet haben und zu unseren Kameras übergegangen sind. Stellen Sie sicher, dass es das gleiche ist mit wie das Rechteck und für die Höhe, die wir verwenden werden, haben Sie die Höhe vom Rechteck, um es zu tun. Selektiv und Eingabe. 465 Pixel geteilt durch zwei in unserem Eingabefeld. Hier können wir erstellen, die mathematischen Gleichungen toe automatisch berechnen die Höhe aus dem Bild. Okay, jetzt fügen wir diesem Bild auch einen Eckenradius hinzu. Klicken Sie hier, um unabhängige Ecken hinzuzufügen und für Pixel einzugeben. In den ersten 2 Eingängen wirkt dies für Pixel. Die Ecke befindet sich oben links bzw. oben rechts . Jetzt kommt der lustige Teil. Wählen Sie den lib Hocker aus, und klicken Sie auf einen. Clippen Sie diesen Wechselbalg, um die Proportionen des Kreises einzuschränken und 35 Pixel für die Woche einzugeben. Wählen Sie den Kreis an Ort und Stelle es auf D H R. Um zu erhalten, werden Sie die roten Linien fangen sehen. Ok, wählen Sie den Kreis aus und kopieren Sie ihn, indem Sie alt halten und ihn nach rechts ziehen. Stellen Sie sicher, dass auch die Kopie gefangen wird. Großartig. Wählen Sie nun beide Ellipsen aus und gruppieren Sie sie zusammen. Stellen Sie sicher, dass Sie eine Kopie von ihnen erstellen, indem Sie die Steuerungstaste C auf Ihrer Tastatur drücken. Wählen Sie nun sowohl das Rechteck in den Kreisen aus, indem Sie Schiff und Stanzen halten. Auswahl subtrahieren. Siehst du, das macht ein Ticket wie Rechteck. Verschieben Sie die Subtraktion hier unten, und stellen Sie sicher, dass Sie die zuvor Kobe Kreise basieren. Er würde die auf Ihrer Tastatur kontrollieren. Platzieren Sie diese Gruppe nun über dem Bild und wählen Sie sowohl das Bild als auch die Kreise aus. Und er subtrahiert die Freude wieder. Gruppieren Sie alles zusammen. Und wir nannten diese Ukip Beat. Wir haben jetzt eine echte Zeit, um hier rüber zu kommen. Jetzt lasst uns die Daten platzieren. Kopieren Sie die Informationen von unserem Single-Party-Bildschirm und basieren Sie es. Sie Ihre Kamera nicht sicher, dass es sich um eine zentrale Linie handelt und bewegen Sie 30 Pixel von oben. Jetzt ist alles gleich, außer dass der Name des DJs im Namen des Veranstaltungsortes unser Zentrum ausgerichtet ist. Das letzte, was wir mit unserem Ticket tun müssen, ist die Zehe an der Rinde. Mehr zu RSS-Panel, wählen Sie einen Barcode, den ich bereitgestellt habe, und legen Sie ihn auf unserer Leinwand. Sie können auch, wie ich bereits erwähnt habe, Ihren eigenen Barcode erstellen, indem Sie online gehen und nach kostenlosen Barcode-Konvertern suchen. Ok. Das letzte, was zu tun ist, alles zusammen zu gruppieren und ein Ticket zu polizieren. Wir können auch eine Komponente aus dem Ticket machen. Klicken Sie also auf große Komponenten und Filme kopieren, aber halten Sie alt und ziehen Sie es zurück in Richtung Kamera. Jetzt, wenn Sie mehr als ein Ticket kaufen, machen wir einen Kaffee. Hohl es, um authentisch zu sein. Und das ist es für die heutige Lektion. Leute, ich sehe euch im nächsten Video. 13. Leer Bildschirm: Willkommen zum zweiten Video über dem Ticketbildschirm, dem leeren Statusbildschirm. In diesem kurzen Video lernen wir, wie man auf leerem Zustand entwirft, um Bildschirm zu erhalten. Da der Ticketbildschirm von unserem Home-Bildschirm aus zugänglich ist, a k a. Der Party-Bildschirm. Es besteht die Möglichkeit, dass diese Königin keinen Inhalt hat, sieht den Benutzer. Ich habe noch keine Tickets für diesen Zweck gekauft, die wir auf Empty State entwerfen, was zeigt, ob es keine Tickets in der Abbildung Bildschirm gibt. Wenn Sie sich erinnern, haben wir dies im Benutzer für Video erwähnt. Wie ein leerer Bildschirm wie die Elemente aussehen sollte, sind eine geeignete Grafik, eine Nachricht, die erklärt, warum es hier keinen Inhalt in einem Call to Action gibt, der den Benutzer dazu bringt, etwas in unserem Fall zu tun. Kaufen Sie Tickets. Also, ohne weitere Umschweife, lasst uns zur Sache kommen. Ich nehme an, dass Sie bereits Ihren Hintergrund erstellt haben, mit dem Rechteck auf unsere Lieblingsfarbe. Wenn nicht, tun Sie es jetzt, wir benutzen den gleichen Heller. Es gibt einen Ticketbildschirm, wo wir jetzt einen großen Boden und einen Bildschirmtitel in unserem Asset-Panel haben. Ich habe die Grafik für diese Lektion zur Verfügung gestellt. Schnappen Sie es und legen Sie es auf unsere Kameras. Wie Sie sehen können, ist dies die gleiche Michael wurden in unserer Haarkomponente verwendet, um uns zu den Tickets Queen nur größer und eine andere Farbe zu verknüpfen . Platzieren Sie es in die Mitte unserer Kameras. Öffnen Sie nun auchIhren Typ auch und tippen Sie ein. Sieht so aus, als hättest du keine Kinder. Boot hat die vier Seiten dahin gewechselt. 30 hebt das Telefon ab. Warte, er ist regelmäßig und die Farbe ist weiß. Das letzte, was zu tun ist, ist zu zentrieren. Richten Sie diesen Text aus und stellen Sie sicher, dass er in unseren Bildschirm passt, indem Sie diese Wörter brechen. Jetzt legen Sie es. 30 Pesos sind keine Grafik- und Mittelfutter für Kemalist. So ist es sowohl die Grafik und der Text und gruppieren sie zusammen zentriert sie an der Mühle von unseren Kameras ausgerichtet . Nun ist das letzte, was zu tun ist, am Call to Action abschleppen, kopieren und fügen Sie die Code-Richtung von unseren vorherigen Bildschirmen und änderte den Inhalt, um Tickets zu buchen . Stellen Sie nun sicher, dass dies Mittellinie und 15 Pixel von unten ist. Das war's, Leute. Wir haben es zum endgültigen Design für die Anwendung gemacht. Ich werde Sie im nächsten Video sehen, wo wir über die Dinge diskutieren, die wir bisher gelernt haben und die Herausforderung vorbereiten werden. Vielen Dank für Ihre Aufmerksamkeit. 14. Schlussbemerkung: Willkommen zum Glasabschluss, Jungs. Zuallererst möchte ich Herzlichen Glückwunsch für die Fertigstellung dieses Glases sagen. Danke, dass du mein Publikum bist. Ich hoffe aufrichtig, dass du etwas von diesen Siri liebst, um zusammenzufassen. Wir lernen, wie man einen Benutzerfluss, eine Benutzerpersona und viele Arten von Bildschirmen, die für eine mobile Anwendung während der Videos an gesprenkelt nützliche Tipps, die zu einer guten Benutzererfahrung beitragen zu entwerfen eine Benutzerpersona und viele Arten von Bildschirmen, die für eine mobile Anwendung während der . Denken Sie daran, dass der Benutzer ein Schlüssel zu jedem Unternehmen ist, und Sie sollten immer für den Benutzer entwerfen. Ich denke an die Anwendung als eine ausgefallene Apparat, die als Werkzeug für den Benutzer dient, je einfacher er Dinge erledigen kann, desto besser für ihn und die geschäftlichen Todesfälle. Haben Sie die Benutzererfahrung gesteigert? Designer sorgen dafür, dass sich die Benutzer bei der Verwendung ihrer Anwendungen wohl fühlen. Und jetzt ist die Herausforderung eigentlich zwei Herausforderungen. Der erste Teil besteht darin, den Erfolgsbildschirm und den Fehlerbildschirm zu entwerfen. Wenn Sie sich erinnern, wann der Benutzer die Tickets kauft, wird er zur Erfolgs- oder Fehlerkönigin umgeleitet. Je nach Ergebnis des Kaufs besteht die Herausforderung darin, diese Königinnen mit den Techniken zu entwerfen, die Sie in diesen Videos gelernt haben , um diese zu erreichen, oder Sie könnten denken, dass Sie eine bessere Lösung haben. Geh weiter und benutze es. Der zweite Teil ist, Ah ganze Buchungs-App mit den Techniken zu entwerfen, die Sie bisher gelernt haben . Der Aufstieg kann dort sein, wo sie waren. Sie mögen Hotelbuchung, Flugtickets, Buchung von Tischreservierung usw. Ich lebe es für Sie, sich noch einmal zu entscheiden. Danke, dass du Teil meiner Klasse bist. Und ich hoffe, Sie in Zukunft wieder zu treffen Siri von