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

Illustrator CC für Webdesigner: Wireframing

Verwendung von Linien und Pfeilen für das Verhalten

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Bedienfeld Konturen ist ein vielseitig einsetzbares Werkzeug zur Verdeutlichung von Benutzergesten und Verhalten. Egal, ob Sie Tippen, Ein- oder Aus-Zoomen verdeutlichen möchten – alles ist möglich. Das Video zeigt Ihnen einige dieser Möglichkeiten.

Transkript

Ich habe bereits zuvor über Gesten, über Benutzerverhalten gesprochen, unter anderem durch diese Linie und die Pfeile signalisiert, dass man auf diese Weise Bewegung, eben Verhalten darstellen kann. Ich möchte in diesem Video noch etwas näher darauf eingehen, und Ihnen zeigen, welche Möglichkeiten Sie mit Illustrator haben, dass Benutzerverhalten zu spezifizieren. Zunächst einmal schauen wir uns diesen Pfeil an und klicken hier auf das Bedienfeld Kontur. Falls Sie das nicht haben, können Sie das über Fenster auch auch aufrufen. Diese Kontur, dieses Bedienfeld Kontur, das besitzt auch noch ein paar Optionen. Also, das heißt, wenn Sie die ausblenden, dann haben sie also nur die Stärke hier stehen; werden die Optionen eingeblendet, dann taucht der ganze Bereich hier unten mit auf. Ja, dieser Dialog, der ist schon relativ mächtig, was man an Einstellungen dort vornehmen kann. Zunächst einmal, ja, ist mir das hier ein wenig zu dünn. Ich würde das ganz gerne ein bisschen erhöhen von der Konturenstärke und wenn ich also jetzt hier den Wert erhöhe, dann sieht man, fällt noch nicht mal so sehr die Linie, also die Kontur ins Gewicht, sondern diese Riesenpfeile, und wenn Sie das einstellen, dann haben sie über diese Skalierungsmöglichkeit hier unten die Möglichkeit, diese Pfeilspitzen wieder anzupassen. Damit es bei beiden oder für beide Enden gleichmäßig geht, haben sie hier, ja, die Verknüpfung der Skalierung. Das können Sie ein oder ausschalten. So und jetzt geh ich da mal auf circa 70 Prozent. Ich denke mal, das passt, das muss mal runterlaufen. 70 Prozent, das sieht ganz gut aus. Ja, die besagten Pfeilspitzen können Sie mit der Option, die dadrüber ist, einstellen. Da haben wir dann die Möglichkeit, verschiedene Enden zu wählen. Also zum Beispiel auf die Pfeilspitze 1, 2, und je nachdem wie einem das gefällt. Wenn man jetzt beispielsweise darstellen möchte, dass eine Bewegung nur in eine Richtung geht, dann vollziehe ich folgende Endung: Also nehmen wir mal die Endung nach links und zwar nehme ich hierfür ebenfalls einen Punkt. Den skaliere ich, ich zieh das jetzt mal hier an die Stelle, genau in die Mitte. Oder nehmen wir es daneben, dann sehen wir es besser. So und den skaliere ich jetzt wieder hoch, damit ich auf meiner Größe bin, die ich sowieso benutze. Das ist noch ein bisschen zu groß. So. Und damit habe ich quasi diesen Punkt und eine Bewegung, das heißt, wenn ich den mal wegschmeiße, so, dann kann ich hier diese Bewegung hinein ziehen Und einfach den Pfeil ein Stück kleiner ziehen. Damit Sie nicht zum Beispiel so eine Schräge mit drin haben, können Sie das ganze auch mit der Shift-Taste bewegen, wobei das Raster von Illustrator, das vereinfacht das schon ganz erheblich. So, ja, und in dem Moment, jetzt habe ich hier natürlich auch die Vergrößerung wieder mit drin, das wollte ich ja nicht. So. Und in dem Moment, sieht man ganz genau, welche Wischgeste oder welche Bewegung der spätere Benutzer ausführen soll, so meine Idee. Genauso kann man natürlich auch den, ich mach das mal wieder rückgängig, soweit wie möglich, oder machen wir es folgendermaßen, ich gehe hin und setze erstmal wieder den zweiten Pfeil hier ins Spiel und sage 70. Dann hole ich mir einfach den Punkte hier unten neu, setzen wir den in die Mitte. So, genau so kann ich natürlich auch meinen Pfeil genau auf die Diagonale setzen, um so zum Beispiel zu signalisieren, ich hab hier eine Bewegung, die der Benutzer machen kann, er kann einmal tippen, und er kann einmal zum Beispiel eine Bewegung nach außen machen, also um in Element hineinzuzoomen. Ja diese Wischgesten, die jetzt so mit den Fingern nach außen geführt werden, die können sie sogar auch in Form einer gestrichelten Linie darstellen. Da sehen Sie, da haben Sie hier den Strich mit 40 Punkten Länge und die Lücke, die mit 10 Punkten Länge angegeben ist. Auch da haben Sie alle Möglichkeiten, das zu definieren. Was tun, wenn man nun signalisieren möchte, dass die Bewegung nicht nach außen durchgeführt wird, sondern nach innen, also um wieder herauszuzoomen? Da empfehle ich einfach, die Pfeilspitzen umzudrehen, da finden sie hier unten an der Stelle, Pfeil 23, die entsprechenden Möglichkeiten So, Pfeil 23. Die entsprechenden Möglichkeiten, so, und das Ganze nochmal auf der anderen Seite. Und in dem Moment signalisiere ich, das ich tippen kann, aber ich kann zum Beispiel auch aus diesem Element heraus oder in dem Falle jetzt hineinzoomen. Also sie sehen, über dieses Bedienfeld Kontur haben Sie alle Möglichkeiten, die Gesten zu signalisieren. Ein kleiner Tipp noch mit dem Herein- und Herauszoomen: Wenn ich das einem Kunden oder einem Interessenten erklären muss und es reicht nicht einfach diese, ja, eine Richtung zu zeigen, dann gehe ich auch gerne hin und leg mir zwei Elemente in unterschiedlichen Ebenen an und switche einfach, eben ähnlich wie Sie das bereits kennen, zum Beispiel hier zwischen den einzelnen Punkten, hin und her. Und so kann ich dann auch signalisieren, das ist nicht nur ein Heraus-, sondern auch ein Hereinzoomen. Aber in ganz vielen Fällen reicht es natürlich aus, zu signalisieren, was man sich überhaupt als Bewegung mit den Fingern oder mit einer Maus oder mit einem Stift gedacht hat, und da ist diese Konturen-Bedienpalette hervorragend geeignet, für die eigenen Ideen zu visualisieren.

Illustrator CC für Webdesigner: Wireframing

Lernen Sie, wie Sie die Boardwerkzeuge von Illustrator CC nutzen, um aus ihren Design-Ideen Wireframes zu erstellen

2 Std. 14 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:20.06.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!