Formular de logare / înregistrare Idei și exemple frumoase

Pe tot parcursul web-ului modern, vedem o cantitate tot mai mare de locuri de intrare pentru utilizatori. Acestea includ cărucioare de cumpărături, jocuri interactive pe web și, cu siguranță, formulare de înregistrare a site-urilor web. Se pare că nu numai designerii ar trebui să se concentreze pe designul paginilor, ci și pe aspectul estetic.

Luați în considerare numărul de formulare pe care le-ați îndeplinit pe parcursul istoricului dvs. de Internet. Există nenumărate exemple de acestea din forumuri, panouri de mesaje, bloguri și multe altele. În acest articol vom examina câteva trucuri extraordinare pentru a vă proiecta formularele în pagină.

Este bine ca unele dintre ele să fie luate în considerare dintr-o perspectivă obiectivă. Deși multe formulare de înregistrare și de înregistrare funcționează bine cu un singur tip de site, nu există nicio decizie judecătorească definitivă cu privire la ceea ce este “Cel mai bun” soluţie. Utilizați-vă intuiția de design pentru a aplica biți și piese din formele spre care vă aspirați.

Luați în considerare multiple intrări

Pentru a începe lucrurile, luați în considerare un mic formular de contact de la Foundation Six Web Design. Da, acest lucru nu este un formular de autentificare, astfel încât să poată direcționa un pic din subiect. Cu toate acestea, design-ul paginilor este foarte impresionant și vă arată ce creație poate obține puțin.

Fiecare dintre câmpurile de introducere oferă spațiu pentru introducerea informațiilor personale de contact - nume, e-mail etc. Stilurile depășesc limitele obișnuite, oferind utilizatorilor intrări într-un tip de caligrafie scrisă de mână. Acest tip de formatare va păstra utilizatorii într-o stare de mirare și va atinge un obiectiv de standarde de design mult mai înalte.

Veți dori să implementați stiluri asemănătoare cu toate paginile dvs. de conectare. Eu cu siguranță nu aș recomanda lipirea cu același stil de text de intrare și opțiuni / meniuri de selectare. Atunci când vă jogniți creierul pentru creativitate, luați în considerare modul în care ar trebui să fie amplasat fiecare element: spațiu suficient între straturi, text mare ușor de citit și link-uri bara laterală la linia directă de poștă electronică.

jQuery Boxes de conectare

Acest lucru a fost folosit pe nenumărate site-uri web în trecut și cu siguranță va fi văzut în cadrul proiectelor de vârstă nouă. Au trecut mult timp zilele în care practicile standard ar aduce utilizatorilor o nouă pagină pentru fiecare etapă a procesului de conectare. În mod normal, aceasta ar însemna o pagină pentru introducerea datelor și o pagină nouă pentru procesarea informațiilor de conectare.

Pixel2Life oferă o perspectivă fantastică asupra unui nou domeniu de introducere a datelor. Din pagina de pornire, puteți face clic pe link-ul de conectare și puteți afișa o casetă de conectare dinamică jQuery. Acest formular conține un apel Ajax către un script extern PHP care verifică datele de autentificare ale informațiilor dvs. de conectare și, după ce a fost procesat, acordă sau refuză accesul.

Dacă faceți un alt pas, astute poate observa un link de înregistrare direct sub caseta de autentificare. Aceasta oferă o experiență mult mai lină pentru utilizatori pentru cei care doresc să se înscrie pentru site, dar nu pot găsi linkul de înregistrare.

Dacă un utilizator nu are un cont, dar ar dori să facă un astfel de cont, acest lucru le aduce pe pagina de înregistrare fără glitches de pagini bug-uri. Caseta de conectare ar fi în continuare o opțiune viabilă pentru accesarea contului tău, permițând însă opțiunea să ofere ocazie pentru rezultate mai mari și volum mai mare de noi solicitanți de înregistrare.

Înregistrarea simplă a unei pagini

O altă paradigmă de schimbare pe care o vedem este lipsa unor astfel de detalii pentru înregistrările de cont noi. Aceasta nu este neapărat o statistică proastă, presupunând că utilizatorii sunt în creștere nerabdatori în completarea datelor. Numerele sugerează de fapt site-uri web cu pagini mai scurte de înregistrare mai grele listele de utilizatori noi pe o bază zilnică.

Sikbox oferă o opțiune ușoară pentru vizitatori de a crea o casetă de căutare proprie pentru un site web. Singura cerință este propriul dvs. domeniu personalizat, pentru a oferi rezultate de căutare pentru. Câmpurile de introducere sunt mari, textul este foarte simplu de citit și există absolut nici o reclama pentru a distrage utilizatorii de sarcina de a-și construi forma de căutare!

Acum aceasta nu este cea mai bună formă de a construi atunci când vă creați propria pagină de înregistrare pentru un forum sau o arhivă de blog. Acestea vor, cel puțin prin definiție standard, cel puțin să necesite un anumit tip de combinație de adrese de e-mail / nume de utilizator împreună cu o parolă. Unele aplicații web de vârstă mică vor genera parole dinamice pentru utilizatori doar pentru a face procesul de înregistrare mai rapid.

Desigur, compromisul aici este lipsit de control asupra scopului utilizatorului de a-și genera propria parolă pe care mulți oameni sunt obișnuiți să.

Construiți efectele flashy

Una dintre cele mai mari experiențe de înregistrare pe care le-am avut vreodată a fost crearea primului meu cont Tumblr. Pagina de pornire a site-ului lor oferă atât un formular de logare și de înregistrare plasat direct sub unul altuia cu noi efecte de evidențiere / estompare CSS3.

Această abordare sistematică este similară în ceea ce privește zona de conectare a jQuery a Pixel2Life. Cu toate acestea, diferența cu Tumblr este că rețeaua nu poate oferi niciun conținut celor care nu au un blog (în afară de navigarea altor conturi). Avantajul real al tumblr este crearea unui blog propriu și urmărirea altora - astfel, obiectivul dvs. principal pe prima pagină este fie să vă creați un cont, fie să vă conectați.

Există câteva erori cu acest sistem. Mai ales în cadrul IE6 / IE7 care nu suportă aceste noi proprietăți CSS. De asemenea, folosit pe pagina de pornire este un sistem pentru adăugarea elementelor de etichetă în valorile de intrare în formă - în esență, depășirea “Mod implicit” caractere utilizate pentru casetele de e-mail / parolă.

Aceste etichete se estompează pe focalizare în browserele moderne, cum ar fi Chrome / Firefox. Dar nici un astfel de noroc cu browserele depreciate care, după cum vă puteți imagina, este destul de enervant, încercând să vă recitesc propria intrare!

20+ Exemple de design de formă frumoasă

Mai jos este o galerie scurtă de noutăți a unor modele fantastice de formă de autentificare. Acestea au fost selectate de pe web și includ numeroase forme de aplicații web. Dacă aveți sugestii pentru alte site-uri, puteți să le partajați în secțiunea de comentarii de mai jos!

Știri din Snoggle