Prototypen mit Leichtigkeit – Ein InVision Studio Tutorial

Wenn Sie in der ersten Hälfte des Jahres 2018 nicht geschlafen haben, waren Sie sich wahrscheinlich der fieberhaften Vorfreude in der interaktiven Design-Community im Vorfeld der Veröffentlichung der InVision Studio-App bewusst. InVision ist vor allem für seine Sketch- und Photoshop-Plugin-Suiten wie Craft bekannt und dafür, dass es die Plattform der Wahl ist, um statische Schnittstellendesigns schnell in anklickbare und gemeinsam nutzbare Prototypen umzuwandeln. In einem mutigen Schritt kündigten sie letztes Jahr die Entwicklung ihrer eigenen digitalen Designsoftware an, um mit Branchenfavoriten wie Sketch und Figma zu konkurrieren.

Das Produkt wurde als revolutionär gehyped und machte einige gewichtige Versprechungen für einen nahtlosen Workflow vom Design zum Prototyp, komplexe Interaktionsfunktionen, atemberaubende Übergangsanimationen – und es wäre kostenlos. InVision veröffentlichte einige ziemlich aufregende Teaser-Videos und Demos, um Designer zu begeistern. Die Vorfreude stieg weiter, als die erste Beta-Version Anfang des Jahres mehr als ein paar Mal verschoben wurde.

Da immer mehr Designer begonnen haben, mit der Software herumzuspielen, tauchen immer mehr Tutorials und Leitfäden auf, um die Grundlagen des App-Interface-Designtools zu demonstrieren. InVision hat auch einige eigene erstellt, um Benutzer in die Grundlagen von InVision Studio einzuarbeiten.

Auch wenn die Early-Access-Versionen gemischte Kritiken erhalten, hat Studio einige interessante Funktionen und viel Potenzial. Dieses Tutorial zielt darauf ab, Early Adopters durch die Grundlagen des InVision Studio-Prototypings zu führen und einige grundlegende Prototypanimationen hinzuzufügen.

Erstellen Sie im Handumdrehen einen interaktiven Prototypen mit raffinierten animierten Übergängen, indem Sie diesem InVision Studio-Tutorial folgen!

Die Nickel-Tour durch den Arbeitsbereich von InVision Studio

Ein Großteil von Studio sollte UI-Designern und allen vertraut sein, die digitale Designsoftware wie Sketch verwendet haben. Ein Großteil des Arbeitsbereichs leiht sich Hinweise aus der Benutzeroberfläche von Sketch, wobei die linke Seitenleiste Seiten, Ebenen und Gruppen enthält; die rechte Seitenwand für Inspektoren; und eine kontextabhängige Symbolleiste am oberen Rand.

Sie werden auch viele der gleichen Tools finden, auch wenn einige Funktionalitäten anders benannt sind. Beispielsweise wird ein Sketch-„Symbol“ in Studio als Komponente bezeichnet.

Das Interaktionsfenster

Für die Zwecke dieses Tutorials konzentrieren wir uns auf die Verwendung der Interaktionswerkzeuge, um interaktive Hotspots zwischen Bildschirmen zu erstellen und reibungslose Übergänge zwischen ihnen zu schaffen. Ein Großteil der Magie wird im „Interaktionsbereich“ auf der rechten Seite des Studio-Arbeitsbereichs passieren.

Die einfache Möglichkeit, Interaktionen zu erstellen, besteht darin, eine Triggerebene oder -gruppe auszuwählen und „c“ auf der Tastatur zu drücken (oder auf das Blitzsymbol in der oberen Symbolleiste zu klicken), wodurch ein blaues Pick-Wheel gestartet wird, mit dem ein Zielbildschirm ausgewählt wird. Studio fordert den Designer dann auf, die Geste oder Benutzereingabe auszuwählen, die das Ereignis auslöst, und zwischen einer Reihe von voreingestellten Übergängen oder einem „Bewegungs“-Übergang zu wählen.

InVision Studio-Animation

Es gibt viele Elemente für ein großartiges Interaktionsdesign, aber die korrekte Verwendung von animierten Übergängen und Mikrointeraktionen in einer Benutzeroberfläche ist mehr als nur Schaufensterdekoration.

Sie verbessern die Benutzerfreundlichkeit und können den Unterschied zwischen einem beliebten Produkt und einem verwirrenden Durcheinander ausmachen.

In diesem Tutorial verwenden wir eine Kombination aus voreingestellten Übergängen und Bewegungsübergängen, um unseren App-Prototypen zu erstellen. Die voreingestellten Übergänge sind ziemlich einfach und werden Benutzern der InVision-Online-Prototypenplattform vertraut sein.

Die Regeln, die bestimmen, wie die Bewegungsübergänge zwischen Bildschirmen funktionieren, sind etwas mysteriöser. Während bei der Erstellung des Tools viele offensichtliche Designerüberlegungen berücksichtigt wurden – zum Beispiel die automatische Verknüpfung von Elementen zwischen Bildschirmen – sind einige Versuche und Irrtümer erforderlich, um bestimmte Effekte beim Hinzufügen von Bewegung zu Übergängen zu erzielen. Hoffentlich hilft dieses Tutorial Designern dabei, sich beim Experimentieren mit dem, was InVision Studio zu bieten hat, etwas wohler zu fühlen.

Dinge, die Sie im Auge behalten sollten

Studio verspricht viele intelligente Funktionen rund um Animationen. Beispielsweise kann es Bewegungsübergänge zwischen Objekten erstellen, die von einer Zeichenfläche auf eine andere dupliziert werden, wenn sie durch eine Interaktion verbunden sind. Designer können diese Animationen dann nach Belieben optimieren, um einige schöne Beschleunigungs- und andere Bewegungseffekte zu erzielen. Das Erlernen der Exzentrizitäten, wie dies funktioniert, wenn versucht wird, einen Stapel von Objekten in einer bestimmten Reihenfolge zu überführen, kann Geduld und etwas Übung erfordern.

Bewegungsübergänge funktionieren am besten mit Objekten auf Zeichenflächen, die voneinander dupliziert wurden. Die Animationsfunktion ist insofern „intelligent“, als sie doppelte Objekte mit denselben Ebenennamen erkennt. Achten Sie also darauf, keine Schlüsselebenen zwischen Bildschirmen zu entfernen oder umzubenennen (was eine frustrierend einfache Möglichkeit ist, eine großartige Animation zu ruinieren).

Denken Sie daran, dass Studio noch in den Kinderschuhen steckt, Designer sollten also darauf vorbereitet sein, auf eine ganze Menge Bugs zu stoßen. Beispielsweise startet die Schaltfläche „Vorschau“ eine interaktive Vorschau des Prototyps, aber gelegentlich werden die Interaktionen überhaupt nicht ausgelöst, in diesem Fall müssen Sie die Datei speichern und erneut öffnen.

Während ich die Software lernte, hatte ich den Eindruck, dass mehr als eine Datei sich seltsamerweise selbst beschädigte – alle Zeichenflächen löschte und alle Werkzeugfelder unzugänglich machte. Ich habe den Fehler gemeldet und gelernt, mehrere Versionen meiner Dateien zu speichern, um nicht zu viel Arbeit zu verlieren.

Schließlich hilft es immer, organisiert zu sein. Beim Erstellen eines Prototyps auf einer beliebigen Plattform, ob Studio, Sketch oder Marvel, spart das Verfolgen von Objekten und Ebenenbeschriftungen Zeit und Frustration – insbesondere, wenn Sie mit einem Team arbeiten oder die Datei irgendwann übergeben. Beachten Sie beim Erstellen von Interaktionen die Reihenfolge der Ebenen und Ebenengruppen. Dies macht oft einen großen Unterschied beim Erreichen des gewünschten Animationseffekts.

Das Tutorium!

Lass uns anfangen! Wenn Sie es noch nicht getan haben, gehen Sie zu InVision Studio, um eine Early-Access-Version der Studio-App herunterzuladen. Sobald Sie InVision Studio auf Ihrem Computer installiert haben, laden Sie die Tutorial-Dateien hier herunter. Nachdem Sie die Studio-Software gestartet haben, können Sie die Datei dort öffnen, wo Sie sie gespeichert haben.

Schritt 1: Öffnen Sie die Datei und werfen Sie einen Blick darauf

Dieser interaktive Prototyp wird für eine mobile App über moderne Künstler aus dem späten 19. bis frühen 20. Jahrhundert sein. Alle Bildschirme wurden im Voraus mit sorgfältiger Vervielfältigung der Zeichenfläche erstellt, was für die ordnungsgemäße Verwendung der Bewegungsübergangsfunktion erforderlich ist.

Die Hierarchie hat 3 Tiefenebenen, beginnend bei „Zuhause“, dann in die Biografie jedes einzelnen Künstlers und schließlich hinunter zu einem Karussell mit vier Beispielen der Arbeit des Künstlers. Sie werden feststellen, dass die Zeichenfläche „Home“ ein kleines Symbol eines Hauses aufweist, das die Startzeichenfläche für den Prototypen darstellt.

Das Tutorial konzentriert sich auf das Erstellen einfacher Navigationspfade, die diese drei Tiefenebenen verbinden. Wir werden die Interaktions- und Übergangswerkzeuge von Studio verwenden, damit sich der Prototyp wie eine richtig interaktive App anfühlt.

Schritt 2: Verbinden Sie die Artist Tile mit der Artist Bio

Gehen Sie zur ersten Zeichenfläche. Nehmen Sie sich einen Moment Zeit, um die Ebenengruppe „Künstlerkachel 1“ zu erweitern. Sie werden drei verschachtelte Gruppen bemerken: eine für den Künstlernamen, eine für ein ausgewähltes Bild und eine dritte Ebene mit „Bio-Text“.

Auf dem Zeichenflächenbildschirm ist die dritte Ebenengruppe aufgrund der Art und Weise, wie Studio mit Bewegungsübergängen umgeht, nicht sofort sichtbar, worauf wir gleich noch eingehen werden. Merken Sie es sich jetzt einfach vor.

Wählen Sie die Ebenengruppe aus, die all diese Elemente enthält: „Künstlerkachel 1“. Drücken Sie bei ausgewählter Gruppe „c“ auf Ihrer Tastatur (oder klicken Sie auf das Blitzsymbol in der oberen Symbolleiste), um das Interaktionstool zu starten. Auf Ihren Cursor folgt ein blauer Pick Whip, um den Zielbildschirm für Ihre Interaktion auszuwählen.

Wählen Sie sofort rechts die Zeichenfläche mit dem Titel „Artist Bio 1“ aus und Sie werden aufgefordert, den Auslöser und die Art des Übergangs auszuwählen. Wählen Sie als Trigger „Tap“ und dann „Motion“ als Übergang. Sie können dann die Dauer des Übergangs wählen. Lassen Sie uns diesen Übergang auf 2 Sekunden einstellen und auf „Speichern“ klicken.

Klicken Sie auf die Wiedergabeschaltfläche, um eine Vorschau des Prototyps anzuzeigen. Haben Sie gesehen, wie sich Dinge entlang des Bildschirms bewegen und wie die Bioschicht unter dem Bild nach unten gerutscht ist? Herzlichen Glückwunsch – Sie haben einen ziemlich raffinierten Interaktionsübergang erstellt!

Schritt 3: Verbinden Sie einen Zurück-Button mit dem Startbildschirm

Jetzt sollten wir den Benutzern eine Möglichkeit geben, zum Startbildschirm zurückzukehren. Gehen Sie zur Zeichenfläche „Artist Bio 1“ und wählen Sie die Komponente „btn_back“ in der oberen linken Ecke aus. Erstellen Sie hier einen Trigger, indem Sie „c“ drücken und die Zeichenfläche „Home“ auswählen.

Stellen wir den Auslöser erneut auf „Tippen“, die Interaktion auf „Bewegung“ und die Dauer auf 2 Sekunden. Klicken Sie auf Vorschau und erfreuen Sie sich an den glatten Übergängen zum Öffnen und Schließen, die Sie gerade erstellt haben. Beachten Sie, dass die durch das Schließen der Kachel ausgelöste Animation eine Umkehrung der Animation ist, die beim Öffnen der Kachel abgespielt wird.

Schritt 4: Verbinden Sie die Galerie

Wenn Sie die Ebenennamen in der ersten und zweiten Zeichenfläche beachten, stellen Sie möglicherweise fest, dass sie identisch sind. Dies liegt daran, dass, wie bereits erwähnt, Studio-Animationen automatisch duplizierte Ebenen von einer Zeichenfläche zur nächsten verknüpfen, wenn sie denselben Namen haben. Wenn Sie den Namen dieser Ebenen ändern, wird die Animationsverknüpfung unterbrochen und der Übergang wird standardmäßig auf eine einfache Überblendung gesetzt – besonders herausfordernd für diejenigen, die von aussagekräftigen Ebenenbezeichnungen besessen sind.

Wir möchten einen weiteren sauberen Bewegungsübergang zum Öffnen der Karussell-Galerie von Bildern anwenden. Die Zeichenfläche mit dem Titel „Künstler 1 – Bild 1“ enthält Elemente, die von der Zeichenfläche „Künstler-Bio 1“ dupliziert wurden, deren Größe angepasst wurde, um mehr vom Beispielbild zu zeigen.

Klicken Sie zunächst in die Ebene „Artist Bio 1“, um die Gruppe „Featured Image“ auszuwählen. Dies ist der Auslöser zum Öffnen der Galerie. Erstellen Sie hier eine „Tippen“-Interaktion, die mit der ersten Zeichenfläche in der Galerie verbunden ist, und wählen Sie „Bewegung“. Stellen Sie die Dauer dieses Mal etwas schneller ein: 1 Sekunde.

Um einen schönen Übergang zum Schließen der Galerie zu erstellen, wählen Sie einfach die Schaltflächenebene „Schließen“ in der Zeichenfläche „Künstler 1 – Bild 1“ aus und verbinden Sie sie mit den gleichen Einstellungen wie zuvor wieder mit der Zeichenfläche „Künstler Bio 1“.

Sehen Sie sich diese Animation an und staunen Sie, wie gut der Prototyp vom Bildschirm mit den Biografien des Künstlers zum Bildkarussell und zurück übergeht. Wir haben jetzt die Navigation durch drei Ebenen unserer App-Hierarchie verbunden!

Schritt 5: Verbinden Sie alle Galeriebilder

Wir haben die meisten Bewegungsübergänge gemacht, die wir machen müssen, und werden jetzt beginnen, einige der Animationsvoreinstellungen für den Rest der Galerie zu verwenden.

Das Interaktionsmuster hier für unseren Benutzer, um durch dieses Bilderkarussell zu blättern, wird eine vertraute Wischgeste sein. Die gute Nachricht ist, dass dieser letzte Teil ziemlich einfach ist und mit den Animationsvoreinstellungen von Studio überhaupt keine Zeit in Anspruch nehmen wird.

Wählen Sie die Zeichenfläche „Künstler 1 – Bild 1“ aus und erstellen Sie eine Interaktion, die zur nächsten Zeichenfläche „Künstler 1 – Bild 2“ führt. Stellen Sie den Trigger dieses Mal auf „Swipe Left“. Wählen Sie für den Übergang „Preset“ und wählen Sie „Push Left“ aus dem Dropdown-Menü.

Um eine umgekehrte Interaktion zu erstellen, wählen Sie die Zeichenfläche „Künstler 1 – Bild 2“ aus und verbinden Sie sie mit der vorherigen Zeichenfläche, diesmal jedoch mit einer „Nach rechts wischen“-Geste und einem „Nach rechts drücken“-Übergang.

Wiederholen Sie dieses Muster mit den nächsten Zeichenflächen und verbinden Sie die Zeichenflächen für Bild 2 mit Bild 3 und Bild 3 mit Bild 4. Ganz einfach!

Um dies noch realistischer zu machen, schließen wir die Schleife zwischen Bild 1 und Bild 4. Wählen Sie die Zeichenfläche für Bild 4 aus und verbinden Sie sie mit Bild 1. Wählen Sie einen „Nach links wischen“-Trigger und einen „Nach links drücken“-Übergang, genau wie für die nächstes Bild in einer Reihe. Verbinden Sie die Zeichenfläche von Bild 1 mit Bild 4 mit der Rückseite und presto – Sie haben eine Schleifengalerie erstellt!

Wählen Sie abschließend jede der „btn_close“-Komponenten in den Zeichenflächen der Bildergalerie aus und verknüpfen Sie sie zurück mit der Zeichenfläche der Biografie. Sie können hier wählen, welchen Übergang Sie mögen, aber ich habe mich für „Push Right“ entschieden.

Inzwischen haben Sie einen ziemlich gut sortierten Navigationspfad, den Sie vorführen können. Klicken Sie auf Vorschau und probieren Sie es aus; Ihr Prototyp sollte ähnlich wie das GIF am Anfang dieses Tutorials funktionieren. Gönnen Sie sich einen wohlverdienten Klaps auf die Schulter.

Schritt 6: Wiederholen

Nachdem Sie nun alle Bildschirme für das erste Künstlerbeispiel mit raffinierten Interaktionen verknüpft haben, wiederholen Sie die Schritte für die anderen beiden Bildschirmsätze in der Lernprogrammdatei. Sie sind auf ähnliche Weise organisiert und es ist eine gute Übung, sich an die Arbeitsweise von Studio zu gewöhnen.

Nächste Schritte

Hoffentlich hat dieses Tutorial eine Einführung in einige der coolen Features des Prototyping von InVision Studio gegeben. Während Sie sich mit Studio vertraut machen, sollten Sie versuchen, Übergänge mit den erweiterten Animationswerkzeugen zu optimieren. Experimentieren Sie mit den anderen Tools im Arbeitsbereich und versuchen Sie, einige andere InVision Studio-Tutorials zu befolgen. Mit etwas Übung können Sie einer der führenden Design-Gurus von InVision Studio werden.

Möglicherweise sind Sie unterwegs auf einige Fehler oder unerwartetes Verhalten gestoßen, aber das liegt in der Natur des Ausprobierens neuer Software. Die Leute bei InVision haben sehr auf Feedback reagiert und werden Studio definitiv weiter verbessern, um es noch stabiler und nützlicher zu machen.

Studio ist ein lustiges Tool zum Ausprobieren – und es gibt keinen Grund, nicht mit einem kostenlosen App-Prototyping-Tool zu experimentieren. Es ist zwar nicht wahrscheinlich, dass es Go-to-Software wie Sketch in der heutigen Design-Community ersetzen wird, aber es hat viel Potenzial.

Weiterführende Literatur im Toptal Design Blog:

• Perfektionieren Sie Ihren UX-Designprozess – Ein Leitfaden für das Prototypendesign
• Die Kraft von Figma als Designtool
• Prototyping mit echten Daten – Ein Framer-Tutorial
• Der grundlegende Leitfaden zur mobilen Usability
• Best Practices und Fehler beim Design mobiler Apps