Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

UX Design mit Axure 8 Grundkurs

Breakpoints anlegen

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Adaptive Layouts in Axure zu erstellen, bedeutet Wireframes und Prototypen zu bauen, deren Layout sich an unterschiedliche Screen-Größen anpassen kann.
03:48

Transkript

In diesem Video werde ich Ihnen erklären, was Adaptive Prototypen sind und wie Sie sie in Axure zeugen. Ein aktueller Trend bei der Entwicklung von Webseiten sind sogenannte Responsive oder Adaptive Websites. Das heißt, dass ich die Inhalte einer Webseite an die jeweilige Screengröße des Endgerätes anpassen, um eine optimale Darstellung der Inhalte zu gewährleisten. Axure erlaubt Ihnen dieses Prinzip auch für Prototypen einzuwenden. So können Sie sogenannte Adaptive Layouts erstellen. Das heißt, Sie können unterschiedliche Layouts für unterschiedliche Screengrößen definieren. So werde ich die Startseite unseres Webblogs für drei unterschiedliche Screengrößen anpassen. Die Standardgröße bleibt 960 Pixel, beziehungsweise 1024, außerdem werde ich ein optimiertes Layout für ein Tablet, Import Redmond und für ein Mobiltelefon erstellen. Um Adaptive Layout zu erstellen, öffnen Sie im Properties Tap, im Inspector Panel und wählen Sie Adaptive Enabled aus. Nun erscheint oberhalb des horizontalen Lineals die Leiste mit deren Sie Ihre Adaptive Views verwalten können. Als erstes werde ich die verschiedenen Screengrößen für die Adaptive Views erstellen, möchte festlegen. Der linke Knopf öffnet den Adaptive View Manager. Initial ist ein Base-View eingestellt, das heißt, das ist die Standard Ansicht, mit der ich angefangen habe zu arbeiten. Über die Plus-Taste kann ich neue Views hinzufügen. Denn das kleinere View ist der Tablet-View Hier drunter kann ich einstellen, wann dieser View von Axure dargestellt werden soll. Sie können hier Werte eintragen und hier überprüfen, ob sie kleiner oder größer, als Ihr bestimmte Wert ist, um diesen View entsprechend zu aktivieren. Ich wähle 768 Pixel, da dies die Screenbreite eines iPads ist. Außerdem erstelle ich noch einen Mobile-View, beide der Screenbreite maximal 375 Pixel sein soll. Außerdem bietet in Axure ein Set an Presets an, die Sie auch bei Bedarf auswählen können. Zusätzlich gibt es hier unten noch eine Dropdown-Liste, die definiert, von welcher Ansicht der aktuelle View seine Einstellung übernehmen soll. In meinem Fall soll dich der Tablet-View an der Originalansicht orientiern und der Mobile-View an der Tablet-View. Dabei wird es anpassen den großen Verhältnisse einfacher, wie Sie gleich sehen werden. Nachdem Sie Ihre Views erstellt haben, erscheinen oben drei unterschiedliche Knöpfe, mit der Sie zwischen in verschiedenen Views wechseln können. Die hier definierten Werte sind die sogenannten Breakpoints, an dem sich Ihr Layout später ändern wird. Ihr Prototyp wird ein Layout haben, das 375 Pixel Breit des Screens unterstützt, dann ein weiteres das 768 Pixel Width des Screen unterstützt und den Bases-View, der auf 1024 Pixel ausgelegt ist. Dies ist ein sogenannte Desktop First Definition. Das Gegenteil dazu ist eine Mobile First Anordnung. Dabei würden Sie anfangen zuerst das Mobile-Layout zu definieren, das heißt Ihre Base-View wäre für 375 Pixel ausgelegt, dann käme der Tablet-View 768 und am Ende käme erst ein größerer Screen. Dass Sie in Axure frei definieren können, was hier Startpunkt ist und ob Ihr Breakpoints größer oder kleiner werden, werden beide Vorgehensweisen gleichermaßen unterstützt. Der Adaptive View Manager erlaubt Ihnen also unterschiedliche Breakpoints zu definieren, um Ihren Prototyp für unterschiedliche Screengrößen anzupassen.

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!