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

UX Design mit Axure 8 Grundkurs

Grundlagen mobiler Prototypen

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie, worauf man beim Erstellen mobiler Prototypen in Axure achten sollte. Sie lernen, unterschiedliche Screen-Größen zu unterscheiden und in Axure zu erkennen.
04:17

Transkript

In diesem Video werde ich Ihnen erläutern, wie Sie Prototypen für unterschiedlichen Screen-Größen erstellen können. Wie Sie bereits gesehen haben, muss man sich in Axure für eine gewisse Screen-Größe für seinen Prototyp entscheiden. In meinem Beispiel hatte ich 1024 Pixel gewählt. Diese Breite geht, aber von einem Monitor aus oder zumindest von einem Tablet im Landscape-Modus. Soe sieht unser Prototyp auf einem aktuellen iPhone aus. Wie Sie bereits hier im Preview sehen können, werden die Texte viel zu klein und schwer liesbar sein. Das heißt die Screen-Breite ist essential wichtig für die Erstellung und das Prototypen. Andersrum und bedeutet das, dass wir uns gedanken machen müssen, auf welchen Endgeräten wir unsere Prototypen zeigen wollen. Falls Sie die Prototypen erstellen wollen, die auf Mobilgeräten dargestellt werden sollen, sollten Sie ein paar Änderungen an Ihren Axure-Einstellung vornehmen. Öffnen Sie Unter "Publish" die Generate HTML File Einstellung und navigieren Sie zur Mobile/Devic-Kategorie, selektieren Sie die Include Viewport Tag Checkbox. Aber jetzt wird die Prototyp nicht mehr herunter skaliert, sondern es für die Screen-Größe Ihres Mobilgerätes berücksichtigt. Da als Breite die Device-Width eingestellt ist. Die Einstellungen können Sie hier unverändert lassen. Normalerweise deaktiviere ich noch die Option, dass Nutzer durch Gesten, wie Pinch oder Zoom den Screen vergrößern können und ich deaktiviere die Option, dass unter iOS Zahlen als Telefonnummern erkannt werden und Sie dadurch in Links verwandelt werden. Wenn ich meinen Prototypen nun erneut zu Axure hochlade und mir auf einem mobilen Gerät anschaue, werden Sie Unterschied erkennen. Wie Sie sehen, wird der Prototypen nun unter der Berücksichtigung der Größenverhältnisse des Mobilgerätes angezeigt. Das heißt, Sie müssen sich im Vorhinein Gedanken machen, welche Screen-Größen Sie unterstützen wollen und Ihren Prototypen entsprechend anpassen. Die verschiedenen Auflösung von Apple-Geräten zu finden, ist relativ einfach. Hier lässt sich leicht eine Übersicht finden, der Apple nur eine Handvoll Screen Klassen verwendet. Wundern Sie sich übrigens nicht über die geringen Auflösungswerte. Die Auflösung mobile Endgeräte werden nicht in Pixeln besondern in Points angegeben. Der Grund dafür ist, dass man durch den Einsatz von Points unterschiedliche Klassen mobile Endgeräte leicht unterscheiden kann, denn, wie Sie sehen, sind die Auflösung der Mobiltelefone in Points sehr vergleichbar, wo hingegen sie sich in Pixeln sehr unterscheiden. Wie Sie sehen, nutzt die gute Hälfte der Mobiltelefone 320 pixel als Breite erst die größeren Auflösungen nutzen 375 und nur das iPhone 6 Plus 414 pixel. Da es eine Vielzahl unterschiedlicher Android Hersteller und Geräte gibt, ist eine solche Übersicht verstellen relativ schwer. Sie können aber Axure nutzen, um die Screen-Größe für ein Device, das Ihnen vorliegt, zu bestimmen. Dafür habe ich ein einfaches Element namens "Resolution Tracker" gebaut. Ddies ist ein Master, der die aktuelle Screen-Größe des Browserfensters erfragt und darstellt. Ziehe ich das Fenster kleiner oder größer aktualisiert der Resolution Thecker automatisch den Wert. Schaue ich mir nun den Resolution Tracker auf einem iPhone 6 an, erhalte ich, 375 x 647 pixel und auf einem Ipad erhalte ich die Größe von 68 x 1004, beziehungsweise 1024 x 748 pixel. Das heißt, sie können Axure und den Resolution Tracker nutzen, falls die Screen-Größe eines Gerätes ermitteln wollen. Wichtig dabei ist, dass Sie die mobile- und Devicesetting beziehungsweise den Viewport Tag aktiviert haben, damit das erzeugte HTML, die Screen-Größe des Geräts berücksichtigt. Sie können dann die ermittelten Größenverhältnisse nutzen, um Ihre Prototypen auf diese Endgeräte zu zuschneiden.

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!