Der UX/UI Design-Prozess – Erstellen von Drahtmodellen und dem fertigen Design

1. Kursvorschau: gehen Sie durch den gesamten U X Sie I Design-Prozess mit Adobe X'd lernen sowohl Benutzeroberfläche als auch User Experience Design, indem Sie ein mobiles APP-Design-Projekt von Anfang bis Ende folgen. Weg wird zunächst durch den U X-Prozess gehen, indem er die grundlegenden Grundlagen des UX-Designs erlernt und eine Vielzahl von UX-Leistungen entwickelt, einschließlich einer Benutzerpersona, einer schlechten Datei, einer User Journey Map und schließlich ein Flussdiagramm des Benutzers. Als nächstes wird Adobe X'd geschehen, um einen Low-Fidelity-Drahtrahmen zu erstellen und schließlich ein polnisches Design zu erstellen, indem endgültige Symbole, Farben, Schaltflächen und Styling in Form eines High-Fidelity-Layouts hinzugefügt werden. Schließlich wird all dies zusammen mit der Erstellung eines funktionierenden Prototyps verknüpfen, den wir für Benutzertests verwenden können. Flugpräsentation sind nur ein fantastischer Start Frieden für Ihr neues U X Y Portfolio wachsen . Adobe X'd ist eine fantastische Wahl für angehende oder professionelle ux Sie. Ich entwirft so einfach zu erlernen. Adobe-Software wird ausführlich unterrichtet. Jeder muss die Grundlagen des großartigen UX-Designs und den dahinter liegenden Prozess verstehen. Nachdem Sie diese Klasse absolviert haben, können Sie sowohl UX- als auch New I-Ideen und in Ihre alltäglichen Arbeitsprojekte integrieren und sogar einen Einblick in das U X you I Designer-Leben bekommen, diese Brille für alle, die Grafikdesigner, Webentwickler, alle, die daran interessiert sind, mehr über den U X Y-Prozess zu erfahren, indem sie ein praktisches, reales Projekt durchführen. Begleiten Sie mich also auf dieser umfangreichen und unterhaltsamen Reise durch den gesamten U X ey Prozess, damit Sie beginnen können, sich von dieser fantastischen und lohnenden Arena des digitalen Designs in der Klasse zu begeistern . 2. Course und Facebook-Gruppe: Zunächst einmal, willkommen in den Kurs, und ich hoffe, dass diese Klasse zu begeistert über den U X Sie I Design-Prozess und erhalten zwei mehr Komfort mit Adobe X T für Drahtrahmen. Ich wollte Sie wissen lassen, dass ich eine Student Facebook-Gruppe habe, in Postprojekten als Fragen arbeite und einige einzeln bei uns haben, um Feedback zu bekommen. Wir stellen auch Design-Herausforderungen in dieser Gruppe und halten Sie auf dem Laufenden über die Dinge in der U X Y Welt und Dinge, die mit Adobe X zu tun haben. Alles, was ich tun muss, ist suchen Sie XY y Studentengruppe und die Facebook-Suchleiste und klicken Sie auf Gruppen, um uns zu finden, und wir freuen uns darauf, Sie dort zu treffen. Ich wollte mir einen Moment Zeit nehmen, um über den Kursfluss zu sprechen. Dieser Kurs ist in ein paar verschiedene Abschnitte unterteilt. erste Teil ist die X-Theorie und taucht in unsere User Persona, Customer Journey, Karte und Flussdiagramme ein. Dies ist ein theoriebasierter Abschnitt, sich also mehr auf den Prozess und weniger auf die Software konzentriert. Der Theorieabschnitt des Kurses konnte in der U X ey Design-Prozessklasse auf Skill-Anteil gefunden werden. Der Link wird hier im Notizenbereich dieser Lektion angezeigt. Sie können es auch finden, indem Sie mein Profil auf Skill Share. Die zweite Phase unseres Kurses geht in die Erstellung von Low Fidelity Wire Frame und Adobe X'd. Der nächste Abschnitt des Kurses bewegt sich in die Entwurfsphase, wo wir anfangen, Farblayout hinzuzufügen und ihr Design zu stylen. Wir erstellen ein High-Fidelity-Layout und einen funktionierenden Prototyp. Diese Klasse konzentriert sich mehr auf den Designprozess, es sei denn, ich lerne Adobe X'd, obwohl Sie viel lernen werden, indem Sie den Prozess mit mir durchlaufen. Wenn Sie eine detaillierte Software haben möchten, Schritt für Schritt konzentrierte Klasse, Ich lehre in Adobe X'd Meisterklasse direkt hier auf Skill Share. Noch einmal finden Sie es im Link in den Notizen Abschnitt dieser Klasse oder finden Sie es auf meinem Skill-Share-Profil . Nun lasst uns in eine UX-Theorie eintauchen und wir sehen uns in der nächsten Lektion. Vergessen Sie nicht, der Facebook-Gruppe beizutreten, nachdem Sie den U X Y Designtheorie Kurs ausgecheckt haben. Unsere Lektionen lassen Sie uns eintauchen in das Erstellen sind Low-Fidelity-Draht für ihn hier in der nächsten Lektion. Es ist definitiv nicht erforderlich, die Theorieklasse zu nehmen, um viel aus diesem Abschnitt des Kurses herauszuholen , aber es ist hilfreich, den UX-Prozess zu kennen. Wir haben gerade durchgemacht, um zu dem Punkt zu kommen, an dem wir jetzt sind, sind wir bereit, unseren Drahtrahmen in Gang zu bringen . 3. Low - Setup: Willkommen bei Adobe X'd. Wir werden zuerst unseren Low-Fidelity-Drahtrahmen erstellen. Dann gehen wir zu einem High-Fidelity-Drahtrahmen über. Wir werden die Grafiken der Fotos und der Symbole hinzufügen. Und schließlich werden wir alles in Prototypen zu einem Prototyp verknüpfen, den wir irgendwann mit Benutzern testen können, damit wir weitergehen und zum Zeichenbrett zurückkehren können. Wenn wir etwas optimieren müssen, bevor es nach der Genehmigung des Kunden zur letzten Phase übergeht , was die Entwicklungsphase sein wird, in der es beschichtet wird und der Entwickler es übernehmen und hoffentlich machen es zu einer funktionierenden App zum Herunterladen auf einem Telefon. Wir werden das letzte Stück nicht machen, aber wir werden Sie den ganzen Weg bis zur Testphase bringen und diesen Prozess mit Ihnen durchlaufen . Also hier sind wir. Lasst uns weitermachen und loslegen. Wir werden direkt in das einspringen. Ich nehme an, Sie haben bereits ein wenig Adobe X'D Wissen. Bitte nehmen Sie diese Lektionen an, wenn Sie etwas Adobe X'd-Schulungen benötigen. Also werde ich zu mir passen, habe ein wenig Arbeitswissen über Adobe X'd, aber ich werde in bestimmten Bereichen immer noch langsam gehen. Also eine Sache, die mir wirklich hilft, ist, dass es etwas gibt, das dich genannt wird. Ich Kinder. Ah, so dass Sie wissen, User-Interface-Kits und können sie herunterladen. Und sie könnten eine Welt der Hilfe in Bezug auf die Erledigung einiger dieser grundlegenden Blockierung und Layout bieten. Das ist also eine, die von Adobe selbst stammt, und ich werde dir zeigen, wie du es schnappst. Aber schauen Sie sich all diese wunderbaren kleinen Art von grundlegenden Layout-Drahtrahmen an, die wir greifen und verwenden und an unsere eigenen Designs anpassen können , die nicht von Grund auf neu beginnen müssen. Es ist immer sehr nett. Natürlich können Sie immer von Grund auf neu beginnen, wenn Sie möchten. Ähm, diese Art von gibt Ihnen einen kleinen Vorsprung mit ein paar kleinen Icons und verschiedenen Dingen, die wirklich eine Menge Zeit sparen können. Um also auf diese bestimmte Datei zugreifen zu können, müssen Sie zur Datei gehen. Und wenn du X D Datei geöffnet hast und dir I Kinder und du musst runtergehen die Drahtrahmen wird ein neues Fenster in deinem Browser öffnen und du wirst in der Lage sein, dieses spezielle Kit herunterzuladen , das ich benutze. Also geh einfach, um Kinder herunterzuladen und du wirst die eine haben. Ich werde es nur ein bisschen benutzen. Ich werde nicht stark davon abhängen, weil ich Ihnen irgendwie zeigen möchte, wie ich das Layout von Grund auf neu gestaltet mache. Das hilft also nur bei einigen bestimmten Stellen, an denen wir vielleicht eine Nikon oder zwei schnappen müssen und ein wenig Zeit sparen müssen. Sie werden feststellen, dass diese besondere Sie ich Kit ist eine blaue Farbe, um es. Und was ich gerne tun würde, wenn ich in der Low-Fidelity-Draht-erschreckende Phase bin, wo alles ist, manchmal wurdest du auf Papier skizziert. Es ist sehr roh. Es ist sehr einfach. Wir bekommen nur eine allgemeine Vorstellung davon, ihr Layout zu blockieren und wo die Dinge Positionen sind . Ich mochte es, die Dinge in Schwarz und Weiß und Grau zu halten. Also werden wir diese Farbe eliminieren. Und wie machen wir das? Wir haben dieses ganze Dokument voll von dieser blauen Farbe. Wie können wir das alles sehr schnell ändern? Nun, wie Sie wissen, diese Luft-globalen Stile hier, also wenn ich die Farben hier ändere, wird es global verändern. Also werde ich ein paar dieser blauen Farben auswählen. Ich gehe zu bearbeiten, und ich werde das einfach ganz nach Grey schieben, es zu Grau schieben, und es wird weiter gehen und das ganze Blau ändern. Sie haben dies den ganzen Weg zu Grau bearbeiten, machen Sie diese Art von einem ähnlichen Farbton der Gnade Art von dunkel. Und das ist ein hellblau. Oder um das zu einem hellgrau zu machen. Du merkst also, wie sich das ganze Blau hier verändert hat, damit wir wieder reingehen können. Es gibt noch ein paar kleine blaue Bereiche. Es könnte, denn das ist nicht völlig grau wird gleiten, dass nur da drüben wir gehen. Jetzt haben wir einen eher Low-Tree-Stil, und du denkst vielleicht , dass Blau niemanden stören wird. Aber wenn unsere Markenfarben eher für grüne Farbe sind, wissen Sie, dass es sinnvoll ist, die Farbe zu beseitigen, wie Sie wissen, denn Kunden werden sich die Farben ansehen und das ist nicht meine endgültige Farbe. Also, wenn Sie schwarz und weiß machen, wird alles ein bisschen mehr wie ein Low Fidelity skizziert Drahtrahmen. Als nächstes werden wir mit einem ersten Bildschirm beginnen. Wir gehen für die hier. Anmeldebildschirm. Es ist vorbei. Diese erste grüne, wir werden ein wenig Hilfe von bekommen, oder Sie ich kann nicht, dass wir heruntergeladen haben und wir haben mehrere verschiedene Anmeldeoptionen. Und wenn wir zurück zu einer Art von U X Prozess gehen, den wir gerade durchgemacht haben, entdeckten wir ein paar Bereiche, die wir zwei Dinge brauchen, über die wir denken müssen, wenn wir unseren Login-Prozess durchlaufen . Und eines dieser Dinge war sicherzustellen, dass wir eine schnelle Anmeldeoption hatten. Also werden wir es brauchen, um einen Bildschirm zu entwerfen, der ihn anmelden kann, um grundlegende Informationen zu erhalten. Es wird auch eine Schaltfläche geben, die sie mit Ihrem Facebook-Konto übergibt. Wir müssen also all jene im Spiel behalten, während wir das Layout dafür entwerfen. Also, welche Art von Anmeldebildschirm Sie denken, würde funktionieren? Wahrscheinlich besser für diese App. Wir wollten sauber und einfach sein. Wir wollen nicht eine ganze Menge Gestaltungselemente für sie haben, um irgendwie durchzuarbeiten. Ich wollte sehr einfach sein, und deshalb werde ich mir das wirklich schnappen. Das ist eigentlich Nummer fünf. Melden Sie sich an. Und ich werde das einfach kopieren. Ich öffne ein neues Dokument und wir machen das im iPhone X. Natürlich können sich die Dinge ändern. Du könntest diesen Kurs in fünf Jahren waschen. Sei wie iPhone X , das sind alte Nachrichten. Aber das ist jetzt die neueste, also gehen wir weiter und machen das. Sie werden einen viel größeren Bildschirm bemerken, viel mehr Immobilien, weil Sie die Schaltfläche nicht mehr haben. Also werden wir in der Lage sein, mehr Platz auf dieser speziellen Version zu haben. Natürlich könntest du immer Prototypen und verschiedene Größen zeigen, sowie wir kommen zum Ende. Sie können einige dieser beiden verschiedenen Telefonbildschirme ändern, die Sie tun könnten, ein Android ist, um den Client zu zeigen , wenn Sie jemals eine Android-Version dieser App entwickeln, können Sie ihm zeigen, wie es anpassen kann, wie das Design könnte sich vielleicht an einen kürzeren Bildschirm anpassen . Also forensisch, jetzt werden wir als Nächstes beim iPhone bleiben. Also hier ist unsere Seite und unser Bildschirm. Wir werden das erheblich ändern, um es uns zu eigen zu machen. Also, wenn es darum geht, Low Fidelity Drahtrahmen Ah, viele dieser Male ihre skizziert. Wir wollen also keine weiteren Details darüber hinzufügen und manchmal sogar das Hinzufügen dieser abgerundeten Blasen sogar zu viel sein. Und manchmal, äh, ungeklärt, lassen mich gehen und mit der rechten Maustaste klicken, und ich werde das Gitter ungeräumt. Wir verwenden dies nur als eine schnelle Abkürzung. Wir werden viele andere Bildschirme von Grund auf neu machen, aber nur irgendwie zeigen Ihnen, wie Sie ein wenig Abkürzung Sie einige dieser Vorlagen tun können um Tonnen Zeit zu sparen. Also alles, was ich getan habe, ist ich, richtig? Klicken Sie auf. Das war ein Gruppenelement. Also habe ich es einfach nicht gezimmert und ich werde sehen, ob ich diese Ecken nicht umrunden kann. Also, hier geht's. Hier sind unsere abgerundeten Ecken, die das auf Null setzen. Und der Grund, warum ich das mache, ist, dass ich nicht viel Stil hinzufügen möchte. Moment befinden wir uns in der Low-Fidelity-Phase. Stil ist nicht das Ziel. Es geht um das grundlegende Dienstprogramm und wie der Benutzer durch den Drahtrahmen arbeiten wird und weniger um das Branding oder den Stil oder irgendetwas. Ich halte nur das ist grundlegend wie möglich. Also hier oben werden wir eine Chance haben, vielleicht das Logo zu setzen oder der Firmenname wird sagen am Namen war gut von diesem Typ in App-Namen. Wir gehen nur von einer Art Fotomöglichkeit mit dem Logo aus. Es wäre schön, so dass sie wissen, welche App Sie haben eine Menge Zeit geöffnet, um einen Login-Bildschirm haben , und die Last war sehr winzig. Sie wissen nicht, welche App es Öffnungen gibt. Sie müssen das unglaublich offensichtlich und vielleicht auch farbcodiert machen. Was am Layout-Design großartig ist, ist manchmal, dass Leute einen großen Hintergrund entwerfen, so dass sie einfach alles weiß haben. Also lasst uns weitermachen und das rausschieben. Wir haben alles weiß, vielleicht das Logo hier. Aber was großartig ist, vor allem über einen größeren Bildschirm, ist das Hinzufügen einer sehr hohen Kontrast Art von Boxier hilft, das Layout zu brechen und hilft dem Benutzer Art der Aufschlüsselung der Informationen ein wenig besser. diese kontrastreiche Boxen verwenden, haben Sie nicht zu viele Boxen, Sie haben keine konkurrierende Box, also sagen wir, wir müssen vielleicht einige Informationen hier unten haben. Es beginnt zu viel zu bekommen und beginnt zu Fuß. Machen Sie das Design und Layout ein wenig beschäftigt. Aber manchmal mit diesen dunklen, werden Sie eine Menge von Hamburger-Menüs und Art von Menüs oben klebrige Kopfzeilenmenüs bemerken, wenn Sie nach unten scrollen die normalerweise einen hohen Kontrast bedeutet, dass es schwarz, wenn der weiße Hintergrund ist weiß auf dem Rest von den Bildschirm und umgekehrt. Und das ist aus gutem Grund, denn Kontrast ist dein Freund, wenn es um dich X freundliches Design geht, und du entwerfst ich so einfach irgendwie werde ich dir irgendwie diese hilfreichen Tipps auf dem Weg geben. Dies ist ein wenig weniger über die Verwendung dieser Software ein wenig mehr über die Grundlagen der Schaffung eines guten Layouts und Designs. 4. Low - Anmeldebild: Also lasst uns darüber nachdenken, was wir hier haben müssen. Wir müssen also einen Benutzernamen haben , , ein Passwort einloggen, ein Passwort einloggen, einloggen, und wir lieben es, das Passwort zu uns einloggen, und wir lieben es, das Passwort zu verifizieren. Aber lassen Sie uns einfach voran und halten Sie das einfach und haben nur ein einfaches Login. Und wir müssen auch denken, Ist es offensichtlich, dass Sie Ihre E-Mail schreiben müssen? Manchmal ist es nicht immer offensichtlich, was Sie brauchen, um dort zu setzen, Also lasst uns voran gehen und hinzufügen. Ich werde nur die Option gedrückt halten, die Option gedrückt halten und ziehen, und ich bin in der Lage, das wirklich schnell zu duplizieren. Ich gebe nur den Benutzernamen ein. Ich werde das hier unten stecken, und dann halte ich einfach die Option fest. Ich werde ein Passwort eingeben, das wirklich machen möchte, dass dies offensichtlich ist wie möglich für unseren Benutzer die Anmeldung, und diese können kleiner gemacht werden, wenn wir gerade genug sein müssen, wo sie es lesen können. Also, wenn wir 12 tun, machen wir noch keine globalen Stile. Wir machen nur ein paar grundlegende Skizzen fertig. Stellen Sie sicher, dass zwischen diesen Elementen genügend Abstand vorhanden ist, aber wir möchten auch sicherstellen, dass sie nicht zu weit voneinander entfernt sind. Also, wenn ich das hier unten habe, scheint es getrennt zu sein. Und das ist eine Einheit, auf die die Person Zehe achten muss. So halten sie dicht beieinander, aber offensichtlich nicht so nah, dass es sich überfüllt fühlt. So sehen Sie nur irgendwie Ihren Abstand ein wenig. Also, was brauchen wir noch? Ich liebe die Verwendung von Trennbalken und irgendwie sehen diese kleine Trennstange Art von hilft noch einmal . Eine andere Möglichkeit, Ihr Layout aufzuschlüsseln, ohne es ausgelastet aussehen zu lassen. Denn manchmal verwenden Sie hier oben ein Feld mit hohem Kontrast, und Sie benötigen immer noch eine Art Trennlinie oder etwas, um die Informationen kontinuierlich aufschlüsseln zu können, da dies ein völlig separater Satz von Optionen ist. Also, ich persönlich, haben wir viel mehr Bildschirm-Immobilien, als wenn das irgendwie zusammengesetzt wurde. Also können wir, wissen Sie, vielleicht lassen Sie das Design ein wenig atmen. Es könnte uns eine Gelegenheit geben, ein bisschen ein größeres Bild hier zu haben, also lassen Sie uns irgendwie verschieben diese Downs Gitarrenlinie alles nach unten, wirklich nutzen Sie den Bildschirm Immobilien, die Sie haben, vor allem auf einem neuen oder Telefon. Okay, damit wir das runterziehen können. Ich werde das bisschen größer machen, etwas prominenter. Okay? Vielleicht nicht ganz so groß. Vielleicht verdoppeln was? Ursprünglich waas. Und jetzt haben wir hier ein paar Möglichkeiten. Was ich also gerne tun würde, ist offensichtlich, dass sie die Eingabetaste drücken müssen, um ihren Passwort-Passcode einreichen zu können . Also werde ich behalten, dass das eine verbundene Einheit ist, und ich werde voran gehen und dieses Login machen, das größer machen. Wir werden uns noch keine Sorgen um den gekämpften Typ machen. Wir werden nur eine grundlegende Typografie machen, einfach eine Standardeinstellung auswählen. Ah, Schrift, die gerade in der Luft sein wird. Das können wir immer mit globalen Stilen ändern. Später, geh einfach weiter. Und eine Gruppe, die dieses Element gruppiert, hat irgendetwas von diesem Gesicht bekommen. Und jetzt haben wir diesen Login-Button noch einmal, wir wollen Knöpfe hohen Kontrast machen, Also wollen wir ihm die entgegengesetzte Farbe ihres Hintergrunds oder das Gegenteil in Bezug auf Kontraste machen . Wenn wir einen weißen Hintergrund haben, lieben wir es, einen dunkleren Knopf zu haben, und die Rückseite ist auch wahr, und das ist etwas, was wir noch erkunden könnten. Dies in diesem Fall, ist in der Lage zu wissen,, Haben wir alles auf einem dunklen Hintergrund und dann haben alles in weißen Boxen oder haben alles in einem weißen Hintergrund? Und wir sind noch nicht ganz da. Das ist eine geringe Treue. Also lassen Sie uns das weiterhin an grundlegenden Schaltflächen arbeiten. Falls Sie die Trennlinie hier haben, ist eine andere Art von Option hier unten . Melden Sie sich mit Facebook an. Wir können immer Farbe könnte das später mit, um es offensichtlicher als seine Facebook zu machen, so dass es die Facebook blaue Farbe eso Es gibt immer Möglichkeiten hier unten, das Logo zu setzen , und, uh, wir können finden Sie das später heraus. Also in Bezug auf die grundlegenden Tasten, brauchen wir noch etwas? Wollen wir die Möglichkeit geben, sich mit Google anzumelden? Ähm, das wird eine Option sein. Wir können immer mit dem arbeiten, was auch immer das entwickeln wird, es ist die Frage, die Sie während dieses Prozesses stellen können, ist, dass Sie wissen, wie einfach es ist. Ist es, um das Facebook-Protokoll zu bekommen? Und wie einfach ist es, Google auch zu bekommen, und lohnt es sich, die Google-Anmeldung zu bekommen? Gibt es genug Nutzer und unsere Zieldemographie? Sie werden Google haben, um das sogar eine Option zu machen oder den ganzen Aufwand durchzugehen , um das zu einer Option zu machen. Wir werden gerade jetzt bei Facebook bleiben, und wir werden diese einfach irgendwie aufgenommen. Also fragst du dich wahrscheinlich, warum tust du das nicht? Warum steckst du nicht den Knopf daneben? Nun, was hier passiert, ist, dass sie ein bisschen verwirrt werden. Diese Knöpfe sind ein wenig zu nah beieinander. Ah, loggen Sie sich ein. Sie wollen nicht, dass Benutzer jemals verwirren. Es ist es die Facebook-Anmeldung ist ein völlig anderer Benutzerpfad, dass sie gehen, um die Anmeldung mit Facebook zu nehmen . Und so wollen wir diese Elemente ein wenig getrennt halten, nicht erforderlich, aber nur etwas, worüber ich während des Layoutprozesses nachdenke. Okay, also können wir sogar in der Gruppe weitermachen, und das ist wahrscheinlich ein wenig zu viel, um mich als Sie ich Art Designer im Grafikdesigner davon abzuhalten , zu viel Design-Arbeit zu tun. Ich muss mich aufhalten und sagen OK, ich fange an, zu viel in die High-Fidelity-Drahtrahmen zu bekommen. Lassen Sie uns das einfach halten. Halten Sie es einfach. Also, anstatt mit dem warm rumzumachen und es so zu halten, okay, also werde ich voran gehen und ein Foto oder Logo hier setzen. Es wird sehr, sehr einfach sein. Das ist also irgendwie unser Login-Bildschirm. Sie können sich dort ein Foto und Protokollierungsmöglichkeiten vorstellen. Dies ist, wo wir beginnen, Art von Arbeit mit unserem Benutzerfluss zu entwickeln. So wie wir bereits entwickelt oder User Flow Diagramm in einer früheren Lektionen, es könnte die Facebook Login und diese Anmeldung sein. Also müssen wir diese Prozesse durchlaufen. Gehen wir und machen die Facebook-Seite. Das wird einfacher. Und so werde ich in den Prototyp-Modus gehen, und ich werde hier ein paar Kunstbretter erstellen. Wir werden hier einen und einen hier erschaffen. Hier werden sie sich abspalten. Also wird der Benutzer entweder zum Login mit Facebook gehen oder er wird sich jetzt einloggen . Und wenn wir anfangen, das zu tun, gehen wir zurück und gehen Oh, ja. Wir haben hier einen kritischen Schritt, den wir ausgelassen haben. Was ist, wenn sie noch kein Konto haben? Wir müssen eine Chance haben, dass sie sich für ein Konto anmelden können. Also, das ist definitiv etwas, das wir irgendwie integrieren müssen. Wir haben auf jeden Fall den Bildschirm Immobilien zu integrieren, dass zu gehen und diese zusätzliche zu löschen . Ich werde wieder in den Design-Modus wechseln. Also gehen wir weiter und fügen Sie einen weiteren Knopf hinzu und lassen Sie uns gehen und nehmen Art von der runden Pille diesem ein. Wieder einmal wollen wir Augen Dinge zu viel stylen und den Grunddraht in einer Low-Fidelity-Draht-Friending Phase. Gehen wir voran und duplizieren Sie diesen Knopf hier. Also das ist jetzt einloggen. Ähm, also werden wir etwas ändern, loggen Sie sich mit Ihrem Konto ein , und so wird es sein, sich anzumelden, ist ein ausländisches Konto, okay. Oder was könnten Sie schaffen? Melden Sie sich an? Könnte ein bisschen besser klingen. Großartig. Ein Login in Tiere gehen und so. Facebook den ganzen Weg hier unten. Und jetzt müssen wir darüber nachdenken, wie stellen wir diese Knöpfe vor? Also haben wir eine Art von Ihrem einfachen Login. Jetzt können wir irgendwie ein paar Bildschirm-Immobilien haben, waren Slide, die ein wenig nach oben. Log würde all diese zusammen als eine Einheit halten, weil sie sich anmelden, sich anmelden und wir werden die Facebook als nächste Option hier haben. Okay? In Ordnung. Und so erstellen Sie ein Login. Also, wo das unten zu haben. Und ich gebe ihnen die Chance, sich anzumelden, und wir werden ein paar verschiedene Farboptionen machen. Also sind wir immer noch in einer schwarzen und weißen und grauen Umgebung, aber das bedeutet nicht, dass ich das nicht mitnehmen kann. Gehen Sie zu meinem in der Farbe Assets und Art der Show, dass das eine andere Farbe sein würde. Anderer Kontrast, Schwächen, Erleichtern Sie es ein wenig. Oder wir könnten es verdunkeln und die Anmeldung in Ihrem Konto etwas leichter machen. Wir haben hier viele Schaltflächen, und wir müssen uns einen Weg vorstellen, dies noch mehr zu vereinfachen, also werde ich irgendwie ein paar Momente verbringen , mit den Schaltflächen hier zu arbeiten, um zu sehen, ob ich eine einfachere Präsentation und ein Layout nicht finden kann . Und ich werde darüber reden, warum ich dort gelandet bin, wo ich gelandet bin 5. Low - Anmeldeprozess Teil 2: Richtig. Also verbrachte ich irgendwie ein paar Minuten Art an diesem Spiel zu arbeiten, um zu versuchen, zu finden, was ich denke, wäre alles, was wir hier brauchen, und vielleicht in einer Art allgemeiner richtiger Weg, wir müssen uns keine Sorgen um Symbole oder etwas Bestimmtes machen, aber ich denke, das ist gut, dass ich diese Art von loggen Sie sich mit Ihrer Zählung direkt unten hier. Aber auch, ich habe die Creator Logging unten verschoben, weil wir das ein wenig deutlicher machen wollen weil sie noch kein Login haben. , Das erste,was sie tun werden, ist, mit Ihren Zählern direkt unter den Login zu schauen. Ich denke nur an die Benutzererfahrung hier nach und denke darüber nach, was sie denken, wenn ich mich persönlich einlogge. Ich ging tatsächlich auf mein Handy und meldete sich in einer der Karten. Denken Sie nur irgendwie darüber nach, was wäre, wenn ich kein Konto habe? Wohin blickten meine Augen? Und sie gehen direkt unter dem Login in das Konto. Aber ein wenig Forschung und Studium und Betrachtung von Beispielen ist in solchen Situationen wirklich hilfreich . Ich beschloss, die Facebook-Art unten zu setzen. Wir werden in der Lage sein, das wirklich schöne kontrastreiche Blau zu haben. Also werden sie definitiv Nein, das ist ein Facebook-Login und irgendwie halten Sie das unten. Hätte sich etwas höher verlagert haben können. Aber ich wollte nicht drei Knöpfe nebeneinander haben, denn wenn du versuchst, sich sehr schnell bei diesem Akt anzumelden , wirst du nur für eine Sekunde so sein , wirst du nur für eine Sekunde so sein. Du wirst vor einer Pause machen. Welche Taste drücke ich? Und es könnte vorübergehend verwirrend sein. Und das wollen wir nicht. Es wird gerade genug Abstand setzen, um diese zwei verschiedenen Langen und Optionen zu trennen. So toll, gehen wir weiter und gehen vorwärts. Wir haben eine Menge Bildschirme zu tun. Gehen wir voran und melden Sie sich mit Ihrem Facebook-Konto an. Das wird also ein sehr einfacher Bildschirm sein, der sich protokolliert, und wir werden die Autorisierung erteilen. Es wird einfach sehr, sehr einfach sein. Es wird autorisiert sein. Stellen Sie die Autorisierung direkt dort ein. Der Knopf. Sie müssen sich noch Sorgen um Styling oder Größe machen, also ist das sehr einfach. Hat Facebook autorisiert, ein Konto zu erstellen. Wahrscheinlich gibt es hier irgendwo ein Foto oder Logo. Aber wieder einmal kommt es zu viel in die Designseiten von, um mich dort aufzuhalten. Das ist also eine sehr einfache Feder. Ich glaube nicht, dass sie die anderen Optionen brauchten, aber autorisiert. Und dann ist es ein guter Gott, dich tatsächlich zu loggen und auf den Home-Bildschirm zu gehen. Die nächste Option ist die Anmeldung für ein Konto, was ein bisschen langwieriger sein könnte, aber wir versuchen, dies so einfach wie möglich zu machen. Wir werden diese Knöpfe schnappen. Ich werde nur die Option halten und ihn hier rüber schnappen. Okay, das ist also die Anmeldung für ein Konto. Wir brauchen eine Art Kopfzeile. Gehen Sie weiter und greifen Sie das hier und machen Sie es zu einer anderen Farbe. Und das wird angemeldet sein. Melden Sie sich für ein Konto an und schließlich müssen diese Anmeldung in neues Konto ändern . Ok. Und das hier unten ändert meine kleinen Kopfzeilen. Hier. Dies wird Facebook-Autorisierung sein und dann melden Sie sich an der Startseite an. Ok, großartig. Also jetzt beginnen, einen sehr, sehr einfachen Drahtrahmen zusammen zu sehen . Macht Sie immer speichern Ihre Arbeit. Ok. Auf meinem Computer, um diesen Kerl zu retten, der sich nicht vermasselt. Also, was wir tun können, ist, dass ich zurückgehen kann, um ein bisschen Hilfe zu bekommen. Wir werden es immer noch anpassen. Und hier ist Seite nach oben mit Sehen, ob wir einige detaillierte Informationen haben. Hier sind ein paar verschiedene Anmeldeoptionen und wir wollen konsistent aus der U I Perspektive bleiben . Sie wollen irgendwie den gleichen Blasen Stil haben, und wir werden später in High-Fidelity-Mock Ups für so für jetzt, es ist irgendwie greifen Sie diesen Bereich, der ähnlich ist, was wir vorher verwenden. Und so benutze ich nur das ist eine Art grobe, grobe Anleitung, und es ist wirklich für mich, nur einige dieser Textfelder zu greifen und wir werden nicht alle diese brauchen , also gruppiere ich nur. Okay, also hier ist, was wir brauchen werden. Und ich mag dieses Format, das ich hier habe, okay? Und dann können wir auch irgendwie sehen, wie es unten ist. Bewahren Sie diese Konsistenz dort auf. Also, was wir brauchen, haben wir einen Benutzernamen. Wir werden es brauchen, um ein Passwort einzurichten. Wahrscheinlich müssen sie das Passwort bestätigen. Welche anderen Dinge werden benötigt? Was in diesem Etwas, wo wir mit dem Unternehmen sprechen und gehen, was sind die erforderlichen Informationen? Sie müssen in der Lage sein, einen registrierten Benutzer zu haben. Und das wird manchmal nicht sein. Du stehst unter deiner Kontrolle. Das könnte unter dem liegen, was das Unternehmen von Benutzern wollen wird, wenn sie sich für ein Konto anmelden . Also werden sie wollen uns eine männliche Aiken-Scheibe garantieren, dass sie eine E-Mail für Sie haben wollen . Eine Möglichkeit, Sie zu kontaktieren und Ihnen Werbeaktionen und Verkaufsnachrichten zu senden. Sie wollen definitiv E-Mails haben. Also E-Mail, und so wird das in diesem Format sein. Also kopiere ich einfach und füge ein. Ein bisschen betrogen. Ich habe hier ein wenig Hilfe bekommen. Du, ich Vorlage, bist du Kind? Das ist kein Problem. Alles, was Sie nur einen Draht zusammenstellen ausgefranst. Wir könnten hier mit einem Skizzenblock sitzen und dasselbe tun. Wo ist Betrug ein wenig, indem es schneller in einem digitalen Format. So Benutzername Passwort bestätigen Passwort E-Mail. Wir brauchen keine Daten, Geburt oder Land. Wir wollen so wenig wie möglich tun, aber ich kann so ziemlich garantieren, dass das die bloßen Grundlagen sind, dass sie die Sicherheit brauchen, um eine E-Mail zu haben. Möglicherweise benötigen sie sogar eine Bestätigungs-E-Mail. Und das ist etwas, das Sie mit dem Entwickler auf Schicht auf seiner sehr kleinen Sache arbeiten könnten. Ähm, aber solange wir irgendwie die Grundstruktur in Layouts haben, wurde für ein Konto angemeldet , das war's. Wir wollen hier nicht viel los haben, und ich mag es, es in der Mitte des Bildschirms zu halten, genau da. Okay, das ist also grundlegend. Wir brauchen nichts anderes zu haben. Brauchen Sie einen Knopf? Du hast hier keinen Knopf. Lass uns voran gehen und die Option herunterziehen und den Knopf hier runter nehmen und das wird sich anmelden , Anmeldung beenden. Wir können auf der Kopie Schreiben oder Schreiben von Text später zu arbeiten war grundlegende Schaltflächen hier tun, so fertig. Der Anmeldeprozess wird schließlich einen kleinen Pfeil dort haben, wenn wir auf die Design-Seite kommen , und das ist ziemlich viel es und dann könnte es automatisch eingeloggt werden. Also beenden Prozess und melden Sie sich an, Lassen Sie Benutzer wissen, dass sie nicht zurück und geben Sie das ein. Also, jetzt haben wir zwei verschiedene Splits, und beide dieser Protokollierungsoptionen werden in den gleichen Anmeldebildschirm geladen. Wenn sie sich einloggen, kommen sie zum Startbildschirm. Wir gehen in den Prototyp-Modus. Wir werden hier noch eine Kunsttafel hinzufügen. Okay, also verknüpfen wir all das, wenn wir den High-Fidelity-Drahtrahmen machen, den Abstand holen. Korrigieren Sie, wenn Sie möchten, aber werden Pfade haben, die diesen Weg gehen und passieren, die ähnlich wie unser Benutzerfluss , den wir zusammengestellt haben. Das wird sich also als nützlich erweisen. Wir werden uns auf den Benutzerfluss beziehen, den wir im U X-Prozess entwickelt haben. Um den genauen Fluss kennen zu lernen. Wir werden hier das Wire finden. Das wird also der Home-Bildschirm sein. Wir werden viel Zeit damit verbringen. Es ist ein sehr wichtiger Bildschirm. Jeder wird mehrmals auf den Startbildschirm zurückkehren, oder wenn er sich anmeldet. Wir wollen also wirklich sicherstellen, dass dies ein sehr einladender Home-Bildschirm ist, dass sie op-Zugriff auf ihre Optionen für ihr Konto haben. Sie können aber auch in die richtige Richtung geschickt werden. Also hier sind wir. Lasst uns das machen. Der Anmeldebildschirm ist also kritisch. Also wollen wir dies zu einem einfachen ist möglich. Aber hier wird eine Art Herausforderung sein, ist, dass wir eine Menge Dinge haben, die wir brauchen, um eine Menge von verschiedenen Optionen zu präsentieren, die wir dem Benutzer präsentieren müssen. Sie müssen in der Lage sein, auf ihre Zählinformationen zuzugreifen, und sie müssen in die Discovery-Phase der App geschickt werden, wo sie entdecken können welches Restaurant oder Lebensmittelgeschäft ah, sie verwenden möchten. Also, wenn die ersten Dinge, die ich tun möchte, irgendwie ein kleines Menü hier einrichten, wo sie auf ihre Konten zugreifen können, eine klebrige Kopfzeile sein wird, wird es auf jedem Bildschirm sein. Sie werden immer Zugang zu diesem kleinen Bildschirm haben. Es wird es dunkel machen. Und lassen Sie uns wie ein kleiner Kreis für unseren Benutzer und haben diese Art von Überlappung ein wenig wieder bekommen nicht zu viel in das Design. Müssen ständig meine Versuchung zurückregnen, Designelemente zu setzen und es einfach sehr einfach zu halten . Soldaten nehmen von Fotos dort an. Lasst uns diesen Text hier schnappen, und wir werden einen Benutzernamen haben. Ich werde keinen spezifischen Benutzernamen bekommen, und wir müssen irgendeine Art von Kontoinformationen haben. Hier werden wir einfach herausfinden, OK, OK, lassen Sie uns den Benutzernamen auf der linken Seite setzen. Und wir könnten ein einfaches Hamburger-Menü haben, so dass wir so viele Optionen wie möglich versteckt haben, dass sie immer Zugang zu haben. Und es braucht nicht viel Bildschirm Immobilien. Ich werde voran gehen und mir ein kurzes Hamburger-Menü-Symbol schnappen. Ich habe ein bisschen ein mobiles App-Design und meine UX-Meisterklasse entwickelt. Eine andere separate Klasse, die ich habe und irgendwie habe das entwickelt. Und ich werde diese Art von Hamburger-Menü schnappen, weil ich vorangegangen bin und ich es einfach nicht haben würde. Wenn Sie wissen möchten, wie Sie das erstellen, gehen Sie zurück zu den vorherigen Lektionen auf dem Dhobi X'd und Sie werden in der Lage sein, herauszufinden, wie Sie ein beliebiges Symbol erstellen können. Ich klicke einfach mit der rechten Maustaste. Ich brauche UN Link auf Lincoln. Ich will nicht, dass es mit früheren Dokumenten verknüpft ist. Hier ist unser kleines Hamburgermenü. Denk dran, wir müssen das Schwarz-Weiß-Grau machen, und schließlich müssen wir es erkunden. Wenn sie darauf klicken, rutscht es heraus, es fällt nach unten. Das werden wir später im Prozess herausfinden. Aber wir müssen wissen, dass sie zumindest Zugang zu ihren Konten haben. Du hast einen Benutzernamen, wir haben Einstellungen, die wir brauchen. Dies ist eine Check-out Art von App. Sie werden Essen bestellen. Und so wird es immer ein Warenkorb-Symbol geben, das verfügbar sein muss, damit sie darauf tippen können. Entweder schauen Sie sich an, sehen Sie, was in ihrem Warenkorb ist. Möglicherweise haben sie 20 Artikel im Warenkorb, die ihren Teil überprüfen müssen. So müssen wir ihm immer Zugriff auf ihre Kontoeinstellungen über dieses Hamburger-Menü . Aber wir müssen ihnen auch einen Einkaufswagenzugang geben. Deshalb wird der Bildschirm herausfordernd sein, denn ich denke an all diese Optionen gab Benutzern. Wir müssen es so einfach wie möglich machen, all diese verschiedenen Optionen zu verdauen und Benutzer nicht zu überwältigen. 6. Low - home: In diesem Fall werde ich zu unserem kleinen Kit hier gehen, und ich bin in den U I Elemente und habe ein paar wirklich Süßigkeiten Dandy Icons, die wir nur für schnelle Drahtrahmen greifen könnten . Wir könnten später ein letztes Warenkorb-Symbol machen, also werde ich mir dieses kleine Taschensymbol schnappen. Ich kopiere es nur, um es wieder in unser Projekt zu bringen, und lasst uns weitermachen und es reinbringen. Es ist schon weiß, also ist das sehr praktisch. Glauben Sie, es ist verbunden. Mal sehen, ob wir das nicht können. Im Gegensatz zu den einfachen ist es auf Link es. Da gehen wir. Jetzt haben wir Zugriff darauf. Halten Sie gedrückt, verschieben und skalieren Sie es ein wenig größer, dass es lieben, in der Lage zu sein, eine Art von Indikation, wie maney Einkaufsartikel oder in der Tasche haben . Also, jetzt werde ich nur einen einfachen Kreis machen, damit du weißt, wie Maney-Ikonen da drin sind. Ich werde es nicht lesen lassen. Ich werde nicht zu viel hinzufügen. Unerade Eintopf Nummer drei. Nur um ein Beispiel zu haben, wer immer schön ist zu wissen, wie viele Artikel Sie haben, vor allem, wenn es um Lebensmitteleinkauf geht. Es ist schön zu wissen, wie viele Artikel in Ihrem Warenkorb liegen. Lassen Sie uns das ein wenig kleiner machen und es gute Größe machen. können wir später verfeinern. Nur sehr, sehr einfach. Da sind noch ein bisschen drei. Unser Warenkorb-Symbol. Ein paar Dinge, die wir tun können. Es könnte anfangen, dies zu verschieben, um zu sehen, ob wir das Hamburger-Menü im Warenkorb nicht aufteilen können, damit sie es nicht tun. Sie sind nicht zu nah beieinander. Sie möchten zu viele Optionen zu nahe beieinander geben. Ich habe auch keine natürliche Trennung von den Optionen, die dem Benutzer helfen, diese Optionen zu brechen . Okay, Sie haben also Warenkorb auf der rechten Hamburgerkarte auf der linken Seite, und das macht Sinn. Einkaufswagen habe ich immer auf der rechten Seite gelegt, weil die Leute so daran gewöhnt sind, dass der Warenkorb auf der rechten Seite ist. Es ist fast keine Frage, dass es dort so einfach sein wird, basierend auf Benutzerverhalten . In der Vergangenheit habe ich den Warenkorb auf die Rechte sehr nützlich, und viele System auf der linken Seite. Ich denke, die Leute sind es gewohnt, auf der linken Seite zugreifen zu können. Ah, also werden wir irgendwie Finesse, dass wir nicht immer ein Profilbild haben müssen. Ich denke, in diesem Fall könnte es ein wenig zu viele Elemente hier oben machen, ist alles, was sie brauchen, um Ihren Benutzernamen und kleinen Bildschirm zu haben. Also werden wir das etwas später beurteilen, um zu sehen, ob wir Platz für das Foto haben oder nicht. Und so haben wir hier viele Möglichkeiten und Flexibilität mit ihrem Layout. Wir haben also alle wichtigen Elemente, auf die sie Zugriff haben müssen. Die klebrige Kopfzeile wird auf jedem Bildschirm sein, den Sie von hier an sehen, sobald sie sich einloggen und auf den Startbildschirm gelangen, dass diese klebrigen Header da sein werden, also wird das konsistent sein. Hier haben wir also die Möglichkeit. Hier gingen wir und haben Sind Sie x Forschung? Und wir stellen fest, dass wir Menschen sofort in die richtige Richtung schicken wollen. Es könnte also zwei Hauptoptionen geben, eine Lieferoption für Lebensmittel und eine Lieferoption im Restaurant , und wir möchten die Leute so schnell wie möglich in Richtung dieses Weges schicken. Die Art, an die ich dachte, ist ein schönes Bild zu haben, nur ein Bild. Nichts zu verrückt von jedem und Lebensmittelgeschäft. Und dann haben wir die anderen Optionen Restaurants zur Verfügung. Wer auch immer einfache zwei Optionen hier eingerichtet. Wir haben Restaurant auf der Oberseite des Lebensmittelgeschäfts auf dem Boden, und wenn ich eine Art von Low Fidelity Mock up, ich verwende keine Fotos. Wenn ich also oft Fotos mache, möchte ich mich an den gleichen Grauton halten, damit du es irgendwie verstehen kannst. Das ist ein Foto. Manche Leute, wenn sie skizzierten, werden irgendwie die X Art von Linien über die Box machen. Sie können ein Foto angeben, was immer Sie tun möchten, was auch immer Sie sich wohl fühlen. Ich werde diese Art von dunkleren Schatten machen, um ein Foto anzuzeigen. Das war's also. Wir können die Lücke hier irgendwie ein bisschen schließen. Stellen Sie sicher, dass die richtige Größe, aber noch einmal nicht viel Zeit damit verbringen. Du machst nur ein grobes Layout. Das sagst du immer wieder, aber ich muss mich immer aufhalten, weil das kein anerkanntes Design sein wird. Wir gehen zurück und optimieren dies, während wir mit dem Kunden gesprochen haben, während wir mehr Forschung machen, während wir zurückgehen und getestet, es kann einige signifikante Änderungen daran geben. Sie wollen also nicht viel Zeit mit etwas verbringen, das am Ende erheblich verändert werden kann . Das ist, warum Sie nicht viel von der Low-Fidelity-Drahtrahmen tun, um diesen Überschuss zu verlassen. So ist das auch. Alles, was wir brauchen, würde zu unserem Benutzerfluss zurückkehren. Wir können die UX-Dokumente wie unsere Persona überprüfen. Wir könnten unsere Customer Journey Mapping Art denken. Ok. Gibt es noch etwas, das wir mit dem Blick auf diesen Benutzerfluss einbeziehen müssen, wenn wir deshalb Benutzerfluss entwickeln, bevor wir in ein Drahtframing gelangen? Denn jetzt haben wir eine tolle Vorstellung davon, wohin der Benutzer gehen wird, wohin sie gehen können und welche Optionen wir haben müssen. Also lasst uns voran gehen und sie in zwei verschiedene Richtungen schicken. Wir können sie in ein Restaurant schicken. Sie könnten eine Liste von Restaurants oder sie können eine Liste von Lebensmitteln bekommen. Also lassen Sie uns voran und erstellen Sie das nächste Grün. Wir fangen an, ein bisschen schneller zu gehen, okay? Und sie werden auch eine Option erscheinen lassen und was wir tun. werden wir noch nicht duplizieren. Ich werde eine Art Layout für eines von diesen erstellen und dupliziert, also muss ich nicht das gleiche Layout zweimal machen. Also fangen wir zuerst mit Restaurant an und ich werde diese wegen meines Benutzerflusses umschalten . Ich habe Lebensmittelgeschäft oben und Restaurant unten, also wird es das gleiche Format behalten, also wird das Restaurant Liste sein. Also werden sie auf Restaurant klicken, und das werden sie sehen. Es gibt eine Menge Dinge, die wir hier einbeziehen müssen. Wir könnten eine Art Foto-Spread einschließen. Vergrößern Sie hier Schule wechseln Sie zurück in den Entwurfsmodus. Wir könnten hier ein Foto haben, das eine Art Restaurants hat. Oder noch besser, wir könnten eine Karte haben, genau wie in unserem Benutzerfluss. Wir sprechen über die Idee, eine Karte zu haben, auf der sie sehen können, wie näher Restaurant ihnen ist, so dass es Restaurant-Karte haben könnte. Dies wird 10 Punkte mit der Art der Top haben und Sie sind innerhalb eines Radius von fünf Meilen . Ich werde eine Liste haben wollen. Wir wollen nicht, dass diese Karte zu groß ist, weil wir keine wertvollen Immobilien aufnehmen wollen . Aber wir können immer einen Pfeil hier haben, um anzuzeigen, dass sie das Menü oder die Karte nach außen erweitern können . Wir werden eine Art Symbol haben, um ihn wissen zu lassen, dass sie die Karte erweitern können, um den gesamten Bildschirm zu übernehmen . Ok. Und wir haben hier einen kleinen Pfeil, den wir kopieren und einfügen können und das perfekte Symbol sein müssen . Es spielt keine Rolle, denn wir werden es irgendwann ändern. Das wird eine Art Indikator sein. Ich kann das immer wieder lösen. Und ich könnte dieses Symbol sogar bearbeiten, wenn ich wollte, nur um es ein bisschen mehr einen nach unten gerichteten Pfeil zu machen. Okay, damit sie wissen, dass sie darauf klicken könnten, und es wird sich irgendwie über den Bildschirm erweitern. Dies wird eine Restaurant-Karte sein oder einfach dort in die Mitte legen. Also, jetzt müssen wir eine Liste von Restaurants haben. Ich werde herausfinden, wie sie es bestellen werden und wie sie die Reihenfolge herausfinden können, damit sie es nach Relevanz bestellen können, sind die relevantesten, die es nach Top-Bewertungen bestellen können. Also müssen wir eine Art von Suchgebiet Pier haben, wo sie alles filtern können und dann müssen wir die Liste selbst haben. Wir wollen voran gehen und tun diese Filter Restaurant Bereich. Ich möchte nicht viel Platz in Anspruch nehmen, weil wir in der Lage sein müssen, zumindest in der oberen Hälfte des Bildschirms für Restaurants aufzulisten . Also mussten wir hier Filterrestaurants haben, nur eine Art einfacher Tag. Und ich werde ein paar Kisten hier machen, um anzugeben, wie sie filtern können. Also müssen wir darüber nachdenken, welche , wie wir wollen, dass sie filtern können. Ah, nun, die 1. 1 ist von Bewertungen. Lassen Sie uns voran und machen Sie Ihre kleine Kritik Blase. Bringen Sie diese Arbeit so überprüft unsere Bewertungen, nur machen diese Schaltfläche perfekt, weil wir immer voran gehen und machen das Wiederholungsraster Werkzeug und erstellen Sie die anderen Und wir wollen auch ein wenig Hinweise auf die Art und Weise haben, wie sie können gehen Sie voran und haben eine Dropdown-Menüoption hier, genau dort, so dass sie klicken können. Also lasst uns weitermachen und unseren kleinen Griff holen. Unser Pfeil hier muss nicht großartig sein. Dies ist ein Hinweis darauf, dass sie wissen, dass dies eine Dropdown-Menüoption sein könnte. Wir wollen den Menschen immer einen Hinweis darauf geben, was es ist. Okay, also das ist irgendwie dein Rating-Button. Wirklich? Grob erledigt. Was wollen wir sonst noch tun? Gehen wir weiter und klicken Sie auf die Wiederholung. Ich gehe weiter, markiere all diese Elemente und mache dann das Wiederholungsraster. Und gehen wir einfach voran und machen drei für jetzt. Ich will den Leuten nicht zu viele Optionen geben, und ich werde mit der rechten Maustaste klicken und eine Gruppe das Gitter. Also, was sind noch andere Dinge, die wir hier tun können , , damit Leute herausfiltern können? Also haben Sie eine Bewertung, die Sie haben E t a.. Haben Sie die Zeit geschätzt, warum wir diese Karte haben, die auflisten wird, wie lange es wissen wird , äh, Schnitt von Ihrem Standort und so, wie wir beginnen, diese Art von Idee zu entwickeln Sie, wenn Sie sich für ein Konto anmelden Was erhaltenSie, wenn Sie sich für ein Konto anmelden? Ein Bedürfnis, das zu wissen? Was ist diese App muss sein, um zu haben, um diese Fähigkeit zu entwickeln, um Ihnen zu zeigen, wie lange es ein bestimmtes Restaurant dauern würde, um Ihnen zu liefern. Sie werden dein Kleid brauchen. Also hier gehst du zurück zu dieser ursprünglichen Anmeldung und gehst dorthin. Sie müssen ihren Standort eingeben, sonst müssen sie die Erlaubnis geben, um Geo Sie zu finden. Das ist also eine Art Option, die wir brauchen, um zu beginnen, und etwas, das vielleicht im Benutzerfluss entwickelt worden sein könnte . Aber es ist nicht etwas, an das ich während dieses Prozesses gedacht habe. Und das ist okay. Sie müssen nicht an jeden einzelnen kleinen Trick denken, der in Ihren Benutzerfluss steckt. Also lasst uns darüber nachdenken. Wir haben zwei Möglichkeiten. Wir können sie in ihre Kontoadressinformationen setzen lassen, aber ich denke, es ist besser, Geo zu finden Ah, diese Person, weil sie bei der Arbeit und eine Bestellung Essen oder nehmen geliefert, um ihre Arbeit. Anstatt also an eine Adresse gebunden zu sein, also werden wir weitermachen und etwas recherchieren, herausfinden, was der beste Weg ist, das in diesem Prozess zu präsentieren, und ich bin gleich zurück. 7. Low – der Aufnahmeraum: machen ein wenig Forschung zu diesem Thema. Ich dachte, es wäre am besten, einen Pop-up-Bildschirm zu haben, wenn Sie sich entweder mit Facebook anmelden, sich anmelden oder sich für ein Konto anmelden. Also, kurz bevor Sie auf die Art von Ihrem Home-Bildschirm bekommen, haben Sie ein kleines Pop-up-Modul sind motil, das wird auftauchen und Sie haben, Ah, erlauben Sie Zugriff auf Geo, lokalisieren Sie Ihren Standort zu finden und haben immer einen Klick . Erlauben Sie immer. So müssen sie das nicht jedes Mal, wenn sie sich anmelden, haben, was sehr praktisch für Wiederholungsbenutzer wäre. Also, was ich tue, ist nicht irgendwie den Bildschirm hier an diesem Ort zu verstauen, wo er sein muss, wo er auftauchen wird. Im Moment habe ich Es ist ein separater Bildschirm. Aber wenn ich anfange, diesen und Prototyp-Modus ein wenig später in der Klasse zu verknüpfen, zeige ich Ihnen, wie Sie, ähm, irgendwie auf ein Pop-up hinweisen können ähm, . Aber das wird kein separater Bildschirm sein. Es wird entweder auf den Bildschirm gelegt werden, auf diesem Bildschirm, was auch immer sie protokollieren, aber es wird ein wenig extra schimpfen, um einen anderen Bildschirm zu sein, aber es wird ein Pop-up über dir durch den Bildschirm des Bildschirms sein, und Sie können das anzeigen und Sie sind Prototyping und Vorschaumodus, und ich werde Ihnen zeigen, wie Sie das ein wenig später tun. Also haben wir diese Art von kritischem Schritt. Und es war toll, dass wir das getan haben, weil jetzt die APP Zugriff auf Ihren Standort hat, so können wir es jetzt auflisten, wie nah? Wie geht es, wie schnell das Restaurant Ihnen liefern kann, was et A sein würde, das ist eine wirklich einzigartige Art von Qualität. Und wir müssen irgendwie Kontakt mit dem Entwickler ist, wenn dies genehmigt wird, um zu sehen, wie möglich das ist, ist es realistisch, in der Lage zu sein, alle diese von ET A zu suchen Wir würden das wirklich lieben. Wenn es zu teuer ist zu programmieren, müssen wir diese Idee irgendwie fallen lassen. Es ist also irgendwie ordentlich, darüber früh im Prozess nachzudenken. Wenn wir also Kontakt aufnehmen müssen, wer das übernehmen würde, wer diese Kodierung entwickeln würde, könnten wir anfangen, sie in diesen Planungsprozess einzubeziehen, damit wir ihnen keine Überraschungen werfen und weggehen. können wir nicht tun. Das ist zu teuer. Möglichkeit, die Arbeit durch diese Probleme zu reduzieren und andere Teammitglieder früh in den Prozess zu bringen , wird jedem helfen. Also möchte ich nicht eine ganze Menge Option geben, denn, wie wir, wie wir, bist du X Discovery Art Bühne, wo wir über ihre Benutzer-Persona gesprochen haben? Sie haben nicht viel Zeit. Wir haben eine zweijährige Marler-Runde. Sie wollen Abendessen bestellen. Die wirklich müde. Sie haben einfach den ganzen Tag gearbeitet. Lassen Sie uns also keine Bedingungen für Optionen werfen, denn wir wollen nicht, dass dies zu kompliziert von einer App ist . Also lassen Sie es uns einfach auf Bewertungen und E t. A. Und lassen Sie uns auch einen Suchknopf haben, weil Sie wissen, dass sie suchen wollen was Restaurant sie wollen, weil sie vielleicht eine Idee haben. Oh, ich liebe dich, Texas Roadhouse, oder ich liebe McDonald's, und sie wollen in der Lage sein, den Namen zu durchsuchen. Also lasst uns eine Art einfachen Suchknopf haben, und das wird kein Dropdown-Menü sein. Es wird ein kleines Glas hier haben, also lasst uns voran gehen und ein schnelles Symbol finden, damit es darauf hindeutet, dass das kein Dropdown-Menü sein wird . Gehen wir zu unserem netten Spickzettel hier, machen aus dem Icon-Bereich. Spickzettel hier, Sehen Sie, ob ich kein schnell aussehendes Glas finden kann, Lupe, Lupe, was auch immer Sie sich beziehen wollen, es gibt eine, die perfekt für das funktioniert, was wir für einen Low-Fidelity-Drahtrahmen brauchen. Wir müssen uns um das Markenstyling kümmern. Also haben wir eine kleine Suche. Ich habe hier angerufen, und wir konnten später herausfinden, wo das war. Wir wollen nur dem Klienten zeigen, oder wer auch immer diese Dokumente überprüfen und ihnen zustimmen wird, dass das eine Suchoption sein wird. Gehen Sie voran und entfernen Sie das, damit ich es einfach zu einem Schwarz-Weiß-Link machen konnte und dann werde ich Lage sein, Zugriff auf die Farbe zu haben. Ich werde es nur zu dieser Farbe machen. Das war's also. Das ist alles, was wir für Filteroptionen brauchen. Und jetzt sind wir bereit, unsere Restaurantliste zu machen. Also, jetzt denken wir über die Restaurant-Einträge nach, und wir wollen in der Lage sein, eine gute Menge auf hier zu passen, so dass sie nicht sitzen müssen, ihren Finger zu tun und die ganze Zeit nach unten zu blättern. Deshalb wollen wir in der Lage sein, mindestens fünf oder sechs Restaurants zu passen. Aber wir wollen auch nicht, dass es überfüllt aussieht. Also mussten wir darüber nachdenken, was die wichtigsten Informationen für eine Restaurantliste sind, und wir erforschen das ein wenig während unseres Prozesses. Aber das ist, wo wir es wirklich herausfinden und es in ein wenig mehr Detail bringen. Also es ist Gwen Zoom in und was ich an Adobe X T liebe . Wenn ich voran gehen und dieses fertig machen und immer wieder duplizieren wollte, könnte ich das Wiederholungsraster ausgeben,klicken Sie auf Wiederholungsraster, . Wenn ich voran gehen und dieses fertig machen und immer wieder duplizieren wollte, könnte ich das Wiederholungsraster ausgeben, klicken Sie auf Wiederholungsraster, und ich konnte voran gehen und leicht sehen, wie viele von diesen ich auf den Bildschirm passen konnte, so dass Wiederholungsraster Sie eine Tonne Zeit sparen. Also lasst uns darüber nachdenken. Wir haben eine Suchbewertung, so wollen wir in der Lage sein, nach Bewertungen zu suchen. Also lassen Sie mich sehen, ob ich nicht ein Sternsymbol greifen kann oder sogar einfach nur eine hier wirklich schnell mit einem Pin-Werkzeug entwerfen kann. Ich habe meinen kleinen Stern hier. Sehen Sie, ob ich das nicht auf der rechten Seite replizieren kann. Lassen Sie mich das hier ein bisschen höheren Kontrast machen. Und wir könnten ein wenig über den Farbton der Farbe nachdenken. Nicht unbedingt die Farbe, aber vielleicht der Kontrast der Farbe. Also können wir irgendwie darüber nachdenken, vielleicht eine Füllung zu machen, um ein wirklich hellgrau aufzulisten , oder in diesem Fall könnten wir sogar ein wenig dunkleren grauen Hintergrund machen. Also werde ich einfach halten, Option und duplizieren das und hier runterbringen und irgendwie ein wirklich, wirklich hellgrau machen und dann diese Box weiß machen, so dass wirklich irgendwie ein bisschen über dem Hintergrund herauskommt . Hilft dem Benutzer nur, die Auflistung über den Hintergrund zu sehen. Hintergrund muss nicht gegen die Auflistung kämpfen. Lassen Sie uns diese Sterne einfach groß genug machen, wo wir die Bewertung sehen können, und was wir tun könnten, ist, dass wir Bewertungen machen können, als wenn wir fünf Sterne zeigen müssen. Wenn es ein Fünf-Sterne ist, müssen wir über die Art von Bewertungssystem denken, das wir für diese App haben wollen. Also werden wir bei Star System bleiben, weil ich denke, wir werden etwas davon von einer anderen Bewertungswebsite nehmen. Außerdem werden wir nach Informationen greifen, also muss es etwas sein, damit wir damit arbeiten können. Der Entwickler könnte diese Informationen von So noch einmal ziehen, eine weitere Gelegenheit, mit den Entwicklern zu sprechen. Finden Sie heraus, was der beste Weg ist, um anzuzeigen, was ist der beste Weg, um das Bewertungssystem zu tun damit wir das tun können. Aber sieh dir an, wie viel Immobilien, die diese fünf Sterne beanspruchen, ein Fünf-Sterne-Restaurant ist, das viel zu viel Immobilien einnimmt. Also eine Sache, die wir tun könnten, ist, dass der Stern eine Rezension anzeigt, aber sie in einem amerikanischen System haben. Lassen Sie uns den Stern ein bisschen größer machen, machen Sie ihn deutlicher. Machen Sie es ein bisschen höher. Kontrast. Fügen wir eine Art dunkle Farbe hinzu, haben eine Syndikat-Bewertung, und dann könnten wir ein numerisches System haben. Also lassen Sie uns das duplizieren und sagen wir, 4,4 von fünf. Dies wird verhindern, dass wir all diese verschiedenen Sterne machen müssen, und wir können unser Bewertungssystem hier haben. Lassen Sie uns das Bewertungssystem auf der rechten Seite sein, ist die wichtigste Information wird der Restaurant-Name und die Art von Restaurant es ist. Und jetzt, da ich gerade erwähnt habe, dass du daran denkst, Oh, hier gehen wir ständig hin und her. Das ist Teil des Low-Fidelity-Drahtrahmen-Prozesses . Sie gehen ständig zurück und fügen Dinge hinzu, die Sie vergessen haben oder Ideen bekommen und versuchen , sie zu integrieren. Denn jetzt, da ich die Bewertung mache, realisiert ich und ich gerade den Restaurant-Typ erwähnt habe, wäre es nicht schön, voranzugehen und einen Restaurant-Typ Filter zu haben, wohin Sie gehen? Ich will brasilianisches Essen. Ich will mexikanisches Essen Das wird wirklich wichtig sein, wenn es um Restaurants geht, damit es eine Option ist, die wir in unseren Suchbereich integrieren müssen. Lasst uns weitermachen. Ich weiß, dass wir das einfach halten wollen, aber ich denke, nur noch eine hinzuzufügen, vielleicht nicht, diese Box zu machen, ist groß. Wir könnten weitermachen und das reindrücken, ohne eine zweite Reihe machen zu müssen. Wir werden sehen, ob wir das tun könnten, ohne es zu eng aussehen zu lassen, und wir müssen einen anderen Namen für Typ finden, weil das nicht sehr klar ist. Ähm, Sie wollen Ah, Restaurant, Restaurant, äh, Thema Restaurant Typ Restaurant, Stil des Essens. Also lass mich irgendwie recherchieren, was der beste Name für diese Kategorie wäre, und ich komme gleich zurück. 8. Bildung.: Sie werden es bemerken. Ich werde ständig forschen. Und das ist, wenn Sie Low-Fidelity-Drahtfreunde tun. Sie stellen nicht nur Dinge zusammen, die ständig den Prozess stoppen, recherchieren, vielleicht mit Ihrem Kunden reden und hin und her gehen, um zu versuchen, dies zum Laufen zu bringen. Es wird nicht nur an einem Tag entworfen. Also, was ich getan habe, ist, dass ich zu meinem nächsten gegangen bin, sind meine größten Konkurrenten , die Grubhub, die keine lokale Lieferung hat, aber es hat nicht mehr in größeren Städten. Also habe ich gesehen, was sie hatten, und sie nannten es Küchen. Was Sinn macht, welche Art von Küche Sie haben. Amerikanische mexikanische Sandwiches, diese Art von Zeug. Also habe ich die Idee der Küche von ihnen bekommen und in der Lage zu sein, sich in dieser App einloggen und sie zu studieren und irgendwie einige Ideen zu bekommen. Ich bemerkte auch, dass sie die gleiche Zukunft haben, die ich mit meiner aufnehmen wollte, nämlich Lieferzeit. So in der Lage zu sehen, wie sie damit umgegangen sind, nicht unbedingt kopieren sie, sondern nur irgendwie ah, einige frische Ideen und sie haben dies bereits umgesetzt. Also ist es einfach schön, ein Ende zu sehen, genau das zu legen, was ich versuche zu tun. Es hilft wirklich, diese Ideen zu generieren. Also gehen wir zurück zu unserer Liste. Also haben wir unsere Bewertung. Wir wollen vielleicht einen Weg finden, das etwas zu teilen. Also lassen Sie uns einfach ein wenig Trennbalken bekommen, denn wenn Sie ein tolles Layout haben, wenn Sie viele verschiedene Elemente zusammen haben, ist es immer schön, Trennbalken zu haben. Mit hohem Kontrast Boxen Möglichkeiten, es zu brechen, so dass der Benutzer irgendwie sehen kann, wie alles schön auf einem engen Raum kategorisiert ist. Also lassen Sie uns diesen niedrigen Kontrast machen. Es macht das wirklich leicht, Gracie. Der niedrige Kontrast hier und ich werde sich auf einen Kontrast in dieser Klasse beziehen, den Sie in der Lage sein möchten sicherzustellen, dass Sie einen langen Namen oder einen kurzen Namen haben könnten, und es funktioniert gut in diesem Raum. Also oft, wenn ich Namen mache, tue ich so, als ob ich Namen mache. Ich mache sehr lange Namen, nur damit ich das schlimmste Szenario haben könnte, in Bezug darauf, wie viel Platz ich brauche, um diesen langen Namen zu passen, weil du dieses schöne Design hast. Aber wenn Sie nicht genug Platz für den Restaurantnamen oder die Daten lassen, die dort eingesteckt werden . Die Entwickler könnten es schwer haben, mit Ihrem Design zu arbeiten. Sie möchten sicherstellen, dass Ihr Design flexibel ist? Es könnte mit vielen verschiedenen Längen funktionieren. Das ist ein Restaurant-Name, den wir nicht mögen. Wir müssen es ganz so groß haben, aber ich halte es gerne kühn. Wir müssen den Stil der Küche haben. Also musst du Mexikaner eine linke Ausrichtung machen und das hier unten bringen, um einen Restaurantnamen zu haben . Wir haben die Art der Küche, Wir haben die Bewertung, und wir wollen auch die e t A auch setzen, wenn wir wollen, wie lange es dauern wird, um dorthin zu kommen. Was eine Art ordentliches Merkmal unserer App ist, über die wir nachdenken müssen, ist das von einem kodierenden Entwicklungsstandpunkt aus möglich , weil sie immer noch einige Informationen benötigen, um ein Recht zu entwickeln. Ta. Wenn Sie 50 Enchiladas bestellen, dauert es mehr als 10 Minuten, um 50 Enchiladas zu machen. Also müssen wir anfangen zu denken, ist das möglich? Kann ich ein t t a an dieser Stelle oder zwei nach dem Gewicht, bis ich gehen, um zu überprüfen, um in der Lage, meine TA dort zu bekommen. Also müssen wir das als eine Möglichkeit betrachten. Gehen Sie zurück zum Entwickler und Brainstorming. So ist in der Lage, ein wenig Forschung zu tun. Und ich erkannte ,dass , wir zu diesem Zeitpunkt keine ET machen. Ich glaube nicht, dass wir genug Informationen haben werden, um eine realistische ET A zu haben, vor allem von lokalen Restaurants, die vielleicht keine Zeit haben, Feedback darüber zu geben, wie beschäftigt sie sind. Es wird einfach nicht funktionieren, glaube ich, in der Gegend, es sei denn, es ist eine große Restaurantkette, die die Logistik hat, um diesen Teil der Informationen zu behandeln . Also lege ich nur den Standort weg von der Geo-Position, wo du dich gerade befindest, und auch wenn ich darüber nachdenke, diesen kleinen Block abzuschließen, um ihn zu replizieren, um sicherzustellen, dass ich genug Platz für einen sehr langen Restaurantnamen habe und ich bin mir nicht sicher Das ist genug, weil es einige ziemlich lange Restaurantnamen gibt, also müssen wir in der Lage sein zu wissen, dass es auf zwei Zeilen des Typs zusammenbrechen und genug Platz hier haben könnte , so dass es nicht die Größe der Box ändert. Das könnte bedeuten, dass wir das tiefer verstauen müssen, damit das alles um eine Zeile verschickt werden kann . Also müssen wir nur sicherstellen, dass unsere Kiste groß genug ist. Entwickler wirklich, wirklich gut zu bekommen. Schätze das, um, genug Platz für sie zu haben, um kollabierende Leben von Typ zu haben. Art, den Entwickler im Auge zu behalten. Es wird jedem dabei helfen. Du bist sicher, dass wir genug haben, um den Kurs zu passen. Wir könnten die Dinge immer etwas kleiner machen. Alles klar, jetzt können Sie zwei Zeilen haben. Ihre Schule hatte das geglaubt. Und gehen wir weiter und haben das wieder aufgenommen. Wir wissen, dass es automatisch zusammenbricht. Wir haben genug Platz, so toll. Also, wenn wir uns darüber freuen, wollte ich eine Art Indikation hier auf der rechten Seite haben, vielleicht eine hohe Kontrastfarbe, Markenfarbe oder Rot, oder etwas, wo sie zeigen können, dass sie zur Landung gehen könnten Seite der Website oder dieses Restaurant und beginnen, Menüpunkte hinzuzufügen. Also denke ich, wir sind bereit, uns zu replizieren, also werde ich voran gehen und diese eine große Kiste zusammenfassen. Ich glaube nicht, dass wir diesen Kerl hier drüben brauchen, also werde ich diese Blase einfach zusammenfassen und wir werden weitermachen. Wiederholen Sie das Gitterwerkzeug. Ich würde gerne passen. Mein Ziel war fünf. Ich würde gerne sechs passen, aber ich will nicht, dass es vollgestopft ist. Mal sehen, wie sechs aussehen. Wir können weitergehen, in die Säulen gehen und zusammenbricht. So würden sechs aussehen. Ich glaube nicht, dass das zu voll ist. Wir könnten immer wieder zurückgehen und ein bisschen mehr Platz hinzufügen. Also werden wir 10 Pixel zwischen oder 12 hinzufügen. Sehen Sie, wie 10 Pixel zwischen jedem Hören aussieht und ich liebe die Art, wie der Hintergrund dieses hellgrau hat, weil es wirklich hilft, Art von weißem Pop out besser Wenn wir nicht das Grau hatten, beginnt alles zu mischen. Es ist schwer zu unterscheiden, wo sich die Restaurantliste im Hintergrund befindet. Aber nur diese andere Farbe zu haben hilft enorm mit der Lage, diese Informationen zu finden und zu zerlegen . Also lasst uns das nur ein bisschen finden. Denken Sie daran, wir wollen nicht auf die Designseite der Dinge hineingehen. Lassen Sie uns das umstellen. Ich will nur sicherstellen, dass alles aufgereiht ist. Also haben wir die Suche am Ende. Alles hat also ein konsistentes Aussehen. Dasselbe mit hier. Vielleicht könnten wir weitermachen. Nehmt das zusammen, so dass diese linke Seite auf die Restaurantlisten ausgerichtet ist. Also wollte ich da irgendwie einen weißen Hintergrund für die Blasen bekommen, die wollten, um sie zu einer schwierigen Zeit zu finden. Sie verschmelzen sich aus dem gleichen Grund in den Hintergrund, wie es ihnen schwer war sich auf einem weißen Hintergrund zu zeigen. Also gibt nur irgendwie ein wenig Kontrast zwischen diesem Hintergrund in dieser Hintergrundfarbe, die verkleinert. Lassen Sie uns eine gute Vorstellung von Layout bekommen. Ist alles leicht zu finden? Könnte ich den Namen des Restaurants deutlich zu lesen, alle Elemente verdaulich, leicht zu lesen, zu verstehen. Dwight haben die richtigen Symbole ableto zeigen, dass ich zu dem, was ich tun muss , um das zu erweitern, wie diese Karte wollte ich erweitern und übernehmen Sie den Bildschirm ist, dass genug Indikation ist alles Art von leicht zu lesen. Das ist es, was wir brauchen, um irgendwie zu nageln, bevor wir weitermachen. Denn je weiter wir in den Prozess gelangen, desto mehr werden wir wirklich anfangen, eine Vorstellung davon zu bekommen, wie diese App fließen wird. Und wenn wir anfangen, das High-Fidelity-Layout zu machen, was ist großartig daran, in einem Adobe X'd zu tun, denn Sie werden sehen, wie schnell es ist, es zu einem polierten Branding zu machen , ähm, Design danach, weil wir buchstäblich fallen . Fotos würden die Farben ändern, und es wird wirklich zum Leben erwecken. Und das ist, was so notwendig ist, um hohe Treue von Drahtrahmen meiner Lieblingssache zu tun. Also kommen wir dorthin. Wir haben den Anmeldebildschirm. Was ist wunderbar daran ist diese Seite und Bildschirm für Restaurant für Lebensmittelgeschäft. Es wird das Gleiche sein, also kann ich einfach unser Brett kopieren und einfügen und hier rauf gehen. Das wird also ein Zweig der Entscheidung und die Drahtrahmung Art der Benutzerreise sein, und sie werden auf ein Restaurant klicken und ins Restaurant gehen und mit dem Check-out-Prozess fortfahren . Ah, sie könnten auch einkaufen, wenn sie wollten. Also ist es schön, diese Drahtrahmenoption zu zeigen. Und wir würden nur das alles zu Lebensmittelgeschäft für ein Markup Zwecke ausschalten. Denken Sie daran, Sticky Header wird auf jedem Bildschirm sein. Also hier sind wir. Hier ist, was wir bisher haben. Schau dir an, was wir schon getan haben. Wir haben eine Slog und Screen Logging Optionen. Wir haben eine Pop-up-Box, um uns zu helfen, die Informationen, die wir brauchen, um unsere Suche später zu tun , wir haben unsere Lebensmittel-Restaurant Optionen. Wir haben sie entweder zum Lebensmittelgeschäft oder zum Restaurant gebracht. Und jetzt sind wir bereit, die Restaurant-Landing Page zu machen. So erhalten sie eine Auswahl einer dieser Optionen. Vielleicht derjenige, der am höchsten bewertet ist. Vielleicht werden sie auf Bewertungen klicken und auf die höchste klicken und auf die obere klicken. Dann gehen sie auf die US-Landing Page. Wir werden nur die Nächsten sein. Lassen Sie uns fortfahren und kopieren und einfügen. Also werden wir schneiden, um die, äh, diese kleine Kiste hier zu behalten äh, . Und anstatt dies zu einer Karte zu machen, haben wir eine Karte. Später. Wir machen das ein Foto vom Restaurant. Wir brauchen diese Filter nicht mehr. Er hat Filter heruntergelassen, seit das löschen. Nicht brauchen alle diese Optionen und was wir wollen, um voran zu gehen und beginnen, das Menü Art von im gleichen Stil. Also denke ich, das ist genau das, was wir tun werden. Einer auf Gruppe dieses Gitter. Und wir brauchen nur die sehr Top-Option, damit wir weitermachen und dies anpassen können. Also jetzt müssen wir darüber nachdenken, was wir auf der Restaurant-Landingpage wollen. Was ist wichtig zu sehen, nachdem Sie irgendwie wollen, um das Restaurant zu erkunden Ah, Foto von Lebensmitteln, die Sie durchblättern können, waren wahrscheinlich die Sache, die ich wissen möchte. Ich möchte wissen, wie die Vorspeisen aussehen? Wie sahen sie aus? Appetitlich. Und so gibt es diese Fotos könnte eine Art gleitendes Ding sein, wo du deinen Finger nehmen und einfach ein Schiebe-Karussell haben könntest . Lass uns das machen. Lasst uns irgendwie zeigen, Ah, Karussell. In gewisser Weise könnten wir das tun. Es ist ein paar Wiederholungen. Es geht. Nehmen Sie den Rahmen von Wiederholungskreisen ab, die angeben, wie viele Fotos zum Durchblättern verfügbar sind . Okay, das wird ein wenig Bildung sein. Und vielleicht könnten wir einen Hinweis haben. Wo bist du, Steve? Ein Foto. Legen Sie das in den Hintergrund. Lassen Sie mich das etwas dunkler machen. Nicht die Grenze, sondern Phil. Und das kann irgendwie auf das Foto hinweisen. Und das könnte darauf hindeuten, dass Sie vielleicht ein wenig von dem anderen Foto daneben sehen. Und was ich daran liebe, dass diese Art von gibt Ihnen eine kleine Vorschau. Also, weißt du, irgendwie was? Auf welche Weise möchten Sie eine von Streichen nach links oder rechts streichen? Welches Foto sieht in einem kleinen Teaser auf der linken und rechten Seite appetitlicher aus. Das ist irgendwie nett. Nicotrol. Diese Luft richtig ausgerichtet, wir könnten ein so gerahmt werden. Mehr Abstand zwischen unseren Fotos. Es ist noch ein wenig offensichtlicher. Also gibt es irgendwie unser würde den Restaurant-Namen haben. Also lasst uns weitermachen. Duplizieren Sie den Restaurantnamen. Ich muss das irgendwo haben. Also könnten wir Restaurant hier unten eine Art Kopfzeile nennen und das dunkler machen, und dann unser Menüsystem. Also hier ist unsere Speisekarte. Ich will vielleicht keine Menütypen haben. Und dann, anstatt sie weiter schicken zu müssen. Wir schicken ihn bereits auf viele verschiedene Bildschirme, also könnten wir Pop-up-Menüs verwenden. Wir könnten Rutschen machen. Wir könnten Ah tun, Menüs, die sich ausdehnen, aber nicht unbedingt in einen anderen Bildschirm bringen. Versuchen Sie einfach, die Menge der völlig verschiedenen Bildschirme zu reduzieren, die der Benutzer durchspringen muss , um zu bestellen. 9. Menu: Jetzt müssen wir darüber nachdenken, wann Sie auf der Zielseite sind. Was ist der beste Weg, um alle verschiedenen Menütypen, die Sie haben, zu präsentieren, weil Sie Vorspeisen , Vorspeisen , Desserts , kleine Teller, Top uns haben viele verschiedene Kategorien, und Wir wollen sie nicht überwältigen. Ich fühle mich wie ein Listenformat, wenn wir ein Listenformat gemacht haben und vielleicht ein wenig hart sein könnten, denn vielleicht ist das, was sie suchen, am Ende der Liste. Und sie müssen klettern, um die Vorspeisen oder die Schule zu bekommen, um Desserts zu bekommen. Also denke ich, vielleicht könnte ein spaltenbasiertes Layout nebeneinander ein wenig besser funktionieren, und so würden sie in der Lage sein, mehr ein wenig höher in diesem auf dem Bildschirm zu sehen. Also lasst uns eine Art Gerechtigkeit scheint einen sehr kleinen Warner zu tun. Ich werde nicht zu viel Zeit damit verbringen und mit aufhellen und mal sehen, ob wir das große Wiederholungswerkzeug nicht verwenden können. Also lasst uns unseren kleinen Titel hier holen, und das wird Dessert sein. Das gibt es nicht alles. Wir werden Desserts sein, aber wir werden in der Lage sein, eine Idee zu bekommen. Lassen Sie uns eine zentrale Ausrichtung machen, wie das aussehen wird. Was ich tun werde, ist vielleicht die Möglichkeit zu haben, dort ein Symbol oder ein Foto zu haben, das auf ein Dessert hinweist. Also, um ein Symbol zu zeigen, werde ich nur gehen, um einen Flugzeugkreis zu schmoren. Wir werden nicht entwerfen. Das Symbol wird das in der nächsten Phase tun, aber wir müssen sicherstellen, dass wir genug Platz für sehr lange Namen haben. Nicht alles wird ein kurzer, prägnanter Name. Lasst es uns weit halten. Besorgen Sie eine Gruppe. Mal sehen, was das aussieht. Mit der Wiederholung, Great Tool ist aufgrund von Spalten und lassen Sie uns sechs tief tun. Lass uns acht machen. Nur um wirklich sicherzustellen, dass wir einen Restaurant-Namen zeigen, dass unsere Restaurant-Kategorien, die eine Menge von Restaurants Kategorien haben können . Lassen Sie uns die gleiche Breite und die Spalte hier machen. Also lassen Sie uns sehen, wie viele Pixel, die IHS das ist Ah, es ist zu 14 und lassen Sie uns 14 tun. Was meinst du? Glaubst du, das funktioniert? Denn jetzt müssen wir darüber nachdenken, was der nächste Schritt ist, wenn sie ein Dessert bestellen wollen. Und so denke ich,weißt du, weißt du, ich bin mir nicht sicher, ob das funktioniert, denn wenn du ein kleines Pop-Down-Menü machst. Sagen wir mal, es gibt ein wenig Pop runter. Dann könnten Sie so herauskommen und Sie werden in der Lage sein, es hinzuzufügen. Aber ich denke von einer Entwicklung aus der sich entwickelnden Sicht der Codierung Standpunkt, die vielleicht einige Probleme mit dem Pop-Out-Menü haben kann. Also werde ich diese ganze Idee verschrotten, und ich werde zu dieser Idee zurückkehren, die Säulen zu machen. Ist dir aufgefallen, wie ich das testen musste? Ich musste das auf See testen, aber ich wollte funktionieren oder nicht. Und ich wusste nicht, dass es funktionieren würde, bis ich darüber nachdachte, dass zwei ihn auf einen ganz separaten Bildschirm schicken könnten . Und das möchte ich vermeiden. Das wird also einfach nicht funktionieren, aus diesem Grund werde ich das hier behalten, nur für den Fall ich es später brauche. Schieben Sie das raus. Also überarbeiten dies ein wenig, um eine bessere Pop-Out-Menü Art von Aktion zu haben, wenn es passiert , nur irgendwie etwas sehr einfaches zu tun. Das geht irgendwie rüber. Aber ich habe es viel dünner gemacht oder so kann ich das Repeat Grid Tool und passen mindestens sechs dieser Jungs, alle in einem sehr schönen, prägnanten Ort war geschlossen. Der Zusammenbruch, das Muster hier ein bisschen. Also vielleicht genau hier. Ich meine, Vorspeisen, Vorspeisen, Desserts. Du gehst einfach weiter auf die Liste. Und dann müssen wir herausfinden, was passieren wird, wenn wir auf die Erweiterungsart der Option klicken . Und das wird irgendwie auf dem nächsten Bildschirm sein, wo wir das entwickeln werden. Werde das alles los. All diese Dinge, Leute, Leute, wir werden irgendwie duplizieren, was wir hier haben, und das wird es sein, was bei der Erweiterung des Menüs passiert. Also, was wird passieren? Unlustlos unter der Gruppe könnten wir Zugang zu all diesen haben und wir werden diese runterschicken, also wird es irgendwie ein Akkordeon-Stil sein. Das hätte mit all den verschiedenen Optionen hier fallen können. Und denk dran, genau wie wir es vorher getan haben. Wir müssen sicherstellen, dass wir Platz für sehr lange Namen haben, denn es gibt einige sehr lange Seiten-ein-Namen in Restaurants. Also lassen Sie uns vielleicht die Textgröße reduzieren, und vielleicht müssen wir es nur als normales Warten haben. So wird viel Platz für sehr große Größenoptionen lassen. Wir haben einen Warenkorb müssen in der Lage sein, diese Artikel in den Warenkorb zu legen. Also brauchen wir ein Plus- oder Minuszeichen, um anzuzeigen, dass sie vier Pommes Frites wollen. Sie wollen nur eine Braten und eine Art Knopf, der in den Warenkorb legen anzeigt. Also haben wir hier genug Platz, um das zu tun. Also machen wir das als Nächstes. Okay, also war ich in der Lage, daran ein wenig zu arbeiten und bekam ein paar sehr Arcade-Buttons um anzuzeigen, welche Art von Aktionen der Benutzer ausführen muss, um es der Tasche hinzufügen zu können. In diesem Fall habe ich in einem Wagen angerufen, aber ich denke, wir müssen es wahrscheinlich eine Tasche nennen. Es wird einkaufen gehen. Es ist schön, Dinge zu einer Tasche hinzufügen zu können. Wenn Sie es im Restaurant abholen gehen, fügen Sie eine Tasche hinzu. Diese Art von wir finden etwas von dieser Sprache ein wenig, während ich durch diesen Prozess arbeite , und deshalb müssen wir einen Knopf haben, der anzeigt, dass die Tasche hinzugefügt wird. Also lassen Sie uns voran und machen Sie ein wenig einen höheren Kontrastknopf und lassen Sie uns voran gehen und die Rechnung ändern. Diese Art von hilft also, dass Element herausspringt und nicht so sehr mit dem Hinzufügen zu den Artikeln konkurrieren . So können Sie sagen, wie diese Art von sperrig Sie, die ich gerade entworfen habe, wir werden das ein wenig später verfeinern . Aber ich denke, in Bezug auf den Raum, ich sollte genug Platz haben, um in der Lage zu sein, die Optionen hier auszufüllen. Ich könnte den Typ immer etwas kleiner machen, ihn ein wenig nach links bewegen. Und wenn wir das tun, das ich entwerfe, können wir uns immer zusammenbrechen. Machen Sie dies ein wenig raffinierter, um uns ein wenig mehr Platz für längere Seiten-Optionsnamen zu geben. Also, was ich hier tun werde, ist, dass ich irgendwie denken werde, dass ich das immer noch als Wiederholungs-Grid-Werkzeug habe . Es wird wieder zusammenbrechen und es aus dem Wiederholungsraster nehmen, damit ich diese Option ergreifen kann , es zusammen rupe und es mit dem Typ im Inneren wiederholen kann. Also ich denke, wir haben fünf Optionen gemacht und lassen Sie uns das hier unten zusammenbrechen, wir könnten ein wenig Abstand dazwischen setzen. Nicht sicher, ob das hilft oder nicht. Vielleicht tut es das. Eine Sache, die ich tun möchte, bevor ich das alles mache. Lassen Sie mich den Schlag an der Grenze erleichtern. Wir wollen nicht an eine Grenze denken, also lass mich runtergehen und das eine einrichten. Machen wir es zu einem 0,6 einfach ein bisschen aufstehen. Jetzt bin ich bereit Preise. Und was für eine Art von Show? Was passiert, wenn es zusammenbricht? Sie klicken auf diese Schaltfläche. Dies ist kein ganz anderer Bildschirm, aber es ist etwas, das wir in der Lage sein werden, keine Animation gezeigt zu haben. Wenn wir einen Prototyp-Modus machen, wenn wir alles miteinander verknüpfen , werden wir das Pop-Out-Menü zeigen, damit es es auf einem separaten Bildschirm auf X d haben würde . Um diese Animation zu erreichen, Um diese Animation zu erreichen, obwohl es kein separater Bildschirm für den Benutzer sein wird. Großartig. Also lassen Sie uns verkleinern, sehen, was wir bisher haben, so dass es, in der Lage, verschiedene Nebenelemente hinzuzufügen. Also, jetzt gehen wir weiter und klicken Sie auf die Benutzer, die auf den Warenkorb klicken, werden sie bereit sein, um zu überprüfen. Jetzt, wo ich über OK nachdenke, fügen Sie Optionen zu Ihrer Tasche hinzu. Was jetzt? Also lassen Sie uns sagen, Option eins und Option zu einer Option drei hinzugefügt haben. Wie komme ich wieder raus? Gehe ich einfach in den Warenkorb? Es ist nicht offensichtlich, was Sie als nächstes tun, also muss ich in der Lage sein, einen Weg zu finden, zurück zur Restaurant-Landing Page zu bekommen, um irgendwie einen Check-out-Bildschirm zu haben oder die Möglichkeit zu haben, immer sofort auschecken . Also einfach ein paar andere detaillierte Elemente hinzufügen, die Arbeiter Toe eine Zielseite haben wollen? Wir konnten nicht einmal eine Option haben, eine Kopie, vielleicht ein paar Sätze über den Restaurantnamen und müssen auch einen Platz haben, um ihn auf der Karte zu finden . Also müssen wir in der Lage sein, das als Option zu haben. Also werde ich das umstellen und vielleicht ein kleines Kartensymbol haben, um zu sehen, ob ich hier kein Kartensymbol in unseren kleinen Elementen finden kann, wenn er nicht gut sein wird oder Sie wissen, was für ein besserer Weg ich genau weiß, was wir tun können. Ich könnte in Adobe Illustrator gehen. Ich werde mein Branding Paket bekommen, das ich zusammen habe. Und ich habe das perfekte Willens-Symbol, um eine Karte anzuzeigen. Also werden wir das benutzen. Dies ist Teil unseres Branding für unsere, äh, unsere App. Warum nicht Bedienelement ihrer App in das Icon-Design integrieren? Also lass mich ein paar davon schnappen und diese exportieren, so dass ich sie als Symbole im W x d haben kann . 10. Einkaufswagen: Ich optimiere unser Layout und füge alle Arten von Details hinzu, die notwendig sind, damit der Benutzer alle Informationen hat, die benötigt, um richtig auszuchecken und in den Warenkorb zu legen. Also wollten wir die BAP-Option haben. Ich wollte zeigen, wie weit weg das Restaurant von ihrem Standort war, und sie können auch auf diese klicken und ein kleines Pop-up-Box wird voran gehen und laden Sie eine Karte, die Art von einem groben e e t zeigen wird. und sie können auch auf diese klicken und ein kleines Pop-up-Box wird voran gehen und laden Sie eine Karte, dieArt von einem groben e e t zeigen wird. in ihrem Hof. Und ich wollte sicherstellen, dass wir Bewertungen auf hier und einige dieser Details, die auf der vorherigen Seite waren, so dass sie Konsistenz mit der Zielseite haben konnten. Also wollte ich auch haben oder von Ihnen bestellen Schaltfläche am unteren Rand, wenn sie jemals irgendwie verwirrt und nicht wissen, dass sie bereit waren, zu überprüfen, wenn sie eine Rezension Bestellung haben, Art, um sie daran zu erinnern, dass sie weiter gehen und auschecken konnten. Und ich wollte auch einen Hinweis hier haben, dass, wenn Sie etwas zu den Wagen hinzufügen, etwas passiert und wir eine Animation machen könnten, wenn wir zum High-Fidelity-Layout gehen, das darauf hinweisen kann, dass dies vielleicht ein wenig herausspringt. Sie würde seine Farbe nicht ändern, um zu wissen, dass Sie hier oben klicken können, um den Check-out-Prozess zu jeder Zeit zu tun . Möchten Sie etwas in den Warenkorb legen? Also werden wir das tun. Wir werden hier noch einen Bildschirm hinzufügen, und das ist nur für die Animation für später. Wir werden nur voran gehen und zeigen, wie das aussieht und den Low-Fidelity-Drahtrahmen, damit wir dem Kunden zeigen können, wie wir in Bezug auf die Animation und Show geplant haben . Ah, klare Hinweise darauf, dass der Check-out-Prozess bereit ist, fortzufahren. Also, was können wir hier tun? Wir können das etwas größer machen. Wir könnten das etwas größer sein und wir werden später eine Animation machen, also werden wir es irgendwie runter bringen, wenn ich das noch machen könnte. Wir werden nur zeigen, was sich ändern würde, wenn etwas zu den Autos hinzugefügt wird. Nehmen wir an, zwei Elemente wurden der Karte hinzugefügt. Nehmen wir an, diese Umkehrungen wird sagen, dass dunkler wird und die Zahl heller wird, um Hinweise auf eine Änderung zu zeigen . Vielleicht ist es rot. Vielleicht ist es eine andere Farbe, und wir können das angeben, damit der Benutzer darauf klicken möchte. Also lasst uns den Farbton hier ändern. Ich weiß, dass wir gerade gerade Schwarz-Weiß machen, aber lassen Sie uns darauf hinweisen, dass viele Veränderungen geschehen. So die in den Warenkorb hinzufügen wird automatisch die Karte hinzugefügt und haben eine kleine Pop-Animation. Vielleicht zoomt es irgendwie ein und zoomt nur eine sehr kleine Menge aus. So fantastisch waren sehr nah dran. Sieh mal, wie weit wir in diesem Prozess so weit gekommen sind. All die Bildschirme, die wir verspotten und wir sind irgendwie ein wenig weiter als viele Leute tun, ist Low-Fidelity-Drahtrahmen. Viele Leute skizzieren das auf dem Papier, also denken sie nicht an diese kleinen kleinen Details, die wir sind. Aber wenn es um die Entwicklung des High-Fidelity-Drahtrahmens geht, haben wir wirklich viel getan. Wir haben eine Menge Grundarbeiten in Bezug auf die Dinge gemacht, die wir nur die grafische Seite verfeinern müssen. Also, jetzt, wo wir das getan haben, was ist der nächste Schritt? Lassen Sie uns zu unserem Benutzer-Flussdiagramm gehen, wo Sachen in den Warenkorb hinzugefügt wurden. Jetzt werden sie in der Lage sein, das Auto zu überprüfen und zu überprüfen, um zu sehen, wie viel alles ist. Also brauchen wir eine Art von einem Check-out CART-Seite oder, in diesem Fall, eine Einkaufstasche Bildschirm, die Steuern insgesamt leben wird und wie viel diese App kostet als Service-Gebühr. Also hier ist unsere Einkaufstasche Bildschirm, also werden wir weitermachen und den Titel „Etwas ist los, tun Sie es. Ah, Einkaufstasche und wir wollen in der Lage sein, das e t A zu zeigen. Nun, da wir wissen, dass wir den Betrag haben, der bestellt wird. Wir kennen das Restaurant. Wir kennen den Standort. Wir haben alle Daten, die wir brauchen, um auf E. T.A. R geschätzte Ankunftszeit für unsere Lieferung von Lebensmitteln zeigen T.A T.A zu können. Anstatt diese Fotos oben zu haben, könnten wir eine Chance haben, dies zu einer Karte zu machen. So wird dies eine sichtbare Karte mit einem e. T. T. A. Es gab zwei Leute haben dieses Symbol gehen, um unsere Marke kleines Symbol verwenden wir in unserem Logo ist ihr Symbol. Ich könnte in der Lage sein, dies zu enträumen und die Farben auszutauschen und noch einmal einfach nur Stolz zu halten . Nur der Schatten da. Das wird also eine Art Hinweis darauf sein, wo es ist. Wir werden einen kleinen Knopf haben, und ich habe, glaube, den perfekten. Ich werde voran gehen und öffnen Sie durch wenig betrügen sie hier und sehen, ob ich nicht etwas finden kann um die E t anzuzeigen A. Haben Sie eine kleine Blase, um die Zahl in setzen, Sehen Sie, wie einfach es ist, wenn Sie irgendwie einige von diesen haben entworfen. Manchmal gehe ich zurück zu früheren Projekten und hole dir I Elemente von dort. Da ist es, dass genau hier perfekt ist. Es ist, was ich will. Okay, also wird dies et a zeigen. Sagen wir, E t. A wird sein. Nehmen wir an, es ist 12 Minuten, 12 Minuten Ankunftszeit. Es gibt et A. Es gibt einen Standort auf der Karten-Einkaufstasche. Wir brauchen diese Informationen nicht mehr. Auf unserem Flussdiagramm konnten wir Wettbewerber sehen, Restaurants in der Nähe, die vielleicht eine schnellere Lieferzeit hatten, also wollen wir in der Lage sein, das auch in unserem Drahtrahmen zu haben, denn ich denke, das ist eine Art ordentliches -Funktion zu haben. Also werden wir hier drüben haben. Und das wird ein bisschen großartig sein, weil wir nicht wollen, dass die Leute sich das ansehen . Siehst du das? Das ist ihre Ankunftszeit. Lass uns das etwas dunkler machen, Bray und machen das. Lass es uns einfach mit Eero zeigen, und das wird alternatives Restaurant hier drüben sein. Wir müssen einige grafische Wege finden, um sicherzugehen, dass das offensichtlich ist. Würden wir das High-Fidelity-Layout machen? Dass das nicht das Restaurant ist, ist das Restaurant, aus dem sie auschecken? Dies ist das Restaurant, das ihnen eine Option gegeben werden. Vielleicht ist es eine schnellere, schnellere Lieferzeit, okay, und es ist von einem ähnlichen Typ. Vielleicht ist dies mexikanisches Essen, und es lädt ein anderes mexikanisches Restaurant, das zufällig eine schnellere Lieferzeit hat. Also, anstatt einige zufällige Restaurant hatte und wollen Chinesisch, Ich wollte Mexikaner, dass es in der gleichen Kategorie der Lebensmittelart ist. Okay, hier ist also eine Einkaufstasche. Wir brauchen nicht alle diese Elemente mehr, so dass wir es löschen können Wir sind unsere Überprüfung Bestellung zu halten oder sagen, Kauf jetzt beenden Bestellung wird die sehr weniger, aber am Ende. Und wir wollen den Bildschirm nicht. Wir haben irgendwie U X recherchiert und beschlossen, dass wir einen sehr, sehr, sehreinfachen Check-out-Bildschirm haben wollen , sehr . Wir wollen nur einen Bildschirm. Wir möchten nicht, dass der Benutzer scrollen muss Gehen wir also weiter und reduzieren Sie dies, damit der Benutzer nicht scrollen muss. Wir werden unser Bestes tun, um sicherzustellen, dass du das machst. Klicke oben zu meinem Top Art Board Namen und bekomme, dass die Größe des Bildschirms sein. Großartig. Sie wollen nicht, dass sie scrollen. Wir wollen wirklich versuchen, prägnant zu bleiben. Wenn wir nicht herausziehen können, wird das tun. Okay, also wird das, äh, Lebensmittelartikel eins sein. Wir werden eine Art Entfernung haben. Wir müssen in der Lage sein, aus dem Warenkorb zu entfernen. Also, was ich tun werde, ist voran zu gehen, leihen Sie sich vom Bildschirm über den Weg. Immer muss man den Menschen die Möglichkeit geben, zu entfernen und zurück in der Zeit zu gehen. Die hier ist eine Art von unserem Artikel entfernen. Wir wollen ihnen auch die Möglichkeit geben, nicht nur den Artikel zu entfernen, sondern vielleicht einen zu entfernen. Vielleicht gibt es fünf und da, aber sie wollten nur vier Pommes Frites, aber es gibt fünf Pommes, die wir bekommen müssen. Geben Sie ihnen auch die Möglichkeit, subtrahieren hinzuzufügen. Also leihe ich mir diese Elemente aus, seit ich sie bereits unterschrieben habe. 11. Endanwender: Ich habe ungefähr 10 Minuten damit verbracht, durch diese nächsten beiden Bildschirme zu arbeiten, und ich möchte irgendwie durch die Art gehen, warum ich einige Layoutentscheidungen getroffen habe, die ich getroffen habe. Also haben wir eine Art von diesem sehr einfachen Check-out-Prozess. Wir wollen einen einzigen Bildschirm haben. Wir wollen nicht zu scrollen Check-out Prozess, und ich dachte, Auflistung alle Ihre Artikel und mit ihnen zusammenklappbar sein, aber auch mit den Steuern aufgelistet. Es gibt eine Service- und Liefergebühr, aber auch einen Bereich, in dem sie eingeben und einen Tipp hinzufügen können, weil es schön ist etwas zu liefern und sich nicht darum kümmern zu müssen, jemanden zu kippen. Es ist bereits ein Teil des Prozesses und der schließlich sehr einfach zu lesen Total und eine Bestellung jetzt Schaltfläche und so dass, wenn sie auf die Schaltfläche Jetzt bestellen klicken, werden sie auf diesen Bildschirm kommen. Ich war in der Lage, diese aus dem Spickzettel ein wenig Sie zu bekommen, Ich Kit, dass wir von Adobe die Will Draht Rahmen-Kit heruntergeladen, und das hat mir eine Menge Zeit, die alle diese Sachen eingeben und herausfinden, was für eine Kreditkarte benötigt wird . Es war wirklich schön, das zu kopieren und einzufügen. Wir können es später an unseren eigenen Stil anpassen. Aber ich habe diese Add Kreditkarte Wallet, weil wir wollen, ist das erste Mal, dass sie auschecken. Sie haben keine Kreditkarte, also müssen wir ihnen die Möglichkeit geben, eine Kreditkarte hinzuzufügen, damit sie alle diesen Schritt beim nächsten Mal machen müssen. Es wird nur wollen, um Ihre Karte auf Datei Pop-up-Box zu verwenden und sie klicken, Ja, und so fangen wir an, wirklich Fleisch diese aus. Führen Sie alle Optionen aus, die dem Benutzer für das Design zur Verfügung stehen. Die kleine Pop-Up-Box muss das auch entworfen haben. Also gibt es, wissen Sie, Moment bekommen wir nur die Grundlagen, also machen wir das ein wenig später, wenn wir in den Prozess einsteigen . Also gibt es wirklich eine Art Bildschirm drei Bildschirme, die der Benutzer durch den Check-out-Prozess gehen wird , und wir könnten denken, war das zu viele? Gibt es eine Möglichkeit, sich zu konsolidieren? Ich glaube nicht, dass es das gibt. Ich versuche, diesen Prozess noch weiter zu vereinfachen. Dies ist, wenn ich mit einigen anderen Leuten sprechen könnte, die Eigentum an diesem Projekt haben und herausfinden, was ihre Gedanken und Ideen sind, vor allem im Gespräch mit den Entwicklern, die ah haben können, Lösung sind sicher Pop-up eine Slide-out-Option , die diesen Prozess noch schneller machen könnten. Also für jetzt, für grundlegende Drahtrahmen und einige Ideen des Gesamtprozesses bekommen, denke ich, das funktioniert gut. Sie überprüfen die Reihenfolge, die sie überprüfen, sie klicken jetzt auf Bestellung, und sie müssen Adoption hinzufügen. Und danach wird noch ein Bildschirm mehr übrig sein. Und es wird sein, was passiert, wenn sie einen erfolgreichen Check-out-Prozess haben und es wird zeigen, dass E. T. T. A. ein wirklich großer Kartenbildschirm ist. Also, was ich tun könnte, ist, äh, etwas hier oben zu duplizieren . Vielleicht haben wir hier schon eine Karte und erweitern das einfach ein bisschen weiter raus. Es wird zeigen, wie lange es dauern wird. Wir brauchen die Konkurrenten er nicht mehr, da sie ihre Bestellung aufgeben. Setzen Sie diese Front und Mitte, und ich glaube, wenn wir zurück zu Reserve Flussdiagramm gehen, hatten wir eine Art von der Möglichkeit, das Restaurant zu kontaktieren, wenn sie die Reihenfolge ändern wollten. Also lassen Sie uns diese Schaltfläche kopieren, so dass, Ah, ändern Auftragswechsler, Anzeigenreihenfolge sein könnte Ah, ändern Auftragswechsler, ändern Auftragswechsler, . Und diese Schaltfläche wird einen Pop-up-Bildschirm haben, der Zugriff auf die Nummer und vielleicht eine Textnachricht Funktionen haben, um das Restaurant zu kontaktieren. Also lassen Sie uns eine andere Option machen, die ich denke, würde zu dem Benutzerflussdiagramm zurückkehren, das wir erstellt haben. Es gibt auch die Möglichkeit, vielleicht zu überprüfen, aber das wird nicht ein wenig später in den Prozess kommen. Also haben wir es. Wir geben ihnen die Möglichkeit, die Bestellung zu ändern oder hinzuzufügen. Lassen Sie uns den NAPA wirklich groß machen, und das wird aktualisiert, aber ein bisschen größer. die Person näher kommt, wird es wie uber sein, wo sich der Kurs, in dem sie den bekommen, ändern wird und dann werden wir den Bildschirm nach erfolgreicher Lieferung haben , der sie auffordert, die Erfahrung zu überprüfen. So Lieferung erfolgreich und sie werden eine Fähigkeit haben, in der Lage, es zu bewerten So, Lieferung erfolgreich. Wir haben, wie vielleicht eine schöne Grafik. Es ist eine Chance, später einige Designarbeiten zu erledigen, die in der Lage sein wird, zu verkaufen. Wir möchten sie zurückschicken, interessiert und Lebensmittel bestellen und sie irgendwie aufgeregt über diesen nächsten Schritt. Natürlich werden ihre Karren auf Null sein, weil sie gerade ausgecheckt haben. Richtig? Es gibt also noch so viel zu entwerfen. Wir müssen die Pop-Out-Menüs gestalten. Wir müssen entwerfen, was passiert, wenn sie auf die Karte klicken. Wenn es einen Pop-up The New Yorker geben wird, geht es direkt in den Wagen. Es gibt eine Menge Dinge, die wir entwickeln müssen. Das ist nur ein Winkel. Ist dies diese eine Reise durch, Auschecken aus einem Restaurant, Wir müssen immer noch haben, dass sie überprüfen Sie ein neues Lebensmittelgeschäft Waren nicht zu tun, dass diese Klasse, denn es würde 20 bis 30 Stunden dauern, um wirklich jeden Bildschirm in der niedrigen Treue zu entwerfen Art und Weise. Also konzentrieren wir uns auf diesen Prozess, den wir gemacht haben, und arbeiten ihn als Nächstes. Gehen Sie zur High Fidelity. Das ist mein Lieblingsteil. Dies ist der lustige Teil, den wir konnten, um die Branding Arme zu integrieren. Das Logo wird einige benutzerdefinierte Symbole zu tun bekommen. Wir können unsere Farbpalette dort hinzufügen, und es wird ein sehr schneller Prozess sein. Dies ist die harte Hausaufgaben Wir haben alle wirklich schwierig für die Arbeit gemacht, und jetzt ist es Zeit, auf diesem Designer schlüpfen, wirklich tauchen in neue Ich wünsche. 12. High Wireframe - Erste Schritte: Das ist, wo der Spaß wirklich passiert. Wir sind bereit, endlich anzugehen, dass High-Fidelity-Drahtrahmen, wenn wir wirklich in das Design Teil der Dinge bringen und Spaß haben und ein wenig wild laufen. Hier glänzt mein Grafikdesign Hintergrund wirklich und ist praktisch. Und wenn Sie einen Designhintergrund haben, ist das fantastisch. Hier kannst du wirklich spielen und deine Fähigkeiten nutzen. Also genau hier haben wir unseren Low-Fidelity-Drahtrahmen aufgepeitscht. Hier. Wir haben eine wunderbare Art von Start, und jetzt können wir alles aufpolieren oder einfach nur Bildschirm für Bildschirm gehen. Wir sind vielleicht nicht in der Lage, alle von ihnen zu tun, aber wir tun, ist viele Bildschirme wie möglich und eine anständige Menge an Zeit. Eines der ersten Dinge, die wir tun möchten, ist, dass wir unsere Farben, unsere Schriften für eine Marke einrichten und einige unserer Logo-Dateien einbringen wollen. Also habe ich einen Brand Guide, den ich in Adobe Illustrator entwickelt habe, und ich habe diesen für Sie zum Download zur Verfügung . Wenn Sie voran gehen und dies als eine Mock Up Marke für Sie und ich haben all diese verschiedenen Arten von Stil-Assets eingerichtet. Ich habe ein paar Farb-Hex-Codes. Ich habe einige Logos auf einem dunklen Hintergrund und auf einem weißen Hintergrund, und ich habe ein paar verschiedene farbige Symbole. Also werde ich das alles als P und G reinbringen. Ich werde dir das nur schnell zeigen. Warum nicht? Warum zeig dir nicht all die kleinen Schritte, die ich durchmache? Ich werde nur ein paar kleine Kunsttafeln um meine Logos erstellen. Lehnen Sie sich zurück und ich bin Gruppe hier. Also alles, was ich getan habe, war Art Boards um jedes dieser Elemente zu erstellen, die ich brauchen werde da ein transparentes PNG den Hintergrundexport löschen wird, dass und alle Arten von Export schön. Sie befinden sich in Ihrem herunterladbaren Ressourcenleitfaden. Ich habe lokale Grub-Branding Assets. Ich habe alle Symbole als S. P G's, und ich habe auch einige der lokalen Dateien als transparent. P und G's werden das hineinziehen und mit dem in unserem High-Fidelity-Mock herumlaufen . Nun, da wir einige Dateien haben, um mit einigen Bildern zu arbeiten, gehen wir zurück in Adobe X'd, um die Typauswahl einzurichten sowie unsere Hex-Codes in unseren Farb-Assets einzurichten . Sie sind die drei Hex-Codes, die ich für diese besondere Marke entwickelt habe. Ich werde sie einfach eins nach dem anderen in Adobe X T bringen, und es wird eine nur eine Box zeichnen, die über klicken, um zu füllen. Und ich werde einfach diesen Hex-Code einschlagen und dann werde ich die Grenze deaktivieren, und dann kann ich es hinzufügen, da Assets mit der rechten Maustaste auf Farbe zu Assets hinzufügen klicken. Ich werde diese Kiste duplizieren und dasselbe tun. Geh weiter und lade meine anderen Farben. Was ich an Adobe X'd liebe, ist dieses globale Stil-Panel, in dem wir einige dieser Stile bearbeiten können und es nicht global auf das gesamte Dokument, weil Sie sehen konnten, dass wir bereits so viel getan haben , wenn es um unseren Typ geht und es irgendwie als Schande, wenn wir hineingehen und jede der Typenwahl in die, die wir möchten ändern müssten. Was Sie also tun können, ist hier die vier, die derzeit für das Dokument verwendet werden. Wir könnten anfangen, ein bisschen eine Typhierarchie los zu bekommen? Bestimmen Sie, was unsere H ein oder große Header sein wird. Was wird unser H zwei sein? Ein wenig von einem kleineren Header. Was wird unser Absatz sein? Unser Körperkopie-Typ. Wir könnten weitermachen und die Schriftart einstellen. Warte und geh weiter und setze das alles auf. Wenn wir also jemals brauchen, um es auf globaler Ebene zu ändern und 50 verschiedene Bildschirme zu ändern, haben wir nur einen Rechtsklick, gehen Sie zu bearbeiten. Und Sie können ihn ausschalten, sobald sie alle eingerichtet sind, und wir werden alle Schriftarten ändern , die auf diesen globalen Stil festgelegt sind. Das ist also sehr praktisch, wenn du es machst. Ich entwerfe. Also, was ich tun werde, wenn ich irgendwie herausfinden will, was gerade jetzt ausgewählt ist, wie wir unseren Low-Fidelity-Drahtrahmen taten , war ein wenig verrückt. Wir haben es irgendwie zusammengeschlagen. Also jetzt müssen wir ein wenig genauer sein, wenn es um diese Art von Problemen geht, denn wir werden anfangen, eine ganze Menge mehr Bildschirme zu entwerfen und das alles fertig zu stellen. Also lassen Sie uns sagen, ich will wissen Was ist diese Aerial 16 Ich habe vier verschiedene, die wir brauchten Titel diese und stellen Sie sicher, dass wir einen schönen Typ R G einrichten, bevor wir fortfahren. Also werde ich mit der rechten Maustaste klicken, und er könnte Highlight auf Leinwand machen, und das wird den ganzen Typ hervorheben, der hier verwendet wird. Es sieht so aus, als würde das hier von einem Top-Header geschnitten werden. Also hol es dir. Äh, gehen Sie weiter und nennen Sie diesen Top-Header-Typ. Das ist nur die Art von Hilfe mir zu wissen, wann ich diesen bestimmten Stil verwenden soll oder was dieser Stil ist. Ich gehe zum nächsten. Lassen Sie uns voran und markieren Sie das auf der Leinwand. Okay, das ist also unser Button Text, damit ich alle Knöpfe sehen konnte. Habe diesen Typ dazu. Lassen Sie uns voran gehen und dio tun Taste, aber im Text. Und wir gehen weiter und machen das. Fahren Sie weiter durch. Okay, das wird unsere Körperkopie sein. Etwas kleiner. Wir werden das durchmachen und alles so einrichten, dass wir nicht nur einen netten Typ haben können , Harkey. Wir wissen, was die Header-Größe sein wird. Was wird so sein, ist alles konsistent über das gesamte Stück, also weiß ich, dass alle Kopfzeilen oder 14 Punktgröße oder 16 Punktgröße, alle Körperkopien, 10 Punktgröße und ein normales Warten. Also ist alles irgendwie eingestellt. Du könntest die Farben aufstellen. Sie richten Ihren Typ auf und wir haben uns auf in diesem Typ beschränkt, wie wir an ihrer Art von Design arbeiten weil wir am Ende die Schriftart ändern können, können wir am Ende die Größe ändern und können immer mehr Zeichenstile hinzufügen, wie wir wirklich Fleisch diese Design aus. Das wird also immer ein Arbeitsbereich für uns sein. Wir werden es weiterhin hinzufügen und bearbeiten, wie wir, wie wir dies weiterhin tun, lassen Sie uns einige Symbole tun. Also hätten wir das wahrscheinlich ein bisschen in der niedrigen Treue tun können. Aber wenn wir die Low-Fidelity tun, denken wir nicht über all das Setup noch, weil die Entwürfe noch nicht einmal genehmigt. Nun, da wir eine Art Genehmigung haben, um weiterzumachen und dieses wirklich zu einem glatten Finish Layout , werden wir versuchen, alle unsere Symbole nach oben zu verknüpfen. Wenn wir also Symbole verknüpfen, können wir sie global ändern. Also, jetzt, das hier. Ich habe getan, was ich getan habe. Habe ich recht? Klickte und ich habe gerade Assemble aus diesem erstellt. Also, jetzt ist hier mein Symbol. Also, jetzt kann ich voran gehen und ändern, um zu lesen, wenn ich will. Was ich tun muss, ist dieses Symbol zu ersetzen. Halten Sie einfach die Option gedrückt und ersetzen Sie einfach das Symbol durch das Link-Symbol. Also jetzt, wenn ich zurückgehe und ich das Symbol geändert habe, wird es auf beiden tun. Und ich muss nicht da sitzen und die Farbe auf beiden ändern. Das wird wirklich nützlich sein, wenn Sie alle Ihre Symbole verknüpfen, so dass alles, was Sie tun müssen , eine Taste drücken und alle von ihnen sich über alle verschiedenen Header ändern. Wir werden das aufstellen und die Montage machen, die auch zu unseren Einkaufstaschen zusammenstellen wollten . Also, wenn ein Rechtsklick und machen Assemble, so dass wir auch den Schiffskorb auf die gleiche Weise ändern können , würde ich wahrscheinlich den Header als Symbol tun, so dass ich diesen Header auf alle verschiedenen Header auf einmal ändern kann , weil Ich möchte sie vielleicht alle am Ende des Entwurfsprozesses ändern, der Kunde sagt, ich möchte, dass der Header weiß sein soll. Das wird kein großes Problem für uns sein, es auf 100 Bildschirmen zu ändern, wenn sie alle als Symbol verknüpft sind. Also werde ich das schnell machen. Ich werde weitermachen und all diese Links bekommen, damit wir all diese sehr schnell verändert werden . 13. Hochfeste fidelity – der Anmeldeschirm: Also, was ich hier getan habe, ist, dass ich dieses Element zusammengefasst habe. Ich werde voran gehen und eine Gruppe und zeigen, was ich getan habe, all diese Luft individuell, verschiedene verknüpfte Symbole. Wenn Sie hier rüber gehen, können Sie alle diese Links Symbole sehen mit, natürlich, benennen Sie sie, damit Sie wissen, welche die Hamburger Menü. Welche nicht, aber sie sind alle individuell, also kann ich sie sowohl als einzelne Symbole als auch diese Hintergrundgrafik oder -leiste ändern. Also alles, was ich getan habe, ist, dass ich all diese zusammengefasst habe, und ich schiebe sie einfach an Ort und Stelle. Es bekommt es schön an den Anfang der Seite schnappt, war in der Lage, alle sehr schnell zu ersetzen. Und jetzt, wo ich sie in Symbolen habe und du zeigst, wie lustig das ist, also gehen wir zum Hamburger-Menü hier. Dies ist unser Link-Symbol. Lasst uns weitermachen und einfach all diese Titel geben. Und jetzt werde ich in der Lage sein zu bearbeiten, so dass ich voran gehen könnte, wählen Sie dieses Link-Symbol, das auf Gruppe und ich möchte sie alle ändern. Jetzt habe ich ihn einfach so rot gemacht. Also, wenn wir wollen experimentieren mit Farbe. Wir könnten anfangen, diesen Header richtig zu justieren. Also, wenn ich unsere Markenfarbe hier verwenden möchte, möchte ich es irgendwie auf diese Art von grüner, blauer Farbe ändern. Genau so, es ist erledigt. Ähm, ich möchte diese Farbe auch ändern, um ein Hellgrau zu machen. Ich habe das global bei allen getan. Wir müssen nicht da sitzen und es immer wieder in jedem Bildschirm tun. Ich meine, es ist erstaunlich. Ich liebe es wirklich, dass ein Teil von X meist wollte, um eine Einkaufstasche in eine bestimmte Farbe zu ändern. Vielleicht möchten wir unserem Gaumen eine neue Farbe hinzufügen, weil diese Marke entwickelt wurde, die über das Logo kleben . Aber es hat nicht an dich gedacht. Ich, ähm, und muss einen wirklich hohen Kontrast Knopf haben, einen wirklich hellen Knopf, der ganz anders ist als das Grün. Es kommt also wirklich heraus. Wir werden hier ein neues Farbenbjekt hinzufügen. Ich werde nur eine neue Farbe hinzufügen. Und lasst uns dies irgendwie goldbraun machen, um Phil es zu einem Rot zu machen, weil es ganz anders ist als das Grün. Aber vielleicht fügen Sie nur ein kleines bisschen davon ein bisschen vielleicht rosa hinzu, um ihm eine helle Lebendigkeit zu geben . Du machst nur irgendwie herumher, um den richtigen Farbverlauf zu finden. Wir könnten in Illustrator und Papagei zusammen herumlaufen, um die richtige Farbpalette zu finden. Ich möchte etwas ziemlich Helles und Lebendiges, damit Sie es auf jeden Fall sehen können. Wer weiß, wie ich das ändere? Schauen Sie sich diese Änderung in allen Kopfzeilen an. Ich liebe es, dass wir jetzt diese kleine Kiste wechseln können. Wir könnten sogar jetzt, wo wir es nicht bei allen tun müssen. Wir können das einfach machen. Vielleicht machen Sie diese rote kleine Blase. Was ist bei Edit? Das hat vielleicht keine Grenze und macht eine rosa Ville. Ich denke, ich muss das Symbol der Vereinten Nationen gruppieren, weil ich hier rein habe . Lassen Sie uns den Typ weiß machen. Da gehen wir. Also denke ich, das fängt an, schön zu aussehen. Und wir wollen vielleicht etwas in die Montage ziehen, vielleicht ein Foto wie ein kleines Füllmaterial Foto, so dass ich all meine Fotos von Pecs ALS herunterladen konnte, so haben eine wirklich gute Headshots. Ich werde sie hineinziehen. Es ist Dragger direkt über das Foto. Es sollte automatisch ausgefüllt werden. Wir können verdoppeln, klicken und Zuschneiden anpassen. Schön in Foto gezoomt. Da. Jetzt hat es alles geändert, so dass Sie beginnen konnten, den Header zusammen zu sehen. Wir könnten diese Hintergrundleiste in unsere dunkle Farbe Grau ändern . Und da hast du es. Wir haben irgendwie den oberen Kopf oder auf allen Bildschirmen getan. Also nur eine Art von zeigen Ihnen, wie dieses globale Styling wirklich nützlich sein kann, wenn wir beginnen , all diese verschiedenen Elemente zu entwickeln. Also, jetzt werden wir am Anfang wieder anfangen. Wir beginnen gerade unsere erste Seite. Wir werden anfangen, gerade jetzt, wo es irgendwie den globalen Stil eingerichtet hat, zu bewegen. Es gibt nur noch eine Sache, die ich tun werde. Und das brauche ich für meinen Login-Bildschirm. Ich brauche ein Logo, also bringe ich das mit, als ein Symbol ist gut, also wenn wir jemals das Logo twittern und das Logo auf jedem Bildschirm ist, dann ist es nicht global. Also habe ich die PNG-Dateien gefunden, und die herunterladbare Ressource ist Aber wenn Sie eine andere Firma machen, könnten Sie versuchen, ein PNG Ihrer Logos Firma zu finden. Also werde ich jetzt beide hineinziehen. Also habe ich ein paar verschiedene Versionen. Ich habe eine, die gut funktioniert und enge Räume, also eine Art horizontale Präsentation. Und dann habe ich auch eine gestapelte Version, und ich habe eine auf einem schwarzen Hintergrund auf einem unter dunklem Hintergrund. Also lasst uns gehen und einfach alle vier herbringen und wir werden das einfach als Symbol hinzufügen. Das ist der Einrichtungsprozess von Ihnen. Ich Es gibt eine Menge von anfänglichen eingerichtet, aber ging, um alles einzurichten. Es geht super duper schnell, und ich verspreche, es wird Spaß machen. Und sie waren immer noch irgendwie eingerichtet Art von einigen der langweiligen Sachen, die Teil der U I Designer ist es könnte einige mühsame Teile, die einige lustige Teile sein könnten. Also lasst uns eine davon bekommen, die auf diesem anderen grauen Hintergrund wirklich gut funktionieren wird . Und lassen Sie uns voran gehen, machen Sie dies gebrandmarkt graue Farbe. Sie haben ein bisschen einen dunkleren Farbton, um den Gebrauch zu schwächen. Wir müssen herausfinden, was am besten funktionieren würde. Oder wir könnten es sogar in unsere Kareen ändern. Erleichtern Sie es ein wenig und bringen Sie das, das auf dunklen Hintergründen funktionieren wird, so dass es diesen einbringen könnte oder diesen einbringen könnte. Es sieht so aus, als ob ich ihn mit dieser dunkleren Farbe Zehenarbeit entwickelt habe, die toll auf Grau ist. Also, wenn Sie Gray Dragon zu tun und es funktioniert großartig, aber ich möchte es mit dieser helleren Farbe versuchen. Denk, das ist nett. Ich gehe einfach schnell zum Zeichenbrett zurück und entwickle eine Version, die wirklich gut auf dieser Version funktioniert , die, wie ich glaube, eine ganz graue Version wäre ich glaube, . Und ich werde das als PNG exportieren und wir sehen uns gleich wieder. Also lassen Sie alle Versionen des Logos, die auf allen Hintergründen funktionieren, einladen. So können wir jetzt irgendwie austauschen und sehen, was gut aussieht. Ich denke, das könnte ein bisschen lang sein. Du hast ein bisschen zu viel Platz. Also lasst uns die gestapelte Version des Logos direkt hier in der Mitte machen. Hier bekommen wir Designarbeiten zu erledigen. Wir müssen uns keine Sorgen machen, denn so viel über den Kunden waren extrem besorgt über das Kundenerlebnis. Aber hier können wir uns wirklich auf das konzentrieren, was gut aussieht, was mir als Designer richtig anfühlt , , damit wir ein paar Dinge tun können. Dies ist, was wir Dies ist die Zeit, wenn wir entscheiden, Wollen Sie einen soliden Hintergrund? Schicken Sie das nach hinten. Wir wollen einen soliden Hintergrund. Wollen wir so etwas zweigetönt haben? Wir könnten es hier hinuntergehen lassen und wir können Hintergrundelemente verwenden, um bestimmte Schaltflächen hervorzubringen . Also wollen wir eine Art der Anmelde-Button ist wirklich zusammen zu kommen. Sie könnten diesen Stopp auf halbem Weg haben, und wir können hier eine weitere Box hinzufügen, um einen dunklen Kontrast zu haben. Lassen Sie uns unsere dunkle Farbe schneiden. Schicken Sie das nach hinten, damit Sie sehen können, dass wir alles ausschalten müssen. Aber Sie haben irgendwie diesen zweigetönten Look. Es könnte wirklich Highlight auf diese Schaltfläche bringen, wo diese beiden geteilt sind. Es verwendet also diese Design-Elemente, um wirklich den Blick darauf zu lenken, wohin der Benutzer gehen soll , was in diesem Fall Ihr Login in Ihrem Konto wäre. Und so müssen wir diesen Knopf mit hohem Kontrast haben. Also möchte ich wirklich eine Art von dieser dunklen Art von hellrosa Farbe haben. Ich denke, wir haben das bereits in unserem Asset-Panel festgelegt, aber aus irgendeinem Grund ist es irgendwie verloren gegangen. Aber das ist in Ordnung, also ziehen wir eine neue Kiste. Ich will diesen Knopf wirklich. Die Pop-Outs. Wir werden einen wirklich guten Kontrastknopf finden. Nimm die Grenze ab. Wir machen das nur zu einem Farbengut, das es später immer ändern würde. Hier ist unsere rote Farbe. Also lasst uns sie machen, aber in einem netten Pop, Pop out auf Sie Art von Farbe. Es wird also nicht diese Farbe sein, oder? Denn das fügt sich direkt in. Lassen Sie uns eine Art entgegengesetzte Farbe machen. Es wird dir wirklich das Auge herausziehen. Wir möchten erstellen Sie ein Protokoll in einem anderen es ist Es wird ein anderer Protokollierungspfad sein, damit Sie sich mit Ihrer Dose anmelden können. Wenn Sie bereits einen haben. erstellte Protokollierung wird ein wenig anders sein, aber nicht dramatisch anders, so dass wir irgendwie sehen können, mit welchen Farben gut aussehen würden. diese bestimmte Taste. Und dann mit unserem Login mit unserem Facebook-Konto, könnten wir das blau machen. Also werde ich zu Facebook gehen und schnappen, was auch immer die offizielle blaue Facebook-Farbe negativ ist . Laden Sie diese Hex-Farbe in. 14. Hochfeste Drahtrahmen - Anmeldebild - Teilen.: Art und Weise. Ich habe hier einen Screenshot der Facebook-Farbe gemacht, und ich werde einfach das Pipettenwerkzeug nehmen und testen, dass ich wirklich genau sein möchte. Wenn es um Facebook geht, kommt das wirklich heraus. Nun, ich mache hier den richtigen Knopf. Es geht hier runter, nimmt eine Grenze ab und lässt uns einen blauen Phil machen, und wir sind bereit, das mit White auszuschlagen. Du hast ein paar zusätzliche Elemente hier, die wir nicht brauchen. Lassen Sie uns das ein wenig heller von einem Schatten zu diesem kleinen Trennknopf herausspringt. Wir brauchen das nicht mehr und ändern das in Weiß in unsere weiße Farbe. Also, was denkst du? Das ist also irgendwie die Version, die wir bisher haben. Vermutlich. Es ist eine Art anderes visuelles, dich genau hier zu schnappen. Nun, vielleicht weniger Slogan. Finden Sie Ihre beste Mahlzeit jetzt, oder eine Art von Slogan oder Typ, um Menschen zu locken, sich einzuloggen und sich über die Verwendung dieser App begeistern . Dies ist auch eine Zeit, wo ich dupliziere Kunstboards und ich kann ihn Seite an Seite setzen war, sobald wir diesen Login-Bildschirm feststellen, wird es wirklich anfangen zu bestimmen, wie alles andere aussieht. Diese ersten Bildschirme Luft so kritisch im Designprozess ist, wenn wir alle Arten von ob wir eine dunkle Bracker auf einem hellen Hintergrund verwenden, welche Art von Logo wir verwenden ? Wir werden das aufstellen und die Bühne für alles schaffen, was sich vorwärts bewegt. Also müssen wir viel Zeit damit verbringen, sicherzustellen, dass es richtig ist, damit wir zu dem zurückkehren können, was wir vorher hatten . Machen Sie diese Art der Protokollierung Diese Schaltflächen erscheinen wirklich da draußen. Das ist schön. Sie könnten dies so viel duplizieren, wie Sie das gleiche mit Logo-Designs tun möchten, ich werde ein lokales Design machen. Ich lege es direkt neben eine Kopie. Ändern Sie es, optimieren Sie es, sehen Sie, ob ich die alte Kopie und nicht die neue mochte, und fahren Sie weiter vorwärts. Wir werden es versuchen, aber warteten mit einem hellgrauen oder vielleicht mit Weiß, nur irgendwie rückgängig zu machen. Okay, das ist also eine Option, hier weiterzumachen, bis wir das finden, was wir denken, richtig fühlen würden . Und wir wollen, dass alles offensichtlich für den Benutzer, der den Benutzer gegangen ist, in der Lage ist, die Tasten so einfach wie möglich zu finden . Und manchmal hilft die Verwendung dieser dunkleren Hintergründe wirklich. Denn mit dem Weißen ist alles irgendwie zu mischen. So ist die Verwendung dieser Art von farbigen Boxen hilfreich. Wir könnten eine solide Box machen. Wir können immer das Foto abbilden. könnten wir ein wenig später machen. Es ist irgendwie ein Schlag das aus. Machen Sie das weiß. Sehen Sie, jetzt, wo wir unsere globalen Siles so viel einfacher Zehe machen, wählen Sie Ihre Gaumen und wählen Sie Ihren Typ aus. Also, worin denkt ihr bisher? Ich wünschte, ich könnte Feedback live in dieser Klasse bekommen, aber welcher Hintergrund erscheint Ihnen am meisten? Das ist, wenn du es vielleicht vor jemand anderem stellen kannst und was? Was sieht besser aus? Was funktioniert besser? Es gibt immer die Möglichkeit, einen weißen Hintergrund vollständig zu haben und dann unser Logo zu machen , das wir hier oben haben. Also gibt es eine Art von Ihrem grundlegenden Logbuch, in dem ich keine riesige Vanna bin, immer experimentieren und tun könnte . Vielleicht eine diagonale Box, die über das geht, das hat das Pin-Tool gehabt und sehen, wie es aussieht um die Form ein wenig zu brechen, um zu experimentieren, so dass Sie hier die Vielzahl von Layout-Optionen sehen können , die ich habe und Sie könnten sehen, wo dies ist, könnte Einer von Die größeren Herausforderungen sind kein Mangel an Ideen, sondern der Mangel an Richtung und fragen sich, was am besten funktionieren wird. Also werde ich mit einer weiteren Option experimentieren, und das wird ein Foto einbauen, um zu sehen, ob das Foto nicht irgendwie so große Art von leeren Bereichen zusammenbrechen kann , aber ohne es zu beschäftigt aussehen zu lassen. Also werden wir nur Container-Box zu zeichnen, um unser Foto zu setzen und wir werden nur einen Klick Rand. Lassen Sie uns voran und bringen eine Art generisches Foto für jetzt Essen und wollte das richtige Zuschneiden finden . Ich werde nur ein Doppelklick von wirklich gut. Und ich nahm an und Schuss von diesem Essen, weil das ist, was wir wollen, mit dem, was Menschen hungrig sein wenn sie diese App öffnen. Lassen Sie uns mit wenig Essen verführen, aus den Schatten kommen. Sie können ein wenig Schlagschatten haben, so dass es ein wenig geschichtet aussieht. Sie können sogar halten Option und irgendwie machen dies ein wenig von einem abgerundeten Foto, das mir aussehen könnte. Ich denke, das Logo muss wirklich ein wenig mehr herausspringen, wenn wir uns nicht dazu entschließen, es nach unten zu bringen . Aber geben Sie uns die Chance, unsere Knöpfe ein wenig näher beieinander zu verschieben, aber nicht zu nah, genau da drüben, richtig? Und wir könnten unser kleines Logo hier unten setzen, solange es sehr offensichtlich ist, dass es das ist. Damit das großartig sein könnte, wird das in Blau geändert. Wir könnten sogar einen zweifarbigen Bring in eine Kiste bringen. Sie haben nur die Unterseite und blau sind grün. Was auch immer du nennen würdest, ich schätze, es ist eher ein Grün, nicht wahr? Blau grün und sie könnten runden, vielleicht ziehen Sie die Option. Und um diese herum haben Sie irgendwie , eine abgerundete Kante hier, aber auch eine gegenläufige abgerundete Kante hier auf der gegenüberliegenden Seite. Oben, wir fangen an, zu beschäftigt zu werden. Ich möchte wirklich einfaches Layout für unseren Login-Bildschirm reinigen. Ich könnte sogar die Logos bekommen, wenn ich nicht den ganzen Weg hier rüber sehen kann. Das hat eine Art Grün und das Logo zu kooperieren, dass das ein wenig besser aussieht, also ist das eine Protokollierungsoption. Ich mag die Idee, ein Foto zu verwenden. Das Foto könnte austauschen. Und da wir uns keine Sorgen darüber machen müssen, dass das Foto Text oben hat oder andere Probleme mit einem randomisierten Foto hat, weil es nichts darüber gibt, was schwer zu lesen sein könnte. Wir könnten damit sehr flexibel sein. Und ich mag diese Idee, damit sie ausgetauscht werden kann. Und ich wünschte, Adobe X hätte Fotobearbeitungsfunktionen gehabt, bei denen ich das ändern kann , äh, machen Sie einen Ton Look oder machen Sie eine Art von Fotobearbeitung, aber ich habe diese Fähigkeit nicht. Als nächstes gehe ich einfach in den Fotoshop und bringe das Foto wieder rein. Wenn ich eine Art Duo-Ton oder Single in Farbe haben wollte, schauen Sie es an. Ich werde zu Peck Sals Dot com gehen und irgendwie ein paar Fotos finden, von denen ich denke, dass sie funktionieren könnten . Ich denke, ein Foto zu haben und das Login wirklich hilft zu wissen, dass Sie in einer Lebensmittelbestell-App sind. Ich denke, es macht wirklich viel Sinn, bringt dich ein bisschen hungrig, bevor du dich einloggst. Also denke ich, es ist eine gute Entscheidung Design-Entscheidung, so zu gehen, weil dieser Bildschirm jede App sein könnte . Schreie. Es ist nur ein kleines Logo, und es ist wirklich sauber und einfach, aber hat nicht viel Persönlichkeit. Und hier könnten Sie anfangen, über diese Benutzererfahrung nachzudenken und einen Hauch von Persönlichkeit hinzuzufügen . Nun, du schaffst es nie zu beschäftigt, aber du willst, dass du Spaß machen willst, du willst spielen. Es hängt davon ab, wonach Ihre Zielgruppe sucht. Uh, lass uns ein wenig Spaß mit uns haben und durchgehend Bilder haben. 15. High - Anmeldebild - Teil 3: Ich habe ein paar Fotos heruntergeladen, um zu überprüfen. Die Zeit wird die rüber ziehen, um zu sehen, ob ich die richtige Kombination des Zuschneidens des Fotos nicht finden kann. Ich will nicht die Oberseite der Schüssel zuschneiden. Ich habe gern eine kleine Gabel da drin. Das sieht wirklich wunderbar aus. Das sieht sauber aus. Mal sehen, ob wir kein besseres Foto finden können. Finden Sie immer ein besseres Foto, weil Sie überrascht sein würden, was funktioniert? Ich mag dieses Foto. Vielleicht, wenn ich eine Art Zoomed in Beschneidung tun, sind enge Zuschnitte, wie sie sagen. Das sieht wirklich schön aus. Es ist kompliziert. Da sind viele Details drin, und ich möchte diesen Anmeldebildschirm nicht schon erschweren. Vielleicht müssen wir also ein sehr einfaches finden, das schön ist. Wenn ich zoomen und es nicht hausgemacht aussieht, sieht es aus wie der Gott in einem Restaurant. Ich mag diesen hier. Oh, es geht darum, die richtige Beschneidung zu finden. Willst du die Gabel da reinbringen? Es ist also nicht so, wie diese Kurve ist. Ich weiß nicht, ob die Brown Schalen irgendwie gegen diese Kurve kämpfen, also gehen wir zurück zu dem, was wir vorher hatten, was diese sehr schöne, einfache Schüssel ist . Es ist nicht kompliziert, hat nicht viele Dinge, die mit seinem sehr einfachen Foto vor sich gehen. Und ich denke, das funktioniert wirklich gut mit diesem Protokoll und Bildschirmen ist das Finden der Beschneidung, die ich denke, würde funktionieren, und es gibt unseren Login-Bildschirm. Also, was wir tun können, ist, dass wir anfangen könnten, diejenigen zu löschen, die wir nicht glauben, dass das funktionieren. Ich will nicht all diese Bildschirme hier haben und lassen Sie uns einen um die Folie ihn hier rüber halten , nur damit er nie weiß, was wir vielleicht zu diesem Layout zurückkehren wollen. Hier sind wir. Wir haben ihren Anmeldebildschirm mit dem ersten Grün fertig gemacht, und wir könnten einige Tweaking mit Buttons tun. Was ich getan habe, ist, dass ich beschlossen, dies die Marken-blaue grüne Farbe dieses Logs in Ihrem Konto zu halten , weil das wird die am häufigsten verwendete Schaltfläche sein, und ich habe beschlossen, zusammen in rot zu erstellen, weil ich will, dass die Neujahrsjahre sehen können diese Taste sehr leicht. Also dachte ich, das könnte der hohe Kontrast, andere Farbe sein. Ich möchte sicherstellen, dass wir hier mit Rändern und Polsterung wirklich wählerisch werden. Lassen Sie uns sicherstellen, dass die Ränder und das Auffüllen oder das gleiche hören, dass sie hier sind, und Sie können die Option Snap to Grid verwenden, die Art von was wir hier verwenden, ist eine Art intelligenter Führer. Ich denke, man könnte sagen, dass das in allen Adobe-Programmen ist. Dieser könnte mehr Abstand haben, weil es, ah Typ Tempo gibt und melden Sie sich mit Facebook. Wir könnten hier nur eine kleine Grenze setzen. Vielleicht eine helle Farbe. Ein bisschen besser raus. Wer weiß es? Machen Sie die Grenze eins. Sie haben irgendwie diese Option, wo Sie diesen Schlaganfall haben. Das hilft wirklich, dass der Knopf herausspringt, wenn wir so fühlen. Dark Blue ist zu dunkel gegen das Grau, so dass wir irgendwie herumlaufen können. Aber ich mag es, Konsistenz mit meinen Knöpfen zu behalten. Und so ist hier noch eine Sache mit Knöpfen. Wir können uns irgendwie mit den Ecken verwirren, damit es ihm eine Pillenform machen könnte. Wir konnten ihm eine sehr leichte Pillenform machen, weil wir das irgendwie in der Low-Fidelity-Markup weggenommen haben . Aber jetzt können wir es tun. Lassen Sie uns sehen, vor wählen Sie alle diese. Lasst uns die Grenze etwas kleiner machen, um das 1.5 zu machen und mal sehen, was wir mit den Formen der Pillen machen können . Hier können wir es hier ändern. Hier ist eine Art Auswahl im Darstellungsfenster. Nun, sagt, versuchen Sie es. Steigern Sie einfach den Versuch weiter. 11. Versuchen wir es mit vier. Ich mag das Leichte herum. Diese Art von fügt eine wirklich schöne polnische. Sieh es dir an, nicht wahr? Ich mag es nicht, dass es für diesen speziellen Fall gerundet wird. Es ist nur ein bisschen nur ein bisschen. Das macht also alles weich. Mit diesen schönen abgerundeten Kanten. Okay, also fühle ich mich immer noch irgendwie so. Blau ist auch . Das ist zu viel von dem gleichen Farbton, und das kommt nicht so viel heraus. Ich füge diesen Dingern immer einen leichten Schlagschatten hinzu, damit wir einfach zu ihrem Aussehen hinuntergehen können. Machen Sie einen kleinen Schlagschatten. Sehen Sie, wie das wirklich hilft, dass der Knopf herausspringt. Lassen Sie es sich anfühlen, als wäre es ein Knopfdruck. Lassen Sie uns das Gleiche mit allen machen, also könnte es konsistent sein, also fügt es ein wenig Schlagschatten hinzu. Jetzt fühlt es sich fast an, als wäre es geschichtet. Es ist wirklich schön. Okay, jetzt könnte ich die Logo-Größe anpassen. Stellen Sie sicher, dass das in der Mitte ist. Wenn ich das hier herumschleppe, sehen Sie diese kleinen schlauen Führer, die uns in der wahren Mitte helfen. Und denken Sie daran, dass Sie immer die Möglichkeit haben, Gitter ein- und auszuschalten. Wir werden mein Top-Art-Board auswählen, und wir können ein Raster umschalten, um zu sehen, ob wir dieses Raster nicht verwenden können, um uns zu helfen, die genaue Position bestimmter Elemente zu finden . Ich benutze gerne Gitter. Ich mag es nicht, fest zu bleiben. Ich fühle mich wie Gitter Luft, die die Entscheidungen für mich treffen. Also mache ich gerne ein grobes Design, wie ich es mag. Ich mache nur kleine Bewegungen und lege es auf das Gitter. Ich weiß, dass viele Leute gerne mit dem Raster beginnen, aber oft mag ich irgendwie entworfen von ich mache mein Layout und mache dann jede Art von Feinabstimmung, wie Sie den kleinen Unterschied hier sehen, wo dieses Vier-Säulen-Raster ist, dass wir das einfach am Rand einrasten können, das Gefühl haben, dass wir das Raster verwenden, um uns mit Ihrem Layout zu helfen, aber das Raster hat keine Kästchen eingelegt. Wissen Sie, es hat unser frei fließendes Design nicht eingeschränkt, denn wenn Sie also die Art von Person sind , die gerne mit Gittern anfangen möchte, können Sie voran gehen und Ihre Gitter laden. Es gibt auch quadratische Gitter. Wer hat Sie irgendwie eher eine traditionelle brid oder er macht die Kolumne, Äh, reitet wir machen Websites. Sie könnten es auf der Grundlage der 12-Säulen-Klasse tun, die wirklich beliebt ist zu tun. Wir könnten Ihre Gosse in das Problem mit und all den Jazz s setzen, also werde ich das nur benutzen, um vielleicht all diese an den Rand des Rasterpunkts zu schnappen . Also werde ich all das einfach bis zum Rand aufhalten. Irgendwie gibt mir ein wenig Fundament und zu wissen, dass die Dachrinnen hier die gleiche Breite lüften , und wir wollen auch Ihren Facebook-Button, richtig? Also macht mein Gitter aus. Und ich fühle mich, als würden wir uns wirklich nähern, um sicherzustellen, dass das mit der Oberseite des Bodens gleich sein wird . Stellen Sie sicher, dass das Zentrum Allianz sieht, wie es in diesem kleinen Blau aufgetaucht ist. Aber unsere kleine blaue Linie geht es irgendwie runter. Jetzt weiß ich, dass das perfekt in der Mitte ist. Hey, lass uns das retten. Ich fühle mich ziemlich gut darin. Gehen wir also zum nächsten Bildschirm. Also, was wir getan haben, ist, dass wir eine Art dunkleren Hintergrund haben. Wir bewegen uns irgendwie in diese Richtung. Das könnte also den Ton für die App festlegen, dass wir vielleicht dunklere Hintergründe von ihnen hellere Boxen oben haben, im Gegensatz zu einem weißen Hintergrund mit vielleicht, wie graue Tasten oben, Was ist was? Wie wir es irgendwie so gestaltet haben, dass sie diesen hellen Hintergrund haben. Also werden wir irgendwie sehen, was passiert, wenn wir zu diesem Punkt kommen, ob hier ein dunkler Hintergrund funktionieren wird. Wir müssen auf diese Art von Methode zurückgehen. Also versuchen wir nur, unser Styling hier zu bekommen und versuchen, eine Vorstellung von Konsistenz zu bekommen, die wir überall verwenden können. Also, als nächstes werden wir voran gehen, Sprung in das wird sehr einfach sein, weil du im Grunde der gleiche Bildschirm bist. Wir werden nur einige der Farben hier ausklappen. Wir werden das schnell machen, und ich bin gleich wieder da 16. Hochfeste Seilbahn - -: Rechte angekündigt Zeit für die Anmeldung für ein Konto Seite ging voran und machte diesen Hintergrund das Symbol, diese große Art von Hintergrund Auf unserem ersten Bildschirm. Ich habe das dazu zusammengebaut. Ich bin immer noch eine Kopie und eingefügt, ebenso wie der Rest des Bildschirms. Also sind sie alle wie Symbole. Wenn ich also jemals die Farbe ändern wollte, wäre es einfach, sie auf beiden zu ändern. Wenn ich also alles auf diese Farbe zurückschalten möchte, die eigentlich ziemlich schön aussieht, die eigentlich ziemlich schön aussieht, könnten wir das für alle Bildschirme tun und dann alles viel einfacher austauschen, also stellen Sie sicher, dass Sie diese verknüpften Symbole als könnten wir das für alle Bildschirme tun und dann alles viel einfacher austauschen, viel wie möglich. Also lasst uns diese Art von dieser Farbe machen. Und wir können das auch montieren. Das wird irgendwie ein Standardknopf sein, den wir haben werden. Wir könnten immer mit der rechten Maustaste klicken und zusammenbauen, und dann das hier auseinander bringen. Wir haben bereits unsere kleinen abgerundeten Kanten, sehr leicht abgerundete Kanten, und wir könnten das einfach ändern, wann immer wir es brauchen. Melden Sie sich also für ein Konto an. Wahrscheinlich muss ein wenig größer Typ sein, Größe wie alles sehr offensichtlich und einfach für den Benutzer sogar versuchen, dass als Weiß. Ja, wir könnten unser Logo mitbringen. Halten Sie es auf dem Boden. Es ist unten hier. Lasst es uns auf dem Boden halten und wir könnten es auch in der gleichen Position halten. Ich muss das Logo machen, solange wir hier sind. Es geht. Machen Sie es zusammenbauen. Geh nach rechts. Klicken Sie auf. Machen Sie es zu einem Symbol. Ich werde Logo machen. Schwarzer Hintergrund. Also jetzt, wenn ich Aiken kopiere und einfüge, wechseln Sie das nach oben. Das könnte Änderungen sehr leicht vornehmen. Wir können weiterhin ein Foto oben auf der Tambor halten Option haben. Erweichen Sie die abgerundete Ecke hier. Da ist der Punkt. Es wird es mildern. Bringen Sie das runter. Ich muss ein anderes Foto machen. Machen Sie den anderen, den wir auf der anderen verwenden wollten. Da gehen wir. Machen Sie eine schöne enge Beschneidung, damit es nicht zu beschäftigt aussieht. Willst du die Gabel da reinbringen und sicherstellen, dass das nicht oben aufgerundet ist, und dafür sorgen, dass wir keine Grenze haben? Ich möchte dieses grüne Blau auf jedem Bildschirm integrieren, denn ich möchte es verbinden können, also ist dies ein Punkt, den wir entscheiden können. Mögen wir die Grautöne bei der Arbeit nicht funktioniert. Also, was ist großartig daran, diese Verbindung zu haben? Also gehe ich einfach zu meinen Symbolen. Ich bin nur ein Titel, dieser Hintergrundbildschirm Hintergrund und wir können hier mit den Farben spielen. Also werde ich ihn ganz blau machen. Fühlst du dich wie eine blaue Arbeit? Ich fühle mich wie eine schwarze Arbeit. Wie können wir Blau hier einbinden? Wir können den Anmeldeprozess immer beenden. Wir könnten diesen Knopf hoffentlich machen und das näher an das Ende bringen. Es wird in unser Netz wechseln und sehen, ob wir das Schleppnetz nicht kriegen können. Alles ist konsequent. Wann würde die gleiche abgerundete Kante hier haben, so können wir immer zurück zu sehen, was wir verwendet. Und wir haben eine Vier benutzt. Also werde ich zurückgehen und die gleiche abgerundete Option anwenden. Großartig. Jetzt optimieren wir nur das Layout, das Sie sollten. Wir haben genug Atemraum zwischen allen Designelementen. Beachten Sie, wie das so viel hilft, ein wenig Atemraum zu haben. Stellen Sie einfach sicher, dass der Abstand hier konsistent ist und das gibt uns die Chance, ein wenig größeres Foto perfekt so zu haben , wie zuschneiden? Es ist in zwei Hälften geschnitten. Ihre Art schafft eine dynamische Ernte. Ich war froh und sparen. Wir haben zwei Bildschirme runter. Ah, 100 weitere zu gehen. Nun, wir werden nicht alle 100 machen, aber wir machen mindestens 10 weitere Bildschirme. Also wird die Facebook-Autorisierung dieses Symbol hier nehmen. Aber das ist die Rückseite. Die Dinge werden sehr schnell laufen, jetzt, wo wir anfangen, hier für Sie eine Art Branding-Standards zu etablieren , ich Standards. Dies wird also die gleiche genaue Taste sein. Also warum nehmen wir nicht einfach diesen Knopf und gehen einfach weiter und setzen unsere Autorisierung da rein? Und dann haben wir unseren Button Text. Wir mögen das Weiß nicht. Also, was das sein wird, ist wahrscheinlich, anstatt ein separater Bildschirm zu sein, es wird eine Pop-up-Box sein. Also wird es hier drüben auftauchen, um zu autorisieren, es wird dich nicht auf einen Bildschirm schicken . Also, was ich tun wollte, ist irgendwie einen verschwommenen Effekt zu haben, sehr irgendwo auf das, was Sie hier sehen , wo Sie eine Art Pop-up-Box haben, aber es ist irgendwie im Hintergrund verschwimmen. Ich weiß, dass IOS das vor ein paar Jahren gemacht hat, als sie eine Art klebrige Upgrade, und das ist irgendwie eine sehr beliebte Sache zu tun. Das ist also der Effekt, den ich zu emulieren versuchte. Aber es sieht so aus, als wäre ich nicht in der Lage, das zu nehmen und es als Ganzes zu verwischen, weil es mir diese Option hier nicht gibt. Also werde ich hier etwas betrügen. Ich werde nur einen Screenshot von meinem Bildschirm machen und ihn als Foto bringen, und ich kann irgendwie den gleichen Effekt haben, damit ich diesen Effekt emulieren kann. Ich werde das Foto mit dem Desktop mitbringen. Hörst du es? ISS Es wird gehen, dass wir das nicht mehr brauchen. Wir werden sehen, ob wir diesen Effekt nicht emulieren können, indem wir ein Foto verwenden, so irgendwie das Gefühl geben , das wird auftauchen und irgendwie dunkel da drin, und geben Sie mir einfach den schnellen Knopf, um eso zu drücken, ich bin jetzt. Es ist auf Hintergrund Unschärfe. Versuchen Sie, Objekt Unschärfe. Sehen Sie, ob ich keinen eher verschwommenen Effekt bekommen kann. Perfekt. Genau da. Also jetzt, was wir tun können und wir gehen in Prototyp stöhnen. Wir beginnen, dies zu verknüpfen, wird in der Lage sein, diese Taste zu drücken und es wird auftauchen und bleiben immer noch auf, dass aussehen, wie es noch auf diesem Bildschirm bleibt. Und so haben wir auf diesen Knopf gedrückt, wir können ihn dort lecken, wo er genau hier hingeht. Jetzt haben wir unser zweites Pop-up. Egal, wie du dich anmeldest, du musst dem lokalen Grub Zugang zu deinem Standort geben , und wir können das ein einmaliges Ereignis sein. Es muss nicht jedes Mal passieren, wenn sie sich anmelden, was gut ist. Es wird also diesen kleinen beweglichen Pop-Up-Box-Bereich stilisiert, um unserer Marke zu entsprechen, damit wir es dunkler machen können . Machen Sie es. Diese Farbe kann weiterhin weiß verwenden, und wir könnten dies eine schöne kontrastreiche Taste machen. Wir könnten es gebrandmarkt grüne Farbe. Wir können die gleiche abgerundete Kante verwenden, die wir hier verwenden. Also verwenden wir hier eine Vier auf diesen kleinen, äh Boxen, damit wir hier vier machen können, damit es mit all unseren abgerundeten Kanten über alles, was wir tun, konsistent sein könnte . Ich fühle mich, als wären wir ziemlich glücklich damit. Wir können damit rollen. Wir können das noch höheren, höheren Kontrast machen , aber das müssen wir fast lesen. Manchmal bedeutet es Warnung. Wissen Sie, wenn ein Mitarbeiter rot, wenn es, wenn sie eine Entscheidung haben, zu teilen, äh, wichtige Informationen, wie Standort. Sie wollen nicht rot verwenden, weil es fast eine Warnung ist, wie dies ist nicht das, was Sie tun sollten. Aus psychologischer Sicht könnte es manchmal funktionieren, mit dem weicheren Markenmörder zu kleben und das Kontrollkästchen „Immer zulassen“ haben . Großartig. Und wir könnten hier sogar einen kleinen Schlagschatten machen, dort etwas bedeutenderer Schatten haben. So, jetzt bekommen wir, um den Home-Bildschirm, den Benutzer Home-Bildschirm zu tun . Das könnte also eine sehr wichtige Seite sein, die sie zum Lebensmittelgeschäft ein Restaurant schicken wird, wenn man es sehr sauber macht. Ähm, einfach und einfach zu bedienen. Sie werden ein paar Momente damit verbringen, daran zu arbeiten, und wir werden das gesamte Projekt weiter durcharbeiten. Also, nur um der Zeit willen, ging ich voran und verbrachte etwa 20 Minuten Art zu trainieren, was ich denke, wäre ein gutes Layout. Davon haben wir schon vorher schon viel gemacht. Ich wollte nicht zu viel Zeit nehmen, wenn jedes Grün den Prozess durchläuft. Aber ich möchte darüber reden, warum ich in dieser letzten Phase gelandet bin. Also im Moment dachte ich darüber nach, die beiden Boxen zu verwenden und irgendwie einen Hintergrund zu haben, der durchscheint. Aber nach einer Weile dachte ich, es sah ein wenig beschäftigt aus, diese dann Hintergrundgrenze den ganzen Weg um diese beiden Boxen zu haben . Also, irgendwie direkt an den Rand zu machen, gab es ein wirklich modernes, sauberes, glattes Aussehen, das ich denke, wirklich gut funktioniert. Und ich hatte auch ein Problem, das Lebensmittelgeschäft auf das Foto zu setzen. Also musste ich sehr vorsichtig sein, welches Foto ich wählte, denn wenn es zu beschäftigt war, tauchte es nicht auf. Also habe ich versucht, ihn in Kisten zu stecken. Ich habe eine Art von vielen verschiedenen Möglichkeiten versucht, es zur Arbeit zu bringen, und auch eine andere Sache ist, dass ich eine Art von Text hier haben musste, also müssen wir eine Art von Richtung für den Benutzer geben, denn wenn wir gerade Lebensmittelgeschäft hatten und Restaurant Art offensichtlich, was Sie drücken. Aber es ist schön, eine Art verbal die Aktion genannt zu haben, um Sie durch den Prozess zu führen , um Sie einzuladen. Also habe ich irgendwie Ihre Wahl getroffen, habe eine enge Art von nach oben und unten, um es irgendwie wirklich zu schaffen. Offensichtlich wählen Sie eine der anderen und dass Sie zwei Optionen haben. Wir haben bereits unseren obersten Kopf oder getan, dass wir früher in der Lektion getan haben, so dass das bereits abgeschlossen war. Diese Seite ist also im Wesentlichen erledigt. Ich habe gerade die richtigen Fotos gefunden, versucht, das richtige Layout zu finden. Und vielleicht können sich diese Fotos hin und wieder ändern, abhängig von vielleicht Ihrem Lieblings-Restaurant. Das könnten wir später erkunden. Also, das ist eine Art von diesem Home-Hauptbenutzerbildschirm. Wir sind damit fertig. Gehen wir weiter und gehen Sie nach unten zum nächsten, was ein bisschen komplizierter sein wird, weil wir Farben und Typengrößen herausfinden müssen , alles für diesen nächsten Bildschirm 17. Aufnahmeraum: Lassen Sie uns ihre Restaurant-Liste machen. Also hatten wir eine Restaurant-Karte, die hier sein sollte, und es wird Google Maps laden. Es dauerte also nur eine Art generischer Screenshot von Google Maps, der einfach diesen Rahmen nehmen und in unser Foto ziehen kann . Also gehen Sie voran und werden automatisch zugeschnitten und lassen Sie uns einen Schlagschatten auf hier machen. Also taucht es hier drüben aus. Lassen Sie uns das vorbringen. Und wir haben auch eine Art Standortsache. Dies ist eigentlich ein ehemaliges Logo, also integrieren wir etwas von unseren Markenbeständen, um irgendwie die Standortmarkierung hier zu haben . Also werden wir das einfach überlegen und es zu einer Farbe machen, die so rot hervorstechen wird . Und das sagt Restaurant-Karte. Aber wir müssen nicht wirklich sagen Restaurant-Karte, weil ich denke, es ist ziemlich offensichtlich, dass das der Standort des Restaurants ist, dass der aktuelle Standort. Aber wir wollen auch alle anderen auf der Karte zu den realen Themen zeigen, ein paar von ihnen nur um ein Beispiel zu zeigen. Also gibt es unsere Karte, und so können wir jetzt irgendwie mit diesen Blasen herumlaufen, und jetzt, wo wir den Winkel oder die Krümmungszahl hier kennen, heißt es auf fünf, glaube ich, wir haben vier auf allen anderen Knöpfen gemacht. Also ändern Sie einfach die runden Ecken auf vier, um alles zu passen, was wir hier getan haben, als wir gerade für und Ford wollen Konsistenz dort bestätigt. So können wir jetzt feststellen. Brauchen wir einen dunklen Hintergrund oder einen hellen Hintergrund für unsere Angebotsseite? Das wäre es also, wenn es ein dunkler Hintergrund wäre. Ich denke, es kommt wirklich schön heraus, aber es kann auch versuchen Art von unserer helleren Farbe als auch, weil wir nicht wirklich. Wir haben ein bisschen dunkler für die Anmeldung. Aber wenn wir es hier rüber gewechselt haben, wenn Sie sich einloggen, ist das OK. Es ist immer noch ziemlich Wettbewerbe im Einklang mit Markenfarben. Ja, ja. Und was ist großartig an dem Wiederholungsraster? Anstatt all diese kleinen Dinge ändern zu müssen, kann ich alles außer dem oberen löschen, das perfekt machen, und dann könnte ich einfach wiederholen Raster. Lass uns das rot machen. Wir wollen keine Grenze haben. Sie tun diese Sterne-Bewertung, die wir tun könnten, dass blaue Farbe Restaurant Namen. Wir werden sehen, wie das aussieht wie blau und diese Farbe. Lassen Sie uns gehen und ändern Sie es in eine unserer gebrandeten grauen Farben sowie die gesamte Körperkopie. Es ist dieses Chaos mit Abständen. Dies ist, wenn wir wirklich finden Tune unsere Art aussehen und wie viel Marge übrig ist. Du machst all die kleinen kleinen Anpassungen, die wir machen müssen, damit wir die Randfarbe ändern , sie dunkler machen ihr Pipettenwerkzeug nehmen und vielleicht diese helle Farbe bekommen oder nicht, eine Grenze haben oder Schlagschatten, was mit ihren Schaltflächen konsistent wäre. Und so denke ich wirklich, dass das Festhalten mit dieser dunkleren Hintergrundfarbe besser funktionieren könnte, um wirklich zu helfen, dass blau grün Pop out, Sie bemerken, wie ich mit diesem sehr kleinen Mund. Ich tue es nur für The Star, was wichtig ist. Ich mache es für den Restaurant-Namen, was wichtig ist, und ich habe diesen roten Knopf, um anzuzeigen, auf die nächste Stufe, also lassen Sie uns sicherstellen, dass wir den gleichen runden Horner's Markt haben, ist ein vier Oh, das sieht schön aus. Wir müssen hier auch abgerundete Ecken anbringen, aber nur an zwei Kanten würde ich stilisiert werden. Das ist ein bisschen. Muss nicht sehen, halten Sie die Option gedrückt. Ich will mich nur ändern. Nein, wir können das stilisieren und es an einer Kante wirklich abgerundet machen, sehr viel, dass wir dort keine abgerundete Kante haben konnten. Lassen Sie uns schaffen und Null, was schön an den Rändern hier drüben ist. Ich gehe einfach über das Aussehen, runde die Kanten aus und runde dann die Ecken ab und ändere dann den Größenrahmen kann die Hälfte geschnitten werden. Vielleicht tun Sie 1,5 genau dort in der Mitte und dann machen Sie es die Farbe. Wir brauchen den Betrag. Sehen Sie, dass hat diese kleine weiche Kanten. Ich denke, es sieht auf diese Weise viel besser aus. wir sicher, dass alles aufgereiht ist. Es bekommt Ihr Pin-Werkzeug, um sicherzustellen, dass es schön und aufgereiht großartig ist. Und lasst es uns zusammenbauen, während wir dabei sind, denn wir werden das sehr viel duplizieren. Machen Sie es in die richtige Größe. Was ich daran liebe, ist irgendwie alles andere, was wir bisher mit diesem wirklich kleinen weichen Rand gemacht haben , oder? Also lasst uns mit der rechten Maustaste klicken. Machen Sie es zu einem Symbol do Mai kann verengen. Wenn wir also duplizieren, dass alle verknüpften Objekte sind, damit wir hier gut mit Kontrast-ID-Elementen spielen können, könnten wir diese Art von hellgrau vom Rand nehmen lassen. Es ist darin rückwärts in unsere kleinen weichen Kanten, und dann brauchen wir diese kleine Trennlinie nicht mehr. Wir haben ein wenig genug Kontrastbereich hier drin, um wirklich hervorzuheben. Okay, wir kommen dorthin. Lassen Sie uns diese Boulder Filter Restaurants machen, weil ich möchte, dass das wirklich abhebt als Option. Lass es uns größer machen. Machen Sie es vielleicht 12 Punkte. Wir könnten immer zu unseren Zeichenstilen gehen und auf einen dieser Top-Header-Typ klicken. Vielleicht wird das uns helfen, die gleichen Header-Größen zu bekommen. Sie benutzen Ihren Namen. Bringen wir das runter. Es gibt also gerade genug ein bisschen mehr Polsterung und Abstände und lassen Sie uns loswerden. Vergessen wir nicht unser Raster, das uns auch helfen wird, und ich brauche ein wenig mehr horizontale Immobilienfläche, also werde ich es nicht bis zu diesem Rand bringen, also benutze ich es nur, um sicherzustellen, dass diese irgendwie aufgereiht sind, aber ich brauche mehr horizontalen Raum. Habe eine Menge zu passen hier. Aber sehen Sie, ich habe immer noch sehr großzügige Ränder, viel Atemraum. Also lasst uns diese Blasen genauso machen wie diese Blase hier. Also haben wir keinen Schlag auf die, um die Grenze zu verlassen. Wir haben den Boden um dieses perfekte, und wir wollen auch unsere kleine Aero ändern. Match. Jetzt brauchen wir also ein dunkles Euro-Symbol, das ungroomed ist, weil wir ein neues Symbol machen wollen. Das wird eine andere Farbe sein. Also habe ich ein paar Augenblicke gebraucht, um die Pfeile auszutauschen, um unsere weicheren Kanten zu haben. Und wir wollen auch unsere Icons hier irgendwie optimieren. Im Moment ist dies eine sehr grobe Ikone. Wir wollen weiterhin verwenden, dass Sie ich Art von weichen, runden Kanten. Also lassen Sie uns dieses kleine Symbol neu erstellen. Wir könnten das sehr schnell machen und nur das Kreiswerkzeug bekommen. Ich werde nur einen Rand machen, und wir werden die gleiche Farbe nehmen, die wir vorher gemacht haben, die richtige Dicke finden und dann einfach eine kleine Erweiterung der Suchleiste zeichnen und hier um Ecken gehen. Hat Ihr Aussehen Panel bekommen ihre Pipette Werkzeug in Probe sind groß und haben eine ähnliche Dicke? Und da sind wir. Wir haben es gerade in unserem Stil neu erstellt. Gruppieren Sie es zusammen, löschen Sie das alte und bringen Sie es in, Verkleinern, Verkleinern. Weißt du, wir haben ein paar benutzerdefinierte Symbole. Wir haben Suche UTA Bewertungen in Küche. Wenn wir also das Gefühl haben, dass wir an einem Haltepunkt sind, fühlen wir uns, als wäre es perfekt. Wir können die Wiederholungsraster-Tool-Zehe verwenden. Replizieren Sie das, aber wir müssen uns wirklich zuversichtlich fühlen. Und das ist eine Entscheidung. Wenn wir mit diesem Knopf herumspielen, denke ich, dass könnte ein wenig besser aussehen als die rote, weil ich denke, dass die Red wiederholt sechsmal könnte zu viel Aufmerksamkeit. Du musst wirklich die roten und noch subtileren Wege nutzen, als wir unser gebrandetes Blau tun. Nun, lassen Sie uns replizieren dies war eine Gruppe zusammen zu bekommen und wiederholen Raster und gehen Sie voran, machen uns viele, die hier sitzen werden. Also 1234 Jetzt müssen wir wieder den richtigen Abstand finden. Perfekt. So können wir dies auch ein wenig erweitern, etwas, um auf das Hauptkunstbrett zu klicken. Sie könnten all dies löschen. Das brauche ich nicht mehr. Erweitern Sie unser Brett nach unten, damit wir zeigen können, wie es scrollt. Also tun wir es. Der Prototyp-Modus, den der Benutzer nach unten scrollen kann, sollte ein wenig realistischer sein. Großartig. Also gibt es hier unsere Möglichkeiten. Also, was wir tun werden, ist, dass der Benutzer auf eines dieser Restaurants klickt und wir werden es Restaurant Select nennen. Wir wählen diese zweite Option aus, und sie werden zum nächsten Bildschirm gehen. Dies wird also die Menübildschirme sein. Wir machen was sehr, sehr ähnlich was? Wir haben zwei Sekunden, um mit unserem Thema konsistent zu bleiben. 18. Menü-Bildschirm: Hier ist unsere Restaurant-Landing Page, also haben wir die Idee, durch die neuesten Fotos, die für die Menüpunkte hochgeladen werden, Daumen zu können . Also lassen Sie uns voran und ziehen Sie ein paar dieser Fotos. Ich fühle mich schon ziemlich zufrieden mit dem Layout. Wie es ISS. Also lassen Sie uns eines dieser Lebensmittel mitbringen und ein paar andere verschrotten, damit Sie irgendwie sagen können, dass es ein Foto gibt, durch das Sie blättern können. Ich finde, diese Punkte sind großartig. Das zeigt, dass ich Daumen durch und lassen Sie uns gehen und setzen Sie diese stott wie weiß und warf das zweite Foto rechts. Da drüben ist ein Foto, das dort durchblättert. Wunderbar. Also lassen Sie uns voran und passen Art des gleichen Stils an. Lass uns weitermachen und das hier rüber bringen. Was ist kopieren und einfügen hier, weil dies ein Symbol ist, wenn das verknüpft ist? Wenn wir jemals den Hintergrund überall ändern wollen, haben wir diese Option nicht. Mach das schnell. Also, jetzt, wo wir irgendwie eine Einrichtung bekommen, bringen wir das rüber. Ich glaube, das ist auf einen Charakterstil gesetzt, der Header, so dass alles irgendwie die gleiche Größe haben wird. Lassen Sie uns das ansprechen. Also lasst uns das Gleiche machen, was wir oben getan haben. Lass uns voran gehen und ich gruppiere das Gitter und wir werden alles außer der Spitze löschen . Und dann werden wir in der Lage sein, mit dieser Tiefe, dem gleichen Stil zu spielen . Also werde ich dir das Grün geben und wir werden die sehr weichen Kanten machen, die Grenze von den Mieten nehmen und wiederholen. Im Grunde lassen Sie uns unser Symbol bekommen, dass wir unser Symbol verwendet haben. Klicken Sie auf mein Symbol Drachen dort. Ich möchte es auf den Kopf stellen, um anzuzeigen, dass es Akkordeon-Stil kollabiert, und dies wird der Pfeil nach unten zeigen. Stellen Sie sicher, dass das dunkler ist und wir fertig sind. Wir müssen also sehen, wie schnell schneller und schneller werden kann. Während wir alles aufbauen, Miss tut so viele Seiten. Großartig. Wir sind schon damit fertig. Also, jetzt müssen wir diesen Teil machen, wo er ein wenig zusammenbricht, also wird es im Grunde dieser Bildschirm sein. Aber was dies hinzugefügt Drop-Down-Akkordeon-Menü. Also, wenn voraus, hat der Zusammenbruch des zusammenklappbaren Menüs einfach etwas Zeit gespart? So tat das gleiche, wo ich alle diese gelöscht und tat das eine und dann das Wiederholungsraster Werkzeug, um sie alle zu tun. Also, jetzt sollte der nächste Bildschirm zeigen, wann er die Tasche hinzugefügt. Es gibt eine Art von Animation, die oben passiert, wenn wir in der Lage sein werden , die Animation zu trainieren , indem wir den Bildschirm machen. Und was großartig daran ist, dass wir weitermachen können. Glauben Sie das, denn jetzt haben wir all das entworfen, weil der einzige Unterschied mit dem Bildschirm wird es eine kleine Animation geben, die passiert. Wir werden Auto ein angeborenes verwenden, um dieses Symbol oben animieren zu können. Wir werden das ein bisschen größer auf dem Bildschirm Poetess machen, beschnitten, und wir haben es nicht mehr zusammengebaut. Wir werden das etwas größer machen. Und hier geht eine kleine Animation, die passiert. Ich muss hier noch zwei schnappen. Also haben sie zwei Artikel in ihren Warenkorb gelegt. In diesem Beispiel sollten Sie es zu einer zwei machen. Wir zeigen Ihnen, wie Sie die automatische Animation durchführen, um diese animiert zu machen. Sobald wir beginnen, alles zu verknüpfen, um ein bisschen Zeit zu sparen. Ich habe eine Weile damit verbracht, die nächsten paar Bildschirmsets zu entwickeln. Und ich will nur durch, warum ich getan habe, was ich getan habe. wir das letzte Mal gingen, machten wir diese kleine Art von Bildschirm, auf dem wir ihn später animieren können , und sie könnten in den Warenkorb legen, und dann werden sie in der Lage sein, ihre Bestellung zu überprüfen. Sie gehen in ihren Warenkorb. Und was ich getan habe, ist, dass du bemerken wirst, dass ich einen kenne oder den dunklen Hintergrund habe, und das habe ich absichtlich gemacht. Also, wenn sie zum Check-out-Prozess gehen, sehen sie tatsächlich einen anderen helleren Hintergrund. Und definitiv werden sie bemerken, dass dies eine andere Richtung ist. Sie machen sich bereit für die Kasse. Es ist ein bisschen anders, und ich finde, wenn Sie eine lange Liste machen und Zahlen machen, ist es viel einfacher, auf einem weißen Hintergrund zu lesen, der auf dem dunkleren Hintergrund ist. Also entschied ich mich, den Check-out-Prozess mit einem weißen Hintergrund zu halten, um es sauber und einfach für den Check-out-Prozess zu halten, und irgendwie brach diese Art der Verwendung einer Kombination der grünen Tasten und für diejenigen wirklich wirklich wichtige Elemente, die ich wirklich hervorheben möchte, noch mehr als die grünen Tasten ist, äh, diese Art von roter Farbe, die die Bestellung jetzt und die Ladekarte sein würde. Also gibt es eine Art von dem, was ich dort getan habe. Es gibt eine sehr ähnliche Bildschirme gehen über zu dieser Karte Bildschirm gehen. Ich habe nur irgendwie die Karte, die Ihr E T A und eine einfache Änderung der Anzeigenreihenfolge zeigen wird , und Sie haben die Trennung, wo Sie es aus Ihrer Bestellung ändern können. Und das ist der Pop-up-Box sehr ähnlich, die wir zuvor gemacht haben. Also ist es eine Art Kopie und eingefügt, dass er hier im gleichen Styling ist. Ich habe ein paar Symbole für meinen kleinen Spickzettel. Sie mögen es und schneiden eine verschwommene den Hintergrund mit Hintergrundunschärfe ähnlich wie das, was ich vorher getan habe . Das ist also kein separater Bildschirm, sondern wird über diesen hier auftauchen und in der Lage sein zu zeigen , dass, wenn wir die Animation im Prototyp-Modus machen und alles zusammen mögen, also ist es noch ein letztes Frühjahr zu tun, und das ist erfolgreich Lieferung. Ich dachte, ich würde vielleicht ein paar Fotos hier einbauen und irgendwie durch den Prozess der Macht gehen , darüber nachzudenken. So haben wir, ah, erfolgreiche Lieferung und haben diese schöne Bewertung Restaurant-Taste, die sie komprimieren und überprüfen das Restaurant. Das wäre mehr Bildschirme, die wir an einem anderen Tag dio könnten, aber wir werden uns auf diesem Bildschirm konzentrieren, also bekomme ich ein kleines Scheckheft-Symbol und gehe und lade eines davon herunter und habe das dort. Aber ich mag es, einige Fotos zu integrieren, also würde ich gerne einen Call to Action haben, damit Sie das Restaurant überprüfen können. Aber, hey, gehen wir zurück auf den Startbildschirm und bestellen wir ein paar Lebensmittel. Lassen Sie uns Sie in der APP bleiben. Lets halten Sie daran interessiert, diese bei mehr zu verwenden, weil je mehr Sie diese App verwenden, desto mehr das Geld macht das Unternehmen Geld. Lassen Sie uns ein Lebensmittelfoto mitbringen, sehen, ob ich eins hier habe, kopieren und einfügen. Sind Sie also daran interessiert, Lebensmittel zu bestellen? Nein. Wir konnten nur beschneiden dieses Foto als solche sagte, dass rückwärts in der Schichtsystem nur tun Befehl Klammer die Klammern so interessiert in Ordnung und Lebensmittelgeschäft. Also könnten wir vielleicht ein kleines Kontrollkästchen-Symbol hier bekommen und wir müssen dies auf einer Art von höherem Kontrast Hintergrund haben. So können wir diese kleine Aktion sehen, es sei denn, wir machen das etwas kleiner. So interessiert an Ordnung und Lebensmittel Ebene Pfeil nach unten Pfeil. Ich denke, wir haben eine flauschige oder genau hier, die wir finden können, um ein bisschen Zeit zu sparen. Wir haben bereits dieses Symbol gemacht, und manchmal können Sie Symbole auf der Seite haben, so wie die Sie es mögen, können Sie Art von sammeln Symbole und haben alle gruppiert, so dass Sie in der Lage sein, diese zu finden und ziehen Sie ihn in , ohne zu vorherigen Bildschirmen zurückkehren zu müssen. Da. Nur ein kleiner Tipp da. Ich hatte keine Zeit, das mit dieser Klasse einzurichten, aber wenn Sie ein wenig mehr Zeit hatten, hilft wirklich, wenn Sie 50 oder so verschiedene Bildschirme machen . Also was? Der Pfeil, um dort anzuzeigen, So könnte es ah Bewertung Restaurant Art Gruppe diese zusammen Erfolgreiche Lieferung und Bewertung Restaurant haben . Ich werde ein schnelles kleines Mädchen finden, Icahn blocken und das hier reinlegen. Aber ich glaube, wir sind hier ziemlich fertig. Ich denke, es gibt so viele weitere Bildschirme, wir können es um der Zeit willen entwickeln, für Art des Unterrichts Art von diesem Prozess. Ich glaube, wir sind an einem guten Zwischenstopp. Wir haben noch einen Prozess vor uns. Also haben wir eine wunderbar gestaltete App, die viel Zeit damit verbracht wurde, Hintergrundforschung zu betreiben. Wir haben den gesamten U X-Prozess durchgeführt, eine Persona ohne Benutzerfluss entwickelt, und wir haben eingearbeitet, dass unsere niedrige Treue jetzt hoch für das Libyen Final Design 2% sind . Eine weitere Sache, wenn wir es präsentieren, möchten Sie in der Lage sein, einen funktionierenden Drahtrahmen zu haben, so dass ich klicken kann und die Links zu Orten gehen lassen, damit wir einige Benutzertests durchführen und es auch dem Kunden zeigen und in unserem Portfolio Zeigen Sie seinen Brunnen, wenn es nicht für einen Klienten ist, werden wir das tun. Jetzt drehen wir in den Prototyp-Modus. Ich werde weitermachen und in diesem Video wird eine neue Lektion sein. Ich bin aufgeregt, weil dies ein wirklich lustiger Teil ist, wo die Dinge wirklich zum Leben zu erwecken beginnen, so dass wir in Prototyp-Notiz gehen und verknüpfen sie weiter. Ich werde in der nächsten Lektion sehen 19. Prototyping - Verknüpfung alles: Lassen Sie uns es also in Prototyp-Minuten auf in Prototyp Stöhnen Adobe X'd verknüpfen. Wir werden alles miteinander verknüpfen. Sie müssen sich im Prototyp-Modus befinden. Um das tun zu können, lösche ich alle unnötigen Bildschirme. Wir haben nur die wichtigsten Dinge, die wir brauchen, und los geht's. Ich werde voran gehen und sparen. Dies ist ein neues Dokument, nur um ein zusätzliches Backup zur Hand zu haben. Lass es uns tun. Okay, Also, wenn Prototyp-Modus, Sie haben bereits eine Art von überprüft, wie die Verbindung Dinge oben und wie Art von tun Auto animieren. Das wird also ein sehr schneller Prozess sein. Ich werde nicht darauf eingehen, wie Sie Animationen machen. Wir werden es irgendwie verknüpfen, da du bereits ein paar Lektionen darüber hattest, wie das geht. Es ist also ein Klick auf unser Ding hier. Jetzt müssen wir uns an unseren Benutzerfluss erinnern. Wenn sie sich bei Ihrem Konto anmelden, gehen Sie direkt zur Pop-Up-Box, weil Sie sich direkt anmelden. Du gehst direkt durch. Du brauchst nicht mal hier rauf, geh hier runter. Das wird also auf diese Seite verlinken, und das wird ein Fingertipp sein. Das ist also nur ein einfacher Tastendruck. Wir werden keine Autoanimate machen. Wir machen nur einen einfachen Übergang und machen eine Auflösung. Okay, jetzt verlinken wir uns, einen Login zu erstellen , der gleich hier oben sein wird, auf diese Seite geht. Es wird unsere vorherigen Einstellungen speichern, also müssen wir nicht dort sitzen und es immer wieder tun, und Facebook wird einen Pop-up-Bildschirm haben. Also, jetzt müssen wir herausfinden, wie wir das Pop-up oben machen, da wir schon irgendwie die Hintergrundarbeit daran gemacht , haben,ist alles, was wir tun müssen, hier verbunden. Wir haben die Arbeit schon gemacht, damit es so aussieht, als wäre es ein Pop-up. Und das könnte sein, vielleicht können wir hier etwas etwas anderes machen. Wir könnten eine Autumanimation oder ein Overlay machen. Nun, lasst uns versuchen und überlagern. Es überlagert es oben auf dem vorherigen Bild. Lassen Sie uns sehen, wie es funktioniert. In Ordnung, also haben wir all das in Verbindung gebracht. Also jetzt nehmen wir einfach an, sie klicken auf erlauben und wir wollen auch wirklich wollen, um Details zu bekommen . Wir könnten einen separaten Bildschirm haben, der genau so ist, dass das Kontrollkästchen hat. Wenn Sie also überprüfen, übergeht es in den geprüften Bildschirmstatus. Aber wir werden einfach auf Erlauben klicken. Wir werden nicht immer erlauben. Wir gehen direkt zu den Optionen hier und wir werden keinen überfälligen Übergang machen. Und wir können immer Slide links es schieben. Richtig. Uh, lasst uns einfach eine einfache Lösung für jetzt machen. Wir könnten die ausgefallene Animation immer ein wenig später machen, wenn wir alles miteinander verbinden. Also, jetzt sind wir nicht. Wir haben noch kein Lebensmittelgeschäft gemacht. Wir haben noch nicht daran gearbeitet, aber wir haben Restaurant gemacht. Wenn sie also irgendwo auf dieses große Bild klicken, werden sie spät auf der Restaurant-Seite landen. Nehmen wir an, sie wählen Restaurant Nummer zwei oder irgendwo auf hier ist zum Beispiel. Sie können direkt auf die Zielseite gehen. Also, jetzt, wenn sie auf eine der Seiten klicken, nehmen wir an, dass klicken Sie auf die 2. 1 Es wird ein Dropdown-Menü sein. Guter Klick darauf. Es wird also ein Auflösen sein, und wir könnten versuchen, eine animierte und sehen, wie das aussieht. Also werden wir das ein wenig später erkunden. War könnte irgendwie eine grundlegende Verlinkung tun. Also, sobald sie hier klicken, fügen sie zu Tasche hinzu, um auf einen dieser am hinteren Teil Tasten klicken, werden sie gehen weiter, kommen zu diesem. Das wird eine Art Animationsbildschirm sein. Also wird dieses kleine Ding auftauchen und wieder auftauchen. Klicken Sie hier und wir werden eine automatische Animation zu tun. Und wir werden um Auto Animate spielen, um zu sehen, wie das in Ordnung aussieht. Und so gehen wir. Dies ist nur eine Art Übergangs-Bildschirm. Gehen wir zum Übergang zurück nach hier. Nur ein einfacher Übergang. Weißt du, wir werden weiter nach unten ziehen. Der Prozess ist ziemlich einfach. Was sie hier tun werden, ist, dass sie jetzt bestellen und hier rüber klicken, und dann werden sie die Karte aufladen. Das könnte andere Bildschirme sein, die wir später bei Kreditkarte zu Geldbörse entwickeln könnten und dann weiter gehen und auf die Karte klicken und dann die Anzeige ändern oder sie werden sich in dieser Reihenfolge wird eine Pop-up-Box haben und lassen Sie uns den Übergang sein. Großartig. Und so ist dies auch eine weitere Möglichkeit, Restaurant zu überprüfen, die nach dem Prozess automatisch auftauchen wird . Also, was wir tun werden, ist, dass wir das hier verknüpfen, damit alles verlinkt ist. Das war sehr schnell, sehr schnell. Ich werde das in einem Moment genauer erläutern. Also keine Sorge, wenn Sie sich ein wenig verloren fühlen, Hier ist alle unsere Verbindungen hervorgehoben. Alles, was ich sehen konnte, alle Verbindungen Sehr einfacher Fluss, den wir nicht entwickelt haben, die sind, wo sie gehen zum Lebensmittelgeschäft noch mehrere verschiedene Bögen, die wir nicht entwickelt haben. Aber für nur einen einfachen Test wird das gut funktionieren. Lassen Sie uns voran und speichern Sie es und lassen Sie uns einen Test geben und sehen, ob wir einen unserer Übergänge optimieren müssen , während wir weitergehen. Also klicke ich zurück und dann fängst du meine Vorschau hier an. Wenn Sie diesen kleinen Vorschau-Button anklippen, wird es unsere Vorschau öffnen. Hier ist die Vorschau unserer Website. Wir könnten es wirklich testen. Wir können das auch auf ihrem Handy öffnen, um es zu testen. Aber ich genau hier in meinem Browser so lange mit meinem Konto. Also weiß ich, dass das anklickbar ist. Ich könnte ein Login in Arkan erstellen, mit Facebook einloggen. Lasst uns mit meinen lobbing oder lasst uns, ähm, was ist länger mit meinen Kerzen? Sie haben meinen Countin bereits eingeloggt. Okay, jetzt ist hier mein autorisierter lokaler Grub-Zugang. Also ging ich zu, ähm, erlauben. Also hier bin ich, zurück in den Bildschirm. Also will ich nach Restaurants suchen. Das und was wir entwickeln. Schwingen Sie ein Pick auf Restaurant. Also, jetzt hier ist mein Restaurant, so dass ich auf wirklich eines dieser klicken kann nur für Benutzertests damit sie es testen können. Klicken Sie hier und OK, also hier sind einige Nebenartikel. Lassen Sie uns erkunden, was sie haben. Wir können immer wieder hineingehen und alle diese Namen ändern, also glaube ich, dass die 2. 1 derjenige ist, der klickbar Click open ist. Das ist großartig. Also, jetzt ist hier eine Art von wo wir irgendwie an Übergängen arbeiten müssen. Also im Moment habe ich darauf geklickt, aber ich kann nicht zusammenbrechen. Es wäre schön, das hinzufügen zu können, also müssen wir einen anderen Bildschirm hinzufügen, wenn wir wieder darauf klicken und es geht zurück zu dieser Seite. Um, damit wir das jetzt aufkochen können. Immer wenn ich ein Problem sehe, gehen wir voran und lösen es sofort. Gehen wir hier rein. Also sind sie hier drin, und ich würde diesen Zehenlink lieben, zurück zu dieser Seite. Also, nur wenn man das in einem Zyklus zurückschaut, ist es gut zu einem schönen Übergang. Also, wenn wir jetzt zur Vorschau gehen, könnten wir tatsächlich den Zustand überall starten. Starten Sie die Vorschau an beliebiger Stelle. Sie markieren einfach, wo Sie beginnen möchten und klicken Sie auf Play. Jeder würde direkt zu ihm gehen. Also lasst uns auf diese zweite Option klicken, richtig? Wenn ich das noch einmal anklicke, geht es zurück zum vorherigen Bildschirm. Lass uns aussehen, als würde es in Nice zusammenbrechen. Und ich muss nur das Foto reparieren. Das Foto muss gelöscht worden sein. Irgendwie. Das ist irgendwie eine nette Option. Und so möchte ich jetzt die Tasche hinzufügen. Also lassen Sie mich eine Tasche hinzufügen. Da gehen wir. Es gibt die Tasche und, äh OK, also denke ich, genau hier, gehen wir weiter und bestellen. Jetzt bin ich ziemlich glücklich damit. All das könnten wir später immer weiterentwickeln. Tipp hinzufügen. Das wird ein anderer kleiner Übergang sein, unsere Animation oder die Gesamtsumme ändern. Sie könnten das mit den Animationen und verschiedenen Bildschirmen tun. Also bestellen Sie jetzt. Also hier gehen wir die Karte aufladen und er würde gehen. Also gibt es mir 12 Minuten et A. Das wäre lebendige Karte, wenn es entwickelt wird. Damit eine Last, was auch immer E. T. T. A. ist, vom Algorithmus entwickelt wird und wir eine Adderreihenfolge ändern können. Hören Sie, einer, der hier außer Ordnung wechselt, mit denen wird hier eine Box auftauchen. Das ist passiert. Damit ich mich ändern kann. Und auf meine Bestellung, kann ich anrufen oder SMS. Sagen wir, ich habe angerufen und dann ist es eine erfolgreiche Lieferung. Ich kann Restaurant überprüfen und gehen Sie zu einem anderen Bildschirm arbeiten, überprüfen Sie es, oder gehen Sie interessiert an Ordnung und Lebensmittel und lassen Sie uns gehen und verknüpfen, dass zurück. Jetzt, wo wir hier sind, wollen wir das bis zur Landingpage des Lebensmittelgeschäfts verlinken, die oben sein wird, die wir noch nicht ganz entwickelt haben. Und dann überprüfen Restaurant könnte auf den neuen Bildschirm gehen, wo sie das Restaurant überprüfen können . Du könntest sehen, dass ich damit weitermachen kann. Es wird nicht ein paar Dinge optimieren. Ich habe ein paar Fotos bemerkt. Dieses Foto fehlte auf Art von Fix, dass. Wenn Sie also die Dropdown-Menüoption ausführen, sehen Sie nicht, dass das Bild verschwindet. Also machen Sie einfach ein paar Verbesserungen und reparieren Sie es. Und ich werde Ihnen zeigen, wie man die Animation hier macht, die diese kleine Tasche irgendwie auf- und runter bringt und ihr ein wenig wackeln lässt, um eine kleine Animation zu zeigen, dass etwas in die Tasche aufgenommen wurde. 20. Prototyping – Animationen erstellen: Also habe ich etwa 20 bis 30 Minuten damit verbracht, wirklich darüber nachzudenken, wie all das in der Vorschau animiert und ein bisschen Aufregung und Animation hinzugefügt wird , so dass es nicht nur statisch ist , von einer Seite zur anderen zu gehen. Es gibt eine Art von Bewegung, um dem Client zu zeigen, aber auch um dem Entwickler zu zeigen, wie die Dinge zusammenbrechen möchten, bewegen sich von Bildschirm zu Bildschirm. Ich werde nur einige der Dinge durchlaufen, Ah, gehen und zeigen Sie Ihnen auf dem Bildschirm. Wo ich dir jetzt zeigen werde, ist, wie macht das so wenig animiert. Aber es gibt eine Art von Aktion, bei der du zu Karpfen hinzugefügt hast, die die Farbe in Rot ändert. Es wird ein wenig größer auf dem Bildschirm, und dann geht es zurück in den normalen Zustand. Also, wenn Sie ah Bewertungen von Lektionen haben wollten, wie Sie die Animations- und Übergangstools verwenden und und Adobe X'd Jeremy Deegan hat einige tolle Lektionen dazu in der Adobe X'd Abschnitt am Ende der Klasse der definitiv überprüfen, dass out. Steig in diesen Abschnitt. Wenn Sie wirklich herausfinden wollen, gehen Sie zurück zu den Grundlagen in Bezug auf das Lernen, wie man einige dieser Animationen und Übergänge macht, aber irgendwie zeigen, wie ich es mit diesem praktischen Projekt gemacht habe. Hier ist die Animation, die an ihr drei verschiedene Bildschirme dauerte. Machen Sie die Animation irgendwie. Ich könnte noch mehr hinzufügen, wenn ich eine glattere Animation mit dem kleinen, ähm, Hinzufügen zum Warenkorb haben möchte. Aber hier ist eine Art Kernbild. So haben wir unsere Landing Page klicken Sie auf Add the bag. Sie werden auf den Bildschirm klicken. Der Unterschied hier ist der Arman-Trend-Prototyp-Modus. Im Moment klicke ich auf die Kunsttafel, und ich werde dir sagen, dass das nur ein typischer Übergang ist. Ah, sehr einfacher Übergang. Es ist keine Zeit darin, also geht es direkt in den Übergang ein. Es gibt kein Verblassen passiert, also im Grunde, klicken Sie über, um die Tasche hinzuzufügen. Es geht auf die gleiche Kopie, aber Sie haben den Unterschied bemerkt. Hier. Sie haben eine Art von einem grauen Zustand, und dann haben Sie Art von Ihrem Hinzufügen der zwei verschiedenen Elemente zum Warenkorb, und so, wenn Sie nach oben gehen, habe ich drei verschiedene Bildschirme, um die Animation passieren zu lassen. Also die nächste, die ich überging, habe ich nicht automatisch animiert. Und was also? Dies wird es automatisch von diesem Zustand bis zu diesem Zustand animieren, und Sie werden feststellen, dass ich es ein wenig größer gemacht habe, um eine Art von Zoomen des Symbols anzuzeigen , ein bisschen eine Bewegung, so dass ihre Augen an die Spitze des Bildschirm, damit sie es wissen. Okay, ich habe in den Warenkorb gelegt. Es weist auch darauf hin, dass der Benutzer auf den Warenkorb klickt, um den Check-out-Prozess fortzusetzen wenn er die Schaltfläche zur Überprüfung der Bestellung unten nicht angezeigt hat. Es ist also alles beabsichtigt. Es gibt einen Grund hinter all den Animationen. Sie sehen einfach nicht hübsch aus. Es gibt Arten von Möglichkeiten, wie wir sind Wir ziehen den Benutzer so schnell wie möglich an ihre Ziele, so möglich an ihre Ziele, dass es einfach und intuitiv ist. Also hier ist der Übergang, in den es geht, und das ist, was anders ist, da der Auslöser eine Zeit ist. Was passiert, ist, dass es in diesen Übergang geht und dann automatisch einen Zeitübergang durchführt , so dass es zum nächsten Bildschirm oben geht, ohne klicken oder interagieren zu müssen . Es wird nur mit der Zeit passieren, also beträgt die Dauer eine Sekunde. Nach einer Sekunde bist du auf dem Bildschirm, wird es auf diesem Bildschirm erscheinen und die Animation machen, und dann wirst du ein anderes Mal haben. Übergang automatisch, animieren bis ganz oben ist der letzte ist der endgültige Zustand. So haben Sie schon die kleine Animation geschehen, und jetzt haben Sie die beiden in den Warenkorb gelegt, und dann würde alles wie normal in diesem Stadium handeln. Dies ist der Bildschirm, den Sie dann wieder verbinden würden. Wenn sie von einem Einkaufswagen oben klicken, werden sie hier unten klicken. Also ich weiß, das ist ein wenig kompliziert, aber gehen Sie zurück und studieren Sie die Grundlagen von Jeremy Demons Lektionen, wo er wirklich durchgeht , geht irgendwie zurück zu den Grundlagen mit einigen dieser Übergänge. Sie bekommen irgendwie eine Vorstellung davon, wie Sie einige davon in Ihren Designs emulieren können. Also werde ich nicht zu viel ins Detail gehen, aber es ist eine Art Show. Sie irgendwie, was ich dort getan habe, um das zu erreichen, und warum ich überhaupt das Warum hinter mir getan habe. Warum sollte ich das animiert machen, damit ich den Benutzer wissen kann, dass das jetzt eine klickbare Einkaufstasche ist. Ikonische Art zieht wirklich Ihr Auge dort hoch. So ist das passiert, über ein paar andere, die ich hier gemacht habe. Sie können sehen, wie Sie Art von mehreren Bildschirmen und Zuständen erstellen müssen, um einige Übergänge zu gehen. Einige Übergänge passieren, das ist ein Bildschirm. Ich werde das nicht durchgehen. Das ist es, was passiert. Ich gehe und klicke auf Vorschauen und habe einige der Animationen zu sehen, die ich hier eingebaut habe. Also werden wir damit tun, sich in Ihrem Konto anzumelden. Wir gehen direkt dorthin, und deshalb werden wir es erlauben. Es wird also eine Animation geben, die dir zeigen wird, wie du diese Animation durchführst. Also klickst du auf erlauben es geht auf den Startbildschirm. Das wird ein wenig verkleinern die Fotos. So fügt eine schöne Animation. Aber Sie bemerken auch, wie die Pfeile irgendwie zwei ausgeben. Es gibt eine Art von Aktion, die passiert, und es ist glatt. Also, wie ich das gemacht habe, ist, dass ich hier rüber gegangen bin und ich auf verschiedene Bildschirme tun musste. Also haben wir diesen Zustand, der irgendwie dein, äh, vor dem Staat sein wird äh, . Also wird es hier reinkommen, lass mich gehen und auf den Übergang klicken, damit ich es dir zeigen kann. Das ist also nur Ihr Standardübergang. Ah, und es hat eine 0,4 2. Dauer. Das geht also auf den Bildschirm. Hat er noch einen Übergang? Was ich tun möchte, ist, dass ich dies dazu machen möchte. Und ich wollte diese schöne, sanfte Animation sein . Also, um das zu tun, sind Sie zu tun Auto einen Teamkollegen. Also klicke ich oben, und ich werde dir zeigen, was ich hier benutzt habe. Das ist also automatisch animieren. Ich habe eine Sekunde gemacht, was ein bisschen länger ist. So können Sie irgendwie wirklich sehen, dass die Animation an Ort und Stelle springt. Sie können wirklich die Anzahl der Fotos sehen. Es ist nicht so schnell, dass Sie es verpassen, und ich ändere auch die Positionen der Tasten. Also habe ich diese, äh, diese Pfeile. Es tut mir leid. Die Pfeile, die Pfeile nach links und rechts zeigen nach links und rechts. Und hier oben tauchten sie auf und ab, damit du sehen kannst, wann du es tust. Die automatische Animation, die sie von einem Übergang zum anderen nehmen wird, ist irgendwie wie die Verwendung von Schlüsselbildern. Wenn jemand jemals im Flash gearbeitet hat oder eine andere Art von Programm wie das ist, können Sie haben, dass Ihr Schlüsselrahmen wird von dieser Zehe die nächste übergehen. Das ist eine Art Auto. Wie automatisch animieren funktioniert Wieder einmal beobachtete Jeremy Diggins Lektionen. Ich kann nicht genug betonen, wie großartig es ist, wirklich zu den Grundlagen zurückzukehren, wenn es Luft wirklich lernt, was man mit Übergängen und Auto Animate und Prototyp-Modus tun könnte . Also habe ich ein paar sehr kleine Animationen gemacht, nicht nichts, das den ganzen Bildschirm nur kleine Dinge übernimmt. Diese Art von macht hilft der App fühlen sich ein wenig lebendiger und hat ein wenig Action, aber nicht so viel Action, dass es ablenkt. Nehmen wir zum Beispiel die Karte, die diese sehr kleine Veränderung von der Karte sieht, und was wir hier haben, ist, dass wir Mitglied hier oben haben. Das ist unser endgültiger Zustand auf der Bühne. Dies verbindet den ganzen Weg hinunter mit der Einkaufstasche Also das ist irgendwie der Vor-Zustand. Also haben Sie die Karte hier unten unten gezogen, und ich habe gerade eine einfache automatische zeitgesteuerte Autoanimate gemacht. Also, wissen Sie, da auf der Zeit, damit sie nicht auf irgendetwas klicken müssen, sie einfach auf dem Bildschirm erscheinen und sie warten 0,6 Sekunden, und dann wird das nächste Grün automatisch übergeht und es ist eine automatische Animation. Es wird also eine schöne, glatte Animation sein , und die Karte springt wieder an Ort und Stelle, wo sie sein sollte. Es ist also nur eine sehr kleine Sache, die Sie hinzufügen können, um wirklich hinzuzufügen. Atmen Sie Ihre App auf dem gleichen Geist dieses Zustands s ein wenig Leben ein, damit Sie es bemerken werden. Es ist irgendwie alles hier unten unten. Du hast hier ein bisschen eine weiße Lücke, wenn du nach oben gehst. Ich habe es hochgezogen, so dass Sie irgendwie sehen können, dass sehr kleine kleine Schnapp-up-Animation es sich anfühlt, als wäre es interaktiver auf den Stücken. Ich habe das Gleiche getan. Ich habe versucht, ein wenig auf jeder Seite zu tun, nur um irgendwie konsistent zu sein. Und so hier ist die Karte. Es rastet irgendwie ein. Irgendwie haben dies vor Zustand sind der Vor-Zustand genau hier und dann ist es irgendwie an Ort und Stelle, und es verfeinert sich auf ihnen. Die Anwendung sagte, es tauchte nur den endgültigen Standort auf. So sehen Sie die Karte bewegt sich in Richtung dieses endgültigen Ziels So könnten Sie nur einige kleine Dinge sehen , die voran gehen und Ihnen das endgültige Projekt zeigen, das wir bisher haben, sind wir bereit, dies den Benutzern zu präsentieren, um Benutzertests durchzuführen. Und es wird einen neuen Abschnitt im Kurs hinzugefügt werden. Also, wenn es nicht da ist, sollte es sehr bald hier sein. Und wenn es da ist, gehen Sie weiter und fahren Sie mit Teoh, dem Benutzer-Test Wir werden nur einige sehr wenig gehen über kurz Art von dem, was ich mit Benutzer-Tests und irgendwie einige der besten Möglichkeiten, um Ihre App zu testen. Und wenn Sie dann Ihre Tests verwenden, gehen Sie zurück und Sie überarbeiten und einige Revisionen durchführen. Auch die Kunden, die an diesem Revisionsprozess beteiligt sind, bis wir diese letzte Sache fertig machen können , dann sind Sie bereit, es an die Entwicklung zu Code zu senden, und dann können Sie eine Ressource für den Entwickler sein. Onda ließ sie ihre Magie arbeiten, um dies Wirklichkeit werden zu lassen.