So prototype eine mobile App mit Origami Studio

Sep 12, 2025

wie man

In einer Welt, in der Benutzer hohe Erwartungen an ihre Erfahrungen auf dem Web- und Mobiltelefon haben, ist der Prototyping und die Benutzerbewertung der Schlüssel. Es ist jetzt üblich, auf Prototypen mit zunehmend hoher Treue, und ein blühendes iterieren Benutzererfahrung Die Industrie ist um diese kritische Auswahl von Aktivitäten aufgewachsen. Letztendlich speichert Software mit der Software direkt auf der Prototyping-Bühne Zeit und / oder Geld später.

10 Top-Prototyping-Tools

Es gibt viele Ansätze, die Sie zum Prototyping nehmen können, und zahlreiche Instrumente, um es zu unterstützen. Einer der neuesten auf dem Block ist Origami Studio. , von Facebook entwickelt und kostenlos für MacOS verfügbar.

Origami Studio, das tatsächlich sein Leben als Plugin für Quarz-Komponist (eine visuelle Programmiersprache in der Xcode-Entwicklungsumgebung von Macos) begann, bevor er ein Standalone-Tool wurde, hat im letzten Jahr viel Aufmerksamkeit gewonnen.

Dies liegt nicht nur daran, dass es von einem Big-Names-Entwickler errichtet wird, sondern auch aufgrund der Kombination von Macht und Einfachheit, um die Entwicklung von interaktiven Prototypen mit hoher Treue zu entwickeln.

Führen Sie die folgenden Schritte aus, um herauszufinden, wie einfach Sie Origami Studio verwenden können, um einen Prototyp aufzubauen.

01. Ein neuer Prototyp

Start by creating a new iPhone 8 prototype — Beginnen Sie mit dem Erstellen eines neuen iPhone 8-Prototyps

Wir werden einen Prototyp für eine mobile App erstellen, mit dem es uns ermöglicht, durch Bilder von Katzen und "wie" einige von ihnen zu streichen. Sobald wir Origami Studio installiert haben, erstellen wir einen neuen iPhone 8-Prototyp vom Begrüßungsbildschirm.

02. Hinzufügen von Ebenen

Wir können unser Prototyp sofort einige Ebenen hinzufügen. In diesem Fall fügen wir ein Logo hinzu, das oben auf dem Bildschirm positioniert ist. Wir fügen die Ebene mit der Taste + oben rechts hinzu und wählen Sie 'Bildschicht'. Wir können es dann angemessen ändern und positionieren, indem wir die Eigenschaften der Ebene der Ebene hervorheben und modifizieren. Nach unserer Marke fügen wir auch ein Herzbild am unteren Rand des Bildschirms hinzu, um als unsere ähnliche Taste zu dienen.

03. Wechselwirkung erstellen

For interactions you'll need to create a patch — Für Interaktionen müssen Sie einen Patch erstellen

Wir müssen unsere Herzknopf auf Benutzerwechselwirkungen reagieren lassen. Sie werden feststellen, dass im Vorschaufenster der Cursor ändert, um die Berührung auf einem mobilen Gerät darzustellen. Um darauf zu antworten, müssen wir ein 'Patch' erstellen, der im Wesentlichen eine Funktion in Origami ist, die Eingaben einnimmt und Ausgänge erzeugt. Doppelklicken Sie auf den leeren grauen Bereich, um eine Liste mit neuen Patches aufzurufen, und suchen Sie nach "Interaktion". Platzieren Sie Ihren Patch und es sollte auf dem Bildschirm angezeigt werden.

04. Wechselwirkungen auf Ebenen verknüpfen

Change the patch properties so that it only responds when you click in the right place — Ändern Sie die Patch-Eigenschaften, sodass er nur antwortet, wenn Sie an den richtigen Ort klicken

Im Moment antwortet Ihr Patch auf jeden Fall auf dem Prototyp. Testen Sie es, indem Sie auf klicken, und Sie sehen in Echtzeit die Eigenschaften "Down" und "Tippen". Wenn Sie im Patch "Layer" in der Eigenschaft "Layer" auswählen, können Sie es in die Ebene verknüpfen, die das Herzbild enthält, und es wird nun nur auf Klicks auf diesen bestimmten Bereich reagiert.

05. Animationen

A pop animation will give users a bit of visual feedback — Eine POP-Animation ergibt Benutzern ein bisschen visuelles Feedback

Jetzt wollen wir etwas passieren, wenn unsere Interaktion auslöst. Erstellen Sie ein anderes Patch, diesmal eine "Pop-Animation". Dies wird verwendet, um einen federnden Effekt zu erzeugen. Hinterlassen Sie die Eigenschaften, wie sie sind, aber wir erstellen einen Link zwischen der TAP-Ausgabe der Interaktion, die wir zuvor erstellt haben, und der Nummerneingabe unserer neuen POP-Animation. Wir machen dies, indem wir neben jedem klicken und zwischen den kleinen Kreisen ziehen. Wenn Sie jetzt auf das Herz klicken, werden nun die Interaktion angezeigt, die eine Änderung der Ausgabe der POP-Animation 'Fortschritt auslöst.

06. Übergänge

You can change the extent to which objects change size when they're clicked — Sie können das Ausmaß ändern, in dem Objekte die Größe ändern, wenn sie geklickt werden

Das nächste, was wir brauchen, ist ein Übergangspatch. Dadurch können wir niedrige und hohe Werte angeben, um sich zwischen den Fortschrittsausgängen der POP-Animation zu bewegen. Wir können dann die Ausgaberwerte der Übergangs in die Skaleneigenschaft der Herzbildschicht verknüpfen, um den Origami mitzuteilen, dass die Änderung der Größe, wenn er geklickt wird, anzutreten. Sie sollten jetzt feststellen, dass das Klick auf das Herz dazu führt, dass es eine kurze Größe der Größe animiert. Es ist jedoch nicht ganz richtig, da er sofort wieder normal knallt.

07. Switches.

Use switch patches to toggle objects between different states — Verwenden Sie Switch-Patches, um Objekte zwischen verschiedenen Zuständen umzuschalten

Switch Patches sind Origamis, um zwischen zwei Zuständen umgeschaltet zu werden. Das wollen wir für unsere "Like" -Aktaste. Eine in einen Switch-Patch übergebene Eingabe kann es zwischen 'ON'- und' AUS '-Staten kürzen, die dann als Ausgabe an nachfolgende Patches geleitet werden kann. Lassen Sie uns einen neuen Schalter erstellen und zwischen der Interaktion und der POP-Animation legen. Sie sollten dann auf das Herz klicken können, um ihn zwischen kleinen und großen Zuständen umzuschalten.

08. Komplexeres Verhalten

By experimenting with patches you can add more complex behaviour to your prototype — Wenn Sie mit Patches experimentieren, können Sie Ihrem Prototyp komplexeres Verhalten hinzufügen

Herzliche Glückwünsche! Sie haben jetzt Ihre erste interaktive Funktion erstellt, indem Sie die häufigsten Patches verwenden, die Sie Zeit und Uhrzeit verwenden, die Sie wieder verwenden. Wir können mehr Patches hinzufügen, um komplexeres Verhalten zu erzeugen. Lassen Sie uns eine andere farbige Herzschicht direkt hinter unserem aktuellen erstellen, und fügen Sie dann neue Patches hinzu, um sie gleichzeitig zu skalieren, und modifizieren Sie die Deckkraft unserer Originalschicht, sodass sie sichtbar gemacht hat. Wenn Sie jetzt auf das Herz tippen, wechselt es größer und kleiner, scheint jedoch auch die Farbe zu ändern.

09. Karussell

It's time to bring on all the cats — Es ist Zeit, alle Katzen mitzubringen

Um unseren Prototyp zu beenden, fügen wir mit den Katzen ein Bildkarussell hinzu, mit dem Benutzer den Benutzern zulassen, dass sie "mögen". Dazu müssen wir zunächst eine Gruppe von Ebenen hinzufügen. Jedes Bild ist eine separate Schicht mit zunehmendem Offset x-Koordinaten, so dass sie im Wesentlichen in einer Zeile seitlich sitzen, mit nur einem auf dem Bildschirm sichtbaren Bildschirm an einem anderen Element.

10. Links und rechts winken

Follow these steps to add a classic swiping action to your carousel — Führen Sie die folgenden Schritte aus, um Ihrem Karussell eine klassische Swiping-Aktion hinzuzufügen

Das letzte, was wir tun müssen, um es zu tun, um es zu funktionieren, ermöglicht es den linken und rechten Swipes, das Karussell zu scrollen. Wir erstellen dies, indem wir eine Scroll-Interaktion erstellen, um mit der Carousel-Layer-Gruppe (nicht die einzelnen Bilder) zu verknüpfen. Die Interaktion gibt eine X-Koordinate aus, die wir dann mit der X-Eigenschaft des Karussells verknüpfen können, um ihn zu bewegen. Zwischen dazwischen werden wir ein Clip-Patch hinzufügen, mit dem Werte festgelegt werden können, um sicherzustellen, dass wir nicht zu den Koordinaten außerhalb des Randes des Karussells blättern.

11. Nächste Schritte

Now you've learned the basics you can add more advanced features — Jetzt haben Sie gelernt, dass die Grundlagen, die Sie weitere erweiterte Funktionen hinzufügen können

Das ist es. Sie haben eine sehr grundlegende App erstellt. Sie können auch Origami Studio's eingebaut in 'Frames' verwenden, um es auf einen Gerätehintergrund zu platzieren, der Ihnen helfen kann, ein professionelles Finish zu ergeben. Jetzt, da Sie mit den Grundlagen der Patches vertraut sind, können Sie anfangen, fortgeschrittene Verhaltensweisen zu erstellen. Es gibt viele Guides auf der Website von Origami Studio, die erklären, wie in den Apps häufig beliebte Funktionalitäten umgesetzt werden können.

Dieser Artikel wurde ursprünglich in Ausgabe 270 des Creative Web Design Magazine Web Designer veröffentlicht. Kaufen Sie die Ausgabe 270 hier oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

Trends, die das App-Design im Jahr 2018 formulieren
3 Top-Wege, um einen Website-Prototyp aufzubauen
Alles, was Sie über Moken, Wireframes und Prototypen wissen müssen

So prototype eine mobile App mit Origami Studio

01. Ein neuer Prototyp

02. Hinzufügen von Ebenen

03. Wechselwirkung erstellen

04. Wechselwirkungen auf Ebenen verknüpfen

05. Animationen

06. Übergänge

07. Switches.

08. Komplexeres Verhalten

09. Karussell

10. Links und rechts winken

11. Nächste Schritte

wie man - Die beliebtesten Artikel

Erstellen Sie einen mausgesteuerten Parallaxen-Hintergrund-Effekt

Erstellen Sie einen Blog mit Grid und Flexbox

Perspektive in Adobe Illustrator erstellen

10 Erstaunliche Dinge, die Sie mit Schichten tun können

So verbessern Sie Ihre Charakterkunst

10 Tipps zum Moderning von Apple's Photos App

So betont man den Fokuspunkt eines Bildes

Erstellen skalierbare ansprechende Komponenten

Kategorien