Präsentationsvorlage für Axure Mobile-Anwendungen

Published on May 24, 2017

Präsentationsvorlage für Axure Mobile-Anwendungen

  • Tutorial
Während der Arbeit am UI-Design der mobilen Version der Site oder der mobilen Anwendung habe ich verschiedene Möglichkeiten ausprobiert, um sie den Kunden vorzustellen. Während für Invision entschieden, gibt es aber eine Reihe von Punkten.

Bild

Erstens die Kosten. Für die Profis ist dies kein Problem, aber für viele unerfahrene Designer ist der Mindestbetrag von 13 US-Dollar pro Monat ein anständiger Betrag.

Zweitens ist das Problem mit dem Wischen der Maus über die aktiven Schaltflächen aus irgendeinem Grund immer noch nicht gelöst. Einfach ausgedrückt: Das Scrollen über die aktive Schaltfläche funktioniert wie ein Klick. Und es ist sehr unpraktisch bei recht komplexen Schnittstellen.

Eine andere Option - Figma - ist noch nicht beherrscht und wird sich in der Tat zu einem Industriestandard entwickeln. Daher umgehen einige Designer auch seine Seite.

Präsentieren eines Designs für mobile Apps in Axure


Die einfachste und günstigste Option ist Axure in Verbindung mit Axshare. Und hier wird Invision zunehmend vermisst - Kunden sind nicht immer in der Lage, detaillierte Informationen für die jeweilige Anwendung bereitzustellen.

Beginnen wir also mit der Entwicklung unserer Tools. Der erste Schritt besteht darin, eine Vorlage für Axure mit einem Frame eines bedingten Mobiltelefons zu erstellen. Dazu benötigen wir einen Telefonrahmen in PNG mit einem „Loch“ anstelle des Bildschirms und einer Bildschirmstruktur.

Am Anfang ist alles ganz einfach: Legen Sie das Bild des Telefons nach unten und den Inline-Rahmen über die Größe des Bildschirmlochs. Aber es gibt einen unangenehmen Moment. Es ist mit den Features des Elements Inline Frame verknüpft.
Dieses Element erstellt im Prototyp ein Fenster zum Hochladen verschiedener Informationen - einen Rahmen. Hier können Sie die Ausgabe eines anderen Bildschirms aus der Struktur einstellen oder einen Link zur Site einfügen.

Das Problem tritt bei Bildlaufleisten auf. Sie können entweder ein- oder ausgeblendet werden. Wenn ausgeblendete Bildlaufleisten jedoch deaktiviert sind, wird der Rücklauf deaktiviert, sodass die langen Bildschirme der Anwendung nicht in der Dynamik angezeigt werden. Nicht bestellen.

Um das Problem zu lösen, verwenden wir maskiert (dank Crackjack ).

1. Inline Frame in Dynamic Panel konvertieren. Schalten Sie die Anzeige der Bildlaufleiste ein (falls deaktiviert).
2. Wir übersetzen den Frame und den Frame des Telefons noch einmal in ein dynamisches Panel, in dem wir die Bildlaufleisten deaktivieren. Die Größe unserer Maske wurde ebenfalls auf 360 x 640 geändert, damit die Bildlaufleisten nicht aus dem Rahmen herausragen.

Der Rest ist einfacher - auf dem Hauptbildschirm haben wir immer noch den Rahmen des Telefons in einem Rahmen und einer Kappe. Im Frame laden wir die Ausgabe des nächsten Bildschirms in der Liste, passen die Navigation an und das wars. Vergessen Sie nicht, die Elemente des ersten Bildschirms zu einer Gruppe zusammenzufassen und daraus ein dynamisches Panel zu erstellen.

Das Panel selbst kann in der Mitte des Browsers ausgerichtet werden. In den Einstellungen von Pin to Browser markieren wir die Parameter Center und Top. Wir veröffentlichen alles auf Axshare und senden den Link an den Kunden.

Verknüpfung Fertige Vorlage für Axure


Ich legte das Ergebnis der fertigen Datei aus. Laden Sie die Vorlage für Axure kostenlos unter dem Link herunter .

Wichtiger Punkt


Die Vorlage ist für Layouts mit einer Breite von 360 konzipiert. Dies geschieht absichtlich. Layouts mit einer Breite von 320 sehen auf dem Desktop-Computerbildschirm zu klein aus, Layouts in der Originalgröße (1080 und sogar 640) dagegen zu groß.

PS Ich werde keine Standardanweisungen schreiben was und wo. Ich möchte mehr praktische Dinge geben, um die Arbeit von UX / UI-Designern zu verbessern.

Gerne beantworte ich Fragen und freue mich über Optimierungsvorschläge!