Share
Modulele de cutii sunt printre cele mai eficiente elemente de design "bang pentru buck" pe care un designer web le poate folosi. Astăzi vom defini o casetă modală ... atunci vom examina cele mai bune modalități de utilizare a acestora și vom sugera o serie de scripturi preferate pentru a le angaja în propriile proiecte.
La fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima dată în martie 2011.
Puneți pur și simplu, o casetă modală este un efect scriptat care vă permite să suprapuneți un element mic pe un site web. Beneficiul principal al cutiilor modale îl constituie evitarea necesității de a folosi ferestrele pop-up convenționale sau reîncărcările de pagină. Pe scurt, ferestrele de dialog modale reprezintă un mijloc de a afișa rapid informații utilizatorilor de pe aceeași pagină pe care lucrează, îmbunătățind astfel gradul de utilizare a site-ului dvs. și diminuând reîncărcările inutile ale paginilor.
Deci, este o casetă Lightbox, corect? Nu exact. O casetă lightbox este a tip de cutie modală care a fost conceput pentru a afișa imagini (și uneori și alte forme de conținut), dar cuvântul căsuță modală se referă la un set mult mai larg de dispozitive de interfață cu utilizatorul, despre care vom discuta.
Cutii de modal își găsesc originea în aplicații de interfață, cum ar fi Microsoft Windows, Mac OS și UNIX, însă în ultimul timp s-au răspândit în tot felul de situații - de la site-uri web la aplicații mobile.
O casetă modală obișnuită ar putea folosi Javascript pentru a crea un "dialog" sau un "expert" modal, care se referă la formulare unde de obicei utilizatorii sunt rugați să obțină informații relevante pentru ceea ce navighează. De exemplu, dacă sunteți pe Facebook, ar putea apărea o casetă de dialog modală pentru a solicita permisiunea de a utiliza o aplicație. Sau site-ul dvs. bancar ar putea lansa o cutie modală pentru a vă informa când sesiunea este pe cale să se termine.
Există cinci categorii situaționale în care sunt folosite cutii modale:
Acum, că știm ce este o cutie modală, să discutăm diferența dintre o cutie modală și vărul ei Fără mod cutie.
Înainte de a merge mai departe, să clarificăm un bit potențial confuz de terminologie în lumea designului interfeței cu utilizatorul: diferența dintre modal și Fără mod (aka non-modale).
Modulele de dialog modale nu vor permite utilizatorilor să lucreze cu fereastra părinte după ce sunt invocate; In timp ce Fără mod casetele de dialog vor permite utilizatorilor să acceseze fereastra părinte, chiar și după ce vor fi invocate.
Un utilizator trebuie să închidă dialogul modal din cadrul aplicației pentru a accesa opțiunile de meniu sau alte casete de dialog; Dar caseta de dialog fără moduri poate fi lăsată deschisă în timp ce utilizatorul continuă să funcționeze. În designul interfeței cu utilizatorul grafic, este apelată fereastra modală copil fereastră și este menită să atragă atenția utilizatorului asupra situațiilor de urgență.
Elementele de design comune fără elemente pot include:
O analogie bună ar fi să comparăm o cutie fără mod de lucru cu un bun prieten care este întotdeauna disponibil pentru a ajuta într-o situație dificilă, dar nu este o întreținere ridicată sau o cerință ... unde o cutie modală este acel prieten enervant care îți cere imediat atenția și forțele să renunți la toate pentru a le asculta la fața locului.
De asemenea, casetele modale, atunci când sunt lansate, ar trebui utilizate numai în situațiile în care acestea sunt cu adevărat necesare.
De exemplu: Informarea utilizatorilor că trebuie să își schimbe parola imediat din motive de securitate este importantă - utilizați o casetă modală în acest scenariu. Informarea utilizatorilor că tocmai ați lansat o nouă carte electronică probabil că nu este suficient de importantă pentru a justifica o căsuță modală - așadar, probabil că ați putea anunța acest lucru într-un alt mod creativ pe pagină.
Modulele fără casete sunt utilizate dacă informațiile solicitate nu sunt obligatorii pentru a continua, astfel încât fereastra poate fi lăsată deschisă în timp ce lucrarea este continuată. De exemplu, o bară de instrumente este o casetă de dialog fără moduri,
și elementele sale pot fi folosite pentru a alege anumite caracteristici ale aplicației. În mod normal, un design software ideal ar invoca aceste tipuri de casete de dialog cât mai mult posibil. Nu obligă utilizatorul la nici unul
mod specific de funcționare ... ceea ce înseamnă că aceștia pot lucra în ritm propriu, în ordinea în care se potrivește.
Cu toate acestea, o casetă de dialog modală oprește temporar interacțiunea cu software-ul, care a inițiat-o. Programul poate solicita informații suplimentare sau poate intenționa să confirme că utilizatorul are
a decis să continue cu unele acțiuni care ar putea fi periculoase.
Experții în utilități consideră că dialogurile modale nu sunt soluții de design bune, deoarece erorile sunt mult mai probabile. Utilizatorii s-ar fi putut dezvolta obiceiul de a
respingându-le atunci când ferestrele de dialog modeste neașteptate sunt pop-up. Astfel, acțiunile periculoase nu sunt de fapt evitate.
Iată o altă problemă potențială: Căsuțele modale interferează cu fluxul obișnuit de lucru. O casetă de dialog modală întrerupe fluxul de lucru principal, deoarece fereastra parentală de bază este înghețată. De cele mai multe ori poate fi mutat sau redimensionat, dar nu poate fi minimizat. În plus, utilizatorul nu se poate referi la alte ferestre, în timp ce răspunde la caseta de dialog.
Pot apărea probleme suplimentare: o casetă de dialog cu eroare modală poate apărea neașteptat în timpul introducerii, eliminând intrarea; Când este folosit în aplicații care utilizează comenzi de la tastatură, ferestrele modale pot interpreta greșit intrările de la tastatură. Aceasta se numește furt de focalizare... ferestrele modale sunt concepute pentru a fura un utilizator se concentreze ... dar suprasolicitarea lor poate deveni frustrant fiindcă aruncă prea multe blocaje din interiorul unui utilizator.
Linia de fund: Începeți întotdeauna un design prin încercarea de a utiliza cutii fără moduri ori de câte ori puteți ... acestea sunt neintruzătoare și permit unui utilizator să lucreze în felul lor. Rezervă cutii modale pentru momentele în care este absolut necesar să se adune informații sau să se alerteze un utilizator la ceva urgent (și vor fi multe din aceste vremuri!) Gândiți-vă la caseta modală ca arma secretă ... nu doriți să o utilizați până când nu vă epuizați celelalte opțiuni de design, dar atunci când o utilizați, vă va scoate dintr-o legătură rapidă.
Dulapurile modale ajută la atragerea atenției utilizatorului asupra informațiilor cruciale. Permiteți-mi să vă dau câteva exemple de cazuri în care este necesară o căsuță modală:
Vorbind despre aspectele de proiectare ale cutiilor modale este minunat ... dar trecerea la afaceri și, de fapt, utilizarea acestora este o altă chestiune în întregime. Presupunând că nu sunteți un guru Javascript care poate bate linii de cod personalizat de la zero, va trebui să începeți cu un pachet de script pre-construit și personalizați de acolo. Vestea bună este că există o cantitate de tone gratuite disponibile - trebuie doar să faceți o cercetare suplimentară pentru a determina care dintre ele se potrivește cel mai bine nevoilor dvs. Iată câteva dintre favoritele noastre:
Dialogul JQuery UI face parte din biblioteca principală jQuery UI - care în esență este o bibliotecă de efecte și pluginuri construite pe jQuery. Este personalizabil prin css și poate fi implementat în orice proiect fără restricții. Este probabil cel mai direct dintre toate scripturile din cutia modală, în sensul că lucrați direct cu biblioteca script-ului jQuery, nu prin intermediul unei terțe părți. Puteți utiliza această casetă de dialog în cinci forme diferite: dialog de bază, dialog modal, mesaj modal, confirmare modală, formă modală.
"prettyPhoto este o clona a lightbox-ului jQuery, nu numai că suportă imagini, ci și suport pentru videoclipuri, flash, YouTube, iframe..
Este foarte ușor de configurat, dar foarte flexibil dacă doriți să îl personalizați puțin. În plus, scriptul este compatibil în fiecare browser major, chiar IE6. "
ModalBox este o tehnică JavaScript pentru crearea de dialoguri modale moderne (în stilul Web 2.0) sau chiar de vrăjitori (secvențe de dialoguri) fără a utiliza ferestrele pop-up convenționale și reîncărcările de pagină. Este inspirat de dialogurile modale Mac OS X. Și da, ar putea fi de asemenea util pentru afișarea unor versiuni mai mari ale imaginilor.
Una dintre cele mai cuprinzătoare din buchet, Nyro se concentrează pe ușurința de personalizare și permite o gamă largă de tipuri de conținut.
ModalBox este o tehnică JavaScript pentru crearea de dialoguri modale moderne (în stilul Web 2.0) sau chiar de vrăjitori (secvențe de dialoguri) fără a utiliza ferestrele pop-up convenționale și reîncărcările de pagină. Este inspirat de dialogurile modale Mac OS X. Și da, ar putea fi de asemenea util pentru afișarea unor versiuni mai mari ale imaginilor.
Acesta este un alt modul de control al lightbox-ului. FancyBox este un instrument de afișare a imaginilor, conținutului html și a multi-media într-un "lightbox" în stil Mac, care plutește deasupra unei pagini Web.
Facebox este o căsuță ușoară în stil Facebook care poate afișa imagini, divize sau pagini întregi de la distanță (prin intermediul Ajax) în pagină și la cerere. Utilizează biblioteca compactă jQuery ca motor, spre deosebire de Lightbox v2.0, care folosește Prototype.
Acesta este de fapt un set complet de unelte de comandă jQuery ... dintr-un script care vă permite să expuneți anumite elemente HTML unui constructor de formular complet.
Cutia Lightbox este un script simplu, discret, folosit pentru a suprapune imagini pe pagina curentă. Este o instalare rapidă și funcționează pe toate browserele moderne.
.
Mai multe browsere nu permit ca ferestrele pop-up să fie modale, deși altele permit crearea de ferestre modale prin metode diferite. Internet Explorer folosește fereastra-showModalDialog () pentru a deschide a
modal. O astfel de fereastră se va deschide când rulează Internet Explorer, în timp ce alte browsere vor afișa o eroare JavaScript. Browserele bazate pe browserele Mozilla, cum ar fi Firefox și Netscape 6, utilizează o metodă diferită
pentru a indica faptul că caseta de dialog trebuie să rămână în față. Ei folosesc fereastra window with un atribut suplimentar pentru modal, deși nu este de fapt modal, dar permite ferestrei să rămână în față.
Realitatea este că majoritatea designerilor nu au nevoie de prea multă îngrijorare cu privire la complexitatea adoptării browser-ului până când este timpul să facă codificarea ... cele mai multe browsere moderne, de fapt, suportă casete modale. Când aveți dubii, consultați documentația pentru scriptul pe care doriți să o utilizați pentru a verifica dacă va funcționa pe lista specială de browsere de care aveți nevoie să lucreze pentru.
Bine, asta e pentru moment - nu ezitați să postați propriile dvs. soluții modale favorite în comentarii!
Accentsconagua