Adobe Xd Masterclass: Eine mobile App und ein Website Wireframe entwickeln

1. Kurs-Einführung: Adobe X'd ist eine All-In-One you x you i-Lösung für die Gestaltung von Websites, Mobile, APS und mehr. Das bedeutet, dass Sie Live-Living Drahtrahmen erstellen können, um User Journeys zu entwerfen und zu bearbeiten ,glaubwürdige Mock Ups zu erstellen, um Kunden zu präsentieren oder Ihr Portfolio um mehr User Experience und User Interface Board zu erweitern , . Als digitale kreative Grafik-Designer, unsere Web-Entwickler lernen dieses Tool kann Ihre Marktfähigkeit zu erweitern und hilft Ihnen, sich an die hohe Nachfrage anzupassen , lukrativere Jobs und Sie x Dieses Glas ist ein Teil Grafik-Design, Web Design und UX ey Design, da sie alle notwendigen Disziplinen zusammen integrieren, um glaubwürdige reale Projekte in dieser Klasse zu schaffen, wird ein einfaches Desktop-Website-Layout entwerfen und lernen, wie die Prototyping-Tools verwendet werden, um Interaktionen zwischen allen Konstruktionsberichte. Um eine nahtlose Arbeit wir Franc, die auch gelernt, das Repeat Grid Tool, um die Erstellung komplizierter Layouts zu machen, ein Kinderspiel in der Zwischenstufe dieser Klasse wird eine mobile App erstellen wird über unsere Benutzerpersonas denken zu erstellen zwei einzigartige User Journeys, um ein vollständig gestaltetes und poliertes Layout zu erstellen. Wir werden lernen, die Auto-Animate-Funktionen und andere Übergangs-Funktionen zu erstellen Menü, Slide-out-Effekte und Schaltflächen, die real und authentisch aussehen. Alles, was Sie hier sehen, können Sie bis zum Ende dieser Klasse tun. Begleiten Sie mich also für Lektionen, die Ihren Designgewinn erhöhen und Ihnen die Oberhand in den nächsten Jahren und darüber hinaus geben , während Sie X und Ihr Y zum Eckpfeiler Ihrer Design-Fähigkeiten werden. 2. Erste Schritte: Willkommen bei Adobe X'd. Sie werden sich mit diesem Programm sehr wohl fühlen, wenn Sie bereits mit Photoshopped oder Illustrator oder sogar im Design vertraut sind. Sobald Sie ein Adobe-Produkt kennen, ist es sehr einfach, sich an ein anderes Adobe anzupassen. Stolz im gleichen Fall ist hier, und wenn Sie bereits daran gewöhnt sind, Illustrator kommen zu diesem Programm, alles ist sehr vereinfacht. Sie werden feststellen, dass in Ihrer Symbolleiste nicht viele Werkzeuge vorhanden sind. Sehr wenige Optionen hier auf der rechten Seite, und das war's. Es ist ein sehr einfaches System, und es wird sehr einfach. Toe lernen dies und sehr schnelle Zehenleihgeber, nachdem Sie bereits gelernt haben, vielleicht ein komplexeres Programm, wie in einem Adobe Photoshopped Illustrator. Das wird wie ein Kinderspiel erscheinen. Also wollte ich es. Kann es Ihnen eine kurze kleine Tour mit etwas geben, das ich bereits für eine Marke erstellt habe, die wir an einer früheren Klasse gearbeitet haben und verringern genannt Parson Dynamics, die ein Industriekonglomerat ist. Also habe ich, was du siehst, verschiedene Kunsttafel. Also habe ich die Haupt-Homepage, die hier in der linken Spalte erscheinen wird, und ich konnte neue Kunstboards hinzufügen, die alle Unterkategorien oder die anderen Webseiten auf dieser Website sein würden . Also haben Sie zwei Hauptfenster in der Dhobi X'd Sie haben das Design-Fenster, die in gerade jetzt waren , und dies wird zeigen Dies ist, wo wir zusammen sind entworfen, um eine Typografie zusammenzustellen , wurde unsere Spalten und gehen wir voran und richten alles grafisch individuell auf. , Und dann haben Sie, was man den Prototyp-Abschnitt nennt. So wechseln Sie einfach in den Prototyp-Modus, indem Sie übergehen und zum Prototyp wechseln. Und so verbinden wir alle unsere verschiedenen Kunsttafeln miteinander, so dass wir einen Live-Drahtrahmen herstellen können . Also zeige ich dir ein Beispiel. Hier oben ist ein Play-Knopf, also zeige ich Ihnen irgendwie, was all diese verbundenen Verbindungen Luft tun. Also diese Homepage und ich werde Ihnen zeigen, wie wir ein Web, ein wenig Web-Design zusammen zu lernen, das Programm wird zeigen, dass Sie einen Link alles nach oben hatte , und es ist sehr einfach. Es sieht kompliziert aus, aber lassen Sie sich nicht einschüchtern. Dies ist eines der leichteren Programme, die ich in den letzten Jahren gelernt habe. Also all diese verschiedenen Elemente ein Link. Diese Option hat also den ganzen Weg mit dieser Option verknüpft. Wenn der Benutzer also auf eine beliebige Stelle auf dieser Schaltfläche klickt, gehen sie zu dieser Seite. Dasselbe mit Option zwei. Option zwei wird bis auf diese Seite verweilen, und Option drei wird auf diese Seite gehen und der Grund, warum wir in der Lage sind, Dinge miteinander zu verknüpfen, so dass wir einen Lebensunterhalt verdienen könnten, atmende Webdraht gebraten. Wir gehen weiter und klicken auf den Play-Button. Sie werden feststellen, dass der Play-Button genau hier in der oberen rechten Ecke war. Wir werden unseren Prototyp in der Vorschau sehen. Wow. Wie ich schon sagte, bevor all diese Luft miteinander verbunden ist. Also gehe ich weiter und klicke auf Option eins. James könnte direkt auf die Länge gehen, die es mit dem Kunstboard verknüpft ist, mit dem ich auf den Home-Button klicken kann und das ist auch verlinkt Punkte zurück auf die Homepage. Dasselbe für Option zwei, und es könnte tun, um verschiedene Übergänge zu sieben. So bemerken Sie, wie ich auf Option geklickt habe, um es gleitet schön von links nach rechts, und Sie können verschiedene Übergänge einrichten, anstatt nur zu erscheinen, die schöne animierte Art von glattem Effekt hat . Dasselbe mit Option drei, und das könnte von oben nach unten gehen. Das ist es, was wir gemeinsam erschaffen werden, was alles von Grund auf neu geschaffen hat. Und wir werden Ihnen zeigen, wie Sie mit Typografie arbeiten, wie Sie Ihre Assets einstellen, die wirklich wichtig sind. Als nächstes setzt er Ihre Assets so ein, dass Sie nicht immer wieder dasselbe Asset neu erstellen oder immer wieder zusammenstellen müssen. Und ich kann Ihnen zeigen, wie ihre globale, um uns beginnen sogar ein neues Dokument zu öffnen und loszulegen . Wir gehen die Akte. Wir beginnen einfach ein neues Dokument. Wir könnten das mit jeder Größe machen, aber ich werde eine typische 9 20 x 10 80 Webseite machen, und ich werde Ihnen später zeigen, wie wir dies sehr leicht an einen kleineren Bildschirm anpassen können. Aber wir werden weitermachen und unser Design basierend auf einer 9 20 x 10 80 Websites machen. Gehen wir weiter und klicken Sie auf diese bestimmte Größe, und es wird sich öffnen. Also hat es diese erste Kunsttafel für uns geschaffen, und wir werden viele Kunsttafeln erstellen, um in der Lage zu sein, diesen Kunstrahmen zu modifizieren , um einfach auf den Namen zu klicken, und Sie können ihn verschieben und dann können Sie verkleinern . Ich habe mein Trackpad auf meinem Laptop. Ich bin in der Lage zu zoomen, angekündigt, in der Lage zu sein, die Größe zu bekommen. Und das wird sehr hilfreich sein, denn es gibt einige Web-Designs oder einige mobile App Set wird 20 bis 30 manchmal sogar 50 verschiedene Kunstboards haben, alle Übergang und Verknüpfung auf unterschiedliche Weise. Es ist also sehr wichtig, sich mit mehreren Art-Boards und einem organisierten System vertraut zu machen, wenn wir anfangen, mehrere Art-Boards zu erstellen. Also hier ist unser erstes Kunstbrett. Dies könnten Ihre Homepages sein. Wir werden wirklich das Gefühl haben, herauszufinden, wie wir unsere Marke Parson Dynamics an das Web anpassen können. Also fangen wir ganz oben an. Ich mag es, an der Spitze zu entwerfen und mich irgendwie nach unten zu arbeiten, also beginnt es mit dem wichtigsten Element, das irgendwie unsere Knave-Bar sein wird. Wir gehen weiter und schnappen uns ein Formwerkzeug. Wir werden Haut sind ein Rechteck-Werkzeug. Sie haben auch ein Kreiswerkzeug. Und wenn Sie mit Illustrator vertraut sind, wird das ein Kinderspiel sein. Also nur ein Kopf schaffen eine einfache Bar, die unser Nab unser und ich hier drüben auf der rechten Seite sein wird, das ist, wo alle Arten von Ihren Immobilien voran gehen und doppelklicken. Ich bin Phil, und ich kann diese Farbe ändern. Also möchte ich in der Lage sein, einige meiner Hex-Farben von meiner Marke, die wir entwickelt haben, anzupassen. Also gehe ich zurück in Illustrator arbeitete kürzlich an einem Poster und ich werde ein paar dieser Farben schnappen . Also hier ist ein paar Art zurück in die Zeit. Hier ist ein bisschen, ein bisschen ein Chaos, aber ich muss nur einige dieser Farben anpassen. Hier ist eine Art von einem gelben auf diesem Poster gefunden, das wir irgendwie für die Marke mochten. Und ich werde nur auf Mäuse doppelklicken, die Illustrator anschauen und ich werde diesen Hex-Code schnappen . Wir werden es in X D stecken. Du wirst unseren Hex-Code ausfüllen und ausfüllen. Das wird gelb, und ich werde nur noch eine Schachtel zeichnen. Also können wir unseren violetten Pop hier reinlegen, unsere violette Farbe das Booklet dieser Uhr packen und sie ausfüllen und auflegen. Also jetzt haben wir unsere zwei Farben. Das Tolle daran ist, dass wir diese Farben und unser Asset-Panel speichern können, das hier unten links sein wird. Sie werden Assets sehen, wir werden auf Assets klicken und es wird ein kleines Pop-Out-Menü auf der rechten Seite geben. Wir werden diese Farben zu unserem Vermögen hinzufügen. Also werden wir nur eine Farbe markieren, die mit der rechten Maustaste klicken und Farbe Toe Assets hinzufügen. Es wurde hinzugefügt, lila Hex-Code und jetzt werden wir das gleiche mit unserer gelben orange Farbe tun , und wir werden diese Farbe zu Assets hinzufügen. Also, wenn ich jetzt eine Form zeichne, kann ich zu meinem Asset-Panel hier unten links gehen, und ich werde in der Lage sein, jede der Farben zu erinnern, die ich brauche. Also gehen Kopf und Einrichten Ihrer Schriftarten und alles, was wir in Ihrem Asset-Panel brauchen hilft wirklich, den Prozess viel schneller zu machen, wenn wir viele verschiedene Seiten machen , so dass Sie sehen können, dass wir unsere Farben Assets gesetzt haben nach oben. Aber es gibt auch Charakterstile. Sie könnten eine bestimmte Überschrift Schriftart verwenden. Wenn Sie diese bestimmte Größe und Schriftart mögen, können Sie die Zeichenstile speichern und daran erinnern, dass jederzeit, was großartig ist, wenn Sie alle Ihre Kopfzeilen einrichten und Ihre H ein h zwei h drei tun möchten. Wenn er jemals CSS getan hat. Sie werden mit diesen Begriffen und Symbolen sehr vertraut sein. Sie können Symbole und Symbole zeichnen und in der Lage sein, diese Symbole zu speichern und diese auf alle Ihre Kunsttafeln zu laden . Und was großartig ist, ist ihre globale. Wenn ich mich also ändere, wenn ich ein kleines Symbol für ein Haus mache und mich entschlossen habe, dieses Symbol zu ändern, wird es auf all den verschiedenen Kunsttafeln ändern. Und wenn Sie 50 verschiedene Kunsttafeln haben, ist es wirklich schön, diese globale Stilisierung zu haben. Wir müssen nicht jedes Symbol immer wieder ändern, und so werden wir das tun, während wir irgendwie diese Website beenden. Also lasst uns voran gehen und diesen stilisierten Arm bekommen, anstatt einen gelben Balken zu machen, der einen violetten Balken macht. Also in meinem Vermögen, Panelisten, die klein hier unten links sind, werden voran gehen und auf lila klicken, um das zu einem violetten Balken zu machen . Und ich möchte meine Logo-Zehe hineinbringen, sie in der Mitte oder in der linken Seite haben. Hier werden wir also ein paar ihrer Vermögenswerte einbringen. Das Logo, eine transparente PNG-Logodatei wäre also ein Vorteil. Und so bin ich Illustrator und wir haben hier ein lokales Design für unser Parsons-Logo gemacht. Und ich habe dies bereits in zwei verschiedenen Kunstboards in Adobe Illustrator. Ich habe eine Schwarz-Weiß-Version, aber ich bin ausgeschaltet. Also habe ich einen in einer Art grau und dann eins und weiß. Also brauche ich den weißen, um auf einen Farbbalken zu gehen. Also alles, was ich getan habe, ist nur zu exportieren, und ich werde diese als transparentes PNG mit dem Typ dieses Logo-Top bekommen. Wir könnten ein höheres PP machen. Ich Das ist fremd. Höhere Auflösung. Dies wird noch nicht im Web sein, aber irgendwann müssen wir über die Dateigröße nachdenken und kein PNG zu hoch und Dateigröße machen, damit wir sicherstellen können, dass wir keine super hohen Ladezeiten haben. Aber im Moment in der Konzeption im Designprozess, es ist OK, wir werden voran gehen und diesen Vermögenswert einbringen. Also werde ich einfach meinen Finder aufsuchen. Wir gehen auf den Desktop und ziehen diese Typen rein. Also hier ist unsere 1. 1, um voranzukommen, ihn viel kleiner zu machen und dann unser weißes einzubringen. Sieht so aus, als müsste ich es nacheinander machen. Los, mach ihn kleiner und geh weiter. Richtig. Klicken Sie auf und speichern Sie diese in meinen Assets. Also werde ich mit der rechten Maustaste klicken und ein Symbol machen. Also, das wird auf ihrem Asset-Panel erscheinen jetzt ist Logo. Ich klicke mit der rechten Maustaste und mache ein Symbol. Also diese Luft brachte nun seine Symbole und ich konnte dieses Logo schwarz machen und ich konnte dieses lokale Weiß machen . Ich kann mich jederzeit an diese Logos erinnern, also brauchen wir diese im Moment nicht wirklich. Ich könnte das rausbringen, und ich habe mein weißes Logo. Ich könnte das Schwarze herausbringen, wenn ich es hier niederlegen müsste, damit diese Vermögenswerte jederzeit zurückgerufen werden können . Also, jetzt werde ich doppelklicken und irgendwie die richtige Größe bekommen. Dies ist Wir können hineinzoomen und wirklich eine Vorstellung von Pixelgrößen bekommen. Siehst du also, wie ich das herumgeschickt habe? Die Smart Guides Art von Kick in, unerträglich, um den Abstand zu sehen 8 16 Das ist, wie viele Pixel sind am linken Rand und am rechten Rand? Es ist 853, so kann ich voran gehen und Art von Zentrum, dass auf vielleicht beide drei tun. Und hier muss ich möglicherweise mein kleines Bild ein wenig ändern, um sicherzustellen, dass es perfekt läuft . Es gibt irgendwie unsere obere Bar. Wir werden uns mehr darauf konzentrieren, ein Layout fertigzustellen. Wir beschränkten uns, um zwei Details später zu finden, so dass ich meine Tastatur-Tasten von jedem ein Schub es nur ein Pixel zu Pixel oder zwei verwenden konnte . Ich kann meine Tastatur, die Pfeiltasten nehmen und es dort oben schlagen. Sie werden die verschiedenen Pixel zwischen den Abständen hier bemerken, und Sie sind in der Lage, einige kleine Anpassungen zu tun, die versuchen sollen, es Art von Snaps ein wenig zu ziehen . Sie sind nicht in der Lage, die gleiche Präzision 3. Hero-Bild: Also zoomen Sie zurück und ich möchte irgendwie eine Vorstellung davon bekommen, wie dick ich meine obere Navigationsleiste sein soll. Wenn Sie also jemals winzige Änderungen vornehmen möchten, anstatt herauszufinden, wo ein bestimmtes Pixel ist, indem Sie es ziehen, gehen Sie hier zum Eigenschaftenfenster und ich bin in der Lage, diese 100 Pixel hoch zu machen und ein wenig genauer zu werden Platzierung. Okay, jetzt werden wir irgendwie machen, dass unser Heldenbild irgendwie unsere wichtigste Art von Banner oder Spinne , die auf unserer Homepage sein wird. Also habe ich hier ein neues Bild, das ich verwenden möchte und gehe zu Downloads. Und geh weiter, erinnere dich an das Bild und nur Drachen hier drin, genau wie jeder andere Vermögenswert. In Ordnung, also hier ist mein Heldenbild. Ich werde weitermachen, das als vollständiges Foto hineinziehen, und eine Sache, die wir tun konnten, zog es hinein, und wir könnten es auf diese Weise ändern, indem wir darauf doppelklicken, beschneiden und die richtige Größe herausfinden können. Aber ich habe noch etwas Besseres zu tun. Gehen Sie los und löschen Sie das, und wir werden eine Box zeichnen. Wir zeichnen im Grunde, wohin wir wollen, dass das gehen kann. Jetzt, wo wir eine Box haben, werden wir in der Lage sein, unser Foto reinzuziehen und es wird die Box perfekt befüllen. Du gehst rüber und bringst wieder unser Heldenbild ein. Ziehen Sie einfach es endet, werde schön einspringen und so können wir Anpassungen vornehmen, indem Sie darauf doppelklicken und es nach oben schieben , nach unten schieben, was bereits auf das Maximum ist. Aber wir wären in der Lage, es weiter zu schaffen und zu vergrößern, wenn wir es wollten. Wir sind fertig. Klicken Sie auf die Schaltfläche. Ich werde versuchen, die richtige Platzierung für unser Foto zu finden. Und wieder einmal haben wir auch bestimmte Größen eingegrenzt. Also wollen wir vielleicht etwas Text oben auf dem Bild hinzufügen, haben einige Live-Text, der angezeigt wird. Also werde ich voran gehen und das Typwerkzeug schnappen. Wir machen einfach eine Kiste, und ich mache Ah, mal sehen, was gehen unsere Taglines? Schnappen Sie sich unseren Slogan von unserem Poster. Okay, Neugestaltung der Industrie. Also das ist alles, was der Slogan ist Pop zurück in X'd Industrie neu gestaltet Go und machen Sie diese Begrenzungsbox ein wenig größer und irgendwie verschoben. Nehmen Sie unser Pfeilwerkzeug Art von verschickt es oben. Wir werden doppelklicken und das zu einem weißen Phil machen, und Sie haben auch hier eine Schattenoption. Wenn Sie also das Gefühl haben, dass es wirklich nicht herauskommt, klicken Sie auf die Schattenoption, um einen hellen Schatten hinzuzufügen, natürlich können wir den Abstand dieses Schattens ändern. Und auch die Unschärfe hier ist für Blur, und wir können es auch stärker machen. Wir doppelklicken nur Art der Schattenart der Transparenz Box dort, und wir können es stärker machen, so dass es 16% zu sparen. Wir könnten es 33% schaffen. Sie können auch die Farbe des Schlagschattens wie jedes andere Adobe-Programm ändern. Nehmen wir an, wir wollten, dass das zusammenbrach und zentriert ausgerichtet ist. Wir könnten dies tun, indem wir diesen Rahmen einfach in den Begrenzungsrahmen ziehen, ihn ein wenig größer machen und dann in unserem Eigenschaftenfenster direkt hier in unserem Texteigenschaftenfenster zur Mitte gehen . Und wir könnten auch die Lücke schließen, indem wir zwischen den verschiedenen Linien des Typs lassen , also wird es genau hier in diesem Bereich geschehen. Also lassen Sie uns sagen, es ist 1 41 kann geschlossen werden. Die Lücke. So fühlt es sich einfach ein wenig stärker und wie zusammen Einheit, genau wie mit Layout-Design. Ich mache die gleichen Grundlagen des Drucklayout-Designs, die ich mit Webdesign bin darüber nachzudenken, wie beide sehr ähnlich sind. So wie bei jedem anderen Objekt kann ich mein Foto hervorheben und ein wenig Schlagschatten hinzufügen, damit Sie ein wenig Ah sehen können , schönen Schlagschatten, der dort hinzugefügt wurde, ich werde gehen und eine kleine Grenze abziehen. Es sieht so aus, als gäbe es einen kleinen dünnen Rand um das Foto, ich gerade angeklickt und entfernt habe. Also, jetzt sind wir zu tun drei kleine Boxen, die kommen und sind und in der Lage, mit anderen Unterseiten verlinkt werden . Wir werden auch Menüpunkte oben erscheinen lassen. Aber wir werden eine Art sehr einfaches Web-Design machen, nur um loszulegen. Ich werde dir einen wirklich coolen Trick zeigen. Wir werden also eine Box genau so entwickeln, wie wir sie wollen, und wir können das Wiederholungsraster-Tool verwenden, um das immer und immer wieder so viel zu replizieren wie wir möchten. Also werden wir nur eine Schachtel erstellen. Aber wir werden alle Boxen danach sehr, sehr leicht erstellen können. Also gehen Sie weiter und greifen Sie unsere quadratischen Werkzeuge, machen Sie eine einfache Form, und ich kann abgerundete Ecken hinzufügen. Also kämpfe gegen die Art von Zoom hinein. Ich greife den Kreisbereich hier in der Ecke und ziehe ihn nach unten, um beliebige Typen zu erstellen. Wo haben Sie eine perfekte Pillenform zu machen? Oder kann einfach zu einer sehr, sehr leichten Kurve, in der ich denke, das war früher in, als er diesen wirklich scharfen Caracas Apfel hatte, machte diese wirklich beliebte Art dieser schönen, glatten, glatten, abgeschrägten abgerundeten Kante. Aber im Laufe der Zeit haben wir etwas mehr von einer schärferen Kurve angepasst, wo sie fast kaum zu sehen sind . Das ist etwas mehr, was heutzutage im Trend steht. Also könnte ich das zu einer Füllung machen, oder ich könnte ein bisschen Schatten machen, einen Schatten haben. Ich will keine Grenze, also muss ich die Grenze entclipsen sehen, wie immer noch ein wenig Schlagschatten hat und nur ein bisschen eine Abschrägung der Ecke abgerundeten Ecke hat. Also, jetzt werden wir vielleicht ein Bild oben machen und vielleicht einen Text, um sie wissen zu lassen , worauf die nächste Webseite verlinken wird. Also lassen Sie uns voran und erstellen Sie eine Box, die sein wird, wo unser Foto hineingezogen wird und ich möchte es schnell Trick zeigen. Moment habe ich alle Ecken zur gleichen Zeit gekrümmt, und ich werde das zu einer anderen Farbe machen, damit du das in Aktion sehen kannst. Lassen Sie uns es also rot machen, damit Sie sehen können, wie alle es gleichzeitig tun. Aber was ist, wenn ich nur eine als abgerundete Ecke will? Ich werde die Optionstaste oder die alte Taste gedrückt halten, wenn ich auf die, die ich mehr abgerundet sein möchte , und ich werde darauf klicken, und ich könnte es tun, ist unabhängige Formen. Also, wenn ich diesen Mais um ihn und diese Ecke machen möchte, halte ich nur die Option Orochi die ganze Zeit gedrückt, die diese einfach einzeln bearbeiten könnte . Also, jetzt habe ich irgendwie eine interessante Typform, aber ich werde diese rundherum halten und nur um es willen, also werde ich auf diese Art von Befehl Z Befehl klicken, gehen Sie zurück in meine Geschichte zurück, wo es war weiß. Lassen Sie uns voran und fügen Sie unser Bild hinzu. Ich werde einen kleinen Platzhalter für nach Bild hinzufügen und so werde ich dies zu einer anderen Farbe machen , damit ich irgendwie sehen kann, was los ist, und ich möchte, dass diese Ecke mit der Box dahinter übereinstimmt. Also werde ich einfach den Bolzen oder die Optionstaste gedrückt halten, weil ich diese obere rechte Ecke manipulieren will und ich werde die Ecke passen. Wir brauchen keine Grenze. Also nur eine Verbindung, die die alle Tasten gedrückt halten, stimmte mit diesem Hintergrund überein. Wird das hier sein, wo unser Foto wohnen wird und in der Lage sein, das runter zu ziehen und uns einen Fotodrachen einzuziehen? Diese Leute reden aus der Branche und da geht's. Ich möchte das Zuschneiden obskure DoubleClick ändern und ich werde in der Lage sein, das Zuschneiden auf diese Weise zu ändern . 4. Ränder wiederkehren: Fügen wir ein weiteres Textfeld hinzu. Schnappen Sie sich das Textwerkzeug, gehen Sie voran und tippen Sie ein. Lassen Sie uns einfach Option eins für jetzt machen. Wir können später Details darüber herausfinden, was wir sagen wollen. Also machen wir einfach einen Phil und denken Sie daran, dass wir unsere Farbe bereits gerettet haben. Also, wenn wir zu unseren Globus-Styles gehen, die hier unten links ist, werden wir in der Lage sein, sich auf orange Option zu erinnern oder können eine lila Optionen zu tun. Lassen Sie uns unsere gelb-orange Farbe machen und dies auf Option eins bringen. Muss das etwas kleiner machen. Wir gehen hier rüber zu unserem Textfeld und machen die 55. Das ist ziemlich groß. Lassen Sie uns also machen, dass dies sich weiter anpasst, bis wir die richtige Größe finden können. Und wenn es uns gut geht, können wir sparen. Dies ist eine globale Stile. Nun, also gehen wir zu unseren Stilen. Wir können mit der rechten Maustaste klicken und Zeichen Stil Toe Assets hinzufügen. Ich werde nur diesen Charakterstil hinzufügen. Also, wenn ich das jemals wieder herausbringen will, kann ich es leicht mit der gleichen Größe und der gleichen Farbe herausbringen. Lassen Sie uns das ein bisschen länger machen und fügen wir noch einen kleinen Text, Kopie oder einen Absatz hinzu zu unseren Artikeln hinzu. Also werden wir weitermachen und das Textwerkzeug herausbringen, aber wir werden klicken und ziehen und ein Absatz-Textfeld erstellen. Ich hole mir einfach einen generischen Text, den ich hier habe, und kopiere ihn und füge ihn ein. Stellen Sie sicher, dass meine Textwerkzeuge wieder herauskommen. Fügen Sie es ein. Wir müssen das erheblich ändern, um unsere Körperkopie zu sein. Ich werde nur alles hervorheben, was ich zu meinem globalen Star meiner Vermögensgegenstände gehe und auf mein Grau klicke und diese Eisenbahn machen. Das haben wir in unserem Poster für unsere Körperkopien benutzt. Wir werden das für eine Absatzkopie verwenden. Lassen Sie uns es deutlich kleiner machen, vielleicht 14 ar 15 in diesem Fall. Und machen wir es zu einem regelmäßigen Warten. Sind ein Medium in diesem Fall Castaignos Art kommen langsam zusammen. Also, jetzt werden wir die Ausrichtung ändern. Wir könnten eine Mittelausrichtung durchführen, oder wir können nach oben gehen und eine Linksausrichtung durchführen und wir müssen das Verlassen oder Lücken zwischen den Abständen ändern . Also werde ich hier hier in dieser Gegend gehen und voran gehen und ausprobieren 18 Sehen Sie, wie das funktioniert . Sie können es ein wenig mehr erweitern, um ein paar schöne Abstände zu haben, aber nicht zu viel. Das funktioniert also wie jedes andere Textfeld. Und Designer oder Illustrator könnte voran gehen und das hier unter. Ich will es nicht so lange schaffen. Also werde ich nur zwei einfache Sätze haben. Gerade genug, um etwas weiter zu erklären, was der Benutzer tun muss oder was hier drin sein wird , wenn der Benutzer auf diesen Button klickt. Ich denke, ich werde hier eine Mittelausrichtung machen, weil ich nicht viel Text habe. Also lassen Sie uns die Mittelausrichtung zentrieren Achsen tun. Schön. Wenn Sie kleinere Textfelder haben, je größer Ihr Textfeld wird, desto mehr linksbündige Ausrichtung neigt dazu, etwas besser zu funktionieren. Also werde ich das ändern, damit ich keine Waise habe. Es heißt Waise. Es ist alles allein. Nur ein Wort. Sieht seltsam aus. Das wollen wir nicht. Wir wollen die Lücke offenlegen, damit wir keine Waise haben, und wir können auch Ihre Pixel ändern geschieht automatisch, wenn ich ziehe. Lassen Sie Ihre intelligenten Guides treten in ihrer Mitteilung. Art von Spross farbige blaue Linie Das bedeutet, dass das Zentrum mit der weißen Box ausgerichtet sein wird . Dasselbe könnte ich voran gehen und das ziehen, bis ich eine Mittenausrichtung bekommen konnte. Ich bin gut zu gehen. Also lassen Sie mich weitermachen und alles über diese Box ändern, denn sobald wir anfangen ,es zu wiederholen , werden wir viele verschiedene Versionen dieser Box erstellen. Also lasst uns diese Box perfekt machen. Bevor wir beginnen, es zu wiederholen offenbart die Lücke. Sie bemerken, wie das Foto automatisch angepasst wird, wenn wir es in einer anderen Größe machen . Also werde ich verkleinern, damit ich eine gute Vorstellung von dem Layout bekommen kann, damit wir sogar vier über den Boden machen können. Die Lektionen machen drei vorerst. Und ich denke, ich werde das etwas weißer erweitern können. Wir müssen über mobile Optionen nachdenken. Wenn dies in der mobilen Option zusammenbricht, haben wir ein ansprechendes Design. Das wird zuerst gezeigt, und es wird gestapelt werden, damit du die 2. 1 hier in der 3. 1 hier haben könntest. Deswegen. Ich habe kein Bild dafür. Es sieht auf einem Desktop ein wenig redundant aus, aber wenn Sie eine mobile Ansicht haben, dieses Bild zusammen mit dem Link eine Art Hilfe, tut dieses Bild zusammen mit dem Link eine Art Hilfe,anstatt nur ein Symbol zu haben. Aber ja, wir könnten benutzerdefinierte Symbole anstelle eines Fotos machen. Wir müssen keine Fotos haben, aber nur für diesen Fall tun wir. Also hier ist der coole Trick. Es heißt „Repeat Grid“. Also werde ich voran gehen und das als eine Einheit zusammenfassen. Also habe ich gerade mit der rechten Maustaste geklickt und ich habe es gruppiert, und ich muss voran gehen und auf dieses Wiederholungsraster klicken hier in der oberen rechten Spalte. Jetzt wird es solche Bars haben, die ich erweitern könnte. Also werde ich es nach rechts erweitern und Sie werden feststellen, dass es immer wieder dieselbe Box wiederholt . Und du kannst dich weitermachen und 45 machen, wenn du willst, aber wir werden drei machen. Und was großartig daran ist, dass ich zu dieser Spalte gehen kann und ich in der Lage sein, den Pixelraum zwischen der Spalte zu ändern , um es genau richtig zu bekommen, so dass wir 90 Pixel zwischen den Spalten haben könnten und das Gleiche gilt hier unten, ich kann tatsächlich eine Rose machen. Ich könnte viele, viele Reihen machen . Das ist also so einfach in der Lage zu sein, mobile App-Konzepte zu machen, wenn Sie vielleicht haben , ja, , ja,Sie machen eine mobile App und Sie haben eine Menge Daten, vielleicht Benutzerdaten, die Sie auflisten und Sie tun es in einer schönen, stilisierten Box. Wir können Hunderte dieser Dinge sehr einfach mit diesem Tool erstellen. Also wollen wir nur eine Reihe haben, also klicken Sie einfach auf eine Art von Größe es schlimmer, eine Straße und wir sind bereit zu gehen. Im Moment ist diese Bewegung eine Einheit. Also lassen Sie uns sagen, ich möchte mit der Aktualisierung einiger Objekte hier beginnen. Wie kann ich das irgendwie nicht verknüpfen? Wir werden mit der rechten Maustaste klicken und in eine neue Gruppe von Gittern arbeiten. Jetzt wird es wieder als einzelne Elemente behandelt werden. Nicht mehr miteinander verbunden, wie sie waren, als wir die Wiederholungsraster-Option eingeschaltet hatten. Also in unserem wird es in der Lage sein, Stoppeln klicken und unsere Optionen zu ändern. Also Option zwei, eine Option drei Und eine Sache, die ich tun möchte, ich speichere hier meinen Zeichenstil für meine Option Eine Überschrift, aber ich möchte in der Lage sein, meine Absatzkopie zu sagen . Also werde ich das hervorheben. Sehen Sie, ob ich voran und wählen Sie das Feld Rechtsklick und Sie gehen, um Zeichenstile zu Assets hinzufügen . Und jetzt habe ich meine Paragraphexemplar. Und dann mache ich das zu meinem Kopf. Dies könnte wahrscheinlich H zwei Header sein, um wahrscheinlich eine größere Größe zu haben, was dies hier oben sein wird. Es ist nur rechts Klicken Sie darauf schnell wieder und klicken Sie mit der rechten Maustaste und gehen Sie sehen Zeichenstile zu Assets hinzufügen . Das könnte unser H sein. Dies wird unsere größte Header-Größe sein und dann werden die gelben H zwei irgendwie unsere nächste Größe nach unten sein und dann haben wir ein h drei n h vier Wir haben jemals CSS-Codierung gemacht. Du wirst alles darüber wissen. Also würde ich gerne die Fotos auf all diesen ändern, damit wir einfach weitermachen und unseren Finder herausbringen können. Du gehst und findest das richtige Foto für diese Just Dragon in. Wenn ich Ihr Zuschneiden ändern möchte, doppelklicke ich und ich kann irgendwie ein bisschen mehr zoomen. Meine Fotos 5. Den Footer erstellen: also machen wir mobile App oder Web-App. Mock ups sind digitale Produkt-Mock Ups für Kunden. Wir wollen es auf eine kostengünstige Art und Weise tun. Wir versuchen nur, die Idee darüber zu bekommen, wie die Website aussehen soll und wie sie fließt und wie sie mit den Zieldemografien und unseren von uns entwickelten Nutzer-Personas übereinstimmt. Wir wollen wirklich sicherstellen, dass die Website gut aussieht, aber wir wollen es rechtzeitig tun. Wir wollen nicht eine ganze Menge Geld im Konzept ausgeben, weil wir das noch entwickeln müssen . Und manchmal bedeutet das, einen Entwickler zu engagieren, um dies zu programmieren und dies Wirklichkeit werden zu lassen, es sei denn, wir sind auch wirklich gut darin . Aber es wird nicht immer von uns erwartet, zu entwerfen und zu konzipieren, sondern auch zu codieren. Es ist ein verrückter Start. Wir müssen uns spezialisieren, aber jedenfalls, also müssen wir die Dinge rechtzeitig tun. Also werde ich versuchen, Ihnen ein paar Tricks des Handels zu zeigen, um das Konzept in Bearbeitung zu beschleunigen . Also, als wir hierher zurückgingen, muss ich in einen einfachen Kreis gehen, die Shift gedrückt halten, um einen perfekten Kreis zu bilden. Wir werden auf Wiederholungsraster klicken. Ich werde nur drei machen. Aber genau das haben wir hier unten getan. Aber ich werde dir einen kleinen Trick zeigen. Anstatt jedes Foto wie ich zu ziehen, könnten Sie den Prozess ein wenig beschleunigen, wenn Sie die Fotos, die Sie laden möchten, bereits kennen und in einer bestimmten Reihenfolge. Also mache ich drei Fotos, die in meinem Finder hervorgehoben wurden, und ich schreibe sie in diesen ersten Kreis, und es wird automatisch mit allen von ihnen bevölkert. Also, das funktioniert wirklich gut, wenn Sie irgendwie einige generische Profilaufnahmen machen wollen, also haben Sie vielleicht einige Headshots oder Personenaufnahmen und Sie haben vielleicht 20 kleine Kreise, die sie das Wiederholungsraster erstellt hat. Sie könnten Drachen 20 Art von generischen alle verschiedenen Headshots ziehen ihn dort hinein, und sie werden das ganze eine Reihe von 20 bevölkern, die wirklich nützlich sein wird, wenn Sie tun mobile App-Entwicklung. Würden Sie viele Benutzer haben? Also nur ein kleiner Trick des Handels. Jetzt ist es Zeit, eine einfache Fußzeile zu machen. Also im Moment stecken wir irgendwie mit dieser 9 20 Art von Größe fest, aber wir wissen, dass es etwas gibt, das unter der Falte genannt wird. Wenn Sie also eine Webseite laden, werden sie das sehen. Aber es gibt auch Möglichkeiten, wie sie nach unten scrollen können. Und Seymour Also, wie konstruieren wir tiefer als das, wenn wir schon am Abschlag sind? Wir gehen weiter und klicken auf unseren Hauptnamen hier für Kunsttafel. Wir gehen hier runter zum Scrollen, und wir werden sicherstellen, dass es vertikal ist. Und so wird es uns erlauben, das herunterzuziehen, damit wir Dinge unter der Falte tun können. Das ist also, was die Leute mit dem Mund scrollen müssen, um zu sehen. Also weniger wichtige Sachen, wirklich. Aber wir werden die Fußzeile machen. Das wird also der Punkt sein, an dem, wenn sie in ihren Browser geladen haben, das die Zeile ist, die es endet. Wir machen eine einfache Fußzeile. Gehen wir weiter und wir können einfach die Bar schnappen. Ich kann Alt für Option halten. Geh weiter und kopiere das. Jetzt können wir es zu einer einfarbigen Farbe machen. Wir könnten es sogar machen, dass gelbe Farbe, bestellen Sie unsere Stile Panel und machen es gelb? Es hängt davon ab. Ich will einen. Ich denke, es sah wahrscheinlich ein wenig besser aus, da wir ein hellgrau machen konnten, aber ich denke, ein Lila würde schön aussehen. Also, jetzt, da wir Art von unseren Assets Panel geöffnet haben, klicken wir hier, um unsere Assets Panel zu bekommen. Wir haben unser Logo und schwarz-weiß. Lass uns weitermachen, mit unserem weißen Logo bevölkern. Lassen Sie es hier unten unten, wenn wir in der Lage sein werden, Informationen hinzuzufügen oder Kontakt aufzunehmen. Also, jetzt, da wir unsere Zeichenstile viel schneller gehen, lassen Sie uns voran und bringen eine Absatzkopie. Also werden wir fortfahren und unser Textfeld hervorheben. Wir werden weitermachen und unseren Fuß oder unsere Säulen aufstellen. Scheint wie ein Typ in einer Art von generischem Text. Text hier, Text hier, Text hier, Text hier ist nur irgendwie ein paar Links. Ich gehe, ich habe meine Absatzformate. Wir werden voran gehen und auf den Absatzstil klicken, aber das wird über dunkle Hintergründe sein. Wir müssen hier eine andere Art von Absatzstil festlegen, also werde ich gehen, um zu füllen, gehen und das einzurichten. Wie ich es mag, könnte hier verschiedene Spalten tun. Wir werden unsere Pfeiltasten mit ziehen einige dieser Elemente bekommen, und wir können das wahrscheinlich ein bisschen größer machen. Also lassen Sie uns das 18 Punkt und Größe machen. Lassen Sie uns die Lücke hier ändern, also haben wir ein bisschen eine größere Lücke. Es ist 2 30 Es schiebt ein wenig weiter auf 40, so könnte dies Ihre Art von unserem Link-Text sein. Also lasst uns das machen und das Feld tiefer ziehen. Machen wir das zu einem Link, also machen wir es zu einem Medium. Wir machen es metallisch und lassen uns ein gelbes Gefühl machen, um unsere Farben zu erreichen und Gelb zu machen. Und sobald wir uns hier verlinken lassen, wird es auf diesen Link doppelklicken. Ein Link zu Blink drei Fast tun einen Link für Okay, so jetzt können wir mit der rechten Maustaste klicken und wir können, dass Zeichenstile Toe Assets hinzufügen und jetzt haben wir einen anderen Stop-Charakter-Stil. Lassen Sie uns doppelklicken Sie dies in ah, Links dunklen Hintergrund. Dies wird Ihre Links für einen dunklen Hintergrund sein und dass wir etwas Cooles tun könnten, das ist Wiederholungsraster, und wir können weiterhin diese replizieren, um mehrere Spalten zu machen. Das sind viele Links, aber wir machen nur ein Beispiel. Vielleicht lassen wir es uns tun. Tut das für Ah, lassen Sie uns drei Reihen direkt dort machen. Okay, wir könnten auch hier einen Kopfzeilentext machen , also lasst uns voran gehen und auf Gruppe dieses Objekt, lasst uns diese Option greifen. Gräber konnten die Optionstaste gedrückt halten und konnten diesen kleinen Header hier unten bekommen. Und lassen Sie uns das etwas kleiner machen. Also lass uns das 25 machen. Wir könnten das auch weiß machen, oder ich mag es. Ich mag es irgendwie gelb so gut. Ich mache die Wiederholung wieder großartig, erspart uns etwas Zeit. Lass uns drei machen und dann können wir hineinzoomen und die Säulen weiter machen , bis sie nett sind. Und trotzdem, sehen Sie, wie schnell wir das tun können. Ein Illustrator würde viel länger dauern. Ich wünschte, vielleicht wird das passieren. Eines Tages. Sie bringen dieses Wiederholungsraster zu Illustrator und Photoshopped. Das wäre großartig. Okay, also einfach so, haben wir eine kurze Fußzeile gemacht. Nehmen wir an, ich möchte eine Art cooles grafisches Overlay-Foto über der Fußzeile . machen wir als Nächstes. Also, jetzt vertausche ich Jahre, dass ich wieder in Photoshopped bin. X'd ist fantastisch, aber sie haben nicht eine ganze Menge von Fotobearbeitungsfunktionen. Deshalb ist es schön, ein anderes Fotobearbeitungsprogramm zu haben, um Fotos bearbeiten zu können, um Folien und Mischmodi zu tun und einige coole Fotoeffekte zu machen. Also machen wir das hier mit diesem Foto. Ich werde voran gehen und greifen Rechteck-Werkzeug und erstellen eine neue Ebene. Und ich nehme einfach das, äh, dieses Uhrwerkzeug hier und bekomme einen Doppelklick darauf und ich habe eine Kopie und Einfügen. Mein kleiner Hex-Code, den ich für das Lila habe, war im Grunde meine lila Probe zu bekommen und ich werde das Maleimer Werkzeug holen, gehen Sie voran und füllen Sie das aus und ich werde das darunter ziehen. Ich werde im Grunde nur einen Mischmodus machen. Ich wähle mein Top-Farbfoto aus und mache einen Mischmodus bis hin zur Leuchtkraft oder je nachdem, was ich denke, das am besten aussehen würde. mir ziemlich sicher, dass das Leuchtkraft wird, und ich werde einfach einen federnden Effekt machen. Also füge ich nur eine Ebenenmaske hinzu, um mein Grady int-Werkzeug zu erhalten und ein schwarz-weiß-körniges in zu machen . Wenn du also schwarz und weiß über einer Maske machst, wirst du sie mischen können, okay? Und ich gehe nur, um die Transparenz zu reduzieren, damit es nicht mit irgendeinem meiner Füße oder Informationen konkurriert , und wir könnten es immer zuschneiden Anhang D also mache ich mir keine Sorgen. Ich wollte gehen, um zu schärfen. Ich werde nur ein bisschen schärfen, einen netten, scharfen Kristen Crisp und einen verdammten Image-Talk bekommen . Also, jetzt bin ich bereit, nur zu sagen, dass das ein J. Paige ist und ich werde das in Adobe X'd bringen und in der Lage sein, das in Wie ich mag, wir gehen in X'd und was ich tun werde, ist, ich gehe voran und kopiere und füge meine Fußzeile ein Container, so werde ich halten. Option könnte eine Kopie auf den so genannten Kopf ziehen und Mein Foto zuschneiden Wie ich es mag. Ich bringe mein aktuellstes Foto mit, diesen Drachen rein und ich habe einen Doppelklick, weil ich nicht mag, wo es zugeschnitten ist, und ich werde es nach vorne oder oben bringen. Ich ziehe es einfach nach oben und schicke das rückwärts in das Schichtensystem. Also werde ich das einfach tun, indem ich den Befehl und die linke Klammer halte. Meine kleine Abkürzung. Es funktioniert in allen Adobe-Programmen, und sie sind schwach. Wir haben unsere kleine Fußzeile mit unserem coolen People-Hintergrund gedreht, und ich möchte vielleicht die Transparenz in diesem Bereich reduzieren. Also werde ich einfach weitermachen und diesen funktionierenden Schatten machen, aber lass uns die Transparenz reduzieren. Ich bin hier in Erscheinung Nummer Screening, die zurück, so dass es nicht mit detaillierten Linkinformationen konkurriert . In Ordnung, also müssen wir noch eine Sache tun, und es wird in der Lage sein, unser Objekt zu verknüpfen. Eine Sache, die wir tun könnten, ist, das zu bemerken. Ich werde den Hintergrund, die feste Form und das Foto, das wir gerade darüber gezogen haben, gruppieren . Ich habe eine Gruppe, die zusammen. Also bleiben die zusammen als eine Einheit, an die ich dachte, Sie wissen, was, wenn ich das hier oben erweitern würde, irgendwie eine interessante Art von Design erschaffen würde. Vielleicht überlappt es sich irgendwie. So können Sie die Schatten hier unten sehen, die funktionieren könnten. Also könnten wir das tun oder es haben, wie er es hatte. Ich mag es irgendwie so. Lass uns das machen. Also lassen Sie uns einfach eine Art automatisch die Größe des Fotos innerhalb dieses Containers ändern automatisch ist, wie Sie höher verschoben, was wirklich cool ist. 6. Unsere Subseite erstellen: Okay, Also habe ich gerade ein paar kleine Anpassungen gemacht und hatte diesen unteren Abschnitt kann über die drei Boxen gehen , im Gegensatz dazu, dass die Fußzeile so interagieren kann. Also, jetzt bin ich bereit, ein kleines Symbol zu tun, ein kleines Heim-Icon. Es muss nach oben sein, rechts, damit, egal auf welcher Seite ich bin, ich habe dieses nette kleine Home-Icon, wo ich wieder auf die Homepage sammeln kann. Wenn Sie also mit Adobe Illustrator vertraut sind, werden Sie bereits mit dem Pin-Werkzeug vertraut sein. Das funktioniert also genau genauso in Adobe X'd. Also werde ich weitermachen und ein kleines Haussymbol machen. Also lasst uns voran gehen und eine Art einfache Box machen. Es wird die Grenze abheben. Ich werde diese schönen, abgerundeten Ecken machen, aber nicht zu abgerundet. Also einfach wirklich subtile Ecken und ich will die Optionstaste gedrückt halten und ich will diese scharfen Ecken machen , weil dort das Dach hingehen wird. Ich brauche wirklich nur diese unteren Ecken weich. Also werde ich das Stift-Werkzeug nehmen und ein einfaches Dach zu unserem Haus zeichnen. Ich komme, du könntest es einfach anpassen. Und im Gegensatz zu Illustrator können Sie darauf doppelklicken. Es wird nur durch Hervorheben in das Krümmungswerkzeug umgewandelt. Sie haben nur die Ein-Pin-Werkzeug-Option. So doppelklicken Sie. Es dreht sich um, und Sie haben Ihre Griffe, wo Sie es anpassen können. Nikkan Doppelklick und es geht zurück zu einer spitzen Form. Ich kann all diese runden, indem ich so etwas mache, also nehmen wir die Grenze ab und wechseln sie zu einem Phil. Wir haben eine kleine Haus-Ikone. Wir können das anpassen. Sie können dies auch in Adobe Illustrator, einem anderen Vektorprogramm,entwickeln einem anderen Vektorprogramm, und in der Lage sein, es als Asset einzusetzen. Aber Sie können auch hier erstellt werden. Aber wenn Sie Adobe Illustrator zur Verfügung haben, Ich mag alle meine tun, ich habe ein wenig bessere Stiftsteuerung, Pin-Tool-Steuerung und krank Adobe Illustrator, so werde ich eine Menge meiner Symbole dort und bringen dies in als Zeichenzelle. Aber das Tolle an X TV hält es live. Sie können vielleicht bestimmte Teile eines Symbols für das etwas animieren, an dem Sie interessiert sind . Also hatte ich diese Art von Leben einfach. Ich will eine Tür machen, Glenn, unsere Tür erschaffen. Wir wollen dies zu einer soliden Form machen. Lassen Sie uns das ändern, um zu füllen. Lass uns eine andere Farbe machen. Wir wollten das rausschlagen, genau wie in Adobe Illustrator. Wir wollen einen Schlag, dass. Also werde ich „Go ahead“ hervorheben, diese beiden weißen Elemente zusammenfassen. Ich werde das hier rausschlagen, aus diesem Hintergrund. Da ist also das Pathfinder-Tool hier oben, genau wie ein Adobe Illustrator. Wir werden darauf klicken, bis wir das Richtige finden. Also schließen Sie Überlappung aus, die auf das ganz rechte Symbol geklickt wird. Dies ist genau wie das Pathfinder-Tool. Das habe ich ausgeschlagen. Also jetzt habe ich meine Ikone. Also werde ich voran gehen und das in die richtige Größe machen, damit es irgendwie verkleinert wird, Shift gedrückt halten und es zur richtigen Größe für uns machen würde. Es sieht so aus, als ob es diese Kurven und Steuern behält, also wenn sie es kleiner machen, passt es diese Kurven an, was nicht unbedingt will ich. Es könnte also besser sein, die Symbolgröße so groß zu machen, dass es im Zoomen sein wird, anstatt es größer zu machen und es kleiner zu machen. Aber das ist egal, denn ich kann es ungroomed und in der Lage sein, den gleichen Effekt zu erzielen. Also gehen wir weiter und da ist mein kleines Zuhause. Ich Collins stellen sicher, wie die Größe davon. Das ist in Ordnung. Wir werden darauf klicken. Ich muss die richtige Position bekommen. Ich würde es gerne aufstellen. Siehst du die pinke Linie? Wie es sich links von der Ecke der Dächer aufstellt, ist damit verbunden. Das ist schön. Schön, so auf einem Gitter zu sein. Sie könnten einfach die richtige Positionierung finden. Also mache ich dieses Symbol, also werde ich hineinzoomen und es auswählen. Ich klicke mit der rechten Maustaste und mache ein Symbol, damit wir herausfinden, warum es so praktisch ist, das hier in Kürze als Symbol zu haben . Nun, da wir unsere Homepage entworfen haben, müssen wir immer noch ein Navigationsmenü machen. Aber lassen Sie uns irgendwie eine einfache drei Optionen hier unten halten, nur um unser erstes Projekt zusammen zu machen und es zu einem einfacheren Web-Design zu machen. Also müssen wir jetzt mehrere Kunstboards erstellen. Also waren wir die ganze Zeit in diesem Design-Fenster und wir werden bald in den Prototyp überqueren , der mehrere verschiedene Art-Boards erfordert, um zu verbinden und tatsächlich eine Menge Live-Drahtrahmen zu machen . Also lassen Sie uns eine neue Kunsttafel erstellen. Also das ist erstellen und die neuen Art-Board-Optionen hier drüben auf meiner linken Seite, es wird einfach darauf klicken und es wird eine neue Option hinzufügen, wo immer ich klicke. Es wird also voran gehen und diese Option hinzufügen, die nicht die Fußzeile hat. Also will ich voran gehen und es nach unten ziehen. Es hat also die Fußzeile, also wird dies unsere erste Unterseiten-Option sein. Was ich also gerne mache, ist, dass ich alle meine Elemente auswähle und kopiere und füge sie ein. Oder in meinem Fall werde ich die Option gedrückt halten und ziehen. Gehen Sie weiter und holen Sie das zur Verfügung. Also, jetzt könnte ich meine Untermenüs machen. Also, wenn ich Option eins ausklicke, wird dies die Website sein, zu der es gehen wird. Es wird unsere Zielseite für unseren ersten Link hier unten sein, eine Option, die die meisten dieser Elemente wie die obere Navigation und die Fußzeile bleiben alle gleich. Aber ich werde diese Optionen nicht brauchen. Was? Brauchst du noch mein Titelbild? Gehen Sie weiter und löschen Sie das alles. Also, jetzt müssen wir eine Landing Page erstellen. Lassen Sie uns also über das Layout denken. Also werde ich eine Rechteck-Box zeichnen, um den Container für ein Bild zu sein, das hier drüben existieren wird . Und ich möchte das gleiche Bild verwenden. Gehen wir weiter und schauen, ob wir das nicht hier reinziehen können. Lassen Sie uns gehen, um City wieder herunterzuladen. Es kann nicht den gleichen Kerl verschiedene ziehen, die hier drin, also kann nicht doppelklicken und das richtige Zuschneiden machen . Und ich werde hier eine Kopfzeile erstellen, also glaube ich nicht, dass ich diese Informationen brauchen werde, aber lass uns weitergehen und einen generischen Text kopieren und einfügen. Lassen Sie uns diesen ganzen Block kopieren in dieses Feld. Sie müssen all das hervorheben und es zu meinem Absatz für meinen weißen Hintergrund machen. Und lasst uns dafür einen machen. Ich denke, die linken Ausrichtungen werden am besten funktionieren. Gehen wir also voran und zoomen Sie hinein, machen Sie eine Linksausrichtung. Ich gehe hier runter und mache nur eine Linksausrichtung. Okay, also jetzt lasst uns einen Kopfzeilentext bekommen. Nun, gehen wir rein. Schnappen Sie sich unsere Art Werkzeug geben Sie etwas in generische Go und markieren Sie es und bringen Sie unsere Stile. Lasst uns einen H. machen. Lass es uns gelb machen Jetzt könnte ich meinen Begrenzungsrahmen herausziehen, damit ich meinen ganzen Text bekommen konnte, also wird die Überschrift genau hier gehen. Also, das ist eine ziemlich große, so fast frage ich mich, ob ich in h zwei tun könnte oder ob wir etwas dazwischen brauchen Also lassen Sie mich tun H ein Ich will h zwei und machen ein wenig größer Lassen Sie uns ein in zwischen Größe machen Es wird gut für Unterseiten Wir werden eine 60 Dies wird auch hh werden. Also werde ich mit der rechten Maustaste klicken und diesen Charakter zu meinem Vermögen hinzufügen Das wird jetzt H zwei sein und das wird hh drei sein. Sie brauchten irgendwie, dass zwischen der Kopfzeilengröße auch dieses Alter machen. Ich gehe nur zu replizieren Bringen Sie den Begrenzungsrahmen hierher. Ich werde nur diese Paragraphexemplar replizieren. Also haben wir noch ein bisschen mehr zu arbeiten. In Ordnung. Du brauchst nicht ganz Pausen, also sind wir einfach da, wir gehen. Also gibt es eine Art von unserer Unterseite Wahrscheinlich bringen das viel höher. Wir haben keinen großen weißen Bereich, wenn sie die Webseite zum ersten Mal angesehen haben. Denn denk dran, dieser Fuß wird nicht sichtbar sein. Sie werden gleich hier abgeschnitten werden. Also müssen wir darüber nachdenken, wenn wir unser Design machen. Wir wollen sicherstellen, dass es anpassungsfähig ist. Also, wenn eine wirklich lange Schlagzeile hier wäre, würde es immer noch gut aussehen, weil Sie nicht wissen, wie groß die Scheinwerfer sein werden, wenn Sie im Konzept-Modus sind . Aber sie möchte in der Lage sein, ein flexibles Design zu gestalten, das mit kurzen Schlagzeilen und langen Schlagzeilen umgehen kann , weil wir Dinge, die hübsch aussehen, machen könnten. Aber können wir sowohl kurze als auch lange Sätze in diese Box setzen und es funktioniert immer noch, weil einfach nicht wissen, wie lange dieser Satz sein wird. Also wollen wir in der Lage sein, es mit mehreren Schlagzeilen zu funktionieren, ihre längeren Schlagzeilen, wir werden voran gehen und das anpassen und es ein wenig kürzer machen, eine Vermietung zwischen den Zeilen, so dass ich bereit sein könnte setzen Sie hier längere Schlagzeilen ein, wenn der Kunde es braucht, also ist das schon vorbereitet. Gut. Also muss ich möglicherweise voran gehen und klicken Sie auf diese und fügen Sie diesen Charakter zu meinem Asset, Machen Sie das Alter auch. Und wenn ich ein altes habe, das diesen unterschiedlichen Abstand hat und ich diesen Zeichenstil nicht genau richtig möchte , klicken Sie und löschen Sie ihn und es ist weg. Okay, jetzt haben wir das, weil wir das kopieren und einfügen werden, um alle anderen Unterseiten zu machen . Also stellen wir sicher, dass es richtig ist, damit wir, wenn wir längere Schlagzeilen haben, nicht jedes Mal dort sitzen und die Führung anpassen. Okay, also machen wir unseren ersten Prototyp, bei dem wir große Länge verbinden und unsere erste Art von interaktivem Drahtrahmen erstellen . 7. Responsive Raster: so Grids Grids sind unglaublich wichtig, wenn wir anfangen, mehrere Art-Boards zu entwickeln, und wir passen unser Design immer und über 20 verschiedene Male, bevor wir zu diesem Schritt gehen würde gewinnen, sind wirklich sicherstellen, dass Homepage und unsere erste Unterseite sind wirklich perfekt in eine Linie zum Raster, also gibt es ein paar Möglichkeiten zu tun. Es gibt zwei verschiedene Arten von Rastern, die Sie aufrufen können und X'd, und ich werde Ihnen die Tastenkombination zeigen, damit Sie einen Befehl halten und Zitate machen , um das größere Raster hochzuziehen, und Sie werden das Kunstboard auswählen wollen. Bevor Sie das tun, werden die Verknüpfungen das Artboard und den neuen Befehl und dann mein Zitat auswählen, und es wird Ihnen ein kleines, typisches Raster geben, das Sie auf den meisten anderen Adobe-Programmen sehen werden. Und das ist wirklich großartig für Layout und Blockierung. Wir haben einen ganzen Befehl und machen die Zitate wieder, um es wieder zu bekommen, und so ist dies ein sehr praktisch zum Blockieren, Aber es gibt auch etwas wirklich Großes für reaktionsschnelle Gitter. Es gibt also ein reaktionsfähiges Raster, und um das aufzurufen, ist es dasselbe, aber du wirst Schicht hinzufügen. Wir machen Kommandowechsel und das Negligé, das Zitat. Es wird möglich sein, die Reaktion des Gitters hochzuziehen und Sie werden es bemerken. Und Ihr Panel, Ihr Eigenschaftenfenster. Sie haben eine neue Rasteroption, sobald wir das Raster zurückrufen, so dass Sie die Anzahl der Spalten ändern können . Also im Moment wird es Ihre Standard-12-Colum-Antwort des Grids sein. Aber Sie könnten auch die Rinne Peitsche die Spalte mit ändern und Sie könnten sogar die Ränder anpassen , wenn Sie hier auf der rechten Seite zum Box-Raster wechseln und Sie können immer zurück zum Standard wechseln oder er kann Standard machen, so dass Sie die gleiche Rasterspitze anwenden können alle Ihre anderen Kunsttafeln, also werden wir es nicht wesentlich anpassen. Aber wir werden die Farbe ändern, damit sie nicht im Weg steht, dass wir versuchen, sie an das Gitter anzupassen. Also werde ich die Transparenz meiner großartigen nur ein wenig reduzieren. Zweitens, sehen Sie mein Design ein wenig mehr, und jetzt werden wir beginnen, einige dieser Elemente an unser Raster anzupassen. Wir werden mit bestimmten Elementen beginnen und irgendwie arbeiten, wie ich meine Schule hinunter zoomen und irgendwie mein Logo so ausrichten, wo ich denke, wäre eine gute Platzierung auf dem Gitter und mit meinen intelligenten Guides, dass sie mir helfen werden, auf bestimmte Punkte und dann mit, wie, wie, Tasten auf meiner Tastatur, meine Auf- und Abwärts- und Links- und Rechts-Tasten anpassen. Also könnten wir vielleicht ein kleines Heim-Icon machen und ihn irgendwie bis zum Ende dieser Kolumne hier . Dasselbe mit unseren Kisten. Wir können voran gehen und diese Kisten gruppieren. Es wird ihn rüber schieben und meine Tastatur-Tasten ablehnen, um eine sehr schöne Kontrolle darüber zu bekommen, wie viel es gleitet, dieses Element zusammenzufassen. Sie möchten in der Lage sein, es hinüber zu schieben. Wir könnten den Bildschirm einstellen, wenn wir weiter über nicht so breite Ränder auf der linken und rechten Seite gehen wollten . Es liegt wirklich an dir. Welche Art von Gitter, das du gerne haben würdest. Sie können zum Raster gehen und diese Optionen von Magna ändern. Die Folie ist vorbei und hat die gleiche Spalte mit links über auf der rechten und der linken Seite. Alles klar, jetzt stellen wir sicher, dass die Logos oben am unteren Rand der Linie sind. Also wähle ich zuerst die oberste aus und wähle Objekte ganz nach unten aus, halte Sendungen, Blitzobjekte fest, um sicherzustellen, dass alle zentriert sind. Einige hier drüben in meinem Zeilenfeld, nur um ein Zeilenzentrum zu machen. All das sind Linie. Ich werde heranzoomen und einige Änderungen vornehmen. Ich glaube, das ist immer noch auf dem Wiederholungsraster. Also, wenn ich diese freischalten und anfangen wollte, diese einzeln zu ändern, kann ich Wo kann die Spalte mit ändern, um sie aufzurichten? Ok. Und ich muss voran gehen und mit der rechten Maustaste auf dieses Wiederholungsraster und auf Gruppe es klicken. Jetzt werden sie zu ihren eigenen Elementen werden. Also, jetzt werde ich diese Elemente zentrieren, den Header und die unteren Links. Das Gleiche mit dem hier. Es hält die Umschalttaste gedrückt und wählt beides aus. Und jetzt kann ich diese auf dem Gitter ausrichten. Vielleicht möchte ich, dass das vielleicht am Ende dieser Kolumne aufgereiht ist, und dasselbe gilt mit dieser Spalte abwesend. Schöner Abstand. Also, wenn ich das Ende der Warteschlange da drüben setze, also vielleicht das Ende des Endes. Wo kann nur eine Mittelausrichtung hier und eine Mittelausrichtung hier tun müssen. Also, jetzt, wo alles wirklich endet, wie Sie es mögen, können wir anfangen, über unser Prototyping nachzudenken und einige unserer Seiten zu verknüpfen. Ich will hier rüber gehen, um das Netz hier schnell zu versorgen. Wir werden auf meine Kunsttafel klicken. Name auf. Ich werde mein kleines Kommando tun, das heißt „Komm“, Mann Zitat, um mein Gitter aufzurufen. Aber ich möchte meine reaktionsschnelle Brücke aufbauen. Also werde ich Ah, Kommandowechsel, Zitat und ich habe die gleiche Körnung angewendet. Sie können es immer auf die Standardeinstellung umschalten. Also, wenn Sie es auf der 1. 1 geändert haben und Sie anwenden möchten, sagen Sie, Sie ändern die Spalten, wenn Sie diese verwenden möchten, klicken Sie einfach hier oben und Sie könnten Standard machen. Und wann immer du dich andas Gitter auf einem neuen Kunstbrett erinnerst,wird es das tun, das du modifiziert hast. das Gitter auf einem neuen Kunstbrett erinnerst, Also, wenn Sie ein 10-Säulen-Raster machen und das für alles als Standard verwenden möchten, können Sie fortfahren und dies anpassen. Da die untere Fußzeile genau gleich ist. Ich klicke einfach mit der rechten Maustaste und gruppiere dieses Element und gehe voran und werde dieses loswerden. Warum also das Rad neu erfinden? Die Zeit wird die Option halten und sie wieder hierher bringen. Alles, um Zeit zu sparen. Ich möchte sicherstellen, dass ich hier zu meinen Einstellungen gehen kann, damit ich sehen kann, dass die Y-Position 10 ist. 66 nicht auf diese Gruppe klicken, und es ist 10 77. Also, was ich tun werde, ist, das zu kopieren. Warum Platzierung auf dieser Homepage, und ich werde es an die anpassen, die ich gerade gezogen habe, um eine perfekte Platzierung von einem zum anderen zu bekommen . Also füge ich nur meine y-Platzierung ein, die ein wenig hochgedreht wurde. Also drücken Sie die Eingabetaste. Also, jetzt wird es genau aufeinander abgestimmt sein. Bringen Sie mein Bild runter. Wir könnten ihr Bild hierher in die Spalte ziehen, so dass sich gut ausrichtet. Das Gleiche mit unserer Typografie, wir könnten es vielleicht am Anfang einer Spalte machen. Wir könnten es hierher schleppen. Wir haben eine Menge Leerraum und lassen mich das hier rüber ziehen, und ich wollte auch noch eine kleine Zeile hier etwas setzen. Schnappen Sie sich mein Werkzeug hier. Ich denke, wir haben viel Leerraum. Wir müssen eine Art von Element haben, um alles zu teilen und einfach in mein Vermögen zu gehen, das eine Farbe zu machen und jede Grenze auf meiner On-Anzeige standardmäßig abzunehmen. Ok, so großartig. Ich werde verkleinern und das Gitter ausschalten. Und ich erkannte auch, dass ich den oberen Teil zwei machen möchte. Also werde ich voran gehen und diese Elemente loswerden. Lass uns diesen Top-Teil holen, genau wie wir ihn mögen. Wir können knave Links ein wenig später hinzufügen, aber ich mache zunächst eine wirklich einfache Website, ohne zu viele Längen, um Ihnen irgendwie zu zeigen, wie das Protestprototyping funktioniert. Wir werden das Rückwärts- und Schichtsystem schicken, das ich jetzt halte. Kommando linke Klammer, die es hält. Ich glaube, wir haben ein Heldenbild. Deswegen ist das nicht perfekt. Also lasst uns voran gehen und ausschalten sind reaktionsschnell Gitter. Ich werde den Befehl gedrückt halten und dann verschieben und dann das Anführungszeichen, um sie verschwinden zu lassen. Aber Sie müssen beide Ihre Kunsttafeln auswählen, wenn Sie beides eingeschaltet haben. Also werde ich einfach Kommandoverschiebung und Rotation machen. Jetzt sind sie beide los, und wir sind bereit, mit dem Prototyp zu beginnen und unsere erste Woche zu verknüpfen. 8. Prototyping: Ich werde mein Kunstbrett ein wenig nach rechts verschieben, damit ich die Verbindungen ein bisschen besser sehen kann . Nun, ich war die ganze Zeit im Entwurfsmodus, aber lasst uns in den Prototyp-Modus wechseln. Ich glaube, wir sind bereit. Wir werden anfangen, ein paar davon zu verknüpfen, werden auf meine Asset-Panels wegklicken. Ich kann all das zur Verfügung haben. Also, was ich tun will, ist, wie ich die Dinge miteinander verknüpfen werde. Wenn ich also eine Live-Vorschau mache und hier oben klicke, um Desktop-Vorschau zu machen , kann ich mit der Website interagieren. Das erste, was wir verlinken wollen, ist unsere erste Unterseite, die Option eins sein könnte. Also werde ich hier runter zoomen und du wirst bemerken, dass du eine kleine Pfeiltaste siehst. So werden wir es verknüpfen können. Wir werden auf diese Pfeiltaste in diesem gesamten Feld klicken, wenn das angeklickt wird, wo Sie hier unten klicken und tun tippen, das ist im Grunde ein Clip, Ein Klick und ein Ziehen ist, wenn Sie mit der Maus oder mit dem Finger ziehen, und Wir machen einen gerechten Übergang. Es wird also von diesem hier zum nächsten Grün wechseln. Margaret, du wählst ein Kunstboard, das wir wählen werden, das einzige, das wir zur Verfügung haben, und du merkst, wie es alles automatisch verknüpft. Und wir gehen zu einer Animation, die wir tun könnten, auflösen könnten. Wir können es zum Lachen gleiten lassen, Licht nach rechts. Lassen Sie uns eine Folie nach links machen, damit ich Ihnen zeigen kann, wie das aussieht. Sie könnten die Dauer ändern und machen es wirklich schlank aussehen, indem Sie eine längere Dauer. Also vielleicht versuchen Sie eine 0.8 und sehen, ob das nicht zu langsam oder zu schnell ist. Und das geht es darum. Wir könnten es in Leichtigkeit tun. Es gibt ein paar verschiedene. Sie könnten mit ein paar dieser Luft neue innerhalb der letzten oder zwei Monate spielen, mit denen Sie experimentieren können . Okay, also haben wir das in Verbindung gebracht. Wenn wir nun zur Live-Vorschau gehen oder zu unserer Vorschau gehen, ist dies die Vorschau einer Website, die wir nach unten scrollen. Das ist verlinkt, also klicken wir auf das wird nach links gleiten, und dann ist unsere Unterseite Seite verfügbar. Also, was machen wir jetzt? Wir stecken fest. Wir haben eine geschlossene Schleife. Wir müssen dies zu einer offenen Schleife machen, die wieder auf die Homepage geht. Also wollen wir dieses kleine Symbol wieder nach Hause klickbar machen. Wir werden eine weitere Verbindung schaffen. Also gehen wir runter auf unsere Homepage. Wir wollen das wieder zu Hause verknüpfen. Siehst du diese kleine Linie? Ich werde klicken und halten. Geh ihn und klicke das wieder irgendwo auf dieser Kunsttafel. Klicken Sie darauf zurück. Wir machen das zum Wasserhahn, was ein Klick ist. Ich werde es zu einem Übergang machen. Gehen Sie zurück zu unserem 1. 1. Und das ist, wenn es schön ist, Ihr Kunstbrett zu nennen, damit Sie nicht verwirrt werden. Gehen Sie zurück zu unserem 1. 1. Und das ist, wenn es schön ist, Ihr Kunstbrett zu nennen, Also würde ich das Haus benennen und wir machen eine Rutsche nach rechts. Anstatt nach links zu gleiten, wird es gleiten. Richtig. Es sieht so aus, als ob es dynamisch ist, sich automatisch an unsere Einstellungen erinnert, was fantastisch ist. Also, jetzt haben wir zwei Links. Wir haben einen Link hier und einen Link hier. Gehen Sie voran. Sehen Sie, alle ihre Links werden schnell nur doppelklicken Sie darauf und geben Sie dies als Zuhause ein und geben dies als Option eins ein. Nur so, wenn ich anfange, ihn zu verknüpfen. Ich habe Namen im Gegensatz zu Zufallszahlen. Großartig. Gehen wir also zur Vorschau und sehen Sie unsere Links und Aktionen. Klicken Sie einfach auf Option eins. Genau so. Es hatte diesen schönen Übergang. Ich will zurück nach Hause. Ich klicke und du wirst wieder nach Hause gehen können. Und ich denke, dass die Verzögerung etwas zu versetzt ist. Es sieht irgendwie ungeschickt aus. Wenn ich also eine bestimmte Verbindung bearbeiten möchte, ist das gut. Klicken Sie auf die Verbindung. Doppelklicken Sie darauf oder einfach nur schnell auf einmal. Sie werden es wieder auf eine 0,4 ändern. Schneiden Sie es in zwei Hälften. Okay, ich gehe zurück und schneide es auch in zwei Hälften . Also, jetzt würde das zurück auf die Zehenvorschau gehen. Wir könnten es testen. Mal sehen, wie wir den Übergang mögen. Es ist Klick. Es wird rutschen. Das ist ein bisschen schneller. waren schnell zu Hause. Los geht's. Also gehen wir hin. Wir haben bereits eine Art Live-Arbeitsdrahtrahmen, was so cool ist, dass dies vor ein paar Jahren so lange dauern würde. Und jetzt schauen Sie, wie schnell wir das tun konnten. Das nächste Mal, wenn wir noch ein paar Optionen machen, klicken wir alle zusammen, und dann beginnen wir, ein weiteres Projekt zu machen. Also lassen Sie uns ein paar weitere Unterseiten machen und diese wirklich schnell verknüpfen, damit wir ein besseres Verständnis für Prototyping und die Arbeit mit mehreren Art-Boards bekommen können . Also werde ich ein paar neue Kunsttafeln erstellen. Ich gehe hier zu dieser Ikone und mache ein paar neue Kunsttafeln. Also werde ich einfach rechts unten klicken und dann erneut klicken und ich werde diese direkt über schieben , damit ich direkt unter meinen Unterseitenmenüs sein könnte. Und schließlich, wenn Sie 20 bis 30 dieser Dinge haben, müssen Sie eine Art Benutzerfluss erstellen. Du wirst also einen Benutzer auf eine bestimmte Option klicken lassen, und das geht in diese Unterseite, und dann wirst du sie durch eine Art Trichter fahren lassen, um zu dem Endziel zu gelangen in dem sie sein müssen. Dies wird schließlich wie eine Karte aussehen, und Sie sehen den Benutzerfluss, der aus Ihren Benutzerpersonas gesammelt wird. Sie können sich entwickeln, wenn Sie etwas UX-Design machen, also werden wir nur Art von Kopieren und Einfügen sind Unterseite und in der Lage sein, einige dieser Fotos zu Pop. Und so zoomen ich hier rein und ich werde einfach die Option gedrückt halten und ziehen. Dies könnte hoffentlich an der richtigen Stelle geschnappt werden. Sie haben bemerkt, dass ich es nach unten ziehen konnte, aber alles unter der Falte ist nicht sichtbar. Also werde ich voran gehen und mein Kunstbrett oben auswählen und nach unten gehen, um sicherzustellen, dass es vertikal ist , und ich werde einfach den ganzen Weg nach unten scrollen. Ich werde das Gleiche tun. Ich werde voran gehen und halten Sie die Option Ziehen Sie diese, stellen Sie sicher, dass es zwei Punkte schnappt. Es hat also die gleichen Abmessungen oder die gleichen Platzierungen auf der Kunsttafel, und es sieht so aus, als müsste ich auf meine Kunsttafel klicken und nach unten gehen und nur sicherstellen , dass ich alles unter der Falte habe, was unsere Fußzeile wäre. Hier sind unsere drei verschiedenen Optionen. Wir können unser Artboard immer ein wenig nach oben ziehen, um ihnen den gleichen Abstand zwischen den Kunstbrettern zu geben , was nützlich sein könnte, wenn Sie viele dieser Dinge haben. Und so lasst uns weitermachen und unsere Fotos austauschen. Lassen Sie mich also zu Downloads gehen und ein paar dieser Fotos mit den Werksarbeiten austauschen. Ich könnte das hineinziehen und das hineinziehen. Gehen Sie voran und doppelklicken Sie, damit ich eine bessere Beschneidung bekommen kann. Okay, das hier ist beschnitten. Das ist ziemlich gut beschnitten, und jetzt sind wir bereit, die miteinander zu verknüpfen. Natürlich alle Inhalte geändert werden. Also lassen Sie uns gehen und Länge erleichtern bis in den Prototyp-Modus. Also bin ich einfach auf Prototyp umgestiegen, und wir werden diese verknüpfen, um zu klicken und nach unten zu ziehen. Das wird zahnige zweite Seite verknüpfen und es ist gespeichert Oliver-Einstellung, so dass wir das nicht ändern müssen , und wir gehen oben auf die 3. 1 und verknüpfen das nach unten. Wenn Sie also jemals alle Ihre verknüpfte Verbindung sehen möchten, gehen Sie weiter und wählen Sie den obersten Namen der Kunst aus. Borden's konnte dir nicht alle Verbindungen an jedem zeigen, und wir müssen das Haus auch verbinden. Ich komme zurück auf die Homepage, also gehen wir weiter und gehen zu jedem Symbol. Stellen Sie sicher, dass wir nur das Symbol auswählen und es zurück verknüpfen und es zurück verknüpfen. Eine letzte, wir verknüpfen es zurück, und jetzt haben wir einen offenen Kreis, in dem sie Eichel prägnant durchmachen und auf jeder Seite zur Homepage zurückkehren . Wir gehen und wählen alle unsere Boards aus und wir konnten alle Verbindungen sehen, die wir haben. Also, jetzt gehen wir auf die Vorschauoption und lassen Sie es uns überprüfen. Lass mich das kleiner machen, damit ihr es sehen könnt. So erhalten Sie einen Klick auf Option eins. Natürlich könnten wir jetzt unter der Falte nach unten scrollen und auf Option eins klicken. Wir haben das schon. Wir können zurück zur Startseite gehen, klicken Sie auf Option zwei zurück zur Startseite und gehen Sie zu Option drei. Und wir könnten zurück auf die Homepage gehen, damit Sie das noch aufwendiger machen können. Aber das ist einfach ein großartiger Starter, der entwickelt wurde, um dich an das Prototyping zu gewöhnen. Und wir werden viel komplexeres Prototyping machen und in der Lage sein, Animationen im nächsten Projekt zu machen, das eine Web-App, ein Konzept sein wird und ich wollte noch eine Sache übergehen, bevor wir zu den komplexeren -Projekt. Und das sind deine Symbole. Also haben wir dieses Symbol mit einem nächsten E erstellt. Wir haben es weder als Symbol noch als Foto mitgebracht. Dies ist ein lebendiges kleines Edit-Kräuterobjekt, also kann ich tatsächlich zu diesem gehen. Ahbd sind das Symbol. Doppelklicken Sie auf mein Symbol, und ich kann das Symbol für alle Änderungen, die ich am Symbol oder global vornehmen, bearbeiten. Wenn ich dieses Symbol also in, sagen wir gelb, ändere , werden Sie feststellen, dass alle auf jeder Seite in Gelb geändert werden. Also, das ist, was ist wunderbar an der Zuweisung von Symbolen ist ihre globale. Also mag ich das Gelb. Sieht wirklich schön aus. Ich kann mit dem Pin-Werkzeug eingehen und es weiter bearbeiten und werde alle Änderungen an all diesen vornehmen . Du musst also nicht da sitzen und das geänderte Haus kopieren und auf das nächste Kunstbrett einfügen. Es ist alles global. Das ist es also. Das gibt es eine kleine Art von Web-Design? Wir kamen mit sehr, sehr, sehr einfache Anzeige. Drei einfache Links waren nicht einmal eine App-Leiste zu tun, aber ich werde Ihnen zeigen, wie Animationen und Pullouts, Hamburger-Menüs und all das Zeug im nächsten uh, Projekt, das eine Web-App-Entwicklung sein wird, wenn wir reden über das Branding und haben das in eine Art Benutzererfahrung für einen Benutzerfluss integriert, der ein Benutzerprotokoll wieder nimmt und sie an ihr endgültiges Ziel bringt . 9. Teilen und Größenänderungen: Wie zeige ich mein Design? Hier oben gibt es eine Option namens Share Squatting. Klicken Sie auf Teilen und es gibt ein paar Optionen, die wir immer auf Datei und Export gehen können. Und wir können die Kunsttafeln als J. Packer, PNG oder als PDF exportieren Packer, . Und wir können mehrere PDF-Seiten haben. Also das ist großartig, wenn Sie noch in der Art der Prototyping-Phase sind und Sie brauchen toe, haben Sie einen Client markiert ein pdf. Das ist perfekt für sie. Aber wenn Sie diese Live-, klickbare Art von Interaktion haben wollen , werden Sie hier rüber gehen und wir werden Prototypen veröffentlichen, und Sie können es tun. Es gibt ein paar verschiedene Optionen, aber wir werden einen öffentlichen Link erstellen, also wird es Zeit brauchen, um ein U R L zu erstellen, das wir dann an andere Leute senden können. Jetzt haben wir einen öffentlichen Link. Wir können hier auf das Link-Symbol gehen. Wir haben unseren Link in unsere kopiert und dann können wir das in unseren Browser kopieren und einfügen, und es wird ableto Load arbeiten Prototyp. Jetzt werden Sie feststellen, dass alles genau funktioniert, wie es funktioniert, wenn wir innerhalb von X T sind. Aber jetzt sind wir in einem Browser, und so kann jeder sehen, was wir im Vorschauabschnitt von X'd sehen, und Sie können auch Kommentare machen. Du gehst zurück für den Klienten oder andere Leute, mit denen du arbeitest, und es gibt eine andere Möglichkeit, dir zu zeigen. Sie können auf „Teilen“ klicken und nach unten gehen, um veröffentlichte Design-Spezifikationen anzuschließen. Und so werden wir das tun und es wird in der Lage sein, all unsere verschiedenen Einstellungen für unseren Charakter zu exportieren . Stile sind Symbole und Farben, die groß wäre, um mit dem Entwickler zu teilen, der die Hex-Codes wissen muss, die brauchen, wer muss über die Dimensionierung der Typografie wissen und haben einige der Symbole. Das exportiert jetzt, sobald das Exportieren beendet ist, wird dasselbe tun, diesen Link kopieren und in einen Browser einfügen. Okay, hier ist der Link. Der Link wird kopiert. Lassen Sie uns voran und probieren Sie es aus. Das könnte also ein bisschen anders sein als das letzte. Es wird in der Lage sein, unsere Links zu zeigen. Wer könnte zu allen Bildschirmen zurückkehren? Es wird dem Entwickler zeigen, wie wir wollen, dass sein Benutzer alles klickt und durchfließt. Wenn dies also eine vollständige Website war, könnte es 30 oder 40 verschiedene Kunstboards geben, aber sie werden in der Lage sein, den Benutzerfluss zu sehen und wie das verlinkt werden soll. Sie können auch auf die einzelnen klicken, und wir haben alle spezifischen Farben und Sie können tatsächlich in einem Kopien der Hex-Code klicken . Also ist dies perfekt für einen Entwickler, der nur Zeh will. Lassen Sie alle Ihre Spezifikationen einsatzbereit sein. Es zeigt alle Typografie, die die Schrift verwendet, und jede Art von Interaktionen, die es eine Art Folie in und Lockerung zeigen wird . Es wird ihnen alles wissen lassen, was sie wissen müssen. Und sie klicken auch hier und machen Kommentare. Das ist also praktisch, wenn Sie mit diesem Entwickler arbeiten oder wenn Sie selbst derjenige sind, der dies entwickeln wird, um es zu einer echten Realität Antwort zu machen. Obree Dimensionierung. Dies ist eine großartige Ergänzung zu Adobe X'd. Jetzt kann ich zum Beispiel mein Kunstboard auf ein kleines iPhone verkleinern und sehen, wie wir auf Mobilgeräten aussehen. Dies ist sehr wichtig für Entwickler und Kunden zu sehen, wie sich die Dinge an kleinere Größen anpassen . Lassen Sie uns also voran gehen und ein neues Kunstboard erstellen. Gehen geklickt, erstellen Sie ein neues Kunstboard und lassen Sie uns ein iPhone X Kunstboard machen. Ziehen wir das ein wenig näher an ihre Homepage. Wir passen zuerst die Homepage an. Gehen wir weiter und wählen Sie alle Elemente zu Hause aus, und wir werden zuerst ein paar Dinge tun, bevor wir es kopieren und einfügen, damit wir alle Elemente auswählen können. Und wenn wir es reduzieren, wird es automatisch beginnen, alles für uns zu ändern. So sehen wir, wie die Industrie neu gestaltet zusammenbricht, wenn ich es etwas kleiner mache und alles ziemlich gut funktioniert. Die drei Hauptboxen Luft nicht zusammenbrechen. Wie wir mögen und das ist in Ordnung, Responsive Größe ändern, was ich hier auf der rechten Seite habe. Es ist ein Klick auf die Zehe. Es ist ziemlich gut, aber es ist nicht perfekt. Es wird etwa 80% der Zeit funktionieren, und sie arbeiten immer noch irgendwie an dieser Funktion und bekommen es jedes Mal besser. Aber im Moment können Sie hauptsächlich optimieren, wie die Dinge zusammenbrechen. Wenn Sie also zu Ihrer Antwort der Größenänderung gehen, nachdem Sie diese drei Boxen ausgewählt haben, können Sie Bindungsfixierung mit aufheben. Und wenn Sie diese kleiner machen, wird das mit jetzt reagieren, wenn Sie es reduzieren. Wenn Sie auf die Bennett-Highlights blau klicken, bedeutet das, dass die Breite beim Verkleinern der Größe fixiert wird. Dasselbe für ein hohes Pfandrecht. Klicken Sie mit einer Höhe. Sowohl die Breite als auch die Höhe passen sich an, wenn sie sie nach unten bringen, und sie werden kleinere Boxen sein. So könnte es jetzt ein paar Elemente eins nach dem anderen einbringen und sehen, wie es zusammenbricht. Wir könnten alles hervorheben und eine Kopie erstellen und versuchen, es auf diese sehr kleine Größe zu verkleinern . Aber die Responsive Größenänderung ist nicht perfekt. Es wird nicht zu 100% aussehen, also müssen wir irgendwie gesundheitliche Dinge reagieren. Daher müssen wir möglicherweise die Fußzeile gruppieren, die zusammen gruppieren und zur ansprechenden Größenänderung übergehen. Und anstatt auf Auto zu haben, müssen wir es möglicherweise ändern, wo die Breite festgelegt ist. Wenn wir es also verkleinern, wird die Peitsche fixiert werden, anstatt sie nicht fixiert zu werden. Testen Sie also, wie diese reagieren. Also, wenn Sie es nach unten bringen und hat die beste Art von Kombination aus Zusammenbruch und immer reaktionsschnell, so Auto war großartig, aber spielen Sie herum mit Handbuch und sehen, wie sie zusammenbrechen und sehen, wie Sie wollen, dass es zusammenbricht auf Mobilgeräten. Es wird nicht perfekt funktionieren, aber es ist ein toller Kerl, mit dem du wenigstens anfangen kannst. So müssen Sie es nicht für jede Größe manuell ändern und einige Dinge automatisch machen . Also hat mir wirklich gefallen, wie dieser Top-Teil funktioniert. Also werde ich einfach mein Top-Helden-Bild und meinen Header kopieren und einfügen und jetzt weit und ich mag , wie das zusammengebrochen ist. 10. Mobiles App-Design – Setup und Ux/Ui: Also, jetzt werden wir durch eine ganze App-Design-Entwicklungen gehen und Sie sehen genau in der Nähe hier ein wenig von einer Marke, die ich schnell zusammengestellt, und Sie könnten die Symbole erkennen, wenn Sie vorherige Klassen oder Lektionen mit mir genommen haben. Wir haben diese Icons alle in Adobe Illustrator entwickelt , wo ich mich jetzt getroffen habe. Das ist also die Originalschrift, mit der ich angefangen habe zu arbeiten , das heißt, von Sands Black, und ich beschloss, die Ecken zu runden, um ihm eine weichere, jugendliche Art von Aussehen zu geben und diese andere Farbe zu zeigen vielleicht den Cent in der Tauch-App an. Also, was ist die App? Es ist für junge Millennials, die eine sehr einfache Budgetierungs-App haben wollen. Also heißt es Dime, und ich wollte eine sehr einfache Schrift haben, die abgerundet ist. Das ist dick. Das ist Bolden. So einfach, weil die ganze Idee der APP ist Ihr Geld einfach gemacht, das ist die Art von Slogan, Also wird alles in Bezug auf unser Design einfach sein. Es wird ein netter Benutzerfluss sein, sehr einfach zu bedienen. Es ist nicht kompliziert. Es überwältigt auch nicht viel Werbung, , also habe ich hier auch ein paar Arten von strahlenden Maschen entwickelt, um vielleicht Hintergrundelemente in unserem APP-Design zu verwenden . Nicht sicher für die Verwendung, aber ich habe entwickelt, um diese Vermögenswerte bereit zu haben. Also ein paar Dinge, die wir tun werden, wir werden X'd passieren und wir werden ein paar dieser Farben schnappen und anfangen, ein paar Vermögenswerte einzurichten. Wenn wir also anfangen zu entwerfen, müssen wir nicht viel über dieses Zeug nachdenken. Es ist bereits in X'd geladen. Also fangen wir an, diese Farben zu bringen. Und so wähle ich gerade diese erste hellere mintgrüne Farbe aus und bekomme eine Kopie meines Hex-Codes und lebe sie in X'd. Lass es mich tun, Phil. Und jetzt könnte es Rechtsklick voraus, nehmen Grenze aus Rechtsklick und fügen Sie Farbe zu Assets, um das Gleiche mit ein wenig dunkleren grünen Farbe oder dem blauen Grün zu tun . Ich schätze, es wäre Poppin X'd. Es wird eine Box erstellen, stellen Sie sicher, dass es keine Grenze Pop in unserem füllen Rechtsklick und fügen Sie farbige Assets hinzu, und jetzt sind meine Assets geladen. Ich brauche keines dieser Objekte mehr, also wird es das loswerden. Lassen Sie uns auch unseren Typcharakter einbringen. Also werde ich nur ein Generikum eintippen. Es wäre eine Header-Schriftart. Ich werde das nicht von Sands schaffen. Also, Ese o Sands, okay. Und ich werde weitermachen und das zu meinen Charakterstilen hinzufügen. Also werde ich voran gehen und mit der Therapie aussuchen, richtig? Klicken Sie auf und fügen Sie Zeichen Toe Assets hinzu und so kann es verschiedene Größen hinzufügen. Als wir angefangen haben, entwickelte die App und bekommen eine Vorstellung vom Typ, können wir weiterhin Assets hinzufügen. Also jetzt sind wir irgendwie bereit für den Einstieg. Es gibt nur noch eine Sache, die ich mitbringen muss. Also lasst uns reinkommen. Der Illustrator. Ich möchte einige dieser Grafiken einbringen. Also, was ich tun werde, ist, dass ich Illustrator bin. Ich werde einfach ein paar Art-Boards einrichten, damit ich exportieren kann, dass es P- und G's ist und diese Vermögenswerte zur Verfügung haben kann. Ich werde auch mein Logo zu packen, und ich werde kein transparentes PNG haben, wenn ich diese in zwei Adobe mitbringe. Ok. Und wir können diese auch mitbringen, wenn wir es wollten. Wenn ich also diese Ikone und auch diese kleinen Icons haben wollte, könnte ich sie mitbringen. Wenn ich bereit bin, werden wir wahrscheinlich eine machen wollen, die auch weiß ist. Also werde ich wieder reingehen und diese rückgängig machen. Lassen Sie mich sehen, ob ich nicht alles weiß machen kann und dann eine diese Farbe machen und den anderen kleinen Punkt des Ich wäre die grüne Farbe. So werden jetzt andere auf einem transparenten Hintergrund weiß sein. Lassen Sie mich einfach exportieren. Lasst uns diese alle Art von Größe machen. Wir denken, wir werden es am Ende benutzen, wenn wir diese in unsere Symbole speichern. Okay, also werde ich einfach mit der rechten Maustaste klicken, rechten Maustaste klicken und einfach jedes tun. Okay, jetzt habe ich mein Symbol. Ich werde das weiß machen. Dies wird Blue genannt, und das würde Grün heißen. Und wenn wir alle diese Art von Hintergrundarbeit machen, , wenn wir anfangen zu entwerfen wird es super schnell gehen, wenn wir anfangen zu entwerfen. So wie Sie sehen können, habe ich eine neue Art Boards erstellt. Könnte iPhone 678 Nur irgendwie haben ein wenig von einer kleineren, prominenteren Größe da draußen ist das iPhone. X ist immer noch irgendwie da raus. Also dachte ich, ich habe für diese Größe entworfen und dann irgendwie etwas reaktionsschnell re Dimensionierung und zeigen, wie es auf iPhone X und anderen Größen aussehen würde und ein Android Phillips zuerst mit einer Art grundlegende Blockierung beginnen . Wir müssen jetzt anfangen, über die Benutzererfahrung und den Benutzerfluss nachzudenken. Und so, während ich diese Marke entwickle, denke ich an die Benutzerpersona und hier sitzen wir. Verschieben Sie sich ein wenig weg von Ihnen, ich, die Benutzeroberfläche ist, und wir fangen an, in U X zu bekommen, was Benutzererfahrung ist. Also jetzt denken wir über den Benutzerfluss nach und wie sie sich fühlen und wie einfach das Produkt zu verwenden ist, wie sie durch die Art des Trichters gehen oder die Art von Erfahrung dort, die aus der App kommen wollen , was eine Budgetierungs-App sein würde. Also, wie einfach es ist, ist es, die zu verwenden? Können wir Problembereiche beseitigen? Können wir Bereiche der Frustration beseitigen, die jemanden entmutigen könnten? Können wir sofort großartige Einblicke bieten, damit sie das Gefühl haben, dass die App ihnen wirklich gibt was sie wollen, was eine sehr vereinfachte Version einer Budgetierungs-App ist. Also, wenn wir über den Benutzer Fußfluss denken Wir denken an unser Baby. Unser erstes lasst uns ein paar schnelle Personas entwickeln. Wir werden nicht zu tief in dich eingehen. X sollte sich ein wenig mehr auf der u I Seite in diesem speziellen Projekt konzentrieren. Aber lassen Sie uns zwei verschiedene Arten von Benutzerprozentern haben. Die Person würde ein junger Mann sein, soll 25 Jahre alt sein. Er wird gut ausgebildet sein. Er will wirklich eine sehr einfache, einfach zu bedienende App. Sein Profi, er ist beschäftigt. Er hat keine Zeit, um sich herum zu verwirren. Er will eine Vereinfachung einer App. Wir haben auch eine 28 Jahre alte Frau, die eine Mutter von zwei ist. Sie hat auch nicht viel Zeit. Also beide diese Persona teilen ein gemeinsames Thema, das nicht viel Zeit ist. Daher müssen wir sie schnell mit Informationen erfassen, die für das, was sie suchen, relevant sind . Also werden wir weitermachen und unsere Art von Splash Seite Login Seite entwickeln, was immer Sie es nennen wollen , denn wenn Sie die App zum ersten Mal öffnen Sie die Hälfte des Protokolls und Sie müssen ein Konto haben diese App. Die Anmeldeseite wird also unsere erste Startseite sein. Und dann werden wir zu Benutzern, die auf dieser Seite sein werden, und das ist, wenn wir zwei verschiedene Arten von Benutzerflüssen haben. Also 1% des Mannes wird einen Weg gehen, und die Frau wird vielleicht anders gehen. Wir haben zwei verschiedene Arten von Benutzerflüssen in diesen speziellen Prototypen. 11. Mobiles App-Design – Homescreen: Also habe ich bereits ein paar Assets gemacht, von denen ich dachte, würde eine nette Art von bunten Benutzeranmeldeseite machen . Und so habe ich diese beiden Vermögenswerte. Sie sind beide strahlend. Nachrichtennetze. Ich habe einen Adobe Illustrator erstellt, also werde ich das einfach nochmal verkleinern. Und was ich tun könnte, ist einen Container zu erstellen. Wenn ich möchte, dass dies den gesamten App-Bildschirm aufnehmen, könnte ich einfach einen Farbcontainer erstellen, gehen Sie vor und entfernen Sie unsere Grenze, und wir könnten seinen Drachen darin machen es viel einfacher, die Größe zu ändern. Wir können verdoppeln, klicken und sein, um dies auf bestimmte Farben zu ziehen, die wir denken, würde cool aussehen. Also, jetzt brauchen wir zwei Benutzer. Also gehen wir raus und holen uns ein paar Kreise. Wir haben zwei verschiedene Benutzer, die Sie einloggen können. Vielleicht sind sie Ehemann und Ehefrau, und so haben sie die APP, und Sie könnten mehrere Benutzer mit mehreren Budgets haben, abhängig von Ihrer Familie. Dies könnte also eine familienbasierte App sein, in der Sie aufgefordert werden, die gleiche Art von Konto zu haben , und Sie können sich mit verschiedenen Profilen wie Netflix anmelden, wo Sie ein Konto haben. Wir haben verschiedene Profile und Sie können sich als Familie anmelden. Und dann gibt es auch einen gemeinsamen Bereich, in dem man die gemeinsamen Finanzen sehen kann. Es ist also eine wirklich coole Art und Weise für verheiratete junge Paare, ein vereinfachtes Warten ein Budget zu haben und als Team zu arbeiten. Also gehen Sie zu verschiedenen Loggins. Eine für den Ehemann, eine für die Frau oder zwei verschiedene Personas. Und so werden wir bekommen, dass ein junger Mann zu Downloads gehen würde. Also hier sind ein paar Kopf-Aufnahmen, die ich mit besserer Passform denke. Unsere Benutzer-Persona dachte irgendwie an einen jungen Kerl. Er könnte dieser sein, aber er sieht aus, als wäre er in seinen 30. Also lasst uns diesen Kerl schnappen. Wir lassen ihn rein. Ich werde die Option halten, um die gleiche Größe zu behalten. Ich werde unsere Frau hier reinziehen, junger Mensch. Wir werden doppelklicken und die Größe ändern. Diese Kopf-Aufnahmen kommen etwas näher um den Kopf. Also im Moment habe ich eine Art dünne Grenze hier. Lassen Sie mich sehen, ob ich das nicht ein bisschen leichter Zoom-Ins machen kann und irgendwie sehen, das ist, wenn Sie wirklich einen Zoom bekommen und herausfinden, was wir mögen. Also könnte ich hier einen Schlagschatten für diese Loggins machen, also könnte ich nur beides hervorheben. Und bei einem kleinen Schlagschatten hätten wir unser Logo auf dem Login-Bildschirm. Das ist ziemlich wichtig, aber weiße Version. Dies ist, wenn Sie verschiedene Dinge testen. Also erkenne ich, Oh, Oh, ich muss vielleicht eins mit dem hellgrünen greifen, um mit dieser Art zu gehen, dass das zu viel verschmelzen ist . Also lass mich meine andere Version schnappen. Also habe ich meine andere Version hier, die das hellere Grün verwendet, so dass ein wenig besser herauskommen wird . Ich kann auch einen Schlagschatten hinzufügen, und wir müssen ein paar Anmeldeinformationen haben. Natürlich haben wir ihre Namen. Anstatt nur Art namenlose Leute hier herumschweben zu lassen, lasst uns unser Typwerkzeug greifen. Wir könnten anfangen, unseren Typ ein wenig zu definieren, so wird dies sein müssen, um mit einem gefälschten Namen kommen. Ich nenne ihn einfach Bob. Wir haben nur einen generischen Nachnamen zu Bob M. Und das ist unser Azo-Sands enges Gesicht, das in unseren Charakterstilen ist. Aber wir haben eine, die auch weiß ist. Also lasst uns voran gehen und unseren Typ definieren. Es wollte sich das Pfeilwerkzeug schnappen. Bringen Sie das hoch. Ich frage mich fast, ob wir das grün machen können, wenn Sie das Pipettenwerkzeug der Probe oder kleine grüne Farbe nehmen . Und ich möchte auch das grüne kleine Grün hier hinzufügen. Nimm einfach ein quadratisches Werkzeug und wir nehmen das Pipettenwerkzeug. Ich werde das Grün ausfüllen. Wir könnten unsere Farbe auf diese Weise einbringen. Ich muss diese dritte grüne Farbe einbringen. Also lassen Sie uns das zu einem Farbenbjekt machen. Also gehen wir hin. Jetzt haben wir drei Grüntöne, mit denen wir arbeiten können. Gehen wir zurück zu White und machen dann vielleicht einfach den Vornamen Grün. Und ich mag das As von Sands nicht wirklich als Kleinbuchstaben. Also, was ich tun werde, ist mit einer sekundären Typwahl zu experimentieren, die dünner ist. Also vielleicht einfach mit Helvetica gehen, nur um etwas wirklich Einfaches zu haben. Lass uns weitermachen und seinen Nachnamen ausfüllen. Also machen wir ein kühnes Ok, wir haben nur mutig. Also frage ich mich, ob Helvetica neue Hölle das Tika sehen Sie, ob ich eine größere Menge an Gewichten haben? Ja. So Helvetica neue Ich habe ein wenig mehr verschiedene Gewichtsoptionen. Also werde ich schwarz gehen und dann können wir ultra leicht mit dem Nachnamen noch Helvetica New do ultra light gehen . Aber das ist zu dünn. Also lassen Sie uns dünn tun, Sehen, wie das funktioniert. Also, wenn ich irgendwie glücklich damit bin, könnte ich halten, Option und ziehen und ihre machen. Und lassen Sie uns voran und fügen Sie dies zu unseren Charakter-Stile wird die Charakter-Stil Toe Assets hinzufügen, so wird es all diese verschiedenen Gewichte hinzufügen. So fügte es Bob als einen Charakterstil und Smith als einen anderen hinzu. Also muss ich die umbenennen. Also werde ich diese wirklich schnell umbenennen, so dass ich in der Lage sein könnte, zu definieren, welcher Charakterstil es ist, den er irgendwie benennen konnte. Alle meine Vermögen machen es mir einfacher, mich zu erinnern und mich daran zu erinnern. Also wollen wir auch diese apus einfach machen ist möglich. Einige entwarfen, dass wir das im Hinterkopf behalten. Also wollen wir ihnen nur ein paar andere Dinge wissen lassen, das ist dies ein Anmeldebildschirm, so dass es Sinn macht, dass sie auf Ihr Benutzerprofil klicken. Aber manchmal braucht man nur eine visuelle Art von Anleitung dafür. Also schicken wir diese Typen runter, oder wir können sie verschicken. Das ist, wir werden ein wenig mit Abstand spielen. Wir könnten unser Raster ausbrechen, damit ich das Kommando und das Zitat tun kann, um unser Raster aufzurufen . Ich muss mein Kunstbrett auswählen. Das erste Kommando beinhaltet ation, und das wird uns helfen. Oder ich kann mein ansprechendes Raster einschalten, indem ich die Befehlsverschiebung in der Zitatarbeit mache, so dass wir die Dinge etwas vergrößern können. Und ich spiele gerade jetzt mit verschiedenen Möglichkeiten, um zu sagen, melden Sie sich an, weil anmelden. Es ist nicht wirklich von meiner Benutzer-Persona. Lange in seiner alten Art von archaischen Begriff, Wesley verwendet etwas ein wenig weicher und freundlicher, also mache ich den Kleinbuchstaben fett. Aber ich sage auch nur offen, denn das ist, was wir tun wollen, ist die App zu öffnen und so wollen wir die offene App nicht so groß machen, dass sie nicht merken, dass sie auf ihr Foto einloggen klicken müssen . Also sagen wir, klicken Sie auf das Profil, um Ihre Zollbudgets grün zu laden. Okay, ich mache das viel kleiner Steuerlicht weiß und lass uns ein Zentrum ausrichten. Also möchte ich sicherstellen, dass es viel Atemraum und weißen Raum damit gibt, wir könnten sogar Diamanten am Boden haben. Hier haben wir gerade ein Experiment mit dem, was wir denken, gut aussehen würde. Wir könnten hier noch eine Bar machen, weil ich wirklich einen Kontrast zu diesem Wunsch haben will . Klicken Sie auf den Rand. Wir haben nur einen Füllstoff, der einen Befehl linke Klammer macht. Art von senden es rückwärts und Schichtsystem. Ich könnte mit verschiedenen Farben herumspielen. Wir machen unsere Gier, Farbe wird eine Bar haben, um zu helfen, diesen großen offenen Raum zu trennen. Und vielleicht könnten wir einen kleinen Pfeil haben, der nach unten geht. Also werden wir weitermachen und ein bisschen einfach oder einen Vermögenswert schaffen, der schmal sein wird, also werde ich mein kleines Pin-Werkzeug holen. Ich werde nur eine einfache Null ziehen, und ich werde das dazu bringen, die Grenze wegzunehmen oder tatsächlich die Grenze zu wollen. Lass es uns etwas dicker machen. Und lassen Sie uns einige runde Kanten zu unseren kleinen Linien machen. Also, jetzt sind sie schön und abgerundet. Lassen Sie uns machen, dass wir das jede dieser Farben machen können. Okay, also gibt es einen kleinen Pfeil. Vielleicht machen Sie es vier statt drei. Oder wir könnten es hier drüben im Weißen haben. Ich werde dieses Lob überarbeiten, und dann machen wir unsere erste Animation, also bleib dran. 12. Mobiles App-Design - Homepage Animation: Also möchte ich mit Kontrast herumspielen, wirklich etwas hinter den Profilbildern haben. Also schärft der Betrachter wirklich in diesen Profilbildern ein, und das ist, wenn ich erwachsen bin. Pop brachte die graue Box ein wenig nach unten, so dass es intersex und wirklich zieht das Auge in die Mitte des Bildschirms. Was genau das ist, was ich möchte, dass der Benutzer zuerst sehen soll. Also, wenn dieser wirklich kleine Text, es ist nicht groß und überwältigend, es ist sehr weich. Wer öffnet die App heute? Es hat einen Pfeil, der rechts auf die beiden Benutzerprofile zeigt. Ich fügte auch eine langsame bekommen, dass Ihr Körper einfach gemacht. Das wird wahrscheinlich eine Anforderung des Kunden sein. Und es gibt wahrscheinlich auch einige Copyright-Informationen, die ich auch hier ablegen muss . Also mache ich das kleiner. Vielleicht zehn. Oh, es ist aktualisiert. In Ordnung, also haben wir diese kleinen Informationen, die wahrscheinlich etwas sein werden, das wir in Betracht ziehen müssen . Das wäre eine Voraussetzung. Also denke ich, das ist nett und einfach. Ich glaube nicht, dass ich komplexer sein wollte. Lass mich einfach mit dem Pinwerkzeug hier rumspielen. Stellen Sie sicher, dass ich das in der richtigen Form habe. Ich mag es. Du könntest das weich machen. Ich könnte vielleicht eine seiner weichen machen, dass Nein, es ist irgendwie ordentlich. Diese Art von wie eine nette einfache Schnittstelle. Lassen Sie uns versuchen, damit nicht zu komplex zu sein. Okay, lassen wir das in Ruhe. Wir haben irgendwie unsere erste Seite, und so werden wir irgendwie ein bisschen Animation machen. Also werden wir in der Animation tun, so dass, wenn Sie den Mauszeiger über oder wenn Sie auf den Benutzer klicken, es irgendwie ein wenig vorwärts kommt. Also schneiden Sie und haben ein wenig von dieser Interaktion. Es ist also nicht nur eine veraltete, statische Titelseite. Also werden wir weitermachen und gleich nebenan ein weiteres Brett erstellen, und das könnte sogar oben drauf sein. Seit wir eine Animation machen. Wenn ich den Benutzerfluss mache, wenn ich Animationen mache, möchte ich stapeln. Und wenn ich dio Progression in Richtung Schnitt Ofen Ende Ziel, es mag, nach rechts zu gehen. Das wird also nur eine Animation sein. Das ist in Ordnung. Und wenn der Benutzer auf den nächsten Schritt schiebt, gehe ich gerne weiter nach rechts. Das war irgendwie gewählt Karte, aber du könntest es tun. Eigene besondere Wege. Eins, kopieren Sie das. Bringen Sie das alles runter. Und hier wird die Animation passieren. Wir werden sicherstellen, dass das eine exakte Kopie ist und alles in der gleichen Position ist, also werde ich das sehr leicht ändern. So wird die Animation funktionieren? Ich werde es haben. Dies ist der erste Teil der Animation, und dies ist der zweite Bildschirm der Animation. Also hier unten werde ich ändern, was ich ändern will. Also werde ich das der Endzustand der Animation sein. Ich will, dass er ein bisschen größer wird, und ich will, dass er unser Top ist. Also wird er der 1. 1 sein, der ausgewählt wird, also möchte ich vielleicht sogar den Namen ein wenig überlagern. Wir werden sehen, wie das aussieht. Also, jetzt werden wir animieren, und wir werden in den Prototyp-Modus drehen, um das zu tun, damit ich gehen und es auf Prototyp umdrehen kann. Okay, so machen Sie die Animation, wenn ich im Prototyp bin, und ich werde auswählen, was ich animieren möchte . Also habe ich das Sie haben eine Art Profil ausgewählt, und ich werde auf dieses andere kleine Profilstück klicken und ich werde dies eine automatische Animation sein. Der Übergang bewegt sich also von einem Klick zum anderen? Und das sind Animationen, bei denen Sie auf Auto animieren klicken und das Ziel wurde bereits ausgewählt, seit wir es dorthin gezogen haben. Wir wollen, dass das irgendwie Ah ist, lassen Sie uns diese Animation einfach gleich halten und sehen, wie sie aussieht. Okay, wir werden also klicken, um eine Vorschau anzuzeigen und zu sehen, wie unsere Animation aussieht. Hier ist unsere Animation. Okay? Wenn ich also auf Bob Smith klicke, geht es voran und bringt ihn vorwärts, eine Animation zur nächsten Folie. Also, was wir jetzt tun müssen, ist auf Sarah zu klicken und es wieder auf den Startbildschirm zu gehen. Also sagen wir, würde auf Bob Smith klicken, der seine Nutzung fortsetzt, Ihre Reise, und er wird sich einloggen. Aber was ist, wenn wir darauf klicken und wir Menschen eine Option geben wollen, auf Sarah zu klicken weil sie auf die falsche geklickt haben? Geben wir ihnen diese Option als nächstes. Jetzt bin ich noch im Prototyp-Modus, aber ich muss ein neues Kunstboard erstellen. Also werde ich gehen, um ein neues Kunstboard zu entwerfen und zu erschaffen. Richtig. Das wird also für ihre Reise sein, und sie wird ein bisschen größer sein. Das ist sie. Sarah Smith wird hier rüber gehen. Ich werde sehen, wie wir nicht hören, dass die in der gleichen Linie bleiben. Sie können Sarahs Profil vorwärts gehen lassen, stellen Sie sicher, dass sie eine ähnliche Art von Arrangement haben. Also gehe ich zurück in den Prototyp-Modus werden viel hin und her wechseln. Ich gehe weiter und verbinde mich. Das wird ihre Reise sein. Alles wird die gleiche Auto-Animate sein und alles ist gleich. Wenn wir also jetzt mit einem Klick auf ihn auf die Vorschau klicken, können Sie noch nicht zurückklicken. Wir haben das nicht eingerichtet, also klicken sie zurück, wir können auf sie klicken. Also, jetzt müssen wir es radeln lassen, so dass, wenn wir auf ihrem sind, es mit dem Zischen verbunden ist. Das scheint kompliziert zu sein, aber es ist wirklich nur, alles in eine Schleife zu verknüpfen. Also, jetzt haben wir los und bewegen sie. Das ist, wenn wir anfangen, wirklich zu kartieren. So könnte dies ihre Reise sein, und das könnte seine Reise sein. Jetzt werden sie anfangen, sich in verschiedene Persona User Journeys zu fächern. Okay, jetzt müssen wir wieder auflösen, nur für den Fall. Wir wollen von dieser Art von Reise zurückkehren und zu ihr zurückkehren. Wir müssen den Menschen die Chance geben, sofort raus zu kommen. Also lasst uns in Prototyp-Modi in den Krieg gehen. Und jetzt müssen wir das nur wieder verknüpfen. Dies könnte ein Link über die nächste Option. Aber wenn sie auf Bob klicken, bekommen wir einen Link zu Bob. Also, jetzt wird das einfach automatisch zu Bob animieren. Also, jetzt haben wir Wenn ich voran und zoomen Sie heraus und wählen Sie alle, Ich sehe irgendwie, wie die Reise ist der Klick auf Bob. Sie gehen die Bobs Reise hinunter, so dass sie auf sie klicken, sie gehen auf ihre Reise. Und wenn sie auf Bob klicken, geht es zurück zu Bobs Reise. Also haben wir noch eine zu tun, und das ist zu klicken, wenn sie auf Bob klicken. Aber sie wollen es wirklich tun. Sarah, wenn ich auf Sarahs Reise klicke. Also schaffen wir nur diese gigantische Art von Schleife hier zwischen allen von ihnen, damit sie einen offenen Kreis haben können und sie nicht in einer Sackgasse stecken. Also, jetzt drücken wir Play. Okay, also sagen wir, ich will ein Gesetz, dessen Eröffnung die App heute. Okay, Bob öffnet die App. Oh, warte bei Sarah öffnet die App. Oh, warte, warte. Bob öffnet die App. So können Sie jetzt diese Art von offenem Zyklus und Ton sehen. Nun, was wir tun müssen, ist, wenn sie wieder klicken, wird es in Bobs Reise geladen. Also, jetzt werden wir uns auf Bob konzentrieren können, oder du kannst dich auf Sarah konzentrieren. Aber lasst uns voran gehen und uns zuerst auf Bob konzentrieren. Also werden wir einfach weiter ins Design gehen und wir werden mehrere verschiedene Seiten erstellen . Also werden wir auf seine Homepage klicken, nachdem er sich anmeldet, wird genau hier sein. werden wir arbeiten. Es wird Sarahs Reise sehr ähnlich sein, also gehen wir weiter und machen ein neues unser Board direkt nebenan, und das wird sein erster Schritt sein, nachdem er sich eingeloggt hat. Lassen Sie uns jetzt den Home-Bildschirm für Bobs Budget erstellen. Also ging ich einfach Kopf und kopiert und eingefügt. Wir werden Bobs Profil haben, vielleicht würde hier oben eine Art von Schichten voran gehen und den Bildschirm verschicken. Dürfen wir diese animierte Art hier oben machen. Wir könnten Bobs Namen schnappen und ihn auflisten lassen. Ich versuche nur, ein Design-Thema zu behalten. Das brauchen wir wahrscheinlich nicht. Aber wir können das etwas anderes machen. Und vielleicht brauchen wir das auch nicht. Ich bin mir nicht sicher, aber wir werden Sarah nicht brauchen, es sei denn, wir wollen die Möglichkeit geben, sich irgendwo einzuloggen , was wahrscheinlich hier unten sein wird. Also wollen wir diese Information wahrscheinlich viel kleiner machen. Lassen Sie uns auf diesen klicken. Also hast du bemerkt, wenn ich versuche, diesen Cent zu ändern, tut es es global. Nun, das will ich nicht. Ich möchte diese spezielle, um sie nur auf dieser Seite zu verkleinern. Wie können wir die Verbindung aufheben? Globale Stile sind globale Symbole. Wir werden mit der rechten Maustaste klicken und ungroomed Symbol. Und jetzt wird es ehrlich und irgendwie eben sein. Also, jetzt kann ich es etwas kleiner machen, vielleicht zur Seite schieben. Wir können weitergehen und hineinzoomen und sicherstellen, dass wir die richtige Ausrichtung haben. Und eine andere Sache, die wir tun wollen, ist, einen Park oder Ausweise anzurufen. Also werde ich einen Befehl tun, um unsere reaktionsfähigen Gitter zu machen, die Verschiebung und Zitat befehligen . Kannst du das als Leitfaden verwenden, um zu sehen, wie wir es mit der Aufstellung der Dinge machen? Das würde das einfach ein- und ausschalten, wann immer wir eine Idee bekommen wollen. Das Gitter. Jetzt müssen wir herausfinden, was Bob Smith in diesem Apfel sehen kann. Lassen Sie mich seinen Namen etwas größer machen. Machen wir das 33. Vielleicht nicht ganz so groß. Ein grausamer Lasst uns 27. Es erhält die richtige Größe für diese Schnittstelle. Wir wollen auch in der Lage sein, zurück auf den Home-Bildschirm zu gehen, also werde ich ein kleines Hamburger-Menü, das sein wird herausrutschen und Ihnen einige erweiterte Optionen geben, um vielleicht zu dem anderen Benutzer zu gehen . Lass uns gehen und unser kleines Hamburger-Menü Pullout Icon machen. Cem wird sich ein paar dieser geformten Werkzeuge schnappen und anfangen, unser kleines Symbol zu erschaffen. Ich will keine Grenze haben, die das abklickt. Ich habe meine kleinen Griffe hier geschnappt und es zu einer Pillenform gemacht. Machen Sie es etwas kürzer. Und ich bekomme eine Halte Down Option und bekomme eine weitere Option, damit wir es tun können. Eine einfache ist, dass wir es stilisiert machen und ihn verschiedene Ebenen machen können. Schwächen Brechen Sie hier einen Kreis aus, halten Sie ihn irgendwie abgerundet, denn entsprechend dem Thema unseres Logos, gehen Sie hier runter. Es hat diese abgerundeten Ecken und eine Art von Übereinstimmung mit dem Thema, wenn ich die Symbole als auch entwickle . Okay, also habe ich eine Gruppe all diese zusammen, als eine Einheit, die es gruppiert. Wir werden es so groß machen. Ich will es haben. Am Ende, etwas Haut, eine Art von Halten Sie die Verschiebung. Also sind sie alle zusammen skaliert und bekommen einmal eine endgültige Platzierung für die Gruppe entscheidet, dass ich etwas mehr Abstand zwischen all diesen haben möchte. Das könnte also unsere kleine Ikone sein. Lassen Sie uns voran und gruppieren diese zusammen, finden Sie die richtige Farbe, können Sie Kalk tun, was gut mit seinem Namen gehen würde. Also lasst uns jetzt weitermachen und das zu einer Größenbestimmung machen, richtig? Denn, weißt du, wenn wir es geschafft haben, wird Global es undankbar haben. Das willst du nicht tun. Das wird auf jeder Seite sein. Also lasst uns das gruppieren und ich bin hier nur sehr wählerisch. Ich werde den Abstand zwischen jedem von ihnen machen. Trotzdem werde ich einfach jeden auswählen und zu meinem Ausrichtungsfeld gehen. Siehst du, wenn ich das richtige Ausrichtungstool habe, um das zu tun, dann gehen wir. Das ist also horizontales Distributionszentrum. Es hat keinen kleinen Pop-Out-Namen, aber ich weiß, dass es in Illustrator ähnlich funktioniert. Also tun Sie das Gleiche, um die gleiche Menge an Text zwischen dort zu verteilen, stellen Sie sicher, dass das richtig ist. Ich weiß es nicht. Es scheint, als wäre es ein bisschen da runter. Das ist 3.2 und das ist 4.2. Also bin ich mir nicht sicher, warum es das nicht tut. Sogar das Dankeschön für intelligente Führer. Wir können das bekommen, sogar ich werde sie alle wieder auswählen. Ich denke, ich bin endlich fertig Rechtsklick-Gruppe, bekomme die richtige Größe und dann kann ich das als Symbol hinzufügen und ich könnte das ziehen, so dass es horizontal von seinem Namen ist. Das könnte ein bisschen besser aussehen, aber wir werden sehen, was sonst noch hier sein wird, wenn wir anfangen, es zu blockieren, es zu verschieben, meine Grid-Befehlsverschiebung, Flotation rauszuziehen und es vielleicht mit der letzten Spalte auszurichten. Okay, also bin ich glücklich damit. Also machen wir das zu einem Symbol. Also richtig, klicken Sie und ich mache ein Symbol. Und jetzt kann ich mich daran erinnern, dass wir jederzeit, wenn wir das auf der Homepage eine Option geben wollen , diese Option auf der Homepage machen können. Aber ich denke, es ist einfach, dass wir wissen müssen, wer sich zuerst eingeloggt hat. Versuchen wir also, ihnen weniger Optionen zu geben. Je besser 13. Mobiles App-Design – User: bevor ich zu aufgeregt und anfangen, den Hamburgerpool rutschen Informationen. Ich möchte wahrscheinlich diese Budgetseite zuerst beenden, damit ich sie kopieren und einfügen kann und meine Animation und den gleichen Bildschirm angezeigt haben. Also lasst uns das jetzt machen. Wir werden das Wiederholungsraster verwenden, um hier eine wirklich schnelle Art von Seite zu erstellen. Also muss ich hier irgendwie ein paar Formen kreieren, irgendwie sein Budget sein. werden ihn ein bisschen dünn machen, denn wir werden das ziemlich viel auf einer Seite haben, damit wir nicht scrollen müssen. Sie machen ein wenig wie eine Pille geformt, aber nicht viel. Was cool ist, ist, dass die Optionstaste gedrückt halten und einfach tun kann, Ah, ein paar Viertel. Ich muss sie nicht alle umrunden, damit wir diese Form haben können, wenn wir denken, dass das cool aussieht . Aber ich mag es irgendwie abgerundet wegen unserer Marke. Sie dazu, diese Art von Arbeit zu haben, aber ich werde sie einfach rausschieben. Es ist also ein sehr, sehr subtiles Mädchen. Ich werde meine Grenze behalten, aber ich schaffe es. Lassen Sie uns ein sehr, sehr hellgrau machen oder ein dunkelgrau machen. Lass uns etwas tun. Lass es uns super dünn machen. Sie schon. Ich frage mich, ob ich eine 0,5 machen könnte. Das kann ich, ja. Also habe ich nur eine sehr, sehr dünne Grenze. Wir könnten einen Schlagschatten machen, aber ich weiß nicht, wie das aussehen wird. Das könnte zu schwer für diese Art von schlichtem flachem Design sein, für das wir uns entscheiden werden. Machen wir das hellgrau. Nicht ganz weiß. Das ist zu stark. Also nur durch ein bisschen von einer grauen Art von gibt es eine schöne Erscheinung. Und so lassen Sie uns unsere erste Nummer Cisplatin Nummer setzen. Nun, was könnte nur etwas zu tun haben, um ein paar Rätselraten zu füllen? Hier haben Sie 12.000 eingelegt, weil das sein Bankkonto sein könnte. Vielleicht ist er wirklich Oh ? Nun, ich mache eine Art Kerl und lassen Sie uns das tun, würde wahrscheinlich eine Farbe hier für ein Dunkelgrau setzen müssen ich mache eine Art Kerl und lassen Sie uns das tun, würde wahrscheinlich eine Farbe hier für ein Dunkelgrau setzen müssen. Also lasst uns weitermachen. Ich denke, wir haben eine hier, also lasst uns das zu unseren globalen Stilen hinzufügen. Ich klicke nur auf unser Grau und füge es zu unseren Farb-Assets hinzu, und ich könnte in der Lage sein, unseren Typ zu dieser Farbe zu machen. Das wird irgendwie sein Gleichgewicht sein, und dann halten wir einfach fest. Option. Dies wird Bankkonto Nummer eins sein. Also jetzt müssen wir den Typ klein genug machen, wo wir einen langen Bankkontonamen passen können. Denn wenn wir eine App entwerfen und jemand einen wirklich, wirklich langen Bankkontonamen hat , könnte es unser gesamtes Design durcheinander bringen, wenn sie anfangen, sie zu entwickeln. Also müssen wir flexibel sein und fähig sein, lange Namen in kurzen Namen zu haben und immer noch haben es technisch gut funktionieren. Wir müssen über die Entwicklungsseite nachdenken, wenn wir diese schönen Designs machen, so dass es praktisch ist. Lasst uns das noch kleiner machen. Versuchen wir es 16. Es gibt ein Bankkonto. Eins. Lassen Sie es uns versuchen. Wir könnten das entweder mutig oder kühn schwächen. Lasst uns ein bisschen Kontrast haben. Wir haben eine dünne Lasst uns das mutig sein. Nun, was ist das? Vielleicht nicht ganz eine Schule. Lassen Sie uns versuchen, ein Medium Metallic wurden nur mit Design experimentieren. Lassen Sie uns eine Art Design-Element haben, das teilt, dass wir eine Bar hier setzen könnten, um die Elemente zu trennen, wo wir eine solide Box nehmen können. Nehmen Sie die Grenze ab und wir könnten sie rückwärts schicken, damit der Typ davor ist. Haben Sie ein bisschen Teilung hier. Weißt du, das könnte eine Option sein. Machen Sie es gleiche abgerundete Ecken. Gehen Sie weiter, machen Sie es perfekt passt. Bringen wir die Grenze wieder rein. Lassen Sie uns es die gleiche Hälfte, einen halben Punkt, Größe machen und es weicher oder dunkler machen und nur eine halten Option. Ich erstelle nur die gleiche Kurve wie die dahinter. So könnte das Kontrast bringen. Wir können anstelle eines weißen Phil machen, der sogar dunkel grau machen könnte, Phil. Und soll das grün sein. Es könnte also sein, äh, wir könnten einen Pfeil haben, der anzeigt, dass in letzter Zeit zugenommen haben. Also lasst uns weitermachen und dort ein Pfeilsymbol bekommen. Und sobald wir eins davon entwickelt haben, werden wir das Wiederholungsraster verwenden, um sie alle in Sekunden zu erstellen. Also verbringen wir viel Zeit damit, diese erste Bar zu machen. Aber all die anderen Balken werden wirklich, wirklich schnell passieren . Lass mich gehen und ein Pfeilsymbol bekommen, oder ich kann es hier in X D zeichnen. Also lasst uns das tun, damit wir üben können. Seit dem Erhalten von Arpin Tool war ein einfacher Pfeil. Nichts zu Aufregendes. Geh weiter und fülle das aus und nimm die Grenze raus. Wer könnte es abgerundet machen? Wir könnten diese Anziehungsform zu unserem Thema passen lassen. Der kleine Pfeil, den ich hier erschaffen habe, hätte ihn nicht fertig gemacht. Ich habe mit der rechten Maustaste geklickt und ihn zu einem Symbol gemacht. Also, wenn ich mich jemals an diesen Pfeil erinnern muss, kann ich mich daran erinnern. Aber ich wollte irgendwie an die Grundlagen dieser Seite denken. Also wird diese Seite für das Budget sein. Es ist also gut, weniger über Ihre Bankkonten auf ein wenig mehr über Ihr Tagesbudget zu sein . Also für ah, Budget für Lebensmittel Budget für Elektro. Das ist es, was wir hier erschaffen werden. Also fing ich an, diese erste kleine Box zu erstellen, in der sich das befinden würde, und woran Sie denken müssen, ist, dass Sie über den Entwicklungsprozess nachdenken müssen, wenn Sie den Designprozess durchführen. Also muss ich denken, dass diese $150 bis zu $10.000 steigen könnten, also müssen wir sicherstellen, dass genug Platz für die Anzahl der Ziffern in diesem Bereich ist . Und das Gleiche für hier. Wir hätten ziemlich lange haben können. Der Benutzer wird in der Lage sein, den Budgetnamen anzupassen. Aber wir könnten diese Charaktere immer einschränken. So müssen wir es möglicherweise auf so viele Pflegefiguren in diesem Bereich verurteilen beschränken. Oder wir könnten den Typ Gesicht kleiner machen und irgendwie in der Lage sein, einen längeren Zeitraum zu haben. Also müssen wir darüber nachdenken ist, dass ich weiß, dass viele Leute diese schönen Designs mit dieser schönen großen Typografie machen , aber sie denken nicht über längere Formnamen nach, die in diese kleinen Räume passen müssen. Also werde ich voran gehen und wählen Sie all dies ist eine Einheit und was ist großartig an der Antwort der Größenänderung, was ist, dass ich es hier angeklickt habe, da ich das länger machen könnte, und es wird automatisch die Größe ändern und es länger und sehen Sie, wie es sich automatisch anpasst. Also werde ich nur ein bisschen eine Marge auf der rechten und linken haben, damit ich so viel Bildschirm-Immobilien wie möglich nutzen kann . So konnte ich so viele Charaktere für den Namen hier drüben passen. Einige nur eine Gruppierung dieser Elemente und schieben sie wieder hinein. Okay, das wird uns ein Maximum an Platz für vielleicht zwei weitere Ziffern hier geben. Und dann kann ich hier einen ziemlich langen Namen haben. Also, wenn ich mich 100% zufrieden damit fühle, können wir anfangen, das Wiederholungsraster zu machen. Also lassen Sie mich ein bisschen mehr Spielraum hier auf der rechten Seite bekommen. Ok? Ich benutze irgendwie mein Ausrichtungsfeld hier, um zu sehen, ob alles ausgerichtet ist. Wie es mir gefällt. Okay, also werde ich fortfahren und alle vier zusammenfassen, richtig? Klicken Sie und gruppieren Sie. Also, das ist jetzt eine Einheit. Und hier ist, wo ich gerne verwenden, um Raster zu wiederholen. Also könnte ich das Wiederholungsraster verwenden und so viele erstellen, wie ich denke, sie würden auf dem Budget haben . Ich werde die Säulen halten und zusammenbrechen, die ich will. Ich will den Abstand nicht knapp haben. Also vielleicht gleich hier, lass uns noch eins machen. Wir können es jederzeit später löschen. Okay, jetzt ist das jetzt sofort. Eine Gruppe Also, wenn ich diese einzeln bearbeiten möchte, mache ich einfach mit der rechten Maustaste und ich werde das Gitter nicht in den Raum bringen. Und jetzt kann ich zurückgehen und einige dieser beiden verschiedenen Titel ändern und für verschiedene Zahlen, um ein wenig mehr Realismus zu haben. 14. Mobiles App-Design – User - Part2: Also habe ich ein paar Minuten verbracht, über die Funktionalität jeder Bar in jeder Haushaltslinie nachzudenken , und ich wollte irgendwie ein paar Details erstellen. Wir wollen also, dass der Haushalt übrig bleibt, aber wir wollen auch hier den gesamten Haushalt haben. Wir wollen einen Hinweis haben, damit jemand das Gesamtbudget ändern kann. Aber wir wollen auch einen Hinweis haben, wo sie klicken und zeigen können, wer das Budget ausgibt , die Frau des Mannes. Also könnten wir zwei verschiedene kleine Indikationen oder Symbole haben, die wir für jeden Balken erstellen müssen , bevor wir zum Raster gehen und anfangen, alles zu wiederholen. Willst du diese Linie perfekt bekommen. Also werde ich gehen und irgendwie das Pin-Werkzeug nehmen, und ich muss vielleicht in Illustrator gehen, um ein ausgeklügelteres Symbol zu einem anderen Datum zu erstellen. Aber lassen Sie uns voran und erstellen Sie eine Art Pfeil, der darauf hindeuten könnte, dass Sie das Budget erhöhen oder erhöhen könnten . Also vielleicht nur ein kleiner Pfeil, genau wie wir zuvor erstellt haben, machen es rund um die Kappe, vielleicht machen Sie es ein bisschen kleiner, nur ein kleiner Hinweis, wo sie sich fühlen können, als ob sie darauf klicken und es ändern können. Vielleicht, wenn wir ein Limettengrün machen, wird es ein bisschen besser hervorstechen. Das Pipettenwerkzeug könnte es vielleicht so probieren. Okay, das ist also eine Art Indiz, wo sie den Mauszeiger über und sie könnten das Gesamtbudget ändern . Und jetzt brauchen wir noch einen Indikator, um zu klicken, damit dies in ein anderes Menüsystem gehen könnte , das alle Lebensmittel anzeigen kann, die sowohl von Bob als auch von Sarah ausgegeben wurden . Also jetzt wollen wir detaillierte Transaktionen hier in der Nahrung haben. Also müssen wir nur ein wenig Platz für beide machen. Ich muss mich umziehen. Er ist Begrenzungsboxen, also nehmen sie nicht so viel Platz ein. Aber lassen Sie ihn dort, wo ich in der Lage sein könnte, längere Titel zu haben. Dasselbe mit dem Budget. Wir wollen eine Linie, die hier links unten, so dass wir detaillierte Transaktionen machen und gehen Sie voran und greifen das Symbol. Ich habe es noch kein Symbol gemacht. Ich habe nur irgendwie das Symbol erstellt Wollte es noch global machen. Vielleicht machen Sie einfach eine grüne Ich denke, das ist für die Grenzen sein wird. Tun Sie eine Füllung. Lass mich eine Grenze machen. Holen Sie sich das Pipettenwerkzeug und probieren Sie dieses Blau. Da gehen wir. Wir könnten das ein bisschen mehr herauskommen lassen. Wir könnten noch eine kleine Pillendose darunter hinzufügen. Lassen Sie uns eine sehr kleine Grenze machen, um wieder 0,5 zu machen, und ich könnte einen Schlagschatten für die Wirkung hinzufügen. Aber ich weiß nicht, ob mir das zu sehr gefällt. Lassen Sie uns die Pillenform machen und lassen Sie uns diese rückwärts in das Schichtsystem schicken. Ich will wirklich, dass das herauskommt, also mal sehen. Versuch es, Align. Wir werden verkleinern und sehen, wie das aussieht. Wir müssen den Typ vielleicht ein bisschen größer machen, um ein lichtloses Medium zu haben, und lassen Sie es uns acht machen. Ich möchte wirklich sicherstellen, dass die Leute wissen, dass sie dort für detaillierte Transaktionen gehen können. Ja, mal sehen, wie das aussieht. Wir werden mit der rechten Maustaste klicken. Wir werden das zusammenfassen und das Wiederholungsraster machen. Wir gehen zum Raster und wir werden einfach runterziehen. Es ist gut, es zu replizieren, und wir gehen hier hoch und ändern die Spalten und wir werden vielleicht zwei weitere gleich dort nachbilden . Ich finde, das sieht toll aus. Also werde ich ein paar Minuten verbringen und einige dieser verschiedenen hier drüben anpassen , also heißt es nicht immer und immer wieder Essen. Es hat ein realistischeres Budget. Also fange ich an, alle Details auszufüllen, um dies so realistisch wie möglich zu machen. Also ändere ich die Art der Kategorien, und jetzt habe ich spezifische realistische Budgets. Also werde ich hier unten eine Gesamtsumme einfallen wollen. Gehen wir also weiter und machen dieses Logo ein wenig kleiner. Vielleicht stecken Sie das nach rechts. Ich konnte nicht mehr Bildschirm Immobilienkurs brauchen. Wir könnten auch auf unser Artboard klicken und vertikales Scrollen durchführen und anzeigen können, dass Sie nicht alles über der Falte halten müssen. Wir könnten eine längere Scrolling-Option haben, Also mach dir keine Sorgen zu viel über Immobilien, aber ich persönlich, Ich mag es, so viel wie ich kann auf einem Bildschirm passen. Sie müssen nicht scrollen, also lassen Sie uns eine Gesamtfläche haben. Also gehen wir einfach voran und probieren. Lassen Sie mich das nicht in den Raum bringen. Gehen Sie weiter und halten Sie sich fest. Option, ich werde nur meine Gesamtzahl ausprobieren. Ich werde das weiß machen und natürlich natürlich ganz mutig. Das hebt sich also wirklich unter den anderen ab. Machen wir ein kondensiertes Schwarz könnte irgendwie cool aussehen. Lassen Sie uns trocknen, das ist ein kühnes Wir werden es ein bisschen größer in der Größe machen. Versuchen wir es also 37. Wir werden verkleinern, damit Sie sehen können, wie es aussieht. Machen wir es etwas kleiner, vielleicht 32. Das wird unsere Gesamtsumme sein, also können wir voran gehen und das probieren. Bringt das runter und lasst uns das nicht ganz so groß machen. Machen wir das 30. Wir könnten versuchen, Linie nur einen Kontrast zu ihren Farben zu haben. Vergrößern. Es wird total sein. Also müssen wir herausfinden, dass wir vorerst nur eine Schätzung bekommen. Also lassen Sie uns einfach sagen, sie haben um C 405 106 7 Losen etwa $1400 oder so ausgegeben. Lassen Sie uns hier nur ein wenig raten. Wir könnten den tatsächlichen Betrag herausfinden, und ich werde den kleineren Text kopieren, der nach unten gezogen wurde. Jetzt werden wir sagen, dass sie für 14 50 verbracht haben, von sagen wir, dass ihr Gesamtbudget 2200 Monate betrug. Wir müssen das größer und mutiger machen. Also lassen Sie uns das zu einem mittleren Gewicht machen. Machen wir es 12 Punkte und lassen Sie es weiß machen. Okay, also gibt es unsere erste Budget-Seite für ihn für Bob. Und was wir tun werden, war, dass wir unsere erste kleine Animation machen. Wir werden so viele Systeme praktikabel machen. Also sie so Bob klickt auf, er meldet sich an Dies ist sein Startbildschirm. Und jetzt will er andere Optionen haben, nachdem er sein Budget angesehen hat. Wir werden auch detaillierte Transaktions-Schaltflächen verknüpfen. Wolltest du wenigstens zwei davon machen? Und das wird auf einen anderen Bildschirm klicken, der die detaillierten Transaktionen für Lebensmittel haben wird . Und auch, wir werden noch einen haben, wo wir das Budget ändern können. Vielleicht ist es ein Schieberegler, der herausspringt oder so, aber wir werden diese User Journey herausfinden, während wir diese 15. Popout: Oh, jetzt werden wir unseren kleinen animierten Hamburger machen, viele, die herauskommen werden, nur für den Fall, dass Bob etwas anderes tun will, als auf diese Buttons zu klicken . Er will zurück zum Menüsystem, also schaffen wir die Notwendigkeit, einen anderen Rahmen zu erstellen, um das zu tun. Es gibt also einen einfachen Weg, dies zu tun und zu sitzen, um eine neue zu erstellen und kopieren und einfügen, wie ich es getan habe. Sie könnten mit der rechten Maustaste klicken und kopieren und dann Boom basieren, genau so. Und wir müssen über unsere User Journey nachdenken. Das ist er also, der sich durch seine User Journey bewegt. Also werden wir in der Lage sein, dieses Hamburger-Menü auf dieser Seite zu machen. Also hier ist der Trick dazu, und ich brauche vielleicht etwas mehr Platz, also muss ich das vielleicht nach Süden schieben, um das Menüsystem zu erreichen. Ich werde das alles zusammen halten. Ich werde mit der rechten Maustaste klicken und gruppieren. Also hier ist der Trick, um automatisch zu animieren. Ich werde zuerst mein kleines Pop-Out-Menü-System machen und lassen Sie uns voran und machen, dass ihre Bruchfarbe wir es ein wenig transparent machen könnten, aber lassen Sie uns einfach eine einfarbige Farbe für jetzt. Ich werde hier irgendwie irgendeinen generischen Typ reinziehen. Es wird die Option halten und sie an die Spitze bringen. Dies wird Link ein Link zu Link drei sein und lassen Sie uns nur drei einfache Links haben. Nun, lassen Sie uns einen Link machen, warum füllen Sie dieses Menü nicht ein wenig aus? Und lassen Sie uns etwas mehr lassen oder Abstand zwischen den Zeichen setzen, die hier drüben ist, Das wird genug Abstand sein. Also, wie ein Link zu drei, müssen wir das Hamburger-Menü nicht den ganzen Weg gehen lassen. Wir könnten es hier runtergehen lassen , und wir wollen vielleicht auch unsere Ikone mit uns runterbringen, damit sie es schließen können. Okay, also gibt es ein kleines Menü. Also, was wir jetzt tun werden, ist, dass wir all das alles in der Speisekarte zusammenfassen, eine Gruppe zusammenbringen und hier rüber gleiten und alles hier. Wir werden alle Original-Bildschirm zusammenfassen. Wir kriegen eine Gruppe, und wir schieben ihn von der Kunsttafel und schieben ihn nach oben, genau da, da, wo wir wollen, dass er überlagert. Das wird also den Anschein geben, dass dies herauskommt und Animation und Verschiebung Bildschirms über, Lassen Sie uns voran und machen es animieren. Wir gehen hier hoch nach oben. Das wird das sein, was die Folie nach links auslöst, und wir werden das bis hierher anklicken, und wir werden es zu einem Übergang machen. Und wir wollen, dass der Inhalt nach links gleitet. Wir wollen also, dass dies dazu übergeht, also wird dies nach links herauskommen. Also lasst uns einen schlauen Druck nach links machen. Wir haben einen Stoß nach links und wir machen ein leichtes Ein- und Aussteigen, was ein schöner Übergang sein wird. Und lass es uns wirklich schnell machen. Also machen wir nur 0,1 Sekunden und wir wollen diesen Zehenlink zurück und können das Menü, das wir gerade herausgebracht haben, zusammenbrechen . Also bringen wir das hier wieder hoch, und sie wollten dasselbe tun, aber anstatt nach links zu schieben oder was? Der Punkt, um das Menü zurück nach rechts zu schieben, also statt links werden wir es tun, richtig? Es muss also Verbindungen hier unterstützen, was hier eine Folie bleibt, was eine Folie sein wird. Richtig. Also, jetzt werde ich hier klicken. So gut zu sehen, meine Vorschau von diesem speziellen Kunstboard, anstatt zurück zu den Anfängen gehen und hier klicken, in der Lage sein, eine Vorschau von dieser Seite beginnen. Mal sehen, wie das aussieht. Wir werden klicken, dass gleitet schön mit einem Klick zurück und das rutscht zurück. Sie haben also eine Rutsche, oder? Schieben Sie nach links. Das sieht also ziemlich schön aus. Und dann könnten wir sogar die eine Seite dieses einen Frame hier nehmen, und wir werden in der Lage sein, diese zwei verschiedenen Seiten in unserem gesamten Design zu verknüpfen. Aber wir wollten dem Kunden nur zeigen, wie die Anwendung in Bezug auf das herauskommende Menüsystem aussehen würde , und wir könnten dies ein wenig hübsch machen. Wir machen das als Nächstes, und dann können wir mit unserem App-Design fortfahren. Und ich ging voran und lud einige Icons herunter und passte ihn irgendwie ein wenig an unsere Marke und unser Farbschema an. Ich werde nicht voran gehen und diese als kleine Symbole von Kniebeugen verwenden. Diese großen Budget-Planer Kreditpunkte werden dieses Symbol später auch. Etwas weniger. Nachrichtensymbol senden und Benutzer wechseln. Ich würde gerne ein paar kreuzende Pfeile bekommen, aber ich kann diese immer zu einem anderen Zeitpunkt ersetzen. Ich werde die etwas kleiner machen. Jetzt, wo ich sie sehe. Ich glaube nicht, dass ich ihn so groß brauche. Ich habe nur ein kleines Symbol, um dem Benutzer zu helfen, diese Informationen aufzuschlüsseln und zu wissen, was es ist. Also lasst uns ein paar Trennlinien haben. Also werde ich hier nur eine kleine Fahrt machen. Ich mache nur ein paar Trennlinien, sobald ich es habe. Wie es mir gefällt. Ich kann immer nur die Option gedrückt halten und eine andere nach unten gezogen halten Option Hoffnungen. Und eine andere Sache ist, wir könnten die Tops und Botschaft erstellen. Und was könnte eigentlich auch ein Wiederholungsraster machen? Also, wenn wir eine Box erstellen wollten und dann einfach das Raster den ganzen Weg nach unten wiederholen und ich möchte ein wenig Kontrast hinzufügen, also ändere ich nur einige dieser Taub alt sein könnte das erste Wort fett sein. Also jetzt haben wir ein bisschen mehr von einem polierten Menüsystem. Lassen Sie uns voran und speichern Sie es und sehen, wie das funktioniert Wenn wir spielen, sollte es immer noch gleich bleiben, und ich habe auch einen Schlagschatten zu dieser Box hinzugefügt, um es aussehen zu lassen, als wäre es überlappend. Also haben Sie diesen oberen grauen Balken und Sie bemerken genau hier. Dieser schöne Schlagschatten hilft, etwas Definition in das Pullout-Menü zu bringen. Gehen wir zurück und sehen, wie das aussieht. Es ist Press Play, und wir werden es herausspringen lassen und es dann schön knallen lassen. Also, jetzt müssen wir nur all diese Seiten erstellen, und Lincoln wird wahrscheinlich nicht all das in dieser Klasse tun. Aber wir könnten wenigstens eins davon verknüpfen und eines von jedem, vielleicht eines der detaillierten Transaktionen und eines der verbleibenden Budgets, nur ein paar von denen tun, um zu sehen wie dieser Prozess funktioniert und wie es wirklich machen könnte, dies zu einem voll funktionsfähigen ein Prototyp 16. Transaction: Also jetzt haben wir unser ausziehendes Menü Set. Lassen Sie uns voran und machen einige dieser anderen Seiten, die beginnen können, sie zu verknüpfen. Also haben wir diese Art von Verbindung. Aber was ist mit den detaillierten Transaktionen? Was passiert, wenn Bob oder der Benutzer auf detaillierte Transaktionen klickt? Nun, was ich möchte, dass die App zu tun ist, wenn Sie darauf klicken, dass zeigt alle aktuellen Transaktionen für Lebensmittel. Also sagen wir, wir machen die 1. 1 und es sagt auch, wer was ausgegeben hat. Also hat Sarah es ausgegeben? Also hat Bob es ausgegeben? Damit, mit wem Sie diesen Hap teilen, Sie sehen können, wer das Budget verwendet und wie so? Was ich gerne tun würde, ist, dies auf eine ganze Nonther Seite zu schicken. Ich frage mich, ob ich keine kleine animierte Dropdown-Box machen kann, um Um anzuzeigen, also müssen Sie diese Homepage nicht verlassen. Sie können einige Dinge tun und einige Dinge anzeigen, ohne auf eine andere Seite wechseln zu müssen . Also werden wir etwas Ähnliches tun, wie wir damit gemacht haben und eine kleine animierte Art Pop-Out-Box machen . Also werden wir das nehmen und replizieren. Also klicke ich auf das Kunstbrett und ich werde es kopieren und dann nach rechts einfügen, damit wir alles intakt halten, aber wir werden eine kleine Dropdown-Art von Box machen, die irgendwie alle Transaktionen zeigt, die passiert mit Essen und vielleicht ein kleiner Pfeilindikator, wo sie es auf eine neue Seite laden können, wenn sie den gesamten Verlauf sehen wollen. Also, jetzt haben sie eine kleine arme Pullout Box gehen. Ich möchte sicherstellen, dass dieses Essen oben auf der armen Kiste steht. Also ging ich voran, schuf eine Gruppe daraus, und ich kann voran gehen und Befehl in die rechte Klammer Zehe tun. Senden Sie es durch das Layering-System, setzen Sie es oben, oder Sie können hier nach unten gehen, um Ihre Ebenen und Sie werden in der Lage, alle Ihre Ebenen mit diesen bestimmten Objekten sehen Sie Gruppe sehen, und dann können Sie es den ganzen Weg nach oben schieben . Es ist also die oberste Schicht, die ich meine kleine Abkürzung machen konnte, und ich konnte sehen, wie es durch das Schichtsystem bis nach oben geht. Ja, das wird zusammenbrechen. Okay, jetzt müssen wir herausfinden, welche Farbe wir machen wollen. Lass uns unser Asset-Panel aufrufen und herumspielen. Wir könnten es tun. Ah, dunkle Dropdown-Menü und haben hellere Farben. Oder wir können eine Probe machen. Ich habe kein Hellgrau in meinem Vermögen. Klicken wir hier auf diese Farbe. Ich füge mir diese leichte Note hinzu. Oh, es hat eine ganze Reihe von ihnen hinzugefügt. Ich will wirklich nur einen. Also lass mich hier eine Kiste holen, wenn wir es tun. Phil, lass mich die Farbe schnappen. Nimm jetzt die Grenze raus. Ich habe dieses Beispiel bekommen und mit der rechten Maustaste klicken und Farbe zu Assets hinzufügen. Jetzt haben eine Art hellgraue Farbe, so dass wir diese Farbe Pop out, was ich denke, könnte am besten aussehen. Lass uns wieder eine schöne dünne Grenze 0.5 machen. Jetzt machen wir ein wenig Schlagschatten. Ich denke, wir brauchen diesen Schlagschatten, um die verbleibenden Optionen zu übertreffen. Dies wird also Ihre detaillierten Informationen sein. Lasst uns probieren. Gehen wir weiter und ich bin Gruppe hier. Ich werde nur dieses Essen probieren. Halten Sie die Option gedrückt. Lass uns noch einmal eine Gruppe haben. Gut gemacht. Option zieht. Das wird unser erster Lebensmittelartikel sein und wir werden das Wiederholungsraster machen, damit wir nicht immer und über die Krabbe eine Linie machen müssen, die hier eine Art Schachtel für unsere erste Transaktion macht . Jetzt machst du das ein schönes Hellgrau. Das wird also Transaktion eins sein. Also sagen wir, es war Essen Löwe. Es ist ein Lebensmittelgeschäft, in dem ich wohne. Und sagen wir, es könnte das nicht zusammenbrechen. Schnappen Sie sich diese Option hier und lassen Sie uns das zusammenbrechen, damit es uns nicht in den Weg kommt. Machen Sie das dunkelgrau. Und sagen wir, sie haben 55 27 nur einige Zufallszahlen ausgegeben. Lass es uns kleiner machen. Es gibt also einen Kontrast zwischen diesem Hauptteil und diesem, also lass es uns kleiner machen. Aber Boulder. Also lasst uns 18 machen. Aber lassen Sie uns einen Felsbrocken warten den ganzen Weg hinüber, machen es sogar. Es gibt eine Essenslinie, aber wir müssen auch einen Hinweis darauf haben, wer es ist, der dieses Element ausgegeben hat, um hier nach unten zu scrollen . Und das wird Bob sein, der es getan hat. Also hat Bob Smith diese Transaktion gemacht. Aber lassen Sie uns das kleiner und mutig machen. Warten Sie unser kühnstes. Wir haben und machen es noch kleiner, vielleicht 12. Lass uns das zu einer Farbe machen, die wirklich herauskommen wird. Es wird es zu dieser Farbe machen. Also, jetzt wird das zeigen, dass Bob derjenige ist, der das ausgegeben hat, und lasst uns ein paar mehr machen und dann werden wir ihr Wiederholungsraster machen. Also lass uns mal sehen. Ich frage mich, ob das gut aussehen würde. Mutig. Das ist einfach zu viel. Zu stark. Okay, also werden wir fortfahren und auf all diese Gegenstände klicken. Wir werden die zusammenfassen, und wir werden ein bisschen betrügen und unser Wiederholungsraster machen. Wir ziehen runter, über, über, über, über, über, über, über. Lassen Sie uns tun, ähm, wir könnten fünf Transaktionen machen. Und lasst uns den Abstand zwischen ihm zusammenbrechen, bis es genau hier ist. Und dann wollen wir noch ein bisschen mehr Möglichkeiten haben. Wir werden das unten haben, und ich werde hier am Ende eine kleine Box machen, und ich bin mir noch nicht sicher, welche Farbe hat, aber ich brauche es, um einen hohen Kontrast zu haben. Vielleicht wird der Schwarze und das hier einen einfachen Pfeil drauf haben, also werde ich voran gehen und das runterbringen. Holen Sie sich mein Stift-Werkzeug, nur ein kleiner Pfeil, so dass sie mehr klicken können, um die ganze Geschichte der Transaktionen zu erhalten . Mach die Limette gefärbt. Lassen Sie uns die Grenze Kalk machen, nicht um sie abgerundet zu machen. Abgerundete Kappen Lass es uns dicker machen. Nicht ganz so dick, vielleicht drei und vielleicht zwei. Da ist dein kleiner Hinweis, dass du das zentrierte, ausgerichtete Go bekommen könntest. Das ist ein kleiner Hinweis, dass sie mehr tun könnten, oder Sie können auch mit Farbe spielen. Wir könnten einen kleinen Rauch haben oder alle Transaktionen sehen, damit wir sowohl ein visuelles als auch ein Wort haben können . Es wird das runterbringen. Bringen wir das im Schichtsystem auf. Ich halte jetzt nur den Befehl und die rechte Klammer. Ich kann zu Ebenen gehen und das tun, um dies zu verkleinern. Das waren all diese kleinen Details, die wir uns vorstellen müssen. So sehen Sie alle Details, und vielleicht ist dieser Pfeil, anstatt nach unten zu gehen, auf der rechten Seite. Schauen wir uns das nach rechts an und machen es kleiner. Lassen Sie uns machen, dass ein Tallix haben Sie keine Kursivschrift los. Also lassen Sie uns Metallic leben und machen es zu einer 10. Es ist gut für jetzt, so dass sie alle Details sehen konnten, so dass ihm nur irgendwie eine Idee gibt. Die dort sind also Bob Smith und das könnte das sein. Sag mal, das hier ist Sarah Smith, und lass uns ihr eine andere Farbe offen machen. Ich brauche vielleicht Zeh anders als diese. Nun, da ich damit zufrieden bin, lassen Sie mich in der Gruppe das Grid und jetzt könnte ich jeden einzelnen bearbeiten. Lassen Sie uns das mit wählen Sie diese beiden und machen Sie einen Schatten. Da gehen wir. Das macht es ein wenig mehr drei D und geschichtet. Ich bin mir nicht 100% sicher, was das Rot angeht. Es hilft wirklich visuell, es hervorzuheben. Ich frage mich nur, ob es ein bisschen zu verschieden ist von dem Farbschema, das wir haben, so dass wir diese Farben immer ziemlich einfach wechseln können. Ich denke, ich muss das wütend machen, um Zugang zu bekommen, damit Sie das in die Limette ändern können, die Sie nicht sehr gut sehen können. Ich könnte es auf das Grün ändern, und Sie könnten es den verschiedenen Benutzern sagen. Lass uns das machen. Ich glaube, das Rot war etwas zu viel. Nun, zu verärgerlich. Aber deshalb testen wir die Dinge, um zu sehen, ob sie funktionieren. Also jetzt lasst uns das cool und animiert machen. Also gehen wir in den Prototyp-Modus. Also, jetzt, wo wir im Prototyp-Umzug sind, ist das los und isolieren Sie diesen Knopf, denn das wird der Knopf sein, auf den wir klicken werden, um diese besondere Angst zu laden. Also was? Das ist seine Gruppe zusammen, also müssen wir einfach mit der rechten Maustaste klicken und auf die Gruppe klicken, damit wir Zugang zu Justice Button bekommen können . Das ist also der Knopf. Wir wollen, dass der Benutzer drücken, um zur Seite zu kommen, zu sein, zu gehen und klicken Sie hier. Und wir werden sehen, ob wir nicht tun können, eine Auto animieren und das wird auf Klick sein, so dass die auf Tippen große Leichtigkeit in, Leichtigkeit aus. Lassen Sie uns das irgendwie testen und sehen, wie es aussieht. Klicken wir auf unsere sind hier nicht langweilig, damit wir unsere Vorschau dort beginnen können. Perfekt. Es sieht also fast so aus, als ob es herausrutscht, oder? Und jetzt müssen wir nur noch diesen Button zurückklicken. Also im Moment stecke ich fest. Ich kann mich nirgendwo bewegen. Was wir also tun wollen, ist in der Lage, diesen Button zu isolieren und ihn direkt zu hier zu verknüpfen . Mal sehen, wie das aussieht. Gehen wir voran und klicken Sie hier und spielen. Also, jetzt werden wir hier rüber klicken. Ich habe mein Dropdown-Menü und ich möchte zurückklicken und ich bin gut, Gut zu gehen. Also müssen wir letztendlich über die vollständigen Details klicken, aber wahrscheinlich nicht in dieser speziellen Klasse. Aber Sie würden weiterhin das gleiche tun,eine andere erstellen, eine andere erstellen, langweilig sind und in der Lage sein, das auf dem Weg zu diesem bestimmten Bildschirm zu senden. Also lassen Sie mich nur im Rückblick, gehen Sie einfach zurück zu dem, was ich getan habe. Ich ging voran und machte eine automatische Animation auf diesem eine, und sie erleichterten sich nicht in und aus und auf einen Klick und machten dann einfach dasselbe zurück. Also jetzt lassen Sie uns speichern und sehen, was wir bisher für Zischen User Journey haben und sehen, ob alles verknüpft ist, wie wir es mögen. Also lassen Sie uns sehen, was wir hier haben, und bis jetzt haben wir Zischen Reise. Er fängt hier an. Er wählt sein Profil aus. Er geht in seinen Haupt-Home-Bildschirm. Sie können auf Details Transaktionen klicken und er bekommt ein Pop-Down-Menü. Oder er kann nach oben gehen und dieses obere Menü auswählen und eine Ausziehbox bekommen, und die nächsten Schritte werden sein, herauszufinden, wohin die gehen, die wir nicht tun werden. Alle von ihnen werden nur gehen, um einen zu tun. Und dann auch was passiert, wenn er hier unten klickt oder andere verbleibende Schaltflächen, die ausgewählt werden müssen und natürlich wahrscheinlich ihre ausfüllen wird, was eine Kopie von Hiss sein könnte. Aber vielleicht nimmt sie eine andere Richtung und macht hier unten mit diesen Tasten etwas anderes , und sie hat eine andere User Journey. Dann tut er nur, um dem Kunden irgendwie bei einer Vielzahl von verschiedenen User Trails zu zeigen. 17. Feine Tuning und Verknüpfung unseres Designs: so erhalten Sie einen Klick auf Play und lassen Sie uns sehen, was passiert. Also lasst uns auf Bob's klicken. Also holen Sie sich einen Klick, wenn wir reingekommen sind. Und sagen wir, wir wollen das Menü machen, sehen, was ist Check it out. Okay, es ist schnell zurück und lass uns herausfinden, was detaillierte Transaktionen sind. Ok, ausgezeichnet und immer noch kochen zurück. Das haben wir bisher getan und ein paar Dinge, die wir tun können. Also wollen wir wechseln. Benutzer, vielleicht können das auf haben, so dass wir zurück zur Startseite fahren können. Wir könnten dieses Dime-Logo vielleicht wieder anklickbar machen, damit wir nicht hier rüber gehen und Benutzer wechseln müssen, um zu dieser Homepage zurückzukehren. Wir könnten sogar Hiss Profilbild klickbar zurück zum Home-Login-Bildschirm, oder es könnte zu Einstellungen gehen. Das sind alles Dinge, die wir herausfinden müssen, wie dieser Benutzerfluss ist. Nehmen wir an, wir wollen, dass Teoh Switch-Benutzer hat. Gehen wir weiter und auf Gruppe. Ich denke, das ist immer noch alles gruppiert, also sagen wir, wir wollen diesen Schalter Benutzer-Taste sympathisch haben. Also musste ich diese von dieser großen Gruppe trennen und sie alleine haben. Und ich möchte weitermachen, das den ganzen Weg zurück zum Auswahlbildschirm verknüpfen, und wir wollen einfach einen Übergang machen. Wir wollten nur ein einfacher Rückweg sein. Wir könnten es runter oder nach oben rutschen lassen. Lassen Sie uns einen Push Up machen und sehen, wie das funktioniert. Gehen wir voran und schauen Sie uns eine Vorschau an. Okay, sind auf Bob. Gehen wir zu seiner Seite. Gehen wir zu detaillierten Transaktionen. Das ist großartig. Gehen wir zum Menü. Gehen wir runter, um die Benutzer zu wechseln, und wir sind zurück zu diesem Bildschirm und dann könnten wir zu ihrer Reise gehen . Bevor ich fortfahre, möchte ich sicherstellen, dass alles genau so ist, wie ich es mag. Denn wenn wir anfangen, wenn wir anfangen, mehr Kunstboards zu machen, würden all das kopieren, einfügen und replizieren. Wir wollen wirklich sicherstellen, dass es jetzt gut ist, also müssen wir nicht zurückgehen und uns umziehen. Viele sind in Richtung später. Also werde ich die nächsten 10 Minuten mit der Feinabstimmung meiner Auswahl verbringen. Ich habe hier schon ein paar Änderungen vorgenommen. Onkel hatte Ihnen nicht zeigen, wo meine Drop-down und wollte die Fähigkeit, Erhöhungen des Budgets zu zeigen , verursachen einen anderen Partner oder Mann oder Frau oder wer auch immer auf dieser App mit Ihnen, die auch Ihr Budget teilen. Sie könnten das Budget für eine bestimmte Kategorie erhöhen. Also wollte ich wirklich hervorheben, dass etwas, das von all diesen anderen Transaktionen getrennt wurde , etwas Besonderes ist. Also habe ich eine Art höheren Kontrast gemacht, anderen Hintergrund als den weißen und irgendwie einen kleinen Pfeil verwendet. Wir machten ein paar Lektionen zurück und wollten dann eine Art Profil machen, das bei irgendeiner Art Persönlichkeit ausgewählt wurde . Teoh, dass, damit sie nicht konnten. Okay, das ist die Person, die das Budget erhöht und auch gesunken ist, hat ein bisschen mehr hinzugefügt. Schlagschatten hier, damit Sie es oben ein wenig besser sehen können. Und ich war in der Lage, eine Vorschau zu machen. Also was, hier drüben, um zu teilen? Und ich ging, um Prototypen zu veröffentlichen, dass ich es irgendwie auf meinem Handy testen konnte, und ich erkannte, dass ich einige Dinge ein wenig größer machen und Musik einige Farbstoffe optimieren muss. Auch bei diesem kleinen Link ist zu klein. Also, was ich tun musste, ist, diesen ganzen ah weißen Abschnitt mit den detaillierten Transaktionen zu verknüpfen um dieses Pull-Down-Menü anstelle dieses winzigen kleinen zu bekommen. Aber es war wirklich schwer, es mit meinem Finger zu drücken. Also Scheren gehen über zu teilen, teilen Sie den Prototyp senden mit sich selbst verbunden, Öffnen Sie es in Ihrem Telefon. Wie funktioniert es? Wie fühlt es sich an? Müssen Sie Knöpfe größer machen? Also müssen Sie irgendwie zurückgehen und einige Tests durchführen, indem Sie hier auftauchen und dies tun, Optionen teilen und diesen Link erhalten oder sie sogar als J-Pegs hier oben exportieren. Und dann könnten Sie einfach diese Bilder auf Ihr Telefon und eine Art Messgerät laden. Die Größe der Tasten ist zu groß oder zu klein. Also konnte ich zurückgehen und diesen ganzen Abschnitt anstelle dieses kleinen Knopfes mit den Detailtransaktionen verknüpfen . Also jetzt fühle ich mich wie diese Art von fett Geld Symbol und die leichte Art von Typ OC wiederverwendet für die Ziffern war zu viel Kontrast, und es sieht irgendwie ein wenig sperrig aus, Also wollte ich es rationalisieren. Also ändere ich es irgendwie in eine Helvetica neue 22 bei einem mittleren Gewicht statt. Und ich habe es ein bisschen kleiner gemacht, so dass ich Platz haben konnte, um in größere Zahlen zu passen. Also möchte ich in der Lage sein, all das zu ändern, und das ist ein wenig überwältigend. Ich habe schon drei Sätze davon. Lassen Sie uns sehen, wie wir ein wenig schneller ändern können, indem Sie unser Asset-Panel verwenden. Also habe ich das genau so, wie es ihm gefällt. Also werde ich voran gehen und mit der rechten Maustaste klicken, und ich werde diesen Charakterstil hinzufügen. Okay, also habe ich den Charakterstil hinzugefügt. Also, das wird jetzt sein Lasst uns das Geld auf der Liste nennen. Dunkler Hintergrund, was immer du willst. Ein Titel es. Und ich werde in der Lage sein, all das auszuwählen, und ich glaube, ich bin es. Gruppieren Sie ihn von meiner, äh, großen Gruppe hier von der Rose. Ich gehe zurück und klicke darauf, und es ändert sich magisch, damit ich weitermachen und alles ziemlich schnell ändern kann. Ich werde alles ändern und sie hier ändern und dort und da waren bereit, weiterzumachen . Ich habe eine andere Änderung vorgenommen, da ich gerade eine kleine Box hinzugefügt habe, etwas andere tolle farbige Boxen, um einen Kontrast zwischen den verschiedenen Zeilen hinzuzufügen , so dass sie nicht wie eine große, lange Liste aussehen , die sie mehr wie Boxen sehen. Und die Leute können diese vier Optionen besser aufschlüsseln und sieht auf diese Weise ein wenig besser aus. Jetzt, wo ich das Gefühl habe, dass ich auch und alles finde, werde ich das ganz schnell erledigen, und dann können wir mit der nächsten Folie fortfahren, die dieser kleine Knopf hier sein wird. Wir wollen das aktiv machen, sollten diese Folie machen und noch eine machen, und dann werden wir es einpacken, damit wir alles auswählen können und überall zu diesem globalen Stil hier drüben wechseln können. Sagen wir mal, ich will es bearbeiten. Ich habe drei verschiedene Rose nahm mich etwa ein paar Minuten, also dauerte es nicht viel, weil ich gerade ausgewählt habe. Ähm, alles ging zu meinen Charakterstilen, aber sagen wir, ich möchte es noch einmal ändern. Sie müssen ihn alle auswählen, um ihn wieder zu ändern. Nein, alles, was Sie tun müssen, ist zu gehen, um Ihre Charakter-Styles gehen nach rechts. Klicken Sie auf das, und ich werde es bearbeiten. Dies ist diejenige, die wir für all diese Ziffern verwenden. Nehmen wir an, ich möchte es aufhellen, sind dunkel darin. Ich könnte das tun. Wir holen das Pipettenwerkzeug und probieren eine andere Farbe, in der ich vielleicht das Grün bekommen kann . Das ist es, was so wunderbar ist. Sobald Sie alle diese bis zu Stiles ist verknüpfen, müssen Sie nicht dort sitzen und wählen Sie ihn alle wieder. Sie sind schon für dich da. Also lassen Sie mich mit der rechten Maustaste klicken und das noch einmal bearbeiten und wir können die richtige Nummer oder den richtigen Farbton bekommen . Ich glaube, wir hatten es ziemlich im richtigen Farbton. Ich wollte das live bekommen, also lass mich einfach diesen kleinen Charakter holen und Linie auswählen. Aber wir können auch die Breite und die Höhe und die Größe ändern. Sagen wir mal, ich will ihn etwas kleiner machen. Das könnte ihn alle nur ein wenig kleiner machen, was für uns am besten funktionieren könnte, um sicherzustellen, dass wir Platz für längere Zahlen haben, und auch ich könnte zurück und wieder mit der rechten Maustaste klicken. Wir werden sehen, ob ich es hier finde. Ich glaube, es hat sich verschoben, weil ich es bearbeitet habe. Also jetzt statt Medium und vielleicht versuchen Licht und wir könnten Gold sehen, es geht über die gesamte Seite Medium. Ich mag BD, und ich frage mich, ob ich die Lücke ändern könnte. Sieht aus, als ob ich es kann Also möchte ich den Abstand zwischen den Zahlen ändern. Im Moment gibt es 66 Punkte. Lassen Sie mich das ändern. Schneiden Sie das in zwei Hälften. Das wird den Abstand noch ein wenig mehr anziehen lassen uns mehr Platz für lange Zahlen. Jemand, ich schätze, manche Leute haben große Budgets. Wir brauchen Zeh. Denk immer darüber nach. Ich habe das aus dem Weg gezogen, damit ich die Zahlen aktualisieren und auswählen kann. Und ich habe diese Gruppe macht eine große Gruppe und ich werde ihn einfach zurückschieben und die richtige Position finden , weil wir diese Folie noch nicht dupliziert haben. So konnten wir es immer noch bearbeiten, sobald wir mit dem Duplizieren beginnen. Wurden das Medaillon auf unserem Blick ein wenig zu starten. Dies ist also ein guter Zeitpunkt, um eine Pause zu machen. Holen Sie sich etwas Zustimmung von jemandem. Senat hat Leute weitergegeben, um sicherzustellen, dass alles perfekt ist, denn wenn wir tiefer und tiefer darin eingehen, wird es schwieriger sein, kleine Dinge selbst mit globalen Stilen zu ändern. Wie bei der Positionierung gibt es keinen globalen Stil für die Positionierung. Wie bei der Positionierung Wenn wir das also mehrmals repliziert haben, eine weitere Folie, müssen wir es hauptsächlich ändern. Wir können nicht wirklich eine Position, Charakter, Charakter, Stil oder Vermögenswert machen, also lasst uns die Position richtig machen. Wir können den ganzen Weg hier runter fallen lassen. Wir könnten es in der Mitte fallen lassen. Wir können den ganzen Weg nach rechts fangen, also mag ich, wo ich es vorher hatte. Ich denke, das hat gut geklappt, wenn wir auch sicherstellen, dass dies im Schichtsystem hinter sich steht. Ich kann hier zum Schichtsystem gehen, und ich könnte diese Gruppe verschieben, weil sie gerade ganz oben ist, damit ich ihn runterziehen könnte, damit er unter dem Essen ist. Eins. Ziehen wir einfach weiter oder ich mache einfach nur mein kleines Kommando und meine Klammer. Aber wenn Sie viele Ebenen haben, manchmal in der Lage zu sein, alle Ihre Ebenen visuell zu sehen, um besser in der Lage zu sein, diese um zu ziehen Also jetzt bin ich bereit zu gehen. Ich fühle mich sehr glücklich mit allem. Lasst uns unsere letzten paar machen und es einpacken. 18. Testen deines Designs auf deinem Handy: Also habe ich meinen Link, den L. Ich habe ihn mir selbst und Boten geschickt, und ich konnte ihn auf meinem Handy öffnen, um die Tasten zu testen, um zu sehen, ob sie groß genug waren und nur irgendwie den Prototyp testen. Das ist irgendwie, wie es aussieht, als er in Ihrem Browser auf Ihrem Handy geladen hat, und ich bin in der Lage, irgendwie das ganze Blut in Optionen zu bekommen. Also gehe ich zurück zur Switch-Benutzeroption und dann zu meinen vielen Systemen, wir gehen zurück, um den Benutzer zu wechseln, und wenn Sie doppelklicken, werden Sie in der Lage sein, alle Live-Interaktionen zu sehen. Also, wenn Sie jemals einem Kunden einen Doppelklick auf einen Prototyp sagen wollen, werden Sie in der Lage sein, sie zeigen alle Interaktionen auf der Seite ihres Lebens und Link pflanzliche 19. Verknüpfen: eingeschaltet eine Prototyp-Notiz, und ich wollte den Link alle verbleibenden Links, die wir zur Verfügung haben. Also möchte ich in der Lage sein, diesen Cent niedrig zu verknüpfen, zurück zur Startseite oder zurück zum Optionsbildschirm oder einer anderen Art von Optionsbildschirm . Also bin ich nur ein Prototyp. Modi wollte diese Dinge zurück zum Anmeldebildschirm oder wo auch immer ziehen. Ich möchte darauf hinweisen, dass alles anklickbar ist, also könnte dies zu diesem zurückgehen. Dasselbe mit hier. Alle von ihnen werden nach Hause nur einen Punkt zeigen. Wir wollen nicht, dass dieser aktiv ist. Wir möchten nicht, dass jemand versehentlich darauf klickt, aber Leute klicken absichtlich auf das Logo unten, also möchten wir nur sicherstellen, dass sie klicken. Das wird irgendwo hingehen. Oder vielleicht nicht. Und so lassen Sie uns alle sicherstellen, dass wir alles auswählen und alles verlinkt ist. Wie wir es mögen, sieht aus wie ein Bestes, aber wenn man es nacheinander zerlegt, ist es nicht so überwältigend. Also haben wir diese Verknüpfung zurück. Haben wir diese Verknüpfung überall Dies sieht nicht so aus, als wäre es irgendwo verbunden, also ist dies unser Pull-Down-Menü. Das hier ist verbunden. Das ist die, die wir hier unten verknüpfen, damit es herausrutscht. Aber wir müssen auch diese andere Seite wie da unten haben. Das ist also, wo wir könnten. Mapping ist praktisch. Okay, also haben wir einen Push-up. Also hat es unser letztes Leben auswendig gelernt. Aber ich denke, für diesen wollen wir eine Rutsche haben. Das haben wir für diesen hier getan. Wir könnten eine Rutsche kriegen, einen Druck nach links. So wird dies auch ein Push links sein, weil wir das gleiche schieben links das Hamburger-Menü abrutschen replizieren wollen . Also nach links drücken. Damit einer verbunden ist. Jetzt ist es, ich denke, wir haben überall kleine Verbindungen und lassen Sie es uns noch einen Test geben. Das ist Bob. Sarah, Wir haben Syrien noch nicht getan, so klicken wir hier beide klicken Sie zurück hier. Es wird zurückgehen. Aber es hat eine Art Rutschen Ding, also wollte ich irgendwie einen Übergang, damit ich zurückgehen und ändern konnte, dass wir später zu Bob gehen, durchklicken und ich kann das tun und zurückklicken. Ich kann diesen Bildschirm auch leben, aber jetzt ist dieser hier verbunden. Also, wenn ich zurückgehen will, um Menü herauszuziehen, kann ich das. Also, jetzt ist alles ein kompletter Zyklus mit ausgeschaltetem. Und dann wurden wir gerade umgetauscht. Benutzer verbunden. Also, jetzt, wenn ich diesen Schalter zurück auf den Home-Bildschirm und ich habe mir einen schönen Zyklus, warum sollten Sie zurück auf den Home-Bildschirm gehen, klicken Sie auf das Logo und ich bin zurück. Also sind wir bereit für unser nächstes Kunstboard. Und dieses Mal werden wir hier unten eine Verbindung herstellen, was dieselbe Botschaft sein wird. Wir wollen irgendwie auf diese Idee von gehen. Er geht hier durch. Er ist diese Art dieser Reise, die er durch seine Benutzerpersona geht. Er kommt irgendwie hier rein. Er schaut sich alles an, was er essen will, weil er es nicht tut. Er hat noch viel übrig. Er klickt auf Transaktionen. Er geht hierher. Er sieht, dass die Frau es um 50 erhöht hat. Und er fragt sich, warum. Weil er noch ein großes Budget hat. Also will er eine Art Boten. Also taucht er hier in das Menü ein und er möchte eine Nachricht senden, um über diese bestimmte Budgeterhöhung zu kommunizieren , damit wir keinen neuen Bildschirm oder ein neues Kunstboard erstellen können. Also werden wir eins duplizieren, einfach gehen und diesen duplizieren. Wir werden es kopieren, wohin wir hier runtergehen und es einfügen. Und er bemerkte, dass es auch die Prototyp-Links kopiert, so dass wir nicht alle wieder mögen müssen , im Gegensatz zu tun, die Option und Ziehen. Es heißt nicht, dass es nur die Grafiken kopiert, aber es kopiert die Prototypen nicht. Also diese Prototypen Luft gerettet jetzt, dass ich in der Lage war, klicken Sie auf die Art Board kopieren und dann fügen Sie es. Also werden wir das positionieren und einen Teil des Layouts der Geschichte. Also werden wir diese Art von in einem Auftrag machen. Also wird er hier auf seine Hauptseite klicken. Er wird zuerst auf detaillierte Transaktionen klicken und dann wird er umziehen. Wir werden das über einen Teil seiner Reise ziehen. Wo kann der Client freigegeben werden. Legen Sie etwas Abstand zwischen hier. Okay, dann klickt er hier, um eine Nachricht zu senden, und es gibt einen guten Klick auf Nachricht, und es wird diesen Bildschirm laden. Also jetzt müssen wir dies bearbeiten, um ein netter und Nachrichtenbildschirm zu sein. Es ist 20. Nachrichtenschirm: Art und Weise. Geh zu tief in das Schild. Wir müssen darüber nachdenken, was diese Nachrichtenseite mit sich bringen wird. Was ist der Zweck dieses Messaging-Systems? Nun, dies ist eine private App, die eine private Budgetierungs-App geteilt wird, die zwischen bestimmten Arten von Benutzern geteilt wird. So könnte ich in der Lage sein, miteinander über bestimmte Haushaltssachen zu sprechen. Und wir wollen sicherstellen, dass dies privat ist und innerhalb der App, dies nicht nur Link außerhalb des Telefons und gehen Sie zur Messaging-App. Das wird sein eigenes, einzigartiges Kommunikationssystem sein. Und alle Nachrichten aller Nachrichten werden nach 24 Stunden aus Sicherheitsgründen gelöscht werden , so dass diese Luft wirklich großartige Möglichkeiten, um Ihren Partner über Finanzen zu informieren. Und Sie müssen sich keine Sorgen machen, wenn Sie Telefon genommen wird. Es gibt keine Art von Dingen, die empfindlich sein werden. Dies wird eine private Messaging-App sein. Jetzt, da wir das im Sinn haben, wechseln wir zurück in das Design-Fenster und fangen an, also schiebe ich das irgendwie nach rechts, weil ich glaube, dass wir diese besonderen Details nicht brauchen . Und wir werden darüber nachdenken, was wir brauchen werden. Ich werde das nicht brauchen. Vielleicht haben Sie Cent hier in der Mitte. werden wir auch nicht sein. Aber was wir brauchen, ist, dass wir weiterhin unser Hauptmenü haben wollen, etwas Konsistenz mit allem hier haben, oder wir können ihn rausschieben und mehr Platz für Nachrichten haben. Es hängt nur davon ab, wie wir das gestalten wollen. Also der ganze Sinn dieser App ist, sehr einfach zu sein. Also lassen Sie uns ein sehr einfaches, sauberes Design machen. Gehen Sie einfach voran und machen Sie ein Nachrichtenfeld und lassen Sie uns einige abgerundete Ecken den ganzen Weg herum machen. Klicken Sie also einfach darauf und lassen Sie uns sehen, wie es aussieht, mit ein wenig Schatten. Lass uns einen weiteren Wurfschatten machen, also werde ich vielleicht fünf und fünf hinzufügen. Also die X- und Y-Achse wird es weiter ausgeworfen werden, gibt ein Gefühl von Distanz und irgendwie Unschärfe aus diesem Schatten ziemlich viel mit 16 haben. Machen wir es elf. Brauchen wir eine Grenze? Ich bin mir nicht sicher, ob ich von der Grenze abklicken würde. Versuchen Sie, das sauber zu machen, und was wir tun können, ist, wenn wir mit dieser Blase fertig sind, können wir weitergehen und in die nächste Blase kopieren. Wir werden eine einzige, äh, äh, Blase Art von Konversation von ihm und eins von ihr haben. Das wird also eine sein, die vorher von ihr war. Und wir werden eine haben, wo er hier unten auf sie antwortet, mit der Antwort unserer kleinen Geschichte , wo sie das Budget erhöht hat. Er fragt, warum haben Sie das Budget erhöht? Was wir also tun könnten, ist, dass wir das vielleicht nicht mehr brauchen. Weißt du, warum? Weil wir die Blase haben. Wir könnten ein Profilbild in den Blasen haben. Was wir also tun könnten, ist, dass dies nach oben rutschen könnte, und das wird uns mehr Raum für Nachrichten geben. Also habe ich uns geholfen, eine Slide-Up-Animation zu haben, und vielleicht geht es irgendwie in die Mitte und behält das genau an der gleichen Stelle. Eso Wir haben mehr Platz für den Messaging-Teil. Das wird also eine Nachricht sein, wenn wir nur Optionen gesagt haben. Sehen Sie, ob wir Widder für eine zweite Antwort haben. Wir wollen auch eine Blase haben, wo wir tippen, damit das abgerundete Ecken hat. Mach das zu einer Pille. Wir müssen einige Icons für Textanzeigen entwickeln, wo sie eintippen können. Okay, das wird also eine Nachricht sein, und das wird die andere sein. Gehen wir weiter und greifen seine Antwort. Gehen wir weiter und führen das Kommando und ich mache meine rechte hintere Klammer, um sie nach vorne zu bringen . Oder es gibt eine Menge Schichten, die los sind. Gehen Sie zu unseren Ebenen Panel und bringen Sie ihn auf Kurs. Wir können alle diese schön gruppieren, so dass wir sie alle in einen anderen Ordner gruppieren können, so dass jedes Kunstboard seinen eigenen Ordner hat. Also haben wir all diese verschiedenen, so dass es in Nachricht kommen kann. Und ich habe diese jetzt betitelt, also haben Menü und Nachricht. Also jetzt weiß ich, welche Art Board welches ist, wie ein Doppelklick, um dort reinzugehen und da sind alle meine Ebenen und das ist unser Board. Okay, jetzt können wir herausfinden, wie groß wir wollen, dass die kleinen Profilbilder sind? Lass uns den Schatten davon abziehen. Ich glaube nicht, dass wir es brauchen, und wir brauchen sie. Also lasst uns weitermachen und sie schnappen. Halten Sie einfach die Option gedrückt und ziehen Sie sie über. Machen Sie sie ungefähr die gleiche Größe. Wir möchten auch daran denken, Gitter ab und zu auseinander zu ziehen. Also Befehl Shift, Zitat. Holen Sie sich einfach eine gute Anzeige auf unserem kleinen reaktionsschnellen Gitter. Hier, Mann. Verschiebung in Anführungszeichen. Also, was wir tun werden, ist, dass er in der Mitte reagiert. Also, was wir tun könnten, ist es hier zu haben. Das werden seine Antworten sein. Es macht sich bereit. Geben Sie vielleicht ein bisschen größer ein. Halten Sie die Shift gedrückt. Also könnte ich ein nettes tun, aber ich halte die Schicht nicht gedrückt, um so seltsam zu werden. Das skaliert nicht dimensional. Also, wenn ein Halt auf Schiff, wird es die Abmessungen perfekt skalieren. Nur ein kleiner Trick. Nun, wir machen nur einige Design-Ideen. Wir haben ein Profilbild schweben darüber, geben ihm ein geschichtetes Aussehen. Also, jetzt brauchen wir etwas Typografie Sie gehen zurück zu Stilen und sehen, ob ich nicht finden kann, wann ich mag , tun Sie hellweiß. Aber lassen Sie uns das dunkelgrau machen. Dies wird unsere Nachricht sein, die sie gemacht hat, also bekomme einen Typ in Art einer gefälschten Nachricht und hier die gefälschte Nachricht ein und dann werden wir ein paar Symbole tun, um uns zu zeigen, dass hier er seine Antwort eingeben muss. Okay, also habe ich irgendwie ein generisches Gespräch hier und jetzt getippt. Ich konnte es irgendwie nicht auslegen. Wie? Ich denke, es sollte aussehen, also werde ich hier rüber gehen und wie, eine linke Ausrichtung machen und mich das irgendwie zurücksetzen lassen. Wahrscheinlich hätte man einen Namen, um nur zu gewinnen. ihren Namen geschnappt. Sarah. Das ist hier oben. Halten Sie die Option gedrückt und beschreiben Sie ihren Namen, ziehen Sie es nach unten, so dass ich es nicht wieder eingeben muss. Das wird Sarah sein, aber wir wollen, dass das in Dunkelgrau ist. Und sobald wir diesen Typ richtig bekommen, möchten wir diesen in unserem Stil speichern So können wir uns wieder an diese Art von schwarzem Text auf weißem Hintergrund erinnern . Also lassen Sie uns das zu 28 sehen. Und wenn ich ein wenig mehr Abstand zwischen Typ ein wenig mehr lassen, wie sie es nennen. Und so hätten wir auch einen Zeitstempel. Lass uns die Zeitstempel machen. Das war 12. Ich bin 11 2020 und der Zeitstempel muss nicht wirklich so groß sein Nur genug, um gelesen zu werden und lassen Sie es uns Medium machen. Das hat sie bei diesem Date gesagt. Wir können hier kleine Design Blüten hinzufügen, so dass wir dies ein wenig wie eine dunkle Box Toe hinzufügen können Kontrast. Du bringst das ein bisschen auf, z Mann, dass die Linie als solche mit der Kurve hier übereinstimmt. Aber ich werde runtergehen und die Option halten, nur um das zu tun, und dann die Option gedrückt halten und einfach das tun. Also, jetzt habe ich nur Kurven oben, die das zurückschicken, wenn ich im Schichtsystem bin, und ich werde das jetzt weiß machen wollen. Wir sind eigentlich eine Art dunkles oder hellgrau. Und jetzt, wo wir es auf einem dunklen Hintergrund haben, haben wir die Möglichkeit, Farbe hinzuzufügen, was immer hilft. Jetzt könnte es die Größe eines Profilfotos ändern. Wir müssen uns daran erinnern, dass die Leute in der Lage sein werden, längere Nachrichten zu sehen, ohne scrollen zu müssen. Hier müssen wir vielleicht einige dieser Elemente opfern, um sicherzustellen, dass die Nachricht gelesen werden kann und viel, viel länger ist. Also, wenn unsere Botschaft wirklich lang sein muss, weil dies private Gespräche sein könnten, diese Luft privaten Gespräche, die nach 24 Stunden gelöscht werden, so dass sie könnte es lange dauern. Gehen wir weiter und halten Sie die Schicht gedrückt. Lassen Sie uns ihr Bild kleiner machen, nur versuchen, effizient mit unserem Raum zu sein und darüber nachzudenken, wann dies eine wirklich Live-App sein wird und dass wir eine nur für größeren Text benötigt haben. Deshalb könnte dieser Text vielleicht 16 sein und vielleicht statt einer dünnen Wartezeit, tun wir das. Ein Leichtgewicht würde ein wenig besser gelesen werden, und wir haben eine Chance, mehr Kaffee und mehr Typ passen, bevor Sie großartig wurden, sagten sie. Das ist ihr kleines Gebiet. Ein paar Scott kopieren ihre. Die Gruppe ist keine Kopie, sondern Gruppe verschickte es höher, und das wird es sein, was er antwortet. Also werden wir ihn in der Mitte haben und dann irgendwie einen Arzt am Punkt haben, als würde er noch tippen. Und lasst uns voran gehen und diesen Charakterstil speichern. Speichern Sie diesen Charakterstil auf diesem wird unser Nachrichtentext sein, gefallener weißer Hintergrund. Und so kann ich jetzt darauf klicken und das in den gleichen Typ wie oben ändern. Okay, also können wir einen kleinen Hinweis auf einen Typ haben, also habe ich hier nur eine kleine Zeile gesetzt also können wir einen kleinen Hinweis auf einen Typ haben, also habe ich hier nur eine kleine Zeile gesetzt, vielleicht eine Schachtel. , 21. Message Teil 2: eine dünne Linie nach rechts. Ich möchte es zu einer anderen Farbe machen, weil wir sicherstellen wollen, dass wir angeben, dass das kein Brief ist . Das ist kein wirklich peinlicher L. Das ist der Hinweis, dass er immer noch tippt. Wir wollen ein Send-Symbol haben, vielleicht einen Pfeil nach oben, um anzugeben, was er drücken muss, um das zu senden. Ich bin also, was einen einfachen Kreis erschaffen wird, und wir werden ihn dicken Rand machen. Also nehmen wir unsere Grenze und machen ein wenig dicker. Vielleicht vier, vielleicht drei. Und wir könnten die Farbe der Grenze ändern. Wir könnten jede von ihnen schwächen tun. Vielleicht vielleicht einer dieser dunkleren Schattierungen direkt dort eine Stunde, um ein kleines Pfeilsymbol Riddle dünnen Pfeil mit diesem zu zeichnen . Kochen Sie da unten und wir machen diese grüne Gitarre. Ich lasse Pipettenwerkzeug rein, probiere das Grün und wir machen diese abgerundeten Kappen oder eine Runde und dann wird die abgerundete Katze dort schön abgerundet. Wir können immer eine Dicke ändern, nachdem wir die Linie zeichnen, Zeichnen Sie einfache Linie und verschieben, dass über. Es macht intelligente Guides, also lassen Sie mich beide auswählen und eine zentrale Linie machen. Das hilft auch nicht . Manchmal mache ich deshalb gerne einen Großteil meiner Icon-Entwicklung und Adobe Illustrator, weil ich mich einfach wie Adobe XY fühle. Es ist großartig, um sehr grundlegende Dinge zu tun, aber wenn Sie jemals ein paar komplexe Symbole machen wollen, gibt es einige kleine Dinge, die mich irgendwie stören. Es gibt keine Möglichkeit, wie Sie es in Adobe Illustrator tun können, wie Sie es in Adobe Illustrator tun können. Also machte ich ihn hüpfen Adobe Illustrator und bekommen ein wenig präziser Knopf. Es gibt auch die Möglichkeit, diese größere Ursache zu machen, die wir wieder aufgenommen werden und ziemlich viel, damit ich voran gehen und so größer skalieren kann . Haben Sie sie so aufgereiht? Sie würden, weißt du, ein bisschen mehr Kontrolle haben. Jetzt kann ich auch mein Pin-Werkzeug greifen und diese kleinen Punkte bearbeiten. Wir gehen jetzt, Aiken, Aiken, gruppieren das und schicken es den ganzen Weg runter. Ich glaube, ich wurde so stark gezoomt, dass es mir nicht erlaubte, es so zu , zentrieren,wie ich es wollte. Also lasst uns ändern. Wir machen eine Grenze, und wir machen sie beide in die grüne Farbe. Wir stellen sicher, dass sie beide rund um die Ecke um die Kappen sind und dann dicker machen . Machen wir es eine Drei. Mal sehen, wie das verkleinert aussieht. Das ist etwa richtig. Machen Sie es etwas kleiner. Gruppieren Sie diese Kerle zusammen. Ich könnte dies montieren und anderswo verwenden, wenn ich mag, wie es ist. Cam kann auch verschiedene Farben testen, damit wir das Flugzeug oder das Blau testen können. Es ist Reise-blau, das Blau sieht ein wenig besser aus. Ich werde beide Gruppen zusammen sammeln und klicken Sie mit der rechten Maustaste und machen es zu einem Symbol das zu meinen Symbolen kommen würde. Und wenn ich das jemals irgendwo anders verwende, wenn ich die Farbe modifiziere oder ändere, ändert es sich global. Es sei denn, ich beschließe, anders als im Besitz zu gruppieren, etwas anders als im Besitz zu gruppieren,wird es nicht mehr ein Link-Symbol sein. Okay, also jetzt haben Sie diese dünne kleine Grenze um beide herum. Sie stimmen grafisch überein, und dieser hat keinen Schlagschatten. Also lassen Sie mich einen Schlagschatten zu dieser weißen Box hinzufügen. Lassen Sie mich sicherstellen, dass der Schlagschatten die gleichen Einstellungen von 559 hat. Das ist nicht so, Steve. Fünf fünf, Sie haben den gleichen Schlagschatten drauf. Ich denke, das muss ein wenig optimiert werden. Also lassen Sie mich tun, wie ein Make es enger. Lassen Sie mich zwei und zwei machen und dann zwei und ein bis ein bisschen einen strafferen Schatten. Also der einzigartige Teil dieser Nachricht Äpfel. Sie haben die Möglichkeit, Nachrichten nach 24 Stunden zu löschen, und wir möchten, dass eine Option sein, wenn Sie eine Nachricht senden. Also, was wir tun wollen, ist voran zu gehen und diese Botschaft nach oben zu verschieben. Also werde ich ihn einfach zusammenfassen und ihm eine kleine Umschaltmöglichkeit geben, um die Nachricht löschen zu können . Nach 24 Stunden machen wir das Weiß und wir machen es ein bisschen älter, damit sie es wirklich lesen und es zu einer hellgrauen Farbe machen können . Also lassen Sie uns unsere kleine Umschalt- oder Ein- und Aus-Taste machen, die es heruntergebracht hat. Da gehen wir. Also werden wir ein Symbol erstellen, das für unseren Toggle sehr ähnlich aussieht. Lassen Sie uns zuerst die richtige Größe haben. Und wir werden diesen Umschaltknopf neu erstellen. Natürlich, mach es uns zu eigen. Also werde ich das schnappen, lass uns einfach ein Box-Werkzeug machen. Wir fügen ihm eine Pillenform hinzu, okay? Und wir werden haben, dass wir die Füllung eine graue Farbe machen. Wir machen einen dickeren Schlag drauf. Also lasst uns eine Drei machen und machen es uns. Wir können es heller oder dunkler machen. Es wird auf einem dunklen Hintergrund sein, also könnte es besser dunkler sein. Wir werden das zu uns machen. Wir wollen nicht kopieren, was auch immer das ist. Also lasst uns einen Kreis machen. Lasst uns unsere kleinen Knöpfe machen. Halten Sie die Umschalttaste gedrückt, tun Sie es. Ein kleiner Knopf hier, der gleiten könnte. Wo das Gleiche tun. Wir kriegen nicht mal das Pipettenwerkzeug. Probieren Sie hier einige unserer Farben. Ich werde das leichter machen, damit es leicht wird, aber nicht die ganze Art, wie sich die Lichter wie eine Dunkelheit bewegten, und wir werden es vielleicht eine dickere und leichtere Grenze so sein. Machen Sie es zu einem schönen Rückgang. In Ordnung, jetzt könnten wir einen weiteren Kreis drinnen machen. Dies wird derjenige sein, der unsere kleine Farbe dazu haben wird. Also lasst uns nach der Grenze greifen. Lasst uns unser „Wir könnten das Grün machen“. Wir könnten die blaue Art machen, wie das Blau. Nein, ich habe es nicht aus einer dickeren Linie geschafft. Vielleicht nicht so dick. Oder vielleicht den Unterschied aufteilen. 2.5. Wir machen den inneren Kreis genauso wie den grauen Kreis. Also werde ich nur tun, das wäre eine Füllung. Du hast ihm meinen Augentropfer gepackt. Probieren Sie das hier. Das Grau. Jetzt müssen wir herausfinden, wie wir ohne Einrasten auskommen. Wählen wir ein paar dieser Kreise aus und lassen Sie uns eine Mittelausrichtung durchführen. Okay, also gibt es unser kleines Unikat, aber wir können hier einen kleinen Schatteneffekt hinzufügen, so wie dieser. Wir könnten die Spur des Pinwerkzeugs beschreiben, also machen wir diesen Schrott. Das Pin-Werkzeug würde hier wie ein kleiner Schatten hinzufügen, nur das Pin-Werkzeug tun. Wissen Sie, das Pin-Werkzeug von Illustrator, Sie werden genau zu Hause sein. Ich habe eine Willenform gemacht, um dies zu einer Füllung zu wechseln und diese Formen rückgängig zu machen, spielt keine Rolle. es wird vertuscht. Sie werden das nicht auf einen Phil abseits der Grenze umstellen. Wir machen es Schattenfarbe. Also müssen wir herausfinden, ob wir es schaffen wollen. Lime tun Befehl. Es ist in diesem rückwärts. Wir müssen das dann zu einem Schlaganfall machen, damit der Schlaganfall es vertuschen kann. Also bin ich einfach Option. Ich werde eine Kopie davon machen, und ich werde die Füllung wegnehmen. Also, jetzt haben wir nur einen Schlaganfall, und ich werde das oben setzen. Wir werden in der Lage sein, eine kleine Schattenform zu decken, aber auch sicherstellen, dass die Schaltfläche durch. Siehst du also, wie wir das gemacht haben? Das hat es einfach vertuscht. Vergrößern und denken wir hier über die Farbe nach. Wollen wir das auch blau machen? Ja. Und lasst uns das auch blau machen. Aber wir werden doppelklicken, Phil und es etwas dunkler machen, um den Schatten anzuzeigen. Und ich könnte mein Pinwerkzeug beschreiben. Wenn ich etwas bearbeiten muss, ziehe den Schatten ein wenig heraus, ziehe ihn einfach so nach unten. Also dort haben wir unseren kleinen Knopf erstellt. Vielleicht machen Sie den Schlag ein bisschen für die Grenze, wenig dünner. Los geht's. Ich bin sehr glücklich damit. du je ein kleiner Schiebeknopf? Könnte eine Gruppe, die zusammen und bringen sie jetzt, wo sie wohnen wird? Das würde wirklich gut aussehen über weiß. Also werden wir zwei Versionen machen. Eine, die gut über weiß aussieht und eine, die gut über dunkel aussieht. Ich werde das hier runterziehen. Also, wenn ich es hier setze, ging ich voran und steckte unseren Knopf hierher, und wir haben das zusammen gewachsen. Sie könnten darauf klicken, aber es fühlt sich getrennt von der tatsächlichen Nachricht an, für die Sie diese Einstellung vornehmen müssten . Also werde ich das ein wenig runterziehen und hier die Option haben, die sich um einige Dinge verschieben könnte , die Farbe in der Größe ändern könnte. Wir könnten sogar diesen hohen Kontrast machen und einen dunklen Hintergrund machen. Das hatten wir hier schon erledigt. Also lasst uns das Rad nicht neu erfinden und das runterdrehen. Kann ein Student die rechte Klammer befehligen, um es nach vorne zu bringen? Nun, ich könnte dies eine lindgrüne Farbe machen und wirklich abheben, gut nach unten Option Art der Anpassung meiner Ecken, um die unten entsprechen. Gehen wir weiter und schalten Sie hier unser Gitter ein. Das kann uns helfen, einige dieser Ausrichtung zu führen. Wir sprechen immer über unsere anderen benannte Zitat Befehl. Es hat unsere Nachricht gesperrt. Unser Kunstboard Erstens, ein neues Kommandozitat würde ein kleineres Raster bekommen. Helfen Sie uns bei bestimmten Ausrichtungsproblemen. Okay, rede das alles ab. Denken Sie daran, schalten Sie das ab und zu ein. Es wäre schön, wenn die Profile übereinstimmen. Sie waren beide hier links, was großartig daran ist und lassen Platz für lange Namen. Das wird also schlau sein. Lassen Sie uns diese die gleiche Größe machen. Sie beide haben eine kleine Grenze zu ihm. Lassen Sie uns zur gleichen Grenze, so dass eine und diese Farbe auf der 22. Message Teil3 - Animation unserer -: Richtig. Also bin ich im Prototyp-Modus. Ich werde das verknüpfen und ein bisschen eine Animation machen, um das ein- und auszuschalten. Also werde ich weitermachen, ziehen, weil er eine Verbindung zu diesem Zustand herstellen wollte, und wir werden eine automatische Animation machen, und wir werden es beim Tippen tun. Alles, was er tun konnte, ziehen Sie, was wir tun werden, und tippen Sie in diesem Fall. Also bestreiten wir das auf Ihrem Desktop, wir werden es tun. Er ist drinnen und draußen. Das wird es ein nettes kleines bisschen einen reibungslosen Übergang geben. Und wir haben eine 0,2 2. Dauer. Probieren wir es mal aus. Es ist klicken Sie auf unsere Kunsttafel und Vorschau und lassen Sie uns auf eine Schaltfläche klicken. Schön. Aber sehen Sie, jetzt müssen wir klicken, haben Sie den Click Off Button. Jetzt müssen wir es also wieder mit dem anderen Staat verknüpfen und dasselbe tun. Also, jetzt gehen wir voran und Vorschau, und es sollte ein Zyklus klicken auf sein. Und wenn Sie abklicken. Okay, was wir tun müssen, um alle hier klicken zu sehen, und es geht nicht zurück. Schauen wir uns den Ort an, wo es tut, so denke ich, dass das, was ich getan habe, ist es Onley verknüpft dieses kleine Quadrat. Also werden wir weitermachen und das rausziehen und es irgendwie zurücksetzen. Aber wir werden das zusammenfassen, um sicherzustellen, dass der gesamte Block praktikabel ist. Gehen wir also weiter und wählen Sie alle unsere Elemente aus. Da gehen wir hin. Lasst uns das zusammen zusammenfassen. Und jetzt gehen wir zurück in den Prototyp-Modus. Lassen Sie uns den gesamten Bereich wieder über klicken. Großartig. wir sicher, dass dies verknüpft ist. Das Ganze ist verbunden. Also das Ganze ist interaktiv, also lasst uns zur Vorschau gehen und das sollte perfekt funktionieren. Lass uns den ganzen Prozess durchlaufen, okay? Wir werden eine Nachricht senden, die Nachricht senden, und dann klicken wir auf und wieder, und es geht hin und her. Schön. Was wirklich nötig wäre, wäre, wenn wir kein anderes Kunstboard erstellen könnten und das wäre anklickbar. Und dann wird eine neue Nachricht eingeblendet. Also leuchtet seine ganze Nachricht. Und wenn wir also wirklich mit diesem weitermachen wollten, konnten wir jeden Aspekt dieser App zeigen. Wenn wir wirklich ein paar 20 oder 30 Stunden zusammen verbringen wollten, die ganze Geschichte aufzubauen , aber ich denke, wir sind in einem Moment, wo wir noch ein paar Dinge miteinander verknüpfen können. Aber wir können es hier beenden. Und ich kann immer mehr Lektionen machen, wo wir verknüpfen, gehen, bis wir das Ganze alles miteinander verbunden haben und wir irgendwie alle diese verschiedenen durchlaufen, wie der Budgetplaner in der Kredit-Score. Aber ganz schnell, lassen Sie uns einfach ihre Geschichte machen und es wird ein Kinderspiel, denn wir könnten einfach seine Geschichte kopieren und einfügen, um loszulegen. Und dann müssen wir nur Fotos austauschen. Also lasst uns sie hier rüber schnappen, okay? Ihn zu löschen, sie an Bord zu bringen. Wir gehen zurück in den Design-Modus, und wir müssen nur ändern einige Dinge, die Home-Bildschirm wird genau sein, um richtig zu sagen, und der Prozess wird genau der gleiche sein. Wir werden das kopieren und einfügen, um all unsere Längen hier oben zusammenzuhalten. Wir müssen nur sicherstellen, dass wir sie gegen ihn austauschen und sicherstellen, dass das auf jeder Folie in der gleichen Position ist. Wir könnten das tun, indem wir in unsere Positionen gehen und ihn in die gleiche Position bringen. Und auch Sarah Smith, das muss es sein. Gehst du in den Prototyp-Modus? Es wird all diese Verbindungen speichern. All diese Verbindungen Luft gespart sieht nicht so aus, als wäre dieser gerettet. So könnten wir das einfach einfach so machen. Verknüpfen Sie das zurück mit Transaktionen, oder das wird zurück zu diesem hier. Bumm. Also werden wir mit ihrer Geschichte weitermachen, aber ich werde hier aufhören. Ich glaube, wir haben viel zusammen gemacht. Wir waren in der Lage, mehrere Icons zu entwickeln, einige Animationen zu einigen Slide-Outs zu machen. Menüs kommen wirklich in das Wiederholungsraster, um uns viel Zeit und Prototyping zu sparen und haben einen Link dies und haben eine Live-Vorschau, indem Sie gehen, um Ihre Prototypen zu veröffentlichen und teilen, dass mit anderen. Also hatten wir viel Spaß, das mit dir zu machen, und jetzt ist es Zeit für dein Studentenprojekt. 23. Kursprojekt: Es ist jetzt Zeit für Ihr Studentenprojekt, und ich möchte, dass Sie eine sehr einfache Web-laute oder mobile App mit mindestens drei Übergängen oder Links entwerfen . Versuchen Sie, über Ihre User Journey nachzudenken und sein endgültiges Ziel oder Ziel auszutauschen. Halten Sie diese einfach und fügen Sie hinzu, wie Sie sich mehr und mehr wohl fühlen mit X D und den vielen Animations- und Übergangsoptionen, die Sie haben. Sie können die zusätzliche Meile gehen, indem Sie einen Live-Link Ihres Prototyps veröffentlichen und ihn im Projektbereich oder in meiner Facebook-Gruppe veröffentlichen. Sie können sogar im Community-Bereich dieser Klasse gepostet werden, um Feedback von anderen Schülern zu erhalten . Denken Sie daran, es auf den ersten Blick einfach zu halten. Die besten digitalen Layouts sind einfach und konzentrieren sich darauf, die Erfahrung für den Benutzer so einfach und schmerzfrei wie möglich zu gestalten. Fühlen Sie sich frei, mich jederzeit zu erreichen, mit Fragen, die Sie auf dem Weg haben können und glücklich zu erstellen 24. Bonus – Erstellen einer gleitfähigen Bar: Also, jetzt sind wir, um einen coolen Schieberegler Effekt zu machen. Also muss ich auf die Vorschau klicken, damit ich Ihnen zeigen kann, was ich gerade erstellt habe. Wir werden seine Geschichte durchgehen, aber anstatt durch zu klicken, gibst du Tail-Transaktionen? Wir werden hier rüber gehen, damit sie ihr Budget ändern können, und wir werden in der Lage sein zu klicken und einen Draging-Effekt zu erzielen, der ihr Budget erhöhen kann. Wir würden das immer wieder tun und alle Budgets auflisten. Sie werden dir beibringen, wie man das macht. Einfache Schiebetechniken mit automatischer Animation. Also werden wir weitermachen und es kopieren. Ich hatte eine Kopie. Unser Home-Bildschirm. Wir machen ein neues Kunstbrett. Gehen wir weiter und ziehen ihn hierher. Wir gehen in den Entwurfsmodus und wir brauchen keine davon für jetzt. Wir werden voran gehen und die beseitigen. Wir haben diesen noch übrig. Wir werden eine kleine Schieberegleroption erstellen. Also werde ich das den ganzen Weg hierher bringen. Nur irgendwie unsere kleine Bar zu erschaffen. Wir könnten immer noch diese Ära haben, die einen Weg, um zurück auf den Home-Bildschirm zeigen wird. Können wir unsere Informationen haben, aber wir müssen hier rüber gehen und es dunkel machen und das auch dunkel machen. Also, jetzt gehen wir einfach und nehmen diesen Knopf und wir bringen ihn den ganzen Weg rüber . Wir machen unseren kleinen Schieberegler Teil, und jetzt haben wir bereits eine Art kleine Schaltfläche hier drüben in einer vorherigen Lektion erstellt. Geh weiter und schnapp ihn. Da ist er. Wir werden das auf einem Schieberegler packen, also werde ich das UN-Gruppieren machen. Alles, was ich brauche, ist diese Portion. , Ich brauche eine Gruppe,die ein paar Mal ist. Du hast recht. Klicken Sie auf. Gruppieren Sie das zusammen und bringen Sie ihn rüber. Und ich muss ihn vielleicht etwas kleiner machen, wo ich die Grenze dort ändern muss damit du sie ein bisschen besser sehen kannst. Also lasst uns das machen. Die Änderungen Grenze und machen ein wenig dunkler. Perfekt. Gehen, um meine Elemente zusammen zu gruppieren und fügen Sie ein wenig Schatten, dass hier, Dort gehen wir. Über meine Schattenoption. Ich habe eine Gruppe diese als eine Einheit wieder zusammengebracht. Also, jetzt werde ich den Hinweis geben, wo es Schlitten ist. Wir müssen eine andere Farbe für Bar machen. Also habe ich nur eine Option gedrückt und kopiere sie, und ich werde sie blau machen. Dies wird also der Teil sein, der noch nicht überrutscht ist. Ich habe hier einen Zwei-Ton. Machen Sie das etwas dicker. Wir könnten viel später etwas ändern, also lasst uns den Animationsteil machen. Also werden wir das kopieren und in eine neue Kunsttafel einfügen, und wir werden die Animation in Folie machen , damit sie ausgeliefert wird. Ich nahm meine Richtungstasten und gleitete dorthin, wo ich denke, dass es ein guter Ort wäre um es zu beenden. Ich möchte ein dramatisches Scrollen machen, also möchte ich es ziemlich weit machen und ich werde das einfach nach unten ziehen. Das ist also auf dem rechten Teil. Wir wollen den Betrag ändern, weil das passiert, wenn wir es nach oben schieben, sind die Mengenänderungen , also werden wir auch den Betrag ändern, den wir das zu einem anderen Zeitpunkt tun könnten. Sie ändern alle Daten ist unser Lebensmittelbudget. Hier fängt es an. Und hier wird es enden. Also lasst uns in den Prototyp springen und diese Ups verknüpfen, die wir aufwachen werden, oder knöpfen, dass dein Knopf diesem Link verknüpft wird. Aber wir werden eine automatische Animation zu machen, und wir werden es als Ziehen anstelle eines Tippen, also erfordert es, dass Sie klicken und ziehen oder 13 Ihr Telefon tippen und ziehen. Jetzt werden wir es bei der Lockerung behalten. Wir essen rein und raus, okay? Und wir wollten auch zurück, und wir wollen es runterschieben. Es wird sich also an die gleichen Einstellungen erinnern, so dass wir keine der Einstellungen vornehmen müssen. Wir wollen auch diesen Zehenlink zurück zu unserer Homepage, damit wir ihn so lecken können. Lass uns voran gehen und es ausprobieren. Ich ging voran und habe das gleiche hier nur ein wenig mehr mit Typ abgeschlossen, und ich werde auf diesen klicken und auf Play klicken. Also, jetzt werde ich in der Lage sein, zu klicken und zu halten, und er bemerkte, wie sich die Menge ändert. Also dieser nette kleine Schieberegler. Also jetzt eine einfache Möglichkeit, das zu replizieren, wenn ich in der Lage sein will, alle Budgets hier zu haben, also gehe ich weiter und gehe zurück in den Design-Modus. Holen Sie sich das gruppiert. Wenn ich mit diesem 100% zufrieden bin, mache ich mich bereit, es zu replizieren, also bin ich besser ziemlich glücklich damit. Ich werde das Gitter wiederholen, und ich gehe runter. Setzen Sie alle unsere Haushaltsposten auf, die meines Erachtens sieben sind. Wir haben sieben davon. Also, jetzt werde ich nur meine mit dazwischen ändern, damit ich sie alle da haben kann. Also, jetzt alles, was sie haben, um seine Verbindung all diese bis zu tun und ändern, dass die Beträge. Also lassen Sie uns einfach dieses Gas machen und ich werde diese verlinkt haben so diese werden auch DEET einzelne Seiten toe wie bis zu. Also, was Sie tun, ist, dass Sie einfach kopieren und einfügen die, die wir hier erstellt haben, und ersetzen Sie sie durch Gas. Jetzt habe ich sie Seite an Seite. Ich habe ich gerade das Wiederholungsraster gemacht und habe das getan und es dann kopiert. Also, jetzt kann ich den Vor-Zustand hier und dann den After-Status tun, da sich die Mengen Tropfen von Nahrung und Gas ändern und die Schieberegler geändert haben und ich habe sie beide auf seinem Gehen Klicken Sie haben ein sowohl auf dem Auto, animieren und ziehen. Und sie sind beide mit diesem verbunden. Und ich zeige dir irgendwie ein bisschen Ah, ich bin Kopfschmerzen. Möglicherweise müssen Sie durchkommen, wenn Sie alle diese einzeln animieren möchten. Also wird es hier klicken und sehen, wie es aussieht. Wir werden weitermachen und Essen schleppen. Und er bemerkte, dass alle Schieberegler nach oben oder neu gleiten und die Beträge änderten sich. Das ist es, was wir wollen, aber wir wollen in der Lage sein, dass die Benutzer sie separat schieben. Also, wo du tun musst, musst du jeden von diesen für jeden Schieberegler haben . Also musst du ein Essen machen, das mit Essen verbunden ist. Also würde dieser einfach das Essen wechseln. Also gehen Sie weiter und zeigen Sie Ihnen ein Beispiel. Es ist also wie Gas zurück dahin, wo es hingehört, und wir hätten nur die Nahrungsoption. Dann müssen wir das kopieren und einfügen und hier unten würden wir einfach das Gas wechseln, damit das Essen diesen Zustand zurückkehrt und es wäre nur Gas hier drüben. Und dann erstellst du ein anderes und du hast alles wieder in den ursprünglichen Zustand und änderst einfach den anderen. Das ist also ein bisschen Kopfschmerzen, wenn man jeden einzeln ändern möchte, aber es lohnt sich, die Arbeit zu sehen, dass sie sich alle einzeln bewegen, aber man muss einen haben. Mal sehen, da. Sieben. Sie müssen also sieben verschiedene haben, wobei jeder nur dieser einen Zustand ändert. Ich möchte nur zeigen, dass du diesen Schieberegler machen musstest. Sie müssen nicht alle unabhängig machen, sondern nur, wenn Sie wollen. Aber zumindest wissen Sie, wie man Art dieser gleitenden Animation auf Sie können andere Dinge um uns gleiten lassen. Nun, also spielen Sie mit dieser automatischen Animationszukunft herum. Es ist sehr mächtig. Also, jetzt habe ich jede von ihnen. Ich habe einen zum Essen. Das ist unser Haupthaus. Dann haben wir das hier ist das, äh nur das Essen hat sich auf diesem geändert. Nur das Gas hat sich verändert. Und bei diesem hat sich nur die Kfz-Versicherung geändert. Also, jetzt werde ich sie alle als Prototyp verknüpfen, um Ihnen zu zeigen, wie das funktioniert. Ich werde sie nicht alle vervollständigen, außer Essen. Ich werde weitermachen und mit Essen in Verbindung stehen, und das wird automatisch animieren und ziehen. Ich werde es wieder mit dem Haus verknüpfen. Es wird alles retten. Also wird dieses Gas jetzt mit Gas über diese 3. 1 verknüpfen und dann wird das Gas wieder herumlaufen. Und schließlich hat die Versicherung einen Staat, der hier drüben ist, und das verlinkt sich zurück. Und er würde einfach weitermachen mit den anderen vier. Also jetzt, Woche hier drüben, um zu spielen, mal sehen, wie es aussieht. Jetzt sind sie jeweils einzeln beweglich. Ich nahm nur eine Menge Arbeit. Wir werden sicherstellen, dass sie zu jedem Link zurück verlinken. Ich glaube, wir verbinden sie alle mit dem Haus, also ist das gut. Wir müssen also nur sicherstellen, dass die Beträge konsistent sind, während wir hin und her gehen, und wir können das überprüfen. Aber da gehst du. Das ist, wie Sie einen kleinen Schieberegler