Während ich am UI-Design der mobilen Version der Website oder mobilen Anwendung arbeitete, habe ich verschiedene Möglichkeiten ausprobiert, um sie den Kunden zu präsentieren. Bisher habe ich Invision gewählt, aber es gibt eine Reihe von Punkten.



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

Zweitens ist das Problem beim Wischen der Maus über die aktiven Tasten aus irgendeinem Grund immer noch nicht behoben. Einfach ausgedrückt: Das Scrollen über die aktive Schaltfläche funktioniert wie ein Klick. Und dies ist bei ziemlich komplexen Schnittstellen sehr unpraktisch.

Eine andere Option - Figma - wurde noch nicht gemeistert und die Tatsache, dass sie sich zu einem Industriestandard entwickeln wird. Daher werden einige Designer es auch umgehen.

Präsentation des Designs einer mobilen Anwendung in Axure

Die einfachste und kostengünstigste Option bleibt Axure in Verbindung mit Axshare. Und hier mangelt es Invision an Schärfe - Kunden sind nicht immer in der Lage, die Arbeit mit der Anwendung im Kopf zu präsentieren.

Beginnen wir also mit der Entwicklung eigener Tools. Der erste Schritt besteht darin, eine Vorlage für Axure mit dem Rahmen eines bedingten Mobiltelefons zu erstellen. Dazu benötigen wir einen Telefonrahmen in PNG mit einem „Loch“ im Bildschirm und der Struktur der Bildschirme.

Am Anfang ist alles einfach: Wir legen das Bild des Telefons ab, oben den Inline-Rahmen in der Größe des Bildschirmlochs. Aber es gibt einen unangenehmen Moment. Es bezieht sich auf die Funktionen des Inline-Frame-Elements.
Dieses Element erstellt im Prototyp ein Fenster zum Hochladen verschiedener Informationen - einen Frame. Darin können Sie die Ausgabe eines anderen Bildschirms aus der Struktur festlegen oder einen Link zur Site einfügen.

Das Problem tritt in Bildlaufleisten auf. Sie können entweder angezeigt oder ausgeblendet werden. Bei versteckten Bildlaufleisten ist das Zurückspulen jedoch deaktiviert, sodass die langen Bildschirme der Anwendung nicht in der Dynamik angezeigt werden. Keine Bestellung.

Um das Problem zu lösen, verwenden wir eine Maskentechnik (danke Crackjack ).

1. Konvertieren Sie den Inline-Frame in das dynamische Bedienfeld. Schalten Sie die Anzeige der Bildlaufleisten ein (falls deaktiviert).
2. Wir übersetzen den Rahmen und den Rahmen des Telefons noch einmal in das dynamische Bedienfeld, in dem wir die Bildlaufleisten deaktivieren. Wir ändern auch die Größe unserer Maske auf 360 x 640, damit die Bildlaufleisten des Rahmens nicht herausschauen.

Der Rest ist schon einfacher - auf dem Hauptbildschirm haben wir noch den Telefonrahmen in einem Rahmen und einen Dummy. Im Frame laden wir die Ausgabe des nächsten Bildschirms in die Liste, richten die Navigation ein und fertig. Vergessen Sie nicht, die Elemente des ersten Bildschirms zu einer Gruppe zusammenzufassen und daraus ein dynamisches Bedienfeld zu erstellen.

Das Panel selbst kann in der Mitte des Browsers ausgerichtet werden. Markieren Sie in den Einstellungen an Browser an die Parameter Mitte und Oben. Wir veröffentlichen alles auf Axshare und senden den Link an den Kunden.

Verknüpfung. Fertige Vorlage für Axure

Ich habe das Ergebnis als fertige Datei hochgeladen. Sie können die Vorlage für Axure hier kostenlos herunterladen .

Wichtiger Punkt

Die Vorlage ist für 360 Layouts in der Breite ausgelegt. Dies geschieht absichtlich. Layouts mit einer Breite von 320 sehen für das Auge auf dem Desktop-Computerbildschirm zu klein aus, und Layouts in der Originalgröße - 1080 (und sogar 640) im Gegenteil - 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!