{"id":129049,"date":"2018-02-22T14:43:15","date_gmt":"2018-02-22T13:43:15","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/events-and-interactions\/"},"modified":"2025-02-13T18:32:21","modified_gmt":"2025-02-13T17:32:21","slug":"events-and-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/ereignisse-interaktionen","title":{"rendered":"Ereignisse und Interaktionen"},"content":{"rendered":"<p>Verwandeln Sie Ihre wireframes in hochwertige interaktive Prototypen, indem Sie Ereignisse hinzuf\u00fcgen. In diesem Artikel erfahren Sie, wie Sie mit der Palette Ereignisse Interaktionen erstellen und verwenden k\u00f6nnen. <\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781845823\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h2><a id=\"how-events-work\"><\/a>Wie Ereignisse funktionieren<\/h2>\n<p>Ein Ereignis umfasst einen <strong>Ausl\u00f6ser<\/strong> und eine <strong>Aktion<\/strong>. Der <strong>Ausl\u00f6ser<\/strong> ist die Art und Weise, wie Sie mit Ihrem Prototyp interagieren, z. B. durch Klicken, Ziehen oder Bewegen der Maus \u00fcber ein Element. Die <strong>Aktion<\/strong> ist das Ergebnis, das nach dem Ausl\u00f6ser eintreten soll, z. B. die Verkn\u00fcpfung mit einem anderen Bildschirm oder die \u00c4nderung des Aussehens eines Elements.  <\/p>\n<p>Mit Ereignissen k\u00f6nnen Sie:<\/p>\n<ul>\n<li>Machen Sie fast jedes Element in Ihrem Prototyp interaktiv, einschlie\u00dflich Schaltfl\u00e4chen, Bilder und Text.<\/li>\n<li>L\u00f6sen Sie mehrere Aktionen f\u00fcr ein Element aus. So k\u00f6nnen Sie z.B. auf ein Rechteck klicken, seine Farbe \u00e4ndern und dieses Rechteck dann an eine andere Position auf dem Bildschirm verschieben. <\/li>\n<li>Erstellen Sie Interaktionen f\u00fcr ein Element, die sich auf ein anderes Element auswirken. Sie k\u00f6nnen zum Beispiel auf eine Schaltfl\u00e4che klicken und dann die Farbe eines Rechtecks auf dem Bildschirm \u00e4ndern.<br>Verwenden Sie verschiedene Ausl\u00f6ser f\u00fcr ein Element. Sie k\u00f6nnen z.B. auf ein Rechteck klicken und seinen Rand \u00e4ndern, und Sie k\u00f6nnen auch nach links \u00fcber dieses Rechteck streichen und es verschieben.  <\/li>\n<\/ul>\n<p>Sie k\u00f6nnen die Ergebnisse der Ereignisse, die Sie erstellt haben, sehen, indem Sie Ihren Prototyp simulieren. Klicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um einen Simulationsbrowser zu starten, in dem Sie mit Ihrem Prototyp interagieren k\u00f6nnen. Schlie\u00dfen oder minimieren Sie den Browser einfach, um zum Editor zur\u00fcckzukehren.  <\/p>\n<h2><a id=\"create-an-event\"><\/a>Ein Ereignis erstellen<\/h2>\n<p>W\u00e4hrend Sie <strong>Links<\/strong> ganz einfach durch Ziehen und Ablegen erstellen k\u00f6nnen (Link zum Abschnitt Erste Schritte), werden Sie die meisten Ereignisse in der Palette Ereignisse erstellen. Wenn Sie die Ereignispalette nicht sehen, vergewissern Sie sich, dass sie im Men\u00fc Fenster sichtbar ist. <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/View-Events-palette.png\" alt=\"Sie k\u00f6nnen die Palette der Ereignisse, die angezeigt werden sollen, im Men\u00fc Fenster aktivieren\" width=\"1091\" height=\"461\"><br>Um ein Ereignis zu erstellen:<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742193649\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>W\u00e4hlen Sie ein Element auf dem Canvas aus.<\/li>\n<li>Klicken Sie auf die Schaltfl\u00e4che &#8218;Ereignis hinzuf\u00fcgen&#8216; oder &#8218;+&#8216; in der Palette Ereignisse. Sie k\u00f6nnen auch mit der rechten Maustaste auf ein Element klicken und &#8218;Ereignis hinzuf\u00fcgen&#8216; w\u00e4hlen. <\/li>\n<li>Das Dialogfeld Ereignisse wird angezeigt. Klicken Sie auf das Dropdown-Men\u00fc &#8218;Ausl\u00f6ser w\u00e4hlen&#8216; und w\u00e4hlen Sie einen Ausl\u00f6ser, den Sie verwenden m\u00f6chten. Wenn Sie zum Beispiel m\u00f6chten, dass das Ereignis ausgel\u00f6st wird, wenn Sie auf ein Element klicken, w\u00e4hlen Sie <strong>Bei Klick<\/strong>.  <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43604\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-trigger.png\" alt=\"W\u00e4hlen Sie einen Ausl\u00f6ser f\u00fcr die Aktion aus der Dropdown-Liste\" width=\"1087\" height=\"683\">\n<p>&nbsp;<\/p>\n<div><strong>Hinweis:<\/strong> Bei den Prototypen f\u00fcr Mobiltelefone und Tablets wird <strong>On Click<\/strong> zu <strong>On Tap<\/strong>.<\/div>\n<p><a href=\"https:\/\/www.justinmind.com\/de\/support\/interactions-and-animations#event-triggers-for-mobile-prototypes\">Schauen Sie sich eine Beschreibung der einzelnen Ausl\u00f6ser an<\/a>.<\/p>\n<\/li>\n<li>Als n\u00e4chstes wird das Dropdown-Men\u00fc &#8218;Aktion&#8216; angezeigt. Klicken Sie darauf und w\u00e4hlen Sie eine entsprechende Aktion. Sie k\u00f6nnen zum Beispiel <strong>Stil \u00e4ndern<\/strong> w\u00e4hlen.  <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-action.png\" alt=\"W\u00e4hlen Sie eine resultierende Aktion aus dem Dropdown-Men\u00fc der Aktionen\" width=\"1190\" height=\"754\"><br><a href=\"https:\/\/www.justinmind.com\/de\/support\/interactions-and-animations#actions-for-web-and-mobile-prototypes\">Sehen Sie sich eine Beschreibung jeder Aktion an<\/a>.<\/li>\n<li>Je nachdem, welche Aktion Sie w\u00e4hlen, sehen Sie als N\u00e4chstes ein paar unterschiedliche Dinge. Bei <strong>Stil \u00e4ndern<\/strong> sehen Sie eine Vorschau des Bildschirms Canvas. Hier k\u00f6nnen Sie ausw\u00e4hlen, welches Element des Bildschirms nach Ihrem Klick sein Aussehen \u00e4ndern soll.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43606\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-target-of-action.png\" alt=\"W\u00e4hlen Sie das Ziel der Aktion in der Leinwandvorschau\" width=\"1340\" height=\"842\"><\/li>\n<li>F\u00fcr eine Aktion <strong>Stil \u00e4ndern<\/strong> k\u00f6nnen Sie einige Elementeigenschaften, wie Hintergrund- oder Rahmenfarben, die ge\u00e4ndert werden sollen, aus der Dropdown-Liste unten ausw\u00e4hlen. Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43607\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Change-styles.png\" alt=\"W\u00e4hlen Sie die zu \u00e4ndernden Stile aus den Dropdowns\" width=\"1116\" height=\"873\"><\/li>\n<\/ol>\n<p>Sie sehen das soeben erstellte Ereignis in der Palette Ereignisse. Au\u00dferdem sehen Sie neben dem Element, dem Sie ein Ereignis hinzugef\u00fcgt haben, auf dem Canvas das Symbol &#8222;Bolzen&#8220;. <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43608\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Event-bolt-icon.png\" alt=\"Sehen Sie ein Bolzensymbol, wenn Sie ein Ereignis hinzugef\u00fcgt haben\" width=\"1280\" height=\"755\"><br>Klicken Sie auf die Schaltfl\u00e4che &#8222;Abspielen&#8220;, um Ihren Prototyp zu simulieren und die von Ihnen erstellte Interaktion zu testen.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/preview-first-event.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" preview-first-event.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/preview-first-event.png\" alt=\"Simulieren Sie\">Simulieren Sie<\/video><\/p>\n<h2><a id=\"details-events-palette\"><\/a>Details der Ereignis-Palette<\/h2>\n<p>In der Palette Ereignisse k\u00f6nnen Sie nicht nur die von Ihnen erstellten Ereignisse anzeigen, sondern auch eine Reihe von Aktionen durchf\u00fchren:<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43610\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/events-palette.png\" alt=\"Sehen Sie sich verschiedene Details der Veranstaltungspalette an\" width=\"976\" height=\"494\"><\/p>\n<ol class=\"image-bullet\">\n<li>Erstellen Sie eine neue Interaktion.<\/li>\n<li>Der Name der Interaktion. Doppelklicken Sie darauf, um ihn umzubenennen. <\/li>\n<li>Interaktionsbedingungen. Definieren Sie, wann die unten aufgef\u00fchrten Aktionen stattfinden sollen oder nicht. Erfahren Sie mehr \u00fcber Bedingungen (Link zum Lernprogramm \u00fcber Bedingungen).  <\/li>\n<li>Betrachten Sie eine Aktion. Doppelklicken Sie, um das Dialogfeld Ereignisse zu \u00f6ffnen und es zu bearbeiten. W\u00e4hlen Sie eine Aktion aus und dr\u00fccken Sie die L\u00f6schtaste, um die Aktion zu entfernen. Halten Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows) gedr\u00fcckt, um Aktionen mehrfach auszuw\u00e4hlen.   <\/li>\n<li>Die Reihenfolge der Aktionen. Standardm\u00e4\u00dfig werden die Aktionen nacheinander in der Reihenfolge ausgef\u00fchrt, in der Sie sie erstellt haben. Sie k\u00f6nnen sie auch so \u00e4ndern, dass sie gleichzeitig oder nach einer von Ihnen festgelegten Dauer ausgef\u00fchrt werden. Ziehen Sie eine Aktion und legen Sie sie ab, um ihre Position vor oder hinter anderen Aktionen zu verschieben.   <\/li>\n<li>F\u00fcgen Sie eine weitere Aktion mit demselben Ausl\u00f6ser hinzu.<\/li>\n<\/ol>\n<h2>Anleitungen: Lernen Sie Schritt f\u00fcr Schritt, wie Sie g\u00e4ngige Anwendungsf\u00e4lle designen.<\/h2>\n<p>Sehen Sie sich die folgenden Beispiele an und erfahren Sie, wie Sie in Justinmind g\u00e4ngige UX\/UI-Interaktionen mit Ereignissen erstellen k\u00f6nnen.<\/p>\n<p>Im Dialogfeld Ereignisse definieren Sie Ausl\u00f6ser, d. h. die Art und Weise, wie Sie mit einem Prototyp interagieren (Klick, Mouseover usw.), und Aktionen, d. h. was nach dem Ausl\u00f6ser geschieht (Farbe \u00e4ndern, verschieben usw.).<\/p>\n<p>Sie k\u00f6nnen alle Interaktionen, die Sie erstellen, visualisieren, indem Sie Ihre Prototypen simulieren.<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43131\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/07\/Simulate-Prototype.png\" alt=\"Klicken Sie auf die Schaltfl\u00e4che Abspielen, um einen Prototyp zu simulieren.\" width=\"1193\" height=\"532\"><\/p>\n<h2><a id=\"swipe-screens\"><\/a>Durch die Bildschirme wischen<\/h2>\n<p>Verwenden Sie Gestenausl\u00f6ser und \u00dcbergangseffekte, um eine reibungslose und naturgetreue Bildschirmnavigation zu erstellen.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/swipe-example-1.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" swipe-example-1.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/swipe-example-1.png\" alt=\"Durch die Bildschirme wischen\">Wischen Sie durch die Bildschirme<\/video><\/p>\n<ol>\n<li>Erstellen Sie einen Prototyp f\u00fcr ein Handy oder Tablet mit zwei Bildschirmen.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43682\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-2-screens.png\" alt=\"Erstellen Sie einen Prototyp mit 2 Bildschirmen\" width=\"1310\" height=\"762\"><\/li>\n<li>Gehen Sie zu Bildschirm 1 und doppelklicken Sie auf den Canvas oder w\u00e4hlen Sie den Bildschirm in der Ebenenpalette aus. Dadurch wird der Basisbildschirm Canvas ausgew\u00e4hlt. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43683\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Select-screen.png\" alt=\"W\u00e4hlen Sie den Basisbildschirm aus, indem Sie ihn in der Ebenenpalette anklicken\" width=\"1309\" height=\"762\"><\/li>\n<li>Sehen Sie sich die Palette Ereignisse an und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;, wodurch sich der Dialog Ereignisse \u00f6ffnet. Hier stellen Sie die Verbindung zwischen den Bildschirmen her. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43684\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-add-event.png\" alt=\"Klicken Sie auf Ereignis hinzuf\u00fcgen in der Ereignispalette\" width=\"796\" height=\"522\"><\/li>\n<li>Bewegen Sie den Mauszeiger in der Dropdown-Liste &#8218;Ausl\u00f6ser w\u00e4hlen&#8216; \u00fcber den Bereich <strong>Gesten<\/strong> und w\u00e4hlen Sie den Ausl\u00f6ser <strong>On Swipe Left<\/strong>.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43685\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-trigger.png\" alt=\"W\u00e4hlen Sie den Ausl\u00f6ser bei Wischen nach links aus der Dropdown-Liste der Ausl\u00f6ser\" width=\"1087\" height=\"683\"><\/li>\n<li>Als n\u00e4chstes wird das Dropdown-Men\u00fc &#8218;Aktion ausw\u00e4hlen&#8216; angezeigt. Klicken Sie darauf und w\u00e4hlen Sie die Aktion <strong>Navigieren zu<\/strong>. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43686\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-Nav-action.png\" alt=\"W\u00e4hlen Sie eine Aktion aus der Dropdown-Liste der Aktionen aus, zu denen Sie navigieren m\u00f6chten.\" width=\"1088\" height=\"688\"><\/li>\n<li>W\u00e4hlen Sie Bildschirm 2 aus der Liste der Bildschirme unten. W\u00e4hlen Sie dann den \u00dcbergangseffekt &#8218;Dia links&#8216;.  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses zu beenden.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43687\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Slide-left-transition.png\" alt=\"W\u00e4hlen Sie Bildschirm 2 und f\u00fcgen Sie eine Bedingung f\u00fcr das Streichen nach links aus der Dropdown-Liste hinzu.\" width=\"1086\" height=\"822\"><\/li>\n<li>Gehen Sie zu Bildschirm 2 und w\u00e4hlen Sie den Basisbildschirm. Gehen Sie zur Palette Ereignisse und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;. <\/li>\n<li>W\u00e4hlen Sie einen Ausl\u00f6ser <strong>&#8222;Nach rechts streichen<\/strong> &#8220; und eine Aktion <strong>&#8222;Navigieren zu&#8220;<\/strong> und w\u00e4hlen Sie Bildschirm 1 als Verkn\u00fcpfung. F\u00fcgen Sie einen \u00dcbergangseffekt &#8218;Nach rechts streichen&#8216; hinzu und klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses abzuschlie\u00dfen. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43688\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-right-event.png\" alt=\"W\u00e4hlen Sie eine Aktion auf Bildschirm 2 und verlinken Sie zu Bildschirm 1 mit einem Rechtsschiebeeffekt.\" width=\"1087\" height=\"684\"><\/li>\n<\/ol>\n<p>Sie sollten nun insgesamt zwei Ereignisse haben &#8211; eines auf Bildschirm 1, das Sie mit Bildschirm 2 verbindet, und eines auf Bildschirm 2, das Sie mit Bildschirm 1 verbindet.<\/p>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihren Prototyp zu simulieren und zu sehen, wie Sie zwischen den Bildschirmen hin und her wischen k\u00f6nnen.<\/p>\n<h2><a id=\"hide-content\"><\/a>Inhalt ausblenden<\/h2>\n<p>Als n\u00e4chstes lernen Sie, wie Sie Ereignisse erstellen, um Elemente auf dem Bildschirm auszublenden.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" alt=\"Beispiel Inhalt ausblenden\">Beispiel f\u00fcr<\/video> das Ausblenden vonInhalten<\/p>\n<ol>\n<li>Platzieren Sie eine Schaltfl\u00e4che <kbd>B<\/kbd> und ein Bild <kbd>I<\/kbd> auf dem Canvas und gestalten Sie sie wie gew\u00fcnscht. Sie finden sie in der Symbolleiste und beschriften die Schaltfl\u00e4che &#8222;Bild ausblenden&#8220;. <\/li>\n<li>W\u00e4hlen Sie die Schaltfl\u00e4che &#8222;Bild ausblenden&#8220;, gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43690\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-add-event.png\" alt=\"Klicken Sie auf Ereignis hinzuf\u00fcgen und w\u00e4hlen Sie die Schaltfl\u00e4che Bild ausblenden\" width=\"879\" height=\"506\"><\/li>\n<li>Folgen Sie den nachstehenden Schritten, um das Ereignis zu erstellen:<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event.png\" alt=\"Ereignis ausblenden\">Ereignis ausblenden<\/video>\n<p>&nbsp;<\/p>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Bewegen Sie den Mauszeiger in der Dropdown-Liste Ausl\u00f6ser \u00fcber den Abschnitt <strong>Tippen<\/strong> und w\u00e4hlen Sie einen <strong>On-Tap-Ausl\u00f6ser<\/strong>.\n<div><strong>Hinweis:<\/strong> Wenn Sie einen Web-Prototyp verwenden, wird On Tap stattdessen als <strong>On Click<\/strong> aufgef\u00fchrt.<\/div>\n<\/li>\n<li><strong>b.<\/strong> W\u00e4hlen Sie in der Dropdown-Liste Aktion die Aktion <strong>Element ausblenden<\/strong>. Sie sehen dann eine Vorschau des Canvas. <\/li>\n<li><strong>c.<\/strong>  Hier k\u00f6nnen Sie das Ziel der Aktion ausw\u00e4hlen &#8211; das Element, das Sie ausblenden m\u00f6chten, wenn Sie auf die Schaltfl\u00e4che &#8222;Bild ausblenden&#8220; tippen. W\u00e4hlen Sie das Bild, das Sie zuvor erstellt haben.  Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses zu beenden.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8222;Abspielen&#8220;, um Ihren Prototyp zu simulieren. Tippen Sie auf die Schaltfl\u00e4che &#8222;Bild ausblenden&#8220; und sehen Sie, wie das Bild verschwindet. <\/p>\n<h2><a id=\"mouse-over-effects\"><\/a>Mouse-over-Effekte<\/h2>\n<p>Hier erfahren Sie, wie Sie ein <strong>On Mouse Over-Ereignis<\/strong> erstellen und das Aussehen einer Schaltfl\u00e4che \u00e4ndern k\u00f6nnen.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" mouse-over-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" alt=\"Beispiel: Maus \u00fcber die Schaltfl\u00e4che\">Beispiel f\u00fcr eine Mouse Over-Schaltfl\u00e4che<\/video><\/p>\n<ol>\n<li>Erstellen Sie einen neuen Web-Prototyp. Prototypen f\u00fcr Mobilger\u00e4te und Tablets sind f\u00fcr dieses Beispiel nicht geeignet, da Sie nicht mit der Maus \u00fcber einen Touchscreen fahren k\u00f6nnen. <\/li>\n<li>Platzieren Sie eine Schaltfl\u00e4che <kbd>B<\/kbd> auf dem Canvas und gestalten Sie sie wie gew\u00fcnscht.<\/li>\n<li>Wenn Sie die Schaltfl\u00e4che auf dem Canvas ausgew\u00e4hlt haben, gehen Sie zur Palette Ereignisse und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;.<\/li>\n<li>Folgen Sie diesen Schritten, um das Ereignis zu erstellen:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Bewegen Sie den <strong>Mauszeiger<\/strong> in der Dropdown-Liste Ausl\u00f6ser \u00fcber den Abschnitt <strong>Maus<\/strong> und w\u00e4hlen Sie den Ausl\u00f6ser <strong>Bei Mausber\u00fchrung<\/strong>.<\/li>\n<li><strong>b.<\/strong> W\u00e4hlen Sie in der Dropdown-Liste Aktion die Aktion <strong>Stil \u00e4ndern<\/strong>.<\/li>\n<li><strong>c.<\/strong>  W\u00e4hlen Sie die Schaltfl\u00e4che als Ziel der Aktion in der Canvas-Vorschau. Darunter wird ein Dropdown-Men\u00fc angezeigt, in dem Sie die Stile des Elements, das Sie \u00e4ndern m\u00f6chten, angeben k\u00f6nnen. <\/li>\n<\/ul>\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742201294\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>F\u00fcr dieses Beispiel \u00e4ndern Sie die Hintergrundfarbe.<\/p>\n<\/li>\n<\/ol>\n<p>Klicken Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses zu beenden.<\/p>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Play&#8216;, um Ihren Prototyp zu simulieren. Bewegen Sie die Maus \u00fcber die Schaltfl\u00e4che und sehen Sie, wie sie ihre Farbe \u00e4ndert. Bewegen Sie die Maus weg und Sie werden sehen, dass die Schaltfl\u00e4che wieder ihre urspr\u00fcngliche Farbe annimmt.  <\/p>\n<h2><a id=\"drag-and-drop\"><\/a>Ziehen und ablegen<\/h2>\n<p>Sie k\u00f6nnen auch Interaktionen zum Ziehen und Ablegen von Elementen auf dem Canvas erstellen. So geht&#8217;s: <br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-rectangle-example-1.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-rectangle-example-1.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-rectangle-example-1.png\" alt=\"Ziehen und ablegen\">Ziehen und ablegen<\/video><\/p>\n<ol>\n<li>Platzieren Sie ein Rechteck <kbd>R<\/kbd> auf dem Canvas und gestalten Sie es nach Belieben.<\/li>\n<li>W\u00e4hrend das Rechteck noch ausgew\u00e4hlt ist, gehen Sie zur Palette Ereignisse und klicken Sie auf &#8218;Ereignis hinzuf\u00fcgen&#8216;.<\/li>\n<li>Folgen Sie diesen Schritten, um das Ereignis zu erstellen:\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742269298\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Bewegen Sie den <strong>Mauszeiger<\/strong> in der Dropdown-Liste Ausl\u00f6ser auf den Abschnitt <strong>Maus<\/strong><strong>(On Tap<\/strong> f\u00fcr Mobile\/Tablet) und w\u00e4hlen Sie den Ausl\u00f6ser <strong>On Drag<\/strong>.<\/li>\n<li><strong>b.<\/strong> W\u00e4hlen Sie in der Dropdown-Liste Aktion die Aktion <strong>Element verschieben<\/strong>.<\/li>\n<li><strong>c.<\/strong>  Es erscheint eine Canvas-Vorschau, in der Sie das Rechteck als Ziel der Aktion ausw\u00e4hlen k\u00f6nnen.<\/li>\n<li><strong>d.<\/strong>  Klicken Sie auf das Dropdown-Men\u00fc X (horizontale Bewegung) und w\u00e4hlen Sie die Option &#8218;Mit Cursor&#8216; aus. Klicken Sie auf das Dropdown-Men\u00fc Y (vertikale Bewegung) und w\u00e4hlen Sie ebenfalls die Option &#8218;Mit Cursor&#8216; aus.Mit diesen beiden Optionen k\u00f6nnen Sie das Rechteck beim Simulieren mit der Maus bewegen. Tippen Sie auf &#8218;OK&#8216;, um die Erstellung des Ereignisses zu beenden. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Klicken Sie auf die Schaltfl\u00e4che &#8218;Abspielen&#8216;, um Ihren Prototyp zu simulieren. Ziehen Sie das Rechteck, um es auf dem Bildschirm zu bewegen. Lassen Sie das Rechteck fallen, um seine Bewegung zu stoppen.  <\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Verwandeln Sie Ihre wireframes in hochwertige interaktive Prototypen, indem Sie Ereignisse hinzuf\u00fcgen. In diesem Artikel erfahren Sie, wie Sie mit der Palette Ereignisse Interaktionen erstellen und&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8556],"tags":[],"class_list":["post-129049","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-web-mobile-interaktionen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129049"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129049"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129049\/revisions"}],"predecessor-version":[{"id":129192,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129049\/revisions\/129192"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}