Prijavni / registracijski obrazec Ideje in lepi primeri

V celotnem sodobnem spletu vidimo vedno več mest za uporabniške vnose. Te vključujejo nakupovalne vozičke, interaktivne spletne igre in prav gotovo obrazce za registracijo spletnih strani. Zdi se, da se oblikovalci ne bi smeli osredotočati le na oblikovanje strani, temveč tudi na estetiko oblike.

Razmislite, koliko obrazcev ste izpolnili v svoji internetni zgodovini. Obstaja nešteto primerov teh iz forumov, oglasnih deskah, blogih in še veliko več. V tem članku si bomo ogledali nekaj velikih trikov za oblikovanje obrazcev na strani.

Smiselno je razmisliti o nekaterih točkah iz objektivne perspektive. Čeprav veliko prijavnih in registracijskih obrazcev dobro deluje z eno vrsto spletnega mesta, ni pravnomočne sodbe o tem, kaj je “najbolje” rešitev. Uporabite svojo intuicijo oblikovanja, da uporabite koščke in koščke iz oblik, ki jih želite.

Razmislite o več vnosih

Če želite začeti stvari, razmislite o majhnem kontaktnem obrazcu iz spletnega dizajna Fundacije Six. Da, to ni obrazec za prijavo, zato ga je mogoče malo usmeriti. Vendar je njihova zasnova strani zelo impresivna in vam pokaže, kaj lahko doseže malo ustvarjalnosti.

Vsako od vnosnih polj vam nudi prostor za vnos osebnih kontaktnih informacij - ime, e-pošta itd. Slogi segajo daleč od običajnega, saj ponujajo uporabniški vnos v obliki ročno napisane kaligrafije. Ta oblika oblikovanja bo vaše uporabnike obdržala v čudnem stanju in dosegla cilj, ki je veliko višji.

Takšne sloge boste želeli uveljaviti podobno kot na vseh vaših prijavnih straneh. Vsekakor ne bi priporočal, da bi se držali istega načina vnosnega besedila in možnosti / izbranih menijev. Ko ste pripravljeni na ustvarjalnost, razmislite o tem, kako naj bo vsak element postavljen: veliko prostora med plastmi, veliko lahko berljivo besedilo in celo povezave s stransko vrstico na njihovo neposredno e-poštno linijo.

JQuery Polja za prijavo

To je bilo uporabljeno na neštetih spletnih straneh v preteklosti in bo zagotovo vidno v novih modelih. Dolgo so odšli dnevi, ko bi običajna praksa uporabnike pripeljala na novo stran za vsak korak postopka prijave. Običajno bi to pomenilo stran za vnos vaših podatkov in tudi novo stran za obdelavo podatkov za prijavo.

Pixel2Life ponuja fantastičen vpogled v novo področje vnosa podatkov. Na njihovi domači strani lahko kliknete povezavo za prijavo in odprete dinamično prijavno polje, ki ga poganja jQuery. Ta obrazec vsebuje klic Ajax k zunanjemu skriptu PHP, ki preverja poverilnice vaših podatkov za prijavo in, ko je obdelan, odobri ali zavrne dostop.

Še en korak naprej lahko spoznamo povezavo za registracijo neposredno pod prijavnim poljem. To ponuja veliko bolj gladko uporabniško izkušnjo za tiste, ki se želijo prijaviti na spletno mesto, vendar ne morejo najti povezave za registracijo.

Če uporabnik nima računa, vendar bi ga želel ustvariti, jih to pripelje na stran za registracijo brez napak na stranski strani. Polje za prijavo bi bilo še vedno izvedljiva možnost za dostop do lastnega računa, vendar pa dovoljuje možnost za večjo donosnost in večje količine novih registracijskih zavezancev..

Enostavne registracije na eni strani

Druga spreminjajoča se paradigma, ki jo vidimo, je pomanjkanje takih podrobnosti za nove registracije računov. To ni nujno slaba statistika, če predpostavljamo, da so uporabniki vedno bolj nestrpni do izpolnjevanja podatkov. Številke dejansko kažejo na spletne strani s krajšimi registracijskimi stranmi težji dnevnih seznamov novih uporabnikov.

Sikbox ponuja lahkotno možnost za obiskovalce, da ustvarijo lastno iskalno polje za spletno mesto. Edina zahteva je domena po meri, ki omogoča iskanje rezultatov iskanja. Polja za vnos so velika, besedilo je zelo preprosto za branje in obstajajo nobenih oglasov odvrniti uporabnike od naloge oblikovanja obrazca za iskanje!

Zdaj to ni najboljša oblika, ki jo je treba zgraditi, ko ustvarjate svojo lastno registracijsko stran za arhiv foruma ali spletnega dnevnika. Ti bodo po standardni definiciji zahtevali vsaj vrsto kombinacije e-poštnega naslova / uporabniškega imena skupaj z geslom. Nekatere spletne aplikacije za novo starost bodo ustvarjale dinamična gesla za uporabnike, da bodo postopek registracije hitrejši.

Seveda pa kompromis tukaj nima nadzora nad koncem uporabnika za ustvarjanje lastnega gesla, na katerega so navadili številni ljudje.

Zgradite Flashy Effects

Ena izmed največjih izkušenj pri prijavi, ki sem jih kdajkoli imel, je bila izdelava mojega prvega računa Tumblr. Domača stran njihovega spletnega mesta ponuja prijavni obrazec in obrazec za prijavo, ki sta nameščena neposredno pod drugo, z novimi učinki osvetlitve / zbledljivosti CSS3..

Ta sistematičen pristop je podoben glede območja za prijavo jQuery Pixel2Life. Vendar pa razlika v Tumblr je, da omrežje ne more ponuditi nobene vsebine tistim, ki nimajo spletnega dnevnika (razen brskanja po drugih računih). Prava korist od tumblr je ustvarjanje lastnega bloga in spremljanje drugih - zato je vaš glavni cilj na prvi strani bodisi ustvariti račun ali se prijaviti.

Obstaja nekaj napak s tem sistemom. Predvsem v okviru IE6 / IE7, ki ne podpira teh novih lastnosti CSS. Na domači strani je uporabljen tudi sistem za dodajanje elementov etikete v vhodne vrednosti obrazca - v bistvu nadvlada “privzeto” znaki, ki se uporabljajo za polja za e-pošto / geslo.

Te oznake se osredotočajo na moderne brskalnike, kot je Chrome / Firefox. Toda ni nobene sreče z opuščenimi brskalniki, ki so, kot si lahko predstavljate, precej neprijetni, ko poskušate ponovno prebrati svoj vnos!

20+ primerov lepega oblikovanja obrazcev

Spodaj je na voljo hitra galerija s fantastičnimi prijavnimi obrazci. Izbrali so jih iz spleta in vključujejo številne oblike spletnih aplikacij. Če imate predloge za druga spletna mesta, jih lahko delite v spodnjem razdelku za komentarje!

Snoggle News