Wenn Sie nicht in der ersten Hälfte des Jahres 2018 geschlafen haben, waren Sie sich der fieberhaften Vorfreude in der EU wahrscheinlich sehr bewusst interaktive Design-Community im Vorfeld der Veröffentlichung der InVision Studio App. InVision ist am bekanntesten für ihre Sketch- und Photoshop-Plugin-Suiten wie Craft und als Plattform für die schnelle Umwandlung statischer Schnittstellendesigns in klickbare und gemeinsam nutzbare Prototypen. In einem mutigen Schritt im vergangenen Jahr kündigten sie die Entwicklung einer eigenen digitalen Design-Software an, um mit Branchenfavoriten wie konkurrieren zu können Skizzieren und Figma .

Das Produkt wurde als revolutionär gehyped und machte einige wichtige Versprechungen für einen nahtlosen Workflow zwischen Design und Prototyp, komplexe Interaktionsfunktionen und atemberaubende Übergangsanimationen. und es wäre kostenlos . InVision hat einige ziemlich aufregende Teaser-Videos und Demos veröffentlicht, um sie zu erhalten Designer gepumpt. Die Vorfreude nahm weiter zu, als die erste Beta-Version zu Beginn des Jahres mehr als ein paar Mal zurückgedrängt wurde.

Da immer mehr Designer mit der Software herumspielen, tauchen immer mehr Tutorials und Anleitungen auf, um die Grundlagen des App-Interface-Design-Tools zu demonstrieren. InVision hat auch eine erstellt wenige für sich Benutzer an Bord der InVision Studio-Grundlagen.

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

Erstellen Sie in kürzester Zeit einen interaktiven Prototyp mit raffinierten animierten Übergängen, indem Sie diesem InVision Studio-Tutorial folgen!

Die Nickel-Tour durch den InVision Studio-Arbeitsbereich

Ein Großteil von Studio sollte bekannt sein UI-Designer und alle, die digitale Design-Software wie Sketch verwendet haben. Ein Großteil des Arbeitsbereichs leiht sich Hinweise aus der Benutzeroberfläche von Sketch aus. Auf der linken Seite befinden sich Seiten, Ebenen und Gruppen. die rechte Seitenwand für Inspektoren; und eine kontextbezogene Symbolleiste oben.

Sie finden auch viele der gleichen Tools, obwohl einige Funktionen unterschiedlich benannt sind. Beispielsweise wird ein Skizzensymbol in Studio als Komponente bezeichnet.

Das Interaktionsfenster

In diesem Tutorial konzentrieren wir uns auf die Verwendung der Interaktionstools, um interaktive Hotspots zwischen Bildschirmen zu erstellen und reibungslose Übergänge zwischen ihnen zu erstellen. Ein Großteil der Magie wird im „Interaktionsfenster“ auf der rechten Seite des Studio-Arbeitsbereichs stattfinden.

Die einfache Möglichkeit, Interaktionen zu erstellen, besteht darin, eine Triggerebene oder -gruppe auszuwählen und auf der Tastatur auf „c“ zu klicken (oder auf das Blitzsymbol in der oberen Symbolleiste zu klicken), wodurch eine blaue Peitsche zum Auswählen eines Zielbildschirms ausgelöst wird. Studio fordert den Designer dann auf, die Geste oder Benutzereingabe auszuwählen, die das Ereignis auslöst, und zwischen einer Reihe voreingestellter Übergänge oder einem Bewegungsübergang zu wählen.

InVision Studio Animation

Es gibt viele Elemente für ein großartiges Interaktionsdesign, aber die richtige Verwendung von animierte Übergänge und Mikrointeraktionen In einer Benutzeroberfläche ist mehr als nur eine Schaufensterdekoration.

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

In diesem Tutorial verwenden wir eine Kombination aus voreingestellten Übergängen und Bewegungsübergängen, um unseren App-Prototyp zu erstellen. Die voreingestellten Übergänge sind recht unkompliziert und den Benutzern der InVision Online-Prototypplattform .

Die Regeln für die Funktionsweise der Bewegungsübergänge zwischen Bildschirmen sind etwas mysteriöser. Während beim Erstellen des Tools viele offensichtliche Designer-Überlegungen berücksichtigt werden, z. B. die automatische Verknüpfung von Elementen zwischen Bildschirmen, sind einige Versuche erforderlich, um bestimmte Effekte beim Hinzufügen von Bewegungen zu Übergängen zu erzielen. Hoffentlich hilft dieses Tutorial Designern dabei, ein wenig komfortabler mit dem zu experimentieren, was InVision Studio zu bieten hat.

Dinge, die Sie beachten sollten

Studio verspricht eine Menge intelligenter Funktionen rund um Animationen. Beispielsweise können Bewegungsübergänge zwischen Objekten erstellt werden, die von einer Zeichenfläche zur anderen dupliziert werden, wenn sie durch eine Interaktion verbunden werden. Designer können diese Animationen dann nach Bedarf anpassen, um einige schöne Lockerungs- und andere Bewegungseffekte zu erzielen. Das Erlernen der Exzentrizität der Funktionsweise beim Übergang eines Objektstapels in einer bestimmten Reihenfolge kann Geduld und Ü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 daher darauf, wichtige Ebenen zwischen Bildschirmen nicht 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 sollte bereit sein, auf einen angemessenen Anteil von Fehlern zu stoßen. Über die Schaltfläche 'Vorschau' wird beispielsweise eine interaktive Vorschau des Prototyps gestartet. Gelegentlich werden die Interaktionen jedoch überhaupt nicht ausgelöst. In diesem Fall müssen Sie die Datei speichern und erneut öffnen.

Während ich die Software lernte, schien sich mehr als eine Datei seltsamerweise selbst zu beschädigen - alle Zeichenflächen wurden gelöscht und alle Werkzeugfenster waren nicht mehr zugänglich. 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. Wenn Sie einen Prototyp auf einer beliebigen Plattform erstellen, egal ob Studio, Sketch oder Marvel, spart das Verfolgen von Objekten und Ebenenbeschriftungen Zeit und Frust - 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 Tutorial!

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 haben, Laden Sie hier die Tutorial-Dateien herunter . Wenn Sie die Studio-Software gestartet haben, können Sie die Datei von jedem Ort aus öffnen, an dem Sie sie gespeichert haben.

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

Dieser interaktive Prototyp ist für eine mobile App über moderne Künstler des späten 19. bis frühen 20. Jahrhunderts gedacht. Alle Bildschirme wurden im Voraus mit sorgfältiger Zeichenflächenverdoppelung erstellt, die für die ordnungsgemäße Verwendung der Bewegungsübergangsfunktion erforderlich ist.

Die Hierarchie hat drei Tiefenebenen, angefangen bei „Zuhause“ über die Biografie jedes einzelnen Künstlers bis hin 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 Start-Zeichenfläche für den Prototyp kennzeichnet.

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

Schritt 2: Verbinden Sie Artist Tile mit Artist Bio

Gehe zur ersten Zeichenfläche. Nehmen Sie sich einen Moment Zeit, um die Ebenengruppe 'Artist Tile 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“.

Wenn Sie auf den Zeichenflächenbildschirm schauen, ist die dritte Ebenengruppe nicht sofort sichtbar, da Studio mit Bewegungsübergängen umgeht, auf die wir gleich noch eingehen werden. Notieren Sie es sich erst einmal.

Wählen Sie die Ebenengruppe aus, die alle diese Elemente enthält: 'Künstlerkachel 1'. Wenn diese Gruppe ausgewählt ist, drücken Sie 'c' auf Ihrer Tastatur (oder klicken Sie auf das Blitzsymbol in der oberen Symbolleiste), um das Interaktionswerkzeug zu starten. Auf Ihren Cursor folgt eine blaue Peitsche, um den Zielbildschirm für Ihre Interaktion auszuwählen.

Wählen Sie die Zeichenfläche sofort rechts mit dem Titel „Artist Bio 1“ aus und Sie werden aufgefordert, den Auslöser und die Art des Übergangs auszuwählen. Wählen Sie für den Auslöser 'Tippen' und dann 'Bewegung' als Übergang. Sie können dann die Dauer des Übergangs auswählen. Stellen Sie diesen Übergang auf 2 Sekunden ein und klicken Sie auf 'Speichern'.

Klicken Sie auf die Wiedergabetaste, um eine Vorschau des Prototyps anzuzeigen. Haben Sie gesehen, wie sich die Dinge auf dem Bildschirm bewegen und wie die Bioschicht unter dem Bild hervorrutscht? 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 Auslöser, indem Sie auf 'c' klicken und die Zeichenfläche 'Home' auswählen.

Stellen Sie den Auslöser erneut auf 'Tippen', die Interaktion auf 'Bewegung' und die Dauer auf 2 Sekunden. Klicken Sie auf Vorschau und freuen Sie sich über die soeben erstellten Übergänge zum Öffnen und Schließen. Beachten Sie, dass die durch das Schließen der Kachel ausgelöste Animation eine Umkehrung der Animation darstellt, die beim Öffnen der Kachel abgespielt wird.

Schritt 4: Verbinden Sie die Galerie

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

Wir möchten einen weiteren sauberen Bewegungsübergang anwenden, um die Karussell-Bildergalerie zu öffnen. Die Zeichenfläche mit dem Titel „Artist 1 - Image 1“ enthält Elemente, die von der Zeichenfläche „Artist Bio 1“ dupliziert wurden und deren Größe geändert wurde, um mehr von dem Beispielbild anzuzeigen.

Klicken Sie zunächst in die Ebene „Artist Bio 1“, um die Gruppe „Ausgewähltes Bild“ auszuwählen. Dies ist der Auslöser für das Öffnen der Galerie. Erstellen Sie hier eine 'Tap' -Interaktion, die eine Verbindung zur ersten Zeichenfläche in der Galerie herstellt, und wählen Sie 'Motion'. Stellen Sie diesmal die Dauer etwas schneller ein: 1 Sekunde.

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

Sehen Sie sich diese Animation in der Vorschau an und staunen Sie, wie schön der Prototyp vom Biobildschirm des Künstlers zum Karussell der Bilder und zurück übergeht. Wir haben jetzt die Navigation durch drei Ebenen der Hierarchie unserer App verbunden!

Schritt 5: Verbinden Sie alle Galeriebilder

Wir haben die meisten Bewegungsübergänge durchgeführt, die wir ausführen müssen, und werden nun einige der Animationsvoreinstellungen für den Rest der Galerie verwenden.

Das Interaktionsmuster, mit dem unser Benutzer durch dieses Karussell von Bildern blättern kann, ist eine vertraute Wischgeste. Die gute Nachricht ist, dass dieser letzte Teil ziemlich einfach ist und mit den Animationsvoreinstellungen von Studio keine Zeit in Anspruch nimmt.

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 diesmal den Auslöser auf 'Nach links wischen'. Wählen Sie für den Übergang 'Voreinstellung' und wählen Sie 'Nach links drücken' aus der Dropdown-Liste.

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 nur mit der Geste „Nach rechts wischen“ und dem Übergang „Nach rechts drücken“.

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. Einfach!

Um dies noch realistischer zu gestalten, 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 den Auslöser „Nach links wischen“ und den Übergang „Nach links drücken“ wie für nächstes Bild in einer Reihe. Verbinden Sie die Bild 1-Zeichenfläche mit der Rückseite und dem Presto mit Bild 4 - 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 wieder mit der Bio-Zeichenfläche. Sie können hier wählen, welchen Übergang Sie möchten, aber ich habe mich für 'Nach rechts drücken' entschieden.

Inzwischen haben Sie einen ziemlich gut geordneten Navigationspfad, den Sie angeben können. Klicken Sie auf Vorschau und probieren Sie es aus. Ihr Prototyp sollte ähnlich wie das GIF zu Beginn dieses Tutorials funktionieren. Gönnen Sie sich einen wohlverdienten Klaps auf den Rücken.

Schritt 6: Wiederholen

Nachdem Sie alle Bildschirme für das erste Künstlerbeispiel mit raffinierten Interaktionen verknüpft haben, wiederholen Sie die Schritte für die beiden anderen Bildschirme in der Lernprogrammdatei. Sie sind ähnlich organisiert und es wird eine gute Praxis sein, sich an die Funktionsweise von Studio zu gewöhnen.

Nächste Schritte

Hoffentlich bot dieses Tutorial eine Einführung in einige der coolen Funktionen des InVision Studio-Prototyping. Wenn Sie sich mit Studio vertraut gemacht haben, 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 Spitzenreiter werden InVision Studio-Design Gurus.

Möglicherweise sind auf dem Weg einige Fehler oder unerwartetes Verhalten aufgetreten, aber dies liegt in der Natur des Ausprobierens neuer Software. Die Mitarbeiter von InVision haben sehr schnell auf Rückmeldungen reagiert und werden Studio definitiv weiter verbessern, wodurch es immer stabiler und nützlicher wird.

Studio ist ein unterhaltsames Tool zum Ausprobieren - und es gibt keinen Grund, nicht mit einem kostenlosen App-Prototyping-Tool zu experimentieren. In der heutigen Design-Community wird es wahrscheinlich keine Ersatzsoftware wie Sketch ersetzen, aber es hat viel Potenzial.

• • •

Lesen Sie weiter im ApeeScape Design Blog:

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

Grundlagen verstehen

Was ist ein UI-Prototyp?

Ein UI-Prototyp wird erstellt, um eine Benutzeroberfläche zu demonstrieren und zu testen. Tools wie InVision Studio, Sketch und Figma stehen Designern zur Verfügung, um interaktive Prototypen zu erstellen, ohne Code schreiben zu müssen.

Was ist InVision?

InVision ist eine Plattform zum Erstellen und Freigeben anklickbarer Prototypen für Web und Mobile. In den letzten Jahren hat InVision seine Plattform um robustere Tools für die Freigabe und Zusammenarbeit, Plugins und jetzt eine eigene App für das Interface-Design erweitert.

Was ist ein Prototyp einer mobilen App?

Ein Prototyp einer mobilen App ist ein Prototyp, der zum Demonstrieren und / oder Testen einer mobilen App erstellt wurde. Die Komplexität von Prototypen kann je nach dem Aspekt der zu testenden App variieren.

Was ist ein klickbarer Prototyp?

Ein anklickbarer Prototyp ist ein Prototyp mit einer gewissen Interaktivität. Diese werden häufig erstellt, indem interaktive „Hot Spots“ für entworfene Elemente wie Schaltflächen festgelegt und diese nacheinander mit Bildschirmen verknüpft werden.

Warum ist es wichtig, einen Prototyp zu haben?

Es gibt viele Gründe, Prototypen von Interaktionsdesigns zu haben. Mithilfe von Prototypen können Designer und ihre Mitarbeiter sehen und validieren, wie etwas häufig funktionieren, aussehen und sich anfühlen soll, ohne dass eine vollständig entwickelte Version erforderlich ist.