Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

UX Design mit Axure 8 Grundkurs

Adaptive Layouts erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie hier, wie man adaptives Layout in Wireframes und Prototypen erstellt.
03:11

Transkript

In diesem Video werde ich Ihnen zeigen, wie Sie unterschiedliche Adaptive Layout für Ihre Prototypen erstellen. Nachdem Sie Ihre unterschiedlichen Breakpoints angelegt haben, können Sie hier zwischen in verschiedenen Ansichten wechseln. Wie Sie sehen, wird ein Pageguide als Hinweis angezeigt. Beginnen wir nun das Layout für den Table-View zu optimieren. Dazu selektiere ich den View und doppelklicke auf dem Master, um ihn anzupassen. Auch hier aktiviere ich noch einmal die Toolbar, das sich standardmäßig im Master nicht aktiviert ist. Jetzt kann ich beginnen die Layout-Änderungen für den Tablet-View vorzunehmen. Wie Sie sehen, nutze ich den global Guide, der automatisch für den aktuellen View eingeblendet ist. Praktisch ist auch, dass, wenn ich ein Element selektiere und zwischen in verschiedenen Viewports wechsle, das Element selektiert bleibt, sich aber die "x" und "y", so wie die Größenverhältnisse ändern können. Wie Sie sehen, ist der Base-View von meinen Anpassungen im Tablet-View unbeinträchtigt. Jedoch werden alle Änderungen des Tablet-Views für den Mobilie-View übernommen. Der Grund dafür ist, dass Sie bei der Definition der verschiedenen Views gesagt haben, dass der Mobileview, das Layout vom Table-View erben soll. Jetzt passe ich den Mobile-View an. Bin ich mit meinem Ergebnis zufrieden, überprüfe ich noch einmal die unterschiedlichen Views. Ich lade die Änderung zu Axure hoch und überprüfe die unterschiedlichen Layouts auf dem mobilen Endgeräten. Um mit dem Prototyp auf mobilen Endgeräten anzusehen, nutze ich die Axure Share App. Dies ist eine kostenlose App, die für iOS und Android verfügbar ist. Mit ihr können Sie Prototypen, die Sie auf Axure haben, online ansehen oder auch zur offline Betrachtung auf Ihrem Endgerät speichern. Wie Sie sehen, ist der Headerbereich bereits nach unserem Vorgaben angepasst. So kann ich das Layout meiner Screens sukzessive anpassen. Eigenschaften, die sich in den Views unterscheiden können, sind die Größe und der Ort eines Elementes als auch die Farbe. Das Gute daran ist aber, dass die Interaktion eines Elementes gleich bleibt. Das heißt, die Events, die Sie im Base definiert haben gilt natürlich auch noch im Mobile- oder im Tablet-View. Das bedeutet, dass Sie ausschließlich Layout-Anpassungen vornehmen und nicht mit Kopien von Screens arbeiten.

UX Design mit Axure 8 Grundkurs

Lernen Sie mit Axure 8 Apps und Webseiten zu konzipieren und prototypisch umzusetzen, ganz ohne Programmiervorkenntnisse.

3 Std. 32 min (53 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Axure RP Pro Axure RP Pro 8
Exklusiv für Abo-Kunden
Erscheinungsdatum:04.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!