Share
Modale Boxen gehören zu den effektivsten Designelementen, die ein Webdesigner einsetzen kann. Heute definieren wir eine modale Box ist… dann schauen wir uns die besten Möglichkeiten an, um sie einzusetzen, und schlagen eine Handvoll unserer Lieblingsskripte vor, um sie in Ihren eigenen Projekten einzusetzen.
Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im März 2011 veröffentlicht.
Einfach ausgedrückt ist ein modaler Rahmen ein Skripteffekt, mit dem Sie ein kleines Element über einer Website überlagern können. Der Hauptvorteil von modalen Boxen ist, dass sie die Verwendung herkömmlicher Fenster-Popups oder das Neuladen von Seiten vermeiden. Kurz gesagt, modale Dialogfenster sind ein Mittel, um Benutzern auf derselben Seite, auf der sie gerade arbeiten, Informationen zur Verfügung zu stellen, um so die Benutzerfreundlichkeit Ihrer Website zu verbessern und unnötiges Neuladen der Seite zu vermeiden.
Es ist also eine Lightbox, richtig? Nun, nicht genau. Ein Leuchtkasten ist ein Art der modalen Box Dies ist für die Anzeige von Bildern (und manchmal auch für andere Formen von Inhalten) gedacht, aber das Wort "Modal Box" bezieht sich auf eine viel breitere Gruppe von Benutzeroberflächengeräten, die wir besprechen werden.
Modale Boxen haben ihren Ursprung in Schnittstellenanwendungen wie Microsoft Windows, Mac OS und UNIX. In letzter Zeit haben sie sich jedoch in allen möglichen Situationen verbreitet - von Websites bis zu mobilen Anwendungen.
Ein allgemeines modales Feld kann Javascript verwenden, um einen modalen "Dialog" oder "Assistenten" zu erstellen, der sich auf Formulare bezieht, in denen Benutzer normalerweise nach Informationen gefragt werden, die für das, was sie durchsuchen, relevant sind. Wenn Sie beispielsweise bei Facebook sind, wird möglicherweise ein modales Dialogfeld angezeigt, in dem Sie um Erlaubnis zur Verwendung einer App gefragt werden. Oder Ihre Bankwebsite startet möglicherweise eine modale Box, um Sie darüber zu informieren, wenn Ihre Sitzung kurz vor dem Ende steht.
Es gibt fünf situative Kategorien, in denen häufig modale Boxen verwendet werden:
Nun, da wir wissen, was eine modale Box ist, wollen wir den Unterschied zwischen einer modalen Box und ihrem Cousin, der Modelllose Box.
Bevor wir fortfahren, klären wir ein möglicherweise verwirrendes Stück Terminologie in der Welt der Benutzeroberflächendesigns auf: den Unterschied zwischen modal und Modelllose (aka nicht modale) Designelemente.
Modale Dialogfelder erlauben Benutzern nicht, mit dem übergeordneten Fenster zu arbeiten, sobald sie aufgerufen werden. Während Modelllose In Dialogfeldern können Benutzer auf das übergeordnete Fenster zugreifen, auch nachdem sie aufgerufen wurden.
Ein Benutzer muss das modale Dialogfeld in der Anwendung schließen, um auf Menüoptionen oder andere Dialogfelder zugreifen zu können. Das modelllose Dialogfeld kann jedoch geöffnet bleiben, während der Benutzer weiterarbeitet. In der grafischen Benutzeroberfläche wird das modale Fenster aufgerufen Kind Fenster, und es soll den Benutzer auf Notfallsituationen aufmerksam machen.
Übliche modelllose Designelemente können Folgendes umfassen:
Eine gute Analogie wäre es, eine modelllose Box mit einem guten Freund zu vergleichen, der in einer schwierigen Situation immer zur Verfügung steht, aber keinen hohen Wartungsaufwand oder hohe Anforderungen stellt Sie lassen alles fallen, um sie sofort zu hören.
Ebenso sollten modale Boxen beim Start nur in Situationen verwendet werden, in denen sie wirklich notwendig sind.
Zum Beispiel: Es ist wichtig, die Benutzer darüber zu informieren, dass sie ihr Passwort aus Sicherheitsgründen sofort ändern müssen. Verwenden Sie in diesem Szenario ein modales Feld. Die Information der Benutzer darüber, dass Sie gerade ein neues E-Book gestartet haben, ist wahrscheinlich nicht wichtig genug, um eine modale Box zu gewährleisten - Sie könnten dies möglicherweise auf andere kreative Weise auf der Seite anzeigen.
Modelllose Felder werden verwendet, wenn die angeforderten Informationen nicht zwingend erforderlich sind, damit das Fenster geöffnet bleiben kann, während die Arbeit fortgesetzt wird. Beispielsweise ist eine Symbolleiste ein modellloses Dialogfeld,
und seine Elemente können verwendet werden, um bestimmte Funktionen der Anwendung auszuwählen. Normalerweise würde ein ideales Softwaredesign diese Art von Dialogfeldern so weit wie möglich aufrufen. Sie zwingen den Benutzer zu keinem
spezifische Arbeitsweise… bedeutet, dass sie in ihrem eigenen Tempo in der für sie passenden Reihenfolge arbeiten können.
Ein modales Dialogfeld stoppt jedoch vorübergehend die Interaktion mit der Software, die sie initiiert hat. Das Programm kann einige zusätzliche Informationen anfordern oder beabsichtigen, zu bestätigen, dass der Benutzer dies hat
beschlossen, mit einigen Maßnahmen fortzufahren, die gefährlich sein können.
Usability-Experten meinen, dass modale Dialoge keine guten Entwurfslösungen sind, da Fehler wahrscheinlicher sind. Benutzer könnten die Gewohnheit entwickelt haben
Sie werden verworfen, wenn unerwartete modale Dialogfelder angezeigt werden. So werden gefährliche Handlungen eigentlich nicht vermieden.
Hier ist ein weiteres mögliches Problem, das Sie beachten sollten: Modale Boxen beeinträchtigen den normalen Arbeitsablauf. Ein modales Dialogfeld unterbricht den Hauptworkflow, da das darunterliegende übergeordnete Fenster eingefroren wird. Meist kann es verschoben oder in der Größe verändert werden, aber es kann nicht minimiert werden. Darüber hinaus kann der Benutzer nicht auf andere Fenster verweisen, während er auf das Dialogfeld reagiert.
Weitere Probleme können auftreten: Ein modales Fehlerdialogfeld wird beim Eingeben möglicherweise unerwartet angezeigt, und die Eingabe wird verworfen. Bei Verwendung in Anwendungen, die Tastaturbefehle verwenden, können modale Fenster Tastatureingaben möglicherweise falsch interpretieren. Dies wird als Fokusdiebstahl bezeichnet… Modale Fenster dienen dazu, die Aufmerksamkeit der Benutzer zu stehlen… aber die Verwendung von ihnen kann frustrierend werden, da sie zu viele Straßensperren eines Benutzers verursacht.
Die Quintessenz: Beginnen Sie ein Design immer, indem Sie versuchen, modelllose Boxen zu verwenden, wann immer Sie können. Sie sind unaufdringlich und ermöglichen einem Benutzer, auf seine eigene Weise zu arbeiten. Reservieren Sie modale Boxen für Zeiten, in denen es unbedingt erforderlich ist, Informationen zu sammeln oder einen Benutzer auf etwas Dringendes hinzuweisen (und es wird viele dieser Zeiten geben!) Stellen Sie sich die modale Box als Ihre Geheimwaffe vor. Sie möchten sie erst einsetzen, wenn Sie Ihre anderen Gestaltungsmöglichkeiten ausgeschöpft haben, aber wenn Sie sie verwenden, werden Sie schnell aus der Klemme geraten.
Modale Boxen helfen dabei, den Benutzer auf wichtige Informationen aufmerksam zu machen. Lassen Sie mich einige Beispiele für Fälle nennen, in denen eine modale Box erforderlich ist:
Es ist großartig, über die Designaspekte von Modal-Boxen zu sprechen. Angenommen, Sie sind kein Javascript-Guru, der Zeilen mit benutzerdefiniertem Code von Grund auf neu erstellen kann, müssen Sie mit einem vorgefertigten Skriptpaket beginnen und von dort aus anpassen. Die gute Nachricht ist, dass es eine Unmenge an kostenlosen gibt - Sie müssen nur ein wenig nachforschen, um herauszufinden, welcher für Ihre Anforderungen am besten geeignet ist. Hier sind einige unserer Favoriten:
Der JQuery-UI-Dialog ist Teil der Hauptbenutzerbibliothek von jQuery - die im Wesentlichen eine Bibliothek von Effekten und Plugins ist, die auf jQuery basiert. Es ist über css anpassbar und kann in jedem Projekt ohne Einschränkungen implementiert werden. Dies ist wahrscheinlich das direkteste aller modalen Box-Skripts, da Sie direkt mit der jQuery-Skriptbibliothek arbeiten und nicht über Dritte. Sie können dieses Dialogfeld in fünf verschiedenen Formen verwenden: grundlegendes Dialogfeld, modales Dialogfeld, modale Nachricht, modale Bestätigung, modales Formular.
"prettyPhoto ist ein Klon von jQuery lightbox. Es unterstützt nicht nur Bilder, sondern auch Videos, Flash, YouTube und iframes. Es ist eine ausgewachsene Medien-Lightbox.
Es ist sehr einfach einzurichten und dennoch sehr flexibel, wenn Sie es etwas anpassen möchten. Außerdem ist das Skript in allen gängigen Browsern kompatibel, auch in IE6. "
ModalBox ist eine JavaScript-Technik zum Erstellen moderner (Web 2.0) modaler Dialoge oder sogar Assistenten (Sequenzen von Dialogen), ohne dass herkömmliche Popups und das Neuladen von Seiten verwendet werden. Es ist von den modalen Dialogen von Mac OS X inspiriert. Und ja, es kann auch nützlich sein, um größere Versionen von Bildern anzuzeigen.
Nyro ist einer der umfassendsten seiner Gruppe und konzentriert sich auf die einfache Anpassung und die Ermöglichung einer Vielzahl von Inhaltstypen.
ModalBox ist eine JavaScript-Technik zum Erstellen moderner (Web 2.0) modaler Dialoge oder sogar Assistenten (Sequenzen von Dialogen), ohne dass herkömmliche Popups und das Neuladen von Seiten verwendet werden. Es ist von den modalen Dialogen von Mac OS X inspiriert. Und ja, es kann auch nützlich sein, um größere Versionen von Bildern anzuzeigen.
Dies ist ein weiterer Leuchtkasten-Modus. FancyBox ist ein Tool zum Anzeigen von Bildern, HTML-Inhalten und Multimedia in einer "Lightbox" im Mac-Stil, die über die Webseite hinausragt.
Facebox ist eine leichtgewichtige Lightbox im Facebook-Stil, die Bilder, Divs oder ganze Remote-Seiten (über Ajax) inline auf der Seite und auf Anforderung anzeigen kann. Im Gegensatz zu Lightbox v2.0, das Prototype verwendet, wird die kompakte jQuery-Bibliothek als Engine verwendet.
Dies ist eigentlich ein kompletter Satz von jQuery-Laufwerkstools ... aus einem Skript, mit dem Sie bestimmte HTML-Elemente einem vollständigen Formularersteller zugänglich machen können.
Lightbox ist ein einfaches, unauffälliges Skript, mit dem Bilder auf der aktuellen Seite eingeblendet werden. Das Setup ist ein Kinderspiel und funktioniert mit allen modernen Browsern.
.
Einige Browser lassen nicht zu, dass Popup-Fenster modal sind, während andere die Erstellung von modalen Fenstern über verschiedene Methoden ermöglichen. Internet Explorer verwendet window-showModalDialog (), um a zu öffnen
modales Fenster. Ein solches Fenster wird geöffnet, wenn Internet Explorer ausgeführt wird, während andere Browser einen JavaScript-Fehler anzeigen. Mozilla-basierte Browser wie Firefox und Netscape 6 verwenden eine andere Methode
um anzuzeigen, dass das Dialogfeld vorne bleiben soll. Sie verwenden window.open mit einem zusätzlichen Attribut für Modal, obwohl es nicht wirklich modal ist, sondern das Fenster im Vordergrund bleiben lässt.
Die Realität ist, dass sich die meisten Designer nicht wirklich über die Feinheiten der Browser-Adoption Sorgen machen müssen, bis es Zeit für die Codierung ist. Die meisten modernen Browser unterstützen jedoch modale Boxen. Überprüfen Sie im Zweifelsfall die Dokumentation des Skripts, das Sie verwenden möchten, um zu überprüfen, ob die Liste der Browser, für die Sie es benötigen, funktioniert.
Okay, das ist es erstmal - können Sie in den Kommentaren Ihre eigenen modalen Lösungen posten!
Accentsconagua