Lerne UX: Wireframing und Prototyping einer mobilen App

1. Einführung: Hallo. Mein Name ist Gene Guy. Ich bin Produktdesigner und -entwickler. Seit über 15 Jahren führe ich Produktdesign und -entwicklung durch. In dieser Klasse werde ich Ihnen beibringen, wie Sie mit Balsamiq und Adobe XD Wireframe und Prototypen erstellen. Wir werden eine mobile Beispiel-App, basierend auf einigen Beispiel-UX-Dokumenten wie Personas, Benutzerflüsse,die ich für die Klasse vorbereitet habe, Wireframe und Prototyp mobile Beispiel-App, basierend auf einigen Beispiel-UX-Dokumenten wie Personas, Benutzerflüsse, erstellen. Ich werde Ihnen einige Tipps zur Verwendung von Balsamiq und Adobe XD und meinen Prozess des Wireframings und Prototypings einer mobilen App zeigen. Diese Klasse ist für Anfänger und Fortgeschrittene UX-Designer, die ihre Wireframing- und Prototyping-Fähigkeiten lernen oder erweitern möchten. Am Ende der Klasse wird jeder Schüler ein abgeschlossenes Projekt haben, das er in seinem Portfolio präsentieren kann. Ich kann es kaum erwarten, Sie im Unterricht zu sehen, damit wir gemeinsam mit Wireframing und Prototyping beginnen können. 2. Was ist ein Wireframe: Was ist ein Wireframe? Wireframe ist der wesentliche Teil des Workflows eines Designers. Dies ist einer der wichtigsten Aspekte des Workflows eines Designers, da es hilft, sicherzustellen, dass eine Website oder mobile App einheitlich und übersichtlich ist, um eine positive Benutzererfahrung zu gewährleisten. Ein Wireframe ist eine einfache Darstellung Ihrer App oder Website mit geringer Wiedergabetreue. Betrachten Sie es als Blueprint für Ihre Website oder App. Es ist, wo die Anfangsphasen des Denkprozesses beginnen zu verstehen, welche Elemente auf dem Bildschirm ausgelegt werden. Stellen Sie sich vor, dass ein Drahtmodell einem Entwurf oder Grundriss eines Hauses ähnelt. Bevor Sie beginnen, ein Haus zu entwerfen, müssen Sie eine Blaupause oder einen Grundriss haben, um zu identifizieren, wohin die Küche gehen wird, wohin die Schlafzimmer gehen usw. Wireframes für eine mobile App oder eine Website dienen dem gleichen Zweck. Sie müssen abbilden, was auf jedem Bildschirm gehen wird, und Sie werden Boxen auf dem Bildschirm platzieren, um als Platzhalter für Elemente des tatsächlichen Designs zu fungieren gehen. Wohin wird die Navigation gehen? Wird es ein Heldenbild auf dem Bildschirm geben, usw. Wireframes ermöglichen es uns, schnell durch unsere Ideen zu iterieren , so dass wir Feedback von Interessengruppen zeigen und erhalten können. Wireframes geben die allgemeine Struktur der Seite an und wie die Navigation fließt. Beim Erstellen von Drahtmodellen wird jeder Aspekt der Website oder App durch eine Form oder einfache Grafik dargestellt. Felder mit diesen diagonalen Linien stellen Bilder dar, horizontale Linien werden verwendet, um Text darzustellen, und ein Kreis mit einem L darin wird am häufigsten als Logo verwendet. Ein guter Wireframe kann dabei helfen, die Vision für Ihre gesamte Website oder mobile App zu schaffen. Wireframe dienen als erste Stufe des Designs. Nachdem Wireframes abgeschlossen sind, erstellen Sie Modelle und Prototypen, aber Wireframes helfen, sicherzustellen, dass Sie mit Ihrem Produkt auf dem richtigen Weg sind , bevor Sie Zeit mit einem Design verschwenden, das am Ende scheint nicht so zu funktionieren, wie Sie es erwartet hatten. 3. Warum du den Entwurf Wireframe und den Prototyp drehen solltest: Warum sollten Sie Wireframe? Schnelles Wireframing und Prototyping sind wichtige Schritte in Ihrem Konstruktionsprozess. Es ermöglicht Designern, Entwicklern und Unternehmern, Ideen schnell herauszuholen. Indem Sie Wireframes schnell machen, können Sie die schlechten Ideen wegwerfen und die besten Lösungen für Ihre Web-App oder mobile App entdecken. Durch die Verwendung von Balsamic oder Adobe XD können Sie beispielsweise Drahtmodelle und Prototypen erstellen, die es dem Benutzer ermöglichen, den Konversationsinhalt in den Interaktionen zu fokussieren und nicht Details wie Farbschema, ein bestimmtes Bild anstelle eines anderen verwenden oder Größe von Schaltflächen und so etwas. All das Zeug kommt später in den Prozess. Der Hauptgrund für Wireframes und schließlich der Low-Fidelity-Prototyp dieser Wireframes besteht darin, sicherzustellen , dass alle notwendigen Elemente für jeden Bildschirm oder jede Seite alle dort drin sind und wie diese Elemente miteinander interagieren. Niedrige Treue hält die Konversation auf das Erkennen des Problems und die Kommunikation der funktionalen Lösung zentriert . Wireframing hilft Ihnen, das Layout Ihrer Inhalte zu visualisieren, Zeit im gesamten Designprozess zu sparen, indem Wireframe-Designs von Bildschirmen schnell ausspülen, einfach auf Benutzerfreundlichkeit testen, testen und verfeinern können. Ihre Navigation, führen Sie Rapid Prototyping mit Benutzern und Stakeholdern durch und bewerten Sie, ob Ihre Wireframes die besten UX-Praktiken einhalten. Wireframes helfen, Klarheit darüber zu geben, wie Elemente auf dem Bildschirm organisiert werden. 4. Über Balsamiq: Ich benutze Balsamiq schon seit ein paar Jahren. Es ist eines der besten Werkzeuge für schnelles Wireframing und Prototyping. Es ist sehr einfach zu erlernen, so dass Sie in der Lage sein, direkt in zu springen und mit dem Erstellen zu beginnen. Was Balsamiq so gut für Low-Fidelity-Wireframes macht, ist die Tatsache , dass es die Erfahrung des Skizzierens auf einem Notizblock oder Whiteboard reproduziert, aber Sie verwenden stattdessen einen Computer, sodass Sie Komponenten von Balsamiq auf Ihre Leinwand und schnell testen Ideen schnell, so dass Sie loswerden können, die schlechten Ideen und keine Zeit zu verschwenden. Wie Sie sehen können, gibt es viele große namhafte Unternehmen, die Balsamiq verwenden, so dass Sie in guter Gesellschaft sein werden. Wenn Sie sich Jobbeschreibungen für viele UX-Designer-Jobs ansehen, werden Sie feststellen, dass Balsamiq normalerweise eines der Tools ist , die Unternehmen mögen, um zu wissen, wie man es benutzt. Sie sehen hier Balsamiq kommt in drei Versionen: Balsamiq Cloud, die die Web-App ist, Balsamiq für Desktop, die auf Mac und Windows läuft, und dann gibt es Balsamiq Google Drive, die mit Google Drive integriert. Jede Version wird mit einer 30-Tage-Testversion geliefert, sodass Sie eine dieser Versionen herunterladen und für diesen Kurs verwenden können. 5. Navigator und Leinwand in Balsamiq: Inzwischen sollten Sie eine der kostenlosen Testversionen von Balsamiq heruntergeladen und installiert haben, wenn Sie sie noch nicht haben. Jetzt können wir Balsamiq öffnen und wir werden das Dashboard sehen, das aus mehreren verschiedenen Bereichen besteht. unserer linken Seite haben wir das Navigator-Panel. Im oberen Bereich haben wir die Symbolleiste. darunter haben wir die UI-Bibliothek, die alle UI-Steuerelemente enthält, die wir für unsere Projekte verwenden können. Dieser große Hauptbereich in der Mitte ist die Leinwand, hier platzieren wir alle unsere Kontrollen. Auf der rechten Seite befindet sich das Eigenschaftenfenster. In dieser Lektion werden wir über das Navigator-Bedienfeld in der Arbeitsfläche gehen. Das Navigator-Panel ist der Ort, an dem alle unsere Wireframes, Säuren oder Symbole leben. Wenn Sie ein neues Wireframe-Mockup erstellen, wird es in diesem Bereich angezeigt, und Elemente werden hier in den Canvas-Bereich gezogen. Lassen Sie uns ein schnelles Wireframe-Mockup machen und sehen, wie dieser Bereich funktioniert. Wir werden die Benutzeroberflächen-Bibliothek-Steuerelemente im nächsten Video durchgehen, aber lassen Sie uns jetzt ein paar Steuerelemente greifen, damit wir ein Modell bekommen können, um im Navigationsbereich zu erscheinen. Wir haben unser erstes einfaches Wireframe-Mockup und wie Sie sehen können, erscheint es im Navigator-Panel. Wenn Sie ein Wireframe-Mockup auswählen, indem Sie darauf klicken, wird unten rechts ein Pfeil angezeigt. Wenn Sie auf diesen Pfeil klicken, werden einige Optionen angezeigt: Umbenennen, Duplizieren, In Papierkorb verschieben und Alternative Version erstellen. Um Ihr Drahtmodellmodell umzubenennen, wählen Sie Umbenennen, und dann wird ein modales Fenster angezeigt, das neben der neuen Namensbezeichnung ein Eingabefeld enthält. Hier geben Sie den neuen Namen des Mockup ein und klicken Sie dann auf „Umbenennen“. Die nächste Option ist Duplizieren, wenn Sie darauf klicken, wird eine doppelte Version dieses Modells erstellt und am Ende des Namens wird es die Textkopie hinzufügen, um Sie wissen zu lassen, dass es sich um eine doppelte Version handelt. Sie können auch die Tastenkombination Befehl D verwenden, um eine doppelte Version zu erstellen. Als Nächstes haben Sie die Option In den Papierkorb verschieben. Wählen Sie aus, welches Wireframe-Mockup Sie löschen möchten, und wählen Sie In den Papierkorb verschieben, und das Mockup wird gelöscht. Das letzte Element im Menü ist das Erstellen einer alternativen Version. Wenn Sie diese Option auswählen, wird eine alternative Version erstellt, die unten rechts im Dashboard im Abschnitt Alternative Version des Eigenschaftenfensters angezeigt wird. Diese Versionen werden offizielle Version genannt, also die Originalversion, und die Alternate Version, die Sie in etwas einprägsameres umbenennen können, anstatt den Platzhalternamen, den sie anbieten. Wenn Sie mit der rechten Maustaste auf die offizielle Version klicken, wird die Option „Alle Alternativen verwerfen“ angezeigt. Wenn Sie mit der rechten Maustaste oder klicken Sie auf die „Alternative Version“ und klicken Sie auf den Pfeil, der angezeigt wird, werden Sie Optionen zum Umbenennen, Duplizieren, Als neues Mockup duplizieren, Zum Offiziellen bewerben, Merge with Official und Discard sehen. Auswählen und Umbenennen ist die gleiche Sache, wie wir zuvor gesehen haben, Wählen und Duplizieren, dupliziert diese alternative Version. Es wird eine Duplicate Version mit einem neuen Namen erstellen, aber es wird kein neues Drahtmodell erstellt. Wenn Sie ein neues Wireframe-Mockup erstellen möchten, müssen Sie die nächste Option auswählen, die als neues Drahtmodell duplizieren ist. Dadurch wird ein neues Drahtmodell angezeigt. Wenn Sie auf „Zum Offiziellen bewerben“ klicken, wird das Drahtmodell zur offiziellen Version und macht die vorherige offizielle Version, jetzt die frühere offizielle Version. Wenn Sie „Mit Offizieller zusammenführen“ auswählen. Es wird diese Alternative neben Ihrer offiziellen Version auf dem Bildschirm hinzufügen, und dann können Sie hinzufügen oder ziehen oder was auch immer auf der Alternate Version über die offizielle Version, um die offizielle Version zu aktualisieren. Schließlich können Sie diese Option für jede alternative Version auswählen, um sie zu löschen , oder Sie können auf den Pfeil in der offiziellen Version klicken und alle Alternate Versionen auf einmal löschen. 6. UI in Balsamiq: Lassen Sie uns nun über die UI-Bibliothek im Eigenschaftenbedienfeld sprechen. Die UI-Bibliothek ist eine Liste aller UI-Steuerelementtypen , die enthalten sind, sowie Assets, Symbole und Symbole. Die Bibliothek kategorisiert die Steuerelemente, so dass Sie auf eine der Kategorieschaltflächen wie „Alle“ klicken und alle Benutzeroberflächen-Steuerelemente in der Bibliothek anzeigen können. Oder Sie können auf „Container“ klicken und alle Steuerelemente der Container-Benutzeroberfläche anzeigen, wie z. B. ein iPhone, ein Browserfenster, ein iPad usw. Um ein UI-Steuerelement zur Arbeitsfläche hinzuzufügen, können Sie es entweder auf die Arbeitsfläche ziehen oder doppelklicken. Die Benutzeroberflächen-Bibliothek enthält außerdem die Elemente, die Sie in Ihr Projekt importiert haben, sowie Symbole, die Sie für Ihr Projekt erstellt haben. Wenn Sie eines der UI-Steuerelemente auswählen, kann ich Ihnen zeigen, wie das Eigenschaftenfenster ebenfalls funktioniert. Lasst uns ein Tasten-Steuerelement schnappen. Wenn ich es der Arbeitsfläche hinzufüge, bleibt es ausgewählt, und rechts im Dashboard sehen Sie die Eigenschaften für dieses Schaltflächen-Steuerelement im Eigenschaftenbedienfeld. Sie können die Eingabefelder für Position und Größe sehen , mit denen ich einen neuen Satz von Zahlen eingeben kann, und wenn ich auf „Enter“ klicke, wird die Schaltfläche aktualisiert. Es gibt einen Schichtabschnitt, in dem ich den Knopf nach vorne bringen kann, ihn vorwärts bringen, rückwärts schicken oder zurückschicken kann. Es gibt einen Autosize-Sektion und einen Farbabschnitt, mit dem ich die Hintergrundfarbe der Schaltfläche ändern kann, indem ich auf dieses Symbol „Hintergrundfarbe“ klicke und eine neue Farbe auswähle. Ich kann der Schaltfläche auch ein Symbol hinzufügen. Ich kann nach einem Symbol suchen, indem ich in das Suchfeld des Symbols eintippe, oder ich kann auf das Symbol „Icon Library öffnen“ klicken, um alle verfügbaren Symbole anzuzeigen. Dies sind die Font Awesome Icon Set, das vorinstalliert ist. Wenn ich nach dem Apple-Logo suche, wird es angezeigt und dann kann ich darauf doppelklicken, damit es zu meiner Schaltfläche hinzugefügt werden kann. Dann kann ich auf das Symbol „Drehen 90 Grad“ klicken, um das Symbol innerhalb der Schaltfläche zu drehen, oder ich kann auf die Schaltfläche „Symbol entfernen“ klicken, um es vollständig von der Schaltfläche zu löschen. Unter dem Symbol Suchfeld befindet sich ein Schieberegler, mit dem ich das Symbol von extra klein bis doppelt extra groß skalieren kann. Es gibt auch einen Link Abschnitt, in dem ich die Schaltfläche anklickbar machen kann , so dass es mich zu einem anderen Marker bringt. Diese Funktion ermöglicht es Ihnen, Ihre Wireframes so einzustellen, dass sie zu einem anklickbaren Prototyp werden. Dann gibt es einen Menü-Abschnitt, , wenn ich auf den Abwärtspfeil klicke, der Schaltfläche hinzugefügt wird. Es gibt auch einen State-Abschnitt, so dass ich den Status der Schaltfläche auswählen kann. Ich kann es normal machen, ich kann es auswählen, was es blau wird. Ich kann es im Fokus machen , was eine dünne blaue Linie um den Knopf legt, oder ich kann es deaktivieren, dies gibt den Effekt, den der Knopf ausgegraut wird. Dann ganz unten gibt es einen Textabschnitt, in dem ich fett, kursiv, unterstrichen oder die Schriftgröße oder die Textausrichtung ändern kann. Wenn Sie mehrere Steuerelemente ausgewählt haben, werden Optionen zum Ausrichten und Verteilen dieser Steuerelemente angezeigt. Ich würde vorschlagen, einige dieser Kontrollen durchzugehen und mit ihren Eigenschaften herumzuspielen , um zu sehen, was jeder von ihnen tut. Ich werde viele dieser Steuerelemente im nächsten Abschnitt durchlaufen, und ich werde Ihnen zeigen, wie ich Drahtmodell erstelle. Wenn keine Steuerelemente ausgewählt sind, im Eigenschafteninspektor Notizen für das ausgewählte Drahtmodell angezeigt. Durch Klicken auf die Schaltfläche „Projektinfo“ in der Symbolleiste wird das Fenster „Projektinfo“ angezeigt und ermöglicht es Ihnen, das Fenster „Projektinfo“ angezeigt und ermöglicht es Ihnen die projektweiten Einstellungen für die Projektskin, die Schriftart, die Verknüpfung und die Auswahlfarbe zu definieren . Diese Einstellungen werden auf alle Drahtmodellen im Projekt angewendet. Im Abschnitt „Haut“ erhalten Sie zwei Skins, denen Sie Ihre frühen Ideen mit einem groben skizzenhaften Look bearbeiten können. Später, indem Sie auf „Wireframe“ klicken, aktualisieren Sie sie in ein klareres, poliereres Aussehen, wenn sie bereit für die Präsentation sind. 7. Balsamiq Toolbar: Lassen Sie uns nun über die Symbolleiste am oberen Rand des Dashboards sprechen. Oben links befindet sich ein blau markiertes Symbol, Sie das Navigator-Bedienfeld ausblenden und einblenden können. Daneben haben Sie ein Symbol, mit dem Sie Ihre Drahtbilder in einem Miniaturansichtsrasterformat anzeigen können, und das Pluszeichen, mit dem Sie ein neues Drahtmodell hinzufügen können. Im oberen mittleren Bereich haben Sie Schaltflächen zum Rückgängigmachen und Wiederholen Ihrer Aktionen, Vergrößerungsglas, Symbole zum Vergrößern, Verkleinern und Vergrößern usw. Wenn Sie ein Element auf der Leinwand auswählen, haben Sie Symbole , die aktiv werden, in dem Sie die ausgewählten Elemente gruppieren können. Sie haben ein Symbol, das die Position eines Elements ändert, es nach vorne bringt, es nach hinten sendet usw. Dann auch ein Symbol, um ein Element zu sperren, so dass es nicht verschoben werden kann, während Sie arbeiten. Rechts neben dieser Gruppe von Symbolen befindet sich ein Suchfeld, in dem Sie schnell nach UI-Steuerelementen suchen können. Daneben befindet sich eine Schaltfläche zum Ausblenden und Anzeigen der UI-Bibliothek und danach gibt es ein Symbol, um einen Kommentar hinzuzufügen. Wenn Sie in das Feld Kommentare hinzufügen klicken, werden Sie zunächst nach Ihrer E-Mail und einem Namen gefragt Anschließend können Sie Kommentare hinzufügen, Kommentare löschen und Kommentare bearbeiten. dem nächsten Werkzeug können Sie den Inspektor aus- und einblenden. Danach wird ein Symbol, das die Projektinformationen aus- und einblendet, und das letzte Symbol ist das Wiedergabesymbol, das Sie klicken würden, um einen Prototyp Ihres Satzes von Drahtmodellen anzuzeigen. 8. Beginne das Wireframing in Wireframing in Balsamiq: Basierend auf allem, was wir bisher in früheren Lektionen getan haben, lassen Sie uns anfangen, einige Wireframes zu erstellen. Im Wesentlichen, was ich mache, wenn ich zum ersten Mal beginne, habe ich gerne einen Prozess, bevor ich beginne, ein Drahtmodell zu skizzieren. Was ich hier gemacht habe, waren ein paar Vorlagen, nur um Ihnen eine Vorstellung von meinem Denkprozess zu geben, während ich beginne, Wireframes zu erstellen. Die App, die ich in dieser Reihe von schnellen Wireframes machen werde, werde ich wahrscheinlich etwa fünf von ihnen machen, ist eine Workout-App. Was ich tat, war, dass ich schnell ein paar Personas gemacht habe, Personas sind Menschen, die die App verwenden würden. Warum würden sie die App verwenden, was ihr Ziel für die Verwendung der App ist? Ich könnte den Benutzer im Sinn haben, während ich Ideen skizziere. Name dieser ersten Person ist Jennifer. Ihr Ziel ist, dass sie einen Heimtrainingsplan braucht , weil sie keine Zeit hat, ins Fitnessstudio zu gehen. Sie macht gerne Körpergewichtsübungen und Cardio, und sie zieht es vor, keine Gewichte zu verwenden, wenn sie trainiert. Dies ist die erste Person. Die zweite Person, die geschaffen wurde, war David. Hier sind seine Details. Er ist ein Verkaufsleiter, 44 Jahre alt, hat einen MBA, reist viel für die Arbeit. Er braucht einen Trainingsplan zu Hause, weil er keine Zeit hat, ins Fitnessstudio zu gehen. Er macht gerne Körpergewichtsübungen, Gewichte und Cardio. Er braucht seine Trainingseinheiten, um kurz zu sein, aber hohe Wirkung, weil er nicht viel Zeit zum Trainieren hat. Dies sind meine ersten zwei Personas, die ich für diese Übung des Wireframing dieses Workout-App verwenden werde . Sie können auch Zugriff auf diese Vorlage haben. Ich werde es als herunterladbaren Link in die Notizen einfügen und Sie können diese Datei als Ausgangspunkt für Ihre Projekt-App verwenden . Danach habe ich schnell erstellt, was ich denke, sollte auf dem Bildschirm sein oder was der Bildschirm sein sollte, die fünf Bildschirme, die ich werde Wireframe. Dies sollte den Kontobildschirm erstellen. Nachdem Sie Ihr Konto erstellt haben, öffnen Sie Ihren Bildschirm, wo Sie Ihre Informationen und Ziele für Ihr Profil hinzufügen, und wählen Sie Ihre Trainingspräferenzen aus. Danach wird der nächste Bildschirm sein, dass Sie ein Training aus einer Liste von Trainingseinheiten auswählen. Sobald Sie diese Listen von Trainingseinheiten haben, werden Sie zu einem Bildschirm weitergeleitet. Sobald Sie ein Training ausgewählt haben, werden Sie zu einem Workout-Detailbildschirm weitergeleitet, in dem das Training erläutert wird. Wenn Sie dann auf das Video klicken, beginnt es, das Video des Trainings abzuspielen, und dann beginnen Sie mit dem Video zu trainieren. Ich möchte nur ein paar schnelle notieren einige Notizen, was jeder Bildschirm haben sollte, erlauben Sie mir, wie ich es skizziere. Ich habe auch einen schnellen Flow gemacht. Haben Sie ein Konto, wenn Sie die App zum ersten Mal aufrufen? Wenn ja, melden Sie sich an, ich werde keine Anmeldebildschirme erstellen. Dies wird ausschließlich für Leute sein, die kein Konto haben, dass ich den Fluss der Wireframes für diesen Fluss durchführen werde . Haben Sie ein Konto? Nein. Sie erstellen ein Konto. Nachdem Sie ein Konto erstellt haben, richten Sie ein Profil ein. Wählen Sie aus einer Liste von Trainingseinheiten aus. Du hast den Workout-Detail-Bildschirm. Sobald Sie ein Training ausgewählt haben, sehen Sie sich das Training an, und das ist das Ende des Flow. 9. Das Abgrenzen des Kontos erstellen: Beginnen wir damit, unseren Wireframe zu erstellen. Eines der ersten Dinge, die ich beim Erstellen mobiler Wireframes in Balsamiq tun, ist sicherzustellen, dass der Bildschirm, für den ich den Wireframe erstelle , die gleiche Bildschirmgröße wie das Mobiltelefon hat, für das ich entwerfen werde. Lassen Sie uns einen neuen Wireframe erstellen, lassen Sie uns auf das Pluszeichen klicken, es fügt unseren neuen Wireframe hinzu, und gehen Sie zu iOS, da wir eine mobile iOS-App erstellen werden. Wechseln Sie zu iOS, doppelklicken Sie auf iPhone, um es der Arbeitsfläche hinzuzufügen. Wenn Sie nun dieses UI-Steuerelement auswählen, können Sie rechts im Eigenschaftenfenster sehen, es ist das iPhone 10. Was ich tun möchte, ist diese Reihe von Wireframes für das iPhone 8 erstellen. Klicken wir auf iPhone 8. Sie nun sicher, dass unsere Bildschirmgröße die gleiche Größe wie ein tatsächliches iPhone 8 hat. Die tatsächliche Größe des iPhone 8 beträgt 375 mal 667. Lassen Sie uns ein Rechteck greifen, fügen Sie es der Leinwand und geben Sie ihm eine Größe von 375 mal 667. Jetzt sollte der iPhone-Rahmen dahinter 429 mal 848 sein. Wie Sie sehen können, tippe ich nur diese Dimensionen im Größenabschnitt hier im Eigenschaftenfenster ein. Lassen Sie es uns ausrichten, um sicherzustellen, dass unser Rechteck da drin ist, in der Mitte dort. wir nun die iPhone-Bildschirmgröße so erstellt haben, dass sie genau die gleichen Bildschirmgrößen wie ein iPhone 8 hat, erstellen wir ein Symbol, so dass wir das gleiche Wireframe-UI-Steuerelement in allen unseren Markups verwenden können . Lassen Sie uns den iPhone-Rahmen auf der Rückseite greifen, greifen wir das Rechteck, das wir gerade erstellt haben, und lassen Sie uns sie gruppieren. Bevor wir ein Symbol erstellen, müssen wir es gruppieren. Sie können entweder Befehl G tun, um sie zu gruppieren oder mit ihnen beide ausgewählt, Sie können diese Schaltfläche hier klicken, die Schaltfläche Gruppieren. Sobald Sie es gruppieren, sehen Sie, dass es sich violett färbt. Jetzt rechts sehen Sie, dass Sie die Möglichkeit haben, es in ein Symbol zu konvertieren. Lassen Sie uns zuerst unser neues Symbol nennen, nennen wir es iPhone 8, und lassen Sie es in Symbol konvertieren. Jetzt haben wir es als Symbol, das wir in allen unseren Markups für dieses Projekt verwenden können . Woher wissen wir das? Wenn wir zu Symbolen gehen, sehen wir unser iPhone 8 jetzt als eines der UI-Steuerelemente. Beginnen wir mit dem Erstellen eines Kontobildschirms. Was wir auf dem Bildschirm wollen, ist ein Bild für ein Logo, Sie wollen einen Titel, und Sie möchten einige Eingabefelder, Nutzungsbedingungen Kontrollkästchen, die Menschen wählen können, um den Nutzungsbedingungen zustimmen. Wir werden ein erstellen Sie ein Konto Button und diese Art von Sache wollen. Beginnen wir mit dem Logo, wir werden nur ein Bild dafür schnappen. Gehen wir zu Quick Add hier oben rechts, lassen Sie uns in diesem Eingabefeld klicken und lassen Sie uns Bild eingeben, und Sie sehen Bild kommt hier nach oben. Lassen Sie uns darauf doppelklicken und das fügt es hinzu, und fügen Sie es unserem Bildschirm hinzu. Siehst du, es gibt eine blaue Linie, sie lässt dich wissen, dass sie zentriert ist. Lassen Sie uns nun einen Titel für unseren Bildschirm erstellen. Wir können entweder oben rechts hier gehen und Text oder Label eingeben, um zu finden, was wir wollen, oder wir können zum Text gehen, klicken Sie hier auf die Schaltfläche Text und wir sehen unsere UI-Steuerelemente in Bezug auf Text. Was wir wollen, ist ein Label, also ziehen wir das in den Bildschirm auf die Leinwand. Lassen Sie uns den Titel nennen, Erstellen Sie ein Konto, und machen Sie es ein wenig größer. Hier rechts im Eigenschaftenfenster machen wir es 28. Zentrieren wir das auch. Lassen Sie uns nun einige Eingabefelder erstellen, damit Benutzer ihren Vornamen, ihre E-Mail-Adresse und ihr Kennwort eingeben können, um ihr Konto zu erstellen. Gehen Sie zurück hier zu Quick Add ist, was ich gerne tun. Lassen Sie uns nach einer Eingabe suchen, Texteingabe direkt hier. Nimm das einfach und lass es uns mitziehen, damit es ungefähr die gleiche Breite wie der Titel hat. Lassen Sie uns ein anderes Label über diese Eingabefelder erhalten. Doppelklicken Sie hier auf diesen Text, es gibt ein Label und nennen wir es Vornamen. Nun geht dieses Label mit diesem Eingabefeld hier. Wir wollen sie gruppieren, damit wir diese einfach duplizieren und dann weitere Eingabefelder erstellen können . Es macht es viel einfacher. Wählen wir den Vornamen aus, wählen Sie das Eingabefeld, und lassen Sie uns sie gruppieren, und jetzt haben wir unsere Gruppen-UI-Steuerung hier. Jetzt duplizieren wir das. Wir können entweder Befehl D tun oder wir können hier auf diese Schaltfläche kommen und klicken Sie auf „Duplizieren“ und das wird das Eingabefeld duplizieren. Rufen wir diese eine E-Mail an. Es ist Sache des Benutzers, seine E-Mail hier einzugeben. Lassen Sie uns noch eins machen, nennen wir dieses ein Passwort, um ihr Passwort einzurichten. Doppelklicken Sie dort und geben Sie dann Passwort ein, und um raus zu kommen, klicken wir auf dieses kleine Home-Symbol hier, das es wieder aus der Leinwand bekommt. Wir haben unsere Eingabefelder für den Benutzer, um sein Konto zu erstellen. Lassen Sie uns jetzt die Nutzungsbedingungen hinzufügen. Was wir wollen, ist ein Kontrollkästchen, also lassen Sie uns zu diesem Quick Add gehen, lassen Sie uns das Kontrollkästchen eingeben. Hier haben wir es hier, lassen Sie uns doppelklicken, es wird es hinzufügen, und lassen Sie uns diesen Text hier ändern, um Nutzungsbedingungen zu sagen. Da gehst du. Jetzt brauchen wir eine Schaltfläche, so dass der Benutzer, sobald er alle diese Informationen ausfüllt, kann er auf eine Schaltfläche klicken, die sie zum nächsten Bildschirm bringt. Gehen wir zu Buttons, und hier haben wir diese erste Schaltfläche und wir können einfach darauf doppelklicken, um es hinzuzufügen, und lassen Sie uns es ein wenig größer machen. Lassen Sie uns diesen Text ändern, um ein Konto zu erstellen. Machen wir unseren Knopf etwas größer und zentrieren Sie ihn. Dies sieht aus wie eine ziemlich gute Low-Fidelity erstellen Sie einen Account-Bildschirm. Nur noch eine Sache, sagen wir, wir haben jemanden, der bereits ein Konto hat, kein Konto benötigt, also möchte er sich einfach anmelden. Also lassen Sie uns eine Option dafür erstellen. Gehen wir nach oben und herum, suchen wir einen Text, doppelklicken Sie darauf, bringen Sie diesen runter. Mal sehen, was sollen wir sagen? Nun, lassen Sie uns sagen, ich habe bereits ein Konto, und wir möchten, dass die Aktion , die sie ergreifen, ist, auf einen Login-Button zu klicken. Lassen Sie uns diesen Text duplizieren, und dann ändern wir ihn, legen Sie ihn daneben und rufen wir diesen Login auf. Lasst uns diese gruppieren, damit wir sie leicht bewegen können. Doppelklicken Sie auf diesen Login und ändern seine Farbe, so dass wir wissen, dass es sich um einen unterstrichenen Link handelt. Erstellen Sie einen unterstrichenen Benutzerlink und ändern Sie die Farbe, um blau zu sagen. Klicken Sie auf die „Startseite“, um wieder raus zu kommen, und so haben Sie es. Das ist unsere Erstellung eines Account-Bildschirms, wo wir unser Logo oben haben, den Titel des Bildschirms, der das Konto erstellt. Wir haben unsere drei Eingabefelder, damit der Benutzer seinen Vornamen, seine E-Mail und sein Passwort eingeben kann. Wir haben eine Nutzungsbedingungen. Sie würden auf dieses Kontrollkästchen klicken und dann ein Konto erstellen. Wenn sie bereits ein Konto haben, klicken sie auf einen Login, und sie werden zum Anmeldebildschirm gehen anstatt hier auf dem Bildschirm „Konto erstellen“ zu sein. Lassen Sie uns das eigentlich nennen. Nennen wir unseren Wireframe hier, den wir gerade erstellt haben. Klicken Sie auf „Umbenennen“ und rufen Sie diese erstellen Sie ein Konto, und dort gehen Sie. Beginnen wir mit der Erstellung unseres nächsten Bildschirms, der der Profil-Setup-Bildschirm ist, und wir werden das im nächsten Video tun. 10. Den Wireframing verwenden: Lassen Sie uns nun unseren Profil-Setup-Bildschirm erstellen. Im vorherigen Video haben wir unseren Bildschirm „Konto erstellen“ erstellt, so dass wir jetzt zu dem, was mit dem Benutzer passiert , sobald er auf die Schaltfläche „Konto erstellen“ klickt. Wir werden ein neues Drahtmodell erstellen. Lässt dieses Drahtmodell duplizieren, und lassen Sie es uns umbenennen und nennen es Profil-Setup. Lassen Sie uns alles löschen, was wir auf diesem Bildschirm haben, damit wir neu beginnen können. Für unser Profil-Setup der Benutzer seinen Vornamen hier auf dem Bildschirm „Konto erstellen“ ein. Das wird auf dem Bildschirm „Profil-Setup“ angezeigt. Lassen Sie uns nach einer Beschriftung suchen, doppelklicken Sie. Bringen wir es auf die Leinwand. Nehmen wir an, auf dem Bildschirm „Konto erstellen hieß sein Name Joe. Lasst uns das etwas größer machen. Machen wir das 28. Ist das zentriert? Ja. möchten, dass der Benutzer Informationen in verschiedenen Abschnitten ausfüllt, so dass wir einen Geschlechterabschnitt haben, welche Höhe sie haben, ihr Fitnessniveau und welche Art von Trainingseinheiten sie mögen. Auf diese Weise können Sie all diese Informationen von ihnen erhalten, und es wird sie in ihrem Profil füllen und ermöglichen der App, eine Liste von Trainingseinheiten basierend auf ihren Trainingseinstellungen anzuzeigen. Lassen Sie uns den Geschlechterbildschirm erstellen. Wir wollen ein anderes Label bekommen. In der Tat können wir diesen einfach duplizieren. Lass es uns etwas kleiner machen. Lasst uns wieder rausziehen. Nennen wir es Gender. Lasst uns das etwas kleiner machen. Es ist immer noch zu groß. Geschlecht. Lassen Sie uns nach einigen Optionsfeldern suchen. Geben wir Radio ein. Hier gehen wir, doppelklicken. Fügen wir dies hinzu und lassen Sie uns dies ändern, um Male zu sagen, diese Option, dann lassen Sie uns das duplizieren und rufen Sie das nächste Female auf. Das ist unser Geschlechterbereich. Lassen Sie uns das gruppieren, damit wir diese leicht bewegen und dann zentrieren können. Nun, nein, lassen Sie uns die links ausrichten. Der nächste Abschnitt, den wir wollen, ist die Höhe. Gehen wir hier rein. Lassen Sie uns das kopieren. Nun, nein, lass es uns einfach sehen. Es war um 20 Uhr. Gehen wir wieder raus. Lassen Sie uns eine Beschriftung greifen, doppelklicken, und rufen Sie uns diesen Abschnitt Höhe. Machen wir es 20 ähnlich wie Geschlecht, und lassen Sie uns einige Texteingabefelder greifen, damit sie ihre Höhe in Fuß und in Zoll eingeben können . Lassen Sie uns Eingabe eingeben, Texteingabe, doppelklicken Sie darauf. Bringen wir es auf den Bildschirm. Lasst uns die Größe nach unten, und dann lasst uns ein paar Texte schnappen. Ich schätze, wir können auch dafür ein Label machen. Doppelklicken Sie darauf. Sagen wir, dieser erste ist Füße. Fügen wir hier ein paar Doppelpunkte hinzu. Lasst uns die zusammenfassen. Das Eingabefeld und der Fußtext, Befehl G. Lassen Sie uns das duplizieren, Befehl D, oder Sie könnten auch nach oben gehen, wie wir zuvor getan haben. Lassen Sie uns diesen Zoll nennen. Gehen wir wieder raus. Das ist unser Höhenabschnitt. Lasst uns das alles schnappen. Lasst uns sie gruppieren, damit wir sie leicht bewegen können. Das ist die Höhe. Lassen Sie uns nun den Fitness-Level-Abschnitt erstellen. Lass uns nochmal ein Etikett schnappen. Ich denke, wir müssen die Textschaltflächen-Label einschließen. Doppelklicken Sie darauf und lassen Sie uns tippen. Machen Sie diesen Text auf Fitness-Level. Noch mal, lass uns das 20 machen. Suchen wir ein paar Radiobuttons. Fügen Sie den Doppelpunkt auch erneut hinzu. Optionsfeld. Was wir wissen wollen, ist, ob sie die Anfänger, Erfahrene oder Fortgeschrittene haben . Dieser erste wird Anfänger sein. Lassen Sie uns das duplizieren. Als Nächstes sagen wir Advanced. Duplizieren Sie das noch einmal. Dies wird erfahren sagen. Wieder, lasst uns diese gruppieren. Lassen Sie uns nun einen Abschnitt für sie erstellen, um die Art der Trainingseinheiten auszuwählen, die sie mögen. Lasst uns nochmal ein Etikett schnappen. Geben Sie die Beschriftung ein, doppelklicken Sie auf. Ich würde sagen, Workouts, die Sie mögen. Noch mal, lass uns das 20 machen. Lassen Sie uns haben, was Bilder von diesen Workouts sein würde. Es wird ein Bild von Cardio haben, das sie auswählen können, Gewichte, die sie auswählen können, treffen Training, das sie auswählen können, oder Körpergewichtstraining. Lassen Sie uns nach einem Bild suchen. Doppelklicken Sie darauf. Mal sehen, schnell. Das ist zu groß. Ja, ein bisschen zu groß. Lassen Sie uns das hier einziehen. Fügen wir ein Etikett hinzu, und nennen wir es Cardio. Lassen Sie uns diese gruppieren, so dass wir sie leicht duplizieren können. Lasst uns das nach oben bewegen. Klicken Sie auf „Zurück“. Jetzt duplizieren wir das. Nennen wir das hier „Gewichte“. Zentrieren wir das. Lassen Sie uns diese noch einmal duplizieren, um eine weitere Zeile zu erstellen. Es sieht so aus, als würden uns der Weltraum ausgehen. Lassen Sie uns versuchen, alles nach oben zu bewegen, weil wir einen Platz für unseren Knopf am unteren Rand brauchen. Lasst uns das nach oben bewegen. Bewegen Sie diesen etwas nach unten. Nennen wir diesen Text hier Hit. Sie können auf die Home-Schaltfläche klicken oder auf Canvas doppelklicken, um wieder zu gelangen. Lassen Sie uns das duplizieren. Nennen wir das Bodyweight, also machen sie gerne Bodyweight Training. Das sieht gut aus. Lassen Sie uns nach unserem Knopf suchen. Doppelklicken Sie darauf. Nehmen wir an, die Schaltfläche sollte „Weiter“ sagen. Lassen Sie uns den Knopf ein wenig größer machen und zentrieren Sie ihn. Das ist unser Profil-Setup-Bildschirm. Im vorherigen Film haben wir den Bildschirm „Konto erstellen“ erstellt. Benutzer füllt dies aus, geben Sie ihren Vornamen ein, sein Vorname wird in der Profil-Setup angezeigt, und dann wählen sie ihre Auswahl, um weiterhin ihr Profil einzurichten, das sein Geschlecht auswählen wird, ihre Höhe, welche Fitness-Level sie sind, und die Art der Trainingseinheiten, die sie mögen, und dann klicken sie auf „Weiter“. Von dort, sobald sie auf „Weiter“ klicken, werden sie zum nächsten Bildschirm geführt, den wir im nächsten Video machen werden, das eine Liste der Workouts Bildschirm sein wird. Beginnen wir mit dem Erstellen dieses Bildschirms im nächsten Video. 11. Wireframing der Liste von Wireframing: Beginnen wir mit der Erstellung einer Liste des Workout-Bildschirms. Auf diesem Bildschirm können Benutzer eine Liste der Trainingseinheiten nach Kategorie anzeigen. Sie können nach bestimmten Workouts oder Übungen suchen, die sie absolvieren möchten, wie Burpees oder vielleicht einige Beinübungen. Es wird eine Bodman-Navigations-Tab-Leiste geben, die es Benutzern ermöglicht, zum Home-Bildschirm, zum Workout-Bildschirm, was wir gerade erstellen, und zu einem Profil-Bildschirm zu navigieren zum Workout-Bildschirm, was wir gerade erstellen, . Lassen Sie uns beginnen, ein Hinzufügen von Elementen für diesen neuen Bildschirm. Das erste, was wir tun, ist ein neues Drahtmodell hinzuzufügen. Lassen Sie uns es Liste der Trainingseinheiten nennen. Nehmen wir unser iPhone 8-Symbol, klicken Sie also auf die Schaltfläche „Symbole“ und wir können auf das Symbol „iPhone 8" doppelklicken, um das zu unserer Leinwand hinzuzufügen. Lassen Sie uns nun beginnen, einige Elemente hinzuzufügen. Anfangs ist das erste, was wir wollen, die Suchleiste. Nehmen wir an, wir suchen nach einem Suchfeld, hier ist es, doppelklicken. Fügen wir das oben auf dem Bildschirm hinzu und lassen Sie uns das über die gesamte Breite bewegen. Das nächste Element, das wir wollen, ist eine Schaltflächenleiste, in der Benutzer diese verwenden können, um zu verschiedenen Kategorien zu navigieren. Tastenleiste, lassen Sie uns das auf dieser Leinwand bringen, und lassen Sie uns das auch über den Bildschirm verteilen. Geben wir ihm einige Kategorien, also sagen wir Körpergewicht, HIIT, Cardio und Gewichte. Wenn Sie jedes dieser Wörter hier mit einem Komma trennen, wenn Sie ausklicken, wird es eine Schaltflächenleiste hinzufügen, so dass wir unsere Schaltflächenleiste haben. Lassen Sie uns nun eine Liste von Bildern erstellen, die eine Liste von Trainingseinheiten basierend auf der Kategorie anzeigen , auf die der Benutzer oben geklickt hat. Wenn sie auf Körpergewicht klicken, wird eine Liste von Körpergewichtsübungen, HIIT, es wird eine Liste von HIIT Übungen zeigen, und so weiter. Lassen Sie uns ein Bild erstellen. Angenommen, wir sind in der Körpergewichtskategorie, da diese ausgewählt ist. Lassen Sie uns es erstellen, finden Sie ein Bild. Bringen wir das runter, und machen wir das 130 mal 80. Anstatt zu versuchen, herauszufinden, was jedes Training sagen sollte, lassen Sie uns einfach eine Textzeile hinzufügen. Suchen wir nach Text. Lassen Sie uns einen Textblock machen. Dann können wir das hier leicht ändern, so, lassen Sie es uns zentrieren, und lasst es uns gruppieren. Sie haben nun das Bild und den Namen des Trainings oder Trainings. Lasst uns das gruppieren. Jetzt duplizieren wir das. Hier ist noch eine Übung. Ich werde sagen, das ist vielleicht Burpees und das sind Klimmzüge zum Beispiel. Lasst uns diese packen und duplizieren, Befehl D, den Knopf oben halten, den wir benutzt haben, und lasst uns diese ausräumen. Lassen Sie uns das noch einmal tun, Befehl D. Lassen Sie uns die etwas nach oben bewegen. Das ist unsere Liste der Bilder zentriert. Wenn der Benutzer auf HIIT klickt, ist die Idee, dass diese Bilder mit allen Übungen oder Workouts gefüllt werden, die mit HIIT getaggt sind, gleich mit Cardio und Gewichten. Diese werden basierend auf den Kategorien aufgefüllt, auf die geklickt wird. Lassen Sie uns schließlich eine Tab-Navigation erstellen. Tab-Navigation, lasst uns ein Rechteck als Hintergrund für unsere Tab-Navigation greifen. Lasst uns ein paar Symbole schnappen. Wir wollen Symbol mit Etikett, wir tippen in Symbol, können wir bekommen Symbol mit Label. Fügen wir das hinzu und lassen Sie uns suchen, so dass im Eigenschaftenfenster hier und im Symbolbereich, wenn Sie nach einem Symbol suchen und zu Hause sagen, wird es das Home-Symbol hinzufügen. Wir wollen, dass das klein ist. Sagen wir zu Hause für dieses Symbol, lassen Sie uns das duplizieren. Lassen Sie uns dies ändern, um zu sagen, Workouts. Dafür ändern wir das Symbol, vielleicht ein Sternsymbol. Lassen Sie uns das nochmal duplizieren. Lassen Sie uns dieses Profil nennen, oder nennen wir es mein Profil. Das ist vielleicht jemand eine Person dafür. Da gehst du. Wir haben unsere Tab-Leiste mit unseren verschiedenen Abschnitten. Wir haben unsere Bilder, die basierend auf der ausgewählten Kategorie gefüllt werden, und wir haben unsere Schaltflächenleiste, die Benutzer auf verschiedene Kategorien klicken können, und wir haben unsere Suchleiste oben. Im nächsten Bildschirm erstellen wir den Bildschirm mit den Trainingsdetails. Angenommen, ein Benutzer ist auf das Körpergewicht, klickt auf dieses Bild, sagt, es ist ein Burpee-Workout, klickt darauf und es bringt sie zu den Burpees Detail, die spezifische Übung oder Workout-Detail-Bildschirm. Wir werden diesen Bildschirm im nächsten Video erstellen. 12. Das Wireframing des Wireframing: Beginnen wir mit der Erstellung unseres Workout-Detail-Bildschirms. Auf dieser Seite werden die Details der ausgewählten Übung oder des Trainings angezeigt , die Sie ausgewählt haben. Wenn Sie beispielsweise Burpees auf der vorherigen Liste des Trainingsbildschirms ausgewählt haben, werden das Training und Details zu diesem Training angezeigt, wie z. B. die Beschreibung des Trainings usw. Lassen Sie uns beginnen, Elemente für diesen Bildschirm zu erstellen und hinzuzufügen. Lassen Sie uns zuerst unsere Liste des Workout-Bildschirms duplizieren , so dass wir bereits unsere Tab-Leiste unten haben, die wir für diesen Workout-Detail-Bildschirm benötigen. Lassen Sie uns dies auswählen und klicken Sie oben auf die Schaltfläche „Duplizieren“, die unseren neuen Bildschirm erstellt. Lassen Sie es uns umbenennen und nennen Sie es Trainingsdetails. Wir haben unsere Tab-Leiste. Lassen Sie uns alle anderen Elemente löschen. Was wir für diesen Bildschirm zunächst benötigen, ist die Zurück-Pfeil-Taste. Lassen Sie uns nach Symbolen suchen. Lassen Sie sich schnell hinzufügen gehen und klicken Sie auf „Icon“. Wir brauchen kein Symbol mit einem Label, wir wollen nur das Symbol, also lassen Sie uns darauf doppelklicken. Fügen wir es dem Canvas hinzu. Suchen wir nach Pfeil. Wir wollen einen Zurückpfeil, benutzen wir einfach diesen Pfeil. Wir haben hier einen Pfeil. Lassen Sie uns nun nach einem Titel für unseren Bildschirm suchen. Lassen Sie uns diese Klasse Details nennen. Es ist sehr groß, also lass es uns viel kleiner machen. Machen wir es als 16 Pixel, und lassen Sie es zentrieren. Lassen Sie uns das duplizieren und lassen Sie uns einen Titel für unser Workout oder unsere Übung haben. Nennen wir diesen Trainingstitel. Lasst uns das etwas größer machen. Verdoppeln wir es in der Größe, machen es 32 Pixel und zentrieren Sie das. Dann lassen Sie uns ein Bild haben, das Hauptbild für das Training. Lass uns wieder hierher gehen. Hier, Bildfeld, dehnen Sie das quer aus. Jetzt wollen wir eine Beschreibung, um die Leute wissen zu lassen, worum es bei diesem Training geht. Lassen Sie uns das duplizieren. Lassen Sie uns diese Größe bis zu 18. Lassen Sie uns diese Beschreibung nennen und zentrieren Sie uns das. Holen wir uns ein paar SMS. Wir wissen nicht, was wir sagen sollen. Lassen Sie uns nur einen Textblock bekommen, um Benutzer und Interessengruppen wissen zu lassen , dass hier unsere Beschreibung des Trainings gehen wird. Wir wissen nicht, was der endgültige Text sagen wird, einfach bestellen für jetzt. Zentrieren wir das. Darunter wollen wir einen Knopf. Wir klicken einfach auf „Buttons“ hier und lassen Sie uns das hineinziehen. Wir möchten, dass dieser Button Start sagt. Wenn Sie auf diese Schaltfläche klicken, wird das Video gestartet. Bringt Sie zum Workout-Video-Bildschirm, wo Sie beginnen können, das Video abzuspielen, starten Sie das eigentliche Training zu spielen. Da hast du es. Sobald Sie zur Liste der Trainingseinheiten gehen, klicken Sie auf ein Training und bringen Sie zu den Trainingsdetails. Sie haben einen Pfeil, um zurück zu gehen, Sie haben eine Klasse Details, um Sie wissen zu lassen, wo Sie in der App sind, der Trainingstitel, ein Bild, Sie haben eine Beschreibung, Beschreibung Titel. Eigentlich, nur um sicherzustellen, dass wir das ausrichten gelassen haben, lassen Sie uns das links ausrichten. Wir haben eine Beschreibung Titel und wir werden unter, dass die tatsächliche Beschreibung des Trainings oder Übung, und dann haben wir unsere Start-Taste. Im nächsten Video arbeiten wir auf dem Workout-Video-Bildschirm, wo Sie das Video tatsächlich abspielen, Sie können das Video beenden. Es zeigt die Dauer des Videos an, wie viel Zeit noch in diesem Training bleibt. Fangen wir an, an diesem Bildschirm zu arbeiten. 13. Den Wireframing verraten: Beginnen wir mit der Erstellung eines Workout-Videobildschirms. Auf diesem Bildschirm wird ein Video des Trainings oder der Übung angezeigt, die Sie ausgewählt haben. Es wird die Dauer des Videos angezeigt, und wir haben eine Taste für Sie, um das Training zu beenden. Beginnen wir mit dem Erstellen und Hinzufügen von Elementen für diesen Bildschirm. Lassen Sie uns ein neues Drahtmodell erstellen, und nennen wir es Workout-Video-Bildschirm, und lassen Sie uns nach einem iOS, iPhone 8 Symbol suchen , das wir zuvor erstellt haben. Lassen Sie uns beginnen, unsere Elemente zu diesem Bildschirm hinzuzufügen. Dies ist ein Workout-Video-Bildschirm auf dem vorherigen Bildschirm. Auf dem Workout-Detail-Bildschirm können Sie das Video starten. Wenn Sie also auf die Schaltfläche „Start“ klicken, gelangen Sie zu diesem Bildschirm, der das eigentliche Video abspielt. Lassen Sie uns nach Video-Player suchen, fügen Sie das hinzu. Lass es uns ein bisschen größer machen. Zentrieren Sie es und lassen Sie uns einen Titel hinzufügen, und dies wird die Dauer angezeigt, ich meine, wie viel Zeit im Video übrig bleibt, während Sie trainieren. Sagen wir, acht Minuten und 34 Sekunden. Lasst uns das etwas größer machen. Machen wir das 72, und lassen Sie uns das Video ein wenig nach oben bewegen. Lass uns das 14 machen. Lassen Sie uns einen Knopf erstellen, der uns die Möglichkeit gibt, das Training zu beenden. Lassen Sie uns nach einem Knopf suchen. Doppelklicken wir darauf, und nennen wir das End Workout. Lass es uns ein wenig größer machen, und lass es uns zentrieren, und da hast du es. Wir müssen ein Bild hinzufügen. Lassen Sie uns ein Bild in diesem Video hinzufügen. Dadurch wird unser Bild angezeigt. Nehmen wir an, Sie wollten ein tatsächliches Bild in dieses Bildfeld einfügen. Sie können dies tun, indem Sie auf das Pluszeichen und auf Ihrem Computer ein Video suchen. Ich habe das hier. Ich habe ein paar Videos hier. Lassen Sie uns dieses hinzufügen. Ich muss dies vorher hochgeladen haben, also sagen wir, existieren, oder lassen Sie uns einen Namen verwenden. Hier gehen wir mit unserem Bild, und wir wollen diese niedrige Treue halten. Also, was wir tun können, ist auf die „Sketch it“ klicken und es wird das skizzenhafte Feld geben, und jetzt haben wir unser Video dort. Wenn Sie dieses Bild zuschneiden möchten, sagen Sie, klicken Sie einfach auf diese Schaltfläche „Zuschneiden“, und Sie können es so zuschneiden. Wenn Sie es kleiner machen wollen, wollen Sie größer, so etwas. So können Sie einige Bilder hinzufügen und dennoch eine niedrige Wiedergabetreue beibehalten. Wir klicken auf die Schaltfläche „Play“ Video, um zu spielen, die Dauer Zeit hier unten, und wenn wir unser Training früh beenden müssen, beenden wir das Training. Beenden Sie das Training, es bringt Sie zurück zum Workout-Detailbildschirm. Das ist unser Workout-Video-Bildschirm. Was wir als nächstes tun werden, ist ein Low-Fidelity-Prototyp mit all diesen Bildschirmen zu erstellen , so dass wir es an Stakeholder oder Benutzer weitergeben können , um zu testen und zu sehen, ob sie den Fluss davon mögen. Daran arbeiten wir im nächsten Video. 14. Verknüpfe und Präsentation in Balsamiq: Hier sind wir. Nachdem wir unsere Serie von Wireframes oder Mockups erstellt haben, sind wir nun bereit, sie miteinander zu verknüpfen, um einen Prototyp zu erstellen. In diesem Video werden wir darüber sprechen, unsere Wireframes zu verknüpfen und sie zu verknüpfen, einen Prototyp zu erstellen und sie Ihren Design-Teammitgliedern, Ihren Testbenutzern oder Ihren Stakeholdern im Projekt zu präsentieren . Lasst uns loslegen. In den vorherigen Videos haben wir ein Drahtmodell zum Erstellen eines Kontos, einDrahtmodell zur Profileinrichtung, eine Liste der Workouts, ein Drahtmodellmit Workout-Details und ein Workout-Video-Drahtmodell erstellt Drahtmodell zur Profileinrichtung, eine Liste der Workouts, ein Drahtmodell . Lassen Sie uns beginnen, sie miteinander zu verknüpfen, damit wir unseren Low-Fidelity-Prototyp erstellen können. Auf unserem Bildschirm „Konto erstellen haben wir den Titel, den Vornamen, die E-Mail, die Passwort-Texteingaben, die Nutzungsbedingungen, auf die der Benutzer klickt und dann auf die Schaltfläche „Konto erstellen“ klicken, , die sie zum Bildschirm „Profil-Setup“ führt. Um dies mit dem Bildschirm „Profileinrichtung“ zu verknüpfen, gehen Sie zum Abschnitt „Link“ im Eigenschaftenfenster. Nachdem die Schaltfläche ausgewählt ist und Sie sehen haben wir eine Liste von Wireframe-Mockups, die wir erstellt haben, mit ihren Namen, die Sie auch hier auf der linken Seite sehen, auch in diesem Bereich. Klicken Sie auf Profileinrichtung. Es wird nun auf den Bildschirm „Profil-Setup“ verlinken. Sie haben auch die folgenden anderen Optionen Link zu einer Webadresse, Link zu einem neuen Drahtmodell, Link zu einem Duplikat dieses Drahtmodells. Zurück (im Vollbildmodus), Kein Link. Wir werden uns hier keine Sorgen über diese untersten Optionen machen. Wir werden nur die Top-Optionen hier nutzen. Gehen wir nun zum Bildschirm „Profil-Setup“. Hier haben wir unseren Namen, den wir in den Bildschirm „Konto erstellen“ setzen, den Abschnitt „Geschlecht“, die Höhe, die Sie ausfüllen, ihr Fitness-Level und die Trainingseinheiten, die Sie mögen. Sie würden auswählen, welche Art von Trainingseinheiten sie normalerweise mögen, und dann klicken sie auf die Schaltfläche Weiter. Wir wählen die Schaltfläche „Weiter“, gehen zurück zum Abschnitt „Link“ im Eigenschaftenbedienfeld und verknüpfen diese mit der Liste der Workouts. Lassen Sie uns finden, dass, Liste der Workout-Bildschirm. Okay, jetzt gehen wir zum Bildschirm „Liste der Workouts“. Sie müssen die Option suchen. Sie haben Ihre Kategorien von Workouts, auf die der Benutzer klicken kann, um eine Liste von Trainingseinheiten basierend auf dieser Kategorie anzuzeigen , und wir haben die Tab-Leiste unten. Wenn der Benutzer ein Training auswählt, das ihm gefällt, wird er zum Workout-Detail-Bildschirm des Workouts weitergeleitet. Wir wählen ein Training aus, gehen zurück zum Eigenschaftenfenster und verknüpfen es dem Workout-Detail-Bildschirm. Du siehst, dass ein kleines Symbol erscheint, um uns mitzuteilen, dass es mit einem anderen Bildschirm verknüpft ist. Gehen wir nun zu unserem Workout-Detail-Bildschirm. Sobald der Benutzer auf das ausgewählte Training klickt, gelangen Sie zu einem Workout-Detail-Bildschirm , der den Titel des Trainings, ein Bild des Trainings, eine Beschreibung des Trainings enthält ein Bild des Trainings, und auf „Start“ klickt , um das Video anzusehen und mit dem Training zu beginnen. Gehen wir wieder zum Eigenschaftenfenster und finden Sie das Drahtmodell, mit dem Sie es verknüpfen können, das heißt Workout Video Bildschirm und jetzt endlich, lassen Sie uns auch die Schaltfläche „Zurück“ verwenden und lassen Sie uns das zurück auf die Liste der Workouts Bildschirm verknüpfen. Während wir dabei sind, lassen Sie uns auch unsere Tabs machen. Unsere Registerkarte kann zu Liste der Workouts gehen. Lassen Sie uns dasselbe auf dem Workout-Detail-Bildschirm machen, mit dem Tab , der zur Liste der Workouts zurückgeht und unser letzter Bildschirm ist das Workout-Video. Sobald der Benutzer auf Start geklickt hat, geht er zum Workout Video Bildschirm, zeigt das Video, die Dauer des Videos und ihre Fähigkeit, das Training zu beenden. Hier verlinken wir einfach auf „Ende des Workouts“, das dich zurück zu den Workout-Details führt. Okay, lassen Sie uns das verknüpfen, es bringt Sie zurück zu Workout-Details, und da haben Sie es. Wir haben alle unsere Bildschirme vernetzt. Jetzt, da wir alle unsere Wireframes miteinander verknüpft haben, werden sie nun zu einem anklickbaren Prototyp, sobald wir sie exportieren. Jetzt möchten wir sie als PDF exportieren und um das zu tun, möchten Sie nach oben gehen und klicken Sie auf „Datei“ und wählen Sie „Export to PDF“. Klicken Sie darauf, und Sie sehen die Optionen, wie Sie Ihre Drahtmodellen exportieren möchten. Möchten Sie Alle Wireframes auswählen? Möchten Sie nur den aktuellen Wireframe exportieren? Oder möchten Sie einfach nur einen bestimmten Satz von Drahtmodellen auswählen? Jetzt möchten wir nicht alle Wireframes exportieren, da dies die Persona, das Storyboard und den User Flow exportieren würde . Wir möchten nur die Option „Eine Reihe von Wireframes“ auswählen. Wir klicken darauf, und jetzt wählen wir die Drahtmodelle aus, die exportiert werden sollen. Wir möchten ein Konto erstellen, Profil-Setup, Liste der Workouts, Workout-Details und Workout-Video. Danach wähle ich normalerweise Optimieren für die Anzeige auf dem Bildschirm. Danach wähle ich Verknüpfungshinweise anzeigen und Drahtgitternamen hinzufügen aus. Okay, jetzt sind wir bereit, in PDF zu exportieren. Wir klicken einfach auf diese Schaltfläche. Eine weitere Option, die wir haben, ist, diese Wireframes nicht nur in ein PDF zu exportieren, sondern diese Mockups, Vollbild-unlösliche Lösung zu präsentieren. Wenn Sie nicht möchten, dass die Stakeholder, die Design-Teammitglieder oder Testbenutzer es selbst testen, sondern stattdessen den Prototyp für sie demonstrieren möchten, klicken Sie auf die „Vollbildpräsentation“ -Taste hier oben rechts und das wird Ihr Mockup im Vollbildmodus anzeigen. Wie Sie sehen, wenn Sie über klickbare Bereiche rollen, wird es uns einen Hinweis zeigen, indem Sie diesen Rotton drehen und dass die Schaltfläche anklickbar ist. Klicken Sie auf die aktiven Schaltflächen, um durch den Demover- und Präsentationsmodus zu klicken. Um aus dem Vollbildmodus zu kommen, klicken Sie auf die Schaltfläche „Escape“ und das führt Sie zurück zu Ihrem Satz von Drahtmodellen. Das sind die zwei Möglichkeiten, um Ihre Wireframes als Vollbildpräsentation zu präsentieren oder als anklickbares PDF zu exportieren. In der nächsten Lektion werden wir den PDF-Prototyp untersuchen, den wir erstellt haben. 15. PDF in Balsamiq: Wir haben unsere Prototyp-PDF-Datei in der vorherigen Lektion erstellt. Werfen wir einen Blick auf die Akte. Dies ist der Low-Fidelity-Prototyp in PDF-Form, dass Sie einen Test Benutzer, Ihre Design-Team-Mitglieder oder Stakeholder Ihres Projekts senden Ihre Design-Team-Mitglieder . diese Datei ansehen, befinden wir uns auf dem Bildschirm zum Erstellen eines Kontos. Herr die Benutzer würden ihren Namen, E-Mail und Passwort eingeben. Dann würden sie auf die Schaltfläche „Konto erstellen“ klicken. Jetzt sind wir auf dem Profil-Setup-Bildschirm. Benutzer geben an, ob sie männlich oder weiblich sind, ihre Körpergröße, ihr Fitnesslevel und die Art der Trainingseinheiten, die sie mögen, und klicken dann auf „Weiter“. Hier sind wir auf der Liste des Trainingsbildschirms. Auf diesem Bildschirm werden die Trainingseinheiten in der App in Kategorien unterteilt , wobei Körpergewicht, HIIT, Cardio und Gewichte sind. Unabhängig davon, welche Kategorie sie ausgewählt haben, wird im Hauptinhaltsbereich eine Liste der Trainingseinheiten für diese Kategorie angezeigt. Nehmen wir an, Sie wählen ein Training aus und dann werden Sie zum Einstiegsbildschirm für das Training weitergeleitet , wo Sie den Titel des Trainings, ein Bild des Trainings, eine Beschreibung des Trainings und eine Schaltfläche „Start“ sehen ein Bild des Trainings, eine Beschreibung des Trainings . wo, wenn Sie darauf klicken, wird es beginnen, das Video des Trainings abzuspielen. Am unteren Rand des Bildschirms befindet sich die Tab-Leiste, in der Benutzer zum Startbildschirm, zum Trainingsbildschirm navigieren und ihr Profil anzeigen können . Oben gibt es eine Pfeilschaltfläche, über die Benutzer zum vorherigen Bildschirm zurückkehren können. Lassen Sie uns auf „Start“ klicken, und jetzt werden Sie zum Workout-Video-Bildschirm weitergeleitet. Jetzt befinden Sie sich auf dem Workout-Video-Bildschirm, einen Video-Player anzeigt, die verstrichene Zeit des Videos, die herunterzählt, während das Video abgespielt wird , um dem Benutzer zu zeigen, wie viel Zeit noch im Training bleibt, und ein Ende der Workout-Taste für Benutzer klicken, nur für den Fall, dass sie das Training aus irgendeinem Grund nicht beenden können. Dies ist der Prototyp PDF. So würde der Prototyp in PDF-Form aussehen , wenn Sie ihn an Testbenutzer, Ihre Design-Teammitglieder oder Interessengruppen des Projekts senden würden , um Feedback von ihnen zu erhalten. 16. Über das Projekt in Adobe XD: Für dieses Projekt werden wir eine Reihe von Drahtmodellen um fünf erstellen. Dann nehmen Sie diese Wireframes und machen Sie einen Low-Fidelity-Prototyp mit. Das Projekt kann eine mobile App Ihrer Wahl sein. Ich habe ein Beispielprojekt, das ich für den Kurs erstellt habe. Während des Kurses werde ich die Schritte durchgehen, die ich unternommen habe, um diese Wireframes und Prototypen zu erstellen, damit Sie sehen können, wie ich es mache. Sie können dies als Vorlage für Ihr Projekt verwenden. Sie benötigen keine Vorkenntnisse mit der Adobe XD-Software, da ich Ihnen schnell einen Überblick darüber geben werde, wie Sie sie während des Kurses nutzen können. Das abschließende Projekt ist etwas, das Sie in Ihrem Portfolio verwenden können, um Kunden, Ihre Design-Teammitglieder oder sogar potenziellen Arbeitgebern zu zeigen Ihre Design-Teammitglieder . Wenn Sie sich UX-Designer-Auftragsbeschreibungen ansehen, ist es sehr oft in diesen Beschreibungen, Drahtmodellen und Prototypen zu können. Dies ist eine Fertigkeit, die Ihnen in Ihrem aktuellen Job hilft oder wenn Sie nach dem nächsten UX Job suchen. Adobe XD ist ein sehr beliebtes Tool, das viele der UX-Abteilung heutzutage zu verwenden. 17. Persönliche Durchfluss in Adobe XD: Bevor wir mit der Erstellung unserer Wireframes beginnen, habe ich eine versierte Benutzerpersonas und einen Benutzerfluss erstellt, um Ihnen ein wenig über die Dokumente zu zeigen , die normalerweise Teil des Entwurfsprozesses sind. Ich habe zwei Personas gemacht, eine männliche und eine weibliche. Diese beiden Personas wurden so entwickelt , dass Sie, wenn Sie den Drahtmodellprozess durchlaufen, dies mit bestimmten Benutzern im Hinterkopf tun. Diese Personas heißen Jennifer und Chris. Diese Personas stehen zum Download zur Verfügung, damit Sie sie als Vorlage verwenden können , wenn Sie mit der Arbeit an Ihrem Wireframing-Projekt beginnen. Unterhalb der Personas haben wir ein Beispiel für den Benutzerfluss. Dies hilft uns, die Reise zu verstehen, die der Benutzer unternehmen wird , wenn wir unsere Reihe von Drahtmodellen erstellen. In dieser Reise erstellt der Benutzer ein Konto, richtet ein Benutzerprofil ein, wählt eine Liste von Trainingseinheiten Es wird ein Workout-Detail-Bildschirm angezeigt, und dann wird der Benutzer ein Video des Trainings anzeigen. Dies ist unser Benutzerablauf und wir werden fünf Bildschirme erstellen, die auf diesem Fluss basieren. Dann werden wir sie miteinander verknüpfen, um einen Low-Fidelity-Prototyp zu erstellen , der von Benutzern getestet werden kann. 18. Übersicht über Adobe XD: Lassen Sie uns in diesem Video schnell über die Tools in Adobe XD gehen. Die Einrichtung ähnelt anderen Konstruktionswerkzeugen wie Sketch und Figma. Auf der linken Seite haben Sie die Entwurfswerkzeuge. Wir haben das Auswahlwerkzeug, das Rechteck-Werkzeug, das Ellipsenwerkzeug und das Polygonwerkzeug, mit dem Sie Formen auf der Leinwand erstellen können. Wir haben das Linienwerkzeug darunter zusammen mit dem Stiftwerkzeug. Darunter haben wir das Textwerkzeug, dem wir Text zu unseren Entwürfen hinzufügen können. Darunter haben wir das Zeichenflächenwerkzeug. Wenn diese Option ausgewählt ist, sehen wir auf der rechten Seite alle verschiedenen Zeichenflächen, die wir für unsere Entwürfe verwenden können. Es gibt Zeichenflächen für mobile Designs, Tablets, Web-Desktop und Social-Media-Zeichenflächen, um Designs für Instagram und Facebook zu erstellen, und dann Artboards auch Designs für die Apple Watch zu erstellen. Darunter haben wir das Zoomwerkzeug. Unten links befinden sich Symbole, die Bibliotheken, Layer und Plug-Ins darstellen . Bibliotheken sind der Ort, an dem die Farben, Zeichenstile und Komponenten für Ihr Projekt verfügbar sind. Ebenen zeigen die verschiedenen Ebenen unserer Designs und Plugins ist, wo wir neue Plugins zu unserem Projekt hinzufügen oder Plugins anzeigen, die wir derzeit in unserem Projekt haben. In der oberen Mitte haben Sie eine Dropdown-Liste, in der Sie Ihr Projekt umbenennen können. Oben links befinden sich Abschnitte für Design, Prototyp und Freigabe. Der Abschnitt Design zeigt unsere Werkzeuge, um unsere Entwürfe zu erstellen. Der Prototypenbereich ermöglicht es uns, einen Prototyp unserer Entwürfe zu erstellen. Wenn Sie also eine Zeichenfläche auswählen, wird sie blau hervorgehoben und ein Pfeil erscheint. Dieser Pfeil gibt uns die Möglichkeit, auf eine andere Zeichenfläche zu klicken und zu ziehen. Nachdem Sie auf den Pfeil geklickt und gezogen haben, um ihn mit einer anderen Zeichenfläche zu verknüpfen, wird das Eigenschaftenfenster auf der rechten Seite aktiv. Nun, wir haben jetzt Optionen, wie die Verknüpfung zu diesem anderen Bildschirm ausgelöst wird. Wird es ein Tippen, ein Drag, Zeit, Tasten und Gamepad oder Stimme sein? Darunter können Sie den gewünschten Übergangstyp auswählen. Sie haben automatische Animationen, Overlay, vorherige Zeichenfläche, Audiowiedergabe und Sprachwiedergabe. Darunter hatten Sie den Zielabschnitt, in dem Sie entscheiden, welche Zeichenfläche die Zielartfläche ist. Sie können von hier aus ändern, welche Zeichenfläche verknüpft werden soll. Darunter haben wir die verschiedenen Arten von Animationen, die wir auswählen können, wie zum Beispiel auflösen, gleiten oder schieben. Der Abschnitt „Teilen“ ermöglicht es uns, einen Link für Ihren Prototyp zu erstellen, der mit anderen geteilt werden kann. Sie können die Ansichtseinstellungen wie Entwurfsprüfung, Entwicklung, Präsentation, Benutzertests oder benutzerdefinierte Einstellungen auswählen. Darunter können Sie jedem Zugriff gewähren der den Link nur eingeladene Personen oder Personen mit einem Passwort hat, und nachdem Sie diese Auswahl getroffen haben, klicken Sie auf die Schaltfläche Link erstellen, die dann einen Link erstellt, der gemeinsam genutzt werden. Oben rechts finden Sie Symbole, mit denen Sie Mitarbeiter einladen können, auf Ihr Dokument zuzugreifen und diese zu bearbeiten. Gerätevorschau, in der Sie Designs auf einem USB angeschlossenen Gerät in einer Vorschau anzeigen können. Dann haben Sie die Schaltfläche für die Desktop-Präsentation, auf Sie eine Vorschau anzeigen und mit Ihrem Design interagieren können. Auf der rechten Seite haben wir das Eigenschaftenfenster. Wenn Sie also ein Element auswählen oder ein Element zur Leinwand hinzufügen, das Eigenschaftenfenster auf der rechten Seite aktiv. Wie Sie sehen können, können Sie Ihre Elemente im oberen Abschnitt hier ausrichten. Darunter haben Sie die Möglichkeit, Raster zu wiederholen und Formen mit booleschen Werkzeugen rechts davon zu erstellen. Darunter haben Sie einen Abschnitt, in dem Sie Komponenten für Ihr Projekt erstellen können. Dann haben Sie einen Abschnitt, in dem Sie Ihre Konstruktionselemente transformieren können. Sie haben einen Layout-Abschnitt, in dem Sie Elemente in Ihrem Design reaktionsschnell machen können. Sie haben einen Abschnitt für Ihren Text, in dem Sie Schriftart, Schriftfarbe, Schriftgröße usw. ändern können . Das ist meine Kurzübersicht für Adobe XD. Es ist wirklich ein großartiges Tool, um für UX- und UI-Design zu verwenden. 19. Erstelle einen Account in Adobe XD: Beginnen wir mit der Erstellung unserer Wireframes. Bevor wir beginnen, geben XD zusammen mit anderen Design-Tools Ihnen die Möglichkeit, ein Drahtmodell Assets oder Elemente selbst zu erstellen, oder Sie können ein Wireframe-UI-Kit mit vorgefertigten Elementen herunterladen und einfach von dort aus anpassen. Wir gehen den Download einer Wireframe-UI-Kit-Route in diesem Kurs. Es macht die Aufgabe, Wireframes viel schneller und viel einfacher zu machen. Um ein Wireframe-Kit in XD herunterzuladen, würden Sie zum Menü Datei gehen und dann zu UI Kits abrufen gehen und „Wireframes“ auswählen. Von dort aus gelangen Sie zu einer Webseite, auf der Sie das Wireframe-Kit herunterladen können. Klicken Sie auf den Link Download-Kits, dem sowohl die Web- als auch die mobile Version des Wireframe-Kits heruntergeladen werden. Sobald Sie sie heruntergeladen haben, suchen Sie diese Downloads auf Ihrem Computer und doppelklicken Sie dann auf die mobile Version XD-Datei. Sobald das geöffnet ist, sehen Sie eine Vielzahl von Drahtmodellelementen, dievon Beispielanmeldeformularen, Profilbildschirmen, Filtern und Suchen verwendet werdenkönnen von Beispielanmeldeformularen, Profilbildschirmen, Filtern und Suchen verwendet werden , und vieles mehr. Bevor wir damit beginnen, möchte ich meine Drahtgitterelemente so gering wie möglich halten. bedeutet, anstatt diese blaue Farbpalette zu haben, halte ich es gerne alle Graustufen, so dass Farbe keine Ablenkung beim Entwerfen der Drahtmodelle ist, oder es ist keine Ablenkung für die Benutzer, wenn sie Testen unseres eventuellen Prototyps. Lassen Sie uns das Farbschema dieses Drahtmodell-Kits in Graustufen ändern. Unten links sehen Sie eine Reihe von Symbolen für Bibliotheken, Layer und Plugins. Klicken Sie auf das Symbol der Bibliothek, und es wird ein neues Bedienfeld angezeigt. In diesem Panel werden die Zeichenstile, Farbstile usw. des UI Kit angezeigt. Lassen Sie uns zu den Farben gehen und wenn es geschlossen ist, können Sie es öffnen, indem Sie auf den Pfeil klicken und Sie werden die Farbstile für das Kit sehen. Wenn wir die Farben hier ändern , werden alle notwendigen Farbänderungen im gesamten Dokument vorgenommen. Lassen Sie uns die erste Farbe ändern. Wenn Sie mit der rechten Maustaste auf die Farbe klicken, erscheint ein Menü mit der Option Farbe bearbeiten. Wählen wir das aus. Nun, wir ziehen nur unsere Farbe, die Sie sehen, ist derzeit in blau. Wir ziehen das auf das Graustufenäquivalent, das genau hier sein wird. Jetzt haben wir unsere dunklere graue Farbe hier, und es wird beginnen, die Farbänderungen in unserem Dokument vorzunehmen. Lassen Sie uns ein wenig verkleinern, damit diese Farben aktualisiert werden, können wir sie sehen. Nun, lasst uns unsere zweite blaue Farbe greifen, lasst uns mit der rechten Maustaste klicken, auf „Bearbeiten“ klicken, lasst uns diese hier nach unten ziehen. Wie Sie sehen, tauschen sich unsere Farben aus und ändern sich. Lasst uns unsere hellblaue Farbe hier schnappen und das hier runter ziehen. Wieder sehen Sie, dass unsere Wireframes die Graustufen mit jeder Änderung in dieser letzten hellblauen Farbe ändern, können wir ändern und einfach hinzufügen, dass hier. Wir haben unseren Graustufen-Gaumen. Einige dieser Farben müssen manuell aktualisiert werden und wir können das später tun, wenn wir tatsächlich etwas in diesem Menüabschnitt oder in diesem Nachrichtenabschnitt oder sogar diese Popovers verwenden . Lassen Sie uns anfangen, unsere erstellen Sie ein Konto Bildschirm. Das wird der erste Bildschirm sein, den wir in unserem Satz von Drahtmodellen erstellen werden. Klicken wir auf, gehen wir zurück zu unserem Wireframing-Dokument, und lassen Sie uns eine Zeichenfläche hinzufügen. Wenn Sie auf Ihrer Tastatur „A“ drücken, sehen Sie das Panel auf der rechten Seite, zeigen Ihnen eine Vielzahl von Zeichenflächen, die Sie von Handy, Tablet, Web-Desktop, Social Media, etc. erstellen können . Lassen Sie uns iPhone X für unsere Wireframes tun und ziehen Sie dies nach unten hier unterhalb unseres Nutzerflusses. Vergrößern wir uns ein wenig. Dies wird unser erstellen Sie ein Konto Bildschirm, mit dem wir beginnen werden, lassen Sie uns tatsächlich nennen diese Zeichenfläche, erstellen Sie ein Konto. Lassen Sie uns beginnen, einige Elemente aus unserem mobilen Wireframe-Kit zu greifen, das wir heruntergeladen haben. Wechseln wir zurück zu Drähten mobil und lasst uns einen Abschnitt nehmen, in dem unser Logo untergebracht wäre. Wir haben einen Anmeldebereich, der ist, was wir wollen, unser Erstellen eines Kontos Bildschirm wird über die Anmeldung des Benutzers sein. Wir können diesen Abschnitt hier packen, lasst uns ihn einfach kopieren. Gehen Sie zurück zu unseren Drahtmodellen und wir können es einfach einfügen. Sagen wir einfach, das ist der Ort, an dem unser Logo gehen wird. Gehen wir zurück zu den Drähten, und lassen Sie uns nach der Erstellung eines Kontoabschnitts suchen. Vergrößern wir uns. Das sieht ziemlich gut aus. Lassen Sie uns diese erstellen Sie ein Konto und lassen Sie uns diese Eingabefelder als auch auswählen. Gehen wir zurück zu unseren Drähten, Wireframe-Kit und lassen Sie uns nach einem Anmeldebereich suchen, in dem wir ein Konto erstellen können, Eingabefelder und die erstellen Sie einen Account-Header. Lasst uns diesen Header hier schnappen, nun, wir können einfach diesen Header hier greifen. Gehen wir zurück zu unseren Drahtmodellen und fügen Sie einfach das Zentrum hinzu. Gehen wir zurück zu Drähten und lassen Sie uns einige Eingabefelder finden. Ich denke, das ist gut hier. Eigentlich könnten wir einfach schnappen, dass ein Konto erstellen. Gehen wir zurück zu Wireframes und lassen Sie uns diese Eingabefelder hier einfügen, und wir wollen vollständigen Namen, E-Mail und Passwort, und bestätigen Sie das Passwort. Das ist perfekt. Gehen wir zurück und suchen nach einer Nutzungsbedingungen, und wir haben eine hier. Gehen wir zurück und fügen Sie das ein. Fügen wir das unten hinzu und lassen Sie uns sicherstellen, dass das in Ordnung ist, und lassen Sie uns nach einer Schaltfläche suchen, wo wir eine Schaltfläche „Konto erstellen“ haben können, auf die der Benutzer klickt, sobald er das Formular ausgefüllt hat. Lassen Sie mich einfach diese Schaltfläche Weiter hier und lassen Sie uns das hinzufügen. Lassen Sie uns dies ändern, um ein Konto zu erstellen, und sagen wir, wir wollen uns eine Schaltfläche für einen Benutzer, wenn er bereits ein Konto hat, das er sich einfach anmelden kann. Lassen Sie uns damit gehen, haben Sie bereits einen Account Login, und lassen Sie uns diese Elemente einfach greifen und fügen Sie sie in unser Dokument ein. Lass uns ein paar Sachen hierher bringen. Lasst uns die nach oben bewegen. Nutzungsbedingungen, erstellen Sie ein Konto. Los geht's. Sehen Sie, wie schnell das war. Mit vorgefertigten Elementen in bereits hergestelltem Wireframe-UI-Kit machte es die Erstellung unseres ersten Wireframe-Bildschirms sehr einfach. Nur eine Frage der Änderung der Farben auf niedrige Wiedergabetreue, wenn Sie möchten, gehen Sie zurück zum Wireframe-UI-Kit und kopieren Sie und fügen die Elemente, die Sie benötigen, um sie auf Ihren Wireframe-Canvas einfügen. Dies ist unsere erstellen Sie ein Konto Bildschirm. Wir haben das Logo, erstellen Sie einen Account-Header. Der Benutzer gibt seinen vollständigen Namen, seine E-Mail, ein Passwort ein und bestätigt sein Passwort und erstellt dann ein Konto. Wenn sie bereits ein Konto haben, verschieben wir das nach unten. Wenn sie bereits ein Konto haben, klicken sie auf Login und sie werden zu einem Anmeldebildschirm weitergeleitet. Wir werden diesen Fluss nicht benutzen. Der Fluss, den wir jetzt machen werden, ist einfach ein Konto zu erstellen, das hier ist, wo wir sagen, wir beginnen, haben Sie ein Konto? Nein. Erstellen Sie ein Konto, richten Sie Ihr Profil, wählen Sie aus einer Liste von Trainingseinheiten, erarbeiten Sie Details, etc. Dies ist der Fluss, mit dem wir gehen hier und der erste Bildschirm dieses Flow ist ein Konto erstellen, das wir hier haben. Unser nächster Bildschirm, den wir erstellen, ist die Einrichtung Ihres Profilbildschirms. Das machen wir im nächsten Video. 20. Profileinstellung in Adobe XD: Lassen Sie uns unseren nächsten Bildschirm erstellen, der der Profil-Setup-Bildschirm sein wird. Lassen Sie uns einen neuen Bildschirm erstellen, duplizieren Sie einfach unseren Bildschirm Erstellen Sie ein Konto durch Drücken von Befehl D, und lassen Sie uns dies in Profil-Setup umbenennen, und lassen Sie uns einige der Elemente, die hier sind los, damit wir neu beginnen können. Lasst uns diese vorerst behalten, weil wir sie am Ende brauchen. So wird der Benutzer ein Konto erstellen, indem er seinen Namen, E-Mail und Passwort ausfüllt und dann ein Konto erstellt. Nehmen wir an, sie haben ein Konto erstellt, ihre eigene Profileinrichtung und ihr Name werden oben angezeigt. Sagen wir, der Name ist John Doe. Zentrieren wir das. In den Eigenschaften hier sehen Sie, dass Sie links, zentriert oder rechts ausrichten können , und lassen Sie uns John Doe zentrieren, und dann lassen Sie es hier setzen. Wie Sie sehen können, sehen Sie, wie Sie auf ein Element klicken, hier befindet sich das Eigenschaftenfenster für dieses Element auf der rechten Seite. Das haben wir hier. Mal sehen, was die Schriftgröße ist. Lass es uns bei 20 behalten, das sollte gut sein. Hier auf dem Profil-Setup-Bildschirm möchten wir einen Abschnitt für die Benutzer in der Lage sein, ihr Geschlecht, ihre Körpergröße, ihr Fitnesslevel auszuwählen, und sie können die Art der Trainingseinheiten auswählen, die sie mögen, und dann klicken sie auf“ Weiter“. Wir haben den Namen der Person hier. Fügen wir einen Abschnitt hinzu, in dem sie ihr Geschlecht auswählen können. Gehen wir zurück zu den Drähten, mobilen Drahtmodellen und lassen Sie uns hinausscrollen. Mal sehen, ob wir etwas mit [unhörbar] finden können , greifen Sie einfach dieses Optionsfeld hier und lassen Sie uns das einfügen. wir, das sagt, männlich und dann lassen Sie uns das duplizieren, Kommando D und sagen wir, das sagt, weiblich. Okay, schnappen wir uns beide. Lassen Sie uns sie ein wenig überlegen und lassen Sie uns diesen John Doe duplizieren , damit wir diesem Abschnitt einen Titel geben können. Nennen wir dieses Geschlecht und machen es etwas kleiner. Machen wir es 18 Punkte. Lassen Sie diese wieder über. Geben wir dem hier am Ende einen Doppelpunkt, und lassen Sie uns die Farbe ändern, weil ich nicht möchte, dass diese beiden Farben gleich sind. Lass uns das etwas leichter machen. Gehen wir zurück zu den Drähten und wir werden sehen, dass wir alle unsere Farben hier haben. Lasst uns eine Farbe schnappen. Wir können diese Hex-Farbe hier kopieren. Gehen wir zurück und lassen Sie uns diese Farbe im Füllbereich hinzufügen. Da gehen wir. Wenn wir nun zu Bibliotheksfarben gehen, haben wir nichts in unserem Farbbereich. Lassen Sie uns beginnen, diese in unsere Dokumentfarben hinzuzufügen. Lassen Sie uns darauf doppelklicken und fügen Sie diese Farbe hinzu, also haben wir jetzt diese Farbe hinzugefügt. Gehen wir hier, und fügen wir diese Farbe hinzu. Jetzt können wir einfach auf diese Farben klicken, wie wir durchgehen, um sie hinzuzufügen, wenn wir sie brauchen. Okay, also haben wir unsere Geschlechterabteilung. Lasst uns die zusammenfassen, Kommando G. Wir gruppieren uns. Das ist nicht Zentrum, wir wollen, dass diese links ausgerichtet sind, aber das ist unser Geschlechterbereich. Lassen Sie uns das duplizieren. Verschieben Sie diese nach unten, und dieser nächste Abschnitt wird der Höhenabschnitt sein. Geben Sie in Höhe, und wir wollen, dass links ausgerichtet, und was wir hier wollen, sind Texteingabefelder, nicht Optionsfelder. Also lasst uns die Optionsfelder loswerden. Wir wollen, dass dies tatsächlich Füße sind, und wir wollen, dass dies Zoll ist und dann lasst uns ein Textfeld greifen. Wir können dieses hier auf dem Bildschirm „Konto erstellen“ greifen und das hier einfügen und dann lassen Sie es uns verkleinern und es kleiner machen. Vielleicht so etwas hier. Wir können das neben Fuß hinzufügen. Also, jetzt wird der Benutzer dort die Menge der Füße eingeben, die sie sind, fünf Fuß, sechs Fuß dort und lassen Sie uns diese duplizieren und geben Sie ihm einen für Zoll als auch. Sehen wir uns an, wo alle unsere Ebenen sind. Fügen wir diese Eingabefelder zu dieser Gruppe hinzu. Also, jetzt, wo wir das bewegen können, so haben wir unseren Höhenabschnitt. Lasst uns das ein bisschen ausräumen. In Ordnung, also fügen wir jetzt ein Fitness-Level hinzu. Lassen Sie uns das Geschlecht nochmal duplizieren, und nennen wir dieses Fitness-Level. Ich muss daran denken, diese Dinge links ausgerichtet zu machen. Was wir wollen, ist, dass der Benutzer in der Lage sein, zu wählen, ob sie ein Anfänger, erfahrene. Lassen Sie uns das noch einmal duplizieren, Befehl D und sagen: „Diese Option ist fortgeschritten“. Die sind also alle aufgereiht. Lassen Sie uns das etwas nach unten bewegen. Also, wir haben den Namen, wir haben das Geschlecht, das sie wählen würden, sie würden ihre Höhe hinzufügen, sechs Fuß, zwei Zoll, zum Beispiel. Fitnesslevel: Wählen Sie aus, ob Sie Anfänger, Fortgeschrittene oder Fortgeschrittene sind. Jetzt wollen wir einen Abschnitt haben, in dem wir herausfinden, welche Art von Trainingseinheiten sie mögen. Lassen Sie uns dies einfach kopieren und fügen Sie es ein und sagen wir, dieser Header wird Workouts sein, die Sie mögen. Wir brauchen ein paar Bilder. Lass uns das hier runterziehen. Wir benötigen einige Bilder, die als Platzhalter für die Art Workouts fungieren. Zum Beispiel haben wir vielleicht einen Cardio-Abschnitt, einen Gewichtsabschnitt, einen HIIT-Abschnitt und einen Körpergewichtsbereich, und sie würden auswählen, welche dieser Trainingseinheiten sie mögen. Gehen wir zurück zu den Drähten, Wireframe-Kit und lassen Sie uns vielleicht ein paar Karten finden. Mal sehen, ob es irgendwelche Karten gibt, die wir packen können. Lassen Sie uns verkleinern. Lassen Sie uns einen besseren Blick bekommen. Gehen wir hier rüber zu diesem Abschnitt und lassen Sie uns einfach einige Karten aus unserer UI-Elemente Abschnitt hier und lassen Sie uns das kopieren. Gehen wir zurück zu unserem Drahtmodell und fügen Sie das einfach ein. Lassen Sie uns einfach diesen Boden hier loswerden, unten Text und nennen wir das Cardio. Lassen Sie uns die Farbe ändern. Zentrieren wir den Namen, Cardio und lassen Sie uns das duplizieren. Verschieben Sie dies über, und dies wird eine Auswahl für Gewichte sein. Lasst uns beide packen und zentrieren. Lass es uns ein bisschen nach oben bewegen. Lassen Sie uns unsere Schaltfläche erstellen Sie ein Konto nach unten verschieben, und lassen Sie uns diese Zeile duplizieren. Bringen Sie es hier runter, es scheint, als müssten wir ein paar Sachen hochziehen. Lass uns ein paar Sachen hochziehen, damit wir etwas Platz haben können. Okay, nennen wir das HIIT, und das wird Körpergewichtsübungen sein. Wenn sie diese mögen, können sie das auswählen. Wir können diesen Bildschirm tatsächlich ein wenig länger machen, damit wir mehr Platz haben. Wenn Sie einen Rahmen auswählen und dann die Unterseite greifen, können Sie die Höhe der Bildplatte ändern. Dasselbe mit der Breite. Sie können die Breite ändern, aber wir wollen das nicht tun. Also lass es uns ein wenig länger machen. Auf diese Weise können wir unseren Knopf nach unten bewegen und die Dinge sind nicht so zerschmettert, geben ihm etwas Platz. Wählen Sie diesen Abschnitt aus, verschieben Sie ihn nach unten, wählen Sie ihn aus und verschieben Sie ihn nach unten. Holen Sie sich ein wenig Platz hier. Hier würden wir nur wollen, dass unsere Schaltfläche sagt: „Weiter“. Das ist also unser Profil-Setup-Bildschirm. Im Moment haben wir zwei Bildschirme. Wir haben den Bildschirm „Konten erstellen“. Sie erstellen ein Konto, es führt sie zu ihrer Profileinrichtung, wo ihr Name aus dem Feld für den vollständigen Namen hier gefüllt wird. Dann würden sie ihr Geschlecht auswählen, ihre Höheninformationen hinzufügen, welche Fitnessstufe sie sind und welche Art von Trainingseinheiten sie mögen. Dann werden sie klicken, „Weiter“ und sie werden zum nächsten Bildschirm gehen, der unsere Liste der Trainingsbildschirme sein wird. So erstellen wir die Liste des Workout-Bildschirms in unserem nächsten Video. Aber das sind die ersten beiden Bildschirme, die wir derzeit in unserem Wireframe-Set von Mockups haben. Also haben wir ein Konto erstellen und Ihr Profil einrichten. Wieder erstellen wir die Liste der Trainingsbildschirme im nächsten Video. 21. Liste von Arbeitskräften in Adobe XD: Lassen Sie uns nun unseren Workout-Bildschirm erstellen. Wir haben unsere beiden Bildschirme, die wir in früheren Videos erstellt haben, Erstellen Sie ein Konto und Profil-Setup. Jetzt erstellen wir unseren dritten Bildschirm, den Bildschirm „Liste der Workouts“. Lassen Sie uns ein Konto erstellen duplizieren. Benennen wir es in Liste der Workouts um. Lassen Sie uns einige der Elemente loswerden, damit wir es von Grund auf neu beginnen können. Auf diesem Bildschirm haben wir den Bildschirm „Liste der Workouts“. Wir wollen eine Suchleiste, Liste der Trainingstypen, in denen Benutzer auf eine der Kategorien Schaltflächen klicken, und jetzt wird es eine Liste von Trainingseinheiten basierend auf dieser Kategorie angezeigt. Wenn Sie beispielsweise auf „HIIT“ klicken, wird in der Kategorie HIIT eine Liste von HIIT Übungen angezeigt. Wenn Sie „Gewichte“ auswählen, wird es eine Reihe von Übungen anzeigen, die Ihre Trainingseinheiten mit Gewichten anzeigen. Wenn Sie zum Beispiel „Cardio“ auswählen, wird in dieser Kategorie eine Liste der Cardio-Arbeit angezeigt. Darunter klicken Sie erneut auf „Weiter“, und wir haben unten eine Tab-Leiste, die alle Benutzer auf den Home-Bildschirm zurückkehren können, sie können zu ihrem Profil-Bildschirm gehen, und sie können zur Liste der Workouts gehen -Bildschirm. Lassen Sie uns einfach diesen List of Workout Bildschirm jetzt erstellen. Das erste Element, das wir brauchen, ist ein Suchfeld an der Spitze, so dass der Benutzer suchen kann, wenn sie ein bestimmtes Training wollen, sagen Burpees, sie können nach Burpee suchen. Setzen Sie Burpee in das Suchfeld, und das wird eine Liste von Trainingseinheiten, die Burpee Übungen enthält füllen. Gehen wir zurück zu unserem Wireframe-Bildschirm. Gehen wir zu Filtern und suchen. Suchen wir nach einem Suchfeld. Wir können das schnappen. Das sieht gut aus. Gehen Sie zurück zu unseren Drahtmodellen, und fügen Sie das ganz oben hinzu. Dann in unserem nächsten Abschnitt, lassen Sie uns nach einem Titel für unsere Kategorieleiste suchen. Lassen Sie uns zu UI-Elementen gehen und sehen, ob irgendetwas drauf ist. Wir können das wahrscheinlich benutzen. Lassen Sie uns das hinzufügen. Lets suchen nach Header irgendeiner Art, die wir verwenden könnten. Ich könnte das einfach kopieren, duplizieren und es einfach verkleinern. Machen Sie es 14. Machen wir es 16. Nennen wir es Trainingstyp. Lassen Sie uns es Workout-Typ machen, und dann werden wir eine Liste von Schaltflächen haben. Gehen wir zurück zu unserem Wireframe-Kit. Gehen wir zu UI-Elementen. Lasst uns ein paar Knöpfe schnappen. Lasst uns diesen normalen Knopf hier schnappen. Das werden wir kopieren. Fügen Sie das in unser Drahtmodell ein. Lässt die Größe nach unten. Also wollen wir drei von ihnen, also machen Sie die Breite, sagen wir, 100. Nehmen wir an, dieser erste Knopf wird HIIT sagen. Lassen Sie uns das duplizieren, und dieses zweite Training wird Gewichte sagen. Lassen Sie uns das noch einmal duplizieren, und dieser wird Cardio sagen. Darunter werden wir eine Liste von Trainingseinheiten basierend auf der Kategorie anzeigen. Wenn Sie HIIT auswählen, wird eine Liste der HIIT Workouts angezeigt. Nehmen wir hier eine Karte und lassen Sie uns das als Platzhalter hinzufügen. Zeigen Sie Workouts, lassen Sie uns dies als Burpees zeigen. Zentrieren wir das. Lassen Sie uns das duplizieren. Sagen wir Cardio. Lassen Sie uns die Reihe duplizieren. Sagen wir, das ist Core Cardio. Dieser wird Krafttraining sagen. Lassen Sie uns die Farben ändern. Nehmen wir an, HIIT Workout-Typ ist Standard. Standardmäßig ausgewählt, also lassen Sie uns [unhörbar] Farbe davon. Dies ist die aktive Farbe. Unter all diesen wollen wir eine Schaltfläche haben, auf der Continue steht. Sie suchen nach Workout, wenn Sie ein bestimmtes Training im Auge haben, sagen Liegestütze. Zeigen Sie die Liegestütze hier an oder Sie können nach Kategorietyp gehen. HIIT zeigt Ihnen die HIIT Workouts. Das wird das gleiche hier angezeigt. Wenn Gewichte, wird es zu dieser Farbe ändern, und es wird Ihnen eine Liste von Trainingseinheiten mit Gewichten und so weiter mit Cardio angezeigt. Sehen Sie? Jetzt wollen wir eine Tab-Leiste am unteren Rand. Gehen wir zurück zu unserem Drähte Bildschirm und sehen, ob wir eine Bar haben. Eine Bar hier. Was sonst noch? Nimm einfach die Bar hier. Das wird unsere Tab-Leiste sein, und wir werden uns darüber Gedanken machen, welche Abschnitte später dort drin sein würden. Dies wird unsere Tab-Leiste sein, auf die wir basierend auf dem Link in den Registerkarten hin und her klicken können. Wir können zu verschiedenen Bildschirmen in unserem Fluss navigieren. Wir werden nicht unbedingt alle diese Bildschirme erstellen, also brauchen wir jetzt nicht wirklich alle diese Schaltflächen, aber wir können das später beheben. Aber das ist unsere Liste des Trainings. Also haben wir Create and Workout, Profil-Setup und Liste der Workouts, Suchleiste, Trainingstyp Kategorie Schaltflächen. Dann von dort haben wir unsere Workouts Anzeige basierend auf dieser Kategorie, Fortsetzungsleiste und unserer Tab-Leiste. Im nächsten Bildschirm erstellen wir unseren Workout-Detail-Bildschirm. Nehmen wir an, dieses HIIT Workout wählen Sie Burpees aus, und Sie werden zu einem Workout-Detail-Bildschirm geleitet, das Burpee-Workout zeigt. 22. Details Bildschirmfoto in Adobe XD: In diesem Video erstellen wir den Bildschirm „Workout-Details“. Dieser Bildschirm enthält die Details über das Training, das der Benutzer im vorherigen Bildschirm ausgewählt hat. Also haben wir einen Trainingstitel, wir haben ein Platzhalter Bild für das Video, wir haben eine Beschreibung über das Video und einen Start-Button. Lassen Sie uns weiter und erstellen Sie diesen Bildschirm. Lassen Sie uns den Bildschirm zum Erstellen eines Kontos duplizieren, also lassen Sie uns alle Elemente loswerden, die wir nicht brauchen. Lassen Sie uns anfangen, diesen Bildschirm zu erstellen. Zuerst benötigen wir einen Zurück-Button, um zur Liste des Trainingsbildschirms zurückzukehren. Bevor wir das tun, nennen wir diese Zeichenfläche hier, Workout-Details. Okay, also brauchen wir einen Zurück-Knopf. Nur für den Fall, dass Sie Benutzer es will, um wieder die Liste der Workouts Bildschirm. Lass uns einen Pfeil holen. Lassen Sie uns zu den Drähten gehen mobil und schauen wir uns unter UI-Elemente, suchen wir nach einem Pfeil, Zurück-Pfeil. Wir können jeden Pfeil benutzen, aber lassen Sie uns das benutzen. Lassen Sie uns hineinzoomen und wir greifen diesen Pfeil. Gehen wir zurück zu unserem Bildschirm. Fügen wir das hinzu und lassen Sie uns einen Titel für diesen Bildschirm haben. Lassen Sie uns das duplizieren, verschieben Sie es nach oben und rufen Sie uns diesen Klassendetails Bildschirm auf und lassen Sie uns die Größe nach unten. Lass es uns 14 sagen und zentrieren es und lasst uns einen Titel haben. Also Platzhalter-Text für gerade jetzt, wir werden es einfach Trainingstitel nennen. Zentrieren Sie den Text. Jetzt zentrieren und zentrieren Sie es auf dem Bildschirm und jetzt brauchen wir ein Platzhalterbild gleich hier. Also gehen wir zurück zu den Drähten und sehen, ob wir ein Platzhalter Bild finden können. Lassen Sie uns scrollen und gehen Sie zu UI-Elementen und hier geht's, hier ist ein Bild, das wir als Platzhalter verwenden können. Lasst uns das auf unseren Bildschirm stellen und zentrieren wir das. Lassen Sie uns diese Log In-Elemente loswerden, wir brauchen diese nicht. Lassen Sie uns das hier runterziehen. Lassen Sie uns die Farbe ändern und fügen Sie diese Farbe hinzu. Wenn Sie doppelklicken und die Füllfarbe hier sehen, können Sie diese einfach hinzufügen, sodass eine neue Farbe in Ihrer Farbpalette hinzugefügt wird. Jetzt können wir einfach darauf klicken, klicken Sie auf die Farbe der Änderung, die Farben, wie wir sie brauchen. In Ordnung, also suchen wir jetzt eine Beschreibung. Wir fügen hier unten eine Beschreibung hinzu. Gehen wir zurück zu den Drähten und lassen Sie uns eine Beschreibung finden. Sieht so aus, als hätten wir hier etwas. Lassen Sie uns das einfach auswählen, kopieren Sie es, gehen wir zurück zu unseren Drahtrahmen und fügen Sie es ein. Lassen Sie uns diesen kleinen Körper loswerden und greifen Sie diese Griffe. Sie können die Breite des Textes ändern. Zentrieren wir das. Verwenden wir nun diese Schaltfläche, lassen Sie uns es ändern, um Start zu sagen. Der Benutzer würde also darauf klicken, um sie zum tatsächlichen Videobildschirm zu bringen , wo er anfangen kann, das Video abzuspielen und mit dem Training zu beginnen. Lassen Sie uns diese Registerkarten gut zu diesem Bildschirm hinzufügen. So haben wir unseren Workout-Detail-Bildschirm. Also, hier in der Liste der Trainingseinheiten, wird ein Benutzer auf eine Kategorie klicken, sagen wir, HIIT, sie werden eine Anzeige der Treffer Workouts in dieser Kategorie haben. Zum Beispiel sagen, das sind Burpees, HIIT Workout. Wenn du darauf klickst, gehst du zum Workout-Detailbildschirm , den wir gerade erstellt haben. Welches wird einen Platzhalter dieses Videobilds haben, das ein Platzhalterbild des Videos hat, das angezeigt wird, das eine Beschreibung hat und lassen Sie uns dies ändern, um Beschreibung Titelzu sagen Beschreibung Titel und lassen Sie uns fett, dass. Wir haben also einen Beschreibungstitel, einen Platzhaltertext, den wir beschreiben , worum es bei diesem Training geht, und einen Start-Button. Sie klicken auf den Start-Button, Sie gelangen zum nächsten Bildschirm , der der Workout-Video-Bildschirm sein wird, und wir werden das im nächsten Video erstellen. 23. Video-Bildschirm in Adobe XD trainieren: Lassen Sie uns unseren letzten Bildschirm erstellen, den Workout-Video-Bildschirm. Auf diesem Bildschirm haben wir das Video, das Sie auf die Schaltfläche „Play“ klicken können, es beginnt das Video abzuspielen und wir werden eine Schaltfläche Ende des Workouts haben, ein Benutzer das Training beenden kann, wenn er es aus irgendeinem Grund schnell beenden muss. Lassen Sie uns anfangen, den Bildschirm zu erstellen. Lassen Sie uns Artboard duplizieren oder wir können einfach eine andere Zeichenfläche erstellen, indem Sie hier auf dieses Symbol klicken. Lasst uns ein weiteres iPhone 10 machen. Rufen wir dieses Artboard Workout Video und suchen wir nach einem Video-Platzhalter. Gehen wir zurück zum Wires-Mobile. Lassen Sie uns verkleinern und scrollen Sie nach unten zu Fotos und Videos. Lass uns Video finden, lass uns das kopieren. Das ist ein guter. Gehen Sie zurück zu unseren Wireframes. Fügen wir das ein und das ist gut. Lasst uns einen Knopf schnappen, diesen aus unserem Workout-Detail-Bildschirm kopieren, ihn hier einfügen und den Namen in End Workout ändern. Wenn der Benutzer das Training früh beenden muss, kann er einfach auf eine Schaltfläche klicken, um dies zu tun. Lassen Sie uns wie einige Video-Zeit Dauer finden. Das können wir finden. Es ermöglicht dem Benutzer zu wissen, wie viel Zeit im Video bleibt, wie viel Zeit verstrichen ist usw. Lassen Sie uns hierher kommen und lassen Sie uns das kopieren und das auf unserem Bildschirm hinzufügen. Lasst uns das nach oben bewegen. Lässt es gruppieren. Wenn wir gruppieren wollen, befehlen wir G. Nun, nennen wir es einfach Zeitdauer oder so etwas und jetzt können wir diese Elemente leicht bewegen. Ich denke, zum größten Teil, das ist, warum wir für den Bildschirm gegangen. Sie gelangen zu diesem Bildschirm durch den Benutzer auf die Trainingsdetails zu sein. Sie haben die Beschreibung des Trainings und klicken auf „Start“. Dann gelangen sie zum Workout Video Bildschirm, wo sie das Video abspielen können. Das Video wird abgespielt und dann werden sie sehen, wie viel Zeit vergangen ist, wie viel Zeit noch übrig ist. Dann können sie das Training beenden, wenn sie es früh zuerst aus irgendeinem Grund beenden müssen. Wenn sie das Training frühzeitig beenden, klicken sie auf die Schaltfläche und gelangen dann zurück zum Workout-Detail-Bildschirm. Dies sind unsere fünf Bildschirme, wir haben alle fünf erstellt: Erstellen Sie ein Konto, Profil-Setup, Liste der Workouts, Workout-Details und Workout-Video. In unserem nächsten Video werden wir mit dem Prototyp beginnen, wo wir einen Low-Fidelity-Prototyp erstellen, indem wir alle diese Bildschirme miteinander verknüpfen , so dass Sie, wenn Sie auf eine Schaltfläche oder eine Aktion auf jedem Bildschirm klicken, werden wir mit dem Prototyp beginnen, wo wir einen Low-Fidelity-Prototyp erstellen, indem wir alle diese Bildschirme miteinander verknüpfen, so dass Sie, wenn Sie auf eine Schaltfläche oder eine Aktion auf jedem Bildschirm klicken, auf dem nächsten Bildschirm. Auf diese Weise können unsere Konstruktionsteams unsere Testbenutzer oder die Stakeholder des Projekts unseren Prototyp schnell testen, um zu sehen, ob er in die richtige Richtung geht. Was Sie nicht wollen, ist, Sie alle diese Bildschirme entwerfen, beginnen, die App zu bauen und erkennen : „Oh, wir haben diesen Bildschirm vergessen. Oh, wir haben dieses Element auf dem Bildschirm vergessen.“ Sie müssen zurückgehen und alle diese Änderungen in der Entwicklungsphase vornehmen. Während, wenn Sie gerade am Anfang einen Prototyp erstellt haben, können Sie einen guten Griff bekommen, wenn der Flow für den Benutzer gut ist. Wenn es irgendwelche Schmerzpunkte gibt, die Sie beheben müssen, bevor Sie zur Entwicklungsphase gelangen, wird der Codierungsphase der App. Im nächsten Video erstellen wir unseren Low-Fidelity-Prototyp. 24. Verbindungen und Präsentation in Adobe XD: Lassen Sie uns nun beginnen, unsere Wireframe-Bildschirme miteinander zu verknüpfen , so dass wir einen Prototyp erstellen können, den die Benutzer testen können. in der oberen linken Ecke von XD auf die Registerkarte „Prototyp“. Wählen wir nun unser erstes Kunstboard aus, damit wir es interaktiv machen können. Vergrößern wir uns ein wenig. Was wir tun wollen, wir wollen nicht den gesamten Bildschirm verknüpfen, wir wollen nur die Schaltfläche „Konto erstellen“ verknüpfen. Also, was wir tun werden, ist, dass wir diesen Knopf auswählen. Wenn Sie ein Element auswählen, werden Sie feststellen, dass es blau wird, und auf der rechten Seite wird ein Pfeil angezeigt. Klicken Sie auf diesen Pfeil, und ziehen Sie ihn auf das Bildfeld oder den Bildschirm, mit dem Sie ihn verknüpfen möchten. In diesem Fall möchten wir klicken und auf den Profil-Setup-Bildschirm ziehen. Sie lassen die Maus los, sobald Sie einen blauen Rand um die Grafik sehen , mit der Sie sie verknüpfen möchten. Sobald es verknüpft ist, sehen Sie in der rechten Spalte hier Optionen zum Anpassen der Interaktion. Sie haben, was die Interaktion auslöst, ein Tippen, ein Ziehen, die Tastatur oder Sprachauslöser, welche Art von Übergang, automatisch animieren, überlagern, scrollen zu, vorherige Art Board, Audio-Wiedergabe oder Sprache -Wiedergabe. In diesem Fall wollen wir nur einen Übergang. Der Zielbildschirm, auf den Sie gehen möchten, wählen wir ein Profil eingerichtet. Also behalten wir das als das gleiche Profil-Setup bei. Welche Art von Animation, auflösen oder Sie haben Schiebe-Optionen, oder Push-Optionen. Lasst uns mit der Folie nach links gehen. Dann haben wir Lockerung und Dauer, und wir behalten diese als Standard bei. Also wollten wir den gleichen Prozess für den Rest unserer Bildschirme fortsetzen. Wir möchten auf das Element klicken, das in diesem Kunstboard anklickbar sein wird, und wir möchten es mit dem Bildschirm verknüpfen, zu dem wir den Benutzer bringen möchten. Also werde ich weiterhin alle diese Schaltflächen verknüpfen. Klicken Sie auf „Weiter“ auf dem Bildschirm „Profileinstellungen“ und verknüpfen Sie es mit der Liste der Trainingseinheiten. Klicken Sie in der Liste der Workout-Bildschirme auf „Weiter“. Lassen Sie uns das mit den Trainingsdetails verknüpfen. Klicken Sie auf die Schaltfläche „Start“ und lassen Sie uns diese mit dem Workout-Video-Bildschirm verknüpfen. Lassen Sie uns für diesen Übergang etwas anderes versuchen, lassen Sie uns nach oben rutschen. Jetzt sind wir bereit, unseren Prototyp in der Vorschau zu sehen. Was wir tun müssen, ist auf unsere ursprüngliche Art Board klicken, die wie der Home-Bildschirm sein wird, wo die Prototyp-Präsentation beginnen wird. Also, wo wir wollen, dass die Präsentation beginnt, beginnen wir mit diesem ersten Kunstboard hier. Also klicken wir darauf und dann klicken wir auf „Vorschau“. Jetzt können wir anfangen, durch unseren Prototyp zu klicken. Benutzer werden zum Bildschirm „Konto erstellen“ kommen, sie geben ihren Namen, E-Mail, Passwort und bestätigen das Passwort, Passwort und bestätigen das Passwort, klicken auf „Konto erstellen“ und dann haben sie ihren Profil-Setup-Bildschirm mit ihrem Namen John Doe, sagen, dass auf dem Bildschirm zuvor eingegeben wurde. Wählen Sie ihr Geschlecht oder ihre Körpergröße, Fitnesslevel und Workouts aus, die ihnen gefallen. Klicken Sie auf „Weiter“. Jetzt befinden Sie sich auf der Liste des Workout-Bildschirms. Sie haben die Trainingstypen, Benutzer wählt „Hit“, Sie sehen eine Reihe von Hit Workouts, und sie klicken auf „Weiter“. Jetzt hast du den Titel des Trainings. Angenommen, Sie haben „Barbies“ auf dem vorherigen Bildschirm ausgewählt. So, jetzt wird dies der Workout Titel sagen Barbies, ein Bild von diesem Training und die Beschreibung. Sie können auf „Start“ klicken, und wie Sie sehen, schiebt es nach oben, und Sie können beginnen, Ihr Video abzuspielen, um Ihr Training zu starten. Also hier haben wir unseren fertigen Prototyp in XD. Sagen wir mal, Sie wollen diesen Prototyp teilen. Um zu teilen, gehen Sie auf die Registerkarte Teilen oben links von XD, und Sie werden Optionen auf der rechten Seite wieder sehen, die Ihnen Optionen geben, um anzupassen, wie Sie diesen Link teilen möchten. Was möchten Sie verknüpfen? Nun, wir wollen das UX-Intro mit Wireframe verknüpfen, das ist der Name unseres Projekts, die Ansichtseinstellung, Design-Review. Sie möchten es Entwicklern teilen. Präsentationsmodus, Benutzer-Tests oder benutzerdefinierte, lassen wir es einfach als Design-Review, und wer hat Zugriff auf den Link: jeder mit dem Link, nur eingeladene Personen, oder jemand mit dem Passwort. Wir werden mit jedem mit dem Link gehen, und dann würden wir auf „Create Link“ klicken und XD wird verarbeiten und in Kürze geben uns einen Link, den wir dann klicken können , und wir können diesen Link mit unseren Benutzern teilen, Stakeholdern, andere Designer, Entwicklungsteam, damit sie den Prototyp in der Vorschau anzeigen und uns Feedback geben können. Lassen Sie uns auf den Link klicken. Scrollen wir einfach durch diese anfänglichen Persona-Bildschirme, Benutzerfluss und lassen Sie uns zu unserem ersten Kunstboard kommen. Also die Benutzer, wer auch immer Sie den Bildschirm testen möchten, klicken jetzt auf diesen Link und sehen dies im Browser und dann können sie durch den Prototyp klicken. Dann können sie Feedback hinzufügen, sie können einen Kommentar machen, einen Text eingeben, einreichen, diese Art von Sache. So haben wir unseren Prototyp in XD, und wir hatten die Fähigkeit, ihn unseren Stakeholdern, Kollegen, Entwicklern und anderen Teammitgliedern zu zeigen . Es ist also nicht wirklich schwierig, einen Prototyp in XD zu erstellen oder mit Ihren Teammitgliedern zu teilen. Also hoffe ich, Sie bauen ein paar Bildschirme in XD, üben die Verknüpfung dieser Bildschirme und beginnen, Prototypen selbst zu erstellen. 25. Letzte Gedanken: Das ist das Ende des Unterrichts. In diesem Kurs haben wir über Balsamiq und Adobe XD und seine Bedeutung für Wireframing und Prototyping gesprochen . Wir haben die Tools in Balsamiq und Adobe XD durchlaufen und eine mobile Beispiel-App erstellt, damit Sie meinen Prozess sehen können. Das ist es für die Klasse. Ich hoffe, ihr habt etwas über Low Fidelity Wireframing und Prototyping gelernt und ich freue mich darauf zu sehen, was ihr euch im Klassenprojekt einfällt. Denken Sie daran, dies ist ein sehr wichtiger Schritt im Designprozess, so glücklich Prototyping.