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

Adobe XD lernen

Mit dem Wiederholungsraster "echte" Usability erzeugen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Raster selbst vereinfacht und automatisiert viele Designprozesse, kann aber auch zu echter Interaktion verhelfen. Der Trainer beschreibt in diesem Video, wie das Wiederholungsraster für einen echten Scroll-Effekt eingesetzt werden kann, der besonders auf einem angeschlossenen Device zur Geltung kommt.

Transkript

Ich habe wieder mein externes Smartphone per USB-Kabel an den Rechner mit Adobe XD auf dem Desktop angeschlossen und demonstriere Ihnen in diesem Video, wie man mit dem Wiederholungsraster auch wirklich schon eine echte Usability im Sinne von einer Scroll-Funktion implementieren kann. Im Moment ist es ja so, dass ich das angezeigt bekomme, was auf der Arbeitsfläche sichtbar ist und genau das sehen wir auch hier. Also, Sie sehen, es ist wirklich noch aktiv. Möchte ich allerdings einen Scroll-Effekt darstellen, dann wäre es ja schön, wenn die Objekte, die hier unten aus meiner Arbeitsfläche herausragen, auch wirklich gescrollt werden könnten. Da kann man sich eines Tricks bedienen, es ist zwar nicht wirklich ein Scrollen, simuliert das aber sehr gut und dieser Trick funktioniert obendrein ganz einfach. Und zwar muss ich dafür nichts anderes machen wie die Fläche meiner Zeichenfläche zu verlängern, und zwar bis dahin, wohin der Scroll-Effekt geht. Jetzt stelle ich natürlich auch fest, dass das Ganze ein bisschen weiß in Hintergrund ist, mir fehlt also der Hintergrund, das muss ich noch anpassen und ich sehe eine weitere unschöne Sache, die mir wirklich eigentlich erst dann auffällt, wenn man es in einem echten Device, was jetzt hier vor mir liegt, sich auch betrachten kann. Sie sehen es halt hier gespiegelt auf dem Desktop. Und zwar ist hier der letzte Eintrag, der ist nicht so ganz passend. und das kann ich halt hier in einem Wiederholungsraster durchaus sehr schnell anpassen, indem ich die Abstände noch einmal ein bisschen zusammenziehe, sodass ich dann auch wirklich den letzten Eintrag hier sichtbar in meiner Fläche habe, und das müsste damit auch schon geschehen sein. Ich aktualisiere das noch mal gerade, damit wir da auch wirklich das aktuelle Bild sehen. Jetzt wird es deutlich. Wobei, jetzt ist auch das wiederum nicht ganz so schön, Ich mache es doch etwas größer, aber ich denke, jetzt haben Sie es auch gesehen, Das macht schon Sinn, wenn man versucht, das ein bisschen anzupassen, es wirkt einfach ganz anders. Was uns noch fehlt, ist der Hintergrund, das ist recht schnell gemacht. Ich kopiere mir den mit Alt und gedrückter linker Maustaste, ziehe den einfach mal nach unten, und platziere den nun genau passend an den anderen, kann ihn auch noch verkürzen, wenn ich möchte, der muss ja nicht hier irgendwo rein ragen aber Sie sehen, dann habe ich die Problematik, dass ich auch den Hintergrund verändere, kann einen ganz netten Nebeneffekt haben möchte ich aber in dem Falle vermeiden, also lasse ich das Ganze mal so, ziehe dafür dann lieber hier diese Oberfläche nach unten und bin dann an der richtigen Position. Schauen wir uns das nun wirklich einmal an, wie das funktioniert auf dem Smartphone. Achten Sie hier auf das gespiegelte Gerät. Ich nehme das jetzt gerade in die Hand und scrolle wirklich mit meinem Daumen von unten nach oben und bewege das Ganze und ich habe wie einen Scroll-Effekt, wie Sie sehen, direkt, als wenn es schon wirklich in einer echten App zu betrachten wäre und besser kann man dem Auftraggeber oder den Beteiligten nicht demonstrieren, wie das "look and feel" dieser Applikation eigentlich gedacht ist. Die weiteren Schritte der Interaktion tun dann das Übrige. Im Übrigen müssen Sie nicht immer ein Gerät anschließen. Ich persönlich arbeite gerne damit, weil es auch wirklich so flüssig funktioniert. Es geht natürlich ganz genauso über die Desktop-Vorschau. Wenn ich das aufrufe, dann sieht man, kann ich auch hier jetzt mit der Maus, ich streiche also in dem Fall einfach über meine Maus, genau den gleichen Effekt simulieren, sieht genauso aus, ich habe halt nur nicht die Möglichkeit, ein Gerät in die Hand zu nehmen und diese typische Wischbewegung mit dem Daumen zu machen, aber von der optischen Seite her ist es völlig identisch und zeigt auch hier eine echte Usability und damit haben Sie wirklich tolle Möglichkeiten, die Sie auf dem Weg zur schrittweisen Fertigstellung vom Wireframe zum Mock-up nutzen können. Der Rest, ich drücke es einfach mal so aus, ist schlicht Fleißarbeit

Adobe XD lernen

Lernen Sie die Funktionen des Adobe Experience Design, kurz Adobe XD, anhand eines kompletten Praxisworkshops.

3 Std. 20 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.01.2017
Aktualisiert am:17.03.2017

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!