Machen Sie einen Hi-Fidelity-Prototyp in Atomic

Es ist leicht, sich aufzuklären, indem Sie versuchen, eine Idee innerhalb eines statischen Mockup- oder einem flachen Dateizeichnungswerkzeugs zu entwickeln, aber a Prototyp ist tausend Treffen wert. Warum sollten Sie sich mit etwas weniger zufrieden geben, als Ihre Ideen auf interaktive Weise zu erforschen?

Vielleicht haben Sie eine Idee, wie sich ein Übergang verhalten könnte, aber Sie sind sich nicht ganz sicher, ob es sich auf den Benutzer fühlen würde. Schnell prototypisierung des Übergangs und der Interaktion mit ihm gibt Ihnen direkt eine viel realistische Erfahrung, wie das Endprodukt in der realen Welt arbeiten könnte.

Wir haben gesehen, dass Werkzeuge Prototyping in den Designbereich bringen, aber keine Atomisch . Jetzt gibt es einen Weg, um vollständig interaktive, hi-Fidelity-Prototypen aufzubauen, die sich wie das echte Sachen aussehen und verhalten.

Prototyping in Atomic ist unglaublich schnell: Sie können in Minuten schönen, fortschrittlichen Mobiles erstellen, ohne einen Code zu schreiben, jede Software installieren oder zu viel Kaffee zu trinken. Sie können in der Lage sein, mit dem Prototyp direkt auf Ihrem mobilen Gerät anzuzeigen oder mit einem Teamkollegen zum Feedback zu teilen. Wir haben auch alle Vermögenswerte vorgegeben, die Sie benötigen, um zu beginnen, damit Sie nichts importieren müssen (aber Sie können von Skizze importieren Photoshop CC. auch).

In diesem Tutorial erkunden wir einen einfachen Wischübergang in einer Wetter-App, die wir in Atomic erstellen werden. Wir gehen durch die einfachen Schritte zum Basteln von Übergängen, und wenn Sie eine Herausforderung benötigen, decken Sie auch einige fortschrittlichere Prototyping-Funktionen für Sie ab, um zu erkunden.

01. Melden Sie sich an

Lass uns anfangen! Wenn Sie noch kein Konto haben, öffnen Sie Google Chrome, Besuch Atomic.io. und melde dich für eine kostenlose Testversion an. Dies dauert 30 Tage lang, was Ihnen viel Zeit sein sollte, um Atomer zu erkunden und Ihren ersten Prototyp zu erforschen.

02. Schauen Sie sich um

Jetzt sind Sie an Ihrem Konto angemeldet, dies ist eine tolle Zeit, um zu erkunden. Sie werden feststellen, dass ein Beispielprojekt für Sie eingerichtet wurde. Dies hat einige einleitende Beispieldateien, mit denen Sie mit Atomic vertraut machen können. Alternativ können Sie unsere besuchen Vitrine mit einer Sammlung von Prototypen, die von anderen gebaut wurden. Wenn Sie stecken bleiben, ist der beste Ort, um nach einer Lösung zu suchen, unsere Help Center .

03. Neues Projekt.

Erstellen Sie ein neues Projekt, indem Sie auf "Neues Projekt" klicken, und nennen Sie es 'Recipe App'. Durch Drücken von ENTER wird der Projektordner geöffnet. Hier können Sie alle Designs in diesem speziellen Projekt anzeigen. Da dies ein neues Projekt ist, ist es leer. Designs füllen sich jedoch im Laufe der Zeit, während Sie sie erstellen.

04. Schnapp dir eine Probe

Anstatt ein neues leeres Design zu erstellen, Kopf hier . Dadurch wird eine Sample-Datei geöffnet, die wir erstellt haben, um Ihnen beim Einstieg zu helfen.

Sehen Sie die Schaltfläche "Kopieren und Bearbeiten" in der rechten unteren Ecke? Klicken Sie darauf und fügen Sie sie Ihrem Rezept-App-Projekt hinzu. Klicken Sie auf "Jetzt bearbeiten". So wie dies, eine Kopie unserer Beispieldatei befindet sich jetzt in Ihrem Projekt, das Sie bearbeitet haben.

05. Erkunden Sie den Editor

Willkommen im Editor! Wenn Sie ein Design-Tool in der Vergangenheit eingesetzt haben, fühlt sich Atomic wahrscheinlich vertraut an. Lass uns umsehen. Auf der linken Seite finden Sie Zugriff auf Zeichnungs-, Layout- und Prototyping-Tools sowie zwei Registerkarten, mit denen Sie zwischen den Seiten und der Ebenen wechseln können. Auf der rechten Seite erkennen Sie das Eigenschaftspanel, mit dem Sie Ihre Seitengröße ändern können, sowie Einstellungen für Stile und Übergänge einzubauen.

06. Überprüfen Sie die Elemente

Auf der Seite Assets Seite der Sample-Datei sehen Sie, dass wir alle Elemente erstellt, die in diesem Prototyp für Sie verwendet werden. Wechseln Sie in das Ebenenfenster, und klicken Sie dann auf einige der Elemente auf der Leinwand. Die ausgewählten Elemente werden automatisch in der Ebenenfenster hervorgehoben. Beschleunigen Sie Ihren Workflow, indem Sie auf '?'? '? Um das Angebot an Keyboard-Verknüpfungen anzuzeigen, können Sie verwenden.

07. Vorschau.

Sie können in der rechten unteren Ecke des Editors in der rechten rechten Ecke des Editors mit Ihrem Prototyp angezeigt werden. Wir werden dies später verwenden, um zu testen, wie sich unsere Übergänge fühlen. Die Auswahl von 'Preview' zeigt Ihnen jetzt die Assets im Vollbildmodus, aber wenn Sie mit den Pfeilen zu Seite 2 navigieren, sehen Sie ein Referenzbeispiel des ersten Zustands unseres Prototyps. Versuchen Sie, mit dem Referenzbeispiel zu interagieren, indem Sie auf die Schaltfläche "Gespeicherte Rezepte" in der Header klicken, um anzuzeigen, was wir erstellen werden.

08. Erste Schritte

Jetzt sind Sie mit dem Prototyp, den wir bauen, vertraut, es ist Zeit, um loszulegen! Wählen Sie 'Bearbeiten', um in den Editor zurückzukehren, und wählen Sie auf der Seite Assets alle Elemente aus und kopieren Sie sie in die Zwischenablage. Gehen Sie zu Seite 1 und fügen Sie die Elemente auf die Seite ein.

09. Vereinbaren Sie Ihr Vermögen

Stellen Sie ohne ausgewählte Elemente den Hintergrund Füllen Sie Ihre Leinwand auf # F6F7F8 ein (schauen Sie in das Panel der rechten Eigenschaften). Legen Sie den Header auf die Leinwand, Oberseite und Zentrum.

Sie möchten das Vermögen neu anordnen, sodass Ihr erster Staat (alle Rezepte) auf der Leinwand positioniert sind, und die Vermögenswerte für Ihren bald erstellten zweiten Zustand (gespeicherte Rezepte) sind von der Leinwand nach rechts. Deshalb: Wenn auf Seite 1 und Seite 2 dasselbe Objekt existiert, belebt Atomic Änderungen automatisch.

10. Stapeln Sie Ihre Karten

Wenn Sie den Prototyp anfänglich in der Vorschau der Prototype in der Vorschau von Rezepten auf der Seite 'Reference - ALL Recipes' sind, ist möglicherweise vertikal scrollbar. Um diesen Effekt hinzuzufügen, ordnen Sie die Rezeptkarten in einem vertikalen Stapel ein, einschließlich des Textes "Bemehen Sie den Text", der zuletzt platziert werden sollte, unten.

11. Erstellen Sie einen Scrollbehälter

Wählen Sie die Rezeptkarten aus und kehren Sie den Text von morgen zurück, und wählen Sie das Container-Tool, das in der oberen Mitte der Leinwand erschienen ist. Wählen Sie 'Scrollbehälter erstellen'. Der Inhalt wird dann gruppiert und in das, was wir einen Scrolling-Container anrufen, mit vertikaler Scrolling standardmäßig aktiviert. Stellen Sie sicher, dass Sie die Grenzen Ihres Containers definieren, indem Sie die untere Grenze hochziehen, um die Elemente zu maskieren und die Leinwand zu treffen.

12. Platzieren Sie Ihre Elemente

Für diesen speziellen Übergang möchten wir, dass das Raster 'gespeicherte Rezepte von rechts kam, und der Text hinzufügen, der sich von unten befindet. Um sicherzustellen, dass dies passiert, platzieren Sie jedes Element in der jeweiligen Startposition. Zum Beispiel sollten 'gespeicherte Rezepte' auf Seite 1, von der Leinwand und nach rechts platziert werden. Während der Text hinzugefügt werden sollte, sollte auf Seite 1 auf der Leinwand und unten aufgestellt werden.

13. Tippen Sie auf Übergang

Da wir einen TAP-Übergang erstellen, wo wir möchten, dass die Elemente auf unserer nächsten Seite hineinrutschen, ist es wichtig, dass sie auch auf Seite 1, von der Leinwand vorhanden sind, um ihre Ausgangsposition zu definieren. Sie können jederzeit auf die Seite 'Reference - ALLE Rezepte' beziehen, um zu sehen, wie diese Seite arrangiert werden soll.

14. Vervielfältigung

Jetzt haben wir die erste Seite eingerichtet, es ist Zeit, den zweiten Status für den Übergang zu erstellen, den wir auf einer neuen Seite tun. Vergewissern Sie sich, dass das Pages-Panel ausgewählt ist, und fahren Sie über Seite 1, um das Hamburger-Menü unten rechts auf der Seitenkarte aufzurufen. Klicken Sie auf das Menü und wählen Sie 'Duplicate' '.

15. Gespeicherte Rezepte.

Navigieren Sie zu Ihrer neu duplizierten Seite, um den zweiten Zustand zu erstellen: Ihre gespeicherten Rezepte. Hier ist es wichtig, keine Elemente auf der Seite zu löschen, da dies den Übergang bricht. Da wir die Seite dupliziert haben, weiß Atomic, dass die Elemente auf beiden Seiten die gleichen verbundenen Elemente sind. Daher weiß es, dass sie alle Änderungen animieren, die wir mit den Eigenschaften der Elemente auf Seite 2 (Größe, Position, Rotation, Deckkraft, Farbe usw.) animieren.

16. Weitere Übergänge

Verschieben Sie zunächst die Bildlaufgruppe "Alle Rezepte" nach links, von der Leinwand, und das "gespeicherte Rezepte" und "Fügen Sie mehr" Text in ihre neuen Positionen hinzu: im Körper (anstelle der "All Recipes") auf die untere Hälfte der Leinwand bzw. in der Mitte. Das einzige Element, das wir in diesem Übergang nicht bewegen, ist der Header. Dies liegt daran, dass der Header auf dem Bildschirm bleibt und nur subtil ändert - wir kommen bald dazu.

17. Weitere Animationen

Für den Kopfzeilen möchten wir, dass der blaue Hintergrund im zweiten Zustand gleitet. Erweitern Sie während der Öffnen des Ebenensatzes auf Seite 2 die Gruppe mit dem Titel 'Header' und wählen Sie das blaue Rechteck aus. Bewegen Sie dies dann nach rechts, so dass es hinter den "gespeicherten Rezepten" platziert wird. Nett!

18. Der Spaßteil

Jetzt kommt der Spaß an der Erstellung des Übergangs. Auf Seite 1 zeichnen wir einen Hotspot über den Text "gespeicherte Rezepte" in der Kopfzeile, da dies der Bereich ist, mit dem wir mit unserem Benutzer interagieren möchten. Wählen Sie das Interaktion-Hotspot-Tool aus dem Werkzeugfeld ganz links vom Editor (oder drücken Sie einfach H) aus. Sie können Hotspots mit derselben Methode zeichnen, mit der Sie ein Rechteck auf der Leinwand ziehen würden: Klicken Sie einfach auf und ziehen.

19. Übergangseinstellungen

Sobald Sie Ihren Hotspot gezogen haben, werden Sie mit ihm noch ausgewählt, Sie sehen, dass ein Interaktionen-Abschnitt im Eigenschaften-Panel rechts angezeigt wird. Hier können Sie die Trigger-Geste, die Zielseite, den Bewegungstyp und die Dauer des Übergangs angeben. Für diesen Übergang geben Sie die folgenden Einstellungen an: Geste: Klicken Sie auf oder tippen Sie auf ; Gehe zu: Seite 2 ; Bewegung: E. Ase ; Dauer: 250. .

20. hin und her

Wir möchten in der Lage sein, zwischen den beiden Übergängen hin und her wechseln zu können, sodass wir jetzt auch einen Hotspot auf Seite 2 aufstellen müssen, um uns zurückzubringen. Kopieren Sie den Hotspot von Seite 1 mit den Tastenkombinationen und einfügen es auf Seite 2 über den Text "All Recipes" im 'Header'. Denken Sie daran, die Zielseite des neuen Hotspots auf Seite 1 zu aktualisieren.

21. Vorschau.

Es ist Zeit, eine Vorschau Ihres Übergangs anzuzeigen! Navigieren Sie auf Seite 1 im PAPES-Bedienfeld und klicken Sie auf Vorschau rechts unten auf dem Editor (Verknüpfung CMD + ENTER. ). Klicken Sie auf oder tippen Sie auf 'gespeicherte Rezepte' auf Ihrem Prototyp, um auf Seite 2 zu gelangen. Wählen Sie dann auf "Alle Recipes" -Prototype aus, um auf Seite 1 zurückzuzahlen.

22. Alles erledigt!

Jetzt bist du ein Profi! Wählen Sie "Bearbeiten", um zum Editor zurückzukehren. Wenn Sie dann das Assets und zwei Referenzseiten löschen (indem Sie das Hamburger-Menü der Seite auswählen und dann 'Seite löschen'), ist der gerade getroffene Prototyp bereit zum Teilen. Sie können problemlos einen Freigabe-Link erstellen, indem Sie unten rechts im Editor "Teilen" drücken.

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 283; Kaufen Sie es hier. Schnitte