So erstellen Sie einen Prototyp einer mobilen App mit Adobe XD

Dieses Tutorial, das Ihnen zeigt, wie Sie einen Prototyp einer mobilen App in Adobe XD erstellen, wurde mit zusammengestellt Adobe XD CC (Beta 2017) im Jahr 2016. Die neu gestartetes Adobe XD CC hat einige Verbesserungen vorgenommen, die die Verwendung noch einfacher machen.

Wenn Sie als Designer Benutzererlebnisse für mobile Apps oder Websites erstellen, sind Sie möglicherweise daran gewöhnt, mehrere Tools für unterschiedliche Aufgaben zu verwenden, wenn Prototyp entwickeln .



Sie beginnen mit der Forschung. Anschließend skizzieren Sie Ideen auf Stift und Papier und übertragen Ihre Gedanken später auf ein Entwurfswerkzeug. Um den besten Ablauf zu erzielen, exportieren Sie alle Ihre Assets und bringen sie in ein anderes Tool, um einen Prototyp zu erstellen. Von dort aus teilen oder testen Sie Ihren Prototyp, sammeln Feedback und kehren zur Iteration in die Mitte des Zyklus zurück. Sie wechseln von Werkzeug zu Werkzeug, während Sie Ihr Design verfeinern.



Mehrere Entwurfswerkzeuge lösen jeweils einen anderen Teil des Problems. Aber anstatt Ihnen das Leben als Designer zu erleichtern, verringert der Wechsel zwischen all diesen Tools nur Ihr Tempo.

Was wäre, wenn es ein einziges Tool gäbe, mit dem Sie einen vollständig verbundenen Workflow nutzen könnten? Wo können Sie Ihre Erlebnisse in wenigen Minuten entwerfen und prototypisieren, sie im Web teilen, um Feedback zu erfassen, und dann problemlos Änderungen vornehmen, ohne Ihren Schritt zu unterbrechen? Das Ziel von Adobe Experience Design CC - oder wie wir es nennen, Adobe XD - war genau das.



In diesem Tutorial zeigen wir Ihnen die Hauptbereiche von Adobe XD, indem wir eine einfache mobile App 'Meet the Team' entwerfen, Prototypen erstellen und freigeben.

Wir erstellen eine Inhaltsseite, auf der die Mitglieder des Produktteams aufgelistet sind. Anschließend können Benutzer auf die einzelnen Einträge klicken, um zu einer ausführlicheren Biog-Seite zu gelangen. Sie lernen, wie Sie High-Fidelity-Designs erstellen, Prototypen erstellen und diese teilen, um Feedback zu erhalten.

Sehen Sie sich das Video oben an und befolgen Sie die folgenden Schritte, um zu erfahren, wie Sie mit Adobe XD Prototypen erstellen. Wir zeigen Ihnen nicht nur, wie Sie es erstellen, sondern auch, wie Sie es testen, ein Vorschau-Video davon in Aktion aufnehmen und wie Sie es freigeben und exportieren.



Beachten Sie, dass sich einige Prozesse in der neueren Version von Adobe XD möglicherweise geringfügig geändert haben.

01. Installieren Sie Adobe XD und starten Sie ein neues Design

Beginnen Sie Ihr Design, indem Sie die iPhone-Zeichenfläche aus Ihren Vorlagenoptionen auswählen

Beginnen Sie Ihr Design, indem Sie die iPhone-Zeichenfläche aus Ihren Vorlagenoptionen auswählen

Stellen Sie zunächst sicher, dass Adobe XD aktiviert ist auf Ihrem Computer installiert . Starten Sie es, sehen Sie sich den Begrüßungsbildschirm an und starten Sie ein neues Design mit einer iPhone-Zeichenflächenvorlage.

02. Erstellen Sie eine zweite Zeichenfläche

Verwenden Sie das Zeichenflächenwerkzeug ( ZU ), um eine zweite Zeichenfläche zu erstellen, und ändern Sie deren Titel (durch Doppelklicken) in 'iPhone - Team-Seite' und 'iPhone - Detailseite'. Ändern Sie die Hintergrundfarben beider Zeichenflächen mithilfe des Eigenschafteninspektors auf der rechten Seite in Schwarz. Mit dem Auswahlwerkzeug ( V. ) ausgewählt, können Sie jederzeit die Leertaste drücken, um über Ihr Design zu schwenken.

03. Laden Sie die Lernprogramme herunter

Ich habe einen Ordner mit Assets zusammengestellt, die ich in diesem Tutorial verwenden werde. Sie können sie herunterladen Hier . Ziehen Sie im Finder 'iphone-status-bar.svg' an den Anfang von Zeichenfläche 1 ( x: 8, y: 5 ). Kopieren Sie es dann und fügen Sie es in Zeichenfläche 2 ein, sodass auf beiden Zeichenflächen die Statusleiste oben angezeigt wird. Schlagen cmd + L. um diese Statusleisten in beiden Zeichenflächen zu sperren, damit ihre Eigenschaften nicht geändert werden können. Um sie zu entsperren, können Sie die Verknüpfung erneut verwenden oder auf das Symbol 'Sperren' klicken.

04. Zeichnen Sie ein Rechteck und legen Sie die Abmessungen fest

Konzentrieren wir uns auf Artboard 1 (die Team-Seite). Verwenden des Rechteck-Werkzeugs ( R. ), zeichnen Sie in Zeichenfläche 1 ein rosa Rechteck (# FF2BC2 ohne Rand) und stellen Sie die Abmessungen mithilfe des Eigenschafteninspektorfelds rechts auf 375 x 230 ein.

05. Objekte neu anordnen

Um den Rand zu aktivieren oder auszufüllen, klicken Sie rechts auf das Augensymbol. Schlagen Shift + cmd + [ um es ganz nach hinten zu schicken oder zu gehen Objekt> Anordnen> Nach hinten senden . Wenn Sie Farben mithilfe von Hexadezimalwerten ändern möchten, klicken Sie auf das Farbsymbol. Wenn der native Farbwähler angezeigt wird, wählen Sie die zweite Registerkarte oben aus und ändern Sie das Dropdown-Menü in 'RGB-Schieberegler'.

06. Erstellen Sie eine Kopfzeile

Verwenden des Textwerkzeugs ( T. ), klicken Sie, um eine Kopfzeile für Ihre Teamseite zu erstellen. Meine ist Helvetica Bold, 20, #FFFFFF, x: 18, y: 123. Beginnen wir mit der Zusammenstellung unserer Liste der Teammitglieder. Zeichnen Sie ein graues Quadrat, auf dem sich das Foto des Teammitglieds befindet (100 x 100, x: 8, y: 238, # D0D0D0 ohne Rand).

Kamera mit manueller Steuerung zeigen und aufnehmen

07. Fügen Sie ein weiteres Rechteck hinzu

Rechts davon benötigen wir ein weißes Rechteck (260 x 100, x: 108, y: 238, #FFFFFF ohne Rand), auf dem der Name des Teammitglieds als Überschrift und die Berufsbezeichnung als Überschrift angegeben werden. Verwenden Sie vorerst Platzhaltertext und gestalten Sie ihn nach Ihren Wünschen.

08. Fügen Sie ein Pfeilsymbol hinzu

Um anzuzeigen, dass dieses Feld ein tippbarer Bereich ist, wird ein Pfeilsymbol eingefügt. Ziehen Sie 'path.svg' vom Finder auf die XD-Leinwand bis zu einem Punkt außerhalb der Zeichenfläche. Positionieren Sie es dann auf x: 330, y: 279.

09. Platziere deinen Kopfschuss

Ziehen Sie im Finder einen Kopfschuss auf das graue Quadrat.

10. Erstellen Sie die Liste

Verwenden Sie die leistungsstarke Funktion

Verwenden Sie die leistungsstarke Funktion 'Raster wiederholen', um eine Liste der Teammitglieder zu erstellen

Jetzt können wir unsere Liste erstellen. Zu diesem Zeitpunkt kopieren und fügen Sie normalerweise das oberste Element ein, verschieben die kopierte Version nach unten und passen den Rand an. Sie würden dasselbe für neue Elemente tun, und wenn Sie die Ränder ändern möchten, müssten Sie dies manuell einzeln tun.

Nicht mit Adobe XD - Sie können die Funktion 'Raster wiederholen' verwenden. Wählen Sie die Elemente aus, die Sie wiederholen möchten, und klicken Sie rechts im Eigenschafteninspektor auf die Schaltfläche 'Raster wiederholen'. cmd + R. ) und verwenden Sie die grünen Griffe, um die Elemente vertikal zu wiederholen. Sie können sie für eine Tablet-Version auch horizontal wiederholen.

11. Passen Sie den Rand an

Passen Sie den Rand Ihres wiederholten Rasters an, indem Sie mit der Maus über den Rand Ihrer Elemente fahren, klicken und ziehen. Stellen Sie den Rand auf 7 ein. Ziehen Sie das Wiederholungsraster an den unteren Rand Ihrer Zeichenfläche. Wir haben jetzt vier Reihen zum Spielen.

12. Bearbeiten Sie die Textfelder

Ziehen Sie alle Headshots auf das Raster

Ziehen Sie alle Headshots auf das Raster

Während Eigenschaften (Farben, x- und y-Positionen usw.) global sind, kann der Inhalt jedes Elements eindeutig sein. Bearbeiten Sie die Textfelder auf den Namen und die Berufsbezeichnung jeder Person. Sie können doppelklicken, um das Raster und die Gruppe einzugeben, oder cmd + klicken um ein Element innerhalb einer Gruppe oder eines wiederholten Rasters direkt auszuwählen. Jetzt müssen wir nur noch alle Headshots auf einmal aufnehmen und auf das Raster ziehen, und wir sind mit diesem Bildschirm fertig.

13. Erstellen Sie einen abgedunkelten Effekt

Lassen Sie uns zu Artboard 2 (der Detailseite) springen. Wieder beginnen wir mit einem Platzhalterrechteck (375 x 444, x: 0, y: 0, #FFFFFF ohne Rand) und ziehen einen Kopfschuss, um ihn zu füllen. Wir erzeugen einen abgedunkelten Effekt, indem wir die Deckkraft des Bildes auf 60 Prozent ändern und es nach hinten senden ( Shift + cmd + [ ).

14. Fügen Sie einen weiteren Pfeil hinzu

Sperren Sie dann das Headshot-Objekt ( cmd + L. ) und fügen Sie einen weiteren Pfeil hinzu ('back-arrow.svg'), um anzuzeigen, dass der Benutzer zur Teamliste zurückkehren kann. Dies muss bei x: 20, y: 40 liegen. Es ist wichtig, das Bild zuerst zu sperren, da sonst das SVG den Headshot ersetzt.

15. Fügen Sie die Kontaktinformationsleiste hinzu

Wir möchten auf jeder Seite einen rosa Balken einfügen, in dem die Kontaktdaten des Teammitglieds aufgeführt sind (375 x 45, x: 0, y: 400). Verwenden Sie das Textwerkzeug ( T. ) Um ein Textelement mit der Aufschrift 'Platzhalter-Link' zu erstellen, zentrieren Sie es, formatieren Sie es und platzieren Sie es bei x: 169, y: 416.

16. Erstellen Sie weitere Instanzen des Textelements

Verwenden Sie das Werkzeug 'Raster wiederholen', um zwei weitere Instanzen dieses Textelements zu erstellen. Konvertieren Sie zunächst den Text in ein Wiederholungsraster ( cmd + R. ) und halten Sie dann die Optionstaste gedrückt, während Sie das Raster horizontal erweitern. Schön, nicht wahr? Wählen Sie den Text direkt aus ( cmd + klicken ) und ändern Sie den Inhalt in 'E-Mail', 'Twitter' und 'LinkedIn'.

17. Erstellen Sie einen Namen und eine Biobox

Erstellen Sie zum Abschluss des Entwurfs ein weißes Feld (360 x 214, x: 8, y: 445), das den Namen und das Biog des Teammitglieds enthält. Fügen Sie zunächst ein Textelement mit dem Platzhalter 'Personenname' hinzu. Für das Textelement, das das Biog enthält, möchten wir Area Text verwenden. Wählen Sie dazu das Textwerkzeug ( T. ) und klicken und ziehen Sie, um den Bereich für Ihre Kopie zu definieren. Geben Sie vorerst wieder Platzhaltertext ein und passen Sie die Stileigenschaften an.

18. Erstellen Sie Zeichenflächen für andere Teammitglieder

Duplizieren Sie Ihre Detailseite, sodass für jedes Teammitglied eine vorhanden ist

Duplizieren Sie Ihre Detailseite, sodass für jedes Teammitglied eine vorhanden ist

Lassen Sie uns nun einige neue Zeichenflächen für andere Teammitglieder erstellen. Entsperren Sie zuerst das Hauptbild ( cmd + L. ), klicken Sie dann auf den Titel von Artboard 2, um ihn auszuwählen, und klicken Sie auf cmd + C. um es zu kopieren. Rauszoomen ( cmd + - oder verwenden Sie das Trackpad, um zu zoomen) und drücken Sie dann cmd + V. drei neue Zeichenflächen einfügen. Fügen Sie jeder Seite einige Biog-Informationen hinzu. Aktualisieren Sie die Namen und Headshot-Bilder und ordnen Sie die Zeichenflächen auf der Leinwand an. Cool! Unser Design ist vorerst fertig.

19. Richten Sie den Durchfluss ein

Es ist Zeit, den Ablauf der App zu definieren. Ein Prototyp kann tausend Besprechungen wert sein, daher erstellen wir einen, um unsere Entwurfsabsicht zu kommunizieren. Wechseln Sie einfach in den Prototyp-Modus (oben links) und wählen Sie das Element aus, auf das der Benutzer tippen wird (halten Sie die Taste gedrückt) cmd und wählen Sie einen Draht auf die rechte Zeichenfläche. Wenn die Maus losgelassen wird, können wir den Übergang, die Lockerung und die Dauer einstellen. Einfach.

20. Verbinden

Verbinden Sie jedes Element in Ihrer Liste mit der entsprechenden Detailseite

Verbinden Sie jedes Element in Ihrer Liste mit der entsprechenden Detailseite

Lassen Sie uns alle Elemente auf unserer Liste auf Zeichenfläche 1 durchgehen und sie mit der jeweiligen Detailseite verknüpfen. Für jede dieser Optionen möchten wir den Übergang auf 'Nach links schieben' und die Lockerung auf 'Entspannen' einstellen. Als nächstes können wir die hinteren Pfeile auf jeder der Detailseiten wieder mit Zeichenfläche 1 verbinden. Denken Sie daran, den Übergang diesmal auf Nach rechts schieben einzustellen. Boom - unser Prototyp ist fertig.

21. Testen Sie den Prototyp

Alle Änderungen an Ihrem Design werden sofort in der Vorschau angezeigt

Alle Änderungen an Ihrem Design werden sofort in der Vorschau angezeigt

Um den Prototyp zu testen, klicken Sie oben rechts auf die Schaltfläche Wiedergabe (Vorschau). Sie müssen das Vorschaufenster nicht schließen, um Ihr Design oder Ihre Kabel zu aktualisieren. Nehmen Sie einfach Änderungen vor, die automatisch im Vorschaufenster angezeigt werden.

22. Mach ein Video

Beim Testen des Prototyps ist es einfach, ein Video Ihrer Interaktionen aufzunehmen. Klicken Sie bei geöffnetem Vorschaufenster auf die Schaltfläche Aufnahme, um die Aufnahme zu starten und zu beenden. Speichern Sie die '.mov'-Datei und teilen Sie sie mit Ihren Stakeholdern.

23. Teilen Sie Ihre Arbeit

Teilen Sie Prototypen im Web

Teilen Sie Prototypen im Web

Um die Prototypen im Web freizugeben, klicken Sie oben rechts auf die letzte Schaltfläche (Online freigeben). Klicken Sie auf die Schaltfläche Link erstellen. Alle Assets werden in die Creative Cloud hochgeladen und ein Link erstellt. Wenn Änderungen erforderlich sind, können Sie zum Entwurfsmodus zurückkehren, die Änderungen vornehmen und erneut freigeben. Der ganze Fluss funktioniert einfach.

24. Dateien exportieren

Sie können Designs als PNGs für Web, iOS und Android in verschiedenen Größen oder SVGs exportieren

Sie können Designs als PNGs für Web, iOS und Android in verschiedenen Größen oder SVGs exportieren

Über XD können Sie PNGs für Web, iOS und Android in verschiedenen Größen sowie hochoptimierte SVG-Dateien exportieren.

Was ist Adobe Premiere Pro CS6

25. Genießen Sie die Ergebnisse

Herzliche Glückwünsche! Sie haben die Grundlagen von Adobe Experience Design CC (Vorschau) beherrscht. Fühlen Sie sich frei, Ihre Prototypen im Web und in den sozialen Medien zu teilen - fügen Sie hinzu #adobexd damit wir Ihre Arbeit sehen können.

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 280. Abonnieren Sie net hier .

Zum Thema passende Artikel