Einführung UI/UX für Grafikdesigner: Adobe Xd

1. Trailer: Viele Designer wollen in UI/UX übergehen, aber es kann wirklich schwer sein zu wissen, wo ich anfangen soll und genau deshalb habe ich diese Klasse erstellt. Ich bin Maddy Beard und ich bin eine strategische Designerin in Denver, Colorado. Ich habe meinen ersten Start in Grafikdesign im Penn State Design Program, wo ich vor allem Branding, Print und Verpackungsdesign gelernt habe . Nach dem Abschluss arbeitete ich in einem Technologieunternehmen als Digital Designer entwarf E-Commerce-Websites für einige der weltweit führenden Einzelhändler. Dann entschied ich mich, für mich selbst zu arbeiten, damit ich mehr Verantwortung für die Projekte übernehmen konnte , an denen ich gearbeitet habe und auch mehr Flexibilität in meinem Leben und Karriere habe. Seit ich alleine losgegangen bin. Ich habe Branding, Webdesign und UI/UX-Design für kleine und mittelständische Unternehmen gemacht , einschließlich Commune, eine digitale Plattform für persönliches und gesellschaftliches Wohlbefinden, Yoga mit Adrian, eine Online-Yoga-Plattform mit über neun Millionen Abonnenten auf YouTube, WeFinance, einem Fintech-Unternehmen vor Ort in Denver und so viele mehr. Derzeit arbeite ich als Creative Resident für Adobe konzentriere mich hauptsächlich auf UI/UX-Design im Wellness-Bereich. Ich unterrichte auch UI/UX-Konzepte auf YouTube und Instagram , wo ich von so vielen Designern gehört habe, die daran interessiert sind, in UI/UX einzutreten, aber nicht genau wissen, wo ich anfangen soll. Studenten denken, dass sie Tausende von Dollar und Monaten Zeit in umfangreiche Bootcamps und UX-Kurse versenken müssen , und das ist einfach nicht der Fall. Deswegen freue ich mich sehr, diesen Kurs mit dir zu teilen. Ich glaube wirklich, dass Sie UI/UX nicht studieren müssen, um erfolgreich zu werden, Sie müssen es üben. Genau das werde ich dir in den nächsten Lektionen helfen. Wir werden uns mit den Grundlagen befassen, was UI/UX ist und welche Fähigkeiten darin enthalten sind. Dann gehen wir von Anfang bis Ende in den gesamten UX-Prozess ein. Ich kann es kaum erwarten, dass du mehr Vertrauen in deine Fähigkeiten gewinnst , während wir diese Lektionen durchlaufen. Lasst uns loslegen. 2. Projektübersicht: Das Projekt für diese Klasse ist das Entwerfen einer einzigartigen mobilen App-Funktion mit Adobe XD. Lassen Sie sich nicht davon täuschen, dass Sie eine völlig neue Erfahrung von Grund auf neu gestalten müssen , um Ihre Fähigkeiten in Ihrem Portfolio zu präsentieren. In der Tat denke ich, dass es als Anfänger effektiver ist, wirklich zu schärfen und sich bewusst auf ein Feature oder einen Fluss zu konzentrieren. Dieses Projekt ermöglicht es Ihnen, den gesamten UX-Prozess von Anfang bis Ende abzuschließen. Zuerst definieren Sie das Problem. Anschließend können Sie Übungen wie Affinitätszuordnung und Skizzieren durchführen, Ihre Adobe XD-Datei einrichten, diese Skizzen in digitale Drahtmodelle umwandeln und dann Ihre Lösungen entwerfen und Prototypen erstellen. Zuletzt nehmen wir diese letzten Prototypen und verwandeln sie in ein visuell ansprechendes Video, das Sie in Ihren Portfolios verwenden können. Wenn das super überwältigend klingt, mach dir keine Sorgen. Ich werde Ihnen jeden Schritt des Weges und mein eigenes persönliches Projekt mit Ihnen teilen, sowie Tipps, die ich im Laufe der Jahre gelernt habe. Mein erster Tipp für den Erfolg ist, diesen Prozess Schritt für Schritt zu machen und Ihre Arbeit weiter unten zu teilen, damit wir uns während dieser Reise gegenseitig unterstützen und ermutigen können . Wenn das alles aus dem Weg ist, lasst uns in die 1. Lektion springen. 3. Was genau ist UX?: Bevor wir in diesen ganzen Prozess eintauchen, möchte ich mich etwas Zeit nehmen, um genau zu definieren, was UI/UX-Design ist und einige andere relevante Begriffe. Beginnen wir mit dem übergeordneten Thema User Experience Design. Wenn jemand sagt, dass er ein UX-Designer ist, könnte er Dinge wie Benutzeroberflächendesign, Benutzerfreundlichkeit, Barrierefreiheit, Informationsarchitektur und Mensch-Computer-Interaktion angehen . Ein UX-Designer stellt alle diese Teile zusammen, um ein System zu entwerfen , das einem Benutzer eine hilfreiche Erfahrung ermöglicht. Ein User Interface oder UI Designer ist ein wenig eher ein spezifischer Begriff; das ist jemand, der die eigentliche Oberfläche entwirft und wie sie für den Benutzer aussieht. Um noch granularer zu werden, lassen Sie uns definieren, was eine Schnittstelle eigentlich ist, weil viele Leute denken, dass eine Schnittstelle nur ein Bildschirm ist. kann es viel weiter gehen. Eine Schnittstelle ist das Mittel, mit dem wir als Mensch mit der Maschine kommunizieren oder interagieren. Beispiele für Schnittstellen sind ein Computer und eine Tastatur, ein Touchscreen , ein Geldautomaten sowie sprachbasierte Benutzeroberflächen wie virtuelle Assistenten. Ein anderer Begriff, von dem Sie vielleicht gehört haben, ist das Produktdesign. Produktdesign fällt unter die gleiche Kategorie von User Experience Design, aber es ist spezifisch für ein Produkt, entweder digital oder physisch. Benutzerfreundlichkeit und visuelles Design sind beide sehr wichtig, egal ob Sie etwas Digitales oder Physisches entwerfen. Produktdesigner müssen oft die Ziele und Ziele sowohl aus geschäftlicher als auch aus Sicht des Benutzers abwägen , und sie arbeiten in der Regel eng mit einem Produktmanager und einem Ingenieur zusammen. Ein weiterer allgemeiner Begriff, von dem Sie vielleicht gehört haben, ist das Interaktionsdesign. Das ist noch spezifischer. Es ist wichtig für UX-Designer, UI-Designer und Produktdesigner gleichermaßen. Es ist ehrlich, genau das, wonach es sich anhört. Es geht darum, die Interaktion zwischen dem Produkt und der Person zu gestalten , die das Produkt verwendet. Interaktionsdesigner müssen über die verwendeten Wörter, dievisuellen Darstellungen, die sie verwenden, die physischen Objekte,die Teil einer Interaktion wie eine Maus oder ein Trackpad sind, nachdenken visuellen Darstellungen, die sie verwenden, die physischen Objekte, . Sie müssen die Zeit in Betracht ziehen, die mit Animation, Video und Sounds ins Spiel kommt, und sie müssen über Verhaltenspsychologie nachdenken, was bedeutet, wie der Mensch tatsächlich lernen und verstehen kann , wie er mit dem -Schnittstelle. Customer Experience ist eine weitere wichtige Sache, die zu berücksichtigen ist, und es ist etwas, auf das sich einige UX-Designer konzentrieren und andere nicht. Es beginnt immer dann, wenn der Kunde einen Bedarf hat, und es endet, wenn die Bedürfnisse des Kunden tatsächlich erfüllt werden. Airbnb ist ein großartiges Beispiel. Jemand entscheidet, dass sie in den Urlaub gehen wollen. Die ganze Erfahrung von Anfang bis Ende ist wirklich wichtig. Abholung der Schlüssel, Interaktion mit dem Gastgeber, was sie tun müssen, um den Ort am Ende des Urlaubs zu reinigen und auszuchecken. All diese Dinge sind rund um die Kundenerfahrung, und sie sind wirklich wichtig zu berücksichtigen und tatsächlich zu entwerfen, wenn Sie kommen mit einem Produkt, das auf dem Bildschirm und in der realen Welt existiert, was die meisten Produkte tun. Letzter wichtiger Begriff, den ich dachte, ich würde erwähnen, ist Design Thinking. Design Thinking ist im Grunde nur ein kreisförmiger Prozess, über den alle Designer ständig nachdenken und durchführen sollten. Es beginnt mit Empathisierung, dann gehen Sie in die Definition, nächstes werden Sie ideieren, dann Prototyp und Test, und Sie werden normalerweise zwischen Prototyping, Testing, Prototyping und Test zurückgehen , und Sie könnten sogar springen hin und her zu einigen der früheren Schritte als auch. Es ist ein großartiger Rahmen, über den wir nachdenken müssen, und es ist definitiv irrelevant in dem Prozess, den wir in dieser Klasse angehen werden. Es gibt keinen Handlungsschritt für diese Lektion, aber wenn Sie nur etwas über UX als Karrierechancen lernen, dann fühlen Sie sich frei, einige Zeit mit der Suche nach Stellenausschreibungen zu verbringen. Ich finde, dass, wenn Sie irgendwann einen Job in UX bekommen wollen, es wichtig ist zu wissen, wonach Arbeitgeber in Bezug auf Fähigkeiten und Erfahrungen suchen. Suchen Sie einfach UX Designer oder Produktdesigner auf einer Stellenausschreibung und schauen Sie sich an, welche Arbeitgeber nach Jobs suchen , die Sie in Zukunft interessieren könnten. Lassen Sie sich nicht davon einschüchtern. Wahrscheinlich stehen Sie gerade am Anfang Ihrer Reise, also versuchen Sie einfach, dies einen Schritt nach dem anderen zu machen. Der erste Schritt besteht darin, Ihr allererstes Projekt zu erstellen. Lassen Sie uns damit in der nächsten Lektion beginnen. 4. Ein Problem definieren: Der erste und wohl wichtigste Schritt in einem guten Designprojekt ist die Definition des Problems. Immer wenn Sie einen Auftrag bei der Arbeit oder von einem Kunden erhalten, werden Sie normalerweise das Problem mithilfe umfangreicher Grundlagenforschung definieren, was bedeutet, dass Sie mit Stakeholdern und Benutzern sprechen und herausfinden, was die Ziele und Ziele sind. und priorisieren Sie diese. Aber wenn es darum geht, Praxisprojekte zu erstellen, wie wir es in dieser Klasse tun, ist der Prozess zum Definieren des Problems einfach. Sie bemerken ein Problem in Ihrem Alltag oder durch das Gespräch mit Ihren Kollegen und dann untersuchen Sie es weiter, um eine prägnante Problemaussage zu schreiben. Um mir zu helfen, in die Gewohnheit zu kommen, potenzielle Probleme und Chancen um mich herum zu bemerken, habe ich wirklich gerne ein Notizbuch, wo ich diese Dinge notiere, wenn sie zu mir kommen. Manchmal ist es, wenn ich ein Programm verwende. Manchmal ist es, wenn ich versuche, etwas für die Arbeit zu erledigen. Manchmal ist es, wenn ich nur mein tägliches Leben lebe und andere Zeiten, dann wenn ich Gespräche mit meinen Freunden und Familie führe. Diese Probleme müssen nicht groß oder lebensverändernd sein. Sie können wirklich alles sein. Wenn Sie in einem Notizbuch keine Probleme haben, wie ich, dann, um das Problem zu lösen, was Sie tun können, ist, über bestimmte Kategorien oder Bereiche oder Branchen nachzudenken , die Sie wirklich interessieren. Man könnte über spezifische Probleme nachdenken, die damit zu tun haben kreativ zu sein, Student zu sein oder Sport zu treiben. Vielleicht gibt es Probleme im Zusammenhang mit Wellness, Essen, Transport oder Produktivität. Ein Tipp für diese Klasse ist, zu versuchen, sich von Einkaufserlebnissen oder Problemen in diesem Raum fernzuhalten . E-Commerce-Website-Neudesigns sind extrem verbreitet und meiner Meinung nach sind sie wirklich langweilig, weil sie Ihre Problemlösungsmuskulatur nicht ausüben. In den meisten Fällen ist das Ziel das gleiche, nur um mehr Produkte zu verkaufen. Versuchen Sie für Ihr Problem, etwas außerhalb dieser Welt und Bonuspunkte zu denken, wenn Sie Ihr Problem validieren oder beweisen möchten, dass es sich lohnt, durch ein wenig Hintergrundforschung zu lösen. Um dies zu tun, wollen Sie im Grunde nur Beweise sammeln, dass dies ein Problem ist, das genug Menschen erleben, dass es sich lohnt, zu lösen. Sie könnten dies tun, indem Sie Reddit Foren, Facebook-Gruppen, anekdotische Beweise, Gespräch mit Freunden und Familie. Sie können auch Marktforschung durchführen, um herauszufinden ob jemand bereits versucht hat, dieses Problem zu lösen. Wenn ja, bedeutet das nicht unbedingt, dass Sie es nicht in Angriff nehmen sollten. Das validiert Ihr Problem tatsächlich, weil es etwas ist , das jemand anderes für wichtig genug hält, um daran zu arbeiten. Was Sie tun können, ist ihre Lösung zu erkunden und zu sehen, was Sie daraus lernen können. Lassen Sie uns nun darauf eingehen, wie Sie Ihre Problemaussage tatsächlich schreiben können. Es gibt ein paar Dinge, die jede gute Problemaussage hat. Der erste ist ein wenig Kontext, der die Szene dafür setzt, warum das Problem jetzt wichtig ist. Als Nächstes gilt das Wer, wer dieses Problem hat und daher wer von einer Lösung profitieren würde. Als nächstes ist der Wunsch oder das Bedürfnis, das diese Person hat. Was wollen oder brauchen sie, was sie derzeit nicht haben? Schließlich, was hält diese Person davon ab, diesen Wunsch oder das Ziel zu erreichen? Schauen wir uns die Problematik an, die ich für diese Klasse angehen werde. Die Menschen essen heute öfter als je zuvor zu Hause. Arbeitende Millennials wollen gesunde Mahlzeiten kochen und essen, aber sie sind beschäftigt und die Essensplanung kann mühsam sein. Sie brauchen eine Möglichkeit, den Prozess zu rationalisieren und Teil der Zeit und Mühe zu nehmen. Beachten Sie, dass diese Problemanweisung nichts mit der Lösung zu tun hat. Es gibt keine Hypothese, welche Form die Lösung annehmen könnte. Es gibt einfach das Problem und es beantwortet die vier Schlüsselbereiche, über die wir zuvor gesprochen haben. Indem man sagt, dass die Menschen heute häufiger als je zuvor zu Hause essen, setzt das den Kontext und erklärt, warum dieses Problem jetzt wichtig ist. Es erwähnt arbeitende Millennials und dann beschreibt es später auch, dass diese Leute beschäftigt sind, was eine Möglichkeit ist, das Wer in der Erklärung anzugeben. Es spricht darüber, was sie wollen. Es sagt, sie wollen kochen und essen mehr gesunde Mahlzeiten zu Hause. Es spricht darüber, was ihnen derzeit im Weg steht. Essensplanung ist zu mühsam für Leute, die nicht jede Menge Freizeit haben. Nun lade ich Sie ein, darüber nachzudenken, welches Problem Sie für den Rest dieser Klasse lösen werden. Meine Tipps für diesen Schritt sind, halten Sie die Problemaussage wirklich spezifisch, aber seien Sie nur spezifisch über das Problem. Führen Sie die Lösung noch nicht ein. Sprechen Sie nichts über eine mobile App. Konzentrieren Sie sich einfach auf die Notwendigkeit oder Gelegenheit. Für die Praxis würde ich tatsächlich empfehlen, fünf oder 10 Problemaussagen aufzuschreiben und dann eine zu wählen, die für Sie am interessantesten ist, um voranzukommen. Sobald Sie Ihre Problembeschreibung haben, kopieren Sie sie und fügen Sie sie ein und teilen Sie sie mit der Klasse, damit wir Ihnen Feedback geben können. Wenn Sie Probleme haben, mit einem eigenen Problem zu kommen, ist das völlig okay. Nun werde ich ein paar mehr für mein Notizbuch teilen, die Sie stehlen oder ein wenig ändern und für dieses Projekt verwenden können. Die erste Problemaussage ist, dass es heutzutage unglaublich ist, wie einfach es ist, Menschen zu treffen man ohne das Internet nie getroffen hätte. Zwei College-Studenten treffen sich zum Kaffee, aber sie sprechen nicht die gleiche Sprache. Sie wollen sich kennenlernen, aber sie sind nervös, dass sie wegen der Sprachbarriere keine Verbindung herstellen können. Ein anderer besagt, wenn Sie in eine neue Stadt umziehen, ist es einfach, wegen der Karten Apps zu umgehen, aber das macht es schwieriger, tatsächlich über eine neue Umgebung zu lernen. Wie konnten junge Berufstätige, die in eine neue Stadt ziehen ihren Weg lernen, während sie dorthin gelangen, wo sie hinwollen. Die letzte Problemaussage ist, dass die Menschen heutzutage lernen, wie wichtig es ist, Second-Hand einzukaufen und aufhören, zu Fast Fashion und schädlichen Arbeitspraktiken beizutragen, aber es kann schwierig sein, dies in der Praxis zu tun. Wie könnte eine 20-teilige Frau ihre neue New York City Wohnung mit Second-Hand-Möbeln und Dekor dekorieren , ohne stundenlang Forschung in der Second-Ladenjagd machen zu müssen . Wie ich schon sagte, zögern Sie nicht, eines davon zu stehlen oder es einfach als Inspiration zu verwenden, um Ihre eigenen zu schreiben. Als nächstes werden wir alles über Affinitäts-Mapping lernen und eine meiner Lieblings-Übungen machen, aber Sie brauchen eigentlich kein Team, um es abzuschließen. 5. Empathy Mapping: Normalerweise erfolgt das Affinitäts-Mapping mit Gruppen von Personen, die an einem Projekt zusammenarbeiten. Normalerweise haben sie alle Notizen und Erkenntnisse gesammelt und sie kommen zusammen und verwenden diese Affinitätskarte Übung, um alles zu organisieren, was sie gefunden haben. Doch als Freiberufler und als jemand, der normalerweise der einzige Designer oder Produktmann im Team ist , mache ich diese Diagrammübungen normalerweise selbst und finde immer noch immensen Wert in ihnen. Ich werde Ihnen meine Lieblingsmethode zeigen, um dieses Solo zu tun , so dass Sie es auch für Ihr Produkt tun können. Es nennt sich Empathie Mapping. Es ist eine großartige Möglichkeit, sich in die Schuhe Ihres Benutzers zu versetzen und mehr Einblicke in den Problembereich und den Benutzer zu sammeln. Zuerst müssen Sie bestimmen, wer Ihr Benutzer ist. Wenn Sie Ihre Problemaussage geschrieben und die Richtlinien in der vorherigen Lektion befolgt haben, dann sollte dies wirklich einfach sein. Für mich funktioniert es Millennials. Fühlen Sie sich frei, dieser Person einen Namen, Alter, Beruf, vielleicht eine einzeilige Beschreibung zu geben , um die Persona zum Leben zu erwecken. Ich werde meine Person Phoebe nennen. Nehmen wir an, sie ist 29 Jahre alt und arbeitet zu Hause als Produktmanagerin für ein Technologieunternehmen. Bonuspunkte, wenn Sie tatsächlich in der Lage sind, ein paar verschiedene Personen zu interviewen , die in Ihre Zielgruppe fallen. Auf diese Weise können Sie ein wenig mehr über sie erfahren, was sie täglich tun und vor allem, wie sie derzeit mit diesem Problem umgehen. Wenn nicht, ist das völlig in Ordnung, das ist nur ein Übungsprojekt. Aber Sie müssen vielleicht ein wenig erreichen, wenn es um diese nächste Übung geht, vor allem, wenn Sie selbst nicht in die Ziel-Benutzergruppe fallen. Als Nächstes ist es an der Zeit, die verschiedenen Kategorien unserer Empathiekarte einzurichten. Gehen Sie vor und nehmen Sie acht Haftnotizen oder acht Stück Papier, wenn Sie keine Haftnotizen griffbereit haben, und schreiben Sie die folgenden Überschriften; Ziele und Einschränkungen, sagen, denken und fühlen, sehen, hören, Aufgaben und Aktionen, Ablenkungen, Motivationen und Frustrationen. Jetzt ist es an der Zeit, Brainstorming zu machen. Normalerweise finde ich es am einfachsten, mit Zielen und Zwängen zu beginnen. Aber danach ziehe ich mich gerne um und schreibe einfach auf, was zu mir kommt, und kategoriere das dann, wenn ich gehe. Ich werde versuchen, mich in die Schuhe des Benutzers zu setzen und tatsächlich so tun, als würde ich versuchen, dieses Ziel zu erreichen. Ich sehe nur, was kommt, und ich notiere es und lege es in die Kategorie, die es am sinnvollsten macht. Nach einer Weile werde ich jede dieser Kategorien mit mindestens fünf Post-Its oder Aufzählungspunkten füllen , wenn Sie ein Stück Papier verwenden. Okay, schauen wir uns meine Empathie-Karte an, damit du sehen kannst, wie das zusammenkommt. Zuerst werden wir uns Ziele und Zwänge ansehen. Ich schrieb auf, dass das Ziel sein könnte, mehr hausgemachte Mahlzeiten zu essen, einen gesünderen Lebensstil zu leben, um sich wohl zu fühlen, tatsächlich die Mahlzeiten zu machen, die sie auf Pinterest oder Instagram speichert, um weniger Uber Eats zu bestellen. Dann sind die Einschränkungen, dass sie von zu Hause aus beschäftigt ist und sie nur einmal pro Woche Zeit zum Einkaufen hat, normalerweise an den Wochenenden. Nun gehen wir weiter, um zu sagen, zu denken und zu fühlen. Das könnten Dinge sein, die sie den Menschen um sie herum laut sagt, Dinge, die sie für sich selbst denkt, oder Wege, die sie über dieses Problem empfindet. Vielleicht sagt oder denkt sie zu sich selbst : „Was mache ich diese Woche zum Abendessen? Wo habe ich das Chili-Rezept wieder gesehen? Ich glaube, ich habe vergessen, es zu screenshot. Was muss ich kaufen, um all diese Mahlzeiten zubereiten zu können?“ Ich schrieb auf, dass sie hungrig und überwältigt sein könnte. Jetzt gehen wir weiter, um zu sehen. Was könnte Ihr Benutzer um ihn herum sehen? Ich schrieb viele Produkte im Lebensmittelgeschäft, Zutaten auf der Theke, einen leeren Kühlschrank und Rezepte auf Instagram, Pinterest und anderen Blogs. Dies hilft wirklich, nur die Szene zu setzen und es könnte später eine wirklich kreative Lösung inspirieren. Versuchen Sie einfach, sich in die Schuhe Ihres Benutzers zu setzen und darüber nachzudenken, was er bei jedem Schritt des Weges sehen könnte. Lasst uns weitermachen, um es zu hören. Ich sagte, dass Phoebe vielleicht in der Pfanne brutzeln hört, mit der sie kocht. Vielleicht hört sie einen Podcast, den sie hört, während sie kocht. Sie könnte hören, wie der Küchentimer losgeht. Ihr Partner fragte sie, was zum Abendessen ist. Vielleicht hängen Freunde im Wohnzimmer rum. Als nächstes sind Aufgaben und Aktionen. Dies sind Dinge, auf die sie während des gesamten Prozesses des Kochens Maßnahmen ergreifen müssen . Ich habe Rezepte aufgeschrieben, Rezepte speichern, Rezepte für die nächste Woche wählen, eine Lebensmittelliste basierend auf diesen Rezepten machen, nach Lebensmitteln einkaufen und dann das Essen kochen. Diese sind ziemlich selbsterklärend, aber sie werden wirklich nützlich sein, wenn Sie Ihren Benutzerfluss erstellen. Als nächstes reden wir über Ablenkungen. Dies ist, wenn es wirklich wichtig ist, über Ihren spezifischen Benutzer nachzudenken. Für mich könnte Phoebe von einfachen Speisen wie Tiefkühlkost oder Uber Eats abgelenkt werden. Sie könnte von ihrem Partner abgelenkt werden, der von zu Hause aus arbeitet. Sie kann durch ihre eigene Arbeit und E-Mails sowie durch den Fernseher, YouTube oder soziale Medien abgelenkt werden. Als Nächstes werden wir darüber nachdenken, was ihre Motivationen sind. Warum ist das etwas, das ihr so wichtig ist? Ich schrieb auf, dass Ernährung wichtig für sie ist, gesund zu fühlen und auszusehen, Energie zu haben, Kochkünste und Routinen zu kultivieren, den Akt des Kochens als eine Möglichkeit, sich von ihrem Arbeitstag abzuschließen, und vielleicht Influencer online motivieren sie. Schließlich haben wir Frustrationen. Dies ist auch eine der wichtigsten Kategorien, weil es wird Ihnen sagen, welche Arten von Dingen zu vermeiden und welche Arten von Dingen, die Sie Ihrem Benutzer die Fähigkeiten geben, um zu umgehen. Ich schrieb auf, dass Phoebe wirklich frustriert ist, wenn alle ihre Rezepte an völlig unterschiedlichen Orten sind. Sie ist frustriert, wenn sie zu oft einkaufen muss. Sie mag es nicht, immer wieder die gleichen Mahlzeiten zu essen. Sie wird frustriert, wenn sie sich danach fühlt, aufzugeben, denn Hause kochen und gesund zu essen braucht zu viel Mühe. Sie wird frustriert, wenn Essen verdirbt, und sie hasst diese lästigen Pop-up-Anzeigen, die immer auf Lebensmittel-Blogs kommen, wenn sie nach Rezepten sucht. Alles klar, jetzt bist du dran. Gehen Sie voran und füllen Sie Ihre Empathiekarte mit so vielen Dingen, wie Sie nur können. Versuchen Sie nicht, sich selbst zu filtern oder sich selbst zu beurteilen, denn einige der Dinge, die Sie nicht für wichtig halten könnten später im Prozess tatsächlich etwas auslösen. Wenn Sie fertig sind, machen Sie ein Foto und teilen Sie es unten. In der nächsten Lektion werden wir uns in eine meiner Lieblingsphasen begeben , die Skizzen ist. Spoiler-Alarm, Sie müssen nicht gut im Zeichnen sein, um dies zu tun. 6. User Journey und Skizzieren: Skizzieren ist mein Lieblingsteil in fast jedem Projekt, denn es ist, wenn unsere Ideen die freifließendsten und iterativsten sein können. Das Ziel ist es nicht, die perfekte Lösung zu finden oder die einzigartige Schnittstelle zu schaffen, oder die perfektesten Formen zu zeichnen, es ist wirklich nur experimentell zu sein. Aber du denkst vielleicht, woher soll ich wissen, was ich skizzieren soll? Nun, bevor wir anfangen zu skizzieren, gehen wir zurück und untersuchen unsere Empathie-Karte, um zu versuchen, mit dem einen Feature oder Benutzerfluss zu kommen , der unser Problem am effektivsten lösen wird. Mit anderen Worten, wenn Ihre App nur eine Sache tun könnte, was wäre es? Für das Problem, an dem ich arbeite, denke ich, dass diese Funktion darin besteht, eine Liste von Lebensmitteln für jemanden zu generieren , der Rezepte aus dem ganzen Web gesammelt hat. Ich kam zu diesem Schluss, indem ich durch meine Empathie-Karte und sah, dass eine Menge der Notizen, die ich nahm und in verschiedenen Kategorien, alle kamen zurück und hatte mit diesem Thema zu tun eine Einkaufsliste basierend auf Rezepten gefunden alle über. Das ist meine Hypothese. Wenn arbeitende Millennials eine Möglichkeit hatten, eine Lebensmittelliste basierend auf einer Woche Rezepte aus verschiedenen Quellen zu generieren . Sie kochten und essen häufiger gesunde Mahlzeiten zu Hause. Wenn wir uns an die erste Lektion erinnern, wann immer wir über Designdenken gesprochen haben, können wir uns dieses Projekt als eine Möglichkeit vorstellen, diese Hypothese zu testen. Wir können diese Funktion Prototypen erstellen und sie vor den Benutzern stellen, um zu sehen ob es ihnen tatsächlich hilft, zu Hause gesündere Mahlzeiten zu kochen und zu essen. Oder wir können es einfach als Praxisprojekt verwenden. Jetzt, da ich weiß, auf welche Funktion ich mich konzentriere, kann ich voran gehen und meine User Journey abbilden. Wo fängt es an, wo endet es? Was sind die wichtigen Mittelpunkte, die wirklich dazu beigetragen haben, die Lücke zu überbrücken? Beginnen wir mit dem Anfang und dem Ende. Ich denke, der Prozess für mich würde beginnen, wenn ein Benutzer ein Rezept online findet, das er in der nächsten Woche machen möchte, und sie würden wollen, dass es mit einer generierten Lebensmittelliste endet. Die mittleren Schritte könnten zuerst ein Rezept speichern. Vielleicht möchte der Benutzer es als Abendessen oder Mittagessen oder Wüste kategorisieren, und dann tatsächlich planen ihre Mahlzeiten, durchsuchen alle gespeicherten Rezepte und wählen diejenigen, die sie in der kommenden Woche machen wollen. Ich habe auch am Ende bemerkt, wo die Liste generiert wird, dass Sie die Liste möglicherweise auf verschiedene Arten kategorisieren möchten, basierend darauf, wie Sie einkaufen könnten, und Sie möchten auch in der Lage sein, Dinge, die Sie bereits zu Hause haben, auszuchecken. Nun ist diese Karte, die Sie erstellen, Ihr Leitfaden für Ihre Skizzen. Da ich vier Hauptschritte in meiner Reise habe, werde ich wahrscheinlich etwa vier Hauptbildschirme haben, vielleicht mehr abhängig von den Details. Lasst uns nun in den Skizzierprozess einsteigen. Wann immer ich mit dem Skizzieren beginne, beginne ich gerne mit dem Bildschirm, der sich gerade am wichtigsten anfühlt. Manchmal ist dies der erste Bildschirm, weil Sie wissen möchten, wo Ihr Benutzer beginnt. Manchmal ist das der letzte Bildschirm, weil das normalerweise das Ziel ist , das Sie für Ihren Benutzer am Ende erreichen möchten, mache ich es so, weil die Beziehung zwischen den Bildschirmen viel wichtiger ist als die einzelnen Bildschirme selbst. Deshalb sprechen wir davon als eine Reise. Wenn es für den Benutzer nicht intuitiv ist, sich durchzubewegen, wird es ihnen nicht helfen, ihr Ziel zu erreichen. Während ich skizziere, werde ich einige meiner Top-Tipps zum Skizzieren erklären, und dann werde ich Sie durch meine Skizzen führen, damit Sie sehen können , wie ein echtes Beispiel zum Leben erwacht. Tipp Nummer 1 ist es, eine iPhone druckbare Vorlage zu verwenden, wenn Sie etwas Zeit sparen möchten. Wie Sie sehen können, mache ich das hier und ich werde diese Ressource verknüpfen , wenn Sie sie für Ihr Produkt verwenden möchten. Tipp Nummer 2 konzentriert sich mehr auf den Inhalt als das Design in diesem Stadium. Was muss auf dem Bildschirm sein? Im Allgemeinen, wo sollte es sein und wie bewegt sich der Benutzer von Punkt A nach Punkt B? Tipp Nummer 3, haben Sie keine Angst, chaotisch zu sein und Notizen an den Rändern zu machen. Diese Skizzen müssen nicht hübsch sein. Sie sind wirklich nur ein Werkzeug, das Sie verwenden können, wenn Sie in Adobe XD einsteigen. Tipp Nummer 4, skizzieren Sie jeden Bildschirm mehrmals. Bleiben Sie iterativ und bleiben Sie nicht bei Ihrem allerersten Versuch stecken. Es braucht Übung, und ich meine nicht nur Praxis als Designer, sondern speziell, üben Sie die Arbeit an diesem exakten Designproblem. Tipp Nr. 5, teilen Sie Ihre Skizziersitzungen so auf, dass Sie mindestens eine Pause dazwischen haben. Sie können mit einem klaren Kopf und einer frischen Perspektive zurückkommen , um zu bewerten und weiter zu iterieren, und Tipp Nummer 6, wenn Sie sich jemals verloren fühlen, kommen Sie einfach zu Ihrer Problemaussage zurück. Sie können sehen, dass diese Skizzen überall sind und sie sehen überhaupt nicht schön aus. Ich habe diese nummeriert, so dass ich im Grunde, wenn ich einen Bildschirm erneut versuche, es als Nummer 2 nummeriere. Wenn ich dann aufgebe und es erneut versuche, nummeriere ich es als Nummer 3, und auf diese Weise, wenn ich zurückgehe, weiß ich, welche ich zuerst gemacht habe und welche ich zuletzt gemacht habe, weil normalerweise der letzte, den ich skizziere, der erfolgreichste ist. Diese werden viel mehr Sinn machen, wenn ich sie in XD zum Wireframe bekomme. Aber im Moment werde ich nur darauf hinweisen, all die verschiedenen Arten von Bildschirmen, die ich habe. Ich habe den Startbildschirm, der Rezepte gespeichert wird. Die Rezepte sind nach Abendessen, Mittagessen, Wüsten kategorisiert. Du könntest sie nach allem kategorisieren. Ich habe einige Notizen auf der Seite, die sagen kopieren Link von Instagram, Pinterest, Blog, etc. Dann inspirierte mich, einen Bildschirm zu machen, wo Sie tatsächlich in den Link einfügen, und das ist, was das hier ist. Sobald Sie ein Rezept gemacht haben, würde es eine Vorschau davon erzeugen, wie dieses Rezept aussehen wird. Sie können aus Bildern auf der Rezeptwebseite selbst auswählen. Für das Miniaturbild, das Sie verwenden wollten, würde es die Zutaten aufrufen und Sie könnten den Rezepttitel bearbeiten, Sie könnten die Zutaten bearbeiten, und es würde dann die Anweisungen anzeigen. Dies speichert das Rezept für Sie, so dass Sie, wenn Sie zum Kochen gehen, auch dieses Backup öffnen und verwenden können. Sobald das alles gut aussieht, können Sie auf „Speichern“ klicken. Wenn Sie dann auf „Speichern“ klicken, werden Sie aufgefordert, eine Kategorie auszuwählen, in die diese Mahlzeit aufgenommen werden soll. Abendessen, Mittagessen, Wüsten, und natürlich können Sie jede Kategorie erstellen, die Sie wollen, indem Sie auf „Neu“ tippen, die dann die Tastatur für Sie öffnen würde, um eine neue erstellen. Ich wurde von Pinterest inspiriert, denn wann immer du einen Pin speicherst, speicherst du ihn auf dem Pinnwand, das du willst, und du kannst immer eine neue erstellen. Das ist eine wirklich ähnliche Interaktion dort. Sie können die Aktionen, die Sie auf diesem Bildschirm mit gespeicherten Rezepten ausführen können, sehen , ein neues Rezept hinzuzufügen, das dann dieses Modal aufruft, dem Sie eine URL aus einem Rezept einfügen können, das Sie aus dem Web kopiert haben. Hier unten können Sie auch eine Liste erstellen. Wenn Sie darauf geklickt haben, dann würden Sie zu diesem nächsten Bildschirm weitergeleitet, wo Sie Rezepte aus Ihrer gespeicherten Liste auswählen und eine Liste basierend auf diesen erstellen können. Im Wesentlichen würde die App schauen, was das Rezept hatte als Zutatenliste, und es wäre klug genug, um in der Lage, eine Einkaufsliste basierend auf diesen Daten zu generieren. Sobald Sie auf „Generieren“ klicken, wird es diese Liste für Sie generieren. Wie ich bereits erwähnt habe, dachte ich, dass Benutzer entweder nach dem Rezept, für das sie einkaufen, oder nach der Kategorie sortieren möchten . Vielleicht gehen sie einkaufen und sie wollen die Produkte zuerst anzupacken und dann die Konserven, etc. Hier habe ich eine Notiz, dass Rezept Thumbnails könnte hier unten in der Ecke sein, so dass, wenn Sie darauf tippen, Sie kann auswählen und die Auswahl aufheben, welche Rezepte Sie in Ihre Liste aufnehmen möchten. Vielleicht generieren Sie diese Liste, aber dann ändern Sie Ihre Meinung und Sie möchten die Auswahl eines der Rezepte aufheben. Es wird sich so öffnen und das ist, was Sie in diesem Szenario tun können. Jetzt bist du dran. Der Schritt wird wirklich die Grundlage für den Rest Ihres Projekts bilden. Gehen Sie weiter und erhalten Sie Mapping und Skizzieren und stellen Sie sicher, dass Sie Schnappschüsse Ihrer Arbeit unten im Klassen-Community-Abschnitt teilen . Danach werden wir endlich in Adobe XD einsteigen. Ich werde Ihnen zeigen, wie Sie Ihre Datei einrichten, und dann werden wir in der folgenden Lektion den Wireframing-Prozess durchlaufen. Diese Lektion wird viel weniger überwältigend sein, wenn Sie etwas zum Arbeiten haben. Geh weiter und skizziere und ich sehe dich in der nächsten Lektion. 7. Adobe Xd einrichten: Bevor wir uns mit dem Wireframing befassen, möchte ich Ihnen einen kurzen Überblick über Adobe XD geben und Ihnen zeigen , wie Sie Ihre Datei einrichten können, falls Sie ganz neu im Programm sind. Sobald wir XD öffnen, werden wir mit ein paar verschiedenen Zeichenflächengrößen aufgefordert, um es auszuprobieren. Ich denke, ich werde mit dem iPhone 12 für mein Projekt gehen. Wie Sie sehen können, setzt uns das sehr schön auf. Wir haben nur diese eine Zeichenfläche hier, mit der wir anfangen werden. Um Ihnen ein wenig zu zeigen, haben wir die Symbolleiste hier drüben. Dies ist unser Cursor, wo wir Objekte auswählen und bewegen können. Wir haben unsere Formwerkzeuge hier drüben, damit Sie eine Form erstellen können und ihr eine Füllung und einen Rahmen geben können. Sie können auch die Grenze loswerden. Sie können ihm einen Schatten geben, und Sie können diesen Schatten mit diesen Steuerelementen hier manipulieren. Wir können auch Linien erstellen und diesen Linien unterschiedliche Breiten geben. Wir können den Linien auch verschiedene Arten von Kappen geben. Eine abgerundete Kappe und eine hervorstehende Kappe, Dinge wie diese. Wir können das Stift-Werkzeug verwenden, was ehrlich zu sein, ich habe sehr selten das Stift-Werkzeug in XD verwendet. Ich arbeite gerne nur mit Formen und Text, und normalerweise kann ich das meiste, was ich brauche, mit diesen Werkzeugen erledigen. Natürlich haben wir das Textwerkzeug, damit wir hier mit der Eingabe beginnen können und wir können diesen Text natürlich mit all diesen Steuerelementen hier manipulieren. Wir können verschiedene Schriftarten wählen und wir können verschiedene Variationen dieser Schriftarten, Größen wählen . Wir können den Text ein wenig aufspüren. Wir können diese Steuerelemente auch für unsere Texte verwenden. Ich schätze, viele von Ihnen, wenn Sie bereits Designer sind, wissen bereits über diese Kontrollen. Innerhalb von XD sind sie wirklich intuitiv und Sie werden sie schnell aufnehmen. Dies ist das Zeichenflächenwerkzeug, mit dem Sie eine neue Zeichenfläche erstellen können. Aber was ich eigentlich gerne mache, ist die Abkürzung, die nur A auf deiner Tastatur drückt und dann eine Zeichenfläche von dort aus erstellt werden kann. Eine weitere Verknüpfung, die ich wirklich mag, ist das R, das Rechteck ist, und das T, das Text ist. Das macht mein Leben viel einfacher, und ich benutze die ständig. Als nächstes gehen wir durch den Abschnitt Document Assets. Das ist wirklich schön, weil wir Farben, Zeichenstile und Komponenten festlegen können , die wir in einer späteren Lektion eingehen werden. Wir können sie in unseren Dokumentenbeständen einrichten, so dass wir sie immer verwenden können. Wir müssen nicht kopieren und einfügen von Zeichenfläche auf Zeichenfläche. Wir können diese einfach zur Hand haben, was das Design viel schneller macht. Nehmen wir zum Beispiel an, wir wollten einige Farbinspiration von diesem Foto bekommen, das ich gerade von Unsplash heruntergeladen habe. Wir können beginnen, eine Farbpalette aus diesem Foto oder wirklich irgendetwas überhaupt zu erstellen. Um diese Farben zu speichern, wählen wir einfach alle diese Formen aus und klicken auf das Plussymbol neben den Farben. Dann haben wir diese für uns zur Verfügung, um in unserer App zu verwenden und das gleiche gilt für Charakterstile. Dies ist kein sehr schöner Charakterstil, aber wir können ihn zu unserer Zeichenstil-Liste hinzufügen und später zurückkommen und verwenden. Reden wir über diese Kontrollen hier drüben. Wir haben unsere Ausrichtungskontrollen. Wie Sie sehen können, habe ich dieses Rechteck ausgewählt und wenn wir es an der Mitte ausrichten, ist dies die Mitte vertikal, und so wird es vertikal an der Mitte ausgerichtet. Lassen Sie uns es auch horizontal an der Mitte ausrichten. Wir können es nach links, nach rechts ausrichten. Mit diesem Werkzeug können wir mehrere Rechtecke erstellen und gleichmäßig verteilen, und schließlich haben wir unsere Shape-Builder-Werkzeuge. Sie können diese verwenden, um Shapes zusammenzuführen und in all diesen Dingen auszuschließen, mit denen Sie möglicherweise vertraut sind, wenn Sie Adobe Illustrator verwendet haben. Wie ich schon sagte, ich benutze diese Dinge nicht viel, aber es wird nützlich sein, wenn Sie weiterhin XD für Ihre Projekte verwenden und ein wenig schicker mit dem, was Sie erstellen. Lassen Sie uns schließlich über alle Modi in XD gehen. Derzeit befinden wir uns im Entwurfsmodus. Wir sind in der Lage, Elemente hinzuzufügen und unsere Seite zu entwerfen. Sie können auch in den Prototyp-Modus springen, was wir verwenden, um Übergänge zu animieren und einen Prototyp zu erstellen, durch den ein Benutzer tatsächlich bewegen kann. Wenn Sie an einem echten Projekt arbeiten, das Sie mit jemandem teilen möchten , mit dem Sie zusammenarbeiten, würden Sie auf die Registerkarte Freigeben gehen und eine andere Freigabeerfahrung erstellen , wenn Sie eine Entwurfsprüfung im Vergleich zu mit Ihrem Entwickler teilen, vielleicht möchten Sie eine Präsentation erstellen, vielleicht möchten Sie speziell für Benutzertests freigeben, oder Sie können benutzerdefinierte Einstellungen erstellen. Das sind also alle Modi in XD, die Sie oft zwischen meist Design und Prototyp umschalten werden, und wir werden in den kommenden Lektionen näher eingehen. Der Aktionsschritt für diese Lektion ist einfach. Öffnen Sie einfach eine Datei in Adobe XD und erstellen Sie eine Zeichenfläche, die eine mobile Größe hat. Sie werden sehen, dass es viele Möglichkeiten gibt. Ich habe mich für iPhone 12 entschieden, aber Sie können wählen, was Sie für Ihr Projekt verwenden möchten. Jetzt, da Sie mit XD etwas besser vertraut sind, springen wir direkt ins Wireframing. Wir sehen uns in der nächsten Lektion. 8. Wireframing: Der Zweck des Wireframings ist es, die Platzierung von Inhalten zu erarbeiten und Navigations- und Funktionsprobleme in einem Format zu lösen , das wirklich leicht einstellbar ist. In diesem Stadium machen wir uns immer noch keine Sorgen um den visuellen Stil der Bildschirme. Da Funktionalität hier das Hauptziel ist, nehme ich persönlich gerne die wichtigen Interaktionen in meinen Wireframes und Prototypen an. Dies gibt mir die Chance, das Produkt tatsächlich selbst zu testen und herauszufinden, was die Probleme sind und was die Haftpunkte sind. Diese Lektion besteht aus zwei Teilen. Zuerst werden wir unsere Skizzen in digitale Drahtmodelle verwandeln. Dann werden wir sie Prototypen erstellen, um ein Gefühl für die Erfahrung auf Skelett-Ebene zu bekommen und dann nach Bedarf zu optimieren. Der erste Schritt ist eigentlich ganz einfach. Ich bekomme gerade meine Skizzen vor mir und übertrage sie mit hauptsächlich Text und Rechtecken in Adobe XD. Das muss nicht hübsch sein. Abstand und Ausrichtung müssen nicht perfekt sein. Es ist nur, um eine Vorstellung davon zu bekommen, wo Elemente gehen und wie sich ein Benutzer durch die Bildschirme bewegen wird. Ähnlich wie beim Skizzieren ist dies ein sehr iterativer Prozess, aber zumindest für mich ist der beste Weg, um zu iterieren, tatsächlich mit meinen Bildschirmen zu interagieren. Lassen Sie uns anfangen, mehr über den Prototyp-Modus in XD zu sprechen. Wir haben den Prototyp-Modus in der vorherigen Lektion angesprochen, aber jetzt möchte ich Ihnen zeigen, wie ich diese von mir erstellten Drahtmodelle tatsächlich Prototypen erstellen würde . Wir werden noch nicht in irgendwelche ausgefallenen Übergänge geraten, aber ich möchte Ihnen zeigen, wie ich einen Benutzer haben würde , der an dieser Stelle nur ich sein wird, von Bildschirm zu Bildschirm bewegt. meine User Journey anschaue, möchte ich zuerst einen Benutzer ein neues Rezept speichern lassen. Wie Sie sehen können, habe ich dieses Plus-Symbol hier oben, und da wir im Prototyp-Modus sind, wenn ich auf dieses Plus-Symbol tippe, wird es mir diesen kleinen Pfeil geben. Sie können sehen, wenn ich auf diesen Pfeil klicke und ziehe, es erlaubt mir, diese Interaktion an alle anderen Kunstboards zu senden, die ich habe. Ich habe diese ziemlich in Ordnung, also werde ich es an diese nächste Zeichenfläche senden, die das Add-Rezept-Pop-up-Modal ist, wenn Sie so wollen. Es ist eindeutig nicht entworfen, aber es gibt ein bisschen, das hier genug hineingeht, um diese Interaktion zu prototypen. Dann können wir herkommen und sehen, welche Art von Interaktionen wir haben. Wir haben einen Tap Trigger, was wir wollen, weil wir möchten, dass der Benutzer auf dieses Symbol tippt. Wir haben Übergang ausgewählt, was wir wollen und anstatt aufzulösen, möchte ich eigentlich, dass diese Zeichenfläche nach oben gleitet, also werde ich das auswählen und 0,30 Sekunden lindern. Das ist in Ordnung. Auch hier werden wir uns noch nicht zu sehr auf die eigentliche Animation dieser konzentrieren. Dann, sobald wir zu diesem Add Rezept Folie bekommen, wollen wir wirklich nur, dass sie ihre URL einfügen. Nachdem sie dies getan haben, wird dieser Bildschirm mit all diesen verschiedenen Informationen basierend auf der Webseite, die sie eingefügt haben, gefüllt . In einem echten Design möchten wir vielleicht etwas wie einen Ladebildschirm animieren , weil dies nicht sofort geladen wird, aber für diesen Wireframe werden wir es einfach halten, also bin ich das Gleiche tun. Fügen Sie URL ein, und wir möchten, dass es in diesem nächsten Detailbildschirm zu gehen. Anstatt nach oben zu rutschen, werde ich mich auflösen, und wir machen das zuletzt, vielleicht eine Sekunde. Wenn es eine volle Sekunde ist, wird das wahrscheinlich helfen, es scheint, als ob es geladen wird. Wir werden sehen, wie das in ein bisschen aussieht. Lass uns noch ein paar machen. Sobald wir alle diese Informationen bearbeitet haben, möchten wir, dass der Benutzer auf „Speichern“ klickt und sobald er auf „Speichern“ klickt, dann sollte er in der Lage sein, in welche der Kategorien er das neue Rezept gehen soll. Wieder, lassen Sie uns diese Rutsche nach oben. Ich denke, dass das am sinnvollsten ist, zumindest für den Moment. Dann, was sie tun wollen, ist tatsächlich eine dieser Boxen auszuchecken. Nehmen wir an, sie haken dieses Kästchen aus, dann wollen wir, dass es fast sofort zu diesem Bildschirm geht, weil es keine Verzögerung oder einen Übergang zwischen dem Aktivieren und nicht aktivieren sollte . Es sollte sofort überprüfen, wenn Sie darauf tippen. Wir gehen Tap, Transition, und anstatt eine Animation zu haben, werden wir eigentlich nur keine tun und das wird den Übergang sofort machen. Sobald sie dann auf „Bestätigen“ geklickt haben, wollten wir einfach zum Bildschirm „Gespeicherte Rezepte“ zurückkehren. Das ist wieder hier drüben. Was wir tun werden, ist, diesen Draht hierher zu ziehen, und dafür möchte ich, dass dieser Übergang nach unten rutscht, weil wir wollen, dass dieser Modal, er rutschte nach oben, als er hereinkam, und wir wollen, dass er wieder nach unten rutscht, so dass es sich konsistent anfühlt . Okay, schauen wir uns mal an, wie das eigentlich aussieht. Was ich tun möchte, ist auf diesem ersten Bildschirm auszuwählen und ich werde es als Startbildschirm festlegen, was darauf hinweist, dass dies die erste Zeichenfläche in diesem Fluss ist. Selbst wenn ich diese Zeichenfläche nicht ausgewählt habe, wenn ich gehe, um den Prototyp zu spielen, der auf dieser ersten Zeichenfläche beginnen wird. Okay, schauen wir uns mal an. Wir haben den Prototyp hier. Wir möchten zuerst ein Rezept herausgeben, wir fügen die URL ein, und dann werden diese Informationen geladen. Sobald wir wählen, welche Miniaturansicht wir wollen, und wir können auch den Titel sowie einige der Zutaten bearbeiten. Dann drücken wir „Speichern“. Dann wird es uns fragen, wo wir es speichern wollen. Lass es uns zum Abendessen aufgeben. Großartig. Dann wird das kommen, was uns fragen wird, ob wir es bestätigen wollen. Wir bestätigen und es geht direkt zurück zu unseren gespeicherten Rezepten. Hoffentlich haben Sie ein besseres Verständnis dafür, wie der Prototyp-Modus funktioniert. Ich werde damit weitermachen, nur für den Fall, dass du neugierig bist wie ich den Rest dieses Prototyps verdrahte. Die andere Interaktion, die wir auf diesem Startbildschirm oder gespeicherten Rezeptbildschirm gestartet haben , besteht darin, eine Liste zu generieren. Wenn wir eine Liste erstellen, wollen wir in der Lage sein, aus diesen Mahlzeiten auszuwählen , aus denen wir die Liste erstellen möchten. Gehen wir hier rüber. Hier habe ich den Bildschirm erstellt, der die ausgewählten Rezepte anzeigt. Ich werde das hier rüber bringen, damit es leichter zu sehen ist. Wie es jetzt ist, habe ich nur diese beiden Bildschirme. Ich habe einen Bildschirm, auf dem keine Rezepte ausgewählt werden und ich habe einen Bildschirm, auf dem vier Rezepte ausgewählt werden. Damit sich dieser Prototyp real anfühlt und tatsächlich testen kann, wie sich das als Benutzer anfühlt, muss ich das beheben. Was wir wollen, ist, wenn jemand auf „Make List“ tippt, wir wollen, dass sie in der Lage sein, ihre Rezepte auszuwählen. Wir werden auf den Bildschirm gehen, aber wir müssen den Bildschirm ein wenig reparieren, also gehen wir zurück zum Entwurfsmodus. Im Moment haben wir diese vier Rechtecke im ausgewählten Zustand. Was das bedeutet, ist, dass sie eine dickere Grenze um sie herum haben. So habe ich es in den Drahtmodellen gehandhabt. Sobald ich zu meinen echten Designs komme, könnte der ausgewählte versus nicht ausgewählte Zustand völlig anders sein, aber für die Wireframing-Phase wird dies sicherlich den Trick tun. Lassen Sie uns diese alle wieder auf einen Rahmen mit einem Pixel setzen , denn so wird es aussehen, wenn Sie zum ersten Mal auf den Bildschirm für ausgewählte Rezepte kommen . Moment gibt es keine Rezepte ausgewählt, also wollen wir das auch tun. Diese Schaltfläche „Generieren“ sollte wahrscheinlich noch nicht aktiv sein. Lassen Sie uns eine leichte Deckkraft von vielleicht 40 Prozent geben , um zu zeigen, dass Sie nichts ausgewählt haben, so dass Sie noch keine Liste erstellen können. Okay, wieder, ziehen wir nach oben, damit wir etwas mehr Platz haben. Dann nehmen wir diese Zeichenfläche und duplizieren sie direkt daneben. Dies, wir werden eine ausgewählte nennen. Was wir tun werden, ist, einen von ihnen in einen ausgewählten Zustand zu verwandeln, also geben wir ihm einen Fünf-Pixel-Rahmen und wir gehen in den Prototyp-Modus, und wenn dies angezapft wird, wollen wir, dass er sofort in diesen nächsten übergeht, also werden wir keine Animation machen, weil wir wollen, dass es sofort ist. Zurück im Entwurfsmodus möchten wir dieses machen, weil jetzt ein Rezept ausgewählt ist und wir diese Schaltfläche „Generieren“ vollständig sichtbar machen wollen , da sie an dieser Stelle antippbar sein sollte , da es ein Rezept ausgewählt ist. Aber sagen wir, wir wollen zwei Rezepte auswählen, bevor wir diese Liste generieren. Gehen wir rein und machen diesen Prozess einfach noch einmal. Zwei ausgewählt. Jetzt haben wir die Nummer zwei hier, um anzuzeigen, dass zwei ausgewählt sind. Nehmen wir an, dass sie dieses in der Mittagskategorie auswählen. Perfekt. Dann gehen wir zurück in den Prototyp-Modus. Auf diesem Bildschirm möchten wir, dass sie darauf klicken, und es sollte sofort in diesen Bildschirm übergehen. Dann werde ich das nur noch zwei Mal machen, damit wir vier Rezepte ausgewählt haben. Okay, jetzt, da vier ausgewählt sind, möchten wir, dass der Benutzer eine Liste generiert. Wenn wir auf die Schaltfläche „Generieren“ tippen, dann wollen wir, dass ihre Lebensmittelliste in den Rahmen gleitet. Lassen Sie uns nach oben rutschen, und einmal eine Sekunde ist in Ordnung für jetzt. Dann bringt uns das auf ihre Lebensmittelliste. Wenn wir in die eigentliche Entwurfsphase kommen, werden wir auch diese kleineren Interaktionen angehen, wie das Umschalten der Sortierung auf Mahlzeit versus Kategorie und das Öffnen dieser kleinen Schaltfläche, die Ihnen zeigt, wie Sie auswählen und Deaktivieren Sie die Auswahl der Rezepte, die Sie in die Liste aufnehmen möchten. Aber vorerst denke ich, dass das so ziemlich der Prototyp ist. Spielen wir es noch einmal, damit wir diese nächste kleine Phase der Interaktionen testen können. Ich möchte eine Liste erstellen, also jetzt wird es mir erlauben, Rezepte auszuwählen. Nur eine Sache, die mir aufgefallen ist, und genau deshalb teste ich meinen eigenen Prototyp, ist, dass diese Interaktion seltsam war. Es rutschte nach oben oder unten, als ich wirklich wollte, dass es in diesem Bildschirm verblasst, also ist das eine mentale Notiz, die ich machen werde, um die Arten von Übergängen zu ändern. Aber wie auch immer, wir wollen das auswählen. Das ist großartig. Es bewegte sich die Zahl von Null auf eins, und es machte auch diese „Generieren“ -Button tatsächlich verfügbar. Dann muss ich mich genau daran erinnern, welche ich eingerichtet habe, da dies nur ein erzwungener Prototyp ist und das ist nicht etwas, wo jede Option tatsächlich Prototypen erstellt wird. Aber wie auch immer, ich erinnere mich, dass ich diese als nächstes ausgewählt habe. Es bewegt sich bis zu zwei, was perfekt ist. Dann Desserts, und dann noch ein Abendessen, und es bewegt sich von 1, 2, 3 und 4, was großartig ist. Dann werden wir diese Liste generieren. Das ist perfekt. Dies kam mit der Liste sortiert nach Kategorie, also haben wir produziert, all diese Dinge, Konserven, all diese Dinge. Wie ich schon sagte, wir werden später in einige der kleineren Interaktionen eingehen , wenn wir wirklich entwerfen, also bringen Sie Ihre Skizzen in XD und bringen Sie sie an einen Ort, an dem Sie leicht mit ihnen im Prototyp-Modus interagieren können. Es sieht vielleicht noch nicht hübsch aus, aber es sollte eine nahtlose Erfahrung sein. Sobald Sie das haben, machen Sie einen Screenshot Ihrer Wireframes oder noch besser, nehmen Sie ein Video Ihres Prototyps auf und teilen Sie es mit uns weiter unten. In den nächsten Lektionen kommen wir zu dem wirklich lustigen Teil, indem wir diese Drahtmodelle mithilfe von Textilien, Farbpaletten und Komponenten in High-Fidelity-Designs verwandeln . Einer der leistungsstärksten Bausteine von Adobe XD. 9. UI-Design: Wir haben es zu einem weiteren meiner absoluten Lieblingsschritte in diesem Prozess geschafft, der Designphase. In diesen nächsten Lektionen werden Sie wirklich sehen, dass Ihre App-Funktion visuell zum Leben erweckt wird, also geben Sie jetzt nicht auf. Um zu entscheiden, wie ich diese App visuell aussehen möchte, mache ich normalerweise gerne eine Zeichenfläche zur Seite in meiner Designdatei und beginne, einige Inspirationsbilder, Farben und Typphasen zu sammeln . Ich denke gerne über den Raum nach, in dem das Produkt existiert, was bedeutet, wer es benutzen wird, in welcher Industrie es existiert, und mache ein wenig Forschung darüber, welche Art von Farben und Stilen sich für diesen Typ eignen könnten des Weltraums. Ich habe das Gefühl, dass viele von euch schon in irgendeiner Weise visuelle Designer sind. Ich werde nicht jede Menge Zeit mit diesem Schritt verbringen. Aber im Grunde, nachdem ich einige Ideen davon habe, wie ich meine Farbpalette aussehen könnte und welche Schriftart oder Werkzeug ich gerne in der App verwenden könnte, werde ich voran gehen und testen Sie es auf nur einem Bildschirm. Normalerweise muss ich etwas optimieren, besonders weil ich sicherstellen möchte, dass der Farbkontrast groß genug ist, damit der Text in allen Farben, die ich als Hintergrundfarben oder Schaltflächen verwende , lesbar ist. Um dies zu tun, verwende ich immer das Stark-Plug-in, das Sie hier sehen können. Wie Sie sehen können, habe ich ein paar Mal damit herumgespielt bevor ich es wirklich an einen Ort gebracht habe, an dem ich es mochte. Zuerst hatte ich diese Variation, wo wir das Plus-Symbol mit ein wenig Schatten hier haben. Ich war einfach nicht in das verliebt, also habe ich es in den nächsten Versionen einfach gehalten. Dann habe ich auch mit dem Tastenstil herumgespielt. Zuerst benutzte ich diesen hellblauen Hintergrund mit einem dicken Strich. Ich wusste, dass ich bei diesem allgemeinen Retro-Stil mit den hellen Farben und den wirklich dicken geraden Linien bleiben wollte , aber es gibt auch ein paar Möglichkeiten, das zu tun. Das war meine erste Variante, und dann entschied ich, dass ich diese Rezeptkarten ein bisschen besser aussehen lassen wollte. Sehen Sie hier, sie sind wirklich nur flach, und es ist ein bisschen schwer für sie, sich herauszustellen weil der kleine Text hier zu sehr mit dem Hintergrund verschmilzt. Hier drüben gruppierte ich das Bild und das Foto zusammen mit dieser Hintergrundform, die weiß ist, und fügte dann einen Schatten im Hintergrund hinzu, um es wirklich hervorzuheben. Der Knopf hier sieht ähnlich aus, aber ich beschloss, mit diesem Gelb zu gehen. Ich mochte das definitiv besser, aber dann wollte ich eigentlich etwas anderes mit dem Knopf ausprobieren, den ich normalerweise nicht tue, und ich gab ihm diesen harten Schatten , der ich für wirklich einzigartig halte. Ich habe mich entschieden, damit zu gehen. Dieser letzte Versuch war definitiv mein Favorit. Am Ende habe ich meine Style-Seite angepasst, um das zu widerspiegeln. Dann, wenn Sie damit zufrieden sind, ist das eine gute Zeit, um Ihre Farben und Schriftarten auszuwählen und sie zu Ihren Dokumentenelementen hinzuzufügen. Ich wähle diese nur aus und klicke auf die Plus-Taste, und jetzt haben wir alle diese Farben zur Hand. Ich werde dasselbe mit diesen Textstilen tun. Ich benutze Roc Grotesk, und ich halte es einfach. Ich benutze das den ganzen Weg durch. Ich gebe mir zwei verschiedene Optionen für Überschriften, indem ich eine verwende, die super fett ist, und wir haben Titelfall in diesem verwendet. Dann hat dieser, der immer noch fett, aber etwas kleiner ist, mehr mit etwas größeren Buchstabenabständen aufgespürt, und auch wir haben es in allen Großbuchstaben. Dann verwende ich das für den gesamten Textkörper. Wie Sie sehen werden, wenn wir in einige der Designs kommen, benutze ich es normalerweise an 16 Punkt, aber manchmal werde ich ein wenig größer oder kleiner, je nachdem, was die Bedürfnisse der Seite sind. Lassen Sie uns diese auch dem Dokument-Asset-Abschnitt hinzufügen. Ich werde nur reingehen und diesem ein Etikett geben, damit es wirklich einfach für mich ist. Rufen Sie die Unterüberschrift an und gehen Sie dorthin. Jetzt, während ich den Rest meiner App durchgehe und entwerfe, kann ich jederzeit von hier aus ziehen, und es macht es einfach viel schneller. Während Sie diese Testseite aufbauen, könnte es Dinge geben, die ein wenig Optimierung benötigen, die nicht unbedingt mit Ihren Hauptstilen von wirklich nur Textfarben und Schaltflächenstilen zu tun haben. Einige andere Dinge könnten ins Bild kommen. Zum Beispiel, für meine, diese Komponente hier kam es, was definitiv etwas sein wird, das ich im Rest der App verwende. Wenn es darum geht, diese Art von Dingen zu entwerfen, wenn Sie nicht jede Menge visueller Design-Hintergrund haben, können Sie gehen und suchen nach Inspiration an anderer Stelle. Sie können auf Behance oder Pinterest oder Instagram schauen , oder vor allem über die Apps nachdenken, die Sie jeden Tag verwenden, und erhalten einige Inspiration von denen, wie verschiedene Elemente wie diese zu stylen. Möglicherweise müssen Sie auch Symbole zu Ihren Bildschirmen hinzufügen. Wenn Sie nicht alle diese selbst entwerfen wollen, oder wenn Sie nur ein wenig Zeit sparen möchten, dann würde ich empfehlen, das Plugin namens Icons 4 Design herunterzuladen. Das ist, was ich die ganze Zeit benutze, und es hat Tonnen von gemeinsamen Symbolen. Ich habe das Plus-Symbol hier benutzt, und natürlich hätte ich das selbst machen können. Es würde wahrscheinlich nicht so lange dauern, aber diese Optionen zu haben, um Ihnen zu zeigen, welche Arten von Icons Stile Sie verwenden könnten, ist eine wirklich großartige Ressource zu haben. Auch hier kommt das Styling einer App mit Übung. Verprügeln Sie sich nicht, wenn es nicht perfekt aussieht, wie Sie es am Anfang wollen. Sie können es weiter verbessern, wie Sie gehen. Sobald Sie zufrieden sind mit dem, wie dieser Testbildschirm aussieht, machen Sie einen Screenshot oder exportieren Sie ihn als PNG und teilen Sie ihn mit uns in der Class Community Abschnitt. Als Nächstes erfahren Sie mehr über die Leistungsfähigkeit von Komponenten und automatisches Animieren in Adobe XD. Gehen Sie weiter und gehen Sie durch diesen Entwurfsstil-Prozess für Ihr eigenes Projekt, und ich werde Sie in der nächsten Lektion sehen. 10. Komponenten und Mehr: In dieser Lektion möchte ich Ihnen Komponenten vorstellen, da dies ein Tool ist , mit dem Sie beim Entwerfen der restlichen Bildschirme in Ihrer App Zeit sparen können. Erstellen von Komponenten in Adobe XD ist eine gute Möglichkeit, Elemente zusammenzufassen und verschiedene Zustände oder Variationen eines Elements zu erstellen. Sie können auch Übergänge zwischen mehreren Zuständen einer einzelnen Komponente einrichten. Ohne jede Menge Kunstboards zu verwenden, können Sie Dinge wie Mikroanimationen erstellen. Wenn das verwirrend klingt, denke ich, dass es wirklich helfen wird. Lassen Sie mich Ihnen einige Beispiele zeigen. In der letzten Lektion haben Sie gesehen, dass ich den Bildschirm durch Kopieren und Einfügen und Umschalten einiger Texte und Bilder innerhalb dieser Elemente angelegt habe, aber es gibt tatsächlich eine einfachere Möglichkeit, dies zu tun, was ich Ihnen jetzt mit -Komponenten. Wir wollen daraus eine Komponente erstellen, weil wir diese dann wiederverwenden können. Später in der App werden wir mehrere Zustände dieser Rezept-Kartenkomponente wollen. Wir wollen ein Selektiertes in einem nicht gewählten Zustand. Dies ist offensichtlich der Standardzustand, der deaktiviert ist, aber später, wenn wir möchten, dass Benutzer auswählen können, welche Rezepte sie verwenden möchten , um eine Einkaufsliste zu generieren, brauchen wir diesen ausgewählten Zustand. Dies ist ein perfekter Anwärter, um eine Komponente aus zu erstellen. Ich werde es von Grund auf tun, nur damit du sehen kannst, was ich meine. Alles klar, Lassen Sie uns unseren Bildschirm mit allem außer den Rezeptkarten einrichten, und wir werden es stattdessen mit Komponenten neu erstellen. Ich werde das von Grund auf neu erstellen, damit du genau sehen kannst, wie ich es gemacht habe. Beginnen wir zunächst mit diesem Hintergrundrechteck. Was wir haben, ist ein weißes Rechteck. Ich werde nur auf die R-Taste als Verknüpfung für ein Rechteck klicken. Wir werden das herausziehen. Das sieht gut aus. Natürlich, dass Sie wirklich spezifisch mit der Größe bekommen können abhängig davon, wie viel Platz Sie zwischen Elementen und dieser Art von Sache wollen. Wir wollen hier keine Grenze, also schalte ich die Grenze ab. Dann wollen wir etwas Platz für ein Foto und Text. Was ich tun werde, ist eigentlich eine Maske zu machen, in die wir unser Foto aufbauen können. Wir können eine Maske mit einem Rechteck erstellen. Ich werde wieder R drücken und hier ein Rechteck erstellen. Wieder werde ich die Grenze ausschalten, und lassen Sie uns dieses Rechteck grau machen, damit wir es tatsächlich sehen können. Ordnung, also hier wird unser Bild hingehen. Dann wollen wir wieder ein paar Kopien. Ich schreibe Garnelen Pasta aus. Gehen wir zurück zu unserem Asset-Panel, weil wir dafür die Textkopie verwenden möchten. Perfekt. Ehrfürchtig. Nun, was ich tun möchte, ist sicherzustellen, dass dies links ausgerichtet ist. Das ist großartig. Ich werde immer wollen, dass es beginnt, sagen wir, acht Pixel von der Seite. Anstatt diese Art von Text zu sein, bei dem es im Grunde unbegrenzte Breite ist, wenn ich weiter tippe wird es völlig außerhalb davon gehen. Das ist nicht das, was wir wollen. Stattdessen wollen wir, dass dies eine feste Breite ist. Ich werde die Breite auf etwa diese Größe fixieren. Wir wollen, dass es auch acht Pixel vom rechten Ende sein, perfekt. Dann scheint es wie die Zeilenhöhe und hier ist zu groß, also werde ich diese 18 stattdessen machen. Ehrfürchtig. Jetzt können wir dies erweitern, um sicherzustellen, dass es dort perfekt ausgerichtet ist. Jetzt werden wir etwas Padding erstellen, so dass, egal wie lange der Titel des Rezepts ist, diese Komponente flexibel sein wird. Um uns Polsterung zu geben, müssen wir diese Elemente zusammenfassen. Ich werde das Kommando G zur Gruppe machen, und wir schicken es nach hinten, damit wir noch unsere Maske oben sehen können. Dann wählen wir diese Gruppe aus und sehen, was unsere Optionen sind. Wir werden hier die Polsterung abchecken. Wie Sie sehen können, haben wir 91 Pixel Polsterung oben, was großartig ist, weil es uns Raum für unser Bild gibt. Wir haben acht Pixel auf der linken und rechten und sechs auf der Unterseite. Ich denke, das ist visuell zentriert, also ist das perfekt. Jetzt können wir das tatsächlich zu einer Komponente machen. Wählen wir sowohl diese Gruppe als auch die Maske oben aus und drücken Sie den Befehl K für Komponente. Nun, da dies eine Komponente ist, können wir zum Komponentenabschnitt gehen und wir können es tatsächlich heraus ziehen, um eine andere Instanz dieser Komponente zu erstellen. Wir können auch einfach kopieren und einfügen oder klicken und ziehen und halten Option Shift, um mehr von diesen zu erstellen. Jetzt die großartigen Dinge, seit wir hinzugefügt haben, dass Padding und das ist eine Komponente, auch wenn wir nur zu einer anderen Instanz der Komponente gehen, können wir tatsächlich den Titel ändern. Vielleicht ist es nur Shrimp Pasta und jetzt, wie Sie sehen können, ist die gesamte Komponente tatsächlich flexibel. Vielleicht hat dieser einen wirklich langen Titel. Vegan und glutenfrei, Chili mit schwarzen Bohnen. Da gehen wir. Du kannst es so lange schaffen, wie du willst. Das ist das Tolle an Komponenten. Ich musste das nur einmal tun und jetzt wird es flexibel für alle verschiedenen Instanzen sein , die wir erstellen müssen. Was großartig ist, dass wir jetzt einfach die Bilder einwerfen können, die wir wollen. Sie werden sehen, dass, wenn ich ein Bild zu dieser ersten Komponente werfe, da das die Hauptkomponente ist, diesen Stil auf den Rest übertragen wird, aber das ist in Ordnung, weil wir das leicht überschreiben können. Nehmen wir das hier und lassen es einfach da rein. Wie Sie sehen können, werde ich es einfach in den hervorgehobenen Teil fallen , wenn ich hier reinkomme und das ist die Maske. Da gehen wir. Das ist so viel einfacher als das, was wir hier getan haben, wo wir kopieren und einfügen und ständig die Größe dieser Hintergrundform ändern mussten. Jetzt haben wir Komponenten erstellt, die flexibel sind. Jetzt, wo ich es merke, haben wir den Schatten immer noch nicht hinzugefügt. Das ist großartig. Wir können zur Hauptkomponente zurückkehren. Wenn Sie vergessen, welche der Hauptbestandteil ist, wenn Sie bemerken, dass dieser Diamant nicht grün gefüllt ist, ist dieser Diamant grün gefüllt. So wissen Sie, dass dies die Hauptkomponente ist. Was Sie auch tun können, sagen wir, Sie haben diese Hauptkomponente auf einem Bildschirm, der wie auf der anderen Seite Ihres Fensters ist, und Sie erinnern sich nicht wirklich, wo es ist, was Sie tun können, ist auf eine der Instanzen zu tippen, Ctrl-Taste und Hauptkomponente bearbeiten. Das bringt Sie direkt zur Hauptkomponente. Was wir tun wollen, ist, diesem einen Schatten zu geben. Wir werden auf dieser Hintergrundform auswählen. Wir gehen runter und geben ihm einen Schatten. Für meine Schatten halte ich sie sehr subtil. Wir machen acht Prozent Deckkraft mit einem schwarzen Schatten. Wir werden 20 Unschärfe machen. Das sieht normalerweise schön aus. Perfekt. Jetzt, wie Sie sehen können, dass es wirklich subtil ist, aber das hat es auf den Rest der Instanzen angewendet. Wir haben diese Komponente, aber wie Sie sehen können, gehen sie vom Bildschirm aus. Wenn wir wollen, dass dies horizontal scrollbar ist, müssen wir XD tatsächlich sagen, das zu tun. Was ich tun werde, ist ein paar mehr davon zu machen. Wir werden sie zusammenfassen. Sobald sie zusammengefasst sind, können Sie sehen, dass wir diese Optionen hier drüben haben, und dies ist die Option Scroll-Gruppen. Dieses Symbol ist ein horizontales Bildlaufgruppensymbol. Wir werden das treffen und wie Sie sehen können, wird der Parameter automatisch als die volle Breite des Bildschirms eingestellt, was perfekt ist. Wenn wir in den Vorschaumodus gehen und alles, was ich mache, ist horizontal zu scrollen, und jetzt haben wir eine horizontale Scroll-Gruppe. Das letzte, was wir mit dieser Komponente tun müssen, ist, einige verschiedene Zustände zu erstellen. Wie ich schon sagte, wir wollen einen ausgewählten Zustand und einen deausgewählten Zustand. Dieser Standardstatus ist der deselektierte Zustand und wenn Sie wirklich in diese Hauptkomponente tippen, weil wir sie ein paar Mal gruppiert haben, so dass Sie wahrscheinlich weiter klicken müssen. Dann können Sie sehen, dass es nur einen Zustand gibt und es der Standardzustand ist. Aber lassen Sie uns noch einen hinzufügen und wir nennen diesen Selected. Nun, was ich möchte, dass der ausgewählte Zustand aussieht, ist, dass ich wirklich nur möchte, dass diese Hintergrundform einen Rahmen hat. Jetzt können wir sehen, ob wir vergrößern, da diese Form im Hintergrund des Bildes ist, wird der Rand abgeschnitten. Um das zu beheben, anstatt einen Rahmen zu haben, der ein innerer Strich ist, geben wir ihm einen äußeren Strich. Auf diese Weise wird es weiterhin außerhalb der Grenzen dieses Rechtecks gehen. Um es tatsächlich sichtbar zu machen, machen wir es drei Pixel, und wir geben ihm eine Farbe, die in einer unserer Paletten ist. Großartig. Also hier ist der ausgewählte Zustand. Es war so einfach wie das. Solange wir in irgendeinem Zustand ausgewählt sind, den wir bearbeiten möchten, können wir das bearbeiten und dann immer wieder zum Standardzustand zurückkehren. im Standardzustand eine Interaktion einrichten, Lassen Sie unsim Standardzustand eine Interaktion einrichten,bei der diese Komponente immer dann in den ausgewählten Zustand übergehen soll, wenn sie angetippt wird . Wenn wir das auf dieser Hauptkomponente tun, wird es auch auf den Rest der Komponenten angewendet. Wieder, da so viel Zeit zu sparen. Wir sind auf dieser aktuellen Komponente und wir gehen in den Prototyp-Modus. Wenn wir einfach auf diesen Draht tippen, anstatt ihn zu ziehen, tippen wir einfach darauf, dann können wir die Möglichkeit haben, ein Ziel zu wählen, das nur ein anderer Zustand ist. Wir werden den ausgewählten Zustand auswählen und was wir wollen, wir brauchen ihn nicht wirklich zu animieren. Wir wollen nur, dass es ohne Animation übergeht, weil wir wollen, dass es sofort ist. Gehen wir zum ausgewählten Zustand und machen das Gleiche, damit ein Benutzer ihn leicht abwählen kann, wenn er einen Fehler gemacht hat. Wieder, wir werden nur darauf tippen. Wir werden „Standardstatus“ wählen, und es wird sich alle Einstellungen erinnern, die wir wollten. Jetzt können wir das in einer Vorschau ansehen. Wir gehen zurück in den Entwurfsmodus und drücken die Vorschau. Wenn wir einfach darauf tippen, wie Sie sehen können, jedes Mal, wenn ich tippe, wird es jedes Mal, wenn ich tippe,ausgewählt und deaktiviert. Das ist ein Grund, warum Sie eine Komponente erstellen würden, wenn Sie möchten, dass sie mehrere Zustände hat und Sie in der Lage sein möchten, zwischen ihnen zu wechseln. Aber ein weiterer Grund, eine Komponente zu erstellen, wäre nur so, dass Sie eine Quelle der Wahrheit für ein bestimmtes Element haben. Nehmen wir zum Beispiel einen Knopf. Ich habe diese Schaltfläche und sagen wir, ich mache es nicht zu einer Komponente und ich kopiere und füge sie einfach auf viele verschiedene Zeichenflächen ein, und dann beschließe ich später, dass ich eine Änderung vornehmen möchte. Vielleicht möchte ich, dass diese Farbe stattdessen so rosa ist, dann müsste ich alle Knöpfe auswählen und diese Änderung vornehmen. Aber wenn ich dies zu einer Komponente mache, indem einfach sicherstelle, dass es gruppiert ist und dann auf Befehl K klicke, dann, wenn ich diese Komponente mehrmals erscheint, dann muss ich nur die eine ändern. Ich werde hier reinspringen und diese Farbe machen, dann ändern sie sich alle. Aber das bedeutet nicht, dass Sie nicht nur einen Button haben müssen. Wenn Sie es nur für eine Instanz ändern, wie Sie sehen können, gilt es,wie Sie sehen können,nur für diese Instanz. Es ist ein wirklich flexibles Werkzeug zu verwenden, wenn Sie Ihre gesamte Schnittstelle entwerfen. Insbesondere für meinen Button möchte ich eigentlich, dass er ein paar verschiedene Zustände hat. Ich wollte diesen Standardzustand haben, aber ich wollte auch einen inaktiven Zustand haben. Ich möchte, dass es da ist, aber ich wollte eine viel geringere Deckkraft haben, so dass klar ist , dass der Benutzer eine weitere Aktion ergreifen muss, bevor diese Schaltfläche aktiv wird. Alles, was ich tun werde, ist diese Hauptkomponente auszuwählen. Ich weiß, dass es der wichtigste ist, weil dieser grüne Diamant in der Ecke gefüllt ist, und ich werde „New State“ treffen, und wir werden inaktiv machen. Ich werde tatsächlich in diese Komponente klicken, so dass ich für die gesamte Gruppe ausgewählt werde. Ich werde die Deckkraft zu 50 Prozent machen. Jetzt können Sie sehen, dass der inaktive Zustand ist, wir haben den Standardzustand, und wir können zwischen diesen bewegen. Wenn Sie auch hierher kommen, können Sie sehen, dass das in jeder Instanz der Komponente funktioniert. Lassen Sie uns als nächstes über Auto-Animieren sprechen. Sie können die automatische Animation verwenden, um zwischen zwei verschiedenen Bildschirmen oder zwei verschiedenen Zuständen einer einzelnen Komponente zu wechseln . Lassen Sie mich Ihnen ein Beispiel dafür zeigen, nur für den Fall, dass Sie damit in Ihrem App-Design experimentieren möchten. Sie haben diesen Bildschirm schon einmal gesehen und das ist der gespeicherte Rezeptbildschirm, über den wir wirklich gerade gesprochen haben. Jetzt, was ich mache, ist ein Modal zu erstellen, das ich in den Frame schweben möchte , wenn Sie auf die Plus-Taste klicken, um ein neues Rezept hinzuzufügen. Ich habe dieses Modal erstellt und alles zusammengefasst, wie Sie sehen können. Diese Zeichenfläche ist nur eine Kopie der vorherigen Zeichenfläche mit diesem Modal oben. Was ich tun möchte, um zwischen diesen beiden Bildschirmen zu animieren ist tatsächlich dieses Element auf beiden Bildschirmen zu haben. Sie können sehen, dass ich das tatsächlich habe. Hier unten ist dieses Element, aber schauen Sie, es ist ganz unten unten und die Deckkraft ist bei Null. Da es gleich heißt, Gruppe 64, Gruppe 64, und es ist auf beiden Zeichenflächen, Auto-Animate in XD wird tatsächlich in der Lage sein, den Unterschied zwischen den beiden Platzierungen zu animieren und Art, wie sie angezeigt werden. Auf dieser Zeichenfläche ist es völlig bei Null Prozent Deckkraft und unten. Auf dieser Zeichenfläche liegt sie bei 100 Prozent Deckkraft und bedeckt fast den gesamten Bildschirm. Wenn ich das verdrahtet, kann ich doppelklicken, bis ich in dieses Plus-Symbol komme. Ich kann diesen Draht über ziehen und wenn wir „Auto-Animieren“ auswählen, und wir werden es tun, vielleicht machen Sie leichtes Ein- und Aussteigen und wir machen es ziemlich schnell, 0,3 Sekunden, dann sehen, ob Sie sehen können, wie das passiert. Klicken Sie auf das Plussymbol und es schwebt in den Rahmen. Genau so wollten wir, dass es aussieht. Es macht die Animation wirklich so viel einfacher, denn alles, was Sie tun müssen, ist, dass ein Element auf zwei verschiedenen Bildschirmen angezeigt wird und es im Ebenenfenster gleich benannt wird, und es wird automatisch den Unterschied animieren. Jetzt, da Sie diese beiden kritischen Funktionen in XD verstehen, können Sie Ihren eigenen Prototyp fertigstellen. Kurze Erinnerungen, bevor ich diese Lektion abschließe. Erstellen Sie eine Komponente, wenn Sie ein Element haben, das in der einen oder anderen Form an mehreren Stellen angezeigt wird , um Zeit und Verwirrung zu sparen. Während Sie entwerfen, hüpfen Sie weiter in den Prototyp-Modus, um Ihre Entwürfe zu prototypen und spielen Sie sie ab, um sie zu testen und zu sehen, wo Sie Optimierungen vornehmen müssen. Wenn Sie ein echtes UX-Projekt praktizieren möchten, könnten Sie sogar andere Ihre Prototypen testen lassen. Es funktioniert am besten, wenn Sie tatsächlich jemanden zu Hause haben , dem Sie den Prototyp vor, auf diese Weise können Sie tatsächlich beobachten und sehen, wo sie stolpern. Wenn Sie noch mehr Demos und hinter den Kulissen sehen möchten , wie ich meine App-Funktion entworfen habe, dann können Sie sich das nächste Video ansehen, das eigentlich ein Bonusvideo ist. Ich führe Sie durch noch mehr dieser Gestaltungselemente und Interaktionen, die ich erstellt habe, und zeige Ihnen auch einen Zeitraffer meines dreistündigen Prozesses, der dies entwirft. Wenn Sie bereits wirklich zuversichtlich in Adobe XD sind, können Sie das ganz überspringen oder einfach so viel oder so wenig davon sehen, wie Sie möchten. 11. BONUS! Noch mehr designen & Zeitraffer: Wie ich in diesem Bonus-Video erwähnt, werde ich Ihnen meine gesamte App-Funktion von Anfang bis Ende zeigen, einige weitere kleine Interaktionen und Design-Elemente, die ich erstellt habe. Am Ende werden Sie in der Lage sein, einen Zeitraffer des gesamten Prozesses zu sehen , der insgesamt etwa drei Stunden dauerte. Lassen Sie uns direkt hineinspringen und vergessen Sie nicht, ob Sie bereits mit XD vertraut sind oder Sie nur bestrebt sind , zum nächsten Schritt zu kommen, um Ihr endgültiges Video zu erstellen. Fühlen Sie sich frei, zur nächsten Lektion zu springen. Um dies zu schaffen, habe ich 19 Bildschirme, aber wirklich nur vier verschiedene Bildschirmdesigns. Wir haben diesen Bildschirm „Gespeicherte Rezepte“ , den Sie schon mehrmals gesehen haben. Wir haben dies, fügen Sie Rezept, Bildschirm, wo wir verschiedene Variationen davon haben; wo es nicht ausgefüllt ist, und wo es vollständig ausgefüllt ist. Wir haben diese „Speichern unter“ wie in welcher Kategorie Bildschirm, und dann, genau das gleiche, wir haben diesen „Gespeicherte Rezepte“ Bildschirm, aber es ist nur ein bisschen anders, wenn wir den Benutzer Rezepte auswählen, um eine Einkaufsliste, und dann, zuletzt, haben wir die eigentliche Einkaufsliste Seite. Sie können sehen, dass wir in der Lage waren, diese ganze Animation zu erstellen, indem Sie einfach kopieren und einfügen und einige Dinge umdrehen und dazwischen animieren. Lassen Sie mich Ihnen zeigen, wie ich das gemacht habe. Wir haben diese Interaktion bereits gesehen. Wir haben die „+“ -Taste getippt und dann diese neue Rezeptkarte, es kommt. Was ich als nächstes passieren wollte, war, und wir wollten, dass der Benutzer die Möglichkeit hat, eine URL aus der Zwischenablage einzufügen. Vielleicht schauen sie sich Instagram oder Pinterest an, oder auf einem ihrer Lieblings-Food-Blogs, und sie wollen ein Rezept von dort importieren. Sie halten nur gedrückt, um den Link zu kopieren, kommen Sie zurück in diese App, dann wird es sie auffordern, jede URL sie in ihrer Zwischenablage einfügen. Nachdem sie das getan haben, wollte ich klar sein, dass das Rezept geladen wurde. Sie wollen nie, dass ein Benutzer einfach hängen gelassen wird. Sie möchten ihnen zeigen, dass, was Sie getan haben, funktioniert hat, die Aktion, die Sie ergriffen haben, erfolgreich ist, aber wir laden nur die Daten. Das wollte ich hier. Sobald wir also diesen Benutzer auf dieses Element tippen, aus der Zwischenablage einfügen, wollte ich eigentlich den nächsten Bildschirm dieses Ladebildschirms haben. Ich wollte, dass es direkt in diesen Bildschirm mit einem Auflösen übergeht, und dann, was ich getan habe, ist ein Zeitauslöser hinzugefügt. Anstatt irgendetwas auf diesem Bildschirm tippen zu müssen, ist alles, was passiert, dass sich dieser Balken im Laufe der Zeit den ganzen Weg nach oben bewegt, um den Ladebalken zu füllen. Ich habe diese Dauer so eingestellt, dass sie in zwei vollen Sekunden passiert. Schauen wir uns an, wie das aussieht. Wir haben diesen Bildschirm „Rezept hinzufügen“. Wir tippen darauf, um von der URL einzufügen, und dann lädt es es. Sobald diese zwei Sekunden vorbei sind, haben wir einen weiteren Zeitauslöser, der uns zu diesem Bildschirm führt, wo wir alle diese Informationen tatsächlich laden. Wenn ich hier reinklicke, ist diese Gruppe, Gruppe 87, wo ich den Knopf und all diese Zutaten und all das Zeug habe. Das wird von unten verblassen. Wenn Sie sich erinnern, können Sie aus einem der vorherigen Videos sehen, wie ich das hier gemacht habe. Wenn wir hier drüben klicken, ist es die gleiche Gruppe, Gruppe 87 und die Deckkraft ist den ganzen Weg nach unten, aber wenn wir sie auftauchten, würden wir sehen, dass es alle die gleichen Informationen sind . Dadurch kann die automatische Animate ihre Sache tun, weil, sobald wir aktiviert haben, dass es nur die Differenz animiert, die Differenz zwischen null Prozent Deckkraft zu 100, die Differenz zwischen dieser Platzierung am unten und die Platzierung ganz oben. So habe ich diesen Übergang geschaffen. Dann wollte ich, dass der Benutzer das speichern kann. Wenn wir also in diesen „Speichern“ -Button klicken, können wir sehen, dass das diese neue Rezeptkarte einfach herunterklappen wird , weil wir wollen, dass es wie der gleiche Prozess scheint, aber der letzte Schritt in diesem Prozess, also halten wir es genau gleich, es ist das gleiche Modell, aber nur ein bisschen kleiner, so dass Sie sehen können, dass es der letzte Schritt ist. Um dies zu tun, mussten wir nur sicherstellen, dass dieses Element, dieses Rechteck mit den abgerundeten Ecken oben, auf beiden Zeichenflächen gleich benannt wird. Es heißt Rechteck 789, und hier drüben, wenn wir Befehl klicken, um zu tippen, den ganzen Weg in die untere Ebene, es heißt das gleiche Ding. Wenn Sie organisierter sind als ich, könnten Sie all Ihre Ebenen etwas benennen, das tatsächlich Sinn macht. Aber für mich, wenn ich entwerfe, neigt es dazu, schnell zu sein, und ich gehe nur zurück und mache das, wenn ich eine wirklich verwirrende Interaktion habe. Dann wollen wir, dass diese Informationen aus dem Bildschirm ausgeblendet werden, und diese Informationen werden eingeblendet. Wir können sehen, dass das ziemlich leicht passiert, wenn wir diese Animation passieren. Dann wollen wir uns mit dieser Checkbox-Situation befassen. Wie Sie sehen können, habe ich dieses Kontrollkästchen tatsächlich zu einer Komponente gemacht. Also, wenn ich immer wieder doppelt anklicke, bis wir hier sind, haben wir diese Komponente. Wir haben einen Standardstatus, der nicht markiert ist, und wir haben einen geprüften Zustand. Grundsätzlich war, was Sie tun könnten, wenn Sie wollten, eine Interaktion in der Hauptkomponente einrichten, um diesen geprüften Zustand tippen, ausschalten und aktivieren zu können . Ich wollte jedoch auch, dass diese Schaltfläche „Bestätigen“ auch den Status ändert. Ich habe aus diesem Grund zwei verschiedene Zeichenflächen für diese Interaktion verwendet. Was hier passiert, ist, sobald dieses Kontrollkästchen angetippt wird, wird es einfach zu dieser nächsten Zeichenfläche übergehen, wo wir dies deaktiviert haben, und wir haben auch die Schaltfläche „Bestätigen“ bei 100 Prozent Deckkraft. Lassen Sie uns darüber nachsehen, wir tippen auf Abendessen und es ist so einfach wie das. Dann von hier aus möchten wir, dass der Benutzer auf „Bestätigen“ klickt, und dann wird dies einfach aus dem Rahmen gehen, und wir möchten in der Lage sein, das neue Rezept in den Rahmen zu sehen. Wir wollen nicht nur, dass es automatisch erscheint, weil wir das Feedback geben und darauf aufmerksam machen wollen , dass: „Ja. Dieses Rezept wurde am Anfang der Kategorie Abendessen hinzugefügt.“ Lassen Sie mich Ihnen zuerst zeigen, was ich meine. Wir drücken „Bestätigen“. Hast du das gesehen? Genau das wollte ich passieren, und ich zeige dir, wie ich es gemacht habe. Es ist wirklich einfach, dieses Modal zum Verschwinden zu bringen. Es ist genau der gleiche Prozess, den wir gemacht haben. Auf dieser Zeichenfläche haben wir das Modal vollständig im Rahmen. Es heißt Gruppe 92 auf dieser Zeichenfläche. Wenn wir hier unten nach unten schweben, haben wir die gleiche Zeichenfläche namens die gleiche Sache, Gruppe 92, aber die Deckkraft ist den ganzen Weg nach unten und sie ist auch ganz unten. Dasselbe immer und immer wieder mit diesem Modal kommt rein und raus. Aber der wirklich lustige Teil hier ist diese Interaktion. Wenn wir hier in den Zustand tippen, an dem wir landen wollen, dann können wir sehen, dass wir diese vier Rezepte haben, ich werde nur diese ganze Scroll-Gruppe nehmen, kopieren und einfügen sie hier drüben. Dann nehme ich nur diese Elemente, wähle jedes von ihnen aus und ziehe sie so, dass wir die Garnelen Pasta als erste haben. Dann, wie Sie sehen können, wie wir es vorher hatten, habe ich dieses neue, das nur so leicht im Rahmen ist, werden wir die Deckkraft den ganzen Weg dort unten drehen, und da wir kopiert und eingefügt haben, werden die Scroll-Gruppen den gleichen Namen in beiden, was perfekt ist. Wenn wir in den Prototyp-Modus springen, können wir jetzt sehen, dass ich einen Zeitauslöser eingerichtet habe, nach nur 0,3 Sekunden wird er automatisch zu dieser nächsten Zeichenfläche animiert und ich habe tatsächlich Lockerung verwendet, und ich habe Snap verwendet, was es wirklich schnell macht. Ich mag wirklich, wie diese Interaktion aussieht. Lassen Sie uns eine Vorschau anzeigen. Wir werden es von hier aus sehen, weil es ziemlich schnell ist, wir drücken bestätigen, und da gehst du. So machen Sie diese Art von Interaktion. Als Nächstes kommen wir zu den guten Sachen. Nun, wir haben diesen Bildschirm gespeicherte Rezepte, aber das nächste, was wir wollen, dass die Leute in der Lage sein, zu tun ist, tatsächlich ihre Lebensmittelliste zu machen. Wir haben den Knopf da unten, wenn er gedrückt wird, was wir wollen, dass die Leute tun können, ist, wählen Sie die Rezepte, die sie in ihre Lebensmittelliste aufgenommen werden wollen. Um Feedback zu geben, dass die Auswahl funktioniert um zu verfolgen, wie viele Rezepte sie ausgewählt haben, möchte ich auch einen Zähler oben rechts haben. Wie Sie sehen können, haben wir 0,1,2,3 und 4, mit jeder Zeichenfläche wird ein neues Rezept ausgewählt. Aus diesem Grund haben wir in diesem Szenario tatsächlich nicht so sehr die Vorteile von Komponenten ausgenutzt. Denn was wir hätten tun können, ist einfach diese Interaktion zu haben, bei der jedes Mal, wenn eines davon angezapft wird, es in den ausgewählten Zustand wechselt und das hätte großartig funktioniert. Aber dann brauchen wir noch eine neue Zeichenfläche, um diesen Zähler aufsteigen zu lassen. Das war der einfachste Weg für mich, es zu tun. Alles, was ich wirklich getan habe, wurde mit Null-Rezepten begonnen, und wie Sie sehen können, hatte ich diesen Listen-Button im inaktiven Zustand generieren. Ich verschiebe einfach die Deckkraft auf 50, denn wenn der Benutzer keine Rezepte ausgewählt hat, sollten sie die Liste noch nicht generieren können. Die Liste würde nichts drauf haben. Das gibt ihnen nur mehr Feedback, dass sie ein Rezept auswählen müssen , um diesen Prozess verfolgen zu können. dieses Mock-up willen, werden wir so tun, als würde diese Person auf cremige Tomatensuppe als ihre allererste klopfen . Wir werden die Interaktion so einrichten, dass, wenn das getippt wird, es uns automatisch direkt zur nächsten Zeichenfläche bringt, und auf dieser nächsten Zeichenfläche wird der Zähler nach oben zu einem bewegen und die Schaltfläche „Liste generieren“ den ganzen Weg nach oben in Deckkraft. Das ist alles, was wir hier vier verschiedene Male machen. Wir verschieben den Status von nicht ausgewählt, um ihn auszuwählen, wir bewegen den Zähler nach oben 1,2,3 und 4. Schließlich, wenn sie alle vier ausgewählt haben, werden sie entscheiden, die Liste zu generieren. Wenn wir im Prototyp-Modus sehen, was das tun wird, wird es im Grunde automatisch in dieser Liste animiert und da dies Ihnen wahrscheinlich vertraut aussieht, ist dies ein Modal und so habe ich den gleichen genauen Prozess verwendet. Wir haben all dies gruppiert, Gruppe 113 und wenn Sie hier unten in der vorherigen Zeichenfläche schauen, heißt es 113, die Deckkraft ist den ganzen Weg nach unten, was uns erlauben wird, die Liste zu generieren und es wird nach oben streichen wie das. Lassen Sie uns das noch einmal durchgehen, damit Sie sehen können, wie das funktioniert. Jemand entscheidet, dass er eine Lebensmittelliste erstellen möchte. Dies wechselt zur Auswahl von Rezepten, um dem Benutzer mitzuteilen, was zu tun ist. Sie sind in der Lage, sie einzeln auszuwählen. Wir demonstrieren hier auch die Scroll-Gruppe, die ziemlich cool aussieht. Curry-Suppe, wir werden geladene Salat und Schokoladenkekse machen und Sie können sehen, dass die Theke den ganzen Weg bis zu vier ging. Wir werden die Liste generieren und jetzt können Sie sehen , dass die generierte Liste entweder nach Kategorie oder Rezept sortiert werden kann. Dies ist etwas, das ich nicht Prototypen aus, weil es für mein letztes Feature nicht super wichtig war. Aber ich wollte diese zusammenklappbaren Kategorien zeigen. Da es nach Kategorie sortiert ist, wollte ich, dass Sie dies zumindest für einen der Abschnitte, die ich gewählt habe, herstellen, öffnen und schließen können. Wir haben diese Interaktion, die ich Ihnen jetzt zeigen werde, wie das geht. Es ist am einfachsten, die Ergebnisse zu entwerfen als die erste Zeichenfläche, wenn das sinnvoll ist. Dies ist das Endergebnis. Das ist, was ich zuerst entworfen habe, ich habe diese ganze Liste erstellt, ich gruppierte sie zusammen, um die Dinge einfacher zu machen. Es heißt Gruppe 109, und wenn Sie hierher kommen, können Sie auch sehen, dass Gruppe 109 genau hier ist Gruppe 109. Wenn wir das ganz nach oben drehen, werden Sie sehen, dass ich einfach jedes dieser Elemente nahm und übereinander gestapelt habe, um sie zusammenzubrechen, denn genau das ist es, was das ist. Sie reduzieren diese Liste, um sie entweder zu erweitern oder zu reduzieren. Was wir jetzt tun können, ist in den Prototyp-Modus zu gehen und wenn wir dieses Produkt angezapft haben, dann wollen wir, dass es zu diesem animieren und wenn es wieder angetippt wird, dann wollen Sie, dass es wieder zusammenbricht, es wird einfach zurück zu diesem Bildschirm . Das ist ziemlich einfach. Das ist es, was wir hier gemacht haben, produzieren. Du kannst es einfach rauf und runter bringen. Wie Sie sehen können, musste ich auch dieses Backteil nehmen und es ganz nach unten in dieser Zeichenfläche verschieben , so dass es aus dem Weg gefahren werden würde, so dass Sie die ganze Liste sehen können. Ich wollte, dass Benutzer diese Rezeptliste öffnen und schließen können. Es ist nur eine Liste aller Rezepte, die enthalten sind, so dass, wenn Sie die Auswahl eines von ihnen aufheben möchten, können Sie. Ich habe gerade diese Komponente erstellt, in der einer der Zustände ausgeblendet ist und der Standardstatus mit all diesen so ist. Ich habe den gleichen genauen Prozess mit dem kollabierten Zustand gemacht. Sie können wahrscheinlich sehen, ob wir hier reingehen, wir haben alle diese Gruppen, die derzeit bei null Prozent Deckkraft sind, aber wenn ich sie aufbringe, können Sie sehen, dass all diese sind einfach dahinter versteckt und sie sind übereinander gestapelt. So habe ich das wirklich gemacht. Was ich wollte war, auch wenn du auf dieser Seite bist, wo all diese draußen sind, wenn du darauf tippst, wollte ich auch, dass diese zusammenbrechen, weil ich wollte, dass es Platz für dich gibt, um diese Rezepte zu sehen. Also sieh dir das an. Da gehst du. Um das zu tun, habe ich diese dritte Zeichenfläche geschaffen, auf der wir alle diese aus und erweitert haben. Es ist so ziemlich eine Kopie davon, aber mit all diesen erweitert, so dass, wenn Sie auf dieser Zeichenfläche sind und Sie darauf tippen, wird es Sie auf diese Zeichenfläche bringen. Aber wenn du auf dieser Zeichenfläche bist und darauf tippst, wird es dich immer noch auf diese Zeichenfläche bringen. Egal was, wenn Sie darauf tippen, um es zu erweitern, wird es nicht nur an sich erweitert, sondern es wird auch alle diese Listen zusammenbrechen. Die allerletzte Interaktion, die ich Ihnen zeigen wollte, war, Ihre Liste zu speichern. Nehmen wir an, dass ein Benutzer seine Liste hat, aber er geht nicht richtig einkaufen oder sie wollen sie einfach für später speichern, sie sind in der Lage, die Liste zu speichern und tatsächlich in der Lage, auf sie von ihrem Startbildschirm zugreifen. Wenn wir auf den neuen Startbildschirm gehen, sobald eine Liste gespeichert wurde, können Sie sehen, dass wir dieses Element hinzugefügt haben. Ich habe gerade ein kleines Listensymbol entworfen und ihm ein kleines Abzeichen mit der Nummer 1 gegeben , damit Sie wissen, wie viele Listen Sie gespeichert haben. Um das zu animieren, zeige ich Ihnen genau, was ich getan habe. Nehmen wir an, wir beginnen hier, Sie tippen auf „Liste speichern“. Sie können sehen, es ist die gleiche Interaktion, die wir hier hatten , als wir die Tomatensuppe in die Kategorie Abendessen kommen ließen. Ich zeige dir das nochmal, aber es ist so ziemlich das Gleiche. Was wir tun, ist, wir haben diesen Prototyp, so dass, wenn Sie auf Liste speichern klicken, dann kommen Sie hierher, und zuerst werden Sie auf nur diesem normalen Home-Bildschirm ohne die Liste landen. Wie Sie sehen können, wenn ich den Mauszeiger über, habe ich tatsächlich dieses Listensymbol ganz nach links mit der Deckkraft den ganzen Weg nach unten. Es ist wie immer so leicht auf der Zeichenfläche. Dann habe ich einen Zeitauslöser eingerichtet wo er auf diesem Bildschirm landet, aber nach einer halben Sekunde wird es automatisch zu diesem Bildschirm animiert, wo dies tatsächlich an Ort und Stelle ist und die Lockerung wird ein Kinderspiel sein, und es wird nur nehmen 0,2 Sekunden, so wird es wirklich schnell sein, genau wie die vorherige Interaktion. Das ist nur eine andere Möglichkeit, auf etwas aufmerksam zu machen, das auf den Bildschirm kommt. Sie könnten es einfach animieren , so dass Sie auf „Speichern“ tippen und Sie auf diesen Bildschirm gebracht werden. Aber das Hinzufügen der Interaktion davon, dass es in den Bildschirm kommt , treibt den Punkt wirklich nach Hause für den Benutzer, dass , ja, sie gespeichert und die App zeigt ihnen, ja, es wurde erfolgreich gespeichert und jetzt lebt es hier. Ich denke, dass das eine super wichtige Interaktion ist. Schauen wir uns das Ganze an und dann zeige ich Ihnen den gesamten Zeitraffer von mir, wenn Sie neugierig sind, wie das aussah. 12. Dein Video erstellen: Alle, ihr habt es bis zum letzten Schritt geschafft. Hier werden wir eine Schleife auf Ihre einzigartige App-Funktion setzen , so dass Sie sie in Ihrem Portfolio, Behance oder sozialen Medien teilen können . Ich habe versucht, diese letzte Lektion wirklich einfach für dich zu machen. Ich habe einen kleinen Ressourcenordner zusammengestellt, den ich Sie jetzt durchführe. In diesem Ordner haben wir zwei Dinge. Wir haben einige Hintergrundbilder, und ich habe diese gerade von Unsplash heruntergeladen, also ist es völlig kostenlos und lizenzfrei. Sie können einige Ihrer eigenen von dort herunterladen, wenn Sie möchten, oder Sie können Ihre eigenen erstellen. Dann ist das nächste, was ich habe, diese iPhone-Frames. Ich habe gerade eine in Schwarz erstellt und es ist wie ein Ton 3D Art von Overlay. Wir haben auch eine flachere in schwarz und eine flachere in weiß. Auch hier können Sie diese von verschiedenen Orten kostenlos herunterladen, so fühlen Sie sich frei, Ihre eigenen zu finden. Aber ich dachte nur, es wäre hilfreich, diese darin aufzunehmen. Was wir tun werden, ist Überlagerung dieses iPhone-Frame über Ihre Prototyp-Video, so dass es fügt einige Kontext und sieht wirklich realistisch. Jetzt ist es an der Zeit, Ihren Prototyp in XD aufzunehmen. Das ist wirklich einfach. Alles, was du tun wirst, ist auf dem allerersten Kunstboard deines Prototyps auszuwählen und auf das „Play“ -Symbol zu tippen und dann siehst du hier oben, du kannst mit der Aufnahme beginnen. Gehen Sie weiter, drücken Sie „Record“. Ich möchte immer sicherstellen, dass ich sehe, dass es für ein paar Sekunden zu zählen beginnt, um mir etwas Wackelraum zu geben, und dann werde ich anfangen, damit zu interagieren. Ich werde diesen Prozess hier durchlaufen. Ich gehe gerne langsam genug, damit du genau sehen kannst, was ich tue, aber nicht so langsam, dass es langweilig wird. Nehmen Sie sich Zeit. Hetzen Sie nicht durch. Stellen Sie sicher, dass Sie alles sehen können, was Sie tun. Stellen Sie sicher, dass Sie mit allem interagieren, was Sie zeigen wollten. Ehrfürchtig. Sobald Sie fertig sind, gehen Sie weiter und beenden Sie die Aufnahme. Dann geben Sie dem einen eindeutigen Namen und speichern Sie ihn auf Ihrem Desktop. Ich nenne es App-Prototyp. Großartig. Nun, was wir tun können, ist Doppelklick, um das in QuickTime zu öffnen und es zu trimmen. Wie ich schon sagte, ich mag es, ein wenig von einem Wackelraum am Anfang und am Ende zu verlassen , also ist es Zeit, es zu trimmen, stellen Sie sicher, dass es schön und eng ist. Um dies zu tun, stellen Sie sicher, dass Sie in QuickTime sind und verwenden Sie einfach die Steuerelemente Befehl T Mal sehen, wo das tatsächlich beginnt. Da kommt mein Cursor ins Spiel. Ich werde es nur ein bisschen davor stoppen. Dann werde ich es an den Anfang bringen und diese ganze Sache durchspielen und es stoppen, wann immer ich denke, es ist ein guter Zeitpunkt. Perfekt, genau da, trimmen. Auch ein Tipp, wenn es darum geht, Ihren Prototyp tatsächlich aufzunehmen, müssen Sie es ein paar Mal tun, um wirklich glatt zu werden und alle Interaktionen zu üben, das ist völlig in Ordnung. Stellen Sie sicher, dass Sie eine gute bekommen, bevor Sie vorwärts gehen. Ich werde das speichern, und ich werde es nur über diese Version speichern. Ehrfürchtig. Jetzt haben wir diesen App-Prototyp, und ich werde das direkt in meinen Video-Assets-Ordner werfen, zusammen mit den Hintergründen und den iPhone-Frames, die wir haben. Zuerst werde ich Ihnen zeigen, wie Sie dies in Premiere Pro tun. Sobald wir ein neues Projekt erstellt haben, haben wir dieses Projekt hier unten. Ich werde nur alles importieren, was ich brauche, und dann werden wir es in der Timeline eingrenzen. Erstens, natürlich werde ich in mein Prototyp-Video ziehen, das wir gerade getrimmt haben. Dann werde ich einen Hintergrund finden, den ich mag. Ich mache das hier. Dann werde ich einen iPhone-Rahmen finden. Ich werde dies mehr 3D suchen ein. Ehrfürchtig. Jetzt, wie ich schon sagte, wir können sie einfach in der Timeline eingrenzen. Zuerst werde ich dieses Hauptprototyp-Video hineinziehen und wie Sie sehen können, hat das Projekt die gleichen Dimensionen angenommen wie dieses erste Video, das wir abgelegt haben. Was wir tun werden, ist auf die Sequenzeinstellungen zu gehen. Wir werden das tatsächlich auf 1920 um 1080 ändern. Dann müssen wir nur noch diese Videospuren kleiner machen. Wir können unter den Effektkontrollen skalieren und sie einfach herunterbringen. Möglicherweise müssen wir das später anpassen, abhängig von der Größe des Rahmens, den wir einbringen. Aber das ist gut für den Moment und wie ich schon sagte, wir werden diese nur schichten. Natürlich wollen wir die Textur auf der Unterseite, dann wollen wir den Prototyp, und dann oben darauf wollen wir den iPhone-Rahmen. Es sieht ziemlich gut aus, aber wir müssen die Größe des Videos etwas mehr reduzieren , damit es perfekt in diesen Rahmen passt. Dann werde ich die Position tatsächlich nur ein bisschen bewegen , so dass sie perfekt zentriert ist dort drin. Das sieht gut aus. Aber ich möchte den Hintergrund ein wenig bewegen. Ich will, dass diese Falte zur Seite steht. Ich finde, das sieht gut aus. Sobald Sie damit zufrieden sind, dann können Sie gehen, um es zu exportieren. Alles, was Sie tun werden, ist zu Datei, Export, Medien zu gehen. Die Verknüpfung ist Befehl M und dann, wo immer es Ausgabename sagt, können Sie wählen, was Sie es benennen möchten und wo Sie es speichern möchten. Tu das einfach. Sie können hier sehen, dass alle Einstellungen gut aussehen, 1920 x 1080. Sie können Audio deaktivieren, wenn Sie möchten, nur da es kein Audio gibt. Dann können Sie auf „Exportieren“ klicken. Jetzt werde ich Ihnen zeigen, wie man das in iMovie macht, und es ist wirklich ähnlich. Aber leider können Sie in iMovie nicht mehr als zwei Videospuren schichten. Wir werden nur Schicht zwei, exportieren sie und bringen sie dann wieder ein und legen die dritte auf die Oberseite. Ich werde Ihnen nur zeigen, wie das ist, nur für den Fall, dass Sie keinen Zugriff auf Premiere Pro haben. Zuerst werde ich in unseren Hintergrund fallen, denn das ist, was wir auf den Boden wollen , und dann werde ich in unseren Prototyp fallen. Wir werfen den Prototyp so drauf. Dann dehnen wir das einfach aus, bis es das Ende unseres Videos erreicht. Es gibt diesen seltsamen Ken Burns-Effekt auf der Hintergrundebene, der bei jedem Importieren eines Fotos nur eine Standardeinstellung in iMovie ist. Wir werden das nur ausschalten. Wir werden Ernte tun, um zu füllen und dann sieht das gut aus. Doppelklicken Sie auf das Video. Dann, wenn Sie hier oben sehen, gibt es eine Option, die sagt, abgeschnitten und Sie können das auf Bild und Bild umschalten, was wir wollen, denn das wird uns erlauben, die Größe hier tatsächlich zu manipulieren. Machen wir das, machen Sie es einfach um diese Größe. Dann möchte ich die Platzierung des Hintergrunds ändern. Gehen wir hierher und machen uns einfach die Größe herum. Perfekt. Dann erscheint die Falte auf der rechten Seite ein wenig mehr. Ich finde, das sieht wirklich gut aus. Dann werden wir das exportieren und wir werden es tatsächlich wieder einbringen, damit wir dasselbe tun können, aber nur den Rahmen überlagern. Ich mache eine Akte, teile, Datei. Perfekt. Jetzt können wir eigentlich nur die gleiche Datei verwenden, also werden wir diese loswerden. Wir werden nach unserem Film auf dem Desktop suchen und ihn direkt hineinlegen. Kann sehen, ob wir durchschrubben, es sieht gut aus und jetzt müssen wir nur den iPhone-Rahmen oben legen, also lasst uns das scheißen und wir werden es hineinziehen. Wieder erhöhen wir die Länge und gehen stattdessen zu Bild und Bild. Wir müssen zuerst in die Ernte gehen und passen, damit Sie die ganze Sache sehen können. Das sieht gut aus und doppelklicken Sie wieder Bild und Bild, und ich werde nur das so machen, dass es perfekt passt. Jetzt spielen wir es und sehen, wie es aussieht. Das sieht toll aus. Wie Sie sehen können, sieht es genauso aus wie die, die wir in Premiere erstellt haben , es hat nur einen zusätzlichen Schritt gedauert. So sieht mein abschließendes Video aus. Ich kann es kaum erwarten, Ihre zu sehen, bitte teilen Sie es unten. Wenn Sie sich entscheiden, es in sozialen Medien zu teilen, zögern Sie nicht, mich bei MaddieBeard.ux auf Instagram zu taggen und MaddieBeard auf Twitter zu unterstreichen. Nichts würde mich glücklicher machen, als deine Projekte zu sehen und sie mit der Welt zu teilen. 13. Letzte Tipps: Bevor wir diesen Kurs abschließen, wollte ich ein paar Minuten dauern, um über einige häufige Missverständnisse, Fragen und solche Dinge zu sprechen , die Ihnen helfen könnten, wenn Sie gerade am Anfang Ihrer UX-Karriere stehen. Mein erster Tipp hier ist, dass Sie immer ein Warum hinter Ihren Entscheidungen haben. Als UX-Designer bist du nicht unbedingt ein Künstler, du bist ein Kommunikator und hilfst jemandem, ein Produkt zu verwenden und das Beste daraus herauszuholen. Es sollte immer einen Grund dafür geben, warum Sie bestimmte Designentscheidungen treffen. Diese Arten von Gründen sind wirklich wichtig, um in der Lage zu sein, zu artikulieren und zu zeigen und zu erzählen, nicht nur für Ihre Chefs, Kunden und Dinge wie diese, sondern auch für sich selbst, um tatsächlich zu verstehen, warum Sie die Dinge tun, die Sie tun und haben Gewissheit, dass es Forschung, Daten und Tests gibt, die in Ihre Entscheidungen gehen , weil das ist, was macht ein erfolgreiches Produkt. Mein zweiter Tipp ist, immer Ihre Prozessarbeit in Ihren UX Fallstudien und Portfoliostücken zu zeigen . Arbeitgeber wollen wissen, wie Ihr Prozess ist, und sie wollen wissen, was in Ihre Arbeit eingeht. Sie wollen nicht nur sehen, dass Sie eine hübsche Benutzeroberfläche erstellen können, sie wollen sehen, was darin eingeht. Ob es sich um Forschung oder 10 Iterationen oder was auch immer es ist. Sie sollten alles zeigen, was in Ihr Projekt , auf eine Weise, die für Ihre Zuschauer extrem verdaulich ist. Werfen Sie nicht nur alles, was Sie auf der Seite gemacht haben, sondern versuchen Sie, eine Geschichte darüber zu erzählen, wie Sie von Problem zu Lösung gekommen sind. Mein dritter Tipp ist ein bisschen technisch, aber ich denke, es ist wichtig und es geht um Konsistenz. Als UX-Designer müssen Sie üben, detailorientiert zu sein. Wenn es um Textgrößen, Konsistenz der Farben und Konsistenz des Abstands geht, sind diese Dinge von entscheidender Bedeutung. Wenn ein potenzieller Arbeitgeber oder Kunde Ihre Projekte durchläuft, sollten sie wirklich keine Fehler in dieser Hinsicht sehen. Sie sollten nicht sehen, dass Sie sich entschieden haben, eine Schrift auf dem Bildschirm zu verwenden, aber Sie haben zufällig zu einer anderen Schrift auf einem anderen Bildschirm gewechselt. Sie sollten nicht sehen, dass Sie 10 Pixel Polsterung diesem Szenario und 25 in diesem Szenario ohne guten Grund verwenden. Sie sollten Ihre Arbeit immer im Hinblick auf Konsistenz und Detailorientierung überprüfen , denn das ist etwas, das Arbeitgeber suchen werden. Mein letzter Tipp ist es, frühzeitig und oft zu testen. Das ist etwas, worauf sich die Leute im UX-Bereich überall einig sind. Es ist wirklich wichtig, Ihre Lösungen so früh und oft wie möglich in die Hände von echten Anwendern zu bringen . Das liegt daran, dass Sie als Designer unzählige Vorurteile haben und nicht unbedingt wissen, was die Leute tatsächlich tun werden. Vielleicht denken Sie, dass Sie wissen, was sie tun werden, sie könnten Ihnen sagen, was sie tun werden, aber das stimmt nicht immer mit dem, was sie tatsächlich tun und wie sie sich tatsächlich mit einem Produkt vor ihnen verhalten. Selbst bei Praxisprojekten oder Projekten, die nur Fallstudien für Ihr Portfolio sind, würde ich dringend empfehlen, jemanden dazu zu bringen, sie zu testen. Es wird nur helfen, Ihre Designs immer besser und besser zu werden, jedes Mal, wenn Sie testen. 14. Schlussbemerkung: Du hast es bis zum Ende dieser Klasse geschafft. Es ist ernsthaft das Beste, was Sie tun können, um Ihre Fähigkeiten zu verbessern und schließlich in eine Karriere in UX überzugehen . Es ist nicht immer einfach zu erscheinen und etwas Neues auszuprobieren und wirklich alles hineinzubringen, aber es lohnt sich immer. Ich hoffe wirklich, dass Ihnen die kreativen und strategischen Prozesse gefallen haben, die in ein Projekt wie dieses einfließen. Vergessen Sie nicht, Ihr Projekt unten hochzuladen, und zögern Sie nicht, zu dieser Klasse zurückzukehren, wann immer Sie mehr Übung, Erfahrung und Projekte unter Ihrem Gürtel erhalten möchten . Egal, ob Sie mehr App-Funktionen für die gleiche Idee erstellen oder ein paar völlig andere Lösungen tun möchten, ich würde Sie sehr ermutigen, einfach weiterzumachen. Ich habe es geliebt, diese Klasse mit dir zu teilen, und ich kann es kaum erwarten zu sehen, wie du sie benutzt hast, um etwas zu kreieren, das du noch nie entworfen hast. Vielen Dank für das Zuschauen. Viel Glück in Ihrer kreativen Karriere.