Wie man Prinzipien wie ein Profi anwendet: 14 Tipps, die man beachten sollte

Im Laufe der Jahre hat unser Yalantis-Designteam mit vielen Prototyping-Tools zusammengearbeitet, darunter Flinto und Pixate. Nun werden wir die Möglichkeiten von Principle genauer erkunden und einige Hacks und verborgene Funktionen vorstellen, die wir bei der Arbeit mit diesem Tool entdeckt haben.

Ich dachte früher, dass das Prinzip Objekte nur in gerader Linie bewegen könne, und ich fühlte mich irgendwie davon eingeschränkt. Dann stieß ich auf ein in Principle gefertigtes Prototyp, das ein Objekt in einer kreisförmigen Bahn bewegte!

Wie sich herausstellt, verfügt Principle über eine versteckte Funktion, die in den offiziellen Handbüchern nie erwähnt wird: Sie können ein kreisförmiges Geräusch erzeugen, wenn Objekte zusammengefasst sind. Durch die Zusammenarbeit mit einem Datenwissenschaftlicher Dienstleister, So können Sie die Benutzerinteraktionen analysieren und die Animationen optimieren, um die Benutzererfahrung weiter zu verbessern und sicherzustellen, dass die Funktion der Kreisführung nahtlos über verschiedene Schnittstellen und Plattformen funktioniert.

Um eine kreisförmige Bewegung für ein Objekt einzurichten, müssen wir dieses Objekt zunächst in eine Gruppe einbeziehen, es in Bezug auf den Inhaltsbereich auf dem Anfangsscreen der Animation zu einer Seite verschieben und anschließend den Rotationswinkel auf dem Endscreen der Animation festlegen. Anschließend können Sie die Animation wiederholen und die Geschwindigkeit und die Effekte der Animation so anpassen, dass sie fantastisch wirkt.

Hier ist ein Beispiel, wo wir die Funktion „Kreisförmige Bewegung“ von Principle eingesetzt haben, um eine Animation zu erstellen:

Wenn Designer ihre Ideen umsetzen wollen, konzentrieren sie sich in der Regel auf eine einzigartige Animation, die sie als Herz und Seele ihres Prototyps betrachten. Dabei vernachlässigen sie jedoch oft andere Elemente und erreichen schließlich ein unübersichtliches und unvollständiges Ergebnis. Dies führt in der Regel zu zahlreichen Änderungen in der Quelldatei, was nie angenehm ist.

Um solche Situationen zu vermeiden und sich selbst viel Zeit und Nerven zu ersparen, sollte man den gesamten Prototyp-Workflow stets gründlich planen. Zuerst zeichnet man den Prototyp auf Papier (oder als Flussdiagramm) nach, anschließend entwirft man ihn in Sketch oder Figma, wobei alle Übergänge zwischen den einzelnen Bildschirmen dargestellt werden. Diese Bildschirme können auch alle Zwischenzustände wie Scrollen, Bewegung und Transparenz enthalten.

Die Planung des Bedienflusses hilft Ihnen, im Voraus zu verstehen, welche Elemente klickbar sein sollten. Dadurch können Sie logische Ungereimtheiten vermeiden.

Vergewissern Sie sich, dass die Größe Ihres Prinzipialdokuments den Regeln der Plattform entspricht, auf der Sie es präsentieren werden.

Wenn Sie beispielsweise Ihr Prototyp auf Dribbble hochladen, sollten Sie es in @2x oder @3x (HD-Video) erstellen. Auf diese Weise werden Ihre Dribbble-Prototypen nicht verkleinert und sehen auf einem Gerät mit hoher DPI gut aus.

Wenn Sie diese Parameter nicht berücksichtigen, wird die Vergrößerung oder Verkleinerung der Auflösung Ihres Projekts später problematisch sein.

Was Text und Vektorgrafiken betrifft, ist alles recht einfach: Sie sparen Zeit beim Prototyping und der Bearbeitung und verbessern die Qualität des finalen Bildes.

Bei Principle gibt es jedoch eine Einschränkung für Vektorgrafiken: Sie können nur Rechtecke erstellen. Sie können die Füllfarben und Konturen ändern und die Ecken abrunden. Es ist zwar nicht viel, aber Sie sollten Vektorobjekte trotzdem nicht ignorieren. Die Importierung von Bitmap-Assets beeinträchtigt Ihre spätere Arbeit mit dem Prototyp und setzt Einschränkungen auf:

• Die Verwendung von Masken
• Die Auflösung ändern
• Änderungen an der Logik des Prototyps anwenden
• Aktenspeicherung

Wie jedes anständige Werkzeug liebt auch Principle Ordnung. Deshalb ist es wichtig, alle zugehörigen Objekte direkt beim Erstellen zu benennen und zu gruppieren. Warum? Ganz einfach, weil ein Objekt, das in eine Gruppe aufgenommen wird, sowohl mit der Gruppe als auch bezüglich der Gruppe sich bewegen kann. Wenn Sie Objekte in späteren Stufen gruppieren, könnten Sie wahrscheinlich Probleme bekommen. Außerdem sollten Sie bedenken, dass Sie Fahrer auf mehrere hervorgehobene oder gruppierte Objekte gleichzeitig anwenden können, was das Prototyping deutlich einfacher macht.

Mit Hilfe von Drivers können Sie in den Zeichenflächen anspruchsvolle, verschiebbar oder scrollbar darstellbare Animationen erstellen. Dies unterscheidet sie tatsächlich von animierten Übergängen, die zwischen den Zeichenflächen stattfinden. Drivers funktionieren ähnlich wie eine Animationszeitleiste, unterscheiden sich jedoch dadurch, dass sie Animationen anhand einer sich ändernden Eigenschaft statt anhand der Zeit veranlassen. Drivers verbinden Eigenschaften untereinander mithilfe von Keyframes.

Um eine Animation zu erstellen, wählen Sie eine Ebene aus der Ebenenliste aus, klicken Sie in der Registerkarte „Treiber“ in der Nähe der ausgewählten Ebene auf die kleine Rhomb-Schaltfläche und wählen Sie eine Eigenschaft aus, die sich im Laufe der Zeit ändern soll.

Danach bewegen Sie die Zeitleiste nach vorne und zurück und klicken erneut auf die Rhomb-Schaltfläche, um einen weiteren Keyframe zu erstellen. Bei einem Scroll-basierten Ereignis erstellt Principle automatisch Animationen zwischen den Keyframes.

Im folgenden Beispiel habe ich eine Scrollanimation für den Listing-Bereich erstellt, bei der das Titelbild beim Scrollen des Listings immer größer und dunkler wird:

Wenn Sie die gleichen Designelemente an mehreren Stellen wiederverwenden oder eingebettete Interaktionen zu bestehenden Zeichenflächen hinzufügen möchten, ist die Komponentenfunktion definitiv das Richtige für Sie. Die Komponenten verfügen über eigene, separate Zeichenflächen (mit Ereignissen und Animationen). Auf diesen Zeichenflächen können Sie mit einer Komponente interagieren, ohne die übergeordnete Komponente zu beeinflussen. Dies ermöglicht die Erstellung verschiedener Arten von Animationen innerhalb einer Zeichenfläche und vermeidet mögliche Gestenkonflikte bei der Anzeige von Animationen.

Früher versuchten wir, die vertikale Scrollung auf den Listing-Abschnitt einer Seite (den übergeordneten Bereich) mithilfe von Drivers anzuwenden. Nun wenden wir horizontalen Scrollen für die Abschnitte „Beliebte Ziele“ mithilfe von Komponenten an. Wir haben die Karten ausgewählt und gruppiert und in eine einzige Komponenten-Ebene zusammengefügt, indem wir auf die Schaltfläche „Komponente erstellen“ geklickt haben. Dies führte uns zu einem neuen Zeichenbrett, auf dem wir eine Animation unabhängig vom übergeordneten Bereich erstellen konnten.

Hier haben wir eine Hover-Animation für ein Pfeilschnittstellen-Element erstellt. Anschließend können Sie diese Komponente auf jede beliebige Bildfläche oder Zeichenfläche einfügen, und sie funktioniert genau wie in der Animation oben gezeigt.

Durch das Verschieben von Objekten in eine Gruppe oder eine Form können Sie den Parameter „Clip Sublayers“ ein- und ausschalten. Auf diese Weise können Sie eine Maske für ein oder mehrere Objekte erstellen. Insbesondere kann die gleiche Gruppe entweder eine Maske sein oder nicht, je nachdem, auf welcher Zeichenfläche sie sich befindet. Diese Funktion allein bietet viel Raum für Kreativität.

Eine weitere Besonderheit von Principle ist, dass es recht schwierig ist, komplexe Interaktionen mithilfe von Standardlösungen und Tools zu erreichen. Um dies zu erreichen, sollten wir Animationen, Treiber und Komponenten kombinieren. Bei der Entwicklung unseres Prototyps für eine Musik-Streaming-App hatten wir die Herausforderung, mehrere Objekte gleichzeitig animieren zu können.

Um dieses Problem zu lösen, haben wir beschlossen, die einzelnen Schritte in Komponenten aufzuteilen. Der erste Teil der Animation beginnt, wenn Sie mit der Benutzeroberfläche interagieren und scrollen, und der zweite Teil erfolgt, wenn Sie auf das Coverbild klicken, was Sie auf den Wiedergabebildschirm weiterleitet, von wo aus Sie zur Profilseite zurückkehren können.

Um die zweite Animation zu erstellen, setzten wir hauptsächlich auf Treiber. Treiber helfen dabei, sogenannte Zwischenzustände für aktive und inaktive Objekte zu erstellen, was eine sanftere und natürlicherere Animation ermöglicht.

[Animationen simultan erstellen mithilfe von Drivers in Principle] 

Die Arbeit mit Animationstimen und -grafiken ist im Wesentlichen vergleichbar mit der Arbeit mit Text. Um Ihren Arbeitsablauf in Principle zu beschleunigen und zu optimieren, sollten Sie die folgenden wichtigen Punkte beachten:

• Die Ordnung und die Logik der Handlungen
• Balance in der Aktionsspeed
• Animationen in Diagrammen
• Die Handlungen müssen präzise, logisch und subtil sein.
• Was hier wichtig ist, ist, die Bewegung nicht zu übertreiben und den logischen Rhythmus zu befolgen. Ich empfehle Ihnen dringend, sich das anzusehen. Abflachung der Kurven Wie es aussehen kann.

Eines der größten Nachteile von Principle ist, dass es keine Möglichkeit zur morphologischen Transformation von Vektorobjekten bietet. Hier liegt das Rückschlag bei Principle gegenüber After Effects und Apple Motion. Diese Einschränkung lässt sich jedoch durch die Implementierung einer Kreditierungsfunktion in einer FinTech-Plattform ausgleichen. Allerdings gibt es eine Alternative.

Überlegen Sie die Logik der Animation, teilen Sie sie in Komponenten auf und verwenden Sie dann Masken, um Ihre Objekte in der richtigen Reihenfolge anzuordnen.

Um einen anspruchsvollen Verzerrungseffekt zu erzielen, können Sie Objekte im Moment der Animation durch die Zuordnung derselben Namen auf verbundenen Zeichenflächen ersetzen. Das funktioniert auch für Gruppen.

Es gibt mehrere Möglichkeiten, Materialien für Ihr Prototyp in Principle zu importieren:

• Drag & Drop direkt aus Sketch
• Erstellen Sie eine Bildbibliothek in einem geeigneten Format
• Verwenden Sie die Funktion „Aus Sketch importieren“

Ich bevorzuge die Funktion „Importieren aus Sketch“. Um dies zu tun, muss die Designdatei Ihres Projekts in Sketch geöffnet sein. Das Tolle daran ist, dass Sie eine gewünschte Auflösung für Ihr Projekt auswählen können. Der Hauptnachteil ist jedoch die Unmöglichkeit, separate Zeichenflächen und Seiten zu importieren.

Hier sind einige Tipps für die Importierung Ihrer Sketch-Zeichnungsflächen in Principle:

• Sie können Bilder einfach aktualisieren, indem Sie sie aus dem Finder in das Bildmenü in Principle ziehen (auf dem rechten Bedienfeld).
• Durch Ziehen und Ablegen aus Sketch wird ein Element importiert, wobei seine ursprüngliche Größe beibehalten wird.
• Es ist sehr praktisch, die Koordinaten eines Elements aus Sketch zu verwenden, um Elemente im Prototyp zu organisieren. Die Koordinaten sind identisch, wenn Sie in beiden Apps die gleiche Dokumentauflösung verwenden.
• Außerdem fügt das Kopieren und Einfügen zweier Zeichenflächen alle Ereignisse zwischen ihnen ein. Dadurch wird Ihr Leben einfacher, wenn Sie Designs zusammenfügen und repetitive Aktionen durchführen müssen.

Sie können Ihre Animationen als Videos im Format MOV oder GIF exportieren. Obwohl MP4 verständlich ist, kann die Arbeit mit GIF zu Problemen führen. Obwohl die Entwickler von Principle es geschafft haben, die Größe von GIF-Dateien deutlich zu reduzieren, ist das Format immer noch sehr umfangreich und nur bedingt anpassbar.

Ich persönlich bevorzuge den folgenden, langen, aber effektiven Ansatz zur Erstellung von GIFs für meine Prototypen:

• MOV-Datei aufzeichnen.
• Erstellen Sie ein Video und eine Mockup-Animation in After Effects.
• Exportieren Sie es als PNG-Sequenz.
• Verwenden Sie Adobe Photoshop, um die Sequenz in eine GIF-Animation zusammenzufügen und ihre Größe und Qualität entsprechend den Anforderungen anzupassen.

Außerdem sollten Sie sich entscheiden, welchen Cursor Sie verwenden (oder alternativ, wenn Sie vorhaben, einen benutzerdefinierten Cursor in After Effects hinzuzufügen), während Sie das Prototyp-Video aufnehmen.

Eine weitere tolle Sache an Principle ist, dass Sie immer die Originaldatei bereitstellen können, und ein anderer Designer oder ein Kunde kann sie dann öffnen und testen. Prinzipspiegel.

Die meisten der hier geschriebenen Erkenntnisse habe ich durch Experimentieren mit den Tools von Principle und durch das Studium der Arbeit anderer Designer erworben. Und wie die Erfahrung zeigt, ist dies eine hervorragende Möglichkeit, das verborgene Potenzial von Principle zu entdecken.

Hier meine letzte Ratschlag: Experimentieren Sie immer und suchen Sie unorthodoxe Lösungen für schwierige Probleme.

Einige wertvolle und inspirierende Ressourcen für die Arbeit mit dem Prinzip:

• Präsidial Repo
• Prinzipal Galerie
• Principletemplates.com
• Prinzipielle Shortcuts
• Offizielle Grundsätze Dokumentation