Share
Marvel ist ein hervorragendes Online-Tool, mit dem Designer Prototypen mobiler Anwendungen und Webprojekte erstellen können. In diesem Tutorial erfahren Sie, wie wir Marvel zum ersten Mal einsetzen können, indem wir einen Prototyp für ein mobiles Spiel erstellen und lernen, wie man durch verschiedene Bildschirme und Optionen navigiert.
Es gibt heute viele unglaubliche Prototyping-Tools: Invision, Framer, Flinto, Pixate, die Liste geht weiter. Warum sollte ich Marvel verwenden? Ich habe immer gedacht, dass das, was wirklich zählt, nicht das Werkzeug ist, sondern dass ich mich beim Arbeiten wohlfühle. Ich fühle mich gut mit Marvel.
Einige der Features von Marvel sind:
Sollen wir anfangen?
Gehen Sie zu https://marvelapp.com/ und melden Sie sich an. Denken Sie daran, dass Sie ein Dropbox-Konto benötigen, um Marvel zu verwenden. Auf diese Weise können Sie alle Dateien synchronisieren, die Sie in Ihren Prototypen verwenden. Sie brauchen keine Dropbox Eingerichtet Um Marvel verwenden zu können, müssen Sie sich jedoch auf Dropbox.com authentifizieren können.
Wenn Sie bereits bei Dropbox registriert sind, ist das großartig! Lassen Sie Marvel auf Ihr Konto zugreifen, um zum nächsten Schritt überzugehen. Marvel verwendet die Bilder, mit denen Sie arbeiten, greift jedoch niemals auf andere Dateien zu. Sobald Sie dies tun, wird der folgende Bildschirm angezeigt:
Es ist Zeit, unser erstes Projekt zu erstellen, klicken Sie also auf Projekt erstellen Taste. Ein neues Popup wird angezeigt, in dem Sie den Namen des Projekts eingeben können. Beachten Sie, wie Sie zusätzliche Optionen wie "Teilen des Projekts mit einem Team" (nicht dieses Mal) oder Kennwortschutz (nicht den, den wir jetzt gerade benötigen) hinzufügen können. Geben Sie einen Namen für das Projekt ein. In meinem Fall werde ich "WORDS" verwenden. Klicken Sie jetzt auf Projekt erstellen Taste.
Nachdem wir unser Projekt erstellt haben, benötigen wir einige Inhalte. Wenn das Projekt erstellt ist, sehen Sie sich die neuen Optionen an, die Sie auf dem Bildschirm sehen. Konzentrieren Sie sich auf Fügen Sie Designs von Dropbox hinzu und Machen Sie Fotos von Skizzen,Die wichtigsten Optionen beim Erstellen neuer Projekte in Marvel.
Es ist an der Zeit, die Übungsdateien zu verwenden, die ich diesem Tutorial beigefügt habe. Falls noch nicht geschehen, laden Sie eine Kopie von Github herunter. Als Nächstes müssen Sie alle PNG-Dateien in einen Ordner in Ihrem Dropbox-Konto hochladen, wo immer Sie möchten. Für dieses Tutorial habe ich einen Ordner namens WORDS erstellt, um den gesamten Inhalt darin zu speichern. Sobald dies erledigt ist, kehren Sie zum Bildschirm zurück.
Klicken Sie jetzt auf Fügen Sie Bilder aus Dropbox hinzu wählen Sie alle Bilder in Ihrem Dropbox-Ordner aus und fahren Sie fort.
Überprüfen Sie die Bilder. Ihre Größe ist 750 x 1334 Pixel, was der Auflösung eines iPhone 6 entspricht. Wir teilen Marvel mit, dass wir einen Prototyp für dieses Telefon erstellen möchten. Wie? Klicken die Einstellungen um ein neues Optionsfenster anzuzeigen. Sie sollten sehen, wie der iPhone 6-Geräterahmen bereits ausgewählt ist. Das liegt daran, dass Marvel anhand der Größe unserer Bildschirme den am besten passenden Rahmen automatisch erkannt hat. Vielen Dank, Marvel!
In diesem Bildschirm können Sie andere Geräte-Frames auswählen und andere Optionen konfigurieren, die sich auf Visuals und Verhalten des Prototyps beziehen. Lassen Sie uns alles als Standard und kehren Sie zum vorherigen Bildschirm zurück, um fortzufahren. Drücke den ✕ Symbol zum Schließen des Fensters.
Nun kommt der lustige Teil: Lassen Sie uns unsere erste Interaktion erstellen. Bewegen Sie den Mauszeiger über die Bilder, um neue Optionen anzuzeigen. Du siehst sie? Bewegen Sie den Mauszeiger beispielsweise über 00-Intro.pngdann klick Bearbeiten. Sie sehen ein schönes Popup, das zeigt, wie Hotspots erstellt werden.Gehen Sie voran und Sie werden mit etwas wie diesem vorgestellt:
Spitze: Verwenden Sie die Zoom-Option im oberen Menü, wenn das Bild auf Ihrem Bildschirm zu groß ist. Ich verwende eine 50% ige Zoomstufe.
Um Interaktionen und Übergänge hinzuzufügen, müssen wir unseren Bildern „interaktive Bereiche“ hinzufügen. Diese Bereiche sind als bekannt Hotspots. Sie können sie überall erstellen, indem Sie einfach klicken und ziehen, bis Sie die gewünschte Form haben.
Erstellen Sie einen neuen Hotspot über dem Lässiger Modus Knopf in unserem Design. Wenn Sie fertig sind, sollte eine neue Symbolleiste angezeigt werden. Wir werden es verwenden, um festzulegen, wie sich der Hotspot verhält.
Spitze: Sie können die Position und die Größe eines Hotspots ändern, indem Sie ihn einfach auswählen, verschieben oder skalieren.
In der Symbolleiste sehen Sie alle Bilder, die wir im Projekt haben. Wir haben den Hotspot direkt über dem Lässiger Modus klicken Sie auf das Bild 01-Casual-Option um es auszuwählen und den Hotspot mit dem Bild zu verknüpfen. Dieses Bild ist das, was wir auf dem Bildschirm sehen, wenn wir mit diesem Hotspot interagieren und eine Tipp- oder Klickaktion simulieren.
Konzentriere dich jetzt auf Hotspot Verhalten. Sie sehen, dass standardmäßig der Übergangstyp ist Keiner. Dies bedeutet, dass keine Animation zwischen Bildschirmen durchgeführt wird. Wir sehen auch, dass die Aktion, die die Interaktion auslöst, ist Klicken oder tippen Sie auf (wenn Sie den Prototyp mit einem Handy testen möchten). Lassen wir es für den Moment als Standard.
Drücke den Duplizieren Sie diesen Hotspot Möglichkeit. Wählen Sie im neuen Fenster die Option 02-Challenge-Option Bild. Klicken Sie auf die grüne Schaltfläche, um die Aktion abzuschließen.
Spitze: Durch das Duplizieren von Hotspots sparen Sie Zeit, wenn Sie dieselbe Interaktions- und Zielansicht in mehreren Bildern verwenden möchten. Beachten Sie, dass duplizierte Hotspots grün anstelle von Standardblau werden.
Dies war die Grundlage für die Schaffung von Interaktionen in Marvel. Einfach richtig? Klicken Sie jetzt auf ✕ Symbol zum Schließen der Symbolleiste. Fahren Sie mit dem Schieberegler oben zum nächsten Bild, 01-Casual-Option.
Erstellen Sie oben einen neuen Hotspot Lässiger Modus. Denken Sie daran, einfach klicken und ziehen. Verbinde es diesmal mit dem 06-Casual-Modus Bild. Um den Übergangseffekt zu ändern, klicken Sie auf Übergang dann auswählen Verblassen. Wir simulieren den Zugriff auf einen der Spielmodi der Anwendung.
Erstellen Sie einen neuen Hotspot über der Herausforderungsmodus Schaltfläche und verknüpfen Sie es mit der 02-Challenge-Option Bild. Nutzen Sie die Duplizieren Sie diesen Hotspot Option, um es auch in die zu kopieren 00-Intro Bild
Erstellen Sie einen weiteren Hotspot, diesmal über dem Trophäensymbol unten im Bild. Verknüpfen Sie diesen Hotspot mit dem 04-Trophäenbild. Veränderung Übergang zu Nach oben schieben. Benutzen Duplizieren Sie diesen Hotspot und kopiere es in 00-Intro und 02-Challenge-Option.
Einmal mehr: Erstellen Sie einen Hotspot über der Keine Begrenzung Taste. Verbinden Sie es mit dem 03-Nolimit-Option Bild. Veränderung Übergang zu Nach links drücken und verwenden Duplizieren Sie diesen Hotspot um es in zu kopieren 00-Intro und 02-Intro-Challenge-Option
Am Ende sollten Sie etwa folgendes Bild haben:
Verwenden Sie den Schieberegler oben, um zum nächsten Bild zu gelangen: 03-Nolimit-Option. Erstellen Sie einen neuen Hotpost direkt über dem Zurück zum Menü Möglichkeit. Klicken Sie jetzt auf Link zum zuletzt besuchten Bildschirm Möglichkeit. Auf diese Weise kehrt unser Prototyp zum vorherigen Bildschirm zurück, auf dem Sie die Interaktion durchgeführt haben. Denken Sie daran, dass wir über die Hotspots, die wir in die Bilder 00, 01 und 02 einfügen, auf diesen Bildschirm zugreifen können. Mit Link zum zuletzt besuchten Bildschirm Wir können zu jedem dieser Bilder zurückkehren und nicht nur eines.
Gehen wir zum nächsten Bild über: 04-Trophäen. Konzentriere dich auf die Option, die sagt Feste Kopfzeile. Klicken Sie und ziehen Sie es nach unten, bis Sie das erreichen 92px Kennzeichen. Auf diese Weise können wir die Kopfzeile beim Scrollen nach oben und unten fixieren. Da dieses Bild insbesondere 2050px hoch ist, können wir diesen Effekt sehen, wenn wir unseren Prototyp testen möchten.
Erstellen Sie über dem Symbol im linken oberen Bereich einen neuen Hotspot. Verbinden Sie es mit dem 00-Intro Bild und wählen Sie Herunterrutschen wie Übergang. Duplizieren Sie diesen Hotspot zum 05-Trophäen-Aktie und auch für 08-Ergebnisse und 09-Trophäen-freigeschaltet.
Erstellen Sie einen weiteren Hotspot im gesamten Bereich von Trophäen-Titel 1. Verbinden Sie es mit dem 05-Trophäen-Aktie Bild und Set Verblassen wie Übergang. Sie können den von mir erstellten Hotspot im Bild unten sehen:
Weiter zum nächsten Bild: 06-Casual-Modus. Hier erstellen wir einen Hotspot zum Anzeigen des Pausenmenüs und einen weiteren Hotspot zum Anzeigen des Ergebnisses, das am Ende des Spiels angezeigt wird.
Erstellen Sie also einen neuen Hotspot über dem Symbol oben in der Mitte zwischen dem Timer und der Partitur. Verbinden Sie es mit dem 07-pause Bild. Benutzen Verblassen wie Übergang. Erstellen Sie einen weiteren Hotspot in der Mitte des Bildschirms und verknüpfen Sie ihn mit 08-Ergebnisse. einstellen Slide Fade wie Übergang.
Nächstes Bild! Verwenden Sie den Schieberegler und gehen Sie zu 07-pause. Machen Sie einen neuen Hotspot über der Fortsetzen Möglichkeit. Du kannst den ... benutzen Link zum zuletzt besuchten Bildschirm Option oder verknüpfen Sie den Hotspot mit der 06-Casual-Modus Bild, um den Effekt der Rückkehr zum Spiel aus dem Pause-Menü zu simulieren.
Erstellen Sie auch einen Hotspot über dem Zurück zum Menü Option und verknüpfen Sie es mit der 00-Intro Bildauswahl Slide Fade wie Übergang.
Wir sind fast fertig! Gehe zu 08-Ergebnisse. Sie sollten einen zuvor erstellten Hotspot auf dem Symbol in der oberen Leiste sehen. Erstellen Sie eine neue über der Neues Spiel Taste. Verbinden Sie es mit dem 06-Casual-Modus. Benutzen Verblassen wie Übergang. Duplizieren Sie den Hotspot in dem 09-Trophäen-freigeschaltet Bild.
Erstellen Sie einen weiteren Hotspot in der Mitte des Bildschirms. Verwenden Sie das nachstehende Bild als Referenz, falls erforderlich:
Verknüpfen Sie den Hotspot mit dem 09-Trophäen-freigeschaltet, benutzen Schieben Sie nach links wie Übergang und Nach links wischen wie Aktion. Wenn Sie diesen Prototyp auf einem mobilen Gerät sehen, können Sie mit dieser Geste die Interaktion auslösen (Desktop-Computer führen die Aktion weiterhin durch Klicken aus.).
Weiter zum 09-Trophäen-freigeschaltet; letztes Bild! Sie sollten bereits zwei Hotspots erstellt haben. Erstellen Sie eine neue in der mittleren linken Zone des Bildschirms. Verlinke es mit 08-Ergebnisse, benutzen Schieben Sie nach rechts als Übergang und Wische nach rechts wie Aktion.
Fertig. Jetzt ist es an der Zeit, unseren Prototyp anzusehen und mit anderen zu teilen!
Klicke auf das Vorschau Option in der oberen Leiste. Ein neues Fenster mit Ihrem Prototyp wird in einer Vorlage iPhone 6 angezeigt. Es lebt! Klicken Sie auf das Haussymbol, um automatisch zum ersten Bildschirm zurückzukehren.
Jetzt können Sie durch die Bildschirme blättern und mit den verschiedenen von Ihnen erstellten Hotspots interagieren.
Spitze: Beachten Sie, wie sich der Cursor ändert, wenn Sie über einen Hotspot (Desktop-Computer) fahren. Wenn Sie sich nicht genau erinnern, wo sie sich befinden, tippen oder klicken Sie auf den Bildschirm, um anzuzeigen, wo sie sich befinden.
Alles sollte gut funktionieren und ich hoffe das Ergebnis hat Ihnen gefallen! Schließen Sie nun das Fenster mit dem Prototyp und kehren Sie zu dem Bildschirm zurück, auf dem Sie zuvor gearbeitet haben. Drücke den Schließen Option, um zum Hauptbildschirm des Projekts zurückzukehren.
Von hier aus können Sie auf den Bearbeitungsbildschirm zugreifen, neue Bilder hinzufügen, die vorherigen aktualisieren, ein Anwendungssymbol einfügen usw. Sie können auch das verwenden abspielen Option zum erneuten Starten der Vorschau in Ihrem Browser.
Klicke auf das Aktie Möglichkeit. Sie sehen alle verfügbaren Optionen, um den soeben erstellten Prototyp mit anderen Designern, Entwicklern oder Kunden zu teilen.
Sie können die für die Ausführung Ihres Prototyps erforderlichen Dateien auch überall herunterladen. Schließen Sie das Fenster "Prototyp freigeben" und klicken Sie im Projektbildschirm auf Herunterladen um eine zip-Datei mit allem, was Sie brauchen, herunterzuladen.
All die Dinge, die wir in diesem Tutorial geübt haben, haben Sie mit den Fähigkeiten ausgestattet, um vollständig zu verstehen, wie Marvel zum schnellen Erstellen von Prototypen verwendet wird. Wenn Sie Fragen zu einem bestimmten Schritt oder zu Marvel im Allgemeinen haben, schreiben Sie unten einen Kommentar. Ich helfe Ihnen gerne weiter!
Accentsconagua