Mobil-App-Design von Grund auf in Adobe Xd | Aleksandar Cucukovic | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Mobil-App-Design von Grund auf in Adobe Xd

teacher avatar Aleksandar Cucukovic, Improving lives, one pixel at a time.

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Mobiles Appdesign in Adobe Xd 2019

      1:10

    • 2.

      Kursübersicht

      2:54

    • 3.

      Das Briefing

      10:32

    • 4.

      Planung

      5:54

    • 5.

      INSPIRATION

      7:04

    • 6.

      Moodboard

      9:01

    • 7.

      Skizzieren

      10:17

    • 8.

      Dateivorbereitung

      3:08

    • 9.

      Wireframes erstellen

      19:35

    • 10.

      Wireframes erstellen

      5:45

    • 11.

      Wireframes erstellen

      12:58

    • 12.

      Wireframes erstellen

      5:59

    • 13.

      Wireframes erstellen

      13:17

    • 14.

      Wireframes erstellen

      7:46

    • 15.

      Wireframes erstellen

      7:26

    • 16.

      Wireframes erstellen

      12:31

    • 17.

      Bildstruktur

      1:43

    • 18.

      Design erstellen

      16:09

    • 19.

      Design erstellen

      7:54

    • 20.

      Design erstellen

      5:13

    • 21.

      Design erstellen

      4:56

    • 22.

      Design erstellen

      5:01

    • 23.

      Design erstellen

      2:49

    • 24.

      Design erstellen

      6:42

    • 25.

      Organisation

      3:04

    • 26.

      Verpassen von Fehlen Bildschirmen

      9:26

    • 27.

      Prototyping 1

      7:55

    • 28.

      Prototyping 2

      9:01

    • 29.

      Prototyping

      3:27

    • 30.

      Prototyping

      4:54

    • 31.

      Prototyping

      7:42

    • 32.

      Prototyping

      8:16

    • 33.

      Stil-Leitfaden erstellen

      10:44

    • 34.

      Verpackungsstruktur

      2:14

    • 35.

      Teilen mit dem Kunden

      8:57

    • 36.

      Exportieren

      13:25

    • 37.

      Kundenservice

      3:41

    • 38.

      Links und Ressourcen

      1:19

    • 39.

      Schlussbemerkung

      3:00

    • 40.

      YouTube-Kanal für mehr Inhalte

      0:49

    • 41.

      Begleite meiner kostenlosen Facebook-Gruppe

      2:16

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.532

Teilnehmer:innen

5

Projekte

Über diesen Kurs

Bildend von Menschen aller Welt werden jeden Tag von ihrer mobilen Geräte verwendet. Und immer immer mehr Kunden wollen mobile Apps erstellen, um diesen Markt zu dienen und zu erkennen, wie man eine App entwerfen muss, ist eine sehr wichtige Fähigkeit, als Designer:in haben zu können. Die Erstellung von Adobe Xd bietet dir unbegrenzte Möglichkeiten, weil es frei ist, um Plattformen, vector und vector zu haben und sie in regelmäßigen Updates zu bekommen.

.

Hey von Aleksandar und in diesem Kurs lernst du:

  • Geheimnisse von guten Design-Kurses

  • Wie du dich planen und inspirieren kannst.

  • So erstellst du Moodboards und Skizzen

  • Convert diese Skizzen in Drahtrahmen

  • Bildung, Symbole und Schatten hinzuzufügen, um ein Design zu erstellen

  • Dann Bewegungen und Übergänge zur Erstellung von Prototypen

  • Teile die Arbeit mit dem work um Feedback zu erhalten

  • Und abschließende Überlegungen für Entwickler

.

Du brauchst keine Vorkenntnisse in UI oder Adobe Xd, wir werden alles in diesem Kurs behandeln. Alles, was du brauchst, ist ein Interesse in diesem Feld und du wirst am Ende dieses Kurses gut machen.

In diesem Kurs lernst du auch wichtige Ressourcen, die du in deiner Arbeit verwenden kannst, was dir Stunden und manchmal sogar Monate deiner Projekte sparen wird. Stunden, für die du extra koste, während du Zeit hast.

.

Was warst du in Worte? Anmelden und ich werde dich im Kurs sehen werden.

.

Viel Spaß

Aleksandar

Triff deine:n Kursleiter:in

Teacher Profile Image

Aleksandar Cucukovic

Improving lives, one pixel at a time.

Kursleiter:in

For the last 10 years i have designed websites, products and apps for different companies, big and small.

With my wife i have started 3 startup companies and through the process met some amazing people from all over the world.

For the last five years i have created over 500 design products, improved the lives and workflows of over 100.000 designers from around the world.

Now my mission is to improve the lives of others, and to pass on my knowledge back to the community and to all those who want to learn about the amazing worlds of design and business.

Thank you for reading and have a creative day!

Alex

Vollständiges Profil ansehen

Skills dieses Kurses

Adobe XD Design UX/UI-Design Mobile Design
Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Mobiles Appdesign in Adobe Xd 2019: Milliarden von Menschen auf der ganzen Welt nutzen ihre mobilen Geräte jeden Tag, und immer mehr Kunden wollen mobile Bauchmuskeln erstellen, um diesen Markt zu bedienen. Also zu wissen, Anruf, um eine APP zu entwerfen, ist wirklich wichtig. Um als Designer mit Adobe X'd erstellt haben gibt Ihnen unbegrenzte Möglichkeiten, weil es kostenlos Cross-Plattform Vector basiert, und es hat regelmäßige Updates. Hallo, da. Mein Name ist Alex, und in diesem Kurs werden Sie Geheimnisse des guten Designs lernen. Kurz Wie Sie planen und inspirieren, wie Sie Mood Boards und Skizzen erstellen können. Konvertieren Sie diese Skizzen zu Drahtrahmen bei Bildern, Symbole und Schatten, um ein Design zu erstellen, Dann fügen Sie Bewegung und Übergänge, um Prototypen zu erstellen. Teilen Sie die Arbeit mit Ihren Kunden, um Feedback zu erhalten und schließlich anrufen, um Ihre Assets zu exportieren. Für Entwickler richtet sich dieser Kurs an Menschen mit wenig bis gar keiner Erfahrung im neuen y UX Design, denn in diesem Kurs werden Sie alles lernen, was Sie wissen müssen, um U Y ux Designer zu werden . Ich hoffe, du bist bereit zu lernen. Es wird X D und die erstaunliche Welt aus Sie sind UX-Design, und ich werde Sie in der Klasse sehen 2. Kursübersicht: hier, und herzlich willkommen zum Kurs. Mein Name ist Alex. Und in diesem Video werden wir durchlaufen, was wir innerhalb der Partituren abdecken werden. So wissen Sie, was Sie davon erwarten können, wenn Sie anfangen zu lernen. Also beginnen wir mit der Entwurfsbeschreibung, und wenn ich etwas näher heranzoomen, erhalten Sie diese beiden Vorlagen. Also ist diese eine leere Designkurzvorlage, die Sie für dieses und jedes Ihrer zukünftigen Projekte ausfüllen können. Und daneben haben wir die gefüllte Designbeschreibung, die wir für dieses spezielle Projekt verwenden werden, und wir werden es in Design-Kurzvideo detailliert behandeln, damit Sie wissen können was das Denken und die Logik dahinter ist dieses Projekt. Als nächstes haben wir druckbare Drahtrahmen-Vorlagen, und Sie können entweder eine Vier-Größe oder U.S Buchstaben Größe wählen , die Größe, die Sie in Ihrem Land verwenden, und Sie können sie ausdrucken und dann einfach zeichnen sie, und ich werde Ihnen einige schnelle Beispiele zeigen, welche Art von Design habe ich mit diesen druckbaren Drahtrahmen erreicht ? Und ich werde Ihnen auch zeigen, wie Sie einige verschiedene Layouts aus diesen druckbaren Drahtrahmen erreichen können . Danach gehen wir zum Abschnitt Drahtrahmen aus dem Kurs, und wir werden unsere Styleguides erstellen und einige verschiedene Symbole einschließen und mit einigen einfachen Bildern beginnen , einige einfache Formen. Und ich werde die Logik hinter jedem einzelnen Element erklären, das du in diesem Frauen-Framing-Abschnitt siehst . Wenn wir damit fertig sind, gehen wir zu dem Designbereich, in dem wir die verschiedenen Bilder einbeziehen werden . Verschiedene Schattierungen, verschiedene Unterteile. Einige neue Farben wurden auf den Fuß gehen einige verschiedene Elemente, die wirklich gehen, um unser Design zum Leben zu erwecken. Und danach werden wir endlich zum Prototyping-Abschnitt übergehen, wo wir einige neue Bildschirme einschließen werden. Wir werden einige interessante Übergänge einschließen, und ich werde Ihnen zeigen, wie Sie Ihre Ideen Ihrem Kunden präsentieren können, damit sie es auf einfache Weise verstehen können , und Sie können Ihre Arbeit auf diese Weise kurz schneiden. Da die meisten Clients keine statischen Bilder verstehen, müssen Sie ihnen Bewegungen zeigen. Sie müssen ihnen Übergänge zeigen. Sie müssen ihnen das gesamte Denken hinter der App zeigen, damit Sie die Vereinbarung so schnell wie möglich erreichen können. Und schließlich, nachdem wir mit dem Prototyping fertig sind, werde ich Ihnen zeigen, wie Sie alles packen können, um den Client und seine Entwickler zu senden und wie Sie mit ihnen kommunizieren können und welche Dateitypen die besten welche die besten Organisationsstrategien für Ihre Dateien sind und wie Sie die kleinste Dateigröße erreichen können, die Sie dann einfach an Ihre Kunden und Derek-Entwickler senden können. Also freue ich mich darauf, Sie im Kurs zu sehen. Vielen Dank, dass Sie es genommen haben, und ich hoffe wirklich, dass Sie viel Wert daraus bekommen. 3. Das Briefing: Wie jedes Projekt, werden wir mit dem Designbrief beginnen, aber bevor wir es tun, werde ich einfach schnell auf den Fuß gehen. Die Ressource ist ein Ordner. Und denken Sie daran, dass hier mehr und mehr Ressourcen hinzugefügt werden. So zum Beispiel auf das endgültige Projekt zugreifen, können Sie zum Beispiel auf das endgültige Projekt zugreifen,wenn wir das Design und das Prototyping abgeschlossen haben, so dass Sie es öffnen und von dort aus verwenden können. Oder Sie können die Startvorlage öffnen, die später im Kurs erstellt wird. Aber für diese Lektion verwenden wir die Entwurfskurzvorlage, und Sie können sie mit Doppelklick öffnen. Und wenn ich einfach hier klicke, um es zu öffnen, kannst du sehen, wie es aussieht. Wenn ich also etwas näher heranzoomen, können Sie sehen, dass Sie Ihren Projektnamen hier eingeben können. Wer ist Ihr Klient? Wann ist Ihr Deadline-Firmenprofil? So können Sie eine Forschung über die Unternehmensprojektübersicht schreiben ST Ng geht in Ziele so richtig Ihre Ziele und Ziele für dieses spezielle Projekt. Wer ist Ihre Zielgruppe und Designanforderungen? Also, was die Entwickler von Ihnen benötigen und schließlich Budget und Zeitplan. So können Sie wissen, was Ihr Budget für dieses Projekt sowie Halteplan Sieht aus. Also, wenn du anfängst, wenn du fertig wirst und endlich dein Name hier und deine E-Mail hier. Jetzt sind alle diese Ebenen Textebenen, und Sie können einfach einen Doppelklick auf eine von ihnen Zehe bearbeiten. Sie können hier klicken, um die Farbe des Textes zu ändern. Wenn Sie das tun wollen, können Sie sich ändern. Diese Symbole enthalten Ihre eigenen. Sie können ihre Farben auch ändern, indem Sie dasselbe tun. Und wenn ich das minimiere und unsere Designbeschreibung für dieses Projekt eröffne, können Sie sehen, wie es aussieht, sobald alle Informationen eingegeben wurden. Also, wenn ich ein wenig näher zoomen, können Sie sehen, wir haben, wer wir gleich MERS mobile App. Das ist also unser Klient. Für diesen Kurs können Sie sehen, dass sie Möbelgeschäft besitzen. 12. Oktober ist unsere Deadline und hier im Firmenprofil von Enter head und füllte es. Es befindet sich also in Belgrad. Serbien hat 10 Mitarbeiter, also ist es wirklich ein kleines Unternehmen. Sie arbeiten mit, wo Konstrukteure Konsistenz in minimalem Design zu erreichen und umweltfreundliche Materialien und umweltfreundliche Produktproduktionsprozesse zu verwenden . So nutzten sie alle Traditionen, um die Stücke zu machen und ihre Mitarbeiter zu trainieren, strenge Richtlinien zu befolgen , um diesen Prozess zu schützen. Daraus schließen Sie also, dass sie ein kleines Unternehmen sind, sie verwenden traditionelle Methoden in der Produktion, und sie verwenden sowohl externe Designer als auch interne Designer, um minimale Designmöbel zu schaffen und die Konsistenz in ihren Prozessen und ihrer Schaffung. Wir haben Projekt Oreo unten so, was sie von Ihnen wollen. Als Designer wollen sie eine mobile App, die minimal, sauber, sehr einfach und unkompliziert sein sollte sauber, . Benutzer sind ältere Menschen, weil Produkte teurer sind als nur normale Möbelgeschäfte , so dass sie Kleingedruckte nicht lesen können. Und weil die Stücke auf dem Preis sind , wollen sie nicht so gut. Sie haben also das Geld, um A zu bezahlen und wollten nicht, dass die App überfüllt ist und schwer zu navigieren ist. Sie wollen schnell auf den Punkt kommen und die Teile in der App sehen. Zu einem späteren Zeitpunkt benötigen sie eine Website entworfen, aber für jetzt wollen sie nur eine mobile App. Wir wollen zuerst mit IOS beginnen und dann auf Android einschalten und diese Version auch erstellen . Aber wie ich für diesen ersten Teil aus diesem Projekt sagte, wollen sie nur in der IOS-App als nächstes erstellt werden. Wir haben Ziele und Ziele. So mischen sich die glückliche Einfachheit, so dass die Benutzer Kategorien schnell durchsuchen können, geben Sie ihre Suche mit weniger schnellen Klicks, ist es möglich, zu ihrem Design gewünschte Elemente schnell zu bekommen. Es sollte auch eine spezielle Seite für jeden Artikel, den sie verkaufen, enthalten, so dass der Benutzer vor dem Kauf ein wenig mehr über den Artikel durchsuchen und lernen kann. beispielsweise beispielsweise Wenn Sie beispielsweiseeinen Stuhl durchsuchen und eine separate Seite für separate Stühle erstellen möchten, und wenn Sie in der Suchabfrage auf diesen Stuhl klicken, möchten sie für den Benutzer sein, um mehr über der Stuhl, über den Prozess, über die Materialien, die sie verwendet, die Farben, die Preisgrößen und so weiter. Also sie wollen, dass wir diese Seite erstellen, und sie wollen nur dann kopieren und einfügen Elemente innerhalb von dieser Seite für alle anderen Produkte sie im Angebot haben, als nächstes haben wir Zielgruppe. Also, wie gesagt, in der Regel ältere Menschen, weil es auf dem Preis ist hier. Standort außerhalb des Marktes Geschlecht, 60% männlich und 40% weiblich. Land des Wohnsitzes ist Serbia City. Abseits der Bewohner ist Belgrad und ich habe mit ihnen gesprochen. Sie möchten vielleicht bestimmte Bereiche außerhalb von Belgrad im nächsten Abschnitt für sie, das ist Marketing, E-Mail, Marketing, Social Media Marketing. Sie wollen bestimmte Gebiete in Belgrad anvisieren, wenn sie wissen, dass Menschen leben, die genug Geld haben , um ihre Stücke zu kaufen. Als nächstes haben wir am Arbeitsplatz, also sind die Menschen in der Regel CEOs, aus Unternehmen und Unternehmern Medienkonsumgewohnheiten. Also benutzen sie normalerweise Facebook und Instagram, aber vielleicht da durch ein bisschen mehr als Facebook, was für dieses Unternehmen wichtig ist, damit sie wissen können, ihre Marketingbemühungen mehr auf Instagram Zahnherren zu konzentrieren , Facebook. Und schließlich haben wir ihre täglichen Gewohnheiten. So Tag heute läuft ihr Geschäft kurze Menge Zeit für Social-Media-Konsum, und sie sind meist in Bedeutungen und Büros. Jetzt ist dies wichtig, wie ich sagte, für das gesamte Design von unserer mobilen App sowie ihre Marketingbemühungen ein bisschen später wo sie zu diesem Stadium kommen, um diese mobile App und ihr Geschäft insgesamt zu fördern über soziale Medien. Schließlich unten, haben wir Design-Anforderungen und Budget und Zeitplan. Jetzt für die Gestaltungsanforderungen gibt es wirklich einfach. Also Säure, zwei Dimensionen und Auflösungen. Sie wollen mit dem iPhone 10 für dieses Projekt beginnen. Und wenn wir auf Android bewegen, die Dimensionen später bestimmt werden, weil sie eine Recherche machen und mehr darüber erfahren wollen , ob es Android-Nutzer gibt, welche Art von Telefon für die Verwendung, so dass wir wissen, welche Art von Größenbestimmung sollte für Android Design File für Monate verwendet werden, sollte Adobe X'd für die endgültige Datei und BMG für Assets für Entwickler, so dass sie wollen, oder Bilder und Symbole. Toby exportierte S PNG, aber ich rede mit ihnen und sie wollen die SPG für die Icons, und wir werden das ein bisschen später bekommen. Im Laufe, wenn wir mit dem Export beginnen, unsere Assets für Entwickler erfordern Farbpalette zur Verfügung gestellt wird, und ich werde es zu seiner sehr grundlegenden zeigen. Es ist sehr minimal. Es ist sehr einfach. berücksichtigende Bild-Assets. Sie wollen kostenlose Bilder für jetzt, also werden wir Bilder verwenden, die frei für den persönlichen und kommerziellen Gebrauch verwendet werden können. Und ich werde Ihnen diese Bilder später zeigen, und ich habe die meisten von ihnen in den Kurs aufgenommen, und Sie können sie herunterladen und verwenden, wenn Sie Ihre Ressource öffnen ist Ordner und schließlich zugeordnete Kopierdokumente später mit Bildern aufgenommen werden und ich vergaß zu erwähnen, Bilder werden später mit ihren eigenen Bildern ersetzt werden, weil sie aus professionellen Fotografen Zehe machen Bilder aus ihren Stücken. Also wollen sie das Gesamtlayout von der APP haben, so dass der Fotograf nicht kann, welche Art von Winkel von den Stücken sollten sie schießen, so dass sie etwas später wissen, wenn es die Zeit kommt, endgültige Bilder mit den Entwicklern aufzunehmen? Wo sollten bestimmte Bilder platziert werden und welche Arten von Abwinkeln sollten sie verwenden? Also habe ich mit ihnen ein bisschen mehr darüber gesprochen, wie Bilder aussehen werden und welche Art von Bildern sie verwenden möchten. Also haben wir festgestellt, dass und ich ging auf den Kopf, lud ein paar Bilder, nur um sie zu zeigen und sie in die Partituren aufzunehmen. Und schließlich, Budget und Zeitplan Zeit, um IRS-Version abzuschließen ist 30 Tage Budgetaufschlüsselung. Also sind es $3000,50 Prozent vor Beginn des Projekts, 50% vor Säurelieferungen. Also am Ende des Projekts Android und Website Preis später bestimmt werden. Wie gesagt, weil wir im Moment nicht wissen, wie viele Android-Geräte zu verwenden waren und wir werden vier entwerfen, weil sie sicherlich ein paar Dimensionen benötigen auch Android-Tablets und vielleicht sogar Smartwatches, und wir werden sehen, dass in der Zukunft und schließlich für die Website, weil wir im Moment nicht wissen , wie viele Seiten sie innerhalb der Website sein werden, und wir wissen nicht, ob sie reagieren wollten, wenn sie eine einseitige Website sein wollten, wir wissen es im Moment wirklich nicht. Also Timeline Pannenplanung ist fünf Tage. Die Forschung dauert fünf Tage, um Standards mit Revisionen zu entwerfen. Präsentation ist zwei Tage und wir werden Präsentation als auch, weil wir die Präsentation zeigen wollen ihre Stakeholder, weil es, ah CEO und auch Stakeholder. Sie wollen also sicherstellen, dass wir auf dem gleichen Weg sind und schließlich, endgültige Revisionen, wenn sie Präsentation sehen. Möglicherweise möchten sie dem Entwurf ein paar zusätzliche Änderungen hinzufügen. Und wir haben acht Tage für die endgültige Revision, damit Sie die Zeitleiste sehen können, wie alles aussieht. Und wie gesagt, können Sie all dies innerhalb der Vorlage ändern. Hier ist mein Name. Hier ist meine E-Mail, und das ist es im Grunde für dieses Design. Ein kurzes Video. Als Nächstes werde ich Ihnen zeigen, wie Sie dieses Projekt planen können, warum es wichtig ist, Ihr Projekt zu planen. Und wenn wir das tun, werden wir auf Inspiration, Moodboards, Skizzieren und schließlich das Drahtrahmen aus unserem Projekt wechseln Moodboards, . 4. Planung: Wenn es um die Planung Ihres Projekts geht, ist es wirklich wichtig, dass Sie planen, welche Bildschirme Sie für das jeweilige Projekt entwerfen werden. Denn so können Sie wissen, wie viel Sie Ihren Kunden zitieren können. Wenn sie kein festes Budget haben, und in der Mehrzahl von Fällen tun sie es nicht. Dann können Sie wissen, wie viel Zeit Sie in dieses Projekt investieren sollten, basierend auf der Anzahl Bildschirmen, und deshalb können Sie wissen, wie lange das Projekt dauern wird. Und schließlich können Sie wissen, welche Art von Projekt sie benötigen und für welche Art von Bildschirmen Sie entwerfen müssen . So können Sie zum Beispiel wissen, zum Beispiel wissen, welchen Bildern Sie suchen sollten. Wenn der Kunde Sie gebeten hat, Bilder zu finden, wie es für unser Projekt in dieser Klasse ist, und schließlich können Sie es wissen. Zum Beispiel, welche Arten von Fonds sollten Sie verwenden und enthält das Projekt Dashboards, zum Beispiel enthält Shop enthält Medienbildschirme und so weiter und so weiter. Daher ist es wirklich wichtig, Ihr Projekt in Advanced zu planen, und dies ist nicht die letzte Phase des Planungsprozesses. Dies ist nur der Anfang, einige Dinge auf dem Papier zu setzen, nur damit Sie wissen, wie lange dieses Projekt dauern wird und wie viele Bildschirme Sie entwerfen werden. Also für unser bestimmtes Projekt, was wir haben, ist, ah, Startbildschirm, um mit und auf dem Home-Bildschirm zu beginnen, werden wir einige von den Hauptkategorien Ansicht der wichtigsten Produkte, ihre Geschichte und wie entwerfen sie ihre Stücke. Als nächstes haben wir Kategorie-Bildschirm, so dass von der Startseite, Menschen in Kategorie Bildschirm gehen können, und sie können nach Kategorie suchen. Dann haben sie Suchfilter, die sie klicken können, und dann können sie verschiedene Typen auswählen. Zum Beispiel, Preise, Farben, Materialien. Kommt das Gerinnsel rein, waschbar oder nicht, und so weiter und so weiter. Als nächstes haben wir die Raumkombination, die wir sowohl vom Menü als auch vom Home-Bildschirm zugreifen können. Also innerhalb der Raumkombination. Wir haben das Haupt-Hintergrundbild, und wir haben die Stücke, die innen aus diesem Raum verwendet werden, so dass die Leute wissen können, wie Stück ein Blick nach innen aus dem Raum ist, und sie können diese Stücke direkt von dort kaufen. Als Nächstes haben wir Artikel ausgewählt. Wenn sie also ein Element von hier aus der Kategorie oder aus dem Startbildschirm auswählen, wird es nötig sein, um es auszuwählen. Und das ist ausgewählter Gegenstand ist, worüber ich im Projekt Brief gesprochen habe. Also im Grunde, es ist ein separater Bildschirm, zeigt Benutzer Mehrheit von Informationen über dieses bestimmte Produkt, so dass Bildschirm wird im Grunde das gleiche für alle ihre Produkte aussehen. Aber wir werden zum Beispiel einen Stuhl oder so etwas verwenden , um diesen ausgewählten Artikel zu präsentieren. Also, wenn sie es anpassen und zu einem Warenkorb hinzugefügt als nächstes, wir gehen auf ausgewählte Artikel angepasst, und Sie können diese Namen dieser Bildschirme ändern, während Sie gehen entlang. Es spielt wirklich keine Rolle. Aber für dieses Projekt, Ich wählte diese Namen so innerhalb der ausgewählten Element angepasst genommen, zum Beispiel, änderte die Farbe des Produkts. Sie können die Größe des Produkts ändern, und schließlich können sie es in den Warenkorb legen, und wenn sie dies tun, gehen wir auf die Bestelldetails, wo sie ihre Bestelldetails überprüfen und sehen können, wie viele Artikel sie in den Warenkorb legen. Sie können sie aus dem Warenkorb entfernen, wenn sie wollen, oder wenn sie nicht wollen. Sie können mit der Zahlung fortfahren, Bildschirm innerhalb des Zahlungsbildschirms. Sie werden Optionen für Kreditkarte PayPal sein, und sie können diese Optionen von dort addieren. Und schließlich, wenn sie klicken, Zahlung bestätigen, können sie sich dann bewegen, bis zum Beispiel Speicherorte, Speicherorte, die sie über das Menü und innerhalb des Shop-Standort-Bildschirms zugreifen können. Es wird nur Karte geben, und Sie können die grundlegenden Informationen über ihre Ladenstandorte zugreifen. Also, zum Beispiel, in welcher Straße sie sich befinden, Telefonnummer von diesem Laden. Und Sie können auch die Navigation verwenden, wenn Sie dorthin fahren oder zu Fuß gehen möchten , um persönlich alle ihre Stücke zu durchsuchen und sie auszuprobieren, zum Beispiel. Also im Grunde, das ist es für diesen Planungsprozess aus unserem Projekt. Und du kannst das Aziz so ändern, wie du willst. Aber das ist nur der erste Teil, und der Beginn unseres Projekts nur für uns, damit wir wissen können, wie viele Bildschirme sie brauchen entworfen. Und denken Sie daran, dass sich das alles ändern kann. Also lassen Sie mich Ihnen ein kurzes Beispiel geben. Also, zum Beispiel, von der Zahlung werden wir nicht Adit Abschnitt zu entwerfen, aber es muss ein editierender Abschnitt innerhalb der Zahlung sein. Aber für diesen ersten Teil des Projekts, wir gehen nur Zehe Design Payment Bildschirm, weil wenn in Bearbeitung, dass es wie im Grunde Standard-IOS-App aussehen kann, es wirklich als eine Angelegenheit. Aber wir wollen nur diesen Zahlungsbildschirm für jetzt gestalten, auch aus Raumkombination, Suchfiltern und so weiter. Jeder einzelne dieser Bildschirme kann sich in fünf oder 10 verschiedene Bildschirme verzweigen. Es liegt wirklich an Ihnen und bis zum Client zu bestimmen, wie viele Funktionen sie innerhalb dieser speziellen App enthalten möchten . Im nächsten Video zeige ich Ihnen Inspiration, wo Sie Inspirations- und Inspirationsstücke finden können, die ich für dieses Projekt ausgewählt habe und wie Sie diese Inspiration in Ihrer Arbeit nutzen können. Also sehe ich dich dort 5. INSPIRATION: wenn es um Inspiration über Ihr Design-Projekt geht, Ich mag toe finden meine Inspiration an verschiedenen Orten. Zunächst einmal sollten Sie immer Ihre Kunden Konkurrenten recherchieren, nur um zu sehen, was sie tun und wie ihre Websites und mobilen Apps aussehen. Wenn Sie die Chance haben, sollten Sie auch die mobile App von ihren Konkurrenten installieren, nur um die Funktionalität zu sehen und zu sehen, wie es auf Ihrem Telefon aussieht und um die Optionen und Funktionen, die es haben könnte zu sehen . Aber sobald Sie Schulden gemacht haben und Sie eine visuelle Inspiration wollen, können Sie in einen Dribbel springen oder damit sein, oder Sie können Inspirationsseiten online finden. Es gibt so viele zur Auswahl für dieses spezielle Projekt, ich fand diese Person auf Dribble so weiter. Julia hilft wirklich. So ist es ausgesprochen, und ich mag diese Karten wirklich. Wie Sie sehen können, ist es wirklich ganz einfach. Es ist leicht für das Auge, und eine Sache, die ich beachten muss, ist, dass wir diese Farben nicht verwenden werden. Wir werden diese Bilder nicht benutzen. Dies ist nur so, dass wir unseren Kopf umwickeln können, wie diese Formen aussehen werden sobald wir sie entworfen haben. Also sind wirklich wie diese Karten wirklich wie dieser leere Raum oder dieser weiße Raum? Ich mag einige dieser Tags und wie diese Symbole funktionieren und aussehen, als wären sie sehr einfach und sauber. Wenn Sie in ein anderes Beispiel springen, sortieren Sie dieses Beispiel. Sie können einfach den Rückpfeil rechts hier ohne Text in der Mitte sehen, Sie können große Karten mit nur ein paar Menge aus Text sehen. Sie können große Überschriften und für Kategorien sehen. Diese funktionieren also ganz schön. Und wenn wir zum Beispiel in diesen einspringen , können Sie noch einmal sehen, benutzen sie diese subtilen Schlagschatten dahinter. Sie haben diese schönen Absätze, die leicht zu lesen sind, eine leicht zu verstehen. Wie Sie sehen können, nur aus diesen wenigen Beispielen können wir nur aus diesen wenigen Beispielenwirklich abschließen und Inspiration für unser Projekt finden. Das hier auch. Also wirklich ganz einfache Bilder, Hintergrundbilder, schön lesbarer großer Text und ein paar schöne große Überschriften. Also mag ich diese Designrichtung wirklich. Als Nächstes sollten Sie andere Websites oder andere mobile Labs finden, die sich in derselben Nische befinden wie das Projekt, für das Sie arbeiten. So zum Beispiel arbeiten wir zum Beispielan diesem Projekt, das für Möbelgeschäft ist. So haben sie alle Arten von Stühlen, Betten und Sofas und so weiter. Das ist es, was Sie suchen und Inspiration finden sollten, nur um zu sehen, wie andere Leute es tun. Also, wie Sie an diesem einfachen Beispiel sehen können, fand ich auf beginnt, wir haben einen Farbhintergrund, und wir haben im Grunde, um Text direkt hier zu färben. Es ist wirklich leicht zu lesen. Es ist wirklich einfach zu navigieren. Wir haben ein schönes großes Bild hier auf der rechten Seite. Wenn ich nach unten scrolle, können Sie einige dieser anderen Beispiele sehen. So ist es für diesen Stuhl zum Beispiel schön und leicht zu lesen. Schön und leicht zu verstehen, denn wenn Sie sich erinnern, denn aus unserem Designbrief ist unser Publikum generell ein älteres Publikum, das nicht viel Zeit zum Lesen hat. Und wenn sie lesen wollen, sollte der Text schön und groß und lesbar sein, nur damit er auf diesen Hintergründen gut kontrastiert . So, wie Sie wirklich klare Tasten sehen können wirklich einfach, wirklich einfach, es ist nicht viel los hier. Hier. Sie können schnell durch Bilder blättern, und das gefällt mir wirklich. Also alle diese Bilder haben Hintergrund ausgeschnitten, so dass sie in der Lage sind diese Hintergrundfarben aufzunehmen und sie einheitlich zu machen und kohärent aussehen. Schließlich können Sie sehen, Tasten sind wirklich klar. Pfeile sind wirklich klar. Und all diese nutzen diesen Hintergrund, der wirklich schön, einfach und leicht für die Augen ist , weil wir ein älteres Publikum für unsere App haben. Also mag ich diese Designrichtung wirklich und schließlich Sie. Sie können nach gleichen MERS APs auf beginnt und auf dribble suchen, nur um zu verstehen, wie e Commerce APS funktionieren. So können Sie vielleicht die Inspiration über die Abrechnungsseite über die Seiten bekommen, auf denen Sie bei Kreditkarten über diese Art von Dingen übereinstimmen. Nur um sicherzustellen, dass Sie verstehen, wie am Auto funktioniert auf einigen dieser mobilen Apps. Nur so können Sie wissen, wo Sie zum Beispiel Bottoms positionieren können, damit die Leute in den Warenkorb legen können. Und vielleicht können Sie verstehen, wie einige der Schieberegler funktionieren und so weiter, so weit Sie einfach e Commerce in Ihrer Suche eingeben können, ob auf beginnt oder dribbeln, und Sie können verschiedene verschiedene Beispiele darüber sehen, wie dies sein kann erreicht. Und wie Sie sehen können, scrolle ich nach unten und wirklich gibt es eine Menge von verschiedenen Optionen zur Auswahl. Und schließlich möchte ich Ihnen zeigen, weil dieses Projekt minimal ist. Sie können immer Fuß ich gehen, Kia und Yeske und weil ich aus Serbien bin, wurden unsere lokale serbische Website geladen. Aber es wird Ihre nächste Website oder aus dem Land, aus dem Sie kommen, angezeigt, und das ist wichtig, nur damit Sie verstehen können, ob das Projekt es erfordert. So zum Beispiel haben wir zum Beispielein minimales Design hier und es ist im Grunde wie ein Jahr oder ein Risikostil. So nordeuropäischen Stil und Sie können sehen, wie sie Text auf ihrer Website auslegen und Sie können ihre APS herunterladen und installieren, nur so können Sie verstehen, wie e Commerce Teil dieser App funktioniert und Sie können auf diesem wackeligen beiseite sehen, für haben sie diese minimalen Symbole und sie haben den gleichen Farbtext auf der rechten Seite. Es ist wirklich leicht zu lesen. Es ist wirklich leicht zu verstehen, also das ist etwas, das wir wollen. Dasselbe für Yeske. Sie können hier sehen. Ich mag das. Karten haben ihre echten Sie sind wirklich einfach, so dass sie eine Textzeile direkt hier und nur das Hintergrundbild haben . Also nichts mehr. Sie können Farbe abspritzen lassen, wenn das Ihrem Kunden überlassen wird. Wenn sie es mögen und Sie einige dieser Frames sehen können, mir sehr, wie sie integriert sind. Wie Sie aus diesem ganzen Video sehen können, verwenden wir keinen bestimmten Teil aus jeder off. Diese Inspirationsstücke inspirierten uns nur darüber, wie einige der Elemente auf der Seite Haus aussehen werden , um, Farben, Kontrast und wie einige Bilder funktionieren Gleichgültigkeit in Bereichen. Also, das ist wirklich, was Sie in Ihrem Inspirationsteil herausfinden möchten und nicht nur das Gesamtlayout von diesen abnehmen und es einfach so verwenden möchten. Da einige Layouts in verschiedenen Fällen funktionieren, funktionieren sie möglicherweise nicht für Ihren Fall. Also suchen Sie einfach weiter, finden Sie immer Inspiration, inspirieren Sie sich und verwenden Sie dann die Best Practices in Ihrem endgültigen Design. 6. Moodboard: Lassen Sie uns schnell unser Moodboard erstellen. Also von Ihrem Home-Bildschirm, klicken Sie einfach auf diese Waffe 1920, nur um eine neue Datei zu öffnen, vergrößern, steuern Null, so dass es in Position schlagen kann. Und Sie können Moodboard eingeben, wenn Sie möchten. Und dieses Moodboard ist nur, um Sie zu inspirieren, nur damit Sie einige verschiedene Farbkombinationen verstehen können . Einige verschiedene Textvariationen, die Sie mit Kunden erkunden können. Logo Wenn das Logo wirklich ein bestimmter Stil innerhalb von Ihrer Nische ist, ist es wirklich an Ihnen, und Sie können so viele Elemente, wie Sie innerhalb von Ihrem Handy wollen. Sie können es dann Ihrem Kunden zeigen, wenn Sie enden möchten, wenn der Kunde es betrachten möchte und das ist im Grunde nur so, dass Sie inspiriert, so dass Sie besser in Ihrem Kopf verstehen können , wie verschiedene Farbkombinationen und Fondskombinationen funktionieren dieses Projekt. Also, um zu beginnen, werde ich einfach Rechteck-Werkzeug wählen und einfach nur so zeichnen . Zum Beispiel, drücken Sie Wiederholungsraster machen, um dies zu mögen und vielleicht sogar drei so zu machen. Ich werde auf Gruppe große Verwenden Sie diesen Wahlklick auf eine der Ecken halten Verschiebung und dann einfach vergrößern, so dass ich ein bisschen mehr Platz für unsere Bilder als nächstes haben kann. Sie können dann Bilder per Drag & Drop drinnen, aber was ich zuerst tun möchte, wählen sie alle aus und entfernen den Rahmen von hier. Und dann kann ich weitermachen und einfach ein paar Bilder ziehen und ablegen. Ich habe bereits einige Bilder heruntergeladen, und wenn Sie ein paar schöne kostenlose Bilder wollen, können Sie Ameisen blesh dot com Einfach ein Zimmer eingeben, zum Beispiel, und es wird Ihnen alle Arten von verschiedenen, minimalen -Kollektionen. Und wie Sie sehen können, ist die Inspiration nur von diesen Beispielen endlos. Aber ich ging voran und lade es einfach ein paar Bilder herunter, um mir einen Vorsprung zu geben. Sie werden diese Bilder nicht von Ihrem Rücken bekommen, nur weil sie zu groß sind. Aber wie ich vor ein paar Sekunden erklärt habe, können Sie in auf splash dot com springen und Sie können auf das Bild klicken Sie mit der rechten Maustaste darauf , kopieren, kopieren, dann springen Sie zurück in Schlepptau. X'd Kontrolle oder Befehl V, und es wird das innerhalb Ihres Dokuments Tempo. Sie können es dann verwenden und in jedem von diesen Bild Platzhalter enthalten. Aber wie gesagt, dies ist nur so, dass wir einige dieser Farben besser verstehen und einige dieser Bilder neu positionieren können , doppelklicken Sie auf sie. Halten Sie Shift, und Sie können sie besser positionieren, wie Sie wollen. Also werde ich einfach hier springen und direkt in ein paar dieser Bilder springen und sie vielleicht noch ein bisschen mehr bewegen. Nur damit es klarer ist, was jetzt Einblick ist. Wieder einmal können diese Bilder sein, was auch immer Sie wollen. Wieder einmal können Sie im Schlepptau auf Splash springen und zum Beispiel, wenn Ihr Projekt eine warme Farben hat, können Sie diese verwenden. Aber weil unsere nicht und es verwendet diese Steine, vielleicht ist dieses Bild perfekt, weil es Möbel im Inneren des Raumes zeigt und Sie können jede von ihnen verwenden . Zum Beispiel, haben Sie eine schöne Lampe und einen schönen Couchtisch oder Nacht. Stehen Sie hier, und Sie können zum Beispiel einige Farben aus diesen Bildern probieren. Aber noch einmal, ich bin ich entschied, diese zu verwenden, und Sie können wählen, was auch immer Sie wollen, außer Regie wenig noch einmal drücken Wiederholungsraster und einfach vergrößern Sie es Werkzeug um. Sagen wir mal, ja, so etwas ist in Ordnung. Sie können den Abstand sogar erhöhen, indem Sie dies tun. Und ich bin eine große Gruppe, weil wir einige verschiedene Farben für unser Projekt auswählen und probieren werden. Jetzt werden wir diese Farben nicht verwenden, weil der Client bereits Farben hat. Aber in einigen Fällen möchten Sie ihnen vielleicht verschiedene Farben zeigen und wie sie mit bestimmten Bildern oder Formen funktionieren . Und in den meisten Fällen werden Kunden nach Ihrem Rat suchen und hören, was Sie zu sagen haben. In diesen Fällen können Sie und dann diese Farben in das Projekt umsetzen, und Kunden werden Sie dafür lieben, weil Sie ihnen und Ratschläge gegeben und ihnen zeigen, wie einige Farben mit anderen Farben funktionieren. Also in diesem Fall, lassen Sie uns von der Dunkelheit bis zum hellsten gehen, und Sie können dieses Bild Farbe wählen, wie wir wollen, und wählen Sie den starken Strahl, zum Beispiel, zum Beispiel, und vielleicht können Sie einige andere Schattierungen finden lassen Sie uns verwenden. Vielleicht sieht dieser noch gut aus, und dann kannst du ihn auswählen und direkt hier springen und vielleicht einen helleren Farbton verwenden, zum Beispiel so. Vielleicht möchten Sie diese Farbe wählen, und es ist wirklich dunkel, vielleicht gehen Sie dorthin und vielleicht können Sie wählen, Zum Beispiel, das würde nicht Farbe. Und vielleicht ist dieser hier, nur damit du eine Variation haben kannst. Und weil ich diese Grenzen ärgerlich fand, kannst du sie alle auswählen. Klicken Sie einfach hier, um die Ränder aus Ihren Farben zu entfernen. Nun, wie ich bereits mehrmals in diesem Video sagte, ist dies nur für Ihre Inspiration, und Sie können die Bilder und Farben verwenden, die Sie wollen. Also, zum Beispiel, vielleicht wollen, um die andere Richtung gehen und wählen Sie diese Farbe und vielleicht wählen Sie die starke Farbe, weil wir es für den Text mögen. Vielleicht. Vielleicht möchten Sie diese hellere Farbe wählen, weil wir vielleicht etwas Schlagschatten oder so etwas hinzufügen möchten. Verwendete diese hellere Farbe, vielleicht möchten Sie mit einigen Rahmen im Inneren Ihres Designs diese Farbe und so weiter und so weiter erkunden , so dass es wirklich an Ihnen ist zu bestimmen, welche Farben Sie wählen möchten. Und das ist nur ein kurzes Beispiel dafür, wie Sie ein schönes und einfaches Mörtelbrett erstellen können. Nicht um uns einen Bereich aus dem Text zu geben, können Sie doppelklicken Sie auf Ihren Port und einfach vergrößern Sie ihn um hier herum. Dann, was Sie tun können, ist Presti für den Titel, Klicken Sie hinein und machen Sie Eingabe. Das ist unsere Schlagzeilenkontrolle. Empfehlen Sie A und Kunden. Ein Client möchte Open Sense verwenden, also installieren Sie es. Es ist frei von Google-Formularen und vielleicht möchten wir Bolt verwenden. Und das ist für unsere Schlagzeilen. Vielleicht können wir es auf 48 erhöhen, nur damit wir es ein bisschen besser sehen können. Sie können es wie so control de positionieren, um es zu duplizieren. Positionieren Sie es hier. Halten Sie die Umschalttaste gedrückt, zum Beispiel viermal, so dass wir 40 Pixel Abstand zwischen unserer Überschrift und unserem Text haben können. Nun, um diese Zehe aus dem Punkt Text Toe Bereich Text zu konvertieren, können Sie einfach hier klicken und vielleicht wollen wir die Größe reduzieren. Also, zum Beispiel, das ist 48. Vielleicht können wir 24 verwenden Sie können die Größe von diesem Absatz nur durch Ziehen dieser Griffe erhöhen . Und eine letzte Sache, die wir tun wollen, ist hier zum Stecker in Spano zu springen und eine Laura Ipsum zu finden . Es ist kostenlos zu installieren und Sie können zurück zum Startbildschirm springen und Sie können zu Beddoes gehen. Sie können zu Plug Ins gehen, und von hier aus können Sie einfach Florham ipsum eingeben, und es wird direkt hier auftauchen und einfach auf installieren klicken, und Sie werden diese genaue Erweiterung haben. Ich meine, das Bloggen, wie ich wieder einige habe, ist viel Gipsklick mit Platzhaltertext fehlgeschlagen. Stellen Sie sicher, dass Text ausgewählt ist. Klicken Sie dort und Sie können den gewünschten Text von hier aus auswählen. Klicken Sie einfach auf Text einfügen. Und da gehst du. Wir haben unseren vollständigen Absatz jetzt ändern Sie ihn von fett zu normal und vielleicht gehen Sie mit diesem etwas dunkler. Oder vielleicht können wir sogar die Farbe in diese Farbe ändern, die wir bereits von hier ausgewählt haben. Und schließlich können wir vielleicht etwas mehr kühne Gerechtigkeit erforschen und wählen. Sehen Sie die Unterscheidung zwischen der Überschrift und dem Absatz ein bisschen besser, so dass Sie endlich hier doppelklicken können . Positionieren Sie sich genau hier. Sie können Ihr Logo direkt hier platzieren, etwas mehr Bilder hinzufügen, vielleicht einige andere Websites einschließen. Das ist also im Grunde ein Stimmungsbrett. Sie können so viele Elemente oder so wenige Elemente einfügen, wie Sie sich für das Projekt in der Hand inspirieren möchten , und Sie können dann die South Show an Ihren Kunden ausdrucken oder per E-Mail senden. Du kannst es als Jay zurückspeichern. Klicken Sie einfach hier auf den Namen von Ihrem Port Hit Control. Kommentar. E. Wählen Sie von hier aus entweder PNG oder J pack. Wählen Sie den Export des Zieltreffers als einzelnes Bild aus, das Sie befürworten. Zeigen Sie Ihrem Kunden im nächsten Video. Wir werden zum Skizzieren übergehen, und ich werde Ihnen eine Vorlage zeigen, die ich für Sie erstellt habe, Sie Ihre Drahtrahmen skizzieren und sie dann als Inspiration und als Richtlinien in Ihrem Projekt verwenden können, Also sehe ich dich dort. 7. Skizzieren: Wenn Sie zu Ihrer Ressource gehen ist Ordner, doppelklicken Sie darauf und Sie können einen Drahtrahmen druckbare Vorlagen finden. Sie können diese Datei öffnen, und so sieht sie darin aus. Sie können vier Papiervorlagen finden, Isabellas US-Briefpapiervorlagen und Sie können diese Vorlagen verwenden, um sie auszudrucken und einfach zu zeichnen, welchen unsere Tafelbleistift auf sie und Sie können sehen, ob Sie etwas näher zoomen. Sie können hier nur die Top-Informationen vom iPhone haben, sowie die Home-Anzeige rechts hier unten. Und Sie können in diesen Rechtecken verwenden, nur damit Sie zeichnen können, Ah, Ah, bessere Drahtrahmen innen von ihnen, nur damit Sie wissen können, wie viel Platz Sie haben können und so weiter . Und noch einmal, diese sind nur zum Handzeichnen, und Sie können sie auch verwenden, wenn Sie möchten, und erstellen Sie Drahtrahmen direkt hier drinnen, wenn Sie wollen. Aber ich bevorzuge den Zeh. Drucke sie einfach aus und benutze sie mit meiner Hand. Es ist ah, viel besserer Prozess, den ich im Laufe der Jahre gefunden habe, dann mit den Drahtfreunden direkt in Ihrer Software zu beginnen. Also noch einmal, Sie können diese verwenden. Wenn Sie eine Vierer-Vorlage verwenden oder uns Briefpapiervorlage verwenden, wählen Sie einfach eine aus den Kunsttafeln aus, je nachdem, welche Vorlage Sie möchten. Hit Kontrolle. Empfehlen Sie E, um Assets zu exportieren, und von hier aus können Sie Pdf auswählen und Sie können es exportieren. Öffnen Sie es und drucken Sie es so oft aus, wie Sie möchten. Und weil ich weiß, dass wir 10 Bildschirme haben. Deshalb habe ich 10 gewählt. Aber Sie können diese für Also, zum Beispiel, Sie wollen diese drei. Sie können dieses Ebenenfeld direkt hier auswählen, und Sie können alle diese anderen ausblenden und dann vielleicht in der Mitte frei positionieren. Sie können diese drei ausdrucken, wenn Onley. Wenn Sie nur drei Bildschirme benötigen, um ausgedruckt zu werden, können Sie in vielen dieser Bildschirme, die Sie vielleicht gewöhnen können, denn es liegt wirklich an Ihnen und Ihrem Projekt. Jetzt kann diese Vorlage 10 aufnehmen, wie Sie hier sehen können. Und wenn Sie mehr als 10 benötigen, können Sie einfach mehr Papiere aus diesen speziellen Drahtrahmen ausdrucken . Und jetzt sind wir einmal zeige ich Ihnen, dass lassen Sie mich schnell zeigen, was ich mit diesen Vorlagen ausgedacht habe. Also genau hier habe ich Drahtrahmen J Bild, und Sie können es verwenden, nur damit Sie sehen können, wovon ich spreche. Vielleicht können wir das vergrößern und es hier ablehnen. Das sind also die, die ich gezeichnet habe, und ich habe sie einfach in meinem Computer gescannt. Und wenn ich etwas näher heranzoomen, können Sie sehen, dass ich hier unten Bildschirmnamen verwende. Und das ist es, worüber ich gesprochen habe. Das ist also im Grunde nur eine freie Hand. Das ist nur für dich. So können Sie vielleicht verstehen, wie Sie einige Elemente innerhalb von jedem Bildschirm positionieren. Vielleicht können Sie sehen, welche Elemente funktionieren, welche Elemente nicht. Und wegen meines Scanners kann man diese Hintergrundfarbe nicht wirklich sehen. Aber vielleicht ist dein Scanner besser, und du kannst ihn sehen. Aber wenn man es ausdruckt, ist es wirklich schön. Und Sie können diese Hintergrundfarbe sowie diese weißen Rechtecke Tiere wieder sehen, Sie können einfach DoubleClick Kondom und ändern Sie die Farbe auf die Farbe, die Sie wollen. Wenn das etwas ist, was Sie wollen und Ihr Drucker kann, dass so, wenn wir in ein wenig näher zoomen , können Sie auf dem Home-Bildschirm sehen. Zum Beispiel haben wir verschiedene Elemente Position quer, und das wird viel länger unten sein, weil wir diese Raumkombinationen als auch auf diesem Home-Bildschirm unterbringen wollen . Als nächstes haben wir die Kategorie-Suche direkt hier und Sie können sehen, dass zum Beispiel, Ich wählte SOFA Wie viele Ergebnisse gibt es sortieren nach Ende. Benutzer können auf diesen Pfeil sortiert nach diesen Filtern und Denken. Klicken Sie auf Anwenden, und es wird sie zurück zur Kategoriesuche mit den Filtern als nächstes angewendet, wir haben Raumkombination. Wie gesagt, Sie können es von hier aus zugreifen, und Sie können es auch aus dem Menü zugreifen, weil innerhalb der Raumkombination, das ist der Bildschirm, der die Möbel verkauft. Und Benutzer können sehen, wie einige Teile innen passen, zum Beispiel Wohnzimmer oder Schlafzimmer oder Küche und so weiter, und sie können verschiedene Optionen von hier aus wählen. Sie können sehen, wie viel sie kosten, und sie können alle Produkte sehen, die in diesem Raum verwendet werden. So haben wir Artikel ausgewählt und ausgewählte Artikel kann Artikel von hier oder von hier und auf dem Artikel sein, können sie den Produktnamen direkt hier sehen, um eine Textzeile oben. Vielleicht können Sie ah Überschriften in der Unterüberschrift einfügen, nur damit die Benutzer wissen können, zum Beispiel, was es in der Seite von diesen drei oder vier Wörtern ist. Sie können den Preis sehen, welche Farben Sie können Größen aus dem Produkt und über das Produkt wählen , wie Sie sehen können, rechts unten 3 bis 4 Abschnitte unten, so dass sie nach unten scrollen und mehr über dieses Produkt erfahren können . Und wenn sie fertig mit ausgewähltem Element ausgewählt Element angepasst. Vielleicht wählten sie zum Beispiel eine bestimmte Farbe. Vielleicht haben sie Größe gewählt, und diese Schaltfläche in den Warenkorb wird auftauchen und sie können es dem Gericht als nächstes hinzufügen. Wenn sie dies tun, können sie das Kartensymbol drücken und sie können zu den Bestelldetails gehen. Und im Inneren des Bildschirms, können sie alle Stücke, die sie bestellt Namen des Friedenspreises des Friedens und wie viele Gegenstände aus in diesem bestimmten Stück sehen. Das ist also wichtig. Wenn Sie ein Sofa bestellen, möchten Sie vielleicht nur eines bestellen. Aber wenn Sie Stühle bestellen, vielleicht möchten Sie vier oder sechs oder so etwas bestellen, vielleicht unten blind, um einige kleinere Gegenstände aus Beispiel Aschenbecher oder Gläser oder Topfpflanzen oder so etwas zu haben . Und vielleicht möchten sie eine andere Zahl von diesen Erkenntnissen hinzufügen, damit Benutzer Schritt machen können. Dallas wird auftauchen. Sie können einfach ihre Tastaturspitze verwenden. Geben Sie vier, zum Beispiel, oder sechs oder so etwas ein, und off course Preis wird entsprechend angepasst. Schließlich haben sie mit der Zahlung fortgefahren, und es wird sie zu diesem Bildschirm bringen. Und wie Sie aus dem Inspirationsbeispiel sehen können, das ich Ihnen gezeigt habe, benutze ich nur einen einfachen Zurückpfeil , der sie zu diesem Bildschirm zurückbringt. Wenn es etwas gibt, das sie ändern möchten, und auf diesem Bildschirm können sie Zahlungen wählen, so dass sie Kreditkarten-Optionen haben, und sie haben PayPal-Optionen als auch. Vielleicht können wir mehrere Kreditkarten einschließen, und sie können durch diese tollen Autos wischen, um die richtige zu wählen. Oder wenn sie nur eins haben, wird es hier nur eins sein. Und schließlich PayPal Info unten. Wenn sie glücklich sind, drücken sie Zahlung und wenn sie einige endgültige Änderungen vornehmen möchten, können sie auf Bearbeiten klicken, und es wird ihn zur Bearbeitung von Kreditkarte oder für das Personenkonto bringen. Als Nächstes drauf. Wir haben Store-Standorte, also haben wir eine große Suchleiste hier mit der nächsten, und sie können die Suche auf dem Bildschirm drücken, auf dem sie das Suchsymbol enthält. Wenn sie das tun, wird es sie die Suchleiste genau hier nehmen, und sie können diese verschiedenen Filter auswählen, und sie können verschiedene Elemente auswählen, die sie in die Suche aufgenommen werden möchten . Aber wenn sie den Ort wählen wollen, können sie auch die Suchleiste drücken und Ort eingeben, und dieser Bildschirm wird angezeigt und, zum Beispiel, Daikin Typ in Belgrad, die eine Hauptstadt Serbien ist, und wir wissen, dass sie die Läden dort haben, und wir können die Straße genau hier sehen, mehr Details, die sie dann zeigen. Zum Beispiel, wenn sie mit dem Bus oder mit dem Taxi reisen, welche Straßen die Zehe treffen, und es wird nach dem Gerätestandort fragen, nur damit es ihnen den Abstand zwischen ihnen und dem Laden zeigen kann , wenn sie navigieren wollen. Sie können diesen Knopf drücken. Es dauert sie die bevorzugte Navigations-App, die sie verwenden. Also, wenn sie Google Maps verwendet, es wird sie die Google Maps nehmen, wenn sie hier verwenden. Karten. Wenn sie Wege Apple Maps verwenden, spielt es wirklich keine Rolle. Es wird sie nehmen, schleppen ihre bevorzugten Karten, und es wird eine Navigation von dort zu dem betreffenden Ort starten. Und schließlich haben wir unsere Speisekarte. Also, wo immer sie das Menü Icahn haben. Also, zum Beispiel, hier oder hier, können sie es treffen, und es wird sie nur zu diesem einfachen, einfachen Menü nehmen , das dann können sie verschiedene Optionen von Also, wie Sie sehen können, ist es wirklich ganz einfach. Es fehlt eine Menge von Bildschirmen, aber für diesen ersten Teil aus unserem Design-Prozess, und das ist, was wir mit dem Kunden vereinbart sind die ersten Bildschirme, die sie wollen. Ich habe ihnen angezeigt, dass diese App mindestens 15 oder 20 weitere Bildschirme benötigt. Sie sagen, es geht ihnen gut, aber sie wollen nur diesen ersten Teil sehen. Und wenn sie das Design mögen, wenn sie die Funktionalität mögen und sie es bei einigen der Benutzer testen wollen, nur damit sie verstehen können, ob die Benutzer es mögen, wenn sie es verwirrend finden oder nicht, und von da an wenn sie alle Daten sammeln, dann können wir weitermachen und einige dieser anderen Bildschirme entwerfen. Und es ist sehr einfach, wenn Sie ein komplettes Produkt haben, das Sie es dann hinzufügen und mehr Bildschirme einschließen und mehr einige dieser verschiedenen Elemente einschließen können , weil es viel schneller ist, wenn Sie etwas haben, anstatt von einem leeren Bildschirm zu starten. Das sind also der Drahtrahmen, druckbare Vorlagen. Und wie gesagt, können Sie sie benutzen und ausdrucken. Sie können darauf zeichnen, und wenn Sie wollen, können Sie sogar von I Frames hier im nächsten Abschnitt des Diskurses erstellen. Wir springen ins Schlepptau, Drahtrahmen, und wir werden anfangen, unsere Drahtrahmen aus diesen Informationen zu entwerfen, die ich Ihnen gerade gezeigt habe. Und ich werde einige verschiedene Techniken erklären und wie Sie das Draht-Framing bekommen können, warum es wichtig ist und wie es Ihren Prozess später beschleunigen wird. Wann kommt die Zeit für die Revisionen, so sehen wir uns dort 8. Dateivorbereitung: in diesem Teil des Kurses beginnen wir mit der Erstellung unserer Drahtrahmen. Und um das vom Startbildschirm aus zu tun, klicken Sie einfach auf iPhone gesendet und Tennis, um einen neuen Kunstport zu erstellen. Sie können Ihren Bildschirm so vergrößern, und lassen Sie uns schnell voran und erstellen Sie unsere Bildschirme. Also, wie gesagt, wir haben 10 Bildschirm, so langweilig. Klicken Sie hier. Ich werde nach Hause tippen und tun Kontrolle oder Befehl D, um diese unsere Port Dock zu duplizieren, wie hier und geben Kategorie Screen Control de noch einmal ein, um diesen einen Doppelklick zu duplizieren und in Suchfilter eingeben. Und ich werde dieses Video einfach schnell pausieren und alle duplizieren und 10 Bildschirme erstellen und dann zurückkommen. Und jetzt, da ich wieder da bin, wo er die Kontrolle Null trifft und du siehst, wie sie alle aussehen. Und wie du hier oben sehen kannst, sind die Namen die Namen, die ich erwähnt habe, als ich meine Frau Freunde in der Zeitung zeichnete, und du kannst immer Sie enthalten hier Ihre eigenen Namen, wenn Sie ah erstellen, abgebissen ein anderes Projekt. Als nächstes gehe ich auf eine andere Ex-Defile, die bereits zuvor erstellt wurden, und kopiere einige Symbole. Also werde ich Kontrolle V hier treffen, um sie reinzukriegen. Und offensichtlich werden Sie dieses Symbol bekommen, weil dies die Symbole sind, die wir in unseren Projekten verwenden werden. Ich werde sie hier drüben platzieren, und ich habe auch ein Logo, das mir der Kunde geschickt hat. Und das ist nicht das endgültige Logo. Aber sie schickten mir vorerst dieses Logo. Und weil ich keine Logo-Designs mache, mag es einfach nicht. Und es ist nicht für mich. Ein anderer Designer wird ein besseres Logo erstellen. Dies ist nur ihre Einheimischen im Moment. Also haben wir alle grundlegenden Dinge eingerichtet und in ich werde es einfach schnell retten. Und um das zu tun, können Sie hier nach oben kommen, um uns zu speichern oder Shift Control oder Shift Befehl s. Es öffnet sich und Sie können Ihren Ordner hier finden, indem Sie darauf klicken. Und Sie können Ihr Projekt genau hier benennen, während ich es bereits getan habe. Und ich nannte es unser Projekt. Und wenn ich hoffe, in die mit unserer Ressource ist, können Sie sehen, dass es hier ist, und Sie können diese Datei jederzeit öffnen, wird es fertig sein, und Sie können es als Referenz verwenden Wenn Sie mit der Arbeit an diesem Projekt beginnen und können Sie auch verschiedene Elemente aus dieser Datei kopieren und einfügen und in Ihre neue Datei einbinden , wenn Sie möchten, und Sie können es auch als Referenzhandbuch verwenden. Zum Beispiel, wenn Sie einige Größen oder Mr Image Platzierung verpasst haben, oder wenn wir zum Beispiel in Großbritannien City, und Sie wollten nur schnell überprüfen, ob Sie den richtigen Job gemacht haben, können Sie auch Öffnen Sie diese Datei und schauen Sie sie einfach an und sehen Sie, ob Sie sie richtig schneiden. Im nächsten Video werden wir anfangen, unseren Home-Bildschirm zu erstellen und wir sehen uns dort. 9. Wireframes erstellen: Bevor wir mit der Design-Arbeit beginnen, lassen Sie uns schnell einige grundlegende Dinge tun. Also möchte ich Statusleiste sowie Home-Indikator unten einfügen. Wenn Sie sich erinnern, das ist, was wir getan haben, als er unsere Drahtrahmen druckbare Vorlagen erstellt. So nur, dass wir wissen können, wo sind Grenzen r n aus welchen Bereichen wir entwerfen können. Also werde ich in eine andere Datei springen und sie kopieren, weil ich sie bereits in dieser Datei erstellt und einfach Steuerbefehl v toe tun, sie innen stützen und wenn wir etwas näher zoomen, können Sie sehen, wie sie aussehen. Also hier ist unsere Statusleiste Alle übertragen als Komponente, Sie können auch mit der rechten Maustaste darauf klicken und auf Link-Komponente tun, weil das eine Komponente direkt hier in dieser Datei erstellt . Sie können auch mit der rechten Maustaste hier klicken und löschen eingeben, wodurch der Link zur ursprünglichen Komponente in der Datei gelöscht wird, die ich erstellt habe, was nicht diese Datei ist. Also, was wir jetzt mit diesem ausgewählten tun können, ist Hit Control Command K, die es direkt hier erstellen wird. Nun, was das bedeutet, ist dies die ursprüngliche Komponente innerhalb dieses Dokuments und nicht die Komponente, die aus einem anderen externen Dokument kopiert und eingefügt wurde. Das bedeutet also, dass alle Änderungen, die Sie innerhalb dieses Dokuments vornehmen, das unser Projekt von diesem Diamanten in die Zukunft genannt wird, in diesem Dokument gehalten werden und nicht in dem Originaldokument, aus dem ich hat das kopiert. Wir können das gleiche mit Home-Indikator tun, wenn Sie möchten, aber wir werden einfach kopieren und einfügen Sie es in jede Datei. Also, was wir als nächstes tun werden, ist wählen Sie beide, so dass Sie einfach eine schnelle Auswahl wie so drücken Sie Kontrolle oder Befehl. Sehen Sie? Verkleinern Sie ein wenig, wählen Sie alle anderen Kunstboards aus und drücken Sie einfach Kontrolle V. Es wird sie in all diesen Flughäfen an der gleichen Stelle wie diese 1. 1 einfügen und das ist eine großartige Ergänzung zu anderen B, X, D und große Zukunft zu haben, denn wenn Sie mehrere sich wiederholende Objekte innen haben, sind alle schlecht, Sie können sie einfach kopieren und einfügen, und es wird sie an genau der gleichen Stelle platzieren, wie sie in der ersten waren. Unser Hafen. Als nächstes werden wir eine obere Leiste erstellen. Und um das zu tun, lassen Sie uns schnell einige Symbole auswählen. Also, was wir in diesem Fall brauchen, ist Menü waken Suchsymbol sowie das Back-Symbol . Deshalb habe ich sie erstellt, und Sie können sie schnell auswählen. So Kontrolle. Sehen Sie, wir haben es ihnen gesagt. Klicken Sie auf Control V auf diesem ersten Bildschirm auf dem Startbildschirm. Halten Sie die Verschiebung. Verschiebt ihn bis zur Aufstellung, wie so und platziert in 20 Pixel nach unten. Also Shift und unten Pfeil nach oben, wählte diese. Platzieren Sie es an den Rand, oder Sie können einfach hier klicken. Irgendwas. Stück Zehe der linken Kante. Führen Sie dasselbe für eine Suchleiste am rechten Rand und für die Suche Halten Sie Shift und Pfeil nach links . Also 12, um es zu bewegen. 20 Pixel von diesem Rand und für das Menü. Mist. Möchten Sie Pfeil nach rechts Zehe Dieser Rand tun das gleiche wie für diese Einkaufstaschen. Die ganze Schicht wird so platziert, bis die Fleischverschiebung links Pfeil 12 Und deshalb haben wir diese Symbole erstellt , weil es unseren Job am Anfang viel einfacher macht. Als Nächstes werden wir unser Logo kopieren. So ausgewähltes Steuerelement, Siehe Klicken Sie hier weiß, steuern Sie V. Klicken Sie hier, um es in der Mitte zu positionieren, und verschieben Sie es dann einfach, bis es in der Mitte ist. So wie so. Wenn Sie nicht können, können Sie diese beiden auswählen und einfach hier klicken, und es wird sie alle innerhalb von der gleichen Linie verschieben . Also als nächstes werde ich alle von ihnen auswählen, drücken Sie Kontrolle oder Befehl g, um sie zu gruppieren, klicken Sie hier und dumpf klicken und benennen Sie sie. Nie Bar Center, und ich werde sie ein bisschen besser bestellen. Also jetzt Bar kommt knapp unter der Statusleiste und ich kann keine Kontrolle. Siehe. Klicken Sie hier, Control V. Und das ist, wovon ich gesprochen habe. Es wird sie an genau der gleichen Position wie auf dem ersten Bildschirm basieren. So wird es Ihren Job später auf der Straße viel einfacher machen. Nun, bevor wir eine andere Arbeit machen, lassen Sie uns schnell die Farben für das Projekt auswählen. Also werde ich einfach nur einige zufällige Rechtecke entfernt Grenze erstellen und wir fünf Farben brauchen. So kontrollieren Sie in der Tat. Halten Sie Shift-Steuerung D halten Sie Shift. Nur um es unter Kontrolle D nach unten zu bewegen, halten Sie Shift und bewegen Sie es. Und schließlichnoch einmal, noch einmal, steuern Sie D Now für seinen ersten 1 Klick hier. Wir werden in Null B Null B Null b Presenter eingeben. Es wird eine dunkle Farbe für diese nächste werden wir 858585 percenter für diese nächste verwenden, die wir 717171 percenter für die darunter verwenden werden. Wir werden E B E B E B E B E B drücken und letztendlich, für diesen hier, werden wir F f f f f f f f f f f f benutzen, das ist das reine Weiß. Und jetzt, da wir das getan haben, müssen wir sie als Vermögenswerte erstellen. Sirkin, klicken Sie hier. Klicken Sie auf diese Farbe und klicken Sie hier. Klicken Sie auf diese Farbe klicken Sie hier, genau hier auf das Plus und schließlich auf das Plus. Und was ich gerne tun, ist wählen Sie den Ort dunklere Farben oben und hellere Farben an der Unterseite, so dass Sie den Prozess umkehren können. Sie können zuerst das Weiß auswählen und dann nach oben gehen und dann haben wir unsere Farben als nächstes erstellt. Wir werden unsere Front zu erstellen, also werde ich wählen Dies sind schlechte Eingabe T klicken Sie hier Eingabe, zum Beispiel, zum Beispiel, Start e Share-Kontrolle A wählen offene Sinn von hier. Wenn Sie es nicht haben, können Sie es auch installieren. Es ist eine kostenlose Google-Front, und wenn Sie Adobe-Telefone verwenden, können Sie es auch dort finden. Installieren Sie es einfach und schon können Sie loslegen. Unsere lassen Sie einen Link in der pdf, und Sie können auch alle diese Links auf das Telefon zugreifen, um die Bilder gesendet, und Sie können auch einige zusätzliche finden. Eine Ressource ist, dass ich innerhalb dieser Datei verlinken werde. Erste Dinge zuerst. Wählen wir 18 von hier aus. Percenter. Es wird halb fett sein, also wählen Sie halb Schüssel von hier aus, und es wird diese Farbe sein. Jetzt. Wir werden es für unsere Überschriften verwenden, damit Sie hier klicken können, um einen neuen Charakterstil zu erstellen. Als nächstes werde ich dupliziert, so kontrolliert tief bewegen Sie es unten, und ich werde eine normale verwenden, und ich werde diese Farbe auswählen, die unser Alter für den ganzen Text sein wird. Und schließlich werden wir seine Größe reduzieren. Also wählen Sie hier zu 14% und wir gehen Zehe verwenden diese Farbe sozusagen. Klicken Sie hier, um weitere Zeichenformate zu erstellen. Und das ist es für dieses Projekt, weil wir nur diese Werkzeuge Zeichenstile verwenden werden. In den meisten Projekten werden Sie es mindestens drei verwenden. Und in den meisten Fällen werden Sie verschiedene Telefone verwenden. Aber dieser Kunde bevorzugt den einfachen Look von diesem und wollte damit gehen. Also was ich sagen kann, ist, OK, was wir jetzt tun werden, ist eine Anleitung zu erstellen, um uns zu helfen, so dass Sie dies auswählen können und von diesem Rand, bewegen Sie einfach die Führung, bis sie hier trifft, so dass wir immer wissen, dass es 20 Pixel von diesem Rand entfernt ist und tun Sie das gleiche für dieses Symbol hier. So können wir wissen, dass es 20 Pixel von dieser Suche ist, und es wird unsere Arbeit viel einfacher Fertig Freude machen, so dass Sie diese auswählen können, um sie direkt hier zu bewegen , und Sie können es so ausrichten und einfach halten Sie Ihren unteren Pfeil bewegt sie, zum Beispiel auf fünf Pixel. Und was ist Doppelklick hier und Eingabe, zum Beispiel, zum Beispiel, sind die besten Segel-Anteil. Sagen wir so etwas, und wir werden ein Bild erstellen, hinter dem wir gehen. Verwenden Sie also einfach ein wenig Aufrichten und wählen Sie von Kante zu Kante. Entfernen Sie den Rahmen. Was wir verwenden werden, ist dies ein B E V E B, und wir werden 375 die zu 16% verwenden und wir würden in unsere Ebenen springen, lokal ganz hier, als Bildzentrum und bewegen Sie es rechts unten zu hören. Und lassen Sie uns schnell einige dieser Schichten bestellen. Also, wie gesagt, geht dies zu den Top-Bildern hier, und was wir tun werden, ist, um es 20 Pixel so zu machen. Also verschieben Sie den unteren Pfeil zweimal und wir wollen, dass Sie das gleiche für diese tun. So aufgestellt wie so Schicht 12 Und so haben wir unser Bild erschaffen. Als nächstes werden wir einige Paginierung direkt hier am verwenden, so dass wir schnell auf den Lippen erstellen werden. So wie Männer so können Sie erstellen, zum Beispiel, 10 mit 10 percenter machen einen perfekten Kreis und Sie können es duplizieren. So control de move es wie, zum Beispiel, 10 Pixel steuern D mit 10 Pixel, wie so steuern D und haben vier, zum Beispiel. Sie können sie auswählen, indem Sie die Shift gedrückt halten. Bewegen Sie sie, bis sie sich hier treffen. Halten Sie Shift und positionieren Sie sie so in der Mitte. Und Sie können dies auch gruppieren und dann in der Mitte positionieren, wenn Sie möchten. Aber ich finde, das funktioniert gut. Und wenn Sie möchten, können Sie Ränder von allen entfernen. Also lasst uns das so einfach großartig machen. Und dann, was wir tun werden, ist ein ausgewähltes zu verwenden. Klicken Sie also darauf, dann springen Sie in unsere Assets und klicken Sie hier, damit wir dies zu einem ausgewählten machen können. Wenn Sie nicht mögen, wie das aussieht, können Sie auch die Grenze an einigen von ihnen machen. Aber ich denke, das sieht gut aus. Was wir jetzt tun werden, ist sie umbenannt. Vielleicht können Sie also etwa eins anstelle von Lippen eins und einen Kreis verwenden. Dann umkreist drei. Und schließlich chirurgisch für genau hier. Und dann mag ich, dass sie von oben nach unten gehen. Es macht nur mehr Sinn für mich. Aber manche Leute bevorzugen es in die andere Richtung. Ich weiß wirklich, dass meine so einfach Phantasie und Sie können mit knapp unter dem Text hier bewegen . Als nächstes werden wir einen Text unten erstellen, so dass Sie beide dieser Steuerung auswählen können d sie so nach unten verschoben , bis sie mit diesem Bild Shift auf Pfeil nach unten zweimal treffen, weil das ist, wie wir es mit allen von ihnen gemacht haben. Also genau hier, was Sie schreiben werden, ist am beliebtesten wie so und genau hier werden wir Siegel schreiben weil dies ein Link sein wird und die Leute in der Lage sein, auf diesen Link zu klicken und alle aus dieser bestimmten Kategorie zu sehen . Sie können beide auswählen, direkt hier treffen, abschleppen und perfekt ausrichten. Und was wir jetzt tun werden, ist wählen Sie diese Bildsteuerung D halten Shift. Ich möchte das mögen, und was wir tun werden, ist eine Reihe von drei Bildern zu erstellen. Also lassen Sie uns schnell den Eckenradius auswählen, indem Sie fünf eingeben, damit wir um Ecken herum machen können und wir werden für die Größen eingeben. Sagen wir 1 35 mit 1 60 so. Stellen Sie also sicher, dass Sie sich wie so aufstellen, stellen Sie sicher, dass es 20 Pixel Stellen Sie also sicher, dass es 20 Schritte tief ist, wieder dupliziert wird, richten Sie es aus, stellen Sie sicher, dass es 20 Pixel nach rechts ist und schließlich die Stellen Sie sicher, dass es auch 20 Teile von rechts sind, und was wir hier erreichen wollen, ist Drag Trigger, so dass die Leute ziehen und betrachten können die Zonen, die im Moment außerhalb des Bildschirms sind. Und wir werden das ein bisschen später erstellen, oder was Sie tun können, ist, dass wir einfach eine erstellen und dann gruppieren und duplizieren. Also werde ich diesen Text duplizieren. Dell Creek hier, Steuerung Typ in einem Namen, Control A. Stellen Sie sicher, dass es in der Mitte wie so ist, und Sie können es und Bild auswählen und sicherstellen, dass sie alle perfekt gesteuert die nochmals. Und was wir unten gehen, das heißt, wir werden einen Preis einführen. Also, zum Beispiel, 24 und schließlich sicherstellen, dass alle von ihnen sind in der Mitte wie so und da haben wir es. Unsere Gruppe ist bereit. Und stellen Sie sicher, dass Sie zum Beispiel 10 Pixel von unten sind. Lassen Sie uns das wie so erstellen, so dass alle von ihnen 10 Pixel sind. Also von hier nach hier, 10 von hier bis hier. 10. Und schließlich, was Sie tun werden, ist, alle von ihnen zu gruppieren. Wählen Sie also alle drei aus, indem Sie die Kontrollsteuerung G halten, um sie zu gruppieren. OK, ganz hier und geben Sie Bild Eins vielleicht ein. Und jetzt werden wir Control de verwenden, um es zu duplizieren und zu platzieren, wie so 20 Stücke, um Kontrolle D zu schreiben und diese 1 20 Pixel zu verschieben. Das ist also unser Bild. Drei. Dies ist unser Bild und schließlich ist dies unser Bild eins. Also wollen wir sie einfach ein bisschen besser bestellen. Also machen sie mehr Sinn auf der Straße. Wählen Sie also alle aus, verschieben Sie sie nach unten. Hier. Auch die beliebtesten und sehen alle bewegt sie knapp über diese, so dass all dies macht viel mehr Sinn. Sie können auch alle gruppieren, und das werden wir jetzt tun. So ausgewählt, wie so Kontrolle. Stellen Sie einfach sicher, dass Sie alle ausgewählt haben. So robuster Stuhl, unser meistverkaufter Stuhl und Dichtung sollte unten wie so halten Sie Schichtkontrolle. G. nicht ganz hören vielleicht tippen Held, denn dies ist ein Held Bild oder sind Schieberegler. Und für diese können wir vielleicht G kontrollieren und sie zum Beispiel benennen . Am beliebtesten und was wir jetzt tun wollen, ist, einen weiteren Abschnitt zu erstellen, den wir eine Raumkombinationen nennen werden. Kontrollieren Sie einfach D auf diesem und bewegen Sie diesen nach unten. So ausgewählt und aus irgendeinem Grund wird es sich nicht bewegen. Ja, wir müssen es so bewegen. Verschieben Sie den unteren Pfeil zweimal und verschieben Sie ihn jetzt. Einfach blasen und sie treten gleich hier und tippen Raumkombinationen. Und für diesen, was wir tun wollen, ist die Preise zu entfernen, also entfernen Sie den Preis, entfernt den Preis. Und schließlich, von diesem, können Sie gehen wie so und entfernen Sie den Preis und Sie können die Namen auswählen. Also erste Loch Kontrolle ganze Kontrolle bewegte ihn unten, bis sie sich am Ende treffen, wie so und verschieben und unsere eine, so dass Sie sie 10 Pixel nach oben machen. Jetzt werden dies die Namen von unseren Zimmern sein, und das sind die beliebtesten Produkte. Nun, endlich, möchte ich schnell einen weiteren Abschnitt erstellen, und um das zu tun, muss ich die Höhe von diesem Kunstwerk erweitern. Und dazu können Sie einfach Ihren Port auswählen und so viel erweitern, wie Sie brauchen. Lass es uns vorerst so machen. Und wir werden die Heim-Anzeige schnell nach unten verschieben. Und was wir tun wollen, ist dieses noch einmal zu duplizieren. So steuern Sie d halten Shift mit diesem ein, bis sie an der Spitze wie so Kontrolle treffen, die Art der Verschiebung und unten Pfeil zweimal. Und was wir hier schreiben wollen, ist unser Prozess. Und genau hier wollen wir mehr Kampagne lesen, weil die Leute interessieren könnten für den Prozess von diesem Unternehmen und wie sie ihre Stücke machen und sie können mehr lesen. Aber genau hier werden wir ein Video erstellen und das tun. Also lasst uns diese schnell umbenennen. sind also die Rom-Kombinationen, und diese letzte ist unser Prozess, und wir werden diese löschen, um nur eine in der Gruppe zu lassen, wie so schnell zu nennen, weil wir sie nicht mehr brauchen. Und für diesen, was wir brauchen, ist 335 mit 178 Zentrum. Und was wir tun wollen, ist es mitten in den achtziger Jahren zu positionieren. In der Mitte. Wie Sie sehen können, berührt es die linke Führung ersetzt sowie die rechte Führung platziert. Stellen Sie einfach sicher, dass es lustig ist. Bilder aus dem Text wie so und was wir tun möchten, ist ein anderes Symbol enthalten, so dass wir Display Icon So -Steuerelement einschließen möchten. Siehe Springen in Sicht Kontrolle v Jeder, um dies von Bild zu Video umzubenennen und verwendet, um zu spielen. Ich kann mich nicht bewegen. Es ist nur unten, und Sie können beide auswählen und einfach so tun, und es wird Platz zu spielen. Ich kann nicht mitten in der Mitte. Und schließlich, was wir tun wollen, ist, das nach oben zu verschieben und es 20 Pixel nach unten zu bewegen. So verschieben Sie morgen und dann endlich, 10 Pixel mehr und klicken Sie dann auf unsere Seite. Sie können viel näher hineinzoomen, so dass Sie sicher sein können und dass es so an der richtigen Stelle Clips . Also verschieben Sie Pfeil nach oben, und das ist unser Bildschirm erstellt. Wie Sie sehen können, ist es wirklich einfach, weil viele der Elemente sich wiederholen und Sie werden in den nächsten Videos sehen, wie all dies wird viel schneller sein, jetzt, wo wir zumindest einige Elemente auf unserer Seite . Und wir werden diese Jungs viel mehr verwenden, weil ich fand, dass sie wirklich nützlich sind, weil Sie verschiedene Guides und verschiedene Bildschirme platzieren können, wenn Sie wollten. Noch wichtiger ist jedoch, dass Sie die Platzierung dieser Hilfslinien kopieren und sie dort einfügen können, wo immer Sie möchten. Also im nächsten Video, werden wir mit Kategorie Bildschirm beginnen, und ich werde es sehen. 10. Wireframes erstellen: Beginnen wir also mit dem Kategoriebildschirm. Und bevor wir es tun, klicken Sie auf Home Rechtsklick, suchen Führer und dann einfach kopieren Führer. Klicken Sie rechts hier, klicken Sie mit der rechten Maustaste Führungen und basierte Führungen und böse basiert die Führungen in genau der gleichen Position wie auf dem ersten Bildschirm. Was wir als nächstes tun werden, ist wählen Sie diese beiden Text, so können Sie Ihre Steuerungstaste halten, um innerhalb des Ordners zu springen Strg-Taste. einmal, Kontrolle. Sehen Sie, klicken Sie hier, Control V und was wir hier genau erreichen, ist so weit. Und genau hier werden wir in 129 Artikel schreiben, weil dies ein Kategoriebildschirm sein wird. Und sobald sie die Kategorie gefunden haben, ist es leicht für sie zu navigieren, da sie sehen, wie viele Elemente sich innerhalb jeder Kategorie befinden . Und vielleicht können wir diese 40 Pixel nach unten bewegen, nur so dass wir ein bisschen mehr Platz zwischen unserem Nab und unseren Artikeln haben und wieder in einer Bar und angegebenen Bar an der Spitze bewegt. Als nächstes werden wir das kopieren, Jodi, Jodi, bewegen es so, und wir gingen nochmals Preiskontrolle schreiben und 10 Pixel nach oben verschieben . Also werden wir ihn perfekt wie Zelle ausrichten und dann 10 Pixel verschoben. Doppelklicken Sie hier und geben Sie sortieren nach ein, da dies zum Sortieren dieser Elemente verwendet wird . Und was wir tun werden, ist das Abwärtspfeil-Steuerelement auszuwählen. Sehen Sie, gehen Sie hier, Control V. Und wir gehen auf die Position, die Arrow Toby nach unten mit unserem Preis übereinstimmte. Und wir werden es bewegen, bis es sich mit unseren Führern trifft. Verschieben Sie den Preis und halten Sie die Shift gedrückt und verschieben Sie ihn um 10 Pixel nach links, wählen Sie dann Sortieren nach. Richten Sie es mit dem Preis wie so und noch einmal, neigen Sie dazu, weil. Oder Sie können es sogar am oberen Rand dieses Textes ausrichten, wenn Sie möchten. Aber ich fand, dass es genau die gleiche Art und Weise anders herum funktioniert. So ist es 10 Pixel Stand-Pixel-Stand Pixel, tam Pixel überall, der gleiche Abstand. Und das wird den Entwicklern später die Arbeit an Ihrem Design erleichtern. Als nächstes werden wir dieses Bild auswählen, so dass Sie noch einmal die Kontrolle halten können. Springt in Sichtweite. Verwenden Sie das Bild und Sie können auch in diesen beiden Texten verwenden. Also, Kontrolle, sieh mal, hier zu springen, Kontrolle V und wir gehen den Fuß. Richten Sie es so aus. Und vielleicht können wir es jetzt 20 Pixel von diesem Text nach unten verschieben. Also verschieben Sie den unteren Pfeil zweimal. Und jetzt werden wir reinspringen. Bewegen Sie sie, Toby, A links, ausgerichtet. Und was wir jetzt tun werden, ist eine solche Position. Also nach oben und halten Shift bewegt sie 10 Pixel nach links, begann rechts und unten und tun genau das gleiche für diesen Preis. Also einfach, Nate, bewegen Sie es so und platzieren Sie es 10 Pixel nach unten. Oder wenn es ein bisschen viel zu essen ist, halten Sie einfach den Pfeil oben und mit fünf Pixeln nach unten und Sie werden es ein wenig später testen , jetzt werden wir es vergrößern. Es wird also, äh, 1 57 mit 1 80 so sein äh, . Und was wir jetzt tun werden, ist, sie alle zu gruppieren. Also stellen Sie sicher, dass dies oben. Das ist ganz unten. Halten Sie die Shift-Steuerung G gedrückt und geben Sie zum Beispiel Punkt 1 ein. Und was wir jetzt tun werden, ist, einige dieser Schichten zu bestellen, weil es hält Schicht an der Spitze. Es ärgert mich wirklich, aber soweit ich weiß, kann man nichts dagegen tun. So können Sie dieses Steuerelement G halten und vielleicht sortieren nach rechtem Zentrum eingeben. Und wir werden das hier platzieren. Also habe ich einen genommen. Und was wir jetzt tun werden, ist, alle von ihnen zu füllen und sechs zu erstellen, zum Beispiel, so gesteuert d bewegen Sie es hier und wählen Sie alle von ihnen und steuern und d So 20 Pixel, wie so steuern Sie D 20 Pixel wie so Und wir haben eine große off sechs Einzelteile. Jetzt werden wir ihm befehlen. Also Artikel ein Artikel zu und das ist das langweilige Bit. Aber wenn Sie etwas später für Ihre Entwickler genau sein wollen und schneiden Sie Ihre Arbeit kurz weil Sie nicht gehen Zehe springen in und aus und kommunizieren mit Entwickler über unnötige Elemente, Dann habe ich wirklich empfohlen, dass Sie alle Ihre -Layer, alle Ihre Gruppen oder Ihre Assets, denn das wird viel einfacher für Sie sein, als zu arbeiten und für Ihre Entwickler zu verstehen. Und der Teufel sie werden Sie nicht stören, weil es wirklich einfach für sie sein wird zu navigieren weil alles richtig benannt ist. Alles ist in der Reihenfolge benannt und später die Straße runter, wenn der Code, den sie gehen zu beschichten, wie Sie lesen, im Grunde so von oben nach unten von links, rechts. So ist es wirklich einfach, sie im Voraus zu optimieren und dann nur um ihnen die endgültigen Dateien zu geben . Und es wird dich dafür lieben, weil es auch einen Tag der Arbeit kurz schneidet. Als Nächstes werden wir Suchfilter erstellen und wir sehen uns im nächsten Video. 11. Wireframes erstellen: Beginnen wir also mit unserem Suchfilterbildschirm. Und das erste, was ich tun werde, ist wählen Sie die Snack-Bar Control D Steuerung. Wir sind genau hier. Entschuldigung. Ich sollte die Kontrolle benutzen, siehst du? Und dann kontrollieren Sie tief und was ich zum nächsten gehe, ist wählen, vermietet, um C Control D genau hier zu kontrollieren. Und ich werde noch einmal ein Sofa benutzen. Also kontrolliere D und ich werde es hier bewegen. Als nächstes werde ich das X-Symbol oder die Kleidung auswählen, die ich von hier aus kann. Kontrolle. Siehe Springen auf diesen Bildschirm Control V und ich werde es so positionieren. Also in der Mitte ist das eine Luftstange. Tun Sie es die Kleidung in Sicht und, zum Beispiel, wählen Sie Kleidung und Menü und stellen Sie sicher, aufgereiht ihn perfekt. Fallen Sie in der Nähe. Löschen Sie nab unsere, weil wir es nicht mehr brauchen. Und was wir als Nächstes tun werden, ist richtig. Klicken Sie hier. Verwenden Sie Hilfslinien. Und vielleicht können wir einfach mit der rechten Maustaste hier klicken. Nein. Also müssen wir den Namen auswählen, oder? Klicken Sie auf Hilfslinien. Hilfslinien kopieren. Klicken Sie hier. Guides basiert Jungs, so dass wir die gleichen Führer verwenden können und stellen Sie sicher, dass Sie die Kleidung genau hier so weit ist richtig ausgerichtet. Aber wir werden hier ganz verdoppeln und Filter tippen, weil diese unsere Filter sein werden . Und Benutzer verurteilen filtern, was sie wollen, dass die Elemente zeigen. Also zuerst in der Reihe wird Farbe sein, und ich werde das ein bisschen nach unten bewegen. Wir brauchen es im Moment nicht. Also, was wir wollen, ist es so zu bewegen und die ganze Schicht. 1234 Damit Sie sich mit 40 Pixeln nach unten bewegen können. Und wir werden diese beiden Pfeile verwenden, damit Sie gleichzeitig einen Bolzen auswählen können. Kontrolle. Sehen Sie Kontrolle V, damit Sie nicht die ganze Zeit springen. Verwenden Sie diese arabische Aufstellung in der Mitte, so dass Sie immer noch wie beide stehen können wie diese. Und was wir wollen, ist mehr mit in der Mitte aus dem X, weil das X ein größeres Eichel ist. So platzieren Sie es wie so und verschieben Sie dann dieses Symbol direkt darunter. Wie so, bis es perfekt gesteuert die auf der Farbe halten Shift und 12 wir gehen Zehenfilter nach Preis wie so und jetzt können Sie dieses bewegen und beide auswählen und den Pfeil ausrichten. Und als nächstes werde ich das benutzen. Also sagen wir, zum Beispiel, 349 Kontrolle de noch einmal und auf diesem, sagen wir 1239 zum Beispiel, so können Sie sie gleichmäßig aufteilen und Sie können, vielleicht sogar so, und wir gehen , um sie von hier zu verschieben. 40 Pixel nach unten, nur um ein bisschen mehr Platz zu haben. Wenn sie also geschlossen sind, ihre 20 Pixel auseinander und wenn sie offen sind, sind sie dafür da, denn abgesehen davon, dass wir als nächstes etwas mehr Atemraum haben können, werden wir einen Kreis schaffen. So erstellen Sie einen schönen großen Kreis. Vielleicht 16 mit 16 zum Beispiel ging, um die Grenze zu entfernen und für die Farbe Lassen Sie uns in diesem verwenden. Ja, und wir werden es mit diesem Text auseinandersetzen, oder Sie können beide auswählen und Sie schauen, damit wir wieder in unseren Ebenenzauber springen , eingekreist, so kontrolliert tief, und stellen Sie sicher, dass Sie in der Mitte mit diesem so wie diesem und wir werden eine Art ah Timeline dahinter setzen . Also, wie wir tun werden, dass ein Rechteck verwendet wird und wachsen gehen von Kante Zehenkante wie so entfernen Sie die Grenze für den Eckenradius. Wir werden fünf gebrauchen. Und für die Farbe. Lasst uns diesen zum Beispiel benutzen . Und ich finde, es sieht gut aus. Wir müssen es nur unten bewegen. Also nennen wir es eine Zeitlinie. Zum Beispiel, unter Kontrolle G auf allen von ihnen zu bewegen. Und Sie können sogar meine Preise filtern. So wie diese und verschieben Sie diesen Preis schön weinte hier und wir werden eingeben, zum Beispiel, zum Beispiel, Schieberegler den ganzen Bereich , wie Sie es nennen möchten. Und im Inneren haben wir zwei Kreise und unsere Timeline. Oder wir können vielleicht, zum Beispiel, tippen. Arrangieren Sie Bijie. Sagen wir mal so und wir werden sie alle gruppieren. Wählen Sie also den Preis, wählen Sie diesen Pfeil und wählen Sie alle diese Kontrolle G und wir werden sie nach Preis gruppieren . Als Nächstes wollen wir es ganz nach unten verschieben und einige dieser Schichten ein wenig nach oben ordnen. Also Stages Bar genau hier gingen wir Filter zu wählen und in der Nähe bewegt sich so. Also Pfeil nach oben und Farbe, wir werden sie so positionieren, wie Kontrolle G. Also das ist unsere Farbe. Und wir werden zum Beispiel die Kontrolle D auf diesem verwenden zum Beispiel die und es nach unten bewegen. Nur eine Berührung. Also halten Sie Shift gedrückt, bis sie sich so mit dem Boden von unseren Kreisen ausrichten. Also Schicht 1234 Und wir gingen, um Materialien wie dieses zu verwenden. Und wir brauchen einen Abwärtspfeil hier, so dass Sie innerhalb der Kontrolle klicken können, sehen und springen in die Materialien drücken Kontrolle V und dann werden wir diesen Pfeil so bewegen , bis er mit unserem Pfeil nach oben ausgerichtet ist. Also, genau so. Und wir gehen auf die Zehe. Platzieren Sie es wie so löschen Sie nach oben, Pfeil wie so Und was wir Einblick schaffen wollen, ist so etwas wie eine schnelle Auswahl. So können sie zum Beispiel Buchstabengerinnsel, einige andere Materialien auswählen zum Beispiel Buchstabengerinnsel, , zum Beispiel Sky oder welches Material es im Angebot gibt, und wir werden die Stapel brauchen. So steuern Sie tief, verschieben Sie es außerhalb des Ordners. Und noch einmal, um dieses Material zu mögen, sehen Sie, warum es wichtig ist, alle Ebenen und Gruppen zu benennen, also lassen Sie es in Sicht und Position. Es ist so und in Wahrheit ist eine Sache, weil wir einen Rahmen erstellen wollen. Also doppelklicken Sie hier und geben Sie einen Buchstaben ein und steuern Sie D und verschieben Sie es so. Und vielleicht wollen wir so ein Gerinnsel erschaffen. Also, was wir wollen, ist, unser Rechteck um es herum zu erstellen, so dass die Leute es auswählen können, und wenn sie es tun, wird es grundlegende Rechteck um es herum erstellen. Vielleicht möchten wir also ein Rechteck wie dieses erstellen und vielleicht tippen. Zum Beispiel, 80 mein Truthahn. Nehmen wir an, wir werden die Füllfarbe entfernen und für den Rahmen werden wir die gleiche Farbe verwenden. Und jetzt werden wir Briefeinsicht so positionieren und so. Es ist also in der Mitte auf allen anderen Seiten, und jetzt werden wir diese beiden benutzen. Also nennen wir es einen Rahmenrahmen und einen Buchstaben und das Tuch für Beat knapp darunter. Also wählen diese beiden ihn aus, bewegen sie sie, bis sie mit unserem Text treffen, wie so für die Pixel nach unten und benutzen das Gerinnsel und positionieren es in der Mitte und vielleicht sogar bewegen es. Mal sehen, wie so 1234 Stücke nach rechts und weiter oben, wir brauchen zwei weitere Abschnitte. Also lassen Sie uns die Farbe so tief gesteuert verwenden und wir müssen keine weitere Instanz davon erstellen , so dass wir genau die gleiche Instanz verwenden können. Also benutze die Farbe. Aber aus irgendeinem Grund hat es den Text ausgewählt. Lassen Sie mich es schnell reparieren. Also, innerhalb der Farbe, haben wir eine Barroso-Kontrolle tief. Ich ging, um es nach unten zu bewegen, bis sie hier Licht treffen. 1234 Und das wird unser Waschbarer sein. Ist das Produkt also waschbar oder nicht? Das bedeutet mehr, dass die Hauptstadt an der Front so ist und wir brauchen noch eine Instanz. Also kontrolliere D und möchte dieses bewegen. Also, bis sie sich treffen, wie so ein Werkzeug, wenn Sie sich erinnern, weil es geschlossen ist, nicht offen. Und das wird kein Mechanismus sein. Also, zum Beispiel, weil wir das Sofa hier gewählt haben, wird es Mechanismus sein? Also kannst du zurückziehen? Sind kollabieren es oder so etwas, oder ist nur fixiert Sofa und Sie bekommen, was Sie bezahlt. Das war's. Du kannst es nicht bewegen. Sie können es nicht verlängern oder anderweitig platzieren. Also, das ist im Grunde, was der Mechanismus ist, ich habe schnell überprüft, ob diese online. Ja, das sind sie. Und eine letzte Sache ist, dass wir Tage bestellen und den Boden schaffen. Beginnen wir also von oben mit Luftfiltern, wir haben geschlossen. Farbe ist der erste Preis ist das zweite Material ist die TERT und das sollte waschbar sein, wie so Und schließlich ist dies ein Mechanismus wie so und eine letzte Sache. Wir wollen hier einen Button erstellen. Also werden wir den ganzen Witz nutzen, wie also gehen wir auf die Zehe. Wählen Sie diese Farbe, weil es schön und Bolzen ist, werden wir Bt N eingeben, die kurz für Taste ist, und wir werden es positionieren, zum Beispiel, für Pixel. Aber lassen Sie uns zuerst die Dimensionen verwenden, was verwendet wird? 335 mit 50 und ich werde fünf für den Eckenradius verwenden. Und dann werde ich es 40 Stück von diesem Home-Indikator nach oben verschieben, und schließlich brauche ich nur einen Text. Also lassen Sie uns Filter Text so tief gesteuert, mehr nach unten geschrieben und vielleicht, zum Beispiel, behandeln Sie so mehr in Sichtweite, diese Filter bleiben an der Spitze. Dies wird so am Boden bleiben, und das wird weiß sein. Keine schnelle Einsicht und wir werden schreiben, Anwenden Auswahl Freude. Stellen Sie sicher, dass es in der Mitte ist und stellen Sie sicher, dass Sie es wie so und so positionieren, so dass es perfekt in der Mitte ist und Sie können auch gruppieren. Es ist so Kontrolle D unten, und das ist es für unseren Bildschirm. Wie Sie sehen können, ist es wirklich ganz einfach, weil alle diese Auswahlen wiederholen einander die meisten Salbung über Nicht nur das, offensichtlich, aber jede Software ist, dass offensichtlich, es alle Schichten an der Spitze setzt. Ich weiß wirklich nicht, ob Sie etwas davon beheben können und ob Sie sie von unten bestellen können. Aber auf jeden Fall, auch wenn Sie können, in den meisten Fällen, die Sie haben Schlepptau, bestellen Sie sie selbst, so das ist das zeitaufwendigste Stück. Wenn Sie sauber n ordentlich bleiben wollen. Wenn du es nicht tust, liegt es wirklich an dir. , Zum Beispiel, wenn es einige Übungsdateien durchführt oder Sie Dateien an einen Client senden und Sie möchten mehr Zeit am Ende vor der endgültigen Zustellung an den Client verbringen. Dann ist es in Ordnung. Sie müssen nicht alle Ebenen benennen und sie so positionieren, wie ich es in diesem Projekt getan habe . Aber es ist wirklich vorzuziehen, wenn Sie dies tun, weil Entwickler oder lieben Sie und es wird Ihre Arbeit kurz später, wenn es darum geht, die endgültige Art Enddateien an Ihren Kunden und ihre Entwickler im nächsten Video zu liefern , Wir werden Raumkombination Bildschirm zu entwerfen, also sehen wir uns dort. 12. Wireframes erstellen: für den falschen Kombinationsbildschirm. Es wird alles ein wirklich einfach sein, also klicken Sie auf Konzertfilter. Klicken Sie mit der rechten Maustaste Ihr habt Guides kopiert, richtig? Klicken Sie auf die Basislinien. Weil wir die gleichen Guides benutzen werden. Klicken Sie hier direkt auf das Kleidungssymbol Control C Control hier. Und dann werden wir das wieder benutzen. Pfeil-Steuerung. Siehst du Springt drinnen. Klicken Sie hier. Kontrolle V. Und wir gingen, um es so zu bewegen. Soto, dieser linke Rand und dieser linke Drachen und wir wollen ihn mit unserem Kleidungssymbol ausrichten. Es macht es also nicht so. Stellen Sie sicher, dass es 20 Picks von oben ist, und schließlich gehen wir Zehe löschen unsere Kleidung Symbol. Also ist es wirklich einfach. Sie bewegen diese Elemente einfach um und verwenden sie so, wie sie sind. Also werden wir das Gleiche für die Filter tun. Also kontrolliere, sieh, kontrolliere das Recht hier, stelle sicher, dass es 40 Pixel nach unten ist. Also 1234 Erwachsene wie hier, wir reden, Wohnzimmer zu sein, weil dieses Zimmer wird unser Wohnzimmer Kontrolle D sein und eine weitere Kopie machen. Und genau hier werden wir in Produkte verwenden so schreiben, denn jetzt werden wir eine Karte erstellen, die wir unsere Produkte zeigen werden, die innerhalb dieser Raumkombination verwendet werden . Also, jetzt werden wir einen Hintergrund erstellen. Verwenden Sie also ein Rechteck. Ich entfernte den Rahmen und für die Farbe von wir gehen, um diese E b e p Farbe zu verwenden, und wir werden fünf für den Eckenradius und für die Dimensionen können Sie Straße 10 mit 1 80 zum Beispiel werden wir es setzen So zum Beispiel, 40 Pixel nach unten wie so. 1234 Und wir werden 20 Stücke für diesen Text verwenden. Also 12 als Nächstes brauchen wir etwas Text. Also lasst uns hier schnell hineinspringen. Wählen Sie diese Texte oder steuern, Siehe Springen direkt hier. Kontroll-V und Sie können sie hier platzieren. Was wir wollen, ist, einen Namen für das Produkt zu schaffen, also Name und die Öffentlichkeit hier, und es wird ein Preis sein. Also, zum Beispiel, es wird gerade verwendet 24 für den Moment. Als Nächstes können wir diese Kreise benutzen. Also steuern, sehen Sie in der Nähe all diese Kontrolle V und einfach Kreis direkt hier positioniert und was wir wollen ist Yeah, Lassen Sie uns dieses für die erste 1 gesteuert die und vielleicht 20 Pixel gesteuert die vielleicht 26 Punkt dies und ich möchte einfach ein paar verschiedene Farben erstellen. Es hat also etwas bräunliche Farbe verwendet, so vielleicht. Und schließlich, für diesen, lassen Sie uns eine rötliche Farbe verwenden. Also vielleicht so? Ja, ich finde, es sieht gut aus. Und was wir wollen, ist, sie gleichmäßig auszuräumen. So Positionierung wie diese Verschiebung 12 und tun das gleiche für den Preis. Also verschieben Sie 12 nach unten, und dann können Sie alle auswählen, so dass es alle Kreise auswählen, G steuern, den Hintergrund auswählen und einfach so tun, damit Sie sie direkt in der Mitte positionieren können . Jetzt können Sie hier doppelklicken und zum Beispiel vier eingeben, denn das sind die grundlegenden Informationen zu unseren Produkten. Also werden wir in Farbe drei tippen, sie nach unten bewegen. Das wird ein Anrufer sein. Das wird auch Farbe sein. Und schließlich gingen wir hier, um in Namen zu setzen. Preis unten. Wie Sie sehen können, wie es bestellt wird. Dies wird BG sein oder Sie können es Karte BG nennen, wenn Sie vielleicht Putting nicht Linie so wollen . Und schließlich werden wir all das in der Statusleiste oben platzieren. Also zurück Pfeil wird direkt unter Statusleiste Produkte verwenden wird genau hier und Wohnzimmer hier sein. Also, jetzt, da wir das haben, brauchen wir nur eine Platzbestellung für unser Bild und zu tun lassen Sie können einfach duplizieren diese so öffentliche Aidc RPG sagen ziemlich hören, dass Bild und Sie können weißen Kragen wie so und für die Abmessungen wählen . Verwenden wir 1 40 mit 1 62% und wir gehen die Zehenposition in der Mitte so und bewegen sie vielleicht . 10 Pixel wie diese. Jetzt, wo wir unsere Karte haben, können wir das alles zusammenfassen. So steuern G Typing Karte ein und oben Kontrolle D und Sie können bewegen, abwerfen, wenn Sie wollen, so bewegen Sie es wie so stellen Sie sicher, dass sie Linie nach oben und tun Verschiebung nach rechts Pfeil zweimal, so dass Sie 20 Pixel sind Teil. Jetzt wird dies auch Karte sein, und dieser Bildschirm ist fertig, also jetzt werden wir verwenden Wenn wir anfangen, diesen Bildschirm zu entwerfen, werden wir eine Hintergrunddimension verwenden, um die Gesamtheit aus dem Bildschirm auszufüllen, und wir werden separate Produkte innerhalb dieser Bilder. Dies werden Namen von den Produkten innerhalb der Bilder und die Preise sowie die Farben sein. Und die Leute können hier klicken, und es wird sie zu dem ausgewählten Element bringen, wenn sie wollen. Und von da an können sie es auf dem Wagen haben, wenn sie es so wählen. Also im nächsten Video werden wir ausgewählte Artikel und ausgewählte Artikel angepasst Bildschirme zu entwerfen weil sie im Grunde zwei auf dem gleichen Bildschirm sind und sie haben nur ein paar verschiedene Elemente zwischen ihnen, so sehen Sie es. 13. Wireframes erstellen: Also lassen Sie uns mit ausgewählten Elementen Bildschirm beginnen. Also rechts, klicken Sie auf diesen. Hilfslinien, Hilfslinien kopieren, Ausgewähltes Element, Rechtsklick-Hilfslinien basierend. Und was wir wollen, ist, diesen Pfeil auszuwählen. Kontrollieren Sie also C-Kontrolle V, weil es an genau der gleichen Stelle sein wird. Und dann können Sie all dieses Steuerelement auswählen. Sehen Sie, Control V und dann bin ich Gruppe sie und lassen Sie einfach auf dem Order-Symbol an Ort und Stelle, Wirklich alle anderen, und bewegen Sie es einfach, bis es mit unserem Führer trifft. Bestellen Sie es ein bisschen besser. So verschieben Sie Städte Leiste an der Spitze. Und was wir jetzt tun wollen, ist einen Text auszuwählen, so dass Sie diese beiden auswählen können. Zum Beispiel, Control, siehe Springen direkt hier. Kontrolle V. Und wir können sie vorerst so lassen. In dieser Woche, genau hier. Es schreibt Produktnamen direkt hier. Wir werden in einer Textzeile für Nein schreiben, und wir können sie verschieben. So zum Beispiel, 10 Pixel nach unten gesteuert tief. Machen Sie eine weitere Kopie es wie so 10 Pixel nach unten. Und das wird unser Preis sein. Also auf 24 zum Beispiel, und vielleicht können wir sie ein bisschen besser bestellen, wie so zog ihn runter hierher. Und was wir jetzt tun wollen, ist ein Bild zu erstellen, und wir können ein Bild erstellen, indem wir ein Rechteck verwenden und es einfach ein bisschen besser positionieren, so stellen Sie sicher, dass es 375 ist, das ist das Gewicht von unserem Bildschirm entfernt. Border Sprung direkt hier zu den Vermögenswerten wird die CB Farbe sagen, für alle unsere Bilder, Belka ganz hier Eingabe Bild. Oder Sie können Hero-Bild eingeben, zum Beispiel, und B. G, weil dies nur ein Hintergrund sein wird und wir werden ein PNG-Bild darüber platzieren , das ist das Bild ohne Hintergrund, und du wirst sehen, wie das aussieht. Sobald wir zu der Gestaltung Teil von diesem Kurs, stellen Sie sicher, dass es 468 und Höhe wie so, und stellen Sie sicher, dass Sie es 20 Pixel von diesen Symbolen wie diese bewegen und stellen Sie sicher, dass Sie das gleiche für diese Texte tun . Also vielleicht mit 20 Stück wie so jetzt werden wir brauchen, um diesen unseren Hafen den ganzen Weg nach unten zu erweitern , und Sie können zum Beispiel tun, 1706 Es wird genug sein und zog nach Hause Indikator unten wie so Weiter oben. Was wir erstellen möchten, ist eine Farbe eine Größe und vielleicht etwas wie über das Produkt hier schreiben , so dass Sie genau diesen gleichen Text so gesteuert D verwenden und es 40 Pixel von hier nach unten positionieren können. Doppelklicken Sie nach innen und Eingabe Farbe, und wir möchten diese Farben kopieren, so dass Sie innerhalb der Karte springen können. Eine Info. Und vielleicht sollten wir diese gruppieren und sie benannten ihn, um zu färben und dasselbe für die andere Karte zu tun . So springen Sie in kontrolliertes G nicht schnell. Und deshalb sage ich immer wieder, dass es wirklich wichtig ist, all Ihre Ebenen und Gruppen zu benennen , denn es wird sehr einfach für Sie sein, später zu navigieren, wenn Sie wirklich viele davon haben, also wählen Sie alle aus, gruppierte sie und zog sie wie so weiter oben wollen wir eine Größe so steuern d bewegen, und gerade unter so 1234 Die Woche Einsicht. Ich habe Bohne Größe und lassen Sie uns noch eine und 1234 tun, was wir hier schreiben werden, ist über das Produkt und unten. Wir werden einige Informationen über das Produkt schreiben. Aber bevor wir es tun, lassen Sie uns schnell wählen diese so Kontrolle. Siehe Steuerung. Wir hier und vielleicht können wir so etwas wie 49 Zentimeter schaffen, weil das für den Stuhl sein wird . Und vielleicht können wir zum Beispiel 59 Zentimeter tippen und wir werden einen Rahmen um ihn herum erstellen. Also werden wir etwas verwenden wie, erstellen wir zuerst einen Frame und dann etwas wie 64 Wochen 30. Ich denke, das funktioniert ganz gut. Und für die Rahmenfarbe werden wir diese Farbe wählen, wie wir es getan haben, bevor wir auf die Ebene springen. Verbringen Sie alle und Eingabe Rahmen Ihre Komposition, der Text innerhalb des Rahmens ein bisschen besser, so können Sie Text auswählen und stellen Sie sicher, dass es in der Mitte wie folgt und wie folgt positionieren , Dann stellen Sie sicher, dass Sie dies den ganzen Weg hier bewegen und stellen Sie sicher, all dies ist eine Linie in der Mitte mit unserer Größe. Also mit vielleicht 12 und stellen Sie sicher, dass alle in der gleichen exakten Zeile wie diese sind. Und noch einmal, stellen Sie sicher, dass es 40 Pixel von oben jetzt mit ausgewähltem Rahmen ist, also stellen Sie sicher, dass es so ist. So 1234 und tun Sie das gleiche für die über das Produkt. Denn jetzt erhöhen sich die Größen, weil wir diesen Rahmen erstellt haben. Also 12 und es sind 40 Pixel von hier. Als nächstes werden wir ein Bild erstellen, das direkt unten hier gehen wird, so dass Sie entweder dieses Bild kopieren können . So Unfall bewegen sich mit den ganzen Weg nach unten und für die Dimensionen verwendet 375 und vielleicht bis 16. Und stellen Sie sicher, dass es 40 Pixel vom Text entfernt ist. So 1234 wie das. Und jetzt brauchen wir noch ein anderes von diesen. Also hat ein anderer Titel dich kontrolliert. Positionieren Sie es so und vielleicht schreiben zum Beispiel bequem und stilvoll, und wir werden dies für die Pixel nach unten verschieben. Also 1234 und wir brauchen einen Text wie diesen so gesteuert d platzieren Sie ihn hier, wie so. 12 vielleicht, und erstellen Sie einen Bereichstext. Stellen Sie sicher, dass Ihr Bereich den ganzen Weg von Führer zu Führung ist und bewegen Sie es einfach unten wie folgt , und wir werden die Plugging verwenden Also noch einmal, viel Gips, Philip Place oder einen Text einfügen Text. Vielleicht können wir sechs Zeilen aus dem Text haben. Also 1234 fünf und sechs und vielleicht führen Leck hier und endete genau hier. Und vielleicht können wir ein weiteres Bild so tief kontrolliert einbinden und es 40 Pixel gleichermaßen positionieren . Also und für diesen, lassen Sie uns verschiedene Dimensionen verwenden. Also 335 mit 2 16 sagen wir ja, und stellen Sie sicher, dass es 40 Pixel unten ist, und für diese wurden 0550 verwenden Also was wir dort gemacht haben, ist, dass wir um sie herum, diese beiden Ecken und diese beiden blieben gleich. Also schließlich, wählen Sie dieses Steuerelement D und mit 40 Stück nach unten So 1234 wie diese. Und schließlich, langweilige schnelle Einblicke Tippen mit Blick auf den Benutzer so etwas entwickelt. Und Derek, wir haben unseren ausgewählten Items Bildschirm erstellt. Eine letzte Sache, die ich tun möchte, ist, alle zu gruppieren und sie ein bisschen besser zu bestellen. Also werden wir dieses dieses und dieses Control G. Ich habe ein Heldenbild gewesen, denn das wird wieder unser Hauptbild sein und wir können Statusleiste und diese beiden Symbole den ganzen Weg nach draußen am oberen Heldenbild direkt unten bewegen . Wir werden Farben so Farbe auswählen, und das wird direkt unter unserem Helden Bild gehen. Als nächstes haben wir Größe und Sie können sie wie folgt auswählen, wenn Sie möchten. So steuern Sie G-Typing-Größe. Verschieben Sie sie direkt hier über das Produkt. Orte wie diese. Das ist also unser Bild. Die Schnellkopie Eine Kopie. Und wir werden dieses Bild direkt unten hier platzieren, bequem und stilvoll wie dieses. Und kontrollieren G. Cole C und stilvollen Moderator. Und Sie können auch diese beiden Gruppen, so bewegen Sie einfach das Bild an der Spitze Control G. Und schließlich, dies ist mit Benutzern in meinem entworfen und dieser Bildschirm ist fertig. Nun, was wir tun können, ist doppelklicken Sie hier. Ausmaß das runter. Löschen Sie dieses Recht. Klicken Sie auf Hilfslinien, Hilfslinien kopieren, Rechtsklick. Ich würde Weltraumführer. Und jetzt werden wir alles außer Statusleiste und Home-Indikator auswählen oder weil wir Home-Indikator gelöscht haben. Wir können es auch benutzen. Also halten Sie Shift. Wählen Sie alles aus, kontrollieren Sie. Siehst du, in Control V springen und du wirst alles in der gleichen Position platzieren, wie es genau hier war. Nun, was wir tun werden, ist, wenn Benutzer eine dieser auswählen. Also lasst uns schnell hineinspringen und wir gehen Fuß. Verstecken Sie diesen Rahmen einfach, weil wir ihn nicht brauchen. Moment wird es in diesem Bildschirm erscheinen, so dass sie zum Beispieldiese Farbe auswählen können zum Beispiel und es wird hier erscheinen, und dieses Bild wird nach oben schrumpfen und eine Schaltfläche wird rechts eingeführt hier. Beginnen wir also mit dem Bild. Lassen Sie uns also seine Größe 2435 percenter reduzieren. Aber stellen Sie sicher, dass Sie nur Bild so für 35 auswählen, damit es nichts anderes als das Bild selbst beeinflusst . Also, was wir jetzt tun wollen, ist wählen Sie diese Farbe so steuern D und vielleicht seine Größe erhöhen, indem Shift alt und Linksklick gedrückt halten. Und wir werden einfach entfernen und Phil schließen die Grenze ein und vielleicht machen es ein bisschen größer , wie so zoomen Sie heraus und Sie können sehen, wie das aussieht. Größe ist immer ausgewählt, so dass wir sie vielleicht nach oben verschieben können. Und er organisierte das ein bisschen besser. Also 1234 Und was wir jetzt einschließen müssen, ist der Grund. Also ist es wie diese eine Kontrolle. Sehen Sie hier Springen, steuern Sie V und bewegen Sie es einfach für die Pixel nach unten. Also 1234 Und was wir wollen, ist über den Produkttext zu verbergen. Sie können es sowieso nicht sehen, sondern nur um sicherzustellen, dass es vor der Ansicht verborgen ist. 1234 Wie Sie sehen können, haben wir jetzt 43 Pixel, aber es ist OK, weil wir keine von ihnen später verzerren wollen, weil Sie sie einfach so halten wollen wie sie sind. Diese Schaltfläche wird angezeigt, sobald sie von hier aus etwas getroffen haben. Und eine letzte Sache, die ich tun möchte, ist nur sicherstellen, dass dies Farbsteuerung ausgewählt ist, Siehe, weil ich genau die gleiche Ebene in diesem Bildschirm verwenden möchte. Also Kontrolle v und stellen Sie sicher, dass Sie in der Mitte hier in der Mitte sind, über Farbe, auch. Und verstecken Sie es einfach, denn später, wenn wir unsere Animation starten, werden wir Adobe Ecstasies, Auto-Animate-Funktionverwenden Auto-Animate-Funktion , und damit es richtig funktioniert müssen Sie alle Ebenen in genau den gleichen Ort und benennen sie richtig weil es nicht so funktioniert, wie es anders herum sollte. Also, das ist es im Grunde für diesen Bildschirm. Im nächsten Video werden wir mit Bestelldetails beginnen, und wie Sie sehen können, , sobald Sie einige Artikel haben funktioniert alles viel schneller, sobald Sie einige Artikel haben. Alles bewegte sich ein bisschen schneller, und Sie können sie bestellen, wie Sie wollen. Und es wird dir einen Job viel einfacher machen, also sehe ich dich in den nächsten paar. 14. Wireframes erstellen: Gehen wir nun zum nächsten Bildschirm, dem die Bestelldetails sind. Und was wir tun wollen, ist wählen Sie diesen Knopf unsere Kontrolle. Sieh, um es zu bewältigen. Kontrolle, wir haben genau hier. Klicken Sie mit der rechten Maustaste Hilfslinien, kopieren Sie Hilfslinien und klicken Sie mit der rechten Maustaste. Gleiche Flüssigkeit es in allen anderen Bildschirmen. Als nächstes wollen wir etwas Text und lassen schnell den Text finden, den ich will. Oder vielleicht können wir einfach dieses auswählen. So Produktname und eine Zeile Textsteuerung Siehe hier basted. Und was wir tun wollen, ist so positioniert und genau hier werden wir insgesamt schreiben . Und für hier werden wir Bestelldetails wie so schreiben. Und ich werde ganz genau hier positionieren oder die Details, wie es ist, und sie platzieren. 123 40 Pixel nach unten. Als nächstes werden wir drei verschiedene Karten und einen Knopf unten erstellen, weil wir die Zehenanzeige wollen , was in unserem Warenkorb hinzugefügt wird. Und das sind unsere Bestelldetails. Also zuerst, lassen Sie uns die Karte erstellen. Also werde ich schnell zeichnen ein Rechteck entfernt die Grenze. Er war die gleiche Farbe für alle von ihnen. Also ist es dieser hier. Und geben wir es nach Radius Five und benutzte 3351 47 dafür und ich gehe um ihn herum . Also, bewegen Sie es hier. 1234 und 40 Pixel angegeben. So schöne große Lücke hier. Als Nächstes wollen wir ein Bild im Inneren erstellen. Also werde ich die Kontrolle auf D treffen, um dieses zu duplizieren. Ich werde es weiß machen. Skalieren Sie es einfach ein wenig und verwenden Sie vielleicht Dimensionen von 1 40, die, sagen wir 1 zu 2, so etwas wie Schulden. Und wir machen es so in der Mitte und positionieren es könnte sein, ja, 10 Pixel von links. Nun, was wir hier erstellen müssen, ist der Name, Preis und Betrag. Also werde ich einfach diese auswählen, auf tief steuern, um sie zu duplizieren, und sie dann nach unten bewegen, in meine Ebenen-Rechtschreibung springen, nur damit ich sehen kann, was ich tue. Ich werde diese beiden nach unten verschieben, und wir werden beginnen, bestellt diese in nur einer Sekunde, aber seine erste schnell einen Namen zu schaffen, der Name von unseren Produkten sein würde. Das wird der Preis Sula sein. Wählen Sie 24 zum Beispiel, Und schließlich genau hier unten. Wir werden einen einfachen Rahmen mit der Nummer im Inneren und dem Pfeil erstellen. Also werde ich einen benutzen. Und was wir brauchen, ist ein Pfeil nach unten, damit wir hier springen können. Wählen Sie die Abwärtspfeil-Steuerung, Siehe, Springen Sie zurück in die Kontrolle, wieder aufgenommen, basted es und wir können sie in der gleichen Höhe positionieren. Also, so und was wir jetzt schaffen müssen, ist dieser Rahmen. Und um das zu tun, wird es wirklich ein einfacher Rahmen sein. Lassen Sie uns also ein Rechteck verwenden, um einen einfachen Rahmen ohne Gefühl nur Rahmenfarbe und für Rahmenfarbe zu erstellen . Wir können diese Farbe hier verwenden. Jetzt für den Rahmen können wir zum Beispiel den Truthahn um 30 so etwas verwenden. So schön, groß. Und wir werden zwei Freunde finden. Also kontrolliere D und stelle sicher, dass sie sich hier überlappen. Also nicht wie diese Seite an Seite, aber so überlappen sie sich und wir sehen diese Zeile nicht hier. Also werde ich diese beiden in der Mitte so positionieren, positionieren Sie den Pfeil hier und positionieren Sie die Zahl hier in der Mitte. Also, was wir hier haben, ist, dass wir den Namen des Produkts haben. Wir haben den Preis des Produkts und wir haben die Menge, so dass sie hier klicken und wählen können . Das ist also gut. Zum Beispiel, wie im druckbaren Drahtrahmen Video erläutert. Wenn sie zum Beispiel vier Stühle wählen wollen , können sie es von hier aus tun. Wenn sie zum Beispiel zum Beispiel Vasen kaufen wollen. Vielleicht wollen sie sechs. Wenn sie Aschenbecher und kleinere Gegenstände wollen, können sie auswählen, welche Menge sie wollen. Wenn sie also auf diesen Pfeil klicken, wird Della angezeigt, und dann werden sie in der Lage sein, so viele Elemente auszuwählen, wie sie wollen. Also lasst uns diese schnell bestellen. Also lassen Sie uns den Rahmen genau gleich hier wählen. Und lassen Sie uns diese schnell bestellen. Also müssen wir diese hier sein, einer über diesem, und wir brauchen unseren Pfeil nach unten über diesem. So patrouillieren g, um sie zu gruppieren und vielleicht können wir in Höhe als nächstes schreiben, wir brauchen Preis, der oben gehen wird und wir brauchen den Namen , der oben gehen wird, wir werden sie den ganzen Weg nach unten bewegen. Also, was wir hier haben, ist Bild und schließlich Karte VG, so dass wir wissen, welche Schicht welche ist . Als nächstes können wir diese auswählen, sie zu einer Linie nach links machen, und vielleicht können wir mit so Abstand herumspielen. Also lasst es uns so positionieren, bis sie sich genau hier treffen, 10 Pixel und dasselbe für diesen unteren Teil tun. Also, wie hier, auch 10 Pixel. Wählen Sie alte und Kontrolle G und wählen Sie BG und ausgewählt und positionieren Sie es einfach in der Mitte auf Groupies und was wir wollen ist Schleppen. Richten Sie sie mit dem rechten Rand aus dem Bild und drücken Sie einfach 123 vier oder vielleicht sogar zwei. Es ist gut genug für den Moment. Also, wie ich in den vorherigen Videos erklärt habe, ist dies nur ein Drahtrahmen, so dass Sie es alle diese Elemente hinzufügen können, während Sie entlang wie Ihre Bilder gehen. Manchmal, wenn wir Schlagschatten sind, müssen Sie die Abstände erhöhen und dann zurückgehen und die anderen erhöhen. Aber weil wir steady Abstand Struktur erstellt, so haben wir in der Regel 10 20 oder vielleicht vier Pixel zwischen den Elementen. Es ist wirklich einfach für Sie, dann zurück zu springen und neu zu positionieren, wenn nötig. Also lassen Sie uns schnell alle diese Control G zusammenfassen und nennen es Karte eins, zum Beispiel. Als Nächstes möchte ich einige davon bestellen. Also haben wir Treppen waren an der Spitze, nie nur unten oder die Details insgesamt. Wir haben Karte eins. Kontrollieren Sie die und kontrollieren Sie in der Tat, noch einmal. Also werde ich die beiden ein bisschen runterziehen, bis sie sich hier treffen. Shift 1 bis 20 Pixel genannt diese Karte zu und schließlich für gestörte man das gleiche tun 12 Und was wir brauchen, endlich, ist ein Knopf. Also werden wir dieses Tasten-Steuerelement verwenden. Sehen Sie Control V hier. Und was wir hier schreiben werden, ist mit der Zahlung fortzufahren, denn wenn die Benutzer mit ihrer Auswahl zufrieden sind , werden sie mit der Zahlung fortfahren, und dann auf dem nächsten Bildschirm werden sie ihre Zahlungsoptionen auswählen. Es ist also entweder Kreditkarte oder PayPal, und das ist der Bildschirm, den wir als nächstes entwerfen werden. Also werde ich dort sehen 15. Wireframes erstellen: nächstes Lassen Sie uns alsnächsteseinen Zahlungsbildschirm erstellen. Also gehe ich mit der rechten Maustaste auf diesen einen Guides Copy Guide. So wie alle anderen. Sie können auf Basis Guides treffen und was wir oben brauchen, ist nur ein Zurückpfeil, so dass wir dieses hier auswählen können . Sie können etwas näher zoomen, wenn Sie es drücken können, um die Seekontrolle zu steuern. Wir hier, das wird die einzige Option sein, um zurück zu diesem Bildschirm zu gehen, und Sie können abbrechen, indem Sie auf das Menü von diesem Bildschirm gehen und nach Hause gehen oder welchen anderen Bildschirm es angeboten wird. Ich werde diese beiden kopieren, um C-Kontrolle zu kontrollieren. Wir hier, genau hier. Ich werde in Zahlungen schreiben und auf diesem werde ich einfach Kreditkarte schreiben, und ich werde es unten verschieben, also wird es in derselben Zeile sein, und es wird 40 Pixel und unten sein. Also 1234 und in der richtigen Zeile werden wir schreiben. Füge es hinzu. Also kontrolliere D dran. Und weil unsere Kreditkarte einfach unter diese direkt hier gehen würde, wenn sie auf Bearbeiten klicken, haben sie die Möglichkeit, in der Kreditkarte zu ändern und einige Informationen zu bewegen . Und wenn die Kreditkarte abgelaufen ist, kann sie eine neue hinzufügen. Oder sie können den CBC-Code und so etwas ändern. Das wird also unsere Option sein. Und jetzt werden wir die Kreditkarte direkt unter, dass und PayPal-Option unter Schulden zu entwerfen . Also ist es toll, Rechteck, und es wird 335 Gleiche wie alle anderen sein, aber mit 1 80 und wir werden die Farbe in etwas dunklere Farbe ändern, verwenden Ecke, Radius oder fünf. Gleiche, wie wir es für alle anderen getan haben. Lassen Sie uns in Schleppschicht Special springen und ich werde diesen Wagen BG wie So Rauch Leap so nennen und ich werde es bewegen. Sagen wir, 20 Pixel nach unten. Also 12 und wir werden dies auswählen, um C Control Film zu steuern und ihn direkt hier zu platzieren, springen zurück und verwenden weiß, weil alle von unserem Text wird weiß in Sicht sein. Also werde ich es so positionieren, und es ist gut, wir werden einspringen ihr Visa-Logo-Steuerelement auswählen. Siehst du, springe rechts hinein und trage die Kontrolle V auf dem Wagenspringen. Und vielleicht können wir es so lassen, wie es ist. Also verschieben Sie 12 nach unten, eins nach rechts, und was wir tun wollen, ist, einige davon neu zu positionieren. Also für diesen hier werden wir ein paar Sterne benutzen. Also, was das tun wird, ist eine Simulation zu erstellen, dass es Zahlen hinter diesen Sternen gibt . Das Gleiche, wie Sie auf allen anderen Karten tun, wenn Sie Sachen online kaufen. Also werde ich vier Karten für Sterne erstellen und dann einfach den Raum drücken, zum Beispiel vier Mal. Also 1234 vielleicht fünf. Und dann kann ich die Auswahl direkt hier machen. Kontrolle. Siehe rechts Arrow Control V Control V. Und schließlich für diesen letzten. Nehmen wir zum Beispiel 1234 Sagen wir es. Dies wird die Nummer aus unserem Warenkorb simulieren. Weiter oben Control D duplizieren Sie den gleichen Text von Klick und geben Sie den Namen des Karteninhabers ein, und stellen Sie uns einfach vor, der Name ist John Dope. Nehmen wir an, es ist wirklich einfach und einfach zu merken. Wir werden all diese auswählen und ihnen eine Zeile nach links machen und noch einmal. Also Schicht 12 und mach dir keine Sorgen um die Positionen. Vielleicht können wir ihn jetzt ändern. Also 10 Pixel und 20 Pixel von unten, so wollen. Und Sie könnten das zum Beispiel hier positionieren , damit Sie sehen können, dass hier etwas in der Mitte sein wird. Sie können genau sein, wenn Sie wollen, aber lassen Sie uns nicht mit Details besessen. Also selektiert, um D zu kontrollieren, und ich werde sie hier platzieren. So wird dies in Verfallsdatum zu schreiben. Amble Odette. Wir werden in Date schreiben. Also sagen wir, zweite Monate frei, 2025. Sagen wir, so etwas macht ihn Abstand, macht schöne und klare 20 Pixel von rechts und das war's. Wir haben unsere Visa-Kreditkarte erstellt. Wenn du willst. Natürlich können Sie die Farbe von dieser Karte ändern. Sie können einen Schlagschatten hinzufügen, um es ein bisschen ansprechender zu machen. Aber für diese Phase aus unserem Prozess, lassen Sie es einfach, wie es wirklich glücklich ist, wie sich das herausstellte, und jetzt lassen Sie uns schnell organisieren einige dieser Details, so dass diese gehen direkt unter dem Namen so genannte Holden Name würde bis Ablaufdatum gehen wie so, Card BG und Control G. Dies wird sein oder Kreditkarte wie Also als nächstes, wir müssen das gleiche schaffen, aber für die Menschen. Also lassen Sie uns diese beiden steuern tief und genau hier positioniert. So 1 bis 20 Pixel steuern de auf den Karten dupliziert. Stellen Sie sicher, dass Sie 20 Pixel haben. Genau das Gleiche hier. Wir benötigen kein Ablaufdatum, da PayPal es nicht hat. Also werden wir diese beiden löschen. Und statt das Visum aufgetreten ist, werden wir es durch das People-Logo ersetzen. So befindet sich das Papierlogo genau hier. Ausgewähltes Steuerelement Sehen Sie? Springen Sie hier. Klicken Sie, wenn das Visum Control V löschen und stellen Sie sicher, dass Sie es an genau der gleichen Stelle positionieren , wie Sie es mit dem Visum-Logo getan haben. Also verschieben Sie nach rechts 22 die unteren 20 und das war's. Grundsätzlich haben Sie Ihre Arbeit fertig gestellt. Sehen Sie, lassen Sie uns schnell die Farbe ändern, um sie ein wenig zu unterscheiden. Und lasst uns das vielleicht für die Leute ein Logo benutzen, und ich mag, wie das aussieht, also werden wir hier im päpstlichen Schreiben schreiben. So wie so. Und als nächstes werden wir diese Tastensteuerung C-Steuerung duplizieren. Wir hier und tippen. Machen Sie eine Zahlung. Also werden wir das hier einlassen, eine Zahlung leisten, und das ist es im Grunde. Wir haben unseren Bildschirm erstellt. Lassen Sie uns einfach schnell einige dieser Ebenen bewegen. Also den Status ausleihen. Geh an die Spitze. Wir haben einen Rückpfeil. Gleich unten. Wir haben Zahlungen. Hier ist es. Wir haben Kreditkarte und bearbeiten, die direkt unter Zahlungsaufzeichnung oben gehen wird, so hier, Cracker. Und dann haben wir diesen Text, der in Menschen wie so und an ihm schreiben sollte. Gleich unten haben wir PayPal und schließlich haben wir den Button. Im nächsten Video werden wir entwerfen, speichern, Ort, Bildschirm, Bildschirm, wo wir gehen, um eine Karte und einige grundlegende Funktionen unten. Also sehe ich dich dort 16. Wireframes erstellen: Jetzt lassen Sie uns schnell voran gehen und beenden Sie diesen Drahtrahmen Prozess mit Filialen und dann endlich ein Menü. Beginnen wir also mit Ladenstandorten. Also das Gleiche, tolle Kopieranleitungen. Und vielleicht können Sie diese beiden Rechtsklick-Hilfslinien und basierte Hilfslinien auswählen. Ich könnte das am Anfang tun, aber manchmal weiß man nie, ob man etwas ändern will. Ich könnte das am Anfang tun, So ist es wirklich einfacher, eins nach dem anderen zu gehen. Und dann nicht, um Zeit zu verlieren und zurückkommen und einige Änderungen vornehmen zu müssen, die Sie überhaupt nicht wollten . Also fangen wir an, welche unsere Kleidung so von hier ausgewählt hat. Kontrolle. Siehst du, springt gleich hier. Control V. Als nächstes haben wir das Suchsymbol, das wir kontrollieren müssen. Sehen Sie? Springen Sie gleich hier. Kontrolle V. Und ich werde es hier an diesem Rand positionieren. Stellen Sie sicher, dass seine Position so ist, wie es sollte. Und was wir brauchen, sind einige grundlegende Texte oder verwenden Sie diesen. Kontrollieren Sie C-Kontrolle V und stellen Sie sicher, dass es in der Mitte von diesen so ist und stellen Sie sicher, dass alle von ihnen unsere Position, wie sie sollten. Stellen Sie also sicher, dass Sie 20 Pixel unten sind, genauso wie wir. Und stellen Sie sicher, dass dies 20 Stück auf der rechten Seite von den Symbolen aus shit 12 und tippen Sie in Ladenplätze oder sogar ihre Suchorte, was viel mehr Sinn hat wie diese. Und schließlich, was wir brauchen, ist eine Zeile unten, so dass Sie eine Linie Verwendung in vitalen erstellen können. Aber ich mag es, es mit Formebenen zu erstellen, die mich immer zurückbringen können. Und ich kann sie jederzeit anpassen und später ändern, wenn ich will. Sie können diese auswählen oder Sie können einfach hier klicken. Mal sehen. Und vielleicht für die Höhe, die wir annehmen können, eins zu sein. Und wie Sie sehen können, haben wir uns eine Linie so ausgerichtet sie an der Unterseite dieser Symbole verschieben 12 Stellen Sie sicher , dass Sie den gleichen Abstand wie zuvor haben, und wir haben damit fertig, also können wir vielleicht etwas Ordnung erstellen. So Linie bewegen Sie es den ganzen Weg nach unten. Also haben wir, so, geschlossen diese Suche und Gruppe alle von ihnen zusammen, und vielleicht können wir in der Search Bar Realty schreiben, nur so dass wir ein bisschen mehr organisierten Bildschirm als nächstes haben können , können wir die unteren Teil des Bildschirms. Also lassen Sie uns ein Rechteck wie so wählen, verwenden Sie fünf wie, so entfernte Grenze und verwenden Sie singular wie wir für alle diese anderen. Als nächstes möchten wir einen Text auswählen, damit Sie diesen in diesem Steuerelement auswählen können. C kontrollieren wir und stellen Sie sicher, dass Sie sie hier drinnen platzieren, so lokal weinte hier und tippen. Zum Beispiel, Bell Great Shop. Das wird eine Straße sein, also nennen wir es so. Natürlich können Sie in jeder Straße schreiben jede Stadt, die Sie wollen, aber Not, weil es in Belgrad, Control de und schließlich genau hier auf den gleichen Abstand haben, doppelt schnell eingeben. Weitere Details steuern ein und Treffer zugrunde, weil dies ein einfacher Link sein wird. Es könnte eine Pop-up-Nachricht sein, wörtliche Pop-up von unten oder von oben. Es spielt wirklich keine Rolle oder so. Er kann es auf den ganz anderen Bildschirm bringen. Es liegt wirklich an Ihnen und Ihrem Kunden, sich zu entscheiden. Aber in mehr Details, Menschen können über vier Zahlen über die E-Mail-Adresse über bestimmte Website über Dinge wie diese lernen , so dass sie direkt von hier aus zugreifen können. Als Nächstes brauchen wir ein Symbol für die Navigation, denn wenn sie hier einen Standort finden, wird es hier auftauchen und sie sehen, wie genau hier gesättigt wird. Und es wird sie zur bevorzugten Anwendung, der Verwendung, bringen. So Google Maps, Wege, Apple Maps und so weiter. Also lassen Sie uns schnell dieses Symbol wählen. Es ist dieses eine Steuerelement Siehe Sprung hier, Kontrolle V Und was Sie wollen, ist einen einfachen Kreis zu erstellen. Vielleicht können wir also eins erschaffen. Zum Beispiel, 50 mal 50. Wie Sichel das aussieht. Also 50 von 50. Entfernen Sie den Rahmen. Stellen Sie sicher, dass es weiß ist. Springen Sie in die Ebenen. Panel springt genau hier. DoubleClick geben Sie in Kreisen ein. Und wir wollen diese beiden Positionierungen so wählen. Und was wir wollen, ist, dies in der Mitte so zu positionieren und vielleicht 40 Pixel bewegt. Also 1234 Und vielleicht können wir diese etwas besser bestellen. Wählen Sie den Hintergrund, wählen Sie die Gruppe positioniert ihn in der Mitte. Vielleicht können Sie diesen Text nennen. Lassen Sie uns auf jeden Fall Kriterien. Ich wurde so repariert, und das wird eine Karte sein, BG. Gleiche wie bei allen anderen. Und vielleicht können wir sie alle so gruppieren, stellen Sie sicher, dass Sie die hier bewegen, kontrollieren Sie G. und Sie können sogar die verkauften Richtungen wie diese Gruppe gruppieren, alle von ihnen. Also steuern G. Dies wird unser Warenkorb sein, und Sie können es nach unten bewegen und vielleicht verwenden 1234 Pixel oder 20 Pixel. Lassen Sie uns einfach schnell überprüfen, was wir bei den anderen gemacht haben. Also auf diesem 11234 Also sind es 40 Pixel und wir haben es richtig gemacht. Wie Sie sehen können, ist es in der Mitte. Es sieht genau so aus wie alle anderen, und was wir endlich brauchen, ist einige Richtungen zu schaffen. Jetzt können Sie es hier tun, oder Sie können ein wenig später warten, wenn Sie Ihr fertiges Design haben. Aber lassen Sie es uns trotzdem tun. Also werde ich dieses Standortsymbol auswählen, springen Sie in unsere Kartensteuerung v fügen Sie es einfach Position. Es ist irgendwo hier, Nehmen wir an, dann verwenden Sie einen mentalen Klick direkt darunter. Also, so wie das. Vielleicht so, möchten Sie einige Straßeninformationen wie so verwenden, damit wir einen Teil wie diesen erstellen können, und was wir brauchen, ist ein Kreis, und wir können einige dieser Kreise verwenden, die wir bereits erstellt haben. Also für Farben, selektive Farbe und Verfärbung Kontrolle, sehen Sie Konjunktur direkt hier in diesem Bildschirm Control V, um es einzufügen. Du kannst es so platzieren, und das wird dein endgültiges Ziel sein. Also mit dieser Farbe und Ausfüllen mit dieser Farbe so und das wird Ihr endgültiges Ziel sein . Nun, was ist großartig an diesem pat in Adobe X'd hauptsächlich doppelklicken Sie darauf und Sie können die Punkte bewegen , die Sie erhalten. Halten Sie die Verschiebung. Wenn Sie einen geraden Punkt gerade so machenwollen, möchte ich es vielleicht so positionieren und vielleicht sogar so, und was ist gut,ist, dass wir es dann bewegen können, sobald wir unsere Karte einschließen wollen, möchte ich es vielleicht so positionieren und vielleicht sogar so, und was ist gut, , nur so dass wir es zu einem Etwas realistischer. Wenn Sie nicht mögen, wie das aussieht, können Sie auf ein Haustier klicken und Sie können um gehalten erstellen, die, wenn wir vergrößern, können Sie sehen, es sieht viel besser aus als ohne herum gehalten, weil es einfach geht machen es wie wenn Sie aber Gap verwenden. Es wird eine einfache Errichtung sein, wirklich, wirklich, wie diese runde Kappe aussieht. Und weil alle unsere Symbole diese abgerundeten Kanten haben, können Sie sie viel besser platzieren und positionieren als mit dem Flaschenverschluss, wie sie es nennen. Also, das ist es im Grunde für den Ladenstandort. Und lasst uns schnell und endlich einfach einen Menübildschirm machen. Also, was wir brauchen, ist dieses enge Symbol Kopieren Sie es, in die genau gleiche Position gestapelt. Wir brauchen auch ein Logo, also wählen wir es von hier aus. Springen Sie rein, schleppen Sie unsere Bildschirmsteuerung V. Stellen Sie sicher, dass es in der Mitte ist und was wir brauchen, ist ein Hintergrund. Also werden wir ein schönes großes Rechteck um unseren gesamten Bildschirm erstellen, die Grenze entfernt. Nennen Sie es BG Move. Es ist den ganzen Weg unten. Mehr all dieses Zeug so länger bewegt Mamula und warum wir diese und Hintergrund erstellt haben, ist weil wir diesen Bildschirm als Overlay erstellen wollen. Wenn Sie also einen Hintergrund erstellen, können Sie alle Arten von verschiedenen Animationen verwenden. Zum Beispiel können Sie die verschiedenen gehorchen Stadt verwenden. So zum Beispiel Ihre Zahlungsstadt reduzieren, können Sie zum Beispiel Ihre Zahlungsstadt reduzieren,wenn Sie möchten, und dann diesen gesamten Bildschirm über die anderen Bildschirme überlagern. Nun, endlich, was wir brauchen, ist eine Menge Text, also wählen Sie diesen. Patrol C Kontrolle V. Stellen Sie sicher, dass es von der Mitte ist und stellen Sie sicher, dass es in der Mitte ist. Stellen Sie sicher, dass es zum Beispiel so geht, 1234 Das Gleiche, wie wir es mit allen anderen gemacht haben. So heißt es dieses 1. 1-Profil und Sie können drücken, eingeben und dann ein paar Zeilen nach unten gehen. Aber ich mag es, meinen Text getrennt zu halten, weil er mir wirklich viel mehr Flexibilität gibt, damit du ihn unten verschieben kannst, wie so 1234 Und vielleicht können wir diesen meine Befehle so nennen. Steuerung D Dann verschieben Sie diese unten. Ich weiß nicht, warum er das immer macht, aber wie Sie sehen können, wählt es immer wieder alle anderen aus. Aber im Fall, wählen Sie einfach die oben will oder 1234 und dann positionieren Sie es knapp unter diesem. Ich weiß wirklich nicht, was es tut, aber vielleicht, weil ich Schicht halte? Ich weiß es nicht. Das hat es vorher nicht getan. Also meine Zahlungen, es wird in diesem sein. Und schließlich, weil wir noch zwei brauchen, können wir diese beiden kopieren. Also meine Befehle und meine Zahlungen, lasst uns diese beiden runterziehen. Und wie Sie sehen können, macht es dies auch dann, wenn Sie nur zwei oder drei verschiedene Ebenen auswählen. Aber vielleicht können wir es so machen. Also bewegen Sie es einfach nur eine Berührung. Wählen Sie diese beiden so alle Schichten und zog sie wie so 1234 Dies wird Einstellungen wie diese sein . Und schließlich haben wir uns ausgeloggt und da geht's. Wir haben unseren Bildschirm beendet. Stellen Sie sicher, dass sie alle in der gleichen Reihenfolge sind. Und wenn Sie nicht mögen, wie das aussieht, können Sie diesen Text nach unten positionieren. Also lassen Sie mich schnell alle von ihnen so auswählen. Kontrolle G. Und was ich tun möchte, ist ein einfaches Rechteck von unten vom X bis zum oberen Rand unseres Logos zu erstellen . Also, wie diese beiden, und dann einfach hier getroffen. Es geht auf die Zehe. Richten Sie es in der Mitte von diesem Raum aus, weil das Rechteck füllt den Raum schließlich delis, Rechteck und dann einige davon nach unten bewegen. Also genau hier in der Gruppe und los geht's. Wir haben unseren Menübildschirm erstellt, der im Entwurfsprozess übermäßig weit ging. Wir starten das Prototyping unserer Bildschirme neu und das war's. Wir haben unsere Drahtrahmen eine letzte Sache fertig und wirklich wichtig. Wenn Sie es nicht im Auto Safe haben, stellen Sie sicher, dass Sie die Strg-Taste oder Befehl s drücken und es wird Ihr Projekt speichern. Sie werden also keine Details verlieren, wenn Sie ein bisschen später darauf zurückkommen. Aber Adobe ist diese wirklich schlau und es macht Auto sicher. Wenn Sie es also nicht aktiviert haben, stellen Sie sicher, dass Sie es in den Einstellungen finden oder wenn Sie es nicht wollen und Sie mich mögen, speichern Sie gerne Ihre eigene Arbeit von Zeit zu Zeit, also drücken Sie einfach Kontrolle oder Befehl s, und es wird speichern Sie es an der gewünschten Stelle. Das war's also für den weißen Rahmen von diesem Kurs. Als Nächstes im nächsten Abschnitt werden wir mit dem Design beginnen. Ich werde Ihnen zeigen, wie die Struktur aus den Bildern in Ihrem Rennpferdchen-Ordner eingerichtet ist und wie Sie diese Bilder verwenden können, um Ah, High Fidelity-Design zu erstellen , das Sie Ihrem Kunden präsentieren werden, damit ich Sie in der nächsten Teil des Kurses . 17. Bildstruktur: in diesem Teil des Kurses beginnen wir mit der Arbeit an unserem Design, aber bevor wir es tun, möchte ich nur schnell durch die Bilder, die Ihnen zur Verfügung stehen, und wie sie strukturiert sind. Wenn Sie also hineingehen, ist Ihre Ressource voller und innen aus Ihrem Bilderordner, werden diese Bilder direkt hier in verschiedene Bildschirme gehen. So, zum Beispiel, das ist unser Ladenstandort-Bildschirm. Dies ist für unseren Home-Bildschirm. Diese drei sind für unsere Raumkombination Bilder, und dies ist für die Startseite Bildschirm oben Bild, und Sie werden in den nächsten Jahren zu sehen, sobald wir beginnen, diese Bilder und machen einige Änderungen und auch Sie haben diese drei -Ordner. Alle diese Ordner enthalten also verschiedene Bilder mit Ausnahme des Hauptstuhls und sie R P und G. Also, wenn ich ins Sofa gehe, haben alle diese Bilder die Hintergründe entfernt. Also sind sie PNG in, genau wie Sie hier sehen, was bedeutet, dass sie keinen Hintergrund haben, und es bedeutet auch, dass Sie sie in verschiedenen Hintergründen einfügen und sie oben überlagern können , was ich bin gehen, um Ihnen in den nächsten Videos ST Ng für diese Lampen und für diesen Hauptstuhl zu zeigen. Dies ist unser Hauptheld Bild für die ausgewählten Elemente Bildschirm, und es ist ein PNG ohne Hintergrund, während diese beiden Hintergründe haben, weil sie nur erklärende Bilder sind, die unter dieses Hauptbild gehen. Das ist also im Grunde die Bildstruktur. Es ist sehr einfach, wirklich einfach. Und im nächsten Video werden wir mit dem Home-Bildschirm beginnen, und ich werde Ihnen zeigen, wie Sie einige dieser Bilder einschließen können, also werde ich es sehen. 18. Design erstellen: Lassen Sie uns nun anfangen, unsere Bildschirme zu entwerfen und einige Bilder und verschiedene Effekte einzufügen . Also, bevor wir etwas tun, was ich gerne tun, ist einfach alle diese Ports duplizieren und Drag & Drop sie unter diesem Drahtrahmen, unserem Port-Abschnitt. Sie dazu einfach alle aus, WählenSie dazu einfach alle aus, drücken Sie die Steuerung oder den Befehl D, um sie zu duplizieren. Dann klicken Sie einfach auf einen von ihnen und richten Sie sie unten aus. Und was ich auch gerne für die Kunden mache, weil Sie wissen, was es ist. Grundsätzlich mache ich auch gerne eine Textauswahl so schnell, irgendwo hier herum, irgendwo hier herum, indem ich Drahtrahmen oder Drahtrahmen eintippe, was auch immer Sie wollen, mache es etwas Schönes und Großes. So, zum Beispiel, 100 und vielleicht sogar Bart und das vielleicht 200. Das ist gut. Und positionieren Sie es einfach in der Mitte von diesen Bildschirmen. Also ungefähr hier, vielleicht, ja, und du kannst es auch so vor allem 400 machen. Lass es uns so behalten, und du könntest Kontrolle D treffen und es 400 von hier aus machen. Also, so, so, und dann einfach bewegen Sie diese Bildschirme und nach unten und bewegen Sie sie. Machen Sie sie 400 davon, ich denke, hier ist eine gute Kontrolle. Null, um in Position zu rasten. Schnell langweilig hier. Tippen Design und das war's. Nun müssen wir einige Änderungen vornehmen, bevor wir Bilder einschließen, und ich möchte einige dieser Abschnitte einige Schlagschatten hinzufügen, und ich möchte auch eine neue Farbe einschließen, weil ich mit dem Kunden gesprochen habe und sie sagen, dass wir Splash off Farbe für diese Tasten, weil sie irgendwie seltsam aussehen. Die Farbe, die sie gewählt haben, lässt mich diese Unterseite schnell auswählen. Die Farbe, die sie gewählt haben, ist F C sieben ein 00 Pressezentrum, und wie Sie sehen können, ist es eine Art orange Farbe, was bedeutet, dass es Fuß geht. Heben Sie sich von diesen Farben und gehen Sie einfach auswählen und klicken Sie hier rechts, Toe hinzugefügt toe unsere Farben. Sie können steuern, um über Ihr Projekt zu sagen, weil wir bereits einige große Änderungen daran vorgenommen haben, und jetzt werden wir gehen und wählen Sie diese Schaltflächen. Klicken Sie einfach auf Ihre Farbe Zehe, wenden Sie diese neue Farbe auf Ihre Tasten, und was wir auch tun wollen, ist ein paar Schlagschatten, also möchte ich direkt hier zu diesem 1. 1 gehen und lassen Sie mich zurück zu meinem Ebenen-Panel springen. Also weiß ich, welches ich ausgewählt habe? Was ich tun möchte, ist Schatten Klicken Sie hier, fünf für die X-Achse, fliegen Sie für die Y-Achse und 10 40 b Zugang für ein Zentrum. Und was ich tun möchte, ist auf den Schatten zu klicken, klicken Sie hier auf die Farbauswahl, aber gehen Sie zu Ihrem Asset-Panel, so dass Sie Ihre Farbe besser auswählen können. Klicken Sie also auf den Farbwähler und klicken Sie auf diese Farbe. Es ist also 717171 und klicken Sie hier und geben Sie 25 percenter ein, denn das wird die Deckkraft von diesem Schatten jetzt auf 25% senken. Was Sie tun können, ist Rechtsklick kopieren, und Sie können Steuerbefehl tun. Klicken Sie hier, um diese direkt auszuwählen, da sie sich innerhalb des Ordners befindet. Wie Sie hier sehen können, klicken Sie mit der rechten Maustaste auf basierte Eltern Control. Klicken Sie auf diese einen Rechtsklick basierte Darstellung, und das wird sie alle gleich aussehen. Jetzt tun Sie das gleiche für die falsche Kombination, so gehen Sie einfach voran und wählen Sie alle von ihnen basierend Aussehen und schließlich das gleiche für das Video auf diesem Bildschirm basierte Eltern tun . Jetzt gehen Sie vor und schließen Sie alle diese Ordner, und ich mache das alles gerne vorher. Ich füge Bilder ein, denn wenn Sie Bilder in diese Platzhalter einfügen, behandelt Adobe SD sie als ein einzelnes Objekt. Sie können dieses Bild also nicht entfernen, wenn Sie nicht von diesem Platzhalter gelöscht oder ein paar Mal drücken und tun . Also werde ich reinspringen und es tun. Gleiche für diese. So einfach steuern oder befehligen. Klicken Sie und dann drücken Sie einfach Rechtsklick und fügen Sie Aussehen Oregon Dough Control oder Befehl Ault und wir. Aber auf diese Weise finde ich es einfacher. Was ich auch tun möchte, ist den gleichen Schatten auf die Schaltflächen anzuwenden, aber wir werden gehen und das Aussehen auf diese Objekte einfügen, weil es viel einfacher ist es für sie zu tun, weil sie alle die gleiche Farbe haben. Und wenn Sie Verschwinden einfügen, wird die Farbe aus diesen Schaltflächen in graue Farbe, und das wollen wir nicht. Wir wollen auch die gleichen Schatten für diese einschließen, aber lassen Sie uns schnell mit diesem so einfügen Aussehen beenden. Jetzt können wir es für die Karten tun, also einfach drücken. Zehe die Karte BG getroffen Schatten springen zurück in ihr Asset-Panel. Also traf 55 und 10. Springt in den Schatten. Klicken Sie hier. Wählen Sie diese 71 Farbe alle über Ihre grundlegenden 25% und tun Sie das gleiche für diese letzte. Vergewissern Sie sich, dass Sie auf der Karte sind, BG. Und wenn Sie es sind, springen Sie zurück in das Assets-Panel. Wählen Sie den Schatten aus. Also noch einmal, 55 10 klicken Sie auf den Schatten. Klicken Sie auf die Farbauswahl von hier ausgewählt 25% Prozent er Und jetzt, was für uns übrig ist, genau den gleichen Schatten, aber für diese Schaltflächen auszuwählen. Also werde ich diese 1. 1 in einem Schatten auswählen. So 55 10 Klicken Sie hier. Klicken Sie hier. Stellen Sie sicher, dass Sie auf dieser Farbe sind. 7171 Stellen Sie sicher, dass 25%. Und jetzt, was du tun kannst, ist richtig. Klicken Sie auf Kopieren, und gehen Sie dann zu allen Schaltflächen und drücken Sie die basierte Darstellung. , sich keine Sorgen darüber,dass alle Ordner geschlossen werden, weil wir jetzt gehen und Bilder in unseren Home-Bildschirm aufnehmen , aber bevor wir es tun, muss ich noch eine Änderung vornehmen, damit Sie hier klicken können, sagen, klicken Sie auf den Namen vom Flughafen und löschen Sie einfach diese Erweiterungen, weil ich wirklich nicht mag, wie es aussieht. Es sieht ziemlich chaotisch aus, aber gehen Sie einfach voran und Sie können das auch schnell drinnen und genau hier machen. Sie können beispielsweise Design eingeben , wenn Sie möchten. Aber ich fand, dass es auf diese Weise viel einfacher ist, denn wenn Sie diese Datei an Ihren Entwickler senden, was Sie am Ende des Projekts tun müssen, werden sie in der Lage sein zu verstehen, ob es sich einen Drahtrahmen oder ein Design handelt, weil Nummer eins es Bilder hat. Es hat einige Schatten, die wir bereits hinzugefügt haben. Es hat einige Änderungen darauf angewendet und ebenso hat es das Design Schreiben knapp oben. Wenn ich also etwas verkleinere, kannst du hier sehen, damit sie sagen können, ob es sich um ein Design oder einen Drahtrahmen handelt. Nun, da wir diese Änderungen vorgenommen haben, können Sie die Kontrolle treffen, um dieses Projekt zu sagen. Lassen Sie uns nun voran gehen und fügen Bilder für den Startbildschirm, so dass ich ein bisschen näher zoomen. Halten Sie die Kontrolle. Klicken Sie in dieses Heldenbild. Sie können diesen Ordner schließen, weil er geöffnet ist und ich hineinspringen kann. Unser Bild ist Ordner und ich werde den Story Stuhl Drag & Drop finden und Sie führen einen Klick und vergrößern dieses Bild wie so, und Sie können den Stuhl so positionieren, klicken Sie irgendwo draußen und um es ein bisschen ansprechender das Auge. Drücken Sie einfach hier und wählen Sie aus Ihrem Asset-Panel die weiße Farbe für diesen unteren Text, denn das wird es ein bisschen mehr aufstehen. Eine weitere Sache, die ich tun möchte, ist wählen Sie den Start-Paginierungskreis und entfernen Sie die Feldfarbe enthalten den Rahmen und für die Rahmenfarbe Einfach wählen Sie weiß, weil das macht es ein bisschen mehr von diesen Elementen im Inneren abheben. Als nächstes müssen wir den beliebtesten Abschnitt erstellen und mit Bildern gefüllt. Also, was ich gerne tun, ist doppelklicken Sie auf diesen Namen und tippen Sie in Milano für diesen. Ich tippe im Allgemeinen und schließlich für die strenge, aber ich muss es hier bewegen. Also lassen Sie mich alles bewegen. Wählen Sie also Bild drei aus und verschieben Sie es. Alles klar in Palermo. Jetzt dafür. Der Preis wird in 96 sein für Gattungen wird 96 sein. Und für die Milano wird jetzt 98 sein. Lassen Sie uns die Farben für alle ändern. Springen Sie in ihren Hintern Panel Klicken Sie hier. Wählen Sie also den Preis aus. Klicken Sie hier. Wählen Sie den Preis für den Zug einen Klick rechts hier und jetzt lassen Sie uns Bilder. So wählen Sie diese 1. 1 Sprung in Ebenen Panel jetzt springen zu Bildern und was Sie diese Lampen zu lokalisieren wollen Also müssen wir diese Lampe ein Drag & Drop wählen, aber nicht hier, weil es diesen gesamten Abschnitt zu füllen und ersetzen Sie es und maskieren mit Beschädigungen. Aber irgendwo draußen, wie hier. Halten Sie nun Shift alt und links Klicken, denn das geht, um Geschick, Ihr Bild gleichmäßig und Sie können verkleinern und einfach als Shift und Linksklick. Wenn es für Sie ist, ziehen Sie es einfach in Position. Stellen Sie sicher, dass es in der Mitte ist und jetzt können Sie es ausräumen. So, zum Beispiel, aus dem Text von der Oberseite des Textes, den Sie, Oberst verschieben Pfeil zweimal nach oben, um in 20 Pixel nach oben zu positionieren und dann einfach die Größe zu reduzieren, bis es so trifft. Vielleicht können Sie es sogar 10 platzieren, wenn Sie denken, es ist zu viel so, weil wir wollen, so machen Bild ein bisschen größer und Sie können es so halten und in der Mitte drücken, weil das wird es in der Mitte von diesem Platzhalter zu positionieren. Nun, da die 1. 1 fertig ist, lassen Sie uns schnell voran gehen und wählen Sie die 2. 1 So springen Insider Bilder Ordner, Wählen Sie Lampe zu ziehen und legen Sie es hier und dann gleich wie wir mit der 1. 1 halten Verschiebung und reduzierte seine Größe Einfach ziehen und legen Sie es innerhalb dieses Ordners ab. Das Gleiche wie wir es mit dem 1. 1 Also positionieren Sie es so 10 Pixel nach oben und reduzieren Sie dann einfach seine Größe von oben so. Stellen Sie sicher, dass es in der Mitte ist, und Sie können dies auch tun oder wählen Sie Stück, um sicherzustellen, dass es in der Mitte ist, und Sie können diesen Halter schließen und dann können Sie den gerührten Ordner ein wenig mehr verschieben und vielleicht den zweiten Ordner ausblenden, so dass Sie Lage Zeh. Fügen Sie das dritte Bild hier ein. Springen Sie in Ihren Ordner, ziehen Sie es hier und dann reduzieren Sie einfach seine Größe wie so, bewegen Sie sich ein wenig nach unten, zoomen Sie etwas näher, so positionieren Sie es so, bis es an der oberen Schicht und 10 Pixel trifft. Halten Sie die Verschiebung. Stellen Sie sicher, dass es so ist, und positionieren Sie beide in der Mitte. So wie so. Jetzt gehe ich auf die Zehe. Fügen Sie das Bild Nummer zwei ein. Halten Sie Shift und positionieren Sie es wie. Also, bis die trifft, eine Verschiebung 12, die mit 20 Stück nach rechts bewegen wird. Und wir haben den beliebtesten Abschnitt mit unseren Bildern gefüllt und weil sie PNG sind. Wenn Sie zu irgendeinem Zeitpunkt Ihre Meinung ändern möchten, können Sie die Kontrolle behalten. Klicken Sie in das Bild, und dann können Sie Ihre fehlerhafte Farbe ändern. Also lasst uns voran springen. Sie können sie beispielsweisein eine beliebige dieser Farben ändern beispielsweise . Sie können sehen, wie das aussieht, oder Sie können voran gehen und wählen Sie alle Ihre eigenen Farben, so ist es einfach wie hier aussehen, so dass ich sicher sein kann, welche Farbe es ist. Also ist es e b. Wählen Sie dieses aus und wählen Sie das E B zurück So wie sie gesagt haben, können Sie es in Ihre eigenen Farben ändern. Oder Sie können ein Hintergrundbild direkt hier direkt unter diesem PNG-Bild einfügen. Also, wenn Sie es noch mehr hervorheben wollen, als es jetzt ist, nächstes für die Raumkombinationen das gleiche tun. Klicken Sie also hier. Und wenn ein Sprung außerhalb dieses Ordners, können Sie sehen, wir haben drei gewachsene Kombinationsbilder, so dass Sie darauf klicken können. 1. 1 ist einfach Drag & Drop es innerhalb, weil wir diesen gesamten Abschnitt füllen wollten und Sie können hier doppelklicken, wenn Sie möchten. Und vielleicht kann ich es so bewegen, dass er, äh, einige, bis ich det und was ich hier schreiben will, ist Wohnzimmer. Doppelklicken Sie also auf den Text und geben Sie wenig ein, und weil wir ihn nicht sehen können, können wir ihn vielleicht weiß machen. Also springen Sie gleich hier und Sie können es jetzt ein bisschen besser sehen. Nun, was wir für die 2. 1 brauchen, ist die Raumkombination Nummer, um sie nach innen zu ziehen und abzulegen , so wie sie ist. Doppelklicken Sie hier und geben Sie das Schlafzimmer wie so stellen Sie sicher, dass es weiß ist. Und schließlich, für gestörte, die ausgewählt ist, springen Sie in unsere Ordnerraum-Kombination. Drei. Wählen Sie Drag & Drop in Sicht. Und wie zuvor, müssen Sie es nur ein wenig verschieben, damit Sie in der Lage sind, das Aussehen von diesen Texten zu ändern , und wir werden in der Küche für diesen einen schreiben. Stellen Sie sicher, dass es wieder in seine Position wie so verschieben Sie 1 bis 20 Pixel auf diese Weise, und wenn ein Sprung ein bisschen näher, es hat nicht die Farbe aus dem Text aus irgendeinem Grund geändert. Aber Sie können es so ändern oder wenn es ausgewählt einfach weiß anwenden und dann zurück springen. Und ich möchte in 20 Pixel eine Verschiebung 12 positionieren und diesen Abschnitt geschlossen, weil es abgeschlossen ist . Und schließlich wollen wir unseren Prozess einbeziehen. Also wollen wir ein Hintergrundbild direkt hier einfügen Zehe fungieren als Platzhalter für das Video, und das ist dieses Bild, um es einfach per Drag & Drop in, und Sie können doppelklicken und Shift halten, neu positionieren Ein bisschen besser. Ich werde es irgendwo hier platzieren. Klicken Sie draußen und sie werden in der Lage sein, nach innen zu klicken und zu sehen, dass das ein Video ist. Sie können hier auf die Zehe klicken, das Video im Vollbildmodus abspielen oder mehr lesen klicken, was sie zu über US Page bringen wird, die ihren Prozess in viel mehr Details erklären wird, wenn sie lesen wollen. Also im Grunde, das ist es für den Home-Bildschirm Sie. Also haben wir eine neue Farbe aufgenommen. Wir haben einige verschiedene Schatten einbezogen. Wir haben Bilder aufgenommen, und ich habe Ihnen gezeigt, wie Sie sowohl Jay Pek als auch PNG-Bilder einschließen können, und wir ändern einige Farben aus dem Text herum, und wir machen alles schön und klar, und alles sieht jetzt viel aus Besser. Dann tun Sie es noch, wenn es nur ein Drahtrahmen mit einigen leeren Rechtecken war. Im nächsten Video gehen wir zum Kategoriebildschirm, und ich werde Ihnen zeigen, wie Sie Sofas hier einschließen können, und wir werden die Sofanamen hier oben ändern. Also werde ich dort sehen 19. Design erstellen: Jetzt ist es mehr in der Kategorie Bildschirm. Lassen Sie uns ein wenig näher auf diesem 1. 1 Nennen wir es Lissabon und änderten den Preis 2 auf 4 zu neun, weil es von der teuersten zum billigsten unten gehen wird. Auf dieser 2. 1 nennen wir es Rom, und es wird zwei für 10 sein. Dieser wird Paris sein und auf den Preis wird 13 68 Nächste, wir haben einen Leone also Leone, und für einen Preis wird es 12 19 sein. Als Nächstes gehen wir auf die Zehe. Fügen Sie den Namen aus Moskau und für den Preis, wollen 187 und schließlich, für diese verloren. Lassen Sie uns Prag und Preis wird 1090 Nächste sein, gehen wir voran und fügen Sie unsere Bilder in. So springen Sie zurück zu Ihrem Bilderordner, gehen Sie in Sofas. Also, für eine bisher, Nummer eins, springen Sie hinein und ziehen. Lassen Sie es fallen, wie wir es mit den vorherigen Bildern getan haben. Also, was Sie wollen, ist, es einzuschließen und seine Größe zu reduzieren und Position Nummer eins Drag & Drop es innerhalb dieses Ordners und eine Position es knapp über Bild-Hintergrund, können Sie in ein bisschen näher zoomen. Sie können die Größe auf etwa hier reduzieren. Stellen Sie sicher, dass es sich in der Mitte befindet, und Sie können diese beiden auswählen und sie in der Mitte positionieren, wenn Sie möchten. Aber Sie können es auch nach unten von Ihrem Bild verschieben, Platzhalter wie So drücken Sie 1234 und setzen Sie es 40 Pixel von der unteren Kante, vielleicht sogar 50, weil das sieht viel besser. Als Nächstes werden wir die 2. 1 einschließen, so dass Sie hier klicken können. Gehen Sie in Ihren Ordner springen und basieren in der 2. 1 halten Shift, bis Sie seine Größe produzieren und Sie können dies auch tun. Sie können ein Testbeispiel machen. Und wenn Sie das in vier Geschäften tun, wie ich es getan habe, entfernen Sie diese um außerhalb der Linien und entfernen Sie den Hintergrund von Ihren Bildern, und Sie können dies in vier Geschäften tun, und Sie können sicherstellen, dass sie beide auf der gleichen Größe sind. Wenn Sie also in Adobe XY sind und anfangen, Dinge zu ändern, und Sie diese Bilder in diese Platzhalter einfügen möchten, haben sie bereits genau die gleiche Größe, die sie benötigen, so dass es Ihre Wartezeit reduziert. Und es wird Ihre Geschwindigkeit viel mehr verbessern, so dass Sie viel schneller arbeiten können, wenn Sie genau diese Abmessungen von diesen Sofas in unserem Beispiel haben . Aber ich arbeite gerne so, weil, wie du sehen wirst und du hier sehen kannst, nicht alle genau die gleiche Größe haben. Das ist also ein großer Faktor. Denn wenn sie genau das gleiche Aussehen und Größe waren, So zum Beispiel, alle von ihnen sind so. Dann wird diese Methode viel besser arbeiten, denn wenn sie alle gleich groß sind,können Sie diese Technik anwenden. wenn sie alle gleich groß sind, Aber wenn sie nicht so sind, als wären sie nicht in unserem Fall, dann werden Sie einfach mit bleiben. Einige waren seltsame Ergebnisse, aber wenn sie die gleiche Größe haben, dann sind Sie alle bereit. Und du kannst so arbeiten, wenn du willst. Also, wenn es aus irgendeinem Grund, fügen Sie es, zwei von ihnen und Sie werden diese Fehler in Adobe X'd von Zeit zu Zeit sehen. Aber achten Sie einfach nicht auf sie und stellen Sie sicher, dass Sie wissen, was Sie tun, denn Wenn Sie einen Fehler machen, können Sie es leicht korrigieren, weil Sie wissen, wo Sie diesen Fehler gemacht haben und Sie können jederzeit zurückspringen und einfach korrigieren es. Es springt also und schließt unser Sofa Nummer vier ein. Wie ich bereits erwähnt habe, wie Sie sehen können, haben sie alle unterschiedliche Dimensionen. Alle von ihnen haben unterschiedliche Formen, deshalb arbeite ich gerne auf diese Weise. Es ist offensichtlich viel zeitaufwändiger , wie Sie sehen können. Aber auf diese Weise können Sie sicherstellen, dass alle von ihnen positioniert sind, wo sie sollten und an genau der gleichen Stelle. Und weil einige von ihnen Toller sind, sind einige von ihnen breiter als der Rest von ihnen. Dann, für die Positionierung, stellen Sie einfach sicher, dass Ihr Augapfel es und Sie machen eine grobe Position gemäß den vorherigen, denn für die 1. 1, wenn Sie sich erinnern, legen wir es 50 Pixel von unten. Und weil es etwas schmal war, sind dieses Bild und diese anderen etwas größer, also muss man sie einfach kompensieren und zum Beispiel 12345 machen. Wie Sie sehen können, ist es viel größer als diese und so gut wie diese. Also vielleicht legen Sie es 40 Pixel nach unten, nur so dass Sie sie grob genau so machen können, wie sie von hier nach hier auf allen von ihnen erwähnt werden. Und schließlich, lassen Sie uns das sechste Bild einschließen. Also springen genau hier auf Zoom ein bisschen und schließen Sofa Nummer sechs. Also werde ich es ungefähr hier positionieren und nur sicherstellen, dass Sie seine Größe so reduzieren, wie wir es mit allen anderen gemacht haben. Positionieren Sie es etwa hier herum und reduzieren Sie einfach die Größe noch mehr. Und das ist es, wovon ich gesprochen habe. Wie Sie sehen können, ist dieser viel größer als dieser, aber stellen Sie sicher, dass Sie ihn positionieren oder im ungefähr gleichen Raum wie dieser, und das ist es für diesen Bildschirm. Jetzt lassen Sie uns schnell mehr und tun Suchfilter, weil es nur eine Änderung, die wir machen wollen , weil wir diese Hintergründe Schatten enthalten. Wir wollen das Gleiche für diese Materialien und diese Kreise tun. Also zuerst für die Materialien, lasst uns die Farbe vom Rahmen ändern und diese Farbe einschließen. Nun lassen Sie uns die Feel-Farbe einschließen, um weiß zu sein und schließlich einen Schatten einzuschließen, genauso wie wir es für alle vor ihnen getan haben. Klicken Sie also auf den Schatten, wählen Sie die Farbe aus. Es ist dieses und einfach reduzieren Sie das Tempo City auf 25%. Und jetzt haben wir viel kohärentere Blicke als vorher, und wir haben den gleichen Schatten auf allen von ihnen. Und schließlich können Sie das Gleiche für diese Punkte tun. Also lasst uns in eine Schicht spinale springen. Also für diese Kreise, lasst uns den gleichen Ort machen. Fügen Sie den Schatten ein. Also 55 10. Und wenn Sie denken, dass es ein bisschen weit ist, können Sie es auf, auf und vielleicht fünf reduzieren . Und jetzt ist es viel näher, und es sieht viel schöner aus. Springen Sie in den Schatten und gehen Sie zurück zu Ihrem Asset-Panel, damit Sie die gleiche Farbe wie für den Rest auswählen können . Also, wie diese, stellen Sie sicher, es ist auf 25% und was wir jetzt tun können, ist warten Sie es ausgewählt Rechtsklick Kopie, Wählen Sie diese ein Rechtsklick einfügen Eltern, und das wird sie genau das gleiche wie der Rest aus aussehen. Unser Design ist, Sie können sehen, es sieht viel schöner aus und noch wichtiger, es sieht viel kohärenter aus mit dem Rest von unserem Wunsch. Im nächsten Video werden wir einspringen und einen Raumkombinationsbildschirm entwerfen, also sehen wir uns dort. 20. Design erstellen: Also lassen Sie uns springen und eine Raumkombination entworfen. Aber bevor wir es tun, können wir immer die Kontrolle treffen, um über unser Projekt zu sagen, nur um sicherzustellen, dass wir keine vorherigen Änderungen verpasst haben. Was hier nicht richtig ist, ist das Bild für die falsche Kombination. Also lassen Sie uns die 1. 1 Drag and Drop es innen von diesem Kunstport, und ich werde springen und schließen alle diese und einfach den ganzen Weg nach hinten wie so bewegen und dann seine Größe erhöhen, bis es mit den äußeren Kanten wie folgt trifft. Und Sie können es sogar noch viel mehr erhöhen, so dass Sie das Bild so vergrößern können. Zum Beispiel ist hier etwas gut, und jetzt können die Leute sagen, dass es Theis Room ist. Wenn du das machen willst, ist das in Ordnung. Aber wenn nicht, können Sie die Größe immer auf ungefähr hier reduzieren. Sagen wir, und ich denke, es sieht viel besser so aus. Nun, dieser Text, den ich gefunden habe, ist nicht leicht lesbar, also lasst uns ihn Zehenweiß ändern. Dies kann so sein, wie es ist, und jetzt, weil wir den Bildhintergrund wie hier machen wollen. Lasst uns das ändern. Also lasst uns hier klicken. Wählen Sie aus. Sei jetzt, weil wir den Hintergrund nicht vom Bild unterscheiden können. Lassen Sie uns auf den Hintergrund klicken und wählen Sie Weiß aus. Und jetzt ist es viel besser. Jetzt brauchen wir dieses Sofa, also springen Sie in Sofas. Es ist dieser, also für Nummer drei, springen Sie in einen Ebenenzauber. erneut sicher, dass Sie ein Bild gefunden haben. Drag & Drop Ihr Sofa nach innen. Vielleicht können Sie es hier platzieren, und lassen Sie uns seine Größe reduzieren, bis es genau hier passt. Also lasst uns springen und sicherstellen, dass es in der Mitte ist, so. So können Sie Sofa und Bild auswählen, und Sie können auch so positionieren. Es ist so. Jetzt lassen Sie uns den Namen so Disparitäten Paris finden. Und für den Preis sind es 13 68. Stellen Sie also sicher, dass Sie das ändern, und eine letzte Änderung, die ich vornehmen möchte, ist für die Farbe. Also war ich wie diese erste Farbe. Wählen Sie dies für die Farbe, zum Beispiel, stellen Sie sicher, dass Sie einen Schatten enthalten, also verwenden wir 22 und fünf. Und für den Schatten. Lassen Sie uns noch einmal in ihr Asset-Panel springen. Dieselben Deal. Also wählen Sie diese Farbe und über im Grunde 25%. Nun wird dies zeigen, dass diese Farbe für diese bestimmte Couch ausgewählt wird, aber die Leute dulden, springen hinein und gehen auf die Produktseite und dann mit ihr geige und einige andere Farben in Sicht. Jetzt springen Sie zurück Zeh sind Schichten. Panel schließt all diese Karte eins, und sie hat es getan. Und stellen Sie sicher, dass Sie die zweite Karte hier verschieben können, und jetzt werden wir einige andere Gegenstände im Inneren enthalten . Und für diesen, lasst uns zum Beispiel eine Lampe benutzen , so wie wir es vorher getan haben. Wählen Sie die Karte BG und stellen Sie für die Füllfarbe sicher, dass sie weiß ist und für das Bild, stellen Sie sicher, dass es E. B ist, damit es für alle anderen genau gleich aussieht. Und lassen Sie uns benutzen, ich weiß nicht, dass diese Genua eine Lampe, zum Beispiel. Doppelklicken Sie also auf den Text. Ändern Sie es und der Preis war 96. Wenn sich die Leute also mit ihren Finger nach rechts bewegen, indem sie den Track-Trigger verwenden , den wir in den Prototyping-Modus aufnehmen werden, werden sie in der Lage sein, diese Lampe zu lokalisieren und zu sehen, dass sie in Sicht ist. Springen Sie in Bilder, suchen Sie die Lampe, so dass es diese 2. 1 Drag & Drop ist es genau hier und stellen Sie einfach sicher, seine Größe so zu reduzieren und Sie dulden Augapfel es. Stellen Sie sicher, dass es so in der Mitte ist, und wenn Sie sich bewegen wollen, ist es ein bisschen mehr nach oben. Du kannst es auch tun. Es ist also eine Lampe. Verschieben Sie es außerhalb dieses Ordners. Stellen Sie sicher, dass es sich im Bild-Ordner wie folgt befindet und stellen Sie sicher, dass es oben übereinstimmt. Wenn Sie das abgeschlossen haben, können Sie es auch dort verschieben, wo es wieder eingeschaltet wurde. Die Karte Nummer eins, wählen Sie diese 2. 1 und bewegen Sie sich einfach mit 20 Pixel nach rechts. Gleiche Flüssigkeit es mit allen anderen. Und jetzt ist dieser Wohnzimmer-Bildschirm abgeschlossen, und im nächsten Video, werden wir gehen auf den ausgewählten Artikel und ausgewählten Artikel angepasst, und wir werden die gleichen Änderungen für beide von ihnen, und ich werde zeigt Ihnen, wie Sie einige Schlagschatten einmalig einbinden können, wenn Benutzer diese Elemente auswählen. Also werde ich sagen, da 21. Design erstellen: Lassen Sie uns jetzt ins Innere springen und entwerfen ausgewählte Elemente Bildschirme. Erste Dinge zuerst. Ich werde die Farbe aus diesem Helden Bild Hintergrund jeder sie die Farbe ausgewählt ändern und es ist de vier b c A. Acht Pressezentrum. Es ist leicht bräunliche Farbe. Als nächstes werde ich Zehe tippen auch Haus-Aktie und die die eine Textzeile lassen mich schnell tippen und wählen Sie alles. Springen Sie hier und ändern Sie es Zehe weiß und es sieht gut aus und springen Sie verpackt in unsere Vermögenswerte. Tut mir Leid, Schicht Spinal. Und für den Preis, lassen Sie es 1 24 Aber dafür lassen Sie uns auch diese Farbe verwenden, so dass es die Farbe von unserem Hausstuhl an der Spitze ergänzt . Also doppelklicken Sie hier, Control. Siehst du, ich klicke hier. Kontrolle. Veto mit Sitz in Klicken Sie hier. Kontrolle. Siehe Nein klicken Sie rechts hier. Kontrollieren Sie V und stellen Sie sicher, dass es weiß ist. Und schließlich für diesen hier. Verschieben Sie es in diese Farbe. Warum lassen Sie uns dieses Farb-Steuerelement nicht auswählen? Sehen und springen Sie in Sicht und drücken Sie Kontrolle V und nein, lassen Sie uns weiter und zum Beispiel, vielleicht können wir diese Farben ein wenig später ändern, aber ich möchte diese beiden Bilder einschließen, weil das das ist das einfache Bit. Also suchen wir in unseren Bildermappen den Hauptstuhl. Also haben wir Hauptstuhl Nummer eins, das ist dieses Bild so ausgewählt von hier. Sie können das Ebenenbedienfeld jederzeit überprüfen und sicherstellen, dass Sie sich an der richtigen Position befinden. Ziehen Sie es nach innen und ziehen Sie es ab und fahren Sie fort. Wählen Sie diese 2. 1 Bilder Ordner und ziehen Sie diese in Sicht, und Sie können das gleiche für diese beiden tun, so dass Sie es öffnen können. Wählen Sie den Hauptstuhl Nummer eins aus. Klicken Sie hier und wählen Sie Haupt-Stuhlnummer, um es in Drag & Drop zu ziehen, so dass wir viel mehr kohärente Look haben . Nun, als Nächstes, werden wir unser Hauptbild einschließen. Wählen Sie also einen Held Bild Hintergrund. Sie können die Zonen schließen, und innerhalb desselben Ordners befindet sich das Hauptfreigabbild. Drag & Drop es innerhalb und ST ng. Flüssige es mit allen anderen, einfach ziehen und reduzieren seine Augen sehen Verschiebung. Sie können etwas näher zoomen, und vielleicht können wir die Größe zwei irgendwo hier reduzieren. Wählen Sie diese aus, um sicherzustellen, dass sie sich in der Mitte befinden, und wählen Sie dann Manger Control aus. Klicken Sie hier rechts, steuern Sie V, um es an genau der gleichen Position einzufügen. Und weil wir ihn so entworfen haben, kann man sehen, dass der Stuhl ein wenig von diesem Hintergrund abhebt, was mit Absicht ist, denn so wollen wir die Animation aussehen lassen. Es wird also so aussehen, als hätte es diesen Hintergrund ein wenig nach oben geschoben und den Stuhlzustand an genau der gleichen Stelle. Sie können sogar die Seiten aus dem Stuhl ein wenig reduzieren, wenn Sie wollen, nur um diese Links unterzubringen. Oder Sie können es einfach wie fünf Pixel so etwas nach oben bewegen, so dass diese Länge innen vor diesem Hintergrund ist. Nun, endlich, lasst uns hier klicken und für die ausgewählte Farbe, bewegen sich knapp unter der Hauptfarbe für den Film. Stellen Sie einfach sicher, dass Sie auf Weiß sind und für den Schatten tun Sie für den Schattendasselbe. Flüssige es mit all den anderen. Also 22 und Feuer, weil es kleiner Kreis ist. Stellen Sie sicher, dass Sie das Bedienfeld „Elemente“ ausgewählt Klicken Sie hier, und wählen Sie dann diese Farbe aus. Dasselbe Liquidate, sagten wir den anderen. Sicher, es ist jetzt auf 25 für die ausgewählte Farbe. Ich werde irgendwo nahe Zehe weiß wählen. So etwas wie das. Und stellen Sie sicher, dass Sie die gleiche Farbe für diesen ersten Bildschirm kopieren, denn das ist die Farbe vom Sitz des Stuhls. Und das ist die Farbe, die wir ausgewählt haben. Jetzt. Führen Sie das gleiche für diesen so ausgewählten Rahmen und für den Rahmen aus. Lasst uns Juden diese Farbe und für den Schatten, lasst uns 55 10 Saft, wie wir es für alle anderen getan haben. Klicken Sie hier und stellen Sie sicher, dass Sie diese Farbe auswählen. Stellen Sie sicher, dass Sie den Fehler auf weiß und für den Schatten, stellen Sie sicher, dass Sie auf 25% und das sind die Bildschirme fertig. So werden Sie diese Animation viel detaillierter sehen, wenn wir zum Prototyping Teil von diesem Kurs kommen . Und jetzt gehen wir auf die Details der Bestellung, die unser nächster Bildschirm ist, und wir werden im nächsten Video entwerfen, also sehe ich dich dort 22. Design erstellen: Lassen Sie uns jetzt die Bestelldetails Bildschirm entwerfen. Also ein Zoom in ein bisschen näher jetzt für diese 1. 1 haben es schon aufgeschrieben. Also wollen wir alle langsamen Host-Stuhl so und für den Preis 81 24 Für diese 2. 1 haben wir immer Sofa wie so und für gestörte haben wir Mailand. Ein Lampensofa kostet 24 bis 9 und eine Lampe kostet 98. Als nächstes, um dies zu ändern, dies zu verfärben. Und schließlich sollte dies zu diesem Farbhintergrund weiß sein, dasselbe wie dieses ein und dasselbe wie dieses, um es mit all diesen anderen jetzt viel kohärenter aussehen zu lassen , weil dieser Haupthintergrund weiß ist, vielleicht Das ist keine gute Wahl. Also vielleicht können wir hier eine Hintergrundfarbe oder ein Hintergrundbild oder so etwas einfügen. Vielleicht können wir experimentieren, damit Sie Bestelldetails auswählen und vielleicht auf so etwas klicken können, damit Sie jetzt viel besser sehen können. Vielleicht können wir sogar eine hellere Farbe hinzufügen, wenn Sie wollen, aber ich denke, es sieht vorerst gut aus. Und vielleicht können wir es einfach ein bisschen reduzieren. Also gehen Sie einfach über ein paar Haltestellen, um irgendwo hier herum. Also irgendwo zwischen diesen Farben, um es viel leichter aussehen zu lassen, und ich denke, das sieht gut aus für jetzt. Also jetzt springen wir hinein und schließen unsere Bilder ein. So haben wir auch House Chair, so dass Sie diese Karte auswählen können, um das Bild zu finden, springen in ihre Bilder Ordner Drag & Drop es Website und dasselbe, wie wir mit allen unseren anderen Bildern getan . Reduzieren Sie einfach seine Größe, bis es in Ihr Bild passt, Platzhalter. So wie diese und zoomen Sie ein bisschen mehr. Und du kannst es hier irgendwo so positionieren? Ich denke, es ist gut. Ja, du kannst das schließen, wenn du fertig bist und auf die Karte Nummer zwei gehen. Also, was wir brauchen, sind Sofas und Lisbon Sofa. Ist das 1. 1? Setzen Sie es einfach hier und reduzieren Sie seine Größe. So das Gleiche. Flüssige es für alle unsere anderen Bilder. Jetzt können diese Prozesse ein bisschen sich wiederholend sein, aber wie Sie sehen können, haben Sie genau noch einige Fehler und es wird von Zeit zu Zeit passieren , besonders wenn Sie ein neues Update installieren, so stellen Sie sicher, dass Sie das im Auge behalten, während es kostenlos. Es gibt immer noch einige Box von Zeit zu Zeit, aber Sie können sie immer an ihrer Benutzerstimme melden, weil sie diese Dinge gerne hören. Und sie sind dann in der Lage, alle Fehler im nächsten Update zu zerquetschen. Nicht Milan. Eine Lampe ist diese schlaff hier, ziehen Sie sie in Sicht und reduzieren Sie ihre Größe So passt sie in unseren Platzhalter wie so und dann verschieben Sie sie nur ein bisschen mehr. Es geht um jemanden hier herum. Lassen Sie uns sehen und tun Sie das gleiche dafür, wie wir es mit dem Rest unserer Bilder getan haben. Und das war's. Unser Bildschirm ist fertig. Das einzige, was uns übrig bleibt, ist, die Liebe zu schleppen, die Kosten. Und wenn ich hier reinschreibe, zwei Punkte an den Ort legen oder du kannst es noch besser hier bewegen, dann doppelt schnell. Gehen Sie zum Ende der Eingabe von 2651, da dies die Gesamtkosten ausgeschaltet sind. Alle diese Artikel in den Warenkorb gelegt, und wenn die Leute sie aus dem aktuellen entfernen möchten, können sie nach links streichen, und es wird diesen bestimmten Artikel aus dem Warenkorb entfernen, wenn sie mehr Stücke hinzufügen möchten. Also, zum Beispiel, für Stühle, können sie hier klicken und dann danke. Wählen Sie vier oder die gewünschte Zahl aus. Und es wird die Gesamtkosten erhöhen. Wenn sie es reduzieren und ihre Meinung ändern wollen, zum Beispiel, wollen sie nur einen Stuhl. Sie können den Prozess noch einmal durchführen, und es wird den Gesamtpreis von all ihren Artikeln innerhalb des Einkaufswagens reduzieren. Also im nächsten Video, werden wir in die Zahlung springen. Und weil ich nicht mag, wie die Farben von dieser Karte, äh, diese Wachen aussehen, als würden wir sie ändern und ein paar schönere Farben darin enthalten, also sehe ich dich dort. 23. Design erstellen: lassen Sie uns jetzt Zahlungen grün gestaltet. Aber bevor wir das tun, können Sie auf die Bestelldetails und auf Ihre Feldfarbe klicken. Klicken Sie hier, Kontrolle. Sehen Sie? So können Sie die Hintergrundfarbe von diesem kopieren. Unser Port klicken Sie hier auf das Feld Control V Presenter. Und es wird die gleiche Farbe enthalten, wie es auf diesem war. Unser Hafen jetzt. Genau hier. Was ich brauche, ist die Zahlung. Also werde ich das kopieren. Vollständige Kontrolle. Sehen Sie? Springen Sie nach rechts. Ihre Kontrolle V und basierte es in lokalisiert die Zahlung. Es ist genau hier. Positionieren Sie es jetzt ein bisschen besser, weil bereits erstellt. Und diese Zutaten, ich werde sie kopieren. Lassen Sie mich Ihnen also schnell zeigen, wie es gemacht wird, so können Sie die Karte BG auswählen und die Feldfarbe direkt hier lokalisieren . Aber lassen Sie mich schnell in meine andere Datei springen und ich werde diese Farbe einfach kopieren. Also für das Feld, können Sie eine lineare Zutat wählen und sicherstellen, dass Sie auf der anderen Seite sind. So helle Farbe ist auf der Oberseite. Dunklere Farbe ist unten, weil unser Schatten unten ist. Also für die dunklere Farbe oder was wir wollen, ist diese Farbe verarscht ihn. Und für die hellere Farbe, Was wir wollen, ist lassen Sie mich schnell von hier ausgewählt. Wählen Sie also dieses Steuerelement V basierend in und so sieht es aus. Und Sie können auch das Visum-Look ändern und wählen Sie Weiß. Und das sieht viel schöner aus, als es vorher war. Springen Sie nicht in Ihre Schicht Spinal wieder nach innen, Menschen wählen Auto BG und wählen Sie dann eine lineare Zutat. Jetzt mach das Gleiche. Und weil wir es am 1. 1 gemacht haben, erinnerte es sich. Und jetzt bist du dunkler. Die Farbe ist unten und Ihre hellere Farbe ist oben. Also für diese 2. 1 für die hellere Farbe, werden wir diese Farbe wählen, also einfach basierend auf und für die dunkle Farbe. Wir werden diese Farbe wählen, und ich werde sie einfügen. Es ist also eine schöne blaue Farbe, und es ist eine Reminiszenz von der Personenkarte. Also, wie Sie hier sehen können, haben wir bereits ein schönes Design, das einfach viel besser aussieht als zuvor. Und um es zu beenden, es wurde nur geändert die Menschen Logo Zehe weiß, so dass Sie es auswählen und klicken Sie rechts hier Zehe weiß. Es ist also viel lesbarer als zuvor. Das war's für diesen Bildschirm. Und im nächsten Video werden wir anfangen, Ladenstandorte und vielleicht sogar ein Menü zu entwerfen und dann den Designprozess abzuschließen, also sehen Sie dort. 24. Design erstellen: was jetzt entworfen wurde. Speichern Sie Standorte, Bildschirm und erste Dinge zuerst. Lasst uns ein paar Dinge ändern, also wird das weiß sein. Dieser Kreis wird orange sein. Ich kann nicht innerhalb des Kreises, also wieder ein bisschen näher, so dass ich auswählen kann, wird es auch weiß sein. Und wir gingen, um den Schlagschatten einzubeziehen. So wie lesen Sie es mit all den anderen. 55 10. Und lassen Sie uns einfach diese Farbe auswählen und sicherstellen, dass es auf 25% Rabatt ist, so dass es ein bisschen besser mit allen anderen übereinstimmt. Als nächstes erstellen wir einfach ein Rechteck für die Oberseite. So springen Sie in eine Ebene Zaubertreppen waren Suchleiste, zog sie an der Spitze, und ich werde ein Rechteck direkt darunter erstellen. also Verschieben Sie esalsonach oben und bewegen Sie sich direkt unter die Suchleiste. Also sehe ich, was wir tun. So lassen Sie es weiß sein, entfernen Sie die Grenze, und wir tun das, weil wir die Karte genau hier hinter uns setzen. Und wenn wir die Karte direkt unter diesen Text und das Suchfeld setzen, wird es nicht lesen. Nun, da wir diese Bijie erstellt haben, also schauen Sie nicht genau hier und tippen Sie einfach James sein, die Zehenarbeit macht. Einfach in Ordnung. Klicken Sie hier und suchen Sie dann die Karte. Ziehen Sie es nach innen. Sie können jede Karte verwenden, die Sie wollen. Ich benutze einfach, ähm zufällige Position auf der Karte so. Und Sie können es ein bisschen besser positionieren, wenn Sie wollen, damit Sie es vielleicht irgendwo hier platzieren können. Ich denke, es funktioniert gut und erhöht, bis die Ecken oben in der Unterseite treffen, bewegen sich knapp unter Home-Indikator, weil wir Toby die untere Ebene abbilden wollen. Also den ganzen Weg unten. Und schließlich wollen wir die Größe von dieser Linie erhöhen. Also, wie Sie sehen können, ist die Kunst langweilig Witz 375 so können wir in die Suchleiste springen, lokalisiert die Zeile und geben Sie einfach 375 ein und stellen Sie sicher, dass Sie es bewegen, bis es mit Ende aus Art Board trifft . Nun, da wir das getan haben, müssen wir hier ein paar Änderungen vornehmen. Also gingen wir, um Anrufer und ausgewählte Farbe auszuwählen, bewegen sie irgendwo um den heilenden Ort, so dass Sie den Schmerz hier bewegen können. Vielleicht, und dann musst du es dem Klaps hinzufügen. Es geht also von hier nach hier. Aber lasst uns zuerst die Farbe vom Pfad ändern, um sich zu verfärben. Stellen Sie einfach sicher, dass Sie Rahmen auswählen und dann die Farbe ändern. So wie das hier. So ist es orange und ein bisschen schöner und klarer. Sie können sogar die Größe erhöhen, um es zu machen. Und dann können Sie wieder in eine Ebene springen, einen Doppelklick auf den Klaps buchstabieren und dann einfach diese Pat-Punkte verschieben, so dass es dem Klopfen von der Karte folgt . So etwas wie dieses nicht einfach bewegen Sie es Zeh hier, bewegen Sie diesen Pat-Punkt ein bisschen mehr so irgendwo hier herum, wie so und dann gehen Sie einfach zu Ihrem Start einen Ort genau hier. Sie können auch herumspielen. Sie können schnell verdoppeln, um sie herum zu machen, wenn Sie wollen. Sie können es dann sogar so verschieben und eine schöne Bogenform machen, wenn Sie möchten, führen Sie wahrscheinliche Kriterien durch und Sie können ihre Position ändern, wie Sie wollen, damit Sie sie senken oder so machen können. Sie können hier doppelklicken, weil dies die Ecke ist und Sie können auch hier doppelklicken , wenn Sie denken, dass das notwendig ist. Aber lassen wir es einfach so, wie es ist. Und buchen Sie nicht mit den Details zu diesem bestimmten Teil. Also, wenn du das fertig bist, möchte ich nur sicherstellen, dass ich hier sowieso doppelklicke, damit ich eine schöne Ecke erstellen kann, so etwas. Vielleicht, und dann kann ich diesen Winkel einfach ändern, um ihn etwas gerader zu machen. Dann bewegen Sie dies nur eine Berührung, auch hier so und dann einfach in den Schmerz bewegt. Ich konnte nicht nur ein bisschen oben, also bewegen Sie es so und es sieht viel schöner aus und dann bewegen Sie sich einfach in diese beiden, bis sie sich hier treffen. Und vielleicht können wir den inneren Kreis mit dieser Farbe färben, so dass wir wissen, dass das unser Ankunftspunkt ist . Und dieser Bildschirm ist fertig. Und jetzt, was wir noch tun müssen, ist einfach ein weiteres Element innerhalb unseres Menüs zu bearbeiten. Schlagen Sie unten Einstellungen direkt hier vor, Springen Sie in das Ebenenfenster. Sie können diese Einstellungen duplizieren, uh, Text und einfach Eingabe von Speicherorten, weil das ist das wichtige Bit, das die Leute brauchen, um sicherzustellen, dass sie alle gleichmäßig verteilt sind, und Sie können sogar alle sie und tun, wie wir es vorher getan haben. Wählen Sie also ein Rechteck aus. Stellen Sie sicher, dass Sie sich auf dem obersten Punkt neben dem X befinden. Wählen Sie ein Rechteck aus. Wählen Sie diese Gruppe aus. Positionieren Sie es wie so wirklich das Rechteck. Und Sie können auf Gruppe diese Gruppe. Wenn du das willst, oder du kannst es so glauben, wie es ist. Nennen Sie es einfach Artikel, weil Ladenstandort wirklich wichtig ist und die Leute Ladenstandorte erreichen können . Ich dieser Schrei aus der Speisekarte. Jetzt ist eine letzte Sache für uns zu tun, klicken Sie auf die strandy Schicht und drücken Sie einfach neun, denn das wird Ihre Basis 80 bis 90% senken. Und weil dieser Menü-Bildschirm wird ein Overlay-Bildschirm sein, weil es die Biggies auf den 90% ist, wird es übermäßig auf jedem der Bildschirme, wo es sich befindet, und es wird nur ein bisschen unter dem Bildschirm und nur ein bisschen unter diesem Bijie zeigen. Also, das ist es für die Gestaltung Teil unserer App in den nächsten Siri's Off Videos. Wir werden mit dem Prototyping beginnen und ich werde Ihnen zeigen, wie Sie einige dieser Bildschirme verdrahten können und wie Sie die perfekten Übergänge auswählen können und wie Sie es einem Kunden ein bisschen besser präsentieren können , als es jetzt ist, also werde ich sehen Sie dort. 25. Organisation: in diesem Abschnitt des Kurses werden wir mit Prototyping beginnen, und bevor wir alles tun, organisiere ich meine Dateien. Jetzt können Sie das gleiche tun, ist es für das Design zu lesen, so dass Sie kopieren und einfügen können diese Ports und machen eine weitere Kopie unten. Platzieren Sie einfach Prototyping. Das werden wir jetzt tun. Aber es ist auch Es gibt auch eine andere Methode, die Sie verwenden können, die einfach diese Bildschirme verwenden, wie sie jetzt sind. Ich benutze gerne Boot aus den Methoden, abhängig von der Größe des Projekts. Wenn das Projekt kleiner ist, wie dieses, möchte ich einfach alle diese Teile duplizieren und einfach unten platzieren, denn in macht unsere Arbeit viel einfacher. Es macht den Entwicklern Arbeit viel einfacher, und dann arbeiten Kunden viel einfacher, wenn sie dies sehen. Adobe-Eier verunreinigen, wenn Sie sie darüber informieren, wie Sie Adobe X D verwenden, was eigentlich ganz einfach ist. Wenn du darüber nachdenkst. Wenn Sie ein großes Projekt haben, sollten Sie vielleicht alles darin einschließen und Teil aus dem Projekt entwerfen . Stellen Sie sich zum Beispiel vor,Sie haben 200 unsere Ports oder so etwas, dann könnte es zeitaufwendig sein und machen, und es könnte Ihre Datei viel größer machen, als sie sein muss. zum Beispiel vor, Stellen Sie sich zum Beispiel vor,Sie haben 200 unsere Ports oder so etwas, dann könnte es zeitaufwendig sein und machen, Wenn Sie einfach duplizieren, sind dies Boards, zum Beispiel haben Sie 200 für die Drahtrahmen, 200 für das Design, 200 für Prototyping. Und Sie können sich vorstellen, dass die Datei ziemlich groß, ziemlich schnell sein kann , und es könnte für Ihren Kunden zeitaufwendig sein. Die Entwickler öffnen sich einfach und navigieren durch diese Datei. Aber weil wir 10 Bildschirme innerhalb dieses Projekts und innerhalb der Prototyping-Phase haben , werden wir ein paar mehr machen, weil wir einige Animationen und einige Anpassungen vornehmen müssen . Und dann könnte es offensichtlich sein, für den Prototyping-Tap unten zu gehen. Also lassen Sie uns einfach dieses Design wählen und wählen. Dies sind Boards einfach kritische Kontrolle oder Befehl D, um sie zu duplizieren und dann einfach bewegen Sie sie direkt unter und positionieren Sie sie in der Linie zu sein, die diese oben können Sie alte verwenden und einfach unten mit diesem Design und Doppel Klicken Sie hier und geben Sie Prototyping für Prototypen ein. Allerdings, Sie wollen, und dann einfach positionieren Sie es ein Augapfel es und Sie können auch die gleiche Entfernung wie es von hier nach hier ist . So können Sie einfach gehen, zum Beispiel, zu 400. Ich denke, das ist etwas, das wir für das Design getan haben. Also machen Sie es einfach 400 und bewegen Sie sich. All dies sind Ports nach oben ein wenig, so dass Sie den Raum aufnehmen können, den wir gerade erstellt . Also so etwas und das ist es für die Dateivorbereitung. Im nächsten Video werde ich Ihnen zeigen, wie Sie mit den fehlenden Bildschirmen und den fehlenden Elementen umgehen können weil ich absichtlich einige Elemente aus dem Drahtrahmen und dem Designteil vermisst habe, also werde ich Sie dort sehen. 26. Verpassen von Fehlen Bildschirmen: in diesem Video beschäftigen wir uns mit einigen fehlenden Bildschirmen und einigen fehlenden Elementen. Wie für den fehlenden Bildschirm geht, habe ich in den vorherigen Lektionen darüber gesprochen. So zum Beispiel kann zum Beispiel jeder einzelne dieser Bildschirme einen weiteren zusätzlichen Bildschirm oder vielleicht einige zusätzliche Bildschirme oben haben . Also, zum Beispiel, wir haben einen Bildschirm, und Sie möchten vielleicht auch dieses Lesen Sie mehr, die über uns Seite gehen wird, zum Beispiel unsere eigenen Kombinationen. Vielleicht möchten Sie einen weiteren separaten Bildschirm einschließen, der ihnen dann die falschen Kombinationsmöglichkeiten zeigt. Was sind die Raumkombinationen? Vielleicht wollen Sie die Geschichte hinter den Raumkombinationen zu erzählen und ihnen erklären, wie es darum ging , wie Sie mit den Fotografen umgehen, viel Geschäft mit den Innenarchitekten, um diese Räume in erster Linie zu schaffen, und dann, wie Sie wollen diese Produkte an die Verbraucher aufstellen. Auch hier oben könnten Sie vielleicht in Betracht ziehen, da wir für Punkte für die Paginierung erstellt haben, die für verschiedene Elemente erstellt wurden. Also vier verschiedene Bilder, die innerhalb von diesem Schieberegler gehen, so dass Sie vielleicht alle diese Bildschirme betrachten wollen oder nicht, weil dies nur der erste Teil in diesem Projekt ist, und das ist, was wir dem Kunden erklärt. Sie wollen nur die nackten Knochen dieses Projekts sehen, bevor wir vorwärts gehen, denn das ist wirklich wichtig. Wir wollen an der Front einige der wichtigsten Bits abnageln und mussten anfangen. Und wenn wir einmal die Farben, Typografie, Bilder,die Gesamtrichtung herausfinden Typografie, Bilder, Bilder, , mögen sie diese Hintergrundschatten vielleicht nicht. Vielleicht wollen wir, dass Zehe sie entfernen, einige Frames im Inneren einschließen und einige von diesen Änderungen, wenn wir all das zusammen haben, dann können wir vorwärts gehen und einige dieser zusätzlichen Bildschirme einschließen. Außerdem ist es viel einfacher, wenn Sie alle diese Elemente vorhanden haben, um diese zusätzlichen Bildschirme zu erstellen und dann stattdessen 10 Bildschirme zu starten, wie es für dieses Projekt mit 200 Bildschirmen ist , dann macht es Ihre ändert sich viel komplizierter, viel zeitaufwendiger sowohl für Sie als auch für Ihre Kunden. Denn anstatt Feedback für 10 Bildschirme zu geben, müssen sie Feedback für 200 Bildschirme geben. Es wird ihre Arbeit viel schwieriger, viel zeitaufwendiger machen , und das bedeutet, dass sie ihren Job auf die Website stellen und dann einfach mit Ihrer Vollzeit an diesem Projekt arbeiten müssen. Und lassen Sie mich Ihnen sagen, dass viele Kunden diesen Luxus nicht haben, nur ihren Job und ihr Leben hinter sich zu lassen und sich einfach Vollzeit auf Sie zu konzentrieren, damit Sie dieses Projekt für sie erstellen können. Deshalb fangen wir mit 10 Bildschirmen an. Wir wissen, dass der Klient es weiß , und Sie müssen Ihrem Klienten sagen , das sind nicht alle Bildschirme, die Sie brauchen werden. Aber das sind nur Startbildschirme, die Sie für uns benötigen, um dieses Projekt zu starten , damit wir vorwärts gehen und einige zusätzliche Bildschirme erstellen können, darunter einige neue. Und das werden wir in den weiteren Teilen dieses Projekts tun. Also ohne weiteres, lassen Sie mich Ihnen schnell zeigen, was einige fehlende Elemente sind, Diese Elemente, die ich absichtlich ausgelassen habe, nur um Ihnen zu zeigen, was passiert, weil viel Zeit, wenn Sie entwerfen, können Sie einfach alles vorherzusagen. Egal, wie lange Sie in diesem Geschäft sind, egal wie viele Projekte Sie hinter sich haben, viele der Times, Sie könnten einige Dinge übersehen. So zum Beispiel könnten Sie zum Beispielein Symbol verpassen. Möglicherweise verpassen Sie einige Schaltflächen, die Sie möglicherweise einige Benutzererfahrungsfunktionen verpassen. Also in unserem Fall habe ich ein Symbol ausgelassen. Wenn ich also etwas näher zoomen und zum Beispiel zu diesem Kategoriebildschirm gehe, zu diesem Kategoriebildschirm gehe, sehen Sie das Warenkorb-Symbol hier. Aber wenn ein Sprung in die Produktseite so ausgewählte Artikelseite, Sie können nicht sehen, fügen Sie in den Warenkorb Symbol. Also, wenn Leute Auswahl anwenden oder wir werden diese ändern, um in den Warenkorb zu legen oder zum Beispiel , jetzt und wenn sie jetzt klicken, wird es in den Warenkorb gelegt. Aber wie Sie sehen können, gibt es kein Symbol zum Warenkorb hinzufügen. Also, wie werden wir damit umgehen? Nun, es ist einfach. Vergrößern Sie dieses Bestellsymbol. Lassen Sie uns einen Kreis erstellen. Vielleicht so etwas. Sieht gut aus. Positionieren Sie es hier, vielleicht genau hier irgendwo so. Und lassen Sie uns schnell Nummer eins erstellen. Und wie Sie sehen können, ist es 14. Lassen Sie uns es auf 10 senken und sehen, wie das aussieht. Vielleicht können wir es in der Mitte von diesem Kreis positionieren. Ich finde, das sieht gut aus, aber du musst es testen. Also, zum Beispiel, wenn sie hinzugefügt 10 Aktien, so können Sie in 10 eingeben. Und wie Sie sehen können, ist das zu groß, weil es diesen Kreis nicht aufnehmen kann. Also müssen wir es noch mehr senken. Vielleicht 28 Und ich denke, acht sieht gut aus. Also, was ich tun möchte, ist einfach eine für diesen Fall zu erstellen und es von der Mitte zu gehen und es jetzt in der Mitte von Ihrem Kreis zu positionieren. So wie das hier. Aber weil Text hat den sicheren Bereich um oben und unten herum. Und wenn ich viel näher heranzoomen, können Sie sehen, dass dieser Bereich oben viel größer ist als dieser Bereich unten. Was ich also gerne mache, ist anstelle von hier, ist die Mitte. Aber wie Sie sehen können, gibt es viel mehr Leerraum oben. Ich mag es einfach, irgendwo hier herum zu kuscheln, also wenn Sie ein wenig herauszoomen, können Sie sehen, dass es genau in der Mitte ist. Nun, was wir als nächstes tun wollen, ist vielleicht wollen wir in kreative Grenze versuchen, die die Dicke von diesem Symbol ist, nur um zu sehen, wie es aussieht. Aber ich glaube nicht, dass es so gut aussehen wird. Also drei, wie Sie sehen können, ist es ungefähr da, aber es sieht nicht so gut aus. Also lassen Sie uns einfach einen erstellen. Und wir wollen den Rahmen und für die Feldfarbe entfernen. Lassen Sie uns einfach diese Farbe wählen. Und ich denke, das sieht gut aus. nur das Weiß für die Nummer benutzt und ich denke, es sieht gut aus. Es ist lesbar und Menschen können lesen, lesen Sie es leicht und sehen, was drin ist. Was wir jetzt tun möchten, ist zurück zum Ebenenfenster zu springen. Schau nicht gleich hier. Geben Sie in Kreisen ein. Ich will nur, dass du umkreist, zu den Befehlen gehst und auch Control G ausgewählt und vielleicht wirst du es nicht nennen. Wagen Icahn. So etwas, Control. Sehen? Und was wir tun wollen, ist hier zurück zu springen. Wo sind Symbole sind und wir möchten dies vielleicht ein bisschen verschieben, also doppelklicken Sie hier. Verschieben Sie es hier irgendwo. Und vielleicht möchten Sie alle diese auswählen, so nach oben, verschieben Sie sie aus dem Weg. Also noch einmal, hier zoomen viel näher Kontrolle V, so dass wir es basieren können. Richten Sie es mit der unteren Kante aus, da es einen Kreis oben hat, und Sie können ihn nach rechts verschieben und den Abstand zwischen sehen. So ist es bei 60 und jetzt können Sie alle noch einmal auswählen, wie so zoomen Sie etwas näher und machen Sie es 60 als auch. So wie so. Und Sie können auch Doppelklick können vielleicht so etwas tun. Jetzt haben wir dieses Symbol und das ist genau das, wovon ich gesprochen habe. So oft können Sie auf diese Probleme stoßen, aber Sie wollen nur mit ihnen umgehen, wenn sie kommen. So zum Beispiel, jetzt, wo wir ah gefüllt Warenkorb Symbol haben, können wir es an einigen anderen Orten aufnehmen. Also vielleicht haben sie einen Artikel in den Warenkorb von hier, so dass sie hier klicken könnten, sprang auf diese Seite für diese Couch hinzugefügt Toe Warenkorb und dann zurück nach Hause gehen oder einfach hier geklickt, um die Zahlung fortzusetzen. Und vielleicht ändern sie ihre Meinung. Sie sagten, Okay, ich will auf den Startbildschirm gehen. Sie haben auf das Logo geklickt. Vielleicht wird es sie nach Hause nehmen oder einfach hier auf der Speisekarte klicken, vielleicht Ladenstandorte auswählen, meine Bestellungen profilieren oder irgendwo anders gehen. Aber dieser Wagen Icahn wird gefüllt bleiben und sie können darauf klicken und an jedem Punkt wieder hier springen . So wichtig ist es, mit fehlenden Bildschirmen umzugehen, um mit fehlenden Elementen umzugehen. Und es wird im Grunde in jedem einzelnen Projekt passieren, an dem Sie arbeiten. Also beschäftigen Sie sich einfach damit, wie es kommt und Ihren Kunden erklärt, dass diese Dinge manchmal unbemerkt bleiben könnten. Manchmal werden sie Ihren Brief ändern. Sie werden Ihnen sagen, einige Dinge später in das Projekt aufzunehmen, also wissen Sie einfach, wann diese Dinge aufgetreten sind, beschäftigen Sie sich mit ihnen, während sie im nächsten Video kommen, wir werden mit unseren Prototypen beginnen, und ich werde Ihnen zeigen, wie Sie einige dieser Bildschirme duplizieren können, um einige tolle Animationen zu erstellen. Also werde ich dort sehen 27. Prototyping 1: Lassen Sie uns jetzt mit dem Prototyping Gesicht aus diesem Projekt beginnen und bevor wir anfangen, möchte ich nur etwas klarstellen. Ich ging voran und entferne die eine Erweiterung aus den Namen ST Ng wie mit ihm für den Design-Teil , wenn Sie sich erinnern, nur um zu schneiden, manchmal kurz für Diskurs. Also, was ich jetzt tun möchte, ist, wählen Sie das Haus und machen Sie zwei Kopien davon. Also halten Sie einfach meinen alten Schlüssel und ziehen Sie ihn nach unten und tun Sie uns in die gleiche ein weiteres Mal. So wie so? Also, warum habe ich das getan? Weil ich einen Drag-Trigger für diesen Abschnitt erstellen und Trigger für diesen Abschnitt anziehen möchte , damit Leute ziehen und eine andere Elemente innerhalb dieses Abschnitts sehen können. Also, wie wir das tun können, war immer noch in unserem Design Hahn. Hier machst du dein ganzes Design. Und wenn Sie bereit sind, Sie mit dem Prototyping zu beginnen, dann klicken Sie einfach pro Wrapping-Registerkarte und gehen Sie dann zu ihm und Sie können immer zwischen den beiden hin und her wechseln . Also, um loszulegen, sind wir auf dem zweiten Bildschirm. Also zu Hause zweite, und vielleicht können Sie sie sogar nennen, als wäre das ein Zuhause und dann springen direkt hier und dann wählen Sie Zuhause drei, nur damit sie wissen können, was Sie tun und wo Sie sind. So zu Hause zu schwächen, Wählen Sie diesen beliebtesten Abschnitt und klicken Sie auf Bild 123 halten Verschiebung und dann einfach bewegen Sie sie hier, bis sie mit unserem Führer auf der rechten Seite treffen. Und wieder einmal, das ist, wo unsere Führer sind so mächtig und so wichtig, dass wir zurück springen und nach Hause drei gehen und dann das gleiche für die Raumkombinationen tun können . So ausgewählte Locator-Kombinationen Bild 123 und dann einfach bewegen Sie sie alle zu hören. Und jetzt können wir Prototyping beginnen, so dass Sie auf die Startseite Nummer eins Sprung innerhalb des Prototyps klicken können , und was wir tun wollen, ist auf dieses erste Objekt klicken, so Milan, eine Lampe in unserem Fall, und dann ziehen Sie es einfach hier nach unten und für die Interaktion können Sie ziehen Sie verwenden können Auto animieren zu Hause ist das Ziel und für die Lockerung. Vielleicht können wir diese verwenden und lassen Sie uns auf den Namen des Our Port Click Play hier klicken , nur um es zu testen und zu sehen, wie es aussieht. So können Sie sehen, dass der Drag-Trigger ist. Und jetzt, um zurück zu gehen, klicken Sie einfach hier auf diesen 1. 1 Drachen zurück. Es wird genau die gleiche Interaktion aussehen. Und wenn ich hier rechts klicke, dann spielen und verwenden Sie den Track-Auslöser noch einmal, Wie Sie jetzt sehen können, können wir zurück zu ihm. Es ist also eine wirklich coole kleine Animation mit der Lockerung. Also, wenn Sie loslassen, fließt es irgendwie an Ort und Stelle. Nun, wie Sie sehen können, weil dieser unser Port nach unten erweitert ist, können Sie auch nach unten scrollen und unseren Prozess finden. Aber was wir wollen, ist, zum zweiten Abschnitt zu gehen. Also für das Haus drei, wollen wir das gleiche tun. Lesen Sie die Raumkombinationen. So sprang zurück nach Hause. Eins. Wählen Sie Diese 1. 1 Sie können ein wenig zoomen und dann einfach auf diese schmale nach unten ziehen, verwenden Sie genau die gleichen Einstellungen wie zuvor und tun Sie das gleiche wie zuvor. Also, warum die 1. 1? Warum nicht die 2. 1? Nun, denn auf der 2. 1 können Sie sehen, dass wir diesen Zustand haben. Also ist es hier für den beliebtesten Abschnitt verschoben, und auf der 1. 1 sind sie alle in ihrem ursprünglichen Zustand, Also das ist, was wir schaffen wollen. Wenn ich also gleich hier springe, drücke, spiele und mache das, kannst du sehen, dass es gut funktioniert. Und ich kann das auch tun und es funktioniert gut. Als nächstes lasst uns schnell voran springen und dies tun. Tun Sie dasselbe für einige dieser Symbole. Also für das Menü-Symbol, können wir zurück springen und klicken Sie rechts hier. Stattdessen aus dem Auslöser wollen wir aus dem Auslöserden Wasserhahn verwenden. Anstelle des Ziehens möchten Sie also Schritt anstelle von Aktion oder Zehenanimierung verwenden. Sie möchten übermäßig auswählen, weil Sie diesen Bildschirm Toe Overlay oben auf diesem Bildschirm möchten, und jetzt möchten Sie vielleicht zurück gehen. Also, wenn Sie dieses X-Symbol hier klicken, ziehen Sie es Zehe hier, Schritt nur nach Hause löst sich, so dass es zurück gehen wird und lassen Sie uns schnell getestet, so dass er hier getroffen zu spielen , und wie Sie sehen können, wird es überlagern oben auf dem Bildschirm, und wenn Sie auf Acts klicken, wird es wieder schließen. So können Sie schnell tun, dass für alle diese Bildschirme, wenn Sie wollen, aber wir gehen Zehensprung nach innen. Das ist ein Teil davon. Später. Und jetzt lassen Sie uns schnell animieren die Zonen, so dass Sie auf die Suche klicken können, und es wird Sie zur Suche direkt hier oder direkt hier führen. Sie können wählen, wie Sie diese organisieren möchten. Also lassen Sie uns schnell zu den Filtern gehen, weil ich nach Filtern suchen möchte. Jetzt ist das ein Wasserhahn. Es ist nicht übermäßig, es ist ein Übergang, und Sie möchten vielleicht diese Nation wählen. Es ist diese und Animation, die Sie wählen können, auflösen oder Sie können leicht links rutschen aus. Vielleicht können wir uns für das hier aufklappen, also lassen Sie es uns ausprobieren. Sehen Sie, wie es aussieht. Spielen. Klicken Sie hier, und es wird von oben gleiten. Und ich mag, wie das aussieht, also kannst du einfach hier in der Nähe klicken und es wird dich wieder rausbringen , einige von diesen anderen. Also lassen Sie uns, dass ein Übergang nach Hause rutschen nach oben oder vielleicht leicht nach unten. Also klicken Sie rechts hier, drücken, spielen, klicken Sie rechts hier, und wenn ich hier rechts klicke, wird es das gleiche tun und zurück nach unten springen. Also kam es hoch und sprang wieder runter. Und eine letzte Sache, die wir für diesen Bildschirm tun müssen, ist klicken Sie hier auf das Warenkorb-Symbol. Vielleicht kannst du so etwas näher heranzoomen und dann einfach in deinen Warenkorb ziehen. Also, um Details, Schritt, Schritt, Übergang oder die Details zu bestellen. Und statt dieses leichten Down, vielleicht können Sie leicht rechts, zum Beispiel, nur um zu sehen, wie das aussieht. Also in einem Klick direkt dort, wird es leicht nach rechts. Und ich mag, wie das aussieht und eine letzte Sache zu tun ist. Sie können so die beliebtesten wählen und Sie können vielleicht auf klicken, um alt zu sehen. Und es wird Sie zu diesem Abschnitt führen. Also, Tep und statt Rutschen rechts beißt Juden auflösen und schließlich Raumkombinationen verlegen. Vielleicht können wir diese 1. 1 wählen, weil es unsere 1. 1 ist Und weil wir nicht von dort gehen , vielleicht können Sie Seal wählen, weil wir es für diesen Teil aus der Animation verwendet haben, können wir einfach alle klicken Sie hier. Es bringt uns zum Wohnzimmer Hahn Übergangsraum Kombination Und vielleicht können wir in diesem Fall leicht links wählen . Also lassen Sie es uns schnell testen, damit all dies richtig funktioniert. Und wenn ich auf Siegel klicke, können Sie sehen, dass es uns ins Wohnzimmer bringt. Und wenn ich auf diesen Zyklus zurückklicke, der so ausgewählt kann es uns diesen Bildschirm noch einmal nehmen. Also statt der leichten linken, lassen Sie uns leicht wählen, oder? Also wieder, zu Hause, klicken Sie rechts hier, Rom Kombinationen. Also sehen Sie alles Okay, ich mag das und ich kann zurück auf den Home-Bildschirm und das war's für dieses erste Video. Im nächsten Video gehen wir zu Kategorie-Bildschirm-Suchfilter und so weiter, so werde ich es sehen. 28. Prototyping 2: Lasst uns jetzt voran gehen und diese anderen Bildschirme feinden. Also für den Kategoriebildschirm, wenn Sie direkt hier springen, wird es uns zum Suchbildschirm bringen. Und vielleicht können wir hier zum Beispiel gehen, zum Beispiel gehen, denn das ist es, was wir wollen. Und anstelle der Folie rechts, können Sie Auflösen wählen, wenn ich auf Einsicht klicke und wählen Sie dieses Symbol Seife für die Bestellungen. Ich kann gehen, um Details verwendet zu bestellen. Diese alten vielleicht, und Sie können immer zurück springen und klicken Sie auf einige dieser Symbole und sehen, was Sie getan haben. So kannst du springen. Sehen Sie, wo es genau hier ist, und Sie können sehen, dass es Licht richtig ist, so dass Sie genau die gleiche Animation dafür verwenden können, so dass Sie darauf klicken können, um etwas näher zu zoomen, sehen, ob es ausgewählt ist. Es ist, Und wie Sie sehen können, ist es richtig, hier, anstelle des Ergebnisses, schieben Sie rechts, so dass Sie genau die gleiche Animation in jedem einzelnen Bildschirm verwenden können. Nun, endlich, lassen Sie uns das Menü verwenden, so klicken Sie rechts hier, springen Sie in das Menü so tippen Sie anstelle des Übergangs, können Sie übermäßig wählen, und Sie können auf die leichte nach unten gehen. Gleiche Sache für den Home-Bildschirm, und Sie können immer überprüfen Sie es aus und sehen, ob Sie genau das getan haben. Also statt zu lösen, wie es genau hier ist. Vielleicht können wir leicht nach unten wählen, nur um diese Konsistenz in unserem Bildschirm zu haben. Also, wenn ich hier rechts klicke, klicken Sie auf das Menü. Es wird leicht nach unten sein, und wenn ich irgendwo klicke, wird es uns hierher bringen. Aber anstelle des X hier, weil es uns immer auf den Home-Bildschirm bringt, wollen wir es entfernen. Also, wenn wir auf eine von diesen unter Bildschirmen klicken, will es uns zurück nach Hause nehmen. Aber bleiben Sie auf diesem speziellen Bildschirm, so dass Sie dies von Zeit zu Zeit finden. Wenn Sie also animieren, klicken Sie hier, als irgendwo hier. Es wird einfach schließen und nicht auf den vorherigen Bildschirm zurückkommen, den Sie endlich für diesen Bildschirm treffen wollten . Lassen Sie uns auf sortieren nach klicken, und es wird Sie zu diesem Bildschirm und statt der übermäßig wählen Übergang und was ich will, zum Beispiel, lassen Sie uns leicht rechts wählen und sehen, wie das aussieht. Klicken Sie hier, also sortieren Sie nach Folie, richtig? Ich denke, es sieht gut aus und ST Ng, wie wir es vorher getan haben. Also möchten wir dieses X-Symbol entfernen und es erneut versuchen. Klicken Sie also hier. Also schieben Sie nach rechts. Und wie Sie jetzt sehen können, wollen wir einige zusätzliche Bildschirme hier hinzufügen, damit wir die Auswahl anwenden können. Und so wird es uns zurück zu diesem speziellen Bildschirm bringen. Nun, da wir all dies animiert haben, möchten Sie vielleicht auf das Logo klicken, das uns auf den Home-Bildschirm bringt. Also tippen Sie, vielleicht können Sie Auto Animate verwenden. Aber lassen Sie uns einfach Übergang und vielleicht können Sie Diesel wählen, also was auch immer Sie das Logo haben, es wird Sie auf den Home-Bildschirm bringen. Also jetzt lassen Sie uns diese Suchfilter wählen und lassen Sie uns animieren. Aber bevor wir treffen Kontrolle oder Befehl s, so dass wir unser Projekt und unsere Änderungen sagen können. Was wir für diesen Bildschirm wollen, ist einfach zurück zum Design-Teil zu springen. Halten Sie Ihre alte oder Option, springen Sie unten und was wir wollen, ist, sie geschlossen zu haben und sie öffnen zu lassen und schließlich anwenden zu lassen. Also wird es dieser sein. Nun, dieser Knopf sollte großartig sein für diesen ersten Teil. Also wählen Sie diese Farbe oder vielleicht sogar in dieser Farbe, Mal sehen. Ja, und für den Text ausgewählt dunklere Farbe. So etwas wie dieses wählen Sie die gleichen Einstellungen für dieses ein, weil es großartig sein wird . Und dann, wenn Sie anwenden, wenn Sie Ihre Auswahl treffen, wird es angezeigt, dass Sie die Auswahlschaltfläche anwenden, die Sie zurück zu diesem Bildschirm führt. Was wir also für das persönliche wollen, ist, etwas davon zu ändern und es hinzuzufügen, einige davon. Also, was Sie für den Preis nach unten Pfeil wollen, können Sie es nach oben drehen, so weil es geschlossen wird und all dies wird versteckt werden. Also statt des Preises und des Bereichs, alles wird versteckte Materialien sein, dasselbe Denken Sie also suchen Sie den Pfeil nach unten und drehen Sie ihn nach oben, so dass alle Materialien genau hier gehen , so dass wir den gleichen Abstand haben können und Sie werden alles verstecken, was befindet sich im Inneren dieses Materials Abschnitt und schließlich waschbar und Meghan Mechanismus. Sie können diese beiden Abschnitte nach oben verschieben und haben den gleichen Abstand wie für alle von diesen anderen. So, wie Sie sehen können, sind alle geschlossen, und jetzt, wenn Sie auf einige von ihnen klicken, so müssen wir auf den Preis und auf Materialien klicken, um diese Abschnitte zu öffnen, so Preis und die Juwelen geöffnet werden. Aber lasst uns diesen Rahmen entfernen und einfach dem Text glauben. Wenn die Leute auf diesen Rahmen klicken, werden sie angezeigt und geöffnet, und Sie können ein paar weitere Änderungen vornehmen. Also, zum Beispiel, vielleicht können wir es auf diesem Bildschirm schließen lassen und dann einen weiteren Bildschirm machen. Also, so. Also, bis, wie hier, ja und nein, das wird unser letzter Bildschirm sein. Und für diesen, lassen Sie uns die gleichen Einstellungen wie zuvor verwenden. So, und ich werde Ihnen zeigen, was ich meine. Also auf diesem 1. 1 alle von ihnen sind auf dieser 2. 1 geschlossen Nur diese 1. 1 ist geöffnet, also lasst uns hineinspringen und die Materialien schließen. Also noch einmal, Pfeil nach unten sollte oben sein, und dieser Buchstabe und das Gerinnsel wird versteckt werden, und Sie können all diese etwas nach oben bewegen und sie 20 Pixel von ihnen machen. so auseinander, 20 Pixel auf allen von ihnen. Das wird also unsere 1. 1 auf unserer 2. 1 sein. Es wird offen sein, aber nur der Rahmen wird versteckt und endlich hier. Wenn Sie es auswählen, wird es angezeigt und es wird Ihnen diesen Rahmen zeigen. Also jetzt gehen wir voran und animieren all dies. Was Sie also tun können, ist, wenn Sie auf Sortieren klicken, wird es Sie zu diesem Bildschirm führen. Also lassen Sie uns den Prototyp zurückspringen, so sortieren Sie nach diesem Bildschirm und lassen Sie es uns schnell testen. Sehen Sie, ob es funktioniert. Es tut, und jetzt, was wir tun können, ist auf den Preis auf dem Pfeil klicken und es wird Ihnen diesen Bildschirm zeigen Also tippen Übergang wäre automatisch animiert, weil wir wollen, dass schöne Animation. Und noch einmal, wenn Sie auf diese Materialien klicken, , und Sie können ein wenig näher zoomen, wenn Sie das Symbol nicht direkt auswählen können und den gleichen Auto-Feind verwenden , um die Suchfilter direkt hier zu erleichtern. Und schließlich, wenn Sie auf die Leiter klicken, gleichen Animationen direkt hier, es wird Sie hier nehmen, und schließlich, wenn Sie klicken, Auswahl anwenden. Es wird Sie zurück zu diesem Bildschirm bringen, und dafür werden wir Übergang wählen und für den Übergang können Sie auflösen wählen. Also lasst uns hier alles testen, um zu spielen. Also, wenn ich auf Sortieren klicken, wird es uns zu diesem Bildschirm Click Preis bringen. Es wird dieses Preiselement eröffnen. Klicken Sie auf die Materialien. Es wird dieses Griechische auf dem Brief öffnen. Es wird Ihnen es als eine Auswahl zeigen und schließlich Auswahl anwenden, und es wird Sie zurück zu diesem Bildschirm führen. Also, das ist im Grunde es für dieses Video ist, dass Sie manchmal sehen können, müssen Sie einige zusätzliche Bildschirme und einige zusätzliche Änderungen vornehmen. Aber es ist ziemlich lustig, weil Sie diese Animationen machen können. Und schließlich, wenn Sie alle von ihnen wieder schließen möchten, können Sie einfach umgekehrt gehen und auf diese Pfeile klicken und zurückgehen und zurückentwickeln, um zu diesem Bildschirm zurückzukehren . Aber ich fand es viel einfacher, einfach zu klicken. Wenden Sie Auswahlen an, denn das ist, was Benutzer in der nächsten Sache tun werden. Wir werden hineinspringen und einige Animationen auf der Raumkombination machen, und ich werde Ihnen zeigen, wie Sie auch einige schöne Animation für das Hintergrundbild machen können . Also sehe ich dich dort 29. Prototyping: wurde ins Innere springen und Animation für den falschen Kombinationsbildschirm erstellen. Also wieder in den Designteil springen, alte und verpflichtete unten halten. Platzieren Sie es hier und was wir hier wollen, ist, das nach rechts zu bewegen. Also springen Sie hinein, suchen Sie die Karte eins und Karte, um einfach beide auszuwählen und verschieben Sie sie direkt hier. Und was wir auch wollen, ist, dieses Hintergrundbild ein bisschen so irgendwo wie hier zu bewegen, vielleicht. Und was Sie hier sehen werden, ist eine leichte Animation. Wenn Sie zurück und vorwärts springen, So springen Sie in den Prototyp Erhöhung und was Sie wollen, ist, klicken Sie rechts hier, ziehen Sie unten. Trigger ist ein Ziehen, automatische Animieren und Erleichterung, die Sie verwenden können, ist aus. Also, wie das aussieht, hat hier wohl geweint. Also, bevor wir es tun, lassen Sie uns einfach zurück zu hier. Also ziehen Sie Auto Animator in Kombination ist aus und jetzt können wir Vorschau treffen. Also, wenn der vorherige Bildschirm geöffnet wurde, sieht das so aus. So können Sie sehen, wir haben diese schöne Hintergrundanimation von diesem Bild. So können Sie sich vorstellen, ob Sie mehr Karten hier haben. Wenn Sie also zum Beispiel drei oder vier haben , können Sie das Bild etwas weniger nach links verschieben, und dann wird diese ganze Animation viel schöner und viel sauberer aussehen als es jetzt ist. Stellen Sie sich also vor, Sie haben drei oder vier weitere Karten und die Bilder viel weißer, und dann können Sie jetzt eine Menge mehr Details zeigen, weil diese luftfreien Bilder, die ich von einem Spritzer genommen habe , die kommen, bevor der Client hat ihre eigenen Bilder bereits. Stellen Sie sich vor, dass alle diese Elemente perfekt positioniert sind. Also in dieser ersten Karte, sagen wir, sie verkaufen diese Lampe. Und wenn Sie auf dieser zweiten Karte weitermachen, sagen wir, sie verkaufen diesen Rahmen auf der dritten Karte. Nehmen wir an, sie verkaufen eine Lampe oder so etwas. Also, wo sich der Benutzer bewegt, diese Wagen, werden diese Elemente angezeigt und können dann einfach auf einige dieser Elemente klicken und dann die dedizierten Seiten für diese bestimmten Produkte öffnen . Also ist es wirklich eine mächtige Waffe, die Sie direkt hier in Adobe Eggs D haben, die Sie erkunden und dann bewegen können. Und schließlich, was wir für diesen Bildschirm wollen, ist, dieses Bild zu wählen, sagen wir oder klicken Sie auf das Paris, vielleicht und ziehen Sie es dann auf diesen Bildschirm. Was wir wollen, einen Schritt. Wir wollen nicht, dass Auto Feind Zeh im Übergang ist und wir wollen, dass diese alten ist raus. Also noch einmal, wie das aussieht wie Hit Play und Sie können diese bewegen. Und wenn Sie diesen Hit auf den Namen auswählen möchten und es wird Sie hier nehmen Jetzt, nur vorstellen, dass dies der Stuhl und nicht die Couch, denn wieder sind wir mit kostenlosen Bildern, und Client hat noch nicht ihre eigenen Bilder zur Verfügung gestellt. Aber sobald sie es tun, und sobald wir die Endphase dieses Projekts betreten, wird alles viel nahtloser funktionieren und viel schöner aussehen als es jetzt ist. Also werde ich Sie im nächsten Video sehen, wo wir mit ausgewählten Elementen Bildschirme beginnen werden, und wir werden einige subtile Animation zu diesem Hintergrund und diesem Stuhl hinzufügen, so werde ich es sehen 30. Prototyping: lassen Sie uns nun diese ausgewählten Elemente Bildschirme animieren. Aber bevor wir es tun, denn das ist eine ziemlich lange. Wir wollen nicht, dass wir hier unten eine Kopie machen, sondern auf der rechten Seite. Was Sie also tun können, ist, einige dieser Bildschirme zu bewegen, einfach in den Design-Teil davon zu springen, sie direkt hier zu bewegen, und dann einfach de für diesen einen zu steuern und dann einfach wieder in Position zu ziehen wie so. Also, warum wir das getan haben, wollen wir das hier machen. Das ist also unsere 1. 1 ohne Auswahl. Dann wollen wir die 2. 1 für die Farbe und dann die 3. 1 für die Größe machen. Also lassen Sie das hier so, als wäre es dieser. Lassen Sie einfach die Farbe und wir werden uns für die Größe verstecken. Wir werden den Rahmen verstecken, wie so und statt Auswahl anwenden Wenn Sie sich erinnern, haben wir es geändert, um jetzt zu kaufen. Also werden wir das für diese beiden Tasten tun. Also werden wir mittlerweile tippen, Kontrolle. Sehen Sie? Nein, toll hier, Control V nur um ein bisschen mehr Zeit zu sparen, können Sie alle von ihnen schließen und Jetzt können wir unsere Animation machen, so konsultieren Sie bitte diesen Artikel. Springen Sie in den Prototypengraben und was wir tun können, ist für diesen Pfeil. Wenn ich ausgewählt und zurückziehen, können wir zurück zum Raumkombinationsbildschirm gehen, und es wird Schritt Übergang statt der Auflösung sein. Lasst uns nach links leuchten und sehen, wie das aussieht. Also würde er spielen. Und wenn ich hier rechts klicke, wird es leicht nach links. Oder vielleicht können wir es leicht rechts ändern, weil es so schnell ein bisschen mehr Sinn macht. Genau hier. Klicken, spielen und drücken Sie die Folie, richtig? Wie Sie sehen können, tut es das. Also, jetzt, was wir tun können, ist, wenn Sie auf diese Farbe klicken direkt hier, es wird Sie zu diesem Bildschirm und statt Übergang nehmen. Wir wollen wählen oder Zehe animieren ist aus. Drei Sekunden. Sieht gut aus. Also, wenn ich hier rechts klicke, traf, spiele und wähle die Farbe. Wie Sie sehen können, bewegte es sich nur ein wenig und es führte diesen Buy Now Button ein. Also jetzt, was wir wollen, ist hier getroffen, so dass wir eine Auswahl für die Größe treffen können. Lassen Sie alles, wie es ist, weil wir wollen genau die gleiche Animation so getroffen in der 1. 1 Und wenn ein Hit hier, Sie können sehen, die Animation ist nur leicht bewegt Diese Farbe nach oben Klicken Sie hier. Wie Sie sehen können Jetzt haben wir diese Auswahl und schließlich, was wir brauchen, ist ein Jetzt kaufen Button. Wenn Sie also direkt dort klicken, möchten wir vielleicht einen weiteren Bildschirm hier einfügen, damit wir dies animieren können. Aber lassen Sie es uns von hier wegziehen. Zehe Bestelldetails. Klicken Sie also rechts hier und dann rechts hier, Tippen Sie auf. Wir wollen nicht, dass Autonomie im Übergang. Wir wollen auflösen ist aus drei Sekunden. Zyklische Rate hier traf Spiel. Und wenn Sie jetzt klicken, wird es diesen Bildschirm nehmen. Aber wir wollen das Gleiche von hier aus machen. So, weil die Leute vielleicht nicht wollen, dass Zehe eine Auswahl für dieses Eis treffen. Vielleicht möchten sie die Standardgröße je nachdem, welche Größe es ist. Vielleicht können sie jetzt von hier aus klicken, anstatt von hier. Aber die Mehrheit der Menschen wird hier reinspringen. Wenn es 59 Zentimeter in diesem Fall war, wird dieser Preis hier aktualisiert, und dann wird er auch hier aktualisiert. Aber weil wir es einfach mit 1 24 für den Preis gehalten haben. Wie Sie sehen können, ist es genau hier. Insgesamt ist dieser hier. Daher wollen wir es für diesen Prozess so einfach wie möglich halten. Also finde ich, es sieht gut aus. Also nochmals, klicken Sie hier. Er würde spielen, nur damit wir sehen können, wie es aussieht. Und Sie können sehen, dass Sie auch nach unten scrollen und mehr über dieses Produkt lesen können. Sieht nett aus. Also, wenn ich hier rechts klicke, kommt es zu leichten Animationen. Sie können Größe treffen, so genau hier und Sie können jetzt klicken. Es wird Sie zu diesem Bildschirm führen. Nun, endlich, wollen wir diese drei Symbole animieren, so klicken Sie auf sie separat wie, so wird es Sie zu diesem Bildschirm so aufgelöst sehen gut hier und schließlich genau hier. Wenn ich also auf einen von ihnen klicke und dann auf das Symbol klicke, wird es mich zu diesem Bildschirm bringen. Also finde ich, es sieht gut aus. Es sieht einfach aus, weil es das ist, was der Kunde in erster Linie wollte. Und ich denke, wir haben gute Arbeit für diese Bildschirme geleistet. Jetzt, im nächsten Video, werden wir im Schlepptau springen, Bestelldetails und erstellen einige schöne Animation für das Wischen und Entfernen von einigen dieser Artikel aus dem Warenkorb, so dass ich Sie dort sehen. 31. Prototyping: Lassen Sie uns nicht einspringen und einige Animationen für den Bestelldetails Bildschirm erstellen, bevor ich uns kontrolliere, nur damit ich unser Projekt speichern kann. Also, was ich will, ist, in die Design-Tab zu springen, meine sperrig zu halten und zwei Kopien zu machen. So, und vielleicht können Sie herausfinden, wo dieser war. Wenn Sie es ausrichten können, wie es ist, so und erstellen Sie eine weitere Kopie unten, so stellen Sie sicher, dass sie die gleiche Höhe haben. Und für diesen, was wir wollen, ist, Karte zu Auto drei auszuwählen und sie oben mit der Karte eins auszurichten, wie so und die Karte eins, wir werden es verstecken, also wird es nicht sichtbar sein, und wir möchten die Bestelldetails aktualisieren, da wir sie aus dem Warenkorb entfernt haben. Also, was ich will, ist, meinen Rechner zu finden und es ist 2429 plus 98 wird es jetzt zu 5 zu 7 sein . Also, wie dies zu 5 bis 7, weil der Preis aktualisiert, weil wir einen Artikel aus dem Warenkorb entfernt. Also, was wir hier wollen, ist, diesen feindlichen Hausstuhl von hier zu entfernen. Also möchte ich es einfach so entfernen und doppelklicken Sie auf Null auf meiner Tastatur, um die Kapazität auf Null zu senken . Und was ich jetzt will, ist zu versuchen, ihn zu treffen. Also werde ich zum Prototyp gehen. Ich werde auf diese Karte klicken, ziehen Sie sie und nach unten, um hier und was ich will, ist ziehen Auto. Jede Fleisch-Lockerung ist draußen. Und mal sehen, wie das aussieht. Also würde er Drag it so spielen. Und wie Sie sehen können, hat es es von diesem Bildschirm entfernt. Nun, was Sie von diesem Bildschirm nach unten wollen, ist, dass wir den gesamten Bildschirm animieren möchten. Klicken Sie also einfach auf den Namen von dunklen Brettern, klicken Sie rechts hier, ziehen Sie ihn nach unten. Was wir wollen, ist Zeit. Denn wenn wir es hier geschleppt haben, werden wir nicht ein bisschen warten. Und dann gehen Sie direkt hier zu diesem Bildschirm. So Verzögerung, Was wir wollen, ist vielleicht eine Sekunde Auto animiert die Aktion ist aus. Ist die Entlastungsdauer 0,3 Sekunden und schließlich wollen wir hier klicken. Fahren Sie fort. die Zahlung genommen. Gehen Sie zu diesem Bildschirm, so tippen Sie, weil der Hintergrund der gleiche ist. Wir wollen den Tap Auto animieren, vielleicht und Zahlung verwenden und nur sehen, wie das aussieht. Klicken Sie also auf diese 1. 1 Klick spielen. Also, wenn ich es entfernt loslassen. Es wird eine Sekunde warten und dann diese beiden nach oben in Position bringen. Und wie Sie sehen können, hat Total auch aktualisiert. Also schlag einfach. Spielen Sie noch einmal, sehen Sie, wie das aussieht. Achten Sie also auf die Gesamtsumme. Es ist 2651 Und wenn ich hier und wie Sie sehen können, insgesamt aktualisiert hier und jetzt haben wir nur diese beiden Artikel im Warenkorb. Noch eine Sache, die wir diese Funktion entwerfen könnten. Also, wenn Sie auf den Pfeil klicken und Sie können so wählen, zum Beispiel, um Stücke für Stücke, fünf Stücke, so etwas, der Preis wird hier in der Summe aktualisieren. Aber wir werden das nicht tun, weil der Kunde mehr daran interessiert war, wie das funktionieren wird . Also noch einmal, klicken Sie rechts hier, drücken Sie Play und, wie Sie sehen können, ziehen Sie sie. Insgesamt aktualisiert. Fahren Sie mit der Zahlung fort. Und wie Sie sehen können, sind wir jetzt auf dem Zahlungsbildschirm und lassen Sie uns schnell nur die Anpassungen auf dem Zahlungsbildschirm machen Pass gut, also klicken Sie hier und vielleicht wollen wir in die Registerkarte Design springen und eine schnelle Kopie machen. Also bewegen Sie sich mit unten, wie so, denn was wir wollen, ist, diese Schlagschatten vom ersten Bildschirm zu entfernen. Also auf der Kreditkarte, können Sie wählen BG und vereinfachen den Schatten auf das gleiche für das Auto von PayPal. BG hat den Schatten entfernt und genau hier auf der 2. 1 wollen wir den Schatten von den Menschen entfernen , weil der Kunde mit der Karte bezahlen will. So sieht das wie ein Prototyp aus. Sobald Sie hier sind, können Sie den Pfeil auswählen und hier zurückkehren. Tippen Sie also statt automatisch animieren, wählen Sie stattdessen den Übergang mit geringfügigen Ergebnissen. Richtig, weil du zurück zu diesem Bildschirm gehen willst und was wir wollen. Also wollen wir die Summe aktualisieren. Aber vielleicht wollen wir, dass sie gehen, entweder geben Sie ihnen die Möglichkeit, von diesem Bildschirm zu gehen oder von diesem dritten Bildschirm zu gehen. Also, den Fall oder wenn Sie sich entscheiden, von diesem dritten Bildschirm zu gehen und nur zwei Elemente haben, möchten Sie den Preis aktualisieren. Aber ich will ihn nur so machen. Also, vielleicht kann ich hier klicken, es von hier ziehen, tippen oder zu irgendeinem Fleisch, das er draußen ist. Also, das ist in Ordnung. Und schließlich wollen wir die Karte wählen und dann sprang zurück zu hier und werfen Sie die ausgewählte. Machen Sie eine Zahlung, und was wir wollen, ist, dass sie zum Beispiel auf den Startbildschirm zurückkehren . Es wird also ein Übergang sein. Auflösen ist aus, und die Dauer wird eine Sekunde sein, weil wir ein bisschen warten wollen, bevor wir das tun. Und schließlich ist eine letzte Änderung an dieser Unterseite, weil sie sie nicht auswählen können, bevor sie ihre Zahlungsmethode ausgewählt haben . Es wird also genauso aussehen wie diese anderen Tasten, die wir zuvor entworfen haben. Also endlich, mal sehen, wie unsere Animation aussieht, also springt es aus der Ordnung. Details. Klicken Sie hier, um Play zu drücken, fahren Sie mit der Zahlung fort. Wir sind hier, also ist der Preis derselbe, wie Sie sehen können. Sie können nicht klicken, eine Zahlung vornehmen, bevor sie eine Auswahl treffen. Wenn Sie also direkt hier klicken, wird dieser Hintergrundschatten angezeigt, und jetzt können sie eine Zahlung leisten. Sie können hier klicken, und wenn sie bezahlt haben, kann es sie zurück auf den Startbildschirm bringen. Nun, eine letzte Sache, die wir tun wollen, ist klicken Sie hier. Sie können einen Zeitauslöser zwischen diesem und diesem vorschlagen, so dass Sie eine weitere Kopie von diesem Bildschirm erstellen können , indem Sie von hier nach hier mit dem Zeitauslöser und dann von ihm zurück zum Home-Bildschirm , uh, mit unanständiger Auflösung -Auswahl. Und vielleicht wollen wir es etwas größer machen. Also zwei Sekunden. Sehen Sie, wie das aussieht. Also, wenn du hier bist, kann ich Hit spielen, eine Zahlung leisten. Und, wie Sie sehen können, zwei zweite Einsätze für es zurück zu diesem Bildschirm zu gehen. Also ist es wirklich einfach. Es ist wirklich einfach. Wie Sie sehen können, einfach diese Änderungen vor und möchten dies nur schnell überprüfen. So ist die Dauer aus. Vielleicht ist es eine Sekunde und sieh dir das an und sieh dir an, wie das aussieht. Also, wenn sie auf die Karte klicken, dauert es eine Sekunde für diesen Hintergrund Schatten Zehe erscheinen. Vielleicht können Sie sogar einen Rahmen um diese Karte erstellen, nur um ein bisschen besser anzuzeigen, als sie ausgewählt. Aber ich denke, dieser Hintergrundschatten funktioniert sehr gut mit unserem Orel Design. Im abschließenden Video springen wir in die Läden und das Menü, und ich werde Ihnen auch diese Gruben zeigen, also sehe ich Sie dort. 32. Prototyping: nun endlich, endlich, lassen Sie uns Speicherorte und Menübildschirme animieren. Aber bevor wir es tun, habe ich gerade etwas erkannt, und das wird viel passieren, wenn du entwerfst. Manchmal fügen Sie Dinge ein, die für einige Bildschirme oder einige Seiten nicht notwendig sind, wenn Sie Website-Design tun, und in unserem Fall ist es dieses Symbol. Also sind es die Befehle. Ich kann keine Bestelldetails einsehen, denn warum sollten Sie das Bestellsymbol innerhalb der Bestelldetails benötigen? Weil du auf dem Bildschirm bist, damit die Seiken nichts tun. Also lassen Sie uns in den Design-Teil springen, löschen, und wir werden das gleiche für alle diese anderen Bildschirme tun, und ich werde hineinspringen und es für den Design-Teil auch löschen. Also klicken Sie hier, von hier gelöscht und schließlich in die Bestelldetails in unserer Verkabelung gesprungen und auch von dort gelöscht . So wie Sie sehen können, ist es ganz einfach Zehe machen diese Änderungen einfach in einige dieser Bildschirme springen und die Änderungen vornehmen. Aber diese Dinge werden von Zeit zu Zeit passieren, weil Sie an diesem Projekt arbeiten , und Sie haben Ihre Zeit und Ihre Energie gewidmet. aber manchmal macht man einige von diesen kleinen Fehlern. nun endlich Lassen Sie unsnun endlichAnimationen für die Ladenstandorte machen. Nehmen wir an, Sie gehen zu ihm von diesem Bildschirm oder von einem anderen Bildschirm, wo Sie dieses Suchsymbol haben . Es wird Sie zu diesem bestimmten Bildschirm bringen und lassen Sie uns in ein Design springen, weil wir drei Bildschirme machen wollen . Also lassen Sie uns unseren alten Schlüssel noch einmal verwenden und ein Duplikat daraus machen und es noch einmal duplizieren . Was wir also mit der 1. 1 tun wollen, ist, einige dieser Elemente zu entfernen. Also werden wir die selektive Farbfarbe entfernen. Wir werden den Klaps entfernen und diese Karte verschwinden lassen, damit wir sie so verstecken können . Und auf der 2. 1 anstelle von Suchorten, können wir Bel Great eingeben, und wir werden das gleiche tun. Also werden wir ausgewählte Farbfarbe pat entfernen und verwerfen direkt hier, damit wir es aus der Sicht verschieben können . Und schließlich werden wir alles auf dem Startbildschirm zeigen, so einfach doppelklicken Sie hier und tippen Sie in Belgrad und stellen Sie sicher, dass Sie überprüft Wenn Sie es überall eingegeben haben, so dass wir in den Prototyp springen können. Klicken Sie nun hier auf diesem ersten Bildschirm. Und eine der Wunsch ist, wenn die Leute direkt hier innerhalb dieser Suchleisten auf den Text klicken Belgrad erscheint. Es wird nur ein bisschen warten. Und dann wird es Ihnen alle diese Informationen hier zeigen. Wenn Sie also darauf klicken, können Sie es direkt hier ziehen. Also klopfen oder Zehe Fleisch und dann wählen Sie diese ganze unsere Häfen, vielleicht warten Sie ein bisschen. Also Zeitverzögerung wird eine Sekunde automatisch animieren auf diesem Bildschirm genau hier, und es wird Ihnen alle diese Informationen zeigen. Also lasst uns schnell hineinspringen und sehen, was wir getan haben. Also, wenn Sie auf diese 1. 1 klicken Sie können klicken Sie Standort wird eine Sekunde ködern, und es wird Ihnen zeigen, diesen Laden und Belgrader Shop genau hier. Jetzt können Sie dieses Auto zum Auftauchen bringen. So, zum Beispiel, vielleicht schwächen Sprung auf diesen Bildschirm und springen, um unsere Karte zu entwerfen. Also hier ist es, genau hier, und vielleicht können wir es bewegen. Zum Beispiel, unten so und es wird Null Pacenti sein und mal sehen, wie das jetzt aussieht, so dass Sie springen können. Klicken Sie hier. Warten Sie eine Sekunde. Und wie Sie sehen können, erschien Card von hier. Jetzt können Sie sogar einen zusätzlichen Bildschirm erstellen und dann diesen Spot animieren. Also in der dritten Bildschirmkarte erscheint und Pop-up von unten, wie es nicht gerade jetzt, aber dieser Teil wird dann auf dem vierten Bildschirm erscheinen. Du kannst das tun, wenn du willst, aber ich denke, es sieht vorerst gut aus. Und dann kann der Benutzer direkt hier klicken und von seinem eigenen Standort aus zu diesem Ort navigieren oder weitere Details treffen und mehr über diese Rechnung erfahren. Großartiger Laden. Und vielleicht kann das wie ein Pop-up-Fenster und mit dem schwarzen Hintergrund sein, zum Beispiel, so dass Sie alle diese anderen Informationen verdunkeln können, und Sie könnten vielleicht ein anderes Ex-Symbol haben, damit sie es schließen können, wenn sie es von dort. Diese Karte kann zum Beispiel ein bisschen mehr Informationen enthalten, zum Beispiel vielleicht Bilder über diesen Ort, vielleicht eine Telefonnummer,eine E-Mail-Adresse,ein Fax. ein bisschen mehr Informationen enthalten, vielleicht Bilder über diesen Ort, vielleicht eine Telefonnummer, E-Mail-Adresse, Wenn sie Fax, E-Mail, Adresse solche Sachen verwenden E-Mail, , und sie können sie direkt von ihrer kontaktieren. Oder sie können den Laden schließen und navigieren mit dieser Schaltfläche direkt hier. Und schließlich, was wir noch tun müssen, ist einfach auf das Menü klicken, Prototyp verwenden und dann einfach Feinde. Etwas davon oben. Wenn Sie also auf das Logo klicken, werden sie auf den Startbildschirm gebracht. Also tippen Sie auf Übergang, lösen Sie sich auf. Er ist draußen. Das gefällt mir. Und schließlich können wir vielleicht auch meine Bestellungen auswählen, und es wird sie zum Schritt mit den Bestelldetails führen. Gleiche Einstellungen von hier speichern Standorte. Vielleicht könnte es sie nehmen. Ziehen Sie diesen ersten Bildschirm ab, also verwenden Sie alle gleich, und ich denke, das war's darum. Vielleicht können sie meine Zahlungen verwenden und auf diesen Bildschirm gehen. Aber es sollte ein dedizierter Bildschirm für meine Zahlungen sein, wo sie alle ihre Zahlungen sehen können . Also, wenn ich hier klicke, würde er spielen und zu Filialen gehen. Sie können sehen, wo es und wenn ich wieder ausgewählt, vielleicht klicken Sie auf das Logo. Es kann uns hier nehmen, Also, wenn Sie auf das Menü klicken, Ich kann von hier klicken Sie rechts hier wird es Sie auf den Home-Bildschirm nehmen. Aber zum Beispiel, wenn Sie auf diesem Bildschirm sind, drücken Sie Play, dann Menü. Aber wir haben nicht von hier aus animiert, also machen wir das jetzt. Klicken Sie hier, dann rechts hier. Tep und übermäßig auflösen. Ich denke, es sieht gut aus, aber es sollte nicht leicht nach oben fallen, weil das ist, was wir für all diese Städte verwendet haben . Also, wenn Sie dort klicken drücken, spielen Sie Treffermenü, es wird nach unten gleiten, wie Sie schön sehen können, wenn Sie rechts hier klicken, es geht, um Sie auf den Home-Bildschirm zu bringen. Die Steuerung besteht darin, unser Projekt zu speichern, und das ist es für die Animation. Wie Sie gesehen haben, können Sie verschiedene Arten von Animationen einschließen Sie können mit einfacher einmal wie mit ihm gehen. Mit diesen Pfeilen, die sich nach oben und unten öffnen, können Sie für ein bisschen fortgeschrittenere Art off Animationen gehen, wie wir es mit der Raumkombination tun , wo alles von links von rechts von oben nach unten gleitet. Sie können das Bild sogar näher zoomen. Sie können einen Zeitauslöser erstellen, wie wir es getan haben. Für diese Karte können Sie beispielsweise Karten animieren, um von links nach rechts von oben nach unten zu gehen, wie wir es bei diesem Shopstandort getan haben . Und schließlich können Sie sogar alles zusammenfügen und alles zusammen, um Animationen zu erstellen, wie wir es für die Aufträge getan haben, wenn sie dieses erste Auto nach links ziehen, dann warten sie ein wenig und alles füllt sich, wie es sollte und aktualisiert dann den Preis und aktualisiert auch die Buttons. Also, das ist es im Grunde für das Prototyping Gesicht im nächsten Teil. Abgesehen von diesem Kurs werden wir über den Export Ihrer Designs sprechen und wie Sie alles, was Sie bisher getan haben, an Ihren Kunden und deren Entwickler senden können, damit sie aufhören können. Beginnen Sie mit der Entwicklung, und Ihr Kunde kann all Ihre Prozesse verstehen, die Sie in Kraft gesetzt haben, und wie das Design funktioniert. Sobald es kalt ist, es und einmal ist es das Leben auf Benutzergeräten. Also sehe ich dich dort 33. Stil-Leitfaden erstellen: in diesem Teil des Kurses beginnen wir mit dem Export unserer Assets, weil wir diese Dateien, an denen wir gearbeitet haben, an unseren Kunden sowie an deren Entwickler senden müssen . Aber bevor wir es tun, müssen wir einige Änderungen vornehmen, und wir müssen sie vorbereiten, damit wir sie ihnen schicken können. Beginnen wir also mit der Erstellung eines Styleguides. Also, wenn ich jetzt etwas näher an hier heranzoomen, hieß diese Datei Symbole. Aber ich kann einfach langweilig hier klicken und einen Styleguide wie so erstellen, und dieser Styleguide wird Symbole enthalten, die verwendet wurden, sowie Farben und Schriftarten. Um das zu tun, kann ich dieses Kunstwerk einfach ausdehnen und entfernen, damit ich das Logo hier einfügen kann , so kann ich vielleicht sogar ein Duplikat davon machen und vielleicht einen lokalen größer machen. Das ist nicht die Voraussetzung, aber Sie versichern, dass, wenn Sie wollen, und jetzt einfach in der Mitte positionieren, um es ein bisschen attraktiver zu machen. Und lassen Sie es uns bewegen, Toby, irgendwo um 100, sagen wir, geben Sie uns einfach ein bisschen mehr Platz, und Sie können es auch mit diesen Symbolen tun. Einfach verschieben, und vielleicht können Sie so tun. So 456789 10 und erstellen ungleichmäßige Abstände. Nun lassen Sie uns Farben verwenden, und was wir tun werden, ist eine Rechteck-Werkzeugleiste zu verwenden. Klicken Sie auf Ja, es ist Panel und wir müssen für $6 insgesamt, so können Sie eine schöne Regie wie diese erstellen. Positionieren Sie es, Toby, genau so weit wie die beiden vorher waren. Also 100 wie so und dann machen Sie sechs Kopien, so dass Sie ein Wiederholungsraster verwenden können und dies tun, zum Beispiel, und Sie können den Abstand wie es ist, wenn Sie wollen. Oregon einfach auf Gruppe es, entfernt die Grenzen und dann gehen Sie einfach eins nach dem anderen und wählen Sie diese Farben. Also geh so. So, wie so E. B. Und schließlich ist das F F so wie es war und einfach eine schöne Grenze dafür schaffen. Nun lassen Sie uns etwas Text so unberührten. Klicken Sie hier, und diese 1. 1 ist F C 7800 wie so, und Sie können es hier einfügen. Stellen Sie sicher, dass es in der Mitte ist und erhöhen Sie einfach die Größe auf 10 oder vielleicht sogar 16. So ist es leicht lesbar. Machen Sie es weiß, weil alle unsere Farben, mit Ausnahme der weißen Farbe, weiß sind und Sie können es wie so doppelklicken Sie hier und geben Sie Null B Null b Null b für diese ein und halten Sie Old Key, um es wieder zu duplizieren. Wählen Sie das alles aus. Also dieser ist 858585 Also diese Farben sind ziemlich einfach, also nichts Wichtiges wirklich. Doppelklicken Sie hier. Und für diesen nächsten haben wir 717171 Wir haben E B E B B B B B für diesen, also ist es E B e B. Und schließlich, weil dies eine weiße ist, lassen Sie uns diese Farbe verwenden und einfach f f f f f f f f f f f f f Also das ist es für unsere Farben. Und Sie können auch gruppieren all diese Hit Control G Sprung in Ebenen, Panel und Tippfarben. Sie können es ein bisschen besser organisieren, so dass diese beiden Logos den ganzen Weg nach unten gehen und schließlich werden diese Farben den ganzen Weg nach unten gehen , so dass Sie alle Ihre Symbole gruppieren können. Also lasst uns das Warenkorb-Symbol finden. Es ist dieser hier. Also ist es Ordnung. Gruppieren Sie es so, wählen Sie alle so aus. Steuerung G Die durchgesickerte Ich meine Symbole, wenn dies nur für die Entwickler, so dass sie leicht Werte von hier kopieren und nicht in Ihr Design die ganze Zeit gehen, nur so dass sie Farben verwenden können . Nun, lassen Sie uns einige Mittel, so können Sie Presti und springen Interes Pfund, so dass Sie sehen können, welche Mittel Sie brauchen, um zu enthalten. Also dieser ist ein offener Sinn, und ich denke, es ist ein Halbbolzen wie dieser einfach von hier ausgewählt. So ein Halbbolzen. Dies ist ein Wort wie dieses und Sie können dies verwenden. Mach es einfach 18, als wäre es hier. Positionieren Sie es so und stellen Sie sicher, dass seine 100 gleichen wie diese anderen waren und Sie können eine Kopie davon erstellen. Steuern Sie einfach D und positionieren Sie vielleicht 23456 Vielleicht erstellen Sie so. Lassen Sie alle von ihnen ausgerichtet sein. Und das wird 14 und seine reguläre sein, und Sie können diesen offenen Sinn 14 unregelmäßig verwenden, um Textabsatz zu erstellen, wenn Sie die Treffersteuerung D sichern möchten und dann einfach 60 nach unten verschieben, so dass Bereichstext wie dies, vielleicht bis hier, dann einfach senken Sie es wie so Springen Sie in ihre Plug Ins, Lauren Ipsum gefüllt mit Ort oder Text einfügen Text und das ist es für diese. Vielleicht, weil es das gleiche ist, vielleicht können wir es 40 Pixel nach unten machen, wie so Springen Sie in eine Ebene Wirbelsäule wählen Sie alle aus dem Text und bestellen Sie es einfach die richtige Art und Weise herum wie so gesteuert G Verschieben Sie es nach unten. Und das ist unser Text, wie so weiter oben. Was? Ich möchte unsere Schatten erstellen, weil wir einige Schatten verwendet haben Wenn Sie sich für alle diese Elemente erinnern Also was wir tun können, ist einfach eine dieser Steuerelement C wählen. Wir genau hier, positionieren Sie es wie so stellen Sie sicher, dass es 100 so so ist und was ich tun möchte, ist ein paar Schatten einschließen , damit Sie Schatten Jump direkt hier verwenden können. Und wenn du dich daran erinnerst, sind es 55 10. Drücken Sie die Eingabetaste springen zu ihrem Schatten. Suchen Sie das hier. Wählen Sie diese Farbe aus. Es ist 25% und Sie können es auch auswählen. Hit Control D Sprung direkt hier und vielleicht machen es 60 zum Beispiel. Und Sie können zu zwei und fünf verwenden, weil das unser Unterschatten war. So können Sie diese beiden erstellen, die Sie in Ebenen Panel springen können. Also, wie beide die Kälte kontrollieren, diese Schatten und was schließlich? Ich möchte unsere Ausstrahlung einbeziehen. Also, was Sie tun können, ist diese beiden duplizieren, so dass Kontrolle d es so verschoben hat. Und diese werden Strahlen wie diese sein und vielleicht Abstand 100 machen, damit wir alles schön und glatt aussehen können , wie es sollte. Sie können dies senken, weil wir keine Animationen Illustrationen hatten, Also werden wir mit unseren Schatten enden. Also, was Sie für diese 1. 1 tun können, ist es einfach lokalisieren Sie diesen einen Hit Copy Hit basierend auf diesem und tun Sie das gleiche für diesen. Also kopieren Sie diesen einen Rechtsklick basiert Paris, und was wir tun können, ist glauben, die Schatten, wie sie sind, weil wir die Schatten dort verwenden. Aber wenn Sie möchten, können Sie eine alternative Kopie von diesen erstellen und eine ohne Schatten erstellen. Und während wir dabei sind, können wir das auch tun, so kontrolliert die Und vielleicht können Sie diese verwenden, um dies zu mögen und diese anderen beiden einfach machen sie 60 wie diese oder 40 Position diese 1 40 und Sie können alle drei so bewegen . Es sind also 40 Pixel, und vielleicht können wir das Gleiche dafür tun. Also 12 40. Und jetzt können wir die Grady INts auf 100 so verschieben. Also mag ich meine Dateien so zu bestellen, nur so dass Entwickler können dann nein, und haben eine größere Ansicht und schöne Sicht von allem, was ich in diesem Design verwendet. Also für diese beiden werden wir die Schatten entfernen. Und bei diesen beiden lassen wir die Schatten rein. Warum so? Denn das haben wir in unserer Prototyping-Phase benutzt, wenn Sie sich erinnern. Also für diese beiden haben wir keine Schatten. Und für diese beiden tun wir. Das war's also. Für unseren Styleguide können Sie die Kontrolle treffen. E sucht Ihren getäuschten REFILES Ordner, wenn Sie möchten, und Sie können dies einfach als Pdf J peg PNG auswählen. Wie Sie möchten, und drücken Sie Export, und Sie können es auch lassen, wie es ein Styleguide ist, und sie können darauf zugreifen. Und schließlich, wenn Sie etwas später auf teilen drücken, und ich werde Ihnen zeigen, wie Entwickler und Clients in der Lage sein werden, auf alle diese Informationen innerhalb von Adobe X'd in der freigegebenen Datei zugreifen . Aber es ist immer schön, ein zweites Exemplar zu haben, wenn Sie wollen , Sie so wollen, damit sie jederzeit darauf zugreifen können. Vielleicht sind sie am Telefon. Sie haben keine Internetverbindung, aber sie wollen nur schnell einige dieser Dateien überprüfen, und sie können dies tun, weil Sie sie als eine andere Datei exportiert haben. Also entweder Jay Peak, PNG oder pdf im nächsten Video. Ich werde Ihnen schnell die Verpackungsstruktur zeigen und wie Sie Ihre Datei für die Clientzustellung verpacken können. Also sehe ich dich dort 34. Verpackungsstruktur: in diesem Video. Ich möchte Ihnen nur meine Verpackungsstruktur zeigen. Du könntest deine eigene Struktur haben. Es spielt wirklich keine Rolle. Wichtig ist, dass es für den Entwickler leicht sein muss. Verstehen? Denn innerhalb dieser Struktur, die Sie erstellt haben, hat Entwickler Zugriff darauf und erfahren sofort, wo alles ist, nur so dass es beschleunigt ihren Prozess als auch. Bevor Sie Ihre Verpackungsstruktur erstellen, können Sie also etwas näher hineinzoomen. Unser Fall ist, dass Sie sehen können, wir haben 10 verschiedene Bildschirme und wir müssen 10 verschiedene Ordner für jeden Bildschirm erstellen . Es spielt keine Rolle, ob es nur ein Element enthält, das exportiert werden muss. Sie müssen sie immer noch so erstellen, wie sie sich in Ihrem Adobe x D befinden So sieht es so aus. Also, wie Sie sehen können, haben wir hier 10 verschiedene Ordner, sowie unseren Styleguide. Was ich auch gerne mache, ist einen anderen Ordner zu erstellen und ihn Facetten zu nennen. Drücken Sie die Eingabetaste, denn innerhalb dieses Ordners werden wir Symbole aus unserem Styleguide exportieren , und so werden wir es tun, damit Sie Bildschirm für Bildschirm gehen und dann alle diese Bilder exportieren können , . Und für diese PNG-Bilder können Sie einen Hintergrund exportieren, damit Sie nicht jeden Hintergrund exportieren müssen. Denn wenn Sie sich erinnern, sind diese drei genau die gleichen. So können Sie nur einen Hintergrund exportieren und dann diese drei Bilder s PNG exportieren. Sie können dieses Bild exportieren. Sie können diese drei Bilder sowie dieses endgültige Bild, das für Video ist, exportieren . Aber wir werden den Export in einem späteren Video bekommen. Das ist es für diese Dateistruktur. Ich wollte Ihnen nur zeigen, wie Sie es organisieren können, bevor Sie es an den Entwickler und Kunden im nächsten Video senden . Ich werde Ihnen schnell zeigen, wie Sie diesen Prototyp mit Ihrem Kunden teilen können, wie Sie Feedback erhalten können, wie Sie mit ihnen arbeiten können und wie Sie einige schnelle Änderungen vornehmen und dieses Projekt und diesen Prototyp aktualisieren können , bevor Sie senden es wieder für zusätzliche Revisionen zurückgelegt. Also sehe ich dich dort 35. Teilen mit dem Kunden: Lassen Sie uns also unseren Prototyp mit unserem Kunden teilen, und Sie können hier hineinzoomen. Es steht Prototyp. Klicken Sie auf die Startseite, das ist Ihr erster Bildschirm springen in Ihrem Prototyp und klicken Sie einfach auf diesen Share-Button direkt hier. Sie können die Zehenbearbeitung einladen, was bedeutet, dass Sie einen anderen Designer Toe einladen können. Bearbeiten Sie diese Datei, was bedeutet, dass Sie sie in eine Datei senden werden, was ich nicht empfehle, wenn Sie nicht Teil des Teams sind oder wenn der Kunde Sie noch nicht bezahlt Wenn sie es also getan haben, was bedeutet, dass Sie sie in eine Datei senden werden, was ich nicht empfehle, wenn Sie nicht Teil des Teams sind oder wenn der Kunde Sie noch nicht bezahlthat.Wenn sie es also getan haben,können Sie ihnen diese Datei senden, Offensichtlich. Aber wenn sie es nicht getan haben, empfehle ich wirklich, dass Sie ihnen keine Dateien vor der Zahlung senden, die Sie zur Überprüfungteilen können , die Sie zur Überprüfung , was Sie tun werden. Sie können für eine Entwicklung teilen, die Sie für Ihre Entwickler teilen können, um alles zu sehen, was ist Einblick und Sie werden auf teilen für die Entwicklung am Ende dieses Projekts klicken . Wenn der Kunde also mit allem einverstanden ist, haben sie keine weiteren Änderungen mehr. Revisionen, und Sie müssen ihnen die Datei senden, damit sie Entwickler darauf zugreifen können. Dann können Sie auf Teilen für die Entwicklung klicken. Wenig generieren einen Link auf die gleiche Weise wie Freigabe für die Überprüfung, und dann Entwickler kann es online überall auf jedem Gerät zugreifen. Sie brauchen nur die Internetverbindung, offensichtlich, um sehen zu können, welche zu verwenden, welche Farben Sie verwendet haben. Welches Bild gibt Abstand zwischen jedem von den Elementen links rechts? Stopp unten dazwischen. Alles ist für sie da, alles ist verfügbar und sie können natürlich diese endgültige Adobe XZ-Datei verwenden, um darauf zuzugreifen und manuell überprüfen, ob sie mit dieser Freigabe für Entwicklungsbildschirm ausgerichtet ist . Schließlich haben wir Links verwaltet, die Sie Ihre eigenen Links verwalten können. Wenn Sie also kostenlose Version von Adobe X'd verwenden, haben Sie nur einen aktiven Link, den Sie mit Ihren Kunden teilen können oder, wenn Sie kostenpflichtige Version verwenden, angeboten Fettleibigkeit. Wenn Sie also Adobe Creative Cloud-Abonnement haben, haben Sie eine unbegrenzte Anzahl von Links, und dort können Sie natürlich voran gehen und unnötige Links löschen. Sie können sie und so eine bearbeiten. Schließlich haben Sie ein Video aufgenommen, wenn Sie ein Video aufnehmen möchten, das Sie dann mit Ihrem Kunden teilen können, damit sie den Prozess sehen können, bevor sie den Prototyp erhalten , auf den sie offensichtlich klicken können, oder wenn sie endgültige Dateien erhalten. Also lassen Sie uns auf teilen für eine Rezension klicken und Sie können Kommentare nicht lieben. Sie können das Projekt direkt hier benennen. Wir werden das nicht tun und uns damit beschäftigen, aber Sie können es haben und Ihren Kundennamen direkt hier einfügen und der Name des Projekts zeigen Hotspot-Hinweise. Ich empfehle Ihnen, diese eigene zu verlassen, weil dann die Leute wissen, wo Sie in Ihrem Prototyp zeigen Navigationssteuerelemente klicken , die die Steuerelemente am unteren Rand Ihres Bildschirms sein werden. Also empfehle ich Ihnen, die Sonne als auch zu verlassen, Vollbild zu öffnen. Ich empfehle es nicht, weil Leute manchmal damit verwechselt werden, weil sie nicht wissen was zu tun ist und schließlich ein Passwort benötigen. Sie können ein mögliches für diesen Prototyp erstellen, wenn Sie nicht möchten, dass jemand ohne Passwort darauf zugreifen kann. Und jeder mit der Lincoln View oder nur eingeladene Leute kann sehen, wenn Sie direkt dort klicken . Sie können dann einige Leute e-Mails senden und einfach E-Mail-Adressen eingegeben und an diese Personen gesendet . Wenn Sie mit allem fertig sind, was Sie treffen können, erstellen Sie einen Link und es wird beginnen, Ihren Link zu erstellen und je nachdem, wie groß Ihr Projekt ist und von Ihrer Internetverbindung. So schnell wird es diesen Link für Sie generieren. Wenn Sie also den Link generiert haben, Sie, wenn Sie Änderungen vornehmen, könnenSie, wenn Sie Änderungen vornehmen,hier klicken, wo es Update steht, und es wird den Link aktualisieren. Sie können in schlechtem Code kopieren, verlinken oder kopieren. Wenn Sie es zum Beispielauf Ihrer Website platzieren möchten zum Beispiel und es sehen möchten, können Sie einfach hier klicken. Wenn ein Sprung zurück schnell, Sie können Copy Link drücken und offensichtlich geteilt, dass Link mit Ihrem Client. Aber wenn Sie dort klicken, seien Sie sich bewusst, dass es einige Zeit dauern wird, bis es geladen wird, besonders wenn Sie ah, viel von Bildschirmen haben . Jetzt haben wir 22 Bildschirme, weil ich immer sage, dass wir einige zusätzliche Bildschirme für dieses Projekt erstellen . Aber wenn Sie gerade dazu neigen, zum Beispiel, wird es viel schneller laden. Und es hängt auch viel von Ihrer Internet-Verbindungsgeschwindigkeit ab, so dass Sie offensichtlich hier klicken und alles sehen können, was wir getan haben. Alles funktioniert gut und Sie können hier unten klicken, also sind dies untere Steuerelemente, und es wird zwischen jedem und jedem Bildschirm, den Sie erstellt haben, und Clients könnten das auch tun. Nehmen wir an, sie sind zum Beispiel auf diesem Bildschirm, zum Beispiel auf diesem Bildschirm, und sie wollen Ihren Kommentar hinterlassen. Sie können einfach in das platzieren, was sie wollen, um Ihre Kommentare zu hinterlassen. Also, zum Beispiel, in dieser Kreditkarte und sie geben, schreiben Sie etwas wie Farbe ändern, Grady Int oder Changed Radiant von dieser Karte. Das ist richtig. Das und wenn sie fertig sind, können sie einfach auf „Senden“ klicken. Und, wie Sie auf der Zahlung einen Bildschirm sehen können, was ist dieser Bildschirm? Wir haben diesen Kommentar also immer wieder zum ersten Bildschirm springen und sie haben Ihren Kommentar hinterlassen. Sie können hier sehen. Okay, es ist auf dem Bildschirm für die Zahlung. Aber wie kann ich darauf zugreifen? Welcher ist dieser Bildschirm? Klicken Sie einfach hier, und es wird Sie direkt zu diesem Bildschirm bringen. Und wenn sie viele haben, was ist das, was sie tun werden, vor allem am Anfang, Aus jedem Projekt und dann werden Hot Spots kleiner und kleiner, während Sie entlang gehen. Sie können einfach hier klicken, und es wird Ihnen zeigen oder klicken Sie direkt hier, und es wird Ihnen direkt hier zeigen. Das war's also. Grundsätzlich können sie durchklicken. Sie können alles sehen, wie es aussieht und Sie können alle Kommentare direkt hier sehen. Sie können Kommentare ausblenden, wenn Sie einen Vollbildmodus sehen möchten, und sie können auch auf den Vollbildmodus selbst zugreifen. Wenn Sie sie noch einmal lassen, können Sie sie zum Bearbeiten einladen. Sie können E-Mails von den Personen senden, die Sie Ihren Prototyp sehen möchten. Und wie gesagt, alles funktioniert so, wie es sollte. Wie Sie hier sehen können, wiegt es eine Sekunde. Es aktualisiert den Preis. Sie können mit der Zahlung fortfahren. Ich kann diesen auswählen. Sie können Schlagschatten direkt hier sehen, eine Zahlung leisten. Es wird warten und dann wieder hierher kommen. Also ist alles so, wie wir es beabsichtigt haben. Alles funktioniert richtig, und das ist Adobe X, die teilen eine Schüssel Funktionen. Und ich mag das wirklich, weil Sie eine Kommunikation mit Ihren Kunden direkt durch diese anrufen können , so dass Sie keine externen Websites benötigen. So, zum Beispiel, 99 Designs, so müssen Sie sie zu zahlen, nur um in der Lage, mit Ihren Kunden kommunizieren zu können. Außerdem ist es viel angenehmer für das Auge. Es ist viel einfacher, als über Gmail zu kommunizieren und ihnen einfach Bilder zu senden. Also, wie Sie hier sehen können, haben wir 22 Bilder. Stellen Sie sich vor, wie groß die Hektik ist, 22 Bilder an Ihre Kunden zu senden. Wie viel Zeit brauchen sie, um es organisiert oder unorganisiert zu finden? Weißt du, was ich meine? Also im Grunde ist dies eine fantastische Ergänzung. Toe Adobe eine Stadt, nur weil Sie alles tun können, was Sie brauchen innen aus, eine nach oben und innen dieses Bildschirms. Also, wenn sie Ihnen Feedback und die Kommentare hinterlassen, können Sie diesen Kommentaren folgen. Job zurück zu Adobe X'd. Sie können zurück zum Design springen, schnelle Änderungen vornehmen, wieder zum Prototyp-Click-Freigabe springen, und Sie können zur Überprüfung freigeben und einfach den Link aktualisieren und dann den Link kopieren und ihnen den neuen Link senden . Also, wenn ich wieder aus diesem springen und wieder auf Teilen klicken, können Sie für die Entwicklung teilen und Sie können für Käufer exportieren Include Assets herunterladen, so dass alle diese Assets enthalten werden. Alle Assets sind Bilder, Symbole, diese Hintergrund, so dass jede einzelne Sache, die Sie ein Passwort benötigen können, und Sie können klicken, erstellen Sie einen Link. Jetzt werden Entwickler in der Lage sein, genau so wie die Kunden abstimmen, darauf zuzugreifen, so dass sie einfach messen können. Zum Beispiel, Abstand zwischen diesem Logo und diesem Menü-Symbol Abstand zwischen hier und hier, so dass sie in der Lage sein, das alles online zu tun, und sie werden in der Lage sein, jede einzelne Sache zu generieren, die sie zum Download benötigen direkt von dort. Aber wir werden immer noch die Exportgüter für sie ausführen. Sie haben also Entwickler, die mit diesem Prozess verwechselt werden. Sie haben Entwickler, die nie von Adobe Eggs gehört, D oder Skizze oder einige dieser anderen Werkzeuge, die sie arbeiten, in der Regel mit für die Klappe oder einfach nur im Grunde mit einigen grundlegenden Bildern in der Vergangenheit. Also haben Sie alle möglichen Entwickler, gleiche Sache mag alle Arten von Designern haben, also müssen Sie lernen, Zehe Arbeit mit jedem. Wenn sie also nicht wissen, wie das geht, teilen Sie für die Entwicklungsfunktion in Adobe D. Keine Sorge. Im nächsten Video werden wir anfangen, unsere Assets zu exportieren, sie zu verpacken und für Entwickler vorzubereiten. Egal, wer Ihr Entwickler ist, Sie werden in der Lage sein, mit ihnen zu arbeiten, weil Sie die Verpackungsstruktur eingerichtet haben . Also sehe ich dich dort 36. Exportieren: Lassen Sie uns jetzt anfangen, unsere Vermögenswerte zu exportieren. Und das ist, was ich mag diesen Style Guide, weil wir alles geschaffen haben, was wir brauchen, genau hier, und wir können einfach alles auswählen. Klicken Sie jedoch zuerst auf den Design-Tap, also wählen Sie alle aus. Hit Control E und für die Datei verwendet SPG Styling-Präsentation auf die oder interne CSS Sie mit Ihrem Entwickler vermuten, was sie wollen, Aber sie verwenden in der Regel Präsentationsattribute so alles, wie es vorgestellt wurde, Sie können rechts überprüfen hier, wenn Sie Ihre Größe optimieren möchten, aber vorher, weil diese SVG es bereits optimiert Zehenpunkt ist. Sie können die Änderung hier hören, und ich möchte uns auswählen. Es ist Ordner, wählen Sie Ordner getroffen, Exportieren und Sie sind fertig. Und wenn ein Sprung zurück in meinen Ordner springt Toe Assets, können Sie Symbole direkt hier sehen, und es wird alle aus diesen Symbolen auswählen, die in diesem Ordner sind, und erstellen Sie sie als eins. Und wenn Sie es nicht wollen, können Sie die Elite treffen, und Sie können UN-Gruppe dies und dann mit ihnen ausgewählt wie, so können Sie Steuerung E S V G treffen und wieder auf Export drücken. Und wenn ein Sprung zurück in unsere Mappe. Jetzt können Sie sehen, alle von ihnen sind separate Assets wie so, so dass Sie es nicht haben können. Sie können den Code direkt aus der SPG-Datei kopieren, wenn sie möchten. Aber wenn du willst, kannst du es auch so machen. Sprechen Sie einfach mit ihnen und erfahren Sie, was für sie einfacher zu verwenden ist. Ist es also eine Datei, oder ist es jetzt separate Dateien, weil Sie alle extrahiert und in diesen separaten Ordner exportiert haben ? Weil wir keine weiteren Symbole haben, die wir nicht exportiert haben? Sie können einfach dieses Asset fuller verwenden und keine anderen Symbole aus irgendwelchen in Ihrem Design exportieren . Also im Grunde, Sie haben mit Ihren Symbolen nur durch die Erstellung dieses Styleguide abgeschlossen, und ich denke, es ist eine fantastische Ergänzung und verbessert nur Ihre Geschwindigkeit massiv während Sie arbeiten. Als nächstes verwenden wir den Startbildschirm, damit Sie dieses Bild auswählen können. Zum Beispiel, drücken Sie Kontrolle Befehl E Juden Jay Pek von hier aus suchen Sie den Home-Ordner. Also hier ist es, genau hier. Wählen Sie den Ordner Hit Export, und was wir wollen, ist öffnen Sie dies auf und Sie können ihn wie soziale EMP auswählen, eine Lampe zu landen drei Hit Control sein und was wir wollen sp Verletzungen Weil diese PNG ursprünglich Hit Export und Sie können schließen all diese Ordner nach oben, wenn Sie möchten. Sie wollen nur einen Hintergrund exportieren, damit er ihn kontrollieren würde und Sie können dies als JPEG exportieren also Hit Export und es wird es ersetzen, weil diese 1. 1 unser Bild ist. Also lasst uns ändern, dass Dies wird unser Held Bild wie so sorry gemacht einen Tippfehler wie dieses Steuerelement e j pic exportiert und ich kann in unseren Ordner springen, finden Sie das Zuhause Hier ist es, und löschen Sie einfach dieses, weil wir dieses Bild wie so brauchen . Also klicken Sie rechts hier Hit Control E J Peg Export Und jetzt wird es zu exportieren, weil wir diesen großen Hintergrund enthalten als auch, Nächste Raum Kombinationen. So haben Sie Wohnzimmer, Schlafzimmer, Küche, Küche, wählen Sie alle drei und Sie brauchen nicht Zehenauswahl Bild, weil wir es bereits ausgewählt. So haben wir Bild, Bild und Bild. Jetzt können Sie wie diese auswählen und in wie diese basiert in so, und stellen Sie es in, weil es den Namen aus dem Bild ersetzt, sobald es Moschee mit diesem Bild war . Wählen Sie sie einfach aus. Kid Control E J Peg Export. Und schließlich, lassen Sie uns diese letzte auswählen, die eine Videosteuerung e Hit Export ist. Und da bist du. Wie Sie sehen können, ist es wirklich einfach, alle diese Bilder zu exportieren. , Was wir hier haben,sind diese Sofas, also kannst du sie immer öffnen. Also für einen, also für zwei. Und Sie können auch eines dieser Hintergrundbilder auswählen. Also für drei, und halten Sie einfach Ihre Steuerbefehl Taste. Wählen Sie alle wie, so dass er E kontrolliert hatte und dann direkt hier ändern. Und das wird Kategoriebildschirm genannt. Also genau hier gelegen. Wählen Sie Ordner Hit X und nicht J Peg, aber PNG, weil alle von ihnen ver PNG Hit Export wird alle diese Bilder exportieren. Und wie Sie sehen können, ist es ziemlich einfach, zwischen diesen Bildschirmen zu wechseln, so dass Sie beide Kreise oder nur einen auswählen können , weil sie genau gleich sind. Sie können Materialien auswählen und Frame Circle Treffer-Steuerung E wählen, und Sie können sie zum Beispiel als PNG exportieren , aber es ist im Suchfilterbildschirm, also stellen Sie sicher, dass alle korrekt exportiert werden. So Suchfilter wählen Ordner Export und Sie können es exportieren. Das was? Nun, die Schaltflächen betrifft, können Sie sie auf zwei Arten exportieren, damit Sie den unteren Teil so exportieren können, wie er jetzt ist. So Control e und Sie können es als PNG wie so exportieren, Oder Sie können den Boden ohne Text darauf exportieren. Also ist es wirklich an Ihnen und an Entwickler zu entscheiden, wie sie wollen alle diese Next up haben wir Raumkombinationen, also würde er E steuern, um dieses Bild zu exportieren und wir können J pack dafür verwenden. So unsere eigene Kombination Bildschirm direkt hier aus Kombinationen auswählen und exportieren. Was wir hier brauchen, ist dieses Sofa so steuern e, wir können P und G Export verwenden. Was wir auch brauchen, sind diese Farben, also wählen Sie alle drei Farben. Steuerung E P und G ist in Ordnung. Sie können diese Karte BG exportieren, so steuern e exportiert PNG und Sie können auch diese Lampe exportieren, wenn Sie so direkt hier steuern e p und G Export wollen. Und da gehen Sie, Sie haben fertig, weil wir diese Farben in beiden Fällen kopiert und verwendet. Also lassen Sie uns auf ausgewählte Elemente Bildschirm gehen und was wir hier wollen, ist Bootshintergrund sowie Bild zu exportieren , so dass wir sie beide exportieren können. Diese PNG Control E und Sie können dies ändern, um ein Element wie diese wählen Ordner PNG Export ausgewählt werden . Was? Wir wollen auch unsere diese Farben. So wählen Sie Ihre Farben wie diese, die sicherlich s PNG. Das ist in Ordnung. Und schließlich, was wir wollen, sind diese beiden Bilder. Also dieses Bild sowie dieses Bild wird das Bild Nummer eins sein. Bild Nummer zwei, wählen Sie beide steuern E BMG Export. Und wir brauchen sie nicht im anderen Ordner. Sie können einfach alles nach unten kopieren und darauf aufbauen. Aber ich will es trotzdem schaffen. Also lasst uns Heldenbild verwenden. So Hauptstuhl Held, Bildsteuerung E S B und G nur einen Ordner geändert, weil dies ausgewählt Element angepasst. Hier ist es. Wählen Sie den Ordner Export und was wir wollen, sind diese Farben. Öffnen Sie also den Farbordner und jetzt können Sie die Vorteile aus diesen Ordnern sehen und alles richtig organisieren, weil Sie sehen können, wie das funktioniert gut. Und wie Sie sehen können, sind wir nur acht Minuten und wie viel wir bisher fertig. So können Sie wirklich viel einfacher damit arbeiten. Also steuert für den Knopf. Und schließlich, weil wir es vor Bild eins und Bild getan haben, so dass sie es leicht innerhalb dieses Ordners als auch zugreifen können . Und lasst uns schnell weitermachen und alles andere abschließen. Hier können Sie also einen Hintergrund auswählen, so dass Sie den Standort steuern und ändern. So ist dies die Bestelldetails wie so klicken Sie auf Ordner auswählen Export und Sie können diese Bilder zu finden . Also öffne deine Ordner, also Hauptstuhl. Also für eine Lampe ein Steuerelement E PNG Export, wir müssen auch auf diesen Boden exportieren. Kontrollieren Sie e wie so Und schließlich müssen wir diesen Rahmen exportieren. Also, wie können wir das tun? Sie können den Rahmen finden, Also hier ist es, genau hier, und Sie können es exportieren und einfach drücken Steuerung E s B und G Export. Und sie werden es platzieren, wie wir es jetzt getan haben. Aber im Code nebeneinander, und sie haben diese Symbole im Asset-Panel Text, den wir nicht exportieren. Sie können den Text auch exportieren, wenn Sie möchten. Aber ich fand, dass es nicht notwendig ist, weil es eine Zeitverschwendung ist und sie werden den Text im Mantel sowieso verwenden . Später. Für diesen Bildschirm, lassen Sie uns in Control E P springen und G ändern Zahlungen befindet sich dort, wo es genau hier ist. Wählen Sie den Ordner aus und exportieren Sie ihn. Also habe ich einen kleinen Fehler gemacht. Lassen Sie uns die Zahlung lokalisieren und den gesamten Bildschirm exportiert, was Sie tun können, wenn Sie möchten. Und ich werde Ihnen am Ende zeigen, wie Sie das auch tun können . Aber für jetzt, wir wollen die Craker auswählen, wollen Menschen und will, wie die untere Kontrolle E BMG Zahlungsexport. Und lassen Sie uns schnell überprüfen, ob es so ist, wie es sein sollte. Wenn ich also diese großartige Karte öffne, öffnet sie sich in meinem Bildbetrachter genau hier. Und wenn ich es auf den Bildschirm ziehe, können Sie es sehen. Speichern Sie es als PNG mit ah, transparentem Hintergrund und einem Schatten. Gehen wir weiter, um Standorte zu starten. Steuern Sie e Änderungsbereitstellungsdateien Speicherorte Wählen Sie den Ordner Hit exportiert gehen, um den gesamten Bildschirm zu exportieren. So speichern Standorte mit glauben, dass wirklich schnell Und was wir von hier wollen ist die Karte. So steuern Sie e PNG-Export. Und schließlich, was wir wollen, ist dieser Boden, wie er so befindet sich genau hier. So Richtungen wie so steuern e als G, weil sie es auch verwenden möchten, sowie diese Karte BeeGees und steuern E-Export und diesen Stop-Hintergrund. So steuern Sie e PNG-Export. Und da gehst du. Wir haben alles erstellt, außer für diesen Menübildschirm und darin. So können Sie einfach BG Hintergrundsteuerung E ändern. Hier finden Sie den Menüordner. Hier ist es. Wählen Sie den Ordner Hit Export Weil wir nur wollen, dass dieser Hintergrund von hier exportiert werden . Hat erklärt, bevor wir das Sex-Icon bereits vorbereitet haben. Also, das ist es für die exportierenden Assets, Teil des Diskurses. Und eine letzte Sache, die ich Ihnen zeigen möchte, ist, wie Sie einfach alle ihre Treffersteuerung auswählen können. Wieder mal. Sie können PNG verwenden, aber ich werde Jay Peak verwenden, ändern Sie die Ordnerbereitstellungsdateien und liefern sie einfach, um Hit Export zu hören, weil dieser Weg wird einfacher für Ihre Kunden als Vorschaltgerät Ihre Entwickler zu nehmen schauen Sie sich die Bildschirme an, wie sie sind. Und Sie können auch in jeden einzelnen Ordner springen und dieses Design in diesen bestimmten Ordner extrahieren . Nun, wenn Sie mehr als eine Größe haben, so ist diese für das iPhone 10 und 10 s. Aber wenn Siezum Beispiel fürTennis Max oder für jedes andere Gerät in der Zukunft enthalten haben zum Beispiel für , dann können Sie einen Ordner erstellen. Also lassen Sie mich schnell springen. Stellen Sie sicher, dass Sie innerhalb dieses Speicherortsordners beispielsweise beispielsweisediese Assets in verschiedenen Ordnern haben können, so dass jeder Ordner Unterordner haben kann, sodass Speicherorte Unterordner für iPhone 10 und Tennis, dann ein weiterer Ordner für iPhone. Tennis im Tennis, Max und so weiter und so weiter, damit Sie Ihre Organisation nicht mögen. Also wieder, sie haben die Assets, die alle Symbole enthält. Sie haben 10 verschiedene Ordner für 10 verschiedene Bildschirme, und sie haben die Vermögenswerte im Inneren, und schließlich haben sie Jay Peak Bildschirme hier. Also, wenn sie auf einen von ihnen doppelklicken. Sie können sie einfach öffnen und sie einfach so betrachten, wie sie hier sind. Also, das ist es für den exportierenden Asset-Teil. Und im letzten Video von diesem Siri. Ich möchte Ihnen zeigen, wie Sie ein Paket verdichten es undeseinem Kunden liefern, also sehe ich Sie dort. 37. Kundenservice: Wenn Sie also alles fertig haben, Sie Ihr Feedback erhalten. Sie haben Ihre Änderungen vorgenommen. Du hast alles so verpackt, wie du solltest. Alles ist in der richtigen Reihenfolge. Jetzt ist es an der Zeit gekommen, Tofino, dieses Projekt abzuschließen und es dem Kunden zu schicken. Endlich. Also, wie kannst du das tun? Minimieren Sie dies einfach. Ich werde diesen Ordner schließen. Hier sind sie, unsere Lieferdateien. Also im Inneren sollten Sie alle Ordner haben, die wir gerade im vorherigen Video erstellt haben. Und Sie sollten auch Ihre Adobe Eier verunreinigt haben. Was Sie auch haben sollten, ist eine Art von Textdatei. Es ist also entweder nur eine einfache textbasierte Datei, in der Sie den Link mit Ihrem Client teilen . So werden Sie den Link teilen, zum Beispiel, zum einzigen Prototyp. Wenn Sie Zehe wollen, glauben Sie ihnen, Zugriff auf sie für ein bisschen mehr Zeit, so dass ihr Entwickler die Zeit hat, alles richtig zu erstellen . Oder wenn Sie das nicht tun möchten, weil Sie nur einen Link haben und eine kostenlose Version von Adobe X'd haben . Sie müssen das nicht tun, weil sie bereits alles gesehen und bestätigt haben, was Sie ihnen Video gehen durch senden können . Wenn du willst. Aber wenn sie Adobe X eingelegt haben, klicken Sie einfach auf Vorschau und dann eine Vorschau, dass dieser Prototyp selbst. Es liegt also wirklich an Ihnen, wie Sie das strukturieren wollen. Auch innerhalb der Textdatei sollten Sie die Links auf die Schriftarten belassen. Also benutzten wir Open Sense Front und du solltest es verlassen. Sie sollten einen Link drinnen lassen. Ich habe es sehr verstanden. Also, wenn Sie es von Google-Telefonen bekommen, sollten Sie ihnen diesen Link senden. Wenn es von Adobe Forms donald, sollten Sie ihnen diesen Link senden. Auch alle Bilder, die Sie früher verwendet haben, viele Bilder innerhalb dieses Projekts, also sollten Sie ihnen Links zu diesen Bildern senden, nur damit Sie Ihren Speicherplatz freigeben können, um alles zu packen und alles per E-Mail zu senden, weil das die einfachste Weg. Wenn es für die E-Mail zu groß ist, können Sie Dropbox verwenden. Sie können Google Drive toe verwenden, laden Sie es dort hoch, und ich empfehle Ihnen immer, sie innerhalb der ZIP-Datei zu verpacken. Also in Windows kann ich einfach mit der rechten Maustaste auf WinZip klicken und zu Lieferdateien hinzufügen. Wenn ich rechts klicke, wird es beginnen, die Dateien zu packen. Es wird anfangen, die Dateien vorzubereiten und es geht um das Wichtigste in der ganzen Größe dieses Ordners, und es wird leicht für mich freibar sein. Also, wenn ich schnell ziehen diese nach unten, Original war 308 Megabyte. Jetzt ist es 294 Das klingt nicht nach viel, aber vertrauen Sie mir, wenn Sie zwei oder drei oder 500 Bildschirme haben und Sie sie in verschiedenen Auflösungen haben. Dies kann leicht bis zu einem Gigabyte Größe zerstören, besonders wenn Sie Bilder oder Illustrationen an unseren Kunden senden. Und diese können wirklich rasten und die Dateigröße drastisch erhöhen. Also empfehle ich immer das Paket von Dateien innerhalb der ZIP-Datei und klicken Sie auf OK, Und wenn ich es hier ziehe, so sieht es aus. Also schickst du diesen Valter-Client nicht. Sie senden diese Datei an zurücklehnen und sie verurteilten sie entpacken und verwenden alle Assets in Ihrem Client und Ihrem Entwickler. Das war's also für diesen Teil des Kurses. Vielen Dank, dass Sie sich Ihre Zeit nehmen, Ihr Geld und Ihre Ressource ist und in Inside off Diskurs investiert. Ich weiß es wirklich zu schätzen, und ich hoffe wirklich, dass Sie viel aus dem Diskurs gelernt haben. Und im nächsten Video werden wir schnell sprang oder einige Schlussfolgerungen, einen Überblick über alles, was wir bisher in dieser Partitur getan haben, und noch einmal, vielen Dank. 38. Links und Ressourcen: und schließlich möchte ich Links abdecken und Ressource ist so hier ist es eine PDF-Datei. Öffnen Sie es einfach, und sobald es auf Ihrem Bildschirm geladen wird, ist es hier. Sie können sehen, wie alles aussieht, und hier können Sie alle Ressourcen herunterladen, die im Kurs erwähnt wurden. So, zum Beispiel, hier ist der Open Science Fund. Sie können Oh puppen, dass entweder von Google-Telefonen oder von Adobe Fonts. Wie ich bereits im Kurs erwähnt habe, Klicken Sie einfach hier. Es wird Ihnen zeigen, dass Pop-Up Talek Klick erlauben, so dass Sie es über Ihren Internet-Browser zugreifen können . Unabhängig davon, welchen Browser Sie verwenden. Kostenlose Bilder, die Sie unberührt haben, weil alle Bilder verwendet werden, sind von einem Spritzer. Aber ich habe Ihnen auch die Aktien-Website zur Verfügung gestellt, die im Grunde die Website für freie Bilder ist. Kostenlose Symbole kostenlos mock up, Also alles, was Sie brauchen kostenlos ist in diesem die Aktien Website. Und schließlich, wenn du willst, kannst du auf meine anderen Klassen und Kurse zugreifen, entweder auf Skill Share oder auf du weißt, ich. Ich habe mehr über sie auf Fähigkeiten Anteil, weil von den Seiten Struktur, aber in der Zukunft werde ich mehr auf sie auf Sie hinzufügen, zu mir als auch. Also, danke. Noch einmal, ich hoffe wirklich, dass Sie diese Klasse genießen. Und ich hoffe wirklich, Sie genießen diese Ressource ist und dass Sie das Wissen , das Sie in dieser Klasse in ihre zukünftige Arbeit gewonnen anwenden . Kümmern Sie sich. 39. Schlussbemerkung: Herzlichen Glückwunsch. Sie haben das Ende dieser Klasse erreicht. Ich hoffe, Sie haben es genauso genossen wie ich. Ich hoffe wirklich, dass Sie viel gewalttätig davon bekommen. Und so wirklich wichtige Tipps, die Ihnen in Ihrer Designkarriere und in Ihren zukünftigen Projekten helfen werden. Das ist also unser abschließendes Projekt. So sieht die Datei aus, die Sie erhalten werden. Lassen Sie uns also schnell durchlaufen und uns daran erinnern, was wir in diesem Kurs behandelt haben. Also begannen wir mit dem Designbrief und offensichtlich haben Sie das schon gesehen und Sie haben diese Vorlagen erhalten . Sie können es für Ihre zukünftigen Projekte ausfüllen. Wir haben auch bedruckbare Drahtrahmen abgedeckt, die Sie ausdrucken können. Ich habe Ihnen gezeigt, wie Sie sie aussortieren können Zehe, bekommen wenige, oder um mehr Bildschirme für Ihre zukünftigen Projekte und Ihre zukünftigen druckbaren Drahtrahmen Zeichnungen zu bekommen . Und Sie haben gesehen, wie einige kleine Details Ihre Geschwindigkeit wirklich verbessern und Ihren Prozess verbessern können. Als nächstes haben wir Drahtrahmen abgedeckt und erklären Ihnen, wie Sie einige echte einfache Elemente wie Boxen und Rechtecke bestellen können , und wirklich etwas schaffen, das Ihren Designprozess vorantreiben wird, wenn Sie die Entwurfsphase. Und da wir von Designphase sprechen, in der wir die verschiedenen Bilder einbeziehen, zeigte ich Ihnen den Unterschied zwischen den P- und G's J-Pegs. Wie Sie einige verschiedene Schlagschatten einschließen können, wie Sie Farben in letzter Minute einschließen können. Diese Art von Prozessen und derartige Dinge werden also passieren, wenn Sie anfangen, Ihre eigenen Projekte zu entwerfen und in Ihren zukünftigen Projekten, vor allem mit größeren Kunden, weil sie ihre Meinung ständig ändern. Und zum Beispiel, sie mögen keine Farben von diesen Kreditkarten und PayPal-Konten. Es spielt keine Rolle. Sie können sie leicht ändern. Und was wirklich wichtig ist, ist, dass Sie gesehen haben, wie Sie Ihr Asset-Panel direkt hier in Ihnen außerhalb von Adobe X'd verwenden. Sie können wirklich Ihr Arbeitshemd schneiden und diese Farben und Stile auf verschiedene Elemente in Ihren Häfen anwenden . Und schließlich, am Ende, erreichten wir eine Prototyping-Phase, und ich habe Ihnen gezeigt, wie Sie einige einfache Übergänge und einfache Animationen bis hin zu einigen wirklich komplexen und schön aussehenden verwenden können . Und ich habe Ihnen ein paar Tipps und Tricks gegeben, wie Sie das noch weiter mit Ihrem eigenen Projekt verbessern können und endlich wiederhergestellt, wie Sie Ihre Arbeit mit dem Kunden Heiken teilen können Feedback dafür erhalten, wie Sie es teilen können mit ihnen in den letzten Phasen, sowie wie Sie diese Arbeit mit den Entwicklern teilen können und wie Sie mit ihnen über perfekte Dateitypen sprechen können , die sie benötigen, damit Sie Ihre Arbeit kurz schneiden können und Sie die Arbeit so schnell wie möglich beenden können , während die höchstmögliche Qualität zu bieten, wie sie brauchen. Also wirklich, das war's. Vielen Dank. Noch einmal für die Teilnahme an dieser Klasse hoffe ich wirklich, dass Sie etwas Neues lernen. Ich hoffe wirklich, Sie holen ein paar Tipps und Tricks hier und da. Und ich hoffe wirklich, dass Sie zumindest einen Teil davon in Ihrer zukünftigen Arbeit anwenden werden. Also vielen Dank nochmals und ich werde Sie im zukünftigen Kurs sehen. Achten Sie darauf, 40. YouTube-Kanal für mehr Inhalte: Hey, Designer Alex hier. Und ich wollte mich nur kurz bedanken. Vielen Dank, dass Sie den Diskurs genommen haben, und ich hoffe wirklich, dass Sie so viel Wert wie möglich daraus haben, wenn Sie mehr Inhalte überprüfen möchten . Ich habe vor kurzem meinen YouTube-Kanal gestartet, wo einige Themen erkundet, die Designer von Freiberuflern die passiven Einkommenstechniken aus Web-Design interessieren könnten , APP-Design. Sie entwerfen UX Design. Also, wenn Sie an einem dieser Themen interessiert sind, gehen Sie zu meinem YouTube-Kanal, verknüpfen Sie es unten in der pdf, und Sie können einfach dort klicken und es wird Sie zu meinem YouTube-Kanal führen. Wenn Ihnen diese Inhalte gefällt, stellen Sie sicher, dass Sie sich abonnieren und folgen, denn ich werde versuchen, wirklich regelmäßig mit diesem YouTube-Kanal zu sein und so viele Inhalte wie möglich hochzuladen . Also danke nochmals für meinen Kurs, und ich hoffe wirklich, Sie auf meinem Kanal Digger zu sehen 41. Begleite meiner kostenlosen Facebook-Gruppe: Hey, Designer, ich hoffe wirklich, dass dir der Kurs gefallen hat, und du hast so viel Wert wie möglich daraus gemacht. Wenn Sie noch mehr Wert von mir und von der Design-Community erhalten wollen, habe ich eine Facebook-Gruppe gegründet. Wo Sie beitreten können, ist nur eine Facebook-Gruppe für meine Schüler allein, so dass Sie teilnehmen können, indem Sie auf den Link unten Reihenfolge klicken. Nate off course ist ein Facebook-Konto, und es ist eine kostenlose Gruppe beitreten. Die Gruppe wird gebildet, um Ihnen zusätzliches Feedback zu geben, damit Sie Ihre Entwürfe anhängen können , indem Sie diesen Kurs befolgen und Beispiele aus diesem Kurs oder anderen Kursen verwenden . Oder wenn Sie Ihre eigenen Beispiele haben. Off-Design-Arbeiten aus der Vergangenheit aus der Gegenwart. Sie können diese Werke in die Facebook-Gruppe hochladen und dann Feedback erhalten, entweder für mich oder von anderen Designmitgliedern. Ich ermutige Sie auch, wenn Sie eine Stelle zur Verfügung haben, um sie in dieser Gruppe zu teilen, damit jeder von dieser Gruppe profitieren kann. Wieder einmal ist die Gruppe frei. Es ist einfach, sich anzumelden. Klicken Sie einfach auf den Link in der pdf, und ich erwarte wirklich, so viele von Ihnen wie möglich in dieser Gruppe zu sehen, nur um unsere Erfahrungen als Designer zu teilen , und ich werde versuchen, ein zusätzliches Video, einige zusätzliche Tipps und Techniken in diese Facebook-Gruppe. Aber im Moment fangen wir gerade erst an. Wir werden nur seine bilden, und ich ermutige Sie wirklich, beitreten und Ihre beste Arbeit dort zu teilen. Um andere Designer oder Zehe zu inspirieren, bitten Sie um zusätzliches Feedback. Stellen Sie einfach sicher, dass Sie, wenn Sie um Feedback bitten, nach bestimmten Dingen gefragt. Frag nicht einfach. Was hältst du von diesem Design? Weil niemand darauf antworten wird. Oder wenn sie es tun, sind sie auf Lee-Ding. Sie werden dir sagen, ob es schön aussieht oder es nicht schön aussieht. Stellen Sie sicher, dass Sie nach spezifischem Feedback zu Ihren Entwürfen fragen. Zum Beispiel, wie diese Farbkombination. Denkst du, ich sollte eine andere Front benutzen? Glauben Sie, dass diese Bilder entsprechen gut mit der Hintergrundfarbe, zum Beispiel, Dinge wie, So stellen Sie sicher, für spezifische Feedback fragen, wenn Ihre Entwürfe, denn es wird viel einfacher für mich und für andere Designer in dieser Gruppe, um Ihnen zu geben, sind spezifische Rückmeldungen, die Sie viel schneller verbessern können, dann indem Sie nur fragen, was? Alles von diesem Design. Also danke nochmals für meinen Kurs, und ich hoffe wirklich, Sie in Sichtweite von meiner Facebook-Gruppe Digger zu sehen.